Merge branch 'release-2.16.12' into release

Author: raclim

.babelrc

@@ -1,7 +1,8 @@
 {
   "presets": [
     "@babel/preset-react",
-    "@babel/preset-env"
+    "@babel/preset-env",
+    "@babel/preset-typescript"
   ],
   "env": {
     "production": {

.eslintrc

@@ -85,7 +85,12 @@
   },
   "overrides": [
     {
-      "files": ["*.stories.jsx"],
+      "files": ["*.ts", "*.tsx"],
+      "parser": "@typescript-eslint/parser",
+      "plugins": ["@typescript-eslint"]
+    },
+    {
+      "files": ["*.stories.@(js|jsx|ts|tsx)"],
       "rules": {
         "import/no-extraneous-dependencies": "off"
       }

.gitignore

@@ -21,4 +21,6 @@ terraform/.terraform/
 storybook-static
 duplicates.json
 
-coverage
+coverage
+
+*.tsbuildinfo

.storybook/main.js

@@ -1,6 +1,6 @@
 /** @type { import('@storybook/react-webpack5').StorybookConfig } */
 const config = {
-  stories: ['../client/**/*.stories.(jsx|mdx)'],
+  stories: ['../client/**/*.stories.(jsx|mdx|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
@@ -18,19 +18,19 @@ const config = {
     // https://storybook.js.org/docs/react/builders/webpack
     // this modifies the existing image rule to exclude .svg files
     // since we want to handle those files with @svgr/webpack
-    const imageRule = config.module.rules.find(rule => rule.test.test('.svg'))
-    imageRule.exclude = /\.svg$/
+    const imageRule = config.module.rules.find((rule) =>
+      rule.test.test('.svg')
+    );
+    imageRule.exclude = /\.svg$/;
 
     // configure .svg files to be loaded with @svgr/webpack
     config.module.rules.push({
       test: /\.svg$/,
       use: ['@svgr/webpack']
-    })
+    });
 
-    return config
-  },
+    return config;
+  }
 };
 
 export default config;
-
-

client/modules/IDE/pages/IDEView.jsx

@@ -106,7 +106,7 @@ const IDEView = () => {
   const [sidebarSize, setSidebarSize] = useState(160);
   const [isOverlayVisible, setIsOverlayVisible] = useState(false);
   const [MaxSize, setMaxSize] = useState(window.innerWidth);
-  const [displayBanner, setDisplayBanner] = useState(true);
+  const [displayBanner, setDisplayBanner] = useState(false);
 
   const cmRef = useRef({});
 

client/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "target": "ES6",
+    "module": "ESNext",
+    "lib": ["DOM", "ESNext"],
+    "jsx": "react",
+  },
+}

contributor_docs/testing.md

@@ -107,7 +107,7 @@ You can save a snapshot of what the HTML looks like when the component is render
 - Many of the existing components don't have tests yet, and you could write one :-) You can find a few suggested files to start with [in this section](#Files-to-start-with).
 - They are a good place to start if you're learning the codebase.
 - It benefits all future contributors by allowing them to check their changes for errors.
-- It increases usage: most code with only ever have a single invocation point, but this means that code might not be particularly robust and lead to bugs if a different developer reuses it in a different context. Writing tests increases the usage of the code in question and may improve the long-term durability, along with leading developers to refactor their code to be more usable. [[3]](#References)
+- It increases usage: most code will only ever have a single invocation point, but this means that code might not be particularly robust and lead to bugs if a different developer reuses it in a different context. Writing tests increases the usage of the code in question and may improve the long-term durability, along with leading developers to refactor their code to be more usable. [[3]](#References)
 - Testing lets you check your own work and feel more comfortable submitting PRs.
 - It catches easy-to-miss errors.
 - It is good practice for large projects.