@itcase/ui-react-native 1.10.81

package/src/module.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+
+declare module '*.svg' {
+  import type { SvgProps } from 'react-native-svg'
+
+  const content: React.FunctionComponent<SvgProps>
+  // SVG transformer exposes a default export
+  // eslint-disable-next-line import/no-default-export -- module ambient default
+  export default content
+}
+
+declare module '*.png' {
+  import type { ImageSourcePropType } from 'react-native'
+
+  const content: ImageSourcePropType
+  // Image assets expose a default export
+  // eslint-disable-next-line import/no-default-export -- module ambient default
+  export default content
+}

package/src/styles/borderColor/index.ts

@@ -0,0 +1,35 @@
+import { StyleSheet } from 'react-native'
+
+import type { BorderColorProps } from '@itcase/types-ui'
+
+import { colorTheme, getColorTokenKeyList } from '../../utils'
+
+const NONE_BORDER_COLOR_KEY = 'none' satisfies BorderColorProps
+
+function getBorderColorValue(tokenKey: string) {
+  if (tokenKey === NONE_BORDER_COLOR_KEY) {
+    return 'transparent'
+  }
+
+  return colorTheme[tokenKey]
+}
+
+const borderColorList = [
+  ...getColorTokenKeyList('Border'),
+  NONE_BORDER_COLOR_KEY,
+]
+
+const borderColor = StyleSheet.create({
+  ...Object.fromEntries(
+    borderColorList.map((tokenKey) => [
+      `border_color_${tokenKey}`,
+      {
+        borderColor: getBorderColorValue(tokenKey),
+        borderStyle: 'solid' as const,
+        borderWidth: 1,
+      },
+    ]),
+  ),
+})
+
+export { borderColor, borderColorList }

package/src/styles/direction/index.ts

@@ -0,0 +1,30 @@
+import { StyleSheet } from 'react-native'
+
+import type { DirectionHVProps } from '@itcase/types-ui'
+
+const directionList = [
+  'horizontal',
+  'vertical',
+] as const satisfies readonly DirectionHVProps[]
+
+const directionByVariant = {
+  horizontal: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  vertical: {
+    flexDirection: 'column',
+  },
+}
+
+const direction = StyleSheet.create({
+  ...Object.fromEntries(
+    directionList.map((value) => [
+      `direction_${value}`,
+      directionByVariant[value],
+    ]),
+  ),
+})
+
+export { direction, directionList }

package/src/styles/fill/index.ts

@@ -0,0 +1,58 @@
+import { StyleSheet } from 'react-native'
+
+import type { FillProps } from '@itcase/types-ui'
+
+import { colorTheme, getColorTokenKeyList, stripTokenInfix } from '../../utils'
+
+const NONE_FILL_KEY = 'none' satisfies FillProps
+
+const FILL_TIER_SUFFIXES = [
+  'Disabled',
+  'Primary',
+  'Quaternary',
+  'Secondary',
+  'Tertiary',
+] as const
+
+function getFillStyleKey(strippedTokenKey: string) {
+  if (strippedTokenKey === NONE_FILL_KEY) {
+    return strippedTokenKey
+  }
+
+  const hasTierSuffix = FILL_TIER_SUFFIXES.some((suffix) => {
+    return strippedTokenKey.endsWith(suffix)
+  })
+
+  if (hasTierSuffix) {
+    return strippedTokenKey
+  }
+
+  return `${strippedTokenKey}Primary`
+}
+
+function getFillBackgroundColor(tokenKey: string) {
+  if (tokenKey === NONE_FILL_KEY) {
+    return 'transparent'
+  }
+
+  return colorTheme[tokenKey]
+}
+
+const fillList = [...getColorTokenKeyList('Fill'), NONE_FILL_KEY]
+
+const fill = StyleSheet.create({
+  ...Object.fromEntries(
+    fillList.map((tokenKey) => {
+      const styleKey = getFillStyleKey(stripTokenInfix(tokenKey, 'Fill'))
+
+      return [
+        `fill_${styleKey}`,
+        {
+          backgroundColor: getFillBackgroundColor(tokenKey),
+        },
+      ]
+    }),
+  ),
+})
+
+export { fill, fillList }

package/src/styles/gap/index.ts

