Merge pull request #672 from thejackshelton/shiki-utf8

fix: docs examples

Author: thejackshelton

apps/website/src/components/highlight/highlight.tsx

@@ -1,7 +1,16 @@
-import { ClassList, PropsOf, component$, useSignal, useTask$ } from '@builder.io/qwik';
+import {
+  ClassList,
+  PropsOf,
+  component$,
+  useSignal,
+  useTask$,
+  useVisibleTask$,
+  $,
+} from '@builder.io/qwik';
 import { CodeCopy } from '../code-copy/code-copy';
 import { getHighlighterCore } from 'shiki';
 import { cn } from '@qwik-ui/utils';
+import { isDev } from '@builder.io/qwik/build';
 
 export type HighlightProps = PropsOf<'div'> & {
   code: string;
@@ -22,8 +31,7 @@ export const Highlight = component$(
   }: HighlightProps) => {
     const codeSig = useSignal('');
 
-    // eslint-disable-next-line qwik/no-use-visible-task
-    useTask$(async function createHighlightedCode() {
+    const addShiki$ = $(async () => {
       let modifiedCode: string = code;
 
       let partsOfCode = modifiedCode.split(splitCommentStart);
@@ -59,6 +67,22 @@ export const Highlight = component$(
       codeSig.value = str.toString();
     });
 
+    useTask$(async function createHighlightedCode() {
+      if (!isDev) {
+        await addShiki$();
+      }
+    });
+
+    // eslint-disable-next-line qwik/no-use-visible-task
+    useVisibleTask$(
+      async () => {
+        if (isDev) {
+          await addShiki$();
+        }
+      },
+      { strategy: 'document-ready' },
+    );
+
     return (
       <div class="code-example relative max-h-[31.25rem]">
         <CodeCopy

apps/website/src/routes/docs/headless/accordion/examples/custom-heading.tsx

@@ -11,7 +11,7 @@ export default component$(() => {
   return (
     <>
       <div class="flex w-full justify-center">
-        <AccordionRoot>
+        <AccordionRoot class="w-full">
           <AccordionItem class="border-b">
             <AccordionHeader as="h4">
               <AccordionTrigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">

apps/website/src/routes/docs/headless/accordion/examples/default-value.tsx

@@ -11,7 +11,7 @@ export default component$(() => {
   return (
     <>
       <div class="flex w-full justify-center">
-        <AccordionRoot>
+        <AccordionRoot class="w-full">
           <AccordionItem class="border-b">
             <AccordionHeader as="h3">
               <AccordionTrigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">

apps/website/src/routes/docs/headless/accordion/examples/disabled.tsx

@@ -12,7 +12,7 @@ export default component$(() => {
   return (
     <>
       <div class="flex w-full justify-center">
-        <AccordionRoot>
+        <AccordionRoot class="w-full">
           <AccordionItem class="border-b">
             <AccordionHeader as="h3">
               <AccordionTrigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">

apps/website/src/routes/docs/headless/accordion/examples/dynamic.tsx

@@ -53,7 +53,7 @@ export default component$(({ itemsLength = 3 }: DynamicAccordionProps) => {
           </label>
         </div>
 
-        <AccordionRoot>
+        <AccordionRoot class="w-full">
           {itemStore.map(({ label, id }, index) => {
             return (
               <AccordionItem id={`${id}`} key={id} class="border-b">

apps/website/src/routes/docs/headless/accordion/examples/focused-index.tsx

@@ -14,6 +14,7 @@ export default component$(() => {
     <>
       <div class="flex w-full flex-col items-center gap-4">
         <AccordionRoot
+          class="w-full"
           onFocusIndexChange$={(index: number) => {
             focusedIndexSig.value = index;
           }}

apps/website/src/routes/docs/headless/accordion/examples/hero.tsx

@@ -12,7 +12,7 @@ export default component$(() => {
   return (
     <>
       <div class="flex w-full justify-center">
-        <AccordionRoot animated enhance={true}>
+        <AccordionRoot class="w-full" animated enhance={true}>
           <AccordionItem class="border-b">
             <AccordionHeader as="h3">
               <AccordionTrigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">

apps/website/src/routes/docs/headless/accordion/examples/multi.tsx

@@ -12,7 +12,7 @@ export default component$(() => {
   return (
     <>
       <div class="flex w-full justify-center">
-        <AccordionRoot collapsible animated behavior="multi">
+        <AccordionRoot class="w-full" collapsible animated behavior="multi">
           <AccordionItem class="border-b">
             <AccordionHeader as="h3">
               <AccordionTrigger class="group flex w-full items-center justify-between rounded-t-sm  py-4 text-left hover:underline">

apps/website/src/routes/docs/headless/accordion/examples/non-collapsible.tsx

@@ -13,7 +13,7 @@ export default component$(() => {
   return (
     <>
       <div class="flex w-full justify-center">
-        <AccordionRoot animated collapsible={false}>
+        <AccordionRoot class="w-full" animated collapsible={false}>
           <AccordionItem class="border-b">
             <AccordionHeader as="h3">
               <AccordionTrigger class="group flex w-full items-center justify-between rounded-t-sm  py-4 text-left hover:underline">

apps/website/src/routes/docs/headless/accordion/examples/selected-index.tsx

@@ -14,6 +14,7 @@ export default component$(() => {
     <>
       <div class="flex w-full flex-col items-center gap-4">
         <AccordionRoot
+          class="w-full"
           onSelectedIndexChange$={(index: number) => {
             selectedIndexSig.value = index;
           }}

apps/website/src/routes/docs/headless/collapsible/examples/bind-open.tsx

@@ -0,0 +1,23 @@
+import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@qwik-ui/headless';
+import styles from '../snippets/collapsible.css?inline';
+
+export default component$(() => {
+  useStyles$(styles);
+  const isOpen = useSignal<boolean>(false);
+
+  return (
+    <>
+      <p>
+        is open: <strong>{isOpen.value ? 'true' : 'false'}</strong>
+      </p>
+
+      <Collapsible class="collapsible" bind:open={isOpen}>
+        <CollapsibleTrigger class="collapsible-trigger">Trigger</CollapsibleTrigger>
+        <CollapsibleContent class="collapsible-content">
+          <p class="collapsible-content-outline">Content</p>
+        </CollapsibleContent>
+      </Collapsible>
+    </>
+  );
+});

apps/website/src/routes/docs/headless/collapsible/index.mdx

@@ -84,9 +84,17 @@ This is because the content is rendered on the server. Animations applied to `da
 
 We can pass reactive state by using the bind:open prop to the `<Collapsible />` component.
 
+<Showcase name="bind-open" />
+
+bind:open is a signal prop, and allows us to pass in our own signal to control the expanded state of the collapsible.
+
+### Programmatic changes
+
+Now that we have a controlled state, we can programmatically change the state of the collapsible by changing the value of the signal.
+
 <Showcase name="programmatic" />
 
-bind:open is a signal prop, it allows us to programmatically control the expanded state of the collapsible.
+The example above toggles the expanded state of the collapsible by changing the value of the `isOpen` signal when the checkbox is clicked.
 
 ### Handling open / close
 
@@ -136,6 +144,21 @@ Every code example uses the following CSS:
 
 Some CSS variables are specific to the docs, feel free to plug in your own values or variables!
 
+## Keyboard Interaction
+
+<KeyboardInteractionTable
+  keyDescriptors={[
+    {
+      keyTitle: 'Space',
+      description: `When focus is on the trigger, open or close the collapsible.`,
+    },
+    {
+      keyTitle: 'Enter',
+      description: `When focus is on the trigger open or close the collapsible.`,
+    },
+  ]}
+/>
+
 ## API
 
 ### Data Attributes

apps/website/src/routes/docs/headless/select/index.mdx

@@ -265,10 +265,6 @@ The consumer misspelled the the value, and so the fallback is displayed.
 
 > Side note: would appreciate some help on TypeScript to make misspelled option values a thing of the past. Ideally, a union of the user's passed in options.
 
-## Forms
-
-<Showcase name="form" />
-
 ## Example CSS
 
 Every code example uses the following CSS:
@@ -277,6 +273,49 @@ Every code example uses the following CSS:
 
 Some CSS variables are specific to the docs, feel free to plug in your own values or variables!
 
+## Keyboard Interaction
+
+<KeyboardInteractionTable
+  keyDescriptors={[
+    {
+      keyTitle: 'Space',
+      description: `Opens the menu and selects a highlighted option.`,
+    },
+    {
+      keyTitle: 'Enter',
+      description: `Opens the menu and selects a highlighted option.`,
+    },
+    {
+      keyTitle: 'ArrowDown',
+      description: `Opens the menu or moves focus down.`,
+    },
+    {
+      keyTitle: 'ArrowUp',
+      description: `Opens the menu or moves focus up.`,
+    },
+    {
+      keyTitle: 'Home',
+      description: `When focus is on an item, moves focus to first item.`,
+    },
+    {
+      keyTitle: 'End',
+      description: `When focus is on an item, moves focus to last item.`,
+    },
+    {
+      keyTitle: 'ArrowRight',
+      description: `When focus is on the trigger, change the selection to the next item.`,
+    },
+    {
+      keyTitle: 'ArrowLeft',
+      description: `When focus is on the trigger, change the selection to the previous item.`,
+    },
+    {
+      keyTitle: 'Esc',
+      description: `Closes the select and moves focus to the trigger.`,
+    },
+  ]}
+/>
+
 ## API
 
 ### Data Attributes

apps/website/src/routes/docs/headless/tabs/examples/disabled.tsx

@@ -11,15 +11,15 @@ export default component$(() => {
         <Tabs>
           <TabList>
             <Tab
+              style={{ width: '125px' }}
               class="aria-disabled:cursor-not-allowed"
-              style="width: 25%"
               disabled={true}
             >
               Disabled Tab
             </Tab>
-            <Tab style="width: 25%">Joke 2</Tab>
-            <Tab style="width: 25%">Joke 3</Tab>
-            <Tab style="width: 25%">Joke 4</Tab>
+            <Tab style={{ width: '125px' }}>Joke 2</Tab>
+            <Tab style={{ width: '125px' }}>Joke 3</Tab>
+            <Tab style={{ width: '125px' }}>Joke 4</Tab>
           </TabList>
           <TabPanel>"What did the coffee report to the police", " A mugging."</TabPanel>
           <TabPanel>"What's brown and sticky", " A stick."</TabPanel>

apps/website/src/routes/docs/headless/tabs/index.css

@@ -1,3 +1,7 @@
+.tabs-example {
+  width: 100%;
+}
+
 .tabs-example [role='tab'] {
   width: 148px;
   background: hsl(var(--muted));
@@ -16,6 +20,7 @@
 .tabs-example [role='tablist'] {
   border: 1px solid;
   margin-bottom: 1rem;
+  max-width: fit-content;
 }
 
 .tabs-example h3 {