Skip to content

Commit 0fc0b06

Browse files
author
Kenneth
committed
fix: fix type for pnpm build ci/cd
1 parent 0010340 commit 0fc0b06

File tree

15 files changed

+135
-36
lines changed

15 files changed

+135
-36
lines changed

‎package.json‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "1byte-react-design",
3-
"version": "1.6.3-1",
3+
"version": "1.6.3-2",
44
"main": "dist/index.js",
55
"module": "dist/index.js",
66
"types": "dist/index.d.ts",
@@ -10,10 +10,12 @@
1010
"license": "MIT",
1111
"scripts": {
1212
"build": "webpack --config webpack.config.js",
13-
"test": "yalc publish --push --no-scripts --files ."
13+
"test": "yalc publish --push --no-scripts --files .",
14+
"tsc": "tsc -p tsconfig.json"
1415
},
1516
"dependencies": {
1617
"@ant-design/cssinjs": "^1.24.0",
18+
"@ant-design/cssinjs-utils": "^1.1.3",
1719
"@ant-design/icons": "^6.0.1",
1820
"@dnd-kit/core": "^6.3.1",
1921
"@dnd-kit/modifiers": "^9.0.0",
@@ -26,6 +28,9 @@
2628
"dayjs": "^1.11.13",
2729
"polished": "^4.3.1",
2830
"rc-field-form": "^2.7.0",
31+
"rc-image": "^7.12.0",
32+
"rc-input-number": "^9.5.0",
33+
"rc-slider": "^11.1.8",
2934
"rc-table": "^7.53.0",
3035
"rc-tree": "^5.13.1",
3136
"react": "^18.3.1",

‎pnpm-lock.yaml‎

Lines changed: 15 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/molecules/ColorPicker/ColorPicker.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import { ColorPickerStyles } from './styles';
2-
import { RdColorPickerComponent } from './types';
2+
import { RdColorPickerCompoundedComponent, RdColorPickerInternalComponent } from './types';
33

4-
export const ColorPicker: RdColorPickerComponent = props => {
4+
export const ColorPickerInternal: RdColorPickerInternalComponent = props => {
55
return <ColorPickerStyles {...props} />;
66
};
7+
8+
export const ColorPicker = ColorPickerInternal as RdColorPickerCompoundedComponent;
9+

‎src/molecules/ColorPicker/styles.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import styled from '@emotion/styled';
1+
import styled, { StyledComponent } from '@emotion/styled';
22
import { ColorPicker } from 'antd';
33
import { getExcludeForwardProps } from '../../utils';
44
import { RdColorPickerProps } from './types';
55

6-
export const ColorPickerStyles = styled(ColorPicker, {
6+
export const ColorPickerStyles: StyledComponent<RdColorPickerProps> = styled(ColorPicker, {
77
shouldForwardProp: prop =>
88
getExcludeForwardProps<RdColorPickerProps>(
99
['readonly'] as (keyof RdColorPickerProps)[],

‎src/molecules/ColorPicker/types.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { ColorPicker, GetProps } from 'antd';
1+
import { ColorPickerProps } from 'antd';
22
import { ComponentToken as ColorPickerComponentTokenAntd } from 'antd/es/color-picker/style';
3+
import { ColorPickerInternal } from './ColorPicker';
34

45
//#region Define Ant Design types
5-
type ColorPickerPropsAntd = GetProps<typeof ColorPicker>;
6+
type ColorPickerPropsAntd = ColorPickerProps;
67
//#endregion
78

89
//#region Define extended component tokens
@@ -29,5 +30,7 @@ export type RdColorPickerComponentToken = ColorPickerComponentTokenAntd &
2930
//#endregion
3031

3132
//#region Define component types
32-
export type RdColorPickerComponent = React.FC<RdColorPickerProps>;
33+
export type RdColorPickerInternalComponent = React.FC<RdColorPickerProps>;
34+
35+
export type RdColorPickerCompoundedComponent = typeof ColorPickerInternal & {};
3336
//#endregion

‎src/molecules/DatePicker/styles.tsx‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,26 @@
1-
import styled from '@emotion/styled';
1+
import styled, { StyledComponent } from '@emotion/styled';
22
import { DatePicker } from 'antd';
3+
import {
4+
RdDatePickerProps,
5+
RdMonthPickerProps,
6+
RdQuarterPickerProps,
7+
RdRangePickerProps,
8+
RdTimePickerProps,
9+
RdWeekPickerProps,
10+
RdYearPickerProps,
11+
} from './types';
312

4-
export const DatePickerStyles = styled(DatePicker)``;
5-
export const WeekPickerStyles = styled(DatePicker.WeekPicker)``;
6-
export const MonthPickerStyles = styled(DatePicker.MonthPicker)``;
7-
export const YearPickerStyles = styled(DatePicker.YearPicker)``;
8-
export const RangePickerStyles = styled(DatePicker.RangePicker)``;
9-
export const TimePickerStyles = styled(DatePicker.TimePicker)``;
10-
export const QuarterPickerStyles = styled(DatePicker.QuarterPicker)``;
13+
export const DatePickerStyles: StyledComponent<RdDatePickerProps> = styled(DatePicker)``;
14+
15+
export const WeekPickerStyles: StyledComponent<RdWeekPickerProps> = styled(DatePicker.WeekPicker)``;
16+
export const MonthPickerStyles: StyledComponent<RdMonthPickerProps> = styled(
17+
DatePicker.MonthPicker
18+
)``;
19+
export const YearPickerStyles: StyledComponent<RdYearPickerProps> = styled(DatePicker.YearPicker)``;
20+
export const RangePickerStyles: StyledComponent<RdRangePickerProps> = styled(
21+
DatePicker.RangePicker
22+
)``;
23+
export const TimePickerStyles: StyledComponent<RdTimePickerProps> = styled(DatePicker.TimePicker)``;
24+
export const QuarterPickerStyles: StyledComponent<RdQuarterPickerProps> = styled(
25+
DatePicker.QuarterPicker
26+
)``;

‎src/molecules/Image/Image.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
import { Skeleton } from '../Skeleton';
2-
import { ImageStyles } from './styles';
3-
import { RdImageComponent } from './types';
2+
import { PreviewGroup } from './PreviewGroup';
3+
import { ImageStyled } from './styles';
4+
import { RdImageCompositionComponent, RdImageInternalComponent } from './types';
45

5-
export const Image: RdImageComponent = props => {
6+
const ImageInternal: RdImageInternalComponent = props => {
67
const { loading = false, ...antdProps } = props;
78

89
return (
910
<>
1011
{/**
1112
* Note:
1213
* Previously, when `loading = true`, the component only rendered the `Skeleton.Node`
13-
* and skipped rendering the `ImageStyles` completely.
14+
* and skipped rendering the `ImageStyled` completely.
1415
*
1516
* However, in that case, the `img` element was never created, so the browser wouldn't start downloading the image,
1617
* and we couldn't catch the `onLoad` event.
@@ -31,7 +32,11 @@ export const Image: RdImageComponent = props => {
3132
}}
3233
/>
3334
)}
34-
<ImageStyles hidden={loading} {...antdProps} />
35+
<ImageStyled hidden={loading} {...antdProps} />
3536
</>
3637
);
3738
};
39+
40+
export const Image = ImageInternal as RdImageCompositionComponent;
41+
42+
Image.PreviewGroup = PreviewGroup;

‎src/molecules/Image/PreviewGroup.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { PreviewGroupStyled } from './styles';
2+
import { RdPreviewGroupComponent } from './types';
3+
4+
export const PreviewGroup: RdPreviewGroupComponent = props => {
5+
const { ...antdProps } = props;
6+
7+
return <PreviewGroupStyled {...antdProps} />;
8+
};

‎src/molecules/Image/styles.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,13 @@ import { Image } from 'antd';
33
import { getExcludeForwardProps } from '../../utils';
44
import { RdImageProps } from './types';
55

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

‎src/molecules/Image/types.ts‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import { Image, GetProps } from 'antd';
2+
import { CompositionImage, ImageProps } from 'antd/es/image';
23
import { ComponentToken as ImageComponentTokenAntd } from 'antd/es/image/style';
4+
import type { GroupConsumerProps } from 'rc-image/lib/PreviewGroup';
35

46
//#region Define Ant Design types
5-
type ImagePropsAntd = GetProps<typeof Image>;
7+
type ImagePropsAntd = ImageProps;
8+
type PreviewGroupPropsAntd = GroupConsumerProps;
69
//#endregion
710

811
//#region Define extended component tokens
@@ -15,13 +18,18 @@ type ImagePropsExtend = {
1518
loading?: boolean;
1619
loadingType?: ImagePropsAntd['loading'];
1720
};
21+
22+
type PreviewGroupPropsExtend = {};
1823
//#endregion
1924

2025
//#region Export types
2126
export type RdImageProps = Omit<ImagePropsAntd, 'loading'> & ImagePropsExtend;
27+
export type RdPreviewGroupProps = PreviewGroupPropsAntd & PreviewGroupPropsExtend;
2228
export type RdImageComponentToken = ImageComponentTokenAntd & ImageComponentTokenExtend;
2329
//#endregion
2430

2531
//#region Define component types
26-
export type RdImageComponent = React.FC<RdImageProps>;
32+
export type RdImageInternalComponent = React.FC<RdImageProps>;
33+
export type RdPreviewGroupComponent = React.FC<PreviewGroupPropsAntd>;
34+
export type RdImageCompositionComponent = CompositionImage<RdImageProps>;
2735
//#endregion

0 commit comments

Comments
 (0)