@itcase/ui-react-native 1.10.81

package/src/components/MenuItem/appearance/menuItemStyle.ts

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

package/src/components/MenuItem/appearance/menuItemSurface.ts

@@ -0,0 +1,38 @@
+import type { MenuItemAppearance } from '../MenuItem.interface'
+
+const menuItemAppearanceSurface = {
+  surfaceMutedPrimary: {
+    fill: 'surfaceSecondary',
+    fillActive: 'surfacePrimary',
+    labelTextColor: 'surfaceTextQuaternary',
+    iconAfterFillIcon: 'surfaceItemQuaternary',
+    iconBeforeFillIcon: 'surfaceItemQuaternary',
+  },
+  surfacePrimary: {
+    fill: 'surfacePrimary',
+    fillActive: 'surfaceSecondary',
+    labelTextActiveColor: 'accentTextSecondary',
+    labelTextColor: 'surfaceTextPrimary',
+    borderColor: 'surfaceBorderQuaternary',
+    iconAfterFillIcon: 'surfaceItemPrimary',
+    iconBeforeFillIcon: 'surfaceItemPrimary',
+  },
+  surfaceQuaternary: {
+    fill: 'surfaceQuaternary',
+    labelTextColor: 'surfaceTextPrimary',
+  },
+  surfaceSecondary: {
+    fill: 'surfacePrimary',
+    fillActive: 'surfaceSecondary',
+    labelTextActiveColor: 'accentTextSecondary',
+    borderColor: 'surfaceBorderQuaternary',
+    iconAfterFillIcon: 'surfaceItemPrimary',
+    iconBeforeFillIcon: 'surfaceItemPrimary',
+  },
+  surfaceTertiary: {
+    fill: 'surfaceSecondary',
+    labelTextColor: 'surfaceTextPrimary',
+  },
+} satisfies MenuItemAppearance
+
+export { menuItemAppearanceSurface }

package/src/components/MenuItem/index.ts

@@ -0,0 +1,36 @@
+import { MenuItem, menuItemConfig } from './MenuItem'
+import { menuItemAppearance } from './MenuItem.appearance'
+import type {
+  MenuItemAppearance,
+  MenuItemAppearanceKey,
+  MenuItemAppearanceProps,
+  MenuItemAppearanceShape,
+  MenuItemAppearanceSize,
+  MenuItemAppearanceStyle,
+  MenuItemConfig,
+  MenuItemProps,
+} from './MenuItem.interface'
+import { menuItemShapeList } from './styles/menuItemShape'
+import type { menuItemShapePropsType } from './styles/menuItemShape'
+import { menuItemSizeList } from './styles/menuItemSize'
+import type { menuItemSizePropsType } from './styles/menuItemSize'
+
+export {
+  MenuItem,
+  menuItemAppearance,
+  menuItemConfig,
+  menuItemShapeList,
+  menuItemSizeList,
+}
+export type {
+  MenuItemAppearance,
+  MenuItemAppearanceKey,
+  MenuItemAppearanceProps,
+  MenuItemAppearanceShape,
+  MenuItemAppearanceSize,
+  MenuItemAppearanceStyle,
+  MenuItemConfig,
+  MenuItemProps,
+  menuItemShapePropsType,
+  menuItemSizePropsType,
+}

