CAP foundations storybook initial setup

packages/cap-foundations/.babelrc

@@ -0,0 +1,3 @@
+{
+  "extends": "../../babel.config.json"
+}

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;

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;

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"
+  ]
+}

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

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}"],

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>
+);