freemium-survey-components 0.3.0 → 0.5.1-beta.2

package/README.md

@@ -1,4 +1,6 @@
-# Freemium-survey-components [npm](https://www.npmjs.com/package/freemium-survey-components)
+# [Freemium-survey-components](https://www.npmjs.com/package/freemium-survey-components)
+
+⚠️ **Not ready for public usage yet!**
 
 Freemium-survey-components is a react package that renders the survey collection form given the survey object from the survey-serv platform service.
 

package/dist/declarations/lib/types/components/button/index.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export declare const BUTTON_SIZE_VARIANTS: {
+    LARGE: string;
+    MINI: string;
+    NORMAL: string;
+};
+export declare type ButtonSizeKey = 'large' | 'mini' | 'normal' | undefined;
+export declare type buttonHTMLType = 'button' | 'reset' | 'submit' | undefined;
+export declare type buttonType = 'primary' | 'secondary' | 'danger' | 'link';
+export declare type ButtonProps = {
+    type?: buttonType;
+    htmlType?: buttonHTMLType;
+    size?: ButtonSizeKey;
+    inline?: boolean;
+    disabled?: boolean;
+    large?: boolean;
+    className?: string;
+    ref?: any;
+    onClick?: any;
+    overrideStyleClassName?: string;
+    loading?: boolean;
+    children: any;
+};
+export declare const Button: (props: ButtonProps & React.HTMLAttributes<HTMLButtonElement>) => JSX.Element;

package/dist/declarations/lib/types/components/checkbox/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+declare type Option = {
+    id: string;
+    name?: string;
+    label: string;
+};
+interface CheckboxGroupInterface {
+    options: Array<Option>;
+    values: string[];
+    onChangeHandler: (newValues: string[]) => void;
+}
+declare const CheckboxGroup: ({ values, options, onChangeHandler, }: CheckboxGroupInterface) => JSX.Element;
+export { CheckboxGroup };

package/dist/declarations/lib/types/components/nps/index.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+export declare type ButtonShapeType = 'rounded' | 'square' | 'curved';
+declare type NPSProps = {
+    type_info: {
+        linear_scale: {
+            button_shape: ButtonShapeType;
+            button_style: any;
+        };
+        validation: {
+            min: number;
+        };
+        score_presets: {
+            start: string;
+            end: string;
+        };
+        footer_text: string;
+    };
+    onChangeHandler: (value: number) => void;
+    npsValue: number;
+};
+declare const NPS: (props: NPSProps) => JSX.Element;
+export { NPS };

package/dist/declarations/lib/types/components/progressbar/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface ProgressBarProps {
+    totalSteps: number;
+    completedSteps: number;
+}
+declare const ProgressBar: (props: ProgressBarProps) => JSX.Element;
+export { ProgressBar };

package/dist/declarations/lib/types/components/radio-button/index.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+interface RadioButtonProps {
+    checked: boolean;
+    children: string;
+    value: string | number;
+    name: string;
+    onChange: (e: any) => void;
+    id?: string;
+    autoFocus?: boolean;
+}
+interface RadioGroupInterface {
+    options: Array<{
+        id: string;
+        name?: string;
+        label: string;
+    }>;
+    value: string;
+    name: string;
+    onChangeHandler: (newValue: string) => void;
+}
+declare const RadioGroup: ({ name, options, value, onChangeHandler, }: RadioGroupInterface) => JSX.Element;
+declare const Radio: React.ComponentType<Partial<{
+    checked: boolean;
+    autoFocus: boolean;
+}> & Pick<RadioButtonProps & React.RefAttributes<HTMLInputElement>, "ref" | "name" | "value" | "id" | "children" | "onChange" | "key">>;
+export { Radio, RadioGroup };

