@symbo.ls/preview 0.0.31 → 0.0.32

package/.symbols/{button-download → button}/index.js

@@ -2,38 +2,29 @@
 
 import { CATEGORIES } from '../categories'
 
-import { Button } from '@symbo.ls/components'
+import { Button } from 'smbls'
 
-const key = 'button-download'
+const key = 'button'
 const title = 'Call to Action Button'
 const description = ''
 const category = CATEGORIES[1]
+const extend = 'Button'
+const state = {}
+const props = {
+  icon: 'arrow angle up',
+  gap: 'X2',
+  theme: 'primary',
+  text: 'Call to Action',
+  padding: 'Z2 B2',
+  round: 'C'
+}
 
 const component = {
   extend: Button,
-  props: {
-    icon: 'arrow angle up',
-    gap: 'X2',
-    theme: 'primary',
-    text: 'Call to Action',
-    padding: 'Z2 B2',
-    round: 'C'
-  }
+  props
 }
 
-const code = `{
-  extend: Button,
-  props: {
-    icon: 'arrow angle up',
-    theme: 'primary',
-    text: 'Call to Action',
-    round: 'C'
-  }
-}`
-
-const state = {}
-const props = {
-}
+const code = ``
 
 const settings = {
   gridOptions: { colspan: 4, rowspan: 2 }
@@ -43,6 +34,7 @@ export default {
   key,
   title,
   description,
+  extend,
   category,
   component,
   code,

package/.symbols/{button-archived → button-all-star}/index.js

@@ -2,43 +2,32 @@
 
 import { CATEGORIES } from '../categories'
 
-import style from './style'
-import { Button } from '@symbo.ls/components'
+import { Button } from 'smbls'
 
 const key = 'all-star'
 const title = 'All Star'
 const description = ''
 const category = CATEGORIES[1]
+const extend = 'Button'
 
-const component = {
-  extend: Button,
-  style,
-
-  props: {
-    icon: 'star',
-    text: 'All Star',
-    theme: 'label',
-    padding: 'X1 Z2',
-    gap: 'X',
-    round: 'A'
-  }
+const state = {}
+const props = {
+  icon: 'star',
+  text: 'All Star',
+  theme: 'label',
+  padding: 'X1 Z2',
+  gap: 'X',
+  round: 'A',
+  fontWeight: 'bold'
 }
 
-const code = `{
+const component = {
   extend: Button,
-  props: {
-    round: 'A',
-    padding: 'Z A',
-    icon: 'star',
-    text: 'Archived',
-    theme: 'label'
-  }
-}`
-
-const state = {}
-const props = {
+  props
 }
 
+const code = ``
+
 const settings = {
   gridOptions: { colspan: 3, rowspan: 2 }
 }
@@ -48,10 +37,13 @@ export default {
   title,
   description,
   category,
+  extend,
+
   component,
   code,
   state,
   props,
+
   settings,
   interactivity: [],
   dataTypes: []

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

@@ -2,48 +2,31 @@
 
 import { CATEGORIES } from '../categories'
 
-import { CircleButton } from '@symbo.ls/components'
+import { CircleButton } from 'smbls'
 
 const key = 'button-circle'
 const title = 'Circle Button'
+const extend = 'CircleButton'
 const description = ''
 const category = CATEGORIES[1]
 
-const component = {
-  extend: CircleButton,
-  props: {
-    theme: 'secondary',
-    background: 'blue .2',
-    fontSize: 'A2',
-    color: 'white',
-    padding: 'Y2',
-    icon: null,
-    text: '3'
-  }
-}
-
-const code = {
-  react: `<CircleButton
-  ...{
+const state = {}
+const props = {
   theme: 'secondary',
+  background: 'blue .2',
+  fontSize: 'A2',
+  color: 'white',
   padding: 'Y2',
   text: '3'
-} />`,
-  domql: `{
-  extend: CircleButton,
-  props: {
-    theme: 'secondary',
-    padding: 'Y2',
-    text: '3'
-  }
-}`
 }
 
-const state = {}
-const props = {
-  text: '3'
+const component = {
+  extend: CircleButton,
+  props
 }
 
+const code = ``
+
 const settings = {
   gridOptions: { colspan: 2, rowspan: 2 }
 }
@@ -54,6 +37,7 @@ export default {
   description,
   category,
   component,
+  extend,
   code,
   state,
   props,

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

@@ -2,86 +2,59 @@
 
 import { CATEGORIES } from '../categories'
 
-import { KangorooButton } from '@symbo.ls/components'
+import { KangorooButton } from 'smbls'
 
-const key = 'button-pro'
+const key = 'ButtonPro'
 const title = 'Pro Button'
 const description = ''
 const category = CATEGORIES[1]
+const extend = 'KangorooButton'
 
-const component = {
-  extend: KangorooButton,
+const state = {}
+const props = {
+  theme: 'quinary',
+  round: 'Z2',
+  padding: 'X1 X1 X1 A2',
+  size: 'A',
+  gap: 'A',
+  transition: 'A defaultBezier',
+  transitionProperty: 'background, color, opacity',
+  color: 'white',
 
-  props: {
-    theme: 'quinary',
-    round: 'Z2',
-    padding: 'X1 X1 X1 A2',
-    size: 'A',
-    gap: 'A',
-    transition: 'A defaultBezier',
-    transitionProperty: 'background, color, opacity',
+  label: {
+    gap: 'X1',
+    text: 'Become PRO',
+    alignItems: 'center',
     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'
+    fontWeight: '500',
+    icon: {
+      name: 'star',
+      color: 'yellow'
     }
   },
-
-  label: {},
-  child: {}
-}
-
-const code = {
-  react: `<KangorooButton ...{
-  // ...
-
-  label: {
-    // ...
-  },
-
   child: {
-    // ...
+    background: 'black .65',
+    round: 'Z',
+    size: 'Z',
+    padding: 'Z A2',
+    text: '1 month free',
+    opacity: '.85'
   }
-} />`,
-  domql: `{
-  extend: KangorooButton,
+}
 
-  props: {
-    // ...
+const component = {
+  extend: KangorooButton,
 
-    label: {
-      // ...
-    },
+  props,
 
-    child: {
-      // ...
-    }
-  }
-}`
+  label: {},
+  child: {}
 }
 
-const state = {}
-const props = {
-}
+const code = ``
 
 const settings = {
-  gridOptions: { colspan: 6, rowspan: 2 }
+  gridOptions: { colspan: 5, rowspan: 2 }
 }
 
 export default {
@@ -89,11 +62,13 @@ export default {
   title,
   description,
   category,
+  extend,
+
   component,
   code,
   state,
-
   props,
+
   settings,
   interactivity: ['click'],
   dataTypes: ['object']

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

@@ -2,92 +2,57 @@
 
 import { CATEGORIES } from '../categories'
 
-import { KangorooButton } from '@symbo.ls/components'
-import { isObject } from 'domql/src/utils'
+import { KangorooButton } from 'smbls'
 
 const key = 'button-theme-switcher'
 const title = 'Theme Switcher'
 const description = ''
 const category = CATEGORIES[1]
+const extend = 'KangorooButton'
 
-const component = {
-  extend: KangorooButton,
-
-  childExtend: {
-
-  },
-
-  props: {
-    round: 'C',
-    padding: 'V2 V2 V2 A1',
-    gap: 'Z1',
-    depth: 16,
-    fontWeight: '500',
-
-    label: {
-      gap: 'X1',
-      text: 'Light Mode',
-      padding: 'Z2 X',
-      icon: {
-        color: 'yellow',
-        name: 'sun'
-      }
-    },
-
-    child: {
-      gap: 'X1',
-      round: 'C',
-      text: 'Dark Mode',
-      background: 'black .95',
-      color: 'white',
-      padding: 'Z2 A2',
-      icon: {
-        color: 'yellow',
-        name: 'moon'
-      }
+const state = {}
+const props = {
+  round: 'C',
+  padding: 'V2 V2 V2 A1',
+  gap: 'Z1',
+  depth: 16,
+  fontWeight: '500',
+
+  label: {
+    gap: 'X1',
+    text: 'Light Mode',
+    padding: 'Z2 X',
+    icon: {
+      color: 'yellow',
+      name: 'sun'
     }
   },
 
-  label: {},
-  child: {}
-}
-
-const code = `{
-  extend: KangorooButton,
-  props: {
+  child: {
+    gap: 'X1',
     round: 'C',
-    size: 'Z',
-
-    light: {
-      icon: 'sun',
-      text: 'Light Mode'
-    },
-
-    dark: {
-      round: 'C',
-      icon: 'moon',
-      text: 'Dark Mode'
+    text: 'Dark Mode',
+    background: 'black .95',
+    color: 'white',
+    padding: 'Z2 A2',
+    icon: {
+      color: 'yellow',
+      name: 'moon'
     }
   }
-}`
+}
 
-const state = {}
-const props = {
-  round: 'C',
-  size: 'Z',
+const component = {
+  extend: KangorooButton,
 
-  light: {
-    icon: 'sun',
-    text: 'Light Mode'
-  },
+  props,
 
-  child: {
-    round: 'C',
-    icon: 'moon',
-    text: 'Dark Mode'
-  }
+  label: {},
+  child: {}
 }
 
+const code = ``
+
 const settings = {
   gridOptions: { colspan: 5, rowspan: 2 }
 }
@@ -98,6 +63,8 @@ export default {
   description,
   category,
   component,
+  extend,
+
   code,
   state,
   props,

package/.symbols/components.js

@@ -0,0 +1,42 @@
+'use strict'
+
+import { codify } from '@symbo.ls/utils'
+
+import Button from './button'
+import CircleButton from './button-circle'
+import ButtonPro from './button-pro'
+import ButtonAllStar from './button-all-star'
+import User from './user'
+import UserBundle from './user-bundle'
+import ButtonThemeSwitcher from './button-theme-switcher'
+import Notification from './notification'
+import DropdownList from './dropdown'
+import Label from './label'
+import Datepicker from './datepicker'
+import Field from './field'
+import Tooltip from './tooltip'
+import Pills from './pills'
+
+const components = {
+  Button,
+  CircleButton,
+  UserBundle,
+  ButtonPro,
+  ButtonAllStar,
+  User,
+  ButtonThemeSwitcher,
+  Notification,
+  DropdownList,
+  Label,
+  Datepicker,
+  Field,
+  Tooltip,
+  Pills
+}
+
+export const COMPONENTS = Object.keys(components).map(key => {
+  const item = components[key]
+  const { props } = item
+  const code = codify(item.extend, props)
+  return { ...item, code }
+})

package/.symbols/datepicker/index.js

@@ -10,17 +10,20 @@ const key = 'datepicker'
 const title = 'DatePicker'
 const description = ''
 const category = CATEGORIES[7]
+const extend = 'DatePicker'
+
+const state = {}
+const props = {
+  background: '--theme-quinary-dark-background',
+  style: {
+    backdropFilter: 'blur(3px)',
+  }
+}
 
 const component = {
   style,
   extend: DatePicker,
-  props: {
-    theme: null,
-    background: '--theme-quinary-dark-background',
-    style: {
-      backdropFilter: 'blur(3px)',
-    }
-  },
+  props,
   aside: {
     cnt: {
       $setStateCollection: () => {
@@ -32,13 +35,6 @@ const component = {
 
 const code = `{}`
 
-const state = {}
-const props = {
-  style: {
-    backdropFilter: 'blur(3px)',
-  }
-}
-
 const settings = {
   gridOptions: { colspan: 7, rowspan: 5 }
 }
@@ -48,6 +44,7 @@ export default {
   title,
   description,
   category,
+  extend,
   component,
   code,
   state,

package/.symbols/{dropdown-list → dropdown}/index.js

@@ -2,14 +2,18 @@
 
 import { CATEGORIES } from '../categories'
 
-import { DropdownList } from '@symbo.ls/components'
+import { DropdownList } from 'smbls'
 
-const key = 'dropdown-list'
+const key = 'dropdown'
 const title = 'Dropdown List'
 const description = ''
 const category = CATEGORIES[5]
+const extend = 'DropdownList'
+
+const state = {
+  active: '1'
+}
 
-const state = {}
 const props = {
   theme: 'quaternary',
   round: 'A'
@@ -25,7 +29,15 @@ const component = {
     { span: { text: 'Yesterday' } } ,
     { span: { text: 'A week age' } } ,
     { span: { text: 'A month ago' } }
-  ]
+  ],
+
+  childExtend: {
+    on: {
+      click: (event, element, state) => {
+        state.update({ active: element.key })
+      }
+    }
+  }
 }
 
 const code = `{}`
@@ -38,10 +50,13 @@ export default {
   title,
   description,
   category,
+  extend,
+
   component,
   code,
   state,
   props,
+
   settings,
   interactivity: [],
   dataTypes: []

package/.symbols/field/index.js

@@ -8,18 +8,19 @@ const key = 'field'
 const title = 'Field'
 const description = ''
 const category = CATEGORIES[2]
+const extend = 'Input'
+
+const state = {}
+const props = {
+  placeholder: 'Text in me'
+}
 
 const component = {
   extend: Input,
-  props: (el, s) => ({
-    placeholder: 'Text in me'
-  })
+  props
 }
 
-const code = `{}`
-
-const state = {}
-const props = {}
+const code = ``
 
 const settings = {
   gridOptions: { colspan: 4, rowspan: 2 }
@@ -31,6 +32,8 @@ export default {
   description,
   category,
   component,
+  extend,
+
   code,
   state,
   props,

package/.symbols/index.js

@@ -1,121 +1,4 @@
 'use strict'
 
-import { deepMerge } from '@domql/utils'
-
-import circleButton from './button-circle'
-import buttonContacts from './button-contacts'
-import buttonDownload from './button-download'
-import buttonPro from './button-pro'
-import buttonArchived from './button-archived'
-import buttonUser from './button-user'
-import buttonThemeSwitcher from './button-theme-switcher'
-import notification from './notification'
-import dropdownList from './dropdown-list'
-import label from './label'
-import datepicker from './datepicker'
-import field from './field'
-import tooltip from './tooltip'
-import pills from './pills'
-
-import * as smbls from '@symbo.ls/components/src/allImports'
-
-const define = {
-  default: {
-    settings: {
-      gridOptions: { colspan: 3, rowspan: 2 }
-    }
-  },
-  ButtonTitle: {
-    props: {
-      iconBox: {
-        icon: { name: 'checkmark' }
-      },
-      title: {
-        text: 'screen'
-      }
-    },
-    settings: {
-      gridOptions: { colspan: 3, rowspan: 2 }
-    }
-  },
-  WiderButton: {
-    props: {
-      icon: { name: 'color outline' }
-    },
-    settings: {
-      gridOptions: { colspan: 3, rowspan: 2 }
-    }
-  },
-  AccessibilityCheck: {
-    settings: {
-      gridOptions: { colspan: 8, rowspan: 2 }
-    }
-  },
-  Upload: {
-    settings: {
-      gridOptions: { colspan: 5, rowspan: 2 }
-    }
-  },
-  TestText: {
-    settings: {
-      gridOptions: { colspan: 6, rowspan: 2 }
-    }
-  },
-  Platforms: {
-    settings: {
-      gridOptions: { colspan: 5, rowspan: 2 }
-    }
-  },
-  DeviceButtonSet: {
-    settings: {
-      gridOptions: { colspan: 6, rowspan: 2 }
-    }
-  },
-  SearchHeader: {
-    settings: {
-      gridOptions: { colspan: 6, rowspan: 2 }
-    }
-  },
-  Search: {
-    settings: {
-      gridOptions: { colspan: 4 }
-    }
-  },
-  CodePreview: {
-    settings: {
-      gridOptions: { colspan: 4, rowspan: 4 }
-    }
-  },
-  StateDesignElement: {
-    settings: {
-      gridOptions: { colspan: 3, rowspan: 2 }
-    }
-  }
-}
-
-export const LIBRARY = Object.keys(smbls).map(key => {
-  const component = smbls[key]
-  const base = define[key] || define.default
-  return deepMerge({
-    key,
-    component: { extend: component },
-    code: 'private',
-  }, base)
-})
-
-export const COMPONENTS = [
-  circleButton,
-  buttonDownload,
-  buttonPro,
-  buttonArchived,
-  buttonContacts,
-  buttonUser,
-  label,
-  buttonThemeSwitcher,
-  notification,
-  dropdownList,
-  datepicker,
-  field,
-  tooltip,
-  pills
-]
+export * from './library'
+export * from './components'

package/.symbols/label/index.js

@@ -8,13 +8,17 @@ const key = 'label'
 const title = 'Label'
 const description = ''
 const category = CATEGORIES[0]
+const extend = 'Label'
+
+const state = {}
+const props = {
+  text: state.value
+}
 
 const component = {
   extend: Label,
   state: { value: 2 },
-  props: ({ state }) => ({
-    text: state.value
-  }),
+  props,
   on: {
     click: (ev, { state }) => {
       state.update({ value: state.value + 1 })
@@ -22,10 +26,7 @@ const component = {
   }
 }
 
-const code = `{}`
-
-const state = {}
-const props = {}
+const code = ``
 
 const settings = {
   gridOptions: { colspan: 3, rowspan: 2 }

package/.symbols/library.js

@@ -0,0 +1,90 @@
+'use strict'
+
+import * as lib from '@symbo.ls/components/src/allImports'
+
+import { deepMerge } from '@domql/utils'
+
+const define = {
+  default: {
+    settings: {
+      gridOptions: { colspan: 3, rowspan: 2 }
+    }
+  },
+  ButtonTitle: {
+    props: {
+      iconBox: {
+        icon: { name: 'checkmark' }
+      },
+      title: {
+        text: 'screen'
+      }
+    },
+    settings: {
+      gridOptions: { colspan: 3, rowspan: 2 }
+    }
+  },
+  WiderButton: {
+    props: {
+      icon: { name: 'color outline' }
+    },
+    settings: {
+      gridOptions: { colspan: 3, rowspan: 2 }
+    }
+  },
+  AccessibilityCheck: {
+    settings: {
+      gridOptions: { colspan: 8, rowspan: 2 }
+    }
+  },
+  Upload: {
+    settings: {
+      gridOptions: { colspan: 5, rowspan: 2 }
+    }
+  },
+  TestText: {
+    settings: {
+      gridOptions: { colspan: 6, rowspan: 2 }
+    }
+  },
+  Platforms: {
+    settings: {
+      gridOptions: { colspan: 5, rowspan: 2 }
+    }
+  },
+  DeviceButtonSet: {
+    settings: {
+      gridOptions: { colspan: 6, rowspan: 2 }
+    }
+  },
+  SearchHeader: {
+    settings: {
+      gridOptions: { colspan: 6, rowspan: 2 }
+    }
+  },
+  Search: {
+    settings: {
+      gridOptions: { colspan: 4 }
+    }
+  },
+  CodePreview: {
+    settings: {
+      gridOptions: { colspan: 4, rowspan: 4 }
+    }
+  },
+  StateDesignElement: {
+    settings: {
+      gridOptions: { colspan: 3, rowspan: 2 }
+    }
+  }
+}
+
+export const LIBRARY = Object.keys(lib).map(key => {
+  const component = lib[key]
+  const base = define[key] || define.default
+  return deepMerge({
+    key,
+    component: { extend: component },
+    props: {},
+    code: { react: 'private', domql: 'private' }
+  }, base)
+})

package/.symbols/notification/index.js

@@ -8,24 +8,20 @@ const key = 'notification'
 const title = 'Notification'
 const description = ''
 const category = CATEGORIES[4]
-
-const component = {
-  extend: Notification,
-  props: { theme: 'alert' }
-}
-
-const code = `{
-  extend: Notification,
-  props: {
-    theme: 'alert'
-  }
-}`
+const extend = 'Notification'
 
 const state = {}
 const props = {
   theme: 'alert'
 }
 
+const component = {
+  extend: Notification,
+  props
+}
+
+const code = ``
+
 const settings = {
   gridOptions: { colspan: 4, rowspan: 2 }
 }
@@ -35,7 +31,9 @@ export default {
   title,
   description,
   category,
+  extend,
   component,
+
   code,
   state,
   props,

package/.symbols/pills/index.js

@@ -2,24 +2,25 @@
 
 import { CATEGORIES } from '../categories'
 
-import { Pills } from '@symbo.ls/components'
+import { Pills } from 'smbls'
 
 const key = 'pills'
 const title = 'Pills'
 const description = ''
 const category = CATEGORIES[CATEGORIES.length - 1]
+const extend = 'Pills'
+
+const state = { active: 1 }
+const props = {}
 
 const component = {
   extend: Pills,
-  state: { active: 1 },
+  state,
   ...[{}, {}, {}, {}, {}]
 }
 
 const code = `{}`
 
-const state = {}
-const props = {}
-
 const settings = {
   gridOptions: { colspan: 3, rowspan: 2 }
 }
@@ -30,6 +31,8 @@ export default {
   description,
   category,
   component,
+  extend,
+
   code,
   state,
   props,

package/.symbols/tooltip/index.js

@@ -8,15 +8,16 @@ const key = 'tooltip'
 const title = 'Tooltip'
 const description = ''
 const category = CATEGORIES[8]
+const extend = 'Tooltip'
+
+const state = {}
+const props = {}
 
 const component = {
   extend: Tooltip
 }
 
-const code = `{}`
-
-const state = {}
-const props = {}
+const code = ``
 
 const settings = {
   gridOptions: { colspan: 4, rowspan: 2 }
@@ -27,11 +28,13 @@ export default {
   title,
   description,
   category,
+  extend,
+
   component,
   code,
   state,
+  props,
 
- props,
   settings,
   interactivity: [],
   dataTypes: []

package/.symbols/{button-user → user}/index.js

@@ -4,46 +4,50 @@ import { CATEGORIES } from '../categories'
 
 import { Button, User } from 'smbls'
 
-const key = 'button-user'
+const key = 'user'
 const title = 'User Button'
 const description = ''
 const category = CATEGORIES[1]
+const extend = 'User'
 
-const component = {
-  extend: Button,
-  tag: 'label',
+const state = {}
+const props = {
+  size: 'A',
+  round: 'C',
+  depth: 16,
+  gap: 'Y',
+  padding: 'W2 A W2 W2',
+  theme: 'quaternary',
 
-  props: (el, s) => ({
-    size: 'A',
-    round: 'C',
-    depth: 16,
-    gap: 'Y',
-    padding: 'W2 A W2 W2',
-    theme: 'quaternary',
+  position: 'relative',
+  cursor: 'pointer',
 
-    position: 'relative',
-    cursor: 'pointer',
+  user: {
+    boxSize: 'B1 B1',
+    pointerEvents: 'none'
+  },
+
+  select: {
+    outline: 'none',
+    pointerEvents: 'all',
+    appearance: 'none',
+    border: 'none',
+    width: '100%',
+    height: '100%',
+    background: 'none',
+    color: 'currentColor',
+    fontSize: 'A',
+    lineHeight: 1,
+    margin: '0 0 0 -B1+X',
+    padding: '0 A 0 B1+X'
+  }
+}
 
-    user: {
-      boxSize: 'B1 B1',
-      pointerEvents: 'none'
-    },
+const component = {
+  extend: Button,
+  tag: 'label',
 
-    select: {
-      outline: 'none',
-      pointerEvents: 'all',
-      appearance: 'none',
-      border: 'none',
-      width: '100%',
-      height: '100%',
-      background: 'none',
-      color: 'currentColor',
-      fontSize: 'A',
-      lineHeight: 1,
-      margin: '0 0 0 -B1+X',
-      padding: '0 A 0 B1+X'
-    },
-  }),
+  props,
 
   user: { extend: User },
   select: {
@@ -61,11 +65,7 @@ const component = {
   }
 }
 
-const code = `{
-}`
-
-const state = {}
-const props = {}
+const code = ``
 
 const settings = {
   gridOptions: { colspan: 4, rowspan: 2 }
@@ -76,10 +76,13 @@ export default {
   title,
   description,
   category,
+  extend,
+
   component,
   code,
   state,
   props,
+
   settings,
   interactivity: [],
   dataTypes: []

package/.symbols/{button-contacts → user-bundle}/index.js

@@ -3,33 +3,26 @@
 import { CATEGORIES } from '../categories'
 import style from './style'
 
-import { Button, UserBundle } from '@symbo.ls/components'
+import { UserBundle } from 'smbls'
 
-const key = 'button-contacts'
+const key = 'user-bundle'
 const title = 'Contacts Button'
 const description = ''
 const category = CATEGORIES[1]
+const extend = 'UserBundle'
+
+const state = {}
+const props = {}
 
 const component = {
-  extend: [UserBundle],
+  extend: UserBundle,
   ...[{}, {}, {}]
 }
 
-const code = `{
-  round: 42,
-  users: [{}, {}, {}],
-  caption: 'View all Contacts'
-}`
-
-const state = {}
-const props = {
-  round: 42,
-  users: [{}, {}, {}],
-  caption: 'View all Contacts'
-}
+const code = ``
 
 const settings = {
-  gridOptions: { colspan: 5, rowspan: 2 }
+  gridOptions: { colspan: 3, rowspan: 2 }
 }
 
 export default {
@@ -37,11 +30,13 @@ export default {
   title,
   description,
   category,
+  extend,
+
   component,
   code,
   state,
-
   props,
+
   settings,
   interactivity: [],
   dataTypes: []

package/README.md

@@ -5,7 +5,7 @@ Example dev setup (boilerplate) to use [DOMQL](https://github.com/rackai/domql).
 
 1. Clone the repo
 ```
-git clone git@github.com:rackai/editor.git
+git clone git@github.com:symbo-ls/preview.git
 ```
 
 2. Install scripts

package/package.json

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

package/src/pages/Export/description.js

@@ -74,7 +74,10 @@ export default {
 
     code: {
       extend: 'Code',
-      props: { margin: '0', flex: '0 0 320px' },
+      props: {
+        flex: '0 0 320px',
+        margin: '0'
+      },
       if: ({ state }) => state.code,
       title: {},
       code: {

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

@@ -1,5 +0,0 @@
-'use strict'
-
-export default {
-  fontWeight: 'bold'
-}