@itcase/ui-react-native 1.10.81

package/src/components/Dropdown/appearance/dropdownShape.ts

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

package/src/components/Dropdown/appearance/dropdownSize.ts

@@ -0,0 +1,21 @@
+import type { DropdownAppearanceSize } from '../Dropdown.interface'
+
+const dropdownAppearanceSize = {
+  sizeL: {
+    size: 'l',
+    labelTextSize: 'm',
+    emptyMessageTextSize: 'm',
+  },
+  sizeS: {
+    size: 's',
+    labelTextSize: 's',
+    emptyMessageTextSize: 'm',
+  },
+  sizeXS: {
+    size: 'xs',
+    labelTextSize: 'xs',
+    emptyMessageTextSize: 'xs',
+  },
+} satisfies DropdownAppearanceSize
+
+export { dropdownAppearanceSize }

package/src/components/Dropdown/appearance/dropdownStyle.ts

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

package/src/components/Dropdown/appearance/dropdownSurface.ts

@@ -0,0 +1,25 @@
+import type { DropdownAppearance } from '../Dropdown.interface'
+
+const dropdownAppearanceSurface = {
+  surfacePrimary: {
+    fill: 'surfacePrimary',
+    fillActive: 'surfaceActivePrimary',
+    labelTextColor: 'surfaceTextPrimary',
+    labelTextColorActive: 'surfaceTextPrimary',
+    emptyMessageTextColor: 'surfaceTextPrimary',
+  },
+  surfaceQuaternary: {
+    fill: 'surfaceQuaternary',
+    labelTextColor: 'surfaceTextPrimary',
+  },
+  surfaceSecondary: {
+    fill: 'surfaceSecondary',
+    labelTextColor: 'surfaceTextPrimary',
+  },
+  surfaceTertiary: {
+    fill: 'surfaceTertiary',
+    labelTextColor: 'surfaceTextPrimary',
+  },
+} satisfies DropdownAppearance
+
+export { dropdownAppearanceSurface }

package/src/components/Dropdown/index.ts

@@ -0,0 +1,45 @@
+import { Dropdown, dropdownConfig } from './Dropdown'
+import { dropdownAppearance } from './Dropdown.appearance'
+import type {
+  DropdownAppearance,
+  DropdownAppearanceKey,
+  DropdownAppearanceProps,
+  DropdownAppearanceShape,
+  DropdownAppearanceSize,
+  DropdownAppearanceStyle,
+  DropdownConfig,
+  DropdownItemAppearance,
+  DropdownItemConfig,
+  DropdownItemProps,
+  DropdownListItem,
+  DropdownProps,
+} from './Dropdown.interface'
+import { DropdownItem, dropdownItemConfig } from './DropdownItem'
+import { dropdownItemAppearance } from './DropdownItem.appearance'
+import { dropdownSizeList } from './styles/dropdownSize'
+import type { dropdownSizePropsType } from './styles/dropdownSize'
+
+export {
+  Dropdown,
+  dropdownAppearance,
+  dropdownConfig,
+  DropdownItem,
+  dropdownItemAppearance,
+  dropdownItemConfig,
+  dropdownSizeList,
+}
+export type {
+  DropdownAppearance,
+  DropdownAppearanceKey,
+  DropdownAppearanceProps,
+  DropdownAppearanceShape,
+  DropdownAppearanceSize,
+  DropdownAppearanceStyle,
+  DropdownConfig,
+  DropdownItemAppearance,
+  DropdownItemConfig,
+  DropdownItemProps,
+  DropdownListItem,
+  DropdownProps,
+  dropdownSizePropsType,
+}

package/src/components/Dropdown/stories/Dropdown.stories.tsx

