Update feature

package.json

@@ -1,6 +1,6 @@
 {
     "name": "1byte-react-design",
-    "version": "1.4.12",
+    "version": "1.5.0",
     "main": "dist/index.js",
     "module": "dist/index.js",
     "types": "dist/index.d.ts",

src/molecules/Select/Select.tsx

@@ -3,7 +3,6 @@ import clsx from 'clsx';
 import React, { useMemo } from 'react';
 import { SelectStyledFunc } from './styles';
 import { RdSelectComponent, RdSelectProps } from './types';
-import { mergeToken } from 'antd/es/theme/internal';
 
 export const Select: RdSelectComponent = <
     ValueType = any,

src/molecules/Tree/DirectoryTree.tsx

@@ -0,0 +1,23 @@
+import { BasicDataNode, DataNode } from 'antd/es/tree';
+import type RcTree from 'rc-tree';
+import { useMemo } from 'react';
+import { DirectoryTreeStylesFunc } from './styles';
+import { RdDirectoryTreeComponent, RdDirectoryTreeProps } from './types';
+
+export const DirectoryTree: RdDirectoryTreeComponent = <
+    T extends BasicDataNode | DataNode = DataNode
+>(
+    props: React.PropsWithChildren<RdDirectoryTreeProps<T>> & React.RefAttributes<RcTree>
+) => {
+    const DirectoryTreeStyles = useMemo(
+        () =>
+            DirectoryTreeStylesFunc<T>() as (<T extends BasicDataNode | DataNode = DataNode>(
+                props: React.PropsWithChildren<RdDirectoryTreeProps<T>> &
+                    React.RefAttributes<RcTree>
+            ) => React.ReactElement) &
+                Pick<React.FC, 'displayName'>,
+        []
+    );
+
+    return <DirectoryTreeStyles {...props} />;
+};

src/molecules/Tree/Tree.tsx

@@ -0,0 +1,26 @@
+import { BasicDataNode, DataNode } from 'antd/es/tree';
+import type RcTree from 'rc-tree';
+import { useMemo } from 'react';
+import { DirectoryTree } from './DirectoryTree';
+import { TreeStylesFunc } from './styles';
+import { TreeNode } from './TreeNode';
+import { RdTreeCompoundedComponent, RdTreeProps } from './types';
+
+export const TreeInternal = <T extends BasicDataNode | DataNode = DataNode>({
+    ...antdProps
+}: RdTreeProps<T>) => {
+    const TreeStyles = useMemo(
+        () =>
+            TreeStylesFunc<T>() as <T extends BasicDataNode | DataNode = DataNode>(
+                props: React.PropsWithChildren<RdTreeProps<T>> & React.RefAttributes<RcTree>
+            ) => React.ReactElement,
+        []
+    );
+
+    return <TreeStyles<T> {...antdProps} />;
+};
+
+export const Tree = TreeInternal as RdTreeCompoundedComponent;
+
+Tree.TreeNode = TreeNode;
+Tree.DirectoryTree = DirectoryTree;

src/molecules/Tree/TreeNode.tsx

@@ -0,0 +1,6 @@
+import { TreeNodeStyles } from './styles';
+import { RdTreeNodeComponent } from './types';
+
+export const TreeNode: RdTreeNodeComponent = props => {
+    return <TreeNodeStyles {...props} />;
+};

src/molecules/Tree/index.tsx

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

src/molecules/Tree/styles.tsx

@@ -0,0 +1,16 @@
+import styled from '@emotion/styled';
+import { Tree } from 'antd';
+import { getExcludeForwardProps } from '../../utils/styles';
+import { RdDirectoryTreeProps, RdTreeNodeProps, RdTreeProps } from './types';
+import { BasicDataNode, DataNode } from 'antd/es/tree';
+
+export const TreeStylesFunc = <T extends BasicDataNode | DataNode = DataNode>() =>
+    styled(Tree<T>, {
+        shouldForwardProp: prop =>
+            getExcludeForwardProps<RdTreeProps>([] as (keyof RdTreeProps)[], prop),
+    })<RdTreeProps>``;
+
+export const TreeNodeStyles = styled(Tree.TreeNode)<RdTreeNodeProps>``;
+
+export const DirectoryTreeStylesFunc = <T extends BasicDataNode | DataNode = DataNode>() =>
+    styled(Tree.DirectoryTree<T>)<RdDirectoryTreeProps>``;

src/molecules/Tree/types.ts

@@ -0,0 +1,52 @@
+import { GetProps, Tree } from 'antd';
+import { ComponentToken as TreeComponentTokenAntd } from 'antd/es/card/style';
+import { BasicDataNode, DataNode } from 'antd/es/tree';
+import type RcTree from 'rc-tree';
+import { TreeNode } from 'rc-tree';
+import { DirectoryTree } from './DirectoryTree';
+import { TreeInternal } from './Tree';
+
+//#region Define Ant Design types
+type TreePropsAntd<T extends BasicDataNode | DataNode = DataNode> = GetProps<typeof Tree<T>>;
+type TreeNodePropsAntd = GetProps<typeof Tree.TreeNode>;
+type DirectoryTreePropsAntd<T extends BasicDataNode | DataNode = DataNode> = GetProps<
+    typeof Tree.DirectoryTree<T>
+>;
+//#endregion
+
+//#region Define extended component tokens
+type TreeComponentTokenExtend = {};
+//#endregion
+
+//#region Define extended types
+type TreePropsExtend = {};
+
+type TreeNodePropsExtend = {};
+type DirectoryTreePropsExtend = {};
+//#endregion
+
+//#region Export types
+export type RdTreeProps<T extends BasicDataNode | DataNode = DataNode> = TreePropsAntd<T> &
+    TreePropsExtend;
+export type RdTreeNodeProps = TreeNodePropsAntd & TreeNodePropsExtend;
+export type RdDirectoryTreeProps<T extends BasicDataNode | DataNode = DataNode> =
+    DirectoryTreePropsAntd<T> & DirectoryTreePropsExtend;
+
+export type RdTreeComponentToken = TreeComponentTokenAntd & TreeComponentTokenExtend;
+//#endregion
+
+//#region Define component types
+export type RdTreeInternalComponent = <T extends BasicDataNode | DataNode = DataNode>(
+    props: React.PropsWithChildren<RdTreeProps<T>> & React.RefAttributes<RcTree>
+) => React.ReactElement;
+export type RdTreeNodeComponent = React.FC<Readonly<RdTreeNodeProps>>;
+export type RdDirectoryTreeComponent = (<T extends BasicDataNode | DataNode = DataNode>(
+    props: React.PropsWithChildren<RdDirectoryTreeProps<T>> & React.RefAttributes<RcTree>
+) => React.ReactElement) &
+    Pick<React.FC, 'displayName'>;
+
+export type RdTreeCompoundedComponent = typeof TreeInternal & {
+    TreeNode: typeof TreeNode;
+    DirectoryTree: typeof DirectoryTree;
+};
+//#endregion

src/molecules/index.ts

@@ -42,4 +42,5 @@ export * from './Table';
 export * from './Tabs';
 export * from './Tag';
 export * from './Tooltip';
+export * from './Tree';
 export * from './Upload';

src/templates/DashboardTemplate/DashboardTemplate.tsx

@@ -1,12 +1,13 @@
 import { forwardRef } from 'react';
+import { Layout } from '../../molecules';
+import DashboardTemplateFooter from './Footer';
 import DashboardTemplateHeader from './Header';
 import DashboardTemplateSider from './Sider';
 import { DashboardTemplateContent, DashboardTemplateStyles } from './styles';
 import { RdDashboardTemplateComponent, RdDashboardTemplateCompoundedComponent } from './types';
-import { Layout } from '../../molecules';
 
 const DashboardTemplateInternal: RdDashboardTemplateComponent = forwardRef((props, ref) => {
-    const { headerProps: headerProps, siderProps: siderProps, ...restProps } = props;
+    const { headerProps, siderProps, footerProps, ...restProps } = props;
 
     return (
         <DashboardTemplateStyles ref={ref} {...restProps}>
@@ -15,7 +16,12 @@ const DashboardTemplateInternal: RdDashboardTemplateComponent = forwardRef((prop
             <Layout hasSider>
                 <DashboardTemplateSider {...siderProps} />
 
-                <DashboardTemplateContent>{props.children}</DashboardTemplateContent>
+                <Layout>
+                    <DashboardTemplateContent>{props.children}</DashboardTemplateContent>
+                    {footerProps !== false && (
+                        <DashboardTemplateFooter {...footerProps}></DashboardTemplateFooter>
+                    )}
+                </Layout>
             </Layout>
         </DashboardTemplateStyles>
     );
@@ -25,3 +31,4 @@ export const DashboardTemplate =
     DashboardTemplateInternal as RdDashboardTemplateCompoundedComponent;
 DashboardTemplate.Header = DashboardTemplateHeader;
 DashboardTemplate.Sider = DashboardTemplateSider;
+DashboardTemplate.Footer = DashboardTemplateFooter;

src/templates/DashboardTemplate/Footer/index.tsx

@@ -0,0 +1,20 @@
+import { forwardRef } from 'react';
+import { DashboardTemplateFooterStyles } from './styles';
+import { RdDashboardTemplateFooterComponent } from './types';
+
+export const DashboardTemplateFooter: RdDashboardTemplateFooterComponent = forwardRef(
+    (props, ref) => {
+        const { children, render, ...restProps } = props;
+
+        if (render) {
+            return render({ children, ...restProps });
+        }
+
+        return (
+            <DashboardTemplateFooterStyles ref={ref} {...restProps}>
+                {children}
+            </DashboardTemplateFooterStyles>
+        );
+    }
+);
+export default DashboardTemplateFooter;

src/templates/DashboardTemplate/Footer/styles.tsx

@@ -0,0 +1,21 @@
+import styled from '@emotion/styled';
+import { Layout } from 'antd';
+import { getComponentOrGlobalToken, getExcludeForwardProps } from '../../../utils';
+import { RdDashboardTemplateFooterProps } from './types';
+import { css } from '@emotion/react';
+
+export const DashboardTemplateFooterStyles = styled(Layout.Footer, {
+    label: 'rd-dashboard-template-header',
+    shouldForwardProp: prop =>
+        getExcludeForwardProps<Omit<RdDashboardTemplateFooterProps, 'render'>>(
+            [] as (keyof Omit<RdDashboardTemplateFooterProps, 'render'>)[],
+            prop
+        ),
+})<Omit<RdDashboardTemplateFooterProps, 'render'>>`
+    ${() => {
+        return css`
+            border-top: 1px solid
+                ${getComponentOrGlobalToken('DashboardTemplate', 'colorBorderSecondary')};
+        `;
+    }}
+`;

src/templates/DashboardTemplate/Footer/types.ts

@@ -0,0 +1,16 @@
+import { RdFooterProps, RdLayoutFooterRef } from '../../../molecules';
+
+//#region Define extended types
+export type DashboardTemplateFooterPropsExtend = {
+    fixedOnScroll?: boolean;
+
+    render?: (props: Omit<RdDashboardTemplateFooterProps, 'render'>) => React.ReactNode;
+};
+//#endregion
+
+export type RdDashboardTemplateFooterProps = RdFooterProps & DashboardTemplateFooterPropsExtend;
+export type RdDashboardTemplateFooterRef = RdLayoutFooterRef & {};
+
+export type RdDashboardTemplateFooterComponent = React.ForwardRefExoticComponent<
+    RdDashboardTemplateFooterProps & RdDashboardTemplateFooterRef
+>;

src/templates/DashboardTemplate/Sider/index.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, useState } from 'react';
+import { getComponentToken } from '../../../utils';
 import { DashboardTemplateSiderStyles } from './styles';
 import { RdDashboardTemplateSiderComponent } from './types';
-import { getComponentOrGlobalToken, getComponentToken } from '../../../utils';
 
 export const DashboardTemplateSider: RdDashboardTemplateSiderComponent = forwardRef(
     (props, ref) => {

src/templates/DashboardTemplate/styles.tsx

@@ -11,7 +11,7 @@ export const DashboardTemplateStyles = styled(Layout, {
     `}
 `;
 
-export const DashboardTemplateContent = styled(Layout, {
+export const DashboardTemplateContent = styled(Layout.Content, {
     label: 'rd-dashboard-template-content',
 })`
     ${() => css`

src/templates/DashboardTemplate/types.ts

@@ -1,4 +1,5 @@
 import { RdLayoutProps, RdLayoutRef } from '../../molecules';
+import { RdDashboardTemplateFooterComponent, RdDashboardTemplateFooterProps } from './Footer/types';
 import { RdDashboardTemplateHeaderComponent, RdDashboardTemplateHeaderProps } from './Header/types';
 import { RdDashboardTemplateSiderComponent, RdDashboardTemplateSiderProps } from './Sider/types';
 
@@ -14,6 +15,7 @@ type DashboardTemplateComponentTokenExtend = {
 type DashboardTemplatePropsExtend = {
     headerProps?: RdDashboardTemplateHeaderProps;
     siderProps?: RdDashboardTemplateSiderProps;
+    footerProps?: RdDashboardTemplateFooterProps | false;
     test?: boolean;
 };
 
@@ -36,6 +38,7 @@ export type RdDashboardTemplateComponent = React.ForwardRefExoticComponent<
 export type RdDashboardTemplateCompoundedComponent = RdDashboardTemplateComponent & {
     Header: RdDashboardTemplateHeaderComponent;
     Sider: RdDashboardTemplateSiderComponent;
+    Footer: RdDashboardTemplateFooterComponent;
     // Content: RdLayoutContentComponent;
     // Sider: RdLayoutSiderComponent;
 };