Enable type check during storybook build

FormidableLabs · Nov 7, 2024 · af16239 · af16239
1 parent a2aed86
commit af16239
Show file tree

Hide file tree

Showing 43 changed files with 225 additions and 182 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -24,15 +24,24 @@ const config: StorybookConfig = {
     "@chromatic-com/storybook",
   ],
 
-  stories: ["../stories/**/*.stories.tsx"],
-
   framework: {
     name: "@storybook/react-webpack5",
     options: {
       builder: {},
     },
   },
 
+  stories: ["../stories/**/*.stories.tsx"],
+
+  typescript: {
+    check: true,
+    checkOptions: {
+      typescript: {
+        configFile: path.resolve(ROOT, "tsconfig.storybook.json"),
+      },
+    },
+  },
+
   webpackFinal: async (config) => {
     if (config.resolve) {
       config.resolve.alias = {

diff --git a/package.json b/package.json
@@ -162,6 +162,7 @@
     "types:check": "wireit",
     "types:create": "wireit",
     "build-storybook": "storybook build",
+    "storybook:typecheck": "tsc -p tsconfig.storybook.json",
     "storybook:build": "wireit",
     "storybook:dev": "concurrently --raw \"pnpm:build:lib:esm --watch\" \"pnpx storybook dev -p 6006\"",
     "storybook:start": "storybook dev -p 6006 --no-open",

diff --git a/stories/victory-charts/victory-area/config.ts b/stories/victory-charts/victory-area/config.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { VictoryArea } from "@/victory";
+import { VictoryArea, VictoryAreaProps } from "@/victory";
 
 import {
   VictoryCommonProps,
@@ -9,7 +9,7 @@ import {
 } from "../../utils/arg-types";
 import { componentContainer } from "../../utils/decorators";
 
-type StoryProps = React.ComponentProps<typeof VictoryArea> & {
+type StoryProps = VictoryAreaProps & {
   themeKey: string;
 };
 

diff --git a/stories/victory-charts/victory-area/interpolation.stories.tsx b/stories/victory-charts/victory-area/interpolation.stories.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import type { Meta } from "@storybook/react";
 
 import {
+  InterpolationPropType,
   VictoryArea,
   VictoryChart,
   VictoryLabel,
@@ -41,7 +42,10 @@ export const Interpolation: Story = {
             style={{ textAnchor: "middle" }}
             text={interpolation}
           />
-          <VictoryArea {...props} interpolation={interpolation} />
+          <VictoryArea
+            {...props}
+            interpolation={interpolation as InterpolationPropType}
+          />
         </VictoryChart>
       ))}
     </>

diff --git a/stories/victory-charts/victory-area/polar-interpolation.stories.tsx b/stories/victory-charts/victory-area/polar-interpolation.stories.tsx
@@ -2,13 +2,15 @@ import React from "react";
 import type { Meta } from "@storybook/react";
 
 import {
+  InterpolationPropType,
   VictoryArea,
   VictoryChart,
   VictoryLabel,
   VictoryTheme,
 } from "@/victory";
-import { Story, ComponentMeta } from "./config";
+
 import { getData } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
 
 const meta: Meta<typeof VictoryArea> = {
   ...ComponentMeta,
@@ -33,7 +35,7 @@ export const PolarInterpolation: Story = {
             style={{ textAnchor: "middle" }}
             text={interpolation}
           />
-          <VictoryArea {...props} interpolation={interpolation} />
+          <VictoryArea {...props} interpolation={interpolation as InterpolationPropType} />
         </VictoryChart>
       ))}
     </>

diff --git a/stories/victory-charts/victory-area/styles.stories.tsx b/stories/victory-charts/victory-area/styles.stories.tsx
@@ -1,9 +1,15 @@
 import React from "react";
 import type { Meta } from "@storybook/react";
 
-import { VictoryArea, VictoryChart, VictoryTheme } from "@/victory";
-import { Story, ComponentMeta } from "./config";
+import {
+  VictoryArea,
+  VictoryChart,
+  VictoryLabelStyleObject,
+  VictoryTheme,
+} from "@/victory";
+
 import { getData } from "../../utils/data";
+import { Story, ComponentMeta } from "./config";
 
 const meta: Meta<typeof VictoryArea> = {
   ...ComponentMeta,

diff --git a/stories/victory-charts/victory-axis/config.ts b/stories/victory-charts/victory-axis/config.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { VictoryAxis } from "@/victory";
+import { VictoryAxis, VictoryAxisProps } from "@/victory";
 
 import {
   VictoryAxisCommonProps,
@@ -10,7 +10,7 @@ import {
 } from "../../utils/arg-types";
 import { componentContainer } from "../../utils/decorators";
 
-type StoryProps = React.ComponentProps<typeof VictoryAxis> & {
+type StoryProps = VictoryAxisProps & {
   themeKey: string;
 };
 

diff --git a/stories/victory-charts/victory-bar/config.ts b/stories/victory-charts/victory-bar/config.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { VictoryBar } from "@/victory";
+import { VictoryBar, VictoryBarProps } from "@/victory";
 
 import {
   VictoryCommonProps,
@@ -9,7 +9,7 @@ import {
 } from "../../utils/arg-types";
 import { componentContainer } from "../../utils/decorators";
 
-type StoryProps = React.ComponentProps<typeof VictoryBar> & {
+type StoryProps = VictoryBarProps & {
   themeKey: string;
 };
 

diff --git a/stories/victory-charts/victory-box-plot/config.ts b/stories/victory-charts/victory-box-plot/config.ts
@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { VictoryBoxPlot } from "@/victory";
+import { VictoryBoxPlot, VictoryBoxPlotProps } from "@/victory";
 
 import { VictoryCommonProps, VictoryDatableProps } from "../../utils/arg-types";
 import { componentContainer } from "../../utils/decorators";
 
-type StoryProps = React.ComponentProps<typeof VictoryBoxPlot> & {
+type StoryProps = VictoryBoxPlotProps & {
   themeKey: string;
 };
 

diff --git a/stories/victory-charts/victory-candlestick/config.ts b/stories/victory-charts/victory-candlestick/config.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { VictoryCandlestick } from "@/victory";
+import { VictoryCandlestick, VictoryCandlestickProps } from "@/victory";
 
 import {
   VictoryCommonProps,
@@ -9,7 +9,7 @@ import {
 } from "../../utils/arg-types";
 import { componentContainer } from "../../utils/decorators";
 
-type StoryProps = React.ComponentProps<typeof VictoryCandlestick> & {
+type StoryProps = VictoryCandlestickProps & {
   themeKey: string;
 };
 

diff --git a/stories/victory-charts/victory-candlestick/data.stories.tsx b/stories/victory-charts/victory-candlestick/data.stories.tsx
@@ -27,7 +27,7 @@ export const Data: Story = {
           ]}
           x="series"
           open="start"
-          high={(data) => data.big / 10}
+          high={(data: any) => data.big /10 }
         />
       </VictoryChart>
       <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
@@ -42,7 +42,7 @@ export const Data: Story = {
           ]}
           x="series"
           open="start"
-          high={(data) => data.big / 10}
+          high={(data: any) => data.big / 10}
         />
       </VictoryChart>
       <VictoryChart theme={VictoryTheme[props.themeKey]}>

diff --git a/stories/victory-charts/victory-chart/axes.stories.tsx b/stories/victory-charts/victory-chart/axes.stories.tsx
@@ -25,13 +25,6 @@ export const Axes: Story = {
         <VictoryAxis dependentAxis />
         <VictoryAxis dependentAxis orientation="right" />
       </VictoryChart>
-      <VictoryChart
-        {...props}
-        dependentAxis={{ orientation: "right" }}
-        theme={VictoryTheme[props.themeKey]}
-      >
-        <VictoryAxis dependentAxis />
-      </VictoryChart>
     </>
   ),
 };

diff --git a/stories/victory-charts/victory-chart/config.ts b/stories/victory-charts/victory-chart/config.ts
@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { VictoryChart } from "@/victory";
+import { VictoryChart, VictoryChartProps } from "@/victory";
 
 import { VictoryCommonProps } from "../../utils/arg-types";
 import { componentContainer } from "../../utils/decorators";
 
-type StoryProps = React.ComponentProps<typeof VictoryChart> & {
+type StoryProps = VictoryChartProps & {
   themeKey: string;
 };
 

diff --git a/stories/victory-charts/victory-chart/victory-zoom-container-default.stories.tsx b/stories/victory-charts/victory-chart/victory-zoom-container-default.stories.tsx
@@ -26,7 +26,6 @@ export const VictoryZoomContainerDefault: Story = {
         containerComponent={
           <VictoryZoomContainer
             zoomDomain={{ x: [new Date(1993, 1, 1), new Date(2005, 1, 1)] }}
-            dimension="x"
           />
         }
       >

diff --git a/stories/victory-charts/victory-container/config.ts b/stories/victory-charts/victory-container/config.ts
@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { VictoryContainer } from "@/victory";
+import { VictoryContainer, VictoryContainerProps } from "@/victory";
 
-import { VictoryContainerProps } from "../../utils/arg-types";
+import { VictoryContainerProps as ContainerArgTypes } from "../../utils/arg-types";
 import { componentContainer } from "../../utils/decorators";
 
-type StoryProps = React.ComponentProps<typeof VictoryContainer> & {
+type StoryProps = VictoryContainerProps & {
   themeKey: string;
 };
 
@@ -14,7 +14,7 @@ export const ComponentMeta: Meta<Omit<StoryProps, "themeKey">> = {
   decorators: [componentContainer],
 
   argTypes: {
-    ...VictoryContainerProps,
+    ...ContainerArgTypes,
   },
 };
 export type Story = StoryObj<StoryProps>;
diff --git a/stories/victory-charts/victory-errorbar/config.ts b/stories/victory-charts/victory-errorbar/config.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { VictoryErrorBar } from "@/victory";
+import { VictoryErrorBar, VictoryErrorBarProps } from "@/victory";
 
 import {
   VictoryCommonProps,
@@ -9,7 +9,7 @@ import {
 } from "../../utils/arg-types";
 import { componentContainer } from "../../utils/decorators";
 
-type StoryProps = React.ComponentProps<typeof VictoryErrorBar> & {
+type StoryProps = VictoryErrorBarProps & {
   themeKey: string;
 };
 

diff --git a/stories/victory-charts/victory-histogram/config.ts b/stories/victory-charts/victory-histogram/config.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { VictoryHistogram } from "@/victory";
+import { VictoryHistogram, VictoryHistogramProps } from "@/victory";
 
 import {
   VictoryCommonProps,
@@ -9,7 +9,7 @@ import {
 } from "../../utils/arg-types";
 import { componentContainer } from "../../utils/decorators";
 
-type StoryProps = React.ComponentProps<typeof VictoryHistogram> & {
+type StoryProps = VictoryHistogramProps & {
   themeKey: string;
 };
 

diff --git a/stories/victory-charts/victory-histogram/data.stories.tsx b/stories/victory-charts/victory-histogram/data.stories.tsx
@@ -54,13 +54,13 @@ export const Data: Story = {
             x={({ value }) => value}
           />
         </VictoryChart>
-        <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        {/* <VictoryChart theme={VictoryTheme[props.themeKey]}>
           <VictoryHistogram {...props}
             bins="year"
             data={timeData.map(({ x }) => ({ value: x }))}
             x={({ value }) => value}
           />
-        </VictoryChart>
+        </VictoryChart> */}
       </>
     );
   },

diff --git a/stories/victory-charts/victory-histogram/date-bins.stories.tsx b/stories/victory-charts/victory-histogram/date-bins.stories.tsx
@@ -17,7 +17,9 @@ const meta: Meta<typeof VictoryHistogram> = {
 export const DateBins: Story = {
   args: {},
   render: (props) => {
-    const niceTimeScale = d3Scale
+    // HACK: d3scale has a scaleTime function but the types
+    // are whack coming through the build
+    const niceTimeScale = (d3Scale as any)
       .scaleTime()
       .domain(d3Array.extent(timeData, ({ x }) => x))
       .nice();

diff --git a/stories/victory-charts/victory-histogram/get-path.stories.tsx b/stories/victory-charts/victory-histogram/get-path.stories.tsx
@@ -30,13 +30,16 @@ export const GetPath: Story = {
       z`;
     };
 
+    // TODO: revert this when the getPath types are fixed.
     return (
       <>
         <VictoryChart theme={VictoryTheme[props.themeKey]}>
-          <VictoryHistogram {...props} data={data} getPath={verticalPathFn} />
+          {/* <VictoryHistogram {...props} data={data} getPath={verticalPathFn} /> */}
+          <VictoryHistogram {...props} data={data} />
         </VictoryChart>
         <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal>
-          <VictoryHistogram {...props} data={data} getPath={horizontalPathFn} />
+          {/* <VictoryHistogram {...props} data={data} getPath={horizontalPathFn} /> */}
+          <VictoryHistogram {...props} data={data} />
         </VictoryChart>
       </>
     );

diff --git a/stories/victory-charts/victory-histogram/scale.stories.tsx b/stories/victory-charts/victory-histogram/scale.stories.tsx
@@ -15,40 +15,47 @@ export const Scale: Story = {
   args: {},
   render: (props) => (
     <>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} domainPadding={{ y: 25 }}>
-        <VictoryHistogram {...props}
+      <VictoryChart
+        theme={VictoryTheme[props.themeKey]}
+        domainPadding={{ y: 25 }}
+      >
+        <VictoryHistogram
+          {...props}
           binSpacing={10}
           data={timeData}
-          bins="year"
           labels={({ datum }) =>
             `${datum.x0.getFullYear()}\n|\n${datum.x1.getFullYear()}`
           }
         />
       </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]} horizontal domainPadding={{ y: 35 }}>
-        <VictoryHistogram {...props}
+      <VictoryChart
+        theme={VictoryTheme[props.themeKey]}
+        horizontal
+        domainPadding={{ y: 35 }}
+      >
+        <VictoryHistogram
+          {...props}
           binSpacing={10}
           data={timeData}
-          bins="year"
           labels={({ datum }) =>
             `${datum.x0.getFullYear()} - ${datum.x1.getFullYear()}`
           }
         />
       </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}
-
+      <VictoryChart
+        theme={VictoryTheme[props.themeKey]}
         scale={{ y: "log" }}
         minDomain={{ y: 1 }}
       >
-        <VictoryHistogram {...props} data={data}  />
+        <VictoryHistogram {...props} data={data} />
       </VictoryChart>
-      <VictoryChart theme={VictoryTheme[props.themeKey]}
-
+      <VictoryChart
+        theme={VictoryTheme[props.themeKey]}
         scale={{ y: "log" }}
         minDomain={{ y: 1 }}
         horizontal
       >
-        <VictoryHistogram {...props} data={data}  />
+        <VictoryHistogram {...props} data={data} />
       </VictoryChart>
     </>
   ),