diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml new file mode 100644 index 0000000..ac89fd6 --- /dev/null +++ b/.github/workflows/node.js.yml @@ -0,0 +1,39 @@ +# 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: Publish to npm + +on: + push: + tags: + - '[0-9]+.[0-9]+.[0-9]+' # Example: 1.0.0, 2.1.3 + +jobs: + publish: + runs-on: ubuntu-latest + + steps: + - name: Checkout code + uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + 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: Build project + run: pnpm build + + - name: Publish to npm + run: pnpm publish --no-git-checks + env: + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 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/package.json b/package.json index de70254..a23c092 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "1byte-react-design", - "version": "1.6.2-3", + "version": "1.6.3-2", "main": "dist/index.js", "module": "dist/index.js", "types": "dist/index.d.ts", @@ -10,9 +10,13 @@ "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", "@dnd-kit/sortable": "^10.0.0", @@ -23,6 +27,12 @@ "clsx": "^2.1.1", "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", "react-dom": "^18.3.1", "react-hook-form": "^7.53.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0cb59ae..c2980a5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,15 @@ 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/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) '@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 +47,24 @@ 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-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) + 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 +129,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 +148,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 +162,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 +913,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 +1705,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 +2229,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 +2815,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 +2843,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 +2857,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 +3828,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 +4697,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 +5223,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 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; 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 => { }} /> )} -