smbls 0.6.24 → 0.8.4

package/src/Field/style.js

@@ -0,0 +1,30 @@
+'use strict'
+
+import { TYPOGRAPHY } from '@symbo.ls/scratch'
+
+const primaryFont = Object.keys(TYPOGRAPHY)[0]
+const defaultFont = primaryFont || '--system-default'
+
+export default {
+  appearance: 'none',
+  outline: 0,
+  border: 'none',
+  cursor: 'pointer',
+  fontFamily: 'inherit',
+  boxSizing: 'border-box',
+  position: 'relative',
+  padding: 0,
+
+  width: '16em',
+
+  input: {
+    width: '100%',
+    height: '100%',
+    border: 'none'
+  },
+
+  svg: {
+    position: 'absolute',
+    right: '1em'
+  }
+}

package/src/Flex/index.js

@@ -0,0 +1,20 @@
+'use strict'
+
+import style from './style'
+import { mapBasedOnRatio } from '../Block'
+
+export const Flex = {
+  style,
+
+  props: {
+    flow: 'row'
+  },
+
+  class: {
+    flow: ({ props }) => ({ flexFlow: props.flow }),
+    flexDirection: ({ props }) => ({ flexDirection: props.flexDirection }),
+    alignItems: ({ props }) => ({ alignItems: props.alignItems }),
+    justifyContent: ({ props }) => ({ justifyContent: props.justifyContent }),
+    gap: ({ props }) => mapBasedOnRatio(props, 'gap')
+  }
+}

package/src/Flex/style.js

@@ -0,0 +1,5 @@
+'use strict'
+
+export default {
+  display: 'flex'
+}

package/src/Grid/index.js

@@ -0,0 +1,18 @@
+'use strict'
+
+import style from './style'
+import { mapBasedOnRatio } from '../Block'
+
+export const Grid = {
+  style,
+
+  props: {},
+
+  class: {
+    columns: ({ props }) => ({ gridTemplateColumns: props.columns }),
+    rows: ({ props }) => ({ gridTemplateRows: props.rows }),
+    gap: ({ props }) => mapBasedOnRatio(props, 'gap'),
+    columnGap: ({ props }) => mapBasedOnRatio(props, 'columnGap'),
+    rowGap: ({ props }) => mapBasedOnRatio(props, 'rowGap')
+  }
+}

package/src/Grid/style.js

@@ -0,0 +1,5 @@
+'use strict'
+
+export default {
+  display: 'grid'
+}

package/src/GridLayouts/index.js

@@ -0,0 +1,20 @@
+'use strict'
+
+import { Button, Link } from '..'
+
+import { styleGrid, styleGrid2 } from './style'
+
+const componentLink = {
+  proto: Link,
+  attr: {
+    href: '#'
+  }
+}
+
+export const grid = {
+  style: styleGrid
+}
+
+export const grid2 = {
+  style: styleGrid2
+}

package/src/GridLayouts/style.js

@@ -0,0 +1,47 @@
+'use strict'
+
+export const styleGrid = {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(15, 1fr)',
+  boxSizing: 'border-box',
+  padding: '0 8em',
+  marginBottom: '2em',
+  rowGap: '10px',
+  gridAutoColumns: 'auto',
+  gridAutoRows: 'auto',
+  gridAutoFlow: 'column',
+  '> a': {
+    padding: '70px 0',
+    display: 'flex',
+    justifyContent: 'center',
+    background: 'rgba(255, 255, 255, .05)',
+    borderRadius: '12px',
+    alignItems: 'center'
+  },
+  '> a:first-child': {
+    gridColumn: '1 / span 15'
+  },
+  '> a:nth-child(2)': {
+    gridRow: '2',
+    gridColumn: '1 / span 3',
+    marginRight: '10px'
+  },
+  '> a:nth-child(3)': {
+    gridRow: '2',
+    gridColumn: '4 / span 6',
+    marginRight: '10px'
+  },
+  '> a:nth-child(4)': {
+    gridRow: '2',
+    gridColumn: '10 / span 15'
+  },
+  '> a:nth-child(5)': {
+    gridRow: '3',
+    gridColumn: '1 / span 6',
+    marginRight: '10px'
+  },
+  '> a:nth-child(6)': {
+    gridRow: '3',
+    gridColumn: '7 / span 15'
+  }
+}

