replace @chakra-ui/react with @chakra-v2/react

userlike · Feb 3, 2025 · 3d63c85 · 3d63c85
1 parent 2eb3612
commit 3d63c85
Show file tree

Hide file tree

Showing 13 changed files with 189 additions and 1,332 deletions.
diff --git a/packages/chakra-ui/package.json b/packages/chakra-ui/package.json
@@ -35,20 +35,16 @@
     "@moblin/core": "workspace:*"
   },
   "devDependencies": {
-    "@chakra-ui/react": "catalog:",
-    "@chakra-ui/system": "catalog:",
+    "@chakra-v2/react": "catalog:",
     "@emotion/react": "catalog:",
-    "@emotion/styled": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
-    "framer-motion": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",
     "typescript": "catalog:"
   },
   "peerDependencies": {
-    "@chakra-ui/react": "^2.0.0",
-    "@chakra-ui/system": "^2.0.0",
+    "@chakra-v2/react": "*",
     "react": ">=18"
   }
 }
diff --git a/packages/chakra-ui/src/Block.tsx b/packages/chakra-ui/src/Block.tsx
@@ -1,19 +1,19 @@
-import { chakra, forwardRef } from '@chakra-ui/system';
-import { __DEV__ } from '@moblin/core';
+import { chakra, forwardRef } from "@chakra-v2/react";
+import { __DEV__ } from "@moblin/core";
 
-import { ContainerProps } from './props.js';
+import { ContainerProps } from "./props.js";
 
-export interface BlockProps extends ContainerProps<'div'> {}
+export interface BlockProps extends ContainerProps<"div"> {}
 
 /**
  * Component to use when you want to use the default
  * [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout)
  * as in the old days.
  */
-export const Block = forwardRef<BlockProps, 'div'>((props, ref) => (
+export const Block = forwardRef<BlockProps, "div">((props, ref) => (
   <chakra.div ref={ref} {...props} display="block" overflow="hidden" />
 ));
 
 if (__DEV__) {
-  Block.displayName = 'Block';
+  Block.displayName = "Block";
 }
diff --git a/packages/chakra-ui/src/Box.tsx b/packages/chakra-ui/src/Box.tsx
@@ -1,4 +1,4 @@
-import { forwardRef } from "@chakra-ui/system";
+import { forwardRef } from "@chakra-v2/react";
 import { __DEV__, ContentPosition } from "@moblin/core";
 
 import { Flex, FlexItem } from "./Flex.js";
@@ -23,7 +23,7 @@ export const Box = forwardRef<BoxProps, "div">(
       __css,
       ...props
     },
-    ref
+    ref,
   ) => {
     return (
       <Flex
@@ -40,7 +40,7 @@ export const Box = forwardRef<BoxProps, "div">(
         <FlexItem>{children}</FlexItem>
       </Flex>
     );
-  }
+  },
 );
 
 if (__DEV__) {

diff --git a/packages/chakra-ui/src/Flex.tsx b/packages/chakra-ui/src/Flex.tsx
@@ -1,4 +1,4 @@
-import { chakra, forwardRef, SystemProps } from "@chakra-ui/system";
+import { chakra, forwardRef, SystemProps } from "@chakra-v2/react";
 import {
   __DEV__,
   AlignContent,
@@ -51,8 +51,8 @@ export const FlexItem = ({
             alignSelf === "stretch"
               ? 1
               : alignSelf !== undefined
-              ? 0
-              : unsafeCoerce("var(--pcss-flex-grandchild-grow)"),
+                ? 0
+                : unsafeCoerce("var(--pcss-flex-grandchild-grow)"),
           flexShrink: 1,
           flexBasis: "auto",
           minWidth: "var(--pcss-flex-grandchild-shrink-width)",
@@ -101,7 +101,7 @@ export const Flex = forwardRef<FlexProps, "div">(
       __css,
       ...props
     },
-    ref
+    ref,
   ) => {
     return (
       <chakra.div
@@ -143,8 +143,8 @@ export const Flex = forwardRef<FlexProps, "div">(
             wrap === true
               ? "wrap"
               : wrap === "reverse"
-              ? "wrap-reverse"
-              : "nowrap"
+                ? "wrap-reverse"
+                : "nowrap"
           }
           columnGap={gapX}
           rowGap={gapY}
@@ -160,7 +160,7 @@ export const Flex = forwardRef<FlexProps, "div">(
         </chakra.div>
       </chakra.div>
     );
-  }
+  },
 );
 
 if (__DEV__) {

diff --git a/packages/chakra-ui/src/List.tsx b/packages/chakra-ui/src/List.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, SystemProps } from "@chakra-ui/system";
+import { forwardRef, SystemProps } from "@chakra-v2/react";
 import { __DEV__ } from "@moblin/core";
 import { Children, isValidElement } from "react";
 
@@ -30,10 +30,10 @@ export const List = forwardRef<ListProps, "div">(
           <FlexItem grow={grow} shrink={shrink} basis={basis}>
             {c}
           </FlexItem>
-        ) : null
+        ) : null,
       )}
     </Flex>
