@constructor-io/constructorio-ui-quizzes 1.0.1

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { RequestStates } from '../../constants';
+import { NextQuestionResponse, GetBrowseResultsResponse } from '../../types';
+import { ActionAnswerQuestion } from './actions';
+import { QuizReducerState } from './reducer';
+interface QuizContextValue {
+    state: QuizReducerState;
+    requestState: RequestStates;
+    questionResponse: NextQuestionResponse;
+    resultsResponse: GetBrowseResultsResponse;
+    isFirstQuestion: boolean;
+    quizNextHandler: (action?: ActionAnswerQuestion) => void;
+    quizBackHandler: () => void;
+    dispatch: React.Dispatch<ActionAnswerQuestion>;
+}
+declare const _default: React.Context<Partial<QuizContextValue>>;
+export default _default;

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
+import { ResultsProps } from '../Results/Results';
+export interface ResultsPageOptions extends ResultsProps {
+    numResultsToDisplay?: number;
+}
+export interface IQuizProps {
+    quizId: string;
+    apiKey?: string;
+    cioJsClient?: ConstructorIOClient;
+    resultsPageOptions: ResultsPageOptions;
+    quizVersionId?: string;
+}
+export default function CioQuiz(props: IQuizProps): JSX.Element | null;

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

@@ -0,0 +1,12 @@
+import { ActionAnswerQuestion, OpenTextQuestionPayload, SelectQuestionPayload } from './actions';
+export type Answers = string[][];
+export type QuizReducerState = {
+    answers: Answers;
+    answerInputs: {};
+    isLastAnswer: boolean;
+};
+export type AnswerInputState = {
+    [key: string]: OpenTextQuestionPayload | SelectQuestionPayload;
+};
+export declare const initialState: QuizReducerState;
+export default function reducer(state: QuizReducerState, action: ActionAnswerQuestion): QuizReducerState;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface ControlBarProps {
+    showBackButton?: boolean;
+    isNextButtonDisabled?: boolean;
+    backButtonHandler?: () => void;
+    nextButtonHandler: () => void;
+    ctaButtonText?: string;
+}
+declare function ControlBar(props: ControlBarProps): JSX.Element;
+export default ControlBar;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function CoverTypeQuestion(): JSX.Element | null;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+interface OpenTextQuestionProps {
+    initialValue?: string;
+    onChangeHandler?: React.ChangeEventHandler<HTMLInputElement>;
+}
+declare function OpenTextQuestion(props: OpenTextQuestionProps): JSX.Element | null;
+export default OpenTextQuestion;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface QuestionDescriptionProps {
+    description: string;
+}
+declare function QuestionDescription(props: QuestionDescriptionProps): JSX.Element;
+export default QuestionDescription;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface QuestionTitleProps {
+    title: string;
+}
+declare function QuestionTitle(props: QuestionTitleProps): JSX.Element;
+export default QuestionTitle;

package/lib/types/components/QuizQuestions/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { NextQuestionResponse } from '../../types';
+export default function QuizQuestions(props: {
+    questionResponse: NextQuestionResponse;
+}): JSX.Element;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface RedoButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    redoText?: string;
+}
+declare function RedoButton(props: RedoButtonProps): JSX.Element;
+export default RedoButton;

package/lib/types/components/RedoButton/RedoSVG.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function RedoSVG(): JSX.Element;
+export default RedoSVG;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { BrowseResultData } from '../../types';
+interface ResultCardProps {
+    result: Partial<BrowseResultData>;
+    addToCartCallback: (clickedResult: Partial<BrowseResultData>) => any;
+    clickItemCallback?: (clickedResult: Partial<BrowseResultData>) => any;
+    salePriceKey?: string;
+    regularPriceKey?: string;
+}
+export default function ResultCard(props: ResultCardProps): JSX.Element;
+export {};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ResultsProps } from '../Results/Results';
+export interface IResultContainerProps {
+    options: ResultsProps;
+    resetQuizSessionId: () => void;
+}
+export default function ResultContainer(props: IResultContainerProps): JSX.Element;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { BrowseResultData } from '../../types';
+interface ResultCtaButtonProps {
+    item: Partial<BrowseResultData>;
+    className?: string;
+    callback?: (item: Partial<BrowseResultData>) => any;
+}
+export default function ResultCtaButton(props: ResultCtaButtonProps): JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface ResultFiltersProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    filters?: any;
+}
+declare function ResultFilters(props: ResultFiltersProps): JSX.Element;
+export default ResultFilters;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { BrowseResultData } from '../../types';
+export interface ResultsProps {
+    addToCartCallback: (item: Partial<BrowseResultData>) => any;
+    clickItemCallback?: (item: Partial<BrowseResultData>) => any;
+    resultCardSalePriceKey?: string;
+    resultCardRegularPriceKey?: string;
+}
+declare function Results(props: ResultsProps): JSX.Element;
+export default Results;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function SelectTypeQuestion(): JSX.Element | null;
+export default SelectTypeQuestion;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function Spinner(): JSX.Element;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface ZeroResultsProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    onResetClick?: () => {};
+}
+declare function ZeroResults(props: ZeroResultsProps): JSX.Element;
+export default ZeroResults;

package/lib/types/constants.d.ts

