@itcase/ui-react-native 1.10.81

package/src/components/Textarea/Textarea.tsx

@@ -0,0 +1,158 @@
+import { useMemo } from 'react'
+import { TextInput } from 'react-native'
+
+import { tokens } from '../../styles/tokens'
+import { TEXTAREA_MIN_HEIGHT } from './styles/textarea'
+import { textareaAppearance } from './Textarea.appearance'
+import type {
+  TextareaAppearanceProps,
+  TextareaConfig,
+  TextareaProps,
+} from './Textarea.interface'
+import { styles } from './Textarea.styles'
+
+const DEFAULT_TEXTAREA_APPEARANCE = 'defaultPrimary'
+const DEFAULT_TEXTAREA_APPEARANCE_STYLE = 'solid'
+const DEFAULT_TEXTAREA_SIZE = 'm'
+const TEXTAREA_ROW_LINE_HEIGHT = 20
+
+const textareaConfig: TextareaConfig = {
+  appearance: {},
+  setAppearance: (newComponent) => {
+    textareaConfig.appearance = newComponent
+  },
+}
+
+textareaConfig.setAppearance(textareaAppearance)
+
+function getTokenTextColor(
+  textColorKey?: TextareaAppearanceProps['textColor'],
+) {
+  if (!textColorKey) {
+    return undefined
+  }
+
+  const colorStyle = tokens[`text_color_${textColorKey}`]
+
+  if (colorStyle && 'color' in colorStyle) {
+    return colorStyle.color
+  }
+
+  return undefined
+}
+
+function getTokenFillColor(fillKey?: TextareaAppearanceProps['caret']) {
+  if (!fillKey) {
+    return undefined
+  }
+
+  const fillStyle = tokens[`fill_${fillKey}`]
+
+  if (fillStyle && 'backgroundColor' in fillStyle) {
+    return fillStyle.backgroundColor
+  }
+
+  return undefined
+}
+
+function Textarea(props: TextareaProps) {
+  const {
+    appearance,
+    width,
+    minHeight,
+    maxLength,
+    size,
+    fill,
+    borderColor,
+    textColor,
+    textSize,
+    textWeight,
+    appearanceStyle,
+    caret,
+    placeholder,
+    placeholderTextColor,
+    rows,
+    shape,
+    style,
+    value,
+    isDisabled,
+    isError,
+    isReadOnly,
+    onBlur,
+    onChangeText,
+    onFocus,
+  } = props
+
+  const appearanceConfig = useMemo(() => {
+    const appearanceKeyList = [
+      appearance || DEFAULT_TEXTAREA_APPEARANCE,
+      appearanceStyle || DEFAULT_TEXTAREA_APPEARANCE_STYLE,
+    ]
+
+    if (isError) {
+      appearanceKeyList.push('errorPrimary')
+    }
+
+    if (isDisabled) {
+      appearanceKeyList.push('disabledPrimary')
+    }
+
+    return appearanceKeyList.reduce<TextareaAppearanceProps>(
+      (resultConfig, appearanceKey) => {
+        return Object.assign(
+          resultConfig,
+          textareaConfig.appearance?.[appearanceKey],
+        )
+      },
+      {},
+    )
+  }, [appearance, appearanceStyle, isDisabled, isError])
+
+  const fillKey = fill || appearanceConfig.fill
+  const borderColorKey = borderColor || appearanceConfig.borderColor
+  const textColorKey = textColor || appearanceConfig.textColor
+  const textSizeKey = textSize || appearanceConfig.textSize
+  const textWeightKey = textWeight || appearanceConfig.textWeight
+  const placeholderTextColorKey =
+    placeholderTextColor || appearanceConfig.placeholderTextColor
+  const caretKey = caret || appearanceConfig.caret
+  const shapeKey = shape || appearanceConfig.shape
+  const sizeKey = size || appearanceConfig.size || DEFAULT_TEXTAREA_SIZE
+  const widthKey = width || appearanceConfig.width
+
+  let resolvedMinHeight = minHeight || TEXTAREA_MIN_HEIGHT
+
+  if (rows) {
+    resolvedMinHeight = rows * TEXTAREA_ROW_LINE_HEIGHT
+  }
+
+  return (
+    <TextInput
+      maxLength={maxLength}
+      textAlignVertical="top"
+      cursorColor={getTokenFillColor(caretKey)}
+      editable={!(isDisabled || isReadOnly)}
+      multiline={true}
+      placeholder={placeholder}
+      placeholderTextColor={getTokenTextColor(placeholderTextColorKey)}
+      selectionColor={getTokenFillColor(caretKey)}
+      style={[
+        styles.textarea,
+        fillKey && tokens[`fill_${fillKey}`],
+        borderColorKey && tokens[`border_color_${borderColorKey}`],
+        shapeKey && styles[`textarea_shape_${shapeKey}`],
+        sizeKey && styles[`textarea_size_${sizeKey}`],
+        widthKey && tokens[`width_${widthKey}`],
+        { minHeight: resolvedMinHeight },
+        style && style,
+      ]}
+      underlineColorAndroid="transparent"
+      value={value}
+      onBlur={onBlur}
+      onChangeText={onChangeText}
+      onFocus={onFocus}
+    />
+  )
+}
+
+export { Textarea, textareaConfig }

