case-editor-tools 1.0.0-beta.15 → 1.0.0-beta.16

package/src/surveys/types/group.ts

@@ -0,0 +1,73 @@
+import { Expression, SurveyGroupItem, SurveyItem } from "survey-engine/lib/data_types";
+import { Logger } from "../../logger/logger";
+import { ItemEditor } from "../survey-editor/item-editor";
+import { generatePageBreak } from "../utils/simple-generators";
+
+export abstract class Group {
+  groupEditor: ItemEditor;
+  key: string;
+  private parentKey: string;
+
+  constructor(parentKey: string, groupKey: string, selectionMethod?: Expression) {
+    this.parentKey = parentKey;
+    this.key = [this.parentKey, groupKey].join('.');
+    this.groupEditor = new ItemEditor(undefined, {
+      itemKey: this.key,
+      isGroup: true
+    });
+    if (!selectionMethod) {
+      this.groupEditor.setSelectionMethod({ name: 'sequential' });
+    } else {
+      this.groupEditor.setSelectionMethod(selectionMethod);
+    }
+  }
+
+  abstract buildGroup(): void;
+
+  /**
+   * Check if this group is currently part of a path, by checking if the key attribute exists in the path of the group.
+   * @param partialKey Is this key segment included somewhere in the parent key of this item.
+   * @returns
+   */
+  isPartOf(partialKey: string): boolean {
+    return this.parentKey.includes(partialKey)
+  }
+
+  /**
+   * Use this method to retrieve the generated survey item
+   * @returns
+   */
+  get() {
+    this.buildGroup();
+    this.checkDuplicateChildKeys();
+    return this.groupEditor.getItem();
+  }
+
+  addPageBreak() {
+    this.groupEditor.addSurveyItem(generatePageBreak(this.key));
+  }
+
+  addItem(item: SurveyItem, pageBreakAfter?: boolean) {
+    this.groupEditor.addSurveyItem(item);
+    if (pageBreakAfter) {
+      this.addPageBreak();
+    }
+  }
+
+  private checkDuplicateChildKeys() {
+    const group = this.groupEditor.getItem() as SurveyGroupItem;
+    const keys = group.items.map(item => item.key);
+    const hasDuplicates = keys.some((key, index) => {
+      const isDuplicateKey = keys.indexOf(key) !== index;
+      if (isDuplicateKey) {
+        Logger.error('Duplicate key:');
+        Logger.criticalError(`${key} is used twice (at index ${keys.indexOf(key)} and at index ${index})`);
+      }
+      return isDuplicateKey;
+    });
+    if (hasDuplicates) {
+      Logger.error('\nSurvey contains duplicate keys.\nPlease check the lines above for more infos.\nProcess stopped prematurely.')
+      process.exit(1)
+    }
+  }
+}

package/{surveys/types/index.d.ts → src/surveys/types/index.ts}

@@ -1,4 +1,4 @@
-export * from './group';
-export * from './item';
-export * from './item-properties';
-export * from './survey-definition';
+export * from './group';
+export * from './item';
+export * from './item-properties';
+export * from './survey-definition';

package/src/surveys/types/item-properties.ts

