From 89ed6393288585c526fd5fc5a9be0f956f0df449 Mon Sep 17 00:00:00 2001 From: Krzysztof Bialoglowicz Date: Wed, 28 Aug 2019 15:02:45 +0200 Subject: [PATCH] Add storybook --- .../PluginsDetailsPage/PluginsDetailsPage.tsx | 8 +-- src/plugins/fixtures.ts | 56 +++++++++++++++++++ src/storybook/config.js | 4 ++ .../stories/plugins/PluginDetailsPage.tsx | 36 ++++++++++++ .../stories/plugins/PluginsListPage.tsx | 27 +++++++++ 5 files changed, 127 insertions(+), 4 deletions(-) create mode 100644 src/plugins/fixtures.ts create mode 100644 src/storybook/stories/plugins/PluginDetailsPage.tsx create mode 100644 src/storybook/stories/plugins/PluginsListPage.tsx diff --git a/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx b/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx index 7867faca5..71512d8da 100644 --- a/src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx +++ b/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 = ({ +const PluginsDetailsPage: React.StatelessComponent = ({ disabled, errors, plugin, @@ -124,5 +124,5 @@ const PageDetailsPage: React.StatelessComponent = ({ ); }; -PageDetailsPage.displayName = "PageDetailsPage"; -export default PageDetailsPage; +PluginsDetailsPage.displayName = "PluginsDetailsPage"; +export default PluginsDetailsPage; diff --git a/src/plugins/fixtures.ts b/src/plugins/fixtures.ts new file mode 100644 index 000000000..b58634c4e --- /dev/null +++ b/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" + } + ] +}; diff --git a/src/storybook/config.js b/src/storybook/config.js index 48c108661..78aff494a 100644 --- a/src/storybook/config.js +++ b/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"); diff --git a/src/storybook/stories/plugins/PluginDetailsPage.tsx b/src/storybook/stories/plugins/PluginDetailsPage.tsx new file mode 100644 index 000000000..55e9fae65 --- /dev/null +++ b/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", () => ) + .add("loading", () => ( + + )) + .add("form errors", () => ( + ).map(formError)} + /> + )); diff --git a/src/storybook/stories/plugins/PluginsListPage.tsx b/src/storybook/stories/plugins/PluginsListPage.tsx new file mode 100644 index 000000000..b94c445b4 --- /dev/null +++ b/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", () => ) + .add("loading", () => ( + + )) + .add("no data", () => );