storybook-addon-design-system-docs 1.0.0 → 1.0.2

package/dist/types-BVOYHsBN.d.cts

@@ -0,0 +1,178 @@
+declare const VALID_SECTIONS: readonly ["Colors", "Typography", "Spacing", "Shadows", "Radius"];
+
+/**
+ * User-facing configuration options for the Design System addon.
+ * These are the options passed to the addon in .storybook/main.ts
+ */
+interface DesignSystemAddonOptions {
+    /**
+     * Path to your Tailwind config file (relative to .storybook/ directory).
+     * Example: '../tailwind.config.js' or '../src/styles.css' (for Tailwind v4)
+     * This is now required - backwards compatibility has been removed.
+     */
+    tailwindConfig: string;
+    /**
+     * Sidebar group name for all documentation pages. This replaces defaultPath.
+     * @default 'Design System/'
+     */
+    sidebarGroup?: string;
+    /**
+     * Which theme sections to enable.
+     * @default ['Colors', 'Typography', 'Spacing', 'Shadows', 'BorderRadius']
+     */
+    sections?: TailwindSectionInput[];
+    /**
+     * If defined, combines all sections into one story.
+     */
+    forceSingleDoc?: CustomSectionInput;
+    /**
+     * When true, hides Tailwind's built-in values and shows only custom values.
+     * @default false
+     */
+    showOnlyCustom?: boolean;
+    /**
+     * Typography configuration options.
+     */
+    typography?: {
+        example?: string;
+    };
+    /**
+     * Template configuration for custom MDX rendering.
+     */
+    templates?: TemplateConfig;
+    /**
+     * Asset group configurations for icons, illustrations, etc.
+     */
+    assets?: AssetGroupConfig[];
+}
+type TailwindConfigSections = (typeof VALID_SECTIONS)[number];
+type SectionInput<NameType extends string> = NameType | {
+    name: NameType;
+    path?: string;
+};
+type TailwindSectionInput = SectionInput<TailwindConfigSections>;
+type CustomSectionInput = SectionInput<string>;
+interface NormalizedSection {
+    name: string;
+    path: string;
+}
+interface ResolvedConfig {
+    theme: {
+        colors: Record<string, any>;
+        fontSize: Record<string, any>;
+        fontFamily: Record<string, any>;
+        fontWeight: Record<string, any>;
+        spacing: Record<string, any>;
+        boxShadow: Record<string, any>;
+        borderRadius: Record<string, any>;
+    };
+}
+type ThemeCssVariables = Record<string, Record<string, string | string[]>>;
+/**
+ * Configuration for the template system and source code generation.
+ */
+interface TemplateConfig {
+    /**
+     * Path to directory containing custom templates.
+     * Templates in this directory override defaults by matching filename.
+     * @example './.storybook/theme-templates'
+     */
+    directory?: string;
+    /**
+     * Whether to enable template caching (default: true in production)
+     */
+    cache?: boolean;
+    /**
+     * Whether to use React components (true) or inline framework-agnostic templates (false).
+     * Default: false (framework-agnostic templates)
+     *
+     * When true: Templates use pre-built React components (smaller bundles, React-only)
+     * When false: Templates generate all markup/logic inline (larger bundles, framework-agnostic)
+     */
+    useReactComponents?: boolean;
+    /**
+     * Custom filters to add to the template engine.
+     * Key is the filter name, value is the filter function.
+     */
+    filters?: Record<string, (...args: any[]) => any>;
+    /**
+     * Additional context data available to all templates
+     */
+    globals?: Record<string, any>;
+}
+interface AssetVariantConfig {
+    enabled: boolean;
+    suffixes: [string, string];
+    defaultVariant: "light" | "dark";
+}
+interface AssetDisplayConfig {
+    layout: "grid" | "list";
+    columns: number;
+    showFilename: boolean;
+    showPath: boolean;
+    previewSize: number;
+    background: "transparent" | "light" | "dark" | "checkerboard";
+}
+interface AssetCopyConfig {
+    import?: string;
+    component?: string;
+}
+interface AssetFilterConfig {
+    include: string[];
+    exclude: string[];
+}
+interface AssetGroupConfig {
+    name: string;
+    path?: string;
+    source: string;
+    /**
+     * URL path where assets are served from (e.g., '/assets/illustrations').
+     * When provided, assets are served directly from this path without copying.
+     * User must configure staticDirs in their Storybook config to serve from this path.
+     */
+    staticPath?: string;
+    title?: string;
+    description?: string;
+    variants?: Partial<AssetVariantConfig>;
+    display?: Partial<AssetDisplayConfig>;
+    copy?: AssetCopyConfig;
+    filter?: Partial<AssetFilterConfig>;
+    groupByFolder?: boolean;
+}
+interface NormalizedAssetGroup {
+    name: string;
+    path: string;
+    source: string;
+    /** URL path where assets are served from. Either user-provided or auto-generated. */
+    staticPath: string;
+    title: string;
+    description?: string;
+    variants: AssetVariantConfig;
+    display: AssetDisplayConfig;
+    copy: AssetCopyConfig;
+    filter: AssetFilterConfig;
+    groupByFolder: boolean;
+}
+interface Asset {
+    id: string;
+    name: string;
+    filename: string;
+    relativePath: string;
+    absolutePath: string;
+    url: string;
+    folder?: string;
+    ext: string;
+    variants?: {
+        light?: string;
+        dark?: string;
+    };
+    type: "svg" | "png" | "jpg" | "jpeg" | "gif" | "webp";
+}
+interface AssetGroup {
+    name: string;
+    config: NormalizedAssetGroup;
+    assets: Asset[];
+    folders?: Map<string, Asset[]>;
+}
+
+export type { AssetGroup as A, DesignSystemAddonOptions as D, NormalizedAssetGroup as N, ResolvedConfig as R, ThemeCssVariables as T, Asset as a, AssetGroupConfig as b, AssetVariantConfig as c, NormalizedSection as d, TemplateConfig as e };