@@ -0,0 +1,204 @@
+import { ComponentProperties, Expression, ItemComponent, Validation } from "survey-engine/lib/data_types";
+import { Duration } from "../../types/duration";
+
+export interface StyledTextComponentProp {
+  content: Map<string, string>;
+  className?: string;
+}
+
+export interface OptionDef {
+  key: string;
+  role: string;
+  content?: Map<string, string>;
+  items?: Array<StyledTextComponentProp> | Array<OptionDef>;
+  description?: Map<string, string>;
+  displayCondition?: Expression;
+  disabled?: Expression;
+  style?: Array<{ key: string, value: string }>;
+  optionProps?: ComponentProperties;
+}
+
+export interface GenericQuestionProps {
+  parentKey: string;
+  itemKey: string;
+  version?: number;
+  questionText: Map<string, string> | Array<StyledTextComponentProp>;
+  questionSubText?: Map<string, string>;
+  titleClassName?: string;
+  helpGroupContent?: Array<{
+    content: Map<string, string>,
+    style?: Array<{ key: string, value: string }>,
+  }>;
+  condition?: Expression;
+  topDisplayCompoments?: Array<ItemComponent>;
+  bottomDisplayCompoments?: Array<ItemComponent>;
+  isRequired?: boolean;
+  footnoteText?: Map<string, string>;
+  customValidations?: Array<Validation>;
+}
+
+
+/**
+ * Numeric Input
+ */
+export interface NumericInputProps {
+  inputLabel: Map<string, string>;
+  labelBehindInput?: boolean;
+  componentProperties?: ComponentProperties;
+  inputMaxWidth?: string;
+  disabled?: Expression;
+}
+
+export type NumericInputQuestionProps = GenericQuestionProps & NumericInputProps;
+
+
+/**
+ * Date Input
+ */
+export interface DateInputProps {
+  dateInputMode: 'YMD' | 'YM' | 'Y';
+  inputLabelText?: Map<string, string>;
+  placeholderText?: Map<string, string>;
+  minRelativeDate?: {
+    reference?: number | Expression;
+    delta: Duration;
+  };
+  maxRelativeDate?: {
+    reference?: number | Expression;
+    delta: Duration;
+  };
+}
+
+export type DateInputQuestionProps = DateInputProps & GenericQuestionProps;
+
+
+/**
+ * Text Input
+ */
+export interface TextInputProps {
+  placeholderText?: Map<string, string>;
+  inputLabel?: Map<string, string>;
+  inputMaxWidth?: string;
+  className?: string;
+  maxLength?: number; // number of charachters allowed
+  disabled?: Expression;
+}
+
+export type TextInputQuestionProps = TextInputProps & GenericQuestionProps;
+
+export interface MultiLineTextInput extends GenericQuestionProps {
+  inputLabelText?: Map<string, string>;
+  placeholderText?: Map<string, string>;
+  maxLength?: number;
+}
+
+
+/**
+ * Cloze Question
+ */
+export interface ClozeProps {
+  items: Array<OptionDef>;
+}
+
+export type ClozeQuestionProps = ClozeProps & GenericQuestionProps;
+
+
+/**
+ * Response Single Choice Likert Array
+ */
+export type ResponsiveSingleChoiceArrayVariant = 'horizontal' | 'vertical' | 'table';
+
+export interface ResponsiveSingleChoiceArrayProps {
+  scaleOptions: Array<{
+    key: string;
+    className?: string;
+    content: Map<string, string> | StyledTextComponentProp[];
+  }>,
+  rows: Array<{
+    key: string;
+    content: Map<string, string> | StyledTextComponentProp[];
+    horizontalModeProps?: {
+      labelPlacement?: 'none' | 'top' | 'bottom';
+      className?: string;
+    },
+    verticalModeProps?: {
+      className?: string;
+    }
+    tableModeProps?: {
+      className?: string;
+    }
+  }>,
+  defaultMode: ResponsiveSingleChoiceArrayVariant;
+  responsiveModes?: {
+    sm?: ResponsiveSingleChoiceArrayVariant;
+    md?: ResponsiveSingleChoiceArrayVariant;
+    lg?: ResponsiveSingleChoiceArrayVariant;
+    xl?: ResponsiveSingleChoiceArrayVariant;
+    xxl?: ResponsiveSingleChoiceArrayVariant;
+  },
+  rgClassName?: string;
+  tableModeProps?: {
+    className?: string;
+    layout?: "fixed";
+    firstColWidth?: string;
+    optionHeaderClassName?: string;
+    hideRowBorder?: boolean;
+  },
+  horizontalModeProps?: {
+    hideRowBorder?: boolean;
+  },
+  verticalModeProps?: {
+    hideRowBorder?: boolean;
+    useReverseOptionOrder?: boolean;
+  }
+}
+export type ResponsiveSingleChoiceArrayQuestionProps = GenericQuestionProps & ResponsiveSingleChoiceArrayProps;
+
+/**
+ * Response Bipolar Likert Array
+ */
+export type ResponsiveBipolarLikertArrayVariant = 'withLabelRow' | 'vertical' | 'table';
+export interface ResponsiveBipolarLikertArrayProps {
+  scaleOptions: Array<{
+    key: string;
+  }>,
+  rows: Array<{
+    key: string;
+    startLabel: Map<string, string> | StyledTextComponentProp[];
+    endLabel: Map<string, string> | StyledTextComponentProp[];
+    withLabelRowModeProps?: {
+      className?: string;
+    },
+    verticalModeProps?: {
+      className?: string;
+    }
+    tableModeProps?: {
+      className?: string;
+    }
+  }>,
+  defaultMode: ResponsiveBipolarLikertArrayVariant;
+  responsiveModes?: {
+    sm?: ResponsiveBipolarLikertArrayVariant;
+    md?: ResponsiveBipolarLikertArrayVariant;
+    lg?: ResponsiveBipolarLikertArrayVariant;
+    xl?: ResponsiveBipolarLikertArrayVariant;
+    xxl?: ResponsiveBipolarLikertArrayVariant;
+  },
+  rgClassName?: string;
+  tableModeProps?: {
+    className?: string;
+    layout?: "fixed";
+    labelColWidth?: string;
+    hideRowBorder?: boolean;
+  },
+  withLabelRowModeProps?: {
+    hideRowBorder?: boolean;
+    maxLabelWidth?: string;
+    useBottomLabel?: boolean;
+  },
+  verticalModeProps?: {
+    hideRowBorder?: boolean;
+  }
+}
+
+export type ResponsiveBipolarLikertArrayQuestionProps = GenericQuestionProps & ResponsiveBipolarLikertArrayProps;

