Create a storybook with callout component (#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"
   ]

package.json

@@ -103,6 +103,11 @@
     "@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",
@@ -114,6 +119,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",
@@ -160,6 +166,7 @@
     "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",
@@ -186,7 +193,8 @@
     "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",
@@ -204,6 +212,7 @@
     "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",

stylesheets/README.md

@@ -3,13 +3,7 @@
 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.

tests/meta/repository-references.js

@@ -53,7 +53,6 @@ describe('check if a GitHub-owned private repository is referenced', () => {
       '.github/workflows/sync-search-indices.yml',
       '.next',
       'contributing/search.md',
-      'dist',
       'node_modules',
       'translations',
       'lib/rest/**/*.json',
@@ -72,6 +71,7 @@ describe('check if a GitHub-owned private repository is referenced', () => {
       '**/*.woff',
       'script/deploy',
       'script/README.md',
+      'storybook',
     ],
   })