smbls 0.7.0 → 0.8.3

package/README.md

@@ -0,0 +1,25 @@
+# Symbols
+
+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)
+
+### Setup
+
+1. Installation
+```
+yarn add smbls
+```
+
+2. Import the component from Symbols
+```
+import { Box } from 'smbls'
+```
+
+3. Use it inside your DOMQL code
+```
+const Header = {
+  proto: Box,
+  // ...Other Properties
+}
+```

package/package.json

@@ -1,48 +1,36 @@
 {
   "name": "smbls",
   "description": "UI Library built on Scratch and DOMQL",
-  "version": "0.7.0",
+  "private": false,
+  "author": "symbo.ls",
+  "version": "0.8.3",
   "repository": "https://github.com/rackai/symbols",
-  "main": "index.js",
+  "main": "src/index.js",
   "files": [
     "src"
   ],
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "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",
-    "@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/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"
+  "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"
   },
-  "browserslist": "> 0.5%, last 2 versions, not dead",
-  "gitHead": "54fa6500c697604b3f48ba33a573545d7bff35fa",
-  "source": "src/index.js"
+  "dependencies": {},
+  "devDependencies": {
+    "@babel/core": "^7.14.6",
+    "babel-eslint": "^10.0.3",
+    "emotion": "^10.0.27",
+    "np": "^7.2.0",
+    "parcel-bundler": "^1.12.3",
+    "parcel-plugin-svg-sprite": "^1.4.1",
+    "standard": "^13.1.0"
+  },
+  "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 = {
+  proto: Shape,
+  round: 10,
+  theme: 'purple',
+  style: styleParentMode,
+  icon: {
+    proto: Icon,
+    props: { icon: 'checkMedium' }
+  },
+  h2: 'Welcome to parent Mode',
+  description: {
+    proto: 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/Block/index.js

@@ -0,0 +1,95 @@
+'use strict'
+
+import { SPACING, mapSpacing } from '@symbo.ls/scratch'
+
+export const mapBasedOnRatio = (props, prop) => {
+  const { spacingRatio } = props
+  const val = props[prop]
+  if (spacingRatio) {
+    const params = SPACING[spacingRatio]
+
+    if (!params) {
+      SPACING[spacingRatio] = {
+        base: SPACING.base,
+        type: 'spacing',
+        ratio: spacingRatio,
+        range: [-5, +7],
+        subSequence: true,
+        sequence: {},
+        scales: {}
+      }
+    }
+
+    const result = mapSpacing(val, prop, params)
+
+    return result
+  }
+  return mapSpacing(val, prop)
+}
+
+export const Block = {
+  props: {},
+
+  class: {
+    display: ({ props }) => ({ display: props.display }),
+
+    width: ({ props }) => props.width && mapBasedOnRatio(props, 'width'),
+    height: ({ props }) => props.height && mapBasedOnRatio(props, 'height'),
+    boxSize: ({ props }) => {
+      if (typeof props.boxSize !== 'string') return
+      const [width, height] = props.boxSize.split(' ')
+      return {
+        ...mapSpacing(width, 'width'),
+        ...mapSpacing(height, 'height')
+      }
+    },
+
+    maxWidth: ({ props }) => props.maxWidth && mapBasedOnRatio(props, 'maxWidth'),
+    minWidth: ({ props }) => props.minWidth && mapBasedOnRatio(props, 'minWidth'),
+    widthRange: ({ props }) => {
+      if (typeof props.widthRange !== 'string') return
+      const [minWidth, maxWidth] = props.widthRange.split(' ')
+      return {
+        ...mapSpacing(minWidth, 'minWidth'),
+        ...mapSpacing(maxWidth, 'maxWidth')
+      }
+    },
+
+    maxHeight: ({ props }) => props.maxHeight && mapBasedOnRatio(props, 'maxHeight'),
+    minHeight: ({ props }) => props.minHeight && mapBasedOnRatio(props, 'minHeight'),
+    heightRange: ({ props }) => {
+      if (typeof props.heightRange !== 'string') return
+      const [minHeight, maxHeight] = props.heightRange.split(' ')
+      return {
+        ...mapSpacing(minHeight, 'minHeight'),
+        ...mapSpacing(maxHeight, 'maxHeight')
+      }
+    },
+
+    aspectRatio: ({ props }) => ({ aspectRatio: props.aspectRatio }),
+
+    padding: ({ props }) => mapBasedOnRatio(props, 'padding'),
+    margin: ({ props }) => mapBasedOnRatio(props, 'margin'),
+    gap: ({ props }) => mapBasedOnRatio(props, 'gap'),
+
+    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
+      }
+    },
+    flex: ({ props }) => props.flex && ({ flex: props.flex }),
+
+    size: ({ props }) => {
+      // if (typeof props.size !== 'string') return
+      // const [fontSize, padding, margin] = props.size.split(' ')
+    }
+  }
+}

package/src/Block/style.js

@@ -0,0 +1 @@
+'use strict'

