@duffel/components 3.0.6-canary → 3.0.7-canary

package/.eslintrc.js

@@ -9,7 +9,12 @@ module.exports = {
     node: true,
     jest: true,
   },
-  ignorePatterns: ["**/cdn-dist/**", "react-dist/**", "__generated__**"],
+  ignorePatterns: [
+    "**/dist/**",
+    "**/cdn-dist/**",
+    "**/react-dist/**",
+    "__generated__**",
+  ],
   parser: "@typescript-eslint/parser",
   extends: [
     "eslint:recommended",

package/.github/workflows/release.yml

@@ -62,7 +62,7 @@ jobs:
         if: steps.initversion.outputs.version != steps.extractver.outputs.extractver
         uses: peter-evans/create-pull-request@v3.10.0
         with:
-          token: ${{ secrets.PAT }}
+          token: ${{ secrets.PAT }} # You can fin this on https://duffel.1password.com/vaults/all/allitems/m3heg3y3ijclli4tmmp4bsyxna
           commit-message: "chore(release): ${{ steps.extractver.outputs.extractver }}"
           committer: duffel-bot <duffel-bot-read-write@duffel.com>
           author: duffel-bot <duffel-bot-read-write@duffel.com>

package/CONTRIBUTING.md

@@ -1,52 +1,3 @@
-## How do I integrate this into my website?
-
-1. Please start by reading our integration guide on https://duffel.com/docs/guides/ancillaries-component
-2. You can also find examples code in the `example` folder (see below).
-
-## Integration examples
-
-We have two ways to run the example.
-
-### 1. Full stack
-
-This example has a server that will reach out to the Duffel API to search and retrieve an offer.
-To talk to the API we'll define the url to the API environment we want and .
-Please add the following to `.env.local`:
-
-```sh
-# .env.local
-
-# Used to authenticate our
-# example server to talk to Duffel
-DUFFEL_API_TOKEN=test_duffel_dev_rw
-
-# The Duffel API environment we want
-# to talk. Remember to update the key
-# if this value changes.
-DUFFEL_API_URL=https://localhost:4000;
-```
-
-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:
-
-1. Serve the Duffel component bundle and watch for changes to rebuild on port `8000`. This can also be done with `yarn dev`
-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`
-
-### What do I need to do to use the component with a local version of the Duffel API?
-
-- Make sure you visit https://localhost:4000 to allow your browser to make requests to it.
-- Make sure the org your are using has the [flags enabled](http://localhost:4242/features):
-  - `ancillaries_component_enable_client_key`
-  - `ancillaries_component_enable_client_key_endpoints`
-
-### 2. Client side with fixtures
-
-For a more basic example that doesn't rely on the Duffel API, use `yarn run-example:client-side`.
-
-This command will:
-
-1. Serve the Duffel component bundle and watch for changes to rebuild on port `8000`. This can also be done with `yarn dev`
-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`
-
 ## Debug mode
 
 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,9 +12,9 @@ Debug mode makes use of a logger, which selectively outputs to the console based
 
 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.
 
-### Setup env variables under `.env.local`:
+### Setup environment
 
-Make sure you have an up-to-date version of `.env.build`
+Make sure you have an up-to-date version of `.env.build`:
 
 ```sh
 # .env.build
@@ -76,7 +27,7 @@ DUFFEL_API_URL=https://api.duffel.com
 # This is needed so the component knows the url base to use for its stylesheet
 # This variable is here so we can release component versions that may point to local environments or bypass the cache.
 # If no value is provided, the default `https://assets.duffel.com/ancillaries-component` will be used.
-COMPONENT_CDN=https://assets.duffel.com/components/ancillaries
+COMPONENT_CDN=https://assets.duffel.com/components
 
 # The auth token is so we send data
 # to sentry during the build.
@@ -109,7 +60,7 @@ This command will:
 
 ### Build component
 
-#### Build html custom element
+#### Build for CDN upload
 
 ```sh
 yarn cdn-build # Build will output to ./cdn-dist
@@ -120,7 +71,7 @@ You can see this build referenced on:
 - `src/examples/client-side`
 - `src/examples/full-stack`
 
-#### Build react component
+#### Build for npm publishing
 
 ```sh
 yarn react-build # Build will output to ./react-dist
@@ -129,3 +80,4 @@ yarn react-build # Build will output to ./react-dist
 You can see this build referenced on:
 
 - `src/examples/react-app`
+- `src/examples/just-typescript`

package/README.md

@@ -18,10 +18,33 @@ npm i @duffel/components
 <script src="https://assets.duffel.com/components/3.0.5-canary/index.js"></script>
 ```
 
-## Components
+## How do I integrate this into my website?
+
+1. Please start by reading our integration guide on https://duffel.com/docs/guides/ancillaries-component
+
+## Integration examples
+
+1. **client-side** | This example loads a local version of the components using a `script` tag. It uses a fixture for the
+
+   - [Find it on src/examples/client-side](src/examples/client-side)
+
+2. **full-stack** | This example loads a local version of the components using a `script` tag. It will search and retrieve an offer from the Duffel API and render the ancillaries component custom element with its `offer_id` and `client_key`. As soon as a service modal is closed it will create a test order with the given payload.
+
+   - [Find it on src/examples/full-stack](src/examples/full-stack)
+
+3. **just-typescript** | This example imports a local version of `@duffel/components` and renders the custom element with an offer fixture once the page loads.
+
+   - [Find it on src/examples/just-typescript](src/examples/just-typescript)
+
+4. **react-app** | This example imports a local version of `@duffel/components` and renders the a react element with an offer fixture.
+   - [Find it on src/examples/react-app](src/examples/react-app)
+
+## What components are available?
 
 ### Ancillaries component
 
 The ancillaries component allows your customers to add ancillaries to their order. It's simple to add to your website and can be customised to fit your brand. This component is avaiable through npm and our cdn.
 
 - [Find live demo on codesandbox.io&nbsp;&nbsp;↗](https://codesandbox.io/s/duffel-ancillaries-example-1nxuu7)
+
+#### more coming soon...

package/config/esbuild.dev.config.js

@@ -36,7 +36,7 @@ const COMPONENT_CDN = process.env.COMPONENT_CDN.startsWith("http://localhost:")
 
   let { host, port } = await esbuildContext.serve({
     host: "localhost",
-    servedir: "dist",
+    servedir: "cdn-dist",
     port: 8000,
   });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duffel/components",
-  "version": "3.0.6-canary",
+  "version": "3.0.7-canary",
   "private": false,
   "license": "MIT",
   "main": "react-dist/index.js",