Feat/update component

CHANGELOG.md

@@ -9,6 +9,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+-   Added `Alert` component.
+-   Added `Progress` component.
+-   Added default `scroll` for `Table` component.
+
+## [1.8.0]
+
+### Added
+
 -   Added chart to `SummaryCard` component.
 -   Added `Statistic` component.
 -   Added `Grid.useBreakpoint()` hooks.

package.json

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

src/molecules/Alert/Alert.tsx

@@ -0,0 +1,9 @@
+import { forwardRef } from 'react';
+import { AlertStyled } from './styles';
+import { RdAlertComponent, RdAlertCompoundedComponent } from './types';
+
+export const InternalAlert: RdAlertComponent = forwardRef((props, ref) => {
+    return <AlertStyled {...props} ref={ref} />;
+});
+
+export const Alert: RdAlertCompoundedComponent = InternalAlert as RdAlertCompoundedComponent;

src/molecules/Alert/Timer.tsx

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

src/molecules/Alert/index.tsx

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

src/molecules/Alert/styles.tsx

@@ -0,0 +1,4 @@
+import styled from '@emotion/styled';
+import { Alert } from 'antd';
+
+export const AlertStyled = styled(Alert)``;

src/molecules/Alert/types.ts

@@ -0,0 +1,40 @@
+import { Alert, GetProps } from 'antd';
+import { AlertRef } from 'antd/es/alert/Alert';
+import { ComponentToken as AlertComponentTokenAntd } from 'antd/es/drawer/style';
+import { ComponentProps } from 'react';
+
+type AlertPropsAntd = GetProps<typeof Alert>;
+type AlertErrorBoundaryPropsAntd = GetProps<typeof Alert.ErrorBoundary>;
+
+type AlertRefAntd = AlertRef;
+
+//#endregion
+
+//#region Define extended component tokens
+type AlertComponentTokenExtend = {};
+//#endregion
+
+//#region Define extended types
+type AlertPropsExtend = {};
+type AlertErrorBoundaryPropsExtend = {};
+
+type AlertRefExtend = {};
+//#endregion
+
+//#region Export types
+export type RdAlertProps = AlertPropsAntd & AlertPropsExtend;
+export type RdAlertErrorBoundaryProps = AlertErrorBoundaryPropsAntd & AlertErrorBoundaryPropsExtend;
+export type RdAlertRef = AlertRefAntd & AlertRefExtend;
+export type RdAlertComponentToken = AlertComponentTokenAntd & AlertComponentTokenExtend;
+//#endregion
+
+//#region Define component types
+// export type RdAlertComponent = React.FC<RdAlertProps>;
+export type RdAlertComponent = React.ForwardRefExoticComponent<
+    RdAlertProps & React.RefAttributes<RdAlertRef>
+>;
+
+export type RdAlertCompoundedComponent = RdAlertComponent & {
+    // Timer: RdAlertErrorBoundaryComponent;
+};
+//#endregion

src/molecules/Progress/Progress.tsx

@@ -0,0 +1,7 @@
+import { forwardRef } from 'react';
+import { ProgressStyles } from './styles';
+import { RdProgressComponent } from './types';
+
+export const Progress: RdProgressComponent = forwardRef((props, ref) => {
+    return <ProgressStyles ref={ref} {...props} />;
+});

src/molecules/Progress/index.tsx

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

src/molecules/Progress/styles.tsx

@@ -0,0 +1,4 @@
+import styled from '@emotion/styled';
+import { Progress } from 'antd';
+
+export const ProgressStyles = styled(Progress)``;

src/molecules/Progress/types.ts

@@ -0,0 +1,23 @@
+import { Progress, GetProps } from 'antd';
+import { ComponentToken as ProgressComponentTokenAntd } from 'antd/es/progress/style';
+
+//#region Define Ant Design types
+type ProgressPropsAntd = GetProps<typeof Progress>;
+//#endregion
+
+//#region Define extended component tokens
+type ProgressComponentTokenExtend = {};
+//#endregion
+
+//#region Define extended types
+type ProgressPropsExtend = {};
+//#endregion
+
+//#region Export types
+export type RdProgressProps = ProgressPropsAntd & ProgressPropsExtend;
+export type RdProgressComponentToken = ProgressComponentTokenAntd & ProgressComponentTokenExtend;
+//#endregion
+
+//#region Define component types
+export type RdProgressComponent = React.ForwardRefExoticComponent<RdProgressProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion

src/molecules/Table/Table.tsx

@@ -11,9 +11,9 @@ import { RdTableProps } from './types';
 export const Table = <RecordType extends AnyObject = AnyObject>(
     props: RdTableProps<RecordType>
 ) => {
-    const { allowSort = false, pagination, onChangeSort, ...antdProps } = props;
+    const { allowSort = false, pagination, scroll, onChangeSort, ...antdProps } = props;
     const { table: defaultTableProps } = useContext(ConfigProvider.ConfigContext);
-    const { pagination: defaultPagination } = defaultTableProps || {};
+    const { pagination: defaultPagination, scroll: defaultScroll } = defaultTableProps || {};
 
     const paginationWithDefault = useMemo(() => {
         if (pagination === false) return false;
@@ -24,6 +24,13 @@ export const Table = <RecordType extends AnyObject = AnyObject>(
         };
     }, [pagination, defaultPagination]);
 
+    const scrollWithDefault = useMemo(() => {
+        return {
+            ...defaultScroll,
+            ...scroll,
+        };
+    }, [scroll, defaultScroll]);
+
     const TableStyled = useMemo(() => {
         return TableStyledFunc<RecordType>();
     }, [TableStyledFunc]);
@@ -51,12 +58,15 @@ export const Table = <RecordType extends AnyObject = AnyObject>(
                     <TableStyled
                         components={{ body: { row: RowSortable } }}
                         pagination={paginationWithDefault}
+                        scroll={scrollWithDefault}
                         {...antdProps}
                     />
                 </SortableContext>
             </DndContext>
         );
     }
 
-    return <TableStyled pagination={paginationWithDefault} {...antdProps} />;
+    return (
+        <TableStyled pagination={paginationWithDefault} scroll={scrollWithDefault} {...antdProps} />
+    );
 };

src/molecules/index.ts

@@ -1,4 +1,5 @@
 export * from './Affix';
+export * from './Alert';
 export * from './Anchor';
 export * from './Avatar';
 export * from './Badge';
@@ -30,6 +31,7 @@ export * from './Notification';
 export * from './Pagination';
 export * from './Popconfirm';
 export * from './Popover';
+export * from './Progress';
 export * from './Radio';
 export * from './Result';
 export * from './Select';

src/organisms/ConfigProvider/configs/table.ts

@@ -6,7 +6,7 @@ type TableConfigAntd = TableConfig;
 //#endregion
 
 //#region Define extended types
-interface TableConfigExtend extends Pick<RdTableProps, 'pagination'> {}
+interface TableConfigExtend extends Pick<RdTableProps, 'pagination' | 'scroll'> {}
 //#endregion
 
 //#region Export types