Merge branch 'add_component_switch' of https://github.com/JerryWu1234…

…/qwik-ui into add_component_switch
JerryWu1234 · Oct 15, 2024 · 6da7f8f · 6da7f8f
2 parents 75b226e + fa4d78d
commit 6da7f8f
Show file tree

Hide file tree

Showing 46 changed files with 948 additions and 916 deletions.
diff --git a/.changeset/cuddly-cups-float.md b/.changeset/cuddly-cups-float.md
@@ -0,0 +1,5 @@
+---
+'@qwik-ui/headless': patch
+---
+
+🩹 fix peer dependencies to reflect actual lowest qwik version (1.3.1) that is compatible with qwik-ui/headless
diff --git a/.changeset/cuddly-readers-invent.md b/.changeset/cuddly-readers-invent.md
@@ -0,0 +1,7 @@
+---
+'@qwik-ui/headless': patch
+---
+
+fix: packages now have a variable range of peer dependencies
+
+fix: async computed signals are now sync in preparation for v2
diff --git a/.changeset/two-jeans-share.md b/.changeset/two-jeans-share.md
diff --git a/README.md b/README.md
diff --git a/apps/component-tests/src/global.css b/apps/component-tests/src/global.css
@@ -1244,11 +1244,19 @@
 
   *::-webkit-scrollbar-thumb {
     /* Thumb color */
-    background-color: var(--qwikui-slate-500);
+    background-color: hsla(var(--foreground) / 0.25);
     border-radius: 0.5rem;
     background-clip: padding-box;
-    border-left: 0.3rem solid transparent;
-    border-right: 0.3rem solid transparent;
+    border-left: 0.15rem solid transparent;
+    border-right: 0.15rem solid transparent;
+  }
+
+  .navigation-docs::-webkit-scrollbar-thumb {
+    background-color: hsla(var(--foreground) / 0.1);
+  }
+
+  .dark .navigation-docs::-webkit-scrollbar-thumb {
+    background-color: hsla(var(--foreground) / 0.2);
   }
 
   *::-webkit-scrollbar-corner {
@@ -1260,8 +1268,17 @@
     border-left: 1px solid var(--qwikui-slate-300);
   }
 
-  .dark *::-webkit-scrollbar-thumb {
-    background-color: var(--qwikui-slate-500);
+  .toc-scrollbar::-webkit-scrollbar-track,
+  .dark .toc-scrollbar::-webkit-scrollbar-track {
+    border-color: transparent;
+  }
+
+  .toc-scrollbar::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+
+  .toc-scrollbar:hover.toc-scrollbar::-webkit-scrollbar-thumb {
+    background-color: hsla(var(--foreground) / 0.15);
   }
 
   .dark *::-webkit-scrollbar-track {
@@ -1276,7 +1293,7 @@
   }
 
   .code-example *::-webkit-scrollbar-thumb {
-    background: var(--qwikui-slate-500);
+    background-color: var(--qwikui-slate-600);
     border-radius: 0.5rem;
     background-clip: padding-box;
   }
@@ -1294,6 +1311,10 @@
   .dark .note-link a {
     border-bottom: 1px solid white !important;
   }
+
+  .gif-container {
+    border-radius: var(--border-radius);
+  }
 }
 
 :root {

diff --git a/apps/component-tests/src/root.tsx b/apps/component-tests/src/root.tsx
@@ -1,13 +1,25 @@
-import { component$, useStyles$ } from '@builder.io/qwik';
 import {
-  QwikCityProvider,
-  RouterOutlet,
-  ServiceWorkerRegister,
-} from '@builder.io/qwik-city';
-import { RouterHead } from './components/router-head/router-head';
+  component$, useStyles$,
+  PrefetchGraph,
+  PrefetchServiceWorker
+} from '@builder.io/qwik';
+import { QwikCityProvider, RouterOutlet } from '@builder.io/qwik-city';
 
+import { RouterHead } from './components/router-head/router-head';
 import globalStyles from './global.css?inline';
 
