Merge branch 'main' into styled-select

Author: maiieul

.github/actions/setup/action.yml

@@ -6,7 +6,7 @@ inputs:
   node_version:
     description: Node Version
     required: false
-    default: '16'
+    default: '18'
 
 runs:
   using: composite
@@ -25,7 +25,7 @@ runs:
     - name: Setup pnpm
       uses: pnpm/[email protected]
       with:
-        version: 7
+        version: 8
 
     - name: Use Node
       uses: actions/setup-node@v4

.github/actions/test/action.yml

@@ -14,10 +14,6 @@ runs:
   using: composite
 
   steps:
-    # - name: Commitlint
-    # shell: bash
-    # run: npx --no-install commitlint --from=last-release
-
     - name: Lint
       shell: bash
       run: npx nx run-many -t lint --exclude website # --base=last-release  <- add that back after fix
@@ -26,10 +22,6 @@ runs:
       shell: bash
       run: npx nx run-many -t build --parallel=false --exclude website # --base=last-release  <- add that back
 
-    # - name: Build storybook
-    #   shell: bash
-    #   run: npx nx build-storybook headless
-
     - name: Test all except headless
       shell: bash
       run: npx nx run-many -t test # --base=last-release <- add that back
@@ -41,15 +33,6 @@ runs:
       with:
         command: 'pnpm test.headless.ci'
 
-    # - name: Publish to Chromatic
-    #   uses: chromaui/action@v1
-    #   # Chromatic GitHub Action options
-    #   with:
-    #     # 👇 Chromatic projectToken, refer to the manage page to obtain it.
-    #     projectToken: ${{ inputs.chromatic_token }}
-    #     storybookBuildDir: dist/storybook/headless
-    #     zip: true
-
     # - name: Build
     #   shell: bash
     #   run: npx nx affected:build --base=last-release --exclude=website

.github/workflows/release.yml

@@ -11,7 +11,7 @@ jobs:
 
     strategy:
       matrix:
-        node_version: [16, 18, 20, 21]
+        node_version: [18, 20, 21, 22]
 
     steps:
       - uses: actions/checkout@v3

.github/workflows/test.yml

@@ -10,7 +10,7 @@ jobs:
 
     strategy:
       matrix:
-        node_version: [16, 18, 20, 21]
+        node_version: [18, 20, 22]
 
     steps:
       - name: Cancel Previous Runs

.storybook/main.ts

@@ -2,27 +2,33 @@ import { $, component$, useSignal, useStyles$ } from '@builder.io/qwik';
 import { Select } from '@qwik-ui/headless';
 export default component$(() => {
   useStyles$(styles);
-  const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
-  const selected = useSignal<string>('Ryan');
+  const users = [
+    { id: '0', name: 'Tim' },
+    { id: '1', name: 'Ryan' }, // 👈 start with Ryan
+    { id: '2', name: 'Jim' },
+    { id: '3', name: 'Jessie' },
+    { id: '4', name: 'Abby' },
+  ];
+  const selectedId = useSignal<string>('1');
 
   return (
     <>
-      <Select.Root bind:value={selected} class="select">
+      <Select.Root bind:value={selectedId} class="select">
         <Select.Label>Logged in users</Select.Label>
         <Select.Trigger class="select-trigger">
           <Select.DisplayText placeholder="Select an option" />
         </Select.Trigger>
         <Select.Popover class="select-popover">
           <Select.Listbox class="select-listbox">
-            {users.map((user, index) => (
-              <Select.Item value={index.toString()} key={user}>
-                <Select.ItemLabel>{user}</Select.ItemLabel>
+            {users.map((user) => (
+              <Select.Item value={user.id} key={user.id}>
+                <Select.ItemLabel>{user.name}</Select.ItemLabel>
               </Select.Item>
             ))}
           </Select.Listbox>
         </Select.Popover>
       </Select.Root>
-      <button onClick$={$(() => (selected.value = '4'))}>Change to Abby</button>
+      <button onClick$={$(() => (selectedId.value = '4'))}>Change to Abby</button>
     </>
   );
 });

.storybook/package.json

@@ -1,21 +1,16 @@
 import { component$, useStyles$, $ } from '@builder.io/qwik';
 import { LuCheck } from '@qwikest/icons/lucide';
 import { Select } from '@qwik-ui/headless';
-import { useForm, required, InitialValues } from '@modular-forms/qwik';
-import { routeLoader$ } from '@builder.io/qwik-city';
+import { useForm, required } from '@modular-forms/qwik';
 
 type Users = {
   firstName: string;
 };
 
-export const useSelectFormLoader = routeLoader$<InitialValues<Users>>(() => ({
-  firstName: '',
-}));
-
 export default component$(() => {
   const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
   const [, { Form, Field }] = useForm<Users>({
-    loader: useSelectFormLoader(),
+    loader: { value: { firstName: '' } },
   });
 
   useStyles$(styles);

.storybook/tsconfig.json

@@ -4,8 +4,6 @@ title: Qwik UI | Select
 
 import { FeatureList } from '~/components/feature-list/feature-list';
 import { statusByComponent } from '~/_state/component-statuses';
-import { useSelectFormLoader } from './examples/validation.tsx';
-export { useSelectFormLoader } from './examples/validation.tsx';
 
 <StatusBanner status={statusByComponent.headless.Select} />