Merge pull request #42 from 1Byte-Software/develop

Update version 1.8.0

Author: KennethWise

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;