@budibase/bbui 0.0.1

package/src/StatusLight/StatusLight.svelte

@@ -0,0 +1,80 @@
+<script>
+  import "@spectrum-css/statuslight"
+
+  export let size = "M"
+  export let celery = false
+  export let yellow = false
+  export let fuchsia = false
+  export let indigo = false
+  export let seafoam = false
+  export let chartreuse = false
+  export let magenta = false
+  export let purple = false
+  export let neutral = false
+  export let info = false
+  export let positive = false
+  export let notice = false
+  export let negative = false
+  export let disabled = false
+  export let active = false
+  export let color = null
+  export let square = false
+  export let hoverable = false
+</script>
+
+<div
+  on:click
+  class="spectrum-StatusLight spectrum-StatusLight--size{size}"
+  class:custom={!!color}
+  class:square
+  class:hoverable
+  style={`--color: ${color};`}
+  class:spectrum-StatusLight--celery={celery}
+  class:spectrum-StatusLight--yellow={yellow}
+  class:spectrum-StatusLight--fuchsia={fuchsia}
+  class:spectrum-StatusLight--indigo={indigo}
+  class:spectrum-StatusLight--seafoam={seafoam}
+  class:spectrum-StatusLight--chartreuse={chartreuse}
+  class:spectrum-StatusLight--magenta={magenta}
+  class:spectrum-StatusLight--purple={purple}
+  class:spectrum-StatusLight--neutral={neutral}
+  class:spectrum-StatusLight--info={info}
+  class:spectrum-StatusLight--positive={positive}
+  class:spectrum-StatusLight--notice={notice}
+  class:spectrum-StatusLight--negative={negative}
+  class:spectrum-StatusLight--disabled={disabled}
+  class:spectrum-StatusLight--active={active}
+  class:withText={!!$$slots.default}
+>
+  <slot />
+</div>
+
+<style>
+  .spectrum-StatusLight {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    --spectrum-statuslight-info-text-gap: 4px;
+    min-height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    transition: color ease-out 130ms;
+  }
+  .spectrum-StatusLight.withText::before {
+    margin-right: 10px;
+  }
+  .custom::before {
+    background: var(--color) !important;
+  }
+  .square::before {
+    width: 14px;
+    height: 14px;
+    border-radius: 4px;
+    margin: 0;
+  }
+  .hoverable:hover {
+    cursor: pointer;
+    color: var(--spectrum-global-color-gray-900);
+  }
+</style>

package/src/Stores/Notifications.svench.svx

