kigumi 0.19.2 → 0.20.0

package/templates/react/FormatDate/FormatDate.tsx

@@ -0,0 +1,117 @@
+import {
+  forwardRef,
+  useRef,
+  useCallback,
+  useImperativeHandle,
+  useEffect,
+  type HTMLAttributes,
+} from 'react';
+import clsx from 'clsx';
+import type WaFormatDate from '@awesome.me/webawesome/dist/components/format-date/format-date.js';
+import './FormatDate.css';
+
+let loadPromise: Promise<unknown> | null = null;
+function ensureLoaded() {
+  return (loadPromise ??=
+    import('@awesome.me/webawesome/dist/components/format-date/format-date.js'));
+}
+
+/**
+ * Formats a date/time using the Intl.DateTimeFormat API
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <FormatDate />
+ *
+ * // With event handlers
+ * <FormatDate />
+ *
+ * ```
+ */
+export interface FormatDateProps extends Omit<
+  HTMLAttributes<HTMLElement>,
+  'dir'
+> {
+  /** The date/time to format */
+  date?: string;
+
+  /** How to display the weekday */
+  weekday?: 'narrow' | 'short' | 'long';
+
+  /** How to display the era */
+  era?: 'narrow' | 'short' | 'long';
+
+  /** How to display the year */
+  year?: 'numeric' | '2-digit';
+
+  /** How to display the month */
+  month?: 'numeric' | '2-digit' | 'narrow' | 'short' | 'long';
+
+  /** How to display the day */
+  day?: 'numeric' | '2-digit';
+
+  /** How to display the hour */
+  hour?: 'numeric' | '2-digit';
+
+  /** How to display the minute */
+  minute?: 'numeric' | '2-digit';
+
+  /** How to display the second */
+  second?: 'numeric' | '2-digit';
+
+  /** 12 or 24 hour format */
+  'hour-format'?: 'auto' | '12' | '24';
+
+  /** How to display the time zone */
+  'time-zone-name'?: 'short' | 'long';
+
+  /** The time zone to use */
+  'time-zone'?: string;
+
+  /** The locale to use when formatting */
+  lang?: string;
+}
+
+export interface FormatDateRef {
+  /** Reference to the underlying HTML element */
+  element: WaFormatDate | null;
+}
+
+export const FormatDate = forwardRef<FormatDateRef, FormatDateProps>(
+  ({ children, className, ...props }, ref) => {
+    const formatdateRef = useRef<WaFormatDate | null>(null);
+    const setFormatDateRef = useCallback((el: WaFormatDate | null) => {
+      formatdateRef.current = el;
+    }, []);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        get element() {
+          return formatdateRef.current;
+        },
+      }),
+      []
+    );
+
+    useEffect(() => {
+      ensureLoaded();
+    }, []);
+
+    return (
+      <wa-format-date
+        ref={setFormatDateRef}
+        class={clsx('FormatDate', className)}
+        {...({ suppressHydrationWarning: true, ...props } as Record<
+          string,
+          unknown
+        >)}
+      >
+        {children}
+      </wa-format-date>
+    );
+  }
+);
+
+FormatDate.displayName = 'FormatDate';

package/templates/react/FormatNumber/FormatNumber.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import clsx from 'clsx';
+import './FormatNumber.css';
+
+let loadPromise = null;
+function ensureLoaded() {
+  return (loadPromise ??=
+    import('@awesome.me/webawesome/dist/components/format-number/format-number.js'));
+}
+
+export const FormatNumber = React.forwardRef(({ className, ...props }, ref) => {
+  React.useEffect(() => {
+    ensureLoaded();
+  }, []);
+
+  return (
+    <wa-format-number
+      ref={ref}
+      class={clsx('FormatNumber', className)}
+      {...props}
+    />
+  );
+});
+
+FormatNumber.displayName = 'FormatNumber';

package/templates/react/FormatNumber/FormatNumber.test.jsx

