SymbolsProvide for React

.babelrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  "presets": [
+    ["@babel/preset-env"]
+  ]
+}

.gitignore

@@ -37,10 +37,3 @@ node_modules
 .parcel-cache
 dist
 *.DS_Store
-
-.DS_Store
-
-yarn.lock
-.DS_Store
-
-# packages/react

README.md

@@ -1,38 +1,12 @@
 # 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)
+This repository is merged into https://github.com/symbo-ls/smbls
 
-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
+UI Library in composition of [Scratch](https://github.com/symbo.ls/scratch) and [DOMQL](https://github.com/symbo.ls/domql)
 
-1. Installation
-```
-yarn add 'smbls'
-```
-
-2. Import the component from Symbols
-```
-import { Box } from 'smbls'
-```
-
-3. Use it inside your DOMQL code
-### DOMQL
-```javascript
-const Header = {
-  extends: Box,
-  // ...Other Properties
-}
-```
+Check out the [documentation page](https://docs.symbols.app/).
 
-### React
-```javascript
-<Box {...props} />
-```
+[![npm version](https://badge.fury.io/js/smbls.svg)](https://badge.fury.io/js/smbls)

components/Atoms/Animation.js

@@ -0,0 +1,52 @@
+'use strict'
+
+import { getTimingByKey, getTimingFunction } from '@symbo.ls/scratch'
+import { isObject } from '@domql/utils'
+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
+    })
+  }
+}

components/Atoms/Block.js

@@ -0,0 +1,151 @@
+'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' }

components/Atoms/Collection.js

@@ -0,0 +1,82 @@
+'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.__ref.__stateCollectionCache) {
+          const d = diff(param, el.__ref.__stateCollectionCache) // eslint-disable-line
+        } else {
+          el.__ref.__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
+    }
+  }
+}

components/Atoms/Flex.js

@@ -0,0 +1,17 @@
+'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 }
+    }
+  }
+}

components/Atoms/Form.js

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