@itcase/ui-react-native 1.10.85 → 1.10.87

package/src/components/Label/stories/LabelShape.stories.tsx

@@ -1,33 +1,95 @@
 import type { Meta, StoryObj } from '@storybook/react'
+import * as storybookTest from 'storybook/test'
 
 import { Label } from '../Label'
+import type { LabelProps } from '../Label.interface'
 
 const meta = {
   title: 'Atoms / Label / Shape',
   component: Label,
   args: {
+    dataTestId: 'labelShapeTestId',
     text: 'Label',
   },
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/HmHn0BShJPXHU8SmuIP71M/ITCase---Atoms?node-id=18-99229',
+    },
+  },
+  tags: ['test'],
 } satisfies Meta<typeof Label>
-
 export default meta
 
-type Story = StoryObj<typeof Label>
+type Story = StoryObj<typeof meta>
+
+const labelShapePlay =
+  (shapeClass: string): NonNullable<Story['play']> =>
+  async ({ args, canvas, step }) => {
+    await step(`Label has shape class ${shapeClass}`, async () => {
+      const label = canvas.getByTestId(args.dataTestId!)
+      await storybookTest.expect(label).toBeInTheDocument()
+      await storybookTest.expect(label).toHaveClass(shapeClass)
+    })
+  }
 
 export const Rounded: Story = {
   args: {
     appearance: 'surfacePrimary sizeXXL solid rounded',
   },
+  play: labelShapePlay('shape_rounded'),
+  render: (args: LabelProps) => {
+    return <Label {...args} />
+  },
 }
 
-export const Circular: Story = {
+export const RoundedS: Story = {
   args: {
-    appearance: 'surfacePrimary sizeXXL solid circular',
+    appearance: 'surfacePrimary sizeXXL solid roundedS',
+  },
+  play: labelShapePlay('shape_rounded-s'),
+  render: (args: LabelProps) => {
+    return <Label {...args} />
   },
 }
 
-export const Geometric: Story = {
+export const RoundedM: Story = {
   args: {
-    appearance: 'surfacePrimary sizeXXL solid geometric',
+    appearance: 'surfacePrimary sizeXXL solid roundedM',
+  },
+  play: labelShapePlay('shape_rounded-m'),
+  render: (args: LabelProps) => {
+    return <Label {...args} />
+  },
+}
+
+export const RoundedL: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeXXL solid roundedL',
+  },
+  play: labelShapePlay('shape_rounded-l'),
+  render: (args: LabelProps) => {
+    return <Label {...args} />
+  },
+}
+
+export const RoundedXL: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeXXL solid roundedXL',
+  },
+  play: labelShapePlay('shape_rounded-xl'),
+  render: (args: LabelProps) => {
+    return <Label {...args} />
+  },
+}
+
+export const Circular: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeXXL solid circular',
+  },
+  play: labelShapePlay('shape_circular'),
+  render: (args: LabelProps) => {
+    return <Label {...args} />
   },
 }

package/src/components/Label/stories/LabelSize.stories.tsx

@@ -1,57 +1,105 @@
 import type { Meta, StoryObj } from '@storybook/react'
+import * as storybookTest from 'storybook/test'
 
 import { Label } from '../Label'
+import type { LabelProps } from '../Label.interface'
 
 const meta = {
   title: 'Atoms / Label / Size',
   component: Label,
   args: {
+    dataTestId: 'labelSizeTestId',
     text: 'Label',
   },
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/HmHn0BShJPXHU8SmuIP71M/ITCase---Atoms?node-id=18-99229',
+    },
+  },
+  tags: ['test'],
 } satisfies Meta<typeof Label>
-
 export default meta
 
