kigumi 0.2.0

package/templates/react/AnimatedImage/AnimatedImage.jsx.hbs

@@ -0,0 +1,64 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './AnimatedImage.css';
+
+/**
+ * {{description}}
+ *
+ * @example
+ * ```jsx
+ * <AnimatedImage 
+ *   src="https://example.com/animation.gif" 
+ *   alt="Animated illustration"
+ *   play
+ * />
+ * ```
+ *
+ * @typedef {Object} AnimatedImageProps
+ * @property {string} src - The path to the image to load
+ * @property {string} alt - A description of the image used by assistive devices
+ * @property {boolean} [play] - Plays the animation
+ * @property {function} [onLoad] - Event fired when the image loads successfully
+ * @property {function} [onError] - Event fired when the image fails to load
+ * @property {string} [className] - Additional CSS classes
+ */
+
+export const AnimatedImage = React.forwardRef(
+  ({ className, onLoad, onError, ...props }, ref) => {
+    const elementRef = React.useRef(null);
+
+    React.useImperativeHandle(ref, () => elementRef.current, []);
+
+    React.useEffect(() => {
+      const el = elementRef.current;
+      if (!el) return;
+
+      const handleLoad = (e) => {
+        if (onLoad) onLoad(e);
+      };
+
+      const handleError = (e) => {
+        if (onError) onError(e);
+      };
+
+      el.addEventListener('wa-load', handleLoad);
+      el.addEventListener('wa-error', handleError);
+
+      return () => {
+        el.removeEventListener('wa-load', handleLoad);
+        el.removeEventListener('wa-error', handleError);
+      };
+    }, [onLoad, onError]);
+
+    return (
+      <wa-animated-image
+        ref={elementRef}
+        class={clsx('AnimatedImage', className)}
+        {...props}
+      />
+    );
+  }
+);
+
+AnimatedImage.displayName = 'AnimatedImage';

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

@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { AnimatedImage } from './AnimatedImage';
+
+describe('AnimatedImage', () => {
+  it('renders without crashing', () => {
+    const { container } = render(
+      <AnimatedImage src="test.gif" alt="Test animation" />
+    );
+    expect(container.querySelector('wa-animated-image')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(
+      <AnimatedImage src="test.gif" alt="Test" className="custom-class" />
+    );
+    const element = container.querySelector('wa-animated-image');
+    expect(element?.getAttribute('class')).toContain('custom-class');
+  });
+
+  it('passes src and alt props', () => {
+    const { container } = render(
+      <AnimatedImage src="animation.gif" alt="My animation" />
+    );
+    const element = container.querySelector('wa-animated-image');
+    expect(element?.getAttribute('src')).toBe('animation.gif');
+    expect(element?.getAttribute('alt')).toBe('My animation');
+  });
+});

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

@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react';
+import { AnimatedImage } from './AnimatedImage';
+
+describe('AnimatedImage', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<AnimatedImage src="test.gif" alt="Test" />);
+    expect(container.querySelector('wa-animated-image')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<AnimatedImage src="test.gif" alt="Test" className="custom-class" />);
+    expect(container.querySelector('.custom-class')).toBeInTheDocument();
+  });
+});

package/templates/react/AnimatedImage/AnimatedImage.tsx.hbs

@@ -0,0 +1,68 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './AnimatedImage.css';
+
+/**
+ * {{description}}
+ *
+ * @example
+ * ```tsx
+ * <AnimatedImage 
+ *   src="https://example.com/animation.gif" 
+ *   alt="Animated illustration"
+ *   play
+ * />
+ * ```
+ */
+export interface AnimatedImageProps extends Omit<HTMLAttributes<HTMLElement>, 'onLoad' | 'onError' | 'dir'> {
+  /** The path to the image to load */
+  src: string;
+  /** A description of the image used by assistive devices */
+  alt: string;
+  /** Plays the animation. When this attribute is removed, the animation will pause */
+  play?: boolean;
+  /** Event fired when the image loads successfully */
+  onLoad?: (event: CustomEvent) => void;
+  /** Event fired when the image fails to load */
+  onError?: (event: CustomEvent) => void;
+}
+
+export const AnimatedImage = forwardRef<HTMLElement, AnimatedImageProps>(
+  ({ className, onLoad, onError, ...props }, ref) => {
+    const elementRef = useRef<HTMLElement>(null);
+
+    useImperativeHandle(ref, () => elementRef.current as HTMLElement, []);
+
+    useEffect(() => {
+      const el = elementRef.current;
+      if (!el) return;
+
+      const handleLoad = (e: Event) => {
+        if (onLoad) onLoad(e as CustomEvent);
+      };
+
+      const handleError = (e: Event) => {
+        if (onError) onError(e as CustomEvent);
+      };
+
+      el.addEventListener('wa-load', handleLoad);
+      el.addEventListener('wa-error', handleError);
+
+      return () => {
+        el.removeEventListener('wa-load', handleLoad);
+        el.removeEventListener('wa-error', handleError);
+      };
+    }, [onLoad, onError]);
+
+    return (
+      <wa-animated-image
+        ref={elementRef}
+        class={clsx('AnimatedImage', className)}
+        {...(props as Record<string, unknown>)}
+      />
+    );
+  }
+);
+
+AnimatedImage.displayName = 'AnimatedImage';

