Add storybook

src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx

@@ -27,7 +27,7 @@ export interface FormData {
   }>;
 }
 
-export interface PageDetailsPageProps {
+export interface PluginsDetailsPageProps {
   disabled: boolean;
   errors: UserError[];
   plugin: FormData;
@@ -36,7 +36,7 @@ export interface PageDetailsPageProps {
   onSubmit: (data: FormData) => void;
 }
 
-const PageDetailsPage: React.StatelessComponent<PageDetailsPageProps> = ({
+const PluginsDetailsPage: React.StatelessComponent<PluginsDetailsPageProps> = ({
   disabled,
   errors,
   plugin,
@@ -124,5 +124,5 @@ const PageDetailsPage: React.StatelessComponent<PageDetailsPageProps> = ({
     </Form>
   );
 };
-PageDetailsPage.displayName = "PageDetailsPage";
-export default PageDetailsPage;
+PluginsDetailsPage.displayName = "PluginsDetailsPage";
+export default PluginsDetailsPage;

src/plugins/fixtures.ts

@@ -0,0 +1,56 @@
+import { PluginConfiguration_pluginConfiguration } from "./types/pluginConfiguration";
+import { PluginConfigurations_pluginConfigurations_edges_node } from "./types/pluginConfigurations";
+import { ConfigurationTypeFieldEnum } from "@saleor/types/globalTypes";
+
+export const pluginList: PluginConfigurations_pluginConfigurations_edges_node[] = [
+  {
+    __typename: "PluginConfiguration",
+    id: "Jzx123sEt==",
+    name: "Avalara",
+    description:
+      "Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.",
+    active: true
+  },
+  {
+    __typename: "PluginConfiguration",
+    id: "Jzx123sEt==",
+    name: "VatLayer",
+    description:
+      "Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.",
+    active: false
+  }
+];
+export const plugin: PluginConfiguration_pluginConfiguration = {
+  __typename: "PluginConfiguration",
+  id: "UGx1Z2luQ29uZmlndXJhdGlvbjoy",
+  name: "Username or account",
+  description:
+    "Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.",
+  active: true,
+  configuration: [
+    {
+      __typename: "ConfigurationItem",
+      name: "Username or account",
+      value: "",
+      type: ConfigurationTypeFieldEnum.STRING,
+      helpText: "Provide user or account details",
+      label: "Username or account"
+    },
+    {
+      __typename: "ConfigurationItem",
+      name: "Password or license",
+      value: "",
+      type: ConfigurationTypeFieldEnum.STRING,
+      helpText: "Provide password or license details",
+      label: "Password or license"
+    },
+    {
+      __typename: "ConfigurationItem",
+      name: "Use sandbox",
+      value: "true",
+      type: ConfigurationTypeFieldEnum.BOOLEAN,
+      helpText: "Determines if Saleor should use Avatax sandbox API.",
+      label: "Use sandbox"
+    }
+  ]
+};

src/storybook/config.js

@@ -101,6 +101,10 @@ function loadStories() {
   require("./stories/pages/PageDetailsPage");
   require("./stories/pages/PageListPage");
 
+  // Plugins
+  require("./stories/plugins/PluginDetailsPage");
+  require("./stories/plugins/PluginsListPage");
+
   // Products
   require("./stories/products/ProductCreatePage");
   require("./stories/products/ProductImagePage");

src/storybook/stories/plugins/PluginDetailsPage.tsx

@@ -0,0 +1,36 @@
+import { storiesOf } from "@storybook/react";
+import React from "react";
+
+import PluginsDetailsPage, {
+  FormData,
+  PluginsDetailsPageProps
+} from "../../../plugins/components/PluginsDetailsPage";
+import { plugin } from "../../../plugins/fixtures";
+import Decorator from "../../Decorator";
+import { formError } from "../../misc";
+
+const props: PluginsDetailsPageProps = {
+  disabled: false,
+  errors: [],
+  onSubmit: () => undefined,
+  onBack: () => undefined,
+  plugin,
+  saveButtonBarState: "default"
+};
+
+storiesOf("Views / Plugins / Plugin details", module)
+  .addDecorator(Decorator)
+  .add("default", () => <PluginsDetailsPage {...props} />)
+  .add("loading", () => (
+    <PluginsDetailsPage {...props} disabled={true} plugin={undefined} />
+  ))
+  .add("form errors", () => (
+    <PluginsDetailsPage
+      {...props}
+      errors={([
+        "active",
+        "Username or account",
+        "Password or license"
+      ] as Array<keyof FormData>).map(formError)}
+    />
+  ));

src/storybook/stories/plugins/PluginsListPage.tsx

@@ -0,0 +1,27 @@
+import { storiesOf } from "@storybook/react";
+import React from "react";
+
+import { pageListProps } from "../../../fixtures";
+import PluginsListPage, {
+  PluginsListPageProps
+} from "../../../plugins/components/PluginsListPage";
+import { pluginList } from "../../../plugins/fixtures";
+import Decorator from "../../Decorator";
+
+const props: PluginsListPageProps = {
+  ...pageListProps.default,
+  toggle: () => undefined,
+  toggleAll: () => undefined,
+  isChecked: () => undefined,
+  selected: undefined,
+  onBack: () => undefined,
+  plugins: pluginList
+};
+
+storiesOf("Views / Plugins / Plugin list", module)
+  .addDecorator(Decorator)
+  .add("default", () => <PluginsListPage {...props} />)
+  .add("loading", () => (
+    <PluginsListPage {...props} disabled={true} plugins={undefined} />
+  ))
+  .add("no data", () => <PluginsListPage {...props} plugins={[]} />);