New mini browser docs

Author: pomber

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

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

packages/storybook/src/components.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/src/intro.story.mdx

@@ -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/src/main.js

@@ -1,12 +1,20 @@
 module.exports = {
-  stories: [
-    "mini-editor.docs.story.js",
-    "*.story.mdx",
-    "*.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/src/mini-browser.story.mdx

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