@itcase/ui-react-native 1.10.81

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,143 @@
+import { useMemo } from 'react'
+import { Pressable, View } from 'react-native'
+
+import { tokens } from '../../styles/tokens'
+import { Text } from '../Text'
+import { switchAppearance } from './Switch.appearance'
+import type {
+  SwitchAppearanceProps,
+  SwitchConfig,
+  SwitchProps,
+} from './Switch.interface'
+import { styles } from './Switch.styles'
+
+const DEFAULT_SWITCH_APPEARANCE = 'defaultPrimary'
+const DEFAULT_SWITCH_APPEARANCE_STYLE = 'solid'
+const DEFAULT_SWITCH_SIZE = 'l'
+
+const switchConfig: SwitchConfig = {
+  appearance: {},
+  setAppearance: (newComponent) => {
+    switchConfig.appearance = newComponent
+  },
+}
+
+switchConfig.setAppearance(switchAppearance)
+
+function Switch(props: SwitchProps) {
+  const {
+    appearance,
+    width,
+    align = 'left',
+    size,
+    fill,
+    fillToggle,
+    title,
+    titleTextColor,
+    titleTextSize,
+    desc,
+    descTextColor,
+    descTextSize,
+    borderColor,
+    appearanceStyle,
+    style,
+    isActive,
+    isDisabled,
+    onPress,
+  } = props
+
+  const appearanceConfig = useMemo(() => {
+    const appearanceTokens = (appearance || DEFAULT_SWITCH_APPEARANCE).split(
+      ' ',
+    )
+    const isCompositeAppearance = appearanceTokens.length > 1
+    const sizeKey = size && `size${size.toUpperCase()}`
+    const appearanceKeys = isCompositeAppearance
+      ? appearanceTokens
+      : [
+          ...appearanceTokens,
+          appearanceStyle || DEFAULT_SWITCH_APPEARANCE_STYLE,
+          sizeKey,
+        ]
+
+    return appearanceKeys.reduce<SwitchAppearanceProps>(
+      (resultConfig, appearanceKey) => {
+        return Object.assign(
+          resultConfig,
+          appearanceKey &&
+            switchConfig.appearance?.[
+              appearanceKey as keyof NonNullable<typeof switchConfig.appearance>
+            ],
+        )
+      },
+      {},
+    )
+  }, [appearance, appearanceStyle, size])
+
+  const sizeKey = size || appearanceConfig.size || DEFAULT_SWITCH_SIZE
+  const trackFillKey = isDisabled
+    ? 'surfaceDisabled'
+    : isActive
+      ? appearanceConfig.fillActive || appearanceConfig.fill
+      : fill || appearanceConfig.fill || 'surfaceTertiary'
+  const toggleFillKey = isActive
+    ? appearanceConfig.fillToggleActive ||
+      appearanceConfig.fillToggle ||
+      'surfacePrimary'
+    : fillToggle || appearanceConfig.fillToggle || 'surfacePrimary'
+  const borderColorKey = borderColor || appearanceConfig.borderColor
+  const widthKey = width
+
+  return (
+    <Pressable
+      disabled={isDisabled}
+      style={[
+        styles.switch,
+        align && styles[`switch_align_${align}`],
+        widthKey && tokens[`width_${widthKey}`],
+        style && style,
+      ]}
+      onPress={onPress}
+    >
+      <View style={styles.switch__wrapper}>
+        {title && (
+          <Text
+            size={titleTextSize || appearanceConfig.titleTextSize}
+            textColor={titleTextColor || appearanceConfig.titleTextColor}
+            style={align && styles[`switch__text_align_${align}`]}
+          >
+            {title}
+          </Text>
+        )}
+        {desc && (
+          <Text
+            size={descTextSize || appearanceConfig.descTextSize}
+            textColor={descTextColor || appearanceConfig.descTextColor}
+            style={align && styles[`switch__text_align_${align}`]}
+          >
+            {desc}
+          </Text>
+        )}
+      </View>
+      <View
+        style={[
+          styles.switch__item,
+          sizeKey && styles[`switch__item_size_${sizeKey}`],
+          trackFillKey && tokens[`fill_${trackFillKey}`],
+          borderColorKey && tokens[`border_color_${borderColorKey}`],
+          isActive ? styles.switch__item_active : styles.switch__item_inactive,
+        ]}
+      >
+        <View
+          style={[
+            styles.switch__toggle,
+            sizeKey && styles[`switch__toggle_size_${sizeKey}`],
+            toggleFillKey && tokens[`fill_${toggleFillKey}`],
+          ]}
+        />
+      </View>
+    </Pressable>
+  )
+}
+
+export { Switch, switchConfig }

