Feature/append

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",
@@ -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",

src/atomics/Typography/Text.tsx

@@ -1,8 +1,8 @@
 import { ConfigProviderDesign } from '../../ConfigProviderDesign';
 import { TextWrapper } from './styles';
-import { ITextProps } from './types';
+import { RdTextProps } from './types';
 
-export const Text = (props: ITextProps) => {
+export const Text = (props: RdTextProps) => {
     const { children } = props;
     return (
         <ConfigProviderDesign>

src/atomics/Typography/types.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ReactElement, ReactHTMLElement } from 'react';
 
 export interface IBaseHProps extends PropsWithChildren {}
 
@@ -13,5 +13,36 @@ export interface IH4Props extends IBaseHProps {}
 export interface IH5Props extends IBaseHProps {}
 export interface IH6Props extends IBaseHProps {}
 export interface ITitleProps extends IBaseHProps {}
-export interface ITextProps extends IBaseHProps {}
+
+export type RdTextProps = IBaseHProps & {
+    /**
+     * Font weight for the text.
+     * Can be a number (100-900) or a string representing font weight name.
+     * Examples: "thin", "light", "bold", etc.
+     */
+    weight?:
+        | 100
+        | 200
+        | 300
+        | 400
+        | 500
+        | 600
+        | 700
+        | 800
+        | 900
+        | 'thin'
+        | 'extra-light'
+        | 'ultra-light'
+        | 'light'
+        | 'normal'
+        | 'regular'
+        | 'medium'
+        | 'semi-bold'
+        | 'demi-bold'
+        | 'bold'
+        | 'extra-bold'
+        | 'ultra-bold'
+        | 'black'
+        | 'heavy';
+};
 export interface IDescriptionProps extends IBaseHProps {}

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<any>; // 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];
 }

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 (
         <ConfigProviderDesign>
-            <AvatarStyles {...antdProps} />
+            <AvatarStyles {...props} />
         </ConfigProviderDesign>
     );
 };

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;

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<HTMLDivElement> {
-    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;

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<HTMLDivElement> & RdBlurPropsExtend;

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 (
         <ConfigProviderDesign>
             <BreadcrumbStyles {...antdProps} />

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;

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<IButtonProps['color']>
+    color: NonNullable<RdButtonProps['color']>
 ): 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,

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<ButtonProps, 'color' | 'variant'> {
+export interface RdButtonProps extends Omit<ButtonProps, 'color'> {
     /**
      * @description The width of the button.
      */
@@ -21,4 +21,10 @@ export interface IButtonProps extends Omit<ButtonProps, 'color' | 'variant'> {
      * @see ButtonProps#color
      */
     color?: ButtonProps['color'] | colorButtonExtend;
+
+    /**
+     * @description Link in react-router-dom.
+     * @see Link
+     */
+    to?: string;
 }

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 (
         <ConfigProviderDesign>
             <CardStyles {...antdProps} />

src/molecules/Card/styles.tsx

@@ -1,4 +1,65 @@
+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)``;
+export const CardStyles = styled(Card)<RdCardProps>`
+    /* 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;
+        }
+    }}
+`;

src/molecules/Card/types.ts

@@ -1,3 +1,16 @@
 import { CardProps } from 'antd';
 
-export interface ICardProps extends CardProps {}
+type RdCardPropsExtend = {
+    /**
+     * @description
+     * Defines the visual style of the entire card component.
+     *
+     * - `"default"`: The card will use the standard styling provided by Ant Design.
+     * - `"compact"`: Applies a specialized style to the card, including a narrower header and a layout resembling compact designs such as Google Forms.
+     *
+     * This property allows you to customize the appearance of the card to match specific design requirements.
+     */
+    variant?: 'default' | 'compact';
+};
+
+export type RdCardProps = CardProps & RdCardPropsExtend;

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 (
         <ConfigProviderDesign>
             <ConditionalWrapper

src/molecules/Checkbox/CheckboxControl.tsx

@@ -5,7 +5,7 @@ import ConditionalWrapper from '../../atomics/ConditionalWrapper';
 import { LabelField } from '../LabelField';
 import { CheckboxGroupControl } from './CheckboxGroupControl';
 import { CheckboxStyles } from './styles';
-import { ICheckboxControlProps } from './types';
+import { RdCheckboxControlProps } from './types';
 
 export const CheckboxControl = ({
     name,
@@ -14,7 +14,7 @@ export const CheckboxControl = ({
     label: labelFieldProps,
 
     ...antdProps
-}: ICheckboxControlProps) => {
+}: RdCheckboxControlProps) => {
     const {
         field: { value, onChange, ref },
         fieldState: { invalid, error },

src/molecules/Checkbox/CheckboxGroup.tsx

@@ -2,14 +2,14 @@ import ConditionalWrapper from '../../atomics/ConditionalWrapper';
 import { ConfigProviderDesign } from '../../ConfigProviderDesign';
 import { LabelField } from '../LabelField';
 import { CheckboxGroupStyles } from './styles';
-import { ICheckboxGroupProps } from './types';
+import { RdCheckboxGroupProps } from './types';
 
 export const CheckboxGroup = ({
     label: labelFieldProps,
     axis = 'horizontal',
 
     ...antdProps
-}: ICheckboxGroupProps) => {
+}: RdCheckboxGroupProps) => {
     return (
         <ConfigProviderDesign>
             <ConditionalWrapper

src/molecules/Checkbox/CheckboxGroupControl.tsx

@@ -4,7 +4,7 @@ import { ConfigProviderDesign } from '../../ConfigProviderDesign';
 import { TextError } from '../../atomics';
 import ConditionalWrapper from '../../atomics/ConditionalWrapper';
 import { LabelField } from '../LabelField';
-import { ICheckboxGroupControlProps } from './types';
+import { RdCheckboxGroupControlProps } from './types';
 import { CheckboxGroupStyles } from './styles';
 
 export const CheckboxGroupControl = ({
@@ -16,7 +16,7 @@ export const CheckboxGroupControl = ({
     axis = 'horizontal',
 
     ...antdProps
-}: ICheckboxGroupControlProps) => {
+}: RdCheckboxGroupControlProps) => {
     const {
         field: { value, onChange, ref },
         fieldState: { invalid, error },

src/molecules/Checkbox/index.ts

@@ -1,2 +1,3 @@
 export * from './Checkbox';
-export * from './CheckboxControl';
+export * from './CheckboxControl';
+export type * from './types';