@itcase/ui-react-native 1.10.85 → 1.10.86

package/src/components/Checkmark/stories/CheckmarkDemo.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { createAppearanceOptions } from '../../../storybook'
+import { checkmarkAppearanceShape } from '../appearance/checkmarkShape'
+import { checkmarkAppearanceSize } from '../appearance/checkmarkSize'
+import { checkmarkAppearanceStyle } from '../appearance/checkmarkStyle'
+import { Checkmark } from '../Checkmark'
+import { checkmarkAppearance } from '../Checkmark.appearance'
+import type { CheckmarkProps, CheckmarkStoryArgs } from '../Checkmark.interface'
+
+const { getAppearanceOptions } = createAppearanceOptions(checkmarkAppearance, {
+  appearanceShape: checkmarkAppearanceShape,
+  appearanceSize: checkmarkAppearanceSize,
+  appearanceStyle: checkmarkAppearanceStyle,
+})
+
+const meta = {
+  title: 'Atoms / Checkmark',
+  component: Checkmark,
+  args: {
+    appearanceShape: 'rounded',
+    appearanceSize: 'sizeXXL',
+    appearanceStyle: 'solid',
+    appearanceType: 'accentPrimary',
+    isChecked: false,
+  },
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/HmHn0BShJPXHU8SmuIP71M/ITCase---Atoms?node-id=31-192880',
+    },
+    controls: {
+      include: [
+        'appearanceType',
+        'appearanceShape',
+        'appearanceSize',
+        'appearanceStyle',
+        'isChecked',
+        'isNegative',
+        'isDisabled',
+        'isSkeleton',
+      ],
+    },
+  },
+  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<CheckmarkStoryArgs>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Demo: StoryObj<CheckmarkStoryArgs> = {
+  render: ({
+    appearanceShape,
+    appearanceSize,
+    appearanceStyle,
+    appearanceType,
+    ...rest
+  }) => (
+    <Checkmark
+      {...rest}
+      appearance={
+        `${appearanceType} ${appearanceSize} ${appearanceStyle} ${appearanceShape}` as CheckmarkProps['appearance']
+      }
+    />
+  ),
+}

package/src/components/Checkmark/stories/CheckmarkGallery.stories.tsx

@@ -0,0 +1,138 @@
+import { useState } from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Checkmark } from '../Checkmark'
+import type {
+  CheckmarkGalleryStory,
+  CheckmarkProps,
+} from '../Checkmark.interface'
+import {
+  checkmarkGallery,
+  checkmarkStoryParameters,
+} from './CheckmarkStories.config'
+
+const meta = {
+  title: 'Atoms / Checkmark',
+  args: {
+    appearance: 'surface',
+    shape: 'rounded',
+    style: 'solid',
+    tier: 'Primary',
+    isChecked: true,
+    isDisabled: false,
+    isSkeleton: false,
+    isNegative: false,
+  },
+  parameters: checkmarkStoryParameters,
+  argTypes: {
+    appearance: checkmarkGallery.argTypes.appearance,
+    shape: checkmarkGallery.argTypes.shape,
+    style: checkmarkGallery.argTypes.style,
+    tier: checkmarkGallery.argTypes.tier,
+  },
+} satisfies Meta<CheckmarkGalleryStory>
+
+export default meta
+
+type Story = StoryObj<CheckmarkGalleryStory>
+
+interface CheckmarkGalleryItemProps {
+  isChecked?: CheckmarkGalleryStory['isChecked']
+  isDisabled?: CheckmarkGalleryStory['isDisabled']
+  isNegative?: CheckmarkGalleryStory['isNegative']
+  isSkeleton?: CheckmarkGalleryStory['isSkeleton']
+  appearance: CheckmarkProps['appearance']
+}
+
+function CheckmarkGalleryItem(props: CheckmarkGalleryItemProps) {
+  const {
+    appearance,
+    isChecked: checked = false,
+    isDisabled,
+    isSkeleton,
+    isNegative,
+  } = props
+  const [isChecked, setChecked] = useState(checked)
+
+  return (
+    <Checkmark
+      appearance={appearance}
+      isChecked={isChecked}
+      isDisabled={isDisabled}
+      isSkeleton={isSkeleton}
+      isNegative={isNegative}
+      onPress={() => {
+        if (isDisabled) {
+          return
+        }
+        setChecked((prev) => !prev)
+      }}
+    />
+  )
+}
+
+const renderCheckmarkGallery = (
+  args: CheckmarkGalleryStory,
+  options: {
+    isChecked?: CheckmarkGalleryStory['isChecked']
+    isNegative?: CheckmarkGalleryStory['isNegative']
+  } = {},
+) =>
+  checkmarkGallery.render(args, ({ appearance, args: storyArgs, sizeKey }) => (
+    <CheckmarkGalleryItem
+      appearance={appearance}
+      key={`${sizeKey}-${storyArgs.isChecked}-${storyArgs.isNegative}`}
+      isChecked={
+        options.isChecked !== undefined
+          ? options.isChecked
+          : storyArgs.isChecked
+      }
+      isDisabled={storyArgs.isDisabled}
+      isSkeleton={storyArgs.isSkeleton}
+      isNegative={
+        options.isNegative !== undefined
+          ? options.isNegative
+          : storyArgs.isNegative
+      }
+    />
+  ))
+
+export const Default: Story = {
+  name: 'Checkmark',
+  args: {
+    isChecked: false,
+    isNegative: false,
+  },
+  render: (args) =>
+    renderCheckmarkGallery(args, {
+      isChecked: false,
+      isNegative: false,
+    }),
+}
+
+export const Checked: Story = {
+  name: 'Checked',
+  args: {
+    isChecked: true,
+    isNegative: false,
+  },
+  render: (args) =>
+    renderCheckmarkGallery(args, {
+      isChecked: true,
+      isNegative: false,
+    }),
+}
+
+export const Negative: Story = {
+  name: 'Negative',
+  args: {
+    isChecked: false,
+    isNegative: true,
+  },
+  render: (args) =>
+    renderCheckmarkGallery(args, {
+      isChecked: false,
+      isNegative: true,
+    }),
+}

