@symbo.ls/default-config 3.8.9 → 3.14.1

package/components/Link.js

@@ -0,0 +1,166 @@
+'use strict'
+
+import { router as defaultRouter } from '@symbo.ls/router'
+import { resolvePropValue } from 'attrs-in-props'
+
+// SPA-by-default click handler. `Link` mixes this in below so internal hrefs
+// route through the smbls router instead of triggering a full page reload.
+// External schemes (http(s), mailto:, tel:, etc.) fall through to the browser.
+const routerOnClick = (event, el, s) => {
+  const { context: ctx } = el
+  const { href: h, scrollToTop, stopPropagation } = el
+  let href = el.call('exec', h, el)
+
+  if (el.call('isString', href) && href.includes('{{')) {
+    href = el.call('replaceLiteralsWithObjectFields', href)
+  }
+
+  if (stopPropagation) event.stopPropagation()
+  if (!href) return
+  const { utils, snippets, functions, routerOptions } = ctx
+  const root = el.__ref.root
+  const linkIsExternal =
+    href.startsWith('http://') ||
+    href.startsWith('https://') ||
+    href.startsWith('mailto:') ||
+    href.startsWith('tel:') ||
+    href.startsWith('sketch:') ||
+    href.startsWith('whatsapp:') ||
+    href.startsWith('sms:') ||
+    href.startsWith('skype:') ||
+    href.startsWith('viber:') ||
+    href.startsWith('callto:') ||
+    href.startsWith('facetime:') ||
+    href.startsWith('facetime-audio:') ||
+    href.startsWith('geo:') ||
+    href.startsWith('maps:')
+  if (href && !linkIsExternal) {
+    event.preventDefault()
+    try {
+      let targetEl = root
+      if (routerOptions && routerOptions.customRouterElement) {
+        const parts = Array.isArray(routerOptions.customRouterElement)
+          ? routerOptions.customRouterElement
+          : routerOptions.customRouterElement.split('.')
+        let resolved = root
+        for (const part of parts) {
+          if (!resolved || !resolved[part]) { resolved = null; break }
+          resolved = resolved[part]
+        }
+        if (resolved) {
+          targetEl = resolved
+          if (root.routes) targetEl.routes = root.routes
+        }
+      }
+      ;(functions.router || snippets.router || utils.router || defaultRouter)(
+        href,
+        targetEl,
+        {},
+        {
+          scrollToOptions: { behaviour: 'instant' },
+          scrollToTop: el.call('isDefined', scrollToTop) ? scrollToTop : true,
+          ...routerOptions,
+          ...el.routerOptions
+        }
+      )
+    } catch (e) {
+      console.warn(e)
+    }
+  }
+}
+
+export const Link = {
+  extends: 'Focusable',
+  tag: 'a',
+
+  aria: {},
+  fontWeight: 'bold',
+  textDecoration: 'none',
+  color: 'currentColor',
+  draggable: false,
+
+  attr: {
+    href: (el) => {
+      return resolvePropValue(el, el.href) ||
+        resolvePropValue(el, el.call('exec', el, el).href)
+    },
+    'aria-label': (el) => (el.aria ? el.aria.label : el.text)
+  },
+
+  onClick: routerOnClick
+}
+
+export const A = {
+  extends: 'Link'
+}
+
+// Kept for backwards compatibility — `Link` already has the router onClick
+// built in, so `RouterLink` and `RouteLink` are now thin aliases.
+export const RouterLink = {
+  onClick: (event, el, s) => {
+    const { context: ctx } = el
+    const { href: h, scrollToTop, stopPropagation } = el
+    let href = el.call('exec', h, el)
+
+    if (el.call('isString', href) && href.includes('{{')) {
+      href = el.call('replaceLiteralsWithObjectFields', href)
+    }
+
+    if (stopPropagation) event.stopPropagation()
+    if (!href) return
+    const { utils, snippets, functions, routerOptions } = ctx
+    const root = el.__ref.root
+    const linkIsExternal =
+      href.startsWith('http://') ||
+      href.startsWith('https://') ||
+      href.startsWith('mailto:') ||
+      href.startsWith('tel:') ||
+      href.startsWith('sketch:') ||
+      href.startsWith('whatsapp:') ||
+      href.startsWith('sms:') ||
+      href.startsWith('skype:') ||
+      href.startsWith('viber:') ||
+      href.startsWith('callto:') ||
+      href.startsWith('facetime:') ||
+      href.startsWith('facetime-audio:') ||
+      href.startsWith('geo:') ||
+      href.startsWith('maps:')
+    if (href && !linkIsExternal) {
+      event.preventDefault()
+      try {
+        let targetEl = root
+        if (routerOptions && routerOptions.customRouterElement) {
+          const parts = Array.isArray(routerOptions.customRouterElement)
+            ? routerOptions.customRouterElement
+            : routerOptions.customRouterElement.split('.')
+          let resolved = root
+          for (const part of parts) {
+            if (!resolved || !resolved[part]) { resolved = null; break }
+            resolved = resolved[part]
+          }
+          if (resolved) {
+            targetEl = resolved
+            if (root.routes) targetEl.routes = root.routes
+          }
+        }
+        ;(functions.router || snippets.router || utils.router || defaultRouter)(
+          href,
+          targetEl,
+          {},
+          {
+            scrollToOptions: { behaviour: 'instant' },
+            scrollToTop: el.call('isDefined', scrollToTop) ? scrollToTop : true,
+            ...routerOptions,
+            ...el.routerOptions
+          }
+        )
+      } catch (e) {
+        console.warn(e)
+      }
+    }
+  }
+}
+
+export const RouteLink = {
+  extends: [Link, RouterLink]
+}

