@12-apps/ui 1.0.0

package/src/components/form/RichTextEditor/RichTextEditor.stories.tsx

@@ -0,0 +1,261 @@
+import { Box } from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+
+import { RichTextEditor } from './RichTextEditor';
+
+const meta: Meta<typeof RichTextEditor> = {
+  title: 'Enhanced/RichTextEditor',
+  component: RichTextEditor,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A comprehensive rich text editor component with formatting capabilities, built on MUI and integrated with modern rich text editing libraries. Provides a complete set of text editing features including bold, italic, underline, lists, links, and more.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: 'text',
+      description: 'The current value of the rich text editor content',
+    },
+    onChange: {
+      action: 'changed',
+      description: 'Callback when the content changes',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text when empty',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the editor is disabled',
+    },
+    readOnly: {
+      control: 'boolean',
+      description: 'Whether the editor is read-only',
+    },
+    height: {
+      control: { type: 'number', min: 100, max: 800 },
+      description: 'Height of the editor',
+    },
+    maxLength: {
+      control: { type: 'number', min: 10, max: 1000 },
+      description: 'Maximum number of characters allowed',
+    },
+    'aria-label': {
+      control: 'text',
+      description: 'ARIA label for accessibility',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Wrapper components for stories that need state
+const DefaultWrapper = () => {
+  const [value, setValue] = useState('');
+  return (
+    <Box sx={{ width: 600 }}>
+      <RichTextEditor value={value} onChange={setValue} placeholder="Start typing..." />
+    </Box>
+  );
+};
+
+const WithContentWrapper = () => {
+  const [value, setValue] = useState('<p><strong>Bold text</strong> and <em>italic text</em></p><ul><li>List item 1</li><li>List item 2</li></ul>');
+  return (
+    <Box sx={{ width: 600 }}>
+      <RichTextEditor value={value} onChange={setValue} />
+    </Box>
+  );
+};
+
+const DisabledWrapper = () => {
+  const [value, setValue] = useState('<p>This is disabled content that cannot be edited.</p>');
+  return (
+    <Box sx={{ width: 600 }}>
+      <RichTextEditor 
+        value={value} 
+        onChange={setValue} 
+        disabled 
+        placeholder="This editor is disabled"
+      />
+    </Box>
+  );
+};
+
+const ReadOnlyWrapper = () => {
+  const [value, setValue] = useState('<p>This is <strong>read-only</strong> content.</p><p>You can select and copy text, but cannot edit it.</p>');
+  return (
+    <Box sx={{ width: 600 }}>
+      <RichTextEditor 
+        value={value} 
+        onChange={setValue} 
+        readOnly 
+        toolbar={{}} 
+      />
+    </Box>
+  );
+};
+
+const CustomToolbarWrapper = () => {
+  const [value, setValue] = useState('');
+  return (
+    <Box sx={{ width: 600 }}>
+      <RichTextEditor
+        value={value}
+        onChange={setValue}
+        placeholder="Editor with custom toolbar..."
+        toolbar={{
+          bold: true,
+          italic: true,
+          underline: false,
+          strikethrough: true,
+          orderedList: false,
+          unorderedList: true,
+          link: true,
+          image: false,
+          codeBlock: true,
+          quote: true,
+        }}
+      />
+    </Box>
+  );
+};
+
+const HeightVariationsWrapper = () => {
+  const [value1, setValue1] = useState('');
+  const [value2, setValue2] = useState('');
+  const [value3, setValue3] = useState('');
+  
+  return (
+    <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+      <Box sx={{ width: 300 }}>
+        <RichTextEditor
+          value={value1}
+          onChange={setValue1}
+          height={150}
+          placeholder="Compact (150px)"
+        />
+      </Box>
+      <Box sx={{ width: 300 }}>
+        <RichTextEditor
+          value={value2}
+          onChange={setValue2}
+          height={300}
+          placeholder="Standard (300px)"
+        />
+      </Box>
+      <Box sx={{ width: 300 }}>
+        <RichTextEditor
+          value={value3}
+          onChange={setValue3}
+          height={500}
+          placeholder="Expanded (500px)"
+        />
+      </Box>
+    </Box>
+  );
+};
+
+const MaxLengthWrapper = () => {
+  const [value, setValue] = useState('');
+  return (
+    <Box sx={{ width: 600 }}>
+      <RichTextEditor 
+        value={value} 
+        onChange={setValue}
+        maxLength={100}
+        placeholder="Type here (max 100 characters)..."
+      />
+    </Box>
+  );
+};
+
+const GlassEffectWrapper = () => {
+  const [value, setValue] = useState('');
+  return (
+    <Box
+      sx={{
+        width: 600,
+        height: 400,
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        p: 2,
+      }}
+    >
+      <RichTextEditor
+        value={value}
+        onChange={setValue}
+        placeholder="Glass morphism editor..."
+        sx={{
+          backdropFilter: 'blur(10px)',
+          backgroundColor: 'rgba(255, 255, 255, 0.1)',
+          border: '1px solid rgba(255, 255, 255, 0.2)',
+        }}
+      />
+    </Box>
+  );
+};
+
+const DarkThemeWrapper = () => {
+  const [value, setValue] = useState('<p>Dark theme example with <strong>formatted</strong> text.</p>');
+  return (
+    <Box sx={{ width: 600 }}>
+      <RichTextEditor value={value} onChange={setValue} />
+    </Box>
+  );
+};
+
+// Basic Stories
+export const Default: Story = {
+  render: () => <DefaultWrapper />,
+};
+
+export const WithContent: Story = {
+  render: () => <WithContentWrapper />,
+};
+
+export const Disabled: Story = {
+  render: () => <DisabledWrapper />,
+};
+
+export const ReadOnly: Story = {
+  render: () => <ReadOnlyWrapper />,
+};
+
+export const CustomToolbar: Story = {
+  render: () => <CustomToolbarWrapper />,
+};
+
+export const HeightVariations: Story = {
+  render: () => <HeightVariationsWrapper />,
+};
+
+export const MaxLength: Story = {
+  render: () => <MaxLengthWrapper />,
+};
+
+export const GlassEffect: Story = {
+  render: () => <GlassEffectWrapper />,
+};
+
+export const DarkTheme: Story = {
+  parameters: {
+    backgrounds: { default: 'dark' },
+  },
+  render: () => <DarkThemeWrapper />,
+};
+
+// Required story exports for validation
+export const AllVariants = Default;
+export const AllSizes = HeightVariations;
+export const AllStates = Disabled;
+export const InteractiveStates = Default;
+export const Responsive = Default;