From 66f582d51920176656c2a5616dbd5110700776b8 Mon Sep 17 00:00:00 2001
From: Abhinav Jha <abhinav@appsmith.com>
Date: Thu, 27 Feb 2020 08:37:30 +0000
Subject: [PATCH] Storybook

---
 .../editorComponents/form/FormMessage.tsx     |  4 +-
 app/client/src/stories/Button.stories.tsx     | 45 +++++++++++++
 .../src/stories/FormMessage.stories.tsx       | 65 +++++++++++++++++++
 .../src/stories/TagListInput.stories.tsx      | 31 ++++++---
 app/client/src/stories/TextInput.stories.tsx  | 32 ++++++---
 5 files changed, 155 insertions(+), 22 deletions(-)
 create mode 100644 app/client/src/stories/Button.stories.tsx
 create mode 100644 app/client/src/stories/FormMessage.stories.tsx

diff --git a/app/client/src/components/editorComponents/form/FormMessage.tsx b/app/client/src/components/editorComponents/form/FormMessage.tsx
index 0020acc8dd..92675fcb02 100644
--- a/app/client/src/components/editorComponents/form/FormMessage.tsx
+++ b/app/client/src/components/editorComponents/form/FormMessage.tsx
@@ -59,7 +59,7 @@ const MessageContainer = styled.div<{ iconbgcolor: string }>`
   }
 `;
 
-const ActionsContainer = styled.div`
+export const ActionsContainer = styled.div`
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -72,7 +72,7 @@ const ActionsContainer = styled.div`
   }
 `;
 
