@itcase/ui-react-native 1.10.85 → 1.10.87

package/src/components/Input/Input.tsx

@@ -1,19 +1,18 @@
 import { useMemo } from 'react'
 import { TextInput, View } from 'react-native'
 
+import {
+  useAppearanceConfig,
+  useDevicePropsGenerator,
+} from '@itcase/ui-core/hooks'
+import { mergeAppearanceKeys } from '@itcase/ui-core/utils'
+
 import { tokens } from '../../styles/tokens'
+import { colorTheme } from '../../utils'
 import { inputAppearance } from './Input.appearance'
-import type {
-  InputAppearanceProps,
-  InputConfig,
-  InputProps,
-} from './Input.interface'
+import type { InputConfig, InputProps } from './Input.interface'
 import { styles } from './Input.styles'
 
-const DEFAULT_INPUT_APPEARANCE = 'defaultPrimary'
-const DEFAULT_INPUT_APPEARANCE_STYLE = 'solid'
-const DEFAULT_INPUT_SIZE = 'm'
-
 const inputConfig: InputConfig = {
   appearance: {},
   setAppearance: (newComponent) => {
@@ -23,50 +22,11 @@ const inputConfig: InputConfig = {
 
 inputConfig.setAppearance(inputAppearance)
 
-function getTokenTextColor(textColorKey?: InputAppearanceProps['textColor']) {
-  if (!textColorKey) {
-    return undefined
-  }
-
-  const colorStyle = tokens[`text_color_${textColorKey}`]
-
-  if (colorStyle && 'color' in colorStyle) {
-    return colorStyle.color
-  }
-
-  return undefined
-}
-
-function getTokenFillColor(fillKey?: InputAppearanceProps['caret']) {
-  if (!fillKey) {
-    return undefined
-  }
-
-  const fillStyle = tokens[`fill_${fillKey}`]
-
-  if (fillStyle && 'backgroundColor' in fillStyle) {
-    return fillStyle.backgroundColor
-  }
-
-  return undefined
-}
-
 function Input(props: InputProps) {
   const {
-    appearance,
-    width,
+    appearance = 'defaultPrimary sizeXL solid rounded',
     maxLength,
-    size,
-    fill,
-    borderColor,
-    textColor,
-    textSize,
-    textWeight,
-    appearanceStyle,
-    caret,
     placeholder,
-    placeholderTextColor,
-    shape,
     style,
     value,
     before,
@@ -80,69 +40,63 @@ function Input(props: InputProps) {
     onSubmitEditing,
   } = props
 
-  const appearanceConfig = useMemo(() => {
-    const appearanceTokens = (appearance || DEFAULT_INPUT_APPEARANCE).split(' ')
-    const isCompositeAppearance = appearanceTokens.length > 1
-    const appearanceKeyList = isCompositeAppearance
-      ? [...appearanceTokens]
-      : [...appearanceTokens, appearanceStyle || DEFAULT_INPUT_APPEARANCE_STYLE]
-
+  const resolvedAppearance = useMemo(() => {
     if (isError) {
-      appearanceKeyList.push('errorPrimary')
+      return mergeAppearanceKeys(appearance, 'errorPrimary')
     }
 
-    if (isDisabled) {
-      appearanceKeyList.push('disabledPrimary')
-    }
+    return appearance
+  }, [appearance, isError])
 
-    return appearanceKeyList.reduce<InputAppearanceProps>(
-      (resultConfig, appearanceKey) => {
-        return Object.assign(
-          resultConfig,
-          inputConfig.appearance?.[appearanceKey],
-        )
-      },
-      {},
-    )
-  }, [appearance, appearanceStyle, isDisabled, isError])
+  const appearanceConfig = useAppearanceConfig(
+    resolvedAppearance,
+    inputConfig,
+    isDisabled,
+  )
+  const propsGenerator = useDevicePropsGenerator(props, appearanceConfig)
+
+  const {
+    width,
+    size,
+    fill,
+    borderColor,
+    textColor,
+    textSize,
+    textWeight,
+    caret,
+    placeholderTextColor,
+    shape,
+  } = propsGenerator
 
-  const fillKey = fill || appearanceConfig.fill
-  const borderColorKey = borderColor || appearanceConfig.borderColor
-  const textColorKey = textColor || appearanceConfig.textColor
-  const textSizeKey = textSize || appearanceConfig.textSize
-  const textWeightKey = textWeight || appearanceConfig.textWeight
-  const placeholderTextColorKey =
-    placeholderTextColor || appearanceConfig.placeholderTextColor
-  const caretKey = caret || appearanceConfig.caret
-  const shapeKey = shape || appearanceConfig.shape
-  const sizeKey = size || appearanceConfig.size || DEFAULT_INPUT_SIZE
-  const widthKey = width || appearanceConfig.width
+  const caretColor = caret ? colorTheme[caret] : undefined
 
   return (
     <View
       style={[
         styles.input,
-        fillKey && tokens[`fill_${fillKey}`],
-        borderColorKey && tokens[`border_color_${borderColorKey}`],
-        shapeKey && styles[`input_shape_${shapeKey}`],
-        sizeKey && styles[`input_size_${sizeKey}`],
-        widthKey && tokens[`width_${widthKey}`],
+        fill && tokens[`fill_${fill}`],
+        borderColor && tokens[`border_color_${borderColor}`],
+        shape && styles[`input_shape_${shape}`],
+        size && styles[`input_size_${size}`],
+        width && tokens[`width_${width}`],
         style,
       ]}
     >
       {before && <View style={styles.input__before}>{before}</View>}
       <TextInput
         maxLength={maxLength}
-        cursorColor={getTokenFillColor(caretKey)}
+        cursorColor={caretColor}
         editable={!(isDisabled || isReadOnly)}
         placeholder={placeholder}
-        placeholderTextColor={getTokenTextColor(placeholderTextColorKey)}
-        selectionColor={getTokenFillColor(caretKey)}
+        placeholderTextColor={
+          placeholderTextColor ? colorTheme[placeholderTextColor] : undefined
+        }
+        selectionColor={caretColor}
         style={[
           styles.input__field,
-          textColorKey && tokens[`text_color_${textColorKey}`],
-          textSizeKey && tokens[`text_size_${textSizeKey}`],
-          textWeightKey && tokens[`text_weight_${textWeightKey}`],
+          textColor && tokens[`text_color_${textColor}`],
+          textSize && tokens[`text_size_${textSize}`],
+          textWeight && tokens[`text_weight_${textWeight}`],
         ]}
         underlineColorAndroid="transparent"
         value={value}

package/src/components/Input/stories/InputDefault.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import { Input } from '../Input'
+import type { InputProps } from '../Input.interface'
+import { inputStoryParameters } from './InputStories.config'
 
 const meta = {
   title: 'Atoms / Input / Default',
@@ -8,24 +10,31 @@ const meta = {
   args: {
     appearance: 'defaultPrimary sizeXL solid rounded',
     placeholder: 'Placeholder',
-    style: { width: 240 },
   },
+  parameters: inputStoryParameters,
 } satisfies Meta<typeof Input>
 
 export default meta
 
-type Story = StoryObj<typeof Input>
+type Story = StoryObj<typeof meta>
 
-export const Placeholder: Story = {}
+export const Placeholder: Story = {
+  render: (args: InputProps) => {
+    return <Input {...args} />
+  },
+}
 
 export const Filled: Story = {
   args: {
     value: 'text value',
   },
+  render: (args: InputProps) => {
+    return <Input {...args} />
+  },
 }
 
 export const Blank: Story = {
-  args: {
-    placeholder: undefined,
+  render: (args: InputProps) => {
+    return <Input {...args} />
   },
 }

package/src/components/Input/stories/InputDemo.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { createAppearanceOptions } from '../../../storybook'
+import { inputAppearanceShape } from '../appearance/inputShape'
+import { inputAppearanceSize } from '../appearance/inputSize'
+import { inputAppearanceStyle } from '../appearance/inputStyle'
+import { Input } from '../Input'
+import { inputAppearance } from '../Input.appearance'
+import type { InputProps, InputStoryArgs } from '../Input.interface'
+import { ControlledInput, inputStoryParameters } from './InputStories.config'
+
+const { getAppearanceOptions } = createAppearanceOptions(inputAppearance, {
+  appearanceShape: inputAppearanceShape,
+  appearanceSize: inputAppearanceSize,
+  appearanceStyle: inputAppearanceStyle,
+})
+
+const meta = {
+  title: 'Atoms / Input',
+  component: Input,
+  args: {
+    appearanceShape: 'rounded',
+    appearanceSize: 'sizeM',
+    appearanceStyle: 'solid',
+    appearanceType: 'defaultPrimary',
+    placeholder: 'Placeholder',
+    value: '',
+  },
+  parameters: {
+    ...inputStoryParameters,
+    controls: {
+      include: [
+        'appearanceType',
+        'appearanceShape',
+        'appearanceSize',
+        'appearanceStyle',
+        'placeholder',
+        'value',
+        'isDisabled',
+      ],
+    },
+  },
+  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<InputStoryArgs>
+export default meta
+
+export const Demo: StoryObj<InputStoryArgs> = {
+  render: ({
+    appearanceShape,
+    appearanceSize,
+    appearanceStyle,
+    appearanceType,
+    ...rest
+  }) => (
+    <ControlledInput
+      {...rest}
+      appearance={
+        `${appearanceType} ${appearanceSize} ${appearanceStyle} ${appearanceShape}` as InputProps['appearance']
+      }
+    />
+  ),
+}

package/src/components/Input/stories/InputDisabled.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import { Input } from '../Input'
+import type { InputProps } from '../Input.interface'
+import { inputStoryParameters } from './InputStories.config'
 
 const meta = {
   title: 'Atoms / Input / Disabled',
@@ -8,27 +10,36 @@ const meta = {
   args: {
     appearance: 'disabledPrimary sizeXL solid rounded',
     placeholder: 'Placeholder',
-    style: { width: 240 },
     isDisabled: true,
   },
+  parameters: inputStoryParameters,
 } satisfies Meta<typeof Input>
 
 export default meta
 
-type Story = StoryObj<typeof Input>
+type Story = StoryObj<typeof meta>
 
-export const Disabled: Story = {}
+export const Disabled: Story = {
+  render: (args: InputProps) => <Input {...args} />,
+}
 
-export const Placeholder: Story = {}
+export const Placeholder: Story = {
+  render: (args: InputProps) => {
+    return <Input {...args} />
+  },
+}
 
 export const Filled: Story = {
   args: {
     value: 'text value',
   },
+  render: (args: InputProps) => {
+    return <Input {...args} />
+  },
 }
 
 export const Blank: Story = {
-  args: {
-    placeholder: undefined,
+  render: (args: InputProps) => {
+    return <Input {...args} />
   },
 }

package/src/components/Input/stories/InputError.stories.tsx

@@ -1,30 +1,45 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import { Input } from '../Input'
+import type { InputProps } from '../Input.interface'
 
 const meta = {
   title: 'Atoms / Input / Error',
   component: Input,
   args: {
     appearance: 'errorPrimary sizeXL solid rounded',
-    style: { width: 240 },
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/HmHn0BShJPXHU8SmuIP71M/ITCase---Atoms?node-id=31-134951',
+    },
   },
 } satisfies Meta<typeof Input>
-
 export default meta
 
-type Story = StoryObj<typeof Input>
+type Story = StoryObj<typeof meta>
 
 export const Placeholder: Story = {
   args: {
     placeholder: 'Placeholder',
   },
+  render: (args: InputProps) => {
+    return <Input {...args} />
+  },
 }
 
 export const Filled: Story = {
   args: {
     value: 'text value',
   },
+  render: (args: InputProps) => {
+    return <Input {...args} />
+  },
 }
 
-export const Blank: Story = {}
+export const Blank: Story = {
+  render: (args: InputProps) => {
+    return <Input {...args} />
+  },
+}

package/src/components/Input/stories/InputGallery.stories.tsx

@@ -0,0 +1,80 @@
+/* eslint-disable perfectionist/sort-objects */
+import type { Meta, StoryObj } from '@storybook/react'
+
+import type { InputGalleryStory } from '../Input.interface'
+import {
+  ControlledInput,
+  inputGallery,
+  inputStoryParameters,
+} from './InputStories.config'
+
+const meta = {
+  title: 'Atoms / Input',
+  args: {
+    appearance: 'default',
+    tier: 'Primary',
+    style: 'solid',
+    shape: 'rounded',
+    placeholder: 'Placeholder',
+    value: '',
+    isDisabled: false,
+  },
+  parameters: inputStoryParameters,
+  argTypes: {
+    appearance: inputGallery.argTypes.appearance,
+    tier: inputGallery.argTypes.tier,
+    style: inputGallery.argTypes.style,
+    shape: inputGallery.argTypes.shape,
+  },
+} satisfies Meta<InputGalleryStory>
+
+export default meta
+
+type Story = StoryObj<InputGalleryStory>
+
+const renderInputGallery = (
+  args: InputGalleryStory,
+  options: {
+    placeholder?: InputGalleryStory['placeholder']
+    value?: InputGalleryStory['value']
+  } = {},
+) =>
+  inputGallery.render(args, ({ appearance, args: storyArgs, sizeKey }) => (
+    <ControlledInput
+      appearance={appearance}
+      key={`${sizeKey}-${options.value}-${options.placeholder}`}
+      placeholder={
+        options.placeholder !== undefined
+          ? options.placeholder
+          : storyArgs.placeholder
+      }
+      value={options.value !== undefined ? options.value : storyArgs.value}
+      isDisabled={storyArgs.isDisabled}
+    />
+  ))
+
+export const Placeholder: Story = {
+  name: 'Placeholder',
+  args: {
+    placeholder: 'Placeholder',
+    value: '',
+  },
+  render: (args) =>
+    renderInputGallery(args, {
+      placeholder: args.placeholder,
+      value: '',
+    }),
+}
+
+export const Filled: Story = {
+  name: 'Filled',
+  args: {
+    placeholder: 'Placeholder',
+    value: 'Value',
+  },
+  render: (args) =>
+    renderInputGallery(args, {
+      placeholder: args.placeholder,
+      value: args.value,
+    }),
+}

package/src/components/Input/stories/InputReadonly.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import { Input } from '../Input'
+import type { InputProps } from '../Input.interface'
+import { inputStoryParameters } from './InputStories.config'
 
 const meta = {
   title: 'Atoms / Input / Readonly',
@@ -8,14 +10,16 @@ const meta = {
   args: {
     appearance: 'defaultPrimary sizeXL solid rounded',
     placeholder: 'Placeholder',
-    style: { width: 240 },
     value: 'Initial Value',
     isReadOnly: true,
   },
+  parameters: inputStoryParameters,
 } satisfies Meta<typeof Input>
 
 export default meta
 
-type Story = StoryObj<typeof Input>
+type Story = StoryObj<typeof meta>
 
-export const Readonly: Story = {}
+export const Readonly: Story = {
+  render: (args: InputProps) => <Input {...args} />,
+}

package/src/components/Input/stories/InputRequire.stories.tsx

@@ -1,30 +1,44 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import { Input } from '../Input'
+import type { InputProps } from '../Input.interface'
 
 const meta = {
   title: 'Atoms / Input / Require',
   component: Input,
   args: {
     appearance: 'requirePrimary sizeXL solid rounded',
-    style: { width: 240 },
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/HmHn0BShJPXHU8SmuIP71M/ITCase---Atoms?node-id=31-134951',
+    },
   },
 } satisfies Meta<typeof Input>
-
 export default meta
 
-type Story = StoryObj<typeof Input>
+type Story = StoryObj<typeof meta>
 
 export const Placeholder: Story = {
   args: {
     placeholder: 'Placeholder',
   },
+  render: (args: InputProps) => {
+    return <Input {...args} />
+  },
 }
 
 export const Filled: Story = {
   args: {
     value: 'text value',
   },
+  render: (args: InputProps) => {
+    return <Input {...args} />
+  },
+}
+export const Blank: Story = {
+  render: (args: InputProps) => {
+    return <Input {...args} />
+  },
 }
-
-export const Blank: Story = {}

package/src/components/Input/stories/InputShape.stories.tsx

@@ -1,52 +1,71 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import { Input } from '../Input'
+import type { InputProps } from '../Input.interface'
+import { inputStoryParameters } from './InputStories.config'
 
 const meta = {
   title: 'Atoms / Input / Shape',
   component: Input,
   args: {
     placeholder: 'Placeholder',
-    style: { width: 240 },
   },
+  parameters: inputStoryParameters,
 } satisfies Meta<typeof Input>
-
 export default meta
 
-type Story = StoryObj<typeof Input>
+type Story = StoryObj<typeof meta>
 
 export const Rounded: Story = {
   args: {
     appearance: 'defaultPrimary sizeXL solid rounded',
   },
+  render: (args: InputProps) => {
+    return <Input {...args} />
+  },
 }
 
 export const RoundedS: Story = {
   args: {
     appearance: 'defaultPrimary sizeXL solid roundedS',
   },
+  render: (args: InputProps) => {
+    return <Input {...args} />
+  },
 }
 
 export const RoundedM: Story = {
   args: {
     appearance: 'defaultPrimary sizeXL solid roundedM',
   },
+  render: (args: InputProps) => {
+    return <Input {...args} />
+  },
 }
 
 export const RoundedL: Story = {
   args: {
     appearance: 'defaultPrimary sizeXL solid roundedL',
   },
+  render: (args: InputProps) => {
+    return <Input {...args} />
+  },
 }
 
 export const RoundedXL: Story = {
   args: {
     appearance: 'defaultPrimary sizeXL solid roundedXL',
   },
+  render: (args: InputProps) => {
+    return <Input {...args} />
+  },
 }
 
 export const Circular: Story = {
   args: {
     appearance: 'defaultPrimary sizeXL solid circular',
   },
+  render: (args: InputProps) => {
+    return <Input {...args} />
+  },
 }