First draft: add chromatic/storybook

This commit is contained in:
Matthew Wang 2023-04-24 13:20:58 -07:00
parent e0231653a8
commit 7e6bbb9e6a
No known key found for this signature in database
GPG Key ID: 0C8DB42BF157DEAB
11 changed files with 20010 additions and 31 deletions

15
.babelrc.json Normal file
View File

@ -0,0 +1,15 @@
{
"sourceType": "unambiguous",
"presets": [
[
"@babel/preset-env",
{
"targets": {
"chrome": 100
}
}
],
"@babel/preset-typescript"
],
"plugins": []
}

17
.storybook/main.js Normal file
View File

@ -0,0 +1,17 @@
/** @type { import('@storybook/html-webpack5').StorybookConfig } */
const config = {
stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
],
framework: {
name: "@storybook/html-webpack5",
options: {},
},
docs: {
autodocs: "tag",
},
}
export default config

14
.storybook/preview.js Normal file
View File

@ -0,0 +1,14 @@
/** @type { import('@storybook/html').Preview } */
const preview = {
parameters: {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
},
}
export default preview

View File

@ -48,6 +48,7 @@ exclude:
- Dockerfile - Dockerfile
# theme test code # theme test code
- fixtures/ - fixtures/
- stories/
# Set a path/url to a logo that will be displayed instead of the title # Set a path/url to a logo that will be displayed instead of the title
#logo: "/assets/images/just-the-docs.png" #logo: "/assets/images/just-the-docs.png"

19812
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,13 +1,25 @@
{ {
"name": "just-the-docs", "name": "just-the-docs",
"version": "0.3.3", "version": "0.5.0",
"description": "A modern Jekyll theme for documentation", "description": "A modern Jekyll theme for documentation",
"repository": "just-the-docs/just-the-docs", "repository": "just-the-docs/just-the-docs",
"license": "MIT", "license": "MIT",
"bugs": "https://github.com/just-the-docs/just-the-docs/issues", "bugs": "https://github.com/just-the-docs/just-the-docs/issues",
"devDependencies": { "devDependencies": {
"@babel/preset-env": "^7.21.4",
"@babel/preset-typescript": "^7.21.4",
"@storybook/addon-essentials": "^7.0.7",
"@storybook/addon-interactions": "^7.0.7",
"@storybook/addon-links": "^7.0.7",
"@storybook/blocks": "^7.0.7",
"@storybook/html": "^7.0.7",
"@storybook/html-webpack5": "^7.0.7",
"@storybook/testing-library": "^0.0.14-next.2",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"prettier": "^2.8.8", "prettier": "^2.8.8",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"storybook": "^7.0.7",
"stylelint": "^15.6.0", "stylelint": "^15.6.0",
"stylelint-config-standard-scss": "^8.0.0" "stylelint-config-standard-scss": "^8.0.0"
}, },
@ -16,7 +28,9 @@
"lint:css": "stylelint '**/*.scss'", "lint:css": "stylelint '**/*.scss'",
"lint:formatting": "prettier --check '**/*.{scss,js,json}'", "lint:formatting": "prettier --check '**/*.{scss,js,json}'",
"format": "prettier --write '**/*.{scss,js,json}'", "format": "prettier --write '**/*.{scss,js,json}'",
"test": "npm run lint" "test": "npm run lint",
"storybook": "bundle exec jekyll build && storybook dev -p 6006",
"build-storybook": "bundle exec jekyll build && storybook build"
}, },
"stylelint": { "stylelint": {
"ignoreFiles": [ "ignoreFiles": [

7
stories/Introduction.mdx Normal file
View File

@ -0,0 +1,7 @@
import { Meta } from '@storybook/blocks';
<Meta title="Example/Introduction" />
# Storybook for Just the Docs
A WIP [Storybook](https://storybook.js.org/) for Just the Docs.

View File

@ -0,0 +1,11 @@
import "../../_site/assets/css/just-the-docs-default.css"
export const createButton = ({ variant = "default", label, size = "4" }) => {
const btn = document.createElement("button")
btn.type = "button"
btn.innerText = label
btn.className = ["btn", `btn-${variant}`, `fs-${size}`].join(" ")
return btn
}

View File

@ -0,0 +1,68 @@
import { createButton } from "./Button"
export default {
title: "UI Components/Button",
tags: ["autodocs"],
render: ({ label, ...args }) => {
return createButton({ label, ...args })
},
argTypes: {
label: { control: "text" },
size: {
control: { type: "select" },
options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
},
variant: {
control: { type: "select" },
options: ["default", "primary", "purple", "blue", "green", "outline"],
},
},
}
export const Default = {
args: {
variant: "default",
label: "Button",
size: 4,
},
}
export const Primary = {
args: {
variant: "primary",
label: "Button",
size: 4,
},
}
export const Purple = {
args: {
variant: "purple",
label: "Button",
size: 4,
},
}
export const Blue = {
args: {
variant: "blue",
label: "Button",
size: 4,
},
}
export const Green = {
args: {
variant: "green",
label: "Button",
size: 4,
},
}
export const Outline = {
args: {
variant: "outline",
label: "Button",
size: 4,
},
}

View File

@ -0,0 +1,10 @@
import "../../_site/assets/css/just-the-docs-default.css"
export const createLabel = ({ variant = "default", label, size = "4" }) => {
const btn = document.createElement("span")
btn.innerText = label
btn.className = ["label", `label-${variant}`, `fs-${size}`].join(" ")
return btn
}

View File

@ -0,0 +1,68 @@
import { createLabel } from "./Label"
export default {
title: "UI Components/Label",
tags: ["autodocs"],
render: ({ label, ...args }) => {
return createLabel({ label, ...args })
},
argTypes: {
label: { control: "text" },
size: {
control: { type: "select" },
options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
},
variant: {
control: { type: "select" },
options: ["default", "purple", "blue", "green", "red", "yellow"],
},
},
}
export const Default = {
args: {
variant: "default",
label: "Label",
size: 4,
},
}
export const Purple = {
args: {
variant: "purple",
label: "Label",
size: 4,
},
}
export const Blue = {
args: {
variant: "blue",
label: "Label",
size: 4,
},
}
export const Green = {
args: {
variant: "green",
label: "Label",
size: 4,
},
}
export const Red = {
args: {
variant: "red",
label: "Label",
size: 4,
},
}
export const Yellow = {
args: {
variant: "yellow",
label: "Label",
size: 4,
},
}