@itcase/ui-react-native 1.10.85 → 1.10.86

package/src/components/Tile/stories/TileStories.config.ts

@@ -0,0 +1,30 @@
+import { createComponentGallery } from '../../../storybook'
+import { tileAppearanceShape } from '../appearance/tileShape'
+import { tileAppearanceSize } from '../appearance/tileSize'
+import { tileAppearanceStyle } from '../appearance/tileStyle'
+import { tileAppearanceSurface } from '../appearance/tileSurface'
+import type { TileAppearanceKey } from '../Tile.interface'
+
+const TILE_APPEARANCE_GROUPS = ['surface'] as const
+
+const tileStoryParameters = {
+  layout: 'centered' as const,
+}
+
+const tileGallery = createComponentGallery<TileAppearanceKey>({
+  size: tileAppearanceSize,
+  appearanceGroups: {
+    surface: tileAppearanceSurface,
+  },
+  shape: tileAppearanceShape,
+  style: tileAppearanceStyle,
+})
+
+export {
+  TILE_APPEARANCE_GROUPS,
+  tileAppearanceShape,
+  tileAppearanceSize,
+  tileAppearanceStyle,
+  tileGallery,
+  tileStoryParameters,
+}

package/src/components/Tile/stories/TileStyle.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import { Tile } from '../Tile'
+import type { TileProps } from '../Tile.interface'
+import { tileStoryParameters } from './TileStories.config'
 
 const meta = {
   title: 'Molecules / Tile / Style',
@@ -9,32 +11,44 @@ const meta = {
     title: 'Title 123',
     desc: 'Text 123',
   },
+  parameters: tileStoryParameters,
 } satisfies Meta<typeof Tile>
-
 export default meta
 
-type Story = StoryObj<typeof Tile>
+type Story = StoryObj<typeof meta>
 
 export const Solid: Story = {
   args: {
     appearance: 'surfacePrimary sizeXL solid rounded',
   },
+  render: (args: TileProps) => {
+    return <Tile {...args} />
+  },
 }
 
 export const Outlined: Story = {
   args: {
     appearance: 'surfacePrimary sizeXL outlined rounded',
   },
+  render: (args: TileProps) => {
+    return <Tile {...args} />
+  },
 }
 
