Storybook lite (github#21040)

* Remove storybook

* Update index.js

* Start a storybook outline

* Start a storybook outline

* Start showing errors

* Update storybook.tsx

* Typescript lint

* Name field

* Responsive

* Update storybook.tsx

* Update storybook.tsx

* Update storybook.tsx

* Add BumpLink to storybook

* Update storybook.tsx

Author: heiskr

components/ui/BumpLink/BumpLink.tsx

@@ -3,14 +3,15 @@ import cx from 'classnames'
 
 import styles from './BumpLink.module.scss'
 
-type Props = {
+export type BumpLinkPropsT = {
   children?: ReactNode
   title: ReactElement<any> | string
   href: string
   as?: ElementType<{ className?: string; href: string }>
   className?: string
 }
-export const BumpLink = ({ as, children, href, title, className }: Props) => {
+
+export const BumpLink = ({ as, children, href, title, className }: BumpLinkPropsT) => {
   const Component = as || 'a'
 
   const symbol = <span className={styles.symbol}>→</span>

components/ui/Callout/Callout.tsx

@@ -2,13 +2,19 @@ import { DOMAttributes, ReactNode } from 'react'
 import cx from 'classnames'
 import styles from './Callout.module.scss'
 
-type Props = {
+export type CalloutPropsT = {
   dangerouslySetInnerHTML?: DOMAttributes<HTMLDivElement>['dangerouslySetInnerHTML']
   variant: 'success' | 'info' | 'warning'
   children?: ReactNode
   className?: string
 }
-export const Callout = ({ variant, className, dangerouslySetInnerHTML, children }: Props) => {
+
+export const Callout = ({
+  variant,
+  className,
+  dangerouslySetInnerHTML,
+  children,
+}: CalloutPropsT) => {
   return (
     <div
       data-testid="callout"

middleware/render-page.js

@@ -6,6 +6,10 @@ import { isConnectionDropped } from './halt-on-dropped-connection.js'
 import { nextApp, nextHandleRequest } from './next.js'
 
 export default async function renderPage(req, res, next) {
+  if (req.path.startsWith('/storybook')) {
+    return nextHandleRequest(req, res)
+  }
+
   const page = req.context.page
   // render a 404 page
   if (!page) {

pages/storybook.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { BumpLink, BumpLinkPropsT } from 'components/ui/BumpLink/BumpLink'
+import { Callout, CalloutPropsT } from 'components/ui/Callout/Callout'
+
+const stories = [
+  {
+    name: 'BumpLink',
+    component: BumpLink,
+    variants: [
+      { title: 'Think basic', href: 'http://example.com' } as BumpLinkPropsT,
+      {
+        title: 'Think different',
+        href: 'http://example.com',
+        children: 'This is child text',
+      } as BumpLinkPropsT,
+      {
+        as: 'div',
+        title: 'Think as div',
+        href: 'http://example.com',
+        className: 'color-bg-warning',
+      } as BumpLinkPropsT,
+    ],
+  },
+  {
+    name: 'Callout', // {component.name} gets optimized away
+    component: Callout,
+    variants: [
+      { variant: 'success', children: 'Yay you did it!', className: '' } as CalloutPropsT,
+      { variant: 'info', children: 'Captain I have information.', className: '' } as CalloutPropsT,
+      { variant: 'warning', children: 'Warning... warning...', className: '' } as CalloutPropsT,
+      { variant: 'success', children: 'I am a little font', className: 'f6' } as CalloutPropsT,
+    ],
+  },
+]
+
+export default function Storybook() {
+  return (
+    <div className="p-4 mx-auto" style={{ maxWidth: 1200 }}>
+      <h1>GitHub Docs Storybook</h1>
+      <p className="f3">This page lists React components unique to the GitHub docs.</p>
+      <div className="my-4 d-lg-flex flex-items-start">
+        <nav className="menu col-12 col-lg-3 mr-4 color-bg-secondary position-lg-sticky top-0">
+          {stories.map(({ name }) => (
+            <a className="menu-item" href={`#${name}`}>
+              {name}
+            </a>
+          ))}
+        </nav>
+        <div className="col-12 col-lg-9">
+          {stories.map(({ name, component, variants }) => (
+            <div id={name} key={name} className="mb-4">
+              <h2 className="position-sticky top-0 color-bg-primary border-bottom">{name}</h2>
+              {variants.map((props) => (
+                <div className="my-4" key={JSON.stringify(props)}>
+                  {/* @ts-ignore */}
+                  {React.createElement(component, props)}
+                  <pre className="mt-2 p-2 color-bg-tertiary border rounded-2">
+                    {JSON.stringify(props, null, 2)}
+                  </pre>
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}