Fix types and warnings

FormidableLabs · Nov 7, 2024 · d404e6e · d404e6e
1 parent e040c83
commit d404e6e
Show file tree

Hide file tree

Showing 21 changed files with 99 additions and 143 deletions.
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -10,16 +10,6 @@ const preview: Preview = {
   },
   parameters: {
     controls: {
-      // exclude props where we can't render a workable
-      // control for changing the value
-      exclude: [
-        "containerComponent",
-        "dataComponent",
-        "groupComponent",
-        "labelComponent",
-        "labels",
-        "theme"
-      ],
       sort: 'alpha'
     },
   },

diff --git a/stories/utils/arg-types.ts → stories/utils/arg-types.tsx b/stories/utils/arg-types.ts → stories/utils/arg-types.tsx
@@ -1,22 +1,24 @@
-import { VictoryTheme } from "@/victory";
+import React from "react";
+
+import { VictoryLabel, VictoryTheme, VictoryTooltip } from "@/victory";
 
 export const VictoryAxisCommonProps = {
   dependentAxis: { control: "boolean" },
   invertAxis: { control: "boolean" },
   tickCount: { control: "number" },
 
-  // NOTE: controls not yet supported, but left for clarity
-  // axisComponent: { control: "text" },
-  // axisLabelComponent: { control: "text" },
-  // axisValue: { control: "text" },
-  // disableInlineStyles: { control: "text" },
-  // gridComponent: { control: "text" },
-  // style: { control: "text" },
-  // tickComponent: { control: "text" },
-  // tickFormat: { control: "text" },
-  // tickLabelComponent: { control: "text" },
-  // tickValues: { control: "text" },
-};
+  // disable changing these values
+  axisComponent: { control: false },
+  axisLabelComponent: { control: false },
+  axisValue: { control: false },
+  disableInlineStyles: { control: false },
+  gridComponent: { control: false },
+  style: { control: false },
+  tickComponent: { control: false },
+  tickFormat: { control: false },
+  tickLabelComponent: { control: false },
+  tickValues: { control: false },
+} as const;
 
 export const VictoryCommonThemeProps = {
   animate: { control: "boolean" },
@@ -40,27 +42,32 @@ export const VictoryCommonThemeProps = {
   padding: { control: "text" },
   polar: { control: "boolean" },
   standalone: { control: "boolean" },
-  theme: { control: "text" },
   width: { control: "number" },
 
-  // NOTE: controls not yet supported, but left for clarity
-  // containerComponent: { control: "text" },
-  // externalEventMutations: { control: "text" },
-  // domainPadding: { control: "text" },
-  // groupComponent: { control: "text" },
-  // maxDomain: { control: "number" },
-  // minDomain: { control: "number" },
-  // origin: { control: "text" },
-  // range: { control: "text" },
-  // scale: { control: "text" },
-  // sharedEvents: { control: "text" },
-  // singleQuadrantDomainPadding: { control: "text" },
-};
+  // disable changing these values
+  containerComponent: { control: false },
+  groupComponent: { control: false },
+  externalEventMutations: { control: false },
+  domainPadding: { control: false },
+  maxDomain: { control: false },
+  minDomain: { control: false },
+  origin: { control: false },
+  range: { control: false },
+  scale: { control: false },
+  sharedEvents: { control: false },
+  singleQuadrantDomainPadding: { control: false },
+} as const;
 
 export const VictoryCommonProps = {
   ...VictoryCommonThemeProps,
+
+  // disable changing these values
+  theme: { control: false },
+
+  // custom control to allow us to hoist the theme to the parent
+  // chart for better control of rendering
   themeKey: { control: "select", options: Object.keys(VictoryTheme) },
-};
+} as const;
 
 export const VictoryContainerProps = {
   "aria-describedby": { control: "text" },
@@ -81,39 +88,44 @@ export const VictoryContainerProps = {
   tabIndex: { control: "number" },
   title: { control: "text" },
   width: { control: "number" },
-};
+} as const;
 
 export const VictoryDatableProps = {
   data: { control: "object" },
   samples: { control: "number" },
   sortKey: { control: "text" },
   sortOrder: { control: "select", options: ["ascending", "descending"] },
 
-  // NOTE: controls not yet supported, but left for clarity
-  // categories: { control: "text" },
-  // dataComponent: { control: "text" },
-  // domain: { control: "text" },
-  // domainPadding: { control: "text" },
-  // x: { control: "text" },
-  // y: { control: "text" },
-  // y0: { control: "text" },
-};
+  // disable changing these values
+  categories: { control: false },
+  dataComponent: { control: false },
+  domain: { control: false },
+  domainPadding: { control: false },
+  x: { control: false },
+  y: { control: false },
+  y0: { control: false },
+} as const;
 
 export const VictoryLabelableProps = {
-  // NOTE: controls not yet supported, but left for clarity
-  // labelComponent: { control: "text" },
-};
+  labelComponent: {
+    options: ["Label", "Tooltip"],
+    mapping: {
+      Label: <VictoryLabel />,
+      Tooltip: <VictoryTooltip />,
+    },
+  },
+} as const;
 
 export const VictoryMultiLabelableProps = {
   ...VictoryLabelableProps,
 
   // NOTE: controls not yet supported, but left for clarity
   // labels: { control: "text" },
-};
+} as const;
 
 export const VictorySingleLabelableProps = {
   ...VictoryLabelableProps,
 
   // NOTE: controls not yet supported, but left for clarity
   // label: { control: "text" },
-};
+} as const;
diff --git a/stories/victory-charts/victory-animation/config.ts b/stories/victory-charts/victory-animation/config.ts
@@ -3,9 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { VictoryAnimation } from "@/victory";
 import { componentContainer } from "../../utils/decorators";
 
