@welshare/questionnaire 0.1.0

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

@@ -0,0 +1,68 @@
+import { type ReactNode } from 'react';
+import type { QuestionnaireItem, QuestionnaireResponseAnswer } from '../../types/fhir.js';
+import { RadioInputProps } from '@/types/index.js';
+
+
+export interface ChoiceQuestionProps {
+  item: QuestionnaireItem;
+  currentAnswer?: QuestionnaireResponseAnswer;
+  onChoiceChange: (
+    valueCoding: { system?: string; code?: string; display?: string },
+    valueInteger?: number
+  ) => void;
+  choiceClassName?: string;
+  renderRadioInput?: (props: RadioInputProps) => ReactNode;
+}
+
+/**
+ * Renders a single-select choice question with radio buttons
+ */
+export const ChoiceQuestion = ({
+  item,
+  currentAnswer,
+  onChoiceChange,
+  choiceClassName = '',
+  renderRadioInput
+}: ChoiceQuestionProps) => {
+  return (
+    <div className={`wq-question-choice ${choiceClassName}`}>
+      {item.answerOption?.map((option, index) => {
+        const isSelected = currentAnswer?.valueCoding?.code === option.valueCoding?.code;
+        
+        // Use custom renderer if provided
+        if (renderRadioInput) {
+          return (
+            <div key={index}>
+              {renderRadioInput({
+                linkId: item.linkId,
+                valueCoding: option.valueCoding,
+                valueInteger: option.valueInteger,
+                checked: isSelected,
+                onChange: () => onChoiceChange(option.valueCoding || {}, option.valueInteger),
+                label: option.valueCoding?.display || '',
+                index
+              })}
+            </div>
+          );
+        }
+
+        // Default rendering
+        return (
+          <label key={index} className={`wq-choice-option ${isSelected ? 'wq-selected' : ''}`}>
+            <input
+              type="radio"
+              name={item.linkId}
+              value={option.valueCoding?.code}
+              checked={isSelected}
+              onChange={() => onChoiceChange(option.valueCoding || {}, option.valueInteger)}
+              data-wq-input="radio"
+              data-wq-selected={isSelected}
+            />
+            <span className="wq-choice-label">{option.valueCoding?.display}</span>
+          </label>
+        );
+      })}
+    </div>
+  );
+};
+

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

@@ -0,0 +1,32 @@
+import type {
+  QuestionnaireItem,
+  QuestionnaireResponseAnswer,
+} from "../../types/fhir.js";
+
+export interface DecimalQuestionProps {
+  item: QuestionnaireItem;
+  currentAnswer?: QuestionnaireResponseAnswer;
+  onDecimalChange: (value: string) => void;
+  inputClassName?: string;
+}
+
+/**
+ * Renders a decimal question with number input
+ */
+export const DecimalQuestion = ({
+  item,
+  currentAnswer,
+  onDecimalChange,
+  inputClassName = "",
+}: DecimalQuestionProps) => {
+  return (
+    <input
+      type="number"
+      className={`wq-question-input ${inputClassName}`}
+      value={currentAnswer?.valueDecimal ?? ""}
+      onChange={(e) => onDecimalChange(e.target.value)}
+      placeholder="Enter a number"
+      step="0.1"
+    />
+  );
+};

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

@@ -0,0 +1,87 @@
+import type {
+  QuestionnaireItem,
+  QuestionnaireResponseAnswer,
+} from "../../types/fhir.js";
+
+export interface IntegerQuestionProps {
+  item: QuestionnaireItem;
+  currentAnswer?: QuestionnaireResponseAnswer;
+  onIntegerChange: (value: string) => void;
+  inputClassName?: string;
+  sliderConfig?: {
+    minValue: number;
+    maxValue: number;
+    step: number;
+    unit: string;
+  } | null;
+}
+
+/**
+ * Renders an integer question with optional slider control
+ */
+export const IntegerQuestion = ({
+  item,
+  currentAnswer,
+  onIntegerChange,
+  inputClassName = "",
+  sliderConfig,
+}: IntegerQuestionProps) => {
+  // Render slider if slider config is present
+  if (sliderConfig) {
+    // Use current answer, or fallback to initial value, or fallback to minValue
+    const initialValue = item.initial?.[0]?.valueInteger;
+    const value =
+      currentAnswer?.valueInteger ?? initialValue ?? sliderConfig.minValue;
+    const unit = sliderConfig.unit || "";
+
+    // Create abbreviated unit for range labels
+    const unitShort =
+      unit === "minutes"
+        ? "min"
+        : unit === "hours"
+          ? "hr"
+          : unit === "days per week"
+            ? "days"
+            : unit;
+
+    return (
+      <div className="wq-question-slider">
+        <input
+          type="range"
+          className={`wq-slider-input ${inputClassName}`}
+          min={sliderConfig.minValue}
+          max={sliderConfig.maxValue}
+          step={sliderConfig.step}
+          value={value}
+          onChange={(e) => onIntegerChange(e.target.value)}
+        />
+        <div className="wq-slider-value-display">
+          <span className="wq-slider-value">{value}</span>
+          {unit && <span className="wq-slider-unit">{unit}</span>}
+        </div>
+        <div className="wq-slider-range-labels">
+          <span className="wq-slider-min">
+            {sliderConfig.minValue}
+            {unitShort && ` ${unitShort}`}
+          </span>
+          <span className="wq-slider-max">
+            {sliderConfig.maxValue}
+            {unitShort && ` ${unitShort}`}
+          </span>
+        </div>
+      </div>
+    );
+  }
+
+  // Default number input
+  return (
+    <input
+      type="number"
+      className={`wq-question-input ${inputClassName}`}
+      value={currentAnswer?.valueInteger ?? ""}
+      onChange={(e) => onIntegerChange(e.target.value)}
+      placeholder="Enter a number"
+      step="1"
+    />
+  );
+};

