Task/6744 updating stories

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[];
 }

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;

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;

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}

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"

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

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

@@ -1,43 +1,25 @@
 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 { Variant } from "components/ads/common";
 import { noop } from "utils/AppsmithUtils";
+import { storyName } from "./config/constants";
+import { controlType, statusType } from "./config/types";
 
 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 +36,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;