From 1514ffd6e965a3955b6905f916f2e5bb15741659 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Thu, 18 Jan 2024 14:10:48 -0600 Subject: [PATCH] Consistent imports --- src/components/Dialog/index.web.tsx | 3 +- .../forms/DateField/index.android.tsx | 5 +- src/components/forms/DateField/index.tsx | 2 +- src/components/forms/DateField/index.web.tsx | 4 +- src/components/forms/TextField.tsx | 18 ++---- src/components/forms/Toggle.tsx | 57 ++++++++----------- src/components/forms/ToggleButton.tsx | 17 ++---- src/components/forms/types.ts | 11 ---- src/view/screens/Storybook/Forms.tsx | 12 ++-- src/view/screens/Storybook/index.tsx | 9 +-- 10 files changed, 49 insertions(+), 89 deletions(-) delete mode 100644 src/components/forms/types.ts diff --git a/src/components/Dialog/index.web.tsx b/src/components/Dialog/index.web.tsx index 3350785ec2..6099efdd86 100644 --- a/src/components/Dialog/index.web.tsx +++ b/src/components/Dialog/index.web.tsx @@ -12,11 +12,10 @@ import {Button} from '#/components/Button' import {DialogOuterProps, DialogInnerProps} from '#/components/Dialog/types' import {Context, useDialogContext} from '#/components/Dialog/context' -import TextField from '#/components/forms/TextField' export {useDialogControl, useDialogContext} from '#/components/Dialog/context' export * from '#/components/Dialog/types' -export const Input = TextField.Input +export {Input} from '#/components/forms/TextField' const stopPropagation = (e: any) => e.stopPropagation() diff --git a/src/components/forms/DateField/index.android.tsx b/src/components/forms/DateField/index.android.tsx index b1116411cc..83fa285f5f 100644 --- a/src/components/forms/DateField/index.android.tsx +++ b/src/components/forms/DateField/index.android.tsx @@ -7,7 +7,7 @@ import DateTimePicker, { import {useTheme, atoms} from '#/alf' import {Text} from '#/components/Typography' import {useInteractionState} from '#/components/hooks/useInteractionState' -import TextField, {useSharedInputStyles} from '#/components/forms/TextField' +import * as TextField from '#/components/forms/TextField' import {CalendarDays_Stroke2_Corner0_Rounded as CalendarDays} from '#/components/icons/CalendarDays' import {DateFieldProps} from '#/components/forms/DateField/types' @@ -35,7 +35,8 @@ export function DateField({ } = useInteractionState() const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState() - const {chromeFocus, chromeError, chromeErrorHover} = useSharedInputStyles() + const {chromeFocus, chromeError, chromeErrorHover} = + TextField.useSharedInputStyles() const onChangeInternal = React.useCallback< Required['onChange'] diff --git a/src/components/forms/DateField/index.tsx b/src/components/forms/DateField/index.tsx index 8a8db876b2..c359a9d460 100644 --- a/src/components/forms/DateField/index.tsx +++ b/src/components/forms/DateField/index.tsx @@ -5,7 +5,7 @@ import DateTimePicker, { } from '@react-native-community/datetimepicker' import {useTheme, atoms} from '#/alf' -import TextField from '#/components/forms/TextField' +import * as TextField from '#/components/forms/TextField' import {toSimpleDateString} from '#/components/forms/DateField/utils' import {DateFieldProps} from '#/components/forms/DateField/types' diff --git a/src/components/forms/DateField/index.web.tsx b/src/components/forms/DateField/index.web.tsx index 4dd1980393..32f38a5d16 100644 --- a/src/components/forms/DateField/index.web.tsx +++ b/src/components/forms/DateField/index.web.tsx @@ -3,7 +3,7 @@ import {TextInput, TextInputProps, StyleSheet} from 'react-native' // @ts-ignore import {unstable_createElement} from 'react-native-web' -import TextField, {createInput} from '#/components/forms/TextField' +import * as TextField from '#/components/forms/TextField' import {toSimpleDateString} from '#/components/forms/DateField/utils' import {DateFieldProps} from '#/components/forms/DateField/types' @@ -29,7 +29,7 @@ const InputBase = React.forwardRef( InputBase.displayName = 'InputBase' -const Input = createInput(InputBase as unknown as typeof TextInput) +const Input = TextField.createInput(InputBase as unknown as typeof TextInput) export function DateField({ value, diff --git a/src/components/forms/TextField.tsx b/src/components/forms/TextField.tsx index 941c16bd30..133ca09cc4 100644 --- a/src/components/forms/TextField.tsx +++ b/src/components/forms/TextField.tsx @@ -38,7 +38,7 @@ const Context = React.createContext<{ export type RootProps = React.PropsWithChildren<{isInvalid?: boolean}> -function Root({children, isInvalid = false}: RootProps) { +export function Root({children, isInvalid = false}: RootProps) { const inputRef = React.useRef(null) const rootRef = React.useRef(null) const { @@ -226,9 +226,9 @@ export function createInput(Component: typeof TextInput) { } } -const Input = createInput(TextInput) +export const Input = createInput(TextInput) -function Label({children}: React.PropsWithChildren<{}>) { +export function Label({children}: React.PropsWithChildren<{}>) { const t = useTheme() return ( @@ -237,7 +237,7 @@ function Label({children}: React.PropsWithChildren<{}>) { ) } -function Icon({icon: Comp}: {icon: React.ComponentType}) { +export function Icon({icon: Comp}: {icon: React.ComponentType}) { const t = useTheme() const ctx = React.useContext(Context) const {hover, focus, errorHover, errorFocus} = React.useMemo(() => { @@ -286,7 +286,7 @@ function Icon({icon: Comp}: {icon: React.ComponentType}) { ) } -function Suffix({ +export function Suffix({ children, label, accessibilityHint, @@ -322,11 +322,3 @@ function Suffix({ ) } - -export default { - Root, - Input, - Label, - Icon, - Suffix, -} diff --git a/src/components/forms/Toggle.tsx b/src/components/forms/Toggle.tsx index 8fe43f2f41..6fdbaa2eed 100644 --- a/src/components/forms/Toggle.tsx +++ b/src/components/forms/Toggle.tsx @@ -5,11 +5,11 @@ import {useTheme, atoms as a, web} from '#/alf' import {Text} from '#/components/Typography' import {useInteractionState} from '#/components/hooks/useInteractionState' -type ItemState = { +export type ItemState = { name: string selected: boolean disabled: boolean - hasError: boolean + isInvalid: boolean hovered: boolean pressed: boolean focused: boolean @@ -19,7 +19,7 @@ const ItemContext = React.createContext({ name: '', selected: false, disabled: false, - hasError: false, + isInvalid: false, hovered: false, pressed: false, focused: false, @@ -55,7 +55,7 @@ export type ItemProps = { value?: boolean disabled?: boolean onChange?: (selected: boolean) => void - hasError?: boolean + isInvalid?: boolean style?: (state: ItemState) => ViewStyle children: ((props: ItemState) => React.ReactNode) | React.ReactNode } @@ -64,7 +64,7 @@ export function useItemContext() { return React.useContext(ItemContext) } -function Group({ +export function Group({ children, values: providedValues, onChange, @@ -138,13 +138,13 @@ function Group({ ) } -function Item({ +export function Item({ children, name, value = false, disabled: itemDisabled = false, onChange, - hasError, + isInvalid, style, type = 'checkbox', label, @@ -185,12 +185,12 @@ function Item({ name, selected, disabled: disabled ?? false, - hasError: hasError ?? false, + isInvalid: isInvalid ?? false, hovered, pressed, focused, }), - [name, selected, disabled, hovered, pressed, focused, hasError], + [name, selected, disabled, hovered, pressed, focused, isInvalid], ) return ( @@ -201,7 +201,7 @@ function Item({ disabled={disabled} aria-disabled={disabled ?? false} aria-checked={selected} - aria-invalid={hasError} + aria-invalid={isInvalid} aria-label={label} role={role} accessibilityRole={role} @@ -230,7 +230,7 @@ function Item({ ) } -function Label({children}: React.PropsWithChildren<{}>) { +export function Label({children}: React.PropsWithChildren<{}>) { const t = useTheme() const {disabled} = useItemContext() return ( @@ -247,20 +247,20 @@ function Label({children}: React.PropsWithChildren<{}>) { ) } -function createSharedToggleStyles({ +export function createSharedToggleStyles({ theme: t, hovered, focused, selected, disabled, - hasError, + isInvalid, }: { theme: ReturnType selected: boolean hovered: boolean focused: boolean disabled: boolean - hasError: boolean + isInvalid: boolean }) { const base: ViewStyle[] = [] const baseHover: ViewStyle[] = [] @@ -290,7 +290,7 @@ function createSharedToggleStyles({ } } - if (hasError) { + if (isInvalid) { base.push({ backgroundColor: t.name === 'light' ? t.palette.negative_25 : t.palette.negative_900, @@ -321,9 +321,9 @@ function createSharedToggleStyles({ } } -function Checkbox() { +export function Checkbox() { const t = useTheme() - const {selected, hovered, focused, disabled, hasError} = useItemContext() + const {selected, hovered, focused, disabled, isInvalid} = useItemContext() const {baseStyles, baseHoverStyles, indicatorStyles} = createSharedToggleStyles({ theme: t, @@ -331,7 +331,7 @@ function Checkbox() { focused, selected, disabled, - hasError, + isInvalid, }) return ( ) } - -export default { - Item, - Checkbox, - Label, - Switch, - Radio, - Group, -} diff --git a/src/components/forms/ToggleButton.tsx b/src/components/forms/ToggleButton.tsx index f6578c90e2..2694dd021c 100644 --- a/src/components/forms/ToggleButton.tsx +++ b/src/components/forms/ToggleButton.tsx @@ -4,17 +4,13 @@ import {View, AccessibilityProps, TextStyle, ViewStyle} from 'react-native' import {atoms as a, useTheme} from '#/alf' import {Text} from '#/components/Typography' -import Toggle, { - GroupProps as BaseGroupProps, - ItemProps as BaseItemProps, - useItemContext, -} from '#/components/forms/Toggle' +import * as Toggle from '#/components/forms/Toggle' -export type ItemProps = Omit & +export type ItemProps = Omit & AccessibilityProps & React.PropsWithChildren<{}> -export type GroupProps = Omit & { +export type GroupProps = Omit & { multiple?: boolean } @@ -46,7 +42,7 @@ export function Button({children, ...props}: ItemProps) { function ButtonInner({children}: React.PropsWithChildren<{}>) { const t = useTheme() - const state = useItemContext() + const state = Toggle.useItemContext() const {baseStyles, hoverStyles, activeStyles, textStyles} = React.useMemo(() => { @@ -123,8 +119,3 @@ function ButtonInner({children}: React.PropsWithChildren<{}>) { ) } - -export default { - Group, - Button, -} diff --git a/src/components/forms/types.ts b/src/components/forms/types.ts deleted file mode 100644 index 8d94bf0d1c..0000000000 --- a/src/components/forms/types.ts +++ /dev/null @@ -1,11 +0,0 @@ -import {AccessibilityProps} from 'react-native' - -export type RequiredAccessibilityProps = Required - -export type BaseProps = AccessibilityProps & { - value: T - onChange: (value: T) => void - testID?: string - label: string - hasError?: boolean -} diff --git a/src/view/screens/Storybook/Forms.tsx b/src/view/screens/Storybook/Forms.tsx index 0e9bf54b01..6862e3fef9 100644 --- a/src/view/screens/Storybook/Forms.tsx +++ b/src/view/screens/Storybook/Forms.tsx @@ -3,10 +3,10 @@ import {View} from 'react-native' import {atoms as a} from '#/alf' import {H1, H3} from '#/components/Typography' -import TextField from '#/components/forms/TextField' +import * as TextField from '#/components/forms/TextField' import {DateField, Label} from '#/components/forms/DateField' -import Toggle from '#/components/forms/Toggle' -import ToggleButton from '#/components/forms/ToggleButton' +import * as Toggle from '#/components/forms/Toggle' +import * as ToggleButton from '#/components/forms/ToggleButton' import {Button} from '#/components/Button' import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' @@ -113,7 +113,7 @@ export function Forms() { Click me - + Click me @@ -143,7 +143,7 @@ export function Forms() { Click me - + Click me @@ -172,7 +172,7 @@ export function Forms() { Click me - + Click me diff --git a/src/view/screens/Storybook/index.tsx b/src/view/screens/Storybook/index.tsx index 9f627ad2c2..d8898f20e8 100644 --- a/src/view/screens/Storybook/index.tsx +++ b/src/view/screens/Storybook/index.tsx @@ -30,8 +30,7 @@ export function Storybook() { variant="outline" color="primary" size="small" - accessibilityLabel='Set theme to "system"' - accessibilityHint="Set theme to system default" + label='Set theme to "system"' onPress={() => setColorMode('system')}> System @@ -39,8 +38,7 @@ export function Storybook() { variant="solid" color="secondary" size="small" - accessibilityLabel='Set theme to "system"' - accessibilityHint="Set theme to system default" + label='Set theme to "system"' onPress={() => setColorMode('light')}> Light @@ -48,8 +46,7 @@ export function Storybook() { variant="solid" color="secondary" size="small" - accessibilityLabel='Set theme to "system"' - accessibilityHint="Set theme to system default" + label='Set theme to "system"' onPress={() => setColorMode('dark')}> Dark