package/src/components/Switch/appearance/switchDefault.ts

@@ -0,0 +1,14 @@
+import type { SwitchAppearance } from '../Switch.interface'
+
+const switchAppearanceDefault = {
+  defaultPrimary: {
+    fill: 'surfaceTertiary',
+    fillActive: 'surfaceTertiary',
+    fillToggle: 'surfacePrimary',
+    fillToggleActive: 'surfacePrimary',
+    titleTextColor: 'surfaceTextPrimary',
+    descTextColor: 'surfaceTextPrimary',
+  },
+} satisfies SwitchAppearance
+
+export { switchAppearanceDefault }

package/src/components/Switch/appearance/switchDisabled.ts

@@ -0,0 +1,14 @@
+import type { SwitchAppearance } from '../Switch.interface'
+
+const switchAppearanceDisabled = {
+  disabledPrimary: {
+    fill: 'surfaceDisabled',
+    fillActive: 'surfaceDisabled',
+    fillToggle: 'surfaceSecondary',
+    fillToggleActive: 'surfaceActiveSecondary',
+    titleTextColor: 'surfaceTextPrimary',
+    descTextColor: 'surfaceTextPrimary',
+  },
+} satisfies SwitchAppearance
+
+export { switchAppearanceDisabled }

package/src/components/Switch/appearance/switchError.ts

@@ -0,0 +1,14 @@
+import type { SwitchAppearance } from '../Switch.interface'
+
+const switchAppearanceError = {
+  errorPrimary: {
+    fill: 'surfaceTertiary',
+    fillActive: 'errorSecondary',
+    fillToggle: 'surfacePrimary',
+    fillToggleActive: 'surfacePrimary',
+    titleTextColor: 'surfaceTextPrimary',
+    descTextColor: 'surfaceTextPrimary',
+  },
+} satisfies SwitchAppearance
+
+export { switchAppearanceError }

package/src/components/Switch/appearance/switchRequire.ts

@@ -0,0 +1,14 @@
+import type { SwitchAppearance } from '../Switch.interface'
+
+const switchAppearanceRequire = {
+  requirePrimary: {
+    fill: 'surfaceTertiary',
+    fillActive: 'warningSecondary',
+    fillToggle: 'surfacePrimary',
+    fillToggleActive: 'surfacePrimary',
+    titleTextColor: 'surfaceTextPrimary',
+    descTextColor: 'surfaceTextPrimary',
+  },
+} satisfies SwitchAppearance
+
+export { switchAppearanceRequire }

package/src/components/Switch/appearance/switchShape.ts

@@ -0,0 +1,7 @@
+const switchAppearanceShape = {
+  rounded: {
+    shape: 'rounded',
+  },
+}
+
+export { switchAppearanceShape }

package/src/components/Switch/appearance/switchSize.ts

@@ -0,0 +1,21 @@
+import type { SwitchAppearanceSize } from '../Switch.interface'
+
+const switchAppearanceSize = {
+  sizeL: {
+    size: 'l',
+    titleTextSize: 'l',
+    descTextSize: 'xs',
+  },
+  sizeM: {
+    size: 'm',
+    titleTextSize: 'm',
+    descTextSize: 'xs',
+  },
+  sizeS: {
+    size: 's',
+    titleTextSize: 's',
+    descTextSize: 'xs',
+  },
+} satisfies SwitchAppearanceSize
+
+export { switchAppearanceSize }

package/src/components/Switch/appearance/switchStyle.ts

@@ -0,0 +1,19 @@
+import type { SwitchAppearanceStyle } from '../Switch.interface'
+
+const switchAppearanceStyle = {
+  solid: {
+    borderColor: 'none',
+  },
+  outlined: {
+    fill: 'none',
+  },
+  full: {
+    borderColor: 'none',
+  },
+  ghost: {
+    fill: 'none',
+    borderColor: 'none',
+  },
+} satisfies SwitchAppearanceStyle
+
+export { switchAppearanceStyle }

package/src/components/Switch/appearance/switchSuccess.ts

@@ -0,0 +1,14 @@
+import type { SwitchAppearance } from '../Switch.interface'
+
+const switchAppearanceSuccess = {
+  successPrimary: {
+    fill: 'surfaceTertiary',
+    fillActive: 'successPrimary',
+    fillToggle: 'surfacePrimary',
+    fillToggleActive: 'surfacePrimary',
+    titleTextColor: 'surfaceTextPrimary',
+    descTextColor: 'surfaceTextPrimary',
+  },
+} satisfies SwitchAppearance
+
+export { switchAppearanceSuccess }