package/src/Icon/index.js

@@ -0,0 +1,14 @@
+'use strict'
+
+import style from './style'
+
+import { SVG } from '..'
+
+export const Icon = {
+  proto: SVG,
+  style,
+  define: { name: param => param },
+  name: ({ props }) => props.icon,
+  attr: { viewBox: '0 0 24 24' },
+  src: ({ key, name }) => name || key || 'noIcon'
+}

package/src/Icon/style.js

@@ -0,0 +1,8 @@
+'use strict'
+
+export default {
+  width: '1em',
+  height: '1em',
+  fill: 'currentColor',
+  display: 'inline-block'
+}

package/src/IconText/index.js

@@ -0,0 +1,18 @@
+'use strict'
+
+import style from './style'
+
+import { Icon, Text, Direction, Block } from '../'
+import { } from '../Flex'
+
+export const IconText = {
+  style,
+
+  props: {
+    flexAlign: 'center flex-start'
+  },
+
+  icon: { proto: Icon, if: ({ parent }) => parent.props.icon, props: ({ parent }) => ({ icon: parent.props.icon }) },
+
+  text: ({ props }) => props.text
+}

package/src/IconText/style.js

@@ -0,0 +1,12 @@
+'use strict'
+
+export default {
+  display: 'flex',
+  alignItems: 'center',
+  alignContent: 'center',
+  lineHeight: 1,
+
+  '> svg': {
+    // marginInlineEnd: `${0.35}em`
+  }
+}

package/src/Img/index.js

@@ -0,0 +1,17 @@
+'use strict'
+
+export const Img = {
+  tag: 'img',
+
+  props: {
+    src: '',
+    alt: '',
+    title: ''
+  },
+
+  attr: {
+    src: ({ props }) => props.src,
+    alt: ({ props }) => props.alt,
+    title: ({ props }) => props.title || props.alt
+  }
+}

package/src/Input/index.js

@@ -0,0 +1,32 @@
+'use strict'
+
+import { Box } from '..'
+
+export const Input = {
+  proto: Box,
+  tag: 'input',
+
+  props: {
+    type: 'input',
+    // value: s[el.key],
+    // placeholder: '',
+    round: 'C',
+    padding: 'A B',
+    theme: 'transparent'
+  },
+
+  attr: {
+    placeholder: ({ props }) => props.placeholder,
+    value: ({ props }) => props.value,
+    disabled: ({ props }) => props.disabled || null,
+    readonly: ({ props }) => props.readonly,
+    required: ({ props }) => props.required,
+    type: ({ props }) => props.type
+  },
+
+  on: {
+    input: ({ key, value, props }) => {
+
+    }
+  }
+}

package/src/Label/index.js

@@ -0,0 +1,20 @@
+'use strict'
+import { Block } from '../Block'
+import { Shape } from '../Shape'
+import { Text } from '../Text'
+
+export const Label = {
+  proto: [Shape, Block, Text],
+
+  style: { lineHeight: 1 },
+
+  props: {
+    emoji: '👍',
+    text: '3',
+    padding: 'X2 Z',
+    round: 'C',
+    depth: 16
+  },
+
+  emoji: ({ props }) => props.emoji
+}

package/src/Link/index.js

@@ -0,0 +1,19 @@
+'use strict'
+
+import { Shape, Text } from '..'
+
+export const Link = {
+  proto: [Shape, Text],
+  tag: 'a',
+  props: {
+    href: '',
+    target: '',
+    theme: 'link',
+    aria: {}
+  },
+  attr: {
+    href: ({ props }) => props.href,
+    target: ({ props }) => props.target,
+    'aria-label': ({ props }) => props.aria.label || props.text
+  }
+}

