ruru-m07 · ruru-m07 · Oct 20, 2024 · Oct 18, 2024 · Oct 19, 2024 · Oct 19, 2024
diff --git a/.gitignore b/.gitignore
@@ -36,3 +36,4 @@ yarn-error.log*
 # Misc
 .DS_Store
 *.pem
+.tmp
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1 +1,14 @@
-pnpm run --filter=./apps/www build:registry && pnpm prettier
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+echo "Running pre-commit hook..."
+if ! pnpm run --filter=./apps/www build:registry; then
+  echo "Error: Failed to build registry. Commit aborted."
+  exit 1
+fi
+echo "Registry built successfully. Running Prettier..."
+if ! pnpm prettier; then
+  echo "Error: Prettier formatting failed. Commit aborted."
+  exit 1
+fi
+echo "Pre-commit hook completed successfully."
diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx
@@ -29,7 +29,7 @@ export default function Layout({ children }: { children: ReactNode }) {
     >
       <body>
         <CSPostHogProvider>
-          <RootProvider>
+          <RootProvider theme={{ defaultTheme: "dark" }}>
             <RuruProvider>
               <ScrollArea className="h-screen">{children}</ScrollArea>
             </RuruProvider>

diff --git a/apps/www/app/page.tsx b/apps/www/app/page.tsx
@@ -1,4 +1,6 @@
-import React from "react";
+"use client";
+
+import React, { useEffect } from "react";
 import Hero from "@/components/hero";
 import {
   Heart,
@@ -34,6 +36,13 @@ const CodeBlockServer = dynamic(
 );
 
 export default function HomePage() {
+  useEffect(() => {
+    if (localStorage.getItem("theme") === "light") {
+      localStorage.setItem("theme", "dark");
+      window.location.reload();
+    }
+  }, []);
+
   const data = {
     initTerminalText: `npx ruru-ui-cli@latest init
 
@@ -116,7 +125,7 @@ export default function App() {
               </h2>
             </div>
             <ShapratorHorizontal />
-            <div className="grid grid-cols-2">
+            <div className="grid grid-cols-1 sm:grid-cols-2">
               <div className="border-r p-4 py-6">
                 <StepCounter count={1} />
                 <h4 className="text-xl font-bold">Initialize.</h4>
@@ -143,7 +152,7 @@ export default function App() {
             <div className="flex flex-col items-center justify-center py-4">
               <StepCounter count={3} className="mb-0 mt-4" />
               <h4 className="text-xl font-bold">Use components.</h4>
-              <p className="text-muted-foreground mt-2">
+              <p className="text-muted-foreground mt-2 text-sm">
                 costomize and integrate components in your project. 🚀
               </p>
 
@@ -203,7 +212,7 @@ export default function App() {
 
             <ShapratorHorizontal />
 
-            <div className="grid grid-cols-3 grid-rows-2">
+            <div className="grid sm:grid-cols-1 md:grid-cols-3 grid-rows-2">
               <div className="border-r px-6 py-12 hover:bg-primary-foreground/70">
                 <div className="mb-4 flex flex-row items-center gap-2 text-muted-foreground">
                   <Settings2
@@ -381,8 +390,8 @@ export default function App() {
 
             <ShapratorHorizontal />
 
-            <div className="flex">
-              <Link href={"/theme"} className="w-1/2 border-r">
+            <div className="flex sm:flex-row">
+              <Link href={"/theme"} className="w-full md:w-1/2 border-r">
                 <div className="z-10 p-4">
                   <div className="flex items-center ml-5 mt-5">
                     <Palette size={20} strokeWidth={1.5} className="mr-2" />
@@ -401,7 +410,7 @@ export default function App() {
                   />
                 </div>
               </Link>
-              <Link href={"/blocks"} className="w-1/2 bg-[#080808]">
+              <Link href={"/blocks"} className="w-full md:w-1/2 bg-[#080808]">
                 <div className="z-10 p-4">
                   <div className="flex items-center ml-5 mt-5">
                     <LayoutTemplate
@@ -443,18 +452,18 @@ export default function App() {
 
             <ShapratorHorizontal />
 
-            <div className="flex items-center">
-              <h1 className="text-2xl font-bold w-1/3 text-muted-foreground flex items-center justify-center p-4">
+            <div className="grid md:grid-cols-3">
+              <h1 className="text-2xl font-bold text-muted-foreground flex items-center justify-center p-4">
                 Build Your Components.
               </h1>
-              <div className="w-1/3 p-4 border-l border-r">
+              <div className="p-4 border-l border-r">
                 <span className="text-muted-foreground">Available now</span>
                 <CodeBlockServer
                   lang="bash"
                   code={[`npx ruru-ui-cli@latest init`]}
                 />
               </div>
-              <div className="text-2xl font-bold w-1/3 text-muted-foreground h-full flex items-center justify-center p-4 space-x-4">
+              <div className="text-2xl font-bold text-muted-foreground h-full flex items-center justify-center p-4 space-x-4">
                 <Link
                   className={cn(
                     "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",

diff --git a/apps/www/app/playground/page.tsx b/apps/www/app/playground/page.tsx
@@ -38,9 +38,10 @@ import {
   SelectSeparator,
   selectAnimationVariants,
 } from "ruru-ui/components/select";
-import Modal, { ModalProvider } from "ruru-ui/components/modal";
+import Modal, { ModalProvider, modalVariants } from "ruru-ui/components/modal";
 import { Dropzone } from "ruru-ui/components/dropzone";
 import AdvanceDropzone from "@/components/preview/dropzone/advanceDropzone";
+import StackPlayground from "@/components/stackPlayground";
 
 const Playground = () => {
   const handleSubmit = async () => {
@@ -609,6 +610,37 @@ const Playground = () => {
         </ModalProvider>
       </Card>
 
+      {(Object.keys(modalVariants) as Array<keyof typeof modalVariants>).map(
+        (variantKey) => (
+          <Card key={variantKey}>
+            <ModalProvider>
+              <Modal.Trigger>Open {variantKey} Modal</Modal.Trigger>
+              <Modal animationVariant={variantKey}>
+                <Modal.Body>
+                  <Modal.Header>
+                    <Modal.Title>Create Username</Modal.Title>
+                    <Modal.Subtitle>
+                      Enter a unique name for your token to differentiate it
+                      from other tokens and then select the scope.
+                    </Modal.Subtitle>
+                  </Modal.Header>
+                  <Modal.Content>
+                    <Input
+                      label="username"
+                      placeholder="enter your username."
+                    />
+                  </Modal.Content>
+                </Modal.Body>
+                <Modal.Actions>
+                  <Modal.Close variant="secondary">Cancel</Modal.Close>
+                  <Modal.Action onClick={handleSubmit}>Submit</Modal.Action>
+                </Modal.Actions>
+              </Modal>
+            </ModalProvider>
+          </Card>
+        ),
+      )}
+
       <Card className="p-10">
         <Dropzone onDrop={(acceptedFiles) => console.log(acceptedFiles)} />
       </Card>
@@ -617,6 +649,8 @@ const Playground = () => {
         <AdvanceDropzone />
       </Card>
 
+      <StackPlayground />
+
       <div className="my-10" />
     </div>
   );

diff --git a/apps/www/components/SwitchEvent.tsx b/apps/www/components/SwitchEvent.tsx
@@ -3,17 +3,17 @@
 import React, { useState } from "react";
 import { Switch } from "ruru-ui/components/switch";
 
-const SwiychEvent = (): React.ReactNode => {
+const SwitchEvent = (): React.ReactNode => {
   const [value, setValue] = useState<boolean>(false);
   return (
     <div className="flex flex-col justify-center items-center">
       <div className="flex items-center space-x-2">
-        <Switch onCheckedChange={(e) => setValue(e)} id="toggle-animation" />
-        <label htmlFor="toggle value"> toggle value </label>
+        <Switch onCheckedChange={(e) => setValue(e)} id="toggle-value" />
+        <label htmlFor="toggle-value"> toggle value </label>
       </div>
       <p>{String(value)}</p>
     </div>
   );
 };
 
-export default SwiychEvent;
+export default SwitchEvent;
diff --git a/apps/www/components/contributor-count.tsx b/apps/www/components/contributor-count.tsx
@@ -1,7 +1,9 @@
-import type { HTMLAttributes } from "react";
+"use client";
+
+import { useEffect, useState, type HTMLAttributes } from "react";
 import Image from "next/image";
 import { cn } from "@/utils/cn";
-import { fetchContributors } from "@/utils/get-contributors";
+import { Contributor, fetchContributors } from "@/utils/get-contributors";
 
 export interface ContributorCounterProps
   extends HTMLAttributes<HTMLDivElement> {
@@ -10,16 +12,28 @@ export interface ContributorCounterProps
   displayCount?: number;
 }
 
-export default async function ContributorCounter({
+const ContributorCounter = ({
   repoOwner,
   repoName,
   displayCount = 20,
   ...props
-}: ContributorCounterProps): Promise<React.ReactElement> {
-  const contributors = await fetchContributors(repoOwner, repoName);
-  const topContributors = contributors
-    .filter((contributor) => contributor.login !== "turbobot-temp")
-    .slice(0, displayCount);
+}: ContributorCounterProps): React.ReactNode => {
+  const [topContributors, setTopContributors] = useState<Contributor[] | []>(
+    [],
+  );
+
+  async function fetchDtata() {
+    const contributors = await fetchContributors(repoOwner, repoName);
+    const topContributors = contributors
+      .filter((contributor) => contributor.login !== "turbobot-temp")
+      .slice(0, displayCount);
+
+    setTopContributors(topContributors);
+  }
+
+  useEffect(() => {
+    fetchDtata();
+  }, []);
 
   return (
     <div
@@ -47,12 +61,14 @@ export default async function ContributorCounter({
             />
           </a>
         ))}
-        {displayCount < contributors.length ? (
+        {displayCount < topContributors.length ? (
           <div className="size-12 content-center rounded-full bg-fd-secondary text-center">
-            +{contributors.length - displayCount}
+            +{topContributors.length - displayCount}
           </div>
         ) : null}
       </div>
     </div>
   );
-}
+};
+
+export default ContributorCounter;
diff --git a/apps/www/components/header/index.tsx b/apps/www/components/header/index.tsx
@@ -13,7 +13,7 @@ import {
 export default function Header() {
   return (
     <header
-      className={`h-[80px] space-x-4 flex items-center justify-between w-full my-4 border rounded-md`}
+      className={`h-[80px] space-x-4 flex items-center justify-between w-full my-4 border rounded-md px-4 md:px-8`}
     >
       <div className="flex items-center space-x-2 w-full pr-5">
         <div className="flex items-center w-full space-x-4 ml-4">

diff --git a/apps/www/components/preview/Modal/modalAnimation.tsx b/apps/www/components/preview/Modal/modalAnimation.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import React, { useState } from "react";
+import { Stack } from "ruru-ui/components/stack";
+import {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+} from "ruru-ui/components/select";
+import Modal, { ModalProvider, modalVariants } from "ruru-ui/components/modal";
+import { Input } from "ruru-ui/components/input";
+import { Spinner } from "ruru-ui/components/spinner";
+
+const ModalAnimation = (): JSX.Element => {
+  const [selectedVariant, setSelectedVariant] = useState<string>("default");
+  const [submissionStatus, setSubmissionStatus] = useState<
+    "idle" | "loading" | "success" | "error"
+  >("idle");
+
+  const handleSubmit = async () => {
+    setSubmissionStatus("loading");
+    try {
+      // Your submit logic here
+      console.log(`Submitting with variant: ${selectedVariant}`);
+      // Simulate an API call or any async operation
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      setSubmissionStatus("success");
+    } catch (error) {
+      console.error("Submission failed:", error);
+      setSubmissionStatus("error");
+    }
+  };
+
+  return (
+    <Stack direction={"column"} justify={"center"} align={"center"} gap={20}>
+      <Select
+        onValueChange={(e) => setSelectedVariant(e)}
+        defaultValue="default"
+      >
+        <SelectTrigger className="w-[180px]">
+          <SelectValue placeholder="Select a animation variants" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>variants</SelectLabel>
+            <SelectSeparator />
+            {(
+              Object.keys(modalVariants) as Array<keyof typeof modalVariants>
+            ).map((variantKey) => (
+              <SelectItem key={variantKey} value={variantKey}>
+                {variantKey}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <ModalProvider>
+        <Modal.Trigger>Open {selectedVariant} Modal</Modal.Trigger>
+        <Modal animationVariant={selectedVariant as keyof typeof modalVariants}>
+          <Modal.Body>
+            <Modal.Header>
+              <Modal.Title>Create Username</Modal.Title>
+              <Modal.Subtitle>
+                Enter a unique name for your token to differentiate it from
+                other tokens and then select the scope.
+              </Modal.Subtitle>
+            </Modal.Header>
+            <Modal.Content>
+              <Input label="username" placeholder="enter your username." />
+            </Modal.Content>
+          </Modal.Body>
+          <Modal.Actions>
+            <Modal.Close variant="secondary">Cancel</Modal.Close>
+            <Modal.Action
+              disabled={submissionStatus === "loading"}
+              variant={submissionStatus === "loading" ? "secondary" : "default"}
+              onClick={handleSubmit}
+            >
+              {submissionStatus === "loading" && <Spinner className="mr-2" />}{" "}
+              Submit
+            </Modal.Action>
+          </Modal.Actions>
+        </Modal>
+      </ModalProvider>
+    </Stack>
+  );
+};
+
+export default ModalAnimation;