package/src/components/Textarea/appearance/textareaDefault.ts

@@ -0,0 +1,26 @@
+import type { TextareaAppearance } from '../Textarea.interface'
+
+const textareaAppearanceDefault = {
+  defaultPrimary: {
+    fill: 'surfaceSecondary',
+    borderColor: 'surfaceBorderTertiary',
+    placeholderTextColor: 'surfaceTextQuaternary',
+  },
+  defaultQuaternary: {
+    fill: 'surfacePrimary',
+    borderColor: 'surfaceBorderTertiary',
+    placeholderTextColor: 'surfaceTextQuaternary',
+  },
+  defaultSecondary: {
+    fill: 'surfacePrimary',
+    borderColor: 'surfaceBorderTertiary',
+    placeholderTextColor: 'surfaceTextQuaternary',
+  },
+  defaultTertiary: {
+    fill: 'surfacePrimary',
+    borderColor: 'surfaceBorderTertiary',
+    placeholderTextColor: 'surfaceTextQuaternary',
+  },
+} satisfies TextareaAppearance
+
+export { textareaAppearanceDefault }

package/src/components/Textarea/appearance/textareaDisabled.ts

@@ -0,0 +1,17 @@
+import type { TextareaAppearance } from '../Textarea.interface'
+
+const textareaAppearanceDisabled = {
+  disabledPrimary: {
+    fill: 'surfacePrimary',
+    borderColor: 'errorBorderQuaternary',
+    textColor: 'surfaceTextQuaternary',
+    placeholderTextColor: 'surfaceTextQuaternary',
+  },
+  disabledSecondary: {
+    fill: 'surfaceSecondary',
+    borderColor: 'surfaceBorderTertiary',
+    placeholderTextColor: 'surfaceTextSecondary',
+  },
+} satisfies TextareaAppearance
+
+export { textareaAppearanceDisabled }

package/src/components/Textarea/appearance/textareaError.ts

@@ -0,0 +1,17 @@
+import type { TextareaAppearance } from '../Textarea.interface'
+
+const textareaAppearanceError = {
+  errorPrimary: {
+    fill: 'errorTertiary',
+    borderColor: 'errorBorderQuaternary',
+    textColor: 'surfaceTextPrimary',
+    placeholderTextColor: 'surfaceTextQuaternary',
+  },
+  errorSecondary: {
+    fill: 'errorSecondary',
+    borderColor: 'errorBorderTertiary',
+    placeholderTextColor: 'errorTextSecondary',
+  },
+} satisfies TextareaAppearance
+
+export { textareaAppearanceError }

package/src/components/Textarea/appearance/textareaRequire.ts

@@ -0,0 +1,17 @@
+import type { TextareaAppearance } from '../Textarea.interface'
+
+const textareaAppearanceRequire = {
+  requirePrimary: {
+    fill: 'warningTertiary',
+    borderColor: 'warningBorderQuaternary',
+    textColor: 'surfaceTextPrimary',
+    placeholderTextColor: 'surfaceTextQuaternary',
+  },
+  requireSecondary: {
+    fill: 'surfaceSecondary',
+    borderColor: 'surfaceBorderTertiary',
+    placeholderTextColor: 'surfaceTextSecondary',
+  },
+} satisfies TextareaAppearance
+
+export { textareaAppearanceRequire }

