Initial commit

.github/workflows/chromatic.yml

@@ -0,0 +1,46 @@
+name: Chromatic
+on:
+  - push
+jobs:
+  chromatic:
+    name: Chromatic
+    runs-on: ubuntu-latest
+    steps:
+
+      - name: Check out repository
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2-beta
+        with:
+          node-version: 12
+
+      - name: Cache NPM dependencies
+        uses: actions/cache@v2
+        env:
+          cache-hash: ${{ hashFiles('pnpm-lock.yaml') }}
+        with:
+          path: ~/.pnpm-store
+          key: pnpm-os_${{ runner.os }}-node_12-lock_${{ env.cache-hash }}
+          restore-keys: |
+            pnpm-os_${{ runner.os }}-node_12-
+            pnpm-os_${{ runner.os }}-
+            pnpm-
+
+      - name: Pull dependencies
+        uses: pnpm/action-setup@v1.2.0
+        with:
+          version: 5.4.0
+          run_install: true
+
+      - name: Push Storybook to Chromatic
+        uses: chromaui/action@v1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          buildScriptName: 'build:storybook'
+          autoAcceptChanges: master
+          exitZeroOnChanges: true
+          exitOnceUploaded: true

.github/workflows/deploy-docs.yml

@@ -0,0 +1,67 @@
+name: Deploy docs
+on:
+  - push
+jobs:
+  deploy_docs:
+    name: Deploy docs
+    runs-on: ubuntu-latest
+    steps:
+
+      - name: Check out repository
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2-beta
+        with:
+          node-version: 12
+
+      - name: Cache NPM dependencies
+        uses: actions/cache@v2
+        env:
+          cache-hash: ${{ hashFiles('pnpm-lock.yaml') }}
+        with:
+          path: ~/.pnpm-store
+          key: pnpm-os_${{ runner.os }}-node_${{ matrix.node }}-lock_${{ env.cache-hash }}
+          restore-keys: |
+            pnpm-os_${{ runner.os }}-node_${{ matrix.node }}-
+            pnpm-os_${{ runner.os }}-
+            pnpm-
+
+      - name: Pull dependencies
+        uses: pnpm/action-setup@v1.2.0
+        with:
+          version: 5.4.0
+          run_install: true
+
+      - name: Build docs
+        run: |
+          cd apps/docs/
+          npm run build
+
+      - name: Package docs
+        run: |
+          cd apps/docs/
+          npm run package:serverless
+          mkdir -p .netlify
+          cd .netlify
+          mkdir functions
+          cp -a ../.serverless/docs.zip functions/
+          echo "process.env['MODE'] = 'serverless'; module.exports = require('./dist/server/index.js');" > docs.js
+          zip -mv functions/docs.zip docs.js
+          mkdir publish
+          mv ../dist/public/entrypoints.json .
+          cp -a ../dist/public/ publish/public
+          mv entrypoints.json ../dist/public/
+          echo "/* /.netlify/functions/docs/:splat 200" > publish/_redirects
+
+      - name: Deploy to prod?
+        id: target
+        run: echo "##[set-output name=flag;]$([[ \"${GITHUB_REF#refs/heads/}\" == \"master\" ]] && echo \"--prod\" || true)"
+
+      - name: Deploy docs
+        uses: netlify/actions/cli@master
+        with:
+          args: deploy --dir='apps/docs/.netlify/publish/' --functions='apps/docs/.netlify/functions/' ${{ steps.target.outputs.flag }}
+        env:
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}

.github/workflows/test.yml

@@ -0,0 +1,84 @@
+name: Test
+on:
+  - pull_request
+  - push
+jobs:
+  unit-test:
+    name: Unit test
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: [ '12', '14' ]
+    steps:
+
+      - name: Check out repository
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2-beta
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Cache NPM dependencies
+        uses: actions/cache@v2
+        env:
+          cache-hash: ${{ hashFiles('pnpm-lock.yaml') }}
+        with:
+          path: ~/.pnpm-store
+          key: pnpm-os_${{ runner.os }}-node_${{ matrix.node }}-lock_${{ env.cache-hash }}
+          restore-keys: |
+            pnpm-os_${{ runner.os }}-node_${{ matrix.node }}-
+            pnpm-os_${{ runner.os }}-
+            pnpm-
+
+      - name: Pull dependencies
+        uses: pnpm/action-setup@v1.2.0
+        with:
+          version: 5.4.0
+          run_install: true
+
+      - name: Run unit tests
+        run: npm test
+
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: [ '12' ]
+    steps:
+
+      - name: Check out repository
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2-beta
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Cache NPM dependencies
+        uses: actions/cache@v2
+        env:
+          cache-hash: ${{ hashFiles('pnpm-lock.yaml') }}
+        with:
+          path: ~/.pnpm-store
+          key: pnpm-os_${{ runner.os }}-node_${{ matrix.node }}-lock_${{ env.cache-hash }}
+          restore-keys: |
+            pnpm-os_${{ runner.os }}-node_${{ matrix.node }}-
+            pnpm-os_${{ runner.os }}-
+            pnpm-
+
+      - name: Pull dependencies
+        uses: pnpm/action-setup@v1.2.0
+        with:
+          version: 5.4.0
+          run_install: true
+
+      - name: Build everything
+        run: npm run all:build
+
+      - name: Test applications (WRITEME!)
+        run: echo 'UNIMPLEMENTED'
+
+      - name: Clean-up
+        run: npm run all:clean

