@osmn-byhn/storybook-docs 1.0.0

package/.storybook/debug-wrapper.js

@@ -0,0 +1,3 @@
+// ESM wrapper for the debug CommonJS package
+import debugCJS from '../../../node_modules/.pnpm/debug@4.4.3/node_modules/debug/src/browser.js';
+export default debugCJS;

package/.storybook/extend-wrapper.js

@@ -0,0 +1,3 @@
+// ESM wrapper for the extend CommonJS package
+import extendCJS from '../../../node_modules/.pnpm/extend@3.0.2/node_modules/extend/index.js';
+export default extendCJS;

package/.storybook/main.js

@@ -0,0 +1,49 @@
+const path = require("path");
+
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+module.exports = {
+  framework: "@storybook/react-vite",
+  stories: ["../stories/**/*.stories.@(ts|tsx)"],
+
+  viteFinal: async (config) => {
+    config.resolve = config.resolve || {};
+    const rootPath = path.resolve(__dirname, "../../..");
+
+    config.resolve.alias = {
+      ...(config.resolve.alias || {}),
+      "editor-react": path.resolve(rootPath, "packages/editor-react/src"),
+      "editor-core": path.resolve(rootPath, "packages/editor-core"),
+      "editor-parsers": path.resolve(rootPath, "packages/editor-parsers/src"),
+      // Use ESM wrappers for CommonJS packages to handle interop
+      "extend": path.resolve(__dirname, "extend-wrapper.js"),
+      "debug": path.resolve(__dirname, "debug-wrapper.js"),
+      "ms": path.resolve(__dirname, "ms-wrapper.js"),
+    };
+
+    // Ensure TypeScript files are resolved
+    config.resolve.extensions = [
+      ...(config.resolve.extensions || []),
+      ".ts",
+      ".tsx",
+      ".js",
+      ".cjs",
+    ];
+
+    // Configure dependency optimization for CommonJS packages
+    config.optimizeDeps = config.optimizeDeps || {};
+
+    // All problematic CommonJS packages are now handled via ESM wrappers
+    config.optimizeDeps.exclude = [
+      ...(config.optimizeDeps.exclude || []),
+    ];
+
+    // Configure esbuild to handle CommonJS dependencies properly
+    config.optimizeDeps.esbuildOptions = {
+      ...(config.optimizeDeps.esbuildOptions || {}),
+      mainFields: ["module", "main"],
+      platform: "browser",
+    };
+
+    return config;
+  },
+};

package/.storybook/ms-wrapper.js

@@ -0,0 +1,3 @@
+// ESM wrapper for the ms CommonJS package
+import msCJS from '../../../node_modules/.pnpm/ms@2.1.3/node_modules/ms/index.js';
+export default msCJS;

package/.storybook/preview.js