@@ -0,0 +1,19 @@
+import { StyleSheet } from 'react-native'
+
+const gapList = [4, 6, 8, 10, 12, 16, 20, 24, 40] as const
+
+const gap = StyleSheet.create({
+  ...Object.fromEntries(
+    gapList.map((value) => [
+      `gap_${value}`,
+      {
+        gap: value,
+      },
+    ]),
+  ),
+})
+
+type GapProps = (typeof gapList)[number]
+
+export { gap, gapList }
+export type { GapProps }

package/src/styles/iconFill/index.ts

@@ -0,0 +1,46 @@
+import { StyleSheet } from 'react-native'
+
+import type { ItemFillProps } from '@itcase/types-ui'
+
+import { colorTheme, getColorTokenKeyList } from '../../utils'
+
+const NONE_ITEM_FILL_KEY = 'none' satisfies ItemFillProps
+
+const ITEM_FILL_TIER_SUFFIXES = [
+  'Disabled',
+  'Primary',
+  'Quaternary',
+  'Secondary',
+  'Tertiary',
+] as const
+
+function getIconFillStyleKey(tokenKey: string) {
+  if (tokenKey === NONE_ITEM_FILL_KEY) {
+    return tokenKey
+  }
+
+  const hasTierSuffix = ITEM_FILL_TIER_SUFFIXES.some((suffix) => {
+    return tokenKey.endsWith(suffix)
+  })
+
+  if (hasTierSuffix) {
+    return tokenKey
+  }
+
+  return `${tokenKey}Primary`
+}
+
+const iconFillList = getColorTokenKeyList('Item')
+
+const iconFill = StyleSheet.create({
+  ...Object.fromEntries(
+    iconFillList.map((tokenKey) => [
+      `icon_fill_${getIconFillStyleKey(tokenKey)}`,
+      {
+        color: colorTheme[tokenKey],
+      },
+    ]),
+  ),
+})
+
+export { iconFill, iconFillList }

package/src/styles/shape/index.ts

@@ -0,0 +1,29 @@
+import { StyleSheet } from 'react-native'
+
+import type { ShapeProps } from '@itcase/types-ui'
+
+const shapeList = [
+  'circular',
+  'geometric',
+  'rounded',
+] as const satisfies readonly ShapeProps[]
+
+const shapeByVariant = {
+  circular: {
+    borderRadius: 100,
+  },
+  rounded: {
+    borderRadius: 8,
+  },
+  geometric: {
+    borderRadius: 0,
+  },
+}
+
+const shape = StyleSheet.create({
+  ...Object.fromEntries(
+    shapeList.map((value) => [`shape_${value}`, shapeByVariant[value]]),
+  ),
+})
+
+export { shape, shapeList }

package/src/styles/textAlign/index.ts

@@ -0,0 +1,22 @@
+import { StyleSheet } from 'react-native'
+
+import type { TextAlignProps } from '@itcase/types-ui'
+
+const textAlignList = [
+  'left',
+  'center',
+  'right',
+] as const satisfies readonly TextAlignProps[]
+
+const textAlign = StyleSheet.create({
+  ...Object.fromEntries(
+    textAlignList.map((value) => [
+      `text_align_${value}`,
+      {
+        textAlign: value,
+      },
+    ]),
+  ),
+})
+
+export { textAlign, textAlignList }

package/src/styles/textColor/index.ts

@@ -0,0 +1,18 @@
+import { StyleSheet } from 'react-native'
+
+import { colorTheme, getColorTokenKeyList } from '../../utils'
+
+const textColorList = getColorTokenKeyList('Text')
+
+const textColor = StyleSheet.create({
+  ...Object.fromEntries(
+    textColorList.map((tokenKey) => [
+      `text_color_${tokenKey}`,
+      {
+        color: colorTheme[tokenKey],
+      },
+    ]),
+  ),
+})
+
+export { textColor, textColorList }

package/src/styles/textSize/index.ts

