smbls 1.1.6 → 2.5.5

package/README.md

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

package/package.json

@@ -1,53 +1,43 @@
 {
   "name": "smbls",
   "description": "UI Library built on Scratch and DOMQL",
-  "version": "1.1.6",
+  "private": false,
   "author": "symbo.ls",
+  "version": "2.5.5",
   "repository": "https://github.com/symbo-ls/smbls",
-  "main": "index.js",
+  "main": "src/index.js",
   "files": [
-    "index.js",
-    "react.js"
+    "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",
+    "bump": "npx np"
+  },
   "dependencies": {
-    "@symbo.ls/banner": "latest",
-    "@symbo.ls/block": "latest",
-    "@symbo.ls/box": "latest",
-    "@symbo.ls/button": "latest",
-    "@symbo.ls/buttonset": "latest",
-    "@symbo.ls/config-default": "latest",
-    "@symbo.ls/datepicker": "latest",
-    "@symbo.ls/direction": "latest",
-    "@symbo.ls/dropdown": "latest",
-    "@symbo.ls/field": "latest",
-    "@symbo.ls/flex": "latest",
-    "@symbo.ls/grid": "latest",
-    "@symbo.ls/icon": "latest",
-    "@symbo.ls/icon-text": "latest",
-    "@symbo.ls/img": "latest",
+    "@domql/utils": "latest",
+    "@symbo.ls/cli": "latest",
+    "@symbo.ls/socket": "latest",
     "@symbo.ls/init": "latest",
-    "@symbo.ls/input": "latest",
-    "@symbo.ls/label": "latest",
-    "@symbo.ls/link": "latest",
-    "@symbo.ls/notification": "latest",
-    "@symbo.ls/overflow": "latest",
-    "@symbo.ls/pills": "latest",
-    "@symbo.ls/position": "latest",
-    "@symbo.ls/react-box": "symbo-ls/react-box",
-    "@symbo.ls/react-provider": "latest",
-    "@symbo.ls/responsive": "latest",
-    "@symbo.ls/select": "latest",
-    "@symbo.ls/shape": "latest",
-    "@symbo.ls/slider": "latest",
-    "@symbo.ls/svg": "latest",
-    "@symbo.ls/text": "latest",
-    "@symbo.ls/tooltip": "latest",
-    "@symbo.ls/user": "latest"
+    "@symbo.ls/scratch": "latest",
+    "@symbo.ls/utils": "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"
   },
-  "browserslist": "> 0.5%, last 2 versions, not dead",
-  "gitHead": "eb13ed79529011424a032e472d87df11b8e19e4f",
-  "source": "src/index.js"
+  "standard": {
+    "parser": "babel-eslint"
+  }
 }

package/src/Banner/index.js

@@ -0,0 +1,24 @@
+'use strict'
+
+import { Shape, Img, Icon } from '../'
+
+import { UserBundle } from '../User'
+
+import { styleParentMode } from './style'
+
+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

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

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

package/src/Button.js

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

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

package/src/DatePicker/index.js

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

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

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

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

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

@@ -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.js

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

package/src/IconText.js

@@ -0,0 +1,20 @@
+'use strict'
+
+import { Flex, Icon } from '.'
+
+export const IconText = {
+  extend: Flex,
+
+  props: {
+    align: 'center center',
+    lineHeight: 1
+  },
+
+  icon: {
+    extend: Icon,
+    if: ({ parent }) => parent.props.icon,
+    props: 'match'
+  },
+
+  text: ({ props }) => props.text
+}

package/src/Input.js

@@ -0,0 +1,28 @@
+'use strict'
+
+import { Focusable } from './'
+
+export const Input = {
+  extend: [Focusable],
+  tag: 'input',
+
+  props: {
+    border: 'none',
+    type: 'input',
+    theme: 'quaternary',
+    fontSize: 'A',
+    round: 'C',
+    lineHeight: 1,
+    padding: 'Z A'
+  },
+
+  attr: {
+    name: ({ props }) => props.name,
+    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
+  }
+}