@@ -0,0 +1,78 @@
+<script>
+    import { flip } from 'svelte/animate';
+    import { fly } from "svelte/transition"
+    import { View } from "svench";
+    import { notifications } from "./notifications";
+
+    export let themes = {
+        danger: "#E26D69",
+        success: "#84C991",
+        warning: "#f0ad4e",
+        info: "#5bc0de",
+        default: "#aaaaaa",
+    }
+</script>
+
+## Notification Store
+
+This custom can be used to display toast messages. It has 5 different methods: `send`, `danger`, `warning`, `success`, `info`.
+
+
+<View name="danger">
+  <button on:click={() => notifications.error('This is a danger!')}>Danger</button>
+</View>
+<View name="warning">
+  <button on:click={() => notifications.warning('This is a warning!')}>Warning</button>
+</View>
+<View name="success">
+  <button on:click={() => notifications.success('This is a success!')}>Success</button>
+</View>
+<View name="info">
+  <button on:click={() => notifications.info('This is an info toast!')}>Info</button>
+</View>
+  
+<div class="notifications">
+    {#each $notifications as notification (notification.id)}
+        <div
+        animate:flip
+        class="toast"
+        style="background: {themes[notification.type]};"
+        transition:fly={{ y: -30 }}>
+        <div class="content">{notification.message}</div>
+        {#if notification.icon}<i class={notification.icon} />{/if}
+        </div>
+    {/each}
+</div>
+
+<style>
+    .notifications {
+        position: fixed;
+        top: 10px;
+        left: 0;
+        right: 0;
+        margin: 0 auto;
+        padding: 0;
+        z-index: 9999;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+        pointer-events: none;
+    }
+
+    .toast {
+        flex: 0 0 auto;
+        margin-bottom: 10px;
+        border-radius: var(--border-radius-s);
+        /* The toasts now support being auto sized, so this static width could be removed */
+        width: 40vw;
+    }
+
+    .content {
+        padding: 10px;
+        display: block;
+        color: white;
+        font-weight: 500;
+    }
+</style>
+  

package/src/Stores/banner.js

@@ -0,0 +1,65 @@
+import { writable } from "svelte/store"
+
+export const BANNER_TYPES = {
+  INFO: "info",
+  NEGATIVE: "negative",
+}
+
+export function createBannerStore() {
+  const DEFAULT_CONFIG = {
+    messages: [],
+  }
+
+  const banner = writable(DEFAULT_CONFIG)
+
+  const show = async (
+    // eslint-disable-next-line
+    config = { message, type, extraButtonText, extraButtonAction, onChange }
+  ) => {
+    banner.update(store => {
+      return {
+        ...store,
+        ...config,
+      }
+    })
+  }
+
+  const showStatus = async () => {
+    const config = {
+      message: "Some systems are experiencing issues",
+      type: BANNER_TYPES.NEGATIVE,
+      extraButtonText: "View Status",
+      extraButtonAction: () => window.open("https://status.budibase.com/"),
+    }
+
+    await queue([config])
+  }
+
+  const queue = async entries => {
+    const priority = {
+      [BANNER_TYPES.NEGATIVE]: 0,
+      [BANNER_TYPES.INFO]: 1,
+    }
+    banner.update(store => {
+      const sorted = [...store.messages, ...entries].sort((a, b) => {
+        if (priority[a.type] == priority[b.type]) {
+          return 0
+        }
+        return priority[a.type] < priority[b.type] ? -1 : 1
+      })
+      return {
+        ...store,
+        messages: sorted,
+      }
+    })
+  }
+
+  return {
+    subscribe: banner.subscribe,
+    showStatus,
+    show,
+    queue,
+  }
+}
+
+export const banner = createBannerStore()

package/src/Stores/notifications.js

@@ -0,0 +1,84 @@
+import { writable } from "svelte/store"
+
+const NOTIFICATION_TIMEOUT = 3000
+
+export const createNotificationStore = () => {
+  const timeoutIds = new Set()
+  const _notifications = writable([], () => {
+    return () => {
+      // clear all the timers
+      timeoutIds.forEach(timeoutId => {
+        clearTimeout(timeoutId)
+      })
+      _notifications.set([])
+    }
+  })
+  let block = false
+
+  const blockNotifications = (timeout = 1000) => {
+    block = true
+    setTimeout(() => (block = false), timeout)
+  }
+
+  const send = (
+    message,
+    {
+      type = "default",
+      icon = "",
+      autoDismiss = true,
+      action = null,
+      wide = false,
+    }
+  ) => {
+    if (block) {
+      return
+    }
+    let _id = id()
+    _notifications.update(state => {
+      return [
+        ...state,
+        {
+          id: _id,
+          type,
+          message,
+          icon,
+          dismissable: !autoDismiss,
+          action,
+          wide,
+        },
+      ]
+    })
+    if (autoDismiss) {
+      const timeoutId = setTimeout(() => {
+        dismissNotification(_id)
+      }, NOTIFICATION_TIMEOUT)
+      timeoutIds.add(timeoutId)
+    }
+  }
+
+  const dismissNotification = id => {
+    _notifications.update(state => {
+      return state.filter(n => n.id !== id)
+    })
+  }
+
+  const { subscribe } = _notifications
+
+  return {
+    subscribe,
+    send,
+    info: msg => send(msg, { type: "info", icon: "Info" }),
+    error: msg =>
+      send(msg, { type: "error", icon: "Alert", autoDismiss: false }),
+    warning: msg => send(msg, { type: "warning", icon: "Alert" }),
+    success: msg => send(msg, { type: "success", icon: "CheckmarkCircle" }),
+    blockNotifications,
+    dismiss: dismissNotification,
+  }
+}
+
+function id() {
+  return "_" + Math.random().toString(36).slice(2, 9)
+}
+
+export const notifications = createNotificationStore()

package/src/Table/ArrayRenderer.svelte

@@ -0,0 +1,18 @@
+<script>
+  import "@spectrum-css/label/dist/index-vars.css"
+  import Badge from "../Badge/Badge.svelte"
+  export let value
+
+  const displayLimit = 5
+
+  $: arrayValue = Array.isArray(value) ? value : [value].filter(x => !!x)
+  $: badges = arrayValue.slice(0, displayLimit)
+  $: leftover = arrayValue.length - badges.length
+</script>
+
+{#each badges as badge}
+  <Badge size="S" grey>{badge}</Badge>
+{/each}
+{#if leftover}
+  <div>+{leftover} more</div>
+{/if}

package/src/Table/AttachmentRenderer.svelte

@@ -0,0 +1,73 @@
+<script>
+  import Link from "../Link/Link.svelte"
+
+  export let value
+
+  const displayLimit = 5
+  $: attachments = value?.slice(0, displayLimit) ?? []
+  $: leftover = (value?.length ?? 0) - attachments.length
+
+  const imageExtensions = ["png", "tiff", "gif", "raw", "jpg", "jpeg"]
+  const isImage = extension => {
+    return imageExtensions.includes(extension?.toLowerCase())
+  }
+</script>
+
+{#each attachments as attachment}
+  {#if isImage(attachment.extension)}
+    <Link
+      quiet
+      target="_blank"
+      download={attachment.name}
+      href={attachment.url}
+      on:click={e => {
+        e.stopPropagation()
+      }}
+    >
+      <div class="center" title={attachment.name}>
+        <img src={attachment.url} alt={attachment.extension} />
+      </div>
+    </Link>
+  {:else}
+    <div class="file" title={attachment.name}>
+      <Link
+        quiet
+        target="_blank"
+        download={attachment.name}
+        href={attachment.url}
+        on:click={e => {
+          e.stopPropagation()
+        }}
+      >
+        {attachment.extension}
+      </Link>
+    </div>
+  {/if}
+{/each}
+{#if leftover}
+  <div>+{leftover} more</div>
+{/if}
+
+<style>
+  img {
+    height: 32px;
+    max-width: 64px;
+  }
+  .center,
+  .file {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  .file {
+    height: 32px;
+    padding: 0 8px;
+    color: var(--spectrum-global-color-gray-800);
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    border-radius: 4px;
+    text-transform: uppercase;
+    font-weight: 600;
+    font-size: 11px;
+  }
+</style>

package/src/Table/BoldRenderer.svelte

@@ -0,0 +1,15 @@
+<script>
+  export let value
+</script>
+
+<div class="bold">{value}</div>
+
+<style>
+  .bold {
+    font-weight: bold;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: var(--max-cell-width);
+  }
+</style>

package/src/Table/BooleanRenderer.svelte

@@ -0,0 +1,42 @@
+<script>
+  import "@spectrum-css/checkbox/dist/index-vars.css"
+
+  export let value
+</script>
+
+<label
+  class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized"
+>
+  <input
+    type="checkbox"
+    class="spectrum-Checkbox-input"
+    id="checkbox-1"
+    disabled
+    checked={!!value}
+  />
+  <span class="spectrum-Checkbox-box">
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <use xlink:href="#spectrum-css-icon-Checkmark100" />
+    </svg>
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <use xlink:href="#spectrum-css-icon-Dash100" />
+    </svg>
+  </span>
+</label>
+
+<style>
+  .spectrum-Checkbox {
+    min-height: 0;
+  }
+  .spectrum-Checkbox-box {
+    margin: 0;
+  }
+</style>

package/src/Table/CellRenderer.svelte

@@ -0,0 +1,70 @@
+<script>
+  import StringRenderer from "./StringRenderer.svelte"
+  import BooleanRenderer from "./BooleanRenderer.svelte"
+  import DateTimeRenderer from "./DateTimeRenderer.svelte"
+  import RelationshipRenderer from "./RelationshipRenderer.svelte"
+  import AttachmentRenderer from "./AttachmentRenderer.svelte"
+  import ArrayRenderer from "./ArrayRenderer.svelte"
+  import InternalRenderer from "./InternalRenderer.svelte"
+  import { processStringSync } from "@budibase/string-templates"
+
+  export let row
+  export let schema
+  export let value
+  export let customRenderers = []
+
+  let renderer
+  const typeMap = {
+    boolean: BooleanRenderer,
+    datetime: DateTimeRenderer,
+    link: RelationshipRenderer,
+    attachment: AttachmentRenderer,
+    string: StringRenderer,
+    options: StringRenderer,
+    number: StringRenderer,
+    longform: StringRenderer,
+    array: ArrayRenderer,
+    internal: InternalRenderer,
+  }
+  $: type = getType(schema)
+  $: customRenderer = customRenderers?.find(x => x.column === schema?.name)
+  $: renderer = customRenderer?.component ?? typeMap[type] ?? StringRenderer
+  $: width = schema?.width || "150px"
+  $: cellValue = getCellValue(value, schema.template)
+
+  const getType = schema => {
+    // Use a string renderer for dates if we use a custom template
+    if (schema?.type === "datetime" && schema?.template) {
+      return "string"
+    }
+    return schema?.type || "string"
+  }
+
+  const getCellValue = (value, template) => {
+    if (!template) {
+      return value
+    }
+    return processStringSync(template, { value })
+  }
+</script>
+
+{#if renderer && (customRenderer || (cellValue != null && cellValue !== ""))}
+  <div style="--max-cell-width: {schema.width ? 'none' : '200px'};">
+    <svelte:component
+      this={renderer}
+      {row}
+      {schema}
+      value={cellValue}
+      on:clickrelationship
+      on:buttonclick
+    >
+      <slot />
+    </svelte:component>
+  </div>
+{/if}
+
+<style>
+  div {
+    display: contents;
+  }
+</style>

package/src/Table/CodeRenderer.svelte

@@ -0,0 +1,14 @@
+<script>
+  export let value
+</script>
+
+<code>{value}</code>
+
+<style>
+  code {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: var(--max-cell-width);
+  }
+</style>

package/src/Table/DateTimeRenderer.svelte

@@ -0,0 +1,29 @@
+<script>
+  import dayjs from "dayjs"
+
+  export let value
+  export let schema
+
+  // adding the 0- will turn a string like 00:00:00 into a valid ISO
+  // date, but will make actual ISO dates invalid
+  $: time = new Date(`0-${value}`)
+  $: isTimeOnly = !isNaN(time) || schema?.timeOnly
+  $: isDateOnly = schema?.dateOnly
+  $: format = isTimeOnly
+    ? "HH:mm:ss"
+    : isDateOnly
+    ? "MMMM D YYYY"
+    : "MMMM D YYYY, HH:mm"
+</script>
+
+<div>
+  {dayjs(isTimeOnly ? time : value).format(format)}
+</div>
+
+<style>
+  div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>

package/src/Table/InternalRenderer.svelte

@@ -0,0 +1,24 @@
+<script>
+  import Icon from "../Icon/Icon.svelte"
+  import { copyToClipboard } from "../helpers"
+  import { notifications } from "../Stores/notifications"
+
+  export let value
+
+  const onClick = async e => {
+    e.stopPropagation()
+    try {
+      await copyToClipboard(value)
+      notifications.success("Copied to clipboard")
+    } catch (error) {
+      notifications.error(
+        "Failed to copy to clipboard. Check the dev console for the value."
+      )
+      console.warn("Failed to copy the value", value)
+    }
+  }
+</script>
+
+<div on:click|stopPropagation={onClick}>
+  <Icon size="S" name="Copy" />
+</div>

package/src/Table/RelationshipRenderer.svelte

@@ -0,0 +1,35 @@
+<script>
+  import "@spectrum-css/label/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+  import Badge from "../Badge/Badge.svelte"
+
+  export let row
+  export let value
+  export let schema
+
+  const dispatch = createEventDispatcher()
+  const displayLimit = 5
+
+  $: relationships = value?.slice(0, displayLimit) ?? []
+  $: leftover = (value?.length ?? 0) - relationships.length
+
+  const onClick = e => {
+    e.stopPropagation()
+    dispatch("clickrelationship", {
+      tableId: row.tableId,
+      rowId: row._id,
+      fieldName: schema?.name,
+    })
+  }
+</script>
+
+{#each relationships as relationship}
+  {#if relationship?.primaryDisplay}
+    <Badge hoverable grey on:click={onClick}>
+      {relationship.primaryDisplay}
+    </Badge>
+  {/if}
+{/each}
+{#if leftover}
+  <div>+{leftover} more</div>
+{/if}

package/src/Table/SelectEditRenderer.svelte

@@ -0,0 +1,28 @@
+<script>
+  import Checkbox from "../Form/Checkbox.svelte"
+  import ActionButton from "../ActionButton/ActionButton.svelte"
+
+  export let selected
+  export let onEdit
+  export let allowSelectRows = false
+  export let allowEditRows = false
+</script>
+
+<div>
+  {#if allowSelectRows}
+    <Checkbox value={selected} />
+  {/if}
+  {#if allowEditRows}
+    <ActionButton size="S" on:click={onEdit}>Edit</ActionButton>
+  {/if}
+</div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+</style>

package/src/Table/StringRenderer.svelte

@@ -0,0 +1,22 @@
+<script>
+  export let value
+  export let schema
+</script>
+
+<div class:capitalise={schema?.capitalise}>
+  {typeof value === "object" ? JSON.stringify(value) : value}
+</div>
+
+<style>
+  div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: var(--max-cell-width);
+    width: 0;
+    flex: 1 1 auto;
+  }
+  div.capitalise {
+    text-transform: capitalize;
+  }
+</style>