@itcase/ui-react-native 1.10.81

package/src/components/Breadcrumbs/appearance/breadcrumbsSize.ts

@@ -0,0 +1,22 @@
+import type { BreadcrumbsAppearance } from '../Breadcrumbs.interface'
+
+const breadcrumbsAppearanceSize = {
+  sizeL: {
+    size: 'l',
+    labelTextSize: 'l',
+  },
+  sizeM: {
+    size: 'm',
+    labelTextSize: 'm',
+  },
+  sizeS: {
+    size: 's',
+    labelTextSize: 's',
+  },
+  sizeXS: {
+    size: 'xs',
+    labelTextSize: 'xs',
+  },
+} satisfies BreadcrumbsAppearance
+
+export { breadcrumbsAppearanceSize }

package/src/components/Breadcrumbs/appearance/breadcrumbsSurface.ts

@@ -0,0 +1,22 @@
+import type { BreadcrumbsAppearance } from '../Breadcrumbs.interface'
+
+const breadcrumbsAppearanceSurface = {
+  surfacePrimary: {
+    fill: 'surfacePrimary',
+    labelTextColor: 'surfaceTextPrimary',
+  },
+  surfaceQuaternary: {
+    fill: 'surfaceQuaternary',
+    labelTextColor: 'surfaceTextPrimary',
+  },
+  surfaceSecondary: {
+    fill: 'surfaceSecondary',
+    labelTextColor: 'surfaceTextPrimary',
+  },
+  surfaceTertiary: {
+    fill: 'surfaceTertiary',
+    labelTextColor: 'surfaceTextPrimary',
+  },
+} satisfies BreadcrumbsAppearance
+
+export { breadcrumbsAppearanceSurface }

package/src/components/Breadcrumbs/index.ts

@@ -0,0 +1,26 @@
+import { Breadcrumbs, breadcrumbsConfig } from './Breadcrumbs'
+import { breadcrumbsAppearance } from './Breadcrumbs.appearance'
+import type {
+  BreadcrumbsAppearance,
+  BreadcrumbsAppearanceKey,
+  BreadcrumbsConfig,
+  BreadcrumbsItem,
+  BreadcrumbsProps,
+} from './Breadcrumbs.interface'
+import { breadcrumbsSizeList } from './styles/breadcrumbsSize'
+import type { breadcrumbsSizePropsType } from './styles/breadcrumbsSize'
+
+export {
+  Breadcrumbs,
+  breadcrumbsAppearance,
+  breadcrumbsConfig,
+  breadcrumbsSizeList,
+}
+export type {
+  BreadcrumbsAppearance,
+  BreadcrumbsAppearanceKey,
+  BreadcrumbsConfig,
+  BreadcrumbsItem,
+  BreadcrumbsProps,
+  breadcrumbsSizePropsType,
+}

package/src/components/Breadcrumbs/stories/Breadcrumbs.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Breadcrumbs } from '../Breadcrumbs'
+
+const BreadcrumbsMeta: Meta<typeof Breadcrumbs> = {
+  title: 'Molecules / Breadcrumbs',
+  component: Breadcrumbs,
+  args: {
+    appearance: 'surfacePrimary',
+    size: 'm',
+    itemsList: [
+      {
+        label: 'Главная',
+        onPress: () => undefined,
+      },
+      {
+        label: 'Каталог',
+        onPress: () => undefined,
+      },
+      {
+        label: 'Товар',
+      },
+    ],
+  },
+}
+
+export default BreadcrumbsMeta
+
+export const Default: StoryObj<typeof Breadcrumbs> = {}
+
+export const Accent: StoryObj<typeof Breadcrumbs> = {
+  args: {
+    appearance: 'accentPrimary',
+  },
+}

package/src/components/Breadcrumbs/styles/breadcrumbs.ts

@@ -0,0 +1,18 @@
+import { StyleSheet } from 'react-native'
+
+const breadcrumbsStyles = StyleSheet.create({
+  breadcrumbs: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+  },
+  breadcrumbs__item: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  breadcrumbs__separator: {
+    marginHorizontal: 6,
+  },
+})
+
+export { breadcrumbsStyles }