@@ -0,0 +1,11 @@
+export declare const apiKey = "key_wJSdZSiesX5hiVLt";
+export declare const quizId = "coffee-quiz";
+export declare const componentDescription = "- import `CioQuiz` to render in your JSX.\n- This component handles state management, data fetching, and rendering logic.\n- To use this component, `quizId`, `resultsPageOptions`, and one of `apiKey` or `cioJsClient` are required.\n- `resultsPageOptions` lets you configure the results page\n  - `addToCartCallback` is a callback function that will be called when the \"Add to cart\" button is clicked\n  - `clickItemCallback` is an optional callback function that will be called when the result card is clicked. The default behavior is redirecting the user to the item's URL\n  - `resultCardRegularPriceKey` is a parameter that specifies the metadata field name for the regular price\n  - `resultCardSalePriceKey` is an optional parameter that specifies the metadata field name for the sale price\n- Use different props to configure the behavior of this component.\n- The following stories show how different props affect the component's behavior\n\n> Note: `cioJsClient` refers to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)\n";
+export declare const basicDescription = "Pass an `apiKey` and a `quizId` to request questions and quiz results from Constructor's servers";
+export declare const cioJsClientDescription = "If you are already using an instance of the `ConstructorIOClient`, you can pass a `cioJsClient` instead of an `apiKey` to request results from Constructor's servers\n\n> Note: `cioJsClient` refers to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)";
+export declare enum RequestStates {
+    Stale = 0,
+    Loading = 1,
+    Success = 2,
+    Error = 3
+}

package/lib/types/hooks/useCioClient.d.ts

@@ -0,0 +1,8 @@
+import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
+export type CioClientConfig = {
+    apiKey?: string;
+    cioJsClient?: ConstructorIOClient;
+};
+type UseCioClient = (cioClientConfig: CioClientConfig) => ConstructorIOClient | null;
+declare const useCioClient: UseCioClient;
+export default useCioClient;

package/lib/types/index.d.ts

@@ -0,0 +1,2 @@
+import CioQuiz from './components/CioQuiz';
+export default CioQuiz;

package/lib/types/stories/Quiz/argTypes.d.ts

@@ -0,0 +1,30 @@
+export declare const argTypes: {
+    apiKey: {
+        type: {
+            name: string;
+        };
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+        };
+        control: {
+            type: string;
+        };
+    };
+    quizId: {
+        type: {
+            name: string;
+        };
+        description: string;
+        table: {
+            type: {
+                summary: string;
+            };
+        };
+        control: {
+            type: string;
+        };
+    };
+};

package/lib/types/types.d.ts

@@ -0,0 +1 @@
+export type { QuestionOption, QuestionImages, Question, NextQuestionResponse, QuizResultsResponse, GetBrowseResultsResponse, BrowseResultData, BrowseRequestType, QuizzesParameters, QuizzesResultsParameters, } from '@constructor-io/constructorio-client-javascript/lib/types';

package/lib/types/utils.d.ts

@@ -0,0 +1,31 @@
+import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
+import { QuestionTypes } from './components/CioQuiz/actions';
+import { QuestionImages, QuizzesParameters, QuizzesResultsParameters, NextQuestionResponse, QuizResultsResponse } from './types';
+export declare const renderImages: (images: Partial<QuestionImages>, cssClasses?: string) => JSX.Element | "";
+export declare const getStoryParams: (storyCode: any, templateCode: any, importCode: any) => {
+    docs: {
+        source: {
+            code: string;
+            language: string;
+            format: boolean;
+            type: string;
+        };
+    };
+};
+export declare const defaultAddToCartCallbackCode = "\"addToCartCallback\": (item) => console.dir(item)";
+export declare const stringifyWithDefaults: (obj: {
+    cioJsClient?: any;
+    addToCartCallback: any;
+}) => string;
+export declare const stringify: (obj: any) => string;
+export declare const getNextQuestion: (cioClient: ConstructorIOClient, quizId: string, parameters: QuizzesParameters) => Promise<NextQuestionResponse>;
+export declare const getQuizResults: (cioClient: ConstructorIOClient, quizId: string, parameters: QuizzesResultsParameters) => Promise<QuizResultsResponse>;
+export declare const getQuestionTypes: (questionType?: `${QuestionTypes}`) => {
+    isOpenQuestion: boolean;
+    isCoverQuestion: boolean;
+    isSingleQuestion: boolean;
+    isMultipleQuestion: boolean;
+    isSelectQuestion: boolean;
+};
+export declare const getCioClient: (apiKey?: string) => ConstructorIOClient | null;
+export declare function getPreferredColorScheme(): string;

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@constructor-io/constructorio-ui-quizzes",
+  "version": "1.0.1",
+  "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"
+    },
+    ".": {
+      "import": "./lib/mjs/index.js",
+      "require": "./lib/cjs/index.js"
+    }
+  },
+  "files": [
+    "lib/**/*"
+  ],
+  "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",
+    "check-license": "license-checker --production --onlyAllow 'Apache-2.0;BSD-3-Clause;MIT;0BSD;BSD-2-Clause'"
+  },
+  "peerDependencies": {
+    "@constructor-io/constructorio-client-javascript": "^2.35.2",
+    "react": ">=16.12.0",
+    "react-dom": ">=16.12.0",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@cspell/eslint-plugin": "^6.18.1",
+    "@storybook/addon-a11y": "^7.0.0-beta.40",
+    "@storybook/addon-actions": "7.0.0-beta.40",
+    "@storybook/addon-essentials": "7.0.0-beta.40",
+    "@storybook/addon-interactions": "^7.0.0-beta.40",
+    "@storybook/addon-links": "7.0.0-beta.40",
+    "@storybook/jest": "^0.0.11-next.0",
+    "@storybook/react-webpack5": "7.0.0-beta.40",
+    "@storybook/test-runner": "0.10.0-next.8",
+    "@storybook/testing-library": "^0.0.14-next.1",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
+    "@typescript-eslint/parser": "^5.47.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.8",
+    "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.0-beta.40",
+    "typescript": "^4.9.4",
+    "webpack": "^5.75.0"
+  }
+}