ui: CRA -> Vite migration

ui/.storybook/main.js

@@ -0,0 +1,27 @@
+export default {
+  stories: ['../packages/shared/**/src/**/*.stories.@(js|jsx|ts|tsx)'],
+
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-mdx-gfm',
+    'storybook-dark-mode',
+    '@chromatic-com/storybook',
+  ],
+
+  core: {
+    disableTelemetry: true,
+  },
+
+  docs: {},
+
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
+};

ui/.storybook/preview.js

@@ -14,3 +14,4 @@ export const parameters = {
     classTarget: 'html',
   },
 };
+export const tags = ['autodocs'];

ui/README.md

@@ -7,7 +7,7 @@ This is a [Create React App](https://create-react-app.dev/) project that utilize
 The React app requires an environment variable for the API endpoint so as to talk to the Parca backend. Create a file named `.env.local` in `packages/app/web/` to add the environment variable for the API endpoint.
 
 ```shell
-REACT_APP_PUBLIC_API_ENDPOINT=http://localhost:7070
+VITE_API_ENDPOINT=http://localhost:7070
 ```
 
 Then, start the Parca backend by running the command below. The `--cors-allowed-origins='*'` flag allows for enabling CORS headers on Parca.

ui/config/next.tsconfig.json

@@ -16,6 +16,7 @@
     "paths": {
       "@parca/*": ["../packages/shared/*"]
     },
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "types": ["vite/client", "vitest/globals"]
   }
 }

ui/package.json

@@ -7,7 +7,7 @@
     "lint": "eslint --ext .ts,.tsx,.js packages/*",
     "fix": "eslint --fix --ext .ts,.tsx,.js packages/*",
     "type-check": "tsc --noEmit",
-    "test": "jest --coverage --config jest.config.cjs",
+    "test": "vitest --run",
     "build": "lerna run build",
     "build-swc-lerna": "lerna run build-swc",
     "watch": "lerna run --parallel watch",
@@ -35,28 +35,23 @@
     "@babel/plugin-proposal-export-default-from": "7.24.7",
     "@babel/plugin-proposal-private-property-in-object": "7.21.11",
     "@babel/preset-env": "7.24.7",
+    "@chromatic-com/storybook": "^1",
     "@ianvs/prettier-plugin-sort-imports": "3.7.2",
     "@mdx-js/loader": "2.3.0",
     "@next/bundle-analyzer": "12.3.4",
     "@next/eslint-plugin-next": "12.3.4",
     "@next/mdx": "12.3.4",
-    "@storybook/addon-actions": "7.6.19",
-    "@storybook/addon-docs": "7.6.19",
-    "@storybook/addon-essentials": "7.6.19",
-    "@storybook/addon-interactions": "7.6.19",
-    "@storybook/addon-links": "7.6.19",
-    "@storybook/addon-mdx-gfm": "7.6.19",
-    "@storybook/addon-outline": "7.6.19",
-    "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storyshots": "7.6.17",
-    "@storybook/addon-styling": "0.3.2",
-    "@storybook/node-logger": "7.6.19",
-    "@storybook/preset-create-react-app": "7.6.19",
-    "@storybook/preset-typescript": "3.0.0",
-    "@storybook/react": "7.6.19",
-    "@storybook/react-webpack5": "7.6.19",
-    "@storybook/testing-library": "0.2.2",
-    "@svgr/webpack": "6.5.1",
+    "@storybook/addon-actions": "^8.1.11",
+    "@storybook/addon-docs": "^8.1.11",
+    "@storybook/addon-essentials": "^8.1.11",
+    "@storybook/addon-interactions": "^8.1.11",
+    "@storybook/addon-links": "^8.1.11",
+    "@storybook/addon-mdx-gfm": "^8.1.11",
+    "@storybook/addon-outline": "^8.1.11",
+    "@storybook/node-logger": "^8.1.11",
+    "@storybook/react": "^8.1.11",
+    "@storybook/react-vite": "^8.1.11",
+    "@storybook/test": "^8.1.11",
     "@swc/cli": "0.3.12",
     "@swc/core": "1.6.1",
     "@swc/jest": "0.2.36",
@@ -111,14 +106,15 @@
     "rimraf": "3.0.2",
     "sass": "1.77.6",
     "sass-loader": "13.3.3",
-    "storybook": "7.6.19",
-    "storybook-dark-mode": "2.1.1",
+    "storybook": "^8.1.11",
+    "storybook-dark-mode": "4.0.2",
     "style-loader": "3.3.4",
     "ts-jest": "29.1.5",
     "ts-node": "10.9.2",
     "tsc-watch": "6.2.0",
     "typescript": "5.4.5",
