WIP Toggle cleanup

src/alf/themes.ts

@@ -152,7 +152,7 @@ export const light = {
       backgroundColor: lightPalette.contrast_300,
     },
     border: {
-      borderColor: lightPalette.contrast_100,
+      borderColor: lightPalette.contrast_200,
     },
     border_contrast: {
       borderColor: lightPalette.contrast_400,

src/components/forms/Toggle.tsx

@@ -5,12 +5,10 @@ import {useTheme, atoms as a, web} from '#/alf'
 import {Text} from '#/components/Typography'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {StyleProp} from 'react-native'
-import {AccessibilityRole} from 'react-native'
 
 type ItemState = {
-  id: string
   name: string
-  value: boolean
+  selected: boolean
   disabled: boolean
   hasError: boolean
   hovered: boolean
@@ -19,9 +17,8 @@ type ItemState = {
 }
 
 const ItemContext = React.createContext<ItemState>({
-  id: '',
   name: '',
-  value: false,
+  selected: false,
   disabled: false,
   hasError: false,
   hovered: false,
@@ -32,15 +29,32 @@ const ItemContext = React.createContext<ItemState>({
 const GroupContext = React.createContext<{
   values: string[]
   disabled: boolean
-  role?: 'radio' | 'checkbox'
+  type: 'radio' | 'checkbox'
+  setFieldValue: (props: {name: string; value: boolean}) => void
 }>({
+  type: 'checkbox',
   values: [],
   disabled: false,
-  role: 'checkbox',
+  setFieldValue: () => {},
 })
 
-type ItemProps = Omit<PressableProps, 'children' | 'style' | 'onPress'> & {
+export type GroupProps = React.PropsWithChildren<{
+  type?: 'radio' | 'checkbox'
+  values: string[]
+  maxSelections?: number
+  disabled?: boolean
+  onChange: (value: string[]) => void
+  label: string
+  style?: StyleProp<ViewStyle>
+}>
+
+export type ItemProps = Omit<
+  PressableProps,
+  'children' | 'style' | 'onPress' | 'role'
+> & {
+  type?: 'radio' | 'checkbox'
   name: string
+  label: string
   value?: boolean
   onChange?: ({name, value}: {name: string; value: boolean}) => void
   hasError?: boolean
@@ -48,17 +62,132 @@ type ItemProps = Omit<PressableProps, 'children' | 'style' | 'onPress'> & {
   children: ((props: ItemState) => React.ReactNode) | React.ReactNode
 }
 
+function Group({
+  children,
+  values: initialValues,
+  onChange,
+  disabled = false,
+  type = 'checkbox',
+  maxSelections,
+  style,
+  label,
+}: GroupProps) {
+  if (!initialValues) {
+    throw new Error(`Don't forget to pass in 'values' to your Toggle.Group`)
+  }
+
+  const groupRole = type === 'radio' ? 'radiogroup' : undefined
+  const [values, setValues] = React.useState<string[]>(
+    type === 'radio' ? initialValues.slice(0, 1) : initialValues,
+  )
+  const [maxReached, setMaxReached] = React.useState(false)
+
+  const setFieldValue = React.useCallback<
+    Exclude<ItemProps['onChange'], undefined>
+  >(
+    ({name, value}) => {
+      if (type === 'checkbox') {
+        setValues(s => {
+          const state = s.filter(v => v !== name)
+          return value ? state.concat(name) : state
+        })
+      } else {
+        setValues([name])
+      }
+    },
+    [type, setValues],
+  )
+
+  React.useEffect(() => {
+    onChange(values)
+  }, [values, onChange])
+
+  React.useEffect(() => {
+    if (type === 'checkbox') {
+      if (
+        maxSelections &&
+        values.length >= maxSelections &&
+        maxReached === false
+      ) {
+        setMaxReached(true)
+      } else if (
+        maxSelections &&
+        values.length < maxSelections &&
+        maxReached === true
+      ) {
+        setMaxReached(false)
+      }
+    }
+  }, [type, values.length, maxSelections, maxReached, setMaxReached])
+
+  const context = React.useMemo(
+    () => ({
+      values,
+      type,
+      disabled,
+      setFieldValue,
+    }),
+    [values, disabled, type, setFieldValue],
+  )
+
+  return (
+    <GroupContext.Provider value={context}>
+      <View
+        role={groupRole}
+        style={style} // TODO
+        {...(groupRole === 'radiogroup'
+          ? {
+              'aria-label': label,
+              accessibilityLabel: label,
+              accessibilityRole: groupRole,
+            }
+          : {})}>
+        {React.Children.map(children, child => {
+          if (!React.isValidElement(child)) return null
+
+          const isSelected = values.includes(child.props.name)
+          let isDisabled = disabled || child.props.disabled
+
+          if (maxReached && !isSelected) {
+            isDisabled = true
+          }
+
+          return React.isValidElement(child) ? (
+            <React.Fragment key={child.props.name}>
+              {React.cloneElement(child, {
+                // @ts-ignore TODO figure out children types
+                disabled: isDisabled,
+                type: type === 'radio' ? 'radio' : 'checkbox',
+                value: isSelected,
+                onChange: setFieldValue,
+              })}
+            </React.Fragment>
+          ) : null
+        })}
+      </View>
+    </GroupContext.Provider>
+  )
+}
+
 function Item({
   children,
   name,
   value = false,
-  disabled,
+  disabled: itemDisabled = false,
   onChange,
   hasError,
   style,
-  role,
+  type = 'checkbox',
+  label,
+  ...rest
 }: ItemProps) {
-  const labelId = React.useId()
+  // context can be empty if used outside a Group
+  const {
+    values: selectedValues,
+    type: groupType,
+    disabled: groupDisabled,
+    setFieldValue,
+  } = React.useContext(GroupContext)
   const {
     state: hovered,
     onIn: onHoverIn,
@@ -71,39 +200,46 @@ function Item({
   } = useInteractionState()
   const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
 
+  const role = groupType === 'radio' ? 'radio' : type
+  const selected = selectedValues.includes(name) || !!value
+  const disabled = groupDisabled || itemDisabled
+
   const onPress = React.useCallback(() => {
     const next = !value
-    onChange?.({name, value: next})
+    setFieldValue({name, value: next})
-  }, [name, value, onChange])
+    onChange?.({name, value: next}) // TODO don't use confusing method
+  }, [name, value, onChange, setFieldValue])
 
   const state = React.useMemo(
     () => ({
-      id: labelId,
       name,
-      value,
+      selected,
       disabled: disabled ?? false,
       hasError: hasError ?? false,
       hovered,
       pressed,
       focused,
     }),
-    [labelId, name, value, disabled, hovered, pressed, focused, hasError],
+    [name, selected, disabled, hovered, pressed, focused, hasError],
   )
 
   return (
     <ItemContext.Provider value={state}>
       <Pressable
+        {...rest}
         disabled={disabled}
         aria-disabled={disabled ?? false}
-        aria-checked={value}
+        aria-checked={selected}
-        aria-labelledby={labelId}
         aria-invalid={hasError}
+        aria-label={label}
         role={role}
-        accessibilityRole={role as AccessibilityRole}
+        accessibilityRole={role}
         accessibilityState={{
           disabled: disabled ?? false,
-          selected: value,
+          selected: selected,
         }}
+        accessibilityLabel={label}
+        accessibilityHint={undefined}
         onPress={onPress}
         onHoverIn={onHoverIn}
         onHoverOut={onHoverOut}
@@ -124,102 +260,11 @@ function Item({
   )
 }
 
-function Group({
-  children,
-  values: initialValues,
-  onChange,
-  disabled,
-  role = 'checkbox',
-  maxSelections,
-  style,
-}: React.PropsWithChildren<{
-  values: string[]
-  onChange: (value: string[]) => void
-  disabled?: boolean
-  role?: 'radio' | 'checkbox'
-  maxSelections?: number
-  style?: StyleProp<ViewStyle>
-}>) {
-  const _disabled = disabled ?? false
-  const [values, setValues] = React.useState<string[]>(
-    role === 'radio' ? initialValues.slice(0, 1) : initialValues,
-  )
-  const [maxReached, setMaxReached] = React.useState(false)
-
-  const itemOnChange = React.useCallback<
-    Exclude<ItemProps['onChange'], undefined>
-  >(
-    ({name, value}) => {
-      if (role === 'checkbox') {
-        setValues(s => {
-          const state = s.filter(v => v !== name)
-          return value ? state.concat(name) : state
-        })
-      } else {
-        setValues([name])
-      }
-    },
-    [role, setValues],
-  )
-
-  React.useEffect(() => {
-    onChange(values)
-  }, [values, onChange])
-
-  React.useEffect(() => {
-    if (role === 'checkbox') {
-      if (
-        maxSelections &&
-        values.length >= maxSelections &&
-        maxReached === false
-      ) {
-        setMaxReached(true)
-      } else if (
-        maxSelections &&
-        values.length < maxSelections &&
-        maxReached === true
-      ) {
-        setMaxReached(false)
-      }
-    }
-  }, [role, values.length, maxSelections, maxReached, setMaxReached])
-
-  return (
-    <GroupContext.Provider value={{values, disabled: _disabled, role}}>
-      <View role={role === 'radio' ? 'radiogroup' : undefined} style={style}>
-        {React.Children.map(children, child => {
-          if (!React.isValidElement(child)) return null
-
-          const isSelected = values.includes(child.props.name)
-          let isDisabled = _disabled || child.props.disabled
-
-          if (maxReached && !isSelected) {
-            isDisabled = true
-          }
-
-          return React.isValidElement(child) ? (
-            <React.Fragment key={child.props.name}>
-              {React.cloneElement(child, {
-                // @ts-ignore TODO figure out children types
-                disabled: isDisabled,
-                role: role === 'radio' ? 'radio' : 'checkbox',
-                value: isSelected,
-                onChange: itemOnChange,
-              })}
-            </React.Fragment>
-          ) : null
-        })}
-      </View>
-    </GroupContext.Provider>
-  )
-}
-
 function Label({children}: React.PropsWithChildren<{}>) {
   const t = useTheme()
-  const {id, disabled} = React.useContext(ItemContext)
+  const {disabled} = React.useContext(ItemContext)
   return (
     <Text
-      nativeID={id}
       style={[
         a.font_bold,
         {
@@ -236,12 +281,12 @@ function createSharedToggleStyles({
   theme: t,
   hovered,
   focused,
-  value,
+  selected,
   disabled,
   hasError,
 }: {
   theme: ReturnType<typeof useTheme>
-  value: boolean
+  selected: boolean
   hovered: boolean
   focused: boolean
   disabled: boolean
@@ -251,7 +296,7 @@ function createSharedToggleStyles({
   const baseHover: ViewStyle[] = []
   const indicator: ViewStyle[] = []
 
-  if (value) {
+  if (selected) {
     base.push({
       backgroundColor:
         t.name === 'light' ? t.palette.primary_25 : t.palette.primary_900,
@@ -308,14 +353,14 @@ function createSharedToggleStyles({
 
 function Checkbox() {
   const t = useTheme()
-  const {value, hovered, focused, disabled, hasError} =
+  const {selected, hovered, focused, disabled, hasError} =
     React.useContext(ItemContext)
   const {baseStyles, baseHoverStyles, indicatorStyles} =
     createSharedToggleStyles({
       theme: t,
       hovered,
       focused,
-      value,
+      selected,
       disabled,
       hasError,
     })
@@ -330,19 +375,19 @@ function Checkbox() {
         {
           height: 20,
           width: 20,
-          backgroundColor: value ? t.palette.primary_500 : undefined,
+          backgroundColor: selected ? t.palette.primary_500 : undefined,
-          borderColor: value ? t.palette.primary_500 : undefined,
+          borderColor: selected ? t.palette.primary_500 : undefined,
         },
         baseStyles,
         hovered || focused ? baseHoverStyles : {},
       ]}>
-      {value ? (
+      {selected ? (
         <View
           style={[
             a.absolute,
             a.rounded_2xs,
             {height: 12, width: 12},
-            value
+            selected
               ? {
                   backgroundColor: t.palette.primary_500,
                 }
@@ -357,14 +402,14 @@ function Checkbox() {
 
 function Switch() {
   const t = useTheme()
-  const {value, hovered, focused, disabled, hasError} =
+  const {selected, hovered, focused, disabled, hasError} =
     React.useContext(ItemContext)
   const {baseStyles, baseHoverStyles, indicatorStyles} =
     createSharedToggleStyles({
       theme: t,
       hovered,
       focused,
-      value,
+      selected,
       disabled,
       hasError,
     })
@@ -394,7 +439,7 @@ function Switch() {
             left: 3,
             backgroundColor: t.palette.contrast_400,
           },
-          value
+          selected
             ? {
                 backgroundColor: t.palette.primary_500,
                 left: 13,
@@ -409,14 +454,14 @@ function Switch() {
 
 function Radio() {
   const t = useTheme()
-  const {value, hovered, focused, disabled, hasError} =
+  const {selected, hovered, focused, disabled, hasError} =
     React.useContext(ItemContext)
   const {baseStyles, baseHoverStyles, indicatorStyles} =
     createSharedToggleStyles({
       theme: t,
       hovered,
       focused,
-      value,
+      selected,
       disabled,
       hasError,
     })
@@ -431,19 +476,19 @@ function Radio() {
         {
           height: 20,
           width: 20,
-          backgroundColor: value ? t.palette.primary_500 : undefined,
+          backgroundColor: selected ? t.palette.primary_500 : undefined,
-          borderColor: value ? t.palette.primary_500 : undefined,
+          borderColor: selected ? t.palette.primary_500 : undefined,
         },
         baseStyles,
         hovered || focused ? baseHoverStyles : {},
       ]}>
-      {value ? (
+      {selected ? (
         <View
           style={[
             a.absolute,
             a.rounded_full,
             {height: 12, width: 12},
-            value
+            selected
               ? {
                   backgroundColor: t.palette.primary_500,
                 }

src/view/screens/Storybook/Forms.tsx

@@ -8,6 +8,7 @@ import {InputDate, utils} from '#/components/forms/InputDate'
 import {InputGroup} from '#/components/forms/InputGroup'
 import {Logo} from '#/view/icons/Logo'
 import Toggle from '#/components/forms/Toggle'
+import ToggleButton from '#/components/forms/ToggleButton'
 
 export function Forms() {
   return (
@@ -125,88 +126,110 @@ export function Forms() {
         <H3>Toggles</H3>
 
         <Toggle.Group
-          role="checkbox"
+          label="Toggle"
+          type="checkbox"
           maxSelections={2}
           values={['a', 'b']}
           onChange={e => console.log(e)}
           style={[a.gap_sm]}>
-          <Toggle.Item name="a">
+          <Toggle.Item name="a" label="Click me">
             <Toggle.Checkbox />
             <Toggle.Label>Click me</Toggle.Label>
           </Toggle.Item>
-          <Toggle.Item name="b">
+          <Toggle.Item name="b" label="Click me">
             <Toggle.Checkbox />
             <Toggle.Label>Click me</Toggle.Label>
           </Toggle.Item>
-          <Toggle.Item name="c">
+          <Toggle.Item name="c" label="Click me">
             <Toggle.Checkbox />
             <Toggle.Label>Click me</Toggle.Label>
           </Toggle.Item>
-          <Toggle.Item name="d" disabled>
+          <Toggle.Item name="d" disabled label="Click me">
             <Toggle.Checkbox />
             <Toggle.Label>Click me</Toggle.Label>
           </Toggle.Item>
-          <Toggle.Item name="e" hasError>
+          <Toggle.Item name="e" hasError label="Click me">
             <Toggle.Checkbox />
             <Toggle.Label>Click me</Toggle.Label>
           </Toggle.Item>
         </Toggle.Group>
 
         <Toggle.Group
-          role="checkbox"
+          label="Toggle"
+          type="checkbox"
           maxSelections={2}
           values={['a']}
           onChange={e => console.log(e)}
           style={[a.gap_sm]}>
-          <Toggle.Item name="a">
+          <Toggle.Item name="a" label="Click me">
             <Toggle.Switch />
             <Toggle.Label>Click me</Toggle.Label>
           </Toggle.Item>
-          <Toggle.Item name="b">
+          <Toggle.Item name="b" label="Click me">
             <Toggle.Switch />
             <Toggle.Label>Click me</Toggle.Label>
           </Toggle.Item>
-          <Toggle.Item name="c">
+          <Toggle.Item name="c" label="Click me">
             <Toggle.Switch />
             <Toggle.Label>Click me</Toggle.Label>
           </Toggle.Item>
-          <Toggle.Item name="d" disabled>
+          <Toggle.Item name="d" disabled label="Click me">
             <Toggle.Switch />
             <Toggle.Label>Click me</Toggle.Label>
           </Toggle.Item>
-          <Toggle.Item name="e" hasError>
+          <Toggle.Item name="e" hasError label="Click me">
             <Toggle.Switch />
             <Toggle.Label>Click me</Toggle.Label>
           </Toggle.Item>
         </Toggle.Group>
 
         <Toggle.Group
-          role="radio"
+          label="Toggle"
+          type="radio"
           values={['a']}
           onChange={e => console.log(e)}
           style={[a.gap_sm]}>
-          <Toggle.Item name="a">
+          <Toggle.Item name="a" label="Click me">
             <Toggle.Radio />
             <Toggle.Label>Click me</Toggle.Label>
           </Toggle.Item>
-          <Toggle.Item name="b">
+          <Toggle.Item name="b" label="Click me">
             <Toggle.Radio />
             <Toggle.Label>Click me</Toggle.Label>
           </Toggle.Item>
-          <Toggle.Item name="c">
+          <Toggle.Item name="c" label="Click me">
             <Toggle.Radio />
             <Toggle.Label>Click me</Toggle.Label>
           </Toggle.Item>
-          <Toggle.Item name="d" disabled>
+          <Toggle.Item name="d" disabled label="Click me">
             <Toggle.Radio />
             <Toggle.Label>Click me</Toggle.Label>
           </Toggle.Item>
-          <Toggle.Item name="e" hasError>
+          <Toggle.Item name="e" hasError label="Click me">
             <Toggle.Radio />
             <Toggle.Label>Click me</Toggle.Label>
           </Toggle.Item>
         </Toggle.Group>
       </View>
+
+      <View style={[a.gap_md, a.align_start, a.w_full]}>
+        <H3>ToggleButton</H3>
+
+        <ToggleButton.Group
+          label="Preferences"
+          values={['warn']}
+          onChange={e => console.log(e)}>
+          <ToggleButton.Button name="hide" label="Hide">
+            Hide
+          </ToggleButton.Button>
+          <ToggleButton.Button name="warn" label="Warn">
+            Warn
+          </ToggleButton.Button>
+          <ToggleButton.Button name="show" label="Show">
+            Show
+          </ToggleButton.Button>
+        </ToggleButton.Group>
+      </View>
     </View>
   )
 }