From 0935c08d5d9b90b5e0c72372af8ccb87b3954849 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 19 Jan 2021 11:49:52 +0000 Subject: [PATCH] Add all new definitions for non-chart components --- .../design/AppPreview/componentStructure.json | 51 ++-- .../design/temporaryPanelStructure.js | 244 ------------------ packages/standard-components/manifest.json | 199 +++++++++++++- packages/standard-components/src/index.js | 21 +- 4 files changed, 243 insertions(+), 272 deletions(-) diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json index 1359b20ce0..c882d94a0d 100644 --- a/packages/builder/src/components/design/AppPreview/componentStructure.json +++ b/packages/builder/src/components/design/AppPreview/componentStructure.json @@ -2,33 +2,54 @@ "container", "grid", "list", + "button", { - "name": "Cards", + "name": "Form", "icon": "ri-file-edit-line", "children": [ - "card", - "stackedlist" - ] - }, - { - "name": "Forms", - "icon": "ri-file-edit-line", - "children": [ - "form", + "dataform", + "dataformwide", "input", "richtext", "datepicker" ] }, - "button", - "text", - "link", + { + "name": "Card", + "icon": "ri-archive-drawer-line", + "children": [ + "stackedlist", + "card", + "cardhorizontal", + "cardstat" + ] + }, + { + "name": "Chart", + "icon": "ri-bar-chart-2-line", + "children": [] + }, + { + "name": "Elements", + "icon": "ri-paragraph", + "children": [ + "heading", + "text", + "image", + "link", + "icon", + "embed" + ] + }, { "name": "Other", - "icon": "ri-file-edit-line", + "icon": "ri-more-2-line", "children": [ "screenslot", - "navigation" + "navigation", + "login", + "rowdetail", + "newrow" ] } ] \ No newline at end of file diff --git a/packages/builder/src/components/design/temporaryPanelStructure.js b/packages/builder/src/components/design/temporaryPanelStructure.js index 5f4b433ee1..259b6fc116 100644 --- a/packages/builder/src/components/design/temporaryPanelStructure.js +++ b/packages/builder/src/components/design/temporaryPanelStructure.js @@ -1,132 +1,5 @@ export default { categories: [ - { - name: "Card", - icon: "ri-archive-drawer-line", - isCategory: true, - children: [ - { - _component: "@budibase/standard-components/cardhorizontal", - name: "Horizontal", - description: - "A basic card component that can contain content and actions.", - icon: "ri-layout-row-line", - children: [], - properties: { - design: { ...all }, - settings: [ - { - label: "Image", - key: "imageUrl", - control: Input, - placeholder: "Image", - }, - { - label: "Heading", - key: "heading", - control: Input, - placeholder: "Heading", - }, - { - label: "Description", - key: "description", - control: Input, - placeholder: "Description", - }, - { - label: "Subtext", - key: "subtext", - control: Input, - placeholder: "Subtext", - }, - { - label: "Link Text", - key: "linkText", - control: Input, - placeholder: "Link Text", - }, - { - label: "Link Url", - key: "linkUrl", - control: ScreenSelect, - placeholder: "Link URL", - }, - { - label: "Link Color", - key: "linkColor", - control: Colorpicker, - defaultValue: "#000", - }, - { - label: "Hover Color", - key: "linkHoverColor", - control: Colorpicker, - defaultValue: "#222", - }, - { - label: "Card Width", - key: "cardWidth", - control: OptionSelect, - options: [ - "24rem", - "28rem", - "32rem", - "40rem", - "48rem", - "60rem", - "100%", - ], - placeholder: "Card Height", - }, - { - label: "Image Width", - key: "imageWidth", - control: OptionSelect, - options: ["8rem", "12rem", "16rem"], - placeholder: "Image Width", - }, - { - label: "Image Height", - key: "imageHeight", - control: OptionSelect, - options: ["8rem", "12rem", "16rem", "auto"], - placeholder: "Image Height", - }, - ], - }, - }, - { - _component: "@budibase/standard-components/cardstat", - name: "Stat", - description: "A card component for displaying numbers.", - icon: "ri-dual-sim-2-line", - children: [], - properties: { - design: { ...all }, - settings: [ - { - label: "Title", - key: "title", - control: Input, - placeholder: "Total Revenue", - }, - { - label: "Value", - key: "value", - control: Input, - placeholder: "$1,981,983", - }, - { - label: "Label", - key: "label", - control: Input, - placeholder: "Stripe", - }, - ], - }, - }, - ], - }, { name: "Chart", icon: "ri-bar-chart-2-line", @@ -715,122 +588,5 @@ export default { }, ], }, - { - name: "Elements", - icon: "ri-paragraph", - isCategory: true, - children: [ - { - _component: "@budibase/standard-components/heading", - name: "Headline", - icon: "ri-heading", - description: "A component for displaying heading text", - properties: { - design: { ...all }, - settings: [ - { - key: "text", - label: "Text", - control: Input, - }, - { - key: "type", - label: "Type", - control: OptionSelect, - options: ["h1", "h2", "h3", "h4", "h5", "h6"], - }, - ], - }, - }, - - { - _component: "@budibase/standard-components/image", - name: "Image", - description: "A basic component for displaying images", - icon: "ri-image-line", - children: [], - properties: { - design: { ...all }, - settings: [{ label: "URL", key: "url", control: Input }], - }, - }, - { - _component: "@budibase/standard-components/icon", - name: "Icon", - description: "A basic component for displaying icons", - icon: "ri-sun-fill", - children: [], - properties: { - design: {}, - settings: [ - { label: "Icon", key: "icon", control: IconSelect }, - { - label: "Size", - key: "size", - control: OptionSelect, - defaultValue: "fa-lg", - options: [ - { value: "fa-xs", label: "xs" }, - { value: "fa-sm", label: "sm" }, - { value: "fa-lg", label: "lg" }, - { value: "fa-2x", label: "2x" }, - { value: "fa-3x", label: "3x" }, - { value: "fa-5x", label: "5x" }, - { value: "fa-7x", label: "7x" }, - { value: "fa-10x", label: "10x" }, - ], - }, - { - label: "Color", - key: "color", - control: Colorpicker, - defaultValue: "#000", - }, - ], - }, - }, - { - _component: "@budibase/standard-components/embed", - icon: "ri-code-line", - name: "Embed", - description: "Embed content from 3rd party sources", - properties: { - design: { - ...all, - }, - settings: [{ label: "Embed", key: "embed", control: Input }], - }, - }, - ], - }, - { - name: "Other", - icon: "ri-more-2-line", - isCategory: true, - children: [ - { - _component: "##builtin/screenslot", - name: "Screen Slot", - description: - "This component is a placeholder for the rendering of a screen within a layout.", - icon: "ri-crop-2-line", - properties: { design: { ...all } }, - commonProps: {}, - children: [], - }, - { - name: "New Row", - _component: "@budibase/standard-components/newrow", - description: - "Sets up a new row for creation, which can be used with {{ context }}, in children", - icon: "ri-profile-line", - properties: { - design: { ...all }, - settings: [{ label: "Table", key: "table", control: TableSelect }], - }, - children: [], - }, - ], - }, ], } diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json index 87c46dd3cb..4d00c0efc1 100644 --- a/packages/standard-components/manifest.json +++ b/packages/standard-components/manifest.json @@ -114,11 +114,16 @@ } ] }, - "form": { + "dataform": { "name": "Form", "icon": "ri-file-edit-line", "styleable": true }, + "dataformwide": { + "name": "Wide Form", + "icon": "ri-file-edit-line", + "styleable": true + }, "input": { "name": "Text Field", "description": "A textfield component that allows the user to input text.", @@ -270,6 +275,74 @@ } ] }, + "heading": { + "name": "Headline", + "icon": "ri-heading", + "description": "A component for displaying heading text", + "styleable": true, + "settings": [ + { + "type": "text", + "key": "text", + "label": "Text" + }, + { + "type": "select", + "key": "type", + "label": "Type", + "options": ["h1", "h2", "h3", "h4", "h5", "h6"], + "defaultValue": "h1" + } + ] + }, + "image": { + "name": "Image", + "description": "A basic component for displaying images", + "icon": "ri-image-line", + "styleable": true, + "settings": [ + { + "type": "text", + "label": "URL", + "key": "url" + } + ] + }, + "icon": { + "name": "Icon", + "description": "A basic component for displaying icons", + "icon": "ri-sun-fill", + "styleable": true, + "settings": [ + { + "type": "icon", + "label": "Icon", + "key": "icon" + }, + { + "type": "select", + "label": "Size", + "key": "size", + "defaultValue": "fa-lg", + "options": [ + { "value": "fa-xs", "label": "xs" }, + { "value": "fa-sm", "label": "sm" }, + { "value": "fa-lg", "label": "lg" }, + { "value": "fa-2x", "label": "2x" }, + { "value": "fa-3x", "label": "3x" }, + { "value": "fa-5x", "label": "5x" }, + { "value": "fa-7x", "label": "7x" }, + { "value": "fa-10x", "label": "10x" } + ] + }, + { + "type": "color", + "label": "Color", + "key": "color", + "defaultValue": "#000" + } + ] + }, "login": { "description": "A component that automatically generates a login screen for your app.", "icon": "ri-login-box-line", @@ -343,5 +416,129 @@ "key": "table" } ] + }, + "newrow": { + "name": "New Row", + "description": "Sets up a new row for creation, which can be used with {{ context }}, in children", + "icon": "ri-profile-line", + "hasChildren": true, + "styleable": true, + "settings": [ + { + "type": "text", + "label": "Table", + "key": "table" + } + ] + }, + "cardhorizontal": { + "name": "Horizontal Card", + "description": "A basic card component that can contain content and actions.", + "icon": "ri-layout-row-line", + "styleable": true, + "settings": [ + { + "type": "text", + "label": "Image", + "key": "imageUrl" + }, + { + "type": "text", + "label": "Heading", + "key": "heading" + }, + { + "type": "text", + "label": "Description", + "key": "description" + }, + { + "type": "text", + "label": "Subtext", + "key": "subtext" + }, + { + "type": "text", + "label": "Link Text", + "key": "linkText" + }, + { + "type": "screen", + "label": "Link URL", + "key": "linkUrl" + }, + { + "type": "color", + "label": "Link Color", + "key": "linkColor", + "defaultValue": "#000" + }, + { + "type": "color", + "label": "Hover Color", + "key": "linkHoverColor", + "defaultValue": "#222" + }, + { + "type": "select", + "label": "Card Width", + "key": "cardWidth", + "options": ["24rem", "28rem", "32rem", "40rem", "48rem", "60rem", "100%"], + "default": "32rem" + }, + { + "type": "select", + "label": "Image Width", + "key": "imageWidth", + "options": ["auto", "8rem", "12rem", "16rem"], + "defaultValue": "8rem" + }, + { + "type": "select", + "label": "Image Height", + "key": "imageHeight", + "options": ["auto", "8rem", "12rem", "16rem", "auto"], + "defaultValue": "auto" + } + ] + }, + "cardstat": { + "name": "Stat Card", + "description": "A card component for displaying numbers.", + "icon": "ri-dual-sim-2-line", + "styleable": true, + "settings": [ + { + "type": "text", + "label": "Title", + "key": "title", + "placeholder": "Total Revenue" + }, + { + "type": "text", + "label": "Value", + "key": "value", + "placeholder": "$1,981,983" + }, + { + "type": "text", + "label": "Label", + "key": "label", + "placeholder": "Stripe" + } + ] + }, + "embed": { + "name": "Embed", + "icon": "ri-code-line", + "description": "Embed content from 3rd party sources", + "styleable": true, + "settings": [ + { + "type": "text", + "label": "Embed", + "key": "embed" + } + ] } } diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js index f85f0ae306..be2fbf7878 100644 --- a/packages/standard-components/src/index.js +++ b/packages/standard-components/src/index.js @@ -1,10 +1,6 @@ import "@budibase/bbui/dist/bbui.css" import "flatpickr/dist/flatpickr.css" -import "@spectrum-css/vars/dist/spectrum-global.css" -import "@spectrum-css/vars/dist/spectrum-medium.css" -import "@spectrum-css/vars/dist/spectrum-light.css" - export { default as container } from "./Container.svelte" export { default as grid } from "./grid/Component.svelte" export { default as screenslot } from "./ScreenSlot.svelte" @@ -14,19 +10,20 @@ export { default as richtext } from "./RichText.svelte" export { default as list } from "./List.svelte" export { default as stackedlist } from "./StackedList.svelte" export { default as card } from "./Card.svelte" -export { default as form } from "./DataFormWide.svelte" +export { default as dataform } from "./DataForm.svelte" +export { default as dataformwide } from "./DataFormWide.svelte" export { default as datepicker } from "./DatePicker.svelte" export { default as text } from "./Text.svelte" export { default as login } from "./Login.svelte" export { default as navigation } from "./Navigation.svelte" export { default as link } from "./Link.svelte" export { default as rowdetail } from "./RowDetail.svelte" +export { default as heading } from "./Heading.svelte" +export { default as image } from "./Image.svelte" +export { default as embed } from "./Embed.svelte" +export { default as cardhorizontal } from "./CardHorizontal.svelte" +export { default as cardstat } from "./CardStat.svelte" +export { default as newrow } from "./NewRow.svelte" +export { default as icon } from "./Icon.svelte" -// export { default as heading } from "./Heading.svelte" -// export { default as image } from "./Image.svelte" -// export { default as embed } from "./Embed.svelte" -// export { default as cardhorizontal } from "./CardHorizontal.svelte" -// export { default as cardstat } from "./CardStat.svelte" -// export { default as newrow } from "./NewRow.svelte" -// export { default as icon } from "./Icon.svelte" // export * from "./charts"