feat: Replace craco with vite

editor.planx.uk/.env

@@ -2,12 +2,12 @@
 # This file does not (and should not) contain secrets - all values here are publicly exposed
 # If you're working off a fork of Planx, please replace the AIRBRAKE and FEEDBACK_FISH values with a mock value like "SECRET"
 
-REACT_APP_AIRBRAKE_PROJECT_ID=329753
-REACT_APP_AIRBRAKE_PROJECT_KEY=388fe6f4cc0d6644c923500d5672a5b6
+VITE_APP_AIRBRAKE_PROJECT_ID=329753
+VITE_APP_AIRBRAKE_PROJECT_KEY=388fe6f4cc0d6644c923500d5672a5b6
 
-REACT_APP_API_URL=http://localhost:7002
-REACT_APP_HASURA_URL=http://localhost:7100/v1/graphql
-REACT_APP_HASURA_WEBSOCKET=ws://localhost:7100/v1/graphql
-REACT_APP_SHAREDB_URL=ws://localhost:7003
+VITE_APP_API_URL=http://localhost:7002
+VITE_APP_HASURA_URL=http://localhost:7100/v1/graphql
+VITE_APP_HASURA_WEBSOCKET=ws://localhost:7100/v1/graphql
+VITE_APP_SHAREDB_URL=ws://localhost:7003
 
-REACT_APP_ENV=development
+VITE_APP_ENV=development

editor.planx.uk/.env.test

@@ -1 +1 @@
-REACT_APP_ENV=test
+VITE_APP_ENV=test

editor.planx.uk/.eslintrc

@@ -42,22 +42,16 @@
           },
           {
             "name": "@testing-library/react",
-            "importNames": [
-              "render"
-            ],
+            "importNames": ["render"],
             "message": "Please import setup() from testUtils to render test component"
           },
           {
             "name": "@mui/styles",
-            "importNames": [
-              "styled"
-            ],
+            "importNames": ["styled"],
             "message": "Please import styled from '@mui/material/styles'. Reason: https://mui.com/system/styled/#what-problems-does-it-solve"
           }
         ],
-        "patterns": [
-          "@mui/*/*/*"
-        ]
+        "patterns": ["@mui/*/*/*"]
       }
     ],
     "@typescript-eslint/no-unused-vars": [
@@ -86,9 +80,7 @@
       "files": [
         "**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)"
       ],
-      "extends": [
-        "plugin:testing-library/react"
-      ]
+      "extends": ["plugin:testing-library/react"]
     }
   ]
-}
+}

editor.planx.uk/.storybook/__mocks__/react-navi.js

@@ -1,20 +1,21 @@
-
 // require syntax is used to enable overwriting objects from the original module
-const reactNavi = require('react-navi');
+const reactNavi = require("react-navi");
 
 const originalUseCurrentRoute = reactNavi.useCurrentRoute;
 const originalUseNavigation = reactNavi.useNavigation;
 
 function reactNaviDecorator(story, { parameters }) {
   delete reactNavi["useCurrentRoute"];
-  reactNavi.useCurrentRoute = parameters?.reactNavi?.useCurrentRoute ?? originalUseCurrentRoute;
+  reactNavi.useCurrentRoute =
+    parameters?.reactNavi?.useCurrentRoute ?? originalUseCurrentRoute;
 
   delete reactNavi["useNavigation"];
-  reactNavi.useNavigation = parameters?.reactNavi?.useNavigation ?? originalUseNavigation;
+  reactNavi.useNavigation =
+    parameters?.reactNavi?.useNavigation ?? originalUseNavigation;
 
-  return story();  
+  return story();
 }
 
-reactNavi['reactNaviDecorator'] = reactNaviDecorator;
+reactNavi["reactNaviDecorator"] = reactNaviDecorator;
 
-module.exports = reactNavi;
+module.exports = reactNavi;

editor.planx.uk/.storybook/main.js