package/src/components/Checkmark/stories/CheckmarkNegative.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta } from '@storybook/react'
+
+import { createAppearanceTierStories } from '../../../storybook'
+import { Checkmark } from '../Checkmark'
+import type { CheckmarkProps } from '../Checkmark.interface'
+import {
+  CHECKMARK_APPEARANCE_GROUPS,
+  checkmarkGallery,
+  checkmarkStoryParameters,
+} from './CheckmarkStories.config'
+import { CheckmarkStoryItem } from './CheckmarkStoryItem'
+
+const meta = {
+  title: 'Atoms / Checkmark / Negative',
+  component: Checkmark,
+  args: {
+    isChecked: false,
+    isNegative: true,
+  },
+  parameters: checkmarkStoryParameters,
+} satisfies Meta<typeof Checkmark>
+
+export default meta
+
+const stories = createAppearanceTierStories({
+  renderItem: ({ appearance, args }) => (
+    <CheckmarkStoryItem
+      appearance={appearance as CheckmarkProps['appearance']}
+      args={{
+        ...(args as CheckmarkProps),
+        isChecked: false,
+        isNegative: true,
+      }}
+    />
+  ),
+  appearanceGroups: CHECKMARK_APPEARANCE_GROUPS,
+  appearanceSize: 'sizeXXL',
+  tiersByAppearance: checkmarkGallery.tiersByAppearance,
+})
+
+export const Accent = stories.Accent
+export const Surface = stories.Surface
+export const Error = stories.Error
+export const Disabled = stories.Disabled

package/src/components/Checkmark/stories/CheckmarkSize.stories.tsx

@@ -0,0 +1,85 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useState } from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Checkmark } from '../Checkmark'
+import type { CheckmarkProps } from '../Checkmark.interface'
+import { checkmarkStoryParameters } from './CheckmarkStories.config'
+
+const meta = {
+  title: 'Atoms / Checkmark / Size',
+  component: Checkmark,
+  args: {
+    isChecked: true,
+    isNegative: false,
+  },
+  parameters: checkmarkStoryParameters,
+} satisfies Meta<typeof Checkmark>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const renderCheckmarkSizeStory = (args: CheckmarkProps) => {
+  const [isChecked, setChecked] = useState(Boolean(args.isChecked))
+
+  return (
+    <Checkmark
+      {...args}
+      isChecked={isChecked}
+      onPress={() => {
+        setChecked((prev) => !prev)
+      }}
+    />
+  )
+}
+
+export const SizeXXL: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeXXL solid rounded',
+  },
+  render: renderCheckmarkSizeStory,
+}
+
+export const SizeXL: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeXL solid rounded',
+  },
+  render: renderCheckmarkSizeStory,
+}
+
+export const SizeL: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeL solid rounded',
+  },
+  render: renderCheckmarkSizeStory,
+}
+
+export const SizeM: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeM solid rounded',
+  },
+  render: renderCheckmarkSizeStory,
+}
+
+export const SizeS: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeS solid rounded',
+  },
+  render: renderCheckmarkSizeStory,
+}
+
+export const SizeXS: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeXS solid rounded',
+  },
+  render: renderCheckmarkSizeStory,
+}
+
+export const SizeXXS: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeXXS solid rounded',
+  },
+  render: renderCheckmarkSizeStory,
+}

