@welshare/questionnaire 0.1.0

package/dist/node_modules/@welshare/questionnaire/src/types/fhir.ts

@@ -0,0 +1,126 @@
+// FHIR Types for Questionnaire and QuestionnaireResponse
+// Based on FHIR R4 Specification with extensions commonly used in Welshare surveys
+
+export type Coding = {
+  system?: string;
+  version?: string;
+  code?: string;
+  display?: string;
+  userSelected?: boolean;
+}
+
+export type QuestionnaireItemAnswerOption = {
+  valueCoding?: Coding;
+  valueInteger?: number;
+  valueDate?: string;
+  valueTime?: string;
+  valueString?: string;
+  initialSelected?: boolean;
+}
+
+export type Extension = {
+  url: string;
+  valueBoolean?: boolean;
+  valueString?: string;
+  valueInteger?: number;
+  valueCodeableConcept?: {
+    coding?: Coding[];
+  };
+  valueExpression?: {
+    language?: string;
+    expression?: string;
+  };
+  extension?: Extension[];
+}
+
+export type QuestionnaireItem = {
+  linkId: string;
+  definition?: string;
+  code?: Coding[];
+  prefix?: string;
+  text?: string;
+  type: 'group' | 'display' | 'boolean' | 'decimal' | 'integer' | 'date' | 'dateTime' | 'time' | 'string' | 'text' | 'url' | 'choice' | 'open-choice' | 'attachment' | 'reference' | 'quantity';
+  enableWhen?: Array<{
+    question: string;
+    operator: string;
+    answerBoolean?: boolean;
+    answerDecimal?: number;
+    answerInteger?: number;
+    answerDate?: string;
+    answerDateTime?: string;
+    answerTime?: string;
+    answerString?: string;
+    answerCoding?: Coding;
+  }>;
+  enableBehavior?: string;
+  required?: boolean;
+  repeats?: boolean;
+  readOnly?: boolean;
+  maxLength?: number;
+  maxAnswers?: number;
+  answerValueSet?: string;
+  answerOption?: QuestionnaireItemAnswerOption[];
+  initial?: Array<{
+    valueBoolean?: boolean;
+    valueDecimal?: number;
+    valueInteger?: number;
+    valueDate?: string;
+    valueDateTime?: string;
+    valueTime?: string;
+    valueString?: string;
+    valueCoding?: Coding;
+  }>;
+  extension?: Extension[];
+  item?: QuestionnaireItem[];
+}
+
+export type Questionnaire = {
+  resourceType: 'Questionnaire';
+  id: string;
+  url?: string;
+  version?: string;
+  name?: string;
+  title?: string;
+  status: 'draft' | 'active' | 'retired' | 'unknown';
+  subjectType?: string[];
+  date?: string;
+  publisher?: string;
+  description?: string;
+  item?: QuestionnaireItem[];
+}
+
+export type QuestionnaireResponseAnswer = {
+  valueBoolean?: boolean;
+  valueDecimal?: number;
+  valueInteger?: number;
+  valueDate?: string;
+  valueDateTime?: string;
+  valueTime?: string;
+  valueString?: string;
+  valueUri?: string;
+  valueCoding?: Coding;
+  valueQuantity?: {
+    value?: number;
+    unit?: string;
+    system?: string;
+    code?: string;
+  };
+  item?: QuestionnaireResponseItem[];
+}
+
+export type QuestionnaireResponseItem = {
+  linkId: string;
+  definition?: string;
+  text?: string;
+  answer?: QuestionnaireResponseAnswer[];
+  item?: QuestionnaireResponseItem[];
+}
+
+export type QuestionnaireResponse = {
+  resourceType: 'QuestionnaireResponse';
+  id?: string;
+  questionnaire?: string;
+  status: 'in-progress' | 'completed' | 'amended' | 'entered-in-error' | 'stopped';
+  authored?: string;
+  item?: QuestionnaireResponseItem[];
+}

package/dist/node_modules/@welshare/questionnaire/src/types/index.ts