package/src/components/MenuItem/stories/MenuItem.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { icons20 } from '@itcase/icons-default/default/svg'
+
+import { MenuItem } from '../MenuItem'
+
+const MenuItemMeta: Meta<typeof MenuItem> = {
+  title: 'Atoms / MenuItem',
+  component: MenuItem,
+  args: {
+    appearance: 'surfacePrimary',
+    size: 'xxl',
+    label: 'Label',
+    iconAfter: icons20.Placeholder.Default,
+    iconBefore: icons20.Placeholder.Default,
+    shape: 'rounded',
+  },
+}
+
+export default MenuItemMeta
+
+export const Default: StoryObj<typeof MenuItem> = {}
+
+export const WithDesc: StoryObj<typeof MenuItem> = {
+  args: {
+    desc: 'Description',
+  },
+}
+
+export const Active: StoryObj<typeof MenuItem> = {
+  args: {
+    isActive: true,
+  },
+}
+
+export const Disabled: StoryObj<typeof MenuItem> = {
+  args: {
+    isDisabled: true,
+  },
+}
+
+export const Accent: StoryObj<typeof MenuItem> = {
+  args: {
+    appearance: 'accentPrimary',
+  },
+}
+
+export const Error: StoryObj<typeof MenuItem> = {
+  args: {
+    appearance: 'errorPrimary',
+  },
+}

package/src/components/MenuItem/styles/menuItem.ts

@@ -0,0 +1,25 @@
+import { StyleSheet } from 'react-native'
+
+const menuItemStyles = StyleSheet.create({
+  menuItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    position: 'relative',
+  },
+  menuItem__icon: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  menuItem__label: {
+    flexDirection: 'column',
+    flexGrow: 1,
+    justifyContent: 'center',
+  },
+  menuItem__wrapper: {
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+})
+
+export { menuItemStyles }

package/src/components/MenuItem/styles/menuItemJustify.ts

@@ -0,0 +1,18 @@
+import { StyleSheet } from 'react-native'
+
+const menuItemJustifyStyles = StyleSheet.create({
+  menuItem_justify_center: {
+    justifyContent: 'center',
+  },
+  'menuItem_justify_flex-end': {
+    justifyContent: 'flex-end',
+  },
+  'menuItem_justify_flex-start': {
+    justifyContent: 'flex-start',
+  },
+  'menuItem_justify_space-between': {
+    justifyContent: 'space-between',
+  },
+})
+
+export { menuItemJustifyStyles }

package/src/components/MenuItem/styles/menuItemShape.ts

@@ -0,0 +1,37 @@
+import { StyleSheet } from 'react-native'
+
+import { getVariantsPropsList } from '../../../utils'
+
+const menuItemShapeStyles = StyleSheet.create({
+  menuItem_shape_circular: {
+    borderRadius: 100,
+  },
+  menuItem_shape_geometric: {
+    borderRadius: 0,
+  },
+  menuItem_shape_rounded: {
+    borderRadius: 8,
+  },
+  menuItem_shape_roundedL: {
+    borderRadius: 12,
+  },
+  menuItem_shape_roundedM: {
+    borderRadius: 6,
+  },
+  menuItem_shape_roundedS: {
+    borderRadius: 4,
+  },
+  menuItem_shape_roundedXL: {
+    borderRadius: 16,
+  },
+})
+
+const menuItemShapeList = getVariantsPropsList(
+  menuItemShapeStyles,
+  'menuItem_shape_',
+)
+
+type menuItemShapePropsType = (typeof menuItemShapeList)[number]
+
+export { menuItemShapeList, menuItemShapeStyles }
+export type { menuItemShapePropsType }

package/src/components/MenuItem/styles/menuItemSize.ts

