add e2e test support for extensions + on premise e2e check action

.github/workflows/playwright-onpremise.yml

@@ -0,0 +1,149 @@
+name: Playwright Tests - On Premise
+on:
+  push:
+    branches:
+      - main
+      - develop
+      - feature/support_extension_e2e_tests
+    tags:
+      - '*'
+  workflow_dispatch:
+permissions:
+  contents: read
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 60
+    strategy:
+      fail-fast: false
+      matrix:
+        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8]
+        shardTotal: [8]
+
+    services:
+      mailpit:
+        image: 'axllent/mailpit:latest'
+        ports:
+          - 1025:1025
+          - 8025:8025
+      pgsql_test:
+        image: postgres:15
+        env:
+          PGPASSWORD: 'root'
+          POSTGRES_DB: 'laravel'
+          POSTGRES_USER: 'root'
+          POSTGRES_PASSWORD: 'root'
+        ports:
+          - 5432:5432
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+      # Renders the invoice PDFs.
+      gotenberg:
+        image: gotenberg/gotenberg:8
+        ports:
+          - 3000:3000
+        options: >-
+          --health-cmd "curl --silent --fail http://localhost:3000/health"
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+
+    steps:
+      - name: "Checkout code"
+        uses: actions/checkout@v7
+
+      - name: "Setup node"
+        uses: actions/setup-node@v7
+        with:
+          node-version: '20.x'
+
+      - name: "Setup PHP"
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: '8.3'
+          extensions: dom, curl, libxml, mbstring, zip, pcntl, pdo, pdo_sqlite, bcmath, soap, intl, gd, exif, iconv
+          coverage: none
+
+      - name: "Run composer install"
+        run: composer install -n --prefer-dist
+
+      - name: "Read extension manifest"
+        id: extension-manifest
+        run: |
+          {
+            echo "invoicing_repository=$(jq -r '.Invoicing.repository' extensions/manifest.json)"
+            echo "invoicing_ref=$(jq -r '.Invoicing.ref' extensions/manifest.json)"
+          } >> "$GITHUB_OUTPUT"
+
+      - name: "Checkout invoicing extension"
+        uses: actions/checkout@v7
+        with:
+          repository: ${{ steps.extension-manifest.outputs.invoicing_repository }}
+          ref: ${{ steps.extension-manifest.outputs.invoicing_ref }}
+          path: extensions/Invoicing
+          ssh-key: ${{ secrets.SSH_PRIVATE_KEY_INVOICING_EXTENSION }}
+
+      - name: "Install composer dependencies in invoicing extension"
+        run: cd extensions/Invoicing && composer install --no-dev --no-ansi --no-interaction --prefer-dist --ignore-platform-reqs --classmap-authoritative
+
+      - name: "Install npm dependencies in invoicing extension"
+        run: cd extensions/Invoicing && npm ci
+
+      - name: "Prepare Laravel Application"
+        run: |
+          cp .env.ci .env
+          php artisan key:generate
+          php artisan passport:keys
+
+      # Must run before `migrate` so the extension's migrations are applied, and
+      # before the frontend build so vite collects the extension's assets.
+      - name: "Activate invoicing extension"
+        run: php artisan module:enable Invoicing
+
+      - name: "Migrate and seed"
+        run: php artisan migrate --seed
+
+      - name: "Install dependencies"
+        run: npm ci
+
+      - name: "Build Frontend"
+        run: npm run build
+
+      - name: "Install FrankenPHP"
+        run: |
+          ARCH="$(uname -m)"
+          curl -fsSL "https://github.com/dunglas/frankenphp/releases/latest/download/frankenphp-linux-${ARCH}" -o /usr/local/bin/frankenphp
+          chmod +x /usr/local/bin/frankenphp
+
+      - name: "Run Laravel Octane Server"
+        run: php artisan octane:start --server=frankenphp --host=127.0.0.1 --port=8000 --workers=4 --max-requests=500 > /dev/null 2>&1 &
+        env:
+          OCTANE_SERVER: frankenphp
+
+      - name: "Install Playwright Browsers"
+        run: npx playwright install --with-deps
+
+      - name: "Run Playwright tests"
+        run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+        env:
+          PLAYWRIGHT_BASE_URL: 'http://127.0.0.1:8000'
+          MAILPIT_BASE_URL: 'http://localhost:8025'
+
+      # No artifacts are uploaded on purpose. This repository is public, so
+      # every artifact is downloadable by anyone - and Playwright's reports
+      # carry the source of the specs that produced them: traces embed whole
+      # source files under resources/src@*, and each error-context.md attachment
+      # embeds a ~200 line window of the spec plus a page snapshot. Those specs
+      # live in the private extension repository, so uploading them would
+      # publish private source on any failing or flaky run.
+      #
+      # Failures are diagnosed from the job log, which still shows the error and
+      # a short code frame. To inspect a trace, reproduce the failure locally
+      # with the extension checked out.
+      #
+      # This is a mitigation, not a fix: the code frame in the log is itself a
+      # handful of lines of private source. Only running this workflow from a
+      # private repository removes that exposure.

