Toggles

src/alf/atoms.ts

@@ -48,6 +48,12 @@ export const atoms = {
   /*
    * Border radius
    */
+  rounded_2xs: {
+    borderRadius: tokens.borderRadius._2xs,
+  },
+  rounded_xs: {
+    borderRadius: tokens.borderRadius.xs,
+  },
   rounded_sm: {
     borderRadius: tokens.borderRadius.sm,
   },

src/alf/tokens.ts

@@ -16,7 +16,7 @@ export const color = {
 
   blue_25: `#F5FAFF`,
   blue_50: `#EFF8FF`,
-  blue_100: `#EFF8FF`,
+  blue_100: `#D1E9FF`,
   blue_200: `#B2DDFF`,
   blue_300: `#84CAFF`,
   blue_400: `#53B1FD`,
@@ -84,6 +84,8 @@ export const lineHeight = {
 } as const
 
 export const borderRadius = {
+  _2xs: 2,
+  xs: 4,
   sm: 8,
   md: 12,
   full: 999,

src/components/forms/Toggle.tsx

@@ -0,0 +1,399 @@
+import React from 'react'
+import {Pressable, PressableProps, View, ViewStyle} from 'react-native'
+
+import {useTheme, atoms as a, web} from '#/alf'
+import {Text} from '#/components/Typography'
+import {useInteractionState} from '#/components/hooks/useInteractionState'
+import {StyleProp} from 'react-native'
+
+type ItemState = {
+  name: string
+  value: boolean
+  disabled: boolean
+  hovered: boolean
+  pressed: boolean
+  focused: boolean
+}
+
+const ItemContext = React.createContext<ItemState>({
+  name: '',
+  value: false,
+  disabled: false,
+  hovered: false,
+  pressed: false,
+  focused: false,
+})
+
+const GroupContext = React.createContext<{
+  values: string[]
+  disabled: boolean
+  role?: 'radio' | 'checkbox'
+}>({
+  values: [],
+  disabled: false,
+  role: 'checkbox',
+})
+
+type ItemProps = Omit<PressableProps, 'children' | 'style' | 'onPress'> & {
+  name: string
+  value?: boolean
+  onChange?: ({name, value}: {name: string; value: boolean}) => void
+  style?: (state: ItemState) => ViewStyle
+  children: ((props: ItemState) => React.ReactNode) | React.ReactNode
+}
+
+function Item({
+  children,
+  name,
+  value = false,
+  disabled,
+  onChange,
+  style,
+}: ItemProps) {
+  const {
+    state: hovered,
+    onIn: onHoverIn,
+    onOut: onHoverOut,
+  } = useInteractionState()
+  const {
+    state: pressed,
+    onIn: onPressIn,
+    onOut: onPressOut,
+  } = useInteractionState()
+  const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
+
+  const onPress = React.useCallback(() => {
+    const next = !value
+    onChange?.({name, value: next})
+  }, [name, value, onChange])
+
+  const state = React.useMemo(
+    () => ({
+      name,
+      value,
+      disabled: disabled ?? false,
+      hovered,
+      pressed,
+      focused,
+    }),
+    [name, value, disabled, hovered, pressed, focused],
+  )
+
+  return (
+    <ItemContext.Provider value={state}>
+      <Pressable
+        disabled={disabled}
+        aria-disabled={disabled ?? false}
+        role="checkbox"
+        accessibilityRole="checkbox"
+        aria-checked={value}
+        onPress={onPress}
+        onHoverIn={onHoverIn}
+        onHoverOut={onHoverOut}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        style={[
+          a.flex_row,
+          a.align_center,
+          a.gap_sm,
+          focused ? web({outline: 'none'}) : {},
+          style?.(state),
+        ]}>
+        {typeof children === 'function' ? children(state) : children}
+      </Pressable>
+    </ItemContext.Provider>
+  )
+}
+
+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,
+                value: isSelected,
+                onChange: itemOnChange,
+              })}
+            </React.Fragment>
+          ) : null
+        })}
+      </View>
+    </GroupContext.Provider>
+  )
+}
+
+function Label({children}: React.PropsWithChildren<{}>) {
+  const t = useTheme()
+  const {disabled} = React.useContext(ItemContext)
+  return (
+    <Text
+      style={[
+        a.font_bold,
+        {
+          userSelect: 'none',
+          color: disabled ? t.palette.contrast_400 : t.palette.contrast_600,
+        },
+      ]}>
+      {children}
+    </Text>
+  )
+}
+
+function createSharedToggleStyles({
+  theme: t,
+  hovered,
+  focused,
+  value,
+  disabled,
+}: {
+  theme: ReturnType<typeof useTheme>
+  value: boolean
+  hovered: boolean
+  focused: boolean
+  disabled: boolean
+}) {
+  return [
+    hovered || focused
+      ? {
+          backgroundColor: t.palette.contrast_50,
+          borderColor: t.palette.contrast_500,
+        }
+      : {},
+    value
+      ? {
+          backgroundColor:
+            t.name === 'light' ? t.palette.primary_25 : t.palette.primary_900,
+          borderColor: t.palette.primary_500,
+        }
+      : {},
+    value && (hovered || focused)
+      ? {
+          backgroundColor:
+            t.name === 'light' ? t.palette.primary_100 : t.palette.primary_800,
+          borderColor:
+            t.name === 'light' ? t.palette.primary_600 : t.palette.primary_400,
+        }
+      : {},
+    disabled
+      ? {
+          backgroundColor: t.palette.contrast_200,
+          borderColor: t.palette.contrast_300,
+        }
+      : {},
+  ]
+}
+
+function Checkbox() {
+  const t = useTheme()
+  const {value, hovered, focused, disabled} = React.useContext(ItemContext)
+  return (
+    <View
+      style={[
+        a.justify_center,
+        a.align_center,
+        a.border,
+        a.rounded_xs,
+        t.atoms.border_contrast,
+        {
+          height: 20,
+          width: 20,
+          backgroundColor: value ? t.palette.primary_500 : undefined,
+          borderColor: value ? t.palette.primary_500 : undefined,
+        },
+        ...createSharedToggleStyles({
+          theme: t,
+          hovered,
+          focused,
+          value,
+          disabled,
+        }),
+      ]}>
+      {value ? (
+        <View
+          style={[
+            a.absolute,
+            a.rounded_2xs,
+            {height: 12, width: 12},
+            value
+              ? {
+                  backgroundColor: t.palette.primary_500,
+                }
+              : {},
+          ]}
+        />
+      ) : null}
+    </View>
+  )
+}
+
+function Switch() {
+  const t = useTheme()
+  const {value, hovered, focused, disabled} = React.useContext(ItemContext)
+  return (
+    <View
+      style={[
+        a.relative,
+        a.border,
+        a.rounded_full,
+        t.atoms.bg,
+        t.atoms.border_contrast,
+        {
+          height: 20,
+          width: 30,
+        },
+        ...createSharedToggleStyles({
+          theme: t,
+          hovered,
+          focused,
+          value,
+          disabled,
+        }),
+      ]}>
+      <View
+        style={[
+          a.absolute,
+          a.rounded_full,
+          {
+            height: 12,
+            width: 12,
+            top: 3,
+            left: 3,
+            backgroundColor: t.palette.contrast_400,
+          },
+          value
+            ? {
+                backgroundColor: t.palette.primary_500,
+                left: 13,
+              }
+            : {},
+        ]}
+      />
+    </View>
+  )
+}
+
+function Radio() {
+  const t = useTheme()
+  const {value, hovered, focused, disabled} = React.useContext(ItemContext)
+  return (
+    <View
+      style={[
+        a.justify_center,
+        a.align_center,
+        a.border,
+        a.rounded_full,
+        t.atoms.border_contrast,
+        {
+          height: 20,
+          width: 20,
+          backgroundColor: value ? t.palette.primary_500 : undefined,
+          borderColor: value ? t.palette.primary_500 : undefined,
+        },
+        ...createSharedToggleStyles({
+          theme: t,
+          hovered,
+          focused,
+          value,
+          disabled,
+        }),
+      ]}>
+      {value ? (
+        <View
+          style={[
+            a.absolute,
+            a.rounded_full,
+            {height: 12, width: 12},
+            value
+              ? {
+                  backgroundColor: t.palette.primary_500,
+                }
+              : {},
+          ]}
+        />
+      ) : null}
+    </View>
+  )
+}
+
+export default {
+  Item,
+  Checkbox,
+  Label,
+  Switch,
+  Radio,
+  Group,
+}

