Add more components

CHANGELOG.md

@@ -5,6 +5,17 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.8.0]
+
+### Added
+
+-   Added chart to `SummaryCard` component.
+-   Added `Statistic` component.
+-   Added `Grid.useBreakpoint()` hooks.
+-   Added  `sidebarMode` for sidebarProps for `DashboardTemplate`.
+-   Support responsive for `DashboardTemplate`.
+-   Added `LineChart` component.
+
 ## [1.7.0]
 
 ### Added

package.json

@@ -1,6 +1,6 @@
 {
     "name": "1byte-react-design",
-    "version": "1.7.1",
+    "version": "1.8.0",
     "description": "A simple React UI library",
     "main": "dist/index.js",
     "module": "dist/index.js",

src/molecules/Grid/Grid.tsx

@@ -0,0 +1,6 @@
+import { RdGridComponent } from './types';
+import { useBreakpoint } from './useBreakpoint';
+
+export const Grid: RdGridComponent = {
+    useBreakpoint: useBreakpoint,
+};

src/molecules/Grid/index.tsx

@@ -1,3 +1,4 @@
 export * from './Col';
+export * from './Grid';
 export * from './Row';
 export * from './types';

src/molecules/Grid/types.ts

@@ -1,9 +1,10 @@
-import { Col, GetProps, Row } from 'antd';
+import { Col, GetProps, Grid, Row } from 'antd';
 import { ComponentToken as GridComponentTokenAntd } from 'antd/es/grid/style';
 
 //#region Define Ant Design types
 type ColPropsAntd = GetProps<typeof Col>;
 type RowPropsAntd = GetProps<typeof Row>;
+type GridPropsAntd = GetProps<typeof Grid>;
 //#endregion
 
 //#region Define extended component tokens
@@ -13,11 +14,13 @@ type GridComponentTokenExtend = {};
 //#region Define extended types
 type ColPropsExtend = {};
 type RowPropsExtend = {};
+type GridPropsExtend = {};
 //#endregion
 
 //#region Export types
 export type RdColProps = ColPropsAntd & ColPropsExtend;
 export type RdRowProps = RowPropsAntd & RowPropsExtend;
+export type RdGridProps = GridPropsAntd & GridPropsExtend;
 
 export type RdGridComponentToken = GridComponentTokenAntd & GridComponentTokenExtend;
 //#endregion
@@ -29,4 +32,5 @@ export type RdColComponent = React.ForwardRefExoticComponent<
 export type RdRowComponent = React.ForwardRefExoticComponent<
     RdRowProps & React.RefAttributes<HTMLDivElement>
 >;
+export type RdGridComponent = RdGridProps;
 //#endregion

src/molecules/Grid/useBreakpoint.ts

@@ -0,0 +1,3 @@
+import { Grid } from 'antd';
+
+export const useBreakpoint = Grid.useBreakpoint;

src/molecules/LineChart/index.tsx

@@ -0,0 +1,42 @@
+import { LineConfig } from '@ant-design/plots';
+import { formatDate } from '../../utils/datetime';
+import { Empty } from '../Empty';
+import { LineChartWrapper } from './styles';
+import { LineChartProps } from './types';
+
+export const LineChart: React.FC<LineChartProps> = props => {
+    const { data, valueLabel = 'value' } = props;
+
+    if (!data?.length) return <Empty />;
+
+    const lineProps: LineConfig = {
+        data,
+        xField: 'date' as keyof LineChartProps['data'][0],
+        yField: 'value' as keyof LineChartProps['data'][0],
+        point: {
+            shapeField: 'square',
+            sizeField: 4,
+        },
+        interaction: {
+            tooltip: {
+                marker: false,
+            },
+        },
+        style: {
+            lineWidth: 2,
+        },
+        tooltip: {
+            title: ({ date }) => {
+                return formatDate(date);
+            },
+            items: [
+                {
+                    channel: 'y',
+                    name: valueLabel,
+                },
+            ],
+        },
+    };
+
+    return <LineChartWrapper {...lineProps} />;
+};

src/molecules/LineChart/styles.ts

@@ -0,0 +1,4 @@
+import { Line } from '@ant-design/plots';
+import styled from '@emotion/styled'
+
+export const LineChartWrapper = styled(Line)``;

src/molecules/LineChart/types.ts

@@ -0,0 +1,14 @@
+import { Line } from '@ant-design/plots/es/core/plots/line';
+import { GetProps } from 'antd';
+
+export interface LineDataItem {
+    date: Date | string;
+    value: number;
+}
+
+type LineChartPropsAntd = GetProps<Line>;
+
+export interface LineChartProps extends Partial<LineChartPropsAntd> {
+    data: LineDataItem[];
+    valueLabel?: string;
+}

src/molecules/Statistic/Statistic.tsx

@@ -0,0 +1,13 @@
+import { forwardRef } from 'react';
+import { StatisticStyled } from './styles';
+import { Timer } from './Timer';
+import { RdStatisticComponent, RdStatisticCompoundedComponent } from './types';
+
+export const InternalStatistic: RdStatisticComponent = forwardRef((props, ref) => {
+    return <StatisticStyled {...props} ref={ref} />;
+});
+
+export const Statistic: RdStatisticCompoundedComponent =
+    InternalStatistic as RdStatisticCompoundedComponent;
+
+Statistic.Timer = Timer;

src/molecules/Statistic/Timer.tsx

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

src/molecules/Statistic/index.tsx

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

src/molecules/Statistic/styles.tsx

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+import { Statistic } from 'antd';
+import { RdStatisticProps } from './types';
+
+export const StatisticStyled = styled(Statistic as React.FC<RdStatisticProps>)``;
+
+export const TimerStyled = styled(Statistic.Timer)``;

src/molecules/Statistic/types.ts

@@ -0,0 +1,71 @@
+import { Statistic, GetProps } from 'antd';
+import { ComponentToken as StatisticComponentTokenAntd } from 'antd/es/drawer/style';
+import { StatisticRef } from 'antd/es/statistic/Statistic';
+import { ComponentProps } from 'react';
+
+//#region Define Ant Design types
+/**
+ * 📝 Explanation:
+ *
+ * Normally, when styling an Ant Design component, we can simply write:
+ *    type StatisticPropsAntd = GetProps<typeof Statistic>;
+ *
+ * But Statistic is a special case:
+ * - Ant Design does NOT export a public interface for Statistic props (it relies on an internal type `StatisticReactProps`).
+ * - Because of this, when exporting styled(Statistic), TypeScript tries to expose `StatisticReactProps` and throws:
+ *     ts(4023): "Exported variable '...' has or is using name 'StatisticReactProps' but cannot be named".
+ *
+ * 🚑 Workaround:
+ * - Instead of using `GetProps<typeof Statistic>`, we clone the props using a mapped type to create a "public" type:
+ *   StatisticPublicProps = { [K in keyof ComponentProps<typeof Statistic>]: ComponentProps<typeof Statistic>[K] }
+ * - Then we wrap it in a `StatisticBase` component so that styled() only sees our public type,
+ *   avoiding any reference to the internal Ant Design type.
+ *
+ * 🔮 Note:
+ * - If Ant Design exports a proper `StatisticProps` type in the future, we can remove this workaround
+ *   and go back to the shorter version:
+ *     type StatisticPropsAntd = GetProps<typeof Statistic>;
+ */
+type StatisticPropsAntd = {
+    [K in keyof ComponentProps<typeof Statistic>]: ComponentProps<typeof Statistic>[K];
+};
+type TimerPropsAntd = GetProps<typeof Statistic.Timer>;
+
+type StatisticRefAntd = StatisticRef;
+
+//#endregion
+
+//#region Define extended component tokens
+type StatisticComponentTokenExtend = {};
+//#endregion
+
+//#region Define extended types
+type StatisticPropsExtend = {};
+type TimerPropsExtend = {};
+
+type StatisticRefExtend = {};
+//#endregion
+
+//#region Export types
+export type RdStatisticProps = StatisticPropsAntd & StatisticPropsExtend;
+export type RdStatisticTimerProps = TimerPropsAntd & TimerPropsExtend;
+export type RdStatisticRef = StatisticRefAntd & StatisticRefExtend;
+export type RdStatisticComponentToken = StatisticComponentTokenAntd & StatisticComponentTokenExtend;
+//#endregion
+
+//#region Define component types
+// export type RdStatisticComponent = React.FC<RdStatisticProps>;
+export type RdStatisticComponent = React.ForwardRefExoticComponent<
+    React.AriaAttributes & {
+        [key: `data-${string}`]: unknown;
+    } & Pick<React.HTMLAttributes<HTMLDivElement>, 'role'> &
+        RdStatisticProps &
+        React.RefAttributes<RdStatisticRef>
+>;
+
+export type RdStatisticTimerComponent = React.FC<RdStatisticTimerProps>;
+
+export type RdStatisticCompoundedComponent = RdStatisticComponent & {
+    Timer: RdStatisticTimerComponent;
+};
+//#endregion

src/molecules/index.ts

@@ -37,6 +37,7 @@ export * from './Skeleton';
 export * from './Slider';
 export * from './Space';
 export * from './Spin';
+export * from './Statistic';
 export * from './Steps';
 export * from './Switch';
 export * from './Table';

src/organisms/SummaryCard/styles.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
-import Statistic from 'antd/es/statistic/Statistic';
 import { Card } from '../../molecules';
+import { Statistic } from '../../molecules/Statistic';
 
 export const SummaryCardWrapper = styled(Card)``;
 

src/templates/DashboardTemplate/DashboardTemplate.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import { forwardRef, useState } from 'react';
 import { Layout } from '../../molecules';
 import DashboardTemplateFooter from './Footer';
 import DashboardTemplateHeader from './Header';
@@ -18,25 +18,74 @@ const DashboardTemplateInternal: RdDashboardTemplateComponent = forwardRef((prop
         fitScreen = false,
         ...restProps
     } = props;
+    const [collapsed, setCollapsed] = useState(false);
 
-    return (
-        <DashboardTemplateStyles ref={ref} fitScreen={fitScreen} {...restProps}>
-            {headerProps && <DashboardTemplateHeader {...headerProps} />}
-
-            <Layout hasSider={Boolean(siderProps)}>
-                {siderProps && <DashboardTemplateSider {...siderProps} />}
+    const handleToggleSider = () => {
+        setCollapsed(!collapsed);
+    };
 
+    const renderFullHeightLayout = () => (
+        <DashboardTemplateStyles
+            ref={ref}
+            fitScreen={fitScreen}
+            hasSider={Boolean(siderProps)}
+            {...restProps}
+        >
+            {siderProps && (
+                <DashboardTemplateSider
+                    collapsed={collapsed}
+                    toggleSider={handleToggleSider}
+                    {...siderProps}
+                />
+            )}
+            <Layout>
+                {headerProps && (
+                    <DashboardTemplateHeader
+                        collapsed={collapsed}
+                        toggleSider={handleToggleSider}
+                        {...headerProps}
+                    />
+                )}
                 <DashboardTemplateSkeletonLayout>
                     <DashboardTemplateContent fitScreen={fitScreen}>
                         {props.children}
                     </DashboardTemplateContent>
-                    {footerProps && (
-                        <DashboardTemplateFooter {...footerProps}></DashboardTemplateFooter>
-                    )}
+                    {footerProps && <DashboardTemplateFooter {...footerProps} />}
                 </DashboardTemplateSkeletonLayout>
             </Layout>
         </DashboardTemplateStyles>
     );
+
+    const renderContentHeightLayout = () => (
+        <DashboardTemplateStyles ref={ref} fitScreen={fitScreen} {...restProps}>
+            {headerProps && (
+                <DashboardTemplateHeader
+                    collapsed={collapsed}
+                    toggleSider={handleToggleSider}
+                    {...headerProps}
+                />
+            )}
+            <Layout>
+                {siderProps && (
+                    <DashboardTemplateSider
+                        collapsed={collapsed}
+                        toggleSider={handleToggleSider}
+                        {...siderProps}
+                    />
+                )}
+                <DashboardTemplateSkeletonLayout hasSider={Boolean(siderProps)}>
+                    <DashboardTemplateContent fitScreen={fitScreen}>
+                        {props.children}
+                    </DashboardTemplateContent>
+                    {footerProps && <DashboardTemplateFooter {...footerProps} />}
+                </DashboardTemplateSkeletonLayout>
+            </Layout>
+        </DashboardTemplateStyles>
+    );
+
+    const sidebarMode = props.siderProps?.sidebarMode; // 'fullHeight' | 'contentHeight';
+
+    return sidebarMode === 'fullHeight' ? renderFullHeightLayout() : renderContentHeightLayout();
 });
 
 export const DashboardTemplate =

src/templates/DashboardTemplate/Header/index.tsx

@@ -1,18 +1,18 @@
 import { forwardRef } from 'react';
-import { DashboardTemplateHeaderStyles } from './styles';
+import { DashboardTemplateHeaderContent, DashboardTemplateHeaderStyles } from './styles';
 import { RdDashboardTemplateHeaderComponent } from './types';
 
 export const DashboardTemplateHeader: RdDashboardTemplateHeaderComponent = forwardRef(
     (props, ref) => {
-        const { children, render, ...restProps } = props;
+        const { children, render, collapsed, toggleSider, ...restProps } = props;
 
         if (render) {
             return render({ children, ...restProps });
         }
 
         return (
             <DashboardTemplateHeaderStyles ref={ref} {...restProps}>
-                {children}
+                <DashboardTemplateHeaderContent flex={1}>{children}</DashboardTemplateHeaderContent>
             </DashboardTemplateHeaderStyles>
         );
     }