kigumi 0.2.0

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

@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { Drawer } from './Drawer';
+
+describe('Drawer', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<Drawer label="Test" />);
+    expect(container.querySelector('wa-drawer')).toBeInTheDocument();
+  });
+
+  it('exposes ref methods', () => {
+    const ref = React.createRef();
+    render(<Drawer ref={ref} label="Test" />);
+    expect(ref.current).toHaveProperty('show');
+    expect(ref.current).toHaveProperty('hide');
+  });
+
+  it('renders children', () => {
+    const { getByText } = render(
+      <Drawer label="Test">
+        Content here
+      </Drawer>
+    );
+    expect(getByText('Content here')).toBeInTheDocument();
+  });
+});

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

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

package/templates/react/Drawer/Drawer.tsx.hbs

@@ -0,0 +1,99 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Drawer.css';
+
+export interface DrawerProps extends Omit<HTMLAttributes<HTMLElement>, 'onLoad' | 'dir'> {
+  /** Indicates whether or not the drawer is open */
+  open?: boolean;
+  /** The drawer's label as displayed in the header */
+  label?: string;
+  /** The direction from which the drawer will open */
+  placement?: 'top' | 'end' | 'bottom' | 'start';
+  /** When enabled, the drawer will be closed when the user clicks outside of it */
+  'light-dismiss'?: boolean;
+  /** Disables the header and removes the default close button */
+  'without-header'?: boolean;
+  /** Event fired when the drawer is shown */
+  onShow?: (event: CustomEvent) => void;
+  /** Event fired after the drawer is shown */
+  onAfterShow?: (event: CustomEvent) => void;
+  /** Event fired when the drawer is about to hide */
+  onHide?: (event: CustomEvent) => void;
+  /** Event fired after the drawer is hidden */
+  onAfterHide?: (event: CustomEvent) => void;
+}
+
+export interface DrawerRef {
+  show: () => void;
+  hide: () => void;
+  element: HTMLElement | null;
+}
+
+export const Drawer = forwardRef<DrawerRef, DrawerProps>(
+  ({ children, className, open, onShow, onAfterShow, onHide, onAfterHide, ...props }, ref) => {
+    const drawerRef = useRef<HTMLElement & {
+      show?: () => void;
+      hide?: () => void;
+      open?: boolean;
+    }>(null);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        show: () => drawerRef.current?.show?.(),
+        hide: () => drawerRef.current?.hide?.(),
+        get element() {
+          return drawerRef.current;
+        },
+      }),
+      []
+    );
+
+    useEffect(() => {
+      const el = drawerRef.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 = drawerRef.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-drawer
+        ref={drawerRef}
+        class={clsx('Drawer', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-drawer>
+    );
+  }
+);
+
+Drawer.displayName = 'Drawer';

package/templates/react/Dropdown/Dropdown.css.hbs

@@ -0,0 +1,20 @@
+/**
+ * Dropdown Component Styles
+ * Documentation: https://webawesome.com/docs/components/dropdown
+ *
+ * CSS Custom Properties:
+ * - --show-duration: The duration of the show animation
+ * - --hide-duration: The duration of the hide animation
+ *
+ * CSS Parts:
+ * - base: The component's host element
+ * - menu: The dropdown menu container
+ *
+ * @example
+ * .Dropdown::part(menu) {
+ *   // Custom styles
+ * }
+ */
+.Dropdown {
+  /* Add your custom styles here */
+}

package/templates/react/Dropdown/Dropdown.jsx.hbs

@@ -0,0 +1,78 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Dropdown.css';
+
+/**
+ * @typedef {Object} DropdownRef
+ * @property {() => void} show
+ * @property {() => void} hide
+ * @property {HTMLElement | null} element
+ */
+
+export const Dropdown = React.forwardRef(
+  ({ children, className, open, onShow, onAfterShow, onHide, onAfterHide, onSelect, ...props }, ref) => {
+    const dropdownRef = React.useRef(null);
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        show: () => dropdownRef.current?.show?.(),
+        hide: () => dropdownRef.current?.hide?.(),
+        get element() {
+          return dropdownRef.current;
+        },
+      }),
+      []
+    );
+
+    React.useEffect(() => {
+      const el = dropdownRef.current;
+      if (!el || open === undefined) return;
+
+      const isOpen = el.open ?? false;
+      if (open && !isOpen) {
+        el.show?.();
+      } else if (!open && isOpen) {
+        el.hide?.();
+      }
+    }, [open]);
+
+    React.useEffect(() => {
+      const el = dropdownRef.current;
+      if (!el) return;
+
+      const handleShow = (e) => onShow?.(e);
+      const handleAfterShow = (e) => onAfterShow?.(e);
+      const handleHide = (e) => onHide?.(e);
+      const handleAfterHide = (e) => onAfterHide?.(e);
+      const handleSelect = (e) => onSelect?.(e);
+
+      el.addEventListener('wa-show', handleShow);
+      el.addEventListener('wa-after-show', handleAfterShow);
+      el.addEventListener('wa-hide', handleHide);
+      el.addEventListener('wa-after-hide', handleAfterHide);
+      el.addEventListener('wa-select', handleSelect);
+
+      return () => {
+        el.removeEventListener('wa-show', handleShow);
+        el.removeEventListener('wa-after-show', handleAfterShow);
+        el.removeEventListener('wa-hide', handleHide);
+        el.removeEventListener('wa-after-hide', handleAfterHide);
+        el.removeEventListener('wa-select', handleSelect);
+      };
+    }, [onShow, onAfterShow, onHide, onAfterHide, onSelect]);
+
+    return (
+      <wa-dropdown
+        ref={dropdownRef}
+        class={clsx('Dropdown', className)}
+        {...props}
+      >
+        {children}
+      </wa-dropdown>
+    );
+  }
+);
+
+Dropdown.displayName = 'Dropdown';

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

