From feb81d46ec5b57c4d3ddce72e282123c280fae2f Mon Sep 17 00:00:00 2001 From: Kenneth Date: Thu, 22 May 2025 09:42:41 +0700 Subject: [PATCH 01/32] build: change version number --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 05b5eeb..68f86bd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "1byte-react-design", - "version": "1.5.0", + "version": "1.4.21", "main": "dist/index.js", "module": "dist/index.js", "types": "dist/index.d.ts", From 1b02ea42a19ee4a341f63773b5de6e9dcbf757bf Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sat, 31 May 2025 16:04:33 +0700 Subject: [PATCH 02/32] fix: remove unused code --- src/molecules/Select/Select(Will_Delete).tsx | 62 -------------------- src/molecules/Select/styles.tsx | 25 -------- 2 files changed, 87 deletions(-) delete mode 100644 src/molecules/Select/Select(Will_Delete).tsx diff --git a/src/molecules/Select/Select(Will_Delete).tsx b/src/molecules/Select/Select(Will_Delete).tsx deleted file mode 100644 index c5e5a8f..0000000 --- a/src/molecules/Select/Select(Will_Delete).tsx +++ /dev/null @@ -1,62 +0,0 @@ -// import { forwardRef } from 'react'; -// import { config } from '../..'; -// import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -// import { RdComponentsConfig } from '../../utils/types'; -// import { SelectStyled } from './styles'; -// import { RdSelectProps, variantSelectExtend } from './types'; -// import useExtendVariant from './useExtendVariant'; - -// const isVariantSelectExtend = ( -// variant: NonNullable -// ): variant is variantSelectExtend => { -// return ['outlined-transparent'].includes(variant); -// }; - -// export const Select = forwardRef((props: RdSelectProps, ref: RdSelectProps['ref']) => { -// let { -// width, -// minWidth, -// isHideValueOnLoading = true, -// variant, - -// ...antdProps -// } = props; - -// let newSelectDesignToken: RdComponentsConfig['Select'] = { -// ...config.componentToken?.Select, -// algorithm: true, -// }; - -// //#region Handle isHideValueOnLoading prop -// // Handle hide value when loading -// if (isHideValueOnLoading) { -// antdProps = { -// ...antdProps, -// value: !antdProps.loading && antdProps.value, -// }; -// } -// //#endregion - -// if (variant && isVariantSelectExtend(variant)) { -// // Get design token config for color. -// const designTokenConfig = useExtendVariant(variant); - -// // Merge design token config with button design token. -// newSelectDesignToken = { -// ...newSelectDesignToken, -// ...designTokenConfig, -// }; - -// variant = 'outlined'; -// } - -// return ( -// -// -// -// ); -// }); diff --git a/src/molecules/Select/styles.tsx b/src/molecules/Select/styles.tsx index 3d6f23f..b7cf198 100644 --- a/src/molecules/Select/styles.tsx +++ b/src/molecules/Select/styles.tsx @@ -4,31 +4,6 @@ import { Select } from 'antd'; import { BaseOptionType, DefaultOptionType } from 'antd/es/select'; import { getComponentOrGlobalToken, getComponentToken, getExcludeForwardProps } from '../../utils'; import { RdSelectComponent, RdSelectProps } from './types'; -import { config } from '../..'; - -// export const SelectStyled = styled(Select)<{ width?: string | number; minWidth?: string | number }>` -// ${props => { -// return ( -// props.width && -// css` -// width: ${props.width}; -// ` -// ); -// }} - -// ${props => { -// return ( -// props.minWidth && -// css` -// min-width: ${props.minWidth}; -// ` -// ); -// }} - -// .ant-select { -// width: 100%; -// } -// `; export const SelectStyledFunc = < ValueType = any, From b8e2706fcbe96f3d877f62fa78fcd9b8d7275737 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sat, 31 May 2025 16:06:09 +0700 Subject: [PATCH 03/32] feature: add default prop for TextArea --- src/config.ts | 12 ++++++++++++ src/index.tsx | 15 +++------------ src/molecules/Input/TextArea.tsx | 8 ++++++-- src/organisms/ConfigProvider/configs/textArea.ts | 14 ++++++++++++++ src/organisms/ConfigProvider/context/types.ts | 2 ++ src/organisms/ConfigProvider/types.props.ts | 7 ++++++- src/utils/token.ts | 2 +- 7 files changed, 44 insertions(+), 16 deletions(-) create mode 100644 src/config.ts create mode 100644 src/organisms/ConfigProvider/configs/textArea.ts diff --git a/src/config.ts b/src/config.ts new file mode 100644 index 0000000..8312674 --- /dev/null +++ b/src/config.ts @@ -0,0 +1,12 @@ +import { theme } from "antd"; +import { RdThemeConfig } from "./organisms"; + +export interface IConfig { + designToken: NonNullable; + componentToken: RdThemeConfig['components']; +} + +export var config: IConfig = { + designToken: theme.getDesignToken(theme.defaultConfig), + componentToken: {}, +}; \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index 984436b..751186e 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,20 +1,11 @@ import { theme } from 'antd'; import { RdThemeConfig } from './organisms'; -export interface IConfig { - designToken: NonNullable; - componentToken: RdThemeConfig['components']; -} - -export const config: IConfig = { - designToken: theme.getDesignToken(theme.defaultConfig), - componentToken: {}, -}; +export * from './config'; +export * from './utils'; +export * from './types'; export * from './atomics'; export * from './molecules'; export * from './organisms'; export * from './templates'; -export * from './utils'; - -export * from './types' \ No newline at end of file diff --git a/src/molecules/Input/TextArea.tsx b/src/molecules/Input/TextArea.tsx index 0509cf5..5284973 100644 --- a/src/molecules/Input/TextArea.tsx +++ b/src/molecules/Input/TextArea.tsx @@ -1,7 +1,11 @@ -import { forwardRef } from 'react'; +import { forwardRef, useContext } from 'react'; import { TextAreaStyled } from './styles'; import { RdTextareaComponent } from './types'; +import { ConfigProvider } from '../../organisms'; export const TextArea: RdTextareaComponent = forwardRef((props, ref) => { - return ; + const { textArea: defaultTextareaProps } = useContext(ConfigProvider.ConfigContext); + const { autoSize } = defaultTextareaProps || {}; + + return ; }); diff --git a/src/organisms/ConfigProvider/configs/textArea.ts b/src/organisms/ConfigProvider/configs/textArea.ts new file mode 100644 index 0000000..1a5f755 --- /dev/null +++ b/src/organisms/ConfigProvider/configs/textArea.ts @@ -0,0 +1,14 @@ +import { TextAreaConfig } from 'antd/es/config-provider/context'; +import { RdTextAreaProps } from '../../../molecules'; + +//#region Define Ant Design types +type TextAreaConfigAntd = TextAreaConfig; +//#endregion + +//#region Define extended types +interface TextAreaConfigExtend extends Pick {} +//#endregion + +//#region Export types +export type RdTextAreaConfig = TextAreaConfigAntd & TextAreaConfigExtend; +//#endregion diff --git a/src/organisms/ConfigProvider/context/types.ts b/src/organisms/ConfigProvider/context/types.ts index 35771b0..6a1f39f 100644 --- a/src/organisms/ConfigProvider/context/types.ts +++ b/src/organisms/ConfigProvider/context/types.ts @@ -1,6 +1,7 @@ import { ConfigConsumerProps } from 'antd/es/config-provider'; import { RdPaginationConfig } from '../configs/pagination'; import { RdTableConfig } from '../configs/table'; +import { RdTextAreaConfig } from '../configs/textArea'; //#region Define Ant Design types type ConfigConsumerPropsAntd = ConfigConsumerProps; @@ -10,6 +11,7 @@ type ConfigConsumerPropsAntd = ConfigConsumerProps; interface ConfigConsumerPropsExtend { pagination?: RdPaginationConfig; table?: RdTableConfig; + textArea?: RdTextAreaConfig; } //#endregion diff --git a/src/organisms/ConfigProvider/types.props.ts b/src/organisms/ConfigProvider/types.props.ts index 367cb65..0d3d768 100644 --- a/src/organisms/ConfigProvider/types.props.ts +++ b/src/organisms/ConfigProvider/types.props.ts @@ -1,6 +1,7 @@ import { ConfigProviderProps } from 'antd/es/config-provider'; import { RdPaginationConfig } from './configs/pagination'; import { RdTableConfig } from './configs/table'; +import { RdTextAreaConfig } from './configs/textArea'; //#region Define Ant Design types type ConfigProviderPropsAntd = ConfigProviderProps; @@ -10,10 +11,14 @@ type ConfigProviderPropsAntd = ConfigProviderProps; interface ConfigProviderPropsExtend { pagination?: RdPaginationConfig; table?: RdTableConfig; + textArea?: RdTextAreaConfig; } //#endregion //#region Export types -export type RdConfigProviderProps = Omit & +export type RdConfigProviderProps = Omit< + ConfigProviderPropsAntd, + 'pagination' | 'table' | 'textArea' +> & ConfigProviderPropsExtend; //#endregion diff --git a/src/utils/token.ts b/src/utils/token.ts index c2e17f4..3ba6800 100644 --- a/src/utils/token.ts +++ b/src/utils/token.ts @@ -25,7 +25,7 @@ export const getComponentToken = < componentName: ComponentName, componentToken: ComponentToken ): NonNullable[ComponentToken] | undefined => { - return (config.componentToken?.[componentName] as RdComponentTokenMap[ComponentName])?.[ + return (config?.componentToken?.[componentName] as RdComponentTokenMap[ComponentName])?.[ componentToken ]; }; From d44a93da6434748a807665f5b03ceddbd8707bce Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sat, 31 May 2025 16:06:36 +0700 Subject: [PATCH 04/32] feature: add rootClassName for Upload molecule --- src/molecules/Upload/Upload.tsx | 14 ++++++++++++-- src/molecules/Upload/constants.ts | 1 + 2 files changed, 13 insertions(+), 2 deletions(-) create mode 100644 src/molecules/Upload/constants.ts diff --git a/src/molecules/Upload/Upload.tsx b/src/molecules/Upload/Upload.tsx index bac5d96..621ab86 100644 --- a/src/molecules/Upload/Upload.tsx +++ b/src/molecules/Upload/Upload.tsx @@ -1,7 +1,17 @@ +import clsx from 'clsx'; import { forwardRef } from 'react'; +import { UPLOAD_ROOT_CLASS_NAME } from './constants'; import { UploadStyled } from './styles'; import { RdUploadComponent } from './types'; export const Upload: RdUploadComponent = forwardRef((props, ref) => { - return ; -}); \ No newline at end of file + const { rootClassName, ...antProps } = props; + + return ( + + ); +}); diff --git a/src/molecules/Upload/constants.ts b/src/molecules/Upload/constants.ts new file mode 100644 index 0000000..acb62d5 --- /dev/null +++ b/src/molecules/Upload/constants.ts @@ -0,0 +1 @@ +export const UPLOAD_ROOT_CLASS_NAME = 'rd-upload'; From f66dfee0e6d4d91fe122743b5a9332d050bfad4a Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sat, 31 May 2025 16:07:32 +0700 Subject: [PATCH 05/32] build: change test script, now not need build to test --- package.json | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 68f86bd..531d678 100644 --- a/package.json +++ b/package.json @@ -1,17 +1,12 @@ { "name": "1byte-react-design", "version": "1.4.21", - "main": "dist/index.js", - "module": "dist/index.js", - "types": "dist/index.d.ts", + "main": "src/index.tsx", "license": "MIT", "scripts": { "build": "webpack --config webpack.config.js", - "test": "webpack --config webpack.config.js && yalc publish --push --no-scripts" + "test": "yalc publish --push --no-scripts --files ." }, - "files": [ - "dist" - ], "dependencies": { "@dnd-kit/core": "^6.3.1", "@dnd-kit/modifiers": "^9.0.0", From c22af3cc9d7156d1cdb295b94f58fffc8c56a2e0 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sat, 31 May 2025 16:21:00 +0700 Subject: [PATCH 06/32] v1.4.30-1 --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 531d678..d9b1a1e 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "1byte-react-design", - "version": "1.4.21", - "main": "src/index.tsx", + "version": "1.4.30-1", + "main": "dist/index.tsx", "license": "MIT", "scripts": { "build": "webpack --config webpack.config.js", From fa7e7b84d4503b97b737d35217c48f0afb91772e Mon Sep 17 00:00:00 2001 From: Kenneth Date: Thu, 12 Jun 2025 15:18:02 +0700 Subject: [PATCH 07/32] v1.5.11-1 --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index d9b1a1e..1076024 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "1byte-react-design", - "version": "1.4.30-1", - "main": "dist/index.tsx", + "version": "1.5.11-1", + "main": "dist/index.js", "license": "MIT", "scripts": { "build": "webpack --config webpack.config.js", From 514b6e68a23aace53f532c1e6d7cf64dded2ce1f Mon Sep 17 00:00:00 2001 From: Kenneth Date: Fri, 20 Jun 2025 13:26:32 +0700 Subject: [PATCH 08/32] fix: Fix Card Grid and Card Meta component --- src/molecules/Card/Grid.tsx | 4 ++-- src/molecules/Card/Meta.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/molecules/Card/Grid.tsx b/src/molecules/Card/Grid.tsx index 8ea8836..af47472 100644 --- a/src/molecules/Card/Grid.tsx +++ b/src/molecules/Card/Grid.tsx @@ -1,6 +1,6 @@ -import { CardStyles } from './styles'; +import { GridCardStyles } from './styles'; import { RdGridCardComponent } from './types'; export const GridCard: RdGridCardComponent = props => { - return ; + return ; }; diff --git a/src/molecules/Card/Meta.tsx b/src/molecules/Card/Meta.tsx index 6c0aa29..8445bf9 100644 --- a/src/molecules/Card/Meta.tsx +++ b/src/molecules/Card/Meta.tsx @@ -1,6 +1,6 @@ -import { CardStyles } from './styles'; +import { MetaCardStyles } from './styles'; import { RdMetaCardComponent } from './types'; export const MetaCard: RdMetaCardComponent = props => { - return ; + return ; }; From 1425026ae77499c0254c1be2516c32076f8460f0 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Tue, 24 Jun 2025 18:18:26 +0700 Subject: [PATCH 09/32] feature: Add getDefaultToken for Button --- src/config.ts | 17 ++++++++++++---- src/molecules/Button/index.tsx | 3 ++- src/molecules/Button/token.ts | 28 +++++++++++++++++++++++++++ src/molecules/Button/types.ts | 4 ++-- src/organisms/ConfigProvider/types.ts | 2 +- src/utils/token.ts | 20 +++++++++++++++++++ 6 files changed, 66 insertions(+), 8 deletions(-) create mode 100644 src/molecules/Button/token.ts diff --git a/src/config.ts b/src/config.ts index 8312674..18c9c06 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,12 +1,21 @@ -import { theme } from "antd"; -import { RdThemeConfig } from "./organisms"; +import { theme } from 'antd'; +import { rdPrepareComponentToken } from '.'; +import { RdThemeConfig } from './organisms'; export interface IConfig { designToken: NonNullable; componentToken: RdThemeConfig['components']; } +const defaultDesignToken = theme.getDesignToken(theme.defaultConfig); + export var config: IConfig = { - designToken: theme.getDesignToken(theme.defaultConfig), + designToken: defaultDesignToken, componentToken: {}, -}; \ No newline at end of file +}; + +declare module 'antd' { + interface DefaultOptionType { + value?: string | number | boolean | null; + } +} diff --git a/src/molecules/Button/index.tsx b/src/molecules/Button/index.tsx index 2c9777d..b5c1900 100644 --- a/src/molecules/Button/index.tsx +++ b/src/molecules/Button/index.tsx @@ -1,2 +1,3 @@ export * from "./Button"; -export * from "./types"; \ No newline at end of file +export * from "./types"; +export * from './token' \ No newline at end of file diff --git a/src/molecules/Button/token.ts b/src/molecules/Button/token.ts new file mode 100644 index 0000000..3a92cc8 --- /dev/null +++ b/src/molecules/Button/token.ts @@ -0,0 +1,28 @@ +import { ComponentToken as ButtonComponentTokenAntd } from 'antd/es/button/style'; +import { prepareComponentToken } from 'antd/es/button/style/token'; +import type { AliasToken } from 'antd/es/theme/interface'; +import { + ButtonComponentTokenExtend, + config, + RdAliasToken, + RdComponentTokenMap, + RdGetDefaultToken, + RdGetDefaultTokenFn, +} from '../..'; + +export const rdPrepareComponentToken: RdGetDefaultToken<'Button'> = aliasToken => { + const componentToken = ( + prepareComponentToken as RdGetDefaultTokenFn + )({ ...(aliasToken as Required) }) as ButtonComponentTokenAntd; + + const extendComponentToken: ButtonComponentTokenExtend = {}; + + return { + ...componentToken, + ...extendComponentToken, + }; +}; + +if (config.componentToken?.Button) { + config.componentToken.Button = rdPrepareComponentToken(config.designToken as RdAliasToken); +} diff --git a/src/molecules/Button/types.ts b/src/molecules/Button/types.ts index 675bbff..567d784 100644 --- a/src/molecules/Button/types.ts +++ b/src/molecules/Button/types.ts @@ -1,8 +1,8 @@ import { Button, ButtonProps, GetProps } from 'antd'; import { ComponentToken as ButtonComponentTokenAntd } from 'antd/es/button/style'; +import { RdTooltipProps } from '../Tooltip'; import { ButtonInternal } from './Button'; import { ButtonGroup } from './ButtonGroup'; -import { RdTooltipProps } from '../Tooltip'; //#region Define Ant Design types type ButtonPropsAntd = GetProps; @@ -10,7 +10,7 @@ type ButtonGroupPropsAntd = GetProps; //#endregion //#region Define extended component tokens -type ButtonComponentTokenExtend = {}; +export type ButtonComponentTokenExtend = {}; //#endregion //#region Define extended types diff --git a/src/organisms/ConfigProvider/types.ts b/src/organisms/ConfigProvider/types.ts index a6b3327..9c6fe17 100644 --- a/src/organisms/ConfigProvider/types.ts +++ b/src/organisms/ConfigProvider/types.ts @@ -55,7 +55,7 @@ export type RdComponentTokenMap = RdMoleculesTokenMap & RdTemplatesTokenMap; export type RdAliasToken = AliasToken & AliasTokenExtend; export type RdComponentsConfigExtend = RdComponentsConfig & ComponentsConfigExtend; export type RdAlgorithm = Algorithm & AlgorithmExtend; -export type RdThemeConfig = ThemeConfig & ThemeConfigExtend; +export type RdThemeConfig = Omit & ThemeConfigExtend; export type RdOverrideToken = OverrideTokenMap; export type RdComponentsConfig = { [key in keyof RdOverrideToken]?: RdOverrideToken[key] & { diff --git a/src/utils/token.ts b/src/utils/token.ts index 3ba6800..b1ae225 100644 --- a/src/utils/token.ts +++ b/src/utils/token.ts @@ -1,5 +1,25 @@ +import type { TokenType } from '@ant-design/cssinjs'; +import type { + TokenMap, + TokenMapKey +} from '@ant-design/cssinjs-utils'; import { config, RdAliasToken, RdComponentsConfig, RdComponentTokenMap } from '..'; +export type RdGetDefaultTokenTypeUtil< + CompTokenMap extends TokenMap, + AliasToken extends TokenType, + C extends TokenMapKey +> = RdGetDefaultTokenFn; + +export type RdGetDefaultToken> = + RdGetDefaultTokenTypeUtil; + +export type RdGetDefaultTokenFn< + CompTokenMap extends TokenMap, + AliasToken extends TokenType, + C extends TokenMapKey +> = (token: AliasToken & Partial) => CompTokenMap[C]; + /** * Get the token value for a given component and alias name. * It checks for the component-specific token first, then the design token if the component token is not found. From a4ee6c8f7563c3eeaec6df3dad8016a40cb5be15 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Tue, 24 Jun 2025 18:18:45 +0700 Subject: [PATCH 10/32] fix: Fix label for DashboardTemplate --- src/templates/DashboardTemplate/Footer/styles.tsx | 2 +- src/templates/DashboardTemplate/Header/styles.tsx | 15 ++++++++------- src/templates/DashboardTemplate/Sider/styles.tsx | 2 +- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/templates/DashboardTemplate/Footer/styles.tsx b/src/templates/DashboardTemplate/Footer/styles.tsx index 2b309de..e4e219c 100644 --- a/src/templates/DashboardTemplate/Footer/styles.tsx +++ b/src/templates/DashboardTemplate/Footer/styles.tsx @@ -5,7 +5,7 @@ import { RdDashboardTemplateFooterProps } from './types'; import { css } from '@emotion/react'; export const DashboardTemplateFooterStyles = styled(Layout.Footer, { - label: 'rd-dashboard-template-header', + label: 'rd-dashboard-template-footer', shouldForwardProp: prop => getExcludeForwardProps>( [] as (keyof Omit)[], diff --git a/src/templates/DashboardTemplate/Header/styles.tsx b/src/templates/DashboardTemplate/Header/styles.tsx index d09daf9..ff991b4 100644 --- a/src/templates/DashboardTemplate/Header/styles.tsx +++ b/src/templates/DashboardTemplate/Header/styles.tsx @@ -12,11 +12,12 @@ export const DashboardTemplateHeaderStyles = styled(Layout.Header, { prop ), })>` - ${({ fixedOnScroll }) => - fixedOnScroll && - css` - position: sticky; - top: 0; - z-index: 1; - `} + ${({ fixedOnScroll }) => { + return fixedOnScroll && + css` + position: sticky; + top: 0; + z-index: ${getComponentOrGlobalToken('DashboardTemplate', 'zIndexBase') ?? 1050}; + `; + }} `; diff --git a/src/templates/DashboardTemplate/Sider/styles.tsx b/src/templates/DashboardTemplate/Sider/styles.tsx index 3686374..ec9ac3c 100644 --- a/src/templates/DashboardTemplate/Sider/styles.tsx +++ b/src/templates/DashboardTemplate/Sider/styles.tsx @@ -5,7 +5,7 @@ import { getComponentToken, getExcludeForwardProps } from '../../../utils'; import { RdDashboardTemplateSiderProps } from './types'; export const DashboardTemplateSiderStyles = styled(Layout.Sider, { - label: 'rd-dashboard-template-header', + label: 'rd-dashboard-template-sider', shouldForwardProp: prop => getExcludeForwardProps>( ['fixedOnScroll'] as (keyof Omit)[], From 2022111d944f1027eed2d6ea971e5215316872d9 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Fri, 27 Jun 2025 16:01:39 +0700 Subject: [PATCH 11/32] fix: remove selectFilterOptionByLabel strategy --- src/molecules/Select/strategies/index.ts | 1 - .../Select/strategies/selectFilterOptionByLabel.tsx | 8 -------- 2 files changed, 9 deletions(-) delete mode 100644 src/molecules/Select/strategies/index.ts delete mode 100644 src/molecules/Select/strategies/selectFilterOptionByLabel.tsx diff --git a/src/molecules/Select/strategies/index.ts b/src/molecules/Select/strategies/index.ts deleted file mode 100644 index 748a765..0000000 --- a/src/molecules/Select/strategies/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './selectFilterOptionByLabel'; diff --git a/src/molecules/Select/strategies/selectFilterOptionByLabel.tsx b/src/molecules/Select/strategies/selectFilterOptionByLabel.tsx deleted file mode 100644 index 82ae4ae..0000000 --- a/src/molecules/Select/strategies/selectFilterOptionByLabel.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { RdSelectProps } from '../types'; - -export const selectFilterOptionByLabel: RdSelectProps['filterOption'] = (input, option) => { - return ( - option?.props?.children?.toLowerCase().indexOf(input.toLowerCase()) >= 0 || - option?.props?.label?.toLowerCase().indexOf(input.toLowerCase()) >= 0 - ); -}; From a3cd1a5417066735532be473e233053dec4cf4ce Mon Sep 17 00:00:00 2001 From: Kenneth Date: Wed, 2 Jul 2025 15:54:25 +0700 Subject: [PATCH 12/32] feature: allow hidden Header, Sidebar, Footer in DashboardTemplate feature --- src/templates/DashboardTemplate/DashboardTemplate.tsx | 6 +++--- src/templates/DashboardTemplate/types.ts | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/templates/DashboardTemplate/DashboardTemplate.tsx b/src/templates/DashboardTemplate/DashboardTemplate.tsx index 66d04b8..4251e99 100644 --- a/src/templates/DashboardTemplate/DashboardTemplate.tsx +++ b/src/templates/DashboardTemplate/DashboardTemplate.tsx @@ -11,10 +11,10 @@ const DashboardTemplateInternal: RdDashboardTemplateComponent = forwardRef((prop return ( - + {headerProps && } - - + + {siderProps && } {props.children} diff --git a/src/templates/DashboardTemplate/types.ts b/src/templates/DashboardTemplate/types.ts index 5df20d3..c3cc12b 100644 --- a/src/templates/DashboardTemplate/types.ts +++ b/src/templates/DashboardTemplate/types.ts @@ -13,8 +13,8 @@ type DashboardTemplateComponentTokenExtend = { //#region Define extended types type DashboardTemplatePropsExtend = { - headerProps?: RdDashboardTemplateHeaderProps; - siderProps?: RdDashboardTemplateSiderProps; + headerProps?: RdDashboardTemplateHeaderProps | false; + siderProps?: RdDashboardTemplateSiderProps | false; footerProps?: RdDashboardTemplateFooterProps | false; test?: boolean; }; From f55a3df6b28914c8b5b0f8cc4be39156c5018189 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Wed, 2 Jul 2025 15:55:27 +0700 Subject: [PATCH 13/32] fix: remove select strategy in export barrel --- src/molecules/Select/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/molecules/Select/index.tsx b/src/molecules/Select/index.tsx index 3032930..d3995b0 100644 --- a/src/molecules/Select/index.tsx +++ b/src/molecules/Select/index.tsx @@ -1,3 +1,2 @@ -export * from './strategies'; export * from './Select'; export * from './types'; From ae67d5da47af01968b6f690870902c87f8b87f26 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Fri, 4 Jul 2025 16:53:03 +0700 Subject: [PATCH 14/32] feature: add RdTreeDataNode type for Tree component --- src/molecules/Tree/types.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/molecules/Tree/types.ts b/src/molecules/Tree/types.ts index 1ec2469..61eda0d 100644 --- a/src/molecules/Tree/types.ts +++ b/src/molecules/Tree/types.ts @@ -1,4 +1,4 @@ -import { GetProps, Tree } from 'antd'; +import { GetProps, Tree, TreeDataNode as TreeDataNodeAntd } from 'antd'; import { ComponentToken as TreeComponentTokenAntd } from 'antd/es/card/style'; import { BasicDataNode, DataNode } from 'antd/es/tree'; import type RcTree from 'rc-tree'; @@ -26,6 +26,8 @@ type DirectoryTreePropsExtend = {}; //#endregion //#region Export types +export type RdTreeDataNode = TreeDataNodeAntd; + export type RdTreeProps = TreePropsAntd & TreePropsExtend; export type RdTreeNodeProps = TreeNodePropsAntd & TreeNodePropsExtend; From 38220b1277d5e63b8731fa23551501753a10e01c Mon Sep 17 00:00:00 2001 From: Kenneth Date: Fri, 18 Jul 2025 14:04:01 +0700 Subject: [PATCH 15/32] feature: add Result molecule --- src/molecules/Result/Result.tsx | 6 ++++++ src/molecules/Result/index.tsx | 2 ++ src/molecules/Result/styles.tsx | 4 ++++ src/molecules/Result/types.ts | 23 +++++++++++++++++++++++ 4 files changed, 35 insertions(+) create mode 100644 src/molecules/Result/Result.tsx create mode 100644 src/molecules/Result/index.tsx create mode 100644 src/molecules/Result/styles.tsx create mode 100644 src/molecules/Result/types.ts diff --git a/src/molecules/Result/Result.tsx b/src/molecules/Result/Result.tsx new file mode 100644 index 0000000..bf15024 --- /dev/null +++ b/src/molecules/Result/Result.tsx @@ -0,0 +1,6 @@ +import { ResultStyles } from './styles'; +import { RdResultComponent } from './types'; + +export const Result: RdResultComponent = props => { + return ; +}; diff --git a/src/molecules/Result/index.tsx b/src/molecules/Result/index.tsx new file mode 100644 index 0000000..446ce11 --- /dev/null +++ b/src/molecules/Result/index.tsx @@ -0,0 +1,2 @@ +export * from './Result'; +export * from './types'; diff --git a/src/molecules/Result/styles.tsx b/src/molecules/Result/styles.tsx new file mode 100644 index 0000000..90734c0 --- /dev/null +++ b/src/molecules/Result/styles.tsx @@ -0,0 +1,4 @@ +import styled from '@emotion/styled'; +import { Result } from 'antd'; + +export const ResultStyles = styled(Result)``; diff --git a/src/molecules/Result/types.ts b/src/molecules/Result/types.ts new file mode 100644 index 0000000..6cc239a --- /dev/null +++ b/src/molecules/Result/types.ts @@ -0,0 +1,23 @@ +import { Result, GetProps } from 'antd'; +import { ComponentToken as ResultComponentTokenAntd } from 'antd/es/drawer/style'; + +//#region Define Ant Design types +type ResultPropsAntd = GetProps; +//#endregion + +//#region Define extended component tokens +type ResultComponentTokenExtend = {}; +//#endregion + +//#region Define extended types +type ResultPropsExtend = {}; +//#endregion + +//#region Export types +export type RdResultProps = ResultPropsAntd & ResultPropsExtend; +export type RdResultComponentToken = ResultComponentTokenAntd & ResultComponentTokenExtend; +//#endregion + +//#region Define component types +export type RdResultComponent = React.FC; +//#endregion From ca24cf0d14734462021710d0e3d72dec346b2f0d Mon Sep 17 00:00:00 2001 From: Kenneth Date: Fri, 18 Jul 2025 14:04:36 +0700 Subject: [PATCH 16/32] fix: remove not used code --- src/config.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/config.ts b/src/config.ts index 18c9c06..a17ff0d 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,5 +1,4 @@ import { theme } from 'antd'; -import { rdPrepareComponentToken } from '.'; import { RdThemeConfig } from './organisms'; export interface IConfig { From b2e0049f2ff67d0b3934a386c32a53bfd324f9ef Mon Sep 17 00:00:00 2001 From: Kenneth Date: Fri, 18 Jul 2025 14:06:10 +0700 Subject: [PATCH 17/32] fix: fix hide pagination with default if pagination is false --- src/molecules/Table/Table.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/molecules/Table/Table.tsx b/src/molecules/Table/Table.tsx index 66f79a4..8294b0e 100644 --- a/src/molecules/Table/Table.tsx +++ b/src/molecules/Table/Table.tsx @@ -2,11 +2,11 @@ import { DndContext, DragEndEvent } from '@dnd-kit/core'; import { restrictToVerticalAxis } from '@dnd-kit/modifiers'; import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'; import { AnyObject } from 'antd/es/_util/type'; +import { useContext, useMemo } from 'react'; +import { ConfigProvider } from '../../organisms'; import { RowSortable } from './sortable'; import { TableStyledFunc } from './styles'; import { RdTableProps } from './types'; -import { useContext, useMemo } from 'react'; -import { ConfigProvider } from '../../organisms'; export const Table = ( props: RdTableProps @@ -16,6 +16,8 @@ export const Table = ( const { pagination: defaultPagination } = defaultTableProps || {}; const paginationWithDefault = useMemo(() => { + if (pagination === false) return false; + return { ...defaultPagination, ...pagination, From 5c2c312c903f14c7bef0ccbcfaab37abd6d61d80 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Fri, 18 Jul 2025 14:07:26 +0700 Subject: [PATCH 18/32] refactor: refactor code Typography --- src/atomics/Typography/styles.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/atomics/Typography/styles.tsx b/src/atomics/Typography/styles.tsx index a9ec41c..2dc0ce4 100644 --- a/src/atomics/Typography/styles.tsx +++ b/src/atomics/Typography/styles.tsx @@ -1,9 +1,9 @@ +import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { Typography } from 'antd'; -import { getComponentOrGlobalToken } from '../../utils/token'; -import { RdTypographyParagraphProps, RdTypographyTextProps, RdTypographyTitleProps } from './types'; -import { css } from '@emotion/react'; +import { getComponentOrGlobalToken } from '../..'; import { getExcludeForwardProps } from '../../utils/styles'; +import { RdTypographyParagraphProps, RdTypographyTextProps, RdTypographyTitleProps } from './types'; export const TypographyLinkStyles = styled(Typography.Link)``; From 3c64bb2d1fdbc35fc192ce23766d124fb4b17b28 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Fri, 18 Jul 2025 14:08:10 +0700 Subject: [PATCH 19/32] fix: fix export berrel --- src/index.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 751186e..7ab11d6 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,11 +1,10 @@ -import { theme } from 'antd'; -import { RdThemeConfig } from './organisms'; +export * from '@ant-design/icons'; export * from './config'; -export * from './utils'; export * from './types'; +export * from './utils'; export * from './atomics'; export * from './molecules'; export * from './organisms'; -export * from './templates'; +export * from './templates'; \ No newline at end of file From 21ddb4125d7e1af06cc6f97f5b69a8beb4f41f57 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Wed, 23 Jul 2025 20:10:39 +0700 Subject: [PATCH 20/32] feature: support render props as children for Form.ItemControl component --- src/molecules/Form/FormItemControl.tsx | 155 ++++++++++++++++++- src/molecules/Form/FormItemReactHookForm.tsx | 65 -------- src/molecules/Form/types.ts | 15 +- 3 files changed, 151 insertions(+), 84 deletions(-) delete mode 100644 src/molecules/Form/FormItemReactHookForm.tsx diff --git a/src/molecules/Form/FormItemControl.tsx b/src/molecules/Form/FormItemControl.tsx index 8fae0fe..2cb36d3 100644 --- a/src/molecules/Form/FormItemControl.tsx +++ b/src/molecules/Form/FormItemControl.tsx @@ -1,9 +1,148 @@ -import { FieldValues } from 'react-hook-form'; -import { FormItemReactHookForm } from './FormItemReactHookForm'; -import { RdFormItemControlProps } from './types'; - -export const FormItemControl = ( - props: RdFormItemControlProps -) => { - return {...props} />; +import { Form as AntdForm } from 'antd'; +import { Children, cloneElement, isValidElement, ReactElement, ReactNode, useEffect } from 'react'; +import { + Control, + FieldPath, + FieldValues, + useController, + ControllerRenderProps, + ControllerFieldState, + UseFormStateReturn, + useFormState, + PathValue, +} from 'react-hook-form'; +import { FormItem } from './FormItem'; +import { RdFormItemProps } from '../..'; + +// Define a type for child components that may have onChange and onBlur +type ChildWithHandlers = { + onChange?: (...args: any[]) => void; + onBlur?: (...args: any[]) => void; + [key: string]: any; +}; + +// Define the render prop type with specific TName +type RenderProp> = (props: { + field: ControllerRenderProps; + fieldState: ControllerFieldState; + formState: UseFormStateReturn; +}) => ReactNode; + +// Update the props type to include TName for precise typing +export type RdFormItemControlProps< + TFieldValues extends FieldValues = FieldValues, + TName extends FieldPath = FieldPath, + TContext = any +> = { + children: ReactNode | RenderProp; + control: Control; + shouldUnregister?: boolean; + name: TName; + disabled?: boolean; + defaultValue?: PathValue; + overrideFieldOnChange?: (...values: any[]) => void; + valuePropName?: string; +} & Omit; + +export const FormItemControl = < + TFieldValues extends FieldValues = FieldValues, + TName extends FieldPath = FieldPath +>({ + children, + control, + name, + disabled, + valuePropName, + shouldUnregister, + defaultValue, + overrideFieldOnChange, + ...props +}: RdFormItemControlProps) => { + const { field, fieldState } = useController({ + name, + control, + disabled, + shouldUnregister, + defaultValue, + }); + const formState = useFormState({ control }); + const form = AntdForm.useFormInstance(); + + useEffect(() => { + form.setFieldValue(name, field.value); + }, [field.value, form, name]); + + // Common field props for both render prop and children + const fieldProps = { + ...field, + onChange: (...params: any[]) => { + overrideFieldOnChange + ? overrideFieldOnChange(...params, field) + : field.onChange(...params); + }, + onBlur: (...params: any[]) => { + field.onBlur(); + }, + ...(valuePropName && { + [valuePropName]: field.value, + }), + }; + + // Props to pass to render prop + const renderProps: { + field: ControllerRenderProps; + fieldState: ControllerFieldState; + formState: UseFormStateReturn; + } = { + field: fieldProps as ControllerRenderProps, + fieldState, + formState, + }; + + // Handle render prop if children is a function + if (typeof children === 'function') { + // Explicitly cast children to the RenderProp type to avoid type widening + const renderFn = children as RenderProp; + return ( + + {renderFn(renderProps)} + + ); + } + + // Handle regular children + return ( + + {Children.map(children, child => + isValidElement(child) + ? cloneElement(child as ReactElement, { + ...fieldProps, + onChange: (...params: any[]) => { + child.props.onChange?.(...params); + fieldProps.onChange(...params); + }, + onBlur: (...params: any[]) => { + child.props.onBlur?.(...params); + fieldProps.onBlur(); + }, + ...(valuePropName && { + [valuePropName]: field.value, + }), + }) + : child + )} + + ); }; diff --git a/src/molecules/Form/FormItemReactHookForm.tsx b/src/molecules/Form/FormItemReactHookForm.tsx deleted file mode 100644 index 12b2b70..0000000 --- a/src/molecules/Form/FormItemReactHookForm.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { Form as AntdForm } from 'antd'; -import { Children, cloneElement, isValidElement, useEffect } from 'react'; -import { FieldValues, useController } from 'react-hook-form'; -import { FormItem } from './FormItem'; -import { FormItemReactHookFormProps } from './types'; - -export const FormItemReactHookForm = ({ - children, - control, - name, - disabled, - valuePropName, - shouldUnregister, - defaultValue, - overrideFieldOnChange, - ...props -}: FormItemReactHookFormProps) => { - const { field, fieldState } = useController({ - name, - control, - disabled, - shouldUnregister, - defaultValue, - }); - const form = AntdForm.useFormInstance(); - - useEffect(() => { - form.setFieldValue(name, field.value); - }, [field.value, form, name]); - - return ( - - {Children.map( - children, - child => - isValidElement(child) && - cloneElement(child, { - ...field, - //@ts-expect-error onChange type safe is not necessary here - onChange: (...params) => { - child.props.onChange && child.props.onChange(...params); - - overrideFieldOnChange - ? overrideFieldOnChange(...params, field) - : field.onChange(...params); - }, - //@ts-expect-error onBlur type safe is not necessary here - onBlur: (...params) => { - child.props.onBlur && child.props.onBlur(...params); - field.onBlur(); - }, - ...(valuePropName && { - [valuePropName]: field.value, - }), - }) - )} - - ); -}; diff --git a/src/molecules/Form/types.ts b/src/molecules/Form/types.ts index 1093e4e..77cbd50 100644 --- a/src/molecules/Form/types.ts +++ b/src/molecules/Form/types.ts @@ -4,6 +4,7 @@ import { ComponentToken } from 'antd/es/form/style'; import { FormRef } from 'rc-field-form/lib/interface'; import React, { ReactElement } from 'react'; import { Control, FieldPath, FieldValues } from 'react-hook-form'; +import { FormItemControl } from './FormItemControl'; //#region Define Ant Design types type FormPropsAntd = GetProps>; @@ -71,23 +72,15 @@ export type RdFormErrorListProps = FormErrorListPropsAntd & FormErrorListPropsEx export type RdFormItemControlProps< TFieldValues extends FieldValues = FieldValues, TContext = any -> = FormItemReactHookFormProps & - Omit & { - shouldUnregister?: boolean; - }; - -export type FormItemReactHookFormProps< - TFieldValues extends FieldValues = FieldValues, - TContext = any > = { - children: React.ReactNode; + children: React.ReactNode | ((props: RdFormItemControlProps) => React.ReactNode); control: Control; shouldUnregister?: boolean; name: FieldPath; disabled?: boolean; defaultValue?: any; overrideFieldOnChange?: (...values: any[]) => void; -} & Omit; +} & Omit; //#endregion //#region Define component types @@ -110,7 +103,7 @@ export type RdFormErrorListComponent = React.FC; export type RdFormCompoundedComponent = RdFormComponent & { Item: RdFormItemComponent; - ItemControl: RdFormItemControlComponent; + ItemControl: typeof FormItemControl; List: RdFormListComponent; Provider: RdFormProviderComponent; ErrorList: RdFormErrorListComponent; From 0360a361a99a94b6acd4afe322960fa63615dc8b Mon Sep 17 00:00:00 2001 From: Kenneth Date: Wed, 30 Jul 2025 13:15:23 +0700 Subject: [PATCH 21/32] refactor: change getComponentOrGlobalToken to getAliasToken and remove secondary, tertiary, quaternary color --- src/molecules/Button/styles.tsx | 4 +- src/molecules/Card/styles.tsx | 18 ++--- src/molecules/Select/styles.tsx | 8 +- src/organisms/ConfigProvider/types.colors.ts | 40 ---------- src/organisms/ConfigProvider/types.ts | 28 +------ src/templates/CenteredTemplate/styles.tsx | 14 ++-- .../DashboardTemplate/Footer/styles.tsx | 4 +- .../DashboardTemplate/Header/styles.tsx | 4 +- src/templates/DashboardTemplate/styles.tsx | 4 +- src/utils/theme.ts | 80 +------------------ src/utils/token.ts | 29 +++++-- 11 files changed, 60 insertions(+), 173 deletions(-) delete mode 100644 src/organisms/ConfigProvider/types.colors.ts diff --git a/src/molecules/Button/styles.tsx b/src/molecules/Button/styles.tsx index df71d6c..47c7da9 100644 --- a/src/molecules/Button/styles.tsx +++ b/src/molecules/Button/styles.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { Button } from 'antd'; -import { getComponentOrGlobalToken, getExcludeForwardProps } from '../../utils'; +import { getAliasToken, getExcludeForwardProps } from '../../utils'; import { RdButtonComponent, RdButtonGroupProps, RdButtonProps } from './types'; export const ButtonStyles = styled(Button as RdButtonComponent, { @@ -20,7 +20,7 @@ export const ButtonStyles = styled(Button as RdButtonComponent, { case 'success': return css` &.ant-btn { - color: ${getComponentOrGlobalToken('Button', 'colorSuccess')}; + color: ${getAliasToken('Button', 'colorSuccess')}; } `; default: diff --git a/src/molecules/Card/styles.tsx b/src/molecules/Card/styles.tsx index ad104d1..a620b6b 100644 --- a/src/molecules/Card/styles.tsx +++ b/src/molecules/Card/styles.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { Card } from 'antd'; import { getExcludeForwardProps } from '../../utils/styles'; -import { getComponentOrGlobalToken, getComponentToken } from '../../utils/token'; +import { getAliasToken, getComponentToken } from '../../utils/token'; import { RdCardProps, RdGridCardProps, RdMetaCardProps } from './types'; export const CardStyles = styled(Card, { @@ -16,15 +16,15 @@ export const CardStyles = styled(Card, { background-color: transparent; // border-radius: 0 []px []px []px; - border-radius: 0 ${getComponentOrGlobalToken('Card', 'borderRadiusLG')}px - ${getComponentOrGlobalToken('Card', 'borderRadiusLG')}px - ${getComponentOrGlobalToken('Card', 'borderRadiusLG')}px; + border-radius: 0 ${getAliasToken('Card', 'borderRadiusLG')}px + ${getAliasToken('Card', 'borderRadiusLG')}px + ${getAliasToken('Card', 'borderRadiusLG')}px; } &:not(:has(> .ant-card-head)) { > .ant-card-body { border-top: 10px solid ${getComponentToken('Card', 'headerBg')}; - border-radius: ${getComponentOrGlobalToken('Card', 'borderRadiusLG')}px; + border-radius: ${getAliasToken('Card', 'borderRadiusLG')}px; } } @@ -33,15 +33,15 @@ export const CardStyles = styled(Card, { } > .ant-card-body { - background-color: ${getComponentOrGlobalToken('Card', 'colorBgContainer')}; + background-color: ${getAliasToken('Card', 'colorBgContainer')}; } &.ant-card-bordered { border: none; > .ant-card-body { - border-width: ${getComponentOrGlobalToken('Card', 'lineWidth')}px; - border-color: ${getComponentOrGlobalToken('Card', 'colorBorderSecondary')}; + border-width: ${getAliasToken('Card', 'lineWidth')}px; + border-color: ${getAliasToken('Card', 'colorBorderSecondary')}; } } @@ -49,7 +49,7 @@ export const CardStyles = styled(Card, { box-shadow: none; > .ant-card-body { - box-shadow: ${getComponentOrGlobalToken('Card', 'boxShadowTertiary')}; + box-shadow: ${getAliasToken('Card', 'boxShadowTertiary')}; } } } diff --git a/src/molecules/Select/styles.tsx b/src/molecules/Select/styles.tsx index b7cf198..be32358 100644 --- a/src/molecules/Select/styles.tsx +++ b/src/molecules/Select/styles.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { Select } from 'antd'; import { BaseOptionType, DefaultOptionType } from 'antd/es/select'; -import { getComponentOrGlobalToken, getComponentToken, getExcludeForwardProps } from '../../utils'; +import { getAliasToken, getComponentToken, getExcludeForwardProps } from '../../utils'; import { RdSelectComponent, RdSelectProps } from './types'; export const SelectStyledFunc = < @@ -61,7 +61,7 @@ const variantOutlinedTransparent = css` &:hover { .ant-select-selector { border-color: ${getComponentToken('Select', 'hoverBorderColor') || - getComponentOrGlobalToken('Select', 'colorPrimaryHover')}; + getAliasToken('Select', 'colorPrimaryHover')}; } } @@ -69,9 +69,9 @@ const variantOutlinedTransparent = css` .ant-select-selector { box-shadow: 0 0 0 2px ${getComponentToken('Select', 'activeOutlineColor') || - getComponentOrGlobalToken('Select', 'colorPrimaryBorder')}; + getAliasToken('Select', 'colorPrimaryBorder')}; border-color: ${getComponentToken('Select', 'activeBorderColor') || - getComponentOrGlobalToken('Select', 'colorPrimaryActive')}; + getAliasToken('Select', 'colorPrimaryActive')}; outline: 0; } } diff --git a/src/organisms/ConfigProvider/types.colors.ts b/src/organisms/ConfigProvider/types.colors.ts deleted file mode 100644 index 4b36783..0000000 --- a/src/organisms/ConfigProvider/types.colors.ts +++ /dev/null @@ -1,40 +0,0 @@ -export interface ISecondaryColor { - colorSecondary: string; - colorSecondaryActive: string; - colorSecondaryBg: string; - colorSecondaryBgHover: string; - colorSecondaryBorder: string; - colorSecondaryBorderHover: string; - colorSecondaryHover: string; - colorSecondaryText: string; - colorSecondaryTextActive: string; - colorSecondaryTextHover: string; -} - -export interface ITertiaryColor { - colorTertiary: string; - colorTertiaryActive: string; - colorTertiaryBg: string; - colorTertiaryBgHover: string; - colorTertiaryBorder: string; - colorTertiaryBorderHover: string; - colorTertiaryHover: string; - colorTertiaryText: string; - colorTertiaryTextActive: string; - colorTertiaryTextHover: string; -} - -export interface IQuaternaryColor { - colorQuaternary: string; - colorQuaternaryActive: string; - colorQuaternaryBg: string; - colorQuaternaryBgHover: string; - colorQuaternaryBorder: string; - colorQuaternaryBorderHover: string; - colorQuaternaryHover: string; - colorQuaternaryText: string; - colorQuaternaryTextActive: string; - colorQuaternaryTextHover: string; -} - -export interface IAdditionalColor extends ISecondaryColor, ITertiaryColor, IQuaternaryColor {} diff --git a/src/organisms/ConfigProvider/types.ts b/src/organisms/ConfigProvider/types.ts index 9c6fe17..663a36f 100644 --- a/src/organisms/ConfigProvider/types.ts +++ b/src/organisms/ConfigProvider/types.ts @@ -1,38 +1,18 @@ import { OverrideTokenMap } from '@ant-design/cssinjs-utils'; -import { - ConfigProvider as ConfigProviderAntd, - GetProps, - MappingAlgorithm, - ThemeConfig, -} from 'antd'; +import { ConfigProvider as ConfigProviderAntd, MappingAlgorithm, ThemeConfig } from 'antd'; import { AliasToken } from 'antd/es/theme/internal'; import { RdMoleculesTokenMap } from '../../molecules/types'; -import { ConfigProviderInternal } from './ConfigProvider'; import { RdTemplatesTokenMap } from '../../templates/types'; -import { RdConfigProviderProps } from './types.props'; +import { ConfigProviderInternal } from './ConfigProvider'; import { RdConfigContext } from './context/types'; +import { RdConfigProviderProps } from './types.props'; //#region Define Ant Design types type Algorithm = ThemeConfig['algorithm']; //#endregion //#region Define extended types -type AliasTokenExtend = { - /** - * Brand secondary color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics. - */ - colorSecondary: string; - - /** - * Brand tertiary color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics. - */ - colorTertiary: string; - - /** - * Brand quaternary color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics. - */ - colorQuaternary: string; -}; +type AliasTokenExtend = {}; type ComponentsConfigExtend = {}; type AlgorithmExtend = {}; type ThemeConfigExtend = { diff --git a/src/templates/CenteredTemplate/styles.tsx b/src/templates/CenteredTemplate/styles.tsx index 7a0d08d..31d97a9 100644 --- a/src/templates/CenteredTemplate/styles.tsx +++ b/src/templates/CenteredTemplate/styles.tsx @@ -1,7 +1,7 @@ +import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { Layout } from '../../molecules'; -import { getComponentOrGlobalToken, getExcludeForwardProps, unit } from '../../utils'; -import { css } from '@emotion/react'; +import { getAliasToken, getExcludeForwardProps } from '../../utils'; import { RdCenteredTemplateProps } from './types'; export const CenteredTemplateStyles = styled(Layout, { @@ -14,7 +14,7 @@ export const CenteredTemplateStyles = styled(Layout, { })` ${() => { return css` - background-color: ${getComponentOrGlobalToken('CenteredTemplate', 'colorPrimary')}; + background-color: ${getAliasToken('CenteredTemplate', 'colorPrimary')}; `; }} @@ -36,10 +36,10 @@ export const CenteredTemplateContent = styled('div', { ${({ maxWidth }) => { return css` max-width: ${maxWidth}px; - background-color: ${getComponentOrGlobalToken('CenteredTemplate', 'colorBgElevated')}; - padding: ${getComponentOrGlobalToken('CenteredTemplate', 'paddingContentVerticalLG')}px - ${getComponentOrGlobalToken('CenteredTemplate', 'paddingContentHorizontalLG')}px; - border-radius: ${getComponentOrGlobalToken('CenteredTemplate', 'borderRadius')}px; + background-color: ${getAliasToken('CenteredTemplate', 'colorBgElevated')}; + padding: ${getAliasToken('CenteredTemplate', 'paddingContentVerticalLG')}px + ${getAliasToken('CenteredTemplate', 'paddingContentHorizontalLG')}px; + border-radius: ${getAliasToken('CenteredTemplate', 'borderRadius')}px; `; }} `; diff --git a/src/templates/DashboardTemplate/Footer/styles.tsx b/src/templates/DashboardTemplate/Footer/styles.tsx index e4e219c..f725b9f 100644 --- a/src/templates/DashboardTemplate/Footer/styles.tsx +++ b/src/templates/DashboardTemplate/Footer/styles.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { Layout } from 'antd'; -import { getComponentOrGlobalToken, getExcludeForwardProps } from '../../../utils'; +import { getAliasToken, getExcludeForwardProps } from '../../../utils'; import { RdDashboardTemplateFooterProps } from './types'; import { css } from '@emotion/react'; @@ -15,7 +15,7 @@ export const DashboardTemplateFooterStyles = styled(Layout.Footer, { ${() => { return css` border-top: 1px solid - ${getComponentOrGlobalToken('DashboardTemplate', 'colorBorderSecondary')}; + ${getAliasToken('DashboardTemplate', 'colorBorderSecondary')}; `; }} `; diff --git a/src/templates/DashboardTemplate/Header/styles.tsx b/src/templates/DashboardTemplate/Header/styles.tsx index ff991b4..6ffd760 100644 --- a/src/templates/DashboardTemplate/Header/styles.tsx +++ b/src/templates/DashboardTemplate/Header/styles.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { Layout } from 'antd'; -import { getComponentOrGlobalToken, getExcludeForwardProps } from '../../../utils'; +import { getAliasToken, getExcludeForwardProps } from '../../../utils'; import { RdDashboardTemplateHeaderProps } from './types'; export const DashboardTemplateHeaderStyles = styled(Layout.Header, { @@ -17,7 +17,7 @@ export const DashboardTemplateHeaderStyles = styled(Layout.Header, { css` position: sticky; top: 0; - z-index: ${getComponentOrGlobalToken('DashboardTemplate', 'zIndexBase') ?? 1050}; + z-index: ${getAliasToken('DashboardTemplate', 'zIndexBase') ?? 1050}; `; }} `; diff --git a/src/templates/DashboardTemplate/styles.tsx b/src/templates/DashboardTemplate/styles.tsx index 4b33de2..4d621a4 100644 --- a/src/templates/DashboardTemplate/styles.tsx +++ b/src/templates/DashboardTemplate/styles.tsx @@ -1,13 +1,13 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; -import { getComponentOrGlobalToken, getComponentToken } from '../..'; +import { getAliasToken, getComponentToken } from '../..'; import { Layout } from '../../molecules'; export const DashboardTemplateStyles = styled(Layout, { label: 'rd-dashboard-template', })` ${() => css` - background: ${getComponentOrGlobalToken('DashboardTemplate', 'colorBgLayout')}; + background: ${getAliasToken('DashboardTemplate', 'colorBgLayout')}; `} `; diff --git a/src/utils/theme.ts b/src/utils/theme.ts index 4f374c1..843dbd5 100644 --- a/src/utils/theme.ts +++ b/src/utils/theme.ts @@ -1,88 +1,16 @@ import { theme } from 'antd'; -import { darken, lighten } from 'polished'; import { RdAliasToken, RdThemeConfig } from '../organisms'; -import { - IQuaternaryColor, - ISecondaryColor, - ITertiaryColor, -} from '../organisms/ConfigProvider/types.colors'; - -/** - * @description Generate color based on base color - * @param color - */ -const generateColor = (baseColor: string) => { - return { - colorActive: darken(0.1, baseColor), - colorBg: lighten(0.3, baseColor), - colorBgHover: lighten(0.2, baseColor), - colorBorder: darken(0.15, baseColor), - colorBorderHover: darken(0.1, baseColor), - colorHover: lighten(0.1, baseColor), - colorText: baseColor, - colorTextActive: darken(0.2, baseColor), - colorTextHover: lighten(0.05, baseColor), - }; -}; export const rdTheme = { ...theme, getDesignToken: (config: RdThemeConfig): RdAliasToken => { // getDesignToken in antd - const design = theme.getDesignToken(config); - - const secondaryColorGenerated = generateColor(config.token?.colorSecondary || '#1890ff'); - const tertiaryColorGenerated = generateColor(config.token?.colorTertiary || '#1890ff'); - const quaternaryColorGenerated = generateColor(config.token?.colorQuaternary || '#1890ff'); - - const secondaryColorAdditional: ISecondaryColor = { - colorSecondary: config.token?.colorSecondary || '#1890ff', - colorSecondaryActive: secondaryColorGenerated.colorActive, - colorSecondaryBg: secondaryColorGenerated.colorBg, - colorSecondaryBgHover: secondaryColorGenerated.colorBgHover, - colorSecondaryBorder: secondaryColorGenerated.colorBorder, - colorSecondaryBorderHover: secondaryColorGenerated.colorBorderHover, - colorSecondaryHover: secondaryColorGenerated.colorHover, - colorSecondaryText: secondaryColorGenerated.colorText, - colorSecondaryTextActive: secondaryColorGenerated.colorTextActive, - colorSecondaryTextHover: secondaryColorGenerated.colorTextHover, - }; + const antdDesignToken = theme.getDesignToken(config); - const tertiaryColorAdditional: ITertiaryColor = { - colorTertiary: config.token?.colorTertiary || '#1890ff', - colorTertiaryActive: tertiaryColorGenerated.colorActive, - colorTertiaryBg: tertiaryColorGenerated.colorBg, - colorTertiaryBgHover: tertiaryColorGenerated.colorBgHover, - colorTertiaryBorder: tertiaryColorGenerated.colorBorder, - colorTertiaryBorderHover: tertiaryColorGenerated.colorBorderHover, - colorTertiaryHover: tertiaryColorGenerated.colorHover, - colorTertiaryText: tertiaryColorGenerated.colorText, - colorTertiaryTextActive: tertiaryColorGenerated.colorTextActive, - colorTertiaryTextHover: tertiaryColorGenerated.colorTextHover, + const mergedDesignToken: RdAliasToken = { + ...antdDesignToken, }; - const quaternaryColorAdditional: IQuaternaryColor = { - colorQuaternary: config.token?.colorQuaternary || '#1890ff', - colorQuaternaryActive: quaternaryColorGenerated.colorActive, - colorQuaternaryBg: quaternaryColorGenerated.colorBg, - colorQuaternaryBgHover: quaternaryColorGenerated.colorBgHover, - colorQuaternaryBorder: quaternaryColorGenerated.colorBorder, - colorQuaternaryBorderHover: quaternaryColorGenerated.colorBorderHover, - colorQuaternaryHover: quaternaryColorGenerated.colorHover, - colorQuaternaryText: quaternaryColorGenerated.colorText, - colorQuaternaryTextActive: quaternaryColorGenerated.colorTextActive, - colorQuaternaryTextHover: quaternaryColorGenerated.colorTextHover, - }; - - const result: RdAliasToken = { - ...design, - ...secondaryColorAdditional, - ...tertiaryColorAdditional, - ...quaternaryColorAdditional, - }; - - return result; + return mergedDesignToken; }, }; - -export const rdTheme2 = theme; diff --git a/src/utils/token.ts b/src/utils/token.ts index b1ae225..6219679 100644 --- a/src/utils/token.ts +++ b/src/utils/token.ts @@ -1,9 +1,6 @@ import type { TokenType } from '@ant-design/cssinjs'; -import type { - TokenMap, - TokenMapKey -} from '@ant-design/cssinjs-utils'; -import { config, RdAliasToken, RdComponentsConfig, RdComponentTokenMap } from '..'; +import type { TokenMap, TokenMapKey } from '@ant-design/cssinjs-utils'; +import { config, RdAliasToken, RdComponentsConfig, RdComponentTokenMap, RdOverrideToken } from '..'; export type RdGetDefaultTokenTypeUtil< CompTokenMap extends TokenMap, @@ -27,6 +24,7 @@ export type RdGetDefaultTokenFn< * @param componentName - The name of the component to fetch its token. * @param aliasName - The alias name of the token to fetch. * @returns The token value for the component or alias, or `undefined` if not found. + * @deprecated use getAliasToken instead */ export const getComponentOrGlobalToken = ( componentName: keyof RdComponentsConfig, @@ -38,6 +36,27 @@ export const getComponentOrGlobalToken = ( return componentTokenValue !== undefined ? componentTokenValue : designTokenValue; }; +/** + * Get the token value for a given component and alias name. + * It checks for the component-specific token first, then the design token if the component token is not found. + * + * @param componentName - The name of the component to fetch its token. + * @param aliasName - The alias name of the token to fetch. + * @returns The token value for the component or alias, or `undefined` if not found. + */ +export const getAliasToken = < + ComponentName extends keyof RdComponentsConfig, + AliasName extends keyof RdAliasToken +>( + componentName: ComponentName, + aliasName: AliasName +) => { + const componentTokenValue = config.componentToken?.[componentName]?.[aliasName]; + const designTokenValue = config.designToken?.[aliasName]; + + return componentTokenValue !== undefined ? componentTokenValue : designTokenValue; +}; + export const getComponentToken = < ComponentName extends keyof RdComponentTokenMap, ComponentToken extends keyof NonNullable From 578adbaf920f0ac4fd397df1a2cbeebea0bb4d7c Mon Sep 17 00:00:00 2001 From: Kenneth Date: Wed, 30 Jul 2025 13:16:05 +0700 Subject: [PATCH 22/32] refactor: change getComponentOrGlobalToken to getAliasToken for Typography --- src/atomics/Typography/styles.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/atomics/Typography/styles.tsx b/src/atomics/Typography/styles.tsx index 2dc0ce4..5e7440d 100644 --- a/src/atomics/Typography/styles.tsx +++ b/src/atomics/Typography/styles.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { Typography } from 'antd'; -import { getComponentOrGlobalToken } from '../..'; +import { getAliasToken } from '../..'; import { getExcludeForwardProps } from '../../utils/styles'; import { RdTypographyParagraphProps, RdTypographyTextProps, RdTypographyTitleProps } from './types'; @@ -35,7 +35,7 @@ export const TypographyTextStyles = styled(Typography.Text, { switch (size) { case 'small': return ` - font-size: ${getComponentOrGlobalToken('Typography', 'fontSizeSM')}px; + font-size: ${getAliasToken('Typography', 'fontSizeSM')}px; `; } }} @@ -61,8 +61,8 @@ export const TypographyParagraphStyles = styled(Typography.Paragraph, { return ( minRows && css` - min-height: ${Number(getComponentOrGlobalToken('Typography', 'lineHeight')) * - Number(getComponentOrGlobalToken('Typography', 'fontSize')) * + min-height: ${Number(getAliasToken('Typography', 'lineHeight')) * + Number(getAliasToken('Typography', 'fontSize')) * minRows}px; ` ); From e4b8e94713a5d57fa2af832ebf2b0bb0cf693949 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Wed, 30 Jul 2025 13:16:33 +0700 Subject: [PATCH 23/32] refactor: add comment for rdPrepareComponentToken for Button molecule --- src/molecules/Button/token.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/molecules/Button/token.ts b/src/molecules/Button/token.ts index 3a92cc8..eb6df4d 100644 --- a/src/molecules/Button/token.ts +++ b/src/molecules/Button/token.ts @@ -11,10 +11,14 @@ import { } from '../..'; export const rdPrepareComponentToken: RdGetDefaultToken<'Button'> = aliasToken => { + // ⚠️ DO NOT modify this block. + // This is the original token fetched from Ant Design. Altering it may break default styling. const componentToken = ( prepareComponentToken as RdGetDefaultTokenFn )({ ...(aliasToken as Required) }) as ButtonComponentTokenAntd; + // ✅ You can safely extend or override Button tokens below. + // Add any custom token values to `extendComponentToken`. const extendComponentToken: ButtonComponentTokenExtend = {}; return { From 248b7b3034cf8970d7319930d756076e714fd3e2 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Wed, 30 Jul 2025 13:16:50 +0700 Subject: [PATCH 24/32] feature: add detect height for skeleton loading --- .../Typography/TypographyText.helper.ts | 58 ++++++++++++++++++ src/atomics/Typography/TypographyText.tsx | 14 ++++- .../Typography/TypographyTitle.helper.ts | 59 +++++++++++++++++++ src/atomics/Typography/TypographyTitle.tsx | 12 +++- src/atomics/Typography/types.ts | 1 + 5 files changed, 141 insertions(+), 3 deletions(-) create mode 100644 src/atomics/Typography/TypographyText.helper.ts create mode 100644 src/atomics/Typography/TypographyTitle.helper.ts diff --git a/src/atomics/Typography/TypographyText.helper.ts b/src/atomics/Typography/TypographyText.helper.ts new file mode 100644 index 0000000..0b2ce42 --- /dev/null +++ b/src/atomics/Typography/TypographyText.helper.ts @@ -0,0 +1,58 @@ +import { getAliasToken, RdAliasToken } from '../..'; +import { RdTypographyTextProps } from './types'; + +/** + * Calculates the height in pixels of a Typography `Text` component + * based on its `size` prop, using the corresponding `fontSize` and `lineHeight` + * token values from the design token system. + * + * If an unknown size is provided, it will fallback to `'normal'` size + * using the `fontSize` and `lineHeight` tokens. + * + * @param size - The `size` prop of the `Typography.Text` component. Possible values: `'normal'`, `'small'`. + * @returns The calculated height in pixels (`fontSize * lineHeight`). + * + * @example + * ```ts + * const height = detectHeightBySize('small'); + * console.log(height); // e.g. 18 (depends on token values) + * ``` + */ +export const detectHeightBySize = (size: RdTypographyTextProps['size']) => { + // Detect fontSize and lineHeight based on `size` prop + let detectedFontSize: number | null = null; + let detectedLineHeight: number | null = null; + + switch (size) { + case 'normal': + detectedFontSize = getAliasToken('Typography', 'fontSize') as RdAliasToken['fontSize']; + detectedLineHeight = getAliasToken( + 'Typography', + 'lineHeight' + ) as RdAliasToken['lineHeight']; + break; + + case 'small': + detectedFontSize = getAliasToken( + 'Typography', + 'fontSizeSM' + ) as RdAliasToken['fontSizeSM']; + detectedLineHeight = getAliasToken( + 'Typography', + 'lineHeightSM' + ) as RdAliasToken['lineHeightSM']; + break; + + default: + // fallback to 'normal' size + detectedFontSize = getAliasToken('Typography', 'fontSize') as RdAliasToken['fontSize']; + detectedLineHeight = getAliasToken( + 'Typography', + 'lineHeight' + ) as RdAliasToken['lineHeight']; + } + + const detectedHeight = detectedFontSize * detectedLineHeight; + + return detectedHeight; +}; diff --git a/src/atomics/Typography/TypographyText.tsx b/src/atomics/Typography/TypographyText.tsx index eb4044a..42da980 100644 --- a/src/atomics/Typography/TypographyText.tsx +++ b/src/atomics/Typography/TypographyText.tsx @@ -1,7 +1,8 @@ import { forwardRef, useMemo } from 'react'; +import { Skeleton } from '../../molecules'; import { TypographyTextStyles } from './styles'; import { RdTypographyTextProps } from './types'; -import { Skeleton } from '../../molecules'; +import { detectHeightBySize } from './TypographyText.helper'; export const TypographyText = forwardRef( (props: RdTypographyTextProps, ref: RdTypographyTextProps['ref']) => { @@ -14,7 +15,16 @@ export const TypographyText = forwardRef( ...antdProps } = props; - if (loading) return ; + if (loading) { + return ( + + ); + } const editableCustom = useMemo(() => { if (editable && typeof editable === 'object') { diff --git a/src/atomics/Typography/TypographyTitle.helper.ts b/src/atomics/Typography/TypographyTitle.helper.ts new file mode 100644 index 0000000..942ab37 --- /dev/null +++ b/src/atomics/Typography/TypographyTitle.helper.ts @@ -0,0 +1,59 @@ +import { getAliasToken } from '../..'; +import { RdTypographyTitleProps } from './types'; + +/** + * Calculates the visual height (in pixels) of a Typography Title component + * based on its `level` prop, using the corresponding `fontSize` and `lineHeight` + * token values from the theme (either component-specific or global). + * + * If an invalid level is provided (not from 1 to 5), it falls back to using + * the level 1 (`fontSizeHeading1` and `lineHeightHeading1`) as default. + * + * @param level - The `level` prop of a `Typography.Title` component (typically from 1 to 5). + * @returns The computed height in pixels (number), calculated as `fontSize * lineHeight`. + * + * @example + * ```ts + * const h1Height = detectHeightByLevel(1); + * console.log(h1Height); // Example: 42 (depending on token values) + * + * const invalidHeight = detectHeightByLevel(); + * console.log(invalidHeight); // Fallbacks to heading1 height + * ``` + */ +export const detectHeightByLevel = (level: RdTypographyTitleProps['level']) => { + // Detect fontSize and lineHeight based on `level` prop + let detectedFontSize: number | null = null; + let detectedLineHeight: number | null = null; + + switch (level) { + case 1: + detectedFontSize = getAliasToken('Typography', 'fontSizeHeading1') as number; + detectedLineHeight = getAliasToken('Typography', 'lineHeightHeading1') as number; + break; + case 2: + detectedFontSize = getAliasToken('Typography', 'fontSizeHeading2') as number; + detectedLineHeight = getAliasToken('Typography', 'lineHeightHeading2') as number; + break; + case 3: + detectedFontSize = getAliasToken('Typography', 'fontSizeHeading3') as number; + detectedLineHeight = getAliasToken('Typography', 'lineHeightHeading3') as number; + break; + case 4: + detectedFontSize = getAliasToken('Typography', 'fontSizeHeading4') as number; + detectedLineHeight = getAliasToken('Typography', 'lineHeightHeading4') as number; + break; + case 5: + detectedFontSize = getAliasToken('Typography', 'fontSizeHeading5') as number; + detectedLineHeight = getAliasToken('Typography', 'lineHeightHeading5') as number; + break; + default: + // fallback to level 1 if the level is invalid + detectedFontSize = getAliasToken('Typography', 'fontSizeHeading1') as number; + detectedLineHeight = getAliasToken('Typography', 'lineHeightHeading1') as number; + } + + const detectedHeight = detectedFontSize * detectedLineHeight; + + return detectedHeight; +}; diff --git a/src/atomics/Typography/TypographyTitle.tsx b/src/atomics/Typography/TypographyTitle.tsx index c9ceecd..ea0ecfa 100644 --- a/src/atomics/Typography/TypographyTitle.tsx +++ b/src/atomics/Typography/TypographyTitle.tsx @@ -2,12 +2,22 @@ import { forwardRef } from 'react'; import { Skeleton } from '../../molecules'; import { TypographyTitleStyles } from './styles'; import { RdTypographyTitleProps } from './types'; +import { detectHeightByLevel } from './TypographyTitle.helper'; export const TypographyTitle = forwardRef( (props: RdTypographyTitleProps, ref: RdTypographyTitleProps['ref']) => { const { disableMargin, loading, ...antdProps } = props; - if (loading) return ; + if (loading) { + return ( + + ); + } return ; } diff --git a/src/atomics/Typography/types.ts b/src/atomics/Typography/types.ts index 7322d35..2848fd7 100644 --- a/src/atomics/Typography/types.ts +++ b/src/atomics/Typography/types.ts @@ -67,4 +67,5 @@ export type RdTypographyTitleProps = TypographyTitleProps & TypographyTitleProps export type RdTypographyComponentToken = TypographyComponentTokenAntd & TypographyComponentTokenExtend; + //#endregion From bd045b2a2b4375c32ed912d576b15ea69b477b21 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Thu, 31 Jul 2025 13:25:01 +0700 Subject: [PATCH 25/32] fix: fix unnecessary rerender for Table --- src/molecules/Table/Table.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/molecules/Table/Table.tsx b/src/molecules/Table/Table.tsx index 8294b0e..bf9e00b 100644 --- a/src/molecules/Table/Table.tsx +++ b/src/molecules/Table/Table.tsx @@ -24,7 +24,9 @@ export const Table = ( }; }, [pagination, defaultPagination]); - const TableStyled = TableStyledFunc(); + const TableStyled = useMemo(() => { + return TableStyledFunc(); + }, [TableStyledFunc]); if (allowSort && props.rowKey) { const dataSource = antdProps.dataSource || []; From fa5870b3f6010d939a9d102a098ebffc387f412f Mon Sep 17 00:00:00 2001 From: Kenneth Date: Thu, 7 Aug 2025 07:51:46 +0700 Subject: [PATCH 26/32] fix: fix import barrel file --- src/atomics/Typography/TypographyText.helper.ts | 3 ++- src/atomics/Typography/TypographyTitle.helper.ts | 2 +- src/atomics/Typography/styles.tsx | 2 +- src/molecules/Button/token.ts | 12 ++++-------- src/molecules/Form/FormItemControl.tsx | 15 +++++++++------ src/templates/DashboardTemplate/styles.tsx | 2 +- src/utils/token.ts | 3 ++- 7 files changed, 20 insertions(+), 19 deletions(-) diff --git a/src/atomics/Typography/TypographyText.helper.ts b/src/atomics/Typography/TypographyText.helper.ts index 0b2ce42..3d00db4 100644 --- a/src/atomics/Typography/TypographyText.helper.ts +++ b/src/atomics/Typography/TypographyText.helper.ts @@ -1,4 +1,5 @@ -import { getAliasToken, RdAliasToken } from '../..'; +import { RdAliasToken } from '../../organisms'; +import { getAliasToken } from '../../utils'; import { RdTypographyTextProps } from './types'; /** diff --git a/src/atomics/Typography/TypographyTitle.helper.ts b/src/atomics/Typography/TypographyTitle.helper.ts index 942ab37..5c36838 100644 --- a/src/atomics/Typography/TypographyTitle.helper.ts +++ b/src/atomics/Typography/TypographyTitle.helper.ts @@ -1,4 +1,4 @@ -import { getAliasToken } from '../..'; +import { getAliasToken } from '../../utils'; import { RdTypographyTitleProps } from './types'; /** diff --git a/src/atomics/Typography/styles.tsx b/src/atomics/Typography/styles.tsx index 5e7440d..423b11e 100644 --- a/src/atomics/Typography/styles.tsx +++ b/src/atomics/Typography/styles.tsx @@ -1,9 +1,9 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { Typography } from 'antd'; -import { getAliasToken } from '../..'; import { getExcludeForwardProps } from '../../utils/styles'; import { RdTypographyParagraphProps, RdTypographyTextProps, RdTypographyTitleProps } from './types'; +import { getAliasToken } from '../../utils'; export const TypographyLinkStyles = styled(Typography.Link)``; diff --git a/src/molecules/Button/token.ts b/src/molecules/Button/token.ts index eb6df4d..1fb7546 100644 --- a/src/molecules/Button/token.ts +++ b/src/molecules/Button/token.ts @@ -1,14 +1,10 @@ import { ComponentToken as ButtonComponentTokenAntd } from 'antd/es/button/style'; import { prepareComponentToken } from 'antd/es/button/style/token'; import type { AliasToken } from 'antd/es/theme/interface'; -import { - ButtonComponentTokenExtend, - config, - RdAliasToken, - RdComponentTokenMap, - RdGetDefaultToken, - RdGetDefaultTokenFn, -} from '../..'; +import { config } from '../../config'; +import { RdAliasToken, RdComponentTokenMap } from '../../organisms'; +import { RdGetDefaultToken, RdGetDefaultTokenFn } from '../../utils'; +import { ButtonComponentTokenExtend } from './types'; export const rdPrepareComponentToken: RdGetDefaultToken<'Button'> = aliasToken => { // ⚠️ DO NOT modify this block. diff --git a/src/molecules/Form/FormItemControl.tsx b/src/molecules/Form/FormItemControl.tsx index 2cb36d3..e55317b 100644 --- a/src/molecules/Form/FormItemControl.tsx +++ b/src/molecules/Form/FormItemControl.tsx @@ -2,17 +2,17 @@ import { Form as AntdForm } from 'antd'; import { Children, cloneElement, isValidElement, ReactElement, ReactNode, useEffect } from 'react'; import { Control, + ControllerFieldState, + ControllerRenderProps, FieldPath, FieldValues, + PathValue, useController, - ControllerRenderProps, - ControllerFieldState, - UseFormStateReturn, useFormState, - PathValue, + UseFormStateReturn, } from 'react-hook-form'; import { FormItem } from './FormItem'; -import { RdFormItemProps } from '../..'; +import { RdFormItemProps } from './types'; // Define a type for child components that may have onChange and onBlur type ChildWithHandlers = { @@ -42,7 +42,10 @@ export type RdFormItemControlProps< defaultValue?: PathValue; overrideFieldOnChange?: (...values: any[]) => void; valuePropName?: string; -} & Omit; +} & Omit< + RdFormItemProps, + 'name' | 'rules' | 'validateStatus' | 'help' | 'errorMessage' | 'children' +>; export const FormItemControl = < TFieldValues extends FieldValues = FieldValues, diff --git a/src/templates/DashboardTemplate/styles.tsx b/src/templates/DashboardTemplate/styles.tsx index 4d621a4..70c3258 100644 --- a/src/templates/DashboardTemplate/styles.tsx +++ b/src/templates/DashboardTemplate/styles.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; -import { getAliasToken, getComponentToken } from '../..'; import { Layout } from '../../molecules'; +import { getAliasToken, getComponentToken } from '../../utils'; export const DashboardTemplateStyles = styled(Layout, { label: 'rd-dashboard-template', diff --git a/src/utils/token.ts b/src/utils/token.ts index 6219679..f4d3270 100644 --- a/src/utils/token.ts +++ b/src/utils/token.ts @@ -1,6 +1,7 @@ import type { TokenType } from '@ant-design/cssinjs'; import type { TokenMap, TokenMapKey } from '@ant-design/cssinjs-utils'; -import { config, RdAliasToken, RdComponentsConfig, RdComponentTokenMap, RdOverrideToken } from '..'; +import { RdAliasToken, RdComponentsConfig, RdComponentTokenMap } from '../organisms'; +import { config } from '../config'; export type RdGetDefaultTokenTypeUtil< CompTokenMap extends TokenMap, From 3249b0ca454161cbf59df9b83f868172f68668b9 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Thu, 7 Aug 2025 09:21:13 +0700 Subject: [PATCH 27/32] feature: Add SplitScreen template --- .../SplitScreenTemplate.tsx | 22 +++++++++ .../components/SplitPane/index.tsx | 19 ++++++++ .../components/SplitPane/styles.tsx | 6 +++ .../components/SplitPane/types.ts | 15 +++++++ src/templates/SplitScreenTemplate/index.tsx | 3 ++ src/templates/SplitScreenTemplate/styles.tsx | 45 +++++++++++++++++++ .../types.componentToken.ts | 3 ++ src/templates/SplitScreenTemplate/types.ts | 24 ++++++++++ src/templates/index.ts | 1 + src/templates/types.ts | 4 +- 10 files changed, 141 insertions(+), 1 deletion(-) create mode 100644 src/templates/SplitScreenTemplate/SplitScreenTemplate.tsx create mode 100644 src/templates/SplitScreenTemplate/components/SplitPane/index.tsx create mode 100644 src/templates/SplitScreenTemplate/components/SplitPane/styles.tsx create mode 100644 src/templates/SplitScreenTemplate/components/SplitPane/types.ts create mode 100644 src/templates/SplitScreenTemplate/index.tsx create mode 100644 src/templates/SplitScreenTemplate/styles.tsx create mode 100644 src/templates/SplitScreenTemplate/types.componentToken.ts create mode 100644 src/templates/SplitScreenTemplate/types.ts diff --git a/src/templates/SplitScreenTemplate/SplitScreenTemplate.tsx b/src/templates/SplitScreenTemplate/SplitScreenTemplate.tsx new file mode 100644 index 0000000..dfaa2be --- /dev/null +++ b/src/templates/SplitScreenTemplate/SplitScreenTemplate.tsx @@ -0,0 +1,22 @@ +import { forwardRef } from 'react'; +import { SplitScreenTemplateStyles } from './styles'; +import { RdSplitScreenTemplateComponent } from './types'; +import SplitPane from './components/SplitPane'; +import { Flex } from '../../atomics'; + +export const SplitScreenTemplate: RdSplitScreenTemplateComponent = forwardRef((props, ref) => { + const { children, leftPanelProps, rightPanelProps, ...antdProps } = props; + + return ( + + + {leftPanelProps && } + {rightPanelProps && } + + + ); +}); diff --git a/src/templates/SplitScreenTemplate/components/SplitPane/index.tsx b/src/templates/SplitScreenTemplate/components/SplitPane/index.tsx new file mode 100644 index 0000000..9d5d528 --- /dev/null +++ b/src/templates/SplitScreenTemplate/components/SplitPane/index.tsx @@ -0,0 +1,19 @@ +import { forwardRef } from 'react'; +import { SplitPaneWrapper } from './styles'; +import { RdSplitScreenTemplateSplitPaneComponent } from './types'; + +const SplitPane: RdSplitScreenTemplateSplitPaneComponent = forwardRef((props, ref) => { + const { children, render, ...restProps } = props; + + if (render) { + return render({ children, ...restProps }); + } + + return ( + + {children} + + ); +}); + +export default SplitPane; diff --git a/src/templates/SplitScreenTemplate/components/SplitPane/styles.tsx b/src/templates/SplitScreenTemplate/components/SplitPane/styles.tsx new file mode 100644 index 0000000..b080ab1 --- /dev/null +++ b/src/templates/SplitScreenTemplate/components/SplitPane/styles.tsx @@ -0,0 +1,6 @@ +import styled from '@emotion/styled'; +import { Layout } from '../../../..'; + +export const SplitPaneWrapper = styled(Layout.Content, { + label: 'rd-split-screen-split-pane', +})``; diff --git a/src/templates/SplitScreenTemplate/components/SplitPane/types.ts b/src/templates/SplitScreenTemplate/components/SplitPane/types.ts new file mode 100644 index 0000000..9af846b --- /dev/null +++ b/src/templates/SplitScreenTemplate/components/SplitPane/types.ts @@ -0,0 +1,15 @@ +import { RdContentProps, RdLayoutContentRef } from '../../../..'; + +//#region Define extended types +export type SplitScreenTemplateSplitPanePropsExtend = { + render?: (props: Omit) => React.ReactNode; +}; +//#endregion + +export type RdSplitScreenTemplateSplitPaneProps = RdContentProps & + SplitScreenTemplateSplitPanePropsExtend; +export type RdSplitScreenTemplateSplitPaneRef = RdLayoutContentRef & {}; + +export type RdSplitScreenTemplateSplitPaneComponent = React.ForwardRefExoticComponent< + RdSplitScreenTemplateSplitPaneProps & RdSplitScreenTemplateSplitPaneRef +>; diff --git a/src/templates/SplitScreenTemplate/index.tsx b/src/templates/SplitScreenTemplate/index.tsx new file mode 100644 index 0000000..8dadb69 --- /dev/null +++ b/src/templates/SplitScreenTemplate/index.tsx @@ -0,0 +1,3 @@ +export * from './SplitScreenTemplate'; +export * from './types'; +export * from './types.componentToken'; diff --git a/src/templates/SplitScreenTemplate/styles.tsx b/src/templates/SplitScreenTemplate/styles.tsx new file mode 100644 index 0000000..472e63f --- /dev/null +++ b/src/templates/SplitScreenTemplate/styles.tsx @@ -0,0 +1,45 @@ +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; +import { Layout } from '../../molecules'; +import { getAliasToken, getExcludeForwardProps } from '../../utils'; +import { RdSplitScreenTemplateProps } from './types'; + +export const SplitScreenTemplateStyles = styled(Layout, { + label: 'rd-split-screen-template', + shouldForwardProp: prop => + getExcludeForwardProps( + ['maxWidth'] as (keyof RdSplitScreenTemplateProps)[], + prop + ), +})` + ${() => { + return css` + background-color: ${getAliasToken('SplitScreenTemplate', 'colorPrimary')}; + `; + }} + + width: 100%; + height: 100vh; +`; + +export const SplitScreenTemplateContent = styled('div', { + label: 'rd-split-screen-template-content', + shouldForwardProp: prop => + getExcludeForwardProps( + ['maxWidth'] as (keyof RdSplitScreenTemplateProps)[], + prop + ), +})<{ maxWidth: number }>` + width: 100%; + margin: auto; + + ${({ maxWidth }) => { + return css` + max-width: ${maxWidth}px; + background-color: ${getAliasToken('SplitScreenTemplate', 'colorBgElevated')}; + padding: ${getAliasToken('SplitScreenTemplate', 'paddingContentVerticalLG')}px + ${getAliasToken('SplitScreenTemplate', 'paddingContentHorizontalLG')}px; + border-radius: ${getAliasToken('SplitScreenTemplate', 'borderRadius')}px; + `; + }} +`; diff --git a/src/templates/SplitScreenTemplate/types.componentToken.ts b/src/templates/SplitScreenTemplate/types.componentToken.ts new file mode 100644 index 0000000..a1929eb --- /dev/null +++ b/src/templates/SplitScreenTemplate/types.componentToken.ts @@ -0,0 +1,3 @@ +export type RdSplitScreenTemplateComponentToken = { + contentPadding: number | string; +}; diff --git a/src/templates/SplitScreenTemplate/types.ts b/src/templates/SplitScreenTemplate/types.ts new file mode 100644 index 0000000..d14c6f6 --- /dev/null +++ b/src/templates/SplitScreenTemplate/types.ts @@ -0,0 +1,24 @@ +import { RdLayoutProps, RdLayoutRef } from '../../molecules'; +import { RdSplitScreenTemplateSplitPaneProps } from './components/SplitPane/types'; + +//#region Define extended types +type SplitScreenTemplatePropsExtend = { + maxWidth?: number; + leftPanelProps?: RdSplitScreenTemplateSplitPaneProps | false; + rightPanelProps?: RdSplitScreenTemplateSplitPaneProps | false; +}; + +type SplitScreenTemplateRefExtend = {}; +//#endregion + +//#region Export types +export type RdSplitScreenTemplateProps = RdLayoutProps & SplitScreenTemplatePropsExtend; + +export type RdSplitScreenTemplateRef = RdLayoutRef & SplitScreenTemplateRefExtend; +//#endregion + +//#region Define component types +export type RdSplitScreenTemplateComponent = React.ForwardRefExoticComponent< + RdSplitScreenTemplateProps & RdSplitScreenTemplateRef +>; +//#endregion diff --git a/src/templates/index.ts b/src/templates/index.ts index 3cf3a53..e307846 100644 --- a/src/templates/index.ts +++ b/src/templates/index.ts @@ -1,2 +1,3 @@ export * from './CenteredTemplate'; export * from './DashboardTemplate'; +export * from './SplitScreenTemplate'; diff --git a/src/templates/types.ts b/src/templates/types.ts index 5907b8f..67ff4da 100644 --- a/src/templates/types.ts +++ b/src/templates/types.ts @@ -1,7 +1,9 @@ import { RdCenteredTemplateComponentToken } from './CenteredTemplate'; import { RdDashboardTemplateComponentToken } from './DashboardTemplate'; +import { RdSplitScreenTemplateComponentToken } from './SplitScreenTemplate'; export interface RdTemplatesTokenMap { CenteredTemplate?: RdCenteredTemplateComponentToken; - DashboardTemplate?: RdDashboardTemplateComponentToken + DashboardTemplate?: RdDashboardTemplateComponentToken; + SplitScreenTemplate?: RdSplitScreenTemplateComponentToken; } From bf095e5baa0088eef4f24898bdc6b63285a9a846 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Thu, 7 Aug 2025 09:22:45 +0700 Subject: [PATCH 28/32] feature: Detect Typography.Link Skeleton height during loading --- .../Typography/TypographyLink.helper.ts | 27 +++++++++++++++++++ src/atomics/Typography/TypographyLink.tsx | 14 ++++++++-- 2 files changed, 39 insertions(+), 2 deletions(-) create mode 100644 src/atomics/Typography/TypographyLink.helper.ts diff --git a/src/atomics/Typography/TypographyLink.helper.ts b/src/atomics/Typography/TypographyLink.helper.ts new file mode 100644 index 0000000..1d12936 --- /dev/null +++ b/src/atomics/Typography/TypographyLink.helper.ts @@ -0,0 +1,27 @@ +import { getAliasToken, RdAliasToken } from '../..'; +import { RdTypographyTextProps } from './types'; + +/** + * Calculates the height in pixels of a Typography `Link` component + * using the corresponding `fontSize` and `lineHeight` + * token values from the design token system. + * + * @returns The calculated height in pixels (`fontSize * lineHeight`). + * + * @example + * ```ts + * const height = getHeight(); + * console.log(height); // e.g. 18 (depends on token values) + * ``` + */ +export const getHeight = () => { + const detectedFontSize = getAliasToken('Typography', 'fontSize') as RdAliasToken['fontSize']; + const detectedLineHeight = getAliasToken( + 'Typography', + 'lineHeight' + ) as RdAliasToken['lineHeight']; + + const detectedHeight = detectedFontSize * detectedLineHeight; + + return detectedHeight; +}; diff --git a/src/atomics/Typography/TypographyLink.tsx b/src/atomics/Typography/TypographyLink.tsx index 061c45e..258fb6a 100644 --- a/src/atomics/Typography/TypographyLink.tsx +++ b/src/atomics/Typography/TypographyLink.tsx @@ -1,13 +1,23 @@ import { forwardRef } from 'react'; +import { Skeleton } from '../../molecules'; import { TypographyLinkStyles } from './styles'; import { RdTypographyLinkProps } from './types'; -import { Skeleton } from '../../molecules'; +import { getHeight } from './TypographyLink.helper'; export const TypographyLink = forwardRef( (props: RdTypographyLinkProps, ref: RdTypographyLinkProps['ref']) => { const { loading, ...antdProps } = props; - if (loading) return ; + if (loading) { + return ( + + ); + } return ; } From 545e81038a3d3db4c689bf3f83f0a2faaaaccffa Mon Sep 17 00:00:00 2001 From: Kenneth Date: Fri, 8 Aug 2025 14:29:20 +0700 Subject: [PATCH 29/32] fix: remove responseType prop in Switch molecule --- src/molecules/Switch/types.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/molecules/Switch/types.ts b/src/molecules/Switch/types.ts index e0a2202..5ca779d 100644 --- a/src/molecules/Switch/types.ts +++ b/src/molecules/Switch/types.ts @@ -10,12 +10,7 @@ type SwitchComponentTokenExtend = {}; //#endregion //#region Define extended types -type SwitchPropsExtend = { - /** - * The value type you want to get from the switch. Default is 'boolean'. - */ - responseType?: 'number' | 'boolean'; -}; +type SwitchPropsExtend = {}; //#endregion //#region Export types From be5ab072d299aab09f2ed3b9f6987762407167a5 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 7 Sep 2025 12:39:30 +0700 Subject: [PATCH 30/32] fix: Fix coumponded Upload component --- src/molecules/Upload/Upload.tsx | 9 +++++++-- src/molecules/Upload/index.ts | 3 +-- src/molecules/Upload/types.ts | 6 ++++++ 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/molecules/Upload/Upload.tsx b/src/molecules/Upload/Upload.tsx index 621ab86..0ebe4a9 100644 --- a/src/molecules/Upload/Upload.tsx +++ b/src/molecules/Upload/Upload.tsx @@ -2,9 +2,10 @@ import clsx from 'clsx'; import { forwardRef } from 'react'; import { UPLOAD_ROOT_CLASS_NAME } from './constants'; import { UploadStyled } from './styles'; -import { RdUploadComponent } from './types'; +import { RdUploadComponent, RdUploadCompoundedComponent } from './types'; +import { UploadDragger } from './UploadDragger'; -export const Upload: RdUploadComponent = forwardRef((props, ref) => { +export const UploadInternal: RdUploadComponent = forwardRef((props, ref) => { const { rootClassName, ...antProps } = props; return ( @@ -15,3 +16,7 @@ export const Upload: RdUploadComponent = forwardRef((props, ref) => { /> ); }); + +export const Upload = UploadInternal as RdUploadCompoundedComponent; + +Upload.Dragger = UploadDragger; diff --git a/src/molecules/Upload/index.ts b/src/molecules/Upload/index.ts index 4532490..685940f 100644 --- a/src/molecules/Upload/index.ts +++ b/src/molecules/Upload/index.ts @@ -1,4 +1,3 @@ -export * from './Upload'; -export * from './UploadDragger'; +export { Upload } from './Upload'; export * from './types'; diff --git a/src/molecules/Upload/types.ts b/src/molecules/Upload/types.ts index 6717466..b64517c 100644 --- a/src/molecules/Upload/types.ts +++ b/src/molecules/Upload/types.ts @@ -1,5 +1,6 @@ import { GetProps, Upload, UploadFile } from 'antd'; import { ComponentToken as UploadComponentTokenAntd } from 'antd/es/upload/style'; +import { UploadDragger } from './UploadDragger'; //#region Define Ant Design types type UploadProps = GetProps; @@ -27,4 +28,9 @@ export type RdUploadFile = UploadFile; //#region Define component types export type RdUploadComponent = React.ForwardRefExoticComponent; export type RdUploadDraggerComponent = React.ForwardRefExoticComponent; + +export type RdUploadCompoundedComponent = typeof Upload & { + Dragger: typeof UploadDragger; +}; + //#endregion From e890bd322ff12ba7b5715a1db7ffdc69b4706741 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 7 Sep 2025 12:43:31 +0700 Subject: [PATCH 31/32] build: update version 1.6.1 --- CHANGELOG.md | 30 ++++++++++++++++++++++++++++++ package.json | 4 ++-- 2 files changed, 32 insertions(+), 2 deletions(-) create mode 100644 CHANGELOG.md diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..d80595d --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,30 @@ +# Changelog + +All notable changes to this project will be documented in this file. + +The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), +and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). + +## [1.6.1] + +### Added + +- Add getAliasToken helper function. +- Add SplitScreen template. + +### Changed + +- + +### Fixed + +- Fix unnecessary rerender for Table. +- Fix UploadDragger to Upload.Dragger + +### Deprecated + +- Deprecate getComponentOrGlobalToken helper function. + +### Removed + +- Remove secondary, tertiary, quaternary color. diff --git a/package.json b/package.json index 1076024..de131d9 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "1byte-react-design", - "version": "1.5.11-1", - "main": "dist/index.js", + "version": "1.6.1", + "main": "src/index.tsx", "license": "MIT", "scripts": { "build": "webpack --config webpack.config.js", From 0f8d755850fc523b49eddb892581ab563b95ff0e Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 7 Sep 2025 12:44:59 +0700 Subject: [PATCH 32/32] build: update package.json --- package.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index de131d9..cccfe87 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,9 @@ { "name": "1byte-react-design", "version": "1.6.1", - "main": "src/index.tsx", + "main": "dist/index.js", + "module": "dist/index.js", + "types": "dist/index.d.ts", "license": "MIT", "scripts": { "build": "webpack --config webpack.config.js",