Add docs script

pomber · pomber · commit 9ec621d23686 · 2021-07-07T10:47:33.000+01:00
diff --git a/.gitignore b/.gitignore
@@ -5,4 +5,5 @@ dist
 yarn-error.log
 .prettierignore
 .env
-.vscode
+.vscode
+storybook-static
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "watch-package": "lerna run --scope @*/mini-frame --include-dependencies --parallel x -- watch",
     "watch-all": "lerna run --parallel x -- watch",
     "storybook": "lerna run --scope storybook start --stream",
+    "docs": "lerna run build-docs",
     "dev": "lerna run --scope react-website dev --stream",
     "release": "auto shipit"
   },
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -4,7 +4,8 @@
   "version": "0.3.0-next.0",
   "scripts": {
     "start": "start-storybook -c ./src -s ./public",
-    "build-storybook": "build-storybook -c ./src -s ./public -o ./dist"
+    "build-storybook": "build-storybook -c ./src -s ./public -o ./dist",
+    "build-docs": "build-storybook -c ./src -s ./public --docs"
   },
   "dependencies": {
     "@code-hike/code-diff": "0.3.0-next.0",
diff --git a/packages/storybook/src/code.story.js b/packages/storybook/src/code.story.js
@@ -4,7 +4,7 @@ import { WithProgress } from "./utils"
 import { codeDiff } from "@code-hike/code-diff"
 
 export default {
-  title: "Smooth Code",
+  title: "Test/Smooth Code",
   argTypes: {
     center: { control: "boolean" },
     containerWidth: {
diff --git a/packages/storybook/src/column.story.js b/packages/storybook/src/column.story.js
@@ -3,7 +3,7 @@ import { WithProgress } from "./utils"
 import { SmoothColumn } from "@code-hike/smooth-column"
 
 export default {
-  title: "Smooth Column",
+  title: "Test/Smooth Column",
 }
 export const oneExitOneEnter = () => {
   const padding = 10
diff --git a/packages/storybook/src/main.js b/packages/storybook/src/main.js
@@ -1,5 +1,9 @@
 module.exports = {
-  stories: ["*.story.js"],
+  stories: [
+    "mini-editor.docs.story.js",
+    "*.story.mdx",
+    "*.story.js",
+  ],
   addons: [
     "@storybook/addon-docs",
     "@storybook/addon-controls",
diff --git a/packages/storybook/src/mini-browser-hike.story.js b/packages/storybook/src/mini-browser-hike.story.js
@@ -4,7 +4,7 @@ import "@code-hike/mini-browser/dist/index.css"
 import { WithProgress, Page } from "./utils"
 
 export default {
-  title: "Mini Browser Hike",
+  title: "Test/Mini Browser Hike",
 }
 
 export const basic = () => (
diff --git a/packages/storybook/src/mini-browser.story.js b/packages/storybook/src/mini-browser.story.js
@@ -4,7 +4,7 @@ import "@code-hike/mini-browser/dist/index.css"
 import { WithProgress, Page } from "./utils"
 
 export default {
-  title: "Mini Browser",
+  title: "Test/Mini Browser",
 }
 
 export const basic = () => (
diff --git a/packages/storybook/src/mini-editor-hike.story.js b/packages/storybook/src/mini-editor-hike.story.js
@@ -4,7 +4,7 @@ import { Page, WithProgress } from "./utils"
 import "@code-hike/mini-editor/dist/index.css"
 
 export default {
-  title: "Mini Editor Hike",
+  title: "Test/Mini Editor Hike",
 }
 
 const code1 = `console.log(1)`
diff --git a/packages/storybook/src/mini-editor-hike.story.mdx b/packages/storybook/src/mini-editor-hike.story.mdx
@@ -0,0 +1,31 @@
+<!--- Checkbox.stories.mdx -->
+
+import { Meta, Story, Canvas } from "@storybook/addon-docs"
+import { MiniEditorTween } from "@code-hike/mini-editor"
+
+<Meta
+  title="Mini Editor Hike"
+  component={MiniEditorTween}
+/>
+
+# Checkbox
+
+With `MDX`, we can define a story for `Checkbox` right in the middle of our
+Markdown documentation.
+
+<!--- This is your Story template function, shown here in React -->
+
+export const Template = ({ codeProps }) => (
+  <MiniEditorTween codeProps={codeProps} />
+)
+
+<Canvas>
+  <Story
+    name="Unchecked"
+    args={{
+      codeProps: "Unchecked",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
diff --git a/packages/storybook/src/mini-editor-tween.story.js b/packages/storybook/src/mini-editor-tween.story.js
@@ -4,7 +4,7 @@ import { WithProgress } from "./utils"
 import "@code-hike/mini-editor/dist/index.css"
 
 export default {
-  title: "Mini Editor Tween",
+  title: "Test/Mini Editor Tween",
 }
 
 export const oneToOne = () => {
diff --git a/packages/storybook/src/mini-editor.docs.story.js b/packages/storybook/src/mini-editor.docs.story.js
@@ -0,0 +1,80 @@
+import React from "react"
+import {
+  MiniEditor as Editor,
+  MiniEditor,
+} from "@code-hike/mini-editor"
+import { Page } from "./utils"
+import "@code-hike/mini-editor/dist/index.css"
+
+export default {
+  title: "Mini Editor",
+  component: MiniEditor,
+  parameters: {
+    componentSubtitle:
+      "Displays an image that represents a user or organization",
+  },
+  argTypes: {
+    label: {
+      description: "Overwritten description",
+      table: {
+        type: {
+          summary: "Something short",
+          detail: "Something really really long",
+        },
+      },
+      control: {
+        type: null,
+      },
+    },
+  },
+}
+
+const code1 = `console.log(1)
+console.log(2)
+console.log(3)
+console.log(4)
+console.log(5)`
+
+export const focusEditor = () => {
+  const [input, setInput] = React.useState("1:5")
+  const [focus, setFocus] = React.useState(null)
+  return (
+    <Page>
+      <div style={{ margin: "20px auto", display: "flex" }}>
+        <input
+          value={input}
+          onChange={e => setInput(e.target.value)}
+        />
+        <button onClick={_ => setFocus(input)}>
+          Focus
+        </button>
+      </div>
+      <Editor
+        code={code1}
+        filename="index.js"
+        focus={focus}
+        lang="js"
+      />
+    </Page>
+  )
+}
+
+export const codeEditor = () => {
+  const [input, setInput] = React.useState(code1)
+  const [code, setCode] = React.useState(code1)
+  return (
+    <Page>
+      <div style={{ margin: "20px auto", display: "flex" }}>
+        <textarea
+          value={input}
+          onChange={e => setInput(e.target.value)}
+          rows={5}
+        />
+        <button onClick={_ => setCode(input)}>
+          Change
+        </button>
+      </div>
+      <Editor code={code} filename="index.js" lang="js" />
+    </Page>
+  )
+}
diff --git a/packages/storybook/src/mini-editor.story.js b/packages/storybook/src/mini-editor.story.js
@@ -4,7 +4,7 @@ import { Page } from "./utils"
 import "@code-hike/mini-editor/dist/index.css"
 
 export default {
-  title: "Mini Editor",
+  title: "Test/Mini Editor",
 }
 
 const code1 = `console.log(1)
diff --git a/packages/storybook/src/mini-frame.story.js b/packages/storybook/src/mini-frame.story.js
@@ -7,7 +7,7 @@ import "@code-hike/mini-frame/dist/index.css"
 import { Page } from "./utils"
 
 export default {
-  title: "Mini Frame",
+  title: "Test/Mini Frame",
 }
 
 export const basic = () => (
diff --git a/packages/storybook/src/mini-terminal.story.js b/packages/storybook/src/mini-terminal.story.js
@@ -7,7 +7,7 @@ import { WithProgress, Page } from "./utils"
 import "@code-hike/mini-terminal/dist/index.css"
 
 export default {
-  title: "Mini Terminal",
+  title: "Test/Mini Terminal",
 }
 
 export const basic = () => (
diff --git a/packages/storybook/src/player.story.js b/packages/storybook/src/player.story.js
@@ -4,7 +4,7 @@ import { Video, Controls } from "@code-hike/player"
 import videoSrc from "./assets/timer.mp4"
 
 export default {
-  title: "Player",
+  title: "Test/Player",
 }
 
 const src = videoSrc
diff --git a/packages/storybook/src/scroller.story.js b/packages/storybook/src/scroller.story.js
@@ -3,7 +3,7 @@ import { Page } from "./utils"
 import { Scroller, Step } from "@code-hike/scroller"
 
 export default {
-  title: "Scroller",
+  title: "Test/Scroller",
 }
 
 const steps = [1, 2, 3, 4, 5, 6, 7]
diff --git a/packages/storybook/src/scrollycoding.story.js b/packages/storybook/src/scrollycoding.story.js
@@ -15,7 +15,7 @@ import RepeatedSteps from "./assets/scrollycoding.repeat.mdx"
 import { MDXProvider } from "@mdx-js/react"
 
 export default {
-  title: "ScrollyCoding",
+  title: "Test/ScrollyCoding",
 }
 
 export function basic() {
diff --git a/packages/storybook/src/sim-user.story.js b/packages/storybook/src/sim-user.story.js
@@ -3,7 +3,7 @@ import { Page } from "./utils"
 import { sim } from "@code-hike/sim-user"
 
 export default {
-  title: "Sim User",
+  title: "Test/Sim User",
 }
 export const click = () => {
   const [count, setCount] = React.useState(0)
diff --git a/packages/storybook/src/smooth-lines.story.js b/packages/storybook/src/smooth-lines.story.js
@@ -3,7 +3,7 @@ import { SmoothLines } from "@code-hike/smooth-lines"
 import { WithProgress } from "./utils"
 
 export default {
-  title: "Smooth Lines",
+  title: "Test/Smooth Lines",
   argTypes: {
     center: { control: "boolean" },
     containerWidth: {
diff --git a/packages/storybook/src/steps.story.js b/packages/storybook/src/steps.story.js
@@ -13,7 +13,7 @@ import "prism-svelte"
 import "./assets/styles.css"
 
 export default {
-  title: "Steps From MDX",
+  title: "Test/Steps From MDX",
 }
 
 export function basic() {

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ import { WithProgress } from "./utils"`
`3`	`3`	`import { SmoothColumn } from "@code-hike/smooth-column"`
`4`	`4`
`5`	`5`	`export default {`
`6`		`- title: "Smooth Column",`
	`6`	`+ title: "Test/Smooth Column",`
`7`	`7`	`}`
`8`	`8`	`export const oneExitOneEnter = () => {`
`9`	`9`	`const padding = 10`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ import "@code-hike/mini-browser/dist/index.css"`
`4`	`4`	`import { WithProgress, Page } from "./utils"`
`5`	`5`
`6`	`6`	`export default {`
`7`		`- title: "Mini Browser Hike",`
	`7`	`+ title: "Test/Mini Browser Hike",`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	`export const basic = () => (`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ import { Page, WithProgress } from "./utils"`
`4`	`4`	`import "@code-hike/mini-editor/dist/index.css"`
`5`	`5`
`6`	`6`	`export default {`
`7`		`- title: "Mini Editor Hike",`
	`7`	`+ title: "Test/Mini Editor Hike",`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	const code1 = `console.log(1)`