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/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 ( - - - Hi there, I am h1 element. - Hi there, I am h2 element. - Hi there, I am h3 element. - Hi there, I am h4 element. - Hi there, I am h5 element. - Hi there, I am h6 element. - - -
- - - Hi there, I am p1 element. - Hi there, I am p2 element. - Hi there, I am p3 element. - - - ); +export function TextStory(args: TextProps) { + return Hi there, I am {args.type} element.; } -function ValueWrapper(props: { type: TextType; value: string }) { - return ( - - {props.value} - - ); -} +TextStory.args = { + type: TextType.H1, + underline: false, + italic: false, + case: Case.CAPITALIZE, + className: "", + weight: FontWeight.NORMAL, + highlight: false, + textAlign: "left", +}; -export function CustomizeText() { - return ( - - - - ); -} +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/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..fd8df20ea4ca 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 ( { - Toaster.show({ - text: text("message", "Application name saved successfully"), - duration: number("duration", 5000), - variant: select("variant", Object.values(Variant), Variant.success), - onUndo: action("on-undo"), - }); + action("button-clicked"); + Toaster.show(args); }} size={Size.large} text="Show toast message" @@ -49,3 +47,24 @@ export function ToastStory() { ); } + +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; diff --git a/app/client/src/components/stories/Tooltip.stories.tsx b/app/client/src/components/stories/Tooltip.stories.tsx index 806fc7d47782..f9a70d113ab1 100644 --- a/app/client/src/components/stories/Tooltip.stories.tsx +++ b/app/client/src/components/stories/Tooltip.stories.tsx @@ -1,35 +1,41 @@ import React from "react"; -import { select, withKnobs } from "@storybook/addon-knobs"; import { withDesign } from "storybook-addon-designs"; import { Position } from "@blueprintjs/core"; -import TooltipComponent from "components/ads/Tooltip"; -import { StoryWrapper } from "components/ads/common"; -import Text, { TextType } from "components/ads/Text"; +import TooltipComponent, { TooltipProps } from "components/ads/Tooltip"; +import { StoryWrapper, Variant } from "components/ads/common"; +import Button from "components/ads/Button"; +import { storyName } from "./config/constants"; +import { statusType } from "./config/types"; +import { action } from "@storybook/addon-actions"; export default { - title: "Tooltip", + title: storyName.platform.tooltip.PATH, component: TooltipComponent, - decorators: [withKnobs, withDesign], + decorators: [withDesign], + parameters: { + status: { + type: statusType.BETA, + }, + }, }; -export function MenuStory() { +export function TooltipStory(args: TooltipProps) { return ( - -
- - This is a tooltip - - } - position={select("Position", Object.values(Position), Position.RIGHT)} - variant={select("variant", ["dark", "light"], "dark")} - > - - Hover to show tooltip - - -
+ +
+ +