docs: add theme editor

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

@@ -1,3 +1,5 @@
+"use client";
+
 import { useId } from "react";
 import { useTheme } from "nextra-theme-docs";
 import {

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

@@ -17,15 +17,18 @@ type CardProps = {
 
 export const Card = ({ children, title, subtitle, media, icon }: CardProps) => {
   return (
-    <HvCard className="dark:!outline-border" bgcolor="bgContainer">
+    <HvCard
+      className="dark:!outline-border outline-border"
+      bgcolor="bgContainer"
+    >
       <HvCardHeader
         title={<HvTypography variant="title3">{title}</HvTypography>}
         subheader={<HvTypography variant="caption1">{subtitle}</HvTypography>}
         icon={icon}
         className="mx-xs mt-xs"
       />
       {media && <HvCardMedia className="my-xs">{media}</HvCardMedia>}
-      <HvCardContent className="!px-md">{children}</HvCardContent>
+      <HvCardContent>{children}</HvCardContent>
     </HvCard>
   );
 };

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

@@ -18,7 +18,12 @@ export const DataConfig = () => {
   return (
     <Card title="Data Management Configuration">
       <div className="grid gap-sm">
-        <HvBannerContent showIcon variant="info" action={null}>
+        <HvBannerContent
+          showIcon
+          variant="info"
+          action={null}
+          className="min-w-unset w-full"
+        >
           Backup impacts storage.
         </HvBannerContent>
         <HvInput
@@ -37,7 +42,11 @@ export const DataConfig = () => {
           placeholder="Select backup frequency"
           aria-label="backup-frequency"
         />
-        <HvCheckBox label="Enable Automatic Data Cleanup" />
+        <HvCheckBox
+          label="Enable Automatic Data Cleanup"
+          labelProps={{ className: "text-wrap" }}
+          className="overflow-auto"
+        />
         <div className="flex justify-end gap-xs">
           <HvButton variant="primary" aria-label="save-config-button">
             Save

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

@@ -1,5 +1,7 @@
 import {
   HvIconContainer,
+  HvStatusIcon,
+  HvStatusIconVariant,
   HvTag,
   HvTypography,
 } from "@hitachivantara/uikit-react-core";
@@ -12,6 +14,12 @@ const securityData = [
   { title: "Informational", count: 20, color: "info" },
 ];
 
+const iconMap: Record<string, HvStatusIconVariant> = {
+  negative: "error",
+  warning: "warning",
+  info: "info",
+};
+
 export const DataSecurity = () => {
   return (
     <Card
@@ -29,7 +37,12 @@ export const DataSecurity = () => {
             <HvTypography variant="captionLabel" className="mb-xs">
               {title}
             </HvTypography>
-            <HvTag label={count.toString()} color={color} className="w-48px" />
+            <HvTag
+              icon={<HvStatusIcon type="simple" variant={iconMap[color]} />}
+              label={count.toString()}
+              color={color}
+              // className="w-48px"
+            />
           </div>
         ))}
       </div>

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

@@ -0,0 +1,55 @@
+import {
+  HvButton,
+  HvColorAny,
+  HvTypography,
+} from "@hitachivantara/uikit-react-core";
+
+import { Card } from "./Card";
+
+const orders = [
+  { label: "John Doe", status: "Delivered" },
+  { label: "Jane Smith", status: "Shipped" },
+  { label: "Alice Johnson", status: "Pending" },
+  { label: "Bob Brown", status: "Cancelled" },
+  { label: "Charlie Davis", status: "Waiting Feedback" },
+];
+
+const statusMap: Record<string, HvColorAny> = {
+  Delivered: "positive",
+  Pending: "warning",
+  Shipped: "info",
+  Cancelled: "negative",
+  "Waiting Feedback": "accent",
+};
+
+export const Orders = () => {
+  return (
+    <Card
+      title={
+        <div className="flex items-center gap-[var(--uikit-space-xs)]">
+          <div className="i-ph-receipt" />
+          <HvTypography variant="title4">Orders</HvTypography>
+        </div>
+      }
+    >
+      <div className="grid gap-[var(--uikit-space-xxs)]">
+        {orders.map((order) => (
+          <div
+            key={order.status}
+            className="flex items-center justify-between p-[var(--uikit-space-xs)] border-b border-border"
+          >
+            <HvTypography>{order.label}</HvTypography>
+            <HvButton
+              className="p-x-xs"
+              color={statusMap[order.status]}
+              variant="primary"
+              size="sm"
+            >
+              {order.status}
+            </HvButton>
+          </div>
+        ))}
+      </div>
+    </Card>
+  );
+};

apps/docs/src/content/_meta.ts

@@ -38,4 +38,15 @@ export default {
       timestamp: false,
     },
   },
+  editor: {
+    type: "page",
+    title: "Theme Editor",
+    theme: {
+      layout: "full",
+      toc: false,
+      breadcrumb: false,
+      sidebar: false,
+      timestamp: false,
+    },
+  },
 } satisfies MetaRecord;

apps/docs/src/content/editor/ColorMode.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import {
+  HvButton,
+  HvMultiButton,
+  HvTypography,
+} from "@hitachivantara/uikit-react-core";
+
+import { useEditorContext } from "./EditorContext";
+
+export const ColorMode = () => {
+  const { setColorMode, colorMode } = useEditorContext();
+  const [selectedMode, setSelectedMode] = useState(colorMode);
+
+  const handleToggle = useCallback(() => {
+    setSelectedMode((prev) => (prev === "dawn" ? "wicked" : "dawn"));
+    setColorMode(colorMode === "dawn" ? "wicked" : "dawn");
+  }, [colorMode, setColorMode]);
+
+  return (
+    <div className="flex flex-col gap-xs">
+      <div className="flex items-center gap-xs">
+        <div className="i-ph-paint-bucket" />
+        <HvTypography variant="title4">Color mode</HvTypography>
+        <div className="border-1 border-borderSubtle h-1px flex-1" />
+      </div>
+      <HvMultiButton className="w-fit">
+        <HvButton
+          selected={selectedMode === "dawn"}
+          icon
+          aria-label="Light mode"
+          onClick={handleToggle}
+        >
+          <div className="i-ph-sun" />
+        </HvButton>
+        <HvButton
+          selected={selectedMode === "wicked"}
+          icon
+          aria-label="Dark mode"
+          onClick={handleToggle}
+        >
+          <div className="i-ph-moon" />
+        </HvButton>
+      </HvMultiButton>
+    </div>
+  );
+};

apps/docs/src/content/editor/Colors.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import {
+  HvColorPicker,
+  HvIconButton,
+  HvTypography,
+} from "@hitachivantara/uikit-react-core";
+
+import { ColorsConfig } from "./Dialogs/ColorsConfig";
+import { useEditorContext } from "./EditorContext";
+
+const colorsToDisplay = [
+  "bgPage",
+  "bgContainer",
+  "positive",
+  "negative",
+  "warning",
+  "info",
+  "accent",
+  "primary",
+  "secondary",
+  "text",
+  "border",
+];
+
+export const Colors = () => {
+  const [configOpen, setConfigOpen] = useState(false);
+  const { customTheme, updateCustomTheme, colorMode } = useEditorContext();
+
+  const updateTheme = useCallback(
+    (changes: Record<string, any>) => {
+      updateCustomTheme(changes);
+    },
+    [updateCustomTheme],
+  );
+
+  return (
+    <>
+      {configOpen && <ColorsConfig open={configOpen} setOpen={setConfigOpen} />}
+      <div className="flex flex-col gap-xs">
+        <div className="flex items-center gap-xs">
+          <div className="i-ph-paint-bucket" />
+          <HvTypography variant="title4">Colors</HvTypography>
+          <div className="border-1 border-borderSubtle h-1px flex-1" />
+          <HvIconButton
+            aria-label="Settings"
+            title="Customize colors"
+            onClick={() => setConfigOpen(true)}
+          >
+            <div className="i-ph-gear" />
+          </HvIconButton>
+        </div>
+        <div className="grid grid-cols-4 gap-sm">
+          {colorsToDisplay.map((color) => (
+            <div key={color} className="flex flex-col gap-xxs items-center">
+              <HvColorPicker
+                iconOnly
+                value={customTheme.colors.modes[colorMode][color]}
+                onChangeComplete={(c) => {
+                  return updateTheme({
+                    colors: { modes: { [colorMode]: { [color]: c } } },
+                  });
+                }}
+              />
+              <HvTypography variant="caption2">{color}</HvTypography>
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+};