@symbo.ls/uikit 1.2.2 → 1.2.5

package/README.md

@@ -1,6 +1,6 @@
 # Symbols
 
-UI Library in composition of [Scratch](https://github.com/symbo.ls/scratch) and [DOMQL](https://github.com/symbo.ls/domql)
+UI Library in composition of [Scratch](https://github.com/symbo.ls/scratch) and [DOMQL](https://github.com/symbo.ls/domql) or [DOMQL](https://github.com/symbo-ls/smbls/tree/main/packages/all/packages/react)
 
 Check out the [documentation page](https://docs.symbols.app/).
 

package/package.json

@@ -1,43 +1,40 @@
 {
   "name": "@symbo.ls/uikit",
   "description": "UI Library built on Scratch and DOMQL",
-  "version": "1.2.2",
+  "version": "1.2.5",
   "author": "symbo.ls",
   "repository": "https://github.com/symbo-ls/smbls",
-  "main": "packages/uikit/index.js",
-  "scripts": {
-    "start": "parcel showcase/index.html",
-    "prebuild": "rm -rf dist .parcel-cache",
-    "build": "npx parcel build index.js",
-    "build:all": "lerna exec -- npx parcel build index.js",
-    "test:lint": "npx standard \"packages/**/*.js\"",
-    "test": "echo running all tests is not supported, maybe run: \"yarn test:lint\"",
-    "publish:all": "yarn build:all && lerna publish",
-    "push": "echo push is not yet supported",
-    "push:version": "git add . && git commit -am 'version update' && git push",
-    "clean": "rm -rf */start/.cache */start/dist",
-    "clean:dist": "rm -rf dist .cache **/dist **/.cache",
-    "clean:modules": "rm -rf node_modules yarn.lock package-lock.json lerna-debug.log yarn-error.log",
-    "clean:package-modules": "rm -rf packages/*/node_modules **/*/package-lock.json",
-    "clean:all": "yarn clean && yarn clean:dist && yarn clean:modules && yarn clean:package-modules",
-    "reinstall": "yarn clean:all && yarn"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.18.10",
-    "babel-eslint": "^10.1.0",
-    "esbuild": "^0.17.3",
-    "lerna": "^6.0.1",
-    "parcel": "^2.7.0",
-    "parcel-plugin-svg-sprite": "^1.4.1",
-    "standard": "^17.0.0"
+  "main": "index.js",
+  "files": [
+    "index.js",
+    "react.js"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
   },
-  "standard": {
-    "parser": "babel-eslint"
+  "dependencies": {
+    "@symbo.ls/atoms": "latest",
+    "@symbo.ls/avatar": "latest",
+    "@symbo.ls/banner": "latest",
+    "@symbo.ls/box": "latest",
+    "@symbo.ls/button": "latest",
+    "@symbo.ls/buttonset": "latest",
+    "@symbo.ls/datepicker": "latest",
+    "@symbo.ls/dropdown": "latest",
+    "@symbo.ls/field": "latest",
+    "@symbo.ls/icon": "latest",
+    "@symbo.ls/img": "latest",
+    "@symbo.ls/input": "latest",
+    "@symbo.ls/label": "latest",
+    "@symbo.ls/link": "latest",
+    "@symbo.ls/notification": "latest",
+    "@symbo.ls/pills": "latest",
+    "@symbo.ls/select": "latest",
+    "@symbo.ls/slider": "latest",
+    "@symbo.ls/textarea": "latest",
+    "@symbo.ls/tooltip": "latest"
   },
-  "workspaces": [
-    "components/*",
-    "react/*",
-    "packages/*"
-  ],
-  "browserslist": "> 0.5%, last 2 versions, not dead"
+  "browserslist": "> 0.5%, last 2 versions, not dead",
+  "gitHead": "8f97205ca57c54560c3f7489c518e2153c5c9b5e",
+  "source": "src/index.js"
 }

package/.babelrc.json

@@ -1,3 +0,0 @@
-{
-  "presets": []
-}

package/.eslintrc.js

@@ -1,16 +0,0 @@
-module.exports = {
-  "extends": "standard",
-  "plugins": ["jest"],
-  "parser": "@babel/eslint-parser",
-  "env": {
-    "es6": true,
-    "browser": true,
-    "node": true,
-    "jest": true
-  },
-  overrides: [{
-    files: [ 'test/**/*.test.js' ],
-    env: { jest: true },
-    plugins: [ 'jest' ]
-  }]
-}

package/components/Atoms/Animation.js

@@ -1,53 +0,0 @@
-'use strict'
-
-import { getTimingByKey, getTimingFunction } from '@symbo.ls/scratch'
-import { isObject } from '@domql/utils'
-import { convertPropsToClass } from './Media' // eslint-disable-line no-unused-vars
-import { emotion } from '@symbo.ls/create-emotion'
-const { keyframes } = emotion
-
-const applyAnimationProps = (animation, element) => {
-  if (isObject(animation)) return { animationName: keyframes(animation) }
-  const { ANIMATION } = element.context && element.context.system
-  const record = ANIMATION[animation]
-  return keyframes(record)
-}
-
-export const Animation = {
-  class: {
-    animation: (el) => el.props.animation && {
-      animationName: applyAnimationProps(el.props.animation, el),
-      animationDuration: getTimingByKey(el.props.animationDuration || 'A').timing,
-      animationDelay: getTimingByKey(el.props.animationDelay || '0s').timing,
-      animationTimingFunction: getTimingFunction(el.props.animationTimingFunction || 'ease'),
-      animationFillMode: el.props.animationFillMode || 'both',
-      animationPlayState: el.props.animationPlayState,
-      animationDirection: el.props.animationDirection
-    },
-    animationName: (el) => el.props.animationName && {
-      animationName: applyAnimationProps(el.props.animationName, el)
-    },
-
-    animationDuration: ({ props }) => props.animationDuration && ({
-      animationDuration: getTimingByKey(props.animationDuration).timing
-    }),
-    animationDelay: ({ props }) => props.animationDelay && ({
-      animationDelay: getTimingByKey(props.animationDelay).timing
-    }),
-    animationTimingFunction: ({ props }) => props.animationTimingFunction && ({
-      animationTimingFunction: getTimingFunction(props.animationTimingFunction)
-    }),
-    animationFillMode: ({ props }) => props.animationFillMode && ({
-      animationFillMode: props.animationFillMode
-    }),
-    animationPlayState: ({ props }) => props.animationPlayState && ({
-      animationPlayState: props.animationPlayState
-    }),
-    animationIterationCount: ({ props }) => props.animationIterationCount && ({
-      animationIterationCount: props.animationIterationCount || 1
-    }),
-    animationDirection: ({ props }) => props.animationDirection && ({
-      animationDirection: props.animationDirection
-    })
-  }
-}

package/components/Atoms/Block.js

@@ -1,151 +0,0 @@
-'use strict'
-
-import { getSpacingBasedOnRatio, getSpacingByKey, isString } from '@symbo.ls/scratch'
-
-const transfromGap = gap => isString(gap) && ({
-  gap: gap.split(' ').map(v => getSpacingByKey(v, 'gap').gap).join(' ')
-})
-
-export const Block = {
-  class: {
-    boxSizing: ({ props }) => props.boxSizing ? ({ boxSizing: props.boxSizing }) : {
-      boxSizing: 'border-box'
-    },
-
-    display: ({ props }) => props.display && ({ display: props.display }),
-
-    hide: ({ props }) => props.hide && ({ display: 'none' }),
-
-    width: ({ props }) => props.width && getSpacingBasedOnRatio(props, 'width'),
-    height: ({ props }) => props.height && getSpacingBasedOnRatio(props, 'height'),
-    boxSize: ({ props }) => {
-      if (typeof props.boxSize !== 'string') return
-      const [height, width] = props.boxSize.split(' ')
-      return {
-        ...getSpacingByKey(height, 'height'),
-        ...getSpacingByKey(width || height, 'width')
-      }
-    },
-
-    maxWidth: ({ props }) => props.maxWidth && getSpacingBasedOnRatio(props, 'maxWidth'),
-    minWidth: ({ props }) => props.minWidth && getSpacingBasedOnRatio(props, 'minWidth'),
-    widthRange: ({ props }) => {
-      if (typeof props.widthRange !== 'string') return
-      const [minWidth, maxWidth] = props.widthRange.split(' ')
-      return {
-        ...getSpacingByKey(minWidth, 'minWidth'),
-        ...getSpacingByKey(maxWidth || minWidth, 'maxWidth')
-      }
-    },
-
-    maxHeight: ({ props }) => props.maxHeight && getSpacingBasedOnRatio(props, 'maxHeight'),
-    minHeight: ({ props }) => props.minHeight && getSpacingBasedOnRatio(props, 'minHeight'),
-    heightRange: ({ props }) => {
-      if (typeof props.heightRange !== 'string') return
-      const [minHeight, maxHeight] = props.heightRange.split(' ')
-      return {
-        ...getSpacingByKey(minHeight, 'minHeight'),
-        ...getSpacingByKey(maxHeight || minHeight, 'maxHeight')
-      }
-    },
-
-    direction: ({ props }) => props.direction && ({ direction: props.direction }),
-
-    aspectRatio: ({ props }) => props.aspectRatio && ({ aspectRatio: props.aspectRatio }),
-
-    borderWidth: ({ props }) => props.borderWidth ? getSpacingBasedOnRatio(props, 'borderWidth') : null,
-
-    padding: ({ props }) => props.padding ? getSpacingBasedOnRatio(props, 'padding') : null,
-    paddingInline: ({ props }) => {
-      if (typeof props.paddingInline !== 'string') return
-      const [paddingInlineStart, paddingInlineEnd] = props.paddingInline.split(' ')
-      return {
-        ...getSpacingByKey(paddingInlineStart, 'paddingInlineStart'),
-        ...getSpacingByKey(paddingInlineEnd || paddingInlineStart, 'paddingInlineEnd')
-      }
-    },
-    paddingBlock: ({ props }) => {
-      if (typeof props.paddingBlock !== 'string') return
-      const [paddingBlockStart, paddingBlockEnd] = props.paddingBlock.split(' ')
-      return {
-        ...getSpacingByKey(paddingBlockStart, 'paddingBlockStart'),
-        ...getSpacingByKey(paddingBlockEnd || paddingBlockStart, 'paddingBlockEnd')
-      }
-    },
-    paddingInlineStart: ({ props }) => props.paddingInlineStart ? getSpacingBasedOnRatio(props, 'paddingInlineStart') : null,
-    paddingInlineEnd: ({ props }) => props.paddingInlineEnd ? getSpacingBasedOnRatio(props, 'paddingInlineEnd') : null,
-    paddingBlockStart: ({ props }) => props.paddingBlockStart ? getSpacingBasedOnRatio(props, 'paddingBlockStart') : null,
-    paddingBlockEnd: ({ props }) => props.paddingBlockEnd ? getSpacingBasedOnRatio(props, 'paddingBlockEnd') : null,
-
-    margin: ({ props }) => props.margin ? getSpacingBasedOnRatio(props, 'margin') : null,
-    marginInline: ({ props }) => {
-      if (typeof props.marginInline !== 'string') return
-      const [marginInlineStart, marginInlineEnd] = props.marginInline.split(' ')
-      return {
-        ...getSpacingByKey(marginInlineStart, 'marginInlineStart'),
-        ...getSpacingByKey(marginInlineEnd || marginInlineStart, 'marginInlineEnd')
-      }
-    },
-    marginBlock: ({ props }) => {
-      if (typeof props.marginBlock !== 'string') return
-      const [marginBlockStart, marginBlockEnd] = props.marginBlock.split(' ')
-      return {
-        ...getSpacingByKey(marginBlockStart, 'marginBlockStart'),
-        ...getSpacingByKey(marginBlockEnd || marginBlockStart, 'marginBlockEnd')
-      }
-    },
-    marginInlineStart: ({ props }) => props.marginInlineStart ? getSpacingBasedOnRatio(props, 'marginInlineStart') : null,
-    marginInlineEnd: ({ props }) => props.marginInlineEnd ? getSpacingBasedOnRatio(props, 'marginInlineEnd') : null,
-    marginBlockStart: ({ props }) => props.marginBlockStart ? getSpacingBasedOnRatio(props, 'marginBlockStart') : null,
-    marginBlockEnd: ({ props }) => props.marginBlockEnd ? getSpacingBasedOnRatio(props, 'marginBlockEnd') : null,
-
-    gap: ({ props }) => props.gap ? transfromGap(props.gap) : null,
-    gridArea: ({ props }) => props.gridArea && ({ gridArea: props.gridArea }),
-
-    flex: ({ props }) => props.flex && ({ flex: props.flex }),
-    flexDirection: ({ props }) => props.flexDirection && ({ flexDirection: props.flexDirection }),
-    alignItems: ({ props }) => props.alignItems && ({ alignItems: props.alignItems }),
-    alignContent: ({ props }) => props.alignContent && ({ alignContent: props.alignContent }),
-    justifyContent: ({ props }) => props.justifyContent && ({ justifyContent: props.justifyContent }),
-    justifyItems: ({ props }) => props.justifyItems && ({ justifyItems: props.justifyItems }),
-    alignSelf: ({ props }) => props.alignSelf && ({ alignSelf: props.alignSelf }),
-    order: ({ props }) => props.order && ({ order: props.order }),
-
-    flexWrap: ({ props }) => props.flexWrap && ({
-      display: 'flex',
-      flexFlow: props.flexWrap
-    }),
-    flexFlow: ({ props }) => props.flexFlow && ({
-      display: 'flex',
-      flexFlow: props.flexFlow
-    }),
-    flexAlign: ({ props }) => {
-      if (typeof props.flexAlign !== 'string') return
-      const [alignItems, justifyContent] = props.flexAlign.split(' ')
-      return {
-        display: 'flex',
-        alignItems: alignItems,
-        justifyContent: justifyContent
-      }
-    },
-
-    gridColumn: ({ props }) => props.gridColumn && ({ gridColumn: props.gridColumn }),
-    gridColumnStart: ({ props }) => props.columnStart ? ({ gridColumnStart: props.columnStart }) : null,
-    gridRow: ({ props }) => props.gridRow && ({ gridRow: props.gridRow }),
-    gridRowStart: ({ props }) => props.rowStart ? ({ gridRowStart: props.rowStart }) : null,
-
-    size: ({ props }) => {
-      if (typeof props.heightRange !== 'string') return
-      const [minHeight, maxHeight] = props.heightRange.split(' ')
-      return {
-        ...getSpacingByKey(minHeight, 'minHeight'),
-        ...getSpacingByKey(maxHeight || minHeight, 'maxHeight')
-      }
-    },
-
-    columns: ({ props }) => props.columns && ({ columns: props.columns })
-  }
-}
-
-export const Span = { tag: 'span' }
-// export const Article = { tag: 'article' }

package/components/Atoms/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/components/Atoms/Direction.js

@@ -1,10 +0,0 @@
-'use strict'
-
-export const Direction = {
-  props: {
-    direction: 'ltr'
-  },
-  class: {
-    direction: ({ props }) => ({ direction: props.direction })
-  }
-}

package/components/Atoms/Flex.js

@@ -1,17 +0,0 @@
-'use strict'
-
-export const Flex = {
-  props: {
-    display: 'flex'
-  },
-
-  class: {
-    flow: ({ props }) => props.flow && ({ flexFlow: props.flow }),
-    wrap: ({ props }) => props.wrap && ({ flexWrap: props.wrap }),
-    align: ({ props }) => {
-      if (typeof props.align !== 'string') return
-      const [alignItems, justifyContent] = props.align.split(' ')
-      return { alignItems, justifyContent }
-    }
-  }
-}

package/components/Atoms/Form.js

@@ -1,11 +0,0 @@
-'use strict'
-
-export const Form = {
-  tag: 'form',
-  props: {},
-  attr: {
-    action: ({ props }) => props.action,
-    method: ({ props }) => props.method,
-    enctype: ({ props }) => props.enctype
-  }
-}

package/components/Atoms/Grid.js

@@ -1,30 +0,0 @@
-'use strict'
-
-import { getSpacingBasedOnRatio } from '@symbo.ls/scratch'
-
-export const Grid = {
-  props: { display: 'grid' },
-
-  class: {
-    area: ({ props }) => props.area ? ({ gridArea: props.area }) : null,
-    template: ({ props }) => props.template ? ({ gridTemplate: props.template }) : null,
-    templateAreas: ({ props }) => props.templateAreas ? ({ gridTemplateAreas: props.templateAreas }) : null,
-
-    column: ({ props }) => props.column ? ({ gridColumn: props.column }) : null,
-    columns: ({ props }) => props.columns ? ({ gridTemplateColumns: props.columns }) : null,
-    templateColumns: ({ props }) => props.templateColumns ? ({ gridTemplateColumns: props.templateColumns }) : null,
-    autoColumns: ({ props }) => props.autoColumns ? ({ gridAutoColumns: props.autoColumns }) : null,
-    columnStart: ({ props }) => props.columnStart ? ({ gridColumnStart: props.columnStart }) : null,
-
-    row: ({ props }) => props.row ? ({ gridRow: props.row }) : null,
-    rows: ({ props }) => props.rows ? ({ gridTemplateRows: props.rows }) : null,
-    templateRows: ({ props }) => props.templateRows ? ({ gridTemplateRows: props.templateRows }) : null,
-    autoRows: ({ props }) => props.autoRows ? ({ gridAutoRows: props.autoRows }) : null,
-    rowStart: ({ props }) => props.rowStart ? ({ gridRowStart: props.rowStart }) : null,
-
-    autoFlow: ({ props }) => props.autoFlow ? ({ gridAutoFlow: props.autoFlow }) : null,
-
-    columnGap: ({ props }) => props.columnGap ? getSpacingBasedOnRatio(props, 'columnGap') : null,
-    rowGap: ({ props }) => props.rowGap ? getSpacingBasedOnRatio(props, 'rowGap') : null
-  }
-}

package/components/Atoms/Iframe.js

@@ -1,16 +0,0 @@
-'use strict'
-
-export const Iframe = {
-  tag: 'iframe',
-  props: {
-    position: 'relative',
-    minWidth: 'H',
-    minHeight: 'H'
-  },
-  attr: {
-    src: ({ props }) => props.src,
-    loading: ({ props }) => props.loading,
-    allowfullscreen: ({ props }) => props.allowfullscreen,
-    referrerpolicy: ({ props }) => props.referrerpolicy
-  }
-}

package/components/Atoms/Img.js

@@ -1,17 +0,0 @@
-'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/components/Atoms/Interaction.js

@@ -1,9 +0,0 @@
-'use strict'
-
-export const Interaction = {
-  class: {
-    userSelect: ({ props }) => props.userSelect && ({ userSelect: props.userSelect }),
-    pointerEvents: ({ props }) => props.pointerEvents && ({ pointerEvents: props.pointerEvents }),
-    cursor: ({ props }) => props.cursor && ({ cursor: props.cursor })
-  }
-}

package/components/Atoms/InteractiveComponent.js

@@ -1,78 +0,0 @@
-'use strict'
-
-const style = {
-  appearance: 'none',
-  border: 'none',
-  cursor: 'pointer',
-  fontFamily: 'inherit'
-}
-
-export const Hoverable = {
-  props: {
-    transition: 'C defaultBezier',
-    transitionProperty: 'opacity, transform',
-    opacity: 0.85,
-
-    ':hover': {
-      opacity: 0.9,
-      transform: 'scale(1.015)'
-    },
-    ':active': {
-      opacity: 1,
-      transform: 'scale(1.015)'
-    },
-    '.active': {
-      opacity: 1,
-      transform: 'scale(1.015)',
-
-      ':hover': { opacity: 1 }
-    }
-  }
-}
-
-export const Clickable = {
-  extend: Hoverable,
-  props: {
-    ':active': {
-      opacity: 1,
-      transform: 'scale(1.015)'
-    },
-    '.active': {
-      opacity: 1
-    }
-  }
-}
-
-export const Focusable = {
-  props: {
-    border: 'none',
-    outline: 'solid, 0, blue .3',
-    ':focus-visible': {
-      opacity: 1,
-      outline: 'solid, X, blue .3'
-    }
-  },
-
-  attr: {
-    placeholder: ({ props }) => props.placeholder,
-    tabIndex: ({ props }) => props.tabIndex
-  }
-}
-
-export const FocusableComponent = {
-  extend: Focusable,
-  tag: 'button',
-  props: {
-    fontSize: 'A',
-    type: 'button',
-    border: 'none',
-    textDecoration: 'none',
-    lineHeight: '1',
-    whiteSpace: 'nowrap',
-    fontFamily: 'inherit',
-    style
-  },
-  attr: {
-    type: ({ props }) => props.type
-  }
-}