-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(client): added storybook and Button stories
- Loading branch information
Ivo
committed
May 3, 2023
1 parent
da24e51
commit 787bfa3
Showing
11 changed files
with
7,466 additions
and
1,219 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,49 +1,37 @@ | ||
| module.exports = { | ||
| extends: [ | ||
| "next", | ||
| "eslint:recommended", | ||
| "plugin:@typescript-eslint/recommended", | ||
| "plugin:react/recommended", | ||
| "plugin:react-hooks/recommended", | ||
| "plugin:prettier/recommended" | ||
| ], | ||
| extends: ["next", "eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react/recommended", "plugin:react-hooks/recommended", "plugin:prettier/recommended", "plugin:storybook/recommended"], | ||
| parser: "@typescript-eslint/parser", | ||
| root: true, | ||
| plugins: ["simple-import-sort"], | ||
| rules: { | ||
| "@typescript-eslint/ban-ts-comment": "off", | ||
| "@typescript-eslint/no-var-requires": "off", | ||
| "prettier/prettier": ["warn", { usePrettierrc: true }], | ||
| "prettier/prettier": ["warn", { | ||
| usePrettierrc: true | ||
| }], | ||
| "react/react-in-jsx-scope": "off", | ||
| "react/display-name": "off", | ||
| "@typescript-eslint/no-unused-vars": ["warn"], | ||
| "react/prop-types": "off", | ||
| "react/self-closing-comp": [ | ||
| "warn", | ||
| { | ||
| component: true, | ||
| html: true | ||
| } | ||
| ], | ||
| "react/self-closing-comp": ["warn", { | ||
| component: true, | ||
| html: true | ||
| }], | ||
| "simple-import-sort/exports": "warn", | ||
| "simple-import-sort/imports": [ | ||
| "warn", | ||
| { | ||
| groups: [ | ||
| // Packages `react` related packages come first. | ||
| ["^react", "^@?\\w"], | ||
| // Internal packages. | ||
| ["^(@app)(/.*|$)"], | ||
| // Side effect imports. | ||
| ["^\\u0000"], | ||
| // Parent imports. Put `..` last. | ||
| ["^\\.\\.(?!/?$)", "^\\.\\./?$"], | ||
| // Other relative imports. Put same-folder imports and `.` last. | ||
| ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"], | ||
| // Style imports. | ||
| ["^.+\\.?(css)$"] | ||
| ] | ||
| } | ||
| ] | ||
| "simple-import-sort/imports": ["warn", { | ||
| groups: [ | ||
| // Packages `react` related packages come first. | ||
| ["^react", "^@?\\w"], | ||
| // Internal packages. | ||
| ["^(@app)(/.*|$)"], | ||
| // Side effect imports. | ||
| ["^\\u0000"], | ||
| // Parent imports. Put `..` last. | ||
| ["^\\.\\.(?!/?$)", "^\\.\\./?$"], | ||
| // Other relative imports. Put same-folder imports and `.` last. | ||
| ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"], | ||
| // Style imports. | ||
| ["^.+\\.?(css)$"]] | ||
| }] | ||
| } | ||
| }; | ||
| }; |
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,17 @@ | ||
| import type { StorybookConfig } from "@storybook/nextjs"; | ||
| const config: StorybookConfig = { | ||
| stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], | ||
| addons: [ | ||
| "@storybook/addon-links", | ||
| "@storybook/addon-essentials", | ||
| "@storybook/addon-interactions" | ||
| ], | ||
| framework: { | ||
| name: "@storybook/nextjs", | ||
| options: {} | ||
| }, | ||
| docs: { | ||
| autodocs: "tag" | ||
| } | ||
| }; | ||
| export default config; |
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,16 @@ | ||
| import type { Preview } from "@storybook/react"; | ||
| import "@app/styles/globals.css"; | ||
|
|
||
| const preview: Preview = { | ||
| parameters: { | ||
| actions: { argTypesRegex: "^on[A-Z].*" }, | ||
| controls: { | ||
| matchers: { | ||
| color: /(background|color)$/i, | ||
| date: /Date$/ | ||
| } | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| export default preview; |
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,60 @@ | ||
| import type { Meta, StoryObj } from "@storybook/react"; | ||
| import { ArrowRight, Home } from "lucide-react"; | ||
|
|
||
| import { Button } from "@app/components/Button"; | ||
|
|
||
| const variants = [ | ||
| "bg-primary-500 enabled:hover:bg-primary-600", | ||
| "bg-zinc-500 enabled:hover:bg-zinc-600", | ||
| "bg-red-500 enabled:hover:bg-red-600", | ||
| "bg-amber-500 enabled:hover:bg-amber-600", | ||
| "bg-emerald-500 enabled:hover:bg-emerald-600", | ||
| "bg-sky-500 enabled:hover:bg-sky-600", | ||
| "bg-blue-500 enabled:hover:bg-blue-600", | ||
| "bg-purple-500 enabled:hover:bg-purple-600", | ||
| "bg-pink-500 enabled:hover:bg-pink-600", | ||
| "bg-rose-500 enabled:hover:bg-rose-600" | ||
| ]; | ||
|
|
||
| // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction | ||
| const meta: Meta<typeof Button> = { | ||
| title: "Components/Button/Base", | ||
| component: Button, | ||
| tags: ["autodocs"], | ||
| argTypes: {}, | ||
| render: (args) => ( | ||
| <div className="flex flex-wrap gap-2"> | ||
| {variants.map((variant) => ( | ||
| <Button | ||
| {...args} | ||
| key={variant} | ||
| className={`${variant}`} | ||
| /> | ||
| ))} | ||
| </div> | ||
| ) | ||
| }; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof Button>; | ||
|
|
||
| // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args | ||
| export const NoIcon: Story = { | ||
| args: { | ||
| children: "Button" | ||
| } | ||
| }; | ||
|
|
||
| export const WithLeftIcon: Story = { | ||
| args: { | ||
| children: "Home", | ||
| LeftIcon: Home | ||
| } | ||
| }; | ||
|
|
||
| export const WithRightIcon: Story = { | ||
| args: { | ||
| children: "Continue", | ||
| RightIcon: ArrowRight | ||
| } | ||
| }; |
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,55 @@ | ||
| import type { Meta, StoryObj } from "@storybook/react"; | ||
| import { ArrowRight, Home } from "lucide-react"; | ||
|
|
||
| import { StatusButton } from "@app/components/Button/Status"; | ||
|
|
||
| const variants: ("queued" | "canceled" | "finished" | "running" | "error")[] = [ | ||
| "queued", | ||
| "canceled", | ||
| "finished", | ||
| "running", | ||
| "error" | ||
| ]; | ||
|
|
||
| // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction | ||
| const meta: Meta<typeof StatusButton> = { | ||
| title: "Components/Button/Status", | ||
| component: StatusButton, | ||
| tags: ["autodocs"], | ||
| argTypes: {}, | ||
| render: (args) => ( | ||
| <div className="flex flex-wrap gap-2"> | ||
| {variants.map((variant) => ( | ||
| <StatusButton | ||
| {...args} | ||
| key={variant} | ||
| status={variant} | ||
| /> | ||
| ))} | ||
| </div> | ||
| ) | ||
| }; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof StatusButton>; | ||
|
|
||
| // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args | ||
| export const NoIcon: Story = { | ||
| args: { | ||
| children: "Button" | ||
| } | ||
| }; | ||
|
|
||
| export const WithLeftIcon: Story = { | ||
| args: { | ||
| children: "Home", | ||
| LeftIcon: Home | ||
| } | ||
| }; | ||
|
|
||
| export const WithRightIcon: Story = { | ||
| args: { | ||
| children: "Continue", | ||
| RightIcon: ArrowRight | ||
| } | ||
| }; |
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,60 @@ | ||
| import type { Meta, StoryObj } from "@storybook/react"; | ||
| import { ArrowRight, Home } from "lucide-react"; | ||
|
|
||
| import { TextButton } from "@app/components/Button/Text"; | ||
|
|
||
| const variants = [ | ||
| "text-primary-600 enabled:hover:text-primary-700", | ||
| "text-zinc-600 enabled:hover:text-zinc-700", | ||
| "text-red-600 enabled:hover:text-red-700", | ||
| "text-amber-600 enabled:hover:text-amber-700", | ||
| "text-emerald-600 enabled:hover:text-emerald-700", | ||
| "text-sky-600 enabled:hover:text-sky-700", | ||
| "text-blue-600 enabled:hover:text-blue-700", | ||
| "text-purple-600 enabled:hover:text-purple-700", | ||
| "text-pink-600 enabled:hover:text-pink-700", | ||
| "text-rose-600 enabled:hover:text-rose-700" | ||
| ]; | ||
|
|
||
| // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction | ||
| const meta: Meta<typeof TextButton> = { | ||
| title: "Components/Button/Text", | ||
| component: TextButton, | ||
| tags: ["autodocs"], | ||
| argTypes: {}, | ||
| render: (args) => ( | ||
| <div className="flex flex-wrap gap-2"> | ||
| {variants.map((variant) => ( | ||
| <TextButton | ||
| {...args} | ||
| key={variant} | ||
| className={variant} | ||
| /> | ||
| ))} | ||
| </div> | ||
| ) | ||
| }; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof TextButton>; | ||
|
|
||
| // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args | ||
| export const NoIcon: Story = { | ||
| args: { | ||
| children: "Button" | ||
| } | ||
| }; | ||
|
|
||
| export const WithLeftIcon: Story = { | ||
| args: { | ||
| children: "Home", | ||
| LeftIcon: Home | ||
| } | ||
| }; | ||
|
|
||
| export const WithRightIcon: Story = { | ||
| args: { | ||
| children: "Continue", | ||
| RightIcon: ArrowRight | ||
| } | ||
| }; |
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
Oops, something went wrong.