@tuturuuu/ui 0.0.4 → 0.2.0

package/src/components/ui/custom/__tests__/facebook-mockup.test.tsx

@@ -0,0 +1,291 @@
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import FacebookMockup from '../facebook-mockup/facebook-mockup';
+
+const { html2canvasMock, translations } = vi.hoisted(() => ({
+  html2canvasMock: vi.fn(async () => ({
+    toDataURL: vi.fn(() => 'data:image/png;base64,mock'),
+  })),
+  translations: {
+    'common.download': 'Download',
+    'common.reset': 'Reset',
+    'facebook_mockup.actions.drag_to_reorder': 'Drag {reaction} to reorder',
+    'facebook_mockup.actions.remove': 'Remove',
+    'facebook_mockup.actions.replace': 'Replace image',
+    'facebook_mockup.actions.upload': 'Upload',
+    'facebook_mockup.actions.move_down': 'Move {reaction} down',
+    'facebook_mockup.actions.move_up': 'Move {reaction} up',
+    'facebook_mockup.defaults.audience_label': 'Public',
+    'facebook_mockup.defaults.caption':
+      'Tuturuuu turns a single creative into a polished Facebook desktop mockup in seconds.',
+    'facebook_mockup.defaults.comments_count': '18',
+    'facebook_mockup.defaults.cta_label': 'Learn More',
+    'facebook_mockup.defaults.description':
+      'Desktop-first previews for launches, page posts, education, and product campaigns.',
+    'facebook_mockup.defaults.headline': 'A Tuturuuu Facebook mockup preview',
+    'facebook_mockup.defaults.page_handle': '@tuturuuu',
+    'facebook_mockup.defaults.page_name': 'Tuturuuu',
+    'facebook_mockup.defaults.reactions_count': '124',
+    'facebook_mockup.defaults.shares_count': '7',
+    'facebook_mockup.defaults.sponsored_label': 'Sponsored',
+    'facebook_mockup.description':
+      'Switch between a desktop ad preview and a desktop page post preview.',
+    'facebook_mockup.errors.file_too_large':
+      'Images must be {size} or smaller.',
+    'facebook_mockup.errors.invalid_type': 'Use PNG, JPG, or WEBP images.',
+    'facebook_mockup.errors.download_failed': 'Download failed.',
+    'facebook_mockup.fields.audience_label': 'Audience label',
+    'facebook_mockup.fields.avatar_image': 'Avatar image',
+    'facebook_mockup.fields.caption': 'Caption',
+    'facebook_mockup.fields.comments': 'comments',
+    'facebook_mockup.fields.creative_image': 'Creative image',
+    'facebook_mockup.fields.cta_label': 'CTA label',
+    'facebook_mockup.fields.description': 'Description',
+    'facebook_mockup.fields.headline': 'Headline',
+    'facebook_mockup.fields.page_handle': 'Page handle',
+    'facebook_mockup.fields.page_name': 'Page name',
+    'facebook_mockup.fields.preview_theme': 'Preview theme',
+    'facebook_mockup.fields.preview_type': 'Preview type',
+    'facebook_mockup.fields.preview_viewport': 'Viewport',
+    'facebook_mockup.fields.reactions': 'reactions',
+    'facebook_mockup.fields.shares': 'shares',
+    'facebook_mockup.fields.sponsored_label': 'Sponsored label',
+    'facebook_mockup.fullscreen.close': 'Close fullscreen',
+    'facebook_mockup.fullscreen.description':
+      'Preview and export the mockup with desktop, tablet, or phone framing.',
+    'facebook_mockup.fullscreen.open': 'Fullscreen preview',
+    'facebook_mockup.fullscreen.title': 'Fullscreen Preview',
+    'facebook_mockup.helper_text.drag_reactions':
+      'Drag reactions to change the order they appear in the summary bar.',
+    'facebook_mockup.helper_text.upload_image':
+      'PNG, JPG, or WEBP up to {size}.',
+    'facebook_mockup.modes.ad': 'Facebook ad',
+    'facebook_mockup.modes.page': 'Desktop page post',
+    'facebook_mockup.meta.description':
+      'Create a desktop Facebook ad or page-post mockup in your browser.',
+    'facebook_mockup.meta.title': 'Facebook Mockup Tool',
+    'facebook_mockup.placeholders.audience_label': 'Public',
+    'facebook_mockup.placeholders.caption':
+      'Write your ad copy or post caption',
+    'facebook_mockup.placeholders.cta_label': 'Learn More',
+    'facebook_mockup.placeholders.description':
+      'Describe the supporting copy that appears under the image.',
+    'facebook_mockup.placeholders.headline':
+      'Add the short headline under the image',
+    'facebook_mockup.placeholders.metric_value': '0',
+    'facebook_mockup.placeholders.page_handle': '@yourpage',
+    'facebook_mockup.placeholders.page_name': 'Page name',
+    'facebook_mockup.placeholders.sponsored_label': 'Sponsored',
+    'facebook_mockup.preview.actions_comment': 'Comment',
+    'facebook_mockup.preview.actions_like': 'Like',
+    'facebook_mockup.preview.actions_share': 'Share',
+    'facebook_mockup.preview.avatar_alt': 'Preview page avatar',
+    'facebook_mockup.preview.close': 'Close',
+    'facebook_mockup.preview.browser_title': 'facebook mockup preview',
+    'facebook_mockup.preview.creative_alt': 'Preview creative image',
+    'facebook_mockup.preview.desktop_label': 'Desktop preview',
+    'facebook_mockup.preview.feed_label': 'News Feed',
+    'facebook_mockup.preview.more_actions': 'More actions',
+    'facebook_mockup.preview.placeholder_avatar': 'Avatar',
+    'facebook_mockup.preview.placeholder_image': 'Creative image',
+    'facebook_mockup.preview.search_placeholder': 'Search Facebook',
+    'facebook_mockup.preview.see_more': 'See more',
+    'facebook_mockup.preview.show_less': 'See less',
+    'facebook_mockup.preview_themes.dark': 'Dark mode',
+    'facebook_mockup.preview_themes.light': 'Light mode',
+    'facebook_mockup.reactions.angry': 'Angry',
+    'facebook_mockup.reactions.care': 'Care',
+    'facebook_mockup.reactions.haha': 'Haha',
+    'facebook_mockup.reactions.like': 'Like',
+    'facebook_mockup.reactions.love': 'Love',
+    'facebook_mockup.reactions.sad': 'Sad',
+    'facebook_mockup.reactions.wow': 'Wow',
+    'facebook_mockup.sections.content': 'Content',
+    'facebook_mockup.sections.identity': 'Page identity',
+    'facebook_mockup.sections.media': 'Media',
+    'facebook_mockup.sections.performance': 'Performance',
+    'facebook_mockup.sections.reactions': 'Visible reactions',
+    'facebook_mockup.title': 'Facebook Mockup Tool',
+    'facebook_mockup.viewport_modes.desktop': 'Desktop',
+    'facebook_mockup.viewport_modes.phone': 'Phone',
+    'facebook_mockup.viewport_modes.tablet': 'Tablet',
+  } as Record<string, string>,
+}));
+
+vi.mock('next-intl', () => ({
+  useLocale: () => 'en',
+  useTranslations: () => (key: string, values?: Record<string, string>) => {
+    let value = translations[key] ?? key;
+    if (values) {
+      for (const [name, replacement] of Object.entries(values)) {
+        value = value.replace(`{${name}}`, replacement);
+      }
+    }
+    return value;
+  },
+}));
+
+vi.mock('html2canvas-pro', () => ({
+  default: html2canvasMock,
+}));
+
+describe('FacebookMockup', () => {
+  beforeEach(() => {
+    vi.stubGlobal('URL', {
+      createObjectURL: vi.fn((file: File) => `blob:${file.name}`),
+      revokeObjectURL: vi.fn(),
+    });
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it('renders in ad mode by default and switches to page mode', async () => {
+    render(<FacebookMockup />);
+
+    expect(screen.getByRole('button', { name: 'Facebook ad' })).toHaveAttribute(
+      'aria-pressed',
+      'true'
+    );
+    expect(
+      screen.getByDisplayValue('A Tuturuuu Facebook mockup preview')
+    ).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Desktop page post' }));
+
+    await waitFor(() =>
+      expect(screen.queryByLabelText('Headline')).not.toBeInTheDocument()
+    );
+    expect(
+      within(screen.getByTestId('facebook-mockup-preview')).getByText('Like')
+    ).toBeInTheDocument();
+  });
+
+  it('updates the live preview when text fields change', () => {
+    render(<FacebookMockup />);
+    const preview = within(screen.getByTestId('facebook-mockup-post-card'));
+
+    fireEvent.change(screen.getByLabelText('Page name'), {
+      target: { value: 'Computer City' },
+    });
+    fireEvent.change(screen.getByLabelText('Caption'), {
+      target: { value: 'Desktop preview tuned for computer store campaigns.' },
+    });
+
+    expect(preview.getByText('Computer City')).toBeInTheDocument();
+    expect(
+      preview.getByText('Desktop preview tuned for computer store campaigns.')
+    ).toBeInTheDocument();
+  });
+
+  it('shows uploaded avatar and creative images in the preview', async () => {
+    render(<FacebookMockup />);
+    const preview = within(screen.getByTestId('facebook-mockup-post-card'));
+
+    fireEvent.change(screen.getByLabelText('Avatar image'), {
+      target: {
+        files: [new File(['avatar'], 'avatar.png', { type: 'image/png' })],
+      },
+    });
+    fireEvent.change(screen.getByLabelText('Creative image'), {
+      target: {
+        files: [new File(['creative'], 'creative.png', { type: 'image/png' })],
+      },
+    });
+
+    await waitFor(() => {
+      expect(preview.getByAltText('Preview page avatar')).toHaveAttribute(
+        'src',
+        'blob:avatar.png'
+      );
+      expect(preview.getByAltText('Preview creative image')).toHaveAttribute(
+        'src',
+        'blob:creative.png'
+      );
+    });
+  });
+
+  it('resets the editor back to its translated defaults', async () => {
+    render(<FacebookMockup />);
+
+    fireEvent.change(screen.getByLabelText('Page name'), {
+      target: { value: 'Changed Name' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'Reset' }));
+
+    await waitFor(() =>
+      expect(screen.getByLabelText('Page name')).toHaveValue('Tuturuuu')
+    );
+  });
+
+  it('shows only individually enabled reactions in the preview', async () => {
+    render(<FacebookMockup />);
+    const preview = within(screen.getByTestId('facebook-mockup-post-card'));
+    const getReactionSources = () =>
+      Array.from(preview.getAllByLabelText('reaction-badge'), (badge) =>
+        badge.querySelector('img')?.getAttribute('src')
+      );
+
+    expect(getReactionSources()).toEqual([
+      '/media/facebook-reactions/love.png',
+      '/media/facebook-reactions/like.png',
+      '/media/facebook-reactions/haha.png',
+    ]);
+
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Care' }));
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Love' }));
+
+    await waitFor(() =>
+      expect(getReactionSources()).toEqual([
+        '/media/facebook-reactions/like.png',
+        '/media/facebook-reactions/care.png',
+        '/media/facebook-reactions/haha.png',
+      ])
+    );
+  });
+
+  it('exports the preview through html2canvas', async () => {
+    const anchorClickSpy = vi
+      .spyOn(HTMLAnchorElement.prototype, 'click')
+      .mockImplementation(() => {});
+
+    render(<FacebookMockup />);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Download' }));
+
+    await waitFor(() => expect(html2canvasMock).toHaveBeenCalledTimes(1));
+    expect(anchorClickSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('keeps desktop framing exclusive to fullscreen mode', async () => {
+    render(<FacebookMockup />);
+
+    expect(
+      screen.queryByRole('button', { name: 'Desktop' })
+    ).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Tablet' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Fullscreen preview' }));
+
+    fireEvent.click(screen.getByRole('button', { name: 'Desktop' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Close fullscreen' }));
+
+    await waitFor(() =>
+      expect(
+        screen.queryByRole('button', { name: 'Desktop' })
+      ).not.toBeInTheDocument()
+    );
+    expect(screen.getByRole('button', { name: 'Tablet' })).toHaveAttribute(
+      'aria-pressed',
+      'true'
+    );
+  });
+});

package/src/components/ui/custom/__tests__/report-preview-pagination.test.ts

@@ -0,0 +1,189 @@
+import { describe, expect, it } from 'vitest';
+import {
+  type MeasureReportBlock,
+  paginateReportBlocks,
+  parseReportSegments,
+  type ReportBlock,
+} from '../report-preview-pagination';
+
+const measureBlock: MeasureReportBlock = ({ segments }) => {
+  let height = 28;
+
+  for (const segment of segments) {
+    if (segment.kind === 'spacer') {
+      height += 12;
+      continue;
+    }
+
+    height += Math.max(24, Math.ceil(segment.text.length / 42) * 18);
+  }
+
+  return height;
+};
+
+function collectBlockText(blocks: ReturnType<typeof paginateReportBlocks>) {
+  return blocks
+    .flatMap((page) => page.blocks)
+    .flatMap((block) => block.segments)
+    .map((segment) => `${segment.kind}:${segment.id}:${segment.text}`)
+    .join('|');
+}
+
+describe('report-preview-pagination', () => {
+  it('splits a long paragraph across multiple pages without dropping text', () => {
+    const paragraph = Array.from({ length: 180 }, (_, index) => `word${index}`)
+      .join(' ')
+      .trim();
+    const sourceSegments = parseReportSegments(paragraph, 'content');
+    const pages = paginateReportBlocks({
+      blocks: [
+        {
+          key: 'content',
+          kind: 'rich-text',
+          segments: sourceSegments,
+          splittable: true,
+          title: 'Content',
+          tone: 'primary',
+        },
+      ],
+      firstPageHeight: 180,
+      laterPageHeight: 180,
+      measureBlock,
+      pageGap: 16,
+    });
+
+    expect(pages.length).toBeGreaterThan(1);
+    const renderedParagraph = pages
+      .flatMap((page) => page.blocks)
+      .flatMap((block) => block.segments)
+      .filter((segment) => segment.kind === 'paragraph')
+      .map((segment) => segment.text)
+      .join('');
+
+    expect(renderedParagraph).toBe(paragraph);
+  });
+
+  it('splits bullet lists by item first and then within an oversized item', () => {
+    const oversizedBullet = Array.from(
+      { length: 120 },
+      (_, index) => `detail${index}`
+    ).join(' ');
+    const sourceSegments = parseReportSegments(
+      ['- One', '- Two', `- ${oversizedBullet}`, '- Final'].join('\n'),
+      'feedback'
+    );
+    const pages = paginateReportBlocks({
+      blocks: [
+        {
+          key: 'feedback',
+          kind: 'rich-text',
+          segments: sourceSegments,
+          splittable: true,
+          title: 'Feedback',
+          tone: 'neutral',
+        },
+      ],
+      firstPageHeight: 150,
+      laterPageHeight: 150,
+      measureBlock,
+      pageGap: 16,
+    });
+
+    expect(pages.length).toBeGreaterThan(1);
+    const initialBulletTexts = pages[0]?.blocks[0]?.segments
+      .slice(0, 2)
+      .map((segment) => segment.text);
+
+    expect(initialBulletTexts).toEqual(['One', 'Two']);
+
+    const oversizedBulletText = pages
+      .flatMap((page) => page.blocks)
+      .flatMap((block) => block.segments)
+      .filter((segment) => segment.id === 'feedback-bullet-2')
+      .map((segment) => segment.text)
+      .join('');
+
+    expect(oversizedBulletText).toBe(oversizedBullet);
+  });
+
+  it('moves atomic blocks to the next page when there is not enough remaining space', () => {
+    const blocks: ReportBlock[] = [
+      {
+        key: 'summary',
+        kind: 'rich-text',
+        segments: parseReportSegments(
+          Array.from({ length: 34 }, (_, index) => `summary${index}`).join(' '),
+          'summary'
+        ),
+        splittable: true,
+        title: 'Summary',
+        tone: 'primary',
+      },
+      {
+        key: 'notice',
+        kind: 'atomic',
+        segments: parseReportSegments('Short notice', 'notice'),
+        splittable: false,
+        title: 'Notice',
+        tone: 'accent',
+      },
+    ];
+    const pages = paginateReportBlocks({
+      blocks,
+      firstPageHeight: 120,
+      laterPageHeight: 180,
+      measureBlock,
+      pageGap: 16,
+    });
+
+    expect(pages).toHaveLength(2);
+    expect(pages[0]?.blocks).toHaveLength(1);
+    expect(pages[1]?.blocks.some((block) => block.blockKind === 'atomic')).toBe(
+      true
+    );
+  });
+
+  it('preserves fragment order and avoids empty overflow pages for short content', () => {
+    const blocks: ReportBlock[] = [
+      {
+        key: 'content',
+        kind: 'rich-text',
+        segments: parseReportSegments('Short content', 'content'),
+        splittable: true,
+        title: 'Content',
+        tone: 'primary',
+      },
+      {
+        key: 'feedback',
+        kind: 'rich-text',
+        segments: parseReportSegments('Short feedback', 'feedback'),
+        splittable: true,
+        title: 'Feedback',
+        tone: 'neutral',
+      },
+    ];
+    const pages = paginateReportBlocks({
+      blocks,
+      firstPageHeight: 400,
+      laterPageHeight: 400,
+      measureBlock,
+      pageGap: 16,
+    });
+
+    expect(pages).toHaveLength(1);
+    expect(collectBlockText(pages)).toBe(
+      collectBlockText([
+        {
+          blocks: blocks.map((block, index) => ({
+            blockKind: block.kind,
+            isContinuation: false,
+            key: `${block.key}-${index}`,
+            segments: block.segments,
+            title: block.title,
+            tone: block.tone,
+          })),
+        },
+      ])
+    );
+  });
+});

package/src/components/ui/custom/__tests__/report-preview.test.tsx

@@ -0,0 +1,201 @@
+import { render, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import ReportPreview from '../report-preview';
+
+const t = (key: string) =>
+  (
+    ({
+      'common.empty': 'Empty',
+      'common.untitled': 'Untitled',
+      'ws-reports.continued': 'Continued',
+      'ws-reports.pagination_updating': 'Updating A4 page flow...',
+      'ws-reports.preview_pages_description':
+        'Jump between pages without scrolling through the full export stack.',
+      'ws-reports.report': 'Report',
+      'ws-reports.report_closing_heading': 'Closing note',
+      'ws-reports.report_feedback_heading': 'Teacher feedback',
+      'ws-reports.report_overview_heading': 'Learning summary',
+      'ws-reports.report_overview_description':
+        'Lesson highlights, completed study content, and classroom progress are organized below.',
+      'ws-reports.representative_score': 'Representative score',
+    }) as Record<string, string>
+  )[key] ?? key;
+
+function createRect(height: number): DOMRect {
+  return {
+    bottom: height,
+    height,
+    left: 0,
+    right: 100,
+    toJSON: () => ({}),
+    top: 0,
+    width: 100,
+    x: 0,
+    y: 0,
+  } as DOMRect;
+}
+
+describe('ReportPreview', () => {
+  let originalClientHeight: PropertyDescriptor | undefined;
+  let getBoundingClientRectSpy: ReturnType<typeof vi.spyOn>;
+
+  beforeEach(() => {
+    class ResizeObserverMock {
+      observe = vi.fn();
+      disconnect = vi.fn();
+    }
+
+    vi.stubGlobal('ResizeObserver', ResizeObserverMock);
+    vi.stubGlobal('requestAnimationFrame', ((
+      callback: FrameRequestCallback
+    ) => {
+      callback(0);
+      return 1;
+    }) as typeof requestAnimationFrame);
+    vi.stubGlobal(
+      'cancelAnimationFrame',
+      (() => undefined) as typeof cancelAnimationFrame
+    );
+
+    Object.defineProperty(document, 'fonts', {
+      configurable: true,
+      value: {
+        ready: Promise.resolve(),
+      },
+    });
+
+    originalClientHeight = Object.getOwnPropertyDescriptor(
+      HTMLElement.prototype,
+      'clientHeight'
+    );
+    Object.defineProperty(HTMLElement.prototype, 'clientHeight', {
+      configurable: true,
+      get() {
+        const className =
+          typeof this.className === 'string' ? this.className : '';
+
+        if (className.includes('min-h-0 flex-1 flex-col')) {
+          return 260;
+        }
+
+        return 0;
+      },
+    });
+
+    getBoundingClientRectSpy = vi
+      .spyOn(HTMLElement.prototype, 'getBoundingClientRect')
+      .mockImplementation(function mockRect(this: HTMLElement) {
+        const className =
+          typeof this.className === 'string' ? this.className : '';
+        const textLength = this.textContent?.length ?? 0;
+
+        if (className.includes('rounded-[24px]')) {
+          return createRect(52 + Math.ceil(textLength / 90) * 26);
+        }
+
+        return createRect(0);
+      });
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    getBoundingClientRectSpy.mockRestore();
+
+    if (originalClientHeight) {
+      Object.defineProperty(
+        HTMLElement.prototype,
+        'clientHeight',
+        originalClientHeight
+      );
+    }
+  });
+
+  it('emits canonical page count and repaginates when content changes', async () => {
+    const onPaginationStateChange = vi.fn();
+    const getConfig = (id: string) =>
+      (
+        ({
+          BRAND_NAME: 'Easy',
+          BRAND_PHONE_NUMBER: '0123 456 789',
+          REPORT_INTRO: 'Intro text',
+        }) as Record<string, string>
+      )[id] ?? null;
+
+    const { container, rerender } = render(
+      <ReportPreview
+        t={t}
+        lang="en"
+        data={{
+          title: 'Monthly report',
+          content: 'Short content',
+          score: '85.0',
+          feedback: 'Short feedback',
+        }}
+        parseDynamicText={(text) => text ?? null}
+        getConfig={getConfig}
+        theme="light"
+        previewPageIndex={0}
+        singlePagePreview
+        onPaginationStateChange={onPaginationStateChange}
+      />
+    );
+
+    await waitFor(() =>
+      expect(onPaginationStateChange).toHaveBeenLastCalledWith({
+        pageCount: 1,
+        ready: true,
+      })
+    );
+
+    rerender(
+      <ReportPreview
+        t={t}
+        lang="en"
+        data={{
+          title: 'Monthly report',
+          content: Array.from({ length: 260 }, (_, index) => `content${index}`)
+            .join(' ')
+            .trim(),
+          score: '85.0',
+          feedback: Array.from(
+            { length: 220 },
+            (_, index) => `feedback${index}`
+          )
+            .join(' ')
+            .trim(),
+        }}
+        parseDynamicText={(text) => text ?? null}
+        getConfig={getConfig}
+        theme="light"
+        previewPageIndex={0}
+        singlePagePreview
+        onPaginationStateChange={onPaginationStateChange}
+      />
+    );
+
+    await waitFor(() => {
+      const lastCall =
+        onPaginationStateChange.mock.calls[
+          onPaginationStateChange.mock.calls.length - 1
+        ]?.[0];
+
+      expect(lastCall).toMatchObject({
+        pageCount: expect.any(Number),
+        ready: true,
+      });
+      expect(lastCall?.pageCount).toBeGreaterThan(1);
+    });
+
+    const lastReadyState =
+      onPaginationStateChange.mock.calls[
+        onPaginationStateChange.mock.calls.length - 1
+      ]?.[0];
+    const exportPages = container.querySelectorAll(
+      '[data-report-export-stack] [data-report-page]'
+    );
+    const allRenderedPages = container.querySelectorAll('[data-report-page]');
+
+    expect(exportPages).toHaveLength(lastReadyState?.pageCount ?? 0);
+    expect(allRenderedPages).toHaveLength((lastReadyState?.pageCount ?? 0) + 1);
+  });
+});