[skip ci] add front page, finish the workflow segment building

Signed-off-by: Daniel Maricic <daniel@woss.io>

.gitattributes

@@ -4,11 +4,11 @@ pnpm-lock.yaml               merge=text
 shrinkwrap.yaml              merge=binary
 npm-shrinkwrap.json          merge=binary
 yarn.lock                    merge=binary
-
 # Rush's JSON config files use JavaScript-style code comments.  The rule below prevents pedantic
 # syntax highlighters such as GitHub's from highlighting these comments as errors.  Your text editor
 # may also require a special configuration to allow comments in JSON.
 #
 # For more information, see this issue: https://github.com/microsoft/rushstack/issues/1088
 #
 *.json                       linguist-language=JSON-with-Comments
+*.png filter=lfs diff=lfs merge=lfs -text

.vscode/settings.json

@@ -11,6 +11,9 @@
   "[json]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
+  "[svelte]": {
+    "editor.defaultFormatter": "svelte.svelte-vscode"
+  },
   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
@@ -40,6 +43,7 @@
     "pnpm",
     "pnpx",
     "rehosted",
+    "remeda",
     "subsampling",
     "tailwind"
   ]

apps/app/.eslintrc.cjs

@@ -2,7 +2,7 @@ module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',
   extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
-  plugins: ['svelte3', '@typescript-eslint'],
+  plugins: ['svelte3', '@typescript-eslint', 'unused-imports', 'simple-import-sort'],
   ignorePatterns: ['*.cjs'],
   overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
 

apps/app/package.json

@@ -46,7 +46,8 @@
     "@tailwindcss/forms": "~0.5.0",
     "@tailwindcss/line-clamp": "~0.3.1",
     "@types/ramda": "~0.27.64",
