mokkun 0.1.5 → 0.1.6

package/dist/types/renderer/components/float-area.d.ts

@@ -0,0 +1,196 @@
+/**
+ * FloatArea Component
+ * フローティング領域コンポーネント
+ *
+ *
+ * https://smarthr.design/products/components/float-area/
+ *
+ * 機能:
+ * - primaryButton / secondaryButton / tertiaryButton の3ボタン構成
+ * - responseMessage（処理結果メッセージ）のサポート
+ * - 画面下部への固定表示
+ * - デスクトップ/モバイル対応レイアウト
+ * - z-index管理
+ *
+ * 用途:
+ * - フォーム送信ボタンの固定表示
+ * - モーダルUIのアクション領域
+ * - 設定画面のアクションビュー
+ */
+import type { InputField } from '../../types/schema';
+/**
+ * ボタン設定
+ */
+export interface FloatAreaButton {
+    /** ボタンのラベル */
+    label: string;
+    /** ボタンのタイプ */
+    variant?: 'primary' | 'secondary' | 'danger' | 'text';
+    /** 無効状態 */
+    disabled?: boolean;
+    /** クリック時のコールバック */
+    onClick?: () => void;
+}
+/**
+ * レスポンスメッセージの種類
+ */
+export type ResponseMessageType = 'success' | 'error' | 'warning' | 'info';
+/**
+ * レスポンスメッセージ設定
+ */
+export interface ResponseMessage {
+    /** メッセージ */
+    text: string;
+    /** メッセージの種類 */
+    type: ResponseMessageType;
+}
+/**
+ * フローティング領域の状態
+ */
+export interface FloatAreaState {
+    /** 表示中かどうか */
+    visible: boolean;
+    /** z-index */
+    zIndex: number;
+    /** レスポンスメッセージ */
+    responseMessage: ResponseMessage | null;
+}
+/**
+ * フローティング領域のコールバック
+ */
+export interface FloatAreaCallbacks {
+    /** プライマリボタンクリック時 */
+    onPrimaryClick?: () => void;
+    /** セカンダリボタンクリック時 */
+    onSecondaryClick?: () => void;
+    /** ターシャリボタンクリック時 */
+    onTertiaryClick?: () => void;
+    /** 表示時 */
+    onShow?: () => void;
+    /** 非表示時 */
+    onHide?: () => void;
+}
+/**
+ * フローティング領域の設定
+ */
+export interface FloatAreaConfig {
+    /** プライマリボタン（必須） */
+    primaryButton: FloatAreaButton;
+    /** セカンダリボタン */
+    secondaryButton?: FloatAreaButton;
+    /** ターシャリボタン（左端に配置） */
+    tertiaryButton?: FloatAreaButton;
+    /** レスポンスメッセージ */
+    responseMessage?: ResponseMessage;
+    /** z-index（デフォルト: 500） */
+    zIndex?: number;
+    /** 下部からの距離（デフォルト: 24px） */
+    bottom?: string;
+    /** 最大幅（デフォルト: 800px） */
+    maxWidth?: string;
+    /** アクセシビリティ用ラベル */
+    ariaLabel?: string;
+}
+/**
+ * フローティング領域コンポーネント
+ */
+export declare class FloatArea {
+    private config;
+    private state;
+    private callbacks;
+    private containerElement;
+    private floatAreaElement;
+    private instanceId;
+    constructor(containerElement: HTMLElement, config: FloatAreaConfig, callbacks?: FloatAreaCallbacks);
+    /**
+     * コンポーネントをレンダリング
+     */
+    render(): void;
+    /**
+     * フローティング領域を表示
+     */
+    show(): void;
+    /**
+     * フローティング領域を非表示
+     */
+    hide(): void;
+    /**
+     * 表示/非表示を切り替え
+     */
+    toggle(): void;
+    /**
+     * レスポンスメッセージを設定
+     */
+    setResponseMessage(message: ResponseMessage | null): void;
+    /**
+     * 成功メッセージを表示
+     */
+    showSuccess(text: string): void;
+    /**
+     * エラーメッセージを表示
+     */
+    showError(text: string): void;
+    /**
+     * メッセージをクリア
+     */
+    clearMessage(): void;
+    /**
+     * プライマリボタンを更新
+     */
+    updatePrimaryButton(button: Partial<FloatAreaButton>): void;
+    /**
+     * プライマリボタンの無効状態を設定
+     */
+    setPrimaryDisabled(disabled: boolean): void;
+    /**
+     * z-indexを設定
+     */
+    setZIndex(zIndex: number): void;
+    /**
+     * コンポーネントを破棄
+     */
+    destroy(): void;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): FloatAreaState;
+    /**
+     * 表示中かどうかを取得
+     */
+    isVisible(): boolean;
+    /**
+     * フローティング領域要素を作成
+     */
+    private createFloatAreaElement;
+    /**
+     * ボタン要素を作成
+     */
+    private createButton;
+    /**
+     * レスポンスメッセージ要素を作成
+     */
+    private createResponseMessage;
+    /**
+     * メッセージタイプに応じたアイコンを取得
+     */
+    private getMessageIcon;
+    /**
+     * クラス名を構築
+     */
+    private buildClassName;
+    /**
+     * 表示状態を更新
+     */
+    private updateVisibility;
+    /**
+     * 要素を削除
+     */
+    private removeElement;
+    static renderField(field: InputField): string;
+}
+/**
+ * FloatAreaを作成するファクトリ関数
+ */
+export declare function createFloatArea(containerElement: HTMLElement, config: FloatAreaConfig, callbacks?: FloatAreaCallbacks): FloatArea;
+export type FloatAreaPosition = 'top' | 'bottom';
+export type FloatAreaAlignment = 'left' | 'center' | 'right' | 'space-between';