package/dist/declarations/lib/types/components/text-input/index.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+interface InputProps extends React.HTMLAttributes<HTMLInputElement> {
+    isErrored?: boolean;
+    showCount?: boolean;
+    errorText?: string;
+    maxLength?: any;
+    type?: string;
+    label: string;
+    style?: any;
+    value?: any;
+    inputStyle?: any;
+    className?: string;
+    startLabel?: React.ReactNode | any;
+    endLabel?: React.ReactNode | any;
+    isRequired?: boolean;
+    inline?: boolean;
+}
+interface TextAreaProps extends React.HTMLAttributes<HTMLTextAreaElement> {
+    isErrored: boolean;
+    showCount?: boolean;
+    maxLength?: any;
+    errorText?: string;
+    style?: any;
+    value?: any;
+    inputStyle?: any;
+    className?: string;
+    label: string;
+    startLabel?: React.ReactNode | any;
+    startAdornment?: React.ReactNode | any;
+    endLabel?: React.ReactNode | any;
+    endAdornment?: React.ReactNode | any;
+    isRequired?: boolean;
+    inline?: boolean;
+}
+declare const Input: React.ComponentType<Partial<{
+    isRequired: boolean;
+    showCount: boolean;
+    isErrored: boolean;
+    inline: boolean;
+    spellCheck: boolean;
+    autoFocus: boolean;
+}> & Pick<InputProps & React.RefAttributes<HTMLInputElement>, "onSubmit" | "ref" | "label" | "slot" | "style" | "title" | "value" | "maxLength" | "errorText" | "inputStyle" | "className" | "startLabel" | "endLabel" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "type">>;
+declare const TextArea: React.ComponentType<Partial<{
+    isRequired: boolean;
+    showCount: boolean;
+    isErrored: boolean;
+    inline: boolean;
+    spellCheck: boolean;
+    autoFocus: boolean;
+}> & Pick<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>, "onSubmit" | "ref" | "label" | "slot" | "style" | "title" | "value" | "maxLength" | "errorText" | "inputStyle" | "className" | "startLabel" | "startAdornment" | "endLabel" | "endAdornment" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key">>;
+export { Input, TextArea };

package/dist/declarations/lib/types/index.d.ts

@@ -0,0 +1 @@
+export * from './survey';

package/dist/declarations/lib/types/survey/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+interface SurveyProps {
+    survey: {
+        [key: string]: any;
+    };
+    onSubmit: (data: {
+        [key: string]: any;
+    }) => void;
+}
+declare const Survey: ({ survey, onSubmit }: SurveyProps) => JSX.Element | null;
+export { Survey };

package/dist/freemium-survey-components.cjs.d.ts

@@ -0,0 +1 @@
+export * from "./declarations/lib/types/index";

package/dist/freemium-survey-components.cjs.dev.js