@@ -0,0 +1,20 @@
+/** @type { import('@storybook/react-vite').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: "todo"
+    }
+  },
+};
+
+export default preview;

package/.storybook/vitest.setup.js

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from '@storybook/react-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@osmn-byhn/storybook-docs",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "storybook": "^1.0.0",
+    "@storybook/react-vite": "^10.2.3",
+    "@chromatic-com/storybook": "^5.0.0",
+    "@storybook/addon-vitest": "^10.2.3",
+    "@storybook/addon-a11y": "^10.2.3",
+    "@storybook/addon-docs": "^10.2.3",
+    "prop-types": "^15.8.1",
+    "vitest": "^4.0.18",
+    "playwright": "^1.58.1",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "@osmn-byhn/mdarea": "0.0.2"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  }
+}

package/stories/CustomizedEditor.stories.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { MarkdownEditorProvider, MarkdownEditor } from "editor-react";
+import "./custom-theme.css";
+
+const meta: Meta<typeof MarkdownEditor> = {
+    title: "Editor/CustomizedEditor",
+    component: MarkdownEditor,
+    argTypes: {
+        onChange: { action: 'changed' }
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MarkdownEditor>;
+
+export const TurkishTheme: Story = {
+    args: {
+        labels: {
+            write: 'Editor',
+            preview: 'Page'
+        },
+        placeholder: "Customeized some markdown...",
+        previewStyle: {
+            fontFamily: 'Georgia, serif',
+            fontSize: '1.25rem',
+            lineHeight: '1.8',
+            color: '#333'
+        },
+        classNames: {
+            container: 'custom-dark-theme',
+            toolbar: 'custom-toolbar',
+            mobileTabs: 'custom-mobile-tabs',
+            tabBtn: 'custom-tab-btn',
+            contentArea: 'custom-content-area',
+            editorPane: 'custom-editor-pane',
+            previewPane: 'custom-preview-pane'
+        }
+    },
+    render: (args) => (
+        <div style={{ height: '600px', padding: '20px', backgroundColor: '#f3f4f6' }}>
+            <h3 style={{ marginBottom: '10px', fontFamily: 'sans-serif' }}>Customized Editor</h3>
+            <MarkdownEditor {...args} />
+        </div>
+    ),
+};
+

package/stories/Editor.stories.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { MarkdownEditor } from "editor-react";
+
+const meta: Meta<typeof MarkdownEditor> = {
+  title: "Editor/MarkdownEditor",
+  component: MarkdownEditor,
+  argTypes: {
+    onChange: { action: 'changed' }
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MarkdownEditor>;
+
+export const Basic: Story = {
+  args: {
+    placeholder: "Type some markdown...",
+  },
+  render: (args) => (
+    <div style={{ height: '500px', padding: '20px' }}>
+      <MarkdownEditor {...args} />
+    </div>
+  ),
+};
+
+
+

package/stories/Independent.stories.tsx

@@ -0,0 +1,133 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { MarkdownEditorProvider } from "editor-react";
+import { Preview } from "editor-react";
+import { Editor } from "editor-react";
+import { MarkdownEditor } from "editor-react";
+
+const meta: Meta = {
+    title: "Editor/Independent Components",
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const StandalonePreview: Story = {
+    args: {
+        markdown: "# Hello World\nThis content is passed directly via **markdown** prop.\n- List item 1\n- List item 2"
+    },
+    render: (args) => (
+        <div style={{ padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>
+            <h3>Standalone Preview</h3>
+            <p>This preview is not connected to an editor context.</p>
+            <Preview {...args} />
+        </div>
+    ),
+};
+
+
+export const EditorWithStateExtraction: Story = {
+    render: () => {
+        const [value, setValue] = useState("# Initial Content\nType here...");
+
+        return (
+            <div style={{ padding: '20px', display: 'flex', gap: '20px' }}>
+                <div style={{ flex: 1 }}>
+                    <h3>Editor (Controlled)</h3>
+                    <MarkdownEditorProvider
+                        initialValue={value}
+                        onChange={(v) => setValue(v)}
+                    >
+                        <div style={{ border: '1px solid #ccc', height: '300px' }}>
+                            <Editor />
+                        </div>
+                    </MarkdownEditorProvider>
+                </div>
+                <div style={{ flex: 1, padding: '10px', background: '#f5f5f5', borderRadius: '8px' }}>
+                    <h3>State Output</h3>
+                    <pre style={{ whiteSpace: 'pre-wrap' }}>{value}</pre>
+                </div>
+            </div>
+        );
+    },
+};
+
+export const MarkdownEditorControlled: Story = {
+    render: () => {
+        const [value, setValue] = useState("# Controlled Editor\n\nType here to see state update below.");
+
+        return (
+            <div style={{ padding: '20px' }}>
+                <div style={{ height: '400px', marginBottom: '20px' }}>
+                    <MarkdownEditor
+                        value={value}
+                        onChange={setValue}
+                    />
+                </div>
+
+                <div style={{ padding: '10px', background: '#f0f9ff', borderRadius: '8px', border: '1px solid #bae6fd' }}>
+                    <strong>Current State:</strong>
+                    <pre style={{ marginTop: '10px' }}>{value}</pre>
+                </div>
+            </div>
+        );
+    },
+
+};
+
+export const StyledPreview: Story = {
+    args: {
+        markdown: "# Stylish Preview\nThis has a custom font and background.",
+        style: {
+            "fontFamily": "Comic Sans MS, cursive, sans-serif",
+            "backgroundColor": "#fffbeb",
+            "padding": "20px",
+            "borderRadius": "12px",
+            "color": "red",
+            "border": "2px dashed #f59e0b"
+        }
+    },
+    render: (args) => (
+        <div style={{ padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>
+            <h3>Styled Preview</h3>
+            <p>Demonstrates customizing the preview component directly.</p>
+            <Preview {...args} />
+        </div>
+    ),
+};
+
+export const CustomizedControlledEditor: Story = {
+    args: {
+        placeholder: "Start typing your masterpiece...",
+        previewStyle: {
+            fontFamily: 'Merriweather, serif',
+            fontSize: '1.1rem',
+            color: '#2c3e50',
+            lineHeight: '1.7'
+        },
+        classNames: {
+            container: 'custom-modern-theme',
+            toolbar: 'custom-modern-toolbar'
+        }
+    },
+    render: (args) => {
+        const [value, setValue] = useState("# Customized & Controlled\n\nThis editor has custom placeholder and preview styles, while being fully controlled.");
+
+        return (
+            <div style={{ padding: '20px' }}>
+                <div style={{ height: '500px', marginBottom: '20px' }}>
+                    <MarkdownEditor
+                        {...args}
+                        value={value}
+                        onChange={setValue}
+                    />
+                </div>
+
+                <div style={{ padding: '10px', background: '#e0f2fe', borderRadius: '8px', color: '#0369a1' }}>
+                    <strong>Live Value:</strong> {value.length} characters
+                </div>
+            </div>
+        );
+    },
+};

package/stories/TailwindExample.stories.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { MarkdownEditor } from "editor-react";
+
+const meta: Meta<typeof MarkdownEditor> = {
+    title: "Editor/Tailwind Example",
+    component: MarkdownEditor,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MarkdownEditor>;
+
+export const TailwindStyled: Story = {
+    args: {
+        placeholder: "Tailwind styled editor...",
+        classNames: {
+            container: "border-2 border-indigo-500 rounded-xl overflow-hidden shadow-lg",
+            toolbar: "bg-indigo-50 border-b border-indigo-100 p-2",
+            toolbarBtn: "hover:bg-indigo-200 text-indigo-700 rounded transition-colors duration-200",
+            textArea: "focus:ring-2 focus:ring-indigo-300 outline-none p-4",
+            previewPane: "prose prose-indigo max-w-none p-4 bg-white"
+        }
+    },
+    render: (args) => (
+        <div className="p-8 bg-gray-50 min-h-screen">
+            <div className="max-w-4xl mx-auto">
+                <h2 className="text-2xl font-bold text-gray-800 mb-6">Tailwind CSS Integration</h2>
+                <div style={{ height: '600px' }}>
+                    <MarkdownEditor {...args} />
+                </div>
+                <p className="mt-4 text-gray-500 text-sm italic">
+                    Note: This example uses utility classes. In a real project with Tailwind installed, these would apply automatically.
+                </p>
+            </div>
+        </div>
+    ),
+};

package/stories/custom-theme.css

@@ -0,0 +1,59 @@
+/* Custom Theme for Markdown Editor */
+
+.custom-dark-theme.md-editor-container {
+    border-color: #4b5563;
+    border-radius: 12px;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.custom-toolbar {
+    background-color: #1f2937 !important;
+    border-bottom-color: #374151 !important;
+}
+
+.custom-toolbar button {
+    color: #d1d5db !important;
+}
+
+.custom-toolbar button:hover {
+    background-color: #374151 !important;
+    color: #f3f4f6 !important;
+}
+
+.custom-toolbar button.active {
+    background-color: #4b5563 !important;
+    color: #fff !important;
+}
+
+.custom-content-area {
+    background-color: #f9fafb;
+}
+
+.custom-editor-pane textarea {
+    background-color: #fffaf0 !important;
+    /* Slight yellow tint for "paper" feel */
+    color: #333 !important;
+}
+
+.custom-preview-pane {
+    background-color: #ffffff !important;
+    font-family: 'Georgia', serif;
+    /* Serif font for preview */
+}
+
+/* Mobile Tabs Customization */
+.custom-mobile-tabs {
+    background-color: #1f2937 !important;
+    border-bottom-color: #374151 !important;
+}
+
+.custom-tab-btn {
+    color: #9ca3af !important;
+}
+
+.custom-tab-btn.active {
+    background-color: #374151 !important;
+    color: #fbbf24 !important;
+    /* Amber color for active tab */
+    border-bottom-color: #fbbf24 !important;
+}

package/vitest.config.js

@@ -0,0 +1,37 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { defineConfig } from 'vitest/config';
+
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+
+import { playwright } from '@vitest/browser-playwright';
+
+const dirname =
+  typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+
+// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+export default defineConfig({
+  test: {
+    projects: [
+      {
+        extends: true,
+        plugins: [
+          // The plugin will run tests for the stories defined in your Storybook config
+          // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+          storybookTest({ configDir: path.join(dirname, '.storybook') }),
+        ],
+        test: {
+          name: 'storybook',
+          browser: {
+            enabled: true,
+            headless: true,
+            provider: playwright({}),
+            instances: [{ browser: 'chromium' }],
+          },
+          setupFiles: ['.storybook/vitest.setup.js'],
+        },
+      },
+    ],
+  },
+});