Start working on survey-creator-js package

surveyjs · Aug 9, 2024 · 874e5f8 · 874e5f8
1 parent 8805cb0
commit 874e5f8
Show file tree

Hide file tree

Showing 64 changed files with 780 additions and 71 deletions.
diff --git a/packages/creator-presets-react/src/ActionTextEditorItem.tsx b/packages/creator-presets-react/src/ActionTextEditorItem.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { Base, Action } from "survey-core";
 import { ReactElementFactory, SurveyElementBase } from "survey-react-ui";
 import { SurveyLocStringEditor } from "survey-creator-react";
@@ -30,8 +30,8 @@ export class SurveyTextEditorAction extends SurveyElementBase<IActionBarItemProp
   }
   renderTextEditor() {
     const locTitle: any = this.item.innerItem.locTitle;
-    if(!locTitle || !locTitle.locStr || !locTitle.creator) return;
-    if(this.item.enabled) return <SurveyLocStringEditor locStr={locTitle} />;
+    if (!locTitle || !locTitle.locStr || !locTitle.creator) return;
+    if (this.item.enabled) return <SurveyLocStringEditor locStr={locTitle} />;
     return this.renderTextCore(this.item.locTitle.text);
   }
   private renderTextCore(text: string | undefined) {

diff --git a/packages/creator-presets-react/src/CreatorPresetEditor.tsx b/packages/creator-presets-react/src/CreatorPresetEditor.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { Base } from "survey-core";
 import { SurveyActionBar, SurveyElementBase, Survey, SvgBundleComponent } from "survey-react-ui";
 import { ICreatorOptions, SurveyCreatorModel } from "survey-creator-core";

diff --git a/packages/creator-presets-react/src/Header.tsx b/packages/creator-presets-react/src/Header.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { Base } from "survey-core";
 import { CreatorPresetEditorModel } from "creator-presets-core";
 import { SurveyElementBase, SurveyActionBar, Survey, SvgIcon } from "survey-react-ui";

diff --git a/packages/creator-presets-react/src/Panel.tsx b/packages/creator-presets-react/src/Panel.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { ReactElementFactory } from "survey-react-ui";
 import { PanelAdornerComponent, QuestionAdornerComponentProps } from "survey-creator-react";
 import { QuestionAdornerViewModel } from "survey-creator-core";

diff --git a/packages/creator-presets-react/src/Question.tsx b/packages/creator-presets-react/src/Question.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { ReactElementFactory } from "survey-react-ui";
 import { QuestionAdornerComponent, QuestionAdornerComponentProps } from "survey-creator-react";
 import { QuestionAdornerViewModel } from "survey-creator-core";

diff --git a/packages/creator-presets-react/src/QuestionEmbeddedCreator.tsx b/packages/creator-presets-react/src/QuestionEmbeddedCreator.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { ReactQuestionFactory, SurveyQuestionElementBase } from "survey-react-ui";
 import { QuestionEmbeddedCreatorModel } from "creator-presets-core";
 import { SurveyCreatorComponent, SurveyCreator } from "survey-creator-react";

diff --git a/packages/survey-creator-js/README.md b/packages/survey-creator-js/README.md
@@ -0,0 +1,51 @@
+# SurveyJS UI (React+pReact internally) Form Library
+
+
+<video src="https://github.com/surveyjs/survey-library/assets/22315929/b24a68bf-d703-4096-835b-752f5f610aa6"></video>
+
+
+[![Build Status](https://dev.azure.com/SurveyJS/SurveyJS%20Integration%20Tests/_apis/build/status/SurveyJS%20Library?branchName=master)](https://dev.azure.com/SurveyJS/SurveyJS%20Integration%20Tests/_build/latest?definitionId=7&branchName=master)
+[![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat)](LICENSE)
+<a href="https://github.com/DevExpress/testcafe">
+<img alt="Tested with TestCafe" src="https://img.shields.io/badge/tested%20with-TestCafe-2fa4cf.svg">
+</a>
+<a href="https://github.com/surveyjs/survey-library/issues">
+<img alt="Issues" title="Open Issues" src="https://img.shields.io/github/issues/surveyjs/survey-library.svg">
+</a>
+<a href="https://github.com/surveyjs/survey-library/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aclosed+">
+<img alt="Closed issues" title="Closed Issues" src="https://img.shields.io/github/issues-closed/surveyjs/survey-library.svg">
+</a>
+
+A free and open-source MIT-licensed JavaScript form builder library that allows you to design dynamic, data-driven, multi-language survey forms and run them in your vanilla JS applications.
+
+## Features
+
+- Dynamic forms, surveys, polls, and quizzes for your JavaScript application
+- Integration with React, Angular, Vue, jQuery, and Knockout
+- 20+ built-in question types and support for custom question types
+- Built-in themes and CSS customization
+- Answer validation
+- TypeScript support
+- Community-supported UI localization to 50+ languages
+- Integration with any backend framework (examples for PHP, NodeJS, and ASP.NET included)
+- Compatibility with any server + database combination
+- Third-party component integration
+
+## Get Started
+
+To get started with SurveyJS UI Form Library, refer to the following tutorial: [Add a Survey to a jQuery Application](https://surveyjs.io/Documentation/Library?id=get-started-jquery).
+
+## Resources
+
+- [Website](https://surveyjs.io/)
+- [Documentation](https://surveyjs.io/Documentation/Library)
+- [Live Examples](https://surveyjs.io/form-library/examples/nps-question/jquery)
+- [What's New](https://surveyjs.io/WhatsNew)
+
+## Build SurveyJS UI Form Library from Sources
+
+Refer to instructions in the root README file: [Build the SurveyJS Form Library from Sources](https://github.com/surveyjs/survey-library#build-the-surveyjs-form-library-from-sources).
+
+## Licensing
+
+SurveyJS Form Library is distributed under the [MIT license](https://github.com/surveyjs/survey-library/blob/master/LICENSE).
diff --git a/packages/survey-creator-js/entries/index.ts b/packages/survey-creator-js/entries/index.ts
@@ -0,0 +1,2 @@
+export * from "../../survey-creator-react/src/entries/index";
+export * from "../src/index";
diff --git a/packages/survey-creator-js/index.html b/packages/survey-creator-js/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="SurveyJS Creator Demo" />
+  <title>SurveyJS Creator React</title>
+  <!-- <script src="https://cdn.accesslint.com/accesslint-1.1.2.js"></script> -->
+  <!-- <script src="./node_modules/react/umd/react.development.js"></script>
+  <script src="./node_modules/react-dom/umd/react-dom.development.js"></script> -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
+
+  <script src="./node_modules/survey-core/survey.core.js"></script>
+  <script src="./node_modules/survey-js-ui/survey-js-ui.js"></script>
+  <script src="./node_modules/survey-creator-core/survey-creator-core.js"></script>
+  <script src="./node_modules/survey-core/survey.i18n.min.js"></script>
+
+  <!-- <script src="./build/survey-creator-js.js"></script> -->
+
+  <!--<script src="./build/survey-creator-react.js"></script>-->
+  <link rel="stylesheet" type="text/css" href="./node_modules/survey-core/defaultV2.css" />
+  <!-- <link rel="stylesheet" type="text/css" href="./node_modules/survey-core/modern.css" /> -->
+  <link rel="stylesheet" type="text/css" href="./node_modules/survey-creator-core/survey-creator-core.css" />
+  <!-- <link rel="stylesheet" type="text/css" href="./build/survey-creator-react.css" /> -->
+  <!--
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ace.min.js" type="text/javascript"
+    charset="utf-8"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ext-language_tools.js" type="text/javascript"
+    charset="utf-8"></script>
+  -->
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;"></div>
+</body>
+<script src="index.js" type="text/babel"></script>
+
+</html>
diff --git a/packages/survey-creator-js/index.js b/packages/survey-creator-js/index.js
@@ -0,0 +1,243 @@
+Survey.ComponentCollection.Instance.add({ name: "newrating", title: "SuperRating", elementsJSON: [{ "type": "rating", "name": "superrating", "title": "1", "isRequired": true, "rateMin": 0, "rateMax": 10, "minRateDescription": "1", "maxRateDescription": "2" }] });
+Survey.ComponentCollection.Instance.add({ name: "d2", title: "DDD", questionJSON: { "type": "dropdown", "name": "superrating", "title": "1", "isRequired": true, choices: [1, 2, 3] } });
+
+let json = {
+  completedHtml:
+    "<h3>Thank you for your feedback.</h3> <h5>Your thoughts and ideas will help us to create a great product!</h5>",
+  completedHtmlOnCondition: [
+    {
+      expression: "{nps_score} > 8",
+      html:
+        "<h3>Thank you for your feedback.</h3> <h5>We glad that you love our product. Your ideas and suggestions will help us to make our product even better!</h5>"
+    },
+    {
+      expression: "{nps_score} < 7",
+      html:
+        "<h3>Thank you for your feedback.</h3> <h5> We are glad that you share with us your ideas.We highly value all suggestions from our customers. We do our best to improve the product and reach your expectation.</h5><br/>"
+    }
+  ],
+  pages: [
+    {
+      name: "page1",
+      title: "page1 -- title",
+      description: "page1 -- description",
+      elements: [
+        {
+          type: "rating",
+          name: "nps_score",
+          title:
+            "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
+          isRequired: true,
+          rateMin: 0,
+          rateMax: 10,
+          minRateDescription: "(Most unlikely)",
+          maxRateDescription: "(Most likely)"
+        },
+        {
+          type: "checkbox",
+          name: "promoter_features",
+          visibleIf: "{nps_score} >= 9",
+          title: "What features do you value the most?",
+          isRequired: true,
+          validators: [
+            {
+              type: "answercount",
+              text: "Please select two features maximum.",
+              maxCount: 2
+            }
+          ],
+          hasOther: true,
+          choices: [
+            "Performance",
+            "Stability",
+            "User Interface",
+            "Complete Functionality"
+          ],
+          otherText: "Other feature:",
+          colCount: 2
+        },
+        {
+          type: "comment",
+          name: "passive_experience",
+          visibleIf: "{nps_score} > 6  and {nps_score} < 9",
+          title: "What is the primary reason for your score?"
+        },
+        {
+          type: "comment",
+          name: "disappointed_experience",
+          visibleIf: "{nps_score} notempty",
+          title:
+            "What do you miss and what was disappointing in your experience with us?"
+        }
+      ]
+    },
+    {
+      name: "page2",
+      elements: [
+        {
+          type: "checkbox",
+          name: "question4",
+          choices: ["item1", "item2", "item3"]
+        }
+      ]
+    },
+    {
+      name: "page3",
+      elements: [
+        {
+          type: "dropdown",
+          name: "question5",
+          choices: ["item1", "item2", "item3"]
+        }
+      ]
+    },
+    {
+      name: "page4",
+      elements: [
+        {
+          type: "rating",
+          name: "question6"
+        }
+      ]
+    }
+  ]
+};
+
+const options = {
+  showLogicTab: true,
+  showTranslationTab: true,
+  showEmbeddedSurveyTab: true,
+  isAutoSave: true
+};
+
+// class CustomToolboxWrapper extends React.Component {
+//   constructor(props) {
+//     super(props);
+//     this.state = { collapsed: false };
+//   }
+//   toggle() {
+//     this.setState({ collapsed: !this.state.collapsed });
+//   }
+//   render() {
+//     return (
+//       <div style={{ position: "relative", height: "100%" }}>
+//         <div
+//           style={{
+//             position: "absolute",
+//             left: "100%",
+//             top: 0,
+//             padding: "16px",
+//             cursor: "pointer"
+//           }}
+//           title={this.state.collapsed ? "Show toolbox" : "Hide toolbox"}
+//           onClick={() => this.toggle()}
+//         >
+//           {this.state.collapsed ? ">>" : "<<"}
+//         </div>
+//         {this.state.collapsed ? null : (
+//           <SurveyCreator.SurveyCreatorToolbox
+//             creator={this.props.creator}
+//           ></SurveyCreator.SurveyCreatorToolbox>
+//         )}
+//       </div>
+//     );
+//   }
+// }
+
+// SurveyReact.ReactElementFactory.Instance.registerElement(
+//   "svc-toolbox",
+//   (props) => {
+//     return React.createElement(CustomToolboxWrapper, props);
+//   }
+// );
+
+// class CustomPropertyGridWrapper extends React.Component {
+//   constructor(props) {
+//       super(props);
+//       this.btnClick = this
+//           .btnClick
+//           .bind(this);
+//   }
+//   btnClick() {
+//       alert("The Button is clicked");
+//   }
+//   render() {
+//       const model = this.props.model;
+//       if (!model) 
+//           return null;
+//       const btnStyle = {
+//           width: "100%",
+//           height: "32px"
+//       };
+//       return <div>
+//           <button onClick={this.btnClick} style={btnStyle}>Click me...</button>
+//           <SurveyCreator.PropertyGridComponent model={model}></SurveyCreator.PropertyGridComponent>
+//       </div>;
+//   }
+// }
+
+// SurveyReact
+//   .ReactElementFactory
+//   .Instance
+//   .registerElement("svc-property-grid", (props) => {
+//       return React.createElement(CustomPropertyGridWrapper, props);
+//   });
+/*
+class CreatorSurveyPageComponent2 extends SurveyCreator.CreatorSurveyPageComponent {
+  renderFooter() {
+    return (<div>Some Text {super.renderFooter()}</div>);
+  }
+}
+
+SurveyReact.ReactElementFactory.Instance.registerElement("svc-page", (props) => {
+  return React.createElement(CreatorSurveyPageComponent2, props);
+});
+*/
+const creator = new SurveyCreatorUI.SurveyCreator(options);
+creator.onModified.add((sender, options) => {
+  console.log(JSON.stringify(options, null, 3));
+});
+creator.onMachineTranslate.add((_, options) => {
+  const translatedStrings = [];
+  options.strings.forEach(str => { translatedStrings.push(options.toLocale + ": " + str); });
+  options.callback(translatedStrings);
+});
+creator.JSON = json;
+creator.locale = "de";
+window.creator = creator;
+
+creator.toolbox.searchEnabled = true;
+
+creator.onElementAllowOperations.add((sender, options) => {
+  if (options.obj.isPage) {
+    options.allowDelete = sender.survey.pageCount > 1;
+  }
+});
+
+creator.saveSurveyFunc = (no, callback) => {
+  console.log(no);
+  setTimeout(function () {
+    callback(no, true);
+  }, 1000);
+};
+
+// ReactDOM.render(
+//   <React.StrictMode>
+//     <SurveyCreator.SurveyCreatorComponent creator={creator} />
+//   </React.StrictMode>,
+//   document.getElementById("root")
+// );
+SurveyCreatorUI.renderSurveyCreator(creator, document.getElementById("root"));
+
+// creator.toolbarItems.push(
+//   new Survey.Action({
+//     id: "toolboxCustomization",
+//     visible: true,
+//     title: "Toolbox Customization",
+//     enabled: true,
+//     action: function () {
+//       alert("Hi!");
+//     }
+//   })
+// );
+// creator.toolbox.isCompact = true;