@symbo.ls/preview 0.0.30 → 0.0.32

package/.symbols/button/index.js

@@ -0,0 +1,47 @@
+'use strict'
+
+import { CATEGORIES } from '../categories'
+
+import { Button } from 'smbls'
+
+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
+}
+
+const code = ``
+
+const settings = {
+  gridOptions: { colspan: 4, rowspan: 2 }
+}
+
+export default {
+  key,
+  title,
+  description,
+  extend,
+  category,
+  component,
+  code,
+  state,
+
+  props,
+  settings,
+  interactivity: ['click'],
+  dataTypes: ['object']
+}

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 defaultState = {}
-const props = {
+  props
 }
 
+const code = ``
+
 const settings = {
   gridOptions: { colspan: 3, rowspan: 2 }
 }
@@ -48,10 +37,13 @@ export default {
   title,
   description,
   category,
+  extend,
+
   component,
   code,
-  defaultState,
+  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 defaultState = {}
-const props = {
-  text: '3'
+const component = {
+  extend: CircleButton,
+  props
 }
 
+const code = ``
+
 const settings = {
   gridOptions: { colspan: 2, rowspan: 2 }
 }
@@ -54,8 +37,9 @@ export default {
   description,
   category,
   component,
+  extend,
   code,
-  defaultState,
+  state,
   props,
   settings,
   interactivity: ['click'],

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 defaultState = {}
-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,
-  defaultState,
-
+  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 defaultState = {}
-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,8 +63,10 @@ export default {
   description,
   category,
   component,
+  extend,
+
   code,
-  defaultState,
+  state,
   props,
   settings,
   interactivity: [],

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 defaultState = {}
-const props = {
-  style: {
-    backdropFilter: 'blur(3px)',
-  }
-}
-
 const settings = {
   gridOptions: { colspan: 7, rowspan: 5 }
 }
@@ -48,9 +44,10 @@ export default {
   title,
   description,
   category,
+  extend,
   component,
   code,
-  defaultState,
+  state,
   props,
   settings,
   interactivity: ['click', 'choose'],

package/.symbols/dropdown/index.js

@@ -0,0 +1,63 @@
+'use strict'
+
+import { CATEGORIES } from '../categories'
+
+import { DropdownList } from 'smbls'
+
+const key = 'dropdown'
+const title = 'Dropdown List'
+const description = ''
+const category = CATEGORIES[5]
+const extend = 'DropdownList'
+
+const state = {
+  active: '1'
+}
+
+const props = {
+  theme: 'quaternary',
+  round: 'A'
+}
+
+const component = {
+  extend: DropdownList,
+  state,
+  props,
+
+  $setCollection: () => [
+    { span: { text: 'Today' } } ,
+    { 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 = `{}`
+const settings = {
+  gridOptions: { colspan: 5, rowspan: 5 }
+}
+
+export default {
+  key,
+  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 defaultState = {}
-const props = {}
+const code = ``
 
 const settings = {
   gridOptions: { colspan: 4, rowspan: 2 }
@@ -31,8 +32,10 @@ export default {
   description,
   category,
   component,
+  extend,
+
   code,
-  defaultState,
+  state,
   props,
   settings,
   interactivity: ['input'],