-type Story = StoryObj<typeof Label>
+type Story = StoryObj<typeof meta>
+
+const labelSizePlay =
+  (sizeClass: string): NonNullable<Story['play']> =>
+  async ({ args, canvas, step }) => {
+    await step(`Label has size class ${sizeClass}`, async () => {
+      const label = canvas.getByTestId(args.dataTestId!)
+      await storybookTest.expect(label).toBeInTheDocument()
+      await storybookTest.expect(label).toHaveClass(sizeClass)
+    })
+  }
 
 export const SizeXXL: Story = {
   args: {
     appearance: 'surfaceSecondary sizeXXL solid rounded',
   },
+  play: labelSizePlay('label_size_xxl'),
+  render: (args: LabelProps) => {
+    return <Label {...args} />
+  },
 }
 
 export const SizeXL: Story = {
   args: {
     appearance: 'surfaceSecondary sizeXL solid rounded',
   },
+  play: labelSizePlay('label_size_xl'),
+  render: (args: LabelProps) => {
+    return <Label {...args} />
+  },
 }
 
 export const SizeL: Story = {
   args: {
     appearance: 'surfaceSecondary sizeL solid rounded',
   },
+  play: labelSizePlay('label_size_l'),
+  render: (args: LabelProps) => {
+    return <Label {...args} />
+  },
 }
 
 export const SizeM: Story = {
   args: {
     appearance: 'surfaceSecondary sizeM solid rounded',
   },
+  play: labelSizePlay('label_size_m'),
+  render: (args: LabelProps) => {
+    return <Label {...args} />
+  },
 }
 
 export const SizeS: Story = {
   args: {
     appearance: 'surfaceSecondary sizeS solid rounded',
   },
+  play: labelSizePlay('label_size_s'),
+  render: (args: LabelProps) => {
+    return <Label {...args} />
+  },
 }
 
 export const SizeXS: Story = {
   args: {
     appearance: 'surfaceSecondary sizeXS solid rounded',
   },
+  play: labelSizePlay('label_size_xs'),
+  render: (args: LabelProps) => {
+    return <Label {...args} />
+  },
 }
 
 export const SizeXXS: Story = {
   args: {
     appearance: 'surfaceSecondary sizeXXS solid rounded',
   },
+  play: labelSizePlay('label_size_xxs'),
+  render: (args: LabelProps) => {
+    return <Label {...args} />
+  },
 }

package/src/components/Label/stories/LabelSkeleton.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import * as storybookTest from 'storybook/test'
+
+import { Group } from '../../Group'
+import { Text } from '../../Text'
+import { Label } from '../Label'
+import type { LabelProps } from '../Label.interface'
+import {
+  getLabelTypeProps,
+  labelSizeKeys,
+  labelStoryParameters,
+  labelTypeOptions,
+} from './LabelStories.config'
+
+interface LabelSkeletonStoryArgs {
+  dataTestId?: string
+  text?: string
+}
+
+const meta = {
+  title: 'Atoms / Label / Skeleton',
+  args: {
+    dataTestId: 'labelSkeletonTestId',
+    text: 'Label',
+  },
+  parameters: {
+    ...labelStoryParameters,
+    controls: {
+      include: ['text'],
+    },
+  },
+  tags: ['test'],
+} satisfies Meta<LabelSkeletonStoryArgs>
+
+export default meta
+
+type Story = StoryObj<LabelSkeletonStoryArgs>
+
+export const Skeleton: Story = {
+  play: async ({ args, canvas, step }) => {
+    await step(
+      'Label type×size gallery renders with skeleton class',
+      async () => {
+        const labels = canvas.getAllByTestId(args.dataTestId!)
+        await storybookTest
+          .expect(labels.length)
+          .toBe(labelTypeOptions.length * labelSizeKeys.length)
+
+        for (const label of labels) {
+          await storybookTest.expect(label).toBeInTheDocument()
+          await storybookTest.expect(label).toHaveClass('skeleton')
+        }
+      },
+    )
+  },
+  render: ({ dataTestId, text = 'Label' }) => (
+    <Group width="fill" direction="vertical" gap={24}>
+      {labelTypeOptions.map((type) => (
+        <Group key={type} direction="vertical" gap={16}>
+          <Text size="l" textColor="surfaceTextQuaternary" weight="bold">
+            {type}
+          </Text>
+          <Group direction="horizontal" gap={16} wrap="wrap">
+            {labelSizeKeys.map((sizeKey) => (
+              <Group
+                key={sizeKey}
+                direction="vertical"
+                alignItems="center"
+                gap={8}
+              >
+                <Text size="xs" textColor="surfaceTextQuaternary" weight="bold">
+                  {sizeKey.replace(/^size/, '')}
+                </Text>
+                <Label
+                  {...getLabelTypeProps(type, sizeKey)}
+                  appearance={
+                    `surfacePrimary ${sizeKey} solid rounded` as LabelProps['appearance']
+                  }
+                  dataTestId={dataTestId}
+                  text={text}
+                  isSkeleton={true}
+                />
+              </Group>
+            ))}
+          </Group>
+        </Group>
+      ))}
+    </Group>
+  ),
+}

