MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
kevmodrome 2020-04-17 11:44:20 +02:00
parent 2892259fab ee7ae8ef01
commit f47135b064
8 changed files with 7941 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7563
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

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

15
packages/builder/rollup.config.js
View File

@ -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(),
],
}

70
packages/builder/src/components/userInterface/ComponentTab/Item.svelte Normal file
View File

@ -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>

7
packages/builder/src/components/userInterface/ComponentTab/Tab.svelte
View File

@ -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}

196
packages/builder/src/components/userInterface/temporaryPanelStructure.js
View File

@ -4,8 +4,17 @@ export default {
name: 'Basic',
components: [
{
component: 'Text',
icon: 'Text',
name: 'Container',
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',
icon: 'Text',
type: [
{
_component: '@budibase/standard-components/header',
name: 'Headline',
icon: 'headline',
props: {
type: {
type: 'options',
options: [
'h1',
'h2'
],
'default': 'h1'
}
}
name: 'Button',
description: 'A basic html button that is ready for styling',
icon: 'ri-radio-button-fill',
commonProps: {},
type: []
},
{
_component: '@budibase/standard-components/text',
name: 'Paragraph',
icon: 'paragraph'
}
]
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: []
}
]
},
{
name: 'Form',
components: [
{
component: 'Text',
icon: 'Text',
type: [
{
_component: '@budibase/standard-components/header',
name: 'Headline',
icon: 'headline',
props: {
type: {
type: 'options',
options: [
'h1',
'h2'
],
'default': 'h1'
}
}
name: 'Button',
description: 'A basic html button that is ready for styling',
icon: 'ri-radio-button-fill',
commonProps: {},
type: []
},
{
_component: '@budibase/standard-components/text',
name: 'Paragraph',
icon: 'paragraph'
}
]
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: []
}
]
},
@ -92,8 +106,17 @@ export default {
name: 'Blocks',
components: [
{
component: 'Text',
icon: 'Text',
name: 'Container',
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',
icon: 'Text',
name: 'Container',
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: []
}
]
},

75
packages/builder/src/components/userInterface/temporaryPanelStructure.json Normal file
View File

@ -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": []
}
]
}
]
}

65
yarn.lock
View File

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