@budibase/bbui 0.0.1

package/src/helpers.js

@@ -0,0 +1,116 @@
+import { helpers } from "@budibase/shared-core"
+export const deepGet = helpers.deepGet
+
+/**
+ * Generates a DOM safe UUID.
+ * Starting with a letter is important to make it DOM safe.
+ * @return {string} a random DOM safe UUID
+ */
+export function uuid() {
+  return "cxxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx".replace(/[xy]/g, c => {
+    const r = (Math.random() * 16) | 0
+    const v = c === "x" ? r : (r & 0x3) | 0x8
+    return v.toString(16)
+  })
+}
+
+/**
+ * Capitalises a string
+ * @param string the string to capitalise
+ * @return {string} the capitalised string
+ */
+export const capitalise = string => {
+  if (!string) {
+    return string
+  }
+  return string.substring(0, 1).toUpperCase() + string.substring(1)
+}
+
+/**
+ * Computes a short hash of a string
+ * @param string the string to compute a hash of
+ * @return {string} the hash string
+ */
+export const hashString = string => {
+  if (!string) {
+    return "0"
+  }
+  let hash = 0
+  for (let i = 0; i < string.length; i++) {
+    let char = string.charCodeAt(i)
+    hash = (hash << 5) - hash + char
+    hash = hash & hash // Convert to 32bit integer
+  }
+  return hash.toString()
+}
+
+/**
+ * Sets a key within an object. The key supports dot syntax for retrieving deep
+ * fields - e.g. "a.b.c".
+ * Exact matches of keys with dots in them take precedence over nested keys of
+ * the same path - e.g. setting "a.b" of { "a.b": "foo", a: { b: "bar" } }
+ * will override the value "foo" rather than "bar".
+ * If a deep path is specified and the parent keys don't exist then these will
+ * be created.
+ * @param obj the object
+ * @param key the key
+ * @param value the value
+ */
+export const deepSet = (obj, key, value) => {
+  if (!obj || !key) {
+    return
+  }
+  if (Object.prototype.hasOwnProperty.call(obj, key)) {
+    obj[key] = value
+    return
+  }
+  const split = key.split(".")
+  for (let i = 0; i < split.length - 1; i++) {
+    const nextKey = split[i]
+    if (obj && obj[nextKey] == null) {
+      obj[nextKey] = {}
+    }
+    obj = obj?.[nextKey]
+  }
+  if (!obj) {
+    return
+  }
+  obj[split[split.length - 1]] = value
+}
+
+/**
+ * Deeply clones an object. Functions are not supported.
+ * @param obj the object to clone
+ */
+export const cloneDeep = obj => {
+  if (!obj) {
+    return obj
+  }
+  return JSON.parse(JSON.stringify(obj))
+}
+
+/**
+ * Copies a value to the clipboard
+ * @param value the value to copy
+ */
+export const copyToClipboard = value => {
+  return new Promise(res => {
+    if (navigator.clipboard && window.isSecureContext) {
+      // Try using the clipboard API first
+      navigator.clipboard.writeText(value).then(res)
+    } else {
+      // Fall back to the textarea hack
+      let textArea = document.createElement("textarea")
+      textArea.value = value
+      textArea.style.position = "fixed"
+      textArea.style.left = "-9999px"
+      textArea.style.top = "-9999px"
+      document.body.appendChild(textArea)
+      textArea.focus()
+      textArea.select()
+      document.execCommand("copy")
+      textArea.remove()
+      res()
+    }
+  })
+}

package/src/index.js

