Merge branch '25-facilitate-inclusion-in-website' into 'main'

Resolve "Facilitate inclusion in website"

Closes #25

See merge request !13

.gitignore

-.snowpack
-build
-node_modules/
-.pnpm-store
-coverage/
-.vscode/
+/dist
+/node_modules
+/.pnpm-store
+/coverage
+
+/.vscode

.gitlab-ci.yml

@@ -36,7 +36,7 @@ build:
     - npm run build
   artifacts:
     paths:
-      - build
+      - dist
 
 # Deploy main branch to contact.greenhost.net
 deploy-staging:
@@ -54,7 +54,7 @@ deploy-staging:
     DOMAIN_NAME: 'greenhost.net'
     SUBDOMAIN: 'contact'
     SUBFOLDER: '/staging'
-    BUILD_FOLDER: './build'
+    BUILD_FOLDER: './dist'
   before_script:
     - apt-get update
     - apt-get install -y rsync openssh-client

README.md

@@ -39,7 +39,7 @@ You will also see any lint errors in the console.
 
 ### npm run build
 
-Builds a static copy of your site to the `build/` folder.
+Builds a static copy of your site to the `dist/` folder.
 Your app is ready to be deployed!
 
 ### npm test

babel.config.js

+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-react',
+    '@babel/preset-typescript',
+  ],
+};

jest.config.js

-module.exports = {
-  ...require('@snowpack/app-scripts-react/jest.config.js')(),
-  moduleNameMapper: {
-    '\\.[as]?css$': 'identity-obj-proxy',
-  },
+module.exports = function () {
+  return {
+    moduleNameMapper: {
+      ".+\\.(css|sass|scss)$": `identity-obj-proxy`,
+    },
+    rootDir: '.',
+    setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+    testMatch: [
+      '<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
+      '<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}',
+    ],
+    transform: {
+      '^.+\\.(js|jsx|ts|tsx)$': "babel-jest",
+    },
+    transformIgnorePatterns: ['node_modules'],
+  };
 };
-

package.json

@@ -4,8 +4,8 @@
   "description": "Webform for helping users check the status of their web services and get help if required.",
   "main": "index.js",
   "scripts": {
-    "start": "snowpack dev",
-    "build": "snowpack build",
+    "start": "webpack serve --open --host 0.0.0.0 --mode=development",
+    "build": "webpack --mode=production",
     "test": "jest --coverage --watchAll",
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,yaml}\"",
     "lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx,yaml}\""
@@ -14,8 +14,11 @@
     "type": "git",
     "url": "https://open.greenhost.net/greenhost/outage-form"
   },
-  "author": "Mark Swillus, Tin Geber, Chris Snijder",
+  "author": "Tin Geber, Arie Peterson, Chris Snijder, Mark Swillus",
   "license": "Apache-2.0",
+  "browserslist": [
+    "defaults"
+  ],
   "dependencies": {
     "i18next": "^19.8.7",
     "js-yaml": "^4.0.0",
@@ -25,12 +28,7 @@
   },
   "devDependencies": {
     "@babel/preset-react": "^7.12.13",
-    "@snowpack/app-scripts-react": "^2.0.0",
-    "@snowpack/plugin-build-script": "^2.1.0",
-    "@snowpack/plugin-dotenv": "^2.0.5",
-    "@snowpack/plugin-react-refresh": "^2.4.0",
-    "@snowpack/plugin-sass": "^1.3.0",
-    "@snowpack/plugin-typescript": "^1.2.0",
+    "@babel/preset-typescript": "^7.13.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.0.0",
     "@testing-library/react-hooks": "^5.0.3",
@@ -39,23 +37,33 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-transition-group": "^4.4.0",
-    "@types/snowpack-env": "^2.3.2",
     "@typescript-eslint/eslint-plugin": "^4.15.0",
     "@typescript-eslint/parser": "^4.15.0",
+    "babel-jest": "^26.6.3",
     "babel-preset-react-app": "^10.0.0",
+    "copy-webpack-plugin": "^8.1.1",
+    "core-js": "^3.11.3",
+    "css-loader": "^5.2.4",
     "eslint": "^7.20.0",
     "eslint-plugin-jest-dom": "^3.6.5",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-testing-library": "^3.10.1",
     "identity-obj-proxy": "^3.0.0",
     "jest-cli": "^26.6.3",
+    "js-yaml-loader": "^1.2.2",
     "markdown-to-jsx": "^7.1.1",
+    "mini-css-extract-plugin": "^1.6.0",
     "prettier": "^2.0.5",
+    "react-test-renderer": "^17.0.2",
     "react-transition-group": "^4.4.1",
     "rxjs": "^6.6.3",
-    "sass": "^1.32.6",
-    "snowpack": "^3.0.11",
+    "sass": "^1.32.13",
+    "sass-loader": "^11.1.1",
+    "ts-loader": "^8.3.0",
     "ts-node": "^9.1.1",
-    "typescript": "^4.0.0"
+    "typescript": "^4.2.4",
+    "webpack": "^5.37.1",
+    "webpack-cli": "^4.7.0",
+    "webpack-dev-server": "^3.11.2"
   }
 }

