mokkun 0.1.5 → 0.2.0

package/dist/types/renderer/components/app-header.d.ts

@@ -0,0 +1,277 @@
+/**
+ * AppHeader Component
+ * アプリケーションヘッダーコンポーネント
+ *
+ * SmartHR Design System を参考に実装
+ * - Header（上部バー）: ロゴ、テナント切替、各種ボタン
+ * - AppNavi（下部バー）: アプリ名、ナビゲーション
+ */
+/**
+ * テナント情報
+ */
+export interface Tenant {
+    /** テナントID */
+    id: string;
+    /** テナント名 */
+    name: string;
+}
+/**
+ * ユーザー情報
+ */
+export interface UserInfo {
+    /** ユーザー名 */
+    name: string;
+    /** メールアドレス（オプション） */
+    email?: string;
+    /** アバターURL（オプション） */
+    avatarUrl?: string;
+}
+/**
+ * ナビゲーションアイテム
+ */
+export interface NavItem {
+    /** アイテムID */
+    id: string;
+    /** ラベル */
+    label: string;
+    /** リンク先URL */
+    href?: string;
+    /** アクティブ状態 */
+    active?: boolean;
+    /** 無効化 */
+    disabled?: boolean;
+    /** ドロップダウンメニュー */
+    dropdown?: NavDropdownItem[];
+}
+/**
+ * ドロップダウンメニューアイテム
+ */
+export interface NavDropdownItem {
+    /** アイテムID */
+    id: string;
+    /** ラベル */
+    label: string;
+    /** リンク先URL */
+    href?: string;
+    /** 区切り線 */
+    divider?: boolean;
+}
+/**
+ * アプリランチャーアイテム
+ */
+export interface AppLauncherItem {
+    /** アプリID */
+    id: string;
+    /** アプリ名 */
+    name: string;
+    /** アプリURL */
+    url: string;
+    /** アイコン（SVG HTML文字列） */
+    icon?: string;
+}
+/**
+ * AppHeaderの状態
+ */
+export interface AppHeaderState {
+    /** 現在のテナントID */
+    currentTenantId: string;
+    /** テナント切替ドロップダウンの開閉状態 */
+    tenantDropdownOpen: boolean;
+    /** ユーザードロップダウンの開閉状態 */
+    userDropdownOpen: boolean;
+    /** アプリランチャーの開閉状態 */
+    appLauncherOpen: boolean;
+    /** アクティブなナビゲーションID */
+    activeNavId: string | null;
+    /** ナビゲーションドロップダウンの開閉状態 */
+    navDropdownOpen: string | null;
+    /** モバイルメニューの開閉状態 */
+    mobileMenuOpen: boolean;
+}
+/**
+ * AppHeaderのコールバック
+ */
+export interface AppHeaderCallbacks {
+    /** テナント変更時 */
+    onTenantChange?: (tenantId: string) => void;
+    /** ナビゲーションクリック時 */
+    onNavClick?: (navId: string, href?: string) => void;
+    /** ドロップダウンアイテムクリック時 */
+    onDropdownItemClick?: (navId: string, itemId: string, href?: string) => void;
+    /** ユーザーメニュー項目クリック時 */
+    onUserMenuClick?: (action: 'profile' | 'settings' | 'logout') => void;
+    /** アプリランチャークリック時 */
+    onAppLauncherClick?: (appId: string, url: string) => void;
+    /** ヘルプクリック時 */
+    onHelpClick?: () => void;
+    /** ロゴクリック時 */
+    onLogoClick?: () => void;
+}
+/**
+ * AppHeaderの設定
+ */
+export interface AppHeaderConfig {
+    /** ロゴ（SVG HTML文字列） */
+    logo?: string;
+    /** ロゴの代替テキスト */
+    logoAlt?: string;
+    /** ロゴのリンク先 */
+    logoHref?: string;
+    /** システム名（既定ロゴのテキスト。logo 指定時は無視） */
+    systemName?: string;
+    /** アプリ名 */
+    appName: string;
+    /** テナント一覧 */
+    tenants?: Tenant[];
+    /** 現在のテナントID */
+    currentTenantId?: string;
+    /** ユーザー情報 */
+    userInfo: UserInfo;
+    /** ナビゲーション一覧 */
+    navigations?: NavItem[];
+    /** アプリランチャー一覧 */
+    appLauncher?: AppLauncherItem[];
+    /** ヘルプページURL */
+    helpPageUrl?: string;
+    /** リリースノート表示 */
+    showReleaseNote?: boolean;
+    /** リリースノートテキスト */
+    releaseNoteText?: string;
+    /** データ同期ボタン表示 */
+    showDataSync?: boolean;
+    /** データ同期中 */
+    dataSyncing?: boolean;
+}
+/**
+ * AppHeaderコンポーネント
+ */
+export declare class AppHeader {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private documentClickHandler;
+    constructor(container: HTMLElement, config: AppHeaderConfig, callbacks?: AppHeaderCallbacks);
+    /**
+     * ヘッダーをレンダリング
+     */
+    render(): void;
+    /**
+     * テナントを切り替え
+     */
+    setCurrentTenant(tenantId: string): void;
+    /**
+     * アクティブなナビゲーションを設定
+     */
+    setActiveNav(navId: string | null): void;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): Readonly<AppHeaderState>;
+    /**
+     * コンポーネントを破棄
+     */
+    destroy(): void;
+    /**
+     * 初期状態を作成
+     */
+    private createInitialState;
+    /**
+     * Header（上部バー）をレンダリング
+     */
+    private renderHeader;
+    /**
+     * ロゴをレンダリング
+     */
+    private renderLogo;
+    /**
+     * デフォルトロゴをレンダリング
+     */
+    private renderDefaultLogo;
+    /**
+     * テナント切替をレンダリング
+     */
+    private renderTenantSwitcher;
+    /**
+     * テナントドロップダウンメニューをレンダリング
+     */
+    private renderTenantDropdownMenu;
+    /**
+     * アプリランチャーをレンダリング
+     */
+    private renderAppLauncher;
+    /**
+     * アプリランチャードロップダウンをレンダリング
+     */
+    private renderAppLauncherDropdown;
+    /**
+     * ヘルプボタンをレンダリング
+     */
+    private renderHelpButton;
+    /**
+     * ユーザーメニューをレンダリング
+     */
+    private renderUserMenu;
+    /**
+     * ユーザードロップダウンメニューをレンダリング
+     */
+    private renderUserDropdownMenu;
+    /**
+     * AppNavi（下部バー）をレンダリング
+     */
+    private renderAppNavi;
+    /**
+     * ナビゲーションをレンダリング
+     */
+    private renderNavigation;
+    /**
+     * ナビゲーションアイテムをレンダリング
+     */
+    private renderNavItem;
+    /**
+     * ナビゲーションドロップダウンメニューをレンダリング
+     */
+    private renderNavDropdownMenu;
+    /**
+     * データ同期ボタンをレンダリング
+     */
+    private renderDataSyncButton;
+    /**
+     * リリースノートボタンをレンダリング
+     */
+    private renderReleaseNoteButton;
+    /**
+     * モバイルメニューボタンをレンダリング
+     */
+    private renderMobileMenuButton;
+    /**
+     * ドキュメントクリックハンドラーをセットアップ
+     */
+    private setupDocumentClickHandler;
+    /**
+     * テナントドロップダウンを切り替え
+     */
+    private toggleTenantDropdown;
+    /**
+     * ユーザードロップダウンを切り替え
+     */
+    private toggleUserDropdown;
+    /**
+     * アプリランチャーを切り替え
+     */
+    private toggleAppLauncher;
+    /**
+     * ナビゲーションドロップダウンを切り替え
+     */
+    private toggleNavDropdown;
+    private renderChevronIcon;
+    private renderGridIcon;
+    private renderHelpIcon;
+    private renderSyncIcon;
+    private renderBellIcon;
+    private renderMenuIcon;
+}
+/**
+ * AppHeaderを作成
+ */
+export declare function createAppHeader(container: HTMLElement, config: AppHeaderConfig, callbacks?: AppHeaderCallbacks): AppHeader;