@@ -0,0 +1,55 @@
+import { StyleSheet } from 'react-native'
+
+import type { TextSizeProps } from '@itcase/types-ui'
+
+const textSizeList = [
+  'xxs',
+  'xs',
+  's',
+  'm',
+  'l',
+  'xl',
+  'xxl',
+] as const satisfies readonly TextSizeProps[]
+
+const textSizeByVariant = {
+  xxl: {
+    fontSize: 24,
+    lineHeight: 28,
+  },
+  xl: {
+    fontSize: 20,
+    lineHeight: 24,
+  },
+  l: {
+    fontSize: 18,
+    lineHeight: 22,
+  },
+  m: {
+    fontSize: 16,
+    lineHeight: 20,
+  },
+  s: {
+    fontSize: 14,
+    lineHeight: 18,
+  },
+  xs: {
+    fontSize: 12,
+    lineHeight: 16,
+  },
+  xxs: {
+    fontSize: 10,
+    lineHeight: 14,
+  },
+}
+
+const textSize = StyleSheet.create({
+  ...Object.fromEntries(
+    textSizeList.map((value) => [
+      `text_size_${value}`,
+      textSizeByVariant[value],
+    ]),
+  ),
+})
+
+export { textSize, textSizeList }

package/src/styles/textWeight/index.ts

@@ -0,0 +1,28 @@
+import { StyleSheet } from 'react-native'
+
+import type { TextWeightProps } from '@itcase/types-ui'
+
+const textWeightList = [
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+] as const satisfies readonly TextWeightProps[]
+
+const textWeight = StyleSheet.create({
+  ...Object.fromEntries(
+    textWeightList.map((value) => [
+      `text_weight_${value}`,
+      {
+        fontWeight: value,
+      },
+    ]),
+  ),
+})
+
+export { textWeight, textWeightList }

package/src/styles/titleSize/index.ts

@@ -0,0 +1,50 @@
+import { StyleSheet } from 'react-native'
+
+import type { TitleSizeProps } from '@itcase/types-ui'
+
+const titleSizeList = [
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+] as const satisfies readonly TitleSizeProps[]
+
+const titleSizeByVariant = {
+  h1: {
+    fontSize: 64,
+    lineHeight: 80,
+  },
+  h2: {
+    fontSize: 48,
+    lineHeight: 56,
+  },
+  h3: {
+    fontSize: 32,
+    lineHeight: 40,
+  },
+  h4: {
+    fontSize: 24,
+    lineHeight: 30,
+  },
+  h5: {
+    fontSize: 18,
+    lineHeight: 24,
+  },
+  h6: {
+    fontSize: 16,
+    lineHeight: 20,
+  },
+}
+
+const titleSize = StyleSheet.create({
+  ...Object.fromEntries(
+    titleSizeList.map((value) => [
+      `title_size_${value}`,
+      titleSizeByVariant[value],
+    ]),
+  ),
+})
+
+export { titleSize, titleSizeList }

package/src/styles/tokens.ts

@@ -0,0 +1,31 @@
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
+
+import { borderColor } from './borderColor'
+import { direction } from './direction'
+import { fill } from './fill'
+import { gap } from './gap'
+import { iconFill } from './iconFill'
+import { shape } from './shape'
+import { textAlign } from './textAlign'
+import { textColor } from './textColor'
+import { textSize } from './textSize'
+import { textWeight } from './textWeight'
+import { titleSize } from './titleSize'
+import { width } from './width'
+
+const tokens: Record<string, ImageStyle | TextStyle | ViewStyle> = {
+  ...borderColor,
+  ...direction,
+  ...fill,
+  ...gap,
+  ...iconFill,
+  ...shape,
+  ...textAlign,
+  ...textColor,
+  ...textSize,
+  ...textWeight,
+  ...titleSize,
+  ...width,
+}
+
+export { tokens }

package/src/styles/width/index.ts

@@ -0,0 +1,29 @@
+import { StyleSheet } from 'react-native'
+
+import type { WidthProps } from '@itcase/types-ui'
+
+const widthList = [
+  'auto',
+  'fill',
+  'hug',
+] as const satisfies readonly WidthProps[]
+
+const widthByVariant = {
+  fill: {
+    width: '100%',
+  },
+  auto: {
+    width: 'auto',
+  },
+  hug: {
+    alignSelf: 'flex-start',
+  },
+}
+
+const width = StyleSheet.create({
+  ...Object.fromEntries(
+    widthList.map((value) => [`width_${value}`, widthByVariant[value]]),
+  ),
+})
+
+export { width, widthList }

package/src/utils/colorTokens/colorTokens.interface.ts

@@ -0,0 +1,3 @@
+type ColorTokenInfix = 'Border' | 'Fill' | 'Item' | 'Text'
+
+export type { ColorTokenInfix }

package/src/utils/colorTokens/colorTokens.ts