@@ -0,0 +1,18 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { Dropdown } from './Dropdown';
+
+describe('Dropdown', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<Dropdown />);
+    expect(container.querySelector('wa-dropdown')).toBeInTheDocument();
+  });
+
+  it('exposes ref methods', () => {
+    const ref = React.createRef();
+    render(<Dropdown ref={ref} />);
+    expect(ref.current).toHaveProperty('show');
+    expect(ref.current).toHaveProperty('hide');
+  });
+});

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

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

package/templates/react/Dropdown/Dropdown.tsx.hbs

@@ -0,0 +1,104 @@
+import { forwardRef, useRef, useImperativeHandle, useEffect, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './Dropdown.css';
+
+export interface DropdownProps extends Omit<HTMLAttributes<HTMLElement>, 'dir' | 'onSelect'> {
+  /** Opens or closes the dropdown */
+  open?: boolean;
+  /** The placement of the dropdown menu */
+  placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+  /** The dropdown's size */
+  size?: 'small' | 'medium' | 'large';
+  /** The distance of the dropdown menu from its trigger */
+  distance?: number;
+  /** The offset of the dropdown menu along its trigger */
+  skidding?: number;
+  /** Event fired when the dropdown is shown */
+  onShow?: (event: CustomEvent) => void;
+  /** Event fired after the dropdown is shown */
+  onAfterShow?: (event: CustomEvent) => void;
+  /** Event fired when the dropdown is about to hide */
+  onHide?: (event: CustomEvent) => void;
+  /** Event fired after the dropdown is hidden */
+  onAfterHide?: (event: CustomEvent) => void;
+  /** Event fired when an item is selected */
+  onSelect?: (event: CustomEvent) => void;
+}
+
+export interface DropdownRef {
+  show: () => void;
+  hide: () => void;
+  element: HTMLElement | null;
+}
+
+export const Dropdown = forwardRef<DropdownRef, DropdownProps>(
+  ({ children, className, open, onShow, onAfterShow, onHide, onAfterHide, onSelect, ...props }, ref) => {
+    const dropdownRef = useRef<HTMLElement & {
+      show?: () => void;
+      hide?: () => void;
+      open?: boolean;
+    }>(null);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        show: () => dropdownRef.current?.show?.(),
+        hide: () => dropdownRef.current?.hide?.(),
+        get element() {
+          return dropdownRef.current;
+        },
+      }),
+      []
+    );
+
+    useEffect(() => {
+      const el = dropdownRef.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 = dropdownRef.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);
+      const handleSelect = (e: Event) => onSelect?.(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);
+      el.addEventListener('wa-select', handleSelect);
+
+      return () => {
+        el.removeEventListener('wa-show', handleShow);
+        el.removeEventListener('wa-after-show', handleAfterShow);
+        el.removeEventListener('wa-hide', handleHide);
+        el.removeEventListener('wa-after-hide', handleAfterHide);
+        el.removeEventListener('wa-select', handleSelect);
+      };
+    }, [onShow, onAfterShow, onHide, onAfterHide, onSelect]);
+
+    return (
+      <wa-dropdown
+        ref={dropdownRef}
+        class={clsx('Dropdown', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-dropdown>
+    );
+  }
+);
+
+Dropdown.displayName = 'Dropdown';

package/templates/react/DropdownItem/DropdownItem.css.hbs

@@ -0,0 +1,23 @@
+/**
+ * DropdownItem Component Styles
+ * Documentation: https://webawesome.com/docs/components/dropdown-item
+ *
+ * CSS Custom Properties:
+ * (No custom properties defined for this component)
+ *
+ * CSS Parts:
+ * - checkmark: The checkmark icon (a <wa-icon> element) when the item is a checkbox
+ * - icon: The container for the icon slot
+ * - label: The container for the label slot
+ * - details: The container for the details slot
+ * - submenu-icon: The submenu indicator icon (a <wa-icon> element)
+ * - submenu: The submenu container
+ *
+ * @example
+ * .DropdownItem::part(label) {
+ *   // Custom styles
+ * }
+ */
+.DropdownItem {
+  /* Add your custom styles here */
+}

