Skip to content

Commit 038f4ff

Browse files
anilanaranilanar
committed
replace chakra-ui with chakra-v2
1 parent 2eb3612 commit 038f4ff

File tree

18 files changed

+879
-2230
lines changed

18 files changed

+879
-2230
lines changed

‎packages/chakra-ui/package.json‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,26 +29,23 @@
2929
},
3030
"scripts": {
3131
"build": "../dev/bin.mjs build",
32-
"lint": "../dev/bin.mjs lint"
32+
"lint": "../dev/bin.mjs lint",
33+
"fix": "../dev/bin.mjs fix"
3334
},
3435
"dependencies": {
3536
"@moblin/core": "workspace:*"
3637
},
3738
"devDependencies": {
38-
"@chakra-ui/react": "catalog:",
39-
"@chakra-ui/system": "catalog:",
39+
"@chakra-v2/react": "catalog:",
4040
"@emotion/react": "catalog:",
41-
"@emotion/styled": "catalog:",
4241
"@types/react": "catalog:",
4342
"@types/react-dom": "catalog:",
44-
"framer-motion": "catalog:",
4543
"react": "catalog:",
4644
"react-dom": "catalog:",
4745
"typescript": "catalog:"
4846
},
4947
"peerDependencies": {
50-
"@chakra-ui/react": "^2.0.0",
51-
"@chakra-ui/system": "^2.0.0",
48+
"@chakra-v2/react": "*",
5249
"react": ">=18"
5350
}
5451
}

‎packages/chakra-ui/src/Block.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
import { chakra, forwardRef } from '@chakra-ui/system';
2-
import { __DEV__ } from '@moblin/core';
1+
import { chakra, forwardRef } from "@chakra-v2/react";
2+
import { __DEV__ } from "@moblin/core";
33

4-
import { ContainerProps } from './props.js';
4+
import { ContainerProps } from "./props.js";
55

6-
export interface BlockProps extends ContainerProps<'div'> {}
6+
export interface BlockProps extends ContainerProps<"div"> {}
77

88
/**
99
* Component to use when you want to use the default
1010
* [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout)
1111
* as in the old days.
1212
*/
13-
export const Block = forwardRef<BlockProps, 'div'>((props, ref) => (
13+
export const Block = forwardRef<BlockProps, "div">((props, ref) => (
1414
<chakra.div ref={ref} {...props} display="block" overflow="hidden" />
1515
));
1616

1717
if (__DEV__) {
18-
Block.displayName = 'Block';
18+
Block.displayName = "Block";
1919
}

‎packages/chakra-ui/src/Box.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { forwardRef } from "@chakra-ui/system";
1+
import { forwardRef } from "@chakra-v2/react";
22
import { __DEV__, ContentPosition } from "@moblin/core";
33

44
import { Flex, FlexItem } from "./Flex.js";
@@ -23,7 +23,7 @@ export const Box = forwardRef<BoxProps, "div">(
2323
__css,
2424
...props
2525
},
26-
ref
26+
ref,
2727
) => {
2828
return (
2929
<Flex
@@ -40,7 +40,7 @@ export const Box = forwardRef<BoxProps, "div">(
4040
<FlexItem>{children}</FlexItem>
4141
</Flex>
4242
);
43-
}
43+
},
4444
);
4545