package/components/Notification.js

@@ -0,0 +1,43 @@
+'use strict'
+
+export const Notification = {
+  display: 'flex',
+  theme: 'alert',
+  padding: 'Z1 B Z A',
+  round: 'A A A Y2',
+  gap: 'X2',
+  cursor: 'pointer',
+  align: 'flex-start center',
+
+  IconText: {
+    Icon: {
+      name: 'info outline'
+    },
+    Text: {
+      ':empty': { hide: true }
+    }
+  },
+
+  Hgroup: {
+    extends: ['Flex', 'Hgroup'],
+    flow: 'y',
+    align: 'flex-start',
+    gap: 'X2',
+
+    H: {
+      tag: 'h6',
+      margin: '0',
+      fontWeight: '600',
+      lineHeight: '1em',
+      text: 'Notification',
+      ':empty': { hide: true }
+    },
+
+    P: {
+      fontSize: 'Z',
+      margin: '0',
+      text: 'is not always a distraction',
+      ':empty': { hide: true }
+    }
+  }
+}

package/components/Range.js

@@ -0,0 +1,106 @@
+'use strict'
+
+import { opacify } from '@symbo.ls/scratch'
+
+export const Range = {
+  tag: 'input',
+
+  appearance: 'none',
+  width: '100%',
+  height: '2px',
+  outline: 'none',
+  flex: 1,
+
+  onInput: (ev, el, s) => {
+    if (el.call('isFunction', el.onInput)) {
+      el.onInput(ev, el, s)
+    } else {
+      s.update({ value: parseFloat(el.node.value) })
+    }
+  },
+  onChange: (ev, el, s) => {
+    if (el.call('isFunction', el.onChange)) {
+      el.onChange(ev, el, s)
+    } else {
+      s.update({ value: parseFloat(el.node.value) })
+    }
+  },
+
+  '::-webkit-slider-thumb': {
+    boxSizing: 'content-box',
+    width: '8px',
+    height: '8px',
+    borderWidth: '2px',
+    borderStyle: 'solid',
+    borderRadius: '100%',
+    opacity: '.8',
+    appearance: 'none'
+  },
+
+  '::-webkit-slider-runnable-track': {},
+
+  '@dark': {
+    background: 'white.2',
+
+    '::-webkit-slider-thumb': {
+      background: '#232526',
+      borderColor: opacify('#454646', 0.75)
+    },
+
+    ':hover': {
+      '::-webkit-slider-thumb': {
+        borderColor: opacify('#fff', 0.35)
+      }
+    },
+
+    ':focus': {
+      '::-webkit-slider-thumb': {
+        borderColor: '#3C6AC0'
+      }
+    }
+  },
+
+  '@light': {
+    background: 'gray9',
+
+    '::-webkit-slider-thumb': {
+      background: 'white',
+      borderColor: 'gray9'
+    },
+
+    ':hover': {
+      '::-webkit-slider-thumb': {
+        borderColor: 'gray7'
+      }
+    },
+
+    ':focus': {
+      '::-webkit-slider-thumb': {
+        borderColor: 'blue'
+      }
+    }
+  },
+
+  deps: {
+    returnPropertyValue: (el, property, def) => {
+      const val = el.call('exec', el[property], el)
+      const r = el.call('isFunction', val)
+        ? val(el, el.state)
+        : val !== undefined
+        ? val
+        : def !== undefined
+        ? def
+        : 0
+      return r + ''
+    }
+  },
+
+  attr: {
+    type: 'range',
+    value: (el, s) =>
+      el.call('exec', s.value || el.value || el.defaultValue, el),
+    min: (el, s) => el.deps.returnPropertyValue(el, 'min', 0),
+    max: (el, s) => el.deps.returnPropertyValue(el, 'max', 100),
+    step: (el, s) => el.deps.returnPropertyValue(el, 'step', 1)
+  }
+}

