@financial-times/n-myft-ui 33.1.0 → 33.1.1-alpha.4

package/.circleci/config.yml

@@ -1,213 +1,132 @@
-# generator: n-circle2-cli
-# template: component
-
-references:
-  container_config_node: &container_config_node
-    working_directory: ~/project/build
-    docker:
-      - image: cimg/node:<< parameters.node-version >>-browsers
-    parameters:
-      node-version:
-        default: "18.18"
-        type: string
-
-  workspace_root: &workspace_root ~/project
-
-  attach_workspace: &attach_workspace
-    attach_workspace:
-      at: *workspace_root
-
-  npm_cache_keys: &npm_cache_keys
-    keys:
-      - v8-dependency-npm-{{ checksum "package-lock.json" }}-
-      - v8-dependency-npm-{{ checksum "package-lock.json" }}
-      - v8-dependency-npm-
-
-  cache_npm_cache: &cache_npm_cache
-    save_cache:
-      key: v8-dependency-npm-{{ checksum "package-lock.json" }}-{{ epoch }}
-      paths:
-        - ./node_modules/
-
-  restore_npm_cache: &restore_npm_cache
-    restore_cache:
-      <<: *npm_cache_keys
-
-  filters_ignore_gh_pages: &filters_ignore_gh_pages
-    branches:
-      ignore: gh_pages
-
-  filters_only_main: &filters_only_main
-    branches:
-      only: main
-
-  filters_ignore_main: &filters_ignore_main
-    branches:
-      ignore: main
-
-  filters_ignore_tags: &filters_ignore_tags
-    tags:
-      ignore: /.*/
-
-  filters_version_tag: &filters_version_tag
-    tags:
-      only:
-        - /^v?\d+\.\d+\.\d+(?:-beta\.\d+)?$/
-    branches:
-      ignore: /.*/
-
 version: 2.1
-
 orbs:
-  node: circleci/node@4.6.0
-
+  tool-kit: financial-times/dotcom-tool-kit@5
+executors:
+  node:
+    docker:
+      - image: cimg/node:18.17-browsers
 jobs:
-  build:
-    <<: *container_config_node
-    steps:
-      - checkout
-      - node/install-npm:
-          version: "^7"
-      - 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: Transpile JSX to JS
-          command: make transpile-jsx
-      - 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
-    parallelism: 1
-    steps:
-      - *attach_workspace
-      - run:
-          name: Run tests
-          command: 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-myft-ui
-      - run:
-          name: shared-helper / npm-version-and-publish-public
-          command: .circleci/shared-helpers/helper-npm-version-and-publish-public
-
-  deploy:
-    <<: *container_config_node
+  deploy-gh-pages:
+    docker:
+      - image: cimg/base:stable
     steps:
-      - *attach_workspace
+      - tool-kit/attach-workspace
       - add_ssh_keys:
           fingerprints:
             - "83:b5:09:e4:e5:2e:74:35:c1:1b:99:73:e3:dc:b8:6f"
       - run:
           name: Publish GitHub Pages
           command: ./scripts/deploy-gh-pages.sh
-
+  checkout:
+    docker:
+      - image: cimg/base:stable
+    steps:
+      - checkout
+      - tool-kit/persist-workspace:
+          path: .
 workflows:
-  version: 2
-  build-test-deploy:
+  tool-kit:
+    when:
+      not:
+        equal:
+          - scheduled_pipeline
+          - << pipeline.trigger_source >>
     jobs:
-      - build:
+      - deploy-gh-pages:
+          requires:
+            - tool-kit/test-node
           filters:
-            <<: *filters_ignore_tags
-            <<: *filters_ignore_gh_pages
-          name: build-v<< matrix.node-version >>
-          matrix:
-            parameters:
-              node-version: [ "16.20", "18.18" ]
-      - test:
+            tags:
+              only: /^v\d+\.\d+\.\d+(-.+)?/
+            branches:
+              ignore: /.*/
+      - checkout:
           filters:
