fix: button dynamic classes (#106)

* chore: added the shared folder

* feat(component): now the Daisy Button component supports all the Daisy properties

The button now supports all Daisy modifiers (primary, secondary), sizes (xs, sm, ...) and other
properties. A new clsq utility  (a TS clone of the famous clsx utility) has been added a new shared
folder (I have also created an alias in order to be easily imported everywhere)

Author: fabiobiondi

packages/daisy/src/components/button/button.tsx

@@ -1,13 +1,80 @@
 import { component$, QwikIntrinsicElements, Slot } from '@builder.io/qwik';
 import { Button as HeadlessButton } from '@qwik-ui/headless';
+import { clsq } from '@qwik-ui/shared';
 
-export type ButtonProps = QwikIntrinsicElements['button'];
+export type HTMLButtonProps = QwikIntrinsicElements['button'];
 
+export type DaisyButtonProps = {
+  noAnimation?: boolean;
+  glass?: boolean;
+  loading?: boolean;
+  circle?: boolean;
+  square?: boolean;
+  active?: boolean;
+  disabled?: boolean;
+  outline?: boolean;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'block' | 'wide';
+} & DaisyButtonModifiers;
+
+export type DaisyButtonModifiers = {
+  primary?: boolean;
+  secondary?: boolean;
+  accent?: boolean;
+  info?: boolean;
+  success?: boolean;
+  warning?: boolean;
+  error?: boolean;
+  ghost?: boolean;
+  link?: boolean;
+}
+
+export type ButtonProps = HTMLButtonProps & DaisyButtonProps ;
 
 export const Button = component$(
   (props: ButtonProps) => {
+    const {
+      class: cls,
+      primary, secondary, accent, info, success, warning, error, ghost, link, outline, active, disabled, glass, loading, noAnimation,
+      circle,
+      square,
+      size = 'md',
+      ...rest } = props;
+
     return (
-      <HeadlessButton class="btn btn-primary" {...props}>
+      <HeadlessButton
+        {...rest}
+        class={
+          clsq(
+            'btn',
+            {
+              // modifiers
+              'btn-primary': primary,
+              'btn-secondary': secondary,
+              'btn-accent': accent,
+              'btn-info': info,
+              'btn-success': success,
+              'btn-warning': warning,
+              'btn-error': error,
+              'btn-ghost': ghost,
+              'btn-link': link,
+              'btn-active': active,
+              // daisy props
+              'btn-outline': outline,
+              'btn-disabled': disabled,
+              'glass': glass,
+              'loading': loading,
+              'no-animation': noAnimation,
+              'btn-circle': circle,
+              'btn-square': square,
+              // size
+              'btn-xs': size === 'xs',
+              'btn-sm': size === 'sm',
+              'btn-md': size === 'md',
+              'btn-lg': size === 'lg',
+            },
+            cls
+          )}
+      >
         <Slot />
       </HeadlessButton>
     );

packages/shared/src/index.ts

@@ -0,0 +1 @@
+export * from './utils/clsq';

packages/shared/src/utils/clsq.ts

@@ -0,0 +1,55 @@
+/**
+ * Custom version of 'clsx' utility migrated to TypeScript.
+ */
+
+export type ClassDictionary = Record<string, any>;
+export type ClassArray = ClassValue[];
+export type ClassValue = ClassArray | ClassDictionary | string | number | null | boolean | undefined;
+
+function toVal(mix: ClassValue) {
+  let str = '';
+
+  if (typeof mix === 'string' || typeof mix === 'number') {
+    str += mix;
+  } else if (typeof mix === 'object') {
+    if (Array.isArray(mix)) {
+      for (let k=0; k < mix.length; k++) {
+        if (mix[k]) {
+          const y = toVal(mix[k])
+          if (y) {
+            str && (str += ' ');
+            str += y;
+          }
+        }
+      }
+    } else {
+      for (const k in mix) {
+        if (mix[k]) {
+          str && (str += ' ');
+          str += k;
+        }
+      }
+    }
+  }
+
+  return str;
+}
+
+export function clsq(...inputs: ClassValue[]) {
+  let i = 0;
+  let tmp;
+  let str = '';
+  while (i < inputs.length) {
+    tmp = inputs[i++];
+    if (tmp) {
+      const x = toVal(tmp)
+      if (x) {
+        str && (str += ' ');
+        str += x
+      }
+    }
+  }
+  return str;
+}
+
+export default clsq;

packages/website/src/routes/docs/daisy/button/index.tsx

@@ -1,27 +1,90 @@
-import { component$, $ } from '@builder.io/qwik';
+import { component$, $, useStylesScoped$ } from '@builder.io/qwik';
 import { Button } from '@qwik-ui/theme-daisy';
 
 export default component$(() => {
+  useStylesScoped$(`
+    .panel {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }`
+  );
+
   return (
     <>
       <h2>This is the documentation for the Button</h2>
 
-      <div className="flex flex-col gap-8 mt-4">
-        <div>
-          <h2>Basic Example</h2>
-          <Button>SIMPLE BUTTON</Button>
+      <div class="flex flex-col gap-8 mt-4">
+        <h2>Basic Example</h2>
+        <div class="panel">
+          <Button>default</Button>
+          <Button primary>primary</Button>
+          <Button secondary>secondary</Button>
+          <Button accent>accent</Button>
+          <Button info>info</Button>
+          <Button success>success</Button>
+          <Button warning>warning</Button>
+          <Button error>error</Button>
+          <Button ghost>ghost</Button>
+          <Button link>link</Button>
+          <Button primary active>primary active</Button>
+          <Button accent active>accent active</Button>
+          <Button disabled>disabled</Button>
+          <Button disabled={true}>disabled</Button>
         </div>
 
-        <div>
-          <h2>Attributes</h2>
-          <Button type="button" disabled={true}>
-            DISABLED BUTTON
+        <h2>Outline Example</h2>
+        <div class="panel">
+          <Button outline primary>primary</Button>
+          <Button outline secondary>secondary</Button>
+          <Button outline accent>accent</Button>
+          <Button outline info>info</Button>
+          <Button outline success>success</Button>
+          <Button outline warning>warning</Button>
+          <Button outline error>error</Button>
+          <Button outline ghost>ghost</Button>
+          <Button outline link>link</Button>
+          <Button outline active>active</Button>
+          <Button outline disabled>disabled</Button>
+        </div>
+
+        <h2>size</h2>
+        <div class="panel">
+          <Button primary size="xs">xs</Button>
+          <Button primary size="sm">sm</Button>
+          <Button primary size="md">md</Button>
+          <Button primary size="lg">lg</Button>
+        </div>
+
+        <h2>loading</h2>
+        <div class="panel">
+          <Button primary loading>loading</Button>
+          <Button loading square></Button>
+        </div>
+
+        <h2>no click animation</h2>
+        <div class="panel">
+          <Button primary noAnimation>click me</Button>
+          <Button secondary noAnimation>click me</Button>
+        </div>
+
+        <h2>Square and Circle</h2>
+        <div class="panel">
+          <Button secondary square>A</Button>
+          <Button accent circle>B</Button>
+        </div>
+
+        <h2>Custom class</h2>
+
+        <div class="panel">
+          <Button type="button" primary class="px-32 border-4 border-black">
+            CUSTOM CLASS
           </Button>
         </div>
 
         <div>
-          <h2>Events</h2>
-          <Button onClick$={$(() => window.alert('hello'))}>SHOW ALERT</Button>
+          <h2>Qwik Events</h2>
+          <Button primary onClick$={$(() => window.alert('hello'))}>SHOW ALERT</Button>
         </div>
       </div>
     </>

packages/website/src/routes/docs/headless/button/index.css

@@ -0,0 +1,9 @@
+.customCls {
+  background-color: lightcoral;
+  color: black;
+  padding: 10px
+}
+
+.customCls:hover {
+  background-color: coral;
+}

packages/website/src/routes/docs/headless/button/index.tsx

@@ -1,9 +1,12 @@
-import { $, component$ } from '@builder.io/qwik';
+import { $, component$, useStyles$ } from '@builder.io/qwik';
 import { Button } from '@qwik-ui/headless';
+import styles from './index.css?inline';
 
 export default component$(() => {
+  useStyles$(styles);
+
   return (
-    <>
+    <div class="flex flex-col gap-8 mt-4">
       <h2>This is the documentation for the Button</h2>
       <div className="flex flex-col gap-8 mt-4">
         <div>
@@ -18,11 +21,17 @@ export default component$(() => {
           </Button>
         </div>
 
+        <div>
+          <h2>Custom styling</h2>
+          <Button class="customCls">Custom Class</Button>
+          <Button style="color: red">Custom styles</Button>
+        </div>
+
         <div>
           <h2>Events</h2>
           <Button onClick$={$(() => window.alert('hello'))}>SHOW ALERT</Button>
         </div>
       </div>
-    </>
+    </div>
   );
 });

packages/website/src/routes/docs/index.tsx

@@ -16,6 +16,32 @@ export default component$(() => {
                 btn btn-primary drawer-button
                 drawer-side
                 drawer-overlay
+                btn
+                btn-primary
+                btn-secondary
+                btn-accent
+                btn-info
+                btn-success
+                btn-warning
+                btn-error
+                btn-ghost
+                btn-link
+                btn-outline
+                btn-active
+                btn-disabled
+                
+                glass
+                loading
+                no-animation
+                
+                btn-xs
+                btn-sm
+                btn-md
+                btn-lg
+                btn-wide
+                btn-block
+                btn-circle
+                btn-square
                 `}
       />
     </div>

tsconfig.base.json

@@ -16,6 +16,7 @@
     "baseUrl": ".",
     "paths": {
       "@qwik-ui/core": ["packages/core/src/index.ts"],
+      "@qwik-ui/shared": ["packages/shared/src/index.ts"],
       "@qwik-ui/theme-daisy": ["packages/daisy/src/index.ts"],
       "@qwik-ui/headless": ["packages/headless/src/index.ts"]
     }