package/src/components/Textarea/appearance/textareaShape.ts

@@ -0,0 +1,24 @@
+import type { TextareaAppearanceShape } from '../Textarea.interface'
+
+const textareaAppearanceShape = {
+  circular: {
+    shape: 'circular',
+  },
+  rounded: {
+    shape: 'rounded',
+  },
+  roundedXL: {
+    shape: 'roundedXL',
+  },
+  roundedL: {
+    shape: 'roundedL',
+  },
+  roundedM: {
+    shape: 'roundedM',
+  },
+  roundedS: {
+    shape: 'roundedS',
+  },
+} satisfies TextareaAppearanceShape
+
+export { textareaAppearanceShape }

package/src/components/Textarea/appearance/textareaSize.ts

@@ -0,0 +1,22 @@
+import type { TextareaAppearanceSize } from '../Textarea.interface'
+
+const textareaAppearanceSize = {
+  sizeXL: {
+    size: 'xl',
+    textSize: 's',
+  },
+  sizeL: {
+    size: 'l',
+    textSize: 's',
+  },
+  sizeM: {
+    size: 'm',
+    textSize: 'm',
+  },
+  sizeS: {
+    size: 's',
+    textSize: 's',
+  },
+} satisfies TextareaAppearanceSize
+
+export { textareaAppearanceSize }

package/src/components/Textarea/appearance/textareaStyle.ts

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

package/src/components/Textarea/appearance/textareaSuccess.ts

@@ -0,0 +1,17 @@
+import type { TextareaAppearance } from '../Textarea.interface'
+
+const textareaAppearanceSuccess = {
+  successPrimary: {
+    fill: 'successTertiary',
+    borderColor: 'successBorderQuaternary',
+    textColor: 'surfaceTextPrimary',
+    placeholderTextColor: 'surfaceTextQuaternary',
+  },
+  successSecondary: {
+    fill: 'surfaceSecondary',
+    borderColor: 'surfaceBorderTertiary',
+    placeholderTextColor: 'surfaceTextSecondary',
+  },
+} satisfies TextareaAppearance
+
+export { textareaAppearanceSuccess }

package/src/components/Textarea/index.ts

@@ -0,0 +1,36 @@
+import { textareaShapeList } from './styles/textareaShape'
+import type { textareaShapePropsType } from './styles/textareaShape'
+import { textareaSizeList } from './styles/textareaSize'
+import type { textareaSizePropsType } from './styles/textareaSize'
+import { Textarea, textareaConfig } from './Textarea'
+import { textareaAppearance } from './Textarea.appearance'
+import type {
+  TextareaAppearance,
+  TextareaAppearanceKey,
+  TextareaAppearanceProps,
+  TextareaAppearanceShape,
+  TextareaAppearanceSize,
+  TextareaAppearanceStyle,
+  TextareaConfig,
+  TextareaProps,
+} from './Textarea.interface'
+
+export {
+  Textarea,
+  textareaAppearance,
+  textareaConfig,
+  textareaShapeList,
+  textareaSizeList,
+}
+export type {
+  TextareaAppearance,
+  TextareaAppearanceKey,
+  TextareaAppearanceProps,
+  TextareaAppearanceShape,
+  TextareaAppearanceSize,
+  TextareaAppearanceStyle,
+  TextareaConfig,
+  TextareaProps,
+  textareaShapePropsType,
+  textareaSizePropsType,
+}