@@ -0,0 +1,62 @@
+import { useState } from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Text } from '../../Text'
+import { Dropdown } from '../Dropdown'
+import type { DropdownProps } from '../Dropdown.interface'
+
+const dropdownList = [
+  { key: 1, label: 'Item 1', isActive: true },
+  { key: 2, label: 'Item 2' },
+  { key: 3, label: 'Item 3', badgeValue: 3 },
+  { key: 4, label: 'Item 4' },
+  { key: 5, label: 'Item 5' },
+]
+
+function DropdownPlayground(props: DropdownProps) {
+  const { isOpen, onOpenChange, ...restProps } = props
+  const [isMenuOpen, setIsMenuOpen] = useState(Boolean(isOpen))
+
+  return (
+    <Dropdown
+      {...restProps}
+      isOpen={isMenuOpen}
+      onOpenChange={(nextIsOpen) => {
+        setIsMenuOpen(nextIsOpen)
+        onOpenChange?.(nextIsOpen)
+      }}
+    />
+  )
+}
+
+const DropdownMeta: Meta<typeof Dropdown> = {
+  title: 'Molecules / Dropdown',
+  component: Dropdown,
+  args: {
+    appearance: 'surfacePrimary',
+    label: 'Open menu',
+    dropdownList: dropdownList,
+  },
+}
+
+export default DropdownMeta
+
+export const Default: StoryObj<typeof Dropdown> = {
+  render: (args) => <DropdownPlayground {...args} />,
+}
+
+export const WithTrigger: StoryObj<typeof Dropdown> = {
+  args: {
+    label: undefined,
+    trigger: <Text>Custom trigger</Text>,
+  },
+  render: (args) => <DropdownPlayground {...args} />,
+}
+
+export const Open: StoryObj<typeof Dropdown> = {
+  args: {
+    isOpen: true,
+  },
+  render: (args) => <DropdownPlayground {...args} />,
+}

package/src/components/Dropdown/styles/dropdown.ts

@@ -0,0 +1,31 @@
+import { StyleSheet } from 'react-native'
+
+const dropdownStyles = StyleSheet.create({
+  dropdown: {
+    position: 'relative',
+  },
+  dropdown__item: {
+    minHeight: 44,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+  },
+  dropdown__menu: {
+    width: '100%',
+    maxHeight: '80%',
+    overflow: 'hidden',
+  },
+  dropdown__overlay: {
+    flex: 1,
+    justifyContent: 'center',
+    padding: 24,
+    backgroundColor: 'hsla(0, 0%, 45%, 0.8)',
+  },
+  dropdown__overlayPress: {
+    ...StyleSheet.absoluteFill,
+  },
+  dropdown__trigger: {
+    alignSelf: 'flex-start',
+  },
+})
+
+export { dropdownStyles }

package/src/components/Dropdown/styles/dropdownSize.ts

@@ -0,0 +1,36 @@
+import { StyleSheet } from 'react-native'
+
+import { getVariantsPropsList } from '../../../utils'
+
+const dropdownSizeStyles = StyleSheet.create({
+  dropdown__item_size_l: {
+    minHeight: 48,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+  },
+  dropdown__item_size_m: {
+    minHeight: 44,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+  },
+  dropdown__item_size_s: {
+    minHeight: 40,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+  },
+  dropdown__item_size_xs: {
+    minHeight: 32,
+    paddingVertical: 6,
+    paddingHorizontal: 8,
+  },
+})
+
+const dropdownSizeList = getVariantsPropsList(
+  dropdownSizeStyles,
+  'dropdown__item_size_',
+)
+
+type dropdownSizePropsType = (typeof dropdownSizeList)[number]
+
+export { dropdownSizeList, dropdownSizeStyles }
+export type { dropdownSizePropsType }

package/src/components/Group/Group.appearance.ts

@@ -0,0 +1,8 @@
+import { groupAppearanceSurface } from './appearance/groupSurface'
+import type { GroupAppearance } from './Group.interface'
+
+const groupAppearance = {
+  ...groupAppearanceSurface,
+} satisfies GroupAppearance
+
+export { groupAppearance }

package/src/components/Group/Group.interface.ts