@@ -0,0 +1,17 @@
+import { Color } from '@itcase/tokens-am/dist/js/colors.js'
+
+import type { ColorTokenInfix } from './colorTokens.interface'
+
+const colorTheme: Record<string, string> = Color.Light
+
+function getColorTokenKeyList(infix: ColorTokenInfix) {
+  return Object.keys(colorTheme).filter((tokenKey) => {
+    return tokenKey.includes(infix)
+  })
+}
+
+function stripTokenInfix(tokenKey: string, infix: ColorTokenInfix) {
+  return tokenKey.replace(infix, '')
+}
+
+export { colorTheme, getColorTokenKeyList, stripTokenInfix }

package/src/utils/colorTokens/index.ts

@@ -0,0 +1,7 @@
+import {
+  colorTheme,
+  getColorTokenKeyList,
+  stripTokenInfix,
+} from './colorTokens'
+
+export { colorTheme, getColorTokenKeyList, stripTokenInfix }

package/src/utils/getVariantsPropsList/getVariantsPropsList.interface.ts

@@ -0,0 +1,10 @@
+// type ExtractLastSuffixProps<T, Prefix extends string> =
+//   Extract<keyof T, `${Prefix}${string}`> extends `${Prefix}${infer S}` ? S : never
+
+type ExtractLastSuffixProps<T, Prefix extends string> = keyof T extends infer K
+  ? K extends `${Prefix}${infer Suffix}`
+    ? Suffix
+    : never
+  : never
+
+export type { ExtractLastSuffixProps }

package/src/utils/getVariantsPropsList/getVariantsPropsList.ts

@@ -0,0 +1,51 @@
+import type { ExtractLastSuffixProps } from './getVariantsPropsList.interface'
+
+/**
+ * Retrieves key suffixes from the styles object that begin with the given prefix.
+ *
+ * Извлекает суффиксы ключей из объекта стилей, которые начинаются с заданного префикса.
+ *
+ * @template T - Style object type / Тип объекта стилей.
+ * @template Prefix - Prefix type / Тип префикса.
+ *
+ * @param {T} styles - Object containing styles / Объект, содержащий стили.
+ * @param {Prefix} prefix - Prefix with which keys must begin / Префикс, с которого должны начинаться ключи.
+ *
+ * @returns {ExtractLastSuffixProps<T, Prefix>[]} - An array of key suffixes starting with the given prefix / Массив суффиксов ключей, начинающихся с заданного префикса.
+ *
+ * @example
+ *
+ * const badgeStyles = StyleSheet.create({
+ *   badge_shape_circular: {
+ *     borderRadius: 50,
+ *   },
+ *  badge_shape_square: {
+ *    borderRadius: 25,
+ *  },
+ *  badge_size_s: {
+ *    paddingVertical: 2,
+ *    paddingHorizontal: 6,
+ *  },
+ *  badge_size_m: {
+ *    paddingVertical: 4,
+ *    paddingHorizontal: 12,
+ *  }
+ * })
+ *
+ * const badgeShapeList = getVariantsPropsList(badgeStyles, 'badge_shape_')
+ * return ["circular", "square"]
+ */
+function getVariantsPropsList<T extends object, Prefix extends string>(
+  styles: T,
+  prefix: Prefix,
+): ExtractLastSuffixProps<T, Prefix>[] {
+  return Object.keys(styles)
+    .filter((key) => {
+      return key.startsWith(prefix)
+    })
+    .map((key) => {
+      return key.slice(prefix.length) as ExtractLastSuffixProps<T, Prefix>
+    })
+}
+
+export { getVariantsPropsList }

package/src/utils/getVariantsPropsList/index.ts

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

package/src/utils/index.ts

@@ -0,0 +1,15 @@
+import {
+  colorTheme,
+  getColorTokenKeyList,
+  stripTokenInfix,
+} from './colorTokens'
+import { getVariantsPropsList } from './getVariantsPropsList'
+import type { ExtractLastSuffixProps } from './getVariantsPropsList'
+
+export {
+  colorTheme,
+  getColorTokenKeyList,
+  getVariantsPropsList,
+  stripTokenInfix,
+}
+export type { ExtractLastSuffixProps }

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "@react-native/typescript-config",
+  "compilerOptions": {
+    "maxNodeModuleJsDepth": 1
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.d.ts",
+    ".storybook-react-native-web/**/*.ts",
+    ".storybook-react-native-web/**/*.tsx"
+  ],
+  "exclude": ["**/node_modules", "**/Pods", "demoApp"]
+}