@@ -0,0 +1,19 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { FormatNumber } from './FormatNumber';
+
+describe('FormatNumber', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<FormatNumber value={1000} />);
+    expect(container.querySelector('wa-format-number')).toBeInTheDocument();
+  });
+
+  it('applies value prop', () => {
+    const { container } = render(<FormatNumber value={2500} />);
+    expect(container.querySelector('wa-format-number')).toHaveAttribute(
+      'value',
+      '2500'
+    );
+  });
+});

package/templates/react/FormatNumber/FormatNumber.test.tsx

@@ -0,0 +1,16 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { FormatNumber } from './FormatNumber';
+
+describe('FormatNumber', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<FormatNumber />);
+    expect(container.querySelector('wa-format-number')).toBeTruthy();
+  });
+
+  it('applies custom className to the underlying wa-format-number', () => {
+    const { container } = render(<FormatNumber className="custom-class" />);
+    const element = container.querySelector('wa-format-number');
+    expect(element?.getAttribute('class')).toContain('custom-class');
+  });
+});

package/templates/react/FormatNumber/FormatNumber.tsx

@@ -0,0 +1,111 @@
+import {
+  forwardRef,
+  useRef,
+  useCallback,
+  useImperativeHandle,
+  useEffect,
+  type HTMLAttributes,
+} from 'react';
+import clsx from 'clsx';
+import type WaFormatNumber from '@awesome.me/webawesome/dist/components/format-number/format-number.js';
+import './FormatNumber.css';
+
+let loadPromise: Promise<unknown> | null = null;
+function ensureLoaded() {
+  return (loadPromise ??=
+    import('@awesome.me/webawesome/dist/components/format-number/format-number.js'));
+}
+
+/**
+ * Formats a number using the Intl.NumberFormat API
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <FormatNumber />
+ *
+ * // With event handlers
+ * <FormatNumber />
+ *
+ * ```
+ */
+export interface FormatNumberProps extends Omit<
+  HTMLAttributes<HTMLElement>,
+  'dir'
+> {
+  /** The number to format */
+  value?: number;
+
+  /** The formatting style */
+  type?: 'currency' | 'decimal' | 'percent';
+
+  /** The currency to use (ISO 4217) */
+  currency?: string;
+
+  /** How to display the currency */
+  'currency-display'?: 'symbol' | 'narrowSymbol' | 'code' | 'name';
+
+  /** Minimum integer digits */
+  'minimum-integer-digits'?: number;
+
+  /** Minimum fraction digits */
+  'minimum-fraction-digits'?: number;
+
+  /** Maximum fraction digits */
+  'maximum-fraction-digits'?: number;
+
+  /** Minimum significant digits */
+  'minimum-significant-digits'?: number;
+
+  /** Maximum significant digits */
+  'maximum-significant-digits'?: number;
+
+  /** Disables grouping separators */
+  'without-grouping'?: boolean;
+
+  /** The locale to use when formatting */
+  lang?: string;
+}
+
+export interface FormatNumberRef {
+  /** Reference to the underlying HTML element */
+  element: WaFormatNumber | null;
+}
+
+export const FormatNumber = forwardRef<FormatNumberRef, FormatNumberProps>(
+  ({ children, className, ...props }, ref) => {
+    const formatnumberRef = useRef<WaFormatNumber | null>(null);
+    const setFormatNumberRef = useCallback((el: WaFormatNumber | null) => {
+      formatnumberRef.current = el;
+    }, []);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        get element() {
+          return formatnumberRef.current;
+        },
+      }),
+      []
+    );
+
+    useEffect(() => {
+      ensureLoaded();
+    }, []);
+
+    return (
+      <wa-format-number
+        ref={setFormatNumberRef}
+        class={clsx('FormatNumber', className)}
+        {...({ suppressHydrationWarning: true, ...props } as Record<
+          string,
+          unknown
+        >)}
+      >
+        {children}
+      </wa-format-number>
+    );
+  }
+);
+
+FormatNumber.displayName = 'FormatNumber';

package/templates/react/Icon/Icon.css