package/src/components/Textarea/stories/Textarea.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Textarea } from '../Textarea'
+
+const TextareaMeta: Meta<typeof Textarea> = {
+  title: 'Atoms / Textarea',
+  component: Textarea,
+  args: {
+    appearance: 'defaultPrimary',
+    size: 'm',
+    appearanceStyle: 'solid',
+    placeholder: 'Placeholder',
+    shape: 'rounded',
+    style: { width: 240 },
+  },
+}
+
+export default TextareaMeta
+
+export const Default: StoryObj<typeof Textarea> = {}
+
+export const Filled: StoryObj<typeof Textarea> = {
+  args: {
+    value: 'Multiline text value',
+  },
+}
+
+export const Error: StoryObj<typeof Textarea> = {
+  args: {
+    appearance: 'errorPrimary',
+    value: 'Invalid value',
+    isError: true,
+  },
+}
+
+export const Success: StoryObj<typeof Textarea> = {
+  args: {
+    appearance: 'successPrimary',
+    value: 'Valid value',
+  },
+}
+
+export const Disabled: StoryObj<typeof Textarea> = {
+  args: {
+    value: 'Disabled',
+    isDisabled: true,
+  },
+}
+
+export const SizeXL: StoryObj<typeof Textarea> = {
+  args: {
+    size: 'xl',
+  },
+}
+
+export const Rows: StoryObj<typeof Textarea> = {
+  args: {
+    placeholder: 'Six rows min height',
+    rows: 6,
+  },
+}

package/src/components/Textarea/styles/textarea.ts

@@ -0,0 +1,17 @@
+import { StyleSheet } from 'react-native'
+
+const TEXTAREA_MIN_HEIGHT = 80
+
+const textareaStyles = StyleSheet.create({
+  textarea: {
+    minHeight: TEXTAREA_MIN_HEIGHT,
+    borderColor: 'transparent',
+    borderStyle: 'solid',
+    borderWidth: 1,
+    margin: 0,
+    padding: 0,
+    textAlignVertical: 'top',
+  },
+})
+
+export { TEXTAREA_MIN_HEIGHT, textareaStyles }

package/src/components/Textarea/styles/textareaShape.ts

@@ -0,0 +1,34 @@
+import { StyleSheet } from 'react-native'
+
+import { getVariantsPropsList } from '../../../utils'
+
+const textareaShapeStyles = StyleSheet.create({
+  textarea_shape_circular: {
+    borderRadius: 100,
+  },
+  textarea_shape_rounded: {
+    borderRadius: 8,
+  },
+  textarea_shape_roundedL: {
+    borderRadius: 12,
+  },
+  textarea_shape_roundedM: {
+    borderRadius: 8,
+  },
+  textarea_shape_roundedS: {
+    borderRadius: 4,
+  },
+  textarea_shape_roundedXL: {
+    borderRadius: 16,
+  },
+})
+
+const textareaShapeList = getVariantsPropsList(
+  textareaShapeStyles,
+  'textarea_shape_',
+)
+
+type textareaShapePropsType = (typeof textareaShapeList)[number]
+
+export { textareaShapeList, textareaShapeStyles }
+export type { textareaShapePropsType }

package/src/components/Textarea/styles/textareaSize.ts

@@ -0,0 +1,32 @@
+import { StyleSheet } from 'react-native'
+
+import { getVariantsPropsList } from '../../../utils'
+
+const textareaSizeStyles = StyleSheet.create({
+  textarea_size_l: {
+    paddingVertical: 12,
+    paddingHorizontal: 12,
+  },
+  textarea_size_m: {
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+  },
+  textarea_size_s: {
+    paddingVertical: 2,
+    paddingHorizontal: 12,
+  },
+  textarea_size_xl: {
+    paddingVertical: 16,
+    paddingHorizontal: 12,
+  },
+})
+
+const textareaSizeList = getVariantsPropsList(
+  textareaSizeStyles,
+  'textarea_size_',
+)
+
+type textareaSizePropsType = (typeof textareaSizeList)[number]
+
+export { textareaSizeList, textareaSizeStyles }
+export type { textareaSizePropsType }

package/src/components/Tile/Tile.appearance.ts

@@ -0,0 +1,14 @@
+import { tileAppearanceShape } from './appearance/tileShape'
+import { tileAppearanceSize } from './appearance/tileSize'
+import { tileAppearanceStyle } from './appearance/tileStyle'
+import { tileAppearanceSurface } from './appearance/tileSurface'
+import type { TileAppearance } from './Tile.interface'
+
+const tileAppearance = {
+  ...tileAppearanceShape,
+  ...tileAppearanceSize,
+  ...tileAppearanceStyle,
+  ...tileAppearanceSurface,
+} satisfies TileAppearance
+
+export { tileAppearance }

