From 614b141ec88c3f68e3608643f6e102b2ac3b68cb Mon Sep 17 00:00:00 2001 From: root Date: Sat, 25 May 2024 21:57:57 +1000 Subject: [PATCH 01/14] default and dark mode input fields started --- package-lock.json | 51 +++++++++++++ .../src/inputs/Input_field.styled.tsx | 49 +++++++++++++ pnpm-lock.yaml | 71 +------------------ 3 files changed, 103 insertions(+), 68 deletions(-) create mode 100644 package-lock.json create mode 100644 packages/components/src/inputs/Input_field.styled.tsx diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..bd131ca --- /dev/null +++ b/package-lock.json @@ -0,0 +1,51 @@ +{ + "name": "ui-components", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "dependencies": { + "@stitches/react": "^1.2.8" + }, + "devDependencies": {} + }, + "node_modules/@stitches/react": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/@stitches/react/-/react-1.2.8.tgz", + "integrity": "sha512-9g9dWI4gsSVe8bNLlb+lMkBYsnIKCZTmvqvDG+Avnn69XfmHZKiaMrx7cgTaddq7aTPPmXiTsbFcUy0xgI4+wA==", + "peerDependencies": { + "react": ">= 16.3.0" + } + }, + "node_modules/js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "peer": true + }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "peer": true, + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, + "node_modules/react": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", + "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + } + } +} diff --git a/packages/components/src/inputs/Input_field.styled.tsx b/packages/components/src/inputs/Input_field.styled.tsx new file mode 100644 index 0000000..4c5fb3c --- /dev/null +++ b/packages/components/src/inputs/Input_field.styled.tsx @@ -0,0 +1,49 @@ +import { createStitches, createTheme } from '@stitches/react'; + +// Default colors +export const { styled } = createStitches({ + theme: { + colors: { + primaryBackground: '#f8f8f9', + disabledBackground: '#edeef1', + unfilledText: '#5f6e82', + filledText: '#383c4c', + disabledText: '#dadee2', + border: '#aeb1b4', + focusedBorder: '#4b5766', + error: '#be3a3a', + }, + }, +}); + +export const darkTheme = createTheme({ + colors: { + primaryBackground: '##242c37', + disabledBackground: '#323e4d', + unfilledText: '#7a8797', + filledText: '#eef0f2', + disabledText: '#404f63', + border: '#404f63', + focusedBorder: '#bdc3cb', + error: '#f47c7c', + }, +}); + +export const InputFieldContainer = styled('input', { + variants: { + type: { + default: { + borderRadius: 4, + borderWidth: 0, + backgroundColor: '$primaryBackground', + color: '$unfilledText', + borderColor: '', + cursor: 'pointer', + '&:hover': { + + } + }, + + } + } +}) \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b68c721..f73a233 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6,11 +6,7 @@ settings: importers: - .: - devDependencies: - turbo: - specifier: 1.6.3 - version: 1.6.3 + .: {} apps/storybook: dependencies: @@ -4316,40 +4312,6 @@ packages: peerDependencies: typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta' - turbo-darwin-64@1.6.3: - resolution: {integrity: sha512-QmDIX0Yh1wYQl0bUS0gGWwNxpJwrzZU2GIAYt3aOKoirWA2ecnyb3R6ludcS1znfNV2MfunP+l8E3ncxUHwtjA==} - cpu: [x64] - os: [darwin] - - turbo-darwin-arm64@1.6.3: - resolution: {integrity: sha512-75DXhFpwE7CinBbtxTxH08EcWrxYSPFow3NaeFwsG8aymkWXF+U2aukYHJA6I12n9/dGqf7yRXzkF0S/9UtdyQ==} - cpu: [arm64] - os: [darwin] - - turbo-linux-64@1.6.3: - resolution: {integrity: sha512-O9uc6J0yoRPWdPg9THRQi69K6E2iZ98cRHNvus05lZbcPzZTxJYkYGb5iagCmCW/pq6fL4T4oLWAd6evg2LGQA==} - cpu: [x64] - os: [linux] - - turbo-linux-arm64@1.6.3: - resolution: {integrity: sha512-dCy667qqEtZIhulsRTe8hhWQNCJO0i20uHXv7KjLHuFZGCeMbWxB8rsneRoY+blf8+QNqGuXQJxak7ayjHLxiA==} - cpu: [arm64] - os: [linux] - - turbo-windows-64@1.6.3: - resolution: {integrity: sha512-lKRqwL3mrVF09b9KySSaOwetehmGknV9EcQTF7d2dxngGYYX1WXoQLjFP9YYH8ZV07oPm+RUOAKSCQuDuMNhiA==} - cpu: [x64] - os: [win32] - - turbo-windows-arm64@1.6.3: - resolution: {integrity: sha512-BXY1sDPEA1DgPwuENvDCD8B7Hb0toscjus941WpL8CVd10hg9pk/MWn9CNgwDO5Q9ks0mw+liDv2EMnleEjeNA==} - cpu: [arm64] - os: [win32] - - turbo@1.6.3: - resolution: {integrity: sha512-FtfhJLmEEtHveGxW4Ye/QuY85AnZ2ZNVgkTBswoap7UMHB1+oI4diHPNyqrQLG4K1UFtCkjOlVoLsllUh/9QRw==} - hasBin: true - tween-functions@1.2.0: resolution: {integrity: sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA==} @@ -6737,11 +6699,11 @@ snapshots: '@types/eslint-scope@3.7.7': dependencies: '@types/eslint': 8.56.10 - '@types/estree': 0.0.51 + '@types/estree': 1.0.5 '@types/eslint@8.56.10': dependencies: - '@types/estree': 0.0.51 + '@types/estree': 1.0.5 '@types/json-schema': 7.0.15 '@types/eslint@8.56.2': @@ -9622,33 +9584,6 @@ snapshots: tslib: 1.14.1 typescript: 4.6.4 - turbo-darwin-64@1.6.3: - optional: true - - turbo-darwin-arm64@1.6.3: - optional: true - - turbo-linux-64@1.6.3: - optional: true - - turbo-linux-arm64@1.6.3: - optional: true - - turbo-windows-64@1.6.3: - optional: true - - turbo-windows-arm64@1.6.3: - optional: true - - turbo@1.6.3: - optionalDependencies: - turbo-darwin-64: 1.6.3 - turbo-darwin-arm64: 1.6.3 - turbo-linux-64: 1.6.3 - turbo-linux-arm64: 1.6.3 - turbo-windows-64: 1.6.3 - turbo-windows-arm64: 1.6.3 - tween-functions@1.2.0: {} type-check@0.4.0: From 0ee92d530eca74c60e109a3b32eee8dad1ba220c Mon Sep 17 00:00:00 2001 From: root Date: Tue, 28 May 2024 15:18:11 +1000 Subject: [PATCH 02/14] input.tsx, input.types.tsx and index.ts files made for input fields --- .../components/src/inputs/Input.styled.tsx | 106 ++++++++++++++++++ packages/components/src/inputs/Input.tsx | 18 +++ packages/components/src/inputs/Input.types.ts | 11 ++ .../src/inputs/Input_field.styled.tsx | 49 -------- packages/components/src/inputs/index.ts | 4 + 5 files changed, 139 insertions(+), 49 deletions(-) create mode 100644 packages/components/src/inputs/Input.styled.tsx create mode 100644 packages/components/src/inputs/Input.tsx create mode 100644 packages/components/src/inputs/Input.types.ts delete mode 100644 packages/components/src/inputs/Input_field.styled.tsx create mode 100644 packages/components/src/inputs/index.ts diff --git a/packages/components/src/inputs/Input.styled.tsx b/packages/components/src/inputs/Input.styled.tsx new file mode 100644 index 0000000..955d904 --- /dev/null +++ b/packages/components/src/inputs/Input.styled.tsx @@ -0,0 +1,106 @@ +import { createStitches, createTheme } from '@stitches/react'; + +// Default colors +export const { styled } = createStitches({ + theme: { + colors: { + background: '#f8f8f9', + disabled: '#edeef1', + unfilledText: '#5f6e82', + filledText: '#383c4c', + disabledText: '#dadee2', + border: '#aeb1b4', + focusedBorder: '#4b5766', + error: '#be3a3a', + }, + }, +}); + +export const darkTheme = createTheme({ + colors: { + background: '##242c37', + disabled: '#323e4d', + unfilledText: '#7a8797', + filledText: '#eef0f2', + disabledText: '#404f63', + border: '#404f63', + focusedBorder: '#bdc3cb', + error: '#f47c7c', + }, +}); + +export const InputFieldContainer = styled('input', { + borderRadius: 4, + borderWidth: 0, + cursor: 'pointer', + backgroundColor: '$background', + borderColor: '$border', + + variants: { + type: { + default: { + color: '$unfilledText', + '&:focus': { + borderColor: '$focusedBorder', + }, + }, + filled: { + color: '$filledText', + '&:focus': { + borderColor: '$focusedBorder', + } + }, + error: { + color: '$error', + borderColor: '$error', + }, + }, + disabled: { + true:{ + backgroundColor: '$disabled', + color: '$disabledText', + }, + }, + // error: { + // true: { + // color: '$error', + // borderColor: '$error', + // }, + // }, + }, + + // if an input field is disabled, this takes priority over if its type is filled or default (unfilled) + compoundVariants: [ + { + type: 'filled', + disabled: true, + css: { + borderRadius: 4, + borderWidth: 0, + backgroundColor: '$disabled', + color: '$disabledText', + cursor: 'not-allowed', + '&:hover': { + backgroundColor: '$disabled', + } + } + }, + ], + + defaultVariants: { + type: 'default', + disabled: false, + }, + + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'flex-start', + fontSize: 16, + paddingTop: 10, + paddingBottom: 10, + paddingLeft: 12, + paddingRight: 12, + height: 44, + gap: 6 +}) diff --git a/packages/components/src/inputs/Input.tsx b/packages/components/src/inputs/Input.tsx new file mode 100644 index 0000000..baeae04 --- /dev/null +++ b/packages/components/src/inputs/Input.tsx @@ -0,0 +1,18 @@ +import { globalStyles } from "@/index.styled"; +import { InputFieldContainer, darkTheme } from "./Input.styled"; +import { type InputProps } from "./Input.types"; + +export const InputField = ({theme, type, disabled}: InputProps) => { + + globalStyles(); + + return ( + {} : onclick} + disabled={disabled} + > + + ) +} \ No newline at end of file diff --git a/packages/components/src/inputs/Input.types.ts b/packages/components/src/inputs/Input.types.ts new file mode 100644 index 0000000..7e4efbe --- /dev/null +++ b/packages/components/src/inputs/Input.types.ts @@ -0,0 +1,11 @@ +import { ReactElement } from "react"; + +export type InputProps = { + theme?: "light" | "dark"; + + type?: "default" | "filled" | "error"; + + disabled?: boolean; + + onClick?: () => void; +} \ No newline at end of file diff --git a/packages/components/src/inputs/Input_field.styled.tsx b/packages/components/src/inputs/Input_field.styled.tsx deleted file mode 100644 index 4c5fb3c..0000000 --- a/packages/components/src/inputs/Input_field.styled.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { createStitches, createTheme } from '@stitches/react'; - -// Default colors -export const { styled } = createStitches({ - theme: { - colors: { - primaryBackground: '#f8f8f9', - disabledBackground: '#edeef1', - unfilledText: '#5f6e82', - filledText: '#383c4c', - disabledText: '#dadee2', - border: '#aeb1b4', - focusedBorder: '#4b5766', - error: '#be3a3a', - }, - }, -}); - -export const darkTheme = createTheme({ - colors: { - primaryBackground: '##242c37', - disabledBackground: '#323e4d', - unfilledText: '#7a8797', - filledText: '#eef0f2', - disabledText: '#404f63', - border: '#404f63', - focusedBorder: '#bdc3cb', - error: '#f47c7c', - }, -}); - -export const InputFieldContainer = styled('input', { - variants: { - type: { - default: { - borderRadius: 4, - borderWidth: 0, - backgroundColor: '$primaryBackground', - color: '$unfilledText', - borderColor: '', - cursor: 'pointer', - '&:hover': { - - } - }, - - } - } -}) \ No newline at end of file diff --git a/packages/components/src/inputs/index.ts b/packages/components/src/inputs/index.ts new file mode 100644 index 0000000..d6e41a2 --- /dev/null +++ b/packages/components/src/inputs/index.ts @@ -0,0 +1,4 @@ +import { InputField } from "./Input"; +import { type InputProps } from "./Input.types"; + +export { InputField, type InputProps }; \ No newline at end of file From 47c448ff22c2ac1cb0fd63a15713ab2bad01e14d Mon Sep 17 00:00:00 2001 From: root Date: Wed, 29 May 2024 14:43:11 +1000 Subject: [PATCH 03/14] added dark mode, fixed small css errors --- .../inputFields/InputField.stories.tsx | 47 +++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 apps/storybook/src/stories/examples/inputFields/InputField.stories.tsx diff --git a/apps/storybook/src/stories/examples/inputFields/InputField.stories.tsx b/apps/storybook/src/stories/examples/inputFields/InputField.stories.tsx new file mode 100644 index 0000000..0710777 --- /dev/null +++ b/apps/storybook/src/stories/examples/inputFields/InputField.stories.tsx @@ -0,0 +1,47 @@ +import React from "react"; +import { Meta, StoryObj } from '@storybook/react'; +import { InputField, type InputProps } from '@csesoc/ui-components/src/inputs'; + +const meta: Meta = { + component: InputField, + title: 'Example/InputField', + argTypes: {}, +}; +export default meta; + +type Story = StoryObj; + +export const Default: Story = (args: InputProps) => ; +Default.args = { + theme: 'light', + type: 'default', + disabled: false, +} + +export const Disabled: Story = (args: InputProps) => ; +Disabled.args = { + theme: 'light', + type: 'default', + disabled: true +} + +// export const Error: Story = (args: InputProps) => ; +// Error.args = { +// theme: 'light', +// type: 'error', +// disabled: false +// } + +export const Dark: Story = (args: InputProps) => ; +Dark.args = { + theme: 'dark', + type: 'default', + disabled: false, +} + +export const DisabledDark: Story = (args: InputProps) => ; +DisabledDark.args = { + theme: 'dark', + type: 'default', + disabled: true +} \ No newline at end of file From 6e159b7585c759f01fac7b6e4ed1abdb0e030ef3 Mon Sep 17 00:00:00 2001 From: root Date: Wed, 5 Jun 2024 14:48:16 +1000 Subject: [PATCH 04/14] input field type and status refactored from boolean to selection type --- .../components/src/inputs/Input.styled.tsx | 155 ++++++++++-------- packages/components/src/inputs/Input.tsx | 77 ++++++++- packages/components/src/inputs/Input.types.ts | 6 +- packages/components/src/inputs/index.ts | 7 +- 4 files changed, 164 insertions(+), 81 deletions(-) diff --git a/packages/components/src/inputs/Input.styled.tsx b/packages/components/src/inputs/Input.styled.tsx index 955d904..f52a30d 100644 --- a/packages/components/src/inputs/Input.styled.tsx +++ b/packages/components/src/inputs/Input.styled.tsx @@ -4,103 +4,124 @@ import { createStitches, createTheme } from '@stitches/react'; export const { styled } = createStitches({ theme: { colors: { - background: '#f8f8f9', - disabled: '#edeef1', - unfilledText: '#5f6e82', - filledText: '#383c4c', - disabledText: '#dadee2', - border: '#aeb1b4', + background: '#F8F8F9', + disabledBackground: '#EDEEF1', + unfilledText: '#59697D', + filledText: '#323E4D', + disabledText: '#DADEE2', + border: '#DADEE2', focusedBorder: '#4b5766', - error: '#be3a3a', + error: '#EF4444', }, }, }); export const darkTheme = createTheme({ colors: { - background: '##242c37', - disabled: '#323e4d', - unfilledText: '#7a8797', - filledText: '#eef0f2', - disabledText: '#404f63', - border: '#404f63', - focusedBorder: '#bdc3cb', - error: '#f47c7c', + background: '#242C37', + disabledBackground: '#323E4D', + unfilledText: '#7A8797', + filledText: '#EEF0F2', + disabledText: '#404F63', + border: '#DADEE2', + focusedBorder: '#BDC3CB', + error: '#F47C7C', }, }); -export const InputFieldContainer = styled('input', { +export const InputFieldWrapper = styled('div', { + position: 'relative', + display: 'flex', + flexDirection: 'column', + alignItems: 'left', + justifyContent: 'flex-start', +}) + +export const InputFieldContainer = styled('input', { + position: 'relative', + fontSize: 16, borderRadius: 4, - borderWidth: 0, - cursor: 'pointer', backgroundColor: '$background', - borderColor: '$border', - + border: '1.5px solid $border', + padding: '0px 15px 0px 15px', + height: 45, + width: 354, + gap: 6, + + '&::placeholder': { + color: '$unfilledText', + }, + variants: { type: { default: { - color: '$unfilledText', - '&:focus': { + color: '$filledText', + cursor: 'pointer', + '&:active': { borderColor: '$focusedBorder', }, }, - filled: { + password: { color: '$filledText', - '&:focus': { + cursor: 'pointer', + '&:active': { borderColor: '$focusedBorder', - } + }, + }, + icon: { + color: '$filledText', + cursor: 'pointer', + '&:active': { + borderColor: '$focusedBorder', + }, + } + }, + state: { + default: {}, + disabled: { + cursor: 'not-allowed', // currently doesnt show + pointerEvents: 'none', + backgroundColor: '$disabledBackground', + '&::placeholder': { + color: '$disabledText', + }, }, error: { color: '$error', + cursor: 'pointer', borderColor: '$error', + '&:focus, &:focus-within': { + color: '$filledText', + '&::placeholder': { + color: '$unfilledText', + }, + }, + '&::placeholder': { + color: '$error', + }, }, }, - disabled: { - true:{ - backgroundColor: '$disabled', - color: '$disabledText', - }, - }, - // error: { - // true: { - // color: '$error', - // borderColor: '$error', - // }, - // }, }, - // if an input field is disabled, this takes priority over if its type is filled or default (unfilled) - compoundVariants: [ - { - type: 'filled', - disabled: true, - css: { - borderRadius: 4, - borderWidth: 0, - backgroundColor: '$disabled', - color: '$disabledText', - cursor: 'not-allowed', - '&:hover': { - backgroundColor: '$disabled', - } - } - }, - ], - defaultVariants: { type: 'default', - disabled: false, + state: 'default', }, +}) - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'flex-start', - fontSize: 16, - paddingTop: 10, - paddingBottom: 10, - paddingLeft: 12, - paddingRight: 12, - height: 44, - gap: 6 +export const SmallInputFieldContainer = styled(InputFieldContainer, { + height: 30, +}); + +export const ErrorMessage = styled('div', { + fontFamily: 'inherit', + fontSize: '13.33px', + fontWeight: 500, + color: '$error', }) + +export const IconContainer = styled('span', { + position: 'absolute', + right: '500px', /* Adjust to your preference */ + cursor: 'pointer', +}) \ No newline at end of file diff --git a/packages/components/src/inputs/Input.tsx b/packages/components/src/inputs/Input.tsx index baeae04..feedf57 100644 --- a/packages/components/src/inputs/Input.tsx +++ b/packages/components/src/inputs/Input.tsx @@ -1,18 +1,77 @@ import { globalStyles } from "@/index.styled"; -import { InputFieldContainer, darkTheme } from "./Input.styled"; +import { darkTheme, InputFieldWrapper, InputFieldContainer, SmallInputFieldContainer, ErrorMessage, IconContainer } from "./Input.styled"; import { type InputProps } from "./Input.types"; +import { useState } from "react"; +import eyeOpen from '/root/Downloads/ui-components/apps/storybook/src/assets/icons/eye-on.png'; +import eyeClosed from '/root/Downloads/ui-components/apps/storybook/src/assets/icons/eye-off.png'; -export const InputField = ({theme, type, disabled}: InputProps) => { + +export const InputField = ({ theme, type, state, onClick }: InputProps) => { globalStyles(); + const [isFocused, setIsFocused] = useState(false); + const [isPasswordVisible, setIsPasswordVisible] = useState(false); + + const handleToggleVisibility = () => { + setIsPasswordVisible(!isPasswordVisible); + }; + return ( - {} : onclick} - disabled={disabled} - > - + + setIsFocused(true)} + onBlur={() => setIsFocused(false)} + + placeholder="Enter some text" + className={theme === "dark" ? darkTheme : ''} + state={state} + type={type} + + onClick={state === "disabled" ? () => {} : onClick} + disabled={state === "disabled"} + /> + { type === 'password' && + + Toggle visibility + + } + {state === "error" && !isFocused && Please try again!} + ) +} + +export const SmallInputField = ({ theme, type, state, onClick }: InputProps) => { + + globalStyles(); + + const [isFocused, setIsFocused] = useState(false); + const [isPasswordVisible, setIsPasswordVisible] = useState(false); + + const handleToggleVisibility = () => { + setIsPasswordVisible(!isPasswordVisible); + }; + + return ( + + setIsFocused(true)} + onBlur={() => setIsFocused(false)} + + placeholder="Enter some text" + className={theme === "dark" ? darkTheme : ''} + state={state} + type={type} + + onClick={state === "disabled" ? () => {} : onClick} + disabled={state === "disabled"} + /> + { type === 'password' && + + Toggle visibility + + } + {state === "error" && !isFocused && Please try again!} + + ) } \ No newline at end of file diff --git a/packages/components/src/inputs/Input.types.ts b/packages/components/src/inputs/Input.types.ts index 7e4efbe..25c0bbd 100644 --- a/packages/components/src/inputs/Input.types.ts +++ b/packages/components/src/inputs/Input.types.ts @@ -1,11 +1,13 @@ import { ReactElement } from "react"; export type InputProps = { + placeholder?: string + theme?: "light" | "dark"; - type?: "default" | "filled" | "error"; + type?: "default" | "password" | "icon"; - disabled?: boolean; + state?: "default" | "disabled"| "error"; onClick?: () => void; } \ No newline at end of file diff --git a/packages/components/src/inputs/index.ts b/packages/components/src/inputs/index.ts index d6e41a2..e5d5623 100644 --- a/packages/components/src/inputs/index.ts +++ b/packages/components/src/inputs/index.ts @@ -1,4 +1,5 @@ -import { InputField } from "./Input"; -import { type InputProps } from "./Input.types"; +import { InputField, SmallInputField } from "./Input"; +import { type InputProps as InputPropsType } from "./Input.types"; -export { InputField, type InputProps }; \ No newline at end of file +export { InputField, SmallInputField }; +export type InputProps = InputPropsType; \ No newline at end of file From fa2fd862c2c4e7d2f55e3d936a58e751cce978e4 Mon Sep 17 00:00:00 2001 From: root Date: Wed, 5 Jun 2024 14:49:08 +1000 Subject: [PATCH 05/14] storybook stories input props edited to reflect changes --- .../inputFields/InputField.stories.tsx | 31 ++++++----- .../inputFields/SmallInputField.stories.tsx | 54 +++++++++++++++++++ 2 files changed, 73 insertions(+), 12 deletions(-) create mode 100644 apps/storybook/src/stories/examples/inputFields/SmallInputField.stories.tsx diff --git a/apps/storybook/src/stories/examples/inputFields/InputField.stories.tsx b/apps/storybook/src/stories/examples/inputFields/InputField.stories.tsx index 0710777..9d022ff 100644 --- a/apps/storybook/src/stories/examples/inputFields/InputField.stories.tsx +++ b/apps/storybook/src/stories/examples/inputFields/InputField.stories.tsx @@ -11,37 +11,44 @@ export default meta; type Story = StoryObj; -export const Default: Story = (args: InputProps) => ; -Default.args = { +export const Light: Story = (args: InputProps) => ; +Light.args = { theme: 'light', type: 'default', - disabled: false, + state: 'default' } export const Disabled: Story = (args: InputProps) => ; Disabled.args = { theme: 'light', type: 'default', - disabled: true + state: 'default' } -// export const Error: Story = (args: InputProps) => ; -// Error.args = { -// theme: 'light', -// type: 'error', -// disabled: false -// } +export const Error: Story = (args: InputProps) => ; +Error.args = { + theme: 'light', + type: 'default', + state: 'error' +} export const Dark: Story = (args: InputProps) => ; Dark.args = { theme: 'dark', type: 'default', - disabled: false, + state: 'default' } export const DisabledDark: Story = (args: InputProps) => ; DisabledDark.args = { theme: 'dark', type: 'default', - disabled: true + state: 'disabled' +} + +export const ErrorDark: Story = (args: InputProps) => ; +ErrorDark.args = { + theme: 'dark', + type: 'default', + state: 'error' } \ No newline at end of file diff --git a/apps/storybook/src/stories/examples/inputFields/SmallInputField.stories.tsx b/apps/storybook/src/stories/examples/inputFields/SmallInputField.stories.tsx new file mode 100644 index 0000000..bffef93 --- /dev/null +++ b/apps/storybook/src/stories/examples/inputFields/SmallInputField.stories.tsx @@ -0,0 +1,54 @@ +import React from "react"; +import { Meta, StoryObj } from '@storybook/react'; +import { SmallInputField, type InputProps } from '@csesoc/ui-components/src/inputs'; + +const meta: Meta = { + component: SmallInputField, + title: 'Example/SmallInputField', + argTypes: {}, +}; +export default meta; + +type Story = StoryObj; + +export const Light: Story = (args: InputProps) => ; +Light.args = { + theme: 'light', + type: 'default', + state: 'default' +}; + +export const Disabled: Story = (args: InputProps) => ; +Disabled.args = { + theme: 'light', + type: 'default', + state: 'disabled' +}; + +export const Error: Story = (args: InputProps) => ; +Error.args = { + theme: 'light', + type: 'default', + state: 'error' +}; + +export const Dark: Story = (args: InputProps) => ; +Dark.args = { + theme: 'dark', + type: 'default', + state: 'default' +}; + +export const DisabledDark: Story = (args: InputProps) => ; +DisabledDark.args = { + theme: 'dark', + type: 'default', + state: 'disabled' +}; + +export const ErrorDark: Story = (args: InputProps) => ; +ErrorDark.args = { + theme: 'dark', + type: 'default', + state: 'error' +}; \ No newline at end of file From 89557aae1f677e2e95854e4d73cde027a463fdf2 Mon Sep 17 00:00:00 2001 From: root Date: Wed, 5 Jun 2024 14:49:35 +1000 Subject: [PATCH 06/14] password input type icon added --- apps/storybook/src/assets/icons/eye-off.png | Bin 0 -> 816 bytes apps/storybook/src/assets/icons/eye-on.png | Bin 0 -> 759 bytes 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 apps/storybook/src/assets/icons/eye-off.png create mode 100644 apps/storybook/src/assets/icons/eye-on.png diff --git a/apps/storybook/src/assets/icons/eye-off.png b/apps/storybook/src/assets/icons/eye-off.png new file mode 100644 index 0000000000000000000000000000000000000000..a0697cd0999d8b6cd604d3b971b6a3e41bc539ac GIT binary patch literal 816 zcmV-01JC@4P)X1^@s6D=Y3@00009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yPw#0K~#7FwN+1V z5UvNJ2x7wi-ip~Y z4A9^1@91Lz3ylef z+(2+ow}I3sLlIBC#72o@wDDmE+45d4Z;cEa7=>;##{;njb#LL}AqVEs=m20+FYo3w z2S2}3&`BG0#;@vesx_eAQiF>^s4b>(d6m@ix&<()j5yz%!l3Q~a2(gjsPj)7V zte~4Z6IyKGVv;rj;V5ytp&aHGp6G@lAE6rTIf75^*&9zKy)euVq#GbtD#h)SE=`F} zs{1%%RuBpR_YVW%NCUI^g-c%~z$?yq3ml%6KqxYe$d$@ouGFi%HN6q9>XmYgVL$Lx z*e@47Vi;Y6GIRoXFt><*EFMF3%I%&oC&%Tr4Rqpf)FXz{G)<}FE$#P)-9>)KWWOK8 zGzrq@l!+sNl6Y#98lSNM!C-VqVFrc2UY@^wW~QCWH55QeVpR*8;%wlL#tpB2w66{P u(VTiR7Ql7H4kBQ}VkgSPGf+bPqxnC5hm?hXex}&~0000X1^@s6D=Y3@00009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yPC=k2~Pxx zeF^BAC3*h_03|#k3r<&FHJ0<;FTZ}3BDBUy@a$LdZ5Vi_xVp)M zKIXXDX{@hAkld4@Rnvth2}E^|*Wz|q8Z~ni{22qIArsA3FWIH9=#;B=ZQ<^ZFCX8% z_jHes4hQqMHR-f;Si5>>VMhU+Gr*~qesIi{W%)jZzxhtHrgs{(99Pr>dq;Kl{Ia{X zCNT~q=EdKaD++t|*ozwkOG3WOW(O*)xrkV4WExyJ#eZ p`e)=uQ>@rvciWhHqn*oC`3E3PPo@|UB?bTh002ovPDHLkV1hg+RNVjo literal 0 HcmV?d00001 From dd8b8a6ec8565a26af6af51ff5c88ba1f461dfdc Mon Sep 17 00:00:00 2001 From: root Date: Wed, 5 Jun 2024 21:10:53 +1000 Subject: [PATCH 07/14] added feature for password input which lets eye icon toggle text visibility accordingly --- .../inputFields/InputField.stories.tsx | 14 ++--- .../inputFields/SmallInputField.stories.tsx | 12 ++-- .../components/src/inputs/Input.styled.tsx | 55 ++++++++----------- packages/components/src/inputs/Input.tsx | 25 +++++---- packages/components/src/inputs/Input.types.ts | 2 +- 5 files changed, 51 insertions(+), 57 deletions(-) diff --git a/apps/storybook/src/stories/examples/inputFields/InputField.stories.tsx b/apps/storybook/src/stories/examples/inputFields/InputField.stories.tsx index 9d022ff..cb6fbc3 100644 --- a/apps/storybook/src/stories/examples/inputFields/InputField.stories.tsx +++ b/apps/storybook/src/stories/examples/inputFields/InputField.stories.tsx @@ -14,41 +14,41 @@ type Story = StoryObj; export const Light: Story = (args: InputProps) => ; Light.args = { theme: 'light', - type: 'default', + style: 'default', state: 'default' } export const Disabled: Story = (args: InputProps) => ; Disabled.args = { theme: 'light', - type: 'default', - state: 'default' + style: 'default', + state: 'disabled' } export const Error: Story = (args: InputProps) => ; Error.args = { theme: 'light', - type: 'default', + style: 'default', state: 'error' } export const Dark: Story = (args: InputProps) => ; Dark.args = { theme: 'dark', - type: 'default', + style: 'default', state: 'default' } export const DisabledDark: Story = (args: InputProps) => ; DisabledDark.args = { theme: 'dark', - type: 'default', + style: 'default', state: 'disabled' } export const ErrorDark: Story = (args: InputProps) => ; ErrorDark.args = { theme: 'dark', - type: 'default', + style: 'default', state: 'error' } \ No newline at end of file diff --git a/apps/storybook/src/stories/examples/inputFields/SmallInputField.stories.tsx b/apps/storybook/src/stories/examples/inputFields/SmallInputField.stories.tsx index bffef93..5d5fb1e 100644 --- a/apps/storybook/src/stories/examples/inputFields/SmallInputField.stories.tsx +++ b/apps/storybook/src/stories/examples/inputFields/SmallInputField.stories.tsx @@ -14,41 +14,41 @@ type Story = StoryObj; export const Light: Story = (args: InputProps) => ; Light.args = { theme: 'light', - type: 'default', + style: 'default', state: 'default' }; export const Disabled: Story = (args: InputProps) => ; Disabled.args = { theme: 'light', - type: 'default', + style: 'default', state: 'disabled' }; export const Error: Story = (args: InputProps) => ; Error.args = { theme: 'light', - type: 'default', + style: 'default', state: 'error' }; export const Dark: Story = (args: InputProps) => ; Dark.args = { theme: 'dark', - type: 'default', + style: 'default', state: 'default' }; export const DisabledDark: Story = (args: InputProps) => ; DisabledDark.args = { theme: 'dark', - type: 'default', + style: 'default', state: 'disabled' }; export const ErrorDark: Story = (args: InputProps) => ; ErrorDark.args = { theme: 'dark', - type: 'default', + style: 'default', state: 'error' }; \ No newline at end of file diff --git a/packages/components/src/inputs/Input.styled.tsx b/packages/components/src/inputs/Input.styled.tsx index f52a30d..51df772 100644 --- a/packages/components/src/inputs/Input.styled.tsx +++ b/packages/components/src/inputs/Input.styled.tsx @@ -31,55 +31,44 @@ export const darkTheme = createTheme({ export const InputFieldWrapper = styled('div', { position: 'relative', + width: 354, display: 'flex', flexDirection: 'column', alignItems: 'left', justifyContent: 'flex-start', }) -export const InputFieldContainer = styled('input', { +export const InputFieldContainer = styled('input', { position: 'relative', fontSize: 16, borderRadius: 4, backgroundColor: '$background', border: '1.5px solid $border', - padding: '0px 15px 0px 15px', + padding: '0px 15px', height: 45, - width: 354, + width: '100%', gap: 6, + color: '$filledText', + cursor: 'pointer', + + '&:active': { + borderColor: '$focusedBorder', + }, '&::placeholder': { color: '$unfilledText', }, variants: { - type: { - default: { - color: '$filledText', - cursor: 'pointer', - '&:active': { - borderColor: '$focusedBorder', - }, - }, - password: { - color: '$filledText', - cursor: 'pointer', - '&:active': { - borderColor: '$focusedBorder', - }, - }, - icon: { - color: '$filledText', - cursor: 'pointer', - '&:active': { - borderColor: '$focusedBorder', - }, - } + style: { + default: {}, + password: {}, + icon: {}, }, state: { default: {}, disabled: { - cursor: 'not-allowed', // currently doesnt show + cursor: 'not-allowed', pointerEvents: 'none', backgroundColor: '$disabledBackground', '&::placeholder': { @@ -104,10 +93,10 @@ export const InputFieldContainer = styled('input', { }, defaultVariants: { - type: 'default', + style: 'default', state: 'default', }, -}) +}); export const SmallInputFieldContainer = styled(InputFieldContainer, { height: 30, @@ -115,13 +104,17 @@ export const SmallInputFieldContainer = styled(InputFieldContainer, { export const ErrorMessage = styled('div', { fontFamily: 'inherit', - fontSize: '13.33px', + fontSize: 13.33, fontWeight: 500, color: '$error', }) export const IconContainer = styled('span', { - position: 'absolute', - right: '500px', /* Adjust to your preference */ + height: 24, cursor: 'pointer', + aspectRatio: 1, + position: 'absolute', + right: 15, + top: 10, + display: 'block', }) \ No newline at end of file diff --git a/packages/components/src/inputs/Input.tsx b/packages/components/src/inputs/Input.tsx index feedf57..043e041 100644 --- a/packages/components/src/inputs/Input.tsx +++ b/packages/components/src/inputs/Input.tsx @@ -6,15 +6,15 @@ import eyeOpen from '/root/Downloads/ui-components/apps/storybook/src/assets/ico import eyeClosed from '/root/Downloads/ui-components/apps/storybook/src/assets/icons/eye-off.png'; -export const InputField = ({ theme, type, state, onClick }: InputProps) => { +export const InputField = ({ theme, style, state, onClick }: InputProps) => { globalStyles(); const [isFocused, setIsFocused] = useState(false); - const [isPasswordVisible, setIsPasswordVisible] = useState(false); + const [PasswordHidden, setPasswordHidden] = useState(false); const handleToggleVisibility = () => { - setIsPasswordVisible(!isPasswordVisible); + setPasswordHidden(!PasswordHidden); }; return ( @@ -26,14 +26,15 @@ export const InputField = ({ theme, type, state, onClick }: InputProps) => { placeholder="Enter some text" className={theme === "dark" ? darkTheme : ''} state={state} - type={type} + style={style} + type={PasswordHidden ? "password" : "text"} onClick={state === "disabled" ? () => {} : onClick} disabled={state === "disabled"} /> - { type === 'password' && + { style === 'password' && - Toggle visibility + Toggle visibility } {state === "error" && !isFocused && Please try again!} @@ -41,15 +42,15 @@ export const InputField = ({ theme, type, state, onClick }: InputProps) => { ) } -export const SmallInputField = ({ theme, type, state, onClick }: InputProps) => { +export const SmallInputField = ({ theme, style, state, onClick }: InputProps) => { globalStyles(); const [isFocused, setIsFocused] = useState(false); - const [isPasswordVisible, setIsPasswordVisible] = useState(false); + const [PasswordHidden, setPasswordHidden] = useState(false); const handleToggleVisibility = () => { - setIsPasswordVisible(!isPasswordVisible); + setPasswordHidden(!PasswordHidden); }; return ( @@ -61,14 +62,14 @@ export const SmallInputField = ({ theme, type, state, onClick }: InputProps) => placeholder="Enter some text" className={theme === "dark" ? darkTheme : ''} state={state} - type={type} + style={style} onClick={state === "disabled" ? () => {} : onClick} disabled={state === "disabled"} /> - { type === 'password' && + { style === 'password' && - Toggle visibility + Toggle visibility } {state === "error" && !isFocused && Please try again!} diff --git a/packages/components/src/inputs/Input.types.ts b/packages/components/src/inputs/Input.types.ts index 25c0bbd..f6c43f5 100644 --- a/packages/components/src/inputs/Input.types.ts +++ b/packages/components/src/inputs/Input.types.ts @@ -5,7 +5,7 @@ export type InputProps = { theme?: "light" | "dark"; - type?: "default" | "password" | "icon"; + style?: "default" | "password" | "icon"; state?: "default" | "disabled"| "error"; From 7abadd20d2a03c1975358d02bf81ef8f3d91acb5 Mon Sep 17 00:00:00 2001 From: root Date: Wed, 5 Jun 2024 21:58:15 +1000 Subject: [PATCH 08/14] replaced icon pngs with svgs and renamed input field props to avoid name clashes --- apps/storybook/src/assets/icons/eye-off.png | Bin 816 -> 0 bytes apps/storybook/src/assets/icons/eye-off.svg | 11 ++ apps/storybook/src/assets/icons/eye-on.png | Bin 759 -> 0 bytes apps/storybook/src/assets/icons/eye-on.svg | 4 + apps/storybook/src/assets/icons/user.svg | 4 + .../inputFields/InputField.stories.tsx | 99 ++++++++++++++++-- .../components/src/inputs/Input.styled.tsx | 43 ++++++-- packages/components/src/inputs/Input.tsx | 27 +++-- packages/components/src/inputs/Input.types.ts | 4 +- 9 files changed, 169 insertions(+), 23 deletions(-) delete mode 100644 apps/storybook/src/assets/icons/eye-off.png create mode 100644 apps/storybook/src/assets/icons/eye-off.svg delete mode 100644 apps/storybook/src/assets/icons/eye-on.png create mode 100644 apps/storybook/src/assets/icons/eye-on.svg create mode 100644 apps/storybook/src/assets/icons/user.svg diff --git a/apps/storybook/src/assets/icons/eye-off.png b/apps/storybook/src/assets/icons/eye-off.png deleted file mode 100644 index a0697cd0999d8b6cd604d3b971b6a3e41bc539ac..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 816 zcmV-01JC@4P)X1^@s6D=Y3@00009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yPw#0K~#7FwN+1V z5UvNJ2x7wi-ip~Y z4A9^1@91Lz3ylef z+(2+ow}I3sLlIBC#72o@wDDmE+45d4Z;cEa7=>;##{;njb#LL}AqVEs=m20+FYo3w z2S2}3&`BG0#;@vesx_eAQiF>^s4b>(d6m@ix&<()j5yz%!l3Q~a2(gjsPj)7V zte~4Z6IyKGVv;rj;V5ytp&aHGp6G@lAE6rTIf75^*&9zKy)euVq#GbtD#h)SE=`F} zs{1%%RuBpR_YVW%NCUI^g-c%~z$?yq3ml%6KqxYe$d$@ouGFi%HN6q9>XmYgVL$Lx z*e@47Vi;Y6GIRoXFt><*EFMF3%I%&oC&%Tr4Rqpf)FXz{G)<}FE$#P)-9>)KWWOK8 zGzrq@l!+sNl6Y#98lSNM!C-VqVFrc2UY@^wW~QCWH55QeVpR*8;%wlL#tpB2w66{P u(VTiR7Ql7H4kBQ}VkgSPGf+bPqxnC5hm?hXex}&~0000 + + + + + + + + + + diff --git a/apps/storybook/src/assets/icons/eye-on.png b/apps/storybook/src/assets/icons/eye-on.png deleted file mode 100644 index 0a98040f6f47b77791ca9aa1d811e6bc8a463339..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 759 zcmVX1^@s6D=Y3@00009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yPC=k2~Pxx zeF^BAC3*h_03|#k3r<&FHJ0<;FTZ}3BDBUy@a$LdZ5Vi_xVp)M zKIXXDX{@hAkld4@Rnvth2}E^|*Wz|q8Z~ni{22qIArsA3FWIH9=#;B=ZQ<^ZFCX8% z_jHes4hQqMHR-f;Si5>>VMhU+Gr*~qesIi{W%)jZzxhtHrgs{(99Pr>dq;Kl{Ia{X zCNT~q=EdKaD++t|*ozwkOG3WOW(O*)xrkV4WExyJ#eZ p`e)=uQ>@rvciWhHqn*oC`3E3PPo@|UB?bTh002ovPDHLkV1hg+RNVjo diff --git a/apps/storybook/src/assets/icons/eye-on.svg b/apps/storybook/src/assets/icons/eye-on.svg new file mode 100644 index 0000000..217666f --- /dev/null +++ b/apps/storybook/src/assets/icons/eye-on.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/storybook/src/assets/icons/user.svg b/apps/storybook/src/assets/icons/user.svg new file mode 100644 index 0000000..803bf65 --- /dev/null +++ b/apps/storybook/src/assets/icons/user.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/storybook/src/stories/examples/inputFields/InputField.stories.tsx b/apps/storybook/src/stories/examples/inputFields/InputField.stories.tsx index cb6fbc3..d81e7c7 100644 --- a/apps/storybook/src/stories/examples/inputFields/InputField.stories.tsx +++ b/apps/storybook/src/stories/examples/inputFields/InputField.stories.tsx @@ -11,44 +11,131 @@ export default meta; type Story = StoryObj; +// DEFAULT INPUT FIELDS export const Light: Story = (args: InputProps) => ; Light.args = { theme: 'light', - style: 'default', + style: 'text', state: 'default' } export const Disabled: Story = (args: InputProps) => ; Disabled.args = { theme: 'light', - style: 'default', + style: 'text', state: 'disabled' } export const Error: Story = (args: InputProps) => ; Error.args = { theme: 'light', - style: 'default', + style: 'text', state: 'error' } export const Dark: Story = (args: InputProps) => ; Dark.args = { theme: 'dark', - style: 'default', + style: 'text', state: 'default' } export const DisabledDark: Story = (args: InputProps) => ; DisabledDark.args = { theme: 'dark', - style: 'default', + style: 'text', state: 'disabled' } export const ErrorDark: Story = (args: InputProps) => ; ErrorDark.args = { theme: 'dark', - style: 'default', + style: 'text', + state: 'error' +} + +// PASSWORD INPUT FIELDS +export const PasswordLight: Story = (args: InputProps) => ; +PasswordLight.args = { + theme: 'light', + style: 'password', + state: 'default' +} + +export const PasswordDisabled: Story = (args: InputProps) => ; +PasswordDisabled.args = { + theme: 'light', + style: 'password', + state: 'disabled' +} + +export const PasswordError: Story = (args: InputProps) => ; +PasswordError.args = { + theme: 'light', + style: 'password', + state: 'error' +} + +export const PasswordDark: Story = (args: InputProps) => ; +PasswordDark.args = { + theme: 'dark', + style: 'password', + state: 'default' +} + +export const PasswordDisabledDark: Story = (args: InputProps) => ; +PasswordDisabledDark.args = { + theme: 'dark', + style: 'password', + state: 'disabled' +} + +export const PasswordErrorDark: Story = (args: InputProps) => ; +PasswordErrorDark.args = { + theme: 'dark', + style: 'password', + state: 'error' +} + +// ICON INPUT FIELDS +export const IconLight: Story = (args: InputProps) => ; +IconLight.args = { + theme: 'light', + style: 'icon', + state: 'default' +} + +export const IconDisabled: Story = (args: InputProps) => ; +IconDisabled.args = { + theme: 'light', + style: 'icon', + state: 'disabled' +} + +export const IconError: Story = (args: InputProps) => ; +IconError.args = { + theme: 'light', + style: 'icon', + state: 'error' +} + +export const IconDark: Story = (args: InputProps) => ; +IconDark.args = { + theme: 'dark', + style: 'icon', + state: 'default' +} + +export const IconDisabledDark: Story = (args: InputProps) => ; +IconDisabledDark.args = { + theme: 'dark', + style: 'icon', + state: 'disabled' +} + +export const IconErrorDark: Story = (args: InputProps) => ; +IconErrorDark.args = { + theme: 'dark', + style: 'icon', state: 'error' } \ No newline at end of file diff --git a/packages/components/src/inputs/Input.styled.tsx b/packages/components/src/inputs/Input.styled.tsx index 51df772..9af8754 100644 --- a/packages/components/src/inputs/Input.styled.tsx +++ b/packages/components/src/inputs/Input.styled.tsx @@ -36,7 +36,7 @@ export const InputFieldWrapper = styled('div', { flexDirection: 'column', alignItems: 'left', justifyContent: 'flex-start', -}) +}); export const InputFieldContainer = styled('input', { position: 'relative', @@ -61,9 +61,11 @@ export const InputFieldContainer = styled('input', { variants: { style: { - default: {}, + text: {}, password: {}, - icon: {}, + icon: { + paddingLeft: '49px' + }, }, state: { default: {}, @@ -107,9 +109,9 @@ export const ErrorMessage = styled('div', { fontSize: 13.33, fontWeight: 500, color: '$error', -}) +}); -export const IconContainer = styled('span', { +export const EyeIconContainer = styled('span', { height: 24, cursor: 'pointer', aspectRatio: 1, @@ -117,4 +119,33 @@ export const IconContainer = styled('span', { right: 15, top: 10, display: 'block', -}) \ No newline at end of file + + variants: { + error: { + true: { + color: '$error', + }, + }, + }, +}); + +export const UserIconContainer = styled('span', { + height: 24, + cursor: 'pointer', + aspectRatio: 1, + position: 'absolute', + left: 15, + top: 10, + display: 'block', + + variants: { + error: { + true: { + color: '$error', + '& img': { + color: '$error', + } + }, + }, + }, +}); \ No newline at end of file diff --git a/packages/components/src/inputs/Input.tsx b/packages/components/src/inputs/Input.tsx index 043e041..6451eee 100644 --- a/packages/components/src/inputs/Input.tsx +++ b/packages/components/src/inputs/Input.tsx @@ -1,10 +1,10 @@ import { globalStyles } from "@/index.styled"; -import { darkTheme, InputFieldWrapper, InputFieldContainer, SmallInputFieldContainer, ErrorMessage, IconContainer } from "./Input.styled"; +import { darkTheme, InputFieldWrapper, InputFieldContainer, SmallInputFieldContainer, ErrorMessage, EyeIconContainer, UserIconContainer } from "./Input.styled"; import { type InputProps } from "./Input.types"; import { useState } from "react"; -import eyeOpen from '/root/Downloads/ui-components/apps/storybook/src/assets/icons/eye-on.png'; -import eyeClosed from '/root/Downloads/ui-components/apps/storybook/src/assets/icons/eye-off.png'; - +import eyeOpen from '/root/Downloads/ui-components/apps/storybook/src/assets/icons/eye-on.svg'; +import eyeClosed from '/root/Downloads/ui-components/apps/storybook/src/assets/icons/eye-off.svg'; +import userIcon from '/root/Downloads/ui-components/apps/storybook/src/assets/icons/user.svg'; export const InputField = ({ theme, style, state, onClick }: InputProps) => { @@ -33,9 +33,14 @@ export const InputField = ({ theme, style, state, onClick }: InputProps) => { disabled={state === "disabled"} /> { style === 'password' && - + Toggle visibility - + + } + { style === 'icon' && + + User icon + } {state === "error" && !isFocused && Please try again!} @@ -63,14 +68,20 @@ export const SmallInputField = ({ theme, style, state, onClick }: InputProps) => className={theme === "dark" ? darkTheme : ''} state={state} style={style} + type={PasswordHidden ? "password" : "text"} onClick={state === "disabled" ? () => {} : onClick} disabled={state === "disabled"} /> { style === 'password' && - + Toggle visibility - + + } + { style === 'icon' && + + User icon + } {state === "error" && !isFocused && Please try again!} diff --git a/packages/components/src/inputs/Input.types.ts b/packages/components/src/inputs/Input.types.ts index f6c43f5..681e3f3 100644 --- a/packages/components/src/inputs/Input.types.ts +++ b/packages/components/src/inputs/Input.types.ts @@ -1,11 +1,9 @@ -import { ReactElement } from "react"; - export type InputProps = { placeholder?: string theme?: "light" | "dark"; - style?: "default" | "password" | "icon"; + style?: "text" | "password" | "icon"; state?: "default" | "disabled"| "error"; From d127e0929254fd85a18c65ae6891b5b9c8f5e937 Mon Sep 17 00:00:00 2001 From: root Date: Thu, 6 Jun 2024 17:32:19 +1000 Subject: [PATCH 09/14] changed small input field to remove styles as a prop --- apps/storybook/src/assets/icons/eye-off.svg | 2 +- .../inputFields/SmallInputField.stories.tsx | 20 ++-- package-lock.json | 100 +++++++++++++++++- package.json | 3 + .../components/src/inputs/Input.styled.tsx | 62 +++++++++-- packages/components/src/inputs/Input.tsx | 21 +--- packages/components/src/inputs/Input.types.ts | 10 ++ .../components/src/inputs/SmallInput.types.ts | 9 ++ packages/components/src/inputs/index.ts | 6 +- 9 files changed, 186 insertions(+), 47 deletions(-) create mode 100644 packages/components/src/inputs/SmallInput.types.ts diff --git a/apps/storybook/src/assets/icons/eye-off.svg b/apps/storybook/src/assets/icons/eye-off.svg index 22cd2ad..5c73173 100644 --- a/apps/storybook/src/assets/icons/eye-off.svg +++ b/apps/storybook/src/assets/icons/eye-off.svg @@ -8,4 +8,4 @@ - + \ No newline at end of file diff --git a/apps/storybook/src/stories/examples/inputFields/SmallInputField.stories.tsx b/apps/storybook/src/stories/examples/inputFields/SmallInputField.stories.tsx index 5d5fb1e..32b60b9 100644 --- a/apps/storybook/src/stories/examples/inputFields/SmallInputField.stories.tsx +++ b/apps/storybook/src/stories/examples/inputFields/SmallInputField.stories.tsx @@ -1,6 +1,6 @@ import React from "react"; import { Meta, StoryObj } from '@storybook/react'; -import { SmallInputField, type InputProps } from '@csesoc/ui-components/src/inputs'; +import { SmallInputField, type SmallInputProps } from '@csesoc/ui-components/src/inputs'; const meta: Meta = { component: SmallInputField, @@ -11,44 +11,38 @@ export default meta; type Story = StoryObj; -export const Light: Story = (args: InputProps) => ; +export const Light: Story = (args: SmallInputProps) => ; Light.args = { theme: 'light', - style: 'default', state: 'default' }; -export const Disabled: Story = (args: InputProps) => ; +export const Disabled: Story = (args: SmallInputProps) => ; Disabled.args = { theme: 'light', - style: 'default', state: 'disabled' }; -export const Error: Story = (args: InputProps) => ; +export const Error: Story = (args: SmallInputProps) => ; Error.args = { theme: 'light', - style: 'default', state: 'error' }; -export const Dark: Story = (args: InputProps) => ; +export const Dark: Story = (args: SmallInputProps) => ; Dark.args = { theme: 'dark', - style: 'default', state: 'default' }; -export const DisabledDark: Story = (args: InputProps) => ; +export const DisabledDark: Story = (args: SmallInputProps) => ; DisabledDark.args = { theme: 'dark', - style: 'default', state: 'disabled' }; -export const ErrorDark: Story = (args: InputProps) => ; +export const ErrorDark: Story = (args: SmallInputProps) => ; ErrorDark.args = { theme: 'dark', - style: 'default', state: 'error' }; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index bd131ca..1b4d336 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,7 +7,9 @@ "dependencies": { "@stitches/react": "^1.2.8" }, - "devDependencies": {} + "devDependencies": { + "turbo": "1.6.3" + } }, "node_modules/@stitches/react": { "version": "1.2.8", @@ -46,6 +48,102 @@ "engines": { "node": ">=0.10.0" } + }, + "node_modules/turbo": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/turbo/-/turbo-1.6.3.tgz", + "integrity": "sha512-FtfhJLmEEtHveGxW4Ye/QuY85AnZ2ZNVgkTBswoap7UMHB1+oI4diHPNyqrQLG4K1UFtCkjOlVoLsllUh/9QRw==", + "dev": true, + "hasInstallScript": true, + "bin": { + "turbo": "bin/turbo" + }, + "optionalDependencies": { + "turbo-darwin-64": "1.6.3", + "turbo-darwin-arm64": "1.6.3", + "turbo-linux-64": "1.6.3", + "turbo-linux-arm64": "1.6.3", + "turbo-windows-64": "1.6.3", + "turbo-windows-arm64": "1.6.3" + } + }, + "node_modules/turbo-darwin-64": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/turbo-darwin-64/-/turbo-darwin-64-1.6.3.tgz", + "integrity": "sha512-QmDIX0Yh1wYQl0bUS0gGWwNxpJwrzZU2GIAYt3aOKoirWA2ecnyb3R6ludcS1znfNV2MfunP+l8E3ncxUHwtjA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/turbo-darwin-arm64": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/turbo-darwin-arm64/-/turbo-darwin-arm64-1.6.3.tgz", + "integrity": "sha512-75DXhFpwE7CinBbtxTxH08EcWrxYSPFow3NaeFwsG8aymkWXF+U2aukYHJA6I12n9/dGqf7yRXzkF0S/9UtdyQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/turbo-linux-64": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/turbo-linux-64/-/turbo-linux-64-1.6.3.tgz", + "integrity": "sha512-O9uc6J0yoRPWdPg9THRQi69K6E2iZ98cRHNvus05lZbcPzZTxJYkYGb5iagCmCW/pq6fL4T4oLWAd6evg2LGQA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/turbo-linux-arm64": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/turbo-linux-arm64/-/turbo-linux-arm64-1.6.3.tgz", + "integrity": "sha512-dCy667qqEtZIhulsRTe8hhWQNCJO0i20uHXv7KjLHuFZGCeMbWxB8rsneRoY+blf8+QNqGuXQJxak7ayjHLxiA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/turbo-windows-64": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/turbo-windows-64/-/turbo-windows-64-1.6.3.tgz", + "integrity": "sha512-lKRqwL3mrVF09b9KySSaOwetehmGknV9EcQTF7d2dxngGYYX1WXoQLjFP9YYH8ZV07oPm+RUOAKSCQuDuMNhiA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/turbo-windows-arm64": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/turbo-windows-arm64/-/turbo-windows-arm64-1.6.3.tgz", + "integrity": "sha512-BXY1sDPEA1DgPwuENvDCD8B7Hb0toscjus941WpL8CVd10hg9pk/MWn9CNgwDO5Q9ks0mw+liDv2EMnleEjeNA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ] } } } diff --git a/package.json b/package.json index b6259b8..2c129f1 100644 --- a/package.json +++ b/package.json @@ -6,5 +6,8 @@ }, "devDependencies": { "turbo": "1.6.3" + }, + "dependencies": { + "@stitches/react": "^1.2.8" } } diff --git a/packages/components/src/inputs/Input.styled.tsx b/packages/components/src/inputs/Input.styled.tsx index 9af8754..4e736d9 100644 --- a/packages/components/src/inputs/Input.styled.tsx +++ b/packages/components/src/inputs/Input.styled.tsx @@ -100,8 +100,58 @@ export const InputFieldContainer = styled('input', { }, }); -export const SmallInputFieldContainer = styled(InputFieldContainer, { - height: 30, +export const SmallInputFieldContainer = styled('input', { + position: 'relative', + fontSize: 16, + borderRadius: 4, + backgroundColor: '$background', + border: '1.5px solid $border', + padding: '0px 15px', + height: 30, + width: '100%', + gap: 6, + color: '$filledText', + cursor: 'pointer', + + '&:active': { + borderColor: '$focusedBorder', + }, + + '&::placeholder': { + color: '$unfilledText', + }, + + variants: { + state: { + default: {}, + disabled: { + cursor: 'not-allowed', + pointerEvents: 'none', + backgroundColor: '$disabledBackground', + '&::placeholder': { + color: '$disabledText', + }, + }, + error: { + color: '$error', + cursor: 'pointer', + borderColor: '$error', + '&:focus, &:focus-within': { + color: '$filledText', + '&::placeholder': { + color: '$unfilledText', + }, + }, + '&::placeholder': { + color: '$error', + }, + }, + }, + }, + + defaultVariants: { + state: 'default', + }, }); export const ErrorMessage = styled('div', { @@ -119,14 +169,6 @@ export const EyeIconContainer = styled('span', { right: 15, top: 10, display: 'block', - - variants: { - error: { - true: { - color: '$error', - }, - }, - }, }); export const UserIconContainer = styled('span', { diff --git a/packages/components/src/inputs/Input.tsx b/packages/components/src/inputs/Input.tsx index 6451eee..3b4c085 100644 --- a/packages/components/src/inputs/Input.tsx +++ b/packages/components/src/inputs/Input.tsx @@ -1,6 +1,6 @@ import { globalStyles } from "@/index.styled"; import { darkTheme, InputFieldWrapper, InputFieldContainer, SmallInputFieldContainer, ErrorMessage, EyeIconContainer, UserIconContainer } from "./Input.styled"; -import { type InputProps } from "./Input.types"; +import { type InputProps, SmallInputProps } from "./Input.types"; import { useState } from "react"; import eyeOpen from '/root/Downloads/ui-components/apps/storybook/src/assets/icons/eye-on.svg'; import eyeClosed from '/root/Downloads/ui-components/apps/storybook/src/assets/icons/eye-off.svg'; @@ -47,16 +47,11 @@ export const InputField = ({ theme, style, state, onClick }: InputProps) => { ) } -export const SmallInputField = ({ theme, style, state, onClick }: InputProps) => { +export const SmallInputField = ({ theme, state, onClick }: SmallInputProps) => { globalStyles(); const [isFocused, setIsFocused] = useState(false); - const [PasswordHidden, setPasswordHidden] = useState(false); - - const handleToggleVisibility = () => { - setPasswordHidden(!PasswordHidden); - }; return ( @@ -67,22 +62,10 @@ export const SmallInputField = ({ theme, style, state, onClick }: InputProps) => placeholder="Enter some text" className={theme === "dark" ? darkTheme : ''} state={state} - style={style} - type={PasswordHidden ? "password" : "text"} onClick={state === "disabled" ? () => {} : onClick} disabled={state === "disabled"} /> - { style === 'password' && - - Toggle visibility - - } - { style === 'icon' && - - User icon - - } {state === "error" && !isFocused && Please try again!} ) diff --git a/packages/components/src/inputs/Input.types.ts b/packages/components/src/inputs/Input.types.ts index 681e3f3..1b7737a 100644 --- a/packages/components/src/inputs/Input.types.ts +++ b/packages/components/src/inputs/Input.types.ts @@ -7,5 +7,15 @@ export type InputProps = { state?: "default" | "disabled"| "error"; + onClick?: () => void; +} + +export type SmallInputProps = { + placeholder?: string + + theme?: "light" | "dark"; + + state?: "default" | "disabled"| "error"; + onClick?: () => void; } \ No newline at end of file diff --git a/packages/components/src/inputs/SmallInput.types.ts b/packages/components/src/inputs/SmallInput.types.ts new file mode 100644 index 0000000..08f6084 --- /dev/null +++ b/packages/components/src/inputs/SmallInput.types.ts @@ -0,0 +1,9 @@ +export type InputProps = { + placeholder?: string + + theme?: "light" | "dark"; + + state?: "default" | "disabled"| "error"; + + onClick?: () => void; +} \ No newline at end of file diff --git a/packages/components/src/inputs/index.ts b/packages/components/src/inputs/index.ts index e5d5623..1019441 100644 --- a/packages/components/src/inputs/index.ts +++ b/packages/components/src/inputs/index.ts @@ -1,5 +1,5 @@ import { InputField, SmallInputField } from "./Input"; -import { type InputProps as InputPropsType } from "./Input.types"; +import { type InputProps, SmallInputProps } from "./Input.types"; -export { InputField, SmallInputField }; -export type InputProps = InputPropsType; \ No newline at end of file +export { InputField, type InputProps }; +export { SmallInputField, type SmallInputProps }; \ No newline at end of file From cd8caebcf670376a7b5fef56f14fc83104aef465 Mon Sep 17 00:00:00 2001 From: root Date: Tue, 11 Jun 2024 11:42:37 +1000 Subject: [PATCH 10/14] large input field story created --- .../src/assets/icons/eye-off-error-dark.svg | 11 +++ .../src/assets/icons/eye-off-error-light.svg | 11 +++ .../src/assets/icons/eye-on-error-dark.svg | 4 ++ .../src/assets/icons/eye-on-error-light.svg | 4 ++ .../inputFields/LargeInputField.stories.tsx | 48 +++++++++++++ .../components/src/inputs/Input.styled.tsx | 32 +++++---- packages/components/src/inputs/Input.tsx | 70 ++++++++++++++++--- packages/components/src/inputs/Input.types.ts | 4 +- packages/components/src/inputs/index.ts | 8 +-- 9 files changed, 166 insertions(+), 26 deletions(-) create mode 100644 apps/storybook/src/assets/icons/eye-off-error-dark.svg create mode 100644 apps/storybook/src/assets/icons/eye-off-error-light.svg create mode 100644 apps/storybook/src/assets/icons/eye-on-error-dark.svg create mode 100644 apps/storybook/src/assets/icons/eye-on-error-light.svg create mode 100644 apps/storybook/src/stories/examples/inputFields/LargeInputField.stories.tsx diff --git a/apps/storybook/src/assets/icons/eye-off-error-dark.svg b/apps/storybook/src/assets/icons/eye-off-error-dark.svg new file mode 100644 index 0000000..1e33213 --- /dev/null +++ b/apps/storybook/src/assets/icons/eye-off-error-dark.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/apps/storybook/src/assets/icons/eye-off-error-light.svg b/apps/storybook/src/assets/icons/eye-off-error-light.svg new file mode 100644 index 0000000..9036ea0 --- /dev/null +++ b/apps/storybook/src/assets/icons/eye-off-error-light.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/apps/storybook/src/assets/icons/eye-on-error-dark.svg b/apps/storybook/src/assets/icons/eye-on-error-dark.svg new file mode 100644 index 0000000..e3eec8e --- /dev/null +++ b/apps/storybook/src/assets/icons/eye-on-error-dark.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/storybook/src/assets/icons/eye-on-error-light.svg b/apps/storybook/src/assets/icons/eye-on-error-light.svg new file mode 100644 index 0000000..91346b3 --- /dev/null +++ b/apps/storybook/src/assets/icons/eye-on-error-light.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/storybook/src/stories/examples/inputFields/LargeInputField.stories.tsx b/apps/storybook/src/stories/examples/inputFields/LargeInputField.stories.tsx new file mode 100644 index 0000000..63c06e5 --- /dev/null +++ b/apps/storybook/src/stories/examples/inputFields/LargeInputField.stories.tsx @@ -0,0 +1,48 @@ +import React from "react"; +import { Meta, StoryObj } from '@storybook/react'; +import { LargeInputField, type InputProps } from '@csesoc/ui-components/src/inputs'; + +const meta: Meta = { + component: LargeInputField, + title: 'Example/LargeInputField', + argTypes: {}, +}; +export default meta; + +type Story = StoryObj; + +export const Light: Story = (args: InputProps) => ; +Light.args = { + theme: 'light', + state: 'default' +}; + +export const Disabled: Story = (args: InputProps) => ; +Disabled.args = { + theme: 'light', + state: 'disabled' +}; + +export const Error: Story = (args: InputProps) => ; +Error.args = { + theme: 'light', + state: 'error' +}; + +export const Dark: Story = (args: InputProps) => ; +Dark.args = { + theme: 'dark', + state: 'default' +}; + +export const DisabledDark: Story = (args: InputProps) => ; +DisabledDark.args = { + theme: 'dark', + state: 'disabled' +}; + +export const ErrorDark: Story = (args: InputProps) => ; +ErrorDark.args = { + theme: 'dark', + state: 'error' +}; \ No newline at end of file diff --git a/packages/components/src/inputs/Input.styled.tsx b/packages/components/src/inputs/Input.styled.tsx index 4e736d9..57fb1a8 100644 --- a/packages/components/src/inputs/Input.styled.tsx +++ b/packages/components/src/inputs/Input.styled.tsx @@ -38,14 +38,14 @@ export const InputFieldWrapper = styled('div', { justifyContent: 'flex-start', }); -export const InputFieldContainer = styled('input', { +export const SmallInputFieldContainer = styled('input', { position: 'relative', fontSize: 16, borderRadius: 4, backgroundColor: '$background', border: '1.5px solid $border', padding: '0px 15px', - height: 45, + height: 30, width: '100%', gap: 6, color: '$filledText', @@ -60,13 +60,6 @@ export const InputFieldContainer = styled('input', { }, variants: { - style: { - text: {}, - password: {}, - icon: { - paddingLeft: '49px' - }, - }, state: { default: {}, disabled: { @@ -95,19 +88,18 @@ export const InputFieldContainer = styled('input', { }, defaultVariants: { - style: 'default', state: 'default', }, }); -export const SmallInputFieldContainer = styled('input', { +export const InputFieldContainer = styled(SmallInputFieldContainer, { position: 'relative', fontSize: 16, borderRadius: 4, backgroundColor: '$background', border: '1.5px solid $border', padding: '0px 15px', - height: 30, + height: 45, width: '100%', gap: 6, color: '$filledText', @@ -122,6 +114,13 @@ export const SmallInputFieldContainer = styled('input', { }, variants: { + style: { + text: {}, + password: {}, + icon: { + paddingLeft: '49px' + }, + }, state: { default: {}, disabled: { @@ -150,10 +149,19 @@ export const SmallInputFieldContainer = styled('input', { }, defaultVariants: { + style: 'default', state: 'default', }, }); +export const LargeInputFieldContainer = styled(SmallInputFieldContainer, { + height: 150, + width: 354, + '&::placeholder': { + + } +}); + export const ErrorMessage = styled('div', { fontFamily: 'inherit', fontSize: 13.33, diff --git a/packages/components/src/inputs/Input.tsx b/packages/components/src/inputs/Input.tsx index 3b4c085..78063e5 100644 --- a/packages/components/src/inputs/Input.tsx +++ b/packages/components/src/inputs/Input.tsx @@ -1,17 +1,38 @@ import { globalStyles } from "@/index.styled"; -import { darkTheme, InputFieldWrapper, InputFieldContainer, SmallInputFieldContainer, ErrorMessage, EyeIconContainer, UserIconContainer } from "./Input.styled"; -import { type InputProps, SmallInputProps } from "./Input.types"; +import { darkTheme, InputFieldWrapper, InputFieldContainer, SmallInputFieldContainer, LargeInputFieldContainer, ErrorMessage, EyeIconContainer, UserIconContainer } from "./Input.styled"; +import { type StyledInputProps, InputProps } from "./Input.types"; import { useState } from "react"; + +// eye-on icons import eyeOpen from '/root/Downloads/ui-components/apps/storybook/src/assets/icons/eye-on.svg'; +import eyeOpenErrorLight from '/root/Downloads/ui-components/apps/storybook/src/assets/icons/eye-on-error-light.svg'; +import eyeOpenErrorDark from '/root/Downloads/ui-components/apps/storybook/src/assets/icons/eye-on-error-dark.svg'; + +// eye-closed icons import eyeClosed from '/root/Downloads/ui-components/apps/storybook/src/assets/icons/eye-off.svg'; +import eyeClosedErrorLight from '/root/Downloads/ui-components/apps/storybook/src/assets/icons/eye-off-error-light.svg'; +import eyeClosedErrorDark from '/root/Downloads/ui-components/apps/storybook/src/assets/icons/eye-off-error-dark.svg'; + import userIcon from '/root/Downloads/ui-components/apps/storybook/src/assets/icons/user.svg'; -export const InputField = ({ theme, style, state, onClick }: InputProps) => { +export const InputField = ({ theme, style, state, onClick }: StyledInputProps) => { globalStyles(); const [isFocused, setIsFocused] = useState(false); const [PasswordHidden, setPasswordHidden] = useState(false); + const [eyeState, setEyeState] = useState("default") + + // set eye-open icon depending on input field props + const errorEyeOpenIcon = theme === "light" ? eyeOpenErrorLight : eyeOpenErrorDark; + var eyeOpenIcon = state === "error" ? errorEyeOpenIcon : eyeOpen; + + // set eye-closed icon depending on input field props + const errorEyeClosedIcon = theme === "light" ? eyeClosedErrorLight : eyeClosedErrorDark; + var eyeClosedIcon = state === "error" ? errorEyeClosedIcon : eyeClosed; + + // revert eye icon back to default state when clicking/focusing on input field + // const handleToggleVisibility = () => { setPasswordHidden(!PasswordHidden); @@ -20,8 +41,18 @@ export const InputField = ({ theme, style, state, onClick }: InputProps) => { return ( setIsFocused(true)} - onBlur={() => setIsFocused(false)} + onFocus={() => { + setIsFocused(true); + }} + + onClick={() => { + state === "disabled" ? () => {} : onClick + }} + + onBlur={() => { + setIsFocused(false) + setEyeState("default") + }} placeholder="Enter some text" className={theme === "dark" ? darkTheme : ''} @@ -29,12 +60,11 @@ export const InputField = ({ theme, style, state, onClick }: InputProps) => { style={style} type={PasswordHidden ? "password" : "text"} - onClick={state === "disabled" ? () => {} : onClick} disabled={state === "disabled"} /> { style === 'password' && - Toggle visibility + Toggle visibility } { style === 'icon' && @@ -47,7 +77,7 @@ export const InputField = ({ theme, style, state, onClick }: InputProps) => { ) } -export const SmallInputField = ({ theme, state, onClick }: SmallInputProps) => { +export const SmallInputField = ({ theme, state, onClick }: InputProps) => { globalStyles(); @@ -69,4 +99,28 @@ export const SmallInputField = ({ theme, state, onClick }: SmallInputProps) => { {state === "error" && !isFocused && Please try again!} ) +} + +export const LargeInputField = ({ theme, state, onClick }: InputProps) => { + + globalStyles(); + + const [isFocused, setIsFocused] = useState(false); + + return ( + + setIsFocused(true)} + onBlur={() => setIsFocused(false)} + + placeholder="Enter some text" + className={theme === "dark" ? darkTheme : ''} + state={state} + + onClick={state === "disabled" ? () => {} : onClick} + disabled={state === "disabled"} + /> + {state === "error" && !isFocused && Please try again!} + + ) } \ No newline at end of file diff --git a/packages/components/src/inputs/Input.types.ts b/packages/components/src/inputs/Input.types.ts index 1b7737a..96d9057 100644 --- a/packages/components/src/inputs/Input.types.ts +++ b/packages/components/src/inputs/Input.types.ts @@ -1,4 +1,4 @@ -export type InputProps = { +export type StyledInputProps = { placeholder?: string theme?: "light" | "dark"; @@ -10,7 +10,7 @@ export type InputProps = { onClick?: () => void; } -export type SmallInputProps = { +export type InputProps = { placeholder?: string theme?: "light" | "dark"; diff --git a/packages/components/src/inputs/index.ts b/packages/components/src/inputs/index.ts index 1019441..cdca5c9 100644 --- a/packages/components/src/inputs/index.ts +++ b/packages/components/src/inputs/index.ts @@ -1,5 +1,5 @@ -import { InputField, SmallInputField } from "./Input"; -import { type InputProps, SmallInputProps } from "./Input.types"; +import { InputField, SmallInputField, LargeInputField } from "./Input"; +import { type StyledInputProps, InputProps } from "./Input.types"; -export { InputField, type InputProps }; -export { SmallInputField, type SmallInputProps }; \ No newline at end of file +export { InputField, type StyledInputProps }; +export { LargeInputField, SmallInputField, type InputProps }; \ No newline at end of file From f90ce1e9c94282c1cefc62c8eef2ad8ed97109ea Mon Sep 17 00:00:00 2001 From: root Date: Tue, 11 Jun 2024 11:58:00 +1000 Subject: [PATCH 11/14] set user icon to change colour depending on input field props --- apps/storybook/src/assets/icons/user-error-dark.svg | 4 ++++ apps/storybook/src/assets/icons/user-error-light.svg | 4 ++++ apps/storybook/src/assets/icons/user.svg | 2 +- packages/components/src/inputs/Input.tsx | 8 +++++++- 4 files changed, 16 insertions(+), 2 deletions(-) create mode 100644 apps/storybook/src/assets/icons/user-error-dark.svg create mode 100644 apps/storybook/src/assets/icons/user-error-light.svg diff --git a/apps/storybook/src/assets/icons/user-error-dark.svg b/apps/storybook/src/assets/icons/user-error-dark.svg new file mode 100644 index 0000000..e97ac02 --- /dev/null +++ b/apps/storybook/src/assets/icons/user-error-dark.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/apps/storybook/src/assets/icons/user-error-light.svg b/apps/storybook/src/assets/icons/user-error-light.svg new file mode 100644 index 0000000..bd2149a --- /dev/null +++ b/apps/storybook/src/assets/icons/user-error-light.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/apps/storybook/src/assets/icons/user.svg b/apps/storybook/src/assets/icons/user.svg index 803bf65..2da5ee2 100644 --- a/apps/storybook/src/assets/icons/user.svg +++ b/apps/storybook/src/assets/icons/user.svg @@ -1,4 +1,4 @@ - + \ No newline at end of file diff --git a/packages/components/src/inputs/Input.tsx b/packages/components/src/inputs/Input.tsx index 78063e5..8100be1 100644 --- a/packages/components/src/inputs/Input.tsx +++ b/packages/components/src/inputs/Input.tsx @@ -13,7 +13,9 @@ import eyeClosed from '/root/Downloads/ui-components/apps/storybook/src/assets/i import eyeClosedErrorLight from '/root/Downloads/ui-components/apps/storybook/src/assets/icons/eye-off-error-light.svg'; import eyeClosedErrorDark from '/root/Downloads/ui-components/apps/storybook/src/assets/icons/eye-off-error-dark.svg'; -import userIcon from '/root/Downloads/ui-components/apps/storybook/src/assets/icons/user.svg'; +import user from '/root/Downloads/ui-components/apps/storybook/src/assets/icons/user.svg'; +import userErrorLight from '/root/Downloads/ui-components/apps/storybook/src/assets/icons/user-error-light.svg'; +import userErrorDark from '/root/Downloads/ui-components/apps/storybook/src/assets/icons/user-error-dark.svg'; export const InputField = ({ theme, style, state, onClick }: StyledInputProps) => { @@ -31,6 +33,10 @@ export const InputField = ({ theme, style, state, onClick }: StyledInputProps) = const errorEyeClosedIcon = theme === "light" ? eyeClosedErrorLight : eyeClosedErrorDark; var eyeClosedIcon = state === "error" ? errorEyeClosedIcon : eyeClosed; + // set user icon depending on input field props + const errorUserIcon = theme === "light" ? userErrorLight : userErrorDark; + var userIcon = state === "error" ? errorUserIcon : user; + // revert eye icon back to default state when clicking/focusing on input field // From 12905ac8c5218ad8887641a341b3a49a1d51429e Mon Sep 17 00:00:00 2001 From: root Date: Tue, 11 Jun 2024 16:24:52 +1000 Subject: [PATCH 12/14] changed the colour of icons depending on onClick, onFocus and onBlur + make sure input reverts to text type when switching from password style to text style --- .../components/src/inputs/Input.styled.tsx | 3 ++- packages/components/src/inputs/Input.tsx | 19 +++++++++++++------ 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/packages/components/src/inputs/Input.styled.tsx b/packages/components/src/inputs/Input.styled.tsx index 57fb1a8..30cbd50 100644 --- a/packages/components/src/inputs/Input.styled.tsx +++ b/packages/components/src/inputs/Input.styled.tsx @@ -157,8 +157,9 @@ export const InputFieldContainer = styled(SmallInputFieldContainer, { export const LargeInputFieldContainer = styled(SmallInputFieldContainer, { height: 150, width: 354, + justifyContent: 'flex-start', '&::placeholder': { - + bottom: 500, } }); diff --git a/packages/components/src/inputs/Input.tsx b/packages/components/src/inputs/Input.tsx index 8100be1..ae7ce85 100644 --- a/packages/components/src/inputs/Input.tsx +++ b/packages/components/src/inputs/Input.tsx @@ -23,7 +23,6 @@ export const InputField = ({ theme, style, state, onClick }: StyledInputProps) = const [isFocused, setIsFocused] = useState(false); const [PasswordHidden, setPasswordHidden] = useState(false); - const [eyeState, setEyeState] = useState("default") // set eye-open icon depending on input field props const errorEyeOpenIcon = theme === "light" ? eyeOpenErrorLight : eyeOpenErrorDark; @@ -33,6 +32,9 @@ export const InputField = ({ theme, style, state, onClick }: StyledInputProps) = const errorEyeClosedIcon = theme === "light" ? eyeClosedErrorLight : eyeClosedErrorDark; var eyeClosedIcon = state === "error" ? errorEyeClosedIcon : eyeClosed; + const [eyeClosedState, setEyeClosedState] = useState(eyeClosedIcon || eyeClosed); + const [eyeOpenState, setEyeOpenState] = useState(eyeOpenIcon || eyeOpen); + // set user icon depending on input field props const errorUserIcon = theme === "light" ? userErrorLight : userErrorDark; var userIcon = state === "error" ? errorUserIcon : user; @@ -49,28 +51,33 @@ export const InputField = ({ theme, style, state, onClick }: StyledInputProps) = { setIsFocused(true); + // setEyeClosedState(eyeClosed); + // setEyeOpenState(eyeOpen); }} onClick={() => { - state === "disabled" ? () => {} : onClick + state === "disabled" ? () => {} : onClick; + setEyeClosedState(eyeClosed); + setEyeOpenState(eyeOpen); }} onBlur={() => { - setIsFocused(false) - setEyeState("default") + setIsFocused(false); + setEyeClosedState(eyeClosedIcon); + setEyeOpenState(eyeOpenIcon); }} placeholder="Enter some text" className={theme === "dark" ? darkTheme : ''} state={state} style={style} - type={PasswordHidden ? "password" : "text"} + type={style === 'password' && PasswordHidden ? "password" : "text"} disabled={state === "disabled"} /> { style === 'password' && - Toggle visibility + Toggle visibility } { style === 'icon' && From 46c3c66da4765850bf39124c8a0b215ad517f4fc Mon Sep 17 00:00:00 2001 From: root Date: Wed, 12 Jun 2024 12:00:02 +1000 Subject: [PATCH 13/14] removed unneeded duplicate file --- packages/components/src/inputs/SmallInput.types.ts | 9 --------- 1 file changed, 9 deletions(-) delete mode 100644 packages/components/src/inputs/SmallInput.types.ts diff --git a/packages/components/src/inputs/SmallInput.types.ts b/packages/components/src/inputs/SmallInput.types.ts deleted file mode 100644 index 08f6084..0000000 --- a/packages/components/src/inputs/SmallInput.types.ts +++ /dev/null @@ -1,9 +0,0 @@ -export type InputProps = { - placeholder?: string - - theme?: "light" | "dark"; - - state?: "default" | "disabled"| "error"; - - onClick?: () => void; -} \ No newline at end of file From a8d572504e3491984ff809081e8f7e1b66e1d411 Mon Sep 17 00:00:00 2001 From: rachel-bai <134430319+rachel-bai@users.noreply.github.com> Date: Wed, 12 Jun 2024 12:04:18 +1000 Subject: [PATCH 14/14] Update CHANGELOG.md --- CHANGELOG.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ddfe408..ba748c7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,9 @@ # Changelog All notable changes to this project will be documented in this file. +## 1.2.0 (2024-06-11) +- Implemented the input field component + ## 1.1.0 (2023-03-30) ### Added @@ -9,4 +12,4 @@ All notable changes to this project will be documented in this file. ## 1.0.0 (2023-03-30) ### Added -- Implemented the sidebar component. \ No newline at end of file +- Implemented the sidebar component.