From dd779af1c9886f1d15b37fdd536bb0369e8c9519 Mon Sep 17 00:00:00 2001
From: haojin111 <haojin828@outlook.com>
Date: Fri, 20 Aug 2021 15:50:23 +0800
Subject: [PATCH 01/10] update textinput story with rightsidecomponent

---
 app/client/src/components/ads/TextInput.tsx    | 18 +++++++-----------
 .../components/stories/TextInput.stories.tsx   |  4 ++++
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/app/client/src/components/ads/TextInput.tsx b/app/client/src/components/ads/TextInput.tsx
index a2eb2a9e3486..fc9153e62ae8 100644
--- a/app/client/src/components/ads/TextInput.tsx
+++ b/app/client/src/components/ads/TextInput.tsx
@@ -103,6 +103,7 @@ const StyledInput = styled((props) => {
     inputStyle: boxReturnType;
     isValid: boolean;
     rightSideComponentWidth: number;
+    hasLeftIcon: boolean;
   }
 >`
   width: ${(props) => (props.fill ? "100%" : "260px")};
@@ -113,25 +114,19 @@ const StyledInput = styled((props) => {
   padding: 0px ${(props) => props.theme.spaces[5]}px;
   height: 36px;
   padding-right: ${(props) =>
-    props.rightSideComponentWidth + props.theme.spaces[6]}px;
+    props.rightSideComponentWidth + props.theme.spaces[5]}px;
+  padding-left: ${(props) =>
+    props.hasLeftIcon ? "35" : props.theme.spaces[5]}px;
   background-color: ${(props) => props.inputStyle.bgColor};
   color: ${(props) => props.inputStyle.color};
-​
-  ${(props) =>
-    props.leftIcon &&
-    IconCollection.includes(props.leftIcon) &&
-    `
-  padding-left: 35px;`};
-​
+
   &:-internal-autofill-selected,
   &:-webkit-autofill,
   &:-webkit-autofill:hover,
   &:-webkit-autofill:focus {
-    -webkit-box-shadow: 0 0 0 30px ${(props) =>
-      props.inputStyle.bgColor} inset !important;
+    -webkit-box-shadow: 0 0 0 30px ${(props) => props.inputStyle.bgColor} inset !important;
     -webkit-text-fill-color: ${(props) => props.inputStyle.color} !important;
   }
-​
   &:hover {
     background-color: ${(props) =>
       props.disabled
@@ -267,6 +262,7 @@ const TextInput = forwardRef(
           type={props.dataType || "text"}
           {...props}
           data-cy={props.cypressSelector}
+          hasLeftIcon={IconCollection.includes(props.leftIcon)}
           inputRef={ref}
           onChange={memoizedChangeHandler}
           placeholder={props.placeholder}
diff --git a/app/client/src/components/stories/TextInput.stories.tsx b/app/client/src/components/stories/TextInput.stories.tsx
index bbb079eb8bc6..8cf0a2ca199d 100644
--- a/app/client/src/components/stories/TextInput.stories.tsx
+++ b/app/client/src/components/stories/TextInput.stories.tsx
@@ -94,6 +94,10 @@ Primary.argTypes = {
     description: "function",
     defaultValue: true,
   },
+  rightSideComponent: {
+    control: controlType.OBJECT,
+    description: "React.ReactNode",
+  },
 };
 
 Primary.storyName = storyName.platform.form.textInput.NAME;

From c9c7f1596de1d9af81c6c7be38507f5a21afe243 Mon Sep 17 00:00:00 2001
From: haojin111 <haojin828@outlook.com>
Date: Fri, 20 Aug 2021 16:01:38 +0800
Subject: [PATCH 02/10] updated story of iconSelector component

---
 .../src/components/ads/IconSelector.tsx       |  2 +-
 .../stories/IconSelector.stories.tsx          | 75 ++++++++++++-------
 .../components/stories/config/constants.tsx   |  4 +
 3 files changed, 52 insertions(+), 29 deletions(-)

diff --git a/app/client/src/components/ads/IconSelector.tsx b/app/client/src/components/ads/IconSelector.tsx
index 73b283762440..36c4fda4a6ad 100644
--- a/app/client/src/components/ads/IconSelector.tsx
+++ b/app/client/src/components/ads/IconSelector.tsx
@@ -5,7 +5,7 @@ import { Size } from "./Button";
 import { CommonComponentProps, Classes } from "./common";
 import ScrollIndicator from "components/ads/ScrollIndicator";
 
-type IconSelectorProps = CommonComponentProps & {
+export type IconSelectorProps = CommonComponentProps & {
   onSelect?: (icon: AppIconName) => void;
   selectedColor: string;
   selectedIcon?: AppIconName;
diff --git a/app/client/src/components/stories/IconSelector.stories.tsx b/app/client/src/components/stories/IconSelector.stories.tsx
index b2ebbe733f0a..748eecc0af11 100644
--- a/app/client/src/components/stories/IconSelector.stories.tsx
+++ b/app/client/src/components/stories/IconSelector.stories.tsx
@@ -1,40 +1,59 @@
 import React from "react";
 import { withKnobs, select, boolean } from "@storybook/addon-knobs";
 import { withDesign } from "storybook-addon-designs";
-import IconSelector from "components/ads/IconSelector";
+import IconSelector, { IconSelectorProps } from "components/ads/IconSelector";
 import { action } from "@storybook/addon-actions";
 import { AppIconCollection } from "components/ads/AppIcon";
 import { StoryWrapper } from "components/ads/common";
+import { storyName } from "./config/constants";
+import { controlType, statusType } from "./config/types";
 
 export default {
-  title: "IconSelector",
+  title: storyName.platform.icons.iconSelector.PATH,
   component: IconSelector,
-  decorators: [withKnobs, withDesign],
+  decorators: [withDesign],
+  parameters: {
+    status: {
+      type: statusType.STABLE,
+    },
+  },
 };
 
-export function IconPicker() {
-  return (
-    <StoryWrapper>
-      <IconSelector
-        fill={boolean("fill", false)}
-        onSelect={action("icon-selected")}
-        selectedColor={select(
-          "select color",
-          [
-            "#4F70FD",
-            "#54A9FB",
-            "#5ED3DA",
-            "#F56AF4",
-            "#F36380",
-            "#FE9F44",
-            "#E9C951",
-            "#A8D76C",
-            "#6C4CF1",
-          ],
-          "#54A9FB",
-        )}
-        selectedIcon={select("select icon", AppIconCollection, "bag")}
-      />
-    </StoryWrapper>
-  );
+export function IconSelectorStory(args: IconSelectorProps) {
+  return <IconSelector {...args} onSelect={action("icon-selected")} />;
 }
+
+IconSelectorStory.args = {
+  selectedColor: "#54A9FB",
+  selectedIcon: "bag",
+  iconPalette: AppIconCollection,
+  fill: false,
+};
+
+IconSelectorStory.argTypes = {
+  selectedColor: {
+    control: controlType.SELECT,
+    options: [
+      "#4F70FD",
+      "#54A9FB",
+      "#5ED3DA",
+      "#F56AF4",
+      "#F36380",
+      "#FE9F44",
+      "#E9C951",
+      "#A8D76C",
+      "#6C4CF1",
+    ],
+  },
+  selectedIcon: {
+    control: controlType.SELECT,
+    options: AppIconCollection,
+  },
+  iconPalette: {
+    control: controlType.ARRAY,
+    options: AppIconCollection,
+  },
+  fill: { control: controlType.BOOLEAN },
+};
+
+IconSelectorStory.storyName = storyName.platform.icons.iconSelector.NAME;
diff --git a/app/client/src/components/stories/config/constants.tsx b/app/client/src/components/stories/config/constants.tsx
index ba5781cca5d5..a77882f67cf9 100644
--- a/app/client/src/components/stories/config/constants.tsx
+++ b/app/client/src/components/stories/config/constants.tsx
@@ -51,6 +51,10 @@ export const storyName = {
         PATH: "Platform/Icons/AppIcon",
         NAME: "AppIcon",
       },
+      iconSelector: {
+        PATH: "Platform/Icons/IconSelector",
+        NAME: "IconSelector",
+      },
     },
   },
 };

From 297bd09b3ff705302b7036728418d17eb836b03d Mon Sep 17 00:00:00 2001
From: haojin111 <haojin828@outlook.com>
Date: Sat, 21 Aug 2021 17:52:08 +0800
Subject: [PATCH 03/10] updated menu story and added menu item story

---
 app/client/src/components/ads/Menu.tsx        |  2 +-
 .../stories/IconSelector.stories.tsx          |  2 -
 .../src/components/stories/Menu.stories.tsx   | 85 +++++++++++--------
 .../components/stories/MenuItem.stories.tsx   | 56 ++++++++++++
 .../components/stories/config/constants.tsx   | 10 +++
 5 files changed, 115 insertions(+), 40 deletions(-)
 create mode 100644 app/client/src/components/stories/MenuItem.stories.tsx

diff --git a/app/client/src/components/ads/Menu.tsx b/app/client/src/components/ads/Menu.tsx
index 68aa8ebef68c..a08c6d5ffcd1 100644
--- a/app/client/src/components/ads/Menu.tsx
+++ b/app/client/src/components/ads/Menu.tsx
@@ -5,7 +5,7 @@ import { Popover } from "@blueprintjs/core/lib/esm/components/popover/popover";
 import { Position } from "@blueprintjs/core/lib/esm/common/position";
 import { PopperModifiers } from "@blueprintjs/core";
 
-type MenuProps = CommonComponentProps & {
+export type MenuProps = CommonComponentProps & {
   children?: ReactNode[];
   target: JSX.Element;
   position?: Position;
diff --git a/app/client/src/components/stories/IconSelector.stories.tsx b/app/client/src/components/stories/IconSelector.stories.tsx
index 748eecc0af11..d0148bea5cb3 100644
--- a/app/client/src/components/stories/IconSelector.stories.tsx
+++ b/app/client/src/components/stories/IconSelector.stories.tsx
@@ -1,10 +1,8 @@
 import React from "react";
-import { withKnobs, select, boolean } from "@storybook/addon-knobs";
 import { withDesign } from "storybook-addon-designs";
 import IconSelector, { IconSelectorProps } from "components/ads/IconSelector";
 import { action } from "@storybook/addon-actions";
 import { AppIconCollection } from "components/ads/AppIcon";
-import { StoryWrapper } from "components/ads/common";
 import { storyName } from "./config/constants";
 import { controlType, statusType } from "./config/types";
 
diff --git a/app/client/src/components/stories/Menu.stories.tsx b/app/client/src/components/stories/Menu.stories.tsx
index 7c19b862cebd..2b1f78778609 100644
--- a/app/client/src/components/stories/Menu.stories.tsx
+++ b/app/client/src/components/stories/Menu.stories.tsx
@@ -1,25 +1,29 @@
 import React, { useState } from "react";
-import { boolean, select, text, withKnobs } from "@storybook/addon-knobs";
 import { withDesign } from "storybook-addon-designs";
-import Menu from "components/ads/Menu";
+import Menu, { MenuProps } from "components/ads/Menu";
 import { action } from "@storybook/addon-actions";
 import MenuDivider from "components/ads/MenuDivider";
 import MenuItem from "components/ads/MenuItem";
 import { Position } from "@blueprintjs/core/lib/esm/common/position";
 import ColorSelector from "components/ads/ColorSelector";
-import { AppIconCollection } from "components/ads/AppIcon";
 import IconSelector from "components/ads/IconSelector";
 import EditableText, {
   SavingState,
   EditInteractionKind,
 } from "components/ads/EditableText";
-import { IconCollection, IconName } from "components/ads/Icon";
 import { theme } from "constants/DefaultTheme";
+import { storyName } from "./config/constants";
+import { controlType, statusType } from "./config/types";
 
 export default {
-  title: "Menu",
-  component: Menu,
-  decorators: [withKnobs, withDesign],
+  title: storyName.platform.menus.menu.PATH,
+  component: IconSelector,
+  decorators: [withDesign],
+  parameters: {
+    status: {
+      type: statusType.STABLE,
+    },
+  },
 };
 
 const errorFunction = (name: string) => {
@@ -30,14 +34,10 @@ const errorFunction = (name: string) => {
   }
 };
 
-export function MenuStory() {
+export function MenuStory(args: MenuProps) {
   const [selectedColor, setSelectedColor] = useState<string>(
     theme.colors.appCardColors[0],
   );
-  const [savingState, SetSavingState] = useState<SavingState>(
-    SavingState.NOT_STARTED,
-  );
-
   return (
     <div
       style={{
@@ -49,7 +49,6 @@ export function MenuStory() {
       }}
     >
       <Menu
-        position={select("Position", Object.values(Position), Position.RIGHT)}
         target={
           <div>
             <svg
@@ -69,6 +68,9 @@ export function MenuStory() {
             </svg>
           </div>
         }
+        {...args}
+        onClose={action("menu-closed")}
+        onOpening={action("menu-opended")}
       >
         <EditableText
           defaultValue="Product design app"
@@ -77,15 +79,10 @@ export function MenuStory() {
           hideEditIcon={false}
           isEditingDefault={false}
           isInvalid={(name: any) => errorFunction(name)}
-          onBlur={() => {
-            SetSavingState(SavingState.STARTED);
-            setTimeout(() => {
-              SetSavingState(SavingState.SUCCESS);
-            }, 2000);
-          }}
+          onBlur={action("editable-input-blured")}
           onTextChanged={action("editable-input-changed")}
           placeholder={"Edit text input"}
-          savingState={savingState}
+          savingState={SavingState.NOT_STARTED}
           valueTransform={(value: any) => value.toUpperCase()}
         />
         <ColorSelector
@@ -98,37 +95,51 @@ export function MenuStory() {
           fill={false}
           onSelect={action("icon-selected")}
           selectedColor={selectedColor}
-          selectedIcon={select("Select app icon", AppIconCollection, "bag")}
+          selectedIcon="bag"
         />
         <MenuDivider />
         <MenuItem
-          disabled={boolean("First option disabled", false)}
-          icon={select(
-            "First Icon",
-            ["Select icon" as IconName, ...IconCollection],
-            "Select icon" as IconName,
-          )}
           label={<span>W</span>}
           onSelect={action("clicked-first-option")}
-          text={text("First option", "Invite user")}
+          text="Invite user"
         />
-        {boolean("First menu item divider", false) ? <MenuDivider /> : null}
         <MenuItem
-          icon={select(
-            "Second Icon",
-            ["Select icon" as IconName, ...IconCollection],
-            "Select icon" as IconName,
-          )}
+          icon="bug"
           label={<span>W</span>}
           onSelect={action("clicked-second-option")}
-          text={text("Second option", "Are you sure")}
+          text="Are you sure"
         />
-        {boolean("Second menu item divider", false) ? <MenuDivider /> : null}
+        <MenuDivider />
         <MenuItem
           onSelect={action("clicked-third-option")}
-          text={text("Third option", "Third option text only")}
+          text="Third option text only"
         />
       </Menu>
     </div>
   );
 }
+
+MenuStory.args = {
+  position: Position.RIGHT,
+  isOpen: false,
+  canEscapeKeyClose: true,
+  canOutsideClickClose: true,
+  menuItemWrapperWidth: 200,
+};
+
+MenuStory.argTypes = {
+  target: {
+    control: controlType.OBJECT,
+    description: "JSX.Element",
+  },
+  position: {
+    control: controlType.SELECT,
+    options: Object.values(Position),
+  },
+  isOpen: { control: controlType.BOOLEAN },
+  canEscapeKeyClose: { control: controlType.BOOLEAN },
+  canOutsideClickClose: { control: controlType.BOOLEAN },
+  menuItemWrapperWidth: { control: controlType.NUMBER },
+};
+
+MenuStory.storyName = storyName.platform.menus.menu.NAME;
diff --git a/app/client/src/components/stories/MenuItem.stories.tsx b/app/client/src/components/stories/MenuItem.stories.tsx
new file mode 100644
index 000000000000..14bdfdf65d06
--- /dev/null
+++ b/app/client/src/components/stories/MenuItem.stories.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { withDesign } from "storybook-addon-designs";
+import { action } from "@storybook/addon-actions";
+import MenuItem, { MenuItemProps } from "components/ads/MenuItem";
+import { IconCollection, IconName } from "components/ads/Icon";
+import { storyName } from "./config/constants";
+import { controlType, statusType } from "./config/types";
+
+export default {
+  title: storyName.platform.menus.menuItem.PATH,
+  component: MenuItem,
+  decorators: [withDesign],
+  parameters: {
+    status: {
+      type: statusType.STABLE,
+    },
+  },
+};
+
+export function MenuItemStory(args: MenuItemProps) {
+  if (args.label) {
+    args.label = <span>{args.label}</span>;
+  }
+  return <MenuItem {...args} onSelect={action("menu-item-selected")} />;
+}
+
+MenuItemStory.args = {
+  icon: "Select a icon" as IconName,
+  text: "Menu Item",
+  label: "W",
+  href: "",
+  type: "warning",
+  ellipsize: 0,
+  selected: true,
+};
+
+MenuItemStory.argTypes = {
+  icon: {
+    control: controlType.SELECT,
+    options: ["Select a icon" as IconName, ...IconCollection],
+  },
+  text: { control: controlType.TEXT },
+  label: {
+    control: controlType.TEXT,
+    description: "ReactNode",
+  },
+  href: {
+    control: controlType.TEXT,
+    description: "url link",
+  },
+  type: { control: controlType.TEXT },
+  ellipsize: { control: controlType.NUMBER },
+  selected: { control: controlType.BOOLEAN },
+};
+
+MenuItemStory.storyName = storyName.platform.menus.menuItem.NAME;
diff --git a/app/client/src/components/stories/config/constants.tsx b/app/client/src/components/stories/config/constants.tsx
index a77882f67cf9..79d3f0ae545b 100644
--- a/app/client/src/components/stories/config/constants.tsx
+++ b/app/client/src/components/stories/config/constants.tsx
@@ -56,5 +56,15 @@ export const storyName = {
         NAME: "IconSelector",
       },
     },
+    menus: {
+      menu: {
+        PATH: "Platform/Menus/Menu",
+        NAME: "Menu",
+      },
+      menuItem: {
+        PATH: "Platform/Menus/MenuItem",
+        NAME: "MenuItem",
+      },
+    },
   },
 };

From 1c3c5f62e7aa8955e7098c471dfd31ea1b250a26 Mon Sep 17 00:00:00 2001
From: haojin111 <haojin828@outlook.com>
Date: Sun, 22 Aug 2021 02:46:31 +0800
Subject: [PATCH 04/10] updated story of search input

---
 .../stories/SearchInput.stories.tsx           | 74 +++++++++++++------
 .../components/stories/config/constants.tsx   |  4 +
 2 files changed, 57 insertions(+), 21 deletions(-)

diff --git a/app/client/src/components/stories/SearchInput.stories.tsx b/app/client/src/components/stories/SearchInput.stories.tsx
index 57c16eec5ebe..23a2a1c354cc 100644
--- a/app/client/src/components/stories/SearchInput.stories.tsx
+++ b/app/client/src/components/stories/SearchInput.stories.tsx
@@ -1,29 +1,61 @@
 import React from "react";
-import { withKnobs, boolean, text, select } from "@storybook/addon-knobs";
+import { withDesign } from "storybook-addon-designs";
 import { action } from "@storybook/addon-actions";
-import SearchInput, { SearchVariant } from "components/ads/SearchInput";
-import { StoryWrapper } from "components/ads/common";
+import SearchInput, {
+  TextInputProps,
+  SearchVariant,
+} from "components/ads/SearchInput";
+import { storyName } from "./config/constants";
+import { controlType, statusType } from "./config/types";
 
 export default {
-  title: "Search Input",
+  title: storyName.platform.form.searchInput.PATH,
   component: SearchInput,
-  decorators: [withKnobs],
+  decorators: [withDesign],
+  parameters: {
+    status: {
+      type: statusType.STABLE,
+    },
+  },
 };
 
-export function SearchInputStory() {
-  return (
-    <StoryWrapper>
-      <SearchInput
-        defaultValue={text("defaultValue", "Type any search keyword")}
-        fill={boolean("fill", false)}
-        onChange={action("searched value")}
-        placeholder={text("placeholder", "Search for apps...")}
-        variant={select(
-          "variant",
-          Object.values(SearchVariant),
-          SearchVariant.SEAMLESS,
-        )}
-      />
-    </StoryWrapper>
-  );
+export function SearchInputStory(args: TextInputProps) {
+  return <SearchInput {...args} onChange={action("value-changed")} />;
 }
+
+SearchInputStory.args = {
+  placeholder: "Placeholder",
+  fill: false,
+  defaultValue: "",
+  variant: SearchVariant.BACKGROUND,
+};
+
+SearchInputStory.argTypes = {
+  variant: {
+    control: controlType.SELECT,
+    options: Object.values(SearchVariant),
+  },
+  fill: { control: controlType.BOOLEAN },
+  placeholder: { control: controlType.TEXT },
+  defaultValue: { control: controlType.TEXT },
+};
+
+SearchInputStory.storyName = storyName.platform.form.searchInput.NAME;
+
+// export function SearchInputStory() {
+//   return (
+//     <StoryWrapper>
+//       <SearchInput
+//         defaultValue={text("defaultValue", "Type any search keyword")}
+//         fill={boolean("fill", false)}
+//         onChange={action("searched value")}
+//         placeholder={text("placeholder", "Search for apps...")}
+//         variant={select(
+//           "variant",
+//           Object.values(SearchVariant),
+//           SearchVariant.SEAMLESS,
+//         )}
+//       />
+//     </StoryWrapper>
+//   );
+// }
diff --git a/app/client/src/components/stories/config/constants.tsx b/app/client/src/components/stories/config/constants.tsx
index 79d3f0ae545b..5da6b65a2d7b 100644
--- a/app/client/src/components/stories/config/constants.tsx
+++ b/app/client/src/components/stories/config/constants.tsx
@@ -33,6 +33,10 @@ export const storyName = {
         PATH: "Platform/Form/Dropdown",
         NAME: "Dropdown",
       },
+      searchInput: {
+        PATH: "Platform/Form/SearchInput",
+        NAME: "SearchInput",
+      },
       textInput: {
         PATH: "Platform/Form/TextInput",
         NAME: "TextInput",

From 9879d419c51f420bd4da0acad3df0d59fc695fb6 Mon Sep 17 00:00:00 2001
From: haojin111 <haojin828@outlook.com>
Date: Mon, 23 Aug 2021 15:42:47 +0800
Subject: [PATCH 05/10] update textinput props and stories of table

---
 app/client/src/components/ads/Table.tsx       |   2 +-
 .../src/components/ads/TableDropdown.tsx      |   2 +-
 app/client/src/components/ads/TextInput.tsx   |   6 +-
 .../src/components/stories/Menu.stories.tsx   |   6 +-
 .../src/components/stories/Table.stories.tsx  | 222 ++++++++++--------
 .../stories/TableDropdown.stories.tsx         |  71 +++---
 .../components/stories/TextInput.stories.tsx  |   2 +-
 .../components/stories/config/constants.tsx   |  10 +
 8 files changed, 184 insertions(+), 137 deletions(-)

diff --git a/app/client/src/components/ads/Table.tsx b/app/client/src/components/ads/Table.tsx
index 2c1f3d8e5c62..60ba14503d27 100644
--- a/app/client/src/components/ads/Table.tsx
+++ b/app/client/src/components/ads/Table.tsx
@@ -87,7 +87,7 @@ const Styles = styled.div`
 const HiddenArrow = styled(DownArrow)`
   visibility: hidden;
 `;
-interface TableProps {
+export interface TableProps {
   data: any[];
   columns: any[];
 }
diff --git a/app/client/src/components/ads/TableDropdown.tsx b/app/client/src/components/ads/TableDropdown.tsx
index 9afcbdbf923a..1c21b9aab80d 100644
--- a/app/client/src/components/ads/TableDropdown.tsx
+++ b/app/client/src/components/ads/TableDropdown.tsx
@@ -15,7 +15,7 @@ type DropdownOption = {
   desc: string;
 };
 
-type DropdownProps = CommonComponentProps & {
+export type DropdownProps = CommonComponentProps & {
   options: DropdownOption[];
   onSelect: (selectedValue: DropdownOption) => void;
   selectedIndex: number;
diff --git a/app/client/src/components/ads/TextInput.tsx b/app/client/src/components/ads/TextInput.tsx
index fc9153e62ae8..52867efeed1b 100644
--- a/app/client/src/components/ads/TextInput.tsx
+++ b/app/client/src/components/ads/TextInput.tsx
@@ -252,6 +252,10 @@ const TextInput = forwardRef(
     const iconColor = !validation.isValid
       ? props.theme.colors.danger.main
       : props.theme.colors.textInput.icon;
+
+    const hasLeftIcon = props.leftIcon
+      ? IconCollection.includes(props.leftIcon)
+      : false;
     return (
       <InputWrapper>
         <StyledInput
@@ -262,7 +266,7 @@ const TextInput = forwardRef(
           type={props.dataType || "text"}
           {...props}
           data-cy={props.cypressSelector}
-          hasLeftIcon={IconCollection.includes(props.leftIcon)}
+          hasLeftIcon={hasLeftIcon}
           inputRef={ref}
           onChange={memoizedChangeHandler}
           placeholder={props.placeholder}
diff --git a/app/client/src/components/stories/Menu.stories.tsx b/app/client/src/components/stories/Menu.stories.tsx
index 2b1f78778609..cbc7affc6da3 100644
--- a/app/client/src/components/stories/Menu.stories.tsx
+++ b/app/client/src/components/stories/Menu.stories.tsx
@@ -49,6 +49,9 @@ export function MenuStory(args: MenuProps) {
       }}
     >
       <Menu
+        {...args}
+        onClose={action("menu-closed")}
+        onOpening={action("menu-opended")}
         target={
           <div>
             <svg
@@ -68,9 +71,6 @@ export function MenuStory(args: MenuProps) {
             </svg>
           </div>
         }
-        {...args}
-        onClose={action("menu-closed")}
-        onOpening={action("menu-opended")}
       >
         <EditableText
           defaultValue="Product design app"
diff --git a/app/client/src/components/stories/Table.stories.tsx b/app/client/src/components/stories/Table.stories.tsx
index ba0c7cf93549..5663b5ceab53 100644
--- a/app/client/src/components/stories/Table.stories.tsx
+++ b/app/client/src/components/stories/Table.stories.tsx
@@ -1,43 +1,26 @@
 import React from "react";
-import Table from "components/ads/Table";
+import Table, { TableProps } from "components/ads/Table";
+import { withDesign } from "storybook-addon-designs";
 import Button, { Category, Size } from "components/ads/Button";
 import Icon, { IconSize } from "components/ads/Icon";
 import TableDropdown from "components/ads/TableDropdown";
 import { Position } from "@blueprintjs/core/lib/esm/common/position";
 import { StoryWrapper, Variant } from "components/ads/common";
 import { noop } from "utils/AppsmithUtils";
+import { storyName } from "./config/constants";
+import { controlType, statusType } from "./config/types";
+import { action } from "@storybook/addon-actions";
 
 export default {
-  title: "Table",
+  title: storyName.platform.tables.table.PATH,
   component: Table,
-};
-
-const columns = [
-  {
-    Header: "NAME",
-    accessor: "col1", // accessor is the "key" in the data
-  },
-  {
-    Header: "EMAIL ID",
-    accessor: "col2",
-  },
-  {
-    Header: "ROLE",
-    accessor: "col3",
+  decorators: [withDesign],
+  parameters: {
+    status: {
+      type: statusType.STABLE,
+    },
   },
-  {
-    Header: "ACCESS LEVEL",
-    accessor: "col4",
-  },
-  {
-    Header: "STATUS",
-    accessor: "col5",
-  },
-  {
-    Header: "DELETE",
-    accessor: "col6",
-  },
-];
+};
 
 const options = [
   {
@@ -54,79 +37,112 @@ const options = [
   },
 ];
 
-const data = [
-  {
-    col1: "Dustin Howard",
-    col2: "dustin_01@jlegue.com",
-    col3: (
-      <TableDropdown
-        onSelect={noop}
-        options={options}
-        position={Position.BOTTOM}
-        selectedIndex={0}
-      />
-    ),
-    col4: "App Access",
-    col5: (
-      <Button
-        category={Category.primary}
-        size={Size.small}
-        text={"approve"}
-        variant={Variant.info}
-      />
-    ),
-    col6: <Icon name="delete" size={IconSize.LARGE} />,
-  },
-  {
-    col1: "Austin Howard",
-    col2: "dustin_02@jlegue.com",
-    col3: (
-      <TableDropdown
-        onSelect={noop}
-        options={options}
-        position={Position.BOTTOM}
-        selectedIndex={1}
-      />
-    ),
-    col4: "Map Access",
-    col5: (
-      <Button
-        category={Category.primary}
-        size={Size.small}
-        text={"accepted"}
-        variant={Variant.success}
-      />
-    ),
-    col6: <Icon name="delete" size={IconSize.LARGE} />,
-  },
-  {
-    col1: "Justing Howard",
-    col2: "dustin_03@jlegue.com",
-    col3: (
-      <TableDropdown
-        onSelect={noop}
-        options={options}
-        position={Position.BOTTOM}
-        selectedIndex={2}
-      />
-    ),
-    col4: "Dm Access",
-    col5: (
-      <Button
-        category={Category.primary}
-        size={Size.small}
-        text={"on hold"}
-        variant={Variant.warning}
-      />
-    ),
-    col6: <Icon name="delete" size={IconSize.LARGE} />,
+export function TableStory(args: TableProps) {
+  return <Table {...args} />;
+}
+
+TableStory.args = {
+  columns: [
+    {
+      Header: "NAME",
+      accessor: "col1", // accessor is the "key" in the data
+    },
+    {
+      Header: "EMAIL ID",
+      accessor: "col2",
+    },
+    {
+      Header: "ROLE",
+      accessor: "col3",
+    },
+    {
+      Header: "ACCESS LEVEL",
+      accessor: "col4",
+    },
+    {
+      Header: "STATUS",
+      accessor: "col5",
+    },
+    {
+      Header: "DELETE",
+      accessor: "col6",
+    },
+  ],
+  data: [
+    {
+      col1: "Dustin Howard",
+      col2: "dustin_01@jlegue.com",
+      col3: (
+        <TableDropdown
+          onSelect={noop}
+          options={options}
+          position={Position.BOTTOM}
+          selectedIndex={0}
+        />
+      ),
+      col4: "App Access",
+      col5: (
+        <Button
+          category={Category.primary}
+          size={Size.small}
+          text={"approve"}
+          variant={Variant.info}
+        />
+      ),
+      col6: <Icon name="delete" size={IconSize.LARGE} />,
+    },
+    {
+      col1: "Austin Howard",
+      col2: "dustin_02@jlegue.com",
+      col3: (
+        <TableDropdown
+          onSelect={noop}
+          options={options}
+          position={Position.BOTTOM}
+          selectedIndex={1}
+        />
+      ),
+      col4: "Map Access",
+      col5: (
+        <Button
+          category={Category.primary}
+          size={Size.small}
+          text={"accepted"}
+          variant={Variant.success}
+        />
+      ),
+      col6: <Icon name="delete" size={IconSize.LARGE} />,
+    },
+    {
+      col1: "Justing Howard",
+      col2: "dustin_03@jlegue.com",
+      col3: (
+        <TableDropdown
+          onSelect={noop}
+          options={options}
+          position={Position.BOTTOM}
+          selectedIndex={2}
+        />
+      ),
+      col4: "Dm Access",
+      col5: (
+        <Button
+          category={Category.primary}
+          size={Size.small}
+          text={"on hold"}
+          variant={Variant.warning}
+        />
+      ),
+      col6: <Icon name="delete" size={IconSize.LARGE} />,
+    },
+  ],
+};
+
+TableStory.argTypes = {
+  columns: {
+    control: controlType.ARRAY,
   },
-];
+  data: { control: controlType.ARRAY },
+};
 
-export function TableStory() {
-  return (
-    <StoryWrapper>
-      <Table columns={columns} data={data} />
-    </StoryWrapper>
-  );
-}
+TableStory.storyName = storyName.platform.tables.table.NAME;
diff --git a/app/client/src/components/stories/TableDropdown.stories.tsx b/app/client/src/components/stories/TableDropdown.stories.tsx
index a8884e78e297..3c5f3f0a1613 100644
--- a/app/client/src/components/stories/TableDropdown.stories.tsx
+++ b/app/client/src/components/stories/TableDropdown.stories.tsx
@@ -1,33 +1,24 @@
 import React from "react";
-import { withKnobs, select } from "@storybook/addon-knobs";
 import { withDesign } from "storybook-addon-designs";
-import TableDropdown from "components/ads/TableDropdown";
+import TableDropdown, { DropdownProps } from "components/ads/TableDropdown";
 import { Position } from "@blueprintjs/core/lib/esm/common/position";
 import { StoryWrapper } from "components/ads/common";
-import { noop } from "utils/AppsmithUtils";
+import { storyName } from "./config/constants";
+import { controlType, statusType } from "./config/types";
+import { action } from "@storybook/addon-actions";
 
 export default {
-  title: "Dropdown",
+  title: storyName.platform.tables.tableDropdown.PATH,
   component: TableDropdown,
-  decorators: [withKnobs, withDesign],
-};
-
-const options = [
-  {
-    name: "Admin",
-    desc: "Can edit, view and invite other user to an app",
-  },
-  {
-    name: "Developer",
-    desc: "Can view and invite other user to an app",
+  decorators: [withDesign],
+  parameters: {
+    status: {
+      type: statusType.STABLE,
+    },
   },
-  {
-    name: "User",
-    desc: "Can view and invite other user to an app and...",
-  },
-];
+};
 
-export function TableDropdownStory() {
+export function TableDropdownStory(args: DropdownProps) {
   return (
     <StoryWrapper
       style={{
@@ -36,12 +27,38 @@ export function TableDropdownStory() {
         justifyContent: "center",
       }}
     >
-      <TableDropdown
-        onSelect={noop}
-        options={options}
-        position={select("position", Object.values(Position), Position.BOTTOM)}
-        selectedIndex={0}
-      />
+      <TableDropdown {...args} onSelect={action("option-selected")} />
     </StoryWrapper>
   );
 }
+
+TableDropdownStory.args = {
+  options: [
+    {
+      name: "Admin",
+      desc: "Can edit, view and invite other user to an app",
+    },
+    {
+      name: "Developer",
+      desc: "Can view and invite other user to an app",
+    },
+    {
+      name: "User",
+      desc: "Can view and invite other user to an app and...",
+    },
+  ],
+  selectedIndex: 0,
+  position: Position.BOTTOM,
+};
+
+TableDropdownStory.argTypes = {
+  position: {
+    control: controlType.SELECT,
+    options: Object.values(Position),
+  },
+  fill: { control: controlType.BOOLEAN },
+  options: { control: controlType.ARRAY },
+  selectedIndex: { control: controlType.NUMBER },
+};
+
+TableDropdownStory.storyName = storyName.platform.tables.tableDropdown.NAME;
diff --git a/app/client/src/components/stories/TextInput.stories.tsx b/app/client/src/components/stories/TextInput.stories.tsx
index 8cf0a2ca199d..ddd7422811bc 100644
--- a/app/client/src/components/stories/TextInput.stories.tsx
+++ b/app/client/src/components/stories/TextInput.stories.tsx
@@ -41,7 +41,7 @@ Primary.args = {
   defaultValue: "",
   readOnly: false,
   dataType: "text",
-  leftIcon: undefined,
+  leftIcon: "Select icon" as IconName,
   helperText: "",
   disabled: false,
   validator: true,
diff --git a/app/client/src/components/stories/config/constants.tsx b/app/client/src/components/stories/config/constants.tsx
index 5da6b65a2d7b..dfe956666c89 100644
--- a/app/client/src/components/stories/config/constants.tsx
+++ b/app/client/src/components/stories/config/constants.tsx
@@ -70,5 +70,15 @@ export const storyName = {
         NAME: "MenuItem",
       },
     },
+    tables: {
+      tableDropdown: {
+        PATH: "Platform/Tables/TableDropdown",
+        NAME: "TableDropdown",
+      },
+      table: {
+        PATH: "Platform/Tables/Table",
+        NAME: "Table",
+      },
+    },
   },
 };

From 2dda58b93e1364fa90ad6f51a6c56580efe4bf3d Mon Sep 17 00:00:00 2001
From: haojin111 <haojin828@outlook.com>
Date: Mon, 23 Aug 2021 15:48:55 +0800
Subject: [PATCH 06/10] removed unnecessary module

---
 app/client/src/components/stories/Table.stories.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/client/src/components/stories/Table.stories.tsx b/app/client/src/components/stories/Table.stories.tsx
index 5663b5ceab53..e2c1a9f9775d 100644
--- a/app/client/src/components/stories/Table.stories.tsx
+++ b/app/client/src/components/stories/Table.stories.tsx
@@ -5,11 +5,10 @@ import Button, { Category, Size } from "components/ads/Button";
 import Icon, { IconSize } from "components/ads/Icon";
 import TableDropdown from "components/ads/TableDropdown";
 import { Position } from "@blueprintjs/core/lib/esm/common/position";
-import { StoryWrapper, Variant } from "components/ads/common";
+import { Variant } from "components/ads/common";
 import { noop } from "utils/AppsmithUtils";
 import { storyName } from "./config/constants";
 import { controlType, statusType } from "./config/types";
-import { action } from "@storybook/addon-actions";
 
 export default {
   title: storyName.platform.tables.table.PATH,

From 912ddfdd8c28808f83fb2dfa720c004808e1c32e Mon Sep 17 00:00:00 2001
From: haojin111 <haojin828@outlook.com>
Date: Mon, 23 Aug 2021 16:19:20 +0800
Subject: [PATCH 07/10] updated story of tabs component

---
 app/client/src/components/ads/Tabs.tsx        |   2 +-
 .../src/components/stories/Tabs.stories.tsx   | 106 +++++++-----------
 .../components/stories/config/constants.tsx   |   4 +
 3 files changed, 43 insertions(+), 69 deletions(-)

diff --git a/app/client/src/components/ads/Tabs.tsx b/app/client/src/components/ads/Tabs.tsx
index c6eb17ea44c2..fd45629a257a 100644
--- a/app/client/src/components/ads/Tabs.tsx
+++ b/app/client/src/components/ads/Tabs.tsx
@@ -151,7 +151,7 @@ function DefaultTabItem(props: TabItemProps) {
   );
 }
 
-type TabbedViewComponentType = CommonComponentProps & {
+export type TabbedViewComponentType = CommonComponentProps & {
   tabs: Array<TabProp>;
   selectedIndex?: number;
   onSelect?: (tabIndex: number) => void;
diff --git a/app/client/src/components/stories/Tabs.stories.tsx b/app/client/src/components/stories/Tabs.stories.tsx
index 2f14910f445f..ab82e7db21f5 100644
--- a/app/client/src/components/stories/Tabs.stories.tsx
+++ b/app/client/src/components/stories/Tabs.stories.tsx
@@ -1,21 +1,35 @@
 import React from "react";
-import { TabComponent, TabProp } from "components/ads/Tabs";
-import { select, text, withKnobs } from "@storybook/addon-knobs";
 import { withDesign } from "storybook-addon-designs";
-import { IconCollection, IconName } from "components/ads/Icon";
+import { TabComponent, TabbedViewComponentType } from "components/ads/Tabs";
 import { StoryWrapper } from "components/ads/common";
+import { storyName } from "./config/constants";
+import { controlType, statusType } from "./config/types";
+import { action } from "@storybook/addon-actions";
 
 export default {
-  title: "Tabs",
+  title: storyName.platform.tabs.PATH,
   component: TabComponent,
-  decorators: [withKnobs, withDesign],
+  decorators: [withDesign],
+  parameters: {
+    status: {
+      type: statusType.STABLE,
+    },
+  },
 };
 
-function TabStory(props: any) {
-  const tabArr: TabProp[] = [
+export function TabsStory(args: TabbedViewComponentType) {
+  return (
+    <StoryWrapper>
+      <TabComponent {...args} onSelect={action("tab-selected")} />
+    </StoryWrapper>
+  );
+}
+
+TabsStory.args = {
+  tabs: [
     {
       key: "1",
-      title: props.title1,
+      title: "General",
       panelComponent: (
         <div
           style={{
@@ -26,11 +40,11 @@ function TabStory(props: any) {
           }}
         />
       ),
-      icon: props.icon1,
+      icon: "",
     },
     {
       key: "2",
-      title: props.title2,
+      title: "User",
       panelComponent: (
         <div
           style={{
@@ -41,11 +55,11 @@ function TabStory(props: any) {
           }}
         />
       ),
-      icon: props.icon2,
+      icon: "user",
     },
     {
       key: "3",
-      title: props.title3,
+      title: "Billing",
       panelComponent: (
         <div
           style={{
@@ -56,62 +70,18 @@ function TabStory(props: any) {
           }}
         />
       ),
-      icon: props.icon3,
+      icon: "bill",
     },
-  ];
-
-  if (props.icon4 || props.title4) {
-    tabArr.push({
-      key: "4",
-      title: props.title4,
-      panelComponent: (
-        <div
-          style={{
-            backgroundColor: "grey",
-            width: "100%",
-            height: "100%",
-            overflow: "hidden",
-          }}
-        />
-      ),
-      icon: props.icon4,
-    });
-  }
+  ],
+  overflow: false,
+  vertical: false,
+};
 
-  return (
-    <StoryWrapper>
-      <TabComponent tabs={tabArr} />
-    </StoryWrapper>
-  );
-}
+TabsStory.argTypes = {
+  overflow: { control: controlType.BOOLEAN },
+  vertical: { control: controlType.BOOLEAN },
+  tabs: { control: controlType.ARRAY },
+  selectedIndex: { control: controlType.NUMBER },
+};
 
-export function Tabs() {
-  return (
-    <TabStory
-      icon1={select(
-        "Icon 1",
-        ["Select icon" as IconName, ...IconCollection],
-        "Select icon" as IconName,
-      )}
-      icon2={select(
-        "Icon 2",
-        ["Select icon" as IconName, ...IconCollection],
-        "Select icon" as IconName,
-      )}
-      icon3={select(
-        "Icon 3",
-        ["Select icon" as IconName, ...IconCollection],
-        "Select icon" as IconName,
-      )}
-      icon4={select(
-        "Icon 4",
-        ["Select icon" as IconName, ...IconCollection],
-        "Select icon" as IconName,
-      )}
-      title1={text("Title 1", "General")}
-      title2={text("Title 2", "User")}
-      title3={text("Title 3", "Billing")}
-      title4={text("Title 4", "")}
-    />
-  );
-}
+TabsStory.storyName = storyName.platform.tabs.NAME;
diff --git a/app/client/src/components/stories/config/constants.tsx b/app/client/src/components/stories/config/constants.tsx
index dfe956666c89..466cfabf4503 100644
--- a/app/client/src/components/stories/config/constants.tsx
+++ b/app/client/src/components/stories/config/constants.tsx
@@ -80,5 +80,9 @@ export const storyName = {
         NAME: "Table",
       },
     },
+    tabs: {
+      PATH: "Platform/Tabs",
+      NAME: "Tabs",
+    },
   },
 };

From 218275966f4d6ea7c240ce4f3de3f1bd0c550ace Mon Sep 17 00:00:00 2001
From: haojin111 <haojin828@outlook.com>
Date: Mon, 23 Aug 2021 16:59:34 +0800
Subject: [PATCH 08/10] updated story of text component

---
 .../src/components/stories/Text.stories.tsx   | 112 ++++++++----------
 .../components/stories/config/constants.tsx   |   4 +
 2 files changed, 53 insertions(+), 63 deletions(-)

diff --git a/app/client/src/components/stories/Text.stories.tsx b/app/client/src/components/stories/Text.stories.tsx
index eac0b0bc0f24..8e2c2567f069 100644
--- a/app/client/src/components/stories/Text.stories.tsx
+++ b/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;
diff --git a/app/client/src/components/stories/config/constants.tsx b/app/client/src/components/stories/config/constants.tsx
index 466cfabf4503..d414e8abf3bd 100644
--- a/app/client/src/components/stories/config/constants.tsx
+++ b/app/client/src/components/stories/config/constants.tsx
@@ -84,5 +84,9 @@ export const storyName = {
       PATH: "Platform/Tabs",
       NAME: "Tabs",
     },
+    text: {
+      PATH: "Platform/Text",
+      NAME: "Text",
+    },
   },
 };

From 4c352fbe8287fbfb799fb94bfc4ae56a07121164 Mon Sep 17 00:00:00 2001
From: haojin111 <haojin828@outlook.com>
Date: Tue, 24 Aug 2021 14:57:35 +0800
Subject: [PATCH 09/10] updated stories of toast and tooltip

---
 app/client/src/components/ads/Toast.tsx       |   2 +-
 app/client/src/components/ads/Tooltip.tsx     |   2 +-
 .../components/stories/Dropdown.stories.tsx   |   2 +-
 .../components/stories/TextInput.stories.tsx  |   8 --
 .../src/components/stories/Toast.stories.tsx  | 101 ++++++++++++++----
 .../components/stories/Tooltip.stories.tsx    |  59 ++++++----
 .../components/stories/config/constants.tsx   |   8 ++
 7 files changed, 126 insertions(+), 56 deletions(-)

diff --git a/app/client/src/components/ads/Toast.tsx b/app/client/src/components/ads/Toast.tsx
index 6abdf53cde06..8d8de8066b0b 100644
--- a/app/client/src/components/ads/Toast.tsx
+++ b/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;
diff --git a/app/client/src/components/ads/Tooltip.tsx b/app/client/src/components/ads/Tooltip.tsx
index 59276a17a1c9..c9cc0378c4cd 100644
--- a/app/client/src/components/ads/Tooltip.tsx
+++ b/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;
diff --git a/app/client/src/components/stories/Dropdown.stories.tsx b/app/client/src/components/stories/Dropdown.stories.tsx
index 59deeaeabb02..a2d33ea288c3 100644
--- a/app/client/src/components/stories/Dropdown.stories.tsx
+++ b/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,
diff --git a/app/client/src/components/stories/TextInput.stories.tsx b/app/client/src/components/stories/TextInput.stories.tsx
index ddd7422811bc..f3b1bd480dc7 100644
--- a/app/client/src/components/stories/TextInput.stories.tsx
+++ b/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,
diff --git a/app/client/src/components/stories/Toast.stories.tsx b/app/client/src/components/stories/Toast.stories.tsx
index a00507090f09..82f3ee011ef7 100644
--- a/app/client/src/components/stories/Toast.stories.tsx
+++ b/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,62 @@ 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;
+
+// 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"),
+//     });
+//   }, []);
+
+//   return (
+//     <StoryWrapper>
+//       <StyledToastContainer
+//         autoClose={5000}
+//         closeButton={false}
+//         draggable={false}
+//         hideProgressBar
+//         pauseOnHover={false}
+//         transition={Slide}
+//       />
+//       <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"),
+//           });
+//         }}
+//         size={Size.large}
+//         text="Show toast message"
+//         variant={Variant.info}
+//       />
+//     </StoryWrapper>
+//   );
+// }
diff --git a/app/client/src/components/stories/Tooltip.stories.tsx b/app/client/src/components/stories/Tooltip.stories.tsx
index 806fc7d47782..1b41d8befe8b 100644
--- a/app/client/src/components/stories/Tooltip.stories.tsx
+++ b/app/client/src/components/stories/Tooltip.stories.tsx
@@ -1,35 +1,48 @@
 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",
+  // minWidth: "250px",
+  // openOnTargetFocus: true,
+  // autoFocus: true,
+  // hoverOpenDelay: 500,
+  // minimal: false,
+  // isOpen: false,
+  // modifiers: { preventOverflow: { enabled: true } },
+};
+
+TooltipStory.argTypes = {};
+
+TooltipStory.storyName = storyName.platform.tooltip.NAME;
diff --git a/app/client/src/components/stories/config/constants.tsx b/app/client/src/components/stories/config/constants.tsx
index d414e8abf3bd..2a6c0ef88285 100644
--- a/app/client/src/components/stories/config/constants.tsx
+++ b/app/client/src/components/stories/config/constants.tsx
@@ -88,5 +88,13 @@ export const storyName = {
       PATH: "Platform/Text",
       NAME: "Text",
     },
+    toast: {
+      PATH: "Platform/Toast",
+      NAME: "Toast",
+    },
+    tooltip: {
+      PATH: "Platform/Tooltip",
+      NAME: "Tooltip",
+    },
   },
 };

From 05e80faf6f14421676684635aa78311e7c88de06 Mon Sep 17 00:00:00 2001
From: haojin111 <haojin828@outlook.com>
Date: Tue, 24 Aug 2021 16:25:29 +0800
Subject: [PATCH 10/10] removed commented code

---
 .../src/components/stories/Toast.stories.tsx  | 38 -------------------
 .../components/stories/Tooltip.stories.tsx    |  7 ----
 2 files changed, 45 deletions(-)

diff --git a/app/client/src/components/stories/Toast.stories.tsx b/app/client/src/components/stories/Toast.stories.tsx
index 82f3ee011ef7..fd8df20ea4ca 100644
--- a/app/client/src/components/stories/Toast.stories.tsx
+++ b/app/client/src/components/stories/Toast.stories.tsx
@@ -68,41 +68,3 @@ ToastStory.argTypes = {
 };
 
 ToastStory.storyName = storyName.platform.toast.NAME;
-
-// 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"),
-//     });
-//   }, []);
-
-//   return (
-//     <StoryWrapper>
-//       <StyledToastContainer
-//         autoClose={5000}
-//         closeButton={false}
-//         draggable={false}
-//         hideProgressBar
-//         pauseOnHover={false}
-//         transition={Slide}
-//       />
-//       <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"),
-//           });
-//         }}
-//         size={Size.large}
-//         text="Show toast message"
-//         variant={Variant.info}
-//       />
-//     </StoryWrapper>
-//   );
-// }
diff --git a/app/client/src/components/stories/Tooltip.stories.tsx b/app/client/src/components/stories/Tooltip.stories.tsx
index 1b41d8befe8b..f9a70d113ab1 100644
--- a/app/client/src/components/stories/Tooltip.stories.tsx
+++ b/app/client/src/components/stories/Tooltip.stories.tsx
@@ -34,13 +34,6 @@ TooltipStory.args = {
   content: "I'm a hover over text.",
   position: Position.RIGHT,
   boundary: "viewport",
-  // minWidth: "250px",
-  // openOnTargetFocus: true,
-  // autoFocus: true,
-  // hoverOpenDelay: 500,
-  // minimal: false,
-  // isOpen: false,
-  // modifiers: { preventOverflow: { enabled: true } },
 };
 
 TooltipStory.argTypes = {};