@itcase/ui-react-native 1.10.85 → 1.10.86

package/src/components/InputPassword/stories/InputPasswordStyle.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { InputPassword } from '../InputPassword'
+import type { InputPasswordProps } from '../InputPassword.interface'
+
+const meta = {
+  title: 'Atoms / InputPassword / Style',
+  component: InputPassword,
+  args: {
+    placeholder: 'Placeholder',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/HmHn0BShJPXHU8SmuIP71M/ITCase---Atoms?node-id=2228-10428',
+    },
+  },
+} satisfies Meta<typeof InputPassword>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Solid: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeXL solid rounded',
+  },
+  render: (args: InputPasswordProps) => {
+    return <InputPassword {...args} />
+  },
+}
+
+export const Outlined: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeXL outlined rounded',
+  },
+  render: (args: InputPasswordProps) => {
+    return <InputPassword {...args} />
+  },
+}
+
+export const Ghost: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeXL ghost rounded',
+  },
+  render: (args: InputPasswordProps) => {
+    return <InputPassword {...args} />
+  },
+}
+
+export const Full: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeXL full rounded',
+  },
+  render: (args: InputPasswordProps) => {
+    return <InputPassword {...args} />
+  },
+}

package/src/components/InputPassword/stories/InputPasswordSuccess.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { InputPassword } from '../InputPassword'
+import type { InputPasswordProps } from '../InputPassword.interface'
+
+const meta = {
+  title: 'Atoms / InputPassword / Success',
+  component: InputPassword,
+  args: {
+    appearance: 'successPrimary sizeXL solid rounded',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/HmHn0BShJPXHU8SmuIP71M/ITCase---Atoms?node-id=2228-10428',
+    },
+  },
+} satisfies Meta<typeof InputPassword>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Placeholder: Story = {
+  args: {
+    placeholder: 'Placeholder',
+  },
+  render: (args: InputPasswordProps) => {
+    return <InputPassword {...args} />
+  },
+}
+
+export const Filled: Story = {
+  args: {
+    value: 'password',
+  },
+  render: (args: InputPasswordProps) => {
+    return <InputPassword {...args} />
+  },
+}
+
+export const Blank: Story = {
+  render: (args: InputPasswordProps) => {
+    return <InputPassword {...args} />
+  },
+}

package/src/components/InputPassword/stories/InputPasswordType.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { InputPassword } from '../InputPassword'
+import type { InputPasswordProps } from '../InputPassword.interface'
+import { inputPasswordStoryParameters } from './InputPasswordStories.config'
+
+const meta = {
+  title: 'Atoms / InputPassword / Type',
+  component: InputPassword,
+  args: {
+    appearance: 'defaultPrimary sizeXL solid rounded',
+    placeholder: 'Placeholder',
+    value: 'someDifficultPassword',
+  },
+  parameters: inputPasswordStoryParameters,
+} satisfies Meta<typeof InputPassword>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const InputType: Story = {
+  render: (args: InputPasswordProps) => {
+    return <InputPassword {...args} />
+  },
+}

package/src/components/InputPassword/stories/InputPasswordValue.stories.tsx

@@ -0,0 +1,38 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useState } from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { InputPassword } from '../InputPassword'
+import type { InputPasswordProps } from '../InputPassword.interface'
+import { inputPasswordStoryParameters } from './InputPasswordStories.config'
+
+const meta = {
+  title: 'Atoms / InputPassword / Value',
+  component: InputPassword,
+  args: {
+    appearance: 'defaultPrimary sizeXL solid rounded',
+    placeholder: 'Placeholder',
+  },
+  parameters: inputPasswordStoryParameters,
+} satisfies Meta<typeof InputPassword>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Value: Story = {
+  render: (args: InputPasswordProps) => {
+    const [value, setValue] = useState('')
+
+    return (
+      <InputPassword
+        {...args}
+        value={value}
+        onChangeText={(nextValue) => {
+          setValue(nextValue)
+        }}
+      />
+    )
+  },
+}

package/src/components/Label/Label.appearance.ts

@@ -1,20 +1,34 @@
 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 { LabelAppearance } from './Label.interface'
 
 const labelAppearance = {
   ...labelAppearanceShape,
   ...labelAppearanceSize,
+  ...labelAppearanceStyle,
   ...labelAppearanceGradient,
   ...labelAppearanceAccent,
   ...labelAppearanceDanger,
+  ...labelAppearanceDisabled,
+  ...labelAppearanceError,
   ...labelAppearanceExtra,
+  ...labelAppearanceInfo,
+  ...labelAppearanceSpecial,
+  ...labelAppearanceSuccess,
   ...labelAppearanceSurface,
+  ...labelAppearanceWarning,
 } satisfies LabelAppearance
 
 export { labelAppearance }

