fix: fix type for pnpm build ci/cd

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

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
+)``;

src/molecules/Image/Image.tsx

@@ -1,16 +1,17 @@
 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 (
         <>
             {/**
              * 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 => {
                     }}
                 />
             )}
-            <ImageStyles hidden={loading} {...antdProps} />
+            <ImageStyled hidden={loading} {...antdProps} />
         </>
     );
 };
+
+export const Image = ImageInternal as RdImageCompositionComponent;
+
+Image.PreviewGroup = PreviewGroup;

src/molecules/Image/PreviewGroup.tsx

@@ -0,0 +1,8 @@
+import { PreviewGroupStyled } from './styles';
+import { RdPreviewGroupComponent } from './types';
+
+export const PreviewGroup: RdPreviewGroupComponent = props => {
+    const { ...antdProps } = props;
+
+    return <PreviewGroupStyled {...antdProps} />;
+};

src/molecules/Image/styles.tsx

@@ -3,7 +3,13 @@ import { Image } from 'antd';
 import { getExcludeForwardProps } from '../../utils';
 import { RdImageProps } from './types';
 
-export const ImageStyles = styled(Image, {
+// Note: Using `Image as any` to bypass TypeScript error TS(4023):
+// "Exported variable 'ImageStyled' has or is using name 'PreviewType' from external module ... but cannot be named."
+// Reason: The `antd` library (v5.27.3) does not export the `PreviewType` from `rc-image`,
+// causing TypeScript to fail resolving this type when generating declaration files (.d.ts).
+// This is a temporary workaround to ensure successful builds, but it sacrifices type safety for `Image`.
+// In the future, consider requesting `antd` to export `PreviewType` or re-export `PreviewType` in the project's module.
+export const ImageStyled = styled(Image as any, {
     shouldForwardProp: prop =>
         getExcludeForwardProps<RdImageProps>([] as (keyof RdImageProps)[], prop),
 })<RdImageProps>`
@@ -16,3 +22,5 @@ export const ImageStyles = styled(Image, {
         );
     }}
 `;
+
+export const PreviewGroupStyled = styled(Image.PreviewGroup)``;

src/molecules/Image/types.ts

@@ -1,8 +1,11 @@
 import { Image, GetProps } from 'antd';
+import { CompositionImage, ImageProps } from 'antd/es/image';
 import { ComponentToken as ImageComponentTokenAntd } from 'antd/es/image/style';
+import type { GroupConsumerProps } from 'rc-image/lib/PreviewGroup';
 
 //#region Define Ant Design types
-type ImagePropsAntd = GetProps<typeof Image>;
+type ImagePropsAntd = ImageProps;
+type PreviewGroupPropsAntd = GroupConsumerProps;
 //#endregion
 
 //#region Define extended component tokens
@@ -15,13 +18,18 @@ type ImagePropsExtend = {
     loading?: boolean;
     loadingType?: ImagePropsAntd['loading'];
 };
+
+type PreviewGroupPropsExtend = {};
 //#endregion
 
 //#region Export types
 export type RdImageProps = Omit<ImagePropsAntd, 'loading'> & ImagePropsExtend;
+export type RdPreviewGroupProps = PreviewGroupPropsAntd & PreviewGroupPropsExtend;
 export type RdImageComponentToken = ImageComponentTokenAntd & ImageComponentTokenExtend;
 //#endregion
 
 //#region Define component types
-export type RdImageComponent = React.FC<RdImageProps>;
+export type RdImageInternalComponent = React.FC<RdImageProps>;
+export type RdPreviewGroupComponent = React.FC<PreviewGroupPropsAntd>;
+export type RdImageCompositionComponent = CompositionImage<RdImageProps>;
 //#endregion

src/molecules/InputNumber/InputNumber.tsx

@@ -1,6 +1,14 @@
-import { InputNumberStyled } from './styles';
-import { RdInputNumberComponent, RdInputNumberProps } from './types';
+import { ValueType } from 'rc-input-number';
+import { useMemo } from 'react';
+import { InputNumberStyledFunc } from './styles';
+import { RdInputNumberProps } from './types';
+
+export const InputNumber = <T extends ValueType = ValueType>(
+    props: RdInputNumberProps<T>
+) => {
+    const InputNumberStyled = useMemo(() => {
+        return InputNumberStyledFunc<T>();
+    }, [InputNumberStyledFunc]);
 
-export const InputNumber: RdInputNumberComponent = (props: RdInputNumberProps) => {
     return <InputNumberStyled {...props} />;
 };

src/molecules/InputNumber/styles.tsx

@@ -1,4 +1,6 @@
 import styled from '@emotion/styled';
 import { InputNumber } from 'antd';
+import type { ValueType } from 'rc-input-number';
 
-export const InputNumberStyled = styled(InputNumber)``;
+export const InputNumberStyledFunc = <T extends ValueType = ValueType>() =>
+    styled(InputNumber<T>)``;

src/molecules/InputNumber/types.tsx

@@ -1,8 +1,10 @@
-import { GetProps, InputNumber } from 'antd';
+import { InputNumberProps } from 'antd';
 import { ComponentToken as InputNumberComponentTokenAntd } from 'antd/es/input-number/style';
+import type { ValueType } from 'rc-input-number';
+import React from 'react';
 
 //#region Define Ant Design types
-type InputNumberPropsAntd = GetProps<typeof InputNumber>;
+type InputNumberPropsAntd<T extends ValueType = ValueType> = InputNumberProps<T>;
 //#endregion
 
 //#region Define extended component tokens
@@ -14,12 +16,20 @@ type InputNumberPropsExtend = {};
 //#endregion
 
 //#region Export types
-export type RdInputNumberProps = InputNumberPropsAntd & InputNumberPropsExtend;
+export type RdInputNumberProps<T extends ValueType = ValueType> = InputNumberPropsAntd<T> &
+    InputNumberPropsExtend;
 
 export type RdInputNumberComponentToken = InputNumberComponentTokenAntd &
     InputNumberComponentTokenExtend;
 //#endregion
 
 //#region Define component types
-export type RdInputNumberComponent = React.FC<RdInputNumberProps>;
+export type RdInputNumberInternalComponent = <T extends ValueType = ValueType>(
+    props: React.PropsWithChildren<RdInputNumberProps<T>> & React.RefAttributes<HTMLInputElement>
+) => React.ReactElement;
+
+export type RdInputNumberComponent = RdInputNumberInternalComponent & {
+    displayName?: string;
+    _InternalPanelDoNotUseOrYouWillBeFired: React.FC<RdInputNumberProps>;
+};
 //#endregion

src/molecules/Slider/types.ts

@@ -1,8 +1,13 @@
-import { Slider, GetProps } from 'antd';
+import { GetProps, Slider, SliderSingleProps } from 'antd';
+import { SliderRangeProps } from 'antd/es/slider';
 import { ComponentToken as SliderComponentTokenAntd } from 'antd/es/slider/style';
+import type { SliderRef } from 'rc-slider/lib/Slider';
 
 //#region Define Ant Design types
 type SliderPropsAntd = GetProps<typeof Slider>;
+type SliderSinglePropsAntd = SliderSingleProps;
+type SliderRangePropsAntd = SliderRangeProps;
+type SliderRefAntd = SliderRef;
 //#endregion
 
 //#region Define extended component tokens
@@ -19,5 +24,7 @@ export type RdSliderComponentToken = SliderComponentTokenAntd & SliderComponentT
 //#endregion
 
 //#region Define component types
-export type RdSliderComponent = React.ForwardRefExoticComponent<SliderPropsAntd>;
+export type RdSliderComponent = React.ForwardRefExoticComponent<
+    (SliderSinglePropsAntd | SliderRangePropsAntd) & React.RefAttributes<SliderRefAntd>
+>;
 //#endregion

tsconfig.json

@@ -1,14 +1,15 @@
 {
     "compilerOptions": {
         "target": "es5",
+        "lib": ["es2016", "dom"],
         "module": "commonjs",
         "jsx": "react-jsx",
         "strict": true,
         "esModuleInterop": true,
         "skipLibCheck": true,
         "forceConsistentCasingInFileNames": true,
         "declaration": true,
-        "outDir": "./dist",
+        "outDir": "./dist"
 
         // "baseUrl": ".",
         // "paths": {