basic survey frontend

ede9a55f · Remco Tukker · f199338d · ede9a55f · ede9a55f · ede9a55f
Commit ede9a55f authored 2 years ago by Remco Tukker
--- a/survey/.babelrc
+++ b/survey/.babelrc
+{
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react",
+      "@babel/preset-typescript"
+    ],
+    "plugins": [
+      [
+        "@babel/plugin-transform-runtime",
+        {
+          "regenerator": true
+        }
+      ],
+      "@babel/plugin-proposal-class-properties"
+    ]
+}
--- a/survey/.eslintignore
+++ b/survey/.eslintignore
+**/*.css
+**/*.scss
--- a/survey/.eslintrc.json
+++ b/survey/.eslintrc.json
+{
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+      "ecmaVersion": 2018,
+      "sourceType": "module"
+    },
+    "plugins": [
+      "@typescript-eslint",
+      "react-hooks"
+    ],
+    "extends": [
+      "eslint:recommended",
+      "plugin:react/recommended",
+      "plugin:@typescript-eslint/recommended"
+    ],
+    "rules": {
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "warn",
+      "react/prop-types": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "warn", { "argsIgnorePattern": "^_" }
+      ]
+    },
+    "settings": {
+      "react": {
+        "pragma": "React",
+        "version": "detect"
+      }
+    }
+  }
\ No newline at end of file
--- a/survey/package-lock.json
+++ b/survey/package-lock.json
--- a/survey/package.json
+++ b/survey/package.json
+{
+  "devDependencies": {
+    "@babel/core": "^7.22.1",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-transform-runtime": "^7.22.4",
+    "@babel/preset-env": "^7.22.4",
+    "@babel/preset-react": "^7.22.3",
+    "@babel/preset-typescript": "^7.21.5",
+    "@babel/runtime": "^7.22.3",
+    "@types/react": "^18.2.8",
+    "@types/react-dom": "^18.2.4",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/webpack": "^5.28.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.8",
+    "@typescript-eslint/parser": "^5.59.8",
+    "babel-loader": "^9.1.2",
+    "css-loader": "^6.8.1",
+    "eslint": "^8.42.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "fork-ts-checker-webpack-plugin": "^8.0.0",
+    "image-webpack-loader": "^8.1.0",
+    "sass": "^1.62.1",
+    "sass-loader": "^13.3.1",
+    "style-loader": "^3.3.3",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.1.3",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.85.0",
+    "webpack-cli": "^5.1.2",
+    "webpack-dev-server": "^4.15.0"
+  },
+  "resolutions": {
+    "@types/webpack": "^5.28.0",
+    "@types/webpack-dev-server": "^4.7.2"
+  },
+  "scripts": {
+    "start": "webpack serve --mode development --open --port 4000",
+    "build": "webpack --mode production"
+  },
+  "dependencies": {
+    "bootstrap": "^5.3.0",
+    "react": "^18.2.0",
+    "react-bootstrap": "^2.7.4",
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.9.0",
+    "react-router-dom": "^6.11.2",
+    "survey-react-ui": "^1.9.90"
+  }
+}
--- a/survey/src/index.tsx
+++ b/survey/src/index.tsx
+
+import React, { useCallback } from 'react';
+import { createRoot } from 'react-dom/client';
+
+//import 'bootstrap/dist/css/bootstrap.min.css';
+
+import 'survey-core/defaultV2.min.css';
+import surveyJson from './survey_model.json';
+import { Model } from 'survey-core';
+import { Survey } from 'survey-react-ui';
+
+const container = document.getElementById('root') as HTMLElement;
+const root = createRoot(container); 
+
+const survey = new Model(surveyJson);
+// const surveyComplete = useCallback((sender) => {
+//   console.log(sender.data);
+// }, []);
+
+survey.onComplete.add((sender) => { console.log(sender.data) });
+
+
+root.render(
+  <React.StrictMode>
+   <Survey model={survey} />
+  </React.StrictMode>
+)
\ No newline at end of file
--- a/survey/src/survey_model.json
+++ b/survey/src/survey_model.json
--- a/survey/static/index.html
+++ b/survey/static/index.html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+</head>
+<body>
+  <div id="root"></div>
+  <script src="/bundle.js"></script>
+</body>
+</html>
\ No newline at end of file
--- a/survey/tsconfig.json
+++ b/survey/tsconfig.json
+{
+  "compilerOptions": {
+    "target": "ES6",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react",
+    "declaration": true,
+    "declarationDir": "dist/types",
+    "noImplicitAny": false,
+  },
+  "include": ["src"]
+}
--- a/survey/webpack.config.ts
+++ b/survey/webpack.config.ts
+import path from "path";
+import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
+
+import { Configuration as WebpackConfiguration } from "webpack";
+import { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server";
+
+interface Configuration extends WebpackConfiguration {
+  devServer?: WebpackDevServerConfiguration;
+}
+
+const config: Configuration = {
+  entry: "./src/index.tsx",
+  module: {
+    rules: [
+      {
+        test: /\.(ts|js)x?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: [
+              "@babel/preset-env",
+              "@babel/preset-react",
+              "@babel/preset-typescript",
+            ],
+          },
+        },
+      },
+      {
+        test: /\.scss$/,
+        exclude: /node_modules/,
+        use: [
+          { loader: "style-loader" },
+          { loader: "css-loader" },
+          { loader: "sass-loader" },
+        ],
+      },
+      {
+        test: /\.css$/,
+        use: [{ loader: "style-loader" }, { loader: "css-loader" }],
+      },
+      {
+        test: /\.(png|svg|jpe?g|gif)$/,
+        include: /images/,
+        use: [
+          {
+            loader: "file-loader",
+            options: {
+              name: "[name].[ext]",
+              outputPath: "images/"
+            },
+          },
+          {
+            loader: "image-webpack-loader",
+            options: {
+              query: {
+                mozjpeg: {
+                  progressive: true,
+                },
+                gifsicle: {
+                  interlaced: true,
+                },
+                optipng: {
+                  optimizationLevel: 7,
+                },
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+  resolve: {
+    extensions: [".tsx", ".ts", ".js", ".html"],
+  },
+  output: {
+    path: path.resolve(__dirname, "..", "survey", "static"),
+    filename: "bundle.js",
+  },
+  devServer: {
+    static: path.join(__dirname, "..", "survey", "static"),
+    compress: true,
+    port: 4000,
+    // Allow SPA urls to work with dev-server
+    historyApiFallback: true,
+    proxy: {
+      "/api": "http://127.0.0.1:5000",
+    },
+  },
+  plugins: [
+    new ForkTsCheckerWebpackPlugin({
+      async: false,
+    }),
+  ],
+};
+
+export default config;