Merge pull request #71 from code-hike/add-storybook-docs

Add storybook docs

Author: pomber

.gitignore

@@ -5,4 +5,5 @@ dist
 yarn-error.log
 .prettierignore
 .env
-.vscode
+.vscode
+storybook-static

.gitmodules

@@ -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 --stream",
     "dev": "lerna run --scope react-website dev --stream",
     "release": "auto shipit"
   },

contributing.md

@@ -1,11 +1,26 @@
 import React from "react"
 
 type MiniBrowserStep = {
+  /**
+   * The url to display on the navigation bar.
+   */
   url?: string
+  /**
+   * Override the url used for the iframe and "Open in new tab" button.
+   */
   loadUrl?: string
-  children?: React.ReactNode
+  /**
+   * Scale the content of the browser.
+   */
   zoom?: number
+  /**
+   * Prepend the current origin to the url.
+   */
   prependOrigin?: boolean
+  /**
+   * The content to display in the browser. If not provided, an iframe for the url will be displayed.
+   */
+  children?: React.ReactNode
 }
 
 type InternalStep = {

external/new-react-website

@@ -3,8 +3,9 @@
   "private": true,
   "version": "0.3.0-next.0",
   "scripts": {
-    "start": "start-storybook -c ./src",
-    "build-storybook": "build-storybook -c ./src -o ./dist"
+    "start": "start-storybook -c ./src -s ./public",
+    "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",
@@ -17,16 +18,16 @@
     "@code-hike/sim-user": "0.3.0-next.0",
     "@code-hike/smooth-column": "0.3.0-next.0",
     "@code-hike/smooth-lines": "0.3.0-next.0",
-    "@storybook/addon-actions": "^6.0.26",
-    "@storybook/addon-controls": "^6.0.26",
-    "@storybook/addon-docs": "^6.0.26",
     "prism-svelte": "^0.4.7",
     "react": "^16.9.0",
     "react-dom": "^16.9.0"
   },
   "devDependencies": {
     "@babel/core": "^7.4.5",
-    "@storybook/react": "^6.0.26",
+    "@storybook/addon-essentials": "^6.3.0",
+    "@storybook/addons": "^6.3.2",
+    "@storybook/react": "^6.3.0",
+    "@storybook/theming": "^6.3.2",
     "babel-loader": "^8.0.6",
     "chromatic": "^5.9.2"
   }

external/site

@@ -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: {

package.json

@@ -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

packages/mini-browser/src/use-steps.tsx

@@ -0,0 +1,6 @@
+// importing and exporting components
+// so we can use them with Storybook's ArgsTable
+
+import * as mb from "@code-hike/mini-browser"
+
+export const MiniBrowser = mb.MiniBrowser

packages/storybook/package.json

@@ -0,0 +1,7 @@
+import { Meta, Story, Canvas } from "@storybook/addon-docs"
+
+<Meta title="Code Hike" />
+
+The docs for Code Hike's building blocks.
+
+For more info and higher level packages, see [codehike.org](https://codehike.org).

packages/storybook/public/codehike.png

@@ -1,8 +1,20 @@
 module.exports = {
-  stories: ["*.story.js"],
+  stories: ["intro.story.mdx", "*.story.@(js|mdx|tsx)"],
   addons: [
     "@storybook/addon-docs",
     "@storybook/addon-controls",
     "@storybook/addon-actions",
   ],
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+    reactDocgenTypescriptOptions: {
+      propFilter: prop => true,
+      // componentNameResolver: (exp, source) =>
+      //   console.log("!!!$$$", exp, source) || true,
+      compilerOptions: {
+        allowSyntheticDefaultImports: false,
+        esModuleInterop: false,
+      },
+    },
+  },
 }

packages/storybook/public/favicon-16x16.png

@@ -0,0 +1,24 @@
+<link
+  rel="icon"
+  type="image/png"
+  sizes="32x32"
+  href="/favicon-32x32.png"
+/>
+<link
+  rel="icon"
+  type="image/png"
+  sizes="16x16"
+  href="/favicon-16x16.png"
+/>
+
+<style>
+  .sidebar-header > *:first-child {
+    margin: 0;
+  }
+  .sidebar-header > *:nth-child(2) {
+    display: none;
+  }
+  .search-field {
+    display: none !important;
+  }
+</style>

packages/storybook/public/favicon-32x32.png

@@ -0,0 +1,38 @@
+import { addons } from "@storybook/addons"
+import { create } from "@storybook/theming"
+
+const isProd = process.env.NODE_ENV === "production"
+
+// https://storybook.js.org/docs/react/configure/theming
+const theme = create({
+  base: "light",
+  brandTitle: "Code Hike",
+  brandUrl: "https://codehike.org",
+  brandImage: "/codehike.png",
+  appBg: "#ffffff",
+  appContentBg: "#eaedf6",
+})
+
+// https://storybook.js.org/docs/react/configure/features-and-behavior
+addons.setConfig({
+  theme,
+  isFullscreen: false,
+  showNav: true,
+  showPanel: false,
+  panelPosition: "bottom",
+  enableShortcuts: false,
+  isToolshown: true,
+  selectedPanel: undefined,
+  initialActive: "sidebar",
+  sidebar: {
+    showRoots: true,
+    collapsedRoots: ["test"],
+  },
+  toolbar: {
+    title: { hidden: false },
+    zoom: { hidden: true },
+    eject: { hidden: false },
+    copy: { hidden: true },
+    fullscreen: { hidden: true },
+  },
+})

packages/storybook/public/favicon-96x96.png

@@ -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 = () => (

packages/storybook/public/favicon.ico

@@ -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 = () => (

packages/storybook/public/logo.png

@@ -0,0 +1,67 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  ArgsTable,
+} from "@storybook/addon-docs"
+import { MiniBrowser } from "./components"
+
+<Meta
+  title="Mini Browser"
+  component={MiniBrowser}
+  argTypes={{ url: { control: { type: "text" } } }}
+/>
+
+# `<MiniBrowser />`
+
+Import it with:
+
+```js
+import { MiniBrowser } from "@code-hike/mini-browser"
+```
+
+A component that looks like a browser.
+
+### Usage without `children`
+
+If you don't pass `children`, it will show an iframe using the `url` prop. If you want to display an url but load a different one use the `loadUrl` prop.
+
+export const Template = props => <MiniBrowser {...props} />
+
+<Canvas>
+  <Story
+    name="MiniBrowser without children"
+    args={{
+      url: "google.com",
+      loadUrl: "https://whatismyviewport.com/",
+      zoom: 0.5,
+      style: { height: "200px" },
+    }}
+    argTypes={{ url: { control: { type: "text" } } }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="MiniBrowser without children" />
+
+## Usage with `children`
+
+If you pass `children`, it will render the children inside the iframe.
+
+<Canvas>
+  <Story
+    name="MiniBrowser with children"
+    args={{
+      url: "google.com",
+      loadUrl: "https://whatismyviewport.com/",
+      style: { height: "200px" },
+      children: <h1>This is a child</h1>,
+    }}
+    argTypes={{ url: { control: { type: "text" } } }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

packages/storybook/src/code.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)`

packages/storybook/src/column.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 = () => {

packages/storybook/src/components.tsx

@@ -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)

packages/storybook/src/intro.story.mdx

@@ -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 = () => (

packages/storybook/src/main.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 = () => (

packages/storybook/src/manager-head.html

@@ -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

packages/storybook/src/manager.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]

packages/storybook/src/mini-browser-hike.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() {

packages/storybook/src/mini-browser.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)

packages/storybook/src/mini-browser.story.mdx

@@ -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: {