package/src/components/Label/Label.constants.ts

@@ -0,0 +1,7 @@
+const LABEL_GRADIENT_COLORS = [
+  'hsla(0, 100%, 44%, 1)',
+  'hsla(27, 78%, 54%, 1)',
+  'hsla(92, 56%, 38%, 1)',
+] as const
+
+export { LABEL_GRADIENT_COLORS }

package/src/components/Label/Label.interface.ts

@@ -5,10 +5,15 @@ import type {
   AppearanceKeys,
   AppearanceKeysDefault,
   AppearancePartialRecord,
+  AppearanceRecord,
   AppearanceShapeKey,
   AppearanceSizeKey,
+  AppearanceStyleKey,
+  BorderColorProps,
   CompositeAppearanceKeys,
+  FillGradientProps,
   FillProps,
+  ShapeProps,
   SizeProps,
   TextColorProps,
   TextSizeProps,
@@ -16,11 +21,24 @@ import type {
   WidthProps,
 } from '@itcase/types-ui'
 
+import type { ComponentGalleryArgs } from '../../storybook'
+import type { IconProps, SvgIconComponent } from '../Icon/Icon.interface'
 import type { labelShapePropsType } from './styles/labelShape'
 
 interface LabelAppearanceProps {
-  fill?: FillProps
+  borderColor?: BorderColorProps
+  fill?: FillGradientProps | FillProps
   gradient?: boolean
+  iconAfterFill?: IconProps['fill']
+  iconAfterFillIcon?: IconProps['iconFill']
+  iconAfterFillSize?: IconProps['fillSize']
+  iconAfterShape?: IconProps['shape']
+  iconAfterSize?: IconProps['iconSize']
+  iconBeforeFill?: IconProps['fill']
+  iconBeforeFillIcon?: IconProps['iconFill']
+  iconBeforeFillSize?: IconProps['fillSize']
+  iconBeforeShape?: IconProps['shape']
+  iconBeforeSize?: IconProps['iconSize']
   shape?: labelShapePropsType
   size?: SizeProps
   textColor?: TextColorProps
@@ -33,27 +51,61 @@ interface LabelAppearanceProps {
 type LabelAppearanceKey = AppearanceKeys | CompositeAppearanceKeys
 type LabelConfig = AppearanceConfig<AppearanceKeysDefault, LabelAppearanceProps>
 type LabelAppearance = LabelConfig['appearance']
+type LabelAppearanceStyle = AppearanceRecord<
+  AppearanceStyleKey,
+  LabelAppearanceProps,
+  'borderColor' | 'fill'
+>
 type LabelAppearanceShape = Partial<
   Record<AppearanceShapeKey, Partial<Pick<LabelAppearanceProps, 'shape'>>>
 >
 type LabelAppearanceSize = AppearancePartialRecord<
   AppearanceSizeKey,
   LabelAppearanceProps,
-  Extract<keyof LabelAppearanceProps, 'size' | 'textSize'>
+  Extract<
+    keyof LabelAppearanceProps,
+    | 'iconAfterFillSize'
+    | 'iconAfterSize'
+    | 'iconBeforeFillSize'
+    | 'iconBeforeSize'
+    | 'size'
+    | 'textSize'
+  >
 >
 
 interface LabelProps extends LabelAppearanceProps {
+  isDisabled?: boolean
+  isSkeleton?: boolean
   appearance?: LabelAppearanceKey
+  dataTestId?: string
+  iconAfter?: SvgIconComponent
+  iconBefore?: SvgIconComponent
   style?: StyleProp<ViewStyle>
   text?: string
 }
 
+type LabelGalleryStory = ComponentGalleryArgs &
+  Pick<LabelProps, 'isDisabled' | 'isSkeleton' | 'text'> & {
+    iconAfter?: boolean
+    iconBefore?: boolean
+  }
+
+type LabelStoryArgs = Omit<LabelProps, 'appearance'> & {
+  appearanceShape: string
+  appearanceSize: string
+  appearanceStyle: string
+  appearanceType: string
+}
+
 export type {
   LabelAppearance,
   LabelAppearanceKey,
   LabelAppearanceProps,
   LabelAppearanceShape,
   LabelAppearanceSize,
+  LabelAppearanceStyle,
   LabelConfig,
+  LabelGalleryStory,
   LabelProps,
+  LabelStoryArgs,
 }

package/src/components/Label/Label.tsx

@@ -1,16 +1,19 @@
-import React, { useMemo } from 'react'
+import { Fragment } from 'react'
 import { View } from 'react-native'
 
 import NativeLinearGradient from 'react-native-linear-gradient'
 
+import {
+  useAppearanceConfig,
+  useDevicePropsGenerator,
+} from '@itcase/ui-core/hooks'
+
 import { tokens } from '../../styles/tokens'
+import { Icon } from '../Icon'
 import { Text } from '../Text'
 import { labelAppearance } from './Label.appearance'
-import type {
-  LabelAppearanceProps,
-  LabelConfig,
-  LabelProps,
-} from './Label.interface'
+import { LABEL_GRADIENT_COLORS } from './Label.constants'
+import type { LabelConfig, LabelProps } from './Label.interface'
 import { styles } from './Label.styles'
 
 const labelConfig: LabelConfig = {
@@ -22,49 +25,105 @@ const labelConfig: LabelConfig = {
 
 labelConfig.setAppearance(labelAppearance)
 
-const Label: React.FC<LabelProps> = (props) => {
+function Label(props: LabelProps) {
   const {
     appearance,
+    dataTestId,
     width,
-    size,
-    fill,
     text,
     textColor,
     textSize,
     textStyle,
     textWeight,
-    gradient,
-    shape,
+    iconAfter,
+    iconBefore,
     style,
+    isDisabled,
+    isSkeleton,
   } = props
 
-  const appearanceConfig = useMemo(() => {
-    if (!appearance || !labelConfig.appearance) {
-      return undefined
-    }
+  const appearanceConfig = useAppearanceConfig(
+    appearance,
+    labelConfig,
+    isDisabled,
+  )
+  const propsGenerator = useDevicePropsGenerator(props, appearanceConfig)
 
-    return appearance
-      .split(' ')
-      .reduce<LabelAppearanceProps>((resultConfig, appearanceKey) => {
-        return Object.assign(
-          resultConfig,
-          labelConfig.appearance?.[
-            appearanceKey as keyof NonNullable<typeof labelConfig.appearance>
-          ],
-        )
-      }, {})
-  }, [appearance])
+  const {
+    size,
+    fill,
+    borderColor,
+    textColor: appearanceTextColor,
+    textSize: appearanceTextSize,
+    textWeight: appearanceTextWeight,
+    gradient,
+    iconAfterFill,
+    iconAfterFillIcon,
+    iconAfterFillSize,
+    iconAfterShape,
+    iconAfterSize,
+    iconBeforeFill,
+    iconBeforeFillIcon,
+    iconBeforeFillSize,
+    iconBeforeShape,
+    iconBeforeSize,
+    shape,
+  } = propsGenerator
 
-  const sizeKey = size || appearanceConfig?.size
-  const shapeKey = shape || appearanceConfig?.shape
-  const fillKey = fill || appearanceConfig?.fill
-  const textColorKey = textColor || appearanceConfig?.textColor
-  const textSizeKey = textSize || appearanceConfig?.textSize
+  const textColorKey = textColor || appearanceTextColor
+  const textSizeKey = textSize || appearanceTextSize
+  const textWeightKey = textWeight || appearanceTextWeight
+  const hasGradient = Boolean(gradient) && !isSkeleton
   const isWhiteText =
     !textColor &&
-    (Boolean(gradient || appearanceConfig?.gradient) ||
+    (hasGradient ||
       appearance === 'surfaceQuaternary' ||
-      appearance?.includes('surfaceQuaternary'))
+      appearance?.includes('surfaceQuaternary') ||
+      appearance?.includes('gradientPrimary'))
+
+  const labelContent = !isSkeleton ? (
+    <Fragment>
+      {iconBefore && (
+        <Icon
+          fill={iconBeforeFill}
+          fillSize={iconBeforeFillSize}
+          iconFill={iconBeforeFillIcon}
+          iconSize={iconBeforeSize}
+          shape={iconBeforeShape}
+          SVGIcon={iconBefore}
+        />
+      )}
+      <Text
+        size={textSizeKey}
+        textColor={textColorKey}
+        style={[isWhiteText && styles.label__text_white, textStyle]}
+        weight={textWeightKey}
+      >
+        {text}
+      </Text>
+      {iconAfter && (
+        <Icon
+          fill={iconAfterFill}
+          fillSize={iconAfterFillSize}
+          iconFill={iconAfterFillIcon}
+          iconSize={iconAfterSize}
+          shape={iconAfterShape}
+          SVGIcon={iconAfter}
+        />
+      )}
+    </Fragment>
+  ) : null
+
+  const containerStyle = [
+    styles.label,
+    !hasGradient && !isSkeleton && fill && tokens[`fill_${fill}`],
+    isSkeleton && tokens['fill_surfaceSecondary'],
+    !isSkeleton && borderColor && tokens[`border_color_${borderColor}`],
+    shape && styles[`label_shape_${shape}`],
+    size && styles[`label_size_${size}`],
+    isSkeleton && styles.label_skeleton,
+    style,
+  ]
 
   return (
     <View
@@ -74,53 +133,23 @@ const Label: React.FC<LabelProps> = (props) => {
           : undefined
       }
     >
-      {gradient || appearanceConfig?.gradient ? (
+      {hasGradient ? (
         <NativeLinearGradient
           end={{ x: 1, y: 0 }}
           start={{ x: 0, y: 0 }}
-          colors={[
-            'hsla(0, 100%, 44%, 1)',
-            'hsla(27, 78%, 54%, 1)',
-            'hsla(92, 56%, 38%, 1)',
-          ]}
-          style={[
-            styles.label,
-            shapeKey && styles[`label_shape_${shapeKey}`],
-            sizeKey && styles[`label_size_${sizeKey}`],
-            style && style,
-          ]}
+          colors={[...LABEL_GRADIENT_COLORS]}
+          style={containerStyle}
+          testID={dataTestId}
         >
-          <Text
-            size={textSizeKey}
-            textColor={textColorKey}
-            style={[isWhiteText && styles.label__text_white, textStyle]}
-            weight={textWeight}
-          >
-            {text}
-          </Text>
+          {labelContent}
         </NativeLinearGradient>
       ) : (
-        <View
-          style={[
-            styles.label,
-            fillKey && tokens[`fill_${fillKey}`],
-            shapeKey && styles[`label_shape_${shapeKey}`],
-            sizeKey && styles[`label_size_${sizeKey}`],
-            style && style,
-          ]}
-        >
-          <Text
-            size={textSizeKey}
-            textColor={textColorKey}
-            style={[isWhiteText && styles.label__text_white, textStyle]}
-            weight={textWeight}
-          >
-            {text}
-          </Text>
+        <View style={containerStyle} testID={dataTestId}>
+          {labelContent}
         </View>
       )}
     </View>
   )
 }
 
-export { Label }
+export { Label, labelConfig }

package/src/components/Label/appearance/labelAccent.ts

@@ -1,8 +1,29 @@
 import type { LabelAppearance } from '../Label.interface'
 
 const labelAppearanceAccent = {
+  accentMutedPrimary: {
+    fill: 'accentTertiary',
+    borderColor: 'accentBorderSecondary',
+    textColor: 'accentTextQuaternary',
+    iconAfterFillIcon: 'accentItemQuaternary',
+    iconBeforeFillIcon: 'accentItemQuaternary',
+  },
   accentPrimary: {
     fill: 'accentPrimary',
+    borderColor: 'accentBorderSecondary',
+    textColor: 'accentTextPrimary',
+    iconAfterFillIcon: 'accentItemPrimary',
+    iconBeforeFillIcon: 'accentItemPrimary',
+  },
+  accentSecondary: {
+    fill: 'accentSecondary',
+    borderColor: 'accentBorderQuaternary',
+    textColor: 'accentTextQuaternary',
+    iconAfterFillIcon: 'accentItemQuaternary',
+    iconBeforeFillIcon: 'accentItemQuaternary',
+  },
+  accentTertiary: {
+    fill: 'accentTertiary',
     textColor: 'accentTextPrimary',
   },
 } satisfies LabelAppearance

package/src/components/Label/appearance/labelDanger.ts

@@ -1,9 +1,19 @@
 import type { LabelAppearance } from '../Label.interface'
 
 const labelAppearanceDanger = {
+  dangerMutedPrimary: {
+    fill: 'dangerTertiary',
+    borderColor: 'dangerBorderQuaternary',
+    textColor: 'dangerTextQuaternary',
+    iconAfterFillIcon: 'dangerItemQuaternary',
+    iconBeforeFillIcon: 'dangerItemQuaternary',
+  },
   dangerPrimary: {
     fill: 'dangerPrimary',
+    borderColor: 'dangerBorderSecondary',
     textColor: 'dangerTextPrimary',
+    iconAfterFillIcon: 'dangerItemPrimary',
+    iconBeforeFillIcon: 'dangerItemPrimary',
   },
 } satisfies LabelAppearance
 

package/src/components/Label/appearance/labelDisabled.ts

@@ -0,0 +1,13 @@
+import type { LabelAppearance } from '../Label.interface'
+
+const labelAppearanceDisabled = {
+  disabledPrimary: {
+    fill: 'disabledPrimary',
+    borderColor: 'disabledBorderPrimary',
+    textColor: 'disabledTextPrimary',
+    iconAfterFillIcon: 'disabledItemPrimary',
+    iconBeforeFillIcon: 'disabledItemPrimary',
+  },
+} satisfies LabelAppearance
+
+export { labelAppearanceDisabled }

package/src/components/Label/appearance/labelError.ts

@@ -0,0 +1,20 @@
+import type { LabelAppearance } from '../Label.interface'
+
+const labelAppearanceError = {
+  errorMutedPrimary: {
+    fill: 'errorTertiary',
+    borderColor: 'errorBorderQuaternary',
+    textColor: 'errorTextQuaternary',
+    iconAfterFillIcon: 'errorItemQuaternary',
+    iconBeforeFillIcon: 'errorItemQuaternary',
+  },
+  errorPrimary: {
+    fill: 'errorPrimary',
+    borderColor: 'errorBorderQuaternary',
+    textColor: 'errorTextPrimary',
+    iconAfterFillIcon: 'errorItemPrimary',
+    iconBeforeFillIcon: 'errorItemPrimary',
+  },
+} satisfies LabelAppearance
+
+export { labelAppearanceError }

package/src/components/Label/appearance/labelExtra.ts

@@ -1,9 +1,19 @@
 import type { LabelAppearance } from '../Label.interface'
 
 const labelAppearanceExtra = {
+  extraMutedPrimary: {
+    fill: 'extraTertiary',
+    borderColor: 'extraBorderSecondary',
+    textColor: 'extraTextQuaternary',
+    iconAfterFillIcon: 'extraItemQuaternary',
+    iconBeforeFillIcon: 'extraItemQuaternary',
+  },
   extraPrimary: {
-    fill: 'specialPrimary',
-    textColor: 'specialTextPrimary',
+    fill: 'extraPrimary',
+    borderColor: 'extraBorderSecondary',
+    textColor: 'extraTextPrimary',
+    iconAfterFillIcon: 'extraItemPrimary',
+    iconBeforeFillIcon: 'extraItemPrimary',
   },
 } satisfies LabelAppearance
 

package/src/components/Label/appearance/labelGradient.ts

@@ -2,8 +2,12 @@ import type { LabelAppearance } from '../Label.interface'
 
 const labelAppearanceGradient = {
   gradientPrimary: {
-    textColor: 'accentTextPrimary',
+    fill: 'gradientPrimaryDiagonal',
+    borderColor: 'surfaceBorderPrimary',
+    textColor: 'white',
     gradient: true,
+    iconAfterFillIcon: 'white',
+    iconBeforeFillIcon: 'white',
   },
 } satisfies LabelAppearance
 

package/src/components/Label/appearance/labelInfo.ts

@@ -0,0 +1,20 @@
+import type { LabelAppearance } from '../Label.interface'
+
+const labelAppearanceInfo = {
+  infoMutedPrimary: {
+    fill: 'infoTertiary',
+    borderColor: 'infoBorderSecondary',
+    textColor: 'infoTextSecondary',
+    iconAfterFillIcon: 'infoItemSecondary',
+    iconBeforeFillIcon: 'infoItemSecondary',
+  },
+  infoPrimary: {
+    fill: 'infoPrimary',
+    borderColor: 'infoBorderSecondary',
+    textColor: 'infoTextPrimary',
+    iconAfterFillIcon: 'infoItemPrimary',
+    iconBeforeFillIcon: 'infoItemPrimary',
+  },
+} satisfies LabelAppearance
+
+export { labelAppearanceInfo }