package/dist/types-BVOYHsBN.d.ts

@@ -0,0 +1,178 @@
+declare const VALID_SECTIONS: readonly ["Colors", "Typography", "Spacing", "Shadows", "Radius"];
+
+/**
+ * User-facing configuration options for the Design System addon.
+ * These are the options passed to the addon in .storybook/main.ts
+ */
+interface DesignSystemAddonOptions {
+    /**
+     * Path to your Tailwind config file (relative to .storybook/ directory).
+     * Example: '../tailwind.config.js' or '../src/styles.css' (for Tailwind v4)
+     * This is now required - backwards compatibility has been removed.
+     */
+    tailwindConfig: string;
+    /**
+     * Sidebar group name for all documentation pages. This replaces defaultPath.
+     * @default 'Design System/'
+     */
+    sidebarGroup?: string;
+    /**
+     * Which theme sections to enable.
+     * @default ['Colors', 'Typography', 'Spacing', 'Shadows', 'BorderRadius']
+     */
+    sections?: TailwindSectionInput[];
+    /**
+     * If defined, combines all sections into one story.
+     */
+    forceSingleDoc?: CustomSectionInput;
+    /**
+     * When true, hides Tailwind's built-in values and shows only custom values.
+     * @default false
+     */
+    showOnlyCustom?: boolean;
+    /**
+     * Typography configuration options.
+     */
+    typography?: {
+        example?: string;
+    };
+    /**
+     * Template configuration for custom MDX rendering.
+     */
+    templates?: TemplateConfig;
+    /**
+     * Asset group configurations for icons, illustrations, etc.
+     */
+    assets?: AssetGroupConfig[];
+}
+type TailwindConfigSections = (typeof VALID_SECTIONS)[number];
+type SectionInput<NameType extends string> = NameType | {
+    name: NameType;
+    path?: string;
+};
+type TailwindSectionInput = SectionInput<TailwindConfigSections>;
+type CustomSectionInput = SectionInput<string>;
+interface NormalizedSection {
+    name: string;
+    path: string;
+}
+interface ResolvedConfig {
+    theme: {
+        colors: Record<string, any>;
+        fontSize: Record<string, any>;
+        fontFamily: Record<string, any>;
+        fontWeight: Record<string, any>;
+        spacing: Record<string, any>;
+        boxShadow: Record<string, any>;
+        borderRadius: Record<string, any>;
+    };
+}
+type ThemeCssVariables = Record<string, Record<string, string | string[]>>;
+/**
+ * Configuration for the template system and source code generation.
+ */
+interface TemplateConfig {
+    /**
+     * Path to directory containing custom templates.
+     * Templates in this directory override defaults by matching filename.
+     * @example './.storybook/theme-templates'
+     */
+    directory?: string;
+    /**
+     * Whether to enable template caching (default: true in production)
+     */
+    cache?: boolean;
+    /**
+     * Whether to use React components (true) or inline framework-agnostic templates (false).
+     * Default: false (framework-agnostic templates)
+     *
+     * When true: Templates use pre-built React components (smaller bundles, React-only)
+     * When false: Templates generate all markup/logic inline (larger bundles, framework-agnostic)
+     */
+    useReactComponents?: boolean;
+    /**
+     * Custom filters to add to the template engine.
+     * Key is the filter name, value is the filter function.
+     */
+    filters?: Record<string, (...args: any[]) => any>;
+    /**
+     * Additional context data available to all templates
+     */
+    globals?: Record<string, any>;
+}
+interface AssetVariantConfig {
+    enabled: boolean;
+    suffixes: [string, string];
+    defaultVariant: "light" | "dark";
+}
+interface AssetDisplayConfig {
+    layout: "grid" | "list";
+    columns: number;
+    showFilename: boolean;
+    showPath: boolean;
+    previewSize: number;
+    background: "transparent" | "light" | "dark" | "checkerboard";
+}
+interface AssetCopyConfig {
+    import?: string;
+    component?: string;
+}
+interface AssetFilterConfig {
+    include: string[];
+    exclude: string[];
+}
+interface AssetGroupConfig {
+    name: string;
+    path?: string;
+    source: string;
+    /**
+     * URL path where assets are served from (e.g., '/assets/illustrations').
+     * When provided, assets are served directly from this path without copying.
+     * User must configure staticDirs in their Storybook config to serve from this path.
+     */
+    staticPath?: string;
+    title?: string;
+    description?: string;
+    variants?: Partial<AssetVariantConfig>;
+    display?: Partial<AssetDisplayConfig>;
+    copy?: AssetCopyConfig;
+    filter?: Partial<AssetFilterConfig>;
+    groupByFolder?: boolean;
+}
+interface NormalizedAssetGroup {
+    name: string;
+    path: string;
+    source: string;
+    /** URL path where assets are served from. Either user-provided or auto-generated. */
+    staticPath: string;
+    title: string;
+    description?: string;
+    variants: AssetVariantConfig;
+    display: AssetDisplayConfig;
+    copy: AssetCopyConfig;
+    filter: AssetFilterConfig;
+    groupByFolder: boolean;
+}
+interface Asset {
+    id: string;
+    name: string;
+    filename: string;
+    relativePath: string;
+    absolutePath: string;
+    url: string;
+    folder?: string;
+    ext: string;
+    variants?: {
+        light?: string;
+        dark?: string;
+    };
+    type: "svg" | "png" | "jpg" | "jpeg" | "gif" | "webp";
+}
+interface AssetGroup {
+    name: string;
+    config: NormalizedAssetGroup;
+    assets: Asset[];
+    folders?: Map<string, Asset[]>;
+}
+
+export type { AssetGroup as A, DesignSystemAddonOptions as D, NormalizedAssetGroup as N, ResolvedConfig as R, ThemeCssVariables as T, Asset as a, AssetGroupConfig as b, AssetVariantConfig as c, NormalizedSection as d, TemplateConfig as e };