@@ -0,0 +1,109 @@
+import "./bbui.css"
+
+// Spectrum icons
+import "@spectrum-css/icon/dist/index-vars.css"
+
+// Components
+export { default as Input } from "./Form/Input.svelte"
+export { default as Stepper } from "./Form/Stepper.svelte"
+export { default as TextArea } from "./Form/TextArea.svelte"
+export { default as Select } from "./Form/Select.svelte"
+export { default as Combobox } from "./Form/Combobox.svelte"
+export { default as Dropzone } from "./Form/Dropzone.svelte"
+export { default as Drawer } from "./Drawer/Drawer.svelte"
+export { default as DrawerContent } from "./Drawer/DrawerContent.svelte"
+export { default as Avatar } from "./Avatar/Avatar.svelte"
+export { default as ActionButton } from "./ActionButton/ActionButton.svelte"
+export { default as ActionGroup } from "./ActionGroup/ActionGroup.svelte"
+export { default as ActionMenu } from "./ActionMenu/ActionMenu.svelte"
+export { default as Button } from "./Button/Button.svelte"
+export { default as ButtonGroup } from "./ButtonGroup/ButtonGroup.svelte"
+export { default as ClearButton } from "./ClearButton/ClearButton.svelte"
+export { default as Icon, directions } from "./Icon/Icon.svelte"
+export { default as IconAvatar } from "./Icon/IconAvatar.svelte"
+export { default as Toggle } from "./Form/Toggle.svelte"
+export { default as RadioGroup } from "./Form/RadioGroup.svelte"
+export { default as Checkbox } from "./Form/Checkbox.svelte"
+export { default as InputDropdown } from "./Form/InputDropdown.svelte"
+export { default as PickerDropdown } from "./Form/PickerDropdown.svelte"
+export { default as EnvDropdown } from "./Form/EnvDropdown.svelte"
+export { default as DetailSummary } from "./DetailSummary/DetailSummary.svelte"
+export { default as Popover } from "./Popover/Popover.svelte"
+export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte"
+export { default as ProgressCircle } from "./ProgressCircle/ProgressCircle.svelte"
+export { default as Label } from "./Label/Label.svelte"
+export { default as Layout } from "./Layout/Layout.svelte"
+export { default as Page } from "./Layout/Page.svelte"
+export { default as Link } from "./Link/Link.svelte"
+export { default as Tooltip } from "./Tooltip/Tooltip.svelte"
+export { default as TooltipWrapper } from "./Tooltip/TooltipWrapper.svelte"
+export { default as Menu } from "./Menu/Menu.svelte"
+export { default as MenuSection } from "./Menu/Section.svelte"
+export { default as MenuSeparator } from "./Menu/Separator.svelte"
+export { default as MenuItem } from "./Menu/Item.svelte"
+export { default as Modal } from "./Modal/Modal.svelte"
+export { default as ModalContent } from "./Modal/ModalContent.svelte"
+export { default as NotificationDisplay } from "./Notification/NotificationDisplay.svelte"
+export { default as Notification } from "./Notification/Notification.svelte"
+export { default as SideNavigation } from "./SideNavigation/Navigation.svelte"
+export { default as SideNavigationItem } from "./SideNavigation/Item.svelte"
+export { default as DatePicker } from "./Form/DatePicker.svelte"
+export { default as Multiselect } from "./Form/Multiselect.svelte"
+export { default as Context } from "./context"
+export { default as Table } from "./Table/Table.svelte"
+export { default as Tabs } from "./Tabs/Tabs.svelte"
+export { default as Tab } from "./Tabs/Tab.svelte"
+export { default as Tags } from "./Tags/Tags.svelte"
+export { default as Tag } from "./Tags/Tag.svelte"
+export { default as TreeView } from "./TreeView/Tree.svelte"
+export { default as TreeItem } from "./TreeView/Item.svelte"
+export { default as Divider } from "./Divider/Divider.svelte"
+export { default as Search } from "./Form/Search.svelte"
+export { default as Pagination } from "./Pagination/Pagination.svelte"
+export { default as Badge } from "./Badge/Badge.svelte"
+export { default as StatusLight } from "./StatusLight/StatusLight.svelte"
+export { default as ColorPicker } from "./ColorPicker/ColorPicker.svelte"
+export { default as IconPicker } from "./IconPicker/IconPicker.svelte"
+export { default as InlineAlert } from "./InlineAlert/InlineAlert.svelte"
+export { default as Banner } from "./Banner/Banner.svelte"
+export { default as CopyInput } from "./Input/CopyInput.svelte"
+export { default as BannerDisplay } from "./Banner/BannerDisplay.svelte"
+export { default as MarkdownEditor } from "./Markdown/MarkdownEditor.svelte"
+export { default as MarkdownViewer } from "./Markdown/MarkdownViewer.svelte"
+export { default as RichTextField } from "./Form/RichTextField.svelte"
+export { default as List } from "./List/List.svelte"
+export { default as ListItem } from "./List/ListItem.svelte"
+export { default as IconSideNav } from "./IconSideNav/IconSideNav.svelte"
+export { default as IconSideNavItem } from "./IconSideNav/IconSideNavItem.svelte"
+export { default as Slider } from "./Form/Slider.svelte"
+export { default as Accordion } from "./Accordion/Accordion.svelte"
+export { default as File } from "./Form/File.svelte"
+
+// Renderers
+export { default as BoldRenderer } from "./Table/BoldRenderer.svelte"
+export { default as CodeRenderer } from "./Table/CodeRenderer.svelte"
+export { default as InternalRenderer } from "./Table/InternalRenderer.svelte"
+
+// Typography
+export { default as Body } from "./Typography/Body.svelte"
+export { default as Heading } from "./Typography/Heading.svelte"
+export { default as Detail } from "./Typography/Detail.svelte"
+export { default as Code } from "./Typography/Code.svelte"
+
+// Core form components to be used elsewhere (standard components)
+export * from "./Form/Core"
+
+// Actions
+export { default as autoResizeTextArea } from "./Actions/autoresize_textarea"
+export { default as positionDropdown } from "./Actions/position_dropdown"
+export { default as clickOutside } from "./Actions/click_outside"
+
+// Stores
+export { notifications, createNotificationStore } from "./Stores/notifications"
+export { banner, BANNER_TYPES } from "./Stores/banner"
+
+// Helpers
+export * as Helpers from "./helpers"
+
+// Fancy form components
+export * from "./FancyForm"