snowpack.config.js

-/** @type {import("snowpack").SnowpackUserConfig } */
-module.exports = {
-  mount: {
-    public: { url: '/', static: true },
-    src: { url: '/dist' },
-  },
-  plugins: [
-    '@snowpack/plugin-react-refresh',
-    '@snowpack/plugin-dotenv',
-    '@snowpack/plugin-typescript',
-    "@snowpack/plugin-sass",
-    ["@snowpack/plugin-build-script", { "cmd": "js-yaml", "input": [".yaml", ".yml"], "output": [".json"]}]
-  ],
-  routes: [
-    /* Enable an SPA Fallback in development: */
-    // {"match": "routes", "src": ".*", "dest": "/index.html"},
-  ],
-  optimize: {
-    bundle: true,
-    minify: true,
-    target: 'es2017'
-  },
-  packageOptions: {
-    /* ... */
-  },
-  devOptions: {
-    /* ... */
-  },
-  buildOptions: {
-    /* ... */
-  },
-};

src/components/contact-form/ContactForm.tsx

@@ -48,8 +48,12 @@ export const ContactForm: React.FC<ContactFormProps> = ({
     setModalContent(JSON.stringify(formData));
   };
 
+  // For use in the CSSTransition, see
+  // https://github.com/reactjs/react-transition-group/issues/668#issuecomment-695162879
+  const submitRef = React.useRef<any>(null);
+
   return (
-    <form onSubmit={submit} className={`${styles.ContactForm}`} aria-label={t("Contact form")}>
+    <form onSubmit={submit} name="HelpfulContactForm" className={`${styles.ContactForm} cosmosForm`} aria-label={t("Contact form")}>
       <Fieldset legend={t('contact.details')}>
         <Input
           label={t('contact.name')}
@@ -106,27 +110,29 @@ export const ContactForm: React.FC<ContactFormProps> = ({
             key={urgentIntent ? 'urgent' : 'normal'}
             in={urgentIntent}
             classNames={{ ...panelTransition }}
+            nodeRef={submitRef}
             unmountOnExit={true}
             mountOnEnter={true}
-            addEndListener={(node: HTMLElement, done: EventListener) => {
+            addEndListener={(done: () => void) => {
               // use the css transitionend event to mark the finish of a transition
-              // istanbul ignore next
-              node.addEventListener('transitionend', done, false);
+              submitRef.current?.addEventListener('transitionend', done, false);
             }}
           >
-            {urgentIntent ? (
-              <UrgentRequest sendUrgent={() => sendRequest(true)} />
-            ) : (
-              <button
-                className="good"
-                onClick={(event) => {
-                  event.preventDefault();
-                  sendRequest();
-                }}
-              >
-                {t('submit')}
-              </button>
-            )}
+            <div ref={submitRef}>
+              {urgentIntent ? (
+                <UrgentRequest sendUrgent={() => sendRequest(true)} />
+              ) : (
+                <button
+                  className="good"
+                  onClick={(event) => {
+                    event.preventDefault();
+                    sendRequest();
+                  }}
+                >
+                  {t('submit')}
+                </button>
+              )}
+            </div>
           </CSSTransition>
         </SwitchTransition>
       </div>

src/components/locale-switcher/LocaleSwitcher.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 export const LocaleSwitcher: React.FC = () => {
-  if (import.meta.env.MODE === 'production') {
+  if (process.env.NODE_ENV === 'production') {
     return null;
   }
   const { t, i18n } = useTranslation();

src/index.tsx

@@ -39,9 +39,3 @@ ReactDOM.render(
   </React.StrictMode>,
   root,
 );
-
-// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.
-// Learn more: https://snowpack.dev/concepts/hot-module-replacement
-if (import.meta.hot) {
-  import.meta.hot.accept();
-}

tsconfig.json

@@ -4,17 +4,8 @@
     "module": "esnext",
     "target": "esnext",
     "moduleResolution": "node",
-    "jsx": "preserve",
+    "jsx": "react",
     "baseUrl": "./",
-    /* paths - import rewriting/resolving */
-    "paths": {
-      // If you configured any Snowpack aliases, add them here.
-      // Add this line to get types for streaming imports (packageOptions.source="remote"):
-      //     "*": [".snowpack/types/*"]
-      // More info: https://www.snowpack.dev/guides/streaming-imports
-    },
-    /* noEmit - Snowpack builds (emits) files, not tsc. */
-    "noEmit": true,
     /* Additional Options */
     "strict": true,
     "skipLibCheck": true,

webpack.config.js

+const CopyPlugin = require("copy-webpack-plugin");
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const path = require('path');
+
+module.exports = {
+  entry: './src/index.tsx',
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+      chunkFilename: '[id].css',
+      ignoreOrder: false, // Enable to remove warnings about conflicting order
+    }),
+    new CopyPlugin({
+      patterns: [
+        { from: "public/style-copied-from-website.css" },
+      ],
+      options: {
+        concurrency: 100,
+      },
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.(sa|sc|c)ss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          'sass-loader',
+        ],
+      },
+      {
+        test: /\.ya?ml$/,
+        use: 'js-yaml-loader',
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+};