package/dist/types/renderer/components/form-fields.d.ts

@@ -0,0 +1,94 @@
+/**
+ * Form Field Renderers (Facade)
+ * 各フォームフィールドタイプのHTML生成
+ *
+ * このモジュールはファサードとして機能し、実際のレンダリングロジックは
+ * 各コンポーネントの静的renderFieldメソッドに委譲されます。
+ */
+import type { InputField, TextField, NumberField, TextareaField, SelectField, MultiSelectField, ComboboxField, RadioGroupField, CheckboxGroupField, DatePickerField, TimePickerField, DurationPickerField, DurationInputField, FileUploadField, RepeaterField, GoogleMapEmbedField, ImageUploaderField, HeadingField } from '../../types/schema';
+/**
+ * text → <input type="text">
+ * @deprecated Use Input.renderField instead
+ */
+export declare function renderTextField(field: TextField): string;
+/**
+ * number → <input type="number">
+ * @deprecated Use Input.renderField instead
+ */
+export declare function renderNumberField(field: NumberField): string;
+/**
+ * textarea → <textarea>
+ * @deprecated Use Textarea.renderField instead
+ */
+export declare function renderTextareaField(field: TextareaField): string;
+/**
+ * select → <select>
+ * @deprecated Use Select.renderField instead
+ */
+export declare function renderSelectField(field: SelectField): string;
+/**
+ * multi_select → <select multiple>
+ * @deprecated Use Select.renderField instead
+ */
+export declare function renderMultiSelectField(field: MultiSelectField): string;
+/**
+ * combobox → Combobox component container
+ * @deprecated Use Combobox.renderField instead
+ */
+export declare function renderComboboxField(field: ComboboxField): string;
+/**
+ * radio_group → <input type="radio"> × N
+ * @deprecated Use RadioButton.renderField instead
+ */
+export declare function renderRadioGroupField(field: RadioGroupField): string;
+/**
+ * checkbox_group → <input type="checkbox"> × N
+ * @deprecated Use Checkbox.renderField instead
+ */
+export declare function renderCheckboxGroupField(field: CheckboxGroupField): string;
+/**
+ * date_picker → <input type="date">
+ * @deprecated Use Input.renderField instead
+ */
+export declare function renderDatePickerField(field: DatePickerField): string;
+/**
+ * time_picker → <input type="time">
+ * @deprecated Use Input.renderField instead
+ */
+export declare function renderTimePickerField(field: TimePickerField): string;
+/**
+ * duration_picker → カスタム（時間:分 選択UI）
+ * @deprecated Use DurationPicker.renderField instead
+ */
+export declare function renderDurationPickerField(field: DurationPickerField): string;
+/**
+ * duration_input → <input type="number"> + 単位
+ * @deprecated Use DurationInput.renderField instead
+ */
+export declare function renderDurationInputField(field: DurationInputField): string;
+/**
+ * heading → 見出しフィールド
+ * @deprecated Use Heading.renderField instead
+ */
+export declare function renderHeadingField(field: HeadingField): string;
+/**
+ * file_upload → <input type="file">
+ */
+export declare function renderFileUploadField(field: FileUploadField): string;
+/**
+ * google_map_embed → Google Maps 埋め込みコンポーネント
+ */
+export declare function renderGoogleMapEmbedFieldHtml(field: GoogleMapEmbedField): string;
+/**
+ * image_uploader → 画像アップローダーコンポーネント
+ */
+export declare function renderImageUploaderField(field: ImageUploaderField): string;
+export declare function renderRepeaterFieldStatic(field: RepeaterField): string;
+/**
+ * フィールドタイプに応じてレンダリング
+ */
+export declare function renderField(field: InputField): string;
+/**
+ * 複数のフィールドをレンダリング
+ */
+export declare function renderFields(fields: InputField[]): string;

