Tidy up standard components

packages/client/src/render/getAppId.js

@@ -1,46 +0,0 @@
-const COOKIE_SEPARATOR = ";"
-const APP_PREFIX = "app_"
-const KEY_VALUE_SPLIT = "="
-
-function confirmAppId(possibleAppId) {
-  return possibleAppId && possibleAppId.startsWith(APP_PREFIX)
-    ? possibleAppId
-    : undefined
-}
-
-function tryGetFromCookie({ cookies }) {
-  const cookie = cookies
-    .split(COOKIE_SEPARATOR)
-    .find(cookie => cookie.trim().startsWith("budibase:currentapp"))
-  let appId
-  if (cookie && cookie.split(KEY_VALUE_SPLIT).length === 2) {
-    appId = cookie.split("=")[1]
-  }
-  return confirmAppId(appId)
-}
-
-function tryGetFromPath() {
-  const appId = location.pathname.split("/")[1]
-  return confirmAppId(appId)
-}
-
-function tryGetFromSubdomain() {
-  const parts = window.location.host.split(".")
-  const appId = parts[1] ? parts[0] : undefined
-  return confirmAppId(appId)
-}
-
-export const getAppId = cookies => {
-  const functions = [tryGetFromSubdomain, tryGetFromPath, tryGetFromCookie]
-  // try getting the app Id in order
-  let appId
-  for (let func of functions) {
-    appId = func({ cookies })
-    if (appId) {
-      break
-    }
-  }
-  return appId
-}
-
-export const getAppIdFromPath = getAppId

packages/standard-components/src/Heading.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { buildStyle } from "./buildStyle.js"
   export let className = ""
   export let type
   export let text = ""

packages/standard-components/src/Image.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { buildStyle } from "./buildStyle"
+  import { buildStyle } from "./helpers"
 
   export let className = ""
   export let url = ""

packages/standard-components/src/Templates/saveRowButton.js

@@ -1,23 +0,0 @@
-export default ({ rows }) =>
-  rows.map(r => ({
-    name: `Save ${r.name} Button`,
-    props: buttonProps(r),
-  }))
-
-const buttonProps = row => ({
-  _component: "@budibase/standard-components/button",
-  _children: [
-    {
-      _component: "@budibase/standard-components/text",
-      text: `Save ${row.name}`,
-    },
-  ],
-  onClick: [
-    {
-      "##eventHandlerType": "Save Row",
-      parameters: {
-        statePath: `${row.name}`,
-      },
-    },
-  ],
-})

packages/standard-components/src/api.js

@@ -1,33 +0,0 @@
-const apiCall = method => async (
-  url,
-  body,
-  headers = {
-    "Content-Type": "application/json",
-  }
-) => {
-  const appId = location.pathname.split("/")[1]
-  if (appId) {
-    headers["x-budibase-app-id"] = appId
-  }
-  const response = await fetch(url, {
-    method: method,
-    body: body && JSON.stringify(body),
-    headers,
-  })
-
-  return response
-}
-
-export const post = apiCall("POST")
-export const get = apiCall("GET")
-export const patch = apiCall("PATCH")
-export const del = apiCall("DELETE")
-export const put = apiCall("PUT")
-
-export default {
-  post: apiCall("POST"),
-  get: apiCall("GET"),
-  patch: apiCall("PATCH"),
-  delete: apiCall("DELETE"),
-  put: apiCall("PUT"),
-}

packages/standard-components/src/attachments/AttachmentList.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Modal, ModalContent, Icon } from "@budibase/bbui"
+  import { Modal, ModalContent } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
 
   const dispatch = createEventDispatcher()

packages/standard-components/src/attachments/Dropzone.svelte

@@ -1,6 +1,5 @@
 <script>
-  import { Heading, Body, Button, Dropzone } from "@budibase/bbui"
-  import { FILE_TYPES } from "./fileTypes"
+  import { Dropzone } from "@budibase/bbui"
 
   const BYTES_IN_MB = 1000000
 
@@ -15,7 +14,7 @@
 
   async function processFiles(fileList) {
     let data = new FormData()
-    for (var i = 0; i < fileList.length; i++) {
+    for (let i = 0; i < fileList.length; i++) {
       data.append("file", fileList[i])
     }
 
@@ -27,8 +26,7 @@
       },
     })
 
-    const processedFiles = await response.json()
-    return processedFiles
+    return await response.json()
   }
 </script>
 

packages/standard-components/src/buildStyle.js

@@ -1,9 +0,0 @@
-export const buildStyle = styles => {
-  let str = ""
-  for (let s in styles) {
-    if (styles[s]) {
-      str += `${s}: ${styles[s]}; `
-    }
-  }
-  return str
-}

packages/standard-components/src/cssVars.js

@@ -1,31 +0,0 @@
-// https://github.com/kaisermann/svelte-css-vars
-
-export const cssVars = (node, props) => {
-  Object.entries(props).forEach(([key, value]) => {
-    node.style.setProperty(`--${key}`, value)
-  })
-
-  return {
-    update(new_props) {
-      Object.entries(new_props).forEach(([key, value]) => {
-        node.style.setProperty(`--${key}`, value)
-        delete props[key]
-      })
-
-      Object.keys(props).forEach(name => node.style.removeProperty(`--${name}`))
-      props = new_props
-    },
-  }
-}
-
-export const createClasses = classes => {
-  let all = ""
-  for (let cls in classes) {
-    if (classes[cls]) {
-      all = all + " " + cls
-    }
-  }
-  return all
-}
-
-export default cssVars

packages/standard-components/src/emptyProps.js

@@ -1 +0,0 @@
-export const emptyProps = () => ({ _component: "" })

packages/standard-components/src/fetchData.js

