kigumi 0.2.0

package/templates/react/Tooltip/Tooltip.css.hbs

@@ -0,0 +1,21 @@
+/**
+ * Tooltip Component Styles
+ * Documentation: https://webawesome.com/docs/components/tooltip
+ *
+ * CSS Custom Properties:
+ * - --max-width: The maximum width of the tooltip before its content will wrap
+ *
+ * CSS Parts:
+ * - base: The component's base wrapper, an <wa-popup> element
+ * - base__popup: The popup's exported popup part. Use this to target the tooltip's popup container
+ * - base__arrow: The popup's exported arrow part. Use this to target the tooltip's arrow
+ * - body: The tooltip's body where its content is rendered
+ *
+ * @example
+ * .Tooltip::part(body) {
+ *   // Custom styles
+ * }
+ */
+.Tooltip {
+  /* Add your custom styles here */
+}

package/templates/react/Tooltip/Tooltip.jsx.hbs

@@ -0,0 +1,63 @@
+import React, { useRef, useImperativeHandle, useEffect } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Tooltip.css';
+
+export const Tooltip = React.forwardRef(
+  ({ children, className, open, onShow, onAfterShow, onHide, onAfterHide, ...props }, ref) => {
+    const tooltipRef = useRef(null);
+
+    useImperativeHandle(ref, () => ({
+      show: () => tooltipRef.current?.show?.(),
+      hide: () => tooltipRef.current?.hide?.(),
+      get element() {
+        return tooltipRef.current;
+      },
+    }), []);
+
+    useEffect(() => {
+      const el = tooltipRef.current;
+      if (!el || open === undefined) return;
+      const isOpen = el.open ?? false;
+      if (open && !isOpen) {
+        el.show?.();
+      } else if (!open && isOpen) {
+        el.hide?.();
+      }
+    }, [open]);
+
+    useEffect(() => {
+      const el = tooltipRef.current;
+      if (!el) return;
+
+      const handleShow = (e) => onShow?.(e);
+      const handleAfterShow = (e) => onAfterShow?.(e);
+      const handleHide = (e) => onHide?.(e);
+      const handleAfterHide = (e) => onAfterHide?.(e);
+
+      el.addEventListener('wa-show', handleShow);
+      el.addEventListener('wa-after-show', handleAfterShow);
+      el.addEventListener('wa-hide', handleHide);
+      el.addEventListener('wa-after-hide', handleAfterHide);
+
+      return () => {
+        el.removeEventListener('wa-show', handleShow);
+        el.removeEventListener('wa-after-show', handleAfterShow);
+        el.removeEventListener('wa-hide', handleHide);
+        el.removeEventListener('wa-after-hide', handleAfterHide);
+      };
+    }, [onShow, onAfterShow, onHide, onAfterHide]);
+
+    return (
+      <wa-tooltip
+        ref={tooltipRef}
+        class={clsx('Tooltip', className)}
+        {...props}
+      >
+        {children}
+      </wa-tooltip>
+    );
+  }
+);
+
+Tooltip.displayName = 'Tooltip';

package/templates/react/Tooltip/Tooltip.test.jsx.hbs

@@ -0,0 +1,15 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { Tooltip } from './Tooltip';
+
+describe('Tooltip', () => {
+  it('renders without crashing', () => {
+    const { container } = render(
+      <Tooltip content="Tooltip text">
+        <button>Hover me</button>
+      </Tooltip>
+    );
+    expect(container.querySelector('wa-tooltip')).toBeInTheDocument();
+  });
+});

package/templates/react/Tooltip/Tooltip.test.tsx.hbs

@@ -0,0 +1,14 @@
+import { render, screen } from '@testing-library/react';
+import { Tooltip } from './Tooltip';
+
+describe('Tooltip', () => {
+  it('renders children', () => {
+    render(<Tooltip content="Tooltip text">Test</Tooltip>);
+    expect(screen.getByText('Test')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<Tooltip content="Tooltip text" className="custom-class">Test</Tooltip>);
+    expect(container.querySelector('.custom-class')).toBeInTheDocument();
+  });
+});

