@financial-times/n-myft-ui 26.1.0 → 27.1.0

package/.circleci/config.yml

@@ -2,60 +2,54 @@
 # template: component
 
 references:
-  container_config_node:
-    &container_config_node
+  container_config_node: &container_config_node
     working_directory: ~/project/build
     docker:
-      - image: circleci/node:12-browsers
+      - image: cimg/node:<< parameters.node-version >>-browsers
+    parameters:
+      node-version:
+        default: "16.14"
+        type: string
 
   workspace_root: &workspace_root ~/project
 
-  attach_workspace:
-    &attach_workspace
+  attach_workspace: &attach_workspace
     attach_workspace:
       at: *workspace_root
 
-  npm_cache_keys:
-    &npm_cache_keys
+  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
+  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_npm_cache: &restore_npm_cache
     restore_cache:
       <<: *npm_cache_keys
 
-  filters_ignore_gh_pages:
-    &filters_ignore_gh_pages
+  filters_ignore_gh_pages: &filters_ignore_gh_pages
     branches:
       ignore: gh_pages
 
-  filters_only_main:
-    &filters_only_main
+  filters_only_main: &filters_only_main
     branches:
       only: main
 
-  filters_ignore_main:
-    &filters_ignore_main
+  filters_ignore_main: &filters_ignore_main
     branches:
       ignore: main
 
-  filters_ignore_tags:
-    &filters_ignore_tags
+  filters_ignore_tags: &filters_ignore_tags
     tags:
       ignore: /.*/
 
-  filters_version_tag:
-    &filters_version_tag
+  filters_version_tag: &filters_version_tag
     tags:
       only:
         - /^v?\d+\.\d+\.\d+(?:-beta\.\d+)?$/
@@ -73,7 +67,7 @@ jobs:
     steps:
       - checkout
       - node/install-npm:
-        version: "7"
+          version: "7"
       - run:
           name: Checkout next-ci-shared-helpers
           command: git clone --depth 1
@@ -83,17 +77,11 @@ jobs:
       - run:
           name: Install project dependencies
           command: make install
-      - run:
-          name: shared-helper / npm-update
-          command: .circleci/shared-helpers/helper-npm-update
       - run:
           name: shared-helper / generate-build-state-artifacts
           command: .circleci/shared-helpers/helper-generate-build-state-artifacts
           when: always
       - *cache_npm_cache
-      - run:
-          name: Compile JSX templates
-          command: npm run build-package
       - store_artifacts:
           path: build-state
           destination: build-state
@@ -151,33 +139,49 @@ workflows:
           filters:
             <<: *filters_ignore_tags
             <<: *filters_ignore_gh_pages
+          name: build-v<< matrix.node-version >>
+          matrix:
+            parameters:
+              node-version: ["16.14", "14.19"]
       - test:
           filters:
             <<: *filters_ignore_tags
-            <<: *filters_ignore_gh_pages
           requires:
-            - build
+            - build-v<< matrix.node-version >>
+          name: test-v<< matrix.node-version >>
+          matrix:
+            parameters:
+              node-version: ["16.14", "14.19"]
       - deploy:
           filters:
             <<: *filters_only_main
           requires:
-            - build
+            - build-v16.14
   build-test-publish:
     jobs:
       - build:
           filters:
             <<: *filters_version_tag
+            <<: *filters_ignore_gh_pages
+          name: build-v<< matrix.node-version >>
+          matrix:
+            parameters:
+              node-version: ["16.14", "14.19"]
       - test:
           filters:
             <<: *filters_version_tag
           requires:
-            - build
+            - build-v<< matrix.node-version >>
+          name: test-v<< matrix.node-version >>
+          matrix:
+            parameters:
+              node-version: ["16.14", "14.19"]
       - publish:
           context: npm-publish-token
           filters:
             <<: *filters_version_tag
           requires:
-            - test
+            - test-v16.14
 
   nightly:
     triggers:
@@ -188,10 +192,18 @@ workflows:
     jobs:
       - build:
           context: next-nightly-build
+          name: build-v<< matrix.node-version >>
+          matrix:
+            parameters:
+              node-version: ["16.14", "14.19"]
       - test:
           requires:
-            - build
+            - build-v<< matrix.node-version >>
           context: next-nightly-build
+          name: test-v<< matrix.node-version >>
+          matrix:
+            parameters:
+              node-version: ["16.14", "14.19"]
 
 notify:
   webhooks:

package/.nvmrc

@@ -1 +1 @@
-12
+16

package/Makefile

@@ -46,4 +46,3 @@ test:
 	make test-unit
 	make test-build
 	make a11y
-	jest

package/README.md

@@ -39,52 +39,6 @@ make demo
 
 View the demo on `localhost:5005`
 
+## Unstable versions
 
-## Migration Guide
-
-### Upgrading from v25
-
-V25 introduces some major changes to n-myft-ui components. Some of the components have been moved from handlebars to jsx. 
-
-These components include:
-- csrf-token
-- follow-button
-- save-for-later
-- pin-button
-- concept-list
-- collections
-- InstantAlert
-
-A consumer of any of these components needs to render them directly as `jsx` components in a parent `jsx` component or use the `renderReactComponent` helper function provided by `@financial-times/dotcom-server-handlebars` in a consuming handlebars template/partial. 
-
-#### Example rendering in a jsx component
-```jsx
-import { SaveForLater } from '@financial-times/n-myft-ui';
-
-export default function Consumer() {
-	return (
-		<SaveForLater contentId={contentId} saveButtonWithIcon={true} flags={{myFtApiWrite:myFtApiWrite}}/>
-	)
-}
-```
-
-More examples of rendering these components can be found [here](https://github.com/Financial-Times/n-myft-ui/blob/main/demos/templates/demo.jsx) with component props passed in [here](https://github.com/Financial-Times/n-myft-ui/blob/dfbf06d10f78756871cfe8d2aeb863ce4bcca1e1/demos/app.js#L54).
-
-
-#### Example rendering in a handlebars partial
-To render a jsx component in a handlebars partial, consumers need to add the `helpers` provided by `@financial-times/dotcom-server-handlebars` to the PageKitHandlebars config in `express app engine` [see example](https://github.com/Financial-Times/n-myft-ui/blob/dfbf06d10f78756871cfe8d2aeb863ce4bcca1e1/demos/app.js#L41). 
-
-```hbs
-<div>
-	<h2 class="demo-section__title">
-		Follow button
-	</h2>
-
-	{{#followButton}}
-		{{{renderReactComponent localPath="node_modules/@financial-times/n-myft-ui/components/follow-button/follow-button" flags=flags variant="standard" conceptId="0000-0000-0000-0000" name="Follow Item" directType="http://www.ft.com/ontology/product/Brand"}}}
-	{{/followButton}}
-</div>
-```
-
-More examples of rendering jsx in handlebars partials can be found [here](https://github.com/Financial-Times/n-myft-ui/blob/main/demos/templates/demo.html)
-
+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.