diff --git a/.vscode/settings.json b/.vscode/settings.json index 397b872..4c2440c 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,5 +1,6 @@ { "cSpell.words": [ + "Popconfirm", "Sider" ] } \ No newline at end of file diff --git a/package.json b/package.json index 6e474be..07e0e57 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "1byte-react-design", - "version": "0.10.5", + "version": "0.10.31", "main": "dist/index.js", "module": "dist/index.js", "types": "dist/index.d.ts", @@ -13,9 +13,14 @@ "dist" ], "dependencies": { + "@dnd-kit/core": "^6.3.1", + "@dnd-kit/modifiers": "^9.0.0", + "@dnd-kit/sortable": "^10.0.0", + "@dnd-kit/utilities": "^3.2.2", "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", "antd": "^5.21.2", + "clsx": "^2.1.1", "dayjs": "^1.11.13", "polished": "^4.3.1", "react": "^18.3.1", @@ -36,6 +41,7 @@ "tsconfig-paths-webpack-plugin": "^4.1.0", "typescript": "^5.6.2", "webpack": "^5.95.0", + "webpack-bundle-analyzer": "^4.10.2", "webpack-cli": "^5.1.4", "webpack-dev-server": "^5.1.0" }, diff --git a/src/ConfigProviderDesign.tsx b/src/ConfigProviderDesign.tsx index 7980d8d..448bad7 100644 --- a/src/ConfigProviderDesign.tsx +++ b/src/ConfigProviderDesign.tsx @@ -1,5 +1,5 @@ import { ConfigProvider, ThemeConfig } from 'antd'; -import { PropsWithChildren } from 'react'; +import { PropsWithChildren, useContext } from 'react'; import { config } from '.'; interface IConfigProviderDesignProps extends PropsWithChildren { 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/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 84a576c..7bcdbe1 100644 --- a/src/atomics/Flex/types.ts +++ b/src/atomics/Flex/types.ts @@ -1,3 +1,20 @@ -import { FlexProps } from 'antd'; +import { Flex, GetProps } from 'antd'; +import { ComponentToken as FlexComponentTokenAntd } from 'antd/es/flex/style'; -export interface IFlexProps extends FlexProps {} +//#region Define Ant Design types +type FlexProps = GetProps; +//#endregion + +//#region Define extended component tokens +type FlexComponentTokenExtend = {}; +//#endregion + +//#region Define extended types +type FlexPropsExtend = {}; +//#endregion + +//#region Export types +export type RdFlexProps = FlexProps & FlexPropsExtend; + +export type RdFlexComponentToken = FlexComponentTokenAntd & FlexComponentTokenExtend; +//#endregion 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 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..5fbb009 --- /dev/null +++ b/src/atomics/Typography/TypographyLink.tsx @@ -0,0 +1,9 @@ +import { forwardRef } from 'react'; +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..0ab6f71 --- /dev/null +++ b/src/atomics/Typography/TypographyParagraph.tsx @@ -0,0 +1,9 @@ +import { forwardRef } from 'react'; +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..905cd49 --- /dev/null +++ b/src/atomics/Typography/TypographyText.tsx @@ -0,0 +1,25 @@ +import { forwardRef, useMemo } from 'react'; +import { TypographyTextStyles } from './styles'; +import { RdTypographyTextProps } from './types'; + +export const TypographyText = forwardRef( + (props: RdTypographyTextProps, ref: RdTypographyTextProps['ref']) => { + const { size = 'normal', 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..6034307 --- /dev/null +++ b/src/atomics/Typography/TypographyTitle.tsx @@ -0,0 +1,9 @@ +import { forwardRef } from 'react'; +import { TypographyTitleStyles } from './styles'; +import { RdTypographyTitleProps } from './types'; + +export const TypographyTitle = forwardRef( + ({ disableMargin, ...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..ee82e8c 100644 --- a/src/atomics/Typography/styles.tsx +++ b/src/atomics/Typography/styles.tsx @@ -1,33 +1,39 @@ import styled from '@emotion/styled'; -import { config } from '../..'; +import { Typography } from 'antd'; +import { getComponentOrGlobalToken } from '../../utils/token'; +import { RdTypographyTextProps, RdTypographyTitleProps } from './types'; +import { css } from '@emotion/react'; +import { getExcludeForwardProps } from '../../utils/styles'; -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 TypographyLinkStyles = styled(Typography.Link)``; + +export const TypographyTitleStyles = styled(Typography.Title, { + shouldForwardProp: prop => + getExcludeForwardProps( + ['disableMargin'] as (keyof RdTypographyTitleProps)[], + prop + ), +})` + ${({ disableMargin }) => { + return ( + disableMargin && + css` + margin-bottom: 0 !important; + ` + ); + }} `; -export const DescriptionWrapper = styled.span` - font-size: ${config.designToken.fontSizeSM}px; - color: ${config.designToken.colorTextDescription}; - font-style: italic; + +export const TypographyTextStyles = styled(Typography.Text)>` + ${({ size }) => { + switch (size) { + case 'small': + return ` + font-size: ${getComponentOrGlobalToken('Typography', 'fontSizeSM')}px; + `; + // Case normal is the default size + } + }} `; + +export const TypographyParagraphStyles = styled(Typography.Paragraph)``; diff --git a/src/atomics/Typography/types.ts b/src/atomics/Typography/types.ts index 6a2ce12..49dfba1 100644 --- a/src/atomics/Typography/types.ts +++ b/src/atomics/Typography/types.ts @@ -1,48 +1,55 @@ -import { PropsWithChildren, ReactElement, ReactHTMLElement } from 'react'; +import { Typography, GetProps } from 'antd'; +import { ComponentToken as TypographyComponentTokenAntd } from 'antd/es/typography/style'; -export interface IBaseHProps extends PropsWithChildren {} +//#region Define Ant Design types +type TypographyProps = GetProps; +type TypographyLinkProps = GetProps; +type TypographyParagraphProps = GetProps; +type TypographyTextProps = GetProps; +type TypographyTitleProps = GetProps; +//#endregion -/** - * @description H1 component props - */ -export interface IH1Props extends IBaseHProps {} +//#region Define extended component tokens +type TypographyComponentTokenExtend = {}; +//#endregion + +//#region Define extended types +type TypographyPropsExtend = {}; +type TypographyLinkPropsExtend = {}; +type TypographyParagraphPropsExtend = {}; +type TypographyTextPropsExtend = { + /** + * @description The size of the text. + * @default "normal" + */ + size?: 'small' | 'normal'; -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 {} + /** + * @description Callback function that is triggered when the text value changes. + * @param value The new value of the text. + */ + onChange?: (value: string) => void; +}; -export type RdTextProps = IBaseHProps & { +/** + * Extended properties for customizing the Typography.Title component. + */ +type TypographyTitlePropsExtend = { /** - * Font weight for the text. - * Can be a number (100-900) or a string representing font weight name. - * Examples: "thin", "light", "bold", etc. + * If set to `true`, disables the default margin applied to the Typography.Title component. + * @default false */ - 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'; + disableMargin?: boolean; }; -export interface IDescriptionProps extends IBaseHProps {} +//#endregion + +//#region Export types +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 type RdTypographyComponentToken = TypographyComponentTokenAntd & + TypographyComponentTokenExtend; +//#endregion diff --git a/src/atomics/index.ts b/src/atomics/index.ts index 5c68272..754216f 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/index'; +export * from './Flex'; +export * from './Typography'; diff --git a/src/index.tsx b/src/index.tsx index 880ee97..1366ed7 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,11 +1,9 @@ import { theme } from 'antd'; -import { IRdNotificationConfig, IRdThemeConfig } from './organisms'; +import { IRdThemeConfig } from './utils/types'; export interface IConfig { designToken: NonNullable; componentToken: IRdThemeConfig['components']; - - notification?: IRdNotificationConfig; } export const config: IConfig = { @@ -14,8 +12,6 @@ export const config: IConfig = { }; export * from './atomics'; -export * from './models'; export * from './molecules'; export * from './organisms'; - -export const version = '0.0.6'; +export * from './utils'; \ No newline at end of file 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/Affix/Affix.tsx b/src/molecules/Affix/Affix.tsx new file mode 100644 index 0000000..7f8f479 --- /dev/null +++ b/src/molecules/Affix/Affix.tsx @@ -0,0 +1,7 @@ +import { forwardRef } from 'react'; +import { AffixStyles } from './styles'; +import { RdAffixComponent } from './types'; + +export const Affix: RdAffixComponent = forwardRef((props, ref) => { + 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..d1e0cad --- /dev/null +++ b/src/molecules/Affix/types.ts @@ -0,0 +1,32 @@ +import { Affix, AffixRef, GetProps } from 'antd'; +import { ComponentToken as AffixComponentTokenAntd } from 'antd/es/affix/style'; + +//#region Define Ant Design types +type AffixPropsAntd = GetProps; + +type AffixRefAntd = AffixRef; +//#endregion + +//#region Define extended component tokens +type AffixComponentTokenExtend = {}; +//#endregion + +//#region Define extended types +type AffixPropsExtend = {}; + +type AffixRefExtend = {}; +//#endregion + +//#region Export types +export type RdAffixProps = AffixPropsAntd & AffixPropsExtend; + +export type RdAffixRef = AffixRefAntd & AffixRefExtend; + +export type RdAffixComponentToken = AffixComponentTokenAntd & AffixComponentTokenExtend; +//#endregion + +//#region Define component types +export type RdAffixComponent = React.ForwardRefExoticComponent< + RdAffixProps & React.RefAttributes +>; +//#endregion diff --git a/src/molecules/Anchor/Anchor.tsx b/src/molecules/Anchor/Anchor.tsx new file mode 100644 index 0000000..eb3151b --- /dev/null +++ b/src/molecules/Anchor/Anchor.tsx @@ -0,0 +1,10 @@ +import { AnchorLink } from './AnchorLink'; +import { AnchorStyles } from './styles'; +import { RdAnchorComponent, RdAnchorCompoundedComponent } from './types'; + +export const AnchorInternal: RdAnchorComponent = props => { + return ; +}; + +export const Anchor = AnchorInternal as RdAnchorCompoundedComponent; +Anchor.Link = AnchorLink; diff --git a/src/molecules/Anchor/AnchorLink.tsx b/src/molecules/Anchor/AnchorLink.tsx new file mode 100644 index 0000000..406017c --- /dev/null +++ b/src/molecules/Anchor/AnchorLink.tsx @@ -0,0 +1,6 @@ +import { AnchorLinkStyles } from './styles'; +import { RdAnchorLinkComponent } from './types'; + +export const AnchorLink: RdAnchorLinkComponent = props => { + 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..98395ef --- /dev/null +++ b/src/molecules/Anchor/styles.tsx @@ -0,0 +1,5 @@ +import styled from '@emotion/styled'; +import { Anchor } from 'antd'; + +export const AnchorStyles = styled(Anchor)``; +export const AnchorLinkStyles = styled(Anchor.Link)``; diff --git a/src/molecules/Anchor/types.ts b/src/molecules/Anchor/types.ts new file mode 100644 index 0000000..f86c5e9 --- /dev/null +++ b/src/molecules/Anchor/types.ts @@ -0,0 +1,34 @@ +import { Anchor, GetProps } from 'antd'; +import { ComponentToken as AnchorComponentTokenAntd } from 'antd/es/anchor/style'; +import { AnchorInternal } from './Anchor'; +import { AnchorLink } from './AnchorLink'; + +//#region Define Ant Design types +type AnchorPropsAntd = GetProps; +type AnchorLinkPropsAntd = GetProps; +//#endregion + +//#region Define extended component tokens +type AnchorComponentTokenExtend = {}; +//#endregion + +//#region Define extended types +type AnchorPropsExtend = {}; +type AnchorLinkPropsExtend = {}; +//#endregion + +//#region Export types +export type RdAnchorProps = AnchorPropsAntd & AnchorPropsExtend; +export type RdAnchorLinkProps = AnchorLinkPropsAntd & AnchorLinkPropsExtend; + +export type RdAnchorComponentToken = AnchorComponentTokenAntd & AnchorComponentTokenExtend; +//#endregion + +//#region Define component types +export type RdAnchorComponent = React.FC; +export type RdAnchorLinkComponent = React.FC; + +export type RdAnchorCompoundedComponent = RdAnchorComponent & { + Link: RdAnchorLinkComponent; +}; +//#endregion diff --git a/src/molecules/Avatar/Avatar.tsx b/src/molecules/Avatar/Avatar.tsx index cac75c5..0a52c09 100644 --- a/src/molecules/Avatar/Avatar.tsx +++ b/src/molecules/Avatar/Avatar.tsx @@ -1,11 +1,12 @@ -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { forwardRef } from 'react'; +import { AvatarGroup } from './AvatarGroup'; import { AvatarStyles } from './styles'; -import { RdAvatarProps } from './types'; +import { RdAvatarComponent, RdAvatarCompoundedComponent } from './types'; -export const Avatar = (props: RdAvatarProps) => { - return ( - - - - ); -}; +export const AvatarInternal: RdAvatarComponent = forwardRef((props, ref) => { + return ; +}); + +export const Avatar = AvatarInternal as RdAvatarCompoundedComponent; + +Avatar.Group = AvatarGroup; diff --git a/src/molecules/Avatar/AvatarGroup.tsx b/src/molecules/Avatar/AvatarGroup.tsx new file mode 100644 index 0000000..4324c9b --- /dev/null +++ b/src/molecules/Avatar/AvatarGroup.tsx @@ -0,0 +1,6 @@ +import { AvatarGroupStyles } from './styles'; +import { RdAvatarGroupComponent } from './types'; + +export const AvatarGroup: RdAvatarGroupComponent = (props) => { + return ; +}; \ No newline at end of file diff --git a/src/molecules/Avatar/styles.tsx b/src/molecules/Avatar/styles.tsx index 782053f..690516e 100644 --- a/src/molecules/Avatar/styles.tsx +++ b/src/molecules/Avatar/styles.tsx @@ -2,3 +2,4 @@ import styled from '@emotion/styled'; import { Avatar } from 'antd'; export const AvatarStyles = styled(Avatar)``; +export const AvatarGroupStyles = styled(Avatar.Group)``; diff --git a/src/molecules/Avatar/types.ts b/src/molecules/Avatar/types.ts index bcb44e9..199aa2d 100644 --- a/src/molecules/Avatar/types.ts +++ b/src/molecules/Avatar/types.ts @@ -1,5 +1,35 @@ -import { AvatarProps } from 'antd'; +import { Avatar, GetProps } from 'antd'; +import { ComponentToken as AvatarComponentTokenAntd } from 'antd/es/avatar/style'; +import { AvatarGroup } from './AvatarGroup'; +//#region Define Ant Design types +type AvatarPropsAntd = GetProps; +type AvatarGroupPropsAntd = GetProps; +//#endregion + +//#region Define extended component tokens +type AvatarComponentTokenExtend = {}; +//#endregion + +//#region Define extended types type AvatarPropsExtend = {}; +type AvatarGroupPropsExtend = {}; +//#endregion + +//#region Export types +export type RdAvatarProps = AvatarPropsAntd & AvatarPropsExtend; +export type RdAvatarGroupProps = AvatarGroupPropsAntd & AvatarGroupPropsExtend; + +export type RdAvatarComponentToken = AvatarComponentTokenAntd & AvatarComponentTokenExtend; +//#endregion + +//#region Define component types +export type RdAvatarComponent = React.ForwardRefExoticComponent< + RdAvatarProps & React.RefAttributes +>; +export type RdAvatarGroupComponent = React.FC; -export type RdAvatarProps = AvatarProps & AvatarPropsExtend; +export type RdAvatarCompoundedComponent = RdAvatarComponent & { + Group: RdAvatarGroupComponent; +}; +//#endregion diff --git a/src/molecules/Badge/Badge.tsx b/src/molecules/Badge/Badge.tsx new file mode 100644 index 0000000..bc1cd87 --- /dev/null +++ b/src/molecules/Badge/Badge.tsx @@ -0,0 +1,11 @@ +import { forwardRef } from 'react'; +import { BadgeRibbon } from './BadgeRibbon'; +import { BadgeStyles } from './styles'; +import { RdBadgeComponent, RdBadgeCompoundedComponent } from './types'; + +export const BadgeInternal: RdBadgeComponent = forwardRef((props, ref) => { + return ; +}); + +export const Badge = BadgeInternal as RdBadgeCompoundedComponent; +Badge.Ribbon = BadgeRibbon; diff --git a/src/molecules/Badge/BadgeRibbon.tsx b/src/molecules/Badge/BadgeRibbon.tsx new file mode 100644 index 0000000..22e56dc --- /dev/null +++ b/src/molecules/Badge/BadgeRibbon.tsx @@ -0,0 +1,6 @@ +import { BadgeRibbonStyles } from './styles'; +import { RdBadgeRibbonComponent } from './types'; + +export const BadgeRibbon: RdBadgeRibbonComponent = props => { + 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..6f5e52c --- /dev/null +++ b/src/molecules/Badge/styles.tsx @@ -0,0 +1,5 @@ +import styled from '@emotion/styled'; +import { Badge } from 'antd'; + +export const BadgeStyles = styled(Badge)``; +export const BadgeRibbonStyles = styled(Badge.Ribbon)``; diff --git a/src/molecules/Badge/types.ts b/src/molecules/Badge/types.ts new file mode 100644 index 0000000..27950ed --- /dev/null +++ b/src/molecules/Badge/types.ts @@ -0,0 +1,36 @@ +import { Badge, GetProps } from 'antd'; +import { ComponentToken as BadgeComponentTokenAntd } from 'antd/es/badge/style'; + +//#region Define Ant Design types +type BadgePropsAntd = GetProps; +type BadgeRibbonPropsAntd = GetProps; +//#endregion + +//#region Define extended component tokens +type BadgeComponentTokenExtend = {}; +//#endregion + +//#region Define extended types +type BadgePropsExtend = {}; +type BadgeRibbonPropsExtend = {}; +//#endregion + +//#region Export types +export type RdBadgeProps = BadgePropsAntd & BadgePropsExtend; +export type RdBadgeRibbonProps = BadgeRibbonPropsAntd & BadgeRibbonPropsExtend; + +export type RdBadgeComponentToken = BadgeComponentTokenAntd & BadgeComponentTokenExtend; +//#endregion + +//#region Define component types +export type RdBadgeComponent = React.ForwardRefExoticComponent< + RdBadgeProps & React.RefAttributes +>; + +export type RdBadgeRibbonComponent = React.FC; + +export type RdBadgeCompoundedComponent = RdBadgeComponent & { + Ribbon: RdBadgeRibbonComponent; +}; + +//#endregion diff --git a/src/molecules/Blur/Blur.tsx b/src/molecules/Blur/Blur.tsx index d3a7572..388ba83 100644 --- a/src/molecules/Blur/Blur.tsx +++ b/src/molecules/Blur/Blur.tsx @@ -1,4 +1,3 @@ -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { BlurBody, BlurHeader, BlurTitle, BlurWrapper } from './styles'; import { RdBlurProps } from './types'; @@ -8,16 +7,14 @@ export const Blur = (props: RdBlurProps) => { if (!isBlur) return children; return ( - - - {!isLoading && ( - - {title} - - )} + + {!isLoading && ( + + {title} + + )} - {children} - - + {children} + ); }; diff --git a/src/molecules/Breadcrumb/Breadcrumb.tsx b/src/molecules/Breadcrumb/Breadcrumb.tsx index 4192a79..5bf130c 100644 --- a/src/molecules/Breadcrumb/Breadcrumb.tsx +++ b/src/molecules/Breadcrumb/Breadcrumb.tsx @@ -1,11 +1,12 @@ -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { BreadcrumbItem } from './BreadcrumbItem'; +import { BreadcrumbSeparator } from './BreadcrumbSeparator'; import { BreadcrumbStyles } from './styles'; -import { RdBreadcrumbProps } from './types'; +import { RdBreadcrumbComponent, RdBreadcrumbCompoundedComponent } from './types'; -export const Breadcrumb = ({ ...antdProps }: RdBreadcrumbProps) => { - return ( - - - - ); +export const BreadcrumbInternal: RdBreadcrumbComponent = props => { + return ; }; + +export const Breadcrumb = BreadcrumbInternal as RdBreadcrumbCompoundedComponent; +Breadcrumb.Item = BreadcrumbItem; +Breadcrumb.Separator = BreadcrumbSeparator; diff --git a/src/molecules/Breadcrumb/BreadcrumbItem.tsx b/src/molecules/Breadcrumb/BreadcrumbItem.tsx new file mode 100644 index 0000000..a155721 --- /dev/null +++ b/src/molecules/Breadcrumb/BreadcrumbItem.tsx @@ -0,0 +1,6 @@ +import { BreadcrumbItemStyles } from './styles'; +import { RdBreadcrumbItemComponent } from './types'; + +export const BreadcrumbItem: RdBreadcrumbItemComponent = props => { + return ; +}; diff --git a/src/molecules/Breadcrumb/BreadcrumbSeparator.tsx b/src/molecules/Breadcrumb/BreadcrumbSeparator.tsx new file mode 100644 index 0000000..d309d57 --- /dev/null +++ b/src/molecules/Breadcrumb/BreadcrumbSeparator.tsx @@ -0,0 +1,6 @@ +import { BreadcrumbSeparatorStyles } from './styles'; +import { RdBreadcrumbSeparatorComponent } from './types'; + +export const BreadcrumbSeparator: RdBreadcrumbSeparatorComponent = props => { + return ; +}; diff --git a/src/molecules/Breadcrumb/styles.tsx b/src/molecules/Breadcrumb/styles.tsx index 7764589..131b221 100644 --- a/src/molecules/Breadcrumb/styles.tsx +++ b/src/molecules/Breadcrumb/styles.tsx @@ -2,3 +2,5 @@ import styled from '@emotion/styled'; import { Breadcrumb } from 'antd'; export const BreadcrumbStyles = styled(Breadcrumb)``; +export const BreadcrumbItemStyles = styled(Breadcrumb.Item)``; +export const BreadcrumbSeparatorStyles = styled(Breadcrumb.Separator)``; diff --git a/src/molecules/Breadcrumb/types.ts b/src/molecules/Breadcrumb/types.ts index 683f638..3e8eea6 100644 --- a/src/molecules/Breadcrumb/types.ts +++ b/src/molecules/Breadcrumb/types.ts @@ -1,5 +1,48 @@ -import { BreadcrumbProps } from 'antd'; +import { Breadcrumb, GetProps } from 'antd'; +import { AnyObject } from 'antd/es/_util/type'; +import { ComponentToken as BreadcrumbComponentTokenAntd } from 'antd/es/breadcrumb/style'; +import React from 'react'; -type RdBreadcrumbPropsExtend = {}; +//#region Define Ant Design types +type BreadcrumbPropsAntd = GetProps>; +type BreadcrumbItemPropsAntd = GetProps; +type BreadcrumbSeparatorPropsAntd = GetProps; +//#endregion -export type RdBreadcrumbProps = BreadcrumbProps & RdBreadcrumbPropsExtend; +//#region Define extended component tokens +type BreadcrumbComponentTokenExtend = {}; +//#endregion + +//#region Define extended types +type BreadcrumbPropsExtend = {}; +type BreadcrumbItemPropsExtend = {}; +type BreadcrumbSeparatorPropsExtend = {}; +//#endregion + +//#region Export types +export type RdBreadcrumbProps = BreadcrumbPropsAntd & + BreadcrumbPropsExtend; +export type RdBreadcrumbItemProps = BreadcrumbItemPropsAntd & BreadcrumbItemPropsExtend; +export type RdBreadcrumbSeparatorProps = BreadcrumbSeparatorPropsAntd & + BreadcrumbSeparatorPropsExtend; + +export type RdBreadcrumbComponentToken = BreadcrumbComponentTokenAntd & + BreadcrumbComponentTokenExtend; +//#endregion + +//#region Define component types +export type RdBreadcrumbComponent = ( + props: RdBreadcrumbProps +) => React.ReactElement>; + +export type RdBreadcrumbItemComponent = React.FC; + +export type RdBreadcrumbSeparatorComponent = React.FC<{ + children?: React.ReactNode; +}>; + +export type RdBreadcrumbCompoundedComponent = RdBreadcrumbComponent & { + Item: RdBreadcrumbItemComponent; + Separator: RdBreadcrumbSeparatorComponent; +}; +//#endregion diff --git a/src/molecules/Button/Button.tsx b/src/molecules/Button/Button.tsx index 4126a33..b9d16a9 100644 --- a/src/molecules/Button/Button.tsx +++ b/src/molecules/Button/Button.tsx @@ -1,44 +1,14 @@ -import { config, IRdComponentsConfig } from '../..'; -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { forwardRef } from 'react'; +import { ButtonGroup } from './ButtonGroup'; import { ButtonStyles } from './styles'; -import { colorButtonExtend, RdButtonProps } from './types'; -import { useExtendColor } from './useExtendColor'; +import { RdButtonComponent, RdButtonCompoundedComponent } from './types'; +import clsx from 'clsx'; -const isColorButtonExtend = ( - color: NonNullable -): color is colorButtonExtend => { - return ['second', 'tertiary', 'quaternary'].includes(color); -}; +export const ButtonInternal: RdButtonComponent = forwardRef((props, ref) => { + const { rootClassName } = props; -export const Button = ({ width, color, to, ...antdProps }: RdButtonProps) => { - let newButtonDesignToken: IRdComponentsConfig['Button'] = { - ...config.componentToken?.Button, - algorithm: true, - }; + return ; +}); - //#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, - }; - - // Set color is primary if color include 'second', 'tertiary', 'quaternary' because these color is color primary in component token. - color = 'primary'; - } - //#endregion - - return ( - - - - ); -}; +export const Button = ButtonInternal as RdButtonCompoundedComponent; +Button.Group = ButtonGroup; \ No newline at end of file diff --git a/src/molecules/Button/ButtonGroup.tsx b/src/molecules/Button/ButtonGroup.tsx new file mode 100644 index 0000000..2589ddd --- /dev/null +++ b/src/molecules/Button/ButtonGroup.tsx @@ -0,0 +1,6 @@ +import { ButtonGroupStyles } from './styles'; +import { RdButtonGroupComponent } from './types'; + +export const ButtonGroup: RdButtonGroupComponent = props => { + return ; +}; 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..4e98c91 100644 --- a/src/molecules/Button/styles.tsx +++ b/src/molecules/Button/styles.tsx @@ -1,8 +1,57 @@ +import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { Button } from 'antd'; +import { getComponentOrGlobalToken, getExcludeForwardProps } from '../../utils'; +import { RdButtonComponent, RdButtonGroupProps, RdButtonProps } from './types'; -export const ButtonStyles = styled(Button)<{ - width?: string | number; -}>` - ${({ width }) => width && `width: ${width};`} +export const ButtonStyles = styled(Button as RdButtonComponent, { + shouldForwardProp: prop => + getExcludeForwardProps(['fullWidth'] as (keyof RdButtonProps)[], prop), +})` + ${({ fullWidth }) => fullWidth && fullWidthCSS} + + ${({ color }) => { + switch (color) { + case 'second': + return css``; + case 'tertiary': + return css``; + case 'quaternary': + return css``; + case 'success': + return css` + &.ant-btn { + color: ${getComponentOrGlobalToken('Button', 'colorSuccess')}; + } + `; + default: + return color; + } + }} + + ${({ align }) => { + switch (align) { + case 'left': + return css` + justify-content: flex-start; + `; + case 'center': + return css` + justify-content: center; + `; + case 'right': + return css` + justify-content: flex-end; + `; + default: + return null; + } + }} +`; +export const ButtonGroupStyles = styled(Button.Group)``; + +const fullWidthCSS = css` + &.rd-button { + width: 100%; + } `; diff --git a/src/molecules/Button/types.ts b/src/molecules/Button/types.ts index ecb219e..c1a9569 100644 --- a/src/molecules/Button/types.ts +++ b/src/molecules/Button/types.ts @@ -1,30 +1,63 @@ -import { ButtonProps } from 'antd'; +import { Button, ButtonProps, GetProps } from 'antd'; +import { ComponentToken as ButtonComponentTokenAntd } from 'antd/es/button/style'; +import { ButtonInternal } from './Button'; +import { ButtonGroup } from './ButtonGroup'; +//#region Define Ant Design types +type ButtonPropsAntd = GetProps; +type ButtonGroupPropsAntd = GetProps; +//#endregion + +//#region Define extended component tokens +type ButtonComponentTokenExtend = {}; +//#endregion + +//#region Define extended types /** * @description The color of the button extend. */ -export type colorButtonExtend = 'second' | 'tertiary' | 'quaternary'; +export type ColorButtonExtendProp = 'second' | 'tertiary' | 'quaternary' | 'success'; -/** - * @description The props of the button. - * @override antd.ButtonProps - * @see ButtonProps - */ -export interface RdButtonProps extends Omit { - /** - * @description The width of the button. - */ - width?: string | number; +export type AlignButtonProp = 'left' | 'center' | 'right'; +type ButtonPropsExtend = { /** * @description The color of the button. * @see ButtonProps#color */ - color?: ButtonProps['color'] | colorButtonExtend; + color?: ButtonPropsAntd['color'] | ColorButtonExtendProp; + + /** + * If `true`, the button will take up the full width of its container. + * @default false + */ + fullWidth?: boolean; /** - * @description Link in react-router-dom. - * @see Link + * Align content in the button. */ - to?: string; -} + align?: 'left' | 'center' | 'right'; +}; + +type ButtonGroupPropsExtend = {}; +//#endregion + +//#region Export types +export type RdButtonProps = Omit & ButtonPropsExtend; +export type RdButtonGroupProps = ButtonGroupPropsAntd & ButtonGroupPropsExtend; + +export type RdButtonComponentToken = ButtonComponentTokenAntd & ButtonComponentTokenExtend; +//#endregion + +//#region Define component types +export type RdButtonComponent = React.ForwardRefExoticComponent< + RdButtonProps & React.RefAttributes +>; + +export type RdButtonGroupComponent = React.FC; + +export type RdButtonCompoundedComponent = typeof ButtonInternal & { + Group: typeof ButtonGroup; +}; + +//#endregion diff --git a/src/molecules/Button/useExtendColor.ts b/src/molecules/Button/useExtendColor.ts index 44ab766..f600024 100644 --- a/src/molecules/Button/useExtendColor.ts +++ b/src/molecules/Button/useExtendColor.ts @@ -1,8 +1,9 @@ -import { config, IRdComponentsConfig } from '../..'; -import { colorButtonExtend } from './types'; +import { config } from '../..'; +import { RdComponentsConfig } from '../../utils/types'; +import { ColorButtonExtendProp } from './types'; -export const useExtendColor = (color: colorButtonExtend) => { - const newComponentsButton: IRdComponentsConfig['Button'] = {}; +export const useExtendColor = (color: ColorButtonExtendProp) => { + const newComponentsButton: RdComponentsConfig['Button'] = {}; switch (color) { case 'second': diff --git a/src/molecules/Card/Card.tsx b/src/molecules/Card/Card.tsx index 4cd2962..975ed8f 100644 --- a/src/molecules/Card/Card.tsx +++ b/src/molecules/Card/Card.tsx @@ -1,11 +1,19 @@ -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import clsx from 'clsx'; +import { GridCard } from './Grid'; +import { MetaCard } from './Meta'; import { CardStyles } from './styles'; -import { RdCardProps } from './types'; - -export const Card = ({ ...antdProps }: RdCardProps) => { - return ( - - - - ); +import { RdCardCompoundedComponent, RdCardProps } from './types'; + +export const CardInternal = ({ className, variant = 'default', ...antdProps }: RdCardProps) => { + const variantClass: Record, string> = { + compact: 'rd-card-variant-compact', + default: '', + }; + + return ; }; + +export const Card = CardInternal as RdCardCompoundedComponent; + +Card.Grid = GridCard; +Card.Meta = MetaCard; diff --git a/src/molecules/Card/Grid.tsx b/src/molecules/Card/Grid.tsx new file mode 100644 index 0000000..8ea8836 --- /dev/null +++ b/src/molecules/Card/Grid.tsx @@ -0,0 +1,6 @@ +import { CardStyles } from './styles'; +import { RdGridCardComponent } from './types'; + +export const GridCard: RdGridCardComponent = props => { + return ; +}; diff --git a/src/molecules/Card/Meta.tsx b/src/molecules/Card/Meta.tsx new file mode 100644 index 0000000..6c0aa29 --- /dev/null +++ b/src/molecules/Card/Meta.tsx @@ -0,0 +1,6 @@ +import { CardStyles } from './styles'; +import { RdMetaCardComponent } from './types'; + +export const MetaCard: RdMetaCardComponent = props => { + return ; +}; diff --git a/src/molecules/Card/index.tsx b/src/molecules/Card/index.tsx index fafafe7..344b1e7 100644 --- a/src/molecules/Card/index.tsx +++ b/src/molecules/Card/index.tsx @@ -1,2 +1,2 @@ export * from './Card'; -export * from './types'; \ No newline at end of file +export * from './types'; diff --git a/src/molecules/Card/styles.tsx b/src/molecules/Card/styles.tsx index e732722..ad104d1 100644 --- a/src/molecules/Card/styles.tsx +++ b/src/molecules/Card/styles.tsx @@ -1,65 +1,60 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { Card } from 'antd'; -import { getComponentOrGlobalToken } 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; +import { getExcludeForwardProps } from '../../utils/styles'; +import { getComponentOrGlobalToken, getComponentToken } from '../../utils/token'; +import { RdCardProps, RdGridCardProps, RdMetaCardProps } from './types'; + +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')}; + } + } } - }} + `} `; + +export const GridCardStyles = styled(Card.Grid)``; +export const MetaCardStyles = styled(Card.Meta)``; diff --git a/src/molecules/Card/types.ts b/src/molecules/Card/types.ts index ce92300..c367b6c 100644 --- a/src/molecules/Card/types.ts +++ b/src/molecules/Card/types.ts @@ -1,6 +1,21 @@ -import { CardProps } from 'antd'; +import { Card, GetProps } from 'antd'; +import { ComponentToken as CardComponentTokenAntd } from 'antd/es/card/style'; +import { CardInternal } from './Card'; +import { GridCard } from './Grid'; +import { MetaCard } from './Meta'; -type RdCardPropsExtend = { +//#region Define Ant Design types +type CardPropsAntd = GetProps; +type GridCardPropsAntd = GetProps; +type MetaCardPropsAntd = GetProps; +//#endregion + +//#region Define extended component tokens +type CardComponentTokenExtend = {}; +//#endregion + +//#region Define extended types +type CardPropsExtend = { /** * @description * Defines the visual style of the entire card component. @@ -13,4 +28,27 @@ type RdCardPropsExtend = { variant?: 'default' | 'compact'; }; -export type RdCardProps = CardProps & RdCardPropsExtend; +type GridCardPropsExtend = {}; +type MetaCardPropsExtend = {}; +//#endregion + +//#region Export types +export type RdCardProps = CardPropsAntd & CardPropsExtend; +export type RdGridCardProps = GridCardPropsAntd & GridCardPropsExtend; +export type RdMetaCardProps = MetaCardPropsAntd & MetaCardPropsExtend; + +export type RdCardComponentToken = CardComponentTokenAntd & CardComponentTokenExtend; +//#endregion + +//#region Define component types +export type RdCardInternalComponent = React.ForwardRefExoticComponent< + RdCardProps & React.RefAttributes +>; +export type RdGridCardComponent = React.FC; +export type RdMetaCardComponent = React.FC; + +export type RdCardCompoundedComponent = typeof CardInternal & { + Grid: typeof GridCard; + Meta: typeof MetaCard; +}; +//#endregion diff --git a/src/molecules/Checkbox/Checkbox.tsx b/src/molecules/Checkbox/Checkbox.tsx index 99181a9..b0bba57 100644 --- a/src/molecules/Checkbox/Checkbox.tsx +++ b/src/molecules/Checkbox/Checkbox.tsx @@ -1,26 +1,12 @@ -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { LabelField } from '../LabelField'; +import { forwardRef } from 'react'; import { CheckboxGroup } from './CheckboxGroup'; import { CheckboxStyles } from './styles'; -import { RdCheckboxProps } from './types'; +import { RdCheckboxCompoundedComponent, RdInternalCheckboxComponent } from './types'; -export const Checkbox = ({ - label: labelFieldProps, +export const CheckboxInternal: RdInternalCheckboxComponent = forwardRef((props, ref) => { + return ; +}); - ...antdProps -}: RdCheckboxProps) => { - return ( - - - - - - ); -}; +export const Checkbox = CheckboxInternal as RdCheckboxCompoundedComponent; Checkbox.Group = CheckboxGroup; 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 5c79cac..e4c2e3d 100644 --- a/src/molecules/Checkbox/CheckboxGroup.tsx +++ b/src/molecules/Checkbox/CheckboxGroup.tsx @@ -1,24 +1,6 @@ -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { LabelField } from '../LabelField'; -import { CheckboxGroupStyles } from './styles'; +import { Checkbox as CheckboxAntd } from 'antd'; import { RdCheckboxGroupProps } from './types'; -export const CheckboxGroup = ({ - label: labelFieldProps, - axis = 'horizontal', - - ...antdProps -}: RdCheckboxGroupProps) => { - return ( - - - - - - ); +export const CheckboxGroup = (props: RdCheckboxGroupProps) => { + return {...props} />; }; 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..2151e7a 100644 --- a/src/molecules/Checkbox/styles.tsx +++ b/src/molecules/Checkbox/styles.tsx @@ -1,10 +1,7 @@ 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)} -`; +// #NOTE: Temporarily do not use styled for Checkbox.Group because styled emotion does not support generic +// export const CheckboxGroupStyles = styled(Checkbox.Group)``; diff --git a/src/molecules/Checkbox/types.ts b/src/molecules/Checkbox/types.ts index b142c9f..2d3cb84 100644 --- a/src/molecules/Checkbox/types.ts +++ b/src/molecules/Checkbox/types.ts @@ -1,23 +1,41 @@ -import { CheckboxProps } from 'antd'; -import { CheckboxGroupProps } from 'antd/es/checkbox'; -import { RdRegistryControlField, TAxis } from '../../models'; -import { RdLabelFieldWrapperProps } from '../LabelField/types'; - -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 {} +import { Checkbox, CheckboxRef, GetProps } from 'antd'; +import { ComponentToken } from 'antd/es/checkbox/style'; +import { CheckboxInternal } from './Checkbox'; +import { CheckboxGroup } from './CheckboxGroup'; + +//#region Define Ant Design types +type CheckboxPropsAntd = GetProps; +type CheckboxGroupPropsAntd = GetProps>; + +type CheckboxRefAntd = CheckboxRef; +//#endregion + +//#region Define extended component tokens +type CheckboxComponentTokenExtend = {}; +//#endregion + +//#region Define extended types +export type CheckboxPropsExtend = {}; +export type CheckboxGroupPropsExtend = {}; +export type RdCheckboxRefExtend = {}; +//#endregion + +//#region Export types +export type RdCheckboxProps = CheckboxPropsAntd & CheckboxPropsExtend; +export type RdCheckboxGroupProps = CheckboxGroupPropsAntd & CheckboxGroupPropsExtend; +export type RdCheckboxRef = CheckboxRefAntd & RdCheckboxRefExtend; + +export type CheckboxComponentToken = ComponentToken & CheckboxComponentTokenExtend; +//#endregion + +//#region Define component types +export type RdInternalCheckboxComponent = React.ForwardRefExoticComponent< + RdCheckboxProps & React.RefAttributes +>; + +export type RdCheckboxGroupComponent = React.FC>; + +export type RdCheckboxCompoundedComponent = typeof CheckboxInternal & { + Group: typeof CheckboxGroup; +}; +//#endregion 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/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/Collapse/Collapse.tsx b/src/molecules/Collapse/Collapse.tsx index b143b57..47fc6ba 100644 --- a/src/molecules/Collapse/Collapse.tsx +++ b/src/molecules/Collapse/Collapse.tsx @@ -1,11 +1,11 @@ -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { forwardRef } from 'react'; import { CollapseStyles } from './styles'; -import { RdCollapseProps } from './types'; +import { RdCollapseCompoundedComponent, RdCollapseComponent } from './types'; +import { CollapsePanel } from './CollapsePanel'; -export const Collapse = ({ ...antdProps }: RdCollapseProps) => { - return ( - - - - ); -}; +export const CollapseInternal: RdCollapseComponent = forwardRef((props, ref) => { + return ; +}); + +export const Collapse = CollapseInternal as RdCollapseCompoundedComponent; +Collapse.Panel = CollapsePanel; diff --git a/src/molecules/Collapse/CollapsePanel.tsx b/src/molecules/Collapse/CollapsePanel.tsx new file mode 100644 index 0000000..4a5b506 --- /dev/null +++ b/src/molecules/Collapse/CollapsePanel.tsx @@ -0,0 +1,7 @@ +import { forwardRef } from 'react'; +import { CollapsePanelStyles } from './styles'; +import { RdCollapsePanelComponent } from './types'; + +export const CollapsePanel: RdCollapsePanelComponent = forwardRef((props, ref) => { + return ; +}); diff --git a/src/molecules/Collapse/styles.tsx b/src/molecules/Collapse/styles.tsx index 48068e2..b25e1b1 100644 --- a/src/molecules/Collapse/styles.tsx +++ b/src/molecules/Collapse/styles.tsx @@ -2,3 +2,4 @@ import styled from '@emotion/styled'; import { Collapse } from 'antd'; export const CollapseStyles = styled(Collapse)``; +export const CollapsePanelStyles = styled(Collapse.Panel)``; diff --git a/src/molecules/Collapse/types.ts b/src/molecules/Collapse/types.ts index e6e2c40..4288673 100644 --- a/src/molecules/Collapse/types.ts +++ b/src/molecules/Collapse/types.ts @@ -1,5 +1,38 @@ -import { CollapseProps } from 'antd'; +import { Collapse, GetProps } from 'antd'; +import { ComponentToken as CollapseComponentTokenAntd } from 'antd/es/collapse/style'; +import { CollapsePanel } from './CollapsePanel'; -export interface RdCollapseProps extends CollapseProps { - -} +//#region Define Ant Design types +type CollapsePropsAntd = GetProps; +type CollapsePanelPropsAntd = GetProps; +//#endregion + +//#region Define extended component tokens +type CollapseComponentTokenExtend = {}; +//#endregion + +//#region Define extended types +type CollapsePropsExtend = {}; +type CollapsePanelPropsExtend = {}; +//#endregion + +//#region Export types +export type RdCollapseProps = CollapsePropsAntd & CollapsePropsExtend; +export type RdCollapsePanelProps = CollapsePanelPropsAntd & CollapsePanelPropsExtend; + +export type RdCollapseComponentToken = CollapseComponentTokenAntd & CollapseComponentTokenExtend; +//#endregion + +//#region Define component types +export type RdCollapseComponent = React.ForwardRefExoticComponent< + RdCollapseProps & React.RefAttributes +>; + +export type RdCollapsePanelComponent = React.ForwardRefExoticComponent< + RdCollapsePanelProps & React.RefAttributes +>; + +export type RdCollapseCompoundedComponent = typeof Collapse & { + Panel: RdCollapsePanelComponent; +}; +//#endregion diff --git a/src/molecules/ColorPicker/ColorPicker.tsx b/src/molecules/ColorPicker/ColorPicker.tsx new file mode 100644 index 0000000..60c28eb --- /dev/null +++ b/src/molecules/ColorPicker/ColorPicker.tsx @@ -0,0 +1,6 @@ +import { ColorPickerStyles } from './styles'; +import { RdColorPickerComponent } from './types'; + +export const ColorPicker: RdColorPickerComponent = props => { + 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..d7899ab --- /dev/null +++ b/src/molecules/ColorPicker/types.ts @@ -0,0 +1,25 @@ +import { ColorPicker, GetProps } from 'antd'; +import { ComponentToken as ColorPickerComponentTokenAntd } from 'antd/es/color-picker/style'; + +//#region Define Ant Design types +type ColorPickerPropsAntd = GetProps; +//#endregion + +//#region Define extended component tokens +type ColorPickerComponentTokenExtend = {}; +//#endregion + +//#region Define extended types +type ColorPickerPropsExtend = {}; +//#endregion + +//#region Export types +export type RdColorPickerProps = ColorPickerPropsAntd & ColorPickerPropsExtend; + +export type RdColorPickerComponentToken = ColorPickerComponentTokenAntd & + ColorPickerComponentTokenExtend; +//#endregion + +//#region Define component types +export type RdColorPickerComponent = React.FC; +//#endregion diff --git a/src/molecules/DatePicker/DatePicker.tsx b/src/molecules/DatePicker/DatePicker.tsx new file mode 100644 index 0000000..a8c5f5d --- /dev/null +++ b/src/molecules/DatePicker/DatePicker.tsx @@ -0,0 +1,21 @@ +import { MonthPicker } from './MonthPicker'; +import { QuarterPicker } from './QuarterPicker'; +import { RangePicker } from './RangePicker'; +import { DatePickerStyles } from './styles'; +import { TimePicker } from './TimePicker'; +import { RdDatePickerComponent, RdDatePickerCompoundedComponent } from './types'; +import { WeekPicker } from './WeekPicker'; +import { YearPicker } from './YearPicker'; + +export const DatePickerInternal: RdDatePickerComponent = props => { + return ; +}; + +export const DatePicker = DatePickerInternal as RdDatePickerCompoundedComponent; + +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..61b3f04 --- /dev/null +++ b/src/molecules/DatePicker/MonthPicker.tsx @@ -0,0 +1,6 @@ +import { MonthPickerStyles } from './styles'; +import { RdMonthPickerProps } from './types'; + +export const MonthPicker = (props: RdMonthPickerProps) => { + return ; +}; diff --git a/src/molecules/DatePicker/QuarterPicker.tsx b/src/molecules/DatePicker/QuarterPicker.tsx new file mode 100644 index 0000000..b1fc100 --- /dev/null +++ b/src/molecules/DatePicker/QuarterPicker.tsx @@ -0,0 +1,6 @@ +import { QuarterPickerStyles } from './styles'; +import { RdQuarterPickerProps } from './types'; + +export const QuarterPicker = (props: RdQuarterPickerProps) => { + return ; +}; diff --git a/src/molecules/DatePicker/RangePicker.tsx b/src/molecules/DatePicker/RangePicker.tsx new file mode 100644 index 0000000..7c26d01 --- /dev/null +++ b/src/molecules/DatePicker/RangePicker.tsx @@ -0,0 +1,6 @@ +import { RangePickerStyles } from './styles'; +import { RdRangePickerProps } from './types'; + +export const RangePicker = (props: RdRangePickerProps) => { + return ; +}; diff --git a/src/molecules/DatePicker/TimePicker.tsx b/src/molecules/DatePicker/TimePicker.tsx new file mode 100644 index 0000000..3e68610 --- /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 = (props: RdTimePickerProps) => { + return ( + + + + ); +}; diff --git a/src/molecules/DatePicker/WeekPicker.tsx b/src/molecules/DatePicker/WeekPicker.tsx new file mode 100644 index 0000000..be93f16 --- /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 = (props: RdWeekPickerProps) => { + return ( + + + + ); +}; diff --git a/src/molecules/DatePicker/YearPicker.tsx b/src/molecules/DatePicker/YearPicker.tsx new file mode 100644 index 0000000..498debf --- /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 = (props: 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..4b5c684 --- /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)``; diff --git a/src/molecules/DatePicker/types.ts b/src/molecules/DatePicker/types.ts new file mode 100644 index 0000000..1baaa76 --- /dev/null +++ b/src/molecules/DatePicker/types.ts @@ -0,0 +1,58 @@ +import { DatePicker, GetProps } from 'antd'; +import { ComponentToken as DatePickerComponentTokenAntd } from 'antd/es/date-picker/style'; + +//#region Define Ant Design types +type DatePickerPropsAntd = GetProps; +type WeekPickerPropsAntd = GetProps; +type MonthPickerPropsAntd = GetProps; +type YearPickerPropsAntd = GetProps; +type RangePickerPropsAntd = GetProps; +type TimePickerPropsAntd = GetProps; +type QuarterPickerPropsAntd = GetProps; +//#endregion + +//#region Define extended component tokens +type DatePickerComponentTokenExtend = {}; +//#endregion + +//#region Define extended types +type DatePickerPropsExtend = {}; +type WeekPickerPropsExtend = {}; +type MonthPickerPropsExtend = {}; +type YearPickerPropsExtend = {}; +type RangePickerPropsExtend = {}; +type TimePickerPropsExtend = {}; +type QuarterPickerPropsExtend = {}; +//#endregion + +//#region Export types +export type RdDatePickerProps = DatePickerPropsAntd & DatePickerPropsExtend; +export type RdWeekPickerProps = WeekPickerPropsAntd & WeekPickerPropsExtend; +export type RdMonthPickerProps = MonthPickerPropsAntd & MonthPickerPropsExtend; +export type RdYearPickerProps = YearPickerPropsAntd & YearPickerPropsExtend; +export type RdRangePickerProps = RangePickerPropsAntd & RangePickerPropsExtend; +export type RdTimePickerProps = TimePickerPropsAntd & TimePickerPropsExtend; +export type RdQuarterPickerProps = QuarterPickerPropsAntd & QuarterPickerPropsExtend; + +export type RdDatePickerComponentToken = DatePickerComponentTokenAntd & + DatePickerComponentTokenExtend; +//#endregion + +//#region Define component types +export type RdDatePickerComponent = React.FC; +export type RdWeekPickerComponent = React.FC; +export type RdMonthPickerComponent = React.FC; +export type RdYearPickerComponent = React.FC; +export type RdRangePickerComponent = React.FC; +export type RdTimePickerComponent = React.FC; +export type RdQuarterPickerComponent = React.FC; + +export type RdDatePickerCompoundedComponent = RdDatePickerComponent & { + WeekPicker: RdWeekPickerComponent; + MonthPicker: RdMonthPickerComponent; + YearPicker: RdYearPickerComponent; + RangePicker: RdRangePickerComponent; + TimePicker: RdTimePickerComponent; + QuarterPicker: RdQuarterPickerComponent; +}; +//#endregion diff --git a/src/molecules/Divider/Divider.tsx b/src/molecules/Divider/Divider.tsx index 305ba4d..88f874c 100644 --- a/src/molecules/Divider/Divider.tsx +++ b/src/molecules/Divider/Divider.tsx @@ -1,11 +1,6 @@ -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { DividerStyles } from './styles'; -import { RdDividerProps } from './types'; +import { RdDividerComponent } from './types'; -export const Divider = ({ ...antdProps }: RdDividerProps) => { - return ( - - - - ); +export const Divider: RdDividerComponent = props => { + return ; }; diff --git a/src/molecules/Divider/types.ts b/src/molecules/Divider/types.ts index 94c4619..e5cde51 100644 --- a/src/molecules/Divider/types.ts +++ b/src/molecules/Divider/types.ts @@ -1,3 +1,24 @@ -import { DividerProps } from 'antd'; +import { Divider, GetProps } from 'antd'; +import { ComponentToken as DividerComponentTokenAntd } from 'antd/es/divider/style'; -export interface RdDividerProps extends DividerProps {} +//#region Define Ant Design types +type DividerPropsAntd = GetProps; +//#endregion + +//#region Define extended component tokens +type DividerComponentTokenExtend = {}; +//#endregion + +//#region Define extended types +type DividerPropsExtend = {}; +//#endregion + +//#region Export types +export type RdDividerProps = DividerPropsAntd & DividerPropsExtend; + +export type RdDividerComponentToken = DividerComponentTokenAntd & DividerComponentTokenExtend; +//#endregion + +//#region Define component types +export type RdDividerComponent = React.FC; +//#endregion diff --git a/src/molecules/Drawer/Drawer.tsx b/src/molecules/Drawer/Drawer.tsx index 35be876..6b80603 100644 --- a/src/molecules/Drawer/Drawer.tsx +++ b/src/molecules/Drawer/Drawer.tsx @@ -1,11 +1,6 @@ -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { DrawerStyles } from './styles'; -import { RdDrawerProps } from './types'; +import { RdDrawerComponent } from './types'; -export const Drawer = ({ ...antdProps }: RdDrawerProps) => { - return ( - - - - ); +export const Drawer: RdDrawerComponent = props => { + return ; }; diff --git a/src/molecules/Drawer/types.ts b/src/molecules/Drawer/types.ts index 0e7eb1d..024b197 100644 --- a/src/molecules/Drawer/types.ts +++ b/src/molecules/Drawer/types.ts @@ -1,3 +1,23 @@ -import { DrawerProps } from 'antd'; +import { Drawer, GetProps } from 'antd'; +import { ComponentToken as DrawerComponentTokenAntd } from 'antd/es/drawer/style'; -export interface RdDrawerProps extends DrawerProps {} +//#region Define Ant Design types +type DrawerPropsAntd = GetProps; +//#endregion + +//#region Define extended component tokens +type DrawerComponentTokenExtend = {}; +//#endregion + +//#region Define extended types +type DrawerPropsExtend = {}; +//#endregion + +//#region Export types +export type RdDrawerProps = DrawerPropsAntd & DrawerPropsExtend; +export type RdDrawerComponentToken = DrawerComponentTokenAntd & DrawerComponentTokenExtend; +//#endregion + +//#region Define component types +export type RdDrawerComponent = React.FC; +//#endregion diff --git a/src/molecules/Dropdown/Dropdown.tsx b/src/molecules/Dropdown/Dropdown.tsx index d7d1104..22b1bb4 100644 --- a/src/molecules/Dropdown/Dropdown.tsx +++ b/src/molecules/Dropdown/Dropdown.tsx @@ -1,14 +1,10 @@ -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { Button } from './Button'; +import { DropdownButton } from './DropdownButton'; import { DropdownStyles } from './styles'; -import { RdDropdownProps } from './types'; +import { RdDropdownButtonComponent, RdDropdownCompoundedComponent } from './types'; -export const Dropdown = ({ ...antdProps }: RdDropdownProps) => { - return ( - - - - ); +export const DropdownInternal: RdDropdownButtonComponent = props => { + return ; }; -Dropdown.Button = Button; \ No newline at end of file +export const Dropdown = DropdownInternal as RdDropdownCompoundedComponent; +Dropdown.Button = DropdownButton; 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 3aa40b0..ea424aa 100644 --- a/src/molecules/Dropdown/types.ts +++ b/src/molecules/Dropdown/types.ts @@ -1,6 +1,32 @@ -import { DropdownProps, Dropdown } from 'antd'; -import { DropdownButtonProps } from 'antd/es/dropdown'; +import { Dropdown, GetProps } from 'antd'; +import { ComponentToken as DropdownComponentTokenAntd } from 'antd/es/dropdown/style'; -export interface RdDropdownProps extends DropdownProps {} +//#region Define Ant Design types +type DropdownPropsAntd = GetProps; +type DropdownButtonPropsAntd = GetProps; +//#endregion -export interface RdDropdownButtonProps extends DropdownButtonProps {} +//#region Define extended component tokens +type DropdownComponentTokenExtend = {}; +//#endregion + +//#region Define extended types +type DropdownPropsExtend = {}; +type DropdownButtonPropsExtend = {}; +//#endregion + +//#region Export types +export type RdDropdownProps = DropdownPropsAntd & DropdownPropsExtend; +export type RdDropdownButtonProps = DropdownButtonPropsAntd & DropdownButtonPropsExtend; + +export type RdDropdownComponentToken = DropdownComponentTokenAntd & DropdownComponentTokenExtend; +//#endregion + +//#region Define component types +export type RdDropdownComponent = React.FC; +export type RdDropdownButtonComponent = React.FC; + +export type RdDropdownCompoundedComponent = RdDropdownComponent & { + Button: RdDropdownButtonComponent; +}; +//#endregion diff --git a/src/molecules/Empty/Empty.tsx b/src/molecules/Empty/Empty.tsx new file mode 100644 index 0000000..1c37d6f --- /dev/null +++ b/src/molecules/Empty/Empty.tsx @@ -0,0 +1,14 @@ +import { useContext } from 'react'; +import { ConfigProvider } from '../../organisms'; +import { EmptyStyles } from './styles'; +import { RdEmptyComponent } from './types'; + +export const Empty: RdEmptyComponent = props => { + const { renderEmpty } = useContext(ConfigProvider.ConfigContext); + + if(renderEmpty) { + return renderEmpty(); + } + + 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..9d2beaf --- /dev/null +++ b/src/molecules/Empty/types.ts @@ -0,0 +1,25 @@ +import { Empty, GetProps } from 'antd'; +import { ComponentToken as EmptyComponentTokenAntd } from 'antd/es/empty/style'; +import React from 'react'; + +//#region Define Ant Design types +type EmptyPropsAntd = GetProps; +//#endregion + +//#region Define extended component tokens +type EmptyComponentTokenExtend = {}; +//#endregion + +//#region Define extended types +type EmptyPropsExtend = {}; +//#endregion + +//#region Export types +export type RdEmptyProps = EmptyPropsAntd & EmptyPropsExtend; + +export type RdEmptyComponentToken = EmptyComponentTokenAntd & EmptyComponentTokenExtend; +//#endregion + +//#region Define component types +export type RdEmptyComponent = React.FC; +//#endregion diff --git a/src/molecules/FloatButton/BackTop.tsx b/src/molecules/FloatButton/BackTop.tsx new file mode 100644 index 0000000..e9deb6e --- /dev/null +++ b/src/molecules/FloatButton/BackTop.tsx @@ -0,0 +1,7 @@ +import { forwardRef } from 'react'; +import { BackTopStyles } from './styles'; +import { RdBackTopComponent } from './types'; + +export const BackTop: RdBackTopComponent = forwardRef((props, ref) => { + return ; +}); diff --git a/src/molecules/FloatButton/Backtop.tsx b/src/molecules/FloatButton/Backtop.tsx deleted file mode 100644 index 2bfab91..0000000 --- a/src/molecules/FloatButton/Backtop.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { BackTopStyles } from './styles'; -import { RdBackTopProps } from './types'; - -export const BackTop = ({ ...antdProps }: RdBackTopProps) => { - return ( - - - - ); -}; - diff --git a/src/molecules/FloatButton/FloatButton.tsx b/src/molecules/FloatButton/FloatButton.tsx index cf2424c..586c183 100644 --- a/src/molecules/FloatButton/FloatButton.tsx +++ b/src/molecules/FloatButton/FloatButton.tsx @@ -1,16 +1,13 @@ -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { BackTop } from './Backtop'; +import { BackTop } from './BackTop'; import { FloatButtonGroup } from './FloatButtonGroup'; import { FloatButtonStyles } from './styles'; -import { RdFloatButtonProps } from './types'; +import { RdFloatButtonCompoundedComponent, RdFloatButtonProps } from './types'; -export const FloatButton = ({ ...antdProps }: RdFloatButtonProps) => { - return ( - - - - ); +export const FloatButtonInternal = (props: RdFloatButtonProps) => { + return ; }; +export const FloatButton = FloatButtonInternal as RdFloatButtonCompoundedComponent; + FloatButton.BackTop = BackTop; FloatButton.Group = FloatButtonGroup; diff --git a/src/molecules/FloatButton/FloatButtonGroup.tsx b/src/molecules/FloatButton/FloatButtonGroup.tsx index 4d947f9..f1133f8 100644 --- a/src/molecules/FloatButton/FloatButtonGroup.tsx +++ b/src/molecules/FloatButton/FloatButtonGroup.tsx @@ -1,12 +1,6 @@ -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { FloatButtonGroupStyles } from './styles'; import { RdFloatButtonGroupProps } from './types'; -export const FloatButtonGroup = ({ ...antdProps }: RdFloatButtonGroupProps) => { - return ( - - - - ); +export const FloatButtonGroup = (props: RdFloatButtonGroupProps) => { + return ; }; - diff --git a/src/molecules/FloatButton/types.ts b/src/molecules/FloatButton/types.ts index 2c8259b..2ff029b 100644 --- a/src/molecules/FloatButton/types.ts +++ b/src/molecules/FloatButton/types.ts @@ -1,9 +1,53 @@ -import { BackTopProps, FloatButtonGroupProps, FloatButtonProps } from 'antd'; +import { FloatButton, FloatButtonRef, GetProps } from 'antd'; +import { ComponentToken as BackTopComponentTokenAntd } from 'antd/es/back-top/style'; +import { ComponentToken as FloatButtonComponentTokenAntd } from 'antd/es/float-button/style'; +import { FloatButtonInternal } from './FloatButton'; +import { FloatButtonGroup } from './FloatButtonGroup'; +import { BackTop } from './BackTop'; +import { FloatButtonElement } from 'antd/es/float-button/interface'; -export interface RdFloatButtonProps extends FloatButtonProps {} +//#region Define Ant Design types +type FloatButtonPropsAntd = GetProps; +type BackTopPropsAntd = GetProps; +type FloatButtonGroupPropsAntd = GetProps; -export interface RdBackTopProps - extends BackTopProps, - Omit {} +type FloatButtonRefAntd = FloatButtonRef; +type FloatButtonElementAtd = FloatButtonElement; +//#endregion -export interface RdFloatButtonGroupProps extends FloatButtonGroupProps {} +//#region Define extended component tokens +type FloatButtonComponentTokenExtend = {}; +type BackTopComponentTokenExtend = {}; +//#endregion + +//#region Define extended types +type FloatButtonPropsExtend = {}; +type FloatButtonGroupPropsExtend = {}; +type BackTopPropsExtend = {}; +//#endregion + +//#region Export types +export type RdFloatButtonProps = FloatButtonPropsAntd & FloatButtonPropsExtend; +export type RdFloatButtonGroupProps = FloatButtonGroupPropsAntd & FloatButtonGroupPropsExtend; +export type RdBackTopProps = BackTopPropsAntd & BackTopPropsExtend; + +export type RdFloatButtonComponentToken = FloatButtonComponentTokenAntd & + FloatButtonComponentTokenExtend; +export type RdBackTopComponentToken = BackTopComponentTokenAntd & BackTopComponentTokenExtend; + +//#region Define component types +export type RdFloatButtonComponent = React.ForwardRefExoticComponent< + RdFloatButtonProps & React.RefAttributes +>; + +export type RdFloatButtonGroupComponent = React.FC>; + +export type RdBackTopComponent = React.ForwardRefExoticComponent< + RdBackTopProps & React.RefAttributes +>; + +export type RdFloatButtonCompoundedComponent = typeof FloatButtonInternal & { + Group: RdFloatButtonGroupComponent; + BackTop: RdBackTopComponent; +}; +//#endregion diff --git a/src/molecules/Form/Form.tsx b/src/molecules/Form/Form.tsx index 5de5727..729a5c0 100644 --- a/src/molecules/Form/Form.tsx +++ b/src/molecules/Form/Form.tsx @@ -1,16 +1,23 @@ -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { Form as FormAntd } from 'antd'; +import { FormErrorList } from './FormErrorList'; import { FormItem } from './FormItem'; import { FormItemControl } from './FormItemControl'; +import { FormList } from './FormList'; +import { FormProvider } from './FormProvider'; import { FormStyles } from './styles'; -import { RdFormProps } from './types'; +import { RdFormCompoundedComponent, RdFormProps } from './types'; -export const Form = ({ ...antdProps }: RdFormProps) => { - return ( - - - - ); +export const FormInternal = (props: RdFormProps) => { + return ; }; +export const Form = FormInternal as RdFormCompoundedComponent; + Form.Item = FormItem; Form.ItemControl = FormItemControl; +Form.List = FormList; +Form.Provider = FormProvider; +Form.ErrorList = FormErrorList; +Form.useForm = FormAntd.useForm; +Form.useFormInstance = FormAntd.useFormInstance; +Form.useWatch = FormAntd.useWatch; diff --git a/src/molecules/Form/FormErrorList.tsx b/src/molecules/Form/FormErrorList.tsx new file mode 100644 index 0000000..f159d09 --- /dev/null +++ b/src/molecules/Form/FormErrorList.tsx @@ -0,0 +1,6 @@ +import { FormErrorListStyles } from './styles'; +import { RdFormErrorListComponent } from './types'; + +export const FormErrorList: RdFormErrorListComponent = props => { + return ; +}; diff --git a/src/molecules/Form/FormItem.tsx b/src/molecules/Form/FormItem.tsx index 7abb7ff..53b54a8 100644 --- a/src/molecules/Form/FormItem.tsx +++ b/src/molecules/Form/FormItem.tsx @@ -1,4 +1,3 @@ -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { FormItemStyles } from './styles'; import { RdFormItemProps } from './types'; @@ -17,9 +16,5 @@ export const FormItem = ({ errorMessage, description, ...antdProps }: RdFormItem ); } - return ( - - - - ); + return ; }; diff --git a/src/molecules/Form/FormItemControl.tsx b/src/molecules/Form/FormItemControl.tsx index 1e66d80..4aac72b 100644 --- a/src/molecules/Form/FormItemControl.tsx +++ b/src/molecules/Form/FormItemControl.tsx @@ -1,12 +1,10 @@ import { FieldValues } from 'react-hook-form'; -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { FormItemReactHookForm } from './FormItemReactHookForm'; import { RdFormItemControlProps } from './types'; -export const FormItemControl = ({ - description, - ...antdProps -}: RdFormItemControlProps) => { +export const FormItemControl = ( + props: RdFormItemControlProps +) => { // if (description) { // antdProps.label = ( // <> @@ -16,9 +14,5 @@ export const FormItemControl = ( // ); // } - return ( - - {...antdProps} /> - - ); + return {...props} />; }; diff --git a/src/molecules/Form/FormItemReactHookForm.tsx b/src/molecules/Form/FormItemReactHookForm.tsx index 520dcda..c3918ee 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 { Children, cloneElement, isValidElement, useEffect, useLayoutEffect, useMemo } from 'react'; +import { FieldValues, useController } from 'react-hook-form'; +import { FormItemStyles } from './styles'; +import { FormItemReactHookFormProps } from './types'; export const FormItemReactHookForm = ({ children, @@ -11,10 +12,17 @@ export const FormItemReactHookForm = ) => { - const { field, fieldState } = useController({ name, control, disabled, shouldUnregister }); +}: FormItemReactHookFormProps) => { + const { field, fieldState } = useController({ + name, + control, + disabled, + shouldUnregister, + defaultValue, + }); const form = AntdForm.useFormInstance(); useEffect(() => { @@ -22,9 +30,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 +61,6 @@ export const FormItemReactHookForm = + ); }; diff --git a/src/molecules/Form/FormList.tsx b/src/molecules/Form/FormList.tsx new file mode 100644 index 0000000..02dd48b --- /dev/null +++ b/src/molecules/Form/FormList.tsx @@ -0,0 +1,6 @@ +import { FormListStyles } from './styles'; +import { RdFormListComponent } from './types'; + +export const FormList: RdFormListComponent = props => { + return ; +}; \ No newline at end of file diff --git a/src/molecules/Form/FormProvider.tsx b/src/molecules/Form/FormProvider.tsx new file mode 100644 index 0000000..469adfa --- /dev/null +++ b/src/molecules/Form/FormProvider.tsx @@ -0,0 +1,6 @@ +import { FormProviderStyles } from './styles'; +import { RdFormProviderComponent } from './types'; + +export const FormProvider: RdFormProviderComponent = props => { + return ; +}; diff --git a/src/molecules/Form/styles.tsx b/src/molecules/Form/styles.tsx index 40d392a..04af563 100644 --- a/src/molecules/Form/styles.tsx +++ b/src/molecules/Form/styles.tsx @@ -1,5 +1,19 @@ +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 FormListStyles = styled(Form.List)``; +export const FormProviderStyles = styled(Form.Provider)``; +export const FormErrorListStyles = styled(Form.ErrorList)``; +export const FormItemStyles = styled(Form.Item, { + shouldForwardProp: prop => getExcludeForwardProps(['block'], prop), +})` + ${({ block }) => + block && + css` + width: 100%; + `} +`; diff --git a/src/molecules/Form/types.ts b/src/molecules/Form/types.ts index 719c05d..8bc531f 100644 --- a/src/molecules/Form/types.ts +++ b/src/molecules/Form/types.ts @@ -1,12 +1,38 @@ -import { Form } from 'antd'; import type { GetProps } from 'antd'; +import { Form } from 'antd'; +import { ComponentToken } from 'antd/es/form/style'; +import { FormRef } from 'rc-field-form/lib/interface'; +import React, { ReactElement } from 'react'; import { Control, FieldPath, FieldValues } from 'react-hook-form'; -//#region Custom props -/** - * @description Extension props for Form.Item in antd - */ -type FormItemExtensionProps = { +//#region Define Ant Design types +type FormPropsAntd = GetProps>; + +type FormItemPropsAntd = GetProps>; + +type FormListPropsAntd = GetProps; + +type FormProviderPropsAntd = GetProps; + +type FormErrorListPropsAntd = GetProps; + +type useFormAntd = GetProps; + +type useWatchAntd = GetProps; + +type useFormInstanceAntd = GetProps; + +type FormRefAntd = FormRef; +//#endregion + +//#region Define extended component tokens +export type FormComponentToken = ComponentToken & {}; +//#endregion + +//#region Define extended types +type FormPropsExtend = {}; + +type FormItemPropsExtend = { /** * Error message to display */ @@ -23,42 +49,72 @@ type FormItemExtensionProps = { block?: boolean; }; -/** - * @description Extension props for Form in antd - */ -type FormAdditionalProps = {}; +type FormListPropsExtend = {}; + +type FormProviderPropsExtend = {}; +type FormErrorListPropsExtend = {}; //#endregion -//#region Get props from antd components -type FormPropsAntd = GetProps; +//#region Export types +export type RdFormProps = FormPropsAntd & FormPropsExtend; -type FormItemPropsAntd = GetProps; +export type RdFormItemProps = FormItemPropsAntd & FormItemPropsExtend; -// type FormItemControlProps = GetProps; -//#endregion +export type RdFormListProps = FormListPropsAntd & FormListPropsExtend; -//#region Props definition -export type RdFormProps = FormPropsAntd & FormAdditionalProps; +export type RdFormProviderProps = FormProviderPropsAntd & FormProviderPropsExtend; -export type RdFormItemProps = FormItemPropsAntd & FormItemExtensionProps; +export type RdFormErrorListProps = FormErrorListPropsAntd & FormErrorListPropsExtend; export type RdFormItemControlProps< TFieldValues extends FieldValues = FieldValues, TContext = any -> = FormItemProps & - Omit & { +> = FormItemReactHookFormProps & + Omit & { shouldUnregister?: boolean; }; -//#endregion -type AntdFormItemProps = React.ComponentProps; - -export type FormItemProps = { +export type FormItemReactHookFormProps< + TFieldValues extends FieldValues = FieldValues, + TContext = any +> = { children: React.ReactNode; control: Control; shouldUnregister?: boolean; name: FieldPath; disabled?: boolean; + defaultValue?: any; overrideFieldOnChange?: (...values: any[]) => void; -} & Omit; +} & Omit; +//#endregion + +//#region Define component types +export type RdFormComponent = (( + props: React.PropsWithChildren> & React.RefAttributes> +) => ReactElement) & + Pick; + +export type RdFormItemComponent = (props: RdFormItemProps) => ReactElement; + +export type RdFormItemControlComponent = ( + props: RdFormItemControlProps +) => ReactElement; + +export type RdFormListComponent = React.FC; + +export type RdFormProviderComponent = React.FC; + +export type RdFormErrorListComponent = React.FC; + +export type RdFormCompoundedComponent = RdFormComponent & { + Item: RdFormItemComponent; + ItemControl: RdFormItemControlComponent; + List: RdFormListComponent; + Provider: RdFormProviderComponent; + ErrorList: RdFormErrorListComponent; + useForm: useFormAntd; + useWatch: useWatchAntd; + useFormInstance: useFormInstanceAntd; +}; +//#endregion diff --git a/src/molecules/Grid/Col.tsx b/src/molecules/Grid/Col.tsx new file mode 100644 index 0000000..7f8375c --- /dev/null +++ b/src/molecules/Grid/Col.tsx @@ -0,0 +1,7 @@ +import { forwardRef } from 'react'; +import { ColStyles } from './styles'; +import { RdColComponent } from './types'; + +export const Col: RdColComponent = forwardRef((props, ref) => { + return ; +}); diff --git a/src/molecules/Grid/Row.tsx b/src/molecules/Grid/Row.tsx new file mode 100644 index 0000000..d7315d5 --- /dev/null +++ b/src/molecules/Grid/Row.tsx @@ -0,0 +1,7 @@ +import { forwardRef } from 'react'; +import { RowStyles } from './styles'; +import { RdRowComponent } from './types'; + +export const Row: RdRowComponent = forwardRef((props, ref) => { + 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/Row/styles.tsx b/src/molecules/Grid/styles.tsx similarity index 51% rename from src/molecules/Row/styles.tsx rename to src/molecules/Grid/styles.tsx index d5b1d57..47ab9fb 100644 --- a/src/molecules/Row/styles.tsx +++ b/src/molecules/Grid/styles.tsx @@ -1,4 +1,5 @@ import styled from '@emotion/styled'; -import { Row } from 'antd'; +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..644c74b --- /dev/null +++ b/src/molecules/Grid/types.ts @@ -0,0 +1,32 @@ +import { Col, GetProps, Row } from 'antd'; +import { ComponentToken as GridComponentTokenAntd } from 'antd/es/grid/style'; + +//#region Define Ant Design types +type ColPropsAntd = GetProps; +type RowPropsAntd = GetProps; +//#endregion + +//#region Define extended component tokens +type GridComponentTokenExtend = {}; +//#endregion + +//#region Define extended types +type ColPropsExtend = {}; +type RowPropsExtend = {}; +//#endregion + +//#region Export types +export type RdColProps = ColPropsAntd & ColPropsExtend; +export type RdRowProps = RowPropsAntd & RowPropsExtend; + +export type RdGridComponentToken = GridComponentTokenAntd & GridComponentTokenExtend; +//#endregion + +//#region Define component types +export type RdColComponent = React.ForwardRefExoticComponent< + RdColProps & React.RefAttributes +>; +export type RdRowComponent = React.ForwardRefExoticComponent< + RdRowProps & React.RefAttributes +>; +//#endregion diff --git a/src/molecules/Image/Image.tsx b/src/molecules/Image/Image.tsx new file mode 100644 index 0000000..b6a2082 --- /dev/null +++ b/src/molecules/Image/Image.tsx @@ -0,0 +1,6 @@ +import { ImageStyles } from './styles'; +import { RdImageComponent } from './types'; + +export const Image: RdImageComponent = props => { + return ; +}; diff --git a/src/molecules/Image/index.tsx b/src/molecules/Image/index.tsx new file mode 100644 index 0000000..9295475 --- /dev/null +++ b/src/molecules/Image/index.tsx @@ -0,0 +1,2 @@ +export * from './Image'; +export * from './types'; \ No newline at end of file diff --git a/src/molecules/Image/styles.tsx b/src/molecules/Image/styles.tsx new file mode 100644 index 0000000..e01b920 --- /dev/null +++ b/src/molecules/Image/styles.tsx @@ -0,0 +1,4 @@ +import styled from '@emotion/styled'; +import { Image } from 'antd'; + +export const ImageStyles = styled(Image)``; diff --git a/src/molecules/Image/types.ts b/src/molecules/Image/types.ts new file mode 100644 index 0000000..6210133 --- /dev/null +++ b/src/molecules/Image/types.ts @@ -0,0 +1,23 @@ +import { Image, GetProps } from 'antd'; +import { ComponentToken as ImageComponentTokenAntd } from 'antd/es/image/style'; + +//#region Define Ant Design types +type ImagePropsAntd = GetProps; +//#endregion + +//#region Define extended component tokens +type ImageComponentTokenExtend = {}; +//#endregion + +//#region Define extended types +type ImagePropsExtend = {}; +//#endregion + +//#region Export types +export type RdImageProps = ImagePropsAntd & ImagePropsExtend; +export type RdImageComponentToken = ImageComponentTokenAntd & ImageComponentTokenExtend; +//#endregion + +//#region Define component types +export type RdImageComponent = React.FC; +//#endregion diff --git a/src/molecules/Input/Input.tsx b/src/molecules/Input/Input.tsx index 658c319..b1ab4b0 100644 --- a/src/molecules/Input/Input.tsx +++ b/src/molecules/Input/Input.tsx @@ -1,24 +1,20 @@ -import { InputProps } from 'antd'; -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { LabelField } from '../LabelField'; +import { forwardRef } from 'react'; +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 { RdInputProps } from './types'; +import { RdInputCompoundedComponent, RdInputInternalComponent } from './types'; -export const Input = ({ - label: labelFieldProps, +export const InputInternal: RdInputInternalComponent = forwardRef((props, ref) => { + return ; +}); - ...antdProps -}: RdInputProps) => { - return ( - - - - - - ); -}; +export const Input = InputInternal as RdInputCompoundedComponent; + +Input.Password = Password; +Input.TextArea = TextArea; +Input.Search = Search; +Input.Group = InputGroup; +Input.OTP = OTP; diff --git a/src/molecules/Input/InputControl.tsx b/src/molecules/Input/InputControl.tsx deleted file mode 100644 index 686879a..0000000 --- a/src/molecules/Input/InputControl.tsx +++ /dev/null @@ -1,47 +0,0 @@ -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 { InputStyled } from './styles'; -import { RdInputControlProps } from './types'; - -export const InputControl = ({ - name, - control, - defaultValue, - - label: labelFieldProps, - - ...antdProps -}: RdInputControlProps) => { - const { - field: { value, onChange, onBlur, ref }, - fieldState: { invalid, error }, - } = useController({ - name, - control, - defaultValue, - }); - - return ( - - - - {invalid && {error?.message}} - - - ); -}; diff --git a/src/molecules/Input/InputGroup.tsx b/src/molecules/Input/InputGroup.tsx new file mode 100644 index 0000000..1571968 --- /dev/null +++ b/src/molecules/Input/InputGroup.tsx @@ -0,0 +1,6 @@ +import { InputGroupStyled } from './styles'; +import { RdInputGroupComponent } from './types'; + +export const InputGroup: RdInputGroupComponent = props => { + return ; +}; diff --git a/src/molecules/Input/OTP.tsx b/src/molecules/Input/OTP.tsx new file mode 100644 index 0000000..f9a11a8 --- /dev/null +++ b/src/molecules/Input/OTP.tsx @@ -0,0 +1,7 @@ +import { forwardRef } from 'react'; +import { OTPStyled } from './styles'; +import { RdOTPComponent } from './types'; + +export const OTP: RdOTPComponent = forwardRef((props, ref) => { + return ; +}); diff --git a/src/molecules/Input/Password.tsx b/src/molecules/Input/Password.tsx new file mode 100644 index 0000000..4148dc3 --- /dev/null +++ b/src/molecules/Input/Password.tsx @@ -0,0 +1,7 @@ +import { forwardRef } from 'react'; +import { InputPasswordStyled } from './styles'; +import { RdPasswordComponent } from './types'; + +export const Password: RdPasswordComponent = forwardRef((props, ref) => { + return ; +}); diff --git a/src/molecules/Input/Search.tsx b/src/molecules/Input/Search.tsx new file mode 100644 index 0000000..35e2cf9 --- /dev/null +++ b/src/molecules/Input/Search.tsx @@ -0,0 +1,7 @@ +import { forwardRef } from 'react'; +import { InputSearchStyled } from './styles'; +import { RdSearchComponent } from './types'; + +export const Search: RdSearchComponent = forwardRef((props, ref) => { + return ; +}); diff --git a/src/molecules/Input/TextArea.tsx b/src/molecules/Input/TextArea.tsx new file mode 100644 index 0000000..0509cf5 --- /dev/null +++ b/src/molecules/Input/TextArea.tsx @@ -0,0 +1,7 @@ +import { forwardRef } from 'react'; +import { TextAreaStyled } from './styles'; +import { RdTextareaComponent } from './types'; + +export const TextArea: RdTextareaComponent = forwardRef((props, ref) => { + return ; +}); 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..8dee646 100644 --- a/src/molecules/Input/index.ts +++ b/src/molecules/Input/index.ts @@ -1,4 +1,4 @@ -export * from './Input'; -export * from './InputControl'; +export { Input } from './Input'; -export type * from './types'; \ No newline at end of file +export * from './helper'; +export type * from './types'; diff --git a/src/molecules/Input/styles.tsx b/src/molecules/Input/styles.tsx index 04b0155..7273a88 100644 --- a/src/molecules/Input/styles.tsx +++ b/src/molecules/Input/styles.tsx @@ -1,6 +1,14 @@ 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)``; + +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 93a6eca..0ff1931 100644 --- a/src/molecules/Input/types.ts +++ b/src/molecules/Input/types.ts @@ -1,7 +1,80 @@ -import { InputProps } from 'antd'; -import { RdRegistryControlField } from '../../models'; -import { RdLabelFieldWrapperProps } from '../LabelField/types'; +import { GetProps, Input, InputRef } from 'antd'; +import { ComponentToken as InputComponentTokenAntd } from 'antd/es/input/style'; +import { InputInternal } from './Input'; +import { Search } from './Search'; +import { InputGroup } from './InputGroup'; +import { OTP } from './OTP'; +import { Password } from './Password'; +import { TextArea } from './TextArea'; +import { TextAreaRef } from 'antd/es/input/TextArea'; +import { OTPRef } from 'antd/es/input/OTP'; +import React from 'react'; -export interface RdInputProps extends InputProps, RdLabelFieldWrapperProps {} +//#region Define Ant Design types +type InputPropsAntd = GetProps; +type SearchPropsAntd = GetProps; +type InputGroupPropsAntd = GetProps; +type OTPPropsAntd = GetProps; +type PasswordPropsAntd = GetProps; +type TextAreaPropsAntd = GetProps; -export interface RdInputControlProps extends Omit, RdRegistryControlField {} +type InputRefAntd = InputRef; +type TextareaRefAntd = TextAreaRef; +type OTPRefAntd = OTPRef; +//#endregion + +//#region Define extended component tokens +type InputComponentTokenExtend = {}; +//#endregion + +//#region Define extended types +type InputPropsExtend = {}; +type SearchPropsExtend = {}; +type InputGroupPropsExtend = {}; +type OTPPropsExtend = {}; +type PasswordPropsExtend = {}; +type TextAreaPropsExtend = {}; +//#endregion + +//#region Export types +export type RdInputProps = InputPropsAntd & InputPropsExtend; +export type RdSearchProps = SearchPropsAntd & SearchPropsExtend; +export type RdInputGroupProps = InputGroupPropsAntd & InputGroupPropsExtend; +export type RdOTPProps = OTPPropsAntd & OTPPropsExtend; +export type RdPasswordProps = PasswordPropsAntd & PasswordPropsExtend; +export type RdTextAreaProps = TextAreaPropsAntd & TextAreaPropsExtend; +//#endregion + +//#region Define component types +export type RdInputInternalComponent = React.ForwardRefExoticComponent< + RdInputProps & React.RefAttributes +>; + +export type RdPasswordComponent = React.ForwardRefExoticComponent< + RdPasswordProps & React.RefAttributes +>; + +export type RdOTPComponent = React.ForwardRefExoticComponent< + RdOTPProps & React.RefAttributes +>; + +export type RdTextareaComponent = React.ForwardRefExoticComponent< + RdTextAreaProps & React.RefAttributes +>; + +export type RdSearchComponent = React.ForwardRefExoticComponent< + RdSearchProps & React.RefAttributes +>; + +export type RdInputGroupComponent = React.FC; + +export type RdInputCompoundedComponent = typeof InputInternal & { + Search: typeof Search; + Group: typeof InputGroup; + OTP: typeof OTP; + Password: typeof Password; + TextArea: typeof TextArea; +}; + +export type RdInputComponentToken = InputComponentTokenAntd & InputComponentTokenExtend; +//#endregion diff --git a/src/molecules/InputNumber/InputNumber.tsx b/src/molecules/InputNumber/InputNumber.tsx index 307631c..a61bdbf 100644 --- a/src/molecules/InputNumber/InputNumber.tsx +++ b/src/molecules/InputNumber/InputNumber.tsx @@ -1,26 +1,6 @@ -import { InputNumberProps } from 'antd'; -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { LabelField } from '../LabelField'; -import { InputNumberStyled, InputWrapper } from './styles'; -import { RdInputNumberProps } from './types'; -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; +import { InputNumberStyled } from './styles'; +import { RdInputNumberComponent, RdInputNumberProps } from './types'; -export const InputNumber = ({ - label: labelFieldProps, - - ...antdProps -}: RdInputNumberProps) => { - return ( - - - - - - - - ); +export const InputNumber: RdInputNumberComponent = (props: RdInputNumberProps) => { + 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 deleted file mode 100644 index eba5f0d..0000000 --- a/src/molecules/InputNumber/types.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { InputNumberProps } from 'antd'; -import { RdRegistryControlField } from '../../models'; -import { RdLabelFieldWrapperProps } from '../LabelField/types'; - -export interface RdInputNumberProps extends InputNumberProps, RdLabelFieldWrapperProps {} - -export interface RdInputNumberControlProps - extends Omit, - RdRegistryControlField {} diff --git a/src/molecules/InputNumber/types.tsx b/src/molecules/InputNumber/types.tsx new file mode 100644 index 0000000..9210e18 --- /dev/null +++ b/src/molecules/InputNumber/types.tsx @@ -0,0 +1,25 @@ +import { GetProps, InputNumber } from 'antd'; +import { ComponentToken as InputNumberComponentTokenAntd } from 'antd/es/input-number/style'; + +//#region Define Ant Design types +type InputNumberPropsAntd = GetProps; +//#endregion + +//#region Define extended component tokens +type InputNumberComponentTokenExtend = {}; +//#endregion + +//#region Define extended types +type InputNumberPropsExtend = {}; +//#endregion + +//#region Export types +export type RdInputNumberProps = InputNumberPropsAntd & InputNumberPropsExtend; + +export type RdInputNumberComponentToken = InputNumberComponentTokenAntd & + InputNumberComponentTokenExtend; +//#endregion + +//#region Define component types +export type RdInputNumberComponent = React.FC; +//#endregion diff --git a/src/molecules/InputPassword/InputPassword.tsx b/src/molecules/InputPassword/InputPassword.tsx deleted file mode 100644 index dbaf494..0000000 --- a/src/molecules/InputPassword/InputPassword.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { InputProps } from 'antd'; -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { LabelField } from '../LabelField'; -import { InputStyled, InputWrapper } from './styles'; -import { RdInputPasswordProps } from './types'; - -export const InputPassword = ({ - label: labelFieldProps, - - ...antdProps -}: RdInputPasswordProps) => { - return ( - - - - - - - - ); -}; diff --git a/src/molecules/InputPassword/InputPasswordControl.tsx b/src/molecules/InputPassword/InputPasswordControl.tsx deleted file mode 100644 index fc926ac..0000000 --- a/src/molecules/InputPassword/InputPasswordControl.tsx +++ /dev/null @@ -1,48 +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 { InputStyled, InputWrapper } 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/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/LabelField/LabelField.tsx b/src/molecules/LabelField/LabelField.tsx deleted file mode 100644 index e89fb9c..0000000 --- a/src/molecules/LabelField/LabelField.tsx +++ /dev/null @@ -1,54 +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; - - console.log('Rerender labelField'); - - 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; -} diff --git a/src/molecules/Layout/Content.tsx b/src/molecules/Layout/Content.tsx index 1d0a9a4..d7ef7a8 100644 --- a/src/molecules/Layout/Content.tsx +++ b/src/molecules/Layout/Content.tsx @@ -1,11 +1,7 @@ -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { forwardRef } from 'react'; import { ContentStyles } from './styles'; -import { RdLayoutProps } from './types'; +import { RdLayoutContentComponent } from './types'; -export const Content = ({ ...antdProps }: RdLayoutProps) => { - return ( - - - - ); -}; +export const LayoutContent: RdLayoutContentComponent = forwardRef((props, ref) => { + return ; +}); diff --git a/src/molecules/Layout/Footer.tsx b/src/molecules/Layout/Footer.tsx index 5f4d9e9..e4119ce 100644 --- a/src/molecules/Layout/Footer.tsx +++ b/src/molecules/Layout/Footer.tsx @@ -1,11 +1,7 @@ -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { forwardRef } from 'react'; import { FooterStyles } from './styles'; -import { RdLayoutProps } from './types'; +import { RdLayoutFooterComponent } from './types'; -export const Footer = ({ ...antdProps }: RdLayoutProps) => { - return ( - - - - ); -}; +export const LayoutFooter: RdLayoutFooterComponent = forwardRef((props, ref) => { + return ; +}); diff --git a/src/molecules/Layout/Header.tsx b/src/molecules/Layout/Header.tsx index d86b409..7dc8787 100644 --- a/src/molecules/Layout/Header.tsx +++ b/src/molecules/Layout/Header.tsx @@ -1,11 +1,7 @@ -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { HeaderStyles, LayoutStyles } from './styles'; -import { RdLayoutProps } from './types'; +import { forwardRef } from 'react'; +import { HeaderStyles } from './styles'; +import { RdLayoutHeaderComponent } from './types'; -export const Header = ({ ...antdProps }: RdLayoutProps) => { - return ( - - - - ); -}; +export const LayoutHeader: RdLayoutHeaderComponent = forwardRef(props => { + return ; +}); diff --git a/src/molecules/Layout/Layout.tsx b/src/molecules/Layout/Layout.tsx index 4e84790..0c13868 100644 --- a/src/molecules/Layout/Layout.tsx +++ b/src/molecules/Layout/Layout.tsx @@ -1,20 +1,17 @@ -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { Content } from './Content'; -import { Footer } from './Footer'; -import { Header } from './Header'; -import { Sider } from './Sider'; +import { forwardRef } from 'react'; +import { LayoutContent } from './Content'; +import { LayoutFooter } from './Footer'; +import { LayoutHeader } from './Header'; +import { LayoutSider } from './Sider'; import { LayoutStyles } from './styles'; -import { RdLayoutProps } from './types'; +import { RdLayoutComponent, RdLayoutCompoundedComponent } from './types'; -export const Layout = ({ ...antdProps }: RdLayoutProps) => { - return ( - - - - ); -}; +export const LayoutInternal: RdLayoutComponent = forwardRef((props, ref) => { + return ; +}); -Layout.Header = Header; -Layout.Content = Content; -Layout.Sider = Sider; -Layout.Footer = Footer; +export const Layout = LayoutInternal as RdLayoutCompoundedComponent; +Layout.Header = LayoutHeader; +Layout.Content = LayoutContent; +Layout.Sider = LayoutSider; +Layout.Footer = LayoutFooter; diff --git a/src/molecules/Layout/Sider.tsx b/src/molecules/Layout/Sider.tsx index a587db3..27f6bc9 100644 --- a/src/molecules/Layout/Sider.tsx +++ b/src/molecules/Layout/Sider.tsx @@ -1,11 +1,7 @@ -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { forwardRef } from 'react'; import { SiderStyles } from './styles'; -import { RdSiderProps } from './types'; +import { RdLayoutSiderComponent } from './types'; -export const Sider = ({ ...antdProps }: RdSiderProps) => { - return ( - - - - ); -}; +export const LayoutSider: RdLayoutSiderComponent = forwardRef((props, ref) => { + return ; +}); diff --git a/src/molecules/Layout/types.ts b/src/molecules/Layout/types.ts index 7cc8d7e..5cf73fc 100644 --- a/src/molecules/Layout/types.ts +++ b/src/molecules/Layout/types.ts @@ -1,4 +1,58 @@ -import { LayoutProps, SiderProps } from 'antd'; +import { GetProps, Layout } from 'antd'; +import { ComponentToken as LayoutComponentTokenAntd } from 'antd/es/layout/style'; -export interface RdLayoutProps extends LayoutProps {} -export interface RdSiderProps extends SiderProps {} +//#region Define Ant Design types +type LayoutProps = GetProps; +type ContentProps = GetProps; +type FooterProps = GetProps; +type HeaderProps = GetProps; +type SiderProps = GetProps; +//#endregion + +//#region Define extended component tokens +type LayoutComponentTokenExtend = {}; +//#endregion + +//#region Define extended types +type LayoutPropsExtend = {}; +type ContentPropsExtend = {}; +type FooterPropsExtend = {}; +type HeaderPropsExtend = {}; +type SiderPropsExtend = {}; +//#endregion + +//#region Export types +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 + +//#region Define component types +export type RdLayoutComponent = React.ForwardRefExoticComponent< + RdLayoutProps & React.RefAttributes +>; + +export type RdLayoutHeaderComponent = React.ForwardRefExoticComponent< + RdHeaderProps & React.RefAttributes +>; +export type RdLayoutFooterComponent = React.ForwardRefExoticComponent< + RdFooterProps & React.RefAttributes +>; +export type RdLayoutContentComponent = React.ForwardRefExoticComponent< + RdContentProps & React.RefAttributes +>; +export type RdLayoutSiderComponent = React.ForwardRefExoticComponent< + RdSiderProps & React.RefAttributes +>; + +export type RdLayoutCompoundedComponent = RdLayoutComponent & { + Header: RdLayoutComponent; + Footer: RdLayoutFooterComponent; + Content: RdLayoutContentComponent; + Sider: RdLayoutSiderComponent; +}; +//#endregion 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..f605d19 100644 --- a/src/molecules/List/List.tsx +++ b/src/molecules/List/List.tsx @@ -1,16 +1,10 @@ -// import { ListProps } from 'antd'; -// import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -// import { Item } from './Item'; -// import { ListStyles } from './styles'; -// import { RdListProps } from './types'; +import { ListItem } from './ListItem'; +import { ListStyles } from './styles'; +import { RdListComponent, RdListCompoundedComponent } from './types'; -// export const List = ({ ...antdProps }: any) => { -// return ( -// -// -// -// ); -// }; +export const ListInternal: RdListComponent = props => { + return ; +}; - -// List.Item = Item; \ No newline at end of file +export const List = ListInternal as RdListCompoundedComponent; +List.Item = ListItem; diff --git a/src/molecules/List/ListItem.tsx b/src/molecules/List/ListItem.tsx new file mode 100644 index 0000000..2fa4de9 --- /dev/null +++ b/src/molecules/List/ListItem.tsx @@ -0,0 +1,11 @@ +import { forwardRef } from 'react'; +import { ListItemMeta } from './ListItemMeta'; +import { ListItemStyles } from './styles'; +import { RdListItemComponent, RdListItemCompoundedComponent } from './types'; + +export const ListItemInternal: RdListItemComponent = forwardRef((props, ref) => { + return ; +}); + +export const ListItem = ListItemInternal as RdListItemCompoundedComponent; +ListItem.Meta = ListItemMeta; diff --git a/src/molecules/List/ListItemMeta.tsx b/src/molecules/List/ListItemMeta.tsx new file mode 100644 index 0000000..acd1dd4 --- /dev/null +++ b/src/molecules/List/ListItemMeta.tsx @@ -0,0 +1,6 @@ +import { ListItemMetaStyles } from './styles'; +import { RdListItemMetaComponent } from './types'; + +export const ListItemMeta: RdListItemMetaComponent = props => { + 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)``; diff --git a/src/molecules/List/types.ts b/src/molecules/List/types.ts index 826ece3..c4ffe6a 100644 --- a/src/molecules/List/types.ts +++ b/src/molecules/List/types.ts @@ -1,10 +1,42 @@ -// import { List } from 'antd'; -// import { ListItemMetaProps, ListItemTypeProps } from 'antd/es/list/Item'; +import { List, GetProps } from 'antd'; +import { ComponentToken as ListComponentTokenAntd } from 'antd/es/list/style'; -// type ListProps = typeof List; +//#region Define Ant Design types +type ListProps = GetProps; +type ListItemProps = GetProps; +type ListItemMetaProps = GetProps; +//#endregion -// export interface RdListProps extends ListProps {} +//#region Define extended component tokens +type ListComponentTokenExtend = {}; +//#endregion -// export interface RdListItemProps extends ListItemTypeProps {} +//#region Define extended types +type ListPropsExtend = {}; +type ListItemPropsExtend = {}; +type ListItemMetaPropsExtend = {}; +//#endregion -// export interface RdListItemMetaProps extends ListItemMetaProps {} +//#region Export types +export type RdListProps = ListProps & ListPropsExtend; +export type RdListItemProps = ListItemProps & ListItemPropsExtend; +export type RdListItemMetaProps = ListItemMetaProps & ListItemMetaPropsExtend; + +export type RdListComponentToken = ListComponentTokenAntd & ListComponentTokenExtend; +//#endregion + +//#region Define component types +export type RdListComponent = React.FC>; +export type RdListItemComponent = React.ForwardRefExoticComponent< + RdListItemProps & React.RefAttributes +>; +export type RdListItemMetaComponent = React.FC; + +export type RdListItemCompoundedComponent = RdListItemComponent & { + Meta: RdListItemMetaComponent; +}; + +export type RdListCompoundedComponent = RdListComponent & { + Item: RdListItemCompoundedComponent; +}; +//#endregion diff --git a/src/molecules/Menu/Menu.tsx b/src/molecules/Menu/Menu.tsx index 7b4fc96..77a2752 100644 --- a/src/molecules/Menu/Menu.tsx +++ b/src/molecules/Menu/Menu.tsx @@ -1,11 +1,15 @@ -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { MenuDivider } from './MenuDivider'; +import { MenuItem } from './MenuItem'; +import { MenuItemGroup } from './MenuItemGroup'; import { MenuStyles } from './styles'; -import { RdMenuProps } from './types'; +import { RdMenuComponent, RdMenuCompoundedComponent } from './types'; -export const Menu = ({ ...antdProps }: RdMenuProps) => { - return ( - - - - ); +export const MenuInternal: RdMenuComponent = props => { + return ; }; + +export const Menu = MenuInternal as RdMenuCompoundedComponent; +Menu.Item = MenuItem; +Menu.ItemGroup = MenuItemGroup; +Menu.Divider = MenuDivider; +Menu.SubMenu = Menu.SubMenu; diff --git a/src/molecules/Menu/MenuDivider.tsx b/src/molecules/Menu/MenuDivider.tsx new file mode 100644 index 0000000..b52aa30 --- /dev/null +++ b/src/molecules/Menu/MenuDivider.tsx @@ -0,0 +1,6 @@ +import { MenuDividerStyles } from './styles'; +import { RdMenuDividerComponent } from './types'; + +export const MenuDivider: RdMenuDividerComponent = props => { + return ; +}; diff --git a/src/molecules/Menu/MenuItem.tsx b/src/molecules/Menu/MenuItem.tsx new file mode 100644 index 0000000..5ffea84 --- /dev/null +++ b/src/molecules/Menu/MenuItem.tsx @@ -0,0 +1,6 @@ +import { MenuItemStyles } from './styles'; +import { RdMenuItemComponent } from './types'; + +export const MenuItem: RdMenuItemComponent = props => { + return ; +}; diff --git a/src/molecules/Menu/MenuItemGroup.tsx b/src/molecules/Menu/MenuItemGroup.tsx new file mode 100644 index 0000000..97414d1 --- /dev/null +++ b/src/molecules/Menu/MenuItemGroup.tsx @@ -0,0 +1,7 @@ +import { forwardRef } from 'react'; +import { MenuItemGroupStyles } from './styles'; +import { RdMenuItemGroupComponent } from './types'; + +export const MenuItemGroup: RdMenuItemGroupComponent = forwardRef((props, ref) => { + return ; +}); diff --git a/src/molecules/Menu/MenuSubMenu.tsx b/src/molecules/Menu/MenuSubMenu.tsx new file mode 100644 index 0000000..f4eeb18 --- /dev/null +++ b/src/molecules/Menu/MenuSubMenu.tsx @@ -0,0 +1,6 @@ +import { MenuSubMenuStyles } from './styles'; +import { RdMenuSubMenuComponent } from './types'; + +export const MenuSubMenu: RdMenuSubMenuComponent = props => { + return ; +}; diff --git a/src/molecules/Menu/styles.tsx b/src/molecules/Menu/styles.tsx index 4c679ce..90f24d9 100644 --- a/src/molecules/Menu/styles.tsx +++ b/src/molecules/Menu/styles.tsx @@ -2,3 +2,7 @@ import styled from '@emotion/styled'; import { Menu } from 'antd'; export const MenuStyles = styled(Menu)``; +export const MenuItemStyles = styled(Menu.Item)``; +export const MenuItemGroupStyles = styled(Menu.ItemGroup)``; +export const MenuDividerStyles = styled(Menu.Divider)``; +export const MenuSubMenuStyles = styled(Menu.SubMenu)``; diff --git a/src/molecules/Menu/types.ts b/src/molecules/Menu/types.ts index 9f45543..c8fec76 100644 --- a/src/molecules/Menu/types.ts +++ b/src/molecules/Menu/types.ts @@ -1,5 +1,59 @@ -import { MenuProps } from 'antd'; +import { GetProps, Menu } from 'antd'; +import { ItemType, MenuItemType } from 'antd/es/menu/interface'; +import { ComponentToken as MenuComponentTokenAntd } from 'antd/es/menu/style'; -export interface RdMenuProps extends MenuProps { - -} +//#region Define Ant Design types +type MenuPropsAntd = GetProps; +type MenuItemPropsAntd = GetProps; +type MenuItemGroupPropsAntd = GetProps; +type MenuDividerPropsAntd = GetProps; +type MenuSubMenuPropsAntd = GetProps; + +type MenuItemTypeAntd = MenuItemType; +type ItemTypeAntd = ItemType; + +//#endregion + +//#region Define extended component tokens +type MenuComponentTokenExtend = {}; +//#endregion + +//#region Define extended types +type MenuPropsExtend = {}; +type MenuItemPropsExtend = {}; +type MenuItemGroupPropsExtend = {}; +type MenuDividerPropsExtend = {}; +type MenuSubMenuPropsExtend = {}; +type MenuItemTypeExtend = {}; +type ItemTypeExtend = {}; +//#endregion + +//#region Export types +export type RdMenuProps = MenuPropsAntd & MenuPropsExtend; +export type RdMenuItemProps = MenuItemPropsAntd & MenuItemPropsExtend; +export type RdMenuItemGroupProps = MenuItemGroupPropsAntd & MenuItemGroupPropsExtend; +export type RdMenuDividerProps = MenuDividerPropsAntd & MenuDividerPropsExtend; +export type RdMenuSubMenuProps = MenuSubMenuPropsAntd & MenuSubMenuPropsExtend; +export type RdMenuItemType = MenuItemTypeAntd & MenuItemTypeExtend; +export type RdItemType = ItemTypeAntd & ItemTypeExtend; + +export type RdMenuComponentToken = MenuComponentTokenAntd & MenuComponentTokenExtend; +//#endregion + +//#region Define component types +export type RdMenuComponent = React.FC; +export type RdMenuItemComponent = React.FC; +export type RdMenuItemGroupComponent = React.ForwardRefExoticComponent< + Omit & React.RefAttributes +>; +export type RdMenuDividerComponent = React.FC; +export type RdMenuSubMenuComponent = React.FC; + +export type RdMenuCompoundedComponent = RdMenuComponent & { + Item: RdMenuItemComponent; + ItemGroup: RdMenuItemGroupComponent; + Divider: RdMenuDividerComponent; + SubMenu: RdMenuSubMenuComponent; +}; + +//#endregion diff --git a/src/molecules/Message/Message.tsx b/src/molecules/Message/Message.tsx new file mode 100644 index 0000000..80e3130 --- /dev/null +++ b/src/molecules/Message/Message.tsx @@ -0,0 +1,17 @@ +import { message as antdMessage } from 'antd'; +import { RdMessageProps } from './types'; + +let message: RdMessageProps = {} as RdMessageProps; + +message.config = antdMessage.config; +message.destroy = antdMessage.destroy; +message.error = antdMessage.error; +message.info = antdMessage.info; +message.open = antdMessage.open; +message.success = antdMessage.success; +message.useMessage = antdMessage.useMessage; +message.warning = antdMessage.warning; +message.loading = antdMessage.loading; +message._InternalPanelDoNotUseOrYouWillBeFired = antdMessage._InternalPanelDoNotUseOrYouWillBeFired; + +export { message }; diff --git a/src/molecules/Message/index.tsx b/src/molecules/Message/index.tsx new file mode 100644 index 0000000..f457fae --- /dev/null +++ b/src/molecules/Message/index.tsx @@ -0,0 +1,2 @@ +export * from './Message'; +export * from './types'; diff --git a/src/molecules/Message/types.ts b/src/molecules/Message/types.ts new file mode 100644 index 0000000..638ba24 --- /dev/null +++ b/src/molecules/Message/types.ts @@ -0,0 +1,20 @@ +import { GetProps, message } from 'antd'; +import { ComponentToken as MessageComponentTokenAntd } from 'antd/es/message/style'; + +//#region Define Ant Design types +type MessageProps = GetProps; +//#endregion + +//#region Define extended component tokens +type MessageComponentTokenExtend = {}; +//#endregion + +//#region Define extended types +type MessagePropsExtend = {}; +//#endregion + +//#region Export types +export type RdMessageProps = MessageProps & MessagePropsExtend; +export type RdMessageComponentToken = MessageComponentTokenAntd & + MessageComponentTokenExtend; +//#endregion diff --git a/src/molecules/Modal/Modal.tsx b/src/molecules/Modal/Modal.tsx index 284f0c1..004c61f 100644 --- a/src/molecules/Modal/Modal.tsx +++ b/src/molecules/Modal/Modal.tsx @@ -1,11 +1,20 @@ -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { Modal as ModalAntd } from 'antd'; +import { RdModalProps, RdModalType } from './types'; import { ModalStyles } from './styles'; -import { RdModalProps } from './types'; - -export const Modal = ({ ...antdProps }: RdModalProps) => { - return ( - - - - ); + +export const ModalInternal = ({ ...antdProps }: RdModalProps) => { + return ; }; + +export const Modal = ModalInternal as RdModalType; + +Modal.useModal = ModalAntd.useModal; +Modal.destroyAll = ModalAntd.destroyAll; +Modal.config = ModalAntd.config; +Modal._InternalPanelDoNotUseOrYouWillBeFired = ModalAntd._InternalPanelDoNotUseOrYouWillBeFired; + +Modal.confirm = ModalAntd.confirm; +Modal.info = ModalAntd.info; +Modal.success = ModalAntd.success; +Modal.error = ModalAntd.error; +Modal.warning = ModalAntd.warning; diff --git a/src/molecules/Modal/types.ts b/src/molecules/Modal/types.ts index 604d0f9..dda5897 100644 --- a/src/molecules/Modal/types.ts +++ b/src/molecules/Modal/types.ts @@ -1,5 +1,36 @@ -import { ModalProps } from 'antd'; +import { GetProps, Modal as ModalAntd } from 'antd'; +import { ModalStaticFunctions } from 'antd/es/modal/confirm'; +import { ComponentToken as ModalComponentTokenAntd } from 'antd/es/modal/style'; +import { ModalInternal } from './Modal'; -export interface RdModalProps extends ModalProps { - -} +//#region Define Ant Design types +type ModalProps = GetProps; +type useModal = (typeof ModalAntd)['useModal']; +type destroyAll = (typeof ModalAntd)['destroyAll']; +type config = (typeof ModalAntd)['config']; +type _InternalPanelDoNotUseOrYouWillBeFired = + (typeof ModalAntd)['_InternalPanelDoNotUseOrYouWillBeFired']; +//#endregion + +//#region Define extended component tokens +type ModalComponentTokenExtend = {}; +//#endregion + +//#region Define extended types +type ModalPropsExtend = {}; +//#endregion + +//#region Export types +export type RdModalProps = ModalProps & ModalPropsExtend; + +export type RdModalComponentToken = ModalComponentTokenAntd & ModalComponentTokenExtend; +//#endregion + +export type RdModalType = typeof ModalInternal & + ModalStaticFunctions & { + useModal: useModal; + destroyAll: destroyAll; + config: config; + /** @private Internal Component. Do not use in your production. */ + _InternalPanelDoNotUseOrYouWillBeFired: _InternalPanelDoNotUseOrYouWillBeFired; + }; diff --git a/src/molecules/Notification/Notification.tsx b/src/molecules/Notification/Notification.tsx new file mode 100644 index 0000000..d96e33d --- /dev/null +++ b/src/molecules/Notification/Notification.tsx @@ -0,0 +1,82 @@ +import { notification as antdNotification, NotificationArgsProps } from 'antd'; +import { RdNotificationGlobalConfig, RdNotificationProps, RdNotificationStaticFn } from './types'; + +let notification: RdNotificationProps = {} as RdNotificationProps; + +const rdNotificationStaticFunc: RdNotificationStaticFn = (rdNotificationArgsProps, type) => { + let message = rdNotificationArgsProps.message; + if (notification.globalConfigExtend.defaultMessage) { + typeof notification.globalConfigExtend.defaultMessage === 'string' && + (message = notification.globalConfigExtend.defaultMessage); + + if (typeof notification.globalConfigExtend.defaultMessage === 'object') { + const { success, info, warning, error } = + notification.globalConfigExtend.defaultMessage; + switch (type) { + case 'success': + message = success || message; + break; + case 'info': + message = info || message; + break; + case 'warning': + message = warning || message; + break; + case 'error': + message = error || message; + break; + default: + break; + } + } + } + const notificationArgsProps: NotificationArgsProps = { + message, + ...rdNotificationArgsProps, + }; + + antdNotification.open({ + ...notificationArgsProps, + type, + }); +}; + +notification.config = (rdNotificationGlobalConfig: RdNotificationGlobalConfig) => { + const { defaultMessage, ...notificationGlobalConfigAntd } = rdNotificationGlobalConfig; + + notification.globalConfigExtend = { + defaultMessage, + }; + + antdNotification.config(notificationGlobalConfigAntd); +}; +notification.destroy = config => { + antdNotification.destroy(config); +}; +notification.open = config => { + rdNotificationStaticFunc(config); +}; +notification.error = config => { + rdNotificationStaticFunc(config, 'error'); +}; +notification.info = config => { + rdNotificationStaticFunc(config, 'info'); +}; +notification.success = config => { + rdNotificationStaticFunc(config, 'success'); +}; +notification.warning = config => { + rdNotificationStaticFunc(config, 'warning'); +}; +notification.useNotification = antdNotification.useNotification; +notification._InternalPanelDoNotUseOrYouWillBeFired = + antdNotification._InternalPanelDoNotUseOrYouWillBeFired; + +/** + * ======================================================================================================= + * ================================================EXTENDED=============================================== + * ======================================================================================================= + */ +notification.globalConfigExtend = {}; + +export { notification }; diff --git a/src/molecules/Notification/index.tsx b/src/molecules/Notification/index.tsx new file mode 100644 index 0000000..020be26 --- /dev/null +++ b/src/molecules/Notification/index.tsx @@ -0,0 +1,2 @@ +export * from './Notification'; +export * from './types'; diff --git a/src/molecules/Notification/types.ts b/src/molecules/Notification/types.ts new file mode 100644 index 0000000..06e7e38 --- /dev/null +++ b/src/molecules/Notification/types.ts @@ -0,0 +1,65 @@ +import { GetProps, notification } from 'antd'; +import { ArgsProps, GlobalConfigProps, IconType } from 'antd/es/notification/interface'; +import PurePanel from 'antd/es/notification/PurePanel'; +import { ComponentToken as NotificationComponentTokenAntd } from 'antd/es/notification/style'; +import useNotification from 'antd/es/notification/useNotification'; + +//#region Define Ant Design types +type NotificationPropsAntd = Omit, 'config'>; + +type NotificationGlobalConfigAntd = GlobalConfigProps; + +type NotificationArgsPropsAntd = Omit; +//#endregion + +//#region Define extended component tokens +type NotificationComponentTokenExtend = {}; +//#endregion + +//#region Define extended types +type RdNoticeMethods = { + success: RdNotificationStaticFn; + info: RdNotificationStaticFn; + warning: RdNotificationStaticFn; + error: RdNotificationStaticFn; +}; + +type NoticeDefaultMessage = { + success?: string; + info?: string; + warning?: string; + error?: string; +}; + +type RdBaseMethods = { + globalConfigExtend: NotificationGlobalConfigExtend; + open: (config: RdNotificationArgsProps) => void; + destroy: (key?: React.Key) => void; + config: (config: RdNotificationGlobalConfig) => void; + useNotification: typeof useNotification; + /** @private Internal Component. Do not use in your production. */ + _InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel; +}; + +type RdNotificationPropsExtend = RdBaseMethods & RdNoticeMethods; +type NotificationGlobalConfigExtend = { + defaultMessage?: string | NoticeDefaultMessage; +}; + +type NotificationArgsPropsExtend = { + message?: React.ReactNode; +}; + +export type RdNotificationStaticFn = (config: RdNotificationArgsProps, type?: IconType) => void; +//#endregion + +//#region Export types +export type RdNotificationProps = RdNotificationPropsExtend; +export type RdNotificationGlobalConfig = NotificationGlobalConfigAntd & + NotificationGlobalConfigExtend; + +export type RdNotificationArgsProps = NotificationArgsPropsAntd & NotificationArgsPropsExtend; + +export type RdNotificationComponentToken = NotificationComponentTokenAntd & + NotificationComponentTokenExtend; +//#endregion diff --git a/src/molecules/Pagination/Pagination.tsx b/src/molecules/Pagination/Pagination.tsx index 23ef0a6..7b7d63c 100644 --- a/src/molecules/Pagination/Pagination.tsx +++ b/src/molecules/Pagination/Pagination.tsx @@ -1,14 +1,6 @@ -import { Pagination as AntdPagination, PaginationProps } from 'antd'; -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { PaginationWrapper } from './styles'; -import { RdPaginationProps } from './types'; +import { PaginationStyled } from './styles'; +import { RdPaginationComponent } from './types'; -export const Pagination = ({ ...antdProps }: RdPaginationProps) => { - return ( - - - - - - ); +export const Pagination: RdPaginationComponent = props => { + return ; }; 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'; 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 5bc36e4..7d2f9e9 100644 --- a/src/molecules/Pagination/types.ts +++ b/src/molecules/Pagination/types.ts @@ -1,3 +1,25 @@ -import { PaginationProps } from 'antd'; +import { Pagination, GetProps } from 'antd'; +import { ComponentToken as PaginationComponentTokenAntd } from 'antd/es/pagination/style'; -export interface RdPaginationProps extends PaginationProps {} +//#region Define Ant Design types +type PaginationProps = GetProps; +//#endregion + +//#region Define extended component tokens +type PaginationComponentTokenExtend = {}; +//#endregion + +//#region Define extended types +type PaginationPropsExtend = {}; +//#endregion + +//#region Export types +export type RdPaginationProps = PaginationProps & PaginationPropsExtend; +export type RdPaginationComponentToken = PaginationComponentTokenAntd & + PaginationComponentTokenExtend; +//#endregion + +//#region Define component types +export type RdPaginationComponent = React.FC; + +//#endregion diff --git a/src/molecules/Popconfirm/Popconfirm.tsx b/src/molecules/Popconfirm/Popconfirm.tsx new file mode 100644 index 0000000..850bebe --- /dev/null +++ b/src/molecules/Popconfirm/Popconfirm.tsx @@ -0,0 +1,7 @@ +import { forwardRef } from 'react'; +import { PopconfirmStyles } from './styles'; +import { RdPopconfirmComponent } from './types'; + +export const Popconfirm: RdPopconfirmComponent = forwardRef((props, ref) => { + return ; +}); diff --git a/src/molecules/Popconfirm/index.tsx b/src/molecules/Popconfirm/index.tsx new file mode 100644 index 0000000..d94c6f1 --- /dev/null +++ b/src/molecules/Popconfirm/index.tsx @@ -0,0 +1,2 @@ +export * from './Popconfirm'; +export * from './types'; \ No newline at end of file diff --git a/src/molecules/Popconfirm/styles.tsx b/src/molecules/Popconfirm/styles.tsx new file mode 100644 index 0000000..993191d --- /dev/null +++ b/src/molecules/Popconfirm/styles.tsx @@ -0,0 +1,4 @@ +import styled from '@emotion/styled'; +import { Popconfirm } from 'antd'; + +export const PopconfirmStyles = styled(Popconfirm)``; diff --git a/src/molecules/Popconfirm/types.ts b/src/molecules/Popconfirm/types.ts new file mode 100644 index 0000000..20f5d46 --- /dev/null +++ b/src/molecules/Popconfirm/types.ts @@ -0,0 +1,29 @@ +import { GetProps, Popconfirm } from 'antd'; +import { ComponentToken as PopconfirmComponentTokenAntd } from 'antd/es/popconfirm/style'; +import { TooltipRef } from 'antd/es/tooltip'; + +//#region Define Ant Design types +type PopconfirmPropsAntd = GetProps; + +type TooltipRefAntd = TooltipRef; +//#endregion + +//#region Define extended component tokens +type PopconfirmComponentTokenExtend = {}; +//#endregion + +//#region Define extended types +type PopconfirmPropsExtend = {}; +//#endregion + +//#region Export types +export type RdPopconfirmProps = PopconfirmPropsAntd & PopconfirmPropsExtend; +export type RdPopconfirmComponentToken = PopconfirmComponentTokenAntd & + PopconfirmComponentTokenExtend; +//#endregion + +//#region Define component types +export type RdPopconfirmComponent = React.ForwardRefExoticComponent< + RdPopconfirmProps & React.RefAttributes +>; +//#endregion diff --git a/src/molecules/Popover/Popover.tsx b/src/molecules/Popover/Popover.tsx index 26d5722..6966066 100644 --- a/src/molecules/Popover/Popover.tsx +++ b/src/molecules/Popover/Popover.tsx @@ -1,11 +1,7 @@ -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { forwardRef } from 'react'; import { PopoverStyles } from './styles'; -import { RdPopoverProps } from './types'; +import { RdPopoverComponent } from './types'; -export const Popover = ({ ...antdProps }: RdPopoverProps) => { - return ( - - - - ); -}; +export const Popover: RdPopoverComponent = forwardRef(props => { + return ; +}); diff --git a/src/molecules/Popover/types.ts b/src/molecules/Popover/types.ts index 713637d..f1e4151 100644 --- a/src/molecules/Popover/types.ts +++ b/src/molecules/Popover/types.ts @@ -1,3 +1,29 @@ -import { PopoverProps } from 'antd'; +import { Popover, GetProps } from 'antd'; +import { ComponentToken as PopoverComponentTokenAntd } from 'antd/es/popover/style'; +import { TooltipRef } from 'antd/es/tooltip'; -export interface RdPopoverProps extends PopoverProps {} +//#region Define Ant Design types +type PopoverPropsAntd = GetProps; + +type TooltipRefAntd = TooltipRef; +//#endregion + +//#region Define extended component tokens +type PopoverComponentTokenExtend = {}; +//#endregion + +//#region Define extended types +type PopoverPropsExtend = {}; +//#endregion + +//#region Export types +export type RdPopoverProps = PopoverPropsAntd & PopoverPropsExtend; +export type RdPopoverComponentToken = PopoverComponentTokenAntd & PopoverComponentTokenExtend; +//#endregion + +//#region Define component types +export type RdPopoverComponent = React.ForwardRefExoticComponent< + PopoverPropsAntd & React.RefAttributes +>; + +//#endregion diff --git a/src/molecules/Radio/Radio.tsx b/src/molecules/Radio/Radio.tsx index f0651ad..89ee800 100644 --- a/src/molecules/Radio/Radio.tsx +++ b/src/molecules/Radio/Radio.tsx @@ -1,29 +1,13 @@ -import { RadioProps } from 'antd'; -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { LabelField } from '../LabelField'; +import { forwardRef } from 'react'; import { RadioButton } from './RadioButton'; import { RadioGroup } from './RadioGroup'; import { RadioStyles } from './styles'; -import { RdRadioProps } from './types'; +import { RdRadioComponent, RdRadioCompoundedComponent } from './types'; -export const Radio = ({ - label: labelFieldProps, - - ...antdProps -}: RdRadioProps) => { - return ( - - - - - - ); -}; +export const RadioInternal: RdRadioComponent = forwardRef((props, ref) => { + return ; +}); +export const Radio = RadioInternal as RdRadioCompoundedComponent; Radio.Button = RadioButton; Radio.Group = RadioGroup; diff --git a/src/molecules/Radio/RadioButton.tsx b/src/molecules/Radio/RadioButton.tsx index d1669e3..984834e 100644 --- a/src/molecules/Radio/RadioButton.tsx +++ b/src/molecules/Radio/RadioButton.tsx @@ -1,24 +1,7 @@ -import { RadioButtonProps } from 'antd/es/radio/radioButton'; -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { LabelField } from '../LabelField'; +import { forwardRef } from 'react'; import { RadioButtonStyles } from './styles'; -import { RdRadioButtonProps } from './types'; +import { RdRadioButtonComponent } from './types'; -export const RadioButton = ({ - label: labelFieldProps, - - ...antdProps -}: RdRadioButtonProps) => { - return ( - - - - - - ); -}; +export const RadioButton: RdRadioButtonComponent = forwardRef((props, ref) => { + 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 bc1be07..da5fa0f 100644 --- a/src/molecules/Radio/RadioGroup.tsx +++ b/src/molecules/Radio/RadioGroup.tsx @@ -1,25 +1,7 @@ -import { RadioGroupProps } from 'antd'; -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { LabelField } from '../LabelField'; +import { forwardRef } from 'react'; import { RadioGroupStyles } from './styles'; -import { RdRadioGroupProps } from './types'; +import { RdRadioGroupComponent } from './types'; -export const RadioGroup = ({ - label: labelFieldProps, - axis = 'horizontal', - - ...antdProps -}: RdRadioGroupProps) => { - return ( - - - - - - ); -}; +export const RadioGroup: RdRadioGroupComponent = forwardRef((props, ref) => { + 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 7d53b2b..9f2790a 100644 --- a/src/molecules/Radio/types.ts +++ b/src/molecules/Radio/types.ts @@ -1,32 +1,48 @@ -import { RadioGroupProps, RadioProps } from 'antd'; -import { RdRegistryControlField, TAxis } from '../../models'; -import { RdLabelFieldWrapperProps } from '../LabelField/types'; -import { RadioButtonProps } from 'antd/es/radio/radioButton'; - -//#region Radio -export interface RdRadioProps extends RadioProps, RdLabelFieldWrapperProps {} - -export interface RdRadioControlProps extends Omit, RdRegistryControlField {} -//#endregion Radio - -//#region RadioButton -export interface RdRadioButtonProps extends RadioButtonProps, RdLabelFieldWrapperProps {} - -export interface RdRadioButtonControlProps - extends Omit, - RdRegistryControlField {} -//#endregion RadioButton - -//#region RadioGroup -export interface RdRadioGroupProps extends RadioGroupProps, RdLabelFieldWrapperProps { - /** - * @description The axis of the radio options. - * @default 'horizontal' - */ - axis?: TAxis; -} - -export interface RdRadioGroupControlProps - extends Omit, - RdRegistryControlField {} -//#endregion RadioGroup +import { Radio, GetProps } from 'antd'; +import { RadioRef } from 'antd/es/radio'; +import { ComponentToken as RadioComponentTokenAntd } from 'antd/es/radio/style'; + +//#region Define Ant Design types +type RadioProps = GetProps; +type RadioButtonProps = GetProps; +type RadioGroupProps = GetProps; + +type RadioRefAntd = RadioRef; +//#endregion + +//#region Define extended component tokens +type RadioComponentTokenExtend = {}; +//#endregion + +//#region Define extended types +type RadioPropsExtend = {}; +type RadioButtonPropsExtend = {}; +type RadioGroupPropsExtend = {}; +//#endregion + +//#region Export types +export type RdRadioProps = RadioProps & RadioPropsExtend; +export type RdRadioButtonProps = RadioButtonProps & RadioButtonPropsExtend; +export type RdRadioGroupProps = RadioGroupProps & RadioGroupPropsExtend; + +export type RdRadioComponentToken = RadioComponentTokenAntd & RadioComponentTokenExtend; +//#endregion + +//#region Define component types +export type RdRadioComponent = React.ForwardRefExoticComponent< + RdRadioProps & React.RefAttributes +>; + +export type RdRadioButtonComponent = React.ForwardRefExoticComponent< + RdRadioButtonProps & React.RefAttributes +>; + +export type RdRadioGroupComponent = React.NamedExoticComponent< + RdRadioGroupProps & React.RefAttributes +>; + +export type RdRadioCompoundedComponent = RdRadioComponent & { + Button: RdRadioButtonComponent; + Group: RdRadioGroupComponent; +}; +//#endregion 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 2f9ecb0..0000000 --- a/src/molecules/RangePicker/types.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { RangePickerProps } from 'antd/es/date-picker'; -import { IRegistryRangePickerControlField } from '../../models'; -import { RdLabelFieldWrapperProps } from '../LabelField/types'; - -export interface RdRangePickerProps extends RangePickerProps, RdLabelFieldWrapperProps {} - -export interface RdRangePickerControlProps - extends Omit, - IRegistryRangePickerControlField {} 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/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 {} diff --git a/src/molecules/Select/Select(Will_Delete).tsx b/src/molecules/Select/Select(Will_Delete).tsx new file mode 100644 index 0000000..c5e5a8f --- /dev/null +++ b/src/molecules/Select/Select(Will_Delete).tsx @@ -0,0 +1,62 @@ +// import { forwardRef } from 'react'; +// import { config } from '../..'; +// import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +// import { RdComponentsConfig } from '../../utils/types'; +// import { SelectStyled } from './styles'; +// import { RdSelectProps, variantSelectExtend } from './types'; +// import useExtendVariant from './useExtendVariant'; + +// const isVariantSelectExtend = ( +// variant: NonNullable +// ): variant is variantSelectExtend => { +// return ['outlined-transparent'].includes(variant); +// }; + +// export const Select = forwardRef((props: RdSelectProps, ref: RdSelectProps['ref']) => { +// let { +// width, +// minWidth, +// isHideValueOnLoading = true, +// variant, + +// ...antdProps +// } = props; + +// let newSelectDesignToken: RdComponentsConfig['Select'] = { +// ...config.componentToken?.Select, +// algorithm: true, +// }; + +// //#region Handle isHideValueOnLoading prop +// // Handle hide value when loading +// if (isHideValueOnLoading) { +// antdProps = { +// ...antdProps, +// value: !antdProps.loading && antdProps.value, +// }; +// } +// //#endregion + +// if (variant && isVariantSelectExtend(variant)) { +// // Get design token config for color. +// const designTokenConfig = useExtendVariant(variant); + +// // Merge design token config with button design token. +// newSelectDesignToken = { +// ...newSelectDesignToken, +// ...designTokenConfig, +// }; + +// variant = 'outlined'; +// } + +// return ( +// +// +// +// ); +// }); diff --git a/src/molecules/Select/Select.tsx b/src/molecules/Select/Select.tsx index cfd96b5..3160789 100644 --- a/src/molecules/Select/Select.tsx +++ b/src/molecules/Select/Select.tsx @@ -1,80 +1,25 @@ -import { Select as SelectAntd, SelectProps } from 'antd'; -import ConditionalWrapper from '../../atomics/ConditionalWrapper'; -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { LabelField } from '../LabelField'; -import { SelectWrapper } from './styles'; -import { RdSelectProps, variantSelectExtend } from './types'; -import useExtendVariant from './useExtendVariant'; -import { IRdComponentsConfig } from '../../organisms'; -import { config } from '../..'; -import { RefAttributes } from 'react'; - -const isVariantSelectExtend = ( - variant: NonNullable -): variant is variantSelectExtend => { - return ['outlined-transparent'].includes(variant); -}; - -export const Select = ({ - label: labelFieldProps, - - // Custom props - width, - minWidth, - isHideValueOnLoading = true, - variant, - ref, - - ...antdProps -}: RdSelectProps & RefAttributes) => { - let newSelectDesignToken: IRdComponentsConfig['Select'] = { - ...config.componentToken?.Select, - algorithm: true, - }; - - //#region Handle isHideValueOnLoading prop - // Handle hide value when loading - if (isHideValueOnLoading) { - antdProps = { - ...antdProps, - value: !antdProps.loading && antdProps.value, - }; - } - //#endregion - - if (variant && isVariantSelectExtend(variant)) { - // Get design token config for color. - const designTokenConfig = useExtendVariant(variant); - - // Merge design token config with button design token. - newSelectDesignToken = { - ...newSelectDesignToken, - ...designTokenConfig, - }; - - variant = 'outlined'; - } - - //#region - // Handle extend variant props - - //#endregion - - return ( - - - - - - - +import { BaseOptionType, DefaultOptionType } from 'antd/es/select'; +import clsx from 'clsx'; +import React, { useMemo } from 'react'; +import { SelectStyledFunc } from './styles'; +import { RdSelectComponent, RdSelectProps } from './types'; +import { mergeToken } from 'antd/es/theme/internal'; + +export const Select: RdSelectComponent = < + ValueType = any, + OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType +>( + props: React.PropsWithChildren> +) => { + const { rootClassName } = props; + + const SelectStyled = useMemo( + () => + SelectStyledFunc() as React.FC< + RdSelectProps + >, + [] ); + + return ; }; 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 ( - - - -