From 71661eafb7d380d341e9341da26499abe48275ee Mon Sep 17 00:00:00 2001 From: Kenneth Wise <160639663+KennethWise@users.noreply.github.com> Date: Sun, 2 Feb 2025 23:20:27 +0700 Subject: [PATCH 01/12] Create node.js.yml Init github action for 1byte-react-design --- .github/workflows/node.js.yml | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 .github/workflows/node.js.yml diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml new file mode 100644 index 0000000..2284b93 --- /dev/null +++ b/.github/workflows/node.js.yml @@ -0,0 +1,31 @@ +# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node +# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs + +name: Node.js CI + +on: + push: + branches: [ "main" ] + pull_request: + branches: [ "main" ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [18.x, 20.x, 22.x] + # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ + + steps: + - uses: actions/checkout@v4 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v4 + with: + node-version: ${{ matrix.node-version }} + cache: 'npm' + - run: npm ci + - run: npm run build --if-present + - run: npm test From 656c0c019023f93f23d2048bfe9c0998213853fb Mon Sep 17 00:00:00 2001 From: Kenneth Wise <160639663+KennethWise@users.noreply.github.com> Date: Sun, 2 Feb 2025 23:25:12 +0700 Subject: [PATCH 02/12] Update node.js.yml Fix npm ci --- .github/workflows/node.js.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index 2284b93..53c4f20 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -26,6 +26,6 @@ jobs: with: node-version: ${{ matrix.node-version }} cache: 'npm' - - run: npm ci + - run: yarn install --frozen-lockfile - run: npm run build --if-present - run: npm test From 5769b315831251c456b612348dd45937b2f19d31 Mon Sep 17 00:00:00 2001 From: Kenneth Wise <160639663+KennethWise@users.noreply.github.com> Date: Sun, 2 Feb 2025 23:28:32 +0700 Subject: [PATCH 03/12] Update node.js.yml Fix build and test script --- .github/workflows/node.js.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index 53c4f20..f30aefc 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -27,5 +27,5 @@ jobs: node-version: ${{ matrix.node-version }} cache: 'npm' - run: yarn install --frozen-lockfile - - run: npm run build --if-present - - run: npm test + - run: yarn run build + - run: yarn run test From 387029704ab499b6334a1f587651bcb28bcbac05 Mon Sep 17 00:00:00 2001 From: Kenneth Wise <160639663+KennethWise@users.noreply.github.com> Date: Tue, 9 Sep 2025 14:24:12 +0700 Subject: [PATCH 04/12] build: change ci/cd github actions --- .github/workflows/node.js.yml | 41 ++++++++++++++++++++--------------- 1 file changed, 23 insertions(+), 18 deletions(-) diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index f30aefc..0bf241f 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -1,31 +1,36 @@ # This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node # For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs -name: Node.js CI +name: Publish to npm on: push: - branches: [ "main" ] - pull_request: - branches: [ "main" ] + tags: + - '[0-9]+.[0-9]+.[0-9]+' # Example: 1.0.0, 2.1.3 jobs: - build: - + publish: runs-on: ubuntu-latest - strategy: - matrix: - node-version: [18.x, 20.x, 22.x] - # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ - steps: - - uses: actions/checkout@v4 - - name: Use Node.js ${{ matrix.node-version }} + - name: Checkout code + uses: actions/checkout@v4 + + - name: Setup Node.js uses: actions/setup-node@v4 with: - node-version: ${{ matrix.node-version }} - cache: 'npm' - - run: yarn install --frozen-lockfile - - run: yarn run build - - run: yarn run test + node-version: '18' + registry-url: 'https://registry.npmjs.org/' + + - name: Setup pnpm + uses: pnpm/action-setup@v3 + with: + version: 9 # đổi sang version pnpm bạn muốn + + - name: Install dependencies + run: pnpm install --frozen-lockfile + + - name: Publish to npm + run: pnpm publish --no-git-checks + env: + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} From 2f5e69e64ce16858f33026762c12ae4e52993b3c Mon Sep 17 00:00:00 2001 From: Kenneth Date: Tue, 9 Sep 2025 15:01:05 +0700 Subject: [PATCH 05/12] fix: fix variant prop in card component --- CHANGELOG.md | 6 ++++++ src/molecules/Card/Card.tsx | 10 ++++++++-- src/molecules/Card/types.ts | 4 ++-- 3 files changed, 16 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8cfcd73..5a6608b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,12 @@ 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.6.3] + +### Fixed + +- Fixed `variant` prop in `Card` component. + ## [1.6.2] ### Added diff --git a/src/molecules/Card/Card.tsx b/src/molecules/Card/Card.tsx index 975ed8f..6491feb 100644 --- a/src/molecules/Card/Card.tsx +++ b/src/molecules/Card/Card.tsx @@ -4,10 +4,16 @@ import { MetaCard } from './Meta'; import { CardStyles } from './styles'; import { RdCardCompoundedComponent, RdCardProps } from './types'; -export const CardInternal = ({ className, variant = 'default', ...antdProps }: RdCardProps) => { +export const CardInternal: React.FC = ({ + className, + variant = 'default', + ...antdProps +}) => { const variantClass: Record, string> = { compact: 'rd-card-variant-compact', - default: '', + default: 'rd-card-variant-default', + borderless: 'rd-card-variant-borderless', + outlined: 'rd-card-variant-outlined', }; return ; diff --git a/src/molecules/Card/types.ts b/src/molecules/Card/types.ts index c367b6c..ed2a1d8 100644 --- a/src/molecules/Card/types.ts +++ b/src/molecules/Card/types.ts @@ -25,7 +25,7 @@ type CardPropsExtend = { * * This property allows you to customize the appearance of the card to match specific design requirements. */ - variant?: 'default' | 'compact'; + variant?: 'default' | 'compact' | CardPropsAntd['variant']; }; type GridCardPropsExtend = {}; @@ -33,7 +33,7 @@ type MetaCardPropsExtend = {}; //#endregion //#region Export types -export type RdCardProps = CardPropsAntd & CardPropsExtend; +export type RdCardProps = Omit & CardPropsExtend; export type RdGridCardProps = GridCardPropsAntd & GridCardPropsExtend; export type RdMetaCardProps = MetaCardPropsAntd & MetaCardPropsExtend; From 1134c4493b36cf08aa61067f3e0781d933fd63e2 Mon Sep 17 00:00:00 2001 From: Kenneth Wise <160639663+KennethWise@users.noreply.github.com> Date: Tue, 9 Sep 2025 15:08:20 +0700 Subject: [PATCH 06/12] fix: fix variant prop in Card component --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index de70254..4b9cd08 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "1byte-react-design", - "version": "1.6.2-3", + "version": "1.6.3", "main": "dist/index.js", "module": "dist/index.js", "types": "dist/index.d.ts", From fbd0a5afa8b1a605337a07e7e4c84a0b315ad322 Mon Sep 17 00:00:00 2001 From: Kenneth Wise <160639663+KennethWise@users.noreply.github.com> Date: Tue, 9 Sep 2025 15:13:05 +0700 Subject: [PATCH 07/12] build: add build before publish to npm --- .github/workflows/node.js.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index 0bf241f..ac89fd6 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -30,6 +30,9 @@ jobs: - name: Install dependencies run: pnpm install --frozen-lockfile + - name: Build project + run: pnpm build + - name: Publish to npm run: pnpm publish --no-git-checks env: From f31457f953d0574d354a2d0d7d31e3b8ce5366ad Mon Sep 17 00:00:00 2001 From: Kenneth Date: Tue, 9 Sep 2025 15:31:18 +0700 Subject: [PATCH 08/12] build: update package.json for ci/cd with pnpm --- package.json | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 4b9cd08..675120a 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,12 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-hook-form": "^7.53.0", - "react-router-dom": "^6.28.0" + "react-router-dom": "^6.28.0", + "@ant-design/icons": "^5.0.0", + "@ant-design/cssinjs": "^1.0.0", + "rc-field-form": "^1.0.0", + "rc-table": "^7.0.0", + "rc-tree": "^5.0.0" }, "devDependencies": { "@babel/core": "^7.25.2", From 88434372eafafce09dcc7a02847ba7e7d1c7484b Mon Sep 17 00:00:00 2001 From: Kenneth Date: Tue, 9 Sep 2025 15:35:02 +0700 Subject: [PATCH 09/12] build: change version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 675120a..4502bd5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "1byte-react-design", - "version": "1.6.3", + "version": "1.6.3-1", "main": "dist/index.js", "module": "dist/index.js", "types": "dist/index.d.ts", From 00103405f0753e11c7b3e4a670fb8831e4ad8de9 Mon Sep 17 00:00:00 2001 From: Kenneth Date: Tue, 9 Sep 2025 15:50:20 +0700 Subject: [PATCH 10/12] fix: fix package.json and pnpm-lock.yaml --- package.json | 12 ++++---- pnpm-lock.yaml | 80 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 86 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 4502bd5..8c118ef 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,8 @@ "test": "yalc publish --push --no-scripts --files ." }, "dependencies": { + "@ant-design/cssinjs": "^1.24.0", + "@ant-design/icons": "^6.0.1", "@dnd-kit/core": "^6.3.1", "@dnd-kit/modifiers": "^9.0.0", "@dnd-kit/sortable": "^10.0.0", @@ -23,15 +25,13 @@ "clsx": "^2.1.1", "dayjs": "^1.11.13", "polished": "^4.3.1", + "rc-field-form": "^2.7.0", + "rc-table": "^7.53.0", + "rc-tree": "^5.13.1", "react": "^18.3.1", "react-dom": "^18.3.1", "react-hook-form": "^7.53.0", - "react-router-dom": "^6.28.0", - "@ant-design/icons": "^5.0.0", - "@ant-design/cssinjs": "^1.0.0", - "rc-field-form": "^1.0.0", - "rc-table": "^7.0.0", - "rc-tree": "^5.0.0" + "react-router-dom": "^6.28.0" }, "devDependencies": { "@babel/core": "^7.25.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0cb59ae..dfe780d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,12 @@ importers: .: dependencies: + '@ant-design/cssinjs': + specifier: ^1.24.0 + version: 1.24.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@ant-design/icons': + specifier: ^6.0.1 + version: 6.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@dnd-kit/core': specifier: ^6.3.1 version: 6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -38,6 +44,15 @@ importers: polished: specifier: ^4.3.1 version: 4.3.1 + rc-field-form: + specifier: ^2.7.0 + version: 2.7.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + rc-table: + specifier: ^7.53.0 + version: 7.53.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + rc-tree: + specifier: ^5.13.1 + version: 5.13.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: specifier: ^18.3.1 version: 18.3.1 @@ -102,6 +117,9 @@ packages: '@ant-design/colors@7.2.1': resolution: {integrity: sha512-lCHDcEzieu4GA3n8ELeZ5VQ8pKQAWcGGLRTQ50aQM2iqPpq2evTxER84jfdPvsPAtEcZ7m44NI45edFMo8oOYQ==} + '@ant-design/colors@8.0.0': + resolution: {integrity: sha512-6YzkKCw30EI/E9kHOIXsQDHmMvTllT8STzjMb4K2qzit33RW2pqCJP0sk+hidBntXxE+Vz4n1+RvCTfBw6OErw==} + '@ant-design/cssinjs-utils@1.1.3': resolution: {integrity: sha512-nOoQMLW1l+xR1Co8NFVYiP8pZp3VjIIzqV6D6ShYF2ljtdwWJn5WSsH+7kvCktXL/yhEtWURKOfH5Xz/gzlwsg==} peerDependencies: @@ -118,6 +136,10 @@ packages: resolution: {integrity: sha512-y2217gk4NqL35giHl72o6Zzqji9O7vHh9YmhUVkPtAOpoTCH4uWxo/pr4VE8t0+ChEPs0qo4eJRC5Q1eXWo3vA==} engines: {node: '>=8.x'} + '@ant-design/fast-color@3.0.0': + resolution: {integrity: sha512-eqvpP7xEDm2S7dUzl5srEQCBTXZMmY3ekf97zI+M2DHOYyKdJGH0qua0JACHTqbkRnD/KHFQP9J1uMJ/XWVzzA==} + engines: {node: '>=8.x'} + '@ant-design/icons-svg@4.4.2': resolution: {integrity: sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA==} @@ -128,6 +150,13 @@ packages: react: '>=16.0.0' react-dom: '>=16.0.0' + '@ant-design/icons@6.0.1': + resolution: {integrity: sha512-BsAoYa8NTwh5GfpziqStAyWHNyp8vkc9PkuIR/Cu8O8WkhRzrpx260zd5ygsXMhQEGtfGGFjdAG0DfjhGBOBHw==} + engines: {node: '>=8'} + peerDependencies: + react: '>=16.0.0' + react-dom: '>=16.0.0' + '@ant-design/react-slick@1.1.2': resolution: {integrity: sha512-EzlvzE6xQUBrZuuhSAFTdsr4P2bBBHGZwKFemEfq8gIGyIQCxalYfZW/T2ORbtQx5rU69o+WycP3exY/7T1hGA==} peerDependencies: @@ -872,6 +901,12 @@ packages: react: '>=16.9.0' react-dom: '>=16.9.0' + '@rc-component/util@1.3.0': + resolution: {integrity: sha512-hfXE04CVsxI/slmWKeSh6du7sSKpbvVdVEZCa8A+2QWDlL97EsCYme2c3ZWLn1uC9FR21JoewlrhUPWO4QgO8w==} + peerDependencies: + react: '>=18.0.0' + react-dom: '>=18.0.0' + '@remix-run/router@1.23.0': resolution: {integrity: sha512-O3rHJzAQKamUz1fvE0Qaw0xSFqsA/yafi2iqeE0pvdFtCO1viYx8QL6f3Ln/aCCTLxs68SLf0KPM9eSeM8yBnA==} engines: {node: '>=14.0.0'} @@ -1658,6 +1693,9 @@ packages: engines: {node: '>=14.16'} hasBin: true + is-mobile@5.0.0: + resolution: {integrity: sha512-Tz/yndySvLAEXh+Uk8liFCxOwVH6YutuR74utvOcu7I9Di+DwM0mtdPVZNaVvvBUM2OXxne/NhOs1zAO7riusQ==} + is-network-error@1.1.0: resolution: {integrity: sha512-tUdRRAnhT+OtCZR/LxZelH/C7QtjtFrTu5tXCA8pl55eTUElUHT+GPYV8MBMBvea/j+NxQqVt3LbWMRir7Gx9g==} engines: {node: '>=16'} @@ -2179,6 +2217,13 @@ packages: react: '>=16.9.0' react-dom: '>=16.9.0' + rc-table@7.53.0: + resolution: {integrity: sha512-c+Ifi9CNon7xj3S0Xno3IMiYDiW6eu0KiOntFzf78sIxY3e6PIelqHvp+LqzJTZDcJbdwX5d4ptSRDFf/tn2iw==} + engines: {node: '>=8.x'} + peerDependencies: + react: '>=16.9.0' + react-dom: '>=16.9.0' + rc-tabs@15.7.0: resolution: {integrity: sha512-ZepiE+6fmozYdWf/9gVp7k56PKHB1YYoDsKeQA1CBlJ/POIhjkcYiv0AGP0w2Jhzftd3AVvZP/K+V+Lpi2ankA==} engines: {node: '>=8.x'} @@ -2758,6 +2803,10 @@ snapshots: dependencies: '@ant-design/fast-color': 2.0.6 + '@ant-design/colors@8.0.0': + dependencies: + '@ant-design/fast-color': 3.0.0 + '@ant-design/cssinjs-utils@1.1.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@ant-design/cssinjs': 1.24.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -2782,6 +2831,8 @@ snapshots: dependencies: '@babel/runtime': 7.28.4 + '@ant-design/fast-color@3.0.0': {} + '@ant-design/icons-svg@4.4.2': {} '@ant-design/icons@5.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': @@ -2794,6 +2845,15 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) + '@ant-design/icons@6.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@ant-design/colors': 8.0.0 + '@ant-design/icons-svg': 4.4.2 + '@rc-component/util': 1.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + classnames: 2.5.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + '@ant-design/react-slick@1.1.2(react@18.3.1)': dependencies: '@babel/runtime': 7.28.4 @@ -3756,6 +3816,13 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) + '@rc-component/util@1.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + is-mobile: 5.0.0 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-is: 18.3.1 + '@remix-run/router@1.23.0': {} '@types/body-parser@1.19.6': @@ -4618,6 +4685,8 @@ snapshots: dependencies: is-docker: 3.0.0 + is-mobile@5.0.0: {} + is-network-error@1.1.0: {} is-number@7.0.0: {} @@ -5142,6 +5211,17 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) + rc-table@7.53.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + '@babel/runtime': 7.28.4 + '@rc-component/context': 1.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + classnames: 2.5.1 + rc-resize-observer: 1.4.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + rc-util: 5.44.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + rc-virtual-list: 3.19.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + rc-tabs@15.7.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: '@babel/runtime': 7.28.4 From 0fc0b0613ab47913fedfce4913458ca2c20ae5fc Mon Sep 17 00:00:00 2001 From: Kenneth Date: Tue, 9 Sep 2025 23:10:11 +0700 Subject: [PATCH 11/12] fix: fix type for pnpm build ci/cd --- package.json | 9 +++++-- pnpm-lock.yaml | 15 +++++++++++ src/molecules/ColorPicker/ColorPicker.tsx | 7 +++-- src/molecules/ColorPicker/styles.tsx | 4 +-- src/molecules/ColorPicker/types.ts | 9 ++++--- src/molecules/DatePicker/styles.tsx | 32 +++++++++++++++++------ src/molecules/Image/Image.tsx | 15 +++++++---- src/molecules/Image/PreviewGroup.tsx | 8 ++++++ src/molecules/Image/styles.tsx | 10 ++++++- src/molecules/Image/types.ts | 12 +++++++-- src/molecules/InputNumber/InputNumber.tsx | 14 +++++++--- src/molecules/InputNumber/styles.tsx | 4 ++- src/molecules/InputNumber/types.tsx | 18 ++++++++++--- src/molecules/Slider/types.ts | 11 ++++++-- tsconfig.json | 3 ++- 15 files changed, 135 insertions(+), 36 deletions(-) create mode 100644 src/molecules/Image/PreviewGroup.tsx diff --git a/package.json b/package.json index 8c118ef..a23c092 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "1byte-react-design", - "version": "1.6.3-1", + "version": "1.6.3-2", "main": "dist/index.js", "module": "dist/index.js", "types": "dist/index.d.ts", @@ -10,10 +10,12 @@ "license": "MIT", "scripts": { "build": "webpack --config webpack.config.js", - "test": "yalc publish --push --no-scripts --files ." + "test": "yalc publish --push --no-scripts --files .", + "tsc": "tsc -p tsconfig.json" }, "dependencies": { "@ant-design/cssinjs": "^1.24.0", + "@ant-design/cssinjs-utils": "^1.1.3", "@ant-design/icons": "^6.0.1", "@dnd-kit/core": "^6.3.1", "@dnd-kit/modifiers": "^9.0.0", @@ -26,6 +28,9 @@ "dayjs": "^1.11.13", "polished": "^4.3.1", "rc-field-form": "^2.7.0", + "rc-image": "^7.12.0", + "rc-input-number": "^9.5.0", + "rc-slider": "^11.1.8", "rc-table": "^7.53.0", "rc-tree": "^5.13.1", "react": "^18.3.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dfe780d..93cc050 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,9 @@ importers: '@ant-design/cssinjs': specifier: ^1.24.0 version: 1.24.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@ant-design/cssinjs-utils': + specifier: ^1.1.3 + version: 1.1.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@ant-design/icons': specifier: ^6.0.1 version: 6.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -32,6 +35,9 @@ importers: '@emotion/styled': specifier: ^11.13.0 version: 11.14.1(@emotion/react@11.14.0(@types/react@18.3.24)(react@18.3.1))(@types/react@18.3.24)(react@18.3.1) + Slider: + specifier: link:rc-slider/lib/Slider + version: link:rc-slider/lib/Slider antd: specifier: ^5.21.2 version: 5.27.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -47,6 +53,15 @@ importers: rc-field-form: specifier: ^2.7.0 version: 2.7.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + rc-image: + specifier: ^7.12.0 + version: 7.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + rc-input-number: + specifier: ^9.5.0 + version: 9.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + rc-slider: + specifier: ^11.1.8 + version: 11.1.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1) rc-table: specifier: ^7.53.0 version: 7.53.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) diff --git a/src/molecules/ColorPicker/ColorPicker.tsx b/src/molecules/ColorPicker/ColorPicker.tsx index 60c28eb..2f1b056 100644 --- a/src/molecules/ColorPicker/ColorPicker.tsx +++ b/src/molecules/ColorPicker/ColorPicker.tsx @@ -1,6 +1,9 @@ import { ColorPickerStyles } from './styles'; -import { RdColorPickerComponent } from './types'; +import { RdColorPickerCompoundedComponent, RdColorPickerInternalComponent } from './types'; -export const ColorPicker: RdColorPickerComponent = props => { +export const ColorPickerInternal: RdColorPickerInternalComponent = props => { return ; }; + +export const ColorPicker = ColorPickerInternal as RdColorPickerCompoundedComponent; + diff --git a/src/molecules/ColorPicker/styles.tsx b/src/molecules/ColorPicker/styles.tsx index 9c18be2..98f5ad4 100644 --- a/src/molecules/ColorPicker/styles.tsx +++ b/src/molecules/ColorPicker/styles.tsx @@ -1,9 +1,9 @@ -import styled from '@emotion/styled'; +import styled, { StyledComponent } from '@emotion/styled'; import { ColorPicker } from 'antd'; import { getExcludeForwardProps } from '../../utils'; import { RdColorPickerProps } from './types'; -export const ColorPickerStyles = styled(ColorPicker, { +export const ColorPickerStyles: StyledComponent = styled(ColorPicker, { shouldForwardProp: prop => getExcludeForwardProps( ['readonly'] as (keyof RdColorPickerProps)[], diff --git a/src/molecules/ColorPicker/types.ts b/src/molecules/ColorPicker/types.ts index a346d43..19dc668 100644 --- a/src/molecules/ColorPicker/types.ts +++ b/src/molecules/ColorPicker/types.ts @@ -1,8 +1,9 @@ -import { ColorPicker, GetProps } from 'antd'; +import { ColorPickerProps } from 'antd'; import { ComponentToken as ColorPickerComponentTokenAntd } from 'antd/es/color-picker/style'; +import { ColorPickerInternal } from './ColorPicker'; //#region Define Ant Design types -type ColorPickerPropsAntd = GetProps; +type ColorPickerPropsAntd = ColorPickerProps; //#endregion //#region Define extended component tokens @@ -29,5 +30,7 @@ export type RdColorPickerComponentToken = ColorPickerComponentTokenAntd & //#endregion //#region Define component types -export type RdColorPickerComponent = React.FC; +export type RdColorPickerInternalComponent = React.FC; + +export type RdColorPickerCompoundedComponent = typeof ColorPickerInternal & {}; //#endregion diff --git a/src/molecules/DatePicker/styles.tsx b/src/molecules/DatePicker/styles.tsx index 4b5c684..0d7b743 100644 --- a/src/molecules/DatePicker/styles.tsx +++ b/src/molecules/DatePicker/styles.tsx @@ -1,10 +1,26 @@ -import styled from '@emotion/styled'; +import styled, { StyledComponent } from '@emotion/styled'; import { DatePicker } from 'antd'; +import { + RdDatePickerProps, + RdMonthPickerProps, + RdQuarterPickerProps, + RdRangePickerProps, + RdTimePickerProps, + RdWeekPickerProps, + RdYearPickerProps, +} from './types'; -export const DatePickerStyles = styled(DatePicker)``; -export const WeekPickerStyles = styled(DatePicker.WeekPicker)``; -export const MonthPickerStyles = styled(DatePicker.MonthPicker)``; -export const YearPickerStyles = styled(DatePicker.YearPicker)``; -export const RangePickerStyles = styled(DatePicker.RangePicker)``; -export const TimePickerStyles = styled(DatePicker.TimePicker)``; -export const QuarterPickerStyles = styled(DatePicker.QuarterPicker)``; +export const DatePickerStyles: StyledComponent = styled(DatePicker)``; + +export const WeekPickerStyles: StyledComponent = styled(DatePicker.WeekPicker)``; +export const MonthPickerStyles: StyledComponent = styled( + DatePicker.MonthPicker +)``; +export const YearPickerStyles: StyledComponent = styled(DatePicker.YearPicker)``; +export const RangePickerStyles: StyledComponent = styled( + DatePicker.RangePicker +)``; +export const TimePickerStyles: StyledComponent = styled(DatePicker.TimePicker)``; +export const QuarterPickerStyles: StyledComponent = styled( + DatePicker.QuarterPicker +)``; diff --git a/src/molecules/Image/Image.tsx b/src/molecules/Image/Image.tsx index 7ea3b6c..a6dca06 100644 --- a/src/molecules/Image/Image.tsx +++ b/src/molecules/Image/Image.tsx @@ -1,8 +1,9 @@ import { Skeleton } from '../Skeleton'; -import { ImageStyles } from './styles'; -import { RdImageComponent } from './types'; +import { PreviewGroup } from './PreviewGroup'; +import { ImageStyled } from './styles'; +import { RdImageCompositionComponent, RdImageInternalComponent } from './types'; -export const Image: RdImageComponent = props => { +const ImageInternal: RdImageInternalComponent = props => { const { loading = false, ...antdProps } = props; return ( @@ -10,7 +11,7 @@ export const Image: RdImageComponent = props => { {/** * Note: * Previously, when `loading = true`, the component only rendered the `Skeleton.Node` - * and skipped rendering the `ImageStyles` completely. + * and skipped rendering the `ImageStyled` completely. * * However, in that case, the `img` element was never created, so the browser wouldn't start downloading the image, * and we couldn't catch the `onLoad` event. @@ -31,7 +32,11 @@ export const Image: RdImageComponent = props => { }} /> )} -