@symbo.ls/preview 0.0.21 → 0.0.23

package/.symbols/button-circle/index.js

@@ -14,6 +14,7 @@ const component = {
   props: {
     theme: 'secondary',
     background: 'blue .2',
+    fontSize: 'A2',
     color: 'white',
     padding: 'Y2',
     icon: null,

package/.symbols/button-pro/index.js

@@ -11,6 +11,40 @@ const category = CATEGORIES[1]
 
 const component = {
   extend: KangorooButton,
+
+  props: {
+    theme: 'quinary',
+    round: 'Z2',
+    padding: 'X1 X1 X1 A2',
+    size: 'A',
+    gap: 'A',
+    transition: 'A defaultBezier',
+    transitionProperty: 'background, color, opacity',
+    color: 'white',
+
+    label: {
+      gap: 'X1',
+      text: 'Become PRO',
+      alignItems: 'center',
+      color: 'white',
+      fontWeight: '500',
+      icon: {
+        name: 'star',
+        color: 'yellow'
+      }
+    },
+    child: {
+      background: 'black .65',
+      round: 'Z',
+      size: 'Z',
+      padding: 'Z A2',
+      text: '1 month free',
+      opacity: '.85'
+    }
+  },
+
+  label: {},
+  child: {}
 }
 
 const code = {

package/.symbols/button-theme-switcher/index.js

@@ -2,7 +2,6 @@
 
 import { CATEGORIES } from '../categories'
 
-import style from './style'
 import { KangorooButton } from '@symbo.ls/components'
 import { isObject } from 'domql/src/utils'
 
@@ -12,41 +11,48 @@ const description = ''
 const category = CATEGORIES[1]
 
 const component = {
-  style: style,
   extend: KangorooButton,
 
+  childExtend: {
+
+  },
+
   props: {
     round: 'C',
-    size: 'A',
-    padding: 'X1 Y X1 A1',
+    padding: 'V2 V2 V2 A1',
     gap: 'Z1',
     depth: 16,
-
-    light: {
-      icon: 'sun',
-      text: 'Light Mode'
+    fontWeight: '500',
+
+    label: {
+      gap: 'X1',
+      text: 'Light Mode',
+      padding: 'Z2 X',
+      icon: {
+        color: 'yellow',
+        name: 'sun'
+      }
     },
 
     child: {
+      gap: 'X1',
       round: 'C',
-      icon: 'moon',
-      padding: 'Z Z1',
-      text: 'Dark Mode'
+      text: 'Dark Mode',
+      background: 'black .95',
+      color: 'white',
+      padding: 'Z2 A2',
+      icon: {
+        color: 'yellow',
+        name: 'moon'
+      }
     }
   },
 
-  iconText: {},
+  label: {},
   child: {}
 }
 
-function strfy (obj) {
-  return Object.entries(obj).reduce((str, [p, val]) => {
-    return `${str}${p}::${isObject(val) ? strfy(val) : val}\n`;
-  }, '');
-}
-
-const code = strfy(component)
-const code2 = `{
+const code = `{
   extend: KangorooButton,
   props: {
     round: 'C',

package/.symbols/button-user/index.js

@@ -2,7 +2,6 @@
 
 import { CATEGORIES } from '../categories'
 
-import style from './style'
 import { Button, User } from '@symbo.ls/components'
 
 const key = 'button-user'
@@ -13,7 +12,6 @@ const category = CATEGORIES[1]
 const component = {
   extend: Button,
   tag: 'label',
-  style,
 
   props: (el, s) => ({
     size: 'A',
@@ -21,19 +19,32 @@ const component = {
     depth: 16,
     gap: 'Y2',
     padding: 'W2 A W2 W2',
-    icon: 'arrowAngleDown',
+    theme: 'tertiary',
+
+    position: 'relative',
+    cursor: 'pointer',
+
+    user: {
+      boxSize: 'B1 B1',
+    },
+
+    select: {
+      outline: 'none',
+      appearance: 'none',
+      border: 'none',
+      width: '100%',
+      height: '100%',
+      background: 'none',
+      color: 'currentColor',
+      fontSize: 'A',
+      lineHeight: 1,
+      padding: '0 A 0 0'
+    },
   }),
 
-  user: {
-    extend: User,
-    props: { boxSize: 'B1 B1' },
-    class: { dis: { pointerEvents: 'none' } }
-  },
+  user: { extend: User },
   select: {
-    attr: {
-      name: 'user',
-      id: 'user'
-    },
+    attr: { name: 'user', id: 'user' },
     childExtend: { tag: 'option' },
     ...[
       { text: 'Kevin' },
@@ -54,13 +65,7 @@ const code = `{
 }`
 
 const defaultState = {}
-const props = {
-  size: 'A',
-  round: 'C',
-  depth: 16,
-  icon: 'arrowAngleDown',
-  theme: 'quaternary'
-}
+const props = {}
 
 const settings = {
   gridOptions: { colspan: 4, rowspan: 2 }

package/.symbols/field/index.js

@@ -2,7 +2,7 @@
 
 import { CATEGORIES } from '../categories'
 
-import { Field } from '@symbo.ls/components'
+import { Field, Input } from 'smbls'
 
 const key = 'field'
 const title = 'Field'
@@ -10,8 +10,9 @@ const description = ''
 const category = CATEGORIES[2]
 
 const component = {
-  extend: Field,
+  extend: Input,
   props: (el, s) => ({
+    placeholder: 'Text in me'
   })
 }
 

package/.symbols/notification/index.js

@@ -2,8 +2,7 @@
 
 import { CATEGORIES } from '../categories'
 
-import style from './style'
-import { Notification } from '@symbo.ls/components'
+import { Notification } from 'smbls'
 
 const key = 'notification'
 const title = 'Notification'
@@ -11,11 +10,8 @@ const description = ''
 const category = CATEGORIES[4]
 
 const component = {
-  style,
   extend: Notification,
-  props: {
-    theme: 'alert'
-  }
+  props: { theme: 'alert' }
 }
 
 const code = `{

package/.symbols/pills/index.js

@@ -10,7 +10,9 @@ const description = ''
 const category = CATEGORIES[CATEGORIES.length - 1]
 
 const component = {
-  extend: Pills
+  extend: Pills,
+  state: { active: 1 },
+  ...[{}, {}, {}, {}, {}]
 }
 
 const code = `{}`

package/.symbols/tooltip/index.js

@@ -2,7 +2,7 @@
 
 import { CATEGORIES } from '../categories'
 
-import { Tooltip } from '@symbo.ls/components'
+import { Tooltip } from 'smbls'
 
 const key = 'tooltip'
 const title = 'Tooltip'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "repository": "https://github.com/rackai/editor",
   "main": "src/index.js",
   "scripts": {

package/src/app.js

@@ -51,10 +51,10 @@ const App = {
   },
 
   content: {
-    style: { position: 'relative' }
+    props: { position: 'relative' }
   },
 
-  Modal,
+  modal: Modal,
 
   on: {
     render: element => {

package/src/index.js

@@ -26,7 +26,7 @@ export default DOM.create({
   extend: App,
   style,
 
-  Header,
+  header: Header,
   routes: {
     '/': Library
   }

package/src/pages/Export/index.js

@@ -10,10 +10,9 @@ import scene from './scene'
 import tools from './tools'
 import description from './description'
 
-import { LIBRARY } from '../../../.symbols'
 import { COMPONENT_ROUTES } from './const'
 
-const componentState = () => LIBRARY.filter(v => {
+const componentState = (context) => context.LIBRARY.filter(v => {
   const key = window.location.pathname.split('component/')[1]
   return v.key === key
 })
@@ -28,8 +27,8 @@ export const Export = {
     padding: '0 Y2'
   },
 
-  state: () => ({
-    ...componentState()[0],
+  state: ({ context }) => ({
+    ...componentState(context)[0],
     ...state
   }),
 

package/src/pages/Export/scene.js

@@ -33,11 +33,9 @@ export default {
 
     content: {
       props: {
-        transition: 'all, B, cubic-bezier(.29,.67,.51,.97)',
+        transition: 'all, B, defaultBezier',
         style: {
-          '*': {
-            transition: 'all 255ms cubic-bezier(.29,.67,.51,.97)'
-          }
+          '*': { transition: 'all 255ms cubic-bezier(.29,.67,.51,.97)' }
         }
       },
       comp: (el, s) => ({

package/src/pages/Fonts/index.js

@@ -20,28 +20,12 @@ const mapFonts = (el, s) => {
       title: v,
       href: `/fonts/font-settings/${v}`,
       labels: [
-        { icon: 'variableFont', text: fontWeightCaption }
+        { icon: 'fontVariable', text: fontWeightCaption }
       ]
     }
   })
 }
 
-const mapFontFamilies = (el, s) => {
-  if (!el.context.SYSTEM) return
-  const { FONT_FAMILY } = el.context.SYSTEM
-  const fontFamilyKeys = Object.keys(FONT_FAMILY)
-
-  return fontFamilyKeys.map(v => {
-    const val = FONT_FAMILY[v]
-    if (v === 'default') return
-    return {
-      title: v,
-      href: `/fonts/font-family/${v}`,
-      val
-    }
-  }).filter(v => v)
-}
-
 const FontFaces = {
   extend: TypeSection,
   header: {
@@ -67,6 +51,22 @@ const FontFaces = {
   }
 }
 
+const mapFontFamilies = (el, s) => {
+  if (!el.context.SYSTEM) return
+  const { FONT_FAMILY } = el.context.SYSTEM
+  const fontFamilyKeys = Object.keys(FONT_FAMILY)
+
+  return fontFamilyKeys.map(v => {
+    const val = FONT_FAMILY[v]
+    if (v === 'default') return
+    return {
+      title: v,
+      href: `/fonts/font-family/${v}`,
+      val
+    }
+  }).filter(v => v)
+}
+
 const FontFamilies = {
   extend: TypeSection,
   props: { padding: '0 0 E 0' },
@@ -83,7 +83,7 @@ const FontFamilies = {
   content: {
     extend: Grid,
     props: {
-      columns: 'repeat(3, 1fr)',
+      columns: 'repeat(4, 1fr)',
       gap: 'A',
       margin: '0 -Z'
     },

package/.symbols/button-theme-switcher/style.js

@@ -1,16 +0,0 @@
-'use strict'
-
-export default {
-  fontWeight: 'bold',
-
-  svg: {
-    color: '#EDCB38',
-    marginRight: `${4 / 16}em`
-  },
-
-  span: {
-    maxHeight: '32px',
-    padding: `${9 / 14}em ${16 / 14}em`,
-    marginLeft: `${16 / 14}em`
-  }
-}

package/.symbols/button-user/style.js

@@ -1,25 +0,0 @@
-'use strict'
-
-export default {
-  position: 'relative',
-  cursor: 'pointer',
-  svg: {
-    pointerEvents: 'none',
-    position: 'absolute',
-    right: `${13 / 16}em`
-  },
-  select: {
-    outline: 'none',
-    appearance: 'none',
-    border: 'none',
-    width: '100%',
-    height: '100%',
-    background: 'none',
-    boxSizing: 'border-box',
-    color: 'currentColor',
-    fontSize: '1em',
-    lineHeight: 1,
-    paddingRight: '1.618em'
-    // paddingRight: `${16 / 16}em`
-  }
-}

package/.symbols/notification/style.js

@@ -1,5 +0,0 @@
-'use strict'
-
-export default {
-  borderBottomLeftRadius: '.4em',
-}