@itcase/ui-react-native 1.10.85 → 1.10.87

package/src/components/Pressable/stories/PressableStyle.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Group } from '../../Group'
+import { Text } from '../../Text'
+import { Pressable } from '../Pressable'
+import { pressableStoryParameters } from './PressableStories.config'
+
+const meta = {
+  title: 'Atoms / Pressable / Style',
+  component: Pressable,
+  parameters: pressableStoryParameters,
+} satisfies Meta<typeof Pressable>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Solid: Story = {
+  args: {
+    appearance: 'surfaceSecondary solid rounded',
+  },
+  render: (args) => (
+    <Pressable {...args} onPress={() => undefined}>
+      <Text>Solid</Text>
+    </Pressable>
+  ),
+}
+
+export const Ghost: Story = {
+  args: {
+    appearance: 'surfacePrimary ghost rounded',
+  },
+  render: (args) => (
+    <Pressable {...args} onPress={() => undefined}>
+      <Text>Ghost</Text>
+    </Pressable>
+  ),
+}
+
+export const Outlined: Story = {
+  args: {
+    appearance: 'surfacePrimary outlined rounded',
+  },
+  render: (args) => (
+    <Pressable {...args} onPress={() => undefined}>
+      <Text>Outlined</Text>
+    </Pressable>
+  ),
+}
+
+export const All: Story = {
+  render: () => (
+    <Group direction="horizontal" gap={16}>
+      <Pressable
+        appearance="surfaceSecondary solid rounded"
+        onPress={() => undefined}
+      >
+        <Text>Solid</Text>
+      </Pressable>
+      <Pressable
+        appearance="surfacePrimary ghost rounded"
+        onPress={() => undefined}
+      >
+        <Text>Ghost</Text>
+      </Pressable>
+      <Pressable
+        appearance="surfacePrimary outlined rounded"
+        onPress={() => undefined}
+      >
+        <Text>Outlined</Text>
+      </Pressable>
+    </Group>
+  ),
+}

package/src/components/Pressable/styles/pressable.ts

@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native'
+
+const pressableStyles = StyleSheet.create({
+  pressable: {
+    display: 'flex',
+  },
+})
+
+export { pressableStyles }

package/src/components/Radio/Radio.interface.ts

