Merge pull request #109 from openinfradev/feature-upgrade-react-19

Feature. Upgrade react version to 18.3 (prepare v19)
openinfradev · Jul 23, 2024 · abec06c · abec06c
2 parents 178b64d + c3fa8c4
commit abec06c
Show file tree

Hide file tree

Showing 43 changed files with 623 additions and 452 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "tksui-components",
-    "version": "0.7.17",
+    "version": "0.8.0",
     "private": false,
     "type": "module",
     "module": "lib/esm/index.js",
@@ -29,24 +29,25 @@
         "@babel/preset-env": "^7.22.10",
         "@babel/preset-react": "^7.22.5",
         "@babel/preset-typescript": "^7.22.5",
-        "@storybook/addon-actions": "^7.5.1",
-        "@storybook/addon-essentials": "^7.5.1",
-        "@storybook/addon-interactions": "^7.5.1",
-        "@storybook/addon-links": "^7.5.1",
+        "@storybook/addon-actions": "^8.2.4",
+        "@storybook/addon-essentials": "^8.2.4",
+        "@storybook/addon-interactions": "^8.2.4",
+        "@storybook/addon-links": "^8.2.4",
         "@storybook/preset-scss": "^1.0.3",
-        "@storybook/react": "^7.5.1",
-        "@storybook/react-vite": "^7.5.1",
-        "@storybook/testing-library": "^0.2.2",
+        "@storybook/react": "^8.2.4",
+        "@storybook/react-vite": "^8.2.4",
+        "@storybook/test": "^8.2.4",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^14.0.0",
         "@testing-library/user-event": "^14.4.3",
         "@types/jest": "^29.5.4",
         "@types/react": "^18.0.37",
         "@types/react-dom": "^18.0.11",
+        "@types/react-modal": "^3.16.3",
         "@types/react-slick": "^0.23.11",
         "@typescript-eslint/eslint-plugin": "^5.59.0",
         "@typescript-eslint/parser": "^5.59.0",
-        "@vitejs/plugin-react": "^4.0.0",
+        "@vitejs/plugin-react": "^4.3.1",
         "esbuild": "^0.19.5",
         "eslint": "^8.38.0",
         "eslint-config-airbnb-base": "^15.0.0",
@@ -59,29 +60,29 @@
         "eslint-plugin-storybook": "^0.6.15",
         "eslint-plugin-testing-library": "^5.10.2",
         "fs-extra": "^11.1.1",
-        "glob": "^10.3.10",
-        "jest": "^29.6.3",
-        "jest-environment-jsdom": "^29.6.3",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "rimraf": "^5.0.1",
+        "glob": "^11.0.0",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "rimraf": "^6.0.1",
         "rollup-plugin-visualizer": "^5.9.2",
         "sass": "^1.69.1",
-        "storybook": "^7.5.1",
+        "storybook": "^8.2.4",
         "ts-jest": "^29.1.1",
         "tsc-alias": "^1.8.7",
         "typescript": "^5.0.2",
         "typescript-plugin-css-modules": "^5.0.2",
-        "vite": "^5.0.10",
+        "vite": "^5.3.3",
         "vite-plugin-compression2": "^0.10.4"
     },
     "peerDependencies": {
         "react": "^18.0.0"
     },
     "dependencies": {
         "@material-symbols/font-300": "^0.14.5",
-        "ag-grid-community": "^30.0.6",
-        "ag-grid-react": "^30.0.6",
+        "ag-grid-community": "^32.0.2",
+        "ag-grid-react": "^32.0.2",
         "lodash": "^4.17.21",
         "react-modal": "^3.16.1",
         "react-slick": "^0.29.0",
@@ -95,6 +96,5 @@
     "bugs": {
         "url": "https://github.com/openinfradev/tksui-components/issues"
     },
-    "license": "MIT",
-    "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
+    "license": "MIT"
 }
diff --git a/src/components/button/button-group/TButtonGroup.tsx b/src/components/button/button-group/TButtonGroup.tsx
@@ -3,16 +3,33 @@ import TButton from '../button/TButton';
 import {buttonGroupSize, TButtonGroupProps, TButtonGroupValue} from '@/components';
 
 
