Merge pull request #753 from maiieul/use-styled-compoennts-in-docs

Refactor styled Modal to tailwindcss-animate

Author: maiieul

.changeset/slimy-snakes-poke.md

@@ -0,0 +1,96 @@
+---
+'@qwik-ui/styled': minor
+---
+
+## tailwind.config.cjs
+
+Now uses tailwindcss-animate
+
+```ts
+  plugins: [
+    require('tailwindcss-animate'),
+    ...
+  ],
+```
+
+Instead of manually defined animations through a custom plugin like
+
+```ts
+plugins: [
+  plugin(function ({ addUtilities }) {
+    addUtilities({
+      '.appear': {
+        opacity: 1,
+      },
+      '.disappear': {
+        opacity: 0,
+      },
+    });
+  }),
+];
+```
+
+## Modal refactor
+
+### Modal.Panel
+
+The Panel now uses tailwindcss-animate and comes built-in with 5 `position` variant props
+
+```tsx
+export const panelVariants = cva(
+  [
+    'fixed w-full bg-background p-6 text-foreground transition-all backdrop:brightness-50 backdrop:backdrop-blur-sm',
+    'data-[closing]:duration-300 data-[open]:duration-300 data-[open]:animate-in data-[closing]:animate-out',
+    'backdrop:data-[closing]:duration-300 backdrop:data-[open]:duration-300 backdrop:data-[open]:animate-in backdrop:data-[closing]:animate-out backdrop:data-[closing]:fade-out backdrop:data-[open]:fade-in',
+  ],
+  {
+    variants: {
+      position: {
+        center:
+          'max-w-lg rounded-base shadow-lg data-[state=closed]:fade-out data-[state=open]:fade-in data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-bottom-2 backdrop:data-[closing]:fade-out backdrop:data-[open]:fade-in',
+        top: 'inset-x-0 top-0 mt-0 rounded-b-base border-b data-[closing]:slide-out-to-top data-[open]:slide-in-from-top',
+        bottom:
+          'inset-x-0 bottom-0 mb-0 rounded-t-base border-t data-[closing]:slide-out-to-bottom data-[open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 ml-0 h-full max-w-sm rounded-r-base border-r data-[closing]:slide-out-to-left data-[open]:slide-in-from-left',
+        right:
+          'inset-y-0 right-0 mr-0 h-full max-w-sm rounded-l-base border-l data-[closing]:slide-out-to-right data-[open]:slide-in-from-right',
+      },
+    },
+    defaultVariants: {
+      position: 'center',
+    },
+  },
+);
+
+type PanelProps = PropsOf<typeof HeadlessModal.Panel> &
+  VariantProps<typeof panelVariants>;
+
+const Panel = component$<PanelProps>(({ position, ...props }) => {
+  return (
+    <HeadlessModal.Panel {...props} class={cn(panelVariants({ position }), props.class)}>
+      <Slot />
+    </HeadlessModal.Panel>
+  );
+});
+```
+
+over previous tailwind.config.js home-made plugin
+
+```tsx
+        '.appear': {
+          opacity: 1,
+        },
+        '.disappear': {
+          opacity: 0,
+        },
+```
+
+to avoid re-inventing the wheel.
+
+### Modal.Title
+
+Title now holds `text-lg font-semibold` classes.
+
+### Modal.Description
+
+Description now holds `text-muted-foreground` class.

.changeset/ten-actors-explain.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/styled': patch
+---
+
+Styled button now uses `transition-all` for every variant shared class

.prettierrc

@@ -5,5 +5,5 @@
   "printWidth": 90,
   "plugins": ["prettier-plugin-tailwindcss"],
   "tailwindConfig": "./apps/website/tailwind.config.cjs",
-  "tailwindFunctions": ["clsx", "cva", "cn"]
+  "tailwindFunctions": ["clsx", "cva"]
 }

apps/component-tests/tailwind.config.cjs

@@ -10,19 +10,13 @@ module.exports = {
     join(__dirname, '../../packages/kit-styled/src/**/*.{js,ts,jsx,tsx,mdx}'),
   ],
   plugins: [
-    require('tailwindcss-animate'),
     // PLUGIN-START
+    require('tailwindcss-animate'),
     plugin(function ({ addUtilities }) {
       addUtilities({
         '.press': {
           transform: 'var(--transform-press)',
         },
-        '.appear': {
-          opacity: 1,
-        },
-        '.disappear': {
-          opacity: 0,
-        },
       });
     }),
     // PLUGIN-END
@@ -112,16 +106,6 @@ module.exports = {
         step: 'cubic-bezier(0.6, 0.6, 0, 1)',
         jumpy: 'cubic-bezier(0.87, 0, 0.13, 1)',
       },
-      keyframes: {
-        fadeIn: {
-          '0%': { opacity: 0 },
-          '100%': { opacity: 1 },
-        },
-        fadeOut: {
-          '0%': { opacity: 1 },
-          '100%': { opacity: 0 },
-        },
-      },
     },
   },
 };