@@ -1,35 +1,45 @@
 const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
 module.exports = {
   stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/preset-create-react-app", "@storybook/addon-a11y"],
-  webpackFinal: async config => {
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/preset-create-react-app",
+    "@storybook/addon-a11y",
+  ],
+  webpackFinal: async (config) => {
     config.resolve.plugins ||= [];
     config.resolve.plugins.push(new TsconfigPathsPlugin());
-    config.resolve.alias["react-navi"] = require.resolve("./__mocks__/react-navi.js");
+    config.resolve.alias["react-navi"] = require.resolve(
+      "./__mocks__/react-navi.js",
+    );
     return config;
   },
-  babel: async options => ({
+  babel: async (options) => ({
     ...options,
-    plugins: [...options.plugins, "@babel/plugin-proposal-logical-assignment-operators"],
+    plugins: [
+      ...options.plugins,
+      "@babel/plugin-proposal-logical-assignment-operators",
+    ],
     presets: [
       [
         "@babel/preset-env",
         {
-          "targets": {
-            "chrome": 100
-          }
-        }
+          targets: {
+            chrome: 100,
+          },
+        },
       ],
       "@babel/preset-typescript",
-      "@babel/preset-react"
-    ]
+      "@babel/preset-react",
+    ],
   }),
   staticDirs: ["../public"],
   framework: {
     name: "@storybook/react-webpack5",
-    options: {}
+    options: {},
   },
   docs: {
-    autodocs: true
-  }
-};
+    autodocs: true,
+  },
+};

editor.planx.uk/.storybook/manager.js

@@ -1,6 +1,6 @@
-import { addons } from '@storybook/addons'
-import theme from './theme'
+import { addons } from "@storybook/addons";
+import theme from "./theme";
 
 addons.setConfig({
   theme,
-})
+});

editor.planx.uk/.storybook/preview.js

@@ -17,5 +17,5 @@ export const decorators = [
       </ThemeProvider>
     </StyledEngineProvider>
   ),
-  reactNaviDecorator
+  reactNaviDecorator,
 ];

editor.planx.uk/.storybook/theme.js

@@ -1,35 +1,35 @@
-import { create } from '@storybook/theming/create'
+import { create } from "@storybook/theming/create";
 
 export default create({
-  base: 'light',
+  base: "light",
 
-  colorPrimary: '#0ECE83',
-  colorSecondary: 'rgba(0,0,0,0.4)',
+  colorPrimary: "#0ECE83",
+  colorSecondary: "rgba(0,0,0,0.4)",
 
   // UI
-  appBg: 'white',
-  appContentBg: '#efefef',
-  appBorderColor: 'black',
+  appBg: "white",
+  appContentBg: "#efefef",
+  appBorderColor: "black",
   appBorderRadius: 0,
 
   // Typography
   fontBase: "'Inter', Arial",
 
   // Text colors
-  textColor: 'black',
-  textInverseColor: 'rgba(255,255,255,0.9)',
+  textColor: "black",
+  textInverseColor: "rgba(255,255,255,0.9)",
 
   // Toolbar default and active colors
-  barTextColor: 'silver',
-  barSelectedColor: 'black',
-  barBg: 'white',
+  barTextColor: "silver",
+  barSelectedColor: "black",
+  barBg: "white",
 
   // Form colors
-  inputBg: 'white',
-  inputBorder: 'silver',
-  inputTextColor: 'black',
+  inputBg: "white",
+  inputBorder: "silver",
+  inputTextColor: "black",
   inputBorderRadius: 4,
 
-  brandTitle: 'Open Systems Lab',
-  brandUrl: 'https://opensystemslab.io',
-})
+  brandTitle: "Open Systems Lab",
+  brandUrl: "https://opensystemslab.io",
+});

editor.planx.uk/README.md

@@ -1,6 +1,6 @@
 # editor.planx.uk
 