@@ -0,0 +1,65 @@
+import { StyleSheet } from 'react-native'
+
+import { getVariantsPropsList } from '../../../utils'
+
+const menuItemSizeStyles = StyleSheet.create({
+  menuItem_size_l: {
+    minWidth: 32,
+    minHeight: 32,
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+    gap: 8,
+  },
+  menuItem_size_m: {
+    minWidth: 28,
+    minHeight: 28,
+    paddingVertical: 4,
+    paddingHorizontal: 6,
+    gap: 6,
+  },
+  menuItem_size_s: {
+    minWidth: 24,
+    minHeight: 24,
+    paddingVertical: 4,
+    paddingHorizontal: 6,
+    gap: 6,
+  },
+  menuItem_size_xl: {
+    minWidth: 40,
+    minHeight: 40,
+    paddingVertical: 6,
+    paddingHorizontal: 10,
+    gap: 8,
+  },
+  menuItem_size_xs: {
+    minWidth: 20,
+    minHeight: 20,
+    paddingVertical: 2,
+    paddingHorizontal: 4,
+    gap: 4,
+  },
+  menuItem_size_xxl: {
+    minWidth: 48,
+    minHeight: 48,
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    gap: 8,
+  },
+  menuItem_size_xxs: {
+    minWidth: 16,
+    minHeight: 16,
+    paddingVertical: 2,
+    paddingHorizontal: 2,
+    gap: 4,
+  },
+})
+
+const menuItemSizeList = getVariantsPropsList(
+  menuItemSizeStyles,
+  'menuItem_size_',
+)
+
+type menuItemSizePropsType = (typeof menuItemSizeList)[number]
+
+export { menuItemSizeList, menuItemSizeStyles }
+export type { menuItemSizePropsType }

package/src/components/Modal/Modal.interface.ts

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react'
+import type { GestureResponderEvent, StyleProp, TextStyle } from 'react-native'
+
+import type {
+  BorderColorProps,
+  FillProps,
+  TextColorProps,
+  TextSizeProps,
+  TextWeightProps,
+} from '@itcase/types-ui'
+
+import type { ButtonAppearanceKey } from '../Button/Button.interface'
+import type { buttonSizePropsType } from '../Button/styles/buttonSize'
+
+interface ModalProps {
+  onPressButton?: (event: GestureResponderEvent) => void
+  before?: ReactNode
+  borderColor?: BorderColorProps
+  btnAppearance?: ButtonAppearanceKey
+  btnLabel?: string
+  btnSize?: buttonSizePropsType
+  desc?: string
+  descStyle?: StyleProp<TextStyle>
+  descTextColor?: TextColorProps
+  descTextSize?: TextSizeProps
+  descWeight?: TextWeightProps
+  fill?: FillProps
+  title?: string
+  titleStyle?: StyleProp<TextStyle>
+  titleTextColor?: TextColorProps
+  titleTextSize?: TextSizeProps
+  titleWeight?: TextWeightProps
+}
+
+export type { ModalProps }

package/src/components/Modal/Modal.styles.ts

@@ -0,0 +1,7 @@
+import { modalStyles as modalBaseStyles } from './styles/modal'
+
+const styles = {
+  ...modalBaseStyles,
+}
+
+export { styles }

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import { View } from 'react-native'
+
+import { tokens } from '../../styles/tokens'
+import { Button } from '../Button'
+import { Text } from '../Text'
+import type { ModalProps } from './Modal.interface'
+import { styles } from './Modal.styles'
+
+const Modal: React.FC<ModalProps> = (props) => {
+  const {
+    fill,
+    title,
+    titleStyle,
+    titleTextColor,
+    titleTextSize,
+    titleWeight,
+    desc,
+    descStyle,
+    descTextColor,
+    descTextSize,
+    descWeight,
+    borderColor,
+    btnAppearance,
+    btnLabel,
+    btnSize,
+    before,
+    onPressButton,
+  } = props
+
+  return (
+    <View style={styles.modal}>
+      <View
+        style={[
+          styles.modal_wrapper,
+          fill && tokens[`fill_${fill}`],
+          borderColor && tokens[`border_color_${borderColor}`],
+        ]}
+      >
+        <View style={styles.modal__before}>{before}</View>
+        {title && (
+          <Text
+            size={titleTextSize}
+            textColor={titleTextColor}
+            style={titleStyle}
+            weight={titleWeight}
+          >
+            {title}
+          </Text>
+        )}
+        {desc && (
+          <Text
+            size={descTextSize}
+            textColor={descTextColor}
+            style={descStyle}
+            weight={descWeight}
+          >
+            {desc}
+          </Text>
+        )}
+        <Button
+          appearance={btnAppearance}
+          size={btnSize}
+          label={btnLabel}
+          style={styles.modal__btn}
+          onPress={onPressButton}
+        />
+      </View>
+    </View>
+  )
+}
+
+export { Modal }