package/src/Box/index.js

@@ -0,0 +1,10 @@
+'use strict'
+
+import { Shape, Position, Block, Text, Responsive } from '..'
+
+export const Box = {
+  proto: [Shape, Position, Block, Text, Responsive],
+  class: {
+    fromProps: ({ props }) => props && props.css
+  }
+}

package/src/Button/index.js

@@ -0,0 +1,54 @@
+'use strict'
+
+import { Shape, Block, IconText, Direction } from '../'
+
+import style from './style'
+
+export const Button = {
+  proto: [IconText],
+  tag: 'button',
+  style,
+  props: {
+    type: 'button'
+  },
+  attr: {
+    type: ({ props }) => props.type
+  }
+}
+
+export const SquareButton = {
+  proto: Button,
+  props: {
+    fontSize: 'A',
+    width: 'A',
+    padding: 'Z',
+    aspectRatio: '1 / 1',
+    round: 'Z'
+  },
+  class: {
+    squareButton: {
+      justifyContent: 'center',
+      boxSizing: 'content-box'
+    }
+  }
+}
+
+export const CircleButton = {
+  proto: SquareButton,
+  props: { round: 'C' }
+}
+
+export const KangorooButton = {
+  tag: 'button',
+  style,
+
+  iconText: {
+    proto: IconText
+  },
+
+  child: {
+    proto: [IconText]
+  }
+}
+
+export default Button

package/src/Button/style.js

@@ -0,0 +1,13 @@
+'use strict'
+
+export default {
+  appearance: 'none',
+  border: 'none',
+  outline: 0,
+  cursor: 'pointer',
+  fontFamily: 'inherit',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  textDecoration: 'none'
+}

package/src/ButtonSet/index.js

@@ -0,0 +1,14 @@
+'use strict'
+
+import { SquareButton } from '../Button'
+import { Shape } from '../Shape'
+import { Flex } from '../Flex'
+import { Block } from '../Block'
+
+export const ButtonSet = {
+  tag: 'nav',
+  proto: [Shape, Flex, Block],
+  childProto: {
+    proto: [SquareButton]
+  }
+}

package/src/DatePicker/index.js

@@ -0,0 +1,115 @@
+'use strict'
+
+import style from './style'
+
+import Icon from '../Icon'
+import Shape from '../Shape'
+import { Block } from '../Block'
+
+export const DatePicker = {
+  style,
+
+  proto: [Shape, Block],
+  props: {
+    theme: 'lightDark',
+    padding: 'A',
+    round: 'Z',
+    depth: 16
+  },
+
+  aside: {
+    childProto: { tag: 'button' },
+    ...[
+      { text: '2020' },
+      { text: '2021' },
+      { text: '2022' },
+      { text: '2023' },
+      { text: '2024' },
+      { text: '2025' },
+      { text: '2026' },
+      { text: '2026' },
+      { text: '2026' }
+    ]
+  },
+
+  main: {
+    header: {
+      icon: {
+        proto: Icon,
+        props: { icon: 'arrowMediumLeft' }
+      },
+      month: {
+        childProto: { tag: 'span' },
+        ...[
+          { text: 'january' },
+          { text: 'february' },
+          { text: 'march' },
+          { text: 'april' },
+          { text: 'may' },
+          { text: 'june' },
+          { text: 'july' },
+          { text: 'august' },
+          { text: 'september' },
+          { text: 'october' },
+          { text: 'november' },
+          { text: 'december' }
+        ]
+      },
+      icon2: {
+        proto: Icon,
+        props: { icon: 'arrowMediumRight' }
+      }
+    },
+    days: {
+      tag: 'section',
+      header: {
+        childProto: { tag: 'span' },
+        ...[
+          { text: 'Mo' },
+          { text: 'Tu' },
+          { text: 'We' },
+          { text: 'Th' },
+          { text: 'Fr' },
+          { text: 'Sa' },
+          { text: 'Su' }
+        ]
+      },
+      content: {
+        childProto: { tag: 'button' },
+        ...[
+          { text: '1' },
+          { text: '2' },
+          { text: '3' },
+          { text: '4' },
+          { text: '5' },
+          { text: '6' },
+          { text: '7' },
+          { text: '8' },
+          { text: '9' },
+          { text: '10' },
+          { text: '11' },
+          { text: '12' },
+          { text: '13' },
+          { text: '14' },
+          { text: '15' },
+          { text: '16' },
+          { text: '17' },
+          { text: '18' },
+          { text: '19' },
+          { text: '20' },
+          { text: '21' },
+          { text: '22' },
+          { text: '23' },
+          { text: '24' },
+          { text: '25' },
+          { text: '26' },
+          { text: '27' },
+          { text: '28' },
+          { text: '29' },
+          { text: '30' },
+          { text: '31' }
+        ]
+      }
+    }
+  }
+}

package/src/DatePicker/style.js