package/templates/react/Animation/Animation.css.hbs

@@ -0,0 +1,18 @@
+/**
+ * Animation Component Styles
+ * Documentation: https://webawesome.com/docs/components/animation
+ *
+ * CSS Custom Properties:
+ * (No custom properties defined for this component)
+ *
+ * CSS Parts:
+ * (No CSS parts defined for this component)
+ *
+ * @example
+ * .Animation {
+ *   // Custom styles
+ * }
+ */
+.Animation {
+  /* Add your custom styles here */
+}

package/templates/react/Animation/Animation.jsx.hbs

@@ -0,0 +1,100 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Animation.css';
+
+/**
+ * {{description}}
+ *
+ * @example
+ * ```jsx
+ * // Using built-in animations
+ * <Animation name="bounce" duration={2000} play>
+ *   <div className="box">Bouncing!</div>
+ * </Animation>
+ *
+ * // Using ref methods
+ * const animRef = React.useRef(null);
+ * <button onClick={() => animRef.current?.cancel()}>Cancel</button>
+ * <Animation ref={animRef} name="pulse" iterations={3}>
+ *   <div>Content</div>
+ * </Animation>
+ * ```
+ *
+ * @typedef {Object} AnimationProps
+ * @property {string} [name] - The name of the built-in animation to use
+ * @property {boolean} [play] - Plays the animation
+ * @property {number} [delay] - Milliseconds to delay the start
+ * @property {string} [direction] - Direction of playback
+ * @property {number} [duration] - Milliseconds each iteration takes
+ * @property {string} [easing] - The easing function to use
+ * @property {number} [iterations] - Number of iterations to run
+ * @property {function} [onCancel] - Event fired when canceled
+ * @property {function} [onFinish] - Event fired when finished
+ * @property {function} [onStart] - Event fired when started
+ */
+
+export const Animation = React.forwardRef(
+  ({ children, className, onCancel, onFinish, onStart, ...props }, ref) => {
+    const animationRef = React.useRef(null);
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        cancel: () => {
+          if (animationRef.current && typeof animationRef.current.cancel === 'function') {
+            animationRef.current.cancel();
+          }
+        },
+        finish: () => {
+          if (animationRef.current && typeof animationRef.current.finish === 'function') {
+            animationRef.current.finish();
+          }
+        },
+        get element() {
+          return animationRef.current;
+        },
+      }),
+      []
+    );
+
+    React.useEffect(() => {
+      const el = animationRef.current;
+      if (!el) return;
+
+      const handleCancel = (e) => {
+        if (onCancel) onCancel(e);
+      };
+
+      const handleFinish = (e) => {
+        if (onFinish) onFinish(e);
+      };
+
+      const handleStart = (e) => {
+        if (onStart) onStart(e);
+      };
+
+      el.addEventListener('wa-cancel', handleCancel);
+      el.addEventListener('wa-finish', handleFinish);
+      el.addEventListener('wa-start', handleStart);
+
+      return () => {
+        el.removeEventListener('wa-cancel', handleCancel);
+        el.removeEventListener('wa-finish', handleFinish);
+        el.removeEventListener('wa-start', handleStart);
+      };
+    }, [onCancel, onFinish, onStart]);
+
+    return (
+      <wa-animation
+        ref={animationRef}
+        class={clsx('Animation', className)}
+        {...props}
+      >
+        {children}
+      </wa-animation>
+    );
+  }
+);
+
+Animation.displayName = 'Animation';

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

@@ -0,0 +1,37 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { Animation } from './Animation';
+import React from 'react';
+
+describe('Animation', () => {
+  it('renders without crashing', () => {
+    const { container } = render(
+      <Animation name="bounce">
+        <div>Content</div>
+      </Animation>
+    );
+    expect(container.querySelector('wa-animation')).toBeInTheDocument();
+  });
+
+  it('exposes ref methods', () => {
+    const ref = React.createRef();
+    render(
+      <Animation ref={ref} name="pulse">
+        <div>Content</div>
+      </Animation>
+    );
+    expect(ref.current).toHaveProperty('cancel');
+    expect(ref.current).toHaveProperty('finish');
+  });
+
+  it('passes animation props', () => {
+    const { container } = render(
+      <Animation name="bounce" duration={2000} iterations={3}>
+        <div>Content</div>
+      </Animation>
+    );
+    const element = container.querySelector('wa-animation');
+    expect(element?.getAttribute('name')).toBe('bounce');
+    expect(element?.getAttribute('duration')).toBe('2000');
+  });
+});

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

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

