New Welcome screen

hepsiburada · Jun 15, 2022 · 2d105e8 · 2d105e8
1 parent a70e8d6
commit 2d105e8
Show file tree

Hide file tree

Showing 5 changed files with 458 additions and 214 deletions.
diff --git a/src/universal/partials/Welcome/PartialCards.js b/src/universal/partials/Welcome/PartialCards.js
@@ -0,0 +1,70 @@
+import React from 'react';
+import groupBy from 'lodash/groupBy';
+import ReactDOMServer from 'react-dom/server';
+import { ServerStyleSheet } from 'styled-components';
+
+import partials from './partials';
+const STATUS_COLOR = {
+  live: '#8dc63f',
+  dev: '#FF6000',
+  page: '#00abff',
+  1: '#9b59b6',
+  2: '#c0392b',
+  3: '#16a085'
+};
+
+const sheet = new ServerStyleSheet();
+
+const Welcome = () => {
+  const { live = [], dev = [], page = [], ...others } = groupBy(partials, item => item.status);
+
+  const renderItem = ({ item, status, title }) => (
+    <a
+      href={item.previewUrl ? item.previewUrl : `${item.url}?preview`}
+      target="_blank"
+      className="link"
+    >
+      <div className="card">
+        <div className="card-header">
+          <div className="badge" style={{ backgroundColor: STATUS_COLOR[status] }}>
+            {title}
+          </div>
+        </div>
+        <div className="card-title">{item.name}</div>
+        <div className="card-subtitle">
+          {status === 'page' ? 'Multiple partials' : 'Single partial'}
+        </div>
+        <button className="url-button detail-button">{item.previewUrl || item.url}</button>
+      </div>
+    </a>
+  );
+
+  const renderGroup = ({ title, data, status }) => {
+    return (
+      <div className="group">
+        <div className="group-content">
+          <div className="group-title">
+            {title.toUpperCase()} ({data.length})
+          </div>
+        </div>
+        <div className="cards">{data.map(item => renderItem({ item, status, title }))}</div>
+      </div>
+    );
+  };
+
+  return (
+    <div>
+      {page.length > 0 && renderGroup({ title: 'page', data: page, status: 'page' })}
+      {live.length > 0 && renderGroup({ title: 'live', data: live, status: 'live' })}
+      {dev.length > 0 && renderGroup({ title: 'dev', data: dev, status: 'dev' })}
+      {Object.entries(others).map((entity, index) => {
+        const [key, data] = entity;
+        return renderGroup({ title: key, data, status: index + 1 });
+      })}
+    </div>
+  );
+};
+export default ReactDOMServer.renderToString(sheet.collectStyles(<Welcome />));
+const styleTags = sheet.getStyleTags();
+
+export { styleTags };
diff --git a/src/universal/partials/Welcome/PartialList.js b/src/universal/partials/Welcome/PartialList.js
diff --git a/src/universal/partials/Welcome/Welcome.js b/src/universal/partials/Welcome/Welcome.js
@@ -1,28 +1,77 @@
-import PartialList, { styleTags } from './PartialList';
+import PartialCards from './PartialCards';
+import welcomeStyle from './welcomeStyle';
+
+import voltranConfig from '../../../../voltran.config';
 
 export default () => {
   return `
     <!doctype html>
       <head>
         <title>Welcome</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <style>
-          * {
-            box-sizing: border-box;
-          }
-          body {
-            background: #f5f5f5;
-            margin: 0 auto;
-            padding: 10px;
-            font-family: 'Lato', sans-serif;
-            text-shadow: 0 0 1px rgba(255, 255, 255, 0.004);
-            font-size: 100%;
-            font-weight: 400;
-          }
-        </style>
-        ${styleTags}
+        ${welcomeStyle()}
       </head>
-      <body>${PartialList}</body>
+      <body>
+        <div class="container">
+            <div class="header">
+              <div class="logo">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="transform: rotate(180deg);">
+                  <path
+                    xmlns="http://www.w3.org/2000/svg"
+                    d="M512 503.5H381.7a48 48 0 01-45.3-32.1L265 268.1l-9-25.5 2.7-124.6L338.2 8.5l23.5 67.1L512 503.5z"
+                    fill="#0473ff"
+                    data-original="#28b446"
+                  />
+                  <path
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="#0473ff"
+                    data-original="#219b38"
+                    d="M361.7 75.6L265 268.1l-9-25.5 2.7-124.6L338.2 8.5z"
+                  />
+                  <path
+                    xmlns="http://www.w3.org/2000/svg"
+                    d="M338.2 8.5l-82.2 234-80.4 228.9a48 48 0 01-45.3 32.1H0l173.8-495h164.4z"
+                    fill="#0473ff"
+                    data-original="#518ef8"
+                  />
+                </svg>
+               ${voltranConfig.prefix} MikroFrontend Interface
+              <div class="settings">
+                <div class="dark-light">
+                  <svg
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    fill="none"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
+                  </svg>
+                </div>
+              </div>
+            </div>
+            </div>
+            <div class="wrapper">
+              <div class="main-container">
+                ${PartialCards}
+              </div>
+            </div>
+        </div>
+        <script>
+        const toggleButton = document.querySelector(".dark-light");
+        let theme = localStorage.getItem("voltran-welcome-theme");
+
+        if(theme === 'dark-mode'){
+           document.body.classList.toggle("dark-mode");
+        }
+
+        toggleButton.addEventListener("click", () => {
+          document.body.classList.toggle("dark-mode");
+          localStorage.setItem("voltran-welcome-theme", document.body.classList.value);
+        });
+        </script>
+      </body>
     </html>
   `;
 };
diff --git a/src/universal/partials/Welcome/styled.js b/src/universal/partials/Welcome/styled.js