feat: upgrade to Next.js 16, TailwindCSS v4, Storybook 10, and Biome (#422)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: hari

.env.development

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

.eslintignore

@@ -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.
 
 ---

.eslintrc.cjs

@@ -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/PULL_REQUEST_TEMPLATE/new_component.md

@@ -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 }}

.github/workflows/deploy-v3.yml

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

.github/workflows/deploy.yml

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

.gitignore

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

.node-version

@@ -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;