smbls 0.7.0 → 0.8.3

package/src/SideBar/index.js

@@ -0,0 +1,22 @@
+'use strict'
+import { Icon, Link } from '../'
+
+const MenuItem = {
+  proto: Link,
+  props: { icon: '' },
+  glyph: {
+    proto: Icon,
+    name: ({ props }) => props.icon
+  }
+}
+
+export const Sidebar = {
+  caption: '',
+  nav: {
+    style: {
+      a: { cursor: 'pointer' }
+    },
+    childProto: MenuItem,
+    ...[{}]
+  }
+}

package/src/Slider/index.js

@@ -0,0 +1,89 @@
+'use strict'
+
+import style from './style'
+
+import { SquareButton, Shape } from '..'
+import * as Scratch from '@symbo.ls/scratch'
+import { isFunction } from 'domql/src/utils'
+
+// TODO: fix this
+Scratch.setValue('THEME', {
+  background: 'white 0.2',
+
+  '&::-webkit-slider-thumb': {
+    background: '#232526',
+    borderColor: Scratch.opacify('#454646', 0.75)
+  },
+
+  '&:hover': {
+    '&::-webkit-slider-thumb': {
+      borderColor: Scratch.opacify('#fff', 0.35)
+    }
+  },
+
+  '&:focus, &:active': {
+    '&::-webkit-slider-thumb': {
+      borderColor: '#3C6AC0'
+    }
+  }
+}, 'sliderThumb')
+
+export const RangeSlider = {
+  style,
+  proto: Shape,
+  props: {
+    theme: 'sliderThumb'
+  },
+
+  tag: 'input',
+  attr: { type: 'range' }
+}
+
+const findOut = (el, s, prop, def) => {
+  const val = el.parent.parent.props[prop]
+  return isFunction(val) ? val(el, s) : val || def
+}
+
+export const Slider = {
+  proto: [Shape],
+
+  button0: {
+    proto: [SquareButton],
+    props: {
+      icon: 'minus'
+    },
+    on: {
+      click: (ev, el, s) => {
+        el.parent.parent.props.minusClick(ev, el, s)
+      }
+    }
+  },
+  value: {
+    tag: 'span',
+    // class: { w: { minWidth: `4ch` } },
+    text: (el, s) => `${findOut(el, s, 'value', 50)}${findOut(el, s, 'type') === 'fontSize' ? 'px' : ''}`
+  },
+  range: {
+    proto: RangeSlider,
+    attr: {
+      value: (el, s) => findOut(el, s, 'value', 50),
+      min: (el, s) => findOut(el, s, 'min', 0),
+      max: (el, s) => findOut(el, s, 'max', 100),
+      step: (el, s) => findOut(el, s, 'step', 1)
+    },
+    on: {
+      input: (ev, el, s) => el.parent.parent.props.input(ev, el, s)
+    }
+  },
+  button1: {
+    proto: [SquareButton],
+    props: {
+      icon: 'plus'
+    },
+    on: {
+      click: (ev, el, s) => {
+        el.parent.parent.props.plusClick(ev, el, s)
+      }
+    }
+  }
+}

package/src/Slider/style.js

@@ -0,0 +1,19 @@
+'use strict'
+
+export default {
+  appearance: 'none',
+  width: '100%',
+  height: '2px',
+  outline: 'none',
+  flex: 1,
+  '&::-webkit-slider-thumb': {
+    boxSizing: 'content-box',
+    appearance: 'none',
+    width: '8px',
+    height: '8px',
+    borderWidth: '2px',
+    borderStyle: 'solid',
+    borderRadius: '100%',
+    opacity: '.8'
+  }
+}

package/src/Text/index.js

@@ -0,0 +1,18 @@
+'use strict'
+
+import { mapFontSize } from '@symbo.ls/scratch'
+
+export const Text = {
+  props: {},
+
+  text: ({ props }) => props.text,
+
+  class: {
+    fontSize: ({ props }) => props.fontSize ? mapFontSize(props.fontSize) : null,
+    lineHeight: ({ props }) => ({ lineHeight: props.lineHeight }),
+    textDecoration: ({ props }) => ({ textDecoration: props.textDecoration }),
+    textTransform: ({ props }) => ({ textTransform: props.textTransform }),
+    textAlign: ({ props }) => ({ textAlign: props.textAlign }),
+    fontWeight: ({ props }) => ({ fontWeight: props.fontWeight })
+  }
+}

package/src/Text/style.js

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

package/src/Tooltip/index.js

