@jackuait/blok 0.4.1-beta.5 → 0.4.1-beta.6

package/src/stories/List.stories.ts

@@ -0,0 +1,259 @@
+import type { Meta, StoryObj } from '@storybook/html-vite';
+import { userEvent, waitFor, expect } from 'storybook/test';
+import type { OutputData, ToolSettings } from '@/types';
+import { createEditorContainer } from './helpers';
+import type { EditorFactoryOptions } from './helpers';
+import { Paragraph, List } from '../tools';
+import type { ListConfig } from '../../types/tools/list';
+
+// Constants
+const TIMEOUT_INIT = { timeout: 5000 };
+const TIMEOUT_ACTION = { timeout: 5000 };
+
+interface ListCustomStylesArgs extends EditorFactoryOptions {
+  minHeight: number;
+  data: OutputData | undefined;
+  readOnly: boolean;
+  itemColor: string;
+  itemSize: string;
+}
+
+/**
+ * Sample data with all three list types (ListItem model - each item is a separate block)
+ */
+const allListTypesData: OutputData = {
+  time: Date.now(),
+  version: '1.0.0',
+  blocks: [
+    // Unordered list items
+    { id: 'unordered-1', type: 'list', data: { text: 'Unordered item one', style: 'unordered' } },
+    { id: 'unordered-2', type: 'list', data: { text: 'Unordered item two', style: 'unordered' } },
+    { id: 'unordered-3', type: 'list', data: { text: 'Unordered item three', style: 'unordered' } },
+    // Ordered list items
+    { id: 'ordered-1', type: 'list', data: { text: 'Ordered item one', style: 'ordered' } },
+    { id: 'ordered-2', type: 'list', data: { text: 'Ordered item two', style: 'ordered' } },
+    { id: 'ordered-3', type: 'list', data: { text: 'Ordered item three', style: 'ordered' } },
+    // Checklist items
+    { id: 'checklist-1', type: 'list', data: { text: 'Checklist item one', style: 'checklist', checked: false } },
+    { id: 'checklist-2', type: 'list', data: { text: 'Checklist item two (completed)', style: 'checklist', checked: true } },
+    { id: 'checklist-3', type: 'list', data: { text: 'Checklist item three', style: 'checklist', checked: false } },
+  ],
+};
+
+/**
+ * Sample data with nested list items (using depth property)
+ */
+const allListTypesWithNestedData: OutputData = {
+  time: Date.now(),
+  version: '1.0.0',
+  blocks: [
+    // Unordered nested list
+    { id: 'u-1', type: 'list', data: { text: 'Fruits', style: 'unordered', depth: 0 } },
+    { id: 'u-2', type: 'list', data: { text: 'Citrus', style: 'unordered', depth: 1 } },
+    { id: 'u-3', type: 'list', data: { text: 'Orange', style: 'unordered', depth: 2 } },
+    { id: 'u-4', type: 'list', data: { text: 'Lemon', style: 'unordered', depth: 2 } },
+    { id: 'u-5', type: 'list', data: { text: 'Berries', style: 'unordered', depth: 1 } },
+    { id: 'u-6', type: 'list', data: { text: 'Strawberry', style: 'unordered', depth: 2 } },
+    { id: 'u-7', type: 'list', data: { text: 'Blueberry', style: 'unordered', depth: 2 } },
+    { id: 'u-8', type: 'list', data: { text: 'Vegetables', style: 'unordered', depth: 0 } },
+    { id: 'u-9', type: 'list', data: { text: 'Carrot', style: 'unordered', depth: 1 } },
+    // Ordered nested list
+    { id: 'o-1', type: 'list', data: { text: 'Getting Started', style: 'ordered', depth: 0 } },
+    { id: 'o-2', type: 'list', data: { text: 'Install dependencies', style: 'ordered', depth: 1 } },
+    { id: 'o-3', type: 'list', data: { text: 'Configure environment', style: 'ordered', depth: 1 } },
+    { id: 'o-4', type: 'list', data: { text: 'Set up database', style: 'ordered', depth: 1 } },
+    { id: 'o-5', type: 'list', data: { text: 'Create schema', style: 'ordered', depth: 2 } },
+    { id: 'o-6', type: 'list', data: { text: 'Run migrations', style: 'ordered', depth: 2 } },
+    { id: 'o-7', type: 'list', data: { text: 'Development', style: 'ordered', depth: 0 } },
+    { id: 'o-8', type: 'list', data: { text: 'Write code', style: 'ordered', depth: 1 } },
+    { id: 'o-9', type: 'list', data: { text: 'Write tests', style: 'ordered', depth: 1 } },
+    // Checklist nested list
+    { id: 'c-1', type: 'list', data: { text: 'Project Setup', style: 'checklist', checked: true, depth: 0 } },
+    { id: 'c-2', type: 'list', data: { text: 'Create repository', style: 'checklist', checked: true, depth: 1 } },
+    { id: 'c-3', type: 'list', data: { text: 'Initialize project', style: 'checklist', checked: true, depth: 1 } },
+    { id: 'c-4', type: 'list', data: { text: 'Configure tooling', style: 'checklist', checked: false, depth: 1 } },
+    { id: 'c-5', type: 'list', data: { text: 'ESLint', style: 'checklist', checked: true, depth: 2 } },
+    { id: 'c-6', type: 'list', data: { text: 'Prettier', style: 'checklist', checked: true, depth: 2 } },
+    { id: 'c-7', type: 'list', data: { text: 'TypeScript', style: 'checklist', checked: false, depth: 2 } },
+    { id: 'c-8', type: 'list', data: { text: 'Feature Development', style: 'checklist', checked: false, depth: 0 } },
+    { id: 'c-9', type: 'list', data: { text: 'Design UI mockups', style: 'checklist', checked: true, depth: 1 } },
+    { id: 'c-10', type: 'list', data: { text: 'Implement components', style: 'checklist', checked: false, depth: 1 } },
+  ],
+};
+
+const createEditor = (args: ListCustomStylesArgs): HTMLElement => {
+  const hasCustomStyles = args.itemColor || args.itemSize;
+
+  const listTool = hasCustomStyles
+    ? ({
+        class: List,
+        inlineToolbar: true,
+        config: {
+          itemColor: args.itemColor,
+          itemSize: args.itemSize,
+        } as ListConfig,
+      } as ToolSettings)
+    : ({
+        class: List,
+        inlineToolbar: true,
+      } as ToolSettings);
+
+  return createEditorContainer({
+    ...args,
+    tools: {
+      paragraph: Paragraph,
+      list: listTool,
+    },
+  });
+};
+
+const meta: Meta<ListCustomStylesArgs> = {
+  title: 'Tools/List',
+  tags: ['autodocs'],
+  args: {
+    minHeight: 400,
+    data: allListTypesData,
+    readOnly: false,
+    itemColor: '',
+    itemSize: '',
+  },
+  argTypes: {
+    itemColor: {
+      control: 'color',
+      description: 'Custom color for list items (any valid CSS color)',
+    },
+    itemSize: {
+      control: 'text',
+      description: 'Custom font size for list items (any valid CSS font-size)',
+    },
+  },
+  render: createEditor,
+};
+
+export default meta;
+
+
+type Story = StoryObj<ListCustomStylesArgs>;
+
+/**
+ * Large red list items.
+ */
+export const LargeRedItems: Story = {
+  args: {
+    data: allListTypesData,
+    itemColor: '#dc2626',
+    itemSize: '24px',
+  },
+};
+
+/**
+ * Interactive checklist - click checkboxes to toggle completion state.
+ */
+export const InteractiveChecklist: Story = {
+  args: {
+    data: {
+      time: Date.now(),
+      version: '1.0.0',
+      blocks: [
+        { id: 'ic-1', type: 'list', data: { text: 'Click me to mark as done', style: 'checklist', checked: false } },
+        { id: 'ic-2', type: 'list', data: { text: 'Already completed task', style: 'checklist', checked: true } },
+        { id: 'ic-3', type: 'list', data: { text: 'Another task to check off', style: 'checklist', checked: false } },
+      ],
+    },
+    readOnly: false,
+  },
+  play: async ({ canvasElement, step }) => {
+    await step('Wait for editor to initialize', async () => {
+      await waitFor(
+        () => {
+          const checkbox = canvasElement.querySelector('input[type="checkbox"]');
+
+          expect(checkbox).toBeInTheDocument();
+        },
+        TIMEOUT_INIT
+      );
+    });
+
+    await step('Toggle first checkbox', async () => {
+      const checkboxes = canvasElement.querySelectorAll('input[type="checkbox"]');
+      const firstCheckbox = checkboxes[0] as HTMLInputElement;
+
+      if (firstCheckbox) {
+        await userEvent.click(firstCheckbox);
+      }
+
+      await waitFor(
+        () => {
+          expect(firstCheckbox.checked).toBe(true);
+        },
+        TIMEOUT_ACTION
+      );
+    });
+  },
+};
+
+/**
+ * Read-only mode - lists are displayed but not editable.
+ */
+export const ReadOnlyLists: Story = {
+  args: {
+    data: allListTypesData,
+    readOnly: true,
+  },
+};
+
+/**
+ * All three list types (unordered, ordered, checklist) with nested items using depth.
+ * Demonstrates hierarchical data structures with multiple nesting levels.
+ */
+export const AllListTypesWithNestedItems: Story = {
+  args: {
+    data: allListTypesWithNestedData,
+    minHeight: 600,
+    readOnly: false,
+  },
+  play: async ({ canvasElement, step }) => {
+    await step('Wait for editor to initialize with list blocks', async () => {
+      await waitFor(
+        () => {
+          const listBlocks = canvasElement.querySelectorAll('[data-blok-component="list"]');
+
+          expect(listBlocks.length).toBeGreaterThan(0);
+        },
+        TIMEOUT_INIT
+      );
+    });
+
+    await step('Verify checklist items have checkboxes', async () => {
+      // Check for checkboxes in checklist items
+      const checkboxes = canvasElement.querySelectorAll('input[type="checkbox"]');
+
+      expect(checkboxes.length).toBeGreaterThan(0);
+
+      // Verify some checkboxes are checked (based on our test data)
+      const checkedBoxes = canvasElement.querySelectorAll('input[type="checkbox"]:checked');
+
+      expect(checkedBoxes.length).toBeGreaterThan(0);
+    });
+
+    await step('Toggle a checklist item', async () => {
+      const checkboxes = canvasElement.querySelectorAll('input[type="checkbox"]');
+
+      // Find an unchecked checkbox to toggle
+      const uncheckedCheckbox = Array.from(checkboxes).find(
+        (cb) => !(cb as HTMLInputElement).checked
+      ) as HTMLInputElement | undefined;
+
+      if (uncheckedCheckbox) {
+        await userEvent.click(uncheckedCheckbox);
+
+        await waitFor(
+          () => {
+            expect(uncheckedCheckbox.checked).toBe(true);
+          },
+          TIMEOUT_ACTION
+        );
+      }
+    });
+  },
+};

