refactor: 0.3.1 remove tailwindcss and tailwind-variants

actifyjs · Nov 7, 2024 · 61c82e7 · 61c82e7
1 parent b2abf09
commit 61c82e7
Show file tree

Hide file tree

Showing 94 changed files with 1,831 additions and 1,483 deletions.
diff --git a/apps/docs/content/components/avatar.md b/apps/docs/content/components/avatar.md
@@ -6,33 +6,3 @@ description: Avatar is a component that can be used to display a user's avatar.
 ## Usage
 
 <usage></usage>
-
-## Props
-
-| Props     | Type                                             | Description                              | Default |
-| --------- | ------------------------------------------------ | ---------------------------------------- | ------- |
-| `square`  | `boolean`                                        | use tailwind css class name rounded-none | `false` |
-| `size`    | `xs` `sm` `md` `lg` `xl` `2xl`                   | The color of the badge.                  | `md`    |
-| `rounded` | `boolean` `sm` `md` `lg` `xl` `2xl` `3xl` `full` | use tailwind css class name rounded-lg   | `full`  |
-
-## Rounded
-
-<preview code='<Avatar rounded />'>
-</preview>
-
-## Square
-
-<preview code='<Avatar square />'>
-</preview>
-
-## Avatar Sizes
-
-<preview code='<div className="flex w-max items-end gap-4">
-      <Avatar size="xs" />
-      <Avatar size="sm" />
-      <Avatar size="md" />
-      <Avatar size="lg" />
-      <Avatar size="xl" />
-      <Avatar size="2xl" />
-    </div>'>
-</preview>
diff --git a/apps/docs/content/components/swiper.md b/apps/docs/content/components/swiper.md
@@ -6,105 +6,3 @@ description: Swiper is simple banner slider with a lot of features.
 ## Usage
 
 <usage></usage>
-
-## Custom Controls
-
-<preview code='() => {
-  const items = [
-    {
-      title: "Swiper 1",
-      src: "https://images.unsplash.com/photo-1691977504044-fa2e8c813431?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=8"
-    },
-    {
-      title: "Swiper 2",
-      src: "https://images.unsplash.com/photo-1691763731792-c5ee77f9112a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1524&q=80"
-    },
-    {
-      title: "Swiper 3",
-      src: "https://images.unsplash.com/photo-1653916986137-996184bc4af0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80"
-    }
-  ]
-  return (
-    <Swiper autoPlay className="h-[320px]">
-      {items.map((item, index) => (
-        <Swiper.Item key={index}>
-          <img
-            src={item.src}
-            alt={item.title}
-            className="h-full w-full object-cover"
-          />
-        </Swiper.Item>
-      ))}
-		<Swiper.PrevButton className="rounded-full">
-      <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="purple" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"/></svg>
-		</Swiper.PrevButton>
-		<Swiper.NextButton className="rounded-full">
-      <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="purple" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg>
-		</Swiper.NextButton>			
-    </Swiper>
-  )}'>
-</preview>
-
-## Custom Indicators
-
-<preview code='() => {
-	const items = [{
-	   title: "Swiper 1",
-	   src: "https://images.unsplash.com/photo-1691977504044-fa2e8c813431?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=8"
- 	},
- 	{
-	   title: "Swiper 2",
-	   src: "https://images.unsplash.com/photo-1691763731792-c5ee77f9112a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1524&q=80"
- 	},
- 	{
-	   title: "Swiper 3",
-	   src: "https://images.unsplash.com/photo-1653916986137-996184bc4af0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80"
- 	}]
-  return (
-	  <Swiper
-	  	className="h-[320px]"
-	  	autoPlay
-		indicator={({ setCurrent, current, count }) => (
-        <div className="absolute bottom-4 left-2/4 z-50 flex -translate-x-2/4 gap-2">
-          {[...Array(count)].map((_, i) => (
-            <span
-              key={i}
-              className={`block h-1 cursor-pointer rounded-2xl transition-all ${
-                current === i ? "w-8 bg-white" : "w-4 bg-white/50"
-              }`}
-              onClick={() => setCurrent(i)}
-            />
-          ))}
-        </div>
-      )}
-	  	>
-	   {items.map((item, index) => (
-	     <Swiper.Item key={index}>
-	       <img
-	         src={item.src}
-	         alt={item.title}
-	         className="h-full w-full object-cover"
-	       />
-	     </Swiper.Item>
-	   ))}
-	 </Swiper>
-  )}'>
-</preview>
-
-## Props
-
-| Props      | Type               | Description                                                 | Default |
-| ---------- | ------------------ | ----------------------------------------------------------- | ------- |
-| autoPlay   | `boolean`          | Sets the autoplay mode for carousel                         | `false` |
-| current    | `number`           | Sets carousel start play index                              | `0`     |
-| interval   | `number`           | Sets the interval duration for autoplay mode in miliseconds | `3000`  |
-| indicator  | `React.ReactNode`  | Sets the indicator component                                | `null`  |
-| `children` | `React.React.Node` |                                                             | `null`  |
-
-## Sub Component
-
-| Name              | Description                 |
-| ----------------- | --------------------------- |
-| Swiper.Item       | Swiper item                 |
-| Swiper.PrevButton | Swiper controls prev button |
-| Swiper.NextButton | Swiper controls next button |
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -35,6 +35,7 @@
     "postcss": "^8.4.38",
     "react-live": "^4.1.6",
     "tailwind-merge": "^2.5.4",
