From ba4f578d9024c49aca99f32ec40779374e4dd8a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9F=8F=8E=EF=B8=8F=20Yumo?= Date: Tue, 16 Jul 2024 15:33:36 +0800 Subject: [PATCH 1/5] fix: fixed `AliasToken` instead of `CompTokenMap` for `GetResetStyles` --- src/util/genStyleUtils.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/util/genStyleUtils.tsx b/src/util/genStyleUtils.tsx index fc7e15c..64ca57b 100644 --- a/src/util/genStyleUtils.tsx +++ b/src/util/genStyleUtils.tsx @@ -93,7 +93,7 @@ export type CSSVarRegisterProps = { }; }; -export type GetResetStyles = (token: OverrideTokenMap) => CSSInterpolation; +export type GetResetStyles = (token: AliasToken) => CSSInterpolation; export default function genStyleUtils< CompTokenMap extends TokenMap, @@ -104,7 +104,7 @@ export default function genStyleUtils< usePrefix: UsePrefix; useToken: UseToken; useCSP?: UseCSP; - getResetStyles?: GetResetStyles, + getResetStyles?: GetResetStyles, } ) { // Dependency inversion for preparing basic config. From f1b541cb713120289e967550b29b84ade57605ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9F=8F=8E=EF=B8=8F=20Yumo?= Date: Tue, 16 Jul 2024 15:50:06 +0800 Subject: [PATCH 2/5] fix: fixed `Partial` instead of `CompTokenMap` for `GetResetStyles` --- src/hooks/useToken.ts | 4 ++-- src/util/genStyleUtils.tsx | 7 +++++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/hooks/useToken.ts b/src/hooks/useToken.ts index ef8d61b..04f1466 100644 --- a/src/hooks/useToken.ts +++ b/src/hooks/useToken.ts @@ -17,8 +17,8 @@ export interface UseTokenReturn< DesignToken extends TokenType, AliasToken extends TokenType, > { - token: OverrideTokenMap; - realToken?: OverrideTokenMap; + token: Partial; + realToken?: Partial; /** Just merge `token` & `override` at top to save perf */ override: { override: OverrideTokenMap }; theme?: Theme; diff --git a/src/util/genStyleUtils.tsx b/src/util/genStyleUtils.tsx index 64ca57b..3302ae0 100644 --- a/src/util/genStyleUtils.tsx +++ b/src/util/genStyleUtils.tsx @@ -93,7 +93,10 @@ export type CSSVarRegisterProps = { }; }; -export type GetResetStyles = (token: AliasToken) => CSSInterpolation; +export type GetResetStyles< + CompTokenMap extends TokenMap, + AliasToken extends TokenType, +> = (token: Partial) => CSSInterpolation; export default function genStyleUtils< CompTokenMap extends TokenMap, @@ -104,7 +107,7 @@ export default function genStyleUtils< usePrefix: UsePrefix; useToken: UseToken; useCSP?: UseCSP; - getResetStyles?: GetResetStyles, + getResetStyles?: GetResetStyles, } ) { // Dependency inversion for preparing basic config. From 271ee2aaf09df2bc741274e2773e4ab17d273eda Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9F=8F=8E=EF=B8=8F=20Yumo?= Date: Tue, 16 Jul 2024 17:22:36 +0800 Subject: [PATCH 3/5] fix: `GlobalToken` instead of `Partial` for `UseTokenReturn['token']` and `UseTokenReturn['realToken']` --- src/hooks/useToken.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/hooks/useToken.ts b/src/hooks/useToken.ts index 04f1466..f4be85e 100644 --- a/src/hooks/useToken.ts +++ b/src/hooks/useToken.ts @@ -12,13 +12,18 @@ export type TokenMapWithTheme< }; }; +export type GlobalToken< + CompTokenMap extends TokenMap, + AliasToken extends TokenType, +> = Partial; + export interface UseTokenReturn< CompTokenMap extends TokenMap, DesignToken extends TokenType, AliasToken extends TokenType, > { - token: Partial; - realToken?: Partial; + token: GlobalToken; + realToken?: GlobalToken; /** Just merge `token` & `override` at top to save perf */ override: { override: OverrideTokenMap }; theme?: Theme; From b912ba31f3adc240652cf1c0a789830a8cacfc91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9F=8F=8E=EF=B8=8F=20Yumo?= Date: Wed, 17 Jul 2024 17:02:42 +0800 Subject: [PATCH 4/5] fix: fixed some TS issues during antd integration --- src/hooks/useToken.ts | 15 ++----- src/index.ts | 25 ++++++++++- src/interface/components.ts | 33 +++++++++++--- src/interface/index.ts | 1 + src/util/genStyleUtils.tsx | 67 +++++++++++++++------------- src/util/getComponentToken.ts | 15 ++++--- src/util/getDefaultComponentToken.ts | 15 ++++--- tests/genStyleUtils.test.tsx | 6 ++- tests/util.test.tsx | 31 +++++++++++++ 9 files changed, 147 insertions(+), 61 deletions(-) create mode 100644 tests/util.test.tsx diff --git a/src/hooks/useToken.ts b/src/hooks/useToken.ts index f4be85e..b6aecd8 100644 --- a/src/hooks/useToken.ts +++ b/src/hooks/useToken.ts @@ -1,31 +1,24 @@ import type { Theme, TokenType } from '@ant-design/cssinjs'; -import type { OverrideTokenMap, TokenMap } from '../interface'; +import type { OverrideTokenMap, TokenMap, GlobalToken } from '../interface'; export type TokenMapWithTheme< CompTokenMap extends TokenMap, - DesignToken extends TokenType, AliasToken extends TokenType, + DesignToken extends TokenType, > = { - [key in keyof OverrideTokenMap]?: OverrideTokenMap[key] & { + [key in keyof OverrideTokenMap]?: OverrideTokenMap[key] & { theme?: Theme; }; }; -export type GlobalToken< - CompTokenMap extends TokenMap, - AliasToken extends TokenType, -> = Partial; - export interface UseTokenReturn< CompTokenMap extends TokenMap, - DesignToken extends TokenType, AliasToken extends TokenType, + DesignToken extends TokenType, > { token: GlobalToken; realToken?: GlobalToken; - /** Just merge `token` & `override` at top to save perf */ - override: { override: OverrideTokenMap }; theme?: Theme; components?: TokenMapWithTheme; hashId?: string; diff --git a/src/index.ts b/src/index.ts index 263d37b..601b439 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,4 +1,25 @@ export { default as genStyleUtils } from './util/genStyleUtils'; - export { default as genCalc } from './util/calc'; -export type { default as AbstractCalculator } from './util/calc/calculator'; \ No newline at end of file +export { + default as statisticToken, + merge as mergeToken, +} from './util/statistic'; + +export type { + OverrideTokenMap, + TokenMap, + TokenMapKey, + GlobalTokenWithComponent, + ComponentToken, + ComponentTokenKey, + GlobalToken, +} from './interface'; +export type { default as AbstractCalculator } from './util/calc/calculator'; +export type { + FullToken, + GetDefaultToken, + GetDefaultTokenFn, + GenStyleFn, + TokenWithCommonCls, + CSSUtil, +} from './util/genStyleUtils'; \ No newline at end of file diff --git a/src/interface/components.ts b/src/interface/components.ts index a8cba50..33a10ac 100644 --- a/src/interface/components.ts +++ b/src/interface/components.ts @@ -1,14 +1,35 @@ import type { TokenType } from '@ant-design/cssinjs'; -export type TokenMap = Record; +export type TokenMap = object; export type TokenMapKey = Extract; -export type OverrideTokenMap = Partial; +export type GlobalToken< + CompTokenMap extends TokenMap, + AliasToken extends TokenType, +> = AliasToken & CompTokenMap; -export type GlobalTokenWithComponent> = CompTokenMap & - CompTokenMap[C]; +export type OverrideTokenMap< + CompTokenMap extends TokenMap, + AliasToken extends TokenType, +> = { + [key in keyof CompTokenMap]: Partial & Partial; + }; -export type ComponentToken> = Exclude[C], undefined>; +export type GlobalTokenWithComponent< + CompTokenMap extends TokenMap, + AliasToken extends TokenType, + C extends TokenMapKey +> = GlobalToken & CompTokenMap[C]; -export type ComponentTokenKey> = keyof ComponentToken; \ No newline at end of file +export type ComponentToken< + CompTokenMap extends TokenMap, + AliasToken extends TokenType, + C extends TokenMapKey +> = Exclude[C], undefined>; + +export type ComponentTokenKey< + CompTokenMap extends TokenMap, + AliasToken extends TokenType, + C extends TokenMapKey, +> = keyof ComponentToken; \ No newline at end of file diff --git a/src/interface/index.ts b/src/interface/index.ts index 8aedfd5..d28a93b 100644 --- a/src/interface/index.ts +++ b/src/interface/index.ts @@ -5,6 +5,7 @@ export type { GlobalTokenWithComponent, ComponentToken, ComponentTokenKey, + GlobalToken, } from './components'; export type UseComponentStyleResult = [(node: React.ReactNode) => React.ReactElement, string]; diff --git a/src/util/genStyleUtils.tsx b/src/util/genStyleUtils.tsx index 3302ae0..8097a9f 100644 --- a/src/util/genStyleUtils.tsx +++ b/src/util/genStyleUtils.tsx @@ -61,23 +61,27 @@ export type TokenWithCommonCls = T & { export type FullToken< CompTokenMap extends TokenMap, + AliasToken extends TokenType, C extends TokenMapKey, -> = TokenWithCommonCls>; +> = TokenWithCommonCls>; export type GenStyleFn< CompTokenMap extends TokenMap, + AliasToken extends TokenType, C extends TokenMapKey, -> = (token: FullToken, info: StyleInfo) => CSSInterpolation; +> = (token: FullToken, info: StyleInfo) => CSSInterpolation; export type GetDefaultTokenFn< CompTokenMap extends TokenMap, + AliasToken extends TokenType, C extends TokenMapKey, -> = (token: Partial) => CompTokenMap[C]; +> = (token: AliasToken & Partial) => CompTokenMap[C]; export type GetDefaultToken< CompTokenMap extends TokenMap, + AliasToken extends TokenType, C extends TokenMapKey, -> = null | CompTokenMap[C] | GetDefaultTokenFn; +> = null | CompTokenMap[C] | GetDefaultTokenFn; export interface SubStyleComponentProps { prefixCls: string; @@ -100,12 +104,12 @@ export type GetResetStyles< export default function genStyleUtils< CompTokenMap extends TokenMap, - DesignToken extends TokenType, AliasToken extends TokenType, + DesignToken extends TokenType, >( config: { usePrefix: UsePrefix; - useToken: UseToken; + useToken: UseToken; useCSP?: UseCSP; getResetStyles?: GetResetStyles, } @@ -120,20 +124,20 @@ export default function genStyleUtils< function genStyleHooks>( component: C | [C, string], - styleFn: GenStyleFn, - getDefaultToken?: GetDefaultToken, + styleFn: GenStyleFn, + getDefaultToken?: GetDefaultToken, options?: { resetStyle?: boolean; resetFont?: boolean; deprecatedTokens?: [ - ComponentTokenKey, - ComponentTokenKey, + ComponentTokenKey, + ComponentTokenKey, ][]; /** * Component tokens that do not need unit. */ unitless?: { - [key in ComponentTokenKey]: boolean; + [key in ComponentTokenKey]: boolean; }; /** * Only use component style in client side. Ignore in SSR. @@ -167,7 +171,7 @@ export default function genStyleUtils< }; Object.keys(originUnitless).forEach((key) => { compUnitless[prefixToken(key)] = - originUnitless[key as keyof ComponentTokenKey]; + originUnitless[key as keyof ComponentTokenKey]; }); // Options @@ -201,17 +205,17 @@ export default function genStyleUtils< function genCSSVarRegister>( component: C, - getDefaultToken: GetDefaultToken | undefined, + getDefaultToken: GetDefaultToken | undefined, options: { unitless?: { - [key in ComponentTokenKey]: boolean; + [key in ComponentTokenKey]: boolean; }; ignore?: { [key in keyof AliasToken]?: boolean; }; deprecatedTokens?: [ - ComponentTokenKey, - ComponentTokenKey, + ComponentTokenKey, + ComponentTokenKey, ][]; injectStyle?: boolean; prefixToken: (key: string) => string; @@ -240,12 +244,12 @@ export default function genStyleUtils< scope: rootCls, }, () => { - const defaultToken = getDefaultComponentToken( + const defaultToken = getDefaultComponentToken( component, realToken, getDefaultToken, ); - const componentToken = getComponentToken( + const componentToken = getComponentToken( component, realToken, defaultToken, @@ -289,15 +293,15 @@ export default function genStyleUtils< function genComponentStyleHook>( componentName: C | [C, string], - styleFn: GenStyleFn, - getDefaultToken?: GetDefaultToken, + styleFn: GenStyleFn, + getDefaultToken?: GetDefaultToken, options: { resetStyle?: boolean; resetFont?: boolean; // Deprecated token key map [["oldTokenKey", "newTokenKey"], ["oldTokenKey", "newTokenKey"]] deprecatedTokens?: [ - ComponentTokenKey, - ComponentTokenKey, + ComponentTokenKey, + ComponentTokenKey, ][]; /** * Only use component style in client side. Ignore in SSR. @@ -309,10 +313,10 @@ export default function genStyleUtils< order?: number; injectStyle?: boolean; unitless?: { - [key in ComponentTokenKey]: boolean; + [key in ComponentTokenKey]: boolean; }; genCommonStyle?: ( - token: OverrideTokenMap, + token: OverrideTokenMap, componentPrefixCls: string, rootCls?: string, resetFont?: boolean, @@ -392,11 +396,12 @@ export default function genStyleUtils< const defaultComponentToken = getDefaultComponentToken< CompTokenMap, + AliasToken, C >(component, realToken, getDefaultToken) ?? {}; const componentCls = `.${prefixCls}`; - const componentToken = getComponentToken( + const componentToken = getComponentToken( component, realToken, defaultComponentToken, @@ -427,7 +432,7 @@ export default function genStyleUtils< min, }, cssVar ? defaultComponentToken : componentToken, - ) as FullToken; + ); const styleInterpolation = styleFn(mergedToken, { hashId, @@ -456,15 +461,15 @@ export default function genStyleUtils< function genSubStyleComponent>( componentName: C | [C, string], - styleFn: GenStyleFn, - getDefaultToken?: GetDefaultToken, + styleFn: GenStyleFn, + getDefaultToken?: GetDefaultToken, options: { resetStyle?: boolean; resetFont?: boolean; // Deprecated token key map [["oldTokenKey", "newTokenKey"], ["oldTokenKey", "newTokenKey"]] deprecatedTokens?: [ - ComponentTokenKey, - ComponentTokenKey, + ComponentTokenKey, + ComponentTokenKey, ][]; /** * Only use component style in client side. Ignore in SSR. @@ -476,7 +481,7 @@ export default function genStyleUtils< order?: number; injectStyle?: boolean; unitless?: { - [key in ComponentTokenKey]: boolean; + [key in ComponentTokenKey]: boolean; }; } = {}, ) { diff --git a/src/util/getComponentToken.ts b/src/util/getComponentToken.ts index c9604f1..5fb4eda 100644 --- a/src/util/getComponentToken.ts +++ b/src/util/getComponentToken.ts @@ -4,18 +4,23 @@ import type { TokenMapKey, ComponentTokenKey, ComponentToken, - OverrideTokenMap, + GlobalToken, } from '../interface'; +import type { TokenType } from '@ant-design/cssinjs'; -export default function getComponentToken>( +export default function getComponentToken< + CompTokenMap extends TokenMap, + AliasToken extends TokenType, + C extends TokenMapKey, +>( component: C, - token: OverrideTokenMap, + token: GlobalToken, defaultToken: CompTokenMap[C], options?: { - deprecatedTokens?: [ComponentTokenKey, ComponentTokenKey][]; + deprecatedTokens?: [ComponentTokenKey, ComponentTokenKey][]; }, ) { - const customToken = { ...(token[component] as ComponentToken) }; + const customToken = { ...(token[component] as ComponentToken) }; if (options?.deprecatedTokens) { const { deprecatedTokens } = options; deprecatedTokens.forEach(([oldTokenKey, newTokenKey]) => { diff --git a/src/util/getDefaultComponentToken.ts b/src/util/getDefaultComponentToken.ts index 90a1e53..435adba 100644 --- a/src/util/getDefaultComponentToken.ts +++ b/src/util/getDefaultComponentToken.ts @@ -1,14 +1,19 @@ +import type { TokenType } from '@ant-design/cssinjs'; import { merge as mergeToken } from './statistic'; import type { GetDefaultToken, GetDefaultTokenFn } from './genStyleUtils'; -import type { OverrideTokenMap, TokenMap, TokenMapKey } from '../interface'; +import type { GlobalToken, TokenMap, TokenMapKey } from '../interface'; -export default function getDefaultComponentToken>( +export default function getDefaultComponentToken< + CompTokenMap extends TokenMap, + AliasToken extends TokenType, + C extends TokenMapKey +>( component: C, - token: OverrideTokenMap, - getDefaultToken: GetDefaultToken, + token: GlobalToken, + getDefaultToken: GetDefaultToken, ): any { if (typeof getDefaultToken === 'function') { - return (getDefaultToken as GetDefaultTokenFn)(mergeToken(token, token[component] ?? {})); + return (getDefaultToken as GetDefaultTokenFn)(mergeToken(token, token[component] ?? {})); } return getDefaultToken ?? {}; }; \ No newline at end of file diff --git a/tests/genStyleUtils.test.tsx b/tests/genStyleUtils.test.tsx index b10556f..0350e42 100644 --- a/tests/genStyleUtils.test.tsx +++ b/tests/genStyleUtils.test.tsx @@ -4,6 +4,10 @@ import { render, renderHook } from '@testing-library/react'; import { genStyleUtils } from '../src' import type { CSSVarRegisterProps, SubStyleComponentProps } from '../src/util/genStyleUtils'; +interface TestCompTokenMap { + TestComponent: {} +} + describe('genStyleUtils', () => { const mockConfig = { usePrefix: jest.fn().mockReturnValue({ @@ -21,7 +25,7 @@ describe('genStyleUtils', () => { getResetStyles: jest.fn().mockReturnValue([]), }; - const { genStyleHooks, genSubStyleComponent, genComponentStyleHook } = genStyleUtils(mockConfig); + const { genStyleHooks, genSubStyleComponent, genComponentStyleHook } = genStyleUtils(mockConfig); describe('genStyleHooks', () => { it('should generate style hooks', () => { diff --git a/tests/util.test.tsx b/tests/util.test.tsx new file mode 100644 index 0000000..c0d072d --- /dev/null +++ b/tests/util.test.tsx @@ -0,0 +1,31 @@ +import genMaxMin from '../src/util/maxmin'; + +describe('maxmin', () => { + const cases = [ + { + values: [1, 2, 3], + js: { + max: 3, + min: 1, + }, + css: { + max: 'max(1px,2px,3px)', + min: 'min(1px,2px,3px)', + }, + }, + ]; + + cases.forEach(({ values, js, css }, index) => { + it(`js maxmin ${index + 1}`, () => { + const { max, min } = genMaxMin('js'); + expect(max(...values)).toEqual(js.max); + expect(min(...values)).toEqual(js.min); + }); + + it(`css maxmin ${index + 1}`, () => { + const { max, min } = genMaxMin('css'); + expect(max(...values)).toEqual(css.max); + expect(min(...values)).toEqual(css.min); + }); + }); +}); \ No newline at end of file From 5e52f715cc0523f0b99e42073090439a33c74df2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9F=8F=8E=EF=B8=8F=20Yumo?= Date: Wed, 17 Jul 2024 17:07:59 +0800 Subject: [PATCH 5/5] docs: update genStyleUtils use docs --- docs/demos/genStyleUtils.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/demos/genStyleUtils.md b/docs/demos/genStyleUtils.md index 0a9ff6f..412e741 100644 --- a/docs/demos/genStyleUtils.md +++ b/docs/demos/genStyleUtils.md @@ -16,8 +16,8 @@ nav: - `usePrefix`: 使用样式前缀的钩子函数 - `useToken`: 使用 token 的钩子函数 - `CompTokenMap`: 范型参数,表示组件 token 映射 -- `DesignTokenn`: 范型参数,表示设计 token - `AliasToken`: 范型参数,表示别名 token +- `DesignTokenn`: 范型参数,表示设计 token > 使用建议:为了更好的获得 TS 类型支持,建议您在使用 `genStyleUtils` 的时候传入范型参数 `CompTokenMap` `DesignTokenn` `AliasToken` ## 如何使用