@financial-times/n-myft-ui 33.0.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,13 +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 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/jsx/preferences-modal/index.js

@@ -11,10 +11,10 @@ const renderError = ({ message, preferencesModal }) => {
 
 const removeError = ({ preferencesModal }) => {
 	renderError({
-		message: "",
+		message: '',
 		preferencesModal,
 	});
-}
+};
 
 /**
  * This preference modal is part of a test
@@ -60,7 +60,7 @@ const toggleCheckboxStatus = ({ instantAlertsCheckbox, isChecked }) => {
 		instantAlertsCheckbox.dataset.trackable = 'pop-up-box|set-instant-alert-on';
 		instantAlertsCheckbox.checked = false;
 	}
-}
+};
 
 const tracking = (conceptId) => {
 	const trackingData = {
@@ -72,7 +72,7 @@ const tracking = (conceptId) => {
 			name: 'pop-up-box',
 			id: '72de123e-5082-11ee-be56-0242ac120002',
 		}
-	}
+	};
 
 	const trackingEvent = new CustomEvent('oTracking.event', {
 		detail: trackingData,
@@ -218,7 +218,7 @@ const toggleInstantAlertsPreference = async ({ event, conceptId, preferencesModa
 	instantAlertsCheckbox.removeAttribute('disabled');
 };
 
-const setCheckboxForAlertConceptToOff =  ({ event, preferencesModal }) => {
+const setCheckboxForAlertConceptToOff = ({ event, preferencesModal }) => {
 	const conceptId = preferencesModal.dataset.conceptId;
 	const instantAlertsCheckbox = preferencesModal.querySelector('[data-component-id="myft-preferences-modal-checkbox"]');
 
@@ -231,7 +231,7 @@ const setCheckboxForAlertConceptToOff =  ({ event, preferencesModal }) => {
 		instantAlertsCheckbox,
 		isChecked: false,
 	});
-}
+};
 
 export default () => {
 	/**

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'],
@@ -155,7 +156,7 @@ module.exports = function (karma) {
 			safari: {
 				base: 'BrowserStack',
 				os: 'OS X',
-				os_version : 'High Sierra',
+				os_version : 'Monterey',
 				browser: 'Safari',
 				browser_version: 'latest'
 			}

package/myft/ui/lists.js

@@ -500,6 +500,12 @@ function openCreateListAndAddArticleOverlay (contentId, config) {
 function initialEventListeners () {
 
 	document.body.addEventListener('myft.user.saved.content.add', event => {
+		//Only show the create list overlay if the saved article is the main article, this is useful if there are other article listed in the article page
+		//For example having a related articles that can also be saved
+		const currentContentId = document.querySelector('[data-content-id]').dataset.contentId;
+		if (event && event.detail && currentContentId !== event.detail.subject) {
+			return;
+		}
 		event.stopPropagation();
 		const contentId = event.detail.subject;
 		const configSet = event.currentTarget.querySelector('[data-myft-ui-save-config]');
@@ -512,6 +518,12 @@ function initialEventListeners () {
 	});
 
 	document.body.addEventListener('myft.user.saved.content.remove', event => {
+		//Only show unsave notification if the saved article is the main article, this is useful if there are other article listed in the article page
+		//For example having a related articles that can also be saved
+		const currentContentId = document.querySelector('[data-content-id]').dataset.contentId;
+		if (event && event.detail && currentContentId !== event.detail.subject) {
+			return;
+		}
 		event.stopPropagation();
 		const contentId = event.detail.subject;
 		return showUnsavedNotification(contentId);

package/package.json

@@ -1,12 +1,19 @@
 {
   "name": "@financial-times/n-myft-ui",
-  "version": "33.0.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",
@@ -63,7 +76,7 @@
     "karma-chrome-launcher": "3.2.0",
     "karma-firefox-launcher": "^1.0.0",
     "karma-html-reporter": "^0.2.6",
-    "karma-mocha": "^1.3.0",
+    "karma-mocha": "^2.0.1",
     "karma-sinon": "^1.0.5",
     "karma-sinon-chai": "2.0.2",
     "karma-sourcemap-loader": "^0.3.7",
@@ -71,7 +84,7 @@
     "karma-webpack": "^4.0.2",
     "lintspaces-cli": "^0.7.0",
     "lolex": "5.1.2",
-    "mocha": "6.2.2",
+    "mocha": "^10.2.0",
     "mockery": "2.1.0",
     "node-fetch": "2.6.0",
     "nodemon": "^1.9.2",
@@ -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