@itcase/ui-react-native 1.10.85 → 1.10.87

package/src/components/Code/appearance/codeShape.ts

@@ -1,4 +1,4 @@
-import type { CodeAppearance } from '../Code.interface'
+import type { CodeAppearanceShape } from '../Code.interface'
 
 const codeAppearanceShape = {
   circular: {
@@ -7,9 +7,21 @@ const codeAppearanceShape = {
   rounded: {
     shape: 'rounded',
   },
+  roundedXL: {
+    shape: 'roundedXL',
+  },
+  roundedL: {
+    shape: 'roundedL',
+  },
+  roundedM: {
+    shape: 'roundedM',
+  },
+  roundedS: {
+    shape: 'roundedS',
+  },
   geometric: {
     shape: 'geometric',
   },
-} satisfies CodeAppearance
+} satisfies CodeAppearanceShape
 
 export { codeAppearanceShape }

package/src/components/Code/appearance/codeSize.ts

@@ -1,18 +1,21 @@
-import type { CodeAppearance } from '../Code.interface'
+import type { CodeAppearanceSize } from '../Code.interface'
 
 const codeAppearanceSize = {
   sizeL: {
     size: 'l',
-    textSize: 'l',
+    inputSize: 'l',
+    inputTextSize: 'xxl',
   },
   sizeM: {
     size: 'm',
-    textSize: 'm',
+    inputSize: 'm',
+    inputTextSize: 'xxl',
   },
   sizeS: {
     size: 's',
-    textSize: 's',
+    inputSize: 's',
+    inputTextSize: 'xl',
   },
-} satisfies CodeAppearance
+} satisfies CodeAppearanceSize
 
 export { codeAppearanceSize }

package/src/components/Code/appearance/codeStyle.ts

@@ -1,16 +1,19 @@
-import type { CodeAppearance } from '../Code.interface'
+import type { CodeAppearanceStyle } from '../Code.interface'
 
 const codeAppearanceStyle = {
   solid: {
-    borderColor: 'none',
+    inputBorderColor: 'none',
   },
   outlined: {
-    fill: 'none',
+    inputFill: 'none',
+  },
+  full: {
+    inputBorderColor: 'none',
   },
   ghost: {
-    fill: 'none',
-    borderColor: 'none',
+    inputBorderColor: 'none',
+    inputFill: 'none',
   },
-} satisfies CodeAppearance
+} satisfies CodeAppearanceStyle
 
 export { codeAppearanceStyle }

package/src/components/Code/appearance/codeSuccess.ts

@@ -2,9 +2,11 @@ import type { CodeAppearance } from '../Code.interface'
 
 const codeAppearanceSuccess = {
   successPrimary: {
-    fill: 'successTertiary',
-    borderColor: 'successBorderSecondary',
-    textColor: 'surfaceTextPrimary',
+    inputBorderColor: 'successBorderSecondary',
+    inputCaretColor: 'surfaceItemPrimary',
+    inputFill: 'successTertiary',
+    inputPlaceholderTextColor: 'surfaceTextQuaternary',
+    inputTextColor: 'surfaceTextPrimary',
   },
 } satisfies CodeAppearance
 

package/src/components/Code/stories/CodeDefault.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Code } from '../Code'
+import type { CodeProps } from '../Code.interface'
+import { codeStoryParameters } from './CodeStories.config'
+
+const meta = {
+  title: 'Atoms / Code / Default',
+  component: Code,
+  args: {
+    appearance: 'defaultPrimary sizeM solid rounded',
+    dataTestId: 'codeDefaultTestId',
+  },
+  parameters: codeStoryParameters,
+} satisfies Meta<typeof Code>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Placeholder: Story = {
+  args: {
+    inputPlaceholder: '0',
+  },
+  render: (args: CodeProps) => {
+    return <Code {...args} />
+  },
+}
+
+export const PlaceholderActive: Story = {
+  args: {
+    inputAutoFocus: true,
+    inputPlaceholder: '0',
+  },
+  render: (args: CodeProps) => {
+    return <Code {...args} />
+  },
+}
+
+export const Filled: Story = {
+  args: {
+    initialValue: '123456',
+    inputPlaceholder: '0',
+  },
+  render: (args: CodeProps) => {
+    return <Code {...args} />
+  },
+}
+
+export const FilledActive: Story = {
+  args: {
+    initialValue: '123456',
+    inputAutoFocus: true,
+    inputPlaceholder: '0',
+  },
+  render: (args: CodeProps) => {
+    return <Code {...args} />
+  },
+}

