Skip to content

Commit 2d4533a

Browse files
plagoaplagoa
committed
docs: add theme generator
1 parent fd1cfce commit 2d4533a

19 files changed

+1082
-5
lines changed

‎apps/docs/src/components/code/DocsProvider.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
"use client";
2+
13
import { useId } from "react";
24
import { useTheme } from "nextra-theme-docs";
35
import {

‎apps/docs/src/components/home/cards/Card.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,18 @@ type CardProps = {
1717

1818
export const Card = ({ children, title, subtitle, media, icon }: CardProps) => {
1919
return (
20-
<HvCard className="dark:!outline-border" bgcolor="bgContainer">
20+
<HvCard
21+
className="dark:!outline-border outline-border"
22+
bgcolor="bgContainer"
23+
>
2124
<HvCardHeader
2225
title={<HvTypography variant="title3">{title}</HvTypography>}
2326
subheader={<HvTypography variant="caption1">{subtitle}</HvTypography>}
2427
icon={icon}
2528
className="mx-xs mt-xs"
2629
/>
2730
{media && <HvCardMedia className="my-xs">{media}</HvCardMedia>}
28-
<HvCardContent className="!px-md">{children}</HvCardContent>
31+
<HvCardContent>{children}</HvCardContent>
2932
</HvCard>
3033
);
3134
};

‎apps/docs/src/components/home/cards/DataConfig.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,12 @@ export const DataConfig = () => {
1818
return (
1919
<Card title="Data Management Configuration">
2020
<div className="grid gap-sm">
21-
<HvBannerContent showIcon variant="info" action={null}>
21+
<HvBannerContent
22+
showIcon
23+
variant="info"
24+
action={null}
25+
className="min-w-unset w-full"
26+
>
2227
Backup impacts storage.
2328
</HvBannerContent>
2429
<HvInput
@@ -37,7 +42,11 @@ export const DataConfig = () => {
3742
placeholder="Select backup frequency"
3843
aria-label="backup-frequency"
3944
/>
40-
<HvCheckBox label="Enable Automatic Data Cleanup" />
45+
<HvCheckBox
46+
label="Enable Automatic Data Cleanup"
47+
labelProps={{ className: "text-wrap" }}
48+
className="overflow-auto"
49+
/>
4150
<div className="flex justify-end gap-xs">
4251
<HvButton variant="primary" aria-label="save-config-button">
4352
Save

‎apps/docs/src/components/home/cards/DataSecurity.tsx‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import {
22
HvIconContainer,
3+
HvStatusIcon,
4+
HvStatusIconVariant,
35
HvTag,
46
HvTypography,
57
} from "@hitachivantara/uikit-react-core";
@@ -12,6 +14,12 @@ const securityData = [
1214
{ title: "Informational", count: 20, color: "info" },
1315
];
1416

17+
const iconMap: Record<string, HvStatusIconVariant> = {
18+
negative: "error",
19+
warning: "warning",
20+
info: "info",
21+
};
22+
1523
export const DataSecurity = () => {
1624
return (
1725
<Card
@@ -29,7 +37,12 @@ export const DataSecurity = () => {
2937
<HvTypography variant="captionLabel" className="mb-xs">
3038
{title}
3139
</HvTypography>
32-
<HvTag label={count.toString()} color={color} className="w-48px" />
40+
<HvTag
41+
icon={<HvStatusIcon type="simple" variant={iconMap[color]} />}
42+
label={count.toString()}
43+
color={color}
44+
// className="w-48px"
45+
/>
3346
</div>
3447
))}
3548
</div>

‎apps/docs/src/components/home/cards/Orders.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import {
2+
HvButton,
3+
HvColorAny,
4+
HvTypography,
5+
} from "@hitachivantara/uikit-react-core";
6+
7+
import { Card } from "./Card";
8+
9+
const orders = [
10+
{ label: "John Doe", status: "Delivered" },
11+
{ label: "Jane Smith", status: "Shipped" },
12+
{ label: "Alice Johnson", status: "Pending" },
13+
{ label: "Bob Brown", status: "Cancelled" },
14+
{ label: "Charlie Davis", status: "Waiting Feedback" },
15+
];
16+
17+
const statusMap: Record<string, HvColorAny> = {
18+
Delivered: "positive",
19+
Pending: "warning",
20+
Shipped: "info",
21+
Cancelled: "negative",
22+
"Waiting Feedback": "accent",
23+
};
24+
25+
export const Orders = () => {
26+
return (
27+
<Card
28+
title={
29+
<div className="flex items-center gap-[var(--uikit-space-xs)]">
30+
<div className="i-ph-receipt" />
31+
<HvTypography variant="title4">Orders</HvTypography>
32+
</div>
33+
}
34+
>
35+
<div className="grid gap-[var(--uikit-space-xxs)]">
36+
{orders.map((order) => (
37+
<div
38+
key={order.status}
39+
className="flex items-center justify-between p-[var(--uikit-space-xs)] border-b border-border"
40+
>
41+
<HvTypography>{order.label}</HvTypography>
42+
<HvButton
43+
className="p-x-xs"
44+
color={statusMap[order.status]}
45+
variant="primary"
46+
size="sm"
47+
>
48+
{order.status}
49+
</HvButton>
50+
</div>
51+
))}
52+
</div>
53+
</Card>
54+
);
55+
};

‎apps/docs/src/content/_meta.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,4 +38,15 @@ export default {
3838
timestamp: false,
3939
},
4040
},
41+
generator: {
42+
type: "page",
43+
title: "Theme Generator",
44+
theme: {
45+
layout: "full",
46+
toc: false,
47+
breadcrumb: false,
48+
sidebar: false,
49+
timestamp: false,
50+
},
51+
},
4152
} satisfies MetaRecord;

‎apps/docs/src/content/generator/ColorMode.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
"use client";
2+
3+
import { useCallback, useState } from "react";
4+
import {
5+
HvButton,
6+
HvMultiButton,
7+
HvTypography,
8+
} from "@hitachivantara/uikit-react-core";
9+
10+
import { useGeneratorContext } from "./GeneratorContext";
11+
12+
export const ColorMode = () => {
13+
const { setColorMode, colorMode } = useGeneratorContext();
14+
const [selectedMode, setSelectedMode] = useState(colorMode);
15+
16+
const handleToggle = useCallback(() => {
17+
setSelectedMode((prev) => (prev === "dawn" ? "wicked" : "dawn"));
18+
setColorMode(colorMode === "dawn" ? "wicked" : "dawn");
19+
}, [colorMode, setColorMode]);
20+
21+
return (
22+
<div className="flex flex-col gap-xs">
23+
<div className="flex items-center gap-xs">
24+
<div className="i-ph-paint-bucket" />
25+
<HvTypography variant="title4">Color mode</HvTypography>
26+
<div className="border-1 border-borderSubtle h-1px flex-1" />
27+
</div>
28+
<HvMultiButton className="w-fit">
29+
<HvButton
30+
selected={selectedMode === "dawn"}
31+
icon
32+
aria-label="Light mode"
33+
onClick={handleToggle}
34+
>
35+
<div className="i-ph-sun" />
36+
</HvButton>
37+
<HvButton
38+
selected={selectedMode === "wicked"}
39+
icon
40+
aria-label="Dark mode"
41+
onClick={handleToggle}
42+
>
43+
<div className="i-ph-moon" />
44+
</HvButton>
45+
</HvMultiButton>
46+
</div>
47+
);
48+
};

‎apps/docs/src/content/generator/Colors.tsx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
"use client";
2+
3+
import { useCallback, useState } from "react";
4+
import {
5+
HvColorPicker,
6+
HvIconButton,
7+
HvTypography,
8+
} from "@hitachivantara/uikit-react-core";
9+
10+
import { ColorsConfig } from "./Dialogs/ColorsConfig";
11+
import { useGeneratorContext } from "./GeneratorContext";
12+
13+
const colorsToDisplay = [
14+
"bgPage",
15+
"positive",
16+
"negative",
17+
"warning",
18+
"info",
19+
"accent",
20+
"primary",
21+
"secondary",
22+
"text",
23+
"border",
24+
];
25+
26+
export const Colors = () => {
27+
const [configOpen, setConfigOpen] = useState(false);
28+
const { customTheme, updateCustomTheme, colorMode } = useGeneratorContext();
29+
30+
const updateTheme = useCallback(
31+
(changes: Record<string, any>) => {
32+
updateCustomTheme(changes);
33+
},
34+
[updateCustomTheme],
35+
);
36+
37+
return (
38+
<>
39+
{configOpen && <ColorsConfig open={configOpen} setOpen={setConfigOpen} />}
40+
<div className="flex flex-col gap-xs">
41+
<div className="flex items-center gap-xs">
42+
<div className="i-ph-paint-bucket" />
43+
<HvTypography variant="title4">Colors</HvTypography>
44+
<div className="border-1 border-borderSubtle h-1px flex-1" />
45+
<HvIconButton
46+
aria-label="Settings"
47+
title="Customize colors"
48+
onClick={() => setConfigOpen(true)}
49+
>
50+
<div className="i-ph-gear" />
51+
</HvIconButton>
52+
</div>
53+
<div className="grid grid-cols-4 gap-sm">
54+
{colorsToDisplay.map((color) => (
55+
<div key={color} className="flex flex-col gap-xxs items-center">
56+
<HvColorPicker
57+
iconOnly
58+
value={customTheme.colors.modes[colorMode][color]}
59+
onChangeComplete={(c) => {
60+
return updateTheme({
61+
colors: { modes: { [colorMode]: { [color]: c } } },
62+
});
63+
}}
64+
/>
65+
<HvTypography variant="caption2">{color}</HvTypography>
66+
</div>
67+
))}
68+
</div>
69+
</div>
70+
</>
71+
);
72+
};

0 commit comments

Comments
 (0)