app/Service/PermissionStore.php

@@ -80,10 +80,6 @@ class PermissionStore
                 'invoices:update',
                 'invoices:download',
                 'invoices:delete',
-                'invoice-recipients:view',
-                'invoice-recipients:create',
-                'invoice-recipients:update',
-                'invoice-recipients:delete',
                 'invoice-settings:view',
                 'invoice-settings:update',
             ],
@@ -151,10 +147,6 @@ class PermissionStore
                 'invoices:update',
                 'invoices:download',
                 'invoices:delete',
-                'invoice-recipients:view',
-                'invoice-recipients:create',
-                'invoice-recipients:update',
-                'invoice-recipients:delete',
                 'invoice-settings:view',
                 'invoice-settings:update',
             ],
@@ -211,10 +203,6 @@ class PermissionStore
                 'invoices:update',
                 'invoices:download',
                 'invoices:delete',
-                'invoice-recipients:view',
-                'invoice-recipients:create',
-                'invoice-recipients:update',
-                'invoice-recipients:delete',
                 'invoice-settings:view',
                 'invoice-settings:update',
             ],

extensions/manifest.json

@@ -1,7 +1,7 @@
 {
     "Billing": {
         "repository": "solidtime-io/extension-billing",
-        "ref": "v0.0.4"
+        "ref": "v0.0.3"
     },
     "Services": {
         "repository": "solidtime-io/extension-services",
@@ -9,6 +9,6 @@
     },
     "Invoicing": {
         "repository": "solidtime-io/extension-invoicing",
-        "ref": "feature/recipients"
+        "ref": "feature/e2e_tests"
     }
 }

package.json

@@ -57,7 +57,7 @@
         "@floating-ui/core": "^1.7.5",
         "@floating-ui/vue": "^1.1.11",
         "@heroicons/vue": "^2.2.0",
-        "@lucide/vue": "^1.28.0",
+        "@lucide/vue": "^1.14.0",
         "@rushstack/eslint-patch": "^1.16.1",
         "@tailwindcss/container-queries": "^0.1.1",
         "@tanstack/vue-form": "^1.32.0",
@@ -67,7 +67,7 @@
         "@tanstack/vue-virtual": "^3.13.24",
         "@vue/eslint-config-prettier": "^10.2.0",
         "@vue/eslint-config-typescript": "^14.7.0",
-        "@vueuse/core": "^14.4.0",
+        "@vueuse/core": "^14.3.0",
         "@vueuse/integrations": "^14.3.0",
         "@zodios/core": "^10.9.6",
         "chroma-js": "^3.2.0",
@@ -79,7 +79,7 @@
         "parse-duration": "^2.1.6",
         "pinia": "^3.0.4",
         "radix-vue": "^1.9.17",
-        "reka-ui": "^2.10.1",
+        "reka-ui": "^2.9.7",
         "tailwind-merge": "^2.6.1",
         "tailwindcss-animate": "^1.0.7",
         "vue-draggable-plus": "^0.6.1",

