add storybook, fix ui, v0.1.6

src/components/MDXEditorField.stories.tsx

@@ -0,0 +1,161 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { headingsPlugin, listsPlugin, markdownShortcutPlugin, quotePlugin } from '@mdxeditor/editor';
+import { MDXEditorField } from './MDXEditorField';
+
+const basePlugins = [
+  headingsPlugin(),
+  listsPlugin(),
+  quotePlugin(),
+  markdownShortcutPlugin()
+];
+
+const sampleMarkdown = `# Hello from MDXEditor
+
+This is a paragraph with **bold** and _italic_ text.
+
+- First bullet
+- Second bullet
+`;
+
+const meta = {
+  title: 'Components/MDXEditorField',
+  component: MDXEditorField,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'MDX editor wrapper with label, editable/read-only/disabled modes, theme class support, and error rendering.'
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      description: 'Field label shown above the editor.',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    markdown: {
+      description: 'Controlled markdown content value.',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    readOnly: {
+      description: 'Enables read-only mode.',
+      control: 'boolean',
+      table: { type: { summary: 'boolean' } }
+    },
+    disabled: {
+      description: 'Disables editing and applies disabled visuals.',
+      control: 'boolean',
+      table: { type: { summary: 'boolean' } }
+    },
+    themeClassName: {
+      description: 'Theme class applied to MDXEditor (for example `light-theme` or `dark-theme`).',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    plugins: {
+      description: 'MDXEditor plugins array.',
+      control: false,
+      table: { type: { summary: 'MDXEditorProps["plugins"]' } }
+    },
+    contentEditableClassName: {
+      description: 'CSS class used on the content editable area.',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    className: {
+      description: 'Extra CSS classes for the outer wrapper.',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    editorWrapperClassName: {
+      description: 'Extra CSS classes for the editor shell element.',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    editorWrapperStyle: {
+      description: 'Inline style object for the editor shell.',
+      control: 'object',
+      table: { type: { summary: 'CSSProperties' } }
+    },
+    editorClassName: {
+      description: 'Extra CSS classes for the MDXEditor instance.',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    error: {
+      description: 'Error message shown below the editor.',
+      control: 'text',
+      table: { type: { summary: 'string' } }
+    },
+    onChange: {
+      description: 'Callback fired when markdown changes in editable mode.',
+      action: 'changed',
+      table: { type: { summary: '(markdown: string) => void' } }
+    },
+    editorRef: {
+      description: 'Ref to MDXEditor methods.',
+      control: false,
+      table: { type: { summary: 'Ref<MDXEditorMethods | null>' } }
+    }
+  },
+  args: {
+    label: 'Content',
+    markdown: sampleMarkdown,
+    plugins: basePlugins,
+    themeClassName: ''
+  }
+} satisfies Meta<typeof MDXEditorField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Editable: Story = {
+  render: (args) => {
+    const [markdown, setMarkdown] = useState(args.markdown);
+    return (
+      <div className="w-full max-w-2xl">
+        <MDXEditorField
+          {...args}
+          markdown={markdown}
+          onChange={(next) => {
+            setMarkdown(next);
+            args.onChange?.(next);
+          }}
+          editorWrapperClassName="mt-2 overflow-hidden rounded-xl border"
+        />
+      </div>
+    );
+  }
+};
+
+export const ReadOnly: Story = {
+  args: {
+    readOnly: true
+  },
+  render: (args) => (
+    <div className="w-full max-w-2xl">
+      <MDXEditorField
+        {...args}
+        editorWrapperClassName="mt-2 overflow-hidden rounded-xl border"
+      />
+    </div>
+  )
+};
+
+export const DisabledWithError: Story = {
+  args: {
+    disabled: true,
+    error: 'Editor is currently disabled'
+  },
+  render: (args) => (
+    <div className="w-full max-w-2xl">
+      <MDXEditorField
+        {...args}
+        editorWrapperClassName="mt-2 overflow-hidden rounded-xl border"
+      />
+    </div>
+  )
+};