feat(ui): add animations to components

ruru-m07 · Aug 16, 2024 · 0bf14aa · 0bf14aa
1 parent 227f652
commit 0bf14aa
Show file tree

Hide file tree

Showing 25 changed files with 571 additions and 207 deletions.
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -0,0 +1 @@
+github: ruru-m07
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1,6 +1,43 @@
-# Contribution Guidelines
+## Contribution Guidelines
 
-Welcome to our project! We appreciate your interest in contributing. Before you get started, please take a moment to review the following guidelines.
+Thank you for your interest in contributing to this project! We're excited to have you collaborate with us.
+Before you dive in, please take a moment to review these guidelines.
+
+### General Guidelines
+
+This project is organized as a monorepo and utilizes Turborepo, pnpm, and
+[Changesets](https://github.com/changesets/changesets).
+
+#### Before You Submit
+
+- Ensure there are no existing pull requests (PRs) that address the same issue or feature.
+- Format your code using `pnpm run prettier`.
+- Document your changes by running `pnpm changeset` to create a changeset.
+- Execute unit tests with `pnpm test` and update any snapshots as needed.
+
+#### Adding New Features
+
+If you plan to add a new feature, please open an issue first (Feature Request) with detailed information and justification for the feature.
+Once the feature request is approved, feel free to proceed with your pull request.
+
+#### Fixing Bugs
+
+When fixing a bug, include a thorough description of the issue, along with a live demo if possible.
+Alternatively, you can submit a bug report and reference it in your PR.
+
+#### Contributing to Documentation
+
+Improving documentation is always welcome. Please check for any typos or grammatical errors before submitting changes.
+
+### New to Open Source?
+
+A great way to start contributing is by working on documentation.
+The documentation files can be found in `/apps/docs/content/docs`.
+
+To preview the documentation site in development mode,
+first build the necessary dependencies using `pnpm run build --filter=./packages/*`, then start the development server with `pnpm run dev --filter=docs`.
+
+No extra environment variables are required to run this project.
 
 ## Code of Conduct
 

diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx
@@ -4,7 +4,9 @@ import { RootProvider } from "fumadocs-ui/provider";
 import type { Viewport } from "next";
 import { GeistSans } from "geist/font/sans";
 import type { ReactNode } from "react";
+import { RuruProvider } from "ruru-ui/provider";
 import "fumadocs-ui/style.css";
+import { ScrollArea } from "@/components/scroll-area";
 
 export const metadata = createMetadata({
   title: {
@@ -27,7 +29,11 @@ export default function Layout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" className={GeistSans.className} suppressHydrationWarning>
       <body>
-        <RootProvider>{children}</RootProvider>
+        <RootProvider>
+          <RuruProvider>
+            <ScrollArea className="h-screen">{children}</ScrollArea>
+          </RuruProvider>
+        </RootProvider>
       </body>
     </html>
   );

diff --git a/apps/www/components/animationToggle.tsx b/apps/www/components/animationToggle.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import React from "react";
+import { Switch } from "ruru-ui/components/switch";
+import { useRuru } from "ruru-ui/provider";
+
+const AnimationToggle = () => {
+  const { setAnimation } = useRuru();
+  return (
+    <div className="flex items-center space-x-2">
+      <Switch onCheckedChange={(e) => setAnimation(e)} id="toggle-animation" />
+      <label htmlFor="toggle-animation"> toggle animation </label>
+    </div>
+  );
+};
+
+export default AnimationToggle;
diff --git a/apps/www/components/scroll-area.tsx b/apps/www/components/scroll-area.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+
+import { cn } from "@/utils/cn";
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };
diff --git a/apps/www/content/docs/components/tabs.mdx b/apps/www/content/docs/components/tabs.mdx
@@ -57,22 +57,22 @@ import { Tabs, Tab } from "fumadocs-ui/components/tabs";
         </div>
     </Tab>
     <Tab className={"-mt-8"} value="Code">
-        ```tsx
-        import { Tabs, Tab } from "fumadocs-ui/components/tabs";
-
-        export function TabsDemo() {
-            return (
-                <div className="w-[80%]">
-                    <Tabs items={["Apple", "Orange", "Mango"]}>
-                        <Tab value={"Apple"}>Apple</Tab>
-                        <Tab value={"Orange"}>Orange</Tab>
-                        <Tab value={"Mango"}>Mango</Tab>
-                    </Tabs>
-                </div>
-            );
-        }
-
-        ```
+```tsx
+import { Tabs, Tab } from "ruru-ui/components/tabs";
+
+export function TabsDemo() {
+    return (
+        <div className="w-[80%]">
+            <Tabs items={["Apple", "Orange", "Mango"]}>
+                <Tab value={"Apple"}>Apple</Tab>
+                <Tab value={"Orange"}>Orange</Tab>
+                <Tab value={"Mango"}>Mango</Tab>
+            </Tabs>
+        </div>
+    );
+}
+
+```
     </Tab>
 
 </Tabs>
@@ -92,22 +92,22 @@ import { Tabs, Tab } from "fumadocs-ui/components/tabs";
         </div>
     </Tab>
     <Tab className={"-mt-8"} value="Code">
-        ```tsx
-        import { Tabs, Tab } from "fumadocs-ui/components/tabs";
-
-        export function DefaultTabsDemo() {
-            return (
-                <div className="w-[80%]">
-                    <Tabs items={["Apple", "Orange", "Mango"]}>
-                        <Tab value={"Apple"}>Apple</Tab>
-                        <Tab value={"Orange"}>Orange</Tab>
-                        <Tab value={"Mango"}>Mango</Tab>
-                    </Tabs>
-                </div>
-            );
-        }
-
-        ```
+```tsx
+import { Tabs, Tab } from "ruru-ui/components/tabs";
+
+export function DefaultTabsDemo() {
+    return (
+        <div className="w-[80%]">
+            <Tabs items={["Apple", "Orange", "Mango"]}>
+                <Tab value={"Apple"}>Apple</Tab>
+                <Tab value={"Orange"}>Orange</Tab>
+                <Tab value={"Mango"}>Mango</Tab>
+            </Tabs>
+        </div>
+    );
+}
+
+```
     </Tab>
 
 </Tabs>
@@ -125,21 +125,21 @@ import { Tabs, Tab } from "fumadocs-ui/components/tabs";
         </div>
     </Tab>
     <Tab className={"-mt-8"} value="Code">
-        ```tsx
-        import { Tabs, Tab } from "fumadocs-ui/components/tabs";
-
-        export function DisabledTabsDemo() {
-            return (
-                <div className="w-[80%]">
-                    <Tabs disabled items={["Apple", "Orange", "Mango"]}>
-                        <Tab value={"Apple"}>Apple</Tab>
-                        <Tab value={"Orange"}>Orange</Tab>
-                        <Tab value={"Mango"}>Mango</Tab>
-                    </Tabs>
-                </div>
-            );
-        }
-        ```
+```tsx
+import { Tabs, Tab } from "ruru-ui/components/tabs";
+
+export function DisabledTabsDemo() {
+    return (
+        <div className="w-[80%]">
+            <Tabs disabled items={["Apple", "Orange", "Mango"]}>
+                <Tab value={"Apple"}>Apple</Tab>
+                <Tab value={"Orange"}>Orange</Tab>
+                <Tab value={"Mango"}>Mango</Tab>
+            </Tabs>
+        </div>
+    );
+}
+```
     </Tab>
 
 </Tabs>
@@ -157,21 +157,21 @@ import { Tabs, Tab } from "fumadocs-ui/components/tabs";
         </div>
     </Tab>
     <Tab className={"-mt-8"} value="Code">
-        ```tsx
-        import { Tabs, Tab } from "fumadocs-ui/components/tabs";
-
-        export function DefaultIndexTabsDemo() {
-            return (
-                <div className="w-[80%]">
-                    <Tabs defaultIndex={2} items={["Apple", "Orange", "Mango"]}>
-                        <Tab value={"Apple"}>Apple</Tab>
-                        <Tab value={"Orange"}>Orange</Tab>
-                        <Tab value={"Mango"}>Mango</Tab>
-                    </Tabs>
-                </div>
-            );
-        }
-        ```
+```tsx
+import { Tabs, Tab } from "ruru-ui/components/tabs";
+
+export function DefaultIndexTabsDemo() {
+    return (
+        <div className="w-[80%]">
+            <Tabs defaultIndex={2} items={["Apple", "Orange", "Mango"]}>
+                <Tab value={"Apple"}>Apple</Tab>
+                <Tab value={"Orange"}>Orange</Tab>
+                <Tab value={"Mango"}>Mango</Tab>
+            </Tabs>
+        </div>
+    );
+}
+```
     </Tab>
 
 </Tabs>

diff --git a/apps/www/package.json b/apps/www/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-scroll-area": "^1.1.0",
     "fs": "0.0.1-security",
     "fumadocs-core": "12.4.2",
     "fumadocs-docgen": "^1.1.0",

diff --git a/apps/www/public/registry/components/button.json b/apps/www/public/registry/components/button.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "name": "button.tsx",
-      "content": "\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { Spinner } from \"./spinner\";\n\nexport const buttonVariants = cva(\n  \"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow hover:bg-primary/85 hover:shadow-md\",\n        secondary:\n          \"border-input border-[1.5px] bg-primary-foreground hover:bg-[#f3f3f3] dark:hover:bg-[#202020]\",\n        tertiary: \"text-primary hover:bg-[#f3f3f3] dark:hover:bg-[#202020]\",\n        error: \"bg-[#d93036] hover:bg-[#ff6166]\",\n        warning: \"bg-[#ff990a] text-primary-foreground hover:bg-[#d27504]\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2\",\n        small: \"h-8 rounded-md px-3 text-xs\",\n        large: \"h-10 rounded-md px-8\",\n        icon: \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends Omit<\n      React.ButtonHTMLAttributes<HTMLButtonElement>,\n      \"prefix\" | \"suffix\"\n    >,\n    VariantProps<typeof buttonVariants> {\n  \n  asChild?: boolean;\n  \n  prefix?: React.ReactNode;\n  \n  suffix?: React.ReactNode;\n  \n  disabled?: boolean;\n  \n  loading?: boolean;\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      size = \"default\",\n      asChild = false,\n      prefix,\n      suffix,\n      disabled = false,\n      loading = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"button\";\n\n    return (\n      <div className={disabled ? \" cursor-not-allowed \" : undefined}>\n        <Comp\n          className={cn(\n            buttonVariants({ variant: loading ? \"secondary\" : variant, size }),\n            className,\n          )}\n          ref={ref}\n          disabled={disabled}\n          {...props}\n        >\n          {loading ? <Spinner className=\"mr-2\" /> : null}\n          {prefix ? (\n            <span className=\"mr-2 flex items-center justify-center\">\n              {prefix}\n            </span>\n          ) : null}\n          {props.children}\n          {suffix ? (\n            <span className=\"ml-2 flex items-center justify-center\">\n              {suffix}\n            </span>\n          ) : null}\n        </Comp>\n      </div>\n    );\n  },\n);\n\nButton.displayName = \"Button\";\n"
+      "content": "\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { Spinner } from \"./spinner\";\nimport { motion } from \"framer-motion\";\nimport { useRuru } from \"@/provider\";\n\nexport const buttonVariants = cva(\n  \"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow hover:bg-primary/85 hover:shadow-md\",\n        secondary:\n          \"border-input border-[1.5px] bg-primary-foreground hover:bg-[#f3f3f3] dark:hover:bg-[#202020]\",\n        tertiary: \"text-primary hover:bg-[#f3f3f3] dark:hover:bg-[#202020]\",\n        error: \"bg-[#d93036] hover:bg-[#ff6166]\",\n        warning: \"bg-[#ff990a] text-primary-foreground hover:bg-[#d27504]\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2\",\n        small: \"h-8 rounded-md px-3 text-xs\",\n        large: \"h-10 rounded-md px-8\",\n        icon: \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends Omit<\n      React.ButtonHTMLAttributes<HTMLButtonElement>,\n      \"prefix\" | \"suffix\"\n    >,\n    VariantProps<typeof buttonVariants> {\n  \n  asChild?: boolean;\n  \n  prefix?: React.ReactNode;\n  \n  suffix?: React.ReactNode;\n  \n  disabled?: boolean;\n  \n  loading?: boolean;\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      size = \"default\",\n      asChild = false,\n      prefix,\n      suffix,\n      disabled = false,\n      loading = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const { animation } = useRuru();\n\n    const Comp = asChild ? Slot : \"button\";\n\n    const buttonContent = (\n      <Comp\n        className={cn(\n          buttonVariants({\n            variant: loading ? \"secondary\" : variant,\n            size,\n          }),\n          className,\n        )}\n        ref={ref}\n        disabled={disabled}\n        {...props}\n      >\n        {loading ? <Spinner className=\"mr-2\" /> : null}\n        {prefix ? (\n          <span className=\"mr-2 flex items-center justify-center\">\n            {prefix}\n          </span>\n        ) : null}\n        {props.children}\n        {suffix ? (\n          <span className=\"ml-2 flex items-center justify-center\">\n            {suffix}\n          </span>\n        ) : null}\n      </Comp>\n    );\n\n    return (\n      <div className={disabled ? \" cursor-not-allowed \" : undefined}>\n        {animation ? (\n          <motion.div whileTap={{ scale: 0.93 }}>{buttonContent}</motion.div>\n        ) : (\n          buttonContent\n        )}\n      </div>\n    );\n  },\n);\n\nButton.displayName = \"Button\";\n"
     }
   ],
   "type": "components:ui",