package/dist/types/renderer/components/form-section.d.ts

@@ -0,0 +1,118 @@
+/**
+ * Form Section Component
+ * フォームセクションコンポーネント
+ * 統合フォーム内のセクションを構造化して表示する
+ */
+import type { FormSection as FormSectionSchema, InputFieldRaw } from '../../types/schema';
+/**
+ * フォームセクションの設定
+ */
+export interface FormSectionConfig {
+    /** セクション名 */
+    sectionName: string;
+    /** アイコン（HTML文字列またはアイコンクラス） */
+    icon?: string;
+    /** 公開設定トグルを表示 */
+    publishToggle?: boolean;
+    /** 初期の公開設定状態 */
+    publishToggleInitial?: boolean;
+    /** 折りたたみ可能 */
+    collapsible?: boolean;
+    /** 初期の折りたたみ状態 */
+    collapsed?: boolean;
+    /** 入力フィールド */
+    fields?: InputFieldRaw[];
+    /** カスタムコンテンツ（HTML文字列） */
+    content?: string;
+    /** セクションの説明 */
+    description?: string;
+}
+/**
+ * フォームセクションの状態
+ */
+export interface FormSectionState {
+    /** 公開設定状態 */
+    isPublished: boolean;
+    /** 折りたたみ状態 */
+    isCollapsed: boolean;
+    /** セクション名 */
+    sectionName: string;
+}
+/**
+ * フォームセクションのコールバック
+ */
+export interface FormSectionCallbacks {
+    /** 公開設定変更時 */
+    onPublishToggle?: (isPublished: boolean, state: FormSectionState) => void;
+    /** 折りたたみ状態変更時 */
+    onCollapseToggle?: (isCollapsed: boolean, state: FormSectionState) => void;
+    /** フィールドレンダラー */
+    renderFields?: (fields: InputFieldRaw[], container: HTMLElement) => void;
+}
+/**
+ * フォームセクションコンポーネント
+ */
+export declare class FormSection {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private instanceId;
+    constructor(config: FormSectionConfig, container: HTMLElement, callbacks?: FormSectionCallbacks);
+    /**
+     * セクションをレンダリング
+     */
+    render(): void;
+    /**
+     * 公開設定を切り替え
+     */
+    setPublished(isPublished: boolean): void;
+    /**
+     * 公開設定を取得
+     */
+    isPublished(): boolean;
+    /**
+     * 折りたたみ状態を切り替え
+     */
+    setCollapsed(isCollapsed: boolean): void;
+    /**
+     * 折りたたみ状態を取得
+     */
+    isCollapsed(): boolean;
+    /**
+     * 折りたたみをトグル
+     */
+    toggleCollapsed(): void;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): FormSectionState;
+    /**
+     * セクション名を取得
+     */
+    getSectionName(): string;
+    /**
+     * 初期状態を作成
+     */
+    private createInitialState;
+    /**
+     * ヘッダーをレンダリング
+     */
+    private renderHeader;
+    /**
+     * コンテンツをレンダリング
+     */
+    private renderContent;
+}
+/**
+ * FormSectionSchemaからFormSectionConfigに変換
+ */
+export declare function createConfigFromSchema(schema: FormSectionSchema): FormSectionConfig;
+/**
+ * 複数のセクションをレンダリング
+ */
+export declare function renderFormSections(sections: FormSectionConfig[], container: HTMLElement, callbacks?: FormSectionCallbacks): FormSection[];
+/**
+ * セクション間の区切り線を追加
+ */
+export declare function renderFormSectionsWithDividers(sections: FormSectionConfig[], container: HTMLElement, callbacks?: FormSectionCallbacks): FormSection[];

