@itcase/ui-react-native 1.10.85 → 1.10.86

package/src/components/Switch/Switch.helpers.ts

@@ -0,0 +1,102 @@
+import { useEffect, useMemo, useState } from 'react'
+import {
+  Animated,
+  Easing,
+  type LayoutChangeEvent,
+  type ViewStyle,
+} from 'react-native'
+
+import type { FillActiveProps, FillProps } from '@itcase/types-ui'
+
+import { tokens } from '../../styles/tokens'
+import {
+  SWITCH_ANIMATION_DURATION,
+  SWITCH_TRACK_PADDING,
+} from './Switch.constants'
+
+interface UseSwitchAnimationParams {
+  isActive?: boolean
+  activeTrackColor: string
+  inactiveTrackColor: string
+}
+
+function resolveFillColor(fillKey?: FillActiveProps | FillProps) {
+  if (!fillKey || fillKey === 'none') {
+    return 'transparent'
+  }
+
+  const fillStyle = tokens[`fill_${fillKey}`]
+
+  if (
+    fillStyle &&
+    'backgroundColor' in fillStyle &&
+    typeof fillStyle.backgroundColor === 'string'
+  ) {
+    return fillStyle.backgroundColor
+  }
+
+  return 'transparent'
+}
+
+function useSwitchAnimation(params: UseSwitchAnimationParams) {
+  const { activeTrackColor, inactiveTrackColor, isActive } = params
+
+  const [progress] = useState(() => new Animated.Value(isActive ? 1 : 0))
+  const [trackWidth, setTrackWidth] = useState(0)
+  const [toggleWidth, setToggleWidth] = useState(0)
+
+  useEffect(() => {
+    Animated.timing(progress, {
+      duration: SWITCH_ANIMATION_DURATION,
+      easing: Easing.out(Easing.cubic),
+      toValue: isActive ? 1 : 0,
+      useNativeDriver: false,
+    }).start()
+  }, [isActive, progress])
+
+  const handleTrackLayout = (event: LayoutChangeEvent) => {
+    setTrackWidth(event.nativeEvent.layout.width)
+  }
+
+  const handleToggleLayout = (event: LayoutChangeEvent) => {
+    setToggleWidth(event.nativeEvent.layout.width)
+  }
+
+  const translateDistance = Math.max(
+    trackWidth - SWITCH_TRACK_PADDING * 2 - toggleWidth,
+    0,
+  )
+
+  const trackAnimatedStyle =
+    useMemo((): Animated.WithAnimatedValue<ViewStyle> => {
+      return {
+        backgroundColor: progress.interpolate({
+          inputRange: [0, 1],
+          outputRange: [inactiveTrackColor, activeTrackColor],
+        }),
+      }
+    }, [activeTrackColor, inactiveTrackColor, progress])
+
+  const toggleAnimatedStyle =
+    useMemo((): Animated.WithAnimatedValue<ViewStyle> => {
+      return {
+        transform: [
+          {
+            translateX: progress.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0, translateDistance],
+            }),
+          },
+        ],
+      }
+    }, [progress, translateDistance])
+
+  return {
+    handleToggleLayout: handleToggleLayout,
+    handleTrackLayout: handleTrackLayout,
+    toggleAnimatedStyle: toggleAnimatedStyle,
+    trackAnimatedStyle: trackAnimatedStyle,
+  }
+}
+
+export { resolveFillColor, useSwitchAnimation }

package/src/components/Switch/Switch.interface.ts

