@constructor-io/constructorio-ui-quizzes 1.19.8 → 1.19.10

package/lib/cjs/components/CioQuiz/actions.js

@@ -10,6 +10,7 @@ var QuestionTypes;
     QuestionTypes["MultipleSelect"] = "multiple";
     QuestionTypes["SingleFilterValue"] = "single_filter_value";
     QuestionTypes["MultipleFilterValues"] = "multiple_filter_values";
+    QuestionTypes["FreeForm"] = "free_form";
     QuestionTypes["Next"] = "next";
     QuestionTypes["Skip"] = "skip";
     QuestionTypes["Back"] = "back";

package/lib/cjs/components/CioQuiz/quizApiReducer.js

@@ -15,7 +15,7 @@ function apiReducer(state, action) {
         case actions_1.QuizAPIActionTypes.SET_IS_ERROR:
             return Object.assign(Object.assign({}, state), { quizRequestState: constants_1.RequestStates.Error, quizCurrentQuestion: undefined, quizResults: undefined, selectedOptionsWithAttributes: undefined, matchedOptions: undefined });
         case actions_1.QuizAPIActionTypes.SET_CURRENT_QUESTION: {
-            const { isOpenQuestion, isCoverQuestion, isSingleQuestion, isMultipleQuestion, isSelectQuestion, isSingleFilterQuestion, isMultipleFilterQuestion, } = (0, utils_1.getQuestionTypes)((_c = (_b = (_a = action.payload) === null || _a === void 0 ? void 0 : _a.quizCurrentQuestion) === null || _b === void 0 ? void 0 : _b.next_question) === null || _c === void 0 ? void 0 : _c.type);
+            const { isOpenQuestion, isCoverQuestion, isSingleQuestion, isMultipleQuestion, isSelectQuestion, isSingleFilterQuestion, isMultipleFilterQuestion, isFreeFormQuestion, } = (0, utils_1.getQuestionTypes)((_c = (_b = (_a = action.payload) === null || _a === void 0 ? void 0 : _a.quizCurrentQuestion) === null || _b === void 0 ? void 0 : _b.next_question) === null || _c === void 0 ? void 0 : _c.type);
             const quizFirstQuestion = state.quizFirstQuestion || ((_d = action.payload) === null || _d === void 0 ? void 0 : _d.quizCurrentQuestion);
             return Object.assign(Object.assign({}, state), { quizRequestState: constants_1.RequestStates.Success, quizCurrentQuestion: Object.assign(Object.assign({}, (_e = action.payload) === null || _e === void 0 ? void 0 : _e.quizCurrentQuestion), { isFirstQuestion: ((_f = quizFirstQuestion === null || quizFirstQuestion === void 0 ? void 0 : quizFirstQuestion.next_question) === null || _f === void 0 ? void 0 : _f.id) ===
                         ((_j = (_h = (_g = action.payload) === null || _g === void 0 ? void 0 : _g.quizCurrentQuestion) === null || _h === void 0 ? void 0 : _h.next_question) === null || _j === void 0 ? void 0 : _j.id), isOpenQuestion,
@@ -24,7 +24,8 @@ function apiReducer(state, action) {
                     isMultipleQuestion,
                     isSelectQuestion,
                     isSingleFilterQuestion,
-                    isMultipleFilterQuestion }), quizFirstQuestion, quizResults: undefined, selectedOptionsWithAttributes: undefined, matchedOptions: undefined });
+                    isMultipleFilterQuestion,
+                    isFreeFormQuestion }), quizFirstQuestion, quizResults: undefined, selectedOptionsWithAttributes: undefined, matchedOptions: undefined });
         }
         case actions_1.QuizAPIActionTypes.SET_QUIZ_RESULTS: {
             const selectedOptionsWithAttributes = ((_k = action.payload) === null || _k === void 0 ? void 0 : _k.quizResults.quiz_selected_options.filter((option) => option.has_attribute).map((option) => option.value)) || [];

package/lib/cjs/components/CioQuiz/quizLocalReducer.js

@@ -18,6 +18,9 @@ function handleNextQuestion(state) {
         case actions_1.QuestionTypes.OpenText:
             newAnswers.push(['true']);
             break;
+        case actions_1.QuestionTypes.FreeForm:
+            newAnswers.push([currentAnswerInput.value]);
+            break;
         case actions_1.QuestionTypes.Cover:
             newAnswers.push(['seen']);
             break;
@@ -44,6 +47,7 @@ function quizLocalReducer(state, action) {
     switch (action.type) {
         case actions_1.QuestionTypes.OpenText:
         case actions_1.QuestionTypes.Cover:
+        case actions_1.QuestionTypes.FreeForm:
         case actions_1.QuestionTypes.SingleSelect:
         case actions_1.QuestionTypes.MultipleSelect:
         case actions_1.QuestionTypes.SingleFilterValue:
@@ -59,6 +63,7 @@ function quizLocalReducer(state, action) {
             const currentAnswerInput = Object.values(state.answerInputs)[lastAnswerInputIndex];
             switch (currentAnswerInput.type) {
                 case actions_1.QuestionTypes.OpenText:
+                case actions_1.QuestionTypes.FreeForm:
                     newAnswers.push(['false']);
                     break;
                 case actions_1.QuestionTypes.Cover:

package/lib/cjs/components/OpenTextTypeQuestion/OpenTextTypeQuestion.js

@@ -6,6 +6,10 @@ const QuestionTitle_1 = tslib_1.__importDefault(require("../QuestionTitle/Questi
 const QuestionDescription_1 = tslib_1.__importDefault(require("../QuestionDescription/QuestionDescription"));
 const utils_1 = require("../../utils");
 const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
+/**
+ * This component handles both "OpenText" and "FreeForm" question types.
+ * Both types share the same UI and behavior for text input.
+ */
 function OpenTextQuestion() {
     var _a;
     const { state, getOpenTextInputProps } = (0, react_1.useContext)(context_1.default);

package/lib/cjs/components/QuizQuestions/index.js

@@ -15,6 +15,7 @@ function QuizQuestions() {
     if (nextQuestion) {
         return (react_1.default.createElement(react_1.default.Fragment, null,
             questionTypes.isOpenQuestion && react_1.default.createElement(OpenTextTypeQuestion_1.default, { key: nextQuestion === null || nextQuestion === void 0 ? void 0 : nextQuestion.id }),
+            questionTypes.isFreeFormQuestion && react_1.default.createElement(OpenTextTypeQuestion_1.default, { key: nextQuestion === null || nextQuestion === void 0 ? void 0 : nextQuestion.id }),
             questionTypes.isCoverQuestion && react_1.default.createElement(CoverTypeQuestion_1.default, { key: nextQuestion === null || nextQuestion === void 0 ? void 0 : nextQuestion.id }),
             questionTypes.isSelectQuestion && react_1.default.createElement(SelectTypeQuestion_1.default, { key: nextQuestion === null || nextQuestion === void 0 ? void 0 : nextQuestion.id })));
     }

package/lib/cjs/utils.js

@@ -80,6 +80,7 @@ const getQuestionTypes = (questionType) => {
     const isMultipleQuestion = questionType === actions_1.QuestionTypes.MultipleSelect;
     const isSingleFilterQuestion = questionType === actions_1.QuestionTypes.SingleFilterValue;
     const isMultipleFilterQuestion = questionType === actions_1.QuestionTypes.MultipleFilterValues;
+    const isFreeFormQuestion = questionType === actions_1.QuestionTypes.FreeForm;
     const isSelectQuestion = isSingleQuestion || isMultipleQuestion || isSingleFilterQuestion || isMultipleFilterQuestion;
     return {
         isOpenQuestion,
@@ -89,6 +90,7 @@ const getQuestionTypes = (questionType) => {
         isSelectQuestion,
         isSingleFilterQuestion,
         isMultipleFilterQuestion,
+        isFreeFormQuestion,
     };
 };
 exports.getQuestionTypes = getQuestionTypes;

package/lib/cjs/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '1.19.8';
+exports.default = '1.19.10';

package/lib/mjs/components/CioQuiz/actions.js

@@ -7,6 +7,7 @@ export var QuestionTypes;
     QuestionTypes["MultipleSelect"] = "multiple";
     QuestionTypes["SingleFilterValue"] = "single_filter_value";
     QuestionTypes["MultipleFilterValues"] = "multiple_filter_values";
+    QuestionTypes["FreeForm"] = "free_form";
     QuestionTypes["Next"] = "next";
     QuestionTypes["Skip"] = "skip";
     QuestionTypes["Back"] = "back";

package/lib/mjs/components/CioQuiz/quizApiReducer.js

@@ -23,7 +23,7 @@ export default function apiReducer(state, action) {
                 matchedOptions: undefined,
             };
         case QuizAPIActionTypes.SET_CURRENT_QUESTION: {
-            const { isOpenQuestion, isCoverQuestion, isSingleQuestion, isMultipleQuestion, isSelectQuestion, isSingleFilterQuestion, isMultipleFilterQuestion, } = getQuestionTypes(action.payload?.quizCurrentQuestion?.next_question?.type);
+            const { isOpenQuestion, isCoverQuestion, isSingleQuestion, isMultipleQuestion, isSelectQuestion, isSingleFilterQuestion, isMultipleFilterQuestion, isFreeFormQuestion, } = getQuestionTypes(action.payload?.quizCurrentQuestion?.next_question?.type);
             const quizFirstQuestion = state.quizFirstQuestion || action.payload?.quizCurrentQuestion;
             return {
                 ...state,
@@ -39,6 +39,7 @@ export default function apiReducer(state, action) {
                     isSelectQuestion,
                     isSingleFilterQuestion,
                     isMultipleFilterQuestion,
+                    isFreeFormQuestion,
                 },
                 quizFirstQuestion,
                 quizResults: undefined,

package/lib/mjs/components/CioQuiz/quizLocalReducer.js

@@ -14,6 +14,9 @@ function handleNextQuestion(state) {
         case QuestionTypes.OpenText:
             newAnswers.push(['true']);
             break;
+        case QuestionTypes.FreeForm:
+            newAnswers.push([currentAnswerInput.value]);
+            break;
         case QuestionTypes.Cover:
             newAnswers.push(['seen']);
             break;
@@ -50,6 +53,7 @@ export default function quizLocalReducer(state, action) {
     switch (action.type) {
         case QuestionTypes.OpenText:
         case QuestionTypes.Cover:
+        case QuestionTypes.FreeForm:
         case QuestionTypes.SingleSelect:
         case QuestionTypes.MultipleSelect:
         case QuestionTypes.SingleFilterValue:
@@ -65,6 +69,7 @@ export default function quizLocalReducer(state, action) {
             const currentAnswerInput = Object.values(state.answerInputs)[lastAnswerInputIndex];
             switch (currentAnswerInput.type) {
                 case QuestionTypes.OpenText:
+                case QuestionTypes.FreeForm:
                     newAnswers.push(['false']);
                     break;
                 case QuestionTypes.Cover:

package/lib/mjs/components/OpenTextTypeQuestion/OpenTextTypeQuestion.js

@@ -3,6 +3,10 @@ import QuestionTitle from '../QuestionTitle/QuestionTitle';
 import QuestionDescription from '../QuestionDescription/QuestionDescription';
 import { renderImages } from '../../utils';
 import QuizContext from '../CioQuiz/context';
+/**
+ * This component handles both "OpenText" and "FreeForm" question types.
+ * Both types share the same UI and behavior for text input.
+ */
 function OpenTextQuestion() {
     const { state, getOpenTextInputProps } = useContext(QuizContext);
     let question;

package/lib/mjs/components/QuizQuestions/index.js

@@ -11,6 +11,7 @@ export default function QuizQuestions() {
     if (nextQuestion) {
         return (React.createElement(React.Fragment, null,
             questionTypes.isOpenQuestion && React.createElement(OpenTextQuestion, { key: nextQuestion?.id }),
+            questionTypes.isFreeFormQuestion && React.createElement(OpenTextQuestion, { key: nextQuestion?.id }),
             questionTypes.isCoverQuestion && React.createElement(CoverTypeQuestion, { key: nextQuestion?.id }),
             questionTypes.isSelectQuestion && React.createElement(SelectTypeQuestion, { key: nextQuestion?.id })));
     }

package/lib/mjs/utils.js

@@ -73,6 +73,7 @@ export const getQuestionTypes = (questionType) => {
     const isMultipleQuestion = questionType === QuestionTypes.MultipleSelect;
     const isSingleFilterQuestion = questionType === QuestionTypes.SingleFilterValue;
     const isMultipleFilterQuestion = questionType === QuestionTypes.MultipleFilterValues;
+    const isFreeFormQuestion = questionType === QuestionTypes.FreeForm;
     const isSelectQuestion = isSingleQuestion || isMultipleQuestion || isSingleFilterQuestion || isMultipleFilterQuestion;
     return {
         isOpenQuestion,
@@ -82,6 +83,7 @@ export const getQuestionTypes = (questionType) => {
         isSelectQuestion,
         isSingleFilterQuestion,
         isMultipleFilterQuestion,
+        isFreeFormQuestion,
     };
 };
 export function getPreferredColorScheme() {

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.19.8';
+export default '1.19.10';

package/lib/types/components/CioQuiz/actions.d.ts

@@ -7,6 +7,7 @@ export declare enum QuestionTypes {
     MultipleSelect = "multiple",
     SingleFilterValue = "single_filter_value",
     MultipleFilterValues = "multiple_filter_values",
+    FreeForm = "free_form",
     Next = "next",
     Skip = "skip",
     Back = "back",
@@ -26,7 +27,7 @@ interface Action<Type, Payload = {}> {
     type: Type;
     payload?: Payload;
 }
-export type ActionAnswerInputQuestion = Action<QuestionTypes.OpenText, OpenTextQuestionPayload> | Action<QuestionTypes.SingleSelect, SelectQuestionPayload> | Action<QuestionTypes.MultipleSelect, SelectQuestionPayload> | Action<QuestionTypes.SingleFilterValue, SelectQuestionPayload> | Action<QuestionTypes.MultipleFilterValues, SelectQuestionPayload> | Action<QuestionTypes.Cover, CoverQuestionPayload>;
+export type ActionAnswerInputQuestion = Action<QuestionTypes.OpenText, OpenTextQuestionPayload> | Action<QuestionTypes.SingleSelect, SelectQuestionPayload> | Action<QuestionTypes.MultipleSelect, SelectQuestionPayload> | Action<QuestionTypes.SingleFilterValue, SelectQuestionPayload> | Action<QuestionTypes.MultipleFilterValues, SelectQuestionPayload> | Action<QuestionTypes.FreeForm, OpenTextQuestionPayload> | Action<QuestionTypes.Cover, CoverQuestionPayload>;
 export type ActionAnswerQuestion = ActionAnswerInputQuestion | Action<QuestionTypes.Next, CurrentQuestion> | Action<QuestionTypes.Skip, CurrentQuestion> | Action<QuestionTypes.Back, CurrentQuestion> | Action<QuestionTypes.Reset> | Action<QuestionTypes.Complete> | Action<QuestionTypes.JumpToQuestion, {
     questionId: number;
 }> | Action<QuestionTypes.Hydrate, Partial<QuizLocalReducerState>>;

package/lib/types/components/OpenTextTypeQuestion/OpenTextTypeQuestion.d.ts

@@ -1,3 +1,7 @@
 /// <reference types="react" />
+/**
+ * This component handles both "OpenText" and "FreeForm" question types.
+ * Both types share the same UI and behavior for text input.
+ */
 declare function OpenTextQuestion(): JSX.Element | null;
 export default OpenTextQuestion;

package/lib/types/types.d.ts

@@ -115,7 +115,7 @@ export interface QuizSessionStorageState {
     skipToResults: boolean;
     hasSessionStorageState: () => boolean;
 }
-export type InputQuestionsTypes = QuestionTypes.OpenText | QuestionTypes.Cover | QuestionTypes.SingleSelect | QuestionTypes.MultipleSelect | QuestionTypes.SingleFilterValue | QuestionTypes.MultipleFilterValues;
+export type InputQuestionsTypes = QuestionTypes.OpenText | QuestionTypes.Cover | QuestionTypes.SingleSelect | QuestionTypes.MultipleSelect | QuestionTypes.SingleFilterValue | QuestionTypes.MultipleFilterValues | QuestionTypes.FreeForm;
 export type CurrentQuestion = NextQuestionResponse & {
     isFirstQuestion: boolean;
     isOpenQuestion: boolean;
@@ -124,6 +124,7 @@ export type CurrentQuestion = NextQuestionResponse & {
     isMultipleQuestion: boolean;
     isSingleFilterQuestion: boolean;
     isMultipleFilterQuestion: boolean;
+    isFreeFormQuestion: boolean;
     isSelectQuestion: boolean;
 };
 export declare namespace QuizEventsReturn {

package/lib/types/utils.d.ts

@@ -30,6 +30,7 @@ export declare const getQuestionTypes: (questionType?: `${QuestionTypes}`) => {
     isSelectQuestion: boolean;
     isSingleFilterQuestion: boolean;
     isMultipleFilterQuestion: boolean;
+    isFreeFormQuestion: boolean;
 };
 export declare function getPreferredColorScheme(): string;
 export declare function isFunction(fn: any): boolean;

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.19.8";
+declare const _default: "1.19.10";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-quizzes",
-  "version": "1.19.8",
+  "version": "1.19.10",
   "description": "Constructor.io Quizzes UI library for web applications",
   "author": "Constructor.io Corporation",
   "license": "MIT",
@@ -24,14 +24,14 @@
       "require": "./dist/constructorio-ui-quizzes-bundled.js"
     },
     ".": {
+      "types": "./lib/types/index.d.ts",
       "import": "./lib/mjs/index.js",
-      "require": "./lib/cjs/index.js",
-      "types": "./lib/types/index.d.ts"
+      "require": "./lib/cjs/index.js"
     },
     "./cjs": {
       "import": "./lib/cjs/index.js",
-      "require": "./lib/cjs/index.js",
-      "types": "./lib/types/index.d.ts"
+      "types": "./lib/types/index.d.ts",
+      "require": "./lib/cjs/index.js"
     }
   },
   "files": [
@@ -61,24 +61,23 @@
     "check-license": "license-checker --production --onlyAllow 'Apache-2.0;BSD-3-Clause;MIT;0BSD;BSD-2-Clause' --excludePackages 'picocolors@1.0.0'"
   },
   "peerDependencies": {
-    "@constructor-io/constructorio-client-javascript": "^2.68.1",
+    "@constructor-io/constructorio-client-javascript": "^2.73.1",
     "react": ">=16.12.0",
     "react-dom": ">=16.12.0",
     "tslib": "^2.4.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.24.0",
+    "@babel/preset-env": "^7.24.0",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
     "@axe-core/react": "^4.7.0",
     "@cspell/eslint-plugin": "^6.18.1",
-    "@storybook/addon-a11y": "^7.4.6",
-    "@storybook/addon-actions": "7.4.6",
-    "@storybook/addon-docs": "7.4.6",
-    "@storybook/addon-essentials": "7.4.6",
-    "@storybook/addon-interactions": "^7.4.6",
-    "@storybook/addon-links": "7.4.6",
-    "@storybook/jest": "^0.2.3",
-    "@storybook/react-webpack5": "7.4.6",
-    "@storybook/test-runner": "0.16.0",
-    "@storybook/testing-library": "^0.1.0",
+    "@storybook/addon-a11y": "^10.2.10",
+    "@storybook/addon-docs": "^10.2.10",
+    "@storybook/addon-links": "^10.2.10",
+    "@storybook/react-vite": "^10.2.10",
+    "@storybook/test-runner": "0.24.2",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
     "@types/jest": "^29.5.12",
@@ -87,7 +86,7 @@
     "@typescript-eslint/eslint-plugin": "^5.47.0",
     "@typescript-eslint/parser": "^5.47.0",
     "chromatic": "^6.21.0",
-    "eslint": "^8.30.0",
+    "eslint": "^8.57.1",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-prettier": "^8.5.0",
@@ -97,7 +96,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^10.2.10",
     "eslint-plugin-testing-library": "^6.2.0",
     "fishery": "^2.2.2",
     "husky": "^8.0.1",
@@ -108,12 +107,11 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "start-server-and-test": "^2.0.0",
-    "storybook": "^10.1.11",
+    "storybook": "^10.2.10",
     "ts-jest": "^29.1.2",
     "typescript": "^4.9.4",
     "vite": "^7.1.5",
     "vite-plugin-css-injected-by-js": "^3.1.0",
-    "webpack": "^5.75.0",
     "whatwg-fetch": "^3.6.20"
   },
   "volta": {