- Fix move textError into wrapper for InputControl. - Fix set default isColon is false. - Remove auto capitalize for Label and Title. - Add comment for LabelField. - Add customHook useNotification.

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};

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<IRdThemeConfig['token']>;
     componentToken: IRdThemeConfig['components'];
+
+    notification?: IRdNotificationConfig;
 }
 
 export const config: IConfig = {

src/molecules/Input/InputControl.tsx

@@ -39,8 +39,8 @@ export const InputControl = ({
                     onBlur={onBlur}
                     ref={ref}
                 />
+                {invalid && <TextError>{error?.message}</TextError>}
             </ConditionalWrapper>
-            {invalid && <TextError>{error?.message}</TextError>}
         </ConfigProviderDesign>
     );
 };

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,

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`

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;
 }
 

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<Partial<ArgsProps>, '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<Partial<ArgsProps>, '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<Partial<ArgsProps>, '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<Partial<ArgsProps>, '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<Partial<ArgsProps>, '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;

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';

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";

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<ArgsProps>;
+
+    /**
+     * @desc error notification config.
+     */
+    error?: Partial<ArgsProps>;
+
+    /**
+     * @desc warning notification config.
+     */
+    warning?: Partial<ArgsProps>;
+
+    /**
+     * @desc info notification config.
+     */
+    info?: Partial<ArgsProps>;
+
+    /**
+     * @desc open notification config.
+     */
+    open?: Partial<ArgsProps>;
+}