@@ -0,0 +1,38 @@
+/**
+ * Icon Component Styles
+ * Documentation: https://webawesome.com/docs/components/icon
+ *
+ * CSS Custom Properties:
+ * - --animation-delay: Sets when the animation will start. (default: 0)
+ * - --animation-direction: Defines whether or not the animation should play in reverse on alternate cycles. (default: normal)
+ * - --animation-duration: Defines the length of time that an animation takes to complete one cycle. (default: 1s)
+ * - --animation-iteration-count: Defines the number of times an animation cycle is played. (default: infinite)
+ * - --animation-timing: Describes how the animation will progress over one cycle of its duration.
+ * - --beat-fade-opacity: Set lowest opacity value an icon with `beat-fade` animation will fade to and from.
+ * - --beat-fade-scale: Set max value that an icon with `beat-fade` animation will scale.
+ * - --beat-scale: Set max value that an icon with `beat` animation will scale.
+ * - --bounce-height: Set the max height an icon with `bounce` animation will jump to when bouncing.
+ * - --bounce-jump-scale-x: Set the icon’s horizontal distortion (“squish”) at the top of the jump.
+ * - --bounce-jump-scale-y: Set the icon’s vertical distortion (“squish”) at the top of the jump.
+ * - --bounce-land-scale-x: Set the icon’s horizontal distortion (“squish”) when landing after the jump.
+ * - --bounce-land-scale-y: Set the icon’s vertical distortion (“squish”) when landing after the jump.
+ * - --bounce-rebound: Set the amount of rebound an icon with `bounce` animation has when landing after the jump.
+ * - --bounce-start-scale-x: Set the icon’s horizontal distortion (“squish”) when starting to bounce.
+ * - --bounce-start-scale-y: Set the icon’s vertical distortion (“squish”) when starting to bounce.
+ * - --fade-opacity: Set lowest opacity value an icon with `fade` animation will fade to and from.
+ * - --flip-angle: Set rotation angle of flip for an icon with `flip` animation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.
+ * - --flip-x: Set x-coordinate of the vector denoting the axis of rotation (between 0 and 1) for an icon with `flip` animation.
+ * - --flip-y: Set y-coordinate of the vector denoting the axis of rotation (between 0 and 1) for an icon with `flip` animation.
+ * - --flip-z: Set z-coordinate of the vector denoting the axis of rotation (between 0 and 1) for an icon with `flip` animation.
+ * - --primary-color: Sets a duotone icon's primary color. (default: currentColor)
+ * - --primary-opacity: Sets a duotone icon's primary opacity. (default: 1)
+ * - --secondary-color: Sets a duotone icon's secondary color. (default: currentColor)
+ * - --secondary-opacity: Sets a duotone icon's secondary opacity. (default: 0.4)
+ *
+ * CSS Parts:
+ * - svg: The internal SVG element.
+ * - use: The `<use>` element generated when using `spriteSheet: true`
+ */
+.Icon {
+  /* Add your custom styles here */
+}

