feat: v2 docs page (#357)

* feat: initial layout + ts

* feat: improved primitives

* feat: initial sidebar

* feat: commonly used

* feat: updated structure

* feat: initial docs sidebar

* feat: updated docs page

* feat: initial structure

* feat: remove checkbox docs

* feat: initial template

* feat: support playground

* proper spacing

* fix: format

* fix: popover can externally change w/ microtask update

* fix: adjust width of popover in DesktopNav component

* fix: format

Author: thejackshelton-kunaico

docs/src/docs-widgets/action/action.tsx

@@ -8,7 +8,8 @@ const buttonVariants = cva(
     variants: {
       variant: {
         primary: "border-lavender-500 bg-lavender-400 text-white",
-        secondary: "border-lavender-400 bg-lavender-200 text-lavender-600"
+        secondary: "border-lavender-400 bg-lavender-200 text-lavender-600",
+        trigger: "border-light-700 text-light-700 bg-white w-full p-2.5"
       }
     },
     defaultVariants: {
@@ -21,7 +22,8 @@ const shadowVariants = cva("absolute inset-0 z-1 translate-1", {
   variants: {
     variant: {
       primary: "bg-[#6C2CC4]",
-      secondary: "bg-[#AC7EF4]"
+      secondary: "bg-[#AC7EF4]",
+      trigger: "bg-[#B3BAC1]"
     }
   },
   defaultVariants: {

docs/src/docs-widgets/anatomy-table/anatomy-table.tsx

@@ -10,7 +10,7 @@ export const AnatomyTable = component$<{ api: ComponentParts }>(({ api }) => {
   const anatomyItems = api.anatomy.filter((item): item is AnatomyItem => "name" in item);
 
   return (
-    <div class="my-4">
+    <div>
       <div class="border-neutral-primary border overflow-hidden">
         <table class="w-full border-collapse text-sm">
           <thead>

docs/src/docs-widgets/api-table/api-table.tsx

@@ -3,9 +3,10 @@ import type {
   ComponentEntry,
   ParsedProps
 } from "@kunai-consulting/code-notate-core";
-import { Popover } from "@qds.dev/ui";
 import { component$, useContext, useTask$ } from "@qwik.dev/core";
-import { rootContextId } from "~/routes/layout";
+
+import { Popover } from "@qds.dev/ui";
+import { rootContextId } from "~/routes/components/layout";
 import { MainHeading, SubHeading } from "../toc/toc";
 
 type DataAttribute = {

docs/src/docs-widgets/features/features.tsx

@@ -10,8 +10,8 @@ export const Features = component$<{ api: ComponentParts }>(({ api }) => {
   );
 
   return (
-    <div class="my-4">
-      <ul class="list-disc list-inside space-y-2">
+    <div>
+      <ul class="list-disc list-inside space-y-4">
         {features.map((feature) => (
           <li class="flex items-center gap-2" key={feature}>
             <span>

docs/src/docs-widgets/header/header.tsx

@@ -141,12 +141,12 @@ const DesktopNav = component$(() => {
   const restOfItems = navData.slice(1);
 
   return (
-    <Navbar.Root class="hidden lg:block px-6 bg-white fixed top-6 w-full rounded-2xl border-[1.6px] border-blue-300 max-w-[600px] shadow-[6px_6px_0_0px_var(--color-blue-200)]">
+    <Navbar.Root class="hidden lg:block px-6 bg-white fixed top-6 w-full rounded-2xl border-[1.6px] border-blue-300 max-w-[650px] shadow-[6px_6px_0_0px_var(--color-blue-200)]">
       <Navbar.List class="flex items-center justify-between">
         <Navbar.Item>
           <Navbar.ItemLink href={firstItem.href} class="flex items-center gap-2">
             {firstItem.icon}
-            <span class="font-arcade text-xl ">{firstItem.label}</span>
+            <span class="font-arcade text-2xl ">{firstItem.label}</span>
           </Navbar.ItemLink>
         </Navbar.Item>
         <li>
@@ -165,8 +165,8 @@ const DesktopNav = component$(() => {
                   <span>{item.label}</span>
                 </Navbar.ItemTrigger>
                 <Navbar.ItemContent
-                  class="open:grid gap-4 max-w-[600px] w-full shadow-[6px_6px_0_0px_var(--color-blue-200)] rounded-2xl p-4 border-[1.6px] border-blue-300 transition-discrete duration-[325ms] ease-in-out open:animate-to-visible not-open:animate-from-visible opacity-0"
-                  style={getContentGridTemplate(item.label)}
+                  class="open:grid gap-4 shadow-[6px_6px_0_0px_var(--color-blue-200)] rounded-2xl p-4 border-[1.6px] border-blue-300 transition-discrete duration-[325ms] ease-in-out open:animate-to-visible not-open:animate-from-visible opacity-0"
+                  style={{ ...getContentGridTemplate(item.label), width: "650px" }}
                   ui-mega-popover
                 >
                   {item.links?.map((link) => {
@@ -223,7 +223,7 @@ const MobileNav = component$(() => {
     <div class="flex items-center justify-between w-full h-16 lg:hidden bg-white border-b-2 border-lavender-200">
       <a href="/" class="p-4 flex items-center gap-2" aria-label="QDS Home">
         <QwikLogo />
-        <span class="font-arcade text-xl ">QDS</span>
+        <span class="font-arcade text-xl">QDS</span>
       </a>
 
       <Modal.Root>
@@ -242,7 +242,7 @@ const MobileNav = component$(() => {
   );
 });
 
-const QwikLogo = component$(() => {
+export const QwikLogo = component$(() => {
   return (
     <div>
       <svg

docs/src/docs-widgets/playground/playground.tsx

@@ -0,0 +1,31 @@
+import { type Component, component$ } from "@qwik.dev/core";
+
+type PlaygroundConfig = {
+  controls?: string[];
+};
+
+type PlaygroundProps = {
+  // biome-ignore lint/suspicious/noExplicitAny: template can have any props
+  template: Component<any>;
+  config?: PlaygroundConfig;
+};
+
+export const Playground = component$<PlaygroundProps>(
+  ({ template: Template, config }) => {
+    return (
+      <div class="p-6 border-[1.6px] border-blue-500 rounded-2xl shadow-[6px_6px_0_0px_var(--color-blue-200)]">
+        <div class="mb-4">
+          <h3 class="font-semibold mb-2">Playground</h3>
+          {config?.controls && (
+            <div class="text-sm text-gray-600">
+              Controls: {config.controls.join(", ")}
+            </div>
+          )}
+        </div>
+        <div class="p-8 bg-gray-50 flex items-center justify-center">
+          <Template />
+        </div>
+      </div>
+    );
+  }
+);