@@ -0,0 +1,44 @@
+/**
+ * Props for rendering a radio button option
+ */
+export interface RadioInputProps {
+  /** The linkId of the question item */
+  linkId: string;
+  /** The option's value coding */
+  valueCoding?: { system?: string; code?: string; display?: string };
+  /** The option's integer value (if applicable) */
+  valueInteger?: number;
+  /** Whether this option is currently selected */
+  checked: boolean;
+  /** Whether this option is disabled */
+  disabled?: boolean;
+  /** Callback when the option is selected */
+  onChange: () => void;
+  /** The display text for this option */
+  label: string;
+  /** The index of this option in the list */
+  index: number;
+}
+
+
+/**
+ * Props for rendering a checkbox option
+ */
+export interface CheckboxInputProps {
+  /** The linkId of the question item */
+  linkId: string;
+  /** The option's value coding */
+  valueCoding?: { system?: string; code?: string; display?: string };
+  /** The option's integer value (if applicable) */
+  valueInteger?: number;
+  /** Whether this option is currently selected */
+  checked: boolean;
+  /** Whether this option is disabled */
+  disabled?: boolean;
+  /** Callback when the option is toggled */
+  onChange: () => void;
+  /** The display text for this option */
+  label: string;
+  /** The index of this option in the list */
+  index: number;
+}

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

@@ -0,0 +1,16 @@
+{
+  "extends": "@workspace/typescript-config/react-library.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "allowJs": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": ["node_modules", "dist"]
+}

package/dist/styles.css

