Fix bugs

CHANGELOG.md

@@ -0,0 +1,30 @@
+# Changelog
+
+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.1]
+
+### Added
+
+-   Add getAliasToken helper function.
+-   Add SplitScreen template.
+
+### Changed
+
+-   
+
+### Fixed
+
+- Fix unnecessary rerender for Table.
+- Fix UploadDragger to Upload.Dragger
+
+### Deprecated
+
+-   Deprecate getComponentOrGlobalToken helper function.
+
+### Removed
+
+-   Remove secondary, tertiary, quaternary color.

package.json

@@ -1,17 +1,14 @@
 {
     "name": "1byte-react-design",
-    "version": "1.5.0",
+    "version": "1.6.1",
     "main": "dist/index.js",
     "module": "dist/index.js",
     "types": "dist/index.d.ts",
     "license": "MIT",
     "scripts": {
         "build": "webpack --config webpack.config.js",
-        "test": "webpack --config webpack.config.js && yalc publish --push --no-scripts"
+        "test": "yalc publish --push --no-scripts --files ."
     },
-    "files": [
-        "dist"
-    ],
     "dependencies": {
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/modifiers": "^9.0.0",

src/atomics/Typography/TypographyLink.helper.ts

@@ -0,0 +1,27 @@
+import { getAliasToken, RdAliasToken } from '../..';
+import { RdTypographyTextProps } from './types';
+
+/**
+ * Calculates the height in pixels of a Typography `Link` component
+ * using the corresponding `fontSize` and `lineHeight`
+ * token values from the design token system.
+ *
+ * @returns The calculated height in pixels (`fontSize * lineHeight`).
+ *
+ * @example
+ * ```ts
+ * const height = getHeight();
+ * console.log(height); // e.g. 18 (depends on token values)
+ * ```
+ */
+export const getHeight = () => {
+    const detectedFontSize = getAliasToken('Typography', 'fontSize') as RdAliasToken['fontSize'];
+    const detectedLineHeight = getAliasToken(
+        'Typography',
+        'lineHeight'
+    ) as RdAliasToken['lineHeight'];
+
+    const detectedHeight = detectedFontSize * detectedLineHeight;
+
+    return detectedHeight;
+};

src/atomics/Typography/TypographyLink.tsx

@@ -1,13 +1,23 @@
 import { forwardRef } from 'react';
+import { Skeleton } from '../../molecules';
 import { TypographyLinkStyles } from './styles';
 import { RdTypographyLinkProps } from './types';
-import { Skeleton } from '../../molecules';
+import { getHeight } from './TypographyLink.helper';
 
 export const TypographyLink = forwardRef(
     (props: RdTypographyLinkProps, ref: RdTypographyLinkProps['ref']) => {
         const { loading, ...antdProps } = props;
 
-        if (loading) return <Skeleton active />;
+        if (loading) {
+            return (
+                <Skeleton.Input
+                    active
+                    style={{
+                        height: getHeight(),
+                    }}
+                />
+            );
+        }
 
         return <TypographyLinkStyles ref={ref} {...antdProps} />;
     }

src/atomics/Typography/TypographyText.helper.ts

@@ -0,0 +1,59 @@
+import { RdAliasToken } from '../../organisms';
+import { getAliasToken } from '../../utils';
+import { RdTypographyTextProps } from './types';
+
+/**
+ * Calculates the height in pixels of a Typography `Text` component
+ * based on its `size` prop, using the corresponding `fontSize` and `lineHeight`
+ * token values from the design token system.
+ *
+ * If an unknown size is provided, it will fallback to `'normal'` size
+ * using the `fontSize` and `lineHeight` tokens.
+ *
+ * @param size - The `size` prop of the `Typography.Text` component. Possible values: `'normal'`, `'small'`.
+ * @returns The calculated height in pixels (`fontSize * lineHeight`).
+ *
+ * @example
+ * ```ts
+ * const height = detectHeightBySize('small');
+ * console.log(height); // e.g. 18 (depends on token values)
+ * ```
+ */
+export const detectHeightBySize = (size: RdTypographyTextProps['size']) => {
+    // Detect fontSize and lineHeight based on `size` prop
+    let detectedFontSize: number | null = null;
+    let detectedLineHeight: number | null = null;
+
+    switch (size) {
+        case 'normal':
+            detectedFontSize = getAliasToken('Typography', 'fontSize') as RdAliasToken['fontSize'];
+            detectedLineHeight = getAliasToken(
+                'Typography',
+                'lineHeight'
+            ) as RdAliasToken['lineHeight'];
+            break;
+
+        case 'small':
+            detectedFontSize = getAliasToken(
+                'Typography',
+                'fontSizeSM'
+            ) as RdAliasToken['fontSizeSM'];
+            detectedLineHeight = getAliasToken(
+                'Typography',
+                'lineHeightSM'
+            ) as RdAliasToken['lineHeightSM'];
+            break;
+
+        default:
+            // fallback to 'normal' size
+            detectedFontSize = getAliasToken('Typography', 'fontSize') as RdAliasToken['fontSize'];
+            detectedLineHeight = getAliasToken(
+                'Typography',
+                'lineHeight'
+            ) as RdAliasToken['lineHeight'];
+    }
+
+    const detectedHeight = detectedFontSize * detectedLineHeight;
+
+    return detectedHeight;
+};

src/atomics/Typography/TypographyText.tsx

@@ -1,7 +1,8 @@
 import { forwardRef, useMemo } from 'react';
+import { Skeleton } from '../../molecules';
 import { TypographyTextStyles } from './styles';
 import { RdTypographyTextProps } from './types';
-import { Skeleton } from '../../molecules';
+import { detectHeightBySize } from './TypographyText.helper';
 
 export const TypographyText = forwardRef(
     (props: RdTypographyTextProps, ref: RdTypographyTextProps['ref']) => {
@@ -14,7 +15,16 @@ export const TypographyText = forwardRef(
             ...antdProps
         } = props;
 
-        if (loading) return <Skeleton.Input active />;
+        if (loading) {
+            return (
+                <Skeleton.Input
+                    active
+                    style={{
+                        height: detectHeightBySize(size),
+                    }}
+                />
+            );
+        }
 
         const editableCustom = useMemo(() => {
             if (editable && typeof editable === 'object') {

src/atomics/Typography/TypographyTitle.helper.ts

@@ -0,0 +1,59 @@
+import { getAliasToken } from '../../utils';
+import { RdTypographyTitleProps } from './types';
+
+/**
+ * Calculates the visual height (in pixels) of a Typography Title component
+ * based on its `level` prop, using the corresponding `fontSize` and `lineHeight`
+ * token values from the theme (either component-specific or global).
+ *
+ * If an invalid level is provided (not from 1 to 5), it falls back to using
+ * the level 1 (`fontSizeHeading1` and `lineHeightHeading1`) as default.
+ *
+ * @param level - The `level` prop of a `Typography.Title` component (typically from 1 to 5).
+ * @returns The computed height in pixels (number), calculated as `fontSize * lineHeight`.
+ *
+ * @example
+ * ```ts
+ * const h1Height = detectHeightByLevel(1);
+ * console.log(h1Height); // Example: 42 (depending on token values)
+ *
+ * const invalidHeight = detectHeightByLevel();
+ * console.log(invalidHeight); // Fallbacks to heading1 height
+ * ```
+ */
+export const detectHeightByLevel = (level: RdTypographyTitleProps['level']) => {
+    // Detect fontSize and lineHeight based on `level` prop
+    let detectedFontSize: number | null = null;
+    let detectedLineHeight: number | null = null;
+
+    switch (level) {
+        case 1:
+            detectedFontSize = getAliasToken('Typography', 'fontSizeHeading1') as number;
+            detectedLineHeight = getAliasToken('Typography', 'lineHeightHeading1') as number;
+            break;
+        case 2:
+            detectedFontSize = getAliasToken('Typography', 'fontSizeHeading2') as number;
+            detectedLineHeight = getAliasToken('Typography', 'lineHeightHeading2') as number;
+            break;
+        case 3:
+            detectedFontSize = getAliasToken('Typography', 'fontSizeHeading3') as number;
+            detectedLineHeight = getAliasToken('Typography', 'lineHeightHeading3') as number;
+            break;
+        case 4:
+            detectedFontSize = getAliasToken('Typography', 'fontSizeHeading4') as number;
+            detectedLineHeight = getAliasToken('Typography', 'lineHeightHeading4') as number;
+            break;
+        case 5:
+            detectedFontSize = getAliasToken('Typography', 'fontSizeHeading5') as number;
+            detectedLineHeight = getAliasToken('Typography', 'lineHeightHeading5') as number;
+            break;
+        default:
+            // fallback to level 1 if the level is invalid
+            detectedFontSize = getAliasToken('Typography', 'fontSizeHeading1') as number;
+            detectedLineHeight = getAliasToken('Typography', 'lineHeightHeading1') as number;
+    }
+
+    const detectedHeight = detectedFontSize * detectedLineHeight;
+
+    return detectedHeight;
+};

src/atomics/Typography/TypographyTitle.tsx

@@ -2,12 +2,22 @@ import { forwardRef } from 'react';
 import { Skeleton } from '../../molecules';
 import { TypographyTitleStyles } from './styles';
 import { RdTypographyTitleProps } from './types';
+import { detectHeightByLevel } from './TypographyTitle.helper';
 
 export const TypographyTitle = forwardRef(
     (props: RdTypographyTitleProps, ref: RdTypographyTitleProps['ref']) => {
         const { disableMargin, loading, ...antdProps } = props;
 
-        if (loading) return <Skeleton.Input active />;
+        if (loading) {
+            return (
+                <Skeleton.Input
+                    active
+                    style={{
+                        height: detectHeightByLevel(props.level),
+                    }}
+                />
+            );
+        }
 
         return <TypographyTitleStyles disableMargin={disableMargin} ref={ref} {...antdProps} />;
     }

src/atomics/Typography/styles.tsx

@@ -1,9 +1,9 @@
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Typography } from 'antd';
-import { getComponentOrGlobalToken } from '../../utils/token';
-import { RdTypographyParagraphProps, RdTypographyTextProps, RdTypographyTitleProps } from './types';
-import { css } from '@emotion/react';
 import { getExcludeForwardProps } from '../../utils/styles';
+import { RdTypographyParagraphProps, RdTypographyTextProps, RdTypographyTitleProps } from './types';
+import { getAliasToken } from '../../utils';
 
 export const TypographyLinkStyles = styled(Typography.Link)``;
 
@@ -35,7 +35,7 @@ export const TypographyTextStyles = styled(Typography.Text, {
         switch (size) {
             case 'small':
                 return `
-                    font-size: ${getComponentOrGlobalToken('Typography', 'fontSizeSM')}px;
+                    font-size: ${getAliasToken('Typography', 'fontSizeSM')}px;
                 `;
         }
     }}
@@ -61,8 +61,8 @@ export const TypographyParagraphStyles = styled(Typography.Paragraph, {
         return (
             minRows &&
             css`
-                min-height: ${Number(getComponentOrGlobalToken('Typography', 'lineHeight')) *
-                Number(getComponentOrGlobalToken('Typography', 'fontSize')) *
+                min-height: ${Number(getAliasToken('Typography', 'lineHeight')) *
+                Number(getAliasToken('Typography', 'fontSize')) *
                 minRows}px;
             `
         );

src/atomics/Typography/types.ts

@@ -67,4 +67,5 @@ export type RdTypographyTitleProps = TypographyTitleProps & TypographyTitleProps
 
 export type RdTypographyComponentToken = TypographyComponentTokenAntd &
     TypographyComponentTokenExtend;
+
 //#endregion

src/config.ts

@@ -0,0 +1,20 @@
+import { theme } from 'antd';
+import { RdThemeConfig } from './organisms';
+
+export interface IConfig {
+    designToken: NonNullable<RdThemeConfig['token']>;
+    componentToken: RdThemeConfig['components'];
+}
+
+const defaultDesignToken = theme.getDesignToken(theme.defaultConfig);
+
+export var config: IConfig = {
+    designToken: defaultDesignToken,
+    componentToken: {},
+};
+
+declare module 'antd' {
+    interface DefaultOptionType {
+        value?: string | number | boolean | null;
+    }
+}

src/index.tsx

@@ -1,20 +1,10 @@
-import { theme } from 'antd';
-import { RdThemeConfig } from './organisms';
+export * from '@ant-design/icons';
 
-export interface IConfig {
-    designToken: NonNullable<RdThemeConfig['token']>;
-    componentToken: RdThemeConfig['components'];
-}
-
-export const config: IConfig = {
-    designToken: theme.getDesignToken(theme.defaultConfig),
-    componentToken: {},
-};
+export * from './config';
+export * from './types';
+export * from './utils';
 
 export * from './atomics';
 export * from './molecules';
 export * from './organisms';
-export * from './templates';
-export * from './utils';
-
-export * from './types'
+export * from './templates';

src/molecules/Button/index.tsx

@@ -1,2 +1,3 @@
 export * from "./Button";
-export * from "./types";
+export * from "./types";
+export * from './token'

src/molecules/Button/styles.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Button } from 'antd';
-import { getComponentOrGlobalToken, getExcludeForwardProps } from '../../utils';
+import { getAliasToken, getExcludeForwardProps } from '../../utils';
 import { RdButtonComponent, RdButtonGroupProps, RdButtonProps } from './types';
 
 export const ButtonStyles = styled(Button as RdButtonComponent, {
@@ -20,7 +20,7 @@ export const ButtonStyles = styled(Button as RdButtonComponent, {
             case 'success':
                 return css`
                     &.ant-btn {
-                        color: ${getComponentOrGlobalToken('Button', 'colorSuccess')};
+                        color: ${getAliasToken('Button', 'colorSuccess')};
                     }
                 `;
             default: