From dd779af1c9886f1d15b37fdd536bb0369e8c9519 Mon Sep 17 00:00:00 2001 From: haojin111 Date: Fri, 20 Aug 2021 15:50:23 +0800 Subject: [PATCH 1/7] 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 Date: Fri, 20 Aug 2021 16:01:38 +0800 Subject: [PATCH 2/7] 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 ( - - - - ); +export function IconSelectorStory(args: IconSelectorProps) { + return ; } + +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 Date: Sat, 21 Aug 2021 17:52:08 +0800 Subject: [PATCH 3/7] 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( theme.colors.appCardColors[0], ); - const [savingState, SetSavingState] = useState( - SavingState.NOT_STARTED, - ); - return (
} + {...args} + onClose={action("menu-closed")} + onOpening={action("menu-opended")} > 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()} /> W} onSelect={action("clicked-first-option")} - text={text("First option", "Invite user")} + text="Invite user" /> - {boolean("First menu item divider", false) ? : null} W} onSelect={action("clicked-second-option")} - text={text("Second option", "Are you sure")} + text="Are you sure" /> - {boolean("Second menu item divider", false) ? : null} + ); } + +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 = {args.label}; + } + return ; +} + +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 Date: Sun, 22 Aug 2021 02:46:31 +0800 Subject: [PATCH 4/7] 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 ( - - - - ); +export function SearchInputStory(args: TextInputProps) { + return ; } + +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 ( +// +// +// +// ); +// } 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 Date: Mon, 23 Aug 2021 15:42:47 +0800 Subject: [PATCH 5/7] 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 ( } - {...args} - onClose={action("menu-closed")} - onOpening={action("menu-opended")} > - ), - col4: "App Access", - col5: ( - - ), - col6: , - }, - { - col1: "Austin Howard", - col2: "dustin_02@jlegue.com", - col3: ( - - ), - col4: "Map Access", - col5: ( - - ), - col6: , - }, - { - col1: "Justing Howard", - col2: "dustin_03@jlegue.com", - col3: ( - - ), - col4: "Dm Access", - col5: ( - - ), - col6: , +export function TableStory(args: TableProps) { + return ; +} + +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: ( + + ), + col4: "App Access", + col5: ( +
- - ); -} +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 ( - + ); } + +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 Date: Mon, 23 Aug 2021 15:48:55 +0800 Subject: [PATCH 6/7] 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 Date: Mon, 23 Aug 2021 16:19:20 +0800 Subject: [PATCH 7/7] 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; 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 ( + + + + ); +} + +TabsStory.args = { + tabs: [ { key: "1", - title: props.title1, + title: "General", panelComponent: (
), - icon: props.icon1, + icon: "", }, { key: "2", - title: props.title2, + title: "User", panelComponent: (
), - icon: props.icon2, + icon: "user", }, { key: "3", - title: props.title3, + title: "Billing", panelComponent: (
), - icon: props.icon3, + icon: "bill", }, - ]; - - if (props.icon4 || props.title4) { - tabArr.push({ - key: "4", - title: props.title4, - panelComponent: ( -
- ), - icon: props.icon4, - }); - } + ], + overflow: false, + vertical: false, +}; - return ( - - - - ); -} +TabsStory.argTypes = { + overflow: { control: controlType.BOOLEAN }, + vertical: { control: controlType.BOOLEAN }, + tabs: { control: controlType.ARRAY }, + selectedIndex: { control: controlType.NUMBER }, +}; -export function Tabs() { - return ( - - ); -} +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", + }, }, };