@@ -10,7 +10,7 @@ import type {
   AppearanceStyleKey,
   BorderColorActiveProps,
   BorderColorProps,
-  CompositeAppearanceKeys,
+  CompositeAppearanceStateDefault,
   FillActiveProps,
   FillProps,
   ShapeProps,
@@ -19,6 +19,7 @@ import type {
   TextWeightProps,
 } from '@itcase/types-ui'
 
+import type { ComponentGalleryArgs } from '../../storybook'
 import type { radioSizePropsType } from './styles/radioSize'
 
 interface RadioAppearanceProps {
@@ -39,19 +40,6 @@ interface RadioAppearanceProps {
   size?: radioSizePropsType
 }
 
-type RadioAppearanceKey = AppearanceKeysState | CompositeAppearanceKeys
-type RadioConfig = AppearanceConfig<AppearanceKeysState, RadioAppearanceProps>
-type RadioAppearance = RadioConfig['appearance']
-type RadioAppearanceStyle = AppearanceRecord<
-  AppearanceStyleKey,
-  RadioAppearanceProps,
-  'borderColor' | 'borderRadioColor' | 'borderRadioColorActive' | 'fill'
->
-type RadioAppearanceShape = AppearancePartialRecord<
-  AppearanceShapeKey,
-  RadioAppearanceProps,
-  'shape'
->
 type RadioAppearanceSize = AppearancePartialRecord<
   AppearanceSizeKey,
   RadioAppearanceProps,
@@ -63,14 +51,37 @@ interface RadioProps extends RadioAppearanceProps {
   isChecked?: boolean
   isDisabled?: boolean
   onPress?: (event: GestureResponderEvent) => void
-  appearance?: RadioAppearanceKey
-  appearanceStyle?: AppearanceStyleKey
+  appearance?: CompositeAppearanceStateDefault
   checked?: boolean
   desc?: string
   label?: string
   style?: StyleProp<ViewStyle>
 }
 
+type RadioConfig = AppearanceConfig<AppearanceKeysState, RadioAppearanceProps>
+type RadioAppearance = RadioConfig['appearance']
+type RadioAppearanceStyle = AppearanceRecord<
+  AppearanceStyleKey,
+  RadioAppearanceProps,
+  'borderColor' | 'borderRadioColor' | 'borderRadioColorActive' | 'fill'
+>
+type RadioAppearanceShape = AppearancePartialRecord<
+  AppearanceShapeKey,
+  RadioAppearanceProps,
+  'shape'
+>
+type RadioAppearanceKey = NonNullable<RadioProps['appearance']>
+
+type RadioGalleryStory = ComponentGalleryArgs &
+  Pick<RadioProps, 'checked' | 'desc' | 'isDisabled' | 'label'>
+
+type RadioStoryArgs = Omit<RadioProps, 'appearance'> & {
+  appearanceShape: string
+  appearanceSize: string
+  appearanceStyle: string
+  appearanceType: string
+}
+
 export type {
   RadioAppearance,
   RadioAppearanceKey,
@@ -79,5 +90,7 @@ export type {
   RadioAppearanceSize,
   RadioAppearanceStyle,
   RadioConfig,
+  RadioGalleryStory,
   RadioProps,
+  RadioStoryArgs,
 }

package/src/components/Radio/Radio.tsx

@@ -1,21 +1,16 @@
-import { useMemo } from 'react'
 import { Pressable, View } from 'react-native'
 
+import {
+  useAppearanceConfig,
+  useDevicePropsGenerator,
+} from '@itcase/ui-core/hooks'
+
 import { tokens } from '../../styles/tokens'
 import { Text } from '../Text'
 import { radioAppearance } from './Radio.appearance'
-import type {
-  RadioAppearanceProps,
-  RadioConfig,
-  RadioProps,
-} from './Radio.interface'
+import type { RadioConfig, RadioProps } from './Radio.interface'
 import { styles } from './Radio.styles'
 
-const DEFAULT_RADIO_APPEARANCE = 'defaultPrimary'
-const DEFAULT_RADIO_APPEARANCE_STYLE = 'solid'
-const DEFAULT_RADIO_SIZE = 'm'
-const DEFAULT_RADIO_SHAPE = 'circular'
-
 const radioConfig: RadioConfig = {
   appearance: {},
   setAppearance: (newComponent) => {
@@ -27,96 +22,63 @@ radioConfig.setAppearance(radioAppearance)
 
 function Radio(props: RadioProps) {
   const {
+    appearance = 'defaultPrimary sizeM solid rounded',
+    label,
+    desc,
+    checked,
+    style,
+    isActive,
+    isChecked,
+    isDisabled,
+    onPress,
+  } = props
+
+  const isSelected = Boolean(checked || isActive || isChecked)
+
+  const appearanceConfig = useAppearanceConfig(
     appearance,
+    radioConfig,
+    isDisabled,
+  )
+  const propsGenerator = useDevicePropsGenerator(props, appearanceConfig)
+
+  const {
     size,
     fill,
     fillCheckmark,
     fillRadio,
     fillRadioActive,
-    label,
     labelTextColor,
     labelTextSize,
     labelTextWeight,
-    desc,
     descTextColor,
     descTextSize,
     descTextWeight,
     borderColor,
     borderRadioColor,
     borderRadioColorActive,
-    appearanceStyle,
-    checked,
     shape,
-    style,
-    isActive,
-    isChecked,
-    isDisabled,
-    onPress,
-  } = props
+  } = propsGenerator
 
-  const appearanceConfig = useMemo(() => {
-    const appearanceTokens = (appearance || DEFAULT_RADIO_APPEARANCE).split(' ')
-    const isCompositeAppearance = appearanceTokens.length > 1
-    const sizeAppearanceKey = size && `size${size.toUpperCase()}`
-    const appearanceKeys = isCompositeAppearance
-      ? appearanceTokens
-      : [
-          ...appearanceTokens,
-          appearanceStyle || DEFAULT_RADIO_APPEARANCE_STYLE,
-          sizeAppearanceKey,
-          shape,
-        ]
-
-    return appearanceKeys.reduce<RadioAppearanceProps>(
-      (resultConfig, appearanceKey) => {
-        return Object.assign(
-          resultConfig,
-          appearanceKey &&
-            radioConfig.appearance?.[
-              appearanceKey as keyof NonNullable<typeof radioConfig.appearance>
-            ],
-        )
-      },
-      {},
-    )
-  }, [appearance, appearanceStyle, shape, size])
-
-  const isSelected = Boolean(checked || isActive || isChecked)
-  const sizeKey = size || appearanceConfig.size || DEFAULT_RADIO_SIZE
-  const shapeKey = shape || appearanceConfig.shape || DEFAULT_RADIO_SHAPE
-  const fillKey = fill || appearanceConfig.fill
-  const radioFillKey = isSelected
-    ? fillRadioActive || appearanceConfig.fillRadioActive
-    : fillRadio || appearanceConfig.fillRadio
+  const radioFillKey = isSelected ? fillRadioActive : fillRadio
   const radioBorderKey = isSelected
-    ? borderRadioColorActive || appearanceConfig.borderRadioColorActive
-    : borderRadioColor ||
-      appearanceConfig.borderRadioColor ||
-      borderColor ||
-      appearanceConfig.borderColor
-  const checkmarkFillKey =
-    fillCheckmark || appearanceConfig.fillCheckmark || 'surfaceQuaternary'
+    ? borderRadioColorActive
+    : borderRadioColor || borderColor
+  const checkmarkFillKey = fillCheckmark || 'surfaceQuaternary'
 
   return (
     <Pressable
       disabled={isDisabled}
-      style={[
-        styles.radio,
-        fillKey && tokens[`fill_${fillKey}`],
-        style && style,
-      ]}
+      style={[styles.radio, fill && tokens[`fill_${fill}`], style]}
       onPress={onPress}
     >
       <View
-        style={[
-          styles.radio__item,
-          sizeKey && styles[`radio__item_size_${sizeKey}`],
-        ]}
+        style={[styles.radio__item, size && styles[`radio__item_size_${size}`]]}
       >
         <View
           style={[
             styles.radio__state,
-            shapeKey && styles[`radio_shape_${shapeKey}`],
+            shape && styles[`radio_shape_${shape}`],
             radioFillKey && tokens[`fill_${radioFillKey}`],
             radioBorderKey && tokens[`border_color_${radioBorderKey}`],
           ]}
@@ -134,18 +96,20 @@ function Radio(props: RadioProps) {
         <View style={styles.radio__text}>
           {label && (
             <Text
-              size={labelTextSize || appearanceConfig.labelTextSize}
-              textColor={labelTextColor || appearanceConfig.labelTextColor}
-              weight={labelTextWeight || appearanceConfig.labelTextWeight}
+              size={labelTextSize}
+              textColor={labelTextColor}
+              weight={labelTextWeight}
+              isDisabled={isDisabled}
             >
               {label}
             </Text>
           )}
           {desc && (
             <Text
-              size={descTextSize || appearanceConfig.descTextSize}
-              textColor={descTextColor || appearanceConfig.descTextColor}
-              weight={descTextWeight || appearanceConfig.descTextWeight}
+              size={descTextSize}
+              textColor={descTextColor}
+              weight={descTextWeight}
+              isDisabled={isDisabled}
             >
               {desc}
             </Text>

package/src/components/Radio/stories/RadioDefault.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import { Radio } from '../Radio'
+import type { RadioProps } from '../Radio.interface'
+import { radioStoryParameters } from './RadioStories.config'
 
 const meta = {
   title: 'Atoms / Radio / Default',
@@ -11,16 +13,23 @@ const meta = {
     desc: 'Description',
     shape: 'circular',
   },
+  parameters: radioStoryParameters,
 } satisfies Meta<typeof Radio>
-
 export default meta
 
-type Story = StoryObj<typeof Radio>
+type Story = StoryObj<typeof meta>
 
-export const Default: Story = {}
+export const Default: Story = {
+  render: (args: RadioProps) => {
+    return <Radio {...args} />
+  },
+}
 
 export const Checked: Story = {
   args: {
-    isChecked: true,
+    checked: true,
+  },
+  render: (args: RadioProps) => {
+    return <Radio {...args} />
   },
 }

package/src/components/Radio/stories/RadioDemo.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { createAppearanceOptions } from '../../../storybook'
+import { radioAppearanceShape } from '../appearance/radioShape'
+import { radioAppearanceSize } from '../appearance/radioSize'
+import { radioAppearanceStyle } from '../appearance/radioStyle'
+import { Radio } from '../Radio'
+import { radioAppearance } from '../Radio.appearance'
+import type { RadioProps, RadioStoryArgs } from '../Radio.interface'
+import { radioStoryParameters } from './RadioStories.config'
+
+const { getAppearanceOptions } = createAppearanceOptions(radioAppearance, {
+  appearanceShape: radioAppearanceShape,
+  appearanceSize: radioAppearanceSize,
+  appearanceStyle: radioAppearanceStyle,
+})
+
+const meta = {
+  title: 'Atoms / Radio',
+  component: Radio,
+  args: {
+    label: 'Radio',
+    appearanceShape: 'circular',
+    appearanceSize: 'sizeM',
+    appearanceStyle: 'solid',
+    appearanceType: 'defaultPrimary',
+  },
+  parameters: {
+    ...radioStoryParameters,
+    controls: {
+      include: [
+        'appearanceType',
+        'appearanceSize',
+        'appearanceStyle',
+        'appearanceShape',
+      ],
+    },
+  },
+  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<RadioStoryArgs>
+
+export default meta
+
+export const Demo: StoryObj<RadioStoryArgs> = {
+  render: ({
+    appearanceShape,
+    appearanceSize,
+    appearanceStyle,
+    appearanceType,
+    ...rest
+  }) => (
+    <Radio
+      {...rest}
+      appearance={
+        `${appearanceType} ${appearanceSize} ${appearanceStyle} ${appearanceShape}` as RadioProps['appearance']
+      }
+    />
+  ),
+}

package/src/components/Radio/stories/RadioDisabled.stories.tsx

@@ -16,7 +16,7 @@ const meta = {
 
 export default meta
 
-type Story = StoryObj<typeof Radio>
+type Story = StoryObj<typeof meta>
 
 export const Default: Story = {}
 

package/src/components/Radio/stories/RadioError.stories.tsx

@@ -15,7 +15,7 @@ const meta = {
 
 export default meta
 
-type Story = StoryObj<typeof Radio>
+type Story = StoryObj<typeof meta>
 
 export const Default: Story = {}
 

package/src/components/Radio/stories/RadioGallery.stories.tsx

@@ -0,0 +1,116 @@
+/* eslint-disable perfectionist/sort-objects */
+import { useState } from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Radio } from '../Radio'
+import type { RadioGalleryStory, RadioProps } from '../Radio.interface'
+import { radioGallery, radioStoryParameters } from './RadioStories.config'
+
+const meta = {
+  title: 'Atoms / Radio',
+  args: {
+    appearance: 'default',
+    tier: 'Primary',
+    style: 'solid',
+    shape: 'circular',
+    label: 'Radio',
+    desc: 'Description',
+    checked: true,
+    isDisabled: false,
+  },
+  parameters: radioStoryParameters,
+  argTypes: {
+    appearance: radioGallery.argTypes.appearance,
+    tier: radioGallery.argTypes.tier,
+    style: radioGallery.argTypes.style,
+    shape: radioGallery.argTypes.shape,
+  },
+} satisfies Meta<RadioGalleryStory>
+
+export default meta
+
+type Story = StoryObj<RadioGalleryStory>
+
+type RadioDemoItemProps = Pick<
+  RadioProps,
+  'appearance' | 'checked' | 'desc' | 'isDisabled' | 'label'
+>
+
+function RadioDemoItem(props: RadioDemoItemProps) {
+  const { appearance, checked = false, desc, isDisabled, label } = props
+  const [isChecked, setChecked] = useState(checked)
+
+  return (
+    <Radio
+      appearance={appearance}
+      label={label}
+      desc={desc || undefined}
+      checked={isChecked}
+      isDisabled={isDisabled}
+      onPress={() => {
+        setChecked((prev) => !prev)
+      }}
+    />
+  )
+}
+
+const renderRadioGallery = (
+  args: RadioGalleryStory,
+  options: {
+    desc?: RadioGalleryStory['desc']
+    label?: RadioGalleryStory['label']
+  } = {},
+) =>
+  radioGallery.render(args, ({ appearance, args: storyArgs, sizeKey }) => (
+    <RadioDemoItem
+      appearance={appearance}
+      key={`${sizeKey}-${storyArgs.checked}`}
+      label={options.label !== undefined ? options.label : storyArgs.label}
+      desc={options.desc !== undefined ? options.desc : storyArgs.desc}
+      checked={storyArgs.checked}
+      isDisabled={storyArgs.isDisabled}
+    />
+  ))
+
+export const RadioOnly: Story = {
+  name: 'Radio',
+  args: {
+    label: undefined,
+    desc: undefined,
+    checked: true,
+  },
+  render: (args) =>
+    renderRadioGallery(args, {
+      label: undefined,
+      desc: undefined,
+    }),
+}
+
+export const Label: Story = {
+  name: 'Radio + Label',
+  args: {
+    label: 'Radio',
+    desc: undefined,
+    checked: true,
+  },
+  render: (args) =>
+    renderRadioGallery(args, {
+      label: args.label,
+      desc: undefined,
+    }),
+}
+
+export const LabelDesc: Story = {
+  name: 'Radio + Label + Desc',
+  args: {
+    label: 'Radio',
+    desc: 'Description',
+    checked: true,
+  },
+  render: (args) =>
+    renderRadioGallery(args, {
+      label: args.label,
+      desc: args.desc,
+    }),
+}

package/src/components/Radio/stories/RadioRequire.stories.tsx

@@ -15,7 +15,7 @@ const meta = {
 
 export default meta
 
-type Story = StoryObj<typeof Radio>
+type Story = StoryObj<typeof meta>
 
 export const Default: Story = {}
 

package/src/components/Radio/stories/RadioSize.stories.tsx

@@ -15,7 +15,7 @@ const meta = {
 
 export default meta
 
-type Story = StoryObj<typeof Radio>
+type Story = StoryObj<typeof meta>
 
 export const SizeM: Story = {
   args: {

package/src/components/Radio/stories/RadioState.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Radio } from '../Radio'
+import type { RadioProps } from '../Radio.interface'
+import { radioStoryParameters } from './RadioStories.config'
+
+const meta = {
+  title: 'Atoms / Radio / State',
+  component: Radio,
+  args: {
+    appearance: 'defaultPrimary sizeM solid rounded',
+    label: 'Radio',
+    desc: 'Description',
+    shape: 'circular',
+  },
+  parameters: radioStoryParameters,
+} satisfies Meta<typeof Radio>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Checked: Story = {
+  args: {
+    checked: true,
+  },
+  render: (args: RadioProps) => {
+    return <Radio {...args} />
+  },
+}
+
+export const Unchecked: Story = {
+  render: (args: RadioProps) => {
+    return <Radio {...args} />
+  },
+}

package/src/components/Radio/stories/RadioStories.config.ts

@@ -0,0 +1,45 @@
+/* eslint-disable perfectionist/sort-objects */
+import { createComponentGallery } from '../../../storybook'
+import { radioAppearanceDefault } from '../appearance/radioDefault'
+import { radioAppearanceDisabled } from '../appearance/radioDisabled'
+import { radioAppearanceError } from '../appearance/radioError'
+import { radioAppearanceRequire } from '../appearance/radioRequire'
+import { radioAppearanceShape } from '../appearance/radioShape'
+import { radioAppearanceSize } from '../appearance/radioSize'
+import { radioAppearanceStyle } from '../appearance/radioStyle'
+import { radioAppearanceSuccess } from '../appearance/radioSuccess'
+import type { RadioAppearanceKey } from '../Radio.interface'
+
+const RADIO_APPEARANCE_GROUPS = [
+  'error',
+  'success',
+  'disabled',
+  'default',
+  'require',
+] as const
+
+const radioStoryParameters = {
+  layout: 'centered' as const,
+}
+
+const radioGallery = createComponentGallery<RadioAppearanceKey>({
+  size: radioAppearanceSize,
+  appearanceGroups: {
+    error: radioAppearanceError,
+    success: radioAppearanceSuccess,
+    disabled: radioAppearanceDisabled,
+    default: radioAppearanceDefault,
+    require: radioAppearanceRequire,
+  },
+  shape: radioAppearanceShape,
+  style: radioAppearanceStyle,
+})
+
+export {
+  RADIO_APPEARANCE_GROUPS,
+  radioAppearanceShape,
+  radioAppearanceSize,
+  radioAppearanceStyle,
+  radioGallery,
+  radioStoryParameters,
+}