add components to storybook (#11500)

frontend/components/Avatar/Avatar.stories.tsx

@@ -1,21 +1,25 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import { DEFAULT_GRAVATAR_LINK } from "utilities/constants";
 
 import Avatar from ".";
 
-// import "./_styles.scss";
-import "../../index.scss";
-
-export default {
+const meta: Meta<typeof Avatar> = {
   component: Avatar,
   title: "Components/Avatar",
-} as Meta;
+  args: {
+    user: { gravatar_url: DEFAULT_GRAVATAR_LINK },
+  },
+};
 
-export const Default: Story = () => (
-  <Avatar user={{ gravatar_url: DEFAULT_GRAVATAR_LINK }} />
-);
-export const Small: Story = () => (
-  <Avatar user={{ gravatar_url: DEFAULT_GRAVATAR_LINK }} size="small" />
-);
+export default meta;
+
+type Story = StoryObj<typeof Avatar>;
+
+export const Default: Story = {};
+
+export const Small: Story = {
+  args: {
+    size: "small",
+  },
+};

frontend/components/BackLink/BackLink.stories.tsx

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import BackLink from "./BackLink";
+
+const meta: Meta<typeof BackLink> = {
+  title: "Components/BackLink",
+  component: BackLink,
+  args: {
+    text: "Back",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BackLink>;
+
+export const Basic: Story = {};

frontend/components/CustomLink/CustomLink.stories.tsx

@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import CustomLink from ".";
+
+const meta: Meta<typeof CustomLink> = {
+  title: "Components/CustomLink",
+  component: CustomLink,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CustomLink>;
+
+export const Basic: Story = {
+  args: {
+    url: "https://www.google.com",
+    text: "Test Link",
+  },
+};
+
+export const ExternalLink: Story = {
+  args: {
+    ...Basic.args,
+    newTab: true,
+  },
+};

frontend/components/DataError/DataError.stories.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+
+import DataError from "./DataError";
+
+const meta: Meta<typeof DataError> = {
+  title: "Components/DataError",
+  component: DataError,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DataError>;
+
+export const Basic: Story = {};
+
+export const WithChildren: Story = {
+  args: {
+    children: <p>this is custom JSX</p>,
+  },
+};

frontend/components/DeviceUserError/DeviceUserError.stories.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+
+import DeviceUserError from "./DeviceUserError";
+
+const meta: Meta<typeof DeviceUserError> = {
+  title: "Components/DeviceUserError",
+  component: DeviceUserError,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DeviceUserError>;
+
+export const Basic: Story = {};

frontend/components/DiskSpaceGraph/DiskSpaceGraph.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import DiskSpaceGraph from "./DiskSpaceGraph";
+
+const meta: Meta<typeof DiskSpaceGraph> = {
+  title: "Components/DiskSpaceGraph",
+  component: DiskSpaceGraph,
+  args: {
+    baseClass: "disk-space-graph",
+    gigsDiskSpaceAvailable: 100,
+    percentDiskSpaceAvailable: 75,
+    id: "disk-space-graph",
+    platform: "darwin",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DiskSpaceGraph>;
+
+export const Basic: Story = {};

frontend/components/EmptyTable/EmptyTable.stories.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Button from "components/buttons/Button";
+import EmptyTable from "./EmptyTable";
+
+const meta: Meta<typeof EmptyTable> = {
+  title: "Components/EmptyTable",
+  component: EmptyTable,
+  argTypes: {
+    className: {
+      control: "text",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof EmptyTable>;
+
+export const Basic: Story = {
+  args: {
+    header: "No Data",
+    info: "There is no data to display.",
+    iconName: "alert",
+  },
+};
+
+export const WithAdditionalInfo: Story = {
+  args: {
+    ...Basic.args,
+    additionalInfo: "You can add additional info here.",
+  },
+};
+
+export const WithPrimaryButton: Story = {
+  args: {
+    ...WithAdditionalInfo.args,
+    primaryButton: <Button>ok</Button>,
+  },
+};
+
+export const WithSecondaryButton: Story = {
+  args: {
+    ...WithPrimaryButton.args,
+    secondaryButton: <Button>cancel</Button>,
+  },
+};

frontend/components/EmptyTable/EmptyTable.tsx

@@ -1,10 +1,20 @@
 import React from "react";
 import classnames from "classnames";
 import Icon from "components/Icon";
-import { IEmptyTableProps } from "interfaces/empty_table";
+import { IconNames } from "components/icons";
 
 const baseClass = "empty-table";
 
+export interface IEmptyTableProps {
+  header?: JSX.Element | string;
+  info?: JSX.Element | string;
+  additionalInfo?: JSX.Element | string;
+  iconName?: IconNames;
+  primaryButton?: JSX.Element;
+  secondaryButton?: JSX.Element;
+  className?: string;
+}
+
 const EmptyTable = ({
   iconName,
   header,

frontend/components/EnrollSecrets/SecretField/SecretField.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import SecretField from ".";
+
+const meta: Meta<typeof SecretField> = {
+  title: "Components/SecretField",
+  component: SecretField,
+  args: { secret: "secret" },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SecretField>;
+
+export const Basic: Story = {};

frontend/components/FleetMarkdown/FleetMarkdown.stories.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+
+import FleetMarkdown from "./FleetMarkdown";
+
+const TestMarkdown = `
+# Test Markdown
+
+## This is a heading
+
+### This is a subheading
+
+#### This is a subsubheading
+
+
+---
+**bold**
+
+*italic*
+
+[test link](https://www.fleetdm.com)
+
+- test list item 1
+- test list item 2
+- test list item 3
+
+> test blockquote
+
+\`code text\`
+`;
+
+const meta: Meta<typeof FleetMarkdown> = {
+  title: "Components/FleetMarkdown",
+  component: FleetMarkdown,
+  args: { markdown: TestMarkdown },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FleetMarkdown>;
+
+export const Basic: Story = {};

frontend/components/HumanTimeDiffWithDateTip/HumanTimeDiffWithDateTip.stories.tsx

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import HumanTimeDiffWithDateTip from "./HumanTimeDiffWithDateTip";
+
+const meta: Meta<typeof HumanTimeDiffWithDateTip> = {
+  title: "Components/HumanTimeDiffWithDateTip",
+  component: HumanTimeDiffWithDateTip,
+  args: {
+    timeString: "2021-01-01T00:00:00.000Z",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof HumanTimeDiffWithDateTip>;
+
+export const Basic: Story = {};

frontend/components/Icon/Icon.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import Icon from ".";
+
+const meta: Meta<typeof Icon> = {
+  title: "Components/Icon",
+  component: Icon,
+  args: { name: "plus" },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Icon>;
+
+export const Basic: Story = {};

frontend/components/LastUpdatedText/LastUpdatedText.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import LastUpdatedText from "./LastUpdatedText";
+
+const meta: Meta<typeof LastUpdatedText> = {
+  title: "Components/LastUpdatedText",
+  component: LastUpdatedText,
+  args: {
+    whatToRetrieve: "apples",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LastUpdatedText>;
+
+export const Basic: Story = {};
+
+export const withLastUpdatedAt: Story = {
+  args: {
+    lastUpdatedAt: "2021-01-01T00:00:00Z",
+  },
+};

frontend/components/LastUpdatedText/LastUpdatedText.tests.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { render, screen } from "@testing-library/react";
 import { renderWithSetup } from "test/test-utils";
 
-import LastUpdatedText from "./LastUpdatedText";
+import LastUpdatedText from ".";
 
 describe("Last updated text", () => {
   it("renders updated text", () => {

frontend/components/LinkWithContext/LinkWithContext.stories.tsx

@@ -0,0 +1,27 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import LinkWithContext from "./LinkWithContext";
+
+const meta: Meta<typeof LinkWithContext> = {
+  title: "Components/LinkWithContext",
+  component: LinkWithContext,
+  args: {
+    className: "link-with-context",
+    children: "Link with context",
+    to: "/",
+    withParams: {
+      type: "query",
+      names: ["apples", "bananas"],
+    },
+    currentQueryParams: {
+      apples: "1",
+      bananas: "2",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LinkWithContext>;
+
+export const Basic: Story = {};

frontend/components/PlatformSelector/PlatformSelector.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { noop } from "lodash";
+
+import PlatformSelector from "./PlatformSelector";
+
+const meta: Meta<typeof PlatformSelector> = {
+  title: "Components/PlatformSelector",
+  component: PlatformSelector,
+  args: {
+    checkDarwin: true,
+    checkWindows: true,
+    checkLinux: false,
+    setCheckDarwin: noop,
+    setCheckWindows: noop,
+    setCheckLinux: noop,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof PlatformSelector>;
+
+export const Basic: Story = {};

frontend/components/PremiumFeatureIconWithTooltip/PremiumFeatureIconWithToooltip.stories.tsx

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import PremiumFeatureIconWithTooltip from "./PremiumFeatureIconWithTooltip";
+
+const meta: Meta<typeof PremiumFeatureIconWithTooltip> = {
+  title: "Components/PremiumFeatureIconWithTooltip",
+  component: PremiumFeatureIconWithTooltip,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof PremiumFeatureIconWithTooltip>;
+
+export const Basic: Story = {};

frontend/components/PremiumFeatureMessage/PremiumFeatureMessage.stories.tsx

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import PremiumFeatureMessage from "./PremiumFeatureMessage";
+
+const meta: Meta<typeof PremiumFeatureMessage> = {
+  title: "Components/PremiumFeatureMessage",
+  component: PremiumFeatureMessage,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof PremiumFeatureMessage>;
+
+export const Basic: Story = {};

frontend/components/Spinner/Spinner.stories.tsx

@@ -1,18 +1,46 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import Spinner from ".";
 
 import "../../index.scss";
 
-export default {
+const meta: Meta<typeof Spinner> = {
   component: Spinner,
   title: "Components/Spinner",
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Spinner>;
+
+export const SpinnerDefault: Story = {};
+
+export const SpinnerSmall: Story = {
   args: {
-    isInButton: false,
+    small: true,
   },
-} as Meta;
+};
 
-const Template: Story = (props) => <Spinner {...props} />;
+export const SpinnerButton: Story = {
+  args: {
+    button: true,
+  },
+};
 
-export const Default = Template.bind({});
+export const SpinnerWhite: Story = {
+  args: {
+    white: true,
+  },
+};
+
+export const SpinnerSize: Story = {
+  argTypes: {
+    size: {
+      options: ["x-small", "small", "medium"],
+      control: {
+        type: "select",
+        default: "medium",
+      },
+    },
+  },
+};

frontend/components/StatusIndicator/StatusIndicator.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import StatusIndicator from "./StatusIndicator";
+
+const meta: Meta<typeof StatusIndicator> = {
+  title: "Components/StatusIndicator",
+  component: StatusIndicator,
+  args: {
+    value: "100",
+    tooltip: {
+      id: 1,
+      tooltipText: "Tooltip text",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof StatusIndicator>;
+
+export const Basic: Story = {};

frontend/components/StatusIndicatorWithIcon/StatusIndicatorWithIcon.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import StatusIndicatorWithIcon from "./StatusIndicatorWithIcon";
+
+const meta: Meta<typeof StatusIndicatorWithIcon> = {
+  title: "Components/StatusIndicatorWithIcon",
+  component: StatusIndicatorWithIcon,
+  args: {
+    status: "success",
+    value: "100",
+    tooltip: {
+      tooltipText: "Tooltip text",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof StatusIndicatorWithIcon>;
+
+export const Basic: Story = {};

frontend/components/TeamsDropdown/TeamsDropdown.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { noop } from "lodash";
+
+import TeamsDropdown from ".";
+
+const meta: Meta<typeof TeamsDropdown> = {
+  title: "Components/TeamsDropdown",
+  component: TeamsDropdown,
+  args: {
+    currentUserTeams: [
+      { id: 1, name: "Team 1" },
+      { id: 2, name: "Team 2" },
+    ],
+    onChange: noop,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TeamsDropdown>;
+
+export const Basic: Story = {};

frontend/components/YamlAce/YamlAce.stories.tsx

@@ -0,0 +1,38 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { noop } from "lodash";
+
+// @ts-ignore
+import YamlAce from ".";
+
+const TEST_YAML = `apiVersion: v1
+kind: Pod
+metadata:
+  name: my-pod
+spec:
+  containers:
+    - name: my-container # comment
+      image: nginx:1.14.2
+      ports:
+        - containerPort: 80
+`;
+
+const meta: Meta<typeof YamlAce> = {
+  title: "Components/YamlAce",
+  component: YamlAce,
+  args: {
+    value: TEST_YAML,
+    onChange: noop,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof YamlAce>;
+
+export const Basic: Story = {};
+
+export const WithError: Story = {
+  args: {
+    error: "This is an error",
+  },
+};

frontend/components/forms/fields/Checkbox/Checkbox.stories.tsx

@@ -1,27 +1,21 @@
 import React from "react";
-import { Meta, Story } from "@storybook/react";
-import { noop } from "lodash";
+import { Meta, StoryObj } from "@storybook/react";
 
 import Checkbox from ".";
 
-import { ICheckboxProps } from "./Checkbox";
-
-import "../../../../index.scss";
-
-export default {
+const meta: Meta<typeof Checkbox> = {
   component: Checkbox,
   title: "Components/FormFields/Checkbox",
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Checkbox>;
+
+export const Basic: Story = {};
+
+export const WithLabel: Story = {
   args: {
-    value: false,
-    disabled: false,
-    indeterminate: false,
-    className: "",
-    name: "",
-    wrapperClassName: "",
-    onChange: noop,
+    children: <b>Label</b>,
   },
-} as Meta;
-
-const Template: Story<ICheckboxProps> = (props) => <Checkbox {...props} />;
-
-export const Default = Template.bind({});
+};

frontend/components/forms/fields/InputField/InputField.stories.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+
+import InputField from ".";
+
+const meta = {
+  component: InputField,
+  title: "Components/FormFields/InputField",
+};
+
+export default meta;
+
+export const Basic = {};