@itcase/ui-react-native 1.10.81

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

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Button } from '../Button'
+import { buttonStoryParameters } from './ButtonStories.config'
+
+const meta = {
+  title: 'Atoms / Button / Size',
+  component: Button,
+  args: {
+    appearance: 'surfaceSecondary',
+    label: 'Button',
+    textSize: 'l',
+  },
+  parameters: buttonStoryParameters,
+} satisfies Meta<typeof Button>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const SizeXXL: Story = {
+  args: {
+    size: 'xxl',
+  },
+}
+
+export const SizeXL: Story = {
+  args: {
+    size: 'xl',
+  },
+}
+
+export const SizeL: Story = {
+  args: {
+    size: 'l',
+  },
+}
+
+export const SizeM: Story = {
+  args: {
+    size: 'm',
+  },
+}
+
+export const SizeS: Story = {
+  args: {
+    size: 's',
+  },
+}
+
+export const SizeXS: Story = {
+  args: {
+    size: 'xs',
+    textSize: 'm',
+  },
+}
+
+export const SizeXXS: Story = {
+  args: {
+    size: 'xxs',
+    textSize: 'xs',
+  },
+}

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

@@ -0,0 +1,46 @@
+import { buttonAppearanceAccent } from '../appearance/buttonAccent'
+import { buttonAppearanceDanger } from '../appearance/buttonDanger'
+import { buttonAppearanceExtra } from '../appearance/buttonExtra'
+import { buttonAppearanceSurface } from '../appearance/buttonSurface'
+import type { ButtonAppearanceKey } from '../Button.interface'
+
+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
+
+const BUTTON_APPEARANCE_GROUPS = [
+  'accent',
+  'extra',
+  'surface',
+  'danger',
+] as const
+
+type ButtonAppearanceGroup = (typeof BUTTON_APPEARANCE_GROUPS)[number]
+
+const buttonStoryParameters = {
+  layout: 'centered' as const,
+  design: {
+    type: 'figma' as const,
+    url: BUTTON_FIGMA_URL,
+  },
+}
+
+const getButtonAppearanceKeys = (
+  appearanceGroup: ButtonAppearanceGroup,
+): ButtonAppearanceKey[] =>
+  Object.keys(buttonAppearanceByGroup[appearanceGroup]) as ButtonAppearanceKey[]
+
+export {
+  BUTTON_APPEARANCE_GROUPS,
+  BUTTON_FIGMA_URL,
+  buttonAppearanceByGroup,
+  buttonStoryParameters,
+  getButtonAppearanceKeys,
+}
+export type { ButtonAppearanceGroup }

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

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Button } from '../Button'
+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>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Full: Story = {
+  args: {
+    appearance: 'accentPrimary',
+    appearanceStyle: 'full',
+  },
+}
+
+export const Solid: Story = {
+  args: {
+    appearance: 'accentPrimary',
+    appearanceStyle: 'solid',
+  },
+}
+
+export const Outlined: Story = {
+  args: {
+    appearance: 'accentSecondary',
+    appearanceStyle: 'outlined',
+  },
+}
+
+export const Ghost: Story = {
+  args: {
+    appearance: 'accentSecondary',
+    appearanceStyle: 'ghost',
+  },
+}

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

@@ -0,0 +1,26 @@
+import { StyleSheet } from 'react-native'
+
+const buttonStyles = StyleSheet.create({
+  button: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    borderRadius: 4,
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    gap: 8,
+  },
+  button__loader: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  },
+})
+
+export { buttonStyles }

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

@@ -0,0 +1,42 @@
+import { StyleSheet } from 'react-native'
+
+import { getVariantsPropsList } from '../../../utils'
+
+const buttonSizeStyles = StyleSheet.create({
+  button_size_l: {
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+  },
+  button_size_m: {
+    paddingVertical: 4,
+    paddingHorizontal: 12,
+  },
+  button_size_s: {
+    paddingVertical: 2,
+    paddingHorizontal: 10,
+  },
+  button_size_xl: {
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+  },
+  button_size_xs: {
+    paddingVertical: 0,
+    paddingHorizontal: 8,
+  },
+  button_size_xxl: {
+    minHeight: 56,
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+  },
+  button_size_xxs: {
+    paddingVertical: 0,
+    paddingHorizontal: 6,
+  },
+})
+
+const buttonSizeList = getVariantsPropsList(buttonSizeStyles, 'button_size_')
+
+type buttonSizePropsType = (typeof buttonSizeList)[number]
+
+export { buttonSizeList, buttonSizeStyles }
+export type { buttonSizePropsType }

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

