Skip to content

Commit b534850

Browse files
baptisteArnobaptisteArno
committed
➖ Remove Chakra UI
1 parent 41f7a83 commit b534850

File tree

363 files changed

+4413
-5822
lines changed

Some content is hidden

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

363 files changed

+4413
-5822
lines changed

‎apps/builder/next.config.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ const nextConfig = {
9696
"script-src 'self' 'unsafe-inline' 'unsafe-eval' https:",
9797
"style-src 'self' 'unsafe-inline' https:",
9898
`connect-src 'self' https: wss:${
99-
isDev ? " http://localhost:*" : ""
99+
isDev ? " http://localhost:* ws://localhost:*" : ""
100100
}`,
101101
"frame-src 'self' https:",
102102
`img-src 'self' data: blob: https:${isDev ? " http://localhost:*" : ""}`,

‎apps/builder/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@
1111
"dependencies": {
1212
"@auth/core": "^0.39.1",
1313
"@braintree/sanitize-url": "^7.0.1",
14-
"@chakra-ui/react": "^2.8.2",
1514
"@dnd-kit/core": "^6.0.8",
1615
"@dnd-kit/sortable": "^7.0.2",
1716
"@dnd-kit/utilities": "^3.2.1",
@@ -39,6 +38,7 @@
3938
"@typebot.io/chat-session": "workspace:*",
4039
"@typebot.io/conditions": "workspace:*",
4140
"@typebot.io/credentials": "workspace:*",
41+
"@typebot.io/emails": "workspace:*",
4242
"@typebot.io/env": "workspace:*",
4343
"@typebot.io/events": "workspace:*",
4444
"@typebot.io/groups": "workspace:*",
@@ -47,7 +47,6 @@
4747
"@typebot.io/runtime-session-store": "workspace:*",
4848
"@typebot.io/settings": "workspace:*",
4949
"@typebot.io/theme": "workspace:*",
50-
"@typebot.io/emails": "workspace:*",
5150
"@typebot.io/typebot": "workspace:*",
5251
"@typebot.io/ui": "workspace:*",
5352
"@typebot.io/user": "workspace:*",
@@ -80,6 +79,7 @@
8079
"nanoid": "^5.1.5",
8180
"next": "^15.3.0",
8281
"next-auth": "^5.0.0-beta.28",
82+
"next-themes": "^0.4.6",
8383
"nextjs-cors": "^2.1.2",
8484
"nodemailer": "^7.0.6",
8585
"nprogress": "^0.2.0",

‎apps/builder/src/assets/styles/globals.css‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,29 @@
11
@import "@typebot.io/ui/colors.css";
2+
@import "@typebot.io/ui/fonts.css";
23

34
@tailwind base;
45
@tailwind components;
56
@tailwind utilities;
67

78
:root {
9+
--header-height: 56px;
810
--spacing: 0.5rem;
911
}
1012

13+
* {
14+
@apply border-gray-6;
15+
}
16+
1117
h1 {
12-
@apply text-4xl md:text-6xl;
18+
@apply text-3xl;
1319
}
1420

1521
h2 {
16-
@apply text-4xl;
22+
@apply text-2xl;
1723
}
1824

1925
h3 {
20-
@apply text-2xl;
26+
@apply text-xl;
2127
}
2228

2329
h1,
@@ -33,6 +39,14 @@ h6 {
3339
text-align: inherit;
3440
}
3541

42+
ol {
43+
@apply list-decimal pl-4 flex flex-col gap-4 ms-4;
44+
}
45+
46+
code {
47+
@apply bg-gray-3 px-1 py-0.5 rounded-md text-sm text-gray-11;
48+
}
49+
3650
/* Offset top position so that it is right below onboarding header */
3751
typebot-standard#onboarding::part(progress-bar-container) {
3852
top: 55px;

‎apps/builder/src/assets/styles/routerProgressBar.css‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
}
66

77
#nprogress .bar {
8-
background: var(--chakra-colors-orange-500);
8+
background: rgb(var(--orange-9));
99

1010
position: fixed;
1111
z-index: 1031;
@@ -23,19 +23,11 @@
2323
width: 100px;
2424
height: 100%;
2525
box-shadow:
26-
0 0 10px var(--chakra-colors-orange-500),
27-
0 0 5px var(--chakra-colors-orange-500);
26+
0 0 10px rgb(var(--orange-9)),
27+
0 0 5px rgb(var(--orange-9));
2828
opacity: 1;
2929

3030
-webkit-transform: rotate(3deg) translate(0px, -4px);
3131
-ms-transform: rotate(3deg) translate(0px, -4px);
3232
transform: rotate(3deg) translate(0px, -4px);
3333
}
34-
35-
.chakra-ui-dark #nprogress .bar {
36-
background: var(--chakra-colors-orange-300);
37-
}
38-
39-
.chakra-ui-dark #nprogress .peg {
40-
background: var(--chakra-colors-orange-300);
41-
}