package/src/components/Breadcrumbs/styles/breadcrumbsSize.ts

@@ -0,0 +1,28 @@
+import { StyleSheet } from 'react-native'
+
+import { getVariantsPropsList } from '../../../utils'
+
+const breadcrumbsSizeStyles = StyleSheet.create({
+  breadcrumbs_size_l: {
+    gap: 0,
+  },
+  breadcrumbs_size_m: {
+    gap: 0,
+  },
+  breadcrumbs_size_s: {
+    gap: 0,
+  },
+  breadcrumbs_size_xs: {
+    gap: 0,
+  },
+})
+
+const breadcrumbsSizeList = getVariantsPropsList(
+  breadcrumbsSizeStyles,
+  'breadcrumbs_size_',
+)
+
+type breadcrumbsSizePropsType = (typeof breadcrumbsSizeList)[number]
+
+export { breadcrumbsSizeList, breadcrumbsSizeStyles }
+export type { breadcrumbsSizePropsType }

package/src/components/Button/Button.appearance.ts

@@ -0,0 +1,16 @@
+import { buttonAppearanceAccent } from './appearance/buttonAccent'
+import { buttonAppearanceDanger } from './appearance/buttonDanger'
+import { buttonAppearanceExtra } from './appearance/buttonExtra'
+import { buttonAppearanceStyle } from './appearance/buttonStyle'
+import { buttonAppearanceSurface } from './appearance/buttonSurface'
+import type { ButtonAppearance } from './Button.interface'
+
+const buttonAppearance = {
+  ...buttonAppearanceStyle,
+  ...buttonAppearanceAccent,
+  ...buttonAppearanceDanger,
+  ...buttonAppearanceExtra,
+  ...buttonAppearanceSurface,
+} satisfies ButtonAppearance
+
+export { buttonAppearance }

package/src/components/Button/Button.interface.ts

@@ -0,0 +1,76 @@
+import type { ReactNode } from 'react'
+import type {
+  ColorValue,
+  GestureResponderEvent,
+  LayoutChangeEvent,
+  StyleProp,
+  TextStyle,
+} from 'react-native'
+
+import type {
+  AppearanceConfig,
+  AppearanceKeysDefault,
+  AppearanceRecord,
+  AppearanceStyleKey,
+  BorderColorProps,
+  FillActiveProps,
+  FillProps,
+  TextColorProps,
+  TextSizeProps,
+  WidthProps,
+} from '@itcase/types-ui'
+
+import type { buttonSizePropsType } from './styles/buttonSize'
+
+type ButtonFillDisabledProps = 'dangerDisabled' | FillProps
+
+interface ButtonAppearanceProps {
+  borderColor?: BorderColorProps
+  fill?: FillProps
+  fillActive?: FillActiveProps
+  fillDisabled?: ButtonFillDisabledProps
+  loaderColor?: ColorValue
+  textColor?: TextColorProps
+  textColorDisabled?: TextColorProps
+}
+
+type ButtonAppearanceKey = AppearanceKeysDefault
+type ButtonConfig = AppearanceConfig<
+  AppearanceKeysDefault,
+  ButtonAppearanceProps
+>
+type ButtonAppearance = ButtonConfig['appearance']
+type ButtonAppearanceStyle = AppearanceRecord<
+  AppearanceStyleKey,
+  ButtonAppearanceProps,
+  'borderColor' | 'fill'
+>
+
+interface ButtonProps extends ButtonAppearanceProps {
+  isDisabled?: boolean
+  isLoading?: boolean
+  onLayout?: (event: LayoutChangeEvent) => void
+  onPress?: (event: GestureResponderEvent) => void
+  onPressIn?: (event: GestureResponderEvent) => void
+  onPressOut?: (event: GestureResponderEvent) => void
+  after?: ReactNode
+  appearance?: ButtonAppearanceKey
+  appearanceStyle?: AppearanceStyleKey
+  before?: ReactNode
+  label?: string
+  loader?: ReactNode
+  loaderColor?: ColorValue
+  size?: buttonSizePropsType
+  style?: StyleProp<TextStyle>
+  textSize?: TextSizeProps
+  width?: WidthProps
+}
+
+export type {
+  ButtonAppearance,
+  ButtonAppearanceKey,
+  ButtonAppearanceProps,
+  ButtonAppearanceStyle,
+  ButtonConfig,
+  ButtonProps,
+}

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