@@ -0,0 +1,100 @@
+'use strict'
+
+export default {
+  maxWidth: `${336 / 16}em`,
+  maxHeight: `${260 / 16}em`,
+  display: 'flex',
+  padding: '0 1em',
+  boxSizing: 'border-box',
+  borderRadius: '10px',
+  button: {
+    border: 'none',
+    outline: 'none',
+    background: 'transparent',
+    cursor: 'pointer'
+  },
+
+  aside: {
+    display: 'flex',
+    flexDirection: 'column',
+    overflowX: 'auto',
+    paddingRight: `${10 / 16}em`,
+
+    button: {
+      opacity: 0.5,
+      marginBottom: `${22 / 12}em`
+    }
+  },
+
+  main: {
+    flex: 1,
+    paddingTop: `${14 / 16}em`,
+    paddingBottom: `${10 / 16}em`,
+    overflow: 'hidden',
+
+    display: 'flex',
+    flexDirection: 'column',
+
+    '> header': {
+      display: 'flex',
+      alignItems: 'center',
+      height: 'auto',
+      overflow: 'hidden',
+      width: '100%',
+      padding: `0 ${8 / 16}em ${14 / 16}em ${8 / 16}em`,
+      boxSizing: 'border-box'
+    },
+    '> header > svg': {
+      cursor: 'pointer'
+    },
+
+    '> header > div': {
+      display: 'flex',
+      overflow: 'hidden',
+      flex: 1
+    },
+    '> header span': {
+      minWidth: '100%',
+      textTransform: 'capitalize',
+      textAlign: 'center',
+      fontWeight: 'bold'
+    },
+
+    section: {
+      flex: 1,
+      display: 'flex',
+      flexDirection: 'column'
+    },
+    'section > header': {
+      height: 'auto',
+      display: 'grid',
+      gridTemplateColumns: 'repeat(7, 1fr)',
+      gap: '6px',
+      paddingBottom: `${2 / 16}em`
+    },
+    'section > header span': {
+      textAlign: 'center',
+      fontWeight: 'bold'
+    },
+    'section > header span:nth-child(6)': {
+      opacity: 0.5
+    },
+    'section > header span:nth-child(7)': {
+      opacity: 0.5
+    },
+    'section > div': {
+      flex: 1,
+      display: 'grid',
+      gridTemplateColumns: 'repeat(7, 1fr)',
+      gap: '6px'
+    },
+    'section > div button': {
+    },
+    'section > div button:nth-child(7n)': {
+      opacity: 0.5
+    },
+    'section > div button:nth-child(7n - 1)': {
+      opacity: 0.5
+    }
+  }
+}

package/src/Direction/index.js

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

package/src/Dropdown/index.js

@@ -0,0 +1,42 @@
+'use strict'
+import { Shape, IconText } from '..'
+import { styleRow, styleRowActive, styleDropDown } from './style'
+
+export const DropdownList = {
+  style: styleDropDown,
+  tag: 'ul',
+
+  proto: Shape,
+
+  state: {
+    active: 0
+  },
+
+  childProto: {
+    tag: 'li',
+    proto: [Shape],
+
+    style: styleRow,
+    props: (el, s) => ({
+      depth: 0,
+      round: 0
+      // theme: el.parent.props.rowTheme
+    }),
+
+    span: {
+      proto: [IconText],
+      props: {
+        icon: 'checkmark',
+        text: ''
+      }
+    },
+    class: {
+      active: (element, state) => (state.active === element.key) ? styleRowActive : {}
+    },
+    on: {
+      click: (event, element, state) => {
+        state.update({ active: element.key })
+      }
+    }
+  }
+}

package/src/Dropdown/style.js

@@ -0,0 +1,37 @@
+'use strict'
+
+export const styleDropDown = {
+  listStyleType: 'none',
+  padding: '4px',
+  maxHeight: '17.6em'
+}
+
+export const styleRow = {
+  height: `${42 / 16}em`,
+  width: `${178 / 16}em`,
+  position: 'relative',
+  padding: 0,
+  span: {
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '0 10px',
+    margin: '0 6px',
+    svg: { display: 'none' }
+  },
+  '&:not(:last-child) > span': {
+    borderBottom: '.5px solid rgba(0, 0, 0, .12)'
+  }
+}
+
+export const styleRowActive = {
+  // '&:not(:last-child) > span': {
+  //   borderBottom: 'none'
+  // },
+  'span > svg': { display: 'inline' }
+}
+
+export const styleSelectDropdown = {
+  color: 'red'
+}

package/src/Field/index.js

@@ -0,0 +1,21 @@
+'use strict'
+
+import { IconText, Input } from '../'
+import style from './style'
+
+export const Field = {
+  style,
+  proto: [IconText],
+  props: (el, s) => ({
+    depth: 16,
+    placeholder: '',
+    value: s[el.key],
+    padding: 'A B',
+    round: 'C',
+    type: 'text'
+  }),
+  input: {
+    proto: Input,
+    props: el => el.parent.props
+  }
+}