Skip to content

Commit

Permalink
feat: Replace craco with vite (#3544)
Browse files Browse the repository at this point in the history
Co-authored-by: Jessica McInchak <[email protected]>
  • Loading branch information
DafyddLlyr and jessicamcinchak authored Aug 26, 2024
1 parent 2d99fae commit ce05231
Show file tree
Hide file tree
Showing 112 changed files with 4,346 additions and 1,996 deletions.
32 changes: 16 additions & 16 deletions .github/workflows/pull-request.yml
Original file line number Diff line number Diff line change
Expand Up @@ -206,29 +206,29 @@ jobs:
- run: pnpm build
if: steps.cache-react-build-assets.outputs.cache-hit != 'true'
env:
REACT_APP_AIRBRAKE_PROJECT_ID: ${{ secrets.AIRBRAKE_PROJECT_ID }}
REACT_APP_AIRBRAKE_PROJECT_KEY: ${{ secrets.AIRBRAKE_PROJECT_KEY }}
REACT_APP_API_URL: https://api.${{ env.FULL_DOMAIN }}
REACT_APP_HASURA_URL: https://hasura.${{ env.FULL_DOMAIN }}/v1/graphql
REACT_APP_HASURA_WEBSOCKET: wss://hasura.${{ env.FULL_DOMAIN }}/v1/graphql
REACT_APP_SHAREDB_URL: wss://sharedb.${{ env.FULL_DOMAIN }}
VITE_APP_AIRBRAKE_PROJECT_ID: ${{ secrets.AIRBRAKE_PROJECT_ID }}
VITE_APP_AIRBRAKE_PROJECT_KEY: ${{ secrets.AIRBRAKE_PROJECT_KEY }}
VITE_APP_API_URL: https://api.${{ env.FULL_DOMAIN }}
VITE_APP_HASURA_URL: https://hasura.${{ env.FULL_DOMAIN }}/v1/graphql
VITE_APP_HASURA_WEBSOCKET: wss://hasura.${{ env.FULL_DOMAIN }}/v1/graphql
VITE_APP_SHAREDB_URL: wss://sharedb.${{ env.FULL_DOMAIN }}
# needed because there's no API to change google's allowed OAuth URLs
REACT_APP_GOOGLE_OAUTH_OVERRIDE: https://api.editor.planx.dev
REACT_APP_ENV: pizza
VITE_APP_GOOGLE_OAUTH_OVERRIDE: https://api.editor.planx.dev
VITE_APP_ENV: pizza
working-directory: ${{ env.EDITOR_DIRECTORY }}
- run: pnpm build-storybook
if: steps.cache-react-build-assets.outputs.cache-hit != 'true'
working-directory: ${{ env.EDITOR_DIRECTORY }}
env:
# same env as above, if it's job.env it can't access existing env.[variable]
REACT_APP_AIRBRAKE_PROJECT_ID: ${{ secrets.AIRBRAKE_PROJECT_ID }}
REACT_APP_AIRBRAKE_PROJECT_KEY: ${{ secrets.AIRBRAKE_PROJECT_KEY }}
REACT_APP_API_URL: https://api.${{ env.FULL_DOMAIN }}
REACT_APP_HASURA_URL: https://hasura.${{ env.FULL_DOMAIN }}/v1/graphql
REACT_APP_HASURA_WEBSOCKET: wss://hasura.${{ env.FULL_DOMAIN }}/v1/graphql
REACT_APP_SHAREDB_URL: wss://sharedb.${{ env.FULL_DOMAIN }}
REACT_APP_GOOGLE_OAUTH_OVERRIDE: https://api.editor.planx.dev
REACT_APP_ENV: pizza
VITE_APP_AIRBRAKE_PROJECT_ID: ${{ secrets.AIRBRAKE_PROJECT_ID }}
VITE_APP_AIRBRAKE_PROJECT_KEY: ${{ secrets.AIRBRAKE_PROJECT_KEY }}
VITE_APP_API_URL: https://api.${{ env.FULL_DOMAIN }}
VITE_APP_HASURA_URL: https://hasura.${{ env.FULL_DOMAIN }}/v1/graphql
VITE_APP_HASURA_WEBSOCKET: wss://hasura.${{ env.FULL_DOMAIN }}/v1/graphql
VITE_APP_SHAREDB_URL: wss://sharedb.${{ env.FULL_DOMAIN }}
VITE_APP_GOOGLE_OAUTH_OVERRIDE: https://api.editor.planx.dev
VITE_APP_ENV: pizza

pulumi_preview:
name: Run Pulumi Preview
Expand Down
14 changes: 7 additions & 7 deletions editor.planx.uk/.env
Original file line number Diff line number Diff line change
Expand Up @@ -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
2 changes: 1 addition & 1 deletion editor.planx.uk/.env.test
Original file line number Diff line number Diff line change
@@ -1 +1 @@
REACT_APP_ENV=test
VITE_APP_ENV=test
18 changes: 5 additions & 13 deletions editor.planx.uk/.eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
Expand Down Expand Up @@ -86,9 +80,7 @@
"files": [
"**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)"
],
"extends": [
"plugin:testing-library/react"
]
"extends": ["plugin:testing-library/react"]
}
]
}
}
15 changes: 8 additions & 7 deletions editor.planx.uk/.storybook/__mocks__/react-navi.js
Original file line number Diff line number Diff line change
@@ -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;
40 changes: 25 additions & 15 deletions editor.planx.uk/.storybook/main.js
Original file line number Diff line number Diff line change
@@ -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,
},
};
6 changes: 3 additions & 3 deletions editor.planx.uk/.storybook/manager.js
Original file line number Diff line number Diff line change
@@ -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,
})
});
2 changes: 1 addition & 1 deletion editor.planx.uk/.storybook/preview.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,5 @@ export const decorators = [
</ThemeProvider>
</StyledEngineProvider>
),
reactNaviDecorator
reactNaviDecorator,
];
36 changes: 18 additions & 18 deletions editor.planx.uk/.storybook/theme.js
Original file line number Diff line number Diff line change
@@ -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",
});
12 changes: 6 additions & 6 deletions editor.planx.uk/README.md
Original file line number Diff line number Diff line change
@@ -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

Expand All @@ -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

Expand All @@ -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
4 changes: 2 additions & 2 deletions editor.planx.uk/config-overrides.js
Original file line number Diff line number Diff line change
@@ -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 = {
Expand Down
23 changes: 0 additions & 23 deletions editor.planx.uk/craco.config.js

This file was deleted.

Loading

0 comments on commit ce05231

Please sign in to comment.