Refactor WorkspaceStatusBadge stories

BrunoQuaresma · BrunoQuaresma · commit 01259dbe0848 · 2023-09-07T13:58:39.000Z
diff --git a/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.stories.tsx b/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.stories.tsx
@@ -1,4 +1,3 @@
-import { Story } from "@storybook/react";
 import {
   MockCanceledWorkspace,
   MockCancelingWorkspace,
@@ -15,16 +14,9 @@ import {
   MockExperiments,
   MockAppearance,
 } from "testHelpers/entities";
-import {
-  WorkspaceStatusBadge,
-  WorkspaceStatusBadgeProps,
-} from "./WorkspaceStatusBadge";
+import { WorkspaceStatusBadge } from "./WorkspaceStatusBadge";
 import { DashboardProviderContext } from "components/Dashboard/DashboardProvider";
-
-export default {
-  title: "components/WorkspaceStatusBadge",
-  component: WorkspaceStatusBadge,
-};
+import type { Meta, StoryObj } from "@storybook/react";
 
 const MockedAppearance = {
   config: MockAppearance,
@@ -33,65 +25,84 @@ const MockedAppearance = {
   save: () => null,
 };
 
-const Template: Story<WorkspaceStatusBadgeProps> = (args) => (
-  <DashboardProviderContext.Provider
-    value={{
-      buildInfo: MockBuildInfo,
-      entitlements: MockEntitlementsWithScheduling,
-      experiments: MockExperiments,
-      appearance: MockedAppearance,
-    }}
-  >
-    <WorkspaceStatusBadge {...args} />
-  </DashboardProviderContext.Provider>
-);
+const meta: Meta<typeof WorkspaceStatusBadge> = {
+  title: "components/WorkspaceStatusBadge",
+  component: WorkspaceStatusBadge,
+  decorators: [
+    (Story) => (
+      <DashboardProviderContext.Provider
+        value={{
+          buildInfo: MockBuildInfo,
+          entitlements: MockEntitlementsWithScheduling,
+          experiments: MockExperiments,
+          appearance: MockedAppearance,
+        }}
+      >
+        <Story />
+      </DashboardProviderContext.Provider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof WorkspaceStatusBadge>;
 
-export const Running = Template.bind({});
-Running.args = {
-  workspace: MockWorkspace,
+export const Running: Story = {
+  args: {
+    workspace: MockWorkspace,
+  },
 };
 
-export const Starting = Template.bind({});
-Starting.args = {
-  workspace: MockStartingWorkspace,
+export const Starting: Story = {
+  args: {
+    workspace: MockStartingWorkspace,
+  },
 };
 
-export const Stopped = Template.bind({});
-Stopped.args = {
-  workspace: MockStoppedWorkspace,
+export const Stopped: Story = {
+  args: {
+    workspace: MockStoppedWorkspace,
+  },
 };
 
-export const Stopping = Template.bind({});
-Stopping.args = {
-  workspace: MockStoppingWorkspace,
+export const Stopping: Story = {
+  args: {
+    workspace: MockStoppingWorkspace,
+  },
 };
 
-export const Deleting = Template.bind({});
-Deleting.args = {
-  workspace: MockDeletingWorkspace,
+export const Deleting: Story = {
+  args: {
+    workspace: MockDeletingWorkspace,
+  },
 };
 
-export const Deleted = Template.bind({});
-Deleted.args = {
-  workspace: MockDeletedWorkspace,
+export const Deleted: Story = {
+  args: {
+    workspace: MockDeletedWorkspace,
+  },
 };
 
-export const Canceling = Template.bind({});
-Canceling.args = {
-  workspace: MockCancelingWorkspace,
+export const Canceling: Story = {
+  args: {
+    workspace: MockCancelingWorkspace,
+  },
 };
 
-export const Canceled = Template.bind({});
-Canceled.args = {
-  workspace: MockCanceledWorkspace,
+export const Canceled: Story = {
+  args: {
+    workspace: MockCanceledWorkspace,
+  },
 };
 
-export const Failed = Template.bind({});
-Failed.args = {
-  workspace: MockFailedWorkspace,
+export const Failed: Story = {
+  args: {
+    workspace: MockFailedWorkspace,
+  },
 };
 
-export const Pending = Template.bind({});
-Pending.args = {
-  workspace: MockPendingWorkspace,
+export const Pending: Story = {
+  args: {
+    workspace: MockPendingWorkspace,
+  },
 };
