@welshare/questionnaire 0.1.2 → 0.2.0

package/dist/node_modules/@welshare/questionnaire/package.json

@@ -1,85 +0,0 @@
-{
-  "name": "@welshare/questionnaire",
-  "version": "0.1.2",
-  "description": "FHIR Questionnaire components for React with state management and validation",
-  "keywords": [
-    "react",
-    "fhir",
-    "questionnaire",
-    "survey",
-    "forms",
-    "healthcare"
-  ],
-  "author": "Welshare UG (haftungsbeschränkt)",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/welshare/surveys-monorepo.git",
-    "directory": "packages/welshare-questionnaire"
-  },
-  "bugs": {
-    "url": "https://github.com/welshare/surveys-monorepo/issues"
-  },
-  "homepage": "https://welshare.health",
-  "type": "module",
-  "scripts": {
-    "lint": "eslint . --max-warnings 25",
-    "build": "tshy && npm run build:css",
-    "build:css": "cp src/components/questionnaire-tokens.css dist/tokens.css && cp src/components/questionnaire-styles.css dist/styles.css",
-    "build:clean": "rm -rf ./dist",
-    "test": "vitest",
-    "test:run": "vitest run",
-    "test:coverage": "vitest run --coverage",
-    "prepublishOnly": "npm run build:clean && npm run build"
-  },
-  "peerDependencies": {
-    "react": "^19",
-    "react-dom": "^19"
-  },
-  "devDependencies": {
-    "@types/node": "^22",
-    "@types/react": "^19",
-    "@workspace/eslint-config": "workspace:*",
-    "@workspace/typescript-config": "workspace:*",
-    "tshy": "^3.0.2",
-    "typescript": "^5.7.3",
-    "vitest": "^3.2.4",
-    "@vitest/ui": "^3.2.4",
-    "@vitest/coverage-v8": "^3.2.4",
-    "jsdom": "^26.1.0"
-  },
-  "tshy": {
-    "dialects": [
-      "esm"
-    ],
-    "exclude": [
-      "src/**/__tests__/**"
-    ],
-    "exports": {
-      "./package.json": "./package.json",
-      "./tokens.css": "./dist/tokens.css",
-      "./styles.css": "./dist/styles.css",
-      ".": "./src/index.ts"
-    }
-  },
-  "module": "./dist/esm/index.js",
-  "exports": {
-    "./package.json": "./package.json",
-    "./tokens.css": "./dist/tokens.css",
-    "./styles.css": "./dist/styles.css",
-    ".": {
-      "import": {
-        "types": "./dist/esm/index.d.ts",
-        "default": "./dist/esm/index.js"
-      }
-    }
-  },
-  "files": [
-    "dist/**/*",
-    "README.md",
-    "LICENSE"
-  ],
-  "engines": {
-    "node": "^22.0.0"
-  }
-}

package/dist/node_modules/@welshare/questionnaire/src/components/debug-section.tsx

