@xyd-js/storybook 0.0.1-build.167

package/.storybook/main.ts

@@ -0,0 +1,40 @@
+import { join, dirname } from "path";
+
+import React from "react";
+import type { StorybookConfig } from "@storybook/react-vite";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+    return dirname(require.resolve(join(value, "package.json")));
+}
+
+
+const config: StorybookConfig = {
+    stories: ["../src/docs/**/*.mdx", "../src/docs/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+    addons: [
+        getAbsolutePath("@storybook/addon-essentials"),
+        getAbsolutePath("@storybook/addon-storysource"),
+        {
+            name: '@storybook/addon-docs',
+            options: {
+                mdxPluginOptions: {
+                    mdxCompileOptions: {
+                        remarkPlugins: [
+                        ]
+                    },
+                },
+            },
+        },
+    ],
+    framework: {
+        name: getAbsolutePath("@storybook/react-vite"),
+        options: {},
+    },
+    features: {
+        experimentalRSC: true,
+    }
+};
+export default config;

package/.storybook/manager-head.html

@@ -0,0 +1,6 @@
+<!-- .storybook/manager-head.html -->
+<style>
+    .sidebar-container {
+        padding-inline: 10px;
+    }
+  </style>

package/.storybook/manager.ts

@@ -0,0 +1,18 @@
+// .storybook/manager.ts
+import { addons } from '@storybook/manager-api';
+import theme from './theme';
+
+addons.setConfig({
+  // where to show the addon panel: 'bottom' (default) or 'right'
+  panelPosition: 'right',
+  // you can also tweak its size if you like:
+  bottomPanelHeight: 200,  // height in px when bottom
+  rightPanelWidth: 300,    // width in px when right
+  // (and any other UI settings you need)
+
+  selectedPanel: 'storybookjs/storysource/panel',
+  navSize: 230,
+
+  // Apply custom theme
+  theme,
+});

package/.storybook/preview.ts

@@ -0,0 +1,40 @@
+import type {Preview} from "@storybook/react";
+
+// import "@xyd-js/theme-poetry/index.css" // TODO: in the future configurable themes via UI?
+// import "@xyd-js/theme-gusto/index.css" // TODO: in the future configurable themes via UI?
+// import "@xyd-js/theme-opener/index.css" // TODO: in the future configurable themes via UI?
+import "@xyd-js/theme-solar/index.css" // TODO: in the future configurable themes via UI?
+
+import './styles.css'
+
+const preview: Preview = {
+    parameters: {
+        options: {
+            storySort: {
+                order: [
+                    'Components', ['Writer', 'Coder'],
+                    'Atlas',
+                    'UI',
+                    'Layouts',
+                    'Themes', ['Default', 'Design System'],
+                ], // TODO: nested sorting
+            },
+        },
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+        // Source addon configuration
+        docs: {
+            source: {
+                state: 'open', // 'open' | 'closed' | 'none'
+                type: 'auto', // 'auto' | 'code' | 'dynamic'
+                excludeDecorators: true,
+            },
+        },
+    },
+};
+
+export default preview;

package/.storybook/styles.css

@@ -0,0 +1,5 @@
+/* Core */
+:root {
+    --color-primary: #0b64dd;
+    --color-primary--active: #1750ba;
+}

package/.storybook/theme.ts

@@ -0,0 +1,34 @@
+import { create } from '@storybook/theming/create';
+
+export default create({
+  base: 'light',
+  brandTitle: 'XYD Storybook',
+  brandUrl: 'https://github.com/xyd-js/xyd',
+  brandImage: '/logo.svg',
+  brandTarget: '_self',
+  
+  // Color palette
+//   colorPrimary: '#3f51b5',
+//   colorSecondary: '#f50057',
+  
+  // UI
+//   appBg: '#1a1a1a',
+//   appContentBg: '#2a2a2a',
+//   appBorderColor: '#404040',
+//   appBorderRadius: 4,
+  
+  // Text colors
+//   textColor: '#ffffff',
+//   textInverseColor: '#000000',
+  
+  // Toolbar default and active colors
+//   barTextColor: '#ffffff',
+//   barSelectedColor: '#3f51b5',
+//   barBg: '#2a2a2a',
+  
+  // Form colors
+//   inputBg: '#3a3a3a',
+//   inputBorder: '#404040',
+//   inputTextColor: '#ffffff',
+//   inputBorderRadius: 4,
+});