refactor(portals and deprecated autocomplete): portal support and autocomplete deprecated

Author: thejackshelton

.all-contributorsrc

@@ -314,6 +314,18 @@
         "test",
         "doc"
       ]
+    },
+    {
+      "login": "Zankel-Engineering",
+      "name": "Zankel-Engineering",
+      "avatar_url": "https://avatars.githubusercontent.com/u/43412711?v=4",
+      "profile": "http://zankel-engineering.de",
+      "contributions": [
+        "code",
+        "test",
+        "bug",
+        "a11y"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.husky/commit-msg

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx --no-install commitlint --edit $1
+pnpm exec commitlint --edit $1

.prettierignore

@@ -5,4 +5,5 @@
 dist
 node_modules
 coverage
-**/*.mdx
+**/*.mdx
+discussion

README.md

@@ -119,6 +119,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     </tr>
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/wmertens"><img src="https://avatars.githubusercontent.com/u/54934?v=4?s=100" width="100px;" alt="Wout Mertens"/><br /><sub><b>Wout Mertens</b></sub></a><br /><a href="https://github.com/qwikifiers/qwik-ui/commits?author=wmertens" title="Code">💻</a> <a href="#research-wmertens" title="Research">🔬</a> <a href="#ideas-wmertens" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/qwikifiers/qwik-ui/commits?author=wmertens" title="Tests">⚠️</a> <a href="https://github.com/qwikifiers/qwik-ui/commits?author=wmertens" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://zankel-engineering.de"><img src="https://avatars.githubusercontent.com/u/43412711?v=4?s=100" width="100px;" alt="Zankel-Engineering"/><br /><sub><b>Zankel-Engineering</b></sub></a><br /><a href="https://github.com/qwikifiers/qwik-ui/commits?author=Zankel-Engineering" title="Code">💻</a> <a href="https://github.com/qwikifiers/qwik-ui/commits?author=Zankel-Engineering" title="Tests">⚠️</a> <a href="https://github.com/qwikifiers/qwik-ui/issues?q=author%3AZankel-Engineering" title="Bug reports">🐛</a> <a href="#a11y-Zankel-Engineering" title="Accessibility">️️️️♿️</a></td>
     </tr>
   </tbody>
 </table>

apps/website/package.json

@@ -3,9 +3,9 @@
   "description": "The Qwik UI Website",
   "private": true,
   "dependencies": {
-    "@qwik-ui/headless": "file:../../dist/packages/kit-headless",
-    "@qwik-ui/tailwind": "file:../../dist/packages/kit-tailwind",
-    "@qwik-ui/material": "file:../../dist/packages/kit-material",
-    "@qwik-ui/primitives": "file:../../dist/packages/primitives"
+    "@qwik-ui/headless": "workspace:*",
+    "@qwik-ui/tailwind": "workspace:*",
+    "@qwik-ui/material": "workspace:*",
+    "@qwik-ui/primitives": "workspace:*"
   }
 }

apps/website/src/_state/component-statuses.ts

@@ -40,8 +40,8 @@ export const statusByComponent: ComponentKitsStatuses = {
   },
   headless: {
     Accordion: ComponentStatus.Beta,
-    Combobox: ComponentStatus.Draft,
     Carousel: ComponentStatus.Planned,
+    Combobox: ComponentStatus.Draft,
     Popover: ComponentStatus.Draft,
     Select: ComponentStatus.Draft,
     Tabs: ComponentStatus.Beta,

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

@@ -9,7 +9,7 @@ export default component$(() => {
         <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,{' '}
-          <mark class="text-purple-300 bg-transparent">
+          <mark class="text-purple-500 dark:text-purple-300 bg-transparent">
             including members from the Qwik team
           </mark>
           , Qwik UI offers an open-source solution for building instant loading and
@@ -20,7 +20,9 @@ export default component$(() => {
         <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>{' '}
+          <mark class="text-purple-500 dark: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
@@ -34,11 +36,11 @@ export default component$(() => {
           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">
+          <mark class="text-purple-500 dark:text-purple-300 bg-transparent">
             delivers an amazing user experience
           </mark>{' '}
           but also helps{' '}
-          <mark class="text-purple-300 bg-transparent">
+          <mark class="text-purple-500 dark: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,
@@ -49,7 +51,7 @@ export default component$(() => {
         <p class="text-lg mb-16">
           In addition to performance and SEO advantages, Qwik UI components are designed
           with accessibility in mind.{' '}
-          <mark class="text-purple-300 bg-transparent">
+          <mark class="text-purple-500 dark: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
@@ -59,9 +61,11 @@ export default component$(() => {
         <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.
+          <mark class="text-purple-500 dark: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

apps/website/src/routes/docs.css

@@ -3,9 +3,9 @@
     @apply lg:ml-80 w-full lg:max-w-4xl xl:max-w-6xl py-8 px-8 lg:px-16;
   }
 
-  /* 
+  /*
     Styles that are direct descendents of .docs
-    this should not affect the styles inside of the tabpanel 
+    this should not affect the styles inside of the tabpanel
     A.K.A the components
   */
   & > {
@@ -31,11 +31,11 @@
     }
 
     h3 {
-      @apply text-xl font-bold  mb-6;
+      @apply text-xl font-bold mt-4 mb-6;
     }
 
     h4 {
-      @apply text-lg mb-6;
+      @apply text-lg mt-4 mb-6;
     }
 
     h5 {

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

@@ -12,14 +12,14 @@ type APITableProps = {
 export const APITable = component$(({ propDescriptors }: APITableProps) => {
   return (
     <div class="overflow-auto">
-      <table class="w-full min-w-[540px] border-b border-gray-700 text-left sm:min-w-full">
+      <table class="w-full min-w-[540px] border-b border-gray-700 text-left sm:min-w-full mb-6">
         <tbody class="divide-y divide-gray-700">
           <tr class="w-1/4 dark:text-white ">
             <td class="w-1/6 whitespace-nowrap py-2 pl-4 text-sm font-medium sm:pl-0">
               Prop
             </td>
             <td class="w-1/6 whitespace-nowrap py-2 text-sm font-medium ">Type</td>
-            <td class="w-2/3 whitespace-nowrap py-2 text-sm font-medium ">Description</td>
+            <td class="w-2/3 whitespace-nowrap p-2 text-sm font-medium ">Description</td>
           </tr>
           {propDescriptors?.map((propDescriptor) => {
             return (
@@ -37,12 +37,12 @@ export const APITable = component$(({ propDescriptors }: APITableProps) => {
                     {propDescriptor.info && (
                       <Popover placement="top">
                         <PopoverContent>
-                          <div class="bg-[#202425] text-[#7881fa] max-w-xs mb-2 text-md px-4 py-2  rounded-md">
+                          <div class="bg-[#202425] text-[#7881fa] max-w-xs mb-2 text-md px-4 py-2  rounded-md sm:w-max">
                             {propDescriptor?.info}
                           </div>
                         </PopoverContent>
                         <PopoverTrigger>
-                          <div class="hover:bg-slate-500 hover:bg-opacity-50 h-[31px] mt-2 p-2 rounded-md">
+                          <div class="hover:bg-slate-500 hover:bg-opacity-50 mt-2 p-1 rounded-md mx-2 rounded-xl">
                             <svg
                               width="15"
                               height="15"
@@ -66,7 +66,7 @@ export const APITable = component$(({ propDescriptors }: APITableProps) => {
                   </span>
                 </td>
                 <td class="py-3 align-baseline">
-                  <div class="prose prose-sm prose-docs-table">
+                  <div class="prose prose-sm prose-docs-table px-2">
                     <p>{propDescriptor.description}</p>
                   </div>
                 </td>