4646
if (__DEV__) {

‎packages/chakra-ui/src/Flex.tsx‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
import { chakra, forwardRef, SystemProps } from "@chakra-ui/system";
1+
import {
2+
chakra,
3+
forwardRef,
4+
type MergeWithAs,
5+
SystemProps,
6+
} from "@chakra-v2/react";
27
import {
38
__DEV__,
49
AlignContent,
@@ -29,10 +34,12 @@ export const FlexItem = ({
2934
basis = "auto",
3035
children,
3136
overflowAnchor,
37+
as,
3238
...props
33-
}: FlexItemProps) => {
39+
}: MergeWithAs<{}, {}, FlexItemProps>) => {
3440
return (
3541
<chakra.div
42+
as={as}
3643
display="flex"
3744
overflow="visible"
3845
alignItems="stretch"
@@ -51,8 +58,8 @@ export const FlexItem = ({
5158
alignSelf === "stretch"
5259
? 1
5360
: alignSelf !== undefined
54-
? 0
55-
: unsafeCoerce("var(--pcss-flex-grandchild-grow)"),
61+
? 0
62+
: unsafeCoerce("var(--pcss-flex-grandchild-grow)"),
5663
flexShrink: 1,
5764
flexBasis: "auto",
5865
minWidth: "var(--pcss-flex-grandchild-shrink-width)",
@@ -101,7 +108,7 @@ export const Flex = forwardRef<FlexProps, "div">(
101108
__css,
102109
...props
103110
},
104-
ref
111+
ref,
105112
) => {
106113
return (
107114
<chakra.div
@@ -143,8 +150,8 @@ export const Flex = forwardRef<FlexProps, "div">(
143150
wrap === true
144151
? "wrap"
145152
: wrap === "reverse"
146-
? "wrap-reverse"
147-
: "nowrap"
153+
? "wrap-reverse"
154+
: "nowrap"
148155
}
149156
columnGap={gapX}
150157
rowGap={gapY}
@@ -160,7 +167,7 @@ export const Flex = forwardRef<FlexProps, "div">(
160167
</chakra.div>
161168
</chakra.div>
162169
);
163-
}
170+
},
164171
);
165172

166173
if (__DEV__) {

‎packages/chakra-ui/src/List.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { forwardRef, SystemProps } from "@chakra-ui/system";
1+
import { forwardRef, SystemProps } from "@chakra-v2/react";
22
import { __DEV__ } from "@moblin/core";
33
import { Children, isValidElement } from "react";
44

@@ -30,10 +30,10 @@ export const List = forwardRef<ListProps, "div">(
3030
<FlexItem grow={grow} shrink={shrink} basis={basis}>
3131
{c}
3232
</FlexItem>
33-
) : null
33+
) : null,
3434
)}
3535
</Flex>
36-
)
36+
),
3737
);
3838

3939
if (__DEV__) {

‎packages/chakra-ui/src/Scrollable.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { useTheme } from "@chakra-ui/react";
2-
import { chakra, forwardRef } from "@chakra-ui/system";
1+
import { chakra, forwardRef, useTheme } from "@chakra-v2/react";
32
import {
43
__DEV__,
54
ContentPosition,
@@ -31,7 +30,7 @@ export const Scrollable = forwardRef<ScrollableProps, "div">(
3130
__css,
3231
...props
3332
},
34-
ref
33+
ref,
3534
) => {
3635
const theme: MoblinTheme = unsafeCoerce(useTheme());
3736
const scrollMode =
@@ -60,7 +59,7 @@ export const Scrollable = forwardRef<ScrollableProps, "div">(
6059
}}
6160
/>
6261
);
63-
}
62+
},
6463
);
6564

6665
if (__DEV__) {

‎packages/chakra-ui/src/Text.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { chakra, HTMLChakraProps } from "@chakra-ui/system";
1+
import { chakra, HTMLChakraProps } from "@chakra-v2/react";
22

33
export interface TextOptions {
44
ellipsis?: boolean;

‎packages/chakra-ui/src/props.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import {
2-
As,
32
BackgroundProps,
43
BorderProps,
54
ColorProps,
@@ -16,7 +15,8 @@ import {
1615
TransformProps,
1716
TransitionProps,
1817
TypographyProps,
19-
} from "@chakra-ui/system";
18+
} from "@chakra-v2/react";
19+
import { ElementType as As } from "react";
2020

2121
export type SafeInteractivityProps = Pick<
2222
InteractivityProps,

‎packages/chakra-ui/tsconfig.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
{
22
"include": ["src/**/*"],
3-
"extends": "../dev/tsconfig.base.json"
3+
"extends": "../dev/tsconfig.base.json",
4+
"compilerOptions": {
5+
"module": "ES2015",
6+
"moduleResolution": "bundler"
7+
}
48
}

‎packages/dev/bin.mjs‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,10 @@ try {
5555
if (command === "lint") {
5656
await $`eslint -c eslint.config.ts src/**/*`;
5757
}
58+
59+
if (command === "fix") {
60+
await $`eslint -c eslint.config.ts src/**/* --fix`;
61+
}
5862
} catch (error) {
5963
if (error instanceof ProcessOutput) {
6064
// console.error(error.stderr);

0 commit comments

Comments
 (0)