refactor: rename components package to smart camera web

.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

.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]

.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

.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

.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: 
 

.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

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
    ```
 

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,
 };

packages/components/combobox/src/index.js

@@ -0,0 +1,6 @@
+export {
+  Root,
+  Trigger,
+  List,
+  Option,
+} from './Combobox';