@@ -0,0 +1,28 @@
+import { StyleSheet } from 'react-native'
+
+import { getVariantsPropsList } from '../../../utils'
+
+const buttonTextStyles = StyleSheet.create({
+  button__text: {
+    textAlign: 'center',
+  },
+  button__text_size_xl: {
+    fontFamily: 'WixMadeforDisplay-Medium',
+    fontSize: 14,
+    lineHeight: 18,
+  },
+  button__text_size_xxl: {
+    fontFamily: 'WixMadeforDisplay-Medium',
+    fontSize: 18,
+    lineHeight: 24,
+  },
+})
+
+const buttonTextSizeList = getVariantsPropsList(
+  buttonTextStyles,
+  'button__text_size_',
+)
+type buttonTextSizePropsType = (typeof buttonTextSizeList)[number]
+
+export { buttonTextSizeList, buttonTextStyles }
+export type { buttonTextSizePropsType }

package/src/components/Cell/Cell.interface.ts

@@ -0,0 +1,45 @@
+import type { ReactNode } from 'react'
+import type { StyleProp, TextStyle } from 'react-native'
+
+import type {
+  FillProps,
+  TextColorProps,
+  TextSizeProps,
+  TextWeightProps,
+} from '@itcase/types-ui'
+
+import type { GapProps } from '../../styles/gap'
+import type { cellDirectionPropsType } from './styles/cellDirection'
+import type { cellShapePropsType } from './styles/cellShape'
+import type { cellSizePropsType } from './styles/cellSize'
+
+interface CellProps {
+  direction: cellDirectionPropsType
+  fill?: FillProps
+  gap?: GapProps
+  shape?: cellShapePropsType
+  size?: cellSizePropsType
+  style?: StyleProp<TextStyle>
+  text?: string
+  textColor?: TextColorProps
+  textList?: { key: number | string; text: string }[]
+  textSize?: TextSizeProps
+  textWeight?: TextWeightProps
+  title?: string
+  titleColor?: TextColorProps
+  titleSize?: TextSizeProps
+  titleWeight?: TextWeightProps
+  url?: string
+}
+
+interface URLTextProps {
+  children?: ReactNode
+  gap?: GapProps
+  text?: string
+  textColor?: TextColorProps
+  textSize?: TextSizeProps
+  textWeight?: TextWeightProps
+  url: string
+}
+
+export type { CellProps, URLTextProps }

package/src/components/Cell/Cell.styles.ts

@@ -0,0 +1,13 @@
+import { cellStyles as cellBaseStyles } from './styles/cell'
+import { cellDirectionStyles } from './styles/cellDirection'
+import { cellShapeStyles } from './styles/cellShape'
+import { cellSizeStyles } from './styles/cellSize'
+
+const styles = {
+  ...cellBaseStyles,
+  ...cellDirectionStyles,
+  ...cellShapeStyles,
+  ...cellSizeStyles,
+}
+
+export { styles }

package/src/components/Cell/Cell.tsx

@@ -0,0 +1,96 @@
+import React, { useCallback } from 'react'
+import { Alert, Linking, Pressable, View } from 'react-native'
+
+import { tokens } from '../../styles/tokens'
+import { Text } from '../Text'
+import type { CellProps, URLTextProps } from './Cell.interface'
+import { styles } from './Cell.styles'
+
+const URLText: React.FC<URLTextProps> = (props) => {
+  const { url, text, textColor, textSize, textWeight } = props
+  const handlePress = useCallback(async () => {
+    const supported = await Linking.canOpenURL(url)
+
+    if (supported) {
+      await Linking.openURL(url)
+    } else {
+      Alert.alert(`Не знаю, как открыть этот URL: ${url}`)
+    }
+  }, [url])
+
+  return (
+    <Pressable onPress={handlePress}>
+      <Text size={textSize} textColor={textColor} weight={textWeight}>
+        {text}
+      </Text>
+    </Pressable>
+  )
+}
+
+const Cell: React.FC<CellProps> = (props) => {
+  const {
+    direction,
+    size,
+    fill,
+    title,
+    titleColor,
+    titleSize,
+    titleWeight,
+    url,
+    gap,
+    text,
+    textColor,
+    textList,
+    textSize,
+    textWeight,
+    shape,
+    style,
+  } = props
+
+  return (
+    <View
+      style={[
+        styles.cell,
+        size && styles[`cell_size_${size}`],
+        gap && tokens[`gap_${gap}`],
+        fill && tokens[`fill_${fill}`],
+        shape && styles[`cell_shape_${shape}`],
+        direction && styles[`cell_direction_${direction}`],
+        style && style,
+      ]}
+    >
+      <Text size={titleSize} textColor={titleColor} weight={titleWeight}>
+        {title}
+      </Text>
+
+      {url ? (
+        <URLText
+          url={url}
+          text={text}
+          textColor={textColor}
+          textSize={textSize}
+          textWeight={textWeight}
+        />
+      ) : textList ? (
+        <React.Fragment>
+          {textList.map((textItem) => (
+            <Text
+              key={textItem.key}
+              size={textSize}
+              textColor={textColor}
+              weight={textWeight}
+            >
+              {textItem.text}
+            </Text>
+          ))}
+        </React.Fragment>
+      ) : (
+        <Text size={textSize} textColor={textColor} weight={textWeight}>
+          {text}
+        </Text>
+      )}
+    </View>
+  )
+}
+
+export { Cell, URLText }

