smbls 0.9.14 → 0.10.0

package/README.md

@@ -19,7 +19,7 @@ import { Box } from 'smbls'
 3. Use it inside your DOMQL code
 ```
 const Header = {
-  proto: Box,
+  extend: Box,
   // ...Other Properties
 }
 ```

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI Library built on Scratch and DOMQL",
   "private": false,
   "author": "symbo.ls",
-  "version": "0.9.14",
+  "version": "0.10.0",
   "repository": "https://github.com/symbo-ls/smbls",
   "main": "src/index.js",
   "files": [

package/src/Banner/index.js

@@ -7,17 +7,17 @@ import { UserBundle } from '../User'
 import { styleParentMode } from './style'
 
 export const ParentMode = {
-  proto: Shape,
+  extend: Shape,
   round: 10,
   theme: 'purple',
   style: styleParentMode,
   icon: {
-    proto: Icon,
+    extend: Icon,
     props: { icon: 'checkMedium' }
   },
   h2: 'Welcome to parent Mode',
   description: {
-    proto: UserBundle,
+    extend: UserBundle,
     users: { ...[{}, {}, {}] },
     span: 'You’ll now be able to chat with tutor privately. No other participants will see the messages.'
   }

package/src/Block.js

@@ -43,7 +43,7 @@ export const Block = {
       const [height, width] = props.boxSize.split(' ')
       return {
         ...mapSpacing(height, 'height'),
-        ...mapSpacing(width, 'width')
+        ...mapSpacing(width || height, 'width')
       }
     },
 
@@ -65,7 +65,7 @@ export const Block = {
       const [minHeight, maxHeight] = props.heightRange.split(' ')
       return {
         ...mapSpacing(minHeight, 'minHeight'),
-        ...mapSpacing(maxHeight, 'maxHeight')
+        ...mapSpacing(maxHeight || minHeight, 'maxHeight')
       }
     },
 
@@ -84,6 +84,7 @@ export const Block = {
     alignContent: ({ props }) => props.alignContent && ({ alignContent: props.alignContent }),
     justifyContent: ({ props }) => props.justifyContent && ({ justifyContent: props.justifyContent }),
     flexDirection: ({ props }) => props.flexDirection && ({ flexDirection: props.flexDirection }),
+    alignSelf: ({ props }) => props.alignSelf && ({ alignSelf: props.alignSelf }),
 
     flexWrap: ({ props }) => props.flexWrap && ({
       display: 'flex',
@@ -111,7 +112,7 @@ export const Block = {
       const [minHeight, maxHeight] = props.heightRange.split(' ')
       return {
         ...mapSpacing(minHeight, 'minHeight'),
-        ...mapSpacing(maxHeight, 'maxHeight')
+        ...mapSpacing(maxHeight || minHeight, 'maxHeight')
       }
     }
   }

package/src/Box.js

@@ -9,5 +9,5 @@ const PropsCSS = {
 }
 
 export const Box = {
-  proto: [Shape, Position, Theme, Block, Text, Overflow, Transition, Transform, Responsive, PropsCSS, Interaction]
+  extend: [Shape, Position, Theme, Block, Text, Overflow, Transition, Transform, Responsive, PropsCSS, Interaction]
 }

package/src/Button.js

@@ -11,7 +11,7 @@ const style = {
 }
 
 export const Button = {
-  proto: IconText,
+  extend: IconText,
   tag: 'button',
   props: {
     fontSize: 'A',
@@ -33,7 +33,7 @@ export const Button = {
 }
 
 export const SquareButton = {
-  proto: Button,
+  extend: Button,
   props: {
     fontSize: 'A',
     width: 'A',
@@ -46,7 +46,7 @@ export const SquareButton = {
 }
 
 export const CircleButton = {
-  proto: SquareButton,
+  extend: SquareButton,
   props: { round: 'C' }
 }
 
@@ -54,6 +54,6 @@ export const KangorooButton = {
   tag: 'button',
   props: { style },
 
-  iconText: { proto: IconText },
-  child: { proto: IconText }
+  iconText: { extend: IconText },
+  child: { extend: IconText }
 }

package/src/ButtonSet.js

@@ -5,6 +5,6 @@ import { Flex } from './Flex'
 
 export const ButtonSet = {
   tag: 'nav',
-  proto: Flex,
-  childProto: SquareButton
+  extend: Flex,
+  childExtend: SquareButton
 }

package/src/DatePicker/index.js

@@ -15,7 +15,7 @@ export const DatePicker = {
   },
 
   aside: {
-    childProto: { tag: 'button' },
+    childExtend: { tag: 'button' },
     ...[
       { text: '2020' },
       { text: '2021' },
@@ -32,11 +32,11 @@ export const DatePicker = {
   main: {
     header: {
       icon: {
-        proto: Icon,
+        extend: Icon,
         props: { icon: 'arrowMediumLeft' }
       },
       month: {
-        childProto: { tag: 'span' },
+        childExtend: { tag: 'span' },
         ...[
           { text: 'january' },
           { text: 'february' },
@@ -53,14 +53,14 @@ export const DatePicker = {
         ]
       },
       icon2: {
-        proto: Icon,
+        extend: Icon,
         props: { icon: 'arrowMediumRight' }
       }
     },
     days: {
       tag: 'section',
       header: {
-        childProto: { tag: 'span' },
+        childExtend: { tag: 'span' },
         ...[
           { text: 'Mo' },
           { text: 'Tu' },
@@ -72,7 +72,7 @@ export const DatePicker = {
         ]
       },
       content: {
-        childProto: { tag: 'button' },
+        childExtend: { tag: 'button' },
         ...[
           { text: '1' },
           { text: '2' },

package/src/Dropdown/index.js

@@ -6,15 +6,15 @@ export const DropdownList = {
   style: styleDropDown,
   tag: 'ul',
 
-  proto: Shape,
+  extend: Shape,
 
   state: {
     active: 0
   },
 
-  childProto: {
+  childExtend: {
     tag: 'li',
-    proto: [Shape],
+    extend: [Shape],
 
     style: styleRow,
     props: (el, s) => ({
@@ -24,7 +24,7 @@ export const DropdownList = {
     }),
 
     span: {
-      proto: [IconText],
+      extend: [IconText],
       props: {
         icon: 'checkmark',
         text: ''

package/src/Field.js

@@ -3,7 +3,7 @@
 import { IconText, Input } from '.'
 
 export const Field = {
-  proto: IconText,
+  extend: IconText,
   props: (el, s) => ({
     value: s[el.key],
 
@@ -36,5 +36,5 @@ export const Field = {
     }
   }),
 
-  input: { proto: Input }
+  input: { extend: Input }
 }

package/src/GridLayouts/index.js

@@ -5,7 +5,7 @@ import { Button, Link } from '..'
 import { styleGrid, styleGrid2 } from './style'
 
 const componentLink = {
-  proto: Link,
+  extend: Link,
   attr: {
     href: '#'
   }

package/src/Icon.js

@@ -5,7 +5,7 @@ import { SVG } from '.'
 import { ICONS } from '@symbo.ls/scratch'
 
 export const Icon = {
-  proto: SVG,
+  extend: SVG,
   props: ({ key, props, parent }) => {
     let iconName = props.inheritedString || props.name || props.icon || key
 

package/src/IconText.js

@@ -3,7 +3,7 @@
 import { Flex, Icon } from '.'
 
 export const IconText = {
-  proto: Flex,
+  extend: Flex,
 
   props: {
     align: 'center center',
@@ -11,7 +11,7 @@ export const IconText = {
   },
 
   icon: {
-    proto: Icon,
+    extend: Icon,
     if: ({ parent }) => parent.props.icon,
     props: 'match'
   },

package/src/Input.js

@@ -1,9 +1,6 @@
 'use strict'
 
-import { Box } from '.'
-
 export const Input = {
-  proto: Box,
   tag: 'input',
 
   props: {

package/src/Label.js

@@ -4,7 +4,7 @@ import { Shape } from './Shape'
 import { Text } from './Text'
 
 export const Label = {
-  proto: [Shape, Block, Text],
+  extend: [Shape, Block, Text],
 
   style: { lineHeight: 1 },
 

package/src/Notification.js

@@ -4,9 +4,9 @@ import { Shape, Block, IconText, Direction, Flex, Text } from '.'
 
 export const Notification = {
   style: { cursor: 'pointer' },
-  proto: [Shape, Block, Direction, Flex],
+  extend: [Shape, Block, Direction, Flex],
   icon: {
-    proto: [IconText],
+    extend: [IconText],
     props: {
       icon: 'info'
     },
@@ -16,17 +16,17 @@ export const Notification = {
     }
   },
   article: {
-    proto: [Flex],
+    extend: [Flex],
     style: {
       flexDirection: 'column',
       alignItems: 'flex-start'
     },
     caption: {
-      proto: Text,
+      extend: Text,
       text: 'Notification'
     },
     p: {
-      proto: Text,
+      extend: Text,
       props: {
         fontSize: 'Z',
         text: 'is not always a distraction'

package/src/Pills.js

@@ -15,7 +15,7 @@ export const Pills = {
     'div:nth-child(2)': { opacity: '.3' },
     'div:nth-child(3)': { opacity: '.3' }
   },
-  childProto: {
+  childExtend: {
     tag: 'div',
     props: {
       round: 42,

package/src/Select.js

@@ -12,7 +12,7 @@ export const Select = {
     }
   },
 
-  childProto: {
+  childExtend: {
     tag: 'option',
     props: {
       value: '',

package/src/Sidebar.js

@@ -3,10 +3,10 @@
 import { Icon, Link } from '.'
 
 const MenuItem = {
-  proto: Link,
+  extend: Link,
   props: { icon: '' },
   glyph: {
-    proto: Icon,
+    extend: Icon,
     name: ({ props }) => props.icon
   }
 }
@@ -17,7 +17,7 @@ export const Sidebar = {
     style: {
       a: { cursor: 'pointer' }
     },
-    childProto: MenuItem,
+    childExtend: MenuItem,
     ...[{}]
   }
 }

package/src/Slider/index.js

@@ -65,7 +65,7 @@ const listenProp = (el, prop, def) => {
 
 export const Slider = {
   minus: {
-    proto: SquareButton,
+    extend: SquareButton,
     props: { icon: 'minus' },
     on: {
       click: (ev, el, s) => {
@@ -87,7 +87,7 @@ export const Slider = {
     }
   },
   input: {
-    proto: RangeSlider,
+    extend: RangeSlider,
     attr: {
       value: (el, s) => listenProp(el, 'value', 50),
       min: (el, s) => listenProp(el, 'min', 0),
@@ -100,7 +100,7 @@ export const Slider = {
     }
   },
   plus: {
-    proto: SquareButton,
+    extend: SquareButton,
     props: { icon: 'plus' },
     on: {
       click: (ev, el, s) => {

package/src/Tooltip/index.js

@@ -6,7 +6,7 @@ import style from './style'
 
 export const Tooltip = {
   style,
-  proto: Shape,
+  extend: Shape,
   props: { theme: 'purple2' },
   caption: 'And tooltip is coming',
   span: 'and winter too'

package/src/User/index.js

@@ -4,7 +4,7 @@ import { Shape, Block } from '..'
 import { styleUser, styleUserBundle } from './style'
 
 export const User = {
-  proto: [Shape, Block],
+  extend: [Shape, Block],
   props: { boxSize: 'B B' },
   style: styleUser,
   tag: 'img',
@@ -16,7 +16,7 @@ export const User = {
 export const UserBundle = {
   style: styleUserBundle,
   users: {
-    childProto: User,
+    childExtend: User,
     ...[{}]
   },
   span: 'join classroom'