Миграция токенов стилей внутри компонентов

MIGRATION.md

@@ -18,7 +18,7 @@ import {
 
 export const Root = () => (
   <ThemeContextProvider
-    fonts={{ primary: 'MyFont', secondary: 'MySecondaryFont' }}
+    fonts={{ heading: 'MyFont', base: 'MySecondaryFont' }}
     initialTheme={ThemeVariant.Light}
   >
     <App />
@@ -45,7 +45,7 @@ const fonts = useFonts()
 import { StyleSheet } from 'react-native-unistyles'
 
 const styles = StyleSheet.create(({ fonts }) => ({
-  title: { fontFamily: fonts.primary },
+  title: { fontFamily: fonts.fontFamily.heading },
 }))
 ```
 

README.md

@@ -36,26 +36,25 @@ npm i @cdek-it/react-native-ui-kit
 
 UI kit использует следующие виды шрифтов.
 
-| Тип шрифта  | Используемые начертания                        | Рекомендуемый шрифт | Рекомендуемый аналог |
-| ----------- | ---------------------------------------------- | ------------------- | -------------------- |
-| `primary`   | – regular<br/>– demibold<br/>– demibold italic | TT Fellows          | Noto Sans            |
-| `secondary` | – regular<br/>– bold                           | Noto Sans           | —                    |
+| Тип шрифта | Используемые начертания                        | Рекомендуемый шрифт | Рекомендуемый аналог |
+| ---------- | ---------------------------------------------- | ------------------- | -------------------- |
+| `heading`  | – regular<br/>– demibold<br/>– demibold italic | TT Fellows          | Noto Sans            |
+| `base`     | – regular<br/>– bold                           | Noto Sans           | —                    |
 
 Исходники шрифтов не поставляются вместе с пакетом, их требуется подключать
-отдельно. После подключения шрифтов в проект, необходимо указать их в
-`ThemeContextProvider`.
+отдельно под именами, указанными в токенах.
 
 ```tsx
-<ThemeContextProvider
-  fonts={{ primary: 'MyFont', secondary: 'MySecondaryFont' }}
-/>
+<ThemeContextProvider fonts={{ heading: 'MyFont', base: 'MySecondaryFont' }} />
 ```
 
 После этого шрифты доступны через `useUnistyles().theme.fonts` или прямо в
 `StyleSheet.create(({ fonts }) => ...)`.
 
-`ThemeContextProvider` настраивает активную тему и шрифты для `unistyles`.
-`ThemeContext` остается пустым и всегда имеет значение `null`.
+`ThemeContextProvider` только настраивает темы и шрифты для `unistyles`.
+`ThemeContext` остается пустым и всегда имеет значение `null`. Deprecated-формат
+`fonts={{ primary, secondary }}` временно сохраняется для обратной
+совместимости.
 
 ### Пример подключения шрифтов с помощью expo-fonts через плагин
 

jest.setup.ts

@@ -13,8 +13,12 @@ jest.mock('react-native-worklets', () =>
 )
 
 interface MockedUnistylesModule {
-  StyleSheet: { create: (...args: unknown[]) => unknown }
+  StyleSheet: {
+    configure: jest.Mock<void, [{ themes?: { dark: unknown; light: unknown } }]>
+    create: (...args: unknown[]) => unknown
+  }
   UnistylesRuntime: {
+    getTheme: jest.Mock<unknown, [ThemeName?]>
     miniRuntime: unknown
     setTheme: jest.Mock<void, [ThemeName]>
     updateTheme: jest.Mock<void, [ThemeName, (theme: unknown) => unknown]>
@@ -32,23 +36,28 @@ const unistyles = jest.requireMock(
 // загрузки src/theme (и как следствие — src/utils/SvgUniversal с
 // `withUnistyles(...)` на top-level) в модуле уже стояли наши моки, а не
 // исходные identity-заглушки.
-const themeRef: {
-  current: { darkTheme: unknown; lightTheme: unknown } | null
-} = { current: null }
+const themeRef: { current: { dark: unknown; light: unknown } | null } = {
+  current: null,
+}
 
 const getTheme = (themeName: ThemeName | undefined) =>
-  themeName === 'dark'
-    ? themeRef.current?.darkTheme
-    : themeRef.current?.lightTheme
+  themeName === 'dark' ? themeRef.current?.dark : themeRef.current?.light
 
 const runtime = unistyles.UnistylesRuntime
 
 runtime.themeName = 'light'
+runtime.getTheme = jest.fn(getTheme)
 runtime.setTheme = jest.fn((themeName: ThemeName) => {
   runtime.themeName = themeName
 })
 runtime.updateTheme = jest.fn()
 
+unistyles.StyleSheet.configure = jest.fn(({ themes }) => {
+  if (themes) {
+    themeRef.current = themes
+  }
+})
+
 unistyles.useUnistyles = jest.fn(() => ({
   theme: getTheme(runtime.themeName),
   rt: runtime,
@@ -174,11 +183,16 @@ unistyles.withUnistyles = jest.fn(
   }
 )
 
-themeRef.current = require('./src/theme') as {
+const publicThemes = require('./src/theme') as {
   darkTheme: unknown
   lightTheme: unknown
 }
 
+themeRef.current ??= {
+  dark: publicThemes.darkTheme,
+  light: publicThemes.lightTheme,
+}
+
 generatePropsCombinations = <T>(properties: PropertyCombinations<T>): T[] => {
   const keys = Object.keys(properties) as Array<keyof T>
 

src/components/Accordion/Accordion.tsx

@@ -109,19 +109,19 @@ export const Accordion: React.FC<AccordionProps> = ({
           <SvgUniversal
             {...styles.icon}
             source={IconChevronRight}
-            uniProps={({ theme }) => ({
-              color: theme.Panel.Accordion.accordionHeaderTextColor,
-            })}
+            uniProps={({ components }) => {
+              return { color: components.accordion.header.color }
+            }}
           />
         </Animated.View>
         {Icon ? (
           <SvgUniversal
             {...styles.icon}
             source={Icon}
             testID={AccordionTestIds.icon}
-            uniProps={({ theme }) => ({
-              color: theme.Panel.Accordion.accordionHeaderTextColor,
-            })}
+            uniProps={({ components }) => {
+              return { color: components.accordion.header.color }
+            }}
           />
         ) : null}
         <Text style={styles.title}>{title}</Text>
@@ -159,36 +159,42 @@ export const AccordionTestIds = {
   separator: 'Separator',
 }
 
-const styles = StyleSheet.create(({ theme, fonts }) => ({
+const styles = StyleSheet.create(({ components, semantic, fonts }) => ({
   component: { width: '100%' },
   header: {
-    paddingVertical: theme.Panel.Accordion.accordionHeaderPaddingTopBottom,
-    gap: 7,
+    paddingVertical: semantic.dimension.space[400],
+    gap: components.accordion.extend.extHeader.gap,
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: theme.Panel.Accordion.accordionHeaderBg,
+    backgroundColor: components.accordion.colorScheme.header.background,
+  },
+  icon: {
+    width: components.accordion.extend.extHeader.iconSize,
+    height: components.accordion.extend.extHeader.iconSize,
   },
-  icon: { width: 17.5, height: 17.5 },
   title: {
-    fontSize: 15.75,
+    fontSize: fonts.fontSize[400],
     includeFontPadding: false,
     verticalAlign: 'middle',
-    fontWeight: 700,
-    color: theme.Panel.Accordion.accordionHeaderTextColor,
-    fontFamily: fonts.secondary,
+    fontWeight: fonts.fontWeight.bold,
+    color: components.accordion.header.color,
+    fontFamily: fonts.fontFamily.base,
   },
   contentAnimated: { overflow: 'hidden' },
   contentWrapper: {
     position: 'absolute',
     width: '100%',
-    paddingLeft: theme.Panel.Accordion.accordionContentPaddingLeft,
-    paddingTop: theme.Panel.Accordion.accordionContentPaddingTop,
-    paddingRight: theme.Panel.Accordion.accordionContentPaddingRight,
-    paddingBottom: theme.Panel.Accordion.accordionContentPaddingBottom,
+    paddingLeft: components.accordion.content.paddingLeft,
+    paddingTop: semantic.dimension.space.none,
+    paddingRight: components.accordion.content.paddingRight,
+    paddingBottom: semantic.dimension.space[400],
   },
   separator: {
-    borderTopColor: theme.Panel.Accordion.accordionHeaderBorderColor,
+    borderTopColor: components.accordion.panel.borderColor,
     borderTopWidth: 1,
   },
-  disabled: { mixBlendMode: 'luminosity', opacity: 0.6 },
+  disabled: {
+    mixBlendMode: 'luminosity',
+    opacity: semantic.effects.opacity[60],
+  },
 }))