@@ -0,0 +1,53 @@
+import type { ReactNode } from 'react'
+import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native'
+
+import type {
+  AppearanceConfig,
+  AppearanceKeysDefault,
+  BorderColorProps,
+  FillActiveProps,
+  FillProps,
+  ShapeProps,
+  WidthProps,
+} from '@itcase/types-ui'
+
+import type { GapProps } from '../../styles/gap'
+import type { groupAlignItemsPropsType } from './styles/groupAlign'
+import type { groupDirectionPropsType } from './styles/groupDirection'
+import type { groupJustifyContentPropsType } from './styles/groupJustify'
+import type { groupWrapPropsType } from './styles/groupWrap'
+
+interface GroupAppearanceProps {
+  borderColor?: BorderColorProps
+  fill?: FillProps
+  fillActive?: FillActiveProps
+  fillDisabled?: FillProps
+  shape?: ShapeProps
+  width?: WidthProps
+}
+
+type GroupAppearanceKey = AppearanceKeysDefault
+type GroupConfig = AppearanceConfig<AppearanceKeysDefault, GroupAppearanceProps>
+type GroupAppearance = GroupConfig['appearance']
+
+interface GroupProps extends GroupAppearanceProps {
+  isActive?: boolean
+  isDisabled?: boolean
+  onPress?: (event: GestureResponderEvent) => void
+  alignItems?: groupAlignItemsPropsType
+  appearance?: GroupAppearanceKey
+  children?: ReactNode
+  direction?: groupDirectionPropsType
+  gap?: GapProps
+  justifyContent?: groupJustifyContentPropsType
+  style?: StyleProp<ViewStyle>
+  wrap?: groupWrapPropsType
+}
+
+export type {
+  GroupAppearance,
+  GroupAppearanceKey,
+  GroupAppearanceProps,
+  GroupConfig,
+  GroupProps,
+}

package/src/components/Group/Group.styles.ts

@@ -0,0 +1,15 @@
+import { groupStyles as groupBaseStyles } from './styles/group'
+import { groupAlignStyles } from './styles/groupAlign'
+import { groupDirectionStyles } from './styles/groupDirection'
+import { groupJustifyStyles } from './styles/groupJustify'
+import { groupWrapStyles } from './styles/groupWrap'
+
+const styles = {
+  ...groupBaseStyles,
+  ...groupAlignStyles,
+  ...groupDirectionStyles,
+  ...groupJustifyStyles,
+  ...groupWrapStyles,
+}
+
+export { styles }

package/src/components/Group/Group.tsx

@@ -0,0 +1,80 @@
+import React, { useMemo } from 'react'
+import { Pressable, View } from 'react-native'
+
+import { tokens } from '../../styles/tokens'
+import { groupAppearance } from './Group.appearance'
+import type { GroupConfig, GroupProps } from './Group.interface'
+import { styles } from './Group.styles'
+
+const groupConfig: GroupConfig = {
+  appearance: {},
+  setAppearance: (newComponent) => {
+    groupConfig.appearance = newComponent
+  },
+}
+
+groupConfig.setAppearance(groupAppearance)
+
+function Group(props: GroupProps) {
+  const {
+    appearance,
+    width,
+    direction,
+    justifyContent,
+    alignItems,
+    fill,
+    borderColor,
+    gap,
+    shape,
+    style,
+    wrap,
+    isActive,
+    isDisabled,
+    onPress,
+    children,
+  } = props
+
+  const appearanceConfig = useMemo(() => {
+    if (!appearance || !groupConfig.appearance) {
+      return undefined
+    }
+
+    return groupConfig.appearance[appearance]
+  }, [appearance])
+
+  const fillKey = isDisabled
+    ? appearanceConfig?.fillDisabled
+    : isActive
+      ? appearanceConfig?.fillActive
+      : fill || appearanceConfig?.fill
+
+  const borderColorKey = borderColor || appearanceConfig?.borderColor
+  const shapeKey = shape || appearanceConfig?.shape
+  const widthKey = width || appearanceConfig?.width
+
+  const groupStyle = [
+    styles.group,
+    fillKey && tokens[`fill_${fillKey}`],
+    borderColorKey && tokens[`border_color_${borderColorKey}`],
+    shapeKey && tokens[`shape_${shapeKey}`],
+    widthKey && tokens[`width_${widthKey}`],
+    gap && tokens[`gap_${gap}`],
+    direction && styles[`group_direction_${direction}`],
+    wrap && styles[`group_wrap_${wrap}`],
+    alignItems && styles[`group_align_${alignItems}`],
+    justifyContent && styles[`group_justify_${justifyContent}`],
+    style && style,
+  ]
+
+  if (onPress) {
+    return (
+      <Pressable disabled={isDisabled} style={groupStyle} onPress={onPress}>
+        {children}
+      </Pressable>
+    )
+  }
+
+  return <View style={groupStyle}>{children}</View>
+}
+
+export { Group, groupConfig }