package/components/Select.js

@@ -0,0 +1,33 @@
+'use strict'
+
+export const Select = {
+  extends: 'Focusable',
+  tag: 'select',
+
+  fontSize: 'A',
+  border: 'none',
+  boxSizing: 'border-box',
+  theme: 'field',
+  cursor: 'pointer',
+  childProps: {
+    tag: 'option',
+    attr: {
+      value: (el) => el.value,
+      selected: (el) => el.selected,
+      disabled: (el) => el.disabled
+    }
+  },
+
+  attr: {
+    name: (el) => el.name,
+    disabled: (el) => el.disabled,
+    value: el => {
+      if (!el.value) return
+      const val = el.call('exec', el.value, el)
+      if (el.call('isString', val) && val.includes('{{')) {
+        return el.call('replaceLiteralsWithObjectFields', val)
+      }
+      return val
+    }
+  }
+}

package/components/Tooltip/index.js

@@ -0,0 +1,133 @@
+'use strict'
+
+import { isDefined } from '@symbo.ls/utils'
+
+export const Tooltip = {
+  display: 'flex',
+
+  theme: 'dialog',
+  background: 'black',
+  flow: 'column',
+  shape: 'tooltip',
+  shapeDirection: 'left',
+  padding: 'Z1 A',
+  round: 'Y2',
+  width: 'fit-content',
+  minWidth: 'D2',
+  maxWidth: 'F2',
+  gap: 'X',
+  textAlign: 'center',
+  attr: { tooltip: true },
+
+  Title: {
+    // FA106: canonical signature is `(el, s)` — destructure-from-object is
+    // banned because frank's audit flags it and it's inconsistent with
+    // every other reactive prop in the codebase. The `({ parent }) =>`
+    // shape happens to work at runtime (the destructure pulls `parent`
+    // out of `el`) but breaks on any project that runs frank-audit.
+    if: (el) => isDefined(el.parent.title) || el.parent.title,
+    width: 'fit-content',
+    fontWeight: 500,
+    color: 'gray12',
+    text: (el) => el.parent.title
+  },
+
+  P: {
+    if: (el, s) =>
+      el.call('isDefined', el.call('exec', el.parent.description, el)) ||
+      el.text,
+    width: 'fit-content',
+    fontSize: 'Z2',
+    margin: '0',
+    color: 'gray6',
+    fontWeight: '400',
+    text: (el, s) => el.call('exec', el.parent.description, el)
+  }
+}
+
+export const TooltipHidden = {
+  extends: 'Tooltip',
+
+  position: 'absolute',
+  pointerEvents: 'none',
+  opacity: '0',
+  visibility: 'hidden',
+  transition:
+    'C defaultBezier opacity, C defaultBezier visibility, B defaultBezier transform',
+
+  onInit: (el) => {
+    const result = !el.shapeDirection || el.shapeDirection === 'top'
+      ? {
+          top: '112%',
+          left: '50%',
+          transform: 'translate3d(-50%,10%,0)',
+
+          '.isActive': {
+            transform: 'translate3d(-50%,0,0)',
+            opacity: 1,
+            visibility: 'visible'
+          }
+        }
+      : el.shapeDirection === 'right'
+      ? {
+          transform: 'translate3d(10%,-50%,0)',
+          left: '112%',
+          top: '50%',
+
+          '.isActive': {
+            transform: 'translate3d(0%,-50%,0)',
+            opacity: 1,
+            visibility: 'visible'
+          }
+        }
+      : el.shapeDirection === 'bottom'
+      ? {
+          transform: 'translate3d(-50%,-10%,0)',
+          bottom: '112%',
+          left: '50%',
+
+          '.isActive': {
+            transform: 'translate3d(-50%,0,0)',
+            opacity: 1,
+            visibility: 'visible'
+          }
+        }
+      : el.shapeDirection === 'left'
+      ? {
+          transform: 'translate3d(10%,-50%,0)',
+          right: '112%',
+          top: '50%',
+
+          '.isActive': {
+            transform: 'translate3d(0%,-50%,0)',
+            opacity: 1,
+            visibility: 'visible'
+          }
+        }
+      : {}
+    Object.assign(el, result)
+  }
+}
+
+export const TooltipParent = {
+  position: 'relative',
+  zIndex: 999,
+
+  onInit: (el) => {
+    const { Tooltip, TooltipHidden } = el
+    const TooltipElem = Tooltip || TooltipHidden
+    if (!TooltipElem) return
+    const TooltipActive =
+      TooltipElem && TooltipElem['.isActive']
+    Object.assign(el, {
+      ':hover, &:focus-visible': {
+        zIndex: 1000,
+        '& [tooltip]': TooltipActive || {
+          transform: 'translate3d(-50%, 0, 0)',
+          opacity: 1,
+          visibility: 'visible'
+        }
+      }
+    })
+  }
+}

