Merge branch 'master' into feat/colors-tokens

Author: zettca

.github/actions/install-dependencies/action.yml

@@ -20,3 +20,5 @@ runs:
       # ensure dev dependencies are installed
       run: npm ci --include=dev
       shell: bash
+      env:
+        HUSKY: 0

.github/assets/uikit-logo-dark.svg

@@ -1,42 +1,7 @@
-import fs from "node:fs";
 import { getStoryContext, type TestRunnerConfig } from "@storybook/test-runner";
-import { NodeResult, Result } from "axe-core";
-import { configureAxe, getAxeResults, injectAxe } from "axe-playwright";
+import { checkA11y, configureAxe, injectAxe } from "axe-playwright";
 
-const excludeStories = [
-  "Visualizations/Bar Chart",
-  "Visualizations/Line Chart",
-  "Visualizations/Donut Chart",
-  "Visualizations/Confusion Matrix",
-  "Visualizations/Scatter Plot",
-  "Visualizations/Treemap",
-  "Visualizations/Heatmap",
-  "Components/Code Editor",
-  "Tests/Visualizations",
-];
-
-function getNodesIds(nodes: NodeResult[]) {
-  return nodes.map((n) => `\n\t\t${n.target}`).join();
-}
-
-function getResultSummary(type: string, results: Result[]) {
-  return results
-    .map((r) => `\n\t${type}: ${r.help} - ${r.impact} ${getNodesIds(r.nodes)}`)
-    .join("");
-}
-
-function writeAxeResults(
-  storyTitle: string,
-  storyName: string,
-  type: string,
-  results: Result[],
-) {
-  if (results.length > 0) {
-    const fileName = `a11y_${type}_Results.txt`;
-    fs.appendFileSync(fileName, `\n${storyTitle} - ${storyName}`, "utf-8");
-    fs.appendFileSync(fileName, getResultSummary(type, results), "utf8");
-  }
-}
+const excludeStories = ["Templates", "Visualizations"];
 
 /*
  * See https://storybook.js.org/docs/writing-tests/test-runner#test-hook-api
@@ -48,36 +13,23 @@ const config: TestRunnerConfig = {
   },
 
   async postVisit(page, context) {
-    const storyContext = await getStoryContext(page, context);
-    const validStories = excludeStories.filter((s) =>
-      storyContext.title.includes(s),
-    );
-    if (validStories.length !== 0) return;
+    if (excludeStories.some((s) => context.title.includes(s))) return;
 
-    const specificA11yRules = [{ id: "color-contrast", enabled: false }];
+    const storyContext = await getStoryContext(page, context);
+    if (storyContext.parameters?.a11y?.disable) return;
 
     // Apply story-level a11y rules
     await configureAxe(page, {
       rules: [
-        ...specificA11yRules,
+        { id: "color-contrast", enabled: false },
         ...(storyContext.parameters?.a11y?.config?.rules || []),
       ],
     });
 
-    const axeResults = await getAxeResults(page, "#storybook-root");
-
-    writeAxeResults(
-      storyContext.title,
-      storyContext.name,
-      "Violation",
-      axeResults.violations,
-    );
-    writeAxeResults(
-      storyContext.title,
-      storyContext.name,
-      "Incomplete",
-      axeResults.incomplete,
-    );
+    await checkA11y(page, "#storybook-root", {
+      verbose: false,
+      detailedReport: true,
+    });
   },
 };
 

.github/assets/uikit-logo-light.svg

@@ -1,15 +1,16 @@
-<p align="center">
- <a href="https://lumada-design.github.io/">
-    <img src="https://user-images.githubusercontent.com/14975353/229386613-8f17d06d-9530-4e77-a173-dcb7587a85ea.png" alt="UI Kit logo" width="250" />
-  </a>
-</p>
+<div align="center">
 
-<h4 align="center">React UI library for the Next Design System.
-</h4>
+<picture>
+  <source srcset=".github/assets/uikit-logo-dark.svg" media="(prefers-color-scheme: dark)">
+  <img src=".github/assets/uikit-logo-light.svg" width="160" alt="UI Kit Logo">
+</picture>
 
+<br/>
 <br/>
 
-<div align="center">
+Open-source **React UI library** to build high-quality digital products.
+
+<br/>
 
 ![License](https://img.shields.io/badge/license-Apache%202-blue.svg)
 ![React](https://img.shields.io/badge/react-17+-blue.svg)
@@ -18,16 +19,19 @@
 
 </div>
 
-<br/>
+## Why UI Kit
+
+- **Enhanced Productivity**  
+  Quickly iterate with reusable, pre-built components tailored for production.
 
-**NEXT UI Kit** is Hitachi Vantara open source React component library that gives you the foundation to build your application faster and consistently.
+- **Flexible Customization**  
+  Leverage an extensive theming system for fine-grained control over layout and appearance.
 
-## Why use the UI Kit?
+- **Seamless Multi-Theming**  
+  Easily manage multiple themes across your application with minimal setup.
 
-- **Ready to go**: Start your project with over 50 high-quality React components out of the box.
-- **Composable**: Compose your application UI with reusable building blocks.
-- **Accessible**: UI Kit follows WAI-ARIA standards for all components.
-- **Themeable**: Use Next Design System or customize it to match your design needs.
+- **Accessibility-Centric**  
+  Built to meet accessibility standards and ensure inclusivity for all users.
 
 Check the [project status](https://lumada-design.github.io/uikit-docs/master/docs/project-status) so you can stay up-to-date on the project development, available packages, components status and supported versions.
 

.storybook/test-runner.ts

@@ -10,6 +10,12 @@ const withNextra = nextra({
   },
   mdxOptions: {
     rehypePlugins: [rehypeMdxCodeProps],
+    rehypePrettyCodeOptions: {
+      theme: {
+        light: "one-dark-pro",
+        dark: "one-dark-pro",
+      },
+    },
   },
 });
 

README.md

@@ -5,6 +5,7 @@ import {
   HvTypography,
 } from "@hitachivantara/uikit-react-core";
 
+import canvas from "../pages/examples/canvas.mdx?raw";
 import charts from "../pages/examples/charts.mdx?raw";
 import dnd from "../pages/examples/dnd.mdx?raw";
 import inputs from "../pages/examples/inputs.mdx?raw";
@@ -16,22 +17,35 @@ import tables from "../pages/examples/tables.mdx?raw";
  */
 const countCodeBlocks = (fileContent: string): number => {
   const codeBlockRegex = /<CodeBlock/g;
-  const matches = fileContent.match(codeBlockRegex);
+  const matches = fileContent?.match?.(codeBlockRegex);
   return matches ? matches.length : 0;
 };
 
