@itcase/ui-react-native 1.10.84 → 1.10.86

package/src/components/Warning/stories/WarningShape.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import { Warning } from '../Warning'
+import type { WarningProps } from '../Warning.interface'
 
 const meta = {
   title: 'Molecules / Warning / Shape',
@@ -9,44 +10,77 @@ const meta = {
     title: 'Label',
     description: 'Description',
   },
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=1844-26976',
+    },
+  },
 } satisfies Meta<typeof Warning>
-
 export default meta
 
-type Story = StoryObj<typeof Warning>
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    appearance: 'infoMutedPrimary sizeL solid rounded',
+  },
+  render: (args: WarningProps) => {
+    return <Warning {...args} />
+  },
+}
 
 export const Rounded: Story = {
   args: {
     appearance: 'infoMutedPrimary sizeL solid rounded',
   },
+  render: (args: WarningProps) => {
+    return <Warning {...args} />
+  },
 }
 
 export const RoundedXL: Story = {
   args: {
     appearance: 'infoMutedPrimary sizeL solid roundedXL',
   },
+  render: (args: WarningProps) => {
+    return <Warning {...args} />
+  },
 }
 
 export const RoundedL: Story = {
   args: {
     appearance: 'infoMutedPrimary sizeL solid roundedL',
   },
+  render: (args: WarningProps) => {
+    return <Warning {...args} />
+  },
 }
 
 export const RoundedM: Story = {
   args: {
     appearance: 'infoMutedPrimary sizeL solid roundedM',
   },
+  render: (args: WarningProps) => {
+    return <Warning {...args} />
+  },
 }
 
 export const RoundedS: Story = {
   args: {
     appearance: 'infoMutedPrimary sizeL solid roundedS',
   },
+  render: (args: WarningProps) => {
+    return <Warning {...args} />
+  },
 }
 
 export const Circular: Story = {
   args: {
     appearance: 'infoMutedPrimary sizeL solid circular',
   },
+  render: (args: WarningProps) => {
+    return <Warning {...args} />
+  },
 }

package/src/components/Warning/stories/WarningSize.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import { Warning } from '../Warning'
+import type { WarningProps } from '../Warning.interface'
 
 const meta = {
   title: 'Molecules / Warning / Size',
@@ -8,21 +9,25 @@ const meta = {
   args: {
     title: 'Label',
     description: 'Description',
+    shape: 'rounded',
+  },
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=1844-26976',
+    },
   },
 } satisfies Meta<typeof Warning>
-
 export default meta
 
-type Story = StoryObj<typeof Warning>
+type Story = StoryObj<typeof meta>
 
 export const SizeL: Story = {
   args: {
     appearance: 'infoMutedPrimary sizeL solid rounded',
   },
-}
-
-export const SizeM: Story = {
-  args: {
-    appearance: 'infoMutedPrimary sizeM solid rounded',
+  render: (args: WarningProps) => {
+    return <Warning {...args} />
   },
 }

package/src/components/Warning/stories/WarningSkeleton.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Warning } from '../Warning'
+import type { WarningProps } from '../Warning.interface'
+
+const meta = {
+  title: 'Molecules / Warning / Skeleton',
+  component: Warning,
+  args: {
+    appearance: 'accentMutedPrimary sizeL solid rounded',
+    title: 'Label',
+    description: 'Description',
+    isSkeleton: true,
+  },
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=1844-26976',
+    },
+  },
+} satisfies Meta<typeof Warning>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Skeleton: Story = {
+  render: (args: WarningProps) => <Warning {...args} />,
+}

package/src/components/Warning/stories/WarningStyle.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import { Warning } from '../Warning'
+import type { WarningProps } from '../Warning.interface'
 
 const meta = {
   title: 'Molecules / Warning / Style',
@@ -8,33 +9,52 @@ const meta = {
   args: {
     title: 'Label',
     description: 'Description',
+    shape: 'rounded',
+  },
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=1844-26976',
+    },
   },
 } satisfies Meta<typeof Warning>
-
 export default meta
 
-type Story = StoryObj<typeof Warning>
+type Story = StoryObj<typeof meta>
 
 export const Solid: Story = {
   args: {
     appearance: 'infoMutedPrimary sizeL solid rounded',
   },
+  render: (args: WarningProps) => {
+    return <Warning {...args} />
+  },
 }
 
 export const Outlined: Story = {
   args: {
     appearance: 'infoMutedPrimary sizeL outlined rounded',
   },
+  render: (args: WarningProps) => {
+    return <Warning {...args} />
+  },
 }
 
 export const Full: Story = {
   args: {
     appearance: 'infoMutedPrimary sizeL full rounded',
   },
+  render: (args: WarningProps) => {
+    return <Warning {...args} />
+  },
 }
 
 export const Ghost: Story = {
   args: {
     appearance: 'infoMutedPrimary sizeL ghost rounded',
   },
+  render: (args: WarningProps) => {
+    return <Warning {...args} />
+  },
 }