package/{surveys/types/item.d.ts → src/surveys/types/item.ts}

@@ -1,22 +1,42 @@
-import { Expression, SurveySingleItem } from "survey-engine/lib/data_types";
-export declare abstract class Item {
-    key: string;
-    item: SurveySingleItem;
-    protected itemKey: string;
-    protected parentKey: string;
-    protected condition?: Expression;
-    protected isRequired?: boolean;
-    constructor(parentKey: string, itemKey: string);
-    abstract buildItem(): SurveySingleItem;
-    /**
-     * Check if this item is currently part of a path, by checking if the key attribute exists in the path of the group.
-     * @param partialKey Is this key segment included somewhere in the parent key of this item.
-     * @returns
-     */
-    isPartOf(partialKey: string): boolean;
-    /**
-     * Use this method to retrieve the generated survey item
-     * @returns
-     */
-    get(): SurveySingleItem;
-}
+import { Expression, SurveySingleItem } from "survey-engine/lib/data_types";
+
+
+export abstract class Item {
+    key: string;
+    item: SurveySingleItem;
+    protected itemKey: string;
+    protected parentKey: string;
+
+    protected condition?: Expression;
+    protected isRequired?: boolean;
+
+    constructor(parentKey: string, itemKey: string) {
+        this.parentKey = parentKey;
+        this.itemKey = itemKey;
+        this.key = [this.parentKey, itemKey].join('.');
+        this.item = {
+            version: 0,
+            key: "not defined"
+        }
+    }
+
+    abstract buildItem(): SurveySingleItem;
+
+    /**
+     * Check if this item is currently part of a path, by checking if the key attribute exists in the path of the group.
+     * @param partialKey Is this key segment included somewhere in the parent key of this item.
+     * @returns
+     */
+    isPartOf(partialKey: string): boolean {
+        return this.parentKey.includes(partialKey)
+    }
+
+    /**
+     * Use this method to retrieve the generated survey item
+     * @returns
+     */
+    get() {
+        this.item = this.buildItem();
+        return this.item;
+    }
+}

