update storybook files

fleetdm · Jan 15, 2025 · 02bb670 · 02bb670
1 parent fa5d394
commit 02bb670
Show file tree

Hide file tree

Showing 15 changed files with 203 additions and 265 deletions.
diff --git a/frontend/components/FlashMessage/FlashMessage.stories.tsx b/frontend/components/FlashMessage/FlashMessage.stories.tsx
@@ -1,14 +1,11 @@
 import React from "react";
-import { Meta, Story } from "@storybook/react";
-import { noop } from "lodash";
+import { Meta, StoryObj } from "@storybook/react";
 
 import FlashMessage from ".";
 
-import { IFlashMessage } from "./FlashMessage";
-
 import "../../index.scss";
 
-export default {
+const meta: Meta<typeof FlashMessage> = {
   component: FlashMessage,
   title: "Components/FlashMessage",
   argTypes: {
@@ -28,8 +25,10 @@ export default {
       isVisible: true,
     },
   },
-} as Meta;
+};
+
+export default meta;
 
-const Template: Story<IFlashMessage> = (props) => <FlashMessage {...props} />;
+type Story = StoryObj<typeof FlashMessage>;
 
-export const Default = Template.bind({});
+export const Default: Story = {};
diff --git a/frontend/components/FleetAce/FleetAce.stories.tsx b/frontend/components/FleetAce/FleetAce.stories.tsx
@@ -1,13 +1,12 @@
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { noop } from "lodash";
 
 import FleetAce from ".";
-import { IFleetAceProps } from "./FleetAce";
 
 import "../../index.scss";
 