@@ -0,0 +1,11 @@
+import { buttonStyles } from './styles/button'
+import { buttonSizeStyles } from './styles/buttonSize'
+import { buttonTextStyles } from './styles/buttonText'
+
+const styles = {
+  ...buttonStyles,
+  ...buttonSizeStyles,
+  ...buttonTextStyles,
+}
+
+export { styles }

package/src/components/Button/Button.tsx

@@ -0,0 +1,147 @@
+import React, { useCallback, useMemo } from 'react'
+import { Pressable, View } from 'react-native'
+
+import { tokens } from '../../styles/tokens'
+import { Loader } from '../Loader'
+import { Text } from '../Text'
+import { buttonAppearance } from './Button.appearance'
+import type {
+  ButtonAppearanceProps,
+  ButtonConfig,
+  ButtonProps,
+} from './Button.interface'
+import { styles } from './Button.styles'
+
+const DEFAULT_BUTTON_APPEARANCE = 'surfaceSecondary'
+const DEFAULT_BUTTON_APPEARANCE_STYLE = 'solid'
+
+const buttonConfig: ButtonConfig = {
+  appearance: {},
+  setAppearance: (newComponent) => {
+    buttonConfig.appearance = newComponent
+  },
+}
+
+buttonConfig.setAppearance(buttonAppearance)
+
+const Button = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  ButtonProps
+>(function Button(props, ref) {
+  const {
+    appearance,
+    width,
+    size,
+    fill,
+    label,
+    borderColor,
+    textColor,
+    textSize,
+    appearanceStyle,
+    loader,
+    loaderColor,
+    style,
+    before,
+    after,
+    isDisabled,
+    isLoading,
+    onLayout,
+    onPress,
+    onPressIn,
+    onPressOut,
+  } = props
+
+  const appearanceConfig = useMemo(() => {
+    const appearanceKeys = [
+      appearance || DEFAULT_BUTTON_APPEARANCE,
+      appearanceStyle || DEFAULT_BUTTON_APPEARANCE_STYLE,
+    ]
+
+    return appearanceKeys.reduce<ButtonAppearanceProps>(
+      (resultConfig, appearanceKey) => {
+        return Object.assign(
+          resultConfig,
+          buttonConfig.appearance?.[appearanceKey],
+        )
+      },
+      {},
+    )
+  }, [appearance, appearanceStyle])
+
+  // Collect styles for highest "Pressable" component(wrapper for text)
+  const getWrapperStyles = useCallback(
+    (params: { pressed: boolean }) => {
+      const { pressed } = params
+
+      // Appearance fill depends on the pressed state of button and "fill"
+      let appearanceFillStyle
+
+      if (pressed) {
+        appearanceFillStyle =
+          appearanceConfig.fillActive &&
+          tokens[`fill_${appearanceConfig.fillActive}`]
+      } else if (!fill) {
+        appearanceFillStyle =
+          appearanceConfig.fill && tokens[`fill_${appearanceConfig.fill}`]
+      }
+
+      const borderColorToken = borderColor || appearanceConfig.borderColor
+
+      return [
+        // Custom from props
+        style,
+        // Base style
+        styles.button,
+        // Appearance fill
+        (fill && tokens[`fill_${fill}`]) || appearanceFillStyle,
+        // Appearance border
+        borderColorToken && tokens[`border_color_${borderColorToken}`],
+        // Global width style
+        width && tokens[`width_${width}`],
+        // Size style
+        size && styles[`button_size_${size}`],
+        // Disabled style
+        isDisabled &&
+          appearanceConfig.fillDisabled &&
+          tokens[`fill_${appearanceConfig.fillDisabled}`],
+      ]
+    },
+    [appearanceConfig, borderColor, fill, isDisabled, size, style, width],
+  )
+
+  return (
+    <Pressable
+      ref={ref}
+      disabled={isDisabled}
+      style={getWrapperStyles}
+      onLayout={onLayout}
+      onPress={onPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+    >
+      {before}
+      {isLoading ? (
+        loader ? (
+          <View style={styles.button__loader}>{loader}</View>
+        ) : (
+          <Loader loaderColor={loaderColor || appearanceConfig.loaderColor} />
+        )
+      ) : (
+        <Text
+          size={textSize}
+          textColor={
+            textColor || isDisabled
+              ? appearanceConfig.textColorDisabled
+              : appearanceConfig.textColor
+          }
+          style={styles.button__text}
+        >
+          {label}
+        </Text>
+      )}
+      {after}
+    </Pressable>
+  )
+})
+
+export { Button, buttonConfig }

package/src/components/Button/appearance/buttonAccent.ts

@@ -0,0 +1,24 @@
+import type { ButtonAppearance } from '../Button.interface'
+
+const buttonAppearanceAccent = {
+  accentPrimary: {
+    fill: 'accentPrimary',
+    fillActive: 'accentActivePrimary',
+    fillDisabled: 'accentDisabled',
+    borderColor: 'accentBorderPrimary',
+    textColor: 'accentTextPrimary',
+    textColorDisabled: 'accentTextQuaternary',
+    loaderColor: 'hsla(0, 0%, 100%, 1)',
+  },
+  accentSecondary: {
+    fill: 'accentPrimary',
+    fillActive: 'accentActivePrimary',
+    fillDisabled: 'accentDisabled',
+    borderColor: 'accentBorderPrimary',
+    textColor: 'accentTextSecondary',
+    textColorDisabled: 'accentTextQuaternary',
+    loaderColor: 'hsla(0, 0%, 100%, 1)',
+  },
+} satisfies ButtonAppearance
+
+export { buttonAppearanceAccent }

package/src/components/Button/appearance/buttonDanger.ts

@@ -0,0 +1,14 @@
+import type { ButtonAppearance } from '../Button.interface'
+
+const buttonAppearanceDanger = {
+  dangerPrimary: {
+    fill: 'dangerPrimary',
+    fillActive: 'dangerActivePrimary',
+    fillDisabled: 'dangerDisabled',
+    borderColor: 'dangerBorderPrimary',
+    textColor: 'dangerTextPrimary',
+    textColorDisabled: 'dangerTextQuaternary',
+  },
+} satisfies ButtonAppearance
+
+export { buttonAppearanceDanger }

package/src/components/Button/appearance/buttonExtra.ts

@@ -0,0 +1,14 @@
+import type { ButtonAppearance } from '../Button.interface'
+
+const buttonAppearanceExtra = {
+  extraPrimary: {
+    fill: 'specialPrimary',
+    fillActive: 'specialActivePrimary',
+    fillDisabled: 'specialDisabled',
+    borderColor: 'specialBorderPrimary',
+    textColor: 'specialTextPrimary',
+    textColorDisabled: 'specialTextQuaternary',
+  },
+} satisfies ButtonAppearance
+
+export { buttonAppearanceExtra }

package/src/components/Button/appearance/buttonStyle.ts

@@ -0,0 +1,17 @@
+import type { ButtonAppearanceStyle } from '../Button.interface'
+
+const buttonAppearanceStyle = {
+  solid: {
+    borderColor: 'none',
+  },
+  outlined: {
+    fill: 'none',
+  },
+  full: {},
+  ghost: {
+    fill: 'none',
+    borderColor: 'none',
+  },
+} satisfies ButtonAppearanceStyle
+
+export { buttonAppearanceStyle }

package/src/components/Button/appearance/buttonSurface.ts

@@ -0,0 +1,30 @@
+import type { ButtonAppearance } from '../Button.interface'
+
+const buttonAppearanceSurface = {
+  surfacePrimary: {
+    fill: 'surfacePrimary',
+    fillActive: 'surfaceActivePrimary',
+    fillDisabled: 'surfaceDisabled',
+    borderColor: 'surfaceBorderTertiary',
+    textColor: 'surfaceTextPrimary',
+    textColorDisabled: 'surfaceTextDisabled',
+  },
+  surfaceSecondary: {
+    fill: 'surfaceSecondary',
+    fillActive: 'surfaceActivePrimary',
+    fillDisabled: 'surfaceDisabled',
+    borderColor: 'surfaceBorderTertiary',
+    textColor: 'surfaceTextPrimary',
+    textColorDisabled: 'surfaceTextDisabled',
+  },
+  surfaceTertiary: {
+    fill: 'surfaceTertiary',
+    fillActive: 'surfaceActivePrimary',
+    fillDisabled: 'surfaceDisabled',
+    borderColor: 'surfaceBorderTertiary',
+    textColor: 'surfaceTextPrimary',
+    textColorDisabled: 'surfaceTextDisabled',
+  },
+} satisfies ButtonAppearance
+
+export { buttonAppearanceSurface }

package/src/components/Button/index.ts

@@ -0,0 +1,30 @@
+import { Button, buttonConfig } from './Button'
+import { buttonAppearance } from './Button.appearance'
+import type {
+  ButtonAppearance,
+  ButtonAppearanceKey,
+  ButtonAppearanceStyle,
+  ButtonConfig,
+  ButtonProps,
+} from './Button.interface'
+import { buttonSizeList } from './styles/buttonSize'
+import type { buttonSizePropsType } from './styles/buttonSize'
+import { buttonTextSizeList } from './styles/buttonText'
+import type { buttonTextSizePropsType } from './styles/buttonText'
+
+export {
+  Button,
+  buttonAppearance,
+  buttonConfig,
+  buttonSizeList,
+  buttonTextSizeList,
+}
+export type {
+  ButtonAppearance,
+  ButtonAppearanceKey,
+  ButtonAppearanceStyle,
+  ButtonConfig,
+  ButtonProps,
+  buttonSizePropsType,
+  buttonTextSizePropsType,
+}

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

@@ -0,0 +1,77 @@
+import { View } from 'react-native'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { tokens } from '../../../styles/tokens'
+import { Button } from '../Button'
+import type { ButtonProps } from '../Button.interface'
+import type { ButtonAppearanceGroup } from './ButtonStories.config'
+import {
+  buttonStoryParameters,
+  getButtonAppearanceKeys,
+} from './ButtonStories.config'
+
+const meta = {
+  title: 'Atoms / Button / Default',
+  component: Button,
+  args: {
+    size: 'xxl',
+    label: 'Button',
+    textSize: 'xxl',
+  },
+  parameters: buttonStoryParameters,
+} satisfies Meta<typeof Button>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+interface RenderAppearanceGroupParams {
+  appearanceGroup: ButtonAppearanceGroup
+  args: ButtonProps
+}
+
+function renderAppearanceGroup(params: RenderAppearanceGroupParams) {
+  const { args, appearanceGroup } = params
+  const appearanceKeys = getButtonAppearanceKeys(appearanceGroup)
+
+  return (
+    <View style={[tokens.gap_8, { flexDirection: 'row', flexWrap: 'wrap' }]}>
+      {appearanceKeys.map((appearance) => (
+        <Button {...args} appearance={appearance} key={appearance} />
+      ))}
+    </View>
+  )
+}
+
+export const Accent: Story = {
+  render: (args) =>
+    renderAppearanceGroup({
+      args: args,
+      appearanceGroup: 'accent',
+    }),
+}
+
+export const Extra: Story = {
+  render: (args) =>
+    renderAppearanceGroup({
+      args: args,
+      appearanceGroup: 'extra',
+    }),
+}
+
+export const Surface: Story = {
+  render: (args) =>
+    renderAppearanceGroup({
+      args: args,
+      appearanceGroup: 'surface',
+    }),
+}
+
+export const Danger: Story = {
+  render: (args) =>
+    renderAppearanceGroup({
+      args: args,
+      appearanceGroup: 'danger',
+    }),
+}

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

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Button } from '../Button'
+import { buttonStoryParameters } from './ButtonStories.config'
+
+const meta = {
+  title: 'Atoms / Button / Disabled',
+  component: Button,
+  args: {
+    appearance: 'surfaceSecondary',
+    size: 'xxl',
+    label: 'Button',
+    textSize: 'xxl',
+    isDisabled: true,
+  },
+  parameters: buttonStoryParameters,
+} satisfies Meta<typeof Button>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Disabled: Story = {}