package/src/components/Checkmark/stories/CheckmarkStories.config.ts

@@ -0,0 +1,67 @@
+import { createComponentGallery } from '../../../storybook'
+import { checkmarkAppearanceAccent } from '../appearance/checkmarkAccent'
+import { checkmarkAppearanceDisabled } from '../appearance/checkmarkDisabled'
+import { checkmarkAppearanceError } from '../appearance/checkmarkError'
+import { checkmarkAppearanceShape } from '../appearance/checkmarkShape'
+import { checkmarkAppearanceSize } from '../appearance/checkmarkSize'
+import { checkmarkAppearanceStyle } from '../appearance/checkmarkStyle'
+import { checkmarkAppearanceSurface } from '../appearance/checkmarkSurface'
+import type { CheckmarkAppearanceKey } from '../Checkmark.interface'
+
+const CHECKMARK_FIGMA_URL =
+  'https://www.figma.com/design/HmHn0BShJPXHU8SmuIP71M/ITCase---Atoms?node-id=31-192880'
+
+const CHECKMARK_APPEARANCE_GROUPS = [
+  'accent',
+  'surface',
+  'error',
+  'disabled',
+] as const
+
+const checkmarkStoryParameters = {
+  layout: 'centered' as const,
+  design: {
+    type: 'figma' as const,
+    url: CHECKMARK_FIGMA_URL,
+  },
+}
+
+const checkmarkSizeKeys = Object.keys(checkmarkAppearanceSize).filter(
+  (value): value is keyof typeof checkmarkAppearanceSize =>
+    value in checkmarkAppearanceSize,
+)
+
+const checkmarkTypeOptions = ['default', 'checked', 'negative'] as const
+
+const getCheckmarkTypeProps = (type: (typeof checkmarkTypeOptions)[number]) => {
+  switch (type) {
+    case 'default':
+      return { isChecked: false, isNegative: false }
+    case 'checked':
+      return { isChecked: true, isNegative: false }
+    case 'negative':
+      return { isChecked: false, isNegative: true }
+  }
+}
+
+const checkmarkGallery = createComponentGallery<CheckmarkAppearanceKey>({
+  size: checkmarkAppearanceSize,
+  appearanceGroups: {
+    error: checkmarkAppearanceError,
+    accent: checkmarkAppearanceAccent,
+    disabled: checkmarkAppearanceDisabled,
+    surface: checkmarkAppearanceSurface,
+  },
+  shape: checkmarkAppearanceShape,
+  style: checkmarkAppearanceStyle,
+})
+
+export {
+  CHECKMARK_APPEARANCE_GROUPS,
+  CHECKMARK_FIGMA_URL,
+  checkmarkGallery,
+  checkmarkSizeKeys,
+  checkmarkStoryParameters,
+  checkmarkTypeOptions,
+  getCheckmarkTypeProps,
+}

package/src/components/Checkmark/stories/CheckmarkStoryItem.tsx

@@ -0,0 +1,34 @@
+import { useState } from 'react'
+
+import { Checkmark } from '../Checkmark'
+import type { CheckmarkProps } from '../Checkmark.interface'
+
+interface CheckmarkStoryItemProps {
+  appearance: CheckmarkProps['appearance']
+  args: CheckmarkProps
+}
+
+function CheckmarkStoryItem(props: CheckmarkStoryItemProps) {
+  const { appearance, args } = props
+  const [isChecked, setChecked] = useState(Boolean(args.isChecked))
+  const isDisabledAppearance = String(appearance).startsWith('disabled')
+
+  return (
+    <Checkmark
+      {...args}
+      appearance={appearance}
+      isChecked={isChecked}
+      isDisabled={isDisabledAppearance || args.isDisabled}
+      onPress={
+        isDisabledAppearance
+          ? undefined
+          : (event) => {
+              setChecked((prev) => !prev)
+              args.onPress?.(event)
+            }
+      }
+    />
+  )
+}
+
+export { CheckmarkStoryItem }

package/src/components/Checkmark/stories/CheckmarkStyle.stories.tsx

@@ -0,0 +1,64 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useState } from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Checkmark } from '../Checkmark'
+import type { CheckmarkProps } from '../Checkmark.interface'
+import { checkmarkStoryParameters } from './CheckmarkStories.config'
+
+const meta = {
+  title: 'Atoms / Checkmark / Style',
+  component: Checkmark,
+  args: {
+    isChecked: true,
+    isNegative: false,
+  },
+  parameters: checkmarkStoryParameters,
+} satisfies Meta<typeof Checkmark>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const renderCheckmarkStyleStory = (args: CheckmarkProps) => {
+  const [isChecked, setChecked] = useState(Boolean(args.isChecked))
+
+  return (
+    <Checkmark
+      {...args}
+      isChecked={isChecked}
+      onPress={() => {
+        setChecked((prev) => !prev)
+      }}
+    />
+  )
+}
+
+export const Solid: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeXXL solid rounded',
+  },
+  render: renderCheckmarkStyleStory,
+}
+
+export const Outlined: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeXXL outlined rounded',
+  },
+  render: renderCheckmarkStyleStory,
+}
+
+export const Ghost: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeXXL ghost rounded',
+  },
+  render: renderCheckmarkStyleStory,
+}
+
+export const Full: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeXXL full rounded',
+  },
+  render: renderCheckmarkStyleStory,
+}

