@jackuait/blok 0.4.1-beta.1 → 0.4.1-beta.12

package/src/stories/Toolbox.stories.ts

@@ -0,0 +1,166 @@
+/**
+ * Toolbox.stories.ts - Stories demonstrating toolbox customization.
+ *
+ * This file demonstrates how to set custom icons for all available tools
+ * in the toolbox using the tool settings configuration.
+ */
+import type { Meta, StoryObj } from '@storybook/html-vite';
+import { waitFor, expect } from 'storybook/test';
+import type { OutputData, ToolSettings, BlockToolConstructable } from '@/types';
+import { createEditorContainer, simulateClick, waitForToolbar, TOOLBAR_TESTID } from './helpers';
+import type { EditorFactoryOptions } from './helpers';
+import { Header } from '../tools/header';
+import { Paragraph } from '../tools/paragraph';
+
+interface ToolboxArgs extends EditorFactoryOptions {
+  minHeight: number;
+  data: OutputData | undefined;
+}
+
+// Constants
+const BLOCK_TESTID = '[data-blok-testid="block-wrapper"]';
+const PLUS_BUTTON_TESTID = '[data-blok-testid="plus-button"]';
+const TOOLBOX_OPENED_SELECTOR = '[data-blok-toolbox-opened="true"]';
+const POPOVER_ITEM_TESTID = '[data-blok-testid="popover-item"]';
+
+const TIMEOUT_INIT = { timeout: 5000 };
+const TIMEOUT_ACTION = { timeout: 5000 };
+
+// Custom SVG icons for demonstration
+const CustomIcons = {
+  // Star icon for Paragraph
+  star: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+    <path d="M10 2L12.09 7.26L18 7.97L13.82 11.64L15.18 17.5L10 14.27L4.82 17.5L6.18 11.64L2 7.97L7.91 7.26L10 2Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>`,
+
+  // Crown icon for Heading
+  crown: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+    <path d="M3 15L4 7L7 10L10 5L13 10L16 7L17 15H3Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M3 15H17V17H3V15Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>`,
+};
+
+const sampleData: OutputData = {
+  time: Date.now(),
+  version: '1.0.0',
+  blocks: [
+    {
+      id: 'toolbox-block-1',
+      type: 'paragraph',
+      data: { text: 'Click the plus button to see the toolbox with custom icons.' },
+    },
+  ],
+};
+
+const createEditor = (args: ToolboxArgs): HTMLElement => createEditorContainer(args);
+
+const meta: Meta<ToolboxArgs> = {
+  title: 'Components/Toolbox',
+  tags: ['autodocs'],
+  args: {
+    minHeight: 300,
+    data: sampleData,
+  },
+  render: createEditor,
+};
+
+export default meta;
+
+
+type Story = StoryObj<ToolboxArgs>;
+
+/**
+ * Toolbox with custom icons for all tools.
+ *
+ * This story demonstrates how to override the default toolbox icons
+ * for both Paragraph and Header tools using the `toolbox` configuration
+ * in tool settings.
+ *
+ * To customize icons, use the `toolbox` property in tool settings:
+ * ```typescript
+ * tools: {
+ *   paragraph: {
+ *     class: Paragraph,
+ *     toolbox: {
+ *       icon: '<svg>...</svg>',
+ *       title: 'Custom Title'
+ *     }
+ *   }
+ * }
+ * ```
+ */
+export const CustomIconsForAllTools: Story = {
+  args: {
+    data: sampleData,
+    tools: {
+      paragraph: {
+        class: Paragraph as unknown as BlockToolConstructable,
+        toolbox: {
+          icon: CustomIcons.star,
+          title: 'Paragraph',
+        },
+      } as ToolSettings,
+      header: {
+        class: Header as unknown as BlockToolConstructable,
+        toolbox: {
+          icon: CustomIcons.crown,
+          title: 'Header',
+        },
+      } as ToolSettings,
+    },
+  },
+  play: async ({ canvasElement, step }) => {
+    await step('Wait for editor and toolbar to initialize', async () => {
+      await waitFor(
+        () => {
+          const block = canvasElement.querySelector(BLOCK_TESTID);
+
+          expect(block).toBeInTheDocument();
+        },
+        TIMEOUT_INIT
+      );
+      await waitForToolbar(canvasElement);
+    });
+
+    await step('Click block to show toolbar', async () => {
+      const block = canvasElement.querySelector(BLOCK_TESTID);
+
+      if (block) {
+        simulateClick(block);
+      }
+
+      await waitFor(
+        () => {
+          const toolbar = canvasElement.querySelector(TOOLBAR_TESTID);
+
+          expect(toolbar).toHaveAttribute('data-blok-opened', 'true');
+        },
+        TIMEOUT_ACTION
+      );
+    });
+
+    await step('Open toolbox to see custom icons', async () => {
+      const plusButton = canvasElement.querySelector(PLUS_BUTTON_TESTID);
+
+      if (plusButton) {
+        simulateClick(plusButton);
+      }
+
+      await waitFor(
+        () => {
+          const editor = canvasElement.querySelector(TOOLBOX_OPENED_SELECTOR);
+
+          expect(editor).toBeInTheDocument();
+
+          // Verify popover items are rendered
+          const items = document.querySelectorAll(POPOVER_ITEM_TESTID);
+
+          expect(items.length).toBeGreaterThan(0);
+        },
+        TIMEOUT_ACTION
+      );
+    });
+  },
+};
+
+

