fix lint errors, build errors

Author: anilanar

packages/chakra-ui/package.json

@@ -29,7 +29,8 @@
   },
   "scripts": {
     "build": "../dev/bin.mjs build",
-    "lint": "../dev/bin.mjs lint"
+    "lint": "../dev/bin.mjs lint",
+    "fix": "../dev/bin.mjs fix"
   },
   "dependencies": {
     "@moblin/core": "workspace:*"

packages/chakra-ui/src/Flex.tsx

@@ -1,8 +1,8 @@
 import {
   chakra,
   forwardRef,
-  SystemProps,
   type MergeWithAs,
+  SystemProps,
 } from "@chakra-v2/react";
 import {
   __DEV__,

packages/dev/bin.mjs

@@ -55,6 +55,10 @@ try {
   if (command === "lint") {
     await $`eslint -c eslint.config.ts src/**/*`;
   }
+
+  if (command === "fix") {
+    await $`eslint -c eslint.config.ts src/**/* --fix`;
+  }
 } catch (error) {
   if (error instanceof ProcessOutput) {
     // console.error(error.stderr);

packages/dev/package.json

@@ -7,21 +7,21 @@
     "dev": "./bin.mjs"
   },
   "dependencies": {
-    "@eslint/js": "^9.18.0",
-    "concurrently": "^9.1.0",
+    "@eslint/js": "^9.37.0",
+    "concurrently": "^9.2.1",
     "cross-env": "^7.0.3",
-    "eslint": "^9.18.0",
-    "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-prettier": "^5.2.3",
-    "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint": "^9.37.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "globals": "^15.14.0",
-    "jiti": "^2.4.2",
-    "lint-staged": "^15.2.10",
-    "prettier": "^3.3.3",
+    "globals": "^15.15.0",
+    "jiti": "^2.6.1",
+    "lint-staged": "^15.5.2",
+    "prettier": "^3.6.2",
     "rimraf": "^6.0.1",
-    "typescript-eslint": "^8.21.0",
-    "zx": "^8.3.0"
+    "typescript-eslint": "^8.46.1",
+    "zx": "^8.8.4"
   }
 }

packages/storybook-chakra-ui/src/Box.gen.tsx

@@ -1,7 +1,7 @@
 import { Meta } from "@storybook/react";
 import { Box } from "@moblin/chakra-ui";
 import { demo } from "./animatable-demo";
-import { chakra, HTMLChakraProps } from "@chakra-ui/system";
+import { chakra, HTMLChakraProps } from "@chakra-v2/react";
 
 const meta: Meta = {
   component: Box,

packages/storybook-chakra-ui/src/Scrollable.gen.tsx

@@ -2,7 +2,7 @@ import { Meta } from "@storybook/react";
 
 import { Scrollable, ScrollableProps } from "@moblin/chakra-ui";
 import { demo } from "./animatable-demo";
-import { chakra } from "@chakra-ui/system";
+import { chakra } from "@chakra-v2/react";
 import { FlexDirection } from "@moblin/core";
 
 const meta: Meta<ScrollableProps & { overflow: boolean }> = {

packages/storybook-chakra-ui/src/animatable-demo.tsx

@@ -1,63 +1,63 @@
-import { chakra, HTMLChakraProps, keyframes } from '@chakra-ui/system';
-import isChromatic from 'chromatic/isChromatic';
+import { chakra, HTMLChakraProps } from "@chakra-v2/react";
+import isChromatic from "chromatic/isChromatic";
+import { keyframes } from "@emotion/react";
 
-import * as S from './storybook.js';
+import * as S from "./storybook.js";
 
 interface DemoOptions {
   title?: string;
   animate?: boolean;
 }
 
 const resize = keyframes({
-  '0%': {
-    width: '12rem',
-    height: '12rem',
+  "0%": {
+    width: "12rem",
+    height: "12rem",
   },
-  '50%': {
-    width: '24rem',
-    height: '24rem',
+  "50%": {
+    width: "24rem",
+    height: "24rem",
   },
-  '100%': {
-    width: '12rem',
-    height: '12rem',
+  "100%": {
+    width: "12rem",
+    height: "12rem",
   },
 });
 
 const DemoContainer = ({
   title,
   animate,
   ...props
-}: DemoOptions & HTMLChakraProps<'div'>) => (
+}: DemoOptions & HTMLChakraProps<"div">) => (
   <chakra.div
     {...props}
     position="relative"
     padding={8}
     bg="green.300"
     color="black"
     __css={{
-      '& > div:first-of-type': {
-        width: '12rem',
-        height: '12rem',
-        willChange: 'width, height',
-        animationName: animate ? resize.toString() : 'none',
-        animationDuration: '2s',
-        animationIterationCount: 'infinite',
+      "& > div:first-of-type": {
+        width: "12rem",
+        height: "12rem",
+        willChange: "width, height",
+        animationName: animate ? resize.toString() : "none",
+        animationDuration: "2s",
+        animationIterationCount: "infinite",
       },
     }}
   />
 );
 
 export const demo =
   ({
-    title = 'Container',
+    title = "Container",
     animate = !isChromatic(),
   }: DemoOptions = {}): S.Decorator =>
-  (Story) =>
-    (
-      <DemoContainer animate={animate}>
-        <Story />
-        <chakra.div position="absolute" top="0.5rem" left="0.5rem">
-          {title}
-        </chakra.div>
-      </DemoContainer>
-    );
+  (Story) => (
+    <DemoContainer animate={animate}>
+      <Story />
+      <chakra.div position="absolute" top="0.5rem" left="0.5rem">
+        {title}
+      </chakra.div>
+    </DemoContainer>
+  );