package/src/components/Checkmark/styles/checkmark.ts

@@ -6,12 +6,17 @@ const checkmarkStyles = StyleSheet.create({
     alignItems: 'center',
   },
   checkmark__icon: {
-    padding: 6,
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   checkmark__wrapper: {
+    justifyContent: 'center',
+    alignItems: 'center',
     borderRadius: 100,
   },
-  checkmark__wrapper_checked: {},
+  checkmark_state_disabled: {
+    opacity: 0.5,
+  },
 })
 
 export { checkmarkStyles }

package/src/components/Checkmark/styles/checkmarkSize.ts

@@ -0,0 +1,58 @@
+import { StyleSheet } from 'react-native'
+
+import { getVariantsPropsList } from '../../../utils'
+
+const checkmarkSizeStyles = StyleSheet.create({
+  checkmark_size_l: {
+    width: 48,
+    height: 48,
+    minWidth: 48,
+    minHeight: 48,
+  },
+  checkmark_size_m: {
+    width: 40,
+    height: 40,
+    minWidth: 40,
+    minHeight: 40,
+  },
+  checkmark_size_s: {
+    width: 32,
+    height: 32,
+    minWidth: 32,
+    minHeight: 32,
+  },
+  checkmark_size_xl: {
+    width: 56,
+    height: 56,
+    minWidth: 56,
+    minHeight: 56,
+  },
+  checkmark_size_xs: {
+    width: 24,
+    height: 24,
+    minWidth: 24,
+    minHeight: 24,
+  },
+  checkmark_size_xxl: {
+    width: 64,
+    height: 64,
+    minWidth: 64,
+    minHeight: 64,
+  },
+  checkmark_size_xxs: {
+    width: 16,
+    height: 16,
+    minWidth: 16,
+    minHeight: 16,
+  },
+})
+
+const checkmarkSizeList = getVariantsPropsList(
+  checkmarkSizeStyles,
+  'checkmark_size_',
+)
+
+type checkmarkSizePropsType = (typeof checkmarkSizeList)[number]
+
+export { checkmarkSizeList, checkmarkSizeStyles }
+export type { checkmarkSizePropsType }

package/src/components/Chips/Chips.interface.ts

@@ -37,6 +37,8 @@ interface ChipsAppearanceProps {
   fillActive?: FillActiveProps
   iconAfter?: SvgIconComponent
   iconAfterActive?: SvgIconComponent
+  iconAfterAppearance?: string
+  iconAfterAppearanceActive?: string
   iconAfterFill?: IconProps['fill']
   iconAfterFillActiveIcon?: IconProps['iconFill']
   iconAfterFillIcon?: IconProps['iconFill']
@@ -44,6 +46,8 @@ interface ChipsAppearanceProps {
   iconAfterSize?: IconProps['size']
   iconBefore?: SvgIconComponent
   iconBeforeActive?: SvgIconComponent
+  iconBeforeAppearance?: string
+  iconBeforeAppearanceActive?: string
   iconBeforeFill?: IconProps['fill']
   iconBeforeFillActiveIcon?: IconProps['iconFill']
   iconBeforeFillIcon?: IconProps['iconFill']
@@ -91,6 +95,25 @@ interface ChipsProps extends ChipsAppearanceProps {
   style?: StyleProp<ViewStyle>
 }
 
+type ChipsGalleryStory = {
+  appearance: string
+  iconAfter?: boolean
+  iconBefore?: boolean
+  isActive?: boolean
+  isDisabled?: boolean
+  label?: string
+  shape: string
+  style: string
+  tier: string
+}
+
+type ChipsStoryArgs = Omit<ChipsProps, 'appearance'> & {
+  appearanceShape: string
+  appearanceSize: string
+  appearanceStyle: string
+  appearanceType: string
+}
+
 export type {
   ChipsAppearance,
   ChipsAppearanceKey,
@@ -99,5 +122,7 @@ export type {
   ChipsAppearanceSize,
   ChipsAppearanceStyle,
   ChipsConfig,
+  ChipsGalleryStory,
   ChipsProps,
+  ChipsStoryArgs,
 }