package/dist/types/renderer/components/app-navi.d.ts

@@ -0,0 +1,167 @@
+/**
+ * AppNavi Component
+ * プロダクト内の主要な機能を切り替えるためのナビゲーションコンポーネント
+ *
+ * SmartHR Design System の AppNavi を参考に実装
+ * https://smarthr.design/products/components/app-navi/
+ */
+/**
+ * ナビゲーションアイテムの基本型
+ */
+interface AppNaviItemBase {
+    /** アイテムID */
+    id: string;
+    /** 表示ラベル */
+    label: string;
+    /** アイコン（HTML文字列、SVGなど） */
+    icon?: string;
+    /** 無効化 */
+    disabled?: boolean;
+    /** 現在のページ/セクションを示す */
+    current?: boolean;
+}
+/**
+ * ボタンタイプのナビゲーションアイテム
+ */
+export interface AppNaviButtonItem extends AppNaviItemBase {
+    type: 'button';
+    /** クリック時のハンドラー */
+    onClick?: (id: string) => void;
+}
+/**
+ * アンカー（リンク）タイプのナビゲーションアイテム
+ */
+export interface AppNaviAnchorItem extends AppNaviItemBase {
+    type: 'anchor';
+    /** リンク先URL */
+    href: string;
+    /** ターゲット属性 */
+    target?: '_blank' | '_self' | '_parent' | '_top';
+}
+/**
+ * ドロップダウンのメニュー項目
+ */
+export interface AppNaviDropdownMenuItem {
+    /** アイテムID */
+    id: string;
+    /** 表示ラベル */
+    label: string;
+    /** アイコン（HTML文字列） */
+    icon?: string;
+    /** 無効化 */
+    disabled?: boolean;
+    /** リンク先URL（アンカー時） */
+    href?: string;
+    /** クリック時のハンドラー */
+    onClick?: (id: string) => void;
+}
+/**
+ * ドロップダウンタイプのナビゲーションアイテム
+ */
+export interface AppNaviDropdownItem extends AppNaviItemBase {
+    type: 'dropdown';
+    /** ドロップダウンメニュー項目 */
+    dropdownItems: AppNaviDropdownMenuItem[];
+}
+/**
+ * ナビゲーションアイテムのユニオン型
+ */
+export type AppNaviItem = AppNaviButtonItem | AppNaviAnchorItem | AppNaviDropdownItem;
+/**
+ * AppNaviの状態
+ */
+export interface AppNaviState {
+    /** ナビゲーションアイテム */
+    items: AppNaviItem[];
+    /** 開いているドロップダウンのID（null = 全て閉じている） */
+    openDropdownId: string | null;
+}
+/**
+ * AppNaviのコールバック
+ */
+export interface AppNaviCallbacks {
+    /** アイテムクリック時 */
+    onItemClick?: (itemId: string, item: AppNaviItem) => void;
+    /** ドロップダウン開閉時 */
+    onDropdownToggle?: (itemId: string, isOpen: boolean) => void;
+}
+/**
+ * AppNaviの設定
+ */
+export interface AppNaviConfig {
+    /** ナビゲーションラベル（アクセシビリティ用） */
+    label?: string;
+    /** 追加の領域（右側に表示するカスタムコンテンツ） */
+    additionalArea?: HTMLElement | (() => HTMLElement);
+    /** ナビゲーションアイテム */
+    items: AppNaviItem[];
+}
+/**
+ * AppNaviコンポーネント
+ */
+export declare class AppNavi {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private instanceId;
+    private clickOutsideHandler;
+    constructor(container: HTMLElement, config: AppNaviConfig, callbacks?: AppNaviCallbacks);
+    /**
+     * ナビゲーションをレンダリング
+     */
+    render(): void;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): AppNaviState;
+    /**
+     * 指定アイテムを現在のアイテムとして設定
+     */
+    setCurrent(itemId: string): boolean;
+    /**
+     * 全てのcurrentをリセット
+     */
+    clearCurrent(): void;
+    /**
+     * ドロップダウンを開く
+     */
+    openDropdown(itemId: string): boolean;
+    /**
+     * ドロップダウンを閉じる
+     */
+    closeDropdown(): void;
+    /**
+     * アイテムを追加
+     */
+    addItem(item: AppNaviItem, index?: number): void;
+    /**
+     * アイテムを削除
+     */
+    removeItem(itemId: string): boolean;
+    /**
+     * アイテムを更新
+     */
+    updateItem(itemId: string, updates: Partial<AppNaviItem>): boolean;
+    /**
+     * コンポーネントを破棄
+     */
+    destroy(): void;
+    private validateConfig;
+    private createInitialState;
+    private renderNavList;
+    private renderNavItem;
+    private renderButton;
+    private renderAnchor;
+    private renderDropdown;
+    private renderDropdownMenu;
+    private renderDropdownMenuItem;
+    private renderAdditionalArea;
+    private attachClickOutsideHandler;
+    private detachEventListeners;
+}
+/**
+ * AppNaviコンポーネントを作成するファクトリー関数
+ */
+export declare function createAppNavi(container: HTMLElement, config: AppNaviConfig, callbacks?: AppNaviCallbacks): AppNavi;
+export {};