package/templates/react/DropdownItem/DropdownItem.jsx.hbs

@@ -0,0 +1,41 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './DropdownItem.css';
+
+/**
+ * @typedef {Object} DropdownItemRef
+ * @property {() => void} openSubmenu
+ * @property {() => void} closeSubmenu
+ * @property {HTMLElement | null} element
+ */
+
+export const DropdownItem = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const itemRef = React.useRef(null);
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        openSubmenu: () => itemRef.current?.openSubmenu?.(),
+        closeSubmenu: () => itemRef.current?.closeSubmenu?.(),
+        get element() {
+          return itemRef.current;
+        },
+      }),
+      []
+    );
+
+    return (
+      <wa-dropdown-item
+        ref={itemRef}
+        class={clsx('DropdownItem', className)}
+        {...props}
+      >
+        {children}
+      </wa-dropdown-item>
+    );
+  }
+);
+
+DropdownItem.displayName = 'DropdownItem';

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

@@ -0,0 +1,18 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { DropdownItem } from './DropdownItem';
+
+describe('DropdownItem', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<DropdownItem>Item</DropdownItem>);
+    expect(container.querySelector('wa-dropdown-item')).toBeInTheDocument();
+  });
+
+  it('exposes ref methods', () => {
+    const ref = React.createRef();
+    render(<DropdownItem ref={ref}>Item</DropdownItem>);
+    expect(ref.current).toHaveProperty('openSubmenu');
+    expect(ref.current).toHaveProperty('closeSubmenu');
+  });
+});

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

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

package/templates/react/DropdownItem/DropdownItem.tsx.hbs

@@ -0,0 +1,56 @@
+import { forwardRef, useRef, useImperativeHandle, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './DropdownItem.css';
+
+export interface DropdownItemProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** The dropdown item's type */
+  type?: 'normal' | 'checkbox';
+  /** Set to true to check the dropdown item (only valid when type is checkbox) */
+  checked?: boolean;
+  /** Disables the dropdown item */
+  disabled?: boolean;
+  /** An optional value for the menu item */
+  value?: string;
+  /** The type of menu item to render */
+  variant?: 'default' | 'danger';
+}
+
+export interface DropdownItemRef {
+  openSubmenu: () => void;
+  closeSubmenu: () => void;
+  element: HTMLElement | null;
+}
+
+export const DropdownItem = forwardRef<DropdownItemRef, DropdownItemProps>(
+  ({ children, className, ...props }, ref) => {
+    const itemRef = useRef<HTMLElement & {
+      openSubmenu?: () => void;
+      closeSubmenu?: () => void;
+    }>(null);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        openSubmenu: () => itemRef.current?.openSubmenu?.(),
+        closeSubmenu: () => itemRef.current?.closeSubmenu?.(),
+        get element() {
+          return itemRef.current;
+        },
+      }),
+      []
+    );
+
+    return (
+      <wa-dropdown-item
+        ref={itemRef}
+        class={clsx('DropdownItem', className)}
+        {...(props as Record<string, unknown>)}
+      >
+        {children}
+      </wa-dropdown-item>
+    );
+  }
+);
+
+DropdownItem.displayName = 'DropdownItem';

package/templates/react/FormatBytes/FormatBytes.css.hbs

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

package/templates/react/FormatBytes/FormatBytes.jsx.hbs

@@ -0,0 +1,25 @@
+import React from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './FormatBytes.css';
+
+/**
+ * @typedef {Object} FormatBytesProps
+ * @property {number} value - The number to format in bytes
+ * @property {'byte' | 'bit'} [unit] - The type of unit to display
+ * @property {'long' | 'short' | 'narrow'} [display] - Determines how to display the result
+ */
+
+export const FormatBytes = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return (
+      <wa-format-bytes
+        ref={ref}
+        class={clsx('FormatBytes', className)}
+        {...props}
+      />
+    );
+  }
+);
+
+FormatBytes.displayName = 'FormatBytes';

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

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

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

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

package/templates/react/FormatBytes/FormatBytes.tsx.hbs

@@ -0,0 +1,27 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import '{{{importPath}}}';
+import './FormatBytes.css';
+
+export interface FormatBytesProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
+  /** The number to format in bytes */
+  value: number;
+  /** The type of unit to display */
+  unit?: 'byte' | 'bit';
+  /** Determines how to display the result */
+  display?: 'long' | 'short' | 'narrow';
+}
+
+export const FormatBytes = forwardRef<HTMLElement, FormatBytesProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <wa-format-bytes
+        ref={ref}
+        class={clsx('FormatBytes', className)}
+        {...(props as Record<string, unknown>)}
+      />
+    );
+  }
+);
+
+FormatBytes.displayName = 'FormatBytes';

package/templates/react/FormatDate/FormatDate.css.hbs

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