react-survey-builder 1.0.1

package/lib/utils/custom-date-picker.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactDatepicker = _interopRequireDefault(require("react-datepicker"));
+var _lodash = require("lodash");
+function DatePickerComponent(props) {
+  var showTimeInput = props.showTimeInput,
+    dateFormat = props.dateFormat,
+    selected = props.selected,
+    _onChange = props.onChange,
+    isClearable = props.isClearable,
+    portalId = props.portalId;
+  var ButtonDatePicker = function ButtonDatePicker(_ref) {
+    var value = _ref.value,
+      onClick = _ref.onClick;
+    return /*#__PURE__*/_react["default"].createElement("button", {
+      type: "button",
+      className: "form-control",
+      style: {
+        minWidth: 140,
+        textAlign: 'left'
+      },
+      onClick: onClick
+    }, value || 'mm/dd/yyyy');
+  };
+  var years = (0, _lodash.range)(2010, new Date().getFullYear() + 10, 1);
+  var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+  return /*#__PURE__*/_react["default"].createElement(_reactDatepicker["default"], {
+    name: props.name,
+    ref: props.ref,
+    selected: selected,
+    onChange: function onChange(date) {
+      return _onChange(date);
+    },
+    todayButton: 'Today',
+    className: "form-control",
+    showTimeSelect: props.showTimeSelect,
+    showTimeSelectOnly: props.showTimeSelectOnly,
+    showTimeInput: showTimeInput,
+    autoComplete: "off",
+    placeholderText: props.placeholderText,
+    portalId: portalId,
+    dateFormat: dateFormat,
+    isClearable: isClearable,
+    customInput: /*#__PURE__*/_react["default"].createElement(ButtonDatePicker, null),
+    renderCustomHeader: function renderCustomHeader(_ref2) {
+      var date = _ref2.date,
+        changeYear = _ref2.changeYear,
+        changeMonth = _ref2.changeMonth,
+        decreaseMonth = _ref2.decreaseMonth,
+        increaseMonth = _ref2.increaseMonth,
+        prevMonthButtonDisabled = _ref2.prevMonthButtonDisabled,
+        nextMonthButtonDisabled = _ref2.nextMonthButtonDisabled;
+      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("button", {
+        onClick: decreaseMonth,
+        disabled: prevMonthButtonDisabled,
+        type: "button"
+      }, '<'), /*#__PURE__*/_react["default"].createElement("select", {
+        value: date.getFullYear(),
+        onChange: function onChange(_ref3) {
+          var value = _ref3.target.value;
+          return changeYear(value);
+        }
+      }, years.map(function (option) {
+        return /*#__PURE__*/_react["default"].createElement("option", {
+          key: option,
+          value: option
+        }, option);
+      })), /*#__PURE__*/_react["default"].createElement("select", {
+        value: months[date.getMonth()],
+        onChange: function onChange(_ref4) {
+          var value = _ref4.target.value;
+          return changeMonth(months.indexOf(value));
+        }
+      }, months.map(function (option) {
+        return /*#__PURE__*/_react["default"].createElement("option", {
+          key: option,
+          value: option
+        }, option);
+      })), /*#__PURE__*/_react["default"].createElement("button", {
+        onClick: increaseMonth,
+        disabled: nextMonthButtonDisabled,
+        type: "button"
+      }, '>'));
+    }
+  });
+}
+var _default = exports["default"] = DatePickerComponent;

package/package.json

