refactor: change theme-daisy to tailwind

Author: shairez

.github/actions/test/action.yml

@@ -23,9 +23,9 @@ runs:
       shell: bash
       run: npx nx build headless
 
-    # - name: Build Daisy Theme
+    # - name: Build Tailwind Theme
     #   shell: bash
-    #   run: npx nx build daisy
+    #   run: npx nx build tailwind
 
     # - name: Build
     #   shell: bash

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
   "git.pullTags": false,
-  "conventionalCommits.scopes": ["daisy"]
+  "conventionalCommits.scopes": ["tailwind"]
 }

CODING_STANDARDS.md

@@ -64,10 +64,10 @@ export type TooltipProps = QwikIntrinsicElements['div'] & {
 };
 ```
 
-For **Daisy, Material and other components variations**, you can define the new props in a new type, named with the component name and the variation as prefix. For example:
+For **Tailwind, Material and other components variations**, you can define the new props in a new type, named with the component name and the variation as prefix. For example:
 
 ```ts
-type DaisyTooltipProps = {
+type TailwindTooltipProps = {
   size?: 'sm' | 'md';
 };
 ```
@@ -77,7 +77,7 @@ The final exported type will extend from the headless props type. For example:
 ```ts
 import { TooltipProps as HeadlessTooltipProps } from '@qwik-ui/headless';
 
-export type TooltipProps = HeadlessTooltipProps & DaisyTooltipProps;
+export type TooltipProps = HeadlessTooltipProps & TailwindTooltipProps;
 ```
 
 - Use object destructuring in the component$ declaration on all the props you are going to use. For example:
@@ -104,15 +104,15 @@ return (
 - Use accessibility attributes whenever they are needed.
 - For simple primitive states use signals. For object state, use stores.
 
-## Example of headless button customisation with Daisy
+## Example of headless button customisation with Tailwind
 
 ```tsx
 import { component$, QwikIntrinsicElements, Slot } from '@builder.io/qwik';
 import { Button as HeadlessButton, ButtonProps as ButtonHeadlessProps } from '@qwik-ui/headless';
 import { clsq } from '@qwik-ui/shared';
 
-type DaisyButtonProps = { size?: 'sm' | 'md', ... };
-export type ButtonProps = ButtonHeadlessProps & DaisyButtonProps;
+type TailwindButtonProps = { size?: 'sm' | 'md', ... };
+export type ButtonProps = ButtonHeadlessProps & TailwindButtonProps;
 
 export const Button = component$(
   ({ size = 'md', class: classNames, ...rest }: ButtonProps) => {

CONTRIBUTING.md

@@ -64,7 +64,7 @@ git checkout -b my-fix-branch main
 
 - Visit the URL printed in the console and you'll have a page opened with the suite of widgets.
 
-- Once you made some changes in either package (`headless`, `daisy` or `material`), you will see them immediately reflected on the page.
+- Once you made some changes in either package (`headless`, `tailwind` or `material`), you will see them immediately reflected on the page.
 
 ### ▶ 5. Make sure you add / modify tests
 

README.md

@@ -40,12 +40,12 @@
 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 
+
+- [ ] Deploy the documentation site
   - [ ] Add "Readiness" statuses to the components
   - [ ] Add a getting started video tutorial
   - [ ] Make a public storybook url
-- [ ] Deploy the daisy-theme package
+- [ ] Deploy the tailwind-kit package
 - [ ] Cover all of the components with storybook tests
 - [ ] Add testing coverage reports
 - [ ] Add a contribution tutorial video

apps/website/src/components/selectTheme/selectTheme.tsx

@@ -3,14 +3,14 @@ import { useLocation } from '@builder.io/qwik-city';
 import { APP_STATE } from '../../constants';
 import { ThemeIcon } from '../icons/ThemeIcon';
 
-export type Theme = 'HEADLESS' | 'DAISY' | 'MATERIAL' | 'NOT_DEFINED';
+export type Theme = 'HEADLESS' | 'TAILWIND' | 'MATERIAL' | 'NOT_DEFINED';
 
 export const SelectTheme = component$(() => {
   const location = useLocation();
   const appState = useContext(APP_STATE);
   const openThemeSignal = useSignal<boolean>(false);
 
-  const themes: Theme[] = ['HEADLESS', 'DAISY', 'MATERIAL'];
+  const themes: Theme[] = ['HEADLESS', 'TAILWIND', 'MATERIAL'];
   return (
     <div
       title="Change Theme"

apps/website/src/components/wrapper/wrapper.tsx

@@ -4,7 +4,7 @@ import {
   useSignal,
   useStylesScoped$,
 } from '@builder.io/qwik';
-import { Tab, TabPanel, Tabs } from '@qwik-ui/theme-daisy';
+import { Tab, TabPanel, Tabs } from '@qwik-ui/tailwind';
 import styles from './wrapper.css?inline';
 
 export interface WrapperProps {

apps/website/src/routes/docs/daisy/accordion/index.tsx

@@ -1,5 +1,5 @@
 import { component$, useStylesScoped$ } from '@builder.io/qwik';
-import { Accordion, AccordionItem } from '@qwik-ui/theme-daisy';
+import { Accordion, AccordionItem } from '@qwik-ui/tailwind';
 
 export default component$(() => {
   useStylesScoped$(`

apps/website/src/routes/docs/daisy/alert/index.tsx

@@ -1,5 +1,5 @@
 import { $, component$ } from '@builder.io/qwik';
-import { Alert as DaisyAlert } from '@qwik-ui/theme-daisy';
+import { Alert as TailwindAlert } from '@qwik-ui/tailwind';
 import { GitHubIcon } from '../../../../components/icons/GitHubIcon';
 
 export default component$(() => {
@@ -8,40 +8,42 @@ export default component$(() => {
       <h2>This is the documentation for the Alert</h2>
 
       <div class="flex flex-col gap-4">
-        <DaisyAlert>This is a success alert.</DaisyAlert>
-        <DaisyAlert variant="error">This is an error alert.</DaisyAlert>
-        <DaisyAlert variant="warning">This is a warning alert.</DaisyAlert>
-        <DaisyAlert variant="info">This is an info alert.</DaisyAlert>
+        <TailwindAlert>This is a success alert.</TailwindAlert>
+        <TailwindAlert variant="error">This is an error alert.</TailwindAlert>
+        <TailwindAlert variant="warning">
+          This is a warning alert.
+        </TailwindAlert>
+        <TailwindAlert variant="info">This is an info alert.</TailwindAlert>
       </div>
 
       <div class="flex flex-col gap-2">
         <h3>With a title</h3>
-        <DaisyAlert variant="warning" title="Watch out!">
+        <TailwindAlert variant="warning" title="Watch out!">
           This is a warning alert.
-        </DaisyAlert>
+        </TailwindAlert>
       </div>
 
       <div class="flex flex-col gap-2">
         <h3>With an icon</h3>
-        <DaisyAlert variant="success">
+        <TailwindAlert variant="success">
           <div q:slot="icon">💸</div>
           This is a success alert with an icon.
-        </DaisyAlert>
+        </TailwindAlert>
       </div>
 
       <div class="flex flex-col gap-2">
         <h3>With a action</h3>
-        <DaisyAlert
+        <TailwindAlert
           variant="error"
           action={{ label: 'undo', onClick$: $(() => alert('Undoing...')) }}
         >
           This is a success alert with an action.
-        </DaisyAlert>
+        </TailwindAlert>
       </div>
 
       <div class="flex flex-col gap-2">
         <h3>A mix</h3>
-        <DaisyAlert
+        <TailwindAlert
           variant="info"
           title="Did you know?"
           action={{ label: 'cool!', onClick$: $(() => alert('Hi!')) }}
@@ -50,7 +52,7 @@ export default component$(() => {
             <GitHubIcon />
           </div>
           This is an info alert with an action, icon, and title.
-        </DaisyAlert>
+        </TailwindAlert>
       </div>
     </div>
   );

apps/website/src/routes/docs/daisy/badge/index.tsx

@@ -1,5 +1,5 @@
 import { component$, useStylesScoped$ } from '@builder.io/qwik';
-import { Badge, Button } from '@qwik-ui/theme-daisy';
+import { Badge, Button } from '@qwik-ui/tailwind';
 
 export default component$(() => {
   useStylesScoped$(`