Skip to content

Commit 4b45872

Browse files
MarfuenMarfuen
committed
chore(ui-new): update ButtonPaletteSwitcher and integrate palette state in UI components
1 parent a2bbed2 commit 4b45872

File tree

27 files changed

+6945
-180
lines changed

27 files changed

+6945
-180
lines changed

‎apps/portal/src/app/(public)/test-ui/components/ButtonPaletteSwitcher.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,6 @@ import {
1010

1111
export type ButtonColorPalette = SupportedColorPalette;
1212

13-
const isButtonColorPalette = (value: string): value is ButtonColorPalette => {
14-
return (SUPPORTED_COLOR_PALETTES as readonly string[]).includes(value);
15-
};
16-
1713
export function ButtonPaletteSwitcher({
1814
value,
1915
onChange,

‎apps/portal/src/app/(public)/test-ui/components/TestUiPage.tsx‎

Lines changed: 36 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,51 @@
11
'use client';
22

3-
import { Box, ColorModeButton, Container, Flex, Heading, Text } from '@trycompai/ui-new';
3+
import {
4+
Box,
5+
ColorModeButton,
6+
Container,
7+
Flex,
8+
Heading,
9+
type SupportedColorPalette,
10+
} from '@trycompai/ui-new';
11+
import { useState } from 'react';
12+
import { ButtonPaletteSwitcher } from './ButtonPaletteSwitcher';
413
import { TestUiSectionsBottom } from './TestUiSectionsBottom';
514
import { TestUiSectionsTop } from './TestUiSectionsTop';
615

716
export function TestUiPage() {
8-
return (
9-
<Box pb="20">
10-
<Container maxW="1400px" py={8}>
11-
<Heading size="2xl" mb={8}>
12-
Design System Preview
13-
</Heading>
14-
15-
<TestUiSectionsTop />
16-
<TestUiSectionsBottom />
17-
</Container>
17+
const [palette, setPalette] = useState<SupportedColorPalette>('primary');
1818

19+
return (
20+
<Box pb="12">
1921
<Box
20-
position="fixed"
21-
bottom="0"
22-
left="0"
23-
right="0"
24-
borderTopWidth="1px"
25-
borderTopColor="border"
26-
bg="white"
27-
zIndex="overlay"
22+
position="sticky"
23+
top="0"
24+
zIndex="sticky"
25+
bg="bg"
26+
borderBottomWidth="1px"
27+
borderBottomColor="border"
2828
>
29-
<Container maxW="1400px" py="3">
30-
<Flex align="center" justify="space-between" gap="3">
31-
<Text color="secondary.700" fontSize="sm">
32-
Theme
33-
</Text>
34-
<ColorModeButton />
29+
<Container maxW="1400px" py="4">
30+
<Flex
31+
align={{ base: 'stretch', md: 'center' }}
32+
justify="space-between"
33+
direction={{ base: 'column', md: 'row' }}
34+
gap="4"
35+
>
36+
<Heading size="xl">Design System Preview</Heading>
37+
<Flex align="center" justify="space-between" gap="4" flexWrap="wrap">
38+
<ButtonPaletteSwitcher value={palette} onChange={setPalette} />
39+
<ColorModeButton />
40+
</Flex>
3541
</Flex>
3642
</Container>
3743
</Box>
44+
45+
<Container maxW="1400px" py={8}>
46+
<TestUiSectionsTop palette={palette} />
47+
<TestUiSectionsBottom palette={palette} />
48+
</Container>
3849
</Box>
3950
);
4051
}

‎apps/portal/src/app/(public)/test-ui/components/TestUiSectionsBottom.tsx‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,12 @@ import {
1717
Tabs,
1818
Text,
1919
VStack,
20+
type SupportedColorPalette,
2021
} from '@trycompai/ui-new';
2122
import { useState } from 'react';
2223
import { Section, SubSection } from './TestUiPrimitives';
2324

24-
export function TestUiSectionsBottom() {
25+
export function TestUiSectionsBottom({ palette }: { palette: SupportedColorPalette }) {
2526
return (
2627
<>
2728
<Section title="Alerts">
@@ -58,7 +59,7 @@ export function TestUiSectionsBottom() {
5859
</Section>
5960

6061
<Section title="Tabs">
61-
<Tabs.Root defaultValue="tab1" colorPalette="primary">
62+
<Tabs.Root defaultValue="tab1" colorPalette={palette}>
6263
<Tabs.List>
6364
<Tabs.Trigger value="tab1">Overview</Tabs.Trigger>
6465
<Tabs.Trigger value="tab2">Settings</Tabs.Trigger>
@@ -136,7 +137,9 @@ export function TestUiSectionsBottom() {
136137
<Section title="Menu">
137138
<Menu.Root>
138139
<Menu.Trigger asChild>
139-
<Button variant="outline">Open Menu</Button>
140+
<Button colorPalette={palette} variant="outline">
141+
Open Menu
142+
</Button>
140143
</Menu.Trigger>
141144
<Menu.Positioner>
142145
<Menu.Content>
@@ -152,7 +155,7 @@ export function TestUiSectionsBottom() {
152155
</Section>
153156

154157
<Section title="Dialog">
155-
<DialogExample />
158+
<DialogExample palette={palette} />
156159
</Section>
157160

158161
<Section title="Typography">
@@ -207,12 +210,14 @@ export function TestUiSectionsBottom() {
207210
);
208211
}
209212

210-
function DialogExample() {
213+
function DialogExample({ palette }: { palette: SupportedColorPalette }) {
211214
const [open, setOpen] = useState(false);
212215

213216
return (
214217
<>
215-
<Button onClick={() => setOpen(true)}>Open Dialog</Button>
218+
<Button colorPalette={palette} onClick={() => setOpen(true)}>
219+
Open Dialog
220+
</Button>
216221
<Dialog.Root open={open} onOpenChange={(e) => setOpen(e.open)}>
217222
<Dialog.Backdrop />
218223
<Dialog.Positioner>
@@ -224,10 +229,12 @@ function DialogExample() {
224229
<Text>This is the dialog content.</Text>
225230
</Dialog.Body>
226231
<Dialog.Footer>
227-
<Button variant="outline" onClick={() => setOpen(false)}>
232+
<Button colorPalette={palette} variant="outline" onClick={() => setOpen(false)}>
228233
Cancel
229234
</Button>
230-
<Button onClick={() => setOpen(false)}>Confirm</Button>
235+
<Button colorPalette={palette} onClick={() => setOpen(false)}>
236+
Confirm
237+
</Button>
231238
</Dialog.Footer>
232239
</Dialog.Content>
233240
</Dialog.Positioner>

‎apps/portal/src/app/(public)/test-ui/components/TestUiSectionsTop.tsx‎

Lines changed: 43 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,11 @@ import {
1515
Text,
1616
Textarea,
1717
VStack,
18+
type SupportedColorPalette,
1819
} from '@trycompai/ui-new';
19-
import { useState } from 'react';
20-
import { ButtonPaletteSwitcher, type ButtonColorPalette } from './ButtonPaletteSwitcher';
2120
import { ColorRow, Section, SubSection } from './TestUiPrimitives';
2221

23-
export function TestUiSectionsTop() {
24-
const [buttonPalette, setButtonPalette] = useState<ButtonColorPalette>('primary');
25-
22+
export function TestUiSectionsTop({ palette }: { palette: SupportedColorPalette }) {
2623
return (
2724
<>
2825
<Section title="Color Tokens">
@@ -38,76 +35,69 @@ export function TestUiSectionsTop() {
3835
</Section>
3936

4037
<Section title="Buttons">
41-
<HStack mb={3}>
42-
<ButtonPaletteSwitcher value={buttonPalette} onChange={setButtonPalette} />
43-
</HStack>
4438
<SubSection title="Variants">
4539
<HStack gap={4} flexWrap="wrap">
46-
<Button colorPalette={buttonPalette}>Default Button</Button>
47-
<Button colorPalette={buttonPalette} variant="outline">
40+
<Button colorPalette={palette}>Default Button</Button>
41+
<Button colorPalette={palette} variant="outline">
4842
Outline
4943
</Button>
50-
<Button colorPalette={buttonPalette} variant="ghost">
44+
<Button colorPalette={palette} variant="ghost">
5145
Ghost
5246
</Button>
53-
<Button colorPalette={buttonPalette} variant="link">
47+
<Button colorPalette={palette} isLink>
5448
Link
5549
</Button>
5650
</HStack>
5751
</SubSection>
5852

5953
<SubSection title="Sizes">
6054
<HStack gap={4} alignItems="center" flexWrap="wrap">
61-
<Button colorPalette={buttonPalette} size="xs">
62-
XS
55+
<Button colorPalette={palette} size="xs">
56+
XS Button
6357
</Button>
64-
<Button colorPalette={buttonPalette} size="sm">
65-
SM
58+
<Button colorPalette={palette} size="sm">
59+
SM Button
6660
</Button>
67-
<Button colorPalette={buttonPalette} size="md">
68-
MD
61+
<Button colorPalette={palette} size="md">
62+
MD Button
6963
</Button>
70-
<Button colorPalette={buttonPalette} size="lg">
71-
LG
64+
<Button colorPalette={palette} size="lg">
65+
LG Button
7266
</Button>
73-
<Button colorPalette={buttonPalette} size="xl">
74-
XL
67+
<Button colorPalette={palette} size="xl">
68+
XL Button
7569
</Button>
7670
</HStack>
7771
</SubSection>
7872

7973
<SubSection title="States">
8074
<HStack gap={4} flexWrap="wrap">
81-
<Button colorPalette={buttonPalette}>Normal</Button>
82-
<Button colorPalette={buttonPalette} disabled>
75+
<Button colorPalette={palette}>Normal</Button>
76+
<Button colorPalette={palette} disabled>
8377
Disabled
8478
</Button>
85-
<Button colorPalette={buttonPalette} loading>
79+
<Button colorPalette={palette} loading>
8680
Loading
8781
</Button>
8882
</HStack>
8983
</SubSection>
9084
</Section>
9185

9286
<Section title="Badges">
93-
<SubSection title="Color Palettes">
94-
<HStack gap={4} flexWrap="wrap">
95-
<Badge colorPalette="primary">Primary</Badge>
96-
<Badge colorPalette="secondary">Secondary</Badge>
97-
<Badge colorPalette="blue">Blue</Badge>
98-
<Badge colorPalette="orange">Orange</Badge>
99-
<Badge colorPalette="rose">Rose</Badge>
100-
<Badge colorPalette="yellow">Yellow</Badge>
101-
<Badge colorPalette="sand">Sand</Badge>
102-
</HStack>
103-
</SubSection>
104-
10587
<SubSection title="Variants">
10688
<HStack gap={4} flexWrap="wrap">
107-
<Badge variant="solid">Solid</Badge>
108-
<Badge variant="subtle">Subtle</Badge>
109-
<Badge variant="outline">Outline</Badge>
110-
<Badge variant="surface">Surface</Badge>
89+
<Badge colorPalette={palette} variant="solid">
90+
Solid
91+
</Badge>
92+
<Badge colorPalette={palette} variant="subtle">
93+
Subtle
94+
</Badge>
95+
<Badge colorPalette={palette} variant="outline">
96+
Outline
97+
</Badge>
98+
<Badge colorPalette={palette} variant="surface">
99+
Surface
100+
</Badge>
111101
</HStack>
112102
</SubSection>
113103
</Section>
@@ -131,30 +121,30 @@ export function TestUiSectionsTop() {
131121
<VStack align="stretch" gap={4}>
132122
<SubSection title="Checkbox">
133123
<VStack align="start" gap={2}>
134-
<Checkbox.Root defaultChecked colorPalette="primary">
124+
<Checkbox.Root defaultChecked colorPalette={palette}>
135125
<Checkbox.HiddenInput />
136126
<Checkbox.Control />
137-
<Checkbox.Label>Checked (primary)</Checkbox.Label>
127+
<Checkbox.Label>Checked</Checkbox.Label>
138128
</Checkbox.Root>
139-
<Checkbox.Root colorPalette="secondary">
129+
<Checkbox.Root colorPalette={palette}>
140130
<Checkbox.HiddenInput />
141131
<Checkbox.Control />
142-
<Checkbox.Label>Unchecked (secondary)</Checkbox.Label>
132+
<Checkbox.Label>Unchecked</Checkbox.Label>
143133
</Checkbox.Root>
144134
</VStack>
145135
</SubSection>
146136

147137
<SubSection title="Switch">
148138
<VStack align="start" gap={2}>
149-
<Switch.Root defaultChecked colorPalette="primary">
139+
<Switch.Root defaultChecked colorPalette={palette}>
150140
<Switch.HiddenInput />
151141
<Switch.Control />
152142
<Switch.Label>Enabled</Switch.Label>
153143
</Switch.Root>
154-
<Switch.Root colorPalette="secondary">
144+
<Switch.Root colorPalette={palette}>
155145
<Switch.HiddenInput />
156146
<Switch.Control />
157-
<Switch.Label>Secondary color</Switch.Label>
147+
<Switch.Label>Disabled</Switch.Label>
158148
</Switch.Root>
159149
</VStack>
160150
</SubSection>
@@ -204,17 +194,17 @@ export function TestUiSectionsTop() {
204194
<VStack align="stretch" gap={4}>
205195
<SubSection title="Progress Bar">
206196
<VStack align="stretch" gap={2}>
207-
<Progress.Root value={30} colorPalette="primary">
197+
<Progress.Root value={30} colorPalette={palette}>
208198
<Progress.Track>
209199
<Progress.Range />
210200
</Progress.Track>
211201
</Progress.Root>
212-
<Progress.Root value={60} colorPalette="blue">
202+
<Progress.Root value={60} colorPalette={palette}>
213203
<Progress.Track>
214204
<Progress.Range />
215205
</Progress.Track>
216206
</Progress.Root>
217-
<Progress.Root value={80} colorPalette="orange">
207+
<Progress.Root value={80} colorPalette={palette}>
218208
<Progress.Track>
219209
<Progress.Range />
220210
</Progress.Track>
@@ -226,10 +216,8 @@ export function TestUiSectionsTop() {
226216
<VStack align="stretch" gap={4}>
227217
<SubSection title="Spinner">
228218
<HStack gap={6} flexWrap="wrap">
229-
<Spinner colorPalette="primary" />
230-
<Spinner colorPalette="blue" />
231-
<Spinner colorPalette="orange" />
232-
<Spinner size="lg" colorPalette="primary" />
219+
<Spinner colorPalette={palette} />
220+
<Spinner size="lg" colorPalette={palette} />
233221
</HStack>
234222
</SubSection>
235223

0 commit comments

Comments
 (0)