package/templates/react/Icon/Icon.jsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import clsx from 'clsx';
+import './Icon.css';
+
+let loadPromise = null;
+function ensureLoaded() {
+  return (loadPromise ??=
+    import('@awesome.me/webawesome/dist/components/icon/icon.js'));
+}
+
+/**
+ * Icons are symbols that can be used to represent various options within an application
+ *
+ * @example
+ * ```jsx
+ * // Basic usage
+ * <Icon name="star" />
+ * <Icon name="heart" variant="solid" />
+ * <Icon name="github" family="brands" />
+ *
+ * // With label for accessibility
+ * <Icon name="star" label="Favorite" />
+ *
+ * // Sizing (use CSS or className for sizing)
+ * <Icon name="bell" className="icon-large" />
+ *
+ * // Custom icon
+ * <Icon src="/path/to/icon.svg" label="Custom icon" />
+ *
+ * // With event handlers
+ * <Icon
+ *   name="image"
+ *   onLoad={() => console.log('Icon loaded')}
+ *   onError={() => console.log('Icon failed to load')}
+ * />
+ * ```
+ *
+ * @typedef {Object} IconProps
+ * @property {string} [name] - The name of the icon to draw
+ * @property {string} [library] - The name of a registered custom icon library
+ * @property {string} [src] - An external URL of an SVG file
+ * @property {string} [label] - An alternate description for assistive devices
+ * @property {string} [family] - The family of icons (classic, brands, sharp, duotone, sharp-duotone)
+ * @property {string} [variant] - The icon's variant (thin, light, regular, solid)
+ * @property {boolean} [auto-width] - Sets width to match SVG viewBox
+ * @property {boolean} [swap-opacity] - Swaps opacity of duotone icons
+ * @property {number} [rotate] - Rotate the icon by this many degrees
+ * @property {string} [flip] - Flip: horizontal | vertical | both
+ * @property {string} [animation] - Built-in animation name to apply
+ * @property {function} [onLoad] - Event fired when icon loads
+ * @property {function} [onError] - Event fired when icon fails to load
+ */
+
+export const Icon = React.forwardRef(
+  ({ className, onLoad, onError, ...props }, ref) => {
+    const elementRef = React.useRef(null);
+
+    React.useImperativeHandle(ref, () => elementRef.current, []);
+
+    React.useEffect(() => {
+      ensureLoaded();
+      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-icon ref={elementRef} class={clsx('Icon', className)} {...props} />
+    );
+  }
+);
+
+Icon.displayName = 'Icon';

package/templates/react/Icon/Icon.test.jsx

@@ -0,0 +1,37 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { Icon } from './Icon';
+
+describe('Icon', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<Icon name="star" />);
+    expect(container.querySelector('wa-icon')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<Icon name="star" className="custom-class" />);
+    const element = container.querySelector('wa-icon');
+    expect(element?.getAttribute('class')).toContain('custom-class');
+  });
+
+  it('passes name prop', () => {
+    const { container } = render(<Icon name="heart" />);
+    const element = container.querySelector('wa-icon');
+    expect(element?.getAttribute('name')).toBe('heart');
+  });
+
+  it('passes variant and family props', () => {
+    const { container } = render(
+      <Icon name="star" variant="solid" family="classic" />
+    );
+    const element = container.querySelector('wa-icon');
+    expect(element?.getAttribute('variant')).toBe('solid');
+    expect(element?.getAttribute('family')).toBe('classic');
+  });
+
+  it('passes label prop for accessibility', () => {
+    const { container } = render(<Icon name="star" label="Favorite" />);
+    const element = container.querySelector('wa-icon');
+    expect(element?.getAttribute('label')).toBe('Favorite');
+  });
+});

package/templates/react/Icon/Icon.test.tsx

@@ -0,0 +1,16 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { Icon } from './Icon';
+
+describe('Icon', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<Icon />);
+    expect(container.querySelector('wa-icon')).toBeTruthy();
+  });
+
+  it('applies custom className to the underlying wa-icon', () => {
+    const { container } = render(<Icon className="custom-class" />);
+    const element = container.querySelector('wa-icon');
+    expect(element?.getAttribute('class')).toContain('custom-class');
+  });
+});

package/templates/react/Icon/Icon.tsx

