Merge standard-components into the client library

packages/client/package.json

@@ -11,7 +11,8 @@
       "import": "./dist/budibase-client.js",
       "require": "./dist/budibase-client.js"
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./manifest.json": "./manifest.json"
   },
   "scripts": {
     "build": "rollup -c",
@@ -19,15 +20,25 @@
   },
   "dependencies": {
     "@budibase/bbui": "^0.9.117-alpha.2",
-    "@budibase/standard-components": "^0.9.117-alpha.2",
     "@budibase/string-templates": "^0.9.117-alpha.2",
     "regexparam": "^1.3.0",
     "shortid": "^2.2.15",
     "svelte-spa-router": "^3.0.5"
   },
   "devDependencies": {
+    "@budibase/bbui": "^0.9.117-alpha.2",
+    "@rollup/plugin-alias": "^3.1.5",
     "@rollup/plugin-commonjs": "^18.0.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
+    "@spectrum-css/button": "^3.0.3",
+    "@spectrum-css/card": "^3.0.3",
+    "@spectrum-css/divider": "^1.0.3",
+    "@spectrum-css/link": "^3.1.3",
+    "@spectrum-css/page": "^3.0.1",
+    "@spectrum-css/typography": "^3.0.2",
+    "@spectrum-css/vars": "^3.0.1",
+    "apexcharts": "^3.22.1",
+    "dayjs": "^1.10.5",
     "fs-extra": "^8.1.0",
     "jsdom": "^16.0.1",
     "postcss": "^8.2.10",
@@ -39,7 +50,9 @@
     "rollup-plugin-svelte": "^7.1.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-terser": "^7.0.2",
-    "svelte": "^3.38.2"
+    "svelte": "^3.38.2",
+    "svelte-apexcharts": "^1.0.2",
+    "svelte-flatpickr": "^3.1.0"
   },
   "gitHead": "d1836a898cab3f8ab80ee6d8f42be1a9eed7dcdc"
 }

packages/client/rollup.config.js

@@ -1,5 +1,6 @@
 import commonjs from "@rollup/plugin-commonjs"
 import resolve from "@rollup/plugin-node-resolve"
+import alias from "@rollup/plugin-alias"
 import svelte from "rollup-plugin-svelte"
 import { terser } from "rollup-plugin-terser"
 import postcss from "rollup-plugin-postcss"
@@ -7,6 +8,7 @@ import svg from "rollup-plugin-svg"
 import json from "rollup-plugin-json"
 import builtins from "rollup-plugin-node-builtins"
 import globals from "rollup-plugin-node-globals"
