mirror of https://github.com/coder/coder.git
refactor: Add storybook + initial story (#118)
This hooks up `storybook`, which the front-end team has enjoyed using in the v1 codebase - it makes it quick and easy to view and test components in isolation. The `<LoadingButton />` has a simple story added now, so if you run `yarn storybook`, you can preview it in various states: ![2022-01-31 19 24 24](https://user-images.githubusercontent.com/88213859/151908656-27dac0a8-9c6e-4353-ad25-3eafee979bd4.gif) This will be helpful as we bring more front-end devs to help build v2 out.
This commit is contained in:
parent
c65850b654
commit
94f71feeba
|
@ -198,6 +198,9 @@ jobs:
|
|||
- run: yarn build
|
||||
working-directory: site
|
||||
|
||||
- run: yarn storybook:build
|
||||
working-directory: site
|
||||
|
||||
- run: yarn test:coverage
|
||||
working-directory: site
|
||||
|
||||
|
|
|
@ -19,6 +19,7 @@ yarn-error.log
|
|||
site/.eslintcache
|
||||
site/.next/
|
||||
site/node_modules/
|
||||
site/storybook-static/
|
||||
site/yarn-error.log
|
||||
coverage/
|
||||
|
||||
|
|
|
@ -5,4 +5,5 @@ node_modules
|
|||
vendor
|
||||
out
|
||||
coverage
|
||||
.next
|
||||
.next
|
||||
storybook-static
|
|
@ -14,3 +14,4 @@ yarn-error.log
|
|||
.next/
|
||||
coverage/
|
||||
out/
|
||||
storybook-static/
|
||||
|
|
|
@ -0,0 +1,16 @@
|
|||
const path = require("path")
|
||||
|
||||
module.exports = {
|
||||
stories: ["../**/*.stories.mdx", "../**/*.stories.@(js|jsx|ts|tsx)"],
|
||||
addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
|
||||
babel: async (options) => ({
|
||||
...options,
|
||||
plugins: ["@babel/plugin-proposal-class-properties"],
|
||||
// any extra options you want to set
|
||||
}),
|
||||
webpackFinal: async (config) => {
|
||||
config.resolve.modules = [path.resolve(__dirname, ".."), "node_modules"]
|
||||
|
||||
return config
|
||||
},
|
||||
}
|
|
@ -0,0 +1,20 @@
|
|||
import ThemeProvider from "@material-ui/styles/ThemeProvider"
|
||||
import { withThemes } from "@react-theming/storybook-addon"
|
||||
import { light, dark } from "../theme"
|
||||
import { addDecorator } from "node_modules/@storybook/react"
|
||||
|
||||
addDecorator(withThemes(ThemeProvider, [light, dark]))
|
||||
|
||||
export const parameters = {
|
||||
actions: {
|
||||
argTypesRegex: "^on[A-Z].*",
|
||||
argTypesRegex: "^handle[A-Z].*",
|
||||
},
|
||||
controls: {
|
||||
expanded: true,
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/,
|
||||
},
|
||||
},
|
||||
}
|
|
@ -0,0 +1,26 @@
|
|||
import { Story } from "@storybook/react"
|
||||
import React from "react"
|
||||
import { LoadingButton, LoadingButtonProps } from "./LoadingButton"
|
||||
|
||||
export default {
|
||||
title: "Button/LoadingButton",
|
||||
component: LoadingButton,
|
||||
argTypes: {
|
||||
loading: { control: { type: "boolean" } },
|
||||
children: { control: "text", defaultValue: "Create workspace" },
|
||||
},
|
||||
}
|
||||
|
||||
const Template: Story<LoadingButtonProps> = (args) => <LoadingButton {...args} />
|
||||
|
||||
export const Loading = Template.bind({})
|
||||
Loading.args = {
|
||||
variant: "contained",
|
||||
loading: true,
|
||||
}
|
||||
|
||||
export const NotLoading = Template.bind({})
|
||||
NotLoading.args = {
|
||||
variant: "contained",
|
||||
loading: false,
|
||||
}
|
|
@ -41,5 +41,6 @@ module.exports = {
|
|||
"!<rootDir>/next-env.d.ts",
|
||||
"!<rootDir>/next.config.js",
|
||||
"!<rootDir>/out/**/*.*",
|
||||
"!<rootDir>/storybook-static/**/*.*",
|
||||
],
|
||||
}
|
||||
|
|
|
@ -12,6 +12,8 @@
|
|||
"format:write": "prettier --write '**/*.{css,html,js,json,jsx,md,ts,tsx,yaml,yml}' && sql-formatter -l postgresql ./database/query.sql -o ./database/query.sql",
|
||||
"lint": "jest --selectProjects lint",
|
||||
"lint:fix": "FIX=true yarn lint",
|
||||
"storybook": "start-storybook -p 6006 -s ./static",
|
||||
"storybook:build": "build-storybook",
|
||||
"test": "jest --selectProjects test",
|
||||
"test:coverage": "jest --selectProjects test --collectCoverage"
|
||||
},
|
||||
|
@ -19,6 +21,11 @@
|
|||
"@material-ui/core": "4.9.4",
|
||||
"@material-ui/icons": "4.5.1",
|
||||
"@material-ui/lab": "4.0.0-alpha.42",
|
||||
"@react-theming/storybook-addon": "1.1.3",
|
||||
"@storybook/addon-actions": "6.3.12",
|
||||
"@storybook/addon-essentials": "6.3.12",
|
||||
"@storybook/addon-links": "6.3.12",
|
||||
"@storybook/react": "6.3.12",
|
||||
"@testing-library/react": "12.1.2",
|
||||
"@types/express": "4.17.13",
|
||||
"@types/jest": "27.4.0",
|
||||
|
|
8149
site/yarn.lock
8149
site/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue