feat: upgrade to Next.js 16, TailwindCSS v4, Storybook 10, and Biome

.env.development

@@ -0,0 +1 @@
+NEXT_PUBLIC_STORYBOOK_URL=http://localhost:6006

.github/PULL_REQUEST_TEMPLATE/new_component.md

@@ -53,7 +53,7 @@ Any additional notes or considerations for reviewers should be included here.
 <!-- Provide instructions on how to test your component locally. -->
 
 1. Pull this branch.
-2. Run the project locally using the following command: `npm run start` or `yarn start`.
+2. Run the project locally using the following command: `yarn dev`.
 3. Go to the relevant component in the storybook/docs to see it in action.
 
 ---

.github/workflows/deploy-v3.yml

@@ -0,0 +1,48 @@
+name: Deploy v3
+
+on:
+  push:
+    branches:
+      - v3
+
+jobs:
+  deploy-v3:
+    runs-on: ubuntu-latest
+    environment: v3-deployment
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+      - name: Install yarn
+        run: npm install -g yarn
+      - name: Restore cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            .next/cache
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}-
+      - name: Install dependencies
+        run: yarn install --immutable
+      - name: Build component previews
+        run: yarn storybook:build
+      - name: Build with Next.js
+        env:
+          NEXT_PUBLIC_APP_URL: ${{ vars.NEXT_PUBLIC_APP_URL }}
+          NEXT_PUBLIC_SUPABASE_URL: ${{ vars.NEXT_PUBLIC_SUPABASE_URL }}
+          NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{ vars.NEXT_PUBLIC_SUPABASE_ANON_KEY }}
+          NEXT_PUBLIC_POSTHOG_KEY: ${{ vars.NEXT_PUBLIC_POSTHOG_KEY }}
+          NEXT_PUBLIC_POSTHOG_HOST: ${{ vars.NEXT_PUBLIC_POSTHOG_HOST }}
+          NEXT_PUBLIC_PLUNK_API_KEY: ${{ vars.NEXT_PUBLIC_PLUNK_API_KEY }}
+        run: yarn build
+      - name: Deploy to Cloudflare Pages
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          command: pages deploy out --project-name=animata-v3 --branch=main
+          gitHubToken: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/deploy.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: "22"
       - name: Install yarn
         run: npm install -g yarn
       - name: Restore cache
@@ -32,11 +32,11 @@ jobs:
             ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}-
       - name: Install dependencies
         run: yarn install --immutable
+      - name: Build component previews
+        run: yarn storybook:build
       - name: Build with Next.js
         env:
           NEXT_PUBLIC_APP_URL: ${{ vars.NEXT_PUBLIC_APP_URL }}
-          STORYBOOK_NEXT_PUBLIC_APP_URL: ${{ vars.STORYBOOK_NEXT_PUBLIC_APP_URL }}
-          NEXT_PUBLIC_STORYBOOK_URL: ${{ vars.NEXT_PUBLIC_STORYBOOK_URL }}
           NEXT_PUBLIC_SUPABASE_URL: ${{ vars.NEXT_PUBLIC_SUPABASE_URL }}
           NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{ vars.NEXT_PUBLIC_SUPABASE_ANON_KEY }}
           NEXT_PUBLIC_POSTHOG_KEY: ${{ vars.NEXT_PUBLIC_POSTHOG_KEY }}

.gitignore

@@ -35,8 +35,9 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
-.contentlayer
+.velite
 
 *storybook.log
 public/preview
 _internal/
+.superset/

.node-version

@@ -0,0 +1 @@
+22

.prettierrc.cjs

@@ -4,8 +4,5 @@ module.exports = {
   printWidth: 100,
   plugins: ["prettier-plugin-tailwindcss"],
   tailwindConfig: "./tailwind.config.ts",
-  tailwindFunctions: [
-    "clsx",
-    "cn"
-  ]
-};
+  tailwindFunctions: ["clsx", "cn"],
+};

.storybook/main.ts

