From 84c6c8c696032f44986701c1292ff6c141b80bda Mon Sep 17 00:00:00 2001 From: Kenneth Date: Wed, 6 Nov 2024 09:16:40 +0700 Subject: [PATCH 1/5] fix: move textError into wrapper --- src/molecules/Input/InputControl.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/molecules/Input/InputControl.tsx b/src/molecules/Input/InputControl.tsx index da69829..8105c9a 100644 --- a/src/molecules/Input/InputControl.tsx +++ b/src/molecules/Input/InputControl.tsx @@ -39,8 +39,8 @@ export const InputControl = ({ onBlur={onBlur} ref={ref} /> + {invalid && {error?.message}} - {invalid && {error?.message}} ); }; From 1620dd64fcb56aefc9a023d57e1c23e5470246ae Mon Sep 17 00:00:00 2001 From: Kenneth Date: Wed, 6 Nov 2024 09:17:10 +0700 Subject: [PATCH 2/5] fix: set default isColon is false --- src/molecules/LabelField/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/molecules/LabelField/index.tsx b/src/molecules/LabelField/index.tsx index cc52bd1..1e4f97d 100644 --- a/src/molecules/LabelField/index.tsx +++ b/src/molecules/LabelField/index.tsx @@ -10,7 +10,7 @@ export const LabelField = (props: ILabelFieldProps & PropsWithChildren) => { axis = 'vertical', description, htmlFor, - isColon = true, + isColon = false, required, widthControl, children, From 4ec164a759e63e5f2386bf0edc37c71e1fa83376 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Wed, 6 Nov 2024 09:17:45 +0700 Subject: [PATCH 3/5] fix: remove auto capitalize for Label and Title --- src/atomics/Typography/styles.tsx | 1 - src/molecules/LabelField/styles.tsx | 14 ++------------ 2 files changed, 2 insertions(+), 13 deletions(-) diff --git a/src/atomics/Typography/styles.tsx b/src/atomics/Typography/styles.tsx index 7327e6f..afb9c13 100644 --- a/src/atomics/Typography/styles.tsx +++ b/src/atomics/Typography/styles.tsx @@ -22,7 +22,6 @@ export const H6Wrapper = styled.h6` export const TitleWrapper = styled.span` font-size: ${config.designToken.fontSizeLG}px; font-weight: ${config.designToken.fontWeightStrong}; - text-transform: capitalize; `; export const TextWrapper = styled.span` font-size: ${config.designToken.fontSize}; diff --git a/src/molecules/LabelField/styles.tsx b/src/molecules/LabelField/styles.tsx index 132bd2d..4a0baeb 100644 --- a/src/molecules/LabelField/styles.tsx +++ b/src/molecules/LabelField/styles.tsx @@ -1,24 +1,14 @@ -import { css } from '@emotion/react'; import styled from '@emotion/styled'; -import { config } from '../..'; import { Flex } from 'antd'; +import { config } from '../..'; export const LabelFieldWrapper = styled(Flex)``; -export const Label = styled.label<{ isNotCapitalize?: boolean }>` +export const Label = styled.label` color: ${config.designToken.colorText}; sup { color: ${config.designToken.colorError}; } - - ${({ isNotCapitalize }) => - isNotCapitalize - ? css` - text-transform: none; - ` - : css` - text-transform: capitalize; - `} `; export const LabelDescription = styled.label` From 5498d85303cfa181f4f669483db83ae2e2fabfa8 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Wed, 6 Nov 2024 09:18:19 +0700 Subject: [PATCH 4/5] docs: add comment for LabelField --- src/molecules/LabelField/types.ts | 31 ++++++++++++++++++++++++------- 1 file changed, 24 insertions(+), 7 deletions(-) diff --git a/src/molecules/LabelField/types.ts b/src/molecules/LabelField/types.ts index 3bcfd59..c46651a 100644 --- a/src/molecules/LabelField/types.ts +++ b/src/molecules/LabelField/types.ts @@ -1,19 +1,36 @@ import { TAxis } from '../../models'; export interface ILabelFieldProps { - /** Text label. */ + /** + * @description Text label to be displayed. + */ text?: string; - /** Label axis used to determine whether the label is displayed vertically or horizontally. */ + /** + * @description Label axis used to determine whether the label is displayed vertically or horizontally. + * @default 'vertical' + */ axis?: TAxis; - /** Description for the label. */ + /** + * @description Description for the label. + */ description?: string; - /** Indicates if a colon should be appended to the label. */ + /** + * @description Indicates if a colon should be appended to the label. + * @default false + */ isColon?: boolean; - /** Indicates if the field is required. */ + /** + * @description Indicates if the field is required. + * @default false + */ required?: boolean; - /** Specifies the width of the field. */ + /** + * @description Specifies the width of the field. + */ widthControl?: string | number; - /** Specifies the id of the element the label is bound to. */ + /** + * @description Specifies the id of the element the label is bound to. + */ htmlFor?: string; } From b05116411dbae29caf0254ab119225602e05fbc3 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Wed, 6 Nov 2024 09:19:02 +0700 Subject: [PATCH 5/5] feature: add customHook useNotification --- src/index.tsx | 4 +- src/organisms/App/App.tsx | 90 +++++++++++++++++++++++++++++++--- src/organisms/App/constants.ts | 5 ++ src/organisms/App/index.ts | 2 +- src/organisms/App/types.ts | 32 ++++++++++-- 5 files changed, 120 insertions(+), 13 deletions(-) create mode 100644 src/organisms/App/constants.ts diff --git a/src/index.tsx b/src/index.tsx index 697a6ed..880ee97 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,9 +1,11 @@ import { theme } from 'antd'; -import { IRdThemeConfig, rdTheme } from './organisms'; +import { IRdNotificationConfig, IRdThemeConfig } from './organisms'; export interface IConfig { designToken: NonNullable; componentToken: IRdThemeConfig['components']; + + notification?: IRdNotificationConfig; } export const config: IConfig = { diff --git a/src/organisms/App/App.tsx b/src/organisms/App/App.tsx index 4f3e378..075e9d8 100644 --- a/src/organisms/App/App.tsx +++ b/src/organisms/App/App.tsx @@ -1,7 +1,15 @@ +import { Global } from '@emotion/react'; import { App as AppAntd, AppProps } from 'antd'; +import { ArgsProps } from 'antd/es/notification'; +import { config } from '../..'; import { ConfigProviderDesign } from '../../ConfigProviderDesign'; -import { useAppProps } from 'antd/es/app/context'; -import { Global } from '@emotion/react'; +import { + MESSAGE_ERROR_DEFAULT, + MESSAGE_INFO_DEFAULT, + MESSAGE_OPEN_DEFAULT, + MESSAGE_SUCCESS_DEFAULT, + MESSAGE_WARNING_DEFAULT, +} from './constants'; import NotificationStyles from './NotificationStyles'; interface IAppProps extends AppProps {} @@ -28,21 +36,87 @@ const App = (props: IAppProps) => { ); }; +App.useApp = AppAntd.useApp; + export const useNotification = () => { - const { notification } = AppAntd.useApp(); - return notification; + const { notification } = App.useApp(); + + /** + * @desc Custom success notification. + */ + const success = ( + description: ArgsProps['description'], + args?: Omit, 'description'> + ) => { + const message: ArgsProps['message'] = + config?.notification?.success?.message || MESSAGE_SUCCESS_DEFAULT; + + notification.success({ ...config?.notification?.success, ...args, message, description }); + }; + + /** + * @desc Custom error notification. + */ + const error = ( + description: ArgsProps['description'], + args?: Omit, 'description'> + ) => { + const message: ArgsProps['message'] = + config?.notification?.error?.message || MESSAGE_ERROR_DEFAULT; + + notification.error({ ...config?.notification?.error, ...args, message, description }); + }; + + /** + * @desc Custom warning notification. + */ + const warning = ( + description: ArgsProps['description'], + args?: Omit, 'description'> + ) => { + const message: ArgsProps['message'] = + config?.notification?.warning?.message || MESSAGE_WARNING_DEFAULT; + + notification.warning({ ...config?.notification?.warning, ...args, message, description }); + }; + + /** + * @desc Custom info notification. + */ + const info = ( + description: ArgsProps['description'], + args?: Omit, 'description'> + ) => { + const message: ArgsProps['message'] = + config?.notification?.info?.message || MESSAGE_INFO_DEFAULT; + + notification.info({ ...config?.notification?.info, ...args, message, description }); + }; + + /** + * @desc Custom open notification. + */ + const open = ( + description: ArgsProps['description'], + args?: Omit, 'description'> + ) => { + const message: ArgsProps['message'] = + config?.notification?.error?.message || MESSAGE_OPEN_DEFAULT; + + notification.open({ ...config?.notification?.open, ...args, message, description }); + }; + + return { ...notification, success, error, warning, info, open }; }; export const useMessage = () => { - const { message } = AppAntd.useApp(); + const { message } = App.useApp(); return message; }; export const useModal = () => { - const { modal } = AppAntd.useApp(); + const { modal } = App.useApp(); return modal; }; -App.useApp = AppAntd.useApp; - export default App; diff --git a/src/organisms/App/constants.ts b/src/organisms/App/constants.ts new file mode 100644 index 0000000..d446531 --- /dev/null +++ b/src/organisms/App/constants.ts @@ -0,0 +1,5 @@ +export const MESSAGE_SUCCESS_DEFAULT = 'Success'; +export const MESSAGE_ERROR_DEFAULT = 'Error'; +export const MESSAGE_WARNING_DEFAULT = 'Warning'; +export const MESSAGE_INFO_DEFAULT = 'Info'; +export const MESSAGE_OPEN_DEFAULT = 'Open'; \ No newline at end of file diff --git a/src/organisms/App/index.ts b/src/organisms/App/index.ts index c86b71b..4b59282 100644 --- a/src/organisms/App/index.ts +++ b/src/organisms/App/index.ts @@ -1,3 +1,3 @@ -export { default as App } from './App'; +export { default as App, useNotification, useMessage, useModal } from './App'; export * from "./types"; export * from "./theme"; \ No newline at end of file diff --git a/src/organisms/App/types.ts b/src/organisms/App/types.ts index 6994f79..623946a 100644 --- a/src/organisms/App/types.ts +++ b/src/organisms/App/types.ts @@ -1,4 +1,5 @@ import { ThemeConfig } from 'antd'; +import { ArgsProps } from 'antd/es/notification'; import { MappingAlgorithm, OverrideToken } from 'antd/es/theme/interface'; import { AliasToken } from 'antd/es/theme/internal'; @@ -73,9 +74,7 @@ export type ComponentsConfig = { }; }; -export interface IRdComponentsConfig extends ComponentsConfig { - -} +export interface IRdComponentsConfig extends ComponentsConfig {} export interface IRdThemeConfig extends ThemeConfig { /** @@ -90,3 +89,30 @@ export interface IRdThemeConfig extends ThemeConfig { */ components?: IRdComponentsConfig; } + +export interface IRdNotificationConfig { + /** + * @desc success notification config. + */ + success?: Partial; + + /** + * @desc error notification config. + */ + error?: Partial; + + /** + * @desc warning notification config. + */ + warning?: Partial; + + /** + * @desc info notification config. + */ + info?: Partial; + + /** + * @desc open notification config. + */ + open?: Partial; +}