package/src/surveys/types/survey-definition.ts

@@ -0,0 +1,83 @@
+import { SurveyGroupItem, SurveyItem } from "survey-engine/lib/data_types";
+import { Logger } from "../../logger/logger";
+import { ItemEditor } from "../survey-editor/item-editor";
+import { SurveyEditor } from "../survey-editor/survey-editor";
+import { generateLocStrings } from "../utils/simple-generators";
+
+export interface SurveyProps {
+  surveyKey: string;
+  name: Map<string, string>;
+  description: Map<string, string>;
+  durationText: Map<string, string>;
+  // max item per page
+  // set prefill rules
+  // set context rules
+}
+
+
+export abstract class SurveyDefinition {
+  key: string;
+  editor: SurveyEditor;
+
+  constructor(props: SurveyProps) {
+    this.editor = new SurveyEditor();
+    this.editor.changeItemKey('survey', props.surveyKey);
+    this.key = props.surveyKey;
+
+    // define name and description of the survey
+    this.editor.setSurveyName(generateLocStrings(
+      props.name
+    ));
+
+    this.editor.setSurveyDescription(generateLocStrings(
+      props.description
+    ));
+
+    this.editor.setSurveyDuration(generateLocStrings(
+      props.durationText
+    ));
+
+    const rootItemEditor = new ItemEditor(this.editor.findSurveyItem(props.surveyKey) as SurveyGroupItem);
+    rootItemEditor.setSelectionMethod({ name: 'sequential' });
+    this.editor.updateSurveyItem(rootItemEditor.getItem());
+  }
+
+  abstract buildSurvey(): void;
+
+  getSurvey() {
+    this.buildSurvey();
+    this.checkDuplicateChildKeys();
+    return this.editor.getSurvey();
+  }
+
+  getSurveyJSON(pretty?: boolean) {
+    this.buildSurvey();
+    this.checkDuplicateChildKeys();
+    return this.editor.getSurveyJSON(pretty);
+  }
+
+  addItem(item: SurveyItem) {
+    this.editor.addExistingSurveyItem(item, this.key);
+  }
+
+  addSurveyItemToPath(item: SurveyItem, parentKey: string) {
+    this.editor.addExistingSurveyItem(item, parentKey);
+  }
+
+  private checkDuplicateChildKeys() {
+    const group = this.editor.getSurvey().current.surveyDefinition;
+    const keys = group.items.map(item => item.key);
+    const hasDuplicates = keys.some((key, index) => {
+      const isDuplicateKey = keys.indexOf(key) !== index;
+      if (isDuplicateKey) {
+        Logger.error('Duplicate key:');
+        Logger.criticalError(`${key} is used twice (at index ${keys.indexOf(key)} and at index ${index})`);
+      }
+      return isDuplicateKey;
+    });
+    if (hasDuplicates) {
+      Logger.error('\nSurvey item contains duplicate keys.\nPlease check the lines above for more infos.\nProcess stopped prematurely.')
+      process.exit(1)
+    }
+  }
+}

package/src/surveys/utils/componentGenerators.ts

