✨ feat: bump deps and refactor the flex basic (#10)

BREAKING CHANGES: need react >= 19

Author: arvinxx

CHANGELOG.md

@@ -1,5 +1,34 @@
 # Changelog
 
+## [Version 2.0.0-beta.1](https://github.com/arvinxx/react-layout-kit/compare/v1.9.2...v2.0.0-beta.1)
+
+<sup>Released on **2025-07-25**</sup>
+
+#### ✨ 新特性
+
+- Bump deps and refactor the basic.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- Bump deps and refactor the basic ([4efb9de](https://github.com/arvinxx/react-layout-kit/commit/4efb9de))
+
+</details>
+
+#### 💥 BREAKING CHANGES
+
+- need react >= 19
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version&nbsp;1.9.2](https://github.com/arvinxx/react-layout-kit/compare/v1.9.1...v1.9.2)
 
 <sup>Released on **2025-07-18**</sup>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-layout-kit",
-  "version": "1.9.2",
+  "version": "2.0.0-beta.1",
   "description": "a npm develop template",
   "keywords": [
     "react",
@@ -59,8 +59,8 @@
     ]
   },
   "dependencies": {
-    "@babel/runtime": "^7",
-    "@emotion/css": "^11"
+    "@babel/runtime": "^7.28.2",
+    "@emotion/css": "^11.13.5"
   },
   "devDependencies": {
     "@commitlint/cli": "^17",
@@ -89,16 +89,16 @@
     "prettier": "^2",
     "prettier-plugin-organize-imports": "^3",
     "prettier-plugin-packagejson": "^2",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "semantic-release": "^20",
     "semantic-release-config-gitmoji": "^1",
     "stylelint": "^14",
     "typescript": "^5",
     "vitest": "^3.2.4"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=19"
   },
   "publishConfig": {
     "access": "public",

src/Center/index.tsx

@@ -3,24 +3,21 @@
 import FlexBasic, { FlexBasicProps } from '@/FlexBasic';
 import { CommonProps } from '@/type';
 import { getPrefix } from '@/utils';
-import { forwardRef } from 'react';
+import { memo } from 'react';
 
 export type CenterProps = Omit<FlexBasicProps, 'distribution' | 'direction' | 'align'>;
 
-const Center = forwardRef<HTMLElement, CenterProps & CommonProps>(
-  ({ children, className, prefixCls, ...res }, ref) => (
-    <FlexBasic
-      ref={ref}
-      internalClassName={`${getPrefix(prefixCls)}-center`}
-      className={className}
-      {...res}
-      align={'center'}
-      justify={'center'}
-    >
-      {children}
-    </FlexBasic>
-  ),
-);
+const Center = memo<CenterProps & CommonProps>(({ children, className, prefixCls, ...res }) => (
+  <FlexBasic
+    internalClassName={`${getPrefix(prefixCls)}-center`}
+    className={className}
+    {...res}
+    align={'center'}
+    justify={'center'}
+  >
+    {children}
+  </FlexBasic>
+));
 
 Center.displayName = 'Center';
 

src/FlexBasic/index.tsx

@@ -1,7 +1,7 @@
 import { ContentPosition, DivProps, FlexDirection } from '@/type';
 import { getCssValue, getFlexDirection, isHorizontal, isSpaceDistribution } from '@/utils';
 import { css, cx } from '@emotion/css';
-import { CSSProperties, ElementType, forwardRef, useMemo } from 'react';
+import { CSSProperties, ElementType, memo, Ref, useMemo } from 'react';
 
 export type CommonSpaceNumber = 2 | 4 | 8 | 12 | 16 | 24;
 
@@ -89,46 +89,46 @@ export interface IFlexbox {
   as?: ElementType;
 }
 
-export interface FlexBasicProps extends IFlexbox, Omit<DivProps, 'ref'> {
+export interface FlexBasicProps extends IFlexbox, DivProps {
   internalClassName?: string;
+  ref?: Ref<any>;
 }
 
-const FlexBasic = forwardRef<any, FlexBasicProps>(
-  (
-    {
-      visible,
-      flex,
-      gap,
-      direction,
-      horizontal,
-      align,
-      justify,
-      distribution,
-      height,
-      width,
-      padding,
-      paddingInline,
-      paddingBlock,
-      as: Container = 'div',
-      internalClassName,
-      className,
-      children,
-      wrap,
-      ...props
-    },
+const FlexBasic = memo<FlexBasicProps>(
+  ({
+    visible,
+    flex,
+    gap,
+    direction,
+    horizontal,
+    align,
+    justify,
+    distribution,
+    height,
+    width,
+    padding,
+    paddingInline,
+    paddingBlock,
+    as: Container = 'div',
+    internalClassName,
+    className,
+    children,
+    wrap,
     ref,
-  ) => {
+    ...props
+  }) => {
     const justifyContent = justify || distribution;
 
-    const finalWidth = useMemo(() => {
-      if (isHorizontal(direction, horizontal) && !width && isSpaceDistribution(justifyContent))
-        return '100%';
+    const mergedClassName = useMemo(() => {
+      const calcWidth = () => {
+        if (isHorizontal(direction, horizontal) && !width && isSpaceDistribution(justifyContent))
+          return '100%';
 
-      return getCssValue(width);
-    }, [direction, horizontal, justifyContent, width]);
+        return getCssValue(width);
+      };
+      const finalWidth = calcWidth();
 
-    const funcClassName = useMemo(
-      () => css`
+      const funcClassName = css`
         display: ${visible === false ? 'none' : 'flex'};
 
         flex: ${flex};
@@ -148,26 +148,29 @@ const FlexBasic = forwardRef<any, FlexBasicProps>(
         padding-block: ${getCssValue(paddingBlock)};
 
         gap: ${getCssValue(gap)};
-      `,
-      [
-        visible,
-        flex,
-        direction,
-        horizontal,
-        wrap,
-        justifyContent,
-        align,
-        finalWidth,
-        height,
-        padding,
-        paddingInline,
-        paddingBlock,
-        gap,
-      ],
-    );
+      `;
+
+      return cx(internalClassName, funcClassName, className);
+    }, [
+      visible,
+      flex,
+      direction,
+      horizontal,
+      width,
+      wrap,
+      justifyContent,
+      align,
+      height,
+      padding,
+      paddingInline,
+      paddingBlock,
+      gap,
+      internalClassName,
+      className,
+    ]);
 
     return (
-      <Container ref={ref} {...props} className={cx(internalClassName, funcClassName, className)}>
+      <Container ref={ref} {...props} className={mergedClassName}>
         {children}
       </Container>
     );

src/Flexbox/index.tsx

@@ -1,25 +1,18 @@
 'use client';
 
-import { forwardRef } from 'react';
+import { memo } from 'react';
 
 import FlexBasic, { FlexBasicProps } from '@/FlexBasic';
 import { CommonProps } from '@/type';
 import { getPrefix } from '@/utils';
 
 export type FlexboxProps = FlexBasicProps & CommonProps;
 
-const Flexbox = forwardRef<HTMLElement, FlexboxProps>(
-  ({ className, prefixCls, children, ...props }, ref) => (
-    <FlexBasic
-      ref={ref}
-      {...props}
-      internalClassName={`${getPrefix(prefixCls)}-flexbox`}
-      className={className}
-    >
-      {children}
-    </FlexBasic>
-  ),
-);
+const Flexbox = memo<FlexboxProps>(({ className, prefixCls, children, ...props }) => (
+  <FlexBasic {...props} internalClassName={`${getPrefix(prefixCls)}-flexbox`} className={className}>
+    {children}
+  </FlexBasic>
+));
 
 Flexbox.displayName = 'Flexbox';