From 59f1f0db5c5425682c6e9f3785923562c58e372e Mon Sep 17 00:00:00 2001 From: Kenneth Date: Tue, 10 Dec 2024 10:13:20 +0700 Subject: [PATCH 01/84] feature: append typography --- src/atomics/Typography/Description.tsx | 12 ---- src/atomics/Typography/H1.tsx | 12 ---- src/atomics/Typography/H2.tsx | 12 ---- src/atomics/Typography/H3.tsx | 12 ---- src/atomics/Typography/H4.tsx | 12 ---- src/atomics/Typography/H5.tsx | 12 ---- src/atomics/Typography/H6.tsx | 12 ---- src/atomics/Typography/Text.tsx | 12 ---- src/atomics/Typography/Title.tsx | 12 ---- src/atomics/Typography/Typography.tsx | 11 ++++ src/atomics/Typography/TypographyLink.tsx | 14 ++++ .../Typography/TypographyParagraph.tsx | 14 ++++ src/atomics/Typography/TypographyText.tsx | 28 ++++++++ src/atomics/Typography/TypographyTitle.tsx | 14 ++++ src/atomics/Typography/index.ts | 9 --- src/atomics/Typography/index.tsx | 2 + src/atomics/Typography/styles.tsx | 39 +++-------- src/atomics/Typography/types.ts | 64 ++++++------------- 18 files changed, 112 insertions(+), 191 deletions(-) delete mode 100644 src/atomics/Typography/Description.tsx delete mode 100644 src/atomics/Typography/H1.tsx delete mode 100644 src/atomics/Typography/H2.tsx delete mode 100644 src/atomics/Typography/H3.tsx delete mode 100644 src/atomics/Typography/H4.tsx delete mode 100644 src/atomics/Typography/H5.tsx delete mode 100644 src/atomics/Typography/H6.tsx delete mode 100644 src/atomics/Typography/Text.tsx delete mode 100644 src/atomics/Typography/Title.tsx create mode 100644 src/atomics/Typography/Typography.tsx create mode 100644 src/atomics/Typography/TypographyLink.tsx create mode 100644 src/atomics/Typography/TypographyParagraph.tsx create mode 100644 src/atomics/Typography/TypographyText.tsx create mode 100644 src/atomics/Typography/TypographyTitle.tsx delete mode 100644 src/atomics/Typography/index.ts create mode 100644 src/atomics/Typography/index.tsx diff --git a/src/atomics/Typography/Description.tsx b/src/atomics/Typography/Description.tsx deleted file mode 100644 index 72b7864..0000000 --- a/src/atomics/Typography/Description.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { DescriptionWrapper } from './styles'; -import { IDescriptionProps } from './types'; - -export const Description = (props: IDescriptionProps) => { - const { children } = props; - return ( - - {children} - - ); -}; diff --git a/src/atomics/Typography/H1.tsx b/src/atomics/Typography/H1.tsx deleted file mode 100644 index 6a1a13c..0000000 --- a/src/atomics/Typography/H1.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { H1Wrapper } from './styles'; -import { IH1Props } from './types'; - -export const H1 = (props: IH1Props) => { - const { children } = props; - return ( - - {children} - - ); -}; diff --git a/src/atomics/Typography/H2.tsx b/src/atomics/Typography/H2.tsx deleted file mode 100644 index cc4b81b..0000000 --- a/src/atomics/Typography/H2.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { H2Wrapper } from './styles'; -import { IH2Props } from './types'; - -export const H2 = (props: IH2Props) => { - const { children } = props; - return ( - - {children} - - ); -}; diff --git a/src/atomics/Typography/H3.tsx b/src/atomics/Typography/H3.tsx deleted file mode 100644 index 148282c..0000000 --- a/src/atomics/Typography/H3.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { H3Wrapper } from './styles'; -import { IH3Props } from './types'; - -export const H3 = (props: IH3Props) => { - const { children } = props; - return ( - - {children} - - ); -}; diff --git a/src/atomics/Typography/H4.tsx b/src/atomics/Typography/H4.tsx deleted file mode 100644 index 25b36a8..0000000 --- a/src/atomics/Typography/H4.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { H4Wrapper } from './styles'; -import { IH4Props } from './types'; - -export const H4 = (props: IH4Props) => { - const { children } = props; - return ( - - {children} - - ); -}; diff --git a/src/atomics/Typography/H5.tsx b/src/atomics/Typography/H5.tsx deleted file mode 100644 index 7b4cad4..0000000 --- a/src/atomics/Typography/H5.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { H5Wrapper } from './styles'; -import { IH5Props } from './types'; - -export const H5 = (props: IH5Props) => { - const { children } = props; - return ( - - {children} - - ); -}; diff --git a/src/atomics/Typography/H6.tsx b/src/atomics/Typography/H6.tsx deleted file mode 100644 index 2434959..0000000 --- a/src/atomics/Typography/H6.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { H6Wrapper } from './styles'; -import { IH6Props } from './types'; - -export const H6 = (props: IH6Props) => { - const { children } = props; - return ( - - {children} - - ); -}; diff --git a/src/atomics/Typography/Text.tsx b/src/atomics/Typography/Text.tsx deleted file mode 100644 index 413ce93..0000000 --- a/src/atomics/Typography/Text.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { TextWrapper } from './styles'; -import { RdTextProps } from './types'; - -export const Text = (props: RdTextProps) => { - const { children } = props; - return ( - - {children} - - ); -}; diff --git a/src/atomics/Typography/Title.tsx b/src/atomics/Typography/Title.tsx deleted file mode 100644 index 9025154..0000000 --- a/src/atomics/Typography/Title.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { TitleWrapper } from './styles'; -import { ITitleProps } from './types'; - -export const Title = (props: ITitleProps) => { - const { children } = props; - return ( - - {children} - - ); -}; diff --git a/src/atomics/Typography/Typography.tsx b/src/atomics/Typography/Typography.tsx new file mode 100644 index 0000000..7a927a6 --- /dev/null +++ b/src/atomics/Typography/Typography.tsx @@ -0,0 +1,11 @@ +import { TypographyLink } from './TypographyLink'; +import { TypographyParagraph } from './TypographyParagraph'; +import { TypographyText } from './TypographyText'; +import { TypographyTitle } from './TypographyTitle'; + +export const Typography = { + Link: TypographyLink, + Paragraph: TypographyParagraph, + Text: TypographyText, + Title: TypographyTitle, +}; diff --git a/src/atomics/Typography/TypographyLink.tsx b/src/atomics/Typography/TypographyLink.tsx new file mode 100644 index 0000000..b961227 --- /dev/null +++ b/src/atomics/Typography/TypographyLink.tsx @@ -0,0 +1,14 @@ +import { forwardRef } from 'react'; +import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { TypographyLinkStyles } from './styles'; +import { RdTypographyLinkProps } from './types'; + +export const TypographyLink = forwardRef( + ({ ...antdProps }: RdTypographyLinkProps, ref: RdTypographyLinkProps['ref']) => { + return ( + + + + ); + } +); diff --git a/src/atomics/Typography/TypographyParagraph.tsx b/src/atomics/Typography/TypographyParagraph.tsx new file mode 100644 index 0000000..c536a64 --- /dev/null +++ b/src/atomics/Typography/TypographyParagraph.tsx @@ -0,0 +1,14 @@ +import { forwardRef } from 'react'; +import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { TypographyParagraphStyles } from './styles'; +import { RdTypographyParagraphProps } from './types'; + +export const TypographyParagraph = forwardRef( + ({ ...antdProps }: RdTypographyParagraphProps, ref: RdTypographyParagraphProps['ref']) => { + return ( + + + + ); + } +); diff --git a/src/atomics/Typography/TypographyText.tsx b/src/atomics/Typography/TypographyText.tsx new file mode 100644 index 0000000..2e77dc1 --- /dev/null +++ b/src/atomics/Typography/TypographyText.tsx @@ -0,0 +1,28 @@ +import { forwardRef, useMemo } from 'react'; +import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { TypographyTextStyles } from './styles'; +import { RdTypographyTextProps } from './types'; + +export const TypographyText = forwardRef( + (props: RdTypographyTextProps, ref: RdTypographyTextProps['ref']) => { + const { editable, autoFocus = false, onChange, ...antdProps } = props; + + const editableCustom = useMemo(() => { + if (editable && typeof editable === 'object') { + if (onChange) { + editable.onChange = onChange; + } + + return editable; + } + + return editable; + }, [editable]); + + return ( + + + + ); + } +); diff --git a/src/atomics/Typography/TypographyTitle.tsx b/src/atomics/Typography/TypographyTitle.tsx new file mode 100644 index 0000000..ebb8eff --- /dev/null +++ b/src/atomics/Typography/TypographyTitle.tsx @@ -0,0 +1,14 @@ +import { forwardRef } from 'react'; +import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { TypographyTitleStyles } from './styles'; +import { RdTypographyTitleProps } from './types'; + +export const TypographyTitle = forwardRef( + ({ ...antdProps }: RdTypographyTitleProps, ref: RdTypographyTitleProps['ref']) => { + return ( + + + + ); + } +); diff --git a/src/atomics/Typography/index.ts b/src/atomics/Typography/index.ts deleted file mode 100644 index 4da8f27..0000000 --- a/src/atomics/Typography/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -export * from './H1'; -export * from './H2'; -export * from './H3'; -export * from './H4'; -export * from './H5'; -export * from './H6'; -export * from "./Title"; -export * from "./Description"; -export * from "./Text"; \ No newline at end of file diff --git a/src/atomics/Typography/index.tsx b/src/atomics/Typography/index.tsx new file mode 100644 index 0000000..fc8acd1 --- /dev/null +++ b/src/atomics/Typography/index.tsx @@ -0,0 +1,2 @@ +export * from './Typography'; +export * from './types'; diff --git a/src/atomics/Typography/styles.tsx b/src/atomics/Typography/styles.tsx index afb9c13..4244120 100644 --- a/src/atomics/Typography/styles.tsx +++ b/src/atomics/Typography/styles.tsx @@ -1,33 +1,10 @@ import styled from '@emotion/styled'; -import { config } from '../..'; +import { Typography } from 'antd'; -export const H1Wrapper = styled.h1` - font-size: ${config.designToken.fontSizeHeading1}px; -`; -export const H2Wrapper = styled.h2` - font-size: ${config.designToken.fontSizeHeading2}px; -`; -export const H3Wrapper = styled.h3` - font-size: ${config.designToken.fontSizeHeading3}px; -`; -export const H4Wrapper = styled.h4` - font-size: ${config.designToken.fontSizeHeading4}px; -`; -export const H5Wrapper = styled.h5` - font-size: ${config.designToken.fontSizeHeading5}px; -`; -export const H6Wrapper = styled.h6` - font-size: ${config.designToken.fontSizeLG}px; -`; -export const TitleWrapper = styled.span` - font-size: ${config.designToken.fontSizeLG}px; - font-weight: ${config.designToken.fontWeightStrong}; -`; -export const TextWrapper = styled.span` - font-size: ${config.designToken.fontSize}; -`; -export const DescriptionWrapper = styled.span` - font-size: ${config.designToken.fontSizeSM}px; - color: ${config.designToken.colorTextDescription}; - font-style: italic; -`; +export const TypographyLinkStyles = styled(Typography.Link)``; + +export const TypographyTitleStyles = styled(Typography.Title)``; + +export const TypographyTextStyles = styled(Typography.Text)``; + +export const TypographyParagraphStyles = styled(Typography.Paragraph)``; diff --git a/src/atomics/Typography/types.ts b/src/atomics/Typography/types.ts index 6a2ce12..81a2011 100644 --- a/src/atomics/Typography/types.ts +++ b/src/atomics/Typography/types.ts @@ -1,48 +1,26 @@ -import { PropsWithChildren, ReactElement, ReactHTMLElement } from 'react'; - -export interface IBaseHProps extends PropsWithChildren {} +import { Typography, GetProps } from 'antd'; +import { ComponentToken } from 'antd/es/typography/style'; /** - * @description H1 component props + * @description Override TypographyComponentToken of antd. */ -export interface IH1Props extends IBaseHProps {} +export type TypographyComponentToken = ComponentToken & {}; + +type TypographyLinkProps = GetProps; +type TypographyTextProps = GetProps; +type TypographyTitleProps = GetProps; +type TypographyParagraphProps = GetProps; -export interface IH2Props extends IBaseHProps {} -export interface IH3Props extends IBaseHProps {} -export interface IH4Props extends IBaseHProps {} -export interface IH5Props extends IBaseHProps {} -export interface IH6Props extends IBaseHProps {} -export interface ITitleProps extends IBaseHProps {} +export interface RdTypographyLinkProps extends TypographyLinkProps {} +export interface RdTypographyTextProps extends Omit { + onChange?: (value: string) => void; +} +export interface RdTypographyTitleProps extends TypographyTitleProps {} +export interface RdTypographyParagraphProps extends TypographyParagraphProps {} -export type RdTextProps = IBaseHProps & { - /** - * Font weight for the text. - * Can be a number (100-900) or a string representing font weight name. - * Examples: "thin", "light", "bold", etc. - */ - weight?: - | 100 - | 200 - | 300 - | 400 - | 500 - | 600 - | 700 - | 800 - | 900 - | 'thin' - | 'extra-light' - | 'ultra-light' - | 'light' - | 'normal' - | 'regular' - | 'medium' - | 'semi-bold' - | 'demi-bold' - | 'bold' - | 'extra-bold' - | 'ultra-bold' - | 'black' - | 'heavy'; -}; -export interface IDescriptionProps extends IBaseHProps {} +export interface TypographyCompoundedComponent { + Link: RdTypographyLinkProps; + Text: RdTypographyTextProps; + Title: RdTypographyTitleProps; + Paragraph: RdTypographyParagraphProps; +} From 3aa4d0f00d35f96c97b5803d90952896c2b96edf Mon Sep 17 00:00:00 2001 From: Kenneth Date: Tue, 10 Dec 2024 10:13:42 +0700 Subject: [PATCH 02/84] feature: export typography atomics --- src/atomics/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/atomics/index.ts b/src/atomics/index.ts index 5c68272..9b75e56 100644 --- a/src/atomics/index.ts +++ b/src/atomics/index.ts @@ -1,3 +1,3 @@ export * from './Flex/index'; export * from './TextError/index'; -export * from './Typography/index'; +export * from './Typography'; From 549226af59689ad9c98397fff362bded1a5928be Mon Sep 17 00:00:00 2001 From: Kenneth Date: Tue, 10 Dec 2024 10:14:44 +0700 Subject: [PATCH 03/84] feature: add forward ref for button --- src/molecules/Button/Button.tsx | 64 ++++++++++++++++++--------------- 1 file changed, 35 insertions(+), 29 deletions(-) diff --git a/src/molecules/Button/Button.tsx b/src/molecules/Button/Button.tsx index 4126a33..ea3d1a2 100644 --- a/src/molecules/Button/Button.tsx +++ b/src/molecules/Button/Button.tsx @@ -1,4 +1,5 @@ -import { config, IRdComponentsConfig } from '../..'; +import { ForwardedRef, forwardRef } from 'react'; +import { config, RdComponentsConfig } from '../..'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { ButtonStyles } from './styles'; import { colorButtonExtend, RdButtonProps } from './types'; @@ -10,35 +11,40 @@ const isColorButtonExtend = ( return ['second', 'tertiary', 'quaternary'].includes(color); }; -export const Button = ({ width, color, to, ...antdProps }: RdButtonProps) => { - let newButtonDesignToken: IRdComponentsConfig['Button'] = { - ...config.componentToken?.Button, - algorithm: true, - }; +export const Button = forwardRef( + ( + { width, color, to, ...antdProps }: RdButtonProps, + ref: ForwardedRef + ) => { + let newButtonDesignToken: RdComponentsConfig['Button'] = { + ...config.componentToken?.Button, + algorithm: true, + }; - //#region Handle extend color props - if (color && isColorButtonExtend(color)) { - // Get design token config for color. - const designTokenConfig = useExtendColor(color); + //#region Handle extend color props + if (color && isColorButtonExtend(color)) { + // Get design token config for color. + const designTokenConfig = useExtendColor(color); - // Merge design token config with button design token. - newButtonDesignToken = { - ...newButtonDesignToken, - ...designTokenConfig, - }; + // Merge design token config with button design token. + newButtonDesignToken = { + ...newButtonDesignToken, + ...designTokenConfig, + }; - // Set color is primary if color include 'second', 'tertiary', 'quaternary' because these color is color primary in component token. - color = 'primary'; - } - //#endregion + // Set color is primary if color include 'second', 'tertiary', 'quaternary' because these color is color primary in component token. + color = 'primary'; + } + //#endregion - return ( - - - - ); -}; + return ( + + + + ); + } +); From 53497b6b74dc12aba452d4cd6e17e34b91b93930 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Tue, 10 Dec 2024 10:14:49 +0700 Subject: [PATCH 04/84] feature: add forward ref for checkbox --- src/molecules/Checkbox/CheckboxGroup.tsx | 39 +++++++++++++----------- 1 file changed, 22 insertions(+), 17 deletions(-) diff --git a/src/molecules/Checkbox/CheckboxGroup.tsx b/src/molecules/Checkbox/CheckboxGroup.tsx index 5c79cac..1c62d42 100644 --- a/src/molecules/Checkbox/CheckboxGroup.tsx +++ b/src/molecules/Checkbox/CheckboxGroup.tsx @@ -1,24 +1,29 @@ +import { forwardRef } from 'react'; import ConditionalWrapper from '../../atomics/ConditionalWrapper'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { LabelField } from '../LabelField'; import { CheckboxGroupStyles } from './styles'; import { RdCheckboxGroupProps } from './types'; -export const CheckboxGroup = ({ - label: labelFieldProps, - axis = 'horizontal', +export const CheckboxGroup = forwardRef( + (props: RdCheckboxGroupProps, ref: RdCheckboxGroupProps['ref']) => { + const { + label: labelFieldProps, + axis = 'horizontal', - ...antdProps -}: RdCheckboxGroupProps) => { - return ( - - - - - - ); -}; + ...antdProps + } = props; + + return ( + + + + + + ); + } +); From c9a6f20bb0049fb974a8efbb95cf27dfab97aeeb Mon Sep 17 00:00:00 2001 From: Kenneth Date: Tue, 10 Dec 2024 10:16:37 +0700 Subject: [PATCH 05/84] feature: merge Textarea and InputPassword to Input.Textarea and Input.Password --- src/molecules/Input/Input.tsx | 24 +++++++--- src/molecules/Input/InputControl.tsx | 15 ++++-- .../InputPassword.tsx | 18 ++++---- .../InputPasswordControl.tsx | 33 ++++++------- src/molecules/Input/InputTextArea.tsx | 24 ++++++++++ .../InputTextAreaControl.tsx} | 34 +++++++------- .../{TextArea/helpers.ts => Input/helper.ts} | 0 src/molecules/Input/index.ts | 11 ++++- src/molecules/Input/styles.tsx | 8 ++-- src/molecules/Input/types.ts | 46 ++++++++++++++++++- src/molecules/InputPassword/index.ts | 2 - src/molecules/InputPassword/styles.tsx | 7 --- src/molecules/InputPassword/types.ts | 10 ---- src/molecules/TextArea/TextArea.tsx | 26 ----------- src/molecules/TextArea/index.ts | 4 -- src/molecules/TextArea/styles.tsx | 10 ---- src/molecules/TextArea/types.ts | 8 ---- 17 files changed, 151 insertions(+), 129 deletions(-) rename src/molecules/{InputPassword => Input}/InputPassword.tsx (52%) rename src/molecules/{InputPassword => Input}/InputPasswordControl.tsx (50%) create mode 100644 src/molecules/Input/InputTextArea.tsx rename src/molecules/{TextArea/TextAreaControl.tsx => Input/InputTextAreaControl.tsx} (54%) rename src/molecules/{TextArea/helpers.ts => Input/helper.ts} (100%) delete mode 100644 src/molecules/InputPassword/index.ts delete mode 100644 src/molecules/InputPassword/styles.tsx delete mode 100644 src/molecules/InputPassword/types.ts delete mode 100644 src/molecules/TextArea/TextArea.tsx delete mode 100644 src/molecules/TextArea/index.ts delete mode 100644 src/molecules/TextArea/styles.tsx delete mode 100644 src/molecules/TextArea/types.ts diff --git a/src/molecules/Input/Input.tsx b/src/molecules/Input/Input.tsx index 658c319..3301741 100644 --- a/src/molecules/Input/Input.tsx +++ b/src/molecules/Input/Input.tsx @@ -1,15 +1,20 @@ import { InputProps } from 'antd'; +import { forwardRef } from 'react'; import ConditionalWrapper from '../../atomics/ConditionalWrapper'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { LabelField } from '../LabelField'; +import { InputPassword } from './InputPassword'; +import { InputTextArea } from './InputTextArea'; import { InputStyled } from './styles'; -import { RdInputProps } from './types'; +import { InputCompoundedComponent, RdInputProps } from './types'; -export const Input = ({ - label: labelFieldProps, +export const InputInternal = forwardRef((props: RdInputProps, ref: RdInputProps['ref']) => { + const { + label: labelFieldProps, + + ...antdProps + } = props; - ...antdProps -}: RdInputProps) => { return ( - + ); -}; +}); + +export const Input = InputInternal as InputCompoundedComponent; + +Input.Password = InputPassword; +Input.TextArea = InputTextArea; \ No newline at end of file diff --git a/src/molecules/Input/InputControl.tsx b/src/molecules/Input/InputControl.tsx index 686879a..e221faf 100644 --- a/src/molecules/Input/InputControl.tsx +++ b/src/molecules/Input/InputControl.tsx @@ -1,14 +1,18 @@ import { InputProps } from 'antd'; -import { useEffect } from 'react'; import { useController } from 'react-hook-form'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { TextError } from '../../atomics'; import ConditionalWrapper from '../../atomics/ConditionalWrapper'; import { LabelField } from '../LabelField'; +import { InputPasswordControl } from './InputPasswordControl'; +import { InputTextareaControl } from './InputTextAreaControl'; import { InputStyled } from './styles'; -import { RdInputControlProps } from './types'; +import { + InputControlCompoundedComponent, + RdInputControlProps +} from './types'; -export const InputControl = ({ +export const InputControlInternal = ({ name, control, defaultValue, @@ -45,3 +49,8 @@ export const InputControl = ({ ); }; + +export const InputControl = InputControlInternal as InputControlCompoundedComponent; + +InputControl.Password = InputPasswordControl; +InputControl.TextArea = InputTextareaControl; diff --git a/src/molecules/InputPassword/InputPassword.tsx b/src/molecules/Input/InputPassword.tsx similarity index 52% rename from src/molecules/InputPassword/InputPassword.tsx rename to src/molecules/Input/InputPassword.tsx index dbaf494..198033d 100644 --- a/src/molecules/InputPassword/InputPassword.tsx +++ b/src/molecules/Input/InputPassword.tsx @@ -2,7 +2,7 @@ import { InputProps } from 'antd'; import ConditionalWrapper from '../../atomics/ConditionalWrapper'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { LabelField } from '../LabelField'; -import { InputStyled, InputWrapper } from './styles'; +import { InputStyled } from './styles'; import { RdInputPasswordProps } from './types'; export const InputPassword = ({ @@ -12,15 +12,13 @@ export const InputPassword = ({ }: RdInputPasswordProps) => { return ( - - - - - + + + ); }; diff --git a/src/molecules/InputPassword/InputPasswordControl.tsx b/src/molecules/Input/InputPasswordControl.tsx similarity index 50% rename from src/molecules/InputPassword/InputPasswordControl.tsx rename to src/molecules/Input/InputPasswordControl.tsx index fc926ac..cae5528 100644 --- a/src/molecules/InputPassword/InputPasswordControl.tsx +++ b/src/molecules/Input/InputPasswordControl.tsx @@ -1,10 +1,9 @@ -import { InputProps } from 'antd'; import { useController } from 'react-hook-form'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { TextError } from '../../atomics'; import ConditionalWrapper from '../../atomics/ConditionalWrapper'; import { LabelField } from '../LabelField'; -import { InputStyled, InputWrapper } from './styles'; +import { InputPasswordStyled } from './styles'; import { RdInputPasswordControlProps } from './types'; export const InputPasswordControl = ({ @@ -27,22 +26,20 @@ export const InputPasswordControl = ({ return ( - - - - - {invalid && {error?.message}} - + + + + {invalid && {error?.message}} ); }; diff --git a/src/molecules/Input/InputTextArea.tsx b/src/molecules/Input/InputTextArea.tsx new file mode 100644 index 0000000..a09564e --- /dev/null +++ b/src/molecules/Input/InputTextArea.tsx @@ -0,0 +1,24 @@ +import { TextAreaProps } from 'antd/es/input'; +import ConditionalWrapper from '../../atomics/ConditionalWrapper'; +import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { LabelField } from '../LabelField'; +import { TextareaStyled } from './styles'; +import { RdInputTextareaProps } from './types'; + +export const InputTextArea = ({ + label: labelFieldProps, + + ...antdProps +}: RdInputTextareaProps) => { + return ( + + + + + + ); +}; diff --git a/src/molecules/TextArea/TextAreaControl.tsx b/src/molecules/Input/InputTextAreaControl.tsx similarity index 54% rename from src/molecules/TextArea/TextAreaControl.tsx rename to src/molecules/Input/InputTextAreaControl.tsx index ab151b4..8c5dfb6 100644 --- a/src/molecules/TextArea/TextAreaControl.tsx +++ b/src/molecules/Input/InputTextAreaControl.tsx @@ -4,10 +4,10 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { TextError } from '../../atomics'; import ConditionalWrapper from '../../atomics/ConditionalWrapper'; import { LabelField } from '../LabelField'; -import { TextareaStyled, TextareaWrapper } from './styles'; +import { TextareaStyled } from './styles'; import { RdTextareaControlProps } from './types'; -export const TextareaControl = ({ +export const InputTextareaControl = ({ name, control, @@ -32,22 +32,20 @@ export const TextareaControl = ({ return ( - - - - - {invalid && {error?.message}} - + + + + {invalid && {error?.message}} ); }; diff --git a/src/molecules/TextArea/helpers.ts b/src/molecules/Input/helper.ts similarity index 100% rename from src/molecules/TextArea/helpers.ts rename to src/molecules/Input/helper.ts diff --git a/src/molecules/Input/index.ts b/src/molecules/Input/index.ts index 25fa33d..9d42f5b 100644 --- a/src/molecules/Input/index.ts +++ b/src/molecules/Input/index.ts @@ -1,4 +1,11 @@ -export * from './Input'; -export * from './InputControl'; +export { Input } from './Input'; +export { InputControl } from './InputControl'; +export * from './InputPassword'; +export * from './InputPasswordControl'; + +export * from './InputPassword'; +export * from './InputPasswordControl'; + +export * from './helper'; export type * from './types'; \ No newline at end of file diff --git a/src/molecules/Input/styles.tsx b/src/molecules/Input/styles.tsx index 04b0155..4f20f6e 100644 --- a/src/molecules/Input/styles.tsx +++ b/src/molecules/Input/styles.tsx @@ -1,6 +1,8 @@ import styled from '@emotion/styled'; import { Input } from 'antd'; -export const InputStyled = styled(Input)` - width: 100%; -`; \ No newline at end of file +export const InputStyled = styled(Input)``; + +export const InputPasswordStyled = styled(Input.Password)``; + +export const TextareaStyled = styled(Input.TextArea)``; diff --git a/src/molecules/Input/types.ts b/src/molecules/Input/types.ts index 93a6eca..803252d 100644 --- a/src/molecules/Input/types.ts +++ b/src/molecules/Input/types.ts @@ -1,7 +1,51 @@ -import { InputProps } from 'antd'; +import { GetProps, Input } from 'antd'; +import { ComponentToken } from 'antd/es/input/style'; import { RdRegistryControlField } from '../../models'; import { RdLabelFieldWrapperProps } from '../LabelField/types'; +import { InputInternal } from './Input'; +import { InputControlInternal } from './InputControl'; +import { InputPassword } from './InputPassword'; +import { InputPasswordControl } from './InputPasswordControl'; +import { InputTextArea } from './InputTextArea'; +import { InputTextareaControl } from './InputTextAreaControl'; +/** + * @description Override InputComponentToken of antd. + */ +export type InputComponentToken = ComponentToken & {}; + +type InputProps = GetProps; +type PasswordProps = GetProps; +type TextAreaProps = GetProps; + +//#region Input export interface RdInputProps extends InputProps, RdLabelFieldWrapperProps {} export interface RdInputControlProps extends Omit, RdRegistryControlField {} +//#endregion + +//#region Input password +export interface RdInputPasswordProps extends PasswordProps, RdLabelFieldWrapperProps {} + +export interface RdInputPasswordControlProps + extends Omit, + RdRegistryControlField {} + +//#endregion + +//#region Input Textarea +export interface RdInputTextareaProps extends TextAreaProps, RdLabelFieldWrapperProps {} +export interface RdTextareaControlProps + extends Omit, + RdRegistryControlField {} +//#endregion + +export type InputCompoundedComponent = typeof InputInternal & { + Password: typeof InputPassword; + TextArea: typeof InputTextArea; +}; + +export type InputControlCompoundedComponent = typeof InputControlInternal & { + Password: typeof InputPasswordControl; + TextArea: typeof InputTextareaControl; +}; diff --git a/src/molecules/InputPassword/index.ts b/src/molecules/InputPassword/index.ts deleted file mode 100644 index e453aee..0000000 --- a/src/molecules/InputPassword/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './InputPassword'; -export * from './InputPasswordControl'; diff --git a/src/molecules/InputPassword/styles.tsx b/src/molecules/InputPassword/styles.tsx deleted file mode 100644 index 7b62644..0000000 --- a/src/molecules/InputPassword/styles.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import styled from '@emotion/styled'; -import { Input } from 'antd'; - -export const InputWrapper = styled.div``; -export const InputStyled = styled(Input.Password)` - width: 100%; -`; diff --git a/src/molecules/InputPassword/types.ts b/src/molecules/InputPassword/types.ts deleted file mode 100644 index c922374..0000000 --- a/src/molecules/InputPassword/types.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { InputProps } from 'antd'; -import { RdRegistryControlField } from '../../models'; -import { RdLabelFieldWrapperProps } from '../LabelField/types'; - -export interface RdInputPasswordProps extends InputProps, RdLabelFieldWrapperProps { -} - -export interface RdInputPasswordControlProps - extends Omit, - RdRegistryControlField {} diff --git a/src/molecules/TextArea/TextArea.tsx b/src/molecules/TextArea/TextArea.tsx deleted file mode 100644 index 19a4702..0000000 --- a/src/molecules/TextArea/TextArea.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { TextAreaProps } from 'antd/es/input'; -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { LabelField } from '../LabelField'; -import { TextareaStyled, TextareaWrapper } from './styles'; -import { RdTextareaProps } from './types'; - -export const TextArea = ({ - label: labelFieldProps, - - ...antdProps -}: RdTextareaProps) => { - return ( - - - - - - - - ); -}; diff --git a/src/molecules/TextArea/index.ts b/src/molecules/TextArea/index.ts deleted file mode 100644 index b43671d..0000000 --- a/src/molecules/TextArea/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export * from './TextArea'; -export * from './TextAreaControl'; -export * from "./types"; -export * from './helpers'; \ No newline at end of file diff --git a/src/molecules/TextArea/styles.tsx b/src/molecules/TextArea/styles.tsx deleted file mode 100644 index 09b7a08..0000000 --- a/src/molecules/TextArea/styles.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import styled from '@emotion/styled'; -import { Input } from 'antd'; - -const { TextArea } = Input; - -export const TextareaWrapper = styled.div``; - -export const TextareaStyled = styled(TextArea)` - width: 100%; -`; \ No newline at end of file diff --git a/src/molecules/TextArea/types.ts b/src/molecules/TextArea/types.ts deleted file mode 100644 index 0b8e3de..0000000 --- a/src/molecules/TextArea/types.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { TextAreaProps } from 'antd/es/input'; -import { RdRegistryControlField } from '../../models'; -import { RdLabelFieldWrapperProps } from '../LabelField/types'; - -export interface RdTextareaProps extends TextAreaProps, RdLabelFieldWrapperProps {} -export interface RdTextareaControlProps - extends Omit, - RdRegistryControlField {} From 2b8c8e9aecbb76deae4e0e7f5b9d36125c4481fc Mon Sep 17 00:00:00 2001 From: Kenneth Date: Tue, 10 Dec 2024 10:19:57 +0700 Subject: [PATCH 06/84] feature: add design token for each component --- src/atomics/Flex/types.ts | 10 +++++++++- src/molecules/Avatar/types.ts | 6 ++++++ src/molecules/Breadcrumb/types.ts | 6 ++++++ src/molecules/Button/types.ts | 15 ++++++++++++++- src/molecules/Card/types.ts | 9 +++++++++ src/molecules/Checkbox/types.ts | 12 ++++++++++-- src/molecules/Collapse/types.ts | 10 +++++++--- src/molecules/Divider/types.ts | 6 ++++++ src/molecules/Drawer/types.ts | 6 ++++++ src/molecules/Dropdown/types.ts | 6 ++++++ src/molecules/FloatButton/types.ts | 6 ++++++ src/molecules/Form/types.ts | 9 ++++++++- src/molecules/InputNumber/types.ts | 10 +++++++++- src/molecules/Layout/types.ts | 6 ++++++ src/molecules/List/types.ts | 28 ++++++++++++++++++++++------ src/molecules/Menu/types.ts | 10 +++++++--- src/molecules/Modal/types.ts | 10 +++++++--- src/molecules/Pagination/types.ts | 6 ++++++ src/molecules/Popover/types.ts | 6 ++++++ src/molecules/Radio/types.ts | 13 +++++++++++-- src/molecules/Select/types.ts | 9 +++++++++ src/molecules/Skeleton/types.ts | 6 ++++++ src/molecules/Slider/types.ts | 6 ++++++ src/molecules/Space/types.ts | 6 ++++++ src/molecules/Switch/types.ts | 10 +++++++++- src/molecules/Table/types.ts | 6 ++++++ src/molecules/Tabs/types.ts | 6 ++++++ src/molecules/Tooltip/types.ts | 10 +++++++++- src/organisms/App/types.ts | 9 +++++---- src/utils/styles.tsx | 14 ++++++++++++++ src/utils/token.ts | 19 ++++++++++++++++--- 31 files changed, 259 insertions(+), 32 deletions(-) diff --git a/src/atomics/Flex/types.ts b/src/atomics/Flex/types.ts index 84a576c..52b78e7 100644 --- a/src/atomics/Flex/types.ts +++ b/src/atomics/Flex/types.ts @@ -1,3 +1,11 @@ -import { FlexProps } from 'antd'; +import { Flex, GetProps } from 'antd'; +import { ComponentToken } from 'antd/es/flex/style'; + +/** + * @description Override FlexComponentToken of antd. + */ +export type FlexComponentToken = ComponentToken & {}; + +type FlexProps = GetProps; export interface IFlexProps extends FlexProps {} diff --git a/src/molecules/Avatar/types.ts b/src/molecules/Avatar/types.ts index bcb44e9..6783f74 100644 --- a/src/molecules/Avatar/types.ts +++ b/src/molecules/Avatar/types.ts @@ -1,4 +1,10 @@ import { AvatarProps } from 'antd'; +import { ComponentToken } from 'antd/es/avatar/style'; + +/** + * @description Override AvatarComponentToken of antd. + */ +export type AvatarComponentToken = ComponentToken & {}; type AvatarPropsExtend = {}; diff --git a/src/molecules/Breadcrumb/types.ts b/src/molecules/Breadcrumb/types.ts index 683f638..de7e446 100644 --- a/src/molecules/Breadcrumb/types.ts +++ b/src/molecules/Breadcrumb/types.ts @@ -1,4 +1,10 @@ import { BreadcrumbProps } from 'antd'; +import { ComponentToken } from 'antd/es/breadcrumb/style'; + +/** + * @description Override BreadcrumbComponentToken of antd. + */ +export type BreadcrumbComponentToken = ComponentToken & {}; type RdBreadcrumbPropsExtend = {}; diff --git a/src/molecules/Button/types.ts b/src/molecules/Button/types.ts index ecb219e..9cdf2db 100644 --- a/src/molecules/Button/types.ts +++ b/src/molecules/Button/types.ts @@ -1,4 +1,12 @@ -import { ButtonProps } from 'antd'; +import { Button, GetProps } from 'antd'; +import { ComponentToken } from 'antd/es/button/style'; + +type ButtonProps = GetProps; + +/** + * @description Override ButtonComponentToken of antd. + */ +export type ButtonComponentToken = ComponentToken & {}; /** * @description The color of the button extend. @@ -27,4 +35,9 @@ export interface RdButtonProps extends Omit { * @see Link */ to?: string; + + /** + * @description Align button. + */ + align?: 'left' | 'center' | 'right'; } diff --git a/src/molecules/Card/types.ts b/src/molecules/Card/types.ts index ce92300..50b1400 100644 --- a/src/molecules/Card/types.ts +++ b/src/molecules/Card/types.ts @@ -1,4 +1,13 @@ import { CardProps } from 'antd'; +import { ComponentToken } from 'antd/es/card/style'; + +/** + * @description Override CardComponentToken of antd. + */ +export type CardComponentToken = ComponentToken & { + customPadding?: string; + compactHeaderHeight?: string; +}; type RdCardPropsExtend = { /** diff --git a/src/molecules/Checkbox/types.ts b/src/molecules/Checkbox/types.ts index b142c9f..fcc9074 100644 --- a/src/molecules/Checkbox/types.ts +++ b/src/molecules/Checkbox/types.ts @@ -1,7 +1,15 @@ -import { CheckboxProps } from 'antd'; -import { CheckboxGroupProps } from 'antd/es/checkbox'; +import { Checkbox, GetProps } from 'antd'; import { RdRegistryControlField, TAxis } from '../../models'; import { RdLabelFieldWrapperProps } from '../LabelField/types'; +import { ComponentToken } from 'antd/es/checkbox/style'; + +type CheckboxProps = GetProps; +type CheckboxGroupProps = GetProps; + +/** + * @description Override CheckboxComponentToken of antd. + */ +export type CheckboxComponentToken = ComponentToken & {}; type RdCheckboxBaseProps = {}; diff --git a/src/molecules/Collapse/types.ts b/src/molecules/Collapse/types.ts index e6e2c40..5ce2c71 100644 --- a/src/molecules/Collapse/types.ts +++ b/src/molecules/Collapse/types.ts @@ -1,5 +1,9 @@ import { CollapseProps } from 'antd'; +import { ComponentToken } from 'antd/es/collapse/style'; -export interface RdCollapseProps extends CollapseProps { - -} +/** + * @description Override CollapseComponentToken of antd. + */ +export type CollapseComponentToken = ComponentToken & {}; + +export interface RdCollapseProps extends CollapseProps {} diff --git a/src/molecules/Divider/types.ts b/src/molecules/Divider/types.ts index 94c4619..b5fbc6b 100644 --- a/src/molecules/Divider/types.ts +++ b/src/molecules/Divider/types.ts @@ -1,3 +1,9 @@ import { DividerProps } from 'antd'; +import { ComponentToken } from 'antd/es/divider/style'; + +/** + * @description Override DividerComponentToken of antd. + */ +export type DividerComponentToken = ComponentToken & {}; export interface RdDividerProps extends DividerProps {} diff --git a/src/molecules/Drawer/types.ts b/src/molecules/Drawer/types.ts index 0e7eb1d..42970e1 100644 --- a/src/molecules/Drawer/types.ts +++ b/src/molecules/Drawer/types.ts @@ -1,3 +1,9 @@ import { DrawerProps } from 'antd'; +import { ComponentToken } from 'antd/es/drawer/style'; + +/** + * @description Override DrawerComponentToken of antd. + */ +export type DrawerComponentToken = ComponentToken & {}; export interface RdDrawerProps extends DrawerProps {} diff --git a/src/molecules/Dropdown/types.ts b/src/molecules/Dropdown/types.ts index 3aa40b0..4a4e054 100644 --- a/src/molecules/Dropdown/types.ts +++ b/src/molecules/Dropdown/types.ts @@ -1,5 +1,11 @@ import { DropdownProps, Dropdown } from 'antd'; import { DropdownButtonProps } from 'antd/es/dropdown'; +import { ComponentToken } from 'antd/es/dropdown/style'; + +/** + * @description Override DropdownComponentToken of antd. + */ +export type DropdownComponentToken = ComponentToken & {}; export interface RdDropdownProps extends DropdownProps {} diff --git a/src/molecules/FloatButton/types.ts b/src/molecules/FloatButton/types.ts index 2c8259b..88ce9dd 100644 --- a/src/molecules/FloatButton/types.ts +++ b/src/molecules/FloatButton/types.ts @@ -1,4 +1,10 @@ import { BackTopProps, FloatButtonGroupProps, FloatButtonProps } from 'antd'; +import { ComponentToken } from 'antd/es/float-button/style'; + +/** + * @description Override FloatButtonComponentToken of antd. + */ +export type FloatButtonComponentToken = ComponentToken & {}; export interface RdFloatButtonProps extends FloatButtonProps {} diff --git a/src/molecules/Form/types.ts b/src/molecules/Form/types.ts index 719c05d..49e8174 100644 --- a/src/molecules/Form/types.ts +++ b/src/molecules/Form/types.ts @@ -1,6 +1,13 @@ -import { Form } from 'antd'; import type { GetProps } from 'antd'; +import { Form } from 'antd'; +import { ComponentToken } from 'antd/es/form/style'; import { Control, FieldPath, FieldValues } from 'react-hook-form'; + +/** + * @description Override FormComponentToken of antd. + */ +export type FormComponentToken = ComponentToken & {}; + //#region Custom props /** diff --git a/src/molecules/InputNumber/types.ts b/src/molecules/InputNumber/types.ts index eba5f0d..2d86ecc 100644 --- a/src/molecules/InputNumber/types.ts +++ b/src/molecules/InputNumber/types.ts @@ -1,6 +1,14 @@ -import { InputNumberProps } from 'antd'; +import { GetProps, InputNumber } from 'antd'; import { RdRegistryControlField } from '../../models'; import { RdLabelFieldWrapperProps } from '../LabelField/types'; +import { ComponentToken } from 'antd/es/input-number/style'; + +/** + * @description Override InputNumberComponentToken of antd. + */ +export type InputNumberComponentToken = ComponentToken & {}; + +type InputNumberProps = GetProps; export interface RdInputNumberProps extends InputNumberProps, RdLabelFieldWrapperProps {} diff --git a/src/molecules/Layout/types.ts b/src/molecules/Layout/types.ts index 7cc8d7e..c72f8a9 100644 --- a/src/molecules/Layout/types.ts +++ b/src/molecules/Layout/types.ts @@ -1,4 +1,10 @@ import { LayoutProps, SiderProps } from 'antd'; +import { ComponentToken } from 'antd/es/layout/style'; + +/** + * @description Override LayoutComponentToken of antd. + */ +export type LayoutComponentToken = ComponentToken & {}; export interface RdLayoutProps extends LayoutProps {} export interface RdSiderProps extends SiderProps {} diff --git a/src/molecules/List/types.ts b/src/molecules/List/types.ts index 826ece3..ac35955 100644 --- a/src/molecules/List/types.ts +++ b/src/molecules/List/types.ts @@ -1,10 +1,26 @@ -// import { List } from 'antd'; -// import { ListItemMetaProps, ListItemTypeProps } from 'antd/es/list/Item'; +import { GetProps, List } from 'antd'; +import { ComponentToken } from 'antd/es/list/style'; +import { ListItemMeta } from './ListItemMeta'; -// type ListProps = typeof List; +type ListProps = GetProps; +type ListItemProps = GetProps; +type ListItemMetaProps = GetProps; -// export interface RdListProps extends ListProps {} +/** + * @description Override ListComponentToken of antd. + */ +export type ListComponentToken = ComponentToken & {}; -// export interface RdListItemProps extends ListItemTypeProps {} +export interface RdListProps extends ListProps {} -// export interface RdListItemMetaProps extends ListItemMetaProps {} +export interface RdListItemProps extends ListItemProps {} + +export interface RdListItemMetaProps extends ListItemMetaProps {} + +export type ListItemCompoundedComponent = React.FC & { + Meta: typeof ListItemMeta; +}; + +export type ListCompoundedComponent = React.FC & { + Item: ListItemCompoundedComponent; +}; diff --git a/src/molecules/Menu/types.ts b/src/molecules/Menu/types.ts index 9f45543..ab2b51c 100644 --- a/src/molecules/Menu/types.ts +++ b/src/molecules/Menu/types.ts @@ -1,5 +1,9 @@ import { MenuProps } from 'antd'; +import { ComponentToken } from 'antd/es/menu/style'; -export interface RdMenuProps extends MenuProps { - -} +/** + * @description Override MenuComponentToken of antd. + */ +export type MenuComponentToken = ComponentToken & {}; + +export interface RdMenuProps extends MenuProps {} diff --git a/src/molecules/Modal/types.ts b/src/molecules/Modal/types.ts index 604d0f9..812a217 100644 --- a/src/molecules/Modal/types.ts +++ b/src/molecules/Modal/types.ts @@ -1,5 +1,9 @@ import { ModalProps } from 'antd'; +import { ComponentToken } from 'antd/es/modal/style'; -export interface RdModalProps extends ModalProps { - -} +/** + * @description Override ModalComponentToken of antd. + */ +export type ModalComponentToken = ComponentToken & {}; + +export interface RdModalProps extends ModalProps {} diff --git a/src/molecules/Pagination/types.ts b/src/molecules/Pagination/types.ts index 5bc36e4..d6a2cb7 100644 --- a/src/molecules/Pagination/types.ts +++ b/src/molecules/Pagination/types.ts @@ -1,3 +1,9 @@ import { PaginationProps } from 'antd'; +import { ComponentToken } from 'antd/es/pagination/style'; + +/** + * @description Override PaginationComponentToken of antd. + */ +export type PaginationComponentToken = ComponentToken & {}; export interface RdPaginationProps extends PaginationProps {} diff --git a/src/molecules/Popover/types.ts b/src/molecules/Popover/types.ts index 713637d..2dac518 100644 --- a/src/molecules/Popover/types.ts +++ b/src/molecules/Popover/types.ts @@ -1,3 +1,9 @@ import { PopoverProps } from 'antd'; +import { ComponentToken } from 'antd/es/popover/style'; + +/** + * @description Override PopoverComponentToken of antd. + */ +export type PopoverComponentToken = ComponentToken & {}; export interface RdPopoverProps extends PopoverProps {} diff --git a/src/molecules/Radio/types.ts b/src/molecules/Radio/types.ts index 7d53b2b..83b0df9 100644 --- a/src/molecules/Radio/types.ts +++ b/src/molecules/Radio/types.ts @@ -1,7 +1,16 @@ -import { RadioGroupProps, RadioProps } from 'antd'; +import { GetProps, Radio } from 'antd'; +import { ComponentToken } from 'antd/es/radio/style'; import { RdRegistryControlField, TAxis } from '../../models'; import { RdLabelFieldWrapperProps } from '../LabelField/types'; -import { RadioButtonProps } from 'antd/es/radio/radioButton'; + +type RadioProps = GetProps; +type RadioGroupProps = GetProps; +type RadioButtonProps = GetProps; + +/** + * @description Override RadioComponentToken of antd. + */ +export type RadioComponentToken = ComponentToken & {}; //#region Radio export interface RdRadioProps extends RadioProps, RdLabelFieldWrapperProps {} diff --git a/src/molecules/Select/types.ts b/src/molecules/Select/types.ts index 77ca98c..8a69290 100644 --- a/src/molecules/Select/types.ts +++ b/src/molecules/Select/types.ts @@ -1,6 +1,13 @@ import { SelectProps } from 'antd'; import { RdRegistryControlField } from '../../models'; import { RdLabelFieldWrapperProps } from '../LabelField/types'; +import { BaseSelectRef } from 'rc-select/lib/BaseSelect'; +import { ComponentToken } from 'antd/es/select/style'; + +/** + * @description Override SelectComponentToken of antd. + */ +export type SelectComponentToken = ComponentToken & {}; /** * @description The variant of the select extend. @@ -36,3 +43,5 @@ export type RdSelectProps = Omit & RdLabelFieldWrapperProps; export type RdSelectControlProps = RdSelectProps & RdRegistryControlField; + +export type RdSelectRef = BaseSelectRef; diff --git a/src/molecules/Skeleton/types.ts b/src/molecules/Skeleton/types.ts index 25f2bd0..fbc53ac 100644 --- a/src/molecules/Skeleton/types.ts +++ b/src/molecules/Skeleton/types.ts @@ -1,4 +1,10 @@ import { SkeletonProps } from 'antd'; +import { ComponentToken } from 'antd/es/skeleton/style'; + +/** + * @description Override SkeletonComponentToken of antd. + */ +export type SkeletonComponentToken = ComponentToken & {}; export interface RdSkeletonProps extends SkeletonProps { diff --git a/src/molecules/Slider/types.ts b/src/molecules/Slider/types.ts index 136eba8..a4e82f3 100644 --- a/src/molecules/Slider/types.ts +++ b/src/molecules/Slider/types.ts @@ -1,5 +1,11 @@ import { SliderSingleProps } from 'antd'; import { SliderRangeProps } from 'antd/es/slider'; +import { ComponentToken } from 'antd/es/slider/style'; + +/** + * @description Override SliderComponentToken of antd. + */ +export type SliderComponentToken = ComponentToken & {}; export interface ISliderSingleProps extends SliderSingleProps {} export interface ISliderRangeProps extends SliderRangeProps {} diff --git a/src/molecules/Space/types.ts b/src/molecules/Space/types.ts index a4dfb1b..ded3829 100644 --- a/src/molecules/Space/types.ts +++ b/src/molecules/Space/types.ts @@ -1,4 +1,10 @@ import { SpaceProps } from 'antd'; +import { ComponentToken } from 'antd/es/space/style'; + +/** + * @description Override SpaceComponentToken of antd. + */ +export type SpaceComponentToken = ComponentToken & {}; export type RdSpaceProps = SpaceProps & { /** diff --git a/src/molecules/Switch/types.ts b/src/molecules/Switch/types.ts index 4e4467c..2e45559 100644 --- a/src/molecules/Switch/types.ts +++ b/src/molecules/Switch/types.ts @@ -1,6 +1,14 @@ -import { SwitchProps } from 'antd'; +import { GetProps, Switch } from 'antd'; import { RdRegistryControlField } from '../../models'; import { RdLabelFieldWrapperProps } from '../LabelField/types'; +import { ComponentToken } from 'antd/es/switch/style'; + +/** + * @description Override SwitchComponentToken of antd. + */ +export type SwitchComponentToken = ComponentToken & {}; + +type SwitchProps = GetProps; export interface RdSwitchProps extends SwitchProps, RdLabelFieldWrapperProps { /** diff --git a/src/molecules/Table/types.ts b/src/molecules/Table/types.ts index e97130b..d6f0113 100644 --- a/src/molecules/Table/types.ts +++ b/src/molecules/Table/types.ts @@ -1,4 +1,10 @@ import { TableProps } from 'antd'; import { AnyObject } from 'antd/es/_util/type'; +import { ComponentToken } from 'antd/es/table/style'; + +/** + * @description Override TableComponentToken of antd. + */ +export type TableComponentToken = ComponentToken & {}; export type RdTableProps = TableProps & {}; diff --git a/src/molecules/Tabs/types.ts b/src/molecules/Tabs/types.ts index 7391eed..80fa895 100644 --- a/src/molecules/Tabs/types.ts +++ b/src/molecules/Tabs/types.ts @@ -1,3 +1,9 @@ import { TabsProps } from 'antd'; +import { ComponentToken } from 'antd/es/tabs/style'; + +/** + * @description Override TabsComponentToken of antd. + */ +export type TabsComponentToken = ComponentToken & {}; export interface RdTabsProps extends TabsProps {} diff --git a/src/molecules/Tooltip/types.ts b/src/molecules/Tooltip/types.ts index 0be4dcd..05e512d 100644 --- a/src/molecules/Tooltip/types.ts +++ b/src/molecules/Tooltip/types.ts @@ -1,4 +1,12 @@ -import { Tooltip, TooltipProps } from 'antd'; +import { GetProps, Tooltip } from 'antd'; +import { ComponentToken } from 'antd/es/tooltip/style'; + +/** + * @description Override TooltipComponentToken of antd. + */ +export type TooltipComponentToken = ComponentToken & {}; + +type TooltipProps = GetProps; type TooltipPropsExtend = {}; diff --git a/src/organisms/App/types.ts b/src/organisms/App/types.ts index 4dc1290..39a82e0 100644 --- a/src/organisms/App/types.ts +++ b/src/organisms/App/types.ts @@ -1,8 +1,9 @@ import { OverrideTokenMap } from '@ant-design/cssinjs-utils'; import { ThemeConfig } from 'antd'; import { ArgsProps } from 'antd/es/notification'; -import { ComponentTokenMap, MappingAlgorithm } from 'antd/es/theme/interface'; +import { MappingAlgorithm } from 'antd/es/theme/interface'; import { AliasToken } from 'antd/es/theme/internal'; +import { RdComponentTokenMap } from '../../molecules/types'; export interface ISecondaryColor { colorSecondary: string; @@ -69,7 +70,7 @@ export interface IRdAliasToken extends AliasToken, IAdditionalColor { /** * @description Custom OverrideToken for RdAliasToken */ -export type OverrideToken = OverrideTokenMap; +export type OverrideToken = OverrideTokenMap; /** * @description ComponentsConfig in antd @@ -80,7 +81,7 @@ export type ComponentsConfig = { }; }; -export interface IRdComponentsConfig extends ComponentsConfig {} +export type RdComponentsConfig = ComponentsConfig & {}; export interface IRdThemeConfig extends ThemeConfig { /** @@ -93,7 +94,7 @@ export interface IRdThemeConfig extends ThemeConfig { * @desc Modify Component Token and Alias Token applied to components. * @override ComponentsConfig (antd) */ - components?: IRdComponentsConfig; + components?: RdComponentsConfig; } export interface IRdNotificationConfig { diff --git a/src/utils/styles.tsx b/src/utils/styles.tsx index a5b92b8..bf137b4 100644 --- a/src/utils/styles.tsx +++ b/src/utils/styles.tsx @@ -13,3 +13,17 @@ export const getAxisStyles = (axis?: TAxis) => { flex-direction: row; `; }; + +export const getExcludeForwardProps = ( + propsNotForward: (keyof T)[], + prop: string +) => { + return !propsNotForward.includes(prop as keyof T); +}; + +export const getIncludeForwardProps = ( + propsNotForward: (keyof T)[], + prop: string +) => { + return propsNotForward.includes(prop as keyof T); +}; diff --git a/src/utils/token.ts b/src/utils/token.ts index 159fa54..20348a8 100644 --- a/src/utils/token.ts +++ b/src/utils/token.ts @@ -1,5 +1,6 @@ -import { config } from '..'; -import { IRdAliasToken, IRdComponentsConfig } from '../organisms'; +import { config, IConfig } from '..'; +import { RdComponentTokenMap } from '../molecules/types'; +import { ComponentsConfig, IRdAliasToken, RdComponentsConfig } from '../organisms'; /** * Get the token value for a given component and alias name. @@ -10,7 +11,7 @@ import { IRdAliasToken, IRdComponentsConfig } from '../organisms'; * @returns The token value for the component or alias, or `undefined` if not found. */ export const getComponentOrGlobalToken = ( - componentName: keyof IRdComponentsConfig, + componentName: keyof RdComponentsConfig, aliasName: keyof IRdAliasToken ) => { const componentTokenValue = config.componentToken?.[componentName]?.[aliasName]; @@ -18,3 +19,15 @@ export const getComponentOrGlobalToken = ( return componentTokenValue !== undefined ? componentTokenValue : designTokenValue; }; + +export const getComponentToken = < + ComponentName extends keyof RdComponentTokenMap, + ComponentToken extends keyof NonNullable +>( + componentName: ComponentName, + componentToken: ComponentToken +): NonNullable[ComponentToken] | undefined => { + return (config.componentToken?.[componentName] as RdComponentTokenMap[ComponentName])?.[ + componentToken + ]; +}; From 7a962ddef2bdcb296f3717d3f8dbde6483a94254 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Tue, 10 Dec 2024 10:20:41 +0700 Subject: [PATCH 07/84] fix: type props name and add align prop custom --- src/molecules/Button/index.tsx | 3 ++- src/molecules/Button/styles.tsx | 7 ++++--- src/molecules/Button/useExtendColor.ts | 4 ++-- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/molecules/Button/index.tsx b/src/molecules/Button/index.tsx index 3bfe014..2c9777d 100644 --- a/src/molecules/Button/index.tsx +++ b/src/molecules/Button/index.tsx @@ -1 +1,2 @@ -export * from "./Button"; \ No newline at end of file +export * from "./Button"; +export * from "./types"; \ No newline at end of file diff --git a/src/molecules/Button/styles.tsx b/src/molecules/Button/styles.tsx index 5b2fe01..d23f36b 100644 --- a/src/molecules/Button/styles.tsx +++ b/src/molecules/Button/styles.tsx @@ -1,8 +1,9 @@ import styled from '@emotion/styled'; import { Button } from 'antd'; +import { RdButtonProps } from './types'; -export const ButtonStyles = styled(Button)<{ - width?: string | number; -}>` +export const ButtonStyles = styled(Button)` ${({ width }) => width && `width: ${width};`} + + ${({ align }) => align && `justify-content: ${align};`} `; diff --git a/src/molecules/Button/useExtendColor.ts b/src/molecules/Button/useExtendColor.ts index 44ab766..069af14 100644 --- a/src/molecules/Button/useExtendColor.ts +++ b/src/molecules/Button/useExtendColor.ts @@ -1,8 +1,8 @@ -import { config, IRdComponentsConfig } from '../..'; +import { config, RdComponentsConfig } from '../..'; import { colorButtonExtend } from './types'; export const useExtendColor = (color: colorButtonExtend) => { - const newComponentsButton: IRdComponentsConfig['Button'] = {}; + const newComponentsButton: RdComponentsConfig['Button'] = {}; switch (color) { case 'second': From b9d04245ee8e0ec42ff596c0ef4c363de273552c Mon Sep 17 00:00:00 2001 From: Kenneth Date: Tue, 10 Dec 2024 10:21:08 +0700 Subject: [PATCH 08/84] fix: variant style prop for button molecule --- src/molecules/Card/Card.tsx | 10 +++- src/molecules/Card/styles.tsx | 108 ++++++++++++++++------------------ 2 files changed, 58 insertions(+), 60 deletions(-) diff --git a/src/molecules/Card/Card.tsx b/src/molecules/Card/Card.tsx index 4cd2962..2f681f8 100644 --- a/src/molecules/Card/Card.tsx +++ b/src/molecules/Card/Card.tsx @@ -1,11 +1,17 @@ +import clsx from 'clsx'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { CardStyles } from './styles'; import { RdCardProps } from './types'; -export const Card = ({ ...antdProps }: RdCardProps) => { +export const Card = ({ className, variant = 'default', ...antdProps }: RdCardProps) => { + const variantClass: Record, string> = { + compact: 'rd-card-variant-compact', + default: '', + }; + return ( - + ); }; diff --git a/src/molecules/Card/styles.tsx b/src/molecules/Card/styles.tsx index e732722..b37397d 100644 --- a/src/molecules/Card/styles.tsx +++ b/src/molecules/Card/styles.tsx @@ -1,65 +1,57 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { Card } from 'antd'; -import { getComponentOrGlobalToken } from '../../utils/token'; +import { getExcludeForwardProps } from '../../utils/styles'; +import { getComponentOrGlobalToken, getComponentToken } from '../../utils/token'; import { RdCardProps } from './types'; -import { config } from '../..'; -export const CardStyles = styled(Card)` - /* Handle variant prop */ - ${({ variant, title }) => { - switch (variant) { - case 'compact': - return css` - ${!title && - css` - .ant-card-body { - // #FIXED: 10px is a magic number - border-top: 10px solid ${config.componentToken?.Card?.headerBg}; - - border-radius: ${getComponentOrGlobalToken('Card', 'borderRadiusLG')}px; - } - `} - - &.ant-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; - } - - .ant-card-head { - display: inline-flex; - } - - .ant-card-body { - background-color: ${getComponentOrGlobalToken('Card', 'colorBgContainer')}; - } - - &.ant-card-bordered { - border: none; - - .ant-card-body { - border-width: ${getComponentOrGlobalToken('Card', 'lineWidth')}px; - border-color: ${getComponentOrGlobalToken( - 'Card', - 'colorBorderSecondary' - )}; - } - } - - &:not(.ant-card-bordered) { - box-shadow: none; - - .ant-card-body { - box-shadow: ${getComponentOrGlobalToken('Card', 'boxShadowTertiary')}; - } - } - `; - case 'default': - return null; +export const CardStyles = styled(Card, { + shouldForwardProp: prop => + getExcludeForwardProps(['variant'] as (keyof RdCardProps)[], prop), +})` + ${() => css` + // Variant compact class + &.rd-card-variant-compact { + &.ant-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; + } + + &:not(:has(> .ant-card-head)) { + > .ant-card-body { + border-top: 10px solid ${getComponentToken('Card', 'headerBg')}; + border-radius: ${getComponentOrGlobalToken('Card', 'borderRadiusLG')}px; + } + } + + > .ant-card-head { + display: inline-flex; + } + + > .ant-card-body { + background-color: ${getComponentOrGlobalToken('Card', 'colorBgContainer')}; + } + + &.ant-card-bordered { + border: none; + + > .ant-card-body { + border-width: ${getComponentOrGlobalToken('Card', 'lineWidth')}px; + border-color: ${getComponentOrGlobalToken('Card', 'colorBorderSecondary')}; + } + } + + &:not(.ant-card-bordered) { + box-shadow: none; + + > .ant-card-body { + box-shadow: ${getComponentOrGlobalToken('Card', 'boxShadowTertiary')}; + } + } } - }} + `} `; From c21f2c0404609137cc07f9653a4af16dcfa1d416 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Tue, 10 Dec 2024 10:21:33 +0700 Subject: [PATCH 09/84] refactor: function --- src/molecules/Checkbox/Checkbox.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/molecules/Checkbox/Checkbox.tsx b/src/molecules/Checkbox/Checkbox.tsx index 99181a9..dde04b8 100644 --- a/src/molecules/Checkbox/Checkbox.tsx +++ b/src/molecules/Checkbox/Checkbox.tsx @@ -5,11 +5,13 @@ import { CheckboxGroup } from './CheckboxGroup'; import { CheckboxStyles } from './styles'; import { RdCheckboxProps } from './types'; -export const Checkbox = ({ - label: labelFieldProps, +export const Checkbox = (props: RdCheckboxProps) => { + const { + label: labelFieldProps, + + ...antdProps + } = props; - ...antdProps -}: RdCheckboxProps) => { return ( Date: Tue, 10 Dec 2024 10:21:58 +0700 Subject: [PATCH 10/84] feature: add block prop for Form.Item and Form.ItemControl --- src/molecules/Form/FormItemReactHookForm.tsx | 13 +++++++------ src/molecules/Form/styles.tsx | 13 ++++++++++++- 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/src/molecules/Form/FormItemReactHookForm.tsx b/src/molecules/Form/FormItemReactHookForm.tsx index 520dcda..f6824c8 100644 --- a/src/molecules/Form/FormItemReactHookForm.tsx +++ b/src/molecules/Form/FormItemReactHookForm.tsx @@ -1,7 +1,8 @@ -import { FieldValues, useController } from 'react-hook-form'; -import { FormItemProps } from './types'; import { Form as AntdForm } from 'antd'; import { Children, cloneElement, isValidElement, useEffect } from 'react'; +import { FieldValues, useController } from 'react-hook-form'; +import { FormItemStyles } from './styles'; +import { FormItemProps } from './types'; export const FormItemReactHookForm = ({ children, @@ -22,9 +23,8 @@ export const FormItemReactHookForm = { child.props.onChange && child.props.onChange(...params); + overrideFieldOnChange - ? overrideFieldOnChange(...params) + ? overrideFieldOnChange(...params, field) : field.onChange(...params); }, //@ts-expect-error onBlur type safe is not necessary here @@ -53,6 +54,6 @@ export const FormItemReactHookForm = + ); }; diff --git a/src/molecules/Form/styles.tsx b/src/molecules/Form/styles.tsx index 40d392a..d6d72d0 100644 --- a/src/molecules/Form/styles.tsx +++ b/src/molecules/Form/styles.tsx @@ -1,5 +1,16 @@ +import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { Form } from 'antd'; +import { getExcludeForwardProps } from '../../utils/styles'; +import { RdFormItemProps } from './types'; export const FormStyles = styled(Form)``; -export const FormItemStyles = styled(Form.Item)``; \ No newline at end of file +export const FormItemStyles = styled(Form.Item, { + shouldForwardProp: prop => getExcludeForwardProps(['block'], prop), +})` + ${({ block }) => + block && + css` + width: 100%; + `} +`; From 63e83644f404718a370e0a8e947bb3164f80e45a Mon Sep 17 00:00:00 2001 From: Kenneth Date: Tue, 10 Dec 2024 10:22:12 +0700 Subject: [PATCH 11/84] feature: add forward ref for InputNumber molecule --- src/molecules/InputNumber/InputNumber.tsx | 40 +++++++++++++---------- 1 file changed, 22 insertions(+), 18 deletions(-) diff --git a/src/molecules/InputNumber/InputNumber.tsx b/src/molecules/InputNumber/InputNumber.tsx index 307631c..a19dff0 100644 --- a/src/molecules/InputNumber/InputNumber.tsx +++ b/src/molecules/InputNumber/InputNumber.tsx @@ -4,23 +4,27 @@ import { LabelField } from '../LabelField'; import { InputNumberStyled, InputWrapper } from './styles'; import { RdInputNumberProps } from './types'; import ConditionalWrapper from '../../atomics/ConditionalWrapper'; +import { forwardRef } from 'react'; -export const InputNumber = ({ - label: labelFieldProps, +export const InputNumber = forwardRef( + (props: RdInputNumberProps, ref: RdInputNumberProps['ref']) => { + const { + label: labelFieldProps, - ...antdProps -}: RdInputNumberProps) => { - return ( - - - - - - - - ); -}; + ...antdProps + } = props; + return ( + + + + + + + + ); + } +); From 275742414eef8da48fbe117c7d4c0b196ef8c1e0 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Tue, 10 Dec 2024 10:22:46 +0700 Subject: [PATCH 12/84] fix: remove redundant log --- src/molecules/LabelField/LabelField.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/molecules/LabelField/LabelField.tsx b/src/molecules/LabelField/LabelField.tsx index e89fb9c..65ab982 100644 --- a/src/molecules/LabelField/LabelField.tsx +++ b/src/molecules/LabelField/LabelField.tsx @@ -16,8 +16,6 @@ export const LabelField = (props: RdLabelFieldProps & PropsWithChildren) => { children, } = props; - console.log('Rerender labelField'); - return ( Date: Tue, 10 Dec 2024 10:23:01 +0700 Subject: [PATCH 13/84] feature: add List molecule --- src/molecules/List/Item.tsx | 14 -------------- src/molecules/List/List.tsx | 26 ++++++++++++-------------- src/molecules/List/ListItem.tsx | 14 ++++++++++++++ src/molecules/List/ListItemMeta.tsx | 11 +++++++++++ src/molecules/List/Meta.tsx | 11 ----------- src/molecules/List/index.tsx | 4 ++-- src/molecules/List/styles.tsx | 10 +++++----- 7 files changed, 44 insertions(+), 46 deletions(-) delete mode 100644 src/molecules/List/Item.tsx create mode 100644 src/molecules/List/ListItem.tsx create mode 100644 src/molecules/List/ListItemMeta.tsx delete mode 100644 src/molecules/List/Meta.tsx diff --git a/src/molecules/List/Item.tsx b/src/molecules/List/Item.tsx deleted file mode 100644 index 5028811..0000000 --- a/src/molecules/List/Item.tsx +++ /dev/null @@ -1,14 +0,0 @@ -// import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -// import { Meta } from './Meta'; -// import { ItemStyles } from './styles'; -// import { RdListItemProps, RdListProps } from './types'; - -// export const Item = ({ ...antdProps }: RdListItemProps) => { -// return ( -// -// -// -// ); -// }; - -// Item.Meta = Meta; diff --git a/src/molecules/List/List.tsx b/src/molecules/List/List.tsx index 23ff5c4..a6c7142 100644 --- a/src/molecules/List/List.tsx +++ b/src/molecules/List/List.tsx @@ -1,16 +1,14 @@ -// import { ListProps } from 'antd'; -// import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -// import { Item } from './Item'; -// import { ListStyles } from './styles'; -// import { RdListProps } from './types'; +import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { ListItem } from './ListItem'; +import { ListStyles } from './styles'; +import { ListCompoundedComponent, RdListProps } from './types'; -// export const List = ({ ...antdProps }: any) => { -// return ( -// -// -// -// ); -// }; +export const List: ListCompoundedComponent = ({ ...antdProps }: RdListProps) => { + return ( + + + + ); +}; - -// List.Item = Item; \ No newline at end of file +List.Item = ListItem; diff --git a/src/molecules/List/ListItem.tsx b/src/molecules/List/ListItem.tsx new file mode 100644 index 0000000..b1de2a7 --- /dev/null +++ b/src/molecules/List/ListItem.tsx @@ -0,0 +1,14 @@ +import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { ListItemMeta } from './ListItemMeta'; +import { ListItemStyles } from './styles'; +import { ListItemCompoundedComponent, RdListItemProps } from './types'; + +export const ListItem: ListItemCompoundedComponent = ({ ...antdProps }: RdListItemProps) => { + return ( + + + + ); +}; + +ListItem.Meta = ListItemMeta; diff --git a/src/molecules/List/ListItemMeta.tsx b/src/molecules/List/ListItemMeta.tsx new file mode 100644 index 0000000..7ffcc76 --- /dev/null +++ b/src/molecules/List/ListItemMeta.tsx @@ -0,0 +1,11 @@ +import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { ListItemMetaStyles } from './styles'; +import { RdListItemMetaProps } from './types'; + +export const ListItemMeta = ({ ...antdProps }: RdListItemMetaProps) => { + return ( + + + + ); +}; diff --git a/src/molecules/List/Meta.tsx b/src/molecules/List/Meta.tsx deleted file mode 100644 index e3ad008..0000000 --- a/src/molecules/List/Meta.tsx +++ /dev/null @@ -1,11 +0,0 @@ -// import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -// import { MetaStyles } from './styles'; -// import { RdListProps } from './types'; - -// export const Meta = ({ ...antdProps }: RdListProps) => { -// return ( -// -// -// -// ); -// }; diff --git a/src/molecules/List/index.tsx b/src/molecules/List/index.tsx index 6701a0d..9921ed8 100644 --- a/src/molecules/List/index.tsx +++ b/src/molecules/List/index.tsx @@ -1,2 +1,2 @@ -// export * from './List'; -// export * from './types'; \ No newline at end of file +export * from './List'; +export * from './types'; \ No newline at end of file diff --git a/src/molecules/List/styles.tsx b/src/molecules/List/styles.tsx index ac84865..0c73627 100644 --- a/src/molecules/List/styles.tsx +++ b/src/molecules/List/styles.tsx @@ -1,8 +1,8 @@ -// import styled from '@emotion/styled'; -// import { List } from 'antd'; +import styled from '@emotion/styled'; +import { List } from 'antd'; -// export const ListStyles = styled(List)``; +export const ListStyles = styled(List)``; -// export const ItemStyles = styled(List.Item)``; +export const ListItemStyles = styled(List.Item)``; -// export const MetaStyles = styled(List.Item.Meta)``; +export const ListItemMetaStyles = styled(List.Item.Meta)``; From fdc7650218cb8f29ee9be7361daef5ea8ade0adc Mon Sep 17 00:00:00 2001 From: Kenneth Date: Tue, 10 Dec 2024 10:23:17 +0700 Subject: [PATCH 14/84] feature: export type for Pagination molecule --- src/molecules/Pagination/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/molecules/Pagination/index.ts b/src/molecules/Pagination/index.ts index e016c96..8d9c70f 100644 --- a/src/molecules/Pagination/index.ts +++ b/src/molecules/Pagination/index.ts @@ -1 +1,2 @@ export * from './Pagination'; +export * from './types'; From 4e0d55e0ac1107aad2b3c52dd718e9e8088913d5 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Tue, 10 Dec 2024 10:23:37 +0700 Subject: [PATCH 15/84] feature: add forward ref for RadioGroup molecule --- src/molecules/Radio/RadioGroup.tsx | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/molecules/Radio/RadioGroup.tsx b/src/molecules/Radio/RadioGroup.tsx index bc1be07..cd35def 100644 --- a/src/molecules/Radio/RadioGroup.tsx +++ b/src/molecules/Radio/RadioGroup.tsx @@ -1,16 +1,19 @@ import { RadioGroupProps } from 'antd'; +import { forwardRef } from 'react'; import ConditionalWrapper from '../../atomics/ConditionalWrapper'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { LabelField } from '../LabelField'; import { RadioGroupStyles } from './styles'; import { RdRadioGroupProps } from './types'; -export const RadioGroup = ({ - label: labelFieldProps, - axis = 'horizontal', +export const RadioGroup = forwardRef((props: RdRadioGroupProps, ref: RdRadioGroupProps['ref']) => { + const { + label: labelFieldProps, + axis = 'horizontal', + + ...antdProps + } = props; - ...antdProps -}: RdRadioGroupProps) => { return ( - + ); -}; +}); From aef3ad6400e914a40803f9297f3eca5becceb7e9 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Tue, 10 Dec 2024 10:24:01 +0700 Subject: [PATCH 16/84] feature: add custom component token for RangePicker molecule --- src/molecules/RangePicker/types.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/molecules/RangePicker/types.ts b/src/molecules/RangePicker/types.ts index 2f9ecb0..a9f655c 100644 --- a/src/molecules/RangePicker/types.ts +++ b/src/molecules/RangePicker/types.ts @@ -1,6 +1,12 @@ import { RangePickerProps } from 'antd/es/date-picker'; import { IRegistryRangePickerControlField } from '../../models'; import { RdLabelFieldWrapperProps } from '../LabelField/types'; +import { ComponentToken } from 'antd/es/date-picker/style'; + +/** + * @description Override DatePickerComponentToken of antd. + */ +export type DatePickerComponentToken = ComponentToken & {}; export interface RdRangePickerProps extends RangePickerProps, RdLabelFieldWrapperProps {} From dc583ed3ffbf099188d13e19528901a004eee94b Mon Sep 17 00:00:00 2001 From: Kenneth Date: Tue, 10 Dec 2024 10:24:32 +0700 Subject: [PATCH 17/84] feature: add forward ref and fix type name for Select molecule --- src/molecules/Select/Select.tsx | 117 +++++++++++----------- src/molecules/Select/useExtendVariant.tsx | 4 +- 2 files changed, 61 insertions(+), 60 deletions(-) diff --git a/src/molecules/Select/Select.tsx b/src/molecules/Select/Select.tsx index cfd96b5..e7302c6 100644 --- a/src/molecules/Select/Select.tsx +++ b/src/molecules/Select/Select.tsx @@ -1,13 +1,13 @@ import { Select as SelectAntd, SelectProps } from 'antd'; +import { forwardRef, LegacyRef, RefAttributes } from 'react'; +import { config } from '../..'; import ConditionalWrapper from '../../atomics/ConditionalWrapper'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { RdComponentsConfig } from '../../organisms'; import { LabelField } from '../LabelField'; import { SelectWrapper } from './styles'; -import { RdSelectProps, variantSelectExtend } from './types'; +import { RdSelectProps, RdSelectRef, variantSelectExtend } from './types'; import useExtendVariant from './useExtendVariant'; -import { IRdComponentsConfig } from '../../organisms'; -import { config } from '../..'; -import { RefAttributes } from 'react'; const isVariantSelectExtend = ( variant: NonNullable @@ -15,66 +15,67 @@ const isVariantSelectExtend = ( return ['outlined-transparent'].includes(variant); }; -export const Select = ({ - label: labelFieldProps, +export const Select = forwardRef( + ( + props: RdSelectProps & RefAttributes, + ref: LegacyRef | undefined + ) => { + let { + label: labelFieldProps, - // Custom props - width, - minWidth, - isHideValueOnLoading = true, - variant, - ref, + // Custom props + width, + minWidth, + isHideValueOnLoading = true, + variant, - ...antdProps -}: RdSelectProps & RefAttributes) => { - let newSelectDesignToken: IRdComponentsConfig['Select'] = { - ...config.componentToken?.Select, - algorithm: true, - }; + ...antdProps + } = props; - //#region Handle isHideValueOnLoading prop - // Handle hide value when loading - if (isHideValueOnLoading) { - antdProps = { - ...antdProps, - value: !antdProps.loading && antdProps.value, + let newSelectDesignToken: RdComponentsConfig['Select'] = { + ...config.componentToken?.Select, + algorithm: true, }; - } - //#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, - }; + //#region Handle isHideValueOnLoading prop + // Handle hide value when loading + if (isHideValueOnLoading) { + antdProps = { + ...antdProps, + value: !antdProps.loading && antdProps.value, + }; + } + //#endregion - variant = 'outlined'; - } + if (variant && isVariantSelectExtend(variant)) { + // Get design token config for color. + const designTokenConfig = useExtendVariant(variant); - //#region - // Handle extend variant props + // Merge design token config with button design token. + newSelectDesignToken = { + ...newSelectDesignToken, + ...designTokenConfig, + }; - //#endregion + variant = 'outlined'; + } - return ( - - - - - - - - ); -}; + return ( + + + + + + + + ); + } +); diff --git a/src/molecules/Select/useExtendVariant.tsx b/src/molecules/Select/useExtendVariant.tsx index 34a144f..c270733 100644 --- a/src/molecules/Select/useExtendVariant.tsx +++ b/src/molecules/Select/useExtendVariant.tsx @@ -1,8 +1,8 @@ -import { IRdComponentsConfig } from '../../organisms'; +import { RdComponentsConfig } from '../../organisms'; import { variantSelectExtend } from './types'; const useExtendVariant = (variant: variantSelectExtend) => { - const newSelectComponentToken: IRdComponentsConfig['Select'] = {}; + const newSelectComponentToken: RdComponentsConfig['Select'] = {}; switch (variant) { case 'outlined-transparent': { From 4e90647e2d884e85820610c67107c2a0670a2803 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Tue, 10 Dec 2024 10:24:59 +0700 Subject: [PATCH 18/84] feature: remove forward prop block for Space molecule --- src/molecules/Space/styles.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/molecules/Space/styles.tsx b/src/molecules/Space/styles.tsx index e987f32..8d7b701 100644 --- a/src/molecules/Space/styles.tsx +++ b/src/molecules/Space/styles.tsx @@ -2,6 +2,15 @@ import styled from '@emotion/styled'; import { Space } from 'antd'; import { RdSpaceProps } from './types'; -export const SpaceStyles = styled(Space)>` - ${({ block }) => block && 'width: 100%'}; +export const SpaceStyles = styled(Space, { + shouldForwardProp: prop => { + const propsNotForward = ['block']; + + // If prop is not in the propsNotForward array, then forward it. + return !propsNotForward.includes(prop); + }, +})>` + ${({ block }) => { + return block && 'width: 100%'; + }}; `; From 9d8f0fb51c0c2fd1b0edf0e8dc47c1f9eff567cd Mon Sep 17 00:00:00 2001 From: Kenneth Date: Tue, 10 Dec 2024 10:25:22 +0700 Subject: [PATCH 19/84] feature: add custom component token for Spin molecule --- src/molecules/Spin/types.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/molecules/Spin/types.ts b/src/molecules/Spin/types.ts index 8e4fab0..6cecfc9 100644 --- a/src/molecules/Spin/types.ts +++ b/src/molecules/Spin/types.ts @@ -1,4 +1,10 @@ import { SpinProps } from 'antd'; +import { ComponentToken } from 'antd/es/spin/style'; + +/** + * @description Override SpinComponentToken of antd. + */ +export type SpinComponentToken = ComponentToken & {}; export interface RdSpinProps extends SpinProps { From 2525e30f8ed6906820c58ab2b40b33ac01b734b5 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Tue, 10 Dec 2024 10:25:42 +0700 Subject: [PATCH 20/84] feature: add forward ref for Switch molecule --- src/molecules/Switch/Switch.tsx | 10 +++++---- src/molecules/Switch/SwitchControl.tsx | 30 ++++++++++++-------------- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/src/molecules/Switch/Switch.tsx b/src/molecules/Switch/Switch.tsx index 72a0dff..c8acda3 100644 --- a/src/molecules/Switch/Switch.tsx +++ b/src/molecules/Switch/Switch.tsx @@ -1,12 +1,14 @@ import { SwitchProps } from 'antd'; +import { forwardRef } from 'react'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { RdSwitchProps } from './types'; import { SwitchStyled } from './styles'; +import { RdSwitchProps } from './types'; -export const Switch = ({ ...antdProps }: RdSwitchProps) => { +export const Switch = forwardRef((props: RdSwitchProps, ref: RdSwitchProps['ref']) => { + const { ...antdProps } = props; return ( - + ); -}; +}); diff --git a/src/molecules/Switch/SwitchControl.tsx b/src/molecules/Switch/SwitchControl.tsx index a2a5a07..1504187 100644 --- a/src/molecules/Switch/SwitchControl.tsx +++ b/src/molecules/Switch/SwitchControl.tsx @@ -4,8 +4,8 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { TextError } from '../../atomics'; import ConditionalWrapper from '../../atomics/ConditionalWrapper'; import { LabelField } from '../LabelField'; -import { SwitchWrapper } from './styles'; import { RdSwitchControlProps } from './types'; +import { SwitchStyled } from './styles'; export const SwitchControl = ({ name, @@ -38,21 +38,19 @@ export const SwitchControl = ({ return ( - - - - - {invalid && {error?.message}} - + + + + {invalid && {error?.message}} ); }; From b249b8f929c60ad4e52dd76d52de41492722e017 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Tue, 10 Dec 2024 10:25:50 +0700 Subject: [PATCH 21/84] feature: add forward ref for Tooltip molecule --- src/molecules/Tooltip/Tooltip.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/molecules/Tooltip/Tooltip.tsx b/src/molecules/Tooltip/Tooltip.tsx index 2fc0a59..2109124 100644 --- a/src/molecules/Tooltip/Tooltip.tsx +++ b/src/molecules/Tooltip/Tooltip.tsx @@ -8,7 +8,7 @@ export const Tooltip = React.forwardRef( ({ children, ...antdProps }, ref) => { return ( - + {children} From 2b42583f7a854276f0ac2c3a8df4339426cde843 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Tue, 10 Dec 2024 10:26:15 +0700 Subject: [PATCH 22/84] feature: add forward ref for UploadDragger molecule --- src/molecules/Upload/Upload.tsx | 14 ++++++++++++++ src/molecules/Upload/UploadDragger copy.tsx | 16 ++++++++++++++++ src/molecules/Upload/UploadDragger.tsx | 16 ++++++++++++++++ src/molecules/Upload/index.ts | 4 ++++ src/molecules/Upload/styles.tsx | 6 ++++++ src/molecules/Upload/types.ts | 13 +++++++++++++ 6 files changed, 69 insertions(+) create mode 100644 src/molecules/Upload/Upload.tsx create mode 100644 src/molecules/Upload/UploadDragger copy.tsx create mode 100644 src/molecules/Upload/UploadDragger.tsx create mode 100644 src/molecules/Upload/index.ts create mode 100644 src/molecules/Upload/styles.tsx create mode 100644 src/molecules/Upload/types.ts diff --git a/src/molecules/Upload/Upload.tsx b/src/molecules/Upload/Upload.tsx new file mode 100644 index 0000000..6274e55 --- /dev/null +++ b/src/molecules/Upload/Upload.tsx @@ -0,0 +1,14 @@ +import { UploadProps } from 'antd'; +import { forwardRef } from 'react'; +import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { UploadStyled } from './styles'; +import { RdUploadProps } from './types'; + +export const Upload = forwardRef((props: RdUploadProps, ref: RdUploadProps['ref']) => { + const { ...antdProps } = props; + return ( + + + + ); +}); diff --git a/src/molecules/Upload/UploadDragger copy.tsx b/src/molecules/Upload/UploadDragger copy.tsx new file mode 100644 index 0000000..982100d --- /dev/null +++ b/src/molecules/Upload/UploadDragger copy.tsx @@ -0,0 +1,16 @@ +import { forwardRef } from 'react'; +import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { UploadDraggerStyled } from './styles'; +import { RdUploadDraggerProps } from './types'; + +export const UploadDragger = forwardRef( + (props: RdUploadDraggerProps, ref: RdUploadDraggerProps['ref']) => { + const { ...antdProps } = props; + + return ( + + + + ); + } +); diff --git a/src/molecules/Upload/UploadDragger.tsx b/src/molecules/Upload/UploadDragger.tsx new file mode 100644 index 0000000..0fa6b4d --- /dev/null +++ b/src/molecules/Upload/UploadDragger.tsx @@ -0,0 +1,16 @@ +import { forwardRef } from 'react'; +import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { UploadDraggerStyled } from './styles'; +import { RdUploadDraggerProps } from './types'; + +export const UploadDragger = forwardRef( + (props: RdUploadDraggerProps, ref: RdUploadDraggerProps['ref']) => { + const { ...antdProps } = props; + + return ( + + + + ); + } +); diff --git a/src/molecules/Upload/index.ts b/src/molecules/Upload/index.ts new file mode 100644 index 0000000..4532490 --- /dev/null +++ b/src/molecules/Upload/index.ts @@ -0,0 +1,4 @@ +export * from './Upload'; +export * from './UploadDragger'; + +export * from './types'; diff --git a/src/molecules/Upload/styles.tsx b/src/molecules/Upload/styles.tsx new file mode 100644 index 0000000..2795993 --- /dev/null +++ b/src/molecules/Upload/styles.tsx @@ -0,0 +1,6 @@ +import styled from '@emotion/styled'; +import { Upload } from 'antd'; + +export const UploadStyled = styled(Upload)``; + +export const UploadDraggerStyled = styled(Upload.Dragger)``; diff --git a/src/molecules/Upload/types.ts b/src/molecules/Upload/types.ts new file mode 100644 index 0000000..5021619 --- /dev/null +++ b/src/molecules/Upload/types.ts @@ -0,0 +1,13 @@ +import { GetProps, Upload } from 'antd'; +import { ComponentToken } from 'antd/es/upload/style'; + +/** + * @description Override UploadComponentToken of antd. + */ +export type UploadComponentToken = ComponentToken & {}; + +type UploadProps = GetProps; +type UploadDraggerProps = GetProps; + +export type RdUploadProps = UploadProps & {}; +export type RdUploadDraggerProps = UploadDraggerProps & {}; From 637bb339ab3ed4f8f2363aeb3f877fa5414739d7 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Tue, 10 Dec 2024 10:27:28 +0700 Subject: [PATCH 23/84] fix: export component token and delete redundant file --- src/molecules/Upload/UploadDragger copy.tsx | 16 ---- src/molecules/index.ts | 7 +- src/molecules/types.ts | 101 ++++++++++++++++++++ 3 files changed, 104 insertions(+), 20 deletions(-) delete mode 100644 src/molecules/Upload/UploadDragger copy.tsx create mode 100644 src/molecules/types.ts diff --git a/src/molecules/Upload/UploadDragger copy.tsx b/src/molecules/Upload/UploadDragger copy.tsx deleted file mode 100644 index 982100d..0000000 --- a/src/molecules/Upload/UploadDragger copy.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { forwardRef } from 'react'; -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { UploadDraggerStyled } from './styles'; -import { RdUploadDraggerProps } from './types'; - -export const UploadDragger = forwardRef( - (props: RdUploadDraggerProps, ref: RdUploadDraggerProps['ref']) => { - const { ...antdProps } = props; - - return ( - - - - ); - } -); diff --git a/src/molecules/index.ts b/src/molecules/index.ts index ae2b21d..d1daae1 100644 --- a/src/molecules/index.ts +++ b/src/molecules/index.ts @@ -13,10 +13,9 @@ export * from './FloatButton/index'; export * from './Form'; export * from './Input/index'; export * from './InputNumber/index'; -export * from './InputPassword/index'; export * from './LabelField/index'; export * from './Layout/index'; -// export * from './List/index'; +export * from './List'; export * from './Menu/index'; export * from './Modal/index'; export * from './Pagination/index'; @@ -30,7 +29,7 @@ export * from './Slider/index'; export * from './Space'; export * from './Spin/index'; export * from './Switch/index'; -export * from './TextArea/index'; -export * from './Tooltip/index'; export * from './Table/index'; export * from './Tabs/index'; +export * from './Tooltip/index'; +export * from './Upload'; diff --git a/src/molecules/types.ts b/src/molecules/types.ts new file mode 100644 index 0000000..879412b --- /dev/null +++ b/src/molecules/types.ts @@ -0,0 +1,101 @@ +import { TypographyComponentToken } from '../atomics'; +import { AvatarComponentToken } from './Avatar'; +import { BreadcrumbComponentToken } from './Breadcrumb'; +import { ButtonComponentToken } from './Button'; +import { CardComponentToken } from './Card'; +import { CheckboxComponentToken } from './Checkbox'; +import { CollapseComponentToken } from './Collapse'; +import { DividerComponentToken } from './Divider'; +import { DrawerComponentToken } from './Drawer'; +import { DropdownComponentToken } from './Dropdown'; +import { FloatButtonComponentToken } from './FloatButton'; +import { FormComponentToken } from './Form'; +import { InputComponentToken } from './Input'; +import { InputNumberComponentToken } from './InputNumber'; +import { LayoutComponentToken } from './Layout'; +import { MenuComponentToken } from './Menu'; +import { ModalComponentToken } from './Modal'; +import { PaginationComponentToken } from './Pagination'; +import { PopoverComponentToken } from './Popover'; +import { RadioComponentToken } from './Radio'; +import { DatePickerComponentToken } from './RangePicker'; +import { SelectComponentToken } from './Select'; +import { SkeletonComponentToken } from './Skeleton'; +import { SliderComponentToken } from './Slider'; +import { SpaceComponentToken } from './Space'; +import { SpinComponentToken } from './Spin'; +import { SwitchComponentToken } from './Switch'; +import { TableComponentToken } from './Table'; +import { TabsComponentToken } from './Tabs'; +import { TooltipComponentToken } from './Tooltip'; +import { UploadComponentToken } from './Upload'; + +export interface RdComponentTokenMap { + // Affix?: AffixComponentToken; + // Alert?: AlertComponentToken; + // Anchor?: AnchorComponentToken; + Avatar?: AvatarComponentToken; + // BackTop?: BackTopComponentToken; + // Badge?: BadgeComponentToken; + Button?: ButtonComponentToken; + Breadcrumb?: BreadcrumbComponentToken; + Card?: CardComponentToken; + // Carousel?: CarouselComponentToken; + // Cascader?: CascaderComponentToken; + Checkbox?: CheckboxComponentToken; + // ColorPicker?: ColorPickerComponentToken; + Collapse?: CollapseComponentToken; + DatePicker?: DatePickerComponentToken; + // Descriptions?: DescriptionsComponentToken; + Divider?: DividerComponentToken; + Drawer?: DrawerComponentToken; + Dropdown?: DropdownComponentToken; + // Empty?: EmptyComponentToken; + // Flex?: FlexComponentToken; + FloatButton?: FloatButtonComponentToken; + Form?: FormComponentToken; + // Grid?: GridComponentToken; + // Image?: ImageComponentToken; + Input?: InputComponentToken; + InputNumber?: InputNumberComponentToken; + Layout?: LayoutComponentToken; + // List?: ListComponentToken; + // Mentions?: MentionsComponentToken; + // Notification?: NotificationComponentToken; + Pagination?: PaginationComponentToken; + Popover?: PopoverComponentToken; + // Popconfirm?: PopconfirmComponentToken; + // Rate?: RateComponentToken; + Radio?: RadioComponentToken; + // Result?: ResultComponentToken; + // Segmented?: SegmentedComponentToken; + Select?: SelectComponentToken; + Skeleton?: SkeletonComponentToken; + Slider?: SliderComponentToken; + Spin?: SpinComponentToken; + // Statistic?: StatisticComponentToken; + Switch?: SwitchComponentToken; + // Splitter?: SplitterComponentToken; + // Tag?: TagComponentToken; + // Tree?: TreeComponentToken; + // TreeSelect?: TreeSelectComponentToken; + Typography?: TypographyComponentToken; + // Timeline?: TimelineComponentToken; + // Transfer?: TransferComponentToken; + Tabs?: TabsComponentToken; + // Calendar?: CalendarComponentToken; + // Steps?: StepsComponentToken; + Menu?: MenuComponentToken; + Modal?: ModalComponentToken; + // Message?: MessageComponentToken; + Upload?: UploadComponentToken; + Tooltip?: TooltipComponentToken; + Table?: TableComponentToken; + Space?: SpaceComponentToken; + // Progress?: ProgressComponentToken; + // Tour?: TourComponentToken; + // QRCode?: QRCodeComponentToken; + // App?: AppComponentToken; + /** @private Internal TS definition. Do not use. */ + // Wave?: WaveToken; +} From 7410bd315cc0280c9a9111c49ce808d84b95df5e Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:25:56 +0700 Subject: [PATCH 24/84] feature: remove label field wrapper molecule --- src/atomics/ConditionalWrapper/index.tsx | 14 ----- src/atomics/ConditionalWrapper/types.ts | 8 --- src/models/index.ts | 2 - src/models/interfaces/form.ts | 16 ------ src/models/interfaces/index.ts | 1 - src/models/types/design.ts | 1 - src/models/types/index.ts | 1 - src/molecules/LabelField/LabelField.tsx | 52 ------------------- src/molecules/LabelField/LabelFieldWrapper.ts | 9 ---- src/molecules/LabelField/index.tsx | 3 -- src/molecules/LabelField/styles.tsx | 16 ------ src/molecules/LabelField/types.ts | 40 -------------- 12 files changed, 163 deletions(-) delete mode 100644 src/atomics/ConditionalWrapper/index.tsx delete mode 100644 src/atomics/ConditionalWrapper/types.ts delete mode 100644 src/models/index.ts delete mode 100644 src/models/interfaces/form.ts delete mode 100644 src/models/interfaces/index.ts delete mode 100644 src/models/types/design.ts delete mode 100644 src/models/types/index.ts delete mode 100644 src/molecules/LabelField/LabelField.tsx delete mode 100644 src/molecules/LabelField/LabelFieldWrapper.ts delete mode 100644 src/molecules/LabelField/index.tsx delete mode 100644 src/molecules/LabelField/styles.tsx delete mode 100644 src/molecules/LabelField/types.ts diff --git a/src/atomics/ConditionalWrapper/index.tsx b/src/atomics/ConditionalWrapper/index.tsx deleted file mode 100644 index 47e00e5..0000000 --- a/src/atomics/ConditionalWrapper/index.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { ConditionalWrapperProps } from './types'; - -/** - * ConditionalWrapper is a component that conditionally wraps its children - * inside another component based on a given condition. If the condition is `true`, - * it renders the children inside the specified wrapper component with the provided - * wrapper props. If the condition is `false`, it renders the children without any wrapper. - * */ -const ConditionalWrapper = (props: ConditionalWrapperProps) => { - const { condition, wrapper: Wrapper, wrapperProps, children } = props; - return condition ? {children} : <>{children}; -}; - -export default ConditionalWrapper; diff --git a/src/atomics/ConditionalWrapper/types.ts b/src/atomics/ConditionalWrapper/types.ts deleted file mode 100644 index d33b4c1..0000000 --- a/src/atomics/ConditionalWrapper/types.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { ReactNode } from 'react'; - -export interface ConditionalWrapperProps { - condition: boolean; - wrapper: React.ComponentType; - wrapperProps: React.ComponentProps; - children: ReactNode; -} diff --git a/src/models/index.ts b/src/models/index.ts deleted file mode 100644 index 9a7975f..0000000 --- a/src/models/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './interfaces'; -export * from './types'; \ No newline at end of file diff --git a/src/models/interfaces/form.ts b/src/models/interfaces/form.ts deleted file mode 100644 index f9d333c..0000000 --- a/src/models/interfaces/form.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Control } from 'react-hook-form'; - -export interface RdControlField { - /* Control of react-hook-form */ - control: Control; // eslint-disable-line -} - -export interface RdRegistryControlField extends RdControlField { - /* Name to register field in react-hook-form */ - name: string; -} - -export interface IRegistryRangePickerControlField extends RdControlField { - /* Names to register dateFrom, dateTo in react-hook-form */ - names: [string, string]; -} diff --git a/src/models/interfaces/index.ts b/src/models/interfaces/index.ts deleted file mode 100644 index b8a36bf..0000000 --- a/src/models/interfaces/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './form'; \ No newline at end of file diff --git a/src/models/types/design.ts b/src/models/types/design.ts deleted file mode 100644 index ee2a0be..0000000 --- a/src/models/types/design.ts +++ /dev/null @@ -1 +0,0 @@ -export type TAxis = 'horizontal' | 'vertical'; \ No newline at end of file diff --git a/src/models/types/index.ts b/src/models/types/index.ts deleted file mode 100644 index e9e7109..0000000 --- a/src/models/types/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './design'; \ No newline at end of file diff --git a/src/molecules/LabelField/LabelField.tsx b/src/molecules/LabelField/LabelField.tsx deleted file mode 100644 index 65ab982..0000000 --- a/src/molecules/LabelField/LabelField.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { Flex } from 'antd'; -import { PropsWithChildren } from 'react'; -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { Label, LabelDescription, LabelFieldWrapper } from './styles'; -import { RdLabelFieldProps } from './types'; - -export const LabelField = (props: RdLabelFieldProps & PropsWithChildren) => { - const { - text, - axis = 'vertical', - description, - htmlFor, - isColon = false, - required, - widthControl, - children, - } = props; - - return ( - - - - - {description} - - - {children} - - - - ); -}; diff --git a/src/molecules/LabelField/LabelFieldWrapper.ts b/src/molecules/LabelField/LabelFieldWrapper.ts deleted file mode 100644 index 401c5b6..0000000 --- a/src/molecules/LabelField/LabelFieldWrapper.ts +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { LabelField } from '.'; -import { RdLabelFieldProps } from './types'; - -const LabelFieldWrapper = (labelFieldProps: RdLabelFieldProps | false) => { - return labelFieldProps ? LabelField : React.Fragment; -}; - -export default LabelFieldWrapper; diff --git a/src/molecules/LabelField/index.tsx b/src/molecules/LabelField/index.tsx deleted file mode 100644 index d71dc61..0000000 --- a/src/molecules/LabelField/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export * from './LabelField'; -export * from './LabelFieldWrapper'; -export * from './types'; \ No newline at end of file diff --git a/src/molecules/LabelField/styles.tsx b/src/molecules/LabelField/styles.tsx deleted file mode 100644 index 4a0baeb..0000000 --- a/src/molecules/LabelField/styles.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import styled from '@emotion/styled'; -import { Flex } from 'antd'; -import { config } from '../..'; - -export const LabelFieldWrapper = styled(Flex)``; - -export const Label = styled.label` - color: ${config.designToken.colorText}; - sup { - color: ${config.designToken.colorError}; - } -`; - -export const LabelDescription = styled.label` - font-style: italic; -`; diff --git a/src/molecules/LabelField/types.ts b/src/molecules/LabelField/types.ts deleted file mode 100644 index 3aea833..0000000 --- a/src/molecules/LabelField/types.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { TAxis } from '../../models'; - -export interface RdLabelFieldProps { - /** - * @description Text label to be displayed. - */ - text?: string; - /** - * @description Label axis used to determine whether the label is displayed vertically or horizontally. - * @default 'vertical' - */ - axis?: TAxis; - /** - * @description Description for the label. - */ - description?: string; - /** - * @description Indicates if a colon should be appended to the label. - * @default false - */ - isColon?: boolean; - /** - * @description Indicates if the field is required. - * @default false - */ - required?: boolean; - /** - * @description Specifies the width of the field. - */ - widthControl?: string | number; - /** - * @description Specifies the id of the element the label is bound to. - */ - htmlFor?: string; -} - -export interface RdLabelFieldWrapperProps { - /** The properties for the label field. If set to false, the label will not be rendered. */ - label?: RdLabelFieldProps | false; -} From a1a8544e9aec9d4911a2934f1496e1217679d578 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:26:13 +0700 Subject: [PATCH 25/84] feature: add Affix molecule --- src/molecules/Affix/Affix.tsx | 11 +++++++++++ src/molecules/Affix/index.tsx | 2 ++ src/molecules/Affix/styles.tsx | 4 ++++ src/molecules/Affix/types.ts | 20 ++++++++++++++++++++ 4 files changed, 37 insertions(+) create mode 100644 src/molecules/Affix/Affix.tsx create mode 100644 src/molecules/Affix/index.tsx create mode 100644 src/molecules/Affix/styles.tsx create mode 100644 src/molecules/Affix/types.ts diff --git a/src/molecules/Affix/Affix.tsx b/src/molecules/Affix/Affix.tsx new file mode 100644 index 0000000..72f93d4 --- /dev/null +++ b/src/molecules/Affix/Affix.tsx @@ -0,0 +1,11 @@ +import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { AffixStyles } from './styles'; +import { RdAffixProps } from './types'; + +export const Affix = ({ ...antdProps }: RdAffixProps) => { + return ( + + + + ); +}; diff --git a/src/molecules/Affix/index.tsx b/src/molecules/Affix/index.tsx new file mode 100644 index 0000000..a1632c1 --- /dev/null +++ b/src/molecules/Affix/index.tsx @@ -0,0 +1,2 @@ +export * from './Affix'; +export * from './types'; \ No newline at end of file diff --git a/src/molecules/Affix/styles.tsx b/src/molecules/Affix/styles.tsx new file mode 100644 index 0000000..dcb4c5f --- /dev/null +++ b/src/molecules/Affix/styles.tsx @@ -0,0 +1,4 @@ +import styled from '@emotion/styled'; +import { Affix } from 'antd'; + +export const AffixStyles = styled(Affix)``; diff --git a/src/molecules/Affix/types.ts b/src/molecules/Affix/types.ts new file mode 100644 index 0000000..3fc491c --- /dev/null +++ b/src/molecules/Affix/types.ts @@ -0,0 +1,20 @@ +import { Affix, GetProps } from 'antd'; +import { ComponentToken as AffixComponentTokenAntd } from 'antd/es/affix/style'; + +//#region Define props +type AffixProps = GetProps; +//#endregion + +//#region Custom component token +type AffixComponentTokenExtend = {}; +//#endregion + +//#region Custom props +type AffixPropsExtend = {}; +//#endregion + +//#region export type +export type RdAffixProps = AffixProps & AffixPropsExtend; + +export type RdAffixComponentToken = AffixComponentTokenAntd & AffixComponentTokenExtend; +//#endregion From ef4f8501cbfcd059b8cfe75bd463670e04a9fc1d Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:26:24 +0700 Subject: [PATCH 26/84] feature: add Anchor molecule --- src/molecules/Anchor/Anchor.tsx | 11 +++++++++++ src/molecules/Anchor/index.tsx | 2 ++ src/molecules/Anchor/styles.tsx | 4 ++++ src/molecules/Anchor/types.ts | 20 ++++++++++++++++++++ 4 files changed, 37 insertions(+) create mode 100644 src/molecules/Anchor/Anchor.tsx create mode 100644 src/molecules/Anchor/index.tsx create mode 100644 src/molecules/Anchor/styles.tsx create mode 100644 src/molecules/Anchor/types.ts diff --git a/src/molecules/Anchor/Anchor.tsx b/src/molecules/Anchor/Anchor.tsx new file mode 100644 index 0000000..7940f68 --- /dev/null +++ b/src/molecules/Anchor/Anchor.tsx @@ -0,0 +1,11 @@ +import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { AnchorStyles } from './styles'; +import { RdAnchorProps } from './types'; + +export const Anchor = ({ ...antdProps }: RdAnchorProps) => { + return ( + + + + ); +}; diff --git a/src/molecules/Anchor/index.tsx b/src/molecules/Anchor/index.tsx new file mode 100644 index 0000000..f407d7d --- /dev/null +++ b/src/molecules/Anchor/index.tsx @@ -0,0 +1,2 @@ +export * from './Anchor'; +export * from './types'; \ No newline at end of file diff --git a/src/molecules/Anchor/styles.tsx b/src/molecules/Anchor/styles.tsx new file mode 100644 index 0000000..df92747 --- /dev/null +++ b/src/molecules/Anchor/styles.tsx @@ -0,0 +1,4 @@ +import styled from '@emotion/styled'; +import { Anchor } from 'antd'; + +export const AnchorStyles = styled(Anchor)``; diff --git a/src/molecules/Anchor/types.ts b/src/molecules/Anchor/types.ts new file mode 100644 index 0000000..3373052 --- /dev/null +++ b/src/molecules/Anchor/types.ts @@ -0,0 +1,20 @@ +import { Anchor, GetProps } from 'antd'; +import { ComponentToken as AnchorComponentTokenAntd } from 'antd/es/anchor/style'; + +//#region Define props +type AnchorProps = GetProps; +//#endregion + +//#region Custom component token +type AnchorComponentTokenExtend = {}; +//#endregion + +//#region Custom props +type AnchorPropsExtend = {}; +//#endregion + +//#region export type +export type RdAnchorProps = AnchorProps & AnchorPropsExtend; + +export type RdAnchorComponentToken = AnchorComponentTokenAntd & AnchorComponentTokenExtend; +//#endregion From 481acc34670bcaa837d5e04eaaf6d819b85bed97 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:26:37 +0700 Subject: [PATCH 27/84] feature: add Badge molecule --- src/molecules/Badge/Badge.tsx | 11 +++++++++++ src/molecules/Badge/index.tsx | 2 ++ src/molecules/Badge/styles.tsx | 4 ++++ src/molecules/Badge/types.ts | 19 +++++++++++++++++++ 4 files changed, 36 insertions(+) create mode 100644 src/molecules/Badge/Badge.tsx create mode 100644 src/molecules/Badge/index.tsx create mode 100644 src/molecules/Badge/styles.tsx create mode 100644 src/molecules/Badge/types.ts diff --git a/src/molecules/Badge/Badge.tsx b/src/molecules/Badge/Badge.tsx new file mode 100644 index 0000000..207b273 --- /dev/null +++ b/src/molecules/Badge/Badge.tsx @@ -0,0 +1,11 @@ +import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { BadgeStyles } from './styles'; +import { RdBadgeProps } from './types'; + +export const Badge = ({ ...antdProps }: RdBadgeProps) => { + return ( + + + + ); +}; diff --git a/src/molecules/Badge/index.tsx b/src/molecules/Badge/index.tsx new file mode 100644 index 0000000..11deb68 --- /dev/null +++ b/src/molecules/Badge/index.tsx @@ -0,0 +1,2 @@ +export * from './Badge'; +export * from './types'; \ No newline at end of file diff --git a/src/molecules/Badge/styles.tsx b/src/molecules/Badge/styles.tsx new file mode 100644 index 0000000..297c896 --- /dev/null +++ b/src/molecules/Badge/styles.tsx @@ -0,0 +1,4 @@ +import styled from '@emotion/styled'; +import { Badge } from 'antd'; + +export const BadgeStyles = styled(Badge)``; diff --git a/src/molecules/Badge/types.ts b/src/molecules/Badge/types.ts new file mode 100644 index 0000000..3bc68fb --- /dev/null +++ b/src/molecules/Badge/types.ts @@ -0,0 +1,19 @@ +import { Badge, GetProps } from 'antd'; +import { ComponentToken as BadgeComponentTokenAntd } from 'antd/es/badge/style'; + +//#region Define props +type BadgeProps = GetProps; +//#endregion + +//#region Custom component token +type BadgeComponentTokenExtend = {}; +//#endregion + +//#region Custom props +type BadgePropsExtend = {}; +//#endregion + +//#region export type +export type RdBadgeProps = BadgeProps & BadgePropsExtend; +export type RdBadgeComponentToken = BadgeComponentTokenAntd & BadgeComponentTokenExtend; +//#endregion From 691e178c23236c70b9bbe421aaa73597067e6142 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:26:48 +0700 Subject: [PATCH 28/84] feature: add ColorPicker molecule --- src/molecules/ColorPicker/ColorPicker.tsx | 11 +++++++++++ src/molecules/ColorPicker/index.tsx | 2 ++ src/molecules/ColorPicker/styles.tsx | 4 ++++ src/molecules/ColorPicker/types.ts | 21 +++++++++++++++++++++ 4 files changed, 38 insertions(+) create mode 100644 src/molecules/ColorPicker/ColorPicker.tsx create mode 100644 src/molecules/ColorPicker/index.tsx create mode 100644 src/molecules/ColorPicker/styles.tsx create mode 100644 src/molecules/ColorPicker/types.ts diff --git a/src/molecules/ColorPicker/ColorPicker.tsx b/src/molecules/ColorPicker/ColorPicker.tsx new file mode 100644 index 0000000..485d3e9 --- /dev/null +++ b/src/molecules/ColorPicker/ColorPicker.tsx @@ -0,0 +1,11 @@ +import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { ColorPickerStyles } from './styles'; +import { RdColorPickerProps } from './types'; + +export const ColorPicker = ({ ...antdProps }: RdColorPickerProps) => { + return ( + + + + ); +}; diff --git a/src/molecules/ColorPicker/index.tsx b/src/molecules/ColorPicker/index.tsx new file mode 100644 index 0000000..3f5c36c --- /dev/null +++ b/src/molecules/ColorPicker/index.tsx @@ -0,0 +1,2 @@ +export * from './ColorPicker'; +export * from './types'; diff --git a/src/molecules/ColorPicker/styles.tsx b/src/molecules/ColorPicker/styles.tsx new file mode 100644 index 0000000..b7d00b4 --- /dev/null +++ b/src/molecules/ColorPicker/styles.tsx @@ -0,0 +1,4 @@ +import styled from '@emotion/styled'; +import { ColorPicker } from 'antd'; + +export const ColorPickerStyles = styled(ColorPicker)``; diff --git a/src/molecules/ColorPicker/types.ts b/src/molecules/ColorPicker/types.ts new file mode 100644 index 0000000..3bf5dee --- /dev/null +++ b/src/molecules/ColorPicker/types.ts @@ -0,0 +1,21 @@ +import { ColorPicker, GetProps } from 'antd'; +import { ComponentToken as ColorPickerComponentTokenAntd } from 'antd/es/color-picker/style'; + +//#region Define props +type ColorPickerProps = GetProps; +//#endregion + +//#region Custom component token +type ColorPickerComponentTokenExtend = {}; +//#endregion + +//#region Custom props +type ColorPickerPropsExtend = {}; +//#endregion + +//#region export type +export type RdColorPickerProps = ColorPickerProps & ColorPickerPropsExtend; + +export type RdColorPickerComponentToken = ColorPickerComponentTokenAntd & + ColorPickerComponentTokenExtend; +//#endregion From 166858d6efbbc234609f3646bd166562b39d0968 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:26:56 +0700 Subject: [PATCH 29/84] feature: add Empty molecule --- src/molecules/Empty/Empty.tsx | 11 +++++++++++ src/molecules/Empty/index.tsx | 2 ++ src/molecules/Empty/styles.tsx | 4 ++++ src/molecules/Empty/types.ts | 19 +++++++++++++++++++ 4 files changed, 36 insertions(+) create mode 100644 src/molecules/Empty/Empty.tsx create mode 100644 src/molecules/Empty/index.tsx create mode 100644 src/molecules/Empty/styles.tsx create mode 100644 src/molecules/Empty/types.ts diff --git a/src/molecules/Empty/Empty.tsx b/src/molecules/Empty/Empty.tsx new file mode 100644 index 0000000..61305e5 --- /dev/null +++ b/src/molecules/Empty/Empty.tsx @@ -0,0 +1,11 @@ +import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { EmptyStyles } from './styles'; +import { RdEmptyProps } from './types'; + +export const Empty = ({ ...antdProps }: RdEmptyProps) => { + return ( + + + + ); +}; diff --git a/src/molecules/Empty/index.tsx b/src/molecules/Empty/index.tsx new file mode 100644 index 0000000..94a8965 --- /dev/null +++ b/src/molecules/Empty/index.tsx @@ -0,0 +1,2 @@ +export * from './Empty'; +export * from './types'; \ No newline at end of file diff --git a/src/molecules/Empty/styles.tsx b/src/molecules/Empty/styles.tsx new file mode 100644 index 0000000..f75574a --- /dev/null +++ b/src/molecules/Empty/styles.tsx @@ -0,0 +1,4 @@ +import styled from '@emotion/styled'; +import { Empty } from 'antd'; + +export const EmptyStyles = styled(Empty)``; diff --git a/src/molecules/Empty/types.ts b/src/molecules/Empty/types.ts new file mode 100644 index 0000000..3964a10 --- /dev/null +++ b/src/molecules/Empty/types.ts @@ -0,0 +1,19 @@ +import { Empty, GetProps } from 'antd'; +import { ComponentToken as EmptyComponentTokenAntd } from 'antd/es/empty/style'; + +//#region Define props +type EmptyProps = GetProps; +//#endregion + +//#region Custom component token +type EmptyComponentTokenExtend = {}; +//#endregion + +//#region Custom props +type EmptyPropsExtend = {}; +//#endregion + +//#region export type +export type RdEmptyProps = EmptyProps & EmptyPropsExtend; +export type RdEmptyComponentToken = EmptyComponentTokenAntd & EmptyComponentTokenExtend; +//#endregion From a286418147ffce3b470c0a6363bb00b7b011dc6c Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:27:10 +0700 Subject: [PATCH 30/84] feature: add Tag molecule --- src/molecules/Tag/Tag.tsx | 11 +++++++++++ src/molecules/Tag/index.tsx | 2 ++ src/molecules/Tag/styles.tsx | 4 ++++ src/molecules/Tag/types.ts | 19 +++++++++++++++++++ 4 files changed, 36 insertions(+) create mode 100644 src/molecules/Tag/Tag.tsx create mode 100644 src/molecules/Tag/index.tsx create mode 100644 src/molecules/Tag/styles.tsx create mode 100644 src/molecules/Tag/types.ts diff --git a/src/molecules/Tag/Tag.tsx b/src/molecules/Tag/Tag.tsx new file mode 100644 index 0000000..b0b010f --- /dev/null +++ b/src/molecules/Tag/Tag.tsx @@ -0,0 +1,11 @@ +import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { TagStyles } from './styles'; +import { RdTagProps } from './types'; + +export const Tag = ({ ...antdProps }: RdTagProps) => { + return ( + + + + ); +}; diff --git a/src/molecules/Tag/index.tsx b/src/molecules/Tag/index.tsx new file mode 100644 index 0000000..3365ff2 --- /dev/null +++ b/src/molecules/Tag/index.tsx @@ -0,0 +1,2 @@ +export * from './Tag'; +export * from './types'; \ No newline at end of file diff --git a/src/molecules/Tag/styles.tsx b/src/molecules/Tag/styles.tsx new file mode 100644 index 0000000..06d36d2 --- /dev/null +++ b/src/molecules/Tag/styles.tsx @@ -0,0 +1,4 @@ +import styled from '@emotion/styled'; +import { Tag } from 'antd'; + +export const TagStyles = styled(Tag)``; diff --git a/src/molecules/Tag/types.ts b/src/molecules/Tag/types.ts new file mode 100644 index 0000000..1ddb357 --- /dev/null +++ b/src/molecules/Tag/types.ts @@ -0,0 +1,19 @@ +import { Tag, GetProps } from 'antd'; +import { ComponentToken as TagComponentTokenAntd } from 'antd/es/tag/style'; + +//#region Define props +type TagProps = GetProps; +//#endregion + +//#region Custom component token +type TagComponentTokenExtend = {}; +//#endregion + +//#region Custom props +type TagPropsExtend = {}; +//#endregion + +//#region export type +export type RdTagProps = TagProps & TagPropsExtend; +export type RdTagComponentToken = TagComponentTokenAntd & TagComponentTokenExtend; +//#endregion From 9f3a4a9b3e8f65e433c10e76c65c23f50616d1b2 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:27:39 +0700 Subject: [PATCH 31/84] feature: remove TextError atomics, use typography instead --- src/atomics/TextError/TextError.tsx | 7 ------- src/atomics/TextError/index.ts | 1 - src/atomics/TextError/styles.tsx | 6 ------ src/atomics/TextError/types.ts | 3 --- 4 files changed, 17 deletions(-) delete mode 100644 src/atomics/TextError/TextError.tsx delete mode 100644 src/atomics/TextError/index.ts delete mode 100644 src/atomics/TextError/styles.tsx delete mode 100644 src/atomics/TextError/types.ts diff --git a/src/atomics/TextError/TextError.tsx b/src/atomics/TextError/TextError.tsx deleted file mode 100644 index 9a3f8c8..0000000 --- a/src/atomics/TextError/TextError.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { TextErrorWrapper } from './styles'; -import { ITextErrorProps } from './types'; - -export const TextError = (props: ITextErrorProps) => { - const { children } = props; - return {children}; -}; diff --git a/src/atomics/TextError/index.ts b/src/atomics/TextError/index.ts deleted file mode 100644 index 5b9fa95..0000000 --- a/src/atomics/TextError/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './TextError'; \ No newline at end of file diff --git a/src/atomics/TextError/styles.tsx b/src/atomics/TextError/styles.tsx deleted file mode 100644 index a4a1fca..0000000 --- a/src/atomics/TextError/styles.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import styled from '@emotion/styled'; -import { config } from '../..'; - -export const TextErrorWrapper = styled.div` - color: ${config.designToken.colorErrorText}; -`; diff --git a/src/atomics/TextError/types.ts b/src/atomics/TextError/types.ts deleted file mode 100644 index d70d4f0..0000000 --- a/src/atomics/TextError/types.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { PropsWithChildren } from 'react'; - -export interface ITextErrorProps extends PropsWithChildren {} \ No newline at end of file From 22a4bdfd00c222f5a356137c40f5fe2a65935af5 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:27:56 +0700 Subject: [PATCH 32/84] feature: add Typography atom --- src/atomics/Typography/types.ts | 45 ++++++++++++++++++++------------- 1 file changed, 27 insertions(+), 18 deletions(-) diff --git a/src/atomics/Typography/types.ts b/src/atomics/Typography/types.ts index 81a2011..8736cf0 100644 --- a/src/atomics/Typography/types.ts +++ b/src/atomics/Typography/types.ts @@ -1,26 +1,35 @@ import { Typography, GetProps } from 'antd'; -import { ComponentToken } from 'antd/es/typography/style'; - -/** - * @description Override TypographyComponentToken of antd. - */ -export type TypographyComponentToken = ComponentToken & {}; +import { ComponentToken as TypographyComponentTokenAntd } from 'antd/es/typography/style'; +//#region Define props +type TypographyProps = GetProps; type TypographyLinkProps = GetProps; +type TypographyParagraphProps = GetProps; type TypographyTextProps = GetProps; type TypographyTitleProps = GetProps; -type TypographyParagraphProps = GetProps; +//#endregion -export interface RdTypographyLinkProps extends TypographyLinkProps {} -export interface RdTypographyTextProps extends Omit { +//#region Custom component token +type TypographyComponentTokenExtend = {}; +//#endregion + +//#region Custom props +type TypographyPropsExtend = {}; +type TypographyLinkPropsExtend = {}; +type TypographyParagraphPropsExtend = {}; +type TypographyTextPropsExtend = { onChange?: (value: string) => void; -} -export interface RdTypographyTitleProps extends TypographyTitleProps {} -export interface RdTypographyParagraphProps extends TypographyParagraphProps {} +}; +type TypographyTitlePropsExtend = {}; +//#endregion + +//#region export type +export type RdTypographyProps = TypographyProps & TypographyPropsExtend; +export type RdTypographyLinkProps = TypographyLinkProps & TypographyLinkPropsExtend; +export type RdTypographyParagraphProps = TypographyParagraphProps & TypographyParagraphPropsExtend; +export type RdTypographyTextProps = TypographyTextProps & TypographyTextPropsExtend; +export type RdTypographyTitleProps = TypographyTitleProps & TypographyTitlePropsExtend; -export interface TypographyCompoundedComponent { - Link: RdTypographyLinkProps; - Text: RdTypographyTextProps; - Title: RdTypographyTitleProps; - Paragraph: RdTypographyParagraphProps; -} +export type RdTypographyComponentToken = TypographyComponentTokenAntd & + TypographyComponentTokenExtend; +//#endregion From f53cba36da80fc0d0b6898b2b5c0b3e9d97572d6 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:28:26 +0700 Subject: [PATCH 33/84] refactor: Change Flex typescript --- src/atomics/Flex/Flex.tsx | 4 ++-- src/atomics/Flex/types.ts | 23 ++++++++++++++++------- 2 files changed, 18 insertions(+), 9 deletions(-) diff --git a/src/atomics/Flex/Flex.tsx b/src/atomics/Flex/Flex.tsx index 9240fcd..eef662d 100644 --- a/src/atomics/Flex/Flex.tsx +++ b/src/atomics/Flex/Flex.tsx @@ -1,8 +1,8 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { FlexStyles } from './styles'; -import { IFlexProps } from './types'; +import { RdFlexProps } from './types'; -export const Flex = ({ ...antdProps }: IFlexProps) => { +export const Flex = ({ ...antdProps }: RdFlexProps) => { return ( diff --git a/src/atomics/Flex/types.ts b/src/atomics/Flex/types.ts index 52b78e7..68f0691 100644 --- a/src/atomics/Flex/types.ts +++ b/src/atomics/Flex/types.ts @@ -1,11 +1,20 @@ import { Flex, GetProps } from 'antd'; -import { ComponentToken } from 'antd/es/flex/style'; - -/** - * @description Override FlexComponentToken of antd. - */ -export type FlexComponentToken = ComponentToken & {}; +import { ComponentToken as FlexComponentTokenAntd } from 'antd/es/flex/style'; +//#region Define props type FlexProps = GetProps; +//#endregion + +//#region Custom component token +type FlexComponentTokenExtend = {}; +//#endregion + +//#region Custom props +type FlexPropsExtend = {}; +//#endregion + +//#region export type +export type RdFlexProps = FlexProps & FlexPropsExtend; -export interface IFlexProps extends FlexProps {} +export type RdFlexComponentToken = FlexComponentTokenAntd & FlexComponentTokenExtend; +//#endregion From 2ec1ec63caef7ee4e7ba8743a887f42035b26f43 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:28:42 +0700 Subject: [PATCH 34/84] feature: remove TextError export --- src/atomics/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/atomics/index.ts b/src/atomics/index.ts index 9b75e56..5df4046 100644 --- a/src/atomics/index.ts +++ b/src/atomics/index.ts @@ -1,3 +1,2 @@ export * from './Flex/index'; -export * from './TextError/index'; export * from './Typography'; From 74de1161a0e490ad037e7baf61c30b51f0880bb1 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:29:07 +0700 Subject: [PATCH 35/84] refactor: Avatar molecule typescript --- src/molecules/Avatar/types.ts | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/molecules/Avatar/types.ts b/src/molecules/Avatar/types.ts index 6783f74..870d2bb 100644 --- a/src/molecules/Avatar/types.ts +++ b/src/molecules/Avatar/types.ts @@ -1,11 +1,19 @@ -import { AvatarProps } from 'antd'; -import { ComponentToken } from 'antd/es/avatar/style'; +import { Avatar, GetProps } from 'antd'; +import { ComponentToken as AvatarComponentTokenAntd } from 'antd/es/avatar/style'; -/** - * @description Override AvatarComponentToken of antd. - */ -export type AvatarComponentToken = ComponentToken & {}; +//#region Define props +type AvatarProps = GetProps; +//#endregion +//#region Custom component token +type AvatarComponentTokenExtend = {}; +//#endregion + +//#region Custom props type AvatarPropsExtend = {}; +//#endregion +//#region export type export type RdAvatarProps = AvatarProps & AvatarPropsExtend; +export type RdAvatarComponentToken = AvatarComponentTokenAntd & AvatarComponentTokenExtend; +//#endregion From 62b65623d2ac7de6dc234f3b0d36c724901e384b Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:29:21 +0700 Subject: [PATCH 36/84] refactor: Breadcrumb molecule typescript --- src/molecules/Breadcrumb/types.ts | 24 ++++++++++++++++-------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/src/molecules/Breadcrumb/types.ts b/src/molecules/Breadcrumb/types.ts index de7e446..a2dbf9d 100644 --- a/src/molecules/Breadcrumb/types.ts +++ b/src/molecules/Breadcrumb/types.ts @@ -1,11 +1,19 @@ -import { BreadcrumbProps } from 'antd'; -import { ComponentToken } from 'antd/es/breadcrumb/style'; +import { Breadcrumb, GetProps } from 'antd'; +import { ComponentToken as BreadcrumbComponentTokenAntd } from 'antd/es/breadcrumb/style'; -/** - * @description Override BreadcrumbComponentToken of antd. - */ -export type BreadcrumbComponentToken = ComponentToken & {}; +//#region Define props +type BreadcrumbProps = GetProps; +//#endregion -type RdBreadcrumbPropsExtend = {}; +//#region Custom component token +type BreadcrumbComponentTokenExtend = {}; +//#endregion -export type RdBreadcrumbProps = BreadcrumbProps & RdBreadcrumbPropsExtend; +//#region Custom props +type BreadcrumbPropsExtend = {}; +//#endregion + +//#region export type +export type RdBreadcrumbProps = BreadcrumbProps & BreadcrumbPropsExtend; +export type RdBreadcrumbComponentToken = BreadcrumbComponentTokenAntd & BreadcrumbComponentTokenExtend; +//#endregion From c9f1ca2e11561dedcac9d863a59b7af2adcea3ed Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:29:50 +0700 Subject: [PATCH 37/84] feature: Add DatePicker molecule --- src/molecules/DatePicker/DatePicker.tsx | 24 +++++++++++++ src/molecules/DatePicker/MonthPicker.tsx | 11 ++++++ src/molecules/DatePicker/QuarterPicker.tsx | 11 ++++++ src/molecules/DatePicker/RangePicker.tsx | 11 ++++++ src/molecules/DatePicker/TimePicker.tsx | 11 ++++++ src/molecules/DatePicker/WeekPicker.tsx | 11 ++++++ src/molecules/DatePicker/YearPicker.tsx | 11 ++++++ src/molecules/DatePicker/index.tsx | 2 ++ src/molecules/DatePicker/styles.tsx | 10 ++++++ src/molecules/DatePicker/types.ts | 39 ++++++++++++++++++++++ 10 files changed, 141 insertions(+) create mode 100644 src/molecules/DatePicker/DatePicker.tsx create mode 100644 src/molecules/DatePicker/MonthPicker.tsx create mode 100644 src/molecules/DatePicker/QuarterPicker.tsx create mode 100644 src/molecules/DatePicker/RangePicker.tsx create mode 100644 src/molecules/DatePicker/TimePicker.tsx create mode 100644 src/molecules/DatePicker/WeekPicker.tsx create mode 100644 src/molecules/DatePicker/YearPicker.tsx create mode 100644 src/molecules/DatePicker/index.tsx create mode 100644 src/molecules/DatePicker/styles.tsx create mode 100644 src/molecules/DatePicker/types.ts diff --git a/src/molecules/DatePicker/DatePicker.tsx b/src/molecules/DatePicker/DatePicker.tsx new file mode 100644 index 0000000..0b58aa2 --- /dev/null +++ b/src/molecules/DatePicker/DatePicker.tsx @@ -0,0 +1,24 @@ +import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { MonthPicker } from './MonthPicker'; +import { QuarterPicker } from './QuarterPicker'; +import { RangePicker } from './RangePicker'; +import { DatePickerStyles } from './styles'; +import { TimePicker } from './TimePicker'; +import { RdDatePickerProps } from './types'; +import { WeekPicker } from './WeekPicker'; +import { YearPicker } from './YearPicker'; + +export const DatePicker = ({ ...antdProps }: RdDatePickerProps) => { + return ( + + + + ); +}; + +DatePicker.WeekPicker = WeekPicker; +DatePicker.MonthPicker = MonthPicker; +DatePicker.YearPicker = YearPicker; +DatePicker.RangePicker = RangePicker; +DatePicker.TimePicker = TimePicker; +DatePicker.QuarterPicker = QuarterPicker diff --git a/src/molecules/DatePicker/MonthPicker.tsx b/src/molecules/DatePicker/MonthPicker.tsx new file mode 100644 index 0000000..71b1f00 --- /dev/null +++ b/src/molecules/DatePicker/MonthPicker.tsx @@ -0,0 +1,11 @@ +import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { MonthPickerStyles } from './styles'; +import { RdMonthPickerProps } from './types'; + +export const MonthPicker = ({ ...antdProps }: RdMonthPickerProps) => { + return ( + + + + ); +}; diff --git a/src/molecules/DatePicker/QuarterPicker.tsx b/src/molecules/DatePicker/QuarterPicker.tsx new file mode 100644 index 0000000..498bc79 --- /dev/null +++ b/src/molecules/DatePicker/QuarterPicker.tsx @@ -0,0 +1,11 @@ +import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { QuarterPickerStyles } from './styles'; +import { RdQuarterPickerProps } from './types'; + +export const QuarterPicker = ({ ...antdProps }: RdQuarterPickerProps) => { + return ( + + + + ); +}; diff --git a/src/molecules/DatePicker/RangePicker.tsx b/src/molecules/DatePicker/RangePicker.tsx new file mode 100644 index 0000000..1eb195d --- /dev/null +++ b/src/molecules/DatePicker/RangePicker.tsx @@ -0,0 +1,11 @@ +import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { RangePickerStyles } from './styles'; +import { RdRangePickerProps } from './types'; + +export const RangePicker = ({ ...antdProps }: RdRangePickerProps) => { + return ( + + + + ); +}; diff --git a/src/molecules/DatePicker/TimePicker.tsx b/src/molecules/DatePicker/TimePicker.tsx new file mode 100644 index 0000000..359fedd --- /dev/null +++ b/src/molecules/DatePicker/TimePicker.tsx @@ -0,0 +1,11 @@ +import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { TimePickerStyles } from './styles'; +import { RdTimePickerProps } from './types'; + +export const TimePicker = ({ ...antdProps }: RdTimePickerProps) => { + return ( + + + + ); +}; diff --git a/src/molecules/DatePicker/WeekPicker.tsx b/src/molecules/DatePicker/WeekPicker.tsx new file mode 100644 index 0000000..03d6c8e --- /dev/null +++ b/src/molecules/DatePicker/WeekPicker.tsx @@ -0,0 +1,11 @@ +import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { WeekPickerStyles } from './styles'; +import { RdWeekPickerProps } from './types'; + +export const WeekPicker = ({ ...antdProps }: RdWeekPickerProps) => { + return ( + + + + ); +}; diff --git a/src/molecules/DatePicker/YearPicker.tsx b/src/molecules/DatePicker/YearPicker.tsx new file mode 100644 index 0000000..d8ec375 --- /dev/null +++ b/src/molecules/DatePicker/YearPicker.tsx @@ -0,0 +1,11 @@ +import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { YearPickerStyles } from './styles'; +import { RdYearPickerProps } from './types'; + +export const YearPicker = ({ ...antdProps }: RdYearPickerProps) => { + return ( + + + + ); +}; diff --git a/src/molecules/DatePicker/index.tsx b/src/molecules/DatePicker/index.tsx new file mode 100644 index 0000000..8b43604 --- /dev/null +++ b/src/molecules/DatePicker/index.tsx @@ -0,0 +1,2 @@ +export * from './DatePicker'; +export * from './types'; diff --git a/src/molecules/DatePicker/styles.tsx b/src/molecules/DatePicker/styles.tsx new file mode 100644 index 0000000..510cc02 --- /dev/null +++ b/src/molecules/DatePicker/styles.tsx @@ -0,0 +1,10 @@ +import styled from '@emotion/styled'; +import { DatePicker } from 'antd'; + +export const DatePickerStyles = styled(DatePicker)``; +export const WeekPickerStyles = styled(DatePicker.WeekPicker)``; +export const MonthPickerStyles = styled(DatePicker.MonthPicker)``; +export const YearPickerStyles = styled(DatePicker.YearPicker)``; +export const RangePickerStyles = styled(DatePicker.RangePicker)``; +export const TimePickerStyles = styled(DatePicker.TimePicker)``; +export const QuarterPickerStyles = styled(DatePicker.QuarterPicker)``; \ No newline at end of file diff --git a/src/molecules/DatePicker/types.ts b/src/molecules/DatePicker/types.ts new file mode 100644 index 0000000..db1407f --- /dev/null +++ b/src/molecules/DatePicker/types.ts @@ -0,0 +1,39 @@ +import { DatePicker, GetProps } from 'antd'; +import { ComponentToken as DatePickerComponentTokenAntd } from 'antd/es/date-picker/style'; + +//#region Define props +type DatePickerProps = GetProps; +type WeekPickerProps = GetProps; +type MonthPickerProps = GetProps; +type YearPickerProps = GetProps; +type RangePickerProps = GetProps; +type TimePickerProps = GetProps; +type QuarterPickerProps = GetProps; +//#endregion + +//#region Custom component token +type DatePickerComponentTokenExtend = {}; +//#endregion + +//#region Custom props +type DatePickerPropsExtend = {}; +type WeekPickerPropsExtend = {}; +type MonthPickerPropsExtend = {}; +type YearPickerPropsExtend = {}; +type RangePickerPropsExtend = {}; +type TimePickerPropsExtend = {}; +type QuarterPickerPropsExtend = {}; +//#endregion + +//#region export type +export type RdDatePickerProps = DatePickerProps & DatePickerPropsExtend; +export type RdWeekPickerProps = WeekPickerProps & WeekPickerPropsExtend; +export type RdMonthPickerProps = MonthPickerProps & MonthPickerPropsExtend; +export type RdYearPickerProps = YearPickerProps & YearPickerPropsExtend; +export type RdRangePickerProps = RangePickerProps & RangePickerPropsExtend; +export type RdTimePickerProps = TimePickerProps & TimePickerPropsExtend; +export type RdQuarterPickerProps = QuarterPickerProps & QuarterPickerPropsExtend; + +export type RdDatePickerComponentToken = DatePickerComponentTokenAntd & + DatePickerComponentTokenExtend; +//#endregion From 2ccc69ce12f657c90c2f2d6a8f186e75b4a0d796 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:30:06 +0700 Subject: [PATCH 38/84] feature: Add Grid molecule --- src/molecules/Grid/Col.tsx | 11 +++++++++++ src/molecules/Grid/Row.tsx | 11 +++++++++++ src/molecules/Grid/index.tsx | 3 +++ src/molecules/Grid/styles.tsx | 5 +++++ src/molecules/Grid/types.ts | 23 +++++++++++++++++++++++ 5 files changed, 53 insertions(+) create mode 100644 src/molecules/Grid/Col.tsx create mode 100644 src/molecules/Grid/Row.tsx create mode 100644 src/molecules/Grid/index.tsx create mode 100644 src/molecules/Grid/styles.tsx create mode 100644 src/molecules/Grid/types.ts diff --git a/src/molecules/Grid/Col.tsx b/src/molecules/Grid/Col.tsx new file mode 100644 index 0000000..f4642b6 --- /dev/null +++ b/src/molecules/Grid/Col.tsx @@ -0,0 +1,11 @@ +import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { ColStyles } from './styles'; +import { RdColProps } from './types'; + +export const Col = ({ ...antdProps }: RdColProps) => { + return ( + + + + ); +}; diff --git a/src/molecules/Grid/Row.tsx b/src/molecules/Grid/Row.tsx new file mode 100644 index 0000000..6595619 --- /dev/null +++ b/src/molecules/Grid/Row.tsx @@ -0,0 +1,11 @@ +import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { RowStyles } from './styles'; +import { RdRowProps } from './types'; + +export const Row = ({ ...antdProps }: RdRowProps) => { + return ( + + + + ); +}; diff --git a/src/molecules/Grid/index.tsx b/src/molecules/Grid/index.tsx new file mode 100644 index 0000000..c8b06a8 --- /dev/null +++ b/src/molecules/Grid/index.tsx @@ -0,0 +1,3 @@ +export * from './Col'; +export * from './Row'; +export * from './types'; diff --git a/src/molecules/Grid/styles.tsx b/src/molecules/Grid/styles.tsx new file mode 100644 index 0000000..47ab9fb --- /dev/null +++ b/src/molecules/Grid/styles.tsx @@ -0,0 +1,5 @@ +import styled from '@emotion/styled'; +import { Col, Row } from 'antd'; + +export const ColStyles = styled(Col)``; +export const RowStyles = styled(Row)``; diff --git a/src/molecules/Grid/types.ts b/src/molecules/Grid/types.ts new file mode 100644 index 0000000..559d01d --- /dev/null +++ b/src/molecules/Grid/types.ts @@ -0,0 +1,23 @@ +import { Col, GetProps, Row } from 'antd'; +import { ComponentToken as GridComponentTokenAntd } from 'antd/es/grid/style'; + +//#region Define props +type ColProps = GetProps; +type RowProps = GetProps; +//#endregion + +//#region Custom component token +type GridComponentTokenExtend = {}; +//#endregion + +//#region Custom props +type ColPropsExtend = {}; +type RowPropsExtend = {}; +//#endregion + +//#region export type +export type RdColProps = ColProps & ColPropsExtend; +export type RdRowProps = RowProps & RowPropsExtend; + +export type RdGridComponentToken = GridComponentTokenAntd & GridComponentTokenExtend; +//#endregion From 2c0000de136b3597a3d9ad8c460ff4de780928e8 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:30:37 +0700 Subject: [PATCH 39/84] feature: Remove row and col molecule --- src/molecules/Col/Col.tsx | 11 ----------- src/molecules/Col/index.tsx | 2 -- src/molecules/Col/styles.tsx | 4 ---- src/molecules/Col/types.ts | 3 --- src/molecules/Row/Row.tsx | 11 ----------- src/molecules/Row/index.tsx | 2 -- src/molecules/Row/styles.tsx | 4 ---- src/molecules/Row/types.ts | 3 --- 8 files changed, 40 deletions(-) delete mode 100644 src/molecules/Col/Col.tsx delete mode 100644 src/molecules/Col/index.tsx delete mode 100644 src/molecules/Col/styles.tsx delete mode 100644 src/molecules/Col/types.ts delete mode 100644 src/molecules/Row/Row.tsx delete mode 100644 src/molecules/Row/index.tsx delete mode 100644 src/molecules/Row/styles.tsx delete mode 100644 src/molecules/Row/types.ts diff --git a/src/molecules/Col/Col.tsx b/src/molecules/Col/Col.tsx deleted file mode 100644 index f4642b6..0000000 --- a/src/molecules/Col/Col.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { ColStyles } from './styles'; -import { RdColProps } from './types'; - -export const Col = ({ ...antdProps }: RdColProps) => { - return ( - - - - ); -}; diff --git a/src/molecules/Col/index.tsx b/src/molecules/Col/index.tsx deleted file mode 100644 index 02a6989..0000000 --- a/src/molecules/Col/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -export * from './Col'; -export * from './types'; \ No newline at end of file diff --git a/src/molecules/Col/styles.tsx b/src/molecules/Col/styles.tsx deleted file mode 100644 index 57f5847..0000000 --- a/src/molecules/Col/styles.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import styled from '@emotion/styled'; -import { Col } from 'antd'; - -export const ColStyles = styled(Col)``; diff --git a/src/molecules/Col/types.ts b/src/molecules/Col/types.ts deleted file mode 100644 index 87a480b..0000000 --- a/src/molecules/Col/types.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { ColProps } from 'antd'; - -export interface RdColProps extends ColProps {} diff --git a/src/molecules/Row/Row.tsx b/src/molecules/Row/Row.tsx deleted file mode 100644 index 6595619..0000000 --- a/src/molecules/Row/Row.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { RowStyles } from './styles'; -import { RdRowProps } from './types'; - -export const Row = ({ ...antdProps }: RdRowProps) => { - return ( - - - - ); -}; diff --git a/src/molecules/Row/index.tsx b/src/molecules/Row/index.tsx deleted file mode 100644 index c677148..0000000 --- a/src/molecules/Row/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -export * from './Row'; -export * from './types'; \ No newline at end of file diff --git a/src/molecules/Row/styles.tsx b/src/molecules/Row/styles.tsx deleted file mode 100644 index d5b1d57..0000000 --- a/src/molecules/Row/styles.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import styled from '@emotion/styled'; -import { Row } from 'antd'; - -export const RowStyles = styled(Row)``; diff --git a/src/molecules/Row/types.ts b/src/molecules/Row/types.ts deleted file mode 100644 index 6c5a235..0000000 --- a/src/molecules/Row/types.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { RowProps } from 'antd'; - -export interface RdRowProps extends RowProps {} From 22512936f4ffcae8c87c43c164fcc3c3c8d6c8d6 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:31:37 +0700 Subject: [PATCH 40/84] feature: Done Input molecule in antd --- src/molecules/Input/Input.tsx | 34 ++++----- src/molecules/Input/InputControl.tsx | 56 --------------- src/molecules/Input/InputGroup.tsx | 11 +++ src/molecules/Input/InputPassword.tsx | 24 ------- src/molecules/Input/InputPasswordControl.tsx | 45 ------------ src/molecules/Input/InputTextArea.tsx | 24 ------- src/molecules/Input/InputTextAreaControl.tsx | 51 -------------- src/molecules/Input/OTP.tsx | 11 +++ src/molecules/Input/Password.tsx | 11 +++ src/molecules/Input/Search.tsx | 11 +++ src/molecules/Input/TextArea.tsx | 11 +++ src/molecules/Input/index.ts | 9 +-- src/molecules/Input/styles.tsx | 8 ++- src/molecules/Input/types.ts | 72 ++++++++++---------- 14 files changed, 112 insertions(+), 266 deletions(-) delete mode 100644 src/molecules/Input/InputControl.tsx create mode 100644 src/molecules/Input/InputGroup.tsx delete mode 100644 src/molecules/Input/InputPassword.tsx delete mode 100644 src/molecules/Input/InputPasswordControl.tsx delete mode 100644 src/molecules/Input/InputTextArea.tsx delete mode 100644 src/molecules/Input/InputTextAreaControl.tsx create mode 100644 src/molecules/Input/OTP.tsx create mode 100644 src/molecules/Input/Password.tsx create mode 100644 src/molecules/Input/Search.tsx create mode 100644 src/molecules/Input/TextArea.tsx diff --git a/src/molecules/Input/Input.tsx b/src/molecules/Input/Input.tsx index 3301741..b1f5dbf 100644 --- a/src/molecules/Input/Input.tsx +++ b/src/molecules/Input/Input.tsx @@ -1,34 +1,28 @@ import { InputProps } from 'antd'; import { forwardRef } from 'react'; -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { LabelField } from '../LabelField'; -import { InputPassword } from './InputPassword'; -import { InputTextArea } from './InputTextArea'; +import { InputGroup } from './InputGroup'; +import { OTP } from './OTP'; +import { Password } from './Password'; +import { Search } from './Search'; +import { TextArea } from './TextArea'; import { InputStyled } from './styles'; -import { InputCompoundedComponent, RdInputProps } from './types'; +import { RdInputCompoundedComponent, RdInputProps } from './types'; export const InputInternal = forwardRef((props: RdInputProps, ref: RdInputProps['ref']) => { - const { - label: labelFieldProps, - - ...antdProps - } = props; + const { ...antdProps } = props; return ( - - - + ); }); -export const Input = InputInternal as InputCompoundedComponent; +export const Input = InputInternal as RdInputCompoundedComponent; -Input.Password = InputPassword; -Input.TextArea = InputTextArea; \ No newline at end of file +Input.Password = Password; +Input.TextArea = TextArea; +Input.Search = Search; +Input.Group = InputGroup; +Input.OTP = OTP; \ No newline at end of file diff --git a/src/molecules/Input/InputControl.tsx b/src/molecules/Input/InputControl.tsx deleted file mode 100644 index e221faf..0000000 --- a/src/molecules/Input/InputControl.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { InputProps } from 'antd'; -import { useController } from 'react-hook-form'; -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { TextError } from '../../atomics'; -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; -import { LabelField } from '../LabelField'; -import { InputPasswordControl } from './InputPasswordControl'; -import { InputTextareaControl } from './InputTextAreaControl'; -import { InputStyled } from './styles'; -import { - InputControlCompoundedComponent, - RdInputControlProps -} from './types'; - -export const InputControlInternal = ({ - name, - control, - defaultValue, - - label: labelFieldProps, - - ...antdProps -}: RdInputControlProps) => { - const { - field: { value, onChange, onBlur, ref }, - fieldState: { invalid, error }, - } = useController({ - name, - control, - defaultValue, - }); - - return ( - - - - {invalid && {error?.message}} - - - ); -}; - -export const InputControl = InputControlInternal as InputControlCompoundedComponent; - -InputControl.Password = InputPasswordControl; -InputControl.TextArea = InputTextareaControl; diff --git a/src/molecules/Input/InputGroup.tsx b/src/molecules/Input/InputGroup.tsx new file mode 100644 index 0000000..754eb31 --- /dev/null +++ b/src/molecules/Input/InputGroup.tsx @@ -0,0 +1,11 @@ +import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { InputGroupStyled } from './styles'; +import { RdInputGroupProps } from './types'; + +export const InputGroup = ({ ...antdProps }: RdInputGroupProps) => { + return ( + + + + ); +}; diff --git a/src/molecules/Input/InputPassword.tsx b/src/molecules/Input/InputPassword.tsx deleted file mode 100644 index 198033d..0000000 --- a/src/molecules/Input/InputPassword.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { InputProps } from 'antd'; -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { LabelField } from '../LabelField'; -import { InputStyled } from './styles'; -import { RdInputPasswordProps } from './types'; - -export const InputPassword = ({ - label: labelFieldProps, - - ...antdProps -}: RdInputPasswordProps) => { - return ( - - - - - - ); -}; diff --git a/src/molecules/Input/InputPasswordControl.tsx b/src/molecules/Input/InputPasswordControl.tsx deleted file mode 100644 index cae5528..0000000 --- a/src/molecules/Input/InputPasswordControl.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { useController } from 'react-hook-form'; -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { TextError } from '../../atomics'; -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; -import { LabelField } from '../LabelField'; -import { InputPasswordStyled } from './styles'; -import { RdInputPasswordControlProps } from './types'; - -export const InputPasswordControl = ({ - name, - control, - defaultValue, - - label: labelFieldProps, - - ...antdProps -}: RdInputPasswordControlProps) => { - const { - field: { value, onChange, onBlur, ref }, - fieldState: { invalid, error }, - } = useController({ - name, - control, - defaultValue, - }); - - return ( - - - - - {invalid && {error?.message}} - - ); -}; diff --git a/src/molecules/Input/InputTextArea.tsx b/src/molecules/Input/InputTextArea.tsx deleted file mode 100644 index a09564e..0000000 --- a/src/molecules/Input/InputTextArea.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { TextAreaProps } from 'antd/es/input'; -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { LabelField } from '../LabelField'; -import { TextareaStyled } from './styles'; -import { RdInputTextareaProps } from './types'; - -export const InputTextArea = ({ - label: labelFieldProps, - - ...antdProps -}: RdInputTextareaProps) => { - return ( - - - - - - ); -}; diff --git a/src/molecules/Input/InputTextAreaControl.tsx b/src/molecules/Input/InputTextAreaControl.tsx deleted file mode 100644 index 8c5dfb6..0000000 --- a/src/molecules/Input/InputTextAreaControl.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { TextAreaProps } from 'antd/es/input'; -import { useController } from 'react-hook-form'; -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { TextError } from '../../atomics'; -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; -import { LabelField } from '../LabelField'; -import { TextareaStyled } from './styles'; -import { RdTextareaControlProps } from './types'; - -export const InputTextareaControl = ({ - name, - control, - - label: labelFieldProps, - - ...antdProps -}: RdTextareaControlProps) => { - const { - field: { value, onChange, onBlur, ref }, - fieldState: { invalid, error }, - } = useController({ - name, - control, - }); - - const handleChange = (event: React.ChangeEvent) => { - onChange(event.target.value); - - // Trigger the onChange event from antdProps - antdProps.onChange?.(event); - }; - - return ( - - - - - {invalid && {error?.message}} - - ); -}; diff --git a/src/molecules/Input/OTP.tsx b/src/molecules/Input/OTP.tsx new file mode 100644 index 0000000..6d57886 --- /dev/null +++ b/src/molecules/Input/OTP.tsx @@ -0,0 +1,11 @@ +import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { OTPStyled } from './styles'; +import { RdOTPProps } from './types'; + +export const OTP = ({ ...antdProps }: RdOTPProps) => { + return ( + + + + ); +}; diff --git a/src/molecules/Input/Password.tsx b/src/molecules/Input/Password.tsx new file mode 100644 index 0000000..24f57a2 --- /dev/null +++ b/src/molecules/Input/Password.tsx @@ -0,0 +1,11 @@ +import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { InputPasswordStyled } from './styles'; +import { RdPasswordProps } from './types'; + +export const Password = ({ ...antdProps }: RdPasswordProps) => { + return ( + + + + ); +}; diff --git a/src/molecules/Input/Search.tsx b/src/molecules/Input/Search.tsx new file mode 100644 index 0000000..693c404 --- /dev/null +++ b/src/molecules/Input/Search.tsx @@ -0,0 +1,11 @@ +import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { InputSearchStyled } from './styles'; +import { RdSearchProps } from './types'; + +export const Search = ({ ...antdProps }: RdSearchProps) => { + return ( + + + + ); +}; diff --git a/src/molecules/Input/TextArea.tsx b/src/molecules/Input/TextArea.tsx new file mode 100644 index 0000000..f66bd73 --- /dev/null +++ b/src/molecules/Input/TextArea.tsx @@ -0,0 +1,11 @@ +import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { TextAreaStyled } from './styles'; +import { RdTextAreaProps } from './types'; + +export const TextArea = ({ ...antdProps }: RdTextAreaProps) => { + return ( + + + + ); +}; diff --git a/src/molecules/Input/index.ts b/src/molecules/Input/index.ts index 9d42f5b..8dee646 100644 --- a/src/molecules/Input/index.ts +++ b/src/molecules/Input/index.ts @@ -1,11 +1,4 @@ export { Input } from './Input'; -export { InputControl } from './InputControl'; - -export * from './InputPassword'; -export * from './InputPasswordControl'; - -export * from './InputPassword'; -export * from './InputPasswordControl'; export * from './helper'; -export type * from './types'; \ No newline at end of file +export type * from './types'; diff --git a/src/molecules/Input/styles.tsx b/src/molecules/Input/styles.tsx index 4f20f6e..7273a88 100644 --- a/src/molecules/Input/styles.tsx +++ b/src/molecules/Input/styles.tsx @@ -5,4 +5,10 @@ export const InputStyled = styled(Input)``; export const InputPasswordStyled = styled(Input.Password)``; -export const TextareaStyled = styled(Input.TextArea)``; +export const TextAreaStyled = styled(Input.TextArea)``; + +export const InputSearchStyled = styled(Input.Search)``; + +export const InputGroupStyled = styled(Input.Group)``; + +export const OTPStyled = styled(Input.OTP)``; diff --git a/src/molecules/Input/types.ts b/src/molecules/Input/types.ts index 803252d..a2dc768 100644 --- a/src/molecules/Input/types.ts +++ b/src/molecules/Input/types.ts @@ -1,51 +1,49 @@ import { GetProps, Input } from 'antd'; -import { ComponentToken } from 'antd/es/input/style'; -import { RdRegistryControlField } from '../../models'; -import { RdLabelFieldWrapperProps } from '../LabelField/types'; +import { ComponentToken as InputComponentTokenAntd } from 'antd/es/input/style'; import { InputInternal } from './Input'; -import { InputControlInternal } from './InputControl'; -import { InputPassword } from './InputPassword'; -import { InputPasswordControl } from './InputPasswordControl'; -import { InputTextArea } from './InputTextArea'; -import { InputTextareaControl } from './InputTextAreaControl'; - -/** - * @description Override InputComponentToken of antd. - */ -export type InputComponentToken = ComponentToken & {}; +import { Search } from './Search'; +import { InputGroup } from './InputGroup'; +import { OTP } from './OTP'; +import { Password } from './Password'; +import { TextArea } from './TextArea'; +//#region Define props type InputProps = GetProps; +type SearchProps = GetProps; +type InputGroupProps = GetProps; +type OTPProps = GetProps; type PasswordProps = GetProps; type TextAreaProps = GetProps; - -//#region Input -export interface RdInputProps extends InputProps, RdLabelFieldWrapperProps {} - -export interface RdInputControlProps extends Omit, RdRegistryControlField {} //#endregion -//#region Input password -export interface RdInputPasswordProps extends PasswordProps, RdLabelFieldWrapperProps {} - -export interface RdInputPasswordControlProps - extends Omit, - RdRegistryControlField {} - +//#region Custom component token +type InputComponentTokenExtend = {}; //#endregion -//#region Input Textarea -export interface RdInputTextareaProps extends TextAreaProps, RdLabelFieldWrapperProps {} -export interface RdTextareaControlProps - extends Omit, - RdRegistryControlField {} +//#region Custom props +type InputPropsExtend = {}; +type SearchPropsExtend = {}; +type InputGroupPropsExtend = {}; +type OTPPropsExtend = {}; +type PasswordPropsExtend = {}; +type TextAreaPropsExtend = {}; //#endregion -export type InputCompoundedComponent = typeof InputInternal & { - Password: typeof InputPassword; - TextArea: typeof InputTextArea; +//#region export type +export type RdInputProps = InputProps & InputPropsExtend; +export type RdSearchProps = SearchProps & SearchPropsExtend; +export type RdInputGroupProps = InputGroupProps & InputGroupPropsExtend; +export type RdOTPProps = OTPProps & OTPPropsExtend; +export type RdPasswordProps = PasswordProps & PasswordPropsExtend; +export type RdTextAreaProps = TextAreaProps & TextAreaPropsExtend; + +export type RdInputCompoundedComponent = typeof InputInternal & { + Search: typeof Search; + Group: typeof InputGroup; + OTP: typeof OTP; + Password: typeof Password; + TextArea: typeof TextArea; }; -export type InputControlCompoundedComponent = typeof InputControlInternal & { - Password: typeof InputPasswordControl; - TextArea: typeof InputTextareaControl; -}; +export type RdInputComponentToken = InputComponentTokenAntd & InputComponentTokenExtend; +//#endregion From efdd8f3d3198443305a0504bdde945a1ca829d13 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:32:14 +0700 Subject: [PATCH 41/84] feature: remove control component and change typescript Checkbox molecule --- src/molecules/Checkbox/Checkbox.tsx | 16 +------ src/molecules/Checkbox/CheckboxControl.tsx | 40 ---------------- src/molecules/Checkbox/CheckboxGroup.tsx | 17 +------ .../Checkbox/CheckboxGroupControl.tsx | 46 ------------------- src/molecules/Checkbox/index.ts | 1 - src/molecules/Checkbox/styles.tsx | 7 +-- src/molecules/Checkbox/types.ts | 36 ++++++--------- src/molecules/Checkbox/types.ts(Will_Delete) | 31 +++++++++++++ 8 files changed, 50 insertions(+), 144 deletions(-) delete mode 100644 src/molecules/Checkbox/CheckboxControl.tsx delete mode 100644 src/molecules/Checkbox/CheckboxGroupControl.tsx create mode 100644 src/molecules/Checkbox/types.ts(Will_Delete) diff --git a/src/molecules/Checkbox/Checkbox.tsx b/src/molecules/Checkbox/Checkbox.tsx index dde04b8..db5e3a3 100644 --- a/src/molecules/Checkbox/Checkbox.tsx +++ b/src/molecules/Checkbox/Checkbox.tsx @@ -1,26 +1,14 @@ -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { LabelField } from '../LabelField'; import { CheckboxGroup } from './CheckboxGroup'; import { CheckboxStyles } from './styles'; import { RdCheckboxProps } from './types'; export const Checkbox = (props: RdCheckboxProps) => { - const { - label: labelFieldProps, - - ...antdProps - } = props; + const { ...antdProps } = props; return ( - - - + ); }; diff --git a/src/molecules/Checkbox/CheckboxControl.tsx b/src/molecules/Checkbox/CheckboxControl.tsx deleted file mode 100644 index aba5b79..0000000 --- a/src/molecules/Checkbox/CheckboxControl.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { useController } from 'react-hook-form'; -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { TextError } from '../../atomics'; -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; -import { LabelField } from '../LabelField'; -import { CheckboxGroupControl } from './CheckboxGroupControl'; -import { CheckboxStyles } from './styles'; -import { RdCheckboxControlProps } from './types'; - -export const CheckboxControl = ({ - name, - control, - - label: labelFieldProps, - - ...antdProps -}: RdCheckboxControlProps) => { - const { - field: { value, onChange, ref }, - fieldState: { invalid, error }, - } = useController({ - name, - control, - }); - - return ( - - - - - {invalid && {error?.message}} - - ); -}; - -CheckboxControl.Group = CheckboxGroupControl; diff --git a/src/molecules/Checkbox/CheckboxGroup.tsx b/src/molecules/Checkbox/CheckboxGroup.tsx index 1c62d42..f35e287 100644 --- a/src/molecules/Checkbox/CheckboxGroup.tsx +++ b/src/molecules/Checkbox/CheckboxGroup.tsx @@ -1,28 +1,15 @@ import { forwardRef } from 'react'; -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { LabelField } from '../LabelField'; import { CheckboxGroupStyles } from './styles'; import { RdCheckboxGroupProps } from './types'; export const CheckboxGroup = forwardRef( (props: RdCheckboxGroupProps, ref: RdCheckboxGroupProps['ref']) => { - const { - label: labelFieldProps, - axis = 'horizontal', - - ...antdProps - } = props; + const { ...antdProps } = props; return ( - - - + ); } diff --git a/src/molecules/Checkbox/CheckboxGroupControl.tsx b/src/molecules/Checkbox/CheckboxGroupControl.tsx deleted file mode 100644 index ab58a65..0000000 --- a/src/molecules/Checkbox/CheckboxGroupControl.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { Checkbox as CheckboxAntd } from 'antd'; -import { useController } from 'react-hook-form'; -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { TextError } from '../../atomics'; -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; -import { LabelField } from '../LabelField'; -import { RdCheckboxGroupControlProps } from './types'; -import { CheckboxGroupStyles } from './styles'; - -export const CheckboxGroupControl = ({ - name, - control, - - label: labelFieldProps, - - axis = 'horizontal', - - ...antdProps -}: RdCheckboxGroupControlProps) => { - const { - field: { value, onChange, ref }, - fieldState: { invalid, error }, - } = useController({ - name, - control, - }); - - return ( - - - - - {invalid && {error?.message}} - - ); -}; diff --git a/src/molecules/Checkbox/index.ts b/src/molecules/Checkbox/index.ts index 496eae0..737dd2f 100644 --- a/src/molecules/Checkbox/index.ts +++ b/src/molecules/Checkbox/index.ts @@ -1,3 +1,2 @@ export * from './Checkbox'; -export * from './CheckboxControl'; export type * from './types'; diff --git a/src/molecules/Checkbox/styles.tsx b/src/molecules/Checkbox/styles.tsx index 48be501..8814252 100644 --- a/src/molecules/Checkbox/styles.tsx +++ b/src/molecules/Checkbox/styles.tsx @@ -1,10 +1,5 @@ import styled from '@emotion/styled'; import { Checkbox } from 'antd'; -import { TAxis } from '../../models'; -import { getAxisStyles } from '../../utils/styles'; export const CheckboxStyles = styled(Checkbox)``; - -export const CheckboxGroupStyles = styled(Checkbox.Group)<{ axis?: TAxis }>` - ${props => getAxisStyles(props.axis)} -`; +export const CheckboxGroupStyles = styled(Checkbox.Group)``; diff --git a/src/molecules/Checkbox/types.ts b/src/molecules/Checkbox/types.ts index fcc9074..9a8f954 100644 --- a/src/molecules/Checkbox/types.ts +++ b/src/molecules/Checkbox/types.ts @@ -1,31 +1,23 @@ import { Checkbox, GetProps } from 'antd'; -import { RdRegistryControlField, TAxis } from '../../models'; -import { RdLabelFieldWrapperProps } from '../LabelField/types'; import { ComponentToken } from 'antd/es/checkbox/style'; +//#region Define props type CheckboxProps = GetProps; type CheckboxGroupProps = GetProps; +//#endregion -/** - * @description Override CheckboxComponentToken of antd. - */ -export type CheckboxComponentToken = ComponentToken & {}; +//#region Custom component token +type CheckboxComponentTokenExtend = {}; +type CheckboxGroupComponentTokenExtend = {}; +//#endregion -type RdCheckboxBaseProps = {}; +//#region Custom props +type CheckboxPropsExtend = {}; +//#endregion -export type RdCheckboxProps = CheckboxProps & RdCheckboxBaseProps & RdLabelFieldWrapperProps & {}; +//#region export type +export type RdCheckboxProps = CheckboxProps & CheckboxPropsExtend; +export type RdCheckboxGroupProps = CheckboxGroupProps & CheckboxGroupComponentTokenExtend; -export type RdCheckboxControlProps = Omit & RdRegistryControlField & {}; - -export type RdCheckboxGroupProps = CheckboxGroupProps & - RdCheckboxBaseProps & - RdLabelFieldWrapperProps & { - /** - * @description The axis of options in CheckboxGroup. - * @default 'horizontal' - */ - axis?: TAxis; - }; -export interface RdCheckboxGroupControlProps - extends Omit, - RdRegistryControlField {} +export type CheckboxComponentToken = ComponentToken & CheckboxComponentTokenExtend; +//#endregion diff --git a/src/molecules/Checkbox/types.ts(Will_Delete) b/src/molecules/Checkbox/types.ts(Will_Delete) new file mode 100644 index 0000000..2412fc8 --- /dev/null +++ b/src/molecules/Checkbox/types.ts(Will_Delete) @@ -0,0 +1,31 @@ +import { Checkbox, GetProps } from 'antd'; +import { RdRegistryControlField } from '../../models'; +import { RdLabelFieldWrapperProps } from '../LabelField/types'; +import { ComponentToken } from 'antd/es/checkbox/style'; + +type CheckboxProps = GetProps; +type CheckboxGroupProps = GetProps; + +/** + * @description Override CheckboxComponentToken of antd. + */ +export type CheckboxComponentToken = ComponentToken & {}; + +type RdCheckboxBaseProps = {}; + +export type RdCheckboxProps = CheckboxProps & RdCheckboxBaseProps & RdLabelFieldWrapperProps & {}; + +export type RdCheckboxControlProps = Omit & RdRegistryControlField & {}; + +export type RdCheckboxGroupProps = CheckboxGroupProps & + RdCheckboxBaseProps & + RdLabelFieldWrapperProps & { + /** + * @description The axis of options in CheckboxGroup. + * @default 'horizontal' + */ + axis?: TAxis; + }; +export interface RdCheckboxGroupControlProps + extends Omit, + RdRegistryControlField {} From 5031c530ea32009794f991138500178e0a642f8b Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:32:33 +0700 Subject: [PATCH 42/84] refactor: Collapse molecule typescript --- src/molecules/Collapse/types.ts | 25 ++++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/src/molecules/Collapse/types.ts b/src/molecules/Collapse/types.ts index 5ce2c71..7683252 100644 --- a/src/molecules/Collapse/types.ts +++ b/src/molecules/Collapse/types.ts @@ -1,9 +1,20 @@ -import { CollapseProps } from 'antd'; -import { ComponentToken } from 'antd/es/collapse/style'; +import { Collapse, GetProps } from 'antd'; +import { ComponentToken as CollapseComponentTokenAntd } from 'antd/es/collapse/style'; -/** - * @description Override CollapseComponentToken of antd. - */ -export type CollapseComponentToken = ComponentToken & {}; +//#region Define props +type CollapseProps = GetProps; +//#endregion -export interface RdCollapseProps extends CollapseProps {} +//#region Custom component token +type CollapseComponentTokenExtend = {}; +//#endregion + +//#region Custom props +type CollapsePropsExtend = {}; +//#endregion + +//#region export type +export type RdCollapseProps = CollapseProps & CollapsePropsExtend; + +export type RdCollapseComponentToken = CollapseComponentTokenAntd & CollapseComponentTokenExtend; +//#endregion From 9f123d8bd7851fbbba1aa86e5035259fd375e0b6 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:32:40 +0700 Subject: [PATCH 43/84] refactor: Divider molecule typescript --- src/molecules/Divider/types.ts | 24 +++++++++++++++++------- 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/src/molecules/Divider/types.ts b/src/molecules/Divider/types.ts index b5fbc6b..fab04d6 100644 --- a/src/molecules/Divider/types.ts +++ b/src/molecules/Divider/types.ts @@ -1,9 +1,19 @@ -import { DividerProps } from 'antd'; -import { ComponentToken } from 'antd/es/divider/style'; +import { Divider, GetProps } from 'antd'; +import { ComponentToken as DividerComponentTokenAntd } from 'antd/es/divider/style'; -/** - * @description Override DividerComponentToken of antd. - */ -export type DividerComponentToken = ComponentToken & {}; +//#region Define props +type DividerProps = GetProps; +//#endregion -export interface RdDividerProps extends DividerProps {} +//#region Custom component token +type DividerComponentTokenExtend = {}; +//#endregion + +//#region Custom props +type DividerPropsExtend = {}; +//#endregion + +//#region export type +export type RdDividerProps = DividerProps & DividerPropsExtend; +export type RdDividerComponentToken = DividerComponentTokenAntd & DividerComponentTokenExtend; +//#endregion From 15684b06c7b57abe50436342763696288fc72c1a Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:32:54 +0700 Subject: [PATCH 44/84] refactor: Menu molecule typescript --- src/molecules/Menu/types.ts | 24 +++++++++++++++++------- 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/src/molecules/Menu/types.ts b/src/molecules/Menu/types.ts index ab2b51c..682250c 100644 --- a/src/molecules/Menu/types.ts +++ b/src/molecules/Menu/types.ts @@ -1,9 +1,19 @@ -import { MenuProps } from 'antd'; -import { ComponentToken } from 'antd/es/menu/style'; +import { Menu, GetProps } from 'antd'; +import { ComponentToken as MenuComponentTokenAntd } from 'antd/es/menu/style'; -/** - * @description Override MenuComponentToken of antd. - */ -export type MenuComponentToken = ComponentToken & {}; +//#region Define props +type MenuProps = GetProps; +//#endregion -export interface RdMenuProps extends MenuProps {} +//#region Custom component token +type MenuComponentTokenExtend = {}; +//#endregion + +//#region Custom props +type MenuPropsExtend = {}; +//#endregion + +//#region export type +export type RdMenuProps = MenuProps & MenuPropsExtend; +export type RdMenuComponentToken = MenuComponentTokenAntd & MenuComponentTokenExtend; +//#endregion From 213d9f29b171c0500e702cdc667ed4b0b9c306c9 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:33:01 +0700 Subject: [PATCH 45/84] refactor: Modal molecule typescript --- src/molecules/Modal/types.ts | 25 ++++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/src/molecules/Modal/types.ts b/src/molecules/Modal/types.ts index 812a217..8b78519 100644 --- a/src/molecules/Modal/types.ts +++ b/src/molecules/Modal/types.ts @@ -1,9 +1,20 @@ -import { ModalProps } from 'antd'; -import { ComponentToken } from 'antd/es/modal/style'; +import { Modal, GetProps } from 'antd'; +import { ComponentToken as ModalComponentTokenAntd } from 'antd/es/modal/style'; -/** - * @description Override ModalComponentToken of antd. - */ -export type ModalComponentToken = ComponentToken & {}; +//#region Define props +type ModalProps = GetProps; +//#endregion -export interface RdModalProps extends ModalProps {} +//#region Custom component token +type ModalComponentTokenExtend = {}; +//#endregion + +//#region Custom props +type ModalPropsExtend = {}; +//#endregion + +//#region export type +export type RdModalProps = ModalProps & ModalPropsExtend; + +export type RdModalComponentToken = ModalComponentTokenAntd & ModalComponentTokenExtend; +//#endregion From 0f584f2d0f8a163e2ff8dbf0824cc7bba0de2a50 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:33:08 +0700 Subject: [PATCH 46/84] refactor: Popover molecule typescript --- src/molecules/Popover/types.ts | 24 +++++++++++++++++------- 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/src/molecules/Popover/types.ts b/src/molecules/Popover/types.ts index 2dac518..99ee72e 100644 --- a/src/molecules/Popover/types.ts +++ b/src/molecules/Popover/types.ts @@ -1,9 +1,19 @@ -import { PopoverProps } from 'antd'; -import { ComponentToken } from 'antd/es/popover/style'; +import { Popover, GetProps } from 'antd'; +import { ComponentToken as PopoverComponentTokenAntd } from 'antd/es/popover/style'; -/** - * @description Override PopoverComponentToken of antd. - */ -export type PopoverComponentToken = ComponentToken & {}; +//#region Define props +type PopoverProps = GetProps; +//#endregion -export interface RdPopoverProps extends PopoverProps {} +//#region Custom component token +type PopoverComponentTokenExtend = {}; +//#endregion + +//#region Custom props +type PopoverPropsExtend = {}; +//#endregion + +//#region export type +export type RdPopoverProps = PopoverProps & PopoverPropsExtend; +export type RdPopoverComponentToken = PopoverComponentTokenAntd & PopoverComponentTokenExtend; +//#endregion From 982b1a489f4def312e49f6bcecb452ce809d0986 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:33:43 +0700 Subject: [PATCH 47/84] refactor: Skeleton, Slider, Spin, Tabs, Tooltip molecules typescript --- src/molecules/Skeleton/types.ts | 26 +++++++++++++++++--------- src/molecules/Slider/types.ts | 26 ++++++++++++++++---------- src/molecules/Spin/types.ts | 26 +++++++++++++++++--------- src/molecules/Tabs/types.ts | 24 +++++++++++++++++------- src/molecules/Tooltip/Tooltip.tsx | 22 ++++++++++------------ src/molecules/Tooltip/types.ts | 20 +++++++++++++------- 6 files changed, 90 insertions(+), 54 deletions(-) diff --git a/src/molecules/Skeleton/types.ts b/src/molecules/Skeleton/types.ts index fbc53ac..c782aba 100644 --- a/src/molecules/Skeleton/types.ts +++ b/src/molecules/Skeleton/types.ts @@ -1,11 +1,19 @@ -import { SkeletonProps } from 'antd'; -import { ComponentToken } from 'antd/es/skeleton/style'; +import { Skeleton, GetProps } from 'antd'; +import { ComponentToken as SkeletonComponentTokenAntd } from 'antd/es/skeleton/style'; -/** - * @description Override SkeletonComponentToken of antd. - */ -export type SkeletonComponentToken = ComponentToken & {}; +//#region Define props +type SkeletonProps = GetProps; +//#endregion -export interface RdSkeletonProps extends SkeletonProps { - -} +//#region Custom component token +type SkeletonComponentTokenExtend = {}; +//#endregion + +//#region Custom props +type SkeletonPropsExtend = {}; +//#endregion + +//#region export type +export type RdSkeletonProps = SkeletonProps & SkeletonPropsExtend; +export type RdSkeletonComponentToken = SkeletonComponentTokenAntd & SkeletonComponentTokenExtend; +//#endregion diff --git a/src/molecules/Slider/types.ts b/src/molecules/Slider/types.ts index a4e82f3..70e0d37 100644 --- a/src/molecules/Slider/types.ts +++ b/src/molecules/Slider/types.ts @@ -1,13 +1,19 @@ -import { SliderSingleProps } from 'antd'; -import { SliderRangeProps } from 'antd/es/slider'; -import { ComponentToken } from 'antd/es/slider/style'; +import { Slider, GetProps } from 'antd'; +import { ComponentToken as SliderComponentTokenAntd } from 'antd/es/slider/style'; -/** - * @description Override SliderComponentToken of antd. - */ -export type SliderComponentToken = ComponentToken & {}; +//#region Define props +type SliderProps = GetProps; +//#endregion -export interface ISliderSingleProps extends SliderSingleProps {} -export interface ISliderRangeProps extends SliderRangeProps {} +//#region Custom component token +type SliderComponentTokenExtend = {}; +//#endregion -export type RdSliderProps = ISliderSingleProps | ISliderRangeProps; +//#region Custom props +type SliderPropsExtend = {}; +//#endregion + +//#region export type +export type RdSliderProps = SliderProps & SliderPropsExtend; +export type RdSliderComponentToken = SliderComponentTokenAntd & SliderComponentTokenExtend; +//#endregion diff --git a/src/molecules/Spin/types.ts b/src/molecules/Spin/types.ts index 6cecfc9..771a0a0 100644 --- a/src/molecules/Spin/types.ts +++ b/src/molecules/Spin/types.ts @@ -1,11 +1,19 @@ -import { SpinProps } from 'antd'; -import { ComponentToken } from 'antd/es/spin/style'; +import { Spin, GetProps } from 'antd'; +import { ComponentToken as SpinComponentTokenAntd } from 'antd/es/spin/style'; -/** - * @description Override SpinComponentToken of antd. - */ -export type SpinComponentToken = ComponentToken & {}; +//#region Define props +type SpinProps = GetProps; +//#endregion -export interface RdSpinProps extends SpinProps { - -} +//#region Custom component token +type SpinComponentTokenExtend = {}; +//#endregion + +//#region Custom props +type SpinPropsExtend = {}; +//#endregion + +//#region export type +export type RdSpinProps = SpinProps & SpinPropsExtend; +export type RdSpinComponentToken = SpinComponentTokenAntd & SpinComponentTokenExtend; +//#endregion diff --git a/src/molecules/Tabs/types.ts b/src/molecules/Tabs/types.ts index 80fa895..9ee9456 100644 --- a/src/molecules/Tabs/types.ts +++ b/src/molecules/Tabs/types.ts @@ -1,9 +1,19 @@ -import { TabsProps } from 'antd'; -import { ComponentToken } from 'antd/es/tabs/style'; +import { Tabs, GetProps } from 'antd'; +import { ComponentToken as TabsComponentTokenAntd } from 'antd/es/tabs/style'; -/** - * @description Override TabsComponentToken of antd. - */ -export type TabsComponentToken = ComponentToken & {}; +//#region Define props +type TabsProps = GetProps; +//#endregion -export interface RdTabsProps extends TabsProps {} +//#region Custom component token +type TabsComponentTokenExtend = {}; +//#endregion + +//#region Custom props +type TabsPropsExtend = {}; +//#endregion + +//#region export type +export type RdTabsProps = TabsProps & TabsPropsExtend; +export type RdTabsComponentToken = TabsComponentTokenAntd & TabsComponentTokenExtend; +//#endregion diff --git a/src/molecules/Tooltip/Tooltip.tsx b/src/molecules/Tooltip/Tooltip.tsx index 2109124..40a0083 100644 --- a/src/molecules/Tooltip/Tooltip.tsx +++ b/src/molecules/Tooltip/Tooltip.tsx @@ -1,17 +1,15 @@ import { TooltipRef } from 'antd/es/tooltip'; -import React from 'react'; +import { forwardRef } from 'react'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { TooltipStyles } from './styles'; import { RdTooltipProps } from './types'; -export const Tooltip = React.forwardRef( - ({ children, ...antdProps }, ref) => { - return ( - - - {children} - - - ); - } -); +export const Tooltip = forwardRef(({ children, ...antdProps }, ref) => { + return ( + + + {children} + + + ); +}); diff --git a/src/molecules/Tooltip/types.ts b/src/molecules/Tooltip/types.ts index 05e512d..9f545f9 100644 --- a/src/molecules/Tooltip/types.ts +++ b/src/molecules/Tooltip/types.ts @@ -1,13 +1,19 @@ -import { GetProps, Tooltip } from 'antd'; -import { ComponentToken } from 'antd/es/tooltip/style'; - -/** - * @description Override TooltipComponentToken of antd. - */ -export type TooltipComponentToken = ComponentToken & {}; +import { Tooltip, GetProps } from 'antd'; +import { ComponentToken as TooltipComponentTokenAntd } from 'antd/es/tooltip/style'; +//#region Define props type TooltipProps = GetProps; +//#endregion + +//#region Custom component token +type TooltipComponentTokenExtend = {}; +//#endregion +//#region Custom props type TooltipPropsExtend = {}; +//#endregion +//#region export type export type RdTooltipProps = TooltipProps & TooltipPropsExtend; +export type RdTooltipComponentToken = TooltipComponentTokenAntd & TooltipComponentTokenExtend; +//#endregion From c9274201080880dd3c2efd1c29ddf5ef024cf238 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:33:52 +0700 Subject: [PATCH 48/84] refactor: Drawer molecule typescript --- src/molecules/Drawer/types.ts | 24 +++++++++++++++++------- 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/src/molecules/Drawer/types.ts b/src/molecules/Drawer/types.ts index 42970e1..b2ef3eb 100644 --- a/src/molecules/Drawer/types.ts +++ b/src/molecules/Drawer/types.ts @@ -1,9 +1,19 @@ -import { DrawerProps } from 'antd'; -import { ComponentToken } from 'antd/es/drawer/style'; +import { Drawer, GetProps } from 'antd'; +import { ComponentToken as DrawerComponentTokenAntd } from 'antd/es/drawer/style'; -/** - * @description Override DrawerComponentToken of antd. - */ -export type DrawerComponentToken = ComponentToken & {}; +//#region Define props +type DrawerProps = GetProps; +//#endregion -export interface RdDrawerProps extends DrawerProps {} +//#region Custom component token +type DrawerComponentTokenExtend = {}; +//#endregion + +//#region Custom props +type DrawerPropsExtend = {}; +//#endregion + +//#region export type +export type RdDrawerProps = DrawerProps & DrawerPropsExtend; +export type RdDrawerComponentToken = DrawerComponentTokenAntd & DrawerComponentTokenExtend; +//#endregion From 3e6b671e44ab2281b20d8081c67164c33cee48ae Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:34:44 +0700 Subject: [PATCH 49/84] refactor: Button molecule typescript --- src/molecules/Button/types.ts | 28 ++++++++++++++++------------ 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/src/molecules/Button/types.ts b/src/molecules/Button/types.ts index 9cdf2db..23c3483 100644 --- a/src/molecules/Button/types.ts +++ b/src/molecules/Button/types.ts @@ -1,24 +1,21 @@ import { Button, GetProps } from 'antd'; -import { ComponentToken } from 'antd/es/button/style'; +import { ComponentToken as ButtonComponentTokenAntd } from 'antd/es/button/style'; +//#region Define props type ButtonProps = GetProps; +//#endregion -/** - * @description Override ButtonComponentToken of antd. - */ -export type ButtonComponentToken = ComponentToken & {}; +//#region Custom component token +type ButtonComponentTokenExtend = {}; +//#endregion /** * @description The color of the button extend. */ export type colorButtonExtend = 'second' | 'tertiary' | 'quaternary'; -/** - * @description The props of the button. - * @override antd.ButtonProps - * @see ButtonProps - */ -export interface RdButtonProps extends Omit { +//#region Custom props +type ButtonPropsExtend = { /** * @description The width of the button. */ @@ -40,4 +37,11 @@ export interface RdButtonProps extends Omit { * @description Align button. */ align?: 'left' | 'center' | 'right'; -} +}; +//#endregion + +//#region export type +export type RdButtonProps = Omit & ButtonPropsExtend; + +export type RdButtonComponentToken = ButtonComponentTokenAntd & ButtonComponentTokenExtend; +//#endregion From f9826e85149a8c1c21662f4019a663d76e099692 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:34:50 +0700 Subject: [PATCH 50/84] refactor: Card molecule typescript --- src/molecules/Card/types.ts | 28 +++++++++++++++++----------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/src/molecules/Card/types.ts b/src/molecules/Card/types.ts index 50b1400..56a68cc 100644 --- a/src/molecules/Card/types.ts +++ b/src/molecules/Card/types.ts @@ -1,15 +1,16 @@ -import { CardProps } from 'antd'; -import { ComponentToken } from 'antd/es/card/style'; +import { Card, GetProps } from 'antd'; +import { ComponentToken as CardComponentTokenAntd } from 'antd/es/card/style'; -/** - * @description Override CardComponentToken of antd. - */ -export type CardComponentToken = ComponentToken & { - customPadding?: string; - compactHeaderHeight?: string; -}; +//#region Define props +type CardProps = GetProps; +//#endregion + +//#region Custom component token +type CardComponentTokenExtend = {}; +//#endregion -type RdCardPropsExtend = { +//#region Custom props +type CardPropsExtend = { /** * @description * Defines the visual style of the entire card component. @@ -21,5 +22,10 @@ type RdCardPropsExtend = { */ variant?: 'default' | 'compact'; }; +//#endregion + +//#region export type +export type RdCardProps = CardProps & CardPropsExtend; -export type RdCardProps = CardProps & RdCardPropsExtend; +export type RdCardComponentToken = CardComponentTokenAntd & CardComponentTokenExtend; +//#endregion From 95d61e1af71a6a7ef6a14e7783c6fbb1ad631d65 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:35:37 +0700 Subject: [PATCH 51/84] refactor: Change Button component in Dropdown to DropdownButton component --- src/molecules/Dropdown/Dropdown.tsx | 4 +-- .../{Button.tsx => DropdownButton.tsx} | 2 +- src/molecules/Dropdown/types.ts | 29 +++++++++++++------ 3 files changed, 23 insertions(+), 12 deletions(-) rename src/molecules/Dropdown/{Button.tsx => DropdownButton.tsx} (79%) diff --git a/src/molecules/Dropdown/Dropdown.tsx b/src/molecules/Dropdown/Dropdown.tsx index d7d1104..5016361 100644 --- a/src/molecules/Dropdown/Dropdown.tsx +++ b/src/molecules/Dropdown/Dropdown.tsx @@ -1,5 +1,5 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { Button } from './Button'; +import { DropdownButton } from './DropdownButton'; import { DropdownStyles } from './styles'; import { RdDropdownProps } from './types'; @@ -11,4 +11,4 @@ export const Dropdown = ({ ...antdProps }: RdDropdownProps) => { ); }; -Dropdown.Button = Button; \ No newline at end of file +Dropdown.Button = DropdownButton; \ No newline at end of file diff --git a/src/molecules/Dropdown/Button.tsx b/src/molecules/Dropdown/DropdownButton.tsx similarity index 79% rename from src/molecules/Dropdown/Button.tsx rename to src/molecules/Dropdown/DropdownButton.tsx index 1464073..a40c6c1 100644 --- a/src/molecules/Dropdown/Button.tsx +++ b/src/molecules/Dropdown/DropdownButton.tsx @@ -2,7 +2,7 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { DropdownButtonStyles } from './styles'; import { RdDropdownButtonProps } from './types'; -export const Button = ({ ...antdProps }: RdDropdownButtonProps) => { +export const DropdownButton = ({ ...antdProps }: RdDropdownButtonProps) => { return ( diff --git a/src/molecules/Dropdown/types.ts b/src/molecules/Dropdown/types.ts index 4a4e054..5c1baf8 100644 --- a/src/molecules/Dropdown/types.ts +++ b/src/molecules/Dropdown/types.ts @@ -1,12 +1,23 @@ -import { DropdownProps, Dropdown } from 'antd'; -import { DropdownButtonProps } from 'antd/es/dropdown'; -import { ComponentToken } from 'antd/es/dropdown/style'; +import { Dropdown, GetProps } from 'antd'; +import { ComponentToken as DropdownComponentTokenAntd } from 'antd/es/dropdown/style'; -/** - * @description Override DropdownComponentToken of antd. - */ -export type DropdownComponentToken = ComponentToken & {}; +//#region Define props +type DropdownProps = GetProps; +type DropdownButtonProps = GetProps; +//#endregion -export interface RdDropdownProps extends DropdownProps {} +//#region Custom component token +type DropdownComponentTokenExtend = {}; +//#endregion -export interface RdDropdownButtonProps extends DropdownButtonProps {} +//#region Custom props +type DropdownPropsExtend = {}; +type DropdownButtonPropsExtend = {}; +//#endregion + +//#region export type +export type RdDropdownProps = DropdownProps & DropdownPropsExtend; +export type RdDropdownButtonProps = DropdownButtonProps & DropdownButtonPropsExtend; + +export type RdDropdownComponentToken = DropdownComponentTokenAntd & DropdownComponentTokenExtend; +//#endregion From c1a245644eaec0bf087ccd7319edd0d44da30820 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:36:52 +0700 Subject: [PATCH 52/84] refactor: FloatButton molecule typescript and remove Backtop to BackTop --- src/molecules/FloatButton/Backtop.tsx | 1 - src/molecules/FloatButton/FloatButton.tsx | 2 +- src/molecules/FloatButton/types.ts | 37 ++++++++++++++++------- 3 files changed, 27 insertions(+), 13 deletions(-) diff --git a/src/molecules/FloatButton/Backtop.tsx b/src/molecules/FloatButton/Backtop.tsx index 2bfab91..612a7f8 100644 --- a/src/molecules/FloatButton/Backtop.tsx +++ b/src/molecules/FloatButton/Backtop.tsx @@ -9,4 +9,3 @@ export const BackTop = ({ ...antdProps }: RdBackTopProps) => { ); }; - diff --git a/src/molecules/FloatButton/FloatButton.tsx b/src/molecules/FloatButton/FloatButton.tsx index cf2424c..4f90aa5 100644 --- a/src/molecules/FloatButton/FloatButton.tsx +++ b/src/molecules/FloatButton/FloatButton.tsx @@ -1,5 +1,5 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { BackTop } from './Backtop'; +import { BackTop } from './BackTop'; import { FloatButtonGroup } from './FloatButtonGroup'; import { FloatButtonStyles } from './styles'; import { RdFloatButtonProps } from './types'; diff --git a/src/molecules/FloatButton/types.ts b/src/molecules/FloatButton/types.ts index 88ce9dd..70fc26b 100644 --- a/src/molecules/FloatButton/types.ts +++ b/src/molecules/FloatButton/types.ts @@ -1,15 +1,30 @@ -import { BackTopProps, FloatButtonGroupProps, FloatButtonProps } from 'antd'; -import { ComponentToken } from 'antd/es/float-button/style'; +import { FloatButton, GetProps } from 'antd'; +import { ComponentToken as FloatButtonComponentTokenAntd } from 'antd/es/float-button/style'; +import { ComponentToken as BackTopComponentTokenAntd } from 'antd/es/back-top/style'; -/** - * @description Override FloatButtonComponentToken of antd. - */ -export type FloatButtonComponentToken = ComponentToken & {}; +//#region Define props +type FloatButtonProps = GetProps; +type BackTopProps = GetProps; +type FloatButtonGroupProps = GetProps; +//#endregion -export interface RdFloatButtonProps extends FloatButtonProps {} +//#region Custom component token +type FloatButtonComponentTokenExtend = {}; +type BackTopComponentTokenExtend = {}; +//#endregion -export interface RdBackTopProps - extends BackTopProps, - Omit {} +//#region Custom props +type FloatButtonPropsExtend = {}; +type FloatButtonGroupPropsExtend = {}; +type BackTopPropsExtend = {}; +//#endregion -export interface RdFloatButtonGroupProps extends FloatButtonGroupProps {} +//#region export type +export type RdFloatButtonProps = FloatButtonProps & FloatButtonPropsExtend; +export type RdFloatButtonGroupProps = FloatButtonGroupProps & FloatButtonGroupPropsExtend; +export type RdBackTopProps = BackTopProps & BackTopPropsExtend; + +export type RdFloatButtonComponentToken = FloatButtonComponentTokenAntd & + FloatButtonComponentTokenExtend; +export type RdBackTopComponentToken = BackTopComponentTokenAntd & BackTopComponentTokenExtend; +//#endregion From 532eb838d868c480b919102662e9ea97a26534a8 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:37:39 +0700 Subject: [PATCH 53/84] refactor: List molecule typescript --- src/molecules/List/List.tsx | 4 ++-- src/molecules/List/ListItem.tsx | 4 ++-- src/molecules/List/types.ts | 36 ++++++++++++++++----------------- 3 files changed, 22 insertions(+), 22 deletions(-) diff --git a/src/molecules/List/List.tsx b/src/molecules/List/List.tsx index a6c7142..ed82d67 100644 --- a/src/molecules/List/List.tsx +++ b/src/molecules/List/List.tsx @@ -1,9 +1,9 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { ListItem } from './ListItem'; import { ListStyles } from './styles'; -import { ListCompoundedComponent, RdListProps } from './types'; +import { RdListProps } from './types'; -export const List: ListCompoundedComponent = ({ ...antdProps }: RdListProps) => { +export const List = ({ ...antdProps }: RdListProps) => { return ( diff --git a/src/molecules/List/ListItem.tsx b/src/molecules/List/ListItem.tsx index b1de2a7..4495495 100644 --- a/src/molecules/List/ListItem.tsx +++ b/src/molecules/List/ListItem.tsx @@ -1,9 +1,9 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { ListItemMeta } from './ListItemMeta'; import { ListItemStyles } from './styles'; -import { ListItemCompoundedComponent, RdListItemProps } from './types'; +import { RdListItemProps } from './types'; -export const ListItem: ListItemCompoundedComponent = ({ ...antdProps }: RdListItemProps) => { +export const ListItem = ({ ...antdProps }: RdListItemProps) => { return ( diff --git a/src/molecules/List/types.ts b/src/molecules/List/types.ts index ac35955..3ee2788 100644 --- a/src/molecules/List/types.ts +++ b/src/molecules/List/types.ts @@ -1,26 +1,26 @@ -import { GetProps, List } from 'antd'; -import { ComponentToken } from 'antd/es/list/style'; -import { ListItemMeta } from './ListItemMeta'; +import { List, GetProps } from 'antd'; +import { ComponentToken as ListComponentTokenAntd } from 'antd/es/list/style'; +//#region Define props type ListProps = GetProps; type ListItemProps = GetProps; type ListItemMetaProps = GetProps; +//#endregion -/** - * @description Override ListComponentToken of antd. - */ -export type ListComponentToken = ComponentToken & {}; +//#region Custom component token +type ListComponentTokenExtend = {}; +//#endregion -export interface RdListProps extends ListProps {} +//#region Custom props +type ListPropsExtend = {}; +type ListItemPropsExtend = {}; +type ListItemMetaPropsExtend = {}; +//#endregion -export interface RdListItemProps extends ListItemProps {} +//#region export type +export type RdListProps = ListProps & ListPropsExtend; +export type RdListItemProps = ListItemProps & ListItemPropsExtend; +export type RdListItemMetaProps = ListItemMetaProps & ListItemMetaPropsExtend; -export interface RdListItemMetaProps extends ListItemMetaProps {} - -export type ListItemCompoundedComponent = React.FC & { - Meta: typeof ListItemMeta; -}; - -export type ListCompoundedComponent = React.FC & { - Item: ListItemCompoundedComponent; -}; +export type RdListComponentToken = ListComponentTokenAntd & ListComponentTokenExtend; +//#endregion From 0498e276f3efde6f70ff111d4e9b04105165da77 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:38:05 +0700 Subject: [PATCH 54/84] refactor: InputNumber molecule typescript and remove Control component --- src/molecules/InputNumber/InputNumber.tsx | 23 ++------- .../InputNumber/InputNumberControl.tsx | 48 ------------------- src/molecules/InputNumber/index.ts | 1 - src/molecules/InputNumber/styles.tsx | 5 +- src/molecules/InputNumber/types.ts | 30 +++++++----- 5 files changed, 22 insertions(+), 85 deletions(-) delete mode 100644 src/molecules/InputNumber/InputNumberControl.tsx diff --git a/src/molecules/InputNumber/InputNumber.tsx b/src/molecules/InputNumber/InputNumber.tsx index a19dff0..09176e5 100644 --- a/src/molecules/InputNumber/InputNumber.tsx +++ b/src/molecules/InputNumber/InputNumber.tsx @@ -1,29 +1,14 @@ -import { InputNumberProps } from 'antd'; +import { forwardRef } from 'react'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { LabelField } from '../LabelField'; -import { InputNumberStyled, InputWrapper } from './styles'; +import { InputNumberStyled } from './styles'; import { RdInputNumberProps } from './types'; -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; -import { forwardRef } from 'react'; export const InputNumber = forwardRef( (props: RdInputNumberProps, ref: RdInputNumberProps['ref']) => { - const { - label: labelFieldProps, - - ...antdProps - } = props; + const { ...antdProps } = props; return ( - - - - - + ); } diff --git a/src/molecules/InputNumber/InputNumberControl.tsx b/src/molecules/InputNumber/InputNumberControl.tsx deleted file mode 100644 index a6013c4..0000000 --- a/src/molecules/InputNumber/InputNumberControl.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { InputNumberProps } from 'antd'; -import { useController } from 'react-hook-form'; -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { TextError } from '../../atomics'; -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; -import { LabelField } from '../LabelField'; -import { InputNumberStyled, InputWrapper } from './styles'; -import { RdInputNumberControlProps } from './types'; - -export const InputNumberControl = ({ - name, - control, - defaultValue, - - label: labelFieldProps, - - ...antdProps -}: RdInputNumberControlProps) => { - const { - field: { value, onChange, onBlur, ref }, - fieldState: { invalid, error }, - } = useController({ - name, - control, - defaultValue, - }); - - return ( - - - - - - {invalid && {error?.message}} - - - ); -}; diff --git a/src/molecules/InputNumber/index.ts b/src/molecules/InputNumber/index.ts index e0d0d7d..5788568 100644 --- a/src/molecules/InputNumber/index.ts +++ b/src/molecules/InputNumber/index.ts @@ -1,3 +1,2 @@ export * from "./InputNumber"; -export * from "./InputNumberControl"; export * from './types'; \ No newline at end of file diff --git a/src/molecules/InputNumber/styles.tsx b/src/molecules/InputNumber/styles.tsx index b723e6a..74fa5a5 100644 --- a/src/molecules/InputNumber/styles.tsx +++ b/src/molecules/InputNumber/styles.tsx @@ -1,7 +1,4 @@ import styled from '@emotion/styled'; import { InputNumber } from 'antd'; -export const InputWrapper = styled.div``; -export const InputNumberStyled = styled(InputNumber)` - width: 100%; -`; +export const InputNumberStyled = styled(InputNumber)``; diff --git a/src/molecules/InputNumber/types.ts b/src/molecules/InputNumber/types.ts index 2d86ecc..3c0717d 100644 --- a/src/molecules/InputNumber/types.ts +++ b/src/molecules/InputNumber/types.ts @@ -1,17 +1,21 @@ -import { GetProps, InputNumber } from 'antd'; -import { RdRegistryControlField } from '../../models'; -import { RdLabelFieldWrapperProps } from '../LabelField/types'; -import { ComponentToken } from 'antd/es/input-number/style'; - -/** - * @description Override InputNumberComponentToken of antd. - */ -export type InputNumberComponentToken = ComponentToken & {}; +import { InputNumber, GetProps } from 'antd'; +import { ComponentToken as InputNumberComponentTokenAntd } from 'antd/es/input-number/style'; +//#region Define props type InputNumberProps = GetProps; +//#endregion + +//#region Custom component token +type InputNumberComponentTokenExtend = {}; +//#endregion + +//#region Custom props +type InputNumberPropsExtend = {}; +//#endregion -export interface RdInputNumberProps extends InputNumberProps, RdLabelFieldWrapperProps {} +//#region export type +export type RdInputNumberProps = InputNumberProps & InputNumberPropsExtend; -export interface RdInputNumberControlProps - extends Omit, - RdRegistryControlField {} +export type RdInputNumberComponentToken = InputNumberComponentTokenAntd & + InputNumberComponentTokenExtend; +//#endregion From b75496c6c354b2d2697a00343a6742e7e3d0d55f Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:38:18 +0700 Subject: [PATCH 55/84] refactor: Layout molecule typescript --- src/molecules/Layout/Content.tsx | 4 ++-- src/molecules/Layout/Footer.tsx | 4 ++-- src/molecules/Layout/Header.tsx | 6 ++--- src/molecules/Layout/types.ts | 38 +++++++++++++++++++++++++------- 4 files changed, 37 insertions(+), 15 deletions(-) diff --git a/src/molecules/Layout/Content.tsx b/src/molecules/Layout/Content.tsx index 1d0a9a4..f9d6b6c 100644 --- a/src/molecules/Layout/Content.tsx +++ b/src/molecules/Layout/Content.tsx @@ -1,8 +1,8 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { ContentStyles } from './styles'; -import { RdLayoutProps } from './types'; +import { RdContentProps } from './types'; -export const Content = ({ ...antdProps }: RdLayoutProps) => { +export const Content = ({ ...antdProps }: RdContentProps) => { return ( diff --git a/src/molecules/Layout/Footer.tsx b/src/molecules/Layout/Footer.tsx index 5f4d9e9..89378b3 100644 --- a/src/molecules/Layout/Footer.tsx +++ b/src/molecules/Layout/Footer.tsx @@ -1,8 +1,8 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { FooterStyles } from './styles'; -import { RdLayoutProps } from './types'; +import { RdFooterProps } from './types'; -export const Footer = ({ ...antdProps }: RdLayoutProps) => { +export const Footer = ({ ...antdProps }: RdFooterProps) => { return ( diff --git a/src/molecules/Layout/Header.tsx b/src/molecules/Layout/Header.tsx index d86b409..7f40305 100644 --- a/src/molecules/Layout/Header.tsx +++ b/src/molecules/Layout/Header.tsx @@ -1,8 +1,8 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { HeaderStyles, LayoutStyles } from './styles'; -import { RdLayoutProps } from './types'; +import { HeaderStyles } from './styles'; +import { RdHeaderProps } from './types'; -export const Header = ({ ...antdProps }: RdLayoutProps) => { +export const Header = ({ ...antdProps }: RdHeaderProps) => { return ( diff --git a/src/molecules/Layout/types.ts b/src/molecules/Layout/types.ts index c72f8a9..a83eac1 100644 --- a/src/molecules/Layout/types.ts +++ b/src/molecules/Layout/types.ts @@ -1,10 +1,32 @@ -import { LayoutProps, SiderProps } from 'antd'; -import { ComponentToken } from 'antd/es/layout/style'; +import { Layout, GetProps } from 'antd'; +import { ComponentToken as LayoutComponentTokenAntd } from 'antd/es/layout/style'; -/** - * @description Override LayoutComponentToken of antd. - */ -export type LayoutComponentToken = ComponentToken & {}; +//#region Define props +type LayoutProps = GetProps; +type ContentProps = GetProps; +type FooterProps = GetProps; +type HeaderProps = GetProps; +type SiderProps = GetProps; +//#endregion -export interface RdLayoutProps extends LayoutProps {} -export interface RdSiderProps extends SiderProps {} +//#region Custom component token +type LayoutComponentTokenExtend = {}; +//#endregion + +//#region Custom props +type LayoutPropsExtend = {}; +type ContentPropsExtend = {}; +type FooterPropsExtend = {}; +type HeaderPropsExtend = {}; +type SiderPropsExtend = {}; +//#endregion + +//#region export type +export type RdLayoutProps = LayoutProps & LayoutPropsExtend; +export type RdContentProps = ContentProps & ContentPropsExtend; +export type RdFooterProps = FooterProps & FooterPropsExtend; +export type RdHeaderProps = HeaderProps & HeaderPropsExtend; +export type RdSiderProps = SiderProps & SiderPropsExtend; + +export type RdLayoutComponentToken = LayoutComponentTokenAntd & LayoutComponentTokenExtend; +//#endregion From df8669794ba5a51e25baebe44547112299f21f98 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:38:32 +0700 Subject: [PATCH 56/84] refactor: Pagination molecule typescript --- src/molecules/Pagination/Pagination.tsx | 7 ++----- src/molecules/Pagination/styles.tsx | 3 ++- src/molecules/Pagination/types.ts | 25 ++++++++++++++++++------- 3 files changed, 22 insertions(+), 13 deletions(-) diff --git a/src/molecules/Pagination/Pagination.tsx b/src/molecules/Pagination/Pagination.tsx index 23ef0a6..1756539 100644 --- a/src/molecules/Pagination/Pagination.tsx +++ b/src/molecules/Pagination/Pagination.tsx @@ -1,14 +1,11 @@ -import { Pagination as AntdPagination, PaginationProps } from 'antd'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { PaginationWrapper } from './styles'; +import { PaginationStyled } from './styles'; import { RdPaginationProps } from './types'; export const Pagination = ({ ...antdProps }: RdPaginationProps) => { return ( - - - + ); }; diff --git a/src/molecules/Pagination/styles.tsx b/src/molecules/Pagination/styles.tsx index 9d3ea12..997411f 100644 --- a/src/molecules/Pagination/styles.tsx +++ b/src/molecules/Pagination/styles.tsx @@ -1,3 +1,4 @@ import styled from '@emotion/styled'; +import { Pagination } from 'antd'; -export const PaginationWrapper = styled.div``; +export const PaginationStyled = styled(Pagination)``; diff --git a/src/molecules/Pagination/types.ts b/src/molecules/Pagination/types.ts index d6a2cb7..8d2541e 100644 --- a/src/molecules/Pagination/types.ts +++ b/src/molecules/Pagination/types.ts @@ -1,9 +1,20 @@ -import { PaginationProps } from 'antd'; -import { ComponentToken } from 'antd/es/pagination/style'; +import { Pagination, GetProps } from 'antd'; +import { ComponentToken as PaginationComponentTokenAntd } from 'antd/es/pagination/style'; -/** - * @description Override PaginationComponentToken of antd. - */ -export type PaginationComponentToken = ComponentToken & {}; +//#region Define props +type PaginationProps = GetProps; +//#endregion -export interface RdPaginationProps extends PaginationProps {} +//#region Custom component token +type PaginationComponentTokenExtend = {}; +//#endregion + +//#region Custom props +type PaginationPropsExtend = {}; +//#endregion + +//#region export type +export type RdPaginationProps = PaginationProps & PaginationPropsExtend; +export type RdPaginationComponentToken = PaginationComponentTokenAntd & + PaginationComponentTokenExtend; +//#endregion From 42846b2e2c62786d45066e81ee8026e5f9508759 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:38:50 +0700 Subject: [PATCH 57/84] refactor: Radio molecule typescript and remove Control component --- src/molecules/Radio/Radio.tsx | 17 +------ src/molecules/Radio/RadioButton.tsx | 17 +------ src/molecules/Radio/RadioButtonControl.tsx | 44 ------------------ src/molecules/Radio/RadioControl.tsx | 49 -------------------- src/molecules/Radio/RadioGroup.tsx | 17 +------ src/molecules/Radio/RadioGroupControl.tsx | 45 ------------------ src/molecules/Radio/index.ts | 1 - src/molecules/Radio/styles.tsx | 6 +-- src/molecules/Radio/types.ts | 53 ++++++++-------------- 9 files changed, 26 insertions(+), 223 deletions(-) delete mode 100644 src/molecules/Radio/RadioButtonControl.tsx delete mode 100644 src/molecules/Radio/RadioControl.tsx delete mode 100644 src/molecules/Radio/RadioGroupControl.tsx diff --git a/src/molecules/Radio/Radio.tsx b/src/molecules/Radio/Radio.tsx index f0651ad..4d4eb9d 100644 --- a/src/molecules/Radio/Radio.tsx +++ b/src/molecules/Radio/Radio.tsx @@ -1,26 +1,13 @@ -import { RadioProps } from 'antd'; -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { LabelField } from '../LabelField'; import { RadioButton } from './RadioButton'; import { RadioGroup } from './RadioGroup'; import { RadioStyles } from './styles'; import { RdRadioProps } from './types'; -export const Radio = ({ - label: labelFieldProps, - - ...antdProps -}: RdRadioProps) => { +export const Radio = ({ ...antdProps }: RdRadioProps) => { return ( - - - + ); }; diff --git a/src/molecules/Radio/RadioButton.tsx b/src/molecules/Radio/RadioButton.tsx index d1669e3..b253fb3 100644 --- a/src/molecules/Radio/RadioButton.tsx +++ b/src/molecules/Radio/RadioButton.tsx @@ -1,24 +1,11 @@ -import { RadioButtonProps } from 'antd/es/radio/radioButton'; -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { LabelField } from '../LabelField'; import { RadioButtonStyles } from './styles'; import { RdRadioButtonProps } from './types'; -export const RadioButton = ({ - label: labelFieldProps, - - ...antdProps -}: RdRadioButtonProps) => { +export const RadioButton = ({ ...antdProps }: RdRadioButtonProps) => { return ( - - - + ); }; diff --git a/src/molecules/Radio/RadioButtonControl.tsx b/src/molecules/Radio/RadioButtonControl.tsx deleted file mode 100644 index b690a60..0000000 --- a/src/molecules/Radio/RadioButtonControl.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { RadioButtonProps } from 'antd/es/radio/radioButton'; -import { useController } from 'react-hook-form'; -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { TextError } from '../../atomics'; -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; -import { LabelField } from '../LabelField'; -import { RadioButtonStyles } from './styles'; -import { RdRadioButtonControlProps } from './types'; - -export const RadioButtonControl = ({ - name, - control, - - label: labelFieldProps, - - ...antdProps -}: RdRadioButtonControlProps) => { - const { - field: { value, onChange, onBlur, ref }, - fieldState: { invalid, error }, - } = useController({ - name, - control, - }); - - return ( - - - - - {invalid && {error?.message}} - - ); -}; diff --git a/src/molecules/Radio/RadioControl.tsx b/src/molecules/Radio/RadioControl.tsx deleted file mode 100644 index 2a5781c..0000000 --- a/src/molecules/Radio/RadioControl.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { RadioProps } from 'antd'; -import { useController } from 'react-hook-form'; -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { TextError } from '../../atomics'; -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; -import { LabelField } from '../LabelField'; -import { RadioButtonControl } from './RadioButtonControl'; -import { RadioGroupControl } from './RadioGroupControl'; -import { RadioStyles } from './styles'; -import { RdRadioControlProps } from './types'; - -export const RadioControl = ({ - name, - control, - - label: labelFieldProps, - - ...antdProps -}: RdRadioControlProps) => { - const { - field: { value, onChange, onBlur, ref }, - fieldState: { invalid, error }, - } = useController({ - name, - control, - }); - - return ( - - - - - {invalid && {error?.message}} - - ); -}; - -RadioControl.Button = RadioButtonControl; -RadioControl.Group = RadioGroupControl; diff --git a/src/molecules/Radio/RadioGroup.tsx b/src/molecules/Radio/RadioGroup.tsx index cd35def..c218e95 100644 --- a/src/molecules/Radio/RadioGroup.tsx +++ b/src/molecules/Radio/RadioGroup.tsx @@ -1,28 +1,15 @@ import { RadioGroupProps } from 'antd'; import { forwardRef } from 'react'; -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { LabelField } from '../LabelField'; import { RadioGroupStyles } from './styles'; import { RdRadioGroupProps } from './types'; export const RadioGroup = forwardRef((props: RdRadioGroupProps, ref: RdRadioGroupProps['ref']) => { - const { - label: labelFieldProps, - axis = 'horizontal', - - ...antdProps - } = props; + const { ...antdProps } = props; return ( - - - + ); }); diff --git a/src/molecules/Radio/RadioGroupControl.tsx b/src/molecules/Radio/RadioGroupControl.tsx deleted file mode 100644 index 7825f9a..0000000 --- a/src/molecules/Radio/RadioGroupControl.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { RadioProps } from 'antd'; -import { useController } from 'react-hook-form'; -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { TextError } from '../../atomics'; -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; -import { LabelField } from '../LabelField'; -import { RadioGroupStyles } from './styles'; -import { RdRadioGroupControlProps } from './types'; - -export const RadioGroupControl = ({ - name, - control, - - label: labelFieldProps, - axis = 'horizontal', - - ...antdProps -}: RdRadioGroupControlProps) => { - const { - field: { value, onChange, onBlur, ref }, - fieldState: { invalid, error }, - } = useController({ - name, - control, - }); - - return ( - - - - - {invalid && {error?.message}} - - ); -}; diff --git a/src/molecules/Radio/index.ts b/src/molecules/Radio/index.ts index 6c88b96..5b91146 100644 --- a/src/molecules/Radio/index.ts +++ b/src/molecules/Radio/index.ts @@ -1,3 +1,2 @@ export * from "./Radio"; -export * from "./RadioControl"; export * from "./types"; \ No newline at end of file diff --git a/src/molecules/Radio/styles.tsx b/src/molecules/Radio/styles.tsx index 04f0b22..536c25d 100644 --- a/src/molecules/Radio/styles.tsx +++ b/src/molecules/Radio/styles.tsx @@ -1,12 +1,8 @@ import styled from '@emotion/styled'; import { Radio } from 'antd'; -import { TAxis } from '../../models'; -import { getAxisStyles } from '../../utils/styles'; export const RadioStyles = styled(Radio)``; -export const RadioGroupStyles = styled(Radio.Group)<{ axis?: TAxis }>` - ${props => getAxisStyles(props.axis)} -`; +export const RadioGroupStyles = styled(Radio.Group)``; export const RadioButtonStyles = styled(Radio.Button)``; diff --git a/src/molecules/Radio/types.ts b/src/molecules/Radio/types.ts index 83b0df9..52844bd 100644 --- a/src/molecules/Radio/types.ts +++ b/src/molecules/Radio/types.ts @@ -1,41 +1,26 @@ -import { GetProps, Radio } from 'antd'; -import { ComponentToken } from 'antd/es/radio/style'; -import { RdRegistryControlField, TAxis } from '../../models'; -import { RdLabelFieldWrapperProps } from '../LabelField/types'; +import { Radio, GetProps } from 'antd'; +import { ComponentToken as RadioComponentTokenAntd } from 'antd/es/radio/style'; +//#region Define props type RadioProps = GetProps; -type RadioGroupProps = GetProps; type RadioButtonProps = GetProps; +type RadioGroupProps = GetProps; +//#endregion -/** - * @description Override RadioComponentToken of antd. - */ -export type RadioComponentToken = ComponentToken & {}; - -//#region Radio -export interface RdRadioProps extends RadioProps, RdLabelFieldWrapperProps {} - -export interface RdRadioControlProps extends Omit, RdRegistryControlField {} -//#endregion Radio - -//#region RadioButton -export interface RdRadioButtonProps extends RadioButtonProps, RdLabelFieldWrapperProps {} +//#region Custom component token +type RadioComponentTokenExtend = {}; +//#endregion -export interface RdRadioButtonControlProps - extends Omit, - RdRegistryControlField {} -//#endregion RadioButton +//#region Custom props +type RadioPropsExtend = {}; +type RadioButtonPropsExtend = {}; +type RadioGroupPropsExtend = {}; +//#endregion -//#region RadioGroup -export interface RdRadioGroupProps extends RadioGroupProps, RdLabelFieldWrapperProps { - /** - * @description The axis of the radio options. - * @default 'horizontal' - */ - axis?: TAxis; -} +//#region export type +export type RdRadioProps = RadioProps & RadioPropsExtend; +export type RdRadioButtonProps = RadioButtonProps & RadioButtonPropsExtend; +export type RdRadioGroupProps = RadioGroupProps & RadioGroupPropsExtend; -export interface RdRadioGroupControlProps - extends Omit, - RdRegistryControlField {} -//#endregion RadioGroup +export type RdRadioComponentToken = RadioComponentTokenAntd & RadioComponentTokenExtend; +//#endregion From b75d7507a50b4ecf2f08b6561033ba257f1eb722 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:39:12 +0700 Subject: [PATCH 58/84] feature: remove RangePicker, use DatePicker.RangePicker instead --- src/molecules/RangePicker/RangePicker.tsx | 29 ------- .../RangePicker/RangePickerControl.tsx | 87 ------------------- src/molecules/RangePicker/index.ts | 3 - src/molecules/RangePicker/styles.tsx | 5 -- src/molecules/RangePicker/types.ts | 15 ---- 5 files changed, 139 deletions(-) delete mode 100644 src/molecules/RangePicker/RangePicker.tsx delete mode 100644 src/molecules/RangePicker/RangePickerControl.tsx delete mode 100644 src/molecules/RangePicker/index.ts delete mode 100644 src/molecules/RangePicker/styles.tsx delete mode 100644 src/molecules/RangePicker/types.ts diff --git a/src/molecules/RangePicker/RangePicker.tsx b/src/molecules/RangePicker/RangePicker.tsx deleted file mode 100644 index 23b24b2..0000000 --- a/src/molecules/RangePicker/RangePicker.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { DatePicker } from 'antd'; -import { RangePickerProps } from 'antd/es/date-picker'; -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { LabelField } from '../LabelField'; -import { RangePickerWrapper } from './styles'; -import { RdRangePickerProps } from './types'; - -const { RangePicker: AntdRangePicker } = DatePicker; - -export const RangePicker = ({ - label: labelFieldProps, - - ...antdProps -}: RdRangePickerProps) => { - return ( - - - - - - - - ); -}; diff --git a/src/molecules/RangePicker/RangePickerControl.tsx b/src/molecules/RangePicker/RangePickerControl.tsx deleted file mode 100644 index f5dc48d..0000000 --- a/src/molecules/RangePicker/RangePickerControl.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import { DatePicker } from 'antd'; -import { RangePickerProps } from 'antd/es/date-picker'; -import { useController } from 'react-hook-form'; -import { TextError } from '../../atomics'; -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { LabelField } from '../LabelField'; -import { RangePickerWrapper } from './styles'; -import { RdRangePickerControlProps } from './types'; - -const { RangePicker: AntdRangePicker } = DatePicker; - -export const RangePickerControl = ({ - names, - control, - - label: labelFieldProps, - - ...antdProps -}: RdRangePickerControlProps) => { - const [startName, endName] = names; - - const { - field: { - value: startDateValue, - onChange: onStartDateChange, - onBlur: onStartDateBlur, - ref: startRef, - }, - fieldState: { invalid: startInvalid, error: startError }, - } = useController({ - name: startName, - control, - }); - - const { - field: { - value: endDateValue, - onChange: onEndDateChange, - onBlur: onEndDateBlur, - ref: endRef, - }, - fieldState: { invalid: endInvalid, error: endError }, - } = useController({ - name: endName, - control, - }); - - const handleChange: RangePickerProps['onChange'] = dates => { - if (dates) { - onStartDateChange(dates[0]); - onEndDateChange(dates[1]); - } else { - onStartDateChange(null); - onEndDateChange(null); - } - }; - - return ( - - - - { - onStartDateBlur(); - onEndDateBlur(); - }} - ref={node => { - startRef(node); - endRef(node); - }} - /> - - {(startInvalid || endInvalid) && ( - {startError?.message || endError?.message} - )} - - - ); -}; diff --git a/src/molecules/RangePicker/index.ts b/src/molecules/RangePicker/index.ts deleted file mode 100644 index 77c71a7..0000000 --- a/src/molecules/RangePicker/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './RangePicker'; -export * from './RangePickerControl'; -export * from "./types"; \ No newline at end of file diff --git a/src/molecules/RangePicker/styles.tsx b/src/molecules/RangePicker/styles.tsx deleted file mode 100644 index 60660e2..0000000 --- a/src/molecules/RangePicker/styles.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import styled from '@emotion/styled'; - -export const RangePickerWrapper = styled.div` - width: 100%; -`; diff --git a/src/molecules/RangePicker/types.ts b/src/molecules/RangePicker/types.ts deleted file mode 100644 index a9f655c..0000000 --- a/src/molecules/RangePicker/types.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { RangePickerProps } from 'antd/es/date-picker'; -import { IRegistryRangePickerControlField } from '../../models'; -import { RdLabelFieldWrapperProps } from '../LabelField/types'; -import { ComponentToken } from 'antd/es/date-picker/style'; - -/** - * @description Override DatePickerComponentToken of antd. - */ -export type DatePickerComponentToken = ComponentToken & {}; - -export interface RdRangePickerProps extends RangePickerProps, RdLabelFieldWrapperProps {} - -export interface RdRangePickerControlProps - extends Omit, - IRegistryRangePickerControlField {} From 0ff8294bf9e51298a5dab41a074f230589833799 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:39:59 +0700 Subject: [PATCH 59/84] feature: Add space compact for space molecule --- src/molecules/Space/Compact.tsx | 11 +++++++++++ src/molecules/Space/Space.tsx | 4 +++- src/molecules/Space/styles.tsx | 1 + 3 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 src/molecules/Space/Compact.tsx diff --git a/src/molecules/Space/Compact.tsx b/src/molecules/Space/Compact.tsx new file mode 100644 index 0000000..b62f97d --- /dev/null +++ b/src/molecules/Space/Compact.tsx @@ -0,0 +1,11 @@ +import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { CompactStyles } from './styles'; +import { RdCompactProps } from './types'; + +export const Compact = ({ block = false, ...antdProps }: RdCompactProps) => { + return ( + + + + ); +}; diff --git a/src/molecules/Space/Space.tsx b/src/molecules/Space/Space.tsx index 664ac79..bd53a06 100644 --- a/src/molecules/Space/Space.tsx +++ b/src/molecules/Space/Space.tsx @@ -1,5 +1,5 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { SpaceStyles } from './styles'; +import { CompactStyles, SpaceStyles } from './styles'; import { RdSpaceProps } from './types'; export const Space = ({ block = false, ...antdProps }: RdSpaceProps) => { @@ -9,3 +9,5 @@ export const Space = ({ block = false, ...antdProps }: RdSpaceProps) => { ); }; + +Space.Compact = CompactStyles; diff --git a/src/molecules/Space/styles.tsx b/src/molecules/Space/styles.tsx index 8d7b701..575e799 100644 --- a/src/molecules/Space/styles.tsx +++ b/src/molecules/Space/styles.tsx @@ -14,3 +14,4 @@ export const SpaceStyles = styled(Space, { return block && 'width: 100%'; }}; `; +export const CompactStyles = styled(Space.Compact)``; From 694d552ccdf3ce158457a3c8b11e0fe792fdd489 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:40:11 +0700 Subject: [PATCH 60/84] refactor: Space molecule typescript --- src/molecules/Space/types.ts | 29 ++++++++++++++++++++++------- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/src/molecules/Space/types.ts b/src/molecules/Space/types.ts index ded3829..9d7dccb 100644 --- a/src/molecules/Space/types.ts +++ b/src/molecules/Space/types.ts @@ -1,14 +1,29 @@ -import { SpaceProps } from 'antd'; -import { ComponentToken } from 'antd/es/space/style'; +import { Space, GetProps } from 'antd'; +import { ComponentToken as SpaceComponentTokenAntd } from 'antd/es/space/style'; -/** - * @description Override SpaceComponentToken of antd. - */ -export type SpaceComponentToken = ComponentToken & {}; +//#region Define props +type SpaceProps = GetProps; +type CompactProps = GetProps; +//#endregion -export type RdSpaceProps = SpaceProps & { +//#region Custom component token +type SpaceComponentTokenExtend = {}; +//#endregion + +//#region Custom props +type SpacePropsExtend = { /** * @description Option to fit Space width to its parent width, default is false */ block?: boolean; }; + +type CompactPropsExtend = {}; +//#endregion + +//#region export type +export type RdSpaceProps = SpaceProps & SpacePropsExtend; +export type RdCompactProps = CompactProps & CompactPropsExtend; + +export type RdSpaceComponentToken = SpaceComponentTokenAntd & SpaceComponentTokenExtend; +//#endregion From 1ef74e11d64f88224391dda5abd54fb40a24dca3 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:40:26 +0700 Subject: [PATCH 61/84] refactor: Upload molecule typescript --- src/molecules/Upload/UploadDragger.tsx | 2 +- src/molecules/Upload/types.ts | 30 ++++++++++++++++++-------- 2 files changed, 22 insertions(+), 10 deletions(-) diff --git a/src/molecules/Upload/UploadDragger.tsx b/src/molecules/Upload/UploadDragger.tsx index 0fa6b4d..982100d 100644 --- a/src/molecules/Upload/UploadDragger.tsx +++ b/src/molecules/Upload/UploadDragger.tsx @@ -9,7 +9,7 @@ export const UploadDragger = forwardRef( return ( - + ); } diff --git a/src/molecules/Upload/types.ts b/src/molecules/Upload/types.ts index 5021619..bf3e37d 100644 --- a/src/molecules/Upload/types.ts +++ b/src/molecules/Upload/types.ts @@ -1,13 +1,25 @@ -import { GetProps, Upload } from 'antd'; -import { ComponentToken } from 'antd/es/upload/style'; - -/** - * @description Override UploadComponentToken of antd. - */ -export type UploadComponentToken = ComponentToken & {}; +import { Upload, GetProps, UploadFile } from 'antd'; +import { ComponentToken as UploadComponentTokenAntd } from 'antd/es/upload/style'; +//#region Define props type UploadProps = GetProps; type UploadDraggerProps = GetProps; +//#endregion + +//#region Custom component token +type UploadComponentTokenExtend = {}; +//#endregion + +//#region Custom props +type UploadPropsExtend = {}; +type UploadDraggerPropsExtend = {}; +//#endregion + +//#region export type +export type RdUploadProps = UploadProps & UploadPropsExtend; +export type RdUploadDraggerProps = UploadDraggerProps & UploadDraggerPropsExtend; + +export type RdUploadComponentToken = UploadComponentTokenAntd & UploadComponentTokenExtend; -export type RdUploadProps = UploadProps & {}; -export type RdUploadDraggerProps = UploadDraggerProps & {}; +export type RdUploadFile = UploadFile; +//#endregion \ No newline at end of file From f83a8ac2cff5e5f192bf7ad8aef1eff7553a9991 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:40:36 +0700 Subject: [PATCH 62/84] refactor: Table molecule typescript --- src/molecules/Table/Table.tsx | 11 +++++------ src/molecules/Table/styles.ts | 5 ++++- src/molecules/Table/types.ts | 24 +++++++++++++++++------- 3 files changed, 26 insertions(+), 14 deletions(-) diff --git a/src/molecules/Table/Table.tsx b/src/molecules/Table/Table.tsx index 41f46bb..b0413e4 100644 --- a/src/molecules/Table/Table.tsx +++ b/src/molecules/Table/Table.tsx @@ -1,17 +1,16 @@ -import { Table as AntdTable, TableProps } from 'antd'; import { AnyObject } from 'antd/es/_util/type'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { TableWrapper } from './styles'; +import { TableStyled } from './styles'; import { RdTableProps } from './types'; export const Table = ({ ...antdProps }: RdTableProps) => { + const StyledTable = TableStyled(); + return ( - - {...(antdProps as TableProps)} /> - + ); -}; +}; \ No newline at end of file diff --git a/src/molecules/Table/styles.ts b/src/molecules/Table/styles.ts index 0690f35..93cbe90 100644 --- a/src/molecules/Table/styles.ts +++ b/src/molecules/Table/styles.ts @@ -1,3 +1,6 @@ import styled from '@emotion/styled'; +import { Table } from 'antd'; +import { AnyObject } from 'antd/es/_util/type'; -export const TableWrapper = styled.div``; +export const TableStyled = () => + styled(Table)``; diff --git a/src/molecules/Table/types.ts b/src/molecules/Table/types.ts index d6f0113..f81c490 100644 --- a/src/molecules/Table/types.ts +++ b/src/molecules/Table/types.ts @@ -1,10 +1,20 @@ -import { TableProps } from 'antd'; +import { Table, GetProps } from 'antd'; import { AnyObject } from 'antd/es/_util/type'; -import { ComponentToken } from 'antd/es/table/style'; +import { ComponentToken as TableComponentTokenAntd } from 'antd/es/table/style'; -/** - * @description Override TableComponentToken of antd. - */ -export type TableComponentToken = ComponentToken & {}; +//#region Define props +type TableProps = GetProps>; +//#endregion -export type RdTableProps = TableProps & {}; +//#region Custom component token +type TableComponentTokenExtend = {}; +//#endregion + +//#region Custom props +type TablePropsExtend = {}; +//#endregion + +//#region export type +export type RdTableProps = TableProps & TablePropsExtend; +export type RdTableComponentToken = TableComponentTokenAntd & TableComponentTokenExtend; +//#endregion From c4d10dcc446a2523d29f9bb7800c1d7a1a28aa8a Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:41:05 +0700 Subject: [PATCH 63/84] feature: Remove SwitchControl for Switch molecule --- src/molecules/Switch/SwitchControl.tsx | 56 -------------------------- src/molecules/Switch/index.tsx | 1 - src/molecules/Switch/types.ts | 28 +++++++------ 3 files changed, 16 insertions(+), 69 deletions(-) delete mode 100644 src/molecules/Switch/SwitchControl.tsx diff --git a/src/molecules/Switch/SwitchControl.tsx b/src/molecules/Switch/SwitchControl.tsx deleted file mode 100644 index 1504187..0000000 --- a/src/molecules/Switch/SwitchControl.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { Switch as AntdSwitch, SwitchProps } from 'antd'; -import { useController } from 'react-hook-form'; -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { TextError } from '../../atomics'; -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; -import { LabelField } from '../LabelField'; -import { RdSwitchControlProps } from './types'; -import { SwitchStyled } from './styles'; - -export const SwitchControl = ({ - name, - control, - - responseType = 'boolean', - label: labelFieldProps, - - ...antdProps -}: RdSwitchControlProps) => { - const { - field: { value, onChange, ref }, - fieldState: { invalid, error }, - } = useController({ - name, - control, - }); - - const handleChange = (newValue: boolean) => { - if (responseType === 'number') { - onChange(newValue ? 1 : 0); - return; - } - - if (responseType === 'boolean') { - onChange(newValue); - return; - } - }; - - return ( - - - - - {invalid && {error?.message}} - - ); -}; diff --git a/src/molecules/Switch/index.tsx b/src/molecules/Switch/index.tsx index 9260943..e2317f1 100644 --- a/src/molecules/Switch/index.tsx +++ b/src/molecules/Switch/index.tsx @@ -1,3 +1,2 @@ export * from './Switch'; -export * from './SwitchControl'; export * from "./types"; \ No newline at end of file diff --git a/src/molecules/Switch/types.ts b/src/molecules/Switch/types.ts index 2e45559..c0d0378 100644 --- a/src/molecules/Switch/types.ts +++ b/src/molecules/Switch/types.ts @@ -1,20 +1,24 @@ -import { GetProps, Switch } from 'antd'; -import { RdRegistryControlField } from '../../models'; -import { RdLabelFieldWrapperProps } from '../LabelField/types'; -import { ComponentToken } from 'antd/es/switch/style'; - -/** - * @description Override SwitchComponentToken of antd. - */ -export type SwitchComponentToken = ComponentToken & {}; +import { Switch, GetProps } from 'antd'; +import { ComponentToken as SwitchComponentTokenAntd } from 'antd/es/switch/style'; +//#region Define props type SwitchProps = GetProps; +//#endregion + +//#region Custom component token +type SwitchComponentTokenExtend = {}; +//#endregion -export interface RdSwitchProps extends SwitchProps, RdLabelFieldWrapperProps { +//#region Custom props +type SwitchPropsExtend = { /** * The value type you want to get from the switch. Default is 'boolean'. */ responseType?: 'number' | 'boolean'; -} +}; +//#endregion -export interface RdSwitchControlProps extends Omit, RdRegistryControlField {} +//#region export type +export type RdSwitchProps = SwitchProps & SwitchPropsExtend; +export type RdSwitchComponentToken = SwitchComponentTokenAntd & SwitchComponentTokenExtend; +//#endregion From 2464522632621b9dd877606b9fbd38c3a0cf4ebf Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:42:10 +0700 Subject: [PATCH 64/84] feature: Remove labelField wrapper in Select molecule --- src/molecules/Select/Select.tsx | 111 +++++++++++++------------------- src/molecules/Select/styles.tsx | 3 +- 2 files changed, 48 insertions(+), 66 deletions(-) diff --git a/src/molecules/Select/Select.tsx b/src/molecules/Select/Select.tsx index e7302c6..e40ece6 100644 --- a/src/molecules/Select/Select.tsx +++ b/src/molecules/Select/Select.tsx @@ -1,12 +1,9 @@ -import { Select as SelectAntd, SelectProps } from 'antd'; -import { forwardRef, LegacyRef, RefAttributes } from 'react'; +import { forwardRef } from 'react'; import { config } from '../..'; -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { RdComponentsConfig } from '../../organisms'; -import { LabelField } from '../LabelField'; -import { SelectWrapper } from './styles'; -import { RdSelectProps, RdSelectRef, variantSelectExtend } from './types'; +import { SelectStyled } from './styles'; +import { RdSelectProps, variantSelectExtend } from './types'; import useExtendVariant from './useExtendVariant'; const isVariantSelectExtend = ( @@ -15,67 +12,51 @@ const isVariantSelectExtend = ( return ['outlined-transparent'].includes(variant); }; -export const Select = forwardRef( - ( - props: RdSelectProps & RefAttributes, - ref: LegacyRef | undefined - ) => { - let { - label: labelFieldProps, - - // Custom props - width, - minWidth, - isHideValueOnLoading = true, - variant, - - ...antdProps - } = props; - - let newSelectDesignToken: RdComponentsConfig['Select'] = { - ...config.componentToken?.Select, - algorithm: true, +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 - //#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, - }; + if (variant && isVariantSelectExtend(variant)) { + // Get design token config for color. + const designTokenConfig = useExtendVariant(variant); - variant = 'outlined'; - } + // Merge design token config with button design token. + newSelectDesignToken = { + ...newSelectDesignToken, + ...designTokenConfig, + }; - return ( - - - - - - - - ); + variant = 'outlined'; } -); + + return ( + + + + ); +}); diff --git a/src/molecules/Select/styles.tsx b/src/molecules/Select/styles.tsx index 082f15d..aab24fe 100644 --- a/src/molecules/Select/styles.tsx +++ b/src/molecules/Select/styles.tsx @@ -1,7 +1,8 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; +import { Select } from 'antd'; -export const SelectWrapper = styled.div<{ width?: string | number; minWidth?: string | number }>` +export const SelectStyled = styled(Select)<{ width?: string | number; minWidth?: string | number }>` ${props => { return ( props.width && From 8b477643e1aa0a6524b3f21432dbb5a63f5b8b54 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Sun, 15 Dec 2024 18:42:33 +0700 Subject: [PATCH 65/84] feature: Remove SelectControl molecule --- src/molecules/Select/SelectControl.tsx | 50 -------------------------- src/molecules/Select/index.ts | 1 - 2 files changed, 51 deletions(-) delete mode 100644 src/molecules/Select/SelectControl.tsx diff --git a/src/molecules/Select/SelectControl.tsx b/src/molecules/Select/SelectControl.tsx deleted file mode 100644 index a3b4fba..0000000 --- a/src/molecules/Select/SelectControl.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { Select as AntdSelect, SelectProps } from 'antd'; -import { useController } from 'react-hook-form'; -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { TextError } from '../../atomics'; -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; -import { LabelField } from '../LabelField'; -import { SelectWrapper } from './styles'; -import { RdSelectControlProps } from './types'; -import { RefAttributes } from 'react'; -import { Select } from './Select'; - -export const SelectControl = ({ - name, - control, - defaultValue, - - label: labelFieldProps, - - ...antdProps -}: RdSelectControlProps & RefAttributes) => { - const { - field: { value, onChange, onBlur, ref }, - fieldState: { invalid, error }, - } = useController({ - name, - control, - defaultValue, - }); - - return ( - - - -