Merge branch 'main' into feature/EMP-4164-migrate-history-queries-x-m…

…odule-to-composition-api
empathyco · Jun 11, 2024 · 55c3d60 · 55c3d60
2 parents f5c1834 + 18dc522
commit 55c3d60
Show file tree

Hide file tree

Showing 34 changed files with 1,162 additions and 604 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -8,11 +8,19 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
+      # Use GitHub App token as a workaround to allow bypassing branch-protection rules
+      # https://github.com/orgs/community/discussions/13836#discussioncomment-8535364
+      - uses: actions/create-github-app-token@v1
+        id: app-token
+        with:
+          app-id: ${{ vars.GH_TOKENS_APP_ID }}
+          private-key: ${{ secrets.GH_TOKENS_APP_PRIVATE_KEY }}
+
       - name: checkout repository
         uses: actions/checkout@v4
         with:
+          token: ${{ steps.app-token.outputs.token }}
           fetch-depth: 0
-          persist-credentials: false
 
       - name: Install
         uses: ./.github/actions/install
@@ -34,4 +42,4 @@ jobs:
         uses: ./.github/actions/release-alpha
         with:
           npm_token: ${{ secrets.NPM_TOKEN_GRANULAR_ACCESS }}
-          github_token: ${{ secrets.SUPPORT_TOKEN }}
+          github_token: ${{ steps.app-token.outputs.token }}
diff --git a/.github/workflows/edocs-dynamic-sync.yml b/.github/workflows/edocs-dynamic-sync.yml
@@ -4,9 +4,18 @@ jobs:
   connect-with-edocs:
     runs-on: ubuntu-latest
     steps:
+      # Use GitHub App token as a workaround to allow bypassing branch-protection rules
+      # https://github.com/orgs/community/discussions/13836#discussioncomment-8535364
+      - uses: actions/create-github-app-token@v1
+        id: app-token
+        with:
+          app-id: ${{ vars.GH_TOKENS_APP_ID }}
+          private-key: ${{ secrets.GH_TOKENS_APP_PRIVATE_KEY }}
+
       - name: Checkout X mono-repo
         uses: actions/checkout@v4
         with:
+          token: ${{ steps.app-token.outputs.token }}
           fetch-depth: 0
       - name: Get X Components Version
         id: package-version
@@ -23,5 +32,5 @@ jobs:
           --url https://api.github.com/repos/empathyco/docs-framework/actions/workflows/93444504/dispatches \
           --data '{"ref": "main",  "inputs": {"branchName": "${{ env.BRANCH_NAME }}", "version": "${{ steps.package-version.outputs.current-version }}"}}'
         env:
-          GITHUB_TOKEN: ${{ secrets.SUPPORT_TOKEN }}
+          GITHUB_TOKEN: ${{ steps.app-token.outputs.token }}
 
diff --git a/.github/workflows/publish-release.yml b/.github/workflows/publish-release.yml
@@ -9,10 +9,18 @@ jobs:
       options: --user 1001
 
     steps:
+      # Use GitHub App token as a workaround to allow bypassing branch-protection rules
+      # https://github.com/orgs/community/discussions/13836#discussioncomment-8535364
+      - uses: actions/create-github-app-token@v1
+        id: app-token
+        with:
+          app-id: ${{ vars.GH_TOKENS_APP_ID }}
+          private-key: ${{ secrets.GH_TOKENS_APP_PRIVATE_KEY }}
+
       - uses: actions/checkout@v4
         with:
+          token: ${{ steps.app-token.outputs.token }}
           fetch-depth: 0
-          persist-credentials: false
 
       # Install pnpm because it is not included in our container image
       - name: install pnpm
@@ -51,6 +59,6 @@ jobs:
       - name: push tags
         uses: ad-m/github-push-action@master
         with:
-          github_token: ${{ secrets.SUPPORT_TOKEN }}
+          github_token: ${{ steps.app-token.outputs.token }}
           branch: ${{ github.ref }}
           tags: true
diff --git a/.github/workflows/release-alpha.yml b/.github/workflows/release-alpha.yml
@@ -9,11 +9,19 @@ jobs:
       options: --user 1001
 
     steps:
+      # Use GitHub App token as a workaround to allow bypassing branch-protection rules
+      # https://github.com/orgs/community/discussions/13836#discussioncomment-8535364
+      - uses: actions/create-github-app-token@v1
+        id: app-token
+        with:
+          app-id: ${{ vars.GH_TOKENS_APP_ID }}
+          private-key: ${{ secrets.GH_TOKENS_APP_PRIVATE_KEY }}
+
       - name: checkout repository
         uses: actions/checkout@v4
         with:
+          token: ${{ steps.app-token.outputs.token }}
           fetch-depth: 0
-          persist-credentials: false
 
       # Install pnpm because it is not included in our container image
       - name: install pnpm
