docs(update docs examples): updating the docs examples

n

Author: thejackshelton

apps/website/src/routes/docs/_components/preview-code-example/preview-code-example.tsx

@@ -1,7 +1,7 @@
 import { component$, Slot, useStyles$ } from '@builder.io/qwik';
 import { Tab, TabList, TabPanel, Tabs } from '@qwik-ui/headless';
 
-export const PreviewCodeExample = component$(() => {
+export const PreviewCodeExample = component$(({ ...props }) => {
   useStyles$(`
     .dark .previewCodeExampleSelectedTab{
       background-color: var(--qwikui-purple-600);
@@ -15,23 +15,24 @@ export const PreviewCodeExample = component$(() => {
   `);
   return (
     <Tabs
+      {...props}
       class="mb-12 shadow-light-medium dark:shadow-dark-medium rounded-xl"
       selectedClassName="previewCodeExampleSelectedTab"
     >
-      <TabList class="text-white flex rounded-t-xl bg-qwikui-blue-700 dark:bg-qwikui-purple-800 border-slate-600 dark:border-slate-400 border-[1.5px] border-b-0 shadow-light-medium dark:shadow-dark-medium">
+      <TabList class="text-white flex rounded-t-xl bg-qwikui-blue-700 dark:bg-qwikui-purple-800 border-qwikui-blue-300 dark:border-qwikui-purple-200 border-[1.5px] border-b-0 shadow-light-medium dark:shadow-dark-medium">
         <Tab class="px-4 py-2 rounded-tl-[.625rem] hover:bg-qwikui-blue-500 dark:hover:bg-qwikui-purple-600">
           Preview
         </Tab>
         <Tab class="px-4 py-2 hover:bg-qwikui-blue-500 dark:hover:bg-qwikui-purple-600">
           Code
         </Tab>
       </TabList>
-      <TabPanel class="rounded-b-xl shadow-light-medium bg-slate-800 dark:shadow-dark-medium border-slate-600 border-[1.5px] p-4 dark:border-slate-400  md:p-12 bg-slate-200 dark:bg-slate-950">
+      <TabPanel class="rounded-b-xl shadow-light-medium bg-slate-800 dark:shadow-dark-medium border-qwikui-blue-300 border-[1.5px] p-4 dark:border-qwikui-purple-200  md:p-12 bg-slate-200 dark:bg-slate-950">
         <section class="flex flex-col items-center">
           <Slot name="actualComponent" />
         </section>
       </TabPanel>
-      <TabPanel class="rounded-b-xl p-4 md:p-12 bg-slate-900 border-[1.5px] border-slate-600 dark:border-slate-400">
+      <TabPanel class="rounded-b-xl p-4 md:p-12 bg-slate-900 border-[1.5px]  border-qwikui-blue-300 dark:border-qwikui-purple-200">
         <section class="overflow-auto">
           <Slot name="codeExample" />
         </section>

apps/website/src/routes/docs/headless/(components)/combobox/examples.tsx

@@ -7,28 +7,16 @@ import {
   ComboboxListbox,
   ComboboxPortal,
   ComboboxTrigger,
-  Tooltip,
-} from '@qwik-ui/headless';
-
-import {
   ComboboxOption,
   type ResolvedOption,
-} from '../../../../../../../../packages/kit-headless/src/components/combobox';
+} from '@qwik-ui/headless';
 
-import { PreviewCodeExample } from '../../../_components/preview-code-example/preview-code-example';
+// import {
+//   ComboboxOption,
+//   type ResolvedOption,
+// } from '../../../../../../../../packages/kit-headless/src/components/combobox';
 
-const stringsExample = [
-  'Caleb',
-  'Olivia',
-  'James',
-  'Ava',
-  'Noah',
-  'Emma',
-  'Oliver',
-  'Amelia',
-  'Theodore',
-  'Elizabeth',
-];
+import { PreviewCodeExample } from '../../../_components/preview-code-example/preview-code-example';
 
 type Trainer = {
   testValue: string;
@@ -59,15 +47,15 @@ export const HeroExample = component$(() => {
             optionValueKey="testValue"
             optionLabelKey="testLabel"
             optionDisabledKey="disabled"
-            renderOption$={(resolved, index: number) => (
+            renderOption$={(option, index: number) => (
               <ComboboxOption
-                key={resolved.key}
-                resolved={resolved}
+                key={option.key}
+                resolved={option}
                 index={index}
                 class="aria-disabled:text-slate-600 aria-disabled:hover:bg-slate-700 rounded-sm px-2 hover:bg-slate-500 aria-selected:bg-slate-500 text-white  border-2 border-transparent aria-selected:border-slate-200 group"
               >
                 <span class="block group-aria-selected:translate-x-[3px] transition-transform duration-350">
-                  {resolved.option.testLabel}
+                  {option.option.testLabel}
                 </span>
               </ComboboxOption>
             )}
@@ -142,14 +130,14 @@ export const StringCombobox = component$(() => {
                 return option.toLowerCase().startsWith(value.toLowerCase());
               })
             }
-            renderOption$={(resolved: ResolvedOption, index: number) => (
+            renderOption$={(option: ResolvedOption, index: number) => (
               <ComboboxOption
-                key={resolved.key}
+                key={option.key}
                 class="aria-disabled:text-slate-600 aria-disabled:hover:bg-slate-700 rounded-sm px-2 hover:bg-slate-500 aria-selected:bg-slate-500 text-white  border-2 border-transparent aria-selected:border-slate-200 group"
                 index={index}
-                resolved={resolved}
+                resolved={option}
               >
-                {resolved.label}
+                {option.label}
               </ComboboxOption>
             )}
           >
@@ -416,7 +404,7 @@ export const DisabledExample = component$(() => {
     myDisabledKey: boolean;
   };
 
-  const objectExample: Array<DisabledExample> = [
+  const disabledExample: Array<DisabledExample> = [
     { value: '0', label: 'Enabled', myDisabledKey: false },
     { value: '1', label: 'Enabled', myDisabledKey: false },
     { value: '2', label: 'Disabled', myDisabledKey: true },
@@ -433,7 +421,7 @@ export const DisabledExample = component$(() => {
         <div>
           <Combobox
             class="w-fit"
-            options={objectExample}
+            options={disabledExample}
             optionDisabledKey="myDisabledKey"
             renderOption$={(option: ResolvedOption, index: number) => (
               <ComboboxOption
@@ -489,58 +477,136 @@ export const CustomKeysExample = component$(() => {
   };
 
   const pokemonExample: Array<Pokemon> = [
-    { pokedex: '1', pokemon: 'Bulbasaur', isPokemonCaught: false },
-    { pokedex: '2', pokemon: 'Ivysaur', isPokemonCaught: true },
+    { pokedex: '1', pokemon: 'Bulbasaur', isPokemonCaught: true },
+    { pokedex: '2', pokemon: 'Ivysaur', isPokemonCaught: false },
     { pokedex: '3', pokemon: 'Venusaur', isPokemonCaught: false },
     { pokedex: '4', pokemon: 'Charmander', isPokemonCaught: true },
-    { pokedex: '5', pokemon: 'Charmeleon', isPokemonCaught: false },
+    { pokedex: '5', pokemon: 'Charmeleon', isPokemonCaught: true },
     { pokedex: '6', pokemon: 'Charizard', isPokemonCaught: true },
     { pokedex: '7', pokemon: 'Squirtle', isPokemonCaught: false },
-    { pokedex: '8', pokemon: 'Wartortle', isPokemonCaught: true },
+    { pokedex: '8', pokemon: 'Wartortle', isPokemonCaught: false },
   ];
 
-  const isTooltipVisibleSig = useSignal(false);
+  const isPokemonCaught = useSignal(false);
 
   useVisibleTask$(({ track }) => {
-    track(() => isTooltipVisibleSig.value);
-
-    console.log(isTooltipVisibleSig.value);
+    track(() => isPokemonCaught.value);
   });
 
   return (
     <PreviewCodeExample>
       <div class="flex flex-col items-center gap-4 p-4" q:slot="actualComponent">
-        <div>
+        <div class="relative">
+          {isPokemonCaught.value && (
+            <p class="absolute translate-x-[-105%] w-full text-white bg-slate-800 p-4 shadow-dark-medium rounded-md border-2 border-slate-400">
+              You've already caught this pokemon!
+            </p>
+          )}
           <Combobox
             class="w-fit"
             options={pokemonExample}
             optionValueKey="pokedex"
             optionLabelKey="pokemon"
             optionDisabledKey="isPokemonCaught"
+            renderOption$={(option: ResolvedOption, index: number) => {
+              const pokemonOption = option.option as Pokemon;
+              return (
+                <ComboboxOption
+                  key={option.key}
+                  class="aria-disabled:text-slate-600 aria-disabled:hover:bg-slate-700 rounded-sm px-2 hover:bg-slate-500 aria-selected:bg-slate-500 text-white  border-2 border-transparent aria-selected:border-slate-200 group flex justify-between"
+                  index={index}
+                  resolved={option}
+                  onMouseEnter$={() => {
+                    if (option.disabled === true) {
+                      isPokemonCaught.value = true;
+                    }
+                  }}
+                  onMouseLeave$={() => {
+                    isPokemonCaught.value = false;
+                  }}
+                >
+                  <span>{pokemonOption.pokemon}</span>
+                  <span>{pokemonOption.pokedex}</span>
+                </ComboboxOption>
+              );
+            }}
+          >
+            <ComboboxLabel class=" font-semibold text-white">Pokemon 🦏</ComboboxLabel>
+            <ComboboxControl class="bg-[#1f2532] flex items-center rounded-sm border-slate-400 border-[1px] relative">
+              <ComboboxInput class="px-2 w-44 bg-slate-900 px-d2 pr-6 text-white placeholder:text-slate-500" />
+              <ComboboxTrigger class="w-6 h-6 group absolute right-0">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  class="stroke-white group-aria-expanded:-rotate-180 transition-transform duration-[450ms]"
+                  stroke-linecap="round"
+                  stroke-width="2"
+                  stroke-linejoin="round"
+                >
+                  <polyline points="6 9 12 15 18 9"></polyline>
+                </svg>
+              </ComboboxTrigger>
+            </ComboboxControl>
+            <ComboboxPortal>
+              <ComboboxListbox
+                flip={true}
+                offset={8}
+                class="w-44 bg-slate-900 px-4 py-2 rounded-sm border-slate-400 border-[1px]"
+              />
+            </ComboboxPortal>
+          </Combobox>
+        </div>
+      </div>
+
+      <div q:slot="codeExample">
+        <Slot />
+      </div>
+    </PreviewCodeExample>
+  );
+});
+
+export const FlipExample = component$(() => {
+  type FlipExample = {
+    value: string;
+    label: string;
+  };
+
+  const flipExample: Array<FlipExample> = [
+    { value: '0', label: 'Up! ☝️' },
+    { value: '1', label: 'Up! ☝️' },
+    { value: '2', label: 'Down! 👇' },
+    { value: '3', label: 'Up! ☝️' },
+    { value: '4', label: 'Down! 👇' },
+    { value: '5', label: 'Down! 👇' },
+    { value: '6', label: 'Down! 👇' },
+    { value: '7', label: 'Up! ☝️' },
+  ];
+
+  return (
+    <PreviewCodeExample>
+      <div class="flex flex-col items-center gap-4 p-4" q:slot="actualComponent">
+        <div>
+          <Combobox
+            class="w-fit"
+            options={flipExample}
+            optionDisabledKey="myDisabledKey"
             renderOption$={(option: ResolvedOption, index: number) => (
               <ComboboxOption
                 key={option.key}
                 class="aria-disabled:text-slate-600 aria-disabled:hover:bg-slate-700 rounded-sm px-2 hover:bg-slate-500 aria-selected:bg-slate-500 text-white  border-2 border-transparent aria-selected:border-slate-200 group"
                 index={index}
                 resolved={option}
-                onMouseEnter$={() => {
-                  console.log('Mouse entered');
-                  if (option.disabled !== undefined && option.disabled === true) {
-                    isTooltipVisibleSig.value = true;
-                  }
-                }}
-                onMouseLeave$={() => {
-                  console.log('Mouse left');
-                  isTooltipVisibleSig.value = false;
-                }}
               >
                 {option.label}
               </ComboboxOption>
             )}
           >
-            <ComboboxLabel class=" font-semibold text-white">Disabled ⛔</ComboboxLabel>
-            <ComboboxControl class="bg-[#1f2532] flex items-center rounded-sm border-slate-400 border-[1px] relative">
-              <ComboboxInput class="px-2 w-44 bg-slate-900 px-d2 pr-6 text-white placeholder:text-slate-500" />
+            <ComboboxLabel class=" font-semibold text-white">
+              ☝️ Scroll up and down with me open! 👇
+            </ComboboxLabel>
+            <ComboboxControl class="bg-[#1f2532] flex items-center rounded-sm border-slate-400 border-[1px] relative mt-2">
+              <ComboboxInput class="px-2 bg-slate-900 px-d2 pr-6 text-white placeholder:text-slate-500" />
               <ComboboxTrigger class="w-6 h-6 group absolute right-0">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -563,13 +629,71 @@ export const CustomKeysExample = component$(() => {
               />
             </ComboboxPortal>
           </Combobox>
-          {isTooltipVisibleSig.value && (
-            <Tooltip
-              class="w-fit bg-slate-400 text-slate-950 p-4"
-              content="This Pokemon has already been caught!"
-              position="top"
-            />
-          )}
+        </div>
+      </div>
+
+      <div q:slot="codeExample">
+        <Slot />
+      </div>
+    </PreviewCodeExample>
+  );
+});
+
+export const ShiftExample = component$(() => {
+  const shiftExample = ['Example1', 'Example2', 'Example3'];
+  const isListboxOpenSig = useSignal(true);
+
+  return (
+    <PreviewCodeExample>
+      <div
+        class="flex flex-col items-center gap-4 p-4"
+        style={{ overflow: 'auto', width: '100%' }}
+        q:slot="actualComponent"
+      >
+        <div class="w-[5000px] flex-shrink-0 flex justify-center">
+          <Combobox
+            class="w-fit"
+            options={shiftExample}
+            bind:isListboxOpenSig={isListboxOpenSig}
+            renderOption$={(option: ResolvedOption, index: number) => (
+              <ComboboxOption
+                key={option.key}
+                class="aria-disabled:text-slate-600 aria-disabled:hover:bg-slate-700 rounded-sm px-2 hover:bg-slate-500 aria-selected:bg-slate-500 text-white  border-2 border-transparent aria-selected:border-slate-200 group"
+                index={index}
+                resolved={option}
+              >
+                {option.label}
+              </ComboboxOption>
+            )}
+          >
+            <ComboboxLabel class=" font-semibold text-white">Fruits 🍓</ComboboxLabel>
+            <ComboboxControl class="bg-[#1f2532] flex items-center rounded-sm border-slate-400 border-[1px] relative">
+              <ComboboxInput
+                class="px-2 w-44 bg-slate-900 px-d2 pr-6 text-white placeholder:text-slate-500"
+                placeholder="Papaya"
+              />
+              <ComboboxTrigger class="w-6 h-6 group absolute right-0">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  class="stroke-white group-aria-expanded:-rotate-180 transition-transform duration-[450ms]"
+                  stroke-linecap="round"
+                  stroke-width="2"
+                  stroke-linejoin="round"
+                >
+                  <polyline points="6 9 12 15 18 9"></polyline>
+                </svg>
+              </ComboboxTrigger>
+            </ComboboxControl>
+            <ComboboxPortal>
+              <ComboboxListbox
+                offset={8}
+                shift={true}
+                class="w-44 bg-slate-900 px-4 py-2 rounded-sm border-slate-400 border-[1px]"
+              />
+            </ComboboxPortal>
+          </Combobox>
         </div>
       </div>
 
@@ -603,14 +727,14 @@ export const ContextExample = component$(() => {
       <div class="flex flex-col gap-4" q:slot="actualComponent">
         <Combobox
           options={animals}
-          renderOption$={(resolved: ResolvedOption, index: number) => (
+          renderOption$={(option: ResolvedOption, index: number) => (
             <ComboboxOption
               index={index}
-              resolved={resolved}
+              resolved={option}
               class="aria-disabled:text-slate-600 aria-disabled:hover:bg-slate-700 rounded-sm px-2 hover:bg-slate-500 aria-selected:bg-slate-500 text-white  border-2 border-transparent aria-selected:border-slate-200 group"
             >
               <span class="block group-aria-selected:translate-x-[3px] transition-transform duration-350">
-                {resolved.label}
+                <span>{option.label}</span>
               </span>
             </ComboboxOption>
           )}