@nd-storybook/storybook 0.3.0

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@nd-storybook/storybook",
+  "version": "0.3.0",
+  "type": "module",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./tailwind.config.js": "./tailwind.config.js",
+    "./dist/tailwind.config.js": "./dist/tailwind.config.js",
+    "./tailwind.tokens.js": "./tailwind.tokens.js",
+    "./dist/tailwind.tokens.js": "./dist/tailwind.tokens.js",
+    "./tokens.utilities.js": "./tokens.utilities.js",
+    "./dist/tokens.utilities.js": "./dist/tokens.utilities.js",
+    "./css/*": "./dist/css/*",
+    "./css/tailwind.css": "./dist/css/tailwind.css"
+  },
+  "files": [
+    "dist",
+    "tailwind.config.js",
+    "tailwind.tokens.js",
+    "tokens.utilities.js"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build && node scripts/build-types.js && mkdir -p dist/css && cp -r src/assets/css/* dist/css/ && node scripts/copy-tailwind-files.js && echo '✓ CSS files copied to dist/css/'",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build -o storybook-static",
+    "build-tailwind-tokens": "node scripts/build-tailwind-tokens.js"
+  },
+  "dependencies": {
+    "@headlessui/react": "^2.2.4",
+    "axios": "^1.9.0",
+    "core-js": "^3.30.1",
+    "dayjs": "^1.11.13",
+    "immer": "^10.1.1",
+    "mitt": "^3.0.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-svg": "^16.3.0",
+    "react-use": "^17.6.0",
+    "tailwindcss": "^3.3.2",
+    "use-immer": "^0.11.0",
+    "uuid": "^11.1.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.21.4",
+    "@storybook/addon-docs": "^9.1.3",
+    "@storybook/addon-links": "^9.0.4",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/addon-viewport": "^9.0.8",
+    "@storybook/cli": "^9.0.4",
+    "@storybook/react-vite": "^9.0.4",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^8.28.0",
+    "@typescript-eslint/parser": "^8.28.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.14",
+    "babel-loader": "^9.1.2",
+    "esbuild": "^0.25.9",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "eslint-plugin-storybook": "^9.0.4",
+    "postcss": "^8.4.23",
+    "postcss-import": "^16.1.0",
+    "postcss-loader": "^7.3.4",
+    "rollup-plugin-dts": "^6.2.1",
+    "snarkdown": "^2.0.0",
+    "storybook": "^9.0.4",
+    "token-transformer": "^0.0.33",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "vite-plugin-svgr": "^4.3.0"
+  }
+}

package/tailwind.config.js

@@ -0,0 +1,86 @@
+import {
+    primitiveColors,
+    semanticColors,
+    componentColors,
+    spacing,
+    primitiveFontFamilies,
+    primitiveFontSizes,
+    primitiveFontWeights,
+    primitiveLetterSpacings, primitiveBorderRadius, primitiveBorderWidths, semanticBorderRadius,
+    primitiveBoxShadows
+} from './tailwind.tokens.js';
+
+import tokenUtilities from './tokens.utilities.js';
+
+// No longer needed as we're using CSS classes directly
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx,stories.js}",
+    "./storybook/**/*.{mdx,vue,js,ts,jsx,tsx,stories.js}",
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {
+        colors: {
+            ...primitiveColors,
+            ...semanticColors,
+            ...componentColors
+        },
+
+        spacing: {
+            ...spacing,
+            // 'xs': 'var(--spacing-inset-spacing-inset-xs)',
+            // 's': 'var(--spacing-inset-spacing-inset-s)',
+            // 'm': 'var(--spacing-inset-spacing-inset-m)',
+            // 'l': 'var(--spacing-inset-spacing-inset-l)',
+            // 'xl': 'var(--spacing-inset-spacing-inset-xl)',
+        },
+
+        fontFamily: {
+            ...primitiveFontFamilies
+        },
+        fontWeight: {
+            ...primitiveFontWeights
+        },
+        fontSize: {
+            ...primitiveFontSizes,
+            'heading-xs': 'var(--font-size-heading-xs)',
+            'heading-s': 'var(--font-size-heading-s)',
+            'heading-m': 'var(--font-size-heading-m)',
+            'heading-l': 'var(--font-size-heading-l)',
+            'heading-xl': 'var(--font-size-heading-xl)',
+            'body-xs': 'var(--font-size-body-xs)',
+            'body-s': 'var(--font-size-body-s)',
+            'body-m': 'var(--font-size-body-m)',
+            'body-l': 'var(--font-size-body-l)',
+            'body-xl': 'var(--font-size-body-xl)',
+            'body-xxl': 'var(--font-size-body-xxl)',
+            'body-drop-cap': 'var(--font-size-body-drop-cap)',
+            'meta': 'var(--font-size-meta)'
+        },
+        letterSpacing: {
+            ...primitiveLetterSpacings,
+            '0': 'var(--typography-letter-spacing-0)',
+            's': 'var(--typography-letter-spacing-s)',
+            'm': 'var(--typography-letter-spacing-m)',
+            'l': 'var(--typography-letter-spacing-l)'
+        },
+        borderWidth: {
+            ...primitiveBorderWidths
+        },
+        borderRadius: {
+            ...primitiveBorderRadius,
+            ...semanticBorderRadius,
+        },
+        boxShadow: {
+            ...primitiveBoxShadows
+        }
+    },
+  },
+  plugins: [
+      tokenUtilities
+  ],
+}