-export const Full: Story = {
+export const Ghost: Story = {
   args: {
-    appearance: 'surfacePrimary sizeXL full rounded',
+    appearance: 'surfacePrimary sizeXL ghost rounded',
+  },
+  render: (args: TileProps) => {
+    return <Tile {...args} />
   },
 }
 
-export const Ghost: Story = {
+export const Full: Story = {
   args: {
-    appearance: 'surfacePrimary sizeXL ghost rounded',
+    appearance: 'surfacePrimary sizeXL full rounded',
+  },
+  render: (args: TileProps) => {
+    return <Tile {...args} />
   },
 }

package/src/components/Tile/stories/TileSwap.stories.tsx

@@ -4,7 +4,7 @@ import { Button } from '../../Button'
 import { Tile } from '../Tile'
 
 const meta = {
-  title: 'Molecules / Tile / Swap',
+  title: 'Molecules / Tile',
   component: Tile,
   args: {
     appearance: 'surfacePrimary sizeXL solid rounded',
@@ -15,7 +15,7 @@ const meta = {
 
 export default meta
 
-type Story = StoryObj<typeof Tile>
+type Story = StoryObj<typeof meta>
 
 export const Before: Story = {
   args: {

package/src/components/Title/stories/TitleSize.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Title } from '../Title'
+import type { TitleProps } from '../Title.interface'
+
+const meta = {
+  title: 'Typography / Title / Size',
+  component: Title,
+  args: {
+    textColor: 'surfaceTextPrimary',
+    children: 'Title',
+  },
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/WVEr09jKtM7ZRytr14JOSb/ITCase---Typography-Connector?node-id=2-3185',
+    },
+  },
+} satisfies Meta<typeof Title>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const h1: Story = {
+  args: {
+    size: 'h1',
+  },
+  render: (args: TitleProps) => {
+    return <Title {...args} />
+  },
+}
+
+export const h2: Story = {
+  args: {
+    size: 'h2',
+  },
+  render: (args: TitleProps) => {
+    return <Title {...args} />
+  },
+}
+
+export const h3: Story = {
+  args: {
+    size: 'h3',
+  },
+  render: (args: TitleProps) => {
+    return <Title {...args} />
+  },
+}
+
+export const h4: Story = {
+  args: {
+    size: 'h4',
+  },
+  render: (args: TitleProps) => {
+    return <Title {...args} />
+  },
+}
+
+export const h5: Story = {
+  args: {
+    size: 'h5',
+  },
+  render: (args: TitleProps) => {
+    return <Title {...args} />
+  },
+}
+
+export const h6: Story = {
+  args: {
+    size: 'h6',
+  },
+  render: (args: TitleProps) => {
+    return <Title {...args} />
+  },
+}

package/src/components/Tooltip/Tooltip.interface.ts

@@ -10,6 +10,7 @@ import type {
   AppearanceSizeKey,
   AppearanceStyleKey,
   BorderColorProps,
+  CompositeAppearanceStateDefault,
   FillProps,
   ShapeProps,
   SizeProps,
@@ -19,6 +20,8 @@ import type {
   TitleSizeProps,
 } from '@itcase/types-ui'
 
+import type { ComponentGalleryArgs } from '../../storybook'
+
 type TooltipPosition = 'bottom' | 'left' | 'right' | 'top'
 
 interface TooltipAppearanceProps {
@@ -46,7 +49,8 @@ interface TooltipProps extends TooltipAppearanceProps {
   title?: string
 }
 
-type TooltipAppearanceKey = AppearanceKeysState
+type TooltipAppearanceKey =
+  AppearanceKeysState | CompositeAppearanceStateDefault
 type TooltipConfig = AppearanceConfig<
   AppearanceKeysState,
   TooltipAppearanceProps
@@ -68,6 +72,16 @@ type TooltipAppearanceSize = AppearancePartialRecord<
   'size' | 'textSize' | 'titleSize'
 >
 
+type TooltipGalleryStory = ComponentGalleryArgs &
+  Pick<TooltipProps, 'isVisible' | 'text' | 'title'>
+
+type TooltipStoryArgs = Omit<TooltipProps, 'appearance'> & {
+  appearanceShape: string
+  appearanceSize: string
+  appearanceStyle: string
+  appearanceType: string
+}
+
 export type {
   TooltipAppearance,
   TooltipAppearanceKey,
@@ -76,6 +90,8 @@ export type {
   TooltipAppearanceSize,
   TooltipAppearanceStyle,
   TooltipConfig,
+  TooltipGalleryStory,
   TooltipPosition,
   TooltipProps,
+  TooltipStoryArgs,
 }

package/src/components/Tooltip/Tooltip.tsx

@@ -1,6 +1,11 @@
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useState } 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 { Title } from '../Title'
@@ -8,7 +13,6 @@ import { tooltipAppearance } from './Tooltip.appearance'
 import type { TooltipConfig, TooltipProps } from './Tooltip.interface'
 import { styles } from './Tooltip.styles'
 
-const DEFAULT_TOOLTIP_APPEARANCE = 'defaultPrimary'
 const DEFAULT_TOOLTIP_POSITION = 'top'
 
 const tooltipConfig: TooltipConfig = {
@@ -22,8 +26,7 @@ tooltipConfig.setAppearance(tooltipAppearance)
 
 function Tooltip(props: TooltipProps) {
   const {
-    appearance,
-    fill,
+    appearance = 'defaultPrimary sizeL solid rounded',
     position,
     title,
     text,
@@ -38,19 +41,21 @@ function Tooltip(props: TooltipProps) {
   const [isInternalVisible, setIsInternalVisible] = useState(false)
   const isBubbleVisible = isControlled ? isVisible : isInternalVisible
 
-  const appearanceConfig = useMemo(() => {
-    const appearanceKey = appearance || DEFAULT_TOOLTIP_APPEARANCE
-
-    if (!tooltipConfig.appearance) {
-      return undefined
-    }
+  const appearanceConfig = useAppearanceConfig(appearance, tooltipConfig)
+  const propsGenerator = useDevicePropsGenerator(props, appearanceConfig)
 
-    return tooltipConfig.appearance[appearanceKey]
-  }, [appearance])
+  const {
+    fill,
+    titleColor,
+    titleSize,
+    titleWeight,
+    borderColor,
+    textColor,
+    textSize,
+    textWeight,
+    shape,
+  } = propsGenerator
 
-  const fillKey = fill || appearanceConfig?.fill
-  const shapeKey = appearanceConfig?.shape
-  const borderColorKey = appearanceConfig?.borderColor
   const positionKey = position || DEFAULT_TOOLTIP_POSITION
 
   const onPressTrigger = useCallback(() => {
@@ -72,7 +77,7 @@ function Tooltip(props: TooltipProps) {
   }, [isControlled])
 
   return (
-    <View style={[styles.tooltip, style && style]}>
+    <View style={[styles.tooltip, style]}>
       <Pressable onLongPress={onLongPressTrigger} onPress={onPressTrigger}>
         {children}
       </Pressable>
@@ -82,27 +87,19 @@ function Tooltip(props: TooltipProps) {
           style={[
             styles.tooltip__bubble,
             styles[`tooltip__bubble_${positionKey}`],
-            fillKey && tokens[`fill_${fillKey}`],
-            shapeKey && tokens[`shape_${shapeKey}`],
-            borderColorKey && tokens[`border_color_${borderColorKey}`],
+            fill && tokens[`fill_${fill}`],
+            shape && tokens[`shape_${shape}`],
+            borderColor && tokens[`border_color_${borderColor}`],
           ]}
         >
           {before}
           {title && (
-            <Title
-              size={appearanceConfig?.titleSize}
-              textColor={appearanceConfig?.titleColor}
-              weight={appearanceConfig?.titleWeight}
-            >
+            <Title size={titleSize} textColor={titleColor} weight={titleWeight}>
               {title}
             </Title>
           )}
           {text && (
-            <Text
-              size={appearanceConfig?.textSize}
-              textColor={appearanceConfig?.textColor}
-              weight={appearanceConfig?.textWeight}
-            >
+            <Text size={textSize} textColor={textColor} weight={textWeight}>
               {text}
             </Text>
           )}

package/src/components/Tooltip/appearance/tooltipShape.ts

@@ -8,16 +8,16 @@ const tooltipAppearanceShape = {
     shape: 'rounded',
   },
   roundedXL: {
-    shape: 'rounded',
+    shape: 'roundedXL',
   },
   roundedL: {
-    shape: 'rounded',
+    shape: 'roundedL',
   },
   roundedM: {
-    shape: 'rounded',
+    shape: 'roundedM',
   },
   roundedS: {
-    shape: 'rounded',
+    shape: 'roundedS',
   },
 } satisfies TooltipAppearanceShape
 

package/src/components/Tooltip/stories/TooltipAppearance.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Tooltip } from '../Tooltip'
+import type { TooltipProps } from '../Tooltip.interface'
+import { tooltipStoryParameters } from './TooltipStories.config'
+
+const meta = {
+  title: 'Atoms / Tooltip / Appearance',
+  component: Tooltip,
+  args: {
+    title: 'Title',
+    text: 'Text',
+    isVisible: true,
+  },
+  parameters: tooltipStoryParameters,
+} satisfies Meta<typeof Tooltip>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL solid rounded',
+  },
+  render: (args: TooltipProps) => {
+    return <Tooltip {...args} />
+  },
+}
+
+export const Error: Story = {
+  args: {
+    appearance: 'errorPrimary sizeL solid rounded',
+  },
+  render: (args: TooltipProps) => {
+    return <Tooltip {...args} />
+  },
+}
+
+export const Success: Story = {
+  args: {
+    appearance: 'successPrimary sizeL solid rounded',
+  },
+  render: (args: TooltipProps) => {
+    return <Tooltip {...args} />
+  },
+}
+
+export const Require: Story = {
+  args: {
+    appearance: 'requirePrimary sizeL solid rounded',
+  },
+  render: (args: TooltipProps) => {
+    return <Tooltip {...args} />
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    appearance: 'disabledPrimary sizeL solid rounded',
+  },
+  render: (args: TooltipProps) => {
+    return <Tooltip {...args} />
+  },
+}

package/src/components/Tooltip/stories/TooltipCustom.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Tooltip } from '../Tooltip'
+import type { TooltipProps } from '../Tooltip.interface'
+import { tooltipStoryParameters } from './TooltipStories.config'
+
+const meta = {
+  title: 'Atoms / Tooltip / Custom',
+  component: Tooltip,
+  args: {
+    title: 'Title',
+    text: 'Text',
+    isVisible: true,
+  },
+  parameters: tooltipStoryParameters,
+} satisfies Meta<typeof Tooltip>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Custom: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL solid rounded',
+    fill: 'black',
+    titleColor: 'white',
+    textColor: 'white',
+  },
+  render: (args: TooltipProps) => {
+    return <Tooltip {...args} />
+  },
+}

package/src/components/Tooltip/stories/TooltipDemo.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { createAppearanceOptions } from '../../../storybook'
+import { tooltipAppearanceShape } from '../appearance/tooltipShape'
+import { tooltipAppearanceSize } from '../appearance/tooltipSize'
+import { tooltipAppearanceStyle } from '../appearance/tooltipStyle'
+import { Tooltip } from '../Tooltip'
+import { tooltipAppearance } from '../Tooltip.appearance'
+import type { TooltipProps, TooltipStoryArgs } from '../Tooltip.interface'
+import { tooltipStoryParameters } from './TooltipStories.config'
+
+const { getAppearanceOptions } = createAppearanceOptions(tooltipAppearance, {
+  appearanceShape: tooltipAppearanceShape,
+  appearanceSize: tooltipAppearanceSize,
+  appearanceStyle: tooltipAppearanceStyle,
+})
+
+const meta = {
+  title: 'Atoms / Tooltip',
+  component: Tooltip,
+  args: {
+    title: 'Title',
+    text: 'Text',
+    appearanceShape: 'rounded',
+    appearanceSize: 'sizeL',
+    appearanceStyle: 'solid',
+    appearanceType: 'defaultPrimary',
+    isVisible: true,
+  },
+  parameters: {
+    ...tooltipStoryParameters,
+    controls: {
+      include: [
+        'appearanceType',
+        'appearanceShape',
+        'appearanceSize',
+        'appearanceStyle',
+        'title',
+        'text',
+      ],
+    },
+  },
+  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<TooltipStoryArgs>
+export default meta
+
+export const Demo: StoryObj<TooltipStoryArgs> = {
+  render: ({
+    appearanceShape,
+    appearanceSize,
+    appearanceStyle,
+    appearanceType,
+    ...rest
+  }) => {
+    const appearance =
+      `${appearanceType} ${appearanceSize} ${appearanceStyle} ${appearanceShape}` as TooltipProps['appearance']
+
+    return <Tooltip {...rest} appearance={appearance} />
+  },
+}

package/src/components/Tooltip/stories/TooltipGallery.stories.tsx

@@ -0,0 +1,85 @@
+/* eslint-disable perfectionist/sort-objects */
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Tooltip } from '../Tooltip'
+import type { TooltipGalleryStory } from '../Tooltip.interface'
+import { tooltipGallery, tooltipStoryParameters } from './TooltipStories.config'
+
+const meta = {
+  title: 'Atoms / Tooltip',
+  args: {
+    appearance: 'default',
+    tier: 'Primary',
+    style: 'solid',
+    shape: 'rounded',
+    title: 'Title',
+    text: 'Text',
+    isVisible: true,
+  },
+  parameters: tooltipStoryParameters,
+  argTypes: {
+    appearance: tooltipGallery.argTypes.appearance,
+    tier: tooltipGallery.argTypes.tier,
+    style: tooltipGallery.argTypes.style,
+    shape: tooltipGallery.argTypes.shape,
+  },
+} satisfies Meta<TooltipGalleryStory>
+
+export default meta
+
+type Story = StoryObj<TooltipGalleryStory>
+
+const renderTooltipGallery = (
+  args: TooltipGalleryStory,
+  options: {
+    text?: TooltipGalleryStory['text']
+    title?: TooltipGalleryStory['title']
+  } = {},
+) =>
+  tooltipGallery.render(args, ({ appearance, args: storyArgs }) => (
+    <Tooltip
+      appearance={appearance}
+      title={options.title !== undefined ? options.title : storyArgs.title}
+      text={options.text !== undefined ? options.text : storyArgs.text}
+      isVisible={storyArgs.isVisible}
+    />
+  ))
+
+export const TextOnly: Story = {
+  name: 'Text',
+  args: {
+    title: undefined,
+    text: 'Text',
+  },
+  render: (args) =>
+    renderTooltipGallery(args, {
+      title: undefined,
+      text: args.text,
+    }),
+}
+
+export const TitleOnly: Story = {
+  name: 'Title',
+  args: {
+    title: 'Title',
+    text: undefined,
+  },
+  render: (args) =>
+    renderTooltipGallery(args, {
+      title: args.title,
+      text: undefined,
+    }),
+}
+
+export const TitleText: Story = {
+  name: 'Title + Text',
+  args: {
+    title: 'Title',
+    text: 'Text',
+  },
+  render: (args) =>
+    renderTooltipGallery(args, {
+      title: args.title,
+      text: args.text,
+    }),
+}

package/src/components/Tooltip/stories/TooltipShape.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Tooltip } from '../Tooltip'
+import type { TooltipProps } from '../Tooltip.interface'
+import { tooltipStoryParameters } from './TooltipStories.config'
+
+const meta = {
+  title: 'Atoms / Tooltip / Shape',
+  component: Tooltip,
+  args: {
+    title: 'Title',
+    text: 'Text',
+    isVisible: true,
+  },
+  parameters: tooltipStoryParameters,
+} satisfies Meta<typeof Tooltip>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Rounded: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL solid rounded',
+  },
+  render: (args: TooltipProps) => {
+    return <Tooltip {...args} />
+  },
+}
+
+export const RoundedS: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL solid roundedS',
+  },
+  render: (args: TooltipProps) => {
+    return <Tooltip {...args} />
+  },
+}
+
+export const RoundedM: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL solid roundedM',
+  },
+  render: (args: TooltipProps) => {
+    return <Tooltip {...args} />
+  },
+}
+
+export const RoundedL: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL solid roundedL',
+  },
+  render: (args: TooltipProps) => {
+    return <Tooltip {...args} />
+  },
+}
+
+export const RoundedXL: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL solid roundedXL',
+  },
+  render: (args: TooltipProps) => {
+    return <Tooltip {...args} />
+  },
+}
+
+export const Circular: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL solid circular',
+  },
+  render: (args: TooltipProps) => {
+    return <Tooltip {...args} />
+  },
+}