package/src/components/Label/stories/LabelStories.config.ts

@@ -0,0 +1,123 @@
+/* eslint-disable perfectionist/sort-objects */
+import { icons14, icons16, icons20, icons24 } from '@itcase/icons-default'
+
+import { createComponentGallery } from '../../../storybook'
+import { labelAppearanceAccent } from '../appearance/labelAccent'
+import { labelAppearanceDanger } from '../appearance/labelDanger'
+import { labelAppearanceDisabled } from '../appearance/labelDisabled'
+import { labelAppearanceError } from '../appearance/labelError'
+import { labelAppearanceExtra } from '../appearance/labelExtra'
+import { labelAppearanceGradient } from '../appearance/labelGradient'
+import { labelAppearanceInfo } from '../appearance/labelInfo'
+import { labelAppearanceShape } from '../appearance/labelShape'
+import { labelAppearanceSize } from '../appearance/labelSize'
+import { labelAppearanceSpecial } from '../appearance/labelSpecial'
+import { labelAppearanceStyle } from '../appearance/labelStyle'
+import { labelAppearanceSuccess } from '../appearance/labelSuccess'
+import { labelAppearanceSurface } from '../appearance/labelSurface'
+import { labelAppearanceWarning } from '../appearance/labelWarning'
+import type { LabelAppearanceKey, LabelProps } from '../Label.interface'
+
+const LABEL_FIGMA_URL =
+  'https://www.figma.com/design/HmHn0BShJPXHU8SmuIP71M/ITCase---Atoms?node-id=18-99229'
+
+const LABEL_APPEARANCE_GROUPS = [
+  'accent',
+  'special',
+  'extra',
+  'surface',
+  'error',
+  'success',
+  'warning',
+  'danger',
+  'info',
+  'disabled',
+  'gradient',
+] as const
+
+const labelStoryParameters = {
+  layout: 'centered' as const,
+  design: {
+    type: 'figma' as const,
+    url: LABEL_FIGMA_URL,
+  },
+}
+
+const galleryIconsBySizeKey = {
+  sizeXXL: icons24.Placeholder.Default,
+  sizeXL: icons24.Placeholder.Default,
+  sizeL: icons24.Placeholder.Default,
+  sizeM: icons24.Placeholder.Default,
+  sizeS: icons20.Placeholder.Default,
+  sizeXS: icons16.Placeholder.Default,
+  sizeXXS: icons14.Placeholder.Default,
+} as const
+
+type LabelSizeKey = keyof typeof galleryIconsBySizeKey
+
+const isLabelSizeKey = (value: string): value is LabelSizeKey =>
+  value in galleryIconsBySizeKey
+
+const labelSizeKeys = Object.keys(galleryIconsBySizeKey).filter(isLabelSizeKey)
+
+const labelTypeOptions = [
+  'label',
+  'icon-before',
+  'icon-after',
+  'icons',
+] as const
+
+const getLabelTypeIcon = (appearanceSize: string = 'sizeM') =>
+  isLabelSizeKey(appearanceSize)
+    ? galleryIconsBySizeKey[appearanceSize]
+    : icons16.Placeholder.Default
+
+const getLabelTypeProps = (
+  type: (typeof labelTypeOptions)[number],
+  appearanceSize: string = 'sizeM',
+): Pick<LabelProps, 'iconAfter' | 'iconBefore'> => {
+  const icon = getLabelTypeIcon(appearanceSize)
+
+  switch (type) {
+    case 'label':
+      return { iconAfter: undefined, iconBefore: undefined }
+    case 'icon-before':
+      return { iconAfter: undefined, iconBefore: icon }
+    case 'icon-after':
+      return { iconAfter: icon, iconBefore: undefined }
+    case 'icons':
+      return { iconAfter: icon, iconBefore: icon }
+  }
+}
+
+const labelGallery = createComponentGallery<LabelAppearanceKey>({
+  size: labelAppearanceSize,
+  appearanceGroups: {
+    accent: labelAppearanceAccent,
+    danger: labelAppearanceDanger,
+    disabled: labelAppearanceDisabled,
+    error: labelAppearanceError,
+    extra: labelAppearanceExtra,
+    gradient: labelAppearanceGradient,
+    info: labelAppearanceInfo,
+    special: labelAppearanceSpecial,
+    success: labelAppearanceSuccess,
+    surface: labelAppearanceSurface,
+    warning: labelAppearanceWarning,
+  },
+  shape: labelAppearanceShape,
+  style: labelAppearanceStyle,
+})
+
+export {
+  galleryIconsBySizeKey,
+  getLabelTypeIcon,
+  getLabelTypeProps,
+  LABEL_APPEARANCE_GROUPS,
+  LABEL_FIGMA_URL,
+  labelGallery,
+  labelSizeKeys,
+  labelStoryParameters,
+  labelTypeOptions,
+}
+export type { LabelSizeKey }