package/src/Notification/index.js

@@ -0,0 +1,37 @@
+'use strict'
+
+import { Shape, Block, IconText, Direction, Flex, Text } from '../'
+
+export const Notification = {
+  style: { cursor: 'pointer' },
+  proto: [Shape, Block, Direction, Flex],
+  icon: {
+    proto: [IconText],
+    props: {
+      icon: 'info'
+    },
+    style: {
+      width: 'fit-content',
+      height: 'fit-content'
+    }
+  },
+  article: {
+    proto: [Flex],
+    style: {
+      flexDirection: 'column',
+      alignItems: 'flex-start'
+    },
+    caption: {
+      proto: Text,
+      text: 'Notification'
+    },
+    p: {
+      proto: Text,
+      props: {
+        fontSize: 'Z',
+        text: 'is not always a distraction'
+      },
+      style: { margin: 0 }
+    }
+  }
+}

package/src/Overflow/index.js

@@ -0,0 +1,7 @@
+'use strict'
+
+export const Overflow = {
+  class: {
+    overflow: ({ props }) => ({ overflow: props.overflow }),
+  }
+}

package/src/Pills/index.js

@@ -0,0 +1,30 @@
+'use strict'
+import Shape from '../Shape'
+
+export const Pills = {
+  style: {
+    display: 'flex',
+    div: {
+      width: '6px',
+      height: '6px',
+      background: 'white'
+    },
+    'div:not(:last-child)': {
+      marginRight: '10px'
+    },
+    'div:first-child': { opacity: '.5' },
+    'div:nth-child(2)': { opacity: '.3' },
+    'div:nth-child(3)': { opacity: '.3' }
+  },
+  childProto: {
+    tag: 'div',
+    proto: Shape,
+    props: {
+      round: 42,
+      theme: 'White'
+    }
+  },
+  ...[
+    {}, {}, {}
+  ]
+}

package/src/Position/index.js

@@ -0,0 +1,21 @@
+'use strict'
+
+import { mapSpacing } from '@symbo.ls/scratch'
+
+export const Position = {
+  props: {},
+
+  class: {
+    position: ({ props }) => props.position && ({ position: props.position }),
+    inset: ({ props }) => {
+      const { inset } = props
+      if (typeof inset !== 'string') return
+      return { inset: inset.split(' ').map(v => mapSpacing(v,'k').k).join(' ') }
+    },
+
+    left: ({ props }) => mapSpacing(props.left, 'left'),
+    top: ({ props }) => mapSpacing(props.top, 'top'),
+    right: ({ props }) => mapSpacing(props.right, 'right'),
+    bottom: ({ props }) => mapSpacing(props.bottom, 'bottom')
+  }
+}

package/src/Responsive/index.js

