From 724eb1f7bc6b30504c8490a977346cd8d65cb58e Mon Sep 17 00:00:00 2001 From: Kenneth Date: Fri, 26 Sep 2025 09:02:44 +0700 Subject: [PATCH 1/4] feat: Add Alert component --- src/molecules/Alert/Alert.tsx | 9 ++++++++ src/molecules/Alert/Timer.tsx | 6 +++++ src/molecules/Alert/index.tsx | 2 ++ src/molecules/Alert/styles.tsx | 4 ++++ src/molecules/Alert/types.ts | 40 ++++++++++++++++++++++++++++++++++ src/molecules/index.ts | 1 + 6 files changed, 62 insertions(+) create mode 100644 src/molecules/Alert/Alert.tsx create mode 100644 src/molecules/Alert/Timer.tsx create mode 100644 src/molecules/Alert/index.tsx create mode 100644 src/molecules/Alert/styles.tsx create mode 100644 src/molecules/Alert/types.ts diff --git a/src/molecules/Alert/Alert.tsx b/src/molecules/Alert/Alert.tsx new file mode 100644 index 0000000..5522cd3 --- /dev/null +++ b/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 ; +}); + +export const Alert: RdAlertCompoundedComponent = InternalAlert as RdAlertCompoundedComponent; diff --git a/src/molecules/Alert/Timer.tsx b/src/molecules/Alert/Timer.tsx new file mode 100644 index 0000000..5514a17 --- /dev/null +++ b/src/molecules/Alert/Timer.tsx @@ -0,0 +1,6 @@ +import { TimerStyled } from './styles'; +import { RdAlertTimerComponent } from './types'; + +export const Timer: RdAlertTimerComponent = props => { + return ; +}; diff --git a/src/molecules/Alert/index.tsx b/src/molecules/Alert/index.tsx new file mode 100644 index 0000000..570c260 --- /dev/null +++ b/src/molecules/Alert/index.tsx @@ -0,0 +1,2 @@ +export * from './Alert'; +export * from './types'; diff --git a/src/molecules/Alert/styles.tsx b/src/molecules/Alert/styles.tsx new file mode 100644 index 0000000..df89122 --- /dev/null +++ b/src/molecules/Alert/styles.tsx @@ -0,0 +1,4 @@ +import styled from '@emotion/styled'; +import { Alert } from 'antd'; + +export const AlertStyled = styled(Alert)``; diff --git a/src/molecules/Alert/types.ts b/src/molecules/Alert/types.ts new file mode 100644 index 0000000..7cc0469 --- /dev/null +++ b/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; +type AlertErrorBoundaryPropsAntd = GetProps; + +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; +export type RdAlertComponent = React.ForwardRefExoticComponent< + RdAlertProps & React.RefAttributes +>; + +export type RdAlertCompoundedComponent = RdAlertComponent & { + // Timer: RdAlertErrorBoundaryComponent; +}; +//#endregion diff --git a/src/molecules/index.ts b/src/molecules/index.ts index ce79b33..08ce098 100644 --- a/src/molecules/index.ts +++ b/src/molecules/index.ts @@ -1,4 +1,5 @@ export * from './Affix'; +export * from './Alert'; export * from './Anchor'; export * from './Avatar'; export * from './Badge'; From 1045c2f37eaf65298e6bd47617bfa4c1f02ce178 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Fri, 26 Sep 2025 09:02:57 +0700 Subject: [PATCH 2/4] feat: Add Progress component --- src/molecules/Progress/Progress.tsx | 7 +++++++ src/molecules/Progress/index.tsx | 2 ++ src/molecules/Progress/styles.tsx | 4 ++++ src/molecules/Progress/types.ts | 23 +++++++++++++++++++++++ src/molecules/index.ts | 1 + 5 files changed, 37 insertions(+) create mode 100644 src/molecules/Progress/Progress.tsx create mode 100644 src/molecules/Progress/index.tsx create mode 100644 src/molecules/Progress/styles.tsx create mode 100644 src/molecules/Progress/types.ts diff --git a/src/molecules/Progress/Progress.tsx b/src/molecules/Progress/Progress.tsx new file mode 100644 index 0000000..cd93760 --- /dev/null +++ b/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 ; +}); diff --git a/src/molecules/Progress/index.tsx b/src/molecules/Progress/index.tsx new file mode 100644 index 0000000..e60b349 --- /dev/null +++ b/src/molecules/Progress/index.tsx @@ -0,0 +1,2 @@ +export * from './Progress'; +export * from './types'; diff --git a/src/molecules/Progress/styles.tsx b/src/molecules/Progress/styles.tsx new file mode 100644 index 0000000..2185c97 --- /dev/null +++ b/src/molecules/Progress/styles.tsx @@ -0,0 +1,4 @@ +import styled from '@emotion/styled'; +import { Progress } from 'antd'; + +export const ProgressStyles = styled(Progress)``; diff --git a/src/molecules/Progress/types.ts b/src/molecules/Progress/types.ts new file mode 100644 index 0000000..74dd051 --- /dev/null +++ b/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; +//#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>; +//#endregion diff --git a/src/molecules/index.ts b/src/molecules/index.ts index 08ce098..f84b04b 100644 --- a/src/molecules/index.ts +++ b/src/molecules/index.ts @@ -31,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'; From 85b51531a7be8e88f0c72ef30318c8c34013ceb8 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Fri, 26 Sep 2025 09:03:23 +0700 Subject: [PATCH 3/4] feat: add default config for scroll prop of Table component --- src/molecules/Table/Table.tsx | 16 +++++++++++++--- src/organisms/ConfigProvider/configs/table.ts | 2 +- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/molecules/Table/Table.tsx b/src/molecules/Table/Table.tsx index bf9e00b..39e5929 100644 --- a/src/molecules/Table/Table.tsx +++ b/src/molecules/Table/Table.tsx @@ -11,9 +11,9 @@ import { RdTableProps } from './types'; export const Table = ( props: RdTableProps ) => { - 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 = ( }; }, [pagination, defaultPagination]); + const scrollWithDefault = useMemo(() => { + return { + ...defaultScroll, + ...scroll, + }; + }, [scroll, defaultScroll]); + const TableStyled = useMemo(() => { return TableStyledFunc(); }, [TableStyledFunc]); @@ -51,6 +58,7 @@ export const Table = ( @@ -58,5 +66,7 @@ export const Table = ( ); } - return ; + return ( + + ); }; diff --git a/src/organisms/ConfigProvider/configs/table.ts b/src/organisms/ConfigProvider/configs/table.ts index 62681f5..c6834c6 100644 --- a/src/organisms/ConfigProvider/configs/table.ts +++ b/src/organisms/ConfigProvider/configs/table.ts @@ -6,7 +6,7 @@ type TableConfigAntd = TableConfig; //#endregion //#region Define extended types -interface TableConfigExtend extends Pick {} +interface TableConfigExtend extends Pick {} //#endregion //#region Export types From 1ffe475db97dba540023654bf4bb2457fdb27539 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Fri, 26 Sep 2025 09:04:27 +0700 Subject: [PATCH 4/4] build: update version 1.8.0 --- CHANGELOG.md | 8 ++++++++ package.json | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 662384f..8435fd5 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/package.json b/package.json index bfcb606..ae27e2a 100644 --- a/package.json +++ b/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",