package/src/components/Label/stories/LabelStyle.stories.tsx

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import * as storybookTest from 'storybook/test'
+
+import { Label } from '../Label'
+import type { LabelProps } from '../Label.interface'
+
+const meta = {
+  title: 'Atoms / Label / Style',
+  component: Label,
+  args: {
+    dataTestId: 'labelStyleTestId',
+    text: 'Label',
+  },
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/HmHn0BShJPXHU8SmuIP71M/ITCase---Atoms?node-id=18-99229',
+    },
+  },
+  tags: ['test'],
+} satisfies Meta<typeof Label>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const labelStylePlay =
+  (styleClasses: string[]): NonNullable<Story['play']> =>
+  async ({ args, canvas, step }) => {
+    await step('Label has style classes', async () => {
+      const label = canvas.getByTestId(args.dataTestId!)
+      await storybookTest.expect(label).toBeInTheDocument()
+
+      for (const styleClass of styleClasses) {
+        await storybookTest.expect(label).toHaveClass(styleClass)
+      }
+    })
+  }
+
+export const Solid: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeXXL solid rounded',
+  },
+  play: labelStylePlay(['fill_surface-primary', 'border-color_none']),
+  render: (args: LabelProps) => {
+    return <Label {...args} />
+  },
+}
+
+export const Outlined: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeXXL outlined rounded',
+  },
+  play: labelStylePlay(['fill_none']),
+  render: (args: LabelProps) => {
+    return <Label {...args} />
+  },
+}
+
+export const Ghost: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeXXL ghost rounded',
+  },
+  play: labelStylePlay(['fill_none', 'border-color_none']),
+  render: (args: LabelProps) => {
+    return <Label {...args} />
+  },
+}
+
+export const Full: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeXXL full rounded',
+  },
+  play: labelStylePlay(['fill_surface-primary']),
+  render: (args: LabelProps) => {
+    return <Label {...args} />
+  },
+}

package/src/components/Label/stories/LabelText.stories.tsx

@@ -1,45 +1,64 @@
 import type { Meta, StoryObj } from '@storybook/react'
+import * as storybookTest from 'storybook/test'
 
+import { createAppearanceTierStories } from '../../../storybook'
 import { Label } from '../Label'
+import type { LabelProps } from '../Label.interface'
+import {
+  LABEL_APPEARANCE_GROUPS,
+  labelGallery,
+  labelStoryParameters,
+} from './LabelStories.config'
 
 const meta = {
   title: 'Atoms / Label / Label',
   component: Label,
   args: {
+    dataTestId: 'labelTypeTestId',
     text: 'Label',
   },
+  parameters: labelStoryParameters,
+  tags: ['test'],
 } satisfies Meta<typeof Label>
 
 export default meta
 
-type Story = StoryObj<typeof Label>
+type Story = StoryObj<typeof meta>
 