package/templates/react/Tooltip/Tooltip.tsx.hbs

@@ -0,0 +1,104 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Tooltip.css';
+
+export interface TooltipProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** The tooltip's content */
+  content?: string;
+  /** Disables the tooltip */
+  disabled?: boolean;
+  /** Distance in pixels from the target */
+  distance?: number;
+  /** Delay before hiding (ms) */
+  hideDelay?: number;
+  /** Whether the tooltip is open */
+  open?: boolean;
+  /** Tooltip placement */
+  placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+  /** Delay before showing (ms) */
+  showDelay?: number;
+  /** Offset along the target (px) */
+  skidding?: number;
+  /** Activation method */
+  trigger?: string;
+  /** Removes the arrow */
+  withoutArrow?: boolean;
+  /** Emitted when the tooltip begins to show */
+  onShow?: (event: CustomEvent) => void;
+  /** Emitted after the tooltip has shown */
+  onAfterShow?: (event: CustomEvent) => void;
+  /** Emitted when the tooltip begins to hide */
+  onHide?: (event: CustomEvent) => void;
+  /** Emitted after the tooltip has hidden */
+  onAfterHide?: (event: CustomEvent) => void;
+}
+
+export interface TooltipRef {
+  show: () => void;
+  hide: () => void;
+  element: HTMLElement | null;
+}
+
+export const Tooltip = forwardRef<TooltipRef, TooltipProps>(
+  ({ children, className, open, onShow, onAfterShow, onHide, onAfterHide, ...props }, ref) => {
+    const tooltipRef = useRef<HTMLElement & {
+      show?: () => void;
+      hide?: () => void;
+      open?: boolean;
+    }>(null);
+
+    useImperativeHandle(ref, () => ({
+      show: () => tooltipRef.current?.show?.(),
+      hide: () => tooltipRef.current?.hide?.(),
+      get element() {
+        return tooltipRef.current;
+      },
+    }), []);
+
+    useEffect(() => {
+      const el = tooltipRef.current;
+      if (!el || open === undefined) return;
+      const isOpen = el.open ?? false;
+      if (open && !isOpen) {
+        el.show?.();
+      } else if (!open && isOpen) {
+        el.hide?.();
+      }
+    }, [open]);
+
+    useEffect(() => {
+      const el = tooltipRef.current;
+      if (!el) return;
+
+      const handleShow = (e: Event) => onShow?.(e as CustomEvent);
+      const handleAfterShow = (e: Event) => onAfterShow?.(e as CustomEvent);
+      const handleHide = (e: Event) => onHide?.(e as CustomEvent);
+      const handleAfterHide = (e: Event) => onAfterHide?.(e as CustomEvent);
+
+      el.addEventListener('wa-show', handleShow);
+      el.addEventListener('wa-after-show', handleAfterShow);
+      el.addEventListener('wa-hide', handleHide);
+      el.addEventListener('wa-after-hide', handleAfterHide);
+
+      return () => {
+        el.removeEventListener('wa-show', handleShow);
+        el.removeEventListener('wa-after-show', handleAfterShow);
+        el.removeEventListener('wa-hide', handleHide);
+        el.removeEventListener('wa-after-hide', handleAfterHide);
+      };
+    }, [onShow, onAfterShow, onHide, onAfterHide]);
+
+    return (
+      <wa-tooltip
+        ref={tooltipRef}
+        class={clsx('Tooltip', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-tooltip>
+    );
+  }
+);
+
+Tooltip.displayName = 'Tooltip';

package/templates/react/Tree/Tree.css.hbs

@@ -0,0 +1,22 @@
+/**
+ * Tree Component Styles
+ * Documentation: https://webawesome.com/docs/components/tree
+ *
+ * CSS Custom Properties:
+ * - --indent-size: The size of the indentation for nested items (Default: var(--wa-space-m))
+ * - --indent-guide-color: The color of the indentation line (Default: var(--wa-color-surface-border))
+ * - --indent-guide-offset: The amount of vertical spacing to leave between the top and bottom of the indentation line's starting position (Default: 0)
+ * - --indent-guide-style: The style of the indentation line, e.g. solid, dotted, dashed (Default: solid)
+ * - --indent-guide-width: The width of the indentation line (Default: 0)
+ *
+ * CSS Parts:
+ * - base: The component's base wrapper
+ *
+ * @example
+ * .Tree::part(base) {
+ *   // Custom styles
+ * }
+ */
+.Tree {
+  /* Add your custom styles here */
+}

package/templates/react/Tree/Tree.jsx.hbs

@@ -0,0 +1,41 @@
+import React, { useRef, useImperativeHandle, useEffect } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Tree.css';
+
+export const Tree = React.forwardRef(
+  ({ children, className, onSelectionChange, ...props }, ref) => {
+    const treeRef = useRef(null);
+
+    useImperativeHandle(ref, () => ({
+      get element() {
+        return treeRef.current;
+      },
+    }), []);
+
+    useEffect(() => {
+      const el = treeRef.current;
+      if (!el) return;
+
+      const handleSelectionChange = (e) => onSelectionChange?.(e);
+
+      el.addEventListener('wa-selection-change', handleSelectionChange);
+
+      return () => {
+        el.removeEventListener('wa-selection-change', handleSelectionChange);
+      };
+    }, [onSelectionChange]);
+
+    return (
+      <wa-tree
+        ref={treeRef}
+        class={clsx('Tree', className)}
+        {...props}
+      >
+        {children}
+      </wa-tree>
+    );
+  }
+);
+
+Tree.displayName = 'Tree';

package/templates/react/Tree/Tree.test.jsx.hbs

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { Tree } from './Tree';
+
+describe('Tree', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<Tree>Tree content</Tree>);
+    expect(container.querySelector('wa-tree')).toBeInTheDocument();
+  });
+});

