feat(select): improve select component and update documentation

ruru-m07 · Aug 17, 2024 · 39a3aba · 39a3aba
1 parent 53b7f24
commit 39a3aba
Show file tree

Hide file tree

Showing 24 changed files with 614 additions and 105 deletions.
diff --git a/apps/www/app/playground/page.tsx b/apps/www/app/playground/page.tsx
@@ -37,6 +37,7 @@ import {
   SelectTrigger,
   SelectValue,
   SelectSeparator,
+  selectAnimationVariants,
 } from "ruru-ui/components/select";
 import AnimationToggle from "@/components/animationToggle";
 
@@ -556,6 +557,28 @@ const Playground = () => {
           </SelectContent>
         </Select>
       </Card>
+      <div className="rounded-md w-[80%] py-4 grid grid-cols-3 place-items-center my-2 mx-2 border-[1.5px] border-input">
+        {Object.keys(selectAnimationVariants).map((variantKey: any, index) => (
+          <div key={index} style={{ marginBottom: "20px" }}>
+            <Select defaultValue={variantKey}>
+              <SelectTrigger className="w-[180px]">
+                <SelectValue placeholder="Select a fruit" />
+              </SelectTrigger>
+              <SelectContent variants={variantKey}>
+                <SelectGroup>
+                  <SelectLabel>{variantKey}</SelectLabel>
+                  <SelectSeparator />
+                  <SelectItem value="banana">Banana</SelectItem>
+                  <SelectItem value="blueberry">Blueberry</SelectItem>
+                  <SelectItem value={variantKey}>{variantKey}</SelectItem>
+                  <SelectItem value="grapes">Grapes</SelectItem>
+                  <SelectItem value="pineapple">Pineapple</SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </div>
+        ))}
+      </div>
 
       <div className="my-52" />
     </div>

diff --git a/apps/www/components/selectAnimationVariants.tsx b/apps/www/components/selectAnimationVariants.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import React from "react";
+import {
+  Select,
+  selectAnimationVariants,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "ruru-ui/components/select";
+
+const SelectAnimationVariants = () => {
+  return (
+    <div className="py-4 grid grid-cols-3 place-items-center gap-10">
+      {Object.keys(selectAnimationVariants).map((variantKey: any, index) => (
+        <div key={index} style={{ marginBottom: "20px" }}>
+          <Select defaultValue={variantKey}>
+            <SelectTrigger className="w-[180px]">
+              <SelectValue placeholder="Select a fruit" />
+            </SelectTrigger>
+            <SelectContent variants={variantKey}>
+              <SelectGroup>
+                <SelectLabel>{variantKey}</SelectLabel>
+                <SelectSeparator />
+                <SelectItem value="banana">Banana</SelectItem>
+                <SelectItem value="blueberry">Blueberry</SelectItem>
+                <SelectItem value={variantKey}>{variantKey}</SelectItem>
+                <SelectItem value="grapes">Grapes</SelectItem>
+                <SelectItem value="pineapple">Pineapple</SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default SelectAnimationVariants;
diff --git a/apps/www/content/docs/animation.mdx b/apps/www/content/docs/animation.mdx
@@ -3,3 +3,38 @@ title: Animation
 description: The Animation component is used to animate elements.
 ---
 
+import { Callout } from 'fumadocs-ui/components/callout';
+
+<Callout title="feat: improve component UI" type="warn">
+  Will change the components soon. will batter UI
+</Callout>
+
+## Animation
+
+The `Animation` component is used to animate elements.
+
+```tsx title="AnimationToggle.tsx"
+// [!code word:useRuru]
+// [!code word:setAnimation]
+"use client";
+
+import React from "react";
+import { Switch } from "@/components/ui/switch";
+import { useRuru } from "@/provider";  // [!code highlight]
+
+const AnimationToggle = () => {
+  const { setAnimation } = useRuru();  // [!code highlight]
+  return (
+    <div className="flex items-center space-x-2">
+      <Switch
+        defaultChecked
+        onCheckedChange={(e) => setAnimation(e)} // [!code highlight]
+        id="toggle-animation"
+      />
+      <label htmlFor="toggle-animation"> toggle animation </label>
+    </div>
+  );
+};
+
+export default AnimationToggle;
+```
diff --git a/apps/www/content/docs/cli.mdx b/apps/www/content/docs/cli.mdx
@@ -24,12 +24,12 @@ pnpm dlx ruru-ui-cli@latest init
 </Tab>
 <Tab value={"yarn"}>
 ```bash
-npx ruru-ui@latest init 
+npx ruru-ui-cli@latest init 
 ```
 </Tab>
 <Tab value={"bun"}>
 ```bash
-bunx --bun ruru-ui@latest init 
+bunx --bun ruru-ui-cli@latest init 
 ```
 </Tab>
 </Tabs>
@@ -88,12 +88,12 @@ pnpm dlx ruru-ui-cli@latest add [component]
 </Tab>
 <Tab value={"yarn"}>
 ```bash
-npx ruru-ui@latest add [component] 
+npx ruru-ui-cli@latest add [component] 
 ```
 </Tab>
 <Tab value={"bun"}>
 ```bash
-bunx --bun ruru-ui@latest add [component]
+bunx --bun ruru-ui-cli@latest add [component]
 ```
 </Tab>
 </Tabs>

diff --git a/apps/www/content/docs/components/avatar.mdx b/apps/www/content/docs/components/avatar.mdx
@@ -29,12 +29,12 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
       </Tab>
       <Tab value={"yarn"}>
       ```bash
-      npx ruru-ui@latest add avatar
+      npx ruru-ui-cli@latest add avatar
       ```
       </Tab>
       <Tab value={"bun"}>
       ```bash
-      bunx --bun ruru-ui@latest add avatar
+      bunx --bun ruru-ui-cli@latest add avatar
       ```
     </Tab>
     </Tabs>

diff --git a/apps/www/content/docs/components/badge.mdx b/apps/www/content/docs/components/badge.mdx
@@ -26,12 +26,12 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
       </Tab>
       <Tab value={"yarn"}>
       ```bash
-      npx ruru-ui@latest add badge
+      npx ruru-ui-cli@latest add badge
       ```
       </Tab>
       <Tab value={"bun"}>
       ```bash
-      bunx --bun ruru-ui@latest add badge
+      bunx --bun ruru-ui-cli@latest add badge
       ```
     </Tab>
     </Tabs>

diff --git a/apps/www/content/docs/components/button.mdx b/apps/www/content/docs/components/button.mdx
@@ -31,12 +31,12 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
       </Tab>
       <Tab value={"yarn"}>
       ```bash
-      npx ruru-ui@latest add button
+      npx ruru-ui-cli@latest add button
       ```
       </Tab>
       <Tab value={"bun"}>
       ```bash
-      bunx --bun ruru-ui@latest add button
+      bunx --bun ruru-ui-cli@latest add button
       ```
     </Tab>
     </Tabs>

diff --git a/apps/www/content/docs/components/checkbox.mdx b/apps/www/content/docs/components/checkbox.mdx
@@ -26,12 +26,12 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
       </Tab>
       <Tab value={"yarn"}>
       ```bash
-      npx ruru-ui@latest add checkbox
+      npx ruru-ui-cli@latest add checkbox
       ```
       </Tab>
       <Tab value={"bun"}>
       ```bash
-      bunx --bun ruru-ui@latest add checkbox
+      bunx --bun ruru-ui-cli@latest add checkbox
       ```
     </Tab>
     </Tabs>

diff --git a/apps/www/content/docs/components/input.mdx b/apps/www/content/docs/components/input.mdx
@@ -26,12 +26,12 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
       </Tab>
       <Tab value={"yarn"}>
       ```bash
-      npx ruru-ui@latest add input
+      npx ruru-ui-cli@latest add input
       ```
       </Tab>
       <Tab value={"bun"}>
       ```bash
-      bunx --bun ruru-ui@latest add input
+      bunx --bun ruru-ui-cli@latest add input
       ```
     </Tab>
     </Tabs>

diff --git a/apps/www/content/docs/components/select.mdx b/apps/www/content/docs/components/select.mdx
@@ -20,6 +20,8 @@ import {
 } from "ruru-ui/components/select";
 import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
 import SelectCountries from "../../../components/selectLargeData.tsx"
+import SelectAnimationVariants from "../../../components/selectAnimationVariants.tsx"
+import { Callout } from 'fumadocs-ui/components/callout';
 
 ## Installation
 
@@ -38,12 +40,12 @@ import SelectCountries from "../../../components/selectLargeData.tsx"
       </Tab>
       <Tab value={"yarn"}>
       ```bash
-      npx ruru-ui@latest add select
+      npx ruru-ui-cli@latest add select
       ```
       </Tab>
       <Tab value={"bun"}>
       ```bash
-      bunx --bun ruru-ui@latest add select
+      bunx --bun ruru-ui-cli@latest add select
       ```
     </Tab>
     </Tabs>
@@ -342,6 +344,23 @@ You can add scroll buttons to the `Select` component by using the `SelectScrollD
 </Tab>
 </Tabs>
 
+## Select Animation Variants
+
+The `Select` component supports two animation variants: `zoom`, `scaleBounce` Etc.... You can set the animation variant by passing the `variant` prop to the `SelectContent` component.
+
+<Tabs items={["Preview", "Code"]}>
+<Tab className={"flex justify-center"} value="Preview">
+  <SelectAnimationVariants />
+</Tab>
+<Tab className={"-mt-8"} value="Code">
+
+</Tab>
+</Tabs>
+
+<Callout type="info">
+  The animation variants only work when the animation mode is turned on.
+</Callout>
+
 ## Props
 
 | Name              | Type                     | Default   | Description                                |

diff --git a/apps/www/content/docs/components/spinner.mdx b/apps/www/content/docs/components/spinner.mdx
@@ -25,12 +25,12 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
       </Tab>
       <Tab value={"yarn"}>
       ```bash
-      npx ruru-ui@latest add spinner
+      npx ruru-ui-cli@latest add spinner
       ```
       </Tab>
       <Tab value={"bun"}>
       ```bash
-      bunx --bun ruru-ui@latest add spinner
+      bunx --bun ruru-ui-cli@latest add spinner
       ```
     </Tab>
     </Tabs>

diff --git a/apps/www/content/docs/components/switch.mdx b/apps/www/content/docs/components/switch.mdx
@@ -27,12 +27,12 @@ import SwiychEvent from "../../../components/SwitchEvent.tsx";
       </Tab>
       <Tab value={"yarn"}>
       ```bash
-      npx ruru-ui@latest add switch
+      npx ruru-ui-cli@latest add switch
       ```
       </Tab>
       <Tab value={"bun"}>
       ```bash
-      bunx --bun ruru-ui@latest add switch
+      bunx --bun ruru-ui-cli@latest add switch
       ```
     </Tab>
     </Tabs>

diff --git a/apps/www/content/docs/components/tabs.mdx b/apps/www/content/docs/components/tabs.mdx
@@ -24,12 +24,12 @@ import { Tabs, Tab } from "fumadocs-ui/components/tabs";
       </Tab>
       <Tab value={"yarn"}>
       ```bash
-      npx ruru-ui@latest add tabs
+      npx ruru-ui-cli@latest add tabs
       ```
       </Tab>
       <Tab value={"bun"}>
       ```bash
-      bunx --bun ruru-ui@latest add tabs
+      bunx --bun ruru-ui-cli@latest add tabs
       ```
     </Tab>
     </Tabs>

diff --git a/apps/www/content/docs/components/textarea.mdx b/apps/www/content/docs/components/textarea.mdx
@@ -25,12 +25,12 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
       </Tab>
       <Tab value={"yarn"}>
       ```bash
-      npx ruru-ui@latest add textarea
+      npx ruru-ui-cli@latest add textarea
       ```
       </Tab>
       <Tab value={"bun"}>
       ```bash
-      bunx --bun ruru-ui@latest add textarea
+      bunx --bun ruru-ui-cli@latest add textarea
       ```
     </Tab>
     </Tabs>

diff --git a/apps/www/content/docs/components/tooltip.mdx b/apps/www/content/docs/components/tooltip.mdx
@@ -32,12 +32,12 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
       </Tab>
       <Tab value={"yarn"}>
       ```bash
-      npx ruru-ui@latest add tooltip
+      npx ruru-ui-cli@latest add tooltip
       ```
       </Tab>
       <Tab value={"bun"}>
       ```bash
-      bunx --bun ruru-ui@latest add tooltip
+      bunx --bun ruru-ui-cli@latest add tooltip
       ```
     </Tab>
     </Tabs>

diff --git a/apps/www/content/docs/dark-mode.mdx b/apps/www/content/docs/dark-mode.mdx
@@ -3,6 +3,33 @@ title: Dark Mode
 description: How to enable dark mode in your app.
 ---
 
-import { Callout } from "fumadocs-ui/components/callout";
+import { Callout } from 'fumadocs-ui/components/callout';
 
-<Callout title="Component coming soon"></Callout>
+<Callout title="feat: improve component UI" type="warn">
+  Will change the components soon. will batter UI
+</Callout>
+
+## Dark Mode
+
+```tsx title="DarkModeToggle.tsx"
+// [!code word:useTheme]
+// [!code word:setTheme]
+"use client";
+
+import * as React from "react";
+import { useTheme } from "@/provider/theme"; // [!code highlight]
+
+import { Button } from "@/components/ui/button";
+
+export function ModeToggle() {
+  const { setTheme } = useTheme(); // [!code highlight]
+
+  return (
+    <div className="flex my-10 space-x-5">
+      <Button onClick={() => setTheme("light")}>Light</Button>
+      <Button onClick={() => setTheme("dark")}>Dark</Button>
+      <Button onClick={() => setTheme("system")}>system</Button>
+    </div>
+  );
+}
+```