package/src/components/Cell/index.ts

@@ -0,0 +1,17 @@
+import { Cell, URLText } from './Cell'
+import type { CellProps, URLTextProps } from './Cell.interface'
+import { cellDirectionList } from './styles/cellDirection'
+import type { cellDirectionPropsType } from './styles/cellDirection'
+import { cellShapeList } from './styles/cellShape'
+import type { cellShapePropsType } from './styles/cellShape'
+import { cellSizeList } from './styles/cellSize'
+import type { cellSizePropsType } from './styles/cellSize'
+
+export { Cell, cellDirectionList, cellShapeList, cellSizeList, URLText }
+export type {
+  cellDirectionPropsType,
+  CellProps,
+  cellShapePropsType,
+  cellSizePropsType,
+  URLTextProps,
+}

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

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Cell } from '../Cell'
+
+const CellMeta: Meta<typeof Cell> = {
+  title: 'Molecules / Cell',
+  component: Cell,
+}
+
+export default CellMeta
+
+const Default: StoryObj<typeof Cell> = {
+  args: {
+    title: 'title',
+    titleColor: 'surfaceTextPrimary',
+    titleSize: 'm',
+    text: 'text',
+    textColor: 'surfaceTextPrimary',
+    textSize: 'm',
+  },
+}
+
+export const SizeM: StoryObj<typeof Cell> = {
+  args: {
+    ...Default.args,
+    size: 'm',
+  },
+}
+
+export const SizeXL: StoryObj<typeof Cell> = {
+  args: {
+    ...Default.args,
+    size: 'xl',
+  },
+}

package/src/components/Cell/styles/cell.ts

@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native'
+
+const cellStyles = StyleSheet.create({
+  cell: {
+    gap: 4,
+  },
+})
+
+export { cellStyles }

package/src/components/Cell/styles/cellDirection.ts

@@ -0,0 +1,24 @@
+import { StyleSheet } from 'react-native'
+
+import { getVariantsPropsList } from '../../../utils'
+
+const cellDirectionStyles = StyleSheet.create({
+  cell_direction_horizontal: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  cell_direction_vertical: {
+    flexDirection: 'column',
+  },
+})
+
+const cellDirectionList = getVariantsPropsList(
+  cellDirectionStyles,
+  'cell_direction_',
+)
+
+type cellDirectionPropsType = (typeof cellDirectionList)[number]
+
+export { cellDirectionList, cellDirectionStyles }
+export type { cellDirectionPropsType }

package/src/components/Cell/styles/cellShape.ts

@@ -0,0 +1,16 @@
+import { StyleSheet } from 'react-native'
+
+import { getVariantsPropsList } from '../../../utils'
+
+const cellShapeStyles = StyleSheet.create({
+  cell_shape_rounded: {
+    borderRadius: 6,
+  },
+})
+
+const cellShapeList = getVariantsPropsList(cellShapeStyles, 'cell_shape_')
+
+type cellShapePropsType = (typeof cellShapeList)[number]
+
+export { cellShapeList, cellShapeStyles }
+export type { cellShapePropsType }

package/src/components/Cell/styles/cellSize.ts

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native'
+
+import { getVariantsPropsList } from '../../../utils'
+
+const cellSizeStyles = StyleSheet.create({
+  cell_size_m: {
+    padding: 6,
+    gap: 4,
+  },
+  cell_size_xl: {
+    padding: 12,
+    gap: 4,
+  },
+})
+
+const cellSizeList = getVariantsPropsList(cellSizeStyles, 'cell_size_')
+
+type cellSizePropsType = (typeof cellSizeList)[number]
+
+export { cellSizeList, cellSizeStyles }
+export type { cellSizePropsType }

package/src/components/Checkbox/Checkbox.appearance.ts

