Add feature

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
     "cSpell.words": [
+        "Popconfirm",
         "Sider"
     ]
 }

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

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 {

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

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<typeof Flex>;
+//#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

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

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 <TypographyLinkStyles ref={ref} {...antdProps} />;
+    }
+);

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 <TypographyParagraphStyles ref={ref} {...antdProps} />;
+    }
+);

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 (
+            <TypographyTextStyles ref={ref} editable={editableCustom} size={size} {...antdProps} />
+        );
+    }
+);

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 <TypographyTitleStyles disableMargin={disableMargin} ref={ref} {...antdProps} />;
+    }
+);

src/atomics/Typography/index.tsx

@@ -0,0 +1,2 @@
+export * from './Typography';
+export * from './types';

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<RdTypographyTitleProps>(
+            ['disableMargin'] as (keyof RdTypographyTitleProps)[],
+            prop
+        ),
+})<RdTypographyTitleProps>`
+    ${({ 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)<Pick<RdTypographyTextProps, 'size'>>`
+    ${({ size }) => {
+        switch (size) {
+            case 'small':
+                return `
+                    font-size: ${getComponentOrGlobalToken('Typography', 'fontSizeSM')}px;
+                `;
+            // Case normal is the default size
+        }
+    }}
 `;
+
+export const TypographyParagraphStyles = styled(Typography.Paragraph)``;