Skip to content

Commit 356c900

Browse files
trinhthinh388trinhthinh388
authored
feat: supports component styles overrides (#200)
1 parent 7433c6f commit 356c900

Some content is hidden

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

80 files changed

+3385
-3084
lines changed

‎.changeset/neat-mirrors-build.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
"@brifui/cli": patch
3+
"@brifui/accordion": patch
4+
"@brifui/alert": patch
5+
"@brifui/avatar": patch
6+
"@brifui/badge": patch
7+
"@brifui/button": patch
8+
"@brifui/card": patch
9+
"@brifui/checkbox": patch
10+
"@brifui/codeblock": patch
11+
"@brifui/dialog": patch
12+
"@brifui/components": patch
13+
"@brifui/form": patch
14+
"@brifui/input": patch
15+
"@brifui/radio": patch
16+
"@brifui/scrollarea": patch
17+
"@brifui/select": patch
18+
"@brifui/sidebar": patch
19+
"@brifui/spinner": patch
20+
"@brifui/switch": patch
21+
"@brifui/table": patch
22+
"@brifui/text": patch
23+
"@brifui/textarea": patch
24+
"@brifui/toast": patch
25+
"@brifui/tooltip": patch
26+
"@brifui/eslint-config": patch
27+
"@brifui/mocks": patch
28+
"@brifui/node": patch
29+
"@brifui/postcss": patch
30+
"@brifui/styled": patch
31+
"@brifui/theme": patch
32+
"@brifui/types": patch
33+
"@brifui/typescript-config": patch
34+
"@brifui/utils": patch
35+
---
36+
37+
Supports for component styles overrides

‎docs/app/docs/(components)/card/snippet.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,7 @@ export const Example = () => (
1717
<Card.Footer>Footer</Card.Footer>
1818
</Card>
1919
)
20-
`
21-
20+
`;
2221

2322
export const borderredSnippet = `import { Card } from "@brifui/components";
2423
@@ -29,4 +28,4 @@ export const Example = () => (
2928
<Card.Footer>Footer</Card.Footer>
3029
</Card>
3130
)
32-
`
31+
`;

‎docs/app/docs/(components)/checkbox/snippet.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export const Example = () => (
1818
</Checkbox>
1919
</>
2020
)
21-
`
21+
`;
2222

2323
export const indeterminateSnippet = `import { Checkbox } from "@brifui/components";
2424
@@ -40,7 +40,7 @@ export const Example = () => (
4040
</Checkbox>
4141
</>
4242
)
43-
`
43+
`;
4444

4545
export const disabledSnippet = `import { Checkbox } from "@brifui/components";
4646
@@ -67,7 +67,7 @@ export const Example = () => (
6767
</Checkbox>
6868
</>
6969
)
70-
`
70+
`;
7171

7272
export const errorSnippet = `import { Checkbox } from "@brifui/components";
7373
@@ -94,4 +94,4 @@ export const Example = () => (
9494
</Checkbox>
9595
</>
9696
)
97-
`
97+
`;

‎docs/app/docs/(components)/sidebar/apis.ts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { ComponentAPI } from "@/components/page";
2+
3+
export const sidebarProviderAPIs: ComponentAPI[] = [];
4+
5+
export const sidebarAPIs: ComponentAPI[] = [
6+
{
7+
name: "isOpen",
8+
type: "boolean",
9+
default: "false"
10+
}
11+
];
12+
13+
export const sidebarHeaderAPIs: ComponentAPI[] = [];
14+
15+
export const sidebarBodyAPIs: ComponentAPI[] = [];
16+
17+
export const sidebarFooterAPIs: ComponentAPI[] = [];
18+
19+
export const sidebarMenuAPIs: ComponentAPI[] = [];
20+
21+
export const sidebarGroupAPIs: ComponentAPI[] = [];
22+
23+
export const sidebarGroupLabelAPIs: ComponentAPI[] = [];
24+
25+
export const sidebarMenuItemAPIs: ComponentAPI[] = [
26+
{
27+
name: "as",
28+
type: "React.ElementType",
29+
default: "div"
30+
},
31+
{
32+
name: "disabled",
33+
type: "boolean",
34+
default: "false"
35+
},
36+
{
37+
name: "isSelected",
38+
type: "boolean",
39+
default: "false"
40+
},
41+
{
42+
name: "label",
43+
type: "React.ReactNode"
44+
}
45+
];
46+
47+
export const sidebarMenuItemIconAPIs: ComponentAPI[] = [];
48+
49+
export const sidebarMenuItemLabelAPIs: ComponentAPI[] = [];

‎docs/app/docs/(components)/sidebar/page.tsx‎

Lines changed: 41 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -25,17 +25,26 @@ import {
2525
} from "@brifui/components";
2626
import { css } from "@brifui/styled/css";
2727

28+
import {
29+
sidebarAPIs,
30+
sidebarBodyAPIs,
31+
sidebarFooterAPIs,
32+
sidebarGroupAPIs,
33+
sidebarGroupLabelAPIs,
34+
sidebarHeaderAPIs,
35+
sidebarMenuAPIs,
36+
sidebarMenuItemAPIs,
37+
sidebarMenuItemIconAPIs,
38+
sidebarMenuItemLabelAPIs,
39+
sidebarProviderAPIs
40+
} from "./apis";
2841
import { defaultSnippet } from "./snippet";
2942

3043
const CollapseButton = () => {
3144
const { isOpen, setOpen } = useSidebar();
3245

3346
return (
34-
<div
35-
className={css({
36-
p: 2
37-
})}
38-
>
47+
<div className={css({ p: 2 })}>
3948
<Button
4049
size={isOpen ? "md" : "icon"}
4150
fluid={isOpen}
@@ -71,17 +80,10 @@ export default function SidebarDocs() {
7180

7281
<Page.Section title="Default">
7382
<Page.Preview
74-
className={css({
75-
p: "0px !important",
76-
overflow: "hidden"
77-
})}
83+
className={css({ p: "0px !important", overflow: "hidden" })}
7884
>
7985
<Sidebar.Root isOpen={isOpen}>
80-
<ScrollArea.Root
81-
css={css.raw({
82-
h: "450px"
83-
})}
84-
>
86+
<ScrollArea.Root css={css.raw({ h: "450px" })}>
8587
<Sidebar.Header css={css.raw({ background: "background" })}>
8688
<Sidebar.Menu
8789
css={css.raw({
@@ -199,11 +201,7 @@ export default function SidebarDocs() {
199201
</Sidebar.Menu>
200202
</Sidebar.Group>
201203
</Sidebar.Body>
202-
<Sidebar.Footer
203-
css={css.raw({
204-
background: "background"
205-
})}
206-
>
204+
<Sidebar.Footer css={css.raw({ background: "background" })}>
207205
<Sidebar.Menu>
208206
<CollapseButton />
209207
</Sidebar.Menu>
@@ -213,6 +211,30 @@ export default function SidebarDocs() {
213211
</Page.Preview>
214212
<Page.CodePreview>{defaultSnippet}</Page.CodePreview>
215213
</Page.Section>
214+
215+
<Page.Section shadow={false} title="API Reference">
216+
<Page.APIReference title="Provider" apis={sidebarProviderAPIs} />
217+
<Page.APIReference tag="aside" title="Root" apis={sidebarAPIs} />
218+
<Page.APIReference title="Header" apis={sidebarHeaderAPIs} />
219+
<Page.APIReference title="Body" apis={sidebarBodyAPIs} />
220+
<Page.APIReference title="Footer" apis={sidebarFooterAPIs} />
221+
<Page.APIReference title="Group" apis={sidebarGroupAPIs} />
222+
<Page.APIReference title="GroupLabel" apis={sidebarGroupLabelAPIs} />
223+
<Page.APIReference title="Menu" apis={sidebarMenuAPIs} />
224+
<Page.APIReference
225+
tag="T"
226+
title="MenuItem"
227+
apis={sidebarMenuItemAPIs}
228+
/>
229+
<Page.APIReference
230+
title="MenuItemLabel"
231+
apis={sidebarMenuItemLabelAPIs}
232+
/>
233+
<Page.APIReference
234+
title="MenuItemIcon"
235+
apis={sidebarMenuItemIconAPIs}
236+
/>
237+
</Page.Section>
216238
</Page>
217239
);
218240
}

‎docs/app/docs/(components)/spinner/apis.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { ComponentAPI } from "@/components/page";
2+
3+
export const spinnerAPIs: ComponentAPI[] = [
4+
{
5+
name: "size",
6+
type: ["sm", "md", "lg"],
7+
default: "md"
8+
}
9+
];

‎docs/app/docs/(components)/spinner/page.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Page } from "@/components/page";
44
import { Spinner } from "@brifui/components";
55
import { css } from "@brifui/styled/css";
66

7+
import { spinnerAPIs } from "./apis";
78
import { size } from "./snippet";
89

910
export default function SpinnerDocs() {
@@ -28,6 +29,10 @@ export default function SpinnerDocs() {
2829
</Page.Preview>
2930
<Page.CodePreview>{size}</Page.CodePreview>
3031
</Page.Section>
32+
33+
<Page.Section shadow={false} title="API Reference">
34+
<Page.APIReference title="Spinner" apis={spinnerAPIs} />
35+
</Page.Section>
3136
</Page>
3237
);
3338
}

‎docs/app/docs/(tokens)/configuration/page.tsx‎

Lines changed: 104 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
"use client";
22

3+
import { InlineLink } from "@/components/inline-link";
34
import { Page } from "@/components/page";
5+
import { CodeSquareIcon } from "lucide-react";
46
import { useTheme } from "next-themes";
5-
import { Button, Text } from "@brifui/components";
7+
import { Button, Card, Codeblock, Text } from "@brifui/components";
68
import { css, Styles } from "@brifui/styled/css";
79

810
export default function ColorsDocs() {
@@ -69,6 +71,107 @@ export default function ColorsDocs() {
6971
</Page.Preview>
7072
<Page.CodePreview>Try it out</Page.CodePreview>
7173
</Page.Section>
74+
75+
<Page.Section
76+
shadow={false}
77+
title="Override component styles"
78+
description="BrifUI helps you override the default component styles easily via configurations."
79+
>
80+
<p>
81+
Let&apos;s override the default styles of the{" "}
82+
<InlineLink href="/docs/button">Button</InlineLink> component, which
83+
has 2 <strong>slots</strong>:
84+
</p>
85+
<p>
86+
<ul className={css({ listStyle: "inside" })}>
87+
<Text as="li" fontWeight="semibold">
88+
root
89+
</Text>
90+
<Text as="li" fontWeight="semibold">
91+
container
92+
</Text>
93+
</ul>
94+
</p>
95+
<p>
96+
And we want to change the default text color of the{" "}
97+
<InlineLink href="/docs/button">Button</InlineLink> to <b>blue</b>.
98+
</p>
99+
<p>
100+
Each component can configure individually by overriding 2{" "}
101+
<b>properties</b>:
102+
</p>
103+
<p>
104+
<ul className={css({ listStyle: "inside" })}>
105+
<Text as="li" fontWeight="semibold">
106+
base
107+
</Text>
108+
<Text as="li" fontWeight="semibold">
109+
variants
110+
</Text>
111+
</ul>
112+
</p>
113+
114+
<Card bordered css={css.raw({ mb: 6 })}>
115+
<Card.Body>
116+
<Codeblock.Root>
117+
<Codeblock.Header
118+
icon={<CodeSquareIcon />}
119+
filename="brifui.config.ts"
120+
/>
121+
<Codeblock.Content language="bash">{`import { defineConfig } from "@brifui/theme";
122+
123+
export default defineConfig({
124+
...,
125+
recipes: {
126+
button: {
127+
variants: {
128+
size: {
129+
md: {
130+
container: {
131+
borderRadius: "none"
132+
}
133+
}
134+
}
135+
}
136+
}
137+
}
138+
});`}</Codeblock.Content>
139+
</Codeblock.Root>
140+
</Card.Body>
141+
<Card.Footer>
142+
This configuration will make{" "}
143+
<InlineLink href="/docs/button">Button</InlineLink> of size{" "}
144+
<Text
145+
css={css.raw({
146+
py: "0.5",
147+
px: 2,
148+
bg: "default",
149+
textStyle: "text.sm",
150+
color: "default.foreground",
151+
borderRadius: "component.md"
152+
})}
153+
fontWeight="semibold"
154+
>
155+
md
156+
</Text>{" "}
157+
has no{" "}
158+
<Text
159+
css={css.raw({
160+
py: "0.5",
161+
px: 2,
162+
bg: "default",
163+
textStyle: "text.sm",
164+
color: "default.foreground",
165+
borderRadius: "component.md"
166+
})}
167+
fontWeight="semibold"
168+
>
169+
border-radius
170+
</Text>
171+
.
172+
</Card.Footer>
173+
</Card>
174+
</Page.Section>
72175
</Page>
73176
);
74177
}

‎docs/app/docs/installation/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,9 @@ export default function InstallationPage() {
6464
<Text as="li">
6565
<InlineLink
6666
target="_blank"
67-
href="https://github.com/chakra-ui/panda/releases/tag/%40pandacss%2Ftypes%400.53.1"
67+
href="https://github.com/chakra-ui/panda/releases/tag/%40pandacss%2Ftypes%400.53.4"
6868
>
69-
Panda CSS 0.53.1
69+
Panda CSS 0.53.4
7070
</InlineLink>{" "}
7171
or later.
7272
</Text>

0 commit comments

Comments
 (0)