Create a storybook with callout component (#20902)

heiskr · web-flow · commit ae7b652463f3 · 2021-08-17T20:28:59.000Z
* Create a storybook with callout component

* Add to dist/storybook

* Remove references to dist dir, storybook takes place

* Update Callout.stories.tsx

* Update Dockerfile

* Update Dockerfile
diff --git a/.eslintignore b/.eslintignore
@@ -1 +1 @@
-dist/
+storybook/
diff --git a/.gitignore b/.gitignore
@@ -10,6 +10,7 @@ coverage/
 /data/early-access
 .next
 .eslintcache
+/storybook/
 
 # blc: broken link checker
 blc_output.log
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -0,0 +1,9 @@
+const path = require('path')
+
+module.exports = {
+  stories: [
+    '../components/stories/**/*.stories.mdx',
+    '../components/stories/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/preset-scss'],
+}
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -0,0 +1,11 @@
+import '../stylesheets/index.scss'
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
diff --git a/Dockerfile b/Dockerfile
@@ -48,6 +48,7 @@ COPY content/index.md ./content/index.md
 COPY next.config.js ./next.config.js
 COPY tsconfig.json ./tsconfig.json
 COPY next-env.d.ts ./next-env.d.ts
+COPY .storybook ./.storybook
 
 RUN npx tsc --noEmit
 
diff --git a/components/stories/Callout.stories.tsx b/components/stories/Callout.stories.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+
+// @ts-ignore
+import { Callout } from '../ui/Callout.tsx'
+
+export default {
+  title: 'UI/Callout',
+  component: Callout,
+} as ComponentMeta<typeof Callout>
+
+const Template: ComponentStory<typeof Callout> = (args) => <Callout {...args} />
+
+export const Success = Template.bind({})
+Success.args = {
+  variant: 'success',
+  children: <p>Hello!</p>,
+}
+
+export const Info = Template.bind({})
+Info.args = {
+  variant: 'info',
+  children: <p>Hello!</p>,
+}
+
+export const Warning = Template.bind({})
+Warning.args = {
+  variant: 'warning',
+  children: <p>Hello!</p>,
+}
diff --git a/components/stories/Introduction.stories.mdx b/components/stories/Introduction.stories.mdx
@@ -0,0 +1,12 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Example/Introduction" />
+
+# Welcome to Storybook
+
+Storybook helps you build UI components in isolation from your app's business logic, data, and context.
+That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
+
+Browse example stories now by navigating to them in the sidebar.
+View their code in the `src/stories` directory to learn how they work.
+We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
diff --git a/contributing/development.md b/contributing/development.md
@@ -28,7 +28,7 @@ When you're ready to stop your local server, type <kbd>CTRL</kbd><kbd>c</kbd> in
 
 Note that `npm ci` and `npm run build` are steps that should typically only need to be run once each time you pull the latest for a branch.
  - `npm ci` does a clean install of dependencies, without updating the `package-lock.json` file
- - `npm run build` creates static assets, such as the `dist/index.js` and `dist/index.css` files
+ - `npm run build` creates static assets, such as JavaScript and CSS files
 
 ### Using GitHub Codespaces
 
diff --git a/middleware/csp.js b/middleware/csp.js
@@ -70,5 +70,10 @@ export default function csp(req, res, next) {
     csp.directives.scriptSrc.push("'unsafe-inline'")
   }
 
+  if (req.path.startsWith('/storybook')) {
+    csp.directives.scriptSrc.push("'unsafe-eval'", "'unsafe-inline'")
+    csp.directives.frameSrc.push("'self'")
+  }
+
   return contentSecurityPolicy(csp)(req, res, next)
 }
diff --git a/middleware/index.js b/middleware/index.js
@@ -137,19 +137,20 @@ export default function (app) {
 
   // *** Rendering, 2xx responses ***
   // I largely ordered these by use frequency
+  // archivedEnterpriseVersionsAssets must come before static/assets
   app.use(
     asyncMiddleware(
       instrument(archivedEnterpriseVersionsAssets, './archived-enterprise-versions-assets')
     )
-  ) // Must come before static/assets
+  )
   app.use(
-    '/dist',
-    express.static('dist', {
+    '/storybook',
+    express.static('storybook', {
       index: false,
       etag: false,
       immutable: true,
       lastModified: false,
-      maxAge: '28 days', // Could be infinite given our fingerprinting
+      maxAge: '1 day', // Relatively short in case we update index.html
     })
   )
   app.use(
diff --git a/nodemon.json b/nodemon.json
@@ -2,10 +2,8 @@
   "ext": "js,json,yml,md,html,scss",
   "ignore": [
     "assets",
-    "scripts",
+    "script",
     "translations",
-    "dist",
-    "javascripts",
     "stylesheets",
     "tests"
   ]
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/stylesheets/README.md b/stylesheets/README.md
diff --git a/tests/meta/repository-references.js b/tests/meta/repository-references.js

Original file line number	Diff line number	Diff line change
`@@ -70,5 +70,10 @@ export default function csp(req, res, next) {`
`70`	`70`	`csp.directives.scriptSrc.push("'unsafe-inline'")`
`71`	`71`	`}`
`72`	`72`
	`73`	`+ if (req.path.startsWith('/storybook')) {`
	`74`	`+ csp.directives.scriptSrc.push("'unsafe-eval'", "'unsafe-inline'")`
	`75`	`+ csp.directives.frameSrc.push("'self'")`
	`76`	`+ }`
	`77`	`+`
`73`	`78`	`return contentSecurityPolicy(csp)(req, res, next)`
`74`	`79`	`}`