@itcase/ui-react-native 1.10.84 → 1.10.86

package/src/components/Button/stories/ButtonStories.config.ts

@@ -1,28 +1,38 @@
+/* eslint-disable perfectionist/sort-objects */
+import { icons14, icons16, icons20, icons24 } from '@itcase/icons-default'
+
+import { createComponentGallery } from '../../../storybook'
 import { buttonAppearanceAccent } from '../appearance/buttonAccent'
 import { buttonAppearanceDanger } from '../appearance/buttonDanger'
+import { buttonAppearanceError } from '../appearance/buttonError'
 import { buttonAppearanceExtra } from '../appearance/buttonExtra'
+import { buttonAppearanceInfo } from '../appearance/buttonInfo'
+import { buttonAppearanceShape } from '../appearance/buttonShape'
+import { buttonAppearanceSize } from '../appearance/buttonSize'
+import { buttonAppearanceSpecial } from '../appearance/buttonSpecial'
+import { buttonAppearanceStyle } from '../appearance/buttonStyle'
+import { buttonAppearanceSuccess } from '../appearance/buttonSuccess'
 import { buttonAppearanceSurface } from '../appearance/buttonSurface'
+import { buttonAppearanceWarning } from '../appearance/buttonWarning'
 import type { ButtonAppearanceKey } from '../Button.interface'
+import type { buttonSizePropsType } from '../styles/buttonSize'
 
 const BUTTON_FIGMA_URL =
   'https://www.figma.com/design/HmHn0BShJPXHU8SmuIP71M/ITCase---Atoms?node-id=18-16754'
 
-const buttonAppearanceByGroup = {
-  accent: buttonAppearanceAccent,
-  danger: buttonAppearanceDanger,
-  extra: buttonAppearanceExtra,
-  surface: buttonAppearanceSurface,
-} as const
-
+/** Appearance groups used in type/tier stories (sidebar: Accent, Special, …). */
 const BUTTON_APPEARANCE_GROUPS = [
   'accent',
+  'special',
   'extra',
   'surface',
+  'error',
+  'success',
+  'warning',
   'danger',
+  'info',
 ] as const
 