package/templates/react/Tree/Tree.test.tsx.hbs

@@ -0,0 +1,14 @@
+import { render, screen } from '@testing-library/react';
+import { Tree } from './Tree';
+
+describe('Tree', () => {
+  it('renders children', () => {
+    render(<Tree>Test</Tree>);
+    expect(screen.getByText('Test')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<Tree className="custom-class">Test</Tree>);
+    expect(container.querySelector('.custom-class')).toBeInTheDocument();
+  });
+});

package/templates/react/Tree/Tree.tsx.hbs

@@ -0,0 +1,52 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Tree.css';
+
+export interface TreeProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** The selection behavior of the tree */
+  selection?: 'single' | 'multiple' | 'leaf';
+  /** Emitted when a tree item is selected or deselected */
+  onSelectionChange?: (event: CustomEvent) => void;
+}
+
+export interface TreeRef {
+  element: HTMLElement | null;
+}
+
+export const Tree = forwardRef<TreeRef, TreeProps>(
+  ({ children, className, onSelectionChange, ...props }, ref) => {
+    const treeRef = useRef<HTMLElement>(null);
+
+    useImperativeHandle(ref, () => ({
+      get element() {
+        return treeRef.current;
+      },
+    }), []);
+
+    useEffect(() => {
+      const el = treeRef.current;
+      if (!el) return;
+
+      const handleSelectionChange = (e: Event) => onSelectionChange?.(e as CustomEvent);
+
+      el.addEventListener('wa-selection-change', handleSelectionChange);
+
+      return () => {
+        el.removeEventListener('wa-selection-change', handleSelectionChange);
+      };
+    }, [onSelectionChange]);
+
+    return (
+      <wa-tree
+        ref={treeRef}
+        class={clsx('Tree', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-tree>
+    );
+  }
+);
+
+Tree.displayName = 'Tree';

package/templates/react/TreeItem/TreeItem.css.hbs

@@ -0,0 +1,32 @@
+/**
+ * TreeItem Component Styles
+ * Documentation: https://webawesome.com/docs/components/tree-item
+ *
+ * CSS Custom Properties:
+ * - --show-duration: The animation duration when expanding tree items (Default: 200ms)
+ * - --hide-duration: The animation duration when collapsing tree items (Default: 200ms)
+ *
+ * CSS Parts:
+ * - base: The component's base wrapper
+ * - item: The tree item's container. This element wraps everything except slotted tree item children
+ * - indentation: The tree item's indentation container
+ * - expand-button: The container that wraps the tree item's expand button and spinner
+ * - spinner: The spinner that shows when a lazy tree item is in the loading state
+ * - spinner__base: The spinner's base part
+ * - label: The tree item's label
+ * - children: The container that wraps the tree item's nested children
+ * - checkbox: The checkbox that shows when using multiselect
+ * - checkbox__base: The checkbox's exported base part
+ * - checkbox__control: The checkbox's exported control part
+ * - checkbox__checked-icon: The checkbox's exported checked-icon part
+ * - checkbox__indeterminate-icon: The checkbox's exported indeterminate-icon part
+ * - checkbox__label: The checkbox's exported label part
+ *
+ * @example
+ * .TreeItem::part(item) {
+ *   // Custom styles
+ * }
+ */
+.TreeItem {
+  /* Add your custom styles here */
+}

package/templates/react/TreeItem/TreeItem.jsx.hbs

@@ -0,0 +1,57 @@
+import React, { useRef, useImperativeHandle, useEffect } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './TreeItem.css';
+
+export const TreeItem = React.forwardRef(
+  ({ children, className, onCollapse, onAfterCollapse, onExpand, onAfterExpand, onLazyChange, onLazyLoad, ...props }, ref) => {
+    const treeItemRef = useRef(null);
+
+    useImperativeHandle(ref, () => ({
+      getChildrenItems: (options) => treeItemRef.current?.getChildrenItems?.(options) ?? [],
+      get element() {
+        return treeItemRef.current;
+      },
+    }), []);
+
+    useEffect(() => {
+      const el = treeItemRef.current;
+      if (!el) return;
+
+      const handleCollapse = (e) => onCollapse?.(e);
+      const handleAfterCollapse = (e) => onAfterCollapse?.(e);
+      const handleExpand = (e) => onExpand?.(e);
+      const handleAfterExpand = (e) => onAfterExpand?.(e);
+      const handleLazyChange = (e) => onLazyChange?.(e);
+      const handleLazyLoad = (e) => onLazyLoad?.(e);
+
+      el.addEventListener('wa-collapse', handleCollapse);
+      el.addEventListener('wa-after-collapse', handleAfterCollapse);
+      el.addEventListener('wa-expand', handleExpand);
+      el.addEventListener('wa-after-expand', handleAfterExpand);
+      el.addEventListener('wa-lazy-change', handleLazyChange);
+      el.addEventListener('wa-lazy-load', handleLazyLoad);
+
+      return () => {
+        el.removeEventListener('wa-collapse', handleCollapse);
+        el.removeEventListener('wa-after-collapse', handleAfterCollapse);
+        el.removeEventListener('wa-expand', handleExpand);
+        el.removeEventListener('wa-after-expand', handleAfterExpand);
+        el.removeEventListener('wa-lazy-change', handleLazyChange);
+        el.removeEventListener('wa-lazy-load', handleLazyLoad);
+      };
+    }, [onCollapse, onAfterCollapse, onExpand, onAfterExpand, onLazyChange, onLazyLoad]);
+
+    return (
+      <wa-tree-item
+        ref={treeItemRef}
+        class={clsx('TreeItem', className)}
+        {...props}
+      >
+        {children}
+      </wa-tree-item>
+    );
+  }
+);
+
+TreeItem.displayName = 'TreeItem';

package/templates/react/TreeItem/TreeItem.test.jsx.hbs

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { TreeItem } from './TreeItem';
+
+describe('TreeItem', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<TreeItem>Item 1</TreeItem>);
+    expect(container.querySelector('wa-tree-item')).toBeInTheDocument();
+  });
+});