playwright.config.ts

@@ -10,7 +10,20 @@ import { defineConfig, devices } from '@playwright/test';
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-    testDir: './e2e',
+    testDir: '.',
+    testMatch: ['e2e/**/*.spec.ts', 'extensions/*/tests/e2e/**/*.spec.ts'],
+    testIgnore: [
+        '**/node_modules/**',
+        '**/vendor/**',
+        '.git/**',
+        '.claude/**',
+        'public/**',
+        'storage/**',
+        'test-results/**',
+        'playwright-report/**',
+        'blob-report/**',
+    ],
+    tsconfig: './tsconfig.json',
     /* Run tests in files in parallel */
     fullyParallel: true,
     /* Fail the build on CI if you accidentally left test.only in the source code. */

resources/js/Components/ui/alert-dialog/AlertDialogContent.vue

@@ -25,21 +25,16 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 <template>
     <AlertDialogPortal>
         <AlertDialogOverlay
-            class="fixed inset-0 z-50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0">
+            class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
-            <div class="absolute inset-0 bg-default-background opacity-30" />
+        <AlertDialogContent
-        </AlertDialogOverlay>
+            v-bind="forwarded"
-        <div
+            :class="
-            class="fixed top-0 left-0 z-50 pointer-events-none w-screen h-screen flex items-start px-2 pt-3 md:pt-14 xl:pt-24 justify-center overflow-auto">
+                cn(
-            <AlertDialogContent
+                    'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
-                v-bind="forwarded"
+                    props.class
-                :class="
+                )
-                    cn(
+            ">
-                        'pointer-events-auto bg-default-background grid w-full max-w-lg gap-4 border border-border-tertiary p-6 shadow-lg duration-200 rounded-lg outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+            <slot />
-                        props.class
+        </AlertDialogContent>
-                    )
-                ">
-                <slot />
-            </AlertDialogContent>
-        </div>
     </AlertDialogPortal>
 </template>

resources/js/Layouts/AppLayout.vue