.gitignore

@@ -0,0 +1,7 @@
+*~
+*.log
+coverage/
+node_modules/
+packages/*/node_modules/
+package-lock.json
+storybook-static/

.jest/mocks/file.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = './mock/file.path';

.jest/mocks/style.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = {};

.jest/setup/enzyme.js

@@ -0,0 +1,6 @@
+'use strict';
+
+const { configure } = require('enzyme');
+const Adapter = require('enzyme-adapter-react-16');
+
+configure({ adapter: new Adapter() });

.npm/version.sh

@@ -0,0 +1,8 @@
+#! /bin/env bash
+
+set -euo pipefail
+
+version="$(jq -r '.version' 'package.json')"
+
+pnpm recursive --filter '@*/*' exec -- npm version --no-git-tag-version --allow-same-version "${version}"
+git add {apps,components,components-internal,lib,lib-govuk,packages}/*/package.json

.storybook/decorators.tsx

@@ -0,0 +1,63 @@
+import { FC, createElement as h } from 'react';
+import { boolean, select, withKnobs } from "@storybook/addon-knobs";
+import { className } from '@not-govuk/components/src/helpers';
+import { BrowserRouter as Router } from 'react-router-dom';
+import RawMiddle from '@not-govuk/components/src/components/page/body';
+import Main from '@not-govuk/components/src/components/page/main';
+
+const Root: FC<any> = props => (
+  <div id="story-root" {...props} style={{
+    backgroundColor: 'white',
+    padding: '1em'
+  }}>
+    <Router>
+      {props.children}
+    </Router>
+  </div>
+);
+
+const Middle: FC<any> = props => (
+  <RawMiddle {...props} style={{
+    margin: 0,
+    padding: 0
+  }}>
+    {props.children}
+  </RawMiddle>
+);
+
+const MainInMiddle: FC<any> = props => (
+  <Middle {...props}>
+    <Main style={{
+      margin: 0,
+      padding: 0
+    }}>
+      {props.children}
+    </Main>
+  </Middle>
+);
+
+const decorator = storyFn => {
+  const departmentOptions = {
+    'None': '',
+    'Home Office': 'home-office',
+    'HMPO': 'hm-passport-office',
+    'HMRC': 'hm-revenue-customs'
+  };
+
+  const isInternal = boolean('Internal', false, 'Theme');
+  const department = select('Department', departmentOptions, '', 'Theme');
+
+  const props = {
+    className: className(isInternal ? 'not-govuk' : '', department),
+  };
+
+  return h(Root, props, storyFn());
+};
+
+const simpleDecorator = Component => storyFn => h(Component, {}, storyFn());
+
+export const root = decorator;
+export const middle = simpleDecorator(Middle);
+export const main = simpleDecorator(MainInMiddle);
+
+export default root;

.storybook/main.js

@@ -0,0 +1,41 @@
+'use strict';
+
+module.exports = {
+  stories: [
+    //'../components/*/spec/*.stories.@(js|mdx)', // This can be used if my PR is merged: https://github.com/storybookjs/storybook/pull/11531
+    '../components/back-link/spec/*.stories.mdx',
+    '../components/form/spec/*.stories.mdx',
+    '../components/link/spec/*.stories.mdx',
+    '../components/table/spec/*.stories.mdx',
+    '../components/tag/spec/*.stories.mdx',
+    '../styles/*.stories.mdx',
+    '../packages/components/src/components/**/*.stories.mdx'
+  ],
+  addons: [
+    {
+      name: '@not-govuk/storybook-preset',
+      options: {
+        baseDir: __dirname,
+        tsConfig: '../tsconfig.json'
+      }
+    },
+    '@storybook/addon-a11y/register',
+    '@storybook/addon-actions',
+    '@storybook/addon-docs/register',
+    '@storybook/addon-jest/register',
+    '@storybook/addon-knobs/register',
+    '@storybook/addon-links',
+    '@storybook/addon-storysource',
+    '@storybook/addon-viewport/register'
+  ],
+  webpackFinal: async (config) => {
+    config.module.rules.push({
+      test: /\.(stories|story)\.[tj]sx?$/,
+      loader: require.resolve('@storybook/source-loader'),
+      exclude: [/node_modules/],
+      enforce: 'pre'
+    });
+
+    return config;
+  }
+};

.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+import { themes } from '@storybook/theming';
+
+addons.setConfig({
+  theme: themes.dark
+});

.storybook/preview.ts

@@ -0,0 +1,35 @@
+import { createElement as h } from 'react';
+import { withA11y } from '@storybook/addon-a11y';
+import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
+import { withTests } from '@storybook/addon-jest';
+import { withKnobs } from "@storybook/addon-knobs";
+import { addDecorator, addParameters } from '@storybook/react';
+import globalDecorator from './decorators';
+import jestResults from '../.jest-results.json';
+
+// FIXME: Temporary hack to get CSS
+import '../packages/components/src/index.scss';
+
+addParameters({
+  docs: {
+    container: DocsContainer,
+    page: DocsPage
+  }
+});
+
+// global decorators
+addDecorator(globalDecorator);
+
+// accessibility add-on
+addDecorator(withA11y as any);
+
+// knobs add-on
+addDecorator(withKnobs);
+
+// jest add-on
+addDecorator(
+  withTests({
+    results: jestResults,
+    filesExt: '((\\.specs?)|(\\.tests?))?(\\.(mjs|[jt]sx?))?$'
+  })
+);