+import { ThemeProvider } from '@qwik-ui/themes';
+
+import '@fontsource-variable/inter';
+import {
+  ThemeBaseColors,
+  ThemeBorderRadiuses,
+  ThemeFonts,
+  ThemeModes,
+  ThemePrimaryColors,
+  ThemeStyles,
+} from '@qwik-ui/utils';
+
 export default component$(() => {
   /**
    * The root of a QwikCity site always start with the <QwikCityProvider> component,
@@ -17,16 +29,31 @@ export default component$(() => {
    */
   useStyles$(globalStyles);
 
+
   return (
     <QwikCityProvider>
       <head>
-        <meta charSet="utf-8" />
+        <meta charset="utf-8" />
         <link rel="manifest" href="/manifest.json" />
         <RouterHead />
       </head>
       <body lang="en">
-        <RouterOutlet />
-        <ServiceWorkerRegister />
+        <PrefetchGraph />
+        <PrefetchServiceWorker />
+        <ThemeProvider
+          attribute="class"
+          enableSystem={false}
+          themes={[
+            ...Object.values(ThemeFonts),
+            ...Object.values(ThemeModes),
+            ...Object.values(ThemeStyles),
+            ...Object.values(ThemeBaseColors),
+            ...Object.values(ThemePrimaryColors),
+            ...Object.values(ThemeBorderRadiuses),
+          ]}
+        >
+          <RouterOutlet />
+        </ThemeProvider>
       </body>
     </QwikCityProvider>
   );

diff --git a/apps/website/auto-api.ts b/apps/website/auto-api.ts
@@ -1,6 +1,41 @@
 import * as fs from 'fs';
 import { resolve } from 'path';
 import { ViteDevServer } from 'vite';
+import { default as Parser, Query } from 'tree-sitter';
+import { default as TS } from 'tree-sitter-typescript';
+const parser = new Parser();
+
+/**
+TO WHOM IT MAY CONCERN:
+
+if by some reason you need to refactor the query below and don't know where to starts, below are what I consider to be the must-know parts.
+
+1) Tree-Sitter query docs: https://tree-sitter.github.io/tree-sitter/using-parsers#query-syntax
+1b) Put particular attention to the following sections: capturing nodes, wildcard nodes, and anchors
+
+2) Have a way of being able to see the tree-sitter AST in realtime. The ideal setup comes included in Neovim. In ex mode, simply run
+the command below and you'll have the file's AST viewer open in realtime: InspectTree
+**/
+
+const query = new Query(
+  TS.tsx,
+  `declaration: (type_alias_declaration
+  name: (type_identifier) @subComponentName
+    (intersection_type
+    (object_type
+
+      (comment) @comment
+      .
+      (property_signature
+          name: (_) @prop
+          type: (type_annotation (_) @type)
+      )
+    )
+  )
+)
+`,
+);
+parser.setLanguage(TS.tsx);
 export default function autoAPI() {
   return {
     name: 'watch-monorepo-changes',
@@ -15,9 +50,9 @@ export default function autoAPI() {
   };
 }
 // the object should have this general structure, arranged from parent to child
-// componentName:[subComponent,subcomponent,...]
-// subComponentName:[publicType,publicType,...]
-// publicType:[{ comment,prop,type },{ comment,prop,type },...]
+// componentName:[subComponent,subcomponent,...] & componentName comes from the dir
+// subComponentName/type alias:[publicType,publicType,...] & subcomponent comes from the file under dir
+// publicType:[{ comment,prop,type },{ comment,prop,type },...] & publicType comes from type inside file
 // THEY UPPER-MOST KEY IS ALWAYS USED AS A HEADING
 export type ComponentParts = Record<string, SubComponents>;
 type SubComponents = SubComponent[];
@@ -28,51 +63,57 @@ type ParsedProps = {
   prop: string;
   type: string;
 };
-function parseSingleComponentFromDir(path: string, ref: SubComponents) {
+function parseSingleComponentFromDir(
+  path: string,
+  ref: SubComponents,
+): SubComponents | undefined {
   const component_name = /\/([\w-]*).tsx/.exec(path);
   if (component_name === null || component_name[1] === null) {
     // may need better behavior
     return;
   }
   const sourceCode = fs.readFileSync(path, 'utf-8');
-  const comments = extractPublicTypes(sourceCode);
+  const tree = parser.parse(sourceCode);
   const parsed: PublicType[] = [];
-  for (const comment of comments) {
-    const api = extractComments(comment.string);
-    const pair: PublicType = { [comment.label]: api };
-    parsed.push(pair);
+  function topKey(obj: { [x: string]: any } | undefined) {
+    return obj ? Object.keys(obj)[0] : '';
   }
+  const matches = query.matches(tree.rootNode);
+  matches.forEach((match) => {
+    const last: PublicType = parsed[parsed.length - 1];
+    let subComponentName = '';
+    const parsedProps: ParsedProps = { comment: '', prop: '', type: '' };
+    match.captures.forEach((lol) => {
+      //statetements are ordered as they appear in capture array
+      if (lol.name === 'subComponentName' && subComponentName != lol.node.text) {
+        subComponentName = lol.node.text;
+      }
+      if (lol.name === 'comment') {
+        //this removes the comment syntax
+        const justText = lol.node.text.replaceAll(/[/*]/g, '');
+        parsedProps.comment = justText;
+      }
+
+      if (lol.name === 'prop') {
+        parsedProps.prop = lol.node.text;
+      }
+
+      if (lol.name === 'type') {
+        parsedProps.type = lol.node.text;
+        if (subComponentName === topKey(last)) {
+          last[topKey(last)].push(parsedProps);
+        } else {
+          parsed.push({ [subComponentName]: [parsedProps] });
+        }
+      }
+    });
+  });
+
   const completeSubComponent: SubComponent = { [component_name[1]]: parsed };
   ref.push(completeSubComponent);
   return ref;
 }
 
-function extractPublicTypes(strg: string) {
-  const getPublicTypes = /type Public([A-Z][\w]*)*[\w\W]*?{([\w|\W]*?)}(;| &)/gm;
-  const cms = [];
-  let groups;
-  while ((groups = getPublicTypes.exec(strg)) !== null) {
-    const string = groups[2];
-    cms.push({ label: groups[1], string });
-  }
-  return cms;
-}
-function extractComments(strg: string): ParsedProps[] {
-  const magical_regex =
-    /^\s*?\/[*]{2}\n?([\w|\W|]*?)\s*[*]{1,2}[/]\n[ ]*([\w|\W]*?): ([\w|\W]*?);?$/gm;
-
-  const cms = [];
-  let groups;
-
-  while ((groups = magical_regex.exec(strg)) !== null) {
-    const trimStart = /^ *|(\* *)/g;
-    const comment = groups[1].replaceAll(trimStart, '');
-    const prop = groups[2];
-    const type = groups[3];
-    cms.push({ comment, prop, type });
-  }
-  return cms;
-}
 function writeToDocs(fullPath: string, componentName: string, api: ComponentParts) {
   if (fullPath.includes('kit-headless')) {
     const relDocPath = `../website/src/routes//docs/headless/${componentName}`;

diff --git a/apps/website/public/robots.txt b/apps/website/public/robots.txt
@@ -0,0 +1,6 @@
+User-agent: *
+Allow: /
+
+# Algolia-Crawler-Verif: B07EC35A2AC0DA67
+
+Sitemap: https://qwikui.com/sitemap.xml
diff --git a/apps/website/src/_state/component-statuses.ts b/apps/website/src/_state/component-statuses.ts
@@ -11,43 +11,13 @@ export type ComponentKitsStatuses = {
 
 export const statusByComponent: ComponentKitsStatuses = {
   styled: {
-    Accordion: ComponentStatus.Beta,
-    Avatar: ComponentStatus.Draft,
-    Alert: ComponentStatus.Beta,
-    Badge: ComponentStatus.Beta,
-    Breadcrumb: ComponentStatus.Draft,
-    Button: ComponentStatus.Beta,
-    Card: ComponentStatus.Beta,
     Checkbox: ComponentStatus.Draft,
-    Combobox: ComponentStatus.Draft,
     Dropdown: ComponentStatus.Draft,
-    Input: ComponentStatus.Draft,
-    Label: ComponentStatus.Beta,
-    Modal: ComponentStatus.Draft,
-    Pagination: ComponentStatus.Draft,
-    Popover: ComponentStatus.Draft,
-    Progress: ComponentStatus.Draft,
     RadioGroup: ComponentStatus.Draft,
-    Select: ComponentStatus.Draft,
-    Separator: ComponentStatus.Beta,
-    Skeleton: ComponentStatus.Beta,
-    Tabs: ComponentStatus.Beta,
-    Toggle: ComponentStatus.Draft,
-    ToggleGroup: ComponentStatus.Draft,
-    Textarea: ComponentStatus.Draft,
   },
   headless: {
-    Carousel: ComponentStatus.Beta,
-    Combobox: ComponentStatus.Beta,
     Checkbox: ComponentStatus.Draft,
     Dropdown: ComponentStatus.Draft,
-    Label: ComponentStatus.Beta,
     Pagination: ComponentStatus.Draft,
-    Progress: ComponentStatus.Beta,
-    Select: ComponentStatus.Beta,
-    Tabs: ComponentStatus.Beta,
-    Toggle: ComponentStatus.Beta,
-    'Toggle Group': ComponentStatus.Beta,
-    Tooltip: ComponentStatus.Beta,
   },
 };