refactor(component): refactoring Daisy Button props (#113)

Author: fabiobiondi

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

@@ -1,76 +1,66 @@
 import { component$, QwikIntrinsicElements, Slot } from '@builder.io/qwik';
 import { Button as HeadlessButton } from '@qwik-ui/headless';
 import { clsq } from '@qwik-ui/shared';
+import { daisyConfig } from './daisy.config';
 
 export type HTMLButtonProps = QwikIntrinsicElements['button'];
 
 export type DaisyButtonProps = {
+  variant?: DaisyButtonVariants
+  size?: DaisyButtonSizes
+  active?: boolean;
   noAnimation?: boolean;
+  circle?: 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;
+  square?: boolean;
 }
 
+export type DaisyButtonVariants = 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'ghost' | 'link' | 'disabled';
+export type DaisyButtonSizes = 'xs' | 'sm' | 'md' | 'lg' | 'block' | 'wide';
 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,
+      size = 'md',
+      variant = 'primary',
       circle,
+      active,
+      class: cls,
+      disabled,
+      glass,
+      loading,
+      noAnimation,
+      outline,
       square,
-      size = 'md',
-      ...rest } = props;
+      ...rest
+    } = props;
+
+    const {
+      variants,
+      sizes,
+      options
+    } = daisyConfig
 
     return (
       <HeadlessButton
         {...rest}
         class={
           clsq(
             'btn',
+            variants[variant],
+            sizes[size],
             {
-              // 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',
+              [options.active]: active,
+              [options.outline]: outline,
+              [options.disabled]: disabled,
+              [options.glass]: glass,
+              [options.loading]: loading,
+              [options.noAnimation]: noAnimation,
+              [options.circle]: circle,
+              [options.square]: square,
             },
             cls
           )}

packages/daisy/src/components/button/daisy.config.ts

@@ -0,0 +1,32 @@
+export const daisyConfig = {
+  variants: {
+    accent: 'btn-accent',
+    error: 'btn-error',
+    ghost: 'btn-ghost',
+    info: 'btn-info',
+    link: 'btn-link',
+    primary: 'btn-primary',
+    secondary: 'btn-secondary',
+    success: 'btn-success',
+    warning: 'btn-warning',
+    disabled: 'btn-disabled',
+  },
+  sizes: {
+    xs: 'btn-xs',
+    sm: 'btn-sm',
+    md: 'btn-md',
+    lg: 'btn-lg',
+    block: 'btn-block',
+    wide: 'btn-wide',
+  },
+  options: {
+    active: 'btn-active',
+    outline: 'btn-outline',
+    disabled: 'btn-disabled',
+    glass: 'glass',
+    loading: 'loading',
+    noAnimation: 'no-animation',
+    circle: 'btn-circle',
+    square: 'btn-square',
+  }
+}

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

@@ -18,73 +18,87 @@ export default component$(() => {
         <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>
+          <Button variant="primary">primary</Button>
+          <Button variant="secondary">secondary</Button>
+          <Button variant="accent">accent</Button>
+          <Button variant="info">info</Button>
+          <Button variant="success">success</Button>
+          <Button variant="warning">warning</Button>
+          <Button variant="error">error</Button>
+          <Button variant="ghost">ghost</Button>
+          <Button variant="link">link</Button>
+          <Button variant="primary" disabled>primary disabled</Button>
+          <Button variant="secondary" disabled>secondary disabled</Button>
         </div>
 
+        <h2>Active Example</h2>
+        <div className="panel">
+          <Button active>default</Button>
+          <Button variant="primary" active>primary</Button>
+          <Button variant="secondary" active>secondary</Button>
+          <Button variant="accent" active>accent</Button>
+          <Button variant="info" active>info</Button>
+          <Button variant="success" active>success</Button>
+          <Button variant="warning" active>warning</Button>
+          <Button variant="error" active>error</Button>
+          <Button variant="ghost" active>ghost</Button>
+          <Button variant="link" active>link</Button>
+          <Button variant="primary" active disabled>primary | active | disabled</Button>
+          <Button variant="secondary" active disabled>secondary | active | disabled</Button>
+        </div>
+
+
         <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>
+          <Button outline variant="primary">primary</Button>
+          <Button outline variant="secondary">secondary</Button>
+          <Button outline variant="accent">accent</Button>
+          <Button outline variant="info">info</Button>
+          <Button outline variant="success">success</Button>
+          <Button outline variant="warning">warning</Button>
+          <Button outline variant="error">error</Button>
+          <Button outline variant="ghost">ghost</Button>
+          <Button outline variant="link">link</Button>
+          <Button outline variant="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>
+          <Button variant="primary" size="xs">xs</Button>
+          <Button variant="secondary" size="sm">sm</Button>
+          <Button variant="accent" size="md">md</Button>
+          <Button variant="warning" size="lg">lg</Button>
         </div>
 
         <h2>loading</h2>
         <div class="panel">
-          <Button primary loading>loading</Button>
+          <Button variant="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>
+          <Button variant="primary" noAnimation>click me</Button>
+          <Button variant="secondary" noAnimation>click me</Button>
         </div>
 
         <h2>Square and Circle</h2>
         <div class="panel">
-          <Button secondary square>A</Button>
-          <Button accent circle>B</Button>
+          <Button variant="secondary" square>A</Button>
+          <Button variant="accent" circle>B</Button>
         </div>
 
         <h2>Custom class</h2>
 
         <div class="panel">
-          <Button type="button" primary class="px-32 border-4 border-black">
+          <Button type="button" variant="primary" class="px-32 border-4 border-black">
             CUSTOM CLASS
           </Button>
         </div>
 
         <div>
           <h2>Qwik Events</h2>
-          <Button primary onClick$={$(() => window.alert('hello'))}>SHOW ALERT</Button>
+          <Button variant="primary" onClick$={$(() => window.alert('hello'))}>SHOW ALERT</Button>
         </div>
       </div>
     </>

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

@@ -1,7 +1,9 @@
 .customCls {
   background-color: lightcoral;
   color: black;
-  padding: 10px
+  padding: 0.5rem 2rem;
+  margin: 0.5rem;
+  border-radius: 2rem;
 }
 
 .customCls:hover {