+import path from "path"
 
 const production = !process.env.ROLLUP_WATCH
 const ignoredWarnings = [
@@ -26,6 +28,38 @@ export default {
     },
   ],
   plugins: [
+    alias({
+      entries: [
+        {
+          find: "manifest.json",
+          replacement: path.resolve("./manifest.json"),
+        },
+        {
+          find: "api",
+          replacement: path.resolve("./src/api"),
+        },
+        {
+          find: "components",
+          replacement: path.resolve("./src/components"),
+        },
+        {
+          find: "stores",
+          replacement: path.resolve("./src/stores"),
+        },
+        {
+          find: "utils",
+          replacement: path.resolve("./src/utils"),
+        },
+        {
+          find: "constants",
+          replacement: path.resolve("./src/constants"),
+        },
+        {
+          find: "sdk",
+          replacement: path.resolve("./src/sdk"),
+        },
+      ],
+    }),
     svelte({
       emitCss: true,
       onwarn: (warning, handler) => {

packages/client/src/api/api.js

@@ -1,5 +1,5 @@
-import { notificationStore } from "../store"
+import { notificationStore } from "stores"
-import { ApiVersion } from "../constants"
+import { ApiVersion } from "constants"
 
 /**
  * API cache for cached request responses.

packages/client/src/api/automations.js

@@ -1,5 +1,6 @@
-import { notificationStore } from "../store/notification"
+import { notificationStore } from "stores/notification"
 import API from "./api"
+
 /**
  * Executes an automation. Must have "App Action" trigger.
  */

packages/client/src/api/queries.js

@@ -1,4 +1,4 @@
-import { notificationStore, dataSourceStore } from "../store"
+import { notificationStore, dataSourceStore } from "stores"
 import API from "./api"
 
 /**

packages/client/src/api/rows.js

@@ -1,4 +1,4 @@
-import { notificationStore, dataSourceStore } from "../store"
+import { notificationStore, dataSourceStore } from "stores"
 import API from "./api"
 import { fetchTableDefinition } from "./tables"
 

packages/client/src/components/ClientApp.svelte

@@ -1,11 +1,9 @@
 <script>
   import { writable } from "svelte/store"
   import { setContext, onMount } from "svelte"
+  import { Layout, Heading, Body } from "@budibase/bbui"
   import Component from "./Component.svelte"
-  import NotificationDisplay from "./NotificationDisplay.svelte"
+  import SDK from "sdk"
-  import ConfirmationDisplay from "./ConfirmationDisplay.svelte"
-  import PeekScreenDisplay from "./PeekScreenDisplay.svelte"
-  import SDK from "../sdk"
   import {
     createContextStore,
     initialise,
@@ -14,14 +12,16 @@
     routeStore,
     builderStore,
     appStore,
-  } from "../store"
+  } from "stores"
-  import SettingsBar from "./preview/SettingsBar.svelte"
+  import NotificationDisplay from "components/overlay/NotificationDisplay.svelte"
-  import SelectionIndicator from "./preview/SelectionIndicator.svelte"
+  import ConfirmationDisplay from "components/overlay/ConfirmationDisplay.svelte"
-  import HoverIndicator from "./preview/HoverIndicator.svelte"
+  import PeekScreenDisplay from "components/overlay/PeekScreenDisplay.svelte"
-  import { Layout, Heading, Body } from "@budibase/bbui"
+  import UserBindingsProvider from "components/context/UserBindingsProvider.svelte"
+  import DeviceBindingsProvider from "components/context/DeviceBindingsProvider.svelte"
+  import SettingsBar from "components/preview/SettingsBar.svelte"
+  import SelectionIndicator from "components/preview/SelectionIndicator.svelte"
+  import HoverIndicator from "components/preview/HoverIndicator.svelte"
   import ErrorSVG from "../../../builder/assets/error.svg"
-  import UserBindingsProvider from "./UserBindingsProvider.svelte"
-  import DeviceBindingsProvider from "./DeviceBindingsProvider.svelte"
 
   // Provide contexts
   setContext("sdk", SDK)

packages/client/src/components/Component.svelte

@@ -1,17 +1,14 @@
 <script>
   import { getContext, setContext } from "svelte"
   import { writable, get } from "svelte/store"
-  import * as ComponentLibrary from "@budibase/standard-components"
+  import * as AppComponents from "components/app"
   import Router from "./Router.svelte"
-  import { enrichProps, propsAreSame } from "../utils/componentProps"
+  import { enrichProps, propsAreSame } from "utils/componentProps"
-  import { builderStore } from "../store"
+  import { builderStore } from "stores"
-  import { hashString } from "../utils/hash"
+  import { hashString } from "utils/helpers"
-  import Manifest from "@budibase/standard-components/manifest.json"
+  import Manifest from "manifest.json"
-  import { Placeholder } from "@budibase/standard-components"
+  import { getActiveConditions, reduceConditionActions } from "utils/conditions"
-  import {
+  import Placeholder from "components/app/Placeholder.svelte"
-    getActiveConditions,
-    reduceConditionActions,
-  } from "../utils/conditions"
 
   export let instance = {}
 
@@ -95,7 +92,7 @@
     if (name === "screenslot" && $builderStore.previewType !== "layout") {
       return Router
     }
-    return ComponentLibrary[name]
+    return AppComponents[name]
   }
 
   const getComponentDefinition = component => {

packages/client/src/components/Router.svelte

@@ -1,7 +1,7 @@
 <script>
   import { setContext, getContext } from "svelte"
   import Router, { querystring } from "svelte-spa-router"
-  import { routeStore } from "../store"
+  import { routeStore } from "stores"
   import Screen from "./Screen.svelte"
 
   const { styleable } = getContext("sdk")

packages/client/src/components/Screen.svelte

@@ -1,7 +1,7 @@
 <script>
-  import { screenStore, routeStore } from "../store"
+  import { screenStore, routeStore } from "stores"
   import Component from "./Component.svelte"
-  import Provider from "./Provider.svelte"
+  import Provider from "./context/Provider.svelte"
   import { onMount } from "svelte"
 
   // Keep route params up to date

packages/client/src/components/app/DataProvider.svelte

@@ -6,7 +6,7 @@
     luceneQuery,
     luceneSort,
     luceneLimit,
-  } from "./lucene"
+  } from "utils/lucene"
   import Placeholder from "./Placeholder.svelte"
 
   export let dataSource

packages/client/src/components/app/Layout.svelte

@@ -1,9 +1,8 @@
 <script>
   import { getContext } from "svelte"
   import { Heading, Icon } from "@budibase/bbui"
-  import { routeStore } from "../../client/src/store"
 
-  const { styleable, linkable, builderStore } = getContext("sdk")
+  const { routeStore, styleable, linkable, builderStore } = getContext("sdk")
   const component = getContext("component")
 
   export let title

packages/client/src/components/app/forms/InnerForm.svelte

@@ -2,7 +2,7 @@
   import { setContext, getContext } from "svelte"
   import { derived, get, writable } from "svelte/store"
   import { createValidatorFromConstraints } from "./validation"
-  import { generateID } from "../helpers"
+  import { generateID } from "utils/helpers"
 
   export let dataSource
   export let disabled = false

packages/client/src/components/app/index.js

@@ -7,9 +7,6 @@ import "@spectrum-css/vars/dist/spectrum-dark.css"
 import "@spectrum-css/vars/dist/spectrum-darkest.css"
 import "@spectrum-css/page/dist/index-vars.css"
 
-import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-rollup.js"
-loadSpectrumIcons()
-
 // Non user-facing components
 export { default as Placeholder } from "./Placeholder.svelte"
 

packages/client/src/components/context/Provider.svelte

@@ -1,7 +1,7 @@
 <script>
   import { getContext, setContext, onMount } from "svelte"
-  import { dataSourceStore, createContextStore } from "../store"
+  import { dataSourceStore, createContextStore } from "stores"
-  import { ActionTypes } from "../constants"
+  import { ActionTypes } from "constants"
   import { generate } from "shortid"
 
   export let data

packages/client/src/components/context/UserBindingsProvider.svelte

@@ -1,7 +1,7 @@
 <script>
   import Provider from "./Provider.svelte"
-  import { authStore } from "../store"
+  import { authStore } from "stores"
-  import { ActionTypes, TableNames } from "../constants"
+  import { ActionTypes, TableNames } from "constants"
 
   // Register this as a refreshable datasource so that user changes cause
   // the user object to be refreshed

packages/client/src/components/overlay/ConfirmationDisplay.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { confirmationStore } from "../store"
+  import { confirmationStore } from "stores"
   import { Modal, ModalContent } from "@budibase/bbui"
 </script>
 

packages/client/src/components/overlay/NotificationDisplay.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { notificationStore } from "../store"
+  import { notificationStore } from "stores"
   import { Notification } from "@budibase/bbui"
   import { fly } from "svelte/transition"
 </script>

packages/client/src/components/overlay/PeekScreenDisplay.svelte

@@ -4,7 +4,7 @@
     dataSourceStore,
     notificationStore,
     routeStore,
-  } from "../store"
+  } from "stores"
   import { Modal, ModalContent, ActionButton } from "@budibase/bbui"
   import { onDestroy } from "svelte"
 

packages/client/src/components/preview/HoverIndicator.svelte

@@ -1,7 +1,7 @@
 <script>
   import { onMount, onDestroy } from "svelte"
   import IndicatorSet from "./IndicatorSet.svelte"
-  import { builderStore } from "../../store"
+  import { builderStore } from "stores"
 
   let componentId
   $: zIndex = componentId === $builderStore.selectedComponentId ? 900 : 920

packages/client/src/components/preview/IndicatorSet.svelte

@@ -1,7 +1,7 @@
 <script>
   import { onMount, onDestroy } from "svelte"
   import Indicator from "./Indicator.svelte"
-  import { domDebounce } from "../../utils/domDebounce"
+  import { domDebounce } from "utils/domDebounce"
 
   export let componentId
   export let color

packages/client/src/components/preview/SelectionIndicator.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { builderStore } from "../../store"
+  import { builderStore } from "stores"
   import IndicatorSet from "./IndicatorSet.svelte"
 </script>
 

packages/client/src/components/preview/SettingsBar.svelte

@@ -3,8 +3,8 @@
   import SettingsButton from "./SettingsButton.svelte"
   import SettingsColorPicker from "./SettingsColorPicker.svelte"
   import SettingsPicker from "./SettingsPicker.svelte"
-  import { builderStore } from "../../store"
+  import { builderStore } from "stores"
-  import { domDebounce } from "../../utils/domDebounce"
+  import { domDebounce } from "utils/domDebounce"
 
   const verticalOffset = 28
   const horizontalOffset = 2

packages/client/src/components/preview/SettingsButton.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Icon } from "@budibase/bbui"
-  import { builderStore } from "../../store"
+  import { builderStore } from "stores"
   import { createEventDispatcher } from "svelte"
 
   export let prop

packages/client/src/components/preview/SettingsColorPicker.svelte

@@ -1,6 +1,6 @@
 <script>
   import { ColorPicker } from "@budibase/bbui"
-  import { builderStore } from "../../store"
+  import { builderStore } from "stores"
 
   export let prop
 

packages/client/src/components/preview/SettingsPicker.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Select } from "@budibase/bbui"
-  import { builderStore } from "../../store"
+  import { builderStore } from "stores"
 
   export let prop
   export let options

packages/client/src/index.js

@@ -1,5 +1,9 @@
 import ClientApp from "./components/ClientApp.svelte"
-import { builderStore, appStore } from "./store"
+import { builderStore, appStore } from "./stores"
+import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-rollup.js"
+
+// Initialise spectrum icons
+loadSpectrumIcons()
 
 let app
 

packages/client/src/sdk.js

@@ -5,12 +5,12 @@ import {
   routeStore,
   screenStore,
   builderStore,
-} from "./store"
+} from "stores"
-import { styleable } from "./utils/styleable"
+import { styleable } from "utils/styleable"
-import { linkable } from "./utils/linkable"
+import { linkable } from "utils/linkable"
-import { getAction } from "./utils/getAction"
+import { getAction } from "utils/getAction"
-import Provider from "./components/Provider.svelte"
+import Provider from "components/context/Provider.svelte"
-import { ActionTypes } from "./constants"
+import { ActionTypes } from "constants"
 
 export default {
   API,

packages/client/src/stores/builder.js

@@ -1,5 +1,5 @@
 import { writable, derived } from "svelte/store"
-import Manifest from "@budibase/standard-components/manifest.json"
+import Manifest from "manifest.json"
 import { findComponentById, findComponentPathById } from "../utils/components"
 
 const dispatchEvent = (type, data = {}) => {

packages/client/src/utils/buttonActions.js

@@ -5,9 +5,9 @@ import {
   confirmationStore,
   authStore,
   peekStore,
-} from "../store"
+} from "stores"
-import { saveRow, deleteRow, executeQuery, triggerAutomation } from "../api"
+import { saveRow, deleteRow, executeQuery, triggerAutomation } from "api"
-import { ActionTypes } from "../constants"
+import { ActionTypes } from "constants"
 
 const saveRowHandler = async (action, context) => {
   const { fields, providerId, tableId } = action.parameters

packages/client/src/utils/conditions.js

@@ -1,7 +1,4 @@
-import {
+import { buildLuceneQuery, luceneQuery } from "./lucene"
-  buildLuceneQuery,
-  luceneQuery,
-} from "../../../standard-components/src/lucene"
 
 export const getActiveConditions = conditions => {
   if (!conditions?.length) {

packages/client/src/utils/hash.js

@@ -1,12 +0,0 @@
-export const hashString = str => {
-  if (!str) {
-    return 0
-  }
-  let hash = 0
-  for (let i = 0; i < str.length; i++) {
-    let char = str.charCodeAt(i)
-    hash = (hash << 5) - hash + char
-    hash = hash & hash // Convert to 32bit integer
-  }
-  return hash
-}

packages/client/src/utils/helpers.js

@@ -39,3 +39,19 @@ export const generateID = (size = 21) => {
   }
   return id
 }
+
+/**
+ * Computes a short hash of a string
+ */
+export const hashString = str => {
+  if (!str) {
+    return 0
+  }
+  let hash = 0
+  for (let i = 0; i < str.length; i++) {
+    let char = str.charCodeAt(i)
+    hash = (hash << 5) - hash + char
+    hash = hash & hash // Convert to 32bit integer
+  }
+  return hash
+}

packages/client/src/utils/linkable.js

@@ -1,6 +1,6 @@
 import { get } from "svelte/store"
 import { link } from "svelte-spa-router"
-import { builderStore } from "../store"
+import { builderStore } from "stores"
 
 export const linkable = (node, href) => {
   if (get(builderStore).inBuilder) {