chore: update tsconfig

Author: targos

package.json

@@ -38,6 +38,7 @@
     "@storybook/addon-links": "^9.0.8",
     "@storybook/react-vite": "^9.0.8",
     "@types/react": "^18.3.11",
+    "@zakodium/tsconfig": "^1.0.1",
     "eslint": "^9.28.0",
     "eslint-config-zakodium": "^15.0.1",
     "eslint-plugin-storybook": "^9.0.8",

src/hooks/useBBoxObserver.ts

@@ -20,7 +20,7 @@ export function useBBoxObserver<ElementType extends SVGGraphicsElement>() {
     }
     if (element !== null) {
       const observer = new ResizeObserver(([entry]) => {
-        const bbox = (entry.target as ElementType).getBBox();
+        const bbox = (entry?.target as ElementType).getBBox();
         const previous = previousSize.current;
         if (
           previous.x !== bbox.x ||

src/hooks/useLogTicks.ts

@@ -32,7 +32,10 @@ function formatTicks(
   minSpace: number,
 ): PrimaryLogTicks[] {
   const scaledTicks = ticks.filter((val) => isMainTick(val) === 1).map(scale);
-  const mainTickSpace = Math.abs(scaledTicks[0] - scaledTicks[1]);
+  const mainTickSpace = Math.abs(
+    // TODO: `scaledTicks` might not have a length >1
+    (scaledTicks[0] as number) - (scaledTicks[1] as number),
+  );
   const mainTickRatio = (maxWordSpace + minSpace) / mainTickSpace;
   const mainTicksStep = mainTickRatio >= 1 ? Math.ceil(mainTickRatio) : 1;
 

src/hooks/useTicks.ts

@@ -43,8 +43,10 @@ export function useTicks<T extends number | Date>(
   ref: MutableRefObject<SVGGElement | null>,
   options: Options<T>,
 ) {
-  const range = scale.range();
-  if (!range) throw new Error('Range needs to be specified');
+  const range = scale.range() as [number, number];
+  if (!range || range.length !== 2) {
+    throw new Error('Range needs to be specified');
+  }
 
   const domain = scale.domain();
   if (!domain) throw new Error('Domain needs to be specified');

stories/hooks/advanced_ticks.stories.tsx

@@ -10,10 +10,12 @@ export default {
   title: 'Hooks/Advanced Ticks',
 } as Meta;
 
-const LARGE_RANGE = [0, 600];
-const SMALL_RANGE = [0, 40];
-const DOMAIN_LARGE = [0, 100];
-const DOMAIN_SMALL = [50, 50.0001];
+type Domain = [number, number];
+
+const LARGE_RANGE: Domain = [0, 600];
+const SMALL_RANGE: Domain = [0, 40];
+const DOMAIN_LARGE: Domain = [0, 100];
+const DOMAIN_SMALL: Domain = [50, 50.0001];
 
 export function AdvancedCustomTicks() {
   const ref = useRef<SVGGElement>(null);
@@ -65,7 +67,7 @@ function computeLinearTicks(
     secondaryTickSize?: number;
   } = {},
 ): AxisTick[] {
-  const viewport = xAccessor.domain();
+  const viewport = xAccessor.domain() as Domain;
   const ticks: AxisTick[] = [];
   const {
     noSecondaryTicks = false,
@@ -113,7 +115,7 @@ function computeLinearTicks(
     ticks.push({
       value,
       position: xAccessor(value),
-      label: primaryTicks[primaryTickIndex]?.label ?? null,
+      label: primaryTicks[primaryTickIndex]?.label ?? '',
       size: n % nSubTicks === 0 ? primaryTickSize : secondaryTickSize,
     });
   }

tsconfig.json

@@ -1,21 +1,7 @@
 {
+  "extends": "@zakodium/tsconfig/jsx",
   "compilerOptions": {
-    "lib": ["DOM", "ES2022"],
-    "types": [],
-    "target": "ES2022",
-    "outDir": "lib",
-    "jsx": "react-jsx",
-    "module": "NodeNext",
-    "strict": true,
-    "skipLibCheck": true,
-    "resolveJsonModule": false,
-    "forceConsistentCasingInFileNames": true,
-    "allowJs": false,
-    "isolatedModules": true,
-    "verbatimModuleSyntax": true,
-    "sourceMap": true,
-    "declaration": true,
-    "declarationMap": true
+    "outDir": "lib"
   },
   "include": ["src", "stories"]
 }