-type StoryProps = React.ComponentProps<typeof VictoryAnimation> & {
-  themeKey: string;
-};
+type StoryProps = React.ComponentProps<typeof VictoryAnimation>;
 
 export const ComponentMeta: Meta<StoryProps> = {
   component: VictoryAnimation,
@@ -14,7 +12,7 @@ export const ComponentMeta: Meta<StoryProps> = {
   argTypes: {
     delay: { control: "number" },
     duration: { control: "number" },
-    easing: { control: "string" },
+    easing: { control: "text" },
   },
 };
 

diff --git a/stories/victory-charts/victory-animation/default.stories.tsx b/stories/victory-charts/victory-animation/default.stories.tsx
@@ -49,7 +49,7 @@ export const Default: Story = {
 
       // clean up interval on unmount
       return () => clearInterval(interval);
-    }, [percent]);
+    }, [data, percent]);
 
     return (
       <div>
@@ -72,7 +72,7 @@ export const Default: Story = {
               },
             }}
           />
-          <VictoryAnimation duration={1000} data={{ percent }}>
+          <VictoryAnimation {...props} data={{ percent }}>
             {(newProps) => {
               return (
                 <VictoryLabel

diff --git a/stories/victory-charts/victory-area/config.ts b/stories/victory-charts/victory-area/config.ts
@@ -13,7 +13,7 @@ type StoryProps = React.ComponentProps<typeof VictoryArea> & {
   themeKey: string;
 };
 
-export const ComponentMeta: Meta<StoryProps> = {
+export const ComponentMeta: Meta<Omit<StoryProps, "themeKey">> = {
   component: VictoryArea,
   decorators: [componentContainer],
 

diff --git a/stories/victory-charts/victory-axis/config.ts b/stories/victory-charts/victory-axis/config.ts
@@ -16,7 +16,7 @@ type StoryProps = React.ComponentProps<typeof VictoryAxis> & {
 
 export type Story = StoryObj<StoryProps>;
 
-export const ComponentMeta: Meta<StoryProps> = {
+export const ComponentMeta: Meta<Omit<StoryProps, "themeKey">> = {
   component: VictoryAxis,
   decorators: [componentContainer],
 

diff --git a/stories/victory-charts/victory-bar/config.ts b/stories/victory-charts/victory-bar/config.ts
@@ -13,7 +13,7 @@ type StoryProps = React.ComponentProps<typeof VictoryBar> & {
   themeKey: string;
 };
 
-export const ComponentMeta: Meta<StoryProps> = {
+export const ComponentMeta: Meta<Omit<StoryProps, "themeKey">> = {
   component: VictoryBar,
   decorators: [componentContainer],
 

diff --git a/stories/victory-charts/victory-box-plot/config.ts b/stories/victory-charts/victory-box-plot/config.ts
@@ -9,28 +9,28 @@ type StoryProps = React.ComponentProps<typeof VictoryBoxPlot> & {
   themeKey: string;
 };
 
-export const ComponentMeta: Meta<StoryProps> = {
+export const ComponentMeta: Meta<Omit<StoryProps, "themeKey">> = {
   component: VictoryBoxPlot,
   decorators: [componentContainer],
 
   argTypes: {
     ...VictoryCommonProps,
     ...VictoryDatableProps,
-  },
 
-  boxWidth: { control: "number" },
-  labels: { control: "boolean" },
-  max: { control: "string" },
-  maxLabels: { control: "boolean" },
-  median: { control: "string" },
-  medianLabels: { control: "boolean" },
-  min: { control: "string" },
-  minLabels: { control: "boolean" },
-  q1: { control: "string" },
-  q1Labels: { control: "boolean" },
-  q3: { control: "string" },
-  q3Labels: { control: "boolean" },
-  whiskerWidth: { control: "number" },
+    boxWidth: { control: "number" },
+    labels: { control: "boolean" },
+    max: { control: "text" },
+    maxLabels: { control: "boolean" },
+    median: { control: "text" },
+    medianLabels: { control: "boolean" },
+    min: { control: "text" },
+    minLabels: { control: "boolean" },
+    q1: { control: "text" },
+    q1Labels: { control: "boolean" },
+    q3: { control: "text" },
+    q3Labels: { control: "boolean" },
+    whiskerWidth: { control: "number" },
+  },
 };
 
 export type Story = StoryObj<StoryProps>;
diff --git a/stories/victory-charts/victory-candlestick/config.ts b/stories/victory-charts/victory-candlestick/config.ts
@@ -13,7 +13,7 @@ type StoryProps = React.ComponentProps<typeof VictoryCandlestick> & {
   themeKey: string;
 };
 
-export const ComponentMeta: Meta<StoryProps> = {
+export const ComponentMeta: Meta<Omit<StoryProps, "themeKey">> = {
   component: VictoryCandlestick,
   decorators: [componentContainer],
 
@@ -24,13 +24,13 @@ export const ComponentMeta: Meta<StoryProps> = {
 
     candleRatio: { control: "boolean" },
     candleWidth: { control: "number" },
-    close: { control: "string" },
+    close: { control: "text" },
     closeLabels: { control: "boolean" },
-    high: { control: "string" },
+    high: { control: "text" },
     highLabels: { control: "boolean" },
-    low: { control: "string" },
+    low: { control: "text" },
     lowLabels: { control: "boolean" },
-    open: { control: "string" },
+    open: { control: "text" },
     openLabels: { control: "boolean" },
     wickStrokeWidth: { control: "number" },
   },

diff --git a/stories/victory-charts/victory-chart/config.ts b/stories/victory-charts/victory-chart/config.ts
@@ -9,19 +9,19 @@ type StoryProps = React.ComponentProps<typeof VictoryChart> & {
   themeKey: string;
 };
 
-export const ComponentMeta: Meta<StoryProps> = {
+export const ComponentMeta: Meta<Omit<StoryProps, "themeKey">> = {
   component: VictoryChart,
   decorators: [componentContainer],
 
   argTypes: {
     ...VictoryCommonProps,
 
-    desc: { control: "string" },
+    desc: { control: "text" },
     endAngle: { control: "number" },
     innerRadius: { control: "number" },
     prependDefaultAxes: { control: "boolean" },
     startAngle: { control: "number" },
-    title: { control: "string" },
+    title: { control: "text" },
   },
 };
 

diff --git a/stories/victory-charts/victory-container/config.ts b/stories/victory-charts/victory-container/config.ts
@@ -9,7 +9,7 @@ type StoryProps = React.ComponentProps<typeof VictoryContainer> & {
   themeKey: string;
 };
 
-export const ComponentMeta: Meta<StoryProps> = {
+export const ComponentMeta: Meta<Omit<StoryProps, "themeKey">> = {
   component: VictoryContainer,
   decorators: [componentContainer],
 

diff --git a/stories/victory-charts/victory-errorbar/config.ts b/stories/victory-charts/victory-errorbar/config.ts
@@ -13,7 +13,7 @@ type StoryProps = React.ComponentProps<typeof VictoryErrorBar> & {
   themeKey: string;
 };
 
-export const ComponentMeta: Meta<StoryProps> = {
+export const ComponentMeta: Meta<Omit<StoryProps, "themeKey">> = {
   component: VictoryErrorBar,
   decorators: [componentContainer],
 

diff --git a/stories/victory-charts/victory-histogram/config.ts b/stories/victory-charts/victory-histogram/config.ts
@@ -13,7 +13,7 @@ type StoryProps = React.ComponentProps<typeof VictoryHistogram> & {
   themeKey: string;
 };
 
-export const ComponentMeta: Meta<StoryProps> = {
+export const ComponentMeta: Meta<Omit<StoryProps, "themeKey">> = {
   component: VictoryHistogram,
   decorators: [componentContainer],
 

diff --git a/stories/victory-charts/victory-label/config.ts b/stories/victory-charts/victory-label/config.ts
@@ -1,23 +1,20 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { VictoryLabel } from "@/victory";
+import { VictoryLabel, VictoryScatterProps } from "@/victory";
 import { componentContainer } from "../../utils/decorators";
 
 type StoryProps = React.ComponentProps<typeof VictoryLabel>;
 
-export const ComponentMeta: Meta<StoryProps> = {
+export const ComponentMeta: Meta<Omit<StoryProps, "themeKey">> = {
   component: VictoryLabel,
   decorators: [componentContainer],
 
   argTypes: {
-    active: { control: "boolean" },
     angle: { control: "number" },
     capHeight: { control: "number" },
     className: { control: "text" },
     desc: { control: "text" },
     direction: { control: "select", options: ["inherit", "rtl", "ltr"] },
-    height: { control: "number" },
-    index: { control: "number" },
     id: { control: "text" },
     inline: { control: "boolean" },
     labelPlacement: {
@@ -38,7 +35,6 @@ export const ComponentMeta: Meta<StoryProps> = {
       control: "select",
       options: ["inherit", "start", "middle", "end"],
     },
-    width: { control: "number" },
   },
 };
 

diff --git a/stories/victory-charts/victory-legend/config.ts b/stories/victory-charts/victory-legend/config.ts
@@ -13,7 +13,7 @@ type StoryProps = React.ComponentProps<typeof VictoryLegend> & {
   themeKey: string;
 };
 
-export const ComponentMeta: Meta<StoryProps> = {
+export const ComponentMeta: Meta<Omit<StoryProps, "themeKey">> = {
   component: VictoryLegend,
   decorators: [componentContainer],