Skip to content

Commit 77f39b7

Browse files
antpawantpaw
committed
upgrade ui-theme to chakra ui v3
1 parent e34c88c commit 77f39b7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+3031
-4428
lines changed

‎.github/workflows/draft-next-release.yml

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ on:
99
push:
1010
branches:
1111
- main
12+
- beta
1213
paths:
1314
- '.github/workflows/draft-next-release.yml'
1415
- 'testing/**'

‎.github/workflows/publish-playground.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ permissions:
1010
on:
1111
# Triggers the workflow on push or pull request events but only for the "main" branch
1212
push:
13-
branches: ['main']
13+
branches: ['main', 'beta']
1414

1515
# Allows you to run this workflow manually from the Actions tab
1616
workflow_dispatch:

‎.github/workflows/tests.yml

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ on:
88
# Run this only on branches that are not main
99
branches-ignore:
1010
- main
11+
- beta
1112

1213
jobs:
1314
tests:

‎package.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,5 @@
3535
"braces": "3.0.3",
3636
"micromatch": "4.0.8"
3737
}
38-
},
39-
"packageManager": "[email protected]+sha512.38dc6fba8dba35b39340b9700112c2fe1e12f10b17134715a4aa98ccf7bb035e76fd981cf0bb384dfa98f8d6af5481c2bef2f4266a24bfa20c34eb7147ce0b5e"
38+
}
4039
}

‎pnpm-lock.yaml

+2,545-3,217
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎testing/package.json

+19-20
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"build": "tsc && vite build",
99
"preview": "vite preview",
1010
"generate": "pnpm generate:theme",
11-
"generate:theme": "chakra-cli tokens ../theme/src/main.ts",
11+
"generate:theme": "chakra typegen ./src/theme.ts",
1212
"postinstall": "pnpm generate",
1313
"test": "pnpm safetest",
1414
"test:ci": "pnpm safetest:ci",
@@ -21,29 +21,28 @@
2121
"pnpm": "9"
2222
},
2323
"dependencies": {
24-
"@chakra-ui/react": "^2.8.2",
25-
"@chakra-ui/styled-system": "^2.9.2",
26-
"@chakra-ui/theme-tools": "^2.1.2",
27-
"@emotion/react": "^11.11.4",
28-
"@emotion/styled": "^11.11.0",
29-
"@fontsource/raleway": "^5.0.19",
30-
"@fontsource/roboto": "^5.0.14",
31-
"@fontsource/roboto-mono": "^5.0.18",
24+
"@chakra-ui/react": "^3.14.2",
25+
"@emotion/react": "^11.14.0",
26+
"@fontsource/raleway": "^5.2.5",
27+
"@fontsource/roboto": "^5.2.5",
28+
"@fontsource/roboto-mono": "^5.2.5",
3229
"@hivemq/ui-theme": "workspace:^",
33-
"framer-motion": "^11.0.8",
34-
"react": "^18.2.0",
35-
"react-dom": "^18.2.0"
30+
"framer-motion": "^12.6.2",
31+
"lucide-react": "^0.485.0",
32+
"next-themes": "^0.4.6",
33+
"react": "^18.3.1",
34+
"react-dom": "^18.3.1"
3635
},
3736
"devDependencies": {
38-
"@chakra-ui/cli": "^2.4.1",
39-
"@types/node": "^20.11.26",
40-
"@types/react": "^18.2.56",
41-
"@types/react-dom": "^18.2.19",
42-
"@vitejs/plugin-react": "^4.2.1",
37+
"@chakra-ui/cli": "^3.14.2",
38+
"@types/node": "^22.13.14",
39+
"@types/react": "^18.3.16",
40+
"@types/react-dom": "^18.3.5",
41+
"@vitejs/plugin-react": "^4.3.4",
4342
"cross-env": "^7.0.3",
4443
"safetest": "^0.1.13",
45-
"vite": "^5.4.2",
46-
"vite-plugin-singlefile": "^2.0.2",
47-
"vitest": "^0.34.3"
44+
"vite": "^6.2.3",
45+
"vite-plugin-singlefile": "^2.2.0",
46+
"vitest": "^3.0.9"
4847
}
4948
}

‎testing/src/App.tsx

+18-19
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,16 @@ See the License for the specific language governing permissions and
1414
limitations under the License.
1515
*/
1616