@@ -0,0 +1,48 @@
+'use strict'
+
+import { RESPONSIVE } from '@symbo.ls/scratch'
+
+export const Responsive = {
+  on: {
+    init: (el, s) => {
+      const { props } = el
+
+      // Object.keys(props)
+      //   .filter(v => v.slice(0, 1) === '@')
+      //   .map()
+
+      for (const screen in props) {
+        if (screen.slice(0, 1) === '@') {
+          const screenName = screen.slice(1)
+          const responsiveKey = `@media screen and ${RESPONSIVE[screenName]}`
+          const screenProps = props[screen]
+          const calculatedScreenProps = {}
+
+          for (const prop in screenProps) {
+            // if (!el.class || !el.class[prop]) return
+            // const classProp = el.class[prop]
+            const classProp = el.class[prop]
+            if (typeof classProp !== 'function') continue
+            let calculatedProp = classProp({ props: screenProps })
+
+            if (Array.isArray(calculatedProp)) {
+              calculatedProp = Object.assign({}, ...calculatedProp)
+            }
+
+            for (const finalProp in calculatedProp) {
+              calculatedScreenProps[finalProp] = calculatedProp[finalProp]
+            }
+          }
+
+          const { responsive } = el.class
+          if (responsive) responsive[responsiveKey] = calculatedScreenProps
+          else {
+            el.class.responsive = {
+              [responsiveKey]: calculatedScreenProps
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/SVG/index.js

@@ -0,0 +1,14 @@
+'use strict'
+
+var useSVGSymbol = file => `<use xlink:href="${file}" />`
+
+// create icon
+export const SVG = {
+  tag: 'svg',
+  attr: {
+    xmlns: 'http://www.w3.org/2000/svg',
+    'xmlns:xlink': 'http://www.w3.org/1999/xlink'
+  },
+  define: { src: param => param },
+  html: ({ key, src, props }) => useSVGSymbol(props.src || src || key)
+}

package/src/Select/index.js

@@ -0,0 +1,24 @@
+'use strict'
+
+import Shape from '../Shape'
+import style from './style'
+
+export const Select = {
+  proto: Shape,
+  tag: 'select',
+  style,
+
+  childProto: {
+    tag: 'option',
+    props: {
+      value: '',
+      selected: '',
+      disabled: ''
+    },
+    attr: {
+      value: ({ props }) => props.value,
+      selected: ({ props }) => props.selected,
+      disabled: ({ props }) => props.disabled
+    }
+  }
+}

package/src/Select/style.js

@@ -0,0 +1,8 @@
+'use strict'
+
+export default {
+  border: 'none',
+  boxSizing: 'border-box',
+  cursor: 'pointer',
+  fontSize: '1em'
+}

package/src/Shape/index.js

@@ -0,0 +1,66 @@
+'use strict'
+
+import { mapSpacing, getTheme, getColor } from '@symbo.ls/scratch'
+
+import style, { shape, depth } from './style'
+
+const isBorderStyle = str =>
+  ['none','hidden','dotted','dashed','solid','double','groove','ridge','inset','outset','initial'].some(v => str.includes(v))
+
+const diffBorder = (border, key = 'border') => {
+  const obj = {}
+  const arr = border.split(' ')
+  arr.map(v => {
+    if (v.includes('px')) obj[`${key}Width`] = v
+    else if (isBorderStyle(v)) obj[`${key}Style`] = v || 'solid'
+    else if (getColor(v)) obj[`${key}Color`] = getColor(v)
+  })
+  return obj
+}
+
+export const Shape = {
+  class: {
+    default: style,
+    shape: ({ props }) => props.shape ? shape[props.shape] : null,
+    shapeDirection: ({ props }) => props.shape ? shape[props.shape][props.shapeDirection || 'top'] : null,
+    shapeDirectionColor: ({ props, ...el }) => props.shapeDirection ? { '&:before': { borderColor: el.class.backgroundColor } } : null,
+    depth: ({ props }) => depth[props.depth],
+    round: ({ props, key, ...el }) => props.round ? (mapSpacing(props.round, 'borderRadius') || ({ borderRadius: props.round })) : null,
+    theme: ({ props }) => props.theme ? getTheme(props.theme) : null,
+    color: ({ props }) => props.color ? ({ color: getColor(props.color) }) : null,
+    background: ({ props }) => props.background ? ({ backgroundColor: getColor(props.background) }) : null,
+    // border: ({ props }) => props.border ? ({ borderColor: getColor(props.border) }) : null,
+
+    border: ({ props }) => props.border ? diffBorder(props.border) : null,
+    borderLeft: ({ props }) => props.borderLeft ? diffBorder(props.borderLeft, 'borderLeft') : null,
+    borderTop: ({ props }) => props.borderTop ? diffBorder(props.borderTop, 'borderTop') : null,
+    borderRight: ({ props }) => props.borderRight ? diffBorder(props.borderRight, 'borderRight') : null,
+    borderBottom: ({ props }) => props.borderBottom ? diffBorder(props.borderBottom, 'borderBottom') : null,
+
+    opacity: ({ props }) => props.opacity && ({ opacity: props.opacity }),
+    visibility: ({ props }) => props.visibility && ({ visibility: props.visibility })
+  }
+
+  // mode: {
+  //   dark: {
+  //     theme: 'white'
+  //   }
+  // }
+
+  // theme: {
+  //   default: 'primary',
+  //   dark: 'whiteish'
+  // }
+
+  // size: {
+  //   default: 'auto',
+  //   mobile: 'fit'
+  // }
+
+  // padding: {
+  //   default: ratio.phi,
+  //   mobile: ratio.perfect
+  // }
+}
+
+export default Shape

package/src/Shape/style.js

@@ -0,0 +1,102 @@
+'use strict'
+
+import { UNIT } from '@symbo.ls/scratch'
+
+export default {
+  boxSizing: 'border-box'
+}
+
+export const depth = {
+  4: { boxShadow: `rgba(0,0,0,.10) 0 2${UNIT.default} 4${UNIT.default}` },
+  6: { boxShadow: `rgba(0,0,0,.10) 0 3${UNIT.default} 6${UNIT.default}` },
+  10: { boxShadow: `rgba(0,0,0,.10) 0 4${UNIT.default} 10${UNIT.default}` },
+  16: { boxShadow: `rgba(0,0,0,.10) 0 8${UNIT.default} 16${UNIT.default}` },
+  26: { boxShadow: `rgba(0,0,0,.10) 0 14${UNIT.default} 26${UNIT.default}` },
+  42: { boxShadow: `rgba(0,0,0,.10) 0 20${UNIT.default} 42${UNIT.default}` }
+}
+
+export const shape = {
+  rectangle: {},
+  circle: { borderRadius: '100%' },
+  bubble: {},
+  tooltip: {
+    position: 'relative',
+    '&:before': {
+      content: '""',
+      display: 'block',
+      width: '0px',
+      height: '0px',
+      border: '6px solid #343434',
+      position: 'absolute',
+      borderRadius: '2px'
+    },
+    top: {
+      '&:before': {
+        top: '2px',
+        left: '50%',
+        transform: 'translate(-50%, -50%) rotate(45deg)'
+      }
+    },
+    right: {
+      '&:before': {
+        top: '50%',
+        right: '-10px',
+        transform: 'translate(-50%, -50%) rotate(45deg)'
+      }
+    },
+    bottom: {
+      '&:before': {
+        bottom: '-10px',
+        left: '50%',
+        transform: 'translate(-50%, -50%) rotate(45deg)'
+      }
+    },
+    left: {
+      '&:before': {
+        top: '50%',
+        left: '2px',
+        transform: 'translate(-50%, -50%) rotate(45deg)'
+      }
+    }
+  },
+  tag: {
+    position: 'relative',
+    '&:before': {
+      content: '""',
+      display: 'block',
+      width: '0',
+      height: '0',
+      border: '16px solid #343434',
+      borderRadius: '6px',
+      position: 'absolute'
+    },
+    top: {
+      '&:before': {
+        bottom: '100%',
+        left: '50%',
+        transform: 'translate(-50%, 60%) rotate(45deg)'
+      }
+    },
+    right: {
+      '&:before': {
+        top: '50%',
+        left: '100%',
+        transform: 'translate(-60%, -50%) rotate(45deg)'
+      }
+    },
+    bottom: {
+      '&:before': {
+        top: '100%',
+        left: '50%',
+        transform: 'translate(-50%, -60%) rotate(45deg)'
+      }
+    },
+    left: {
+      '&:before': {
+        top: '50%',
+        right: '100%',
+        transform: 'translate(60%, -50%) rotate(45deg)'
+      }
+    }
+  }
+}