@budibase/bbui 0.0.1

package/src/Layout/Layout.svelte

@@ -0,0 +1,94 @@
+<script>
+  export let horizontal = false
+  export let paddingX = "M"
+  export let paddingY = "M"
+  export let noPadding = false
+  export let gap = "M"
+  export let noGap = false
+  export let alignContent = "normal"
+  export let justifyItems = "stretch"
+</script>
+
+<div
+  style="align-content:{alignContent};justify-items:{justifyItems};"
+  class:horizontal
+  class="container paddingX-{!noPadding && paddingX} paddingY-{!noPadding &&
+    paddingY} gap-{!noGap && gap}"
+>
+  <slot />
+</div>
+
+<style>
+  .container {
+    display: grid;
+    grid-template-columns: 1fr;
+    position: relative;
+  }
+  .paddingX-S {
+    padding-left: var(--spacing-s);
+    padding-right: var(--spacing-s);
+  }
+  .paddingX-M {
+    padding-left: var(--spacing-m);
+    padding-right: var(--spacing-m);
+  }
+  .paddingX-L {
+    padding-left: var(--spacing-l);
+    padding-right: var(--spacing-l);
+  }
+  .paddingX-XL {
+    padding-left: var(--spacing-xl);
+    padding-right: var(--spacing-xl);
+  }
+  .paddingX-XXL {
+    padding-left: var(--spectrum-alias-grid-gutter-large);
+    padding-right: var(--spectrum-alias-grid-gutter-large);
+  }
+  .paddingY-S {
+    padding-top: var(--spacing-s);
+    padding-bottom: var(--spacing-s);
+  }
+  .paddingY-M {
+    padding-top: var(--spacing-m);
+    padding-bottom: var(--spacing-m);
+  }
+  .paddingY-L {
+    padding-top: var(--spacing-l);
+    padding-bottom: var(--spacing-l);
+  }
+  .paddingY-XL {
+    padding-top: var(--spacing-xl);
+    padding-bottom: var(--spacing-xl);
+  }
+  .paddingY-XXL {
+    padding-top: var(--spectrum-alias-grid-gutter-large);
+    padding-bottom: var(--spectrum-alias-grid-gutter-large);
+  }
+  .gap-XXS {
+    grid-gap: var(--spacing-xs);
+  }
+  .gap-XS {
+    grid-gap: var(--spacing-s);
+  }
+  .gap-S {
+    grid-gap: var(--spectrum-alias-grid-gutter-xsmall);
+  }
+  .gap-M {
+    grid-gap: var(--spectrum-alias-grid-gutter-small);
+  }
+  .gap-L {
+    grid-gap: var(--spectrum-alias-grid-gutter-medium);
+  }
+  .gap-XL {
+    grid-gap: var(--spectrum-alias-grid-gutter-large);
+  }
+  .horizontal.gap-S :global(*) + :global(*) {
+    margin-left: var(--spectrum-alias-grid-gutter-xsmall);
+  }
+  .horizontal.gap-M :global(*) + :global(*) {
+    margin-left: var(--spectrum-alias-grid-gutter-small);
+  }
+  .horizontal.gap-L :global(*) + :global(*) {
+    margin-left: var(--spectrum-alias-grid-gutter-medium);
+  }
+</style>

package/src/Layout/Page.svelte

@@ -0,0 +1,101 @@
+<script>
+  import { setContext } from "svelte"
+  import clickOutside from "../Actions/click_outside"
+
+  export let wide = false
+  export let narrow = false
+  export let noPadding = false
+
+  let sidePanelVisble = false
+
+  setContext("side-panel", {
+    open: () => (sidePanelVisble = true),
+    close: () => (sidePanelVisble = false),
+  })
+</script>
+
+<div class="page">
+  <div class="main">
+    <div class="content" class:wide class:noPadding class:narrow>
+      <slot />
+      <div class="fix-scroll-padding" />
+    </div>
+  </div>
+  <div
+    id="side-panel"
+    class:visible={sidePanelVisble}
+    use:clickOutside={() => {
+      sidePanelVisble = false
+    }}
+  >
+    <slot name="side-panel" />
+  </div>
+</div>
+
+<style>
+  .page {
+    position: relative;
+  }
+  .page,
+  .main {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+    flex: 1 1 auto;
+    overflow-x: hidden;
+  }
+  .main {
+    overflow: auto;
+  }
+  .content {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    max-width: 1080px;
+    margin: 0 auto;
+    flex: 1 1 auto;
+    padding: 50px 50px 0 50px;
+    z-index: 1;
+  }
+  .fix-scroll-padding {
+    content: "";
+    display: block;
+    flex: 0 0 50px;
+  }
+  .content.wide {
+    max-width: none;
+  }
+  .content.narrow {
+    max-width: 840px;
+  }
+  #side-panel {
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 24px;
+    background: var(--background);
+    border-left: var(--border-light);
+    width: 320px;
+    max-width: calc(100vw - 48px - 48px);
+    overflow: auto;
+    overflow-x: hidden;
+    transform: translateX(100%);
+    transition: transform 130ms ease-out;
+    height: calc(100% - 48px);
+    z-index: 2;
+  }
+  #side-panel.visible {
+    transform: translateX(0);
+  }
+
+  @media (max-width: 640px) {
+    .content {
+      padding: 24px;
+      max-width: calc(100vw - 48px) !important;
+      width: calc(100vw - 48px) !important;
+      overflow: auto;
+    }
+  }
+</style>