package/src/components/Switch/index.ts

@@ -0,0 +1,32 @@
+import { switchAlignList } from './styles/switchAlign'
+import type { switchAlignPropsType } from './styles/switchAlign'
+import { switchSizeList } from './styles/switchSize'
+import type { switchSizePropsType } from './styles/switchSize'
+import { Switch, switchConfig } from './Switch'
+import { switchAppearance } from './Switch.appearance'
+import type {
+  SwitchAppearance,
+  SwitchAppearanceKey,
+  SwitchAppearanceSize,
+  SwitchAppearanceStyle,
+  SwitchConfig,
+  SwitchProps,
+} from './Switch.interface'
+
+export {
+  Switch,
+  switchAlignList,
+  switchAppearance,
+  switchConfig,
+  switchSizeList,
+}
+export type {
+  switchAlignPropsType,
+  SwitchAppearance,
+  SwitchAppearanceKey,
+  SwitchAppearanceSize,
+  SwitchAppearanceStyle,
+  SwitchConfig,
+  SwitchProps,
+  switchSizePropsType,
+}

package/src/components/Switch/stories/SwitchDefault.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Switch } from '../Switch'
+import { SwitchStateful } from './SwitchStories.config'
+
+const meta = {
+  title: 'Atoms / Switch / Default',
+  component: Switch,
+  args: {
+    title: 'Switch',
+    desc: 'Description',
+  },
+  render: (args) => <SwitchStateful {...args} />,
+} satisfies Meta<typeof Switch>
+
+export default meta
+
+type Story = StoryObj<typeof Switch>
+
+export const Left: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL solid rounded',
+  },
+}
+
+export const Right: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL solid rounded',
+    align: 'right',
+  },
+}
+
+export const LeftChecked: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL solid rounded',
+    isActive: true,
+  },
+}
+
+export const RightChecked: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL solid rounded',
+    align: 'right',
+    isActive: true,
+  },
+}

package/src/components/Switch/stories/SwitchDisabled.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Switch } from '../Switch'
+
+const meta = {
+  title: 'Atoms / Switch / Disabled',
+  component: Switch,
+  args: {
+    title: 'Switch',
+    desc: 'Description',
+    isDisabled: true,
+  },
+} satisfies Meta<typeof Switch>
+
+export default meta
+
+type Story = StoryObj<typeof Switch>
+
+export const Disabled: Story = {
+  args: {
+    appearance: 'disabledPrimary sizeL solid rounded',
+  },
+}
+
+export const Left: Story = {
+  args: {
+    appearance: 'disabledPrimary sizeL solid rounded',
+  },
+}
+
+export const Right: Story = {
+  args: {
+    appearance: 'disabledPrimary sizeL solid rounded',
+    align: 'right',
+  },
+}
+
+export const LeftChecked: Story = {
+  args: {
+    appearance: 'disabledPrimary sizeL solid rounded',
+    isActive: true,
+  },
+}
+
+export const RightChecked: Story = {
+  args: {
+    appearance: 'disabledPrimary sizeL solid rounded',
+    align: 'right',
+    isActive: true,
+  },
+}

package/src/components/Switch/stories/SwitchError.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Switch } from '../Switch'
+import { SwitchStateful } from './SwitchStories.config'
+
+const meta = {
+  title: 'Atoms / Switch / Error',
+  component: Switch,
+  args: {
+    title: 'Switch',
+    desc: 'Description',
+  },
+  render: (args) => <SwitchStateful {...args} />,
+} satisfies Meta<typeof Switch>
+
+export default meta
+
+type Story = StoryObj<typeof Switch>
+
+export const Left: Story = {
+  args: {
+    appearance: 'errorPrimary sizeL solid rounded',
+  },
+}
+
+export const Right: Story = {
+  args: {
+    appearance: 'errorPrimary sizeL solid rounded',
+    align: 'right',
+  },
+}
+
+export const LeftChecked: Story = {
+  args: {
+    appearance: 'errorPrimary sizeL solid rounded',
+    isActive: true,
+  },
+}
+
+export const RightChecked: Story = {
+  args: {
+    appearance: 'errorPrimary sizeL solid rounded',
+    align: 'right',
+    isActive: true,
+  },
+}