@@ -0,0 +1,76 @@
+import { Expression, ItemComponent } from "survey-engine/lib/data_types"
+import { StyledTextComponentProp } from "../types/item-properties";
+import { generateRandomKey } from "./randomKeyGenerator"
+import { generateLocStrings } from "./simple-generators"
+
+
+interface CommonProps {
+  key?: string,
+  content?: Map<string, string> | StyledTextComponentProp[];
+  displayCondition?: Expression;
+}
+
+interface TextProps extends CommonProps {
+  content: Map<string, string>;
+  variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'li';
+  className?: string;
+}
+
+const text = (props: TextProps): ItemComponent => {
+  const styles = [];
+  if (props.className !== undefined) {
+    styles.push({
+      key: 'className', value: props.className
+    })
+  }
+  if (props.variant !== undefined) {
+    styles.push({
+      key: 'variant', value: props.variant
+    })
+  }
+  return {
+    key: generateRandomKey(3),
+    role: 'text',
+    style: styles.length > 0 ? styles : undefined,
+    content: generateLocStrings(props.content),
+    displayCondition: props.displayCondition,
+  }
+}
+
+interface MarkdownProps extends CommonProps {
+  content: Map<string, string>;
+  className?: string;
+}
+
+const markdown = (props: MarkdownProps): ItemComponent => {
+  const styles = [];
+  if (props.className !== undefined) {
+    styles.push({
+      key: 'className', value: props.className
+    })
+  }
+  return {
+    key: generateRandomKey(3),
+    role: 'markdown',
+    style: styles.length > 0 ? styles : undefined,
+    content: generateLocStrings(props.content),
+    displayCondition: props.displayCondition,
+  }
+}
+
+const footnote = (props: {
+  content: Map<string, string>;
+}): ItemComponent => {
+  return {
+    role: 'footnote', content: generateLocStrings(props.content), style: [
+      { key: 'className', value: 'fs-small fst-italic text-center' }
+    ]
+  }
+}
+
+
+export const ComponentGenerators = {
+  footnote,
+  text,
+  markdown,
+}

package/src/surveys/utils/optionDefGenerators.ts

