Merge branch 'fix/storybook2' into 'release'

Storybook

Add stories for Form Message and Button Components

See merge request theappsmith/internal-tools-client!331

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

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>
+);

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: "",
+    },
+  },
+};

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>
     );
   });
 

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 = {