feat(listbox toggle, floating ui anchor additiongs, listbox wrapper): part of the autocomplete added

Author: thejackshelton

packages/kit-headless/src/components/Autocomplete/autocomplete.spec.tsx

@@ -1,7 +1,8 @@
 import { component$ } from '@builder.io/qwik';
 import {
-  Autocomplete,
+  AutocompleteRoot,
   AutocompleteLabel,
+  AutocompleteTrigger,
   AutocompleteInput,
   AutocompleteButton,
   AutocompleteListbox,
@@ -12,8 +13,8 @@ const RegularAutocomplete = component$(() => {
   return (
     <>
       <AutocompleteLabel>Label</AutocompleteLabel>
-      <Autocomplete>
-        <div>
+      <AutocompleteRoot>
+        <AutocompleteTrigger>
           <AutocompleteInput />
           <AutocompleteButton class="test">
             <svg
@@ -29,13 +30,13 @@ const RegularAutocomplete = component$(() => {
               <polyline points="6 9 12 15 18 9"></polyline>
             </svg>
           </AutocompleteButton>
-        </div>
+        </AutocompleteTrigger>
         <AutocompleteListbox>
           <AutocompleteOption>Option 1</AutocompleteOption>
           <AutocompleteOption>Option 2</AutocompleteOption>
           <AutocompleteOption>Option 3</AutocompleteOption>
         </AutocompleteListbox>
-      </Autocomplete>
+      </AutocompleteRoot>
     </>
   );
 });

packages/kit-headless/src/components/Autocomplete/autocomplete.stories.tsx

@@ -1,54 +1,66 @@
 import { Meta, StoryObj } from 'storybook-framework-qwik';
 import { userEvent, within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
+import { Test } from './autocomplete';
+
+/*
+
+    Didn't finish setting up storybook in time.
+    Want to test QwikIntrinsicElements & HTMLAttributes
+
+*/
 
 import {
-  Autocomplete,
+  AutocompleteRoot,
   AutocompleteLabel,
+  AutocompleteTrigger,
   AutocompleteInput,
   AutocompleteButton,
   AutocompleteListbox,
   AutocompleteOption,
+  type AutocompleteRootProps,
 } from './autocomplete';
 
-const meta: Meta<AutocompleteProps> = {
-  component: Autocomplete,
+const meta: Meta<AutocompleteRootProps> = {
+  args: {},
+  component: AutocompleteRoot,
 };
 
-type Story = StoryObj<{}>;
+type Story = StoryObj<AutocompleteRootProps>;
+
+const RegularAutocomplete = () => (
+  <>
+    <AutocompleteLabel>Label</AutocompleteLabel>
+    <AutocompleteRoot>
+      <AutocompleteTrigger>
+        <AutocompleteInput />
+        <AutocompleteButton class="test" onClick$={() => console.log('hi')}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            style="width: 20px; height: 20px;"
+          >
+            <polyline points="6 9 12 15 18 9"></polyline>
+          </svg>
+        </AutocompleteButton>
+      </AutocompleteTrigger>
+      <AutocompleteListbox>
+        <AutocompleteOption>Option 1</AutocompleteOption>
+        <AutocompleteOption>Option 2</AutocompleteOption>
+        <AutocompleteOption>Option 3</AutocompleteOption>
+      </AutocompleteListbox>
+    </AutocompleteRoot>
+  </>
+);
 
 export const Primary: Story = {
-  args: {},
-  render: (args) => (
-    <>
-      <AutocompleteLabel>Label</AutocompleteLabel>
-      <Autocomplete>
-        <div>
-          <AutocompleteInput />
-          <AutocompleteButton class="test">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              style="width: 20px; height: 20px;"
-            >
-              <polyline points="6 9 12 15 18 9"></polyline>
-            </svg>
-          </AutocompleteButton>
-        </div>
-        <AutocompleteListbox>
-          <AutocompleteOption>Option 1</AutocompleteOption>
-          <AutocompleteOption>Option 2</AutocompleteOption>
-          <AutocompleteOption>Option 3</AutocompleteOption>
-        </AutocompleteListbox>
-      </Autocomplete>
-    </>
-  ),
-  play: ({ canvasElement, args }) => {
+  render: () => RegularAutocomplete(),
+  play: ({ canvasElement }) => {
     const canvas = within(canvasElement);
   },
 };