refactor: address biome linting rules (#4229)

Co-authored-by: Bruno Henriques <[email protected]> Co-authored-by: Márcia Esteves <[email protected]>
lumada-design · Jul 15, 2024 · 14ce9a7 · 14ce9a7
1 parent 7e07896
commit 14ce9a7
Show file tree

Hide file tree

Showing 68 changed files with 321 additions and 436 deletions.
diff --git a/.storybook/addons/mode-selector/ModeSelector.tsx b/.storybook/addons/mode-selector/ModeSelector.tsx
@@ -46,7 +46,7 @@ const ModeSelector = () => {
         <path
           fill={colors[selectedMode === "wicked" ? "dark" : "light"].secondary}
           d="M14.54626 12.57422c.0268-.03833.05713-.07373.08326-.11231.11-.16284.20837-.33239.30584-.50244.03162-.05517.06751-.1073.09784-.16321.086-.15881.16034-.32287.23535-.48693.03364-.07349.07209-.144.10352-.21875.06787-.16126.1239-.32691.18109-.49244.02826-.08166.06165-.16088.08728-.24365.05506-.17773.09754-.359.14014-.54053.01745-.07409.04022-.14611.05554-.22119.0423-.20654.07123-.41626.09717-.62646.00659-.05371.01819-.10571.02374-.15967.02374-.23108.03369-.46435.03717-.69824.00061-.0365.00568-.07178.0058-.1084l-.00024-.00525.00067-.01428A7.98991 7.98991 0 0 0 8.001 0H8a8 8 0 0 0 0 16h.001a7.94253 7.94253 0 0 0 5.649-2.3501c.13953-.13891.26728-.28711.39533-.43506.03924-.04541.08276-.08691.121-.13317.13524-.16346.25872-.33467.37993-.50745zM8 15a6.953 6.953 0 0 1-4.943-2.057A7.02151 7.02151 0 0 1 8.001.95618V15z"
-        ></path>
+        />
       </svg>
     </IconButton>
   );

diff --git a/.storybook/addons/mode-selector/register.tsx b/.storybook/addons/mode-selector/register.tsx
@@ -8,7 +8,7 @@ addons.register(ADDON_ID, () => {
   addons.add(ADDON_ID, {
     title: ADDON_TITLE,
     type: types.TOOL,
-    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+    match: ({ viewMode }) => !!viewMode?.match(/^(story|docs)$/),
     render: () => <ModeSelector />,
   });
 });
diff --git a/.storybook/addons/mode-selector/utils.ts b/.storybook/addons/mode-selector/utils.ts
@@ -3,11 +3,11 @@ const STORAGE_KEY = "sb-uikit-mode";
 const modes = ["dawn", "wicked"] as const;
 export type Mode = (typeof modes)[number];
 
-export const setLocalMode = (value: Mode): void => {
-  return localStorage?.setItem(STORAGE_KEY, value);
+export const setLocalMode = (value: Mode) => {
+  localStorage?.setItem(STORAGE_KEY, value);
 };
 
-export const getLocalMode = (): string | null => {
+export const getLocalMode = () => {
   return localStorage?.getItem(STORAGE_KEY);
 };
 

diff --git a/.storybook/addons/theme-selector/register.tsx b/.storybook/addons/theme-selector/register.tsx
@@ -8,7 +8,7 @@ addons.register(ADDON_ID, () => {
   addons.add(ADDON_ID, {
     title: ADDON_TITLE,
     type: types.TOOL,
-    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+    match: ({ viewMode }) => !!viewMode?.match(/^(story|docs)$/),
     render: () => <ThemeSelector />,
   });
 });
diff --git a/.storybook/addons/theme-selector/utils.ts b/.storybook/addons/theme-selector/utils.ts
@@ -1,11 +1,11 @@
 const STORAGE_KEY = "sb-uikit-theme";
 const DEFAULT_THEME = "ds5";
 
-export const setLocalTheme = (value: string): void => {
-  return localStorage?.setItem(STORAGE_KEY, value);
+export const setLocalTheme = (value: string) => {
+  localStorage?.setItem(STORAGE_KEY, value);
 };
 
-export const getLocalTheme = (): string | null => {
+export const getLocalTheme = () => {
   return localStorage?.getItem(STORAGE_KEY);
 };
 

diff --git a/.storybook/addons/version-selector/register.tsx b/.storybook/addons/version-selector/register.tsx
@@ -8,7 +8,7 @@ addons.register(ADDON_ID, () => {
   addons.add(ADDON_ID, {
     title: ADDON_TITLE,
     type: types.TOOL,
-    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+    match: ({ viewMode }) => !!viewMode?.match(/^(story|docs)$/),
     render: () => <VersionSelector />,
   });
 });
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,4 +1,4 @@
-import { dirname, join } from "path";
+import { dirname, join } from "node:path";
 import { StorybookConfig } from "@storybook/react-vite";
 import remarkGfm from "remark-gfm";
 import { mergeConfig } from "vite";
@@ -37,9 +37,9 @@ export default {
     },
     getAbsolutePath("@storybook/addon-a11y"),
     getAbsolutePath("@storybook/addon-links"),
-    __dirname + "/addons/version-selector",
-    __dirname + "/addons/theme-selector",
-    __dirname + "/addons/mode-selector",
+    `${__dirname}/addons/version-selector`,
+    `${__dirname}/addons/theme-selector`,
+    `${__dirname}/addons/mode-selector`,
   ],
   features: {},
   staticDirs: [

diff --git a/.storybook/test-runner.ts b/.storybook/test-runner.ts
@@ -1,4 +1,4 @@
-import fs from "fs";
+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";
@@ -56,7 +56,7 @@ const config: TestRunnerConfig = {
     const validStories = excludeStories.filter((s) =>
       storyContext.title.includes(s),
     );
-    if (validStories.length != 0) return;
+    if (validStories.length !== 0) return;
 
     const specificA11yRules = [{ id: "color-contrast", enabled: false }];
 

diff --git a/apps/app/src/assets/HitachiLogo.tsx b/apps/app/src/assets/HitachiLogo.tsx
@@ -1,40 +1,26 @@
 import { theme } from "@hitachivantara/uikit-styles";
 
-const HitachiLogo = (props: React.SVGProps<SVGSVGElement>) => {
-  const color = theme.colors.secondary;
+export const HitachiLogo = ({ ...others }: React.SVGProps<SVGSVGElement>) => {
   return (
     <svg
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
       x="0px"
       y="0px"
       viewBox="0 0 80 16"
       xmlSpace="preserve"
       width={80}
       height={16}
-      {...props}
+      style={{ width: 72, height: 20 }}
+      fill={theme.colors.secondary}
+      {...others}
     >
+      <title>Logo</title>
+      <path d="M63.6,2.5c0,0,0,4.8,0,4.7H70c0,0,0-4.7,0-4.7s3.1,0,3.1,0c0,0,0,11.8,0,11.9H70c0,0,0-5.2,0-5.2c0,0-6.3,0-6.3,0c0,0,0,5.2,0,5.2h-3.1c0,0,0-11.9,0-11.9C60.5,2.5,63.6,2.5,63.6,2.5z" />
+      <path d="M33.9,2.5c0,0,0,2,0,2h-4.8v9.8h-3.1V4.5h-4.8v-2C21.1,2.5,33.9,2.5,33.9,2.5z" />
+      <path d="M46,14.3c0,0-3.5,0-3.5,0l-1-2.6h-5.9c0,0-1,2.6-1,2.6h-3.5l5.5-11.9h3.8L46,14.3z M38.6,4.5l-2.2,5.4h4.4L38.6,4.5" />
+      <rect x="75.6" y="2.5" width="3.1" height="11.9" />
+      <path d="M4.9,2.5c0,0,0,4.8,0,4.7h6.3c0,0,0-4.7,0-4.7s3.1,0,3.1,0c0,0,0,11.8,0,11.9h-3.1c0,0,0-5.2,0-5.2c0,0-6.3,0-6.3,0c0,0,0,5.2,0,5.2H1.7c0,0,0-11.9,0-11.9C1.7,2.5,4.9,2.5,4.9,2.5z" />
+      <rect x="16.9" y="2.5" width="3.1" height="11.9" />
       <path
-        fill={color}
-        d="M63.6,2.5c0,0,0,4.8,0,4.7H70c0,0,0-4.7,0-4.7s3.1,0,3.1,0c0,0,0,11.8,0,11.9H70c0,0,0-5.2,0-5.2c0,0-6.3,0-6.3,0c0,0,0,5.2,0,5.2h-3.1c0,0,0-11.9,0-11.9C60.5,2.5,63.6,2.5,63.6,2.5z"
-      />
-      <path
-        fill={color}
-        d="M33.9,2.5c0,0,0,2,0,2h-4.8v9.8h-3.1V4.5h-4.8v-2C21.1,2.5,33.9,2.5,33.9,2.5z"
-      />
-      <path
-        fill={color}
-        d="M46,14.3c0,0-3.5,0-3.5,0l-1-2.6h-5.9c0,0-1,2.6-1,2.6h-3.5l5.5-11.9h3.8L46,14.3z M38.6,4.5l-2.2,5.4h4.4L38.6,4.5"
-      />
-      <rect x="75.6" y="2.5" fill={color} width="3.1" height="11.9" />
-      <path
-        fill={color}
-        d="M4.9,2.5c0,0,0,4.8,0,4.7h6.3c0,0,0-4.7,0-4.7s3.1,0,3.1,0c0,0,0,11.8,0,11.9h-3.1c0,0,0-5.2,0-5.2c0,0-6.3,0-6.3,0c0,0,0,5.2,0,5.2H1.7c0,0,0-11.9,0-11.9C1.7,2.5,4.9,2.5,4.9,2.5z"
-      />
-      <rect x="16.9" y="2.5" fill={color} width="3.1" height="11.9" />
-      <path
-        fill={color}
         d="M45.9,11c-0.3-0.8-0.4-1.6-0.4-2.5c0-1.2,0.2-2.4,0.8-3.4c0.6-1,1.5-1.8,2.7-2.2
 			c1.1-0.4,2.2-0.6,3.5-0.6c1.4,0,2.7,0.3,4,0.8c1.1,0.5,2,1.5,2.2,2.7c0.1,0.3,0.1,0.5,0.1,0.8h-3.3c0-0.3-0.1-0.6-0.2-0.9
 			c-0.3-0.6-0.8-1.2-1.5-1.4c-0.4-0.1-0.9-0.2-1.4-0.2c-0.5,0-1.1,0.1-1.5,0.3c-0.8,0.3-1.4,0.9-1.7,1.7
@@ -45,7 +31,3 @@ const HitachiLogo = (props: React.SVGProps<SVGSVGElement>) => {
     </svg>
   );
 };
-
-export default (props: React.SVGProps<SVGSVGElement>) => (
-  <HitachiLogo style={{ width: 72, height: 20 }} {...props} />
-);
diff --git a/apps/app/src/generator/Colors/Colors.tsx b/apps/app/src/generator/Colors/Colors.tsx
@@ -50,10 +50,7 @@ const Colors = (): JSX.Element => {
               <HvColorPicker
                 iconOnly
                 defaultValue={
-                  customTheme &&
-                  customTheme.colors &&
-                  customTheme.colors.modes[selectedMode] &&
-                  customTheme.colors.modes?.[selectedMode].backgroundColor
+                  customTheme?.colors?.modes?.[selectedMode]?.backgroundColor
                 }
                 onChangeComplete={(color) =>
                   colorChangedHandler("backgroundColor", color)
@@ -119,13 +116,9 @@ const Colors = (): JSX.Element => {
                       <HvColorPicker
                         iconOnly
                         defaultValue={
-                          (customTheme &&
-                            customTheme.colors &&
-                            customTheme.colors.modes[selectedMode] &&
-                            customTheme.colors.modes?.[selectedMode][
-                              c as keyof HvThemeTokens["colors"]
-                            ]) ||
-                          groupColors[c]
+                          customTheme?.colors?.modes?.[selectedMode]?.[
+                            c as keyof HvThemeTokens["colors"]
+                          ] || groupColors[c]
                         }
                         onChangeComplete={(color) =>
                           colorChangedHandler(c, color)

diff --git a/apps/docs/components/Logo.tsx b/apps/docs/components/Logo.tsx
@@ -2,40 +2,21 @@ import { useTheme } from "nextra-theme-docs";
 
 export const Logo = () => {
   const { resolvedTheme } = useTheme();
-  const color = resolvedTheme === "dark" ? "#FFF" : "#000";
 
   return (
     <svg
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
       xmlSpace="preserve"
       viewBox="0 0 260 50"
       height={25}
+      color={resolvedTheme === "dark" ? "#FFF" : "#000"}
     >
-      <g>
-        <path
-          fill={color}
-          d="m0,48.6V.53h13.22l24.42,29.39V.53h13.15v48.07h-13.15L13.22,19.21v29.39H0Z"
-        />
-        <path
-          fill={color}
-          d="m90.39,11.11h-15.72v8.03h14.84v10.58h-14.84v8.29h15.72v10.58h-28.94V.53h28.94v10.58Z"
-        />
-        <path
-          fill={color}
-          d="m114.48,22.97L98.62.53h16.33l6.88,12.43,8.5-12.43h16.33l-16.8,22.44,18.96,25.63h-16.12l-10.19-15.68-11.94,15.68h-15.99l19.9-25.63Z"
-        />
-        <path
-          fill={color}
-          d="m173.43,11.11v37.49h-13.22V11.11h-10.86V.53h34.94v10.58h-10.86Z"
-        />
-        <path
-          fill={color}
-          d="m210.99.16v28.95c0,4.13.71,7.15,2.14,9.06,2.13,2.76,5.13,4.14,8.99,4.14s6.9-1.38,9.03-4.14c1.43-1.85,2.14-4.87,2.14-9.06V.16h7.67v30.94c0,5.06-1.67,9.23-5.01,12.51-3.75,3.65-8.37,5.48-13.83,5.48s-10.07-1.83-13.8-5.48c-3.34-3.28-5.01-7.45-5.01-12.51V.16h7.67Z"
-        />
-        <path fill={color} d="m260.82.16v48.06h-7.67V.16h7.67Z" />
-      </g>
+      <title>Logo</title>
+      <path d="m0,48.6V.53h13.22l24.42,29.39V.53h13.15v48.07h-13.15L13.22,19.21v29.39H0Z" />
+      <path d="m90.39,11.11h-15.72v8.03h14.84v10.58h-14.84v8.29h15.72v10.58h-28.94V.53h28.94v10.58Z" />
+      <path d="m114.48,22.97L98.62.53h16.33l6.88,12.43,8.5-12.43h16.33l-16.8,22.44,18.96,25.63h-16.12l-10.19-15.68-11.94,15.68h-15.99l19.9-25.63Z" />
+      <path d="m173.43,11.11v37.49h-13.22V11.11h-10.86V.53h34.94v10.58h-10.86Z" />
+      <path d="m210.99.16v28.95c0,4.13.71,7.15,2.14,9.06,2.13,2.76,5.13,4.14,8.99,4.14s6.9-1.38,9.03-4.14c1.43-1.85,2.14-4.87,2.14-9.06V.16h7.67v30.94c0,5.06-1.67,9.23-5.01,12.51-3.75,3.65-8.37,5.48-13.83,5.48s-10.07-1.83-13.8-5.48c-3.34-3.28-5.01-7.45-5.01-12.51V.16h7.67Z" />
+      <path d="m260.82.16v48.06h-7.67V.16h7.67Z" />
     </svg>
   );
 };
diff --git a/docs/guides/dnd/DndKitMultiple/DndKitMultiple.tsx b/docs/guides/dnd/DndKitMultiple/DndKitMultiple.tsx
@@ -136,8 +136,7 @@ export const ColumnContainer = ({ column, items }: ColumnContainerProps) => {
       </div>
       <HvListContainer selectable>
         <SortableContext items={itemsIds}>
-          {items &&
-            items?.map((item) => <ItemCard key={item.id} item={item} />)}
+          {items?.map((item) => <ItemCard key={item.id} item={item} />)}
         </SortableContext>
       </HvListContainer>
     </div>

diff --git a/docs/guides/dnd/DndKitSingle/DndKitSingle.tsx b/docs/guides/dnd/DndKitSingle/DndKitSingle.tsx
@@ -166,8 +166,7 @@ export const DndKitSingle = () => {
         </div>
         <HvListContainer selectable>
           <SortableContext items={itemsIds}>
-            {items &&
-              items?.map((item) => <ItemCard key={item.id} item={item} />)}
+            {items?.map((item) => <ItemCard key={item.id} item={item} />)}
           </SortableContext>
         </HvListContainer>
       </div>

diff --git a/docs/guides/dnd/Vanilla/Vanilla.tsx b/docs/guides/dnd/Vanilla/Vanilla.tsx
@@ -72,35 +72,34 @@ export const Vanilla = () => {
           <HvTypography variant="title4">To Do</HvTypography>
         </div>
         <HvListContainer>
-          {items &&
-            items?.map((item, index) => (
-              <div key={item.id}>
-                <HvListItem
-                  id={item.id}
-                  className={cx(classes.item, {
-                    [classes.itemDragging]:
-                      dragging && item.id === draggedItem?.id,
-                  })}
-                  draggable
-                  onDragStart={onDragStart}
-                  onDragEnd={onDragEnd}
-                  onDragOver={(e) => onDragOver(e, index)}
-                  onDragLeave={onDragLeave}
-                  onDrop={onDrop}
-                >
-                  <div className={classes.itemTitle}>
-                    {item.icon}
-                    {item.title}
-                  </div>
-                  <div className={classes.handle}>
-                    <Drag />
-                  </div>
-                </HvListItem>
-                {draggedOverIndex === index && (
-                  <div className={classes.placeholder} />
-                )}
-              </div>
-            ))}
+          {items?.map((item, index) => (
+            <div key={item.id}>
+              <HvListItem
+                id={item.id}
+                className={cx(classes.item, {
+                  [classes.itemDragging]:
+                    dragging && item.id === draggedItem?.id,
+                })}
+                draggable
+                onDragStart={onDragStart}
+                onDragEnd={onDragEnd}
+                onDragOver={(e) => onDragOver(e, index)}
+                onDragLeave={onDragLeave}
+                onDrop={onDrop}
+              >
+                <div className={classes.itemTitle}>
+                  {item.icon}
+                  {item.title}
+                </div>
+                <div className={classes.handle}>
+                  <Drag />
+                </div>
+              </HvListItem>
+              {draggedOverIndex === index && (
+                <div className={classes.placeholder} />
+              )}
+            </div>
+          ))}
         </HvListContainer>
       </div>
     </div>