Merge pull request #590 from maiieul/1.3.2-cleanup

1.3.2 cleanup

Author: thejackshelton

CODING_STANDARDS.md

@@ -50,14 +50,14 @@ export type TooltipProps = {
 };
 ```
 
-Note: if you want to include the HTML attributes, you can use the `QwikIntrinsicElements` type from `@builder.io/qwik` package and extend it with the [intersection type](https://www.typescriptlang.org/docs/handbook/2/objects.html#intersection-types).
+Note: if you want to include the HTML attributes, you can use the `PropsOf` type.
 
 Example:
 
 ```ts
-import { QwikIntrinsicElements } from '@builder.io/qwik';
+import { PropsOf } from '@builder.io/qwik';
 
-export type TooltipProps = QwikIntrinsicElements['div'] & {
+export type TooltipProps = PropsOf<'div'> & {
   tip: string;
   type?: ColorTypes;
   position?: Positions;
@@ -107,7 +107,7 @@ return (
 ## Example of headless button customization with Tailwind
 
 ```tsx
-import { component$, QwikIntrinsicElements, Slot } from '@builder.io/qwik';
+import { component$, Slot } from '@builder.io/qwik';
 import { Button as HeadlessButton, ButtonProps as ButtonHeadlessProps } from '@qwik-ui/headless';
 
 type TailwindButtonProps = { size?: 'sm' | 'md', ... };

apps/website/src/_state/component-status.type.ts

@@ -1,6 +1,4 @@
 export enum ComponentStatus {
-  Ready = 'Ready',
   Beta = 'Beta',
   Draft = 'Draft',
-  Planned = 'Planned',
 }

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

@@ -11,47 +11,20 @@ export type ComponentKitsStatuses = {
 
 export const statusByComponent: ComponentKitsStatuses = {
   fluffy: {
-    Accordion: ComponentStatus.Planned,
-    Alert: ComponentStatus.Planned,
-    Badge: ComponentStatus.Planned,
-    Breadcrumb: ComponentStatus.Planned,
+    Badge: ComponentStatus.Beta,
     Button: ComponentStatus.Beta,
-    'Button Group': ComponentStatus.Planned,
-    Card: ComponentStatus.Planned,
-    Carousel: ComponentStatus.Planned,
-    Checkbox: ComponentStatus.Planned,
-    Combobox: ComponentStatus.Planned,
-    Drawer: ComponentStatus.Planned,
-    Input: ComponentStatus.Planned,
-    'Input Phone': ComponentStatus.Planned,
-    'Navigation Bar': ComponentStatus.Planned,
-    Modal: ComponentStatus.Planned,
     Pagination: ComponentStatus.Draft,
-    Popover: ComponentStatus.Planned,
-    Progress: ComponentStatus.Planned,
-    Radio: ComponentStatus.Planned,
-    Rating: ComponentStatus.Planned,
-    Select: ComponentStatus.Planned,
-    Slider: ComponentStatus.Planned,
-    Spinner: ComponentStatus.Planned,
-    Tabs: ComponentStatus.Planned,
-    Toast: ComponentStatus.Planned,
-    Toggle: ComponentStatus.Planned,
-    Tooltip: ComponentStatus.Planned,
   },
   headless: {
     Accordion: ComponentStatus.Beta,
-    Carousel: ComponentStatus.Planned,
     Collapsible: ComponentStatus.Draft,
     Combobox: ComponentStatus.Beta,
-    Dialog: ComponentStatus.Planned,
     Modal: ComponentStatus.Beta,
     Pagination: ComponentStatus.Draft,
     Popover: ComponentStatus.Beta,
     Select: ComponentStatus.Draft,
     Separator: ComponentStatus.Beta,
     Tabs: ComponentStatus.Beta,
-    Toggle: ComponentStatus.Planned,
     Tooltip: ComponentStatus.Draft,
   },
 };

apps/website/src/_state/status-tooltips.ts

@@ -28,9 +28,11 @@ export const AnatomyTable = component$(
               return (
                 <tr key={propDescriptor.name}>
                   <td class="align-center py-3 pl-2 pr-2 sm:pl-0 md:align-baseline">
-                    <code class="border-primary text-accent-foreground mr-6 rounded border border-b-2">
-                      {propDescriptor.name}
-                    </code>
+                    <div class="flex items-center gap-2">
+                      <code class="border-primary text-accent-foreground mr-6 rounded border border-b-2 px-2">
+                        {propDescriptor.name}
+                      </code>
+                    </div>
                   </td>
                   <td class="py-3 align-baseline">
                     <div class="prose-docs-table">

apps/website/src/components/anatomy-table/anatomy-table.tsx

@@ -26,10 +26,12 @@ export const APITable = component$(({ propDescriptors }: APITableProps) => {
           {propDescriptors?.map((propDescriptor) => {
             return (
               <tr key={propDescriptor.name}>
-                <td class="prose prose-sm py-3 pl-4 sm:pl-0 ">
-                  <code class="border-primary mr-6 rounded-md border border-b-[2px]">
-                    {propDescriptor.name}
-                  </code>
+                <td class="py-3 pl-4 sm:pl-0">
+                  <div class="flex items-center gap-2">
+                    <code class="border-primary mr-6 rounded-md border border-b-[2px] px-2">
+                      {propDescriptor.name}
+                    </code>
+                  </div>
                 </td>
                 <td class="py-3">
                   <div class="flex items-center gap-2">

apps/website/src/components/api-table/api-table.tsx

@@ -1,5 +1,5 @@
 import { cn } from '@qwik-ui/utils';
-import { PropsOf, QwikIntrinsicElements, component$, useSignal } from '@builder.io/qwik';
+import { PropsOf, component$, useSignal } from '@builder.io/qwik';
 import { Button } from '@qwik-ui/fluffy';
 import copy from 'clipboard-copy';
 
@@ -32,7 +32,7 @@ export const CodeCopy = component$(({ code = '', class: outsideClass, ...props }
   );
 });
 
-export function CopyIcon(props: QwikIntrinsicElements['svg'], key: string) {
+export function CopyIcon(props: PropsOf<'svg'>, key: string) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -54,7 +54,7 @@ export function CopyIcon(props: QwikIntrinsicElements['svg'], key: string) {
   );
 }
 
-export function ClipboardCheck(props: QwikIntrinsicElements['svg'], key: string) {
+export function ClipboardCheck(props: PropsOf<'svg'>, key: string) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

apps/website/src/components/code-copy/code-copy.tsx

@@ -1,4 +1,4 @@
-import { QwikIntrinsicElements, component$, useSignal, useTask$ } from '@builder.io/qwik';
+import { PropsOf, component$, useSignal, useTask$ } from '@builder.io/qwik';
 import { useLocation } from '@builder.io/qwik-city';
 import { isDev } from '@builder.io/qwik/build';
 import { Highlight } from '../highlight/highlight';
@@ -14,7 +14,7 @@ const codeSnippets: any = import.meta.glob('/src/routes/docs/**/**/snippets/*',
   eager: isDev ? false : true,
 });
 
-type CodeSnippetProps = QwikIntrinsicElements['div'] & {
+type CodeSnippetProps = PropsOf<'div'> & {
   name: string;
 };