-const getSectionIcon = (title: string) => {
+const sections = [
+  { slug: "tables", title: "Tables", total: countCodeBlocks(tables) },
+  { slug: "charts", title: "Charts", total: countCodeBlocks(charts) },
+  { slug: "inputs", title: "Inputs", total: countCodeBlocks(inputs) },
+  { slug: "kpis", title: "KPIs", total: countCodeBlocks(kpis) },
+  { slug: "dnd", title: "Drag and Drop", total: countCodeBlocks(dnd) },
+  { slug: "canvas", title: "Canvas", total: countCodeBlocks(canvas) },
+] as const;
+
+type Slug = (typeof sections)[number]["slug"];
+
+const getSectionIcon = (title: Slug) => {
   switch (title) {
-    case "Tables":
+    case "tables":
       return <div className="i-ph-table" />;
-    case "Charts":
+    case "charts":
       return <div className="i-ph-chart-bar" />;
-    case "Inputs":
+    case "inputs":
       return <div className="i-ph-text-a-underline" />;
-    case "KPIs":
+    case "kpis":
       return <div className="i-ph-speedometer" />;
-    case "Drag and Drop":
+    case "dnd":
       return <div className="i-ph-hand-swipe-right" />;
+    case "canvas":
+      return <div className="i-ph-flow-arrow" />;
     default:
       return null;
   }
@@ -42,35 +56,6 @@ const getSectionIcon = (title: string) => {
  * with details about the number of components in each category.
  */
 export const Examples = () => {
-  // Define section categories with their respective titles and component counts
-  const sections = [
-    {
-      title: "Tables",
-      total: countCodeBlocks(tables),
-      path: "/examples/tables",
-    },
-    {
-      title: "Charts",
-      total: countCodeBlocks(charts),
-      path: "/examples/charts",
-    },
-    {
-      title: "Inputs",
-      total: countCodeBlocks(inputs),
-      path: "/examples/inputs",
-    },
-    {
-      title: "KPIs",
-      total: countCodeBlocks(kpis),
-      path: "/examples/kpis",
-    },
-    {
-      title: "Drag and Drop",
-      total: countCodeBlocks(dnd),
-      path: "/examples/dnd",
-    },
-  ];
-
   return (
     <div className="max-w-6xl mx-auto px-sm md:px-md py-lg md:py-xl">
       {/* Page Header */}
@@ -104,9 +89,9 @@ export const Examples = () => {
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-lg">
         {sections.map((section) => (
           <Link
-            key={section.title}
-            href={section.path}
-            className={clsx("hover:bg-bgContainer rounded-round p-xs")}
+            key={section.slug}
+            href={`/examples/${section.slug}`}
+            className="hover:bg-bgContainer rounded-round p-xs"
           >
             {/* Placeholder for section preview */}
             <div
@@ -116,7 +101,7 @@ export const Examples = () => {
               )}
             >
               <HvIconContainer color="textSubtle" size="xl">
-                {getSectionIcon(section.title)}
+                {getSectionIcon(section.slug)}
               </HvIconContainer>
             </div>
             {/* Section Title */}

apps/docs/next.config.mjs

@@ -60,7 +60,7 @@ export const Footer = () => {
             >
               <UIKitLogo />
             </Link>
-            <p className="text-sm mt-sm">by Hitachi Vantara © {year}</p>
+            <p className="text-sm mt-sm">by Pentaho © {year}</p>
           </div>
 
           {/* Link Groups Right-Aligned */}

apps/docs/src/components/Examples.tsx

@@ -1,4 +1,3 @@
-import { useEffect } from "react";
 import { useRouter } from "next/router";
 import { HvContainer, HvTab, HvTabs } from "@hitachivantara/uikit-react-core";
 
@@ -17,13 +16,6 @@ export const Header = () => {
 
   const tab = (query.tab as TabId) || "usage";
 
-  useEffect(() => {
-    const tocElement = document.querySelector<HTMLElement>("nav.nextra-toc");
-    if (tocElement) {
-      tocElement.style.display = tab === "usage" ? "block" : "none";
-    }
-  }, [tab]);
-
   return (
     <div
       // Hide sibling elements except for the last child when tab !== 0.

apps/docs/src/components/Footer.tsx

@@ -1,6 +1,6 @@
 import createCache from "@emotion/cache";
 import { useTheme } from "nextra-theme-docs";
-import { ds5, HvProvider, pentahoPlus } from "@hitachivantara/uikit-react-core";
+import { HvProvider, pentahoPlus } from "@hitachivantara/uikit-react-core";
 import { HvVizProvider } from "@hitachivantara/uikit-react-viz";
 
 const emotionCache = createCache({
@@ -14,7 +14,7 @@ export const Main = ({ children }: { children: React.ReactNode }) => {
 
   return (
     <HvProvider
-      themes={[pentahoPlus, ds5]}
+      themes={[pentahoPlus]}
       theme="pentahoPlus"
       colorMode={resolvedTheme === "dark" ? "wicked" : "dawn"}
       emotionCache={emotionCache}