package/src/stories/Notifier.stories.ts

@@ -0,0 +1,340 @@
+/**
+ * Notifier.stories.ts - Stories for notification component states.
+ *
+ * This file covers notification types and styles:
+ * - Alert (default, success, error)
+ * - Confirm (with ok/cancel buttons)
+ * - Prompt (with input field)
+ */
+import type { Meta, StoryObj } from '@storybook/html-vite';
+import { waitFor, expect } from 'storybook/test';
+
+interface NotifierArgs {
+  message: string;
+  style?: 'success' | 'error';
+  type?: 'alert' | 'confirm' | 'prompt';
+}
+
+const TIMEOUT_ACTION = { timeout: 5000 };
+
+// Helper functions to find notification elements using data-blok-testid selectors
+const getNotifyWrapper = (): Element | null => document.querySelector('[data-blok-testid="notifier-container"]');
+const getNotify = (): Element | null => document.querySelector('[data-blok-testid="notification"]');
+const getNotifyByStyle = (style: string): Element | null => document.querySelector(`[data-blok-testid="notification-${style}"]`);
+const getNotifyButton = (type: 'confirm' | 'cancel'): Element | null => document.querySelector(`[data-blok-testid="notification-${type}-button"]`);
+const getNotifyInput = (): Element | null => document.querySelector('[data-blok-testid="notification-input"]');
+
+/**
+ * Clean up any existing notifications before each test
+ */
+const cleanupNotifications = (): void => {
+  const wrapper = document.querySelector('[data-blok-testid="notifier-container"]');
+
+  if (wrapper) {
+    wrapper.innerHTML = '';
+  }
+};
+
+/**
+ * Dynamically imports and shows notification
+ */
+const showNotification = async (options: {
+  message: string;
+  type?: string;
+  style?: string;
+  time?: number;
+  okText?: string;
+  cancelText?: string;
+  okHandler?: (event: Event | string) => void;
+  cancelHandler?: (event: Event) => void;
+  placeholder?: string;
+  default?: string;
+}): Promise<void> => {
+  const notifierModule = await import('../components/utils/notifier/index');
+
+  notifierModule.show(options);
+};
+
+const createNotifierDemo = (): HTMLElement => {
+  const container = document.createElement('div');
+
+  container.style.minHeight = '200px';
+  container.style.backgroundColor = '#f5f5f5';
+  container.style.padding = '20px';
+  container.style.position = 'relative';
+
+  const info = document.createElement('p');
+
+  info.textContent = 'Notifications appear in the bottom-left corner of the viewport.';
+  info.style.color = '#666';
+  info.style.fontSize = '14px';
+  container.appendChild(info);
+
+  return container;
+};
+
+const meta: Meta<NotifierArgs> = {
+  title: 'Components/Notifier',
+  tags: ['autodocs'],
+  args: {
+    message: 'This is a notification message',
+    style: undefined,
+    type: 'alert',
+  },
+  argTypes: {
+    message: {
+      control: 'text',
+      description: 'Notification message (can contain HTML)',
+    },
+    style: {
+      control: 'select',
+      options: [undefined, 'success', 'error'],
+      description: 'Notification style variant',
+    },
+    type: {
+      control: 'select',
+      options: ['alert', 'confirm', 'prompt'],
+      description: 'Notification type',
+    },
+  },
+  render: createNotifierDemo,
+};
+
+export default meta;
+
+
+type Story = StoryObj<NotifierArgs>;
+
+/**
+ * Default alert notification.
+ */
+export const AlertDefault: Story = {
+  args: {
+    message: 'This is a default notification',
+    type: 'alert',
+  },
+  play: async ({ step }) => {
+    await step('Show default alert notification', async () => {
+      await showNotification({
+        message: 'This is a default notification',
+        time: 30000, // Keep visible for story
+      });
+
+      await waitFor(
+        () => {
+          const wrapper = getNotifyWrapper();
+
+          expect(wrapper).toBeTruthy();
+
+          const notify = getNotify();
+
+          expect(notify).toBeTruthy();
+        },
+        TIMEOUT_ACTION
+      );
+    });
+  },
+};
+
+/**
+ * Success style alert notification (green accent).
+ */
+export const AlertSuccess: Story = {
+  args: {
+    message: 'Operation completed successfully!',
+    type: 'alert',
+    style: 'success',
+  },
+  play: async ({ step }) => {
+    await step('Show success alert notification', async () => {
+      await showNotification({
+        message: 'Operation completed successfully!',
+        style: 'success',
+        time: 30000,
+      });
+
+      await waitFor(
+        () => {
+          const notify = getNotifyByStyle('success');
+
+          expect(notify).toBeTruthy();
+        },
+        TIMEOUT_ACTION
+      );
+    });
+  },
+};
+
+/**
+ * Error style alert notification (red accent).
+ */
+export const AlertError: Story = {
+  args: {
+    message: 'Something went wrong!',
+    type: 'alert',
+    style: 'error',
+  },
+  play: async ({ step }) => {
+    await step('Show error alert notification', async () => {
+      await showNotification({
+        message: 'Something went wrong!',
+        style: 'error',
+        time: 30000,
+      });
+
+      await waitFor(
+        () => {
+          const notify = getNotifyByStyle('error');
+
+          expect(notify).toBeTruthy();
+        },
+        TIMEOUT_ACTION
+      );
+    });
+  },
+};
+
+/**
+ * Confirm notification with OK and Cancel buttons.
+ */
+export const ConfirmNotification: Story = {
+  args: {
+    message: 'Are you sure you want to proceed?',
+    type: 'confirm',
+  },
+  play: async ({ step }) => {
+    await step('Show confirm notification', async () => {
+      await showNotification({
+        message: 'Are you sure you want to proceed?',
+        type: 'confirm',
+        okText: 'Yes, proceed',
+        cancelText: 'Cancel',
+        okHandler: () => {
+          // Handler for story demo
+        },
+        cancelHandler: () => {
+          // Handler for story demo
+        },
+      });
+
+      await waitFor(
+        () => {
+          const notify = getNotify();
+
+          expect(notify).toBeTruthy();
+
+          // Check for confirm/cancel buttons
+          const confirmBtn = getNotifyButton('confirm');
+          const cancelBtn = getNotifyButton('cancel');
+
+          expect(confirmBtn).toBeTruthy();
+          expect(cancelBtn).toBeTruthy();
+        },
+        TIMEOUT_ACTION
+      );
+    });
+  },
+};
+
+/**
+ * Prompt notification with input field.
+ */
+export const PromptNotification: Story = {
+  args: {
+    message: 'Enter your name:',
+    type: 'prompt',
+  },
+  play: async ({ step }) => {
+    await step('Show prompt notification', async () => {
+      await showNotification({
+        message: 'Enter your name:',
+        type: 'prompt',
+        placeholder: 'Your name',
+        default: '',
+        okHandler: () => {
+          // Handler for story demo
+        },
+      });
+
+      await waitFor(
+        () => {
+          const notify = getNotify();
+
+          expect(notify).toBeTruthy();
+
+          // Check for input field
+          const input = getNotifyInput();
+
+          expect(input).toBeTruthy();
+        },
+        TIMEOUT_ACTION
+      );
+    });
+  },
+};
+
+/**
+ * Notification with HTML content.
+ */
+export const WithHTMLContent: Story = {
+  args: {
+    message: 'Block <strong>deleted</strong> successfully',
+    type: 'alert',
+    style: 'success',
+  },
+  play: async ({ step }) => {
+    await step('Clean up and show notification with HTML', async () => {
+      cleanupNotifications();
+
+      await showNotification({
+        message: 'Block <strong>deleted</strong> successfully',
+        style: 'success',
+        time: 30000,
+      });
+
+      await waitFor(
+        () => {
+          const notify = getNotifyByStyle('success');
+
+          expect(notify).toBeTruthy();
+
+          // Check that notification contains the word 'deleted' (HTML may be sanitized)
+          expect(notify?.textContent).toContain('deleted');
+        },
+        TIMEOUT_ACTION
+      );
+    });
+  },
+};
+
+/**
+ * Bounce-in animation on notification appear.
+ */
+export const BounceInAnimation: Story = {
+  args: {
+    message: 'Watch the bounce animation!',
+    type: 'alert',
+  },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+  play: async ({ step }) => {
+    await step('Show notification with bounce animation', async () => {
+      await showNotification({
+        message: 'Watch the bounce animation!',
+        time: 30000,
+      });
+
+      await waitFor(
+        () => {
+          const notify = getNotify();
+
+          expect(notify).toBeTruthy();
+          // Check animation state via data attribute
+          expect(notify?.getAttribute('data-blok-bounce-in')).toBe('true');
+        },
+        TIMEOUT_ACTION
+      );
+    });
+  },
+};

