@financial-times/n-conversion-forms 30.1.0 → 31.0.0

package/.circleci/config.yml

@@ -1,168 +1,115 @@
-# generator: n-circle2-cli
-# template: component
-
-references:
-
-  container_config_node: &container_config_node
-    working_directory: ~/project/build
+# CONFIG GENERATED BY DOTCOM-TOOL-KIT, DO NOT EDIT BY HAND
+version: 2.1
+orbs:
+  tool-kit: financial-times/dotcom-tool-kit@4
+executors:
+  node:
     docker:
       - image: cimg/node:18.17-browsers
-  workspace_root: &workspace_root
-    ~/project
-
-  attach_workspace: &attach_workspace
-    attach_workspace:
-      at: *workspace_root
-
-  npm_cache_keys: &npm_cache_keys
-    keys:
-        - v3-dependency-npm-{{ checksum "package.json" }}-
-        - v3-dependency-npm-{{ checksum "package.json" }}
-        - v3-dependency-npm-
-
-  cache_npm_cache: &cache_npm_cache
-    save_cache:
-        key: v3-dependency-npm-{{ checksum "package.json" }}-{{ epoch }}
-        paths:
-        - ./node_modules/
-
-  restore_npm_cache: &restore_npm_cache
-    restore_cache:
-        <<: *npm_cache_keys
-
-  filters_only_main: &filters_only_main
-    branches:
-      only: main
-
-  filters_only_renovate_nori: &filters_only_renovate_nori
-    branches:
-      only: /(^renovate-.*|^nori/.*)/
-
-  filters_ignore_tags_renovate_nori: &filters_ignore_tags_renovate_nori
-    tags:
-      ignore: /.*/
-    branches:
-      ignore: /(^renovate-.*|^nori/.*)/
-
-  filters_version_tag: &filters_version_tag
-    tags:
-      only:
-        - /^v?\d+\.\d+\.\d+(?:-beta\.\d+)?$/
-    branches:
-      ignore: /.*/
-
-version: 2.1
-
 jobs:
-
-  build:
-    <<: *container_config_node
+  checkout:
+    docker:
+      - image: cimg/base:stable
     steps:
       - checkout
-      - run:
-          name: Checkout next-ci-shared-helpers
-          command: git clone --depth 1 git@github.com:Financial-Times/next-ci-shared-helpers.git --branch unpin-heroku .circleci/shared-helpers
-      - *restore_npm_cache
-      - run:
-          name: Install project dependencies
-          command: make install
-      - run:
-          name: Run the project build task
-          command: make build
-      - run:
-          name: shared-helper / generate-build-state-artifacts
-          command: .circleci/shared-helpers/helper-generate-build-state-artifacts
-          when: always
-      - *cache_npm_cache
-      - store_artifacts:
-          path: build-state
-          destination: build-state
-      - persist_to_workspace:
-          root: *workspace_root
-          paths:
-            - build
-
-  test:
-    <<: *container_config_node
-    steps:
-      - *attach_workspace
-      - run:
-          name: Run tests
-          command: npm run lint && make test
-          environment:
-            JEST_JUNIT_OUTPUT: test-results/jest/results.xml
-            MOCHA_FILE: test-results/mocha/results.xml
-      - store_test_results:
-          path: test-results
-      - store_artifacts:
-          path: test-results
-          destination: test-results
-
-  publish:
-    <<: *container_config_node
-    steps:
-      - *attach_workspace
-      - run:
-          name: shared-helper / npm-store-auth-token
-          command: .circleci/shared-helpers/helper-npm-store-auth-token
-      - run: npx snyk monitor --org=customer-products --project-name=Financial-Times/n-conversion-forms
-      - run:
-          name: shared-helper / npm-version-and-publish-public
-          command: .circleci/shared-helpers/helper-npm-version-and-publish-public
-
+      - tool-kit/persist-workspace:
+          path: .
 workflows:
