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

package/src/widgets/ShortAnswerQuestion.tsx

@@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+
+export interface ShortAnswerQuestionProps {
+  question: string;
+  placeholder?: string;
+  correctAnswer?: string;
+  correctAnswers?: string[];
+  showFeedback?: boolean;
+  /** 是否禁用：禁用后输入框与提交按钮不可交互 */
+  disabled?: boolean;
+  onchange: (value: { answer: string; isCorrect?: boolean }) => void;
+}
+
+export const ShortAnswerQuestion: React.FC<ShortAnswerQuestionProps> = ({ 
+  question, 
+  placeholder = "Type your answer here...",
+  correctAnswer,
+  correctAnswers,
+  showFeedback = false,
+  disabled = false,
+  onchange 
+}) => {
+  const [answer, setAnswer] = useState('');
+  const [hasAnswered, setHasAnswered] = useState(false);
+  const [isCorrect, setIsCorrect] = useState<boolean | undefined>(undefined);
+
+  const handleSubmit = () => {
+    if (disabled) return;
+    if (!answer.trim()) return;
+    
+    setHasAnswered(true);
+    
+    const normalized = (correctAnswers && correctAnswers.length > 0)
+      ? correctAnswers
+      : (typeof correctAnswer === 'string' ? [correctAnswer] : undefined);
+
+    const correct = normalized
+      ? normalized.some(a => a.toLowerCase() === answer.trim().toLowerCase())
+      : undefined;
+    
+    setIsCorrect(correct);
+    onchange({ answer: answer.trim(), isCorrect: correct });
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !hasAnswered && !disabled) {
+      handleSubmit();
+    }
+  };
+
+  const getFeedbackMessage = () => {
+    if (!hasAnswered || !showFeedback) return null;
+    
+    const hasAnswers = (correctAnswers && correctAnswers.length > 0) || typeof correctAnswer !== 'undefined';
+    if (!hasAnswers) {
+      return `Your answer: ${answer.trim()}`;
+    }
+    
+    if (correctAnswers && correctAnswers.length > 0) {
+      return isCorrect 
+        ? '✓ Correct!'
+        : `✗ Incorrect. Accepted answers: ${correctAnswers.join(', ')}`;
+    }
+    return isCorrect ? '✓ Correct!' : `✗ Incorrect. The correct answer is: ${correctAnswer}`;
+  };
+
+  return (
+    <div className="widget-saq">
+      <div className="saq-question">{question}</div>
+      <div className="saq-input-container">
+        <input
+          type="text"
+          value={answer}
+          onChange={(e) => setAnswer(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          disabled={disabled || (hasAnswered && showFeedback)}
+          className={`saq-input ${
+            hasAnswered && showFeedback
+              ? isCorrect ? 'saq-input-correct' : 'saq-input-incorrect'
+              : ''
+          }`}
+        />
+        {!hasAnswered && (
+          <button
+            onClick={handleSubmit}
+            disabled={disabled || !answer.trim()}
+            className="saq-submit"
+          >
+            Submit
+          </button>
+        )}
+      </div>
+      {hasAnswered && showFeedback && getFeedbackMessage() && (
+        <div className={`saq-feedback ${isCorrect ? 'correct' : 'incorrect'}`}>
+          {getFeedbackMessage()}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/widgets/Slider.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+
+export interface SliderProps {
+  min: number;
+  max: number;
+  step?: number;
+  label?: string;
+  default?: number;
+  /** 是否禁用 */
+  disabled?: boolean;
+  onchange: (value: number) => void;
+}
+
+export const Slider: React.FC<SliderProps> = ({ 
+  min, 
+  max, 
+  step = 1, 
+  label = '', 
+  default: initial = min, 
+  disabled = false,
+  onchange 
+}) => {
+  const [value, setValue] = useState(initial);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = Number(e.target.value);
+    setValue(newValue);
+  };
+
+  const handleComplete = () => {
+    onchange(value);
+  };
+
+  return (
+    <div className="widget-slider">
+      {label && <label>{label}</label>}
+      <div className="slider-container">
+        <div className="slider-values">
+          <span className="min-value">{min}</span>
+          <span className="current-value">{value}</span>
+          <span className="max-value">{max}</span>
+        </div>
+        <input
+          type="range"
+          value={value}
+          min={min}
+          max={max}
+          step={step}
+          onChange={handleChange}
+          onMouseUp={handleComplete}
+          onTouchEnd={handleComplete}
+          disabled={disabled}
+        />
+      </div>
+    </div>
+  );
+};

package/src/widgets/Switch.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+
+export interface SwitchProps {
+  label?: string;
+  /** 默认是否选中 */
+  default?: boolean;
+  /** 选中时展示的文案（antd checkedChildren） */
+  checkedText?: string;
+  /** 未选中时展示的文案（antd unCheckedChildren） */
+  unCheckedText?: string;
+  /** 是否禁用 */
+  disabled?: boolean;
+  onchange: (value: boolean) => void;
+}
+
+/** 开关组件（参考 antd Switch）：布尔切换控件，可配置选中/未选中文案。
+    label 在上（与表单其他字段同构），表单布局切换时位置自动跟随 */
+export const Switch: React.FC<SwitchProps> = ({
+  label = '',
+  default: initial = false,
+  checkedText = '',
+  unCheckedText = '',
+  disabled = false,
+  onchange
+}) => {
+  const [checked, setChecked] = useState(initial);
+
+  const toggle = () => {
+    if (disabled) return;
+    const next = !checked;
+    setChecked(next);
+    onchange(next);
+  };
+
+  return (
+    <div className="widget-switch">
+      {label && <label>{label}</label>}
+      <div className="widget-field-content">
+        <button
+          type="button"
+          role="switch"
+          aria-checked={checked}
+          aria-label={label}
+          className="switch-track"
+          data-checked={checked}
+          onClick={toggle}
+          disabled={disabled}
+        >
+          <span className="switch-thumb" />
+          {checkedText && <span className="switch-text switch-text-checked">{checkedText}</span>}
+          {unCheckedText && <span className="switch-text switch-text-unchecked">{unCheckedText}</span>}
+        </button>
+      </div>
+    </div>
+  );
+};

package/src/widgets/TextInput.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+
+export interface TextInputProps {
+  placeholder?: string;
+  label?: string;
+  default?: string;
+  /** 是否禁用 */
+  disabled?: boolean;
+  onchange: (value: string) => void;
+}
+
+export const TextInput: React.FC<TextInputProps> = ({ 
+  placeholder = '', 
+  label = '', 
+  default: initial = '', 
+  disabled = false,
+  onchange 
+}) => {
+  const [value, setValue] = useState(initial);
+
+  const handleBlur = () => {
+    onchange(value);
+  };
+
+  return (
+    <div className="widget-text-input">
+      {label && <label>{label}</label>}
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onBlur={handleBlur}
+        placeholder={placeholder}
+        disabled={disabled}
+      />
+    </div>
+  );
+};

package/src/widgets/Widget.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect } from 'react';
+import * as widgets from './index';
+
+export interface WidgetProps {
+  id: string;
+  content: 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',
+  'short-answer-question': 'ShortAnswerQuestion',
+  'slider': 'Slider',
+  'switch': 'Switch',
+  'text-input': 'TextInput'
+};
+
+export const Widget: React.FC<WidgetProps> = ({ id, content }) => {
+  const parsed = JSON.parse(decodeURIComponent(content));
+  const componentType = typeMapping[parsed.type] || parsed.type;
+  const WidgetComponent = widgets[componentType as WidgetType];
+
+  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);
+    }
+  };
+
+  if (!WidgetComponent) {
+    return (
+      <div className="widget">
+        <span style={{ color: 'red' }}>
+          Unknown widget "{parsed.type}"
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="widget">
+      <WidgetComponent 
+        {...parsed} 
+        onchange={(value: any) => dispatch({ id, value })} 
+      />
+    </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,45 @@
+/** 选项条目：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);
+}

package/src/widgets/index.ts

@@ -0,0 +1,17 @@
+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 { ShortAnswerQuestion } from './ShortAnswerQuestion';
+export { Slider } from './Slider';
+export { Switch } from './Switch';
+export { TextInput } from './TextInput';