package/templates/react/TreeItem/TreeItem.test.tsx.hbs

@@ -0,0 +1,14 @@
+import { render, screen } from '@testing-library/react';
+import { TreeItem } from './TreeItem';
+
+describe('TreeItem', () => {
+  it('renders children', () => {
+    render(<TreeItem>Test</TreeItem>);
+    expect(screen.getByText('Test')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<TreeItem className="custom-class">Test</TreeItem>);
+    expect(container.querySelector('.custom-class')).toBeInTheDocument();
+  });
+});

package/templates/react/TreeItem/TreeItem.tsx.hbs

@@ -0,0 +1,87 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './TreeItem.css';
+
+export interface TreeItemProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** Disables the tree item */
+  disabled?: boolean;
+  /** Expands the tree item */
+  expanded?: boolean;
+  /** Enables lazy loading behavior */
+  lazy?: boolean;
+  /** Draws the tree item in a selected state */
+  selected?: boolean;
+  /** Emitted when the item collapses */
+  onCollapse?: (event: CustomEvent) => void;
+  /** Emitted after collapse animation completes */
+  onAfterCollapse?: (event: CustomEvent) => void;
+  /** Emitted when the item expands */
+  onExpand?: (event: CustomEvent) => void;
+  /** Emitted after expand animation completes */
+  onAfterExpand?: (event: CustomEvent) => void;
+  /** Emitted when lazy state changes */
+  onLazyChange?: (event: CustomEvent) => void;
+  /** Emitted when a lazy item is selected for async loading */
+  onLazyLoad?: (event: CustomEvent) => void;
+}
+
+export interface TreeItemRef {
+  getChildrenItems: (options?: { includeDisabled?: boolean }) => HTMLElement[];
+  element: HTMLElement | null;
+}
+
+export const TreeItem = forwardRef<TreeItemRef, TreeItemProps>(
+  ({ children, className, onCollapse, onAfterCollapse, onExpand, onAfterExpand, onLazyChange, onLazyLoad, ...props }, ref) => {
+    const treeItemRef = useRef<HTMLElement & {
+      getChildrenItems?: (options?: { includeDisabled?: boolean }) => HTMLElement[];
+    }>(null);
+
+    useImperativeHandle(ref, () => ({
+      getChildrenItems: (options) => treeItemRef.current?.getChildrenItems?.(options) ?? [],
+      get element() {
+        return treeItemRef.current;
+      },
+    }), []);
+
+    useEffect(() => {
+      const el = treeItemRef.current;
+      if (!el) return;
+
+      const handleCollapse = (e: Event) => onCollapse?.(e as CustomEvent);
+      const handleAfterCollapse = (e: Event) => onAfterCollapse?.(e as CustomEvent);
+      const handleExpand = (e: Event) => onExpand?.(e as CustomEvent);
+      const handleAfterExpand = (e: Event) => onAfterExpand?.(e as CustomEvent);
+      const handleLazyChange = (e: Event) => onLazyChange?.(e as CustomEvent);
+      const handleLazyLoad = (e: Event) => onLazyLoad?.(e as CustomEvent);
+
+      el.addEventListener('wa-collapse', handleCollapse);
+      el.addEventListener('wa-after-collapse', handleAfterCollapse);
+      el.addEventListener('wa-expand', handleExpand);
+      el.addEventListener('wa-after-expand', handleAfterExpand);
+      el.addEventListener('wa-lazy-change', handleLazyChange);
+      el.addEventListener('wa-lazy-load', handleLazyLoad);
+
+      return () => {
+        el.removeEventListener('wa-collapse', handleCollapse);
+        el.removeEventListener('wa-after-collapse', handleAfterCollapse);
+        el.removeEventListener('wa-expand', handleExpand);
+        el.removeEventListener('wa-after-expand', handleAfterExpand);
+        el.removeEventListener('wa-lazy-change', handleLazyChange);
+        el.removeEventListener('wa-lazy-load', handleLazyLoad);
+      };
+    }, [onCollapse, onAfterCollapse, onExpand, onAfterExpand, onLazyChange, onLazyLoad]);
+
+    return (
+      <wa-tree-item
+        ref={treeItemRef}
+        class={clsx('TreeItem', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-tree-item>
+    );
+  }
+);
+
+TreeItem.displayName = 'TreeItem';

package/templates/react/ZoomableFrame/ZoomableFrame.css.hbs

@@ -0,0 +1,21 @@
+/**
+ * ZoomableFrame Component Styles
+ * Documentation: https://webawesome.com/docs/components/zoomable-frame
+ *
+ * CSS Custom Properties:
+ * (No custom properties defined for this component)
+ *
+ * CSS Parts:
+ * - iframe: The internal <iframe> element
+ * - controls: The container that surrounds zoom control buttons
+ * - zoom-in-button: The zoom in button
+ * - zoom-out-button: The zoom out button
+ *
+ * @example
+ * .ZoomableFrame::part(iframe) {
+ *   // Custom styles
+ * }
+ */
+.ZoomableFrame {
+  /* Add your custom styles here */
+}

package/templates/react/ZoomableFrame/ZoomableFrame.jsx.hbs

@@ -0,0 +1,52 @@
+import React, { useRef, useImperativeHandle, useEffect } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './ZoomableFrame.css';
+
+export const ZoomableFrame = React.forwardRef(
+  ({ children, className, onLoad, onError, ...props }, ref) => {
+    const frameRef = useRef(null);
+
+    useImperativeHandle(ref, () => ({
+      zoomIn: () => frameRef.current?.zoomIn?.(),
+      zoomOut: () => frameRef.current?.zoomOut?.(),
+      get contentDocument() {
+        return frameRef.current?.contentDocument ?? null;
+      },
+      get contentWindow() {
+        return frameRef.current?.contentWindow ?? null;
+      },
+      get element() {
+        return frameRef.current;
+      },
+    }), []);
+
+    useEffect(() => {
+      const el = frameRef.current;
+      if (!el) return;
+
+      const handleLoad = (e) => onLoad?.(e);
+      const handleError = (e) => onError?.(e);
+
+      el.addEventListener('load', handleLoad);
+      el.addEventListener('error', handleError);
+
+      return () => {
+        el.removeEventListener('load', handleLoad);
+        el.removeEventListener('error', handleError);
+      };
+    }, [onLoad, onError]);
+
+    return (
+      <wa-zoomable-frame
+        ref={frameRef}
+        class={clsx('ZoomableFrame', className)}
+        {...props}
+      >
+        {children}
+      </wa-zoomable-frame>
+    );
+  }
+);
+
+ZoomableFrame.displayName = 'ZoomableFrame';

package/templates/react/ZoomableFrame/ZoomableFrame.test.jsx.hbs

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { ZoomableFrame } from './ZoomableFrame';
+
+describe('ZoomableFrame', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<ZoomableFrame src="https://example.com" />);
+    expect(container.querySelector('wa-zoomable-frame')).toBeInTheDocument();
+  });
+});

package/templates/react/ZoomableFrame/ZoomableFrame.test.tsx.hbs

@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react';
+import { ZoomableFrame } from './ZoomableFrame';
+
+describe('ZoomableFrame', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<ZoomableFrame src="https://example.com" />);
+    expect(container.querySelector('wa-zoomable-frame')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<ZoomableFrame src="https://example.com" className="custom-class" />);
+    expect(container.querySelector('.custom-class')).toBeInTheDocument();
+  });
+});