@@ -1,87 +0,0 @@
-import api from "./api"
-
-export default async function fetchData(datasource, store) {
-  const { type, name } = datasource
-
-  if (name) {
-    let rows = []
-    if (type === "table") {
-      rows = await fetchTableData()
-    } else if (type === "view") {
-      rows = await fetchViewData()
-    } else if (type === "link") {
-      rows = await fetchLinkedRowsData()
-    }
-
-    // Fetch table schema so we can check for linked rows
-    if (rows && rows.length && datasource.tableId) {
-      const schema = await fetchSchema(datasource.tableId)
-      const keys = Object.keys(schema)
-      rows.forEach(row => {
-        for (let key of keys) {
-          const type = schema[key].type
-          if (type === "link") {
-            row[`${key}_count`] = Array.isArray(row[key]) ? row[key].length : 0
-          } else if (type === "attachment") {
-            let url = null
-            if (Array.isArray(row[key]) && row[key][0] != null) {
-              url = row[key][0].url
-            }
-            row[`${key}_first`] = url
-          }
-        }
-      })
-    }
-
-    return rows
-  } else {
-    return []
-  }
-
-  async function fetchTableData() {
-    if (!name.startsWith("all_")) {
-      throw new Error("Incorrect table convention - must begin with all_")
-    }
-    const tablesResponse = await api.get(`/api/views/${name}`)
-    return await tablesResponse.json()
-  }
-
-  async function fetchViewData() {
-    const { field, groupBy, calculation } = datasource
-    const params = new URLSearchParams()
-
-    if (calculation) {
-      params.set("field", field)
-      params.set("calculation", calculation)
-    }
-
-    if (groupBy) {
-      params.set("group", groupBy)
-    }
-
-    if (groupBy) params.set("group", groupBy)
-
-    let QUERY_VIEW_URL = field
-      ? `/api/views/${name}?${params}`
-      : `/api/views/${name}`
-
-    const response = await api.get(QUERY_VIEW_URL)
-    return await response.json()
-  }
-
-  async function fetchLinkedRowsData() {
-    if (!store || !store.data || !store.data._id) {
-      return []
-    }
-    const QUERY_URL = `/api/${store.data.tableId}/${store.data._id}/enrich`
-    const response = await api.get(QUERY_URL)
-    const row = await response.json()
-    return row[datasource.fieldName]
-  }
-}
-
-export async function fetchSchema(id) {
-  const FETCH_TABLE_URL = `/api/tables/${id}`
-  const response = await api.get(FETCH_TABLE_URL)
-  return (await response.json()).schema
-}

packages/standard-components/src/helpers.js

@@ -1 +1,49 @@
-export const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
+/**
+ * Capitalises a string.
+ *
+ * @param string
+ * @returns {string}
+ */
+export const capitalise = string => {
+  return string.substring(0, 1).toUpperCase() + string.substring(1)
+}
+
+/**
+ * Builds a style string from a style object.
+ *
+ * @param styles
+ * @returns {string}
+ */
+export const buildStyle = styles => {
+  let str = ""
+  Object.entries(styles).forEach(([style, value]) => {
+    if (style && value) {
+      str += `${style}: ${value}; `
+    }
+  })
+  return str
+}
+
+/**
+ * Svelte action to set CSS variables on a DOM node.
+ *
+ * @param node
+ * @param props
+ */
+export const cssVars = (node, props) => {
+  Object.entries(props).forEach(([key, value]) => {
+    node.style.setProperty(`--${key}`, value)
+  })
+
+  return {
+    update(new_props) {
+      Object.entries(new_props).forEach(([key, value]) => {
+        node.style.setProperty(`--${key}`, value)
+        delete props[key]
+      })
+
+      Object.keys(props).forEach(name => node.style.removeProperty(`--${name}`))
+      props = new_props
+    },
+  }
+}

packages/standard-components/src/icons/ArrowDown.svelte

@@ -1,10 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 24"
-  width="18"
-  height="18">
-  <path fill="none" d="M0 0h24v24H0z" />
-  <path
-    d="M13 16.172l5.364-5.364 1.414 1.414L12 20l-7.778-7.778 1.414-1.414L11
-    16.172V4h2v12.172z" />
-</svg>

packages/standard-components/src/icons/ArrowUp.svelte

@@ -1,10 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 24"
-  width="18"
-  height="18">
-  <path fill="none" d="M0 0h24v24H0z" />
-  <path
-    d="M13 7.828V20h-2V7.828l-5.364 5.364-1.414-1.414L12 4l7.778 7.778-1.414
-    1.414L13 7.828z" />
-</svg>

packages/standard-components/src/index.js

@@ -7,11 +7,10 @@ export { default as input } from "./Input.svelte"
 export { default as textfield } from "./Textfield.svelte"
 export { default as button } from "./Button.svelte"
 export { default as login } from "./Login.svelte"
-export { default as saveRowButton } from "./Templates/saveRowButton"
 export { default as link } from "./Link.svelte"
 export { default as image } from "./Image.svelte"
 export { default as Navigation } from "./Navigation.svelte"
-export { default as datagrid } from "./DataGrid/Component.svelte"
+export { default as datagrid } from "./grid/Component.svelte"
 export { default as dataform } from "./DataForm.svelte"
 export { default as dataformwide } from "./DataFormWide.svelte"
 export { default as datalist } from "./DataList.svelte"
@@ -25,4 +24,4 @@ export { default as rowdetail } from "./RowDetail.svelte"
 export { default as newrow } from "./NewRow.svelte"
 export { default as datepicker } from "./DatePicker.svelte"
 export { default as icon } from "./Icon.svelte"
-export * from "./Chart"
+export * from "./charts"