@financial-times/n-myft-ui 24.0.1 → 25.0.0-beta.3

package/.circleci/config.yml

@@ -2,16 +2,11 @@
 # template: component
 
 references:
-  container_config_node12: &container_config_node12
+  container_config_node: &container_config_node
     working_directory: ~/project/build
     docker:
       - image: circleci/node:12-browsers
 
-  container_config_lambda_node12: &container_config_lambda_node12
-    working_directory: ~/project/build
-    docker:
-      - image: lambci/lambda:build-nodejs12.x
-
   workspace_root: &workspace_root ~/project
 
   attach_workspace: &attach_workspace
@@ -20,13 +15,13 @@ references:
 
   npm_cache_keys: &npm_cache_keys
     keys:
-      - v3-dependency-npm-{{ checksum "package.json" }}-
-      - v3-dependency-npm-{{ checksum "package.json" }}
-      - v3-dependency-npm-
+      - 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: v3-dependency-npm-{{ checksum "package.json" }}-{{ epoch }}
+      key: v8-dependency-npm-{{ checksum "package-lock.json" }}-{{ epoch }}
       paths:
         - ./node_modules/
 
@@ -57,13 +52,18 @@ references:
     branches:
       ignore: /.*/
 
-version: 2
+version: 2.1
+
+orbs:
+  node: circleci/node@4.6.0
 
 jobs:
   build:
-    <<: *container_config_node12
+    <<: *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 .circleci/shared-helpers
@@ -71,9 +71,6 @@ jobs:
       - run:
           name: Install project dependencies
           command: make install
-      - run:
-          name: shared-helper / npm-install-peer-deps
-          command: .circleci/shared-helpers/helper-npm-install-peer-deps
       - run:
           name: shared-helper / npm-update
           command: .circleci/shared-helpers/helper-npm-update
@@ -82,6 +79,9 @@ jobs:
           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
@@ -91,7 +91,7 @@ jobs:
             - build
 
   test:
-    <<: *container_config_node12
+    <<: *container_config_node
     parallelism: 1
     steps:
       - *attach_workspace
@@ -108,7 +108,7 @@ jobs:
           destination: test-results
 
   publish:
-    <<: *container_config_node12
+    <<: *container_config_node
     steps:
       - *attach_workspace
       - run:
@@ -120,7 +120,7 @@ jobs:
           command: .circleci/shared-helpers/helper-npm-version-and-publish-public
 
   deploy:
-    <<: *container_config_node12
+    <<: *container_config_node
     steps:
       - *attach_workspace
       - add_ssh_keys:

package/README.md

@@ -38,3 +38,54 @@ make demo
 ```
 
 View the demo on `localhost:5005`
+
+
+## Migration Guide
+
+### Upgrading from v25
+
+V24 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
+
+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)
+
+
+NB: This branch is the development branch for v25 and all bug fixes for breaking changes related to `jsx` go here.