package/src/components/Warning/styles/warning.ts

@@ -8,6 +8,21 @@ const warningStyles = StyleSheet.create({
   warning__content: {
     flex: 1,
   },
+  warning__hidden: {
+    opacity: 0,
+  },
+  warning__skeleton: {
+    ...StyleSheet.absoluteFill,
+  },
+  warning__skeletonGradient: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+  },
+  warning_skeleton: {
+    position: 'relative',
+    overflow: 'hidden',
+  },
 })
 
 export { warningStyles }

package/src/index.tsx

@@ -25,8 +25,8 @@ import type {
 } from './components/Avatar'
 import { AvatarStack, avatarStackDirectionList } from './components/AvatarStack'
 import type {
+  AvatarsItem,
   avatarStackDirectionPropsType,
-  AvatarStackItem,
   AvatarStackProps,
 } from './components/AvatarStack'
 import {
@@ -253,8 +253,18 @@ import type {
   HeroTitleConfig,
   HeroTitleProps,
 } from './components/HeroTitle'
-import { Icon, iconShapeList, iconSizeList } from './components/Icon'
+import {
+  Icon,
+  iconAppearance,
+  iconConfig,
+  iconShapeList,
+  iconSizeList,
+} from './components/Icon'
 import type {
+  IconAppearance,
+  IconAppearanceKey,
+  IconAppearanceProps,
+  IconConfig,
   IconProps,
   iconShapePropsType,
   iconSizePropsType,
@@ -402,6 +412,17 @@ import type {
   PaginationProps,
   paginationSizePropsType,
 } from './components/Pagination'
+import {
+  Pressable,
+  pressableAppearance,
+  pressableConfig,
+} from './components/Pressable'
+import type {
+  PressableAppearance,
+  PressableAppearanceKey,
+  PressableConfig,
+  PressableProps,
+} from './components/Pressable'
 import {
   Radio,
   radioAppearance,
@@ -424,8 +445,13 @@ import { Response } from './components/Response'
 import type { ResponseProps } from './components/Response'
 import { Scrollbar } from './components/Scrollbar'
 import type { ScrollbarProps } from './components/Scrollbar'
-import { Search } from './components/Search'
-import type { SearchProps } from './components/Search'
+import { Search, searchAppearance, searchConfig } from './components/Search'
+import type {
+  SearchAppearance,
+  SearchAppearanceKey,
+  SearchConfig,
+  SearchProps,
+} from './components/Search'
 import {
   Segmented,
   segmentedAppearance,
@@ -452,6 +478,7 @@ import type {
   SelectAppearance,
   SelectAppearanceKey,
   SelectConfig,
+  SelectMenu,
   SelectOptionItem,
   SelectProps,
   selectSizePropsType,
@@ -621,6 +648,8 @@ export {
   heroTitleAppearance,
   heroTitleConfig,
   Icon,
+  iconAppearance,
+  iconConfig,
   iconShapeList,
   iconSizeList,
   Image,
@@ -674,6 +703,9 @@ export {
   paginationAppearance,
   paginationConfig,
   paginationSizeList,
+  Pressable,
+  pressableAppearance,
+  pressableConfig,
   Radio,
   radioAppearance,
   radioConfig,
@@ -682,6 +714,8 @@ export {
   Response,
   Scrollbar,
   Search,
+  searchAppearance,
+  searchConfig,
   Segmented,
   segmentedAppearance,
   segmentedConfig,
@@ -734,9 +768,9 @@ export type {
   AvatarConfig,
   AvatarProps,
   avatarShapePropsType,
+  AvatarsItem,
   avatarSizesPropsType,
   avatarStackDirectionPropsType,
-  AvatarStackItem,
   AvatarStackProps,
   BadgeAppearance,
   BadgeAppearanceKey,
@@ -832,6 +866,10 @@ export type {
   HeroTitleAppearanceKey,
   HeroTitleConfig,
   HeroTitleProps,
+  IconAppearance,
+  IconAppearanceKey,
+  IconAppearanceProps,
+  IconConfig,
   IconProps,
   iconShapePropsType,
   iconSizePropsType,
@@ -896,6 +934,10 @@ export type {
   PaginationConfig,
   PaginationProps,
   paginationSizePropsType,
+  PressableAppearance,
+  PressableAppearanceKey,
+  PressableConfig,
+  PressableProps,
   RadioAppearance,
   RadioAppearanceKey,
   RadioConfig,
@@ -905,6 +947,9 @@ export type {
   RangeSliderValue,
   ResponseProps,
   ScrollbarProps,
+  SearchAppearance,
+  SearchAppearanceKey,
+  SearchConfig,
   SearchProps,
   Segment,
   SegmentedAppearance,
@@ -916,6 +961,7 @@ export type {
   SelectAppearance,
   SelectAppearanceKey,
   SelectConfig,
+  SelectMenu,
   SelectOptionItem,
   SelectProps,
   selectSizePropsType,

package/src/storybook/createAppearanceTierStories/createAppearanceTierStories.interface.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react'
+
+import type { StoryObj } from '@storybook/react'
+
+import type { AppearanceTierRowItemParams } from '../renderAppearanceTierRow'
+
+type CreateAppearanceTierStoriesOptions<TArgs extends { dataTestId?: string }> =
+  {
+    appearanceGroups: readonly string[]
+    appearanceShape?: string
+    appearanceSize?: string
+    appearanceStyle?: string
+    play?: NonNullable<StoryObj<TArgs>['play']>
+    playByGroup?: Partial<Record<string, NonNullable<StoryObj<TArgs>['play']>>>
+    renderItem: (
+      params: AppearanceTierRowItemParams & { args: TArgs },
+    ) => ReactNode
+    tiersByAppearance: Record<string, string[]>
+  }
+
+export type { CreateAppearanceTierStoriesOptions }

package/src/storybook/createAppearanceTierStories/createAppearanceTierStories.ts

@@ -0,0 +1,63 @@
+import type { ReactNode } from 'react'
+
+import { renderAppearanceTierRow } from '../renderAppearanceTierRow'
+import type { CreateAppearanceTierStoriesOptions } from './createAppearanceTierStories.interface'
+
+const toStoryExportName = (appearanceGroup: string) =>
+  `${appearanceGroup.charAt(0).toUpperCase()}${appearanceGroup.slice(1)}`
+
+const getStoryTypeLabel = (title?: string) => {
+  if (!title) {
+    return undefined
+  }
+
+  const segments = title.split(' / ').map((segment) => segment.trim())
+  return segments.at(-1) || undefined
+}
+
+const createAppearanceTierStories = <TArgs extends { dataTestId?: string }>({
+  play,
+  playByGroup,
+  appearanceGroups,
+  appearanceShape,
+  appearanceSize,
+  appearanceStyle,
+  renderItem,
+  tiersByAppearance,
+}: CreateAppearanceTierStoriesOptions<TArgs>) => {
+  const stories: Record<
+    string,
+    {
+      play?: CreateAppearanceTierStoriesOptions<TArgs>['play']
+      render: (args: TArgs, context: { title?: string }) => ReactNode
+    }
+  > = {}
+
+  for (const appearanceGroup of appearanceGroups) {
+    stories[toStoryExportName(appearanceGroup)] = {
+      play: playByGroup?.[appearanceGroup] ?? play,
+      render: (args, context) =>
+        renderAppearanceTierRow({
+          dataTestId: args.dataTestId,
+          label: getStoryTypeLabel(context.title),
+          renderItem: ({ appearance, dataTestId, appearanceKey, tier }) =>
+            renderItem({
+              appearance,
+              dataTestId,
+              args,
+              appearanceKey,
+              tier,
+            }),
+          appearanceGroup: appearanceGroup,
+          appearanceShape: appearanceShape,
+          appearanceSize: appearanceSize,
+          appearanceStyle: appearanceStyle,
+          tiersByAppearance: tiersByAppearance,
+        }),
+    }
+  }
+
+  return stories
+}
+
+export { createAppearanceTierStories }

package/src/storybook/createAppearanceTierStories/index.ts

@@ -0,0 +1,2 @@
+export { createAppearanceTierStories } from './createAppearanceTierStories'
+export type { CreateAppearanceTierStoriesOptions } from './createAppearanceTierStories.interface'

package/src/storybook/createComponentGallery/createComponentGallery.interface.ts

@@ -0,0 +1,23 @@
+import type {
+  ComponentGallery,
+  ComponentGalleryAppearanceGroup,
+  ComponentGalleryAppearanceOptionName,
+  ComponentGalleryArgs,
+  ComponentGalleryArgType,
+  ComponentGalleryArgTypes,
+  ComponentGalleryOptions,
+  ComponentGalleryRenderParams,
+  ComponentGalleryResolved,
+} from '@itcase/ui-core/storybook'
+
+export type {
+  ComponentGallery,
+  ComponentGalleryAppearanceGroup,
+  ComponentGalleryAppearanceOptionName,
+  ComponentGalleryArgs,
+  ComponentGalleryArgType,
+  ComponentGalleryArgTypes,
+  ComponentGalleryOptions,
+  ComponentGalleryRenderParams,
+  ComponentGalleryResolved,
+}

package/src/storybook/createComponentGallery/createComponentGallery.tsx

@@ -0,0 +1,134 @@
+import type { ReactNode } from 'react'
+
+import { createComponentGallery as createComponentGalleryModel } from '@itcase/ui-core/storybook'
+import { mergeAppearanceKeys } from '@itcase/ui-core/utils'
+
+import { Group } from '../../components/Group'
+import { Text } from '../../components/Text'
+import type {
+  ComponentGalleryArgs,
+  ComponentGalleryOptions,
+  ComponentGalleryRenderParams,
+} from './createComponentGallery.interface'
+
+const DEFAULT_SIZE_ORDER = [
+  'sizeXXL',
+  'sizeXL',
+  'sizeL',
+  'sizeM',
+  'sizeS',
+  'sizeXS',
+  'sizeXXS',
+  'size56_32',
+  'size56_24',
+  'size40_40',
+  'size40_32',
+  'size40_24',
+  'size40_20',
+  'size32_32',
+  'size32_24',
+  'size32_20',
+  'size32_16',
+  'size24_24',
+  'size24_20',
+  'size24_16',
+  'size20_20',
+  'size20_16',
+  'size16_16',
+  'size8_8',
+]
+
+const createComponentGallery = <TAppearance extends string = string>({
+  sizeOrder = DEFAULT_SIZE_ORDER,
+  ...options
+}: ComponentGalleryOptions) => {
+  const gallery = createComponentGalleryModel({
+    ...options,
+    sizeOrder,
+  })
+
+  const {
+    appearanceList,
+    resolved: { resolveAppearanceKey },
+    sizeKeys,
+    tiersByAppearance,
+  } = gallery
+
+  const render = <TArgs extends ComponentGalleryArgs>(
+    args: TArgs,
+    renderComponent: (
+      params: ComponentGalleryRenderParams<TArgs, TAppearance>,
+    ) => ReactNode,
+  ) => {
+    const { shape: shapeKey, style: styleKey } = args
+
+    return (
+      <Group width="fill" direction="vertical" gap={24}>
+        {appearanceList.map((appearanceGroup) => {
+          const tiers = tiersByAppearance[appearanceGroup] ?? []
+
+          return (
+            <Group key={appearanceGroup} direction="vertical" gap={16}>
+              {tiers.map((tier) => {
+                const appearanceKey = resolveAppearanceKey(
+                  appearanceGroup,
+                  tier,
+                )
+
+                return (
+                  <Group key={appearanceKey} direction="vertical" gap={16}>
+                    <Text
+                      size="l"
+                      textColor="surfaceTextQuaternary"
+                      weight="bold"
+                    >
+                      {appearanceKey}
+                    </Text>
+                    <Group direction="horizontal" gap={16} wrap="wrap">
+                      {sizeKeys.map((sizeKey) => (
+                        <Group
+                          key={sizeKey}
+                          direction="vertical"
+                          alignItems="center"
+                          gap={8}
+                        >
+                          <Text
+                            size="s"
+                            textColor="surfaceTextQuaternary"
+                            weight="bold"
+                          >
+                            {sizeKey.replace(/^size/, '')}
+                          </Text>
+                          {renderComponent({
+                            appearance: mergeAppearanceKeys(
+                              appearanceKey,
+                              styleKey,
+                              shapeKey,
+                              sizeKey,
+                            ) as TAppearance,
+                            args: args,
+                            appearanceGroup: appearanceGroup,
+                            appearanceKey: appearanceKey,
+                            sizeKey: sizeKey,
+                            tier: tier,
+                          })}
+                        </Group>
+                      ))}
+                    </Group>
+                  </Group>
+                )
+              })}
+            </Group>
+          )
+        })}
+      </Group>
+    )
+  }
+
+  return {
+    ...gallery,
+    render,
+  }
+}
+
+export { createComponentGallery }

package/src/storybook/createComponentGallery/index.ts

@@ -0,0 +1,25 @@
+import { createComponentGallery } from './createComponentGallery'
+import type {
+  ComponentGallery,
+  ComponentGalleryAppearanceGroup,
+  ComponentGalleryAppearanceOptionName,
+  ComponentGalleryArgs,
+  ComponentGalleryArgType,
+  ComponentGalleryArgTypes,
+  ComponentGalleryOptions,
+  ComponentGalleryRenderParams,
+  ComponentGalleryResolved,
+} from './createComponentGallery.interface'
+
+export { createComponentGallery }
+export type {
+  ComponentGallery,
+  ComponentGalleryAppearanceGroup,
+  ComponentGalleryAppearanceOptionName,
+  ComponentGalleryArgs,
+  ComponentGalleryArgType,
+  ComponentGalleryArgTypes,
+  ComponentGalleryOptions,
+  ComponentGalleryRenderParams,
+  ComponentGalleryResolved,
+}