From f814d5c11dab2b2e628d86b24eb4aa2e76612463 Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Thu, 30 May 2024 16:22:33 +0100 Subject: [PATCH 01/45] feat: add input files --- .../.storybook/preview.tsx | 1 + .../components/Input/Docs.mdx | 7 + .../components/Input/Input.stories.tsx | 12 + .../components/Input/Input.tsx | 43 +++ .../components/Input/Variants.tsx | 17 + .../docs/native-ui/guides/tokens.mdx | 1 + packages/native-ui/src/components/index.ts | 2 + .../src/components/unstyled/index.ts | 2 - .../src/config/gluestack-ui.config.ts | 14 +- packages/native-ui/src/config/theme/Input.ts | 325 ++---------------- packages/native-ui/src/config/theme/index.ts | 8 +- 11 files changed, 117 insertions(+), 315 deletions(-) create mode 100644 apps/native-ui-storybook/components/Input/Docs.mdx create mode 100644 apps/native-ui-storybook/components/Input/Input.stories.tsx create mode 100644 apps/native-ui-storybook/components/Input/Input.tsx create mode 100644 apps/native-ui-storybook/components/Input/Variants.tsx diff --git a/apps/native-ui-storybook/.storybook/preview.tsx b/apps/native-ui-storybook/.storybook/preview.tsx index c2e7b808e..50d33eb13 100644 --- a/apps/native-ui-storybook/.storybook/preview.tsx +++ b/apps/native-ui-storybook/.storybook/preview.tsx @@ -145,6 +145,7 @@ const preview: Preview = { 'Checkbox', 'HStack', 'Icons', + 'Input', 'Pressable', 'Radio', 'Spinner', diff --git a/apps/native-ui-storybook/components/Input/Docs.mdx b/apps/native-ui-storybook/components/Input/Docs.mdx new file mode 100644 index 000000000..c6f2c23dd --- /dev/null +++ b/apps/native-ui-storybook/components/Input/Docs.mdx @@ -0,0 +1,7 @@ +import { Meta, Primary, Controls, Story, Canvas } from '@storybook/blocks'; +import * as BadgeStories from './Input.stories'; +import { Badge, BadgeText, Center, NativeUIProvider } from '@utilitywarehouse/native-ui'; + + + +# Input diff --git a/apps/native-ui-storybook/components/Input/Input.stories.tsx b/apps/native-ui-storybook/components/Input/Input.stories.tsx new file mode 100644 index 000000000..d73d06d43 --- /dev/null +++ b/apps/native-ui-storybook/components/Input/Input.stories.tsx @@ -0,0 +1,12 @@ +import { Meta } from '@storybook/react'; +import Input from './Input'; +import Variants from './Variants'; + +const InputMeta: Meta = { + title: 'Native UI / Components / Input', + component: Input, +}; + +export default InputMeta; + +export { Input as Playground, Variants }; diff --git a/apps/native-ui-storybook/components/Input/Input.tsx b/apps/native-ui-storybook/components/Input/Input.tsx new file mode 100644 index 000000000..e848caaef --- /dev/null +++ b/apps/native-ui-storybook/components/Input/Input.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import { Input, InputField, InputIcon } from '@utilitywarehouse/native-ui'; +import { AddSmallIcon } from '@utilitywarehouse/react-native-icons'; +import { Meta, StoryFn } from '@storybook/react'; + +const InputBasic: StoryFn = ({ text = 'NEW FEATURE', icon = false, ...props }: any) => { + return ( + + + {icon && } + + ); +}; + +InputBasic.argTypes = { + colorScheme: { + control: 'select', + options: ['cyan', 'red', 'green', 'gold', 'grey'], + }, + borderless: { + control: 'boolean', + }, + strong: { + control: 'boolean', + }, + size: { + control: 'select', + options: ['large', 'small'], + }, + text: { + control: 'text', + }, +} as Meta['argTypes']; + +InputBasic.args = { + text: 'New Feature', + strong: false, + borderless: false, + colorScheme: 'cyan', + size: 'large', +} as Meta['args']; + +export default InputBasic; diff --git a/apps/native-ui-storybook/components/Input/Variants.tsx b/apps/native-ui-storybook/components/Input/Variants.tsx new file mode 100644 index 000000000..c79c987f1 --- /dev/null +++ b/apps/native-ui-storybook/components/Input/Variants.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { Box, Input, InputField, InputIcon } from '@utilitywarehouse/native-ui'; +import { StoryFn } from '@storybook/react'; +import { AddSmallIcon } from '@utilitywarehouse/react-native-icons'; + +const InputVariants: StoryFn = () => { + return ( + + + + + + + ); +}; + +export default InputVariants; diff --git a/apps/native-ui-storybook/docs/native-ui/guides/tokens.mdx b/apps/native-ui-storybook/docs/native-ui/guides/tokens.mdx index ba814aae8..a6b3d2f9c 100644 --- a/apps/native-ui-storybook/docs/native-ui/guides/tokens.mdx +++ b/apps/native-ui-storybook/docs/native-ui/guides/tokens.mdx @@ -216,6 +216,7 @@ By default these spacing value can be referenced by the padding, margin, and top | `$10` | 40 | | `$11` | 44 | | `$12` | 48 | +| `$14` | 56 | | `$16` | 64 | | `$20` | 80 | | `$24` | 96 | diff --git a/packages/native-ui/src/components/index.ts b/packages/native-ui/src/components/index.ts index bb3ba28b3..685298e09 100644 --- a/packages/native-ui/src/components/index.ts +++ b/packages/native-ui/src/components/index.ts @@ -37,3 +37,5 @@ export { Radio, RadioGroup, RadioLabel } from '@gluestack-ui/themed'; export { Image } from '@gluestack-ui/themed'; export { Icon, createIcon } from '@gluestack-ui/themed'; + +export { Input, InputField, InputIcon, InputSlot } from '@gluestack-ui/themed'; diff --git a/packages/native-ui/src/components/unstyled/index.ts b/packages/native-ui/src/components/unstyled/index.ts index 14dd6c3e1..2c86df88b 100644 --- a/packages/native-ui/src/components/unstyled/index.ts +++ b/packages/native-ui/src/components/unstyled/index.ts @@ -11,8 +11,6 @@ export { FormControlLabelText, } from '@gluestack-ui/themed'; -export { Input, InputField, InputIcon, InputSlot } from '@gluestack-ui/themed'; - export { Select, SelectBackdrop, diff --git a/packages/native-ui/src/config/gluestack-ui.config.ts b/packages/native-ui/src/config/gluestack-ui.config.ts index fb79d37db..4d6c66256 100644 --- a/packages/native-ui/src/config/gluestack-ui.config.ts +++ b/packages/native-ui/src/config/gluestack-ui.config.ts @@ -30,11 +30,14 @@ export const gluestackUIConfig = createConfig({ tokens: { colors: { ...colors, - ...Object.keys(colorsDark).reduce((acc, key) => { - acc[`dark${key[0].toUpperCase()}${key.slice(1)}`] = - colorsDark[key as keyof typeof colorsDark]; - return acc; - }, {} as Record), + ...Object.keys(colorsDark).reduce( + (acc, key) => { + acc[`dark${key[0].toUpperCase()}${key.slice(1)}`] = + colorsDark[key as keyof typeof colorsDark]; + return acc; + }, + {} as Record + ), ...colorsCommon, }, space: { @@ -57,6 +60,7 @@ export const gluestackUIConfig = createConfig({ '10': 40, '11': 44, '12': 48, + '14': 56, '16': 64, '20': 80, '24': 96, diff --git a/packages/native-ui/src/config/theme/Input.ts b/packages/native-ui/src/config/theme/Input.ts index 90115a9e2..c9791dd6b 100644 --- a/packages/native-ui/src/config/theme/Input.ts +++ b/packages/native-ui/src/config/theme/Input.ts @@ -1,47 +1,48 @@ import { createStyle } from '@gluestack-style/react'; export const Input = createStyle({ - 'borderWidth': 1, - 'borderColor': '$backgroundLight300', - 'borderRadius': '$sm', - 'flexDirection': 'row', - 'overflow': 'hidden', - 'alignContent': 'center', + borderWidth: 1, + borderColor: '$backgroundLight300', + height: '$14', + borderRadius: '$sm', + flexDirection: 'row', + overflow: 'hidden', + alignContent: 'center', ':hover': { borderColor: '$borderLight400', }, ':focus': { - 'borderColor': '$primary700', + borderColor: '$primary700', ':hover': { borderColor: '$primary700', }, }, ':disabled': { - 'opacity': 0.4, + opacity: 0.4, ':hover': { borderColor: '$backgroundLight300', }, }, - '_input': { + _input: { py: 'auto', px: '$3', }, - '_icon': { + _icon: { color: '$textLight400', }, - '_dark': { - 'borderColor': '$borderDark700', + _dark: { + borderColor: '$borderDark700', ':hover': { borderColor: '$borderDark400', }, ':focus': { - 'borderColor': '$primary400', + borderColor: '$primary400', ':hover': { borderColor: '$primary400', }, @@ -53,299 +54,15 @@ export const Input = createStyle({ }, }, - 'variants': { - size: { - xl: { - h: '$12', - _input: { - props: { - size: 'xl', - }, - }, - _icon: { - props: { - size: 'xl', - }, - }, - }, - lg: { - h: '$11', - _input: { - props: { - size: 'lg', - }, - }, - _icon: { - props: { - size: 'lg', - }, - }, - }, - md: { - h: '$10', - _input: { - props: { - size: 'md', - }, - }, - _icon: { - props: { - size: 'sm', - }, - }, - }, - sm: { - h: '$9', - _input: { - props: { - size: 'sm', - }, - }, - _icon: { - props: { - size: 'xs', - }, - }, - }, - }, - variant: { - underlined: { - '_input': { - _web: { - outlineWidth: 0, - outline: 'none', - }, - px: '$0', - }, - 'borderWidth': 0, - 'borderRadius': 0, - 'borderBottomWidth': '$1', - ':focus': { - borderColor: '$primary700', - _web: { - boxShadow: 'inset 0 -1px 0 0 $primary700', - }, - }, - ':invalid': { - 'borderBottomWidth': 2, - 'borderBottomColor': '$error700', - '_web': { - boxShadow: 'inset 0 -1px 0 0 $error700', - }, - ':hover': { - borderBottomColor: '$error700', - }, - ':focus': { - 'borderBottomColor': '$error700', - ':hover': { - borderBottomColor: '$error700', - _web: { - boxShadow: 'inset 0 -1px 0 0 $error700', - }, - }, - }, - ':disabled': { - ':hover': { - borderBottomColor: '$error700', - _web: { - boxShadow: 'inset 0 -1px 0 0 $error700', - }, - }, - }, - }, - '_dark': { - ':focus': { - borderColor: '$primary400', - _web: { - boxShadow: 'inset 0 -1px 0 0 $primary400', - }, - }, - ':invalid': { - 'borderColor': '$error400', - '_web': { - boxShadow: 'inset 0 -1px 0 0 $error400', - }, - ':hover': { - borderBottomColor: '$error400', - }, - ':focus': { - 'borderBottomColor': '$error400', - ':hover': { - borderBottomColor: '$error400', - _web: { - boxShadow: 'inset 0 -1px 0 0 $error400', - }, - }, - }, - ':disabled': { - ':hover': { - borderBottomColor: '$error400', - _web: { - boxShadow: 'inset 0 -1px 0 0 $error400', - }, - }, - }, - }, - }, - }, - - outline: { - '_input': { - _web: { - outlineWidth: 0, - outline: 'none', - }, - }, - ':focus': { - borderColor: '$primary700', - _web: { - boxShadow: 'inset 0 0 0 1px $primary700', - }, - }, - ':invalid': { - 'borderColor': '$error700', - '_web': { - boxShadow: 'inset 0 0 0 1px $error700', - }, - ':hover': { - borderColor: '$error700', - }, - ':focus': { - 'borderColor': '$error700', - ':hover': { - borderColor: '$error700', - _web: { - boxShadow: 'inset 0 0 0 1px $error700', - }, - }, - }, - ':disabled': { - ':hover': { - borderColor: '$error700', - _web: { - boxShadow: 'inset 0 0 0 1px $error700', - }, - }, - }, - }, - '_dark': { - ':focus': { - borderColor: '$primary400', - _web: { - boxShadow: 'inset 0 0 0 1px $primary400', - }, - }, - ':invalid': { - 'borderColor': '$error400', - '_web': { - boxShadow: 'inset 0 0 0 1px $error400', - }, - ':hover': { - borderColor: '$error400', - }, - ':focus': { - 'borderColor': '$error400', - ':hover': { - borderColor: '$error400', - _web: { - boxShadow: 'inset 0 0 0 1px $error400', - }, - }, - }, - ':disabled': { - ':hover': { - borderColor: '$error400', - _web: { - boxShadow: 'inset 0 0 0 1px $error400', - }, - }, - }, - }, - }, - }, - - rounded: { - 'borderRadius': 999, - '_input': { - px: '$4', - _web: { - outlineWidth: 0, - outline: 'none', - }, - }, - ':focus': { - borderColor: '$primary700', - _web: { - boxShadow: 'inset 0 0 0 1px $primary700', - }, - }, - ':invalid': { - 'borderColor': '$error700', - '_web': { - boxShadow: 'inset 0 0 0 1px $error700', - }, - ':hover': { - borderColor: '$error700', - }, - ':focus': { - 'borderColor': '$error700', - ':hover': { - borderColor: '$error700', - _web: { - boxShadow: 'inset 0 0 0 1px $error700', - }, - }, - }, - ':disabled': { - ':hover': { - borderColor: '$error700', - _web: { - boxShadow: 'inset 0 0 0 1px $error700', - }, - }, - }, - }, - - '_dark': { - ':focus': { - borderColor: '$primary400', - _web: { - boxShadow: 'inset 0 0 0 1px $primary400', - }, - }, - ':invalid': { - 'borderColor': '$error400', - '_web': { - boxShadow: 'inset 0 0 0 1px $error400', - }, - ':hover': { - borderColor: '$error400', - }, - ':focus': { - 'borderColor': '$error400', - ':hover': { - borderColor: '$error400', - _web: { - boxShadow: 'inset 0 0 0 1px $error400', - }, - }, - }, - ':disabled': { - ':hover': { - borderColor: '$error400', - _web: { - boxShadow: 'inset 0 0 0 1px $error400', - }, - }, - }, - }, - }, - }, + variants: { + validationStatus: { + initial: {}, + valid: {}, + invalid: {}, }, }, - 'defaultProps': { - size: 'md', - variant: 'outline', + defaultProps: { + validationStatus: 'initial', }, }); diff --git a/packages/native-ui/src/config/theme/index.ts b/packages/native-ui/src/config/theme/index.ts index 3ba0476aa..155a8f01c 100644 --- a/packages/native-ui/src/config/theme/index.ts +++ b/packages/native-ui/src/config/theme/index.ts @@ -68,10 +68,10 @@ export * from './HStack'; // export * from './Heading'; export * from './Icon'; // export * from './Image'; -// export * from './Input'; -// export * from './InputField'; -// export * from './InputIcon'; -// export * from './InputSlot'; +export * from './Input'; +export * from './InputField'; +export * from './InputIcon'; +export * from './InputSlot'; export * from './KeyboardAvoidingView'; // export * from './Link'; // export * from './LinkText'; From 24901140ee246fb21b8fbb3f6efa1f6a96feb0c8 Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Tue, 4 Jun 2024 16:23:06 +0100 Subject: [PATCH 02/45] feat: add input component --- .../components/Input/Variants.tsx | 116 ++++++++++++++++-- .../src/components/Input/Input.props.ts | 19 +++ .../native-ui/src/components/Input/Input.tsx | 33 +++++ .../native-ui/src/components/Input/index.ts | 1 + .../styled-components/ValidationIcon.tsx | 9 ++ .../Input/styled-components/index.ts | 1 + packages/native-ui/src/components/index.ts | 3 +- packages/native-ui/src/config/theme/Input.ts | 89 +++++++++----- .../native-ui/src/config/theme/InputField.ts | 79 ++++-------- .../native-ui/src/config/theme/InputIcon.ts | 6 +- 10 files changed, 250 insertions(+), 106 deletions(-) create mode 100644 packages/native-ui/src/components/Input/Input.props.ts create mode 100644 packages/native-ui/src/components/Input/Input.tsx create mode 100644 packages/native-ui/src/components/Input/index.ts create mode 100644 packages/native-ui/src/components/Input/styled-components/ValidationIcon.tsx create mode 100644 packages/native-ui/src/components/Input/styled-components/index.ts diff --git a/apps/native-ui-storybook/components/Input/Variants.tsx b/apps/native-ui-storybook/components/Input/Variants.tsx index c79c987f1..a93ee41af 100644 --- a/apps/native-ui-storybook/components/Input/Variants.tsx +++ b/apps/native-ui-storybook/components/Input/Variants.tsx @@ -1,16 +1,116 @@ import React from 'react'; -import { Box, Input, InputField, InputIcon } from '@utilitywarehouse/native-ui'; +import { + Box, + Input, + InputField, + InputIcon, + InputSlot, + ScrollView, + Text, +} from '@utilitywarehouse/native-ui'; import { StoryFn } from '@storybook/react'; -import { AddSmallIcon } from '@utilitywarehouse/react-native-icons'; +import { EmailMediumIcon } from '@utilitywarehouse/react-native-icons'; const InputVariants: StoryFn = () => { return ( - - - - - - + + + Input + + + + Input with icon + + + + + + + Input with placeholder + + + + + + + Input with value + + + + + + + Input focused + + + + + + + Input - Password + + + + + + + Input valid + + + + + + + Input valid focused + + + + + + + Input invalid + + + + + + + Input invalid focused + + + + + + + Input disabled + + + + + + + {/* Input readonly TODO: Show example when readonly is supported + See: https://github.com/gluestack/gluestack-ui/issues/2214 + + + + + + */} + + ); }; diff --git a/packages/native-ui/src/components/Input/Input.props.ts b/packages/native-ui/src/components/Input/Input.props.ts new file mode 100644 index 000000000..0b0c8a6f5 --- /dev/null +++ b/packages/native-ui/src/components/Input/Input.props.ts @@ -0,0 +1,19 @@ +import type { Input } from '@gluestack-ui/themed'; +import type { ComponentProps } from 'react'; + +/** + * Props for the Input component. + */ +interface InputProps extends ComponentProps { + /** + * The show validation icon when validationStatus is 'valid' or 'invalid'. + * @default true + * @example + * ```tsx + * + * ``` + **/ + showValidationIcon?: boolean; +} + +export default InputProps; diff --git a/packages/native-ui/src/components/Input/Input.tsx b/packages/native-ui/src/components/Input/Input.tsx new file mode 100644 index 000000000..d783f8964 --- /dev/null +++ b/packages/native-ui/src/components/Input/Input.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { Input as GSInput, InputSlot } from '@gluestack-ui/themed'; +import type InputProps from './Input.props'; +import { + WarningMediumContainedIcon, + TickMediumContainedIcon, +} from '@utilitywarehouse/react-native-icons'; +import { InputValidationIcon } from './styled-components'; + +const Input: React.FC = ({ + children, + validationStatus, + showValidationIcon = true, + ...props +}) => { + return ( + + {children} + {showValidationIcon && validationStatus === 'invalid' && ( + + + + )} + {showValidationIcon && validationStatus === 'valid' && ( + + + + )} + + ); +}; + +export default Input; diff --git a/packages/native-ui/src/components/Input/index.ts b/packages/native-ui/src/components/Input/index.ts new file mode 100644 index 000000000..a2e60496d --- /dev/null +++ b/packages/native-ui/src/components/Input/index.ts @@ -0,0 +1 @@ +export { default } from './Input'; diff --git a/packages/native-ui/src/components/Input/styled-components/ValidationIcon.tsx b/packages/native-ui/src/components/Input/styled-components/ValidationIcon.tsx new file mode 100644 index 000000000..9c05a7e38 --- /dev/null +++ b/packages/native-ui/src/components/Input/styled-components/ValidationIcon.tsx @@ -0,0 +1,9 @@ +import { styled, AsForwarder } from '@gluestack-ui/themed'; + +const ValidationIcon = styled(AsForwarder, {}, { + componentName: 'InputValidationIcon', + descendantStyle: [], + ancestorStyle: ['_validationIcon'], +} as const); + +export default ValidationIcon; diff --git a/packages/native-ui/src/components/Input/styled-components/index.ts b/packages/native-ui/src/components/Input/styled-components/index.ts new file mode 100644 index 000000000..c18eb2b2a --- /dev/null +++ b/packages/native-ui/src/components/Input/styled-components/index.ts @@ -0,0 +1 @@ +export { default as InputValidationIcon } from './ValidationIcon'; diff --git a/packages/native-ui/src/components/index.ts b/packages/native-ui/src/components/index.ts index 685298e09..675c31aaf 100644 --- a/packages/native-ui/src/components/index.ts +++ b/packages/native-ui/src/components/index.ts @@ -4,6 +4,7 @@ export * from './Alert'; export { default as AnimatedOutline } from './AnimatedOutline'; export { default as CheckboxIndicator } from './CheckboxIndicator'; export { default as RadioIndicator } from './RadioIndicator'; +export { default as Input } from './Input'; export * from './Spinner'; // Gluestack UI @@ -38,4 +39,4 @@ export { Image } from '@gluestack-ui/themed'; export { Icon, createIcon } from '@gluestack-ui/themed'; -export { Input, InputField, InputIcon, InputSlot } from '@gluestack-ui/themed'; +export { InputField, InputIcon, InputSlot } from '@gluestack-ui/themed'; diff --git a/packages/native-ui/src/config/theme/Input.ts b/packages/native-ui/src/config/theme/Input.ts index c9791dd6b..56ceb3b0e 100644 --- a/packages/native-ui/src/config/theme/Input.ts +++ b/packages/native-ui/src/config/theme/Input.ts @@ -1,64 +1,85 @@ import { createStyle } from '@gluestack-style/react'; export const Input = createStyle({ - borderWidth: 1, - borderColor: '$backgroundLight300', + borderWidth: 2, + borderColor: '$grey500', + borderBottomColor: '$grey900', height: '$14', - borderRadius: '$sm', + borderTopLeftRadius: '$2xl', + + borderTopRightRadius: '$2xl', + borderBottomLeftRadius: '$none', + borderBottomRightRadius: '$none', flexDirection: 'row', overflow: 'hidden', alignContent: 'center', + px: '$4', + backgroundColor: '$white', - ':hover': { - borderColor: '$borderLight400', + ':focus': { + borderColor: '$cyan500', + borderBottomColor: '$cyan500', }, - ':focus': { - borderColor: '$primary700', - ':hover': { - borderColor: '$primary700', - }, + ':readOnly': { + opacity: 0.5, + borderColor: '$transparent', + borderBottomColor: '$transparent', }, ':disabled': { - opacity: 0.4, - ':hover': { - borderColor: '$backgroundLight300', + borderColor: '$grey400', + borderBottomColor: '$grey600', + + _icon: { + color: '$grey400', + }, + + _input: { + props: { + placeholderTextColor: '$grey400', + }, }, }, _input: { py: 'auto', - px: '$3', + px: '$2', }, _icon: { - color: '$textLight400', + color: '$grey700', }, - _dark: { - borderColor: '$borderDark700', - ':hover': { - borderColor: '$borderDark400', - }, - ':focus': { - borderColor: '$primary400', - ':hover': { - borderColor: '$primary400', - }, - }, - ':disabled': { - ':hover': { - borderColor: '$borderDark700', - }, - }, - }, + _dark: {}, variants: { validationStatus: { initial: {}, - valid: {}, - invalid: {}, + valid: { + borderBottomColor: '$green500', + + _validationIcon: { + color: '$green500', + }, + + ':focus': { + borderColor: '$green500', + borderBottomColor: '$green500', + }, + }, + invalid: { + borderBottomColor: '$red500', + + _validationIcon: { + color: '$red500', + }, + + ':focus': { + borderColor: '$red500', + borderBottomColor: '$red500', + }, + }, }, }, diff --git a/packages/native-ui/src/config/theme/InputField.ts b/packages/native-ui/src/config/theme/InputField.ts index 5d9111ec6..ddbbe44a6 100644 --- a/packages/native-ui/src/config/theme/InputField.ts +++ b/packages/native-ui/src/config/theme/InputField.ts @@ -2,9 +2,25 @@ import { createStyle } from '@gluestack-style/react'; export const InputField = createStyle({ flex: 1, + borderTopLeftRadius: '$2xl', + borderTopRightRadius: '$2xl', + borderBottomLeftRadius: '$none', + borderBottomRightRadius: '$none', color: '$textLight900', + fontSize: '$lg', + fontFamily: '$body', + fontWeight: '$normal', + + ':focus': { + outline: 'none', + }, + + ':focusVisible': { + outline: 'none', + }, + props: { - placeholderTextColor: '$textLight500', + placeholderTextColor: '$grey600', }, _dark: { color: '$textDark50', @@ -13,66 +29,13 @@ export const InputField = createStyle({ }, }, _web: { - 'cursor': 'text', + cursor: 'text', ':disabled': { cursor: 'not-allowed', }, - }, - variants: { - size: { - '2xs': { - fontSize: '$2xs', - lineHeight: '$2xs', - }, - 'xs': { - fontSize: '$xs', - lineHeight: '$sm', - }, - - 'sm': { - fontSize: '$sm', - lineHeight: '$sm', - }, - - 'md': { - fontSize: '$md', - lineHeight: '$md', - }, - - 'lg': { - fontSize: '$lg', - lineHeight: '$xl', - }, - - 'xl': { - fontSize: '$xl', - lineHeight: '$xl', - }, - - '2xl': { - fontSize: '$2xl', - lineHeight: '$2xl', - }, - - '3xl': { - fontSize: '$3xl', - lineHeight: '$3xl', - }, - - '4xl': { - fontSize: '$4xl', - lineHeight: '$4xl', - }, - - '5xl': { - fontSize: '$5xl', - lineHeight: '$6xl', - }, - - '6xl': { - fontSize: '$6xl', - lineHeight: '$7xl', - }, + ':focusVisible': { + outline: 'none', }, }, + variants: {}, }); diff --git a/packages/native-ui/src/config/theme/InputIcon.ts b/packages/native-ui/src/config/theme/InputIcon.ts index 3e2c2a03d..872a55bd9 100644 --- a/packages/native-ui/src/config/theme/InputIcon.ts +++ b/packages/native-ui/src/config/theme/InputIcon.ts @@ -1,7 +1,3 @@ import { createStyle } from '@gluestack-style/react'; -export const InputIcon = createStyle({ - props: { - size: 'md', - }, -}); +export const InputIcon = createStyle({}); From 84378969061564f7880709204371bf7a09096b9c Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Wed, 5 Jun 2024 14:56:07 +0100 Subject: [PATCH 03/45] chore: add input docs --- .../components/Input/Docs.mdx | 102 +++++++++++++++++- .../components/Input/Input.tsx | 84 +++++++++++---- .../native-ui/src/components/Input/Input.tsx | 2 +- packages/native-ui/src/config/theme/Input.ts | 66 +++++++++++- .../native-ui/src/config/theme/InputField.ts | 6 +- 5 files changed, 233 insertions(+), 27 deletions(-) diff --git a/apps/native-ui-storybook/components/Input/Docs.mdx b/apps/native-ui-storybook/components/Input/Docs.mdx index c6f2c23dd..9dff1a8b1 100644 --- a/apps/native-ui-storybook/components/Input/Docs.mdx +++ b/apps/native-ui-storybook/components/Input/Docs.mdx @@ -1,7 +1,107 @@ import { Meta, Primary, Controls, Story, Canvas } from '@storybook/blocks'; import * as BadgeStories from './Input.stories'; -import { Badge, BadgeText, Center, NativeUIProvider } from '@utilitywarehouse/native-ui'; +import { + Input, + InputField, + InputIcon, + InputSlot, + Center, + NativeUIProvider, +} from '@utilitywarehouse/native-ui'; +import { EmailMediumIcon } from '@utilitywarehouse/react-native-icons'; # Input + +The input component is a text field that allows users to enter text, numbers, or other data. It is commonly used in forms and search fields. + +## Playground + + + + + +## Usage + +> This component should be wrapped in a `NativeUIProvider` component to ensure that the correct theme is applied. + + + +
+ console.log('###')}> + + + + + +
+ + + +```tsx +import { Input, InputField, InputIcon, InputSlot } from '@utilitywarehouse/native-ui'; +import { EmailMediumIcon } from '@utilitywarehouse/react-native-icons'; + +const MyComponent = () => { + const [value, setValue] = useState(''); + const handleChange = e => { + setValue(e.target.value); + }; + return ( + + + + + + + ); +}; +``` + +## Props + +### Input + +| Prop | Type | Default | Description | +| ------------------ | ---------------------------------- | ----------- | ------------------------------------ | +| validationStatus | `'initial' \| 'valid' \| 'invalid` | `'initial'` | The validation status of the input. | +| showValidationIcon | boolean | false | Whether to show the validation icon. | +| isDisabled | boolean | false | Disables the input. | +| isReadOnly | boolean | false | Makes the input read-only. | +| isFocused | boolean | false | Sets focus on the input. | + +### Descendants Styling Props + +Props to style child components. + +| Sx Prop | Description | +| ---------------- | --------------------------------- | +| \_input | Prop to style Input | +| \_icon | Prop to style InputIcon | +| \_validationIcon | Prop to style InputValidationIcon | + +### InputField + +| Prop | Type | Default | Description | +| ----------- | ---------------------- | -------- | ----------------------------------------------------------------- | +| value | string | | The value of the input. | +| onChange | function | | Callback function that is triggered when the input value changes. | +| onBlur | function | | Callback function that is triggered when the input loses focus. | +| onFocus | function | | Callback function that is triggered when the input gains focus. | +| placeholder | string | | The placeholder text for the input. | +| type | `'text' \| 'password'` | `'text'` | The type of the input. | + +### InputIcon + +| Prop | Type | Default | Description | +| ---- | ------ | ------- | ------------------- | +| as | string | | The icon component. | + +### InputSlot + +| Prop | Type | Default | Description | +| ---- | ---- | ------- | ----------- | +| - | - | - | - | + +For more information, see the [Gluestack Input component documentation](https://gluestack.io/ui/docs/components/forms/input). diff --git a/apps/native-ui-storybook/components/Input/Input.tsx b/apps/native-ui-storybook/components/Input/Input.tsx index e848caaef..e98d4e3a7 100644 --- a/apps/native-ui-storybook/components/Input/Input.tsx +++ b/apps/native-ui-storybook/components/Input/Input.tsx @@ -1,43 +1,87 @@ import React from 'react'; -import { Input, InputField, InputIcon } from '@utilitywarehouse/native-ui'; -import { AddSmallIcon } from '@utilitywarehouse/react-native-icons'; +import { Input, InputField, InputIcon, InputSlot } from '@utilitywarehouse/native-ui'; +import { EmailMediumIcon, EyeMediumIcon } from '@utilitywarehouse/react-native-icons'; import { Meta, StoryFn } from '@storybook/react'; -const InputBasic: StoryFn = ({ text = 'NEW FEATURE', icon = false, ...props }: any) => { +const InputBasic: StoryFn = ({ + placeholder, + validationStatus, + type, + _showIconLeft, + _showIconRight, + ...props +}: any) => { return ( - - - {icon && } + + {_showIconLeft && ( + + + + )} + + {_showIconRight && ( + + + + )} ); }; InputBasic.argTypes = { - colorScheme: { + placeholder: { + control: 'text', + description: 'The Input field placeholder', + defaultValue: '', + }, + type: { control: 'select', - options: ['cyan', 'red', 'green', 'gold', 'grey'], + options: ['text', 'password'], + description: 'The Input field type', + defaultValue: 'text', }, - borderless: { + validationStatus: { + control: 'select', + options: ['initial', 'valid', 'invalid'], + description: 'The validation status of the Input component', + defaultValue: 'initial', + }, + showValidationIcon: { control: 'boolean', + description: 'Show the validation icon', + defaultValue: true, }, - strong: { + isDisabled: { control: 'boolean', + description: 'Disable the Input component', + defaultValue: false, }, - size: { - control: 'select', - options: ['large', 'small'], + isFocused: { + control: 'boolean', + description: 'Focus the Input component', + defaultValue: false, }, - text: { - control: 'text', + _showIconLeft: { + control: 'boolean', + description: + 'Show icon left. \n _Note: this is not a prop of the `Input` component, just a representation of the `InputSlot` and `InputIcon` component for the Storybook playground._', + }, + _showIconRight: { + control: 'boolean', + description: + 'Show icon right. \n _Note: this is not a prop of the `Input` component, just a representation of the `InputSlot` and `InputIcon` component for the Storybook playground._', }, } as Meta['argTypes']; InputBasic.args = { - text: 'New Feature', - strong: false, - borderless: false, - colorScheme: 'cyan', - size: 'large', + placeholder: 'Input placeholder', + validationStatus: 'initial', + showValidationIcon: true, + type: 'text', + isDisabled: false, + isFocused: false, + _showIconLeft: false, + _showIconRight: false, } as Meta['args']; export default InputBasic; diff --git a/packages/native-ui/src/components/Input/Input.tsx b/packages/native-ui/src/components/Input/Input.tsx index d783f8964..36eb872d0 100644 --- a/packages/native-ui/src/components/Input/Input.tsx +++ b/packages/native-ui/src/components/Input/Input.tsx @@ -8,9 +8,9 @@ import { import { InputValidationIcon } from './styled-components'; const Input: React.FC = ({ - children, validationStatus, showValidationIcon = true, + children, ...props }) => { return ( diff --git a/packages/native-ui/src/config/theme/Input.ts b/packages/native-ui/src/config/theme/Input.ts index 56ceb3b0e..aaeee9daf 100644 --- a/packages/native-ui/src/config/theme/Input.ts +++ b/packages/native-ui/src/config/theme/Input.ts @@ -22,20 +22,22 @@ export const Input = createStyle({ }, ':readOnly': { - opacity: 0.5, borderColor: '$transparent', borderBottomColor: '$transparent', + paddingLeft: 0, }, ':disabled': { borderColor: '$grey400', borderBottomColor: '$grey600', + backgroundColor: '$grey50', _icon: { color: '$grey400', }, _input: { + color: '$grey400', props: { placeholderTextColor: '$grey400', }, @@ -51,7 +53,41 @@ export const Input = createStyle({ color: '$grey700', }, - _dark: {}, + _validationIcon: { + pl: '$2', + }, + + _dark: { + borderColor: '$darkGrey500', + borderBottomColor: '$darkGrey900', + backgroundColor: '$darkGrey25', + + ':focus': { + borderColor: '$darkCyan700', + borderBottomColor: '$darkyCyan700', + }, + + ':disabled': { + borderColor: '$darkGrey400', + borderBottomColor: '$darkGrey600', + backgroundColor: '$darkGrey50', + + _icon: { + color: '$darkGrey400', + }, + + _input: { + color: '$darkGrey400', + props: { + placeholderTextColor: '$darkGrey400', + }, + }, + }, + + _icon: { + color: '$darkGrey700', + }, + }, variants: { validationStatus: { @@ -67,6 +103,19 @@ export const Input = createStyle({ borderColor: '$green500', borderBottomColor: '$green500', }, + + _dark: { + borderBottomColor: '$darkGreen700', + + _validationIcon: { + color: '$darkGreen700', + }, + + ':focus': { + borderColor: '$darkGreen700', + borderBottomColor: '$darkGreen700', + }, + }, }, invalid: { borderBottomColor: '$red500', @@ -79,6 +128,19 @@ export const Input = createStyle({ borderColor: '$red500', borderBottomColor: '$red500', }, + + _dark: { + borderBottomColor: '$darkRed700', + + _validationIcon: { + color: '$darkRed700', + }, + + ':focus': { + borderColor: '$darkRed700', + borderBottomColor: '$darkRed700', + }, + }, }, }, }, diff --git a/packages/native-ui/src/config/theme/InputField.ts b/packages/native-ui/src/config/theme/InputField.ts index ddbbe44a6..1ee82bd33 100644 --- a/packages/native-ui/src/config/theme/InputField.ts +++ b/packages/native-ui/src/config/theme/InputField.ts @@ -6,7 +6,7 @@ export const InputField = createStyle({ borderTopRightRadius: '$2xl', borderBottomLeftRadius: '$none', borderBottomRightRadius: '$none', - color: '$textLight900', + color: '$grey1000', fontSize: '$lg', fontFamily: '$body', fontWeight: '$normal', @@ -23,9 +23,9 @@ export const InputField = createStyle({ placeholderTextColor: '$grey600', }, _dark: { - color: '$textDark50', + color: '$darkGrey1000', props: { - placeholderTextColor: '$textDark400', + placeholderTextColor: '$darkGrey600', }, }, _web: { From a89c14a693fe9358ee354fdb4d8df90cb29689e2 Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Wed, 5 Jun 2024 14:57:06 +0100 Subject: [PATCH 04/45] chore: changeset --- .changeset/seven-donuts-divide.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/seven-donuts-divide.md diff --git a/.changeset/seven-donuts-divide.md b/.changeset/seven-donuts-divide.md new file mode 100644 index 000000000..b28cd3867 --- /dev/null +++ b/.changeset/seven-donuts-divide.md @@ -0,0 +1,5 @@ +--- +'@utilitywarehouse/native-ui': minor +--- + +feat: add `Input` component From 113a2eb15403ca91420c23b7e9e811a572f2fe5d Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Wed, 5 Jun 2024 15:33:14 +0100 Subject: [PATCH 05/45] chore: update docs --- .../components/Input/Docs.mdx | 24 ++++++++++++++++++ .../docs/native-ui/introduction.mdx | 2 +- .../src/components/Input/Input.props.ts | 25 ++++++++++++++++++- .../native-ui/src/components/Input/Input.tsx | 9 ++++++- .../native-ui/src/config/theme/InputField.ts | 2 ++ 5 files changed, 59 insertions(+), 3 deletions(-) diff --git a/apps/native-ui-storybook/components/Input/Docs.mdx b/apps/native-ui-storybook/components/Input/Docs.mdx index 9dff1a8b1..68c7e1487 100644 --- a/apps/native-ui-storybook/components/Input/Docs.mdx +++ b/apps/native-ui-storybook/components/Input/Docs.mdx @@ -104,4 +104,28 @@ Props to style child components. | ---- | ---- | ------- | ----------- | | - | - | - | - | +## Accessibility + +We have outlined the various features that ensure the Input component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.Adheres to the [WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-1.2/#textbox). + +### Keyboard + +- Setting the aria-label and aria-hint to help users understand the purpose and function of the Input + +### Screen Reader + +- Compatible with screen readers such as VoiceOver and Talk-back. +- The accessible and aria-label props to provide descriptive information about the Input +- Setting aria-traits and aria-hint to provide contextual information about the various states of the Input, such as "double tap to edit". + +### Focus Management + +- The onFocus and onBlur props to manage focus states and provide visual cues to users. This is especially important for users who rely on keyboard navigation. + +### States + +- In error state, aria-invalid will be passed to indicate that the Input has an error, and providing support for an aria-errormessage to describe the error in more detail. +- In disabled state, aria-hidden will be passed to make input not focusable. +- In required state, aria-required will be passed to indicate that the Input is required. + For more information, see the [Gluestack Input component documentation](https://gluestack.io/ui/docs/components/forms/input). diff --git a/apps/native-ui-storybook/docs/native-ui/introduction.mdx b/apps/native-ui-storybook/docs/native-ui/introduction.mdx index f7679cfa7..cd9391140 100644 --- a/apps/native-ui-storybook/docs/native-ui/introduction.mdx +++ b/apps/native-ui-storybook/docs/native-ui/introduction.mdx @@ -30,7 +30,7 @@ yarn add @utilitywarehouse/native-ui To install the peer dependencies, you can run the following command: ```console -yarn add @utilitywarehouse/colour-system @utilitywarehouse/react-native-icons react-native-svg@14.1.0 react-native-reanimated +yarn add @utilitywarehouse/colour-system @utilitywarehouse/react-native-icons react-native-svg react-native-reanimated ``` For more information on how to install and configure `react-native-svg` and `react-native-reanimated`, please refer to the [react-native-svg](https://github.com/software-mansion/react-native-svg?tab=readme-ov-file#installation) diff --git a/packages/native-ui/src/components/Input/Input.props.ts b/packages/native-ui/src/components/Input/Input.props.ts index 0b0c8a6f5..fa4aa5631 100644 --- a/packages/native-ui/src/components/Input/Input.props.ts +++ b/packages/native-ui/src/components/Input/Input.props.ts @@ -1,19 +1,42 @@ import type { Input } from '@gluestack-ui/themed'; import type { ComponentProps } from 'react'; +interface InputComponentProps extends ComponentProps {} + /** * Props for the Input component. */ -interface InputProps extends ComponentProps { +interface InputProps extends Omit { /** * The show validation icon when validationStatus is 'valid' or 'invalid'. * @default true + * @type boolean * @example * ```tsx * * ``` **/ showValidationIcon?: boolean; + /** + * If true, the input will be disabled. + * + * @type boolean + * @example + * ```tsx + * + * ``` + */ + disabled?: InputComponentProps['isDisabled']; + /** + * The validation status of the Input component. + * + * @type 'initial' | 'valid' | 'invalid' + * @example + * ```tsx + * + * ``` + */ + validationStatus?: 'initial' | 'valid' | 'invalid'; } export default InputProps; diff --git a/packages/native-ui/src/components/Input/Input.tsx b/packages/native-ui/src/components/Input/Input.tsx index 36eb872d0..2a2bdaa0b 100644 --- a/packages/native-ui/src/components/Input/Input.tsx +++ b/packages/native-ui/src/components/Input/Input.tsx @@ -11,10 +11,17 @@ const Input: React.FC = ({ validationStatus, showValidationIcon = true, children, + disabled, + isDisabled, ...props }) => { return ( - + {children} {showValidationIcon && validationStatus === 'invalid' && ( diff --git a/packages/native-ui/src/config/theme/InputField.ts b/packages/native-ui/src/config/theme/InputField.ts index 1ee82bd33..59af23936 100644 --- a/packages/native-ui/src/config/theme/InputField.ts +++ b/packages/native-ui/src/config/theme/InputField.ts @@ -21,6 +21,8 @@ export const InputField = createStyle({ props: { placeholderTextColor: '$grey600', + selectionColor: '$cyan500', + cursorColor: '$cyan500', }, _dark: { color: '$darkGrey1000', From 9c2ab4ee0c91c7ec8f6314d88f733f809b6b3217 Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Fri, 7 Jun 2024 11:26:32 +0100 Subject: [PATCH 06/45] feat: add readonly styles --- .../components/Input/Input.tsx | 6 ++ .../components/Input/Variants.tsx | 21 ++----- .../native-ui/src/components/Input/Input.tsx | 57 ++++++++++++------- packages/native-ui/src/config/theme/Input.ts | 9 +-- 4 files changed, 50 insertions(+), 43 deletions(-) diff --git a/apps/native-ui-storybook/components/Input/Input.tsx b/apps/native-ui-storybook/components/Input/Input.tsx index e98d4e3a7..7332c25ed 100644 --- a/apps/native-ui-storybook/components/Input/Input.tsx +++ b/apps/native-ui-storybook/components/Input/Input.tsx @@ -56,6 +56,11 @@ InputBasic.argTypes = { description: 'Disable the Input component', defaultValue: false, }, + isReadOnly: { + control: 'boolean', + description: 'Read only the Input component', + defaultValue: false, + }, isFocused: { control: 'boolean', description: 'Focus the Input component', @@ -79,6 +84,7 @@ InputBasic.args = { showValidationIcon: true, type: 'text', isDisabled: false, + isReadOnly: false, isFocused: false, _showIconLeft: false, _showIconRight: false, diff --git a/apps/native-ui-storybook/components/Input/Variants.tsx b/apps/native-ui-storybook/components/Input/Variants.tsx index a93ee41af..57ddc4218 100644 --- a/apps/native-ui-storybook/components/Input/Variants.tsx +++ b/apps/native-ui-storybook/components/Input/Variants.tsx @@ -89,26 +89,13 @@ const InputVariants: StoryFn = () => { - {/* Input readonly TODO: Show example when readonly is supported - See: https://github.com/gluestack/gluestack-ui/issues/2214 - + Input readonly + - - */} + + ); diff --git a/packages/native-ui/src/components/Input/Input.tsx b/packages/native-ui/src/components/Input/Input.tsx index 2a2bdaa0b..867ba2491 100644 --- a/packages/native-ui/src/components/Input/Input.tsx +++ b/packages/native-ui/src/components/Input/Input.tsx @@ -12,29 +12,42 @@ const Input: React.FC = ({ showValidationIcon = true, children, disabled, + isReadOnly, isDisabled, ...props -}) => { - return ( - - {children} - {showValidationIcon && validationStatus === 'invalid' && ( - - - - )} - {showValidationIcon && validationStatus === 'valid' && ( - - - - )} - - ); -}; +}) => ( + + {children} + {showValidationIcon && validationStatus === 'invalid' && ( + + + + )} + {showValidationIcon && validationStatus === 'valid' && ( + + + + )} + +); export default Input; diff --git a/packages/native-ui/src/config/theme/Input.ts b/packages/native-ui/src/config/theme/Input.ts index aaeee9daf..b00f0a7ac 100644 --- a/packages/native-ui/src/config/theme/Input.ts +++ b/packages/native-ui/src/config/theme/Input.ts @@ -2,11 +2,12 @@ import { createStyle } from '@gluestack-style/react'; export const Input = createStyle({ borderWidth: 2, - borderColor: '$grey500', + borderTopColor: '$grey500', + borderLeftColor: '$grey500', + borderRightColor: '$grey500', borderBottomColor: '$grey900', height: '$14', borderTopLeftRadius: '$2xl', - borderTopRightRadius: '$2xl', borderBottomLeftRadius: '$none', borderBottomRightRadius: '$none', @@ -15,6 +16,7 @@ export const Input = createStyle({ alignContent: 'center', px: '$4', backgroundColor: '$white', + gap: '$2', ':focus': { borderColor: '$cyan500', @@ -24,7 +26,7 @@ export const Input = createStyle({ ':readOnly': { borderColor: '$transparent', borderBottomColor: '$transparent', - paddingLeft: 0, + px: 0, }, ':disabled': { @@ -46,7 +48,6 @@ export const Input = createStyle({ _input: { py: 'auto', - px: '$2', }, _icon: { From fca3ee35c86a55820863b5272a5e6d12da0f25eb Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Fri, 7 Jun 2024 11:31:53 +0100 Subject: [PATCH 07/45] chore: rename styles and fix readonly bg --- .../components/Input/Variants.tsx | 24 +++++++++---------- .../native-ui/src/components/Input/Input.tsx | 5 ++++ 2 files changed, 17 insertions(+), 12 deletions(-) diff --git a/apps/native-ui-storybook/components/Input/Variants.tsx b/apps/native-ui-storybook/components/Input/Variants.tsx index 57ddc4218..8e5668d49 100644 --- a/apps/native-ui-storybook/components/Input/Variants.tsx +++ b/apps/native-ui-storybook/components/Input/Variants.tsx @@ -15,81 +15,81 @@ const InputVariants: StoryFn = () => { return ( - Input + Defaut - Input with icon + With icon - Input with placeholder + With placeholder - Input with value + With value - Input focused + Focused - Input - Password + Type password - Input valid + Valid - Input valid focused + Valid focused - Input invalid + Invalid - Input invalid focused + Invalid focused - Input disabled + Disabled - Input readonly + Readonly diff --git a/packages/native-ui/src/components/Input/Input.tsx b/packages/native-ui/src/components/Input/Input.tsx index 867ba2491..da8c1f9f6 100644 --- a/packages/native-ui/src/components/Input/Input.tsx +++ b/packages/native-ui/src/components/Input/Input.tsx @@ -29,10 +29,15 @@ const Input: React.FC = ({ px: 0, borderWidth: 0, py: 2, + backgroundColor: 'transparent', } : { px: '$4', borderWidth: 2, + backgroundColor: '$white', + _dark: { + backgroundColor: '$darkGrey25', + }, } } > From a7d209cb38b4d9d9833802d8e5b2b1141091f177 Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Mon, 10 Jun 2024 16:45:20 +0100 Subject: [PATCH 08/45] fix: input styles --- .../native-ui/src/components/Input/Input.tsx | 96 +++++++++++-------- .../native-ui/src/components/Input/index.ts | 9 +- .../Input/styled-components/Icon.tsx | 7 ++ .../Input/styled-components/Input.tsx | 17 ++++ .../Input/styled-components/Root.tsx | 8 ++ .../Input/styled-components/Slot.tsx | 8 ++ .../Input/styled-components/index.ts | 4 + packages/native-ui/src/components/index.ts | 2 +- .../src/components/unstyled/index.ts | 11 --- 9 files changed, 109 insertions(+), 53 deletions(-) create mode 100644 packages/native-ui/src/components/Input/styled-components/Icon.tsx create mode 100644 packages/native-ui/src/components/Input/styled-components/Input.tsx create mode 100644 packages/native-ui/src/components/Input/styled-components/Root.tsx create mode 100644 packages/native-ui/src/components/Input/styled-components/Slot.tsx diff --git a/packages/native-ui/src/components/Input/Input.tsx b/packages/native-ui/src/components/Input/Input.tsx index da8c1f9f6..4119cfcdb 100644 --- a/packages/native-ui/src/components/Input/Input.tsx +++ b/packages/native-ui/src/components/Input/Input.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import { Input as GSInput, InputSlot } from '@gluestack-ui/themed'; +import { createInput } from '@gluestack-ui/input'; +import { Icon, Slot, Root, StyledInput } from './styled-components'; import type InputProps from './Input.props'; import { WarningMediumContainedIcon, @@ -7,6 +8,13 @@ import { } from '@utilitywarehouse/react-native-icons'; import { InputValidationIcon } from './styled-components'; +export const AccessibleInput = createInput({ + Icon, + Slot, + Root, + Input: StyledInput, +}); + const Input: React.FC = ({ validationStatus, showValidationIcon = true, @@ -15,44 +23,52 @@ const Input: React.FC = ({ isReadOnly, isDisabled, ...props -}) => ( - - {children} - {showValidationIcon && validationStatus === 'invalid' && ( - - - - )} - {showValidationIcon && validationStatus === 'valid' && ( - - - - )} - -); +}) => { + return ( + + {children} + {showValidationIcon && validationStatus === 'invalid' && ( + + + + )} + {showValidationIcon && validationStatus === 'valid' && ( + + + + )} + + ); +}; export default Input; diff --git a/packages/native-ui/src/components/Input/index.ts b/packages/native-ui/src/components/Input/index.ts index a2e60496d..58ae994d7 100644 --- a/packages/native-ui/src/components/Input/index.ts +++ b/packages/native-ui/src/components/Input/index.ts @@ -1 +1,8 @@ -export { default } from './Input'; +export { default as Input } from './Input'; +import { AccessibleInput } from './Input'; +import ValidationIcon from './styled-components/ValidationIcon'; + +export const InputIcon = AccessibleInput.Icon; +export const InputSlot = AccessibleInput.Slot; +export const InputField = AccessibleInput.Input; +export const InputValidationIcon = ValidationIcon; diff --git a/packages/native-ui/src/components/Input/styled-components/Icon.tsx b/packages/native-ui/src/components/Input/styled-components/Icon.tsx new file mode 100644 index 000000000..1317f5dd2 --- /dev/null +++ b/packages/native-ui/src/components/Input/styled-components/Icon.tsx @@ -0,0 +1,7 @@ +import { styled } from '@gluestack-style/react'; +import { AsForwarder } from '@gluestack-ui/themed'; + +export default styled(AsForwarder, {}, { + componentName: 'InputIcon', + ancestorStyle: ['_icon'], +} as const); diff --git a/packages/native-ui/src/components/Input/styled-components/Input.tsx b/packages/native-ui/src/components/Input/styled-components/Input.tsx new file mode 100644 index 000000000..e8f8d6c17 --- /dev/null +++ b/packages/native-ui/src/components/Input/styled-components/Input.tsx @@ -0,0 +1,17 @@ +import { styled } from '@gluestack-style/react'; +import { TextInput } from 'react-native'; + +export default styled( + TextInput, + {}, + { + componentName: 'InputField', + ancestorStyle: ['_inputField'], + resolveProps: ['placeholderTextColor'], + } as const, + { + propertyTokenMap: { + placeholderTextColor: 'colors', + }, + } +); diff --git a/packages/native-ui/src/components/Input/styled-components/Root.tsx b/packages/native-ui/src/components/Input/styled-components/Root.tsx new file mode 100644 index 000000000..5e2bdec8c --- /dev/null +++ b/packages/native-ui/src/components/Input/styled-components/Root.tsx @@ -0,0 +1,8 @@ +import { styled } from '@gluestack-style/react'; +import { View } from 'react-native'; + +export default styled(View, {}, { + componentName: 'Input', + ancestorStyle: ['_input'], + descendantStyle: ['_inputField', '_icon'], +} as const); diff --git a/packages/native-ui/src/components/Input/styled-components/Slot.tsx b/packages/native-ui/src/components/Input/styled-components/Slot.tsx new file mode 100644 index 000000000..ac45a8524 --- /dev/null +++ b/packages/native-ui/src/components/Input/styled-components/Slot.tsx @@ -0,0 +1,8 @@ +import { styled } from '@gluestack-style/react'; +import { Pressable } from 'react-native'; + +export default styled(Pressable, {}, { + componentName: 'InputSlot', + ancestorStyle: ['_slot'], + descendantStyle: ['_icon'], +} as const); diff --git a/packages/native-ui/src/components/Input/styled-components/index.ts b/packages/native-ui/src/components/Input/styled-components/index.ts index c18eb2b2a..39888004f 100644 --- a/packages/native-ui/src/components/Input/styled-components/index.ts +++ b/packages/native-ui/src/components/Input/styled-components/index.ts @@ -1 +1,5 @@ export { default as InputValidationIcon } from './ValidationIcon'; +export { default as Root } from './Root'; +export { default as Icon } from './Icon'; +export { default as Slot } from './Slot'; +export { default as StyledInput } from './Input'; diff --git a/packages/native-ui/src/components/index.ts b/packages/native-ui/src/components/index.ts index 675c31aaf..99a9ec31f 100644 --- a/packages/native-ui/src/components/index.ts +++ b/packages/native-ui/src/components/index.ts @@ -4,7 +4,7 @@ export * from './Alert'; export { default as AnimatedOutline } from './AnimatedOutline'; export { default as CheckboxIndicator } from './CheckboxIndicator'; export { default as RadioIndicator } from './RadioIndicator'; -export { default as Input } from './Input'; +export * from './Input'; export * from './Spinner'; // Gluestack UI diff --git a/packages/native-ui/src/components/unstyled/index.ts b/packages/native-ui/src/components/unstyled/index.ts index 2c86df88b..61fbd3f63 100644 --- a/packages/native-ui/src/components/unstyled/index.ts +++ b/packages/native-ui/src/components/unstyled/index.ts @@ -1,16 +1,5 @@ export { Divider } from '@gluestack-ui/themed'; -export { - FormControl, - FormControlError, - FormControlErrorIcon, - FormControlErrorText, - FormControlHelper, - FormControlHelperText, - FormControlLabel, - FormControlLabelText, -} from '@gluestack-ui/themed'; - export { Select, SelectBackdrop, From 92dcff740cfbb9f99a738802349b79f31928e6ec Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Tue, 11 Jun 2024 10:03:41 +0100 Subject: [PATCH 09/45] chore: checks --- packages/native-ui/unstyled/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/native-ui/unstyled/index.js b/packages/native-ui/unstyled/index.js index 2bd7ea6a0..bf3e26f5c 100644 --- a/packages/native-ui/unstyled/index.js +++ b/packages/native-ui/unstyled/index.js @@ -1,6 +1,4 @@ export { Divider } from '@gluestack-ui/themed'; -export { FormControl, FormControlError, FormControlErrorIcon, FormControlErrorText, FormControlHelper, FormControlHelperText, FormControlLabel, FormControlLabelText, } from '@gluestack-ui/themed'; -export { Input, InputField, InputIcon, InputSlot } from '@gluestack-ui/themed'; export { Select, SelectBackdrop, SelectContent, SelectDragIndicator, SelectDragIndicatorWrapper, SelectFlatList, SelectIcon, SelectInput, SelectItem, SelectItemText, SelectPortal, SelectScrollView, SelectSectionHeaderText, SelectSectionList, SelectTrigger, SelectVirtualizedList, } from '@gluestack-ui/themed'; export { Slider, SliderFilledTrack, SliderThumb, SliderTrack } from '@gluestack-ui/themed'; export { Switch } from '@gluestack-ui/themed'; From 6b1526e8edbef5738807c0f12a657a446b5f0c0e Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Tue, 11 Jun 2024 10:11:49 +0100 Subject: [PATCH 10/45] chore: update deps --- packages/native-ui/package.json | 4 +- pnpm-lock.yaml | 529 +++++++------------------------- 2 files changed, 112 insertions(+), 421 deletions(-) diff --git a/packages/native-ui/package.json b/packages/native-ui/package.json index 944a717d5..215250a3d 100644 --- a/packages/native-ui/package.json +++ b/packages/native-ui/package.json @@ -19,7 +19,7 @@ "@gluestack-style/animation-resolver": "^1.0.4", "@gluestack-style/legend-motion-animation-driver": "^1.0.3", "@gluestack-style/react": "1.0.56", - "@gluestack-ui/themed": "1.1.26", + "@gluestack-ui/themed": "1.1.29", "@utilitywarehouse/colour-system": "workspace:^" }, "devDependencies": { @@ -35,7 +35,7 @@ "react-native-reanimated": "3.10.1", "react-native-web": "^0.19.11", "ts-loader": "^9.4.4", - "typescript": "^5.1.6", + "typescript": "^5.4.5", "url-loader": "^4.1.1", "webpack": "^5.88.2", "webpack-cli": "^5.1.4" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a259d19df..0e2a1f41a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -301,8 +301,8 @@ importers: specifier: 1.0.56 version: 1.0.56 '@gluestack-ui/themed': - specifier: 1.1.26 - version: 1.1.26(@gluestack-style/react@1.0.56)(@types/react-native@0.73.0)(nativewind@2.0.11)(react-dom@18.2.0)(react-native-svg@14.1.0)(react-native-web@0.19.11)(react-native@0.74.1)(react@18.2.0) + specifier: 1.1.29 + version: 1.1.29(@gluestack-style/react@1.0.56)(@types/react-native@0.73.0)(nativewind@2.0.11)(react-dom@18.2.0)(react-native-svg@14.1.0)(react-native-web@0.19.11)(react-native@0.74.1)(react@18.2.0) '@utilitywarehouse/colour-system': specifier: workspace:^ version: link:../colour-system @@ -315,13 +315,13 @@ importers: devDependencies: '@babel/preset-env': specifier: ^7.22.9 - version: 7.24.4 + version: 7.24.4(@babel/core@7.24.5) '@babel/preset-react': specifier: ^7.22.5 version: 7.22.5 '@babel/preset-typescript': specifier: ^7.22.5 - version: 7.24.1 + version: 7.24.1(@babel/core@7.24.5) '@types/react': specifier: ^18.2.45 version: 18.2.45 @@ -348,10 +348,10 @@ importers: version: 0.19.11(react-dom@18.2.0)(react@18.2.0) ts-loader: specifier: ^9.4.4 - version: 9.4.4(typescript@5.3.2)(webpack@5.88.2) + version: 9.4.4(typescript@5.4.5)(webpack@5.88.2) typescript: - specifier: ^5.1.6 - version: 5.3.2 + specifier: ^5.4.5 + version: 5.4.5 url-loader: specifier: ^4.1.1 version: 4.1.1(file-loader@6.2.0)(webpack@5.88.2) @@ -399,13 +399,13 @@ importers: devDependencies: '@babel/preset-env': specifier: ^7.20.2 - version: 7.24.4 + version: 7.24.4(@babel/core@7.24.5) '@babel/preset-react': specifier: ^7.18.6 version: 7.22.5 '@babel/preset-typescript': specifier: ^7.18.6 - version: 7.24.1 + version: 7.24.1(@babel/core@7.24.5) '@mui/material': specifier: 5.14.15 version: 5.14.15(@emotion/react@11.10.6)(@emotion/styled@11.10.6)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0) @@ -974,7 +974,6 @@ packages: '@babel/core': 7.24.5 '@babel/helper-environment-visitor': 7.22.20 '@babel/helper-plugin-utils': 7.24.0 - dev: true /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.24.1(@babel/core@7.19.3): resolution: {integrity: sha512-y4HqEnkelJIOQGd+3g1bTeKsA5c6qM7eOn7VggGVbBc0y8MLSKHacwcIE2PplNlQSj0PqS9rrXL/nkPVK+kUNg==} @@ -999,7 +998,6 @@ packages: dependencies: '@babel/core': 7.24.5 '@babel/helper-plugin-utils': 7.24.0 - dev: true /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.24.1(@babel/core@7.19.3): resolution: {integrity: sha512-Hj791Ii4ci8HqnaKHAlLNs+zaLXb0EzSDhiAWp5VNlyvCNymYfacs64pxTxbH1znW/NcArSmwpmG9IKE/TUVVQ==} @@ -1028,7 +1026,6 @@ packages: '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 '@babel/plugin-transform-optional-chaining': 7.24.1(@babel/core@7.24.5) - dev: true /@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.24.1(@babel/core@7.19.3): resolution: {integrity: sha512-m9m/fXsXLiHfwdgydIFnpk+7jlVbnvlK5B2EKiPdLUb6WX654ZaaEWJUjk8TftRbZpK0XibovlLWX4KIZhV6jw==} @@ -1055,22 +1052,6 @@ packages: '@babel/core': 7.24.5 '@babel/helper-environment-visitor': 7.22.20 '@babel/helper-plugin-utils': 7.24.0 - dev: true - - /@babel/plugin-proposal-async-generator-functions@7.20.7: - resolution: {integrity: sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==} - engines: {node: '>=6.9.0'} - deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-async-generator-functions instead. - peerDependencies: - '@babel/core': ^7.0.0-0 - peerDependenciesMeta: - '@babel/core': - optional: true - dependencies: - '@babel/helper-environment-visitor': 7.22.20 - '@babel/helper-plugin-utils': 7.24.0 - '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.19.3) - '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.19.3) /@babel/plugin-proposal-async-generator-functions@7.20.7(@babel/core@7.24.5): resolution: {integrity: sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==} @@ -1088,19 +1069,6 @@ packages: '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.24.5) '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.5) - /@babel/plugin-proposal-class-properties@7.18.6: - resolution: {integrity: sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==} - engines: {node: '>=6.9.0'} - deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead. - peerDependencies: - '@babel/core': ^7.0.0-0 - peerDependenciesMeta: - '@babel/core': - optional: true - dependencies: - '@babel/helper-create-class-features-plugin': 7.24.4(@babel/core@7.19.3) - '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.24.5): resolution: {integrity: sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==} engines: {node: '>=6.9.0'} @@ -1158,19 +1126,6 @@ packages: '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.24.5) dev: false - /@babel/plugin-proposal-logical-assignment-operators@7.20.7: - resolution: {integrity: sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug==} - engines: {node: '>=6.9.0'} - deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-logical-assignment-operators instead. - peerDependencies: - '@babel/core': ^7.0.0-0 - peerDependenciesMeta: - '@babel/core': - optional: true - dependencies: - '@babel/helper-plugin-utils': 7.24.0 - '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.19.3) - /@babel/plugin-proposal-logical-assignment-operators@7.20.7(@babel/core@7.24.5): resolution: {integrity: sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug==} engines: {node: '>=6.9.0'} @@ -1185,19 +1140,6 @@ packages: '@babel/helper-plugin-utils': 7.24.0 '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.24.5) - /@babel/plugin-proposal-nullish-coalescing-operator@7.18.6: - resolution: {integrity: sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==} - engines: {node: '>=6.9.0'} - deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead. - peerDependencies: - '@babel/core': ^7.0.0-0 - peerDependenciesMeta: - '@babel/core': - optional: true - dependencies: - '@babel/helper-plugin-utils': 7.24.0 - '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.19.3) - /@babel/plugin-proposal-nullish-coalescing-operator@7.18.6(@babel/core@7.24.5): resolution: {integrity: sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==} engines: {node: '>=6.9.0'} @@ -1212,19 +1154,6 @@ packages: '@babel/helper-plugin-utils': 7.24.0 '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.5) - /@babel/plugin-proposal-numeric-separator@7.18.6: - resolution: {integrity: sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==} - engines: {node: '>=6.9.0'} - deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead. - peerDependencies: - '@babel/core': ^7.0.0-0 - peerDependenciesMeta: - '@babel/core': - optional: true - dependencies: - '@babel/helper-plugin-utils': 7.24.0 - '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.19.3) - /@babel/plugin-proposal-numeric-separator@7.18.6(@babel/core@7.24.5): resolution: {integrity: sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==} engines: {node: '>=6.9.0'} @@ -1239,22 +1168,6 @@ packages: '@babel/helper-plugin-utils': 7.24.0 '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.5) - /@babel/plugin-proposal-object-rest-spread@7.20.7: - resolution: {integrity: sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==} - engines: {node: '>=6.9.0'} - deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead. - peerDependencies: - '@babel/core': ^7.0.0-0 - peerDependenciesMeta: - '@babel/core': - optional: true - dependencies: - '@babel/compat-data': 7.24.4 - '@babel/helper-compilation-targets': 7.23.6 - '@babel/helper-plugin-utils': 7.24.0 - '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.19.3) - '@babel/plugin-transform-parameters': 7.24.1(@babel/core@7.19.3) - /@babel/plugin-proposal-object-rest-spread@7.20.7(@babel/core@7.24.5): resolution: {integrity: sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==} engines: {node: '>=6.9.0'} @@ -1272,19 +1185,6 @@ packages: '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.5) '@babel/plugin-transform-parameters': 7.24.1(@babel/core@7.24.5) - /@babel/plugin-proposal-optional-catch-binding@7.18.6: - resolution: {integrity: sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==} - engines: {node: '>=6.9.0'} - deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-catch-binding instead. - peerDependencies: - '@babel/core': ^7.0.0-0 - peerDependenciesMeta: - '@babel/core': - optional: true - dependencies: - '@babel/helper-plugin-utils': 7.24.0 - '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.19.3) - /@babel/plugin-proposal-optional-catch-binding@7.18.6(@babel/core@7.24.5): resolution: {integrity: sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==} engines: {node: '>=6.9.0'} @@ -1299,20 +1199,6 @@ packages: '@babel/helper-plugin-utils': 7.24.0 '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.5) - /@babel/plugin-proposal-optional-chaining@7.21.0: - resolution: {integrity: sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==} - engines: {node: '>=6.9.0'} - deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead. - peerDependencies: - '@babel/core': ^7.0.0-0 - peerDependenciesMeta: - '@babel/core': - optional: true - dependencies: - '@babel/helper-plugin-utils': 7.24.0 - '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 - '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.19.3) - /@babel/plugin-proposal-optional-chaining@7.21.0(@babel/core@7.24.5): resolution: {integrity: sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==} engines: {node: '>=6.9.0'} @@ -1349,7 +1235,6 @@ packages: optional: true dependencies: '@babel/core': 7.24.5 - dev: true /@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.19.3): resolution: {integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==} @@ -1418,7 +1303,6 @@ packages: dependencies: '@babel/core': 7.24.5 '@babel/helper-plugin-utils': 7.24.0 - dev: true /@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.19.3): resolution: {integrity: sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==} @@ -1443,7 +1327,6 @@ packages: dependencies: '@babel/core': 7.24.5 '@babel/helper-plugin-utils': 7.24.0 - dev: true /@babel/plugin-syntax-decorators@7.24.1(@babel/core@7.24.5): resolution: {integrity: sha512-05RJdO/cCrtVWuAaSn1tS3bH8jbsJa/Y1uD186u6J4C/1mnHFxseeuWpsqr9anvo7TUulev7tm7GDwRV+VuhDw==} @@ -1549,7 +1432,6 @@ packages: dependencies: '@babel/core': 7.24.5 '@babel/helper-plugin-utils': 7.24.0 - dev: true /@babel/plugin-syntax-import-attributes@7.24.1(@babel/core@7.19.3): resolution: {integrity: sha512-zhQTMH0X2nVLnb04tz+s7AMuasX8U0FnpE+nHTOhSOINjWMnopoZTxtIKsd45n4GQ/HIZLyfIpoul8e2m0DnRA==} @@ -1574,7 +1456,6 @@ packages: dependencies: '@babel/core': 7.24.5 '@babel/helper-plugin-utils': 7.24.0 - dev: true /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.19.3): resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==} @@ -1597,7 +1478,6 @@ packages: dependencies: '@babel/core': 7.24.5 '@babel/helper-plugin-utils': 7.24.0 - dev: true /@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.19.3): resolution: {integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==} @@ -1620,7 +1500,6 @@ packages: dependencies: '@babel/core': 7.24.5 '@babel/helper-plugin-utils': 7.24.0 - dev: true /@babel/plugin-syntax-jsx@7.24.1(@babel/core@7.19.3): resolution: {integrity: sha512-2eCtxZXf+kbkMIsXS4poTvT4Yu5rXiRa+9xGVT56raghjmBTKMpFNc9R4IDiB4emao9eO22Ox7CxuJG7BgExqA==} @@ -1633,6 +1512,7 @@ packages: dependencies: '@babel/core': 7.19.3 '@babel/helper-plugin-utils': 7.24.0 + dev: true /@babel/plugin-syntax-jsx@7.24.1(@babel/core@7.24.5): resolution: {integrity: sha512-2eCtxZXf+kbkMIsXS4poTvT4Yu5rXiRa+9xGVT56raghjmBTKMpFNc9R4IDiB4emao9eO22Ox7CxuJG7BgExqA==} @@ -1825,7 +1705,6 @@ packages: dependencies: '@babel/core': 7.24.5 '@babel/helper-plugin-utils': 7.24.0 - dev: true /@babel/plugin-syntax-typescript@7.24.1(@babel/core@7.19.3): resolution: {integrity: sha512-Yhnmvy5HZEnHUty6i++gcfH1/l68AHnItFHnaCv6hn9dNh0hQvvQJsxpi4BMBFN5DLeHBuucT/0DgzXif/OyRw==} @@ -1838,6 +1717,7 @@ packages: dependencies: '@babel/core': 7.19.3 '@babel/helper-plugin-utils': 7.24.0 + dev: true /@babel/plugin-syntax-typescript@7.24.1(@babel/core@7.24.5): resolution: {integrity: sha512-Yhnmvy5HZEnHUty6i++gcfH1/l68AHnItFHnaCv6hn9dNh0hQvvQJsxpi4BMBFN5DLeHBuucT/0DgzXif/OyRw==} @@ -1876,7 +1756,6 @@ packages: '@babel/core': 7.24.5 '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.5) '@babel/helper-plugin-utils': 7.24.0 - dev: true /@babel/plugin-transform-arrow-functions@7.24.1(@babel/core@7.19.3): resolution: {integrity: sha512-ngT/3NkRhsaep9ck9uj2Xhv9+xB1zShY3tM3g6om4xxCELwCDN4g4Aq5dRn48+0hasAql7s2hdBOysCfNpr4fw==} @@ -1931,7 +1810,6 @@ packages: '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.24.5) '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.5) - dev: true /@babel/plugin-transform-async-to-generator@7.24.1(@babel/core@7.19.3): resolution: {integrity: sha512-AawPptitRXp1y0n4ilKcGbRYWfbbzFWz2NqNu7dacYDtFtz0CMjG64b3LQsb3KIgnf4/obcUL78hfaOS7iCUfw==} @@ -1984,7 +1862,6 @@ packages: dependencies: '@babel/core': 7.24.5 '@babel/helper-plugin-utils': 7.24.0 - dev: true /@babel/plugin-transform-block-scoping@7.24.4(@babel/core@7.19.3): resolution: {integrity: sha512-nIFUZIpGKDf9O9ttyRXpHFpKC+X3Y5mtshZONuEUYBomAKoM4y029Jr+uB1bHGPhNmK8YXHevDtKDOLmtRrp6g==} @@ -2063,7 +1940,6 @@ packages: '@babel/helper-create-class-features-plugin': 7.24.4(@babel/core@7.24.5) '@babel/helper-plugin-utils': 7.24.0 '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.24.5) - dev: true /@babel/plugin-transform-classes@7.24.1(@babel/core@7.19.3): resolution: {integrity: sha512-ZTIe3W7UejJd3/3R4p7ScyyOoafetUShSf4kCqV0O7F/RiHxVj/wRaRnQlrGwflvcehNA8M42HkAiEDYZu2F1Q==} @@ -2178,7 +2054,6 @@ packages: '@babel/core': 7.24.5 '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.5) '@babel/helper-plugin-utils': 7.24.0 - dev: true /@babel/plugin-transform-duplicate-keys@7.24.1(@babel/core@7.19.3): resolution: {integrity: sha512-msyzuUnvsjsaSaocV6L7ErfNsa5nDWL1XKNnDePLgmz+WdU4w/J8+AxBMrWfi9m4IxfL5sZQKUPQKDQeeAT6lA==} @@ -2203,7 +2078,6 @@ packages: dependencies: '@babel/core': 7.24.5 '@babel/helper-plugin-utils': 7.24.0 - dev: true /@babel/plugin-transform-dynamic-import@7.24.1(@babel/core@7.19.3): resolution: {integrity: sha512-av2gdSTyXcJVdI+8aFZsCAtR29xJt0S5tas+Ef8NvBNmD1a+N/3ecMLeMBgfcK+xzsjdLDT6oHt+DFPyeqUbDA==} @@ -2230,7 +2104,6 @@ packages: '@babel/core': 7.24.5 '@babel/helper-plugin-utils': 7.24.0 '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.5) - dev: true /@babel/plugin-transform-exponentiation-operator@7.24.1(@babel/core@7.19.3): resolution: {integrity: sha512-U1yX13dVBSwS23DEAqU+Z/PkwE9/m7QQy8Y9/+Tdb8UWYaGNDYwTLi19wqIAiROr8sXVum9A/rtiH5H0boUcTw==} @@ -2257,7 +2130,6 @@ packages: '@babel/core': 7.24.5 '@babel/helper-builder-binary-assignment-operator-visitor': 7.22.15 '@babel/helper-plugin-utils': 7.24.0 - dev: true /@babel/plugin-transform-export-namespace-from@7.24.1(@babel/core@7.19.3): resolution: {integrity: sha512-Ft38m/KFOyzKw2UaJFkWG9QnHPG/Q/2SkOrRk4pNBPg5IPZ+dOxcmkK5IyuBcxiNPyyYowPGUReyBvrvZs7IlQ==} @@ -2323,7 +2195,6 @@ packages: '@babel/core': 7.24.5 '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 - dev: true /@babel/plugin-transform-function-name@7.24.1(@babel/core@7.19.3): resolution: {integrity: sha512-BXmDZpPlh7jwicKArQASrj8n22/w6iymRnvHYYd2zO30DbE277JO20/7yXJT3QxDPtiQiOxQBbZH4TpivNXIxA==} @@ -2378,7 +2249,6 @@ packages: '@babel/core': 7.24.5 '@babel/helper-plugin-utils': 7.24.0 '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.24.5) - dev: true /@babel/plugin-transform-literals@7.24.1(@babel/core@7.19.3): resolution: {integrity: sha512-zn9pwz8U7nCqOYIiBaOxoQOtYmMODXTJnkxG4AtX8fPmnCRYWBOHD0qcpwS9e2VDSp1zNJYpdnFMIKb8jmwu6g==} @@ -2429,7 +2299,6 @@ packages: '@babel/core': 7.24.5 '@babel/helper-plugin-utils': 7.24.0 '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.24.5) - dev: true /@babel/plugin-transform-member-expression-literals@7.24.1(@babel/core@7.19.3): resolution: {integrity: sha512-4ojai0KysTWXzHseJKa1XPNXKRbuUrhkOPY4rEGeR+7ChlJVKxFa3H3Bz+7tWaGKgJAXUWKOGmltN+u9B3+CVg==} @@ -2454,7 +2323,6 @@ packages: dependencies: '@babel/core': 7.24.5 '@babel/helper-plugin-utils': 7.24.0 - dev: true /@babel/plugin-transform-modules-amd@7.24.1(@babel/core@7.19.3): resolution: {integrity: sha512-lAxNHi4HVtjnHd5Rxg3D5t99Xm6H7b04hUS7EHIXcUl2EV4yl1gWdqZrNzXnSrHveL9qMdbODlLF55mvgjAfaQ==} @@ -2615,7 +2483,6 @@ packages: dependencies: '@babel/core': 7.24.5 '@babel/helper-plugin-utils': 7.24.0 - dev: true /@babel/plugin-transform-nullish-coalescing-operator@7.24.1(@babel/core@7.19.3): resolution: {integrity: sha512-iQ+caew8wRrhCikO5DrUYx0mrmdhkaELgFa+7baMcVuhxIkN7oxt06CZ51D65ugIb1UWRQ8oQe+HXAVM6qHFjw==} @@ -2668,7 +2535,6 @@ packages: '@babel/core': 7.24.5 '@babel/helper-plugin-utils': 7.24.0 '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.5) - dev: true /@babel/plugin-transform-object-rest-spread@7.24.1(@babel/core@7.19.3): resolution: {integrity: sha512-XjD5f0YqOtebto4HGISLNfiNMTTs6tbkFf2TOqJlYKYmbo+mN9Dnpl4SRoofiziuOWMIyq3sZEUqLo3hLITFEA==} @@ -2725,7 +2591,6 @@ packages: '@babel/core': 7.24.5 '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-replace-supers': 7.24.1(@babel/core@7.24.5) - dev: true /@babel/plugin-transform-optional-catch-binding@7.24.1(@babel/core@7.19.3): resolution: {integrity: sha512-oBTH7oURV4Y+3EUrf6cWn1OHio3qG/PVwO5J03iSJmBg6m2EhKjkAu/xuaXaYwWW9miYtvbWv4LNf0AmR43LUA==} @@ -2752,7 +2617,6 @@ packages: '@babel/core': 7.24.5 '@babel/helper-plugin-utils': 7.24.0 '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.5) - dev: true /@babel/plugin-transform-optional-chaining@7.24.1(@babel/core@7.19.3): resolution: {integrity: sha512-n03wmDt+987qXwAgcBlnUUivrZBPZ8z1plL0YvgQalLm+ZE5BMhGm94jhxXtA1wzv1Cu2aaOv1BM9vbVttrzSg==} @@ -2885,7 +2749,6 @@ packages: dependencies: '@babel/core': 7.24.5 '@babel/helper-plugin-utils': 7.24.0 - dev: true /@babel/plugin-transform-react-display-name@7.24.1(@babel/core@7.24.5): resolution: {integrity: sha512-mvoQg2f9p2qlpDQRBC7M3c3XTr0k7cp/0+kFKKO/7Gtu0LSw16eKB+Fabe2bDT/UpsyasTBBkAnbdsLrkD5XMw==} @@ -2899,18 +2762,6 @@ packages: '@babel/core': 7.24.5 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-react-jsx-development@7.22.5: - resolution: {integrity: sha512-bDhuzwWMuInwCYeDeMzyi7TaBgRQei6DqxhbyniL7/VG4RSS7HtSL2QbY4eESy1KJqlWt8g3xeEBGPuo+XqC8A==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - peerDependenciesMeta: - '@babel/core': - optional: true - dependencies: - '@babel/plugin-transform-react-jsx': 7.23.4 - dev: true - /@babel/plugin-transform-react-jsx-development@7.22.5(@babel/core@7.24.5): resolution: {integrity: sha512-bDhuzwWMuInwCYeDeMzyi7TaBgRQei6DqxhbyniL7/VG4RSS7HtSL2QbY4eESy1KJqlWt8g3xeEBGPuo+XqC8A==} engines: {node: '>=6.9.0'} @@ -2947,21 +2798,6 @@ packages: '@babel/core': 7.24.5 '@babel/helper-plugin-utils': 7.24.0 - /@babel/plugin-transform-react-jsx@7.23.4: - resolution: {integrity: sha512-5xOpoPguCZCRbo/JeHlloSkTA8Bld1J/E1/kLfD1nsuiW1m8tduTA1ERCgIZokDflX/IBzKcqR3l7VlRgiIfHA==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - peerDependenciesMeta: - '@babel/core': - optional: true - dependencies: - '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-module-imports': 7.24.3 - '@babel/helper-plugin-utils': 7.24.0 - '@babel/plugin-syntax-jsx': 7.24.1(@babel/core@7.19.3) - '@babel/types': 7.24.5 - /@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.24.5): resolution: {integrity: sha512-5xOpoPguCZCRbo/JeHlloSkTA8Bld1J/E1/kLfD1nsuiW1m8tduTA1ERCgIZokDflX/IBzKcqR3l7VlRgiIfHA==} engines: {node: '>=6.9.0'} @@ -3016,7 +2852,6 @@ packages: '@babel/core': 7.24.5 '@babel/helper-plugin-utils': 7.24.0 regenerator-transform: 0.15.2 - dev: true /@babel/plugin-transform-reserved-words@7.24.1(@babel/core@7.19.3): resolution: {integrity: sha512-JAclqStUfIwKN15HrsQADFgeZt+wexNQ0uLhuqvqAUFoqPMjEcFCYZBhq0LUdz6dZK/mD+rErhW71fbx8RYElg==} @@ -3041,25 +2876,6 @@ packages: dependencies: '@babel/core': 7.24.5 '@babel/helper-plugin-utils': 7.24.0 - dev: true - - /@babel/plugin-transform-runtime@7.24.3: - resolution: {integrity: sha512-J0BuRPNlNqlMTRJ72eVptpt9VcInbxO6iP3jaxr+1NPhC0UkKL+6oeX6VXMEYdADnuqmMmsBspt4d5w8Y/TCbQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - peerDependenciesMeta: - '@babel/core': - optional: true - dependencies: - '@babel/helper-module-imports': 7.24.3 - '@babel/helper-plugin-utils': 7.24.0 - babel-plugin-polyfill-corejs2: 0.4.11(@babel/core@7.19.3) - babel-plugin-polyfill-corejs3: 0.10.4(@babel/core@7.19.3) - babel-plugin-polyfill-regenerator: 0.6.2(@babel/core@7.19.3) - semver: 6.3.1 - transitivePeerDependencies: - - supports-color /@babel/plugin-transform-runtime@7.24.3(@babel/core@7.24.5): resolution: {integrity: sha512-J0BuRPNlNqlMTRJ72eVptpt9VcInbxO6iP3jaxr+1NPhC0UkKL+6oeX6VXMEYdADnuqmMmsBspt4d5w8Y/TCbQ==} @@ -3201,7 +3017,6 @@ packages: dependencies: '@babel/core': 7.24.5 '@babel/helper-plugin-utils': 7.24.0 - dev: true /@babel/plugin-transform-typescript@7.24.4(@babel/core@7.19.3): resolution: {integrity: sha512-79t3CQ8+oBGk/80SQ8MN3Bs3obf83zJ0YZjDmDaEZN8MqhMI760apl5z6a20kFeMXBwJX99VpKT8CKxEBp5H1g==} @@ -3217,6 +3032,7 @@ packages: '@babel/helper-create-class-features-plugin': 7.24.4(@babel/core@7.19.3) '@babel/helper-plugin-utils': 7.24.0 '@babel/plugin-syntax-typescript': 7.24.1(@babel/core@7.19.3) + dev: true /@babel/plugin-transform-typescript@7.24.4(@babel/core@7.24.5): resolution: {integrity: sha512-79t3CQ8+oBGk/80SQ8MN3Bs3obf83zJ0YZjDmDaEZN8MqhMI760apl5z6a20kFeMXBwJX99VpKT8CKxEBp5H1g==} @@ -3256,7 +3072,6 @@ packages: dependencies: '@babel/core': 7.24.5 '@babel/helper-plugin-utils': 7.24.0 - dev: true /@babel/plugin-transform-unicode-property-regex@7.24.1(@babel/core@7.19.3): resolution: {integrity: sha512-Ss4VvlfYV5huWApFsF8/Sq0oXnGO+jB+rijFEFugTd3cwSObUSnUi88djgR5528Csl0uKlrI331kRqe56Ov2Ng==} @@ -3283,7 +3098,6 @@ packages: '@babel/core': 7.24.5 '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.5) '@babel/helper-plugin-utils': 7.24.0 - dev: true /@babel/plugin-transform-unicode-regex@7.24.1(@babel/core@7.19.3): resolution: {integrity: sha512-2A/94wgZgxfTsiLaQ2E36XAOdcZmGAaEEgVmxQWwZXWkGhvoHbaqXcKnU8zny4ycpu3vNqg0L/PcCiYtHtA13g==} @@ -3336,100 +3150,6 @@ packages: '@babel/core': 7.24.5 '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.5) '@babel/helper-plugin-utils': 7.24.0 - dev: true - - /@babel/preset-env@7.24.4: - resolution: {integrity: sha512-7Kl6cSmYkak0FK/FXjSEnLJ1N9T/WA2RkMhu17gZ/dsxKJUuTYNIylahPTzqpLyJN4WhDif8X0XK1R8Wsguo/A==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - peerDependenciesMeta: - '@babel/core': - optional: true - dependencies: - '@babel/compat-data': 7.24.4 - '@babel/helper-compilation-targets': 7.23.6 - '@babel/helper-plugin-utils': 7.24.0 - '@babel/helper-validator-option': 7.23.5 - '@babel/plugin-bugfix-firefox-class-in-computed-class-key': 7.24.4(@babel/core@7.19.3) - '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.19.3) - '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.19.3) - '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.19.3) - '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.19.3) - '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.19.3) - '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.19.3) - '@babel/plugin-syntax-import-assertions': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-syntax-import-attributes': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.19.3) - '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.19.3) - '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.19.3) - '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.19.3) - '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.19.3) - '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.19.3) - '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.19.3) - '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.19.3) - '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.19.3) - '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.19.3) - '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.19.3) - '@babel/plugin-transform-arrow-functions': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-async-generator-functions': 7.24.3(@babel/core@7.19.3) - '@babel/plugin-transform-async-to-generator': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-block-scoped-functions': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-block-scoping': 7.24.4(@babel/core@7.19.3) - '@babel/plugin-transform-class-properties': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-class-static-block': 7.24.4(@babel/core@7.19.3) - '@babel/plugin-transform-classes': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-computed-properties': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-destructuring': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-dotall-regex': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-duplicate-keys': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-dynamic-import': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-exponentiation-operator': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-export-namespace-from': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-for-of': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-function-name': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-json-strings': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-literals': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-logical-assignment-operators': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-member-expression-literals': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-modules-amd': 7.24.1(@babel/core@7.24.5) - '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.5) - '@babel/plugin-transform-modules-systemjs': 7.24.1(@babel/core@7.24.5) - '@babel/plugin-transform-modules-umd': 7.24.1(@babel/core@7.24.5) - '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.19.3) - '@babel/plugin-transform-new-target': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-nullish-coalescing-operator': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-numeric-separator': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-object-rest-spread': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-object-super': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-optional-catch-binding': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-optional-chaining': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-parameters': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-private-methods': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-private-property-in-object': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-property-literals': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-regenerator': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-reserved-words': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-shorthand-properties': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-spread': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-sticky-regex': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-template-literals': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-typeof-symbol': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-unicode-escapes': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-unicode-property-regex': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-unicode-regex': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-unicode-sets-regex': 7.24.1(@babel/core@7.19.3) - '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.19.3) - babel-plugin-polyfill-corejs2: 0.4.11(@babel/core@7.19.3) - babel-plugin-polyfill-corejs3: 0.10.4(@babel/core@7.19.3) - babel-plugin-polyfill-regenerator: 0.6.2(@babel/core@7.19.3) - core-js-compat: 3.37.0 - semver: 6.3.1 - transitivePeerDependencies: - - supports-color /@babel/preset-env@7.24.4(@babel/core@7.19.3): resolution: {integrity: sha512-7Kl6cSmYkak0FK/FXjSEnLJ1N9T/WA2RkMhu17gZ/dsxKJUuTYNIylahPTzqpLyJN4WhDif8X0XK1R8Wsguo/A==} @@ -3618,7 +3338,6 @@ packages: semver: 6.3.1 transitivePeerDependencies: - supports-color - dev: true /@babel/preset-flow@7.24.1(@babel/core@7.24.5): resolution: {integrity: sha512-sWCV2G9pcqZf+JHyv/RyqEIpFypxdCSxWIxQjpdaQxenNog7cN1pr76hg8u0Fz8Qgg0H4ETkGcJnXL8d4j0PPA==} @@ -3659,7 +3378,6 @@ packages: '@babel/helper-plugin-utils': 7.24.0 '@babel/types': 7.24.0 esutils: 2.0.3 - dev: true /@babel/preset-react@7.22.5: resolution: {integrity: sha512-M+Is3WikOpEJHgR385HbuCITPTaPRaNkibTEa9oiofmJvIsrceb4yp9RL9Kb+TE8LznmeyZqpP+Lopwcx59xPQ==} @@ -3673,25 +3391,8 @@ packages: '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-validator-option': 7.23.5 '@babel/plugin-transform-react-display-name': 7.24.1(@babel/core@7.24.5) - '@babel/plugin-transform-react-jsx': 7.23.4 - '@babel/plugin-transform-react-jsx-development': 7.22.5 - '@babel/plugin-transform-react-pure-annotations': 7.24.1(@babel/core@7.24.5) - dev: true - - /@babel/preset-react@7.24.1: - resolution: {integrity: sha512-eFa8up2/8cZXLIpkafhaADTXSnl7IsUFCYenRWrARBz0/qZwcT0RBXpys0LJU4+WfPoF2ZG6ew6s2V6izMCwRA==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - peerDependenciesMeta: - '@babel/core': - optional: true - dependencies: - '@babel/helper-plugin-utils': 7.24.0 - '@babel/helper-validator-option': 7.23.5 - '@babel/plugin-transform-react-display-name': 7.24.1(@babel/core@7.24.5) - '@babel/plugin-transform-react-jsx': 7.23.4 - '@babel/plugin-transform-react-jsx-development': 7.22.5 + '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.24.5) + '@babel/plugin-transform-react-jsx-development': 7.22.5(@babel/core@7.24.5) '@babel/plugin-transform-react-pure-annotations': 7.24.1(@babel/core@7.24.5) dev: true @@ -3712,22 +3413,6 @@ packages: '@babel/plugin-transform-react-jsx-development': 7.22.5(@babel/core@7.24.5) '@babel/plugin-transform-react-pure-annotations': 7.24.1(@babel/core@7.24.5) - /@babel/preset-typescript@7.24.1: - resolution: {integrity: sha512-1DBaMmRDpuYQBPWD8Pf/WEwCrtgRHxsZnP4mIy9G/X+hFfbI47Q2G4t1Paakld84+qsk2fSsUPMKg71jkoOOaQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - peerDependenciesMeta: - '@babel/core': - optional: true - dependencies: - '@babel/helper-plugin-utils': 7.24.0 - '@babel/helper-validator-option': 7.23.5 - '@babel/plugin-syntax-jsx': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.5) - '@babel/plugin-transform-typescript': 7.24.4(@babel/core@7.19.3) - dev: true - /@babel/preset-typescript@7.24.1(@babel/core@7.19.3): resolution: {integrity: sha512-1DBaMmRDpuYQBPWD8Pf/WEwCrtgRHxsZnP4mIy9G/X+hFfbI47Q2G4t1Paakld84+qsk2fSsUPMKg71jkoOOaQ==} engines: {node: '>=6.9.0'} @@ -5094,8 +4779,8 @@ packages: - react-native dev: false - /@gluestack-ui/actionsheet@0.2.41(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0): - resolution: {integrity: sha512-g4jHSbvL8dOE/Eg8b2ANTwF2aGc4LvD6EqOgdX/233dsGfUH1lbT4NgVbEbBYRc8nyVZE5n3NF/owzRXcWbCPw==} + /@gluestack-ui/actionsheet@0.2.42(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0): + resolution: {integrity: sha512-bGIaR86oXbe3DsYmayQQGFi5Rk5whqsP8MAlNhYNldf+j235AaKcje2uTRCtm8OysBdmSFSDlu2ErC3sKkNqMw==} peerDependencies: react: '>=16' react-dom: '>=16' @@ -5113,8 +4798,8 @@ packages: - react-native dev: false - /@gluestack-ui/alert-dialog@0.1.28(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0): - resolution: {integrity: sha512-B1WdDjVmSA3/pz9qvlV9iVQIMSPj7DxN5vGznr6xFo9nJE4C30JidYBwK9VgGFo4qIibRkuzGVNzaZSCGOj4Hg==} + /@gluestack-ui/alert-dialog@0.1.29(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0): + resolution: {integrity: sha512-wkngPEbckYUBrzDul4dhpHY3TVoOEqw9MGgEKot2KtCrzrkcQ9RcpZzQpK811f0gflwd8+fWAquwwwOJgXP/bQ==} peerDependencies: react: '>=16' react-dom: '>=16' @@ -5238,8 +4923,8 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false - /@gluestack-ui/icon@0.1.21(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0): - resolution: {integrity: sha512-QZsx/MUS9AVjMka1mOcDPH6NDvPHQpp/nYEBD8M8pqj6C3SPtLbNAQJNWewy7WQTAsUdJblk6mUayq7LDrkQtA==} + /@gluestack-ui/icon@0.1.22(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0): + resolution: {integrity: sha512-6E8N0OEEike0p6ITRJoEYpRlHqjRAabekEVSOk/HM/v+MJONT613TlQari5ozBHcaNLn/JhJqRxNHxNrzxd+ZQ==} peerDependencies: react: '>=16' react-dom: '>=16' @@ -5321,8 +5006,8 @@ packages: - react-native dev: false - /@gluestack-ui/modal@0.1.32(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0): - resolution: {integrity: sha512-nqAxbw6hdbHgt4sQR/JCRcwpr4avI4CD1E03Xu+nbfo86qeFi8LgzgSRkoxFQ3pDb0Mej6L/QdZ3RKMpcBPwRg==} + /@gluestack-ui/modal@0.1.33(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0): + resolution: {integrity: sha512-CX+A3R8/y0RwB7o1ywR6vNNX8LPFoHblb7aM2TZ8lyaE3+LFN17DysN2s+cd8WtuRyqgzpvI1Bwawi2Qv1uhkw==} peerDependencies: react: '>=16' react-dom: '>=16' @@ -5465,8 +5150,8 @@ packages: - react-native dev: false - /@gluestack-ui/slider@0.1.23(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0): - resolution: {integrity: sha512-8lIK03uFJwGaaoFdpnJ0mnCi/jK3y98HphbK34AwDpMFCHbjrG80jNz5YsoX7qTHgDQKwuADlHr7jprC9PM4gA==} + /@gluestack-ui/slider@0.1.24(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0): + resolution: {integrity: sha512-xWTDd6x1RAuqsG5HGQAolgrEf13xUPxIoJNtWw2aj1lOsHIig0ry5wjFTC+7F/8Lpi4tzRX4cUmJCwPW0ARTpA==} peerDependencies: react: '>=16' react-dom: '>=16' @@ -5541,8 +5226,8 @@ packages: - react-native dev: false - /@gluestack-ui/themed@1.1.26(@gluestack-style/react@1.0.56)(@types/react-native@0.73.0)(nativewind@2.0.11)(react-dom@18.2.0)(react-native-svg@14.1.0)(react-native-web@0.19.11)(react-native@0.74.1)(react@18.2.0): - resolution: {integrity: sha512-lpj+OGhb+4NoHSR02uUzNh/9a+eGGhdOfpr5IMP4LDWJIr47Oa+4PUMAnujR9Be8LZj58ld8tV9f6uDZCthP/Q==} + /@gluestack-ui/themed@1.1.29(@gluestack-style/react@1.0.56)(@types/react-native@0.73.0)(nativewind@2.0.11)(react-dom@18.2.0)(react-native-svg@14.1.0)(react-native-web@0.19.11)(react-native@0.74.1)(react@18.2.0): + resolution: {integrity: sha512-xDyjMqu4AlDdEtycrYMR8Q+PSqi1zdVT2lzahUtr/nHF0TXw7EgHpExU69pE4yaGOSQqkgDH8Uu4+M3ndAPx2g==} peerDependencies: '@gluestack-style/react': '>=1.0.55' '@types/react-native': '>=0.72' @@ -5557,21 +5242,21 @@ packages: '@gluestack-style/legend-motion-animation-driver': 1.0.3(@gluestack-style/react@1.0.56)(@legendapp/motion@2.3.0) '@gluestack-style/react': 1.0.56 '@gluestack-ui/accordion': 1.0.4(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0) - '@gluestack-ui/actionsheet': 0.2.41(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0) + '@gluestack-ui/actionsheet': 0.2.42(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0) '@gluestack-ui/alert': 0.1.14(react-dom@18.2.0)(react@18.2.0) - '@gluestack-ui/alert-dialog': 0.1.28(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0) + '@gluestack-ui/alert-dialog': 0.1.29(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0) '@gluestack-ui/avatar': 0.1.16(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0) '@gluestack-ui/button': 1.0.4(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0) '@gluestack-ui/checkbox': 0.1.28(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0) '@gluestack-ui/divider': 0.1.8(react-dom@18.2.0)(react@18.2.0) '@gluestack-ui/fab': 0.1.20(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0) '@gluestack-ui/form-control': 0.1.17(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0) - '@gluestack-ui/icon': 0.1.21(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0) + '@gluestack-ui/icon': 0.1.22(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0) '@gluestack-ui/image': 0.1.9(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0) '@gluestack-ui/input': 0.1.29(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0) '@gluestack-ui/link': 0.1.20(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0) '@gluestack-ui/menu': 0.2.33(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0) - '@gluestack-ui/modal': 0.1.32(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0) + '@gluestack-ui/modal': 0.1.33(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0) '@gluestack-ui/overlay': 0.1.14(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0) '@gluestack-ui/popover': 0.1.34(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0) '@gluestack-ui/pressable': 0.1.16(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0) @@ -5579,7 +5264,7 @@ packages: '@gluestack-ui/provider': 0.1.12(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0) '@gluestack-ui/radio': 0.1.29(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0) '@gluestack-ui/select': 0.1.26(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0) - '@gluestack-ui/slider': 0.1.23(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0) + '@gluestack-ui/slider': 0.1.24(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0) '@gluestack-ui/spinner': 0.1.14(react-dom@18.2.0)(react@18.2.0) '@gluestack-ui/switch': 0.1.21(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0) '@gluestack-ui/tabs': 0.1.16(react-dom@18.2.0)(react-native@0.74.1)(react@18.2.0) @@ -6327,7 +6012,7 @@ packages: react-refresh: 0.14.0 schema-utils: 3.3.0 source-map: 0.7.4 - webpack: 5.91.0(@swc/core@1.5.0)(esbuild@0.18.20) + webpack: 5.91.0(@swc/core@1.5.0)(esbuild@0.19.12) dev: true /@popperjs/core@2.11.8: @@ -8112,44 +7797,44 @@ packages: '@babel/core': optional: true dependencies: - '@babel/plugin-proposal-async-generator-functions': 7.20.7 - '@babel/plugin-proposal-class-properties': 7.18.6 + '@babel/plugin-proposal-async-generator-functions': 7.20.7(@babel/core@7.24.5) + '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.24.5) '@babel/plugin-proposal-export-default-from': 7.24.1(@babel/core@7.24.5) - '@babel/plugin-proposal-logical-assignment-operators': 7.20.7 - '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6 - '@babel/plugin-proposal-numeric-separator': 7.18.6 - '@babel/plugin-proposal-object-rest-spread': 7.20.7 - '@babel/plugin-proposal-optional-catch-binding': 7.18.6 - '@babel/plugin-proposal-optional-chaining': 7.21.0 - '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.19.3) + '@babel/plugin-proposal-logical-assignment-operators': 7.20.7(@babel/core@7.24.5) + '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.24.5) + '@babel/plugin-proposal-numeric-separator': 7.18.6(@babel/core@7.24.5) + '@babel/plugin-proposal-object-rest-spread': 7.20.7(@babel/core@7.24.5) + '@babel/plugin-proposal-optional-catch-binding': 7.18.6(@babel/core@7.24.5) + '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.24.5) + '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.5) '@babel/plugin-syntax-export-default-from': 7.24.1(@babel/core@7.24.5) '@babel/plugin-syntax-flow': 7.24.1(@babel/core@7.24.5) - '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.19.3) - '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.19.3) - '@babel/plugin-transform-arrow-functions': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-async-to-generator': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-block-scoping': 7.24.4(@babel/core@7.19.3) - '@babel/plugin-transform-classes': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-computed-properties': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-destructuring': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.5) + '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.5) + '@babel/plugin-transform-arrow-functions': 7.24.1(@babel/core@7.24.5) + '@babel/plugin-transform-async-to-generator': 7.24.1(@babel/core@7.24.5) + '@babel/plugin-transform-block-scoping': 7.24.4(@babel/core@7.24.5) + '@babel/plugin-transform-classes': 7.24.1(@babel/core@7.24.5) + '@babel/plugin-transform-computed-properties': 7.24.1(@babel/core@7.24.5) + '@babel/plugin-transform-destructuring': 7.24.1(@babel/core@7.24.5) '@babel/plugin-transform-flow-strip-types': 7.24.1(@babel/core@7.24.5) - '@babel/plugin-transform-function-name': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-literals': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-function-name': 7.24.1(@babel/core@7.24.5) + '@babel/plugin-transform-literals': 7.24.1(@babel/core@7.24.5) '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.5) - '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.19.3) - '@babel/plugin-transform-parameters': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-private-methods': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-private-property-in-object': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.24.5) + '@babel/plugin-transform-parameters': 7.24.1(@babel/core@7.24.5) + '@babel/plugin-transform-private-methods': 7.24.1(@babel/core@7.24.5) + '@babel/plugin-transform-private-property-in-object': 7.24.1(@babel/core@7.24.5) '@babel/plugin-transform-react-display-name': 7.24.1(@babel/core@7.24.5) - '@babel/plugin-transform-react-jsx': 7.23.4 + '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.24.5) '@babel/plugin-transform-react-jsx-self': 7.24.1(@babel/core@7.24.5) '@babel/plugin-transform-react-jsx-source': 7.24.1(@babel/core@7.24.5) - '@babel/plugin-transform-runtime': 7.24.3 - '@babel/plugin-transform-shorthand-properties': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-spread': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-sticky-regex': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-typescript': 7.24.4(@babel/core@7.19.3) - '@babel/plugin-transform-unicode-regex': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-runtime': 7.24.3(@babel/core@7.24.5) + '@babel/plugin-transform-shorthand-properties': 7.24.1(@babel/core@7.24.5) + '@babel/plugin-transform-spread': 7.24.1(@babel/core@7.24.5) + '@babel/plugin-transform-sticky-regex': 7.24.1(@babel/core@7.24.5) + '@babel/plugin-transform-typescript': 7.24.4(@babel/core@7.24.5) + '@babel/plugin-transform-unicode-regex': 7.24.1(@babel/core@7.24.5) '@babel/template': 7.24.0 '@react-native/babel-plugin-codegen': 0.74.83(@babel/preset-env@7.24.4) babel-plugin-transform-flow-enums: 0.0.2(@babel/core@7.24.5) @@ -8168,7 +7853,7 @@ packages: optional: true dependencies: '@babel/parser': 7.24.5 - '@babel/preset-env': 7.24.4 + '@babel/preset-env': 7.24.4(@babel/core@7.24.5) glob: 7.2.3 hermes-parser: 0.19.1 invariant: 2.2.4 @@ -9692,11 +9377,11 @@ packages: telejson: 7.2.0 tiny-invariant: 1.3.3 - /@storybook/channels@8.2.0-alpha.2: - resolution: {integrity: sha512-V0pgsLpoqwVfIpV1lkCjdb1CQBVdrNrxAWEZmyGtAw+fd3zSF3UmePrK+Le+0g6g/fJT2UHS8SeDP06c8C33bA==} + /@storybook/channels@8.2.0-alpha.7: + resolution: {integrity: sha512-XZk8gH5KexxHHzXZeIqOihO6+Aq4d71xmLZu+hnVCJP1epsDO+TBkUCRc4QjcnU9HtKb8/STzqUo1ap3VuTryA==} dependencies: - '@storybook/client-logger': 8.2.0-alpha.2 - '@storybook/core-events': 8.2.0-alpha.2 + '@storybook/client-logger': 8.2.0-alpha.7 + '@storybook/core-events': 8.2.0-alpha.7 '@storybook/global': 5.0.0 telejson: 7.2.0 tiny-invariant: 1.3.3 @@ -9770,8 +9455,8 @@ packages: dependencies: '@storybook/global': 5.0.0 - /@storybook/client-logger@8.2.0-alpha.2: - resolution: {integrity: sha512-5T8SUyfD68Z9Cy9DLhvbp1s8ug7qnDOTSSSqDAGP752UB5fawpvui+pvTDjJcl6GcdPovuj9PK+BXtYEd9PnXQ==} + /@storybook/client-logger@8.2.0-alpha.7: + resolution: {integrity: sha512-hrYRC68bOURNPskrYV+/W4mTd/4J4CdhgxsIQPmYmTo1cWoO6EHLSStA5QhqQ3G77LPvMyXTKDNjRkL+w7orUg==} dependencies: '@storybook/global': 5.0.0 dev: true @@ -9941,8 +9626,8 @@ packages: dependencies: ts-dedent: 2.2.0 - /@storybook/core-events@8.2.0-alpha.2: - resolution: {integrity: sha512-TrXDmO9+e1l801t+XySCJ2O1QTYafRkT204790QwhbVuDI8Jv91mFy2PEY/eyaMKD3jbjscXkyEHJ2LkAklhPA==} + /@storybook/core-events@8.2.0-alpha.7: + resolution: {integrity: sha512-SqZJxKK1Z7Tz+9CgpXM6aLAO8aLWIflZQakvGQ8Jlxlso7Ry0gUXvk25BeHK3lnOcYQhhbaXBVAjWcPAGPluRw==} dependencies: '@storybook/csf': 0.1.7 ts-dedent: 2.2.0 @@ -10122,14 +9807,14 @@ packages: /@storybook/global@5.0.0: resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==} - /@storybook/instrumenter@8.2.0-alpha.2: - resolution: {integrity: sha512-sUMvkQRbYb612rJleORLNQ557OGf3TGVMsZqrscVgVDqLMdvhjslIeh2jRzMkMkrkUWU2SXiqKRi1qP9SwE12Q==} + /@storybook/instrumenter@8.2.0-alpha.7: + resolution: {integrity: sha512-FR6nOuPVGWoLen87xsfGA930PC08I+ZXVVaM1TSymsImTtBp/GjgDdnUcIc2yc3YA7d+fcjPsnNlaqiexT05aA==} dependencies: - '@storybook/channels': 8.2.0-alpha.2 - '@storybook/client-logger': 8.2.0-alpha.2 - '@storybook/core-events': 8.2.0-alpha.2 + '@storybook/channels': 8.2.0-alpha.7 + '@storybook/client-logger': 8.2.0-alpha.7 + '@storybook/core-events': 8.2.0-alpha.7 '@storybook/global': 5.0.0 - '@storybook/preview-api': 8.2.0-alpha.2 + '@storybook/preview-api': 8.2.0-alpha.7 '@vitest/utils': 1.5.1 util: 0.12.5 dev: true @@ -10387,7 +10072,7 @@ packages: optional: true dependencies: '@babel/preset-flow': 7.24.1(@babel/core@7.24.5) - '@babel/preset-react': 7.24.1 + '@babel/preset-react': 7.24.1(@babel/core@7.24.5) '@pmmmwh/react-refresh-webpack-plugin': 0.5.11(react-refresh@0.14.0)(webpack@5.91.0) '@storybook/core-webpack': 7.6.17 '@storybook/docs-tools': 7.6.17 @@ -10457,15 +10142,15 @@ packages: ts-dedent: 2.2.0 util-deprecate: 1.0.2 - /@storybook/preview-api@8.2.0-alpha.2: - resolution: {integrity: sha512-q90dWI336o1SNWv5zsDFyRRTQvOKKf59NFyFfV1YoGEGdR+fWO/WevXuqF+BWMwopwPzOD1AJuhHFz44Lsnuqw==} + /@storybook/preview-api@8.2.0-alpha.7: + resolution: {integrity: sha512-T2MM9cgYiD+Att3U8rUJ904vVXAAx7B57uRDTK3r1nsAfsrx4/5cfwls8aNDVwRu8O1ddnX+7YYxMoODHxMMBg==} dependencies: - '@storybook/channels': 8.2.0-alpha.2 - '@storybook/client-logger': 8.2.0-alpha.2 - '@storybook/core-events': 8.2.0-alpha.2 + '@storybook/channels': 8.2.0-alpha.7 + '@storybook/client-logger': 8.2.0-alpha.7 + '@storybook/core-events': 8.2.0-alpha.7 '@storybook/csf': 0.1.7 '@storybook/global': 5.0.0 - '@storybook/types': 8.2.0-alpha.2 + '@storybook/types': 8.2.0-alpha.7 '@types/qs': 6.9.15 dequal: 2.0.3 lodash: 4.17.21 @@ -10790,8 +10475,8 @@ packages: /@storybook/testing-library@0.0.14-next.1: resolution: {integrity: sha512-1CAl40IKIhcPaCC4pYCG0b9IiYNymktfV/jTrX7ctquRY3akaN7f4A1SippVHosksft0M+rQTFE0ccfWW581fw==} dependencies: - '@storybook/client-logger': 8.2.0-alpha.2 - '@storybook/instrumenter': 8.2.0-alpha.2 + '@storybook/client-logger': 8.2.0-alpha.7 + '@storybook/instrumenter': 8.2.0-alpha.7 '@testing-library/dom': 8.20.1 '@testing-library/user-event': 13.5.0(@testing-library/dom@8.20.1) ts-dedent: 2.2.0 @@ -10839,10 +10524,10 @@ packages: '@types/express': 4.17.21 file-system-cache: 2.3.0 - /@storybook/types@8.2.0-alpha.2: - resolution: {integrity: sha512-jhh8B50Wl0c9pOaymTTg1SPKTo1dW94sUKu5IehnJ1sDPGA4ZDYkIFUFsMjJIFJfFchJ0jIrW0QELNJId5Wd4Q==} + /@storybook/types@8.2.0-alpha.7: + resolution: {integrity: sha512-6q/sAyfQLAIXJYOQLuVAo30T03I3fkbN+fNmmgmbS8+vvrmlLtzhFMJ1YrijGnCfuRi/Oh06ihuq2N8DTfsAEg==} dependencies: - '@storybook/channels': 8.2.0-alpha.2 + '@storybook/channels': 8.2.0-alpha.7 '@types/express': 4.17.21 file-system-cache: 2.3.0 dev: true @@ -12208,7 +11893,7 @@ packages: '@babel/core': 7.24.5 find-cache-dir: 4.0.0 schema-utils: 4.2.0 - webpack: 5.91.0(@swc/core@1.5.0)(esbuild@0.18.20) + webpack: 5.91.0(@swc/core@1.5.0)(esbuild@0.19.12) dev: true /babel-plugin-add-react-displayname@0.0.5: @@ -13318,7 +13003,7 @@ packages: postcss-modules-values: 4.0.0(postcss@8.4.38) postcss-value-parser: 4.2.0 semver: 7.6.0 - webpack: 5.91.0(@swc/core@1.5.0)(esbuild@0.18.20) + webpack: 5.91.0(@swc/core@1.5.0)(esbuild@0.19.12) dev: true /css-mediaquery@0.1.2: @@ -15607,7 +15292,7 @@ packages: lodash: 4.17.21 pretty-error: 4.0.0 tapable: 2.2.1 - webpack: 5.91.0(@swc/core@1.5.0)(esbuild@0.18.20) + webpack: 5.91.0(@swc/core@1.5.0)(esbuild@0.19.12) dev: true /htmlparser2@6.1.0: @@ -16702,7 +16387,7 @@ packages: '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.24.5) '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.24.5) '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.5) - '@babel/preset-env': 7.24.4 + '@babel/preset-env': 7.24.4(@babel/core@7.24.5) '@babel/preset-flow': 7.24.1(@babel/core@7.24.5) '@babel/preset-typescript': 7.24.1(@babel/core@7.24.5) '@babel/register': 7.23.7(@babel/core@7.24.5) @@ -19769,12 +19454,12 @@ packages: '@babel/core': optional: true dependencies: - '@babel/plugin-transform-arrow-functions': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-nullish-coalescing-operator': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-optional-chaining': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-shorthand-properties': 7.24.1(@babel/core@7.19.3) - '@babel/plugin-transform-template-literals': 7.24.1(@babel/core@7.19.3) - '@babel/preset-typescript': 7.24.1 + '@babel/plugin-transform-arrow-functions': 7.24.1(@babel/core@7.24.5) + '@babel/plugin-transform-nullish-coalescing-operator': 7.24.1(@babel/core@7.24.5) + '@babel/plugin-transform-optional-chaining': 7.24.1(@babel/core@7.24.5) + '@babel/plugin-transform-shorthand-properties': 7.24.1(@babel/core@7.24.5) + '@babel/plugin-transform-template-literals': 7.24.1(@babel/core@7.24.5) + '@babel/preset-typescript': 7.24.1(@babel/core@7.24.5) convert-source-map: 2.0.0 invariant: 2.2.4 react: 18.2.0 @@ -21161,7 +20846,7 @@ packages: peerDependencies: webpack: ^5.0.0 dependencies: - webpack: 5.91.0(@swc/core@1.5.0)(esbuild@0.18.20) + webpack: 5.91.0(@swc/core@1.5.0)(esbuild@0.19.12) dev: true /stylehacks@5.1.1(postcss@8.4.16): @@ -21277,7 +20962,7 @@ packages: dependencies: '@swc/core': 1.5.0 '@swc/counter': 0.1.3 - webpack: 5.91.0(@swc/core@1.5.0)(esbuild@0.18.20) + webpack: 5.91.0(@swc/core@1.5.0)(esbuild@0.19.12) dev: true /synchronous-promise@2.0.17: @@ -21625,7 +21310,7 @@ packages: /ts-interface-checker@0.1.13: resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==} - /ts-loader@9.4.4(typescript@5.3.2)(webpack@5.88.2): + /ts-loader@9.4.4(typescript@5.4.5)(webpack@5.88.2): resolution: {integrity: sha512-MLukxDHBl8OJ5Dk3y69IsKVFRA/6MwzEqBgh+OXMPB/OD01KQuWPFd1WAQP8a5PeSCAxfnkhiuWqfmFJzJQt9w==} engines: {node: '>=12.0.0'} peerDependencies: @@ -21639,7 +21324,7 @@ packages: enhanced-resolve: 5.16.0 micromatch: 4.0.5 semver: 7.6.0 - typescript: 5.3.2 + typescript: 5.4.5 webpack: 5.88.2(webpack-cli@5.1.4) dev: true @@ -21907,6 +21592,12 @@ packages: engines: {node: '>=14.17'} hasBin: true + /typescript@5.4.5: + resolution: {integrity: sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==} + engines: {node: '>=14.17'} + hasBin: true + dev: true + /ua-parser-js@1.0.37: resolution: {integrity: sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==} @@ -22379,7 +22070,7 @@ packages: mime-types: 2.1.35 range-parser: 1.2.1 schema-utils: 4.2.0 - webpack: 5.91.0(@swc/core@1.5.0)(esbuild@0.18.20) + webpack: 5.91.0(@swc/core@1.5.0)(esbuild@0.19.12) dev: true /webpack-hot-middleware@2.26.1: From 2c5852f3754251cf9b38cc65bb4aa7950ab191c0 Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Tue, 11 Jun 2024 10:33:01 +0100 Subject: [PATCH 11/45] fix: type errors --- .../src/components/Input/Input.props.ts | 2 +- .../native-ui/src/components/Input/Input.tsx | 6 +++++- .../components/Input/styled-components/Slot.tsx | 16 +++++++++++----- 3 files changed, 17 insertions(+), 7 deletions(-) diff --git a/packages/native-ui/src/components/Input/Input.props.ts b/packages/native-ui/src/components/Input/Input.props.ts index fa4aa5631..1a6cd0e42 100644 --- a/packages/native-ui/src/components/Input/Input.props.ts +++ b/packages/native-ui/src/components/Input/Input.props.ts @@ -1,7 +1,7 @@ import type { Input } from '@gluestack-ui/themed'; import type { ComponentProps } from 'react'; -interface InputComponentProps extends ComponentProps {} +export interface InputComponentProps extends ComponentProps {} /** * Props for the Input component. diff --git a/packages/native-ui/src/components/Input/Input.tsx b/packages/native-ui/src/components/Input/Input.tsx index 4119cfcdb..bc38d63e8 100644 --- a/packages/native-ui/src/components/Input/Input.tsx +++ b/packages/native-ui/src/components/Input/Input.tsx @@ -8,8 +8,12 @@ import { } from '@utilitywarehouse/react-native-icons'; import { InputValidationIcon } from './styled-components'; -export const AccessibleInput = createInput({ +// TODO: remove once upgraded to typescript 5.5 +// eslint-disable-next-line @typescript-eslint/no-explicit-any +export const AccessibleInput: any = createInput({ Icon, + // TODO: remove once upgraded to typescript 5.5 + // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment Slot, Root, Input: StyledInput, diff --git a/packages/native-ui/src/components/Input/styled-components/Slot.tsx b/packages/native-ui/src/components/Input/styled-components/Slot.tsx index ac45a8524..2387184f9 100644 --- a/packages/native-ui/src/components/Input/styled-components/Slot.tsx +++ b/packages/native-ui/src/components/Input/styled-components/Slot.tsx @@ -1,8 +1,14 @@ import { styled } from '@gluestack-style/react'; import { Pressable } from 'react-native'; -export default styled(Pressable, {}, { - componentName: 'InputSlot', - ancestorStyle: ['_slot'], - descendantStyle: ['_icon'], -} as const); +export default styled( + Pressable, + {}, + { + componentName: 'InputSlot', + ancestorStyle: ['_slot'], + descendantStyle: ['_icon'], + } + // TODO: remove once upgraded to typescript 5.5 + // eslint-disable-next-line @typescript-eslint/no-explicit-any +) as any; From e1dd8a7dac814a25f2a5d1826eb311465b3718f9 Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Mon, 10 Jun 2024 16:44:16 +0100 Subject: [PATCH 12/45] feat: add form field components --- .../components/FormField/Docs.mdx | 15 +++ .../FormField/FormField.stories.tsx | 12 ++ .../components/FormField/FormField.tsx | 122 ++++++++++++++++++ .../components/FormField/Variants.tsx | 104 +++++++++++++++ .../src/components/FormField/index.ts | 32 +++++ .../FormField/styled-components/Error.tsx | 6 + .../FormField/styled-components/ErrorIcon.tsx | 7 + .../FormField/styled-components/ErrorText.tsx | 13 ++ .../FormField/styled-components/Helper.tsx | 6 + .../styled-components/HelperText.tsx | 13 ++ .../FormField/styled-components/Label.tsx | 7 + .../styled-components/LabelAstrick.tsx | 14 ++ .../FormField/styled-components/LabelText.tsx | 16 +++ .../FormField/styled-components/Root.tsx | 14 ++ .../FormField/styled-components/index.tsx | 9 ++ packages/native-ui/src/components/index.ts | 1 + .../native-ui/src/config/theme/FormControl.ts | 55 -------- .../src/config/theme/FormControlErrorIcon.ts | 12 -- .../src/config/theme/FormControlErrorText.ts | 8 -- .../src/config/theme/FormControlHelperText.ts | 11 -- .../src/config/theme/FormControlLabelText.ts | 9 -- .../native-ui/src/config/theme/FormField.ts | 40 ++++++ ...{FormControlLabel.ts => FormFieldError.ts} | 4 +- .../src/config/theme/FormFieldErrorIcon.ts | 9 ++ .../src/config/theme/FormFieldErrorText.ts | 8 ++ ...ormControlHelper.ts => FormFieldHelper.ts} | 3 +- .../src/config/theme/FormFieldHelperText.ts | 9 ++ ...{FormControlError.ts => FormFieldLabel.ts} | 4 +- .../src/config/theme/FormFieldLabelText.ts | 10 ++ packages/native-ui/src/config/theme/index.ts | 16 +-- 30 files changed, 479 insertions(+), 110 deletions(-) create mode 100644 apps/native-ui-storybook/components/FormField/Docs.mdx create mode 100644 apps/native-ui-storybook/components/FormField/FormField.stories.tsx create mode 100644 apps/native-ui-storybook/components/FormField/FormField.tsx create mode 100644 apps/native-ui-storybook/components/FormField/Variants.tsx create mode 100644 packages/native-ui/src/components/FormField/index.ts create mode 100644 packages/native-ui/src/components/FormField/styled-components/Error.tsx create mode 100644 packages/native-ui/src/components/FormField/styled-components/ErrorIcon.tsx create mode 100644 packages/native-ui/src/components/FormField/styled-components/ErrorText.tsx create mode 100644 packages/native-ui/src/components/FormField/styled-components/Helper.tsx create mode 100644 packages/native-ui/src/components/FormField/styled-components/HelperText.tsx create mode 100644 packages/native-ui/src/components/FormField/styled-components/Label.tsx create mode 100644 packages/native-ui/src/components/FormField/styled-components/LabelAstrick.tsx create mode 100644 packages/native-ui/src/components/FormField/styled-components/LabelText.tsx create mode 100644 packages/native-ui/src/components/FormField/styled-components/Root.tsx create mode 100644 packages/native-ui/src/components/FormField/styled-components/index.tsx delete mode 100644 packages/native-ui/src/config/theme/FormControl.ts delete mode 100644 packages/native-ui/src/config/theme/FormControlErrorIcon.ts delete mode 100644 packages/native-ui/src/config/theme/FormControlErrorText.ts delete mode 100644 packages/native-ui/src/config/theme/FormControlHelperText.ts delete mode 100644 packages/native-ui/src/config/theme/FormControlLabelText.ts create mode 100644 packages/native-ui/src/config/theme/FormField.ts rename packages/native-ui/src/config/theme/{FormControlLabel.ts => FormFieldError.ts} (70%) create mode 100644 packages/native-ui/src/config/theme/FormFieldErrorIcon.ts create mode 100644 packages/native-ui/src/config/theme/FormFieldErrorText.ts rename packages/native-ui/src/config/theme/{FormControlHelper.ts => FormFieldHelper.ts} (70%) create mode 100644 packages/native-ui/src/config/theme/FormFieldHelperText.ts rename packages/native-ui/src/config/theme/{FormControlError.ts => FormFieldLabel.ts} (66%) create mode 100644 packages/native-ui/src/config/theme/FormFieldLabelText.ts diff --git a/apps/native-ui-storybook/components/FormField/Docs.mdx b/apps/native-ui-storybook/components/FormField/Docs.mdx new file mode 100644 index 000000000..0008ab69e --- /dev/null +++ b/apps/native-ui-storybook/components/FormField/Docs.mdx @@ -0,0 +1,15 @@ +import { Meta, Primary, Controls, Story, Canvas } from '@storybook/blocks'; +import * as FormFieldStories from './FormField.stories'; +import { + Input, + InputField, + InputIcon, + InputSlot, + Center, + NativeUIProvider, +} from '@utilitywarehouse/native-ui'; +import { EmailMediumIcon } from '@utilitywarehouse/react-native-icons'; + + + +# Form Field diff --git a/apps/native-ui-storybook/components/FormField/FormField.stories.tsx b/apps/native-ui-storybook/components/FormField/FormField.stories.tsx new file mode 100644 index 000000000..f9e264475 --- /dev/null +++ b/apps/native-ui-storybook/components/FormField/FormField.stories.tsx @@ -0,0 +1,12 @@ +import { Meta } from '@storybook/react'; +import FormField from './FormField'; +import Variants from './Variants'; + +const FormFieldMeta: Meta = { + title: 'Native UI / Components / Form Field', + component: FormField, +}; + +export default FormFieldMeta; + +export { FormField as Playground, Variants }; diff --git a/apps/native-ui-storybook/components/FormField/FormField.tsx b/apps/native-ui-storybook/components/FormField/FormField.tsx new file mode 100644 index 000000000..43748be1e --- /dev/null +++ b/apps/native-ui-storybook/components/FormField/FormField.tsx @@ -0,0 +1,122 @@ +import React from 'react'; +import { + Input, + InputField, + InputIcon, + InputSlot, + FormField, + FormFieldError, + FormFieldErrorIcon, + FormFieldErrorText, + FormFieldHelper, + FormFieldHelperText, + FormFieldLabel, + FormFieldLabelText, +} from '@utilitywarehouse/native-ui'; +import { + WarningSmallContainedIcon, + EmailMediumIcon, + EyeMediumIcon, +} from '@utilitywarehouse/react-native-icons'; +import { Meta, StoryFn } from '@storybook/react'; + +const InputBasic: StoryFn = ({ + placeholder, + validationStatus, + type, + _showIconLeft, + _showIconRight, + ...props +}: any) => { + return ( + + + Label + + + {_showIconLeft && ( + + + + )} + + {_showIconRight && ( + + + + )} + + + Helper text + + + + Error text + + + ); +}; + +InputBasic.argTypes = { + placeholder: { + control: 'text', + description: 'The Input field placeholder', + defaultValue: '', + }, + type: { + control: 'select', + options: ['text', 'password'], + description: 'The Input field type', + defaultValue: 'text', + }, + validationStatus: { + control: 'select', + options: ['initial', 'valid', 'invalid'], + description: 'The validation status of the Input component', + defaultValue: 'initial', + }, + showValidationIcon: { + control: 'boolean', + description: 'Show the validation icon', + defaultValue: true, + }, + isDisabled: { + control: 'boolean', + description: 'Disable the Input component', + defaultValue: false, + }, + isReadOnly: { + control: 'boolean', + description: 'Read only the Input component', + defaultValue: false, + }, + isFocused: { + control: 'boolean', + description: 'Focus the Input component', + defaultValue: false, + }, + _showIconLeft: { + control: 'boolean', + description: + 'Show icon left. \n _Note: this is not a prop of the `Input` component, just a representation of the `InputSlot` and `InputIcon` component for the Storybook playground._', + }, + _showIconRight: { + control: 'boolean', + description: + 'Show icon right. \n _Note: this is not a prop of the `Input` component, just a representation of the `InputSlot` and `InputIcon` component for the Storybook playground._', + }, +} as Meta['argTypes']; + +InputBasic.args = { + placeholder: 'Input placeholder', + validationStatus: 'initial', + showValidationIcon: true, + type: 'text', + isDisabled: false, + isReadOnly: false, + isFocused: false, + _showIconLeft: false, + _showIconRight: false, +} as Meta['args']; + +export default InputBasic; diff --git a/apps/native-ui-storybook/components/FormField/Variants.tsx b/apps/native-ui-storybook/components/FormField/Variants.tsx new file mode 100644 index 000000000..8e5668d49 --- /dev/null +++ b/apps/native-ui-storybook/components/FormField/Variants.tsx @@ -0,0 +1,104 @@ +import React from 'react'; +import { + Box, + Input, + InputField, + InputIcon, + InputSlot, + ScrollView, + Text, +} from '@utilitywarehouse/native-ui'; +import { StoryFn } from '@storybook/react'; +import { EmailMediumIcon } from '@utilitywarehouse/react-native-icons'; + +const InputVariants: StoryFn = () => { + return ( + + + Defaut + + + + With icon + + + + + + + With placeholder + + + + + + + With value + + + + + + + Focused + + + + + + + Type password + + + + + + + Valid + + + + + + + Valid focused + + + + + + + Invalid + + + + + + + Invalid focused + + + + + + + Disabled + + + + + + + Readonly + + + + + + + + + ); +}; + +export default InputVariants; diff --git a/packages/native-ui/src/components/FormField/index.ts b/packages/native-ui/src/components/FormField/index.ts new file mode 100644 index 000000000..b03cc36e2 --- /dev/null +++ b/packages/native-ui/src/components/FormField/index.ts @@ -0,0 +1,32 @@ +import { createFormControl } from '@gluestack-ui/form-control'; +import { + Root, + Error, + ErrorText, + ErrorIcon, + Label, + LabelText, + LabelAstrick, + Helper, + HelperText, +} from './styled-components'; + +export const FormField = createFormControl({ + Root, + Error, + ErrorText, + ErrorIcon, + Label, + LabelText, + LabelAstrick, + Helper, + HelperText, +}); + +export const FormFieldError = FormField.Error; +export const FormFieldErrorText = FormField.Error.Text; +export const FormFieldErrorIcon = FormField.Error.Icon; +export const FormFieldLabel = FormField.Label; +export const FormFieldLabelText = FormField.Label.Text; +export const FormFieldHelper = FormField.Helper; +export const FormFieldHelperText = FormField.Helper.Text; diff --git a/packages/native-ui/src/components/FormField/styled-components/Error.tsx b/packages/native-ui/src/components/FormField/styled-components/Error.tsx new file mode 100644 index 000000000..81e1f1bc5 --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/Error.tsx @@ -0,0 +1,6 @@ +import { styled } from '@gluestack-style/react'; +import { View } from 'react-native'; + +export default styled(View, {}, { + componentName: 'FormFieldError', +} as const); diff --git a/packages/native-ui/src/components/FormField/styled-components/ErrorIcon.tsx b/packages/native-ui/src/components/FormField/styled-components/ErrorIcon.tsx new file mode 100644 index 000000000..f1c0bff30 --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/ErrorIcon.tsx @@ -0,0 +1,7 @@ +import { styled } from '@gluestack-style/react'; +import { AsForwarder } from '@gluestack-ui/themed'; + +export default styled(AsForwarder, {}, { + componentName: 'FormFieldErrorIcon', + ancestorStyle: ['_icon'], +} as const); diff --git a/packages/native-ui/src/components/FormField/styled-components/ErrorText.tsx b/packages/native-ui/src/components/FormField/styled-components/ErrorText.tsx new file mode 100644 index 000000000..d80d5cafd --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/ErrorText.tsx @@ -0,0 +1,13 @@ +import { styled } from '@gluestack-style/react'; +import { Text } from 'react-native'; + +export default styled( + Text, + { + fontFamily: '$body', + }, + { + componentName: 'FormFieldErrorText', + ancestorStyle: ['_errorText'], + } as const +); diff --git a/packages/native-ui/src/components/FormField/styled-components/Helper.tsx b/packages/native-ui/src/components/FormField/styled-components/Helper.tsx new file mode 100644 index 000000000..4443adf9c --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/Helper.tsx @@ -0,0 +1,6 @@ +import { styled } from '@gluestack-style/react'; +import { View } from 'react-native'; + +export default styled(View, {}, { + componentName: 'FormFieldHelper', +} as const); diff --git a/packages/native-ui/src/components/FormField/styled-components/HelperText.tsx b/packages/native-ui/src/components/FormField/styled-components/HelperText.tsx new file mode 100644 index 000000000..ea4320428 --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/HelperText.tsx @@ -0,0 +1,13 @@ +import { styled } from '@gluestack-style/react'; +import { Text } from 'react-native'; + +export default styled( + Text, + { + fontFamily: '$body', + }, + { + componentName: 'FormFieldHelperText', + ancestorStyle: ['_helperText'], + } as const +); diff --git a/packages/native-ui/src/components/FormField/styled-components/Label.tsx b/packages/native-ui/src/components/FormField/styled-components/Label.tsx new file mode 100644 index 000000000..a02415170 --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/Label.tsx @@ -0,0 +1,7 @@ +import { styled } from '@gluestack-style/react'; +import { View } from 'react-native'; + +export default styled(View, {}, { + componentName: 'FormFieldLabel', + descendantStyle: ['_labelText'], +} as const); diff --git a/packages/native-ui/src/components/FormField/styled-components/LabelAstrick.tsx b/packages/native-ui/src/components/FormField/styled-components/LabelAstrick.tsx new file mode 100644 index 000000000..69173085d --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/LabelAstrick.tsx @@ -0,0 +1,14 @@ +import { styled } from '@gluestack-style/react'; +import { Text } from 'react-native'; + +export default styled( + Text, + { + lineHeight: '$2xs', + fontFamily: '$body', + }, + { + componentName: 'FormFieldErrorText', + ancestorStyle: ['_labelAstrick'], + } as const +); diff --git a/packages/native-ui/src/components/FormField/styled-components/LabelText.tsx b/packages/native-ui/src/components/FormField/styled-components/LabelText.tsx new file mode 100644 index 000000000..75018cb1c --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/LabelText.tsx @@ -0,0 +1,16 @@ +import { styled } from '@gluestack-style/react'; +import { Text } from 'react-native'; + +export default styled( + Text, + { + fontSize: '$md', + lineHeight: '$2xs', + fontFamily: '$body', + fontWeight: '$medium', + }, + { + componentName: 'FormFieldLabelText', + ancestorStyle: ['_labelText'], + } as const +); diff --git a/packages/native-ui/src/components/FormField/styled-components/Root.tsx b/packages/native-ui/src/components/FormField/styled-components/Root.tsx new file mode 100644 index 000000000..b956a2a88 --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/Root.tsx @@ -0,0 +1,14 @@ +import { View } from 'react-native'; +import { styled } from '@gluestack-style/react'; + +export default styled(View, {}, { + componentName: 'FormField', + descendantStyle: [ + '_labelText', + '_helperText', + '_errorText', + '_labelAstrick', + '_validationText', + '_input', + ], +} as const); diff --git a/packages/native-ui/src/components/FormField/styled-components/index.tsx b/packages/native-ui/src/components/FormField/styled-components/index.tsx new file mode 100644 index 000000000..d915beef7 --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/index.tsx @@ -0,0 +1,9 @@ +export { default as Root } from './Root'; +export { default as Error } from './Error'; +export { default as ErrorText } from './ErrorText'; +export { default as ErrorIcon } from './ErrorIcon'; +export { default as Label } from './Label'; +export { default as LabelText } from './LabelText'; +export { default as LabelAstrick } from './LabelAstrick'; +export { default as Helper } from './Helper'; +export { default as HelperText } from './HelperText'; diff --git a/packages/native-ui/src/components/index.ts b/packages/native-ui/src/components/index.ts index 99a9ec31f..3b8a86f2a 100644 --- a/packages/native-ui/src/components/index.ts +++ b/packages/native-ui/src/components/index.ts @@ -6,6 +6,7 @@ export { default as CheckboxIndicator } from './CheckboxIndicator'; export { default as RadioIndicator } from './RadioIndicator'; export * from './Input'; export * from './Spinner'; +export * from './FormField'; // Gluestack UI export { diff --git a/packages/native-ui/src/config/theme/FormControl.ts b/packages/native-ui/src/config/theme/FormControl.ts deleted file mode 100644 index 364fec88e..000000000 --- a/packages/native-ui/src/config/theme/FormControl.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { createStyle } from '@gluestack-style/react'; - -export const FormControl = createStyle({ - flexDirection: 'column', - variants: { - size: { - sm: { - _labelText: { - props: { size: 'sm' }, - }, - _labelAstrick: { - props: { size: 'sm' }, - }, - _helperText: { - props: { size: 'xs' }, - }, - _errorText: { - props: { size: 'xs' }, - }, - }, - md: { - _labelText: { - props: { size: 'md' }, - }, - _labelAstrick: { - props: { size: 'md' }, - }, - _helperText: { - props: { size: 'sm' }, - }, - _errorText: { - props: { size: 'sm' }, - }, - }, - lg: { - _labelText: { - props: { size: 'lg' }, - }, - _labelAstrick: { - props: { size: 'lg' }, - }, - _helperText: { - props: { size: 'md' }, - }, - _errorText: { - props: { size: 'md' }, - }, - }, - }, - }, - - defaultProps: { - size: 'md', - }, -}); diff --git a/packages/native-ui/src/config/theme/FormControlErrorIcon.ts b/packages/native-ui/src/config/theme/FormControlErrorIcon.ts deleted file mode 100644 index 0565c4aba..000000000 --- a/packages/native-ui/src/config/theme/FormControlErrorIcon.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { createStyle } from '@gluestack-style/react'; - -export const FormControlErrorIcon = createStyle({ - color: '$error700', - _dark: { - //@ts-ignore - color: '$error400', - }, - props: { - size: 'sm', - }, -}); diff --git a/packages/native-ui/src/config/theme/FormControlErrorText.ts b/packages/native-ui/src/config/theme/FormControlErrorText.ts deleted file mode 100644 index a303b59ef..000000000 --- a/packages/native-ui/src/config/theme/FormControlErrorText.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { createStyle } from '@gluestack-style/react'; - -export const FormControlErrorText = createStyle({ - color: '$error700', - _dark: { - color: '$error400', - }, -}); diff --git a/packages/native-ui/src/config/theme/FormControlHelperText.ts b/packages/native-ui/src/config/theme/FormControlHelperText.ts deleted file mode 100644 index 572e43119..000000000 --- a/packages/native-ui/src/config/theme/FormControlHelperText.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { createStyle } from '@gluestack-style/react'; - -export const FormControlHelperText = createStyle({ - props: { - size: 'xs', - }, - color: '$textLight500', - _dark: { - color: '$textDark400', - }, -}); diff --git a/packages/native-ui/src/config/theme/FormControlLabelText.ts b/packages/native-ui/src/config/theme/FormControlLabelText.ts deleted file mode 100644 index edcd1d2aa..000000000 --- a/packages/native-ui/src/config/theme/FormControlLabelText.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { createStyle } from '@gluestack-style/react'; - -export const FormControlLabelText = createStyle({ - fontWeight: '$medium', - color: '$textLight900', - _dark: { - color: '$textDark50', - }, -}); diff --git a/packages/native-ui/src/config/theme/FormField.ts b/packages/native-ui/src/config/theme/FormField.ts new file mode 100644 index 000000000..18778152c --- /dev/null +++ b/packages/native-ui/src/config/theme/FormField.ts @@ -0,0 +1,40 @@ +import { createStyle } from '@gluestack-style/react'; + +export const FormField = createStyle({ + flexDirection: 'column', + gap: '$2', + + variants: { + validationStatus: { + initial: {}, + valid: { + _labelText: { + color: '$green500', + }, + + _input: {}, + }, + invalid: { + _labelText: { + color: '$red500', + }, + + _input: { + props: { + validationStatus: 'invalid', + }, + }, + + ':focus': { + _input: { + props: { + validationStatus: 'invalid', + }, + }, + }, + }, + }, + }, + + defaultProps: {}, +}); diff --git a/packages/native-ui/src/config/theme/FormControlLabel.ts b/packages/native-ui/src/config/theme/FormFieldError.ts similarity index 70% rename from packages/native-ui/src/config/theme/FormControlLabel.ts rename to packages/native-ui/src/config/theme/FormFieldError.ts index 59d891aca..2fb37d27c 100644 --- a/packages/native-ui/src/config/theme/FormControlLabel.ts +++ b/packages/native-ui/src/config/theme/FormFieldError.ts @@ -1,8 +1,8 @@ import { createStyle } from '@gluestack-style/react'; -export const FormControlLabel = createStyle({ +export const FormFieldError = createStyle({ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', - mb: '$1', + gap: '$2', }); diff --git a/packages/native-ui/src/config/theme/FormFieldErrorIcon.ts b/packages/native-ui/src/config/theme/FormFieldErrorIcon.ts new file mode 100644 index 000000000..2f5252667 --- /dev/null +++ b/packages/native-ui/src/config/theme/FormFieldErrorIcon.ts @@ -0,0 +1,9 @@ +import { createStyle } from '@gluestack-style/react'; + +export const FormFieldErrorIcon = createStyle({ + color: '$red500', + _dark: { + color: '$darkRed700', + }, + props: {}, +}); diff --git a/packages/native-ui/src/config/theme/FormFieldErrorText.ts b/packages/native-ui/src/config/theme/FormFieldErrorText.ts new file mode 100644 index 000000000..7d7c2b9b3 --- /dev/null +++ b/packages/native-ui/src/config/theme/FormFieldErrorText.ts @@ -0,0 +1,8 @@ +import { createStyle } from '@gluestack-style/react'; + +export const FormFieldErrorText = createStyle({ + color: '$red500', + _dark: { + color: '$darkRed700', + }, +}); diff --git a/packages/native-ui/src/config/theme/FormControlHelper.ts b/packages/native-ui/src/config/theme/FormFieldHelper.ts similarity index 70% rename from packages/native-ui/src/config/theme/FormControlHelper.ts rename to packages/native-ui/src/config/theme/FormFieldHelper.ts index 5c229edd5..2060f1ea3 100644 --- a/packages/native-ui/src/config/theme/FormControlHelper.ts +++ b/packages/native-ui/src/config/theme/FormFieldHelper.ts @@ -1,8 +1,7 @@ import { createStyle } from '@gluestack-style/react'; -export const FormControlHelper = createStyle({ +export const FormFieldHelper = createStyle({ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', - mt: '$1', }); diff --git a/packages/native-ui/src/config/theme/FormFieldHelperText.ts b/packages/native-ui/src/config/theme/FormFieldHelperText.ts new file mode 100644 index 000000000..6ec30bdf3 --- /dev/null +++ b/packages/native-ui/src/config/theme/FormFieldHelperText.ts @@ -0,0 +1,9 @@ +import { createStyle } from '@gluestack-style/react'; + +export const FormFieldHelperText = createStyle({ + color: '$grey800', + fontSize: '$sm', + _dark: { + color: '$darkGrey800', + }, +}); diff --git a/packages/native-ui/src/config/theme/FormControlError.ts b/packages/native-ui/src/config/theme/FormFieldLabel.ts similarity index 66% rename from packages/native-ui/src/config/theme/FormControlError.ts rename to packages/native-ui/src/config/theme/FormFieldLabel.ts index 07d8df239..884c916e0 100644 --- a/packages/native-ui/src/config/theme/FormControlError.ts +++ b/packages/native-ui/src/config/theme/FormFieldLabel.ts @@ -1,9 +1,7 @@ import { createStyle } from '@gluestack-style/react'; -export const FormControlError = createStyle({ +export const FormFieldLabel = createStyle({ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', - mt: '$1', - gap: '$1', }); diff --git a/packages/native-ui/src/config/theme/FormFieldLabelText.ts b/packages/native-ui/src/config/theme/FormFieldLabelText.ts new file mode 100644 index 000000000..1c8708b7c --- /dev/null +++ b/packages/native-ui/src/config/theme/FormFieldLabelText.ts @@ -0,0 +1,10 @@ +import { createStyle } from '@gluestack-style/react'; + +export const FormFieldLabelText = createStyle({ + fontWeight: '$semibold', + fontSize: '$md', + color: '$grey1000', + _dark: { + color: '$darkGrey1000', + }, +}); diff --git a/packages/native-ui/src/config/theme/index.ts b/packages/native-ui/src/config/theme/index.ts index 155a8f01c..e58f822d6 100644 --- a/packages/native-ui/src/config/theme/index.ts +++ b/packages/native-ui/src/config/theme/index.ts @@ -56,14 +56,14 @@ export * from './CheckboxLabel'; // export * from './FabIcon'; // export * from './FabLabel'; // export * from './FlatList'; -// export * from './FormControl'; -// export * from './FormControlError'; -// export * from './FormControlErrorIcon'; -// export * from './FormControlErrorText'; -// export * from './FormControlHelper'; -// export * from './FormControlHelperText'; -// export * from './FormControlLabel'; -// export * from './FormControlLabelText'; +export * from './FormField'; +export * from './FormFieldError'; +export * from './FormFieldErrorIcon'; +export * from './FormFieldErrorText'; +export * from './FormFieldHelper'; +export * from './FormFieldHelperText'; +export * from './FormFieldLabel'; +export * from './FormFieldLabelText'; export * from './HStack'; // export * from './Heading'; export * from './Icon'; From f7cf9d058c7f9783639069408f58ca8f370293f7 Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Tue, 11 Jun 2024 16:11:34 +0100 Subject: [PATCH 13/45] feat: form field components and context --- .../components/FormField/FormField.tsx | 31 +++++----- .../src/components/FormField/FormField.tsx | 52 +++++++++++++++++ .../components/FormField/FormFieldInvalid.tsx | 10 ++++ .../components/FormField/FormFieldValid.tsx | 10 ++++ .../src/components/FormField/index.ts | 33 ++++------- .../styled-components/HelperIcon.tsx | 16 +++++ .../FormField/styled-components/Invalid.tsx | 6 ++ .../styled-components/InvalidIcon.tsx | 16 +++++ .../styled-components/InvalidText.tsx | 7 +++ .../FormField/styled-components/Root.tsx | 6 +- .../FormField/styled-components/Valid.tsx | 6 ++ .../FormField/styled-components/ValidIcon.tsx | 16 +++++ .../FormField/styled-components/ValidText.tsx | 7 +++ .../FormField/styled-components/index.tsx | 7 +++ .../native-ui/src/components/Input/Input.tsx | 11 ++-- .../native-ui/src/config/theme/FormField.ts | 58 ++++++++++--------- .../src/config/theme/FormFieldHelperIcon.ts | 9 +++ .../src/config/theme/FormFieldHelperText.ts | 2 +- .../src/config/theme/FormFieldInvalid.ts | 8 +++ ...ldErrorIcon.ts => FormFieldInvalidIcon.ts} | 2 +- ...ldErrorText.ts => FormFieldInvalidText.ts} | 4 +- .../{FormFieldError.ts => FormFieldValid.ts} | 2 +- .../src/config/theme/FormFieldValidIcon.ts | 8 +++ .../src/config/theme/FormFieldValidText.ts | 10 ++++ packages/native-ui/src/config/theme/Input.ts | 5 ++ packages/native-ui/src/config/theme/index.ts | 10 +++- 26 files changed, 277 insertions(+), 75 deletions(-) create mode 100644 packages/native-ui/src/components/FormField/FormField.tsx create mode 100644 packages/native-ui/src/components/FormField/FormFieldInvalid.tsx create mode 100644 packages/native-ui/src/components/FormField/FormFieldValid.tsx create mode 100644 packages/native-ui/src/components/FormField/styled-components/HelperIcon.tsx create mode 100644 packages/native-ui/src/components/FormField/styled-components/Invalid.tsx create mode 100644 packages/native-ui/src/components/FormField/styled-components/InvalidIcon.tsx create mode 100644 packages/native-ui/src/components/FormField/styled-components/InvalidText.tsx create mode 100644 packages/native-ui/src/components/FormField/styled-components/Valid.tsx create mode 100644 packages/native-ui/src/components/FormField/styled-components/ValidIcon.tsx create mode 100644 packages/native-ui/src/components/FormField/styled-components/ValidText.tsx create mode 100644 packages/native-ui/src/config/theme/FormFieldHelperIcon.ts create mode 100644 packages/native-ui/src/config/theme/FormFieldInvalid.ts rename packages/native-ui/src/config/theme/{FormFieldErrorIcon.ts => FormFieldInvalidIcon.ts} (72%) rename packages/native-ui/src/config/theme/{FormFieldErrorText.ts => FormFieldInvalidText.ts} (56%) rename packages/native-ui/src/config/theme/{FormFieldError.ts => FormFieldValid.ts} (77%) create mode 100644 packages/native-ui/src/config/theme/FormFieldValidIcon.ts create mode 100644 packages/native-ui/src/config/theme/FormFieldValidText.ts diff --git a/apps/native-ui-storybook/components/FormField/FormField.tsx b/apps/native-ui-storybook/components/FormField/FormField.tsx index 43748be1e..fb81b8f60 100644 --- a/apps/native-ui-storybook/components/FormField/FormField.tsx +++ b/apps/native-ui-storybook/components/FormField/FormField.tsx @@ -5,19 +5,18 @@ import { InputIcon, InputSlot, FormField, - FormFieldError, - FormFieldErrorIcon, - FormFieldErrorText, FormFieldHelper, FormFieldHelperText, FormFieldLabel, FormFieldLabelText, + FormFieldInvalidIcon, + FormFieldInvalid, + FormFieldInvalidText, + FormFieldValidIcon, + FormFieldValid, + FormFieldValidText, } from '@utilitywarehouse/native-ui'; -import { - WarningSmallContainedIcon, - EmailMediumIcon, - EyeMediumIcon, -} from '@utilitywarehouse/react-native-icons'; +import { EmailMediumIcon, EyeMediumIcon } from '@utilitywarehouse/react-native-icons'; import { Meta, StoryFn } from '@storybook/react'; const InputBasic: StoryFn = ({ @@ -29,11 +28,11 @@ const InputBasic: StoryFn = ({ ...props }: any) => { return ( - + Label - + {_showIconLeft && ( @@ -49,10 +48,14 @@ const InputBasic: StoryFn = ({ Helper text - - - Error text - + + + Invalid form field text + + + + Valid form field text + ); }; diff --git a/packages/native-ui/src/components/FormField/FormField.tsx b/packages/native-ui/src/components/FormField/FormField.tsx new file mode 100644 index 000000000..f1bc5427b --- /dev/null +++ b/packages/native-ui/src/components/FormField/FormField.tsx @@ -0,0 +1,52 @@ +import React, { createContext, useContext, FC, useMemo } from 'react'; +import { createFormControl } from '@gluestack-ui/form-control'; +import { + Root, + Error, + ErrorText, + ErrorIcon, + Label, + LabelText, + LabelAstrick, + Helper, + HelperText, +} from './styled-components'; + +export const FormField = createFormControl({ + Root, + Error, + ErrorText, + ErrorIcon, + Label, + LabelText, + LabelAstrick, + Helper, + HelperText, +}); + +export type FormFieldProps = React.ComponentProps; + +interface FormFieldContextType { + validationStatus: 'valid' | 'invalid' | 'initial'; +} + +const FormFieldContext = createContext(undefined); + +const FormFieldProvider: FC = ({ children, ...props }) => { + const value = useMemo( + () => ({ + validationStatus: props.validationStatus || 'initial', + }), + [props.validationStatus] + ); + + return ( + + {children} + + ); +}; + +const useFormFieldContext = (): FormFieldContextType | undefined => useContext(FormFieldContext); + +export { FormFieldProvider, useFormFieldContext }; diff --git a/packages/native-ui/src/components/FormField/FormFieldInvalid.tsx b/packages/native-ui/src/components/FormField/FormFieldInvalid.tsx new file mode 100644 index 000000000..2af0c5d4e --- /dev/null +++ b/packages/native-ui/src/components/FormField/FormFieldInvalid.tsx @@ -0,0 +1,10 @@ +import React, { FC, PropsWithChildren } from 'react'; +import Invalid from './styled-components/Invalid'; +import { useFormFieldContext } from './FormField'; + +const FormFieldInvalid: FC = ({ children }) => { + const formFieldContext = useFormFieldContext(); + return formFieldContext?.validationStatus === 'invalid' ? {children} : null; +}; + +export default FormFieldInvalid; diff --git a/packages/native-ui/src/components/FormField/FormFieldValid.tsx b/packages/native-ui/src/components/FormField/FormFieldValid.tsx new file mode 100644 index 000000000..1ba5a9140 --- /dev/null +++ b/packages/native-ui/src/components/FormField/FormFieldValid.tsx @@ -0,0 +1,10 @@ +import React, { FC, PropsWithChildren } from 'react'; +import Valid from './styled-components/Valid'; +import { useFormFieldContext } from './FormField'; + +const FormFieldValid: FC = ({ children }) => { + const formFieldContext = useFormFieldContext(); + return formFieldContext?.validationStatus === 'valid' ? {children} : null; +}; + +export default FormFieldValid; diff --git a/packages/native-ui/src/components/FormField/index.ts b/packages/native-ui/src/components/FormField/index.ts index b03cc36e2..b62d4cbe7 100644 --- a/packages/native-ui/src/components/FormField/index.ts +++ b/packages/native-ui/src/components/FormField/index.ts @@ -1,28 +1,15 @@ -import { createFormControl } from '@gluestack-ui/form-control'; -import { - Root, - Error, - ErrorText, - ErrorIcon, - Label, - LabelText, - LabelAstrick, - Helper, - HelperText, +import { FormField } from './FormField'; +export { FormFieldProvider as FormField, useFormFieldContext } from './FormField'; +export { default as FormFieldValid } from './FormFieldValid'; +export { default as FormFieldInvalid } from './FormFieldInvalid'; +export { + HelperIcon as FormFieldHelperIcon, + ValidIcon as FormFieldValidIcon, + ValidText as FormFieldValidText, + InvalidIcon as FormFieldInvalidIcon, + InvalidText as FormFieldInvalidText, } from './styled-components'; -export const FormField = createFormControl({ - Root, - Error, - ErrorText, - ErrorIcon, - Label, - LabelText, - LabelAstrick, - Helper, - HelperText, -}); - export const FormFieldError = FormField.Error; export const FormFieldErrorText = FormField.Error.Text; export const FormFieldErrorIcon = FormField.Error.Icon; diff --git a/packages/native-ui/src/components/FormField/styled-components/HelperIcon.tsx b/packages/native-ui/src/components/FormField/styled-components/HelperIcon.tsx new file mode 100644 index 000000000..6441216f6 --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/HelperIcon.tsx @@ -0,0 +1,16 @@ +import { styled } from '@gluestack-style/react'; +import { AsForwarder } from '@gluestack-ui/themed'; +import { InformationMediumContainedIcon } from '@utilitywarehouse/react-native-icons'; + +export default styled( + AsForwarder, + { + props: { + as: InformationMediumContainedIcon, + }, + }, + { + componentName: 'FormFieldHelperIcon', + ancestorStyle: ['_helperIcon'], + } as const +); diff --git a/packages/native-ui/src/components/FormField/styled-components/Invalid.tsx b/packages/native-ui/src/components/FormField/styled-components/Invalid.tsx new file mode 100644 index 000000000..7ecb79639 --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/Invalid.tsx @@ -0,0 +1,6 @@ +import { styled } from '@gluestack-style/react'; +import { View } from 'react-native'; + +export default styled(View, {}, { + componentName: 'FormFieldInvalid', +} as const); diff --git a/packages/native-ui/src/components/FormField/styled-components/InvalidIcon.tsx b/packages/native-ui/src/components/FormField/styled-components/InvalidIcon.tsx new file mode 100644 index 000000000..bc8db2df1 --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/InvalidIcon.tsx @@ -0,0 +1,16 @@ +import { styled } from '@gluestack-style/react'; +import { AsForwarder } from '@gluestack-ui/themed'; +import { WarningMediumContainedIcon } from '@utilitywarehouse/react-native-icons'; + +export default styled( + AsForwarder, + { + props: { + as: WarningMediumContainedIcon, + }, + }, + { + componentName: 'FormFieldInvalidIcon', + ancestorStyle: ['_invalidIcon'], + } as const +); diff --git a/packages/native-ui/src/components/FormField/styled-components/InvalidText.tsx b/packages/native-ui/src/components/FormField/styled-components/InvalidText.tsx new file mode 100644 index 000000000..61e0db90f --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/InvalidText.tsx @@ -0,0 +1,7 @@ +import { styled } from '@gluestack-style/react'; +import { Text } from 'react-native'; + +export default styled(Text, {}, { + componentName: 'FormFieldInvalidText', + ancestorStyle: ['_invalidText'], +} as const); diff --git a/packages/native-ui/src/components/FormField/styled-components/Root.tsx b/packages/native-ui/src/components/FormField/styled-components/Root.tsx index b956a2a88..dab5c2448 100644 --- a/packages/native-ui/src/components/FormField/styled-components/Root.tsx +++ b/packages/native-ui/src/components/FormField/styled-components/Root.tsx @@ -6,9 +6,13 @@ export default styled(View, {}, { descendantStyle: [ '_labelText', '_helperText', + '_helperIcon', '_errorText', '_labelAstrick', - '_validationText', + '_invalidText', + '_validText', + '_invalidIcon', + '_validIcon', '_input', ], } as const); diff --git a/packages/native-ui/src/components/FormField/styled-components/Valid.tsx b/packages/native-ui/src/components/FormField/styled-components/Valid.tsx new file mode 100644 index 000000000..f76ee4e75 --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/Valid.tsx @@ -0,0 +1,6 @@ +import { styled } from '@gluestack-style/react'; +import { View } from 'react-native'; + +export default styled(View, {}, { + componentName: 'FormFieldValid', +} as const); diff --git a/packages/native-ui/src/components/FormField/styled-components/ValidIcon.tsx b/packages/native-ui/src/components/FormField/styled-components/ValidIcon.tsx new file mode 100644 index 000000000..efe2306d6 --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/ValidIcon.tsx @@ -0,0 +1,16 @@ +import { styled } from '@gluestack-style/react'; +import { AsForwarder } from '@gluestack-ui/themed'; +import { TickMediumContainedIcon } from '@utilitywarehouse/react-native-icons'; + +export default styled( + AsForwarder, + { + props: { + as: TickMediumContainedIcon, + }, + }, + { + componentName: 'FormFieldValidIcon', + ancestorStyle: ['_validIcon'], + } as const +); diff --git a/packages/native-ui/src/components/FormField/styled-components/ValidText.tsx b/packages/native-ui/src/components/FormField/styled-components/ValidText.tsx new file mode 100644 index 000000000..8db69dc93 --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/ValidText.tsx @@ -0,0 +1,7 @@ +import { styled } from '@gluestack-style/react'; +import { Text } from 'react-native'; + +export default styled(Text, {}, { + componentName: 'FormFieldValidText', + ancestorStyle: ['_validText'], +} as const); diff --git a/packages/native-ui/src/components/FormField/styled-components/index.tsx b/packages/native-ui/src/components/FormField/styled-components/index.tsx index d915beef7..43fb9d06c 100644 --- a/packages/native-ui/src/components/FormField/styled-components/index.tsx +++ b/packages/native-ui/src/components/FormField/styled-components/index.tsx @@ -6,4 +6,11 @@ export { default as Label } from './Label'; export { default as LabelText } from './LabelText'; export { default as LabelAstrick } from './LabelAstrick'; export { default as Helper } from './Helper'; +export { default as HelperIcon } from './HelperIcon'; export { default as HelperText } from './HelperText'; +export { default as Invalid } from './Invalid'; +export { default as InvalidIcon } from './InvalidIcon'; +export { default as InvalidText } from './InvalidText'; +export { default as Valid } from './Valid'; +export { default as ValidIcon } from './ValidIcon'; +export { default as ValidText } from './ValidText'; diff --git a/packages/native-ui/src/components/Input/Input.tsx b/packages/native-ui/src/components/Input/Input.tsx index bc38d63e8..59f630aaa 100644 --- a/packages/native-ui/src/components/Input/Input.tsx +++ b/packages/native-ui/src/components/Input/Input.tsx @@ -7,6 +7,7 @@ import { TickMediumContainedIcon, } from '@utilitywarehouse/react-native-icons'; import { InputValidationIcon } from './styled-components'; +import { useFormFieldContext } from '../FormField'; // TODO: remove once upgraded to typescript 5.5 // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -28,11 +29,13 @@ const Input: React.FC = ({ isDisabled, ...props }) => { + const formFieldContext = useFormFieldContext(); + const validationStatusFromContext = formFieldContext?.validationStatus; return ( = ({ } > {children} - {showValidationIcon && validationStatus === 'invalid' && ( + {showValidationIcon && (validationStatusFromContext || validationStatus) === 'invalid' && ( )} - {showValidationIcon && validationStatus === 'valid' && ( + {showValidationIcon && (validationStatusFromContext || validationStatus) === 'valid' && ( diff --git a/packages/native-ui/src/config/theme/FormField.ts b/packages/native-ui/src/config/theme/FormField.ts index 18778152c..54eb8e2b7 100644 --- a/packages/native-ui/src/config/theme/FormField.ts +++ b/packages/native-ui/src/config/theme/FormField.ts @@ -4,35 +4,41 @@ export const FormField = createStyle({ flexDirection: 'column', gap: '$2', + ':disabled': { + _labelText: { + color: '$grey400', + }, + + _helperText: { + color: '$grey400', + }, + + _helperIcon: { + color: '$grey400', + }, + + _invalidText: { + color: '$grey400', + }, + + _validText: { + color: '$grey400', + }, + + _invalidIcon: { + color: '$grey400', + }, + + _validIcon: { + color: '$grey400', + }, + }, + variants: { validationStatus: { initial: {}, - valid: { - _labelText: { - color: '$green500', - }, - - _input: {}, - }, - invalid: { - _labelText: { - color: '$red500', - }, - - _input: { - props: { - validationStatus: 'invalid', - }, - }, - - ':focus': { - _input: { - props: { - validationStatus: 'invalid', - }, - }, - }, - }, + valid: {}, + invalid: {}, }, }, diff --git a/packages/native-ui/src/config/theme/FormFieldHelperIcon.ts b/packages/native-ui/src/config/theme/FormFieldHelperIcon.ts new file mode 100644 index 000000000..6f648ed11 --- /dev/null +++ b/packages/native-ui/src/config/theme/FormFieldHelperIcon.ts @@ -0,0 +1,9 @@ +import { createStyle } from '@gluestack-style/react'; + +export const FormFieldHelperIcon = createStyle({ + color: '$grey800', + _dark: { + color: '$darkGrey800', + }, + props: {}, +}); diff --git a/packages/native-ui/src/config/theme/FormFieldHelperText.ts b/packages/native-ui/src/config/theme/FormFieldHelperText.ts index 6ec30bdf3..0a2c51a3d 100644 --- a/packages/native-ui/src/config/theme/FormFieldHelperText.ts +++ b/packages/native-ui/src/config/theme/FormFieldHelperText.ts @@ -2,7 +2,7 @@ import { createStyle } from '@gluestack-style/react'; export const FormFieldHelperText = createStyle({ color: '$grey800', - fontSize: '$sm', + fontSize: '$md', _dark: { color: '$darkGrey800', }, diff --git a/packages/native-ui/src/config/theme/FormFieldInvalid.ts b/packages/native-ui/src/config/theme/FormFieldInvalid.ts new file mode 100644 index 000000000..e3e74702b --- /dev/null +++ b/packages/native-ui/src/config/theme/FormFieldInvalid.ts @@ -0,0 +1,8 @@ +import { createStyle } from '@gluestack-style/react'; + +export const FormFieldInvalid = createStyle({ + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'center', + gap: '$2', +}); diff --git a/packages/native-ui/src/config/theme/FormFieldErrorIcon.ts b/packages/native-ui/src/config/theme/FormFieldInvalidIcon.ts similarity index 72% rename from packages/native-ui/src/config/theme/FormFieldErrorIcon.ts rename to packages/native-ui/src/config/theme/FormFieldInvalidIcon.ts index 2f5252667..2fcaf013f 100644 --- a/packages/native-ui/src/config/theme/FormFieldErrorIcon.ts +++ b/packages/native-ui/src/config/theme/FormFieldInvalidIcon.ts @@ -1,6 +1,6 @@ import { createStyle } from '@gluestack-style/react'; -export const FormFieldErrorIcon = createStyle({ +export const FormFieldInvalidIcon = createStyle({ color: '$red500', _dark: { color: '$darkRed700', diff --git a/packages/native-ui/src/config/theme/FormFieldErrorText.ts b/packages/native-ui/src/config/theme/FormFieldInvalidText.ts similarity index 56% rename from packages/native-ui/src/config/theme/FormFieldErrorText.ts rename to packages/native-ui/src/config/theme/FormFieldInvalidText.ts index 7d7c2b9b3..16723f144 100644 --- a/packages/native-ui/src/config/theme/FormFieldErrorText.ts +++ b/packages/native-ui/src/config/theme/FormFieldInvalidText.ts @@ -1,6 +1,8 @@ import { createStyle } from '@gluestack-style/react'; -export const FormFieldErrorText = createStyle({ +export const FormFieldInvalidText = createStyle({ + fontFamily: '$body', + fontSize: '$md', color: '$red500', _dark: { color: '$darkRed700', diff --git a/packages/native-ui/src/config/theme/FormFieldError.ts b/packages/native-ui/src/config/theme/FormFieldValid.ts similarity index 77% rename from packages/native-ui/src/config/theme/FormFieldError.ts rename to packages/native-ui/src/config/theme/FormFieldValid.ts index 2fb37d27c..cec00304e 100644 --- a/packages/native-ui/src/config/theme/FormFieldError.ts +++ b/packages/native-ui/src/config/theme/FormFieldValid.ts @@ -1,6 +1,6 @@ import { createStyle } from '@gluestack-style/react'; -export const FormFieldError = createStyle({ +export const FormFieldValid = createStyle({ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', diff --git a/packages/native-ui/src/config/theme/FormFieldValidIcon.ts b/packages/native-ui/src/config/theme/FormFieldValidIcon.ts new file mode 100644 index 000000000..5c8b78490 --- /dev/null +++ b/packages/native-ui/src/config/theme/FormFieldValidIcon.ts @@ -0,0 +1,8 @@ +import { createStyle } from '@gluestack-style/react'; + +export const FormFieldValidIcon = createStyle({ + color: '$green500', + _dark: { + color: '$darkGreen700', + }, +}); diff --git a/packages/native-ui/src/config/theme/FormFieldValidText.ts b/packages/native-ui/src/config/theme/FormFieldValidText.ts new file mode 100644 index 000000000..1b4b45eac --- /dev/null +++ b/packages/native-ui/src/config/theme/FormFieldValidText.ts @@ -0,0 +1,10 @@ +import { createStyle } from '@gluestack-style/react'; + +export const FormFieldValidText = createStyle({ + fontFamily: '$body', + fontSize: '$md', + color: '$green500', + _dark: { + color: '$darkGreen700', + }, +}); diff --git a/packages/native-ui/src/config/theme/Input.ts b/packages/native-ui/src/config/theme/Input.ts index b00f0a7ac..6e4a9d027 100644 --- a/packages/native-ui/src/config/theme/Input.ts +++ b/packages/native-ui/src/config/theme/Input.ts @@ -40,6 +40,11 @@ export const Input = createStyle({ _input: { color: '$grey400', + + _validationIcon: { + color: '$grey400', + }, + props: { placeholderTextColor: '$grey400', }, diff --git a/packages/native-ui/src/config/theme/index.ts b/packages/native-ui/src/config/theme/index.ts index e58f822d6..8da61a47a 100644 --- a/packages/native-ui/src/config/theme/index.ts +++ b/packages/native-ui/src/config/theme/index.ts @@ -57,10 +57,14 @@ export * from './CheckboxLabel'; // export * from './FabLabel'; // export * from './FlatList'; export * from './FormField'; -export * from './FormFieldError'; -export * from './FormFieldErrorIcon'; -export * from './FormFieldErrorText'; +export * from './FormFieldInvalid'; +export * from './FormFieldInvalidIcon'; +export * from './FormFieldInvalidText'; +export * from './FormFieldValid'; +export * from './FormFieldValidIcon'; +export * from './FormFieldValidText'; export * from './FormFieldHelper'; +export * from './FormFieldHelperIcon'; export * from './FormFieldHelperText'; export * from './FormFieldLabel'; export * from './FormFieldLabelText'; From ce93e5b9ccb8843862bbdd38c331799d1d888ac0 Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Tue, 11 Jun 2024 16:24:51 +0100 Subject: [PATCH 14/45] fix: disabled styles --- .../components/FormField/FormFieldInvalid.tsx | 2 +- .../native-ui/src/components/Input/index.ts | 6 +++++ packages/native-ui/src/config/theme/Input.ts | 24 +++++++++++++++++++ 3 files changed, 31 insertions(+), 1 deletion(-) diff --git a/packages/native-ui/src/components/FormField/FormFieldInvalid.tsx b/packages/native-ui/src/components/FormField/FormFieldInvalid.tsx index 2af0c5d4e..e46f4af14 100644 --- a/packages/native-ui/src/components/FormField/FormFieldInvalid.tsx +++ b/packages/native-ui/src/components/FormField/FormFieldInvalid.tsx @@ -4,7 +4,7 @@ import { useFormFieldContext } from './FormField'; const FormFieldInvalid: FC = ({ children }) => { const formFieldContext = useFormFieldContext(); - return formFieldContext?.validationStatus === 'invalid' ? {children} : null; + return formFieldContext?.validationStatus === 'invalid' ? {children} : null; }; export default FormFieldInvalid; diff --git a/packages/native-ui/src/components/Input/index.ts b/packages/native-ui/src/components/Input/index.ts index 58ae994d7..bd9cb18e5 100644 --- a/packages/native-ui/src/components/Input/index.ts +++ b/packages/native-ui/src/components/Input/index.ts @@ -2,7 +2,13 @@ export { default as Input } from './Input'; import { AccessibleInput } from './Input'; import ValidationIcon from './styled-components/ValidationIcon'; +// TODO: remove once upgraded to typescript 5.5 +// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment export const InputIcon = AccessibleInput.Icon; +// TODO: remove once upgraded to typescript 5.5 +// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment export const InputSlot = AccessibleInput.Slot; +// TODO: remove once upgraded to typescript 5.5 +// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment export const InputField = AccessibleInput.Input; export const InputValidationIcon = ValidationIcon; diff --git a/packages/native-ui/src/config/theme/Input.ts b/packages/native-ui/src/config/theme/Input.ts index 6e4a9d027..a25a93358 100644 --- a/packages/native-ui/src/config/theme/Input.ts +++ b/packages/native-ui/src/config/theme/Input.ts @@ -110,6 +110,12 @@ export const Input = createStyle({ borderBottomColor: '$green500', }, + ':disabled': { + _validationIcon: { + color: '$grey400', + }, + }, + _dark: { borderBottomColor: '$darkGreen700', @@ -121,6 +127,12 @@ export const Input = createStyle({ borderColor: '$darkGreen700', borderBottomColor: '$darkGreen700', }, + + ':disabled': { + _validationIcon: { + color: '$darkGrey400', + }, + }, }, }, invalid: { @@ -135,6 +147,12 @@ export const Input = createStyle({ borderBottomColor: '$red500', }, + ':disabled': { + _validationIcon: { + color: '$grey400', + }, + }, + _dark: { borderBottomColor: '$darkRed700', @@ -146,6 +164,12 @@ export const Input = createStyle({ borderColor: '$darkRed700', borderBottomColor: '$darkRed700', }, + + ':disabled': { + _validationIcon: { + color: '$darkGrey400', + }, + }, }, }, }, From ac1ff32bf052156aab6d732b154bbe85c9e64874 Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Wed, 12 Jun 2024 12:03:54 +0100 Subject: [PATCH 15/45] fix: dark mode disabled styles --- .../src/components/FormField/FormField.tsx | 71 ++++++++++++++++++- .../native-ui/src/config/theme/FormField.ts | 32 +++++++++ packages/native-ui/src/config/theme/Input.ts | 28 +++++++- 3 files changed, 128 insertions(+), 3 deletions(-) diff --git a/packages/native-ui/src/components/FormField/FormField.tsx b/packages/native-ui/src/components/FormField/FormField.tsx index f1bc5427b..9f3518810 100644 --- a/packages/native-ui/src/components/FormField/FormField.tsx +++ b/packages/native-ui/src/components/FormField/FormField.tsx @@ -11,6 +11,7 @@ import { Helper, HelperText, } from './styled-components'; +import { useColorMode } from '@gluestack-style/react'; export const FormField = createFormControl({ Root, @@ -33,6 +34,7 @@ interface FormFieldContextType { const FormFieldContext = createContext(undefined); const FormFieldProvider: FC = ({ children, ...props }) => { + const colorMode = useColorMode(); const value = useMemo( () => ({ validationStatus: props.validationStatus || 'initial', @@ -42,7 +44,74 @@ const FormFieldProvider: FC = ({ children, ...props }) => { return ( - {children} + + {children} + ); }; diff --git a/packages/native-ui/src/config/theme/FormField.ts b/packages/native-ui/src/config/theme/FormField.ts index 54eb8e2b7..a81908c3d 100644 --- a/packages/native-ui/src/config/theme/FormField.ts +++ b/packages/native-ui/src/config/theme/FormField.ts @@ -32,6 +32,38 @@ export const FormField = createStyle({ _validIcon: { color: '$grey400', }, + + _dark: { + ':disabled': { + _labelText: { + color: '$darkGrey400', + }, + + _helperText: { + color: '$darkGrey400', + }, + + _helperIcon: { + color: '$darkGrey400', + }, + + _invalidText: { + color: '$darkGrey400', + }, + + _validText: { + color: '$darkGrey400', + }, + + _invalidIcon: { + color: '$darkGrey400', + }, + + _validIcon: { + color: '$darkGrey400', + }, + }, + }, }, variants: { diff --git a/packages/native-ui/src/config/theme/Input.ts b/packages/native-ui/src/config/theme/Input.ts index a25a93358..04c8bdb01 100644 --- a/packages/native-ui/src/config/theme/Input.ts +++ b/packages/native-ui/src/config/theme/Input.ts @@ -30,7 +30,9 @@ export const Input = createStyle({ }, ':disabled': { - borderColor: '$grey400', + borderTopColor: '$grey400', + borderLeftColor: '$grey400', + borderRightColor: '$grey400', borderBottomColor: '$grey600', backgroundColor: '$grey50', @@ -74,7 +76,9 @@ export const Input = createStyle({ }, ':disabled': { - borderColor: '$darkGrey400', + borderTopColor: '$darkGrey400', + borderLeftColor: '$darkGrey400', + borderRightColor: '$darkGrey400', borderBottomColor: '$darkGrey600', backgroundColor: '$darkGrey50', @@ -111,6 +115,11 @@ export const Input = createStyle({ }, ':disabled': { + borderTopColor: '$grey400', + borderLeftColor: '$grey400', + borderRightColor: '$grey400', + borderBottomColor: '$grey600', + _validationIcon: { color: '$grey400', }, @@ -129,6 +138,11 @@ export const Input = createStyle({ }, ':disabled': { + borderTopColor: '$darkGrey400', + borderLeftColor: '$darkGrey400', + borderRightColor: '$darkGrey400', + borderBottomColor: '$darkGrey600', + _validationIcon: { color: '$darkGrey400', }, @@ -148,6 +162,11 @@ export const Input = createStyle({ }, ':disabled': { + borderTopColor: '$grey400', + borderLeftColor: '$grey400', + borderRightColor: '$grey400', + borderBottomColor: '$grey600', + _validationIcon: { color: '$grey400', }, @@ -166,6 +185,11 @@ export const Input = createStyle({ }, ':disabled': { + borderTopColor: '$darkGrey400', + borderLeftColor: '$darkGrey400', + borderRightColor: '$darkGrey400', + borderBottomColor: '$darkGrey600', + _validationIcon: { color: '$darkGrey400', }, From 67a65ff22cc1850690ed7353281d140b846d7395 Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Wed, 12 Jun 2024 17:07:01 +0100 Subject: [PATCH 16/45] fix: disabled styles --- .../src/components/FormField/FormField.tsx | 71 +------------------ .../native-ui/src/config/theme/FormField.ts | 71 +++++++++++++------ .../src/config/theme/FormFieldHelperText.ts | 4 -- .../src/config/theme/FormFieldLabelText.ts | 4 -- 4 files changed, 49 insertions(+), 101 deletions(-) diff --git a/packages/native-ui/src/components/FormField/FormField.tsx b/packages/native-ui/src/components/FormField/FormField.tsx index 9f3518810..f1bc5427b 100644 --- a/packages/native-ui/src/components/FormField/FormField.tsx +++ b/packages/native-ui/src/components/FormField/FormField.tsx @@ -11,7 +11,6 @@ import { Helper, HelperText, } from './styled-components'; -import { useColorMode } from '@gluestack-style/react'; export const FormField = createFormControl({ Root, @@ -34,7 +33,6 @@ interface FormFieldContextType { const FormFieldContext = createContext(undefined); const FormFieldProvider: FC = ({ children, ...props }) => { - const colorMode = useColorMode(); const value = useMemo( () => ({ validationStatus: props.validationStatus || 'initial', @@ -44,74 +42,7 @@ const FormFieldProvider: FC = ({ children, ...props }) => { return ( - - {children} - + {children} ); }; diff --git a/packages/native-ui/src/config/theme/FormField.ts b/packages/native-ui/src/config/theme/FormField.ts index a81908c3d..65acc3aed 100644 --- a/packages/native-ui/src/config/theme/FormField.ts +++ b/packages/native-ui/src/config/theme/FormField.ts @@ -4,6 +4,14 @@ export const FormField = createStyle({ flexDirection: 'column', gap: '$2', + _labelText: { + color: '$grey1000', + }, + + _helperText: { + color: '$grey800', + }, + ':disabled': { _labelText: { color: '$grey400', @@ -32,36 +40,44 @@ export const FormField = createStyle({ _validIcon: { color: '$grey400', }, + }, - _dark: { - ':disabled': { - _labelText: { - color: '$darkGrey400', - }, + _dark: { + _labelText: { + color: '$darkGrey1000', + }, - _helperText: { - color: '$darkGrey400', - }, + _helperText: { + color: '$darkGrey800', + }, - _helperIcon: { - color: '$darkGrey400', - }, + ':disabled': { + _labelText: { + color: '$darkGrey400', + }, - _invalidText: { - color: '$darkGrey400', - }, + _helperText: { + color: '$darkGrey400', + }, - _validText: { - color: '$darkGrey400', - }, + _helperIcon: { + color: '$darkGrey400', + }, - _invalidIcon: { - color: '$darkGrey400', - }, + _invalidText: { + color: '$darkGrey400', + }, - _validIcon: { - color: '$darkGrey400', - }, + _validText: { + color: '$darkGrey400', + }, + + _invalidIcon: { + color: '$darkGrey400', + }, + + _validIcon: { + color: '$darkGrey400', }, }, }, @@ -72,6 +88,15 @@ export const FormField = createStyle({ valid: {}, invalid: {}, }, + isDisabled: { + true: { + backgroundColor: '$red100', + _labelText: { + color: '$grey400', + }, + }, + false: {}, + }, }, defaultProps: {}, diff --git a/packages/native-ui/src/config/theme/FormFieldHelperText.ts b/packages/native-ui/src/config/theme/FormFieldHelperText.ts index 0a2c51a3d..325e10f33 100644 --- a/packages/native-ui/src/config/theme/FormFieldHelperText.ts +++ b/packages/native-ui/src/config/theme/FormFieldHelperText.ts @@ -1,9 +1,5 @@ import { createStyle } from '@gluestack-style/react'; export const FormFieldHelperText = createStyle({ - color: '$grey800', fontSize: '$md', - _dark: { - color: '$darkGrey800', - }, }); diff --git a/packages/native-ui/src/config/theme/FormFieldLabelText.ts b/packages/native-ui/src/config/theme/FormFieldLabelText.ts index 1c8708b7c..51ee72b84 100644 --- a/packages/native-ui/src/config/theme/FormFieldLabelText.ts +++ b/packages/native-ui/src/config/theme/FormFieldLabelText.ts @@ -3,8 +3,4 @@ import { createStyle } from '@gluestack-style/react'; export const FormFieldLabelText = createStyle({ fontWeight: '$semibold', fontSize: '$md', - color: '$grey1000', - _dark: { - color: '$darkGrey1000', - }, }); From 5fb050ac926f078b77594cd40adf8a30aed338ed Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Mon, 10 Jun 2024 16:44:16 +0100 Subject: [PATCH 17/45] feat: add form field components --- .../components/FormField/Docs.mdx | 15 +++ .../FormField/FormField.stories.tsx | 12 ++ .../components/FormField/FormField.tsx | 122 ++++++++++++++++++ .../components/FormField/Variants.tsx | 104 +++++++++++++++ .../src/components/FormField/index.ts | 32 +++++ .../FormField/styled-components/Error.tsx | 6 + .../FormField/styled-components/ErrorIcon.tsx | 7 + .../FormField/styled-components/ErrorText.tsx | 13 ++ .../FormField/styled-components/Helper.tsx | 6 + .../styled-components/HelperText.tsx | 13 ++ .../FormField/styled-components/Label.tsx | 7 + .../styled-components/LabelAstrick.tsx | 14 ++ .../FormField/styled-components/LabelText.tsx | 16 +++ .../FormField/styled-components/Root.tsx | 14 ++ .../FormField/styled-components/index.tsx | 9 ++ packages/native-ui/src/components/index.ts | 1 + .../native-ui/src/config/theme/FormControl.ts | 55 -------- .../src/config/theme/FormControlErrorIcon.ts | 12 -- .../src/config/theme/FormControlErrorText.ts | 8 -- .../src/config/theme/FormControlHelperText.ts | 11 -- .../src/config/theme/FormControlLabelText.ts | 9 -- .../native-ui/src/config/theme/FormField.ts | 40 ++++++ ...{FormControlLabel.ts => FormFieldError.ts} | 4 +- .../src/config/theme/FormFieldErrorIcon.ts | 9 ++ .../src/config/theme/FormFieldErrorText.ts | 8 ++ ...ormControlHelper.ts => FormFieldHelper.ts} | 3 +- .../src/config/theme/FormFieldHelperText.ts | 9 ++ ...{FormControlError.ts => FormFieldLabel.ts} | 4 +- .../src/config/theme/FormFieldLabelText.ts | 10 ++ packages/native-ui/src/config/theme/index.ts | 16 +-- 30 files changed, 479 insertions(+), 110 deletions(-) create mode 100644 apps/native-ui-storybook/components/FormField/Docs.mdx create mode 100644 apps/native-ui-storybook/components/FormField/FormField.stories.tsx create mode 100644 apps/native-ui-storybook/components/FormField/FormField.tsx create mode 100644 apps/native-ui-storybook/components/FormField/Variants.tsx create mode 100644 packages/native-ui/src/components/FormField/index.ts create mode 100644 packages/native-ui/src/components/FormField/styled-components/Error.tsx create mode 100644 packages/native-ui/src/components/FormField/styled-components/ErrorIcon.tsx create mode 100644 packages/native-ui/src/components/FormField/styled-components/ErrorText.tsx create mode 100644 packages/native-ui/src/components/FormField/styled-components/Helper.tsx create mode 100644 packages/native-ui/src/components/FormField/styled-components/HelperText.tsx create mode 100644 packages/native-ui/src/components/FormField/styled-components/Label.tsx create mode 100644 packages/native-ui/src/components/FormField/styled-components/LabelAstrick.tsx create mode 100644 packages/native-ui/src/components/FormField/styled-components/LabelText.tsx create mode 100644 packages/native-ui/src/components/FormField/styled-components/Root.tsx create mode 100644 packages/native-ui/src/components/FormField/styled-components/index.tsx delete mode 100644 packages/native-ui/src/config/theme/FormControl.ts delete mode 100644 packages/native-ui/src/config/theme/FormControlErrorIcon.ts delete mode 100644 packages/native-ui/src/config/theme/FormControlErrorText.ts delete mode 100644 packages/native-ui/src/config/theme/FormControlHelperText.ts delete mode 100644 packages/native-ui/src/config/theme/FormControlLabelText.ts create mode 100644 packages/native-ui/src/config/theme/FormField.ts rename packages/native-ui/src/config/theme/{FormControlLabel.ts => FormFieldError.ts} (70%) create mode 100644 packages/native-ui/src/config/theme/FormFieldErrorIcon.ts create mode 100644 packages/native-ui/src/config/theme/FormFieldErrorText.ts rename packages/native-ui/src/config/theme/{FormControlHelper.ts => FormFieldHelper.ts} (70%) create mode 100644 packages/native-ui/src/config/theme/FormFieldHelperText.ts rename packages/native-ui/src/config/theme/{FormControlError.ts => FormFieldLabel.ts} (66%) create mode 100644 packages/native-ui/src/config/theme/FormFieldLabelText.ts diff --git a/apps/native-ui-storybook/components/FormField/Docs.mdx b/apps/native-ui-storybook/components/FormField/Docs.mdx new file mode 100644 index 000000000..0008ab69e --- /dev/null +++ b/apps/native-ui-storybook/components/FormField/Docs.mdx @@ -0,0 +1,15 @@ +import { Meta, Primary, Controls, Story, Canvas } from '@storybook/blocks'; +import * as FormFieldStories from './FormField.stories'; +import { + Input, + InputField, + InputIcon, + InputSlot, + Center, + NativeUIProvider, +} from '@utilitywarehouse/native-ui'; +import { EmailMediumIcon } from '@utilitywarehouse/react-native-icons'; + + + +# Form Field diff --git a/apps/native-ui-storybook/components/FormField/FormField.stories.tsx b/apps/native-ui-storybook/components/FormField/FormField.stories.tsx new file mode 100644 index 000000000..f9e264475 --- /dev/null +++ b/apps/native-ui-storybook/components/FormField/FormField.stories.tsx @@ -0,0 +1,12 @@ +import { Meta } from '@storybook/react'; +import FormField from './FormField'; +import Variants from './Variants'; + +const FormFieldMeta: Meta = { + title: 'Native UI / Components / Form Field', + component: FormField, +}; + +export default FormFieldMeta; + +export { FormField as Playground, Variants }; diff --git a/apps/native-ui-storybook/components/FormField/FormField.tsx b/apps/native-ui-storybook/components/FormField/FormField.tsx new file mode 100644 index 000000000..43748be1e --- /dev/null +++ b/apps/native-ui-storybook/components/FormField/FormField.tsx @@ -0,0 +1,122 @@ +import React from 'react'; +import { + Input, + InputField, + InputIcon, + InputSlot, + FormField, + FormFieldError, + FormFieldErrorIcon, + FormFieldErrorText, + FormFieldHelper, + FormFieldHelperText, + FormFieldLabel, + FormFieldLabelText, +} from '@utilitywarehouse/native-ui'; +import { + WarningSmallContainedIcon, + EmailMediumIcon, + EyeMediumIcon, +} from '@utilitywarehouse/react-native-icons'; +import { Meta, StoryFn } from '@storybook/react'; + +const InputBasic: StoryFn = ({ + placeholder, + validationStatus, + type, + _showIconLeft, + _showIconRight, + ...props +}: any) => { + return ( + + + Label + + + {_showIconLeft && ( + + + + )} + + {_showIconRight && ( + + + + )} + + + Helper text + + + + Error text + + + ); +}; + +InputBasic.argTypes = { + placeholder: { + control: 'text', + description: 'The Input field placeholder', + defaultValue: '', + }, + type: { + control: 'select', + options: ['text', 'password'], + description: 'The Input field type', + defaultValue: 'text', + }, + validationStatus: { + control: 'select', + options: ['initial', 'valid', 'invalid'], + description: 'The validation status of the Input component', + defaultValue: 'initial', + }, + showValidationIcon: { + control: 'boolean', + description: 'Show the validation icon', + defaultValue: true, + }, + isDisabled: { + control: 'boolean', + description: 'Disable the Input component', + defaultValue: false, + }, + isReadOnly: { + control: 'boolean', + description: 'Read only the Input component', + defaultValue: false, + }, + isFocused: { + control: 'boolean', + description: 'Focus the Input component', + defaultValue: false, + }, + _showIconLeft: { + control: 'boolean', + description: + 'Show icon left. \n _Note: this is not a prop of the `Input` component, just a representation of the `InputSlot` and `InputIcon` component for the Storybook playground._', + }, + _showIconRight: { + control: 'boolean', + description: + 'Show icon right. \n _Note: this is not a prop of the `Input` component, just a representation of the `InputSlot` and `InputIcon` component for the Storybook playground._', + }, +} as Meta['argTypes']; + +InputBasic.args = { + placeholder: 'Input placeholder', + validationStatus: 'initial', + showValidationIcon: true, + type: 'text', + isDisabled: false, + isReadOnly: false, + isFocused: false, + _showIconLeft: false, + _showIconRight: false, +} as Meta['args']; + +export default InputBasic; diff --git a/apps/native-ui-storybook/components/FormField/Variants.tsx b/apps/native-ui-storybook/components/FormField/Variants.tsx new file mode 100644 index 000000000..8e5668d49 --- /dev/null +++ b/apps/native-ui-storybook/components/FormField/Variants.tsx @@ -0,0 +1,104 @@ +import React from 'react'; +import { + Box, + Input, + InputField, + InputIcon, + InputSlot, + ScrollView, + Text, +} from '@utilitywarehouse/native-ui'; +import { StoryFn } from '@storybook/react'; +import { EmailMediumIcon } from '@utilitywarehouse/react-native-icons'; + +const InputVariants: StoryFn = () => { + return ( + + + Defaut + + + + With icon + + + + + + + With placeholder + + + + + + + With value + + + + + + + Focused + + + + + + + Type password + + + + + + + Valid + + + + + + + Valid focused + + + + + + + Invalid + + + + + + + Invalid focused + + + + + + + Disabled + + + + + + + Readonly + + + + + + + + + ); +}; + +export default InputVariants; diff --git a/packages/native-ui/src/components/FormField/index.ts b/packages/native-ui/src/components/FormField/index.ts new file mode 100644 index 000000000..b03cc36e2 --- /dev/null +++ b/packages/native-ui/src/components/FormField/index.ts @@ -0,0 +1,32 @@ +import { createFormControl } from '@gluestack-ui/form-control'; +import { + Root, + Error, + ErrorText, + ErrorIcon, + Label, + LabelText, + LabelAstrick, + Helper, + HelperText, +} from './styled-components'; + +export const FormField = createFormControl({ + Root, + Error, + ErrorText, + ErrorIcon, + Label, + LabelText, + LabelAstrick, + Helper, + HelperText, +}); + +export const FormFieldError = FormField.Error; +export const FormFieldErrorText = FormField.Error.Text; +export const FormFieldErrorIcon = FormField.Error.Icon; +export const FormFieldLabel = FormField.Label; +export const FormFieldLabelText = FormField.Label.Text; +export const FormFieldHelper = FormField.Helper; +export const FormFieldHelperText = FormField.Helper.Text; diff --git a/packages/native-ui/src/components/FormField/styled-components/Error.tsx b/packages/native-ui/src/components/FormField/styled-components/Error.tsx new file mode 100644 index 000000000..81e1f1bc5 --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/Error.tsx @@ -0,0 +1,6 @@ +import { styled } from '@gluestack-style/react'; +import { View } from 'react-native'; + +export default styled(View, {}, { + componentName: 'FormFieldError', +} as const); diff --git a/packages/native-ui/src/components/FormField/styled-components/ErrorIcon.tsx b/packages/native-ui/src/components/FormField/styled-components/ErrorIcon.tsx new file mode 100644 index 000000000..f1c0bff30 --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/ErrorIcon.tsx @@ -0,0 +1,7 @@ +import { styled } from '@gluestack-style/react'; +import { AsForwarder } from '@gluestack-ui/themed'; + +export default styled(AsForwarder, {}, { + componentName: 'FormFieldErrorIcon', + ancestorStyle: ['_icon'], +} as const); diff --git a/packages/native-ui/src/components/FormField/styled-components/ErrorText.tsx b/packages/native-ui/src/components/FormField/styled-components/ErrorText.tsx new file mode 100644 index 000000000..d80d5cafd --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/ErrorText.tsx @@ -0,0 +1,13 @@ +import { styled } from '@gluestack-style/react'; +import { Text } from 'react-native'; + +export default styled( + Text, + { + fontFamily: '$body', + }, + { + componentName: 'FormFieldErrorText', + ancestorStyle: ['_errorText'], + } as const +); diff --git a/packages/native-ui/src/components/FormField/styled-components/Helper.tsx b/packages/native-ui/src/components/FormField/styled-components/Helper.tsx new file mode 100644 index 000000000..4443adf9c --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/Helper.tsx @@ -0,0 +1,6 @@ +import { styled } from '@gluestack-style/react'; +import { View } from 'react-native'; + +export default styled(View, {}, { + componentName: 'FormFieldHelper', +} as const); diff --git a/packages/native-ui/src/components/FormField/styled-components/HelperText.tsx b/packages/native-ui/src/components/FormField/styled-components/HelperText.tsx new file mode 100644 index 000000000..ea4320428 --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/HelperText.tsx @@ -0,0 +1,13 @@ +import { styled } from '@gluestack-style/react'; +import { Text } from 'react-native'; + +export default styled( + Text, + { + fontFamily: '$body', + }, + { + componentName: 'FormFieldHelperText', + ancestorStyle: ['_helperText'], + } as const +); diff --git a/packages/native-ui/src/components/FormField/styled-components/Label.tsx b/packages/native-ui/src/components/FormField/styled-components/Label.tsx new file mode 100644 index 000000000..a02415170 --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/Label.tsx @@ -0,0 +1,7 @@ +import { styled } from '@gluestack-style/react'; +import { View } from 'react-native'; + +export default styled(View, {}, { + componentName: 'FormFieldLabel', + descendantStyle: ['_labelText'], +} as const); diff --git a/packages/native-ui/src/components/FormField/styled-components/LabelAstrick.tsx b/packages/native-ui/src/components/FormField/styled-components/LabelAstrick.tsx new file mode 100644 index 000000000..69173085d --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/LabelAstrick.tsx @@ -0,0 +1,14 @@ +import { styled } from '@gluestack-style/react'; +import { Text } from 'react-native'; + +export default styled( + Text, + { + lineHeight: '$2xs', + fontFamily: '$body', + }, + { + componentName: 'FormFieldErrorText', + ancestorStyle: ['_labelAstrick'], + } as const +); diff --git a/packages/native-ui/src/components/FormField/styled-components/LabelText.tsx b/packages/native-ui/src/components/FormField/styled-components/LabelText.tsx new file mode 100644 index 000000000..75018cb1c --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/LabelText.tsx @@ -0,0 +1,16 @@ +import { styled } from '@gluestack-style/react'; +import { Text } from 'react-native'; + +export default styled( + Text, + { + fontSize: '$md', + lineHeight: '$2xs', + fontFamily: '$body', + fontWeight: '$medium', + }, + { + componentName: 'FormFieldLabelText', + ancestorStyle: ['_labelText'], + } as const +); diff --git a/packages/native-ui/src/components/FormField/styled-components/Root.tsx b/packages/native-ui/src/components/FormField/styled-components/Root.tsx new file mode 100644 index 000000000..b956a2a88 --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/Root.tsx @@ -0,0 +1,14 @@ +import { View } from 'react-native'; +import { styled } from '@gluestack-style/react'; + +export default styled(View, {}, { + componentName: 'FormField', + descendantStyle: [ + '_labelText', + '_helperText', + '_errorText', + '_labelAstrick', + '_validationText', + '_input', + ], +} as const); diff --git a/packages/native-ui/src/components/FormField/styled-components/index.tsx b/packages/native-ui/src/components/FormField/styled-components/index.tsx new file mode 100644 index 000000000..d915beef7 --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/index.tsx @@ -0,0 +1,9 @@ +export { default as Root } from './Root'; +export { default as Error } from './Error'; +export { default as ErrorText } from './ErrorText'; +export { default as ErrorIcon } from './ErrorIcon'; +export { default as Label } from './Label'; +export { default as LabelText } from './LabelText'; +export { default as LabelAstrick } from './LabelAstrick'; +export { default as Helper } from './Helper'; +export { default as HelperText } from './HelperText'; diff --git a/packages/native-ui/src/components/index.ts b/packages/native-ui/src/components/index.ts index 94efc184b..cfcc0054a 100644 --- a/packages/native-ui/src/components/index.ts +++ b/packages/native-ui/src/components/index.ts @@ -6,6 +6,7 @@ export { default as CheckboxIndicator } from './CheckboxIndicator'; export { default as RadioIndicator } from './RadioIndicator'; export * from './Input'; export * from './Spinner'; +export * from './FormField'; // Gluestack UI export { diff --git a/packages/native-ui/src/config/theme/FormControl.ts b/packages/native-ui/src/config/theme/FormControl.ts deleted file mode 100644 index 364fec88e..000000000 --- a/packages/native-ui/src/config/theme/FormControl.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { createStyle } from '@gluestack-style/react'; - -export const FormControl = createStyle({ - flexDirection: 'column', - variants: { - size: { - sm: { - _labelText: { - props: { size: 'sm' }, - }, - _labelAstrick: { - props: { size: 'sm' }, - }, - _helperText: { - props: { size: 'xs' }, - }, - _errorText: { - props: { size: 'xs' }, - }, - }, - md: { - _labelText: { - props: { size: 'md' }, - }, - _labelAstrick: { - props: { size: 'md' }, - }, - _helperText: { - props: { size: 'sm' }, - }, - _errorText: { - props: { size: 'sm' }, - }, - }, - lg: { - _labelText: { - props: { size: 'lg' }, - }, - _labelAstrick: { - props: { size: 'lg' }, - }, - _helperText: { - props: { size: 'md' }, - }, - _errorText: { - props: { size: 'md' }, - }, - }, - }, - }, - - defaultProps: { - size: 'md', - }, -}); diff --git a/packages/native-ui/src/config/theme/FormControlErrorIcon.ts b/packages/native-ui/src/config/theme/FormControlErrorIcon.ts deleted file mode 100644 index 0565c4aba..000000000 --- a/packages/native-ui/src/config/theme/FormControlErrorIcon.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { createStyle } from '@gluestack-style/react'; - -export const FormControlErrorIcon = createStyle({ - color: '$error700', - _dark: { - //@ts-ignore - color: '$error400', - }, - props: { - size: 'sm', - }, -}); diff --git a/packages/native-ui/src/config/theme/FormControlErrorText.ts b/packages/native-ui/src/config/theme/FormControlErrorText.ts deleted file mode 100644 index a303b59ef..000000000 --- a/packages/native-ui/src/config/theme/FormControlErrorText.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { createStyle } from '@gluestack-style/react'; - -export const FormControlErrorText = createStyle({ - color: '$error700', - _dark: { - color: '$error400', - }, -}); diff --git a/packages/native-ui/src/config/theme/FormControlHelperText.ts b/packages/native-ui/src/config/theme/FormControlHelperText.ts deleted file mode 100644 index 572e43119..000000000 --- a/packages/native-ui/src/config/theme/FormControlHelperText.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { createStyle } from '@gluestack-style/react'; - -export const FormControlHelperText = createStyle({ - props: { - size: 'xs', - }, - color: '$textLight500', - _dark: { - color: '$textDark400', - }, -}); diff --git a/packages/native-ui/src/config/theme/FormControlLabelText.ts b/packages/native-ui/src/config/theme/FormControlLabelText.ts deleted file mode 100644 index edcd1d2aa..000000000 --- a/packages/native-ui/src/config/theme/FormControlLabelText.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { createStyle } from '@gluestack-style/react'; - -export const FormControlLabelText = createStyle({ - fontWeight: '$medium', - color: '$textLight900', - _dark: { - color: '$textDark50', - }, -}); diff --git a/packages/native-ui/src/config/theme/FormField.ts b/packages/native-ui/src/config/theme/FormField.ts new file mode 100644 index 000000000..18778152c --- /dev/null +++ b/packages/native-ui/src/config/theme/FormField.ts @@ -0,0 +1,40 @@ +import { createStyle } from '@gluestack-style/react'; + +export const FormField = createStyle({ + flexDirection: 'column', + gap: '$2', + + variants: { + validationStatus: { + initial: {}, + valid: { + _labelText: { + color: '$green500', + }, + + _input: {}, + }, + invalid: { + _labelText: { + color: '$red500', + }, + + _input: { + props: { + validationStatus: 'invalid', + }, + }, + + ':focus': { + _input: { + props: { + validationStatus: 'invalid', + }, + }, + }, + }, + }, + }, + + defaultProps: {}, +}); diff --git a/packages/native-ui/src/config/theme/FormControlLabel.ts b/packages/native-ui/src/config/theme/FormFieldError.ts similarity index 70% rename from packages/native-ui/src/config/theme/FormControlLabel.ts rename to packages/native-ui/src/config/theme/FormFieldError.ts index 59d891aca..2fb37d27c 100644 --- a/packages/native-ui/src/config/theme/FormControlLabel.ts +++ b/packages/native-ui/src/config/theme/FormFieldError.ts @@ -1,8 +1,8 @@ import { createStyle } from '@gluestack-style/react'; -export const FormControlLabel = createStyle({ +export const FormFieldError = createStyle({ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', - mb: '$1', + gap: '$2', }); diff --git a/packages/native-ui/src/config/theme/FormFieldErrorIcon.ts b/packages/native-ui/src/config/theme/FormFieldErrorIcon.ts new file mode 100644 index 000000000..2f5252667 --- /dev/null +++ b/packages/native-ui/src/config/theme/FormFieldErrorIcon.ts @@ -0,0 +1,9 @@ +import { createStyle } from '@gluestack-style/react'; + +export const FormFieldErrorIcon = createStyle({ + color: '$red500', + _dark: { + color: '$darkRed700', + }, + props: {}, +}); diff --git a/packages/native-ui/src/config/theme/FormFieldErrorText.ts b/packages/native-ui/src/config/theme/FormFieldErrorText.ts new file mode 100644 index 000000000..7d7c2b9b3 --- /dev/null +++ b/packages/native-ui/src/config/theme/FormFieldErrorText.ts @@ -0,0 +1,8 @@ +import { createStyle } from '@gluestack-style/react'; + +export const FormFieldErrorText = createStyle({ + color: '$red500', + _dark: { + color: '$darkRed700', + }, +}); diff --git a/packages/native-ui/src/config/theme/FormControlHelper.ts b/packages/native-ui/src/config/theme/FormFieldHelper.ts similarity index 70% rename from packages/native-ui/src/config/theme/FormControlHelper.ts rename to packages/native-ui/src/config/theme/FormFieldHelper.ts index 5c229edd5..2060f1ea3 100644 --- a/packages/native-ui/src/config/theme/FormControlHelper.ts +++ b/packages/native-ui/src/config/theme/FormFieldHelper.ts @@ -1,8 +1,7 @@ import { createStyle } from '@gluestack-style/react'; -export const FormControlHelper = createStyle({ +export const FormFieldHelper = createStyle({ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', - mt: '$1', }); diff --git a/packages/native-ui/src/config/theme/FormFieldHelperText.ts b/packages/native-ui/src/config/theme/FormFieldHelperText.ts new file mode 100644 index 000000000..6ec30bdf3 --- /dev/null +++ b/packages/native-ui/src/config/theme/FormFieldHelperText.ts @@ -0,0 +1,9 @@ +import { createStyle } from '@gluestack-style/react'; + +export const FormFieldHelperText = createStyle({ + color: '$grey800', + fontSize: '$sm', + _dark: { + color: '$darkGrey800', + }, +}); diff --git a/packages/native-ui/src/config/theme/FormControlError.ts b/packages/native-ui/src/config/theme/FormFieldLabel.ts similarity index 66% rename from packages/native-ui/src/config/theme/FormControlError.ts rename to packages/native-ui/src/config/theme/FormFieldLabel.ts index 07d8df239..884c916e0 100644 --- a/packages/native-ui/src/config/theme/FormControlError.ts +++ b/packages/native-ui/src/config/theme/FormFieldLabel.ts @@ -1,9 +1,7 @@ import { createStyle } from '@gluestack-style/react'; -export const FormControlError = createStyle({ +export const FormFieldLabel = createStyle({ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', - mt: '$1', - gap: '$1', }); diff --git a/packages/native-ui/src/config/theme/FormFieldLabelText.ts b/packages/native-ui/src/config/theme/FormFieldLabelText.ts new file mode 100644 index 000000000..1c8708b7c --- /dev/null +++ b/packages/native-ui/src/config/theme/FormFieldLabelText.ts @@ -0,0 +1,10 @@ +import { createStyle } from '@gluestack-style/react'; + +export const FormFieldLabelText = createStyle({ + fontWeight: '$semibold', + fontSize: '$md', + color: '$grey1000', + _dark: { + color: '$darkGrey1000', + }, +}); diff --git a/packages/native-ui/src/config/theme/index.ts b/packages/native-ui/src/config/theme/index.ts index 155a8f01c..e58f822d6 100644 --- a/packages/native-ui/src/config/theme/index.ts +++ b/packages/native-ui/src/config/theme/index.ts @@ -56,14 +56,14 @@ export * from './CheckboxLabel'; // export * from './FabIcon'; // export * from './FabLabel'; // export * from './FlatList'; -// export * from './FormControl'; -// export * from './FormControlError'; -// export * from './FormControlErrorIcon'; -// export * from './FormControlErrorText'; -// export * from './FormControlHelper'; -// export * from './FormControlHelperText'; -// export * from './FormControlLabel'; -// export * from './FormControlLabelText'; +export * from './FormField'; +export * from './FormFieldError'; +export * from './FormFieldErrorIcon'; +export * from './FormFieldErrorText'; +export * from './FormFieldHelper'; +export * from './FormFieldHelperText'; +export * from './FormFieldLabel'; +export * from './FormFieldLabelText'; export * from './HStack'; // export * from './Heading'; export * from './Icon'; From 7bf57887fe08764e4a455a1ad968cac23991d855 Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Tue, 11 Jun 2024 16:11:34 +0100 Subject: [PATCH 18/45] feat: form field components and context --- .../components/FormField/FormField.tsx | 31 +++++----- .../src/components/FormField/FormField.tsx | 52 +++++++++++++++++ .../components/FormField/FormFieldInvalid.tsx | 10 ++++ .../components/FormField/FormFieldValid.tsx | 10 ++++ .../src/components/FormField/index.ts | 33 ++++------- .../styled-components/HelperIcon.tsx | 16 +++++ .../FormField/styled-components/Invalid.tsx | 6 ++ .../styled-components/InvalidIcon.tsx | 16 +++++ .../styled-components/InvalidText.tsx | 7 +++ .../FormField/styled-components/Root.tsx | 6 +- .../FormField/styled-components/Valid.tsx | 6 ++ .../FormField/styled-components/ValidIcon.tsx | 16 +++++ .../FormField/styled-components/ValidText.tsx | 7 +++ .../FormField/styled-components/index.tsx | 7 +++ .../native-ui/src/components/Input/Input.tsx | 11 ++-- .../native-ui/src/config/theme/FormField.ts | 58 ++++++++++--------- .../src/config/theme/FormFieldHelperIcon.ts | 9 +++ .../src/config/theme/FormFieldHelperText.ts | 2 +- .../src/config/theme/FormFieldInvalid.ts | 8 +++ ...ldErrorIcon.ts => FormFieldInvalidIcon.ts} | 2 +- ...ldErrorText.ts => FormFieldInvalidText.ts} | 4 +- .../{FormFieldError.ts => FormFieldValid.ts} | 2 +- .../src/config/theme/FormFieldValidIcon.ts | 8 +++ .../src/config/theme/FormFieldValidText.ts | 10 ++++ packages/native-ui/src/config/theme/Input.ts | 5 ++ packages/native-ui/src/config/theme/index.ts | 10 +++- 26 files changed, 277 insertions(+), 75 deletions(-) create mode 100644 packages/native-ui/src/components/FormField/FormField.tsx create mode 100644 packages/native-ui/src/components/FormField/FormFieldInvalid.tsx create mode 100644 packages/native-ui/src/components/FormField/FormFieldValid.tsx create mode 100644 packages/native-ui/src/components/FormField/styled-components/HelperIcon.tsx create mode 100644 packages/native-ui/src/components/FormField/styled-components/Invalid.tsx create mode 100644 packages/native-ui/src/components/FormField/styled-components/InvalidIcon.tsx create mode 100644 packages/native-ui/src/components/FormField/styled-components/InvalidText.tsx create mode 100644 packages/native-ui/src/components/FormField/styled-components/Valid.tsx create mode 100644 packages/native-ui/src/components/FormField/styled-components/ValidIcon.tsx create mode 100644 packages/native-ui/src/components/FormField/styled-components/ValidText.tsx create mode 100644 packages/native-ui/src/config/theme/FormFieldHelperIcon.ts create mode 100644 packages/native-ui/src/config/theme/FormFieldInvalid.ts rename packages/native-ui/src/config/theme/{FormFieldErrorIcon.ts => FormFieldInvalidIcon.ts} (72%) rename packages/native-ui/src/config/theme/{FormFieldErrorText.ts => FormFieldInvalidText.ts} (56%) rename packages/native-ui/src/config/theme/{FormFieldError.ts => FormFieldValid.ts} (77%) create mode 100644 packages/native-ui/src/config/theme/FormFieldValidIcon.ts create mode 100644 packages/native-ui/src/config/theme/FormFieldValidText.ts diff --git a/apps/native-ui-storybook/components/FormField/FormField.tsx b/apps/native-ui-storybook/components/FormField/FormField.tsx index 43748be1e..fb81b8f60 100644 --- a/apps/native-ui-storybook/components/FormField/FormField.tsx +++ b/apps/native-ui-storybook/components/FormField/FormField.tsx @@ -5,19 +5,18 @@ import { InputIcon, InputSlot, FormField, - FormFieldError, - FormFieldErrorIcon, - FormFieldErrorText, FormFieldHelper, FormFieldHelperText, FormFieldLabel, FormFieldLabelText, + FormFieldInvalidIcon, + FormFieldInvalid, + FormFieldInvalidText, + FormFieldValidIcon, + FormFieldValid, + FormFieldValidText, } from '@utilitywarehouse/native-ui'; -import { - WarningSmallContainedIcon, - EmailMediumIcon, - EyeMediumIcon, -} from '@utilitywarehouse/react-native-icons'; +import { EmailMediumIcon, EyeMediumIcon } from '@utilitywarehouse/react-native-icons'; import { Meta, StoryFn } from '@storybook/react'; const InputBasic: StoryFn = ({ @@ -29,11 +28,11 @@ const InputBasic: StoryFn = ({ ...props }: any) => { return ( - + Label - + {_showIconLeft && ( @@ -49,10 +48,14 @@ const InputBasic: StoryFn = ({ Helper text - - - Error text - + + + Invalid form field text + + + + Valid form field text + ); }; diff --git a/packages/native-ui/src/components/FormField/FormField.tsx b/packages/native-ui/src/components/FormField/FormField.tsx new file mode 100644 index 000000000..f1bc5427b --- /dev/null +++ b/packages/native-ui/src/components/FormField/FormField.tsx @@ -0,0 +1,52 @@ +import React, { createContext, useContext, FC, useMemo } from 'react'; +import { createFormControl } from '@gluestack-ui/form-control'; +import { + Root, + Error, + ErrorText, + ErrorIcon, + Label, + LabelText, + LabelAstrick, + Helper, + HelperText, +} from './styled-components'; + +export const FormField = createFormControl({ + Root, + Error, + ErrorText, + ErrorIcon, + Label, + LabelText, + LabelAstrick, + Helper, + HelperText, +}); + +export type FormFieldProps = React.ComponentProps; + +interface FormFieldContextType { + validationStatus: 'valid' | 'invalid' | 'initial'; +} + +const FormFieldContext = createContext(undefined); + +const FormFieldProvider: FC = ({ children, ...props }) => { + const value = useMemo( + () => ({ + validationStatus: props.validationStatus || 'initial', + }), + [props.validationStatus] + ); + + return ( + + {children} + + ); +}; + +const useFormFieldContext = (): FormFieldContextType | undefined => useContext(FormFieldContext); + +export { FormFieldProvider, useFormFieldContext }; diff --git a/packages/native-ui/src/components/FormField/FormFieldInvalid.tsx b/packages/native-ui/src/components/FormField/FormFieldInvalid.tsx new file mode 100644 index 000000000..2af0c5d4e --- /dev/null +++ b/packages/native-ui/src/components/FormField/FormFieldInvalid.tsx @@ -0,0 +1,10 @@ +import React, { FC, PropsWithChildren } from 'react'; +import Invalid from './styled-components/Invalid'; +import { useFormFieldContext } from './FormField'; + +const FormFieldInvalid: FC = ({ children }) => { + const formFieldContext = useFormFieldContext(); + return formFieldContext?.validationStatus === 'invalid' ? {children} : null; +}; + +export default FormFieldInvalid; diff --git a/packages/native-ui/src/components/FormField/FormFieldValid.tsx b/packages/native-ui/src/components/FormField/FormFieldValid.tsx new file mode 100644 index 000000000..1ba5a9140 --- /dev/null +++ b/packages/native-ui/src/components/FormField/FormFieldValid.tsx @@ -0,0 +1,10 @@ +import React, { FC, PropsWithChildren } from 'react'; +import Valid from './styled-components/Valid'; +import { useFormFieldContext } from './FormField'; + +const FormFieldValid: FC = ({ children }) => { + const formFieldContext = useFormFieldContext(); + return formFieldContext?.validationStatus === 'valid' ? {children} : null; +}; + +export default FormFieldValid; diff --git a/packages/native-ui/src/components/FormField/index.ts b/packages/native-ui/src/components/FormField/index.ts index b03cc36e2..b62d4cbe7 100644 --- a/packages/native-ui/src/components/FormField/index.ts +++ b/packages/native-ui/src/components/FormField/index.ts @@ -1,28 +1,15 @@ -import { createFormControl } from '@gluestack-ui/form-control'; -import { - Root, - Error, - ErrorText, - ErrorIcon, - Label, - LabelText, - LabelAstrick, - Helper, - HelperText, +import { FormField } from './FormField'; +export { FormFieldProvider as FormField, useFormFieldContext } from './FormField'; +export { default as FormFieldValid } from './FormFieldValid'; +export { default as FormFieldInvalid } from './FormFieldInvalid'; +export { + HelperIcon as FormFieldHelperIcon, + ValidIcon as FormFieldValidIcon, + ValidText as FormFieldValidText, + InvalidIcon as FormFieldInvalidIcon, + InvalidText as FormFieldInvalidText, } from './styled-components'; -export const FormField = createFormControl({ - Root, - Error, - ErrorText, - ErrorIcon, - Label, - LabelText, - LabelAstrick, - Helper, - HelperText, -}); - export const FormFieldError = FormField.Error; export const FormFieldErrorText = FormField.Error.Text; export const FormFieldErrorIcon = FormField.Error.Icon; diff --git a/packages/native-ui/src/components/FormField/styled-components/HelperIcon.tsx b/packages/native-ui/src/components/FormField/styled-components/HelperIcon.tsx new file mode 100644 index 000000000..6441216f6 --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/HelperIcon.tsx @@ -0,0 +1,16 @@ +import { styled } from '@gluestack-style/react'; +import { AsForwarder } from '@gluestack-ui/themed'; +import { InformationMediumContainedIcon } from '@utilitywarehouse/react-native-icons'; + +export default styled( + AsForwarder, + { + props: { + as: InformationMediumContainedIcon, + }, + }, + { + componentName: 'FormFieldHelperIcon', + ancestorStyle: ['_helperIcon'], + } as const +); diff --git a/packages/native-ui/src/components/FormField/styled-components/Invalid.tsx b/packages/native-ui/src/components/FormField/styled-components/Invalid.tsx new file mode 100644 index 000000000..7ecb79639 --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/Invalid.tsx @@ -0,0 +1,6 @@ +import { styled } from '@gluestack-style/react'; +import { View } from 'react-native'; + +export default styled(View, {}, { + componentName: 'FormFieldInvalid', +} as const); diff --git a/packages/native-ui/src/components/FormField/styled-components/InvalidIcon.tsx b/packages/native-ui/src/components/FormField/styled-components/InvalidIcon.tsx new file mode 100644 index 000000000..bc8db2df1 --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/InvalidIcon.tsx @@ -0,0 +1,16 @@ +import { styled } from '@gluestack-style/react'; +import { AsForwarder } from '@gluestack-ui/themed'; +import { WarningMediumContainedIcon } from '@utilitywarehouse/react-native-icons'; + +export default styled( + AsForwarder, + { + props: { + as: WarningMediumContainedIcon, + }, + }, + { + componentName: 'FormFieldInvalidIcon', + ancestorStyle: ['_invalidIcon'], + } as const +); diff --git a/packages/native-ui/src/components/FormField/styled-components/InvalidText.tsx b/packages/native-ui/src/components/FormField/styled-components/InvalidText.tsx new file mode 100644 index 000000000..61e0db90f --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/InvalidText.tsx @@ -0,0 +1,7 @@ +import { styled } from '@gluestack-style/react'; +import { Text } from 'react-native'; + +export default styled(Text, {}, { + componentName: 'FormFieldInvalidText', + ancestorStyle: ['_invalidText'], +} as const); diff --git a/packages/native-ui/src/components/FormField/styled-components/Root.tsx b/packages/native-ui/src/components/FormField/styled-components/Root.tsx index b956a2a88..dab5c2448 100644 --- a/packages/native-ui/src/components/FormField/styled-components/Root.tsx +++ b/packages/native-ui/src/components/FormField/styled-components/Root.tsx @@ -6,9 +6,13 @@ export default styled(View, {}, { descendantStyle: [ '_labelText', '_helperText', + '_helperIcon', '_errorText', '_labelAstrick', - '_validationText', + '_invalidText', + '_validText', + '_invalidIcon', + '_validIcon', '_input', ], } as const); diff --git a/packages/native-ui/src/components/FormField/styled-components/Valid.tsx b/packages/native-ui/src/components/FormField/styled-components/Valid.tsx new file mode 100644 index 000000000..f76ee4e75 --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/Valid.tsx @@ -0,0 +1,6 @@ +import { styled } from '@gluestack-style/react'; +import { View } from 'react-native'; + +export default styled(View, {}, { + componentName: 'FormFieldValid', +} as const); diff --git a/packages/native-ui/src/components/FormField/styled-components/ValidIcon.tsx b/packages/native-ui/src/components/FormField/styled-components/ValidIcon.tsx new file mode 100644 index 000000000..efe2306d6 --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/ValidIcon.tsx @@ -0,0 +1,16 @@ +import { styled } from '@gluestack-style/react'; +import { AsForwarder } from '@gluestack-ui/themed'; +import { TickMediumContainedIcon } from '@utilitywarehouse/react-native-icons'; + +export default styled( + AsForwarder, + { + props: { + as: TickMediumContainedIcon, + }, + }, + { + componentName: 'FormFieldValidIcon', + ancestorStyle: ['_validIcon'], + } as const +); diff --git a/packages/native-ui/src/components/FormField/styled-components/ValidText.tsx b/packages/native-ui/src/components/FormField/styled-components/ValidText.tsx new file mode 100644 index 000000000..8db69dc93 --- /dev/null +++ b/packages/native-ui/src/components/FormField/styled-components/ValidText.tsx @@ -0,0 +1,7 @@ +import { styled } from '@gluestack-style/react'; +import { Text } from 'react-native'; + +export default styled(Text, {}, { + componentName: 'FormFieldValidText', + ancestorStyle: ['_validText'], +} as const); diff --git a/packages/native-ui/src/components/FormField/styled-components/index.tsx b/packages/native-ui/src/components/FormField/styled-components/index.tsx index d915beef7..43fb9d06c 100644 --- a/packages/native-ui/src/components/FormField/styled-components/index.tsx +++ b/packages/native-ui/src/components/FormField/styled-components/index.tsx @@ -6,4 +6,11 @@ export { default as Label } from './Label'; export { default as LabelText } from './LabelText'; export { default as LabelAstrick } from './LabelAstrick'; export { default as Helper } from './Helper'; +export { default as HelperIcon } from './HelperIcon'; export { default as HelperText } from './HelperText'; +export { default as Invalid } from './Invalid'; +export { default as InvalidIcon } from './InvalidIcon'; +export { default as InvalidText } from './InvalidText'; +export { default as Valid } from './Valid'; +export { default as ValidIcon } from './ValidIcon'; +export { default as ValidText } from './ValidText'; diff --git a/packages/native-ui/src/components/Input/Input.tsx b/packages/native-ui/src/components/Input/Input.tsx index bc38d63e8..59f630aaa 100644 --- a/packages/native-ui/src/components/Input/Input.tsx +++ b/packages/native-ui/src/components/Input/Input.tsx @@ -7,6 +7,7 @@ import { TickMediumContainedIcon, } from '@utilitywarehouse/react-native-icons'; import { InputValidationIcon } from './styled-components'; +import { useFormFieldContext } from '../FormField'; // TODO: remove once upgraded to typescript 5.5 // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -28,11 +29,13 @@ const Input: React.FC = ({ isDisabled, ...props }) => { + const formFieldContext = useFormFieldContext(); + const validationStatusFromContext = formFieldContext?.validationStatus; return ( = ({ } > {children} - {showValidationIcon && validationStatus === 'invalid' && ( + {showValidationIcon && (validationStatusFromContext || validationStatus) === 'invalid' && ( )} - {showValidationIcon && validationStatus === 'valid' && ( + {showValidationIcon && (validationStatusFromContext || validationStatus) === 'valid' && ( diff --git a/packages/native-ui/src/config/theme/FormField.ts b/packages/native-ui/src/config/theme/FormField.ts index 18778152c..54eb8e2b7 100644 --- a/packages/native-ui/src/config/theme/FormField.ts +++ b/packages/native-ui/src/config/theme/FormField.ts @@ -4,35 +4,41 @@ export const FormField = createStyle({ flexDirection: 'column', gap: '$2', + ':disabled': { + _labelText: { + color: '$grey400', + }, + + _helperText: { + color: '$grey400', + }, + + _helperIcon: { + color: '$grey400', + }, + + _invalidText: { + color: '$grey400', + }, + + _validText: { + color: '$grey400', + }, + + _invalidIcon: { + color: '$grey400', + }, + + _validIcon: { + color: '$grey400', + }, + }, + variants: { validationStatus: { initial: {}, - valid: { - _labelText: { - color: '$green500', - }, - - _input: {}, - }, - invalid: { - _labelText: { - color: '$red500', - }, - - _input: { - props: { - validationStatus: 'invalid', - }, - }, - - ':focus': { - _input: { - props: { - validationStatus: 'invalid', - }, - }, - }, - }, + valid: {}, + invalid: {}, }, }, diff --git a/packages/native-ui/src/config/theme/FormFieldHelperIcon.ts b/packages/native-ui/src/config/theme/FormFieldHelperIcon.ts new file mode 100644 index 000000000..6f648ed11 --- /dev/null +++ b/packages/native-ui/src/config/theme/FormFieldHelperIcon.ts @@ -0,0 +1,9 @@ +import { createStyle } from '@gluestack-style/react'; + +export const FormFieldHelperIcon = createStyle({ + color: '$grey800', + _dark: { + color: '$darkGrey800', + }, + props: {}, +}); diff --git a/packages/native-ui/src/config/theme/FormFieldHelperText.ts b/packages/native-ui/src/config/theme/FormFieldHelperText.ts index 6ec30bdf3..0a2c51a3d 100644 --- a/packages/native-ui/src/config/theme/FormFieldHelperText.ts +++ b/packages/native-ui/src/config/theme/FormFieldHelperText.ts @@ -2,7 +2,7 @@ import { createStyle } from '@gluestack-style/react'; export const FormFieldHelperText = createStyle({ color: '$grey800', - fontSize: '$sm', + fontSize: '$md', _dark: { color: '$darkGrey800', }, diff --git a/packages/native-ui/src/config/theme/FormFieldInvalid.ts b/packages/native-ui/src/config/theme/FormFieldInvalid.ts new file mode 100644 index 000000000..e3e74702b --- /dev/null +++ b/packages/native-ui/src/config/theme/FormFieldInvalid.ts @@ -0,0 +1,8 @@ +import { createStyle } from '@gluestack-style/react'; + +export const FormFieldInvalid = createStyle({ + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'center', + gap: '$2', +}); diff --git a/packages/native-ui/src/config/theme/FormFieldErrorIcon.ts b/packages/native-ui/src/config/theme/FormFieldInvalidIcon.ts similarity index 72% rename from packages/native-ui/src/config/theme/FormFieldErrorIcon.ts rename to packages/native-ui/src/config/theme/FormFieldInvalidIcon.ts index 2f5252667..2fcaf013f 100644 --- a/packages/native-ui/src/config/theme/FormFieldErrorIcon.ts +++ b/packages/native-ui/src/config/theme/FormFieldInvalidIcon.ts @@ -1,6 +1,6 @@ import { createStyle } from '@gluestack-style/react'; -export const FormFieldErrorIcon = createStyle({ +export const FormFieldInvalidIcon = createStyle({ color: '$red500', _dark: { color: '$darkRed700', diff --git a/packages/native-ui/src/config/theme/FormFieldErrorText.ts b/packages/native-ui/src/config/theme/FormFieldInvalidText.ts similarity index 56% rename from packages/native-ui/src/config/theme/FormFieldErrorText.ts rename to packages/native-ui/src/config/theme/FormFieldInvalidText.ts index 7d7c2b9b3..16723f144 100644 --- a/packages/native-ui/src/config/theme/FormFieldErrorText.ts +++ b/packages/native-ui/src/config/theme/FormFieldInvalidText.ts @@ -1,6 +1,8 @@ import { createStyle } from '@gluestack-style/react'; -export const FormFieldErrorText = createStyle({ +export const FormFieldInvalidText = createStyle({ + fontFamily: '$body', + fontSize: '$md', color: '$red500', _dark: { color: '$darkRed700', diff --git a/packages/native-ui/src/config/theme/FormFieldError.ts b/packages/native-ui/src/config/theme/FormFieldValid.ts similarity index 77% rename from packages/native-ui/src/config/theme/FormFieldError.ts rename to packages/native-ui/src/config/theme/FormFieldValid.ts index 2fb37d27c..cec00304e 100644 --- a/packages/native-ui/src/config/theme/FormFieldError.ts +++ b/packages/native-ui/src/config/theme/FormFieldValid.ts @@ -1,6 +1,6 @@ import { createStyle } from '@gluestack-style/react'; -export const FormFieldError = createStyle({ +export const FormFieldValid = createStyle({ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', diff --git a/packages/native-ui/src/config/theme/FormFieldValidIcon.ts b/packages/native-ui/src/config/theme/FormFieldValidIcon.ts new file mode 100644 index 000000000..5c8b78490 --- /dev/null +++ b/packages/native-ui/src/config/theme/FormFieldValidIcon.ts @@ -0,0 +1,8 @@ +import { createStyle } from '@gluestack-style/react'; + +export const FormFieldValidIcon = createStyle({ + color: '$green500', + _dark: { + color: '$darkGreen700', + }, +}); diff --git a/packages/native-ui/src/config/theme/FormFieldValidText.ts b/packages/native-ui/src/config/theme/FormFieldValidText.ts new file mode 100644 index 000000000..1b4b45eac --- /dev/null +++ b/packages/native-ui/src/config/theme/FormFieldValidText.ts @@ -0,0 +1,10 @@ +import { createStyle } from '@gluestack-style/react'; + +export const FormFieldValidText = createStyle({ + fontFamily: '$body', + fontSize: '$md', + color: '$green500', + _dark: { + color: '$darkGreen700', + }, +}); diff --git a/packages/native-ui/src/config/theme/Input.ts b/packages/native-ui/src/config/theme/Input.ts index b00f0a7ac..6e4a9d027 100644 --- a/packages/native-ui/src/config/theme/Input.ts +++ b/packages/native-ui/src/config/theme/Input.ts @@ -40,6 +40,11 @@ export const Input = createStyle({ _input: { color: '$grey400', + + _validationIcon: { + color: '$grey400', + }, + props: { placeholderTextColor: '$grey400', }, diff --git a/packages/native-ui/src/config/theme/index.ts b/packages/native-ui/src/config/theme/index.ts index e58f822d6..8da61a47a 100644 --- a/packages/native-ui/src/config/theme/index.ts +++ b/packages/native-ui/src/config/theme/index.ts @@ -57,10 +57,14 @@ export * from './CheckboxLabel'; // export * from './FabLabel'; // export * from './FlatList'; export * from './FormField'; -export * from './FormFieldError'; -export * from './FormFieldErrorIcon'; -export * from './FormFieldErrorText'; +export * from './FormFieldInvalid'; +export * from './FormFieldInvalidIcon'; +export * from './FormFieldInvalidText'; +export * from './FormFieldValid'; +export * from './FormFieldValidIcon'; +export * from './FormFieldValidText'; export * from './FormFieldHelper'; +export * from './FormFieldHelperIcon'; export * from './FormFieldHelperText'; export * from './FormFieldLabel'; export * from './FormFieldLabelText'; From 4c76a79c310dc7e649f2c2a17e2d7f11733a6864 Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Tue, 11 Jun 2024 16:24:51 +0100 Subject: [PATCH 19/45] fix: disabled styles --- .../components/FormField/FormFieldInvalid.tsx | 2 +- .../native-ui/src/components/Input/index.ts | 6 +++++ packages/native-ui/src/config/theme/Input.ts | 24 +++++++++++++++++++ 3 files changed, 31 insertions(+), 1 deletion(-) diff --git a/packages/native-ui/src/components/FormField/FormFieldInvalid.tsx b/packages/native-ui/src/components/FormField/FormFieldInvalid.tsx index 2af0c5d4e..e46f4af14 100644 --- a/packages/native-ui/src/components/FormField/FormFieldInvalid.tsx +++ b/packages/native-ui/src/components/FormField/FormFieldInvalid.tsx @@ -4,7 +4,7 @@ import { useFormFieldContext } from './FormField'; const FormFieldInvalid: FC = ({ children }) => { const formFieldContext = useFormFieldContext(); - return formFieldContext?.validationStatus === 'invalid' ? {children} : null; + return formFieldContext?.validationStatus === 'invalid' ? {children} : null; }; export default FormFieldInvalid; diff --git a/packages/native-ui/src/components/Input/index.ts b/packages/native-ui/src/components/Input/index.ts index 58ae994d7..bd9cb18e5 100644 --- a/packages/native-ui/src/components/Input/index.ts +++ b/packages/native-ui/src/components/Input/index.ts @@ -2,7 +2,13 @@ export { default as Input } from './Input'; import { AccessibleInput } from './Input'; import ValidationIcon from './styled-components/ValidationIcon'; +// TODO: remove once upgraded to typescript 5.5 +// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment export const InputIcon = AccessibleInput.Icon; +// TODO: remove once upgraded to typescript 5.5 +// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment export const InputSlot = AccessibleInput.Slot; +// TODO: remove once upgraded to typescript 5.5 +// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment export const InputField = AccessibleInput.Input; export const InputValidationIcon = ValidationIcon; diff --git a/packages/native-ui/src/config/theme/Input.ts b/packages/native-ui/src/config/theme/Input.ts index 6e4a9d027..a25a93358 100644 --- a/packages/native-ui/src/config/theme/Input.ts +++ b/packages/native-ui/src/config/theme/Input.ts @@ -110,6 +110,12 @@ export const Input = createStyle({ borderBottomColor: '$green500', }, + ':disabled': { + _validationIcon: { + color: '$grey400', + }, + }, + _dark: { borderBottomColor: '$darkGreen700', @@ -121,6 +127,12 @@ export const Input = createStyle({ borderColor: '$darkGreen700', borderBottomColor: '$darkGreen700', }, + + ':disabled': { + _validationIcon: { + color: '$darkGrey400', + }, + }, }, }, invalid: { @@ -135,6 +147,12 @@ export const Input = createStyle({ borderBottomColor: '$red500', }, + ':disabled': { + _validationIcon: { + color: '$grey400', + }, + }, + _dark: { borderBottomColor: '$darkRed700', @@ -146,6 +164,12 @@ export const Input = createStyle({ borderColor: '$darkRed700', borderBottomColor: '$darkRed700', }, + + ':disabled': { + _validationIcon: { + color: '$darkGrey400', + }, + }, }, }, }, From 1b5cafd6ffad5f4a58de960da7f0ad2e7b341a5e Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Wed, 12 Jun 2024 12:03:54 +0100 Subject: [PATCH 20/45] fix: dark mode disabled styles --- .../src/components/FormField/FormField.tsx | 71 ++++++++++++++++++- .../native-ui/src/config/theme/FormField.ts | 32 +++++++++ packages/native-ui/src/config/theme/Input.ts | 28 +++++++- 3 files changed, 128 insertions(+), 3 deletions(-) diff --git a/packages/native-ui/src/components/FormField/FormField.tsx b/packages/native-ui/src/components/FormField/FormField.tsx index f1bc5427b..9f3518810 100644 --- a/packages/native-ui/src/components/FormField/FormField.tsx +++ b/packages/native-ui/src/components/FormField/FormField.tsx @@ -11,6 +11,7 @@ import { Helper, HelperText, } from './styled-components'; +import { useColorMode } from '@gluestack-style/react'; export const FormField = createFormControl({ Root, @@ -33,6 +34,7 @@ interface FormFieldContextType { const FormFieldContext = createContext(undefined); const FormFieldProvider: FC = ({ children, ...props }) => { + const colorMode = useColorMode(); const value = useMemo( () => ({ validationStatus: props.validationStatus || 'initial', @@ -42,7 +44,74 @@ const FormFieldProvider: FC = ({ children, ...props }) => { return ( - {children} + + {children} + ); }; diff --git a/packages/native-ui/src/config/theme/FormField.ts b/packages/native-ui/src/config/theme/FormField.ts index 54eb8e2b7..a81908c3d 100644 --- a/packages/native-ui/src/config/theme/FormField.ts +++ b/packages/native-ui/src/config/theme/FormField.ts @@ -32,6 +32,38 @@ export const FormField = createStyle({ _validIcon: { color: '$grey400', }, + + _dark: { + ':disabled': { + _labelText: { + color: '$darkGrey400', + }, + + _helperText: { + color: '$darkGrey400', + }, + + _helperIcon: { + color: '$darkGrey400', + }, + + _invalidText: { + color: '$darkGrey400', + }, + + _validText: { + color: '$darkGrey400', + }, + + _invalidIcon: { + color: '$darkGrey400', + }, + + _validIcon: { + color: '$darkGrey400', + }, + }, + }, }, variants: { diff --git a/packages/native-ui/src/config/theme/Input.ts b/packages/native-ui/src/config/theme/Input.ts index a25a93358..04c8bdb01 100644 --- a/packages/native-ui/src/config/theme/Input.ts +++ b/packages/native-ui/src/config/theme/Input.ts @@ -30,7 +30,9 @@ export const Input = createStyle({ }, ':disabled': { - borderColor: '$grey400', + borderTopColor: '$grey400', + borderLeftColor: '$grey400', + borderRightColor: '$grey400', borderBottomColor: '$grey600', backgroundColor: '$grey50', @@ -74,7 +76,9 @@ export const Input = createStyle({ }, ':disabled': { - borderColor: '$darkGrey400', + borderTopColor: '$darkGrey400', + borderLeftColor: '$darkGrey400', + borderRightColor: '$darkGrey400', borderBottomColor: '$darkGrey600', backgroundColor: '$darkGrey50', @@ -111,6 +115,11 @@ export const Input = createStyle({ }, ':disabled': { + borderTopColor: '$grey400', + borderLeftColor: '$grey400', + borderRightColor: '$grey400', + borderBottomColor: '$grey600', + _validationIcon: { color: '$grey400', }, @@ -129,6 +138,11 @@ export const Input = createStyle({ }, ':disabled': { + borderTopColor: '$darkGrey400', + borderLeftColor: '$darkGrey400', + borderRightColor: '$darkGrey400', + borderBottomColor: '$darkGrey600', + _validationIcon: { color: '$darkGrey400', }, @@ -148,6 +162,11 @@ export const Input = createStyle({ }, ':disabled': { + borderTopColor: '$grey400', + borderLeftColor: '$grey400', + borderRightColor: '$grey400', + borderBottomColor: '$grey600', + _validationIcon: { color: '$grey400', }, @@ -166,6 +185,11 @@ export const Input = createStyle({ }, ':disabled': { + borderTopColor: '$darkGrey400', + borderLeftColor: '$darkGrey400', + borderRightColor: '$darkGrey400', + borderBottomColor: '$darkGrey600', + _validationIcon: { color: '$darkGrey400', }, From 1263a8f5bc4126f23e7c6a7493f0e5f9761320bd Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Wed, 12 Jun 2024 17:07:01 +0100 Subject: [PATCH 21/45] fix: disabled styles --- .../src/components/FormField/FormField.tsx | 71 +------------------ .../native-ui/src/config/theme/FormField.ts | 71 +++++++++++++------ .../src/config/theme/FormFieldHelperText.ts | 4 -- .../src/config/theme/FormFieldLabelText.ts | 4 -- 4 files changed, 49 insertions(+), 101 deletions(-) diff --git a/packages/native-ui/src/components/FormField/FormField.tsx b/packages/native-ui/src/components/FormField/FormField.tsx index 9f3518810..f1bc5427b 100644 --- a/packages/native-ui/src/components/FormField/FormField.tsx +++ b/packages/native-ui/src/components/FormField/FormField.tsx @@ -11,7 +11,6 @@ import { Helper, HelperText, } from './styled-components'; -import { useColorMode } from '@gluestack-style/react'; export const FormField = createFormControl({ Root, @@ -34,7 +33,6 @@ interface FormFieldContextType { const FormFieldContext = createContext(undefined); const FormFieldProvider: FC = ({ children, ...props }) => { - const colorMode = useColorMode(); const value = useMemo( () => ({ validationStatus: props.validationStatus || 'initial', @@ -44,74 +42,7 @@ const FormFieldProvider: FC = ({ children, ...props }) => { return ( - - {children} - + {children} ); }; diff --git a/packages/native-ui/src/config/theme/FormField.ts b/packages/native-ui/src/config/theme/FormField.ts index a81908c3d..65acc3aed 100644 --- a/packages/native-ui/src/config/theme/FormField.ts +++ b/packages/native-ui/src/config/theme/FormField.ts @@ -4,6 +4,14 @@ export const FormField = createStyle({ flexDirection: 'column', gap: '$2', + _labelText: { + color: '$grey1000', + }, + + _helperText: { + color: '$grey800', + }, + ':disabled': { _labelText: { color: '$grey400', @@ -32,36 +40,44 @@ export const FormField = createStyle({ _validIcon: { color: '$grey400', }, + }, - _dark: { - ':disabled': { - _labelText: { - color: '$darkGrey400', - }, + _dark: { + _labelText: { + color: '$darkGrey1000', + }, - _helperText: { - color: '$darkGrey400', - }, + _helperText: { + color: '$darkGrey800', + }, - _helperIcon: { - color: '$darkGrey400', - }, + ':disabled': { + _labelText: { + color: '$darkGrey400', + }, - _invalidText: { - color: '$darkGrey400', - }, + _helperText: { + color: '$darkGrey400', + }, - _validText: { - color: '$darkGrey400', - }, + _helperIcon: { + color: '$darkGrey400', + }, - _invalidIcon: { - color: '$darkGrey400', - }, + _invalidText: { + color: '$darkGrey400', + }, - _validIcon: { - color: '$darkGrey400', - }, + _validText: { + color: '$darkGrey400', + }, + + _invalidIcon: { + color: '$darkGrey400', + }, + + _validIcon: { + color: '$darkGrey400', }, }, }, @@ -72,6 +88,15 @@ export const FormField = createStyle({ valid: {}, invalid: {}, }, + isDisabled: { + true: { + backgroundColor: '$red100', + _labelText: { + color: '$grey400', + }, + }, + false: {}, + }, }, defaultProps: {}, diff --git a/packages/native-ui/src/config/theme/FormFieldHelperText.ts b/packages/native-ui/src/config/theme/FormFieldHelperText.ts index 0a2c51a3d..325e10f33 100644 --- a/packages/native-ui/src/config/theme/FormFieldHelperText.ts +++ b/packages/native-ui/src/config/theme/FormFieldHelperText.ts @@ -1,9 +1,5 @@ import { createStyle } from '@gluestack-style/react'; export const FormFieldHelperText = createStyle({ - color: '$grey800', fontSize: '$md', - _dark: { - color: '$darkGrey800', - }, }); diff --git a/packages/native-ui/src/config/theme/FormFieldLabelText.ts b/packages/native-ui/src/config/theme/FormFieldLabelText.ts index 1c8708b7c..51ee72b84 100644 --- a/packages/native-ui/src/config/theme/FormFieldLabelText.ts +++ b/packages/native-ui/src/config/theme/FormFieldLabelText.ts @@ -3,8 +3,4 @@ import { createStyle } from '@gluestack-style/react'; export const FormFieldLabelText = createStyle({ fontWeight: '$semibold', fontSize: '$md', - color: '$grey1000', - _dark: { - color: '$darkGrey1000', - }, }); From 10a2c9daba509dcfba7bdfa65d7e3299c489f26f Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Tue, 18 Jun 2024 14:23:38 +0100 Subject: [PATCH 22/45] chore: add form field docs --- .../.storybook/preview.tsx | 1 + .../components/FormField/Docs.mdx | 246 +++++++++++++++++- .../components/FormField/FormField.tsx | 59 +---- .../components/FormField/Variants.tsx | 183 +++++++------ 4 files changed, 356 insertions(+), 133 deletions(-) diff --git a/apps/native-ui-storybook/.storybook/preview.tsx b/apps/native-ui-storybook/.storybook/preview.tsx index 50d33eb13..e8ade89b0 100644 --- a/apps/native-ui-storybook/.storybook/preview.tsx +++ b/apps/native-ui-storybook/.storybook/preview.tsx @@ -143,6 +143,7 @@ const preview: Preview = { 'Box', 'Center', 'Checkbox', + 'Form Field', 'HStack', 'Icons', 'Input', diff --git a/apps/native-ui-storybook/components/FormField/Docs.mdx b/apps/native-ui-storybook/components/FormField/Docs.mdx index 0008ab69e..dd3d833b1 100644 --- a/apps/native-ui-storybook/components/FormField/Docs.mdx +++ b/apps/native-ui-storybook/components/FormField/Docs.mdx @@ -3,13 +3,255 @@ import * as FormFieldStories from './FormField.stories'; import { Input, InputField, - InputIcon, - InputSlot, + FormField, + FormFieldHelper, + FormFieldHelperText, + FormFieldLabel, + FormFieldLabelText, + FormFieldInvalidIcon, + FormFieldInvalid, + FormFieldInvalidText, + FormFieldValidIcon, + FormFieldValid, + FormFieldValidText, Center, NativeUIProvider, + RadioGroup, + Radio, + RadioIndicator, + RadioLabel, } from '@utilitywarehouse/native-ui'; import { EmailMediumIcon } from '@utilitywarehouse/react-native-icons'; # Form Field + +The `FormField` component is a container for form elements such as input fields. It provides a consistent layout and styling for form elements in which developers can provide important context to form elements. This context can include whether the element is invalid, disabled, or required. + +## Playground + + + + + +## Usage + +> This component should be wrapped in a `NativeUIProvider` component to ensure that the correct theme is applied. + + + +
+ + + Label + + console.log('###')}> + + + + Helper text + + +
+ + + +```tsx +import { + Input, + InputField, + FormField, + FormFieldHelper, + FormFieldHelperText, + FormFieldLabel, + FormFieldLabelText, +} from '@utilitywarehouse/native-ui'; + +const MyComponent = () => { + return ( + + + Label + + console.log('###')}> + + + + Helper text + + + ); +}; +``` + +### Validation Helper Text + +The `FormField` component can display helper text to provide additional context to the user. This text can be used to provide information about the field, such as the format of the input or the requirements for the field. + + + +
+ + + Label + + console.log('###')}> + + + + Helper text + + + + Invalid form field text + + + + Valid form field text + + +
+ + + +```tsx +import { + Input, + InputField, + FormField, + FormFieldHelper, + FormFieldHelperText, + FormFieldLabel, + FormFieldLabelText, + FormFieldInvalidIcon, + FormFieldInvalid, + FormFieldInvalidText, + FormFieldValidIcon, + FormFieldValid, + FormFieldValidText, +} from '@utilitywarehouse/native-ui'; + +const MyComponent = () => { + return ( + + + Label + + console.log('###')}> + + + + Helper text + + + + Invalid form field text + + + + Valid form field text + + + ); +}; +``` + +## Props + +| Name | Type | Default | Description | +| ------------------ | ---------------------------------- | ----------- | ----------------------------------- | +| `validationStatus` | `'initial' \| 'valid' \| 'invalid` | `'initial'` | The validation status of the field. | +| `isDisabled` | `boolean` | `false` | Whether the field is disabled. | + +### Descendants Styling Props + +Props to style child components. + +| Sx Prop | Description | +| -------------- | ---------------------------------- | +| `_labelText` | Prop to style FormFieldLabel | +| `_helperText` | Prop to style FormFieldHelperText | +| `_helperIcon` | Prop to style FormFieldHelperIcon | +| `_errorText` | Prop to style FormFieldErrorText | +| `_invalidText` | Prop to style FormFieldInvalidText | +| `_validText` | Prop to style FormFieldValidText | +| `_invalidIcon` | Prop to style FormFieldInvalidIcon | +| `_validIcon` | Prop to style FormFieldValidIcon | +| `_input` | Prop to style Input | + +## Examples + +### With RadioGroup + +The `FormField` component can be used to wrap a `RadioGroup` component to provide additional context to the user. + + + +
+ + + Favourite fruit + + + + + Mango + + + + Apple + + + + Orange + + + + Choose the fruit you like the most + + +
+ + + +```tsx +import { + RadioGroup, + Radio, + RadioIndicator, + RadioLabel, + FormField, + FormFieldHelper, + FormFieldHelperText, + FormFieldLabel, + FormFieldLabelText, +} from '@utilitywarehouse/native-ui'; + +const MyComponent = () => { + return ( + + + Favourite fruit + + + + + Mango + + + + Apple + + + + Orange + + + + Choose the fruit you like the most + + + ); +}; +``` diff --git a/apps/native-ui-storybook/components/FormField/FormField.tsx b/apps/native-ui-storybook/components/FormField/FormField.tsx index fb81b8f60..3b97a9727 100644 --- a/apps/native-ui-storybook/components/FormField/FormField.tsx +++ b/apps/native-ui-storybook/components/FormField/FormField.tsx @@ -2,8 +2,6 @@ import React from 'react'; import { Input, InputField, - InputIcon, - InputSlot, FormField, FormFieldHelper, FormFieldHelperText, @@ -16,15 +14,13 @@ import { FormFieldValid, FormFieldValidText, } from '@utilitywarehouse/native-ui'; -import { EmailMediumIcon, EyeMediumIcon } from '@utilitywarehouse/react-native-icons'; import { Meta, StoryFn } from '@storybook/react'; -const InputBasic: StoryFn = ({ +const FormFieldBasic: StoryFn = ({ placeholder, validationStatus, type, - _showIconLeft, - _showIconRight, + _showValidationIcon, ...props }: any) => { return ( @@ -33,34 +29,24 @@ const InputBasic: StoryFn = ({ Label - {_showIconLeft && ( - - - - )} - {_showIconRight && ( - - - - )} Helper text - + {_showValidationIcon && } Invalid form field text - + {_showValidationIcon && } Valid form field text ); }; -InputBasic.argTypes = { +FormFieldBasic.argTypes = { placeholder: { control: 'text', description: 'The Input field placeholder', @@ -78,9 +64,10 @@ InputBasic.argTypes = { description: 'The validation status of the Input component', defaultValue: 'initial', }, - showValidationIcon: { + _showValidationIcon: { control: 'boolean', - description: 'Show the validation icon', + description: + 'Show the validation icon. \n _Note: this is not a prop of the `FormField` component, just a representation of the `FormFieldInvalidIcon` and `FormFieldValidIcon` component for the Storybook playground._', defaultValue: true, }, isDisabled: { @@ -88,38 +75,14 @@ InputBasic.argTypes = { description: 'Disable the Input component', defaultValue: false, }, - isReadOnly: { - control: 'boolean', - description: 'Read only the Input component', - defaultValue: false, - }, - isFocused: { - control: 'boolean', - description: 'Focus the Input component', - defaultValue: false, - }, - _showIconLeft: { - control: 'boolean', - description: - 'Show icon left. \n _Note: this is not a prop of the `Input` component, just a representation of the `InputSlot` and `InputIcon` component for the Storybook playground._', - }, - _showIconRight: { - control: 'boolean', - description: - 'Show icon right. \n _Note: this is not a prop of the `Input` component, just a representation of the `InputSlot` and `InputIcon` component for the Storybook playground._', - }, } as Meta['argTypes']; -InputBasic.args = { +FormFieldBasic.args = { placeholder: 'Input placeholder', validationStatus: 'initial', - showValidationIcon: true, type: 'text', isDisabled: false, - isReadOnly: false, - isFocused: false, - _showIconLeft: false, - _showIconRight: false, + _showValidationIcon: true, } as Meta['args']; -export default InputBasic; +export default FormFieldBasic; diff --git a/apps/native-ui-storybook/components/FormField/Variants.tsx b/apps/native-ui-storybook/components/FormField/Variants.tsx index 8e5668d49..ea61916b8 100644 --- a/apps/native-ui-storybook/components/FormField/Variants.tsx +++ b/apps/native-ui-storybook/components/FormField/Variants.tsx @@ -3,8 +3,17 @@ import { Box, Input, InputField, - InputIcon, - InputSlot, + FormField, + FormFieldHelper, + FormFieldHelperText, + FormFieldLabel, + FormFieldLabelText, + FormFieldInvalidIcon, + FormFieldInvalid, + FormFieldInvalidText, + FormFieldValidIcon, + FormFieldValid, + FormFieldValidText, ScrollView, Text, } from '@utilitywarehouse/native-ui'; @@ -15,87 +24,95 @@ const InputVariants: StoryFn = () => { return ( - Defaut - - - - With icon - - - - - - - With placeholder - - - - - - - With value - - - - - - - Focused - - - - - - - Type password - - - - - - - Valid - - - - - - - Valid focused - - - - - - - Invalid - - - - - - - Invalid focused - - - - - - - Disabled - - - - - - - Readonly - - - - - - + + Defaut + + + + Label + + + + + + + With helper text bottom + + + + Label + + + + + + Helper text + + + + With helper text top + + + + Label + + + Helper text + + + + + + + Valid with valid text + + + + Label + + + Helper text + + + + + + + Valid form field text + + + + Invalid with invalid text + + + + Label + + + Helper text + + + + + + + Invalid form field text + + + + Disabled + + + + Label + + + + + + Helper text + + ); From 3021782a450ca1c117b8f0798155a5fc2bb02eda Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Tue, 18 Jun 2024 17:10:17 +0100 Subject: [PATCH 23/45] fix: dark mode validation colours --- .github/workflows/previews.yml | 2 +- packages/native-ui/src/config/theme/Input.ts | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/.github/workflows/previews.yml b/.github/workflows/previews.yml index fcb8deed7..944aa4938 100644 --- a/.github/workflows/previews.yml +++ b/.github/workflows/previews.yml @@ -157,7 +157,7 @@ jobs: - name: 🏗 Setup EAS uses: expo/expo-github-action@v8 with: - eas-version: '9.2.0' + eas-version: latest token: ${{ secrets.EXPO_TOKEN }} - name: 📦 Install dependencies diff --git a/packages/native-ui/src/config/theme/Input.ts b/packages/native-ui/src/config/theme/Input.ts index 04c8bdb01..755665526 100644 --- a/packages/native-ui/src/config/theme/Input.ts +++ b/packages/native-ui/src/config/theme/Input.ts @@ -66,7 +66,9 @@ export const Input = createStyle({ }, _dark: { - borderColor: '$darkGrey500', + borderTopColor: '$darkGrey500', + borderLeftColor: '$darkGrey500', + borderRightColor: '$darkGrey500', borderBottomColor: '$darkGrey900', backgroundColor: '$darkGrey25', From 657170165235ea758e8626861b7429e9ba45e798 Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Tue, 16 Jul 2024 15:00:09 +0100 Subject: [PATCH 24/45] chore: update form field docs --- .../{Docs.mdx => FormField.docs.mdx} | 89 ++++++++- .../components/FormField/Variants.tsx | 181 +++++++++--------- .../src/config/theme/CheckboxLabel.ts | 1 + .../native-ui/src/config/theme/RadioLabel.ts | 1 + 4 files changed, 175 insertions(+), 97 deletions(-) rename apps/native-ui-storybook/components/FormField/{Docs.mdx => FormField.docs.mdx} (75%) diff --git a/apps/native-ui-storybook/components/FormField/Docs.mdx b/apps/native-ui-storybook/components/FormField/FormField.docs.mdx similarity index 75% rename from apps/native-ui-storybook/components/FormField/Docs.mdx rename to apps/native-ui-storybook/components/FormField/FormField.docs.mdx index dd3d833b1..7f8f8406d 100644 --- a/apps/native-ui-storybook/components/FormField/Docs.mdx +++ b/apps/native-ui-storybook/components/FormField/FormField.docs.mdx @@ -1,5 +1,5 @@ import { Meta, Primary, Controls, Story, Canvas } from '@storybook/blocks'; -import * as FormFieldStories from './FormField.stories'; +import * as Stories from './FormField.stories'; import { Input, InputField, @@ -20,15 +20,33 @@ import { Radio, RadioIndicator, RadioLabel, + Checkbox, + CheckboxIndicator, + CheckboxLabel, + VStack, } from '@utilitywarehouse/native-ui'; import { EmailMediumIcon } from '@utilitywarehouse/react-native-icons'; +import { ViewFigmaButton, BackToTopButton } from '../../docs/components'; - + + + + + # Form Field The `FormField` component is a container for form elements such as input fields. It provides a consistent layout and styling for form elements in which developers can provide important context to form elements. This context can include whether the element is invalid, disabled, or required. +- [Playground](#playground) +- [Usage](#usage) + - [Validation Helper Text](#validation-helper-text) +- [Props](#props) +- [Variants](#variants) +- [Examples](#examples) + - [With RadioGroup](#with-radiogroup) + - [With Checkbox](#with-checkbox) + ## Playground @@ -164,7 +182,7 @@ const MyComponent = () => { | `validationStatus` | `'initial' \| 'valid' \| 'invalid` | `'initial'` | The validation status of the field. | | `isDisabled` | `boolean` | `false` | Whether the field is disabled. | -### Descendants Styling Props +#### Descendants Styling Props Props to style child components. @@ -180,6 +198,10 @@ Props to style child components. | `_validIcon` | Prop to style FormFieldValidIcon | | `_input` | Prop to style Input | +## Variants + + + ## Examples ### With RadioGroup @@ -255,3 +277,64 @@ const MyComponent = () => { ); }; ``` + +### With Checkbox + +The `FormField` component can be used to wrap a `Checkbox` component to provide additional context to the user. + + + +
+ + + + + I accept the terms and conditions + + Read and accept the terms and conditions + + + + Please check the box above + + + + +
+ + + +```tsx +import { + Checkbox, + CheckboxIndicator, + CheckboxLabel, + FormField, + FormFieldHelper, + FormFieldHelperText, + FormFieldInvalidIcon, + FormFieldInvalid, + FormFieldInvalidText, + VStack, +} from '@utilitywarehouse/native-ui'; + +const MyComponent = () => { + return ( + + + + + I accept the terms and conditions + + Read and accept the terms and conditions + + + + Please check the box above + + + + + ); +}; +``` diff --git a/apps/native-ui-storybook/components/FormField/Variants.tsx b/apps/native-ui-storybook/components/FormField/Variants.tsx index ea61916b8..5689cb6d6 100644 --- a/apps/native-ui-storybook/components/FormField/Variants.tsx +++ b/apps/native-ui-storybook/components/FormField/Variants.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { - Box, Input, InputField, FormField, @@ -15,105 +14,99 @@ import { FormFieldValid, FormFieldValidText, ScrollView, - Text, + VStack, } from '@utilitywarehouse/native-ui'; import { StoryFn } from '@storybook/react'; -import { EmailMediumIcon } from '@utilitywarehouse/react-native-icons'; +import { VariantTitle } from '../../docs/components'; const InputVariants: StoryFn = () => { return ( - - - Defaut - - - - Label - - - - - - - With helper text bottom - - - - Label - - - - - - Helper text - - - - With helper text top - - - - Label - - - Helper text - - - - - - - Valid with valid text - - - - Label - - - Helper text - - - - - - - Valid form field text - - - - Invalid with invalid text - - - - Label - - - Helper text - - - - - - - Invalid form field text - - - - Disabled - - - - Label - - - - - - Helper text - - - + + + + + Label + + + + + + + + + + Label + + + + + + Helper text + + + + + + + Label + + + Helper text + + + + + + + + + + Label + + + Helper text + + + + + + + Valid form field text + + + + + + + Label + + + Helper text + + + + + + + Invalid form field text + + + + + + + Label + + + + + + Helper text + + + + ); }; diff --git a/packages/native-ui/src/config/theme/CheckboxLabel.ts b/packages/native-ui/src/config/theme/CheckboxLabel.ts index c24184d5f..515e8ed8f 100644 --- a/packages/native-ui/src/config/theme/CheckboxLabel.ts +++ b/packages/native-ui/src/config/theme/CheckboxLabel.ts @@ -3,6 +3,7 @@ import { createStyle } from '@gluestack-style/react'; export const CheckboxLabel = createStyle({ color: '$grey1000', lineHeight: 24, + fontWeight: '$semibold', ':checked': { color: '$grey1000', ':disabled': { diff --git a/packages/native-ui/src/config/theme/RadioLabel.ts b/packages/native-ui/src/config/theme/RadioLabel.ts index 481b43d3a..ac15f39a9 100644 --- a/packages/native-ui/src/config/theme/RadioLabel.ts +++ b/packages/native-ui/src/config/theme/RadioLabel.ts @@ -3,6 +3,7 @@ import { createStyle } from '@gluestack-style/react'; export const RadioLabel = createStyle({ color: '$grey1000', lineHeight: 24, + fontWeight: '$semibold', ':checked': { color: '$grey1000', ':disabled': { From 71e9a9ee1c0129f7b40513dbe2e36827a4096d38 Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Tue, 16 Jul 2024 15:18:36 +0100 Subject: [PATCH 25/45] chore: update input docs --- .../Input/{Docs.mdx => Input.docs.mdx} | 35 +++- .../components/Input/Variants.tsx | 182 ++++++++++-------- 2 files changed, 125 insertions(+), 92 deletions(-) rename apps/native-ui-storybook/components/Input/{Docs.mdx => Input.docs.mdx} (88%) diff --git a/apps/native-ui-storybook/components/Input/Docs.mdx b/apps/native-ui-storybook/components/Input/Input.docs.mdx similarity index 88% rename from apps/native-ui-storybook/components/Input/Docs.mdx rename to apps/native-ui-storybook/components/Input/Input.docs.mdx index 68c7e1487..190e159f5 100644 --- a/apps/native-ui-storybook/components/Input/Docs.mdx +++ b/apps/native-ui-storybook/components/Input/Input.docs.mdx @@ -1,5 +1,5 @@ import { Meta, Primary, Controls, Story, Canvas } from '@storybook/blocks'; -import * as BadgeStories from './Input.stories'; +import * as Stories from './Input.stories'; import { Input, InputField, @@ -9,13 +9,28 @@ import { NativeUIProvider, } from '@utilitywarehouse/native-ui'; import { EmailMediumIcon } from '@utilitywarehouse/react-native-icons'; +import { ViewFigmaButton, BackToTopButton } from '../../docs/components'; - + + + + + # Input The input component is a text field that allows users to enter text, numbers, or other data. It is commonly used in forms and search fields. +- [Playground](#playground) +- [Usage](#usage) +- [Props](#props) + - [`Input`](#input) + - [`InputField`](#inputfield) + - [`InputIcon`](#inputicon) + - [`InputSlot`](#inputslot) +- [Variants](#variants) +- [Accessibility](#accessibility) + ## Playground @@ -61,7 +76,7 @@ const MyComponent = () => { ## Props -### Input +### `Input` | Prop | Type | Default | Description | | ------------------ | ---------------------------------- | ----------- | ------------------------------------ | @@ -71,7 +86,7 @@ const MyComponent = () => { | isReadOnly | boolean | false | Makes the input read-only. | | isFocused | boolean | false | Sets focus on the input. | -### Descendants Styling Props +#### Descendants Styling Props Props to style child components. @@ -81,7 +96,7 @@ Props to style child components. | \_icon | Prop to style InputIcon | | \_validationIcon | Prop to style InputValidationIcon | -### InputField +### `InputField` | Prop | Type | Default | Description | | ----------- | ---------------------- | -------- | ----------------------------------------------------------------- | @@ -92,18 +107,24 @@ Props to style child components. | placeholder | string | | The placeholder text for the input. | | type | `'text' \| 'password'` | `'text'` | The type of the input. | -### InputIcon +### `InputIcon` | Prop | Type | Default | Description | | ---- | ------ | ------- | ------------------- | | as | string | | The icon component. | -### InputSlot +### `InputSlot` | Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | - | - | - | - | +## Variants + +The `Input` component has the following variants: + + + ## Accessibility We have outlined the various features that ensure the Input component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.Adheres to the [WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-1.2/#textbox). diff --git a/apps/native-ui-storybook/components/Input/Variants.tsx b/apps/native-ui-storybook/components/Input/Variants.tsx index 8e5668d49..db46a18cf 100644 --- a/apps/native-ui-storybook/components/Input/Variants.tsx +++ b/apps/native-ui-storybook/components/Input/Variants.tsx @@ -1,102 +1,114 @@ import React from 'react'; import { - Box, Input, InputField, InputIcon, InputSlot, ScrollView, - Text, + VStack, } from '@utilitywarehouse/native-ui'; import { StoryFn } from '@storybook/react'; import { EmailMediumIcon } from '@utilitywarehouse/react-native-icons'; +import { VariantTitle } from '../../docs/components'; const InputVariants: StoryFn = () => { return ( - - Defaut - - - - With icon - - - - - - - With placeholder - - - - - - - With value - - - - - - - Focused - - - - - - - Type password - - - - - - - Valid - - - - - - - Valid focused - - - - - - - Invalid - - - - - - - Invalid focused - - - - - - - Disabled - - - - - - - Readonly - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); }; From 625ef6adeb2cb9112cfefe473c9b6c70aef1b509 Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Wed, 16 Oct 2024 16:13:30 +0100 Subject: [PATCH 26/45] feat: add input root --- .../components/Checkbox/Checkbox.docs.mdx | 14 +- .../components/Input/Input.docs.mdx | 4 +- .../components/Input/Input.tsx | 8 +- .../components/Input/Variants.tsx | 4 +- .../docs/deprecated/unstyled.mdx | 4 +- packages/native-ui/package.json | 1 + .../src/components/Input/Input.context.ts | 6 + .../src/components/Input/Input.props.ts | 12 +- .../native-ui/src/components/Input/Input.tsx | 62 +++------ .../src/components/Input/InputField.tsx | 0 .../src/components/Input/InputIcon.tsx | 0 .../src/components/Input/InputRoot.tsx | 128 ++++++++++++++++++ .../src/components/Input/InputSlot.tsx | 22 +++ .../components/Input/InputValidationIcon.tsx | 0 pnpm-lock.yaml | 11 +- 15 files changed, 209 insertions(+), 67 deletions(-) create mode 100644 packages/native-ui/src/components/Input/Input.context.ts create mode 100644 packages/native-ui/src/components/Input/InputField.tsx create mode 100644 packages/native-ui/src/components/Input/InputIcon.tsx create mode 100644 packages/native-ui/src/components/Input/InputRoot.tsx create mode 100644 packages/native-ui/src/components/Input/InputSlot.tsx create mode 100644 packages/native-ui/src/components/Input/InputValidationIcon.tsx diff --git a/apps/native-ui-storybook/components/Checkbox/Checkbox.docs.mdx b/apps/native-ui-storybook/components/Checkbox/Checkbox.docs.mdx index ac1cb5f43..bbbd14500 100644 --- a/apps/native-ui-storybook/components/Checkbox/Checkbox.docs.mdx +++ b/apps/native-ui-storybook/components/Checkbox/Checkbox.docs.mdx @@ -197,13 +197,13 @@ const MyComponent = () => { }; ``` -| Property | Type | Default | Description | -| ------------ | --------------------------------- | ------- | ---------------------------------------------------------------------- | -| `value` | `string[]` | - | The value of the checkbox group. | -| `onChange` | `(values: Array) => void` | - | The callback fired when any children Checkbox is checked or unchecked. | -| `disabled` | `bool` | `false` | To manually set disable to the checkbox. | -| `isInvalid` | `bool` | `false` | To manually set invalid to the checkbox. | -| `isReadOnly` | `bool` | `false` | To manually set read-only to the checkbox. | +| Property | Type | Default | Description | +| ----------- | --------------------------------- | ------- | ---------------------------------------------------------------------- | +| `value` | `string[]` | - | The value of the checkbox group. | +| `onChange` | `(values: Array) => void` | - | The callback fired when any children Checkbox is checked or unchecked. | +| `disabled` | `bool` | `false` | To manually set disable to the checkbox. | +| `isInvalid` | `bool` | `false` | To manually set invalid to the checkbox. | +| `readonly` | `bool` | `false` | To manually set read-only to the checkbox. | ## Variants diff --git a/apps/native-ui-storybook/components/Input/Input.docs.mdx b/apps/native-ui-storybook/components/Input/Input.docs.mdx index 190e159f5..aa69698ed 100644 --- a/apps/native-ui-storybook/components/Input/Input.docs.mdx +++ b/apps/native-ui-storybook/components/Input/Input.docs.mdx @@ -82,8 +82,8 @@ const MyComponent = () => { | ------------------ | ---------------------------------- | ----------- | ------------------------------------ | | validationStatus | `'initial' \| 'valid' \| 'invalid` | `'initial'` | The validation status of the input. | | showValidationIcon | boolean | false | Whether to show the validation icon. | -| isDisabled | boolean | false | Disables the input. | -| isReadOnly | boolean | false | Makes the input read-only. | +| disabled | boolean | false | Disables the input. | +| readonly | boolean | false | Makes the input read-only. | | isFocused | boolean | false | Sets focus on the input. | #### Descendants Styling Props diff --git a/apps/native-ui-storybook/components/Input/Input.tsx b/apps/native-ui-storybook/components/Input/Input.tsx index 7332c25ed..b970dbd8d 100644 --- a/apps/native-ui-storybook/components/Input/Input.tsx +++ b/apps/native-ui-storybook/components/Input/Input.tsx @@ -51,12 +51,12 @@ InputBasic.argTypes = { description: 'Show the validation icon', defaultValue: true, }, - isDisabled: { + disabled: { control: 'boolean', description: 'Disable the Input component', defaultValue: false, }, - isReadOnly: { + readonly: { control: 'boolean', description: 'Read only the Input component', defaultValue: false, @@ -83,8 +83,8 @@ InputBasic.args = { validationStatus: 'initial', showValidationIcon: true, type: 'text', - isDisabled: false, - isReadOnly: false, + disabled: false, + readonly: false, isFocused: false, _showIconLeft: false, _showIconRight: false, diff --git a/apps/native-ui-storybook/components/Input/Variants.tsx b/apps/native-ui-storybook/components/Input/Variants.tsx index db46a18cf..b7824860c 100644 --- a/apps/native-ui-storybook/components/Input/Variants.tsx +++ b/apps/native-ui-storybook/components/Input/Variants.tsx @@ -93,7 +93,7 @@ const InputVariants: StoryFn = () => { - + @@ -101,7 +101,7 @@ const InputVariants: StoryFn = () => { - + diff --git a/apps/native-ui-storybook/docs/deprecated/unstyled.mdx b/apps/native-ui-storybook/docs/deprecated/unstyled.mdx index 11918503d..16e46b9a6 100644 --- a/apps/native-ui-storybook/docs/deprecated/unstyled.mdx +++ b/apps/native-ui-storybook/docs/deprecated/unstyled.mdx @@ -64,7 +64,7 @@ on the `gluestack-ui` documentation, see a full list below. variant="filled" type="multiple" isCollapsible={true} - isDisabled={false} + disabled={false} > @@ -150,7 +150,7 @@ const MyAccordion = () => ( variant="filled" type="multiple" isCollapsible={true} - isDisabled={false} + disabled={false} > diff --git a/packages/native-ui/package.json b/packages/native-ui/package.json index cd71d8e1f..307444c0c 100644 --- a/packages/native-ui/package.json +++ b/packages/native-ui/package.json @@ -28,6 +28,7 @@ "@gluestack-ui/button": "^1.0.7", "@gluestack-ui/checkbox": "^0.1.32", "@gluestack-ui/icon": "^0.1.22", + "@gluestack-ui/input": "^0.1.31", "@gluestack-ui/radio": "^0.1.33", "@gluestack-ui/spinner": "^0.1.14", "@gluestack-ui/themed": "1.1.53", diff --git a/packages/native-ui/src/components/Input/Input.context.ts b/packages/native-ui/src/components/Input/Input.context.ts new file mode 100644 index 000000000..997c0fbb4 --- /dev/null +++ b/packages/native-ui/src/components/Input/Input.context.ts @@ -0,0 +1,6 @@ +import { createContext, useContext } from 'react'; +import { InputContextValue } from './Input.props'; + +export const InputContext = createContext({}); + +export const useInputContext = () => useContext(InputContext); diff --git a/packages/native-ui/src/components/Input/Input.props.ts b/packages/native-ui/src/components/Input/Input.props.ts index 1a6cd0e42..24604f8d6 100644 --- a/packages/native-ui/src/components/Input/Input.props.ts +++ b/packages/native-ui/src/components/Input/Input.props.ts @@ -1,7 +1,6 @@ -import type { Input } from '@gluestack-ui/themed'; -import type { ComponentProps } from 'react'; +import type { ViewProps } from 'react-native'; -export interface InputComponentProps extends ComponentProps {} +export interface InputComponentProps extends ViewProps {} /** * Props for the Input component. @@ -26,7 +25,7 @@ interface InputProps extends Omit { * * ``` */ - disabled?: InputComponentProps['isDisabled']; + disabled?: boolean; /** * The validation status of the Input component. * @@ -37,6 +36,11 @@ interface InputProps extends Omit { * ``` */ validationStatus?: 'initial' | 'valid' | 'invalid'; + readonly?: boolean; + focused?: boolean; } +export interface InputContextValue + extends Pick {} + export default InputProps; diff --git a/packages/native-ui/src/components/Input/Input.tsx b/packages/native-ui/src/components/Input/Input.tsx index bc38d63e8..37ac6c415 100644 --- a/packages/native-ui/src/components/Input/Input.tsx +++ b/packages/native-ui/src/components/Input/Input.tsx @@ -1,77 +1,55 @@ import React from 'react'; import { createInput } from '@gluestack-ui/input'; -import { Icon, Slot, Root, StyledInput } from './styled-components'; +import { Icon, Slot, StyledInput } from './styled-components'; import type InputProps from './Input.props'; import { WarningMediumContainedIcon, TickMediumContainedIcon, } from '@utilitywarehouse/react-native-icons'; import { InputValidationIcon } from './styled-components'; +import InputRoot from './InputRoot'; +import InputSlotComponent from './InputSlot'; -// TODO: remove once upgraded to typescript 5.5 -// eslint-disable-next-line @typescript-eslint/no-explicit-any -export const AccessibleInput: any = createInput({ +export const InputComponent = createInput({ Icon, - // TODO: remove once upgraded to typescript 5.5 - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment - Slot, - Root, + Slot: InputSlotComponent, + Root: InputRoot, Input: StyledInput, }); +export const InputSlot = InputComponent.Slot; + const Input: React.FC = ({ validationStatus, showValidationIcon = true, children, disabled, - isReadOnly, - isDisabled, + focused, + readonly, ...props }) => { return ( - {children} {showValidationIcon && validationStatus === 'invalid' && ( - + - + )} {showValidationIcon && validationStatus === 'valid' && ( - + - + )} - + ); }; diff --git a/packages/native-ui/src/components/Input/InputField.tsx b/packages/native-ui/src/components/Input/InputField.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/packages/native-ui/src/components/Input/InputIcon.tsx b/packages/native-ui/src/components/Input/InputIcon.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/packages/native-ui/src/components/Input/InputRoot.tsx b/packages/native-ui/src/components/Input/InputRoot.tsx new file mode 100644 index 000000000..1452e2247 --- /dev/null +++ b/packages/native-ui/src/components/Input/InputRoot.tsx @@ -0,0 +1,128 @@ +import React, { forwardRef, useMemo } from 'react'; +import { createStyleSheet, useStyles } from 'react-native-unistyles'; +import { View } from 'react-native'; +import InputProps from './Input.props'; +import { InputContext } from './Input.context'; + +const InputRoot = forwardRef< + View, + InputProps & { states: { focus?: boolean; disabled?: boolean; readonly?: boolean } } +>(({ children, style, states, validationStatus, showValidationIcon, ...props }, ref) => { + const { focus = false, disabled = false, readonly = false } = states || {}; + const { styles } = useStyles(stylesheet, { + focus, + disabled, + readonly, + validationStatus, + }); + + const value = useMemo( + () => ({ focused: focus, disabled, readonly, validationStatus, showValidationIcon }), + [focus, disabled, readonly, validationStatus, showValidationIcon] + ); + + return ( + + + {children} + + + ); +}); + +InputRoot.displayName = 'InputRoot'; + +const stylesheet = createStyleSheet(({ space, colors, radii, colorMode, borderWidths }) => ({ + container: { + borderWidth: borderWidths[2], + borderTopColor: colors.grey500, + borderLeftColor: colors.grey500, + borderRightColor: colors.grey500, + borderBottomColor: colors.grey900, + height: space['14'], + borderTopLeftRadius: radii['2xl'], + borderTopRightRadius: radii['2xl'], + borderBottomLeftRadius: radii.none, + borderBottomRightRadius: radii.none, + flexDirection: 'row', + overflow: 'hidden', + alignContent: 'center', + paddingHorizontal: space['4'], + backgroundColor: colorMode === 'light' ? colors.white : colors.grey25, + gap: space['2'], + variants: { + focus: { + true: { + borderTopColor: colorMode === 'light' ? colors.cyan500 : colors.cyan700, + borderLeftColor: colorMode === 'light' ? colors.cyan500 : colors.cyan700, + borderRightColor: colorMode === 'light' ? colors.cyan500 : colors.cyan700, + borderBottomColor: colorMode === 'light' ? colors.cyan500 : colors.cyan700, + }, + }, + validationStatus: { + invalid: { + borderBottomColor: colorMode === 'light' ? colors.red500 : colors.red700, + }, + valid: { + borderBottomColor: colorMode === 'light' ? colors.green500 : colors.green700, + }, + initial: {}, + }, + disabled: { + true: { + borderTopColor: colors.grey400, + borderLeftColor: colors.grey400, + borderRightColor: colors.grey400, + borderBottomColor: colors.grey600, + backgroundColor: colors.grey50, + }, + }, + readonly: { + true: { + borderTopColor: 'transparent', + borderLeftColor: 'transparent', + borderRightColor: 'transparent', + borderBottomColor: 'transparent', + paddingHorizontal: 0, + }, + }, + }, + }, + extraStyles: ( + validationStatus: InputProps['validationStatus'], + focus: boolean, + disabled: boolean, + readonly: boolean + ) => { + if (disabled || readonly) { + return {}; + } + if (validationStatus === 'invalid' && focus) { + return { + borderTopColor: colorMode === 'light' ? colors.red500 : colors.red700, + borderLeftColor: colorMode === 'light' ? colors.red500 : colors.red700, + borderRightColor: colorMode === 'light' ? colors.red500 : colors.red700, + borderBottomColor: colorMode === 'light' ? colors.red500 : colors.red700, + }; + } + if (validationStatus === 'valid' && focus) { + return { + borderTopColor: colorMode === 'light' ? colors.green500 : colors.green700, + borderLeftColor: colorMode === 'light' ? colors.green500 : colors.green700, + borderRightColor: colorMode === 'light' ? colors.green500 : colors.green700, + borderBottomColor: colorMode === 'light' ? colors.green500 : colors.green700, + }; + } + return {}; + }, +})); + +export default InputRoot; diff --git a/packages/native-ui/src/components/Input/InputSlot.tsx b/packages/native-ui/src/components/Input/InputSlot.tsx new file mode 100644 index 000000000..1160e92de --- /dev/null +++ b/packages/native-ui/src/components/Input/InputSlot.tsx @@ -0,0 +1,22 @@ +import React, { forwardRef } from 'react'; +import { createStyleSheet } from 'react-native-unistyles'; +import { View, ViewProps } from 'react-native'; + +const InputSlot = forwardRef(({ children, style, ...props }, ref) => { + return ( + + {children} + + ); +}); + +InputSlot.displayName = 'InputSlot'; + +const stylesheet = createStyleSheet({ + container: { + justifyContent: 'center', + alignItems: 'center', + }, +}); + +export default InputSlot; diff --git a/packages/native-ui/src/components/Input/InputValidationIcon.tsx b/packages/native-ui/src/components/Input/InputValidationIcon.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e4b51baae..7e570c766 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -389,6 +389,9 @@ importers: '@gluestack-ui/icon': specifier: ^0.1.22 version: 0.1.22(react-dom@18.2.0)(react-native@0.74.5)(react@18.2.0) + '@gluestack-ui/input': + specifier: ^0.1.31 + version: 0.1.31(react-dom@18.2.0)(react-native@0.74.5)(react@18.2.0) '@gluestack-ui/radio': specifier: ^0.1.33 version: 0.1.33(react-dom@18.2.0)(react-native@0.74.5)(react@18.2.0) @@ -8914,7 +8917,7 @@ packages: dependencies: '@react-aria/focus': 3.18.2(react@18.2.0) react: 18.2.0 - react-native: 0.74.5(@babel/core@7.25.2)(@types/react@18.2.79)(react@18.2.0) + react-native: 0.74.5(@babel/preset-env@7.24.8)(@types/react@18.2.79)(react@18.2.0) dev: false /@react-native-aria/interactions@0.2.13(react-native@0.74.5)(react@18.2.0): @@ -8927,7 +8930,7 @@ packages: '@react-aria/utils': 3.25.2(react@18.2.0) '@react-native-aria/utils': 0.2.11(react-native@0.74.5)(react@18.2.0) react: 18.2.0 - react-native: 0.74.5(@babel/core@7.25.2)(@types/react@18.2.79)(react@18.2.0) + react-native: 0.74.5(@babel/preset-env@7.24.8)(@types/react@18.2.79)(react@18.2.0) dev: false /@react-native-aria/menu@0.2.12(react-dom@18.2.0)(react-native@0.74.5)(react@18.2.0): @@ -9029,7 +9032,7 @@ packages: '@react-aria/ssr': 3.9.5(react@18.2.0) '@react-aria/utils': 3.25.2(react@18.2.0) react: 18.2.0 - react-native: 0.74.5(@babel/core@7.25.2)(@types/react@18.2.79)(react@18.2.0) + react-native: 0.74.5(@babel/preset-env@7.24.8)(@types/react@18.2.79)(react@18.2.0) dev: false /@react-native-async-storage/async-storage@1.23.1(react-native@0.74.5): @@ -9537,7 +9540,7 @@ packages: invariant: 2.2.4 nullthrows: 1.1.1 react: 18.2.0 - react-native: 0.74.5(@babel/core@7.25.2)(@types/react@18.2.79)(react@18.2.0) + react-native: 0.74.5(@babel/preset-env@7.24.8)(@types/react@18.2.79)(react@18.2.0) /@react-stately/calendar@3.4.4(react@18.2.0): resolution: {integrity: sha512-f9ZOd096gGGD+3LmU1gkmfqytGyQtrgi+Qjn+70GbM2Jy65pwOR4I9YrobbmeAFov5Tff13mQEa0yqWvbcDLZQ==} From 81ada7b480332f1b64d30b74158878a6ff414c14 Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Thu, 17 Oct 2024 14:00:21 +0100 Subject: [PATCH 27/45] refactor: `Input` component styles --- .../.storybook/preview-head.html | 4 ++ .../components/Input/Input.docs.mdx | 2 +- .../components/Input/Input.tsx | 4 +- .../components/Input/Variants.tsx | 6 +- .../src/components/Input/Input.props.ts | 5 +- .../native-ui/src/components/Input/Input.tsx | 28 ++++---- .../src/components/Input/InputField.tsx | 52 +++++++++++++++ .../src/components/Input/InputIcon.tsx | 49 ++++++++++++++ .../src/components/Input/InputRoot.tsx | 5 +- .../components/Input/InputValidationIcon.tsx | 64 +++++++++++++++++++ .../native-ui/src/components/Input/index.ts | 10 +-- .../Input/styled-components/Icon.tsx | 7 -- .../Input/styled-components/Input.tsx | 17 ----- .../Input/styled-components/Root.tsx | 8 --- .../Input/styled-components/Slot.tsx | 14 ---- .../styled-components/ValidationIcon.tsx | 9 --- .../Input/styled-components/index.ts | 5 -- .../components/List/ListItem/ListItemIcon.tsx | 24 +++---- packages/native-ui/src/components/index.ts | 2 - 19 files changed, 204 insertions(+), 111 deletions(-) delete mode 100644 packages/native-ui/src/components/Input/styled-components/Icon.tsx delete mode 100644 packages/native-ui/src/components/Input/styled-components/Input.tsx delete mode 100644 packages/native-ui/src/components/Input/styled-components/Root.tsx delete mode 100644 packages/native-ui/src/components/Input/styled-components/Slot.tsx delete mode 100644 packages/native-ui/src/components/Input/styled-components/ValidationIcon.tsx delete mode 100644 packages/native-ui/src/components/Input/styled-components/index.ts diff --git a/apps/native-ui-storybook/.storybook/preview-head.html b/apps/native-ui-storybook/.storybook/preview-head.html index 8f5f58546..adc916da4 100644 --- a/apps/native-ui-storybook/.storybook/preview-head.html +++ b/apps/native-ui-storybook/.storybook/preview-head.html @@ -11,4 +11,8 @@ #appetize-iframe { padding: 20px; } + input:focus-visible { + outline: none; + box-shadow: 0; + } diff --git a/apps/native-ui-storybook/components/Input/Input.docs.mdx b/apps/native-ui-storybook/components/Input/Input.docs.mdx index aa69698ed..5bf64ad0d 100644 --- a/apps/native-ui-storybook/components/Input/Input.docs.mdx +++ b/apps/native-ui-storybook/components/Input/Input.docs.mdx @@ -84,7 +84,7 @@ const MyComponent = () => { | showValidationIcon | boolean | false | Whether to show the validation icon. | | disabled | boolean | false | Disables the input. | | readonly | boolean | false | Makes the input read-only. | -| isFocused | boolean | false | Sets focus on the input. | +| focused | boolean | false | Sets focus on the input. | #### Descendants Styling Props diff --git a/apps/native-ui-storybook/components/Input/Input.tsx b/apps/native-ui-storybook/components/Input/Input.tsx index b970dbd8d..15207c4dc 100644 --- a/apps/native-ui-storybook/components/Input/Input.tsx +++ b/apps/native-ui-storybook/components/Input/Input.tsx @@ -61,7 +61,7 @@ InputBasic.argTypes = { description: 'Read only the Input component', defaultValue: false, }, - isFocused: { + focused: { control: 'boolean', description: 'Focus the Input component', defaultValue: false, @@ -85,7 +85,7 @@ InputBasic.args = { type: 'text', disabled: false, readonly: false, - isFocused: false, + focused: false, _showIconLeft: false, _showIconRight: false, } as Meta['args']; diff --git a/apps/native-ui-storybook/components/Input/Variants.tsx b/apps/native-ui-storybook/components/Input/Variants.tsx index b7824860c..442e9399b 100644 --- a/apps/native-ui-storybook/components/Input/Variants.tsx +++ b/apps/native-ui-storybook/components/Input/Variants.tsx @@ -45,7 +45,7 @@ const InputVariants: StoryFn = () => { - + @@ -69,7 +69,7 @@ const InputVariants: StoryFn = () => { - + @@ -85,7 +85,7 @@ const InputVariants: StoryFn = () => { - + diff --git a/packages/native-ui/src/components/Input/Input.props.ts b/packages/native-ui/src/components/Input/Input.props.ts index 24604f8d6..20a7be6fe 100644 --- a/packages/native-ui/src/components/Input/Input.props.ts +++ b/packages/native-ui/src/components/Input/Input.props.ts @@ -41,6 +41,9 @@ interface InputProps extends Omit { } export interface InputContextValue - extends Pick {} + extends Pick< + InputProps, + 'validationStatus' | 'showValidationIcon' | 'disabled' | 'readonly' | 'focused' + > {} export default InputProps; diff --git a/packages/native-ui/src/components/Input/Input.tsx b/packages/native-ui/src/components/Input/Input.tsx index 37ac6c415..31508d8a7 100644 --- a/packages/native-ui/src/components/Input/Input.tsx +++ b/packages/native-ui/src/components/Input/Input.tsx @@ -1,26 +1,26 @@ import React from 'react'; import { createInput } from '@gluestack-ui/input'; -import { Icon, Slot, StyledInput } from './styled-components'; import type InputProps from './Input.props'; -import { - WarningMediumContainedIcon, - TickMediumContainedIcon, -} from '@utilitywarehouse/react-native-icons'; -import { InputValidationIcon } from './styled-components'; + import InputRoot from './InputRoot'; import InputSlotComponent from './InputSlot'; +import InputIconComponent from './InputIcon'; +import InputFieldComponent from './InputField'; +import InputValidationIcon from './InputValidationIcon'; export const InputComponent = createInput({ - Icon, + Icon: InputIconComponent, Slot: InputSlotComponent, Root: InputRoot, - Input: StyledInput, + Input: InputFieldComponent, }); export const InputSlot = InputComponent.Slot; +export const InputField = InputComponent.Input; +export const InputIcon = InputComponent.Icon; const Input: React.FC = ({ - validationStatus, + validationStatus = 'initial', showValidationIcon = true, children, disabled, @@ -36,17 +36,11 @@ const Input: React.FC = ({ isReadOnly={readonly} isDisabled={disabled} isFocused={focused} - states={{}} > {children} - {showValidationIcon && validationStatus === 'invalid' && ( - - - - )} - {showValidationIcon && validationStatus === 'valid' && ( + {showValidationIcon && validationStatus !== 'initial' && ( - + )} diff --git a/packages/native-ui/src/components/Input/InputField.tsx b/packages/native-ui/src/components/Input/InputField.tsx index e69de29bb..ab45fa3fd 100644 --- a/packages/native-ui/src/components/Input/InputField.tsx +++ b/packages/native-ui/src/components/Input/InputField.tsx @@ -0,0 +1,52 @@ +import React, { ElementRef, forwardRef } from 'react'; +import { createStyleSheet, useStyles } from 'react-native-unistyles'; +import { TextInputProps, TextInput, Platform } from 'react-native'; +import { useInputContext } from './Input.context'; + +const InputField = forwardRef, TextInputProps>( + ({ children, style, ...props }, ref) => { + const { disabled, focused = false } = useInputContext(); + const { + styles, + theme: { colors }, + } = useStyles(stylesheet, { focused }); + + return ( + + ); + } +); + +InputField.displayName = 'InputField'; + +const stylesheet = createStyleSheet(({ radii, fontSizes, colors, fontWeights, fonts }) => ({ + input: { + flex: 1, + borderTopLeftRadius: radii['2xl'], + borderTopRightRadius: radii['2xl'], + borderBottomLeftRadius: radii.none, + borderBottomRightRadius: radii.none, + color: colors.grey1000, + fontSize: fontSizes.lg, + fontFamily: fonts.body, + fontWeight: fontWeights.normal, + outline: 'none', + variants: { + focused: { + true: { + borderWidth: 0, + }, + }, + }, + }, +})); + +export default InputField; diff --git a/packages/native-ui/src/components/Input/InputIcon.tsx b/packages/native-ui/src/components/Input/InputIcon.tsx index e69de29bb..58ce54943 100644 --- a/packages/native-ui/src/components/Input/InputIcon.tsx +++ b/packages/native-ui/src/components/Input/InputIcon.tsx @@ -0,0 +1,49 @@ +/* eslint-disable @typescript-eslint/no-unsafe-assignment */ +import React, { ComponentProps, ComponentType, forwardRef } from 'react'; +import { Platform, type StyleProp, type ViewStyle } from 'react-native'; +import { createStyleSheet, useStyles } from 'react-native-unistyles'; +import { useInputContext } from './Input.context'; +import { Icon } from '../Icon'; +import type { SvgRef } from '../../../types'; + +const InputIcon = forwardRef & { as?: ComponentType }>( + ({ children, ...props }, ref) => { + const { disabled } = useInputContext(); + const { styles } = useStyles(stylesheet, { disabled }); + return ( + , props.style] + } + > + {children} + + ); + } +); + +InputIcon.displayName = 'InputIcon'; + +const stylesheet = createStyleSheet(({ colors }) => ({ + icon: { + color: colors.grey700, + width: 24, + height: 24, + variants: { + disabled: { + true: { + color: colors.grey400, + }, + }, + }, + }, +})); + +export default InputIcon; diff --git a/packages/native-ui/src/components/Input/InputRoot.tsx b/packages/native-ui/src/components/Input/InputRoot.tsx index 1452e2247..4a0157db1 100644 --- a/packages/native-ui/src/components/Input/InputRoot.tsx +++ b/packages/native-ui/src/components/Input/InputRoot.tsx @@ -6,7 +6,7 @@ import { InputContext } from './Input.context'; const InputRoot = forwardRef< View, - InputProps & { states: { focus?: boolean; disabled?: boolean; readonly?: boolean } } + InputProps & { states?: { focus?: boolean; disabled?: boolean; readonly?: boolean } } >(({ children, style, states, validationStatus, showValidationIcon, ...props }, ref) => { const { focus = false, disabled = false, readonly = false } = states || {}; const { styles } = useStyles(stylesheet, { @@ -56,7 +56,7 @@ const stylesheet = createStyleSheet(({ space, colors, radii, colorMode, borderWi overflow: 'hidden', alignContent: 'center', paddingHorizontal: space['4'], - backgroundColor: colorMode === 'light' ? colors.white : colors.grey25, + backgroundColor: colorMode === 'light' ? colors.white : colors.grey100, gap: space['2'], variants: { focus: { @@ -92,6 +92,7 @@ const stylesheet = createStyleSheet(({ space, colors, radii, colorMode, borderWi borderRightColor: 'transparent', borderBottomColor: 'transparent', paddingHorizontal: 0, + backgroundColor: 'transparent', }, }, }, diff --git a/packages/native-ui/src/components/Input/InputValidationIcon.tsx b/packages/native-ui/src/components/Input/InputValidationIcon.tsx index e69de29bb..475020013 100644 --- a/packages/native-ui/src/components/Input/InputValidationIcon.tsx +++ b/packages/native-ui/src/components/Input/InputValidationIcon.tsx @@ -0,0 +1,64 @@ +/* eslint-disable @typescript-eslint/no-unsafe-assignment */ +import React, { ComponentProps, ComponentType, forwardRef } from 'react'; +import { Platform, type StyleProp, type ViewStyle } from 'react-native'; +import { createStyleSheet, useStyles } from 'react-native-unistyles'; +import { useInputContext } from './Input.context'; +import { Icon } from '../Icon'; +import type { SvgRef } from '../../../types'; +import { + WarningMediumContainedIcon, + TickMediumContainedIcon, +} from '@utilitywarehouse/react-native-icons'; + +const InputIcon = forwardRef & { as?: ComponentType }>( + ({ as, ...props }, ref) => { + const { disabled, validationStatus } = useInputContext(); + const { styles } = useStyles(stylesheet, { disabled, validationStatus }); + const ValidationIcon = + validationStatus === 'invalid' ? WarningMediumContainedIcon : TickMediumContainedIcon; + return ( + , props.style] + } + /> + ); + } +); + +InputIcon.displayName = 'InputIcon'; + +const stylesheet = createStyleSheet(({ colors, space, colorMode }) => ({ + icon: { + color: colors.grey700, + width: 24, + height: 24, + paddingLeft: space[2], + variants: { + validationStatus: { + invalid: { + color: colorMode === 'light' ? colors.red500 : colors.red700, + }, + valid: { + color: colorMode === 'light' ? colors.green500 : colors.green700, + }, + initial: {}, + }, + disabled: { + true: { + color: colors.grey400, + }, + }, + }, + }, +})); + +export default InputIcon; diff --git a/packages/native-ui/src/components/Input/index.ts b/packages/native-ui/src/components/Input/index.ts index 58ae994d7..2f50bf0ce 100644 --- a/packages/native-ui/src/components/Input/index.ts +++ b/packages/native-ui/src/components/Input/index.ts @@ -1,8 +1,2 @@ -export { default as Input } from './Input'; -import { AccessibleInput } from './Input'; -import ValidationIcon from './styled-components/ValidationIcon'; - -export const InputIcon = AccessibleInput.Icon; -export const InputSlot = AccessibleInput.Slot; -export const InputField = AccessibleInput.Input; -export const InputValidationIcon = ValidationIcon; +export { default as Input, InputField, InputIcon, InputSlot } from './Input'; +export { default as InputValidationIcon } from './InputValidationIcon'; diff --git a/packages/native-ui/src/components/Input/styled-components/Icon.tsx b/packages/native-ui/src/components/Input/styled-components/Icon.tsx deleted file mode 100644 index 1317f5dd2..000000000 --- a/packages/native-ui/src/components/Input/styled-components/Icon.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { styled } from '@gluestack-style/react'; -import { AsForwarder } from '@gluestack-ui/themed'; - -export default styled(AsForwarder, {}, { - componentName: 'InputIcon', - ancestorStyle: ['_icon'], -} as const); diff --git a/packages/native-ui/src/components/Input/styled-components/Input.tsx b/packages/native-ui/src/components/Input/styled-components/Input.tsx deleted file mode 100644 index e8f8d6c17..000000000 --- a/packages/native-ui/src/components/Input/styled-components/Input.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { styled } from '@gluestack-style/react'; -import { TextInput } from 'react-native'; - -export default styled( - TextInput, - {}, - { - componentName: 'InputField', - ancestorStyle: ['_inputField'], - resolveProps: ['placeholderTextColor'], - } as const, - { - propertyTokenMap: { - placeholderTextColor: 'colors', - }, - } -); diff --git a/packages/native-ui/src/components/Input/styled-components/Root.tsx b/packages/native-ui/src/components/Input/styled-components/Root.tsx deleted file mode 100644 index 5e2bdec8c..000000000 --- a/packages/native-ui/src/components/Input/styled-components/Root.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { styled } from '@gluestack-style/react'; -import { View } from 'react-native'; - -export default styled(View, {}, { - componentName: 'Input', - ancestorStyle: ['_input'], - descendantStyle: ['_inputField', '_icon'], -} as const); diff --git a/packages/native-ui/src/components/Input/styled-components/Slot.tsx b/packages/native-ui/src/components/Input/styled-components/Slot.tsx deleted file mode 100644 index 2387184f9..000000000 --- a/packages/native-ui/src/components/Input/styled-components/Slot.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { styled } from '@gluestack-style/react'; -import { Pressable } from 'react-native'; - -export default styled( - Pressable, - {}, - { - componentName: 'InputSlot', - ancestorStyle: ['_slot'], - descendantStyle: ['_icon'], - } - // TODO: remove once upgraded to typescript 5.5 - // eslint-disable-next-line @typescript-eslint/no-explicit-any -) as any; diff --git a/packages/native-ui/src/components/Input/styled-components/ValidationIcon.tsx b/packages/native-ui/src/components/Input/styled-components/ValidationIcon.tsx deleted file mode 100644 index 9c05a7e38..000000000 --- a/packages/native-ui/src/components/Input/styled-components/ValidationIcon.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { styled, AsForwarder } from '@gluestack-ui/themed'; - -const ValidationIcon = styled(AsForwarder, {}, { - componentName: 'InputValidationIcon', - descendantStyle: [], - ancestorStyle: ['_validationIcon'], -} as const); - -export default ValidationIcon; diff --git a/packages/native-ui/src/components/Input/styled-components/index.ts b/packages/native-ui/src/components/Input/styled-components/index.ts deleted file mode 100644 index 39888004f..000000000 --- a/packages/native-ui/src/components/Input/styled-components/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export { default as InputValidationIcon } from './ValidationIcon'; -export { default as Root } from './Root'; -export { default as Icon } from './Icon'; -export { default as Slot } from './Slot'; -export { default as StyledInput } from './Input'; diff --git a/packages/native-ui/src/components/List/ListItem/ListItemIcon.tsx b/packages/native-ui/src/components/List/ListItem/ListItemIcon.tsx index f63a56ae8..f454e9d01 100644 --- a/packages/native-ui/src/components/List/ListItem/ListItemIcon.tsx +++ b/packages/native-ui/src/components/List/ListItem/ListItemIcon.tsx @@ -9,7 +9,7 @@ import type { SvgRef } from '../../../types'; const ListItemIcon = forwardRef & { as?: ComponentType }>( ({ children, ...props }, ref) => { const { disabled } = useListItemContext(); - const { styles } = useStyles(stylesheet); + const { styles } = useStyles(stylesheet, { disabled }); return ( & { as?: Com Platform.OS === 'web' ? { ...styles.icon, - ...styles.extraStyles(disabled), ...(props.style as ViewStyle), } - : [ - styles.icon as StyleProp, - styles.extraStyles(disabled) as StyleProp, - props.style, - ] + : [styles.icon as StyleProp, props.style] } > {children} @@ -41,14 +36,13 @@ const stylesheet = createStyleSheet(({ colors, colorMode }) => ({ color: colors.grey800, width: 24, height: 24, - }, - extraStyles: disabled => { - if (disabled) { - return { - color: colorMode === 'light' ? colors.grey400 : colors.grey500, - }; - } - return {}; + variants: { + disabled: { + true: { + color: colorMode === 'light' ? colors.grey400 : colors.grey500, + }, + }, + }, }, })); diff --git a/packages/native-ui/src/components/index.ts b/packages/native-ui/src/components/index.ts index 9e45612d9..a18beff43 100644 --- a/packages/native-ui/src/components/index.ts +++ b/packages/native-ui/src/components/index.ts @@ -42,5 +42,3 @@ export { Pressable } from '@gluestack-ui/themed'; export { Image } from '@gluestack-ui/themed'; export { Icon, createIcon } from '@gluestack-ui/themed'; - -export { InputField, InputIcon, InputSlot } from '@gluestack-ui/themed'; From 89b25278d2b20bca11285d363c31d812f1b8913a Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Thu, 17 Oct 2024 16:21:11 +0100 Subject: [PATCH 28/45] chore: update `Input` docs --- .../components/Input/Input.docs.mdx | 125 +++++++++++++----- .../Input/components/AdvancedExample.tsx | 39 ++++++ .../components/Input/components/index.ts | 1 + .../src/components/Input/Input.props.ts | 33 +++-- .../native-ui/src/components/Input/Input.tsx | 22 ++- .../src/components/Input/InputField.tsx | 3 +- 6 files changed, 174 insertions(+), 49 deletions(-) create mode 100644 apps/native-ui-storybook/components/Input/components/AdvancedExample.tsx create mode 100644 apps/native-ui-storybook/components/Input/components/index.ts diff --git a/apps/native-ui-storybook/components/Input/Input.docs.mdx b/apps/native-ui-storybook/components/Input/Input.docs.mdx index 5bf64ad0d..bba1d1511 100644 --- a/apps/native-ui-storybook/components/Input/Input.docs.mdx +++ b/apps/native-ui-storybook/components/Input/Input.docs.mdx @@ -7,9 +7,11 @@ import { InputSlot, Center, NativeUIProvider, + Pressable, } from '@utilitywarehouse/native-ui'; import { EmailMediumIcon } from '@utilitywarehouse/react-native-icons'; import { ViewFigmaButton, BackToTopButton } from '../../docs/components'; +import { AdvancedExample } from './components'; @@ -28,6 +30,7 @@ The input component is a text field that allows users to enter text, numbers, or - [`InputField`](#inputfield) - [`InputIcon`](#inputicon) - [`InputSlot`](#inputslot) +- [Advanced Usage](#advanced-usage) - [Variants](#variants) - [Accessibility](#accessibility) @@ -39,23 +42,21 @@ The input component is a text field that allows users to enter text, numbers, or ## Usage -> This component should be wrapped in a `NativeUIProvider` component to ensure that the correct theme is applied. -
- console.log('###')}> + - + console.log('###')} />
```tsx -import { Input, InputField, InputIcon, InputSlot } from '@utilitywarehouse/native-ui'; +import { Input } from '@utilitywarehouse/native-ui'; import { EmailMediumIcon } from '@utilitywarehouse/react-native-icons'; const MyComponent = () => { @@ -64,12 +65,12 @@ const MyComponent = () => { setValue(e.target.value); }; return ( - - - - - - + ); }; ``` @@ -78,33 +79,39 @@ const MyComponent = () => { ### `Input` -| Prop | Type | Default | Description | -| ------------------ | ---------------------------------- | ----------- | ------------------------------------ | -| validationStatus | `'initial' \| 'valid' \| 'invalid` | `'initial'` | The validation status of the input. | -| showValidationIcon | boolean | false | Whether to show the validation icon. | -| disabled | boolean | false | Disables the input. | -| readonly | boolean | false | Makes the input read-only. | -| focused | boolean | false | Sets focus on the input. | - -#### Descendants Styling Props - -Props to style child components. - -| Sx Prop | Description | -| ---------------- | --------------------------------- | -| \_input | Prop to style Input | -| \_icon | Prop to style InputIcon | -| \_validationIcon | Prop to style InputValidationIcon | +When using the component with basic usage the `Input` inherits all of the React Native [`TextInput` props](https://reactnative.dev/docs/textinput). +Otherwise when used with children including the `InputField`, `InputSlot` and `InputIcon` components, the `Input` component inherits +all of the React Native [`View` props](https://reactnative.dev/docs/view). + +| Prop | Type | Default | Description | +| ------------------ | ---------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| validationStatus | `'initial' \| 'valid' \| 'invalid` | `'initial'` | The validation status of the input. | +| showValidationIcon | boolean | `false` | Whether to show the validation icon. | +| disabled | boolean | `false` | Disables the input. | +| readonly | boolean | `false` | Makes the input read-only. | +| focused | boolean | `false` | Sets focus on the input. | +| leadingIcon | React.ComponentType | `-` | The leading icon of the input. **(Only to be used if the input has no children)** | +| trailingIcon | React.ComponentType | `-` | The trailing icon of the input. **(Only to be used if the input has no children)** | +| value | string | `-` | The value of the input. **(Only to be used if the input has no children)** | +| onChange | function | `-` | Callback function that is triggered when the input value changes. **(Only to be used if the input has no children)** **(Only to be used if the input has no children)** | +| onBlur | function | `-` | Callback function that is triggered when the input loses focus. **(Only to be used if the input has no children)** | +| onFocus | function | `-` | Callback function that is triggered when the input gains focus. **(Only to be used if the input has no children)** | +| placeholder | string | `-` | The placeholder text for the input. **(Only to be used if the input has no children)** | +| type | `'text' \| 'password'` | `'text'` | The type of the input. **(Only to be used if the input has no children)** | + +If the `leadingIcon` or `trailingIcon` props are used, the `Input` component should not have any children. ### `InputField` +The `InputField` inherits all of the React Native [`TextInput` props](https://reactnative.dev/docs/textinput). + | Prop | Type | Default | Description | | ----------- | ---------------------- | -------- | ----------------------------------------------------------------- | -| value | string | | The value of the input. | -| onChange | function | | Callback function that is triggered when the input value changes. | -| onBlur | function | | Callback function that is triggered when the input loses focus. | -| onFocus | function | | Callback function that is triggered when the input gains focus. | -| placeholder | string | | The placeholder text for the input. | +| value | string | `-` | The value of the input. | +| onChange | function | `-` | Callback function that is triggered when the input value changes. | +| onBlur | function | `-` | Callback function that is triggered when the input loses focus. | +| onFocus | function | `-` | Callback function that is triggered when the input gains focus. | +| placeholder | string | `-` | The placeholder text for the input. | | type | `'text' \| 'password'` | `'text'` | The type of the input. | ### `InputIcon` @@ -119,6 +126,58 @@ Props to style child components. | ---- | ---- | ------- | ----------- | | - | - | - | - | +## Advanced Usage + +The `Input` component can be used with the `InputField`, `InputSlot` and `InputIcon` components to create a custom input field. + + +
+ +
+ + +```tsx +import { Input, InputField, InputIcon, InputSlot, Pressable } from '@utilitywarehouse/native-ui'; +import { + EmailMediumIcon, + EyeMediumIcon, + EyeOffMediumIcon, +} from '@utilitywarehouse/react-native-icons'; +import { useState } from 'react'; +import { NativeSyntheticEvent, TextInputChangeEventData } from 'react-native'; + +const AdvancedExample = () => { + const [value, setValue] = useState(''); + const [fieldType, setFieldType] = useState<'password' | 'text'>('password'); + const handleChange = (e: NativeSyntheticEvent) => { + setValue(e.nativeEvent.text); + }; + const handleToggleFieldType = () => { + setFieldType(fieldType === 'password' ? 'text' : 'password'); + }; + return ( + + + + + + + + + + + + ); +}; + +export default AdvancedExample; +``` + ## Variants The `Input` component has the following variants: diff --git a/apps/native-ui-storybook/components/Input/components/AdvancedExample.tsx b/apps/native-ui-storybook/components/Input/components/AdvancedExample.tsx new file mode 100644 index 000000000..2d170e982 --- /dev/null +++ b/apps/native-ui-storybook/components/Input/components/AdvancedExample.tsx @@ -0,0 +1,39 @@ +import { Input, InputField, InputIcon, InputSlot, Pressable } from '@utilitywarehouse/native-ui'; +import { + EmailMediumIcon, + EyeMediumIcon, + EyeOffMediumIcon, +} from '@utilitywarehouse/react-native-icons'; +import { useState } from 'react'; +import { NativeSyntheticEvent, TextInputChangeEventData } from 'react-native'; + +const AdvancedExample = () => { + const [value, setValue] = useState(''); + const [fieldType, setFieldType] = useState<'password' | 'text'>('password'); + const handleChange = (e: NativeSyntheticEvent) => { + setValue(e.nativeEvent.text); + }; + const handleToggleFieldType = () => { + setFieldType(fieldType === 'password' ? 'text' : 'password'); + }; + return ( + + + + + + + + + + + + ); +}; + +export default AdvancedExample; diff --git a/apps/native-ui-storybook/components/Input/components/index.ts b/apps/native-ui-storybook/components/Input/components/index.ts new file mode 100644 index 000000000..d992b480b --- /dev/null +++ b/apps/native-ui-storybook/components/Input/components/index.ts @@ -0,0 +1 @@ +export { default as AdvancedExample } from './AdvancedExample'; diff --git a/packages/native-ui/src/components/Input/Input.props.ts b/packages/native-ui/src/components/Input/Input.props.ts index 20a7be6fe..d01c8d81f 100644 --- a/packages/native-ui/src/components/Input/Input.props.ts +++ b/packages/native-ui/src/components/Input/Input.props.ts @@ -1,11 +1,7 @@ -import type { ViewProps } from 'react-native'; +import type { ComponentType } from 'react'; +import type { TextInputProps, ViewProps } from 'react-native'; -export interface InputComponentProps extends ViewProps {} - -/** - * Props for the Input component. - */ -interface InputProps extends Omit { +export interface InputBaseProps { /** * The show validation icon when validationStatus is 'valid' or 'invalid'. * @default true @@ -40,10 +36,23 @@ interface InputProps extends Omit { focused?: boolean; } -export interface InputContextValue - extends Pick< - InputProps, - 'validationStatus' | 'showValidationIcon' | 'disabled' | 'readonly' | 'focused' - > {} +export interface InputWithChildrenProps extends InputBaseProps, ViewProps { + children: React.ReactNode; + leadingIcon?: never; + trailingIcon?: never; +} + +interface InputWithoutChildrenProps extends InputBaseProps, TextInputProps { + children?: never; + leadingIcon?: ComponentType; + trailingIcon?: ComponentType; +} + +/** + * Props for the Input component. + */ +type InputProps = InputWithChildrenProps | InputWithoutChildrenProps; + +export interface InputContextValue extends InputBaseProps {} export default InputProps; diff --git a/packages/native-ui/src/components/Input/Input.tsx b/packages/native-ui/src/components/Input/Input.tsx index 31508d8a7..921b16348 100644 --- a/packages/native-ui/src/components/Input/Input.tsx +++ b/packages/native-ui/src/components/Input/Input.tsx @@ -26,18 +26,36 @@ const Input: React.FC = ({ disabled, focused, readonly, + leadingIcon, + trailingIcon, ...props }) => { return ( - {children} + {children ? ( + children + ) : ( + <> + {leadingIcon && ( + + + + )} + + {trailingIcon && ( + + + + )} + + )} {showValidationIcon && validationStatus !== 'initial' && ( diff --git a/packages/native-ui/src/components/Input/InputField.tsx b/packages/native-ui/src/components/Input/InputField.tsx index ab45fa3fd..48e8507b2 100644 --- a/packages/native-ui/src/components/Input/InputField.tsx +++ b/packages/native-ui/src/components/Input/InputField.tsx @@ -1,6 +1,6 @@ import React, { ElementRef, forwardRef } from 'react'; import { createStyleSheet, useStyles } from 'react-native-unistyles'; -import { TextInputProps, TextInput, Platform } from 'react-native'; +import { TextInputProps, TextInput } from 'react-native'; import { useInputContext } from './Input.context'; const InputField = forwardRef, TextInputProps>( @@ -38,7 +38,6 @@ const stylesheet = createStyleSheet(({ radii, fontSizes, colors, fontWeights, fo fontSize: fontSizes.lg, fontFamily: fonts.body, fontWeight: fontWeights.normal, - outline: 'none', variants: { focused: { true: { From 3f87236ef4a76d0f874c5a16b0058ef96adf6411 Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Thu, 17 Oct 2024 16:34:46 +0100 Subject: [PATCH 29/45] chore: improve input playground --- .../components/Input/Input.tsx | 61 ++++++++++--------- 1 file changed, 31 insertions(+), 30 deletions(-) diff --git a/apps/native-ui-storybook/components/Input/Input.tsx b/apps/native-ui-storybook/components/Input/Input.tsx index 15207c4dc..b48ce6006 100644 --- a/apps/native-ui-storybook/components/Input/Input.tsx +++ b/apps/native-ui-storybook/components/Input/Input.tsx @@ -1,30 +1,31 @@ import React from 'react'; -import { Input, InputField, InputIcon, InputSlot } from '@utilitywarehouse/native-ui'; -import { EmailMediumIcon, EyeMediumIcon } from '@utilitywarehouse/react-native-icons'; -import { Meta, StoryFn } from '@storybook/react'; +import { Input } from '@utilitywarehouse/native-ui'; +import { StoryFn } from '@storybook/react'; + +import * as Icons from '@utilitywarehouse/react-native-icons'; const InputBasic: StoryFn = ({ placeholder, validationStatus, type, - _showIconLeft, - _showIconRight, + leadingIcon: leading, + trailingIcon: trailing, ...props }: any) => { + /* eslint-disable @typescript-eslint/no-unsafe-assignment */ + // @ts-expect-error - This is a playground + const leadingIcon: ComponentType | undefined = leading === 'none' ? undefined : Icons[leading]; + // @ts-expect-error - This is a playground + const trailingIcon: ComponentType | undefined = trailing === 'none' ? undefined : Icons[trailing]; return ( - - {_showIconLeft && ( - - - - )} - - {_showIconRight && ( - - - - )} - + ); }; @@ -66,17 +67,17 @@ InputBasic.argTypes = { description: 'Focus the Input component', defaultValue: false, }, - _showIconLeft: { - control: 'boolean', - description: - 'Show icon left. \n _Note: this is not a prop of the `Input` component, just a representation of the `InputSlot` and `InputIcon` component for the Storybook playground._', + leadingIcon: { + options: ['none', ...Object.keys(Icons).filter(icon => icon.includes('Medium'))], + control: 'select', + description: 'The leading icon component for the Input component', }, - _showIconRight: { - control: 'boolean', - description: - 'Show icon right. \n _Note: this is not a prop of the `Input` component, just a representation of the `InputSlot` and `InputIcon` component for the Storybook playground._', + trailingIcon: { + options: ['none', ...Object.keys(Icons).filter(icon => icon.includes('Medium'))], + control: 'select', + description: 'The trailing icon component for the Input component', }, -} as Meta['argTypes']; +}; InputBasic.args = { placeholder: 'Input placeholder', @@ -86,8 +87,8 @@ InputBasic.args = { disabled: false, readonly: false, focused: false, - _showIconLeft: false, - _showIconRight: false, -} as Meta['args']; + leadingIcon: 'none', + trailingIcon: 'none', +}; export default InputBasic; From f1b738898eee6d4fc8d9df3a534a1dee64877e3c Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Thu, 17 Oct 2024 16:34:57 +0100 Subject: [PATCH 30/45] fix: disabled input field --- packages/native-ui/src/components/Input/InputField.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/native-ui/src/components/Input/InputField.tsx b/packages/native-ui/src/components/Input/InputField.tsx index 48e8507b2..ad8f21e2f 100644 --- a/packages/native-ui/src/components/Input/InputField.tsx +++ b/packages/native-ui/src/components/Input/InputField.tsx @@ -9,7 +9,7 @@ const InputField = forwardRef, TextInputProps>( const { styles, theme: { colors }, - } = useStyles(stylesheet, { focused }); + } = useStyles(stylesheet, { focused, disabled }); return ( Date: Thu, 17 Oct 2024 16:39:07 +0100 Subject: [PATCH 31/45] fix: input placeholder disabled colour --- packages/native-ui/src/components/Input/InputField.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/native-ui/src/components/Input/InputField.tsx b/packages/native-ui/src/components/Input/InputField.tsx index ad8f21e2f..47c06eb7f 100644 --- a/packages/native-ui/src/components/Input/InputField.tsx +++ b/packages/native-ui/src/components/Input/InputField.tsx @@ -14,7 +14,7 @@ const InputField = forwardRef, TextInputProps>( return ( Date: Thu, 17 Oct 2024 16:42:02 +0100 Subject: [PATCH 32/45] fix: remove unused props --- packages/native-ui/src/components/Input/InputField.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/native-ui/src/components/Input/InputField.tsx b/packages/native-ui/src/components/Input/InputField.tsx index 47c06eb7f..ee10b67a8 100644 --- a/packages/native-ui/src/components/Input/InputField.tsx +++ b/packages/native-ui/src/components/Input/InputField.tsx @@ -4,7 +4,7 @@ import { TextInputProps, TextInput } from 'react-native'; import { useInputContext } from './Input.context'; const InputField = forwardRef, TextInputProps>( - ({ children, style, ...props }, ref) => { + ({ style, ...props }, ref) => { const { disabled, focused = false } = useInputContext(); const { styles, From dfe3c7a9335b7dc360a789495839357bf482d310 Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Thu, 17 Oct 2024 16:53:13 +0100 Subject: [PATCH 33/45] fix: types paths --- packages/native-ui/src/components/Input/InputIcon.tsx | 2 +- packages/native-ui/src/components/Input/InputValidationIcon.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/native-ui/src/components/Input/InputIcon.tsx b/packages/native-ui/src/components/Input/InputIcon.tsx index 58ce54943..ff298ae29 100644 --- a/packages/native-ui/src/components/Input/InputIcon.tsx +++ b/packages/native-ui/src/components/Input/InputIcon.tsx @@ -4,7 +4,7 @@ import { Platform, type StyleProp, type ViewStyle } from 'react-native'; import { createStyleSheet, useStyles } from 'react-native-unistyles'; import { useInputContext } from './Input.context'; import { Icon } from '../Icon'; -import type { SvgRef } from '../../../types'; +import type { SvgRef } from '../../types'; const InputIcon = forwardRef & { as?: ComponentType }>( ({ children, ...props }, ref) => { diff --git a/packages/native-ui/src/components/Input/InputValidationIcon.tsx b/packages/native-ui/src/components/Input/InputValidationIcon.tsx index 475020013..b979bbd09 100644 --- a/packages/native-ui/src/components/Input/InputValidationIcon.tsx +++ b/packages/native-ui/src/components/Input/InputValidationIcon.tsx @@ -4,7 +4,7 @@ import { Platform, type StyleProp, type ViewStyle } from 'react-native'; import { createStyleSheet, useStyles } from 'react-native-unistyles'; import { useInputContext } from './Input.context'; import { Icon } from '../Icon'; -import type { SvgRef } from '../../../types'; +import type { SvgRef } from '../../types'; import { WarningMediumContainedIcon, TickMediumContainedIcon, From 173dda9d76ffe11b9e2a15adf15ebc001b647a95 Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Thu, 17 Oct 2024 17:06:14 +0100 Subject: [PATCH 34/45] chore: update xcode version --- .github/workflows/previews.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/previews.yml b/.github/workflows/previews.yml index af4b39d73..476361369 100644 --- a/.github/workflows/previews.yml +++ b/.github/workflows/previews.yml @@ -194,7 +194,7 @@ jobs: uses: maxim-lobanov/setup-xcode@v1 if: steps.check_skip.outputs.skip == 'false' with: - xcode-version: '15.2.0' + xcode-version: '16.0.0' - name: 🔧 Setup EAS uses: expo/expo-github-action@v8 From 8e04a9f8c2a9568aa47ae790b8a34e4746aa59f3 Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Thu, 17 Oct 2024 17:14:08 +0100 Subject: [PATCH 35/45] update expo versions --- apps/native-ui-storybook/package.json | 4 +- pnpm-lock.yaml | 356 ++++++++++++++++---------- 2 files changed, 217 insertions(+), 143 deletions(-) diff --git a/apps/native-ui-storybook/package.json b/apps/native-ui-storybook/package.json index 3484a8a52..f88503f4d 100644 --- a/apps/native-ui-storybook/package.json +++ b/apps/native-ui-storybook/package.json @@ -42,9 +42,9 @@ "@utilitywarehouse/react-icons": "^1.7.1", "@utilitywarehouse/react-native-icons": "^1.7.1", "@vercel/analytics": "^1.3.1", - "expo": "~51.0.28", + "expo": "~51.0.38", "expo-constants": "~16.0.2", - "expo-dev-client": "~4.0.23", + "expo-dev-client": "~4.0.28", "expo-status-bar": "~1.12.1", "expo-xml-font": "^3.0.2", "react": "18.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7e570c766..4b9f73fde 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -104,20 +104,20 @@ importers: specifier: ^1.3.1 version: 1.3.1(react@18.2.0) expo: - specifier: ~51.0.28 - version: 51.0.28(@babel/core@7.25.2) + specifier: ~51.0.38 + version: 51.0.38(@babel/core@7.25.2) expo-constants: specifier: ~16.0.2 - version: 16.0.2(expo@51.0.28) + version: 16.0.2(expo@51.0.38) expo-dev-client: - specifier: ~4.0.23 - version: 4.0.23(expo@51.0.28) + specifier: ~4.0.28 + version: 4.0.28(expo@51.0.38) expo-status-bar: specifier: ~1.12.1 version: 1.12.1 expo-xml-font: specifier: ^3.0.2 - version: 3.0.2(@expo/config-plugins@8.0.8) + version: 3.0.2(@expo/config-plugins@8.0.10) react: specifier: 18.2.0 version: 18.2.0 @@ -491,7 +491,7 @@ importers: devDependencies: '@babel/preset-env': specifier: ^7.20.2 - version: 7.24.4(@babel/core@7.19.3) + version: 7.24.4 '@babel/preset-react': specifier: ^7.18.6 version: 7.22.5 @@ -776,8 +776,8 @@ packages: '@babel/helper-annotate-as-pure': 7.24.7 '@babel/helper-environment-visitor': 7.24.7 '@babel/helper-function-name': 7.24.7 - '@babel/helper-member-expression-to-functions': 7.23.0 - '@babel/helper-optimise-call-expression': 7.22.5 + '@babel/helper-member-expression-to-functions': 7.24.8 + '@babel/helper-optimise-call-expression': 7.24.7 '@babel/helper-replace-supers': 7.25.0(@babel/core@7.19.3) '@babel/helper-skip-transparent-expression-wrappers': 7.24.7 '@babel/helper-split-export-declaration': 7.24.5 @@ -798,8 +798,8 @@ packages: '@babel/helper-annotate-as-pure': 7.24.7 '@babel/helper-environment-visitor': 7.24.7 '@babel/helper-function-name': 7.24.7 - '@babel/helper-member-expression-to-functions': 7.23.0 - '@babel/helper-optimise-call-expression': 7.22.5 + '@babel/helper-member-expression-to-functions': 7.24.8 + '@babel/helper-optimise-call-expression': 7.24.7 '@babel/helper-replace-supers': 7.25.0(@babel/core@7.25.2) '@babel/helper-skip-transparent-expression-wrappers': 7.24.7 '@babel/helper-split-export-declaration': 7.24.5 @@ -860,21 +860,6 @@ packages: regexpu-core: 5.3.2 semver: 6.3.1 - /@babel/helper-create-regexp-features-plugin@7.22.15(@babel/core@7.25.2): - resolution: {integrity: sha512-29FkPLFjn4TPEa3RE7GpW+qbE8tlsu3jntNYNfcGsc49LphF1PQIiD+vMZ1z1xVOKt+93khA9tc2JBs3kBjA7w==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0 - peerDependenciesMeta: - '@babel/core': - optional: true - dependencies: - '@babel/core': 7.25.2 - '@babel/helper-annotate-as-pure': 7.24.7 - regexpu-core: 5.3.2 - semver: 6.3.1 - dev: true - /@babel/helper-create-regexp-features-plugin@7.25.2(@babel/core@7.25.2): resolution: {integrity: sha512-+wqVGP+DFmqwFD3EH6TMTfUNeqDehV3E/dl+Sd54eaXqm17tEUNbEIn4sVivVowbvUpOtIGxdo3GoXyDH9N/9g==} engines: {node: '>=6.9.0'} @@ -942,12 +927,6 @@ packages: dependencies: '@babel/types': 7.25.4 - /@babel/helper-member-expression-to-functions@7.23.0: - resolution: {integrity: sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/types': 7.25.4 - /@babel/helper-member-expression-to-functions@7.24.8: resolution: {integrity: sha512-LABppdt+Lp/RlBxqrh4qgf1oEH/WxdzQNDJIu5gC/W1GyvPVrOBiItmmM8wan2fm4oYqFuFfkXmlGpLQhPY8CA==} engines: {node: '>=6.9.0'} @@ -1031,12 +1010,6 @@ packages: transitivePeerDependencies: - supports-color - /@babel/helper-optimise-call-expression@7.22.5: - resolution: {integrity: sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/types': 7.25.4 - /@babel/helper-optimise-call-expression@7.24.7: resolution: {integrity: sha512-jKiTsW2xmWwxT1ixIdfXUZp+P5yURx2suzLZr5Hi64rURpDYdMW0pv+Uf17EYk2Rd428Lx4tLsnjGJzYKDM/6A==} engines: {node: '>=6.9.0'} @@ -1063,7 +1036,9 @@ packages: '@babel/core': 7.19.3 '@babel/helper-annotate-as-pure': 7.24.7 '@babel/helper-environment-visitor': 7.24.7 - '@babel/helper-wrap-function': 7.22.20 + '@babel/helper-wrap-function': 7.25.0 + transitivePeerDependencies: + - supports-color /@babel/helper-remap-async-to-generator@7.25.0(@babel/core@7.25.2): resolution: {integrity: sha512-NhavI2eWEIz/H9dbrG0TuOicDhNexze43i5z7lEqwYm0WEZVTwnPpA0EafUTP7+6/W79HWIP2cTe3Z5NiSTVpw==} @@ -1092,8 +1067,10 @@ packages: dependencies: '@babel/core': 7.19.3 '@babel/helper-environment-visitor': 7.24.7 - '@babel/helper-member-expression-to-functions': 7.23.0 - '@babel/helper-optimise-call-expression': 7.22.5 + '@babel/helper-member-expression-to-functions': 7.24.8 + '@babel/helper-optimise-call-expression': 7.24.7 + transitivePeerDependencies: + - supports-color /@babel/helper-replace-supers@7.25.0(@babel/core@7.19.3): resolution: {integrity: sha512-q688zIvQVYtZu+i2PsdIu/uWGRpfxzr5WESsfpShfZECkO+d2o+WROWezCi/Q6kJ0tfPa5+pUGUlfx2HhrA3Bg==} @@ -1177,14 +1154,6 @@ packages: resolution: {integrity: sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==} engines: {node: '>=6.9.0'} - /@babel/helper-wrap-function@7.22.20: - resolution: {integrity: sha512-pms/UwkOpnQe/PDAEdV/d7dVCoBbB+R4FvYoHGZz+4VPcg7RtYy2KP7S2lbuWM6FCSgob5wshfGESbC/hzNXZw==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/helper-function-name': 7.24.7 - '@babel/template': 7.25.0 - '@babel/types': 7.25.4 - /@babel/helper-wrap-function@7.25.0: resolution: {integrity: sha512-s6Q1ebqutSiZnEjaofc/UKDyC4SbzV5n5SrA2Gq8UawLycr3i04f1dX4OzoQVnexm6aOCh37SQNYlJ/8Ku+PMQ==} engines: {node: '>=6.9.0'} @@ -2218,9 +2187,8 @@ packages: optional: true dependencies: '@babel/core': 7.25.2 - '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.25.2) + '@babel/helper-create-regexp-features-plugin': 7.25.2(@babel/core@7.25.2) '@babel/helper-plugin-utils': 7.24.8 - dev: true /@babel/plugin-transform-arrow-functions@7.24.1(@babel/core@7.19.3): resolution: {integrity: sha512-ngT/3NkRhsaep9ck9uj2Xhv9+xB1zShY3tM3g6om4xxCELwCDN4g4Aq5dRn48+0hasAql7s2hdBOysCfNpr4fw==} @@ -2273,6 +2241,8 @@ packages: '@babel/helper-plugin-utils': 7.24.8 '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.19.3) '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.19.3) + transitivePeerDependencies: + - supports-color /@babel/plugin-transform-async-generator-functions@7.25.4: resolution: {integrity: sha512-jz8cV2XDDTqjKPwVPJBIjORVEmSGYhdRa8e5k5+vN+uwcjSrSxUaebBRa4ko1jqNF2uxyg8G6XYk30Jv285xzg==} @@ -2514,6 +2484,8 @@ packages: '@babel/helper-replace-supers': 7.24.1(@babel/core@7.19.3) '@babel/helper-split-export-declaration': 7.24.5 globals: 11.12.0 + transitivePeerDependencies: + - supports-color /@babel/plugin-transform-classes@7.25.4: resolution: {integrity: sha512-oexUfaQle2pF/b6E0dwsxQtAol9TLSO88kQvym6HHBWFliV2lGdrPieX+WgMRLSJDVzdYywk7jXbLPuO2KLTLg==} @@ -3355,6 +3327,8 @@ packages: '@babel/core': 7.19.3 '@babel/helper-plugin-utils': 7.24.8 '@babel/helper-replace-supers': 7.24.1(@babel/core@7.19.3) + transitivePeerDependencies: + - supports-color /@babel/plugin-transform-object-super@7.24.7: resolution: {integrity: sha512-A/vVLwN6lBrMFmMDmPPz0jnE6ZGx7Jq7d6sT/Ev4H65RER6pZ+kczlf1DthF5N0qaPHBsI7UXiE8Zy66nmAovg==} @@ -4202,6 +4176,100 @@ packages: '@babel/helper-create-regexp-features-plugin': 7.25.2(@babel/core@7.25.2) '@babel/helper-plugin-utils': 7.24.8 + /@babel/preset-env@7.24.4: + resolution: {integrity: sha512-7Kl6cSmYkak0FK/FXjSEnLJ1N9T/WA2RkMhu17gZ/dsxKJUuTYNIylahPTzqpLyJN4WhDif8X0XK1R8Wsguo/A==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + peerDependenciesMeta: + '@babel/core': + optional: true + dependencies: + '@babel/compat-data': 7.24.4 + '@babel/helper-compilation-targets': 7.23.6 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/helper-validator-option': 7.23.5 + '@babel/plugin-bugfix-firefox-class-in-computed-class-key': 7.24.4(@babel/core@7.19.3) + '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.19.3) + '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.19.3) + '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.19.3) + '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.19.3) + '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.19.3) + '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.19.3) + '@babel/plugin-syntax-import-assertions': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-syntax-import-attributes': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.19.3) + '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.19.3) + '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.19.3) + '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.19.3) + '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.19.3) + '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.19.3) + '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.19.3) + '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.19.3) + '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.19.3) + '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.19.3) + '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.25.2) + '@babel/plugin-transform-arrow-functions': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-async-generator-functions': 7.24.3(@babel/core@7.19.3) + '@babel/plugin-transform-async-to-generator': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-block-scoped-functions': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-block-scoping': 7.24.4(@babel/core@7.19.3) + '@babel/plugin-transform-class-properties': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-class-static-block': 7.24.4(@babel/core@7.19.3) + '@babel/plugin-transform-classes': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-computed-properties': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-destructuring': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-dotall-regex': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-duplicate-keys': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-dynamic-import': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-exponentiation-operator': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-export-namespace-from': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-for-of': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-function-name': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-json-strings': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-literals': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-logical-assignment-operators': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-member-expression-literals': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-modules-amd': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-modules-systemjs': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-modules-umd': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.19.3) + '@babel/plugin-transform-new-target': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-nullish-coalescing-operator': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-numeric-separator': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-object-rest-spread': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-object-super': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-optional-catch-binding': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-optional-chaining': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-parameters': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-private-methods': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-private-property-in-object': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-property-literals': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-regenerator': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-reserved-words': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-shorthand-properties': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-spread': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-sticky-regex': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-template-literals': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-typeof-symbol': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-unicode-escapes': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-unicode-property-regex': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-unicode-regex': 7.24.1(@babel/core@7.19.3) + '@babel/plugin-transform-unicode-sets-regex': 7.24.1(@babel/core@7.19.3) + '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.19.3) + babel-plugin-polyfill-corejs2: 0.4.11(@babel/core@7.19.3) + babel-plugin-polyfill-corejs3: 0.10.4(@babel/core@7.19.3) + babel-plugin-polyfill-regenerator: 0.6.2(@babel/core@7.19.3) + core-js-compat: 3.37.0 + semver: 6.3.1 + transitivePeerDependencies: + - supports-color + dev: true + /@babel/preset-env@7.24.4(@babel/core@7.19.3): resolution: {integrity: sha512-7Kl6cSmYkak0FK/FXjSEnLJ1N9T/WA2RkMhu17gZ/dsxKJUuTYNIylahPTzqpLyJN4WhDif8X0XK1R8Wsguo/A==} engines: {node: '>=6.9.0'} @@ -4331,7 +4399,7 @@ packages: '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.19.3) '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.19.3) '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.19.3) - '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.19.3) + '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.25.2) '@babel/plugin-transform-arrow-functions': 7.24.7(@babel/core@7.25.2) '@babel/plugin-transform-async-generator-functions': 7.25.4 '@babel/plugin-transform-async-to-generator': 7.24.7(@babel/core@7.25.2) @@ -5598,14 +5666,14 @@ packages: safe-json-stringify: 1.2.0 dev: false - /@expo/cli@0.18.29(expo-modules-autolinking@1.11.2): - resolution: {integrity: sha512-X810C48Ss+67RdZU39YEO1khNYo1RmjouRV+vVe0QhMoTe8R6OA3t+XYEdwaNbJ5p/DJN7szfHfNmX2glpC7xg==} + /@expo/cli@0.18.30(expo-modules-autolinking@1.11.3): + resolution: {integrity: sha512-V90TUJh9Ly8stYo8nwqIqNWCsYjE28GlVFWEhAFCUOp99foiQr8HSTpiiX5GIrprcPoWmlGoY+J5fQA29R4lFg==} hasBin: true dependencies: '@babel/runtime': 7.25.7 '@expo/code-signing-certificates': 0.0.5 - '@expo/config': 9.0.3 - '@expo/config-plugins': 8.0.8 + '@expo/config': 9.0.4 + '@expo/config-plugins': 8.0.10 '@expo/devcert': 1.1.0 '@expo/env': 0.3.0 '@expo/image-utils': 0.5.1 @@ -5614,7 +5682,7 @@ packages: '@expo/osascript': 2.1.0 '@expo/package-manager': 1.5.2 '@expo/plist': 0.1.1 - '@expo/prebuild-config': 7.0.8(expo-modules-autolinking@1.11.2) + '@expo/prebuild-config': 7.0.9(expo-modules-autolinking@1.11.3) '@expo/rudder-sdk-node': 1.1.1 '@expo/spawn-async': 1.7.2 '@expo/xcpretty': 4.3.1 @@ -5694,10 +5762,10 @@ packages: nullthrows: 1.1.1 dev: false - /@expo/config-plugins@8.0.8: - resolution: {integrity: sha512-Fvu6IO13EUw0R9WeqxUO37FkM62YJBNcZb9DyJAOgMz7Ez/vaKQGEjKt9cwT+Q6uirtCATMgaq6VWAW7YW8xXw==} + /@expo/config-plugins@8.0.10: + resolution: {integrity: sha512-KG1fnSKRmsudPU9BWkl59PyE0byrE2HTnqbOrgwr2FAhqh7tfr9nRs6A9oLS/ntpGzmFxccTEcsV0L4apsuxxg==} dependencies: - '@expo/config-types': 51.0.0 + '@expo/config-types': 51.0.3 '@expo/json-file': 8.3.1 '@expo/plist': 0.1.1 '@expo/sdk-runtime-versions': 1.0.0 @@ -5720,11 +5788,15 @@ packages: resolution: {integrity: sha512-acn03/u8mQvBhdTQtA7CNhevMltUhbSrpI01FYBJwpVntufkU++ncQujWKlgY/OwIajcfygk1AY4xcNZ5ImkRA==} dev: false + /@expo/config-types@51.0.3: + resolution: {integrity: sha512-hMfuq++b8VySb+m9uNNrlpbvGxYc8OcFCUX9yTmi9tlx6A4k8SDabWFBgmnr4ao3wEArvWrtUQIfQCVtPRdpKA==} + dev: false + /@expo/config@9.0.1: resolution: {integrity: sha512-0tjaXBstTbXmD4z+UMFBkh2SZFwilizSQhW6DlaTMnPG5ezuw93zSFEWAuEC3YzkpVtNQTmYzxAYjxwh6seOGg==} dependencies: '@babel/code-frame': 7.10.4 - '@expo/config-plugins': 8.0.8 + '@expo/config-plugins': 8.0.10 '@expo/config-types': 51.0.0 '@expo/json-file': 8.3.1 getenv: 1.0.0 @@ -5738,12 +5810,12 @@ packages: - supports-color dev: false - /@expo/config@9.0.3: - resolution: {integrity: sha512-eOTNM8eOC8gZNHgenySRlc/lwmYY1NOgvjwA8LHuvPT7/eUwD93zrxu3lPD1Cc/P6C/2BcVdfH4hf0tLmDxnsg==} + /@expo/config@9.0.4: + resolution: {integrity: sha512-g5ns5u1JSKudHYhjo1zaSfkJ/iZIcWmUmIQptMJZ6ag1C0ShL2sj8qdfU8MmAMuKLOgcIfSaiWlQnm4X3VJVkg==} dependencies: '@babel/code-frame': 7.10.4 - '@expo/config-plugins': 8.0.8 - '@expo/config-types': 51.0.0 + '@expo/config-plugins': 8.0.10 + '@expo/config-types': 51.0.3 '@expo/json-file': 8.3.1 getenv: 1.0.0 glob: 7.1.6 @@ -5824,7 +5896,7 @@ packages: '@babel/generator': 7.25.5 '@babel/parser': 7.25.4 '@babel/types': 7.25.4 - '@expo/config': 9.0.3 + '@expo/config': 9.0.4 '@expo/env': 0.3.0 '@expo/json-file': 8.3.1 '@expo/spawn-async': 1.7.2 @@ -5883,22 +5955,22 @@ packages: xmlbuilder: 14.0.0 dev: false - /@expo/prebuild-config@7.0.8(expo-modules-autolinking@1.11.2): - resolution: {integrity: sha512-wH9NVg6HiwF5y9x0TxiMEeBF+ITPGDXy5/i6OUheSrKpPgb0lF1Mwzl/f2fLPXBEpl+ZXOQ8LlLW32b7K9lrNg==} + /@expo/prebuild-config@7.0.9(expo-modules-autolinking@1.11.3): + resolution: {integrity: sha512-9i6Cg7jInpnGEHN0jxnW0P+0BexnePiBzmbUvzSbRXpdXihYUX2AKMu73jgzxn5P1hXOSkzNS7umaY+BZ+aBag==} peerDependencies: expo-modules-autolinking: '>=0.8.1' peerDependenciesMeta: expo-modules-autolinking: optional: true dependencies: - '@expo/config': 9.0.3 - '@expo/config-plugins': 8.0.8 - '@expo/config-types': 51.0.0 + '@expo/config': 9.0.4 + '@expo/config-plugins': 8.0.10 + '@expo/config-types': 51.0.3 '@expo/image-utils': 0.5.1 '@expo/json-file': 8.3.1 '@react-native/normalize-colors': 0.74.85 debug: 4.3.7 - expo-modules-autolinking: 1.11.2 + expo-modules-autolinking: 1.11.3 fs-extra: 9.1.0 resolve-from: 5.0.0 semver: 7.6.0 @@ -5934,8 +6006,10 @@ packages: cross-spawn: 7.0.3 dev: false - /@expo/vector-icons@14.0.0: - resolution: {integrity: sha512-5orm59pdnBQlovhU9k4DbjMUZBHNlku7IRgFY56f7pcaaCnXq9yaLJoOQl9sMwNdFzf4gnkTyHmR5uN10mI9rA==} + /@expo/vector-icons@14.0.4: + resolution: {integrity: sha512-+yKshcbpDfbV4zoXOgHxCwh7lkE9VVTT5T03OUlBsqfze1PLy6Hi4jp1vSb1GVbY6eskvMIivGVc9SKzIv0oEQ==} + dependencies: + prop-types: 15.8.1 dev: false /@expo/xcpretty@4.3.1: @@ -8917,7 +8991,7 @@ packages: dependencies: '@react-aria/focus': 3.18.2(react@18.2.0) react: 18.2.0 - react-native: 0.74.5(@babel/preset-env@7.24.8)(@types/react@18.2.79)(react@18.2.0) + react-native: 0.74.5(@babel/core@7.25.2)(@types/react@18.2.79)(react@18.2.0) dev: false /@react-native-aria/interactions@0.2.13(react-native@0.74.5)(react@18.2.0): @@ -8930,7 +9004,7 @@ packages: '@react-aria/utils': 3.25.2(react@18.2.0) '@react-native-aria/utils': 0.2.11(react-native@0.74.5)(react@18.2.0) react: 18.2.0 - react-native: 0.74.5(@babel/preset-env@7.24.8)(@types/react@18.2.79)(react@18.2.0) + react-native: 0.74.5(@babel/core@7.25.2)(@types/react@18.2.79)(react@18.2.0) dev: false /@react-native-aria/menu@0.2.12(react-dom@18.2.0)(react-native@0.74.5)(react@18.2.0): @@ -9032,7 +9106,7 @@ packages: '@react-aria/ssr': 3.9.5(react@18.2.0) '@react-aria/utils': 3.25.2(react@18.2.0) react: 18.2.0 - react-native: 0.74.5(@babel/preset-env@7.24.8)(@types/react@18.2.79)(react@18.2.0) + react-native: 0.74.5(@babel/core@7.25.2)(@types/react@18.2.79)(react@18.2.0) dev: false /@react-native-async-storage/async-storage@1.23.1(react-native@0.74.5): @@ -9540,7 +9614,7 @@ packages: invariant: 2.2.4 nullthrows: 1.1.1 react: 18.2.0 - react-native: 0.74.5(@babel/preset-env@7.24.8)(@types/react@18.2.79)(react@18.2.0) + react-native: 0.74.5(@babel/core@7.25.2)(@types/react@18.2.79)(react@18.2.0) /@react-stately/calendar@3.4.4(react@18.2.0): resolution: {integrity: sha512-f9ZOd096gGGD+3LmU1gkmfqytGyQtrgi+Qjn+70GbM2Jy65pwOR4I9YrobbmeAFov5Tff13mQEa0yqWvbcDLZQ==} @@ -13812,8 +13886,8 @@ packages: transitivePeerDependencies: - supports-color - /babel-plugin-react-compiler@0.0.0-experimental-9e9694c-20240826: - resolution: {integrity: sha512-JvR3ixeURr18emkgEAxFAiocF2fbXinRdiEonqMcS+6aCBiRO0itjkfJ9PeLiFhKu+LJ2QG0++MgKURkgp+m6g==} + /babel-plugin-react-compiler@0.0.0-experimental-592953e-20240517: + resolution: {integrity: sha512-OjG1SVaeQZaJrqkMFJatg8W/MTow8Ak5rx2SI0ETQBO1XvOk/XZGMbltNCPdFJLKghBYoBjC+Y3Ap/Xr7B01mA==} dependencies: '@babel/generator': 7.2.0 '@babel/types': 7.25.4 @@ -13894,8 +13968,8 @@ packages: '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.25.2) dev: true - /babel-preset-expo@11.0.14(@babel/core@7.25.2): - resolution: {integrity: sha512-4BVYR0Sc2sSNxYTiE/OLSnPiOp+weFNy8eV+hX3aD6YAIbBnw+VubKRWqJV/sOJauzOLz0SgYAYyFciYMqizRA==} + /babel-preset-expo@11.0.15(@babel/core@7.25.2): + resolution: {integrity: sha512-rgiMTYwqIPULaO7iZdqyL7aAff9QLOX6OWUtLZBlOrOTreGY1yHah/5+l8MvI6NVc/8Zj5LY4Y5uMSnJIuzTLw==} dependencies: '@babel/plugin-proposal-decorators': 7.24.1(@babel/core@7.25.2) '@babel/plugin-transform-export-namespace-from': 7.24.7(@babel/core@7.25.2) @@ -13904,7 +13978,7 @@ packages: '@babel/preset-react': 7.24.7(@babel/core@7.25.2) '@babel/preset-typescript': 7.24.7(@babel/core@7.25.2) '@react-native/babel-preset': 0.74.87(@babel/core@7.25.2) - babel-plugin-react-compiler: 0.0.0-experimental-9e9694c-20240826 + babel-plugin-react-compiler: 0.0.0-experimental-592953e-20240517 babel-plugin-react-native-web: 0.19.11 react-refresh: 0.14.2 transitivePeerDependencies: @@ -16133,93 +16207,93 @@ packages: jest-util: 29.7.0 dev: true - /expo-asset@10.0.10(expo@51.0.28): + /expo-asset@10.0.10(expo@51.0.38): resolution: {integrity: sha512-0qoTIihB79k+wGus9wy0JMKq7DdenziVx3iUkGvMAy2azscSgWH6bd2gJ9CGnhC6JRd3qTMFBL0ou/fx7WZl7A==} peerDependencies: expo: '*' dependencies: - expo: 51.0.28(@babel/core@7.25.2) - expo-constants: 16.0.2(expo@51.0.28) + expo: 51.0.38(@babel/core@7.25.2) + expo-constants: 16.0.2(expo@51.0.38) invariant: 2.2.4 md5-file: 3.2.3 transitivePeerDependencies: - supports-color dev: false - /expo-constants@16.0.2(expo@51.0.28): + /expo-constants@16.0.2(expo@51.0.38): resolution: {integrity: sha512-9tNY3OVO0jfiMzl7ngb6IOyR5VFzNoN5OOazUWoeGfmMqVB5kltTemRvKraK9JRbBKIw+SOYLEmF0sEqgFZ6OQ==} peerDependencies: expo: '*' dependencies: '@expo/config': 9.0.1 '@expo/env': 0.3.0 - expo: 51.0.28(@babel/core@7.25.2) + expo: 51.0.38(@babel/core@7.25.2) transitivePeerDependencies: - supports-color dev: false - /expo-dev-client@4.0.23(expo@51.0.28): - resolution: {integrity: sha512-s0qTAxrvpztQUpi0WS/JKddon04jZqnAHcwiMsuDyt+VSqDL6VF3aZAGl8dI5ZEDsq/cT3jETyNxY8CMkvLmyA==} + /expo-dev-client@4.0.28(expo@51.0.38): + resolution: {integrity: sha512-wz5G4vY3Gbk5GuQTyijdqY4Hwr/NDt5OUTErbOu1vd4XRIAsI+8IkK5hsBUhGmqrdkYnP5NxxOxC/soFzX/9+w==} peerDependencies: expo: '*' dependencies: - expo: 51.0.28(@babel/core@7.25.2) - expo-dev-launcher: 4.0.25(expo@51.0.28) - expo-dev-menu: 5.0.19(expo@51.0.28) - expo-dev-menu-interface: 1.8.3(expo@51.0.28) - expo-manifests: 0.14.2(expo@51.0.28) - expo-updates-interface: 0.16.2(expo@51.0.28) + expo: 51.0.38(@babel/core@7.25.2) + expo-dev-launcher: 4.0.28(expo@51.0.38) + expo-dev-menu: 5.0.22(expo@51.0.38) + expo-dev-menu-interface: 1.8.3(expo@51.0.38) + expo-manifests: 0.14.2(expo@51.0.38) + expo-updates-interface: 0.16.2(expo@51.0.38) transitivePeerDependencies: - supports-color dev: false - /expo-dev-launcher@4.0.25(expo@51.0.28): - resolution: {integrity: sha512-uwdcQvBGMXl1WAlOg0Qb827xDogJcqSHKjIkB+YOPjUPdf9NsLN9AwUHZqIK1wOcmvi0pfgv1fPzTgoE9AwNcw==} + /expo-dev-launcher@4.0.28(expo@51.0.38): + resolution: {integrity: sha512-goE7jcaGVA2zu4gV3/hQ9RXqGhUZZAu339VYNLbwPdaNCzFaG6A8MZHg18gytCUnZ5QkRJsYi4q/8YcwUCASlQ==} peerDependencies: expo: '*' dependencies: ajv: 8.11.0 - expo: 51.0.28(@babel/core@7.25.2) - expo-dev-menu: 5.0.19(expo@51.0.28) - expo-manifests: 0.14.2(expo@51.0.28) + expo: 51.0.38(@babel/core@7.25.2) + expo-dev-menu: 5.0.22(expo@51.0.38) + expo-manifests: 0.14.2(expo@51.0.38) resolve-from: 5.0.0 semver: 7.6.0 transitivePeerDependencies: - supports-color dev: false - /expo-dev-menu-interface@1.8.3(expo@51.0.28): + /expo-dev-menu-interface@1.8.3(expo@51.0.38): resolution: {integrity: sha512-QM0LRozeFT5Ek0N7XpV93M+HMdEKRLEOXn0aW5M3uoUlnqC1+PLtF3HMy3k3hMKTTE/kJ1y1Z7akH07T0lunCQ==} peerDependencies: expo: '*' dependencies: - expo: 51.0.28(@babel/core@7.25.2) + expo: 51.0.38(@babel/core@7.25.2) dev: false - /expo-dev-menu@5.0.19(expo@51.0.28): - resolution: {integrity: sha512-C/ulbzfhcEsEk1X0gF3XaJPSwCZJqnHPpYqPGUf4xaXzk/TZpeMTqF6f3nfMyZjpj67L6DetvaJWv8jiDzZ/6Q==} + /expo-dev-menu@5.0.22(expo@51.0.38): + resolution: {integrity: sha512-VzpdQReAtjbI1qIuwOf0sUzf91HsfGThojgJD9Ez0eca12qY5tTGYzHa1EM9V+zIcNuNZ7+A8bHJJdmZ4zvU6g==} peerDependencies: expo: '*' dependencies: - expo: 51.0.28(@babel/core@7.25.2) - expo-dev-menu-interface: 1.8.3(expo@51.0.28) + expo: 51.0.38(@babel/core@7.25.2) + expo-dev-menu-interface: 1.8.3(expo@51.0.38) semver: 7.6.0 dev: false - /expo-file-system@17.0.1(expo@51.0.28): + /expo-file-system@17.0.1(expo@51.0.38): resolution: {integrity: sha512-dYpnZJqTGj6HCYJyXAgpFkQWsiCH3HY1ek2cFZVHFoEc5tLz9gmdEgTF6nFHurvmvfmXqxi7a5CXyVm0aFYJBw==} peerDependencies: expo: '*' dependencies: - expo: 51.0.28(@babel/core@7.25.2) + expo: 51.0.38(@babel/core@7.25.2) dev: false - /expo-font@12.0.9(expo@51.0.28): - resolution: {integrity: sha512-seTCyf0tbgkAnp3ZI9ZfK9QVtURQUgFnuj+GuJ5TSnN0XsOtVe1s2RxTvmMgkfuvfkzcjJ69gyRpsZS1cC8hjw==} + /expo-font@12.0.10(expo@51.0.38): + resolution: {integrity: sha512-Q1i2NuYri3jy32zdnBaHHCya1wH1yMAsI+3CCmj9zlQzlhsS9Bdwcj2W3c5eU5FvH2hsNQy4O+O1NnM6o/pDaQ==} peerDependencies: expo: '*' dependencies: - expo: 51.0.28(@babel/core@7.25.2) + expo: 51.0.38(@babel/core@7.25.2) fontfaceobserver: 2.3.0 dev: false @@ -16227,28 +16301,28 @@ packages: resolution: {integrity: sha512-mlfaSArGVb+oJmUcR22jEONlgPp0wj4iNIHfQ2je9Q8WTOqMc0Ws9tUciz3JdJnhffdHqo/k8fpvf0IRmN5HPA==} dev: false - /expo-keep-awake@13.0.2(expo@51.0.28): + /expo-keep-awake@13.0.2(expo@51.0.38): resolution: {integrity: sha512-kKiwkVg/bY0AJ5q1Pxnm/GvpeB6hbNJhcFsoOWDh2NlpibhCLaHL826KHUM+WsnJRbVRxJ+K9vbPRHEMvFpVyw==} peerDependencies: expo: '*' dependencies: - expo: 51.0.28(@babel/core@7.25.2) + expo: 51.0.38(@babel/core@7.25.2) dev: false - /expo-manifests@0.14.2(expo@51.0.28): + /expo-manifests@0.14.2(expo@51.0.38): resolution: {integrity: sha512-hFrwIGr76/zGVhZ+vcjDZpOePd7uYNB6yCaiJcm7/bcrt2ne7cHyKQ8l+3n26/v1OuXfBfjxNH+PHIpkClszoQ==} peerDependencies: expo: '*' dependencies: - '@expo/config': 9.0.3 - expo: 51.0.28(@babel/core@7.25.2) + '@expo/config': 9.0.4 + expo: 51.0.38(@babel/core@7.25.2) expo-json-utils: 0.13.1 transitivePeerDependencies: - supports-color dev: false - /expo-modules-autolinking@1.11.2: - resolution: {integrity: sha512-fdcaNO8ucHA3yLNY52ZUENBcAG7KEx8QyMmnVNavO1JVBGRMZG8JyVcbrhYQDtVtpxkbai5YzwvLutINvbDZDQ==} + /expo-modules-autolinking@1.11.3: + resolution: {integrity: sha512-oYh8EZEvYF5TYppxEKUTTJmbr8j7eRRnrIxzZtMvxLTXoujThVPMFS/cbnSnf2bFm1lq50TdDNABhmEi7z0ngQ==} hasBin: true dependencies: chalk: 4.1.2 @@ -16260,8 +16334,8 @@ packages: resolve-from: 5.0.0 dev: false - /expo-modules-core@1.12.21: - resolution: {integrity: sha512-UQxRljqPcowS1+bECW9tnuVGfvWL18GAKPiKMnu9sZwJssAN9FU/JhED50DJzdzICLR0hL17FZAgV4rbMG3IWQ==} + /expo-modules-core@1.12.26: + resolution: {integrity: sha512-y8yDWjOi+rQRdO+HY+LnUlz8qzHerUaw/LUjKPU/mX8PRXP4UUPEEp5fjAwBU44xjNmYSHWZDwet4IBBE+yQUA==} dependencies: invariant: 2.2.4 dev: false @@ -16270,40 +16344,40 @@ packages: resolution: {integrity: sha512-/t3xdbS8KB0prj5KG5w7z+wZPFlPtkgs95BsmrP/E7Q0xHXTcDcQ6Cu2FkFuRM+PKTb17cJDnLkawyS5vDLxMA==} dev: false - /expo-updates-interface@0.16.2(expo@51.0.28): + /expo-updates-interface@0.16.2(expo@51.0.38): resolution: {integrity: sha512-929XBU70q5ELxkKADj1xL0UIm3HvhYhNAOZv5DSk7rrKvLo7QDdPyl+JVnwZm9LrkNbH4wuE2rLoKu1KMgZ+9A==} peerDependencies: expo: '*' dependencies: - expo: 51.0.28(@babel/core@7.25.2) + expo: 51.0.38(@babel/core@7.25.2) dev: false - /expo-xml-font@3.0.2(@expo/config-plugins@8.0.8): + /expo-xml-font@3.0.2(@expo/config-plugins@8.0.10): resolution: {integrity: sha512-yfY7wjGRAMmXR/St7ceVEyNp+tqR5Tivwi51km3OBRpm8CwFAA2JcsOHXI7XN0Ja3Ek91zE3+1wDEPB+nv7Xnw==} peerDependencies: '@expo/config-plugins': '>=6.0.0' dependencies: - '@expo/config-plugins': 8.0.8 + '@expo/config-plugins': 8.0.10 fs-extra: 11.2.0 dev: false - /expo@51.0.28(@babel/core@7.25.2): - resolution: {integrity: sha512-R+0tSV0Zf5R+DxN4W3mLFlVvYVpiJ+dtYrMmBedIRw0A54we50QRM1jS0Gq2Bdzg2JtainSEApdQXUC6r9j/BA==} + /expo@51.0.38(@babel/core@7.25.2): + resolution: {integrity: sha512-/B9npFkOPmv6WMIhdjQXEY0Z9k/67UZIVkodW8JxGIXwKUZAGHL+z1R5hTtWimpIrvVhyHUFU3f8uhfEKYhHNQ==} hasBin: true dependencies: - '@babel/runtime': 7.24.4 - '@expo/cli': 0.18.29(expo-modules-autolinking@1.11.2) - '@expo/config': 9.0.3 - '@expo/config-plugins': 8.0.8 + '@babel/runtime': 7.25.7 + '@expo/cli': 0.18.30(expo-modules-autolinking@1.11.3) + '@expo/config': 9.0.4 + '@expo/config-plugins': 8.0.10 '@expo/metro-config': 0.18.11 - '@expo/vector-icons': 14.0.0 - babel-preset-expo: 11.0.14(@babel/core@7.25.2) - expo-asset: 10.0.10(expo@51.0.28) - expo-file-system: 17.0.1(expo@51.0.28) - expo-font: 12.0.9(expo@51.0.28) - expo-keep-awake: 13.0.2(expo@51.0.28) - expo-modules-autolinking: 1.11.2 - expo-modules-core: 1.12.21 + '@expo/vector-icons': 14.0.4 + babel-preset-expo: 11.0.15(@babel/core@7.25.2) + expo-asset: 10.0.10(expo@51.0.38) + expo-file-system: 17.0.1(expo@51.0.38) + expo-font: 12.0.10(expo@51.0.38) + expo-keep-awake: 13.0.2(expo@51.0.38) + expo-modules-autolinking: 1.11.3 + expo-modules-core: 1.12.26 fbemitter: 3.0.0 whatwg-url-without-unicode: 8.0.0-3 transitivePeerDependencies: @@ -18585,7 +18659,7 @@ packages: optional: true dependencies: '@babel/core': 7.25.2 - '@babel/parser': 7.25.4 + '@babel/parser': 7.24.4 '@babel/plugin-transform-class-properties': 7.24.1(@babel/core@7.25.2) '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.25.2) '@babel/plugin-transform-nullish-coalescing-operator': 7.24.1(@babel/core@7.25.2) @@ -20802,7 +20876,7 @@ packages: resolution: {integrity: sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==} engines: {node: '>=10'} dependencies: - '@babel/runtime': 7.24.4 + '@babel/runtime': 7.25.7 /possible-typed-array-names@1.0.0: resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==} From 22b4b604f67b2c26a920db270cbb1f2f00bd1206 Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Thu, 17 Oct 2024 18:23:06 +0100 Subject: [PATCH 36/45] revert: xcode version --- .github/workflows/previews.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/previews.yml b/.github/workflows/previews.yml index 476361369..af4b39d73 100644 --- a/.github/workflows/previews.yml +++ b/.github/workflows/previews.yml @@ -194,7 +194,7 @@ jobs: uses: maxim-lobanov/setup-xcode@v1 if: steps.check_skip.outputs.skip == 'false' with: - xcode-version: '16.0.0' + xcode-version: '15.2.0' - name: 🔧 Setup EAS uses: expo/expo-github-action@v8 From 6d1eaf077a0f841592876e9cf4b820753cb0ec93 Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Thu, 17 Oct 2024 18:35:23 +0100 Subject: [PATCH 37/45] chore: hardcode color system package --- apps/native-ui-storybook/package.json | 2 +- pnpm-lock.yaml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/native-ui-storybook/package.json b/apps/native-ui-storybook/package.json index f88503f4d..1fd9a8884 100644 --- a/apps/native-ui-storybook/package.json +++ b/apps/native-ui-storybook/package.json @@ -36,7 +36,7 @@ "@storybook/native-addon": "^3.1.2", "@storybook/native-components": "^3.1.2", "@storybook/react-native-theming": "^7.6.20", - "@utilitywarehouse/colour-system": "workspace:^", + "@utilitywarehouse/colour-system": "0.5.0", "@utilitywarehouse/fontsource": "^0.0.6", "@utilitywarehouse/native-ui": "workspace:^", "@utilitywarehouse/react-icons": "^1.7.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4b9f73fde..b8556512b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -86,7 +86,7 @@ importers: specifier: ^7.6.20 version: 7.6.20(react-native@0.74.5)(react@18.2.0) '@utilitywarehouse/colour-system': - specifier: workspace:^ + specifier: 0.5.0 version: link:../../packages/colour-system '@utilitywarehouse/fontsource': specifier: ^0.0.6 From 6e1289b35628d32d794efb1d6265e1938830c5a7 Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Fri, 18 Oct 2024 09:45:47 +0100 Subject: [PATCH 38/45] chore: update colour system build --- .../components/lab/Box/Box.tsx | 3 +- apps/native-ui-storybook/package.json | 2 +- packages/colour-system/.gitignore | 3 +- packages/colour-system/index.js | 687 ------------------ packages/colour-system/index.mjs | 681 ----------------- packages/colour-system/package.json | 6 +- packages/colour-system/rollup.config.js | 4 +- packages/colour-system/tsconfig.json | 20 +- pnpm-lock.yaml | 2 +- 9 files changed, 24 insertions(+), 1384 deletions(-) delete mode 100644 packages/colour-system/index.js delete mode 100644 packages/colour-system/index.mjs diff --git a/apps/native-ui-storybook/components/lab/Box/Box.tsx b/apps/native-ui-storybook/components/lab/Box/Box.tsx index 8175a8681..7fa520965 100644 --- a/apps/native-ui-storybook/components/lab/Box/Box.tsx +++ b/apps/native-ui-storybook/components/lab/Box/Box.tsx @@ -1,9 +1,8 @@ import { ComponentProps } from 'react'; import { StoryFn } from '@storybook/react'; -import { ScrollView, Text, useStyles } from '@utilitywarehouse/native-ui'; +import { Text, useStyles } from '@utilitywarehouse/native-ui'; import { Box } from '@utilitywarehouse/native-ui/lab'; import React from 'react'; -import { SafeAreaView } from 'react-native'; import { colors } from '@utilitywarehouse/colour-system'; const BoxBasic: StoryFn<{ diff --git a/apps/native-ui-storybook/package.json b/apps/native-ui-storybook/package.json index 1fd9a8884..f88503f4d 100644 --- a/apps/native-ui-storybook/package.json +++ b/apps/native-ui-storybook/package.json @@ -36,7 +36,7 @@ "@storybook/native-addon": "^3.1.2", "@storybook/native-components": "^3.1.2", "@storybook/react-native-theming": "^7.6.20", - "@utilitywarehouse/colour-system": "0.5.0", + "@utilitywarehouse/colour-system": "workspace:^", "@utilitywarehouse/fontsource": "^0.0.6", "@utilitywarehouse/native-ui": "workspace:^", "@utilitywarehouse/react-icons": "^1.7.1", diff --git a/packages/colour-system/.gitignore b/packages/colour-system/.gitignore index 608a3645f..7dce4e18b 100644 --- a/packages/colour-system/.gitignore +++ b/packages/colour-system/.gitignore @@ -1,5 +1,4 @@ -index.js -index.mjs /types/ +/dist/ .env diff --git a/packages/colour-system/index.js b/packages/colour-system/index.js deleted file mode 100644 index 998e12b6a..000000000 --- a/packages/colour-system/index.js +++ /dev/null @@ -1,687 +0,0 @@ -'use strict'; - -Object.defineProperty(exports, '__esModule', { value: true }); - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** Use it for backgrounds. Use it for text that goes on top of Purple 600, Purple 700, Purple 800, Purple 900, and Purple 1000 backgrounds. */ -const purple50$1 = '#fbf6fd'; -/** This color replaces the use cases of lightTint. Use it for text that goes on top of Purple 600, Purple 700, Purple 800, Purple 900 and Purple 1000. */ -const purple75$1 = '#f5eef9'; -/** This color replaces the use cases of lightTint. Use it for backgrounds. Use it for text that goes on top of Purple 600, Purple 700, Purple 800, Purple 900 and Purple 1000. */ -const purple100$1 = '#ede0f2'; -/** Use it for backgrounds. Use it for text that goes on top of Purple 600, Purple 700, Purple 800, Purple 900 and Purple 1000. */ -const purple200$1 = '#e2c7eb'; -/** Use it only as a foreground against Purple 800, Purple 900, and Purple 1000. */ -const purple300$1 = '#d69ddd'; -/** Use it for borders or large text against Purple 800, Purple 900, and Purple 1000. For any other foreground elements, use it only against Purple 900 and Purple 1000. */ -const purple400$1 = '#c777df'; -/** Use it for borders, icons, and large text against white, Purple 50, Purple 100, Grey 25, Grey 50, Grey 75, and Grey 100. Use it as a background color with white as the foreground color. */ -const purple500$1 = '#af4dd5'; -/** Use it as a foreground against white and Purple 50, Purple 100, Grey 25, Grey 50, Grey 75 and Grey 100. Use it for large text, borders, and graphic elements against white and Purple 50, Purple 100, Purple 200, Grey 25, Grey 50, Grey 75, Grey 100, and Grey 150. Use it as a background color combined with a white foreground. */ -const purple600$1 = '#931cce'; -/** Use it as a foreground against white and Purple 50, Purple 100, Purple 200, Grey 25, Grey 50, Grey 75, Grey 100, and Grey 200 Use it for large text, borders, and graphic elements against white and Purple 50, Purple 100, Purple 200, Purple 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150 and Grey 200. Use it as a background color combined with a white foreground. */ -const purple700$1 = '#7209ae'; -/** This is Brand Purple - 550091. Use it as a foreground against white and Purple 50, Purple 100, Purple 200, Purple 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 200 and Grey 300. Use it for large text, borders, and graphic elements against white and Purple 50, Purple 100, Purple 200, Purple 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150 Grey 200, Grey 300 and Grey 400. Use it as a background color combined with a white foreground. */ -const purple800$1 = '#550091'; -/** Use it as a foreground against white and Purple 50, Purple 100, Purple 200, Purple 300, Purple 400, Grey 25, Grey 50, Grey 75, Grey 100, Grey 200, Grey 300 and Grey 400. Use it for large text, borders, and graphic elements against white and Purple 50, Purple 100, Purple 200, Purple 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150 Grey 200, Grey 300 and Grey 400. Use it as a background color combined with a white foreground. */ -const purple900$1 = '#400066'; -/** Use it as a foreground against white and Purple 50, Purple 100, Purple 200, Purple 300, Purple 200, Purple 400, Grey 25, Grey 50, Grey 75, Grey 100, Grey 200, Grey 300 and Grey 400. Use it for large text, borders, and graphic elements against white and Purple 50, Purple 100, Purple 200, Purple 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150 Grey 200, Grey 300, Grey 400 and Grey 500. Use it as a background color combined with a white foreground. */ -const purple1000$1 = '#1c0128'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** Use it for backgrounds. */ -const red50$1 = '#ffebeb'; -/** Use it for backgrounds. */ -const red100$1 = '#ffd8d9'; -/** Use it for backgrounds. */ -const red200$1 = '#ffb3b4'; -/** */ -const red300$1 = '#f58e92'; -/** */ -const red400$1 = '#ec515d'; -/** Use it for borders, icons, and large text against white, Red 50, Red 100, Grey 25, Grey 50, Grey 75, and Grey 100. Use it as a background color with white as the foreground color. */ -const red500$1 = '#df2a38'; -/** For text. It passes AA up to Grey 100 */ -const red600$1 = '#c31d2a'; -/** */ -const red700$1 = '#891e27'; -/** Used for active state background colour on inverted on Web */ -const red800$1 = '#611a20'; -/** */ -const red900$1 = '#3b1216'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** Use it for backgrounds. Use it for text that goes on top of Pink 700 and the darker shades of Grey. */ -const pink50$1 = '#fde6fb'; -/** Use it for backgrounds. Use it for text that goes on top of Pink 700 and Pink 900. */ -const pink100$1 = '#fccff9'; -/** */ -const pink200 = '#f9bdfa'; -/** This is Brand Pink - F495F9 You can use it as a foreground colour for Non-interactive design elements only. */ -const pink300$1 = '#f495f9'; -/** Use it for borders, icons, and large text against white, Pink 50, Pink 100, Grey 25, Grey 50, Grey 75, Grey 100 and Grey 150. Use it as a background color with white as the foreground color. */ -const pink500$1 = '#c933d1'; -/** Use it as a foreground against white and Pink 50, Pink 100, Pink 200, Grey 25, Grey 50, Grey 75, Grey 100, and Grey 150. Use it for large text, borders, and graphic elements against white and Pink 50, Pink 100, Pink 200, Pink 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150 and Grey 200. Use it as a background color combined with a white foreground. */ -const pink700$1 = '#8f248f'; -/** Use it as a foreground against white and Pink 50, Pink 100, Pink 200, Pink 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 200, and Grey 300. Use it for large text, borders, and graphic elements against white and Pink 50, Pink 100, Pink 200, Pink 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150, Grey 200, Grey 300 and Grey 400. Use it as a background color combined with a white foreground. */ -const pink900$1 = '#48104b'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** */ -const grey25$1 = '#fafafa'; -/** Replaces F7F7F7 Cod-Gray-05 */ -const grey50$1 = '#f5f5f5'; -/** Replaces F7F7F7 usage in some backgrounds */ -const grey75$1 = '#f0f0f0'; -/** This replaces E7E7E7 and Charcoal 200 */ -const grey100$1 = '#e3e3e3'; -/** */ -const grey150$1 = '#d8d8d8'; -/** Replaces Cod-Gray-10 */ -const grey175$1 = '#cccccc'; -/** Replaces Cod-Gray-20 */ -const grey200$1 = '#c1c1c1'; -/** Replaces Cod-Gray-30 */ -const grey300$1 = '#b8b8b8'; -/** Replaces Cod-Gray-40 */ -const grey400$1 = '#a0a0a0'; -/** Replaces Cod-Gray-50 */ -const grey500$1 = '#888888'; -/** Replaces Cod-Gray-60 */ -const grey600$1 = '#707070'; -/** Replaces Cod-Gray-70 */ -const grey700$1 = '#585858'; -/** Replaces Cod-Gray-80 */ -const grey800$1 = '#414141'; -/** Replaces 292929 Cod-Gray-90 */ -const grey900$1 = '#242424'; -/** Replaces 111111 */ -const grey1000$1 = '#121212'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** Use it for backgrounds. Use it for text that goes on top of Apple 800 and the darker shades of Grey. */ -const apple50 = '#e5f9ed'; -/** */ -const apple200$1 = '#c1f0d3'; -/** */ -const apple300$1 = '#96e6b7'; -/** This is Brand Apple - 62DD99. You can use it as a foreground colour for Non-interactive design elements only. */ -const apple400 = '#62dd99'; -/** Use it as a background color combined with a white foreground. */ -const apple700$1 = '#10b259'; -/** Use it as a foreground against white and Apple 50, Apple 200, Grey 25, Grey 50, Grey 75, Grey 100. Use it for large text, borders, and graphic elements against white and Apple 50, Apple 200, Grey 25, Grey 50, Grey 75, Grey 100, and Grey 200. Use it as a background color combined with a white foreground. */ -const apple800$1 = '#087a3c'; -/** Use it as a foreground against white and Apple 50, Apple 200, Apple 300, Apple 400, Grey 25, Grey 50, Grey 75, Grey 100, Grey 200 and Grey 300. Use it for large text, borders, and graphic elements against white and Apple 50, Apple 200, Apple 300, Apple 400, Grey 25, Grey 50, Grey 75, Grey 100, Grey 200, Grey 300 and Grey 400. Use it as a background color combined with a white foreground. */ -const apple900 = '#03361b'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** This colour is for backgrounds only. Replaces former Cyan-10 and Cyan-50 usage */ -const cyan50$1 = '#ecf4fe'; -/** This colour is for backgrounds only. This replaces the former Cyan-50. */ -const cyan75$1 = '#e5f1ff'; -/** */ -const cyan100$1 = '#cce0ff'; -/** This colour replaces some of the former Cyan-30 usage */ -const cyan200$1 = '#a6c8fc'; -/** This replaces the usage of former Cyan-40 */ -const cyan300$1 = '#8fbaff'; -/** This is Brand Cyan */ -const cyan400$1 = '#75a7fd'; -/** Use it for large text, borders, and graphic elements against white, Cyan 50, Grey 25, and Grey 50. Use it as a background color with white borders or graphic foreground elements. */ -const cyan500$1 = '#4789fa'; -/** Use it for large text, borders, and graphic elements against white and Cyan 50, Grey 25, Grey 50, Grey 75, Grey 100, and Grey 150. Use it as a background color combined with a white foreground. This color should replace some of the former Blue Ribbon usage. */ -const cyan600$1 = '#0550d1'; -/** */ -const cyan700$1 = '#003a9e'; -/** */ -const cyan800$1 = '#002b75'; -/** Use it for text over a Cyan/50 or Cyan/75 */ -const cyan900$1 = '#001e52'; -/** Use it for text over a Cyan/50, Cyan/75 or Cyan/100 */ -const cyan1000$1 = '#001333'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** For backgrounds of interactive and semantic components like Alert. This color is not meant to be used in the tone-by-tone Service Color. */ -const gold50$1 = '#fef9e6'; -/** This color is part of the service colours' tone-by-tone pairing. It should be used as a background for service colours but not for interactive components */ -const gold75$1 = '#fef6dc'; -/** For backgrounds */ -const gold100$1 = '#fff1d1'; -/** It can be used as a background It passes AA against Gold 700 and Gold 900 */ -const gold200$1 = '#ffe6a8'; -/** This is Brand Gold. It should be used as a foreground color with a purple 800 background. This color is not recommended for interactive components due to its limited contrast capabilities. */ -const gold300$1 = '#ffd76f'; -/** This color is intended to be used as the foreground color for non-interactive icons within the service colour palette. It's not recommended to use this colour in interactive elements. */ -const gold400$1 = '#f7b51d'; -/** Use it for large text, borders, and graphic elements against white, Gold 50, Grey 25, Grey 50 and Grey 75. Use it as a background color with white large text (24px), borders, or icons. */ -const gold500$1 = '#c77800'; -/** Use it for large text, borders, and graphic elements against white, Gold 50, Gold 100, Grey 25, Grey 50 and Grey 75. Use it as a background color with white large text (24px), borders, or icons. */ -const gold600$1 = '#ac6406'; -/** Use it for foregrounds (Icon and text) and borders against white, Gold 50, Gold 100, and Gold 200. Use it for large text, icons and borders against white, Gold 50, Gold 100, Gold 200 and Gold 300 */ -const gold700$1 = '#894e16'; -/** Used for active state background colour on inverted on Web */ -const gold800$1 = '#6e3311'; -/** Use it for foregrounds (Icon and text) and borders against white, Gold 50, Gold 100, and Gold 200. Use it for large text, icons and borders against white, Gold 50, Gold 100, Gold 200, Gold 300 and Gold 500 */ -const gold900$1 = '#52210c'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** For backgrounds */ -const green50$1 = '#eefcf3'; -/** For backgrounds */ -const green100$1 = '#e0f5e8'; -/** Background */ -const green200$1 = '#bdead0'; -/** */ -const green300$1 = '#a3e1bf'; -/** */ -const green400$1 = '#2fb66d'; -/** Employ it for borders, icons, and exclusively for large text against white, Green 50, Grey 25, and Grey 50. Use it as a background colour, pairing it with white, for instance, in buttons. It's ideal for icons placed next to text in green 600. However, it's not the most suitable choice for small text; for that, stick with green 600. */ -const green500$1 = '#1c874d'; -/** For text, icons and border against white, Green 50 and Green 100 For text, icons and border against white Green 50, Green 100 and Green 200, Grey 25, Grey 50 and Grey 100. For backgrounds with a white foreground. */ -const green600$1 = '#297f50'; -/** For text, icons and border against white Green 50 and Green 100 For text, icons and border against white Green 50, Green 100 and Green 200, Grey 25, Grey 50 */ -const green700$1 = '#21693f'; -/** Used for active state background colour on inverted on Web */ -const green800$1 = '#0a522c'; -/** For foreground against white, Green 50, Grey 50, Grey 100, Green 100, Green 200 and Green 300 For text, icons and border against Green 50, Green 100, Green 200 and Green 300 */ -const green900$1 = '#003d1e'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** It replaces Grape-50. Use it for backgrounds. Use it for text that goes on Grape 800, and the darker shades of Grey. */ -const grape50 = '#f1e6fb'; -/** It replaces Grape-100. Use it for backgrounds. Use it for text that goes on Grape 800, and the darker shades of Grey. */ -const grape100$1 = '#e4d3f8'; -/** Replaces Grape-100. Use it for backgrounds. Use it for text that goes on Grape 800, and the darker shades of Grey. */ -const grape200$1 = '#d4baf3'; -/** Replaces Grape-200 */ -const grape300 = '#bc92ed'; -/** This is Brand Grape - A66DE8 This color doesn't pass AA as a foreground against any background color. Use this color only on borders, large text, and icons against a white background. */ -const grape400 = '#a66de8'; -/** Use for any foreground against Grape 50, Grape 100, , Grey 25, Grey 50, Grey 75, and Grey 100. Use it for borders, icons, and large text against white, Grape 50, Grape 100, Grape 200, Grey 25, Grey 50, Grey 75, Grey 100 and Grey 150. Use it as a background color with white as the foreground color. */ -const grape500$1 = '#7b39c6'; -/** */ -const grape800$1 = '#2c094e'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** It replaces Rose-50 Use it for backgrounds. Use it for text that goes on Rose 700, Rose 800, and the darker shades of Grey. */ -const rose50 = '#fde2ec'; -/** Replaces Rose-100. Use it for backgrounds. Use it for text that goes on Rose 700, Rose 800, and the darker shades of Grey. */ -const rose200$1 = '#f9b6d0'; -/** Replaces Rose-200. */ -const rose300 = '#f586b1'; -/** This is Brand Rose - F25192 This color doesn't pass AA as a foreground against any background color. Use this color only on borders, large text, and icons against a white background. */ -const rose400 = '#f25192'; -/** Use it for borders, icons, and large text against white, Rose 50, Grey 25, Grey 50, Grey 75 and Grey 100. */ -const rose500$1 = '#ed176c'; -/** */ -const rose700$1 = '#c8185c'; -/** Use is as any foreground against Rose 100, Rose 200 or any Grey shade in the range of 25 to 150. Use it for borders, icons, and large text against white, Rose 50, Rose 200, Rose 300, or any Grey shade in the range of 25 to 200. Use it as a background color with white as the foreground color. */ -const rose800$1 = '#9f1446'; -/** Use is as any foreground against Rose 100, Rose 200, Rose 300, Rose 400 or any Grey shade in the range of 25 to 300. */ -const rose900 = '#4a1125'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. - -var index$2 = /*#__PURE__*/Object.freeze({ - __proto__: null, - purple50: purple50$1, - purple75: purple75$1, - purple100: purple100$1, - purple200: purple200$1, - purple300: purple300$1, - purple400: purple400$1, - purple500: purple500$1, - purple600: purple600$1, - purple700: purple700$1, - purple800: purple800$1, - purple900: purple900$1, - purple1000: purple1000$1, - red50: red50$1, - red100: red100$1, - red200: red200$1, - red300: red300$1, - red400: red400$1, - red500: red500$1, - red600: red600$1, - red700: red700$1, - red800: red800$1, - red900: red900$1, - pink50: pink50$1, - pink100: pink100$1, - pink200: pink200, - pink300: pink300$1, - pink500: pink500$1, - pink700: pink700$1, - pink900: pink900$1, - grey25: grey25$1, - grey50: grey50$1, - grey75: grey75$1, - grey100: grey100$1, - grey150: grey150$1, - grey175: grey175$1, - grey200: grey200$1, - grey300: grey300$1, - grey400: grey400$1, - grey500: grey500$1, - grey600: grey600$1, - grey700: grey700$1, - grey800: grey800$1, - grey900: grey900$1, - grey1000: grey1000$1, - apple50: apple50, - apple200: apple200$1, - apple300: apple300$1, - apple400: apple400, - apple700: apple700$1, - apple800: apple800$1, - apple900: apple900, - cyan50: cyan50$1, - cyan75: cyan75$1, - cyan100: cyan100$1, - cyan200: cyan200$1, - cyan300: cyan300$1, - cyan400: cyan400$1, - cyan500: cyan500$1, - cyan600: cyan600$1, - cyan700: cyan700$1, - cyan800: cyan800$1, - cyan900: cyan900$1, - cyan1000: cyan1000$1, - gold50: gold50$1, - gold75: gold75$1, - gold100: gold100$1, - gold200: gold200$1, - gold300: gold300$1, - gold400: gold400$1, - gold500: gold500$1, - gold600: gold600$1, - gold700: gold700$1, - gold800: gold800$1, - gold900: gold900$1, - green50: green50$1, - green100: green100$1, - green200: green200$1, - green300: green300$1, - green400: green400$1, - green500: green500$1, - green600: green600$1, - green700: green700$1, - green800: green800$1, - green900: green900$1, - grape50: grape50, - grape100: grape100$1, - grape200: grape200$1, - grape300: grape300, - grape400: grape400, - grape500: grape500$1, - grape800: grape800$1, - rose50: rose50, - rose200: rose200$1, - rose300: rose300, - rose400: rose400, - rose500: rose500$1, - rose700: rose700$1, - rose800: rose800$1, - rose900: rose900 -}); - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** Use it for backgrounds. Use it for text that goes on top of Purple 500, Purple 600, Purple 700, Purple 800, Purple 900, and Purple 1000 backgrounds. */ -const purple50 = '#140218'; -/** Use it for backgrounds. Use it for text that goes on top of Purple 600, Purple 700, Purple 800, Purple 900, and Purple 1000 backgrounds. */ -const purple75 = '#1c0128'; -/** Use it for backgrounds. Use it for text that goes on top of Purple 600, Purple 700, Purple 800, Purple 900, and Purple 1000 backgrounds. */ -const purple100 = '#26013c'; -/** Use it for backgrounds. Use it for text that goes on top of Purple 600, Purple 700, Purple 800, Purple 900 and Purple 1000. */ -const purple200 = '#400066'; -/** This is Brand Purple. Background colour Use it only as a foreground against Purple 800, Purple 900, and Purple 1000. */ -const purple300 = '#550091'; -/** */ -const purple400 = '#982ed6'; -/** Use it for borders, icons, and large text against Purple 50, Purple 75, Purple 100, Purple 200, Grey 25, Grey 50, Grey 75, Grey 100, Grey 200 and Grey 300. */ -const purple500 = '#af4dd5'; -/** Use it as a foreground against Purple 50, Purple 100, Grey 25, Grey 50, Grey 75 and Grey 100. Use it for large text, borders, and graphic elements against white and Purple 50, Purple 100, Purple 200, Grey 25, Grey 50, Grey 75, Grey 100, and Grey 150. */ -const purple600 = '#c777df'; -/** Use it as a foreground against Purple 50, Purple 100, Purple 200, Purple 300, Grey 25, Grey 50, Grey 75, Grey 100, and Grey 200. Use it for large text, borders, and graphic elements against white and Purple 50, Purple 100, Purple 200, Purple 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150 and Grey 200. */ -const purple700 = '#d192d9'; -/** Use it as a foreground against white and Purple 50, Purple 100, Purple 200, Purple 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 200 and Grey 300. Use it for large text, borders, and graphic elements against Purple 50, Purple 100, Purple 200, Purple 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150, Grey 200, Grey 300 and Grey 400. */ -const purple800 = '#ddbde7'; -/** Use it as a foreground against Purple 50, Purple 100, Purple 200, Purple 300, Purple 200, Purple 400, Grey 25, Grey 50, Grey 75, Grey 100, Grey 200, Grey 300, and Grey 400. Use it for large text, borders, and graphic elements against white and Purple 50, Purple 100, Purple 200, Purple 300, Grey 25, Grey50, Grey 75, Grey 100, Grey 150 Grey 200, Grey 300 and Grey 400. */ -const purple900 = '#ede0f2'; -/** */ -const purple1000 = '#f5eef9'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** For backgrounds mostly. Use as a background with any foreground using Gold 500, Gold 700 and Gold 900. */ -const gold50 = '#2e1103'; -/** */ -const gold75 = '#411907'; -/** For backgrounds mostly. Use as a background with any foreground using Gold 500, Gold 700 and Gold 900. It passes AA with large text, borders and icons against combined with Gold 400. */ -const gold100 = '#52210c'; -/** */ -const gold200 = '#743711'; -/** Use it as a background It passes AA against Gold 900 It passes AA on large text and icons against Gold 700 */ -const gold300 = '#925317'; -/** Use it as a background It passes AA as a foreground against Gold 50. It passes AA with large text, borders and icons against Gold 100. */ -const gold400 = '#cd7d04'; -/** It passes AA as a foreground against Gold 50, Gold 100, Grey 50, Grey 75, Grey 100 and Grey 150, Grey 200 and Grey 300. Use it for borders, icons, and large text against Gold 50, Gold 100, Gold 300, Grey 25, Grey 50, Grey 75, Grey 100 and Grey 150. */ -const gold500 = '#f7b51d'; -/** This colour is used on Helper Text in form components. This colour can be used against grey.50 and up to grey.175 and over gold.50 */ -const gold600 = '#fbc64b'; -/** This is Brand Gold. For any foreground, it passes AA against Gold 50, Gold 100, Grey 50, Grey 75, Grey 100, Grey 150, Grey 200, Grey 300, and Grey 400. Use it for borders, icons, and large text against Gold 50, Gold 100, Gold 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150, Grey 300, Grey 400, and Grey 500. */ -const gold700 = '#ffd76f'; -/** */ -const gold800 = '#ffe6a8'; -/** For any foreground, it passes AA against Gold 50, Gold 100, Gold 300, Grey 50, Grey 75, Grey 100, Grey 150, Grey 200, Grey 300, and Grey 400. */ -const gold900 = '#fff6e0'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** Use it for backgrounds. Use it for text that goes on top of Pink 700 and up to Grey 300. */ -const pink50 = '#2c0a2e'; -/** Use it for backgrounds. Use it for text that goes on top of Pink 700, Pink 900 and Pink 950. */ -const pink100 = '#48104b'; -/** */ -const pink300 = '#8f248f'; -/** Use it for borders, icons, and large text against Pink 50, Pink 100, Grey 25, Grey 50, Grey 75, Grey 100 and Grey 150. Use it as a background color with white as the foreground color. */ -const pink500 = '#c933d1'; -/** AKA Brand Pink Use it as a foreground against Pink 50, Pink 100, Grey 25, Grey 50, Grey 75, Grey 100, and Grey 150. Use it for large text, borders, and graphic elements against white and Pink 50, Pink 100, Pink 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150 and Grey 200. */ -const pink700 = '#f495f9'; -/** Use it as a foreground against Pink 50, Pink 100, Pink 300, Grey 25, Grey 50, Grey 75, Grey 00, Grey 200, and Grey 300. Use it for large text, borders, and graphic elements against white and Pink 50, Pink 100, Pink 200, Pink 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150, Grey 200, Grey 300 and Grey 400. */ -const pink900 = '#fccff9'; -/** Use it as a foreground against Pink 50, Pink 100, Pink 300 Grey 25, Grey 50, Grey 75, Grey 100, Grey 200, and Grey 300. Use it for large text, borders, and graphic elements against Pink 50, Pink 100, Pink 200, Pink 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150 Grey 200, Grey 300 and Grey 400. */ -const pink950 = '#fde6fb'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** This is to use instead of using pure black. */ -const grey25 = '#050505'; -/** This is to use instead of using pure black. */ -const grey50 = '#0b0b0b'; -/** This colour is to be used instead of 111111 - Background-00 */ -const grey75 = '#121212'; -/** To use instead of Background-01 */ -const grey100 = '#1d1d1d'; -/** To be used instead of Background-03 */ -const grey150 = '#242424'; -/** to replace Background-06 2B2B2B */ -const grey175 = '#2c2c2c'; -/** To use in the context of Background-12 */ -const grey200 = '#323232'; -/** AKA as 16 */ -const grey300 = '#414141'; -/** */ -const grey400 = '#585858'; -/** */ -const grey500 = '#707070'; -/** AKA subdued text */ -const grey600 = '#b8b8b8'; -/** AKA placeholder text */ -const grey700 = '#c1c1c1'; -/** Replaces E7E7E7. AKA regular text */ -const grey800 = '#e3e3e3'; -/** To replace F7F7F7 */ -const grey900 = '#f0f0f0'; -/** Can be used for: Headings */ -const grey1000 = '#fafafa'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** Backgrounds */ -const cyan50 = '#010a19'; -/** Backgrounds */ -const cyan75 = '#001333'; -/** Backgrounds */ -const cyan100 = '#011537'; -/** */ -const cyan200 = '#00225c'; -/** Backgrounds */ -const cyan300 = '#002d80'; -/** Backgrounds */ -const cyan400 = '#013992'; -/** Use it for large text, borders, and graphic elements against Cyan 50, Grey 25, Grey 50 and Grey 75. Also, use it as a background color with white borders or graphic foreground elements. */ -const cyan500 = '#0658e5'; -/** Use it for any foreground against Cyan 50, Cyan 75, Cyan 100, Cyan 200, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150, and Grey 175. Use it for large text, borders, and graphic elements against Cyan 50, Cyan 75, Cyan 100, Cyan 200, Cyan 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150, Grey 175 and Grey 200. Additionally, use it as a background color with white borders or graphic foreground elements. */ -const cyan600 = '#5692fb'; -/** It passes AA as a foreground against cyan 50, Cyan 75, Cyan 100, Cyan 200, and Cyan 300. It passes AA when used in border, icons and large text against Cyan 400. */ -const cyan700 = '#75a7fd'; -/** It passes AA as a foreground against Cyan 50, Cyan 75, Cyan 100, Cyan 200, Cyan 300, and Cyan 400. It passes AA when used in border, icons and large text against Cyan 500. */ -const cyan800 = '#a6c8fc'; -/** It passes AA as a foreground against Cyan 50, Cyan 75, Cyan 100, Cyan 200, Cyan 300, Cyan 400, and Cyan 500. */ -const cyan900 = '#dbeaff'; -/** It passes AA as a foreground against Cyan 50, Cyan 75, Cyan 100, Cyan 200, Cyan 300, Cyan 400, and Cyan 500. */ -const cyan1000 = '#ecf4fe'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** Use it as a background colour */ -const red50 = '#3b1216'; -/** */ -const red100 = '#581a20'; -/** */ -const red200 = '#721d25'; -/** */ -const red300 = '#891e27'; -/** */ -const red400 = '#bd1f2c'; -/** Use it for borders, icons, and large text against Red 50, Red 100, Grey 25, Grey 50, Grey 75, Grey 100 and Grey 150. Use it as any type of foreground with Grey 25, Grey 50, Grey 75 and 100. */ -const red500 = '#f24550'; -/** This colour is used on Helper Text in form components. This colour can be used against grey.50 and up to grey.175 and over red.50 */ -const red600 = '#f2636a'; -/** Use it for borders, icons, and large text against Red 50, Red 100, Grey 25, Grey 50, Grey 75, Grey 100 and Grey 150. Use it as any type of foreground combined with Grey 25, Grey 50, Grey 75, Grey 100, Grey 150, Grey 175 and Grey 200. */ -const red700 = '#f58e92'; -/** For text */ -const red800 = '#f9aeb3'; -/** Use it as any type of foreground combined with Red 50, Red 100, Red 300, Red 400, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150, Grey 175 and Grey 200. */ -const red900 = '#ffebeb'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** backgrounds only */ -const green50 = '#133922'; -/** backgrounds */ -const green100 = '#164429'; -/** */ -const green200 = '#1b5533'; -/** */ -const green300 = '#21693f'; -/** For borders, icons and outlines against Green 50. Not suitable for small text. */ -const green400 = '#34a868'; -/** Use it for any foreground against Green 50, Green 100, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150, and Grey 175. Use it for large text, borders, and graphic elements against Green 50, Green 100, Green 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150, Grey 175 and Grey 200. Additionally, use it as a background color with white borders or graphic foreground elements. */ -const green500 = '#55ce8b'; -/** This colour is used on Helper Text in form components. This colour can be used against grey.50 and up to grey.175 and over green.50 */ -const green600 = '#76d5a1'; -/** For text and borders */ -const green700 = '#90dab2'; -/** */ -const green800 = '#bae8cf'; -/** For text */ -const green900 = '#e3faeb'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** Use it for backgrounds. Use it for text that goes on top of Apple 800 and the lighter shades of Grey. */ -const apple100 = '#03361b'; -/** */ -const apple200 = '#087a3c'; -/** */ -const apple300 = '#10b259'; -/** This is Brand Apple You can use it as a foreground colour for Non-interactive design elements only. */ -const apple600 = '#62dd99'; -/** Use if for any foreground Apple 100, Grey 25, Grey 50, Grey 75, Grey 100 and Grey 150. Use it for large text, borders, and graphic elements against Apple 100, Apple 200, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150, Grey 175, Grey 200, Grey 300 and Grey 400. */ -const apple700 = '#96e6b7'; -/** Use it as a foreground against white and Apple 100, Apple 200, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150, Grey 175, Grey 200, Grey 300 and Grey 400. Use it for large text, borders, and graphic elements against white and Apple 100, Apple 200, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150, Grey 175, Grey 200, Grey 300 and Grey 400. */ -const apple800 = '#c1f0d3'; -/** Use it as a foreground against white and Apple 50, Apple 200, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150, Grey 175, Grey 200, Grey 300, Grey 400 and Grey 500. Use it for large text, borders, and graphic elements against white and Apple 50, Apple 200, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150, Grey 175, Grey 200, Grey 300 and Grey 400. */ -const apple950 = '#e5f9ed'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** For backgrounds mostly. Foregrounds that can be used against this color range from Grape 700 and up. It passes AA with large text, borders and icons against combined with Grape 500. */ -const grape100 = '#240444'; -/** For backgrounds mostly. Foregrounds that can be used against this color range from Grape 700 and up. It passes AA with large text, borders and icons against combined with Grape 500. */ -const grape200 = '#2d025e'; -/** Use this color only for borders, large text, and icons against a background of Grape 100, Grape 200, or any Grey shade in the range of 50 to 150. */ -const grape500 = '#7b39c6'; -/** Brand Grape. Use is as any foreground against Grape 100, Grape 200 or any Grey shade in the range of 50 to 100. Use this color only for borders, large text, and icons against a background of Grape 100, Grape 200, or any Grey shade in the range of 50 to 150. */ -const grape600 = '#a66de8'; -/** Use is as any foreground against Grape 100, Grape 200 or any Grey shade in the range of 50 to 200. */ -const grape700 = '#bc92ed'; -/** Use is as any foreground against Grape 100, Grape 200 or any Grey shade in the range of 50 to 300. */ -const grape800 = '#d4baf3'; -/** Use is as any foreground against Grape 100, Grape 200 or any Grey shade in the range of 50 to 300. */ -const grape950 = '#f1e6fb'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** Use it for backgrounds. Use it for text that goes on Rose 600, Rose 700, Rose 800, Rose 950, and the lighter shades of Grey. */ -const rose100 = '#45081e'; -/** Use it for backgrounds. Use it for text that goes on Rose 700, Rose 800, Rose 950, and the lighter shades of Grey. */ -const rose200 = '#710e32'; -/** Use it for borders, icons, and large text against Rose 100, Rose 200, Grey 25, Grey 50, Grey 75, Grey 100, and Grey 150. */ -const rose500 = '#e34584'; -/** This is Brand Rose - F25192 Use it for borders, icons, and large text against Rose 100, Rose 200, Grey 25, Grey 50, Grey 75, Grey 100, and Grey 150. */ -const rose600 = '#f25192'; -/** Replaces Rose-200. */ -const rose700 = '#f586b1'; -/** Replaces Rose-100. */ -const rose800 = '#f9b6d0'; -/** It replaces Rose-50 */ -const rose950 = '#fde2ec'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. - -var index$1 = /*#__PURE__*/Object.freeze({ - __proto__: null, - purple50: purple50, - purple75: purple75, - purple100: purple100, - purple200: purple200, - purple300: purple300, - purple400: purple400, - purple500: purple500, - purple600: purple600, - purple700: purple700, - purple800: purple800, - purple900: purple900, - purple1000: purple1000, - gold50: gold50, - gold75: gold75, - gold100: gold100, - gold200: gold200, - gold300: gold300, - gold400: gold400, - gold500: gold500, - gold600: gold600, - gold700: gold700, - gold800: gold800, - gold900: gold900, - pink50: pink50, - pink100: pink100, - pink300: pink300, - pink500: pink500, - pink700: pink700, - pink900: pink900, - pink950: pink950, - grey25: grey25, - grey50: grey50, - grey75: grey75, - grey100: grey100, - grey150: grey150, - grey175: grey175, - grey200: grey200, - grey300: grey300, - grey400: grey400, - grey500: grey500, - grey600: grey600, - grey700: grey700, - grey800: grey800, - grey900: grey900, - grey1000: grey1000, - cyan50: cyan50, - cyan75: cyan75, - cyan100: cyan100, - cyan200: cyan200, - cyan300: cyan300, - cyan400: cyan400, - cyan500: cyan500, - cyan600: cyan600, - cyan700: cyan700, - cyan800: cyan800, - cyan900: cyan900, - cyan1000: cyan1000, - red50: red50, - red100: red100, - red200: red200, - red300: red300, - red400: red400, - red500: red500, - red600: red600, - red700: red700, - red800: red800, - red900: red900, - green50: green50, - green100: green100, - green200: green200, - green300: green300, - green400: green400, - green500: green500, - green600: green600, - green700: green700, - green800: green800, - green900: green900, - apple100: apple100, - apple200: apple200, - apple300: apple300, - apple600: apple600, - apple700: apple700, - apple800: apple800, - apple950: apple950, - grape100: grape100, - grape200: grape200, - grape500: grape500, - grape600: grape600, - grape700: grape700, - grape800: grape800, - grape950: grape950, - rose100: rose100, - rose200: rose200, - rose500: rose500, - rose600: rose600, - rose700: rose700, - rose800: rose800, - rose950: rose950 -}); - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** Midnight can be utilised in any theme as a background or foreground color. */ -const brandMidnight = '#1e0a46'; -/** White can be utilised in any theme as a background, border or foreground color. */ -const brandWhite = '#ffffff'; -/** Same as `colors.pink300`. Pink is predominantly used for our graphic line, from our main flow line and simple objects, to our UW monogram and iconography. We also use pink to highlight key words in headlines. */ -const brandPink = '#f495f9'; -/** Same as `colors.purple800`. Purple is our hero colour. It’s both ownable and instantly recognisable, and we use it a lot; it’s at the core of our brand and it’s normally the first colour you or a customer will be exposed to. */ -const brandPrimaryPurple = '#550091'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** Same as `colors.cyan400`. Use for Gas services. */ -const serviceGas = '#75A7FD'; -/** Same as `colors.apple400`. Use for Electricity services. */ -const serviceElectricity = '#62DD99'; -/** Same as `colors.rose400`. Use for Insurance services. */ -const serviceInsurance = '#F25192'; -/** Same as `colors.gold300`. Use for Mobile services. */ -const serviceMobile = '#FFD76F'; -/** Same as `colors.grape400`. Use for Landline & Homephone services. */ -const serviceLandline = '#A66DE8'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. - -var index = /*#__PURE__*/Object.freeze({ - __proto__: null, - brandMidnight: brandMidnight, - brandWhite: brandWhite, - brandPink: brandPink, - brandPrimaryPurple: brandPrimaryPurple, - serviceGas: serviceGas, - serviceElectricity: serviceElectricity, - serviceInsurance: serviceInsurance, - serviceMobile: serviceMobile, - serviceLandline: serviceLandline -}); - -exports.colors = index$2; -exports.colorsCommon = index; -exports.colorsDark = index$1; diff --git a/packages/colour-system/index.mjs b/packages/colour-system/index.mjs deleted file mode 100644 index 63a8f46c8..000000000 --- a/packages/colour-system/index.mjs +++ /dev/null @@ -1,681 +0,0 @@ -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** Use it for backgrounds. Use it for text that goes on top of Purple 600, Purple 700, Purple 800, Purple 900, and Purple 1000 backgrounds. */ -const purple50$1 = '#fbf6fd'; -/** This color replaces the use cases of lightTint. Use it for text that goes on top of Purple 600, Purple 700, Purple 800, Purple 900 and Purple 1000. */ -const purple75$1 = '#f5eef9'; -/** This color replaces the use cases of lightTint. Use it for backgrounds. Use it for text that goes on top of Purple 600, Purple 700, Purple 800, Purple 900 and Purple 1000. */ -const purple100$1 = '#ede0f2'; -/** Use it for backgrounds. Use it for text that goes on top of Purple 600, Purple 700, Purple 800, Purple 900 and Purple 1000. */ -const purple200$1 = '#e2c7eb'; -/** Use it only as a foreground against Purple 800, Purple 900, and Purple 1000. */ -const purple300$1 = '#d69ddd'; -/** Use it for borders or large text against Purple 800, Purple 900, and Purple 1000. For any other foreground elements, use it only against Purple 900 and Purple 1000. */ -const purple400$1 = '#c777df'; -/** Use it for borders, icons, and large text against white, Purple 50, Purple 100, Grey 25, Grey 50, Grey 75, and Grey 100. Use it as a background color with white as the foreground color. */ -const purple500$1 = '#af4dd5'; -/** Use it as a foreground against white and Purple 50, Purple 100, Grey 25, Grey 50, Grey 75 and Grey 100. Use it for large text, borders, and graphic elements against white and Purple 50, Purple 100, Purple 200, Grey 25, Grey 50, Grey 75, Grey 100, and Grey 150. Use it as a background color combined with a white foreground. */ -const purple600$1 = '#931cce'; -/** Use it as a foreground against white and Purple 50, Purple 100, Purple 200, Grey 25, Grey 50, Grey 75, Grey 100, and Grey 200 Use it for large text, borders, and graphic elements against white and Purple 50, Purple 100, Purple 200, Purple 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150 and Grey 200. Use it as a background color combined with a white foreground. */ -const purple700$1 = '#7209ae'; -/** This is Brand Purple - 550091. Use it as a foreground against white and Purple 50, Purple 100, Purple 200, Purple 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 200 and Grey 300. Use it for large text, borders, and graphic elements against white and Purple 50, Purple 100, Purple 200, Purple 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150 Grey 200, Grey 300 and Grey 400. Use it as a background color combined with a white foreground. */ -const purple800$1 = '#550091'; -/** Use it as a foreground against white and Purple 50, Purple 100, Purple 200, Purple 300, Purple 400, Grey 25, Grey 50, Grey 75, Grey 100, Grey 200, Grey 300 and Grey 400. Use it for large text, borders, and graphic elements against white and Purple 50, Purple 100, Purple 200, Purple 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150 Grey 200, Grey 300 and Grey 400. Use it as a background color combined with a white foreground. */ -const purple900$1 = '#400066'; -/** Use it as a foreground against white and Purple 50, Purple 100, Purple 200, Purple 300, Purple 200, Purple 400, Grey 25, Grey 50, Grey 75, Grey 100, Grey 200, Grey 300 and Grey 400. Use it for large text, borders, and graphic elements against white and Purple 50, Purple 100, Purple 200, Purple 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150 Grey 200, Grey 300, Grey 400 and Grey 500. Use it as a background color combined with a white foreground. */ -const purple1000$1 = '#1c0128'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** Use it for backgrounds. */ -const red50$1 = '#ffebeb'; -/** Use it for backgrounds. */ -const red100$1 = '#ffd8d9'; -/** Use it for backgrounds. */ -const red200$1 = '#ffb3b4'; -/** */ -const red300$1 = '#f58e92'; -/** */ -const red400$1 = '#ec515d'; -/** Use it for borders, icons, and large text against white, Red 50, Red 100, Grey 25, Grey 50, Grey 75, and Grey 100. Use it as a background color with white as the foreground color. */ -const red500$1 = '#df2a38'; -/** For text. It passes AA up to Grey 100 */ -const red600$1 = '#c31d2a'; -/** */ -const red700$1 = '#891e27'; -/** Used for active state background colour on inverted on Web */ -const red800$1 = '#611a20'; -/** */ -const red900$1 = '#3b1216'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** Use it for backgrounds. Use it for text that goes on top of Pink 700 and the darker shades of Grey. */ -const pink50$1 = '#fde6fb'; -/** Use it for backgrounds. Use it for text that goes on top of Pink 700 and Pink 900. */ -const pink100$1 = '#fccff9'; -/** */ -const pink200 = '#f9bdfa'; -/** This is Brand Pink - F495F9 You can use it as a foreground colour for Non-interactive design elements only. */ -const pink300$1 = '#f495f9'; -/** Use it for borders, icons, and large text against white, Pink 50, Pink 100, Grey 25, Grey 50, Grey 75, Grey 100 and Grey 150. Use it as a background color with white as the foreground color. */ -const pink500$1 = '#c933d1'; -/** Use it as a foreground against white and Pink 50, Pink 100, Pink 200, Grey 25, Grey 50, Grey 75, Grey 100, and Grey 150. Use it for large text, borders, and graphic elements against white and Pink 50, Pink 100, Pink 200, Pink 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150 and Grey 200. Use it as a background color combined with a white foreground. */ -const pink700$1 = '#8f248f'; -/** Use it as a foreground against white and Pink 50, Pink 100, Pink 200, Pink 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 200, and Grey 300. Use it for large text, borders, and graphic elements against white and Pink 50, Pink 100, Pink 200, Pink 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150, Grey 200, Grey 300 and Grey 400. Use it as a background color combined with a white foreground. */ -const pink900$1 = '#48104b'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** */ -const grey25$1 = '#fafafa'; -/** Replaces F7F7F7 Cod-Gray-05 */ -const grey50$1 = '#f5f5f5'; -/** Replaces F7F7F7 usage in some backgrounds */ -const grey75$1 = '#f0f0f0'; -/** This replaces E7E7E7 and Charcoal 200 */ -const grey100$1 = '#e3e3e3'; -/** */ -const grey150$1 = '#d8d8d8'; -/** Replaces Cod-Gray-10 */ -const grey175$1 = '#cccccc'; -/** Replaces Cod-Gray-20 */ -const grey200$1 = '#c1c1c1'; -/** Replaces Cod-Gray-30 */ -const grey300$1 = '#b8b8b8'; -/** Replaces Cod-Gray-40 */ -const grey400$1 = '#a0a0a0'; -/** Replaces Cod-Gray-50 */ -const grey500$1 = '#888888'; -/** Replaces Cod-Gray-60 */ -const grey600$1 = '#707070'; -/** Replaces Cod-Gray-70 */ -const grey700$1 = '#585858'; -/** Replaces Cod-Gray-80 */ -const grey800$1 = '#414141'; -/** Replaces 292929 Cod-Gray-90 */ -const grey900$1 = '#242424'; -/** Replaces 111111 */ -const grey1000$1 = '#121212'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** Use it for backgrounds. Use it for text that goes on top of Apple 800 and the darker shades of Grey. */ -const apple50 = '#e5f9ed'; -/** */ -const apple200$1 = '#c1f0d3'; -/** */ -const apple300$1 = '#96e6b7'; -/** This is Brand Apple - 62DD99. You can use it as a foreground colour for Non-interactive design elements only. */ -const apple400 = '#62dd99'; -/** Use it as a background color combined with a white foreground. */ -const apple700$1 = '#10b259'; -/** Use it as a foreground against white and Apple 50, Apple 200, Grey 25, Grey 50, Grey 75, Grey 100. Use it for large text, borders, and graphic elements against white and Apple 50, Apple 200, Grey 25, Grey 50, Grey 75, Grey 100, and Grey 200. Use it as a background color combined with a white foreground. */ -const apple800$1 = '#087a3c'; -/** Use it as a foreground against white and Apple 50, Apple 200, Apple 300, Apple 400, Grey 25, Grey 50, Grey 75, Grey 100, Grey 200 and Grey 300. Use it for large text, borders, and graphic elements against white and Apple 50, Apple 200, Apple 300, Apple 400, Grey 25, Grey 50, Grey 75, Grey 100, Grey 200, Grey 300 and Grey 400. Use it as a background color combined with a white foreground. */ -const apple900 = '#03361b'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** This colour is for backgrounds only. Replaces former Cyan-10 and Cyan-50 usage */ -const cyan50$1 = '#ecf4fe'; -/** This colour is for backgrounds only. This replaces the former Cyan-50. */ -const cyan75$1 = '#e5f1ff'; -/** */ -const cyan100$1 = '#cce0ff'; -/** This colour replaces some of the former Cyan-30 usage */ -const cyan200$1 = '#a6c8fc'; -/** This replaces the usage of former Cyan-40 */ -const cyan300$1 = '#8fbaff'; -/** This is Brand Cyan */ -const cyan400$1 = '#75a7fd'; -/** Use it for large text, borders, and graphic elements against white, Cyan 50, Grey 25, and Grey 50. Use it as a background color with white borders or graphic foreground elements. */ -const cyan500$1 = '#4789fa'; -/** Use it for large text, borders, and graphic elements against white and Cyan 50, Grey 25, Grey 50, Grey 75, Grey 100, and Grey 150. Use it as a background color combined with a white foreground. This color should replace some of the former Blue Ribbon usage. */ -const cyan600$1 = '#0550d1'; -/** */ -const cyan700$1 = '#003a9e'; -/** */ -const cyan800$1 = '#002b75'; -/** Use it for text over a Cyan/50 or Cyan/75 */ -const cyan900$1 = '#001e52'; -/** Use it for text over a Cyan/50, Cyan/75 or Cyan/100 */ -const cyan1000$1 = '#001333'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** For backgrounds of interactive and semantic components like Alert. This color is not meant to be used in the tone-by-tone Service Color. */ -const gold50$1 = '#fef9e6'; -/** This color is part of the service colours' tone-by-tone pairing. It should be used as a background for service colours but not for interactive components */ -const gold75$1 = '#fef6dc'; -/** For backgrounds */ -const gold100$1 = '#fff1d1'; -/** It can be used as a background It passes AA against Gold 700 and Gold 900 */ -const gold200$1 = '#ffe6a8'; -/** This is Brand Gold. It should be used as a foreground color with a purple 800 background. This color is not recommended for interactive components due to its limited contrast capabilities. */ -const gold300$1 = '#ffd76f'; -/** This color is intended to be used as the foreground color for non-interactive icons within the service colour palette. It's not recommended to use this colour in interactive elements. */ -const gold400$1 = '#f7b51d'; -/** Use it for large text, borders, and graphic elements against white, Gold 50, Grey 25, Grey 50 and Grey 75. Use it as a background color with white large text (24px), borders, or icons. */ -const gold500$1 = '#c77800'; -/** Use it for large text, borders, and graphic elements against white, Gold 50, Gold 100, Grey 25, Grey 50 and Grey 75. Use it as a background color with white large text (24px), borders, or icons. */ -const gold600$1 = '#ac6406'; -/** Use it for foregrounds (Icon and text) and borders against white, Gold 50, Gold 100, and Gold 200. Use it for large text, icons and borders against white, Gold 50, Gold 100, Gold 200 and Gold 300 */ -const gold700$1 = '#894e16'; -/** Used for active state background colour on inverted on Web */ -const gold800$1 = '#6e3311'; -/** Use it for foregrounds (Icon and text) and borders against white, Gold 50, Gold 100, and Gold 200. Use it for large text, icons and borders against white, Gold 50, Gold 100, Gold 200, Gold 300 and Gold 500 */ -const gold900$1 = '#52210c'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** For backgrounds */ -const green50$1 = '#eefcf3'; -/** For backgrounds */ -const green100$1 = '#e0f5e8'; -/** Background */ -const green200$1 = '#bdead0'; -/** */ -const green300$1 = '#a3e1bf'; -/** */ -const green400$1 = '#2fb66d'; -/** Employ it for borders, icons, and exclusively for large text against white, Green 50, Grey 25, and Grey 50. Use it as a background colour, pairing it with white, for instance, in buttons. It's ideal for icons placed next to text in green 600. However, it's not the most suitable choice for small text; for that, stick with green 600. */ -const green500$1 = '#1c874d'; -/** For text, icons and border against white, Green 50 and Green 100 For text, icons and border against white Green 50, Green 100 and Green 200, Grey 25, Grey 50 and Grey 100. For backgrounds with a white foreground. */ -const green600$1 = '#297f50'; -/** For text, icons and border against white Green 50 and Green 100 For text, icons and border against white Green 50, Green 100 and Green 200, Grey 25, Grey 50 */ -const green700$1 = '#21693f'; -/** Used for active state background colour on inverted on Web */ -const green800$1 = '#0a522c'; -/** For foreground against white, Green 50, Grey 50, Grey 100, Green 100, Green 200 and Green 300 For text, icons and border against Green 50, Green 100, Green 200 and Green 300 */ -const green900$1 = '#003d1e'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** It replaces Grape-50. Use it for backgrounds. Use it for text that goes on Grape 800, and the darker shades of Grey. */ -const grape50 = '#f1e6fb'; -/** It replaces Grape-100. Use it for backgrounds. Use it for text that goes on Grape 800, and the darker shades of Grey. */ -const grape100$1 = '#e4d3f8'; -/** Replaces Grape-100. Use it for backgrounds. Use it for text that goes on Grape 800, and the darker shades of Grey. */ -const grape200$1 = '#d4baf3'; -/** Replaces Grape-200 */ -const grape300 = '#bc92ed'; -/** This is Brand Grape - A66DE8 This color doesn't pass AA as a foreground against any background color. Use this color only on borders, large text, and icons against a white background. */ -const grape400 = '#a66de8'; -/** Use for any foreground against Grape 50, Grape 100, , Grey 25, Grey 50, Grey 75, and Grey 100. Use it for borders, icons, and large text against white, Grape 50, Grape 100, Grape 200, Grey 25, Grey 50, Grey 75, Grey 100 and Grey 150. Use it as a background color with white as the foreground color. */ -const grape500$1 = '#7b39c6'; -/** */ -const grape800$1 = '#2c094e'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** It replaces Rose-50 Use it for backgrounds. Use it for text that goes on Rose 700, Rose 800, and the darker shades of Grey. */ -const rose50 = '#fde2ec'; -/** Replaces Rose-100. Use it for backgrounds. Use it for text that goes on Rose 700, Rose 800, and the darker shades of Grey. */ -const rose200$1 = '#f9b6d0'; -/** Replaces Rose-200. */ -const rose300 = '#f586b1'; -/** This is Brand Rose - F25192 This color doesn't pass AA as a foreground against any background color. Use this color only on borders, large text, and icons against a white background. */ -const rose400 = '#f25192'; -/** Use it for borders, icons, and large text against white, Rose 50, Grey 25, Grey 50, Grey 75 and Grey 100. */ -const rose500$1 = '#ed176c'; -/** */ -const rose700$1 = '#c8185c'; -/** Use is as any foreground against Rose 100, Rose 200 or any Grey shade in the range of 25 to 150. Use it for borders, icons, and large text against white, Rose 50, Rose 200, Rose 300, or any Grey shade in the range of 25 to 200. Use it as a background color with white as the foreground color. */ -const rose800$1 = '#9f1446'; -/** Use is as any foreground against Rose 100, Rose 200, Rose 300, Rose 400 or any Grey shade in the range of 25 to 300. */ -const rose900 = '#4a1125'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. - -var index$2 = /*#__PURE__*/Object.freeze({ - __proto__: null, - purple50: purple50$1, - purple75: purple75$1, - purple100: purple100$1, - purple200: purple200$1, - purple300: purple300$1, - purple400: purple400$1, - purple500: purple500$1, - purple600: purple600$1, - purple700: purple700$1, - purple800: purple800$1, - purple900: purple900$1, - purple1000: purple1000$1, - red50: red50$1, - red100: red100$1, - red200: red200$1, - red300: red300$1, - red400: red400$1, - red500: red500$1, - red600: red600$1, - red700: red700$1, - red800: red800$1, - red900: red900$1, - pink50: pink50$1, - pink100: pink100$1, - pink200: pink200, - pink300: pink300$1, - pink500: pink500$1, - pink700: pink700$1, - pink900: pink900$1, - grey25: grey25$1, - grey50: grey50$1, - grey75: grey75$1, - grey100: grey100$1, - grey150: grey150$1, - grey175: grey175$1, - grey200: grey200$1, - grey300: grey300$1, - grey400: grey400$1, - grey500: grey500$1, - grey600: grey600$1, - grey700: grey700$1, - grey800: grey800$1, - grey900: grey900$1, - grey1000: grey1000$1, - apple50: apple50, - apple200: apple200$1, - apple300: apple300$1, - apple400: apple400, - apple700: apple700$1, - apple800: apple800$1, - apple900: apple900, - cyan50: cyan50$1, - cyan75: cyan75$1, - cyan100: cyan100$1, - cyan200: cyan200$1, - cyan300: cyan300$1, - cyan400: cyan400$1, - cyan500: cyan500$1, - cyan600: cyan600$1, - cyan700: cyan700$1, - cyan800: cyan800$1, - cyan900: cyan900$1, - cyan1000: cyan1000$1, - gold50: gold50$1, - gold75: gold75$1, - gold100: gold100$1, - gold200: gold200$1, - gold300: gold300$1, - gold400: gold400$1, - gold500: gold500$1, - gold600: gold600$1, - gold700: gold700$1, - gold800: gold800$1, - gold900: gold900$1, - green50: green50$1, - green100: green100$1, - green200: green200$1, - green300: green300$1, - green400: green400$1, - green500: green500$1, - green600: green600$1, - green700: green700$1, - green800: green800$1, - green900: green900$1, - grape50: grape50, - grape100: grape100$1, - grape200: grape200$1, - grape300: grape300, - grape400: grape400, - grape500: grape500$1, - grape800: grape800$1, - rose50: rose50, - rose200: rose200$1, - rose300: rose300, - rose400: rose400, - rose500: rose500$1, - rose700: rose700$1, - rose800: rose800$1, - rose900: rose900 -}); - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** Use it for backgrounds. Use it for text that goes on top of Purple 500, Purple 600, Purple 700, Purple 800, Purple 900, and Purple 1000 backgrounds. */ -const purple50 = '#140218'; -/** Use it for backgrounds. Use it for text that goes on top of Purple 600, Purple 700, Purple 800, Purple 900, and Purple 1000 backgrounds. */ -const purple75 = '#1c0128'; -/** Use it for backgrounds. Use it for text that goes on top of Purple 600, Purple 700, Purple 800, Purple 900, and Purple 1000 backgrounds. */ -const purple100 = '#26013c'; -/** Use it for backgrounds. Use it for text that goes on top of Purple 600, Purple 700, Purple 800, Purple 900 and Purple 1000. */ -const purple200 = '#400066'; -/** This is Brand Purple. Background colour Use it only as a foreground against Purple 800, Purple 900, and Purple 1000. */ -const purple300 = '#550091'; -/** */ -const purple400 = '#982ed6'; -/** Use it for borders, icons, and large text against Purple 50, Purple 75, Purple 100, Purple 200, Grey 25, Grey 50, Grey 75, Grey 100, Grey 200 and Grey 300. */ -const purple500 = '#af4dd5'; -/** Use it as a foreground against Purple 50, Purple 100, Grey 25, Grey 50, Grey 75 and Grey 100. Use it for large text, borders, and graphic elements against white and Purple 50, Purple 100, Purple 200, Grey 25, Grey 50, Grey 75, Grey 100, and Grey 150. */ -const purple600 = '#c777df'; -/** Use it as a foreground against Purple 50, Purple 100, Purple 200, Purple 300, Grey 25, Grey 50, Grey 75, Grey 100, and Grey 200. Use it for large text, borders, and graphic elements against white and Purple 50, Purple 100, Purple 200, Purple 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150 and Grey 200. */ -const purple700 = '#d192d9'; -/** Use it as a foreground against white and Purple 50, Purple 100, Purple 200, Purple 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 200 and Grey 300. Use it for large text, borders, and graphic elements against Purple 50, Purple 100, Purple 200, Purple 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150, Grey 200, Grey 300 and Grey 400. */ -const purple800 = '#ddbde7'; -/** Use it as a foreground against Purple 50, Purple 100, Purple 200, Purple 300, Purple 200, Purple 400, Grey 25, Grey 50, Grey 75, Grey 100, Grey 200, Grey 300, and Grey 400. Use it for large text, borders, and graphic elements against white and Purple 50, Purple 100, Purple 200, Purple 300, Grey 25, Grey50, Grey 75, Grey 100, Grey 150 Grey 200, Grey 300 and Grey 400. */ -const purple900 = '#ede0f2'; -/** */ -const purple1000 = '#f5eef9'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** For backgrounds mostly. Use as a background with any foreground using Gold 500, Gold 700 and Gold 900. */ -const gold50 = '#2e1103'; -/** */ -const gold75 = '#411907'; -/** For backgrounds mostly. Use as a background with any foreground using Gold 500, Gold 700 and Gold 900. It passes AA with large text, borders and icons against combined with Gold 400. */ -const gold100 = '#52210c'; -/** */ -const gold200 = '#743711'; -/** Use it as a background It passes AA against Gold 900 It passes AA on large text and icons against Gold 700 */ -const gold300 = '#925317'; -/** Use it as a background It passes AA as a foreground against Gold 50. It passes AA with large text, borders and icons against Gold 100. */ -const gold400 = '#cd7d04'; -/** It passes AA as a foreground against Gold 50, Gold 100, Grey 50, Grey 75, Grey 100 and Grey 150, Grey 200 and Grey 300. Use it for borders, icons, and large text against Gold 50, Gold 100, Gold 300, Grey 25, Grey 50, Grey 75, Grey 100 and Grey 150. */ -const gold500 = '#f7b51d'; -/** This colour is used on Helper Text in form components. This colour can be used against grey.50 and up to grey.175 and over gold.50 */ -const gold600 = '#fbc64b'; -/** This is Brand Gold. For any foreground, it passes AA against Gold 50, Gold 100, Grey 50, Grey 75, Grey 100, Grey 150, Grey 200, Grey 300, and Grey 400. Use it for borders, icons, and large text against Gold 50, Gold 100, Gold 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150, Grey 300, Grey 400, and Grey 500. */ -const gold700 = '#ffd76f'; -/** */ -const gold800 = '#ffe6a8'; -/** For any foreground, it passes AA against Gold 50, Gold 100, Gold 300, Grey 50, Grey 75, Grey 100, Grey 150, Grey 200, Grey 300, and Grey 400. */ -const gold900 = '#fff6e0'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** Use it for backgrounds. Use it for text that goes on top of Pink 700 and up to Grey 300. */ -const pink50 = '#2c0a2e'; -/** Use it for backgrounds. Use it for text that goes on top of Pink 700, Pink 900 and Pink 950. */ -const pink100 = '#48104b'; -/** */ -const pink300 = '#8f248f'; -/** Use it for borders, icons, and large text against Pink 50, Pink 100, Grey 25, Grey 50, Grey 75, Grey 100 and Grey 150. Use it as a background color with white as the foreground color. */ -const pink500 = '#c933d1'; -/** AKA Brand Pink Use it as a foreground against Pink 50, Pink 100, Grey 25, Grey 50, Grey 75, Grey 100, and Grey 150. Use it for large text, borders, and graphic elements against white and Pink 50, Pink 100, Pink 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150 and Grey 200. */ -const pink700 = '#f495f9'; -/** Use it as a foreground against Pink 50, Pink 100, Pink 300, Grey 25, Grey 50, Grey 75, Grey 00, Grey 200, and Grey 300. Use it for large text, borders, and graphic elements against white and Pink 50, Pink 100, Pink 200, Pink 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150, Grey 200, Grey 300 and Grey 400. */ -const pink900 = '#fccff9'; -/** Use it as a foreground against Pink 50, Pink 100, Pink 300 Grey 25, Grey 50, Grey 75, Grey 100, Grey 200, and Grey 300. Use it for large text, borders, and graphic elements against Pink 50, Pink 100, Pink 200, Pink 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150 Grey 200, Grey 300 and Grey 400. */ -const pink950 = '#fde6fb'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** This is to use instead of using pure black. */ -const grey25 = '#050505'; -/** This is to use instead of using pure black. */ -const grey50 = '#0b0b0b'; -/** This colour is to be used instead of 111111 - Background-00 */ -const grey75 = '#121212'; -/** To use instead of Background-01 */ -const grey100 = '#1d1d1d'; -/** To be used instead of Background-03 */ -const grey150 = '#242424'; -/** to replace Background-06 2B2B2B */ -const grey175 = '#2c2c2c'; -/** To use in the context of Background-12 */ -const grey200 = '#323232'; -/** AKA as 16 */ -const grey300 = '#414141'; -/** */ -const grey400 = '#585858'; -/** */ -const grey500 = '#707070'; -/** AKA subdued text */ -const grey600 = '#b8b8b8'; -/** AKA placeholder text */ -const grey700 = '#c1c1c1'; -/** Replaces E7E7E7. AKA regular text */ -const grey800 = '#e3e3e3'; -/** To replace F7F7F7 */ -const grey900 = '#f0f0f0'; -/** Can be used for: Headings */ -const grey1000 = '#fafafa'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** Backgrounds */ -const cyan50 = '#010a19'; -/** Backgrounds */ -const cyan75 = '#001333'; -/** Backgrounds */ -const cyan100 = '#011537'; -/** */ -const cyan200 = '#00225c'; -/** Backgrounds */ -const cyan300 = '#002d80'; -/** Backgrounds */ -const cyan400 = '#013992'; -/** Use it for large text, borders, and graphic elements against Cyan 50, Grey 25, Grey 50 and Grey 75. Also, use it as a background color with white borders or graphic foreground elements. */ -const cyan500 = '#0658e5'; -/** Use it for any foreground against Cyan 50, Cyan 75, Cyan 100, Cyan 200, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150, and Grey 175. Use it for large text, borders, and graphic elements against Cyan 50, Cyan 75, Cyan 100, Cyan 200, Cyan 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150, Grey 175 and Grey 200. Additionally, use it as a background color with white borders or graphic foreground elements. */ -const cyan600 = '#5692fb'; -/** It passes AA as a foreground against cyan 50, Cyan 75, Cyan 100, Cyan 200, and Cyan 300. It passes AA when used in border, icons and large text against Cyan 400. */ -const cyan700 = '#75a7fd'; -/** It passes AA as a foreground against Cyan 50, Cyan 75, Cyan 100, Cyan 200, Cyan 300, and Cyan 400. It passes AA when used in border, icons and large text against Cyan 500. */ -const cyan800 = '#a6c8fc'; -/** It passes AA as a foreground against Cyan 50, Cyan 75, Cyan 100, Cyan 200, Cyan 300, Cyan 400, and Cyan 500. */ -const cyan900 = '#dbeaff'; -/** It passes AA as a foreground against Cyan 50, Cyan 75, Cyan 100, Cyan 200, Cyan 300, Cyan 400, and Cyan 500. */ -const cyan1000 = '#ecf4fe'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** Use it as a background colour */ -const red50 = '#3b1216'; -/** */ -const red100 = '#581a20'; -/** */ -const red200 = '#721d25'; -/** */ -const red300 = '#891e27'; -/** */ -const red400 = '#bd1f2c'; -/** Use it for borders, icons, and large text against Red 50, Red 100, Grey 25, Grey 50, Grey 75, Grey 100 and Grey 150. Use it as any type of foreground with Grey 25, Grey 50, Grey 75 and 100. */ -const red500 = '#f24550'; -/** This colour is used on Helper Text in form components. This colour can be used against grey.50 and up to grey.175 and over red.50 */ -const red600 = '#f2636a'; -/** Use it for borders, icons, and large text against Red 50, Red 100, Grey 25, Grey 50, Grey 75, Grey 100 and Grey 150. Use it as any type of foreground combined with Grey 25, Grey 50, Grey 75, Grey 100, Grey 150, Grey 175 and Grey 200. */ -const red700 = '#f58e92'; -/** For text */ -const red800 = '#f9aeb3'; -/** Use it as any type of foreground combined with Red 50, Red 100, Red 300, Red 400, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150, Grey 175 and Grey 200. */ -const red900 = '#ffebeb'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** backgrounds only */ -const green50 = '#133922'; -/** backgrounds */ -const green100 = '#164429'; -/** */ -const green200 = '#1b5533'; -/** */ -const green300 = '#21693f'; -/** For borders, icons and outlines against Green 50. Not suitable for small text. */ -const green400 = '#34a868'; -/** Use it for any foreground against Green 50, Green 100, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150, and Grey 175. Use it for large text, borders, and graphic elements against Green 50, Green 100, Green 300, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150, Grey 175 and Grey 200. Additionally, use it as a background color with white borders or graphic foreground elements. */ -const green500 = '#55ce8b'; -/** This colour is used on Helper Text in form components. This colour can be used against grey.50 and up to grey.175 and over green.50 */ -const green600 = '#76d5a1'; -/** For text and borders */ -const green700 = '#90dab2'; -/** */ -const green800 = '#bae8cf'; -/** For text */ -const green900 = '#e3faeb'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** Use it for backgrounds. Use it for text that goes on top of Apple 800 and the lighter shades of Grey. */ -const apple100 = '#03361b'; -/** */ -const apple200 = '#087a3c'; -/** */ -const apple300 = '#10b259'; -/** This is Brand Apple You can use it as a foreground colour for Non-interactive design elements only. */ -const apple600 = '#62dd99'; -/** Use if for any foreground Apple 100, Grey 25, Grey 50, Grey 75, Grey 100 and Grey 150. Use it for large text, borders, and graphic elements against Apple 100, Apple 200, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150, Grey 175, Grey 200, Grey 300 and Grey 400. */ -const apple700 = '#96e6b7'; -/** Use it as a foreground against white and Apple 100, Apple 200, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150, Grey 175, Grey 200, Grey 300 and Grey 400. Use it for large text, borders, and graphic elements against white and Apple 100, Apple 200, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150, Grey 175, Grey 200, Grey 300 and Grey 400. */ -const apple800 = '#c1f0d3'; -/** Use it as a foreground against white and Apple 50, Apple 200, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150, Grey 175, Grey 200, Grey 300, Grey 400 and Grey 500. Use it for large text, borders, and graphic elements against white and Apple 50, Apple 200, Grey 25, Grey 50, Grey 75, Grey 100, Grey 150, Grey 175, Grey 200, Grey 300 and Grey 400. */ -const apple950 = '#e5f9ed'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** For backgrounds mostly. Foregrounds that can be used against this color range from Grape 700 and up. It passes AA with large text, borders and icons against combined with Grape 500. */ -const grape100 = '#240444'; -/** For backgrounds mostly. Foregrounds that can be used against this color range from Grape 700 and up. It passes AA with large text, borders and icons against combined with Grape 500. */ -const grape200 = '#2d025e'; -/** Use this color only for borders, large text, and icons against a background of Grape 100, Grape 200, or any Grey shade in the range of 50 to 150. */ -const grape500 = '#7b39c6'; -/** Brand Grape. Use is as any foreground against Grape 100, Grape 200 or any Grey shade in the range of 50 to 100. Use this color only for borders, large text, and icons against a background of Grape 100, Grape 200, or any Grey shade in the range of 50 to 150. */ -const grape600 = '#a66de8'; -/** Use is as any foreground against Grape 100, Grape 200 or any Grey shade in the range of 50 to 200. */ -const grape700 = '#bc92ed'; -/** Use is as any foreground against Grape 100, Grape 200 or any Grey shade in the range of 50 to 300. */ -const grape800 = '#d4baf3'; -/** Use is as any foreground against Grape 100, Grape 200 or any Grey shade in the range of 50 to 300. */ -const grape950 = '#f1e6fb'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** Use it for backgrounds. Use it for text that goes on Rose 600, Rose 700, Rose 800, Rose 950, and the lighter shades of Grey. */ -const rose100 = '#45081e'; -/** Use it for backgrounds. Use it for text that goes on Rose 700, Rose 800, Rose 950, and the lighter shades of Grey. */ -const rose200 = '#710e32'; -/** Use it for borders, icons, and large text against Rose 100, Rose 200, Grey 25, Grey 50, Grey 75, Grey 100, and Grey 150. */ -const rose500 = '#e34584'; -/** This is Brand Rose - F25192 Use it for borders, icons, and large text against Rose 100, Rose 200, Grey 25, Grey 50, Grey 75, Grey 100, and Grey 150. */ -const rose600 = '#f25192'; -/** Replaces Rose-200. */ -const rose700 = '#f586b1'; -/** Replaces Rose-100. */ -const rose800 = '#f9b6d0'; -/** It replaces Rose-50 */ -const rose950 = '#fde2ec'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. - -var index$1 = /*#__PURE__*/Object.freeze({ - __proto__: null, - purple50: purple50, - purple75: purple75, - purple100: purple100, - purple200: purple200, - purple300: purple300, - purple400: purple400, - purple500: purple500, - purple600: purple600, - purple700: purple700, - purple800: purple800, - purple900: purple900, - purple1000: purple1000, - gold50: gold50, - gold75: gold75, - gold100: gold100, - gold200: gold200, - gold300: gold300, - gold400: gold400, - gold500: gold500, - gold600: gold600, - gold700: gold700, - gold800: gold800, - gold900: gold900, - pink50: pink50, - pink100: pink100, - pink300: pink300, - pink500: pink500, - pink700: pink700, - pink900: pink900, - pink950: pink950, - grey25: grey25, - grey50: grey50, - grey75: grey75, - grey100: grey100, - grey150: grey150, - grey175: grey175, - grey200: grey200, - grey300: grey300, - grey400: grey400, - grey500: grey500, - grey600: grey600, - grey700: grey700, - grey800: grey800, - grey900: grey900, - grey1000: grey1000, - cyan50: cyan50, - cyan75: cyan75, - cyan100: cyan100, - cyan200: cyan200, - cyan300: cyan300, - cyan400: cyan400, - cyan500: cyan500, - cyan600: cyan600, - cyan700: cyan700, - cyan800: cyan800, - cyan900: cyan900, - cyan1000: cyan1000, - red50: red50, - red100: red100, - red200: red200, - red300: red300, - red400: red400, - red500: red500, - red600: red600, - red700: red700, - red800: red800, - red900: red900, - green50: green50, - green100: green100, - green200: green200, - green300: green300, - green400: green400, - green500: green500, - green600: green600, - green700: green700, - green800: green800, - green900: green900, - apple100: apple100, - apple200: apple200, - apple300: apple300, - apple600: apple600, - apple700: apple700, - apple800: apple800, - apple950: apple950, - grape100: grape100, - grape200: grape200, - grape500: grape500, - grape600: grape600, - grape700: grape700, - grape800: grape800, - grape950: grape950, - rose100: rose100, - rose200: rose200, - rose500: rose500, - rose600: rose600, - rose700: rose700, - rose800: rose800, - rose950: rose950 -}); - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** Midnight can be utilised in any theme as a background or foreground color. */ -const brandMidnight = '#1e0a46'; -/** White can be utilised in any theme as a background, border or foreground color. */ -const brandWhite = '#ffffff'; -/** Same as `colors.pink300`. Pink is predominantly used for our graphic line, from our main flow line and simple objects, to our UW monogram and iconography. We also use pink to highlight key words in headlines. */ -const brandPink = '#f495f9'; -/** Same as `colors.purple800`. Purple is our hero colour. It’s both ownable and instantly recognisable, and we use it a lot; it’s at the core of our brand and it’s normally the first colour you or a customer will be exposed to. */ -const brandPrimaryPurple = '#550091'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. -/** Same as `colors.cyan400`. Use for Gas services. */ -const serviceGas = '#75A7FD'; -/** Same as `colors.apple400`. Use for Electricity services. */ -const serviceElectricity = '#62DD99'; -/** Same as `colors.rose400`. Use for Insurance services. */ -const serviceInsurance = '#F25192'; -/** Same as `colors.gold300`. Use for Mobile services. */ -const serviceMobile = '#FFD76F'; -/** Same as `colors.grape400`. Use for Landline & Homephone services. */ -const serviceLandline = '#A66DE8'; - -// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED. - -var index = /*#__PURE__*/Object.freeze({ - __proto__: null, - brandMidnight: brandMidnight, - brandWhite: brandWhite, - brandPink: brandPink, - brandPrimaryPurple: brandPrimaryPurple, - serviceGas: serviceGas, - serviceElectricity: serviceElectricity, - serviceInsurance: serviceInsurance, - serviceMobile: serviceMobile, - serviceLandline: serviceLandline -}); - -export { index$2 as colors, index as colorsCommon, index$1 as colorsDark }; diff --git a/packages/colour-system/package.json b/packages/colour-system/package.json index e662520da..e6d2b1754 100644 --- a/packages/colour-system/package.json +++ b/packages/colour-system/package.json @@ -2,9 +2,9 @@ "name": "@utilitywarehouse/colour-system", "version": "0.5.0", "description": "UW Colour System", - "main": "index.js", - "module": "index.mjs", - "types": "types/index.d.ts", + "main": "dist/index.js", + "module": "dist/index.mjs", + "types": "dist/types/index.d.ts", "sideEffects": false, "scripts": { "clean": "rm -rf node_modules && rm -rf dist", diff --git a/packages/colour-system/rollup.config.js b/packages/colour-system/rollup.config.js index 7d493f9e2..d8c97340c 100644 --- a/packages/colour-system/rollup.config.js +++ b/packages/colour-system/rollup.config.js @@ -5,11 +5,11 @@ export default { input: 'src/index.ts', output: [ { - file: 'index.js', + file: 'dist/index.js', format: 'cjs', }, { - file: 'index.mjs', + file: 'dist/index.mjs', format: 'es', }, ], diff --git a/packages/colour-system/tsconfig.json b/packages/colour-system/tsconfig.json index 063f7eca3..6808d0b72 100644 --- a/packages/colour-system/tsconfig.json +++ b/packages/colour-system/tsconfig.json @@ -1,10 +1,12 @@ { "compilerOptions": { - "outDir": ".", + "outDir": "./dist", "declarationDir": "types", "module": "esnext", "target": "ES2019", - "lib": ["esnext"], + "lib": [ + "esnext" + ], "declaration": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, @@ -13,6 +15,14 @@ "moduleResolution": "node", "isolatedModules": true }, - "include": ["./src"], - "exclude": [ "dist", "node_modules", "scripts", "templates", "raw" ] -} + "include": [ + "./src" + ], + "exclude": [ + "dist", + "node_modules", + "scripts", + "templates", + "raw" + ] +} \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b8556512b..4b9f73fde 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -86,7 +86,7 @@ importers: specifier: ^7.6.20 version: 7.6.20(react-native@0.74.5)(react@18.2.0) '@utilitywarehouse/colour-system': - specifier: 0.5.0 + specifier: workspace:^ version: link:../../packages/colour-system '@utilitywarehouse/fontsource': specifier: ^0.0.6 From fc9c3946c152380db7f4e8bb26034f62d31728fb Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Fri, 18 Oct 2024 10:29:31 +0100 Subject: [PATCH 39/45] chore: add build dep build to postinstall --- apps/native-ui-storybook/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/native-ui-storybook/package.json b/apps/native-ui-storybook/package.json index f88503f4d..0a74f252e 100644 --- a/apps/native-ui-storybook/package.json +++ b/apps/native-ui-storybook/package.json @@ -24,7 +24,7 @@ "storybook": "cross-env STORYBOOK_ENABLED='true' expo start", "storybook:ios": "cross-env STORYBOOK_ENABLED='true' expo start --ios", "storybook:android": "cross-env STORYBOOK_ENABLED='true' expo start --android", - "postinstall": "node ./scripts/postinstall.js" + "postinstall": "node ./scripts/postinstall.js && turbo build" }, "dependencies": { "@babel/plugin-proposal-export-namespace-from": "^7.18.9", From f3db0a27ab705d88c71435d4495ba0652937277e Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Mon, 21 Oct 2024 18:10:40 +0100 Subject: [PATCH 40/45] refactor: `FormField` style library --- .../components/FormField/FormField.docs.mdx | 6 +- .../components/FormField/FormField.tsx | 38 +++------ .../components/FormField/Variants.tsx | 2 +- .../components/FormField/FormField.context.ts | 6 ++ .../components/FormField/FormField.props.ts | 12 +++ .../src/components/FormField/FormField.tsx | 80 ++++++++++--------- .../components/FormField/FormFieldHelper.tsx | 22 +++++ .../components/FormField/FormFieldInvalid.tsx | 38 +++++++-- .../components/FormField/FormFieldLabel.tsx | 11 +++ .../components/FormField/FormFieldRoot.tsx | 24 ++++++ .../components/FormField/FormFieldValid.tsx | 33 ++++++-- .../src/components/FormField/index.ts | 18 ++--- .../src/components/Helper/Helper.props.ts | 24 ++++++ .../src/components/Helper/Helper.tsx | 75 +++++++++++++++++ .../src/components/Helper/HelperContext.ts | 6 ++ .../src/components/Helper/HelperIcon.tsx | 43 ++++++++++ .../src/components/Helper/HelperText.tsx | 47 +++++++++++ .../native-ui/src/components/Helper/index.ts | 3 + .../native-ui/src/components/Input/Input.tsx | 25 +++--- .../src/components/Label/Label.props.ts | 8 ++ .../native-ui/src/components/Label/Label.tsx | 41 ++++++++++ .../native-ui/src/components/Label/index.ts | 1 + 22 files changed, 460 insertions(+), 103 deletions(-) create mode 100644 packages/native-ui/src/components/FormField/FormField.context.ts create mode 100644 packages/native-ui/src/components/FormField/FormField.props.ts create mode 100644 packages/native-ui/src/components/FormField/FormFieldHelper.tsx create mode 100644 packages/native-ui/src/components/FormField/FormFieldLabel.tsx create mode 100644 packages/native-ui/src/components/FormField/FormFieldRoot.tsx create mode 100644 packages/native-ui/src/components/Helper/Helper.props.ts create mode 100644 packages/native-ui/src/components/Helper/Helper.tsx create mode 100644 packages/native-ui/src/components/Helper/HelperContext.ts create mode 100644 packages/native-ui/src/components/Helper/HelperIcon.tsx create mode 100644 packages/native-ui/src/components/Helper/HelperText.tsx create mode 100644 packages/native-ui/src/components/Helper/index.ts create mode 100644 packages/native-ui/src/components/Label/Label.props.ts create mode 100644 packages/native-ui/src/components/Label/Label.tsx create mode 100644 packages/native-ui/src/components/Label/index.ts diff --git a/apps/native-ui-storybook/components/FormField/FormField.docs.mdx b/apps/native-ui-storybook/components/FormField/FormField.docs.mdx index 7f8f8406d..cd945d713 100644 --- a/apps/native-ui-storybook/components/FormField/FormField.docs.mdx +++ b/apps/native-ui-storybook/components/FormField/FormField.docs.mdx @@ -64,9 +64,7 @@ The `FormField` component is a container for form elements such as input fields. Label - console.log('###')}> - - + console.log('###')} /> Helper text @@ -180,7 +178,7 @@ const MyComponent = () => { | Name | Type | Default | Description | | ------------------ | ---------------------------------- | ----------- | ----------------------------------- | | `validationStatus` | `'initial' \| 'valid' \| 'invalid` | `'initial'` | The validation status of the field. | -| `isDisabled` | `boolean` | `false` | Whether the field is disabled. | +| `disabled` | `boolean` | `false` | Whether the field is disabled. | #### Descendants Styling Props diff --git a/apps/native-ui-storybook/components/FormField/FormField.tsx b/apps/native-ui-storybook/components/FormField/FormField.tsx index 3b97a9727..a12d7508c 100644 --- a/apps/native-ui-storybook/components/FormField/FormField.tsx +++ b/apps/native-ui-storybook/components/FormField/FormField.tsx @@ -16,30 +16,24 @@ import { } from '@utilitywarehouse/native-ui'; import { Meta, StoryFn } from '@storybook/react'; -const FormFieldBasic: StoryFn = ({ - placeholder, - validationStatus, - type, - _showValidationIcon, - ...props -}: any) => { +const FormFieldBasic: StoryFn = ({ validationStatus, showValidationIcon, ...props }: any) => { return ( Label - + Helper text - {_showValidationIcon && } + {showValidationIcon && } Invalid form field text - {_showValidationIcon && } + {showValidationIcon && } Valid form field text @@ -47,30 +41,18 @@ const FormFieldBasic: StoryFn = ({ }; FormFieldBasic.argTypes = { - placeholder: { - control: 'text', - description: 'The Input field placeholder', - defaultValue: '', - }, - type: { - control: 'select', - options: ['text', 'password'], - description: 'The Input field type', - defaultValue: 'text', - }, validationStatus: { control: 'select', options: ['initial', 'valid', 'invalid'], description: 'The validation status of the Input component', defaultValue: 'initial', }, - _showValidationIcon: { + showValidationIcon: { control: 'boolean', - description: - 'Show the validation icon. \n _Note: this is not a prop of the `FormField` component, just a representation of the `FormFieldInvalidIcon` and `FormFieldValidIcon` component for the Storybook playground._', + description: 'Show the validation icon.', defaultValue: true, }, - isDisabled: { + disabled: { control: 'boolean', description: 'Disable the Input component', defaultValue: false, @@ -78,11 +60,9 @@ FormFieldBasic.argTypes = { } as Meta['argTypes']; FormFieldBasic.args = { - placeholder: 'Input placeholder', validationStatus: 'initial', - type: 'text', - isDisabled: false, - _showValidationIcon: true, + disabled: false, + showValidationIcon: false, } as Meta['args']; export default FormFieldBasic; diff --git a/apps/native-ui-storybook/components/FormField/Variants.tsx b/apps/native-ui-storybook/components/FormField/Variants.tsx index 5689cb6d6..89185dd27 100644 --- a/apps/native-ui-storybook/components/FormField/Variants.tsx +++ b/apps/native-ui-storybook/components/FormField/Variants.tsx @@ -94,7 +94,7 @@ const InputVariants: StoryFn = () => { - + Label diff --git a/packages/native-ui/src/components/FormField/FormField.context.ts b/packages/native-ui/src/components/FormField/FormField.context.ts new file mode 100644 index 000000000..480e07034 --- /dev/null +++ b/packages/native-ui/src/components/FormField/FormField.context.ts @@ -0,0 +1,6 @@ +import { createContext, useContext } from 'react'; +import { FormFieldBaseProps } from './FormField.props'; + +export const FormFieldContext = createContext({}); + +export const useFormFieldContext = () => useContext(FormFieldContext); diff --git a/packages/native-ui/src/components/FormField/FormField.props.ts b/packages/native-ui/src/components/FormField/FormField.props.ts new file mode 100644 index 000000000..b50d2fa35 --- /dev/null +++ b/packages/native-ui/src/components/FormField/FormField.props.ts @@ -0,0 +1,12 @@ +import { ViewProps } from 'react-native'; + +export interface FormFieldBaseProps { + validationStatus?: 'valid' | 'invalid' | 'initial'; + disabled?: boolean; + readonly?: boolean; + showValidationIcon?: boolean; +} + +interface FormFieldProps extends FormFieldBaseProps, ViewProps {} + +export default FormFieldProps; diff --git a/packages/native-ui/src/components/FormField/FormField.tsx b/packages/native-ui/src/components/FormField/FormField.tsx index f1bc5427b..df1778153 100644 --- a/packages/native-ui/src/components/FormField/FormField.tsx +++ b/packages/native-ui/src/components/FormField/FormField.tsx @@ -1,52 +1,56 @@ -import React, { createContext, useContext, FC, useMemo } from 'react'; +import React, { FC, useMemo } from 'react'; import { createFormControl } from '@gluestack-ui/form-control'; -import { - Root, - Error, - ErrorText, - ErrorIcon, - Label, - LabelText, - LabelAstrick, - Helper, - HelperText, -} from './styled-components'; - -export const FormField = createFormControl({ - Root, - Error, - ErrorText, - ErrorIcon, - Label, - LabelText, - LabelAstrick, - Helper, - HelperText, +import { FormFieldContext } from './FormField.context'; +import FormFieldProps from './FormField.props'; +import FormFieldRoot from './FormFieldRoot'; +import FormFieldInvalidComponent from './FormFieldInvalid'; +import FormFieldHelperComponent from './FormFieldHelper'; +import FormFieldLabelComponent from './FormFieldLabel'; +import { HelperIcon, HelperText } from '../Helper'; +import { View } from 'react-native'; + +export const FormFieldComponent = createFormControl({ + Root: FormFieldRoot, + Error: FormFieldInvalidComponent, + ErrorText: HelperText, + ErrorIcon: HelperIcon, + Label: View, + LabelText: FormFieldLabelComponent, + LabelAstrick: View, + Helper: FormFieldHelperComponent, + HelperText: HelperText, }); -export type FormFieldProps = React.ComponentProps; - -interface FormFieldContextType { - validationStatus: 'valid' | 'invalid' | 'initial'; -} - -const FormFieldContext = createContext(undefined); - -const FormFieldProvider: FC = ({ children, ...props }) => { +export const FormFieldLabel = FormFieldComponent.Label; +export const FormFieldLabelText = FormFieldComponent.Label.Text; +export const FormFieldHelper = FormFieldComponent.Helper; +export const FormFieldHelperText = FormFieldComponent.Helper.Text; + +const FormField: FC = ({ + children, + disabled, + validationStatus = 'initial', + readonly, + showValidationIcon = false, + ...props +}) => { const value = useMemo( () => ({ - validationStatus: props.validationStatus || 'initial', + validationStatus, + disabled, + readonly, + showValidationIcon, }), - [props.validationStatus] + [validationStatus, disabled, readonly, showValidationIcon] ); return ( - {children} + + {children} + ); }; -const useFormFieldContext = (): FormFieldContextType | undefined => useContext(FormFieldContext); - -export { FormFieldProvider, useFormFieldContext }; +export default FormField; diff --git a/packages/native-ui/src/components/FormField/FormFieldHelper.tsx b/packages/native-ui/src/components/FormField/FormFieldHelper.tsx new file mode 100644 index 000000000..fa686089c --- /dev/null +++ b/packages/native-ui/src/components/FormField/FormFieldHelper.tsx @@ -0,0 +1,22 @@ +import React, { FC } from 'react'; +import { useFormFieldContext } from './FormField.context'; +import { Helper } from '../Helper'; +import HelperProps from '../Helper/Helper.props'; + +const FormFieldHelper: FC> = ({ + children, + icon, + text, + ...props +}) => { + const { showValidationIcon, disabled } = useFormFieldContext(); + return children ? ( + + {children} + + ) : ( + + ); +}; + +export default FormFieldHelper; diff --git a/packages/native-ui/src/components/FormField/FormFieldInvalid.tsx b/packages/native-ui/src/components/FormField/FormFieldInvalid.tsx index e46f4af14..50b72c0d0 100644 --- a/packages/native-ui/src/components/FormField/FormFieldInvalid.tsx +++ b/packages/native-ui/src/components/FormField/FormFieldInvalid.tsx @@ -1,10 +1,36 @@ -import React, { FC, PropsWithChildren } from 'react'; -import Invalid from './styled-components/Invalid'; -import { useFormFieldContext } from './FormField'; +import React, { FC } from 'react'; +import { useFormFieldContext } from './FormField.context'; +import { Helper } from '../Helper'; +import HelperProps from '../Helper/Helper.props'; -const FormFieldInvalid: FC = ({ children }) => { - const formFieldContext = useFormFieldContext(); - return formFieldContext?.validationStatus === 'invalid' ? {children} : null; +const FormFieldInvalid: FC> = ({ + children, + icon, + text, + ...props +}) => { + const { validationStatus, disabled, showValidationIcon } = useFormFieldContext(); + return validationStatus === 'invalid' ? ( + children ? ( + + {children} + + ) : ( + + ) + ) : null; }; export default FormFieldInvalid; diff --git a/packages/native-ui/src/components/FormField/FormFieldLabel.tsx b/packages/native-ui/src/components/FormField/FormFieldLabel.tsx new file mode 100644 index 000000000..cf889b94e --- /dev/null +++ b/packages/native-ui/src/components/FormField/FormFieldLabel.tsx @@ -0,0 +1,11 @@ +import React, { FC } from 'react'; +import { useFormFieldContext } from './FormField.context'; +import { Label } from '../Label'; +import LabelProps from '../Label/Label.props'; + +const FormFieldLabel: FC> = ({ children }) => { + const { disabled } = useFormFieldContext(); + return ; +}; + +export default FormFieldLabel; diff --git a/packages/native-ui/src/components/FormField/FormFieldRoot.tsx b/packages/native-ui/src/components/FormField/FormFieldRoot.tsx new file mode 100644 index 000000000..6b36147a4 --- /dev/null +++ b/packages/native-ui/src/components/FormField/FormFieldRoot.tsx @@ -0,0 +1,24 @@ +import React, { forwardRef } from 'react'; +import { createStyleSheet, useStyles } from 'react-native-unistyles'; +import { View, ViewProps } from 'react-native'; + +const FormFieldRoot = forwardRef(({ children, style, ...props }, ref) => { + const { styles } = useStyles(stylesheet); + + return ( + + {children} + + ); +}); + +FormFieldRoot.displayName = 'FormFieldRoot'; + +const stylesheet = createStyleSheet(({ space }) => ({ + container: { + flexDirection: 'column', + gap: space[2], + }, +})); + +export default FormFieldRoot; diff --git a/packages/native-ui/src/components/FormField/FormFieldValid.tsx b/packages/native-ui/src/components/FormField/FormFieldValid.tsx index 1ba5a9140..4fe41ead3 100644 --- a/packages/native-ui/src/components/FormField/FormFieldValid.tsx +++ b/packages/native-ui/src/components/FormField/FormFieldValid.tsx @@ -1,10 +1,31 @@ -import React, { FC, PropsWithChildren } from 'react'; -import Valid from './styled-components/Valid'; -import { useFormFieldContext } from './FormField'; +import React, { FC } from 'react'; +import { useFormFieldContext } from './FormField.context'; +import { Helper } from '../Helper'; +import HelperProps from '../Helper/Helper.props'; -const FormFieldValid: FC = ({ children }) => { - const formFieldContext = useFormFieldContext(); - return formFieldContext?.validationStatus === 'valid' ? {children} : null; +const FormFieldValid: FC> = ({ + children, + icon, + text, + ...props +}) => { + const { validationStatus, disabled, showValidationIcon } = useFormFieldContext(); + return validationStatus === 'valid' ? ( + children ? ( + + {children} + + ) : ( + + ) + ) : null; }; export default FormFieldValid; diff --git a/packages/native-ui/src/components/FormField/index.ts b/packages/native-ui/src/components/FormField/index.ts index b62d4cbe7..9ba0cd1e2 100644 --- a/packages/native-ui/src/components/FormField/index.ts +++ b/packages/native-ui/src/components/FormField/index.ts @@ -1,7 +1,13 @@ -import { FormField } from './FormField'; -export { FormFieldProvider as FormField, useFormFieldContext } from './FormField'; +export { + default as FormField, + FormFieldHelper, + FormFieldHelperText, + FormFieldLabel, + FormFieldLabelText, +} from './FormField'; export { default as FormFieldValid } from './FormFieldValid'; export { default as FormFieldInvalid } from './FormFieldInvalid'; +export { useFormFieldContext } from './FormField.context'; export { HelperIcon as FormFieldHelperIcon, ValidIcon as FormFieldValidIcon, @@ -9,11 +15,3 @@ export { InvalidIcon as FormFieldInvalidIcon, InvalidText as FormFieldInvalidText, } from './styled-components'; - -export const FormFieldError = FormField.Error; -export const FormFieldErrorText = FormField.Error.Text; -export const FormFieldErrorIcon = FormField.Error.Icon; -export const FormFieldLabel = FormField.Label; -export const FormFieldLabelText = FormField.Label.Text; -export const FormFieldHelper = FormField.Helper; -export const FormFieldHelperText = FormField.Helper.Text; diff --git a/packages/native-ui/src/components/Helper/Helper.props.ts b/packages/native-ui/src/components/Helper/Helper.props.ts new file mode 100644 index 000000000..059a95bd0 --- /dev/null +++ b/packages/native-ui/src/components/Helper/Helper.props.ts @@ -0,0 +1,24 @@ +import type { ComponentType } from 'react'; +import { ViewProps } from 'react-native'; + +export interface HelperBaseProps extends ViewProps { + validationStatus?: 'valid' | 'invalid' | 'initial'; + showIcon?: boolean; + disabled?: boolean; +} + +interface HelperWithChildrenProps extends HelperBaseProps { + children: React.ReactNode; + icon?: never; + text?: never; +} + +interface HelperWithoutChildrenProps extends HelperBaseProps { + children?: never; + icon?: ComponentType; + text?: string; +} + +type HelperProps = HelperWithChildrenProps | HelperWithoutChildrenProps; + +export default HelperProps; diff --git a/packages/native-ui/src/components/Helper/Helper.tsx b/packages/native-ui/src/components/Helper/Helper.tsx new file mode 100644 index 000000000..657fe2ccb --- /dev/null +++ b/packages/native-ui/src/components/Helper/Helper.tsx @@ -0,0 +1,75 @@ +import React, { forwardRef, useMemo } from 'react'; +import { Text } from '../Text'; +import { createStyleSheet, useStyles } from 'react-native-unistyles'; +import { View } from 'react-native'; +import { Icon } from '../Icon'; +import { + WarningMediumContainedIcon, + TickMediumContainedIcon, +} from '@utilitywarehouse/react-native-icons'; +import HelperProps from './Helper.props'; +import { HelperContext } from './HelperContext'; + +const Helper: React.FC = forwardRef( + ({ children, validationStatus, showIcon, style, disabled, icon, text, ...props }, ref) => { + const { styles } = useStyles(stylesheet, { validationStatus, disabled }); + let HelperIcon = icon; + if (validationStatus === 'valid' && !icon) { + HelperIcon = TickMediumContainedIcon; + } + if (validationStatus === 'invalid' && !icon) { + HelperIcon = WarningMediumContainedIcon; + } + + const value = useMemo(() => ({ validationStatus, disabled }), [validationStatus, disabled]); + + return ( + + + {children ? ( + children + ) : ( + <> + {showIcon && } + + {text} + + + )} + + + ); + } +); + +Helper.displayName = 'Helper'; + +const stylesheet = createStyleSheet(({ colors, space, lineHeights }) => ({ + container: { + flexDirection: 'row', + gap: space['1'], + alignItems: 'center', + }, + text: { + color: colors.grey800, + lineHeight: lineHeights['lg'], + variants: { + validationStatus: { + valid: { + color: colors.green600, + }, + invalid: { + color: colors.red600, + }, + initial: {}, + }, + disabled: { + true: { + color: colors.grey400, + }, + }, + }, + }, +})); + +export default Helper; diff --git a/packages/native-ui/src/components/Helper/HelperContext.ts b/packages/native-ui/src/components/Helper/HelperContext.ts new file mode 100644 index 000000000..616b2b1ee --- /dev/null +++ b/packages/native-ui/src/components/Helper/HelperContext.ts @@ -0,0 +1,6 @@ +import { createContext, useContext } from 'react'; +import { HelperBaseProps } from './Helper.props'; + +export const HelperContext = createContext({}); + +export const useHelperContext = () => useContext(HelperContext); diff --git a/packages/native-ui/src/components/Helper/HelperIcon.tsx b/packages/native-ui/src/components/Helper/HelperIcon.tsx new file mode 100644 index 000000000..7fa137ca4 --- /dev/null +++ b/packages/native-ui/src/components/Helper/HelperIcon.tsx @@ -0,0 +1,43 @@ +import React, { forwardRef } from 'react'; +import { createStyleSheet, useStyles } from 'react-native-unistyles'; + +import { Icon } from '../Icon'; + +import HelperIconProps from './Helper.props'; +import { SvgRef } from '../../types'; +import IconProps from '../Icon/Icon.props'; +import { useHelperContext } from './HelperContext'; + +const HelperIcon: React.FC = forwardRef( + ({ style, ...props }, ref) => { + const { validationStatus, disabled } = useHelperContext(); + const { styles } = useStyles(stylesheet, { validationStatus, disabled }); + return ; + } +); + +HelperIcon.displayName = 'HelperIcon'; + +const stylesheet = createStyleSheet(({ colors }) => ({ + icon: { + color: colors.grey800, + variants: { + validationStatus: { + valid: { + color: colors.green600, + }, + invalid: { + color: colors.red600, + }, + initial: {}, + }, + disabled: { + true: { + color: colors.grey400, + }, + }, + }, + }, +})); + +export default HelperIcon; diff --git a/packages/native-ui/src/components/Helper/HelperText.tsx b/packages/native-ui/src/components/Helper/HelperText.tsx new file mode 100644 index 000000000..e75b9f1c9 --- /dev/null +++ b/packages/native-ui/src/components/Helper/HelperText.tsx @@ -0,0 +1,47 @@ +import React, { forwardRef } from 'react'; +import { Text } from '../Text'; +import { createStyleSheet, useStyles } from 'react-native-unistyles'; +import { Text as RNText } from 'react-native'; + +import HelperTextProps from './Helper.props'; +import TextProps from '../Text/Text.props'; +import { useHelperContext } from './HelperContext'; + +const HelperText: React.FC = forwardRef( + ({ children, style, ...props }, ref) => { + const { validationStatus, disabled } = useHelperContext(); + const { styles } = useStyles(stylesheet, { validationStatus, disabled }); + + return ( + + {children} + + ); + } +); + +HelperText.displayName = 'HelperText'; + +const stylesheet = createStyleSheet(({ colors }) => ({ + text: { + color: colors.grey800, + variants: { + validationStatus: { + valid: { + color: colors.green600, + }, + invalid: { + color: colors.red600, + }, + initial: {}, + }, + disabled: { + true: { + color: colors.grey400, + }, + }, + }, + }, +})); + +export default HelperText; diff --git a/packages/native-ui/src/components/Helper/index.ts b/packages/native-ui/src/components/Helper/index.ts new file mode 100644 index 000000000..eb62ec450 --- /dev/null +++ b/packages/native-ui/src/components/Helper/index.ts @@ -0,0 +1,3 @@ +export { default as HelperText } from './HelperText'; +export { default as HelperIcon } from './HelperIcon'; +export { default as Helper } from './Helper'; diff --git a/packages/native-ui/src/components/Input/Input.tsx b/packages/native-ui/src/components/Input/Input.tsx index 3d9b7ee70..a736b545f 100644 --- a/packages/native-ui/src/components/Input/Input.tsx +++ b/packages/native-ui/src/components/Input/Input.tsx @@ -32,18 +32,25 @@ const Input: React.FC = ({ ...props }) => { const formFieldContext = useFormFieldContext(); - const validationStatusFromContext = formFieldContext?.validationStatus; + const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus; return ( {children ? ( - children + <> + {children} + {showValidationIcon && validationStatusFromContext !== 'initial' && ( + + + + )} + ) : ( <> {leadingIcon && ( @@ -52,6 +59,11 @@ const Input: React.FC = ({ )} + {showValidationIcon && validationStatusFromContext !== 'initial' && ( + + + + )} {trailingIcon && ( @@ -59,11 +71,6 @@ const Input: React.FC = ({ )} )} - {showValidationIcon && validationStatus !== 'initial' && ( - - - - )} ); }; diff --git a/packages/native-ui/src/components/Label/Label.props.ts b/packages/native-ui/src/components/Label/Label.props.ts new file mode 100644 index 000000000..506bef5d0 --- /dev/null +++ b/packages/native-ui/src/components/Label/Label.props.ts @@ -0,0 +1,8 @@ +import type TextProps from '../Text/Text.props'; + +interface LabelProps extends TextProps { + nested?: boolean; + disabled?: boolean; +} + +export default LabelProps; diff --git a/packages/native-ui/src/components/Label/Label.tsx b/packages/native-ui/src/components/Label/Label.tsx new file mode 100644 index 000000000..f90b1227b --- /dev/null +++ b/packages/native-ui/src/components/Label/Label.tsx @@ -0,0 +1,41 @@ +import React, { forwardRef } from 'react'; +import { Text } from '../Text'; +import { createStyleSheet, useStyles } from 'react-native-unistyles'; +import { Text as RNText } from 'react-native'; + +import LabelProps from './Label.props'; + +const Label: React.FC = forwardRef( + ({ children, nested, style, disabled, ...props }, ref) => { + const { styles } = useStyles(stylesheet, { nested, disabled }); + + return ( + + {children} + + ); + } +); + +Label.displayName = 'Label'; + +const stylesheet = createStyleSheet(({ colors, fontWeights, lineHeights }) => ({ + text: { + fontWeight: fontWeights.semibold, + lineHeight: lineHeights['lg'], + variants: { + nested: { + true: { + fontWeight: fontWeights.normal, + }, + }, + disabled: { + true: { + color: colors.grey400, + }, + }, + }, + }, +})); + +export default Label; diff --git a/packages/native-ui/src/components/Label/index.ts b/packages/native-ui/src/components/Label/index.ts new file mode 100644 index 000000000..d9edd5857 --- /dev/null +++ b/packages/native-ui/src/components/Label/index.ts @@ -0,0 +1 @@ +export { default as Label } from './Label'; From bd5ee778595558815c471d839d09206288269cf2 Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Tue, 22 Oct 2024 11:28:05 +0100 Subject: [PATCH 41/45] refactor: update props and playground --- .../components/FormField/FormField.tsx | 80 +++++++++++-------- .../AnimatedOutline/AnimatedOutline.tsx | 11 ++- .../components/Checkbox/CheckboxIndicator.tsx | 5 +- .../FormField/FormFielInvalidIcon.tsx | 13 +++ .../components/FormField/FormField.props.ts | 9 ++- .../src/components/FormField/FormField.tsx | 21 +++++ .../components/FormField/FormFieldInvalid.tsx | 10 +-- .../components/FormField/FormFieldValid.tsx | 5 +- .../FormField/FormFieldValidIcon.tsx | 13 +++ .../src/components/FormField/index.ts | 12 ++- .../FormField/styled-components/Error.tsx | 6 -- .../FormField/styled-components/ErrorIcon.tsx | 7 -- .../FormField/styled-components/ErrorText.tsx | 13 --- .../FormField/styled-components/Helper.tsx | 6 -- .../styled-components/HelperIcon.tsx | 16 ---- .../styled-components/HelperText.tsx | 13 --- .../FormField/styled-components/Invalid.tsx | 6 -- .../styled-components/InvalidIcon.tsx | 16 ---- .../styled-components/InvalidText.tsx | 7 -- .../FormField/styled-components/Label.tsx | 7 -- .../styled-components/LabelAstrick.tsx | 14 ---- .../FormField/styled-components/LabelText.tsx | 16 ---- .../FormField/styled-components/Root.tsx | 18 ----- .../FormField/styled-components/Valid.tsx | 6 -- .../FormField/styled-components/ValidIcon.tsx | 16 ---- .../FormField/styled-components/ValidText.tsx | 7 -- .../FormField/styled-components/index.tsx | 16 ---- .../src/components/Helper/Helper.tsx | 4 +- .../src/components/Helper/HelperIcon.tsx | 30 ++++--- .../src/components/Helper/HelperText.tsx | 22 +++-- .../List/ListHeading/ListHeading.tsx | 2 +- 31 files changed, 157 insertions(+), 270 deletions(-) create mode 100644 packages/native-ui/src/components/FormField/FormFielInvalidIcon.tsx create mode 100644 packages/native-ui/src/components/FormField/FormFieldValidIcon.tsx delete mode 100644 packages/native-ui/src/components/FormField/styled-components/Error.tsx delete mode 100644 packages/native-ui/src/components/FormField/styled-components/ErrorIcon.tsx delete mode 100644 packages/native-ui/src/components/FormField/styled-components/ErrorText.tsx delete mode 100644 packages/native-ui/src/components/FormField/styled-components/Helper.tsx delete mode 100644 packages/native-ui/src/components/FormField/styled-components/HelperIcon.tsx delete mode 100644 packages/native-ui/src/components/FormField/styled-components/HelperText.tsx delete mode 100644 packages/native-ui/src/components/FormField/styled-components/Invalid.tsx delete mode 100644 packages/native-ui/src/components/FormField/styled-components/InvalidIcon.tsx delete mode 100644 packages/native-ui/src/components/FormField/styled-components/InvalidText.tsx delete mode 100644 packages/native-ui/src/components/FormField/styled-components/Label.tsx delete mode 100644 packages/native-ui/src/components/FormField/styled-components/LabelAstrick.tsx delete mode 100644 packages/native-ui/src/components/FormField/styled-components/LabelText.tsx delete mode 100644 packages/native-ui/src/components/FormField/styled-components/Root.tsx delete mode 100644 packages/native-ui/src/components/FormField/styled-components/Valid.tsx delete mode 100644 packages/native-ui/src/components/FormField/styled-components/ValidIcon.tsx delete mode 100644 packages/native-ui/src/components/FormField/styled-components/ValidText.tsx delete mode 100644 packages/native-ui/src/components/FormField/styled-components/index.tsx diff --git a/apps/native-ui-storybook/components/FormField/FormField.tsx b/apps/native-ui-storybook/components/FormField/FormField.tsx index a12d7508c..06bec20c3 100644 --- a/apps/native-ui-storybook/components/FormField/FormField.tsx +++ b/apps/native-ui-storybook/components/FormField/FormField.tsx @@ -1,41 +1,15 @@ import React from 'react'; -import { - Input, - InputField, - FormField, - FormFieldHelper, - FormFieldHelperText, - FormFieldLabel, - FormFieldLabelText, - FormFieldInvalidIcon, - FormFieldInvalid, - FormFieldInvalidText, - FormFieldValidIcon, - FormFieldValid, - FormFieldValidText, -} from '@utilitywarehouse/native-ui'; +import { Input, FormField } from '@utilitywarehouse/native-ui'; +import * as Icons from '@utilitywarehouse/react-native-icons'; import { Meta, StoryFn } from '@storybook/react'; -const FormFieldBasic: StoryFn = ({ validationStatus, showValidationIcon, ...props }: any) => { +const FormFieldBasic: StoryFn = ({ validationStatus, helperIcon: icon, ...props }: any) => { + /* eslint-disable @typescript-eslint/no-unsafe-assignment */ + // @ts-expect-error - This is a playground + const helperIcon: ComponentType | undefined = icon === 'none' ? undefined : Icons[icon]; return ( - - - Label - - - - - - Helper text - - - {showValidationIcon && } - Invalid form field text - - - {showValidationIcon && } - Valid form field text - + + ); }; @@ -57,12 +31,50 @@ FormFieldBasic.argTypes = { description: 'Disable the Input component', defaultValue: false, }, + label: { + control: 'text', + description: 'The label of the Input component', + defaultValue: 'Label', + }, + helperText: { + control: 'text', + description: 'The helper text of the Input component', + defaultValue: 'Helper text', + }, + helperIcon: { + control: 'select', + options: ['none', ...Object.keys(Icons).filter(icon => icon.includes('Medium'))], + description: 'The helper text icon of the Input component', + defaultValue: 'Helper text icon', + }, + helperPosition: { + control: 'select', + options: ['top', 'bottom'], + description: 'The helper text position of the Input component', + defaultValue: 'bottom', + }, + validText: { + control: 'text', + description: 'The valid text of the Input component', + defaultValue: 'Valid text', + }, + invalidText: { + control: 'text', + description: 'The invalid text of the Input component', + defaultValue: 'Invalid text', + }, } as Meta['argTypes']; FormFieldBasic.args = { validationStatus: 'initial', disabled: false, showValidationIcon: false, + label: 'Label', + helperText: 'Helper text', + helperIcon: 'none', + helperPosition: 'top', + validText: 'Valid text', + invalidText: 'Invalid error text', } as Meta['args']; export default FormFieldBasic; diff --git a/packages/native-ui/src/components/AnimatedOutline/AnimatedOutline.tsx b/packages/native-ui/src/components/AnimatedOutline/AnimatedOutline.tsx index 8f02c496c..f37a2ce90 100644 --- a/packages/native-ui/src/components/AnimatedOutline/AnimatedOutline.tsx +++ b/packages/native-ui/src/components/AnimatedOutline/AnimatedOutline.tsx @@ -1,5 +1,5 @@ import React, { PropsWithChildren, useEffect, useState } from 'react'; -import { View } from 'react-native'; +import { View, ViewProps } from 'react-native'; import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated'; import { createStyleSheet, useStyles } from 'react-native-unistyles'; @@ -38,7 +38,12 @@ interface Props { show: boolean; } -const AnimatedOutline: React.FC> = ({ children, show }) => { +const AnimatedOutline: React.FC & ViewProps> = ({ + children, + style, + show, + ...props +}) => { const [visible, setVisible] = useState(show); const { styles } = useStyles(stylesheet); @@ -56,7 +61,7 @@ const AnimatedOutline: React.FC> = ({ children, show }) }, [show]); return ( - + {visible && } {children} diff --git a/packages/native-ui/src/components/Checkbox/CheckboxIndicator.tsx b/packages/native-ui/src/components/Checkbox/CheckboxIndicator.tsx index 5decaa036..82b682e15 100644 --- a/packages/native-ui/src/components/Checkbox/CheckboxIndicator.tsx +++ b/packages/native-ui/src/components/Checkbox/CheckboxIndicator.tsx @@ -15,7 +15,7 @@ const CheckboxIndicator = forwardRef((props, ref) => { }); return ( - + ((props, ref) => { }); const stylesheet = createStyleSheet(({ colors, colorMode, radii, borderWidths, space }) => ({ + outline: { + alignSelf: 'flex-start', + }, container: { justifyContent: 'center', alignItems: 'center', diff --git a/packages/native-ui/src/components/FormField/FormFielInvalidIcon.tsx b/packages/native-ui/src/components/FormField/FormFielInvalidIcon.tsx new file mode 100644 index 000000000..4de3524fd --- /dev/null +++ b/packages/native-ui/src/components/FormField/FormFielInvalidIcon.tsx @@ -0,0 +1,13 @@ +import React, { forwardRef } from 'react'; +import { HelperIcon } from '../Helper'; +import IconProps from '../Icon/Icon.props'; +import { SvgRef } from '../../types'; +import { WarningMediumContainedIcon } from '@utilitywarehouse/react-native-icons'; + +const FormFieldInvalidIcon = forwardRef>(props => { + return ; +}); + +FormFieldInvalidIcon.displayName = 'FormFieldInvalidIcon'; + +export default FormFieldInvalidIcon; diff --git a/packages/native-ui/src/components/FormField/FormField.props.ts b/packages/native-ui/src/components/FormField/FormField.props.ts index b50d2fa35..184302c8a 100644 --- a/packages/native-ui/src/components/FormField/FormField.props.ts +++ b/packages/native-ui/src/components/FormField/FormField.props.ts @@ -1,10 +1,17 @@ -import { ViewProps } from 'react-native'; +import type { ComponentType } from 'react'; +import type { ViewProps } from 'react-native'; export interface FormFieldBaseProps { validationStatus?: 'valid' | 'invalid' | 'initial'; disabled?: boolean; readonly?: boolean; showValidationIcon?: boolean; + label?: string; + helperText?: string; + helperIcon?: ComponentType; + helperPosition?: 'top' | 'bottom'; + validText?: string; + invalidText?: string; } interface FormFieldProps extends FormFieldBaseProps, ViewProps {} diff --git a/packages/native-ui/src/components/FormField/FormField.tsx b/packages/native-ui/src/components/FormField/FormField.tsx index df1778153..c26876390 100644 --- a/packages/native-ui/src/components/FormField/FormField.tsx +++ b/packages/native-ui/src/components/FormField/FormField.tsx @@ -8,6 +8,7 @@ import FormFieldHelperComponent from './FormFieldHelper'; import FormFieldLabelComponent from './FormFieldLabel'; import { HelperIcon, HelperText } from '../Helper'; import { View } from 'react-native'; +import FormFieldValid from './FormFieldValid'; export const FormFieldComponent = createFormControl({ Root: FormFieldRoot, @@ -25,6 +26,9 @@ export const FormFieldLabel = FormFieldComponent.Label; export const FormFieldLabelText = FormFieldComponent.Label.Text; export const FormFieldHelper = FormFieldComponent.Helper; export const FormFieldHelperText = FormFieldComponent.Helper.Text; +export const FormFieldHelperIcon = HelperIcon; +export const FormFieldValidText = HelperText; +export const FormFieldInvalidText = HelperText; const FormField: FC = ({ children, @@ -32,6 +36,12 @@ const FormField: FC = ({ validationStatus = 'initial', readonly, showValidationIcon = false, + label, + helperText, + helperIcon, + helperPosition, + validText, + invalidText, ...props }) => { const value = useMemo( @@ -47,7 +57,18 @@ const FormField: FC = ({ return ( + {label ? {label} : null} + {!!helperText && helperPosition === 'top' && ( + + )} {children} + {!!helperText && helperPosition === 'bottom' && ( + + )} + {!!validText && } + {!!invalidText && ( + + )} ); diff --git a/packages/native-ui/src/components/FormField/FormFieldInvalid.tsx b/packages/native-ui/src/components/FormField/FormFieldInvalid.tsx index 50b72c0d0..53eab11bd 100644 --- a/packages/native-ui/src/components/FormField/FormFieldInvalid.tsx +++ b/packages/native-ui/src/components/FormField/FormFieldInvalid.tsx @@ -2,22 +2,18 @@ import React, { FC } from 'react'; import { useFormFieldContext } from './FormField.context'; import { Helper } from '../Helper'; import HelperProps from '../Helper/Helper.props'; +import { WarningMediumContainedIcon } from '@utilitywarehouse/react-native-icons'; const FormFieldInvalid: FC> = ({ children, - icon, + icon = WarningMediumContainedIcon, text, ...props }) => { const { validationStatus, disabled, showValidationIcon } = useFormFieldContext(); return validationStatus === 'invalid' ? ( children ? ( - + {children} ) : ( diff --git a/packages/native-ui/src/components/FormField/FormFieldValid.tsx b/packages/native-ui/src/components/FormField/FormFieldValid.tsx index 4fe41ead3..b12eb1b56 100644 --- a/packages/native-ui/src/components/FormField/FormFieldValid.tsx +++ b/packages/native-ui/src/components/FormField/FormFieldValid.tsx @@ -2,17 +2,18 @@ import React, { FC } from 'react'; import { useFormFieldContext } from './FormField.context'; import { Helper } from '../Helper'; import HelperProps from '../Helper/Helper.props'; +import { TickMediumContainedIcon } from '@utilitywarehouse/react-native-icons'; const FormFieldValid: FC> = ({ children, - icon, + icon = TickMediumContainedIcon, text, ...props }) => { const { validationStatus, disabled, showValidationIcon } = useFormFieldContext(); return validationStatus === 'valid' ? ( children ? ( - + {children} ) : ( diff --git a/packages/native-ui/src/components/FormField/FormFieldValidIcon.tsx b/packages/native-ui/src/components/FormField/FormFieldValidIcon.tsx new file mode 100644 index 000000000..602a4e644 --- /dev/null +++ b/packages/native-ui/src/components/FormField/FormFieldValidIcon.tsx @@ -0,0 +1,13 @@ +import React, { forwardRef } from 'react'; +import { HelperIcon } from '../Helper'; +import IconProps from '../Icon/Icon.props'; +import { SvgRef } from '../../types'; +import { TickMediumContainedIcon } from '@utilitywarehouse/react-native-icons'; + +const FormFieldValidIcon = forwardRef>(props => { + return ; +}); + +FormFieldValidIcon.displayName = 'FormFieldValidIcon'; + +export default FormFieldValidIcon; diff --git a/packages/native-ui/src/components/FormField/index.ts b/packages/native-ui/src/components/FormField/index.ts index 9ba0cd1e2..1f4850525 100644 --- a/packages/native-ui/src/components/FormField/index.ts +++ b/packages/native-ui/src/components/FormField/index.ts @@ -4,14 +4,12 @@ export { FormFieldHelperText, FormFieldLabel, FormFieldLabelText, + FormFieldHelperIcon, + FormFieldValidText, + FormFieldInvalidText, } from './FormField'; +export { default as FormFieldValidIcon } from './FormFieldValidIcon'; +export { default as FormFieldInvalidIcon } from './FormFielInvalidIcon'; export { default as FormFieldValid } from './FormFieldValid'; export { default as FormFieldInvalid } from './FormFieldInvalid'; export { useFormFieldContext } from './FormField.context'; -export { - HelperIcon as FormFieldHelperIcon, - ValidIcon as FormFieldValidIcon, - ValidText as FormFieldValidText, - InvalidIcon as FormFieldInvalidIcon, - InvalidText as FormFieldInvalidText, -} from './styled-components'; diff --git a/packages/native-ui/src/components/FormField/styled-components/Error.tsx b/packages/native-ui/src/components/FormField/styled-components/Error.tsx deleted file mode 100644 index 81e1f1bc5..000000000 --- a/packages/native-ui/src/components/FormField/styled-components/Error.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { styled } from '@gluestack-style/react'; -import { View } from 'react-native'; - -export default styled(View, {}, { - componentName: 'FormFieldError', -} as const); diff --git a/packages/native-ui/src/components/FormField/styled-components/ErrorIcon.tsx b/packages/native-ui/src/components/FormField/styled-components/ErrorIcon.tsx deleted file mode 100644 index f1c0bff30..000000000 --- a/packages/native-ui/src/components/FormField/styled-components/ErrorIcon.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { styled } from '@gluestack-style/react'; -import { AsForwarder } from '@gluestack-ui/themed'; - -export default styled(AsForwarder, {}, { - componentName: 'FormFieldErrorIcon', - ancestorStyle: ['_icon'], -} as const); diff --git a/packages/native-ui/src/components/FormField/styled-components/ErrorText.tsx b/packages/native-ui/src/components/FormField/styled-components/ErrorText.tsx deleted file mode 100644 index d80d5cafd..000000000 --- a/packages/native-ui/src/components/FormField/styled-components/ErrorText.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { styled } from '@gluestack-style/react'; -import { Text } from 'react-native'; - -export default styled( - Text, - { - fontFamily: '$body', - }, - { - componentName: 'FormFieldErrorText', - ancestorStyle: ['_errorText'], - } as const -); diff --git a/packages/native-ui/src/components/FormField/styled-components/Helper.tsx b/packages/native-ui/src/components/FormField/styled-components/Helper.tsx deleted file mode 100644 index 4443adf9c..000000000 --- a/packages/native-ui/src/components/FormField/styled-components/Helper.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { styled } from '@gluestack-style/react'; -import { View } from 'react-native'; - -export default styled(View, {}, { - componentName: 'FormFieldHelper', -} as const); diff --git a/packages/native-ui/src/components/FormField/styled-components/HelperIcon.tsx b/packages/native-ui/src/components/FormField/styled-components/HelperIcon.tsx deleted file mode 100644 index 6441216f6..000000000 --- a/packages/native-ui/src/components/FormField/styled-components/HelperIcon.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { styled } from '@gluestack-style/react'; -import { AsForwarder } from '@gluestack-ui/themed'; -import { InformationMediumContainedIcon } from '@utilitywarehouse/react-native-icons'; - -export default styled( - AsForwarder, - { - props: { - as: InformationMediumContainedIcon, - }, - }, - { - componentName: 'FormFieldHelperIcon', - ancestorStyle: ['_helperIcon'], - } as const -); diff --git a/packages/native-ui/src/components/FormField/styled-components/HelperText.tsx b/packages/native-ui/src/components/FormField/styled-components/HelperText.tsx deleted file mode 100644 index ea4320428..000000000 --- a/packages/native-ui/src/components/FormField/styled-components/HelperText.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { styled } from '@gluestack-style/react'; -import { Text } from 'react-native'; - -export default styled( - Text, - { - fontFamily: '$body', - }, - { - componentName: 'FormFieldHelperText', - ancestorStyle: ['_helperText'], - } as const -); diff --git a/packages/native-ui/src/components/FormField/styled-components/Invalid.tsx b/packages/native-ui/src/components/FormField/styled-components/Invalid.tsx deleted file mode 100644 index 7ecb79639..000000000 --- a/packages/native-ui/src/components/FormField/styled-components/Invalid.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { styled } from '@gluestack-style/react'; -import { View } from 'react-native'; - -export default styled(View, {}, { - componentName: 'FormFieldInvalid', -} as const); diff --git a/packages/native-ui/src/components/FormField/styled-components/InvalidIcon.tsx b/packages/native-ui/src/components/FormField/styled-components/InvalidIcon.tsx deleted file mode 100644 index bc8db2df1..000000000 --- a/packages/native-ui/src/components/FormField/styled-components/InvalidIcon.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { styled } from '@gluestack-style/react'; -import { AsForwarder } from '@gluestack-ui/themed'; -import { WarningMediumContainedIcon } from '@utilitywarehouse/react-native-icons'; - -export default styled( - AsForwarder, - { - props: { - as: WarningMediumContainedIcon, - }, - }, - { - componentName: 'FormFieldInvalidIcon', - ancestorStyle: ['_invalidIcon'], - } as const -); diff --git a/packages/native-ui/src/components/FormField/styled-components/InvalidText.tsx b/packages/native-ui/src/components/FormField/styled-components/InvalidText.tsx deleted file mode 100644 index 61e0db90f..000000000 --- a/packages/native-ui/src/components/FormField/styled-components/InvalidText.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { styled } from '@gluestack-style/react'; -import { Text } from 'react-native'; - -export default styled(Text, {}, { - componentName: 'FormFieldInvalidText', - ancestorStyle: ['_invalidText'], -} as const); diff --git a/packages/native-ui/src/components/FormField/styled-components/Label.tsx b/packages/native-ui/src/components/FormField/styled-components/Label.tsx deleted file mode 100644 index a02415170..000000000 --- a/packages/native-ui/src/components/FormField/styled-components/Label.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { styled } from '@gluestack-style/react'; -import { View } from 'react-native'; - -export default styled(View, {}, { - componentName: 'FormFieldLabel', - descendantStyle: ['_labelText'], -} as const); diff --git a/packages/native-ui/src/components/FormField/styled-components/LabelAstrick.tsx b/packages/native-ui/src/components/FormField/styled-components/LabelAstrick.tsx deleted file mode 100644 index 69173085d..000000000 --- a/packages/native-ui/src/components/FormField/styled-components/LabelAstrick.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { styled } from '@gluestack-style/react'; -import { Text } from 'react-native'; - -export default styled( - Text, - { - lineHeight: '$2xs', - fontFamily: '$body', - }, - { - componentName: 'FormFieldErrorText', - ancestorStyle: ['_labelAstrick'], - } as const -); diff --git a/packages/native-ui/src/components/FormField/styled-components/LabelText.tsx b/packages/native-ui/src/components/FormField/styled-components/LabelText.tsx deleted file mode 100644 index 75018cb1c..000000000 --- a/packages/native-ui/src/components/FormField/styled-components/LabelText.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { styled } from '@gluestack-style/react'; -import { Text } from 'react-native'; - -export default styled( - Text, - { - fontSize: '$md', - lineHeight: '$2xs', - fontFamily: '$body', - fontWeight: '$medium', - }, - { - componentName: 'FormFieldLabelText', - ancestorStyle: ['_labelText'], - } as const -); diff --git a/packages/native-ui/src/components/FormField/styled-components/Root.tsx b/packages/native-ui/src/components/FormField/styled-components/Root.tsx deleted file mode 100644 index dab5c2448..000000000 --- a/packages/native-ui/src/components/FormField/styled-components/Root.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { View } from 'react-native'; -import { styled } from '@gluestack-style/react'; - -export default styled(View, {}, { - componentName: 'FormField', - descendantStyle: [ - '_labelText', - '_helperText', - '_helperIcon', - '_errorText', - '_labelAstrick', - '_invalidText', - '_validText', - '_invalidIcon', - '_validIcon', - '_input', - ], -} as const); diff --git a/packages/native-ui/src/components/FormField/styled-components/Valid.tsx b/packages/native-ui/src/components/FormField/styled-components/Valid.tsx deleted file mode 100644 index f76ee4e75..000000000 --- a/packages/native-ui/src/components/FormField/styled-components/Valid.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { styled } from '@gluestack-style/react'; -import { View } from 'react-native'; - -export default styled(View, {}, { - componentName: 'FormFieldValid', -} as const); diff --git a/packages/native-ui/src/components/FormField/styled-components/ValidIcon.tsx b/packages/native-ui/src/components/FormField/styled-components/ValidIcon.tsx deleted file mode 100644 index efe2306d6..000000000 --- a/packages/native-ui/src/components/FormField/styled-components/ValidIcon.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { styled } from '@gluestack-style/react'; -import { AsForwarder } from '@gluestack-ui/themed'; -import { TickMediumContainedIcon } from '@utilitywarehouse/react-native-icons'; - -export default styled( - AsForwarder, - { - props: { - as: TickMediumContainedIcon, - }, - }, - { - componentName: 'FormFieldValidIcon', - ancestorStyle: ['_validIcon'], - } as const -); diff --git a/packages/native-ui/src/components/FormField/styled-components/ValidText.tsx b/packages/native-ui/src/components/FormField/styled-components/ValidText.tsx deleted file mode 100644 index 8db69dc93..000000000 --- a/packages/native-ui/src/components/FormField/styled-components/ValidText.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { styled } from '@gluestack-style/react'; -import { Text } from 'react-native'; - -export default styled(Text, {}, { - componentName: 'FormFieldValidText', - ancestorStyle: ['_validText'], -} as const); diff --git a/packages/native-ui/src/components/FormField/styled-components/index.tsx b/packages/native-ui/src/components/FormField/styled-components/index.tsx deleted file mode 100644 index 43fb9d06c..000000000 --- a/packages/native-ui/src/components/FormField/styled-components/index.tsx +++ /dev/null @@ -1,16 +0,0 @@ -export { default as Root } from './Root'; -export { default as Error } from './Error'; -export { default as ErrorText } from './ErrorText'; -export { default as ErrorIcon } from './ErrorIcon'; -export { default as Label } from './Label'; -export { default as LabelText } from './LabelText'; -export { default as LabelAstrick } from './LabelAstrick'; -export { default as Helper } from './Helper'; -export { default as HelperIcon } from './HelperIcon'; -export { default as HelperText } from './HelperText'; -export { default as Invalid } from './Invalid'; -export { default as InvalidIcon } from './InvalidIcon'; -export { default as InvalidText } from './InvalidText'; -export { default as Valid } from './Valid'; -export { default as ValidIcon } from './ValidIcon'; -export { default as ValidText } from './ValidText'; diff --git a/packages/native-ui/src/components/Helper/Helper.tsx b/packages/native-ui/src/components/Helper/Helper.tsx index 657fe2ccb..803933238 100644 --- a/packages/native-ui/src/components/Helper/Helper.tsx +++ b/packages/native-ui/src/components/Helper/Helper.tsx @@ -10,7 +10,7 @@ import { import HelperProps from './Helper.props'; import { HelperContext } from './HelperContext'; -const Helper: React.FC = forwardRef( +const Helper = forwardRef( ({ children, validationStatus, showIcon, style, disabled, icon, text, ...props }, ref) => { const { styles } = useStyles(stylesheet, { validationStatus, disabled }); let HelperIcon = icon; @@ -21,6 +21,8 @@ const Helper: React.FC = forwardRef( HelperIcon = WarningMediumContainedIcon; } + console.log(HelperIcon); + const value = useMemo(() => ({ validationStatus, disabled }), [validationStatus, disabled]); return ( diff --git a/packages/native-ui/src/components/Helper/HelperIcon.tsx b/packages/native-ui/src/components/Helper/HelperIcon.tsx index 7fa137ca4..00989ea65 100644 --- a/packages/native-ui/src/components/Helper/HelperIcon.tsx +++ b/packages/native-ui/src/components/Helper/HelperIcon.tsx @@ -1,20 +1,30 @@ import React, { forwardRef } from 'react'; import { createStyleSheet, useStyles } from 'react-native-unistyles'; - import { Icon } from '../Icon'; - -import HelperIconProps from './Helper.props'; import { SvgRef } from '../../types'; import IconProps from '../Icon/Icon.props'; import { useHelperContext } from './HelperContext'; +import { Platform, StyleProp, ViewStyle } from 'react-native'; + +const HelperIcon = forwardRef(({ style, ...props }, ref) => { + const { validationStatus, disabled } = useHelperContext(); + const { styles } = useStyles(stylesheet, { validationStatus, disabled }); -const HelperIcon: React.FC = forwardRef( - ({ style, ...props }, ref) => { - const { validationStatus, disabled } = useHelperContext(); - const { styles } = useStyles(stylesheet, { validationStatus, disabled }); - return ; - } -); + return ( + , style] + } + {...props} + /> + ); +}); HelperIcon.displayName = 'HelperIcon'; diff --git a/packages/native-ui/src/components/Helper/HelperText.tsx b/packages/native-ui/src/components/Helper/HelperText.tsx index e75b9f1c9..3d51404e0 100644 --- a/packages/native-ui/src/components/Helper/HelperText.tsx +++ b/packages/native-ui/src/components/Helper/HelperText.tsx @@ -2,23 +2,19 @@ import React, { forwardRef } from 'react'; import { Text } from '../Text'; import { createStyleSheet, useStyles } from 'react-native-unistyles'; import { Text as RNText } from 'react-native'; - -import HelperTextProps from './Helper.props'; import TextProps from '../Text/Text.props'; import { useHelperContext } from './HelperContext'; -const HelperText: React.FC = forwardRef( - ({ children, style, ...props }, ref) => { - const { validationStatus, disabled } = useHelperContext(); - const { styles } = useStyles(stylesheet, { validationStatus, disabled }); +const HelperText = forwardRef(({ children, style, ...props }, ref) => { + const { validationStatus, disabled } = useHelperContext(); + const { styles } = useStyles(stylesheet, { validationStatus, disabled }); - return ( - - {children} - - ); - } -); + return ( + + {children} + + ); +}); HelperText.displayName = 'HelperText'; diff --git a/packages/native-ui/src/components/List/ListHeading/ListHeading.tsx b/packages/native-ui/src/components/List/ListHeading/ListHeading.tsx index 4ce045e00..c1970b7b6 100644 --- a/packages/native-ui/src/components/List/ListHeading/ListHeading.tsx +++ b/packages/native-ui/src/components/List/ListHeading/ListHeading.tsx @@ -18,7 +18,7 @@ const ListHeading = forwardRef( ) : ( <> {text} - {supportingText && ( + {!!supportingText && ( {supportingText} )} From 9fee8975034d2bd0891182d38160ea33b3254e19 Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Tue, 22 Oct 2024 15:14:57 +0100 Subject: [PATCH 42/45] chore: update docs --- .../components/FormField/FormField.docs.mdx | 232 +++++++++--------- .../components/FormField/Variants.tsx | 2 - .../src/components/Checkbox/CheckboxLabel.tsx | 17 +- .../src/components/FormField/FormField.tsx | 18 +- .../src/components/Helper/Helper.tsx | 2 - .../native-ui/src/components/Label/Label.tsx | 2 +- .../src/components/Radio/RadioIndicator.tsx | 5 +- .../src/components/Radio/RadioLabel.tsx | 17 +- .../native-ui/src/config/theme/FormField.ts | 103 -------- .../src/config/theme/FormFieldHelper.ts | 7 - .../src/config/theme/FormFieldHelperIcon.ts | 9 - .../src/config/theme/FormFieldHelperText.ts | 5 - .../src/config/theme/FormFieldInvalid.ts | 8 - .../src/config/theme/FormFieldInvalidIcon.ts | 9 - .../src/config/theme/FormFieldInvalidText.ts | 10 - .../src/config/theme/FormFieldLabel.ts | 7 - .../src/config/theme/FormFieldLabelText.ts | 6 - .../src/config/theme/FormFieldValid.ts | 8 - .../src/config/theme/FormFieldValidIcon.ts | 8 - .../src/config/theme/FormFieldValidText.ts | 10 - packages/native-ui/src/config/theme/index.ts | 13 +- 21 files changed, 147 insertions(+), 351 deletions(-) delete mode 100644 packages/native-ui/src/config/theme/FormField.ts delete mode 100644 packages/native-ui/src/config/theme/FormFieldHelper.ts delete mode 100644 packages/native-ui/src/config/theme/FormFieldHelperIcon.ts delete mode 100644 packages/native-ui/src/config/theme/FormFieldHelperText.ts delete mode 100644 packages/native-ui/src/config/theme/FormFieldInvalid.ts delete mode 100644 packages/native-ui/src/config/theme/FormFieldInvalidIcon.ts delete mode 100644 packages/native-ui/src/config/theme/FormFieldInvalidText.ts delete mode 100644 packages/native-ui/src/config/theme/FormFieldLabel.ts delete mode 100644 packages/native-ui/src/config/theme/FormFieldLabelText.ts delete mode 100644 packages/native-ui/src/config/theme/FormFieldValid.ts delete mode 100644 packages/native-ui/src/config/theme/FormFieldValidIcon.ts delete mode 100644 packages/native-ui/src/config/theme/FormFieldValidText.ts diff --git a/apps/native-ui-storybook/components/FormField/FormField.docs.mdx b/apps/native-ui-storybook/components/FormField/FormField.docs.mdx index cd945d713..ed83c9573 100644 --- a/apps/native-ui-storybook/components/FormField/FormField.docs.mdx +++ b/apps/native-ui-storybook/components/FormField/FormField.docs.mdx @@ -22,6 +22,7 @@ import { RadioLabel, Checkbox, CheckboxIndicator, + CheckboxIcon, CheckboxLabel, VStack, } from '@utilitywarehouse/native-ui'; @@ -42,10 +43,12 @@ The `FormField` component is a container for form elements such as input fields. - [Usage](#usage) - [Validation Helper Text](#validation-helper-text) - [Props](#props) +- [Components](#components) - [Variants](#variants) +- [Advanced Usage](#advanced-usage) - [Examples](#examples) - - [With RadioGroup](#with-radiogroup) - - [With Checkbox](#with-checkbox) + - [With `RadioGroup`](#with-radiogroup) + - [With `Checkbox`](#with-checkbox) ## Playground @@ -60,42 +63,20 @@ The `FormField` component is a container for form elements such as input fields.
- - - Label - - console.log('###')} /> - - Helper text - + + console.log('###')} placeholder="Placeholder" />
```tsx -import { - Input, - InputField, - FormField, - FormFieldHelper, - FormFieldHelperText, - FormFieldLabel, - FormFieldLabelText, -} from '@utilitywarehouse/native-ui'; +import { Input, FormField } from '@utilitywarehouse/native-ui'; const MyComponent = () => { return ( - - - Label - - console.log('###')}> - - - - Helper text - + + console.log('###')} placeholder="Placeholder" /> ); }; @@ -108,13 +89,83 @@ The `FormField` component can display helper text to provide additional context
- + + console.log('###')} placeholder="Placeholder" /> + +
+ + + +```tsx +import { Input, FormField } from '@utilitywarehouse/native-ui'; + +const MyComponent = () => { + return ( + + console.log('###')} placeholder="Placeholder" /> + + ); +}; +``` + +## Props + +| Name | Type | Default | Description | +| -------------------- | ---------------------------------- | ----------- | ---------------------------------------------------------------- | +| `validationStatus` | `'initial' \| 'valid' \| 'invalid` | `'initial'` | The validation status of the field. | +| `disabled` | `boolean` | `false` | Whether the field is disabled. | +| `readonly` | `boolean` | `false` | Whether the field is readonly. | +| `label` | `string` | `-` | The label for the field. | +| `helperText` | `string` | `-` | The helper text for the field. | +| `helperIcon` | `React.ComponentType` | `-` | The icon for the helper text. | +| `helperPosition` | `'top' \| 'bottom'` | `'top'` | The position of the helper text. | +| `validText` | `string` | `-` | The valid text for the field. | +| `invalidText` | `string` | `-` | The invalid text for the field. | +| `showValidationIcon` | `boolean` | `false` | Whether to show the validation icon next to the validation text. | + +## Components + +The `FormField` component is composed of the following components: + +- `FormFieldLabel` +- `FormFieldLabelText` +- `FormFieldHelper` +- `FormFieldHelperText` +- `FormFieldInvalid` +- `FormFieldInvalidIcon` +- `FormFieldInvalidText` +- `FormFieldValid` +- `FormFieldValidIcon` +- `FormFieldValidText` + +## Variants + + + +## Advanced Usage + +The `FormField` component can be broken down into smaller components to provide more control over the layout and styling of the form field. + + + +
+ Label - console.log('###')}> - - + console.log('###')} placeholder="Placeholder" /> Helper text @@ -134,12 +185,11 @@ The `FormField` component can display helper text to provide additional context ```tsx import { Input, - InputField, FormField, - FormFieldHelper, - FormFieldHelperText, FormFieldLabel, FormFieldLabelText, + FormFieldHelper, + FormFieldHelperText, FormFieldInvalidIcon, FormFieldInvalid, FormFieldInvalidText, @@ -150,13 +200,11 @@ import { const MyComponent = () => { return ( - + Label - console.log('###')}> - - + console.log('###')} placeholder="Placeholder" /> Helper text @@ -173,110 +221,53 @@ const MyComponent = () => { }; ``` -## Props - -| Name | Type | Default | Description | -| ------------------ | ---------------------------------- | ----------- | ----------------------------------- | -| `validationStatus` | `'initial' \| 'valid' \| 'invalid` | `'initial'` | The validation status of the field. | -| `disabled` | `boolean` | `false` | Whether the field is disabled. | - -#### Descendants Styling Props - -Props to style child components. - -| Sx Prop | Description | -| -------------- | ---------------------------------- | -| `_labelText` | Prop to style FormFieldLabel | -| `_helperText` | Prop to style FormFieldHelperText | -| `_helperIcon` | Prop to style FormFieldHelperIcon | -| `_errorText` | Prop to style FormFieldErrorText | -| `_invalidText` | Prop to style FormFieldInvalidText | -| `_validText` | Prop to style FormFieldValidText | -| `_invalidIcon` | Prop to style FormFieldInvalidIcon | -| `_validIcon` | Prop to style FormFieldValidIcon | -| `_input` | Prop to style Input | - -## Variants - - - ## Examples -### With RadioGroup +### With `RadioGroup` The `FormField` component can be used to wrap a `RadioGroup` component to provide additional context to the user.
- - - Favourite fruit - + - - - Mango - - - - Apple - - - - Orange - + + + + - - Choose the fruit you like the most -
```tsx -import { - RadioGroup, - Radio, - RadioIndicator, - RadioLabel, - FormField, - FormFieldHelper, - FormFieldHelperText, - FormFieldLabel, - FormFieldLabelText, -} from '@utilitywarehouse/native-ui'; +import { RadioGroup, Radio, FormField } from '@utilitywarehouse/native-ui'; const MyComponent = () => { return ( - - - Favourite fruit - + - - - Mango - - - - Apple - - - - Orange - + + + + - - Choose the fruit you like the most - ); }; ``` -### With Checkbox +### With `Checkbox` The `FormField` component can be used to wrap a `Checkbox` component to provide additional context to the user. @@ -285,7 +276,9 @@ The `FormField` component can be used to wrap a `Checkbox` component to provide
- + + + I accept the terms and conditions @@ -299,6 +292,7 @@ The `FormField` component can be used to wrap a `Checkbox` component to provide
+ diff --git a/apps/native-ui-storybook/components/FormField/Variants.tsx b/apps/native-ui-storybook/components/FormField/Variants.tsx index 89185dd27..e978d4bfa 100644 --- a/apps/native-ui-storybook/components/FormField/Variants.tsx +++ b/apps/native-ui-storybook/components/FormField/Variants.tsx @@ -71,7 +71,6 @@ const InputVariants: StoryFn = () => { - Valid form field text @@ -88,7 +87,6 @@ const InputVariants: StoryFn = () => { - Invalid form field text diff --git a/packages/native-ui/src/components/Checkbox/CheckboxLabel.tsx b/packages/native-ui/src/components/Checkbox/CheckboxLabel.tsx index 386949152..d051fc36a 100644 --- a/packages/native-ui/src/components/Checkbox/CheckboxLabel.tsx +++ b/packages/native-ui/src/components/Checkbox/CheckboxLabel.tsx @@ -1,31 +1,28 @@ import React, { forwardRef } from 'react'; import { createStyleSheet, useStyles } from 'react-native-unistyles'; -import { Text, TextProps } from 'react-native'; +import { Text } from 'react-native'; import { useCheckboxContext } from './Checkbox.context'; +import { Label } from '../Label'; +import LabelProps from '../Label/Label.props'; -const CheckboxLabel = forwardRef(({ children, style, ...props }, ref) => { +const CheckboxLabel = forwardRef(({ children, style, ...props }, ref) => { const { checked, disabled } = useCheckboxContext(); const { styles } = useStyles(stylesheet, { checked, disabled, }); return ( - + + ); }); CheckboxLabel.displayName = 'CheckboxLabel'; -const stylesheet = createStyleSheet(({ lineHeights, fontSizes, fonts, fontWeights, colors }) => ({ +const stylesheet = createStyleSheet(({ colors }) => ({ text: { - color: colors.grey1000, - lineHeight: lineHeights.lg, - fontSize: fontSizes.md, - fontFamily: fonts.body, - fontWeight: fontWeights.normal, variants: { checked: { true: { diff --git a/packages/native-ui/src/components/FormField/FormField.tsx b/packages/native-ui/src/components/FormField/FormField.tsx index c26876390..61c6b46de 100644 --- a/packages/native-ui/src/components/FormField/FormField.tsx +++ b/packages/native-ui/src/components/FormField/FormField.tsx @@ -9,6 +9,7 @@ import FormFieldLabelComponent from './FormFieldLabel'; import { HelperIcon, HelperText } from '../Helper'; import { View } from 'react-native'; import FormFieldValid from './FormFieldValid'; +import { createStyleSheet, useStyles } from 'react-native-unistyles'; export const FormFieldComponent = createFormControl({ Root: FormFieldRoot, @@ -53,14 +54,17 @@ const FormField: FC = ({ }), [validationStatus, disabled, readonly, showValidationIcon] ); + const { styles } = useStyles(stylesheet); return ( - {label ? {label} : null} - {!!helperText && helperPosition === 'top' && ( - - )} + + {!!label && {label}} + {!!helperText && helperPosition === 'top' && ( + + )} + {children} {!!helperText && helperPosition === 'bottom' && ( @@ -74,4 +78,10 @@ const FormField: FC = ({ ); }; +const stylesheet = createStyleSheet(({ space }) => ({ + labelWrapper: { + gap: space['1'], + }, +})); + export default FormField; diff --git a/packages/native-ui/src/components/Helper/Helper.tsx b/packages/native-ui/src/components/Helper/Helper.tsx index 803933238..bfd45785f 100644 --- a/packages/native-ui/src/components/Helper/Helper.tsx +++ b/packages/native-ui/src/components/Helper/Helper.tsx @@ -21,8 +21,6 @@ const Helper = forwardRef( HelperIcon = WarningMediumContainedIcon; } - console.log(HelperIcon); - const value = useMemo(() => ({ validationStatus, disabled }), [validationStatus, disabled]); return ( diff --git a/packages/native-ui/src/components/Label/Label.tsx b/packages/native-ui/src/components/Label/Label.tsx index f90b1227b..5cb39ab97 100644 --- a/packages/native-ui/src/components/Label/Label.tsx +++ b/packages/native-ui/src/components/Label/Label.tsx @@ -5,7 +5,7 @@ import { Text as RNText } from 'react-native'; import LabelProps from './Label.props'; -const Label: React.FC = forwardRef( +const Label = forwardRef( ({ children, nested, style, disabled, ...props }, ref) => { const { styles } = useStyles(stylesheet, { nested, disabled }); diff --git a/packages/native-ui/src/components/Radio/RadioIndicator.tsx b/packages/native-ui/src/components/Radio/RadioIndicator.tsx index ba50e62e6..7f4e72503 100644 --- a/packages/native-ui/src/components/Radio/RadioIndicator.tsx +++ b/packages/native-ui/src/components/Radio/RadioIndicator.tsx @@ -15,7 +15,7 @@ const RadioIndicator = forwardRef((props, ref) => { }); return ( - + ((props, ref) => { }); const stylesheet = createStyleSheet(({ colors, colorMode, radii, borderWidths, space }) => ({ + outline: { + alignSelf: 'flex-start', + }, container: { justifyContent: 'center', alignItems: 'center', diff --git a/packages/native-ui/src/components/Radio/RadioLabel.tsx b/packages/native-ui/src/components/Radio/RadioLabel.tsx index 195b2f49a..f95171233 100644 --- a/packages/native-ui/src/components/Radio/RadioLabel.tsx +++ b/packages/native-ui/src/components/Radio/RadioLabel.tsx @@ -1,31 +1,28 @@ import React, { forwardRef } from 'react'; import { createStyleSheet, useStyles } from 'react-native-unistyles'; -import { Text, TextProps } from 'react-native'; +import { Text } from 'react-native'; import { useRadioContext } from './Radio.context'; +import { Label } from '../Label'; +import LabelProps from '../Label/Label.props'; -const RadioLabel = forwardRef(({ children, style, ...props }, ref) => { +const RadioLabel = forwardRef(({ children, style, ...props }, ref) => { const { checked, disabled } = useRadioContext(); const { styles } = useStyles(stylesheet, { checked, disabled, }); return ( - + + ); }); RadioLabel.displayName = 'RadioLabel'; -const stylesheet = createStyleSheet(({ lineHeights, fontSizes, fonts, fontWeights, colors }) => ({ +const stylesheet = createStyleSheet(({ colors }) => ({ text: { - color: colors.grey1000, - lineHeight: lineHeights.lg, - fontSize: fontSizes.md, - fontFamily: fonts.body, - fontWeight: fontWeights.normal, variants: { checked: { true: { diff --git a/packages/native-ui/src/config/theme/FormField.ts b/packages/native-ui/src/config/theme/FormField.ts deleted file mode 100644 index 65acc3aed..000000000 --- a/packages/native-ui/src/config/theme/FormField.ts +++ /dev/null @@ -1,103 +0,0 @@ -import { createStyle } from '@gluestack-style/react'; - -export const FormField = createStyle({ - flexDirection: 'column', - gap: '$2', - - _labelText: { - color: '$grey1000', - }, - - _helperText: { - color: '$grey800', - }, - - ':disabled': { - _labelText: { - color: '$grey400', - }, - - _helperText: { - color: '$grey400', - }, - - _helperIcon: { - color: '$grey400', - }, - - _invalidText: { - color: '$grey400', - }, - - _validText: { - color: '$grey400', - }, - - _invalidIcon: { - color: '$grey400', - }, - - _validIcon: { - color: '$grey400', - }, - }, - - _dark: { - _labelText: { - color: '$darkGrey1000', - }, - - _helperText: { - color: '$darkGrey800', - }, - - ':disabled': { - _labelText: { - color: '$darkGrey400', - }, - - _helperText: { - color: '$darkGrey400', - }, - - _helperIcon: { - color: '$darkGrey400', - }, - - _invalidText: { - color: '$darkGrey400', - }, - - _validText: { - color: '$darkGrey400', - }, - - _invalidIcon: { - color: '$darkGrey400', - }, - - _validIcon: { - color: '$darkGrey400', - }, - }, - }, - - variants: { - validationStatus: { - initial: {}, - valid: {}, - invalid: {}, - }, - isDisabled: { - true: { - backgroundColor: '$red100', - _labelText: { - color: '$grey400', - }, - }, - false: {}, - }, - }, - - defaultProps: {}, -}); diff --git a/packages/native-ui/src/config/theme/FormFieldHelper.ts b/packages/native-ui/src/config/theme/FormFieldHelper.ts deleted file mode 100644 index 2060f1ea3..000000000 --- a/packages/native-ui/src/config/theme/FormFieldHelper.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { createStyle } from '@gluestack-style/react'; - -export const FormFieldHelper = createStyle({ - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'center', -}); diff --git a/packages/native-ui/src/config/theme/FormFieldHelperIcon.ts b/packages/native-ui/src/config/theme/FormFieldHelperIcon.ts deleted file mode 100644 index 6f648ed11..000000000 --- a/packages/native-ui/src/config/theme/FormFieldHelperIcon.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { createStyle } from '@gluestack-style/react'; - -export const FormFieldHelperIcon = createStyle({ - color: '$grey800', - _dark: { - color: '$darkGrey800', - }, - props: {}, -}); diff --git a/packages/native-ui/src/config/theme/FormFieldHelperText.ts b/packages/native-ui/src/config/theme/FormFieldHelperText.ts deleted file mode 100644 index 325e10f33..000000000 --- a/packages/native-ui/src/config/theme/FormFieldHelperText.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { createStyle } from '@gluestack-style/react'; - -export const FormFieldHelperText = createStyle({ - fontSize: '$md', -}); diff --git a/packages/native-ui/src/config/theme/FormFieldInvalid.ts b/packages/native-ui/src/config/theme/FormFieldInvalid.ts deleted file mode 100644 index e3e74702b..000000000 --- a/packages/native-ui/src/config/theme/FormFieldInvalid.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { createStyle } from '@gluestack-style/react'; - -export const FormFieldInvalid = createStyle({ - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'center', - gap: '$2', -}); diff --git a/packages/native-ui/src/config/theme/FormFieldInvalidIcon.ts b/packages/native-ui/src/config/theme/FormFieldInvalidIcon.ts deleted file mode 100644 index 2fcaf013f..000000000 --- a/packages/native-ui/src/config/theme/FormFieldInvalidIcon.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { createStyle } from '@gluestack-style/react'; - -export const FormFieldInvalidIcon = createStyle({ - color: '$red500', - _dark: { - color: '$darkRed700', - }, - props: {}, -}); diff --git a/packages/native-ui/src/config/theme/FormFieldInvalidText.ts b/packages/native-ui/src/config/theme/FormFieldInvalidText.ts deleted file mode 100644 index 16723f144..000000000 --- a/packages/native-ui/src/config/theme/FormFieldInvalidText.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { createStyle } from '@gluestack-style/react'; - -export const FormFieldInvalidText = createStyle({ - fontFamily: '$body', - fontSize: '$md', - color: '$red500', - _dark: { - color: '$darkRed700', - }, -}); diff --git a/packages/native-ui/src/config/theme/FormFieldLabel.ts b/packages/native-ui/src/config/theme/FormFieldLabel.ts deleted file mode 100644 index 884c916e0..000000000 --- a/packages/native-ui/src/config/theme/FormFieldLabel.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { createStyle } from '@gluestack-style/react'; - -export const FormFieldLabel = createStyle({ - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'center', -}); diff --git a/packages/native-ui/src/config/theme/FormFieldLabelText.ts b/packages/native-ui/src/config/theme/FormFieldLabelText.ts deleted file mode 100644 index 51ee72b84..000000000 --- a/packages/native-ui/src/config/theme/FormFieldLabelText.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { createStyle } from '@gluestack-style/react'; - -export const FormFieldLabelText = createStyle({ - fontWeight: '$semibold', - fontSize: '$md', -}); diff --git a/packages/native-ui/src/config/theme/FormFieldValid.ts b/packages/native-ui/src/config/theme/FormFieldValid.ts deleted file mode 100644 index cec00304e..000000000 --- a/packages/native-ui/src/config/theme/FormFieldValid.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { createStyle } from '@gluestack-style/react'; - -export const FormFieldValid = createStyle({ - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'center', - gap: '$2', -}); diff --git a/packages/native-ui/src/config/theme/FormFieldValidIcon.ts b/packages/native-ui/src/config/theme/FormFieldValidIcon.ts deleted file mode 100644 index 5c8b78490..000000000 --- a/packages/native-ui/src/config/theme/FormFieldValidIcon.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { createStyle } from '@gluestack-style/react'; - -export const FormFieldValidIcon = createStyle({ - color: '$green500', - _dark: { - color: '$darkGreen700', - }, -}); diff --git a/packages/native-ui/src/config/theme/FormFieldValidText.ts b/packages/native-ui/src/config/theme/FormFieldValidText.ts deleted file mode 100644 index 1b4b45eac..000000000 --- a/packages/native-ui/src/config/theme/FormFieldValidText.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { createStyle } from '@gluestack-style/react'; - -export const FormFieldValidText = createStyle({ - fontFamily: '$body', - fontSize: '$md', - color: '$green500', - _dark: { - color: '$darkGreen700', - }, -}); diff --git a/packages/native-ui/src/config/theme/index.ts b/packages/native-ui/src/config/theme/index.ts index e63649c64..e83cdc56f 100644 --- a/packages/native-ui/src/config/theme/index.ts +++ b/packages/native-ui/src/config/theme/index.ts @@ -54,18 +54,7 @@ export * from './CheckboxLabel'; // export * from './FabIcon'; // export * from './FabLabel'; // export * from './FlatList'; -export * from './FormField'; -export * from './FormFieldInvalid'; -export * from './FormFieldInvalidIcon'; -export * from './FormFieldInvalidText'; -export * from './FormFieldValid'; -export * from './FormFieldValidIcon'; -export * from './FormFieldValidText'; -export * from './FormFieldHelper'; -export * from './FormFieldHelperIcon'; -export * from './FormFieldHelperText'; -export * from './FormFieldLabel'; -export * from './FormFieldLabelText'; + export * from './HStack'; export * from './Heading'; export * from './Icon'; From 72e25556b1994b869c9f80c2cdbe75b3b6d3002c Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Tue, 22 Oct 2024 15:18:51 +0100 Subject: [PATCH 43/45] chore: changeset --- .changeset/gold-peas-battle.md | 5 +++++ .changeset/nine-bugs-hide.md | 5 +++++ .changeset/sixty-pens-tan.md | 5 +++++ 3 files changed, 15 insertions(+) create mode 100644 .changeset/gold-peas-battle.md create mode 100644 .changeset/nine-bugs-hide.md create mode 100644 .changeset/sixty-pens-tan.md diff --git a/.changeset/gold-peas-battle.md b/.changeset/gold-peas-battle.md new file mode 100644 index 000000000..ce4eacf22 --- /dev/null +++ b/.changeset/gold-peas-battle.md @@ -0,0 +1,5 @@ +--- +'@utilitywarehouse/native-ui': minor +--- + +Adds `Helper` and `Label` components diff --git a/.changeset/nine-bugs-hide.md b/.changeset/nine-bugs-hide.md new file mode 100644 index 000000000..96e167749 --- /dev/null +++ b/.changeset/nine-bugs-hide.md @@ -0,0 +1,5 @@ +--- +'@utilitywarehouse/native-ui': minor +--- + +Adds `FormField` component diff --git a/.changeset/sixty-pens-tan.md b/.changeset/sixty-pens-tan.md new file mode 100644 index 000000000..fc7655d7b --- /dev/null +++ b/.changeset/sixty-pens-tan.md @@ -0,0 +1,5 @@ +--- +'@utilitywarehouse/native-ui': patch +--- + +Fixes `Checbox` and `Radio` label font weight From ab7be23304cd33cb82649782c481609b81fbe07b Mon Sep 17 00:00:00 2001 From: Jord McCord Date: Tue, 22 Oct 2024 17:00:48 +0100 Subject: [PATCH 44/45] feat: add validation and helpers to checkbox and radio --- .changeset/quiet-moose-live.md | 5 ++ .../components/Checkbox/Checkbox.docs.mdx | 57 ++++++++++--------- .../components/Checkbox/Checkbox.tsx | 35 +++++++++++- .../components/FormField/FormField.docs.mdx | 34 +++++------ .../components/Radio/Radio.docs.mdx | 39 ++++++++----- .../components/Radio/Radio.tsx | 39 ++++++++++++- .../src/components/Checkbox/Checkbox.props.ts | 12 ++++ .../src/components/Checkbox/Checkbox.tsx | 46 ++++++++++++++- .../Checkbox/CheckboxGroup.context.ts | 1 + .../Checkbox/CheckboxGroup.props.ts | 1 + .../src/components/Checkbox/CheckboxGroup.tsx | 4 +- .../src/components/Checkbox/CheckboxLabel.tsx | 5 +- .../src/components/Radio/Radio.props.ts | 12 ++++ .../native-ui/src/components/Radio/Radio.tsx | 45 ++++++++++++++- .../components/Radio/RadioGroup.context.ts | 1 + .../src/components/Radio/RadioGroup.props.ts | 1 + .../src/components/Radio/RadioGroup.tsx | 4 +- .../src/components/Radio/RadioLabel.tsx | 5 +- 18 files changed, 274 insertions(+), 72 deletions(-) create mode 100644 .changeset/quiet-moose-live.md diff --git a/.changeset/quiet-moose-live.md b/.changeset/quiet-moose-live.md new file mode 100644 index 000000000..ab0798e59 --- /dev/null +++ b/.changeset/quiet-moose-live.md @@ -0,0 +1,5 @@ +--- +'@utilitywarehouse/native-ui': minor +--- + +Adds `Helper` and validation helpers to `Checkbox` and `Radio` components and groups diff --git a/apps/native-ui-storybook/components/Checkbox/Checkbox.docs.mdx b/apps/native-ui-storybook/components/Checkbox/Checkbox.docs.mdx index bbbd14500..c36afb9c1 100644 --- a/apps/native-ui-storybook/components/Checkbox/Checkbox.docs.mdx +++ b/apps/native-ui-storybook/components/Checkbox/Checkbox.docs.mdx @@ -8,6 +8,7 @@ import { Center, Box, Text, + FormField, NativeUIProvider, } from '@utilitywarehouse/native-ui'; import { TickSmallIcon } from '@utilitywarehouse/react-native-icons'; @@ -27,11 +28,11 @@ Whether you're building a simple form or a complex data collection system, the C - [Usage](#usage) - [Props](#props) - [Components](#components) - - [Checkbox](#checkbox) - - [CheckboxIndicator](#checkboxindicator) - - [CheckboxIcon](#checkboxicon) - - [CheckboxLabel](#checkboxlabel) - - [CheckboxGroup](#checkboxgroup) + - [`Checkbox`](#checkbox) + - [`CheckboxIndicator`](#checkboxindicator) + - [`CheckboxIcon`](#checkboxicon) + - [`CheckboxLabel`](#checkboxlabel) + - [`CheckboxGroup`](#checkboxgroup) - [Variants](#variants) - [Advanced Usage](#advanced-usage) @@ -74,13 +75,20 @@ const MyComponent = () => { ## Props -| Property | Type | Default | Description | -| ---------------- | -------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------- | -| `value` | `string` | - | The value to be used in the checkbox input. This is the value that will be returned on form submission. | -| `onChange` | `(value: boolean) => void` | - | Function called when the state of the checkbox changes. | -| `defaultchecked` | `bool` | `false` | If true, the checkbox will be initially checked. | -| `checked` | `bool` | `false` | When true, the checkbox will be checked. You'll need to pass onChange update it's value (since it's now controlled). | -| `disabled` | `bool` | `false` | To manually set disable to the checkbox. | +| Property | Type | Default | Description | +| -------------------- | ----------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------- | +| `value` | `string` | - | The value to be used in the checkbox input. This is the value that will be returned on form submission. | +| `onChange` | `(value: boolean) => void` | - | Function called when the state of the checkbox changes. | +| `defaultchecked` | `bool` | `false` | If true, the checkbox will be initially checked. | +| `checked` | `bool` | `false` | When true, the checkbox will be checked. You'll need to pass onChange update it's value (since it's now controlled). | +| `validationStatus` | `'valid' \| 'invalid' \| 'initial'` | - | The validation status of the checkbox. | +| `disabled` | `bool` | `false` | To manually set disable to the checkbox. | +| `label` | `string` | - | The label to be displayed next to the checkbox. | +| `helperText` | `string` | - | The helper text to be displayed below the checkbox. | +| `helperIcon` | `React.ComponentType` | - | The icon to be displayed next to the helper text. | +| `invalidText` | `string` | - | The invalid text to be displayed below the checkbox. | +| `validText` | `string` | - | The valid text to be displayed below the checkbox. | +| `showValidationIcon` | `boolean` | `true` | Whether to show the validation icon. | ## Components @@ -197,13 +205,12 @@ const MyComponent = () => { }; ``` -| Property | Type | Default | Description | -| ----------- | --------------------------------- | ------- | ---------------------------------------------------------------------- | -| `value` | `string[]` | - | The value of the checkbox group. | -| `onChange` | `(values: Array) => void` | - | The callback fired when any children Checkbox is checked or unchecked. | -| `disabled` | `bool` | `false` | To manually set disable to the checkbox. | -| `isInvalid` | `bool` | `false` | To manually set invalid to the checkbox. | -| `readonly` | `bool` | `false` | To manually set read-only to the checkbox. | +| Property | Type | Default | Description | +| ------------------ | ----------------------------------- | ------- | ---------------------------------------------------------------------- | +| `value` | `string[]` | - | The value of the checkbox group. | +| `onChange` | `(values: Array) => void` | - | The callback fired when any children Checkbox is checked or unchecked. | +| `disabled` | `bool` | `false` | To manually set disable to the checkbox. | +| `validationStatus` | `'valid' \| 'invalid' \| 'initial'` | - | The validation status of the checkbox group. | ## Variants @@ -216,8 +223,7 @@ You can create a custom checkbox by using the `CheckboxIndicator`, `CheckboxIcon
- - Which fruit do you enjoy? + - +
@@ -264,15 +270,14 @@ import { Checkbox, CheckboxIndicator, CheckboxLabel, + FormField, Text, } from '@utilitywarehouse/native-ui'; -import { Box } from '@utilitywarehouse/native-ui/lab'; const MyComponent = () => { const [values, setValues] = React.useState([]); return ( - - Which fruit do you enjoy? + { Grapes - + ); }; ``` diff --git a/apps/native-ui-storybook/components/Checkbox/Checkbox.tsx b/apps/native-ui-storybook/components/Checkbox/Checkbox.tsx index 7163395c4..5879e1d5a 100644 --- a/apps/native-ui-storybook/components/Checkbox/Checkbox.tsx +++ b/apps/native-ui-storybook/components/Checkbox/Checkbox.tsx @@ -7,7 +7,12 @@ const CheckboxBasic: StoryFn<{ checked: boolean; disabled: boolean; label: string; -}> = ({ disabled, label: label }) => { + validationStatus: 'initial' | 'valid' | 'invalid'; + showValidationIcon: boolean; + invalidText: string; + validText: string; + helperText: string; +}> = ({ disabled, label: label, checked: _checked, ...props }) => { const [args, updateArgs] = useArgs(); return ( @@ -21,6 +26,7 @@ const CheckboxBasic: StoryFn<{ checked={args.checked as boolean} disabled={disabled} label={label} + {...props} /> ); }; @@ -41,12 +47,39 @@ CheckboxBasic.argTypes = { control: 'text', description: 'The label component for the checkbox.', }, + helperText: { + type: 'string', + control: 'text', + description: 'The helper text of the checkbox component', + defaultValue: 'Helper text', + }, + validationStatus: { + control: 'select', + options: ['initial', 'valid', 'invalid'], + description: 'The validation status of the checkbox component', + defaultValue: 'initial', + }, + showValidationIcon: { + control: 'boolean', + description: 'Show the validation icon.', + defaultValue: true, + }, + invalidText: { + control: 'text', + description: 'The invalid text of the checkbox component', + defaultValue: 'Invalid text', + }, }; CheckboxBasic.args = { checked: false, disabled: false, label: '', + helperText: '', + validationStatus: 'initial', + showValidationIcon: true, + invalidText: 'Invalid text', + validText: 'Valid text', }; export default CheckboxBasic; diff --git a/apps/native-ui-storybook/components/FormField/FormField.docs.mdx b/apps/native-ui-storybook/components/FormField/FormField.docs.mdx index ed83c9573..f83f3aa28 100644 --- a/apps/native-ui-storybook/components/FormField/FormField.docs.mdx +++ b/apps/native-ui-storybook/components/FormField/FormField.docs.mdx @@ -122,18 +122,18 @@ const MyComponent = () => { ## Props -| Name | Type | Default | Description | -| -------------------- | ---------------------------------- | ----------- | ---------------------------------------------------------------- | -| `validationStatus` | `'initial' \| 'valid' \| 'invalid` | `'initial'` | The validation status of the field. | -| `disabled` | `boolean` | `false` | Whether the field is disabled. | -| `readonly` | `boolean` | `false` | Whether the field is readonly. | -| `label` | `string` | `-` | The label for the field. | -| `helperText` | `string` | `-` | The helper text for the field. | -| `helperIcon` | `React.ComponentType` | `-` | The icon for the helper text. | -| `helperPosition` | `'top' \| 'bottom'` | `'top'` | The position of the helper text. | -| `validText` | `string` | `-` | The valid text for the field. | -| `invalidText` | `string` | `-` | The invalid text for the field. | -| `showValidationIcon` | `boolean` | `false` | Whether to show the validation icon next to the validation text. | +| Name | Type | Default | Description | +| -------------------- | ----------------------------------- | ----------- | ---------------------------------------------------------------- | +| `validationStatus` | `'initial' \| 'valid' \| 'invalid'` | `'initial'` | The validation status of the field. | +| `disabled` | `boolean` | `false` | Whether the field is disabled. | +| `readonly` | `boolean` | `false` | Whether the field is readonly. | +| `label` | `string` | `-` | The label for the field. | +| `helperText` | `string` | `-` | The helper text for the field. | +| `helperIcon` | `React.ComponentType` | `-` | The icon for the helper text. | +| `helperPosition` | `'top' \| 'bottom'` | `'top'` | The position of the helper text. | +| `validText` | `string` | `-` | The valid text for the field. | +| `invalidText` | `string` | `-` | The invalid text for the field. | +| `showValidationIcon` | `boolean` | `false` | Whether to show the validation icon next to the validation text. | ## Components @@ -277,10 +277,10 @@ The `FormField` component can be used to wrap a `Checkbox` component to provide - + - - I accept the terms and conditions + + I accept the terms and conditions Read and accept the terms and conditions @@ -315,8 +315,8 @@ const MyComponent = () => { - - I accept the terms and conditions + + I accept the terms and conditions Read and accept the terms and conditions diff --git a/apps/native-ui-storybook/components/Radio/Radio.docs.mdx b/apps/native-ui-storybook/components/Radio/Radio.docs.mdx index 8e1b783ed..1b0c9b548 100644 --- a/apps/native-ui-storybook/components/Radio/Radio.docs.mdx +++ b/apps/native-ui-storybook/components/Radio/Radio.docs.mdx @@ -28,11 +28,11 @@ The Radio component presents users with predefined choices and enables them to s - [Usage](#usage) - [Props](#props) - [Components](#components) - - [Radio](#radio) - - [RadioIndicator](#radioindicator) - - [RadioIcon](#radioicon) - - [RadioLabel](#radiolabel) - - [RadioGroup](#radiogroup) + - [`Radio`](#radio) + - [`RadioIndicator`](#radioindicator) + - [`RadioIcon`](#radioicon) + - [`RadioLabel`](#radiolabel) + - [`RadioGroup`](#radiogroup) - [Variants](#variants) - [Advanced Usage](#advanced-usage) @@ -114,11 +114,19 @@ const MyComponent = () => { ## Props -| Property | Type | Default | Description | -| -------- | -------- | ------- | ---------------------------------------------------------------------------------------------------- | -| value | string | - | The value to be used in the radio input. This is the value that will be returned on form submission. | -| onChange | function | - | Function called when the state of the radio changes. | -| disabled | bool | false | To manually set disable to the radio. | +| Property | Type | Default | Description | +| -------------------- | ----------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- | +| `value` | string | - | The value to be used in the radio input. This is the value that will be returned on form submission. | +| `onChange` | function | - | Function called when the state of the radio changes. | +| `disabled` | bool | false | To manually set disable to the radio. | +| `validationStatus` | `'valid' \| 'invalid' \| 'initial'` | - | The validation status of the radio. | +| `disabled` | `bool` | `false` | To manually set disable to the radio. | +| `label` | `string` | - | The label to be displayed next to the radio. | +| `helperText` | `string` | - | The helper text to be displayed below the radio. | +| `helperIcon` | `React.ComponentType` | - | The icon to be displayed next to the helper text. | +| `invalidText` | `string` | - | The invalid text to be displayed below the radio. | +| `validText` | `string` | - | The valid text to be displayed below the radio. | +| `showValidationIcon` | `boolean` | `true` | Whether to show the validation icon. | ## Components @@ -142,11 +150,12 @@ Contains all Label related layout style props and actions. It inherits all the p Contains all Group related layout style props and actions. It inherits all the properties of React Native's View component. -| Property | Type | Default | Description | -| -------- | -------- | ------- | ------------------------------------------------------------------- | -| value | string | - | The value of the radio group. | -| onChange | function | - | The callback fired when any children Radio is checked or unchecked. | -| disabled | bool | - | To manually set disable to the radio group. | +| Property | Type | Default | Description | +| ------------------ | ----------------------------------- | ------- | ------------------------------------------------------------------- | +| `value` | string | - | The value of the radio group. | +| `onChange` | function | - | The callback fired when any children Radio is checked or unchecked. | +| `disabled` | bool | - | To manually set disable to the radio group. | +| `validationStatus` | `'valid' \| 'invalid' \| 'initial'` | - | The validation status of the checkbox group. | ## Variants diff --git a/apps/native-ui-storybook/components/Radio/Radio.tsx b/apps/native-ui-storybook/components/Radio/Radio.tsx index a2b3172d4..a24733963 100644 --- a/apps/native-ui-storybook/components/Radio/Radio.tsx +++ b/apps/native-ui-storybook/components/Radio/Radio.tsx @@ -5,7 +5,12 @@ import { StoryFn } from '@storybook/react'; const RadioBasic: StoryFn<{ disabled: boolean; label: string; -}> = ({ disabled, label }) => { + validationStatus: 'initial' | 'valid' | 'invalid'; + showValidationIcon: boolean; + invalidText: string; + validText: string; + helperText: string; +}> = ({ disabled, label, ...props }) => { return ( <> @@ -18,6 +23,7 @@ const RadioBasic: StoryFn<{ nativeID="Radio-1" disabled={disabled} label={label} + {...props} /> @@ -28,18 +34,45 @@ RadioBasic.argTypes = { disabled: { type: 'boolean', control: 'boolean', - description: 'To manually set disable to the Radio.', + description: 'To manually set disable to the checkbox.', }, label: { type: 'string', control: 'text', - description: 'The label component for the Radio.', + description: 'The label component for the checkbox.', + }, + helperText: { + type: 'string', + control: 'text', + description: 'The helper text of the checkbox component', + defaultValue: 'Helper text', + }, + validationStatus: { + control: 'select', + options: ['initial', 'valid', 'invalid'], + description: 'The validation status of the checkbox component', + defaultValue: 'initial', + }, + showValidationIcon: { + control: 'boolean', + description: 'Show the validation icon.', + defaultValue: true, + }, + invalidText: { + control: 'text', + description: 'The invalid text of the checkbox component', + defaultValue: 'Invalid text', }, }; RadioBasic.args = { disabled: false, label: '', + helperText: '', + validationStatus: 'initial', + showValidationIcon: true, + invalidText: 'Invalid text', + validText: 'Valid text', }; export default RadioBasic; diff --git a/packages/native-ui/src/components/Checkbox/Checkbox.props.ts b/packages/native-ui/src/components/Checkbox/Checkbox.props.ts index 5cfdad26f..d4a781f41 100644 --- a/packages/native-ui/src/components/Checkbox/Checkbox.props.ts +++ b/packages/native-ui/src/components/Checkbox/Checkbox.props.ts @@ -1,3 +1,4 @@ +import type { ComponentType } from 'react'; import type { PressableProps } from 'react-native'; interface CheckboxBaseProps extends Omit { @@ -5,16 +6,27 @@ interface CheckboxBaseProps extends Omit { onChange?: (isSelected: boolean) => void; disabled?: boolean; checked?: boolean; + validationStatus?: 'valid' | 'invalid' | 'initial'; } interface CheckboxWithChildrenProps extends CheckboxBaseProps { children: React.ReactNode; label?: never; + helperText?: never; + helperIcon?: never; + invalidText?: never; + validText?: never; + showValidationIcon?: never; } interface CheckboxWithoutChildrenProps extends CheckboxBaseProps { children?: never; label?: string; + helperText?: string; + helperIcon?: ComponentType; + invalidText?: string; + validText?: string; + showValidationIcon?: boolean; } type CheckboxProps = CheckboxWithChildrenProps | CheckboxWithoutChildrenProps; diff --git a/packages/native-ui/src/components/Checkbox/Checkbox.tsx b/packages/native-ui/src/components/Checkbox/Checkbox.tsx index 715bf4694..be35024bf 100644 --- a/packages/native-ui/src/components/Checkbox/Checkbox.tsx +++ b/packages/native-ui/src/components/Checkbox/Checkbox.tsx @@ -8,6 +8,10 @@ import StyledCheckboxGroup from './CheckboxGroupRoot'; import { forwardRef } from 'react'; import CheckboxProps from './Checkbox.props'; import { Pressable } from 'react-native'; +import { VStack } from '@gluestack-ui/themed'; +import { Helper } from '../Helper'; +import { useCheckboxGroupContext } from './CheckboxGroup.context'; +import { useFormFieldContext } from '../FormField'; const CheckboxComponent = createCheckbox({ Root: StyledCheckbox, @@ -28,7 +32,26 @@ CheckboxIcon.displayName = 'CheckboxIcon'; CheckboxLabel.displayName = 'CheckboxLabel'; const Checkbox = forwardRef, CheckboxProps>( - ({ children, label, disabled, checked, ...props }, ref) => { + ( + { + children, + label, + disabled, + checked, + helperIcon, + helperText, + invalidText, + validText, + validationStatus: validation, + showValidationIcon, + ...props + }, + ref + ) => { + const { validationStatus: fieldValidationStatus } = useFormFieldContext(); + const { validationStatus: groupValidationStatus } = useCheckboxGroupContext(); + const validationStatus = + fieldValidationStatus ?? groupValidationStatus ?? validation ?? 'initial'; return ( // @ts-expect-error - ref is not a valid prop for Pressable @@ -39,7 +62,26 @@ const Checkbox = forwardRef, CheckboxProps>( - {!!label && {label}} + + {!!label && {label}} + {!!helperText && } + {validationStatus === 'invalid' && !!invalidText && ( + + )} + {validationStatus === 'valid' && !!validText && ( + + )} + )} diff --git a/packages/native-ui/src/components/Checkbox/CheckboxGroup.context.ts b/packages/native-ui/src/components/Checkbox/CheckboxGroup.context.ts index 9b2d9b51a..280a8cd6e 100644 --- a/packages/native-ui/src/components/Checkbox/CheckboxGroup.context.ts +++ b/packages/native-ui/src/components/Checkbox/CheckboxGroup.context.ts @@ -2,6 +2,7 @@ import { createContext, useContext } from 'react'; export const CheckboxGroupContext = createContext<{ disabled?: boolean; + validationStatus?: 'valid' | 'invalid' | 'initial'; }>({}); export const useCheckboxGroupContext = () => useContext(CheckboxGroupContext); diff --git a/packages/native-ui/src/components/Checkbox/CheckboxGroup.props.ts b/packages/native-ui/src/components/Checkbox/CheckboxGroup.props.ts index ba2242dc6..6a73355e6 100644 --- a/packages/native-ui/src/components/Checkbox/CheckboxGroup.props.ts +++ b/packages/native-ui/src/components/Checkbox/CheckboxGroup.props.ts @@ -5,6 +5,7 @@ interface CheckboxGroupProps extends ViewProps { value?: Array; onChange?: (value: Array) => void; readonly?: boolean; + validationStatus?: 'valid' | 'invalid' | 'initial'; } export default CheckboxGroupProps; diff --git a/packages/native-ui/src/components/Checkbox/CheckboxGroup.tsx b/packages/native-ui/src/components/Checkbox/CheckboxGroup.tsx index 78f4858e3..92ba4fe24 100644 --- a/packages/native-ui/src/components/Checkbox/CheckboxGroup.tsx +++ b/packages/native-ui/src/components/Checkbox/CheckboxGroup.tsx @@ -5,8 +5,8 @@ import { CheckboxGroupContext } from './CheckboxGroup.context'; import { View } from 'react-native'; const CheckboxGroup = forwardRef( - ({ children, disabled, readonly, ...props }, ref) => { - const value = useMemo(() => ({ disabled }), [disabled]); + ({ children, disabled, readonly, validationStatus, ...props }, ref) => { + const value = useMemo(() => ({ disabled, validationStatus }), [disabled, validationStatus]); return ( {/* @ts-expect-error - ref is not a valid prop for view */} diff --git a/packages/native-ui/src/components/Checkbox/CheckboxLabel.tsx b/packages/native-ui/src/components/Checkbox/CheckboxLabel.tsx index d051fc36a..94dba64bf 100644 --- a/packages/native-ui/src/components/Checkbox/CheckboxLabel.tsx +++ b/packages/native-ui/src/components/Checkbox/CheckboxLabel.tsx @@ -5,6 +5,7 @@ import { Text } from 'react-native'; import { useCheckboxContext } from './Checkbox.context'; import { Label } from '../Label'; import LabelProps from '../Label/Label.props'; +import { useFormFieldContext } from '../FormField'; const CheckboxLabel = forwardRef(({ children, style, ...props }, ref) => { const { checked, disabled } = useCheckboxContext(); @@ -12,8 +13,10 @@ const CheckboxLabel = forwardRef(({ children, style, ...props checked, disabled, }); + const { validationStatus } = useFormFieldContext(); + const isNested = !!validationStatus; return ( -