@@ -0,0 +1,467 @@
+/**
+ * Welshare Questionnaire Styles
+ *
+ * Scoped styles using .wq- prefix to avoid conflicts with other CSS systems.
+ * Uses CSS custom properties from questionnaire-tokens.css for easy customization.
+ *
+ * Import both files in your application:
+ *   import '@welshare/react/questionnaire-tokens.css';
+ *   import '@welshare/react/questionnaire-styles.css';
+ */
+
+/* === Question Container === */
+.wq-question-container {
+  margin-bottom: var(--wq-question-gap);
+  padding: var(--wq-space-lg);
+  border-radius: var(--wq-radius-md);
+  transition: all var(--wq-transition-base);
+}
+
+.wq-question-container.wq-has-error {
+  border: var(--wq-border-width) solid var(--wq-color-error-border);
+  background-color: var(--wq-color-error-bg);
+}
+
+/* === Question Text === */
+.wq-question-text {
+  font-size: var(--wq-font-size-lg);
+  font-weight: var(--wq-font-weight-medium);
+  margin-bottom: var(--wq-space-md);
+  color: var(--wq-color-text-primary);
+  line-height: 1.5;
+}
+
+.wq-required-indicator {
+  color: var(--wq-color-error);
+  margin-left: var(--wq-space-xs);
+  font-weight: var(--wq-font-weight-semibold);
+}
+
+/* === Choice Inputs (Radio/Checkbox) === */
+.wq-question-choice {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wq-space-md);
+}
+
+.wq-choice-option {
+  display: flex;
+  align-items: center;
+  padding: var(--wq-choice-padding-y) var(--wq-choice-padding-x);
+  border: var(--wq-border-width) solid var(--wq-color-border);
+  border-radius: var(--wq-radius-md);
+  cursor: pointer;
+  transition: all var(--wq-transition-fast);
+  background-color: var(--wq-color-surface);
+}
+
+.wq-choice-option:hover:not(.wq-disabled) {
+  border-color: var(--wq-color-border-hover);
+  background-color: var(--wq-color-background);
+}
+
+.wq-choice-option.wq-selected {
+  border-color: var(--wq-color-selected-border);
+  background-color: var(--wq-color-selected);
+}
+
+.wq-choice-option.wq-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* === Default Input Styling (for backward compatibility) === */
+/* Note: When using custom renderers, these styles won't apply */
+.wq-choice-option input[type="radio"],
+.wq-choice-option input[type="checkbox"] {
+  margin-right: var(--wq-space-md);
+  width: 1.25rem;
+  height: 1.25rem;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.wq-choice-option.wq-disabled input[type="radio"],
+.wq-choice-option.wq-disabled input[type="checkbox"] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.wq-choice-label {
+  flex: 1;
+  font-size: var(--wq-font-size-base);
+  color: var(--wq-color-text-secondary);
+  line-height: 1.5;
+}
+
+.wq-choice-option.wq-selected .wq-choice-label {
+  color: var(--wq-color-text-primary);
+  font-weight: var(--wq-font-weight-medium);
+}
+
+.wq-max-answers-hint {
+  font-size: var(--wq-font-size-sm);
+  color: var(--wq-color-text-tertiary);
+  margin-top: var(--wq-space-sm);
+  font-weight: var(--wq-font-weight-normal);
+}
+
+/* === Text Inputs === */
+.wq-question-input {
+  width: 100%;
+  padding: var(--wq-input-padding-y) var(--wq-input-padding-x);
+  border: var(--wq-border-width) solid var(--wq-color-border);
+  border-radius: var(--wq-radius-md);
+  font-size: var(--wq-font-size-base);
+  color: var(--wq-color-text-primary);
+  background-color: var(--wq-color-surface);
+  transition: all var(--wq-transition-fast);
+  min-height: var(--wq-input-height);
+  line-height: 1.5;
+}
+
+.wq-question-input:hover {
+  border-color: var(--wq-color-border-hover);
+}
+
+.wq-question-input:focus {
+  outline: none;
+  border-color: var(--wq-color-border-focus);
+  box-shadow: var(--wq-shadow-focus);
+}
+
+.wq-question-input::placeholder {
+  color: var(--wq-color-text-placeholder);
+}
+
+.wq-question-input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background-color: var(--wq-color-background);
+}
+
+/* === Slider Inputs === */
+.wq-question-slider {
+  padding: var(--wq-space-lg) 0;
+}
+
+.wq-slider-input {
+  width: 100%;
+  height: var(--wq-slider-height);
+  border-radius: var(--wq-radius-sm);
+  background: var(--wq-color-border);
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: pointer;
+  margin-bottom: 1rem;
+
+}
+
+.wq-slider-input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: var(--wq-slider-thumb-size);
+  height: var(--wq-slider-thumb-size);
+  border-radius: var(--wq-radius-full);
+  background: var(--wq-color-primary);
+  cursor: pointer;
+  transition: all var(--wq-transition-fast);
+  box-shadow: var(--wq-shadow-sm);
+}
+
+.wq-slider-input::-webkit-slider-thumb:hover {
+  background: var(--wq-color-primary-hover);
+  transform: scale(1.1);
+}
+
+.wq-slider-input::-webkit-slider-thumb:active {
+  transform: scale(0.95);
+}
+
+.wq-slider-input::-moz-range-thumb {
+  width: var(--wq-slider-thumb-size);
+  height: var(--wq-slider-thumb-size);
+  border-radius: var(--wq-radius-full);
+  background: var(--wq-color-primary);
+  cursor: pointer;
+  border: none;
+  transition: all var(--wq-transition-fast);
+  box-shadow: var(--wq-shadow-sm);
+}
+
+.wq-slider-input::-moz-range-thumb:hover {
+  background: var(--wq-color-primary-hover);
+  transform: scale(1.1);
+}
+
+.wq-slider-input::-moz-range-thumb:active {
+  transform: scale(0.95);
+}
+
+.wq-slider-input:focus {
+  outline: none;
+}
+
+.wq-slider-input:focus::-webkit-slider-thumb {
+  box-shadow: var(--wq-shadow-focus);
+}
+
+.wq-slider-input:focus::-moz-range-thumb {
+  box-shadow: var(--wq-shadow-focus);
+}
+
+.wq-slider-value-display {
+  text-align: center;
+  margin-top: var(--wq-space-lg);
+  font-size: var(--wq-font-size-xl);
+  font-weight: var(--wq-font-weight-semibold);
+  color: var(--wq-color-text-primary);
+  border: 2px solid var(--wq-color-border);
+  border-radius: var(--wq-radius-md);
+}
+
+.wq-slider-value {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--wq-color-primary);
+  font-variant-numeric: tabular-nums;
+}
+
+.wq-slider-unit {
+  font-size: var(--wq-font-size-base);
+  font-weight: var(--wq-font-weight-normal);
+  color: var(--wq-color-text-tertiary);
+  margin-left: var(--wq-space-sm);
+}
+
+.wq-slider-range-labels {
+  display: flex;
+  justify-content: space-between;
+  margin-top: var(--wq-space-sm);
+  font-size: var(--wq-font-size-sm);
+  color: var(--wq-color-text-tertiary);
+}
+
+.wq-slider-min,
+.wq-slider-max {
+  font-weight: var(--wq-font-weight-medium);
+}
+
+/* === Unsupported Type === */
+.wq-unsupported-type {
+  padding: var(--wq-space-lg);
+  background-color: var(--wq-color-warning-50);
+  border: var(--wq-border-width) solid var(--wq-color-warning-500);
+  border-radius: var(--wq-radius-md);
+  color: var(--wq-color-warning-800);
+  font-weight: var(--wq-font-weight-medium);
+  font-size: var(--wq-font-size-base);
+}
+
+/* === Progress Bar === */
+.wq-progress-bar {
+  width: 100%;
+  height: var(--wq-progress-height);
+  background-color: var(--wq-color-border);
+  border-radius: var(--wq-radius-sm);
+  overflow: hidden;
+  margin-bottom: var(--wq-space-lg);
+}
+
+.wq-progress-fill {
+  height: 100%;
+  background-color: var(--wq-color-primary);
+  transition: width var(--wq-transition-slow);
+}
+
+/* === Loading and Error States === */
+.wq-loading,
+.wq-error {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 20rem;
+  font-size: var(--wq-font-size-lg);
+  color: var(--wq-color-text-tertiary);
+}
+
+.wq-error {
+  color: var(--wq-color-error);
+  font-weight: var(--wq-font-weight-medium);
+}
+
+/* === Accessibility === */
+.wq-question-input:focus-visible,
+.wq-choice-option:focus-within {
+  outline: var(--wq-border-width) solid var(--wq-color-border-focus);
+  outline-offset: 2px;
+}
+
+/* === Responsive Design === */
+@media (max-width: 640px) {
+  .wq-question-container {
+    padding: var(--wq-space-md);
+  }
+
+  .wq-question-text {
+    font-size: var(--wq-font-size-base);
+  }
+
+  .wq-choice-option {
+    padding: var(--wq-space-sm) var(--wq-space-md);
+  }
+
+  .wq-slider-value-display {
+    font-size: var(--wq-font-size-lg);
+  }
+}
+
+/* === Print Styles === */
+@media print {
+  .wq-question-container {
+    page-break-inside: avoid;
+    break-inside: avoid;
+  }
+
+  .wq-choice-option.wq-selected {
+    border-color: #000;
+    background-color: #f0f0f0;
+  }
+}
+
+
+/* Debug Section Styles
+ * These styles are designed to work with the questionnaire library's CSS variables
+ * and can be easily moved to the shared package.
+ */
+
+ .wq-debug-section {
+  margin-top: 1.5rem;
+  padding: 1rem;
+  background-color: var(--wq-color-background);
+  border: 1px solid var(--wq-color-border);
+  border-radius: var(--wq-radius-md);
+}
+
+.wq-loinc-link-section {
+  margin-bottom: 1rem;
+  padding: 0.75rem;
+}
+
+.wq-loinc-link {
+  color: var(--wq-color-primary);
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 0.9rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  transition: all 0.2s ease;
+}
+
+.wq-loinc-link:hover {
+  text-decoration: underline;
+}
+
+.wq-loinc-link::after {
+  content: "↗";
+  font-size: 1rem;
+}
+
+.wq-debug-title {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--wq-color-primary);
+  margin-bottom: 0.5rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.wq-debug-json {
+  margin: 0;
+  padding: 0.75rem;
+  background: rgba(0, 0, 0, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.35);
+  border-radius: 4px;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 0.85rem;
+  color: #e0e0e0;
+  overflow-x: auto;
+  white-space: pre;
+  line-height: 1.5;
+  margin-bottom: 1rem;
+}
+
+.wq-debug-json:last-child {
+  margin-bottom: 0;
+}
+
+/* Collapsible Debug Section Styles */
+.wq-debug-collapsible {
+  margin-bottom: 0.75rem;
+}
+
+.wq-debug-collapsible:last-child {
+  margin-bottom: 0;
+}
+
+.wq-debug-collapsible-header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: rgba(255, 165, 0, 0.15);
+  border: 1px solid rgba(255, 165, 0, 0.3);
+  border-radius: var(--wq-radius-md);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-family: inherit;
+  font-size: 0.85rem;
+  color: var(--wq-color-text-primary);
+  text-align: left;
+}
+
+.wq-debug-collapsible-header:hover {
+  background: rgba(255, 165, 0, 0.25);
+  border-color: rgba(255, 165, 0, 0.5);
+}
+
+.wq-debug-collapsible-header:active {
+  transform: scale(0.98);
+}
+
+.wq-debug-collapsible-header .chevron {
+  font-size: 0.7rem;
+  color: var(--wq-color-primary);
+  transition: transform 0.2s ease;
+  display: inline-block;
+}
+
+.wq-debug-collapsible-header .chevron.open {
+  transform: rotate(90deg);
+}
+
+.wq-debug-collapsible-header .debug-title {
+  margin: 0;
+  flex: 1;
+}
+
+.wq-debug-collapsible .debug-json {
+  margin-top: 0.5rem;
+  margin-bottom: 0;
+  animation: wq-slideDown 0.2s ease-out;
+}
+
+@keyframes wq-slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+