Component Panel - root level components display

package.json

@@ -2,6 +2,7 @@
   "name": "root",
   "private": true,
   "devDependencies": {
+    "@rollup/plugin-json": "^4.0.2",
     "babel-eslint": "^10.0.3",
     "eslint": "^6.8.0",
     "eslint-plugin-prettier": "^3.1.2",
@@ -17,7 +18,7 @@
     "build": "lerna run build",
     "initialise": "lerna run initialise",
     "publishdev": "lerna run publishdev",
-    "publishnpm":"yarn build && lerna publish",
+    "publishnpm": "yarn build && lerna publish",
     "clean": "lerna clean",
     "dev": "lerna run --parallel --stream dev:builder",
     "test": "lerna run test",

packages/builder/rollup.config.js

@@ -9,6 +9,8 @@ import builtins from "rollup-plugin-node-builtins"
 import nodeglobals from "rollup-plugin-node-globals"
 import copy from "rollup-plugin-copy"
 import replace from "rollup-plugin-replace"
+import json from '@rollup/plugin-json';
+
 
 import path from "path"
 
@@ -133,10 +135,16 @@ export default {
   plugins: [
     alias({
       entries: [
-        { find: "components", replacement: path.resolve(projectRootDir, 'src/components') },
+        {
-        { find: "builderStore", replacement: path.resolve(projectRootDir, 'src/builderStore') }
+          find: "components",
+          replacement: path.resolve(projectRootDir, "src/components"),
+        },
+        {
+          find: "builderStore",
+          replacement: path.resolve(projectRootDir, "src/builderStore"),
+        },
       ],
-      customResolver
+      customResolver,
     }),
     copy({
       targets: [
@@ -206,5 +214,6 @@ export default {
     // If we're building for production (npm run build
     // instead of npm run dev), minify
     production && terser(),
+    json(),
   ],
-}
+}

packages/builder/src/components/userInterface/ComponentItem.svelte

@@ -0,0 +1,70 @@
+<script>
+  export let icon = ""
+  export let name = ""
+  export let description = ""
+</script>
+
+<div class="component-item">
+  <div class="component-icon">
+    <i class={icon} />
+  </div>
+  <div class="component-text">
+    <div class="component-name">{name}</div>
+    <div class="component-description">
+      <p>{description}</p>
+    </div>
+  </div>
+</div>
+
+<style>
+  .component-item {
+    display: flex;
+    flex-direction: row;
+    padding: 10px 0px 8px 10px;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .component-item:hover {
+    background: #f5f5f5;
+    /* background: #fbfbfb; */
+    border-radius: 5px;
+  }
+
+  .component-icon {
+    flex: 0 0 40px;
+    /* background: #efe9e9; */
+    background: #f1f4fc;
+    height: 40px;
+    border-radius: 5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .component-text {
+    display: flex;
+    padding-left: 16px;
+    padding-top: 8px;
+    flex-direction: column;
+  }
+
+  .component-name {
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  .component-description {
+    font-size: 12px;
+    color: #808192;
+  }
+
+  p {
+    line-height: 15px;
+  }
+
+  i {
+    font-size: 28px;
+    /* color: #808192; */
+  }
+</style>

packages/builder/src/components/userInterface/ComponentSelectionList.svelte

@@ -21,7 +21,8 @@
     getIndexSchema,
     pipe,
   } from "components/common/core"
-
+  import ComponentItem from "./ComponentItem.svelte"
+  import panelStructure from "./temporaryPanelStructure.json"
   export let toggleTab
 
   let componentLibraries = []
@@ -115,86 +116,21 @@
   }
 
   $: componentLibrary = componentLibraries.find(l => l.libName === selectedLib)
+
+  $: componentItems =
+    panelStructure.categories[
+      panelStructure.categories.findIndex(i => i.name === "Basic")
+    ].components
 </script>
 
 <div class="root">
-  <Select on:change={e => (selectedLib = e.target.value)}>
-    {#each componentLibraries as lib}
-      <option value={lib.libName}>{lib.libName}</option>
-    {/each}
-  </Select>
 
-  <div class="library-container">
+  {#each componentItems as item}
-    <!-- <ul>
+    <ComponentItem
-      <li>
+      name={item.component}
-        <button
+      description={item.description}
-          class:selected={current_view === 'text'}
+      icon={item.icon} />
-          on:click={() => (current_view = 'text')}>
+  {/each}
-          <InputIcon />
-        </button>
-      </li>
-      <li>
-        <button
-          class:selected={current_view === 'layout'}
-          on:click={() => (current_view = 'layout')}>
-          <LayoutIcon />
-        </button>
-      </li>
-      <li>
-        <button
-          class:selected={current_view === 'media'}
-          on:click={() => (current_view = 'media')}>
-          <ImageIcon />
-        </button>
-      </li>
-    </ul> -->
-
-    {#if componentLibrary}
-      {#each generate_components_list(componentLibrary.components) as component}
-        <div class="component-container">
-          <div class="component" on:click={() => onComponentChosen(component)}>
-            <div class="name">{splitName(component.name).componentName}</div>
-            {#if (component.presets || templatesByComponent[component.name]) && component.name === selectedComponent}
-              <ul class="preset-menu">
-                {#if component.presets}
-                  <span>{splitName(component.name).componentName} Presets</span>
-                  {#each Object.keys(component.presets) as preset}
-                    <li
-                      on:click|stopPropagation={() => onComponentChosen(component, preset)}>
-                      {preset}
-                    </li>
-                  {/each}
-                {/if}
-                {#if templatesByComponent[component.name]}
-                  <span>
-                    {splitName(component.name).componentName} Templates
-                  </span>
-                  {#each templatesByComponent[component.name] as template}
-                    <li
-                      on:click|stopPropagation={() => onTemplateChosen(template)}>
-                      {template.description}
-                    </li>
-                  {/each}
-                {/if}
-              </ul>
-            {/if}
-          </div>
-          {#if component.presets || templatesByComponent[component.name]}
-            <Button
-              on:click={() => {
-                selectedComponent = selectedComponent ? null : component.name
-              }}>
-              <span
-                class="open-presets"
-                class:open={selectedComponent === component.name}>
-                ...
-              </span>
-            </Button>
-          {/if}
-        </div>
-      {/each}
-    {/if}
-  </div>
 
 </div>
 

packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte

@@ -90,6 +90,6 @@
     flex: 1 1 auto;
     height: 0px;
     overflow-y: auto;
-    padding: 0 20px 40px 20px;
+    padding: 0 5px 40px 10px;
   }
 </style>

packages/builder/src/components/userInterface/temporaryPanelStructure.json

@@ -3,12 +3,18 @@
     {
       "name": "Basic",
       "components": [
+        {
+          "component": "Container",
+          "description": "This component contains things within itself",
+          "icon": "ri-layout-row-fill",
+          "commonProps": {},
+          "type": []
+        },
         {
           "component": "Text",
-          "icon": "Text",
+          "description": "This is a simple text component",
+          "icon": "ri-t-box-fill",
           "commonProps": {
-            //common for all components
-            //Will include layout props
           },
           "type": [
             {
@@ -16,7 +22,6 @@
               "name": "Headline",
               "icon": "headline",
               "props": {
-                //props for headline
                 "type": {
                   "type": "options",
                   "options": [
@@ -32,10 +37,37 @@
               "name": "Paragraph",
               "icon": "paragraph",
               "props": {
-                //props for paragraph
               }
             }
           ]
+        },
+        {
+          "component": "Button",
+          "description": "A basic html button that is ready for styling",
+          "icon": "ri-radio-button-fill",
+          "commonProps": {},
+          "type": []
+        },
+        {
+          "component": "Icon",
+          "description": "A basic component for displaying icons",
+          "icon": "ri-sun-fill",
+          "commonProps": {},
+          "type": []
+        },
+        {
+          "component": "Avatar",
+          "description": "A basic component for rendering an avatar",
+          "icon": "ri-user-smile-fill",
+          "commonProps": {},
+          "type": []
+        },
+        {
+          "component": "Link",
+          "description": "A basic link component for internal and external links",
+          "icon": "ri-link",
+          "commonProps": {},
+          "type": []
         }
       ]
     }

yarn.lock

@@ -918,6 +918,27 @@
   dependencies:
     "@types/node" ">= 8"
 
+"@rollup/plugin-json@^4.0.2":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-json/-/plugin-json-4.0.2.tgz#482185ee36ac7dd21c346e2dbcc22ffed0c6f2d6"
+  integrity sha512-t4zJMc98BdH42mBuzjhQA7dKh0t4vMJlUka6Fz0c+iO5IVnWaEMiYBy1uBj9ruHZzXBW23IPDGL9oCzBkQ9Udg==
+  dependencies:
+    "@rollup/pluginutils" "^3.0.4"
+
+"@rollup/pluginutils@^3.0.4":
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.0.9.tgz#aa6adca2c45e5a1b950103a999e3cddfe49fd775"
+  integrity sha512-TLZavlfPAZYI7v33wQh4mTP6zojne14yok3DNSLcjoG/Hirxfkonn6icP5rrNWRn8nZsirJBFFpijVOJzkUHDg==
+  dependencies:
+    "@types/estree" "0.0.39"
+    estree-walker "^1.0.1"
+    micromatch "^4.0.2"
+
+"@types/estree@0.0.39":
+  version "0.0.39"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
+  integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
+
 "@types/node@>= 8":
   version "13.5.3"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-13.5.3.tgz#37f1f539b7535b9fb4ef77d59db1847a837b7f17"
@@ -1216,6 +1237,13 @@ braces@^2.3.1:
     split-string "^3.0.2"
     to-regex "^3.0.1"
 
+braces@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
 btoa-lite@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/btoa-lite/-/btoa-lite-1.0.0.tgz#337766da15801210fdd956c22e9c6891ab9d0337"
@@ -2065,6 +2093,11 @@ estree-walker@^0.6.1:
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
   integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==
 
+estree-walker@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
+  integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==
+
 esutils@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
@@ -2222,6 +2255,13 @@ fill-range@^4.0.0:
     repeat-string "^1.6.1"
     to-regex-range "^2.1.0"
 
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
 find-up@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
@@ -2930,6 +2970,11 @@ is-number@^3.0.0:
   dependencies:
     kind-of "^3.0.2"
 
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
 is-obj@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
@@ -3464,6 +3509,14 @@ micromatch@^3.1.10:
     snapdragon "^0.8.1"
     to-regex "^3.0.2"
 
+micromatch@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259"
+  integrity sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==
+  dependencies:
+    braces "^3.0.1"
+    picomatch "^2.0.5"
+
 mime-db@1.43.0:
   version "1.43.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.43.0.tgz#0a12e0502650e473d735535050e7c8f4eb4fae58"
@@ -4174,6 +4227,11 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
+picomatch@^2.0.5:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
+  integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
+
 pify@^2.0.0, pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -5141,6 +5199,13 @@ to-regex-range@^2.1.0:
     is-number "^3.0.0"
     repeat-string "^1.6.1"
 
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
 to-regex@^3.0.1, to-regex@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"