build(types): improve project tsconfig

- leverage module: preserve presets
- review strictness
- remove redundant rules
- allow proper "exports" directory imports (useful for phosphor)

apps/app/tsconfig.json

@@ -1,22 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
-  },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

apps/docs/src/components/home/HeroSection.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { ArrowRight } from "@phosphor-icons/react";
+import { ArrowRight } from "@phosphor-icons/react/ArrowRight";
 import { clsx } from "clsx";
 import { HvButton } from "@hitachivantara/uikit-react-core";
 

apps/docs/src/components/page/Description.tsx

@@ -1,4 +1,4 @@
-import { ArrowUpRight } from "@phosphor-icons/react";
+import { ArrowUpRight } from "@phosphor-icons/react/ArrowUpRight";
 import { useData } from "nextra/hooks";
 import { HvTypography } from "@hitachivantara/uikit-react-core";
 

apps/docs/tsconfig.json

@@ -1,22 +1,9 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "target": "ESNext",
     "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "preserve",
-    "incremental": true
+    "jsx": "preserve"
   },
   "include": ["**/*"],
   "exclude": ["node_modules"]

packages/code-editor/src/CodeEditor/languages/xml.ts

@@ -126,6 +126,7 @@ const getLastOpenedTag = (content: string, closed = false) => {
       content = content.substring(0, tagPosition);
     }
   }
+  return undefined;
 };
 
 /**

packages/core/src/Slider/Slider.stories.tsx

@@ -275,11 +275,8 @@ export const CustomValues: StoryObj<HvSliderProps> = {
   render: () => {
     const [values, setValues] = useState([3]);
     const formattedLabel = (label: React.ReactNode) => {
-      if (label === "1") return "Very Low";
-      if (label === "2") return "Low";
-      if (label === "3") return "Medium";
-      if (label === "4") return "High";
-      if (label === "5") return "Very High";
+      const labels = ["Very Low", "Low", "Medium", "High", "Very High"];
+      return labels[Number(label) - 1];
     };
 
     return (

packages/core/src/Table/TableBody/TableBody.tsx

@@ -83,22 +83,21 @@ export const HvTableBody = forwardRef<HTMLElement, HvTableBodyProps>(
         >
           {withNavigation
             ? Children.map(children, (element) => {
-                if (isValidElement(element)) {
-                  return (
-                    <HvFocus
-                      id={`my-id-${element.key}`}
-                      rootRef={bodyRef}
-                      key={`row-${element.key}`}
-                      strategy="grid"
-                      filterClass={tableSectionContext.filterClassName}
-                      navigationJump={1}
-                      focusDisabled={false}
-                      selected={element.props.selected}
-                    >
-                      {element}
-                    </HvFocus>
-                  );
-                }
+                if (!isValidElement(element)) return undefined;
+                return (
+                  <HvFocus
+                    id={`my-id-${element.key}`}
+                    rootRef={bodyRef}
+                    key={`row-${element.key}`}
+                    strategy="grid"
+                    filterClass={tableSectionContext.filterClassName}
+                    navigationJump={1}
+                    focusDisabled={false}
+                    selected={element.props.selected}
+                  >
+                    {element}
+                  </HvFocus>
+                );
               })
             : children}
         </Component>

packages/lab/src/Blade/Blade.tsx

@@ -248,18 +248,17 @@ export const HvBlade = (props: HvBladeProps) => {
   const bladeRef = useRef<HTMLDivElement>(null);
   const [maxWidth, setMaxWidth] = useState<number | undefined>(undefined);
   useEffect(() => {
-    if (bladeRef.current) {
-      const resizeObserver = new ResizeObserver((entries) => {
-        setMaxWidth(entries[0].target.clientWidth);
-      });
-      resizeObserver.observe(
-        // using the blade's container as reference max-width is more stable
-        bladeRef.current.parentElement ?? bladeRef.current,
-      );
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
+    if (!bladeRef.current) return;
+    const resizeObserver = new ResizeObserver((entries) => {
+      setMaxWidth(entries[0].target.clientWidth);
+    });
+    resizeObserver.observe(
+      // using the blade's container as reference max-width is more stable
+      bladeRef.current.parentElement ?? bladeRef.current,
+    );
+    return () => {
+      resizeObserver.disconnect();
+    };
   }, [isExpanded]);
 
   const { style: containerStyle, ...otherContainerProps } =

packages/lab/src/Flow/hooks/useFlowNodeMeta.ts

@@ -5,7 +5,5 @@ export function useFlowNodeMeta(id?: string) {
   const nodeId = useNodeId(id);
   const { registry } = useNodeMetaRegistry();
 
-  if (nodeId) {
-    return registry[nodeId];
-  }
+  return registry[nodeId!];
 }

templates/KanbanBoard/TaskCard.tsx

@@ -42,6 +42,7 @@ const getStatusIcon = (statusLevel?: number) => {
     case 5:
       return <Level0Good color="positive" />;
     default:
+      return null;
   }
 };
 

tsconfig.build.json

@@ -1,22 +1,32 @@
 {
   "compilerOptions": {
-    "module": "ESNext",
+    /* Base Options */
     "target": "ES2022",
-    "lib": ["DOM", "ES2022", "dom.iterable"],
-    "moduleResolution": "Node",
-    "noEmit": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
-    "sourceMap": true,
+    "allowJs": true,
+    "moduleDetection": "force",
+    "isolatedModules": true,
+    // "verbatimModuleSyntax": true,
+
+    /* Strictness */
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    // "noUncheckedIndexedAccess": true,
+
+    /* Bundling options (vite monorepo) */
+    "module": "preserve",
+    "noEmit": true,
+    "composite": true,
     "declaration": true,
     "declarationMap": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "allowSyntheticDefaultImports": true,
+
+    /* Others */
+    "lib": ["es2022", "dom", "dom.iterable"],
     "jsx": "react-jsx",
     "baseUrl": ".",
-    "noImplicitAny": true,
     "types": [
       "node",
       "jest",

tsconfig.json

@@ -7,7 +7,8 @@
     }
   },
   "include": [
-    ".config",
+    ".config/*.ts",
+    "*.config.ts",
     ".storybook/**/*",
     "apps",
     "docs",