@yadeck/slide-components-basic 0.0.0-stage → 0.1.0

package/src/flow.tsx

@@ -0,0 +1,89 @@
+import { z } from "zod";
+import { RichText, type BlockOf } from "@yadeck/slide-core";
+
+export const flowType = z.object({
+  steps: z
+    .array(
+      z.object({
+        label: z.string().describe("段の名前。見出しとして出す"),
+        via: z.string().optional().describe("この段に入ってくる矢印のラベル(変換や処理の名前)"),
+        phase: z.string().optional().describe("この段が属する段階の名前。見出しの横に小さく出す"),
+        detail: z.string().optional().describe("この段で起きることの一言。説明として出す"),
+      }),
+    )
+    .min(2)
+    .describe("流れの各段。順番どおり"),
+  focus: z
+    .union([z.number().int().min(1), z.array(z.number().int().min(1))])
+    .optional()
+    .describe("焦点にする段の番号(1 始まり)。配列で複数可。他の段は薄くなる"),
+  direction: z
+    .enum(["row", "column"])
+    .optional()
+    .describe("row: 左から右、column: 上から下(既定)。見せ方の種類は block の tags(flow / flow boxed / flow framed / flow grid)で選ぶ"),
+});
+
+type FlowProps = BlockOf<typeof flowType>;
+
+/**
+ * 流れ(手順)。マークアップと CSS は https://www.ameamelog.com/css-flow/ の 5 パターンを移植したもので、
+ * 色をテーマトークンに、寸法をスライド向けに直している(CSS は styles.ts の .b-flow-*)。
+ * 構造は共通: ul.b-flow > li > .icon(番号) + dl > dt(見出し) / dd(説明)
+ */
+function FlowList({ block, variant, numbered }: { block: FlowProps; variant: string; numbered: "step" | "plain" }) {
+  const focus = new Set(block.focus === undefined ? [] : Array.isArray(block.focus) ? block.focus : [block.focus]);
+  // boxed / framed は原型どおり番号を dt の中(見出しの上)に置く
+  const iconInTitle = variant === "boxed" || variant === "framed";
+  return (
+    <ul className={`b-flow b-flow-${variant} ${focus.size > 0 ? "has-focus" : ""}`}>
+      {block.steps.map((st, i) => {
+        const num = String(i + 1).padStart(2, "0");
+        const icon = <span className="icon">{numbered === "step" ? `STEP.${num}` : num}</span>;
+        return (
+          <li key={i} className={focus.has(i + 1) ? "is-focus" : ""}>
+            {!iconInTitle && icon}
+            {st.via && (
+              <span className="via">
+                <RichText text={st.via} />
+              </span>
+            )}
+            <dl>
+              <dt>
+                {iconInTitle && icon}
+                <RichText text={st.label} />
+                {st.phase && !iconInTitle && (
+                  <span className="phase">
+                    <RichText text={st.phase} />
+                  </span>
+                )}
+              </dt>
+              {(st.detail || (st.phase && iconInTitle)) && (
+                <dd>
+                  {st.phase && iconInTitle && (
+                    <span className="phase">
+                      <RichText text={st.phase} />
+                    </span>
+                  )}
+                  {st.detail && <RichText text={st.detail} />}
+                </dd>
+              )}
+            </dl>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+/** `flow`: 縦は 1 カラム構成(STEP ピル + レール + 点線)、横(direction: row)はポップ(吹き出し番号 + 枠カード + ›) */
+export const FlowBlock = (block: FlowProps) =>
+  block.direction === "row" ? <FlowList block={block} variant="pop" numbered="plain" /> : <FlowList block={block} variant="rail" numbered="step" />;
+
+/** `flow boxed`: 枠線を使ったデザイン。角丸の枠を縦に積み、点線と ▽ でつなぐ */
+export const FlowBoxed = (block: FlowProps) => <FlowList block={block} variant="boxed" numbered="step" />;
+
+/** `flow framed`: スタイリッシュ。全体を 1 つの枠で囲み、区切り線に ▽ の切り込み */
+export const FlowFramed = (block: FlowProps) => <FlowList block={block} variant="framed" numbered="step" />;
+
+/** `flow grid`: 2 カラム構成。右端が矢印の枠を 2 列に */
+export const FlowGrid = (block: FlowProps) => <FlowList block={block} variant="grid" numbered="step" />;

package/src/index.ts

@@ -0,0 +1,91 @@
+import { BlockLayout, DeckLayout, SlideLayout, definePlugin } from "@yadeck/slide-core";
+import {
+  BodyBlock,
+  CardSlide,
+  CodeBlock,
+  DefaultBlock,
+  DefaultDeck,
+  HeaderSlide,
+  HeadingBlock,
+  ImageBlock,
+  ItemBlock,
+  ListBlock,
+  NoteBlock,
+  ProfileSlide,
+  QuoteBlock,
+  SectionHeaderSlide,
+  StatBlock,
+  TwoColumnSlide,
+  VideoBlock,
+  codeType,
+  headerType,
+  headingType,
+  imageType,
+  itemType,
+  listType,
+  profileType,
+  quoteType,
+  sectionHeaderType,
+  statType,
+  videoType,
+} from "./layouts.js";
+import { FlowBlock, FlowBoxed, FlowFramed, FlowGrid, flowType } from "./flow.js";
+import { ColumnsSlide, DefaultSlide } from "./panes.js";
+import { BASIC_CSS, DEFAULT_THEME } from "./styles.js";
+
+export * from "./layouts.js";
+export * from "./panes.js";
+export * from "./flow.js";
+export * from "./chrome.js";
+export { BASIC_CSS, DEFAULT_THEME } from "./styles.js";
+
+/**
+ * 最小 tag セット。全 Interface に tags: [] の fallback を持つので、
+ * これを先頭に置けばどんな tags でも必ず何かが描画される。
+ */
+export const basic = definePlugin((c) => {
+  c.addStyle(DEFAULT_THEME);
+  c.addStyle(BASIC_CSS);
+  c.bind(DeckLayout, [], DefaultDeck, { description: "スライドを縦に並べる" });
+
+  c.bind(SlideLayout, [], DefaultSlide, {
+    description:
+      "汎用。テキスト(tags なし / body / list / quote / stat / item)は全部で 1 pane、code / image / video は 1 つずつ 1 pane に数え、1: 全面、2: 左右、3: ト型、4: 十字、5 以上: 左右 2 列に自動配置。テキストは 1 行なら中央に大きく、2 行以上なら箇条書き",
+  });
+  c.bind(SlideLayout, ["header"], HeaderSlide, { type: headerType, description: "表紙。title / subtitle を大きく、発表者情報を左下、イベント情報を右下、logo を右上" });
+  c.bind(SlideLayout, ["profile"], ProfileSlide, { type: profileType, description: "自己紹介。左に名前・肩書き・写真・アカウント、右に items" });
+  c.bind(SlideLayout, ["section-header"], SectionHeaderSlide, { type: sectionHeaderType, description: "章扉。number と heading、body だけを描く" });
+  c.bind(SlideLayout, ["two-column"], TwoColumnSlide, { description: "2 列の対比。left を付けた block を左列、right を右列、どちらも無い block は前置きとして列の上に置く。列の見出しは heading left / heading right" });
+  c.bind(SlideLayout, ["card"], CardSlide, { description: "item をカードにして並べる(3 枚までは 1 行、4 枚は 2×2、5 枚以上は 3 列)。他の block は前置きとして上に置く" });
+  c.bind(SlideLayout, ["columns"], ColumnsSlide, { description: "pane を横一列に等分する(4 まで。5 以上は 3 列 × 2 行)" });
+
+  c.bind(BlockLayout, [], DefaultBlock, { description: "本文 1 行。markdown 可" });
+  c.bind(BlockLayout, ["heading"], HeadingBlock, { type: headingType, description: "見出し。slide の上部に置かれる" });
+  c.bind(BlockLayout, ["body"], BodyBlock, { description: "本文。markdown 可。複数行は段落になる" });
+  c.bind(BlockLayout, ["list"], ListBlock, { type: listType, description: "行ごとの箇条書き" });
+  c.bind(BlockLayout, ["code"], CodeBlock, { type: codeType, description: "コード。highlight.js で色付けし、pane に収まるよう縮小する" });
+  c.bind(BlockLayout, ["image"], ImageBlock, { type: imageType, description: "画像。pane にアスペクト比維持で収める。text はキャプション" });
+  c.bind(BlockLayout, ["video"], VideoBlock, { type: videoType, description: "動画。YouTube の URL は embed に変換して iframe で埋め込む" });
+  c.bind(BlockLayout, ["flow"], FlowBlock, {
+    type: flowType,
+    description: "流れ(手順)。縦は STEP ピル + 縦レール + 見出しと説明(1 カラム構成)、横(direction: row)は吹き出し番号付きの枠カードを › でつなぐ。via / phase / detail / focus。1 つで 1 pane",
+  });
+  c.bind(BlockLayout, ["flow", "boxed"], FlowBoxed, {
+    type: flowType,
+    description: "流れ(手順)の別の見せ方。角丸の枠を縦に積み、点線と ▽ でつなぐ。左に STEP と見出し、右に説明",
+  });
+  c.bind(BlockLayout, ["flow", "framed"], FlowFramed, {
+    type: flowType,
+    description: "流れ(手順)の別の見せ方。全体を 1 つの枠で囲み、区切り線に ▽ の切り込み。左に STEP と見出し、右に説明",
+  });
+  c.bind(BlockLayout, ["flow", "grid"], FlowGrid, {
+    type: flowType,
+    description: "流れ(手順)の別の見せ方。右端が矢印形のカードを 2 列に並べる。段数が多いときに高さを取らない",
+  });
+  c.bind(BlockLayout, ["quote"], QuoteBlock, { type: quoteType, description: "引用" });
+  c.bind(BlockLayout, ["stat"], StatBlock, { type: statType, description: "数字や固有名詞を大きく見せる。label と補足の text" });
+  c.bind(BlockLayout, ["item"], ItemBlock, { type: itemType, description: "並列の項目(title + 説明の text)。card slide でカードになる" });
+  c.bind(BlockLayout, ["note"], NoteBlock, { description: "発表者ノート。画面にも印刷にも出ず、presenter モードに出る" });
+});
+
+export default basic;