@@ -0,0 +1,22 @@
+import { checkboxAppearanceDefault } from './appearance/checkboxDefault'
+import { checkboxAppearanceDisabled } from './appearance/checkboxDisabled'
+import { checkboxAppearanceError } from './appearance/checkboxError'
+import { checkboxAppearanceRequire } from './appearance/checkboxRequire'
+import { checkboxAppearanceShape } from './appearance/checkboxShape'
+import { checkboxAppearanceSize } from './appearance/checkboxSize'
+import { checkboxAppearanceStyle } from './appearance/checkboxStyle'
+import { checkboxAppearanceSuccess } from './appearance/checkboxSuccess'
+import type { CheckboxAppearance } from './Checkbox.interface'
+
+const checkboxAppearance = {
+  ...checkboxAppearanceDefault,
+  ...checkboxAppearanceError,
+  ...checkboxAppearanceSuccess,
+  ...checkboxAppearanceRequire,
+  ...checkboxAppearanceDisabled,
+  ...checkboxAppearanceSize,
+  ...checkboxAppearanceStyle,
+  ...checkboxAppearanceShape,
+} satisfies CheckboxAppearance
+
+export { checkboxAppearance }

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

@@ -0,0 +1,99 @@
+import type { ReactNode } from 'react'
+import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native'
+
+import type {
+  AppearanceConfig,
+  AppearanceKeysState,
+  AppearancePartialRecord,
+  AppearanceRecord,
+  AppearanceShapeKey,
+  AppearanceSizeKey,
+  AppearanceStyleKey,
+  BorderColorActiveProps,
+  BorderColorProps,
+  CompositeAppearanceKeys,
+  FillActiveProps,
+  FillProps,
+  TextColorProps,
+  TextSizeProps,
+  TextWeightProps,
+  WidthProps,
+} from '@itcase/types-ui'
+
+import type { checkboxAlignPropsType } from './styles/checkboxAlign'
+import type { checkboxShapePropsType } from './styles/checkboxShape'
+import type { checkboxSizePropsType } from './styles/checkboxSize'
+
+interface CheckboxAppearanceProps {
+  borderColor?: BorderColorProps
+  borderColorCheckbox?: BorderColorProps
+  borderColorCheckboxActive?: BorderColorActiveProps
+  descTextColor?: TextColorProps
+  descTextSize?: TextSizeProps
+  descTextWeight?: TextWeightProps
+  fill?: FillProps
+  fillCheckbox?: FillProps
+  fillCheckboxActive?: FillActiveProps
+  fillCheckmark?: FillProps
+  labelTextColor?: TextColorProps
+  labelTextSize?: TextSizeProps
+  labelTextWeight?: TextWeightProps
+  shape?: checkboxShapePropsType
+  size?: checkboxSizePropsType
+}
+
+type CheckboxAppearanceKey = AppearanceKeysState | CompositeAppearanceKeys
+type CheckboxConfig = AppearanceConfig<
+  AppearanceKeysState,
+  CheckboxAppearanceProps
+>
+type CheckboxAppearance = CheckboxConfig['appearance']
+type CheckboxAppearanceStyle = AppearanceRecord<
+  AppearanceStyleKey,
+  CheckboxAppearanceProps,
+  | 'borderColorCheckbox'
+  | 'borderColorCheckboxActive'
+  | 'fill'
+  | 'fillCheckbox'
+  | 'fillCheckboxActive'
+>
+type CheckboxAppearanceShape = AppearancePartialRecord<
+  AppearanceShapeKey,
+  CheckboxAppearanceProps,
+  'shape'
+>
+type CheckboxAppearanceSize = AppearancePartialRecord<
+  AppearanceSizeKey,
+  CheckboxAppearanceProps,
+  'descTextSize' | 'labelTextSize' | 'size'
+>
+
+interface CheckboxProps extends CheckboxAppearanceProps {
+  isActive?: boolean
+  isChecked?: boolean
+  isDisabled?: boolean
+  onPress?: (event: GestureResponderEvent) => void
+  after?: ReactNode
+  align?: checkboxAlignPropsType
+  appearance?: CheckboxAppearanceKey
+  appearanceStyle?: AppearanceStyleKey
+  before?: ReactNode
+  checked?: boolean
+  desc?: string
+  disabled?: boolean
+  indeterminate?: boolean
+  label?: string
+  style?: StyleProp<ViewStyle>
+  width?: WidthProps
+}
+
+export type {
+  CheckboxAppearance,
+  CheckboxAppearanceKey,
+  CheckboxAppearanceProps,
+  CheckboxAppearanceShape,
+  CheckboxAppearanceSize,
+  CheckboxAppearanceStyle,
+  CheckboxConfig,
+  CheckboxProps,
+}

package/src/components/Checkbox/Checkbox.styles.ts

@@ -0,0 +1,13 @@
+import { checkboxStyles as checkboxBaseStyles } from './styles/checkbox'
+import { checkboxAlignStyles } from './styles/checkboxAlign'
+import { checkboxShapeStyles } from './styles/checkboxShape'
+import { checkboxSizeStyles } from './styles/checkboxSize'
+
+const styles = {
+  ...checkboxBaseStyles,
+  ...checkboxAlignStyles,
+  ...checkboxShapeStyles,
+  ...checkboxSizeStyles,
+}
+
+export { styles }