From 02b8b68bc7a1a7e9ad78d808a509e225abe40f4f Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 31 Mar 2021 10:59:07 +0100 Subject: [PATCH] Add BBUI package to monorepo --- packages/bbui/.gitignore | 5 + packages/bbui/.svench/svench.css | 193 + packages/bbui/.svench/svench.js | 14 + packages/bbui/README.md | 42 + packages/bbui/package-lock.json | 11142 ++++++++++++++++ packages/bbui/package.json | 53 + packages/bbui/public/favicon.png | Bin 0 -> 3127 bytes packages/bbui/public/global.css | 0 packages/bbui/public/index.html | 29 + packages/bbui/rollup.config.js | 164 + .../bbui/src/Actions/ClickOutside.svench.svx | 30 + .../src/Actions/PositionDropdown.svench.svx | 81 + .../bbui/src/Actions/autoresize_textarea.js | 14 + packages/bbui/src/Actions/click_outside.js | 18 + .../bbui/src/Actions/position_dropdown.js | 66 + packages/bbui/src/Button/Button.svelte | 212 + packages/bbui/src/Button/Button.svench | 138 + packages/bbui/src/Button/Close.svelte | 59 + packages/bbui/src/Button/Close.svench | 36 + packages/bbui/src/Button/TextButton.svelte | 128 + packages/bbui/src/Button/TextButton.svench | 69 + .../bbui/src/DatePicker/DatePicker.svelte | 45 + .../bbui/src/DatePicker/DatePicker.svench | 17 + packages/bbui/src/Drawer/Drawer.svelte | 88 + packages/bbui/src/Drawer/Drawer.svench | 42 + .../bbui/src/DropdownMenu/DropdownMenu.svelte | 77 + .../bbui/src/DropdownMenu/DropdownMenu.svench | 161 + packages/bbui/src/Dropzone/Dropzone.svelte | 295 + packages/bbui/src/Dropzone/Dropzone.svench | 17 + packages/bbui/src/Dropzone/fileTypes.js | 5 + packages/bbui/src/Form/Checkbox.svelte | 140 + packages/bbui/src/Form/Checkbox.svench.svx | 67 + packages/bbui/src/Form/DataList.svelte | 158 + packages/bbui/src/Form/DataList.svench | 57 + packages/bbui/src/Form/Input.svelte | 190 + packages/bbui/src/Form/Input.svench | 62 + packages/bbui/src/Form/Multiselect.svelte | 324 + packages/bbui/src/Form/Multiselect.svench | 63 + packages/bbui/src/Form/Radio.svelte | 140 + packages/bbui/src/Form/Radio.svench.svx | 64 + packages/bbui/src/Form/RichText.svelte | 59 + packages/bbui/src/Form/RichText.svench.svx | 40 + packages/bbui/src/Form/Select.svelte | 95 + packages/bbui/src/Form/Select.svench | 62 + packages/bbui/src/Form/Slider.svelte | 88 + packages/bbui/src/Form/Slider.svench | 26 + packages/bbui/src/Form/TextArea.svelte | 132 + packages/bbui/src/Form/TextArea.svench | 30 + packages/bbui/src/Form/Toggle.svelte | 110 + packages/bbui/src/Form/Toggle.svench | 21 + packages/bbui/src/Icons/Contribution.svelte | 14 + packages/bbui/src/Icons/Icon.svelte | 34 + packages/bbui/src/Icons/Icon.svench | 109 + packages/bbui/src/Icons/icon-paths.js | 128 + packages/bbui/src/Links/Home.svelte | 50 + packages/bbui/src/Links/Home.svench | 19 + .../bbui/src/List/Items/DetailSummary.svelte | 85 + .../bbui/src/List/Items/DetailSummary.svench | 53 + packages/bbui/src/List/Search.svelte | 33 + packages/bbui/src/List/Search.svench | 8 + packages/bbui/src/Modal/Content.svelte | 17 + packages/bbui/src/Modal/CustomContent.svelte | 38 + packages/bbui/src/Modal/Modal.svelte | 116 + packages/bbui/src/Modal/Modal.svench | 117 + packages/bbui/src/Modal/ModalContent.svelte | 132 + packages/bbui/src/Modal/QuizModal.svelte | 54 + packages/bbui/src/Popover/Popover.svelte | 68 + packages/bbui/src/Popover/Popover.svench | 121 + packages/bbui/src/Spacer/Spacer.svelte | 49 + packages/bbui/src/Spacer/Spacer.svench | 51 + .../bbui/src/Stores/Notifications.svench.svx | 78 + packages/bbui/src/Stores/notifications.js | 52 + packages/bbui/src/Styleguide/Body.svelte | 72 + packages/bbui/src/Styleguide/Borders.svench | 175 + .../bbui/src/Styleguide/Budibase-logo.svelte | 68 + packages/bbui/src/Styleguide/Color.svench | 201 + packages/bbui/src/Styleguide/Heading.svelte | 74 + packages/bbui/src/Styleguide/Label.svelte | 69 + packages/bbui/src/Styleguide/Logo.svelte | 16 + packages/bbui/src/Styleguide/Logo.svench | 8 + packages/bbui/src/Styleguide/Spacing.svench | 191 + .../bbui/src/Styleguide/Typography.svench | 227 + packages/bbui/src/Switcher/Switcher.svelte | 47 + packages/bbui/src/Switcher/Switcher.svench | 27 + packages/bbui/src/context.js | 3 + packages/bbui/src/index.js | 47 + packages/bbui/src/index.svench.svx | 35 + packages/bbui/src/utils/buildStyle.js | 14 + packages/bbui/yarn.lock | 6636 +++++++++ 89 files changed, 24504 insertions(+) create mode 100644 packages/bbui/.gitignore create mode 100644 packages/bbui/.svench/svench.css create mode 100644 packages/bbui/.svench/svench.js create mode 100644 packages/bbui/README.md create mode 100644 packages/bbui/package-lock.json create mode 100644 packages/bbui/package.json create mode 100644 packages/bbui/public/favicon.png create mode 100644 packages/bbui/public/global.css create mode 100644 packages/bbui/public/index.html create mode 100644 packages/bbui/rollup.config.js create mode 100644 packages/bbui/src/Actions/ClickOutside.svench.svx create mode 100644 packages/bbui/src/Actions/PositionDropdown.svench.svx create mode 100644 packages/bbui/src/Actions/autoresize_textarea.js create mode 100644 packages/bbui/src/Actions/click_outside.js create mode 100644 packages/bbui/src/Actions/position_dropdown.js create mode 100644 packages/bbui/src/Button/Button.svelte create mode 100644 packages/bbui/src/Button/Button.svench create mode 100644 packages/bbui/src/Button/Close.svelte create mode 100644 packages/bbui/src/Button/Close.svench create mode 100644 packages/bbui/src/Button/TextButton.svelte create mode 100644 packages/bbui/src/Button/TextButton.svench create mode 100644 packages/bbui/src/DatePicker/DatePicker.svelte create mode 100644 packages/bbui/src/DatePicker/DatePicker.svench create mode 100644 packages/bbui/src/Drawer/Drawer.svelte create mode 100644 packages/bbui/src/Drawer/Drawer.svench create mode 100644 packages/bbui/src/DropdownMenu/DropdownMenu.svelte create mode 100644 packages/bbui/src/DropdownMenu/DropdownMenu.svench create mode 100644 packages/bbui/src/Dropzone/Dropzone.svelte create mode 100644 packages/bbui/src/Dropzone/Dropzone.svench create mode 100644 packages/bbui/src/Dropzone/fileTypes.js create mode 100644 packages/bbui/src/Form/Checkbox.svelte create mode 100644 packages/bbui/src/Form/Checkbox.svench.svx create mode 100644 packages/bbui/src/Form/DataList.svelte create mode 100644 packages/bbui/src/Form/DataList.svench create mode 100644 packages/bbui/src/Form/Input.svelte create mode 100644 packages/bbui/src/Form/Input.svench create mode 100644 packages/bbui/src/Form/Multiselect.svelte create mode 100644 packages/bbui/src/Form/Multiselect.svench create mode 100644 packages/bbui/src/Form/Radio.svelte create mode 100644 packages/bbui/src/Form/Radio.svench.svx create mode 100644 packages/bbui/src/Form/RichText.svelte create mode 100644 packages/bbui/src/Form/RichText.svench.svx create mode 100644 packages/bbui/src/Form/Select.svelte create mode 100644 packages/bbui/src/Form/Select.svench create mode 100644 packages/bbui/src/Form/Slider.svelte create mode 100644 packages/bbui/src/Form/Slider.svench create mode 100644 packages/bbui/src/Form/TextArea.svelte create mode 100644 packages/bbui/src/Form/TextArea.svench create mode 100644 packages/bbui/src/Form/Toggle.svelte create mode 100644 packages/bbui/src/Form/Toggle.svench create mode 100644 packages/bbui/src/Icons/Contribution.svelte create mode 100644 packages/bbui/src/Icons/Icon.svelte create mode 100644 packages/bbui/src/Icons/Icon.svench create mode 100644 packages/bbui/src/Icons/icon-paths.js create mode 100644 packages/bbui/src/Links/Home.svelte create mode 100644 packages/bbui/src/Links/Home.svench create mode 100644 packages/bbui/src/List/Items/DetailSummary.svelte create mode 100644 packages/bbui/src/List/Items/DetailSummary.svench create mode 100644 packages/bbui/src/List/Search.svelte create mode 100644 packages/bbui/src/List/Search.svench create mode 100644 packages/bbui/src/Modal/Content.svelte create mode 100644 packages/bbui/src/Modal/CustomContent.svelte create mode 100644 packages/bbui/src/Modal/Modal.svelte create mode 100644 packages/bbui/src/Modal/Modal.svench create mode 100644 packages/bbui/src/Modal/ModalContent.svelte create mode 100644 packages/bbui/src/Modal/QuizModal.svelte create mode 100644 packages/bbui/src/Popover/Popover.svelte create mode 100644 packages/bbui/src/Popover/Popover.svench create mode 100644 packages/bbui/src/Spacer/Spacer.svelte create mode 100644 packages/bbui/src/Spacer/Spacer.svench create mode 100644 packages/bbui/src/Stores/Notifications.svench.svx create mode 100644 packages/bbui/src/Stores/notifications.js create mode 100644 packages/bbui/src/Styleguide/Body.svelte create mode 100644 packages/bbui/src/Styleguide/Borders.svench create mode 100644 packages/bbui/src/Styleguide/Budibase-logo.svelte create mode 100644 packages/bbui/src/Styleguide/Color.svench create mode 100644 packages/bbui/src/Styleguide/Heading.svelte create mode 100644 packages/bbui/src/Styleguide/Label.svelte create mode 100644 packages/bbui/src/Styleguide/Logo.svelte create mode 100644 packages/bbui/src/Styleguide/Logo.svench create mode 100644 packages/bbui/src/Styleguide/Spacing.svench create mode 100644 packages/bbui/src/Styleguide/Typography.svench create mode 100644 packages/bbui/src/Switcher/Switcher.svelte create mode 100644 packages/bbui/src/Switcher/Switcher.svench create mode 100644 packages/bbui/src/context.js create mode 100644 packages/bbui/src/index.js create mode 100644 packages/bbui/src/index.svench.svx create mode 100644 packages/bbui/src/utils/buildStyle.js create mode 100644 packages/bbui/yarn.lock diff --git a/packages/bbui/.gitignore b/packages/bbui/.gitignore new file mode 100644 index 0000000000..f0a5039c33 --- /dev/null +++ b/packages/bbui/.gitignore @@ -0,0 +1,5 @@ +.DS_Store +node_modules +/dist/ +/public/svench/ +.idea \ No newline at end of file diff --git a/packages/bbui/.svench/svench.css b/packages/bbui/.svench/svench.css new file mode 100644 index 0000000000..ba3147cd5d --- /dev/null +++ b/packages/bbui/.svench/svench.css @@ -0,0 +1,193 @@ +.svench-content { + color: #666; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, "Roboto", + Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; +} + +h1.svench-content { + font-size: 2em; +} +h2.svench-content { + font-size: 1.66em; +} +h3.svench-content { + font-size: 1.33em; +} +h4.svench-content { + font-size: 1.33em; + font-weight: normal; +} +h5.svench-content { + font-size: 1em; + font-weight: bold; +} +h6.svench-content { + font-size: 1em; + font-weight: normal; + font-style: italic; +} + +:root { + --background: #ffffff; + --ink: #000000; + + --grey-1: #fafafa; + --grey-2: #f5f5f5; + --grey-3: #eeeeee; + --grey-4: #e0e0e0; + --grey-5: #bdbdbd; + --grey-6: #9e9e9e; + --grey-7: #757575; + --grey-8: #616161; + --grey-9: #424242; + + --blue-light: #f1f4fc; + --blue: #4285f4; + --blue-dark: #2f4c9b; + + --red-light: #ffe6e6; + --red: #e26d69; + --red-dark: #800400; + + --yellow-light: #fff7e6; + --yellow: #ffd26a; + --yellow-dark: #805900; + + --orange-light: #fff0e6; + --orange: #f0955a; + --orange-dark: #803300; + + --green-light: #e6ffeb; + --green: #84c991; + --green-dark: #008017; + + --purple-light: #e9e6ff; + --purple: #806fde; + --purple-dark: #130080; + + --rounded-small: 4px; + --rounded-medium: 8px; + --rounded-large: 16px; + + --font-normal: "Inter"; + --font-black: "Inter Black"; + --font-bold: "Inter Bold"; + --font-medium: "Inter Medium"; + --font-light: "Inter Light"; + --font-sans: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, "Inter", + "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", + "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --font-serif: "Georgia", Cambria, Times New Roman, Times, serif; + --font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", + monospace; + + font-size: 16px; + --font-size-xs: 0.75rem; + --font-size-s: 0.875rem; + --font-size-m: 1rem; + --font-size-l: 1.15rem; + --font-size-xl: 1.3rem; + + --heading-font-size-xs: 0.875rem; + --heading-font-size-s: 1.12rem; + --heading-font-size-m: 1.5rem; + --heading-font-size-l: 2.6rem; + --heading-font-size-xl: 3rem; + + --font-render: optimizeLegibility; + --font-smooth: antialiased; + + --spacing-xs: 0.25rem; + --spacing-s: 0.5rem; + --spacing-m: 0.75rem; + --spacing-l: 1rem; + --spacing-xl: 1.25rem; + + --layout-xs: 1.25rem; + --layout-s: 1.5rem; + --layout-m: 2rem; + --layout-l: 3rem; + --layout-xl: 4rem; + + --border-radius-xs: 0.125rem; + --border-radius-s: 0.35rem; + --border-radius-m: 0.5rem; + --border-radius-l: 1rem; + --border-radius-xl: 100rem; + + --border-black: 2px var(--ink) solid; + --border-dark: 2px var(--grey-7) solid; + --border-grey: 1px var(--grey-4) solid; + --border-grey-2: 2px var(--grey-4) solid; + --border-light: 1px var(--grey-3) solid; + --border-light-2: 2px var(--grey-3) solid; + --border-blue: 2px var(--blue) solid; + --border-transparent: 2px transparent solid; +} + +h1 { + font-size: 3rem; + font-family: var(--font-sans); + font-weight: 700; + text-rendering: var(--text-render); + -webkit-font-smoothing: var(--text-smooth); + color: var(--ink); +} + +h2 { + font-size: 2.25rem; + font-family: var(--font-sans); + font-weight: 600; + text-rendering: var(--text-render); + -webkit-font-smoothing: var(--text-smooth); + color: var(--ink); +} + +h3 { + font-size: 1.7rem; + font-family: var(--font-sans); + font-weight: 600; + text-rendering: var(--text-render); + -webkit-font-smoothing: var(--text-smooth); + color: var(--ink); +} + +h4 { + font-size: var(--font-size-xl); + font-family: var(--font-sans); + font-weight: 500; + text-rendering: var(--text-render); + -webkit-font-smoothing: var(--text-smooth); + color: var(--ink); +} + +h5 { + font-size: var(--font-size-l); + font-family: var(--font-sans); + font-weight: 500; + text-rendering: var(--text-render); + -webkit-font-smoothing: var(--text-smooth); + color: var(--ink); +} + +h6 { + font-size: var(--font-size-m); + font-family: var(--font-sans); + font-weight: 500; + text-rendering: var(--text-render); + -webkit-font-smoothing: var(--text-smooth); + color: var(--ink); +} + +p { + font-size: var(--font-size); + font-family: var(--font-sans); + font-weight: 400; + text-rendering: var(--text-render); + -webkit-font-smoothing: var(--text-smooth); + color: var(--ink); +} + +a { + text-decoration: none; +} diff --git a/packages/bbui/.svench/svench.js b/packages/bbui/.svench/svench.js new file mode 100644 index 0000000000..b761b7ddba --- /dev/null +++ b/packages/bbui/.svench/svench.js @@ -0,0 +1,14 @@ +import { start } from 'svench' + +// svench's theme +import 'svench/themes/default.css' +import 'svench/themes/default-markdown.css' + +// your own style +import './svench.css' + +start({ + // backgrounds: ['red', 'green', 'blue'], + // canvasBackground: 'red', + // background: 'blue', +}) diff --git a/packages/bbui/README.md b/packages/bbui/README.md new file mode 100644 index 0000000000..9b71a86cab --- /dev/null +++ b/packages/bbui/README.md @@ -0,0 +1,42 @@ +# Budibase bbui + +A package that handles all common components across the Budibase organisation. You can find the current live version [Here](http://bbui.budibase.com). + +## Install + +1. Clone +2. `npm install` +3. `npm run svench` + +(Note: yarn won't work!) + +## Example workflow to create a component + +1. Create a file: `Headline.svelte` +2. Create a Svench file: `Headline.svench` +3. Build component and add variants to the Svench file. +4. Once done, re-export the file in `src/index.js`. +5. Publish, update the package in the main project and profit. + +## Guidelines +### Making components + +1. Think about re-usability +2. Use the css custom properties (variables) that are in the css stylesheet. This makes it easy to tweak things later down the line. +3. Opt to forward events (` +``` \ No newline at end of file diff --git a/packages/bbui/src/Actions/PositionDropdown.svench.svx b/packages/bbui/src/Actions/PositionDropdown.svench.svx new file mode 100644 index 0000000000..695232535c --- /dev/null +++ b/packages/bbui/src/Actions/PositionDropdown.svench.svx @@ -0,0 +1,81 @@ + + +### Position Dropdown Action + +This action positions an element close to it's anchor, either above or below it, depending on the amount of space that exists. There's also an option to align the dropdown to the right instead of the left of the anchor. An example of how to use it follows: + +```html + + + + +{#if visible} + +
+ Some content here. +
+
+{/if} +``` + +Here are some components that currently use this action: + + + + {#each options as option} + + {/each} + + + + +
+ +
+ alert('Closed!')} + bind:this={dropdownLeft} + width="175px" + borderColor="#d1d1d1ff" + anchor={anchorLeft} + align="left"> +
    +
  • + + Edit +
  • +
  • + + Delete +
  • +
  • + + Sort A - Z +
  • +
  • + + Sort Z - A +
  • +
+
+
diff --git a/packages/bbui/src/Actions/autoresize_textarea.js b/packages/bbui/src/Actions/autoresize_textarea.js new file mode 100644 index 0000000000..227519dd20 --- /dev/null +++ b/packages/bbui/src/Actions/autoresize_textarea.js @@ -0,0 +1,14 @@ +function resize({ target }) { + target.style.height = "1px" + target.style.height = +target.scrollHeight + "px" +} + +export default function text_area_resize(el) { + resize({ target: el }) + el.style.overflow = "hidden" + el.addEventListener("input", resize) + + return { + destroy: () => el.removeEventListener("input", resize), + } +} diff --git a/packages/bbui/src/Actions/click_outside.js b/packages/bbui/src/Actions/click_outside.js new file mode 100644 index 0000000000..9257af5f5b --- /dev/null +++ b/packages/bbui/src/Actions/click_outside.js @@ -0,0 +1,18 @@ +export default function clickOutside(element, callbackFunction) { + function onClick(event) { + if (!element.contains(event.target)) { + callbackFunction() + } + } + + document.body.addEventListener("click", onClick, true) + + return { + update(newCallbackFunction) { + callbackFunction = newCallbackFunction + }, + destroy() { + document.body.removeEventListener("click", onClick, true) + }, + } +} diff --git a/packages/bbui/src/Actions/position_dropdown.js b/packages/bbui/src/Actions/position_dropdown.js new file mode 100644 index 0000000000..01d0ec4553 --- /dev/null +++ b/packages/bbui/src/Actions/position_dropdown.js @@ -0,0 +1,66 @@ +export default function positionDropdown(element, { anchor, align }) { + let positionSide = "top" + let maxHeight = 0 + let dimensions = getDimensions(anchor) + + function getDimensions() { + const { + bottom, + top: spaceAbove, + left, + width, + } = anchor.getBoundingClientRect() + const spaceBelow = window.innerHeight - bottom + const containerRect = element.getBoundingClientRect() + + let y + + if (spaceAbove > spaceBelow) { + positionSide = "bottom" + maxHeight = spaceAbove - 20 + y = window.innerHeight - spaceAbove + } else { + positionSide = "top" + y = bottom + maxHeight = spaceBelow - 20 + } + + return { + [positionSide]: y, + left, + width, + containerWidth: containerRect.width, + } + } + + function calcLeftPosition() { + return align === "right" + ? dimensions.left + dimensions.width - dimensions.containerWidth + : dimensions.left + } + + element.style.position = "absolute" + element.style.zIndex = "9999" + element.style.minWidth = `${dimensions.width}px` + element.style.maxHeight = `${maxHeight.toFixed(0)}px` + element.style.transformOrigin = `center ${positionSide}` + element.style[positionSide] = `${dimensions[positionSide]}px` + element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px` + + const resizeObserver = new ResizeObserver(entries => { + for (let entry of entries) { + dimensions = getDimensions() + element.style[positionSide] = `${dimensions[positionSide]}px` + element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px` + } + }) + + resizeObserver.observe(anchor) + resizeObserver.observe(element) + + return { + destroy() { + resizeObserver.disconnect() + }, + } +} diff --git a/packages/bbui/src/Button/Button.svelte b/packages/bbui/src/Button/Button.svelte new file mode 100644 index 0000000000..5e403287e1 --- /dev/null +++ b/packages/bbui/src/Button/Button.svelte @@ -0,0 +1,212 @@ + + +{#if href} + + + +{:else} + +{/if} + + diff --git a/packages/bbui/src/Button/Button.svench b/packages/bbui/src/Button/Button.svench new file mode 100644 index 0000000000..9149f76944 --- /dev/null +++ b/packages/bbui/src/Button/Button.svench @@ -0,0 +1,138 @@ + + + + + + + + + + + + + + + + + +
+
+ + + + + +
+
+ + + + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/bbui/src/Button/Close.svelte b/packages/bbui/src/Button/Close.svelte new file mode 100644 index 0000000000..f2b76cdb38 --- /dev/null +++ b/packages/bbui/src/Button/Close.svelte @@ -0,0 +1,59 @@ + + + + + diff --git a/packages/bbui/src/Button/Close.svench b/packages/bbui/src/Button/Close.svench new file mode 100644 index 0000000000..5bb7542b11 --- /dev/null +++ b/packages/bbui/src/Button/Close.svench @@ -0,0 +1,36 @@ + + + + + +
+ +
+
+ +
+ +
+
+ +
+ +
+
+ +
+ +
+
diff --git a/packages/bbui/src/Button/TextButton.svelte b/packages/bbui/src/Button/TextButton.svelte new file mode 100644 index 0000000000..351a2c45bf --- /dev/null +++ b/packages/bbui/src/Button/TextButton.svelte @@ -0,0 +1,128 @@ + + +{#if href} + +{:else} + +{/if} + + diff --git a/packages/bbui/src/Button/TextButton.svench b/packages/bbui/src/Button/TextButton.svench new file mode 100644 index 0000000000..e3c3477805 --- /dev/null +++ b/packages/bbui/src/Button/TextButton.svench @@ -0,0 +1,69 @@ + + + + + +
+ alert('Clicked!')}> + + Add View + + alert('Clicked!')}> + + Add Column + + alert('Clicked!')}> + + Add Row + + alert('Clicked!')}> + + Disabled Text Button + + alert('Clicked!')}> + + Active Calculation + +
+
+ + +
+ alert('Clicked!')}> + + Add View + + alert('Clicked!')}> + + Add Column + + alert('Clicked!')}> + + Add Row + + alert('Clicked!')}> + + Delete + + alert('Clicked!')}> + + Calculate + +
+
+ + +
+ This is a link +
+
diff --git a/packages/bbui/src/DatePicker/DatePicker.svelte b/packages/bbui/src/DatePicker/DatePicker.svelte new file mode 100644 index 0000000000..2f87a48a43 --- /dev/null +++ b/packages/bbui/src/DatePicker/DatePicker.svelte @@ -0,0 +1,45 @@ + + +
+ {#if label} + + {/if} + +
+ + diff --git a/packages/bbui/src/DatePicker/DatePicker.svench b/packages/bbui/src/DatePicker/DatePicker.svench new file mode 100644 index 0000000000..ed0d480a6f --- /dev/null +++ b/packages/bbui/src/DatePicker/DatePicker.svench @@ -0,0 +1,17 @@ + + + + + + + + + \ No newline at end of file diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte new file mode 100644 index 0000000000..2f0cc1b4f3 --- /dev/null +++ b/packages/bbui/src/Drawer/Drawer.svelte @@ -0,0 +1,88 @@ + + + + +{#if visible} + +
+
+
+
{title}
+ +
+
+ + +
+
+ +
+
+{/if} + + diff --git a/packages/bbui/src/Drawer/Drawer.svench b/packages/bbui/src/Drawer/Drawer.svench new file mode 100644 index 0000000000..9d652e06ff --- /dev/null +++ b/packages/bbui/src/Drawer/Drawer.svench @@ -0,0 +1,42 @@ + + + + + + + alert('You closed the drawer!')}> +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, + architecto assumenda! Quia harum hic numquam, soluta maiores facere + explicabo vero obcaecati voluptas, qui placeat ad, dolorem recusandae + labore quos? Nisi! +

+
+
+ + + alert('You closed the drawer!')}> + + + +
This describes the drawer!
+
Some content here
+
+
diff --git a/packages/bbui/src/DropdownMenu/DropdownMenu.svelte b/packages/bbui/src/DropdownMenu/DropdownMenu.svelte new file mode 100644 index 0000000000..decc5bb4e2 --- /dev/null +++ b/packages/bbui/src/DropdownMenu/DropdownMenu.svelte @@ -0,0 +1,77 @@ + + +{#if open} + + + +{/if} + + diff --git a/packages/bbui/src/DropdownMenu/DropdownMenu.svench b/packages/bbui/src/DropdownMenu/DropdownMenu.svench new file mode 100644 index 0000000000..af4e32db2e --- /dev/null +++ b/packages/bbui/src/DropdownMenu/DropdownMenu.svench @@ -0,0 +1,161 @@ + + + + + +
+ +
+ +
    +
  • Item 1
  • +
  • Item 2
  • +
  • Item 3
  • +
+
+
+ + +
+ +
+ +
    +
  • Item 1
  • +
  • Item 2
  • +
  • Item 3
  • +
+
+
+ + +
+ +
+ +
    +
  • + + Edit +
  • +
  • + + Delete +
  • +
  • + + Sort A - Z +
  • +
  • + + Sort Z - A +
  • +
+
+
+ +
+ +
+ +
    +
  • + + Edit +
  • +
  • + + Delete +
  • +
  • + + Sort A - Z +
  • +
  • + + Sort Z - A +
  • +
+
+
+ +
+ +
+ alert('Closed!')} + bind:this={dropdownLeft} + width="175px" + borderColor="#d1d1d1ff" + anchor={anchorLeft} + align="left"> +
    +
  • + + Edit +
  • +
  • + + Delete +
  • +
  • + + Sort A - Z +
  • +
  • + + Sort Z - A +
  • +
+
+
\ No newline at end of file diff --git a/packages/bbui/src/Dropzone/Dropzone.svelte b/packages/bbui/src/Dropzone/Dropzone.svelte new file mode 100644 index 0000000000..d025b9e14d --- /dev/null +++ b/packages/bbui/src/Dropzone/Dropzone.svelte @@ -0,0 +1,295 @@ + + +
+ {#if selectedImage} +
    +
  • +
    +
    + + {selectedImage.name} +
    +

    + {#if selectedImage.size <= BYTES_IN_MB} + {selectedImage.size / BYTES_IN_KB}KB + {:else}{selectedImage.size / BYTES_IN_MB}MB{/if} +

    +
    +
    + +
    + {#if selectedImageIdx !== 0} + + {/if} + + {#if selectedImageIdx !== files.length - 1} + + {/if} +
  • +
+ {/if} + + + +

Drop your files here

+ +
+ + diff --git a/packages/bbui/src/Dropzone/Dropzone.svench b/packages/bbui/src/Dropzone/Dropzone.svench new file mode 100644 index 0000000000..110195ab5a --- /dev/null +++ b/packages/bbui/src/Dropzone/Dropzone.svench @@ -0,0 +1,17 @@ + + + + + diff --git a/packages/bbui/src/Dropzone/fileTypes.js b/packages/bbui/src/Dropzone/fileTypes.js new file mode 100644 index 0000000000..1ebd85070b --- /dev/null +++ b/packages/bbui/src/Dropzone/fileTypes.js @@ -0,0 +1,5 @@ +export const FILE_TYPES = { + IMAGE: ["png", "tiff", "gif", "raw", "jpg", "jpeg", "svg"], + CODE: ["js", "rs", "py", "java", "rb", "hs", "yml"], + DOCUMENT: ["odf", "docx", "doc", "pdf", "csv"], +} diff --git a/packages/bbui/src/Form/Checkbox.svelte b/packages/bbui/src/Form/Checkbox.svelte new file mode 100644 index 0000000000..21d5450123 --- /dev/null +++ b/packages/bbui/src/Form/Checkbox.svelte @@ -0,0 +1,140 @@ + + +
+ +
+
+
+
+
+ +
+ + diff --git a/packages/bbui/src/Form/Checkbox.svench.svx b/packages/bbui/src/Form/Checkbox.svench.svx new file mode 100644 index 0000000000..b3246ec9d2 --- /dev/null +++ b/packages/bbui/src/Form/Checkbox.svench.svx @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + +## Multiple checkboxes +Use an array and an each block to use multiple checkboxes +```svelte + + +{#each menu as {text, checked}} + + + +{/each} +``` + + +
+ {#each menu as {text, checked}} + + + + {/each} +
+
+ + \ No newline at end of file diff --git a/packages/bbui/src/Form/DataList.svelte b/packages/bbui/src/Form/DataList.svelte new file mode 100644 index 0000000000..6f5855d86a --- /dev/null +++ b/packages/bbui/src/Form/DataList.svelte @@ -0,0 +1,158 @@ + + +{#if label} + +{/if} +
+ + + { + updateValue(e) + handleBlur(e) + }} + value={value || ''} + type="text" /> +
+ +
+
+ + diff --git a/packages/bbui/src/Form/DataList.svench b/packages/bbui/src/Form/DataList.svench new file mode 100644 index 0000000000..eea8294dea --- /dev/null +++ b/packages/bbui/src/Form/DataList.svench @@ -0,0 +1,57 @@ + + + + + {#each options as option} + + {/each} + + + + + + {#each options as option} + + {/each} + + + + + + {#each options as option} + + {/each} + + + + + + {#each options as option} + + {/each} + + + + + + {#each options as option} + + {/each} + + + + + + {#each options as option} + + {/each} + + + diff --git a/packages/bbui/src/Form/Input.svelte b/packages/bbui/src/Form/Input.svelte new file mode 100644 index 0000000000..e8afcffd36 --- /dev/null +++ b/packages/bbui/src/Form/Input.svelte @@ -0,0 +1,190 @@ + + +
+ {#if label || edit} +
+ {#if label} + + {/if} + {#if edit} +
+ + +
+ {/if} +
+ {/if} + + {#if error} +
{error}
+ {/if} +
+ + diff --git a/packages/bbui/src/Form/Input.svench b/packages/bbui/src/Form/Input.svench new file mode 100644 index 0000000000..1b95727a1a --- /dev/null +++ b/packages/bbui/src/Form/Input.svench @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/bbui/src/Form/Multiselect.svelte b/packages/bbui/src/Form/Multiselect.svelte new file mode 100644 index 0000000000..924fd4b2b5 --- /dev/null +++ b/packages/bbui/src/Form/Multiselect.svelte @@ -0,0 +1,324 @@ + + +{#if label} + +{/if} +
+
+
+ {#each selectedOptions as option} +
+ {option.name} +
remove(option.value)}> + + + +
+
+ {/each} + {#if !value || !value.length} + {#if placeholder && placeholder.length} +
{placeholder}
+ {:else} +
 
+ {/if} + {/if} +
+
+ + + + {#if optionsVisible} + +
    showOptions(false)} + transition:fly={{ duration: 200, y: 5 }} + on:mousedown|preventDefault={handleOptionMousedown}> + {#each options as option} +
  • + {option.name} +
  • + {/each} + {#if !options.length} +
  • No results
  • + {/if} +
+
+ {/if} +
+ + diff --git a/packages/bbui/src/Form/Multiselect.svench b/packages/bbui/src/Form/Multiselect.svench new file mode 100644 index 0000000000..86ad0de529 --- /dev/null +++ b/packages/bbui/src/Form/Multiselect.svench @@ -0,0 +1,63 @@ + + + + + {#each options as option} + + {/each} + + + + +
+ + {#each options as option} + + {/each} + +
+
+ + + + {#each options as option} + + {/each} + + + + + + {#each options as option} + + {/each} + + + + + + {#each options as option} + + {/each} + + + + + + {#each options as option} + + {/each} + + + + diff --git a/packages/bbui/src/Form/Radio.svelte b/packages/bbui/src/Form/Radio.svelte new file mode 100644 index 0000000000..b4a2637803 --- /dev/null +++ b/packages/bbui/src/Form/Radio.svelte @@ -0,0 +1,140 @@ + + +
+ +
+
+
+
+
+ +
+ + diff --git a/packages/bbui/src/Form/Radio.svench.svx b/packages/bbui/src/Form/Radio.svench.svx new file mode 100644 index 0000000000..20d3c58c99 --- /dev/null +++ b/packages/bbui/src/Form/Radio.svench.svx @@ -0,0 +1,64 @@ + + + ## Multiple checkboxes + Use an array and an each block to use the radio button. +```svelte + + +{#each menu as flavour} + +{/each} +``` + + + +
+ {#each menu as flavour} + + + + {/each} +
+
+ + +
+ {#each menu as flavour} + + + + {/each} +
+
+ + \ No newline at end of file diff --git a/packages/bbui/src/Form/RichText.svelte b/packages/bbui/src/Form/RichText.svelte new file mode 100644 index 0000000000..9552823389 --- /dev/null +++ b/packages/bbui/src/Form/RichText.svelte @@ -0,0 +1,59 @@ + + + + {#if mergedOptions.theme !== 'snow'} + + {/if} + + +
+
+
diff --git a/packages/bbui/src/Form/RichText.svench.svx b/packages/bbui/src/Form/RichText.svench.svx new file mode 100644 index 0000000000..0a0a858866 --- /dev/null +++ b/packages/bbui/src/Form/RichText.svench.svx @@ -0,0 +1,40 @@ + + +### Rich Text Component + +This component uses the QuillJS library to add Rich Text editing functionality. + +It exposes a content variable that you can bind to in order to get Markdown out of the component. + +As well as the content you can also pass in an option object that looks like so: + +```js +let options = { + modules: { + toolbar: [ + [{ header: [1, 2, 3, false] }], + ['bold', 'italic', 'underline', 'strike'] + ] + }, + placeholder: 'Type something...', + theme: 'snow' +} +``` + + + + + + + + + + + + diff --git a/packages/bbui/src/Form/Select.svelte b/packages/bbui/src/Form/Select.svelte new file mode 100644 index 0000000000..c245abd245 --- /dev/null +++ b/packages/bbui/src/Form/Select.svelte @@ -0,0 +1,95 @@ + + +
+ {#if label} + + {/if} +
+ +
+ +
+
+
+ + diff --git a/packages/bbui/src/Form/Select.svench b/packages/bbui/src/Form/Select.svench new file mode 100644 index 0000000000..750d7224ca --- /dev/null +++ b/packages/bbui/src/Form/Select.svench @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/bbui/src/Form/Slider.svelte b/packages/bbui/src/Form/Slider.svelte new file mode 100644 index 0000000000..c8a4c0122e --- /dev/null +++ b/packages/bbui/src/Form/Slider.svelte @@ -0,0 +1,88 @@ + + +
+ {#if label} + + {/if} +
+ {#if showRange && min != null}{min}{/if} + + {#if showRange && max != null}{max}{/if} +
+
+ + diff --git a/packages/bbui/src/Form/Slider.svench b/packages/bbui/src/Form/Slider.svench new file mode 100644 index 0000000000..7ed59f78b8 --- /dev/null +++ b/packages/bbui/src/Form/Slider.svench @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/bbui/src/Form/TextArea.svelte b/packages/bbui/src/Form/TextArea.svelte new file mode 100644 index 0000000000..1133a99127 --- /dev/null +++ b/packages/bbui/src/Form/TextArea.svelte @@ -0,0 +1,132 @@ + + +
+ {#if label || edit} +
+ {#if label} + + {/if} + {#if edit} +
+ + +
+ {/if} +
+ {/if} +