Revert "feat: rspack" (#872)

Revert "feat: rspack (#870)"

This reverts commit 5566ddf.

.storybook/main.js

@@ -0,0 +1,22 @@
+const path = require('path');
+
+module.exports = {
+  core: {
+    builder: 'webpack5',
+  },
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions', '@storybook/preset-scss', 'storybook-addon-swc'],
+  framework: '@storybook/react',
+  webpackFinal: async (config) => {
+    config.resolve.alias = {
+      ...(config.resolve.alias || {}),
+      // I have no clue why this is required, but if this is missing we get a "Can't resolve '../../assets/icons/datavisyn_logo.svg' in '.../src/scss'""
+      '../../assets': path.resolve(__dirname, '../src/assets'),
+      // Add tdp_core/dist as alias, as we have scss/code imports like tdp_core/dist/assets/...
+      'tdp_core/dist': path.resolve(__dirname, '../src'),
+      'tdp_core/src': path.resolve(__dirname, '../src'),
+      'tdp_core': path.resolve(__dirname, '../src'),
+    };
+    return config;
+  },
+};

.storybook/preview.js

@@ -0,0 +1,15 @@
+import '../src/scss/storybook.scss';
+import { initializeLibrary } from '../src/initialize';
+
+// TODO: This is async, how to wait for it?
+initializeLibrary();
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

cypress.config.ts

@@ -1,4 +1,20 @@
 import { defineConfig } from 'cypress';
-import * as cypressConfig from 'visyn_scripts/config/cypress.config.template';
+import * as webpackConfig from 'visyn_scripts/config/webpack.config';
 
-export default defineConfig(cypressConfig);
+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' }),
+    },
+  },
+});

package.json

@@ -38,18 +38,20 @@
     "compile": "visyn_scripts compile",
     "copy": "visyn_scripts copy",
     "cy:open": "cypress open",
-    "cy:run": "cypress run --e2e",
+    "cy:run": "cypress run --e2e && cypress run --component",
     "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:full": "visyn_scripts start --env workspace_mode=single fast=false",
+    "start:fast": "visyn_scripts start --env workspace_mode=single fast=true",
     "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",
-    "bundle:dev": "visyn_scripts bundle --mode development --env workspace_mode=single",
-    "bundle:prod": "visyn_scripts bundle --mode production --env workspace_mode=single"
+    "webpack:dev": "visyn_scripts build --mode development --env workspace_mode=single",
+    "webpack:prod": "visyn_scripts build --mode production --env workspace_mode=single"
   },
   "dependencies": {
     "@popperjs/core": "^2.9.3",
@@ -82,19 +84,30 @@
     "select2": "~4.0.13",
     "select2-bootstrap-theme": "0.1.0-beta.9",
     "use-deep-compare-effect": "^1.8.0",
-    "visyn_core": "^9.0.0",
-    "visyn_scripts": "^8.0.0"
+    "visyn_core": "^8.0.0",
+    "visyn_scripts": "^7.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.17.7",
     "@babel/plugin-transform-typescript": "7.17.12",
-    "cypress": "^13.0.0"
+    "@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"
   },
   "resolutions": {
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
-    "react-dom": "~18.2.0"
+    "react-dom": "~18.2.0",
+    "webpack": "5.74.0"
   },
   "visyn": {
     "entries": {

src/scss/abstracts/_variables.scss

@@ -73,6 +73,9 @@ $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;
 
@@ -98,6 +101,8 @@ $anchor_color_hover: darkred !default;
 $select-data-color: orange !default;
 $hover-data-color: #ffc46b !default;
 
-$engine_assets: '../assets';
+// 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_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: "../assets";
+$lu_assets: "~lineupjs/src/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/scss/main.scss";
+@import "~visyn_core/dist/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