package/src/components/Code/stories/CodeDemo.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { createAppearanceOptions } from '../../../storybook'
+import { codeAppearanceShape } from '../appearance/codeShape'
+import { codeAppearanceSize } from '../appearance/codeSize'
+import { codeAppearanceStyle } from '../appearance/codeStyle'
+import { Code } from '../Code'
+import { codeAppearance } from '../Code.appearance'
+import type { CodeProps, CodeStoryArgs } from '../Code.interface'
+import { codeStoryParameters } from './CodeStories.config'
+
+const { getAppearanceOptions } = createAppearanceOptions(codeAppearance, {
+  appearanceShape: codeAppearanceShape,
+  appearanceSize: codeAppearanceSize,
+  appearanceStyle: codeAppearanceStyle,
+})
+
+const meta = {
+  title: 'Atoms / Code',
+  component: Code,
+  args: {
+    appearanceShape: 'rounded',
+    appearanceSize: 'sizeM',
+    appearanceStyle: 'solid',
+    appearanceType: 'defaultPrimary',
+    inputCount: 6,
+    inputPlaceholder: '0',
+  },
+  parameters: {
+    ...codeStoryParameters,
+    controls: {
+      include: [
+        'appearanceType',
+        'appearanceShape',
+        'appearanceSize',
+        'appearanceStyle',
+        'inputPlaceholder',
+        'inputCount',
+        'initialValue',
+        '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<CodeStoryArgs>
+export default meta
+
+export const Demo: StoryObj<CodeStoryArgs> = {
+  render: ({
+    appearanceShape,
+    appearanceSize,
+    appearanceStyle,
+    appearanceType,
+    ...rest
+  }) => (
+    <Code
+      {...rest}
+      appearance={
+        `${appearanceType} ${appearanceSize} ${appearanceStyle} ${appearanceShape}` as CodeProps['appearance']
+      }
+    />
+  ),
+}

package/src/components/Code/stories/CodeDisabled.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Code } from '../Code'
+import type { CodeProps } from '../Code.interface'
+import { codeStoryParameters } from './CodeStories.config'
+
+const meta = {
+  title: 'Atoms / Code / Disabled',
+  component: Code,
+  args: {
+    appearance: 'disabledPrimary sizeM solid rounded',
+    inputPlaceholder: '0',
+    isDisabled: true,
+  },
+  parameters: codeStoryParameters,
+} satisfies Meta<typeof Code>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Placeholder: Story = {
+  render: (args: CodeProps) => {
+    return <Code {...args} />
+  },
+}
+
+export const PlaceholderActive: Story = {
+  args: {
+    inputAutoFocus: true,
+  },
+  render: (args: CodeProps) => {
+    return <Code {...args} />
+  },
+}
+
+export const Filled: Story = {
+  args: {
+    initialValue: '123456',
+  },
+  render: (args: CodeProps) => {
+    return <Code {...args} />
+  },
+}
+
+export const FilledActive: Story = {
+  args: {
+    initialValue: '123456',
+    inputAutoFocus: true,
+  },
+  render: (args: CodeProps) => {
+    return <Code {...args} />
+  },
+}

package/src/components/Code/stories/CodeError.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Code } from '../Code'
+import type { CodeProps } from '../Code.interface'
+import { codeStoryParameters } from './CodeStories.config'
+
+const meta = {
+  title: 'Atoms / Code / Error',
+  component: Code,
+  args: {
+    appearance: 'errorPrimary sizeM solid rounded',
+    inputPlaceholder: '0',
+  },
+  parameters: codeStoryParameters,
+} satisfies Meta<typeof Code>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Placeholder: Story = {
+  render: (args: CodeProps) => {
+    return <Code {...args} />
+  },
+}
+
+export const PlaceholderActive: Story = {
+  args: {
+    inputAutoFocus: true,
+  },
+  render: (args: CodeProps) => {
+    return <Code {...args} />
+  },
+}
+
+export const Filled: Story = {
+  args: {
+    initialValue: '123456',
+  },
+  render: (args: CodeProps) => {
+    return <Code {...args} />
+  },
+}
+
+export const FilledActive: Story = {
+  args: {
+    initialValue: '123456',
+    inputAutoFocus: true,
+  },
+  render: (args: CodeProps) => {
+    return <Code {...args} />
+  },
+}

package/src/components/Code/stories/CodeGallery.stories.tsx

@@ -0,0 +1,88 @@
+/* eslint-disable perfectionist/sort-objects */
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Code } from '../Code'
+import type { CodeGalleryStory } from '../Code.interface'
+import { codeGallery, codeStoryParameters } from './CodeStories.config'
+
+const meta = {
+  title: 'Atoms / Code',
+  args: {
+    appearance: 'default',
+    tier: 'Primary',
+    style: 'solid',
+    shape: 'rounded',
+    inputCount: 6,
+    inputPlaceholder: '0',
+    initialValue: '',
+    isDisabled: false,
+  },
+  parameters: codeStoryParameters,
+  argTypes: {
+    appearance: codeGallery.argTypes.appearance,
+    tier: codeGallery.argTypes.tier,
+    style: codeGallery.argTypes.style,
+    shape: codeGallery.argTypes.shape,
+  },
+} satisfies Meta<CodeGalleryStory>
+
+export default meta
+
+type Story = StoryObj<CodeGalleryStory>
+
+const filledValueForCount = (inputCount = 6) =>
+  Array.from({ length: inputCount }, (_, index) =>
+    String((index % 9) + 1),
+  ).join('')
+
+const renderCodeGallery = (
+  args: CodeGalleryStory,
+  options: {
+    initialValue?: CodeGalleryStory['initialValue']
+    inputPlaceholder?: CodeGalleryStory['inputPlaceholder']
+  } = {},
+) =>
+  codeGallery.render(args, ({ appearance, args: storyArgs, sizeKey }) => (
+    <Code
+      appearance={appearance}
+      key={`${sizeKey}-${options.initialValue}-${options.inputPlaceholder}`}
+      initialValue={
+        options.initialValue !== undefined
+          ? options.initialValue
+          : storyArgs.initialValue
+      }
+      inputCount={storyArgs.inputCount}
+      inputPlaceholder={
+        options.inputPlaceholder !== undefined
+          ? options.inputPlaceholder
+          : storyArgs.inputPlaceholder
+      }
+      isDisabled={storyArgs.isDisabled}
+    />
+  ))
+
+export const Placeholder: Story = {
+  name: 'Placeholder',
+  args: {
+    inputPlaceholder: '0',
+    initialValue: '',
+  },
+  render: (args) =>
+    renderCodeGallery(args, {
+      inputPlaceholder: args.inputPlaceholder,
+      initialValue: '',
+    }),
+}
+
+export const Filled: Story = {
+  name: 'Filled',
+  args: {
+    inputPlaceholder: '0',
+    initialValue: filledValueForCount(6),
+  },
+  render: (args) =>
+    renderCodeGallery(args, {
+      inputPlaceholder: args.inputPlaceholder,
+      initialValue: filledValueForCount(args.inputCount),
+    }),
+}

package/src/components/Code/stories/CodeRequire.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Code } from '../Code'
+import type { CodeProps } from '../Code.interface'
+import { codeStoryParameters } from './CodeStories.config'
+
+const meta = {
+  title: 'Atoms / Code / Require',
+  component: Code,
+  args: {
+    appearance: 'requirePrimary sizeM solid rounded',
+    inputPlaceholder: '0',
+  },
+  parameters: codeStoryParameters,
+} satisfies Meta<typeof Code>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Placeholder: Story = {
+  render: (args: CodeProps) => {
+    return <Code {...args} />
+  },
+}
+
+export const PlaceholderActive: Story = {
+  args: {
+    inputAutoFocus: true,
+  },
+  render: (args: CodeProps) => {
+    return <Code {...args} />
+  },
+}
+
+export const Filled: Story = {
+  args: {
+    initialValue: '123456',
+  },
+  render: (args: CodeProps) => {
+    return <Code {...args} />
+  },
+}
+
+export const FilledActive: Story = {
+  args: {
+    initialValue: '123456',
+    inputAutoFocus: true,
+  },
+  render: (args: CodeProps) => {
+    return <Code {...args} />
+  },
+}

