Sync develop branch

.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 }}

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

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",

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<RdCardProps> = ({
+    className,
+    variant = 'default',
+    ...antdProps
+}) => {
     const variantClass: Record<NonNullable<RdCardProps['variant']>, string> = {
         compact: 'rd-card-variant-compact',
-        default: '',
+        default: 'rd-card-variant-default',
+        borderless: 'rd-card-variant-borderless',
+        outlined: 'rd-card-variant-outlined',
     };
 
     return <CardStyles className={clsx(className, variantClass[variant])} {...antdProps} />;

src/molecules/Card/types.ts

@@ -25,15 +25,15 @@ 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 = {};
 type MetaCardPropsExtend = {};
 //#endregion
 
 //#region Export types
-export type RdCardProps = CardPropsAntd & CardPropsExtend;
+export type RdCardProps = Omit<CardPropsAntd, 'variant'> & CardPropsExtend;
 export type RdGridCardProps = GridCardPropsAntd & GridCardPropsExtend;
 export type RdMetaCardProps = MetaCardPropsAntd & MetaCardPropsExtend;
 

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 <ColorPickerStyles {...props} />;
 };
+
+export const ColorPicker = ColorPickerInternal as RdColorPickerCompoundedComponent;
+

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<RdColorPickerProps> = styled(ColorPicker, {
     shouldForwardProp: prop =>
         getExcludeForwardProps<RdColorPickerProps>(
             ['readonly'] as (keyof RdColorPickerProps)[],

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<typeof ColorPicker>;
+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<RdColorPickerProps>;
+export type RdColorPickerInternalComponent = React.FC<RdColorPickerProps>;
+
+export type RdColorPickerCompoundedComponent = typeof ColorPickerInternal & {};
 //#endregion

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<RdDatePickerProps> = styled(DatePicker)``;
+
+export const WeekPickerStyles: StyledComponent<RdWeekPickerProps> = styled(DatePicker.WeekPicker)``;
+export const MonthPickerStyles: StyledComponent<RdMonthPickerProps> = styled(
+    DatePicker.MonthPicker
+)``;
+export const YearPickerStyles: StyledComponent<RdYearPickerProps> = styled(DatePicker.YearPicker)``;
+export const RangePickerStyles: StyledComponent<RdRangePickerProps> = styled(
+    DatePicker.RangePicker
+)``;
+export const TimePickerStyles: StyledComponent<RdTimePickerProps> = styled(DatePicker.TimePicker)``;
+export const QuarterPickerStyles: StyledComponent<RdQuarterPickerProps> = styled(
+    DatePicker.QuarterPicker
+)``;