-
-  version: 2
-
-  build-test:
-    jobs:
-      - build:
-          filters:
-            <<: *filters_ignore_tags_renovate_nori
-      - test:
-          requires:
-            - build
-
-  build-test-publish:
+  tool-kit:
+    when:
+      not:
+        equal:
+          - scheduled_pipeline
+          - << pipeline.trigger_source >>
     jobs:
-      - build:
+      - checkout:
           filters:
-            <<: *filters_version_tag
-      - test:
+            tags:
+              only: /^v\d+\.\d+\.\d+(-.+)?/
+      - waiting-for-approval:
+          type: approval
           filters:
-            <<: *filters_version_tag
+            branches:
+              only: /(^renovate-.*|^nori/.*)/
+            tags:
+              only: /^v\d+\.\d+\.\d+(-.+)?/
+      - tool-kit/setup:
+          name: tool-kit/setup-<< matrix.executor >>
           requires:
-            - build
-      - publish:
-          context: npm-publish-token
+            - checkout
+            - waiting-for-approval
+          matrix:
+            parameters:
+              executor:
+                - node
           filters:
-            <<: *filters_version_tag
+            tags:
+              only: /^v\d+\.\d+\.\d+(-.+)?/
+      - tool-kit/build:
+          name: tool-kit/build-<< matrix.executor >>
           requires:
-            - test
-
-  renovate-nori-build-test-provision:
-    jobs:
-      - waiting-for-approval:
-          type: approval
+            - tool-kit/setup-<< matrix.executor >>
+          matrix:
+            parameters:
+              executor:
+                - node
           filters:
-              <<: *filters_only_renovate_nori
-      - build:
+            tags:
+              only: /^v\d+\.\d+\.\d+(-.+)?/
+      - tool-kit/test:
+          name: tool-kit/test-<< matrix.executor >>
           requires:
-            - waiting-for-approval
-      - test:
+            - tool-kit/build-<< matrix.executor >>
+          matrix:
+            parameters:
+              executor:
+                - node
+          filters:
+            tags:
+              only: /^v\d+\.\d+\.\d+(-.+)?/
+      - tool-kit/publish-tag:
           requires:
-            - build
-
-  nightly:
-    triggers:
-      - schedule:
-          cron: "0 0 * * *"
+            - tool-kit/test-node
+          name: tool-kit/publish-tag-node
+          executor: node
           filters:
-            <<: *filters_only_main
+            tags:
+              only: /^v\d+\.\d+\.\d+(-.+)?/
+            branches:
+              ignore: /.*/
+          context: npm-publish-token
+  nightly:
+    when:
+      and:
+        - equal:
+            - scheduled_pipeline
+            - << pipeline.trigger_source >>
+        - equal:
+            - nightly
+            - << pipeline.schedule.name >>
     jobs:
-      - build:
-          context: next-nightly-build
-      - test:
+      - checkout
+      - tool-kit/setup:
+          name: tool-kit/setup-<< matrix.executor >>
+          requires:
+            - checkout
+          matrix:
+            parameters:
+              executor:
+                - node
+      - tool-kit/build:
+          name: tool-kit/build-<< matrix.executor >>
+          requires:
+            - tool-kit/setup-<< matrix.executor >>
+          matrix:
+            parameters:
+              executor:
+                - node
+      - tool-kit/test:
+          name: tool-kit/test-<< matrix.executor >>
           requires:
-            - build
-          context: next-nightly-build
+            - tool-kit/build-<< matrix.executor >>
+          matrix:
+            parameters:
+              executor:
+                - node

package/.toolkitrc.yml

@@ -0,0 +1,19 @@
+plugins:
+  - "@dotcom-tool-kit/component"
+  - "@dotcom-tool-kit/jest"
+  - "@dotcom-tool-kit/eslint"
+  - "@dotcom-tool-kit/prettier"
+  - "@dotcom-tool-kit/lint-staged"
+hooks:
+  git:precommit:
+    - SecretSquirrel
+    - LintStaged
+  test:local:
+    - Eslint
+    - JestLocal
+  test:ci:
+    - Eslint
+    - JestCI
+options:
+  "@dotcom-tool-kit/circleci":
+    nodeVersion: 18.17-browsers