package/dist/types/renderer/components/google-map-embed.d.ts

@@ -0,0 +1,88 @@
+/**
+ * Google Map Embed Component
+ * Googleマップ埋め込みコンポーネント
+ */
+import type { GoogleMapEmbedField } from '../../types/schema';
+export interface GoogleMapEmbedState {
+    url: string;
+    isValid: boolean;
+    embedUrl: string | null;
+    errorMessage: string | null;
+    coordinates: {
+        lat: number;
+        lng: number;
+    } | null;
+    query: string | null;
+}
+export interface GoogleMapEmbedCallbacks {
+    onChange?: (state: GoogleMapEmbedState) => void;
+}
+/**
+ * Google Maps URL をバリデート
+ */
+export declare function isValidGoogleMapsUrl(url: string): boolean;
+/**
+ * URL から座標を抽出
+ */
+export declare function extractCoordinates(url: string): {
+    lat: number;
+    lng: number;
+} | null;
+/**
+ * URL から検索クエリを抽出
+ */
+export declare function extractQuery(url: string): string | null;
+/**
+ * URL から Place ID を抽出
+ */
+export declare function extractPlaceId(url: string): string | null;
+/**
+ * Google Maps 埋め込み URL を生成
+ */
+export declare function generateEmbedUrl(url: string, zoom?: number): string | null;
+/**
+ * Google Maps 埋め込みコンポーネント
+ */
+export declare class GoogleMapEmbed {
+    private field;
+    private container;
+    private callbacks;
+    private state;
+    private inputElement;
+    private previewContainer;
+    private errorElement;
+    constructor(field: GoogleMapEmbedField, container: HTMLElement, callbacks?: GoogleMapEmbedCallbacks, initialValue?: string);
+    private createInitialState;
+    /**
+     * コンポーネントをレンダリング
+     */
+    render(): void;
+    private createInputField;
+    private createOpenLink;
+    private handleInput;
+    private handleBlur;
+    private handlePaste;
+    private updateState;
+    private updateErrorDisplay;
+    private updatePreview;
+    private updateOpenLink;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): GoogleMapEmbedState;
+    /**
+     * URL を設定
+     */
+    setUrl(url: string): void;
+    /**
+     * コンポーネントを破棄
+     */
+    destroy(): void;
+}
+/**
+ * Googleマップ埋め込みフィールドをレンダリング
+ */
+export declare function renderGoogleMapEmbedField(field: GoogleMapEmbedField, container: HTMLElement, options?: {
+    value?: string;
+    onChange?: (fieldId: string, value: unknown) => void;
+}): GoogleMapEmbed;

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

