@c2-markdown-ui/react 0.0.0-stage → 0.4.3

package/src/widgets/Widget.tsx

@@ -0,0 +1,131 @@
+import React, { useEffect } from 'react';
+import * as widgets from './index';
+
+export interface WidgetProps {
+  id: string;
+  content: string;
+  /** 外部传入的表单初始值（encodeURIComponent 后的 JSON 字符串），由 MarkdownUI 注入 */
+  data?: string;
+}
+
+type WidgetType = keyof typeof widgets;
+
+// Map camelCase JSON types to PascalCase component names
+const typeMapping: Record<string, WidgetType> = {
+  'button': 'Button',
+  'button-group': 'ButtonGroup',
+  'cascade': 'Cascader',
+  'chart-line': 'Chart',
+  'chart-bar': 'Chart',
+  'chart-pie': 'Chart',
+  'chart-scatter': 'Chart',
+  'date-picker': 'DatePicker',
+  'form': 'Form',
+  'incomplete': 'Incomplete',
+  'multiple-choice-question': 'MultipleChoiceQuestion',
+  'number-input': 'NumberInput',
+  'quiz': 'Quiz',
+  'radio-group': 'RadioGroup',
+  'select': 'Select',
+  'select-multi': 'SelectMulti',
+  'tree-select': 'TreeSelect',
+  'short-answer-question': 'ShortAnswerQuestion',
+  'slider': 'Slider',
+  'switch': 'Switch',
+  'text-input': 'TextInput'
+};
+
+export const Widget: React.FC<WidgetProps> = ({ id, content, data }) => {
+  const parsed = JSON.parse(decodeURIComponent(content));
+  const componentType = typeMapping[parsed.type] || parsed.type;
+  const WidgetComponent = widgets[componentType as WidgetType];
+
+  // 解析外部注入的表单初始值（容错：非法 JSON 时忽略）
+  let initialData: Record<string, unknown> | undefined;
+  if (data) {
+    try {
+      initialData = JSON.parse(decodeURIComponent(data));
+    } catch {
+      initialData = undefined;
+    }
+  }
+
+  const dispatch = (detail: any) => {
+    console.log('🔥 Widget dispatch called', { id, detail });
+
+    const event = new CustomEvent('widget-event', {
+      detail: detail,
+      bubbles: true,
+      composed: true
+    });
+
+    // Find the custom element and bubble up to find the closest widget container
+    const customElement = document.querySelector(`markdown-ui-widget[id="${id}"]`);
+    console.log('🔍 Custom element found:', customElement);
+
+    if (customElement) {
+      const container = customElement.closest('.widget-container');
+      console.log('📦 Container found:', container);
+      if (container) {
+        console.log('📤 Dispatching event on container');
+        container.dispatchEvent(event);
+      }
+    } else {
+      console.log('❌ No custom element found for id:', id);
+    }
+  };
+
+  /** form 提交事件：独立于 widget-event，通过 widget-submit 派发 */
+  const dispatchSubmit = (value: any) => {
+    const customElement = document.querySelector(`markdown-ui-widget[id="${id}"]`);
+    if (customElement) {
+      const container = customElement.closest('.widget-container');
+      if (container) {
+        container.dispatchEvent(new CustomEvent('widget-submit', {
+          detail: { id, value },
+          bubbles: true,
+          composed: true
+        }));
+      }
+    }
+  };
+
+  /** form 字段级统计事件：任一表单项被填写时通过 widget-form-change 派发 */
+  const dispatchFieldChange = (stats: any) => {
+    const customElement = document.querySelector(`markdown-ui-widget[id="${id}"]`);
+    if (customElement) {
+      const container = customElement.closest('.widget-container');
+      if (container) {
+        container.dispatchEvent(new CustomEvent('widget-form-change', {
+          detail: { id, stats },
+          bubbles: true,
+          composed: true
+        }));
+      }
+    }
+  };
+
+  if (!WidgetComponent) {
+    return (
+      <div className="widget">
+        <span style={{ color: 'red' }}>
+          Unknown widget "{parsed.type}"
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="widget">
+      <WidgetComponent
+        {...parsed}
+        initialData={initialData}
+        onchange={(value: any) => dispatch({ id, value })}
+        {...(parsed.type === 'form' ? {
+          onsubmit: (values: any) => dispatchSubmit(values),
+          onfieldchange: (stats: any) => dispatchFieldChange(stats)
+        } : {})}
+      />
+    </div>
+  );
+};

package/src/widgets/chartRemoteData.ts

@@ -0,0 +1,84 @@
+/**
+ * 图表远端数据源解析：
+ * - CSV 文本（与 DSL 内嵌 CSV 同格式：首行 header「标签列,系列1,系列2...」，其后数据行）
+ * - JSON：支持 { labels, datasets:[{label,data}] } 及常见包装（{data|result} 内嵌）
+ */
+
+export interface ChartDataset {
+  label: string;
+  data: number[];
+}
+
+export interface RemoteChartData {
+  labels: string[];
+  datasets: ChartDataset[];
+}
+
+/** 解析 CSV 文本为图表数据（header 至少 2 列，数据列须为数字） */
+export function parseChartCsv(text: string): RemoteChartData | null {
+  const lines = text
+    .split('\n')
+    .map(l => l.trim())
+    .filter(l => l.length > 0);
+  if (lines.length === 0) return null;
+
+  const headers = lines[0].split(',').map(h => h.trim());
+  if (headers.length < 2) return null;
+
+  const labels: string[] = [];
+  const datasets: ChartDataset[] = headers.slice(1).map(label => ({ label, data: [] }));
+
+  for (let i = 1; i < lines.length; i++) {
+    const values = lines[i].split(',').map(v => v.trim());
+    if (values.length !== headers.length) return null;
+    labels.push(values[0]);
+    for (let j = 1; j < values.length; j++) {
+      const num = parseFloat(values[j]);
+      if (isNaN(num)) return null;
+      datasets[j - 1].data.push(num);
+    }
+  }
+  return { labels, datasets };
+}
+
+/** 归一化 JSON 响应为图表数据（labels + datasets） */
+export function normalizeRemoteChartData(json: any): RemoteChartData | null {
+  // 解开常见包装：{data|result|chart} 内嵌
+  let payload = json;
+  for (const key of ['data', 'result', 'chart']) {
+    if (payload && typeof payload === 'object' && !Array.isArray(payload)
+      && payload[key] && typeof payload[key] === 'object') {
+      payload = payload[key];
+    }
+  }
+
+  if (!payload || typeof payload !== 'object') return null;
+
+  // 直接是 { labels, datasets } 结构
+  let labels: any = payload.labels;
+  let datasets: any = payload.datasets;
+
+  // 数组形式：[{ label, value }] → 单系列
+  if (Array.isArray(payload) && payload.length > 0 && payload[0]?.label !== undefined && payload[0]?.value !== undefined) {
+    labels = payload.map((it: any) => it.label);
+    datasets = [{ label: 'Series', data: payload.map((it: any) => Number(it.value)) }];
+  }
+
+  if (!Array.isArray(labels) || !Array.isArray(datasets) || labels.length === 0 || datasets.length === 0) {
+    return null;
+  }
+
+  const normLabels = labels.map((l: any) => String(l));
+  const normDatasets: ChartDataset[] = [];
+  for (const ds of datasets) {
+    if (!ds || !Array.isArray(ds.data)) continue;
+    const data = ds.data.map((v: any) => {
+      const num = Number(v);
+      return isNaN(num) ? 0 : num;
+    });
+    normDatasets.push({ label: String(ds.label ?? 'Series'), data });
+  }
+  if (normDatasets.length === 0) return null;
+
+  return { labels: normLabels, datasets: normDatasets };
+}

package/src/widgets/choiceUtils.ts

@@ -0,0 +1,90 @@
+/** 选项条目：value 是表单实际取值（key），label 是展示文案 */
+export interface ChoiceItem {
+  value: string;
+  label: string;
+}
+
+/**
+ * 解析本地 choices 条目的 key:label 格式：
+ * - "bj:北京"  → {value: "bj", label: "北京"}（value 是表单实际取值，label 是展示文案）
+ * - "北京"     → {value: "北京", label: "北京"}（无冒号或不符合判定规则时视为纯文本）
+ * - "09:00"   → {value: "09:00", label: "09:00"}（纯数字 key 视为时间/比例值，保持原样）
+ * - "http://x" → 原样（label 以 // 开头视为 URL）
+ *
+ * 判定规则：按首个冒号分割，仅当 key 非空且不含空白、非纯数字，
+ * 且 label 非空、不以 // 开头时才视为 key:label。
+ */
+export function parseChoice(c: string): ChoiceItem {
+  const s = String(c ?? '');
+  const idx = s.indexOf(':');
+  if (idx > 0) {
+    const key = s.slice(0, idx);
+    const label = s.slice(idx + 1);
+    if (key && label && !/\s/.test(key) && !/^\d+$/.test(key) && !label.startsWith('//')) {
+      return { value: key, label };
+    }
+  }
+  return { value: s, label: s };
+}
+
+/** 把本地 choices（string[] 或对象数组）解析为 {value,label} 数组。
+ *  对象条目：value > key 取值（表单实际取值），label 缺省回落到 value */
+export function parseChoices(choices: string[] | Array<{ value?: string; key?: string; label?: string }> | undefined | null): ChoiceItem[] {
+  return (choices || []).map((c) => {
+    if (c !== null && typeof c === 'object') {
+      const value = (c as any).value ?? (c as any).key;
+      if (value === undefined || value === null || value === '') return null;
+      const valueStr = String(value);
+      const label = (c as any).label !== undefined && (c as any).label !== null && (c as any).label !== ''
+        ? String((c as any).label)
+        : valueStr;
+      return { value: valueStr, label };
+    }
+    return parseChoice(c as string);
+  }).filter((c: ChoiceItem | null): c is ChoiceItem => c !== null);
+}
+
+/**
+ * 兼容常见远端响应格式并归一化为 {value,label}：
+ * - ["测试"]                          → value=label="测试"
+ * - [{key:"test",label:"测试"}]       → value="test"（表单取值），label="测试"（展示）
+ * - [{value:"test",label:"测试"}]     → value="test"，label="测试"
+ * - {data:[...]} / {options:[...]} / {choices:[...]} / {items:[...]} → 取内嵌数组
+ *
+ * 对象条目取值优先级：value > key > id > name；展示优先级：label > name > text > value。
+ */
+export function normalizeRemoteChoices(json: any): ChoiceItem[] {
+  let list = json;
+  if (!Array.isArray(json)) {
+    list = Array.isArray(json?.data) ? json.data
+      : Array.isArray(json?.options) ? json.options
+      : Array.isArray(json?.choices) ? json.choices
+      : Array.isArray(json?.items) ? json.items
+      : [];
+  }
+  return (list || [])
+    .map((item: any): ChoiceItem | null => {
+      if (typeof item === 'string' || typeof item === 'number') {
+        const s = String(item);
+        return s ? { value: s, label: s } : null;
+      }
+      if (item && typeof item === 'object') {
+        const value = item.value ?? item.key ?? item.id ?? item.name;
+        if (value === undefined || value === null || value === '') return null;
+        const label = item.label ?? item.name ?? item.text ?? String(value);
+        return { value: String(value), label: String(label) };
+      }
+      return null;
+    })
+    .filter((c: ChoiceItem | null): c is ChoiceItem => c !== null);
+}
+
+/**
+ * 把本地 choices / default 值（可能写的是展示文案或 key:label 原文）映射到远端 value 体系：
+ * 条目本身已是 value 优先，字符串则用 label 匹配远端条目回查 value。
+ */
+export function resolveChoiceValue(c: string, remote: ChoiceItem[]): string {
+  const parsed = parseChoice(c).value;
+  const hit = remote.find(r => r.value === c || r.label === c || r.value === parsed);
+  return hit ? hit.value : c;
+}

package/src/widgets/index.ts

@@ -0,0 +1,18 @@
+export { Button } from './Button';
+export { ButtonGroup } from './ButtonGroup';
+export { Cascader } from './Cascader';
+export { Chart } from './Chart';
+export { DatePicker } from './DatePicker';
+export { Form } from './Form';
+export { Incomplete } from './Incomplete';
+export { MultipleChoiceQuestion } from './MultipleChoiceQuestion';
+export { NumberInput } from './NumberInput';
+export { Quiz } from './Quiz';
+export { RadioGroup } from './Radio';
+export { Select } from './Select';
+export { SelectMulti } from './SelectMulti';
+export { TreeSelect } from './TreeSelect';
+export { ShortAnswerQuestion } from './ShortAnswerQuestion';
+export { Slider } from './Slider';
+export { Switch } from './Switch';
+export { TextInput } from './TextInput';