@vyriy/storybook-config 0.1.9

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Vyriy contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,59 @@
+# @vyriy/storybook-config
+
+Shared Storybook config for Vyriy projects.
+
+## Purpose
+
+This package provides the base Storybook setup used in Vyriy repositories:
+
+- shared `main` config
+- shared `preview` config
+- addon defaults
+- docs and theme behavior
+- common Storybook ergonomics for React projects
+
+## Install
+
+With npm:
+
+```bash
+npm install -D @vyriy/storybook-config storybook
+```
+
+With Yarn:
+
+```bash
+yarn add -D @vyriy/storybook-config storybook
+```
+
+Install `storybook` in the consumer project so CLI commands are available.
+
+## Usage
+
+Create `.storybook/main.ts`:
+
+```ts
+import config from '@vyriy/storybook-config/main';
+import { path } from '@vyriy/path';
+
+export default {
+  ...config,
+  stories: [
+    path('packages', '**/*.mdx'),
+    path('packages', '**/*.stories.@(js|jsx|mjs|ts|tsx)'),
+  ],
+};
+```
+
+Create `.storybook/preview.ts`:
+
+```ts
+export { default } from '@vyriy/storybook-config/preview';
+```
+
+## Current Vyriy Usage
+
+In this repository:
+
+- `.storybook/main.ts` re-exports `@vyriy/storybook-config/main`
+- `.storybook/preview.ts` imports local styles and re-exports `@vyriy/storybook-config/preview`

package/main.d.ts

@@ -0,0 +1,4 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+type SharedStorybookConfig = Omit<StorybookConfig, 'stories'>;
+declare const config: SharedStorybookConfig;
+export default config;

package/main.js

@@ -0,0 +1,64 @@
+const config = {
+    addons: [
+        '@storybook/addon-webpack5-compiler-swc',
+        '@storybook/addon-a11y',
+        '@storybook/addon-docs',
+        '@storybook/addon-themes',
+        'storybook-addon-pseudo-states',
+        '@vueless/storybook-dark-mode',
+        'storybook-addon-tag-badges',
+    ],
+    framework: '@storybook/react-webpack5',
+    features: {
+        sidebarOnboardingChecklist: false,
+    },
+    core: {
+        disableTelemetry: true,
+    },
+    docs: {
+        defaultName: 'API',
+    },
+    webpackFinal: (webpackConfig) => {
+        return {
+            ...webpackConfig,
+            performance: {
+                ...webpackConfig.performance,
+                hints: false,
+            },
+            module: {
+                ...webpackConfig.module,
+                rules: [
+                    ...(webpackConfig.module?.rules ?? []),
+                    {
+                        test: /\.scss$/,
+                        use: [
+                            'style-loader',
+                            'css-loader',
+                            'sass-loader',
+                        ],
+                    },
+                ],
+            },
+            resolve: {
+                ...webpackConfig.resolve,
+                extensionAlias: {
+                    ...webpackConfig.resolve?.extensionAlias,
+                    '.js': [
+                        '.ts',
+                        '.tsx',
+                        '.js',
+                    ],
+                    '.mjs': [
+                        '.mts',
+                        '.mjs',
+                    ],
+                    '.cjs': [
+                        '.cts',
+                        '.cjs',
+                    ],
+                },
+            },
+        };
+    },
+};
+export default config;

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@vyriy/storybook-config",
+  "version": "0.1.9",
+  "description": "Shared Storybook config for Vyriy projects",
+  "type": "module",
+  "main": "./main.js",
+  "dependencies": {
+    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/react-webpack5": "^10.3.6",
+    "@vueless/storybook-dark-mode": "^10.0.8",
+    "css-loader": "^7.1.4",
+    "react": "^19.2.6",
+    "sass-loader": "^16.0.8",
+    "storybook": "^10.3.6",
+    "style-loader": "^4.0.0"
+  },
+  "license": "MIT",
+  "types": "./main.d.ts",
+  "exports": {
+    ".": {
+      "types": "./main.d.ts",
+      "import": "./main.js",
+      "default": "./main.js"
+    },
+    "./main": {
+      "types": "./main.d.ts",
+      "import": "./main.js",
+      "default": "./main.js"
+    },
+    "./main.js": {
+      "types": "./main.d.ts",
+      "import": "./main.js",
+      "default": "./main.js"
+    },
+    "./preview": {
+      "types": "./preview.d.ts",
+      "import": "./preview.js",
+      "default": "./preview.js"
+    },
+    "./preview.js": {
+      "types": "./preview.d.ts",
+      "import": "./preview.js",
+      "default": "./preview.js"
+    }
+  }
+}

package/preview.d.ts

@@ -0,0 +1,3 @@
+import type { Preview } from '@storybook/react-webpack5';
+declare const preview: Preview;
+export default preview;

package/preview.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+import { themes } from 'storybook/theming';
+import { useDarkMode } from '@vueless/storybook-dark-mode';
+const ThemedDocsContainer = ({ children, context }) => {
+    const isDark = useDarkMode();
+    return (_jsx(DocsContainer, { context: context, theme: isDark ? themes.dark : themes.light, children: children }));
+};
+const preview = {
+    tags: ['autodocs'],
+    argTypes: {
+        items: {
+            table: {
+                disable: true,
+            },
+        },
+    },
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+        docs: {
+            container: ThemedDocsContainer,
+        },
+        backgrounds: { disable: true },
+        darkMode: {
+            classTarget: 'html',
+            stylePreview: true,
+            current: 'light',
+            dark: { ...themes.dark },
+            light: { ...themes.light },
+        },
+    },
+};
+export default preview;