-            <<: *filters_ignore_tags
+            tags:
+              only: /^v\d+\.\d+\.\d+(-.+)?/
+      - waiting-for-approval:
+          type: approval
+          filters:
+            branches:
+              only: /(^renovate-.*|^nori/.*)/
+      - tool-kit/setup:
+          name: tool-kit/setup-<< matrix.executor >>
           requires:
-            - build-v<< matrix.node-version >>
-          name: test-v<< matrix.node-version >>
+            - checkout
+            - waiting-for-approval
           matrix:
             parameters:
-              node-version: [ "16.20", "18.18" ]
-      - deploy:
+              executor:
+                - node
           filters:
-            <<: *filters_only_main
+            tags:
+              only: /^v\d+\.\d+\.\d+(-.+)?/
+      - tool-kit/build:
+          name: tool-kit/build-<< matrix.executor >>
           requires:
-            - build-v18.18
-  build-test-publish:
-    jobs:
-      - build:
-          filters:
-            <<: *filters_version_tag
-            <<: *filters_ignore_gh_pages
-          name: build-v<< matrix.node-version >>
+            - tool-kit/setup-<< matrix.executor >>
           matrix:
             parameters:
-              node-version: [ "16.20", "18.18" ]
-      - test:
+              executor:
+                - node
           filters:
-            <<: *filters_version_tag
+            tags:
+              only: /^v\d+\.\d+\.\d+(-.+)?/
+      - tool-kit/test:
+          name: tool-kit/test-<< matrix.executor >>
           requires:
-            - build-v<< matrix.node-version >>
-          name: test-v<< matrix.node-version >>
+            - tool-kit/build-<< matrix.executor >>
           matrix:
             parameters:
-              node-version: [ "16.20", "18.18" ]
-      - publish:
-          context: npm-publish-token
+              executor:
+                - node
           filters:
-            <<: *filters_version_tag
+            tags:
+              only: /^v\d+\.\d+\.\d+(-.+)?/
+      - tool-kit/publish-tag:
           requires:
-            - test-v18.18
-
-  nightly:
-    triggers:
-      - schedule:
-          cron: "0 0 * * *"
+            - deploy-gh-pages
+            - 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
-          name: build-v<< matrix.node-version >>
+      - 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:
-              node-version: [ "16.20", "18.18" ]
-      - test:
+              executor:
+                - node
+      - tool-kit/test:
+          name: tool-kit/test-<< matrix.executor >>
           requires:
-            - build-v<< matrix.node-version >>
-          context: next-nightly-build
-          name: test-v<< matrix.node-version >>
+            - tool-kit/build-<< matrix.executor >>
           matrix:
             parameters:
-              node-version: [ "16.20", "18.18" ]
-
-notify:
-  webhooks:
-    - url: https://ft-next-webhooks.herokuapp.com/circleci2-workflow
+              executor:
+                - node

package/.toolkitrc.yml

@@ -0,0 +1,31 @@
+plugins:
+  - "@dotcom-tool-kit/component"
+  - "@dotcom-tool-kit/mocha"
+  - "@dotcom-tool-kit/eslint"
+  - "@dotcom-tool-kit/pa11y"
+  - "@dotcom-tool-kit/lint-staged-npm"
+  - "./toolkit/karma"
+  - "./toolkit/demoScripts"
+hooks:
+  build:local:
+    - TranspileJsx
+  build:ci:
+    - TranspileJsx
+  build:demo:
+    - DemoBuilder
+  test:local:
+    - Eslint
+    - Karma
+  test:ci:
+    - Karma
+    - DemoBuilder
+    - RunPa11yCi
+options:
+  "@dotcom-tool-kit/circleci":
+    nodeVersion: "18.17-browsers"
+  "@dotcom-tool-kit/eslint": {
+    files: "{,!(public)/**/}*.js"
+  }
+  '@dotcom-tool-kit/vault':
+    team: next
+    app: n-myft-ui

package/.toolkitstate/ci.json

@@ -0,0 +1,6 @@
+{
+  "branch": "",
+  "repo": "n-myft-ui",
+  "version": "91ee5ff8640103b67627901115e219f2cf07fc04",
+  "tag": "v33.1.1-alpha.4"
+}