package/src/components/Group/appearance/groupSurface.ts

@@ -0,0 +1,10 @@
+import type { GroupAppearance } from '../Group.interface'
+
+const groupAppearanceSurface = {
+  surfacePrimary: {
+    fill: 'surfacePrimary',
+    borderColor: 'surfaceBorderPrimary',
+  },
+} satisfies GroupAppearance
+
+export { groupAppearanceSurface }

package/src/components/Group/index.ts

@@ -0,0 +1,36 @@
+import { Group, groupConfig } from './Group'
+import { groupAppearance } from './Group.appearance'
+import type {
+  GroupAppearance,
+  GroupAppearanceKey,
+  GroupConfig,
+  GroupProps,
+} from './Group.interface'
+import { groupAlignItemsList } from './styles/groupAlign'
+import type { groupAlignItemsPropsType } from './styles/groupAlign'
+import { groupDirectionList } from './styles/groupDirection'
+import type { groupDirectionPropsType } from './styles/groupDirection'
+import { groupJustifyContentList } from './styles/groupJustify'
+import type { groupJustifyContentPropsType } from './styles/groupJustify'
+import { groupWrapList } from './styles/groupWrap'
+import type { groupWrapPropsType } from './styles/groupWrap'
+
+export {
+  Group,
+  groupAlignItemsList,
+  groupAppearance,
+  groupConfig,
+  groupDirectionList,
+  groupJustifyContentList,
+  groupWrapList,
+}
+export type {
+  groupAlignItemsPropsType,
+  GroupAppearance,
+  GroupAppearanceKey,
+  GroupConfig,
+  groupDirectionPropsType,
+  groupJustifyContentPropsType,
+  GroupProps,
+  groupWrapPropsType,
+}

package/src/components/Group/stories/Group.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Text } from '../../Text'
+import { Group } from '../Group'
+
+const GroupMeta: Meta<typeof Group> = {
+  title: 'Layout / Group',
+  component: Group,
+  args: {
+    direction: 'horizontal',
+    fill: 'accentPrimary',
+    gap: 8,
+  },
+}
+
+export default GroupMeta
+
+export const Default: StoryObj<typeof Group> = {
+  render: (args) => (
+    <Group {...args}>
+      <Text textColor="white">1</Text>
+      <Text textColor="white">2</Text>
+      <Text textColor="white">3</Text>
+    </Group>
+  ),
+}
+
+export const Vertical: StoryObj<typeof Group> = {
+  args: {
+    direction: 'vertical',
+  },
+  render: (args) => (
+    <Group {...args}>
+      <Text textColor="white">1</Text>
+      <Text textColor="white">2</Text>
+      <Text textColor="white">3</Text>
+    </Group>
+  ),
+}

package/src/components/Group/styles/group.ts

@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native'
+
+const groupStyles = StyleSheet.create({
+  group: {
+    display: 'flex',
+  },
+})
+
+export { groupStyles }

package/src/components/Group/styles/groupAlign.ts

@@ -0,0 +1,37 @@
+import { StyleSheet } from 'react-native'
+
+import { getVariantsPropsList } from '../../../utils'
+
+const groupAlignStyles = StyleSheet.create({
+  group_align_baseline: {
+    alignItems: 'baseline',
+  },
+  group_align_center: {
+    alignItems: 'center',
+  },
+  group_align_end: {
+    alignItems: 'flex-end',
+  },
+  'group_align_flex-end': {
+    alignItems: 'flex-end',
+  },
+  'group_align_flex-start': {
+    alignItems: 'flex-start',
+  },
+  group_align_start: {
+    alignItems: 'flex-start',
+  },
+  group_align_stretch: {
+    alignItems: 'stretch',
+  },
+})
+
+const groupAlignItemsList = getVariantsPropsList(
+  groupAlignStyles,
+  'group_align_',
+)
+
+type groupAlignItemsPropsType = (typeof groupAlignItemsList)[number]
+
+export { groupAlignItemsList, groupAlignStyles }
+export type { groupAlignItemsPropsType }