@@ -0,0 +1,195 @@
+import { Expression } from "survey-engine/lib/data_types";
+import { SurveyEngine } from "../survey-engine-expressions";
+import { ClozeProps, DateInputProps, NumericInputProps, OptionDef, StyledTextComponentProp, TextInputProps } from "../types/item-properties";
+import { generateRandomKey } from "./randomKeyGenerator";
+
+interface CommonProps {
+  key?: string,
+  content?: Map<string, string> | StyledTextComponentProp[];
+  displayCondition?: Expression;
+}
+
+interface OptionProps {
+  disabled?: Expression;
+  className?: string;
+  displayCondition?: Expression;
+}
+
+interface OptionTextProps extends CommonProps {
+  className?: string;
+}
+
+const option = (key: string, content: Map<string, string> | StyledTextComponentProp[], extraProps?: OptionProps): OptionDef => {
+  const styles = [];
+  if (extraProps?.className !== undefined) {
+    styles.push({
+      key: 'className', value: extraProps.className
+    })
+  }
+
+  return {
+    key: key,
+    role: 'option',
+    content: !Array.isArray(content) ? content : undefined,
+    items: Array.isArray(content) ? content : undefined,
+    displayCondition: extraProps?.displayCondition,
+    disabled: extraProps?.disabled,
+    style: styles,
+  }
+}
+
+const multipleChoiceOptionSubtitle = (props: OptionTextProps): OptionDef => {
+  const styles = [];
+  if (props.className !== undefined) {
+    styles.push({
+      key: 'className', value: props.className
+    })
+  }
+  return {
+    key: props.key ? props.key : generateRandomKey(6),
+    role: 'text',
+    content: !Array.isArray(props.content) ? props.content : undefined,
+    displayCondition: props.displayCondition,
+    style: styles,
+  }
+}
+
+const markdown = (props: OptionTextProps): OptionDef => {
+  const styles = [];
+  if (props.className !== undefined) {
+    styles.push({
+      key: 'className', value: props.className
+    })
+  }
+  return {
+    key: props.key ? props.key : generateRandomKey(6),
+    role: 'markdown',
+    content: !Array.isArray(props.content) ? props.content : undefined,
+    displayCondition: props.displayCondition,
+    style: styles,
+  }
+}
+
+const textInput = (props: TextInputProps & { key: string, displayCondition?: Expression }): OptionDef => {
+  const style: Array<{ key: string; value: string }> = [];
+  if (props.maxLength !== undefined) {
+    style.push({ key: 'maxLength', value: props.maxLength.toFixed(0) })
+  }
+  if (props.className !== undefined) {
+    style.push({ key: 'className', value: props.className })
+  }
+  if (props.inputMaxWidth !== undefined) {
+    style.push({ key: 'inputMaxWidth', value: props.inputMaxWidth })
+  }
+
+  return {
+    key: props.key,
+    role: 'input',
+    content: props.inputLabel,
+    description: props.placeholderText,
+    displayCondition: props.displayCondition,
+    disabled: props.disabled,
+    style: style.length > 0 ? style : undefined,
+  }
+}
+
+const numberInput = (props: NumericInputProps & { key: string, displayCondition?: Expression }): OptionDef => {
+  const style: Array<{ key: string; value: string }> = [];
+  if (props.inputMaxWidth !== undefined) {
+    style.push({ key: 'inputMaxWidth', value: props.inputMaxWidth })
+  }
+  if (props.labelBehindInput) {
+    style.push({ key: 'labelPlacement', value: 'after' });
+  }
+
+  return {
+    key: props.key,
+    role: 'numberInput',
+    content: props.inputLabel,
+    displayCondition: props.displayCondition,
+    disabled: props.disabled,
+    optionProps: {
+      min: props.componentProperties?.min !== undefined ? (typeof (props.componentProperties.min) === 'number' ? { dtype: 'num', num: props.componentProperties.min } : props.componentProperties.min) : undefined,
+      max: props.componentProperties?.max !== undefined ? (typeof (props.componentProperties?.max) === 'number' ? { dtype: 'num', num: props.componentProperties.max } : props.componentProperties.max) : undefined,
+      stepSize: props.componentProperties?.stepSize ? (typeof (props.componentProperties.stepSize) === 'number' ? { dtype: 'num', num: props.componentProperties.stepSize } : props.componentProperties.stepSize) : undefined,
+    },
+    style: style.length > 0 ? style : undefined,
+  }
+}
+
+const dateInput = (props: DateInputProps & { key: string, displayCondition?: Expression }): OptionDef => {
+  return {
+    key: props.key,
+    role: 'dateInput',
+    optionProps: {
+      dateInputMode: { str: props.dateInputMode },
+      min: props.minRelativeDate ? {
+        dtype: 'exp', exp: SurveyEngine.timestampWithOffset(
+          props.minRelativeDate.delta,
+          props.minRelativeDate.reference
+        )
+      } : undefined,
+      max: props.maxRelativeDate ? {
+        dtype: 'exp', exp: SurveyEngine.timestampWithOffset(
+          props.maxRelativeDate.delta,
+          props.maxRelativeDate.reference ? props.maxRelativeDate.reference : undefined
+        )
+      } : undefined,
+    },
+    content: props.inputLabelText,
+    displayCondition: props.displayCondition,
+  }
+}
+
+const dropDown = (props: { key: string, displayCondition?: Expression, options: Array<OptionDef> }): OptionDef => {
+  return {
+    key: props.key,
+    role: 'dropDownGroup',
+    displayCondition: props.displayCondition,
+    items: props.options,
+  }
+}
+
+
+const cloze = (props: ClozeProps & { key: string, displayCondition?: Expression }): OptionDef => {
+  return {
+    key: props.key,
+    role: 'cloze',
+    items: props.items,
+    displayCondition: props.displayCondition,
+  }
+}
+
+const clozeLineBreak = (): OptionDef => {
+  return {
+    key: generateRandomKey(5),
+    role: 'lineBreak',
+  }
+}
+
+export const SingleChoiceOptionTypes = {
+  option,
+  textInput,
+  //dateInput,
+  numberInput,
+  cloze,
+}
+
+export const MultipleChoiceOptionTypes = {
+  option,
+  subtitle: multipleChoiceOptionSubtitle,
+  textInput,
+  // dateInput,
+  numberInput,
+  cloze,
+}
+
+export const ClozeItemTypes = {
+  text: multipleChoiceOptionSubtitle,
+  markdown,
+  textInput,
+  dateInput,
+  clozeLineBreak,
+  numberInput,
+  dropDown,
+}