@constructor-io/constructorio-ui-quizzes 1.8.2 → 1.9.0

package/lib/cjs/package.json

@@ -0,0 +1,105 @@
+{
+    "name": "@constructor-io/constructorio-ui-quizzes",
+    "version": "1.9.0",
+    "description": "Constructor.io Quizzes UI library for web applications",
+    "author": "constructor.io",
+    "license": "MIT",
+    "homepage": "https://github.com/Constructor-io/constructorio-ui-quizzes#readme",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Constructor-io/constructorio-ui-quizzes.git"
+    },
+    "bugs": {
+        "url": "https://github.com/Constructor-io/constructorio-ui-quizzes/issues"
+    },
+    "main": "lib/cjs/index.js",
+    "module": "lib/mjs/index.js",
+    "exports": {
+        "./styles.css": {
+            "import": "./lib/styles.css",
+            "require": "./lib/styles.css"
+        },
+        "./constructorio-ui-quizzes-bundled": {
+            "import": "./dist/constructorio-ui-quizzes-bundled.js",
+            "require": "./dist/constructorio-ui-quizzes-bundled.js"
+        },
+        ".": {
+            "import": "./lib/mjs/index.js",
+            "require": "./lib/cjs/index.js"
+        },
+        "./cjs": {
+            "import": "./lib/cjs/index.js",
+            "require": "./lib/cjs/index.js"
+        }
+    },
+    "files": [
+        "lib/**/*",
+        "dist/constructorio-ui-quizzes-bundled.js"
+    ],
+    "engines": {
+        "node": ">=14"
+    },
+    "types": "lib/types/index.d.ts",
+    "scripts": {
+        "lint": "eslint src --ext js,ts,jsx,tsx",
+        "check-types": "npx tsc --noEmit",
+        "copy-styles": "cp src/styles.css lib/styles.css",
+        "prepare": "husky install",
+        "dev": "storybook dev -p 6006",
+        "storybook:ci": "storybook dev --ci --quiet -p 6006",
+        "test-storybook": "test-storybook",
+        "test-storybook:watch": "test-storybook --watch",
+        "test-storybook:ci": "start-server-and-test storybook:ci http://localhost:6006 test-storybook",
+        "build-storybook": "storybook build -o 'docs'",
+        "serve-built-storybook": "npx http-server docs",
+        "verify-node-version": "chmod +x ./scripts/verify-node-version.sh && ./scripts/verify-node-version.sh",
+        "version": "npm run verify-node-version && npm run build-storybook && git add -u ./docs && git add ./docs/* && npm run compile",
+        "compile": "rm -rf lib && tsc -p tsconfig.json && tsc -p tsconfig-cjs.json && npm run copy-styles && vite build",
+        "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.35.17",
+        "react": ">=16.12.0",
+        "react-dom": ">=16.12.0",
+        "tslib": "^2.4.0"
+    },
+    "devDependencies": {
+        "@axe-core/react": "^4.7.0",
+        "@cspell/eslint-plugin": "^6.18.1",
+        "@storybook/addon-a11y": "^7.0.11",
+        "@storybook/addon-actions": "7.0.11",
+        "@storybook/addon-essentials": "7.0.11",
+        "@storybook/addon-interactions": "^7.0.11",
+        "@storybook/addon-links": "7.0.11",
+        "@storybook/addon-docs": "7.0.11",
+        "@storybook/jest": "^0.1.0",
+        "@storybook/react-webpack5": "7.0.11",
+        "@storybook/test-runner": "0.10.0",
+        "@storybook/testing-library": "^0.1.0",
+        "@types/react": "^18.0.26",
+        "@types/react-dom": "^18.0.9",
+        "@typescript-eslint/eslint-plugin": "^5.47.0",
+        "@typescript-eslint/parser": "^5.47.0",
+        "chromatic": "^6.21.0",
+        "eslint": "^8.30.0",
+        "eslint-config-airbnb": "^19.0.4",
+        "eslint-config-airbnb-typescript": "^17.0.0",
+        "eslint-config-prettier": "^8.5.0",
+        "eslint-plugin-import": "^2.26.0",
+        "eslint-plugin-jsx-a11y": "^6.7.1",
+        "eslint-plugin-prettier": "^4.2.1",
+        "eslint-plugin-react": "^7.31.11",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-storybook": "^0.6.12",
+        "husky": "^8.0.1",
+        "license-checker": "^25.0.1",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "start-server-and-test": "^2.0.0",
+        "storybook": "7.0.11",
+        "typescript": "^4.9.4",
+        "vite": "^4.2.1",
+        "vite-plugin-css-injected-by-js": "^3.1.0",
+        "webpack": "^5.75.0"
+    }
+}

package/lib/cjs/{components → src/components}/CioQuiz/actions.js