package/dist/types/renderer/components/badge.d.ts

@@ -0,0 +1,134 @@
+/**
+ * Badge Component
+ * バッジコンポーネント
+ *
+ *
+ * - カラーバリエーション（gray/blue/green/yellow/red）
+ * - サイズ（small/medium）
+ * - dot表示（数値なしの状態表示）
+ * - カウント表示（99+などの上限表示）
+ * - `data-color` / `data-size` for styling
+ * - `role="status"` with `aria-label` for accessibility
+ */
+import type { InputField } from '../../types/schema';
+/**
+ * バッジの状態
+ */
+export interface BadgeState {
+    /** 表示する数値 */
+    count: number | null;
+    /** 表示するテキスト */
+    text: string | null;
+    /** dotモード */
+    dot: boolean;
+    /** 非表示状態 */
+    hidden: boolean;
+}
+/**
+ * バッジのコールバック
+ */
+export interface BadgeCallbacks {
+    /** カウント変更時 */
+    onCountChange?: (count: number | null) => void;
+    /** クリック時 */
+    onClick?: (event: MouseEvent) => void;
+}
+/**
+ * バッジの設定
+ */
+export interface BadgeConfig {
+    /** カラー */
+    color?: 'gray' | 'blue' | 'green' | 'yellow' | 'red';
+    /** サイズ */
+    size?: 'small' | 'medium';
+    /** dotモード（数値なしの状態表示） */
+    dot?: boolean;
+    /** 初期カウント */
+    count?: number;
+    /** カウント表示の上限（デフォルト: 99） */
+    maxCount?: number;
+    /** テキストコンテンツ（数値の代わりにテキストを表示） */
+    text?: string;
+    /** ラベル（アクセシビリティ用） */
+    label?: string;
+    /** クリック可能か */
+    clickable?: boolean;
+    /** 0の時に非表示にするか */
+    hideOnZero?: boolean;
+}
+/**
+ * バッジコンポーネント
+ */
+export declare class Badge {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private clickHandler;
+    constructor(container: HTMLElement, config?: BadgeConfig, callbacks?: BadgeCallbacks);
+    /**
+     * バッジをレンダリング
+     */
+    render(): void;
+    /**
+     * カウントを設定
+     */
+    setCount(count: number): void;
+    /**
+     * テキストを設定
+     */
+    setText(text: string): void;
+    /**
+     * dotモードを設定
+     */
+    setDot(dot: boolean): void;
+    /**
+     * 非表示状態を設定
+     */
+    setHidden(hidden: boolean): void;
+    /**
+     * 現在のカウントを取得
+     */
+    getCount(): number | null;
+    /**
+     * 現在のテキストを取得
+     */
+    getText(): string | null;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): Readonly<BadgeState>;
+    /**
+     * コンポーネントを破棄
+     */
+    destroy(): void;
+    /**
+     * 初期状態を作成
+     */
+    private createInitialState;
+    /**
+     * バッジ要素をレンダリング
+     */
+    private renderBadge;
+    /**
+     * カウントをフォーマット
+     */
+    private formatCount;
+    /**
+     * アクセシビリティ用のラベルを取得
+     */
+    private getAriaLabel;
+    /**
+     * クリックイベントハンドラー
+     */
+    private handleClick;
+    /**
+     * BadgeフィールドをHTMLとしてレンダリング（静的メソッド）
+     * SSR/初期レンダリング用
+     */
+    static renderField(field: InputField): string;
+}
+/**
+ * バッジを作成
+ */
+export declare function createBadge(container: HTMLElement, config?: BadgeConfig, callbacks?: BadgeCallbacks): Badge;

