Update all components to be renderable and styleable

6 years ago · 1bd2fac9b2
24 changed files with 135 additions and 135 deletions
--- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
@ -44,8 +44,6 @@ export default `<html>
          if (selectedComponentStyle) document.head.removeChild(selectedComponentStyle)
        } catch(_) { }

-        console.log(data.selectedComponentType)
-        
        selectedComponentStyle = document.createElement('style');
        document.head.appendChild(selectedComponentStyle)
        var selectedCss = '[data-bb-id="' + data.selectedComponentType + '-' + data.selectedComponentId + '"]'  + '{border:2px solid #0055ff !important;}'
--- a/packages/client/src/store/routes.js
+++ b/packages/client/src/store/routes.js
@ -21,8 +21,6 @@ const createRouteStore = () => {
    })
  }
  const setRouteParams = routeParams => {
-    console.log("new route params: ")
-    console.log(routeParams)
    store.update(state => {
      state.routeParams = routeParams
      return state
--- a/packages/client/src/store/screens.js
+++ b/packages/client/src/store/screens.js
@ -4,9 +4,10 @@ import { routeStore } from "./routes"
 const createScreenStore = () => {
  const screens = writable([])
  const store = derived([screens, routeStore], ([$screens, $routeStore]) => {
-    const activeScreen = $screens.find(
-      screen => screen.route === $routeStore.activeRoute
-    )
+    const activeScreen =
+      $screens.length === 1
+        ? $screens[0]
+        : $screens.find(screen => screen.route === $routeStore.activeRoute)
    return {
      screens: $screens,
      activeScreen,
--- a/packages/standard-components/src/Card.svelte
+++ b/packages/standard-components/src/Card.svelte
@ -1,6 +1,9 @@
 <script>
+  import { getContext } from "svelte"
  import { cssVars } from "./helpers"

+  const { styleable } = getContext("app")
+
  export const className = ""
  export let imageUrl = ""
  export let heading = ""
@ -22,7 +25,7 @@
  $: showImage = !!imageUrl
 </script>

-<div use:cssVars={cssVariables} class="container">
+<div use:cssVars={cssVariables} class="container" use:styleable={styles}>
  {#if showImage}<img class="image" src={imageUrl} alt="" />{/if}
  <div class="content">
    <h2 class="heading">{heading}</h2>
--- a/packages/standard-components/src/CardHorizontal.svelte
+++ b/packages/standard-components/src/CardHorizontal.svelte
@ -1,6 +1,9 @@
 <script>
+  import { getContext } from "svelte"
  import { cssVars } from "./helpers"

+  const { styleable } = getContext("app")
+
  export const className = ""
  export let imageUrl = ""
  export let heading = ""
@ -25,7 +28,7 @@
  $: showImage = !!imageUrl
 </script>

-<div use:cssVars={cssVariables} class="container">
+<div use:cssVars={cssVariables} class="container" use:styleable={styles}>
  {#if showImage}<img class="image" src={imageUrl} alt="" />{/if}
  <div class="content">
    <main>
--- a/packages/standard-components/src/DataForm.svelte
+++ b/packages/standard-components/src/DataForm.svelte
@ -1,10 +1,7 @@
 <script>
  import Form from "./Form.svelte"

-  export let _bb
-  export let table
-  export let title
-  export let buttonText
+  export let styles
 </script>

-<Form {_bb} {table} {title} {buttonText} wide={false} />
+<Form {styles} wide={false} />
--- a/packages/standard-components/src/DataFormWide.svelte
+++ b/packages/standard-components/src/DataFormWide.svelte
@ -1,10 +1,7 @@
 <script>
  import Form from "./Form.svelte"

-  export let table
-  export let title
-  export let buttonText
  export let styles
 </script>

-<Form {styles} {table} {title} {buttonText} wide />
+<Form {styles} wide />
--- a/packages/standard-components/src/DatePicker.svelte
+++ b/packages/standard-components/src/DatePicker.svelte
@ -1,18 +1,19 @@
 <script>
-  import Flatpickr from "svelte-flatpickr"
  import { DatePicker } from "@budibase/bbui"
+  import { getContext } from "svelte"
+
+  const { styleable } = getContext("app")

  export let placeholder
  export let value
-
-  export let _bb
+  export let styles

  function handleChange(event) {
-    const [fullDate, dateStr, instance] = event.detail
-    if (_bb) {
-      _bb.setBinding("value", fullDate)
-    }
+    const [fullDate] = event.detail
+    value = fullDate
  }
 </script>

-<DatePicker {placeholder} on:change={handleChange} {value} />
+<div use:styleable={styles}>
+  <DatePicker {placeholder} on:change={handleChange} {value} />
+</div>
--- a/packages/standard-components/src/Form.svelte
+++ b/packages/standard-components/src/Form.svelte
@ -8,12 +8,11 @@
  const { styleable, screenStore } = getContext("app")
  const dataProviderStore = getContext("data")

-  export let table
  export let wide = false
  export let styles

-  $: row = $dataProviderStore.row
-  $: schema = $dataProviderStore.table && $dataProviderStore.table.schema
+  $: row = $dataProviderStore?.row
+  $: schema = $dataProviderStore?.table && $dataProviderStore.table.schema
  $: fields = schema ? Object.keys(schema) : []
 </script>

--- a/packages/standard-components/src/Icon.svelte
+++ b/packages/standard-components/src/Icon.svelte
@ -1,9 +1,16 @@
 <script>
  import "@fortawesome/fontawesome-free/js/all.js"
+  import { getContext } from "svelte"
+
+  const { styleable } = getContext("app")

  export let icon = ""
  export let size = "fa-lg"
  export let color = "#000"
+  export let styles
 </script>

-<i style={`color: ${color};`} class={`${icon} ${size}`} />
+<i
+  style={`color: ${color};`}
+  class={`${icon} ${size}`}
+  use:styleable={styles} />
--- a/packages/standard-components/src/Image.svelte
+++ b/packages/standard-components/src/Image.svelte
@ -1,11 +1,20 @@
 <script>
+  import { getContext } from "svelte"
+
+  const { styleable } = getContext("app")
+
  export let className = ""
  export let url = ""
  export let description = ""
  export let height
  export let width
-
-  export let _bb
+  export let styles
 </script>

-<img {height} {width} class={className} src={url} alt={description} />
+<img
+  {height}
+  {width}
+  class={className}
+  src={url}
+  alt={description}
+  use:styleable={styles} />
--- a/packages/standard-components/src/Input.svelte
+++ b/packages/standard-components/src/Input.svelte
@ -1,22 +1,21 @@
 <script>
-  export let id = ""
+  import { getContext } from "svelte"
+
+  const { styleable } = getContext("app")
+
  export let value = ""
  export let className = ""
  export let type = "text"
-  export let label = ""
-  export let checked = false
-
-  export let _bb
-
-  let actualValue = ""
+  export let styles

  const onchange = ev => {
-    if (_bb) {
-      const val = type === "checkbox" ? ev.target.checked : ev.target.value
-      _bb.setBinding("value", val)
-    }
+    value = ev.target.value
  }
 </script>

-<label for={id}>{label}</label>
-<input {id} class={className} {type} {value} {checked} on:change={onchange} />
+<input
+  class={className}
+  {type}
+  {value}
+  on:change={onchange}
+  use:styleable={styles} />
--- a/packages/standard-components/src/LinkedRowSelector.svelte
+++ b/packages/standard-components/src/LinkedRowSelector.svelte
@ -1,7 +1,9 @@
 <script>
  import { Label, Multiselect } from "@budibase/bbui"
-  import { fetchTableDefinition, fetchTableData } from "@budibase/component-sdk"
  import { capitalise } from "./helpers"
+  import { getContext } from "svelte"
+
+  const { API } = getContext("app")

  export let schema = {}
  export let linkedRows = []
@ -18,13 +20,13 @@

  async function fetchTable(id) {
    if (id != null) {
-      linkedTable = await fetchTableDefinition(id)
+      linkedTable = await API.fetchTableDefinition(id)
    }
  }

  async function fetchRows(id) {
    if (id != null) {
-      allRows = await fetchTableData(id)
+      allRows = await API.fetchTableData(id)
    }
  }

--- a/packages/standard-components/src/NewRow.svelte
+++ b/packages/standard-components/src/NewRow.svelte
@ -1,5 +1,5 @@
 <script>
-  import { DataProvider } from "@budibase/component-sdk"
+  import DataProvider from "./DataProvider.svelte"

  export let table
 </script>
--- a/packages/standard-components/src/RichText.svelte
+++ b/packages/standard-components/src/RichText.svelte
@ -1,20 +1,12 @@
 <script>
+  import { getContext } from "svelte"
  import { RichText } from "@budibase/bbui"

-  export let _bb
+  const { styleable } = getContext("app")

-  export let content = ""
-
-  const updateValue = content => {
-    if (_bb) {
-      _bb.setBinding("value", content)
-    }
-  }
-
-  $: updateValue(content)
+  export let value = ""

  // Need to determine what options we want to expose.
-
  let options = {
    modules: {
      toolbar: [
@ -31,4 +23,6 @@
  }
 </script>

-<RichText bind:content {options} />
+<div use:styleable={styles}>
+  <RichText bind:content={value} {options} />
+</div>
--- a/packages/standard-components/src/RowDetail.svelte
+++ b/packages/standard-components/src/RowDetail.svelte
@ -1,23 +1,16 @@
 <script>
-  import { onMount, setContext } from "svelte"
-  import {
-    fetchTableDefinition,
-    fetchTableData,
-    fetchRow,
-    screenStore,
-    routeStore,
-    DataProvider,
-  } from "@budibase/component-sdk"
+  import { onMount, getContext } from "svelte"
+  import DataProvider from "./DataProvider.svelte"
+
+  const { API, screenStore, routeStore } = getContext("app")

  export let table

  let headers = []
  let row

-  setContext("foo", "bar")
-
  async function fetchFirstRow() {
-    const rows = await fetchTableData(table)
+    const rows = await API.fetchTableData(table)
    return Array.isArray(rows) && rows.length ? rows[0] : { tableId: table }
  }

@ -31,9 +24,10 @@

    // if srcdoc, then we assume this is the builder preview
    if ((pathParts.length === 0 || pathParts[0] === "srcdoc") && table) {
+      console.log("getting first row")
      row = await fetchFirstRow()
    } else if (routeParamId) {
-      row = await fetchRow({ tableId: table, rowId: routeParamId })
+      row = await API.fetchRow({ tableId: table, rowId: routeParamId })
    } else {
      throw new Error("Row ID was not supplied to RowDetail")
    }
--- a/packages/standard-components/src/StackedList.svelte
+++ b/packages/standard-components/src/StackedList.svelte
@ -1,4 +1,9 @@
 <script>
+  import { getContext } from "svelte"
+
+  const { styleable } = getContext("app")
+
+  export let styles
  export let imageUrl = ""
  export let heading = ""
  export let text1 = ""
@ -9,7 +14,7 @@
  $: showImage = !!imageUrl
 </script>

-<div class="container">
+<div class="container" use:styleable={styles}>
  <a href={destinationUrl}>
    <div class="content">
      {#if showImage}
--- a/packages/standard-components/src/attachments/Dropzone.svelte
+++ b/packages/standard-components/src/attachments/Dropzone.svelte
@ -1,7 +1,8 @@
 <script>
  import { Dropzone } from "@budibase/bbui"
-  import { uploadAttachment } from "@budibase/component-sdk"
+  import { getContext } from "svelte"

+  const { API } = getContext("app")
  const BYTES_IN_MB = 1000000

  export let files = []
@ -18,7 +19,7 @@
    for (let i = 0; i < fileList.length; i++) {
      data.append("file", fileList[i])
    }
-    return await uploadAttachment(data)
+    return await API.uploadAttachment(data)
  }
 </script>

--- a/packages/standard-components/src/charts/ApexChart.svelte
+++ b/packages/standard-components/src/charts/ApexChart.svelte
@ -1,13 +1,17 @@
 <script>
+  import { getContext } from "svelte"
  import { chart } from "svelte-apexcharts"

+  const { styleable } = getContext("app")
+
  export let options
+  export let styles
 </script>

 {#if options}
-  <div use:chart={options} />
+  <div use:chart={options} use:styleable={styles} />
 {:else if options === false}
-  <div>Invalid chart options</div>
+  <div use:styleable={styles}>Invalid chart options</div>
 {/if}

 <style>
--- a/packages/standard-components/src/charts/BarChart.svelte
+++ b/packages/standard-components/src/charts/BarChart.svelte
@ -1,14 +1,11 @@
 <script>
-  import { onMount } from "svelte"
-  import {
-    fetchDatasource,
-    fetchTableDefinition,
-  } from "@budibase/component-sdk"
+  import { getContext, onMount } from "svelte"
  import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
  import ApexChart from "./ApexChart.svelte"
  import { isEmpty } from "lodash/fp"

-  export let _bb
+  const { API } = getContext("app")
+
  export let title
  export let datasource
  export let labelColumn
@ -24,21 +21,21 @@
  export let stacked
  export let yAxisUnits
  export let palette
+  export let styles

-  const store = _bb.store
  let options

  // Fetch data on mount
  onMount(async () => {
-    const allCols = [labelColumn, ...(valueColumns || [])]
+    const allCols = [labelColumn, ...(valueColumns || [null])]
    if (isEmpty(datasource) || allCols.find(x => x == null)) {
      options = false
      return
    }

    // Fetch, filter and sort data
-    const schema = (await fetchTableDefinition(datasource.tableId)).schema
-    const result = await fetchDatasource(datasource)
+    const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
+    const result = await API.fetchDatasource(datasource)
    const reducer = row => (valid, column) => valid && row[column] != null
    const hasAllColumns = row => allCols.reduce(reducer(row), true)
    const data = result
@ -92,4 +89,4 @@
  })
 </script>

-<ApexChart {options} />
+<ApexChart {options} {styles} />
--- a/packages/standard-components/src/charts/CandleStickChart.svelte
+++ b/packages/standard-components/src/charts/CandleStickChart.svelte
@ -1,14 +1,11 @@
 <script>
-  import { onMount } from "svelte"
-  import {
-    fetchDatasource,
-    fetchTableDefinition,
-  } from "@budibase/component-sdk"
+  import { getContext, onMount } from "svelte"
  import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
  import ApexChart from "./ApexChart.svelte"
  import { isEmpty } from "lodash/fp"

-  export let _bb
+  const { API } = getContext("app")
+
  export let title
  export let datasource
  export let dateColumn
@ -22,8 +19,8 @@
  export let width
  export let animate
  export let yAxisUnits
+  export let styles

-  const store = _bb.store
  let options

  // Fetch data on mount
@ -35,8 +32,8 @@
    }

    // Fetch, filter and sort data
-    const schema = (await fetchTableDefinition(datasource.tableId)).schema
-    const result = await fetchDatasource(datasource)
+    const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
+    const result = await API.fetchDatasource(datasource)
    const reducer = row => (valid, column) => valid && row[column] != null
    const hasAllColumns = row => allCols.reduce(reducer(row), true)
    const data = result
@ -74,4 +71,4 @@
  })
 </script>

-<ApexChart {options} />
+<ApexChart {options} {styles} />
--- a/packages/standard-components/src/charts/LineChart.svelte
+++ b/packages/standard-components/src/charts/LineChart.svelte
@ -1,15 +1,12 @@
 <script>
-  import { onMount } from "svelte"
-  import {
-    fetchDatasource,
-    fetchTableDefinition,
-  } from "@budibase/component-sdk"
+  import { getContext, onMount } from "svelte"
  import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
  import ApexChart from "./ApexChart.svelte"
  import { isEmpty } from "lodash/fp"

+  const { API } = getContext("app")
+
  // Common props
-  export let _bb
  export let title
  export let datasource
  export let labelColumn
@ -25,26 +22,26 @@
  export let legend
  export let yAxisUnits
  export let palette
+  export let styles

  // Area specific props
  export let area
  export let stacked
  export let gradient

-  const store = _bb.store
  let options

  // Fetch data on mount
  onMount(async () => {
-    const allCols = [labelColumn, ...(valueColumns || [])]
+    const allCols = [labelColumn, ...(valueColumns || [null])]
    if (isEmpty(datasource) || allCols.find(x => x == null)) {
      options = false
      return
    }

    // Fetch, filter and sort data
-    const schema = (await fetchTableDefinition(datasource.tableId)).schema
-    const result = await fetchDatasource(datasource)
+    const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
+    const result = await API.fetchDatasource(datasource)
    const reducer = row => (valid, column) => valid && row[column] != null
    const hasAllColumns = row => allCols.reduce(reducer(row), true)
    const data = result
@ -100,4 +97,4 @@
  })
 </script>

-<ApexChart {options} />
+<ApexChart {options} {styles} />
--- a/packages/standard-components/src/charts/PieChart.svelte
+++ b/packages/standard-components/src/charts/PieChart.svelte
@ -1,14 +1,11 @@
 <script>
-  import { onMount } from "svelte"
-  import {
-    fetchDatasource,
-    fetchTableDefinition,
-  } from "@budibase/component-sdk"
+  import { getContext, onMount } from "svelte"
  import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
  import ApexChart from "./ApexChart.svelte"
  import { isEmpty } from "lodash/fp"

-  export let _bb
+  const { API } = getContext("app")
+
  export let title
  export let datasource
  export let labelColumn
@ -21,8 +18,8 @@
  export let legend
  export let donut
  export let palette
+  export let styles

-  const store = _bb.store
  let options

  // Fetch data on mount
@ -33,8 +30,8 @@
    }

    // Fetch, filter and sort data
-    const schema = (await fetchTableDefinition(datasource.tableId)).schema
-    const result = await fetchDatasource(datasource)
+    const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
+    const result = await API.fetchDatasource(datasource)
    const data = result
      .filter(row => row[labelColumn] != null && row[valueColumn] != null)
      .slice(0, 20)
@ -66,4 +63,4 @@
  })
 </script>

-<ApexChart {options} />
+<ApexChart {options} {styles} />
--- a/packages/standard-components/src/index.js
+++ b/packages/standard-components/src/index.js
@ -3,24 +3,24 @@ import "@budibase/bbui/dist/bbui.css"
 export { default as container } from "./Container.svelte"
 export { default as text } from "./Text.svelte"
 export { default as heading } from "./Heading.svelte"
-// export { default as input } from "./Input.svelte"
+export { default as input } from "./Input.svelte"
 export { default as textfield } from "./Textfield.svelte"
-// export { default as richtext } from "./RichText.svelte"
+export { default as richtext } from "./RichText.svelte"
 export { default as button } from "./Button.svelte"
 export { default as login } from "./Login.svelte"
 export { default as link } from "./Link.svelte"
-// export { default as image } from "./Image.svelte"
+export { default as image } from "./Image.svelte"
 export { default as Navigation } from "./Navigation.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 dataform } from "./DataForm.svelte"
+export { default as dataformwide } from "./DataFormWide.svelte"
 export { default as list } from "./List.svelte"
 export { default as embed } from "./Embed.svelte"
-// export { default as stackedlist } from "./StackedList.svelte"
-// export { default as card } from "./Card.svelte"
-// export { default as cardhorizontal } from "./CardHorizontal.svelte"
-// 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 "./charts"
+export { default as stackedlist } from "./StackedList.svelte"
+export { default as card } from "./Card.svelte"
+export { default as cardhorizontal } from "./CardHorizontal.svelte"
+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 "./charts"