package/src/components/Code/stories/CodeShape.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Code } from '../Code'
+import type { CodeProps } from '../Code.interface'
+import { codeStoryParameters } from './CodeStories.config'
+
+const meta = {
+  title: 'Atoms / Code / Shape',
+  component: Code,
+  args: {
+    inputPlaceholder: '0',
+  },
+  parameters: codeStoryParameters,
+} satisfies Meta<typeof Code>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Rounded: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL solid rounded',
+  },
+  render: (args: CodeProps) => {
+    return <Code {...args} />
+  },
+}
+
+export const RoundedS: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL solid roundedS',
+  },
+  render: (args: CodeProps) => {
+    return <Code {...args} />
+  },
+}
+
+export const RoundedM: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL solid roundedM',
+  },
+  render: (args: CodeProps) => {
+    return <Code {...args} />
+  },
+}
+
+export const RoundedL: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL solid roundedL',
+  },
+  render: (args: CodeProps) => {
+    return <Code {...args} />
+  },
+}
+
+export const RoundedXL: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL solid roundedXL',
+  },
+  render: (args: CodeProps) => {
+    return <Code {...args} />
+  },
+}
+
+export const Circular: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL solid circular',
+  },
+  render: (args: CodeProps) => {
+    return <Code {...args} />
+  },
+}