@@ -0,0 +1,336 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var freemiumSurveyComponents = require('freemium-survey-components');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+var withDefaults = function withDefaults(component, defaultProps) {
+  component.defaultProps = defaultProps;
+  return component;
+};
+
+var _excluded = ["inputStyle", "style", "className", "showCount", "isErrored", "startLabel", "isRequired", "errorText", "endLabel", "maxLength"],
+    _excluded2 = ["inputStyle", "style", "className", "showCount", "maxLength", "isErrored", "startLabel", "isRequired"];
+
+var defaultProps$2 = {
+  isRequired: false,
+  showCount: false,
+  isErrored: false,
+  inline: false,
+  spellCheck: false,
+  autoFocus: false
+};
+var InputComponent = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var inputStyle = props.inputStyle,
+      style = props.style,
+      className = props.className,
+      showCount = props.showCount,
+      isErrored = props.isErrored,
+      startLabel = props.startLabel,
+      isRequired = props.isRequired,
+      errorText = props.errorText,
+      endLabel = props.endLabel,
+      maxLength = props.maxLength,
+      rest = _objectWithoutPropertiesLoose(props, _excluded);
+
+  console.log(props.value);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "input-container",
+    style: style
+  }, props.label && /*#__PURE__*/React__default["default"].createElement("label", {
+    className: "input-label " + (isRequired ? 'required' : '')
+  }, props.label), /*#__PURE__*/React__default["default"].createElement("div", null, startLabel && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "start-label"
+  }, startLabel), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "input-basic " + (isErrored ? 'error' : '') + (className || '')
+  }, /*#__PURE__*/React__default["default"].createElement("input", _extends({
+    type: "text",
+    autoComplete: "off"
+  }, rest, {
+    ref: ref,
+    style: inputStyle
+  })), showCount && maxLength > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "end-max-length"
+  }, (props.value && props.value.length || 0) + "/" + props.maxLength)), endLabel && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "end-label"
+  }, endLabel)), isErrored && errorText && /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "input-error"
+  }, props.errorText));
+});
+var TextAreaComponent = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var inputStyle = props.inputStyle,
+      style = props.style,
+      className = props.className,
+      showCount = props.showCount,
+      maxLength = props.maxLength,
+      isErrored = props.isErrored,
+      startLabel = props.startLabel,
+      isRequired = props.isRequired,
+      rest = _objectWithoutPropertiesLoose(props, _excluded2);
+
+  console.log(props.value);
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "textarea-container",
+    style: style
+  }, props.label && /*#__PURE__*/React__default["default"].createElement("label", {
+    className: "input-label " + (isRequired ? 'required' : '')
+  }, props.label), startLabel && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "start-label"
+  }, startLabel), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "input-basic " + (isErrored ? 'error' : '') + " " + (className || '')
+  }, /*#__PURE__*/React__default["default"].createElement("textarea", _extends({
+    autoComplete: "off"
+  }, rest, {
+    ref: ref,
+    style: inputStyle
+  })), showCount && maxLength && maxLength > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "end-max-length"
+  }, (props.value && props.value.length || 0) + "/" + props.maxLength)), props.endLabel && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "end-label"
+  }, props.endLabel)), props.isErrored && props.errorText && /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "input-error"
+  }, props.errorText));
+});
+withDefaults(InputComponent, defaultProps$2);
+withDefaults(TextAreaComponent, defaultProps$2);
+
+var defaultProps$1 = {
+  checked: false
+};
+
+var TickIcon = function TickIcon() {
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    id: "tick",
+    className: "tick-icon",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": "title",
+    viewBox: "0 0 10 10"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M3 5.87c-.18666814.00267463-.36667109-.06932655-.5-.2L.21 3.41c-.1786328-.17863279-.24839684-.43899577-.1830127-.6830127.06538414-.24401694.25598306-.43461586.5-.5C.77100423 2.16160316 1.0313672 2.23136721 1.21 2.41L3 4.18 6.8.33c.27679776-.27455556.72320224-.27455556 1 0 .13696438.13025306.21450026.31098915.21450026.5S7.93696438 1.19974694 7.8 1.33L3.45 5.67c-.12082534.11896945-.28072735.19003701-.45.2Z",
+    fill: "#fff",
+    fillRule: "evenodd"
+  }));
+};
+
+var CheckboxComponent = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React__default["default"].createElement("label", {
+    className: "checkbox-label " + (props.disabled && 'disabled')
+  }, /*#__PURE__*/React__default["default"].createElement("input", {
+    ref: ref,
+    id: props.id,
+    type: "checkbox",
+    name: props.name,
+    readOnly: props.readOnly,
+    disabled: props.disabled,
+    "aria-disabled": props.disabled,
+    value: props.value,
+    checked: props.checked,
+    autoFocus: props.autoFocus,
+    onChange: props.readOnly ? function () {
+      return undefined;
+    } : function (e) {
+      return props.onChange(e, e.target.checked);
+    }
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "checkbox"
+  }, props.checked && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "icon-container"
+  }, /*#__PURE__*/React__default["default"].createElement(TickIcon, null), ' ')), /*#__PURE__*/React__default["default"].createElement("div", null, props.children));
+});
+withDefaults(CheckboxComponent, defaultProps$1);
+
+var defaultProps = {
+  checked: false,
+  autoFocus: false
+};
+
+var RadioComponent = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React__default["default"].createElement("label", {
+    className: "radio-label"
+  }, /*#__PURE__*/React__default["default"].createElement("input", {
+    ref: ref,
+    type: "radio",
+    name: props.name,
+    value: props.value,
+    checked: props.checked,
+    onChange: props.onChange,
+    autoFocus: props.autoFocus
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "radio"
+  }), /*#__PURE__*/React__default["default"].createElement("div", null, props.children));
+});
+withDefaults(RadioComponent, defaultProps);
+
+var AUTO_COMMIT_FIELD_TYPES = ['RANGE', 'NPS', 'RADIO'];
+
+var SurveyEndCard = function SurveyEndCard() {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "question-container",
+    style: {
+      gap: '16px'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("h4", null, "Thank you for taking our survey!."), /*#__PURE__*/React__default["default"].createElement("p", null, " Your response is very important to us."));
+};
+
+var Survey = function Survey(_ref) {
+  var survey = _ref.survey;
+      _ref.onSubmit;
+  var blocks = survey.meta.blocks,
+      questions = survey.question_details.questions;
+
+  var _useState = React.useState({}),
+      formValues = _useState[0];
+      _useState[1];
+
+  var _useState2 = React.useState(false),
+      isSurveyCompleted = _useState2[0],
+      setIsSurveyCompleted = _useState2[1];
+
+  var _useState3 = React.useState([]),
+      blocksWithQns = _useState3[0],
+      setBlocksWithQns = _useState3[1];
+
+  var currentBlock = React.useRef(null);
+  var currentQuestion = React.useRef(null);
+  var blockElementRef = React.useRef(null); // to focus on the newly added block
+
+  var currentBlockIndex = React.useRef(0); // to keep track of the index of the dirty block
+
+  var isValuesCommitted = React.useRef(false); // in case of non-auto commit fields, to check if the user commits the values or just modifying it
+
+  var tempBlocksWithQns = React.useRef([]);
+  React.useEffect(function () {
+    if (!blocks) {
+      return;
+    }
+
+    if (!currentBlock.current && blocks.length > 0) {
+      handleBlockProgression(blocks[0]);
+      return;
+    }
+  }, [blocks]);
+  React.useEffect(function () {
+    var _blockElementRef$curr;
+
+    (_blockElementRef$curr = blockElementRef.current) == null ? void 0 : _blockElementRef$curr.scrollIntoView({
+      block: 'center',
+      behavior: 'smooth'
+    });
+    tempBlocksWithQns.current = blocksWithQns;
+  }, [blocksWithQns]);
+  React.useEffect(function () {
+    //if not the initial render
+    if (Object.keys(formValues).length > 0) {
+      // move to next block if current qn is a auto commit qn
+      // if current qn is committed
+      // and if the qn is not the final qn since for the final qn, submit should end the survey
+      if (currentQuestion.current && (AUTO_COMMIT_FIELD_TYPES.includes(currentQuestion.current.type_info.question_type) || isValuesCommitted.current) && !isCurrentBlockFinal()) {
+        moveToNextBlock();
+      }
+    }
+  }, [formValues]);
+
+  var isCurrentBlockFinal = function isCurrentBlockFinal() {
+    return currentBlockIndex.current === blocks.length - 1 || currentBlock.current.branchOption === 'end';
+  }; //if the already filled block is modified flash the state associated with all the blocks below the block being edited
+
+  var handleBlockProgression = function handleBlockProgression(block) {
+    var question = {};
+
+    if (block.is_based_on_score) {
+      var _questions$0$type_inf;
+
+      var possibleNextQuestions = (_questions$0$type_inf = questions[0].type_info.choices[formValues == null ? void 0 : formValues[questions[0].name]]) == null ? void 0 : _questions$0$type_inf.dependent_question_names;
+      var nextQuestionName = block.question_names.find(function (eachQuestion) {
+        return possibleNextQuestions == null ? void 0 : possibleNextQuestions.includes(eachQuestion);
+      });
+      question = questions.find(function (eachQuestion) {
+        return eachQuestion.name === nextQuestionName;
+      });
+    } else {
+      question = questions.find(function (eachQuestion) {
+        return eachQuestion.name === block.question_names[0];
+      });
+    }
+
+    currentBlock.current = block;
+    currentQuestion.current = question;
+    var isPresent = tempBlocksWithQns.current.find(function (eachBlock) {
+      return eachBlock.question.name === question.name;
+    });
+    if (!isPresent) setBlocksWithQns([].concat(tempBlocksWithQns.current, [_extends({}, block, {
+      question: question
+    })]));
+  };
+
+  var moveToNextBlock = function moveToNextBlock() {
+    if (isCurrentBlockFinal()) {
+      setIsSurveyCompleted(true);
+    } else {
+      if (currentBlock.current.nextBlock) {
+        currentBlockIndex.current = blocks.findIndex(function (block) {
+          return block.name === currentBlock.current.nextBlock;
+        });
+      } else {
+        currentBlockIndex.current += 1;
+      }
+
+      handleBlockProgression(blocks[currentBlockIndex.current]);
+    }
+  };
+
+  if (!currentBlock.current || !currentQuestion.current) {
+    return null;
+  }
+
+  if (isSurveyCompleted) {
+    return /*#__PURE__*/React__default["default"].createElement(SurveyEndCard, null);
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement(freemiumSurveyComponents.Survey, {
+    survey: survey,
+    onSubmit: function onSubmit(data) {
+      return console.log(data);
+    }
+  });
+};
+
+exports.Survey = Survey;

package/dist/freemium-survey-components.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./freemium-survey-components.cjs.prod.js");
+} else {
+  module.exports = require("./freemium-survey-components.cjs.dev.js");
+}