-    "@anagolay/types": "workspace:*"
+    "@anagolay/types": "workspace:*",
+    "eslint-config-prettier": "~8.5.0"
   },
   "dependencies": {
     "drawflow": "~0.0.55",

apps/app/src/components/FrostBox.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  let classNames: string = '';
+  export { classNames as class };
+</script>
+
+<div
+  class={`${classNames} rounded-lg backdrop-blur-xl bg-white/25 shadow-lg border border-solid border-white/30 flex flex-1 justify-center align-middle items-center hover:bg-sky-700 transition duration-150 ease-in-out`}
+>
+  <slot />
+</div>
+<!-- 
+<style>
+  .frozen-glass-effect {
+    border-radius: 8px;
+    backdrop-filter: blur(20px);
+    background-color: rgba(255, 255, 255, 0.5);
+    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+  }
+</style> -->

apps/app/src/routes/__layout.svelte

@@ -1,10 +1,5 @@
 <script>
-  // import NavBar from '$src/components/NavBar.svelte';
-
   import '$src/app.css';
 </script>
 
-<div>
-  <!-- <NavBar /> -->
-  <slot />
-</div>
+<slot />

apps/app/src/routes/index.svelte

@@ -1,7 +1,38 @@
 <script lang="ts">
-  import Box from '$src/components/Box.svelte';
+  import FrostBox from '$src/components/FrostBox.svelte';
 </script>
 
-<div class="container bg-primary-content p-4">
-  <p class="prose">contentttt</p>
+<div class="container mx-auto px-4 flex flex-col h-screen p-4 bg-gradient-to-b from-blue-500 to-green-500">
+  <div class="flex flex-row flex-wrap justify-between h-72">
+    <FrostBox class="m-2 basis-72">
+      <a
+        href="https://anagolay.dev"
+        target="_blank"
+        class="text-2xl hover:text-white text-slate-800 h-full w-full flex justify-center align-middle items-center"
+      >
+        Anagolay Dev
+      </a>
+    </FrostBox>
+    <FrostBox class="m-2 basis-72 ">
+      <a
+        href="https://anagolay.network"
+        target="_blank"
+        class="text-2xl hover:text-white text-slate-800 h-full w-full flex justify-center align-middle items-center"
+      >
+        Anagolay Network
+      </a>
+    </FrostBox>
+    <FrostBox class="m-2 basis-72 ">
+      <a
+        href="https://kelp.digital"
+        target="_blank"
+        class="text-2xl hover:text-white text-slate-800 h-full w-full flex justify-center align-middle items-center"
+      >
+        Kelp.digital
+      </a>
+    </FrostBox>
+  </div>
+  <div class="flex justify-center align-middle items-center h-full">
+    <img class="w-72 h-72" src="anagolay-white-with-text.png" alt="Anagolay Logo" />
+  </div>
 </div>

apps/app/src/routes/workflow-builder/OperationNode.svelte

@@ -57,7 +57,7 @@
     <div class="my-1">
       <!-- https://svelte.dev/repl/d9da6330755049dab0aa2a0dcfa2d549?version=3.23.2 -->
       {#each [...op.data.config] as [key, value]}
-        <ul class="menu bg-base-100 ">
+        <ul class="menu bg-base-100">
           <span class="text-sm p-1">{key.toUpperCase()}</span>
 
           {#each op.data.config.get(key) as item}

apps/app/src/routes/workflow-builder/drawflow.css

@@ -26,13 +26,14 @@
   min-height: 40px;
   border-radius: 4px;
   border: 2px solid #000;
-  color: #000;
+  /* color: #000; */
   z-index: 2;
   padding: 15px;
 }
 
 .drawflow .drawflow-node.selected {
   background: theme('colors.accent');
+  color: theme('colors.white');
 }
 
 .drawflow .drawflow-node:hover {

apps/app/src/routes/workflow-builder/drawflow.svelte

@@ -36,10 +36,10 @@
       1, // always only one output
       ($addedNodesIds.length + 1) * 80,
       ($addedNodesIds.length + 1) * 40,
-      'bg-base-content',
+      'bg-base-300',
       {}, //{ inputs, output, groups, config },
-      `<div class="container">
-        <span class="w-fit text-base-100">${name}</span>
+      `<div class="">
+        <span class="w-fit text-lg">${name}</span>
       </div>`,
       false,
     ];

apps/app/src/routes/workflow-builder/index.svelte

@@ -4,21 +4,20 @@
 
 <script lang="ts">
   import { makeOps, type OperationsFixture } from '$src/fixtures/operations';
-  import { removeItemFromArray } from '$src/utils/utils';
   import { onMount } from 'svelte';
   import Drawflow from './drawflow.svelte';
   import { io, Socket } from 'socket.io-client';
   import { AnForWhat, type AnWorkflowData } from '@anagolay/types';
   import Navbar from './navbar.svelte';
   import { wsConnected } from '$src/stores';
   import Spinner from '$src/components/Spinner.svelte';
-  import type { NodeToAdd, Segment, SegmentData } from './interfaces';
   import { addedNodesIds, workflowGraph, workflowManifest } from './stores';
   import { last } from 'remeda';
   import OperationNode from './OperationNode.svelte';
+  import FrostBox from '$src/components/FrostBox.svelte';
 
   /**
-   * This is how we buidl the actual VALUES! i had to change the output of the types to be ES2020
+   * This is how we build the actual VALUES! i had to change the output of the types to be ES2020
    */
   const groupsAll = Object.entries(AnForWhat);
 
@@ -36,8 +35,8 @@
   let saveDisabled: boolean = true;
 
   function sendMessageToWs() {
-    console.log($workflowManifest);
-    socket.emit('continueWithWorkflow', workflowManifest);
+    socket.emit('continueWithWorkflow', $workflowManifest);
+    socket.disconnect();
   }
 
   /**
@@ -76,19 +75,14 @@
       wsConnected.set(true);
     });
 
-    socket.on('disconnected', () => {
-      socket.disconnect();
+    socket.on('disconnect', () => {
       wsConnected.set(false);
     });
 
     socket.on('connect_error', () => {
       console.error('socket error');
       socket.connect();
     });
-
-    socket.on('continueWithWorkflow', (message) => {
-      console.log(message);
-    });
   });
 
   // Bind the drawFlow.svelte to this bariable so we can use it
@@ -103,12 +97,19 @@
     console.log('this should open the modal');
   }
 
-  $: console.log('addedNodesIds', $addedNodesIds);
-  $: console.log('workflowGraph', $workflowGraph);
-  $: console.log('workflowManifest', $workflowManifest);
+  // make check when wen can enable save button
+  $: {
+    const { segments, groups, name, description } = $workflowManifest;
+    if (groups.length > 0 && name.length > 7 && description.length > 7 && segments.length > 0) {
+      const firstSegment = segments[0];
+      if (firstSegment.input.includes(-1) && firstSegment.sequence.length > 0) {
+        saveDisabled = false;
+      }
+    }
+  }
 </script>
 
-<div>
+<div class="container mx-auto">
   <Navbar />
   <button
     class="btn btn-warning"
@@ -118,9 +119,9 @@
       bindedDf.reset();
     }}>RESET STORES</button
   >
-  <div class=" flex flex-row min-h-screen">
+  <div class="flex flex-row min-h-screen">
     <aside
-      class=" w-64 md:shadow transform -translate-x-full md:translate-x-0 transition-transform duration-150 ease-in bg-base-content"
+      class="w-64 lg:shadow transform -translate-x-full md:translate-x-0 transition-transform duration-150 ease-in bg-base-content"
     >
       <div class="container px-4 my-2">
         <h2 class="text-base-300">Operations:</h2>
@@ -199,9 +200,9 @@
     </aside>
 
     <main
-      class="bg-base-300 h-max flex flex-col flex-grow -ml-64 md:ml-0 transition-all duration-150 ease-in"
+      class="bg-base-content flex flex-col flex-grow -ml-64 md:ml-0 transition-all duration-150 ease-in h-screen"
     >
-      <div class=" flex flex-col flex-grow">
+      <div class="flex flex-col flex-grow">
         <Drawflow bind:this={bindedDf} />
       </div>
     </main>

apps/app/src/routes/workflow-builder/interfaces.ts

@@ -34,7 +34,13 @@ export interface WorkflowNodeConnection {
    * An edge is a connection between two nodes. All edges are directed
    */
   edges: {
+    /**
+     * All the nodes FROM this node.
+     */
     out: string[];
+    /**
+     * All the nodes TO this node.
+     */
     in: string[];
   };
   /**

apps/app/src/routes/workflow-builder/navbar.svelte

@@ -42,13 +42,13 @@
       <label for="manifest-modal" class="btn modal-button">Show Manifest</label>
 
       <input type="checkbox" id="manifest-modal" class="modal-toggle" />
-      <div class="modal cursor-pointer">
+      <label for="manifest-modal" class="modal cursor-pointer">
         <div class="modal-box w-11/12 max-w-5xl">
           <label for="manifest-modal" class="btn btn-sm btn-circle absolute right-2 top-2">✕</label>
 
           <Code code={$workflowManifest} />
         </div>
-      </div>
+      </label>
     </div>
     <div class="w-10 rounded-full mx-1">
       {#if $wsConnected}