[Linting] Fixed noUselessTernary and useOptionalChain-rules (#3215)

* memo: Added figma-plugin as ignore * memo: Removed unused noSelfAssigned * refactor: Fixed useJsxKeyInIterable * memo: Removed unused noInnerDeclarations * memo: Removed unused noUselessTernary * refactor: Fixed useOptionalChan rule biome * Update @navikt/aksel-icons/__tests__/validate-svg.test.ts Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * feat: Better null-check --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
navikt · Oct 10, 2024 · 363d76b · 363d76b
1 parent 5da970f
commit 363d76b
Show file tree

Hide file tree

Showing 20 changed files with 59 additions and 66 deletions.
diff --git a/@navikt/aksel-icons/__tests__/validate-svg.test.ts b/@navikt/aksel-icons/__tests__/validate-svg.test.ts
@@ -21,8 +21,7 @@ describe(`Each icons has a valid code`, () => {
 
       test(`has valid attributes on root-node`, () => {
         const root = select(":root", iconAst);
-        const properties =
-          root && root.properties ? Object.keys(root.properties).sort() : [];
+        const properties = Object.keys(root?.properties ?? []).sort();
 
         expect(properties).toStrictEqual(
           ["viewBox", "xmlns", "height", "width", "fill"].sort(),
@@ -31,45 +30,41 @@ describe(`Each icons has a valid code`, () => {
 
       test(`has valid xml-attr`, () => {
         const root = select(":root", iconAst);
-        const xmlns = root && root.properties ? root.properties.xmlns : null;
-        expect(xmlns).toBe("http://www.w3.org/2000/svg");
+        expect(root?.properties?.xmlns).toBe("http://www.w3.org/2000/svg");
       });
 
       test(`has valid viewbox`, () => {
         const root = select(":root", iconAst);
-        const viewbox =
-          root && root.properties ? root.properties.viewBox : null;
-        expect(viewbox).toBe("0 0 24 24");
+        expect(root?.properties?.viewBox).toBe("0 0 24 24");
       });
 
       test(`root fill is none`, () => {
         const root = select(":root", iconAst);
-        const fill = root && root.properties ? root.properties.fill : null;
-        expect(fill).toBe("none");
+        expect(root?.properties?.fill).toBe("none");
       });
 
       test(`has valid width and height`, () => {
         const root = select(":root", iconAst);
-        const width = root && root.properties ? root.properties.width : null;
-        const height = root && root.properties ? root.properties.height : null;
-        expect(width).toBe("24");
-        expect(height).toBe("24");
+        expect(root?.properties?.width).toBe("24");
+        expect(root?.properties?.height).toBe("24");
       });
 
       test(`has valid stroke`, () => {
         const nodes = selectAll("*", iconAst);
 
         nodes.forEach((n) => {
-          n.properties?.stroke &&
+          if (n.properties?.stroke) {
             expect(n.properties.stroke).toEqual("#23262A");
+          }
         });
       });
 
       test(`has valid stroke-width`, () => {
         const nodes = selectAll("*", iconAst);
         nodes.forEach((n) => {
-          n.properties?.strokeWidth &&
+          if (n.properties?.strokeWidth) {
             expect(n.properties?.strokeWidth).toEqual("1.5");
+          }
         });
       });
     });

diff --git a/@navikt/aksel-icons/config/metadata.js b/@navikt/aksel-icons/config/metadata.js
@@ -15,6 +15,7 @@ ymlList.forEach((file) => {
   const ymlData = jsYaml.load(fs.readFileSync(`${basePath}/${file}`), {
     schema: jsYaml.JSON_SCHEMA,
   });
+  // biome-ignore lint/complexity/useOptionalChain: optional chain not supported in enviroment. Consider revriting to Typescript
   if (ymlData.keywords && ymlData.keywords.includes("[ignore-docs]")) {
     return;
   }

diff --git a/@navikt/aksel/src/codemod/validation.ts b/@navikt/aksel/src/codemod/validation.ts
@@ -43,7 +43,7 @@ export function validateGit(options: any, program: Command) {
   try {
     clean = isGitClean.sync(process.cwd());
   } catch (err: any) {
-    if (err && err.stderr && err.stderr.indexOf("Not a git repository") >= 0) {
+    if (err?.stderr && err.stderr.indexOf("Not a git repository") >= 0) {
       clean = true;
     }
   }

diff --git a/@navikt/core/react/src/dropdown/Menu/index.tsx b/@navikt/core/react/src/dropdown/Menu/index.tsx
@@ -82,7 +82,7 @@ export const Menu = forwardRef<HTMLDivElement, DropdownMenuProps>(
         open={isOpen}
         onClose={() => {
           handleToggle(false);
-          onClose && onClose();
+          onClose?.();
         }}
       />
     );

diff --git a/@navikt/core/react/src/form/checkbox/useCheckbox.ts b/@navikt/core/react/src/form/checkbox/useCheckbox.ts
@@ -44,8 +44,8 @@ const useCheckbox = (props: CheckboxProps) => {
         if (readOnly) {
           return;
         }
-        props.onChange && props.onChange(e);
-        checkboxGroup && checkboxGroup.toggleValue(props.value);
+        props.onChange?.(e);
+        checkboxGroup?.toggleValue(props.value);
       },
       onClick: (e) => {
         if (readOnly) {

diff --git a/@navikt/core/react/src/form/radio/useRadio.ts b/@navikt/core/react/src/form/radio/useRadio.ts
@@ -41,8 +41,8 @@ export const useRadio = (props: RadioProps) => {
         if (readOnly) {
           return;
         }
-        props.onChange && props.onChange(e);
-        radioGroup?.onChange && radioGroup.onChange(props.value);
+        props.onChange?.(e);
+        radioGroup?.onChange?.(props.value);
       },
       onClick: (e) => {
         if (readOnly) {

diff --git a/@navikt/core/react/src/form/search/Search.tsx b/@navikt/core/react/src/form/search/Search.tsx
@@ -144,7 +144,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       (event: SearchClearEvent) => {
         onClear?.(event);
         handleChange("");
-        searchRef.current && searchRef.current?.focus?.();
+        searchRef.current?.focus?.();
       },
       [handleChange, onClear],
     );

diff --git a/@navikt/core/react/src/form/switch/Switch.tsx b/@navikt/core/react/src/form/switch/Switch.tsx
@@ -122,7 +122,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
               return;
             }
             setChecked(e.target.checked);
-            props.onChange && props.onChange(e);
+            props.onChange?.(e);
           }}
           onClick={(e) => {
             if (readOnly) {

diff --git a/@navikt/core/react/src/help-text/help-text.stories.tsx b/@navikt/core/react/src/help-text/help-text.stories.tsx
@@ -49,7 +49,7 @@ Default.argTypes = {
 export const Open: StoryFn = () => {
   const ref = useRef<HTMLButtonElement | null>(null);
   useEffect(() => {
-    ref.current && ref.current.click();
+    ref.current?.click();
   }, []);
 
   return (

diff --git a/@navikt/core/react/src/overlays/floating-menu/parts/RovingFocus.tsx b/@navikt/core/react/src/overlays/floating-menu/parts/RovingFocus.tsx
@@ -55,19 +55,19 @@ const RovingFocus = forwardRef<HTMLDivElement, RovingFocusProps>(
 
         const nextItem = () => {
           const next = descendants.nextEnabled(idx, loop);
-          next && next.node?.focus();
+          next?.node?.focus();
         };
         const prevItem = () => {
           const prev = descendants.prevEnabled(idx, loop);
-          prev && prev.node?.focus();
+          prev?.node?.focus();
         };
         const firstItem = () => {
           const first = descendants.firstEnabled();
-          first && first.node?.focus();
+          first?.node?.focus();
         };
         const lastItem = () => {
           const last = descendants.lastEnabled();
-          last && last.node?.focus();
+          last?.node?.focus();
         };
 
         const keyMap: Record<string, React.KeyboardEventHandler> = {

diff --git a/@navikt/core/react/src/tabs/parts/tablist/useScrollButtons.ts b/@navikt/core/react/src/tabs/parts/tablist/useScrollButtons.ts
@@ -41,7 +41,7 @@ export function useScrollButtons(listRef: React.RefObject<HTMLDivElement>) {
 
     return () => {
       win.removeEventListener("resize", handleResize);
-      resizeObserver && resizeObserver.disconnect();
+      resizeObserver?.disconnect();
       updateScrollButtonState.clear();
     };
   }, [listRef, updateScrollButtonState]);

diff --git a/@navikt/core/react/src/tabs/parts/tablist/useTabList.ts b/@navikt/core/react/src/tabs/parts/tablist/useTabList.ts
@@ -26,19 +26,19 @@ export function useTabList() {
 
       const nextTab = () => {
         const next = descendants.nextEnabled(idx, loop);
-        next && next.node?.focus();
+        next?.node?.focus();
       };
       const prevTab = () => {
         const prev = descendants.prevEnabled(idx, loop);
-        prev && prev.node?.focus();
+        prev?.node?.focus();
       };
       const firstTab = () => {
         const first = descendants.firstEnabled();
-        first && first.node?.focus();
+        first?.node?.focus();
       };
       const lastTab = () => {
         const last = descendants.lastEnabled();
-        last && last.node?.focus();
+        last?.node?.focus();
       };
 
       const keyMap: Record<string, React.KeyboardEventHandler> = {

diff --git a/@navikt/core/react/src/timeline/TimelineRow.tsx b/@navikt/core/react/src/timeline/TimelineRow.tsx
@@ -91,27 +91,26 @@ export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
               }
             }}
           >
-            {periods &&
-              periods.map((period) => {
-                return (
-                  <li key={`period-${period.id}`}>
-                    <PeriodContext.Provider
-                      value={{
-                        periodId: period.id,
-                        firstFocus: firstFocusable?.id === period.id,
-                        restProps: period?.restProps,
-                      }}
-                    >
-                      <Period
-                        start={period.start}
-                        end={period.endInclusive}
-                        icon={period.icon}
-                        ref={period?.ref}
-                      />
-                    </PeriodContext.Provider>
-                  </li>
-                );
-              })}
+            {periods?.map((period) => {
+              return (
+                <li key={`period-${period.id}`}>
+                  <PeriodContext.Provider
+                    value={{
+                      periodId: period.id,
+                      firstFocus: firstFocusable?.id === period.id,
+                      restProps: period?.restProps,
+                    }}
+                  >
+                    <Period
+                      start={period.start}
+                      end={period.endInclusive}
+                      icon={period.icon}
+                      ref={period?.ref}
+                    />
+                  </PeriodContext.Provider>
+                </li>
+              );
+            })}
           </ol>
         </div>
       </>

diff --git a/@navikt/core/react/src/toggle-group/parts/useToggleItem.ts b/@navikt/core/react/src/toggle-group/parts/useToggleItem.ts
@@ -55,19 +55,19 @@ export function useToggleItem<P extends UseToggleItemProps>(
 
       const nextTab = () => {
         const next = descendants.nextEnabled(idx, false);
-        next && next.node?.focus();
+        next?.node?.focus();
       };
       const prevTab = () => {
         const prev = descendants.prevEnabled(idx, false);
-        prev && prev.node?.focus();
+        prev?.node?.focus();
       };
       const firstTab = () => {
         const first = descendants.firstEnabled();
-        first && first.node?.focus();
+        first?.node?.focus();
       };
       const lastTab = () => {
         const last = descendants.lastEnabled();
-        last && last.node?.focus();
+        last?.node?.focus();
       };
 
       const keyMap: Record<string, React.KeyboardEventHandler> = {

diff --git a/@navikt/core/react/src/util/TextareaAutoSize.tsx b/@navikt/core/react/src/util/TextareaAutoSize.tsx
@@ -40,7 +40,7 @@ const checkState = (
  * https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/ownerWindow/ownerWindow.ts
  */
 const ownerWindow = (node: Node | undefined): Window => {
-  const doc = (node && node.ownerDocument) || document;
+  const doc = node?.ownerDocument || document;
   return doc.defaultView || window;
 };
 

diff --git a/aksel.nav.no/website/components/sanity-modules/code-examples/CodeExamples.tsx b/aksel.nav.no/website/components/sanity-modules/code-examples/CodeExamples.tsx
@@ -54,7 +54,7 @@ const ComponentExamples = ({ node }: CodeExamplesProps) => {
         }
       }
 
-      if (exampleWrapper && exampleWrapper.offsetHeight) {
+      if (exampleWrapper?.offsetHeight) {
         const newHeight = iframePadding + exampleWrapper.offsetHeight;
         clearInterval(waitForExampleContentToRender);
         setFrameState(Math.min(Math.max(newHeight, 300), 900));

diff --git a/aksel.nav.no/website/components/sanity-modules/props/parts/DtList.tsx b/aksel.nav.no/website/components/sanity-modules/props/parts/DtList.tsx
@@ -34,7 +34,7 @@ type Prop = Partial<{
 }>;
 
 export const DtList = ({ prop }: { prop: Prop; parent: string }) => {
-  if (prop?.description && prop.description.includes("@private")) {
+  if (prop?.description?.includes("@private")) {
     return null;
   }
 

diff --git a/aksel.nav.no/website/pages/monster-maler/[...slug].tsx b/aksel.nav.no/website/pages/monster-maler/[...slug].tsx
@@ -149,7 +149,7 @@ const Page = ({ page, sidebar, seo, publishDate, toc }: PageProps["props"]) => {
         <IntroSeksjon node={page?.intro} />
         <SanityBlockContent blocks={page.content} />
 
-        {metadata && metadata.changelog && (
+        {metadata?.changelog && (
           <>
             <Heading
               tabIndex={-1}

diff --git a/biome.json b/biome.json
@@ -47,9 +47,7 @@
       },
       "complexity": {
         "noForEach": "off",
-        "useOptionalChain": "off",
-        "useArrowFunction": "off",
-        "noUselessTernary": "off"
+        "useArrowFunction": "off"
       }
     },
     "ignore": [

diff --git a/scripts/docgen.ts b/scripts/docgen.ts
@@ -31,7 +31,7 @@ const enrich_extra_prop_fields = (docs: docgen.ComponentDoc[]) => {
       const example_regex = /@example((.|\n)*?(?=\n{2,}))|@example((.|\n)*)/;
       const example = prop.description.match(example_regex);
       prop.description = prop.description.replace(example_regex, "").trim();
-      if ((example && example[1]) || (example && example[3])) {
+      if (example?.[1] || example?.[3]) {
         // @ts-expect-error adding a field here to a type that doesn't have it
         prop.example = (example[1] || example[3]).trim();
       }