Merge pull request #370 from thejackshelton/thejackshelton-accordion-improvements

major accordion refactor, possible ready state

Author: thejackshelton

apps/website/src/_state/kit-name.type.ts

@@ -1,5 +1,5 @@
 export enum KitName {
   HEADLESS = 'healdess',
   TAILWIND = 'tailwind',
-  NO_KIT = 'no-kit',
+  NO_KIT = 'no-kit'
 }

apps/website/src/_state/root-store-context-id.ts

@@ -1,6 +1,4 @@
 import { createContextId } from '@builder.io/qwik';
 import { AppState } from './app-state.type';
 
-export const ROOT_STORE_CONTEXT_ID = createContextId<AppState>(
-  'app-state-context-id'
-);
+export const ROOT_STORE_CONTEXT_ID = createContextId<AppState>('app-state-context-id');

apps/website/src/global.css

@@ -8,9 +8,8 @@
   font-weight: 400;
   font-display: fallback;
   src: url('/fonts/poppins-400.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
-    U+FEFF, U+FFFD;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 @font-face {
@@ -19,9 +18,8 @@
   font-weight: 500;
   font-display: fallback;
   src: url('/fonts/poppins-500.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
-    U+FEFF, U+FFFD;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 @font-face {
@@ -30,9 +28,8 @@
   font-weight: 700;
   font-display: fallback;
   src: url('/fonts/poppins-700.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
-    U+FEFF, U+FFFD;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 :root {
@@ -66,13 +63,11 @@
   --dark-shadow-elevation-low: 0.5px 0.6px 0.9px hsl(var(--shadow-color) / 0.34),
     0.9px 1.1px 1.6px -1.2px hsl(var(--dark-shadow-color) / 0.34),
     2.2px 2.6px 3.8px -2.5px hsl(var(--dark-shadow-color) / 0.34);
-  --dark-shadow-elevation-medium: 0.5px 0.6px 0.9px
-      hsl(var(--dark-shadow-color) / 0.36),
+  --dark-shadow-elevation-medium: 0.5px 0.6px 0.9px hsl(var(--dark-shadow-color) / 0.36),
     1.8px 2.1px 3.1px -0.8px hsl(var(--dark-shadow-color) / 0.36),
     4.4px 5.3px 7.7px -1.7px hsl(var(--dark-shadow-color) / 0.36),
     10.8px 12.8px 18.8px -2.5px hsl(var(--dark-shadow-color) / 0.36);
-  --dark-shadow-elevation-high: 0.5px 0.6px 0.9px
-      hsl(var(--dark-shadow-color) / 0.34),
+  --dark-shadow-elevation-high: 0.5px 0.6px 0.9px hsl(var(--dark-shadow-color) / 0.34),
     3.1px 3.7px 5.4px -0.4px hsl(var(--dark-shadow-color) / 0.34),
     5.9px 7px 10.3px -0.7px hsl(var(--dark-shadow-color) / 0.34),
     9.6px 11.5px 16.9px -1.1px hsl(var(--dark-shadow-color) / 0.34),
@@ -100,10 +95,9 @@ html {
   background-color: var(--color-bg) !important;
   color: var(--color-text) !important;
 
-  font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system,
-    BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
-    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', Segoe UI Symbol,
-    'Noto Color Emoji';
+  font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', Segoe UI Symbol, 'Noto Color Emoji';
 }
 
 body {
@@ -114,3 +108,16 @@ body {
   grid-template-columns: 25% 70%;
   grid-template-areas: 'sidebar  content';
 }
+
+/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term. 
+  It would make more sense to supply the user with the animation declaration in the docs.
+*/
+@layer utilities {
+  .accordion-animation-1[data-state='open'] {
+    animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-open;
+  }
+
+  .accordion-animation-1[data-state='closed'] {
+    animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;
+  }
+}

apps/website/src/root.tsx

@@ -3,12 +3,12 @@ import {
   useContextProvider,
   useStore,
   useStyles$,
-  useVisibleTask$,
+  useVisibleTask$
 } from '@builder.io/qwik';
 import {
   QwikCityProvider,
   RouterOutlet,
-  ServiceWorkerRegister,
+  ServiceWorkerRegister
 } from '@builder.io/qwik-city';
 import { RouterHead } from './routes/_components/router-head/router-head';
 
@@ -32,8 +32,8 @@ export default component$(() => {
     mode: 'light',
     isSidebarOpened: false,
     featureFlags: {
-      showTailwind: import.meta.env.DEV,
-    },
+      showTailwind: import.meta.env.DEV
+    }
   });
 
   useContextProvider(ROOT_STORE_CONTEXT_ID, rootStore);
@@ -45,7 +45,7 @@ export default component$(() => {
 
   // TODO: remove this old state once refactored
   const state = useStore<OldAppState>({
-    darkMode: false,
+    darkMode: false
   });
   useContextProvider(OLD_APP_STATE_CONTEXT_ID, state);
 
@@ -61,7 +61,7 @@ export default component$(() => {
       <body
         lang="en"
         class={{
-          'overflow-y-hidden': rootStore.isSidebarOpened,
+          'overflow-y-hidden': rootStore.isSidebarOpened
         }}
       >
         <RouterOutlet />

apps/website/src/routes/(main)/about/[email protected]

@@ -7,73 +7,66 @@ export default component$(() => {
       <div class="max-w-3xl  mx-auto px-4 sm:px-6 lg:px-8 py-12">
         <h1 class="text-4xl font-bold  mb-8">About Qwik UI</h1>
         <p class="text-lg mb-16">
-          Qwik UI is the first ever component library for the revolutionary Qwik
-          web framework. Developed by leading members of the Qwik community,{' '}
+          Qwik UI is the first ever component library for the revolutionary Qwik web
+          framework. Developed by leading members of the Qwik community,{' '}
           <mark class="text-purple-300 bg-transparent">
             including members from the Qwik team
           </mark>
-          , Qwik UI offers an open-source solution for building instant loading
-          and accessible web applications that achieve top-tier SEO performance.
+          , Qwik UI offers an open-source solution for building instant loading and
+          accessible web applications that achieve top-tier SEO performance.
         </p>
 
         <h2 class="text-2xl font-semibold mb-4">Designed for Developers</h2>
         <p class="text-lg mb-16">
-          Qwik UI is built for developers who want to harness the power of
-          Qwik's innovative{' '}
-          <mark class="text-purple-300 bg-transparent">
-            JavaScript Streaming
-          </mark>{' '}
-          technology to create highly performant web applications with minimal
-          effort. Whether you're working on an e-commerce platform, a dashboard
-          or any scale application, Qwik UI provides the components and tools
-          you need to deliver a seamless user experience.
+          Qwik UI is built for developers who want to harness the power of Qwik's
+          innovative{' '}
+          <mark class="text-purple-300 bg-transparent">JavaScript Streaming</mark>{' '}
+          technology to create highly performant web applications with minimal effort.
+          Whether you're working on an e-commerce platform, a dashboard or any scale
+          application, Qwik UI provides the components and tools you need to deliver a
+          seamless user experience.
         </p>
 
         <h2 class="text-2xl font-semibold  mb-4">
           A MUST for E-commerce and SEO-focused Applications
         </h2>
         <p class="text-lg mb-16">
-          Qwik's instant loading capabilities offer a significant advantage for
-          e-commerce and other search engine-facing applications. By ensuring
-          the highest Core Web Vitals scores, Qwik UI not only{' '}
+          Qwik's instant loading capabilities offer a significant advantage for e-commerce
+          and other search engine-facing applications. By ensuring the highest Core Web
+          Vitals scores, Qwik UI not only{' '}
           <mark class="text-purple-300 bg-transparent">
             delivers an amazing user experience
           </mark>{' '}
           but also helps{' '}
           <mark class="text-purple-300 bg-transparent">
             improve your site's search engine rankings
           </mark>
-          . Stand out from the competition with a web application that loads
-          instantly, regardless of its size or complexity.
+          . Stand out from the competition with a web application that loads instantly,
+          regardless of its size or complexity.
         </p>
 
         <h2 class="text-2xl font-semibold  mb-4">Accessibility Matters</h2>
         <p class="text-lg mb-16">
-          In addition to performance and SEO advantages, Qwik UI components are
-          designed with accessibility in mind.{' '}
+          In addition to performance and SEO advantages, Qwik UI components are designed
+          with accessibility in mind.{' '}
           <mark class="text-purple-300 bg-transparent">
             We believe in creating inclusive web experiences
           </mark>{' '}
-          that cater to users of all abilities, and our components are built to
-          adhere to the highest accessibility standards.
+          that cater to users of all abilities, and our components are built to adhere to
+          the highest accessibility standards.
         </p>
-        <h2 class="text-2xl font-semibold  mb-4">
-          Open Source and Community-Driven
-        </h2>
+        <h2 class="text-2xl font-semibold  mb-4">Open Source and Community-Driven</h2>
         <p class="text-lg mb-16">
-          Qwik UI is an open-source project, which means that it's freely
-          available for developers to use and contribute to. By fostering a{' '}
-          <mark class="text-purple-300 bg-transparent">
-            community-driven approach
-          </mark>
-          , we aim to continuously improve and expand the capabilities of Qwik
-          UI, making it the go-to component library for developers working the
-          Qwik framework.
+          Qwik UI is an open-source project, which means that it's freely available for
+          developers to use and contribute to. By fostering a{' '}
+          <mark class="text-purple-300 bg-transparent">community-driven approach</mark>,
+          we aim to continuously improve and expand the capabilities of Qwik UI, making it
+          the go-to component library for developers working the Qwik framework.
         </p>
         <p class="text-lg mb-16">
-          Join us in our mission to revolutionize web development and create
-          instant loading web applications that offer unparalleled performance,
-          SEO advantages, and accessibility.
+          Join us in our mission to revolutionize web development and create instant
+          loading web applications that offer unparalleled performance, SEO advantages,
+          and accessibility.
         </p>
 
         <a href="/docs/headless/introduction">
@@ -87,5 +80,5 @@ export default component$(() => {
 });
 
 export const head: DocumentHead = {
-  title: 'Qwik UI | About the project',
+  title: 'Qwik UI | About the project'
 };

apps/website/src/routes/_components/footer/footer.tsx

@@ -6,10 +6,7 @@ export const Footer = component$(() => {
   return (
     <footer class="bg-gray-300 dark:bg-gray-900">
       <div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
-        <nav
-          class="-mx-5 -my-2 flex flex-wrap justify-center"
-          aria-label="Footer"
-        >
+        <nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
           <div class="px-5 py-2">
             <a
               href="/about"

apps/website/src/routes/docs.css

@@ -13,6 +13,15 @@
       @apply mb-4;
     }
 
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      overflow-wrap: break-word;
+    }
+
     h1 {
       @apply text-5xl font-bold mb-12;
     }
@@ -28,6 +37,22 @@
     h4 {
       @apply text-lg mb-6;
     }
+
+    h5 {
+      @apply text-xl mb-1 font-bold;
+    }
+
+    blockquote {
+      @apply bg-[#BFDBFE] dark:bg-[#312E81] p-4 border-l-[3px] dark:border-[#F3F3F3] border-[#333333] rounded-sm;
+    }
+
+    ul {
+      @apply list-disc px-6 mb-4 font-[500];
+    }
+
+    li {
+      @apply py-2;
+    }
   }
 
   a {
@@ -39,7 +64,7 @@
   }
 
   p code {
-    @apply bg-transparent px-2 rounded-md dark:bg-transparent border-[1px] dark:border-white w-max border-[#333333];
+    @apply bg-transparent px-2 mx-1 rounded-md dark:bg-transparent border-[1px] dark:border-white w-max border-[#333333];
   }
 
   /* adds sufficient padding to the table items / API Component */
@@ -50,4 +75,8 @@
   td p {
     @apply mb-0;
   }
+
+  blockquote a {
+    @apply border-[#333] dark:border-[#F3F3F3];
+  }
 }

apps/website/src/routes/docs/_components/alpha-banner/alpha-banner.tsx

@@ -3,7 +3,7 @@ import {
   Slot,
   component$,
   useSignal,
-  useStylesScoped$,
+  useStylesScoped$
 } from '@builder.io/qwik';
 
 export const AlphaBanner = component$(() => {
@@ -76,9 +76,9 @@ export const AlphaBanner = component$(() => {
         class="bg-[#fef1c7] dark:bg-[#92730e] mb-8 px-6 py-4 rounded-xl md:items-center relative md:flex-row normal-state shadow-depth dark:shadow-depth-dark"
       >
         <span class="pr-2">
-          <strong>WARNING:</strong> This component is currently in Alpha, and
-          not intended to use in production. You may use it for testing
-          purposes, or use a component with the <strong>Ready</strong> state
+          <strong>WARNING:</strong> This component is currently in Alpha, and not intended
+          to use in production. You may use it for testing purposes, or use a component
+          with the <strong>Ready</strong> state
         </span>
         <button
           onClick$={() => ref.value?.classList.toggle('fade')}
@@ -91,10 +91,7 @@ export const AlphaBanner = component$(() => {
   );
 });
 
-export function EpCircleCloseFilled(
-  props: QwikIntrinsicElements['svg'],
-  key: string
-) {
+export function EpCircleCloseFilled(props: QwikIntrinsicElements['svg'], key: string) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

apps/website/src/routes/docs/_components/anatomy-table/anatomy-table.tsx

@@ -0,0 +1,42 @@
+import { component$ } from '@builder.io/qwik';
+import { Popover, PopoverContent, PopoverTrigger } from '@qwik-ui/headless';
+import {} from '@qwik-ui/headless';
+
+type AnatomyTableProps = {
+  propDescriptors: {
+    name: string;
+    info: string;
+    description: string;
+  }[];
+};
+
+export const AnatomyTable = component$(({ propDescriptors }: AnatomyTableProps) => {
+  return (
+    <div class="overflow-auto">
+      <table class="w-full max-w-full border-b border-gray-700 text-left">
+        <tbody class="divide-y divide-gray-700">
+          <tr class="text-white">
+            <td class="whitespace-nowrap py-2 pl-4 text-sm font-medium sm:pl-0">
+              Component
+            </td>
+            <td class="whitespace-nowrap py-2 text-sm font-medium">Description</td>
+          </tr>
+          {propDescriptors?.map((propDescriptor) => {
+            return (
+              <tr key={propDescriptor.name}>
+                <td class="prose prose-sm py-3 pl-4 align-baseline sm:pl-0 ">
+                  <code>{propDescriptor.name}</code>
+                </td>
+                <td class="py-3 align-baseline">
+                  <div class="prose prose-sm prose-docs-table">
+                    <p>{propDescriptor.description}</p>
+                  </div>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+});