docs(badges): refactor badges to use fluffy

Author: maiieul

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

@@ -1,35 +1,24 @@
 import { component$ } from '@builder.io/qwik';
 import { Badge } from '@qwik-ui/fluffy';
 import { ComponentStatus } from '~/_state/component-status.type';
-import { tooltipByStatus } from '~/_state/status-tooltips';
 
 export interface StatusBadgeProps {
   status: ComponentStatus;
 }
 
 export function getClassByStatus(status: ComponentStatus) {
   switch (status) {
-    case ComponentStatus.Ready:
-      return 'text-green-900 bg-green-300 tracking-wide';
     case ComponentStatus.Beta:
-      return 'border border-primary-foreground tracking-wide bg-primary text-primary-foreground';
+      return 'secondary';
     case ComponentStatus.Draft:
-      return 'border tracking-wide bg-muted text-foreground';
+      return 'primary';
     case ComponentStatus.Planned:
-      return 'text-white bg-slate-600 dark:bg-slate-500 border tracking-wide';
+      return 'outline';
     default:
       return null;
   }
 }
 
 export const StatusBadge = component$<StatusBadgeProps>(({ status }) => {
-  return (
-    <Badge
-      title={tooltipByStatus[status]}
-      class={`rounded-lg p-3 text-lg font-bold leading-3 shadow lg:px-2 lg:py-1 lg:text-xs
-      ${getClassByStatus(status)}`}
-    >
-      {status}
-    </Badge>
-  );
+  return <Badge variant={getClassByStatus(status)}>{status}</Badge>;
 });

apps/website/src/components/code-example/code-example-container.tsx

@@ -1,62 +1,39 @@
-import {
-  QwikIntrinsicElements,
-  component$,
-  useSignal,
-  useStylesScoped$,
-} from '@builder.io/qwik';
+import { component$, useSignal, useStylesScoped$ } from '@builder.io/qwik';
 import { ComponentStatus } from '~/_state/component-status.type';
 import { getClassByStatus } from '../component-status-badge/component-status-badge';
+import { Badge } from '@qwik-ui/fluffy';
 
 export interface StatusBannerProps {
   status?: ComponentStatus;
 }
 
 function getMessageByStatus(status?: ComponentStatus) {
   switch (status) {
-    case ComponentStatus.Ready:
-      return (
-        <>
-          This component is <strong>Production Ready</strong>
-        </>
-      );
     case ComponentStatus.Beta:
       return (
         <>
           <strong>DISCLAIMER:</strong> This component is in{' '}
-          <span
-            class={`rounded-lg px-2 font-bold tracking-wide ${getClassByStatus(status)}`}
-          >
-            {status}
-          </span>{' '}
-          status. That means that it is ready for production, but the API might change.
+          <Badge variant={getClassByStatus(status)}>{status}</Badge> status. That means
+          that it is ready for production, but the API might change.
         </>
       );
     case ComponentStatus.Draft:
       return (
         <>
           <strong>WARNING:</strong> This component is in{' '}
-          <span
-            class={`rounded-lg px-2 font-bold tracking-wide ${getClassByStatus(status)}`}
-          >
-            {status}
-          </span>{' '}
-          status. This means that it is still in development and may have bugs or missing
-          features. It is not intended to be used in production. You may use it for
-          testing purposes.
+          <Badge variant={getClassByStatus(status)}>{status}</Badge> status. This means
+          that it is still in development and may have bugs or missing features. It is not
+          intended to be used in production. You may use it for testing purposes.
         </>
       );
     case ComponentStatus.Planned:
     default:
       return (
         <>
           <strong>WARNING:</strong> This component is in{' '}
-          <span
-            class={`rounded-lg px-2 font-bold tracking-wide ${getClassByStatus(
-              status || ComponentStatus.Planned,
-            )}`}
-          >
+          <Badge variant={getClassByStatus(status || ComponentStatus.Planned)}>
             {status}
-          </span>{' '}
+          </Badge>{' '}
           status. That means that it is in our backlog and we might have started working
           on it, but it is not under active development.
         </>
@@ -66,15 +43,13 @@ function getMessageByStatus(status?: ComponentStatus) {
 
 function getBackgroundByStatus(status?: ComponentStatus) {
   switch (status) {
-    case ComponentStatus.Ready:
-      return 'bg-green-300';
     case ComponentStatus.Beta:
-      return 'border border-primary';
+      return 'border border-secondary';
     case ComponentStatus.Draft:
-      return 'border';
+      return 'border border-primary';
     case ComponentStatus.Planned:
     default:
-      return 'border';
+      return 'border border-foreground';
   }
 }
 
@@ -136,7 +111,7 @@ export const StatusBanner = component$((props: StatusBannerProps) => {
   );
 });
 
-export function EpCircleCloseFilled(props: QwikIntrinsicElements['svg'], key: string) {
+export function EpCircleCloseFilled() {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

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

@@ -7,12 +7,7 @@ module.exports = {
     join(__dirname, '../../packages/kit-tailwind/src/**/*.{js,ts,jsx,tsx,mdx}'),
     join(__dirname, '../../packages/kit-fluffy/src/**/*.{js,ts,jsx,tsx,mdx}'),
   ],
-  plugins: [require('daisyui')],
   darkMode: 'class',
-  daisyui: {
-    themes: ['light', 'dark'],
-    base: true,
-  },
   theme: {
     screens: {
       sm: '640px',

apps/website/src/components/component-status-badge/component-status-badge.tsx

@@ -93,13 +93,11 @@
     "clsx": "2.0.0",
     "commitizen": "^4.3.0",
     "commitlint": "^17.7.1",
-    "country-list-json": "^1.1.0",
     "cypress": "^13.0.0",
     "cypress-axe": "1.4.0",
     "cypress-ct-qwik": "0.3.0",
     "cypress-real-events": "1.10.3",
     "cz-conventional-changelog": "^3.3.0",
-    "daisyui": "^3.6.4",
     "danger": "^11.2.8",
     "dotenv": "16.3.1",
     "eslint": "^8.48.0",
@@ -161,6 +159,15 @@
     "qwik ui components",
     "components library"
   ],
+  "dependencies": {
+    "@fontsource-variable/inter": "5.0.8",
+    "@oddbird/popover-polyfill": "0.3.7",
+    "body-scroll-lock-upgrade": "1.1.0",
+    "canvas-confetti": "1.9.2",
+    "class-variance-authority": "0.7.0",
+    "clsx": "2.0.0",
+    "tslib": "^2.6.2"
+  },
   "nx": {
     "includedScripts": []
   }