Skip to content

Commit 7043e2a

Browse files
KennethWiseKennethWise
authored
Merge pull request #17 from 1Byte-Software/develop
Fix bugs
2 parents 5639467 + 0f8d755 commit 7043e2a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+769
-423
lines changed

‎CHANGELOG.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Changelog
2+
3+
All notable changes to this project will be documented in this file.
4+
5+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
6+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7+
8+
## [1.6.1]
9+
10+
### Added
11+
12+
- Add getAliasToken helper function.
13+
- Add SplitScreen template.
14+
15+
### Changed
16+
17+
-
18+
19+
### Fixed
20+
21+
- Fix unnecessary rerender for Table.
22+
- Fix UploadDragger to Upload.Dragger
23+
24+
### Deprecated
25+
26+
- Deprecate getComponentOrGlobalToken helper function.
27+
28+
### Removed
29+
30+
- Remove secondary, tertiary, quaternary color.

‎package.json‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,14 @@
11
{
22
"name": "1byte-react-design",
3-
"version": "1.5.0",
3+
"version": "1.6.1",
44
"main": "dist/index.js",
55
"module": "dist/index.js",
66
"types": "dist/index.d.ts",
77
"license": "MIT",
88
"scripts": {
99
"build": "webpack --config webpack.config.js",
10-
"test": "webpack --config webpack.config.js && yalc publish --push --no-scripts"
10+
"test": "yalc publish --push --no-scripts --files ."
1111
},
12-
"files": [
13-
"dist"
14-
],
1512
"dependencies": {
1613
"@dnd-kit/core": "^6.3.1",
1714
"@dnd-kit/modifiers": "^9.0.0",

‎src/atomics/Typography/TypographyLink.helper.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { getAliasToken, RdAliasToken } from '../..';
2+
import { RdTypographyTextProps } from './types';
3+
4+
/**
5+
* Calculates the height in pixels of a Typography `Link` component
6+
* using the corresponding `fontSize` and `lineHeight`
7+
* token values from the design token system.
8+
*
9+
* @returns The calculated height in pixels (`fontSize * lineHeight`).
10+
*
11+
* @example
12+
* ```ts
13+
* const height = getHeight();
14+
* console.log(height); // e.g. 18 (depends on token values)
15+
* ```
16+
*/
17+
export const getHeight = () => {
18+
const detectedFontSize = getAliasToken('Typography', 'fontSize') as RdAliasToken['fontSize'];
19+
const detectedLineHeight = getAliasToken(
20+
'Typography',
21+
'lineHeight'
22+
) as RdAliasToken['lineHeight'];
23+
24+
const detectedHeight = detectedFontSize * detectedLineHeight;
25+
26+
return detectedHeight;
27+
};

‎src/atomics/Typography/TypographyLink.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,23 @@
11
import { forwardRef } from 'react';
2+
import { Skeleton } from '../../molecules';
23
import { TypographyLinkStyles } from './styles';
34
import { RdTypographyLinkProps } from './types';
4-
import { Skeleton } from '../../molecules';
5+
import { getHeight } from './TypographyLink.helper';
56

67
export const TypographyLink = forwardRef(
78
(props: RdTypographyLinkProps, ref: RdTypographyLinkProps['ref']) => {
89
const { loading, ...antdProps } = props;
910

10-
if (loading) return <Skeleton active />;
11+
if (loading) {
12+
return (
13+
<Skeleton.Input
14+
active
15+
style={{
16+
height: getHeight(),
17+
}}
18+
/>
19+
);
20+
}
1121

1222
return <TypographyLinkStyles ref={ref} {...antdProps} />;
1323
}

‎src/atomics/Typography/TypographyText.helper.ts‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { RdAliasToken } from '../../organisms';
2+
import { getAliasToken } from '../../utils';
3+
import { RdTypographyTextProps } from './types';
4+
5+
/**
6+
* Calculates the height in pixels of a Typography `Text` component
7+
* based on its `size` prop, using the corresponding `fontSize` and `lineHeight`
8+
* token values from the design token system.
9+
*
10+
* If an unknown size is provided, it will fallback to `'normal'` size
11+
* using the `fontSize` and `lineHeight` tokens.
12+
*
13+
* @param size - The `size` prop of the `Typography.Text` component. Possible values: `'normal'`, `'small'`.
14+
* @returns The calculated height in pixels (`fontSize * lineHeight`).
15+
*
16+
* @example
17+
* ```ts
18+
* const height = detectHeightBySize('small');
19+
* console.log(height); // e.g. 18 (depends on token values)
20+
* ```
21+
*/
22+
export const detectHeightBySize = (size: RdTypographyTextProps['size']) => {
23+
// Detect fontSize and lineHeight based on `size` prop
24+
let detectedFontSize: number | null = null;
25+
let detectedLineHeight: number | null = null;
26+
27+
switch (size) {
28+
case 'normal':
29+
detectedFontSize = getAliasToken('Typography', 'fontSize') as RdAliasToken['fontSize'];
30+
detectedLineHeight = getAliasToken(
31+
'Typography',
32+
'lineHeight'
33+
) as RdAliasToken['lineHeight'];
34+
break;
35+
36+
case 'small':
37+
detectedFontSize = getAliasToken(
38+
'Typography',
39+
'fontSizeSM'
40+
) as RdAliasToken['fontSizeSM'];
41+
detectedLineHeight = getAliasToken(
42+
'Typography',
43+
'lineHeightSM'
44+
) as RdAliasToken['lineHeightSM'];
45+
break;
46+
47+
default:
48+
// fallback to 'normal' size
49+
detectedFontSize = getAliasToken('Typography', 'fontSize') as RdAliasToken['fontSize'];
50+
detectedLineHeight = getAliasToken(
51+
'Typography',
52+
'lineHeight'
53+
) as RdAliasToken['lineHeight'];
54+
}
55+
56+
const detectedHeight = detectedFontSize * detectedLineHeight;
57+
58+
return detectedHeight;
59+
};

‎src/atomics/Typography/TypographyText.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { forwardRef, useMemo } from 'react';
2+
import { Skeleton } from '../../molecules';
23
import { TypographyTextStyles } from './styles';
34
import { RdTypographyTextProps } from './types';
4-
import { Skeleton } from '../../molecules';
5+
import { detectHeightBySize } from './TypographyText.helper';
56

67
export const TypographyText = forwardRef(
78
(props: RdTypographyTextProps, ref: RdTypographyTextProps['ref']) => {
@@ -14,7 +15,16 @@ export const TypographyText = forwardRef(
1415
...antdProps
1516
} = props;
1617

17-
if (loading) return <Skeleton.Input active />;
18+
if (loading) {
19+
return (
20+
<Skeleton.Input
21+
active
22+
style={{
23+
height: detectHeightBySize(size),
24+
}}
25+
/>
26+
);
27+
}
1828

1929
const editableCustom = useMemo(() => {
2030
if (editable && typeof editable === 'object') {

‎src/atomics/Typography/TypographyTitle.helper.ts‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { getAliasToken } from '../../utils';
2+
import { RdTypographyTitleProps } from './types';
3+
4+
/**
5+
* Calculates the visual height (in pixels) of a Typography Title component
6+
* based on its `level` prop, using the corresponding `fontSize` and `lineHeight`
7+
* token values from the theme (either component-specific or global).
8+
*
9+
* If an invalid level is provided (not from 1 to 5), it falls back to using
10+
* the level 1 (`fontSizeHeading1` and `lineHeightHeading1`) as default.
11+
*
12+
* @param level - The `level` prop of a `Typography.Title` component (typically from 1 to 5).
13+
* @returns The computed height in pixels (number), calculated as `fontSize * lineHeight`.
14+
*
15+
* @example
16+
* ```ts
17+
* const h1Height = detectHeightByLevel(1);
18+
* console.log(h1Height); // Example: 42 (depending on token values)
19+
*
20+
* const invalidHeight = detectHeightByLevel();
21+
* console.log(invalidHeight); // Fallbacks to heading1 height
22+
* ```
23+
*/
24+
export const detectHeightByLevel = (level: RdTypographyTitleProps['level']) => {
25+
// Detect fontSize and lineHeight based on `level` prop
26+
let detectedFontSize: number | null = null;
27+
let detectedLineHeight: number | null = null;
28+
29+
switch (level) {
30+
case 1:
31+
detectedFontSize = getAliasToken('Typography', 'fontSizeHeading1') as number;
32+
detectedLineHeight = getAliasToken('Typography', 'lineHeightHeading1') as number;
33+
break;
34+
case 2:
35+
detectedFontSize = getAliasToken('Typography', 'fontSizeHeading2') as number;
36+
detectedLineHeight = getAliasToken('Typography', 'lineHeightHeading2') as number;
37+
break;
38+
case 3:
39+
detectedFontSize = getAliasToken('Typography', 'fontSizeHeading3') as number;
40+
detectedLineHeight = getAliasToken('Typography', 'lineHeightHeading3') as number;
41+
break;
42+
case 4:
43+
detectedFontSize = getAliasToken('Typography', 'fontSizeHeading4') as number;
44+
detectedLineHeight = getAliasToken('Typography', 'lineHeightHeading4') as number;
45+
break;
46+
case 5:
47+
detectedFontSize = getAliasToken('Typography', 'fontSizeHeading5') as number;
48+
detectedLineHeight = getAliasToken('Typography', 'lineHeightHeading5') as number;
49+
break;
50+
default:
51+
// fallback to level 1 if the level is invalid
52+
detectedFontSize = getAliasToken('Typography', 'fontSizeHeading1') as number;
53+
detectedLineHeight = getAliasToken('Typography', 'lineHeightHeading1') as number;
54+
}
55+
56+
const detectedHeight = detectedFontSize * detectedLineHeight;
57+
58+
return detectedHeight;
59+
};

‎src/atomics/Typography/TypographyTitle.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,22 @@ import { forwardRef } from 'react';
22
import { Skeleton } from '../../molecules';
33
import { TypographyTitleStyles } from './styles';
44
import { RdTypographyTitleProps } from './types';
5+
import { detectHeightByLevel } from './TypographyTitle.helper';
56

67
export const TypographyTitle = forwardRef(
78
(props: RdTypographyTitleProps, ref: RdTypographyTitleProps['ref']) => {
89
const { disableMargin, loading, ...antdProps } = props;
910

10-
if (loading) return <Skeleton.Input active />;
11+
if (loading) {
12+
return (
13+
<Skeleton.Input
14+
active
15+
style={{
16+
height: detectHeightByLevel(props.level),
17+
}}
18+
/>
19+
);
20+
}
1121

1222
return <TypographyTitleStyles disableMargin={disableMargin} ref={ref} {...antdProps} />;
1323
}

‎src/atomics/Typography/styles.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1+
import { css } from '@emotion/react';
12
import styled from '@emotion/styled';
23
import { Typography } from 'antd';
3-
import { getComponentOrGlobalToken } from '../../utils/token';
4-
import { RdTypographyParagraphProps, RdTypographyTextProps, RdTypographyTitleProps } from './types';
5-
import { css } from '@emotion/react';
64
import { getExcludeForwardProps } from '../../utils/styles';
5+
import { RdTypographyParagraphProps, RdTypographyTextProps, RdTypographyTitleProps } from './types';
6+
import { getAliasToken } from '../../utils';
77

88
export const TypographyLinkStyles = styled(Typography.Link)``;
99

@@ -35,7 +35,7 @@ export const TypographyTextStyles = styled(Typography.Text, {
3535
switch (size) {
3636
case 'small':
3737
return `
38-
font-size: ${getComponentOrGlobalToken('Typography', 'fontSizeSM')}px;
38+
font-size: ${getAliasToken('Typography', 'fontSizeSM')}px;
3939
`;
4040
}
4141
}}
@@ -61,8 +61,8 @@ export const TypographyParagraphStyles = styled(Typography.Paragraph, {
6161
return (
6262
minRows &&
6363
css`
64-
min-height: ${Number(getComponentOrGlobalToken('Typography', 'lineHeight')) *
65-
Number(getComponentOrGlobalToken('Typography', 'fontSize')) *
64+
min-height: ${Number(getAliasToken('Typography', 'lineHeight')) *
65+
Number(getAliasToken('Typography', 'fontSize')) *
6666
minRows}px;
6767
`
6868
);

‎src/atomics/Typography/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,4 +67,5 @@ export type RdTypographyTitleProps = TypographyTitleProps & TypographyTitleProps
6767

6868
export type RdTypographyComponentToken = TypographyComponentTokenAntd &
6969
TypographyComponentTokenExtend;
70+
7071
//#endregion

0 commit comments

Comments
 (0)