@@ -28,4 +36,4 @@ jobs:
         uses: ./.github/actions/release-alpha
         with:
           npm_token: ${{ secrets.NPM_TOKEN_GRANULAR_ACCESS }}
-          github_token: ${{ secrets.SUPPORT_TOKEN }}
+          github_token: ${{ steps.app-token.outputs.token }}
diff --git a/packages/_vue3-migration-test/CHANGELOG.md b/packages/_vue3-migration-test/CHANGELOG.md
@@ -3,6 +3,52 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.0-alpha.24](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.24) (2024-06-05)
+
+
+### Features
+
+* migrate PartialQueryButton and PartialResultsList (#1501) ([5e87123](https://github.com/empathyco/x/commit/5e87123d4a6c1edeb05f83c31ee8f096b5558e0f))
+
+
+
+## [1.0.0-alpha.23](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.23) (2024-06-04)
+
+
+### Features
+
+* add BaseEventsModal to the playground ([3e437c5](https://github.com/empathyco/x/commit/3e437c56d4e3f314b373b486e8926c4f4b028fc6))
+
+
+
+## [1.0.0-alpha.22](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.22) (2024-06-04)
+
+
+### Features
+
+* **base-id-modal:** migrate to composition API (#1500) ([6274c67](https://github.com/empathyco/x/commit/6274c676946536c9c1c4e54205ebda18c79b8f55))
+
+
+
+## [1.0.0-alpha.21](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.21) (2024-05-31)
+
+
+### Features
+
+* **keyboard-navigation:** migrate keyboard-navigation component to composition API (#1493) ([4cf31c9](https://github.com/empathyco/x/commit/4cf31c9df4b751514deaaef4c9abfe4ee5ddfc40))
+
+
+
+## [1.0.0-alpha.20](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.20) (2024-05-31)
+
+
+### Features
+
+* **panels:** migrate `base-panels` components to composition api (#1491) ([077ad4d](https://github.com/empathyco/x/commit/077ad4d1bcc1dcf0ae2e16a02f1ac073481a1892))
+* **result-images:** migrate result images components to composition API (#1496) ([624fb45](https://github.com/empathyco/x/commit/624fb459e71b3c0905e53ba70c1a3a15f581a0fc))
+
+
+
 ## [1.0.0-alpha.19](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.19) (2024-05-30)
 
 

diff --git a/packages/_vue3-migration-test/package.json b/packages/_vue3-migration-test/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue3-migration-test",
   "private": "true",
-  "version": "1.0.0-alpha.19",
+  "version": "1.0.0-alpha.24",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",

diff --git a/packages/_vue3-migration-test/src/components/index.ts b/packages/_vue3-migration-test/src/components/index.ts
@@ -9,3 +9,8 @@ export { default as TestSlidingPanel } from './test-sliding-panel.vue';
 export { default as TestUseLayouts } from './test-use-layouts.vue';
 export { default as TestBaseSuggestions } from './suggestions/test-base-suggestions.vue';
 export { default as TestHighlight } from './test-highlight.vue';
+export { default as TestBaseResultImages } from './result/test-base-result-images.vue';
+export { default as TestBasePanel } from './panels/test-base-panel.vue';
+export { default as TestBaseKeyboardNavigation } from './test-base-keyboard-navigation.vue';
+export { default as TestBaseEventsModal } from './modals/test-base-events-modal.vue';
+export { default as TestBaseIdModal } from './modals/test-base-id-modal.vue';
diff --git a/packages/_vue3-migration-test/src/components/modals/test-base-events-modal.vue b/packages/_vue3-migration-test/src/components/modals/test-base-events-modal.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="base-modal">
+    <button @click="openModal">Open modal</button>
+    <BaseEventsModal
+      :animation="Fade"
+      :focusOnOpen="true"
+      v-bind="$attrs"
+      contentClass="content"
+      overlayClass="overlay"
+    >
+      <h1>Hello</h1>
+      <p>The modal is working with events!!</p>
+      <button @click="closeModal">Close modal</button>
+    </BaseEventsModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import BaseEventsModal from '../../../../x-components/src/components/modals/base-events-modal.vue';
+  import Fade from '../../../../x-components/src/components/animations/fade.vue';
+  import { use$x } from '../../../../x-components/src/composables/use-$x';
+  const _$x = use$x();
+
+  const openModal = () => _$x.emit('UserClickedOpenEventsModal');
+
+  const closeModal = () => _$x.emit('UserClickedCloseEventsModal');
+</script>
+
+<style>
+  .base-modal {
+    .content {
+      background: white;
+      margin: auto;
+      width: 50%;
+      border: 3px solid green;
+      padding: 10px;
+    }
+
+    .overlay {
+      background-color: #00ff80;
+    }
+  }
+</style>
diff --git a/packages/_vue3-migration-test/src/components/modals/test-base-id-modal.vue b/packages/_vue3-migration-test/src/components/modals/test-base-id-modal.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="base-id-modal">
+    <BaseIdModalOpen modalId="myModal">Open</BaseIdModalOpen>
+    <BaseIdModal :animation="Fade" modalId="myModal" contentClass="content" overlayClass="overlay">
+      <h1>Hello</h1>
+      <p>The base id modal is working</p>
+      <BaseIdModalClose modalId="myModal">Close</BaseIdModalClose>
+    </BaseIdModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import BaseIdModal from '../../../../x-components/src/components/modals/base-id-modal.vue';
+  import BaseIdModalOpen from '../../../../x-components/src/components/modals/base-id-modal-open.vue';
+  import BaseIdModalClose from '../../../../x-components/src/components/modals/base-id-modal-close.vue';
+  import Fade from '../../../../x-components/src/components/animations/fade.vue';
+</script>
+
+<style>
+  .base-id-modal {
+    .content {
+      background: white;
+      margin: auto;
+      width: 50%;
+      border: 3px solid green;
+      padding: 10px;
+    }
+
+    .overlay {
+      background-color: red;
+    }
+  }
+</style>
diff --git a/packages/_vue3-migration-test/src/components/panels/test-base-panel.vue b/packages/_vue3-migration-test/src/components/panels/test-base-panel.vue
@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <h2>Base header toggle panel</h2>
+    <BaseHeaderTogglePanel :start-collapsed="false">
+      <template #header-content="{ open }">
+        <p>Header, open: {{ open ? 'close' : 'open' }}</p>
+      </template>
+      <template>
+        <p>Default content</p>
+      </template>
+    </BaseHeaderTogglePanel>
+
+    <h2>Base id toggle panel, Base id toggle panel button and Base Toggle panel</h2>
+    <BaseIdTogglePanelButton panelId="myToggle">Toggle Aside</BaseIdTogglePanelButton>
+    <BaseIdTogglePanel :startOpen="true" panelId="myToggle">
+      <div>My toggle</div>
+    </BaseIdTogglePanel>
+
+    <h2>Base tabs panel component</h2>
+    <BaseTabsPanel initial-tab="fall">
+      <template #summer>
+        <div>Summer Top Sales</div>
+      </template>
+
+      <template #fall>
+        <div>Fall Top Sales</div>
+      </template>
+
+      <template #outlet>
+        <div>Outlet Top Sales</div>
+      </template>
+    </BaseTabsPanel>
+  </div>
+</template>
+
+<script setup>
+  import BaseHeaderTogglePanel from '../../../../x-components/src/components/panels/base-header-toggle-panel.vue';
+  import BaseIdTogglePanelButton from '../../../../x-components/src/components/panels/base-id-toggle-panel-button.vue';
+  import BaseIdTogglePanel from '../../../../x-components/src/components/panels/base-id-toggle-panel.vue';
+  import BaseTabsPanel from '../../../../x-components/src/components/panels/base-tabs-panel.vue';
+</script>
+
+<style scoped></style>
diff --git a/packages/_vue3-migration-test/src/components/result/test-base-result-images.vue b/packages/_vue3-migration-test/src/components/result/test-base-result-images.vue
@@ -0,0 +1,21 @@
+<template>
+  <h1>BasePlaceholderImage</h1>
+  <BasePlaceholderImage class="staticClass" :class="{ class: true }" />
+  <h1>BaseFallbackImage</h1>
+  <BaseFallbackImage class="staticClass" :class="{ class: true }" />
+</template>
+
+<script setup lang="ts">
+  import BasePlaceholderImage from '../../../../x-components/src/components/result/base-result-placeholder-image.vue';
+  import BaseFallbackImage from '../../../../x-components/src/components/result/base-result-fallback-image.vue';
+</script>
+
+<style scoped>
+  .staticClass {
+    height: 300px;
+    width: 300px;
+  }
+  .class {
+    border: 1px solid green;
+  }
+</style>
diff --git a/packages/_vue3-migration-test/src/components/test-base-keyboard-navigation.vue b/packages/_vue3-migration-test/src/components/test-base-keyboard-navigation.vue
@@ -0,0 +1,27 @@
+<template>
+  <SearchInput />
+  <BaseKeyboardNavigation>
+    <ul>
+      <li>
+        <button>First</button>
+      </li>
+      <li>
+        <button>Second</button>
+      </li>
+      <li>
+        <button>Third</button>
+      </li>
+    </ul>
+  </BaseKeyboardNavigation>
+</template>
+
+<script setup lang="ts">
+  import BaseKeyboardNavigation from '../../../x-components/src/components/base-keyboard-navigation.vue';
+  import SearchInput from '../../../x-components/src/x-modules/search-box/components/search-input.vue';
+</script>
+
+<style>
+  button:focus-visible {
+    border: 3px solid red;
+  }
+</style>