package/tailwind.tokens.js

@@ -0,0 +1,252 @@
+// Generated from design tokens - DO NOT EDIT DIRECTLY
+// Last generated: 2025-11-24T13:43:30.556Z
+
+export const primitiveColors = {
+  "blue-400": "var(--color-blue-400)",
+  "blue-500": "var(--color-blue-500)",
+  "blue-900": "var(--color-blue-900)",
+  "blue-500-10": "var(--color-blue-500-10)",
+  "pink-200": "var(--color-pink-200)",
+  "pink-400": "var(--color-pink-400)",
+  "pink-600": "var(--color-pink-600)",
+  "pink-700": "var(--color-pink-700)",
+  "brown-500": "var(--color-brown-500)",
+  "brown-800": "var(--color-brown-800)",
+  "brown-900": "var(--color-brown-900)",
+  "neutral-100": "var(--color-neutral-100)",
+  "neutral-200": "var(--color-neutral-200)",
+  "neutral-300": "var(--color-neutral-300)",
+  "neutral-400": "var(--color-neutral-400)",
+  "neutral-500": "var(--color-neutral-500)",
+  "neutral-600": "var(--color-neutral-600)",
+  "neutral-700": "var(--color-neutral-700)",
+  "neutral-800": "var(--color-neutral-800)",
+  "neutral-900": "var(--color-neutral-900)",
+  "neutral-black": "var(--color-neutral-black)",
+  "neutral-black-10": "var(--color-neutral-black-10)",
+  "neutral-white": "var(--color-neutral-white)",
+  "neutral-white-30": "var(--color-neutral-white-30)"
+};
+export const semanticColors = {
+  "border-default": "var(--color-border-default)",
+  "border-brand": "var(--color-border-brand)",
+  "border-accent-gray": "var(--color-border-accent-gray)",
+  "border-accent-gray-subtle": "var(--color-border-accent-gray-subtle)",
+  "border-disabled": "var(--color-border-disabled)",
+  "border-warning": "var(--color-border-warning)",
+  "text-default": "var(--color-text-default)",
+  "text-subtle": "var(--color-text-subtle)",
+  "text-brand": "var(--color-text-brand)",
+  "text-brand-subtle": "var(--color-text-brand-subtle)",
+  "text-accent-brown": "var(--color-text-accent-brown)",
+  "text-accent-brown-subtle": "var(--color-text-accent-brown-subtle)",
+  "text-accent-pink": "var(--color-text-accent-pink)",
+  "text-disabled": "var(--color-text-disabled)",
+  "text-inverse": "var(--color-text-inverse)",
+  "text-warning": "var(--color-text-warning)",
+  "text-warning-inverse": "var(--color-text-warning-inverse)",
+  "background-default": "var(--color-background-default)",
+  "background-dark": "var(--color-background-dark)",
+  "background-dark-subtle": "var(--color-background-dark-subtle)",
+  "background-brand": "var(--color-background-brand)",
+  "background-brand-subtle": "var(--color-background-brand-subtle)",
+  "background-brand-subtlest": "var(--color-background-brand-subtlest)",
+  "background-accent-gray": "var(--color-background-accent-gray)",
+  "background-accent-gray-subtle": "var(--color-background-accent-gray-subtle)",
+  "background-accent-brown": "var(--color-background-accent-brown)",
+  "background-accent-pink": "var(--color-background-accent-pink)",
+  "background-accent-pink-subtle": "var(--color-background-accent-pink-subtle)",
+  "background-accent-pink-subtlest": "var(--color-background-accent-pink-subtlest)",
+  "background-disabled": "var(--color-background-disabled)",
+  "icons-default": "var(--color-icons-default)",
+  "icons-gray": "var(--color-icons-gray)",
+  "icons-brand": "var(--color-icons-brand)",
+  "icons-warning": "var(--color-icons-warning)",
+  "icons-inverse": "var(--color-icons-inverse)",
+  "shadow-default": "var(--color-shadow-default)"
+};
+export const componentColors = {
+  "form-background-input-field": "var(--color-form-background-input-field-default)",
+  "form-background-checkbox": "var(--color-form-background-checkbox-default)",
+  "form-border-input-field": "var(--color-form-border-input-field-default)",
+  "form-border-checkbox": "var(--color-form-border-checkbox-default)",
+  "button-background-primary": "var(--color-button-background-primary-default)",
+  "button-background-dark": "var(--color-button-background-dark-default)",
+  "button-background-secondary": "var(--color-button-background-secondary-default)",
+  "button-background-pill": "var(--color-button-background-pill-default)",
+  "button-border-secondary": "var(--color-button-border-secondary-default)",
+  "button-border-pill": "var(--color-button-border-pill-default)",
+  "button-icon-primary": "var(--color-button-icon-primary-default)",
+  "button-icon-secondary": "var(--color-button-icon-secondary-default)",
+  "button-icon-pill": "var(--color-button-icon-pill-default)",
+  "button-text-primary": "var(--color-button-text-primary-default)",
+  "button-text-dark": "var(--color-button-text-dark-default)",
+  "button-text-secondary": "var(--color-button-text-secondary-default)",
+  "button-text-ghost": "var(--color-button-text-ghost-default)",
+  "button-text-pill": "var(--color-button-text-pill-default)",
+  "link-text-default": "var(--color-link-text-default-default)",
+  "link-text-brown": "var(--color-link-text-brown-default)",
+  "form-background-input-field-hover": "var(--color-form-background-input-field-hover)",
+  "form-background-checkbox-hover": "var(--color-form-background-checkbox-hover)",
+  "form-border-input-field-hover": "var(--color-form-border-input-field-hover)",
+  "form-border-checkbox-hover": "var(--color-form-border-checkbox-hover)",
+  "button-background-primary-hover": "var(--color-button-background-primary-hover)",
+  "button-background-dark-hover": "var(--color-button-background-dark-hover)",
+  "button-background-secondary-hover": "var(--color-button-background-secondary-hover)",
+  "button-background-pill-hover": "var(--color-button-background-pill-hover)",
+  "button-border-secondary-hover": "var(--color-button-border-secondary-hover)",
+  "button-border-pill-hover": "var(--color-button-border-pill-hover)",
+  "button-icon-primary-hover": "var(--color-button-icon-primary-hover)",
+  "button-icon-secondary-hover": "var(--color-button-icon-secondary-hover)",
+  "button-icon-pill-hover": "var(--color-button-icon-pill-hover)",
+  "button-text-primary-hover": "var(--color-button-text-primary-hover)",
+  "button-text-dark-hover": "var(--color-button-text-dark-hover)",
+  "button-text-secondary-hover": "var(--color-button-text-secondary-hover)",
+  "button-text-ghost-hover": "var(--color-button-text-ghost-hover)",
+  "button-text-pill-hover": "var(--color-button-text-pill-hover)",
+  "link-text-default-hover": "var(--color-link-text-default-hover)",
+  "link-text-brown-hover": "var(--color-link-text-brown-hover)",
+  "form-background-input-field-active": "var(--color-form-background-input-field-active)",
+  "form-background-checkbox-active": "var(--color-form-background-checkbox-active)",
+  "form-border-input-field-active": "var(--color-form-border-input-field-active)",
+  "form-border-checkbox-active": "var(--color-form-border-checkbox-active)",
+  "button-background-primary-active": "var(--color-button-background-primary-active)",
+  "button-background-dark-active": "var(--color-button-background-dark-active)",
+  "button-background-secondary-active": "var(--color-button-background-secondary-active)",
+  "button-background-pill-active": "var(--color-button-background-pill-active)",
+  "button-border-secondary-active": "var(--color-button-border-secondary-active)",
+  "button-border-pill-active": "var(--color-button-border-pill-active)",
+  "button-icon-primary-active": "var(--color-button-icon-primary-active)",
+  "button-icon-secondary-active": "var(--color-button-icon-secondary-active)",
+  "button-icon-pill-active": "var(--color-button-icon-pill-active)",
+  "button-text-primary-active": "var(--color-button-text-primary-active)",
+  "button-text-dark-active": "var(--color-button-text-dark-active)",
+  "button-text-secondary-active": "var(--color-button-text-secondary-active)",
+  "button-text-ghost-active": "var(--color-button-text-ghost-active)",
+  "button-text-pill-active": "var(--color-button-text-pill-active)",
+  "link-text-default-active": "var(--color-link-text-default-active)",
+  "link-text-brown-active": "var(--color-link-text-brown-active)",
+  "form-background-input-field-disabled": "var(--color-form-background-input-field-disabled)",
+  "form-background-checkbox-disabled": "var(--color-form-background-checkbox-disabled)",
+  "form-border-input-field-disabled": "var(--color-form-border-input-field-disabled)",
+  "form-border-checkbox-disabled": "var(--color-form-border-checkbox-disabled)",
+  "button-background-primary-disabled": "var(--color-button-background-primary-disabled)",
+  "button-background-dark-disabled": "var(--color-button-background-dark-disabled)",
+  "button-background-secondary-disabled": "var(--color-button-background-secondary-disabled)",
+  "button-background-pill-disabled": "var(--color-button-background-pill-disabled)",
+  "button-border-secondary-disabled": "var(--color-button-border-secondary-disabled)",
+  "button-border-pill-disabled": "var(--color-button-border-pill-disabled)",
+  "button-icon-primary-disabled": "var(--color-button-icon-primary-disabled)",
+  "button-icon-secondary-disabled": "var(--color-button-icon-secondary-disabled)",
+  "button-icon-pill-disabled": "var(--color-button-icon-pill-disabled)",
+  "button-text-primary-disabled": "var(--color-button-text-primary-disabled)",
+  "button-text-dark-disabled": "var(--color-button-text-dark-disabled)",
+  "button-text-secondary-disabled": "var(--color-button-text-secondary-disabled)",
+  "button-text-ghost-disabled": "var(--color-button-text-ghost-disabled)",
+  "button-text-pill-disabled": "var(--color-button-text-pill-disabled)",
+  "link-text-default-disabled": "var(--color-link-text-default-disabled)",
+  "link-text-brown-disabled": "var(--color-link-text-brown-disabled)"
+};
+export const spacing = {
+  "0": "var(--spacing-0)",
+  "xxs": "var(--spacing-xxs)",
+  "xs": "var(--spacing-xs)",
+  "s": "var(--spacing-s)",
+  "m": "var(--spacing-m)",
+  "l": "var(--spacing-l)",
+  "xl": "var(--spacing-xl)",
+  "xxl": "var(--spacing-xxl)"
+};
+export const typographyStyles = {
+  "article-heading": "var(--article-heading)",
+  "article-heading-light": "var(--article-heading-light)",
+  "article-heading-alternate": "var(--article-heading-alternate)",
+  "article-heading-2": "var(--article-heading-2)",
+  "article-heading-2-light": "var(--article-heading-2-light)",
+  "article-heading-2-alternate": "var(--article-heading-2-alternate)",
+  "article-body": "var(--article-body)",
+  "article-type": "var(--article-type)",
+  "article-intro": "var(--article-intro)",
+  "article-city": "var(--article-city)",
+  "article-quote": "var(--article-quote)",
+  "article-question": "var(--article-question)",
+  "article-drop-cap": "var(--article-drop-cap)",
+  "article-drop-cap-alternate": "var(--article-drop-cap-alternate)",
+  "body-light": "var(--body-light)",
+  "body-regular": "var(--body-regular)",
+  "body-bold": "var(--body-bold)",
+  "body-uppercase": "var(--body-uppercase)",
+  "body-uppercase-bold": "var(--body-uppercase-bold)",
+  "body-uppercase-bold-small": "var(--body-uppercase-bold-small)",
+  "body-gulliver-semibold": "var(--body-gulliver-semibold)",
+  "heading-2": "var(--heading-2)",
+  "heading-3": "var(--heading-3)",
+  "heading-page": "var(--heading-page)",
+  "heading-subheading": "var(--heading-subheading)",
+  "heading-uppercase": "var(--heading-uppercase)",
+  "meta-light": "var(--meta-light)",
+  "meta-regular": "var(--meta-regular)",
+  "meta-bold": "var(--meta-bold)",
+  "meta-uppercase": "var(--meta-uppercase)",
+  "menu-menu-primary": "var(--menu-menu-primary)",
+  "menu-menu-secondary": "var(--menu-menu-secondary)",
+  "menu-menu-submenu": "var(--menu-menu-submenu)",
+  "menu-menu-tabbar": "var(--menu-menu-tabbar)",
+  "menu-menu-tabbar-active": "var(--menu-menu-tabbar-active)",
+  "menu-menu-tab-item": "var(--menu-menu-tab-item)",
+  "menu-menu-tab-item-active": "var(--menu-menu-tab-item-active)"
+};
+export const primitiveFontFamilies = {
+  "gulliver": "var(--font-family-gulliver)",
+  "fira-sans": "var(--font-family-fira-sans)",
+  "montserrat": "var(--font-family-montserrat)",
+  "abril-fatface": "var(--font-family-abril-fatface)"
+};
+export const primitiveFontSizes = {
+  "12": "var(--font-size-12)",
+  "14": "var(--font-size-14)",
+  "15": "var(--font-size-15)",
+  "16": "var(--font-size-16)",
+  "17": "var(--font-size-17)",
+  "18": "var(--font-size-18)",
+  "20": "var(--font-size-20)",
+  "22": "var(--font-size-22)",
+  "24": "var(--font-size-24)",
+  "26": "var(--font-size-26)",
+  "28": "var(--font-size-28)",
+  "30": "var(--font-size-30)",
+  "32": "var(--font-size-32)",
+  "36": "var(--font-size-36)",
+  "40": "var(--font-size-40)",
+  "48": "var(--font-size-48)",
+  "88": "var(--font-size-88)",
+  "96": "var(--font-size-96)"
+};
+export const primitiveFontWeights = {
+  "bold": "var(--font-weight-bold)",
+  "semibold": "var(--font-weight-semibold)",
+  "regular": "var(--font-weight-regular)",
+  "light": "var(--font-weight-light)"
+};
+export const primitiveLetterSpacings = {
+  "0": "var(--letter-spacing-0)",
+  "s": "var(--letter-spacing-s)",
+  "m": "var(--letter-spacing-m)",
+  "l": "var(--letter-spacing-l)"
+};
+export const primitiveBorderWidths = {
+  "0": "var(--border-width-0)",
+  "s": "var(--border-width-s)"
+};
+export const primitiveBorderRadius = {
+  "0": "var(--border-radius-0)",
+  "xl": "var(--border-radius-xl)"
+};
+export const semanticBorderRadius = {
+  "pill": "var(--border-radius-pill)"
+};
+export const primitiveBoxShadows = {
+  "s": "var(--box-shadow-s)",
+  "m": "var(--box-shadow-m)",
+  "l": "var(--box-shadow-l)"
+};