-const ActionButton = (props: MessageAction) => {
+export const ActionButton = (props: MessageAction) => {
   if (props.url) {
     return (
       <Button
diff --git a/app/client/src/stories/Button.stories.tsx b/app/client/src/stories/Button.stories.tsx
new file mode 100644
index 0000000000..97302694d4
--- /dev/null
+++ b/app/client/src/stories/Button.stories.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import Button from "components/editorComponents/Button";
+import { withKnobs, text, boolean, select } from "@storybook/addon-knobs";
+import Centered from "components/designSystems/appsmith/CenteredWrapper";
+import { withDesign } from "storybook-addon-designs";
+import { IntentColors } from "constants/DefaultTheme";
+import { Directions } from "utils/helpers";
+import { IconNames } from "@blueprintjs/icons";
+
+export default {
+  title: "Button",
+  component: Button,
+  decorators: [withKnobs, withDesign],
+};
+
+const Intents = Object.keys(IntentColors);
+const IconDirections = Object.values(Directions);
+const iconNames = Object.values({ ...IconNames });
+iconNames.unshift();
+
+export const withDynamicProps = () => (
+  <Centered style={{ height: "100vh" }}>
+    <div
+      style={{
+        width: "500px",
+        background: "white",
+        height: "300px",
+        padding: "20px",
+      }}
+    >
+      <Button
+        intent={select("Intent", Intents, "primary")}
+        text={text("Button Text", "Button")}
+        outline={boolean("Show outline?", false)}
+        filled={boolean("Fill with intent color?", true)}
+        loading={boolean("Is loading?", false)}
+        disabled={boolean("Is disabled?", false)}
+        size={select("Button size", ["large", "small"], undefined)}
+        type={select("Button type", ["button", "submit", "reset"], "button")}
+        iconAlignment={select("Icon alignment", IconDirections, "right")}
+        icon={select("Icon", iconNames, "chevron-down")}
+      />
+    </div>
+  </Centered>
+);
diff --git a/app/client/src/stories/FormMessage.stories.tsx b/app/client/src/stories/FormMessage.stories.tsx
new file mode 100644
index 0000000000..39712bbca8
--- /dev/null
+++ b/app/client/src/stories/FormMessage.stories.tsx
@@ -0,0 +1,65 @@
+import React from "react";
+import FormMessage, {
+  MessageAction,
+  ActionsContainer,
+  ActionButton,
+} from "components/editorComponents/form/FormMessage";
+import { withKnobs, text, select } from "@storybook/addon-knobs";
+import Centered from "components/designSystems/appsmith/CenteredWrapper";
+import { withDesign } from "storybook-addon-designs";
+import { IntentColors } from "constants/DefaultTheme";
+import _ from "lodash";
+
+export default {
+  title: "Form Message",
+  component: FormMessage,
+  decorators: [withKnobs, withDesign],
+};
+
+const Intents = Object.keys(IntentColors);
+const actions: MessageAction[] = [
+  {
+    url: "#",
+    onClick: _.noop,
+    text: "Action",
+    intent: "primary",
+  },
+];
+export const withDynamicProps = () => (
+  <Centered style={{ height: "100vh" }}>
+    <div
+      style={{
+        width: "500px",
+        background: "white",
+        height: "300px",
+        padding: "20px",
+      }}
+    >
+      <FormMessage
+        intent={select("Form Message Intent", Intents, "primary")}
+        message={text(
+          "Form Message",
+          "This is a sufficiently large placeholder message. Most messages will be this long",
+        )}
+        actions={actions}
+      />
+      <ActionsContainer>
+        <ActionButton
+          url={text("Action Button URL", "https://app.appsmith.com/")}
+          text={text("Action Button Text", "Action Button")}
+          intent={select("Action Button Intent", Intents, "primary")}
+        />
+      </ActionsContainer>
+    </div>
+  </Centered>
+);
+
+withDynamicProps.story = {
+  name: "Dynamic Props",
+  parameters: {
+    design: {
+      type: "figma",
+      url: "",
+    },
+  },
+};
diff --git a/app/client/src/stories/TagListInput.stories.tsx b/app/client/src/stories/TagListInput.stories.tsx
index 76e5bc2f88..620e131c71 100644
--- a/app/client/src/stories/TagListInput.stories.tsx
+++ b/app/client/src/stories/TagListInput.stories.tsx
@@ -3,6 +3,7 @@ import TagInputComponent from "components/editorComponents/TagInputComponent";
 import { withKnobs, text, select } from "@storybook/addon-knobs";
 import { withDesign } from "storybook-addon-designs";
 import { IntentColors } from "constants/DefaultTheme";
+import Centered from "components/designSystems/appsmith/CenteredWrapper";
 
 export default {
   title: "TagListInput",
@@ -17,16 +18,26 @@ export const withDynamicProps = () =>
     );
 
     return (
-      <TagInputComponent
-        placeholder={text("Placeholder", "Placeholder")}
-        input={{
-          value: values,
-          onChange: (value: string) => setValues(value),
-        }}
-        separator={text("Separator (string | RegExp)", ",")}
-        type="email"
-        intent={select("Intent", Object.keys(IntentColors), "success")}
-      />
+      <Centered style={{ height: "100vh" }}>
+        <div
+          style={{
+            width: "1024px",
+            background: "white",
+            height: "300px",
+            padding: "20px",
+          }}
+        >
+          <TagInputComponent
+            placeholder={text("Placeholder", "Placeholder")}
+            input={{
+              value: values,
+              onChange: (value: string) => setValues(value),
+            }}
+            type="email"
+            intent={select("Intent", Object.keys(IntentColors), "success")}
+          />
+        </div>
+      </Centered>
     );
   });
 
diff --git a/app/client/src/stories/TextInput.stories.tsx b/app/client/src/stories/TextInput.stories.tsx
index 309398b19a..0048ba75d0 100644
--- a/app/client/src/stories/TextInput.stories.tsx
+++ b/app/client/src/stories/TextInput.stories.tsx
@@ -3,6 +3,7 @@ import TextInputComponent from "components/designSystems/appsmith/TextInputCompo
 import { withKnobs, text, boolean, select } from "@storybook/addon-knobs";
 import { IconNames } from "@blueprintjs/icons";
 import { withDesign } from "storybook-addon-designs";
+import Centered from "components/designSystems/appsmith/CenteredWrapper";
 
 export default {
   title: "TextInput",
@@ -17,16 +18,27 @@ const mandatoryProps = {
 const iconNames = Object.values({ ...IconNames });
 iconNames.unshift();
 export const withDynamicProps = () => (
-  <TextInputComponent
-    {...mandatoryProps}
-    showError={boolean("Show Errors", false)}
-    placeholder={text("Placeholder", "Placeholder")}
-    meta={{
-      touched: true,
-      error: text("Error Text", "This is an error"),
-    }}
-    icon={select("Icon", iconNames, undefined)}
-  />
+  <Centered style={{ height: "100vh" }}>
+    <div
+      style={{
+        width: "500px",
+        background: "white",
+        height: "300px",
+        padding: "20px",
+      }}
+    >
+      <TextInputComponent
+        {...mandatoryProps}
+        showError={boolean("Show Errors", false)}
+        placeholder={text("Placeholder", "Placeholder")}
+        meta={{
+          touched: true,
+          error: text("Error Text", "This is an error"),
+        }}
+        icon={select("Icon", iconNames, undefined)}
+      />
+    </div>
+  </Centered>
 );
 
 withDynamicProps.story = {