From 10fe99346fe491a897fd5dc3c7a366d67d7fdd46 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 15 Apr 2021 11:50:56 +0100 Subject: [PATCH] Improve modal layout, improve modal button spacing, use rollup for building to expose multple BBUI entrypoints --- packages/bbui/package.json | 29 +- packages/bbui/rollup.config.js | 154 +- packages/bbui/src/Button/Button.svelte | 18 +- packages/bbui/src/Form/Field.svelte | 40 + packages/bbui/src/Form/FieldLabel.svelte | 26 + packages/bbui/src/Form/Input.svelte | 201 +- packages/bbui/src/Form/Multiselect.svelte | 341 +- packages/bbui/src/Form/Select.svelte | 116 +- .../bbui/src/Form/internal/Multiselect.svelte | 61 + packages/bbui/src/Form/internal/Picker.svelte | 109 + packages/bbui/src/Form/internal/Select.svelte | 42 + .../bbui/src/Form/internal/TextField.svelte | 60 + packages/bbui/src/Form/internal/index.js | 2 + packages/bbui/src/Modal/Modal.svelte | 54 +- packages/bbui/src/Modal/ModalContent.svelte | 77 +- packages/bbui/src/Table/Table.svelte | 10 +- packages/bbui/vite.config.js | 22 - packages/bbui/yarn.lock | 4284 +---------------- 18 files changed, 646 insertions(+), 5000 deletions(-) create mode 100644 packages/bbui/src/Form/Field.svelte create mode 100644 packages/bbui/src/Form/FieldLabel.svelte create mode 100644 packages/bbui/src/Form/internal/Multiselect.svelte create mode 100644 packages/bbui/src/Form/internal/Picker.svelte create mode 100644 packages/bbui/src/Form/internal/Select.svelte create mode 100644 packages/bbui/src/Form/internal/TextField.svelte create mode 100644 packages/bbui/src/Form/internal/index.js delete mode 100644 packages/bbui/vite.config.js diff --git a/packages/bbui/package.json b/packages/bbui/package.json index da42b72fcd..bd553a1ce6 100644 --- a/packages/bbui/package.json +++ b/packages/bbui/package.json @@ -2,38 +2,35 @@ "name": "@budibase/bbui", "description": "A UI solution used in the different Budibase projects.", "version": "1.58.13", + "license": "AGPL-3.0", "svelte": "src/index.js", "module": "dist/bbui.es.js", "exports": { ".": { "import": "./dist/bbui.es.js" }, + "./internal": { + "import": "./dist/internal.es.js" + }, "./package.json": "./package.json", "./dist/style.css": "./dist/style.css" }, "scripts": { - "dev:builder": "vite build", - "build": "vite build" + "dev:builder": "rollup -cw", + "build": "rollup -c" }, "devDependencies": { "@rollup/plugin-commonjs": "^16.0.0", "@rollup/plugin-json": "^4.1.0", - "@rollup/plugin-node-resolve": "^11.0.0", - "@sveltejs/vite-plugin-svelte": "^1.0.0-next.5", + "@rollup/plugin-node-resolve": "^11.2.1", "cross-env": "^7.0.2", "nollup": "^0.14.1", "postcss": "^8.2.9", - "rollup": "^2.34.0", - "rollup-plugin-copy": "^3.3.0", - "rollup-plugin-delete": "^1.2.0", - "rollup-plugin-hot": "^0.1.1", - "rollup-plugin-node-builtins": "^2.1.2", + "rollup": "^2.45.2", "rollup-plugin-postcss": "^4.0.0", - "rollup-plugin-svelte-hot": "^0.11.0", - "semantic-release": "^17.0.8", - "svelte": "^3.37.0", - "svench": "^0.0.10-7", - "vite": "^2.1.5" + "rollup-plugin-svelte": "^7.1.0", + "rollup-plugin-terser": "^7.0.2", + "svelte": "^3.37.0" }, "keywords": [ "svelte" @@ -50,20 +47,22 @@ "@spectrum-css/checkbox": "^3.0.1", "@spectrum-css/dialog": "^3.0.1", "@spectrum-css/divider": "^1.0.1", + "@spectrum-css/fieldlabel": "^3.0.1", "@spectrum-css/icon": "^3.0.1", "@spectrum-css/label": "^2.0.9", "@spectrum-css/link": "^3.1.1", "@spectrum-css/menu": "^3.0.1", "@spectrum-css/modal": "^3.0.1", + "@spectrum-css/picker": "^1.0.1", "@spectrum-css/popover": "^3.0.1", "@spectrum-css/table": "^3.0.1", + "@spectrum-css/textfield": "^3.0.1", "@spectrum-css/toast": "^3.0.1", "@spectrum-css/underlay": "^2.0.9", "@spectrum-css/vars": "^3.0.1", "dayjs": "^1.10.4", "markdown-it": "^12.0.4", "quill": "^1.3.7", - "sirv-cli": "^0.4.6", "svelte-flatpickr": "^2.4.0", "svelte-portal": "^1.0.0", "turndown": "^7.0.0" diff --git a/packages/bbui/rollup.config.js b/packages/bbui/rollup.config.js index 92b316cbe1..617df856b4 100644 --- a/packages/bbui/rollup.config.js +++ b/packages/bbui/rollup.config.js @@ -1,140 +1,30 @@ -import * as path from "path" -import svelte from "rollup-plugin-svelte-hot" +import svelte from "rollup-plugin-svelte" import resolve from "@rollup/plugin-node-resolve" import commonjs from "@rollup/plugin-commonjs" import json from "@rollup/plugin-json" -import copy from "rollup-plugin-copy" -import hmr from "rollup-plugin-hot" -import del from "rollup-plugin-delete" +import { terser } from "rollup-plugin-terser" import postcss from "rollup-plugin-postcss" -import { plugin as Svench } from "svench/rollup" -import builtins from "rollup-plugin-node-builtins" -const WATCH = !!process.env.ROLLUP_WATCH -const SVENCH = !!process.env.SVENCH -const HOT = WATCH -const PRODUCTION = !WATCH - -const svench = Svench({ - // The root dir that Svench will parse and watch. - // - // NOTE Watching the root of the project, to let Svench render *.md for us. - // - // NOTE By default, `node_modules` and `.git` dirs are ignored. This can be - // customized by passing a function to `ignore` option. Default ignore is: - // - // ignore: path => /(?:^|\/)(?:node_modules|\.git)\//.test(path), - // - dir: ".", - - // Make `src` dir a section (that is, it will always be "expanded" in the - // menu). - autoSections: ["src"], - - // Use custom index.html - index: { - source: "public/index.html", - }, - - extensions: [".svench", ".svench.svelte", ".svench.svx", ".md"], - - serve: WATCH && { - host: "0.0.0.0", - port: 4242, - public: "public", - nollup: "0.0.0.0:42421", +const makeConfig = ({ input, name }) => ({ + input, + output: { + sourcemap: true, + format: "esm", + file: `dist/${name}.es.js`, }, + plugins: [ + resolve(), + commonjs(), + svelte({ + emitCss: true, + }), + postcss(), + terser(), + json(), + ], }) -// NOTE configs are in function form to avoid instantiating plugins of the -// config that is not used for nothing (in particular, the HMR plugin launches -// a dev server on startup, this is not desired when just building for prod) -const configs = { - svench: () => ({ - input: ".svench/svench.js", - output: { - format: "es", - dir: "public/svench", - }, - plugins: [ - builtins(), - - // NOTE cleaning old builds is required to avoid serving stale static - // files from a previous build instead of in-memory files from the dev/hmr - // server - del({ - targets: "public/svench/*", - runOnce: true, - }), - - postcss({ - hot: HOT, - extract: path.resolve("public/svench/theme.css"), - sourceMap: true, - }), - - svench, - - svelte({ - dev: !PRODUCTION, - extensions: [".svelte", ".svench", ".svx", ".md"], - // Svench's "combined" preprocessor wraps both Mdsvex preprocessors - // (configured for Svench), and its own preprocessor (for static - // analysis -- eg extract source from views) - preprocess: svench.$.preprocess, - hot: HOT && { - optimistic: true, - noPreserveState: false, - }, - }), - - resolve({ browser: true }), - - commonjs(), - json(), - - HOT && - hmr({ - host: "0.0.0.0", - public: "public", - inMemory: true, - compatModuleHot: !HOT, // for terser - }), - ], - - watch: { - clearScreen: false, - // buildDelay is needed to ensure Svench's code (routes) generator will - // pick file changes before Rollup and prevent a double build (if Rollup - // first sees a change to src/Foo.svench, then to Svench's routes.js) - buildDelay: 100, - }, - }), - - lib: () => ({ - input: "src/index.js", - output: [{ file: "dist/bundle.mjs", format: "es" }], - plugins: [ - svelte({ - dev: !PRODUCTION, - extensions: [".svelte"], - emitCss: true, - }), - postcss(), - copy({ - targets: [ - { - src: ".svench/svench.css", - dest: "public", - rename: "global.css", - }, - ], - }), - resolve(), - commonjs(), - json(), - ], - }), -} - -export default configs[SVENCH ? "svench" : "lib"]() +export default [ + makeConfig({ input: "src/index.js", name: "bbui" }), + makeConfig({ input: "src/Form/internal/index.js", name: "internal" }), +] diff --git a/packages/bbui/src/Button/Button.svelte b/packages/bbui/src/Button/Button.svelte index b646f00c73..1148387a94 100644 --- a/packages/bbui/src/Button/Button.svelte +++ b/packages/bbui/src/Button/Button.svelte @@ -4,16 +4,15 @@ export let disabled = false /** @type {('S', 'M', 'L', 'XL')} Size of button */ - export let size = "M"; + export let size = "M" // Types - export let cta, primary, secondary, warning, overBackground; + export let cta, primary, secondary, warning, overBackground export let quiet = false - - export let icon = undefined; - + export let icon = undefined + diff --git a/packages/bbui/src/Form/Field.svelte b/packages/bbui/src/Form/Field.svelte new file mode 100644 index 0000000000..24131a9707 --- /dev/null +++ b/packages/bbui/src/Form/Field.svelte @@ -0,0 +1,40 @@ + + +
+ +
+ + {#if error} +
{error}
+ {/if} +
+
+ + diff --git a/packages/bbui/src/Form/FieldLabel.svelte b/packages/bbui/src/Form/FieldLabel.svelte new file mode 100644 index 0000000000..c4219f5581 --- /dev/null +++ b/packages/bbui/src/Form/FieldLabel.svelte @@ -0,0 +1,26 @@ + + + + + diff --git a/packages/bbui/src/Form/Input.svelte b/packages/bbui/src/Form/Input.svelte index e8afcffd36..db3774ce0a 100644 --- a/packages/bbui/src/Form/Input.svelte +++ b/packages/bbui/src/Form/Input.svelte @@ -1,190 +1,29 @@ -
- {#if label || edit} -
- {#if label} - - {/if} - {#if edit} -
- - -
- {/if} -
- {/if} - + - {#if error} -
{error}
- {/if} -
- - + on:change={onChange} /> + diff --git a/packages/bbui/src/Form/Multiselect.svelte b/packages/bbui/src/Form/Multiselect.svelte index 924fd4b2b5..f6c4c1f188 100644 --- a/packages/bbui/src/Form/Multiselect.svelte +++ b/packages/bbui/src/Form/Multiselect.svelte @@ -1,324 +1,33 @@ -{#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/Select.svelte b/packages/bbui/src/Form/Select.svelte index c245abd245..b0c1b9dc4d 100644 --- a/packages/bbui/src/Form/Select.svelte +++ b/packages/bbui/src/Form/Select.svelte @@ -1,95 +1,33 @@ -
- {#if label} - - {/if} -
- -
- -
-
-
- - + + + + + diff --git a/packages/bbui/src/Form/internal/index.js b/packages/bbui/src/Form/internal/index.js new file mode 100644 index 0000000000..ccbfb1d8bb --- /dev/null +++ b/packages/bbui/src/Form/internal/index.js @@ -0,0 +1,2 @@ +export { default as TextField } from "./TextField.svelte" +export { default as Select } from "./Select.svelte" diff --git a/packages/bbui/src/Modal/Modal.svelte b/packages/bbui/src/Modal/Modal.svelte index fe843fc1c3..94bd2b13f4 100644 --- a/packages/bbui/src/Modal/Modal.svelte +++ b/packages/bbui/src/Modal/Modal.svelte @@ -38,12 +38,56 @@ {#if visible} -
-
-
- +
+
-{/if} \ No newline at end of file +{/if} + + diff --git a/packages/bbui/src/Modal/ModalContent.svelte b/packages/bbui/src/Modal/ModalContent.svelte index c07bc57b43..f63b2450cf 100644 --- a/packages/bbui/src/Modal/ModalContent.svelte +++ b/packages/bbui/src/Modal/ModalContent.svelte @@ -29,36 +29,37 @@ } -