package/src/stories/Tooltip.stories.ts

@@ -0,0 +1,198 @@
+/**
+ * Tooltip.stories.ts - Stories for tooltip component states.
+ *
+ * This file covers tooltip positioning and visibility states:
+ * - Default (hidden)
+ * - Shown at bottom, top, left, right positions
+ */
+import type { Meta, StoryObj } from '@storybook/html-vite';
+import { waitFor, expect } from 'storybook/test';
+import { hide, show } from '../components/utils/tooltip';
+
+interface TooltipArgs {
+  placement: 'top' | 'bottom' | 'left' | 'right';
+  content: string;
+  delay: number;
+}
+
+const TIMEOUT_ACTION = { timeout: 5000 };
+const TOOLTIP_TESTID = '[data-blok-testid="tooltip"]';
+
+const createTooltipDemo = (_args: TooltipArgs): HTMLElement => {
+  const container = document.createElement('div');
+
+  container.style.display = 'flex';
+  container.style.alignItems = 'center';
+  container.style.justifyContent = 'center';
+  container.style.minHeight = '300px';
+  container.style.padding = '80px';
+  container.style.backgroundColor = '#fff';
+
+  const button = document.createElement('button');
+
+  button.textContent = 'Hover me for tooltip';
+  button.style.padding = '12px 24px';
+  button.style.fontSize = '14px';
+  button.style.borderRadius = '6px';
+  button.style.border = '1px solid #ddd';
+  button.style.cursor = 'pointer';
+  button.style.backgroundColor = '#f8f8f8';
+  button.setAttribute('data-blok-testid', 'tooltip-trigger');
+
+  container.appendChild(button);
+
+  return container;
+};
+
+const createAllStatesDemo = (): HTMLElement => {
+  const placements: TooltipArgs['placement'][] = ['bottom', 'top', 'left', 'right'];
+  const container = document.createElement('div');
+
+  container.style.display = 'grid';
+  container.style.gridTemplateColumns = 'repeat(auto-fit, minmax(180px, 1fr))';
+  container.style.gap = '32px';
+  container.style.alignItems = 'center';
+  container.style.justifyItems = 'center';
+  container.style.minHeight = '400px';
+  container.style.padding = '80px';
+  container.style.backgroundColor = '#fff';
+
+  const makeTrigger = (label: string, testId: string): HTMLButtonElement => {
+    const button = document.createElement('button');
+
+    button.textContent = label;
+    button.style.padding = '12px 24px';
+    button.style.fontSize = '14px';
+    button.style.borderRadius = '6px';
+    button.style.border = '1px solid #ddd';
+    button.style.cursor = 'pointer';
+    button.style.backgroundColor = '#f8f8f8';
+    button.setAttribute('data-blok-testid', testId);
+
+    return button;
+  };
+
+  const defaultTrigger = makeTrigger('Default (hidden)', 'tooltip-trigger-default');
+  const placementTriggers = placements.map((placement) =>
+    makeTrigger(`Shown ${placement}`, `tooltip-trigger-${placement}`)
+  );
+
+  container.appendChild(defaultTrigger);
+  placementTriggers.forEach((trigger) => container.appendChild(trigger));
+
+  return container;
+};
+
+const meta: Meta<TooltipArgs> = {
+  title: 'Components/Tooltip',
+  tags: ['autodocs'],
+  args: {
+    placement: 'bottom',
+    content: 'This is a tooltip',
+    delay: 0,
+  },
+  argTypes: {
+    placement: {
+      control: 'select',
+      options: ['top', 'bottom', 'left', 'right'],
+      description: 'Tooltip placement relative to trigger element',
+    },
+    content: {
+      control: 'text',
+      description: 'Tooltip content text',
+    },
+    delay: {
+      control: { type: 'number', min: 0, max: 1000, step: 50 },
+      description: 'Delay before showing tooltip (ms)',
+    },
+  },
+  render: createTooltipDemo,
+};
+
+export default meta;
+
+
+type Story = StoryObj<TooltipArgs>;
+
+export const TooltipStates: Story = {
+  args: {
+    placement: 'bottom',
+    content: 'This is a tooltip',
+    delay: 0,
+  },
+  render: createAllStatesDemo,
+  play: async ({ canvasElement, step }) => {
+    const placements: TooltipArgs['placement'][] = ['bottom', 'top', 'left', 'right'];
+    const triggerDefault = canvasElement.querySelector('[data-blok-testid="tooltip-trigger-default"]') as HTMLElement;
+
+    expect(triggerDefault).toBeInTheDocument();
+
+    const showAndClone = async (placement: TooltipArgs['placement']) => {
+      const trigger = canvasElement.querySelector(`[data-blok-testid="tooltip-trigger-${placement}"]`) as HTMLElement;
+
+      expect(trigger).toBeInTheDocument();
+
+      show(trigger, `Tooltip at ${placement}`, { placement, delay: 0 });
+
+      await waitFor(
+        () => {
+          const tooltip = document.querySelector(TOOLTIP_TESTID) as HTMLElement;
+
+          expect(tooltip).toBeInTheDocument();
+          expect(tooltip).toHaveAttribute('data-blok-shown', 'true');
+          expect(tooltip).toHaveAttribute('data-blok-placement', placement);
+        },
+        TIMEOUT_ACTION
+      );
+
+      const tooltip = document.querySelector(TOOLTIP_TESTID) as HTMLElement;
+      const clone = tooltip.cloneNode(true) as HTMLElement;
+
+      clone.setAttribute('data-blok-testid', `tooltip-${placement}`);
+      document.body.appendChild(clone);
+    };
+
+    await step('Show all placements', async () => {
+      for (const placement of placements) {
+        await showAndClone(placement);
+      }
+
+      hide();
+    });
+  },
+};
+
+/**
+ * Tooltip with HTML content.
+ */
+export const WithHTMLContent: Story = {
+  args: {
+    placement: 'bottom',
+    content: '<strong>Bold</strong> tooltip',
+    delay: 0,
+  },
+  play: async ({ canvasElement, step }) => {
+    await step('Show tooltip with HTML content', async () => {
+      const trigger = canvasElement.querySelector('[data-blok-testid="tooltip-trigger"]') as HTMLElement;
+
+      expect(trigger).toBeInTheDocument();
+
+      if (trigger) {
+        const content = document.createElement('span');
+
+        content.innerHTML = '<strong>Bold</strong> and <em>italic</em>';
+        show(trigger, content, { placement: 'bottom', delay: 0 });
+      }
+
+      await waitFor(
+        () => {
+          const tooltip = document.querySelector(TOOLTIP_TESTID);
+
+          expect(tooltip).toBeInTheDocument();
+          expect(tooltip).toHaveAttribute('data-blok-shown', 'true');
+        },
+        TIMEOUT_ACTION
+      );
+    });
+  },
+};