package/src/Link/Link.svelte

@@ -0,0 +1,27 @@
+<script>
+  import "@spectrum-css/link/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+
+  export let href = "#"
+  export let size = "M"
+  export let quiet = false
+  export let primary = false
+  export let secondary = false
+  export let overBackground = false
+  export let target
+  export let download
+
+  const dispatch = createEventDispatcher()
+</script>
+
+<a
+  on:click={e => dispatch("click") && e.stopPropagation()}
+  {href}
+  {target}
+  {download}
+  class:spectrum-Link--primary={primary}
+  class:spectrum-Link--secondary={secondary}
+  class:spectrum-Link--overBackground={overBackground}
+  class:spectrum-Link--quiet={quiet}
+  class="spectrum-Link spectrum-Link--size{size}"><slot /></a
+>

package/src/List/List.svelte

@@ -0,0 +1,28 @@
+<script>
+  import Detail from "../Typography/Detail.svelte"
+
+  export let title = null
+</script>
+
+<div>
+  {#if title}
+    <div class="title">
+      <Detail>{title}</Detail>
+    </div>
+  {/if}
+  <div class="list-items">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .title {
+    margin-bottom: 6px;
+  }
+  .list-items {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+</style>

package/src/List/ListItem.svelte

@@ -0,0 +1,93 @@
+<script>
+  import Body from "../Typography/Body.svelte"
+  import IconAvatar from "../Icon/IconAvatar.svelte"
+  import Label from "../Label/Label.svelte"
+  import Avatar from "../Avatar/Avatar.svelte"
+
+  export let icon = null
+  export let iconBackground = null
+  export let iconColor = null
+  export let avatar = false
+  export let title = null
+  export let subtitle = null
+  export let hoverable = false
+
+  $: initials = avatar ? title?.[0] : null
+</script>
+
+<div class="list-item" class:hoverable on:click>
+  <div class="left">
+    {#if icon}
+      <IconAvatar {icon} color={iconColor} background={iconBackground} />
+    {/if}
+    {#if avatar}
+      <Avatar {initials} />
+    {/if}
+    {#if title}
+      <Body>{title}</Body>
+    {/if}
+    {#if subtitle}
+      <Label>{subtitle}</Label>
+    {/if}
+  </div>
+  {#if $$slots.default}
+    <div class="right">
+      <slot />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .list-item {
+    padding: 0 16px;
+    height: 56px;
+    background: var(--spectrum-global-color-gray-50);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    transition: background 130ms ease-out;
+    gap: var(--spacing-m);
+  }
+  .list-item:not(:first-child) {
+    border-top: none;
+  }
+  .list-item:first-child {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+  .list-item:last-child {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .hoverable:hover {
+    cursor: pointer;
+    background: var(--spectrum-global-color-gray-75);
+  }
+  .left,
+  .right {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-xl);
+  }
+  .left {
+    width: 0;
+    flex: 1 1 auto;
+  }
+  .right {
+    flex: 0 0 auto;
+  }
+  .list-item :global(.spectrum-Icon),
+  .list-item :global(.spectrum-Avatar) {
+    flex: 0 0 auto;
+  }
+  .list-item :global(.spectrum-Body) {
+    color: var(--spectrum-global-color-gray-900);
+  }
+  .list-item :global(.spectrum-Body) {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>

package/src/Markdown/MarkdownEditor.svelte

@@ -0,0 +1,60 @@
+<script>
+  import SpectrumMDE from "./SpectrumMDE.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = null
+  export let height = null
+  export let placeholder = null
+  export let id = null
+  export let fullScreenOffset = 0
+  export let disabled = false
+  export let easyMDEOptions
+
+  const dispatch = createEventDispatcher()
+
+  let latestValue
+  let mde
+
+  // Ensure the value is updated if the value prop changes outside the editor's
+  // control
+  $: checkValue(value)
+  $: mde?.codemirror.on("change", debouncedUpdate)
+
+  const checkValue = val => {
+    if (mde && val !== latestValue) {
+      mde.value(val)
+    }
+  }
+
+  const debounce = (fn, interval) => {
+    let timeout
+    return () => {
+      clearTimeout(timeout)
+      timeout = setTimeout(fn, interval)
+    }
+  }
+
+  const update = () => {
+    latestValue = mde.value()
+    dispatch("change", latestValue)
+  }
+
+  // Debounce the update function to avoid spamming it constantly
+  const debouncedUpdate = debounce(update, 250)
+</script>
+
+{#key height}
+  <SpectrumMDE
+    bind:mde
+    scroll={true}
+    {height}
+    {id}
+    {fullScreenOffset}
+    {disabled}
+    easyMDEOptions={{
+      initialValue: value,
+      placeholder,
+      ...easyMDEOptions,
+    }}
+  />
+{/key}

package/src/Markdown/MarkdownViewer.svelte

@@ -0,0 +1,70 @@
+<script>
+  import SpectrumMDE from "./SpectrumMDE.svelte"
+
+  export let value
+  export let height
+
+  let mde
+
+  // Keep the value up to date
+  $: mde && mde.value(value || "")
+  $: {
+    if (mde && !mde.isPreviewActive()) {
+      mde.togglePreview()
+    }
+  }
+</script>
+
+<div class="markdown-viewer" style="height:{height};">
+  <SpectrumMDE
+    bind:mde
+    scroll={false}
+    easyMDEOptions={{
+      initialValue: value,
+      toolbar: false,
+    }}
+  />
+</div>
+
+<style>
+  .markdown-viewer {
+    overflow: auto;
+  }
+  /* Remove padding, borders and background colors */
+  .markdown-viewer :global(.editor-preview) {
+    padding: 0;
+    border: none;
+    background: transparent;
+  }
+  .markdown-viewer :global(.CodeMirror) {
+    border: none;
+    background: transparent;
+    padding: 0;
+  }
+  .markdown-viewer :global(.EasyMDEContainer) {
+    background: transparent;
+  }
+  /* Hide the actual code editor */
+  .markdown-viewer :global(.CodeMirror-scroll) {
+    display: none;
+  }
+  /*Hide the scrollbar*/
+  .markdown-viewer :global(.CodeMirror-vscrollbar) {
+    display: none !important;
+  }
+  /*Position relatively so we only consume whatever space we need */
+  .markdown-viewer :global(.editor-preview-full) {
+    position: relative;
+  }
+  /* Remove margin on the first and last components to fully trim the preview */
+  .markdown-viewer :global(.editor-preview-full > :first-child) {
+    margin-top: 0;
+  }
+  .markdown-viewer :global(.editor-preview-full > :last-child) {
+    margin-bottom: 0;
+  }
+  /* Code blocks in preview */
+  .markdown-viewer :global(.editor-preview-full pre) {
+    background: var(--spectrum-global-color-gray-200);
+  }
+</style>

package/src/Markdown/SpectrumMDE.svelte

@@ -0,0 +1,184 @@
+<script>
+  import EasyMDE from "easymde"
+  import "easymde/dist/easymde.min.css"
+  import { onMount } from "svelte"
+
+  export let height = null
+  export let scroll = true
+  export let easyMDEOptions = null
+  export let mde = null
+  export let id = null
+  export let fullScreenOffset = null
+  export let disabled = false
+
+  let element
+
+  onMount(() => {
+    height = height || "200px"
+    mde = new EasyMDE({
+      element,
+      spellChecker: false,
+      status: false,
+      unorderedListStyle: "-",
+      maxHeight: scroll ? height : undefined,
+      minHeight: scroll ? undefined : height,
+      ...easyMDEOptions,
+    })
+
+    // Revert the editor when we unmount
+    return () => {
+      mde.toTextArea()
+    }
+  })
+
+  $: styleString = getStyleString(fullScreenOffset)
+
+  const getStyleString = offset => {
+    let string = ""
+    string += `--fullscreen-offset-x:${offset?.x || "0px"};`
+    string += `--fullscreen-offset-y:${offset?.y || "0px"};`
+    return string
+  }
+</script>
+
+<div class:disabled style={styleString}>
+  <textarea disabled {id} bind:this={element} />
+</div>
+
+<style>
+  /* Disabled styles */
+  .disabled :global(textarea) {
+    display: none;
+  }
+  .disabled :global(.CodeMirror-cursor) {
+    display: none;
+  }
+  .disabled :global(.EasyMDEContainer) {
+    pointer-events: none;
+  }
+  .disabled :global(.editor-toolbar button i) {
+    color: var(--spectrum-global-color-gray-400);
+  }
+  .disabled :global(.CodeMirror) {
+    color: var(--spectrum-global-color-gray-600);
+  }
+
+  /* Toolbar container */
+  :global(.EasyMDEContainer .editor-toolbar) {
+    background: var(--spectrum-global-color-gray-50);
+    border-top: 1px solid var(--spectrum-alias-border-color);
+    border-left: 1px solid var(--spectrum-alias-border-color);
+    border-right: 1px solid var(--spectrum-alias-border-color);
+  }
+  /* Main code mirror instance and default color */
+  :global(.EasyMDEContainer .CodeMirror) {
+    border: 1px solid var(--spectrum-alias-border-color);
+    background: var(--spectrum-global-color-gray-50);
+    color: var(--spectrum-alias-text-color);
+  }
+  /* Toolbar button active state */
+  :global(.EasyMDEContainer .editor-toolbar button.active) {
+    background: var(--spectrum-global-color-gray-200);
+    border-color: var(--spectrum-global-color-gray-400);
+  }
+  /* Toolbar button hover state */
+  :global(.EasyMDEContainer .editor-toolbar button:hover) {
+    background: var(--spectrum-global-color-gray-200);
+    border-color: var(--spectrum-global-color-gray-400);
+  }
+  /* Toolbar button color */
+  :global(.EasyMDEContainer .editor-toolbar button i) {
+    color: var(--spectrum-global-color-gray-800);
+  }
+  /* Separator between toolbar buttons*/
+  :global(.EasyMDEContainer .editor-toolbar i.separator) {
+    border-color: var(--spectrum-global-color-gray-300);
+  }
+  /* Cursor */
+  :global(.EasyMDEContainer .CodeMirror-cursor) {
+    border-color: var(--spectrum-alias-text-color);
+  }
+  /* Text selections */
+  :global(.EasyMDEContainer .CodeMirror-selectedtext) {
+    background: var(--spectrum-global-color-gray-400) !important;
+  }
+  /* Background of lines containing selected text */
+  :global(.EasyMDEContainer .CodeMirror-selected) {
+    background: var(--spectrum-global-color-gray-400) !important;
+  }
+  /* Color of text for images and links */
+  :global(.EasyMDEContainer .cm-s-easymde .cm-link) {
+    color: var(--spectrum-global-color-gray-600);
+  }
+  /* Color of URL for images and links */
+  :global(.EasyMDEContainer .cm-s-easymde .cm-url) {
+    color: var(--spectrum-global-color-gray-500);
+  }
+  /* Full preview window */
+  :global(.EasyMDEContainer .editor-preview) {
+    background: var(--spectrum-global-color-gray-50);
+  }
+  /* Side by side preview window */
+  :global(.EasyMDEContainer .editor-preview) {
+    border: 1px solid var(--spectrum-alias-border-color);
+  }
+  /* Code blocks in editor */
+  :global(.EasyMDEContainer .cm-s-easymde .cm-comment) {
+    background: var(--spectrum-global-color-gray-100);
+  }
+  /* Code blocks in preview */
+  :global(.EasyMDEContainer pre) {
+    background: var(--spectrum-global-color-gray-100);
+    padding: 4px;
+    border-radius: 4px;
+  }
+  :global(.EasyMDEContainer code) {
+    color: #e83e8c;
+  }
+  :global(.EasyMDEContainer pre code) {
+    color: var(--spectrum-alias-text-color);
+  }
+  /* Block quotes */
+  :global(.EasyMDEContainer blockquote) {
+    border-left: 4px solid var(--spectrum-global-color-gray-400);
+    color: var(--spectrum-global-color-gray-700);
+    margin-left: 0;
+    padding-left: 20px;
+  }
+  /* HR's */
+  :global(.EasyMDEContainer hr) {
+    background-color: var(--spectrum-global-color-gray-300);
+    border: none;
+    height: 2px;
+  }
+  /*  Tables */
+  :global(.EasyMDEContainer td, .EasyMDEContainer th) {
+    border-color: var(--spectrum-alias-border-color) !important;
+  }
+  /*  Links */
+  :global(.EasyMDEContainer a) {
+    color: var(--primaryColor);
+  }
+  :global(.EasyMDEContainer a:hover) {
+    color: var(--primaryColorHover);
+  }
+  /* Allow full screen offset */
+  :global(.EasyMDEContainer .editor-toolbar.fullscreen) {
+    left: var(--fullscreen-offset-x);
+    top: var(--fullscreen-offset-y);
+  }
+  :global(.EasyMDEContainer .CodeMirror-fullscreen) {
+    left: var(--fullscreen-offset-x);
+    top: calc(50px + var(--fullscreen-offset-y));
+  }
+
+  :global(.EasyMDEContainer .CodeMirror-fullscreen.CodeMirror-sided) {
+    width: calc((100% - var(--fullscreen-offset-x)) / 2) !important;
+  }
+
+  :global(.EasyMDEContainer .editor-preview-side) {
+    left: calc(50% + (var(--fullscreen-offset-x) / 2));
+    top: calc(50px + var(--fullscreen-offset-y));
+    width: calc((100% - var(--fullscreen-offset-x)) / 2) !important;
+  }
+</style>