refactor: rename components package to smart camera web (#140)

* refactor: rename `components` to `smart-camera-web` * ci: modify github workflows for smart-camera-web package * embed: update package name, dependencies * refactor: use local path for cross-package dependencies * refactor: move combobox component to components package (#141) * refactor: move combobox component to components package * ci: deploy preview on PRs to all branches * deps: add `@smileid/components` as dependency of `@smileid/embed` * refactor: use local paths for workspace dependencies * refactor: extract `end-user-consent` component to `components` package (#142) * refactor: extract totp-consent to components package (#143) * refactor: move combobox component to components package * ci: deploy preview on PRs to all branches * deps: add `@smileid/components` as dependency of `@smileid/embed` * refactor: extract `end-user-consent` component to `components` package * refactor: extract totp-consent to components package * refactor: use `<totp-consent>` as the markup * refactor: rename `totp-consent` in tests * docs: update README to reflect packages update
smileidentity · Nov 28, 2023 · e29de42 · e29de42
1 parent 609c0af
commit e29de42
Show file tree

Hide file tree

Showing 59 changed files with 1,035 additions and 991 deletions.
diff --git a/.github/workflows/deploy-preview.yml b/.github/workflows/deploy-preview.yml
@@ -2,20 +2,18 @@ name: deploy-preview
 on:
   workflow_call:
   pull_request:
-    branches:
-      - main
     types:
       - opened
       - synchronize
 jobs:
   test:
     uses: ./.github/workflows/test.yml
-  components:
+  smart-camera-web:
     needs:
       - test
     defaults:
       run:
-        working-directory: ./packages/components
+        working-directory: ./packages/smart-camera-web
     runs-on: ubuntu-latest
     steps:
       - name: checkout code
@@ -27,9 +25,9 @@ jobs:
       - name: build application
         run: npm run build
       - name: set destination directory
-        id: set_dest_dir_camera_web
+        id: set_dest_dir_smart_camera_web
         run: >-
-          echo "DEST_DIR_COMPONENTS=js/preview-$GITHUB_HEAD_REF" >>
+          echo "DEST_DIR_SMART_CAMERA_WEB=js/preview-$GITHUB_HEAD_REF" >>
           "$GITHUB_ENV"
       - name: deploy preview to s3
         uses: jakejarvis/[email protected]
@@ -42,8 +40,8 @@ jobs:
           AWS_ACCESS_KEY_ID: '${{ secrets.AWS_ACCESS_KEY_ID }}'
           AWS_SECRET_ACCESS_KEY: '${{ secrets.AWS_SECRET_ACCESS_KEY }}'
           AWS_REGION: '${{ secrets.AWS_REGION }}'
-          SOURCE_DIR: ./packages/components
-          DEST_DIR: '${{ env.DEST_DIR_COMPONENTS }}'
+          SOURCE_DIR: ./packages/smart-camera-web
+          DEST_DIR: '${{ env.DEST_DIR_SMART_CAMERA_WEB }}'
   embed:
     needs:
       - test

diff --git a/.github/workflows/deploy-staging.yml b/.github/workflows/deploy-staging.yml
@@ -5,13 +5,13 @@ on:
 jobs:
   test:
     uses: ./.github/workflows/test.yml
-  components:
+  smart-camera-web:
     needs: [test]
     runs-on: ubuntu-latest
     timeout-minutes: 5
     defaults:
       run:
-        working-directory: ./packages/components
+        working-directory: ./packages/smart-camera-web
     steps:
       - name: checkout code
         uses: actions/checkout@v4
@@ -26,7 +26,7 @@ jobs:
           AWS_ACCESS_KEY_ID: "${{ secrets.AWS_ACCESS_KEY_ID }}"
           AWS_SECRET_ACCESS_KEY: "${{ secrets.AWS_SECRET_ACCESS_KEY }}"
           AWS_REGION: "${{ secrets.AWS_REGION }}"
-          SOURCE_DIR: "./packages/components"
+          SOURCE_DIR: "./packages/smart-camera-web"
           DEST_DIR: "js/staging"
   embed:
     needs: [test]

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -5,27 +5,27 @@ on:
 jobs:
   test:
     uses: ./.github/workflows/test.yml
-  components:
+  smart-camera-web:
     needs: [test]
     runs-on: ubuntu-latest
     timeout-minutes: 5
     defaults:
       run:
-        working-directory: ./packages/components
+        working-directory: ./packages/smart-camera-web
     steps:
       - name: checkout code
         uses: actions/checkout@v4
       - name: get-npm-version
         id: package-version
         uses: martinbeentjes/[email protected]
         with:
-          path: packages/components
+          path: packages/smart-camera-web
       - name: set destination directory
         id: set_destination
         env:
           TAG: ${{ steps.package-version.outputs.current-version }}
         run: |
-          echo "DEST_DIR_COMPONENTS=js/v$TAG" >> $GITHUB_OUTPUT
+          echo "DEST_DIR_SMART_CAMERA_WEB=js/v$TAG" >> $GITHUB_OUTPUT
       - name: deploy to s3 / cloudfront
         uses: jakejarvis/[email protected]
         with:
@@ -34,9 +34,9 @@ jobs:
           AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-          SOURCE_DIR: ./packages/components
+          SOURCE_DIR: ./packages/smart-camera-web
           AWS_REGION: ${{ secrets.AWS_REGION }}
-          DEST_DIR: ${{ steps.set_destination.outputs.DEST_DIR_COMPONENTS }}
+          DEST_DIR: ${{ steps.set_destination.outputs.DEST_DIR_SMART_CAMERA_WEB }}
   embed:
     needs: [test]
     runs-on: ubuntu-latest

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -6,11 +6,11 @@ on:
   pull_request:
   workflow_dispatch:
 jobs:
-  components:
+  smart-camera-web:
     runs-on: ubuntu-latest
     defaults:
       run:
-        working-directory: ./packages/components
+        working-directory: ./packages/smart-camera-web
     steps:
       - name: checkout code
         uses: actions/checkout@v4

diff --git a/.github/workflows/share-preview-url.yml b/.github/workflows/share-preview-url.yml
@@ -11,11 +11,11 @@ jobs:
     steps:
       - name: checkout code
         uses: actions/checkout@v4
-      - name: get dest dir for web components
-        id: get_dest_dir_components
-        working-directory: ./packages/components
+      - name: get dest dir for web smart-camera-web
+        id: get_dest_dir_smart_camera_web
+        working-directory: ./packages/smart-camera-web
         run: >-
-          echo "DEST_DIR_COMPONENTS=js/preview-$GITHUB_HEAD_REF" >>
+          echo "DEST_DIR_SMART_CAMERA_WEB=js/preview-$GITHUB_HEAD_REF" >>
           "$GITHUB_ENV"
       - name: get dest dir for web embed
         id: get_dest_dir_embed
@@ -30,9 +30,9 @@ jobs:
             This branch has been deployed to s3 / cloudfront.
 
 
-            ✅ Preview URL for Components / Smart Camera Web:
+            ✅ Preview URL for Smart Camera Web:
 
-            https://cdn.smileidentity.com/${{ env.DEST_DIR_COMPONENTS }}/smart-camera-web.js
+            https://cdn.smileidentity.com/${{ env.DEST_DIR_SMART_CAMERA_WEB }}/smart-camera-web.js
 
             ✅ Preview URL for Embed: 
 

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -2,11 +2,11 @@ name: test
 on:
   workflow_call:
 jobs:
-  components:
+  smart-camera-web:
     runs-on: ubuntu-latest
     defaults:
       run:
-        working-directory: ./packages/components
+        working-directory: ./packages/smart-camera-web
     steps:
       - name: checkout code
         uses: actions/checkout@v4
@@ -21,7 +21,7 @@ jobs:
         with:
           install: false
           start: npm start
-          working-directory: ./packages/components
+          working-directory: ./packages/smart-camera-web
           wait-on: 'http://localhost:8000'
   embed:
     runs-on: ubuntu-latest

diff --git a/README.md b/README.md
@@ -3,14 +3,15 @@
 
 ## Overview
 
-### Components
-[Components f.k.a. Smart Camera Web](packages/components) is a package that 
-contains web-components used in the browser with SmileID systems.
+### Smart-Camera-Web
+[Smart Camera Web](packages/smart-camera-web) is a package that
+contains a web-component used to capture images in the browser for use within
+SmileID systems.
 
-It currently publishes `smart-camera-web` which is a Web Component that works
-together with the [Server to Server](https://docs.smileidentity.com/server-to-server) libraries.
+It is WebRTC Powered Web Component that works together with the
+SmileID [Server to Server](https://docs.smileidentity.com/server-to-server) libraries.
 
-For more detailed information, you can refer to the [packages/components documentation](./packages/components/README.md).
+For more detailed information, you can refer to the [packages/smart-camera-web documentation](./packages/smart-camera-web/README.md).
 
 ### Embed
 [Embed f.k.a. Hosted Web Integration](packages/embed) is a package that contains two items:
@@ -46,10 +47,10 @@ Detailed information about this can be found in the [packages/embed documentatio
 Both projects in this mono-repo come equipped with test suites to ensure code
 quality and functionality. Here's how to run them:
 
-1. **Components**:
+1. **Smart-Camera-Web**:
 
    ```sh
-   cd packages/components
+   cd packages/smart-camera-web
    npm test
    ```
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/embed/src/js/components/Combobox.js → packages/components/combobox/src/Combobox.js b/packages/embed/src/js/components/Combobox.js → packages/components/combobox/src/Combobox.js
@@ -106,15 +106,15 @@ class ComboboxTrigger extends HTMLElement {
     this.innerHTML = `${
       this.type === "text"
         ? `
-				<div>
-					<input ${this.value ? `value="${this.value}" ` : ""}${
+        <div>
+          <input ${this.value ? `value="${this.value}" ` : ""}${
             this.disabled ? " disabled " : ""
           }type="text" placeholder="${this.label}" />
-					<button ${this.disabled ? "disabled " : ""}tabindex='-1' type='button'>
-						<span class="visually-hidden">Toggle</span>
-					</button>
-				</div>
-			`
+          <button ${this.disabled ? "disabled " : ""}tabindex='-1' type='button'>
+            <span class="visually-hidden">Toggle</span>
+          </button>
+        </div>
+      `
         : `<button ${this.disabled ? "disabled " : ""}type="button">${
             this.value || this.label
           }</button>`
@@ -335,10 +335,10 @@ class ComboboxListbox extends HTMLElement {
 
   get emptyState() {
     return `
-			<p id='empty-state' style="text-align: center;">
-				${this.emptyLabel || "No items"}
-			</p>
-		`;
+      <p id='empty-state' style="text-align: center;">
+        ${this.emptyLabel || "No items"}
+      </p>
+    `;
   }
 
   connectedCallback() {
@@ -571,9 +571,21 @@ class ComboboxOption extends HTMLElement {
   }
 }
 
-export default {
-  Root: ComboboxRoot,
-  Trigger: ComboboxTrigger,
-  List: ComboboxListbox,
-  Option: ComboboxOption,
+const Root = ComboboxRoot;
+const Trigger = ComboboxTrigger;
+const List = ComboboxListbox;
+const Option = ComboboxOption;
+
+if ("customElements" in window) {
+  window.customElements.define('smileid-combobox', Root);
+  window.customElements.define('smileid-combobox-trigger', Trigger);
+  window.customElements.define('smileid-combobox-listbox', List);
+  window.customElements.define('smileid-combobox-option', Option);
+}
+
+export {
+  Root,
+  Trigger,
+  List,
+  Option,
 };
diff --git a/packages/components/combobox/src/index.js b/packages/components/combobox/src/index.js
@@ -0,0 +1,6 @@
+export {
+  Root,
+  Trigger,
+  List,
+  Option,
+} from './Combobox';