smbls 2.7.11 → 2.8.0

package/index.js

@@ -0,0 +1,9 @@
+'use strict'
+
+export { create } from 'domql'
+export { transformProps } from 'css-in-props'
+export * from '@symbo.ls/init'
+export * from '@symbo.ls/config-default'
+export * from '@symbo.ls/uikit'
+export * from '@symbo.ls/scratch'
+export * from '@symbo.ls/sync-client'

package/package.json

@@ -1,42 +1,18 @@
 {
   "name": "smbls",
-  "description": "UI Library built on Scratch and DOMQL",
-  "private": false,
-  "author": "symbo.ls",
-  "version": "2.7.11",
-  "repository": "https://github.com/symbo-ls/smbls",
-  "main": "src/index.js",
-  "files": [
-    "src"
-  ],
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org"
-  },
-  "scripts": {
-    "start": "parcel showcase/index.html",
-    "build": "parcel build showcase/index.html --public-url .",
-    "deploy": "yarn build && gh-pages -d dist",
-    "clean": "rm yarn.lock && rm -rf node_modules && rm -rf dist && rm -rf .cache",
-    "reinstall": "rm yarn.lock && rm -rf node_modules/rackai && yarn"
-  },
+  "version": "2.8.0",
+  "main": "index.js",
+  "license": "MIT",
+  "gitHead": "8c30d75c787deaaaf0cf1a3715116177023a1f65",
   "dependencies": {
-    "@domql/utils": "latest",
+    "@symbo.ls/cli": "latest",
+    "@symbo.ls/config-default": "latest",
     "@symbo.ls/init": "latest",
     "@symbo.ls/scratch": "latest",
-    "@symbo.ls/utils": "latest",
-    "@symbo.ls/cli": "latest",
-    "@symbo.ls/socket": "latest"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.11.5",
-    "@emotion/css": "^11.5.0",
-    "babel-eslint": "^10.0.3",
-    "eslint": "^6.1.0",
-    "parcel-bundler": "^1.12.4",
-    "parcel-plugin-svg-sprite": "^1.4.1",
-    "standard": "^13.1.0"
+    "@symbo.ls/socket-ui": "latest",
+    "@symbo.ls/uikit": "latest",
+    "css-in-props": "latest",
+    "domql": "latest"
   },
-  "standard": {
-    "parser": "babel-eslint"
-  }
+  "source": "src/index.js"
 }

package/README.md

