Skip to content

Commit fe679da

Browse files
zettcazettca
committed
chore: misc fixes & fix decorators
1 parent 371ece7 commit fe679da

28 files changed

+110
-128
lines changed

‎apps/docs/src/components/Header.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { Suspense } from "react";
2+
13
import { ComponentDataParams, getComponentData } from "../utils/component";
24
import { PlaygroundProps } from "./code/Playground";
35
import { Description } from "./usage/Description";
@@ -17,7 +19,9 @@ export async function Header({ params, ...playgroundProps }: HeaderProps) {
1719
return (
1820
<div>
1921
<Description meta={meta} />
20-
<Tabs meta={meta} playgroundProps={{ ...playgroundProps, meta }} />
22+
<Suspense fallback={null}>
23+
<Tabs meta={meta} playgroundProps={{ ...playgroundProps, meta }} />
24+
</Suspense>
2125
</div>
2226
);
2327
}

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export interface PlaygroundProps {
1515
meta?: ComponentMeta;
1616
controls: Record<string, Control>;
1717
children?: React.ReactNode;
18-
decorator?: (children: React.ReactNode) => React.ReactNode;
18+
decoratorClassName?: string;
1919
}
2020

2121
const parseChildren = (child: React.ReactNode) =>
@@ -66,7 +66,7 @@ export const Playground = ({
6666
componentProps,
6767
controls = {},
6868
children,
69-
decorator,
69+
decoratorClassName,
7070
}: PlaygroundProps) => {
7171
// Initialize dynamic props with default values from controls
7272
const [dynamicProps, setDynamicProps] = useState<Record<string, unknown>>(
@@ -109,7 +109,11 @@ export const Playground = ({
109109
<div className="grid grid-cols-[2fr_1fr] border rounded-t-round">
110110
{/* Preview Area */}
111111
<DocsProvider className="grid place-items-center p-sm h-full">
112-
{decorator ? decorator(componentElement) : componentElement}
112+
{decoratorClassName ? (
113+
<div className={decoratorClassName}>{componentElement}</div>
114+
) : (
115+
componentElement
116+
)}
113117
</DocsProvider>
114118

115119
{/* Controls Area */}

‎apps/docs/src/components/home/HeroSection.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { useMemo } from "react";
2-
import { ArrowRight } from "@phosphor-icons/react/ArrowRight";
32
import { clsx } from "clsx";
43
import Link from "next/link";
54
import { HvButton } from "@hitachivantara/uikit-react-core";
@@ -81,7 +80,7 @@ export const HeroSection = () => (
8180
variant="subtle"
8281
size="lg"
8382
className="mt-md max-sm:w-full hidden sm:inline-flex"
84-
endIcon={<ArrowRight />}
83+
endIcon={<div className="i-ph-arrow-right" />}
8584
>
8685
Explore components
8786
</HvButton>

‎apps/docs/src/components/home/Home.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
"use client";
2-
31
import { CardsSection } from "./CardsSection";
42
import { HeroSection } from "./HeroSection";
53

‎apps/docs/src/components/home/cards/ApiUsage.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 { HvLineChart } from "@hitachivantara/uikit-react-viz";
24

35
import { Card } from "./Card";

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

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1-
import { HvTag, HvTypography } from "@hitachivantara/uikit-react-core";
2-
import { SystemActivity } from "@hitachivantara/uikit-react-icons";
1+
import {
2+
HvIconContainer,
3+
HvTag,
4+
HvTypography,
5+
} from "@hitachivantara/uikit-react-core";
36

47
import { Card } from "./Card";
58

@@ -14,7 +17,11 @@ export const DataSecurity = () => {
1417
<Card
1518
title="Data Security Overview"
1619
subtitle="Incidents from the last 30 days."
17-
icon={<SystemActivity color="primary" />}
20+
icon={
21+
<HvIconContainer color="primary">
22+
<div className="i-ph-presentation-chart" />
23+
</HvIconContainer>
24+
}
1825
>
1926
<div className="flex gap-xs justify-between">
2027
{securityData.map(({ title, count, color }) => (

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { HvTypography } from "@hitachivantara/uikit-react-core";
2-
import { BottomXS, TopXS } from "@hitachivantara/uikit-react-icons";
32

43
import { Card } from "./Card";
54

@@ -22,10 +21,10 @@ const Item = ({ title, value, percentage, isPositive }: ItemProps) => {
2221

2322
return (
2423
<div>
25-
<div className="flex items-center">
24+
<div className="flex items-center gap-4px">
2625
<HvTypography variant="caption1">{title}</HvTypography>
27-
{isPositive && <TopXS color="positive" />}
28-
{!isPositive && <BottomXS color="negative" />}
26+
{isPositive && <div className="i-ph-arrow-up text-positive" />}
27+
{!isPositive && <div className="i-ph-arrow-down text-negative" />}
2928
<HvTypography className={percentageColor}>{percentage}%</HvTypography>
3029
</div>
3130
<HvTypography variant="title2">{value}</HvTypography>

‎apps/docs/src/components/home/cards/StorageOverview.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 { HvBarChart } from "@hitachivantara/uikit-react-viz";
24

35
import { Card } from "./Card";

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import {
33
HvButton,
44
HvTypography,
55
} from "@hitachivantara/uikit-react-core";
6-
import { Open } from "@hitachivantara/uikit-react-icons";
76

87
import { Card } from "./Card";
98

@@ -50,7 +49,7 @@ export const TeamOverview = () => (
5049
variant="primaryGhost"
5150
aria-label={`View profile of ${name}`}
5251
>
53-
<Open />
52+
<div className="i-ph-arrow-square-out" />
5453
</HvButton>
5554
</div>
5655
))}

‎apps/docs/src/components/icons.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
"use client";
2+
3+
import { HvPanel } from "@hitachivantara/uikit-react-core";
4+
import { Alert, icons } from "@hitachivantara/uikit-react-icons";
5+
6+
import { Playground } from "./code/Playground";
7+
8+
export function IconLibrary() {
9+
return (
10+
<HvPanel className="flex flex-wrap gap-xs justify-around px-xs">
11+
{Object.entries(icons).map(([name, Icon]) => (
12+
<div
13+
key={name}
14+
className="flex flex-col items-center justify-center w-112px"
15+
>
16+
<Icon size="S" />
17+
<code className="text-sm h-2em text-center break-all">{name}</code>
18+
</div>
19+
))}
20+
</HvPanel>
21+
);
22+
}
23+
24+
export function IconPlayground() {
25+
return (
26+
<Playground
27+
Component={Alert}
28+
componentName="Alert"
29+
controls={{
30+
color: { type: "color", defaultValue: "warning" },
31+
size: {
32+
type: "slider",
33+
defaultValue: "md",
34+
values: ["xs", "sm", "md", "lg", "xl"],
35+
},
36+
}}
37+
/>
38+
);
39+
}

0 commit comments

Comments
 (0)