package/src/spectrum-icons-rollup.js

@@ -0,0 +1,31 @@
+import SpectrumUIIcons from "@spectrum-css/icon/dist/spectrum-css-icons.svg"
+import SpectrumWorkflowIcons from "@adobe/spectrum-css-workflow-icons/dist/spectrum-icons.svg"
+
+export default () => {
+  loadIconSet("Spectrum UI Icons", SpectrumUIIcons)
+  loadIconSet("Spectrum Workflow Icons", SpectrumWorkflowIcons)
+}
+
+const loadIconSet = (name, markup) => {
+  // Parse the SVG
+  const parser = new DOMParser()
+  try {
+    const doc = parser.parseFromString(markup, "image/svg+xml")
+    const svg = doc.firstChild
+
+    // Check a real SVG was parsed
+    if (svg && svg.tagName === "svg") {
+      // Hide the element
+      svg.style.display = "none"
+
+      // Insert it into the head
+      document.head.insertBefore(svg, null)
+    } else {
+      throw "Invalid tag type for SVG definition"
+    }
+  } catch (err) {
+    // Swallow error, but icons won't work
+    console.error(err)
+    console.error(`Failed to parse ${name}. Icons won't work.`)
+  }
+}

package/src/spectrum-icons-vite.js

@@ -0,0 +1,31 @@
+import SpectrumUIIcons from "@spectrum-css/icon/dist/spectrum-css-icons.svg?raw"
+import SpectrumWorkflowIcons from "@adobe/spectrum-css-workflow-icons/dist/spectrum-icons.svg?raw"
+
+export default () => {
+  loadIconSet("Spectrum UI Icons", SpectrumUIIcons)
+  loadIconSet("Spectrum Workflow Icons", SpectrumWorkflowIcons)
+}
+
+const loadIconSet = (name, markup) => {
+  // Parse the SVG
+  const parser = new DOMParser()
+  try {
+    const doc = parser.parseFromString(markup, "image/svg+xml")
+    const svg = doc.firstChild
+
+    // Check a real SVG was parsed
+    if (svg && svg.tagName === "svg") {
+      // Hide the element
+      svg.style.display = "none"
+
+      // Insert it into the head
+      document.head.insertBefore(svg, null)
+    } else {
+      throw "Invalid tag type for SVG definition"
+    }
+  } catch (err) {
+    // Swallow error, but icons won't work
+    console.error(err)
+    console.error(`Failed to parse ${name}. Icons won't work.`)
+  }
+}