package/README.md

@@ -32,14 +32,39 @@ If you are making a major change, you will need to update the package.json files
 ## Running locally
 
 ```
-make install
-make build
-make transpile-jsx
-make demo
+npm install
+npm run build
+npm run demo
 ```
 
 View the demo on `localhost:5005`
 
+
+## Demo tasks
+```
+npm run demo-build
+```
+This task will build the demo and place it in the `demo/dist` folder.
+```
+npm run demo
+```
+This task will run a express server on localhost:5005 serving the builded demo.(it calls demo-build internally).
+```
+npm run static-demo
+```
+This tasks will start a Node.js application located in the "demos/app" directory as a background process, 
+waits for 10 seconds, fetches content from "http://localhost:5005", adjusts the links in the retrieved content, 
+saves it as "index.html" in the "public" directory, moves all files from the "public" directory to the current directory, 
+and finally terminates the Node.js process.
+This is to prepare it to be uploaded to gh static page.
+
 ## Unstable versions
 
 v24, v25, v26 has JSX migration code. They are not stable therefore v27 is released. It is to remove JSX and rollback to handlebars. Please use ^v27.
+
+# RunPa11yCi task
+The default Pa11y plugin is configured to run against a deployed review app on heroku.
+In cases where the project is an npm component without a deployed environment like this project, this task allows for local server setup prior to running Pa11y tests.
+The RunPa11yCi task is a custom task class designed to automate the process of running Pa11y accessibility tests against a local server instance that runs the demo. It utilizes Node.js child processes to manage both the server and Pa11y processes, 
+ensuring proper execution and cleanup.
+

package/components/unread-articles-indicator/initialise-feed-start-time.js

@@ -31,7 +31,7 @@ const determineFeedStartTime = (userId, now, previousFeedStartTime) => {
 
 	return fetchUserLastVisitedAt(userId)
 		.then((userLastVisitedAt) =>
-			isToday(userLastVisitedAt) ? userLastVisitedAt : Promise.reject()
+			isToday(userLastVisitedAt) ? userLastVisitedAt : Promise.reject(new Error('No last visited user data today'))
 		)
 		.catch(() => startOfDay(now));
 };

package/karma.conf.js

