feat(ci): 🎸 拆分组件变量文件

[onlyling]

原主题变量方案

theme/default-var.ts 文件内维护整个组件库所用到的变量。

优势

• 集中管理
• 使用 useTheme 可以拿到整个变量集合，跨组件使用方便

劣势

• 多人同时改动会产生冲突
• 单个组件书写，themeVar 太多无异议变量提示

当前主题变量方案

把 theme/default-var.ts 内的变量拆分到每个组件的 style.ts 文件内维护。

// style.ts
import { StyleSheet } from 'react-native'

import type { TokensType } from '../theme'

export const varCreator = (TOKENS: TokensType) => {
  return {
    demo_var_1: TOKENS.font_size_1,
    demo_var_2: 20,
  }
}

type ComponentVars = ReturnType<typeof varCreator>

export const styleCreator = (cv: ComponentVars) => {
  return StyleSheet.create({
    style1: {
      position: 'relative',
      height: cv.demo_var_2,
    },

    style2: {
      minWidth: cv.badge_size,
      height: cv.demo_var_1,
    },
  })
}

// index.ts
import React from 'react'
import { useThemeTokens, createVar, createStyle } from '../theme'

import { varCreator, styleCreator } from './style'

const Demo = () => {
  const TOKENS = useThemeTokens()
  const CV = createVar(TOKENS, varCreator)
  const STYLES = createStyle(CV, styleCreator)

  // TODO
}

跨组件使用

// style.ts
import { StyleSheet } from 'react-native'

import type { TokensType } from '../theme'
import { createVar } from '../theme'
// 导入其他组件的变量创建函数
import { varCreator as varCreatorDemo } from '../demo/style'

export const varCreator = (TOKENS: TokensType) => {
  return {
    demo2_var_1: TOKENS.font_size_1,
  }
}

type ComponentVars = ReturnType<typeof varCreator>

// createStyle 接受三个参数，cv 组件变量集合，styleCreator 样式创建函数，可选 TOKENS 基础变量
// 一般情况组件只会用到和自己相关的变量，const STYLES = createStyle(CV, styleCreator) 就足够用了
// 遇见使用跨组件变量的情况，需要多传入 TOKENS 在 styleCreator 样式创建函数内部使用
export const styleCreator = (cv: ComponentVars, TOKENS: TokensType) => {
  // 创建样式的时候用到其他组件的变量，比如 A 组件想与 B 组件组合玩，内部一些边界、表现两者保持一致
  const CV_DEMO = createVar(TOKENS, varCreatorDemo)

  return StyleSheet.create({
    style1: {
      position: 'relative',
      height: CV_DEMO.demo_var_2,
    },

    style2: {
      minWidth: cv.badge_size,
      height: cv.demo2_var_1,
    },
  })
}

// index.ts
import React from 'react'
import { useThemeTokens, createVar } from '../theme'
// 导入其他组件的变量创建函数
import { varCreator as varCreatorDemo } from '../demo/style'

import { varCreator, styleCreator } from './style'

const Demo2 = () => {
  const TOKENS = useThemeTokens()
  const CV = createVar(TOKENS, varCreator)
  // 创建一个变量集合
  const CV_DEMO = createVar(TOKENS, varCreatorDemo)
  const STYLES = createStyle(CV, styleCreator, TOKENS)

  // TODO
}

自定义主题

theme 变量可以覆盖 tokens、各个组件的变量。

在 theme/create-var.ts 文件内，会对组件变量进行二次赋值，减少声明变量时判断逻辑。

import React from 'react'

import { Provider } from '@fruits-chain/react-native-xiaoshu'

import Routes from './routes'

const colors = {
  brand_6: '#000',
  demo2_var_1: 40,
}

const App = () => {
  return (
    <Provider theme={colors}>
      <Routes />
    </Provider>
  )
}

export default App

注意

BREAKING CHANGE: 🧨 useTheme 遗弃, 不再提供全量变量集合, 整体采用 tokens 模式.