+    "tailwind-variants": "^0.2.1",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5"
   },

diff --git a/apps/docs/src/components/AppDrawer.tsx b/apps/docs/src/components/AppDrawer.tsx
@@ -1,6 +1,12 @@
 'use client'
 
-import { Icon, IconButton, NavigationDrawer } from 'actify'
+import {
+  DrawerActivator,
+  DrawerContent,
+  Icon,
+  IconButton,
+  NavigationDrawer
+} from 'actify'
 
 import Aside from '@/components/Aside'
 import { useState } from 'react'
@@ -15,14 +21,14 @@ export default function AppDrawer() {
       placement="left"
       className="overflow-hidden"
     >
-      <NavigationDrawer.Activator asChild className="md:hidden">
+      <DrawerActivator asChild className="md:hidden">
         <IconButton color="primary">
           <Icon>menu</Icon>
         </IconButton>
-      </NavigationDrawer.Activator>
-      <NavigationDrawer.Content className="w-60">
+      </DrawerActivator>
+      <DrawerContent style={{ width: '15rem' }}>
         <Aside open={open} />
-      </NavigationDrawer.Content>
+      </DrawerContent>
     </NavigationDrawer>
   )
 }
diff --git a/apps/docs/src/usages/accordion.tsx b/apps/docs/src/usages/accordion.tsx
@@ -1,20 +1,26 @@
-import { Accordion, Icon } from 'actify'
+import {
+  Accordion,
+  AccordionContent,
+  AccordionHeader,
+  AccordionItem,
+  Icon
+} from 'actify'
 
 export default () => {
   return (
     <Accordion open={[, true]}>
-      <Accordion.Item>
-        <Accordion.Header>Overview</Accordion.Header>
-        <Accordion.Content>
+      <AccordionItem>
+        <AccordionHeader>Overview</AccordionHeader>
+        <AccordionContent>
           Welcome to Actify, an open-source React Components Library designed to
           accelerate your React application development. Actify leverages
           TypeScript, Tailwind CSS, Floating-UI, Framer Motion, Material Design
           3, and more to provide a comprehensive set of modern and customizable
           UI components.
-        </Accordion.Content>
-      </Accordion.Item>
-      <Accordion.Item>
-        <Accordion.Header asChild>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem>
+        <AccordionHeader asChild>
           {({ active }) => (
             <div
               className={`text-2xl cursor-pointer ${
@@ -33,16 +39,16 @@ export default () => {
               </div>
             </div>
           )}
-        </Accordion.Header>
-        <Accordion.Content>
+        </AccordionHeader>
+        <AccordionContent>
           Actify is an open source react component library written in Vite +
           React + Tailwind CSS based on Google's Material Design 3. Highly
           inspired by Vuetify. You can use it for write react pages.
-        </Accordion.Content>
-      </Accordion.Item>
-      <Accordion.Item>
-        <Accordion.Header>Why Actify? (custom content style)</Accordion.Header>
-        <Accordion.Content asChild>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem>
+        <AccordionHeader>Why Actify? (custom content style)</AccordionHeader>
+        <AccordionContent asChild>
           {({ active }) => (
             <div
               className={`grid duration-300 grid-rows-[0fr] transition-[grid-template-rows] ${active ? 'grid-rows-[1fr]' : ''}`}
@@ -56,8 +62,8 @@ export default () => {
               </p>
             </div>
           )}
-        </Accordion.Content>
-      </Accordion.Item>
+        </AccordionContent>
+      </AccordionItem>
     </Accordion>
   )
 }
diff --git a/apps/docs/src/usages/app-bars/bottom-app-bar.tsx b/apps/docs/src/usages/app-bars/bottom-app-bar.tsx
@@ -1,17 +1,23 @@
-import { BottomAppBar, Fab, Icon } from 'actify'
+import {
+  BottomAppBar,
+  BottomAppBarFab,
+  BottomAppBarIcons,
+  Fab,
+  Icon
+} from 'actify'
 
 export default () => {
   return (
     <BottomAppBar className="max-w-3xl text-on-primary">
-      <BottomAppBar.Icons>
+      <BottomAppBarIcons>
         <Icon>home</Icon>
         <Icon>person</Icon>
         <Icon>photo_camera</Icon>
         <Icon>search</Icon>
-      </BottomAppBar.Icons>
-      <BottomAppBar.Fab>
+      </BottomAppBarIcons>
+      <BottomAppBarFab>
         <Fab name="fab" icon={<Icon>add</Icon>} color="bg-surface" />
-      </BottomAppBar.Fab>
+      </BottomAppBarFab>
     </BottomAppBar>
   )
 }
diff --git a/apps/docs/src/usages/avatar.tsx b/apps/docs/src/usages/avatar.tsx
@@ -1,3 +1,3 @@
 import { Avatar } from 'actify'
 
-export default () => <Avatar />
+export default () => <Avatar className="size-12 rounded-full" />
diff --git a/apps/docs/src/usages/carousel.tsx b/apps/docs/src/usages/carousel.tsx
@@ -1,23 +1,23 @@
-import { Carousel } from 'actify'
+import { Carousel, CarouselItem } from 'actify'
 
 export default () => {
   return (
     <Carousel autoPlay control indicator infinite>
-      <Carousel.Item>
+      <CarouselItem>
         <img
           alt="carousel 1"
           className="h-full w-full object-cover"
           src="https://images.unsplash.com/photo-1692812298405-db9c1ca093ed?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80"
         />
-      </Carousel.Item>
-      <Carousel.Item>
+      </CarouselItem>
+      <CarouselItem>
         <img
           alt="carousel 2"
           className="h-full w-full object-cover"
           src="https://images.unsplash.com/photo-1692902295604-6c5109aa55a4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80"
         />
-      </Carousel.Item>
-      <Carousel.Item>
+      </CarouselItem>
+      <CarouselItem>
         <img
           alt="carousel 3"
           className="h-full w-full object-cover"
@@ -26,7 +26,7 @@ export default () => {
         <p className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-6xl bg-surface/90 p-2 rounded-xl">
           Custom Text
         </p>
-      </Carousel.Item>
+      </CarouselItem>
     </Carousel>
   )
 }