@@ -39,6 +39,7 @@ module.exports = function (karma) {
 			'test/**/*.spec.js': ['webpack', 'sourcemap']
 		},
 		webpack: {
+			mode: 'development',
 			resolve: {
 				modules: ['node_modules'],
 				descriptionFiles: ['package.json'],

package/package.json

@@ -1,12 +1,19 @@
 {
   "name": "@financial-times/n-myft-ui",
-  "version": "33.1.0",
+  "version": "33.1.1-alpha.4",
   "description": "Client side component for interaction with myft",
   "main": "server.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "sass": "sass demos/src/demo.scss public/main.css --load-path node_modules",
+    "test": "dotcom-tool-kit test:local",
     "commit": "commit-wizard",
-    "prepare": "npx snyk protect || npx snyk protect -d || true"
+    "prepare": "npx snyk protect || npx snyk protect -d || true",
+    "build": "dotcom-tool-kit build:local",
+    "start": "dotcom-tool-kit run:local",
+    "demo-build": "dotcom-tool-kit build:demo -- demo-build",
+    "demo": "dotcom-tool-kit build:demo -- demo",
+    "static-demo": "dotcom-tool-kit build:demo -- static-demo",
+    "deploy-gh": "dotcom-tool-kit deploy:gh-pages"
   },
   "repository": {
     "type": "git",
@@ -19,13 +26,19 @@
   },
   "homepage": "https://github.com/Financial-Times/n-myft-ui#readme",
   "devDependencies": {
+    "@dotcom-tool-kit/component": "^4.1.2",
+    "@dotcom-tool-kit/doppler": "^1.1.0",
+    "@dotcom-tool-kit/eslint": "^3.2.0",
+    "@dotcom-tool-kit/lint-staged-npm": "^3.2.0",
+    "@dotcom-tool-kit/mocha": "^3.2.0",
+    "@dotcom-tool-kit/pa11y": "^0.5.2",
     "@financial-times/dotcom-build-base": "^8.2.1",
     "@financial-times/dotcom-build-code-splitting": "^8.2.1",
     "@financial-times/dotcom-build-js": "^8.2.1",
     "@financial-times/dotcom-build-sass": "^8.2.1",
     "@financial-times/dotcom-server-handlebars": "^8.2.1",
+    "@financial-times/eslint-config-next": "^7.1.0",
     "@financial-times/n-express": "^28.0.3",
-    "@financial-times/n-gage": "^9.0.1",
     "ascii-table": "0.0.9",
     "autoprefixer": "9.7.0",
     "aws-sdk-mock": "4.5.0",
@@ -47,7 +60,7 @@
     "check-engine": "^1.12.0",
     "css-loader": "^0.23.1",
     "denodeify": "^1.2.1",
-    "eslint": "6.5.1",
+    "dotcom-tool-kit": "^3.4.4",
     "eslint-plugin-react": "^7.33.2",
     "extract-css-block-webpack-plugin": "^1.3.0",
     "fetch-mock": "^5.0.3",
@@ -131,9 +144,11 @@
   },
   "husky": {
     "hooks": {
-      "commit-msg": "node_modules/.bin/secret-squirrel-commitmsg",
-      "pre-commit": "node_modules/.bin/secret-squirrel",
-      "pre-push": "make verify -j3"
+      "commit-msg": "dotcom-tool-kit git:commitmsg",
+      "pre-commit": "dotcom-tool-kit git:precommit"
     }
+  },
+  "lint-staged": {
+    "**/*.js": "dotcom-tool-kit format:staged test:staged --"
   }
 }

package/scripts/build-demo.sh

@@ -0,0 +1,53 @@
+#!/bin/bash
+
+chmod +x $0
+
+# Define the demo-build function
+demo-build() {
+    # Remove existing directory
+    rm -rf node_modules/@financial-times/n-myft-ui
+    # Create necessary directories
+    mkdir -p node_modules/@financial-times/n-myft-ui/myft
+    # Copy components to the corresponding directory
+    cp -r components node_modules/@financial-times/n-myft-ui/components/
+    # Compile SCSS file to CSS
+    sass demos/src/demo.scss public/main.css --load-path node_modules
+    # Indicate that build is complete
+    echo "Demo build completed."
+}
+
+# Define the demo function
+demo() {
+    # Build the demo
+    demo-build
+    # Run the Node.js application
+    node demos/app
+}
+
+# Define the static-demo function
+static-demo() {
+    # Build the demo
+    demo-build
+    # Execute the shell script to generate the static demo
+    scripts/make-static-demo.sh
+}
+
+# Check the first argument passed to the script
+case "$1" in
+    demo-build)
+        demo-build
+        ;;
+    demo)
+        demo
+        ;;
+    static-demo)
+        static-demo
+        ;;
+    *)
+        # If the argument does not match any of the above options, display an error message
+        echo "Usage: $0 {demo-build|demo|static-demo}"
+        exit 1
+        ;;
+esac
+
+exit 0

package/scripts/deploy-gh-pages.sh

@@ -1,13 +1,16 @@
 git config --global user.email "$GITHUB_EMAIL"
 git config --global user.name "$GITHUB_NAME"
 
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
+echo "script dir: $SCRIPT_DIR"
+
 # hackily remove all identities, and later force the specific identity
 # otherwise git keeps using the wrong boi
 ssh-add -D
 
 git --version
 
-export GIT_SSH="`pwd`/scripts/ssh.sh"
+export GIT_SSH="$SCRIPT_DIR/ssh.sh"
 
 git clone $CIRCLE_REPOSITORY_URL honk --single-branch
 
