feat: Updated stories of toast and tooltip

app/client/src/components/ads/Toast.tsx

@@ -10,7 +10,7 @@ import { useDispatch } from "react-redux";
 import { Colors } from "constants/Colors";
 import DebugButton from "components/editorComponents/Debugger/DebugCTA";
 
-type ToastProps = ToastOptions &
+export type ToastProps = ToastOptions &
   CommonComponentProps & {
     text: string;
     variant?: Variant;

app/client/src/components/ads/Tooltip.tsx

@@ -7,7 +7,7 @@ import { noop } from "lodash";
 
 type Variant = "dark" | "light";
 
-type TooltipProps = CommonComponentProps & {
+export type TooltipProps = CommonComponentProps & {
   content: JSX.Element | string;
   disabled?: boolean;
   position?: Position;

app/client/src/components/stories/Dropdown.stories.tsx

@@ -91,6 +91,7 @@ export function Primary(args: any) {
 }
 
 Primary.args = {
+  type: "Text",
   disabled: false,
   onSelect: () => {
     action("selected-option");
@@ -101,7 +102,6 @@ Primary.argTypes = {
   type: {
     control: controlType.RADIO,
     options: ["Text", "Icon and text", "Label and text"],
-    defaultValue: "Text",
   },
   selected: {
     control: controlType.OBJECT,

app/client/src/components/stories/Text.stories.tsx

@@ -1,72 +1,58 @@
 import React from "react";
-import { boolean, select, text, withKnobs } from "@storybook/addon-knobs";
-import Text, { TextType, Case, FontWeight } from "components/ads/Text";
-import styled from "styled-components";
-import { StoryWrapper } from "components/ads/common";
+import Text, {
+  TextType,
+  Case,
+  FontWeight,
+  TextProps,
+} from "components/ads/Text";
+import { withDesign } from "storybook-addon-designs";
+import { storyName } from "./config/constants";
+import { controlType, statusType } from "./config/types";
 
 export default {
-  title: "Text",
+  title: storyName.platform.text.PATH,
   component: Text,
-  decorators: [withKnobs],
+  decorators: [withDesign],
+  parameters: {
+    status: {
+      type: statusType.STABLE,
+    },
+  },
 };
 
-const StyledDiv = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  margin-right: 50px;
-
-  span {
-    align-self: left;
-    margin-bottom: 10px;
-  }
-`;
-
-export function Typography() {
-  return (
-    <StoryWrapper style={{ display: "flex" }}>
-      <StyledDiv>
-        <Text type={TextType.H1}>Hi there, I am h1 element.</Text>
-        <Text type={TextType.H2}>Hi there, I am h2 element.</Text>
-        <Text type={TextType.H3}>Hi there, I am h3 element.</Text>
-        <Text type={TextType.H4}>Hi there, I am h4 element.</Text>
-        <Text type={TextType.H5}>Hi there, I am h5 element.</Text>
-        <Text type={TextType.H6}>Hi there, I am h6 element.</Text>
-      </StyledDiv>
-
-      <br />
-
-      <StyledDiv>
-        <Text type={TextType.P1}>Hi there, I am p1 element.</Text>
-        <Text type={TextType.P2}>Hi there, I am p2 element.</Text>
-        <Text type={TextType.P3}>Hi there, I am p3 element.</Text>
-      </StyledDiv>
-    </StoryWrapper>
-  );
+export function TextStory(args: TextProps) {
+  return <Text {...args}>Hi there, I am {args.type} element.</Text>;
 }
 
-function ValueWrapper(props: { type: TextType; value: string }) {
-  return (
-    <Text
-      case={select("Case", Object.values(Case), undefined)}
-      highlight={boolean("highlight", false)}
-      italic={boolean("italic", false)}
-      type={props.type}
-      underline={boolean("underline", false)}
-      weight={select("Weight", Object.values(FontWeight), undefined)}
-    >
-      {props.value}
-    </Text>
-  );
-}
+TextStory.args = {
+  type: TextType.H1,
+  underline: false,
+  italic: false,
+  case: Case.CAPITALIZE,
+  className: "",
+  weight: FontWeight.NORMAL,
+  highlight: false,
+  textAlign: "left",
+};
 
-export function CustomizeText() {
-  return (
-    <StoryWrapper>
-      <ValueWrapper
-        type={select("type", Object.values(TextType), TextType.H1)}
-        value={text("text", "Hi There I am Earth")}
-      />
-    </StoryWrapper>
-  );
-}
+TextStory.argTypes = {
+  type: {
+    control: controlType.SELECT,
+    options: Object.values(TextType),
+  },
+  underline: { control: controlType.BOOLEAN },
+  italic: { control: controlType.BOOLEAN },
+  case: {
+    control: controlType.SELECT,
+    options: Object.values(Case),
+  },
+  className: { control: controlType.TEXT },
+  weight: {
+    control: controlType.SELECT,
+    options: Object.values(FontWeight),
+  },
+  highlight: { control: controlType.BOOLEAN },
+  textAlign: { control: controlType.TEXT },
+};
+
+TextStory.storyName = storyName.platform.text.NAME;

app/client/src/components/stories/TextInput.stories.tsx

@@ -51,39 +51,32 @@ Primary.argTypes = {
   defaultValue: {
     control: controlType.TEXT,
     description: "string",
-    defaultValue: "",
   },
   placeholder: {
     control: controlType.TEXT,
     description: "string",
-    defaultValue: "Placeholder",
   },
   disabled: {
     control: controlType.BOOLEAN,
     description: "boolean",
-    defaultValue: false,
   },
   fill: {
     control: controlType.BOOLEAN,
     description: "boolean",
-    defaultValue: false,
   },
   leftIcon: {
     control: controlType.SELECT,
     options: ["Select icon" as IconName, ...IconCollection],
     description: "Icon",
-    defaultValue: undefined,
   },
   readOnly: {
     control: controlType.BOOLEAN,
     description: "boolean",
-    defaultValue: false,
   },
   dataType: {
     control: controlType.SELECT,
     options: ["text", "email", "number", "password", "url"],
     description: ["text", "email", "number", "password", "url"].join(", "),
-    defaultValue: "text",
   },
   helperText: {
     control: controlType.TEXT,
@@ -92,7 +85,6 @@ Primary.argTypes = {
   validator: {
     control: controlType.BOOLEAN,
     description: "function",
-    defaultValue: true,
   },
   rightSideComponent: {
     control: controlType.OBJECT,

app/client/src/components/stories/Toast.stories.tsx

@@ -1,27 +1,29 @@
-import React, { useEffect } from "react";
-import { withKnobs, text, number, select } from "@storybook/addon-knobs";
-import { Toaster, StyledToastContainer } from "components/ads/Toast";
+import React from "react";
+import {
+  Toaster,
+  StyledToastContainer,
+  ToastProps,
+} from "components/ads/Toast";
 import Button, { Size, Category } from "components/ads/Button";
 import { action } from "@storybook/addon-actions";
 import { Slide } from "react-toastify";
 import { StoryWrapper, Variant } from "components/ads/common";
+import { withDesign } from "storybook-addon-designs";
+import { storyName } from "./config/constants";
+import { controlType, statusType } from "./config/types";
 
 export default {
-  title: "Toast",
-  component: Toaster,
-  decorators: [withKnobs],
+  title: storyName.platform.toast.PATH,
+  component: Text,
+  decorators: [withDesign],
+  parameters: {
+    status: {
+      type: statusType.BETA,
+    },
+  },
 };
 
-export function ToastStory() {
-  useEffect(() => {
-    Toaster.show({
-      text: text("message", "Archived successfully"),
-      duration: number("duration", 5000),
-      variant: select("variant", Object.values(Variant), Variant.info),
-      onUndo: action("on-undo"),
-    });
-  }, []);
-
+export function ToastStory(args: ToastProps) {
   return (
     <StoryWrapper>
       <StyledToastContainer
@@ -35,12 +37,8 @@ export function ToastStory() {
       <Button
         category={Category.tertiary}
         onClick={() => {
-          Toaster.show({
-            text: text("message", "Application name saved successfully"),
-            duration: number("duration", 5000),
-            variant: select("variant", Object.values(Variant), Variant.success),
-            onUndo: action("on-undo"),
-          });
+          action("button-clicked");
+          Toaster.show(args);
         }}
         size={Size.large}
         text="Show toast message"
@@ -49,3 +47,24 @@ export function ToastStory() {
     </StoryWrapper>
   );
 }
+
+ToastStory.args = {
+  text: "Archived successfully",
+  variant: Variant.success,
+  duration: 5000,
+  showDebugButton: false,
+  hideProgressBar: false,
+};
+
+ToastStory.argTypes = {
+  variant: {
+    control: controlType.SELECT,
+    options: Object.values(Variant),
+  },
+  duration: { control: controlType.NUMBER },
+  showDebugButton: { control: controlType.BOOLEAN },
+  text: { control: controlType.TEXT },
+  hideProgressBar: { control: controlType.BOOLEAN },
+};
+
+ToastStory.storyName = storyName.platform.toast.NAME;

app/client/src/components/stories/Tooltip.stories.tsx

@@ -1,35 +1,41 @@
 import React from "react";
-import { select, withKnobs } from "@storybook/addon-knobs";
 import { withDesign } from "storybook-addon-designs";
 import { Position } from "@blueprintjs/core";
-import TooltipComponent from "components/ads/Tooltip";
-import { StoryWrapper } from "components/ads/common";
-import Text, { TextType } from "components/ads/Text";
+import TooltipComponent, { TooltipProps } from "components/ads/Tooltip";
+import { StoryWrapper, Variant } from "components/ads/common";
+import Button from "components/ads/Button";
+import { storyName } from "./config/constants";
+import { statusType } from "./config/types";
+import { action } from "@storybook/addon-actions";
 
 export default {
-  title: "Tooltip",
+  title: storyName.platform.tooltip.PATH,
   component: TooltipComponent,
-  decorators: [withKnobs, withDesign],
+  decorators: [withDesign],
+  parameters: {
+    status: {
+      type: statusType.BETA,
+    },
+  },
 };
 
-export function MenuStory() {
+export function TooltipStory(args: TooltipProps) {
   return (
-    <StoryWrapper>
-      <div style={{ paddingTop: "50px", paddingLeft: "50px", width: "200px" }}>
-        <TooltipComponent
-          content={
-            <Text highlight type={TextType.P1}>
-              This is a tooltip
-            </Text>
-          }
-          position={select("Position", Object.values(Position), Position.RIGHT)}
-          variant={select("variant", ["dark", "light"], "dark")}
-        >
-          <Text highlight type={TextType.P1}>
-            Hover to show tooltip
-          </Text>
-        </TooltipComponent>
-      </div>
+    <StoryWrapper style={{ height: 350 }}>
+      <div id="tooltip-root" />
+      <TooltipComponent {...args} onOpening={action("tooltip-opened")}>
+        <Button text="Hover to show tooltip" variant={Variant.info} />
+      </TooltipComponent>
     </StoryWrapper>
   );
 }
+
+TooltipStory.args = {
+  content: "I'm a hover over text.",
+  position: Position.RIGHT,
+  boundary: "viewport",
+};
+
+TooltipStory.argTypes = {};
+
+TooltipStory.storyName = storyName.platform.tooltip.NAME;

app/client/src/components/stories/config/constants.tsx

@@ -84,5 +84,17 @@ export const storyName = {
       PATH: "Platform/Tabs",
       NAME: "Tabs",
     },
+    text: {
+      PATH: "Platform/Text",
+      NAME: "Text",
+    },
+    toast: {
+      PATH: "Platform/Toast",
+      NAME: "Toast",
+    },
+    tooltip: {
+      PATH: "Platform/Tooltip",
+      NAME: "Tooltip",
+    },
   },
 };