package/src/stories/Paragraph.stories.ts

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from '@storybook/html-vite';
+import type { OutputData } from '@/types';
+import { createEditorContainer } from './helpers';
+import type { EditorFactoryOptions } from './helpers';
+import { Paragraph,  type ParagraphConfig  } from '../tools/paragraph';
+
+interface ParagraphArgs extends EditorFactoryOptions {
+  minHeight: number;
+  data: OutputData | undefined;
+}
+
+/**
+ * Creates sample data with a paragraph block
+ */
+const createParagraphData = (id: string, text: string): OutputData => ({
+  time: Date.now(),
+  version: '1.0.0',
+  blocks: [
+    {
+      id,
+      type: 'paragraph',
+      data: { text },
+    },
+  ],
+});
+
+/**
+ * Creates sample data with multiple paragraph blocks
+ */
+const createMultipleParagraphsData = (): OutputData => ({
+  time: Date.now(),
+  version: '1.0.0',
+  blocks: [
+    {
+      id: 'para-1',
+      type: 'paragraph',
+      data: { text: 'This is the first paragraph with custom styling.' },
+    },
+    {
+      id: 'para-2',
+      type: 'paragraph',
+      data: { text: 'This is the second paragraph. It demonstrates how multiple paragraphs look together.' },
+    },
+    {
+      id: 'para-3',
+      type: 'paragraph',
+      data: { text: 'And here is a third paragraph to show the spacing between blocks.' },
+    },
+  ],
+});
+
+const createEditor = (args: ParagraphArgs): HTMLElement => createEditorContainer({
+  ...args,
+  tools: {
+    paragraph: Paragraph,
+  },
+});
+
+const meta: Meta<ParagraphArgs> = {
+  title: 'Components/Paragraph',
+  tags: ['autodocs'],
+  args: {
+    minHeight: 300,
+    data: createParagraphData('paragraph-default', 'This is a sample paragraph with default styling.'),
+  },
+  render: createEditor,
+};
+
+export default meta;
+
+
+type Story = StoryObj<ParagraphArgs>;
+
+/**
+ * Default paragraph state with no custom styling.
+ */
+export const Default: Story = {
+  args: {
+    data: createParagraphData('paragraph-default', 'This is a sample paragraph with default styling.'),
+  },
+};
+
+/**
+ * Custom paragraph configuration with all style options.
+ */
+const fullCustomConfig: ParagraphConfig = {
+  placeholder: 'Start writing here...',
+  styles: {
+    size: '18px',
+    lineHeight: '2',
+    marginTop: '16px',
+    marginBottom: '16px',
+  },
+};
+
+const createFullCustomEditor = (args: ParagraphArgs): HTMLElement => createEditorContainer({
+  ...args,
+  tools: {
+    paragraph: {
+      class: Paragraph,
+      config: fullCustomConfig,
+    },
+  },
+});
+
+export const CustomStyles: Story = {
+  args: {
+    minHeight: 400,
+    data: createMultipleParagraphsData(),
+  },
+  render: createFullCustomEditor,
+};