-type ButtonAppearanceGroup = (typeof BUTTON_APPEARANCE_GROUPS)[number]
-
 const buttonStoryParameters = {
   layout: 'centered' as const,
   design: {
@@ -31,16 +41,119 @@ const buttonStoryParameters = {
   },
 }
 
-const getButtonAppearanceKeys = (
-  appearanceGroup: ButtonAppearanceGroup,
-): ButtonAppearanceKey[] =>
-  Object.keys(buttonAppearanceByGroup[appearanceGroup]) as ButtonAppearanceKey[]
+const buttonIconsBySizeKey = {
+  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 ButtonSizeKey = keyof typeof buttonIconsBySizeKey
+
+const isButtonSizeKey = (value: string): value is ButtonSizeKey =>
+  value in buttonIconsBySizeKey
+
+const getButtonTypeIcon = (appearanceSize: string = 'sizeM') =>
+  isButtonSizeKey(appearanceSize)
+    ? buttonIconsBySizeKey[appearanceSize]
+    : icons16.Placeholder.Default
+
+const buttonSizeKeys = Object.keys(buttonIconsBySizeKey).filter(isButtonSizeKey)
+
+const buttonSizeByAppearanceSize = {
+  sizeXXL: 'xxl',
+  sizeXL: 'xl',
+  sizeL: 'l',
+  sizeM: 'm',
+  sizeS: 's',
+  sizeXS: 'xs',
+  sizeXXS: 'xxs',
+} as const satisfies Record<ButtonSizeKey, buttonSizePropsType>
+
+const getButtonSize = (
+  appearanceSize: string = 'sizeM',
+): buttonSizePropsType =>
+  isButtonSizeKey(appearanceSize)
+    ? buttonSizeByAppearanceSize[appearanceSize]
+    : 'm'
+
+const buttonTypeOptions = ['default', 'label', 'icon', 'loading'] as const
+
+type ButtonTypeOption = (typeof buttonTypeOptions)[number]
+
+const getButtonTypeProps = (
+  type: ButtonTypeOption,
+  label: string = 'Button',
+  appearanceSize: string = 'sizeM',
+) => {
+  const icon = getButtonTypeIcon(appearanceSize)
+
+  switch (type) {
+    case 'default':
+      return {
+        icon: false as const,
+        iconAfter: icon,
+        iconBefore: icon,
+        isLoading: false,
+        label: label,
+      }
+    case 'label':
+      return {
+        icon: false as const,
+        iconAfter: false as const,
+        iconBefore: false as const,
+        isLoading: false,
+        label: label,
+      }
+    case 'icon':
+      return {
+        icon: icon,
+        iconAfter: false as const,
+        iconBefore: false as const,
+        isLoading: false,
+        label: undefined,
+      }
+    case 'loading':
+      return {
+        icon: false as const,
+        iconAfter: false as const,
+        iconBefore: false as const,
+        isLoading: true,
+        label: label,
+      }
+  }
+}
+
+const buttonGallery = createComponentGallery<ButtonAppearanceKey>({
+  size: buttonAppearanceSize,
+  appearanceGroups: {
+    accent: buttonAppearanceAccent,
+    error: buttonAppearanceError,
+    danger: buttonAppearanceDanger,
+    extra: buttonAppearanceExtra,
+    info: buttonAppearanceInfo,
+    special: buttonAppearanceSpecial,
+    success: buttonAppearanceSuccess,
+    surface: buttonAppearanceSurface,
+    warning: buttonAppearanceWarning,
+  },
+  shape: buttonAppearanceShape,
+  style: buttonAppearanceStyle,
+})
 
 export {
   BUTTON_APPEARANCE_GROUPS,
   BUTTON_FIGMA_URL,
-  buttonAppearanceByGroup,
+  buttonGallery,
+  buttonIconsBySizeKey,
+  buttonSizeKeys,
   buttonStoryParameters,
-  getButtonAppearanceKeys,
+  buttonTypeOptions,
+  getButtonSize,
+  getButtonTypeIcon,
+  getButtonTypeProps,
 }
-export type { ButtonAppearanceGroup }
+export type { ButtonSizeKey, ButtonTypeOption }

package/src/components/Button/stories/ButtonStyle.stories.tsx

@@ -1,15 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import { Button } from '../Button'
+import type { ButtonProps } from '../Button.interface'
 import { buttonStoryParameters } from './ButtonStories.config'
 
 const meta = {
   title: 'Atoms / Button / Style',
   component: Button,
   args: {
-    size: 'xxl',
     label: 'Button',
-    textSize: 'xxl',
   },
   parameters: buttonStoryParameters,
 } satisfies Meta<typeof Button>
@@ -20,28 +19,28 @@ type Story = StoryObj<typeof meta>
 
 export const Full: Story = {
   args: {
-    appearance: 'accentPrimary',
-    appearanceStyle: 'full',
+    appearance: 'accentPrimary sizeXXL full rounded',
   },
+  render: (args: ButtonProps) => <Button {...args} />,
 }
 
 export const Solid: Story = {
   args: {
-    appearance: 'accentPrimary',
-    appearanceStyle: 'solid',
+    appearance: 'accentPrimary sizeXXL solid rounded',
   },
+  render: (args: ButtonProps) => <Button {...args} />,
 }
 
 export const Outlined: Story = {
   args: {
-    appearance: 'accentSecondary',
-    appearanceStyle: 'outlined',
+    appearance: 'accentSecondary sizeXXL outlined rounded',
   },
+  render: (args: ButtonProps) => <Button {...args} />,
 }
 
 export const Ghost: Story = {
   args: {
-    appearance: 'accentSecondary',
-    appearanceStyle: 'ghost',
+    appearance: 'accentSecondary sizeXXL ghost rounded',
   },
+  render: (args: ButtonProps) => <Button {...args} />,
 }

package/src/components/Button/styles/button.ts

@@ -2,14 +2,11 @@ import { StyleSheet } from 'react-native'
 
 const buttonStyles = StyleSheet.create({
   button: {
-    width: '100%',
     flexDirection: 'row',
+    flexGrow: 0,
     justifyContent: 'center',
     alignItems: 'center',
     alignSelf: 'flex-start',
-    borderRadius: 4,
-    paddingVertical: 8,
-    paddingHorizontal: 16,
     gap: 8,
   },
   button__loader: {

package/src/components/Button/styles/buttonShape.ts

@@ -0,0 +1,35 @@
+import { StyleSheet } from 'react-native'
+
+import { getVariantsPropsList } from '../../../utils'
+
+const buttonShapeStyles = StyleSheet.create({
+  button_shape_circular: {
+    borderRadius: 100,
+    overflow: 'hidden',
+  },
+  button_shape_geometric: {
+    borderRadius: 0,
+  },
+  button_shape_rounded: {
+    borderRadius: 8,
+  },
+  button_shape_roundedL: {
+    borderRadius: 12,
+  },
+  button_shape_roundedM: {
+    borderRadius: 6,
+  },
+  button_shape_roundedS: {
+    borderRadius: 4,
+  },
+  button_shape_roundedXL: {
+    borderRadius: 16,
+  },
+})
+
+const buttonShapeList = getVariantsPropsList(buttonShapeStyles, 'button_shape_')
+
+type buttonShapePropsType = (typeof buttonShapeList)[number]
+
+export { buttonShapeList, buttonShapeStyles }
+export type { buttonShapePropsType }

package/src/components/Cell/stories/CellDirection.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Cell } from '../Cell'
+import type { CellProps } from '../Cell.interface'
+import { cellMock } from './__mock__'
+import { cellStoryParameters } from './CellStories.config'
+
+const meta = {
+  title: 'Molecules / Cell / Direction',
+  component: Cell,
+  args: {
+    ...cellMock,
+    size: 'xl',
+    fill: 'surfacePrimary',
+  },
+  parameters: cellStoryParameters,
+} satisfies Meta<typeof Cell>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Vertical: Story = {
+  args: {
+    direction: 'vertical',
+  },
+  render: (args: CellProps) => {
+    return <Cell {...args} />
+  },
+}
+
+export const Horizontal: Story = {
+  args: {
+    direction: 'horizontal',
+  },
+  render: (args: CellProps) => {
+    return <Cell {...args} />
+  },
+}

package/src/components/Cell/stories/CellSizeHorizontal.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Cell } from '../Cell'
+import type { CellProps } from '../Cell.interface'
+import { cellMock } from './__mock__'
+import { cellStoryParameters } from './CellStories.config'
+
+const meta = {
+  title: 'Molecules / Cell / Size / Horizontal',
+  component: Cell,
+  args: {
+    ...cellMock,
+    direction: 'horizontal',
+    fill: 'surfacePrimary',
+  },
+  parameters: cellStoryParameters,
+} satisfies Meta<typeof Cell>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const SizeXL: Story = {
+  args: {
+    size: 'xl',
+  },
+  render: (args: CellProps) => {
+    return <Cell {...args} />
+  },
+}
+
+export const SizeM: Story = {
+  args: {
+    size: 'm',
+  },
+  render: (args: CellProps) => {
+    return <Cell {...args} />
+  },
+}

package/src/components/Cell/stories/CellSizeVertical.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Cell } from '../Cell'
+import type { CellProps } from '../Cell.interface'
+import { cellMock } from './__mock__'
+import { cellStoryParameters } from './CellStories.config'
+
+const meta = {
+  title: 'Molecules / Cell / Size / Vertical',
+  component: Cell,
+  args: {
+    ...cellMock,
+    direction: 'vertical',
+    fill: 'surfacePrimary',
+  },
+  parameters: cellStoryParameters,
+} satisfies Meta<typeof Cell>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const SizeXL: Story = {
+  args: {
+    size: 'xl',
+  },
+  render: (args: CellProps) => {
+    return <Cell {...args} />
+  },
+}
+
+export const SizeM: Story = {
+  args: {
+    size: 'm',
+  },
+  render: (args: CellProps) => {
+    return <Cell {...args} />
+  },
+}

package/src/components/Cell/stories/CellStories.config.ts

@@ -0,0 +1,12 @@
+const CELL_FIGMA_URL =
+  'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=3-47138'
+
+const cellStoryParameters = {
+  layout: 'centered' as const,
+  design: {
+    type: 'figma' as const,
+    url: CELL_FIGMA_URL,
+  },
+}
+
+export { CELL_FIGMA_URL, cellStoryParameters }

package/src/components/Cell/stories/__mock__/index.ts

@@ -0,0 +1,6 @@
+const cellMock = {
+  title: 'Title',
+  text: 'Value',
+}
+
+export { cellMock }

package/src/components/Checkbox/Checkbox.helpers.ts

@@ -0,0 +1,63 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { Animated, Easing, type ViewStyle } from 'react-native'
+
+import type { ItemFillActiveProps } from '@itcase/types-ui'
+
+import { colorTheme } from '../../utils'
+import {
+  CHECKMARK_ICON_ANIMATION_DURATION,
+  CHECKMARK_ICON_SPRING_CONFIG,
+} from '../Checkmark/Checkmark.constants'
+
+function resolveCheckboxCheckmarkColor(iconFillKey?: ItemFillActiveProps) {
+  if (!iconFillKey || iconFillKey === 'none') {
+    return undefined
+  }
+
+  return colorTheme[iconFillKey]
+}
+
+function useCheckboxCheckmarkAnimation(isVisible: boolean) {
+  const [progress] = useState(() => new Animated.Value(isVisible ? 1 : 0))
+  const isFirstRenderRef = useRef(true)
+
+  useEffect(() => {
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false
+      progress.setValue(isVisible ? 1 : 0)
+      return
+    }
+
+    if (isVisible) {
+      Animated.spring(progress, {
+        ...CHECKMARK_ICON_SPRING_CONFIG,
+        toValue: 1,
+        useNativeDriver: true,
+      }).start()
+      return
+    }
+
+    Animated.timing(progress, {
+      duration: CHECKMARK_ICON_ANIMATION_DURATION,
+      easing: Easing.in(Easing.cubic),
+      toValue: 0,
+      useNativeDriver: true,
+    }).start()
+  }, [isVisible, progress])
+
+  const animatedStyle = useMemo((): Animated.WithAnimatedValue<ViewStyle> => {
+    return {
+      opacity: progress,
+      transform: [
+        { translateX: '-50%' },
+        { translateY: '-50%' },
+        { rotate: '45deg' },
+        { scale: progress },
+      ],
+    }
+  }, [progress])
+
+  return animatedStyle
+}
+
+export { resolveCheckboxCheckmarkColor, useCheckboxCheckmarkAnimation }

package/src/components/Checkbox/Checkbox.interface.ts

@@ -11,15 +11,19 @@ import type {
   AppearanceStyleKey,
   BorderColorActiveProps,
   BorderColorProps,
-  CompositeAppearanceKeys,
+  CompositeAppearanceStateDefault,
   FillActiveProps,
   FillProps,
+  ItemFillActiveProps,
   TextColorProps,
   TextSizeProps,
   TextWeightProps,
   WidthProps,
 } from '@itcase/types-ui'
 
+import type { ComponentGalleryArgs } from '../../storybook'
+import type { SvgIconComponent } from '../Icon/Icon.interface'
+import type { iconGlyphSizePropsType } from '../Icon/styles/iconSize'
 import type { checkboxAlignPropsType } from './styles/checkboxAlign'
 import type { checkboxShapePropsType } from './styles/checkboxShape'
 import type { checkboxSizePropsType } from './styles/checkboxSize'
@@ -28,6 +32,8 @@ interface CheckboxAppearanceProps {
   borderColor?: BorderColorProps
   borderColorCheckbox?: BorderColorProps
   borderColorCheckboxActive?: BorderColorActiveProps
+  checkboxCheckedIcon?: SvgIconComponent
+  checkboxIconSize?: iconGlyphSizePropsType
   descTextColor?: TextColorProps
   descTextSize?: TextSizeProps
   descTextWeight?: TextWeightProps
@@ -35,6 +41,7 @@ interface CheckboxAppearanceProps {
   fillCheckbox?: FillProps
   fillCheckboxActive?: FillActiveProps
   fillCheckmark?: FillProps
+  iconFillIcon?: ItemFillActiveProps
   labelTextColor?: TextColorProps
   labelTextSize?: TextSizeProps
   labelTextWeight?: TextWeightProps
@@ -42,7 +49,8 @@ interface CheckboxAppearanceProps {
   size?: checkboxSizePropsType
 }
 
-type CheckboxAppearanceKey = AppearanceKeysState | CompositeAppearanceKeys
+type CheckboxAppearanceKey =
+  AppearanceKeysState | CompositeAppearanceStateDefault
 type CheckboxConfig = AppearanceConfig<
   AppearanceKeysState,
   CheckboxAppearanceProps
@@ -65,7 +73,11 @@ type CheckboxAppearanceShape = AppearancePartialRecord<
 type CheckboxAppearanceSize = AppearancePartialRecord<
   AppearanceSizeKey,
   CheckboxAppearanceProps,
-  'descTextSize' | 'labelTextSize' | 'size'
+  | 'checkboxCheckedIcon'
+  | 'checkboxIconSize'
+  | 'descTextSize'
+  | 'labelTextSize'
+  | 'size'
 >
 
 interface CheckboxProps extends CheckboxAppearanceProps {
@@ -87,6 +99,12 @@ interface CheckboxProps extends CheckboxAppearanceProps {
   width?: WidthProps
 }
 
+type CheckboxGalleryStory = ComponentGalleryArgs &
+  Pick<
+    CheckboxProps,
+    'checked' | 'desc' | 'indeterminate' | 'isDisabled' | 'label'
+  >
+
 export type {
   CheckboxAppearance,
   CheckboxAppearanceKey,
@@ -95,5 +113,6 @@ export type {
   CheckboxAppearanceSize,
   CheckboxAppearanceStyle,
   CheckboxConfig,
+  CheckboxGalleryStory,
   CheckboxProps,
 }