-    "webpack": "5.92.1"
+    "vite": "^5.3.1",
+    "vitest": "^1.6.0"
   },
   "eslintConfig": {
     "overrides": [

ui/packages/app/web/.env.local-dev

@@ -1 +1 @@
-REACT_APP_PUBLIC_API_ENDPOINT=http://localhost:7070
+VITE_API_ENDPOINT=http://localhost:7070

ui/packages/app/web/public/index.html → ui/packages/app/web/index.html

@@ -6,16 +6,16 @@
       window.APP_VERSION = '{{.Version}}';
     </script>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.svg" />
+    <link rel="icon" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Open Source Infrastructure-wide continuous profiling" />
-    <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.
@@ -30,15 +30,6 @@
   <body class="bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+    <script type="module" src="./src/index.tsx"></script>
   </body>
 </html>

ui/packages/app/web/package.json

@@ -3,15 +3,14 @@
   "private": true,
   "version": "0.16.702",
   "description": "Parca Web Interface",
+  "type": "module",
   "scripts": {
     "lint": "eslint --no-error-on-unmatched-pattern --ext .ts,.tsx,.js src/*",
     "nextjs-dev": "../../../node_modules/.bin/next dev",
     "clean": "rimraf .next && rimraf out",
     "test": "jest --coverage --config ../../../jest.config.js ./src/**/* ./__tests__/**/*",
-    "dev": "craco start",
-    "build": "craco build",
-    "build-swc": "craco build",
-    "eject": "craco eject"
+    "dev": "vite",
+    "build": "vite build"
   },
   "config": {
     "port": 3000,
@@ -63,25 +62,19 @@
     "web-vitals": "3.5.2"
   },
   "devDependencies": {
-    "@craco/craco": "7.1.0",
-    "@swc/cli": "0.3.12",
-    "@swc/core": "1.6.1",
-    "@swc/jest": "0.2.36",
     "@types/lodash.throttle": "4.1.9",
+    "@vitejs/plugin-react-swc": "^3.7.0",
     "css-loader": "6.11.0",
     "eslint-config-prettier": "8.10.0",
     "eslint-plugin-import": "2.29.1",
     "jest": "29.7.0",
     "jest-runtime": "29.7.0",
     "pm2": "5.4.0",
-    "react-scripts": "5.0.1",
-    "sass": "1.77.6",
-    "sass-loader": "13.3.3",
     "tslint": "6.1.3",
     "tslint-config-prettier": "1.18.0",
     "tslint-plugin-prettier": "2.3.0",
     "tslint-react": "5.0.0",
-    "webpack": "5.92.1"
+    "vite-plugin-svgr": "^4.2.0"
   },
   "eslintConfig": {
     "extends": [

ui/packages/app/web/postcss.config.js

@@ -1,6 +1,10 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
+import autoprefixer from 'autoprefixer';
+import tailwind from 'tailwindcss';
+
+import tailwindConfig from './tailwind.config.js';
+
+const config = {
+  plugins: [tailwind(tailwindConfig), autoprefixer],
 };
+
+export default config;

ui/packages/app/web/src/components/Targets/utils.test.ts

@@ -11,6 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import {describe, expect, it} from 'vitest';
+
 import {getHealthStatus} from './utils';
 
 describe('getHealthStatus', () => {

ui/packages/app/web/src/pages/index.tsx

@@ -22,7 +22,7 @@ import {ProfileExplorer} from '@parca/profile';
 import {selectDarkMode, useAppSelector} from '@parca/store';
 import {convertToQueryParams, parseParams} from '@parca/utilities';
 
-const apiEndpoint = process.env.REACT_APP_PUBLIC_API_ENDPOINT;
+const apiEndpoint = import.meta.env.VITE_API_ENDPOINT;
 
 const queryClient = new QueryServiceClient(
   new GrpcWebFetchTransport({

ui/packages/app/web/src/pages/targets.tsx

@@ -31,7 +31,7 @@ import {EmptyState} from '@parca/components';
 import AgentsTable from '../components/Targets/AgentsTable';
 import TargetsTable from '../components/Targets/TargetsTable';
 
-const apiEndpoint = process.env.REACT_APP_PUBLIC_API_ENDPOINT;
+const apiEndpoint = import.meta.env.VITE_API_ENDPOINT;
 
 export interface ITargetsResult {
   response: TargetsResponse | null;

ui/packages/app/web/tailwind.config.js

@@ -1,18 +1,22 @@
-const defaultTheme = require('tailwindcss/defaultTheme');
-const typography = require('@tailwindcss/typography');
+import typography from '@tailwindcss/typography';
+import defaultConfig from 'tailwindcss/stubs/defaultConfig.stub.js';
 
-module.exports = {
+import parcaComponentsConfig from '@parca/components/tailwind.config.js';
+import parcaProfileConfig from '@parca/profile/tailwind.config.js';
+
+const config = {
+  presets: [parcaComponentsConfig, parcaProfileConfig],
   content: [
     './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
     './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-    '../../shared/**/*.{js,ts,jsx,tsx,mdx}',
+    '../../shared/*/dist/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   darkMode: 'class',
   theme: {
     extend: {
       fontFamily: {
         robotoMono: ['Roboto Mono', 'monospace'],
-        sans: ['Poppins', ...defaultTheme.fontFamily.sans],
+        sans: ['Poppins', ...defaultConfig.theme.fontFamily.sans],
       },
       maxWidth: {
         '1/2': '50%',
@@ -43,3 +47,5 @@ module.exports = {
   variants: {},
   plugins: [typography],
 };
+
+export default config;

ui/packages/app/web/tsconfig.json

@@ -17,7 +17,8 @@
     "noImplicitAny": false,
     "downlevelIteration": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "types": ["vite/client", "vitest/globals"]
   },
   "include": ["src", "../../shared/*"]
 }

ui/packages/app/web/vite.config.ts

@@ -0,0 +1,27 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import react from '@vitejs/plugin-react-swc';
+import {defineConfig} from 'vite';
+import svgr from 'vite-plugin-svgr';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), svgr()],
+  server: {
+    port: 3000,
+  },
+  build: {
+    outDir: 'build',
+  },
+});