package/src/components/Code/stories/CodeSize.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Code } from '../Code'
+import type { CodeProps } from '../Code.interface'
+import { codeStoryParameters } from './CodeStories.config'
+
+const meta = {
+  title: 'Atoms / Code / Size',
+  component: Code,
+  args: {
+    inputPlaceholder: '0',
+  },
+  parameters: codeStoryParameters,
+} satisfies Meta<typeof Code>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const SizeL: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL solid rounded',
+  },
+  render: (args: CodeProps) => {
+    return <Code {...args} />
+  },
+}
+
+export const SizeM: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeM solid rounded',
+  },
+  render: (args: CodeProps) => {
+    return <Code {...args} />
+  },
+}

package/src/components/Code/stories/CodeStories.config.ts

@@ -0,0 +1,42 @@
+/* eslint-disable perfectionist/sort-objects */
+import { createComponentGallery } from '../../../storybook'
+import { codeAppearanceDefault } from '../appearance/codeDefault'
+import { codeAppearanceDisabled } from '../appearance/codeDisabled'
+import { codeAppearanceError } from '../appearance/codeError'
+import { codeAppearanceRequire } from '../appearance/codeRequire'
+import { codeAppearanceShape } from '../appearance/codeShape'
+import { codeAppearanceSize } from '../appearance/codeSize'
+import { codeAppearanceStyle } from '../appearance/codeStyle'
+import { codeAppearanceSuccess } from '../appearance/codeSuccess'
+import type { CodeAppearanceKey } from '../Code.interface'
+
+const codeSizeKeys = Object.keys(codeAppearanceSize).filter(
+  (value): value is keyof typeof codeAppearanceSize =>
+    value in codeAppearanceSize,
+)
+
+const codeGallery = createComponentGallery<CodeAppearanceKey>({
+  size: codeAppearanceSize,
+  appearanceGroups: {
+    default: codeAppearanceDefault,
+    disabled: codeAppearanceDisabled,
+    error: codeAppearanceError,
+    require: codeAppearanceRequire,
+    success: codeAppearanceSuccess,
+  },
+  shape: codeAppearanceShape,
+  style: codeAppearanceStyle,
+})
+
+const CODE_FIGMA_URL =
+  'https://www.figma.com/design/HmHn0BShJPXHU8SmuIP71M/ITCase---Atoms?node-id=18-76500'
+
+const codeStoryParameters = {
+  layout: 'centered' as const,
+  design: {
+    type: 'figma' as const,
+    url: CODE_FIGMA_URL,
+  },
+}
+
+export { CODE_FIGMA_URL, codeGallery, codeSizeKeys, codeStoryParameters }

package/src/components/Code/stories/CodeStyle.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Code } from '../Code'
+import type { CodeProps } from '../Code.interface'
+import { codeStoryParameters } from './CodeStories.config'
+
+const meta = {
+  title: 'Atoms / Code / Style',
+  component: Code,
+  args: {
+    inputPlaceholder: '0',
+  },
+  parameters: codeStoryParameters,
+} satisfies Meta<typeof Code>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Solid: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL solid rounded',
+  },
+  render: (args: CodeProps) => {
+    return <Code {...args} />
+  },
+}
+
+export const Outlined: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL outlined rounded',
+  },
+  render: (args: CodeProps) => {
+    return <Code {...args} />
+  },
+}
+
+export const Ghost: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL ghost rounded',
+  },
+  render: (args: CodeProps) => {
+    return <Code {...args} />
+  },
+}
+
+export const Full: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL full rounded',
+  },
+  render: (args: CodeProps) => {
+    return <Code {...args} />
+  },
+}