@@ -253,9 +253,7 @@ const page = usePage<{
                                 v-if="isInvoicingActivated() && canViewInvoices()"
                                 title="Invoices"
                                 :icon="DocumentTextIcon"
-                                :current="
+                                :current="route().current('invoices')"
-                                    route().current('invoices') || route().current('invoices.*')
-                                "
                                 href="/invoices"></NavigationSidebarItem>
                         </ul>
                     </nav>

resources/js/packages/api/src/index.ts

@@ -117,8 +117,6 @@ export type DetailedInvoiceResponse = ZodiosResponseByAlias<SolidTimeApi, 'getIn
 export type DetailedInvoice = DetailedInvoiceResponse['data'];
 
 export type InvoiceIndexEntry = ZodiosResponseByAlias<SolidTimeApi, 'getInvoices'>['data'][0];
-export type InvoiceRecipient = ZodiosResponseByAlias<SolidTimeApi, 'getInvoiceRecipients'>['data'][0];
-export type InvoiceRecipientBody = ZodiosBodyByAlias<SolidTimeApi, 'createInvoiceRecipient'>;
 
 export type UpdateInvoiceSettings = ZodiosBodyByAlias<SolidTimeApi, 'updateInvoiceSettings'>;
 

resources/js/packages/api/src/openapi.json.client.ts

@@ -45,54 +45,14 @@ const InvitationResource = z
 const InvitationStoreRequest = z
     .object({ email: z.string().email(), role: z.enum(['admin', 'manager', 'employee']) })
     .passthrough();
-const InvoiceRecipientResource = z
-    .object({
-        id: z.string(),
-        organization_id: z.string(),
-        name: z.string(),
-        vatin: z.union([z.string(), z.null()]),
-        address_line_1: z.union([z.string(), z.null()]),
-        address_line_2: z.union([z.string(), z.null()]),
-        address_line_3: z.union([z.string(), z.null()]),
-        address_post_code: z.union([z.string(), z.null()]),
-        address_city: z.union([z.string(), z.null()]),
-        address_country: z.union([z.string(), z.null()]),
-        phone: z.union([z.string(), z.null()]),
-        email: z.union([z.string(), z.null()]),
-        is_archived: z.boolean(),
-        archived_at: z.union([z.string(), z.null()]),
-        invoices_count: z.number().int(),
-        has_non_draft_invoices: z.boolean(),
-        created_at: z.union([z.string(), z.null()]),
-        updated_at: z.union([z.string(), z.null()]),
-    })
-    .passthrough();
-const InvoiceRecipientCollection = z.array(InvoiceRecipientResource);
-const InvoiceRecipientRequest = z
-    .object({
-        name: z.string(),
-        vatin: z.union([z.string(), z.null()]).optional(),
-        address_line_1: z.union([z.string(), z.null()]).optional(),
-        address_line_2: z.union([z.string(), z.null()]).optional(),
-        address_line_3: z.union([z.string(), z.null()]).optional(),
-        address_post_code: z.union([z.string(), z.null()]).optional(),
-        address_city: z.union([z.string(), z.null()]).optional(),
-        address_country: z.union([z.string(), z.null()]).optional(),
-        phone: z.union([z.string(), z.null()]).optional(),
-        email: z.union([z.string(), z.null()]).optional(),
-        is_archived: z.boolean().optional(),
-    })
-    .passthrough();
 const InvoiceResource = z
     .object({
         id: z.string(),
         organization_id: z.string(),
-        invoice_recipient_id: z.string(),
         reference: z.string(),
         seller_name: z.string(),
-        recipient: z.string(),
+        buyer_name: z.string(),
         status: z.string(),
-        status_label: z.string(),
         date: z.string(),
         due_at: z.string(),
         paid_date: z.string(),
@@ -116,7 +76,16 @@ const InvoiceStoreRequest = z
         seller_address_country: z.union([z.string(), z.null()]).optional(),
         seller_phone: z.union([z.string(), z.null()]).optional(),
         seller_email: z.union([z.string(), z.null()]).optional(),
-        invoice_recipient_id: z.string(),
+        buyer_name: z.string(),
+        buyer_vatin: z.union([z.string(), z.null()]).optional(),
+        buyer_address_line_1: z.union([z.string(), z.null()]).optional(),
+        buyer_address_line_2: z.union([z.string(), z.null()]).optional(),
+        buyer_address_line_3: z.union([z.string(), z.null()]).optional(),
+        buyer_address_post_code: z.union([z.string(), z.null()]).optional(),
+        buyer_address_city: z.union([z.string(), z.null()]).optional(),
+        buyer_address_country: z.union([z.string(), z.null()]).optional(),
+        buyer_phone: z.union([z.string(), z.null()]).optional(),
+        buyer_email: z.union([z.string(), z.null()]).optional(),
         date: z.string(),
         billing_period_start: z.union([z.string(), z.null()]).optional(),
         billing_period_end: z.union([z.string(), z.null()]).optional(),
@@ -161,7 +130,6 @@ const DetailedInvoiceResource = z
     .object({
         id: z.string(),
         organization_id: z.string(),
-        invoice_recipient_id: z.string(),
         reference: z.string(),
         seller_name: z.string(),
         seller_vatin: z.string(),
@@ -173,7 +141,16 @@ const DetailedInvoiceResource = z
         seller_address_country: z.string(),
         seller_phone: z.string(),
         seller_email: z.string(),
-        recipient: InvoiceRecipientResource,
+        buyer_name: z.string(),
+        buyer_vatin: z.string(),
+        buyer_address_line_1: z.string(),
+        buyer_address_line_2: z.string(),
+        buyer_address_line_3: z.string(),
+        buyer_address_post_code: z.string(),
+        buyer_address_city: z.string(),
+        buyer_address_country: z.string(),
+        buyer_phone: z.string(),
+        buyer_email: z.string(),
         paid_date: z.string(),
         due_at: z.string(),
         discount_type: z.string(),
@@ -194,7 +171,7 @@ const DetailedInvoiceResource = z
         entries: z.array(InvoiceEntryResource),
     })
     .passthrough();
-const InvoiceStatus = z.enum(['draft', 'sent', 'paid', 'cancelled']);
+const InvoiceStatus = z.enum(['draft', 'sent', 'cancelled']);
 const InvoiceUpdateRequest = z
     .object({
         status: InvoiceStatus,
@@ -210,7 +187,16 @@ const InvoiceUpdateRequest = z
         seller_address_country: z.union([z.string(), z.null()]),
         seller_phone: z.union([z.string(), z.null()]),
         seller_email: z.union([z.string(), z.null()]),
-        invoice_recipient_id: z.string(),
+        buyer_name: z.string(),
+        buyer_vatin: z.union([z.string(), z.null()]),
+        buyer_address_line_1: z.union([z.string(), z.null()]),
+        buyer_address_line_2: z.union([z.string(), z.null()]),
+        buyer_address_line_3: z.union([z.string(), z.null()]),
+        buyer_address_post_code: z.union([z.string(), z.null()]),
+        buyer_address_city: z.union([z.string(), z.null()]),
+        buyer_address_country: z.union([z.string(), z.null()]),
+        buyer_phone: z.union([z.string(), z.null()]),
+        buyer_email: z.union([z.string(), z.null()]),
         date: z.string(),
         billing_period_start: z.union([z.string(), z.null()]),
         billing_period_end: z.union([z.string(), z.null()]),
@@ -1899,125 +1885,6 @@ const endpoints = makeApi([
             },
         ],
     },
-    {
-        method: 'get',
-        path: '/v1/organizations/:organization/invoice-recipients',
-        alias: 'getInvoiceRecipients',
-        requestFormat: 'json',
-        parameters: [
-            {
-                name: 'organization',
-                type: 'Path',
-                schema: z.string(),
-            },
-        ],
-        response: z.object({ data: InvoiceRecipientCollection }).passthrough(),
-    },
-    {
-        method: 'post',
-        path: '/v1/organizations/:organization/invoice-recipients',
-        alias: 'createInvoiceRecipient',
-        requestFormat: 'json',
-        parameters: [
-            {
-                name: 'body',
-                type: 'Body',
-                schema: InvoiceRecipientRequest,
-            },
-            {
-                name: 'organization',
-                type: 'Path',
-                schema: z.string(),
-            },
-        ],
-        response: z.object({ data: InvoiceRecipientResource }).passthrough(),
-    },
-    {
-        method: 'get',
-        path: '/v1/organizations/:organization/invoice-recipients/:invoiceRecipient',
-        alias: 'getInvoiceRecipient',
-        requestFormat: 'json',
-        parameters: [
-            {
-                name: 'organization',
-                type: 'Path',
-                schema: z.string(),
-            },
-            {
-                name: 'invoiceRecipient',
-                type: 'Path',
-                schema: z.string(),
-            },
-        ],
-        response: z.object({ data: InvoiceRecipientResource }).passthrough(),
-    },
-    {
-        method: 'put',
-        path: '/v1/organizations/:organization/invoice-recipients/:invoiceRecipient',
-        alias: 'updateInvoiceRecipient',
-        requestFormat: 'json',
-        parameters: [
-            {
-                name: 'body',
-                type: 'Body',
-                schema: InvoiceRecipientRequest,
-            },
-            {
-                name: 'organization',
-                type: 'Path',
-                schema: z.string(),
-            },
-            {
-                name: 'invoiceRecipient',
-                type: 'Path',
-                schema: z.string(),
-            },
-        ],
-        response: z.object({ data: InvoiceRecipientResource }).passthrough(),
-    },
-    {
-        method: 'post',
-        path: '/v1/organizations/:organization/invoice-recipients/:invoiceRecipient/duplicate',
-        alias: 'duplicateInvoiceRecipient',
-        requestFormat: 'json',
-        parameters: [
-            {
-                name: 'body',
-                type: 'Body',
-                schema: InvoiceRecipientRequest,
-            },
-            {
-                name: 'organization',
-                type: 'Path',
-                schema: z.string(),
-            },
-            {
-                name: 'invoiceRecipient',
-                type: 'Path',
-                schema: z.string(),
-            },
-        ],
-        response: z.object({ data: InvoiceRecipientResource }).passthrough(),
-    },
-    {
-        method: 'delete',
-        path: '/v1/organizations/:organization/invoice-recipients/:invoiceRecipient',
-        alias: 'deleteInvoiceRecipient',
-        requestFormat: 'json',
-        parameters: [
-            {
-                name: 'organization',
-                type: 'Path',
-                schema: z.string(),
-            },
-            {
-                name: 'invoiceRecipient',
-                type: 'Path',
-                schema: z.string(),
-            },
-        ],
-        response: z.void(),
-    },
     {
         method: 'get',
         path: '/v1/organizations/:organization/invoices',
@@ -2034,11 +1901,6 @@ const endpoints = makeApi([
                 type: 'Query',
                 schema: z.number().int().gte(1).lte(2147483647).optional(),
             },
-            {
-                name: 'status',
-                type: 'Query',
-                schema: InvoiceStatus.optional(),
-            },
         ],
         response: z.object({ data: InvoiceCollection }).passthrough(),
         errors: [

resources/js/packages/ui/src/combobox/Combobox.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui';
-import type { HTMLAttributes } from 'vue';
-import { reactiveOmit } from '@vueuse/core';
-import { ComboboxRoot, useForwardPropsEmits } from 'reka-ui';
-import { cn } from '../utils/cn';
-
-const props = defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>();
-const emits = defineEmits<ComboboxRootEmits>();
-
-const delegatedProps = reactiveOmit(props, 'class');
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
-</script>
-
-<template>
-    <!-- Keep the trigger inside this root. Reka treats anything within the root
-         element as "not outside", so it suppresses its own dismissal for trigger
-         clicks and ComboboxInput's blur-close ignores them. Putting the trigger
-         in a separate Popover instead gives two competing open states, and the
-         popover then closes on mousedown and reopens on the following click. -->
-    <ComboboxRoot v-slot="slotProps" v-bind="forwarded" :class="cn('min-w-0', props.class)">
-        <slot v-bind="slotProps" />
-    </ComboboxRoot>
-</template>

resources/js/packages/ui/src/combobox/ComboboxAnchor.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import type { ComboboxAnchorProps } from 'reka-ui';
-import type { HTMLAttributes } from 'vue';
-import { reactiveOmit } from '@vueuse/core';
-import { ComboboxAnchor, useForwardProps } from 'reka-ui';
-import { cn } from '../utils/cn';
-
-const props = defineProps<ComboboxAnchorProps & { class?: HTMLAttributes['class'] }>();
-
-const delegatedProps = reactiveOmit(props, 'class');
-
-const forwarded = useForwardProps(delegatedProps);
-</script>
-
-<template>
-    <ComboboxAnchor v-bind="forwarded" :class="cn('w-full', props.class)">
-        <slot />
-    </ComboboxAnchor>
-</template>

resources/js/packages/ui/src/combobox/ComboboxInput.vue

@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import type { ComboboxInputEmits, ComboboxInputProps } from 'reka-ui';
-import type { HTMLAttributes } from 'vue';
-import { reactiveOmit } from '@vueuse/core';
-import { Search } from '@lucide/vue';
-import { ComboboxInput, useForwardPropsEmits } from 'reka-ui';
-import { cn } from '../utils/cn';
-
-defineOptions({
-    inheritAttrs: false,
-});
-
-const props = defineProps<ComboboxInputProps & { class?: HTMLAttributes['class'] }>();
-const emits = defineEmits<ComboboxInputEmits>();
-
-const delegatedProps = reactiveOmit(props, 'class');
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
-</script>
-
-<template>
-    <div class="relative items-center border-b border-card-background-separator">
-        <ComboboxInput
-            v-bind="{ ...$attrs, ...forwarded }"
-            :class="
-                cn(
-                    'h-10 w-full border-0 rounded-none bg-transparent pl-9 pr-3 text-sm text-text-primary placeholder:text-text-tertiary focus:outline-none focus:ring-0',
-                    props.class
-                )
-            " />
-        <span class="absolute start-0 inset-y-0 flex items-center justify-center px-3">
-            <Search class="size-4 text-text-tertiary" />
-        </span>
-    </div>
-</template>

resources/js/packages/ui/src/combobox/ComboboxItem.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui';
-import type { HTMLAttributes } from 'vue';
-import { reactiveOmit } from '@vueuse/core';
-import { ComboboxItem, useForwardPropsEmits } from 'reka-ui';
-import { cn } from '../utils/cn';
-
-const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>();
-const emits = defineEmits<ComboboxItemEmits>();
-
-const delegatedProps = reactiveOmit(props, 'class');
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
-</script>
-
-<template>
-    <ComboboxItem
-        v-bind="forwarded"
-        :class="
-            cn(
-                'flex w-full cursor-default items-center rounded-md px-2 py-1.5 text-sm text-text-primary data-[highlighted]:bg-card-background-active',
-                props.class
-            )
-        ">
-        <slot />
-    </ComboboxItem>
-</template>

resources/js/packages/ui/src/combobox/ComboboxList.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui';
-import type { HTMLAttributes } from 'vue';
-import { reactiveOmit } from '@vueuse/core';
-import { ComboboxContent, ComboboxPortal, useForwardPropsEmits } from 'reka-ui';
-import { cn } from '../utils/cn';
-
-defineOptions({
-    inheritAttrs: false,
-});
-
-const props = withDefaults(
-    defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(),
-    {
-        position: 'popper',
-        align: 'start',
-        sideOffset: 4,
-        class: undefined,
-    }
-);
-const emits = defineEmits<ComboboxContentEmits>();
-
-const delegatedProps = reactiveOmit(props, 'class');
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
-</script>
-
-<template>
-    <ComboboxPortal>
-        <ComboboxContent
-            v-bind="{ ...$attrs, ...forwarded }"
-            :class="
-                cn(
-                    'z-50 w-[--reka-popper-anchor-width] min-w-60 overflow-hidden rounded-lg border border-popover-border bg-popover text-popover-foreground shadow-dropdown outline-none origin-[var(--reka-combobox-content-transform-origin)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-                    props.class
-                )
-            ">
-            <slot />
-        </ComboboxContent>
-    </ComboboxPortal>
-</template>

resources/js/packages/ui/src/combobox/ComboboxSeparator.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import type { ComboboxSeparatorProps } from 'reka-ui';
-import type { HTMLAttributes } from 'vue';
-import { reactiveOmit } from '@vueuse/core';
-import { ComboboxSeparator, useForwardProps } from 'reka-ui';
-import { cn } from '../utils/cn';
-
-const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>();
-
-const delegatedProps = reactiveOmit(props, 'class');
-
-const forwarded = useForwardProps(delegatedProps);
-</script>
-
-<template>
-    <ComboboxSeparator
-        v-bind="forwarded"
-        :class="cn('my-1 h-px bg-card-background-separator', props.class)" />
-</template>

resources/js/packages/ui/src/combobox/ComboboxTrigger.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import type { ComboboxTriggerProps } from 'reka-ui';
-import type { HTMLAttributes } from 'vue';
-import { reactiveOmit } from '@vueuse/core';
-import { ComboboxTrigger, useForwardProps } from 'reka-ui';
-import { cn } from '../utils/cn';
-
-const props = defineProps<ComboboxTriggerProps & { class?: HTMLAttributes['class'] }>();
-
-const delegatedProps = reactiveOmit(props, 'class');
-
-const forwarded = useForwardProps(delegatedProps);
-</script>
-
-<template>
-    <!-- Reka hardcodes tabindex="-1" here because it expects a ComboboxInput
-         next to the trigger in the anchor to be the focusable control. Our input
-         lives inside ComboboxList, so this trigger is the control and has to be
-         tabbable. tabindex is a fallthrough attr, which Vue applies after Reka's
-         own props and therefore wins.
-
-         Reka also hardcodes aria-label="Show popup", which would otherwise be
-         the accessible name. Pass :aria-label on the child element (it wins
-         again, because Slot merges child props over attrs) to name the trigger
-         after its current value. -->
-    <ComboboxTrigger v-bind="forwarded" :class="cn(props.class)" tabindex="0">
-        <slot />
-    </ComboboxTrigger>
-</template>

resources/js/packages/ui/src/combobox/ComboboxViewport.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import type { ComboboxViewportProps } from 'reka-ui';
-import type { HTMLAttributes } from 'vue';
-import { reactiveOmit } from '@vueuse/core';
-import { ComboboxViewport, useForwardProps } from 'reka-ui';
-import { cn } from '../utils/cn';
-
-const props = defineProps<ComboboxViewportProps & { class?: HTMLAttributes['class'] }>();
-
-const delegatedProps = reactiveOmit(props, 'class');
-
-const forwarded = useForwardProps(delegatedProps);
-</script>
-
-<template>
-    <ComboboxViewport
-        v-bind="forwarded"
-        :class="cn('ui-combobox-viewport max-h-60 overflow-y-auto p-2', props.class)">
-        <slot />
-    </ComboboxViewport>
-</template>
-
-<style>
-/* Reka's ComboboxViewport injects a global style that hides scrollbars; the
-   attribute+class selector below is more specific and restores them. */
-[data-reka-combobox-viewport].ui-combobox-viewport {
-    scrollbar-width: thin;
-    -ms-overflow-style: auto;
-}
-[data-reka-combobox-viewport].ui-combobox-viewport::-webkit-scrollbar {
-    display: block;
-    width: 8px;
-}
-[data-reka-combobox-viewport].ui-combobox-viewport::-webkit-scrollbar-thumb {
-    background-color: rgb(127 127 127 / 0.4);
-    border-radius: 4px;
-}
-</style>

resources/js/packages/ui/src/combobox/index.ts

@@ -1,9 +0,0 @@
-export { default as Combobox } from './Combobox.vue';
-export { default as ComboboxAnchor } from './ComboboxAnchor.vue';
-export { default as ComboboxInput } from './ComboboxInput.vue';
-export { default as ComboboxItem } from './ComboboxItem.vue';
-export { default as ComboboxList } from './ComboboxList.vue';
-export { default as ComboboxSeparator } from './ComboboxSeparator.vue';
-export { default as ComboboxTrigger } from './ComboboxTrigger.vue';
-export { default as ComboboxViewport } from './ComboboxViewport.vue';
-export { ComboboxVirtualizer } from 'reka-ui';

resources/js/packages/ui/src/index.ts

@@ -57,16 +57,6 @@ import {
     CalendarNextButton,
     CalendarPrevButton,
 } from './calendar/index';
-import {
-    Combobox,
-    ComboboxAnchor,
-    ComboboxInput,
-    ComboboxItem,
-    ComboboxList,
-    ComboboxSeparator,
-    ComboboxTrigger,
-    ComboboxViewport,
-} from './combobox/index';
 import { CommandPalette } from './CommandPalette/index';
 import {
     ContextMenu,
@@ -186,14 +176,6 @@ export {
     CardTitle,
     Checkbox,
     color,
-    Combobox,
-    ComboboxAnchor,
-    ComboboxInput,
-    ComboboxItem,
-    ComboboxList,
-    ComboboxSeparator,
-    ComboboxTrigger,
-    ComboboxViewport,
     CommandPalette,
     ContextMenu,
     ContextMenuCheckboxItem,

tsconfig.json

@@ -6,7 +6,9 @@
   "compilerOptions": {
     "paths": {
       "@/*": ["./resources/js/*"],
-      "@solidtime/ui": ["./resources/js/packages/ui/src/index.ts"]
+      "@solidtime/ui": ["./resources/js/packages/ui/src/index.ts"],
+      "@e2e/*": ["./e2e/*"],
+      "@e2e-support/*": ["./playwright/*"]
     }
   },
   "skipLibCheck": true,