feat: rspack (#870)

* feat: rspack

* Remove storybook as it hoists fork-ts-checker-webpack-plugin

* Remove cypress component testing

* Switch to start:full

* Update scripts

* Update package.json

cypress.config.ts

@@ -1,20 +1,4 @@
 import { defineConfig } from 'cypress';
-import * as webpackConfig from 'visyn_scripts/config/webpack.config';
+import * as cypressConfig from 'visyn_scripts/config/cypress.config.template';
 
-export default defineConfig({
-  viewportHeight: 1080,
-  viewportWidth: 1920,
-  defaultCommandTimeout: 10000,
-  e2e: {
-    baseUrl: 'http://localhost:8080',
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    setupNodeEvents(on, config) {},
-  },
-  component: {
-    devServer: {
-      framework: 'react',
-      bundler: 'webpack',
-      webpackConfig: webpackConfig({ workspace_mode: 'single' }, { mode: 'production' }),
-    },
-  },
-});
+export default defineConfig(cypressConfig);

package.json

@@ -38,20 +38,18 @@
     "compile": "visyn_scripts compile",
     "copy": "visyn_scripts copy",
     "cy:open": "cypress open",
-    "cy:run": "cypress run --e2e && cypress run --component",
+    "cy:run": "cypress run --e2e",
     "delete-dependencies": "visyn_scripts clean node_modules",
     "dist": "mkdir lib && cd dist && tar cvzf ../lib/tdp_core.tar.gz *",
     "docs": "visyn_scripts docs",
     "lint:fix": "visyn_scripts lint --fix",
     "lint": "visyn_scripts lint",
     "predist": "yarn run lint && yarn run test && yarn run build",
-    "start:fast": "visyn_scripts start --env workspace_mode=single fast=true",
+    "start:full": "visyn_scripts start --env workspace_mode=single fast=false",
     "start": "visyn_scripts start --env workspace_mode=single",
-    "storybook:build": "NODE_OPTIONS=--max_old_space_size=4096 build-storybook",
-    "storybook": "NODE_OPTIONS=--max_old_space_size=4096 start-storybook -p 6006",
     "test": "visyn_scripts test",
-    "webpack:dev": "visyn_scripts build --mode development --env workspace_mode=single",
-    "webpack:prod": "visyn_scripts build --mode production --env workspace_mode=single"
+    "bundle:dev": "visyn_scripts bundle --mode development --env workspace_mode=single",
+    "bundle:prod": "visyn_scripts bundle --mode production --env workspace_mode=single"
   },
   "dependencies": {
     "@popperjs/core": "^2.9.3",
@@ -84,30 +82,19 @@
     "select2": "~4.0.13",
     "select2-bootstrap-theme": "0.1.0-beta.9",
     "use-deep-compare-effect": "^1.8.0",
-    "visyn_core": "^8.0.0",
-    "visyn_scripts": "^7.0.1"
+    "visyn_core": "^9.0.0",
+    "visyn_scripts": "^8.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.17.7",
     "@babel/plugin-transform-typescript": "7.17.12",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-interactions": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.5.16",
-    "@storybook/testing-library": "0.0.13",
-    "cypress": "^11.2.0",
-    "storybook-addon-swc": "^1.1.9"
+    "cypress": "^13.0.0"
   },
   "resolutions": {
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "webpack": "5.74.0"
+    "react-dom": "~18.2.0"
   },
   "visyn": {
     "entries": {

src/scss/abstracts/_variables.scss

@@ -73,9 +73,6 @@ $annotation_color_hover: #006b90 !default;
 $anchor_color: red !default;
 $anchor_color_hover: darkred !default;
 
-/* phovea_ui */
-$fa-font-path: '~@fortawesome/fontawesome-free/webfonts' !default;
-
 $phovea-loading-icon-url: url('../../assets/caleydo_c_anim.svg') !default;
 $phovea-loading-icon-size: auto !default;
 
@@ -101,8 +98,6 @@ $anchor_color_hover: darkred !default;
 $select-data-color: orange !default;
 $hover-data-color: #ffc46b !default;
 
-// TODO: Without this, we get "Can't resolve './node_modules/lineupengine/src/styles/lineupengine/src/assets/loading.svg' in '.../workspaces/<repo>'"
-// Why do I need to do this? Probably because lineupjs defines $engine_assets and it is resolving it relatively?
-$engine_assets: '~lineupengine/src/assets';
+$engine_assets: '../assets';
 $engine_loading_image: url('#{$engine_assets}/loading.svg') !default;
 $engine_loading_static_image: url('#{$engine_assets}/loading_s.svg') !default;

src/scss/components/_view_lineup.scss

@@ -73,7 +73,7 @@
   }
 }
 
-$lu_assets: "~lineupjs/src/assets";
+$lu_assets: "../assets";
 
 @at-root {
   .tdp-ranking-export-form {

src/scss/fontawesome.scss

@@ -1,3 +1,3 @@
-@import "~@fortawesome/fontawesome-free/scss/functions";
-@import "~@fortawesome/fontawesome-free/scss/variables";
-@import "~@fortawesome/fontawesome-free/scss/mixins";
+@import "@fortawesome/fontawesome-free/scss/functions";
+@import "@fortawesome/fontawesome-free/scss/variables";
+@import "@fortawesome/fontawesome-free/scss/mixins";

src/scss/main.scss

@@ -1,4 +1,4 @@
-@import "~visyn_core/dist/scss/main.scss";
+@import "visyn_core/scss/main.scss";
 
 @import "./abstracts/functions";
 @import './abstracts/variables';

src/scss/storybook.scss

@@ -6,7 +6,7 @@
 @import "./vendors/bootstrap/1_variables_mixins_utilities";
 
 // map-merge my theme-colors
-// @import "~target360/dist/scss/vendors/bootstrap_modify_maps";
+// @import "target360/dist/scss/vendors/bootstrap_modify_maps";
 
 // Include all Bootstrap components as needed
 @import "./vendors/bootstrap/2_components";

src/scss/vendors/_font-awesome.scss

@@ -1,7 +1,7 @@
-@import '~@fortawesome/fontawesome-free/scss/solid';
-@import '~@fortawesome/fontawesome-free/scss/regular';
-@import '~@fortawesome/fontawesome-free/scss/brands';
-@import '~@fortawesome/fontawesome-free/scss/fontawesome';
+@import '@fortawesome/fontawesome-free/scss/solid';
+@import '@fortawesome/fontawesome-free/scss/regular';
+@import '@fortawesome/fontawesome-free/scss/brands';
+@import '@fortawesome/fontawesome-free/scss/fontawesome';
 
 
 // vertically align all font-awesome icons inside of the .btn class