@duffel/components 3.0.0-canary → 3.0.2-canary

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.
Files changed (7) hide show
  1. package/CONTRIBUTING.md +131 -0
  2. package/README.md +4 -134
  3. package/package.json +1 -1
  4. package/react-dist/index.d.ts +0 -1
  5. package/react-dist/index.js +13 -13
  6. package/react-dist/index.js.map +4 -4
  7. package/src/index.ts +1 -1
package/CONTRIBUTING.md ADDED
@@ -0,0 +1,131 @@
1
+ ## How do I integrate this into my website?
2
+
3
+ 1. Please start by reading our integration guide on https://duffel.com/docs/guides/ancillaries-component
4
+ 2. You can also find examples code in the `example` folder (see below).
5
+
6
+ ## Integration examples
7
+
8
+ We have two ways to run the example.
9
+
10
+ ### 1. Full stack
11
+
12
+ This example has a server that will reach out to the Duffel API to search and retrieve an offer.
13
+ To talk to the API we'll define the url to the API environment we want and .
14
+ Please add the following to `.env.local`:
15
+
16
+ ```sh
17
+ # .env.local
18
+
19
+ # Used to authenticate our
20
+ # example server to talk to Duffel
21
+ DUFFEL_API_TOKEN=test_duffel_dev_rw
22
+
23
+ # The Duffel API environment we want
24
+ # to talk. Remember to update the key
25
+ # if this value changes.
26
+ DUFFEL_API_URL=https://localhost:4000;
27
+ ```
28
+
29
+ This is a 'real life' example, where it uses a real offer ID and client key retrieved from the Duffel API. To run this, use `yarn run-example:full-stack`. This command will:
30
+
31
+ 1. Serve the Duffel component bundle and watch for changes to rebuild on port `8000`. This can also be done with `yarn dev`
32
+ 2. Run the full stack server using node. The example page will be ready on port `6262`. This can be done with `yarn run-full-stack-server`
33
+
34
+ ### What do I need to do to use the component with a local version of the Duffel API?
35
+
36
+ - Make sure you visit https://localhost:4000 to allow your browser to make requests to it.
37
+ - Make sure the org your are using has the [flags enabled](http://localhost:4242/features):
38
+ - `ancillaries_component_enable_client_key`
39
+ - `ancillaries_component_enable_client_key_endpoints`
40
+
41
+ ### 2. Client side with fixtures
42
+
43
+ For a more basic example that doesn't rely on the Duffel API, use `yarn run-example:client-side`.
44
+
45
+ This command will:
46
+
47
+ 1. Serve the Duffel component bundle and watch for changes to rebuild on port `8000`. This can also be done with `yarn dev`
48
+ 2. Host a basic `index.html` with `http-server`. The example page will be ready on port `6262`. This can be done with `yarn run-client-side-server`
49
+
50
+ ## Debug mode
51
+
52
+ The component takes a `debug` boolean prop. When enabled, debug output is logged to the console, with useful info like the props that were passed in. This is intended both for our internal use and for users integrating it.
53
+
54
+ Debug mode is enabled by default in all of this repository's local environments (e.g. Storybook).
55
+
56
+ Debug mode makes use of a logger, which selectively outputs to the console based on whether or not debug mode is enabled. When it makes sense, make use of the logger to output useful information. See `@lib/logging` for how to use it.
57
+
58
+ ## How to upload new changes to our CDN
59
+
60
+ ### Setup `gcloud`
61
+
62
+ Our CDN is [hosted on Google Cloud Platform](<https://console.cloud.google.com/storage/browser/duffel-assets/components/ancillaries?pageState=(%22StorageObjectListTable%22:(%22f%22:%22%255B%255D%22))&project=duffel-prod-fda1bc52&prefix=&forceOnObjectsSortingFiltering=false>). To upload new changes you'll need to have `gcloud` intalled and authenticate with GCP. You can do this by running `gcloud auth login` and following the instructions.
63
+
64
+ ### Setup env variables under `.env.local`:
65
+
66
+ Make sure you have an up-to-date version of `.env.build`
67
+
68
+ ```sh
69
+ # .env.build
70
+
71
+ # Include the base url for the Duffel API.
72
+ # This variable is here to give us the ability to build a dist version that points to a local environment.
73
+ # If no value is provided, the default `https://api.duffel.com` will be used.
74
+ DUFFEL_API_URL=https://api.duffel.com
75
+
76
+ # This is needed so the component knows the url base to use for its stylesheet
77
+ # This variable is here so we can release component versions that may point to local environments or bypass the cache.
78
+ # If no value is provided, the default `https://assets.duffel.com/ancillaries-component` will be used.
79
+ COMPONENT_CDN=https://assets.duffel.com/components/ancillaries
80
+
81
+ # The auth token is so we send data
82
+ # to sentry during the build.
83
+ # This is helpful when CI is
84
+ # building releases, locally not as much.
85
+ # You can get it here: https://duffel.sentry.io/settings/account/api/auth-tokens
86
+ SENTRY_AUTH_TOKEN=
87
+ ```
88
+
89
+ ### Upload to CDN
90
+
91
+ To upload the latest version of the component to the CDN, run:
92
+
93
+ ```sh
94
+ yarn upload-to-cdn
95
+ ```
96
+
97
+ This command will:
98
+
99
+ 1. Build the component. the output will be in the `dist` folder.
100
+
101
+ 2. Upload the build to the version folder on GCP storage.
102
+
103
+ - The build version is defined in [`package.json`](/package.json) under the `version` attribute.
104
+ - [You can find uploaded versions here](<https://console.cloud.google.com/storage/browser/duffel-assets/components/ancillaries?pageState=(%22StorageObjectListTable%22:(%22f%22:%22%255B%255D%22))&project=duffel-prod-fda1bc52&prefix=&forceOnObjectsSortingFiltering=false>)
105
+ - A version folder will be created if it doesn't exist.
106
+ - The version folder will be overwritten if it already exists.
107
+
108
+ 3. Upload the sourcemaps for that version to Sentry
109
+
110
+ ### Build component
111
+
112
+ #### Build html custom element
113
+
114
+ ```sh
115
+ yarn cdn-build # Build will output to ./cdn-dist
116
+ ```
117
+
118
+ You can see this build referenced on:
119
+
120
+ - `src/examples/client-side`
121
+ - `src/examples/full-stack`
122
+
123
+ #### Build react component
124
+
125
+ ```sh
126
+ yarn react-build # Build will output to ./react-dist
127
+ ```
128
+
129
+ You can see this build referenced on:
130
+
131
+ - `src/examples/react-app`
package/README.md CHANGED
@@ -1,139 +1,9 @@
1
- # duffel-ancillaries
1
+ # @duffel/components
2
2
 
3
- ## What is this?
3
+ ## Ancillaries component
4
+
5
+ ### What is this?
4
6
 
5
7
  The ancillaries component is a JavaScript component you can use to allow your customers to add ancillaries to their order. It's simple to add to your website and can be customised to fit your brand.
6
8
 
7
9
  > [See live demo here](https://codesandbox.io/s/duffel-ancillaries-example-1nxuu7)
8
-
9
- ## How do I integrate this into my website?
10
-
11
- 1. Please start by reading our integration guide on https://duffel.com/docs/guides/ancillaries-component
12
- 2. You can also find examples code in the `example` folder (see below).
13
-
14
- ## Integration examples
15
-
16
- We have two ways to run the example.
17
-
18
- ### 1. Full stack
19
-
20
- This example has a server that will reach out to the Duffel API to search and retrieve an offer.
21
- To talk to the API we'll define the url to the API environment we want and .
22
- Please add the following to `.env.local`:
23
-
24
- ```sh
25
- # .env.local
26
-
27
- # Used to authenticate our
28
- # example server to talk to Duffel
29
- DUFFEL_API_TOKEN=test_duffel_dev_rw
30
-
31
- # The Duffel API environment we want
32
- # to talk. Remember to update the key
33
- # if this value changes.
34
- DUFFEL_API_URL=https://localhost:4000;
35
- ```
36
-
37
- This is a 'real life' example, where it uses a real offer ID and client key retrieved from the Duffel API. To run this, use `yarn run-example:full-stack`. This command will:
38
-
39
- 1. Serve the Duffel component bundle and watch for changes to rebuild on port `8000`. This can also be done with `yarn dev`
40
- 2. Run the full stack server using node. The example page will be ready on port `6262`. This can be done with `yarn run-full-stack-server`
41
-
42
- ### What do I need to do to use the component with a local version of the Duffel API?
43
-
44
- - Make sure you visit https://localhost:4000 to allow your browser to make requests to it.
45
- - Make sure the org your are using has the [flags enabled](http://localhost:4242/features):
46
- - `ancillaries_component_enable_client_key`
47
- - `ancillaries_component_enable_client_key_endpoints`
48
-
49
- ### 2. Client side with fixtures
50
-
51
- For a more basic example that doesn't rely on the Duffel API, use `yarn run-example:client-side`.
52
-
53
- This command will:
54
-
55
- 1. Serve the Duffel component bundle and watch for changes to rebuild on port `8000`. This can also be done with `yarn dev`
56
- 2. Host a basic `index.html` with `http-server`. The example page will be ready on port `6262`. This can be done with `yarn run-client-side-server`
57
-
58
- ## Debug mode
59
-
60
- The component takes a `debug` boolean prop. When enabled, debug output is logged to the console, with useful info like the props that were passed in. This is intended both for our internal use and for users integrating it.
61
-
62
- Debug mode is enabled by default in all of this repository's local environments (e.g. Storybook).
63
-
64
- Debug mode makes use of a logger, which selectively outputs to the console based on whether or not debug mode is enabled. When it makes sense, make use of the logger to output useful information. See `@lib/logging` for how to use it.
65
-
66
- ## How to upload new changes to our CDN
67
-
68
- ### Setup `gcloud`
69
-
70
- Our CDN is [hosted on Google Cloud Platform](<https://console.cloud.google.com/storage/browser/duffel-assets/components/ancillaries?pageState=(%22StorageObjectListTable%22:(%22f%22:%22%255B%255D%22))&project=duffel-prod-fda1bc52&prefix=&forceOnObjectsSortingFiltering=false>). To upload new changes you'll need to have `gcloud` intalled and authenticate with GCP. You can do this by running `gcloud auth login` and following the instructions.
71
-
72
- ### Setup env variables under `.env.local`:
73
-
74
- Make sure you have an up-to-date version of `.env.build`
75
-
76
- ```sh
77
- # .env.build
78
-
79
- # Include the base url for the Duffel API.
80
- # This variable is here to give us the ability to build a dist version that points to a local environment.
81
- # If no value is provided, the default `https://api.duffel.com` will be used.
82
- DUFFEL_API_URL=https://api.duffel.com
83
-
84
- # This is needed so the component knows the url base to use for its stylesheet
85
- # This variable is here so we can release component versions that may point to local environments or bypass the cache.
86
- # If no value is provided, the default `https://assets.duffel.com/ancillaries-component` will be used.
87
- COMPONENT_CDN=https://assets.duffel.com/components/ancillaries
88
-
89
- # The auth token is so we send data
90
- # to sentry during the build.
91
- # This is helpful when CI is
92
- # building releases, locally not as much.
93
- # You can get it here: https://duffel.sentry.io/settings/account/api/auth-tokens
94
- SENTRY_AUTH_TOKEN=
95
- ```
96
-
97
- ### Upload to CDN
98
-
99
- To upload the latest version of the component to the CDN, run:
100
-
101
- ```sh
102
- yarn upload-to-cdn
103
- ```
104
-
105
- This command will:
106
-
107
- 1. Build the component. the output will be in the `dist` folder.
108
-
109
- 2. Upload the build to the version folder on GCP storage.
110
-
111
- - The build version is defined in [`package.json`](/package.json) under the `version` attribute.
112
- - [You can find uploaded versions here](<https://console.cloud.google.com/storage/browser/duffel-assets/components/ancillaries?pageState=(%22StorageObjectListTable%22:(%22f%22:%22%255B%255D%22))&project=duffel-prod-fda1bc52&prefix=&forceOnObjectsSortingFiltering=false>)
113
- - A version folder will be created if it doesn't exist.
114
- - The version folder will be overwritten if it already exists.
115
-
116
- 3. Upload the sourcemaps for that version to Sentry
117
-
118
- ### Build component
119
-
120
- #### Build html custom element
121
-
122
- ```sh
123
- yarn cdn-build # Build will output to ./cdn-dist
124
- ```
125
-
126
- You can see this build referenced on:
127
-
128
- - `src/examples/client-side`
129
- - `src/examples/full-stack`
130
-
131
- #### Build react component
132
-
133
- ```sh
134
- yarn react-build # Build will output to ./react-dist
135
- ```
136
-
137
- You can see this build referenced on:
138
-
139
- - `src/examples/react-app`
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@duffel/components",
3
- "version": "3.0.0-canary",
3
+ "version": "3.0.2-canary",
4
4
  "private": false,
5
5
  "license": "MIT",
6
6
  "main": "react-dist/index.js",
package/react-dist/index.d.ts CHANGED
@@ -4,5 +4,4 @@
4
4
  * they must be exported here.
5
5
  */
6
6
  export * from "./components/DuffelAncillaries";
7
- export * from "./components/DuffelAncillariesCustomElement";
8
7
  export * from "./types";