From 7e078963a1d850496a95be8ada44b14c724d46f9 Mon Sep 17 00:00:00 2001 From: Bruno Henriques Date: Mon, 17 Jun 2024 16:16:35 +0100 Subject: [PATCH] chore: misc fixes & refactors - remove build & prettier leftovers - prettier v3 uses .gitignore - we dont use Emotion transform - fix icon sample keys - etc --- .prettierignore | 3 - ...thThemeProvider.tsx => ThemeDecorator.tsx} | 8 +-- .storybook/preview.ts | 2 +- .storybook/vite.config.ts | 29 -------- apps/app/src/generator/Colors/Colors.tsx | 4 +- docs/tests/Icons.stories.tsx | 66 +++++++++---------- .../baselines/app-shell/vite/.prettierignore | 11 ---- .../cli/src/baselines/vite/.prettierignore | 11 ---- .../code-editor/src/CodeEditor/CodeEditor.tsx | 50 ++++++-------- packages/core/src/Banner/Banner.stories.tsx | 15 ++--- .../src/BulkActions/BulkActions.stories.tsx | 20 ++---- packages/core/src/Card/Media/Media.tsx | 8 --- packages/core/src/Stack/Stack.tsx | 23 +++---- scripts/a11y.mjs | 2 +- tsconfig.build.json | 1 - 15 files changed, 76 insertions(+), 177 deletions(-) rename .storybook/decorators/{withThemeProvider.tsx => ThemeDecorator.tsx} (90%) delete mode 100644 packages/cli/src/baselines/app-shell/vite/.prettierignore delete mode 100644 packages/cli/src/baselines/vite/.prettierignore diff --git a/.prettierignore b/.prettierignore index b7e1faf569..7ec769b466 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,4 +1 @@ -dist -bin -coverage *.hbs diff --git a/.storybook/decorators/withThemeProvider.tsx b/.storybook/decorators/ThemeDecorator.tsx similarity index 90% rename from .storybook/decorators/withThemeProvider.tsx rename to .storybook/decorators/ThemeDecorator.tsx index 6c3c9f7f62..61775dbac2 100644 --- a/.storybook/decorators/withThemeProvider.tsx +++ b/.storybook/decorators/ThemeDecorator.tsx @@ -25,10 +25,8 @@ const useDarkClass = (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; diff --git a/.storybook/preview.ts b/.storybook/preview.ts index a269f11732..a3d6801d2a 100644 --- a/.storybook/preview.ts +++ b/.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"; diff --git a/.storybook/vite.config.ts b/.storybook/vite.config.ts index 016a303129..7c5b57f5c0 100644 --- a/.storybook/vite.config.ts +++ b/.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); - }, - }, - }, }); diff --git a/apps/app/src/generator/Colors/Colors.tsx b/apps/app/src/generator/Colors/Colors.tsx index 4576e5fd82..c4ff0bb748 100644 --- a/apps/app/src/generator/Colors/Colors.tsx +++ b/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: { diff --git a/docs/tests/Icons.stories.tsx b/docs/tests/Icons.stories.tsx index 303b9c8d8d..951bc6cb9d 100644 --- a/docs/tests/Icons.stories.tsx +++ b/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 = { args: { + iconSize: "M", color: ["secondary", "negative", "positive"], }, render: (args) => ( -
- {Object.entries(icons).map(([name, Icon], i) => ( - <> - - {/* Visual test for icon size */} - {i === Object.entries(icons).length - 1 && ( - <> - - - - - )} - - ))} -
+ <> +
+ {Object.entries(icons).map(([name, Icon]) => ( + + ))} +
+
+ {/* Visual test for icon size */} + + + + +
+ ), }; export const IconSpriteLibrary: StoryObj = { args: { + iconSize: "M", spriteUrl: "./assets/icons.svg", color: ["secondary", "negative", "positive"], }, render: (args) => ( -
- {Object.entries(icons).map(([name], i) => ( - <> - - {/* Visual test for icon size */} - {i === Object.entries(icons).length - 1 && ( - <> - - - - - )} - - ))} -
+ <> +
+ {Object.keys(icons).map((name) => ( + + ))} +
+
+ {/* Visual test for icon size */} + + + + +
+ ), }; diff --git a/packages/cli/src/baselines/app-shell/vite/.prettierignore b/packages/cli/src/baselines/app-shell/vite/.prettierignore deleted file mode 100644 index 238fd99d25..0000000000 --- a/packages/cli/src/baselines/app-shell/vite/.prettierignore +++ /dev/null @@ -1,11 +0,0 @@ -node_modules -build -dist -dist-ssr -coverage -logs - -# Editor directories -.vscode -.idea -.DS_Store diff --git a/packages/cli/src/baselines/vite/.prettierignore b/packages/cli/src/baselines/vite/.prettierignore deleted file mode 100644 index 238fd99d25..0000000000 --- a/packages/cli/src/baselines/vite/.prettierignore +++ /dev/null @@ -1,11 +0,0 @@ -node_modules -build -dist -dist-ssr -coverage -logs - -# Editor directories -.vscode -.idea -.DS_Store diff --git a/packages/code-editor/src/CodeEditor/CodeEditor.tsx b/packages/code-editor/src/CodeEditor/CodeEditor.tsx index 8221f32c81..98fc4eefec 100644 --- a/packages/code-editor/src/CodeEditor/CodeEditor.tsx +++ b/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 (
- defineActiveThemes(selectedTheme, colorModes, activeTheme) - } + beforeMount={defineActiveThemes} theme={`hv-${selectedTheme}-${selectedMode}`} {...editorProps} {...others} diff --git a/packages/core/src/Banner/Banner.stories.tsx b/packages/core/src/Banner/Banner.stories.tsx index 3fa3a9aa4f..68c6f7b2c8 100644 --- a/packages/core/src/Banner/Banner.stories.tsx +++ b/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 = { +export default { title: "Components/Banner", component: HvBanner, -}; -export default meta; + // @ts-expect-error https://github.com/storybookjs/storybook/issues/20782 + subcomponents: { HvBannerContent }, +} satisfies Meta; export const Main: StoryObj = { args: { @@ -40,7 +35,7 @@ export const Main: StoryObj = { actionsCallback: { control: { disable: true } }, }, render: (args) => { - return ; + return ; }, }; diff --git a/packages/core/src/BulkActions/BulkActions.stories.tsx b/packages/core/src/BulkActions/BulkActions.stories.tsx index 8e4fa16aa0..ed9a085b2e 100644 --- a/packages/core/src/BulkActions/BulkActions.stories.tsx +++ b/packages/core/src/BulkActions/BulkActions.stories.tsx @@ -89,9 +89,7 @@ export const Main: StoryObj = { checked: false, }); - const [data, setData] = useState( - 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 = { checked: false, }); - const [data, setData] = useState( - 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,7 +197,7 @@ export const WithPagination: StoryObj = { 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, @@ -209,13 +205,9 @@ export const WithPagination: StoryObj = { checked: false, }); - const [data, setData] = useState( - Array.from(Array(18), (_, i) => addEntry(i)), - ); - - const [page, setPage] = useState(0); - - const [pageSize, setPageSize] = useState(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 }))); diff --git a/packages/core/src/Card/Media/Media.tsx b/packages/core/src/Card/Media/Media.tsx index 5f72a4cf9b..8df3bba2a5 100644 --- a/packages/core/src/Card/Media/Media.tsx +++ b/packages/core/src/Card/Media/Media.tsx @@ -12,8 +12,6 @@ export type HvCardMediaClasses = ExtractNames; export interface HvCardMediaProps extends Omit, React.ImgHTMLAttributes { - /** 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 ( {children} diff --git a/packages/core/src/Stack/Stack.tsx b/packages/core/src/Stack/Stack.tsx index 13b4784379..e71a4b0df7 100644 --- a/packages/core/src/Stack/Stack.tsx +++ b/packages/core/src/Stack/Stack.tsx @@ -65,7 +65,7 @@ export const HvStack = (props: HvStackProps) => { classes: classesProp, className, children, - direction = "column", + direction: directionProp = "column", spacing = "sm", divider = false, withNavigation = false, @@ -78,9 +78,9 @@ export const HvStack = (props: HvStackProps) => { const containerRef = useRef(null); const { breakpoints } = useTheme(); - const processedDirection = useMemo( - () => getDirection(direction, width, breakpoints.keys), - [direction, width, breakpoints], + const direction = useMemo( + () => getDirection(directionProp, width, breakpoints.keys), + [directionProp, width, breakpoints], ); /** @@ -92,11 +92,8 @@ export const HvStack = (props: HvStackProps) => { if (typeof divider === "boolean" && divider) { return ( { ); } return divider; - }, [classes.divider, divider, dividerProps, processedDirection]); + }, [classes.divider, divider, dividerProps, direction]); return (
{ focusDisabled={false} strategy="grid" navigationJump={ - processedDirection === "column" - ? 1 - : Children.count(children) || 0 + direction === "column" ? 1 : Children.count(children) || 0 } filterClass="child" > diff --git a/scripts/a11y.mjs b/scripts/a11y.mjs index 91665bb44b..d34521c184 100644 --- a/scripts/a11y.mjs +++ b/scripts/a11y.mjs @@ -21,7 +21,7 @@ const init = () => { // Run a11y checks execSync( - `npx test-storybook --url ${storybookUrl} --excludeTags="skipTestRunner" --maxWorkers=2 >/dev/null 2>&1`, + `npx test-storybook --url ${storybookUrl} --excludeTags="skipTestRunner" --maxWorkers=2`, ); const violationNumber = showResults("Violation"); diff --git a/tsconfig.build.json b/tsconfig.build.json index e598d7b91e..b7c3f3ee89 100644 --- a/tsconfig.build.json +++ b/tsconfig.build.json @@ -14,7 +14,6 @@ "forceConsistentCasingInFileNames": true, "allowSyntheticDefaultImports": true, "jsx": "react-jsx", - "jsxImportSource": "@emotion/react", "baseUrl": ".", "noImplicitAny": false, "types": [