17-
import { Box, ChakraBaseProvider, Heading } from '@chakra-ui/react'
18-
import theme from '../../theme/src/main'
19-
20-
import { Alerts } from '@/views/Alerts.tsx'
21-
import { Buttons } from '@/views/Buttons'
22-
import { Colors } from '@/views/Colors'
23-
import { Headings } from '@/views/Headings'
24-
import { Links } from '@/views/Links.tsx'
25-
import { SemanticColors } from '@/views/SemanticColors'
26-
import { Texts } from '@/views/Texts'
17+
import { Box, ChakraProvider, Heading } from '@chakra-ui/react'
18+
import { Alerts } from '~/views/Alerts.tsx'
19+
import { Buttons } from '~/views/Buttons'
20+
import { Colors } from '~/views/Colors'
21+
import { Headings } from '~/views/Headings'
22+
import { Links } from '~/views/Links.tsx'
23+
import { SemanticColors } from '~/views/SemanticColors'
24+
import { Texts } from '~/views/Texts'
2725
import { ModePlayground } from './components/ModePlayground'
26+
import { system as theme } from './theme'
2827

2928
function App() {
3029
const style: React.CSSProperties = {
@@ -47,46 +46,46 @@ function App() {
4746
}
4847

4948
return (
50-
<ChakraBaseProvider theme={theme}>
49+
<ChakraProvider value={theme}>
5150
<Box style={floatingBoxStyle} backgroundColor="background.bg-main-container">
5251
<ModePlayground />
5352
</Box>
5453

5554
<Box style={style}>
56-
<Heading variant="h1">Colors</Heading>
55+
<Heading as="h1">Colors</Heading>
5756
<Colors withText />
5857

5958
<hr />
6059

61-
<Heading variant="h1">Semantic Colors</Heading>
60+
<Heading as="h1">Semantic Colors</Heading>
6261
<SemanticColors withText />
6362

6463
<hr />
6564

66-
<Heading variant="h1">Headings</Heading>
65+
<Heading as="h1">Headings</Heading>
6766
<Headings />
6867

6968
<hr />
7069

71-
<Heading variant="h1">Texts</Heading>
70+
<Heading as="h1">Texts</Heading>
7271
<Texts />
7372

7473
<hr />
7574

76-
<Heading variant="h1">Buttons</Heading>
75+
<Heading as="h1">Buttons</Heading>
7776
<Buttons />
7877

7978
<hr />
8079

81-
<Heading variant="h1"> Links</Heading>
80+
<Heading as="h1"> Links</Heading>
8281
<Links />
8382

8483
<hr />
8584

86-
<Heading variant="h1"> Alerts</Heading>
85+
<Heading as="h1"> Alerts</Heading>
8786
<Alerts />
8887
</Box>
89-
</ChakraBaseProvider>
88+
</ChakraProvider>
9089
)
9190
}
9291

‎testing/src/components/ModePlayground.tsx

+45-58
Original file line numberDiff line numberDiff line change
@@ -14,75 +14,62 @@ See the License for the specific language governing permissions and
1414
limitations under the License.
1515
*/
1616

17-
import {
18-
Accordion,
19-
AccordionButton,
20-
AccordionIcon,
21-
AccordionItem,
22-
AccordionPanel,
23-
Box,
24-
Button,
25-
ColorModeProvider,
26-
DarkMode,
27-
LightMode,
28-
Text,
29-
useColorMode,
30-
} from '@chakra-ui/react'
17+
import { Accordion, Box, Button, Text } from '@chakra-ui/react'
18+
import { ColorModeButton, ColorModeProvider, useColorMode } from '~/ui/color-mode'
3119

3220
export function ModePlayground() {
33-
const { colorMode, toggleColorMode } = useColorMode()
21+
const { colorMode } = useColorMode()
3422
return (
3523
<>
36-
<Accordion allowToggle>
37-
<AccordionItem>
24+
<Accordion.Root>
25+
<Accordion.Item value="a">
3826
<h2>
39-
<AccordionButton>
27+
<Accordion.ItemTrigger>
4028
<Box as="span" flex="1" textAlign="left">
4129
Mode playground
4230
</Box>
43-
<AccordionIcon />
44-
</AccordionButton>
31+
<Accordion.ItemIndicator />
32+
</Accordion.ItemTrigger>
4533
</h2>
46-
<AccordionPanel pb={4}>
47-
<Box display="flex" flexDirection="column" gap="2" py="4">
48-
color mode: {colorMode}
49-
<LightMode>
50-
<Button size="sm">Light Mode Always</Button>
51-
</LightMode>
52-
<DarkMode>
53-
<Button size="sm">Dark Mode Always</Button>
54-
</DarkMode>
55-
<Button size="sm" onClick={toggleColorMode}>
56-
Toggle Mode
57-
</Button>
58-
</Box>
34+
<Accordion.ItemContent pb={4}>
35+
<Accordion.ItemBody>
36+
<Box display="flex" flexDirection="column" gap="2" py="4">
37+
color mode: {colorMode}
38+
<ColorModeProvider forcedTheme="light">
39+
<Button size="sm">Light Mode Always</Button>
40+
</ColorModeProvider>
41+
<ColorModeProvider forcedTheme="dark">
42+
<Button size="sm">Dark Mode Always</Button>
43+
</ColorModeProvider>
44+
<ColorModeButton>Toggle Mode</ColorModeButton>
45+
</Box>
5946

60-
<Box
61-
p="4"
62-
bg="background.bg-subtle"
63-
borderRadius="md"
64-
right="5"
65-
gap="4"
66-
borderWidth="1px"
67-
display="flex"
68-
flexDirection="column"
69-
>
70-
<LightMode>
71-
<Text color="text.text-base">
72-
This text uses the default light mode text color.
73-
</Text>
74-
</LightMode>
75-
<ColorModeProvider
76-
value="dark"
77-
options={{ useSystemColorMode: false, initialColorMode: 'dark' }}
47+
<Box
48+
p="4"
49+
bg="background.bg-subtle"
50+
borderRadius="md"
51+
right="5"
52+
gap="4"
53+
borderWidth="1px"
54+
display="flex"
55+
flexDirection="column"
7856
>
79-
<Text color="text.text-base">This text uses the default dark mode text color.</Text>
80-
</ColorModeProvider>
81-
<Text>This text uses the normal text color depending on the current mode.</Text>
82-
</Box>
83-
</AccordionPanel>
84-
</AccordionItem>
85-
</Accordion>
57+
<ColorModeProvider forcedTheme="light">
58+
<Text color="text.text-base">
59+
This text uses the default light mode text color.
60+
</Text>
61+
</ColorModeProvider>
62+
<ColorModeProvider forcedTheme="dark">
63+
<Text color="text.text-base">
64+
This text uses the default dark mode text color.
65+
</Text>
66+
</ColorModeProvider>
67+
<Text>This text uses the normal text color depending on the current mode.</Text>
68+
</Box>
69+
</Accordion.ItemBody>
70+
</Accordion.ItemContent>
71+
</Accordion.Item>
72+
</Accordion.Root>
8673
</>
8774
)
8875
}

‎testing/src/main.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -14,22 +14,22 @@ See the License for the specific language governing permissions and
1414
limitations under the License.
1515
*/
1616

17-
import App from '@/App'
18-
import { ChakraProvider, ColorModeScript } from '@chakra-ui/react'
17+
import { ChakraProvider } from '@chakra-ui/react'
1918
import React from 'react'
2019
import ReactDOM from 'react-dom/client'
2120
import { bootstrap } from 'safetest/react'
22-
import theme from '../../theme/src/main'
21+
import App from '~/App'
22+
import { system as theme } from './theme'
2323

2424
// biome-ignore lint/style/noNonNullAssertion: <explanation>
2525
const root = ReactDOM.createRoot(document.getElementById('root')!)
2626

2727
bootstrap({
2828
element: (
2929
<React.StrictMode>
30-
<ChakraProvider theme={theme}>
30+
<ChakraProvider value={theme}>
3131
{/* ColorModeScript ensures that the initial color mode matches the preference */}
32-
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
32+
{/* <ColorModeScript initialColorMode={theme.config.initialColorMode} /> */}
3333
<App />
3434
</ChakraProvider>
3535
</React.StrictMode>

‎testing/src/theme.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { createSystem, defaultConfig } from '@chakra-ui/react'
2+
import { config } from '@hivemq/ui-theme'
3+
4+
export const system = createSystem(defaultConfig, config)

0 commit comments

Comments
 (0)