Merge pull request #190 from qwikerx/feat/fathom

feat: add fathom script to become official, add theme to Drawer

apps/web/src/routes/docs/index.tsx

@@ -1,5 +1,5 @@
-import { component$ } from '@builder.io/qwik'
+import { RequestHandler } from '@builder.io/qwik-city'
 
-export default component$(() => {
-  return <p>Docs</p>
-})
+export const onRequest: RequestHandler = (event) => {
+  throw event.redirect(301, '/docs/getting-started/introduction')
+}

apps/web/src/routes/docs/layout.tsx

@@ -131,6 +131,18 @@ window.gtag('config', 'G-78YXL53K0Y');
             },
           ]
         : []),
+      ...(import.meta.env.PROD
+        ? [
+            {
+              props: {
+                defer: true,
+                type: 'text/partytown',
+                src: 'https://cdn.usefathom.com/script.js',
+                ['data-site']: 'ICKPULKH',
+              },
+            },
+          ]
+        : []),
     ],
   }
 }

apps/web/src/routes/index.tsx

@@ -41,4 +41,40 @@ export default component$(() => {
 export const head = () => ({
   title: 'Flowbite Qwik - UI Component Library',
   meta: [{ name: 'description', content: '⚡ Flowbite Qwik, component library based on Tailwind CSS' }],
+  scripts: [
+    ...(import.meta.env.PROD
+      ? [
+          {
+            props: {
+              async: true,
+              type: 'text/partytown',
+              src: 'https://www.googletagmanager.com/gtag/js?id=G-78YXL53K0Y',
+            },
+          },
+          {
+            props: {
+              type: 'text/partytown',
+            },
+            script: `
+window.dataLayer = window.dataLayer || [];
+window.gtag = function (){dataLayer.push(arguments);}
+window.gtag('js', new Date());
+window.gtag('config', 'G-78YXL53K0Y');
+`,
+          },
+        ]
+      : []),
+    ...(import.meta.env.PROD
+      ? [
+          {
+            props: {
+              defer: true,
+              type: 'text/partytown',
+              src: 'https://cdn.usefathom.com/script.js',
+              ['data-site']: 'ICKPULKH',
+            },
+          },
+        ]
+      : []),
+  ],
 })

packages/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-qwik",
-  "version": "0.36.2",
+  "version": "0.37.0",
   "description": "Unofficial Qwik components built for Flowbite and Tailwind CSS",
   "keywords": [
     "design-system",

packages/lib/src/components/Button/Button.tsx

@@ -85,7 +85,6 @@ export const Button = component$<ButtonProps>(
         target={href ? attrs.target : undefined}
         //@ts-expect-error does not exist on other elements
         disabled={!href && ButtonComponent === 'button' ? disabled : undefined}
-        onClick$={attrs.onClick$}
         {...attrs}
       >
         {!isOutlineGradient.value && (Prefix || loadingPrefix.value) && (

packages/lib/src/components/Button/composables/use-button-classes.ts

@@ -260,7 +260,7 @@ export function useButtonClasses(props: UseButtonClassesProps) {
       (props.prefix || props.suffix || props.loading.value) && 'inline-flex items-center',
       clsx(props.class?.value),
       props.target?.value,
-      props.full.value && 'w-full',
+      props.full.value ? 'w-full' : 'w-fit',
       'justify-center',
     ])
   })

packages/lib/src/components/Drawer/Drawer.tsx

@@ -1,4 +1,4 @@
-import { Component, PropsOf, QRL, Signal, Slot, component$, useComputed$, useId, useSignal, useStyles$, useTask$ } from '@builder.io/qwik'
+import { Component, PropsOf, QRL, Signal, Slot, component$, useComputed$, useId, useSignal, useStyles$, useTask$, ClassList } from '@builder.io/qwik'
 import clsx from 'clsx'
 import { twMerge } from 'tailwind-merge'
 import { useDrawerClasses } from './composables/use-drawer-classes'
@@ -7,29 +7,37 @@ import type { IconProps } from 'flowbite-qwik-icons'
 import { IconCloseOutline } from 'flowbite-qwik-icons'
 import { isServer } from '@builder.io/qwik/build'
 
-type DrawerProps = PropsOf<'div'> & {
+export type DrawerTheme = {
+  header?: ClassList
+  leftRightWidth?: ClassList
+}
+
+export type DrawerProps = PropsOf<'div'> & {
   'bind:open': Signal<boolean>
   title: string
   titleIcon?: Component<IconProps>
   position?: DrawerPosition
   backdrop?: boolean
   preventBodyScroll?: boolean
   onClose$?: QRL<() => void>
+  theme?: DrawerTheme
 }
 
 export const Drawer = component$<DrawerProps>(
-  ({ position = 'left', preventBodyScroll = true, backdrop = true, onClose$, class: classNames, title, titleIcon: TitleIcon, ...attrs }) => {
+  ({ position = 'left', preventBodyScroll = true, backdrop = true, onClose$, class: classNames, title, titleIcon: TitleIcon, theme, ...attrs }) => {
     const id = useId()
     const drawerRef = useSignal<HTMLDivElement>()
 
     const isEdge = useComputed$(() => position === 'bottom-edge')
     const internalPosition = useComputed$<DrawerPosition>(() => position)
     const internalBackdrop = useComputed$(() => backdrop)
+    const internalTheme = useComputed$(() => theme)
 
     const { rootClasses, backdropClasses, headerClasses, closeButtonClasses, edgeHandleClasses } = useDrawerClasses(
       attrs['bind:open'],
       isEdge,
       internalPosition,
+      internalTheme,
     )
 
     useStyles$(`
@@ -66,7 +74,7 @@ export const Drawer = component$<DrawerProps>(
           aria-modal="true"
           role="dialog"
           ref={drawerRef}
-          class={twMerge(clsx(classNames), rootClasses.value)}
+          class={twMerge(rootClasses.value, clsx(classNames))}
           onKeyDown$={(e) => {
             if (e.key === 'Escape') {
               attrs['bind:open'].value = false
@@ -95,7 +103,7 @@ export const Drawer = component$<DrawerProps>(
                 }}
                 class={closeButtonClasses}
               >
-                <IconCloseOutline aria-hidden class="w-4 h-4" />
+                <IconCloseOutline aria-hidden class="h-4 w-4" />
                 <span class="sr-only">Close menu</span>
               </button>
             )}

packages/lib/src/components/Drawer/composables/use-drawer-classes.ts

@@ -1,11 +1,18 @@
 import { Signal, useComputed$ } from '@builder.io/qwik'
 import { DrawerPosition } from '../drawer-types'
 import { twMerge } from 'tailwind-merge'
+import clsx from 'clsx'
+import { DrawerTheme } from '~/components/Drawer/Drawer'
 
-export function useDrawerClasses(isOpen: Signal<boolean>, isEdge: Signal<boolean>, position: Signal<DrawerPosition>) {
-  const defaultClasses = 'fixed z-50 overflow-y-auto bg-white transition-transform dark:bg-gray-800'
+export function useDrawerClasses(
+  isOpen: Signal<boolean>,
+  isEdge: Signal<boolean>,
+  position: Signal<DrawerPosition>,
+  theme: Signal<DrawerTheme | undefined>,
+) {
+  const defaultClasses = 'fixed z-[60] overflow-y-auto bg-white transition-transform dark:bg-gray-800'
   const edgeClasses = 'rounded-t-lg border-t border-gray-200 rounded-t-lg dark:border-gray-700'
-  const backdropClasses = 'fixed inset-0 z-30 bg-gray-900/50 dark:bg-gray-900/80'
+  const backdropClasses = 'fixed inset-0 z-50 bg-gray-900/50 dark:bg-gray-900/80'
   const edgeHandleClasses = 'absolute w-8 h-1 -translate-x-1/2 bg-gray-300 rounded-lg top-3 left-1/2 dark:bg-gray-600'
   const closeButtonClasses =
     'absolute end-2.5 top-2.5 flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white'
@@ -17,16 +24,16 @@ export function useDrawerClasses(isOpen: Signal<boolean>, isEdge: Signal<boolean
         off: 'left-0 right-0 top-0 w-full -translate-y-full',
       },
       right: {
-        on: 'right-0 top-0 h-screen w-80 transform-none',
-        off: 'right-0 top-0 h-screen w-80 translate-x-full',
+        on: twMerge('right-0 top-0 h-screen w-80 transform-none', clsx(theme.value?.leftRightWidth)),
+        off: twMerge('right-0 top-0 h-screen w-80 translate-x-full', clsx(theme.value?.leftRightWidth)),
       },
       bottom: {
         on: 'bottom-0 left-0 right-0 w-full transform-none',
         off: 'bottom-0 left-0 right-0 w-full translate-y-full',
       },
       left: {
-        on: 'left-0 top-0 h-screen w-80 transform-none',
-        off: 'left-0 top-0 h-screen w-80 -translate-x-full',
+        on: twMerge('left-0 top-0 h-screen w-80 transform-none', clsx(theme.value?.leftRightWidth)),
+        off: twMerge('left-0 top-0 h-screen w-80 -translate-x-full', clsx(theme.value?.leftRightWidth)),
       },
       'bottom-edge': {
         on: 'bottom-0 left-0 right-0 w-full transform-none',
@@ -47,6 +54,7 @@ export function useDrawerClasses(isOpen: Signal<boolean>, isEdge: Signal<boolean
     return twMerge(
       'inline-flex items-center text-base font-semibold text-gray-500 dark:text-gray-400',
       isEdge.value ? 'p-4 w-full cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700' : 'mb-4',
+      clsx(theme.value?.header),
     )
   })