From 9028b724e699f02be796e823798e4a9a99e56b20 Mon Sep 17 00:00:00 2001
From: Eddie Liu <leddie24@gmail.com>
Date: Mon, 16 Mar 2026 16:37:16 -0700
Subject: [PATCH 1/2] feat(cap-foundations): add Storybook setup with
 placeholder story

---
 packages/cap-foundations/.babelrc             |  3 +++
 packages/cap-foundations/.storybook/main.ts   | 11 ++++++++
 .../cap-foundations/.storybook/preview.tsx    | 10 +++++++
 .../cap-foundations/.storybook/tsconfig.json  | 27 +++++++++++++++++++
 packages/cap-foundations/project.json         | 25 +++++++++++++++++
 packages/cap-foundations/stories/.gitkeep     |  0
 .../cap-foundations/stories/index.stories.tsx | 16 +++++++++++
 7 files changed, 92 insertions(+)
 create mode 100644 packages/cap-foundations/.babelrc
 create mode 100644 packages/cap-foundations/.storybook/main.ts
 create mode 100644 packages/cap-foundations/.storybook/preview.tsx
 create mode 100644 packages/cap-foundations/.storybook/tsconfig.json
 create mode 100644 packages/cap-foundations/stories/.gitkeep
 create mode 100644 packages/cap-foundations/stories/index.stories.tsx

diff --git a/packages/cap-foundations/.babelrc b/packages/cap-foundations/.babelrc
new file mode 100644
index 000000000..ac08da0a4
--- /dev/null
+++ b/packages/cap-foundations/.babelrc
@@ -0,0 +1,3 @@
+{
+  "extends": "../../babel.config.json"
+}
diff --git a/packages/cap-foundations/.storybook/main.ts b/packages/cap-foundations/.storybook/main.ts
new file mode 100644
index 000000000..025fde797
--- /dev/null
+++ b/packages/cap-foundations/.storybook/main.ts
@@ -0,0 +1,11 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import rootConfig from '../../../.storybook/main';
+
+const config: StorybookConfig = {
+  ...rootConfig,
+  stories: ['../stories/**/index.stories.@(js|jsx|ts|tsx|mdx)'],
+};
+
+export default config;
diff --git a/packages/cap-foundations/.storybook/preview.tsx b/packages/cap-foundations/.storybook/preview.tsx
new file mode 100644
index 000000000..2b8a55ac3
--- /dev/null
+++ b/packages/cap-foundations/.storybook/preview.tsx
@@ -0,0 +1,10 @@
+import type { Preview } from '@storybook/react';
+
+import rootPreview from '../../../.storybook/preview';
+
+const preview: Preview = {
+  ...rootPreview,
+  tags: ['autodocs'],
+};
+
+export default preview;
diff --git a/packages/cap-foundations/.storybook/tsconfig.json b/packages/cap-foundations/.storybook/tsconfig.json
new file mode 100644
index 000000000..6fa15c2f4
--- /dev/null
+++ b/packages/cap-foundations/.storybook/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "outDir": ""
+  },
+  "files": [
+    "../../../node_modules/@nx/react/typings/styled-jsx.d.ts",
+    "../../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nx/react/typings/image.d.ts"
+  ],
+  "exclude": [
+    "../**/*.spec.ts",
+    "../**/*.spec.js",
+    "../**/*.spec.tsx",
+    "../**/*.spec.jsx"
+  ],
+  "include": [
+    "../stories/**/*.stories.ts",
+    "../stories/**/*.stories.js",
+    "../stories/**/*.stories.jsx",
+    "../stories/**/*.stories.tsx",
+    "../stories/**/*.stories.mdx",
+    "*.ts",
+    "*.js"
+  ]
+}
diff --git a/packages/cap-foundations/project.json b/packages/cap-foundations/project.json
index ae4bbae8f..b3b9530ab 100644
--- a/packages/cap-foundations/project.json
+++ b/packages/cap-foundations/project.json
@@ -17,6 +17,31 @@
         ]
       }
     },
+    "storybook": {
+      "executor": "@nx/storybook:storybook",
+      "options": {
+        "port": 4400,
+        "configDir": "packages/cap-foundations/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "build-storybook": {
+      "executor": "@nx/storybook:build",
+      "outputs": ["{options.outputDir}"],
+      "options": {
+        "outputDir": "dist/storybook/cap-foundations",
+        "configDir": "packages/cap-foundations/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
     "test": {
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
diff --git a/packages/cap-foundations/stories/.gitkeep b/packages/cap-foundations/stories/.gitkeep
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/cap-foundations/stories/index.stories.tsx b/packages/cap-foundations/stories/index.stories.tsx
new file mode 100644
index 000000000..9fcb7c494
--- /dev/null
+++ b/packages/cap-foundations/stories/index.stories.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+export default {
+  title: 'CAP Foundations',
+};
+
+export const Overview = () => (
+  <div style={{ fontFamily: 'system-ui', padding: '2rem' }}>
+    <h1>CAP Foundations</h1>
+    <p>
+      This package contains the foundational design tokens, theming, and density
+      system for the CAP design system.
+    </p>
+    <p>Stories will be added as tokens and utilities are migrated.</p>
+  </div>
+);

From ad7cc15dfd30d76aca402b08a322eeb1e8fffcd1 Mon Sep 17 00:00:00 2001
From: Eddie Liu <leddie24@gmail.com>
Date: Mon, 16 Mar 2026 16:55:11 -0700
Subject: [PATCH 2/2] docs(cap-foundations): update README with description and
 storybook instructions

---
 packages/cap-foundations/README.md | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/cap-foundations/README.md b/packages/cap-foundations/README.md
index 37065586a..379a3b29b 100644
--- a/packages/cap-foundations/README.md
+++ b/packages/cap-foundations/README.md
@@ -1,11 +1,15 @@
 # cap-foundations
 
-This library was generated with [Nx](https://nx.dev).
+Foundational design tokens, theming, and density system for the CAP design system.
+
+## Storybook
+
+Run `yarn nx storybook cap-foundations` to start Storybook locally (port 4400).
 
 ## Building
 
-Run `nx build cap-foundations` to build the library.
+Run `yarn nx build cap-foundations` to build the library.
 
 ## Running unit tests
 
-Run `nx test cap-foundations` to execute the unit tests via [Jest](https://jestjs.io).
+Run `yarn nx test cap-foundations` to execute the unit tests via [Jest](https://jestjs.io).