forked from wraft/wraft-frontend
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(doc): add ui component to storybook (wraft#13)
* feat(doc): add errorBoundary storybook component * feat(doc): add drawer storybook component * fix: update ErrorBoundary * feat(doc): add link Storybook component * feat(doc): add onConfirm and onClose props to Modal component * feat(doc): add modal storybook component * feat(doc): add showPageSize and pageSizeLabel props to Paginate component * feat(doc): add paginate storybook component * fix(doc): export SkeletonProps interface in Skeleton component * feat(doc): add skeleton storybook component * feat(doc): add table storybook component * feat(doc): add spinner storybook component * refactor(doc): update spinner storybook component * refactor(doc): update storybook component and styling in stories * refactor(doc): Removed recent changes and restored the previous logic * refactor(doc): Removed recent changes * refactor(doc): Removed recent changes and restored the previous logic * feat(doc): update skeleton storybook component * refactor(doc): Removed recent changes and restored the previous logic * feat(doc): update paginate storybook component
- Loading branch information
Showing
13 changed files
with
802 additions
and
48 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| import { Meta, StoryObj } from "@storybook/react"; | ||
| import React from "react"; | ||
|
|
||
| import { Button } from "../Button"; | ||
|
|
||
| import { Drawer, DrawerOptions, useDrawer } from "./index"; | ||
|
|
||
| export default { | ||
| title: "Overlay/Drawer", | ||
| component: Drawer, | ||
| decorators: [ | ||
| (Story) => ( | ||
| <div | ||
| style={{ | ||
| display: "flex", | ||
| justifyContent: "center", | ||
| alignItems: "center", | ||
| }} | ||
| > | ||
| <Story /> | ||
| </div> | ||
| ), | ||
| ], | ||
| parameters: { | ||
| layout: "centered", | ||
| }, | ||
| argTypes: { | ||
| placement: { | ||
| control: { | ||
| type: "select", | ||
| }, | ||
| options: ["top", "right", "bottom", "left"], | ||
| description: "Position of the drawer", | ||
| defaultValue: "right", | ||
| }, | ||
| withBackdrop: { | ||
| control: { | ||
| type: "boolean", | ||
| }, | ||
| description: "Show backdrop behind drawer", | ||
| defaultValue: true, | ||
| }, | ||
| hideOnInteractOutside: { | ||
| control: { | ||
| type: "boolean", | ||
| }, | ||
| description: "Close drawer when clicking outside", | ||
| defaultValue: true, | ||
| }, | ||
| }, | ||
| tags: ["autodocs"], | ||
| } as Meta<DrawerOptions>; | ||
|
|
||
| const DrawerDemo: React.FC<Partial<DrawerOptions>> = ({ | ||
| placement = "right", | ||
| withBackdrop = true, | ||
| hideOnInteractOutside = true, | ||
| }) => { | ||
| const dialog = useDrawer(); | ||
|
|
||
| return ( | ||
| <> | ||
| <Button variant="primary" onClick={dialog.show}> | ||
| Open Drawer | ||
| </Button> | ||
| <Drawer | ||
| store={dialog} | ||
| placement={placement as DrawerOptions["placement"]} | ||
| withBackdrop={withBackdrop} | ||
| hideOnInteractOutside={hideOnInteractOutside} | ||
| > | ||
| <Drawer.Header> | ||
| <Drawer.Title>Drawer Title</Drawer.Title> | ||
| <button onClick={dialog.hide}>✕</button> | ||
| </Drawer.Header> | ||
| <div style={{ padding: "2rem" }}> | ||
| <h4 | ||
| style={{ | ||
| marginBottom: "1rem", | ||
| fontSize: "1.125rem", | ||
| fontWeight: 500, | ||
| }} | ||
| > | ||
| Drawer Content | ||
| </h4> | ||
| <p>This is the content of the drawer. You can put anything here.</p> | ||
| </div> | ||
| </Drawer> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export const Default: StoryObj<DrawerOptions> = { | ||
| render: () => <DrawerDemo />, | ||
| }; | ||
|
|
||
| export const LeftPlacement: StoryObj<DrawerOptions> = { | ||
| render: () => <DrawerDemo placement="left" />, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
56 changes: 56 additions & 0 deletions
56
packages/ui/src/components/ErrorBoundary/ErrorBoundary.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import type { Meta, StoryObj } from "@storybook/react"; | ||
| import React from "react"; | ||
|
|
||
| import ErrorBoundary from "."; | ||
|
|
||
| interface ErrorBoundaryComponentProps { | ||
| children: React.ReactNode; | ||
| message?: string; | ||
| } | ||
|
|
||
| const ErrorThrowingComponent = () => { | ||
| throw new Error("This is a test error."); | ||
| }; | ||
|
|
||
| const NormalComponent = () => <div>Everything is working fine!</div>; | ||
|
|
||
| const meta: Meta<ErrorBoundaryComponentProps> = { | ||
| title: "Layout/ErrorBoundary", | ||
| component: ErrorBoundary, | ||
| tags: ["autodocs"], | ||
| argTypes: { | ||
| children: { | ||
| control: false, | ||
| }, | ||
| message: { | ||
| control: { type: "text" }, | ||
| description: "Custom error message to display", | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export default meta; | ||
|
|
||
| type Story = StoryObj<ErrorBoundaryComponentProps>; | ||
|
|
||
| export const Default: Story = { | ||
| render: (args) => ( | ||
| <ErrorBoundary {...args}> | ||
| <NormalComponent /> | ||
| </ErrorBoundary> | ||
| ), | ||
| args: { | ||
| message: "Something went wrong.", | ||
| }, | ||
| }; | ||
|
|
||
| export const WithError: Story = { | ||
| render: (args) => ( | ||
| <ErrorBoundary {...args}> | ||
| <ErrorThrowingComponent /> | ||
| </ErrorBoundary> | ||
| ), | ||
| args: { | ||
| message: "Something went wrong.", | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| import type { Meta, StoryObj } from "@storybook/react"; | ||
| import { HomeIcon, ArrowRightIcon } from "@wraft/icon"; | ||
|
|
||
| import { Link } from "./index"; | ||
|
|
||
| const meta: Meta<typeof Link> = { | ||
| title: "Action/Link", | ||
| component: Link, | ||
| parameters: { | ||
| layout: "centered", | ||
| }, | ||
| tags: ["autodocs"], | ||
| argTypes: { | ||
| variant: { | ||
| control: { type: "select" }, | ||
| options: ["primary", "secondary", "outlined", "disabled", "googleLogin"], | ||
| }, | ||
| size: { | ||
| control: { type: "select" }, | ||
| options: ["xxs", "xs", "sm", "md", "lg", "full"], | ||
| }, | ||
| type: { | ||
| control: "radio", | ||
| options: ["link", "button"], | ||
| }, | ||
| disabled: { | ||
| control: { type: "boolean" }, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof Link>; | ||
|
|
||
| const Template: Story = { | ||
| args: { | ||
| type: "link", | ||
| }, | ||
| }; | ||
|
|
||
| export const SimpleLink: Story = { | ||
| ...Template, | ||
| args: { | ||
| ...Template.args, | ||
| children: "Click here to learn more", | ||
| variant: "outlined", | ||
| type: "link", | ||
| }, | ||
| }; | ||
|
|
||
| export const ButtonLink: Story = { | ||
| ...Template, | ||
| args: { | ||
| ...Template.args, | ||
| children: ( | ||
| <span style={{ display: "flex", alignItems: "center", gap: "8px" }}> | ||
| Get Started | ||
| <ArrowRightIcon /> | ||
| </span> | ||
| ), | ||
| variant: "outlined", | ||
| type: "button", | ||
| size: "md", | ||
| }, | ||
| }; | ||
|
|
||
| export const IconLink: Story = { | ||
| ...Template, | ||
| args: { | ||
| ...Template.args, | ||
| children: ( | ||
| <span style={{ display: "flex", alignItems: "center", gap: "8px" }}> | ||
| <HomeIcon /> | ||
| View Documentation | ||
| </span> | ||
| ), | ||
| variant: "outlined", | ||
| type: "link", | ||
| size: "sm", | ||
| }, | ||
| }; | ||
|
|
||
| export const DisabledLink: Story = { | ||
| ...Template, | ||
| args: { | ||
| ...Template.args, | ||
| children: "Not Available", | ||
| variant: "disabled", | ||
| type: "link", | ||
| disabled: true, | ||
| }, | ||
| }; | ||
|
|
||
| export const LinkVariant: Story = { | ||
| args: { | ||
| type: "link", | ||
| }, | ||
| decorators: [ | ||
| (Story, context) => ( | ||
| <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}> | ||
| <Link {...context.args} variant="outlined" type="link"> | ||
| Outlined Link | ||
| </Link> | ||
| <Link {...context.args} variant="primary" type="button"> | ||
| Primary Button Link | ||
| </Link> | ||
| <Link {...context.args} variant="secondary" type="link"> | ||
| Secondary Link | ||
| </Link> | ||
| </div> | ||
| ), | ||
| ], | ||
| }; |
Oops, something went wrong.