Create a storybook with callout component (github#20902)

* 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

.eslintignore

@@ -1 +1 @@
-dist/
+storybook/

.gitignore

@@ -10,6 +10,7 @@ coverage/
 /data/early-access
 .next
 .eslintcache
+/storybook/
 
 # blc: broken link checker
 blc_output.log

.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'],
+}

.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$/,
+    },
+  },
+}

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
 

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>,
+}

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.

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
 

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

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(

nodemon.json

@@ -2,10 +2,8 @@
   "ext": "js,json,yml,md,html,scss",
   "ignore": [
     "assets",
-    "scripts",
+    "script",
     "translations",
-    "dist",
-    "javascripts",
     "stylesheets",
     "tests"
   ]