Fix build issues and create dedicated pages for widget, bento & button (

#73)
codse · Jun 23, 2024 · 576471e · 576471e
1 parent 853ca43
commit 576471e
Show file tree

Hide file tree

Showing 99 changed files with 2,354 additions and 1,397 deletions.
diff --git a/.env.example b/.env.example
@@ -1,3 +1,4 @@
+NEXT_PUBLIC_APP_URL=http://localhost:3000
 NEXT_PUBLIC_STORYBOOK_URL=http://localhost:6006
 NEXT_PUBLIC_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
 NEXT_PUBLIC_SUPABASE_ANON_KEY=<SUBSTITUTE_SUPABASE_ANON_KEY>
diff --git a/.gitignore b/.gitignore
@@ -40,4 +40,3 @@ next-env.d.ts
 *storybook.log
 content/docs/contributing/index.mdx
 public/preview
-
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -20,7 +20,7 @@ addons.setConfig({
   theme: themes.dark,
 });
 
-const MdxContainer = (props: any) => {
+const useThemeProps = (props) => {
   const isDark = useDarkMode();
   const forced = (() => {
     const sp = new URLSearchParams(location.search);
@@ -34,10 +34,17 @@ const MdxContainer = (props: any) => {
   const currentProps = { ...props };
   if (!forced) {
     currentProps.theme = isDark ? themes.dark : themes.light;
+    currentProps.isDark = isDark;
   } else {
     currentProps.theme = forced === "theme:dark" ? themes.dark : themes.light;
+    currentProps.isDark = forced === "theme:dark";
   }
 
+  return currentProps;
+};
+
+const MdxContainer = (props: any) => {
+  const currentProps = useThemeProps(props);
   return (
     <MDXProvider components={baseComponents}>
       <DocsContainer {...currentProps} />
@@ -49,6 +56,7 @@ const isEmbedded = window.location.href.includes("site:docs");
 
 const Wrapper = ({ children }) => {
   const nodeRef = React.useRef(isEmbedded ? document.body : null);
+  const theme = useThemeProps({}).isDark ? "dark" : "";
 
   const callbackRef = React.useRef(() => {
     const height = document.querySelector(".embedded")?.clientHeight ?? 0;
@@ -73,7 +81,7 @@ const Wrapper = ({ children }) => {
 
   return (
     <div
-      className={isEmbedded ? "embedded" : ""}
+      className={isEmbedded ? `embedded ${theme}`.trim() : ""}
       style={{ padding: isEmbedded ? 0 : "4rem 20px" }}
     >
       {children}

diff --git a/animata/background/moving-gradient.stories.tsx b/animata/background/moving-gradient.stories.tsx
@@ -24,7 +24,7 @@ export const Primary: Story = {
           <BadgeAlert />
           <span>Priority notifications</span>
         </h4>
-        <p className="break-words text-sm text-foreground/80">
+        <p className="break-words text-sm text-black/80">
           You can set up priority notifications to be alerted on your phone or
           computer for important emails.
         </p>

diff --git a/animata/bento-grid/eleven.tsx b/animata/bento-grid/eleven.tsx
@@ -1,12 +1,12 @@
 import { cn } from "@/lib/utils";
 
-const BentoCard = ({
+function BentoCard({
   children,
   className,
 }: {
   children: React.ReactNode;
   className?: string;
-}) => {
+}) {
   return (
     <div
       className={cn(
@@ -17,11 +17,11 @@ const BentoCard = ({
       {children}
     </div>
   );
-};
+}
 
 export default function Modern() {
   return (
-    <div className="box-border max-w-full p-4">
+    <div className="box-border w-full max-w-full p-4">
       <div className="grid grid-cols-1 grid-rows-1 gap-2 sm:grid-cols-5 sm:grid-rows-5">
         <div className="sm:col-span-2 sm:row-span-2">
           <BentoCard className="bg-blue-300">

diff --git a/animata/bento-grid/five.tsx b/animata/bento-grid/five.tsx
@@ -1,12 +1,12 @@
 import { cn } from "@/lib/utils";
 
-const BentoCard = ({
+function BentoCard({
   children,
   className,
 }: {
   children: React.ReactNode;
   className?: string;
-}) => {
+}) {
   return (
     <div
       className={cn(
@@ -17,32 +17,30 @@ const BentoCard = ({
       {children}
     </div>
   );
-};
+}
 
 export default function Five() {
   return (
-    <div className="p-4">
-      <div className="grid grid-cols-1 gap-3 sm:grid-cols-3 sm:grid-rows-3">
-        <BentoCard className="bg-yellow-300 sm:col-span-2">
-          <div className="flex flex-col">Grocery List</div>
-        </BentoCard>
+    <div className="grid w-full min-w-[90cqw] grid-cols-1 gap-3 sm:grid-cols-3 sm:grid-rows-3">
+      <BentoCard className="bg-yellow-300 sm:col-span-2">
+        <div className="flex flex-col">Grocery List</div>
+      </BentoCard>
 
-        <BentoCard className="bg-green-300 sm:row-span-3">
-          <div className="flex flex-col">Meal Planner</div>
-        </BentoCard>
+      <BentoCard className="bg-green-300 sm:row-span-3">
+        <div className="flex flex-col">Meal Planner</div>
+      </BentoCard>
 
-        <BentoCard className="bg-red-300 sm:col-span-1 sm:row-span-2">
-          <div className="flex flex-col">Something</div>
-        </BentoCard>
+      <BentoCard className="bg-red-300 sm:col-span-1 sm:row-span-2">
+        <div className="flex flex-col">Something</div>
+      </BentoCard>
 
-        <BentoCard className="bg-purple-300">
-          <div className="flex flex-col">Another Section</div>
-        </BentoCard>
+      <BentoCard className="bg-purple-300">
+        <div className="flex flex-col">Another Section</div>
+      </BentoCard>
 
-        <BentoCard className="bg-zinc-300 sm:col-start-2">
-          <div className="flex flex-col">Add Widget</div>
-        </BentoCard>
-      </div>
+      <BentoCard className="bg-zinc-300 sm:col-start-2">
+        <div className="flex flex-col">Add Widget</div>
+      </BentoCard>
     </div>
   );
 }
diff --git a/animata/bento-grid/gradient.tsx b/animata/bento-grid/gradient.tsx
@@ -12,7 +12,7 @@ import {
 } from "lucide-react";
 import { ReactNode } from "react";
 
-const BentoCard = ({
+function BentoCard({
   title,
   icon,
   description,
@@ -26,7 +26,7 @@ const BentoCard = ({
   gradient?: string;
   description: ReactNode;
   className?: string;
-}) => {
+}) {
   return (
     <MovingGradient
       animated={false}
@@ -40,79 +40,102 @@ const BentoCard = ({
             <p className="text-md line-clamp-1 font-bold">{title}</p>
           </div>
         </header>
-        <div className="flex-1 text-sm font-bold">{description}</div>
+        <div className="flex-1 text-sm font-medium text-opacity-80">
+          {description}
+        </div>
         {children}
       </section>
     </MovingGradient>
   );
-};
+}
 
-export default function Gradient() {
+function GetGradient() {
   return (
-    <div className="rounded-md bg-zinc-950 p-4">
-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-3 lg:grid-cols-3">
-        <BentoCard
-          title="Gradient"
-          icon={<BarChart size={24} />}
-          description={
-            <span>
-              A gradient is a smooth transition from one color to another.
-            </span>
-          }
-          className="sm:col-span-1 sm:row-span-2"
-          gradient="from-cyan-900 via-60% via-sky-600 to-indigo-600"
-        >
-          <div className="group relative flex cursor-pointer flex-col justify-end rounded-md bg-zinc-950 p-2 text-2xl tracking-tight text-gray-100 md:text-4xl">
-            <div className="font-light">Get</div>
-            <div className="-mt-2 font-bold">Gradients</div>
-            <div className="flex h-6 w-6 items-center justify-center rounded-full border bg-white transition-all duration-700 group-hover:rotate-[360deg] md:h-8 md:w-8">
-              <ArrowRight size={16} className="text-blue-600" />
-            </div>
-            <div className="absolute right-2 top-2 h-2 w-2 rounded-full bg-white opacity-50 transition-all duration-700 group-hover:opacity-25" />
-          </div>
-        </BentoCard>
-
-        <BentoCard
-          title="Linear Gradient"
-          icon={<GitBranch size={24} />}
-          description="A linear gradient is a gradient that goes in a straight line."
-          gradient="from-red-300 via-60% via-rose-300 to-red-200"
-          className="group sm:col-span-1"
-        >
-          <div className="h-4 w-full rounded-sm bg-gray-100 group-hover:animate-pulse group-hover:bg-gray-300" />
-          <div className="h-4 w-1/2 rounded-sm bg-gray-100 group-hover:animate-pulse group-hover:bg-gray-300" />
-        </BentoCard>
+    <BentoCard
+      title="Gradient"
+      icon={<BarChart size={24} />}
+      description={
+        <span>
+          A gradient is a smooth transition from one color to another.
+        </span>
+      }
+      className="sm:col-span-1 sm:row-span-2"
+      gradient="from-cyan-900 via-60% via-sky-600 to-indigo-600"
+    >
+      <div className="group relative flex cursor-pointer flex-col justify-end rounded-md bg-zinc-950 p-2 text-2xl tracking-tight text-gray-100 md:text-4xl">
+        <div className="font-light">Get</div>
+        <div className="-mt-2 font-bold">Gradients</div>
+        <div className="flex h-6 w-6 items-center justify-center rounded-full border bg-white transition-all duration-700 group-hover:rotate-[360deg] md:h-8 md:w-8">
+          <ArrowRight size={16} className="text-blue-600" />
+        </div>
+        <div className="absolute right-2 top-2 h-2 w-2 rounded-full bg-white opacity-50 transition-all duration-700 group-hover:opacity-25" />
+      </div>
+    </BentoCard>
+  );
+}
 
-        <BentoCard
-          title="Radial Gradient"
-          icon={<LineChart size={24} />}
-          description="A radial gradient is a gradient that goes in a circular direction."
-          gradient="from-lime-300 via-60% via-green-200 to-lime-200"
-          className="group sm:col-span-1"
-        >
-          <div className="flex w-full flex-row justify-end gap-2 rounded border-yellow-200 bg-yellow-100 p-2">
-            <HeartPulse
-              size={16}
-              className="delay-150 duration-75 group-hover:animate-in group-hover:slide-in-from-right-full"
-            />
-            <Sun
-              size={16}
-              className="delay-75 duration-75 group-hover:animate-in group-hover:slide-in-from-right-full"
-            />
-            <BookPlus
-              size={16}
-              className="duration-75 group-hover:animate-in group-hover:slide-in-from-right-full"
-            />
-          </div>
-        </BentoCard>
+function LinearGradient() {
+  return (
+    <BentoCard
+      title="Linear Gradient"
+      icon={<GitBranch size={24} />}
+      description="A linear gradient is a gradient that goes in a straight line."
+      gradient="from-red-300 via-60% via-rose-300 to-red-200"
+      className="group sm:col-span-1"
+    >
+      <div className="h-4 w-full rounded-sm bg-gray-100 group-hover:animate-pulse group-hover:bg-gray-300" />
+      <div className="h-4 w-1/2 rounded-sm bg-gray-100 group-hover:animate-pulse group-hover:bg-gray-300" />
+    </BentoCard>
+  );
+}
 
-        <BentoCard
-          title="Conic Gradient"
-          icon={<TypeIcon size={24} />}
-          description="A conic gradient is a gradient that goes in a circular direction."
-          gradient="from-cyan-900 via-60% via-sky-600 to-indigo-600"
-          className="sm:col-span-2"
+function RadialGradient() {
+  return (
+    <BentoCard
+      title="Radial Gradient"
+      icon={<LineChart size={24} />}
+      description="A radial gradient is a gradient that goes in a circular direction."
+      gradient="from-lime-300 via-60% via-green-200 to-lime-200"
+      className="group sm:col-span-1"
+    >
+      <div className="flex w-full flex-row justify-end gap-2 rounded border-yellow-200 bg-yellow-100 p-2">
+        <HeartPulse
+          size={16}
+          className="delay-150 duration-75 group-hover:animate-in group-hover:slide-in-from-right-full"
+        />
+        <Sun
+          size={16}
+          className="delay-75 duration-75 group-hover:animate-in group-hover:slide-in-from-right-full"
         />
+        <BookPlus
+          size={16}
+          className="duration-75 group-hover:animate-in group-hover:slide-in-from-right-full"
+        />
+      </div>
+    </BentoCard>
+  );
+}
+
+function ConicGradient() {
+  return (
+    <BentoCard
+      title="Conic Gradient"
+      icon={<TypeIcon size={24} />}
+      description="A conic gradient is a gradient that goes in a circular direction."
+      gradient="from-cyan-900 via-60% via-sky-600 to-indigo-600"
+      className="sm:col-span-2"
+    />
+  );
+}
+
+export default function Gradient() {
+  return (
+    <div className="bg-zinc-950 p-4">
+      <div className="grid grid-cols-1 gap-4 text-black sm:grid-cols-3 lg:grid-cols-3">
+        <GetGradient />
+        <LinearGradient />
+        <RadialGradient />
+        <ConicGradient />
       </div>
     </div>
   );
Original file line number	Diff line number	Diff line change
Expand Up		@@ -40,4 +40,3 @@ next-env.d.ts
		*storybook.log
		content/docs/contributing/index.mdx
		public/preview