@@ -0,0 +1,114 @@
+{
+  "name": "react-survey-builder",
+  "version": "1.0.1",
+  "description": "A complete survey builder for react.",
+  "main": "lib/index.js",
+  "types": "types/index.d.ts",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/garrettlang/react-survey-builder.git"
+  },
+  "files": [
+    "lib",
+    "dist",
+    "types"
+  ],
+  "keywords": [
+    "react",
+    "react-component",
+    "form",
+    "builder",
+    "ui",
+    "drag",
+    "drop"
+  ],
+  "engines": {
+    "node": ">=18.7.0"
+  },
+  "author": "Garrett Lang",
+  "dependencies": {
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "beedle": "^0.8.1",
+    "classnames": "^2.2.6",
+    "date-fns": "^2.16.1",
+    "draft-js": "^0.11.7",
+    "draftjs-to-html": "^0.9.1",
+    "es6-promise": "^4.2.8",
+    "fbemitter": "^3.0.0",
+    "file-saver": "^2.0.5",
+    "immutability-helper": "^3.1.1",
+    "isomorphic-fetch": "^3.0.0",
+    "lodash": "^4.17.21",
+    "prop-types": "^15.7.2",
+    "react-bootstrap": "^2.9.2",
+    "react-bootstrap-range-slider": "^3.0.8",
+    "react-dnd": "^11.1.3",
+    "react-dnd-html5-backend": "^11.1.3",
+    "react-draft-wysiwyg": "^1.15.0",
+    "react-icons": "^5.0.1",
+    "react-intl": "^5.24.3",
+    "react-select": "^5.8.0",
+    "react-signature-canvas": "^1.0.3",
+    "react-textarea-autosize": "^8.5.3",
+    "xss": "^1.0.8"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.12.10",
+    "@babel/core": "^7.12.10",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-proposal-json-strings": "^7.12.1",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-syntax-import-meta": "^7.10.4",
+    "@babel/plugin-transform-runtime": "^7.17.10",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/runtime-corejs2": "^7.12.5",
+    "add": "^2.0.6",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.2.2",
+    "copyfiles": "^2.4.1",
+    "css-loader": "^6.9.0",
+    "ejs": "^3.1.9",
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.22.0",
+    "express": "^4.17.1",
+    "multer": "^1.4.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^3.0.2",
+    "sass": "^1.69.7",
+    "sass-loader": "^14.0.0",
+    "style-loader": "^3.3.4",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
+  },
+  "scripts": {
+    "build": "webpack --mode production --config webpack.production.config.js",
+    "build:dev": "webpack --mode development",
+    "build:umd": "webpack --mode development --config webpack.production.config.js",
+    "build:style": "sass ./scss/application.scss dist/app.css --style compressed",
+    "build:lib": "npm run transpile && npm run build:style",
+    "build:dist": "npm run build && npm run copy:dist",
+    "clean": "rimraf dist",
+    "copy:dist": "copyfiles -f \"./dist/*\" \"./public/dist\"",
+    "prepublishOnly": "npm run clean && npm run build:lib && npm run build",
+    "watch": "webpack --watch",
+    "start": "webpack-dev-server --hot --mode development",
+    "serve:api": "node server/index.js",
+    "pretranspile": "rimraf lib",
+    "transpile": "babel --out-dir lib src --copy-files"
+  },
+  "bugs": {
+    "url": "https://github.com/garrettlang/react-survey-builder/issues"
+  },
+  "homepage": "https://github.com/garrettlang/react-survey-builder#readme"
+}

package/types/index.d.ts

