Updating menu system

apps/storybook/.storybook/main.ts

@@ -5,7 +5,11 @@ const config: StorybookConfig = {
   addons: [],
   framework: {
     name: "@storybook/nextjs",
-    options: {},
+    options: {
+      builder: {
+        useSWC: false,
+      },
+    },
   },
   features: {
     experimentalRSC: true,
@@ -15,6 +19,18 @@ const config: StorybookConfig = {
     reactDocgen: "react-docgen-typescript",
   },
   staticDirs: ["../public"],
+  webpackFinal: async (config) => {
+    // Remove SWC loader to fix Next.js 16 compatibility
+    if (config.module?.rules) {
+      config.module.rules = config.module.rules.filter((rule) => {
+        if (typeof rule === "object" && rule && "loader" in rule) {
+          return !rule.loader?.toString().includes("next-swc-loader")
+        }
+        return true
+      })
+    }
+    return config
+  },
 }
 
 export default config

package.json

@@ -3,7 +3,10 @@
   "private": true,
   "version": "0.1.0",
   "description": "Design system monorepo for gotpop projects",
-  "workspaces": ["packages/*", "apps/*"],
+  "workspaces": [
+    "packages/*",
+    "apps/*"
+  ],
   "scripts": {
     "build": "turbo run build",
     "clean": "turbo run clean",
@@ -37,5 +40,9 @@
     "tabWidth": 2,
     "printWidth": 80,
     "arrowParens": "always"
+  },
+  "dependencies": {
+    "@types/react": "19.2.3",
+    "@types/react-dom": "19.2.3"
   }
 }

packages/storyblok/package.json

@@ -33,11 +33,7 @@
       "default": "./dist/utils/index.js"
     }
   },
-  "files": [
-    "dist/**/*",
-    "package.json",
-    "README.md"
-  ],
+  "files": ["dist/**/*", "package.json", "README.md"],
   "repository": {
     "type": "git",
     "url": "https://github.com/gotpop/system.git",
@@ -50,7 +46,7 @@
     "publish:github": "npm version patch && yarn build && npm publish && cd ../.. && rm -f package-lock.json"
   },
   "dependencies": {
-    "@storyblok/react": "^5.0.0"
+    "@storyblok/react": "5.4.20"
   },
   "devDependencies": {
     "@gotpop/system": "*",
@@ -60,6 +56,6 @@
   "peerDependencies": {
     "@gotpop/system": "*",
     "next": ">=15.0.0",
-    "react": ">=19.0.0"
+    "react": ">=19.2.3"
   }
 }

packages/system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gotpop/system",
-  "version": "0.1.248",
+  "version": "0.1.282",
   "description": "React design system components for gotpop",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -69,26 +69,26 @@
   },
   "dependencies": {
     "@next/font": "^14.2.15",
-    "@storyblok/react": "^5.4.18",
-    "react-dom": "19.2.0",
+    "motion": "^12.23.26",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
     "react-icons": "^5.4.0",
-    "react": "19.2.0",
     "server-only": "^0.0.1",
     "storyblok-rich-text-react-renderer": "^3.0.1"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.3.8",
     "@gotpop/scripts": "^0.1.1",
     "@types/node": "^20",
-    "@types/react-dom": "19.2.2",
-    "@types/react": "19.2.2",
+    "@types/react": "19.2.3",
+    "@types/react-dom": "19.2.3",
     "chokidar-cli": "^3.0.0",
     "concurrently": "^8.0.1",
     "next": "16.0.0",
     "prettier": "^3.6.2",
     "typescript": "~5.7.0"
   },
   "peerDependencies": {
-    "react": ">=19.0.0"
+    "react": ">=19.2.3"
   }
 }

packages/system/src/components/storyblok/BaselineStatusBlock/BaselineStatus.css