-  )
+  ),
 );
 
 if (__DEV__) {

diff --git a/packages/chakra-ui/src/Scrollable.tsx b/packages/chakra-ui/src/Scrollable.tsx
@@ -1,5 +1,4 @@
-import { useTheme } from "@chakra-ui/react";
-import { chakra, forwardRef } from "@chakra-ui/system";
+import { chakra, forwardRef, useTheme } from "@chakra-v2/react";
 import {
   __DEV__,
   ContentPosition,
@@ -31,7 +30,7 @@ export const Scrollable = forwardRef<ScrollableProps, "div">(
       __css,
       ...props
     },
-    ref
+    ref,
   ) => {
     const theme: MoblinTheme = unsafeCoerce(useTheme());
     const scrollMode =
@@ -60,7 +59,7 @@ export const Scrollable = forwardRef<ScrollableProps, "div">(
         }}
       />
     );
-  }
+  },
 );
 
 if (__DEV__) {

diff --git a/packages/chakra-ui/src/Text.tsx b/packages/chakra-ui/src/Text.tsx
@@ -1,4 +1,4 @@
-import { chakra, HTMLChakraProps } from "@chakra-ui/system";
+import { chakra, HTMLChakraProps } from "@chakra-v2/react";
 
 export interface TextOptions {
   ellipsis?: boolean;

diff --git a/packages/chakra-ui/src/props.ts b/packages/chakra-ui/src/props.ts
@@ -1,5 +1,4 @@
 import {
-  As,
   BackgroundProps,
   BorderProps,
   ColorProps,
@@ -16,7 +15,8 @@ import {
   TransformProps,
   TransitionProps,
   TypographyProps,
-} from "@chakra-ui/system";
+} from "@chakra-v2/react";
+import { ElementType as As } from "react";
 
 export type SafeInteractivityProps = Pick<
   InteractivityProps,

diff --git a/packages/chakra-ui/tsconfig.json b/packages/chakra-ui/tsconfig.json
@@ -1,4 +1,8 @@
 {
   "include": ["src/**/*"],
-  "extends": "../dev/tsconfig.base.json"
+  "extends": "../dev/tsconfig.base.json",
+  "compilerOptions": {
+    "module": "ES2015",
+    "moduleResolution": "bundler"
+  }
 }
diff --git a/packages/storybook-chakra-ui/.storybook/preview.jsx b/packages/storybook-chakra-ui/.storybook/preview.jsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ChakraProvider } from "@chakra-ui/react";
+import { ChakraProvider } from "@chakra-v2/react";
 
 export const decorators = [
   (Story) => (

diff --git a/packages/storybook-chakra-ui/package.json b/packages/storybook-chakra-ui/package.json
@@ -9,10 +9,8 @@
     "typecheck": "tsc --noEmit --watch"
   },
   "dependencies": {
-    "@chakra-ui/react": "catalog:",
-    "@chakra-ui/system": "catalog:",
+    "@chakra-v2/react": "catalog:",
     "@emotion/react": "catalog:",
-    "@emotion/styled": "catalog:",
     "@moblin/chakra-ui": "workspace:*",
     "@moblin/core": "workspace:*",
     "@moblin/storybook-indexer": "workspace:*",