chore: misc fixes & fix decorators

Author: zettca

apps/docs/src/components/Header.tsx

@@ -1,3 +1,5 @@
+import { Suspense } from "react";
+
 import { ComponentDataParams, getComponentData } from "../utils/component";
 import { PlaygroundProps } from "./code/Playground";
 import { Description } from "./usage/Description";
@@ -17,7 +19,9 @@ export async function Header({ params, ...playgroundProps }: HeaderProps) {
   return (
     <div>
       <Description meta={meta} />
-      <Tabs meta={meta} playgroundProps={{ ...playgroundProps, meta }} />
+      <Suspense fallback={null}>
+        <Tabs meta={meta} playgroundProps={{ ...playgroundProps, meta }} />
+      </Suspense>
     </div>
   );
 }

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

@@ -15,7 +15,7 @@ export interface PlaygroundProps {
   meta?: ComponentMeta;
   controls: Record<string, Control>;
   children?: React.ReactNode;
-  decorator?: (children: React.ReactNode) => React.ReactNode;
+  decoratorClassName?: string;
 }
 
 const parseChildren = (child: React.ReactNode) =>
@@ -66,7 +66,7 @@ export const Playground = ({
   componentProps,
   controls = {},
   children,
-  decorator,
+  decoratorClassName,
 }: PlaygroundProps) => {
   // Initialize dynamic props with default values from controls
   const [dynamicProps, setDynamicProps] = useState<Record<string, unknown>>(
@@ -109,7 +109,11 @@ export const Playground = ({
       <div className="grid grid-cols-[2fr_1fr] border rounded-t-round">
         {/* Preview Area */}
         <DocsProvider className="grid place-items-center p-sm h-full">
-          {decorator ? decorator(componentElement) : componentElement}
+          {decoratorClassName ? (
+            <div className={decoratorClassName}>{componentElement}</div>
+          ) : (
+            componentElement
+          )}
         </DocsProvider>
 
         {/* Controls Area */}

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

@@ -1,5 +1,4 @@
 import { useMemo } from "react";
-import { ArrowRight } from "@phosphor-icons/react/ArrowRight";
 import { clsx } from "clsx";
 import Link from "next/link";
 import { HvButton } from "@hitachivantara/uikit-react-core";
@@ -81,7 +80,7 @@ export const HeroSection = () => (
       variant="subtle"
       size="lg"
       className="mt-md max-sm:w-full hidden sm:inline-flex"
-      endIcon={<ArrowRight />}
+      endIcon={<div className="i-ph-arrow-right" />}
     >
       Explore components
     </HvButton>

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

@@ -1,5 +1,3 @@
-"use client";
-
 import { CardsSection } from "./CardsSection";
 import { HeroSection } from "./HeroSection";
 

apps/docs/src/components/home/cards/ApiUsage.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { HvLineChart } from "@hitachivantara/uikit-react-viz";
 
 import { Card } from "./Card";

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

@@ -1,5 +1,8 @@
-import { HvTag, HvTypography } from "@hitachivantara/uikit-react-core";
-import { SystemActivity } from "@hitachivantara/uikit-react-icons";
+import {
+  HvIconContainer,
+  HvTag,
+  HvTypography,
+} from "@hitachivantara/uikit-react-core";
 
 import { Card } from "./Card";
 
@@ -14,7 +17,11 @@ export const DataSecurity = () => {
     <Card
       title="Data Security Overview"
       subtitle="Incidents from the last 30 days."
-      icon={<SystemActivity color="primary" />}
+      icon={
+        <HvIconContainer color="primary">
+          <div className="i-ph-presentation-chart" />
+        </HvIconContainer>
+      }
     >
       <div className="flex gap-xs justify-between">
         {securityData.map(({ title, count, color }) => (

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

@@ -1,5 +1,4 @@
 import { HvTypography } from "@hitachivantara/uikit-react-core";
-import { BottomXS, TopXS } from "@hitachivantara/uikit-react-icons";
 
 import { Card } from "./Card";
 
@@ -22,10 +21,10 @@ const Item = ({ title, value, percentage, isPositive }: ItemProps) => {
 
   return (
     <div>
-      <div className="flex items-center">
+      <div className="flex items-center gap-4px">
         <HvTypography variant="caption1">{title}</HvTypography>
-        {isPositive && <TopXS color="positive" />}
-        {!isPositive && <BottomXS color="negative" />}
+        {isPositive && <div className="i-ph-arrow-up text-positive" />}
+        {!isPositive && <div className="i-ph-arrow-down text-negative" />}
         <HvTypography className={percentageColor}>{percentage}%</HvTypography>
       </div>
       <HvTypography variant="title2">{value}</HvTypography>

apps/docs/src/components/home/cards/StorageOverview.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { HvBarChart } from "@hitachivantara/uikit-react-viz";
 
 import { Card } from "./Card";

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

@@ -3,7 +3,6 @@ import {
   HvButton,
   HvTypography,
 } from "@hitachivantara/uikit-react-core";
-import { Open } from "@hitachivantara/uikit-react-icons";
 
 import { Card } from "./Card";
 
@@ -50,7 +49,7 @@ export const TeamOverview = () => (
             variant="primaryGhost"
             aria-label={`View profile of ${name}`}
           >
-            <Open />
+            <div className="i-ph-arrow-square-out" />
           </HvButton>
         </div>
       ))}

apps/docs/src/components/icons.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { HvPanel } from "@hitachivantara/uikit-react-core";
+import { Alert, icons } from "@hitachivantara/uikit-react-icons";
+
+import { Playground } from "./code/Playground";
+
+export function IconLibrary() {
+  return (
+    <HvPanel className="flex flex-wrap gap-xs justify-around px-xs">
+      {Object.entries(icons).map(([name, Icon]) => (
+        <div
+          key={name}
+          className="flex flex-col items-center justify-center w-112px"
+        >
+          <Icon size="S" />
+          <code className="text-sm h-2em text-center break-all">{name}</code>
+        </div>
+      ))}
+    </HvPanel>
+  );
+}
+
+export function IconPlayground() {
+  return (
+    <Playground
+      Component={Alert}
+      componentName="Alert"
+      controls={{
+        color: { type: "color", defaultValue: "warning" },
+        size: {
+          type: "slider",
+          defaultValue: "md",
+          values: ["xs", "sm", "md", "lg", "xl"],
+        },
+      }}
+    />
+  );
+}

apps/docs/src/content/components/blade.mdx

@@ -27,7 +27,7 @@ import { Header } from "../../components/Header";
       },
     },
   }}
-  decorator={(component) => <div className="flex w-full">{component}</div>}
+  decoratorClassName="flex w-full"
 >
   <div className="p-xs">The answer to all things is 42.</div>
 </Header>

apps/docs/src/content/components/blades.mdx

@@ -15,7 +15,7 @@ import { Header } from "../../components/Header";
     atLeastOneExpanded: { defaultValue: false },
     fullWidthBlades: { defaultValue: true },
   }}
-  decorator={(component) => <div className="w-full">{component}</div>}
+  decoratorClassName="w-full"
 >
   <HvBlade label="1">
     <div className="flex items-center p-xs">Content 1</div>

apps/docs/src/content/components/carousel.mdx

@@ -18,7 +18,7 @@ import { Header } from "../../components/Header";
     showFullscreen: { defaultValue: true },
     controlsPosition: { defaultValue: "top" },
   }}
-  decorator={(children) => <div className="overflow">{children}</div>}
+  decoratorClassName="overflow"
 >
   {[...Array(7).keys()].map((i) => (
     <HvCarouselSlide

apps/docs/src/content/components/global-actions.mdx

@@ -26,7 +26,7 @@ import { Header } from "../../components/Header";
       </HvIconButton>
     ),
   }}
-  decorator={(component) => <div className="w-full">{component}</div>}
+  decoratorClassName="w-full"
 >
   <HvButton variant="primary">Save</HvButton>
   <HvButton variant="secondarySubtle">Reset</HvButton>

apps/docs/src/content/components/icon-container.mdx

@@ -1,4 +1,3 @@
-import { User } from "@phosphor-icons/react/User";
 import {
   iconContainerClasses as classes,
   HvIconContainer,
@@ -20,5 +19,5 @@ import { Header } from "../../components/Header";
     rotate: { defaultValue: false },
   }}
 >