@@ -9,6 +9,7 @@ var QuestionTypes;
     QuestionTypes["SingleSelect"] = "single";
     QuestionTypes["MultipleSelect"] = "multiple";
     QuestionTypes["Next"] = "next";
+    QuestionTypes["Skip"] = "skip";
     QuestionTypes["Back"] = "back";
     QuestionTypes["Reset"] = "reset";
     QuestionTypes["Hydrate"] = "hydrate";

package/lib/cjs/{components → src/components}/CioQuiz/index.js

@@ -14,7 +14,7 @@ const utils_1 = require("../../utils");
 const ProgressBar_1 = tslib_1.__importDefault(require("../ProgressBar/ProgressBar"));
 function CioQuiz(props) {
     var _a;
-    const { cioClient, state, events: { hydrateQuiz, resetSessionStorageState }, getAddToCartButtonProps, getAddToFavoritesButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, } = (0, useQuiz_1.default)(props);
+    const { cioClient, state, events: { hydrateQuiz, resetSessionStorageState }, getAddToCartButtonProps, getAddToFavoritesButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getSkipQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, } = (0, useQuiz_1.default)(props);
     const [showSessionPrompt, setShowSessionPrompt] = (0, react_1.useState)(false);
     const { resultsPageOptions, sessionStateOptions } = props;
     const { quizSessionStorageState: { hasSessionStorageState, skipToResults }, } = state;
@@ -36,6 +36,7 @@ function CioQuiz(props) {
         getCoverQuestionProps,
         getHydrateQuizButtonProps,
         getNextQuestionButtonProps,
+        getSkipQuestionButtonProps,
         getOpenTextInputProps,
         getPreviousQuestionButtonProps,
         getQuizImageProps,

package/lib/cjs/{components → src/components}/CioQuiz/quizLocalReducer.js

@@ -51,6 +51,27 @@ function quizLocalReducer(state, action) {
                 // We now commit current answers to prevAnswerInputs
                 prevAnswerInputs: answerInputs, answers: newAnswers, isQuizCompleted: false });
         }
+        case actions_1.QuestionTypes.Skip: {
+            const { answers, answerInputs } = state;
+            const newAnswers = [...answers];
+            const lastAnswerInputIndex = answers.length;
+            const currentAnswerInput = Object.values(state.answerInputs)[lastAnswerInputIndex];
+            switch (currentAnswerInput.type) {
+                case actions_1.QuestionTypes.OpenText:
+                    newAnswers.push(['false']);
+                    break;
+                case actions_1.QuestionTypes.Cover:
+                    newAnswers.push(['seen']);
+                    break;
+                case actions_1.QuestionTypes.SingleSelect:
+                case actions_1.QuestionTypes.MultipleSelect:
+                default:
+                    newAnswers.push([]);
+            }
+            return Object.assign(Object.assign({}, state), { 
+                // We now commit current answers to prevAnswerInputs
+                prevAnswerInputs: answerInputs, answers: newAnswers, isQuizCompleted: false });
+        }
         case actions_1.QuestionTypes.Back: {
             const prevAnswerInputs = Object.assign({}, state.prevAnswerInputs);
             return Object.assign(Object.assign({}, state), { answerInputs: prevAnswerInputs, answers: [...state.answers.slice(0, -1)], isLastAnswer: false, isQuizCompleted: false });

package/lib/cjs/{components → src/components}/ControlBar/ControlBar.js

@@ -4,12 +4,15 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const BackButton_1 = tslib_1.__importDefault(require("../BackButton/BackButton"));
 const CTAButton_1 = tslib_1.__importDefault(require("../CTAButton/CTAButton"));
+const SkipButton_1 = tslib_1.__importDefault(require("../SkipButton/SkipButton"));
 const context_1 = tslib_1.__importDefault(require("../CioQuiz/context"));
 function ControlBar(props) {
     const { ctaButtonText } = props;
-    const { getNextQuestionButtonProps } = (0, react_1.useContext)(context_1.default);
+    const { getNextQuestionButtonProps, getSkipQuestionButtonProps } = (0, react_1.useContext)(context_1.default);
     return (react_1.default.createElement("div", { className: 'cio-question-buttons-container' },
         react_1.default.createElement(BackButton_1.default, null),
-        react_1.default.createElement(CTAButton_1.default, { ctaText: ctaButtonText, propsGetters: getNextQuestionButtonProps })));
+        react_1.default.createElement("div", { className: 'cio-question-buttons-group' },
+            react_1.default.createElement(SkipButton_1.default, { propsGetters: getSkipQuestionButtonProps }),
+            react_1.default.createElement(CTAButton_1.default, { ctaText: ctaButtonText, propsGetters: getNextQuestionButtonProps }))));
 }
 exports.default = ControlBar;

