chore: misc fixes & refactors

- remove build & prettier leftovers
- prettier v3 uses .gitignore
- we dont use Emotion transform
- fix icon sample keys
- etc

.prettierignore

@@ -1,4 +1 @@
-dist
-bin
-coverage
 *.hbs

.storybook/decorators/withThemeProvider.tsx → .storybook/decorators/ThemeDecorator.tsx

@@ -25,10 +25,8 @@ const useDarkClass = <T extends HTMLElement = HTMLDivElement>(mode: string) => {
   return ref;
 };
 
-const ThemeDecorator: Decorator = (Story) => {
-  const initialTheme = getLocalTheme();
-
-  const [selectedTheme, setSelectedTheme] = useState(initialTheme);
+export const ThemeDecorator: Decorator = (Story) => {
+  const [selectedTheme, setSelectedTheme] = useState(getLocalTheme);
 
   const [theme, mode] = selectedTheme?.split("-") || ["ds5", "dawn"];
   const base = theme === "ds3" ? ds3 : ds5;
@@ -68,5 +66,3 @@ const ThemeDecorator: Decorator = (Story) => {
     </>
   );
 };
-
-export default ThemeDecorator;

.storybook/preview.ts

@@ -2,7 +2,7 @@ import { Preview } from "@storybook/react";
 
 import DocsContainer from "./blocks/DocsContainer";
 import { DocsPage } from "./blocks/DocsPage";
-import ThemeDecorator from "./decorators/withThemeProvider";
+import { ThemeDecorator } from "./decorators/ThemeDecorator";
 
 import "uno.css";
 

.storybook/vite.config.ts

@@ -1,38 +1,9 @@
-import { resolve } from "path";
 import react from "@vitejs/plugin-react";
 import unoCSS from "unocss/vite";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 import { presetHv } from "@hitachivantara/uikit-uno-preset";
 
-import tsconfig from "../tsconfig.json";
-
-const aliases = Object.entries(tsconfig.compilerOptions.paths)
-  .filter(([key]) => key.startsWith("@hitachivantara"))
-  .reduce((acc, [key, value]) => {
-    acc[key] = resolve(__dirname, "..", value[0]);
-    return acc;
-  }, {});
-
 export default defineConfig({
   plugins: [react(), tsconfigPaths(), unoCSS({ presets: [presetHv()] })],
-  resolve: {
-    alias: {
-      ...aliases,
-    },
-  },
-  build: {
-    rollupOptions: {
-      onwarn(warning, warn) {
-        // Suppress "use client" warnings
-        if (
-          warning.code === "MODULE_LEVEL_DIRECTIVE" &&
-          warning.message.includes(`"use client"`)
-        ) {
-          return;
-        }
-        warn(warning);
-      },
-    },
-  },
 });

apps/app/src/generator/Colors/Colors.tsx

@@ -14,11 +14,9 @@ import { styles } from "./Colors.styles";
 import { getColorGroupName, getColors, groupsToShow } from "./utils";
 
 const Colors = (): JSX.Element => {
-  const { activeTheme, selectedMode } = useTheme();
+  const { colors, selectedMode } = useTheme();
   const { customTheme, updateCustomTheme } = useGeneratorContext();
 
-  const colors = activeTheme?.colors.modes[selectedMode];
-
   const colorChangedHandler = (colorName: string, colorValue: string) => {
     updateCustomTheme({
       colors: {

docs/tests/Icons.stories.tsx

@@ -1,5 +1,6 @@
 import { StoryObj } from "@storybook/react";
 import {
+  Abacus,
   HvIconSprite,
   HvIconSpriteProps,
   IconBaseProps,
@@ -16,52 +17,47 @@ export default {
 
 export const IconLibrary: StoryObj<IconBaseProps> = {
   args: {
+    iconSize: "M",
     color: ["secondary", "negative", "positive"],
   },
   render: (args) => (
-    <div style={{ display: "flex", flexWrap: "wrap" }}>
-      {Object.entries(icons).map(([name, Icon], i) => (
-        <>
-          <Icon key={name} iconSize="M" {...args} />
-          {/* Visual test for icon size */}
-          {i === Object.entries(icons).length - 1 && (
-            <>
-              <Icon key={name} iconSize="XS" {...args} />
-              <Icon key={name} iconSize="S" {...args} />
-              <Icon key={name} iconSize="L" {...args} />
-            </>
-          )}
-        </>
-      ))}
-    </div>
+    <>
+      <div className="flex flex-wrap">
+        {Object.entries(icons).map(([name, Icon]) => (
+          <Icon key={name} {...args} />
+        ))}
+      </div>
+      <div className="flex">
+        {/* Visual test for icon size */}
+        <Abacus {...args} iconSize="XS" />
+        <Abacus {...args} iconSize="S" />
+        <Abacus {...args} iconSize="M" />
+        <Abacus {...args} iconSize="L" />
+      </div>
+    </>
   ),
 };
 
 export const IconSpriteLibrary: StoryObj<HvIconSpriteProps> = {
   args: {
+    iconSize: "M",
     spriteUrl: "./assets/icons.svg",
     color: ["secondary", "negative", "positive"],
   },
   render: (args) => (
-    <div style={{ display: "flex", flexWrap: "wrap" }}>
-      {Object.entries(icons).map(([name], i) => (
-        <>
-          <HvIconSprite key={name} iconSize="M" {...args} iconName={name} />
-          {/* Visual test for icon size */}
-          {i === Object.entries(icons).length - 1 && (
-            <>
-              <HvIconSprite
-                key={name}
-                iconSize="XS"
-                {...args}
-                iconName={name}
-              />
-              <HvIconSprite key={name} iconSize="S" {...args} iconName={name} />
-              <HvIconSprite key={name} iconSize="L" {...args} iconName={name} />
-            </>
-          )}
-        </>
-      ))}
-    </div>
+    <>
+      <div className="flex flex-wrap">
+        {Object.keys(icons).map((name) => (
+          <HvIconSprite {...args} key={name} iconName={name} />
+        ))}
+      </div>
+      <div className="flex">
+        {/* Visual test for icon size */}
+        <HvIconSprite {...args} iconName="Abacus" iconSize="XS" />
+        <HvIconSprite {...args} iconName="Abacus" iconSize="S" />
+        <HvIconSprite {...args} iconName="Abacus" iconSize="M" />
+        <HvIconSprite {...args} iconName="Abacus" iconSize="L" />
+      </div>
+    </>
   ),
 };

packages/code-editor/src/CodeEditor/CodeEditor.tsx

@@ -1,10 +1,6 @@
 import { useCallback, useEffect } from "react";
 import { Editor, EditorProps, useMonaco } from "@monaco-editor/react";
-import {
-  ExtractNames,
-  HvTheme,
-  useTheme,
-} from "@hitachivantara/uikit-react-core";
+import { ExtractNames, useTheme } from "@hitachivantara/uikit-react-core";
 
 import { staticClasses, useClasses } from "./CodeEditor.styles";
 
@@ -54,7 +50,7 @@ export const HvCodeEditor = ({
 }: HvCodeEditorProps) => {
   const { classes } = useClasses(classesProp);
 
-  const { activeTheme, selectedMode, selectedTheme, colorModes } = useTheme();
+  const { colors, selectedMode, selectedTheme, colorModes } = useTheme();
 
   const monaco = useMonaco();
 
@@ -64,37 +60,31 @@ export const HvCodeEditor = ({
     ...options,
   };
 
-  const defineActiveThemes = useCallback(
-    (themeName: string, modes: string[], theme?: HvTheme) => {
-      if (monaco) {
-        modes.forEach((mode) => {
-          monaco?.editor.defineTheme(`hv-${themeName}-${mode}`, {
-            base: theme?.colors.modes[mode].type === "light" ? "vs" : "vs-dark",
-            inherit: true,
-            rules: [],
-            colors: {
-              "editor.background": theme?.colors.modes[mode].atmo1 || "",
-              "editorLineNumber.foreground":
-                theme?.colors.modes[mode].secondary_60 || "",
-            },
-          });
-        });
-      }
-    },
-    [monaco],
-  );
+  const defineActiveThemes = useCallback(() => {
+    if (!monaco) return;
+
+    colorModes.forEach((mode) => {
+      monaco?.editor.defineTheme(`hv-${selectedTheme}-${mode}`, {
+        base: colors?.type === "light" ? "vs" : "vs-dark",
+        inherit: true,
+        rules: [],
+        colors: {
+          "editor.background": colors?.atmo1 || "",
+          "editorLineNumber.foreground": colors?.secondary_60 || "",
+        },
+      });
+    });
+  }, [monaco, colorModes, selectedTheme, colors]);
 
   useEffect(() => {
-    defineActiveThemes(selectedTheme, colorModes, activeTheme);
-  }, [selectedTheme, colorModes, activeTheme, defineActiveThemes]);
+    defineActiveThemes();
+  }, [selectedTheme, colorModes, defineActiveThemes]);
 
   return (
     <div className={classes.root}>
       <Editor
         options={mergedOptions}
-        beforeMount={() =>
-          defineActiveThemes(selectedTheme, colorModes, activeTheme)
-        }
+        beforeMount={defineActiveThemes}
         theme={`hv-${selectedTheme}-${selectedMode}`}
         {...editorProps}
         {...others}

packages/core/src/Banner/Banner.stories.tsx

@@ -1,6 +1,5 @@
 import { useState } from "react";
 import { css } from "@emotion/css";
-import styled from "@emotion/styled";
 import { Meta, StoryObj } from "@storybook/react";
 import {
   HvBanner,
@@ -13,16 +12,12 @@ import {
 } from "@hitachivantara/uikit-react-core";
 import { Info } from "@hitachivantara/uikit-react-icons";
 
-const StyledBanner = styled(HvBanner)({
-  position: "relative",
-  top: "0px",
-  marginBottom: 10,
-});
-const meta: Meta<typeof HvBanner> = {
+export default {
   title: "Components/Banner",
   component: HvBanner,
-};
-export default meta;
+  // @ts-expect-error https://github.com/storybookjs/storybook/issues/20782
+  subcomponents: { HvBannerContent },
+} satisfies Meta<typeof HvBanner>;
 
 export const Main: StoryObj<HvBannerProps> = {
   args: {
@@ -40,7 +35,7 @@ export const Main: StoryObj<HvBannerProps> = {
     actionsCallback: { control: { disable: true } },
   },
   render: (args) => {
-    return <StyledBanner {...args} />;
+    return <HvBanner style={{ position: "relative", top: 0 }} {...args} />;
   },
 };
 

packages/core/src/BulkActions/BulkActions.stories.tsx

@@ -89,9 +89,7 @@ export const Main: StoryObj<HvBulkActionsProps> = {
       checked: false,
     });
 
-    const [data, setData] = useState<SampleComponentDatum[]>(
-      Array.from(Array(8), (_, i) => addEntry(i)),
-    );
+    const [data, setData] = useState(() => [...Array(8).keys()].map(addEntry));
 
     const handleSelectAll = (_: any, checked = false) => {
       setData(data.map((el) => ({ ...el, checked })));
@@ -134,9 +132,7 @@ export const WithActions: StoryObj<HvBulkActionsProps> = {
       checked: false,
     });
 
-    const [data, setData] = useState<SampleComponentDatum[]>(
-      Array.from(Array(8), (_, i) => addEntry(i)),
-    );
+    const [data, setData] = useState(() => [...Array(8).keys()].map(addEntry));
 
     const handleSelectAll: HvBulkActionsProps["onSelectAll"] = (_, checked) => {
       setData(data.map((el) => ({ ...el, checked })));
@@ -201,21 +197,17 @@ export const WithPagination: StoryObj<HvBulkActionsProps> = {
     await expect(canvas.getByRole("button", { name: /add/i })).toBeEnabled();
   },
   render: () => {
-    const pageSizeOptions: number[] = [4, 6, 12, 24, 48, 2000];
+    const pageSizeOptions = [4, 6, 12, 24, 48, 2000];
 
     const addEntry = (i: number | string): SampleComponentDatum => ({
       id: i,
       value: `Value ${i}`,
       checked: false,
     });
 
-    const [data, setData] = useState<SampleComponentDatum[]>(
-      Array.from(Array(18), (_, i) => addEntry(i)),
-    );
-
-    const [page, setPage] = useState<number>(0);
-
-    const [pageSize, setPageSize] = useState<number>(pageSizeOptions[1]);
+    const [data, setData] = useState(() => [...Array(18).keys()].map(addEntry));
+    const [page, setPage] = useState(0);
+    const [pageSize, setPageSize] = useState(pageSizeOptions[1]);
 
     const handleSelectAllPages = (checked = true) => {
       setData(data.map((el) => ({ ...el, checked })));

packages/core/src/Card/Media/Media.tsx

@@ -12,8 +12,6 @@ export type HvCardMediaClasses = ExtractNames<typeof useClasses>;
 export interface HvCardMediaProps
   extends Omit<MuiCardMediaProps, "classes">,
     React.ImgHTMLAttributes<HTMLDivElement> {
-  /** Id to be applied to the root node. */
-  id?: string;
   /** The title of the media. */
   title?: string;
   /** The function that will be executed when this section is clicked. */
@@ -27,26 +25,20 @@ export interface HvCardMediaProps
 }
 
 export const HvCardMedia = ({
-  id,
   classes: classesProp,
   className,
   children,
-  title,
-  onClick,
   ...others
 }: HvCardMediaProps) => {
   const { classes } = useClasses(classesProp);
   return (
     <MuiCardMedia
-      id={id}
       classes={{
         root: classes.root,
         media: classes.media,
       }}
       className={className}
       role="img"
-      title={title}
-      onClick={onClick}
       {...others}
     >
       {children}