@@ -0,0 +1,136 @@
+import {
+  forwardRef,
+  useRef,
+  useCallback,
+  useImperativeHandle,
+  useEffect,
+  type HTMLAttributes,
+} from 'react';
+import clsx from 'clsx';
+import type WaIcon from '@awesome.me/webawesome/dist/components/icon/icon.js';
+import './Icon.css';
+
+let loadPromise: Promise<unknown> | null = null;
+function ensureLoaded() {
+  return (loadPromise ??=
+    import('@awesome.me/webawesome/dist/components/icon/icon.js'));
+}
+
+/**
+ * Icons are symbols that can be used to represent various options within an application
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Icon />
+ *
+ * // With event handlers
+ * <Icon
+ *   onLoad={(e) => console.log(e)} />
+ *
+ * ```
+ */
+export interface IconProps extends Omit<
+  HTMLAttributes<HTMLElement>,
+  'onLoad' | 'onError' | 'dir'
+> {
+  /** The name of the icon to draw */
+  name?: string;
+
+  /** The name of a registered custom icon library */
+  library?: string;
+
+  /** An external URL of an SVG file */
+  src?: string;
+
+  /** An alternate description for assistive devices */
+  label?: string;
+
+  /** The family of icons (classic, brands, sharp, duotone, sharp-duotone) */
+  family?: string;
+
+  /** The icon's variant (thin, light, regular, solid) */
+  variant?: string;
+
+  /** Sets the width to match the cropped SVG viewBox */
+  'auto-width'?: boolean;
+
+  /** Swaps the opacity of duotone icons */
+  'swap-opacity'?: boolean;
+
+  /** Rotate the icon by this many degrees */
+  rotate?: number;
+
+  /** Flip the icon horizontally, vertically, or both */
+  flip?: 'horizontal' | 'vertical' | 'both';
+
+  /** The name of a built-in animation to apply */
+  animation?: string;
+
+  /** Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit. */
+  onLoad?: (event: CustomEvent) => void;
+
+  /** Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit. */
+  onError?: (event: CustomEvent) => void;
+}
+
+export interface IconRef {
+  /** Reference to the underlying HTML element */
+  element: WaIcon | null;
+}
+
+export const Icon = forwardRef<IconRef, IconProps>(
+  ({ children, className, onLoad, onError, ...props }, ref) => {
+    const iconRef = useRef<WaIcon | null>(null);
+    const setIconRef = useCallback((el: WaIcon | null) => {
+      iconRef.current = el;
+    }, []);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        get element() {
+          return iconRef.current;
+        },
+      }),
+      []
+    );
+
+    useEffect(() => {
+      ensureLoaded();
+      const el = iconRef.current;
+      if (!el) return;
+
+      const handleWaLoad = (e: Event) => {
+        if (onLoad) onLoad(e as CustomEvent);
+      };
+
+      const handleWaError = (e: Event) => {
+        if (onError) onError(e as CustomEvent);
+      };
+
+      el.addEventListener('wa-load', handleWaLoad);
+      el.addEventListener('wa-error', handleWaError);
+
+      return () => {
+        el.removeEventListener('wa-load', handleWaLoad);
+        el.removeEventListener('wa-error', handleWaError);
+      };
+    }, [onLoad, onError]);
+
+    return (
+      <wa-icon
+        ref={setIconRef}
+        class={clsx('Icon', className)}
+        {...({ suppressHydrationWarning: true, ...props } as Record<
+          string,
+          unknown
+        >)}
+      >
+        {children}
+      </wa-icon>
+    );
+  }
+);
+
+Icon.displayName = 'Icon';

package/templates/react/Include/Include.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import clsx from 'clsx';
+import './Include.css';
+
+let loadPromise = null;
+function ensureLoaded() {
+  return (loadPromise ??=
+    import('@awesome.me/webawesome/dist/components/include/include.js'));
+}
+
+export const Include = React.forwardRef(
+  ({ className, onLoad, onIncludeError, ...props }, ref) => {
+    const includeRef = React.useRef(null);
+
+    React.useEffect(() => {
+      ensureLoaded();
+      const el = includeRef.current;
+      if (!el) return;
+
+      const handleLoad = (e) => onLoad?.(e);
+      const handleError = (e) => onIncludeError?.(e);
+
+      el.addEventListener('wa-load', handleLoad);
+      el.addEventListener('wa-include-error', handleError);
+
+      return () => {
+        el.removeEventListener('wa-load', handleLoad);
+        el.removeEventListener('wa-include-error', handleError);
+      };
+    }, [onLoad, onIncludeError]);
+
+    return (
+      <wa-include
+        ref={(node) => {
+          includeRef.current = node;
+          if (typeof ref === 'function') ref(node);
+          else if (ref) ref.current = node;
+        }}
+        class={clsx('Include', className)}
+        {...props}
+      />
+    );
+  }
+);
+
+Include.displayName = 'Include';

package/templates/react/Include/Include.test.jsx

@@ -0,0 +1,19 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { Include } from './Include';
+
+describe('Include', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<Include />);
+    expect(container.querySelector('wa-include')).toBeInTheDocument();
+  });
+
+  it('applies src prop', () => {
+    const { container } = render(<Include src="/content.html" />);
+    expect(container.querySelector('wa-include')).toHaveAttribute(
+      'src',
+      '/content.html'
+    );
+  });
+});