mirror of
https://github.com/snachodog/just-the-docs.git
synced 2025-07-01 00:22:23 -06:00
First draft: add chromatic/storybook
This commit is contained in:
parent
e0231653a8
commit
7e6bbb9e6a
15
.babelrc.json
Normal file
15
.babelrc.json
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"sourceType": "unambiguous",
|
||||||
|
"presets": [
|
||||||
|
[
|
||||||
|
"@babel/preset-env",
|
||||||
|
{
|
||||||
|
"targets": {
|
||||||
|
"chrome": 100
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"@babel/preset-typescript"
|
||||||
|
],
|
||||||
|
"plugins": []
|
||||||
|
}
|
17
.storybook/main.js
Normal file
17
.storybook/main.js
Normal 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
14
.storybook/preview.js
Normal 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
|
@ -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
19812
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
18
package.json
18
package.json
@ -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
7
stories/Introduction.mdx
Normal 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.
|
11
stories/ui-components/Button.js
Normal file
11
stories/ui-components/Button.js
Normal 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
|
||||||
|
}
|
68
stories/ui-components/Button.stories.js
Normal file
68
stories/ui-components/Button.stories.js
Normal 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,
|
||||||
|
},
|
||||||
|
}
|
10
stories/ui-components/Label.js
Normal file
10
stories/ui-components/Label.js
Normal 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
|
||||||
|
}
|
68
stories/ui-components/Label.stories.js
Normal file
68
stories/ui-components/Label.stories.js
Normal 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,
|
||||||
|
},
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user