package/src/components/Switch/stories/SwitchRequire.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Switch } from '../Switch'
+import { SwitchStateful } from './SwitchStories.config'
+
+const meta = {
+  title: 'Atoms / Switch / Require',
+  component: Switch,
+  args: {
+    title: 'Switch',
+    desc: 'Description',
+  },
+  render: (args) => <SwitchStateful {...args} />,
+} satisfies Meta<typeof Switch>
+
+export default meta
+
+type Story = StoryObj<typeof Switch>
+
+export const Left: Story = {
+  args: {
+    appearance: 'requirePrimary sizeL solid rounded',
+  },
+}
+
+export const Right: Story = {
+  args: {
+    appearance: 'requirePrimary sizeL solid rounded',
+    align: 'right',
+  },
+}
+
+export const LeftChecked: Story = {
+  args: {
+    appearance: 'requirePrimary sizeL solid rounded',
+    isActive: true,
+  },
+}
+
+export const RightChecked: Story = {
+  args: {
+    appearance: 'requirePrimary sizeL solid rounded',
+    align: 'right',
+    isActive: true,
+  },
+}

package/src/components/Switch/stories/SwitchSize.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Switch } from '../Switch'
+import { SwitchStateful } from './SwitchStories.config'
+
+const meta = {
+  title: 'Atoms / Switch / Size',
+  component: Switch,
+  args: {
+    title: 'Switch',
+    desc: 'Description',
+    isActive: true,
+  },
+  render: (args) => <SwitchStateful {...args} />,
+} satisfies Meta<typeof Switch>
+
+export default meta
+
+type Story = StoryObj<typeof Switch>
+
+export const L: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL solid rounded',
+  },
+}
+
+export const M: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeM solid rounded',
+  },
+}
+
+export const S: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeS solid rounded',
+  },
+}

package/src/components/Switch/stories/SwitchStories.config.tsx

@@ -0,0 +1,28 @@
+import { useState } from 'react'
+
+import { Switch } from '../Switch'
+import type { SwitchProps } from '../Switch.interface'
+
+function SwitchStateful(props: SwitchProps) {
+  const [isActive, setActive] = useState(Boolean(props.isActive))
+
+  return (
+    <Switch
+      {...props}
+      isActive={isActive}
+      onPress={(event) => {
+        if (props.isDisabled) {
+          return
+        }
+
+        setActive((prev) => !prev)
+
+        if (props.onPress) {
+          props.onPress(event)
+        }
+      }}
+    />
+  )
+}
+
+export { SwitchStateful }

package/src/components/Switch/stories/SwitchSuccess.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Switch } from '../Switch'
+import { SwitchStateful } from './SwitchStories.config'
+
+const meta = {
+  title: 'Atoms / Switch / Success',
+  component: Switch,
+  args: {
+    title: 'Switch',
+    desc: 'Description',
+  },
+  render: (args) => <SwitchStateful {...args} />,
+} satisfies Meta<typeof Switch>
+
+export default meta
+
+type Story = StoryObj<typeof Switch>
+
+export const Left: Story = {
+  args: {
+    appearance: 'successPrimary sizeL solid rounded',
+  },
+}
+
+export const Right: Story = {
+  args: {
+    appearance: 'successPrimary sizeL solid rounded',
+    align: 'right',
+  },
+}
+
+export const LeftChecked: Story = {
+  args: {
+    appearance: 'successPrimary sizeL solid rounded',
+    isActive: true,
+  },
+}
+
+export const RightChecked: Story = {
+  args: {
+    appearance: 'successPrimary sizeL solid rounded',
+    align: 'right',
+    isActive: true,
+  },
+}

package/src/components/Switch/stories/SwitchTitleDescSwitch.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Switch } from '../Switch'
+import { SwitchStateful } from './SwitchStories.config'
+
+const meta = {
+  title: 'Atoms / Switch / Title + Desc + Switch',
+  component: Switch,
+  args: {
+    title: 'Switch title',
+    desc: 'Switch description',
+    isActive: true,
+  },
+  render: (args) => <SwitchStateful {...args} />,
+} satisfies Meta<typeof Switch>
+
+export default meta
+
+type Story = StoryObj<typeof Switch>
+
+export const Default: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL solid rounded',
+  },
+}
+
+export const Error: Story = {
+  args: {
+    appearance: 'errorPrimary sizeL solid rounded',
+  },
+}
+
+export const Success: Story = {
+  args: {
+    appearance: 'successPrimary sizeL solid rounded',
+  },
+}
+
+export const Require: Story = {
+  args: {
+    appearance: 'requirePrimary sizeL solid rounded',
+  },
+}
+
+export const Disable: Story = {
+  args: {
+    appearance: 'disabledPrimary sizeL solid rounded',
+    isDisabled: true,
+  },
+}