feat: add contract documents (#245)

* chore(qwik): update to 1.5.5

* chore: remove unneeded dependencies

* fix(navigation): adjust panel style

* feat(contract): display documents

* chore(contracts): update links & creation-dates

.prettierrc

@@ -3,6 +3,6 @@
   "jsxSingleQuote": true,
   "arrowParens": "avoid",
   "trailingComma": "none",
-  "printWidth": 80,
+  "printWidth": 120,
   "plugins": ["prettier-plugin-tailwindcss"]
 }

package.json

@@ -37,10 +37,9 @@
     "qwik": "qwik"
   },
   "devDependencies": {
-    "@builder.io/qwik": "1.5.2",
-    "@builder.io/qwik-city": "1.5.2",
-    "@floating-ui/dom": "1.6.3",
-    "@qwik-ui/headless": "0.3.6",
+    "@builder.io/qwik": "1.5.5",
+    "@builder.io/qwik-city": "1.5.5",
+    "@qwik-ui/headless": "0.4.2",
     "@types/eslint": "^8.44.8",
     "@types/node": "^20.10.3",
     "@types/node-fetch": "2.6.4",
@@ -49,7 +48,6 @@
     "autoprefixer": "^10.4.14",
     "eslint": "^8.55.0",
     "eslint-plugin-qwik": "^1.3.2",
-    "focus-trap": "^7.5.3",
     "node-fetch": "3.3.2",
     "postcss": "^8.4.31",
     "prettier": "3.2.5",

src/_shell/menu/desktop/desktop-menu.tsx

@@ -5,7 +5,7 @@ import {
   useStyles$,
   type Signal
 } from '@builder.io/qwik';
-import { Popover, PopoverTrigger } from '@qwik-ui/headless';
+import { Popover } from '@qwik-ui/headless';
 import type { MenuConfig, MenuEntryItem } from '../types';
 import { CategoryItem } from './category-item';
 import { NavMenuAd } from './nav-menu-ad';
@@ -71,8 +71,12 @@ export const MenuPopoverLink = component$<MenuPopoverLinkProps>(
 
     const isOpenedSig = useSignal(false);
     return (
-      <>
-        <PopoverTrigger
+      <Popover.Root
+        id={`nav-menu-popover-${index}`}
+        bind:anchor={menuAnchorRef}
+        gutter={12}
+      >
+        <Popover.Trigger
           popovertarget={`nav-menu-popover-${index}`}
           class={`flex items-center font-semibold ${
             isOpenedSig.value ? 'text-primary' : 'text-white hover:text-primary'
@@ -87,13 +91,9 @@ export const MenuPopoverLink = component$<MenuPopoverLinkProps>(
               `}
             />
           </span>
-        </PopoverTrigger>
+        </Popover.Trigger>
 
-        <Popover
-          id={`nav-menu-popover-${index}`}
-          floating={true}
-          anchorRef={menuAnchorRef}
-          gutter={12}
+        <Popover.Panel
           onToggle$={event => {
             isOpenedSig.value = event.newState === 'open';
           }}
@@ -117,8 +117,8 @@ export const MenuPopoverLink = component$<MenuPopoverLinkProps>(
             </ul>
             {item.ad && <NavMenuAd ad={item.ad} />}
           </div>
-        </Popover>
-      </>
+        </Popover.Panel>
+      </Popover.Root>
     );
   }
 );

src/_shell/menu/mobile/accordion/call-to-action-accordion-item.tsx

@@ -1,6 +1,6 @@
 import type { QRL } from '@builder.io/qwik';
 import { component$ } from '@builder.io/qwik';
-import { AccordionHeader, AccordionItem } from '@qwik-ui/headless';
+import { Accordion } from '@qwik-ui/headless';
 import type { MenuEntryItem } from '../../types/entry-menu-item.type';
 
 type CallToActionAccordionItemProps = {
@@ -12,17 +12,17 @@ type CallToActionAccordionItemProps = {
 export const CallToActionAccordionItem = component$(
   ({ key, item, onItemClick$ }: CallToActionAccordionItemProps) => {
     return (
-      <AccordionItem key={key} class='py-8'>
-        <AccordionHeader>
+      <Accordion.Item key={key} class='py-8'>
+        <Accordion.Header>
           <a
             href={item.path}
             class='border-2 border-primary px-6 py-2 text-sm text-primary hover:bg-primary hover:text-secondary-950'
             onClick$={() => onItemClick$?.()}
           >
             {item.text}
           </a>
-        </AccordionHeader>
-      </AccordionItem>
+        </Accordion.Header>
+      </Accordion.Item>
     );
   }
 );

src/_shell/menu/mobile/accordion/collapsible-accordion-item.tsx

@@ -1,12 +1,7 @@
 import type { QRL } from '@builder.io/qwik';
 import { component$ } from '@builder.io/qwik';
 import { Link } from '@builder.io/qwik-city';
-import {
-  AccordionContent,
-  AccordionHeader,
-  AccordionItem,
-  AccordionTrigger
-} from '@qwik-ui/headless';
+import { Accordion } from '@qwik-ui/headless';
 import type { MenuEntryItem } from '../../types/entry-menu-item.type';
 import { CaretIcon } from '../icons';
 
@@ -19,16 +14,16 @@ type CollapsibleAccordionItemProps = {
 export const CollapsibleAccordionItem = component$(
   ({ key, item, onItemClick$ }: CollapsibleAccordionItemProps) => {
     return (
-      <AccordionItem class='border-b' key={key}>
-        <AccordionHeader as='h3'>
-          <AccordionTrigger class='group flex w-full items-center justify-between py-4 text-left'>
+      <Accordion.Item key={key} class='border-b'>
+        <Accordion.Header as='h3'>
+          <Accordion.Trigger class='group flex w-full items-center justify-between py-4 text-left'>
             <span class='font-bold text-secondary-900'>{item.text}</span>
             <span class='pl-2'>
               <CaretIcon class='ease transition-transform duration-500 group-aria-expanded:rotate-180 group-aria-expanded:transform' />
             </span>
-          </AccordionTrigger>
-        </AccordionHeader>
-        <AccordionContent class=' accordion-animation-1 overflow-hidden'>
+          </Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Content class=' accordion-animation-1 overflow-hidden'>
           <div class='grid gap-2 pb-4 pl-2'>
             {item.items?.map((category, index) => (
               <div key={`categoryItem-${index}`}>
@@ -51,8 +46,8 @@ export const CollapsibleAccordionItem = component$(
               </div>
             ))}
           </div>
-        </AccordionContent>
-      </AccordionItem>
+        </Accordion.Content>
+      </Accordion.Item>
     );
   }
 );