-Editor is our React frontend, which consists of two main environments: an "editor" for service designers and a "preview" for public applicants. Our components are written with Material UI and broadly follow the [GOV.UK design system](https://design-system.service.gov.uk/) patterns. 
+Editor is our React frontend, which consists of two main environments: an "editor" for service designers and a "preview" for public applicants. Our components are written with Material UI and broadly follow the [GOV.UK design system](https://design-system.service.gov.uk/) patterns.
 
 ## Running locally
 
@@ -14,8 +14,8 @@ Run tests `pnpm test`
 
 Development notes:
 
- - if you need to test or pull new changes from @opensystemslab/planx-document-templates or @opensystemslab/planx-core, make sure to update the commit hash in package.json first
- - you can also use `pnpm link {{local relative path to @opensystemslab/planx-document-templates or @opensystemslab/planx-core}}` to manage local development changes these packages without having to reinstall. If you do this, remember to also run `pnpm unlink` to unlink the local directory and then also update the commit hash to point to the most recent version of the package.
+- if you need to test or pull new changes from @opensystemslab/planx-document-templates or @opensystemslab/planx-core, make sure to update the commit hash in package.json first
+- you can also use `pnpm link {{local relative path to @opensystemslab/planx-document-templates or @opensystemslab/planx-core}}` to manage local development changes these packages without having to reinstall. If you do this, remember to also run `pnpm unlink` to unlink the local directory and then also update the commit hash to point to the most recent version of the package.
 
 ### Disabling type-checking
 
@@ -31,6 +31,6 @@ Start the development server by running `pnpm storybook`
 
 Deployment notes:
 
- - Each open pull request will have its own Storybook available at `storybook.{PR#}.planx.pizza`
- - Netlify handles production Storybook deploys on every commit to `#main` and updates link https://storybook.planx.uk/ 
-  - Notifications for failed Netlify deploys are posted in #planx-notifications-internal on Slack
+- Each open pull request will have its own Storybook available at `storybook.{PR#}.planx.pizza`
+- Netlify handles production Storybook deploys on every commit to `#main` and updates link https://storybook.planx.uk/
+- Notifications for failed Netlify deploys are posted in #planx-notifications-internal on Slack

editor.planx.uk/config-overrides.js

@@ -1,8 +1,8 @@
 module.exports = function override(config) {
   // Optional: Disable type-checking and rely on the IDE's tsserver instead
-  if (process.env.DISABLE_TYPE_CHECKING) {
+  if (import.meta.env.DISABLE_TYPE_CHECKING) {
     config.plugins = config.plugins.filter(
-      (plugin) => plugin.constructor.name !== "ForkTsCheckerWebpackPlugin"
+      (plugin) => plugin.constructor.name !== "ForkTsCheckerWebpackPlugin",
     );
   }
   config.resolve.fallback = {

editor.planx.uk/docs/adding-a-new-component.md

@@ -2,11 +2,12 @@
 
 Let's add a `SetValue` component
 
-## Core directory & files 
+## Core directory & files
 
 1. `planx-core/src/types/component.ts`
 
 Add type to enum in `planx-core` repository
+
 ```typescript
 SetValue = 380,
 ```
@@ -23,7 +24,7 @@ export interface SetValue extends MoreInformation {
 }
 
 export const parseContent = (
-  data: Record<string, any> | undefined
+  data: Record<string, any> | undefined,
 ): SetValue => ({
   fn: data?.fn || "",
   ...parseMoreInformation(data),
@@ -50,7 +51,7 @@ function SetValueComponent(props: Props) {
 
   return (
     <form onSubmit={formik.handleSubmit} id="modal">
-      //... 
+      //...
     </form>
   );
 }
@@ -87,7 +88,7 @@ function SetValueComponent(props: Props) {
 
 1. `src/@planx/components/ui.tsx`
 
-```typescript 
+```typescript
 import PlaylistAdd from "@mui/icons-material/PlaylistAdd";
 [TYPES.SetValue]: PlaylistAdd,
 ```
@@ -108,7 +109,7 @@ case TYPES.SetValue:
 4. `src/pages/FlowEditor/components/forms/FormModal.tsx`
 
 ```jsx
-  <option value={TYPES.SetValue}>SetValue</option>
+<option value={TYPES.SetValue}>SetValue</option>
 ```
 
 5. `src/pages/FlowEditor/components/forms/index.ts`
@@ -147,11 +148,10 @@ If/how should this component be formatted in Send data formats such as BOPS?
 ```typescript
 function isTypeForBopsPayload(type?: TYPES) {
   switch (type) {
-    // ... 
+    // ...
     case TYPES.SetValue:
       return false;
     // ...
   }
 }
 ```
-

editor.planx.uk/public/index.html → editor.planx.uk/index.html

@@ -1,20 +1,20 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" id="favicon"/>
+    <link rel="icon" href="/favicon.ico" id="favicon" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Get planning guidance and submit applications directly to your council using PlanX. It's easy to understand, simple to use and less expensive."
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -39,5 +39,6 @@
       To begin the development, run `pnpm start`.
       To create a production bundle, use `pnpm build`.
     -->
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>