Attempt to fix build process

ls1intum · Nov 17, 2024 · 2b98b49 · 2b98b49
1 parent 43c580a
commit 2b98b49
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 161 deletions.
diff --git a/editor/package-lock.json b/editor/package-lock.json
diff --git a/editor/package.json b/editor/package.json
@@ -17,7 +17,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
-    "styled-components": "6.1.8",
     "typescript": "^4.9.5",
     "uuid": "^10.0.0",
     "web-vitals": "^2.1.4",

diff --git a/editor/src/App.tsx b/editor/src/App.tsx
@@ -1,20 +1,11 @@
 import { useState } from "react";
 import { ApollonEditor } from "@ls1intum/apollon";
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
-import styled from "styled-components";
 import { ApollonEditorProvider } from "./components/apollon-editor-component/ApollonEditorContext";
 import { ApollonEditorComponent } from "./components/apollon-editor-component/ApollonEditorComponent";
 import { vscode } from "./index";
 import useStore from "./store";
 
-const AppBar = styled.div`
-  width: 100%;
-  background: var(--vscode-activityBar-background);
-  padding: 1rem 0;
-  display: flex;
-  justify-content: flex-start;
-`;
-
 function App() {
   const [editor, setEditor] = useState<ApollonEditor>();
   const handleSetEditor = (newEditor: ApollonEditor) => {
@@ -41,14 +32,14 @@ function App() {
 
   return (
     <>
-      <AppBar>
+      <div className="app-bar">
         <VSCodeButton className="mx-3" onClick={saveDiagram}>
           Save
         </VSCodeButton>
         <VSCodeButton className="mx-3" onClick={exportDiagram}>
           Export as SVG
         </VSCodeButton>
-      </AppBar>
+      </div>
       <ApollonEditorProvider value={{ editor, setEditor: handleSetEditor }}>
         <ApollonEditorComponent />
       </ApollonEditorProvider>

diff --git a/editor/src/components/apollon-editor-component/ApollonEditorComponent.tsx b/editor/src/components/apollon-editor-component/ApollonEditorComponent.tsx
@@ -1,17 +1,9 @@
 import { ApollonEditor, UMLModel } from "@ls1intum/apollon";
 import React, { useEffect, useRef, useContext } from "react";
-import styled from "styled-components";
 
 import { ApollonEditorContext } from "./ApollonEditorContext";
 import useStore from "../../store";
 
-const ApollonContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background-color: var(--apollon-background);
-`;
-
 export const ApollonEditorComponent: React.FC = () => {
   const containerRef = useRef<HTMLDivElement>(null);
   const editorRef = useRef<ApollonEditor | null>(null);
@@ -51,5 +43,5 @@ export const ApollonEditorComponent: React.FC = () => {
     initializeEditor();
   }, [createNewEditor]);
 
-  return <ApollonContainer ref={containerRef} />;
+  return <div className="apollon-container" ref={containerRef} />;
 };
diff --git a/editor/src/index.css b/editor/src/index.css
@@ -22,3 +22,18 @@ body {
   line-height: normal;
   margin-bottom: 3px;
 }
+
+.apollon-container {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: var(--apollon-background);
+}
+
+.app-bar {
+  width: 100%;
+  background: var(--vscode-activityBar-background);
+  padding: 1rem 0;
+  display: flex;
+  justify-content: flex-start;
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -65,7 +65,6 @@
   "devDependencies": {
     "@types/mocha": "^10.0.6",
     "@types/node": "18.x",
-    "@types/styled-components": "^5.1.34",
     "@types/vscode": "^1.86.0",
     "@typescript-eslint/eslint-plugin": "^7.0.2",
     "@typescript-eslint/parser": "^7.0.2",
@@ -76,6 +75,7 @@
   },
   "dependencies": {
     "@ls1intum/apollon": "^3.3.15",
+    "@types/styled-components": "^5.1.34",
     "@vscode/vsce": "^3.2.1",
     "uuid": "^11.0.2"
   },