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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,16 +2,11 @@
2
2
  # template: component
3
3
 
4
4
  references:
5
- container_config_node12: &container_config_node12
5
+ container_config_node: &container_config_node
6
6
  working_directory: ~/project/build
7
7
  docker:
8
8
  - image: circleci/node:12-browsers
9
9
 
10
- container_config_lambda_node12: &container_config_lambda_node12
11
- working_directory: ~/project/build
12
- docker:
13
- - image: lambci/lambda:build-nodejs12.x
14
-
15
10
  workspace_root: &workspace_root ~/project
16
11
 
17
12
  attach_workspace: &attach_workspace
@@ -20,13 +15,13 @@ references:
20
15
 
21
16
  npm_cache_keys: &npm_cache_keys
22
17
  keys:
23
- - v3-dependency-npm-{{ checksum "package.json" }}-
24
- - v3-dependency-npm-{{ checksum "package.json" }}
25
- - v3-dependency-npm-
18
+ - v8-dependency-npm-{{ checksum "package-lock.json" }}-
19
+ - v8-dependency-npm-{{ checksum "package-lock.json" }}
20
+ - v8-dependency-npm-
26
21
 
27
22
  cache_npm_cache: &cache_npm_cache
28
23
  save_cache:
29
- key: v3-dependency-npm-{{ checksum "package.json" }}-{{ epoch }}
24
+ key: v8-dependency-npm-{{ checksum "package-lock.json" }}-{{ epoch }}
30
25
  paths:
31
26
  - ./node_modules/
32
27
 
@@ -57,13 +52,18 @@ references:
57
52
  branches:
58
53
  ignore: /.*/
59
54
 
60
- version: 2
55
+ version: 2.1
56
+
57
+ orbs:
58
+ node: circleci/node@4.6.0
61
59
 
62
60
  jobs:
63
61
  build:
64
- <<: *container_config_node12
62
+ <<: *container_config_node
65
63
  steps:
66
64
  - checkout
65
+ - node/install-npm:
66
+ version: "7"
67
67
  - run:
68
68
  name: Checkout next-ci-shared-helpers
69
69
  command: git clone --depth 1 git@github.com:Financial-Times/next-ci-shared-helpers.git .circleci/shared-helpers
@@ -71,9 +71,6 @@ jobs:
71
71
  - run:
72
72
  name: Install project dependencies
73
73
  command: make install
74
- - run:
75
- name: shared-helper / npm-install-peer-deps
76
- command: .circleci/shared-helpers/helper-npm-install-peer-deps
77
74
  - run:
78
75
  name: shared-helper / npm-update
79
76
  command: .circleci/shared-helpers/helper-npm-update
@@ -82,6 +79,9 @@ jobs:
82
79
  command: .circleci/shared-helpers/helper-generate-build-state-artifacts
83
80
  when: always
84
81
  - *cache_npm_cache
82
+ - run:
83
+ name: Compile JSX templates
84
+ command: npm run build-package
85
85
  - store_artifacts:
86
86
  path: build-state
87
87
  destination: build-state
@@ -91,7 +91,7 @@ jobs:
91
91
  - build
92
92
 
93
93
  test:
94
- <<: *container_config_node12
94
+ <<: *container_config_node
95
95
  parallelism: 1
96
96
  steps:
97
97
  - *attach_workspace
@@ -108,7 +108,7 @@ jobs:
108
108
  destination: test-results
109
109
 
110
110
  publish:
111
- <<: *container_config_node12
111
+ <<: *container_config_node
112
112
  steps:
113
113
  - *attach_workspace
114
114
  - run:
@@ -120,7 +120,7 @@ jobs:
120
120
  command: .circleci/shared-helpers/helper-npm-version-and-publish-public
121
121
 
122
122
  deploy:
123
- <<: *container_config_node12
123
+ <<: *container_config_node
124
124
  steps:
125
125
  - *attach_workspace
126
126
  - add_ssh_keys:
package/README.md CHANGED
@@ -38,3 +38,54 @@ make demo
38
38
  ```
39
39
 
40
40
  View the demo on `localhost:5005`
41
+
42
+
43
+ ## Migration Guide
44
+
45
+ ### Upgrading from v25
46
+
47
+ V24 introduces some major changes to n-myft-ui components. Some of the components have been moved from handlebars to jsx.
48
+
49
+ These components include:
50
+ - csrf-token
51
+ - follow-button
52
+ - save-for-later
53
+ - pin-button
54
+ - concept-list
55
+ - collections
56
+
57
+ 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.
58
+
59
+ #### Example rendering in a jsx component
60
+ ```jsx
61
+ import { SaveForLater } from '@financial-times/n-myft-ui';
62
+
63
+ export default function Consumer() {
64
+ return (
65
+ <SaveForLater contentId={contentId} saveButtonWithIcon={true} flags={{myFtApiWrite:myFtApiWrite}}/>
66
+ )
67
+ }
68
+ ```
69
+
70
+ 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).
71
+
72
+
73
+ #### Example rendering in a handlebars partial
74
+ 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).
75
+
76
+ ```hbs
77
+ <div>
78
+ <h2 class="demo-section__title">
79
+ Follow button
80
+ </h2>
81
+
82
+ {{#followButton}}
83
+ {{{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"}}}
84
+ {{/followButton}}
85
+ </div>
86
+ ```
87
+
88
+ 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)
89
+
90
+
91
+ NB: This branch is the development branch for v25 and all bug fixes for breaking changes related to `jsx` go here.