smbls 2.6.0 → 2.6.2

package/README.md

@@ -1,14 +1,21 @@
 # Symbols
 
-UI Library in composition of [Scratch](https://github.com/smbo-ls/scratch) and [DOMQL](https://github.com/domql/domql)
+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
+yarn add smbls@^1.1.1
 ```
 
 2. Import the component from Symbols
@@ -17,9 +24,12 @@ import { Box } from 'smbls'
 ```
 
 3. Use it inside your DOMQL code
+### DOMQL
+```javascript
+const Header = { props }
 ```
-const Header = {
-  extend: Box,
-  // ...Other Properties
-}
+
+### React
+```javascript
+<Box {...props} />
 ```

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI Library built on Scratch and DOMQL",
   "private": false,
   "author": "symbo.ls",
-  "version": "2.6.0",
+  "version": "2.6.2",
   "repository": "https://github.com/symbo-ls/smbls",
   "main": "src/index.js",
   "files": [
@@ -17,16 +17,15 @@
     "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",
-    "bump": "npx np"
+    "reinstall": "rm yarn.lock && rm -rf node_modules/rackai && yarn"
   },
   "dependencies": {
     "@domql/utils": "latest",
-    "@symbo.ls/cli": "latest",
-    "@symbo.ls/socket": "latest",
     "@symbo.ls/init": "latest",
     "@symbo.ls/scratch": "latest",
-    "@symbo.ls/utils": "latest"
+    "@symbo.ls/utils": "latest",
+    "@symbo.ls/cli": "latest",
+    "@symbo.ls/socket": "latest"
   },
   "devDependencies": {
     "@babel/core": "^7.11.5",

package/src/Banner/index.js

@@ -1,11 +1,10 @@
 'use strict'
 
-import { Shape, Img, Icon } from '../'
+import { styleParentMode } from './style'
 
+import { Shape, Icon } from '..'
 import { UserBundle } from '../User'
 
-import { styleParentMode } from './style'
-
 export const ParentMode = {
   extend: Shape,
   round: 10,
@@ -19,6 +18,6 @@ export const ParentMode = {
   description: {
     extend: UserBundle,
     users: { ...[{}, {}, {}] },
-    span: 'You’ll now be able to chat with tutor privately. No other participants will see the messages.'
+    span: 'You\'ll now be able to chat with tutor privately. No other participants will see the messages.'
   }
 }

package/src/ButtonSet.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { SquareButton, Flex } from './'
+import { SquareButton, Flex } from '.'
 
 export const ButtonSet = {
   tag: 'nav',

package/src/DatePicker/index.js

@@ -2,7 +2,7 @@
 
 import style from './style'
 
-import { SquareButton, Flex, Button, Grid } from '../'
+import { SquareButton, Flex, Button, Grid } from '..'
 
 const buttonProps = {
   theme: 'transparent',

package/src/Input.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Focusable } from './'
+import { Focusable } from '.'
 
 export const Input = {
   extend: [Focusable],
@@ -17,6 +17,9 @@ export const Input = {
   },
 
   attr: {
+    pattern: ({ props }) => props.pattern,
+    minlength: ({ props }) => props.minlength,
+    maxlength: ({ props }) => props.maxlength,
     name: ({ props }) => props.name,
     placeholder: ({ props }) => props.placeholder,
     value: ({ props }) => props.value,

package/src/Pills.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Flex } from './'
+import { Flex } from '.'
 
 export const Pills = {
   extend: Flex,

package/src/Tooltip.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Flex } from './'
+import { Flex } from '.'
 
 export const Tooltip = {
   extend: Flex,

package/src/atoms/Block.js

@@ -2,6 +2,10 @@
 
 import { getSpacingBasedOnRatio, getSpacingByKey } from '@symbo.ls/scratch'
 
+const transformGap = gap => ({
+  gap: gap.split(' ').map(v => getSpacingByKey(v, 'gap').gap).join(' ')
+})
+
 export const Block = {
   class: {
     boxSizing: ({ props }) => props.boxSizing ? ({ boxSizing: props.boxSizing }) : {
@@ -95,7 +99,7 @@ export const Block = {
     marginBlockStart: ({ props }) => props.marginBlockStart ? getSpacingBasedOnRatio(props, 'marginBlockStart') : null,
     marginBlockEnd: ({ props }) => props.marginBlockEnd ? getSpacingBasedOnRatio(props, 'marginBlockEnd') : null,
 
-    gap: ({ props }) => props.gap ? getSpacingBasedOnRatio(props, 'gap') : null,
+    gap: ({ props }) => props.gap ? transformGap(props.gap) : null,
     gridArea: ({ props }) => props.gridArea && ({ gridArea: props.gridArea }),
 
     flex: ({ props }) => props.flex && ({ flex: props.flex }),

package/src/atoms/Media.js

@@ -148,8 +148,6 @@ export const initUpdate = element => {
           themeModifier: globalTheme
         }, { preventRecursive: true, ignoreInitUpdate: true })
       } else if (key === 'true') applyTrueProps(props[key], CLASS_NAMES, element)
-      if (key === 'true') console.log(key)
-
       if (setter) setter(key, props[key], CLASS_NAMES, element)
     }