From d2c602ff43f7c903db2753df52dcfde6f2ba9acd Mon Sep 17 00:00:00 2001 From: Kenneth Date: Wed, 6 Nov 2024 17:04:52 +0700 Subject: [PATCH 01/18] v0.10.5 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 47ce891..5849087 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "1byte-react-design", - "version": "0.9.27", + "version": "0.10.5", "main": "dist/index.js", "module": "dist/index.js", "types": "dist/index.d.ts", From 31cecc9d2072bfebbacf0439239bcb12b359e63d Mon Sep 17 00:00:00 2001 From: Kenneth Date: Tue, 19 Nov 2024 13:42:33 +0700 Subject: [PATCH 02/18] fix: change prefix interface I to Rd --- package.json | 3 +- src/models/interfaces/form.ts | 6 +- src/molecules/Avatar/Avatar.tsx | 6 +- src/molecules/Avatar/types.ts | 4 +- src/molecules/Blur/Blur.tsx | 13 +- src/molecules/Blur/types.ts | 10 + src/molecules/Breadcrumb/Breadcrumb.tsx | 4 +- src/molecules/Breadcrumb/types.ts | 6 +- src/molecules/Button/Button.tsx | 6 +- src/molecules/Button/types.ts | 8 +- src/molecules/Card/Card.tsx | 4 +- src/molecules/Card/types.ts | 4 +- src/molecules/Checkbox/Checkbox.tsx | 4 +- src/molecules/Checkbox/CheckboxControl.tsx | 4 +- src/molecules/Checkbox/types.ts | 18 +- src/molecules/Col/Col.tsx | 4 +- src/molecules/Col/types.ts | 2 +- src/molecules/Divider/Divider.tsx | 4 +- src/molecules/Divider/types.ts | 2 +- src/molecules/Drawer/Drawer.tsx | 4 +- src/molecules/Drawer/types.ts | 2 +- src/molecules/Dropdown/Dropdown.tsx | 4 +- src/molecules/Dropdown/types.ts | 2 +- src/molecules/FloatButton/Backtop.tsx | 4 +- src/molecules/FloatButton/FloatButton.tsx | 4 +- src/molecules/FloatButton/types.ts | 4 +- src/molecules/Input/Input.tsx | 4 +- src/molecules/Input/InputControl.tsx | 5 +- src/molecules/Input/types.ts | 8 +- src/molecules/InputNumber/InputNumber.tsx | 4 +- .../InputNumber/InputNumberControl.tsx | 4 +- src/molecules/InputNumber/index.ts | 3 +- src/molecules/InputNumber/types.ts | 12 +- src/molecules/InputPassword/InputPassword.tsx | 4 +- .../InputPassword/InputPasswordControl.tsx | 4 +- src/molecules/InputPassword/types.ts | 12 +- src/molecules/LabelField/LabelField.tsx | 54 +++++ src/molecules/LabelField/LabelFieldWrapper.ts | 4 +- src/molecules/LabelField/index.tsx | 55 +---- src/molecules/LabelField/types.ts | 6 +- src/molecules/Layout/Content.tsx | 4 +- src/molecules/Layout/Footer.tsx | 4 +- src/molecules/Layout/Header.tsx | 4 +- src/molecules/Layout/Layout.tsx | 4 +- src/molecules/Layout/Sider.tsx | 4 +- src/molecules/Layout/types.ts | 4 +- src/molecules/List/Item.tsx | 4 +- src/molecules/List/List.tsx | 2 +- src/molecules/List/Meta.tsx | 4 +- src/molecules/List/types.ts | 6 +- src/molecules/Menu/Menu.tsx | 4 +- src/molecules/Menu/types.ts | 2 +- src/molecules/Modal/Modal.tsx | 4 +- src/molecules/Modal/types.ts | 2 +- src/molecules/Pagination/Pagination.tsx | 4 +- src/molecules/Pagination/types.ts | 2 +- src/molecules/Popover/Popover.tsx | 4 +- src/molecules/Popover/types.ts | 2 +- src/molecules/Radio/Radio.tsx | 4 +- src/molecules/Radio/RadioButton.tsx | 4 +- src/molecules/Radio/RadioButtonControl.tsx | 4 +- src/molecules/Radio/RadioControl.tsx | 4 +- src/molecules/Radio/RadioGroup.tsx | 4 +- src/molecules/Radio/RadioGroupControl.tsx | 4 +- src/molecules/Radio/types.ts | 24 +-- src/molecules/RangePicker/RangePicker.tsx | 4 +- .../RangePicker/RangePickerControl.tsx | 4 +- src/molecules/RangePicker/types.ts | 8 +- src/molecules/Row/Row.tsx | 4 +- src/molecules/Row/types.ts | 2 +- src/molecules/Select/Select.tsx | 8 +- src/molecules/Select/SelectControl.tsx | 8 +- src/molecules/Select/types.ts | 14 +- src/molecules/Skeleton/Skeleton.tsx | 4 +- src/molecules/Skeleton/types.ts | 2 +- src/molecules/Slider/Slider.tsx | 4 +- src/molecules/Slider/types.ts | 2 +- src/molecules/Spin/Spin.tsx | 4 +- src/molecules/Spin/types.ts | 2 +- src/molecules/Switch/Switch.tsx | 4 +- src/molecules/Switch/SwitchControl.tsx | 4 +- src/molecules/Switch/types.ts | 8 +- src/molecules/Table/Table.tsx | 5 +- src/molecules/Table/index.ts | 3 +- src/molecules/Table/types.ts | 4 + src/molecules/Tabs/Tabs.tsx | 4 +- src/molecules/Tabs/types.ts | 2 +- src/molecules/TextArea/TextArea.tsx | 4 +- src/molecules/TextArea/TextAreaControl.tsx | 13 +- src/molecules/TextArea/helpers.ts | 13 ++ src/molecules/TextArea/index.ts | 3 +- src/molecules/TextArea/types.ts | 12 +- src/molecules/Tooltip/Tooltip.tsx | 22 +- src/molecules/Tooltip/styles.tsx | 2 +- src/molecules/Tooltip/types.ts | 6 +- yarn.lock | 202 ++++++++++-------- 96 files changed, 445 insertions(+), 363 deletions(-) create mode 100644 src/molecules/Blur/types.ts create mode 100644 src/molecules/LabelField/LabelField.tsx create mode 100644 src/molecules/Table/types.ts create mode 100644 src/molecules/TextArea/helpers.ts diff --git a/package.json b/package.json index 5849087..6e474be 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,8 @@ "polished": "^4.3.1", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-hook-form": "^7.53.0" + "react-hook-form": "^7.53.0", + "react-router-dom": "^6.28.0" }, "devDependencies": { "@babel/core": "^7.25.2", diff --git a/src/models/interfaces/form.ts b/src/models/interfaces/form.ts index c9015d6..f9d333c 100644 --- a/src/models/interfaces/form.ts +++ b/src/models/interfaces/form.ts @@ -1,16 +1,16 @@ import { Control } from 'react-hook-form'; -export interface IControlField { +export interface RdControlField { /* Control of react-hook-form */ control: Control; // eslint-disable-line } -export interface IRegistryControlField extends IControlField { +export interface RdRegistryControlField extends RdControlField { /* Name to register field in react-hook-form */ name: string; } -export interface IRegistryRangePickerControlField extends IControlField { +export interface IRegistryRangePickerControlField extends RdControlField { /* Names to register dateFrom, dateTo in react-hook-form */ names: [string, string]; } diff --git a/src/molecules/Avatar/Avatar.tsx b/src/molecules/Avatar/Avatar.tsx index ca275dd..cac75c5 100644 --- a/src/molecules/Avatar/Avatar.tsx +++ b/src/molecules/Avatar/Avatar.tsx @@ -1,11 +1,11 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { AvatarStyles } from './styles'; -import { IAvatarProps } from './types'; +import { RdAvatarProps } from './types'; -export const Avatar = ({ ...antdProps }: IAvatarProps) => { +export const Avatar = (props: RdAvatarProps) => { return ( - + ); }; diff --git a/src/molecules/Avatar/types.ts b/src/molecules/Avatar/types.ts index 20a564b..bcb44e9 100644 --- a/src/molecules/Avatar/types.ts +++ b/src/molecules/Avatar/types.ts @@ -1,3 +1,5 @@ import { AvatarProps } from 'antd'; -export interface IAvatarProps extends AvatarProps {} +type AvatarPropsExtend = {}; + +export type RdAvatarProps = AvatarProps & AvatarPropsExtend; diff --git a/src/molecules/Blur/Blur.tsx b/src/molecules/Blur/Blur.tsx index c822a2a..d3a7572 100644 --- a/src/molecules/Blur/Blur.tsx +++ b/src/molecules/Blur/Blur.tsx @@ -1,15 +1,8 @@ -import { HTMLAttributes } from 'react'; -import { BlurBody, BlurHeader, BlurTitle, BlurWrapper } from './styles'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; +import { BlurBody, BlurHeader, BlurTitle, BlurWrapper } from './styles'; +import { RdBlurProps } from './types'; -interface IBlurProps extends HTMLAttributes { - isBlur?: boolean; - isFull?: boolean; - title?: string; - isLoading?: boolean; -} - -export const Blur = (props: IBlurProps) => { +export const Blur = (props: RdBlurProps) => { const { title, isBlur, isLoading, children, ...htmlProps } = props; if (!isBlur) return children; diff --git a/src/molecules/Blur/types.ts b/src/molecules/Blur/types.ts new file mode 100644 index 0000000..5b00930 --- /dev/null +++ b/src/molecules/Blur/types.ts @@ -0,0 +1,10 @@ +import { HTMLAttributes } from 'react'; + +type RdBlurPropsExtend = { + isBlur?: boolean; + isFull?: boolean; + title?: string; + isLoading?: boolean; +}; + +export type RdBlurProps = HTMLAttributes & RdBlurPropsExtend; diff --git a/src/molecules/Breadcrumb/Breadcrumb.tsx b/src/molecules/Breadcrumb/Breadcrumb.tsx index 13fd14f..4192a79 100644 --- a/src/molecules/Breadcrumb/Breadcrumb.tsx +++ b/src/molecules/Breadcrumb/Breadcrumb.tsx @@ -1,8 +1,8 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { BreadcrumbStyles } from './styles'; -import { IBreadcrumbProps } from './types'; +import { RdBreadcrumbProps } from './types'; -export const Breadcrumb = ({ ...antdProps }: IBreadcrumbProps) => { +export const Breadcrumb = ({ ...antdProps }: RdBreadcrumbProps) => { return ( diff --git a/src/molecules/Breadcrumb/types.ts b/src/molecules/Breadcrumb/types.ts index 86e6e08..683f638 100644 --- a/src/molecules/Breadcrumb/types.ts +++ b/src/molecules/Breadcrumb/types.ts @@ -1,5 +1,5 @@ import { BreadcrumbProps } from 'antd'; -export interface IBreadcrumbProps extends BreadcrumbProps { - -} +type RdBreadcrumbPropsExtend = {}; + +export type RdBreadcrumbProps = BreadcrumbProps & RdBreadcrumbPropsExtend; diff --git a/src/molecules/Button/Button.tsx b/src/molecules/Button/Button.tsx index a50505f..4126a33 100644 --- a/src/molecules/Button/Button.tsx +++ b/src/molecules/Button/Button.tsx @@ -1,16 +1,16 @@ import { config, IRdComponentsConfig } from '../..'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { ButtonStyles } from './styles'; -import { colorButtonExtend, IButtonProps } from './types'; +import { colorButtonExtend, RdButtonProps } from './types'; import { useExtendColor } from './useExtendColor'; const isColorButtonExtend = ( - color: NonNullable + color: NonNullable ): color is colorButtonExtend => { return ['second', 'tertiary', 'quaternary'].includes(color); }; -export const Button = ({ width, color, ...antdProps }: IButtonProps) => { +export const Button = ({ width, color, to, ...antdProps }: RdButtonProps) => { let newButtonDesignToken: IRdComponentsConfig['Button'] = { ...config.componentToken?.Button, algorithm: true, diff --git a/src/molecules/Button/types.ts b/src/molecules/Button/types.ts index 044c31b..ecb219e 100644 --- a/src/molecules/Button/types.ts +++ b/src/molecules/Button/types.ts @@ -10,7 +10,7 @@ export type colorButtonExtend = 'second' | 'tertiary' | 'quaternary'; * @override antd.ButtonProps * @see ButtonProps */ -export interface IButtonProps extends Omit { +export interface RdButtonProps extends Omit { /** * @description The width of the button. */ @@ -21,4 +21,10 @@ export interface IButtonProps extends Omit { * @see ButtonProps#color */ color?: ButtonProps['color'] | colorButtonExtend; + + /** + * @description Link in react-router-dom. + * @see Link + */ + to?: string; } diff --git a/src/molecules/Card/Card.tsx b/src/molecules/Card/Card.tsx index 6e30cfa..4cd2962 100644 --- a/src/molecules/Card/Card.tsx +++ b/src/molecules/Card/Card.tsx @@ -1,8 +1,8 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { CardStyles } from './styles'; -import { ICardProps } from './types'; +import { RdCardProps } from './types'; -export const Card = ({ ...antdProps }: ICardProps) => { +export const Card = ({ ...antdProps }: RdCardProps) => { return ( diff --git a/src/molecules/Card/types.ts b/src/molecules/Card/types.ts index d6300a8..40ff3ff 100644 --- a/src/molecules/Card/types.ts +++ b/src/molecules/Card/types.ts @@ -1,3 +1,5 @@ import { CardProps } from 'antd'; -export interface ICardProps extends CardProps {} +type RdCardPropsExtend = {}; + +export type RdCardProps = CardProps & RdCardPropsExtend; diff --git a/src/molecules/Checkbox/Checkbox.tsx b/src/molecules/Checkbox/Checkbox.tsx index c950877..99181a9 100644 --- a/src/molecules/Checkbox/Checkbox.tsx +++ b/src/molecules/Checkbox/Checkbox.tsx @@ -3,13 +3,13 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { LabelField } from '../LabelField'; import { CheckboxGroup } from './CheckboxGroup'; import { CheckboxStyles } from './styles'; -import { ICheckboxProps } from './types'; +import { RdCheckboxProps } from './types'; export const Checkbox = ({ label: labelFieldProps, ...antdProps -}: ICheckboxProps) => { +}: RdCheckboxProps) => { return ( { +}: RdCheckboxControlProps) => { const { field: { value, onChange, ref }, fieldState: { invalid, error }, diff --git a/src/molecules/Checkbox/types.ts b/src/molecules/Checkbox/types.ts index 845eb0b..75bfc36 100644 --- a/src/molecules/Checkbox/types.ts +++ b/src/molecules/Checkbox/types.ts @@ -1,22 +1,22 @@ import { CheckboxProps } from 'antd'; import { CheckboxGroupProps } from 'antd/es/checkbox'; -import { IRegistryControlField, TAxis } from '../../models'; -import { ILabelFieldWrapperProps } from '../LabelField/types'; +import { RdRegistryControlField, TAxis } from '../../models'; +import { RdLabelFieldWrapperProps } from '../LabelField/types'; interface ICheckboxBaseProps {} -export interface ICheckboxProps +export interface RdCheckboxProps extends CheckboxProps, ICheckboxBaseProps, - ILabelFieldWrapperProps {} -export interface ICheckboxControlProps - extends Omit, - IRegistryControlField {} + RdLabelFieldWrapperProps {} +export interface RdCheckboxControlProps + extends Omit, + RdRegistryControlField {} export interface ICheckboxGroupProps extends CheckboxGroupProps, ICheckboxBaseProps, - ILabelFieldWrapperProps { + RdLabelFieldWrapperProps { /** * @description The axis of options in CheckboxGroup. * @default 'horizontal' @@ -25,4 +25,4 @@ export interface ICheckboxGroupProps } export interface ICheckboxGroupControlProps extends Omit, - IRegistryControlField {} + RdRegistryControlField {} diff --git a/src/molecules/Col/Col.tsx b/src/molecules/Col/Col.tsx index 3761169..f4642b6 100644 --- a/src/molecules/Col/Col.tsx +++ b/src/molecules/Col/Col.tsx @@ -1,8 +1,8 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { ColStyles } from './styles'; -import { IColProps } from './types'; +import { RdColProps } from './types'; -export const Col = ({ ...antdProps }: IColProps) => { +export const Col = ({ ...antdProps }: RdColProps) => { return ( diff --git a/src/molecules/Col/types.ts b/src/molecules/Col/types.ts index 06cd85b..87a480b 100644 --- a/src/molecules/Col/types.ts +++ b/src/molecules/Col/types.ts @@ -1,3 +1,3 @@ import { ColProps } from 'antd'; -export interface IColProps extends ColProps {} +export interface RdColProps extends ColProps {} diff --git a/src/molecules/Divider/Divider.tsx b/src/molecules/Divider/Divider.tsx index 8c82f72..305ba4d 100644 --- a/src/molecules/Divider/Divider.tsx +++ b/src/molecules/Divider/Divider.tsx @@ -1,8 +1,8 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { DividerStyles } from './styles'; -import { IDividerProps } from './types'; +import { RdDividerProps } from './types'; -export const Divider = ({ ...antdProps }: IDividerProps) => { +export const Divider = ({ ...antdProps }: RdDividerProps) => { return ( diff --git a/src/molecules/Divider/types.ts b/src/molecules/Divider/types.ts index 86067ec..94c4619 100644 --- a/src/molecules/Divider/types.ts +++ b/src/molecules/Divider/types.ts @@ -1,3 +1,3 @@ import { DividerProps } from 'antd'; -export interface IDividerProps extends DividerProps {} +export interface RdDividerProps extends DividerProps {} diff --git a/src/molecules/Drawer/Drawer.tsx b/src/molecules/Drawer/Drawer.tsx index 1e0ea87..35be876 100644 --- a/src/molecules/Drawer/Drawer.tsx +++ b/src/molecules/Drawer/Drawer.tsx @@ -1,8 +1,8 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { DrawerStyles } from './styles'; -import { IDrawerProps } from './types'; +import { RdDrawerProps } from './types'; -export const Drawer = ({ ...antdProps }: IDrawerProps) => { +export const Drawer = ({ ...antdProps }: RdDrawerProps) => { return ( diff --git a/src/molecules/Drawer/types.ts b/src/molecules/Drawer/types.ts index eeabe67..0e7eb1d 100644 --- a/src/molecules/Drawer/types.ts +++ b/src/molecules/Drawer/types.ts @@ -1,3 +1,3 @@ import { DrawerProps } from 'antd'; -export interface IDrawerProps extends DrawerProps {} +export interface RdDrawerProps extends DrawerProps {} diff --git a/src/molecules/Dropdown/Dropdown.tsx b/src/molecules/Dropdown/Dropdown.tsx index fd300d8..4374665 100644 --- a/src/molecules/Dropdown/Dropdown.tsx +++ b/src/molecules/Dropdown/Dropdown.tsx @@ -1,8 +1,8 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { DropdownStyles } from './styles'; -import { IDropdownProps } from './types'; +import { RdDropdownProps } from './types'; -export const Dropdown = ({ ...antdProps }: IDropdownProps) => { +export const Dropdown = ({ ...antdProps }: RdDropdownProps) => { return ( diff --git a/src/molecules/Dropdown/types.ts b/src/molecules/Dropdown/types.ts index c4e84fb..10596c5 100644 --- a/src/molecules/Dropdown/types.ts +++ b/src/molecules/Dropdown/types.ts @@ -1,3 +1,3 @@ import { DropdownProps } from 'antd'; -export interface IDropdownProps extends DropdownProps {} +export interface RdDropdownProps extends DropdownProps {} diff --git a/src/molecules/FloatButton/Backtop.tsx b/src/molecules/FloatButton/Backtop.tsx index 21824de..2bfab91 100644 --- a/src/molecules/FloatButton/Backtop.tsx +++ b/src/molecules/FloatButton/Backtop.tsx @@ -1,8 +1,8 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { BackTopStyles } from './styles'; -import { IBackTopProps } from './types'; +import { RdBackTopProps } from './types'; -export const BackTop = ({ ...antdProps }: IBackTopProps) => { +export const BackTop = ({ ...antdProps }: RdBackTopProps) => { return ( diff --git a/src/molecules/FloatButton/FloatButton.tsx b/src/molecules/FloatButton/FloatButton.tsx index 2a45a2f..410446b 100644 --- a/src/molecules/FloatButton/FloatButton.tsx +++ b/src/molecules/FloatButton/FloatButton.tsx @@ -1,9 +1,9 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { BackTop } from './Backtop'; import { FloatButtonStyles } from './styles'; -import { IFloatButtonProps } from './types'; +import { RdFloatButtonProps } from './types'; -export const FloatButton = ({ ...antdProps }: IFloatButtonProps) => { +export const FloatButton = ({ ...antdProps }: RdFloatButtonProps) => { return ( diff --git a/src/molecules/FloatButton/types.ts b/src/molecules/FloatButton/types.ts index 72e0548..f238700 100644 --- a/src/molecules/FloatButton/types.ts +++ b/src/molecules/FloatButton/types.ts @@ -1,5 +1,5 @@ import { BackTopProps, FloatButtonProps } from 'antd'; -export interface IFloatButtonProps extends FloatButtonProps {} +export interface RdFloatButtonProps extends FloatButtonProps {} -export interface IBackTopProps extends BackTopProps, Omit {} +export interface RdBackTopProps extends BackTopProps, Omit {} diff --git a/src/molecules/Input/Input.tsx b/src/molecules/Input/Input.tsx index 59ac884..658c319 100644 --- a/src/molecules/Input/Input.tsx +++ b/src/molecules/Input/Input.tsx @@ -3,13 +3,13 @@ import ConditionalWrapper from '../../atomics/ConditionalWrapper'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { LabelField } from '../LabelField'; import { InputStyled } from './styles'; -import { IInputProps } from './types'; +import { RdInputProps } from './types'; export const Input = ({ label: labelFieldProps, ...antdProps -}: IInputProps) => { +}: RdInputProps) => { return ( { +}: RdInputControlProps) => { const { field: { value, onChange, onBlur, ref }, fieldState: { invalid, error }, diff --git a/src/molecules/Input/types.ts b/src/molecules/Input/types.ts index 3f80721..93a6eca 100644 --- a/src/molecules/Input/types.ts +++ b/src/molecules/Input/types.ts @@ -1,7 +1,7 @@ import { InputProps } from 'antd'; -import { IRegistryControlField } from '../../models'; -import { ILabelFieldWrapperProps } from '../LabelField/types'; +import { RdRegistryControlField } from '../../models'; +import { RdLabelFieldWrapperProps } from '../LabelField/types'; -export interface IInputProps extends InputProps, ILabelFieldWrapperProps {} +export interface RdInputProps extends InputProps, RdLabelFieldWrapperProps {} -export interface IInputControlProps extends Omit, IRegistryControlField {} +export interface RdInputControlProps extends Omit, RdRegistryControlField {} diff --git a/src/molecules/InputNumber/InputNumber.tsx b/src/molecules/InputNumber/InputNumber.tsx index 4e0ef58..307631c 100644 --- a/src/molecules/InputNumber/InputNumber.tsx +++ b/src/molecules/InputNumber/InputNumber.tsx @@ -2,14 +2,14 @@ import { InputNumberProps } from 'antd'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { LabelField } from '../LabelField'; import { InputNumberStyled, InputWrapper } from './styles'; -import { IInputNumberProps } from './types'; +import { RdInputNumberProps } from './types'; import ConditionalWrapper from '../../atomics/ConditionalWrapper'; export const InputNumber = ({ label: labelFieldProps, ...antdProps -}: IInputNumberProps) => { +}: RdInputNumberProps) => { return ( diff --git a/src/molecules/InputNumber/InputNumberControl.tsx b/src/molecules/InputNumber/InputNumberControl.tsx index c581013..a6013c4 100644 --- a/src/molecules/InputNumber/InputNumberControl.tsx +++ b/src/molecules/InputNumber/InputNumberControl.tsx @@ -5,7 +5,7 @@ import { TextError } from '../../atomics'; import ConditionalWrapper from '../../atomics/ConditionalWrapper'; import { LabelField } from '../LabelField'; import { InputNumberStyled, InputWrapper } from './styles'; -import { IInputNumberControlProps } from './types'; +import { RdInputNumberControlProps } from './types'; export const InputNumberControl = ({ name, @@ -15,7 +15,7 @@ export const InputNumberControl = ({ label: labelFieldProps, ...antdProps -}: IInputNumberControlProps) => { +}: RdInputNumberControlProps) => { const { field: { value, onChange, onBlur, ref }, fieldState: { invalid, error }, diff --git a/src/molecules/InputNumber/index.ts b/src/molecules/InputNumber/index.ts index dd60c65..e0d0d7d 100644 --- a/src/molecules/InputNumber/index.ts +++ b/src/molecules/InputNumber/index.ts @@ -1,2 +1,3 @@ export * from "./InputNumber"; -export * from "./InputNumberControl"; \ No newline at end of file +export * from "./InputNumberControl"; +export * from './types'; \ No newline at end of file diff --git a/src/molecules/InputNumber/types.ts b/src/molecules/InputNumber/types.ts index 33b2cf7..eba5f0d 100644 --- a/src/molecules/InputNumber/types.ts +++ b/src/molecules/InputNumber/types.ts @@ -1,9 +1,9 @@ import { InputNumberProps } from 'antd'; -import { IRegistryControlField } from '../../models'; -import { ILabelFieldWrapperProps } from '../LabelField/types'; +import { RdRegistryControlField } from '../../models'; +import { RdLabelFieldWrapperProps } from '../LabelField/types'; -export interface IInputNumberProps extends InputNumberProps, ILabelFieldWrapperProps {} +export interface RdInputNumberProps extends InputNumberProps, RdLabelFieldWrapperProps {} -export interface IInputNumberControlProps - extends Omit, - IRegistryControlField {} +export interface RdInputNumberControlProps + extends Omit, + RdRegistryControlField {} diff --git a/src/molecules/InputPassword/InputPassword.tsx b/src/molecules/InputPassword/InputPassword.tsx index 0ad759a..dbaf494 100644 --- a/src/molecules/InputPassword/InputPassword.tsx +++ b/src/molecules/InputPassword/InputPassword.tsx @@ -3,13 +3,13 @@ import ConditionalWrapper from '../../atomics/ConditionalWrapper'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { LabelField } from '../LabelField'; import { InputStyled, InputWrapper } from './styles'; -import { IInputPasswordProps } from './types'; +import { RdInputPasswordProps } from './types'; export const InputPassword = ({ label: labelFieldProps, ...antdProps -}: IInputPasswordProps) => { +}: RdInputPasswordProps) => { return ( diff --git a/src/molecules/InputPassword/InputPasswordControl.tsx b/src/molecules/InputPassword/InputPasswordControl.tsx index c7d9bc8..fc926ac 100644 --- a/src/molecules/InputPassword/InputPasswordControl.tsx +++ b/src/molecules/InputPassword/InputPasswordControl.tsx @@ -5,7 +5,7 @@ import { TextError } from '../../atomics'; import ConditionalWrapper from '../../atomics/ConditionalWrapper'; import { LabelField } from '../LabelField'; import { InputStyled, InputWrapper } from './styles'; -import { IInputPasswordControlProps } from './types'; +import { RdInputPasswordControlProps } from './types'; export const InputPasswordControl = ({ name, @@ -15,7 +15,7 @@ export const InputPasswordControl = ({ label: labelFieldProps, ...antdProps -}: IInputPasswordControlProps) => { +}: RdInputPasswordControlProps) => { const { field: { value, onChange, onBlur, ref }, fieldState: { invalid, error }, diff --git a/src/molecules/InputPassword/types.ts b/src/molecules/InputPassword/types.ts index f97213b..c922374 100644 --- a/src/molecules/InputPassword/types.ts +++ b/src/molecules/InputPassword/types.ts @@ -1,10 +1,10 @@ import { InputProps } from 'antd'; -import { IRegistryControlField } from '../../models'; -import { ILabelFieldWrapperProps } from '../LabelField/types'; +import { RdRegistryControlField } from '../../models'; +import { RdLabelFieldWrapperProps } from '../LabelField/types'; -export interface IInputPasswordProps extends InputProps, ILabelFieldWrapperProps { +export interface RdInputPasswordProps extends InputProps, RdLabelFieldWrapperProps { } -export interface IInputPasswordControlProps - extends Omit, - IRegistryControlField {} +export interface RdInputPasswordControlProps + extends Omit, + RdRegistryControlField {} diff --git a/src/molecules/LabelField/LabelField.tsx b/src/molecules/LabelField/LabelField.tsx new file mode 100644 index 0000000..e89fb9c --- /dev/null +++ b/src/molecules/LabelField/LabelField.tsx @@ -0,0 +1,54 @@ +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 index 76685aa..401c5b6 100644 --- a/src/molecules/LabelField/LabelFieldWrapper.ts +++ b/src/molecules/LabelField/LabelFieldWrapper.ts @@ -1,8 +1,8 @@ import React from 'react'; import { LabelField } from '.'; -import { ILabelFieldProps } from './types'; +import { RdLabelFieldProps } from './types'; -const LabelFieldWrapper = (labelFieldProps: ILabelFieldProps | false) => { +const LabelFieldWrapper = (labelFieldProps: RdLabelFieldProps | false) => { return labelFieldProps ? LabelField : React.Fragment; }; diff --git a/src/molecules/LabelField/index.tsx b/src/molecules/LabelField/index.tsx index 1e4f97d..d71dc61 100644 --- a/src/molecules/LabelField/index.tsx +++ b/src/molecules/LabelField/index.tsx @@ -1,52 +1,3 @@ -import { Flex } from 'antd'; -import { PropsWithChildren } from 'react'; -import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { Label, LabelDescription, LabelFieldWrapper } from './styles'; -import { ILabelFieldProps } from './types'; - -export const LabelField = (props: ILabelFieldProps & PropsWithChildren) => { - const { - text, - axis = 'vertical', - description, - htmlFor, - isColon = false, - required, - widthControl, - children, - } = props; - - return ( - - - - - {description} - - - {children} - - - - ); -}; +export * from './LabelField'; +export * from './LabelFieldWrapper'; +export * from './types'; \ No newline at end of file diff --git a/src/molecules/LabelField/types.ts b/src/molecules/LabelField/types.ts index c46651a..3aea833 100644 --- a/src/molecules/LabelField/types.ts +++ b/src/molecules/LabelField/types.ts @@ -1,6 +1,6 @@ import { TAxis } from '../../models'; -export interface ILabelFieldProps { +export interface RdLabelFieldProps { /** * @description Text label to be displayed. */ @@ -34,7 +34,7 @@ export interface ILabelFieldProps { htmlFor?: string; } -export interface ILabelFieldWrapperProps { +export interface RdLabelFieldWrapperProps { /** The properties for the label field. If set to false, the label will not be rendered. */ - label?: ILabelFieldProps | false; + label?: RdLabelFieldProps | false; } diff --git a/src/molecules/Layout/Content.tsx b/src/molecules/Layout/Content.tsx index 4f04922..1d0a9a4 100644 --- a/src/molecules/Layout/Content.tsx +++ b/src/molecules/Layout/Content.tsx @@ -1,8 +1,8 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { ContentStyles } from './styles'; -import { ILayoutProps } from './types'; +import { RdLayoutProps } from './types'; -export const Content = ({ ...antdProps }: ILayoutProps) => { +export const Content = ({ ...antdProps }: RdLayoutProps) => { return ( diff --git a/src/molecules/Layout/Footer.tsx b/src/molecules/Layout/Footer.tsx index b69ea34..5f4d9e9 100644 --- a/src/molecules/Layout/Footer.tsx +++ b/src/molecules/Layout/Footer.tsx @@ -1,8 +1,8 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { FooterStyles } from './styles'; -import { ILayoutProps } from './types'; +import { RdLayoutProps } from './types'; -export const Footer = ({ ...antdProps }: ILayoutProps) => { +export const Footer = ({ ...antdProps }: RdLayoutProps) => { return ( diff --git a/src/molecules/Layout/Header.tsx b/src/molecules/Layout/Header.tsx index 30a696c..d86b409 100644 --- a/src/molecules/Layout/Header.tsx +++ b/src/molecules/Layout/Header.tsx @@ -1,8 +1,8 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { HeaderStyles, LayoutStyles } from './styles'; -import { ILayoutProps } from './types'; +import { RdLayoutProps } from './types'; -export const Header = ({ ...antdProps }: ILayoutProps) => { +export const Header = ({ ...antdProps }: RdLayoutProps) => { return ( diff --git a/src/molecules/Layout/Layout.tsx b/src/molecules/Layout/Layout.tsx index 826e6ef..4e84790 100644 --- a/src/molecules/Layout/Layout.tsx +++ b/src/molecules/Layout/Layout.tsx @@ -4,9 +4,9 @@ import { Footer } from './Footer'; import { Header } from './Header'; import { Sider } from './Sider'; import { LayoutStyles } from './styles'; -import { ILayoutProps } from './types'; +import { RdLayoutProps } from './types'; -export const Layout = ({ ...antdProps }: ILayoutProps) => { +export const Layout = ({ ...antdProps }: RdLayoutProps) => { return ( diff --git a/src/molecules/Layout/Sider.tsx b/src/molecules/Layout/Sider.tsx index 2db3283..a587db3 100644 --- a/src/molecules/Layout/Sider.tsx +++ b/src/molecules/Layout/Sider.tsx @@ -1,8 +1,8 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { SiderStyles } from './styles'; -import { ISiderProps } from './types'; +import { RdSiderProps } from './types'; -export const Sider = ({ ...antdProps }: ISiderProps) => { +export const Sider = ({ ...antdProps }: RdSiderProps) => { return ( diff --git a/src/molecules/Layout/types.ts b/src/molecules/Layout/types.ts index 4248cc4..7cc8d7e 100644 --- a/src/molecules/Layout/types.ts +++ b/src/molecules/Layout/types.ts @@ -1,4 +1,4 @@ import { LayoutProps, SiderProps } from 'antd'; -export interface ILayoutProps extends LayoutProps {} -export interface ISiderProps extends SiderProps {} +export interface RdLayoutProps extends LayoutProps {} +export interface RdSiderProps extends SiderProps {} diff --git a/src/molecules/List/Item.tsx b/src/molecules/List/Item.tsx index 06651b6..5028811 100644 --- a/src/molecules/List/Item.tsx +++ b/src/molecules/List/Item.tsx @@ -1,9 +1,9 @@ // import { ConfigProviderDesign } from '../../ConfigProviderDesign'; // import { Meta } from './Meta'; // import { ItemStyles } from './styles'; -// import { IListItemProps, IListProps } from './types'; +// import { RdListItemProps, RdListProps } from './types'; -// export const Item = ({ ...antdProps }: IListItemProps) => { +// export const Item = ({ ...antdProps }: RdListItemProps) => { // return ( // // diff --git a/src/molecules/List/List.tsx b/src/molecules/List/List.tsx index 6299ff8..23ff5c4 100644 --- a/src/molecules/List/List.tsx +++ b/src/molecules/List/List.tsx @@ -2,7 +2,7 @@ // import { ConfigProviderDesign } from '../../ConfigProviderDesign'; // import { Item } from './Item'; // import { ListStyles } from './styles'; -// import { IListProps } from './types'; +// import { RdListProps } from './types'; // export const List = ({ ...antdProps }: any) => { // return ( diff --git a/src/molecules/List/Meta.tsx b/src/molecules/List/Meta.tsx index 35f107b..e3ad008 100644 --- a/src/molecules/List/Meta.tsx +++ b/src/molecules/List/Meta.tsx @@ -1,8 +1,8 @@ // import { ConfigProviderDesign } from '../../ConfigProviderDesign'; // import { MetaStyles } from './styles'; -// import { IListProps } from './types'; +// import { RdListProps } from './types'; -// export const Meta = ({ ...antdProps }: IListProps) => { +// export const Meta = ({ ...antdProps }: RdListProps) => { // return ( // // diff --git a/src/molecules/List/types.ts b/src/molecules/List/types.ts index 19bb32a..826ece3 100644 --- a/src/molecules/List/types.ts +++ b/src/molecules/List/types.ts @@ -3,8 +3,8 @@ // type ListProps = typeof List; -// export interface IListProps extends ListProps {} +// export interface RdListProps extends ListProps {} -// export interface IListItemProps extends ListItemTypeProps {} +// export interface RdListItemProps extends ListItemTypeProps {} -// export interface IListItemMetaProps extends ListItemMetaProps {} +// export interface RdListItemMetaProps extends ListItemMetaProps {} diff --git a/src/molecules/Menu/Menu.tsx b/src/molecules/Menu/Menu.tsx index 88624f7..7b4fc96 100644 --- a/src/molecules/Menu/Menu.tsx +++ b/src/molecules/Menu/Menu.tsx @@ -1,8 +1,8 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { MenuStyles } from './styles'; -import { IMenuProps } from './types'; +import { RdMenuProps } from './types'; -export const Menu = ({ ...antdProps }: IMenuProps) => { +export const Menu = ({ ...antdProps }: RdMenuProps) => { return ( diff --git a/src/molecules/Menu/types.ts b/src/molecules/Menu/types.ts index c19a878..9f45543 100644 --- a/src/molecules/Menu/types.ts +++ b/src/molecules/Menu/types.ts @@ -1,5 +1,5 @@ import { MenuProps } from 'antd'; -export interface IMenuProps extends MenuProps { +export interface RdMenuProps extends MenuProps { } diff --git a/src/molecules/Modal/Modal.tsx b/src/molecules/Modal/Modal.tsx index 8e2bee3..284f0c1 100644 --- a/src/molecules/Modal/Modal.tsx +++ b/src/molecules/Modal/Modal.tsx @@ -1,8 +1,8 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { ModalStyles } from './styles'; -import { IModalProps } from './types'; +import { RdModalProps } from './types'; -export const Modal = ({ ...antdProps }: IModalProps) => { +export const Modal = ({ ...antdProps }: RdModalProps) => { return ( diff --git a/src/molecules/Modal/types.ts b/src/molecules/Modal/types.ts index 7c757ff..604d0f9 100644 --- a/src/molecules/Modal/types.ts +++ b/src/molecules/Modal/types.ts @@ -1,5 +1,5 @@ import { ModalProps } from 'antd'; -export interface IModalProps extends ModalProps { +export interface RdModalProps extends ModalProps { } diff --git a/src/molecules/Pagination/Pagination.tsx b/src/molecules/Pagination/Pagination.tsx index 5f65c06..23ef0a6 100644 --- a/src/molecules/Pagination/Pagination.tsx +++ b/src/molecules/Pagination/Pagination.tsx @@ -1,9 +1,9 @@ import { Pagination as AntdPagination, PaginationProps } from 'antd'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { PaginationWrapper } from './styles'; -import { IPaginationProps } from './types'; +import { RdPaginationProps } from './types'; -export const Pagination = ({ ...antdProps }: IPaginationProps) => { +export const Pagination = ({ ...antdProps }: RdPaginationProps) => { return ( diff --git a/src/molecules/Pagination/types.ts b/src/molecules/Pagination/types.ts index 4ae0e84..5bc36e4 100644 --- a/src/molecules/Pagination/types.ts +++ b/src/molecules/Pagination/types.ts @@ -1,3 +1,3 @@ import { PaginationProps } from 'antd'; -export interface IPaginationProps extends PaginationProps {} +export interface RdPaginationProps extends PaginationProps {} diff --git a/src/molecules/Popover/Popover.tsx b/src/molecules/Popover/Popover.tsx index e90794a..26d5722 100644 --- a/src/molecules/Popover/Popover.tsx +++ b/src/molecules/Popover/Popover.tsx @@ -1,8 +1,8 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { PopoverStyles } from './styles'; -import { IPopoverProps } from './types'; +import { RdPopoverProps } from './types'; -export const Popover = ({ ...antdProps }: IPopoverProps) => { +export const Popover = ({ ...antdProps }: RdPopoverProps) => { return ( diff --git a/src/molecules/Popover/types.ts b/src/molecules/Popover/types.ts index fa1eecb..713637d 100644 --- a/src/molecules/Popover/types.ts +++ b/src/molecules/Popover/types.ts @@ -1,3 +1,3 @@ import { PopoverProps } from 'antd'; -export interface IPopoverProps extends PopoverProps {} +export interface RdPopoverProps extends PopoverProps {} diff --git a/src/molecules/Radio/Radio.tsx b/src/molecules/Radio/Radio.tsx index 9a5c91c..f0651ad 100644 --- a/src/molecules/Radio/Radio.tsx +++ b/src/molecules/Radio/Radio.tsx @@ -5,13 +5,13 @@ import { LabelField } from '../LabelField'; import { RadioButton } from './RadioButton'; import { RadioGroup } from './RadioGroup'; import { RadioStyles } from './styles'; -import { IRadioProps } from './types'; +import { RdRadioProps } from './types'; export const Radio = ({ label: labelFieldProps, ...antdProps -}: IRadioProps) => { +}: RdRadioProps) => { return ( { +}: RdRadioButtonProps) => { return ( { +}: RdRadioButtonControlProps) => { const { field: { value, onChange, onBlur, ref }, fieldState: { invalid, error }, diff --git a/src/molecules/Radio/RadioControl.tsx b/src/molecules/Radio/RadioControl.tsx index 3e14ae6..2a5781c 100644 --- a/src/molecules/Radio/RadioControl.tsx +++ b/src/molecules/Radio/RadioControl.tsx @@ -7,7 +7,7 @@ import { LabelField } from '../LabelField'; import { RadioButtonControl } from './RadioButtonControl'; import { RadioGroupControl } from './RadioGroupControl'; import { RadioStyles } from './styles'; -import { IRadioControlProps } from './types'; +import { RdRadioControlProps } from './types'; export const RadioControl = ({ name, @@ -16,7 +16,7 @@ export const RadioControl = ({ label: labelFieldProps, ...antdProps -}: IRadioControlProps) => { +}: RdRadioControlProps) => { const { field: { value, onChange, onBlur, ref }, fieldState: { invalid, error }, diff --git a/src/molecules/Radio/RadioGroup.tsx b/src/molecules/Radio/RadioGroup.tsx index e2467e4..bc1be07 100644 --- a/src/molecules/Radio/RadioGroup.tsx +++ b/src/molecules/Radio/RadioGroup.tsx @@ -3,14 +3,14 @@ import ConditionalWrapper from '../../atomics/ConditionalWrapper'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { LabelField } from '../LabelField'; import { RadioGroupStyles } from './styles'; -import { IRadioGroupProps } from './types'; +import { RdRadioGroupProps } from './types'; export const RadioGroup = ({ label: labelFieldProps, axis = 'horizontal', ...antdProps -}: IRadioGroupProps) => { +}: RdRadioGroupProps) => { return ( { +}: RdRadioGroupControlProps) => { const { field: { value, onChange, onBlur, ref }, fieldState: { invalid, error }, diff --git a/src/molecules/Radio/types.ts b/src/molecules/Radio/types.ts index 96bdfea..7d53b2b 100644 --- a/src/molecules/Radio/types.ts +++ b/src/molecules/Radio/types.ts @@ -1,24 +1,24 @@ import { RadioGroupProps, RadioProps } from 'antd'; -import { IRegistryControlField, TAxis } from '../../models'; -import { ILabelFieldWrapperProps } from '../LabelField/types'; +import { RdRegistryControlField, TAxis } from '../../models'; +import { RdLabelFieldWrapperProps } from '../LabelField/types'; import { RadioButtonProps } from 'antd/es/radio/radioButton'; //#region Radio -export interface IRadioProps extends RadioProps, ILabelFieldWrapperProps {} +export interface RdRadioProps extends RadioProps, RdLabelFieldWrapperProps {} -export interface IRadioControlProps extends Omit, IRegistryControlField {} +export interface RdRadioControlProps extends Omit, RdRegistryControlField {} //#endregion Radio //#region RadioButton -export interface IRadioButtonProps extends RadioButtonProps, ILabelFieldWrapperProps {} +export interface RdRadioButtonProps extends RadioButtonProps, RdLabelFieldWrapperProps {} -export interface IRadioButtonControlProps - extends Omit, - IRegistryControlField {} +export interface RdRadioButtonControlProps + extends Omit, + RdRegistryControlField {} //#endregion RadioButton //#region RadioGroup -export interface IRadioGroupProps extends RadioGroupProps, ILabelFieldWrapperProps { +export interface RdRadioGroupProps extends RadioGroupProps, RdLabelFieldWrapperProps { /** * @description The axis of the radio options. * @default 'horizontal' @@ -26,7 +26,7 @@ export interface IRadioGroupProps extends RadioGroupProps, ILabelFieldWrapperPro axis?: TAxis; } -export interface IRadioGroupControlProps - extends Omit, - IRegistryControlField {} +export interface RdRadioGroupControlProps + extends Omit, + RdRegistryControlField {} //#endregion RadioGroup diff --git a/src/molecules/RangePicker/RangePicker.tsx b/src/molecules/RangePicker/RangePicker.tsx index 00e8e4b..23b24b2 100644 --- a/src/molecules/RangePicker/RangePicker.tsx +++ b/src/molecules/RangePicker/RangePicker.tsx @@ -4,7 +4,7 @@ import ConditionalWrapper from '../../atomics/ConditionalWrapper'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { LabelField } from '../LabelField'; import { RangePickerWrapper } from './styles'; -import { IRangePickerProps } from './types'; +import { RdRangePickerProps } from './types'; const { RangePicker: AntdRangePicker } = DatePicker; @@ -12,7 +12,7 @@ export const RangePicker = ({ label: labelFieldProps, ...antdProps -}: IRangePickerProps) => { +}: RdRangePickerProps) => { return ( diff --git a/src/molecules/RangePicker/RangePickerControl.tsx b/src/molecules/RangePicker/RangePickerControl.tsx index b3cbdb1..f5dc48d 100644 --- a/src/molecules/RangePicker/RangePickerControl.tsx +++ b/src/molecules/RangePicker/RangePickerControl.tsx @@ -6,7 +6,7 @@ import ConditionalWrapper from '../../atomics/ConditionalWrapper'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { LabelField } from '../LabelField'; import { RangePickerWrapper } from './styles'; -import { IRangePickerControlProps } from './types'; +import { RdRangePickerControlProps } from './types'; const { RangePicker: AntdRangePicker } = DatePicker; @@ -17,7 +17,7 @@ export const RangePickerControl = ({ label: labelFieldProps, ...antdProps -}: IRangePickerControlProps) => { +}: RdRangePickerControlProps) => { const [startName, endName] = names; const { diff --git a/src/molecules/RangePicker/types.ts b/src/molecules/RangePicker/types.ts index 4922f77..2f9ecb0 100644 --- a/src/molecules/RangePicker/types.ts +++ b/src/molecules/RangePicker/types.ts @@ -1,9 +1,9 @@ import { RangePickerProps } from 'antd/es/date-picker'; import { IRegistryRangePickerControlField } from '../../models'; -import { ILabelFieldWrapperProps } from '../LabelField/types'; +import { RdLabelFieldWrapperProps } from '../LabelField/types'; -export interface IRangePickerProps extends RangePickerProps, ILabelFieldWrapperProps {} +export interface RdRangePickerProps extends RangePickerProps, RdLabelFieldWrapperProps {} -export interface IRangePickerControlProps - extends Omit, +export interface RdRangePickerControlProps + extends Omit, IRegistryRangePickerControlField {} diff --git a/src/molecules/Row/Row.tsx b/src/molecules/Row/Row.tsx index 42b6f25..6595619 100644 --- a/src/molecules/Row/Row.tsx +++ b/src/molecules/Row/Row.tsx @@ -1,8 +1,8 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { RowStyles } from './styles'; -import { IRowProps } from './types'; +import { RdRowProps } from './types'; -export const Row = ({ ...antdProps }: IRowProps) => { +export const Row = ({ ...antdProps }: RdRowProps) => { return ( diff --git a/src/molecules/Row/types.ts b/src/molecules/Row/types.ts index b6ae120..6c5a235 100644 --- a/src/molecules/Row/types.ts +++ b/src/molecules/Row/types.ts @@ -1,3 +1,3 @@ import { RowProps } from 'antd'; -export interface IRowProps extends RowProps {} +export interface RdRowProps extends RowProps {} diff --git a/src/molecules/Select/Select.tsx b/src/molecules/Select/Select.tsx index 8a6281c..cfd96b5 100644 --- a/src/molecules/Select/Select.tsx +++ b/src/molecules/Select/Select.tsx @@ -3,13 +3,14 @@ import ConditionalWrapper from '../../atomics/ConditionalWrapper'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { LabelField } from '../LabelField'; import { SelectWrapper } from './styles'; -import { ISelectProps, variantSelectExtend } from './types'; +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: NonNullable ): variant is variantSelectExtend => { return ['outlined-transparent'].includes(variant); }; @@ -22,9 +23,10 @@ export const Select = ({ minWidth, isHideValueOnLoading = true, variant, + ref, ...antdProps -}: ISelectProps) => { +}: RdSelectProps & RefAttributes) => { let newSelectDesignToken: IRdComponentsConfig['Select'] = { ...config.componentToken?.Select, algorithm: true, diff --git a/src/molecules/Select/SelectControl.tsx b/src/molecules/Select/SelectControl.tsx index 7965c34..a3b4fba 100644 --- a/src/molecules/Select/SelectControl.tsx +++ b/src/molecules/Select/SelectControl.tsx @@ -5,7 +5,9 @@ import { TextError } from '../../atomics'; import ConditionalWrapper from '../../atomics/ConditionalWrapper'; import { LabelField } from '../LabelField'; import { SelectWrapper } from './styles'; -import { ISelectControlProps } from './types'; +import { RdSelectControlProps } from './types'; +import { RefAttributes } from 'react'; +import { Select } from './Select'; export const SelectControl = ({ name, @@ -15,7 +17,7 @@ export const SelectControl = ({ label: labelFieldProps, ...antdProps -}: ISelectControlProps) => { +}: RdSelectControlProps & RefAttributes) => { const { field: { value, onChange, onBlur, ref }, fieldState: { invalid, error }, @@ -33,7 +35,7 @@ export const SelectControl = ({ wrapper={LabelField} wrapperProps={labelFieldProps} > - , ILabelFieldWrapperProps { +type RdSelectPropsExtend = { /** * Width of the select component. */ @@ -29,6 +29,10 @@ export interface ISelectProps extends Omit, ILabelFieldW * @see SelectProps#variant */ variant?: SelectProps['variant'] | variantSelectExtend; -} +}; -export interface ISelectControlProps extends Omit, IRegistryControlField {} +export type RdSelectProps = Omit & + RdSelectPropsExtend & + RdLabelFieldWrapperProps; + +export type RdSelectControlProps = RdSelectProps & RdRegistryControlField; diff --git a/src/molecules/Skeleton/Skeleton.tsx b/src/molecules/Skeleton/Skeleton.tsx index bc35d54..8ec5bea 100644 --- a/src/molecules/Skeleton/Skeleton.tsx +++ b/src/molecules/Skeleton/Skeleton.tsx @@ -1,8 +1,8 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { SkeletonStyles } from './styles'; -import { ISkeletonProps } from './types'; +import { RdSkeletonProps } from './types'; -export const Skeleton = ({ ...antdProps }: ISkeletonProps) => { +export const Skeleton = ({ ...antdProps }: RdSkeletonProps) => { return ( diff --git a/src/molecules/Skeleton/types.ts b/src/molecules/Skeleton/types.ts index 4e72f95..25f2bd0 100644 --- a/src/molecules/Skeleton/types.ts +++ b/src/molecules/Skeleton/types.ts @@ -1,5 +1,5 @@ import { SkeletonProps } from 'antd'; -export interface ISkeletonProps extends SkeletonProps { +export interface RdSkeletonProps extends SkeletonProps { } diff --git a/src/molecules/Slider/Slider.tsx b/src/molecules/Slider/Slider.tsx index f30b450..c0fc23a 100644 --- a/src/molecules/Slider/Slider.tsx +++ b/src/molecules/Slider/Slider.tsx @@ -1,8 +1,8 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { SliderStyles } from './styles'; -import { SliderProps } from './types'; +import { RdSliderProps } from './types'; -export const Slider = ({ ...antdProps }: SliderProps) => { +export const Slider = ({ ...antdProps }: RdSliderProps) => { return ( diff --git a/src/molecules/Slider/types.ts b/src/molecules/Slider/types.ts index e8ef6a9..136eba8 100644 --- a/src/molecules/Slider/types.ts +++ b/src/molecules/Slider/types.ts @@ -4,4 +4,4 @@ import { SliderRangeProps } from 'antd/es/slider'; export interface ISliderSingleProps extends SliderSingleProps {} export interface ISliderRangeProps extends SliderRangeProps {} -export type SliderProps = ISliderSingleProps | ISliderRangeProps; +export type RdSliderProps = ISliderSingleProps | ISliderRangeProps; diff --git a/src/molecules/Spin/Spin.tsx b/src/molecules/Spin/Spin.tsx index 764115b..c28b5d2 100644 --- a/src/molecules/Spin/Spin.tsx +++ b/src/molecules/Spin/Spin.tsx @@ -1,8 +1,8 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { SpinStyles } from './styles'; -import { ISpinProps } from './types'; +import { RdSpinProps } from './types'; -export const Spin = ({ ...antdProps }: ISpinProps) => { +export const Spin = ({ ...antdProps }: RdSpinProps) => { return ( diff --git a/src/molecules/Spin/types.ts b/src/molecules/Spin/types.ts index b2f6db6..8e4fab0 100644 --- a/src/molecules/Spin/types.ts +++ b/src/molecules/Spin/types.ts @@ -1,5 +1,5 @@ import { SpinProps } from 'antd'; -export interface ISpinProps extends SpinProps { +export interface RdSpinProps extends SpinProps { } diff --git a/src/molecules/Switch/Switch.tsx b/src/molecules/Switch/Switch.tsx index 4fe09d1..e7de665 100644 --- a/src/molecules/Switch/Switch.tsx +++ b/src/molecules/Switch/Switch.tsx @@ -3,7 +3,7 @@ import ConditionalWrapper from '../../atomics/ConditionalWrapper'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { LabelField } from '../LabelField'; import { SwitchWrapper } from './styles'; -import { ISwitchProps } from './types'; +import { RdSwitchProps } from './types'; export const Switch = ({ label: labelFieldProps, @@ -11,7 +11,7 @@ export const Switch = ({ responseType = 'boolean', ...antdProps -}: ISwitchProps) => { +}: RdSwitchProps) => { return ( diff --git a/src/molecules/Switch/SwitchControl.tsx b/src/molecules/Switch/SwitchControl.tsx index 08c37e1..a2a5a07 100644 --- a/src/molecules/Switch/SwitchControl.tsx +++ b/src/molecules/Switch/SwitchControl.tsx @@ -5,7 +5,7 @@ import { TextError } from '../../atomics'; import ConditionalWrapper from '../../atomics/ConditionalWrapper'; import { LabelField } from '../LabelField'; import { SwitchWrapper } from './styles'; -import { ISwitchControlProps } from './types'; +import { RdSwitchControlProps } from './types'; export const SwitchControl = ({ name, @@ -15,7 +15,7 @@ export const SwitchControl = ({ label: labelFieldProps, ...antdProps -}: ISwitchControlProps) => { +}: RdSwitchControlProps) => { const { field: { value, onChange, ref }, fieldState: { invalid, error }, diff --git a/src/molecules/Switch/types.ts b/src/molecules/Switch/types.ts index 1e025ec..4e4467c 100644 --- a/src/molecules/Switch/types.ts +++ b/src/molecules/Switch/types.ts @@ -1,12 +1,12 @@ import { SwitchProps } from 'antd'; -import { IRegistryControlField } from '../../models'; -import { ILabelFieldWrapperProps } from '../LabelField/types'; +import { RdRegistryControlField } from '../../models'; +import { RdLabelFieldWrapperProps } from '../LabelField/types'; -export interface ISwitchProps extends SwitchProps, ILabelFieldWrapperProps { +export interface RdSwitchProps extends SwitchProps, RdLabelFieldWrapperProps { /** * The value type you want to get from the switch. Default is 'boolean'. */ responseType?: 'number' | 'boolean'; } -export interface ISwitchControlProps extends Omit, IRegistryControlField {} +export interface RdSwitchControlProps extends Omit, RdRegistryControlField {} diff --git a/src/molecules/Table/Table.tsx b/src/molecules/Table/Table.tsx index de2465f..41f46bb 100644 --- a/src/molecules/Table/Table.tsx +++ b/src/molecules/Table/Table.tsx @@ -2,12 +2,11 @@ import { Table as AntdTable, TableProps } from 'antd'; import { AnyObject } from 'antd/es/_util/type'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { TableWrapper } from './styles'; - -export type TTableProps = TableProps & {}; +import { RdTableProps } from './types'; export const Table = ({ ...antdProps -}: TTableProps) => { +}: RdTableProps) => { return ( diff --git a/src/molecules/Table/index.ts b/src/molecules/Table/index.ts index 5874937..8609b87 100644 --- a/src/molecules/Table/index.ts +++ b/src/molecules/Table/index.ts @@ -1 +1,2 @@ -export * from './Table'; \ No newline at end of file +export * from './Table'; +export * from './types'; \ No newline at end of file diff --git a/src/molecules/Table/types.ts b/src/molecules/Table/types.ts new file mode 100644 index 0000000..e97130b --- /dev/null +++ b/src/molecules/Table/types.ts @@ -0,0 +1,4 @@ +import { TableProps } from 'antd'; +import { AnyObject } from 'antd/es/_util/type'; + +export type RdTableProps = TableProps & {}; diff --git a/src/molecules/Tabs/Tabs.tsx b/src/molecules/Tabs/Tabs.tsx index f9b554a..259726a 100644 --- a/src/molecules/Tabs/Tabs.tsx +++ b/src/molecules/Tabs/Tabs.tsx @@ -1,8 +1,8 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { TabsStyles } from './styles'; -import { ITabsProps } from './types'; +import { RdTabsProps } from './types'; -export const Tabs = ({ ...antdProps }: ITabsProps) => { +export const Tabs = ({ ...antdProps }: RdTabsProps) => { return ( diff --git a/src/molecules/Tabs/types.ts b/src/molecules/Tabs/types.ts index 08fb561..7391eed 100644 --- a/src/molecules/Tabs/types.ts +++ b/src/molecules/Tabs/types.ts @@ -1,3 +1,3 @@ import { TabsProps } from 'antd'; -export interface ITabsProps extends TabsProps {} +export interface RdTabsProps extends TabsProps {} diff --git a/src/molecules/TextArea/TextArea.tsx b/src/molecules/TextArea/TextArea.tsx index 8f38681..19a4702 100644 --- a/src/molecules/TextArea/TextArea.tsx +++ b/src/molecules/TextArea/TextArea.tsx @@ -3,13 +3,13 @@ import ConditionalWrapper from '../../atomics/ConditionalWrapper'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; import { LabelField } from '../LabelField'; import { TextareaStyled, TextareaWrapper } from './styles'; -import { ITextareaProps } from './types'; +import { RdTextareaProps } from './types'; export const TextArea = ({ label: labelFieldProps, ...antdProps -}: ITextareaProps) => { +}: RdTextareaProps) => { return ( diff --git a/src/molecules/TextArea/TextAreaControl.tsx b/src/molecules/TextArea/TextAreaControl.tsx index c85fe34..ab151b4 100644 --- a/src/molecules/TextArea/TextAreaControl.tsx +++ b/src/molecules/TextArea/TextAreaControl.tsx @@ -5,7 +5,7 @@ import { TextError } from '../../atomics'; import ConditionalWrapper from '../../atomics/ConditionalWrapper'; import { LabelField } from '../LabelField'; import { TextareaStyled, TextareaWrapper } from './styles'; -import { ITextareaControlProps } from './types'; +import { RdTextareaControlProps } from './types'; export const TextareaControl = ({ name, @@ -14,7 +14,7 @@ export const TextareaControl = ({ label: labelFieldProps, ...antdProps -}: ITextareaControlProps) => { +}: RdTextareaControlProps) => { const { field: { value, onChange, onBlur, ref }, fieldState: { invalid, error }, @@ -23,6 +23,13 @@ export const TextareaControl = ({ control, }); + const handleChange = (event: React.ChangeEvent) => { + onChange(event.target.value); + + // Trigger the onChange event from antdProps + antdProps.onChange?.(event); + }; + return ( @@ -34,7 +41,7 @@ export const TextareaControl = ({ diff --git a/src/molecules/TextArea/helpers.ts b/src/molecules/TextArea/helpers.ts new file mode 100644 index 0000000..29a4930 --- /dev/null +++ b/src/molecules/TextArea/helpers.ts @@ -0,0 +1,13 @@ +/** + * @description Use this function to count the number of words in a string with count strategy props + * @param value - content want to count + * @returns numbers of words in a string + * @example + *