package/src/components/Modal/index.ts

@@ -0,0 +1,5 @@
+import { Modal } from './Modal'
+import type { ModalProps } from './Modal.interface'
+
+export { Modal }
+export type { ModalProps }

package/src/components/Modal/stories/Modal.stories.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import AppLogo from '../../../icons/app_logo.svg'
+import NoConnect from '../../../icons/connection.svg'
+import { Modal } from '../Modal'
+
+const ModalMeta: Meta<typeof Modal> = {
+  title: 'Molecules / Modal',
+  component: Modal,
+}
+
+export default ModalMeta
+
+const Default: StoryObj<typeof Modal> = {
+  args: {
+    fill: 'surfacePrimary',
+    titleStyle: { marginBottom: 13, textAlign: 'center' },
+    titleTextSize: 'l',
+    titleWeight: '500',
+    descStyle: { textAlign: 'center' },
+    descTextSize: 'l',
+    descWeight: '500',
+    btnAppearance: 'accentPrimary',
+    btnSize: 'xxl',
+  },
+}
+
+export const Connect: StoryObj<typeof Modal> = {
+  args: {
+    ...Default.args,
+    title: 'Неполадки с интернетом',
+    desc: 'Переподключитесь к сети \n и выключите VPN',
+    btnLabel: 'Понятно',
+    before: <NoConnect width={125} height={92} />,
+  },
+}
+
+export const Update: StoryObj<typeof Modal> = {
+  args: {
+    ...Default.args,
+    title: 'Доступна новая версия \n приложения',
+    btnLabel: 'Обновить',
+    before: <AppLogo width={145} height={120} />,
+  },
+}

package/src/components/Modal/styles/modal.ts

@@ -0,0 +1,36 @@
+import { StyleSheet } from 'react-native'
+
+const modalStyles = StyleSheet.create({
+  modal: {
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    zIndex: 1000,
+    backgroundColor: 'hsla(0, 0%, 45%, 0.8)',
+  },
+  modal__before: {
+    alignSelf: 'center',
+    marginBottom: 13,
+  },
+  modal__btn: {
+    width: '100%',
+    marginTop: 20,
+  },
+  modal_wrapper: {
+    width: '90%',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    zIndex: 1000,
+    borderRadius: 20,
+    paddingVertical: 32,
+    paddingHorizontal: 12,
+  },
+})
+
+export { modalStyles }

package/src/components/Overlay/Overlay.appearance.ts

@@ -0,0 +1,8 @@
+import { overlayAppearanceDefault } from './appearance/overlayDefault'
+import type { OverlayAppearance } from './Overlay.interface'
+
+const overlayAppearance = {
+  ...overlayAppearanceDefault,
+} satisfies OverlayAppearance
+
+export { overlayAppearance }

package/src/components/Overlay/Overlay.interface.ts

@@ -0,0 +1,34 @@
+import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native'
+
+import type {
+  AppearanceConfig,
+  AppearanceOverlayKey,
+  FillProps,
+} from '@itcase/types-ui'
+
+interface OverlayAppearanceProps {
+  fill?: FillProps
+  opacity?: number
+}
+
+type OverlayAppearanceKey = AppearanceOverlayKey
+type OverlayConfig = AppearanceConfig<
+  AppearanceOverlayKey,
+  OverlayAppearanceProps
+>
+type OverlayAppearance = OverlayConfig['appearance']
+
+interface OverlayProps extends OverlayAppearanceProps {
+  isOverlay?: boolean
+  onPress?: (event: GestureResponderEvent) => void
+  appearance?: OverlayAppearanceKey
+  style?: StyleProp<ViewStyle>
+}
+
+export type {
+  OverlayAppearance,
+  OverlayAppearanceKey,
+  OverlayAppearanceProps,
+  OverlayConfig,
+  OverlayProps,
+}