@@ -1,24 +1,12 @@
 import type { StorybookConfig } from "@storybook/nextjs";
 
 const config: StorybookConfig = {
-  stories: [
-    "../animata/**/*.mdx",
-    "../animata/**/*.stories.@(js|jsx|mjs|ts|tsx)",
-  ],
-  addons: [
-    "@storybook/addon-onboarding",
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@chromatic-com/storybook",
-    "@storybook/addon-interactions",
-    "@storybook/addon-styling-webpack",
-    "@storybook/addon-themes",
-    "storybook-dark-mode",
-  ],
+  stories: ["../animata/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: ["@storybook/addon-themes", "@storybook/addon-docs"],
   framework: {
     name: "@storybook/nextjs",
     options: {},
   },
-  staticDirs: [],
+  tags: {},
 };
 export default config;

.storybook/preview.tsx

@@ -1,132 +1,40 @@
-import { themes } from "@storybook/theming";
+import { Controls, Description, Primary, Subtitle, Title } from "@storybook/addon-docs/blocks";
+import type { Preview } from "@storybook/react";
+import type { ReactNode } from "react";
 
-import { Canvas, Controls, Stories, Title } from "@storybook/blocks";
-import { Preview } from "@storybook/react";
-import React, { useEffect } from "react";
-
-import { MDXProvider } from "@mdx-js/react";
-import { DocsContainer } from "@storybook/blocks";
-import { baseComponents } from "../components/mdx-base-components";
-
-import { ReloadButton } from "../components/reload-button";
-import { useMutationObserver } from "../hooks/use-mutation-observer";
 import "../styles/globals.css";
 import "../styles/storybook.css";
 
-import { addons } from "@storybook/manager-api";
-import { useDarkMode } from "storybook-dark-mode";
-
-addons.setConfig({
-  theme: themes.dark,
-});
-
-const useThemeProps = (props) => {
-  const isDark = useDarkMode();
-  const forced = (() => {
-    const sp = new URLSearchParams(location.search);
-    if (!sp.get("globals")?.includes("theme")) {
-      return null;
-    }
-
-    return sp.get("globals")?.includes("light") ? "theme:light" : "theme:dark";
-  })();
-
-  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} />
-    </MDXProvider>
-  );
-};
-
-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;
-    const padding = 0;
-    window.parent.postMessage(
-      {
-        type: "animata-set-height",
-        height: height + padding,
-      },
-      "*",
-    );
-  });
-
-  useMutationObserver(nodeRef, callbackRef.current);
-
-  useEffect(() => {
-    if (!isEmbedded) {
-      return;
-    }
-    callbackRef.current();
-  }, []);
-
-  return (
-    <div
-      className={isEmbedded ? `embedded ${theme}`.trim() : ""}
-      style={{ padding: isEmbedded ? 0 : "4rem 20px" }}
-    >
-      {children}
-    </div>
-  );
-};
-
-const CustomCanvas = () => {
-  const [key, setKey] = React.useState(0);
-  return (
-    <div className="relative">
-      <Canvas key={`render-${key}`} />
-      <ReloadButton
-        key={`button-${key}`}
-        className="absolute right-4 top-4"
-        onClick={() => setKey((k) => k + 1)}
-      />
-    </div>
-  );
+const ThemeWrapper = ({ children }: { children: ReactNode }) => {
+  return <div style={{ padding: "4rem 20px" }}>{children}</div>;
 };
 
 const preview: Preview = {
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <ThemeWrapper>
+        <Story />
+      </ThemeWrapper>
+    ),
+  ],
   parameters: {
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
     },
-    darkMode: {
-      dark: { ...themes.dark, appBg: "black" },
-      light: { ...themes.normal, appBg: "light" },
-    },
     docs: {
-      container: MdxContainer,
-      page: () => {
-        return (
-          <Wrapper>
-            {!isEmbedded && <Title />}
-            <CustomCanvas />
-            <Controls />
-            <Stories includePrimary={false} title="Other examples" />
-          </Wrapper>
-        );
-      },
+      page: () => (
+        <>
+          <Title />
+          <Subtitle />
+          <Description />
+          <Primary />
+          <Controls />
+        </>
+      ),
     },
   },
 };

.vscode/extensions.json

@@ -5,4 +5,4 @@
     "esbenp.prettier-vscode",
     "streetsidesoftware.code-spell-checker"
   ]
-}
+}

animata/accordion/faq.stories.tsx

@@ -1,5 +1,5 @@
+import type { Meta, StoryObj } from "@storybook/react";
 import Faq from "@/animata/accordion/faq";
-import { Meta, StoryObj } from "@storybook/react";
 
 const faqData = [
   {

animata/accordion/faq.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import React, { useState } from "react";
-import { motion } from "framer-motion";
-
 import * as Accordion from "@radix-ui/react-accordion";
+import { motion } from "motion/react";
+import { useState } from "react";
 
 interface FAQItem {
   id: number;