@@ -1,116 +0,0 @@
-import { useState } from "react";
-import type {
-  QuestionnaireItem,
-  QuestionnaireResponseAnswer,
-  Coding,
-} from "../types/fhir.js";
-
-export interface DebugSectionProps {
-  /**
-   * The questionnaire item to display debug information for
-   */
-  item: QuestionnaireItem;
-  /**
-   * The current answer (for single-answer questions)
-   */
-  currentAnswer?: QuestionnaireResponseAnswer;
-  /**
-   * The current answers (for multi-answer questions)
-   */
-  currentAnswers?: QuestionnaireResponseAnswer[];
-  /**
-   * Optional LOINC code to display
-   */
-  loincCode?: Coding;
-  /**
-   * Additional CSS class names
-   */
-  className?: string;
-}
-
-/**
- * DebugSection component displays debug information for a questionnaire item.
- *
- * This component is designed to be reusable and can be moved to the shared package.
- * It displays:
- * - LOINC code link (if available)
- * - Collapsible FHIR question definition
- * - Collapsible selected answer(s) in FHIR format
- *
- * @example
- * ```tsx
- * <DebugSection
- *   item={questionItem}
- *   currentAnswer={answer}
- *   currentAnswers={answers}
- *   loincCode={loincCode}
- * />
- * ```
- */
-export const DebugSection = ({
-  item,
-  currentAnswer,
-  currentAnswers = [],
-  loincCode,
-  className = "",
-}: DebugSectionProps) => {
-  const [isQuestionDefOpen, setIsQuestionDefOpen] = useState(false);
-  const [isAnswersOpen, setIsAnswersOpen] = useState(false);
-
-  return (
-    <div className={`wq-debug-section ${className}`}>
-      {loincCode && loincCode.code && (
-        <div className="wq-loinc-link-section">
-          <a
-            href={`https://loinc.org/${loincCode.code}`}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="wq-loinc-link"
-          >
-            📋 LOINC Specification: {loincCode.code}
-          </a>
-        </div>
-      )}
-
-      {/* Collapsible FHIR Question Definition */}
-      <div className="wq-debug-collapsible">
-        <button
-          className="wq-debug-collapsible-header"
-          onClick={() => setIsQuestionDefOpen(!isQuestionDefOpen)}
-          type="button"
-        >
-          <span className={`chevron ${isQuestionDefOpen ? "open" : ""}`}>
-            ▶
-          </span>
-          <span className="wq-debug-title">FHIR Question Definition</span>
-        </button>
-        {isQuestionDefOpen && (
-          <pre className="wq-debug-json">{JSON.stringify(item, null, 2)}</pre>
-        )}
-      </div>
-
-      {/* Collapsible Selected Answer(s) */}
-      {(currentAnswer || currentAnswers.length > 0) && (
-        <div className="wq-debug-collapsible">
-          <button
-            className="wq-debug-collapsible-header"
-            onClick={() => setIsAnswersOpen(!isAnswersOpen)}
-            type="button"
-          >
-            <span className={`chevron ${isAnswersOpen ? "open" : ""}`}>▶</span>
-            <span className="wq-debug-title">
-              Selected Answer(s) (FHIR Format)
-            </span>
-          </button>
-          {isAnswersOpen && (
-            <pre className="wq-debug-json">
-              {item.repeats
-                ? JSON.stringify(currentAnswers, null, 2)
-                : JSON.stringify(currentAnswer, null, 2)}
-            </pre>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};

package/dist/node_modules/@welshare/questionnaire/src/components/question-renderer.tsx

@@ -1,391 +0,0 @@
-import { type ReactNode } from "react";
-import { useQuestionnaire } from "../contexts/questionnaire-context.js";
-import type { QuestionnaireItem } from "../types/fhir.js";
-import { DebugSection } from "./debug-section.js";
-import { ChoiceQuestion } from "./questions/choice-question.js";
-import { MultipleChoiceQuestion } from "./questions/multiple-choice-question.js";
-import { IntegerQuestion } from "./questions/integer-question.js";
-import { DecimalQuestion } from "./questions/decimal-question.js";
-import { StringQuestion } from "./questions/string-question.js";
-import { BooleanQuestion } from "./questions/boolean-question.js";
-import { RadioInputProps, CheckboxInputProps } from "../types/index.js";
-
-export interface QuestionRendererProps {
-  item: QuestionnaireItem;
-  /**
-   * Additional class names for the question container
-   * Will be appended to the default wq-question-container class
-   */
-  className?: string;
-  /**
-   * Additional class names for input elements
-   * Will be appended to the default wq-question-input class
-   */
-  inputClassName?: string;
-  /**
-   * Additional class names for choice options
-   * Will be appended to the default wq-choice-option class
-   */
-  choiceClassName?: string;
-  /**
-   * Custom renderer for radio button inputs.
-   * When provided, this function will be called to render each radio option,
-   * giving clients full control over styling and structure.
-   *
-   * @example
-   * ```tsx
-   * <QuestionRenderer
-   *   item={item}
-   *   renderRadioInput={(props) => (
-   *     <div className="custom-radio-wrapper">
-   *       <input
-   *         type="radio"
-   *         checked={props.checked}
-   *         onChange={props.onChange}
-   *         className="custom-radio"
-   *       />
-   *       <label>{props.label}</label>
-   *     </div>
-   *   )}
-   * />
-   * ```
-   */
-  renderRadioInput?: (props: RadioInputProps) => ReactNode;
-  /**
-   * Custom renderer for checkbox inputs.
-   * When provided, this function will be called to render each checkbox option,
-   * giving clients full control over styling and structure.
-   *
-   * @example
-   * ```tsx
-   * <QuestionRenderer
-   *   item={item}
-   *   renderCheckboxInput={(props) => (
-   *     <div className="custom-checkbox-wrapper">
-   *       <input
-   *         type="checkbox"
-   *         checked={props.checked}
-   *         onChange={props.onChange}
-   *         className="custom-checkbox"
-   *       />
-   *       <label>{props.label}</label>
-   *     </div>
-   *   )}
-   * />
-   * ```
-   */
-  renderCheckboxInput?: (props: CheckboxInputProps) => ReactNode;
-}
-
-/**
- * Wrapper component that combines the library's QuestionRenderer with debug functionality.
- *
- * This component:
- * - Renders the library's QuestionRenderer with custom radio/checkbox renderers
- * - Adds DebugSection below it when debug mode is enabled
- *
- * Uses custom input renderers to maintain the app's design system styling.
- */
-export const QuestionRenderer = (rendererProps: QuestionRendererProps) => {
-  const { getAnswer, getAnswers, debugMode } = useQuestionnaire();
-
-  const { item } = rendererProps;
-  const currentAnswer = getAnswer(item.linkId);
-  const currentAnswers = getAnswers(item.linkId);
-
-  // Find LOINC code if present
-  const loincCode = item.code?.find(
-    (coding) => coding.system === "http://loinc.org"
-  );
-
-  return (
-    <div>
-      <QuestionRendererInternal {...rendererProps} />
-      {debugMode && (
-        <DebugSection
-          item={item}
-          currentAnswer={currentAnswer}
-          currentAnswers={currentAnswers}
-          loincCode={loincCode}
-        />
-      )}
-    </div>
-  );
-};
-
-/**
- * QuestionRenderer component renders different types of questionnaire items
- * Supports: choice, integer, decimal, string, text, boolean
- * Features:
- * - Single and multiple choice (radio/checkbox)
- * - Slider controls for integer inputs
- * - Exclusive option support for multi-select
- * - Auto-populated (hidden) fields
- * - Validation error display
- */
-const QuestionRendererInternal = ({
-  item,
-  className = "",
-  inputClassName = "",
-  choiceClassName = "",
-  renderRadioInput,
-  renderCheckboxInput,
-}: QuestionRendererProps) => {
-  const {
-    updateAnswer,
-    updateMultipleAnswers,
-    getAnswer,
-    getAnswers,
-    hasValidationError,
-  } = useQuestionnaire();
-
-  const currentAnswer = getAnswer(item.linkId);
-  const currentAnswers = getAnswers(item.linkId);
-  const hasError = hasValidationError(item.linkId);
-
-  // Check if this field should be hidden (auto-populated)
-  const isAutoPopulated = item.extension?.some(
-    (ext) =>
-      ext.url ===
-        "http://hl7.org/fhir/StructureDefinition/questionnaire-hidden" &&
-      ext.valueBoolean === true
-  );
-
-  // Don't render auto-populated fields
-  if (isAutoPopulated) {
-    return null;
-  }
-
-  const handleChoiceChange = (
-    valueCoding: { system?: string; code?: string; display?: string },
-    valueInteger?: number
-  ) => {
-    // For choice questions, only set one field: valueCoding takes precedence
-    if (valueCoding && (valueCoding.code || valueCoding.display || valueCoding.system)) {
-      updateAnswer(item.linkId, { valueCoding });
-    } else if (valueInteger !== undefined) {
-      updateAnswer(item.linkId, { valueInteger });
-    }
-  };
-
-  const handleMultipleChoiceToggle = (
-    valueCoding: { system?: string; code?: string; display?: string },
-    valueInteger?: number
-  ) => {
-    const isSelected = currentAnswers.some(
-      (answer) => answer.valueCoding?.code === valueCoding.code
-    );
-
-    // Check if there's an exclusive option extension
-    const exclusiveOptionExt = item.extension?.find(
-      (ext) =>
-        ext.url ===
-        "http://codes.welshare.app/StructureDefinition/questionnaire-exclusive-option"
-    );
-    const exclusiveOptionCode = exclusiveOptionExt?.valueString;
-
-    let newAnswers;
-    if (isSelected) {
-      // Remove the answer
-      newAnswers = currentAnswers.filter(
-        (answer) => answer.valueCoding?.code !== valueCoding.code
-      );
-    } else {
-      // Check if we're selecting the exclusive option
-      if (exclusiveOptionCode && valueCoding.code === exclusiveOptionCode) {
-        // Clear all other answers and only keep this one
-        // For choice questions, only set one field: valueCoding takes precedence
-        const answer = valueCoding && (valueCoding.code || valueCoding.display || valueCoding.system)
-          ? { valueCoding }
-          : valueInteger !== undefined
-          ? { valueInteger }
-          : { valueCoding };
-        newAnswers = [answer];
-      } else {
-        // Check if exclusive option is currently selected
-        const exclusiveSelected = currentAnswers.some(
-          (answer) => answer.valueCoding?.code === exclusiveOptionCode
-        );
-
-        if (exclusiveSelected) {
-          // Remove exclusive option and add new selection
-          newAnswers = currentAnswers.filter(
-            (answer) => answer.valueCoding?.code !== exclusiveOptionCode
-          );
-          // For choice questions, only set one field: valueCoding takes precedence
-          const answer = valueCoding && (valueCoding.code || valueCoding.display || valueCoding.system)
-            ? { valueCoding }
-            : valueInteger !== undefined
-            ? { valueInteger }
-            : { valueCoding };
-          newAnswers = [...newAnswers, answer];
-        } else {
-          // Normal behavior: Add the answer (respecting maxAnswers limit)
-          const maxAnswers = item.maxAnswers || Number.MAX_SAFE_INTEGER;
-          if (currentAnswers.length < maxAnswers) {
-            // For choice questions, only set one field: valueCoding takes precedence
-            const answer = valueCoding && (valueCoding.code || valueCoding.display || valueCoding.system)
-              ? { valueCoding }
-              : valueInteger !== undefined
-              ? { valueInteger }
-              : { valueCoding };
-            newAnswers = [...currentAnswers, answer];
-          } else {
-            // Already at max, don't add
-            return;
-          }
-        }
-      }
-    }
-
-    updateMultipleAnswers(item.linkId, newAnswers);
-  };
-
-  const handleIntegerChange = (value: string) => {
-    // Allow clearing the controlled input
-    if (value === "") {
-      updateAnswer(item.linkId, {});
-      return;
-    }
-    const numValue = parseInt(value);
-    if (!isNaN(numValue)) {
-      updateAnswer(item.linkId, { valueInteger: numValue });
-    }
-  };
-
-  const handleDecimalChange = (value: string) => {
-    // Allow clearing the controlled input
-    if (value === "") {
-      updateAnswer(item.linkId, {});
-      return;
-    }
-    const numValue = parseFloat(value);
-    if (!isNaN(numValue)) {
-      updateAnswer(item.linkId, { valueDecimal: numValue });
-    }
-  };
-
-  const handleStringChange = (value: string) => {
-    updateAnswer(item.linkId, { valueString: value });
-  };
-
-  const handleBooleanChange = (value: boolean) => {
-    updateAnswer(item.linkId, { valueBoolean: value });
-  };
-
-  // Check if this field should use a slider control
-  const getSliderConfig = () => {
-    const sliderExt = item.extension?.find(
-      (ext) =>
-        ext.url ===
-        "http://codes.welshare.app/StructureDefinition/questionnaire-slider-control"
-    );
-
-    if (!sliderExt?.extension) return null;
-
-    const minValue =
-      sliderExt.extension.find((e) => e.url === "minValue")?.valueInteger ?? 0;
-    const maxValue =
-      sliderExt.extension.find((e) => e.url === "maxValue")?.valueInteger ??
-      100;
-    const step =
-      sliderExt.extension.find((e) => e.url === "step")?.valueInteger ?? 1;
-    const unit =
-      sliderExt.extension.find((e) => e.url === "unit")?.valueString ?? "";
-
-    return { minValue, maxValue, step, unit };
-  };
-
-  const sliderConfig = getSliderConfig();
-
-  const renderQuestion = () => {
-    switch (item.type) {
-      case "choice":
-        // Multi-select with checkboxes when repeats is true
-        if (item.repeats) {
-          return (
-            <MultipleChoiceQuestion
-              item={item}
-              currentAnswers={currentAnswers}
-              onMultipleChoiceToggle={handleMultipleChoiceToggle}
-              choiceClassName={choiceClassName}
-              renderCheckboxInput={renderCheckboxInput}
-            />
-          );
-        }
-
-        // Single-select with radio buttons (default)
-        return (
-          <ChoiceQuestion
-            item={item}
-            currentAnswer={currentAnswer}
-            onChoiceChange={handleChoiceChange}
-            choiceClassName={choiceClassName}
-            renderRadioInput={renderRadioInput}
-          />
-        );
-
-      case "integer":
-        return (
-          <IntegerQuestion
-            item={item}
-            currentAnswer={currentAnswer}
-            onIntegerChange={handleIntegerChange}
-            inputClassName={inputClassName}
-            sliderConfig={sliderConfig}
-          />
-        );
-
-      case "decimal":
-        return (
-          <DecimalQuestion
-            item={item}
-            currentAnswer={currentAnswer}
-            onDecimalChange={handleDecimalChange}
-            inputClassName={inputClassName}
-          />
-        );
-
-      case "string":
-      case "text":
-        return (
-          <StringQuestion
-            item={item}
-            currentAnswer={currentAnswer}
-            onStringChange={handleStringChange}
-            inputClassName={inputClassName}
-          />
-        );
-
-      case "boolean":
-        return (
-          <BooleanQuestion
-            item={item}
-            currentAnswer={currentAnswer}
-            onBooleanChange={handleBooleanChange}
-            choiceClassName={choiceClassName}
-            renderRadioInput={renderRadioInput}
-          />
-        );
-
-      default:
-        return (
-          <div className="wq-unsupported-type">
-            Unsupported question type: {item.type}
-          </div>
-        );
-    }
-  };
-
-  return (
-    <div
-      className={`wq-question-container ${hasError ? "wq-has-error" : ""} ${className}`}
-    >
-      <div className="wq-question-text">
-        {item.text}
-        {item.required && <span className="wq-required-indicator">*</span>}
-      </div>
-      {renderQuestion()}
-    </div>
-  );
-};