-  <User />
+  <div className="i-ph-user" />
 </Header>

apps/docs/src/content/components/number-input.mdx

@@ -18,11 +18,9 @@ import { Header } from "../../components/Header";
     readOnly: { defaultValue: false },
     disabled: { defaultValue: false },
   }}
-  decorator={(c) => <div className="w-full">{c}</div>}
+  decoratorClassName="w-full"
 />
 
-<br />
-
 <Callout type="info">
   The `HvNumberInput` component shares the same API as `HvInput`. For full
   documentation, see the [HvInput component page](/components/input).

apps/docs/src/content/components/overflow-tooltip.mdx

@@ -24,5 +24,5 @@ import { Header } from "../../components/Header";
         "This is a very long text that should be cut because it so long that it doesn't fit",
     },
   }}
-  decorator={(children) => <div className="max-w-160px">{children}</div>}
+  decoratorClassName="max-w-160px"
 />

apps/docs/src/content/components/query-builder.mdx

@@ -30,7 +30,7 @@ import { Header } from "../../components/Header";
       },
     },
   }}
-  decorator={(component) => <div className="w-full">{component}</div>}
+  decoratorClassName="w-full"
 />
 
 ### How to use

apps/docs/src/content/components/search-input.mdx

@@ -6,12 +6,6 @@ import {
 
 import { Header } from "../../components/Header";
 
-<Callout type="info">
-  The `HvSearchInput` component shares the same API as the `HvInput` component.
-  Please check the [HvInput component page](/components/input) for
-  documentation.
-</Callout>
-
 <Header
   params={{ name: "SearchInput", classes }}
   Component={HvSearchInput}
@@ -24,5 +18,11 @@ import { Header } from "../../components/Header";
     readOnly: { defaultValue: false },
     disabled: { defaultValue: false },
   }}