package/components/Tooltip/style.js

@@ -0,0 +1,12 @@
+'use strict'
+
+export default {
+  textAlign: 'center',
+  padding: '1.2em',
+  caption: {
+    whiteSpace: 'nowrap'
+  },
+  span: {
+    opacity: '.5'
+  }
+}

package/components/index.js

@@ -0,0 +1,91 @@
+'use strict'
+
+// Atoms
+import * as _Block from './Atoms/Block.js'
+import * as _Img from './Atoms/Img.js'
+import * as _Form from './Atoms/Form.js'
+import * as _Iframe from './Atoms/Iframe.js'
+import * as _InteractiveComponent from './Atoms/InteractiveComponent.js'
+import * as _Picture from './Atoms/Picture.js'
+import * as _AssetPicture from './Atoms/AssetPicture.js'
+import * as _Svg from './Atoms/Svg.js'
+import * as _Shape from './Atoms/Shape.js'
+import * as _Video from './Atoms/Video.js'
+import * as _Audio from './Atoms/Audio.js'
+import * as _Theme from './Atoms/Theme.js'
+import * as _Text from './Atoms/Text.js'
+import * as _Box from './Atoms/Box.js'
+import * as _Hgroup from './Atoms/Hgroup.js'
+
+// Input
+import * as _Input from './Input/Input.js'
+import * as _NumberInput from './Input/NumberInput.js'
+import * as _Checkbox from './Input/Checkbox.js'
+import * as _Radio from './Input/Radio.js'
+import * as _Toggle from './Input/Toggle.js'
+import * as _Textarea from './Input/Textarea.js'
+
+// Components
+import * as _Icon from './Icon/index.js'
+import * as _Link from './Link.js'
+import * as _Select from './Select.js'
+import * as _Button from './Button.js'
+import * as _Dialog from './Dialog.js'
+import * as _Tooltip from './Tooltip/index.js'
+import * as _Avatar from './Avatar.js'
+import * as _Range from './Range.js'
+import * as _Dropdown from './Dropdown.js'
+import * as _Notification from './Notification.js'
+
+// Re-export named exports for direct consumers (e.g.
+// `import { Box } from '@symbo.ls/default-config/components'`).
+export * from './Atoms/Block.js'
+export * from './Atoms/Img.js'
+export * from './Atoms/Form.js'
+export * from './Atoms/Iframe.js'
+export * from './Atoms/InteractiveComponent.js'
+export * from './Atoms/Picture.js'
+export * from './Atoms/AssetPicture.js'
+export * from './Atoms/Svg.js'
+export * from './Atoms/Shape.js'
+export * from './Atoms/Video.js'
+export * from './Atoms/Audio.js'
+export * from './Atoms/Theme.js'
+export * from './Atoms/Text.js'
+export * from './Atoms/Box.js'
+export * from './Atoms/Hgroup.js'
+
+export * from './Input/Input.js'
+export * from './Input/NumberInput.js'
+export * from './Input/Checkbox.js'
+export * from './Input/Radio.js'
+export * from './Input/Toggle.js'
+export * from './Input/Textarea.js'
+
+export * from './Icon/index.js'
+export * from './Link.js'
+export * from './Select.js'
+export * from './Button.js'
+export * from './Dialog.js'
+export * from './Tooltip/index.js'
+export * from './Avatar.js'
+export * from './Range.js'
+export * from './Dropdown.js'
+export * from './Notification.js'
+
+// FT-FRAMEWORK-1: explicit components manifest. Built by spreading every
+// atom/component module's named exports into one plain object. Parcel
+// (under smbls's `sideEffects: false`) sometimes pruned exports off the
+// `import * as uikit from '...'` namespace that prepare.js iterated, so
+// consumer projects saw atoms missing from `context.components`. This
+// dict is bundler-agnostic — it's a regular object literal whose
+// references are statically locked into the module by `Object.assign`.
+export const COMPONENTS = Object.assign(
+  {},
+  _Block, _Img, _Form, _Iframe, _InteractiveComponent,
+  _Picture, _AssetPicture, _Svg, _Shape, _Video, _Audio,
+  _Theme, _Text, _Box, _Hgroup,
+  _Input, _NumberInput, _Checkbox, _Radio, _Toggle, _Textarea,
+  _Icon, _Link, _Select, _Button, _Dialog, _Tooltip,
+  _Avatar, _Range, _Dropdown, _Notification
+)

