Merge branch 'simplified-component-panel' into simplified-component-panel-tabs

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",

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/ComponentTab/Item.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/ComponentTab/Tab.svelte

@@ -1,5 +1,10 @@
 <script>
+  import Item from "./Item.svelte"
   export let components
+
+  console.log("Components: ", components)
 </script>
 
-{#each components as component}{component.component}{/each}
+{#each components as { icon, name, description }}
+  <Item {icon} {name} {description} />
+{/each}

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

@@ -4,8 +4,17 @@ export default {
       name: 'Basic',
       components: [
         {
-          component: 'Text',
+          name: 'Container',
-          icon: 'Text',
+          description: 'This component contains things within itself',
+          icon: 'ri-layout-row-fill',
+          commonProps: {},
+          type: []
+        },
+        {
+          name: 'Text',
+          description: 'This is a simple text component',
+          icon: 'ri-t-box-fill',
+          commonProps: {},
           type: [
             {
               _component: '@budibase/standard-components/header',
@@ -25,66 +34,71 @@ export default {
             {
               _component: '@budibase/standard-components/text',
               name: 'Paragraph',
-              icon: 'paragraph'
+              icon: 'paragraph',
+              props: {}
             }
           ]
         },
         {
-          component: 'Button',
+          name: 'Button',
-          icon: 'Text',
+          description: 'A basic html button that is ready for styling',
-          type: [
+          icon: 'ri-radio-button-fill',
-            {
+          commonProps: {},
-              _component: '@budibase/standard-components/header',
+          type: []
-              name: 'Headline',
-              icon: 'headline',
-              props: {
-                type: {
-                  type: 'options',
-                  options: [
-                    'h1',
-                    'h2'
-                  ],
-                  'default': 'h1'
-                }
-              }
         },
         {
-              _component: '@budibase/standard-components/text',
+          name: 'Icon',
-              name: 'Paragraph',
+          description: 'A basic component for displaying icons',
-              icon: 'paragraph'
+          icon: 'ri-sun-fill',
-            }
+          commonProps: {},
-          ]
+          type: []
         },
+        {
+          name: 'Avatar',
+          description: 'A basic component for rendering an avatar',
+          icon: 'ri-user-smile-fill',
+          commonProps: {},
+          type: []
+        },
+        {
+          name: 'Link',
+          description: 'A basic link component for internal and external links',
+          icon: 'ri-link',
+          commonProps: {},
+          type: []
+        }
       ]
     },
     {
       name: 'Form',
       components: [
         {
-          component: 'Text',
+          name: 'Button',
-          icon: 'Text',
+          description: 'A basic html button that is ready for styling',
-          type: [
+          icon: 'ri-radio-button-fill',
-            {
+          commonProps: {},
-              _component: '@budibase/standard-components/header',
+          type: []
-              name: 'Headline',
-              icon: 'headline',
-              props: {
-                type: {
-                  type: 'options',
-                  options: [
-                    'h1',
-                    'h2'
-                  ],
-                  'default': 'h1'
-                }
-              }
         },
         {
-              _component: '@budibase/standard-components/text',
+          name: 'Icon',
-              name: 'Paragraph',
+          description: 'A basic component for displaying icons',
-              icon: 'paragraph'
+          icon: 'ri-sun-fill',
-            }
+          commonProps: {},
-          ]
+          type: []
+        },
+        {
+          name: 'Avatar',
+          description: 'A basic component for rendering an avatar',
+          icon: 'ri-user-smile-fill',
+          commonProps: {},
+          type: []
+        },
+        {
+          name: 'Link',
+          description: 'A basic link component for internal and external links',
+          icon: 'ri-link',
+          commonProps: {},
+          type: []
         }
       ]
     },
@@ -92,8 +106,17 @@ export default {
       name: 'Blocks',
       components: [
         {
-          component: 'Text',
+          name: 'Container',
-          icon: 'Text',
+          description: 'This component contains things within itself',
+          icon: 'ri-layout-row-fill',
+          commonProps: {},
+          type: []
+        },
+        {
+          name: 'Text',
+          description: 'This is a simple text component',
+          icon: 'ri-t-box-fill',
+          commonProps: {},
           type: [
             {
               _component: '@budibase/standard-components/header',
@@ -113,9 +136,38 @@ export default {
             {
               _component: '@budibase/standard-components/text',
               name: 'Paragraph',
-              icon: 'paragraph'
+              icon: 'paragraph',
+              props: {}
             }
           ]
+        },
+        {
+          name: 'Button',
+          description: 'A basic html button that is ready for styling',
+          icon: 'ri-radio-button-fill',
+          commonProps: {},
+          type: []
+        },
+        {
+          name: 'Icon',
+          description: 'A basic component for displaying icons',
+          icon: 'ri-sun-fill',
+          commonProps: {},
+          type: []
+        },
+        {
+          name: 'Avatar',
+          description: 'A basic component for rendering an avatar',
+          icon: 'ri-user-smile-fill',
+          commonProps: {},
+          type: []
+        },
+        {
+          name: 'Link',
+          description: 'A basic link component for internal and external links',
+          icon: 'ri-link',
+          commonProps: {},
+          type: []
         }
       ]
     },
@@ -123,8 +175,17 @@ export default {
       name: 'Data',
       components: [
         {
-          component: 'Text',
+          name: 'Container',
-          icon: 'Text',
+          description: 'This component contains things within itself',
+          icon: 'ri-layout-row-fill',
+          commonProps: {},
+          type: []
+        },
+        {
+          name: 'Text',
+          description: 'This is a simple text component',
+          icon: 'ri-t-box-fill',
+          commonProps: {},
           type: [
             {
               _component: '@budibase/standard-components/header',
@@ -144,9 +205,38 @@ export default {
             {
               _component: '@budibase/standard-components/text',
               name: 'Paragraph',
-              icon: 'paragraph'
+              icon: 'paragraph',
+              props: {}
             }
           ]
+        },
+        {
+          name: 'Button',
+          description: 'A basic html button that is ready for styling',
+          icon: 'ri-radio-button-fill',
+          commonProps: {},
+          type: []
+        },
+        {
+          name: 'Icon',
+          description: 'A basic component for displaying icons',
+          icon: 'ri-sun-fill',
+          commonProps: {},
+          type: []
+        },
+        {
+          name: 'Avatar',
+          description: 'A basic component for rendering an avatar',
+          icon: 'ri-user-smile-fill',
+          commonProps: {},
+          type: []
+        },
+        {
+          name: 'Link',
+          description: 'A basic link component for internal and external links',
+          icon: 'ri-link',
+          commonProps: {},
+          type: []
         }
       ]
     },

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

@@ -0,0 +1,75 @@
+{
+  "categories": [
+    {
+      "name": "Basic",
+      "components": [
+        {
+          "component": "Container",
+          "description": "This component contains things within itself",
+          "icon": "ri-layout-row-fill",
+          "commonProps": {},
+          "type": []
+        },
+        {
+          "component": "Text",
+          "description": "This is a simple text component",
+          "icon": "ri-t-box-fill",
+          "commonProps": {
+          },
+          "type": [
+            {
+              "_component": "@budibase/standard-components/header",
+              "name": "Headline",
+              "icon": "headline",
+              "props": {
+                "type": {
+                  "type": "options",
+                  "options": [
+                    "h1",
+                    "h2"
+                  ],
+                  "default": "h1"
+                }
+              }
+            },
+            {
+              "_component": "@budibase/standard-components/text",
+              "name": "Paragraph",
+              "icon": "paragraph",
+              "props": {
+              }
+            }
+          ]
+        },
+        {
+          "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"