package/templates/react/Animation/Animation.tsx.hbs

@@ -0,0 +1,127 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Animation.css';
+
+/**
+ * {{description}}
+ *
+ * @example
+ * ```tsx
+ * // Using built-in animations
+ * <Animation name="bounce" duration={2000} play>
+ *   <div className="box">Bouncing!</div>
+ * </Animation>
+ *
+ * // Using ref methods
+ * const animRef = useRef<AnimationRef>(null);
+ * <button onClick={() => animRef.current?.cancel()}>Cancel</button>
+ * <Animation ref={animRef} name="pulse" iterations={3}>
+ *   <div>Content</div>
+ * </Animation>
+ * ```
+ */
+export interface AnimationProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** The name of the built-in animation to use */
+  name?: string;
+  /** Plays the animation. When omitted, the animation will be paused */
+  play?: boolean;
+  /** The number of milliseconds to delay the start of the animation */
+  delay?: number;
+  /** Determines the direction of playback */
+  direction?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
+  /** The number of milliseconds each iteration takes to complete */
+  duration?: number;
+  /** The easing function to use */
+  easing?: string;
+  /** The number of milliseconds to delay after the active period */
+  'end-delay'?: number;
+  /** Sets how the animation applies styles before and after execution */
+  fill?: 'auto' | 'backwards' | 'both' | 'forwards' | 'none';
+  /** The number of iterations to run before completing */
+  iterations?: number;
+  /** The offset at which to start the animation */
+  'iteration-start'?: number;
+  /** Sets the animation's playback rate */
+  'playback-rate'?: number;
+  /** Event fired when the animation is canceled */
+  onCancel?: (event: CustomEvent) => void;
+  /** Event fired when the animation finishes */
+  onFinish?: (event: CustomEvent) => void;
+  /** Event fired when the animation starts or restarts */
+  onStart?: (event: CustomEvent) => void;
+}
+
+export interface AnimationRef {
+  cancel: () => void;
+  finish: () => void;
+  element: HTMLElement | null;
+}
+
+export const Animation = forwardRef<AnimationRef, AnimationProps>(
+  ({ children, className, onCancel, onFinish, onStart, ...props }, ref) => {
+    const animationRef = useRef<HTMLElement & {
+      cancel?: () => void;
+      finish?: () => void;
+    }>(null);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        cancel: () => {
+          if (animationRef.current && typeof animationRef.current.cancel === 'function') {
+            animationRef.current.cancel();
+          }
+        },
+        finish: () => {
+          if (animationRef.current && typeof animationRef.current.finish === 'function') {
+            animationRef.current.finish();
+          }
+        },
+        get element() {
+          return animationRef.current;
+        },
+      }),
+      []
+    );
+
+    useEffect(() => {
+      const el = animationRef.current;
+      if (!el) return;
+
+      const handleCancel = (e: Event) => {
+        if (onCancel) onCancel(e as CustomEvent);
+      };
+
+      const handleFinish = (e: Event) => {
+        if (onFinish) onFinish(e as CustomEvent);
+      };
+
+      const handleStart = (e: Event) => {
+        if (onStart) onStart(e as CustomEvent);
+      };
+
+      el.addEventListener('wa-cancel', handleCancel);
+      el.addEventListener('wa-finish', handleFinish);
+      el.addEventListener('wa-start', handleStart);
+
+      return () => {
+        el.removeEventListener('wa-cancel', handleCancel);
+        el.removeEventListener('wa-finish', handleFinish);
+        el.removeEventListener('wa-start', handleStart);
+      };
+    }, [onCancel, onFinish, onStart]);
+
+    return (
+      <wa-animation
+        ref={animationRef}
+        class={clsx('Animation', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-animation>
+    );
+  }
+);
+
+Animation.displayName = 'Animation';

package/templates/react/Avatar/Avatar.css.hbs

@@ -0,0 +1,20 @@
+/**
+ * Avatar Component Styles
+ * Documentation: https://webawesome.com/docs/components/avatar
+ *
+ * CSS Custom Properties:
+ * - --size: The size of the avatar
+ *
+ * CSS Parts:
+ * - icon: The container that wraps the avatar's icon
+ * - initials: The container that wraps the avatar's initials
+ * - image: The avatar image. Only shown when the image attribute is set
+ *
+ * @example
+ * .Avatar::part(icon) {
+ *   // Custom styles
+ * }
+ */
+.Avatar {
+  /* Add your custom styles here */
+}

package/templates/react/Avatar/Avatar.jsx.hbs

