initial

.storybook/main.js

@@ -0,0 +1,37 @@
+const path = require('path');
+
+module.exports = {
+    stories: ['../src/stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
+    staticDirs: ['../src/stories/assets'],
+    output: '../docs/',
+    logLevel: 'debug',
+    addons: [
+        '@storybook/addon-docs',
+        '@storybook/addon-actions',
+        '@storybook/addon-backgrounds',
+        '@storybook/addon-controls',
+        '@storybook/addon-viewport',
+        '@storybook/addon-links',
+        '@storybook/addon-highlight',
+        '@storybook/addon-storysource',
+        '@storybook/addon-webpack5-compiler-babel',
+        '@chromatic-com/storybook'
+    ],
+    core: {
+        channelOptions: { allowFunction: false, maxDepth: 10 },
+        disableTelemetry: true,
+    },
+    features: {
+        buildStoriesJson: true,
+        breakingChangesV7: true,
+        babelModeV7: true,
+    },
+    framework: '@pixi/storybook-webpack5',
+    webpackFinal: async (config) => {
+        config.resolve.alias = {
+            ...config.resolve.alias,
+            src: path.resolve(__dirname, '../src'),
+        };
+        return config;
+    },
+};

.storybook/preview.js

@@ -0,0 +1,26 @@
+export const parameters = {
+    layout: 'fullscreen',
+    pixi: {
+        applicationOptions: {
+            backgroundAlpha: 0,
+            resolution: 2,
+            antialias: true,
+        },
+    },
+    backgrounds: {
+        default: 'Dark',
+        values: [
+            {
+                name: 'Dark',
+                value: '#1b1c1d',
+            },
+            {
+                name: 'Light',
+                value: '#dddddd',
+            },
+        ],
+    },
+    docs: {
+        iframeHeight: 600, // Устанавливает высоту для всех историй в документации
+    },
+};