Skip to content

Commit f1d66a0

Browse files
anilanaranilanar
committed
replace chakra-ui with chakra-v2
1 parent d43df84 commit f1d66a0

File tree

18 files changed

+712
-2034
lines changed

18 files changed

+712
-2034
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: 63 additions & 50 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,
@@ -23,56 +28,64 @@ export interface FlexItemProps extends WithChildren, SafeFlexItemProps {
2328
order?: number;
2429
}
2530

26-
export const FlexItem = forwardRef<FlexItemProps, "div">(function FlexItem(
27-
{
28-
alignSelf,
29-
grow,
30-
shrink = 1,
31-
basis = "auto",
32-
children,
33-
overflowAnchor,
34-
order,
35-
...props
31+
export const FlexItem = forwardRef<MergeWithAs<{}, {}, FlexItemProps>, "div">(
32+
function FlexItem(
33+
{
34+
alignSelf,
35+
grow,
36+
shrink = 1,
37+
basis = "auto",
38+
children,
39+
overflowAnchor,
40+
order,
41+
as,
42+
...props
43+
},
44+
ref,
45+
) {
46+
return (
47+
<chakra.div
48+
ref={ref}
49+
as={as}
50+
display="flex"
51+
overflow="visible"
52+
alignItems="stretch"
53+
flexDirection={unsafeCoerce("var(--pcss-flex-child-direction)")}
54+
flexGrow={
55+
grow !== undefined
56+
? grow
57+
: unsafeCoerce("var(--pcss-flex-child-grow)")
58+
}
59+
flexShrink={shrink}
60+
flexBasis={basis}
61+
order={order}
62+
justifyContent={
63+
alignSelf ?? unsafeCoerce("var(--pcss-flex-align-items)")
64+
}
65+
minW={shrink > 0 ? "var(--pcss-flex-child-shrink-width)" : "auto"}
66+
minH={shrink > 0 ? "var(--pcss-flex-child-shrink-height)" : "auto"}
67+
__css={{
68+
"& > *": {
69+
flexGrow:
70+
alignSelf === "stretch"
71+
? 1
72+
: alignSelf !== undefined
73+
? 0
74+
: unsafeCoerce("var(--pcss-flex-grandchild-grow)"),
75+
flexShrink: 1,
76+
flexBasis: "auto",
77+
minWidth: "var(--pcss-flex-grandchild-shrink-width)",
78+
minHeight: "var(--pcss-flex-grandchild-shrink-height)",
79+
},
80+
overflowAnchor,
81+
}}
82+
{...props}
83+
>
84+
{children}
85+
</chakra.div>
86+
);
3687
},
37-
ref,
38-
) {
39-
return (
40-
<chakra.div
41-
ref={ref}
42-
display="flex"
43-
overflow="visible"
44-
alignItems="stretch"
45-
flexDirection={unsafeCoerce("var(--pcss-flex-child-direction)")}
46-
flexGrow={
47-
grow !== undefined ? grow : unsafeCoerce("var(--pcss-flex-child-grow)")
48-
}
49-
flexShrink={shrink}
50-
flexBasis={basis}
51-
order={order}
52-
justifyContent={alignSelf ?? unsafeCoerce("var(--pcss-flex-align-items)")}
53-
minW={shrink > 0 ? "var(--pcss-flex-child-shrink-width)" : "auto"}
54-
minH={shrink > 0 ? "var(--pcss-flex-child-shrink-height)" : "auto"}
55-
__css={{
56-
"& > *": {
57-
flexGrow:
58-
alignSelf === "stretch"
59-
? 1
60-
: alignSelf !== undefined
61-
? 0
62-
: unsafeCoerce("var(--pcss-flex-grandchild-grow)"),
63-
flexShrink: 1,
64-
flexBasis: "auto",
65-
minWidth: "var(--pcss-flex-grandchild-shrink-width)",
66-
minHeight: "var(--pcss-flex-grandchild-shrink-height)",
67-
},
68-
overflowAnchor,
69-
}}
70-
{...props}
71-
>
72-
{children}
73-
</chakra.div>
74-
);
75-
});
88+
);
7689

7790
if (__DEV__) {
7891
FlexItem.displayName = "FlexItem";

‎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)