Create a storybook with callout component (github#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`	`}`
-Original file line number
+Diff line change
     "@graphql-tools/load": "^7.0.1",
     "@jest/globals": "^27.0.6",
     "@octokit/rest": "^18.7.1",
 +    "@storybook/addon-actions": "^6.3.7",
 +    "@storybook/addon-essentials": "^6.3.7",
 +    "@storybook/addon-links": "^6.3.7",
 +    "@storybook/preset-scss": "^1.0.3",
 +    "@storybook/react": "^6.3.7",
     "@types/github-slugger": "^1.3.0",
     "@types/imurmurhash": "^0.1.1",
     "@types/js-cookie": "^2.2.7",
     "@typescript-eslint/parser": "^4.28.5",
     "async": "^3.2.0",
     "await-sleep": "0.0.1",
 +    "babel-loader": "^8.2.2",
     "babel-plugin-styled-components": "^1.13.2",
     "babel-preset-env": "^1.7.0",
     "chalk": "^4.1.1",
     "rimraf": "^3.0.2",
     "robots-parser": "^2.3.0",
     "sass": "^1.36.0",
 +    "sass-loader": "^10.2.0",
     "start-server-and-test": "^1.13.1",
     "strip-ansi": "^7.0.0",
     "supertest": "^6.1.4",
     "browser-test": "start-server-and-test browser-test-server 4001 browser-test-tests",
     "browser-test-server": "cross-env NODE_ENV=production WEB_CONCURRENCY=1 PORT=4001 node server.mjs",
     "browser-test-tests": "cross-env BROWSER=1 NODE_OPTIONS=--experimental-vm-modules jest tests/browser/browser.js",
 -    "build": "next build",
 +    "build": "next build && npm run build-storybook",
 +    "build-storybook": "build-storybook -o ./storybook",
     "debug": "cross-env NODE_ENV=development ENABLED_LANGUAGES='en,ja' nodemon --inspect server.mjs",
     "dev": "npm start",
     "heroku-postbuild": "node script/early-access/clone-for-build.js && npm run build",
     "rest-dev": "script/rest/update-files.js && npm run dev",
     "start": "cross-env NODE_ENV=development ENABLED_LANGUAGES='en,ja' nodemon server.mjs",
     "start-all-languages": "cross-env NODE_ENV=development nodemon server.mjs",
 +    "storybook": "start-storybook -p 6006",
     "sync-search": "start-server-and-test sync-search-server 4002 sync-search-indices",
     "sync-search-dry-run": "cross-env DRY_RUN=1 npm run sync-search",
     "sync-search-ghes-release": "cross-env GHES_RELEASE=1 start-server-and-test sync-search-server 4002 sync-search-indices",
-Original file line number
+Diff line change
 This website uses a Sass preprocessor, and gets most of its styles from GitHub's
 [Primer](https://primer.style) design system.
 -All styles come from:
+-
 -```html
 -<link rel="stylesheet" href="/dist/index.css">
 -```
+-
 -`index.css` is a compiled version of `index.scss`, where all imported scss files are declared.
 +All styles come from imports in our Next.js compnents (pages, components).
 In general, we use Primer's [utility classes](https://styleguide.github.com/primer/utilities/)
 as much as we can, and avoid writing custom styles whenever possible.
-Original file line number
+Diff line change
       '.github/workflows/sync-search-indices.yml',
       '.next',
       'contributing/search.md',
 -      'dist',
       'node_modules',
       'translations',
       'lib/rest/**/*.json',
       '**/*.woff',
       'script/deploy',
       'script/README.md',
 +      'storybook',
     ],
   })