‎apps/builder/src/components/ColorPicker.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { Box, Center, SimpleGrid, Stack } from "@chakra-ui/react";
21
import { useTranslate } from "@tolgee/react";
32
import {
43
type ButtonProps,
@@ -64,7 +63,10 @@ export const ColorPicker = ({
6463
className="min-w-0 rounded-md border-1"
6564
disabled={isDisabled}
6665
>
67-
<Box rounded="full" boxSize="14px" bgColor={displayedValue} />
66+
<div
67+
className="rounded-full size-[14px]"
68+
style={{ backgroundColor: displayedValue }}
69+
/>
6870
</Popover.TriggerButton>
6971
<Popover.Popup className="p-0 max-w-48" side={side}>
7072
<div
@@ -74,10 +76,12 @@ export const ColorPicker = ({
7476
color: tinyColor(displayedValue).isLight() ? "gray.900" : "white",
7577
}}
7678
>
77-
<Center height="100%">{displayedValue}</Center>
79+
<div className="flex items-center justify-center h-full">
80+
{displayedValue}
81+
</div>
7882
</div>
79-
<Stack p="2">
80-
<SimpleGrid columns={5} spacing={2}>
83+
<div className="flex flex-col gap-2 p-2">
84+
<div className="grid gap-2 grid-cols-[repeat(5,1fr)]">
8185
{colorsSelection.map((color) => (
8286
<button
8387
key={color}
@@ -92,7 +96,7 @@ export const ColorPicker = ({
9296
onClick={handleClick(color)}
9397
/>
9498
))}
95-
</SimpleGrid>
99+
</div>
96100
<Input
97101
className="rounded-sm mt-3"
98102
placeholder="#2a9d8f"
@@ -108,7 +112,7 @@ export const ColorPicker = ({
108112
>
109113
{t("colorPicker.advancedColors")}
110114
</NativeColorPicker>
111-
</Stack>
115+
</div>
112116
</Popover.Popup>
113117
</Popover.Root>
114118
);

‎apps/builder/src/components/ImageUploadContent/GiphyPicker.tsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { Flex, Stack, Text } from "@chakra-ui/react";
21
import { GiphyFetch } from "@giphy/js-fetch-api";
32
import { Grid } from "@giphy/react-components";
43
import { env } from "@typebot.io/env";
@@ -22,30 +21,30 @@ export const GiphyPicker = ({ onSubmit }: GiphySearchFormProps) => {
2221
giphyFetch.trending({ offset, limit: 10 });
2322

2423
return !env.NEXT_PUBLIC_GIPHY_API_KEY ? (
25-
<Text>NEXT_PUBLIC_GIPHY_API_KEY is missing in environment</Text>
24+
<p>NEXT_PUBLIC_GIPHY_API_KEY is missing in environment</p>
2625
) : (
27-
<Stack spacing={4} pt="2">
28-
<Flex align="center">
26+
<div className="flex flex-col gap-4 pt-2">
27+
<div className="flex items-center">
2928
<DebouncedTextInput
3029
autoFocus
3130
placeholder="Search..."
3231
onValueChange={setInputValue}
3332
/>
3433
<GiphyLogo className="w-24" />
35-
</Flex>
36-
<Flex overflowY="auto" maxH="400px">
34+
</div>
35+
<div className="flex overflow-y-auto max-h-[400px]">
3736
<Grid
37+
className="my-4"
3838
key={inputValue}
3939
onGifClick={(gif, e) => {
4040
e.preventDefault();
4141
onSubmit(gif.images.downsized.url);
4242
}}
4343
fetchGifs={inputValue === "" ? fetchGifsTrending : fetchGifs}
44-
width={475}
4544
columns={3}
46-
className="my-4"
45+
width={475}
4746
/>
48-
</Flex>
49-
</Stack>
47+
</div>
48+
</div>
5049
);
5150
};

‎apps/builder/src/components/ImageUploadContent/IconPicker.tsx‎

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,8 @@
1-
import {
2-
HStack,
3-
SimpleGrid,
4-
Stack,
5-
Text,
6-
useColorModeValue,
7-
} from "@chakra-ui/react";
81
import { useTranslate } from "@tolgee/react";
92
import { Button } from "@typebot.io/ui/components/Button";
3+
import { cx } from "@typebot.io/ui/lib/cva";
104
import { useEffect, useMemo, useRef, useState } from "react";
5+
import { useThemeValue } from "@/hooks/useThemeValue";
116
import { ColorPicker } from "../ColorPicker";
127
import { DebouncedTextInput } from "../inputs/DebouncedTextInput";
138
import { iconNames } from "./iconNames";
@@ -22,7 +17,7 @@ const localStorageRecentIconNamesKey = "recentIconNames";
2217
const localStorageDefaultIconColorKey = "defaultIconColor";
2318

2419
export const IconPicker = ({ onIconSelected }: Props) => {
25-
const initialIconColor = useColorModeValue("#222222", "#ffffff");
20+
const initialIconColor = useThemeValue("#222222", "#ffffff");
2621
const scrollContainer = useRef<HTMLDivElement>(null);
2722
const bottomElement = useRef<HTMLDivElement>(null);
2823
const [displayedIconNames, setDisplayedIconNames] = useState(
@@ -105,8 +100,8 @@ export const IconPicker = ({ onIconSelected }: Props) => {
105100
};
106101

107102
return (
108-
<Stack>
109-
<HStack>
103+
<div className="flex flex-col gap-2">
104+
<div className="flex items-center gap-2">
110105
<DebouncedTextInput
111106
placeholder={t("emojiList.searchInput.placeholder")}
112107
onValueChange={searchIcon}
@@ -117,19 +112,24 @@ export const IconPicker = ({ onIconSelected }: Props) => {
117112
onColorChange={updateColor}
118113
side="right"
119114
/>
120-
</HStack>
121-
122-
<Stack overflowY="auto" maxH="350px" ref={scrollContainer} spacing={4}>
115+
</div>
116+
<div
117+
className="flex flex-col overflow-y-auto max-h-[350px] gap-4"
118+
ref={scrollContainer}
119+
>
123120
{recentIconNames.length > 0 && (
124-
<Stack>
125-
<Text fontSize="xs" color="gray.400" fontWeight="medium" pl="2">
121+
<div className="flex flex-col gap-2">
122+
<p
123+
className="text-xs font-medium pl-2 text-gray-7"
124+
color="gray.400"
125+
>
126126
RECENT
127-
</Text>
128-
<SimpleGrid
129-
spacing={0}
130-
gridTemplateColumns={`repeat(auto-fill, minmax(38px, 1fr))`}
131-
bgColor={isWhite ? "gray.400" : undefined}
132-
rounded="md"
127+
</p>
128+
<div
129+
className={cx(
130+
"grid gap-0 rounded-md grid-cols-[repeat(auto-fill,minmax(38px,1fr))]",
131+
isWhite ? "bg-gray-7" : undefined,
132+
)}
133133
>
134134
{recentIconNames.map((iconName) => (
135135
<Button
@@ -142,20 +142,20 @@ export const IconPicker = ({ onIconSelected }: Props) => {
142142
<Icon name={iconName} color={selectedColor} />
143143
</Button>
144144
))}
145-
</SimpleGrid>
146-
</Stack>
145+
</div>
146+
</div>
147147
)}
148-
<Stack>
148+
<div className="flex flex-col gap-2">
149149
{recentIconNames.length > 0 && (
150-
<Text fontSize="xs" color="gray.400" fontWeight="medium" pl="2">
150+
<p className="text-xs font-medium pl-2" color="gray.400">
151151
ICONS
152-
</Text>
152+
</p>
153153
)}
154-
<SimpleGrid
155-
spacing={0}
156-
gridTemplateColumns={`repeat(auto-fill, minmax(38px, 1fr))`}
157-
bgColor={isWhite ? "gray.400" : undefined}
158-
rounded="md"
154+
<div
155+
className={cx(
156+
"grid gap-0 rounded-md grid-cols-[repeat(auto-fill,minmax(38px,1fr))]",
157+
isWhite ? "bg-gray-7" : undefined,
158+
)}
159159
>
160160
{displayedIconNames.map((iconName) => (
161161
<Button
@@ -168,12 +168,12 @@ export const IconPicker = ({ onIconSelected }: Props) => {
168168
<Icon name={iconName} color={selectedColor} />
169169
</Button>
170170
))}
171-
</SimpleGrid>
172-
</Stack>
171+
</div>
172+
</div>
173173

174174
<div ref={bottomElement} />
175-
</Stack>
176-
</Stack>
175+
</div>
176+
</div>
177177
);
178178
};
179179

‎apps/builder/src/components/ImageUploadContent/ImageUploadContent.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { Flex, HStack, Stack } from "@chakra-ui/react";
21
import { useTranslate } from "@tolgee/react";
32
import { Button } from "@typebot.io/ui/components/Button";
43
import { useState } from "react";
@@ -58,8 +57,8 @@ export const ImageUploadContent = ({
5857
};
5958

6059
return (
61-
<Stack>
62-
<HStack>
60+
<div className="flex flex-col gap-2">
61+
<div className="flex items-center gap-2">
6362
{displayedTabs.includes("link") && (
6463
<Button
6564
variant={currentTab === "link" ? "outline" : "ghost"}
@@ -114,8 +113,7 @@ export const ImageUploadContent = ({
114113
Icon
115114
</Button>
116115
)}
117-
</HStack>
118-
116+
</div>
119117
<BodyContent
120118
uploadFileProps={uploadFileProps}
121119
tab={currentTab}
@@ -125,7 +123,7 @@ export const ImageUploadContent = ({
125123
linkWithVariableButton={linkWithVariableButton}
126124
onDelete={onDelete}
127125
/>
128-
</Stack>
126+
</div>
129127
);
130128
};
131129

@@ -185,15 +183,15 @@ const UploadFileContent = ({
185183
const { t } = useTranslate();
186184

187185
return (
188-
<Flex justify="center" py="2">
186+
<div className="flex justify-center py-2">
189187
<UploadButton
190188
fileType="image"
191189
filePathProps={uploadFileProps}
192190
onFileUploaded={onNewUrl}
193191
>
194192
{t("editor.header.uploadTab.uploadButton.label")}
195193
</UploadButton>
196-
</Flex>
194+
</div>
197195
);
198196
};
199197

0 commit comments

Comments
 (0)