@@ -0,0 +1,180 @@
+/* eslint-disable max-classes-per-file */
+import * as React from 'react';
+
+type BaseElement = {
+  id: string;
+  element:
+    | "Header Text"
+    | "Label"
+    | "Paragraph"
+    | "Line Break"
+    | "Dropdown"
+    | "Tags"
+    | "Checkboxes"
+    | "Multiple Choice"
+    | "Text Input"
+    | "Number Input"
+    | "Multi-line Input"
+    | "Two Column Row"
+    | "Three Column Row"
+    | "Multi Column Row"
+    | "Image"
+    | "Rating"
+    | "Date"
+    | "Signature"
+    | "Web site"
+    | "Fieldset"
+    | "File Attachment"
+    | "Range"
+    | "Camera";
+  showDescription?: boolean;
+  required: boolean;
+  canHaveAlternateForm: boolean;
+  canHaveDisplayHorizontal: boolean;
+  canHaveOptionCorrect: boolean;
+  canHaveOptionValue: boolean;
+  canHavePageBreakBefore: boolean;
+  canPopulateFromApi: boolean;
+  text: string;
+};
+export type StaticElement = {
+  bold: boolean;
+  content: string;
+  inline?: boolean;
+  italic: boolean;
+  static: true;
+};
+export type SurveyBuilderInput = {
+  canHaveAnswer?: true;
+  field_name: string;
+  label: string;
+};
+export type Option = {
+  key: string;
+  label?: string;
+  text: string;
+  value: string;
+};
+export type SelectableElement = {
+  options: Option[];
+} & SurveyBuilderInput;
+export type ImageElement = {
+  field_name: string;
+  src: string;
+};
+export type DateElement = {
+  dateFormat: string;
+  defaultToday: boolean;
+  readOnly: boolean;
+  showTimeSelect: boolean;
+  showTimeSelectOnly: boolean;
+  showTimeInput: boolean;
+  timeFormat: string;
+} & SurveyBuilderInput;
+export type RangeElement = {
+  max_label: string;
+  max_value: number;
+  min_label: string;
+  min_value: number;
+} & SurveyBuilderInput;
+export type FileElement = {
+  _href: string;
+  file_path: string;
+  field_name: string;
+} & StaticElement;
+export type WebsiteElement = {
+  href: string;
+} & StaticElement;
+export type SignatureElement = {
+  readOnly: boolean;
+} & SurveyBuilderInput;
+export type TaskData = BaseElement &
+  (| StaticElement
+    | SurveyBuilderInput
+    | SelectableElement
+    | ImageElement
+    | DateElement
+    | RangeElement
+    | WebsiteElement
+    | FileElement
+    | SignatureElement
+    // eslint-disable-next-line no-use-before-define
+    | SurveyBuilderLayout
+  );
+export type SurveyBuilderLayout = {
+  isContainer: true;
+  childItems: TaskData[];
+  field_name: string;
+};
+export type SurveyBuilderPostData = {
+  task_data: TaskData[];
+};
+
+export type ToolbarItem = {
+  key: string;
+  name: string;
+  static: boolean;
+  icon: string;
+  content: string;
+};
+
+export interface SurveyBuilderProps {
+  toolbarItems?: ToolbarItem[];
+  files?: any[];
+  url?: string;
+  showCorrectColumn?: boolean;
+  show_description?: boolean;
+  onLoad?: () => Promise<SurveyBuilderPostData>;
+  onPost?: (data: SurveyBuilderPostData) => void;
+  saveUrl?: string;
+  saveAlways?: boolean;
+  editMode?: boolean;
+  renderEditForm?: (props: BaseElement) => React.ReactNode;
+}
+
+export class ReactSurveyBuilder extends React.Component<SurveyBuilderProps> {}
+
+export interface SurveyGeneratorOnSubmitParams {
+  id: number;
+  name: string;
+  custom_name: string;
+  value: string | string[];
+}
+
+export interface SurveyGeneratorProps {
+  form_action: string;
+  form_method: string;
+  action_name?: string;
+  onBlur?: (info: SurveyGeneratorOnSubmitParams[]) => void;
+  onSubmit?: (info: SurveyGeneratorOnSubmitParams[]) => void;
+  onChange?: (info: SurveyGeneratorOnSubmitParams[]) => void;
+  data: any[];
+  back_action?: string;
+  back_name?: string;
+  task_id?: number;
+  answer_data?: any[];
+  authenticity_token?: string;
+  hide_actions?: boolean;
+  skip_validations?: boolean;
+  display_short?: boolean;
+  read_only?: boolean;
+  // eslint-disable-next-line no-undef
+  variables?: Record<any, any>;
+  submitButton?: JSX.Element;
+}
+
+export class ReactSurveyGenerator extends React.Component<SurveyGeneratorProps> {}
+
+export type ActionType = "load" | "updateOrder" | "delete";
+
+export class ElementStore {
+  static dispatch: (type: ActionType, data: any) => void;
+}
+
+export class Registry {
+  static register: (name: string, component: React.ReactNode) => void;
+
+  static list: () => string[];
+
+  static get: (name: string) => React.ReactNode;
+}