package/package.json

@@ -1,153 +1,151 @@
 {
-  "name": "storybook-addon-design-system-docs",
-  "version": "1.0.0",
-  "description": "Design System documentation that comes directly from your tailwind config.",
-  "author": "Saulo Vallory <https://saulo.engineer>",
-  "contributors": [
-    "Matan Yosef <https://github.com/matanio>"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/svallory/storybook-addon-design-system-docs"
-  },
-  "dependencies": {
-    "unplugin": "^1.12.0"
-  },
-  "devDependencies": {
-    "@biomejs/biome": "^2.3.11",
-    "@chromatic-com/storybook": "^4.1.3",
-    "@frontline-hq/recma-sections": "^1.0.8",
-    "@storybook/addon-a11y": "^10.1.11",
-    "@storybook/addon-docs": "^10.1.11",
-    "@storybook/addon-links": "^10.1.11",
-    "@storybook/addon-vitest": "^10.1.11",
-    "@storybook/mdx2-csf": "^1.1.0",
-    "@storybook/react-vite": "^10.1.11",
-    "@types/node": "^18.15.0",
-    "@types/react": "^18.2.65",
-    "@types/react-dom": "^18.2.21",
-    "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/browser": "^2.1.9",
-    "@vitest/coverage-v8": "^2.1.9",
-    "auto": "^11.1.1",
-    "autoprefixer": "^10.4.23",
-    "boxen": "^7.1.1",
-    "dedent": "^1.5.1",
-    "nodemon": "^3.1.10",
-    "npm-run-all": "^4.1.5",
-    "playwright": "^1.57.0",
-    "postcss": "^8.5.6",
-    "prompts": "^2.4.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "storybook": "^10.1.11",
-    "tailwindcss": "^3.0.0 || ^4.0.0",
-    "tsup": "^8.5.0",
-    "typescript": "^5.4.2",
-    "vite": "^5.4.21",
-    "vitest": "^2.1.9",
-    "zx": "^7.2.3"
-  },
-  "peerDependencies": {
-    "tailwindcss": "^3.0.0 || ^4.0.0",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+    "name": "storybook-addon-design-system-docs",
+    "version": "1.0.2",
+    "description": "Design System documentation that comes directly from your tailwind config.",
+    "author": "Saulo Vallory <https://saulo.engineer>",
+    "contributors": [
+        "Matan Yosef <https://github.com/matanio>"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/svallory/storybook-addon-design-system-docs"
     },
-    "./preset": {
-      "types": "./dist/preset.d.ts",
-      "import": "./dist/preset.js",
-      "require": "./dist/preset.cjs"
+    "dependencies": {
+        "unplugin": "^1.12.0"
     },
-    "./manager": "./dist/manager.js",
-    "./components": {
-      "types": "./dist/components/primitives/index.d.ts",
-      "import": "./dist/components/primitives/index.js"
+    "devDependencies": {
+        "@biomejs/biome": "^2.3.11",
+        "@chromatic-com/storybook": "^4.1.3",
+        "@frontline-hq/recma-sections": "^1.0.8",
+        "@storybook/addon-a11y": "^10.1.11",
+        "@storybook/addon-docs": "^10.1.11",
+        "@storybook/addon-links": "^10.1.11",
+        "@storybook/addon-vitest": "^10.1.11",
+        "@storybook/mdx2-csf": "^1.1.0",
+        "@storybook/react-vite": "^10.1.11",
+        "@types/node": "^18.15.0",
+        "@types/react": "^18.2.65",
+        "@types/react-dom": "^18.2.21",
+        "@vitejs/plugin-react": "^4.2.1",
+        "@vitest/browser": "^2.1.9",
+        "@vitest/coverage-v8": "^2.1.9",
+        "auto": "^11.1.1",
+        "autoprefixer": "^10.4.23",
+        "boxen": "^7.1.1",
+        "dedent": "^1.5.1",
+        "nodemon": "^3.1.10",
+        "npm-run-all": "^4.1.5",
+        "playwright": "^1.57.0",
+        "postcss": "^8.5.6",
+        "prompts": "^2.4.2",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "storybook": "^10.1.11",
+        "tailwindcss": "^3.0.0 || ^4.0.0",
+        "tsup": "^8.5.0",
+        "typescript": "^5.4.2",
+        "vite": "^5.4.21",
+        "vitest": "^2.1.9",
+        "zx": "^7.2.3"
     },
-    "./components/theme": {
-      "types": "./dist/components/primitives/index.d.ts",
-      "import": "./dist/components/primitives/index.js",
-      "require": "./dist/components/primitives/index.cjs"
+    "peerDependencies": {
+        "tailwindcss": "^3.0.0 || ^4.0.0"
     },
-    "./components/assets": {
-      "types": "./dist/components/assets/index.d.ts",
-      "import": "./dist/components/assets/index.js",
-      "require": "./dist/components/assets/index.cjs"
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js",
+            "require": "./dist/index.cjs"
+        },
+        "./preset": {
+            "types": "./dist/preset.d.ts",
+            "import": "./dist/preset.js",
+            "require": "./dist/preset.cjs"
+        },
+        "./manager": "./dist/manager.js",
+        "./components": {
+            "types": "./dist/components/primitives/index.d.ts",
+            "import": "./dist/components/primitives/index.js"
+        },
+        "./components/theme": {
+            "types": "./dist/components/primitives/index.d.ts",
+            "import": "./dist/components/primitives/index.js",
+            "require": "./dist/components/primitives/index.cjs"
+        },
+        "./components/assets": {
+            "types": "./dist/components/assets/index.d.ts",
+            "import": "./dist/components/assets/index.js",
+            "require": "./dist/components/assets/index.cjs"
+        },
+        "./assets": {
+            "types": "./dist/assets.d.ts",
+            "import": "./dist/assets.js",
+            "require": "./dist/assets.cjs"
+        },
+        "./mdx-templates/*": "./templates/*.mdx",
+        "./package.json": "./package.json"
     },
-    "./assets": {
-      "types": "./dist/assets.d.ts",
-      "import": "./dist/assets.js",
-      "require": "./dist/assets.cjs"
+    "bundler": {
+        "exportEntries": [
+            "src/addon/index.ts",
+            "src/addon/assets.ts",
+            "src/addon/components/primitives/index.ts",
+            "src/addon/components/assets/index.ts"
+        ],
+        "managerEntries": [
+            "src/addon/manager.tsx"
+        ],
+        "nodeEntries": [
+            "src/addon/preset.ts"
+        ]
     },
-    "./mdx-templates/*": "./templates/*.mdx",
-    "./package.json": "./package.json"
-  },
-  "bundler": {
-    "exportEntries": [
-      "src/addon/index.ts",
-      "src/addon/assets.ts",
-      "src/addon/components/primitives/index.ts",
-      "src/addon/components/assets/index.ts"
-    ],
-    "managerEntries": [
-      "src/addon/manager.tsx"
+    "files": [
+        "dist/**/*",
+        "templates",
+        "README.md",
+        "*.js",
+        "*.d.ts"
     ],
-    "nodeEntries": [
-      "src/addon/preset.ts"
-    ]
-  },
-  "files": [
-    "dist/**/*",
-    "templates",
-    "README.md",
-    "*.js",
-    "*.d.ts"
-  ],
-  "keywords": [
-    "tailwind",
-    "css",
-    "layout",
-    "appearance",
-    "style",
-    "design",
-    "system",
-    "auto",
-    "docs",
-    "storybook-addons"
-  ],
-  "license": "MIT",
-  "overrides": {
-    "storybook": "$storybook"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "build": "tsup",
-    "build:watch": "bun run build -- --watch",
-    "test": "vitest",
-    "lint": "biome check src",
-    "lint:fix": "biome check src --write",
-    "format": "biome format src --write",
-    "start": "bun run build && run-p build:watch storybook:rebuild",
-    "prerelease": "zx scripts/prepublish-checks.js",
-    "release": "bun run build && auto shipit",
-    "storybook:rebuild": "nodemon --watch dist --exec \"storybook dev -p 6006 --no-open\"",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "storybook": {
-    "displayName": "Design System Docs",
-    "supportedFrameworks": [
-      "react",
-      "vue"
+    "keywords": [
+        "tailwind",
+        "css",
+        "layout",
+        "appearance",
+        "style",
+        "design",
+        "system",
+        "auto",
+        "docs",
+        "storybook-addons"
     ],
-    "icon": "https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"
-  },
-  "type": "module"
+    "license": "MIT",
+    "overrides": {
+        "storybook": "$storybook"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "build": "tsup",
+        "build:watch": "bun run build -- --watch",
+        "test": "vitest",
+        "lint": "biome check src",
+        "lint:fix": "biome check src --write",
+        "format": "biome format src --write",
+        "start": "bun run build && run-p build:watch storybook:rebuild",
+        "prerelease": "zx scripts/prepublish-checks.js",
+        "release": "bun run build && auto shipit",
+        "storybook:rebuild": "nodemon --watch dist --exec \"storybook dev -p 6006 --no-open\"",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build"
+    },
+    "storybook": {
+        "displayName": "Design System Docs",
+        "supportedFrameworks": [
+            "react",
+            "vue"
+        ],
+        "icon": "https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"
+    },
+    "type": "module"
 }

package/templates/spacing.mdx

@@ -2,7 +2,7 @@ import { Meta } from "@storybook/addon-docs/blocks";
 import { SpacingSection, ThemeLayout } from 'storybook-addon-design-system-docs/components/theme';
 import { spacing } from 'design-system-docs:theme';
 
-<Meta title="Design System/Layout/Spacing" />
+<Meta title="Design System/Spacing" />
 
 <ThemeLayout title="Spacing">
   <SpacingSection