@@ -8,7 +8,7 @@ import type {
   AppearanceSizeKey,
   AppearanceStyleKey,
   BorderColorProps,
-  CompositeAppearanceKeys,
+  CompositeAppearanceStateDefault,
   FillActiveProps,
   FillProps,
   TextColorProps,
@@ -16,6 +16,7 @@ import type {
   WidthProps,
 } from '@itcase/types-ui'
 
+import type { ComponentGalleryArgs } from '../../storybook'
 import type { switchAlignPropsType } from './styles/switchAlign'
 import type { switchSizePropsType } from './styles/switchSize'
 
@@ -32,7 +33,7 @@ interface SwitchAppearanceProps {
   titleTextSize?: TextSizeProps
 }
 
-type SwitchAppearanceKey = AppearanceKeysState | CompositeAppearanceKeys
+type SwitchAppearanceKey = AppearanceKeysState | CompositeAppearanceStateDefault
 type SwitchConfig = AppearanceConfig<AppearanceKeysState, SwitchAppearanceProps>
 type SwitchAppearance = SwitchConfig['appearance']
 type SwitchAppearanceStyle = AppearanceRecord<
@@ -49,16 +50,29 @@ type SwitchAppearanceSize = AppearancePartialRecord<
 interface SwitchProps extends SwitchAppearanceProps {
   isActive?: boolean
   isDisabled?: boolean
+  onChange?: (isActive: boolean) => void
   onPress?: (event: GestureResponderEvent) => void
   align?: switchAlignPropsType
   appearance?: SwitchAppearanceKey
   appearanceStyle?: AppearanceStyleKey
+  dataTestId?: string
+  defaultIsActive?: boolean
   desc?: string
   style?: StyleProp<ViewStyle>
   title?: string
   width?: WidthProps
 }
 
+type SwitchGalleryStory = ComponentGalleryArgs &
+  Pick<SwitchProps, 'desc' | 'isActive' | 'isDisabled' | 'title'>
+
+type SwitchStoryArgs = Omit<SwitchProps, 'appearance'> & {
+  appearanceShape: string
+  appearanceSize: string
+  appearanceStyle: string
+  appearanceType: string
+}
+
 export type {
   SwitchAppearance,
   SwitchAppearanceKey,
@@ -66,5 +80,7 @@ export type {
   SwitchAppearanceSize,
   SwitchAppearanceStyle,
   SwitchConfig,
+  SwitchGalleryStory,
   SwitchProps,
+  SwitchStoryArgs,
 }

package/src/components/Switch/Switch.tsx

@@ -1,18 +1,24 @@
-import { useMemo } from 'react'
-import { Pressable, View } from 'react-native'
+import { useCallback, useMemo, useState } from 'react'
+import {
+  Animated,
+  Pressable,
+  View,
+  type GestureResponderEvent,
+} from 'react-native'
+
+import {
+  useAppearanceConfig,
+  useDevicePropsGenerator,
+} from '@itcase/ui-core/hooks'
+import { mergeAppearanceKeys } from '@itcase/ui-core/utils'
 
 import { tokens } from '../../styles/tokens'
 import { Text } from '../Text'
 import { switchAppearance } from './Switch.appearance'
-import type {
-  SwitchAppearanceProps,
-  SwitchConfig,
-  SwitchProps,
-} from './Switch.interface'
+import { resolveFillColor, useSwitchAnimation } from './Switch.helpers'
+import type { 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 = {
@@ -26,67 +32,101 @@ switchConfig.setAppearance(switchAppearance)
 
 function Switch(props: SwitchProps) {
   const {
-    appearance,
-    width,
+    appearance = 'defaultPrimary sizeL solid rounded',
+    dataTestId,
     align = 'left',
     size,
-    fill,
     fillToggle,
     title,
-    titleTextColor,
-    titleTextSize,
     desc,
-    descTextColor,
-    descTextSize,
-    borderColor,
     appearanceStyle,
+    defaultIsActive = false,
     style,
-    isActive,
+    isActive: isActiveProp,
     isDisabled,
+    onChange,
     onPress,
   } = props
 
-  const appearanceConfig = useMemo(() => {
-    const appearanceTokens = (appearance || DEFAULT_SWITCH_APPEARANCE).split(
-      ' ',
-    )
+  const isControlled = isActiveProp !== undefined
+  const [uncontrolledActive, setUncontrolledActive] = useState(defaultIsActive)
+  const isActive = isControlled ? isActiveProp : uncontrolledActive
+
+  const handlePress = useCallback(
+    (event: GestureResponderEvent) => {
+      if (isDisabled) {
+        return
+      }
+
+      const nextActive = !isActive
+
+      if (!isControlled) {
+        setUncontrolledActive(nextActive)
+      }
+
+      onChange?.(nextActive)
+      onPress?.(event)
+    },
+    [isActive, isControlled, isDisabled, onChange, onPress],
+  )
+
+  const resolvedAppearance = useMemo(() => {
+    const appearanceTokens = 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>
-            ],
-        )
-      },
-      {},
-    )
+
+    let result = isCompositeAppearance
+      ? appearance
+      : mergeAppearanceKeys(appearance, appearanceStyle || 'solid')
+
+    if (!isCompositeAppearance && size) {
+      result = mergeAppearanceKeys(result, `size${size.toUpperCase()}`)
+    }
+
+    return result
   }, [appearance, appearanceStyle, size])
 
-  const sizeKey = size || appearanceConfig.size || DEFAULT_SWITCH_SIZE
-  const trackFillKey = isDisabled
+  const appearanceConfig = useAppearanceConfig(
+    resolvedAppearance,
+    switchConfig,
+    isDisabled,
+  )
+  const propsGenerator = useDevicePropsGenerator(props, appearanceConfig)
+
+  const {
+    width,
+    size: appearanceSize,
+    fill,
+    fillActive,
+    fillToggle: appearanceFillToggle,
+    fillToggleActive,
+    titleTextColor,
+    titleTextSize,
+    descTextColor,
+    descTextSize,
+    borderColor,
+  } = propsGenerator
+
+  const sizeKey = appearanceSize || DEFAULT_SWITCH_SIZE
+  const inactiveTrackFillKey = isDisabled
     ? 'surfaceDisabled'
-    : isActive
-      ? appearanceConfig.fillActive || appearanceConfig.fill
-      : fill || appearanceConfig.fill || 'surfaceTertiary'
+    : fill || 'surfaceTertiary'
+  const activeTrackFillKey = isDisabled
+    ? 'surfaceDisabled'
+    : fillActive || fill || 'surfaceTertiary'
   const toggleFillKey = isActive
-    ? appearanceConfig.fillToggleActive ||
-      appearanceConfig.fillToggle ||
-      'surfacePrimary'
-    : fillToggle || appearanceConfig.fillToggle || 'surfacePrimary'
-  const borderColorKey = borderColor || appearanceConfig.borderColor
-  const widthKey = width
+    ? fillToggleActive || appearanceFillToggle || 'surfacePrimary'
+    : fillToggle || appearanceFillToggle || 'surfacePrimary'
+
+  const {
+    handleToggleLayout,
+    handleTrackLayout,
+    toggleAnimatedStyle,
+    trackAnimatedStyle,
+  } = useSwitchAnimation({
+    activeTrackColor: resolveFillColor(activeTrackFillKey),
+    inactiveTrackColor: resolveFillColor(inactiveTrackFillKey),
+    isActive: isActive,
+  })
 
   return (
     <Pressable
@@ -94,16 +134,17 @@ function Switch(props: SwitchProps) {
       style={[
         styles.switch,
         align && styles[`switch_align_${align}`],
-        widthKey && tokens[`width_${widthKey}`],
-        style && style,
+        width && tokens[`width_${width}`],
+        style,
       ]}
-      onPress={onPress}
+      testID={dataTestId}
+      onPress={handlePress}
     >
       <View style={styles.switch__wrapper}>
         {title && (
           <Text
-            size={titleTextSize || appearanceConfig.titleTextSize}
-            textColor={titleTextColor || appearanceConfig.titleTextColor}
+            size={titleTextSize}
+            textColor={titleTextColor}
             style={align && styles[`switch__text_align_${align}`]}
           >
             {title}
@@ -111,31 +152,33 @@ function Switch(props: SwitchProps) {
         )}
         {desc && (
           <Text
-            size={descTextSize || appearanceConfig.descTextSize}
-            textColor={descTextColor || appearanceConfig.descTextColor}
+            size={descTextSize}
+            textColor={descTextColor}
             style={align && styles[`switch__text_align_${align}`]}
           >
             {desc}
           </Text>
         )}
       </View>
-      <View
+      <Animated.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,
+          borderColor && tokens[`border_color_${borderColor}`],
+          trackAnimatedStyle,
         ]}
+        onLayout={handleTrackLayout}
       >
-        <View
+        <Animated.View
           style={[
             styles.switch__toggle,
             sizeKey && styles[`switch__toggle_size_${sizeKey}`],
             toggleFillKey && tokens[`fill_${toggleFillKey}`],
+            toggleAnimatedStyle,
           ]}
+          onLayout={handleToggleLayout}
         />
-      </View>
+      </Animated.View>
     </Pressable>
   )
 }

package/src/components/{Segmented/stories/SegmentedIcon.stories.tsx → Switch/stories/Switch.stories.tsx}

@@ -1,24 +1,29 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { Segmented } from '../Segmented'
-import { segmentedIconMock, SegmentedStateful } from './SegmentedStories.config'
+import { Switch } from '../Switch'
+import type { SwitchProps } from '../Switch.interface'
+import { switchStoryParameters } from './SwitchStories.config'
 
 const meta = {
-  title: 'Atoms / Segmented / Icon',
-  component: Segmented,
+  title: 'Atoms / Switch / Switch',
+  component: Switch,
   args: {
-    appearance: 'defaultPrimary sizeL solid rounded',
-    activeSegment: segmentedIconMock[0],
-    segments: segmentedIconMock,
+    dataTestId: 'switchSwitchTestId',
+    defaultIsActive: true,
   },
-  render: (args) => <SegmentedStateful {...args} />,
-} satisfies Meta<typeof Segmented>
+  parameters: switchStoryParameters,
+} satisfies Meta<typeof Switch>
 
 export default meta
 
-type Story = StoryObj<typeof Segmented>
+type Story = StoryObj<typeof meta>
 
-export const Default: Story = {}
+export const Default: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL solid rounded',
+    defaultIsActive: false,
+  },
+}
 
 export const Error: Story = {
   args: {
@@ -38,9 +43,10 @@ export const Require: Story = {
   },
 }
 
-export const Disabled: Story = {
+export const Disable: Story = {
   args: {
     appearance: 'disabledPrimary sizeL solid rounded',
     isDisabled: true,
   },
+  render: (args: SwitchProps) => <Switch {...args} />,
 }

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

@@ -1,21 +1,22 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import { Switch } from '../Switch'
-import { SwitchStateful } from './SwitchStories.config'
+import { switchStoryParameters } from './SwitchStories.config'
 
 const meta = {
   title: 'Atoms / Switch / Default',
   component: Switch,
   args: {
+    dataTestId: 'switchDefaultTestId',
     title: 'Switch',
     desc: 'Description',
   },
-  render: (args) => <SwitchStateful {...args} />,
+  parameters: switchStoryParameters,
 } satisfies Meta<typeof Switch>
 
 export default meta
 
-type Story = StoryObj<typeof Switch>
+type Story = StoryObj<typeof meta>
 
 export const Left: Story = {
   args: {
@@ -33,7 +34,7 @@ export const Right: Story = {
 export const LeftChecked: Story = {
   args: {
     appearance: 'defaultPrimary sizeL solid rounded',
-    isActive: true,
+    defaultIsActive: true,
   },
 }
 
@@ -41,6 +42,6 @@ export const RightChecked: Story = {
   args: {
     appearance: 'defaultPrimary sizeL solid rounded',
     align: 'right',
-    isActive: true,
+    defaultIsActive: true,
   },
 }

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

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { createAppearanceOptions } from '../../../storybook'
+import { switchAppearanceShape } from '../appearance/switchShape'
+import { switchAppearanceSize } from '../appearance/switchSize'
+import { switchAppearanceStyle } from '../appearance/switchStyle'
+import { Switch } from '../Switch'
+import { switchAppearance } from '../Switch.appearance'
+import type { SwitchProps, SwitchStoryArgs } from '../Switch.interface'
+import { switchStoryParameters } from './SwitchStories.config'
+
+const { getAppearanceOptions } = createAppearanceOptions(switchAppearance, {
+  appearanceShape: switchAppearanceShape,
+  appearanceSize: switchAppearanceSize,
+  appearanceStyle: switchAppearanceStyle,
+})
+
+const meta = {
+  title: 'Atoms / Switch',
+  component: Switch,
+  args: {
+    title: 'Switch',
+    desc: 'Description',
+    appearanceShape: 'rounded',
+    appearanceSize: 'sizeM',
+    appearanceStyle: 'solid',
+    appearanceType: 'defaultPrimary',
+    defaultIsActive: true,
+  },
+  parameters: {
+    ...switchStoryParameters,
+    controls: {
+      include: [
+        'appearanceType',
+        'appearanceShape',
+        'appearanceSize',
+        'appearanceStyle',
+        'title',
+        'desc',
+        'defaultIsActive',
+      ],
+    },
+  },
+  argTypes: {
+    appearanceShape: {
+      control: 'radio',
+      options: getAppearanceOptions('appearanceShape'),
+    },
+    appearanceSize: {
+      control: 'radio',
+      options: getAppearanceOptions('appearanceSize'),
+    },
+    appearanceStyle: {
+      control: 'radio',
+      options: getAppearanceOptions('appearanceStyle'),
+    },
+    appearanceType: {
+      control: 'select',
+      options: getAppearanceOptions('appearance'),
+    },
+  },
+} satisfies Meta<SwitchStoryArgs>
+
+export default meta
+
+export const Demo: StoryObj<SwitchStoryArgs> = {
+  render: ({
+    appearanceShape,
+    appearanceSize,
+    appearanceStyle,
+    appearanceType,
+    ...rest
+  }) => (
+    <Switch
+      {...rest}
+      appearance={
+        `${appearanceType} ${appearanceSize} ${appearanceStyle} ${appearanceShape}` as SwitchProps['appearance']
+      }
+    />
+  ),
+}

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

@@ -1,31 +1,37 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import { Switch } from '../Switch'
+import type { SwitchProps } from '../Switch.interface'
+import { switchStoryParameters } from './SwitchStories.config'
 
 const meta = {
   title: 'Atoms / Switch / Disabled',
   component: Switch,
   args: {
+    dataTestId: 'switchDisabledTestId',
     title: 'Switch',
     desc: 'Description',
     isDisabled: true,
   },
+  parameters: switchStoryParameters,
 } satisfies Meta<typeof Switch>
 
 export default meta
 
-type Story = StoryObj<typeof Switch>
+type Story = StoryObj<typeof meta>
 
 export const Disabled: Story = {
   args: {
     appearance: 'disabledPrimary sizeL solid rounded',
   },
+  render: (args: SwitchProps) => <Switch {...args} />,
 }
 
 export const Left: Story = {
   args: {
     appearance: 'disabledPrimary sizeL solid rounded',
   },
+  render: (args: SwitchProps) => <Switch {...args} />,
 }
 
 export const Right: Story = {
@@ -33,6 +39,7 @@ export const Right: Story = {
     appearance: 'disabledPrimary sizeL solid rounded',
     align: 'right',
   },
+  render: (args: SwitchProps) => <Switch {...args} />,
 }
 
 export const LeftChecked: Story = {
@@ -40,6 +47,7 @@ export const LeftChecked: Story = {
     appearance: 'disabledPrimary sizeL solid rounded',
     isActive: true,
   },
+  render: (args: SwitchProps) => <Switch {...args} />,
 }
 
 export const RightChecked: Story = {
@@ -48,4 +56,5 @@ export const RightChecked: Story = {
     align: 'right',
     isActive: true,
   },
+  render: (args: SwitchProps) => <Switch {...args} />,
 }

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

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