-export const Accent: Story = {
-  args: {
-    appearance: 'accentPrimary sizeXXL solid rounded',
-  },
-}
-
-export const Extra: Story = {
-  args: {
-    appearance: 'extraPrimary sizeXXL solid rounded',
-  },
-}
-
-export const Surface: Story = {
-  args: {
-    appearance: 'surfacePrimary sizeXXL solid rounded',
-  },
+const labelTextPlay: NonNullable<Story['play']> = async ({
+  args,
+  canvas,
+  step,
+}) => {
+  await step('Label renders with label text', async () => {
+    const label = canvas.getByTestId(args.dataTestId!)
+    await storybookTest.expect(label).toBeInTheDocument()
+    await storybookTest.expect(label).toHaveTextContent(args.text!)
+  })
 }
 
-export const Danger: Story = {
-  args: {
-    appearance: 'dangerPrimary sizeXXL solid rounded',
-  },
-}
+const stories = createAppearanceTierStories({
+  renderItem: ({ appearance, dataTestId, args }) => (
+    <Label
+      {...args}
+      appearance={appearance as LabelProps['appearance']}
+      dataTestId={dataTestId}
+    />
+  ),
+  play: labelTextPlay,
+  appearanceGroups: LABEL_APPEARANCE_GROUPS,
+  appearanceSize: 'sizeXXL',
+  tiersByAppearance: labelGallery.tiersByAppearance,
+})
 
-export const Gradient: Story = {
-  args: {
-    appearance: 'gradientPrimary sizeXXL solid rounded',
-  },
-}
+export const Accent = stories.Accent
+export const Special = stories.Special
+export const Extra = stories.Extra
+export const Surface = stories.Surface
+export const Error = stories.Error
+export const Success = stories.Success
+export const Warning = stories.Warning
+export const Danger = stories.Danger
+export const Info = stories.Info
+export const Disabled = stories.Disabled
+export const Gradient = stories.Gradient

package/src/components/Label/styles/label.ts

@@ -2,12 +2,18 @@ import { StyleSheet } from 'react-native'
 
 const labelStyles = StyleSheet.create({
   label: {
+    flexDirection: 'row',
     flexGrow: 0,
+    alignItems: 'center',
     alignSelf: 'flex-start',
+    gap: 4,
   },
   label__text_white: {
     color: 'white',
   },
+  label_skeleton: {
+    overflow: 'hidden',
+  },
 })
 
 export { labelStyles }

package/src/components/Link/Link.interface.ts

@@ -6,6 +6,7 @@ import type {
   AppearanceKeysDefault,
   AppearanceRecord,
   AppearanceStyleKey,
+  CompositeAppearanceKeys,
   FillProps,
   TextColorProps,
   TextSizeProps,
@@ -20,9 +21,6 @@ interface LinkAppearanceProps {
   textWeight?: TextWeightProps
 }
 
-type LinkAppearanceKey = AppearanceKeysDefault
-type LinkConfig = AppearanceConfig<AppearanceKeysDefault, LinkAppearanceProps>
-type LinkAppearance = LinkConfig['appearance']
 type LinkAppearanceStyle = AppearanceRecord<
   AppearanceStyleKey,
   LinkAppearanceProps,
@@ -33,8 +31,7 @@ interface LinkProps extends LinkAppearanceProps {
   isDisabled?: boolean
   onPress?: (event: GestureResponderEvent) => void
   after?: ReactNode
-  appearance?: LinkAppearanceKey
-  appearanceStyle?: AppearanceStyleKey
+  appearance?: CompositeAppearanceKeys
   before?: ReactNode
   children?: ReactNode
   href?: string
@@ -44,6 +41,15 @@ interface LinkProps extends LinkAppearanceProps {
   underline?: boolean
 }
 
+type LinkConfig = AppearanceConfig<AppearanceKeysDefault, LinkAppearanceProps>
+type LinkAppearance = LinkConfig['appearance']
+type LinkAppearanceKey = NonNullable<LinkProps['appearance']>
+
+type LinkStoryArgs = Omit<LinkProps, 'appearance'> & {
+  appearanceStyle: string
+  appearanceType: string
+}
+
 export type {
   LinkAppearance,
   LinkAppearanceKey,
@@ -51,4 +57,5 @@ export type {
   LinkAppearanceStyle,
   LinkConfig,
   LinkProps,
+  LinkStoryArgs,
 }