apps/website/src/components/make-it-yours/make-it-yours.tsx

@@ -1,13 +1,5 @@
-import {
-  $,
-  PropsOf,
-  component$,
-  useComputed$,
-  useSignal,
-  useStyles$,
-} from '@builder.io/qwik';
-import { Modal } from '@qwik-ui/headless';
-import { Button } from '~/components/ui';
+import { $, PropsOf, component$, useComputed$ } from '@builder.io/qwik';
+import { Modal, Button, buttonVariants } from '~/components/ui';
 import {
   ThemeBaseColor,
   ThemeBorderRadius,
@@ -25,69 +17,6 @@ import CopyCssConfig from '../copy-css-config/copy-css-config';
 import { useAppState } from '~/_state/use-app-state';
 
 export default component$<PropsOf<typeof Button>>(() => {
-  useStyles$(`
-    .make-it-yours::backdrop {
-      background: rgba(0,0,0,0.05);
-    }
-  
-    .make-it-yours {
-      animation: sheetOpen 0.75s forwards cubic-bezier(0.6, 0.6, 0, 1);
-    }
-  
-    .make-it-yours::backdrop {
-      animation: sheetFadeIn 0.75s forwards cubic-bezier(0.6, 0.6, 0, 1);
-    }
-  
-    .make-it-yours.modal-closing {
-      animation: sheetClose 0.35s forwards cubic-bezier(0.6, 0.6, 0, 1);
-    }
-  
-    .make-it-yours.modal-closing::backdrop {
-      animation: sheetFadeOut 0.35s forwards cubic-bezier(0.6, 0.6, 0, 1);
-    }
-
-    @keyframes sheetOpen {
-      from {
-        opacity: 0;
-        transform: translateX(100%);
-      }
-      to {
-        opacity: 1;
-        transform: translateX(0%);
-      }
-    }
-  
-    @keyframes sheetClose {
-      from {
-        opacity: 1;
-        transform: translateX(0%);
-      }
-      to {
-        opacity: 0;
-        transform: translateX(100%);
-      }
-    }
-  
-    @keyframes sheetFadeIn {
-      from {
-        opacity: 0;
-      }
-      to {
-        opacity: 1;
-      }
-    }
-  
-    @keyframes sheetFadeOut {
-      from {
-        opacity: 1;
-      }
-      to {
-        opacity: 0;
-      }
-    }
-    `);
-
-  const showSig = useSignal(false);
   const rootStore = useAppState();
 
   const { theme, setTheme } = useTheme();
@@ -132,19 +61,17 @@ export default component$<PropsOf<typeof Button>>(() => {
     return [font, mode, style, baseColor, primaryColor, borderRadius].join(' ');
   });
   return (
-    <Modal.Root closeOnBackdropClick={false} bind:show={showSig}>
-      <Button
-        size="sm"
-        look="outline"
-        class="flex sm:mr-2 sm:h-10"
-        onClick$={() => {
-          showSig.value = true;
-        }}
+    <Modal.Root>
+      <Modal.Trigger
+        class={cn(
+          buttonVariants({ size: 'sm', look: 'outline' }),
+          'flex sm:mr-2 sm:h-10',
+        )}
       >
         <LuSlidersHorizontal class={cn('h-4 w-4 sm:mr-2')} />
         <span class={cn('hidden', 'sm:block')}>Make it yours</span>
-      </Button>
-      <Modal.Panel class="make-it-yours fixed bottom-[50%] right-0  top-[50%] mr-0 h-screen max-w-sm rounded-l-base border-y border-l bg-background px-4 py-8 text-foreground shadow-md sm:w-full">
+      </Modal.Trigger>
+      <Modal.Panel position="right">
         <header class="flex w-full">
           <h2 class="justify-self-start text-lg font-bold">Edit Profile</h2>
         </header>
@@ -550,9 +477,11 @@ export default component$<PropsOf<typeof Button>>(() => {
           </Button>
           <CopyCssConfig />
         </footer>
-        <button onClick$={() => (showSig.value = false)} class="absolute right-4 top-5">
+        <Modal.Close
+          class={cn(buttonVariants({ size: 'sm', look: 'link' }), 'fixed right-4 top-5')}
+        >
           <LuX class="h-8 w-8" />
-        </button>
+        </Modal.Close>
       </Modal.Panel>
     </Modal.Root>
   );

apps/website/src/routes/docs/headless/install/index.mdx

@@ -10,9 +10,9 @@ import qwikdevAstroCLI from '../../../../../public/images/qwikdev-astro-cli.webp
 import { ConfettiButton } from './confetti-button';
 
 export const packages = {
-  npm: 'npm install @qwik-ui/headless',
-  yarn: 'yarn add @qwik-ui/headless',
-  pnpm: 'pnpm add @qwik-ui/headless',
+  npm: 'npm i -D @qwik-ui/headless',
+  yarn: 'yarn add -D @qwik-ui/headless',
+  pnpm: 'pnpm i -D @qwik-ui/headless',
 };
 
 export const qwikCityPackages = {