-const TButtonGroup = (props: TButtonGroupProps) => {
+const TButtonGroup = ({
+    disabled = false,
+
+    onChange,
+    ...restProps
+}: TButtonGroupProps) => {
+
+    const props: TButtonGroupProps = {disabled, onChange, ...restProps};
 
     // region [Styles]
 
     const $_size = useMemo(() => {
-        if (props.size && props.size in buttonGroupSize) { return props.size; }
-        if (props.xsmall) { return buttonGroupSize.xsmall; }
-        if (props.small) { return buttonGroupSize.small; }
-        if (props.medium) { return buttonGroupSize.medium; }
-        if (props.large) { return buttonGroupSize.large; }
+        if (props.size && props.size in buttonGroupSize) {
+            return props.size;
+        }
+        if (props.xsmall) {
+            return buttonGroupSize.xsmall;
+        }
+        if (props.small) {
+            return buttonGroupSize.small;
+        }
+        if (props.medium) {
+            return buttonGroupSize.medium;
+        }
+        if (props.large) {
+            return buttonGroupSize.large;
+        }
         return buttonGroupSize.medium;
     }, [props.size, props.xsmall, props.small, props.medium, props.large]);
 
@@ -25,21 +42,35 @@ const TButtonGroup = (props: TButtonGroupProps) => {
         // }
 
         clazz.push(`t-button-group--${$_size}`);
-        if (props.className) { clazz.push(props.className); }
-        if (props.variant) { clazz.push(`t-button-group--${props.variant}`); }
-        if (props.primary) { clazz.push('t-button-group--primary'); }
-        if (props.main) { clazz.push('t-button-group--main'); }
+        if (props.className) {
+            clazz.push(props.className);
+        }
+        if (props.variant) {
+            clazz.push(`t-button-group--${props.variant}`);
+        }
+        if (props.primary) {
+            clazz.push('t-button-group--primary');
+        }
+        if (props.main) {
+            clazz.push('t-button-group--main');
+        }
 
-        if (props.multiSelect) { clazz.push('t-button-group--multi-select'); }
-        if (props.disabled) { clazz.push('t-button-group--disabled'); }
+        if (props.multiSelect) {
+            clazz.push('t-button-group--multi-select');
+        }
+        if (props.disabled) {
+            clazz.push('t-button-group--disabled');
+        }
 
         return clazz.join(' ');
     }, [props.variant, props.primary, props.main, props.className, props.multiSelect, props.disabled, $_size]);
 
     const rootStyle = useMemo((): CSSProperties => {
         let style: CSSProperties = {};
 
-        if (props.style) { style = {...props.style}; }
+        if (props.style) {
+            style = {...props.style};
+        }
 
         return style;
     }, [props.style]);
@@ -55,17 +86,17 @@ const TButtonGroup = (props: TButtonGroupProps) => {
     const updateMultiSelectValue = useCallback((value: TButtonGroupValue, currentStatus: boolean) => {
         if (currentStatus) {
             const newValue = props.value.filter((val) => JSON.stringify(val) !== JSON.stringify(value));
-            props.onChange(newValue);
+            onChange(newValue);
         } else {
             const newValue = props.value.concat(value);
-            props.onChange(newValue);
+            onChange(newValue);
         }
         return value;
-    }, [props]);
+    }, [onChange, props.value]);
 
     const updateSingleSelectValue = useCallback((value: TButtonGroupValue) => {
-        props.onChange(value);
-    }, [props]);
+        onChange(value);
+    }, [onChange]);
 
     const isActive = useCallback((value) => {
         if (props.multiSelect) {
@@ -117,9 +148,5 @@ const TButtonGroup = (props: TButtonGroupProps) => {
 
 TButtonGroup.displayName = 'TButtonGroup';
 
-TButtonGroup.defaultProps = {
-    disabled: false,
-};
-
 
 export default TButtonGroup;
diff --git a/src/components/button/icon-button/TIconButton.tsx b/src/components/button/icon-button/TIconButton.tsx
@@ -1,15 +1,22 @@
 import {CSSProperties, forwardRef, KeyboardEvent, MouseEvent, Ref, useCallback, useImperativeHandle, useMemo, useRef} from 'react';
-import {TIconButtonProps, TIconButtonRef} from './TIconButton.interface';
+import {TIconButtonProps, TIconButtonRef} from '@/components';
 import useRipple from '@/common/hook/UseRipple';
 import TIcon from '../../icon/TIcon';
 import themeToken from '~style/designToken/ThemeToken.module.scss';
 import TooltipUtil from '@/common/util/TooltipUtil';
 
 
-const TIconButton = forwardRef((props: TIconButtonProps, ref: Ref<TIconButtonRef>) => {
+const TIconButton = forwardRef(({
+    shape = 'circle',
+    outline = 'elevation',
+    onClick,
+    ...restProps
+}: TIconButtonProps, ref: Ref<TIconButtonRef>) => {
 
     // region [Hooks]
 
+    const props: TIconButtonProps = {shape, outline, onClick, ...restProps};
+
     const rootRef = useRef<HTMLButtonElement>(null);
 
     const ripple = useRipple(rootRef);
@@ -19,8 +26,8 @@ const TIconButton = forwardRef((props: TIconButtonProps, ref: Ref<TIconButtonRef
             rootRef?.current?.focus();
         },
         click() {
-            if (!props.disabled && props.onClick) {
-                props.onClick();
+            if (!props.disabled && onClick) {
+                onClick();
             }
         },
     }));
@@ -64,10 +71,10 @@ const TIconButton = forwardRef((props: TIconButtonProps, ref: Ref<TIconButtonRef
 
     const onMouseUp = useCallback((event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>): void => {
         ripple.remove();
-        if (!props.disabled && props.onClick) {
-            props.onClick(event);
+        if (!props.disabled && onClick) {
+            onClick(event);
         }
-    }, [props, ripple]);
+    }, [onClick, props.disabled, ripple]);
 
     const onMouseLeave = useCallback((): void => {
         ripple.remove();
@@ -81,9 +88,9 @@ const TIconButton = forwardRef((props: TIconButtonProps, ref: Ref<TIconButtonRef
     const onKeyUp = useCallback((event: KeyboardEvent): void => {
         if (event.key === 'Enter' || event.key === ' ') {
             ripple.remove();
-            if (props.onClick) { props.onClick(event); }
+            if (onClick) { onClick(event); }
         }
-    }, [props, ripple]);
+    }, [onClick, ripple]);
 
     // endregion
 
@@ -112,9 +119,4 @@ const TIconButton = forwardRef((props: TIconButtonProps, ref: Ref<TIconButtonRef
 
 TIconButton.displayName = 'TIconButton';
 
-TIconButton.defaultProps = {
-    shape: 'circle',
-    outline: 'elevation',
-};
-
 export default TIconButton;
diff --git a/src/components/data-container/action-bar/TActionBar.tsx b/src/components/data-container/action-bar/TActionBar.tsx
@@ -1,5 +1,5 @@
 import {CSSProperties, useMemo} from 'react';
-import {TActionBarProps} from './TActionBar.interface';
+import {TActionBarProps} from '@/components';
 
 function TActionBar(props: TActionBarProps) {
 

diff --git a/src/components/data-container/card/TCard.tsx b/src/components/data-container/card/TCard.tsx
@@ -1,9 +1,19 @@
 import {CSSProperties, useMemo} from 'react';
 import {TIcon} from '~/icon';
-import {TCardProps} from './TCard.interface';
+import {TCardProps} from '@/components';
 import TooltipUtil from '@/common/util/TooltipUtil';
 
-const TCard = (props: TCardProps) => {
+const TCard = ({
+    iconSize = 'xlarge',
+    ...restProps
+}: TCardProps) => {
+
+    // region [Hooks]
+
+    const props = {iconSize, ...restProps};
+
+    // endregion
+
 
     // region [Templates]
 
@@ -67,11 +77,6 @@ const TCard = (props: TCardProps) => {
     );
 };
 
-TCard.defaultProps = {
-    iconSize: 'xlarge',
-    iconType: 'outlined',
-};
-
 TCard.displayName = 'TCard';
 
 

diff --git a/src/components/data-container/card/TCardContent.tsx b/src/components/data-container/card/TCardContent.tsx
@@ -1,11 +1,11 @@
 import {CSSProperties, useMemo} from 'react';
-import {TCardContentProps} from './TCard.interface';
+import {TCardContentProps} from '@/components';
 
-const TCardContent = (props: TCardContentProps) => {
-
-    // region [Hooks]
-
-    const {className, style} = props;
+const TCardContent = ({
+    className,
+    style,
+    ...restProps
+}: TCardContentProps) => {
 
 
     // region [Templates]
@@ -26,13 +26,12 @@ const TCardContent = (props: TCardContentProps) => {
     // endregion
 
     return (
-        <section className={`t-card-content ${rootClass}`} style={rootStyle} id={props.id} data-testid={'card-content-root'}>
-            {props.children}
+        <section className={`t-card-content ${rootClass}`} style={rootStyle} id={restProps.id} data-testid={'card-content-root'}>
+            {restProps.children}
         </section>
     );
 };
 
-TCardContent.defaultProps = {};
 
 TCardContent.displayName = 'TCard';
 

diff --git a/src/components/data-container/card/TCardHeader.tsx b/src/components/data-container/card/TCardHeader.tsx
@@ -2,11 +2,16 @@ import {CSSProperties, useMemo} from 'react';
 import {TCardHeaderProps} from './TCard.interface';
 import {TIcon} from '~/icon';
 
-const TCardHeader = (props: TCardHeaderProps) => {
+const TCardHeader = ({
+    className,
+    style,
+    iconSize = 'large',
+    ...restProps
+}: TCardHeaderProps) => {
 
     // region [Hooks]
 
-    const {className, style} = props;
+    const props: TCardHeaderProps = {className, style, iconSize, ...restProps};
 
 
     // region [Privates]
@@ -22,7 +27,7 @@ const TCardHeader = (props: TCardHeaderProps) => {
         if (props.icon) { clazz.push('t-card-header--with-icon'); }
 
         return clazz.join(' ');
-    }, [className]);
+    }, [className, props.icon]);
 
     const rootStyle = useMemo((): CSSProperties => {
         if (style) { return style; }
@@ -54,12 +59,7 @@ const TCardHeader = (props: TCardHeaderProps) => {
     );
 };
 
-TCardHeader.defaultProps = {
-    iconSize: 'large',
-    iconType: 'outlined',
-};
-
-TCardHeader.displayName = 'TCard';
+TCardHeader.displayName = 'TCardHeader';
 
 
 export default TCardHeader;