feat(initial api additions & scaffolding): initial API, Setting up types & props

Author: thejackshelton

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

@@ -0,0 +1,49 @@
+import { component$ } from '@builder.io/qwik';
+import {
+  Autocomplete,
+  AutocompleteLabel,
+  AutocompleteInput,
+  AutocompleteButton,
+  AutocompleteListbox,
+  AutocompleteOption,
+} from './autocomplete';
+
+const RegularAutocomplete = component$(() => {
+  return (
+    <>
+      <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>
+    </>
+  );
+});
+
+describe('Autocomplete', () => {
+  it('INIT', () => {
+    cy.mount(<RegularAutocomplete />);
+
+    cy.checkA11yForComponent();
+  });
+});

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

@@ -0,0 +1,56 @@
+import { Meta, StoryObj } from 'storybook-framework-qwik';
+import { userEvent, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
+import {
+  Autocomplete,
+  AutocompleteLabel,
+  AutocompleteInput,
+  AutocompleteButton,
+  AutocompleteListbox,
+  AutocompleteOption,
+} from './autocomplete';
+
+const meta: Meta<AutocompleteProps> = {
+  component: Autocomplete,
+};
+
+type Story = StoryObj<{}>;
+
+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 }) => {
+    const canvas = within(canvasElement);
+  },
+};
+
+export default meta;

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

@@ -0,0 +1,105 @@
+import {
+  component$,
+  Slot,
+  useContext,
+  useContextProvider,
+  createContextId,
+  useSignal,
+  Signal,
+  HTMLAttributes,
+} from '@builder.io/qwik';
+
+/*
+
+    TODO: 
+    
+    Input Textbox - Role Combobox
+    Listbox - Role Listbox
+
+    Notes:
+
+    https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/
+
+    https://headlessui.com/react/combobox
+    
+    https://thejackshelton.notion.site/Combobox-e82cae2325914c3c82d4cbfcab574825?pvs=4
+
+
+    Current thoughts for API implementation
+
+    <AutocompleteLabel />
+    <Autocomplete>
+        <div>
+            <AutocompleteInput />
+            <AutocompleteButton />
+        </div>
+        <AutoCompleteListbox>
+            <AutoCompleteOption />
+        </AutoCompleteListbox>
+    </Autocomplete>
+
+    Side note: This is based off of both the ARIA combobox pattern linked above and headless UI
+
+    In Headless UI Label is automatically the input value, unless specified otherwise
+
+*/
+
+// Taken similar props from select + input Value
+interface AutocompleteContext {
+  options: Signal<HTMLElement | undefined>[];
+  selectedOption: Signal<string>;
+  isExpanded: Signal<boolean>;
+  triggerRef: Signal<HTMLElement | undefined>;
+  listBoxRef: Signal<HTMLElement | undefined>;
+  inputValue: Signal<string>;
+}
+
+export type ButtonProps = {
+  disabled?: boolean;
+} & HTMLAttributes<HTMLElement>;
+
+export const AutocompleteContextId =
+  createContextId<AutocompleteContext>('autocomplete');
+
+export const Autocomplete = component$(() => {
+  return (
+    <div>
+      <Slot />
+    </div>
+  );
+});
+
+export const AutocompleteLabel = component$(() => {
+  return (
+    <label for="autocomplete-test">
+      <Slot />
+    </label>
+  );
+});
+
+// Add required context here
+export const AutocompleteInput = component$(() => {
+  return <input id="autocomplete-test" role="combobox" />;
+});
+
+export const AutocompleteButton = component$(
+  ({ disabled, ...props }: ButtonProps) => {
+    return (
+      <button>
+        <Slot />
+      </button>
+    );
+  }
+);
+
+export const AutocompleteListbox = component$(() => {
+  return <ul role="listbox"></ul>;
+});
+
+export const AutocompleteOption = component$(() => {
+  return (
+    <li role="option">
+      <Slot />
+    </li>
+  );
+});