-  decorator={(c) => <div className="w-full">{c}</div>}
+  decoratorClassName="w-full"
 />
+
+<Callout type="info">
+  The `HvSearchInput` component shares the same API as the `HvInput` component.
+  Please check the [HvInput component page](/components/input) for
+  documentation.
+</Callout>

apps/docs/src/content/components/skeleton.mdx

@@ -20,7 +20,7 @@ import { Header } from "../../components/Header";
       defaultValue: false,
     },
   }}
-  decorator={(children) => <div className="w-190px">{children}</div>}
+  decoratorClassName="w-190px"
   children={<div>My skeleton example content</div>}
 />
 

apps/docs/src/content/components/step-navigation.mdx

@@ -16,27 +16,9 @@ import { Header } from "../../components/Header";
   }}
   componentProps={{
     steps: [
-      {
-        title: "Completed",
-        state: "Completed",
-        onClick: () => {
-          alert("You clicked on 'Completed' step");
-        },
-      },
-      {
-        title: "Failed",
-        state: "Failed",
-        onClick: () => {
-          alert("You clicked on 'Failed' step");
-        },
-      },
-      {
-        title: "Pending",
-        state: "Pending",
-        onClick: () => {
-          alert("You clicked on 'Pending' step");
-        },
-      },
+      { title: "Completed", state: "Completed" },
+      { title: "Failed", state: "Failed" },
+      { title: "Pending", state: "Pending" },
     ],
   }}
 />
@@ -51,53 +33,29 @@ You can use the `width` prop to pass an array of custom breakpoints for the step
     {
       title: "Completed",
       state: "Completed",
-      onClick: () => {
-        alert("You clicked on 'Completed' step");
-      },
     },
     {
       title: "Failed",
       state: "Failed",
-      onClick: () => {
-        alert("You clicked on 'Failed' step");
-      },
     },
     {
       title: "Pending",
       state: "Pending",
-      onClick: () => {
-        alert("You clicked on 'Pending' step");
-      },
     },
     {
       title: "Current",
       state: "Current",
-      onClick: () => {
-        alert("You clicked on 'Current' step");
-      },
     },
     {
       title: "Enabled",
       state: "Enabled",
-      onClick: () => {
-        alert("You clicked on 'Enabled' step");
-      },
     },
     {
       title: "Disabled",
       state: "Disabled",
-      onClick: () => {
-        alert("You clicked on 'Disabled' step");
-      },
     },
   ]}
-  width={{
-    xs: 200,
-    sm: 400,
-    md: 600,
-    lg: 800,
-    xl: 1000,
-  }}
+  width={{ xs: 200, sm: 400, md: 600, lg: 800, xl: 1000 }}
 />
 ```
 

apps/docs/src/content/components/tree-view.mdx

@@ -16,7 +16,7 @@ import { Header } from "../../components/Header";
     multiSelect: { defaultValue: false },
     disableSelection: { defaultValue: false },
   }}
-  decorator={(children) => <HvPanel className="w-300px">{children}</HvPanel>}
+  decoratorClassName="w-300px"
 >
   <HvTreeItem nodeId="1" label="Applications">
     <HvTreeItem nodeId="10" label="Calendar.app" />