package/dist/types/renderer/components/browser.d.ts

@@ -0,0 +1,134 @@
+/**
+ * Browser Component
+ * 階層構造を持つデータの中から項目を単一選択するコンポーネント
+ *
+ * https://smarthr.design/products/components/browser/
+ *
+ * 機能:
+ * - 階層的なデータの表示
+ * - 複数カラム表示（最大3列）
+ * - キーボードナビゲーション
+ * - 単一選択
+ * - アクセシビリティ対応（ARIA属性）
+ *
+ * 用途:
+ * - カテゴリ選択
+ * - ファイルブラウジング
+ * - 組織階層の選択
+ */
+import type { InputField } from '../../types/schema';
+/**
+ * Browserアイテムの定義
+ */
+export interface BrowserItem {
+    /** アイテムの値（一意） */
+    value: string;
+    /** 表示ラベル */
+    label: string;
+    /** 子アイテム */
+    children?: BrowserItem[];
+    /** 無効化 */
+    disabled?: boolean;
+}
+/**
+ * Browserの状態
+ */
+export interface BrowserState {
+    /** 選択中のアイテムのvalue */
+    selectedValue: string | null;
+    /** 選択パス（ルートからのvalue配列） */
+    selectedPath: string[];
+    /** フォーカス中のカラムインデックス */
+    focusedColumnIndex: number;
+    /** 各カラムでフォーカス中のアイテムのインデックス */
+    focusedItemIndexes: number[];
+}
+/**
+ * Browserのコールバック
+ */
+export interface BrowserCallbacks {
+    /** アイテム選択時 */
+    onSelect?: (value: string, path: string[], item: BrowserItem) => void;
+    /** 選択変更時 */
+    onChange?: (value: string | null, path: string[]) => void;
+}
+/**
+ * Browserの設定
+ */
+export interface BrowserConfig {
+    /** アイテムの配列 */
+    items: BrowserItem[];
+    /** 初期選択値 */
+    defaultValue?: string;
+    /** ID属性 */
+    id?: string;
+    /** カスタムCSSクラス */
+    className?: string;
+    /** 最大カラム数（デフォルト: 3） */
+    maxColumns?: number;
+    /** 高さ（デフォルト: 'auto'） */
+    height?: string;
+}
+/**
+ * Browserコンポーネント
+ */
+export declare class Browser {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private instanceId;
+    private columnsWrapper;
+    private itemsMap;
+    private parentMap;
+    constructor(container: HTMLElement, config: BrowserConfig, callbacks?: BrowserCallbacks);
+    /**
+     * Browserをレンダリング
+     */
+    render(): void;
+    /**
+     * 値を選択
+     */
+    selectValue(value: string): void;
+    /**
+     * 選択をクリア
+     */
+    clearSelection(): void;
+    /**
+     * 現在の選択値を取得
+     */
+    getValue(): string | null;
+    /**
+     * 現在の選択パスを取得
+     */
+    getPath(): string[];
+    /**
+     * 現在の状態を取得
+     */
+    getState(): BrowserState;
+    /**
+     * アイテムを更新
+     */
+    setItems(items: BrowserItem[]): void;
+    /**
+     * コンポーネントを破棄
+     */
+    destroy(): void;
+    private buildItemsMap;
+    private getPathToValue;
+    private getColumnsData;
+    private renderColumns;
+    private renderColumn;
+    private renderItem;
+    private renderArrowIcon;
+    private handleItemSelect;
+    private handleKeyDown;
+    private moveFocus;
+    private selectFocusedOrMoveRight;
+    private focusCurrentItem;
+    static renderField(field: InputField): string;
+}
+/**
+ * Browserを作成
+ */
+export declare function createBrowser(container: HTMLElement, config: BrowserConfig, callbacks?: BrowserCallbacks): Browser;