package/default/font.js

@@ -6,7 +6,7 @@ export const font = {
   }]
 }
 
-export const font_family = {
+export const fontFamily = {
   system: {
     value: ['"Helvetica Neue"', 'Helvetica', 'Arial'],
     type: 'sans-serif',

package/default/index.js

@@ -4,7 +4,7 @@ import { color, gradient } from './color.js'
 import { theme } from './theme.js'
 import { typography } from './typography.js'
 import { spacing } from './spacing.js'
-import { font, font_family } from './font.js'
+import { font, fontFamily } from './font.js'
 import { icons } from './icons.js'
 import { media } from './media.js'
 import { timing } from './timing.js'
@@ -17,7 +17,7 @@ export const DEFAULT_CONFIG = {
   typography,
   spacing,
   font,
-  font_family,
+  fontFamily,
   timing,
   icons,
   media,

package/designSystem/color.js

@@ -0,0 +1,70 @@
+'use strict'
+
+export const color = {
+  blue: '#213eb0',
+  green: '#389d34',
+  red: '#e15c55',
+  yellow: '#EDCB38',
+  orange: '#e97c16',
+  transparent: 'rgba(0, 0, 0, 0)',
+  black: 'black',
+  gray: '#4e4e50',
+  white: 'white',
+  title: [
+    '--gray 1 -168',
+    '--gray 1 +168'
+  ],
+  caption: [
+    '--gray 1 -68',
+    '--gray 1 +68'
+  ],
+  paragraph: [
+    '--gray 1 -42',
+    '--gray 1 +42'
+  ],
+  disabled: [
+    '--gray 1 -26',
+    '--gray 1 +26'
+  ],
+  line: [
+    '--gray 1 -16',
+    '--gray 1 +16'
+  ]
+}
+
+export const gradient = {
+  'gradient-blue-light': `linear-gradient(to right,
+    rgba(4, 116, 242, 1),
+    rgba(0, 48, 103, 1)
+  )`,
+  'gradient-blue-dark': `linear-gradient(to right,
+    #0474F2,
+    #003067
+  )`,
+
+  'gradient-dark': `linear-gradient(0deg,
+    rgba(0,0,0,0.06) 0%,
+    rgba(0,0,0,0.07) 100%
+  )`,
+  'gradient-dark-active': `linear-gradient(0deg,
+    rgba(0,0,0,0.09) 0%,
+    rgba(0,0,0,0.1) 100%
+  )`,
+  'gradient-light': `linear-gradient(
+    0deg,
+    rgba(255,255,255,0.05) 0%,
+    rgba(255,255,255,0.06) 100%
+  )`,
+  'gradient-light-active': `linear-gradient(
+    0deg,
+    rgba(255,255,255,0.09) 0%,
+    rgba(255,255,255,0.10) 100%
+  )`,
+  'gradient-colorful': `linear-gradient(60deg,
+    #00A2E7 0%,
+    #185DF3 31%,
+    #1E54F0 36%,
+    #8B4CCA 69%,
+    #C66894 100%
+  )`
+}