package/lib/cjs/src/components/SkipButton/SkipButton.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function SkipButton(props) {
+    const { propsGetters, className = 'cio-button-container' } = props, rest = tslib_1.__rest(props, ["propsGetters", "className"]);
+    return (react_1.default.createElement("div", { className: `${className || ''}` }, propsGetters && (
+    // eslint-disable-next-line react/button-has-type
+    react_1.default.createElement("button", Object.assign({}, rest, propsGetters()),
+        "Skip",
+        react_1.default.createElement("span", null, " question")))));
+}
+exports.default = SkipButton;

package/lib/cjs/{constants.js → src/constants.js}

@@ -25,6 +25,7 @@ exports.componentDescription = `- import \`CioQuiz\` to render in your JSX.
   - \`numResultsToDisplay\` is an optional parameter that determines how many results should be displayed on results page
 - \`callbacks\` lets you pass callback functions that will be called on certain actions
   - \`onQuizNextQuestion\` is an optional callback function that will be called when user moves to the next question
+  - \`onQuizSkipQuestion\` is an optional callback function that will be called when user skips a question
 - \`sessionStateOptions\` lets you configure the session modal behavior
   - \`showSessionModal\` is a boolean used to decide whether to show the session modal. The default behavior is to show the session modal
   - \`showSessionModalOnResults\` is a boolean to decide whether to show the session modal after reaching the results page. The default behavior is to not show the session modal
@@ -57,6 +58,7 @@ const {
   getCoverQuestionProps: () => ({...})), // prop getter for jsx quiz cover question,
   getHydrateQuizButtonProps: () => ({...})), // prop getter for jsx hydrate quiz button,
   getNextQuestionButtonProps: () => ({...})), // prop getter for jsx next button to traverse the quiz,
+  getSkipQuestionButtonProps: () => ({...})), // prop getter for jsx skip button to traverse the quiz,
   getPreviousQuestionButtonProps: () => ({...})), // prop getter for jsx back button to traverse the quiz, 
   getOpenTextInputProps: () => ({...})), // prop getter for jsx open text input,
   getSelectInputProps: () => ({...})), // prop getter for jsx select input for select type questions,

package/lib/cjs/{hooks → src/hooks}/usePropsGetters/index.js

@@ -8,13 +8,15 @@ const useOpenTextInputProps_1 = tslib_1.__importDefault(require("./useOpenTextIn
 const useNextQuestionButtonProps_1 = tslib_1.__importDefault(require("./useNextQuestionButtonProps"));
 const usePreviousQuestionButtonProps_1 = tslib_1.__importDefault(require("./usePreviousQuestionButtonProps"));
 const useAddToFavoritesButtonProps_1 = tslib_1.__importDefault(require("./useAddToFavoritesButtonProps"));
+const useSkipQuestionButtonProps_1 = tslib_1.__importDefault(require("./useSkipQuestionButtonProps"));
 const usePropsGetters = (quizEvents, quizApiState, quizLocalState) => {
     var _a, _b, _c;
-    const { quizAnswerChanged, nextQuestion, previousQuestion, resetQuiz, hydrateQuiz, addToCart, addToFavorites, resultClick, } = quizEvents;
+    const { quizAnswerChanged, nextQuestion, skipQuestion, previousQuestion, resetQuiz, hydrateQuiz, addToCart, addToFavorites, resultClick, } = quizEvents;
     const getOpenTextInputProps = (0, useOpenTextInputProps_1.default)(quizAnswerChanged, nextQuestion, (_a = quizApiState.quizCurrentQuestion) === null || _a === void 0 ? void 0 : _a.next_question, quizLocalState.answerInputs);
     const getCoverQuestionProps = (0, useCoverQuestionProps_1.default)(quizAnswerChanged, (_b = quizApiState.quizCurrentQuestion) === null || _b === void 0 ? void 0 : _b.next_question);
     const getSelectInputProps = (0, useSelectInputProps_1.default)(quizAnswerChanged, nextQuestion, (_c = quizApiState.quizCurrentQuestion) === null || _c === void 0 ? void 0 : _c.next_question, quizLocalState.answerInputs);
     const getNextQuestionButtonProps = (0, useNextQuestionButtonProps_1.default)(nextQuestion, quizApiState, quizLocalState);
+    const getSkipQuestionButtonProps = (0, useSkipQuestionButtonProps_1.default)(skipQuestion, quizApiState);
     const getPreviousQuestionButtonProps = (0, usePreviousQuestionButtonProps_1.default)(quizApiState, previousQuestion);
     const getResetQuizButtonProps = (0, react_1.useCallback)((stylesType = 'primary') => ({
         className: stylesType === 'primary' ? 'cio-question-cta-button' : 'cio-question-redo-button',
@@ -83,6 +85,7 @@ const usePropsGetters = (quizEvents, quizApiState, quizLocalState) => {
         getAddToFavoritesButtonProps,
         getQuizResultButtonProps,
         getQuizResultLinkProps,
+        getSkipQuestionButtonProps,
     };
 };
 exports.default = usePropsGetters;

package/lib/cjs/src/hooks/usePropsGetters/useSkipQuestionButtonProps.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+function useSkipQuestionButtonProps(skipQuestion, quizApiState) {
+    const getSkipQuestionButtonProps = (0, react_1.useCallback)(() => {
+        var _a, _b, _c, _d;
+        const currentQuestionId = (_b = (_a = quizApiState.quizCurrentQuestion) === null || _a === void 0 ? void 0 : _a.next_question) === null || _b === void 0 ? void 0 : _b.id;
+        const isHidden = currentQuestionId &&
+            (((_c = quizApiState.quizCurrentQuestion) === null || _c === void 0 ? void 0 : _c.isCoverQuestion) ||
+                !((_d = quizApiState.quizCurrentQuestion) === null || _d === void 0 ? void 0 : _d.next_question.is_skippable));
+        return {
+            className: isHidden ? 'cio-question-skip-button hide' : 'cio-question-skip-button',
+            type: 'button',
+            onClick: () => {
+                skipQuestion();
+            },
+        };
+    }, [quizApiState.quizCurrentQuestion, skipQuestion]);
+    return getSkipQuestionButtonProps;
+}
+exports.default = useSkipQuestionButtonProps;

package/lib/cjs/{hooks → src/hooks}/useQuizEvents/index.js

@@ -11,6 +11,7 @@ const useQuizResetClick_1 = tslib_1.__importDefault(require("./useQuizResetClick
 const useHydrateQuizLocalState_1 = tslib_1.__importDefault(require("./useHydrateQuizLocalState"));
 const utils_1 = require("../../utils");
 const useQuizAddToFavorites_1 = tslib_1.__importDefault(require("./useQuizAddToFavorites"));
+const useQuizSkipClick_1 = tslib_1.__importDefault(require("./useQuizSkipClick"));
 const useQuizEvents = (quizOptions, cioClient, quizState) => {
     const { quizApiState, dispatchLocalState, dispatchApiState, quizLocalState, quizSessionStorageState, } = quizState;
     const { resultsPageOptions, callbacks } = quizOptions;
@@ -19,6 +20,7 @@ const useQuizEvents = (quizOptions, cioClient, quizState) => {
     const quizAnswerChanged = (0, useQuizAnswerChangeHandler_1.default)(quizApiState, dispatchLocalState);
     // Quiz Next button click callback
     const nextQuestion = (0, useQuizNextClick_1.default)(quizApiState, quizLocalState, dispatchLocalState, callbacks === null || callbacks === void 0 ? void 0 : callbacks.onQuizNextQuestion);
+    const skipQuestion = (0, useQuizSkipClick_1.default)(quizApiState, quizLocalState, dispatchLocalState, callbacks === null || callbacks === void 0 ? void 0 : callbacks.onQuizSkipQuestion);
     // Quiz Back button click callback
     const previousQuestion = (0, useQuizBackClick_1.default)(quizApiState, dispatchLocalState);
     // Quiz result add to cart callback
@@ -39,6 +41,7 @@ const useQuizEvents = (quizOptions, cioClient, quizState) => {
         quizAnswerChanged,
         previousQuestion,
         nextQuestion,
+        skipQuestion,
         resetQuiz,
         hydrateQuiz: hydrateQuizLocalState,
         resetSessionStorageState: (0, utils_1.resetQuizSessionStorageState)(quizSessionStorageState.key),

package/lib/cjs/src/hooks/useQuizEvents/useQuizSkipClick.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const actions_1 = require("../../components/CioQuiz/actions");
+const utils_1 = require("../../utils");
+const useQuizSkipClick = (quizApiState, quizLocalState, dispatchLocalState, onQuizSkipQuestion) => {
+    const quizSkipClickHandler = (0, react_1.useCallback)(() => {
+        var _a;
+        const currentQuestion = (_a = quizApiState.quizCurrentQuestion) === null || _a === void 0 ? void 0 : _a.next_question;
+        const currentQuestionId = currentQuestion === null || currentQuestion === void 0 ? void 0 : currentQuestion.id;
+        if (dispatchLocalState && currentQuestionId) {
+            if (!((currentQuestion === null || currentQuestion === void 0 ? void 0 : currentQuestion.type) === 'cover')) {
+                dispatchLocalState({
+                    type: actions_1.QuestionTypes.Skip,
+                    payload: quizApiState.quizCurrentQuestion,
+                });
+            }
+            const currentAnswerInput = Object.assign(Object.assign({}, quizLocalState.answerInputs[currentQuestionId]), { value: (currentQuestion === null || currentQuestion === void 0 ? void 0 : currentQuestion.type) === 'open' ? 'false' : null });
+            if (currentQuestion && (0, utils_1.isFunction)(onQuizSkipQuestion)) {
+                onQuizSkipQuestion(Object.assign(Object.assign({}, currentQuestion), { answer: currentAnswerInput }));
+            }
+        }
+    }, [
+        dispatchLocalState,
+        onQuizSkipQuestion,
+        quizApiState.quizCurrentQuestion,
+        quizLocalState.answerInputs,
+    ]);
+    return quizSkipClickHandler;
+};
+exports.default = useQuizSkipClick;

package/lib/cjs/{services → src/services}/index.js

@@ -4,12 +4,13 @@ exports.trackQuizConversion = exports.trackQuizResultClick = exports.trackQuizRe
 const tslib_1 = require("tslib");
 /* eslint-disable @typescript-eslint/naming-convention */
 const constructorio_client_javascript_1 = tslib_1.__importDefault(require("@constructor-io/constructorio-client-javascript"));
+const package_json_1 = require("../../package.json");
 const getCioClient = (apiKey) => {
     if (apiKey) {
         return new constructorio_client_javascript_1.default({
             apiKey,
             sendTrackingEvents: true,
-            version: 'cio-ui-quizzes',
+            version: `cio-ui-quizzes-${package_json_1.version}`,
         });
     }
     return undefined;

package/lib/cjs/{stories → src/stories}/Quiz/tests/mocks.js

@@ -153,6 +153,7 @@ const useMockContextValue = (question) => {
         getAddToFavoritesButtonProps: () => (Object.assign(Object.assign({}, mockElementProps), { className: 'cio-result-card-favorites-button' })),
         getHydrateQuizButtonProps: () => (Object.assign(Object.assign({}, mockElementProps), { className: 'cio-question-cta-button' })),
         getNextQuestionButtonProps: () => (Object.assign(Object.assign({}, mockElementProps), { className: 'cio-question-cta-button' })),
+        getSkipQuestionButtonProps: () => (Object.assign(Object.assign({}, mockElementProps), { className: 'cio-question-skip-button' })),
         getPreviousQuestionButtonProps: () => (Object.assign(Object.assign({}, mockElementProps), { className: 'cio-question-back-button' })),
         getQuizImageProps: () => mockElementProps,
         getQuizResultButtonProps: () => mockElementProps,

package/lib/cjs/{utils.js → src/utils.js}

@@ -48,6 +48,7 @@ exports.functionStrings = {
     onAddToFavoritesClick: `(item) => console.dir(item)`,
     onQuizResultsLoaded: `(results) => console.dir(results)`,
     onQuizNextQuestion: `(question) => console.dir(question)`,
+    onQuizSkipQuestion: `(question) => console.dir(question)`,
     cioJsClient: `cioJsClient`,
 };
 const stringifyWithDefaults = (obj) => {

package/lib/mjs/package.json

@@ -0,0 +1,105 @@
+{
+    "name": "@constructor-io/constructorio-ui-quizzes",
+    "version": "1.9.0",
+    "description": "Constructor.io Quizzes UI library for web applications",
+    "author": "constructor.io",
+    "license": "MIT",
+    "homepage": "https://github.com/Constructor-io/constructorio-ui-quizzes#readme",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Constructor-io/constructorio-ui-quizzes.git"
+    },
+    "bugs": {
+        "url": "https://github.com/Constructor-io/constructorio-ui-quizzes/issues"
+    },
+    "main": "lib/cjs/index.js",
+    "module": "lib/mjs/index.js",
+    "exports": {
+        "./styles.css": {
+            "import": "./lib/styles.css",
+            "require": "./lib/styles.css"
+        },
+        "./constructorio-ui-quizzes-bundled": {
+            "import": "./dist/constructorio-ui-quizzes-bundled.js",
+            "require": "./dist/constructorio-ui-quizzes-bundled.js"
+        },
+        ".": {
+            "import": "./lib/mjs/index.js",
+            "require": "./lib/cjs/index.js"
+        },
+        "./cjs": {
+            "import": "./lib/cjs/index.js",
+            "require": "./lib/cjs/index.js"
+        }
+    },
+    "files": [
+        "lib/**/*",
+        "dist/constructorio-ui-quizzes-bundled.js"
+    ],
+    "engines": {
+        "node": ">=14"
+    },
+    "types": "lib/types/index.d.ts",
+    "scripts": {
+        "lint": "eslint src --ext js,ts,jsx,tsx",
+        "check-types": "npx tsc --noEmit",
+        "copy-styles": "cp src/styles.css lib/styles.css",
+        "prepare": "husky install",
+        "dev": "storybook dev -p 6006",
+        "storybook:ci": "storybook dev --ci --quiet -p 6006",
+        "test-storybook": "test-storybook",
+        "test-storybook:watch": "test-storybook --watch",
+        "test-storybook:ci": "start-server-and-test storybook:ci http://localhost:6006 test-storybook",
+        "build-storybook": "storybook build -o 'docs'",
+        "serve-built-storybook": "npx http-server docs",
+        "verify-node-version": "chmod +x ./scripts/verify-node-version.sh && ./scripts/verify-node-version.sh",
+        "version": "npm run verify-node-version && npm run build-storybook && git add -u ./docs && git add ./docs/* && npm run compile",
+        "compile": "rm -rf lib && tsc -p tsconfig.json && tsc -p tsconfig-cjs.json && npm run copy-styles && vite build",
+        "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.35.17",
+        "react": ">=16.12.0",
+        "react-dom": ">=16.12.0",
+        "tslib": "^2.4.0"
+    },
+    "devDependencies": {
+        "@axe-core/react": "^4.7.0",
+        "@cspell/eslint-plugin": "^6.18.1",
+        "@storybook/addon-a11y": "^7.0.11",
+        "@storybook/addon-actions": "7.0.11",
+        "@storybook/addon-essentials": "7.0.11",
+        "@storybook/addon-interactions": "^7.0.11",
+        "@storybook/addon-links": "7.0.11",
+        "@storybook/addon-docs": "7.0.11",
+        "@storybook/jest": "^0.1.0",
+        "@storybook/react-webpack5": "7.0.11",
+        "@storybook/test-runner": "0.10.0",
+        "@storybook/testing-library": "^0.1.0",
+        "@types/react": "^18.0.26",
+        "@types/react-dom": "^18.0.9",
+        "@typescript-eslint/eslint-plugin": "^5.47.0",
+        "@typescript-eslint/parser": "^5.47.0",
+        "chromatic": "^6.21.0",
+        "eslint": "^8.30.0",
+        "eslint-config-airbnb": "^19.0.4",
+        "eslint-config-airbnb-typescript": "^17.0.0",
+        "eslint-config-prettier": "^8.5.0",
+        "eslint-plugin-import": "^2.26.0",
+        "eslint-plugin-jsx-a11y": "^6.7.1",
+        "eslint-plugin-prettier": "^4.2.1",
+        "eslint-plugin-react": "^7.31.11",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-storybook": "^0.6.12",
+        "husky": "^8.0.1",
+        "license-checker": "^25.0.1",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "start-server-and-test": "^2.0.0",
+        "storybook": "7.0.11",
+        "typescript": "^4.9.4",
+        "vite": "^4.2.1",
+        "vite-plugin-css-injected-by-js": "^3.1.0",
+        "webpack": "^5.75.0"
+    }
+}

package/lib/mjs/{components → src/components}/CioQuiz/actions.js

@@ -6,6 +6,7 @@ export var QuestionTypes;
     QuestionTypes["SingleSelect"] = "single";
     QuestionTypes["MultipleSelect"] = "multiple";
     QuestionTypes["Next"] = "next";
+    QuestionTypes["Skip"] = "skip";
     QuestionTypes["Back"] = "back";
     QuestionTypes["Reset"] = "reset";
     QuestionTypes["Hydrate"] = "hydrate";

package/lib/mjs/{components → src/components}/CioQuiz/index.js

@@ -10,7 +10,7 @@ import SessionPromptModal from '../SessionPromptModal/SessionPromptModal';
 import { convertPrimaryColorsToString, renderImages } from '../../utils';
 import ProgressBar from '../ProgressBar/ProgressBar';
 export default function CioQuiz(props) {
-    const { cioClient, state, events: { hydrateQuiz, resetSessionStorageState }, getAddToCartButtonProps, getAddToFavoritesButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, } = useQuiz(props);
+    const { cioClient, state, events: { hydrateQuiz, resetSessionStorageState }, getAddToCartButtonProps, getAddToFavoritesButtonProps, getCoverQuestionProps, getHydrateQuizButtonProps, getNextQuestionButtonProps, getSkipQuestionButtonProps, getOpenTextInputProps, getPreviousQuestionButtonProps, getQuizImageProps, getQuizResultButtonProps, getQuizResultLinkProps, getResetQuizButtonProps, getSelectInputProps, primaryColorStyles, } = useQuiz(props);
     const [showSessionPrompt, setShowSessionPrompt] = useState(false);
     const { resultsPageOptions, sessionStateOptions } = props;
     const { quizSessionStorageState: { hasSessionStorageState, skipToResults }, } = state;
@@ -32,6 +32,7 @@ export default function CioQuiz(props) {
         getCoverQuestionProps,
         getHydrateQuizButtonProps,
         getNextQuestionButtonProps,
+        getSkipQuestionButtonProps,
         getOpenTextInputProps,
         getPreviousQuestionButtonProps,
         getQuizImageProps,

package/lib/mjs/{components → src/components}/CioQuiz/quizLocalReducer.js

@@ -74,6 +74,31 @@ export default function quizLocalReducer(state, action) {
                 isQuizCompleted: false,
             };
         }
+        case QuestionTypes.Skip: {
+            const { answers, answerInputs } = state;
+            const newAnswers = [...answers];
+            const lastAnswerInputIndex = answers.length;
+            const currentAnswerInput = Object.values(state.answerInputs)[lastAnswerInputIndex];
+            switch (currentAnswerInput.type) {
+                case QuestionTypes.OpenText:
+                    newAnswers.push(['false']);
+                    break;
+                case QuestionTypes.Cover:
+                    newAnswers.push(['seen']);
+                    break;
+                case QuestionTypes.SingleSelect:
+                case QuestionTypes.MultipleSelect:
+                default:
+                    newAnswers.push([]);
+            }
+            return {
+                ...state,
+                // We now commit current answers to prevAnswerInputs
+                prevAnswerInputs: answerInputs,
+                answers: newAnswers,
+                isQuizCompleted: false,
+            };
+        }
         case QuestionTypes.Back: {
             const prevAnswerInputs = { ...state.prevAnswerInputs };
             return {

package/lib/mjs/src/components/ControlBar/ControlBar.js

@@ -0,0 +1,15 @@
+import React, { useContext } from 'react';
+import BackButton from '../BackButton/BackButton';
+import CTAButton from '../CTAButton/CTAButton';
+import SkipButton from '../SkipButton/SkipButton';
+import QuizContext from '../CioQuiz/context';
+function ControlBar(props) {
+    const { ctaButtonText } = props;
+    const { getNextQuestionButtonProps, getSkipQuestionButtonProps } = useContext(QuizContext);
+    return (React.createElement("div", { className: 'cio-question-buttons-container' },
+        React.createElement(BackButton, null),
+        React.createElement("div", { className: 'cio-question-buttons-group' },
+            React.createElement(SkipButton, { propsGetters: getSkipQuestionButtonProps }),
+            React.createElement(CTAButton, { ctaText: ctaButtonText, propsGetters: getNextQuestionButtonProps }))));
+}
+export default ControlBar;

package/lib/mjs/src/components/SkipButton/SkipButton.js

@@ -0,0 +1,10 @@
+import React from 'react';
+function SkipButton(props) {
+    const { propsGetters, className = 'cio-button-container', ...rest } = props;
+    return (React.createElement("div", { className: `${className || ''}` }, propsGetters && (
+    // eslint-disable-next-line react/button-has-type
+    React.createElement("button", { ...rest, ...propsGetters() },
+        "Skip",
+        React.createElement("span", null, " question")))));
+}
+export default SkipButton;

package/lib/mjs/{constants.js → src/constants.js}

@@ -22,6 +22,7 @@ export const componentDescription = `- import \`CioQuiz\` to render in your JSX.
   - \`numResultsToDisplay\` is an optional parameter that determines how many results should be displayed on results page
 - \`callbacks\` lets you pass callback functions that will be called on certain actions
   - \`onQuizNextQuestion\` is an optional callback function that will be called when user moves to the next question
+  - \`onQuizSkipQuestion\` is an optional callback function that will be called when user skips a question
 - \`sessionStateOptions\` lets you configure the session modal behavior
   - \`showSessionModal\` is a boolean used to decide whether to show the session modal. The default behavior is to show the session modal
   - \`showSessionModalOnResults\` is a boolean to decide whether to show the session modal after reaching the results page. The default behavior is to not show the session modal
@@ -54,6 +55,7 @@ const {
   getCoverQuestionProps: () => ({...})), // prop getter for jsx quiz cover question,
   getHydrateQuizButtonProps: () => ({...})), // prop getter for jsx hydrate quiz button,
   getNextQuestionButtonProps: () => ({...})), // prop getter for jsx next button to traverse the quiz,
+  getSkipQuestionButtonProps: () => ({...})), // prop getter for jsx skip button to traverse the quiz,
   getPreviousQuestionButtonProps: () => ({...})), // prop getter for jsx back button to traverse the quiz, 
   getOpenTextInputProps: () => ({...})), // prop getter for jsx open text input,
   getSelectInputProps: () => ({...})), // prop getter for jsx select input for select type questions,

package/lib/mjs/{hooks → src/hooks}/usePropsGetters/index.js

@@ -5,12 +5,14 @@ import useOpenTextInputProps from './useOpenTextInputProps';
 import useNextQuestionButtonProps from './useNextQuestionButtonProps';
 import usePreviousQuestionButtonProps from './usePreviousQuestionButtonProps';
 import useAddToFavoritesButtonProps from './useAddToFavoritesButtonProps';
+import useSkipQuestionButtonProps from './useSkipQuestionButtonProps';
 const usePropsGetters = (quizEvents, quizApiState, quizLocalState) => {
-    const { quizAnswerChanged, nextQuestion, previousQuestion, resetQuiz, hydrateQuiz, addToCart, addToFavorites, resultClick, } = quizEvents;
+    const { quizAnswerChanged, nextQuestion, skipQuestion, previousQuestion, resetQuiz, hydrateQuiz, addToCart, addToFavorites, resultClick, } = quizEvents;
     const getOpenTextInputProps = useOpenTextInputProps(quizAnswerChanged, nextQuestion, quizApiState.quizCurrentQuestion?.next_question, quizLocalState.answerInputs);
     const getCoverQuestionProps = useCoverQuestionProps(quizAnswerChanged, quizApiState.quizCurrentQuestion?.next_question);
     const getSelectInputProps = useSelectInputProps(quizAnswerChanged, nextQuestion, quizApiState.quizCurrentQuestion?.next_question, quizLocalState.answerInputs);
     const getNextQuestionButtonProps = useNextQuestionButtonProps(nextQuestion, quizApiState, quizLocalState);
+    const getSkipQuestionButtonProps = useSkipQuestionButtonProps(skipQuestion, quizApiState);
     const getPreviousQuestionButtonProps = usePreviousQuestionButtonProps(quizApiState, previousQuestion);
     const getResetQuizButtonProps = useCallback((stylesType = 'primary') => ({
         className: stylesType === 'primary' ? 'cio-question-cta-button' : 'cio-question-redo-button',
@@ -70,6 +72,7 @@ const usePropsGetters = (quizEvents, quizApiState, quizLocalState) => {
         getAddToFavoritesButtonProps,
         getQuizResultButtonProps,
         getQuizResultLinkProps,
+        getSkipQuestionButtonProps,
     };
 };
 export default usePropsGetters;

package/lib/mjs/src/hooks/usePropsGetters/useSkipQuestionButtonProps.js

@@ -0,0 +1,17 @@
+import { useCallback } from 'react';
+export default function useSkipQuestionButtonProps(skipQuestion, quizApiState) {
+    const getSkipQuestionButtonProps = useCallback(() => {
+        const currentQuestionId = quizApiState.quizCurrentQuestion?.next_question?.id;
+        const isHidden = currentQuestionId &&
+            (quizApiState.quizCurrentQuestion?.isCoverQuestion ||
+                !quizApiState.quizCurrentQuestion?.next_question.is_skippable);
+        return {
+            className: isHidden ? 'cio-question-skip-button hide' : 'cio-question-skip-button',
+            type: 'button',
+            onClick: () => {
+                skipQuestion();
+            },
+        };
+    }, [quizApiState.quizCurrentQuestion, skipQuestion]);
+    return getSkipQuestionButtonProps;
+}

package/lib/mjs/{hooks → src/hooks}/useQuizEvents/index.js

@@ -8,6 +8,7 @@ import useQuizResetClick from './useQuizResetClick';
 import useHydrateQuizLocalState from './useHydrateQuizLocalState';
 import { resetQuizSessionStorageState } from '../../utils';
 import useQuizAddToFavorites from './useQuizAddToFavorites';
+import useQuizSkipClick from './useQuizSkipClick';
 const useQuizEvents = (quizOptions, cioClient, quizState) => {
     const { quizApiState, dispatchLocalState, dispatchApiState, quizLocalState, quizSessionStorageState, } = quizState;
     const { resultsPageOptions, callbacks } = quizOptions;
@@ -16,6 +17,7 @@ const useQuizEvents = (quizOptions, cioClient, quizState) => {
     const quizAnswerChanged = useQuizAnswerChangeHandler(quizApiState, dispatchLocalState);
     // Quiz Next button click callback
     const nextQuestion = useQuizNextClick(quizApiState, quizLocalState, dispatchLocalState, callbacks?.onQuizNextQuestion);
+    const skipQuestion = useQuizSkipClick(quizApiState, quizLocalState, dispatchLocalState, callbacks?.onQuizSkipQuestion);
     // Quiz Back button click callback
     const previousQuestion = useQuizBackClick(quizApiState, dispatchLocalState);
     // Quiz result add to cart callback
@@ -36,6 +38,7 @@ const useQuizEvents = (quizOptions, cioClient, quizState) => {
         quizAnswerChanged,
         previousQuestion,
         nextQuestion,
+        skipQuestion,
         resetQuiz,
         hydrateQuiz: hydrateQuizLocalState,
         resetSessionStorageState: resetQuizSessionStorageState(quizSessionStorageState.key),