@financial-times/n-myft-ui 26.0.0 → 27.2.0

package/.circleci/config.yml

@@ -5,7 +5,11 @@ references:
   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
 
@@ -63,25 +67,21 @@ jobs:
     steps:
       - checkout
       - node/install-npm:
-        version: "7"
+          version: "7"
       - 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
+          command: git clone --depth 1
+            git@github.com:Financial-Times/next-ci-shared-helpers.git
+            .circleci/shared-helpers
       - *restore_npm_cache
       - 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
@@ -114,7 +114,8 @@ jobs:
       - 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: 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
@@ -138,32 +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:
@@ -174,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.