src/view/screens/Storybook/Forms.tsx

@@ -2,113 +2,199 @@ import React from 'react'
 import {View} from 'react-native'
 
 import {atoms as a} from '#/alf'
-import {Text} from '#/components/Typography'
+import {Text, H1, H3} from '#/components/Typography'
 import {InputText} from '#/components/forms/InputText'
 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'
 
 export function Forms() {
   return (
-    <View style={[a.gap_md, a.align_start]}>
-      <InputText
-        testID="input"
-        accessibilityLabel="Input"
-        accessibilityHint="Enter some text"
-        placeholder="Type here"
-        value=""
-        onChange={text => console.log(text)}
-      />
-      <InputText
-        hasError
-        testID="input"
-        accessibilityLabel="Input"
-        accessibilityHint="Enter some text"
-        placeholder="Type here"
-        value="Test initial value"
-        onChange={text => console.log(text)}
-      />
-      <InputText
-        hasError
-        testID="input"
-        accessibilityLabel="Input"
-        accessibilityHint="Enter some text"
-        placeholder="Type here"
-        value="Test initial value"
-        onChange={text => console.log(text)}
-        icon={Logo}
-      />
-      <InputText
-        testID="input"
-        accessibilityLabel="Input"
-        accessibilityHint="Enter some text"
-        placeholder="Type here"
-        value=""
-        onChange={text => console.log(text)}
-        icon={Logo}
-      />
-      <InputText
-        testID="input"
-        accessibilityLabel="Input"
-        accessibilityHint="Enter some text"
-        placeholder="Type here"
-        value=""
-        onChange={text => console.log(text)}
-        icon={Logo}
-        suffix={() => <Text>.bksy.social</Text>}
-      />
-      <InputText
-        multiline
-        numberOfLines={3}
-        testID="input"
-        accessibilityLabel="Input"
-        accessibilityHint="Enter some text"
-        placeholder="Type here"
-        value=""
-        onChange={text => console.log(text)}
-      />
+    <View style={[a.gap_4xl, a.align_start]}>
+      <H1>Forms</H1>
 
-      <InputGroup>
-        <InputText
-          testID="input"
-          accessibilityLabel="Input"
-          accessibilityHint="Enter some text"
-          placeholder="Type here"
-          value=""
-          onChange={text => console.log(text)}
-        />
-        <InputText
-          testID="input"
-          accessibilityLabel="Input"
-          accessibilityHint="Enter some text"
-          placeholder="Type here"
-          value=""
-          onChange={text => console.log(text)}
-        />
-        <InputText
-          testID="input"
-          accessibilityLabel="Input"
-          accessibilityHint="Enter some text"
-          placeholder="Type here"
-          value=""
-          onChange={text => console.log(text)}
-        />
-      </InputGroup>
+      <View style={[a.gap_md, a.align_start, a.w_full]}>
+        <H3>InputText</H3>
 
-      <InputDate
-        testID="date"
-        value={'2001-01-01'}
-        onChange={date => console.log(date)}
-        accessibilityLabel="Date"
-        accessibilityHint="Enter a date"
-      />
-      <InputDate
-        testID="date"
-        value={utils.toSimpleDateString(new Date())}
-        onChange={date => console.log(date)}
-        accessibilityLabel="Date"
-        accessibilityHint="Enter a date"
-      />
+        <InputText
+          testID="input"
+          accessibilityLabel="Input"
+          accessibilityHint="Enter some text"
+          placeholder="Type here"
+          value=""
+          onChange={text => console.log(text)}
+        />
+        <InputText
+          hasError
+          testID="input"
+          accessibilityLabel="Input"
+          accessibilityHint="Enter some text"
+          placeholder="Type here"
+          value="Test initial value"
+          onChange={text => console.log(text)}
+        />
+        <InputText
+          hasError
+          testID="input"
+          accessibilityLabel="Input"
+          accessibilityHint="Enter some text"
+          placeholder="Type here"
+          value="Test initial value"
+          onChange={text => console.log(text)}
+          icon={Logo}
+        />
+        <InputText
+          testID="input"
+          accessibilityLabel="Input"
+          accessibilityHint="Enter some text"
+          placeholder="Type here"
+          value=""
+          onChange={text => console.log(text)}
+          icon={Logo}
+        />
+        <InputText
+          testID="input"
+          accessibilityLabel="Input"
+          accessibilityHint="Enter some text"
+          placeholder="Type here"
+          value=""
+          onChange={text => console.log(text)}
+          icon={Logo}
+          suffix={() => <Text>.bksy.social</Text>}
+        />
+        <InputText
+          multiline
+          numberOfLines={3}
+          testID="input"
+          accessibilityLabel="Input"
+          accessibilityHint="Enter some text"
+          placeholder="Type here"
+          value=""
+          onChange={text => console.log(text)}
+        />
+
+        <H3>InputDate</H3>
+        <InputDate
+          testID="date"
+          value={'2001-01-01'}
+          onChange={date => console.log(date)}
+          accessibilityLabel="Date"
+          accessibilityHint="Enter a date"
+        />
+        <InputDate
+          testID="date"
+          value={utils.toSimpleDateString(new Date())}
+          onChange={date => console.log(date)}
+          accessibilityLabel="Date"
+          accessibilityHint="Enter a date"
+        />
+      </View>
+
+      <View style={[a.gap_md, a.align_start, a.w_full]}>
+        <H3>InputGroup (WIP)</H3>
+        <InputGroup>
+          <InputText
+            testID="input"
+            accessibilityLabel="Input"
+            accessibilityHint="Enter some text"
+            placeholder="Type here"
+            value=""
+            onChange={text => console.log(text)}
+          />
+          <InputText
+            testID="input"
+            accessibilityLabel="Input"
+            accessibilityHint="Enter some text"
+            placeholder="Type here"
+            value=""
+            onChange={text => console.log(text)}
+          />
+          <InputText
+            testID="input"
+            accessibilityLabel="Input"
+            accessibilityHint="Enter some text"
+            placeholder="Type here"
+            value=""
+            onChange={text => console.log(text)}
+          />
+        </InputGroup>
+      </View>
+
+      <View style={[a.gap_md, a.align_start, a.w_full]}>
+        <H3>Toggles</H3>
+
+        <Toggle.Group
+          role="checkbox"
+          maxSelections={2}
+          values={['a', 'b']}
+          onChange={e => console.log(e)}
+          style={[a.gap_sm]}>
+          <Toggle.Item name="a">
+            <Toggle.Checkbox />
+            <Toggle.Label>Click me</Toggle.Label>
+          </Toggle.Item>
+          <Toggle.Item name="b">
+            <Toggle.Checkbox />
+            <Toggle.Label>Click me</Toggle.Label>
+          </Toggle.Item>
+          <Toggle.Item name="c">
+            <Toggle.Checkbox />
+            <Toggle.Label>Click me</Toggle.Label>
+          </Toggle.Item>
+          <Toggle.Item name="d" disabled>
+            <Toggle.Checkbox />
+            <Toggle.Label>Click me</Toggle.Label>
+          </Toggle.Item>
+        </Toggle.Group>
+
+        <Toggle.Group
+          role="checkbox"
+          maxSelections={2}
+          values={['a']}
+          onChange={e => console.log(e)}
+          style={[a.gap_sm]}>
+          <Toggle.Item name="a">
+            <Toggle.Switch />
+            <Toggle.Label>Click me</Toggle.Label>
+          </Toggle.Item>
+          <Toggle.Item name="b">
+            <Toggle.Switch />
+            <Toggle.Label>Click me</Toggle.Label>
+          </Toggle.Item>
+          <Toggle.Item name="c">
+            <Toggle.Switch />
+            <Toggle.Label>Click me</Toggle.Label>
+          </Toggle.Item>
+          <Toggle.Item name="d" disabled>
+            <Toggle.Switch />
+            <Toggle.Label>Click me</Toggle.Label>
+          </Toggle.Item>
+        </Toggle.Group>
+
+        <Toggle.Group
+          role="radio"
+          values={['a']}
+          onChange={e => console.log(e)}
+          style={[a.gap_sm]}>
+          <Toggle.Item name="a">
+            <Toggle.Radio />
+            <Toggle.Label>Click me</Toggle.Label>
+          </Toggle.Item>
+          <Toggle.Item name="b">
+            <Toggle.Radio />
+            <Toggle.Label>Click me</Toggle.Label>
+          </Toggle.Item>
+          <Toggle.Item name="c">
+            <Toggle.Radio />
+            <Toggle.Label>Click me</Toggle.Label>
+          </Toggle.Item>
+          <Toggle.Item name="d" disabled>
+            <Toggle.Radio />
+            <Toggle.Label>Click me</Toggle.Label>
+          </Toggle.Item>
+        </Toggle.Group>
+      </View>
     </View>
   )
 }