package/src/components/Group/styles/groupDirection.ts

@@ -0,0 +1,40 @@
+import { StyleSheet } from 'react-native'
+
+import { getVariantsPropsList } from '../../../utils'
+
+const groupDirectionStyles = StyleSheet.create({
+  group_direction_column: {
+    flexDirection: 'column',
+  },
+  'group_direction_column-reverse': {
+    flexDirection: 'column-reverse',
+  },
+  group_direction_horizontal: {
+    flexDirection: 'row',
+  },
+  'group_direction_horizontal-reverse': {
+    flexDirection: 'row-reverse',
+  },
+  group_direction_row: {
+    flexDirection: 'row',
+  },
+  'group_direction_row-reverse': {
+    flexDirection: 'row-reverse',
+  },
+  group_direction_vertical: {
+    flexDirection: 'column',
+  },
+  'group_direction_vertical-reverse': {
+    flexDirection: 'column-reverse',
+  },
+})
+
+const groupDirectionList = getVariantsPropsList(
+  groupDirectionStyles,
+  'group_direction_',
+)
+
+type groupDirectionPropsType = (typeof groupDirectionList)[number]
+
+export { groupDirectionList, groupDirectionStyles }
+export type { groupDirectionPropsType }

package/src/components/Group/styles/groupJustify.ts

@@ -0,0 +1,40 @@
+import { StyleSheet } from 'react-native'
+
+import { getVariantsPropsList } from '../../../utils'
+
+const groupJustifyStyles = StyleSheet.create({
+  group_justify_center: {
+    justifyContent: 'center',
+  },
+  group_justify_end: {
+    justifyContent: 'flex-end',
+  },
+  'group_justify_flex-end': {
+    justifyContent: 'flex-end',
+  },
+  'group_justify_flex-start': {
+    justifyContent: 'flex-start',
+  },
+  'group_justify_space-around': {
+    justifyContent: 'space-around',
+  },
+  'group_justify_space-between': {
+    justifyContent: 'space-between',
+  },
+  'group_justify_space-evenly': {
+    justifyContent: 'space-evenly',
+  },
+  group_justify_start: {
+    justifyContent: 'flex-start',
+  },
+})
+
+const groupJustifyContentList = getVariantsPropsList(
+  groupJustifyStyles,
+  'group_justify_',
+)
+
+type groupJustifyContentPropsType = (typeof groupJustifyContentList)[number]
+
+export { groupJustifyContentList, groupJustifyStyles }
+export type { groupJustifyContentPropsType }

package/src/components/Group/styles/groupWrap.ts

@@ -0,0 +1,22 @@
+import { StyleSheet } from 'react-native'
+
+import { getVariantsPropsList } from '../../../utils'
+
+const groupWrapStyles = StyleSheet.create({
+  group_wrap_nowrap: {
+    flexWrap: 'nowrap',
+  },
+  group_wrap_wrap: {
+    flexWrap: 'wrap',
+  },
+  'group_wrap_wrap-reverse': {
+    flexWrap: 'wrap-reverse',
+  },
+})
+
+const groupWrapList = getVariantsPropsList(groupWrapStyles, 'group_wrap_')
+
+type groupWrapPropsType = (typeof groupWrapList)[number]
+
+export { groupWrapList, groupWrapStyles }
+export type { groupWrapPropsType }

package/src/components/HeroTitle/HeroTitle.appearance.ts

@@ -0,0 +1,8 @@
+import { heroTitleAppearanceSize } from './appearance/heroTitleSize'
+import type { HeroTitleAppearance } from './HeroTitle.interface'
+
+const heroTitleAppearance = {
+  ...heroTitleAppearanceSize,
+} satisfies HeroTitleAppearance
+
+export { heroTitleAppearance }