@@ -1,35 +0,0 @@
-# Symbols
-
-UI Library in composition of [Scratch](https://github.com/symbo.ls/scratch) and [DOMQL](https://github.com/symbo.ls/domql) or [React](https://github.com/symbo-ls/smbls/tree/main/packages/all/react.js)
-
-Check out the [documentation page](https://docs.symbols.app/).
-
-[![npm version](https://badge.fury.io/js/smbls.svg)](https://badge.fury.io/js/smbls)
-
-### UI Components
-
-Library consists with packages. Components can be invoked individually.
-
-
-### Setup
-
-1. Installation
-```
-yarn add smbls@^1.1.1
-```
-
-2. Import the component from Symbols
-```
-import { Box } from 'smbls'
-```
-
-3. Use it inside your DOMQL code
-### DOMQL
-```javascript
-const Header = { props }
-```
-
-### React
-```javascript
-<Box {...props} />
-```

package/src/Banner/index.js

@@ -1,23 +0,0 @@
-'use strict'
-
-import { styleParentMode } from './style'
-
-import { Shape, Icon } from '..'
-import { UserBundle } from '../User'
-
-export const ParentMode = {
-  extend: Shape,
-  round: 10,
-  theme: 'purple',
-  style: styleParentMode,
-  icon: {
-    extend: Icon,
-    props: { icon: 'checkMedium' }
-  },
-  h2: 'Welcome to parent Mode',
-  description: {
-    extend: UserBundle,
-    users: { ...[{}, {}, {}] },
-    span: 'You\'ll now be able to chat with tutor privately. No other participants will see the messages.'
-  }
-}

package/src/Banner/style.js

@@ -1,27 +0,0 @@
-'use strict'
-
-export const styleParentMode = {
-  boxSizing: 'border-box',
-  padding: '3.6em 1.6em 4em 3.6em',
-  position: 'relative',
-  display: 'block',
-  width: '700px',
-  '> svg': {
-    position: 'absolute',
-    top: '1.2em',
-    right: '1.2em',
-    color: 'rgba(215, 100, 185, .2)'
-  },
-  '> div': {
-    alignItems: 'flex-start',
-    '> div': { marginTop: '4px'}
-  },
-  h2: {
-    margin: 0,
-    marginBottom: '10px'
-  },
-  span: {
-    maxWidth: `${314 / 14}em`,
-    lineHeight: '22px'
-  }
-}

package/src/Box.js

@@ -1,16 +0,0 @@
-'use strict'
-
-import { Shape, Position, Theme, Block, Text, Overflow, Timing, Transform, Media, Interaction, XYZ, Animation } from './atoms'
-
-const PropsCSS = {
-  class: {
-    style: ({ props }) => props && props.style
-  }
-}
-
-export const Box = {
-  extend: [Shape, Position, Theme, Block, Text, Overflow, Timing, Transform, Media, PropsCSS, Interaction, XYZ, Animation],
-  attr: {
-    id: ({ props }) => props.id
-  }
-}

package/src/Button.js

@@ -1,48 +0,0 @@
-'use strict'
-
-import { FocusableComponent } from './atoms'
-import { IconText } from '.'
-
-export const Button = {
-  extend: [FocusableComponent, IconText],
-  tag: 'button',
-  props: {
-    fontSize: 'A',
-    type: 'button',
-    border: 'none',
-    display: 'inline-flex',
-    align: 'center center',
-    textDecoration: 'none',
-    lineHeight: '1',
-    whiteSpace: 'nowrap',
-    padding: 'Z A1',
-    fontFamily: 'inherit',
-    round: 'C2'
-  },
-  attr: {
-    type: ({ props }) => props.type
-  }
-}
-
-export const SquareButton = {
-  extend: Button,
-  props: {
-    fontSize: 'A',
-    width: 'A',
-    padding: 'Z',
-    aspectRatio: '1 / 1',
-    justifyContent: 'center',
-    round: 'Z',
-    style: { boxSizing: 'content-box' }
-  }
-}
-
-export const CircleButton = {
-  extend: SquareButton,
-  props: { round: 'C' }
-}
-
-export const KangorooButton = {
-  extend: Button,
-  childExtend: IconText
-}

package/src/ButtonSet.js

@@ -1,9 +0,0 @@
-'use strict'
-
-import { SquareButton, Flex } from '.'
-
-export const ButtonSet = {
-  tag: 'nav',
-  extend: Flex,
-  childExtend: SquareButton
-}

package/src/Collection.js

@@ -1,82 +0,0 @@
-'use strict'
-
-import { isNot, isArray, isObject, isObjectLike, diff, deepClone } from '@domql/utils'
-
-export const Collection = {
-  define: {
-    $setCollection: (param, el, state) => {
-      if (!param) return
-
-      let data = isArray(param) ? param : []
-
-      if (isObject(param)) {
-        for (const obj in param) { data.push(param[obj]) }
-      }
-
-      data = data.map(item => !isObjectLike(item) ? {
-        props: { value: item }
-      } : item)
-
-      if (data.length) {
-        const t = setTimeout(() => {
-          el.set({ tag: 'fragment', ...data }, { preventDefineUpdate: '$setCollection' })
-          clearTimeout(t)
-        })
-      }
-
-      return data
-    },
-
-    $setStateCollection: (param, el, state) => {
-      if (!param) return
-      if (param.parse) param = param.parse()
-      if (isNot(param)('array', 'object')) return
-
-      if (el.key === 'cnt') {
-        if (el.__stateCollectionCache) {
-          const d = diff(param, el.__stateCollectionCache) // eslint-disable-line
-        } else {
-          el.__stateCollectionCache = deepClone(param)
-        }
-      }
-
-      const obj = { tag: 'fragment' }
-
-      for (const key in param) {
-        const value = param[key]
-        obj[key] = { state: isObjectLike(value) ? value : { value } }
-      }
-
-      const set = () => {
-        el.set(obj, { preventDefineUpdate: '$setStateCollection' })
-      }
-
-      if (el.props.lazyLoad) {
-        window.requestAnimationFrame(set)
-      } else set()
-
-      return obj
-    },
-
-    $setPropsCollection: (param, el, state) => {
-      if (!param) return
-      if (isNot(param)('array', 'object')) return
-
-      const obj = { tag: 'fragment' }
-      for (const key in param) {
-        const value = param[key]
-        obj[key] = { props: isObjectLike(value) ? value : { value } }
-      }
-
-      const set = () => {
-        el.set(obj, { preventDefineUpdate: '$setStateCollection' })
-      }
-
-      if (el.props.lazyLoad) {
-        window.requestAnimationFrame(set)
-      } else set()
-
-      return obj
-    }
-  }
-}

package/src/DatePicker/index.js

@@ -1,155 +0,0 @@
-'use strict'
-
-import style from './style'
-
-import { SquareButton, Flex, Button, Grid } from '..'
-
-const buttonProps = {
-  theme: 'transparent',
-  color: '--theme-quinary-dark-color',
-  ':hover': {
-    theme: 'quinary .child'
-  }
-}
-
-const aside = {
-  props: {
-    gap: 'X2',
-    margin: '-Z - -Z -X2',
-    padding: 'Z - Z X2',
-    minHeight: '100%',
-    height: '100%',
-    width: '--spacing-D'
-  },
-
-  cnt: {
-    extend: Flex,
-    props: {
-      flow: 'column',
-      overflow: 'hidden auto',
-      boxSize: '100% --spacing-D',
-      top: '0',
-      position: 'absolute',
-      maxHeight: '100%',
-      justifyContent: 'flex-end'
-    },
-
-    childExtend: {
-      extend: Button,
-      props: {
-        ...buttonProps,
-        fontSize: 'Z1'
-      },
-      text: ({ state }) => state.value
-    }
-  }
-
-}
-
-const main = {
-  extend: Flex,
-
-  props: {
-    flex: 1,
-    gap: 'X2',
-    flow: 'column',
-
-    header: {
-      align: 'center space-between'
-    }
-  },
-
-  header: {
-    extend: Flex,
-    left: {
-      extend: SquareButton,
-      props: {
-        ...buttonProps,
-        round: 'C',
-        icon: 'arrowAngleLeft'
-      }
-    },
-    month: {
-      tag: 'span',
-      text: 'December'
-    },
-    right: {
-      extend: SquareButton,
-      props: {
-        ...buttonProps,
-        round: 'C',
-        icon: 'arrowAngleRight'
-      }
-    }
-  },
-  days: {
-    extend: Flex,
-    props: {
-      flow: 'column',
-      gap: 'X2'
-    },
-    childExtend: {
-      extend: Grid,
-      props: {
-        columns: 'repeat(7, 1fr)',
-        gap: 'X2'
-      }
-    },
-    weekDays: {
-      childExtend: {
-        extend: Button,
-        props: {
-          ...buttonProps,
-          fontSize: 'Z1',
-          padding: 'X2'
-        }
-      },
-      ...[
-        { text: 'Mo' },
-        { text: 'Tu' },
-        { text: 'We' },
-        { text: 'Th' },
-        { text: 'Fr' },
-        { text: 'Sa' },
-        { text: 'Su' }
-      ]
-    },
-
-    cnt: {
-      childExtend: {
-        extend: SquareButton,
-
-        props: ({ key, state }) => ({
-          ...buttonProps,
-          theme: 'quaternary',
-          active: key === '18',
-          '.active': {
-            theme: 'quinary'
-          }
-        })
-      },
-
-      ...new Array(31).fill(undefined).map((_, i) => ({ text: i + 1 }))
-    }
-  }
-}
-
-export const DatePicker = {
-  style,
-  extend: Flex,
-
-  props: {
-    position: 'relative',
-    theme: 'quinary',
-    transition: 'A all',
-    round: 'Z',
-    padding: 'Z Z2 Z X2',
-    gap: 'X2',
-    depth: 16,
-    minHeight: '0',
-    align: 'stretch center'
-  },
-
-  aside,
-  main
-}

package/src/DatePicker/style.js

@@ -1,18 +0,0 @@
-'use strict'
-
-export default {
-  main: {
-    'section > header span:nth-child(6)': {
-      opacity: 0.5
-    },
-    'section > header span:nth-child(7)': {
-      opacity: 0.5
-    },
-    'section > div button:nth-child(7n)': {
-      opacity: 0.5
-    },
-    'section > div button:nth-child(7n - 1)': {
-      opacity: 0.5
-    }
-  }
-}

package/src/Dropdown.js

@@ -1,51 +0,0 @@
-'use strict'
-
-import { Flex, Button } from '.'
-
-export const DropdownList = {
-  extend: Flex,
-
-  props: {
-    padding: '0 Y',
-    maxHeight: 'G',
-    flow: 'column',
-    theme: 'quaternary',
-    overflow: 'hidden auto',
-    style: { listStyleType: 'none' }
-  },
-
-  childExtend: {
-    extend: Button,
-
-    props: (el, s) => ({
-      active: s.active === el.key,
-      position: 'relative',
-      round: '0',
-      align: 'center flex-end',
-      flow: 'row-reverse',
-      padding: 'Z2 C Z2 Y2',
-      margin: '0',
-      gap: 'Y2',
-      theme: 'quaternary .child',
-
-      ':hover': {
-        style: {
-          svg: { opacity: '0.5' }
-        }
-      },
-
-      icon: {
-        active: s.active === el.key,
-        name: 'checkmark',
-        opacity: '0.1',
-        '.active': { opacity: '1' }
-      },
-
-      ':not(:first-child)': {
-        '@dark': { border: 'gray4 .65, solid' },
-        '@light': { border: 'gray11, solid' },
-        borderWidth: '1px 0 0'
-      }
-    })
-  }
-}

package/src/Field.js

@@ -1,41 +0,0 @@
-'use strict'
-
-import { IconText, Input, Focusable } from '.'
-
-export const Field = {
-  extend: [IconText],
-
-  props: (el, s) => ({
-    value: s[el.key],
-
-    depth: 16,
-    placeholder: '',
-    padding: 'A B',
-    round: 'C',
-    type: 'text',
-    position: 'relative',
-    width: '16em',
-
-    style: {
-      appearance: 'none',
-      outline: 0,
-      border: 'none',
-      cursor: 'pointer',
-      fontFamily: 'inherit',
-      boxSizing: 'border-box'
-    },
-
-    input: {
-      width: '100%',
-      height: '100%',
-      border: 'none'
-    },
-
-    svg: {
-      position: 'absolute',
-      right: '1em'
-    }
-  }),
-
-  input: { extend: [Focusable, Input] }
-}

package/src/GridLayouts/index.js

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

package/src/GridLayouts/style.js

@@ -1,47 +0,0 @@
-'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.js

@@ -1,34 +0,0 @@
-'use strict'
-
-import { SVG } from './atoms'
-import { toCamelCase } from '@symbo.ls/utils'
-
-export const Icon = {
-  extend: SVG,
-  props: ({ key, props, parent, context }) => {
-    const { ICONS } = context && context.system
-    const iconName = props.inheritedString || props.name || props.icon || key
-    const camelCase = toCamelCase(iconName)
-
-    const isArray = camelCase.split(/([a-z])([A-Z])/g)
-
-    let activeIconName
-    if (props.active) {
-      activeIconName = props['.active'].name || props['.active'].icon
-    }
-    if (parent.props.active && parent.props['.active'] && parent.props['.active'].icon) {
-      activeIconName = parent.props['.active'].icon.name || parent.props['.active'].icon.icon || parent.props['.active'].icon
-    }
-
-    const iconFromLibrary = ICONS[activeIconName] || ICONS[camelCase] || (ICONS[isArray[0] + isArray[1]]) || ICONS[isArray[0]] || ICONS['noIcon']
-
-    return {
-      width: 'A',
-      height: 'A',
-      display: 'inline-block',
-      src: iconFromLibrary,
-      style: { fill: 'currentColor' }
-    }
-  },
-  attr: { viewBox: '0 0 24 24' }
-}