@@ -0,0 +1,119 @@
+/**
+ * Heading Component
+ * 見出しコンポーネント
+ *
+ *
+ * - セマンティックレベル（h1-h6）と視覚的サイズの分離
+ * - アクセシビリティを考慮した構造
+ * - カラーバリエーション対応
+ * - テキスト配置オプション
+ */
+import type { HeadingField } from '../../types/schema';
+/**
+ * 見出しの状態
+ */
+export interface HeadingState {
+    /** 見出しレベル */
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+    /** 見出しテキスト */
+    text: string;
+    /** サイズバリアント */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    /** テキスト配置 */
+    align?: 'left' | 'center' | 'right';
+    /** カラーバリエーション */
+    color?: 'default' | 'primary' | 'secondary' | 'muted' | 'danger' | 'success' | 'warning';
+    /** アイコン */
+    icon?: string;
+}
+/**
+ * 見出しのコールバック（拡張用）
+ */
+export interface HeadingCallbacks {
+    /** クリック時（インタラクティブな見出しの場合） */
+    onClick?: (state: HeadingState) => void;
+}
+/**
+ * 見出しの設定
+ */
+export interface HeadingConfig {
+    /** 見出しレベル（h1-h6） */
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+    /** 見出しテキスト */
+    text: string;
+    /** サイズバリアント（デフォルト: levelに基づく） */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    /** テキスト配置（デフォルト: left） */
+    align?: 'left' | 'center' | 'right';
+    /** カラーバリエーション（デフォルト: default） */
+    color?: 'default' | 'primary' | 'secondary' | 'muted' | 'danger' | 'success' | 'warning';
+    /** アイコン（オプション） */
+    icon?: string;
+    /** ID属性 */
+    id?: string;
+    /** カスタムCSSクラス */
+    className?: string;
+}
+/**
+ * 見出しコンポーネント
+ */
+export declare class Heading {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private instanceId;
+    constructor(container: HTMLElement, config: HeadingConfig, callbacks?: HeadingCallbacks);
+    /**
+     * 見出しをレンダリング
+     */
+    render(): void;
+    /**
+     * 見出しテキストを更新
+     */
+    setText(text: string): void;
+    /**
+     * 見出しレベルを更新
+     */
+    setLevel(level: 1 | 2 | 3 | 4 | 5 | 6): void;
+    /**
+     * サイズバリアントを更新
+     */
+    setSize(size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'): void;
+    /**
+     * テキスト配置を更新
+     */
+    setAlign(align: 'left' | 'center' | 'right'): void;
+    /**
+     * カラーバリエーションを更新
+     */
+    setColor(color: 'default' | 'primary' | 'secondary' | 'muted' | 'danger' | 'success' | 'warning'): void;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): HeadingState;
+    /**
+     * 初期状態を作成
+     */
+    private createInitialState;
+    /**
+     * 見出し要素を作成
+     */
+    private createHeadingElement;
+    /**
+     * レベルに基づくデフォルトサイズを取得
+     */
+    private getDefaultSizeForLevel;
+    /**
+     * 見出しフィールドをHTMLとしてレンダリング（静的メソッド）
+     * SSR/初期レンダリング用
+     *
+     * @param field - 見出しフィールド定義
+     * @returns 生成されたHTML文字列
+     */
+    static renderField(field: HeadingField): string;
+}
+/**
+ * 見出しコンポーネントを作成
+ */
+export declare function createHeading(container: HTMLElement, config: HeadingConfig, callbacks?: HeadingCallbacks): Heading;