package/src/components/Overlay/Overlay.styles.ts

@@ -0,0 +1,7 @@
+import { overlayStyles as overlayBaseStyles } from './styles/overlay'
+
+const styles = {
+  ...overlayBaseStyles,
+}
+
+export { styles }

package/src/components/Overlay/Overlay.tsx

@@ -0,0 +1,46 @@
+import { useMemo } from 'react'
+import { Pressable } from 'react-native'
+
+import { tokens } from '../../styles/tokens'
+import { overlayAppearance } from './Overlay.appearance'
+import type { OverlayConfig, OverlayProps } from './Overlay.interface'
+import { styles } from './Overlay.styles'
+
+const overlayConfig: OverlayConfig = {
+  appearance: {},
+  setAppearance: (newComponent) => {
+    overlayConfig.appearance = newComponent
+  },
+}
+
+overlayConfig.setAppearance(overlayAppearance)
+
+function Overlay(props: OverlayProps) {
+  const { appearance, fill, opacity, style, isOverlay = true, onPress } = props
+
+  const appearanceConfig = useMemo(() => {
+    if (!appearance || !overlayConfig.appearance) {
+      return undefined
+    }
+
+    return overlayConfig.appearance[appearance]
+  }, [appearance])
+
+  const fillKey = fill || appearanceConfig?.fill
+  const opacityValue = opacity ?? appearanceConfig?.opacity
+
+  return (
+    <Pressable
+      style={[
+        styles.overlay,
+        !isOverlay && styles.overlay_hidden,
+        fillKey && tokens[`fill_${fillKey}`],
+        opacityValue != null && { opacity: opacityValue },
+        style && style,
+      ]}
+      onPress={onPress}
+    />
+  )
+}
+
+export { Overlay, overlayConfig }

package/src/components/Overlay/appearance/overlayDefault.ts

@@ -0,0 +1,12 @@
+import type { OverlayAppearance } from '../Overlay.interface'
+
+const overlayAppearanceDefault = {
+  blackout: {
+    opacity: 0.5,
+  },
+  blur: {
+    opacity: 0.4,
+  },
+} satisfies OverlayAppearance
+
+export { overlayAppearanceDefault }

package/src/components/Overlay/index.ts

@@ -0,0 +1,16 @@
+import { Overlay, overlayConfig } from './Overlay'
+import { overlayAppearance } from './Overlay.appearance'
+import type {
+  OverlayAppearance,
+  OverlayAppearanceKey,
+  OverlayConfig,
+  OverlayProps,
+} from './Overlay.interface'
+
+export { Overlay, overlayAppearance, overlayConfig }
+export type {
+  OverlayAppearance,
+  OverlayAppearanceKey,
+  OverlayConfig,
+  OverlayProps,
+}

package/src/components/Overlay/stories/Overlay.stories.tsx

@@ -0,0 +1,24 @@
+import { View } from 'react-native'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Overlay } from '../Overlay'
+
+const OverlayMeta: Meta<typeof Overlay> = {
+  title: 'Atoms / Overlay',
+  component: Overlay,
+  args: {
+    appearance: 'blackout',
+    isOverlay: true,
+  },
+}
+
+export default OverlayMeta
+
+export const Blackout: StoryObj<typeof Overlay> = {
+  render: (args) => (
+    <View style={{ width: 200, height: 120 }}>
+      <Overlay {...args} />
+    </View>
+  ),
+}

package/src/components/Overlay/styles/overlay.ts

@@ -0,0 +1,18 @@
+import { StyleSheet } from 'react-native'
+
+const overlayStyles = StyleSheet.create({
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    zIndex: 1,
+    backgroundColor: 'hsla(0, 0%, 0%, 1)',
+  },
+  overlay_hidden: {
+    display: 'none',
+  },
+})
+
+export { overlayStyles }