api-reference-props-table

use fandhe_frontend_core::{div, text, Node};
use fandhe_frontend_pre_styled_ui::code::{self, CodeProps};
use fandhe_frontend_pre_styled_ui::heading::{heading, HeadingLevel, HeadingProps, HeadingSize};
use fandhe_frontend_pre_styled_ui::table::{self, TableProps, TableVariant};
use fandhe_frontend_pre_styled_ui::text::{self as styled_text, TextProps, TextVariant};
use fandhe_frontend_pre_styled_ui::ColorPalette;

/// プロパティ表 1 行分（架空コンポーネントのプロパティ）。
struct PropRow {
    name: &'static str,
    ty: &'static str,
    default: &'static str,
    description: &'static str,
}

/// 架空コンポーネント（`Toast`）のプロパティ一覧。`<` と `&` を含む型表記
/// （`Option<&str>`）を 1 件含め、既定エスケープ経路を実演する
/// （ファイル内ユニットテストで固定する不変条件）。
const PROPS: [PropRow; 5] = [
    PropRow {
        name: "title",
        ty: "Option<&str>",
        default: "None",
        description: "通知の見出し文言。省略時は本文のみ表示します。",
    },
    PropRow {
        name: "variant",
        ty: "ToastVariant",
        default: "Info",
        description: "見た目の種別（Info / Success / Warning / Danger）。",
    },
    PropRow {
        name: "dismissible",
        ty: "bool",
        default: "true",
        description: "閉じるボタンを表示するかどうか。",
    },
    PropRow {
        name: "duration_ms",
        ty: "u32",
        default: "4000",
        description: "自動で閉じるまでの表示時間（ミリ秒）。",
    },
    PropRow {
        name: "on_dismiss",
        ty: "Option<fn()>",
        default: "None",
        description: "閉じられた際に呼び出すコールバック。",
    },
];

/// プロパティ 1 行分（`table::row`）を組み立てる。
///
/// プロパティ名は `table::row_header`（`<th scope="row">`、モジュール doc
/// 「行見出しに `table::row_header` を使う理由」節）の中に accent palette の
/// `code` を置いて強調する。型・既定値は `table::cell` の中に既定
/// （Neutral）palette の `code`、説明は `styled_text::text`（Muted）。
fn prop_row(row: &PropRow) -> Node {
    table::row(
        vec![],
        vec![
            table::row_header(
                vec![("data-blocks-api-reference-props-table-name", "")],
                vec![code::code(
                    &CodeProps {
                        palette: ColorPalette::Accent,
                        ..CodeProps::default()
                    },
                    vec![],
                    vec![text(row.name)],
                )],
            ),
            table::cell(
                vec![("data-blocks-api-reference-props-table-type", "")],
                vec![code::code(
                    &CodeProps::default(),
                    vec![],
                    vec![text(row.ty)],
                )],
            ),
            table::cell(
                vec![("data-blocks-api-reference-props-table-default", "")],
                vec![code::code(
                    &CodeProps::default(),
                    vec![],
                    vec![text(row.default)],
                )],
            ),
            table::cell(
                vec![("data-blocks-api-reference-props-table-description", "")],
                vec![styled_text::text(
                    &TextProps {
                        variant: TextVariant::Muted,
                        ..TextProps::default()
                    },
                    vec![],
                    vec![text(row.description)],
                )],
            ),
        ],
    )
}

/// `api-reference-props-table` の Demo 本体。呼び出しごとに同一の `Node` を
/// 返す純関数（他 block と同じ設計）。
pub fn demo() -> Node {
    let intro = div(
        vec![("class", "blocks-api-reference-props-table-intro")],
        vec![
            heading(
                HeadingLevel::H3,
                &HeadingProps {
                    size: HeadingSize::Xl2,
                    ..HeadingProps::default()
                },
                vec![],
                vec![text("Toast props")],
            ),
            styled_text::text(
                &TextProps {
                    variant: TextVariant::Muted,
                    ..TextProps::default()
                },
                vec![("data-blocks-api-reference-props-table-lead", "")],
                vec![text(
                    "Toast コンポーネントが受け付けるプロパティの一覧です。",
                )],
            ),
        ],
    );

    let header = table::header(
        vec![],
        vec![table::row(
            vec![],
            vec![
                table::column_header(vec![], vec![text("プロパティ")]),
                table::column_header(vec![], vec![text("型")]),
                table::column_header(vec![], vec![text("既定値")]),
                table::column_header(vec![], vec![text("説明")]),
            ],
        )],
    );

    let body = table::body(vec![], PROPS.iter().map(prop_row).collect());

    let table_node = table::root(
        TableProps {
            variant: TableVariant::Outline,
            ..TableProps::default()
        },
        vec![("data-blocks-api-reference-props-table-table", "")],
        vec![
            table::caption(vec![], vec![text("Toast コンポーネントの props 一覧")]),
            header,
            body,
        ],
    );

    let scroll = table::scroll_area(
        vec![
            ("data-blocks-api-reference-props-table-scroll", ""),
            ("role", "region"),
            ("aria-label", "Toast props 一覧表"),
            ("tabindex", "0"),
        ],
        vec![table_node],
    );

    div(
        vec![("class", "blocks-api-reference-props-table-layout")],
        vec![intro, scroll],
    )
}