build: [M3-5912] - Vite (#8838)

build: uses Vite for all development server and production builds

Co-authored-by: Banks Nussman <banks@nussman.us>

.github/workflows/ci.yml

@@ -4,6 +4,8 @@ on:
   push:
     branches:
       - master
+      - staging
+      - develop
   pull_request:
 
 jobs:
@@ -157,6 +159,31 @@ jobs:
       - run: yarn --frozen-lockfile
       - run: yarn workspace linode-manager run test
 
+  typecheck-manager:
+    runs-on: ubuntu-latest
+    needs:
+      - build-sdk
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18.14"
+      - uses: actions/cache@v2
+        with:
+          path: |
+            **/node_modules
+          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
+      - uses: actions/download-artifact@v3
+        with:
+          name: packages-validation-lib
+          path: packages/validation
+      - uses: actions/download-artifact@v3
+        with:
+          name: packages-api-v4-lib
+          path: packages/api-v4
+      - run: yarn --frozen-lockfile
+      - run: yarn workspace linode-manager run typecheck
+
   build-manager:
     runs-on: ubuntu-latest
     if: github.ref == 'refs/heads/master'

.gitignore

@@ -72,6 +72,7 @@ jspm_packages/
 
 # Typescript v1 declaration files
 typings/
+tsconfig.tsbuildinfo
 
 # Optional npm cache directory
 .npm
@@ -109,6 +110,7 @@ localStorage.json
 
 # storybook static files
 .out
+packages/manager/storybook-static/
 
 # Vim users
 *.swp

docs/development-guide/01-repository-structure.md

@@ -54,7 +54,7 @@ A few notable directories in the root level of the manager package:
 - **/build**
   - where the app is compiled to after running `yarn build` (gitignored)
 - **/config**
-  - webpack configs and setup code
+  - configuration for unit tests
 - **/cypress**
   - end-to-end tests
 - **/e2e**

package.json

@@ -25,8 +25,10 @@
     "build": "yarn build:validation && yarn build:sdk && yarn workspace linode-manager build",
     "build:analyze": "yarn build --bundle-analyze",
     "up": "yarn install:all && yarn build:validation && yarn build:sdk && yarn start:all",
+    "up:expose": "yarn install:all && yarn build:validation && yarn build:sdk && yarn start:all:expose",
     "dev": "yarn install:all && yarn start:all",
     "start:all": "concurrently -n api-v4,validation,manager -c blue,yellow,green \"yarn workspace @linode/api-v4 start\" \"yarn workspace @linode/validation start\" \"yarn workspace linode-manager start\"",
+    "start:all:expose": "concurrently -n api-v4,validation,manager -c blue,yellow,green \"yarn workspace @linode/api-v4 start\" \"yarn workspace @linode/validation start\" \"yarn workspace linode-manager start --host\"",
     "start:manager": "yarn workspace linode-manager start",
     "start:manager:ci": "yarn workspace linode-manager start:ci",
     "clean": "rm -rf node_modules && rm -rf packages/@linode/api-v4/node_modules && rm -rf packages/manager/node_modules && rm -rf packages/@linode/validation/node_modules",

packages/api-v4/package.json

@@ -70,7 +70,7 @@
     "jest": "~26.4.2",
     "lint-staged": "^9.4.2",
     "prettier": "~2.2.1",
-    "tsup": "6.2.1"
+    "tsup": "^6.6.3"
   },
   "resolutions": {
     "handlebars": "^4.4.3"

packages/manager/.storybook/main.ts

@@ -0,0 +1,33 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+import { mergeConfig } from 'vite';
+
+const config: StorybookConfig = {
+  stories: [
+    '../src/components/**/*.@(mdx|stories.@(js|ts|jsx|tsx))',
+    '../src/features/**/*.@(mdx|stories.@(js|ts|jsx|tsx))',
+  ],
+  addons: [
+    '@storybook/addon-docs',
+    '@storybook/addon-controls',
+    '@storybook/addon-viewport',
+    'storybook-dark-mode-v7',
+  ],
+  staticDirs: ['../public'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  features: { storyStoreV7: true },
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      resolve: {
+        preserveSymlinks: true,
+      },
+      define: {
+        'process.env': {},
+      },
+    });
+  },
+};
+
+export default config;

packages/manager/.storybook/manager.ts

@@ -0,0 +1,14 @@
+import { create } from '@storybook/theming';
+import { addons } from '@storybook/addons';
+import Logo from '../src/assets/logo/akamai-logo.svg';
+
+const theme = create({
+  base: 'light',
+  brandTitle: 'Akamai',
+  brandUrl: 'https://www.linode.com',
+  brandImage: Logo,
+});
+
+addons.setConfig({
+  theme,
+});

packages/manager/.storybook/preview-head.html

@@ -1,5 +1,3 @@
-<style>
-  .sbdocs-wrapper {
-    padding-top: 2rem !important;
-  }
-</style>
+<script>
+  window.global = window;
+</script>

packages/manager/.storybook/preview.tsx

@@ -1,40 +1,32 @@
-// .storybook/preview.js
-import { StyledEngineProvider } from '@mui/material/styles';
-import { select, withKnobs } from '@storybook/addon-knobs';
-import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
 import React from 'react';
+import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
+import { wrapWithTheme } from '../src/utilities/testHelpers';
+import { useDarkMode } from 'storybook-dark-mode-v7';
+import { DocsContainer as BaseContainer } from '@storybook/addon-docs';
+import { themes } from '@storybook/theming';
 import '../public/fonts/fonts.css';
-import CssBaseline from '../src/components/core/CssBaseline';
-import { ThemeProvider } from '../src/components/core/styles';
 import '../src/index.css';
-import { dark, light } from '../src/themes';
-import { wrapWithTheme } from '../src/utilities/testHelpers';
 
-const options = {
-  dark,
-  light,
+export const DocsContainer = ({ children, context }) => {
+  const isDark = useDarkMode();
+
+  return (
+    <BaseContainer
+      theme={{
+        ...themes[isDark ? 'dark' : 'normal'],
+        base: isDark ? 'dark' : 'light',
+      }}
+      context={context}
+    >
+      {children}
+    </BaseContainer>
+  );
 };
 
 export const decorators = [
-  withKnobs,
   (Story) => {
-    const _key = select('theme', ['light', 'dark'], 'light');
-
-    return wrapWithTheme(
-      <StyledEngineProvider injectFirst>
-        <ThemeProvider theme={options[_key]}>
-          <CssBaseline />
-          {/* Keep this in case we want to change the background color based on the mode */}
-          {/* <div
-          style={{
-            backgroundColor: options[_key]().bg.app,
-          }}
-        > */}
-          <Story />
-          {/* </div> */}
-        </ThemeProvider>
-      </StyledEngineProvider>
-    );
+    const isDark = useDarkMode();
+    return wrapWithTheme(<Story />, { theme: isDark ? 'dark' : 'light' });
   },
 ];
 
@@ -45,17 +37,21 @@ MINIMAL_VIEWPORTS.mobile1.styles = {
 
 export const parameters = {
   controls: { expanded: true },
+  darkMode: {
+    dark: { ...themes.dark },
+    light: { ...themes.normal },
+  },
   options: {
     storySort: {
       method: 'alphabetical',
       order: ['Intro', 'Features', 'Components', 'Elements', 'Core Styles'],
     },
   },
-  previewTabs: {
-    'storybook/docs/panel': { index: -1 },
-  },
   viewMode: 'docs',
   viewport: {
     viewports: MINIMAL_VIEWPORTS,
   },
+  docs: {
+    container: DocsContainer,
+  },
 };