feat(*): add basic setup for image, css and desktop module

.gitignore

@@ -102,3 +102,6 @@ dist
 
 # TernJS port file
 .tern-port
+
+# Mac OS folder cache
+.DS_Store

package.json

@@ -29,21 +29,28 @@
     "@types/jest": "^26.0.20",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.2",
+    "@types/react-router-dom": "^5.1.7",
     "babel-loader": "^8.2.2",
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^5.1.2",
     "cypress": "^6.6.0",
+    "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^6.1.1",
     "html-webpack-plugin": "^5.3.1",
     "jest": "^26.6.3",
+    "normalize.css": "^8.0.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-refresh": "^0.9.0",
+    "react-router-dom": "^5.2.0",
+    "sass": "^1.32.8",
+    "sass-loader": "^11.0.1",
     "style-loader": "^2.0.0",
     "ts-node": "^9.1.1",
     "type-fest": "^0.21.3",
     "typescript": "^4.2.3",
     "uglifyjs-webpack-plugin": "^2.2.0",
+    "url-loader": "^4.1.1",
     "webpack": "^5.25.0",
     "webpack-bundle-analyzer": "^4.4.0",
     "webpack-cli": "^4.5.0",

src/App.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import "normalize.css";
+
+import "theme/index.scss";
+import Desktop from "desktop";
+
+const App = () => {
+  return (
+    <Router>
+      <Switch>
+        <Route path="/" component={Desktop} />
+      </Switch>
+    </Router>
+  );
+};
+
+export default App;

src/desktop/desktop.scss

@@ -0,0 +1,6 @@
+.desktop{
+    height: 100%;
+    width: 100%;
+    // <a href='https://www.freepik.com/photos/abstract'>Abstract photo created by wirestock - www.freepik.com</a>
+    background-size: cover;
+}

src/desktop/index.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import Icon from "icons";
+
+import "./desktop.scss";
+
+const Desktop = () => {
+  return (
+    <div
+      style={{
+        backgroundImage: `url(${
+          require("display/wallpaper/default.jpg").default
+        })`,
+      }}
+      className="desktop"
+    >
+      <Icon draggable name="folder" type="DESKTOP" label="Applications" />
+    </div>
+  );
+};
+
+export default Desktop;

src/icons/icons.scss

@@ -0,0 +1,15 @@
+.icon {
+  position: relative;
+  cursor: pointer;
+  z-index: 40;
+}
+
+.icon__label {
+  color: var(--icon-text-color);
+  text-shadow: 2px 2px var(--icon-text-shadow);
+  margin: 0;
+}
+
+.icon__image {
+  -webkit-user-drag: none;
+}