Kill chart flakiness (#580)

factorialco · Sep 25, 2024 · 9e64cd8 · 9e64cd8
1 parent 9b03360
commit 9e64cd8
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 54 deletions.
diff --git a/lib/experimental/Widgets/Charts/AreaChartWidget/index.stories.tsx b/lib/experimental/Widgets/Charts/AreaChartWidget/index.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta } from "@storybook/react"
 import { AreaChartProps } from "@/components/Charts/AreaChart"
 import AreaChartStory from "@/components/Charts/AreaChart/index.stories"
 import { AreaChartWidget } from "."
-import { containerStoryArgs } from "../storybook-utils"
+import { containerStoryArgs, WidgetDecorator } from "../storybook-utils"
 
 const meta: Meta<typeof AreaChartWidget> = {
  component: AreaChartWidget,
@@ -29,13 +29,7 @@ const meta: Meta<typeof AreaChartWidget> = {
  },
  chart: AreaChartStory.args as AreaChartProps,
  },
- decorators: [
- (Story) => (
- <div className="w-full min-w-80">
- <Story />
- </div>
- ),
- ],
+ decorators: [WidgetDecorator],
 }
 
 export default meta

diff --git a/lib/experimental/Widgets/Charts/BarChartWidget/index.stories.tsx b/lib/experimental/Widgets/Charts/BarChartWidget/index.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta } from "@storybook/react"
 import { BarChartProps } from "@/components/Charts/BarChart"
 import BarChartStory from "@/components/Charts/BarChart/index.stories"
 import { BarChartWidget } from "."
-import { containerStoryArgs } from "../storybook-utils"
+import { containerStoryArgs, WidgetDecorator } from "../storybook-utils"
 
 const meta = {
  component: BarChartWidget,
@@ -19,13 +19,7 @@ const meta = {
  },
  chart: BarChartStory.args as BarChartProps,
  },
- decorators: [
- (Story) => (
- <div className="w-full min-w-80">
- <Story />
- </div>
- ),
- ],
+ decorators: [WidgetDecorator],
 } satisfies Meta<typeof BarChartWidget>
 
 export default meta

diff --git a/lib/experimental/Widgets/Charts/LineChartWidget/index.stories.tsx b/lib/experimental/Widgets/Charts/LineChartWidget/index.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta } from "@storybook/react"
 import AreaChartStory from "@/components/Charts/AreaChart/index.stories"
 import { LineChartProps } from "@/components/Charts/LineChart"
 import { LineChartWidget } from "."
-import { containerStoryArgs } from "../storybook-utils"
+import { containerStoryArgs, WidgetDecorator } from "../storybook-utils"
 
 const meta = {
  component: LineChartWidget,
@@ -19,13 +19,7 @@ const meta = {
  },
  chart: AreaChartStory.args as LineChartProps,
  },
- decorators: [
- (Story) => (
- <div className="w-full min-w-80">
- <Story />
- </div>
- ),
- ],
+ decorators: [WidgetDecorator],
 } satisfies Meta<typeof LineChartWidget>
 
 export default meta

diff --git a/lib/experimental/Widgets/Charts/PieChartWidget/index.stories.tsx b/lib/experimental/Widgets/Charts/PieChartWidget/index.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from "@storybook/react"
 
 import { PieChartWidget } from "."
-import { containerStoryArgs } from "../storybook-utils"
+import { containerStoryArgs, WidgetDecorator } from "../storybook-utils"
 
 const meta = {
  component: PieChartWidget,
@@ -47,13 +47,7 @@ const meta = {
  ],
  },
  },
- decorators: [
- (Story) => (
- <div className="w-full min-w-80">
- <Story />
- </div>
- ),
- ],
+ decorators: [WidgetDecorator],
 } satisfies Meta<typeof PieChartWidget>
 
 export default meta

diff --git a/lib/experimental/Widgets/Charts/RadialProgressWidget/index.stories.tsx b/lib/experimental/Widgets/Charts/RadialProgressWidget/index.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta } from "@storybook/react"
 import { RadialProgressWidget } from "."
+import { WidgetDecorator } from "../storybook-utils"
 
 const meta = {
  component: RadialProgressWidget,
@@ -20,13 +21,7 @@ const meta = {
  overview: { number: 75, label: "Completed" },
  },
  },
- decorators: [
- (Story) => (
- <div className="w-full min-w-80">
- <Story />
- </div>
- ),
- ],
+ decorators: [WidgetDecorator],
 } satisfies Meta<typeof RadialProgressWidget>
 
 export default meta

diff --git a/lib/experimental/Widgets/Charts/SummariesWidget/index.stories.tsx b/lib/experimental/Widgets/Charts/SummariesWidget/index.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta } from "@storybook/react"
 
 import { SummariesWidget } from "."
+import { WidgetDecorator } from "../storybook-utils"
 
 const meta = {
  component: SummariesWidget,
@@ -20,13 +21,7 @@ const meta = {
  },
  ],
  },
- decorators: [
- (Story) => (
- <div className="w-full min-w-80">
- <Story />
- </div>
- ),
- ],
+ decorators: [WidgetDecorator],
 } satisfies Meta<typeof SummariesWidget>
 
 export default meta

diff --git a/lib/experimental/Widgets/Charts/VerticalBarChartWidget/index.stories.tsx b/lib/experimental/Widgets/Charts/VerticalBarChartWidget/index.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta } from "@storybook/react"
 import { VerticalBarChartProps } from "@/components/Charts/VerticalBarChart"
 import BarChartStory from "@/components/Charts/VerticalBarChart/index.stories"
 import { VerticalBarChartWidget } from "."
-import { containerStoryArgs } from "../storybook-utils"
+import { containerStoryArgs, WidgetDecorator } from "../storybook-utils"
 
 const meta = {
  component: VerticalBarChartWidget,
@@ -19,13 +19,7 @@ const meta = {
  },
  chart: BarChartStory.args as VerticalBarChartProps,
  },
- decorators: [
- (Story) => (
- <div className="w-full min-w-80">
- <Story />
- </div>
- ),
- ],
+ decorators: [WidgetDecorator],
 } satisfies Meta<typeof VerticalBarChartWidget>
 
 export default meta

diff --git a/lib/experimental/Widgets/Charts/storybook-utils.tsx b/lib/experimental/Widgets/Charts/storybook-utils.tsx
@@ -3,4 +3,10 @@ import ContainerStory from "../Widget/index.stories"
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const { children, ...containerStoryArgs } = ContainerStory.args
 
+export const WidgetDecorator = (Story: React.ComponentType) => (
+ <div className="w-96">
+ <Story />
+ </div>
+)
+
 export { containerStoryArgs }