Merge pull request #387 from qwikifiers/pr-statuses

Author: shairez

README.md

@@ -35,34 +35,34 @@
 
 </details>
 
-## ⚠ This is not ready for production!
-
-This library is still in early stages and once we'll collect enough feedback from the community we'll release the first beta version.
-
-### ROADMAP
-
-- [ ] Deploy the documentation site
-  - [ ] Add "Readiness" statuses to the components
-  - [ ] Add a getting started video tutorial
-  - [ ] Make a public storybook url
-- [ ] Deploy the tailwind-kit package
-- [ ] Cover all of the components with storybook tests
-- [ ] Add testing coverage reports
-- [ ] Add a contribution tutorial video
-
 <br/>
 
 ## Installation of the headless components
 
-> Please create issue if you encounter bugs.
-
 ```console
 
 npm install -D @qwik-ui/headless
 ```
 
 <br/>
 
+## Components Status
+
+### Headless Kit
+
+| Component                                                     | Planned | Draft (Alpha) | Beta | Stable |
+| :------------------------------------------------------------ | :-----: | ------------- | ---- | ------ |
+| [Accordion](https://qwikui.com/docs/headless/accordion)       |         |               | ✅   |        |
+| [Autocomplete](https://qwikui.com/docs/headless/autocomplete) |         | ✅            |      |        |
+| Carousel                                                      |   ✅    |               |      |        |
+| Dialog                                                        |   ✅    |               |      |        |
+| Pagination                                                    |   ✅    |               |      |        |
+| [Popover](https://qwikui.com/docs/headless/popover)           |         | ✅            |      |        |
+| [Select](https://qwikui.com/docs/headless/select)             |         | ✅            |      |        |
+| [Tabs](https://qwikui.com/docs/headless/tabs)                 |         |               | ✅   |        |
+| [Toggle](https://qwikui.com/docs/headless/toggle)             |   ✅    |               |      |        |
+| [Tooltip](https://qwikui.com/docs/headless/tooltip)           |         | ✅            |      |        |
+
 ## Contributing
 
 Want to contribute? Yayy! 🎉

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

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

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

@@ -1,51 +1,51 @@
-export type BadgeStatus = 'Ready' | 'Draft' | 'Planned';
+import { ComponentStatus } from './component-status.type';
 
 export interface ComponentsStatusesMap {
-  [key: string]: BadgeStatus;
+  [key: string]: ComponentStatus;
 }
 
 export type ComponentKitsStatuses = {
   tailwind: ComponentsStatusesMap;
   headless: ComponentsStatusesMap;
 };
 
-export const componentsStatuses: ComponentKitsStatuses = {
+export const statusByComponent: ComponentKitsStatuses = {
   tailwind: {
-    Accordion: 'Planned',
-    Alert: 'Planned',
-    Badge: 'Planned',
-    Breadcrumb: 'Planned',
-    Button: 'Planned',
-    'Button Group': 'Planned',
-    Card: 'Planned',
-    Carousel: 'Planned',
-    Checkbox: 'Planned',
-    Collapse: 'Planned',
-    Drawer: 'Planned',
-    Input: 'Planned',
-    'Input Phone': 'Planned',
-    'Navigation Bar': 'Planned',
-    Pagination: 'Planned',
-    Popover: 'Planned',
-    Progress: 'Planned',
-    Radio: 'Planned',
-    Rating: 'Planned',
-    Select: 'Planned',
-    Slider: 'Planned',
-    Spinner: 'Planned',
-    Tabs: 'Planned',
-    Toast: 'Planned',
-    Toggle: 'Planned',
-    Tooltip: 'Planned'
+    Accordion: ComponentStatus.Planned,
+    Alert: ComponentStatus.Planned,
+    Badge: ComponentStatus.Planned,
+    Breadcrumb: ComponentStatus.Planned,
+    Button: ComponentStatus.Planned,
+    'Button Group': ComponentStatus.Planned,
+    Card: ComponentStatus.Planned,
+    Carousel: ComponentStatus.Planned,
+    Checkbox: ComponentStatus.Planned,
+    Collapse: ComponentStatus.Planned,
+    Drawer: ComponentStatus.Planned,
+    Input: ComponentStatus.Planned,
+    'Input Phone': ComponentStatus.Planned,
+    'Navigation Bar': ComponentStatus.Planned,
+    Pagination: ComponentStatus.Planned,
+    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: 'Ready',
-    Autocomplete: 'Draft',
-    Carousel: 'Planned',
-    Popover: 'Planned',
-    Select: 'Draft',
-    Tabs: 'Ready',
-    Toggle: 'Planned',
-    Tooltip: 'Planned'
+    Accordion: ComponentStatus.Beta,
+    Autocomplete: ComponentStatus.Draft,
+    Carousel: ComponentStatus.Planned,
+    Popover: ComponentStatus.Draft,
+    Select: ComponentStatus.Draft,
+    Tabs: ComponentStatus.Beta,
+    Toggle: ComponentStatus.Planned,
+    Tooltip: ComponentStatus.Draft
   }
 };

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

@@ -0,0 +1,10 @@
+import { ComponentStatus } from './component-status.type';
+
+export const tooltipByStatus = {
+  [ComponentStatus.Ready]: 'This component is ready production.',
+  [ComponentStatus.Beta]:
+    'This component is ready for production, but the API might change.',
+  [ComponentStatus.Draft]:
+    'This component is still in development and may have bugs or missing features.',
+  [ComponentStatus.Planned]: 'This component is planned for development.'
+};

apps/website/src/routes/docs/_components/alpha-banner/alpha-banner.tsx

@@ -1,23 +1,33 @@
 import { component$ } from '@builder.io/qwik';
 import { Badge } from '@qwik-ui/tailwind';
-import { BadgeStatus } from '../../../../_state/component-statuses';
+import { ComponentStatus } from '../../../../_state/component-status.type';
+import { tooltipByStatus } from '../../../../_state/status-tooltips';
 
 export interface StatusBadgeProps {
-  status: BadgeStatus;
+  status: ComponentStatus;
+}
+
+export function getClassByStatus(status: ComponentStatus) {
+  switch (status) {
+    case ComponentStatus.Ready:
+      return 'text-green-900 bg-green-300';
+    case ComponentStatus.Beta:
+      return 'dark:text-blue-900 dark:bg-blue-300 bg-purple-300 text-purple-900';
+    case ComponentStatus.Draft:
+      return 'text-amber-900 bg-amber-300';
+    case ComponentStatus.Planned:
+      return 'text-slate-900 bg-slate-300';
+    default:
+      return null;
+  }
 }
 
 export const StatusBadge = component$<StatusBadgeProps>(({ status }) => {
   return (
     <Badge
-      class={`text-lg lg:text-xs leading-3 font-medium rounded-full p-3 lg:py-1 lg:px-2 ${
-        status === 'Ready'
-          ? 'text-green-900 bg-green-300'
-          : status === 'Draft'
-          ? 'text-amber-900 bg-amber-300'
-          : status === 'Planned'
-          ? 'text-slate-900 bg-slate-300'
-          : null
-      }`}
+      title={tooltipByStatus[status]}
+      class={`text-lg lg:text-xs leading-3 font-medium rounded-full p-3 lg:py-1 lg:px-2 
+      ${getClassByStatus(status)}`}
     >
       {status}
     </Badge>

apps/website/src/routes/docs/_components/component-status-badge/component-status-badge.tsx

@@ -1,7 +1,7 @@
 import { component$ } from '@builder.io/qwik';
+import { ComponentStatus } from 'apps/website/src/_state/component-status.type';
 import { KitName } from 'apps/website/src/_state/kit-name.type';
 import { useRootStore } from 'apps/website/src/_state/use-root-store';
-import { BadgeStatus } from '../../../../_state/component-statuses';
 import { useSelectedKit } from '../../use-selected-kit';
 import { StatusBadge } from '../component-status-badge/component-status-badge';
 
@@ -13,7 +13,7 @@ export interface LinkGroup {
 export interface LinkProps {
   name: string;
   href?: string;
-  status?: BadgeStatus;
+  status?: ComponentStatus;
 }
 
 export interface DocsNavigationProps {

apps/website/src/routes/docs/_components/navigation-docs/navigation-docs.tsx

@@ -0,0 +1,54 @@
+.normal-state {
+  transition: margin-top 0.5s ease;
+}
+
+/* 
+  if you see these media queries I'm sorry xd. Normally, you would use a transform here, since it reflects the elements size, but margin-top affects the siblig elements, and is the only way I can animate the upwards slide (without JS) in this component.
+
+  I could do it with JS using RequestAnimationFrame
+  -Jack 
+*/
+
+.fade {
+  animation: fadeOut 0.5s ease forwards;
+  margin-top: -256px;
+}
+
+@media (min-width: 336px) {
+  .fade {
+    margin-top: -232px;
+  }
+}
+
+@media (min-width: 365px) {
+  .fade {
+    margin-top: -208px;
+  }
+}
+
+@media (min-width: 405px) {
+  .fade {
+    margin-top: -184px;
+  }
+}
+
+@media (min-width: 479px) {
+  .fade {
+    margin-top: -160px;
+  }
+}
+
+@media (min-width: 812px) {
+  .fade {
+    margin-top: -112px;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}