@@ -1,48 +1,57 @@
-@scope (baseline-status) {
-  :scope {
-    --baseline-icon-limited-front: #f09409;
-    --baseline-icon-limited-back: #c6c6c6;
-    --baseline-icon-widely-front: #1ea446;
-    --baseline-icon-widely-back: #c4eed0;
-    --baseline-icon-newly-front: #1b6ef3;
-    --baseline-icon-newly-back: #a8c7fa;
-    --baseline-icon-no_data: #909090;
-
-    width: auto;
-    margin-bottom: var(--spacing-md);
-    grid-column: 1 / -1;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
+.baseline-status {
+  --baseline-icon-limited-front: #f09409;
+  --baseline-icon-limited-back: #c6c6c6;
+  --baseline-icon-widely-front: #1ea446;
+  --baseline-icon-widely-back: #c4eed0;
+  --baseline-icon-newly-front: #1b6ef3;
+  --baseline-icon-newly-back: #a8c7fa;
+  --baseline-icon-no_data: #909090;
+
+  width: auto;
+  margin-bottom: var(--spacing-md);
+  grid-column: 1 / -1;
+
+  &:last-child {
+    margin-bottom: 0;
   }
 
   details {
     overflow: hidden;
   }
 
-  summary {
+  .summary {
     background: var(--light-100);
     cursor: pointer;
     list-style: none;
     padding: var(--spacing-base);
+    display: block;
+    background-color: #f8f8f8;
+    width: 100%;
+    -webkit-appearance: none;
+    appearance: none;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &::marker {
+      display: none;
+      content: "";
+    }
+  }
+
+  .summary-content {
     display: grid;
     grid-template-columns: 1fr;
     height: 9rem;
     align-content: center;
     gap: var(--spacing-base);
-    background-color: #f8f8f8;
-    width: 100%;
 
     @media screen and (width >= 768px) {
       gap: var(--spacing-xl);
       height: 3rem;
       grid-template-columns: 1fr auto;
     }
-
-    &::-webkit-details-marker {
-      display: none;
-    }
   }
 
   .title {

packages/system/src/components/storyblok/BaselineStatusBlock/BaselineStatus.tsx

@@ -48,33 +48,35 @@ export function BaselineStatus({
   return (
     <CustomElement tag="baseline-status" className="baseline-status">
       <details data-status={status}>
-        <summary>
-          <div className="title">
-            {normalizedName && (
-              <h4 className="feature-name">{normalizedName}</h4>
-            )}
-          </div>
-          <div className="feature-meta">
-            <BaselineIcon status={status} />
-            <strong>Baseline</strong>
-            <span>{label}</span>
-            {badgeText && <span className="baseline-badge">{badgeText}</span>}
-          </div>
-          <div className="baseline-status-browsers">
-            {browsers.map(({ key, label, support }) => {
-              const Icon =
-                browserIcons[key as keyof typeof browserIcons] || IconChrome
-              return (
-                <span
-                  key={key}
-                  className={`browser-icon browser-${key}`}
-                  title={`${label}: ${support}`}
-                >
-                  <Icon />
-                  <SupportStatusIcon status={support} />
-                </span>
-              )
-            })}
+        <summary className="summary">
+          <div className="summary-content">
+            <div className="title">
+              {normalizedName && (
+                <h4 className="feature-name">{normalizedName}</h4>
+              )}
+            </div>
+            <div className="feature-meta">
+              <BaselineIcon status={status} />
+              <strong>Baseline</strong>
+              <span>{label}</span>
+              {badgeText && <span className="baseline-badge">{badgeText}</span>}
+            </div>
+            <div className="baseline-status-browsers">
+              {browsers.map(({ key, label, support }) => {
+                const Icon =
+                  browserIcons[key as keyof typeof browserIcons] || IconChrome
+                return (
+                  <span
+                    key={key}
+                    className={`browser-icon browser-${key}`}
+                    title={`${label}: ${support}`}
+                  >
+                    <Icon />
+                    <SupportStatusIcon status={support} />
+                  </span>
+                )
+              })}
+            </div>
           </div>
         </summary>
         <div className="content">

packages/system/src/components/storyblok/Card/Card.tsx

@@ -1,3 +1,7 @@
+"use client"
+
+import Link from "next/link"
+import { ViewTransition } from "react"
 import type { ConfigStoryblok } from "../../../types/storyblok-components"
 import {
   getLinkPath,
@@ -32,35 +36,32 @@ export function Card({ blok, config }: CardProps) {
   const formattedDate = formatDate(date)
 
   return (
-    <CustomElement
-      tag="box-grid"
-      style={{
-        viewTransitionName: viewTransitionName,
-      }}
-    >
-      <div className="meta">
-        <Typography
-          tag="time"
-          variant="text-sm"
-          shade="charcoal"
-          dateTime={formattedDate}
-          className="margin-none"
-        >
-          {formattedDate}
+    <ViewTransition name={viewTransitionName}>
+      <CustomElement tag="box-grid">
+        <div className="meta">
+          <Typography
+            tag="time"
+            variant="text-sm"
+            shade="charcoal"
+            dateTime={formattedDate}
+            className="margin-none"
+          >
+            {formattedDate}
+          </Typography>
+          <Tags tags={tags} />
+        </div>
+        <Typography tag="h3" variant="text-xl" shade="dark">
+          <Link href={linkPath} className="title-link">
+            {title}
+          </Link>
+        </Typography>
+        <Typography tag="p" variant="text-base" shade="charcoal">
+          {description}
         </Typography>
-        <Tags tags={tags} />
-      </div>
-      <Typography tag="h3" variant="text-xl" shade="dark">
-        <a href={linkPath} className="title-link">
-          {title}
-        </a>
-      </Typography>
-      <Typography tag="p" variant="text-base" shade="charcoal">
-        {description}
-      </Typography>
-      <a href={linkPath} className="link-simple">
-        Read more
-      </a>
-    </CustomElement>
+        <Link href={linkPath} className="link-simple">
+          Read more
+        </Link>
+      </CustomElement>
+    </ViewTransition>
   )
 }