package/src/components/Tile/Tile.interface.ts

@@ -0,0 +1,97 @@
+import type { ReactNode } from 'react'
+import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native'
+
+import type {
+  AppearanceConfig,
+  AppearanceKeysDefault,
+  AppearancePartialRecord,
+  AppearanceRecord,
+  AppearanceShapeKey,
+  AppearanceSizeKey,
+  AppearanceStyleKey,
+  BorderColorProps,
+  CompositeAppearanceKeys,
+  DirectionProps,
+  FillProps,
+  ShapeProps,
+  SizeProps,
+  TextAlignProps,
+  TextColorProps,
+  TextSizeProps,
+  TextWeightProps,
+  TitleSizeProps,
+  WidthProps,
+} from '@itcase/types-ui'
+
+import type { BadgeProps } from '../Badge/Badge.interface'
+import type { IconProps, SvgIconComponent } from '../Icon/Icon.interface'
+import type { tileShapePropsType } from './styles/tileShape'
+import type { tileSizePropsType } from './styles/tileSize'
+
+interface TileAppearanceProps {
+  badgeAppearance?: BadgeProps['appearance']
+  badgeShape?: BadgeProps['shape']
+  badgeSize?: BadgeProps['size']
+  badgeTextColor?: BadgeProps['badgeTextColor']
+  badgeTextSize?: BadgeProps['badgeTextSize']
+  borderColor?: BorderColorProps
+  descTextColor?: TextColorProps
+  descTextSize?: TextSizeProps
+  direction?: DirectionProps
+  fill?: FillProps
+  iconFill?: IconProps['fill']
+  iconFillIcon?: IconProps['iconFill']
+  iconShape?: IconProps['shape']
+  iconSize?: IconProps['iconSize']
+  shape?: ShapeProps
+  size?: SizeProps
+  titleTextAlign?: TextAlignProps
+  titleTextColor?: TextColorProps
+  titleTextSize?: TitleSizeProps
+  titleTextWeight?: TextWeightProps
+  width?: WidthProps
+}
+
+type TileConfig = AppearanceConfig<AppearanceKeysDefault, TileAppearanceProps>
+type TileAppearance = TileConfig['appearance']
+type TileAppearanceStyle = AppearanceRecord<
+  AppearanceStyleKey,
+  TileAppearanceProps,
+  'borderColor' | 'fill'
+>
+type TileAppearanceShape = Partial<
+  Record<AppearanceShapeKey, Partial<Pick<TileAppearanceProps, 'shape'>>>
+>
+type TileAppearanceSize = AppearancePartialRecord<
+  AppearanceSizeKey,
+  TileAppearanceProps,
+  'descTextSize' | 'iconSize' | 'size' | 'titleTextSize'
+>
+type TileAppearanceKey = AppearanceKeysDefault | CompositeAppearanceKeys
+
+interface TileProps extends TileAppearanceProps {
+  onPress?: (event: GestureResponderEvent) => void
+  onPressIcon?: (event: GestureResponderEvent) => void
+  after?: ReactNode
+  appearance?: TileAppearanceKey
+  badgeValue?: BadgeProps['text']
+  before?: ReactNode
+  children?: ReactNode
+  desc?: string
+  icon?: SvgIconComponent
+  shape?: tileShapePropsType
+  size?: tileSizePropsType
+  style?: StyleProp<ViewStyle>
+  title?: string
+}
+
+export type {
+  TileAppearance,
+  TileAppearanceKey,
+  TileAppearanceProps,
+  TileAppearanceShape,
+  TileAppearanceSize,
+  TileAppearanceStyle,
+  TileConfig,
+  TileProps,
+}

package/src/components/Tile/Tile.styles.ts

@@ -0,0 +1,11 @@
+import { tileStyles as tileBaseStyles } from './styles/tile'
+import { tileShapeStyles } from './styles/tileShape'
+import { tileSizeStyles } from './styles/tileSize'
+
+const styles = {
+  ...tileBaseStyles,
+  ...tileShapeStyles,
+  ...tileSizeStyles,
+}
+
+export { styles }