@@ -18,7 +21,7 @@ git checkout -b gh-pages
 mv ../node_modules .
 cp ../scripts/* scripts/
 
-make static-demo
+./make-static-demo.sh
 
 git add -A .
 

package/scripts/make-static-demo.sh

@@ -1,6 +1,10 @@
 #!/bin/sh
 
-node demos/app &
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
+PUBLIC_DIR="$SCRIPT_DIR/../public"
+
+
+node "$SCRIPT_DIR/../demos/app" &
 
 pid="$!"
 
@@ -8,6 +12,6 @@ sleep 10
 
 curl http://localhost:5005 | sed 's#/public/main.css#main.css#' | sed 's#href="/"#href="index.html"#' > public/index.html
 
-mv public/* .
+mv "$PUBLIC_DIR"/* .
 
 kill $pid

package/scripts/transpile-jsx.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+chmod +x "$0"
+npx cross-env BABEL_ENV=custom babel components/jsx --out-dir dist --extensions .jsx

package/toolkit/demoScripts/index.js

@@ -0,0 +1,77 @@
+const { Task, Hook } = require('@dotcom-tool-kit/types');
+const { spawn } = require('child_process');
+const { hookFork, waitOnExit } = require('@dotcom-tool-kit/logger');
+
+class ShExcutor extends Task {
+	async executeCommand (command, scriptPath, args = []) {
+		if (!command) {
+			throw new Error('Invalid command');
+		}
+
+		this.logger.info(`running sh script: ${command}`);
+		const deployChild = spawn(scriptPath, args, { shell: true });
+		hookFork(this.logger, command, deployChild);
+		return waitOnExit(command, deployChild);
+	}
+}
+
+class DemoBuilder extends ShExcutor {
+	async run () {
+		let command = process.argv[4];
+		if (!['demo-build', 'demo', 'static-demo'].includes(command)) {
+			command = 'demo-build';
+		}
+
+		return this.executeCommand(`build-demo: ${command}`, 'scripts/build-demo.sh', [command]);
+	}
+}
+
+class TranspileJsx extends ShExcutor {
+	async run () {
+		return this.executeCommand('transpile-jsx', 'scripts/transpile-jsx.sh');
+	}
+}
+
+class RunPa11yCi extends Task {
+	async run () {
+		let serverProcess;
+
+		const serverStartedPromise = new Promise((resolve, reject) => {
+			serverProcess = spawn('node', ['demos/app.js']);
+			hookFork(this.logger, 'server', serverProcess);
+
+			serverProcess.stdout.on('data', data => {
+				const message = data.toString();
+				if (message.includes('event: "EXPRESS_START"')) {
+					this.logger.info('Server started successfully.');
+					resolve();
+				}
+			});
+
+			serverProcess.on('error', error => {
+				reject(error);
+			});
+		});
+
+		await serverStartedPromise;
+
+		const pa11yProcess = spawn('pa11y-ci', ['--config', '.pa11yci.js']);
+		hookFork(this.logger, 'pa11y', pa11yProcess);
+
+		await waitOnExit('pa11y', pa11yProcess);
+
+		serverProcess.kill('SIGINT');
+		this.logger.info('Server and related processes stopped.');
+	}
+}
+class buildDemo extends Hook {
+	async check () {
+		return true;
+	}
+}
+
+exports.hooks = {
+	'build:demo': buildDemo,
+};
+
+exports.tasks = [ DemoBuilder, TranspileJsx, RunPa11yCi ];

package/toolkit/karma/index.js

@@ -0,0 +1,16 @@
+const { Task } = require('@dotcom-tool-kit/types');
+const { spawn } = require('child_process');
+const { hookFork, waitOnExit } = require('@dotcom-tool-kit/logger');
+const karmaCLIPath = require.resolve('karma/bin/karma');
+
+class Karma extends Task {
+	async run () {
+		const args = ['start', 'karma.conf.js'];
+		this.logger.info(`running karma ${args.join(' ')}`);
+		const child = spawn(karmaCLIPath, args);
+		hookFork(this.logger, 'karma', child);
+		return waitOnExit('karma', child);
+	}
+}
+
+exports.tasks = [ Karma ];