@@ -0,0 +1,13 @@
+'use strict'
+
+import Shape from '../Shape'
+
+import style from './style'
+
+export const Tooltip = {
+  style,
+  proto: Shape,
+  props: { theme: 'purple2' },
+  caption: 'And tooltip is coming',
+  span: 'and winter too'
+}

package/src/Tooltip/style.js

@@ -0,0 +1,12 @@
+'use strict'
+
+export default {
+  textAlign: 'center',
+  padding: '1.2em',
+  caption: {
+    whiteSpace: 'nowrap',
+  },
+  span: {
+    opacity: '.5'
+  }
+}

package/src/Transform/index.js

@@ -0,0 +1,9 @@
+'use strict'
+
+export const Transform = {
+  class: {
+    transform: ({ props }) => ({
+      transform: props.transform
+    }),
+  }
+}

package/src/User/index.js

@@ -0,0 +1,25 @@
+'use strict'
+
+import { Shape, Block } from '..'
+import { styleUser, styleUserBundle } from './style'
+
+export const User = {
+  proto: [Shape, Block],
+  props: { boxSize: 'B B' },
+  style: styleUser,
+  tag: 'img',
+  attr: {
+    src: 'https://p194.p3.n0.cdn.getcloudapp.com/items/yAubz2KN/IMG_2375.jpg?v=c59a92ea47a959e386e952c3d84c08e5'
+  }
+}
+
+export const UserBundle = {
+  style: styleUserBundle,
+  users: {
+    childProto: User,
+    ...[{}]
+  },
+  span: 'join classroom'
+}
+
+export default User

package/src/User/style.js

@@ -0,0 +1,19 @@
+'use strict'
+
+export const styleUser = {
+  cursor: 'pointer',
+  borderRadius: '100%'
+}
+
+export const styleUserBundle = {
+  display: 'flex',
+  alignItems: 'center',
+  textTransform: 'capitalize',
+  '> div': {
+    display: 'flex',
+    marginRight: '1em',
+    '> img': {
+      marginRight: '-0.5em'
+    }
+  }
+}

package/src/index.js

@@ -0,0 +1,39 @@
+'use strict'
+
+import './styles.js'
+
+export * from './styles'
+
+export * from './Text'
+export * from './Block'
+export * from './Shape'
+export * from './Flex'
+export * from './Grid'
+export * from './Direction'
+export * from './Position'
+export * from './Overflow'
+export * from './Transform'
+export * from './Responsive'
+
+export * from './Box'
+
+export * from './SVG'
+export * from './Icon'
+export * from './Img'
+export * from './Link'
+export * from './IconText'
+export * from './Input'
+export * from './Field'
+export * from './Button'
+
+export * from './ButtonSet'
+export * from './User'
+export * from './Banner'
+export * from './Slider'
+export * from './Notification'
+export * from './Dropdown'
+export * from './DatePicker'
+export * from './Tooltip'
+export * from './Label'
+export * from './Pills'
+export * from './Select'

package/src/styles.js

@@ -0,0 +1,7 @@
+'use strict'
+
+export const clickable = {
+  cursor: 'pointer',
+  userSelect: 'none'
+  //
+}

package/index.js

@@ -1,35 +0,0 @@
-'use strict'
-
-export * from './styles'
-
-export * from '@symbo.ls/responsive'
-export * from '@symbo.ls/block'
-export * from '@symbo.ls/shape'
-export * from '@symbo.ls/flex'
-export * from '@symbo.ls/grid'
-export * from '@symbo.ls/direction'
-export * from '@symbo.ls/position'
-export * from '@symbo.ls/overflow'
-
-export * from '@symbo.ls/box'
-
-export * from '@symbo.ls/svg'
-export * from '@symbo.ls/icon'
-export * from '@symbo.ls/img'
-export * from '@symbo.ls/link'
-export * from '@symbo.ls/icon-text'
-export * from '@symbo.ls/input'
-export * from '@symbo.ls/field'
-export * from '@symbo.ls/button'
-
-export * from '@symbo.ls/buttonset'
-export * from '@symbo.ls/user'
-export * from '@symbo.ls/banner'
-export * from '@symbo.ls/slider'
-export * from '@symbo.ls/notification'
-export * from '@symbo.ls/dropdown'
-export * from '@symbo.ls/datepicker'
-export * from '@symbo.ls/tooltip'
-export * from '@symbo.ls/label'
-export * from '@symbo.ls/pills'
-export * from '@symbo.ls/select'