@@ -0,0 +1,65 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Avatar.css';
+
+/**
+ * {{description}}
+ *
+ * @example
+ * ```jsx
+ * // With image
+ * <Avatar image="https://example.com/avatar.jpg" label="User avatar" />
+ *
+ * // With initials
+ * <Avatar initials="JD" label="John Doe" />
+ *
+ * // With custom icon
+ * <Avatar label="Settings">
+ *   <wa-icon slot="icon" name="gear" />
+ * </Avatar>
+ * ```
+ *
+ * @typedef {Object} AvatarProps
+ * @property {string} [image] - The image source to use for the avatar
+ * @property {string} label - A label for assistive devices (required)
+ * @property {string} [initials] - Initials to use as fallback
+ * @property {string} [loading] - How the browser should load the image
+ * @property {string} [shape] - The shape of the avatar
+ * @property {function} [onError] - Event fired when image fails to load
+ */
+
+export const Avatar = React.forwardRef(
+  ({ children, className, onError, ...props }, ref) => {
+    const elementRef = React.useRef(null);
+
+    React.useImperativeHandle(ref, () => elementRef.current, []);
+
+    React.useEffect(() => {
+      const el = elementRef.current;
+      if (!el || !onError) return;
+
+      const handleError = (e) => {
+        onError(e);
+      };
+
+      el.addEventListener('wa-error', handleError);
+
+      return () => {
+        el.removeEventListener('wa-error', handleError);
+      };
+    }, [onError]);
+
+    return (
+      <wa-avatar
+        ref={elementRef}
+        class={clsx('Avatar', className)}
+        {...props}
+      >
+        {children}
+      </wa-avatar>
+    );
+  }
+);
+
+Avatar.displayName = 'Avatar';

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

@@ -0,0 +1,33 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { Avatar } from './Avatar';
+
+describe('Avatar', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<Avatar label="User avatar" />);
+    expect(container.querySelector('wa-avatar')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(
+      <Avatar label="User" className="custom-class" />
+    );
+    const element = container.querySelector('wa-avatar');
+    expect(element?.getAttribute('class')).toContain('custom-class');
+  });
+
+  it('passes image and label props', () => {
+    const { container } = render(
+      <Avatar image="avatar.jpg" label="John Doe" />
+    );
+    const element = container.querySelector('wa-avatar');
+    expect(element?.getAttribute('image')).toBe('avatar.jpg');
+    expect(element?.getAttribute('label')).toBe('John Doe');
+  });
+
+  it('passes initials prop', () => {
+    const { container } = render(<Avatar initials="JD" label="John Doe" />);
+    const element = container.querySelector('wa-avatar');
+    expect(element?.getAttribute('initials')).toBe('JD');
+  });
+});

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

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

package/templates/react/Avatar/Avatar.tsx.hbs

@@ -0,0 +1,71 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Avatar.css';
+
+/**
+ * {{description}}
+ *
+ * @example
+ * ```tsx
+ * // With image
+ * <Avatar image="https://example.com/avatar.jpg" label="User avatar" />
+ *
+ * // With initials
+ * <Avatar initials="JD" label="John Doe" />
+ *
+ * // With custom icon
+ * <Avatar label="Settings">
+ *   <wa-icon slot="icon" name="gear" />
+ * </Avatar>
+ * ```
+ */
+export interface AvatarProps extends Omit<HTMLAttributes<HTMLElement>, 'onError' | 'dir'> {
+  /** The image source to use for the avatar */
+  image?: string;
+  /** A label to use to describe the avatar to assistive devices */
+  label: string;
+  /** Initials to use as a fallback when no image is available */
+  initials?: string;
+  /** Indicates how the browser should load the image */
+  loading?: 'eager' | 'lazy';
+  /** The shape of the avatar */
+  shape?: 'circle' | 'square' | 'rounded';
+  /** Event fired when the image could not be loaded */
+  onError?: (event: CustomEvent) => void;
+}
+
+export const Avatar = forwardRef<HTMLElement, AvatarProps>(
+  ({ children, className, onError, ...props }, ref) => {
+    const elementRef = useRef<HTMLElement>(null);
+
+    useImperativeHandle(ref, () => elementRef.current as HTMLElement, []);
+
+    useEffect(() => {
+      const el = elementRef.current;
+      if (!el || !onError) return;
+
+      const handleError = (e: Event) => {
+        onError(e as CustomEvent);
+      };
+
+      el.addEventListener('wa-error', handleError);
+
+      return () => {
+        el.removeEventListener('wa-error', handleError);
+      };
+    }, [onError]);
+
+    return (
+      <wa-avatar
+        ref={elementRef}
+        class={clsx('Avatar', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-avatar>
+    );
+  }
+);
+
+Avatar.displayName = 'Avatar';