Merge pull request #284 from qwikifiers/pr-change-daisy

qwikifiers · Apr 29, 2023 · e758aa4 · e758aa4
2 parents d945b72 + ca03213
commit e758aa4
Show file tree

Hide file tree

Showing 195 changed files with 3,442 additions and 3,065 deletions.
diff --git a/.github/actions/test/action.yml b/.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

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,4 +1,4 @@
 {
   "git.pullTags": false,
-  "conventionalCommits.scopes": ["daisy"]
+  "conventionalCommits.scopes": ["tailwind"]
 }
diff --git a/CODING_STANDARDS.md b/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) => {

diff --git a/CONTRIBUTING.md b/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
 

diff --git a/README.md b/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

diff --git a/apps/website/src/components/selectTheme/selectTheme.tsx b/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"

diff --git a/apps/website/src/components/wrapper/wrapper.tsx b/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 {

diff --git a/apps/website/src/routes/docs/daisy/accordion/index.tsx b/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$(`

diff --git a/apps/website/src/routes/docs/daisy/alert/index.tsx b/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>
   );

diff --git a/apps/website/src/routes/docs/daisy/badge/index.tsx b/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$(`

diff --git a/apps/website/src/routes/docs/daisy/breadcrumb/index.tsx b/apps/website/src/routes/docs/daisy/breadcrumb/index.tsx
@@ -1,6 +1,6 @@
 import { component$ } from '@builder.io/qwik';
 import { useLocation } from '@builder.io/qwik-city';
-import { Breadcrumb, BreadcrumbItem } from '@qwik-ui/theme-daisy';
+import { Breadcrumb, BreadcrumbItem } from '@qwik-ui/tailwind';
 import BreadcrumbWrapper from './BreadcrumbWrapper';
 import PathIcon from './PathIcon';
 

diff --git a/apps/website/src/routes/docs/daisy/button-group/index.tsx b/apps/website/src/routes/docs/daisy/button-group/index.tsx
@@ -1,5 +1,5 @@
 import { component$, useStyles$ } from '@builder.io/qwik';
-import { Button, ButtonGroup } from '@qwik-ui/theme-daisy';
+import { Button, ButtonGroup } from '@qwik-ui/tailwind';
 import styles from './button-group.css?inline';
 
 export default component$(() => {

diff --git a/apps/website/src/routes/docs/daisy/button/index.tsx b/apps/website/src/routes/docs/daisy/button/index.tsx
@@ -1,5 +1,5 @@
 import { component$, $, useStylesScoped$ } from '@builder.io/qwik';
-import { Button } from '@qwik-ui/theme-daisy';
+import { Button } from '@qwik-ui/tailwind';
 
 export default component$(() => {
   useStylesScoped$(`

diff --git a/apps/website/src/routes/docs/daisy/card/index.tsx b/apps/website/src/routes/docs/daisy/card/index.tsx
@@ -6,7 +6,7 @@ import {
   CardActions,
   Button,
   CardImage,
-} from '@qwik-ui/theme-daisy';
+} from '@qwik-ui/tailwind';
 
 export default component$(() => {
   useStylesScoped$(`
@@ -36,7 +36,7 @@ export default component$(() => {
       <h1>Card with Image Example</h1>
       <Card>
         <CardImage
-          src="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg"
+          src="https://tailwindui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg"
           alt="shoes"
         />
         <CardBody>
@@ -48,7 +48,7 @@ export default component$(() => {
       <h1>Card Completed</h1>
       <Card>
         <CardImage
-          src="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg"
+          src="https://tailwindui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg"
           alt="shoes"
         />
         <CardBody>

diff --git a/apps/website/src/routes/docs/daisy/checkbox/index.tsx b/apps/website/src/routes/docs/daisy/checkbox/index.tsx
@@ -1,5 +1,5 @@
 import { component$, useStylesScoped$ } from '@builder.io/qwik';
-import { Checkbox } from '@qwik-ui/theme-daisy';
+import { Checkbox } from '@qwik-ui/tailwind';
 
 export default component$(() => {
   useStylesScoped$(`

diff --git a/apps/website/src/routes/docs/daisy/collapse/index.tsx b/apps/website/src/routes/docs/daisy/collapse/index.tsx
@@ -1,5 +1,5 @@
 import { component$ } from '@builder.io/qwik';
-import { Collapse } from '@qwik-ui/theme-daisy';
+import { Collapse } from '@qwik-ui/tailwind';
 
 export default component$(() => {
   return (

diff --git a/apps/website/src/routes/docs/daisy/drawer/index.tsx b/apps/website/src/routes/docs/daisy/drawer/index.tsx
@@ -1,5 +1,5 @@
 import { component$ } from '@builder.io/qwik';
-import { Drawer } from '@qwik-ui/theme-daisy';
+import { Drawer } from '@qwik-ui/tailwind';
 
 export default component$(() => {
   return (

diff --git a/apps/website/src/routes/docs/daisy/navigation-bar/index.tsx b/apps/website/src/routes/docs/daisy/navigation-bar/index.tsx
@@ -1,5 +1,5 @@
 import { component$ } from '@builder.io/qwik';
-import { NavigationBar } from '@qwik-ui/theme-daisy';
+import { NavigationBar } from '@qwik-ui/tailwind';
 
 export default component$(() => {
   return (
@@ -11,7 +11,7 @@ export default component$(() => {
 
         <NavigationBar class="bg-base-100 rounded-lg">
           <a q:slot="navbar-left" class="btn btn-ghost normal-case text-xl">
-            daisyUI
+            tailwindUI
           </a>
           <ul q:slot="navbar-center" class="menu  menu-horizontal px-1">
             <li>
@@ -44,13 +44,13 @@ export default component$(() => {
             </li>
           </ul>
           <a q:slot="navbar-right" class="btn btn-ghost normal-case text-xl">
-            daisyUI
+            tailwindUI
           </a>
         </NavigationBar>
 
         <NavigationBar class="bg-base-100 rounded-lg">
           <a q:slot="navbar-left" class="btn btn-ghost normal-case text-xl">
-            daisyUI
+            tailwindUI
           </a>
           <ul q:slot="navbar-right" class="menu  menu-horizontal px-1">
             <li>
@@ -86,7 +86,7 @@ export default component$(() => {
         <h2>Custom css</h2>
         <NavigationBar class=" bg-primary rounded-lg">
           <a q:slot="navbar-left" class="btn btn-ghost normal-case text-xl">
-            daisyUI
+            tailwindUI
           </a>
           <ul q:slot="navbar-right" class="menu   menu-horizontal px-1">
             <li>

diff --git a/apps/website/src/routes/docs/daisy/pagination/index.tsx b/apps/website/src/routes/docs/daisy/pagination/index.tsx
@@ -1,6 +1,6 @@
 import { component$, useSignal } from '@builder.io/qwik';
-import { Pagination } from '@qwik-ui/theme-daisy';
-import { Toggle } from '@qwik-ui/theme-daisy';
+import { Pagination } from '@qwik-ui/tailwind';
+import { Toggle } from '@qwik-ui/tailwind';
 
 export default component$(() => {
   const page = useSignal(50);

diff --git a/apps/website/src/routes/docs/daisy/popover/index.tsx b/apps/website/src/routes/docs/daisy/popover/index.tsx
@@ -1,7 +1,7 @@
 import { component$, useSignal } from '@builder.io/qwik';
 import { Popover, PopoverContent, PopoverTrigger } from '@qwik-ui/headless';
 
-import { Button, Card, CardBody, CardTitle } from '@qwik-ui/theme-daisy';
+import { Button, Card, CardBody, CardTitle } from '@qwik-ui/tailwind';
 
 export default component$(() => {
   const controlledPopover = useSignal<boolean>(true);

diff --git a/apps/website/src/routes/docs/daisy/progress/index.tsx b/apps/website/src/routes/docs/daisy/progress/index.tsx
@@ -1,5 +1,5 @@
 import { component$, $, useStylesScoped$ } from '@builder.io/qwik';
-import { Progress } from '@qwik-ui/theme-daisy';
+import { Progress } from '@qwik-ui/tailwind';
 
 export default component$(() => {
   useStylesScoped$(`

diff --git a/apps/website/src/routes/docs/daisy/radio/index.tsx b/apps/website/src/routes/docs/daisy/radio/index.tsx
@@ -1,5 +1,5 @@
 import { component$, useSignal, useStylesScoped$ } from '@builder.io/qwik';
-import { Radio } from '@qwik-ui/theme-daisy';
+import { Radio } from '@qwik-ui/tailwind';
 
 export default component$(() => {
   useStylesScoped$(`

diff --git a/apps/website/src/routes/docs/daisy/rating/index.tsx b/apps/website/src/routes/docs/daisy/rating/index.tsx
@@ -1,5 +1,5 @@
 import { component$, useStylesScoped$ } from '@builder.io/qwik';
-import { Rating } from '@qwik-ui/theme-daisy';
+import { Rating } from '@qwik-ui/tailwind';
 
 export default component$(() => {
   useStylesScoped$(`

diff --git a/apps/website/src/routes/docs/daisy/select/index.tsx b/apps/website/src/routes/docs/daisy/select/index.tsx
@@ -9,7 +9,7 @@ export default component$(() => {
       <h2>This is the documentation for the Select</h2>
       <Select.Root>
         <Select.Label class="mr-2">
-          Alternate Daisy Select implementation
+          Alternate Tailwind Select implementation
         </Select.Label>
         <Select.Trigger class="select-caret inline-flex items-center justify-between w-full h-12 max-w-xs px-4 text-sm font-semibold leading-loose border rounded-lg cursor-pointer border-base-content border-opacity-20 bg-base-100 shrink-0">
           <Select.Value placeholder="Select an option! ⚡" />

diff --git a/apps/website/src/routes/docs/daisy/slider/index.tsx b/apps/website/src/routes/docs/daisy/slider/index.tsx
@@ -1,5 +1,5 @@
 import { component$, useSignal } from '@builder.io/qwik';
-import { Slider } from '@qwik-ui/theme-daisy';
+import { Slider } from '@qwik-ui/tailwind';
 
 export default component$(() => {
   const sliderValue = useSignal(55);

diff --git a/apps/website/src/routes/docs/daisy/spinner/index.tsx b/apps/website/src/routes/docs/daisy/spinner/index.tsx
@@ -1,5 +1,5 @@
 import { component$, useStylesScoped$ } from '@builder.io/qwik';
-import { Spinner } from '@qwik-ui/theme-daisy';
+import { Spinner } from '@qwik-ui/tailwind';
 
 export default component$(() => {
   useStylesScoped$(`

diff --git a/apps/website/src/routes/docs/daisy/tabs/index.tsx b/apps/website/src/routes/docs/daisy/tabs/index.tsx
@@ -1,5 +1,5 @@
 import { component$, useSignal } from '@builder.io/qwik';
-import { Tab, TabPanel, Tabs } from '@qwik-ui/theme-daisy';
+import { Tab, TabPanel, Tabs } from '@qwik-ui/tailwind';
 import { Wrapper } from '../../../../components/wrapper/wrapper';
 
 export default component$(() => {
@@ -11,7 +11,7 @@ export default component$(() => {
 
       <Wrapper
         title="Tabs"
-        subtitle="Daisy"
+        subtitle="Tailwind"
         description="This is the documentation for the Tabs"
       >
         <div q:slot="preview">

diff --git a/apps/website/src/routes/docs/daisy/toast/index.tsx b/apps/website/src/routes/docs/daisy/toast/index.tsx
@@ -1,5 +1,5 @@
 import { component$ } from '@builder.io/qwik';
-import { Toast } from '@qwik-ui/theme-daisy';
+import { Toast } from '@qwik-ui/tailwind';
 import ToastContainer from './ToastContainer';
 
 export default component$(() => {

diff --git a/apps/website/src/routes/docs/daisy/toggle/index.tsx b/apps/website/src/routes/docs/daisy/toggle/index.tsx
@@ -1,5 +1,5 @@
 import { component$, useSignal } from '@builder.io/qwik';
-import { Toggle } from '@qwik-ui/theme-daisy';
+import { Toggle } from '@qwik-ui/tailwind';
 
 export default component$(() => {
   const toggleChecked = useSignal(false);