-export default {
+const meta: Meta<typeof FleetAce> = {
   component: FleetAce,
   title: "Components/FleetAce",
   args: {
@@ -26,8 +25,10 @@ export default {
     onChange: noop,
     handleSubmit: noop,
   },
-} as Meta;
+};
 
-const Template: Story<IFleetAceProps> = (props) => <FleetAce {...props} />;
+export default meta;
 
-export const Default = Template.bind({});
+type Story = StoryObj<typeof FleetAce>;
+
+export const Default: Story = {};
diff --git a/frontend/components/InfoBanner/InfoBanner.stories.tsx b/frontend/components/InfoBanner/InfoBanner.stories.tsx
@@ -1,20 +1,21 @@
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import InfoBanner from ".";
-import { IInfoBannerProps } from "./InfoBanner";
 
 import "../../index.scss";
 
-export default {
+const meta: Meta<typeof InfoBanner> = {
   component: InfoBanner,
   title: "Components/InfoBanner",
-} as Meta;
+};
 
-const Template: Story<IInfoBannerProps> = (props) => (
-  <InfoBanner {...props}>
-    <div>This is an Info Banner.</div>
-  </InfoBanner>
-);
+export default meta;
 
-export const Default = Template.bind({});
+type Story = StoryObj<typeof InfoBanner>;
+
+export const Default: Story = {
+  args: {
+    children: <div>This is an Info Banner.</div>,
+  },
+};
diff --git a/frontend/components/Modal/Modal.stories.tsx b/frontend/components/Modal/Modal.stories.tsx
@@ -1,26 +1,34 @@
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { noop } from "lodash";
 
 import Modal from ".";
-import { IModalProps } from "./Modal";
 
 import "../../index.scss";
 
-export default {
+const meta: Meta<typeof Modal> = {
   component: Modal,
   title: "Components/Modal",
   args: {
     title: "Test modal",
     className: "",
     onExit: noop,
   },
-} as Meta;
+};
 
-const Template: Story<IModalProps> = (props) => (
-  <Modal {...props}>
-    <div>This is a test description with lots of information.</div>
-  </Modal>
-);
+export default meta;
 
-export const Default = Template.bind({});
+type Story = StoryObj<typeof Modal>;
+
+export const Default: Story = {
+  decorators: [
+    (Story) => (
+      <div style={{ height: "300px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    children: <div>This is a test description with lots of information.</div>,
+  },
+};
diff --git a/frontend/components/ModalFooter/ModalFooter.stories.tsx b/frontend/components/ModalFooter/ModalFooter.stories.tsx
@@ -1,63 +1,66 @@
 /* eslint-disable no-alert */
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import Button from "components/buttons/Button";
 import Icon from "components/Icon";
 import ActionsDropdown from "components/ActionsDropdown";
 import ModalFooter from "./ModalFooter";
 
-export default {
+const meta: Meta<typeof ModalFooter> = {
   title: "Components/ModalFooter",
   component: ModalFooter,
-} as Meta;
+};
+
+export default meta;
 
-const Template: Story = (args) => (
-  <ModalFooter primaryButtons={<></>} {...args} />
-);
+type Story = StoryObj<typeof ModalFooter>;
 
-export const Default = Template.bind({});
-Default.args = {
-  primaryButtons: (
-    <>
-      <ActionsDropdown
-        className="modal-footer__manage-automations-dropdown"
-        onChange={(value) => alert(`Selected action: ${value}`)}
-        placeholder="More actions"
-        isSearchable={false}
-        options={[
-          { value: "action1", label: "Action 1" },
-          { value: "action2", label: "Action 2" },
-        ]}
-        menuPlacement="top"
-      />
-      <Button onClick={() => alert("Done clicked")} variant="brand">
-        Done
-      </Button>
-    </>
-  ),
-  secondaryButtons: (
-    <>
-      <Button variant="icon" onClick={() => alert("Download clicked")}>
-        <Icon name="download" />
-      </Button>
-      <Button variant="icon" onClick={() => alert("Delete clicked")}>
-        <Icon name="trash" color="ui-fleet-black-75" />
-      </Button>
-    </>
-  ),
-  isTopScrolling: false,
+export const Default: Story = {
+  args: {
+    primaryButtons: (
+      <>
+        <ActionsDropdown
+          className="modal-footer__manage-automations-dropdown"
+          onChange={(value) => alert(`Selected action: ${value}`)}
+          placeholder="More actions"
+          isSearchable={false}
+          options={[
+            { value: "action1", label: "Action 1" },
+            { value: "action2", label: "Action 2" },
+          ]}
+          menuPlacement="top"
+        />
+        <Button onClick={() => alert("Done clicked")} variant="brand">
+          Done
+        </Button>
+      </>
+    ),
+    secondaryButtons: (
+      <>
+        <Button variant="icon" onClick={() => alert("Download clicked")}>
+          <Icon name="download" />
+        </Button>
+        <Button variant="icon" onClick={() => alert("Delete clicked")}>
+          <Icon name="trash" color="ui-fleet-black-75" />
+        </Button>
+      </>
+    ),
+    isTopScrolling: false,
+  },
 };
 
-export const WithTopScrolling = Template.bind({});
-WithTopScrolling.args = {
-  ...Default.args,
-  isTopScrolling: true,
+export const WithTopScrolling: Story = {
+  args: {
+    ...Default.args,
+    isTopScrolling: true,
+  },
 };
 
-export const WithoutSecondaryButtons = Template.bind({});
-WithoutSecondaryButtons.args = {
-  primaryButtons: Default.args.primaryButtons,
-  secondaryButtons: undefined,
-  isTopScrolling: false,
+export const WithoutSecondaryButtons: Story = {
+  args: {
+    primaryButtons: Default.args?.primaryButtons,
+    secondaryButtons: undefined,
+    isTopScrolling: false,
+  },
 };
diff --git a/frontend/components/Pagination/Pagination.stories.tsx b/frontend/components/Pagination/Pagination.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import { noop } from "lodash";
 
 // @ts-ignore
@@ -14,7 +14,7 @@ interface IPaginationProps {
   onPaginationChange: () => void;
 }
 
-export default {
+const meta: Meta<IPaginationProps> = {
   component: Pagination,
   title: "Components/Pagination",
   args: {
@@ -23,8 +23,12 @@ export default {
     resultsOnCurrentPage: 10,
     onPaginationChange: noop,
   },
-} as Meta;
+};
 
-const Template: Story<IPaginationProps> = (props) => <Pagination {...props} />;
+export default meta;
+
+const Template: StoryFn<IPaginationProps> = (props) => (
+  <Pagination {...props} />
+);
 
 export const Default = Template.bind({});
diff --git a/frontend/components/TooltipWrapper/TooltipWrapper.stories.tsx b/frontend/components/TooltipWrapper/TooltipWrapper.stories.tsx
@@ -1,21 +1,13 @@
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import TooltipWrapper from ".";
 
 import "../../index.scss";
 
-interface ITooltipWrapperProps {
-  children: React.ReactNode;
-  tipContent: React.ReactNode;
-}
-
-export default {
+const meta: Meta<typeof TooltipWrapper> = {
   component: TooltipWrapper,
   title: "Components/TooltipWrapper",
-  args: {
-    tipContent: "This is an example tooltip.",
-  },
   argTypes: {
     position: {
       options: [
@@ -35,21 +27,22 @@ export default {
       control: "radio",
     },
   },
-} as Meta;
+};
 
-// using line breaks to create space for top position
-const Template: Story<ITooltipWrapperProps> = (props) => (
-  <>
-    <br />
-    <br />
-    <br />
-    <br />
-    <TooltipWrapper {...props}>Example text</TooltipWrapper>
-    <br />
-    <br />
-    <br />
-    <br />
-  </>
-);
+export default meta;
 
-export const Default = Template.bind({});
+type Story = StoryObj<typeof TooltipWrapper>;
+
+export const Default: Story = {
+  args: {
+    tipContent: "This is an example tooltip.",
+    children: "Example text",
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ margin: "4rem 0" }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
diff --git a/frontend/components/buttons/Button/Button.stories.tsx b/frontend/components/buttons/Button/Button.stories.tsx
@@ -1,14 +1,14 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { noop } from "lodash";
 
 import Button from ".";
-import { IButtonProps } from "./Button";
 
 import "../../../index.scss";
 
-export default {
-  component: Button,
+const meta: Meta<typeof Button> = {
+  // TODO: change this after button is updated to a functional component. For
+  // some reason the typing is incorrect becuase Button is a class component.
+  component: Button as any,
   title: "Components/Button",
   argTypes: {
     variant: {
@@ -47,14 +47,23 @@ export default {
     title: "",
     onClick: noop,
   },
-} as Meta;
+};
 
-const Template: Story<IButtonProps> = (props) => (
-  <Button {...props}>Click Here</Button>
-);
+export default meta;
 
-export const Default = Template.bind({});
-Default.args = { variant: "brand", type: "button" };
+type Story = StoryObj<typeof Button>;
 
-export const Disabled = Template.bind({});
-Disabled.args = { ...Default.args, disabled: true };
+export const Default: Story = {
+  args: {
+    variant: "brand",
+    type: "button",
+    children: "Click Here",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    disabled: true,
+  },
+};