package/dist/node_modules/@welshare/questionnaire/src/components/questions/multiple-choice-question.tsx

@@ -0,0 +1,119 @@
+import { type ReactNode } from "react";
+import type {
+  QuestionnaireItem,
+  QuestionnaireResponseAnswer,
+} from "../../types/fhir.js";
+import { CheckboxInputProps } from "../../types/index.js";
+
+export interface MultipleChoiceQuestionProps {
+  item: QuestionnaireItem;
+  currentAnswers: QuestionnaireResponseAnswer[];
+  onMultipleChoiceToggle: (
+    valueCoding: { system?: string; code?: string; display?: string },
+    valueInteger?: number
+  ) => void;
+  choiceClassName?: string;
+  renderCheckboxInput?: (props: CheckboxInputProps) => ReactNode;
+}
+
+/**
+ * Renders a multi-select choice question with checkboxes
+ * Supports exclusive options and maxAnswers limits
+ */
+export const MultipleChoiceQuestion = ({
+  item,
+  currentAnswers,
+  onMultipleChoiceToggle,
+  choiceClassName = "",
+  renderCheckboxInput,
+}: MultipleChoiceQuestionProps) => {
+  const maxAnswers = item.maxAnswers || Number.MAX_SAFE_INTEGER;
+  const atMaxAnswers = currentAnswers.length >= maxAnswers;
+
+  // 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;
+
+  // Check if the exclusive option is currently selected
+  const exclusiveSelected =
+    exclusiveOptionCode &&
+    currentAnswers.some(
+      (answer) => answer.valueCoding?.code === exclusiveOptionCode
+    );
+
+  // Filter options to show: if exclusive option is selected, only show that one
+  const optionsToShow = exclusiveSelected
+    ? item.answerOption?.filter(
+        (opt) => opt.valueCoding?.code === exclusiveOptionCode
+      )
+    : item.answerOption;
+
+  return (
+    <div className={`wq-question-choice ${choiceClassName}`}>
+      {optionsToShow?.map((option, index) => {
+        const isSelected = currentAnswers.some(
+          (answer) => answer.valueCoding?.code === option.valueCoding?.code
+        );
+        const isDisabled = !isSelected && atMaxAnswers;
+
+        // Use custom renderer if provided
+        if (renderCheckboxInput) {
+          return (
+            <div key={index}>
+              {renderCheckboxInput({
+                linkId: item.linkId,
+                valueCoding: option.valueCoding,
+                valueInteger: option.valueInteger,
+                checked: isSelected,
+                disabled: isDisabled,
+                onChange: () =>
+                  onMultipleChoiceToggle(
+                    option.valueCoding || {},
+                    option.valueInteger
+                  ),
+                label: option.valueCoding?.display || "",
+                index,
+              })}
+            </div>
+          );
+        }
+
+        // Default rendering
+        return (
+          <label
+            key={index}
+            className={`wq-choice-option ${isSelected ? "wq-selected" : ""} ${isDisabled ? "wq-disabled" : ""}`}
+          >
+            <input
+              type="checkbox"
+              name={item.linkId}
+              value={option.valueCoding?.code}
+              checked={isSelected}
+              disabled={isDisabled}
+              onChange={() =>
+                onMultipleChoiceToggle(
+                  option.valueCoding || {},
+                  option.valueInteger
+                )
+              }
+              data-wq-input="checkbox"
+              data-wq-selected={isSelected}
+            />
+            <span className="wq-choice-label">
+              {option.valueCoding?.display}
+            </span>
+          </label>
+        );
+      })}
+      {item.maxAnswers && (
+        <div className="wq-max-answers-hint">
+          Selected: {currentAnswers.length} / {item.maxAnswers}
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,31 @@
+import type {
+  QuestionnaireItem,
+  QuestionnaireResponseAnswer,
+} from "../../types/fhir.js";
+
+export interface StringQuestionProps {
+  item: QuestionnaireItem;
+  currentAnswer?: QuestionnaireResponseAnswer;
+  onStringChange: (value: string) => void;
+  inputClassName?: string;
+}
+
+/**
+ * Renders a string or text question with text input
+ */
+export const StringQuestion = ({
+  item,
+  currentAnswer,
+  onStringChange,
+  inputClassName = "",
+}: StringQuestionProps) => {
+  return (
+    <input
+      type="text"
+      className={`wq-question-input ${inputClassName}`}
+      value={currentAnswer?.valueString ?? ""}
+      onChange={(e) => onStringChange(e.target.value)}
+      placeholder="Enter your answer"
+    />
+  );
+};