package/.toolkitstate/ci.json

@@ -0,0 +1,6 @@
+{
+  "branch": "",
+  "repo": "n-conversion-forms",
+  "version": "c11f11ba33cddfdac510ecca5f74fc304bdc6eda",
+  "tag": "v31.0.0"
+}

package/README.md

@@ -6,8 +6,8 @@ Contains HTML and CSS that's used within the conversion forms
 [![Known Vulnerabilities](https://snyk.io/test/github/Financial-Times/n-conversion-forms/badge.svg?targetFile=package.json)](https://snyk.io/test/github/Financial-Times/n-conversion-forms?targetFile=package.json)
 
 ```bash
-make install # install all dependencies
-make run # build and start documentation app at http://local.ft.com:5005/
+npm install # install all dependencies
+npm run storybook # build and start documentation app at http://local.ft.com:5005/
 ```
 
 ## Table of contents

package/jest.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+	maxWorkers: 2,
 	testPathIgnorePatterns: ['/node_modules/', '/cypress/', '/test/'],
 	transform: {
 		'.(js|jsx)': '@sucrase/jest-plugin',
@@ -12,4 +13,5 @@ module.exports = {
 	setupFilesAfterEnv: ['<rootDir>/test-jest/helpers/setup.js'],
 	resolver: '@financial-times/jest-browser-resolver',
 	transformIgnorePatterns: ['/node_modules//(?!(@financial-times)/)'],
+	testEnvironment: 'jsdom',
 };

package/package.json

@@ -1,14 +1,17 @@
 {
   "name": "@financial-times/n-conversion-forms",
-  "version": "30.1.0",
+  "version": "0.0.0",
   "description": "Containing jsx components and styles for forms included on Accounts and Acqusition apps (next-signup, next-profile, next-retention, etc).",
   "main": "dist/index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "babel components/*.jsx -d dist --copy-files",
+    "heroku-postbuild": "dotcom-tool-kit build:remote release:remote cleanup:remote",
     "prepare": "snyk-protect || snyk-protect -d || true",
-    "storybook": "start-storybook -p 5005",
-    "build-storybook": "build-storybook --docs --output-dir docs",
+    "build": "dotcom-tool-kit build:local",
+    "test": "dotcom-tool-kit test:local",
+    "start": "dotcom-tool-kit run:local",
+    "format": "dotcom-tool-kit format:local",
+    "storybook": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 5005",
+    "build-storybook": "NODE_OPTIONS=--openssl-legacy-provider build-storybook --docs --output-dir docs",
     "lint": "eslint . --ext .jsx,.js",
     "lint-fix": "eslint . --ext .jsx,.js --fix",
     "prettier": "prettier --write '**/*.{js,jsx,json,scss}'"
@@ -37,26 +40,36 @@
     "@babel/plugin-transform-runtime": "^7.11.0",
     "@babel/preset-env": "^7.11.0",
     "@babel/preset-react": "^7.10.4",
+    "@dotcom-tool-kit/component": "^3.1.8",
+    "@dotcom-tool-kit/eslint": "^3.1.3",
+    "@dotcom-tool-kit/frontend-app": "^3.1.9",
+    "@dotcom-tool-kit/jest": "^3.2.0",
+    "@dotcom-tool-kit/lint-staged": "^4.1.3",
+    "@dotcom-tool-kit/prettier": "^3.1.3",
+    "@dotcom-tool-kit/webpack": "^3.1.4",
     "@financial-times/eslint-config-next": "^6.0.0",
     "@financial-times/jest-browser-resolver": "^1.0.2",
-    "@financial-times/n-gage": "^9.0.1",
+    "@snyk/protect": "1.1193.0",
     "@storybook/addon-a11y": "^6.5.13",
     "@storybook/addon-essentials": "6.5.13",
     "@storybook/react": "^6.5.13",
-    "@snyk/protect": "1.1193.0",
-    "@sucrase/jest-plugin": "^2.0.0",
+    "@sucrase/jest-plugin": "^3.0.0",
     "check-engines": "^1.5.0",
+    "dotcom-tool-kit": "^3.2.1",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.7",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jest": "^27.1.6",
+    "eslint-plugin-jest": "^27.2.3",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.1",
     "fetch-mock": "^7.2.0",
-    "jest": "^26.0.0",
-    "jest-serializer-html": "^7.0.0",
-    "jsdom": "16.5.0",
+    "html-webpack-plugin": "^5.5.3",
+    "jest": "^29.6.4",
+    "jest-environment-jsdom": "^29.6.4",
+    "jest-serializer-html": "^7.1.0",
+    "jsdom": "^22.1.0",
+    "jsdom-global": "^3.0.2",
     "lint-staged": "^13.0.4",
     "pa11y-ci": "2.4.2",
     "prettier": "^2.4.1",
@@ -66,7 +79,9 @@
     "react-dom": "16.14.0",
     "react-is": "^16.13.1",
     "sass": "^1.55.0",
-    "sass-loader": "^10.2.1"
+    "sass-loader": "^10.2.1",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4"
   },
   "engines": {
     "node": "16.x || 18.x",
@@ -78,9 +93,8 @@
   },
   "husky": {
     "hooks": {
-      "commit-msg": "node_modules/.bin/secret-squirrel-commitmsg",
-      "pre-commit": "node_modules/.bin/secret-squirrel && pretty-quick --staged && npm run lint",
-      "pre-push": "pretty-quick --staged && make test"
+      "commit-msg": "dotcom-tool-kit git:commitmsg",
+      "pre-commit": "pretty-quick --staged && dotcom-tool-kit git:precommit"
     }
   },
   "peerDependencies": {

package/.circleci/shared-helpers/.github/settings.yml

@@ -1 +0,0 @@
-_extends: github-apps-config-next

package/.circleci/shared-helpers/CODEOWNERS

@@ -1,3 +0,0 @@
-# See https://help.github.com/articles/about-codeowners/ for more information about this file.
-
-* @financial-times/platforms

package/.circleci/shared-helpers/README.md

@@ -1,72 +0,0 @@
-# Next CI Helper Scripts [![CircleCI](https://circleci.com/gh/Financial-Times/next-ci-shared-helpers.svg?style=svg&circle-token=33bcf2eb98fe2e875cc66de93d7e4a50369c952d)](https://github.com/Financial-Times/next-ci-shared-helpers)
-
-This repo contains a set of common bash scripts to be used in the delivery pipeline.
-
-
-## Installation
-
-```sh
-git clone git@github.com:Financial-Times/next-ci-shared-helpers.git
-cd next-ci-shared-helpers
-```
-
-
-## Development
-
-### Working locally
-
-Many of the scripts require a Unix environment so in order to run existing scripts you'll need to be familiar with [Docker](https://www.docker.com/get-started).
-
-The first step is to [install docker](https://www.docker.com/get-started) and once you're up and running you'll be able to run the scripts locally inside a Docker container.
-
-For example, the following command will run the `helper-install-awscli` script inside the container (this will output many logs but if it has worked correctly the last line on the console should read `Setting up awscli (1.11.13-1) ...`.
-
-```shell
-docker run --rm -it -w /tmp --mount type=bind,source="$(pwd)",destination=/tmp circleci/node:12.18-browsers ./helper-install-awscli
-```
-
-The command in the example can be largely re-used by simply changing the Docker image and script to run:
-
-```shell
-docker run --rm -it -w /tmp --mount type=bind,source="$(pwd)",destination=/tmp DOCKER_IMAGE_NAME ./SCRIPT_TO_RUN
-```
-
-
-### Usage
-
-To make use of this package in your CircleCI deployment pipeline, firstly create a new `step` and clone the package:
-
-```yaml
-- run:
-    name: Checkout next-ci-shared-helpers
-    command: git clone --depth 1 git@github.com:Financial-Times/next-ci-shared-helpers.git .circleci/shared-helpers
-```
-
-_The convention across all FT repos is to put the helpers inside the `.circleci/shared-helpers` folder._
-
-Then add another step after it to run one of the scripts:
-
-```yaml
-- run:
-    name: shared-helper / npm-install-peer-deps
-    command: .circleci/shared-helpers/helper-npm-install-peer-deps
-```
-
-_The convention across all FT repos is to name the step as follows: `shared-helper / NAME_OF_SCRIPT`._
-
-### General guidelines for helper scripts
-
-- Copy `helper.example` as a starting point
-- Avoid being "clever" - developers shouldn't require knowledge of obscure bash syntax to understand the helper scripts that you write
-- Comment liberally - help others (and your future self) understand *why* the helper script is doing the things it's doing
-- Include links to any relevant documentation in your comments
-- Try and avoid noisy output - it's hard to debug CI builds or understand what has happened if there are lots of unnecessary messages in the shell output
-- Echo out useful messages about progress and actions taken by the script - the flip side of avoiding noisy output: humans want to know what's happening/happened with their build
-- Remember to make your script executable by running the command `chmod +x ./<NAME_OF_SCRIPT>`
-
-### Naming guidelines
-
-The filename of a helper script should give a clear indication of what it does:
-
-- ❌ `helper-test`
-- ✅ `helper-run-mocha-tests`

package/.circleci/shared-helpers/helper-check-service-ready

@@ -1,37 +0,0 @@
-#!/usr/bin/env bash
-#
-# HELPER PURPOSE
-#
-# Checks availability of service containers
-
-# Set error handling
-set -eu -o pipefail
-
-DOCKERIZE_VERSION=v0.3.0
-
-if hash wget 2>/dev/null; then
-	wget https://github.com/jwilder/dockerize/releases/download/$DOCKERIZE_VERSION/dockerize-linux-amd64-$DOCKERIZE_VERSION.tar.gz;
-elif hash curl 2>/dev/null; then
-	curl -XGET -L https://github.com/jwilder/dockerize/releases/download/$DOCKERIZE_VERSION/dockerize-linux-amd64-$DOCKERIZE_VERSION.tar.gz --output dockerize-linux-amd64-$DOCKERIZE_VERSION.tar.gz;
-else
-	echo 'wget or curl are required to run helper-check-service-ready'
-	exit 1
-fi
-mkdir -p ~/tmp
-tar -C ~/tmp -xzvf dockerize-linux-amd64-$DOCKERIZE_VERSION.tar.gz
-rm dockerize-linux-amd64-$DOCKERIZE_VERSION.tar.gz
-
-for var in "$@"
-do
-    case $var in
-    redis)
-      ~/tmp/dockerize -wait tcp://localhost:6379 -timeout 1m
-      ;;
-    neo4j)
-      ~/tmp/dockerize -wait tcp://localhost:7687 -timeout 1m
-      ;;
-    mongo)
-      ~/tmp/dockerize -wait tcp://localhost:27017 -timeout 1m
-      ;;
-    esac
-done

package/.circleci/shared-helpers/helper-configure-awscli

@@ -1,20 +0,0 @@
-#!/usr/bin/env bash
-#
-# HELPER PURPOSE
-#
-# Configures the awscli tool with aws authentication keys
-#
-
-# Set error handling
-set -eu -o pipefail
-
-# HELPER COMMANDS
-
-# provide keys as arguments when invoking the helper
-access_key_id="$1"
-secret_access_key="$2"
-
-# write the auth keys to .aws/credentials
-aws configure set aws_access_key_id "$access_key_id"
-aws configure set aws_secret_access_key "$secret_access_key"
-

package/.circleci/shared-helpers/helper-generate-build-state-artifacts

@@ -1,29 +0,0 @@
-#!/usr/bin/env bash
-#
-# HELPER PURPOSE
-#
-# Generate artifacts that represent the state of
-# the build and can be used after the build has
-# run to aid with debugging
-#
-
-# Set error handling
-set -eu -o pipefail
-
-# HELPER COMMANDS
-
-BUILD_STATE_DIR_PATH="build-state/"
-
-mkdir -p "${BUILD_STATE_DIR_PATH}";
-
-echo -e ">> You can find all build-state artifacts under the 'Artifacts' tab for this build\n";
-
-# artifact: npm-shrinkwrap.json
-npm shrinkwrap --loglevel=warn && mv npm-shrinkwrap.json "${BUILD_STATE_DIR_PATH}";
-echo ">> artifact: npm-shrinkwrap.json generated, saved";
-
-# artifact: npm-debug.log
-if [ -e npm-debug.log ]; then
-    mv npm-debug.log "${BUILD_STATE_DIR_PATH}";
-    echo ">> artifact: npm-debug.log exists, saved";
-fi

package/.circleci/shared-helpers/helper-install-awscli

@@ -1,14 +0,0 @@
-#!/usr/bin/env bash
-#
-# HELPER PURPOSE
-#
-# Installs the awscli tool
-#
-
-# Set error handling
-set -eu -o pipefail
-
-# HELPER COMMANDS
-
-# install the awscli
-sudo apt-get install awscli

package/.circleci/shared-helpers/helper-install-puppeteer-deps

@@ -1,25 +0,0 @@
-#!/usr/bin/env bash
-#
-# HELPER PURPOSE
-#
-# Required for pupeteer on docker based CI
-# https://github.com/GoogleChrome/puppeteer/issues/290
-
-# Set error handling
-set -eu -o pipefail
-
-# HELPER COMMANDS
-
-sudo apt-get update
-
-sudo apt-get install -yq \
-    gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 \
-    libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 \
-    libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 \
-    libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 \
-    libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 \
-    libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates \
-    fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget
-
-# This is used in the request to the Change API made after deployments
-sudo apt-get install -yq jq

package/.circleci/shared-helpers/helper-npm-install-peer-deps

@@ -1,40 +0,0 @@
-#!/usr/bin/env bash
-#
-# HELPER PURPOSE
-
-# Workaround for a bug in npm where it doesn't correctly
-# resolve conflicting peer dependencies.
-#
-# Parses errors for missing peer dependencies from
-# the output of `npm ls` and then pipes the package
-# names to `npm install`.
-#
-# Why we pass the flags we do to `npm install`:
-#
-# --no-package-lock - While we now use package-lock.json
-#   in our repos, skip package-lock.json in this instance
-#   as we don't want to accidentally modify the file
-#   for subsequent steps in the workflow, e.g cache keys
-#   and artefact generation.
-#
-# --no-save - We don't want to modify package.json as we
-#   use its checksum for some CI tasks e.g. naming node_module caches
-#
-
-# Set error handling
-#
-# Do *not* set `-o pipefail` as `npm ls --production --parseable`
-# will have an exit code of 1 when there are missing peer
-# dependencies, but that's what we're expecting to happen
-set -eu
-
-# HELPER COMMANDS
-
-if [ -e package.json ]; then
-
-    npm ls --production --parseable 2>&1 >/dev/null | \
-      sed -n -e 's/^npm ERR! peer dep missing: \(.*\),.*/\1/p' | \
-          xargs -I{} echo -n '"{}" ' | \
-            xargs npm install --no-package-lock --no-save
-
-fi

package/.circleci/shared-helpers/helper-npm-store-auth-token

@@ -1,14 +0,0 @@
-#!/usr/bin/env bash
-#
-# HELPER PURPOSE
-#
-# Store npmjs registry auth token so npm can authenticate with it
-# e.g. for `npm publish` (see `helper-npm-publish`)
-#
-
-# Set error handling
-set -eu -o pipefail
-
-# HELPER COMMANDS
-
-echo "//registry.npmjs.org/:_authToken=${NPM_AUTH_TOKEN}" > ${HOME}/.npmrc