@symbo.ls/preview 0.0.90 → 0.0.91

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "0.0.90",
+  "version": "0.0.91",
   "repository": "https://github.com/rackai/editor",
   "main": "src/index.js",
   "scripts": {
@@ -25,15 +25,14 @@
   "dependencies": {
     "@domql/router": "latest",
     "@domql/tags": "latest",
-    "@symbo.ls/cli": "^0.6.23",
+    "@symbo.ls/cli": "latest",
     "@symbo.ls/components": "latest",
-    "@symbo.ls/config": "^1.0.60",
-    "@symbo.ls/config-default": "^1.0.1",
+    "@symbo.ls/config": "latest",
+    "@symbo.ls/config-default": "latest",
     "@symbo.ls/icons": "latest",
-    "@symbo.ls/init": "^1.1.3",
-    "@symbo.ls/preview": "^0.0.73",
+    "@symbo.ls/init": "latest",
     "@symbo.ls/scratch": "latest",
-    "@symbo.ls/temp-db": "^0.0.2",
+    "@symbo.ls/temp-db": "latest",
     "@symbo.ls/utils": "latest",
     "domql": "^1.5.35",
     "showdown": "^2.1.0"

package/src/pages/Components/index.js

@@ -5,7 +5,7 @@ import { splitRoute } from 'domql/packages/router'
 import sidebar from './sidebar'
 import grid from './grid'
 
-import { CATEGORIES } from '../../../.symbols/categories'
+import { CATEGORIES } from '@symbo.ls/temp-db/symbols/categories'
 // import FAVORITES from '../../data/favorites'
 // import COMPONENTS from '../../data/components'
 

package/src/pages/Components/sidebar.js

@@ -1,11 +1,11 @@
 'use strict'
 
-import { 
+import {
   FilterCategories,
   FilterInteractivity,
   FilterDataTypes
 } from '@symbo.ls/components'
-import { CATEGORIES } from '../../../.symbols/categories'
+import { CATEGORIES } from '@symbo.ls/temp-db/symbols/categories'
 
 export default {
   sticky: {

package/.symbols/button/index.js

@@ -1,47 +0,0 @@
-'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-all-star/index.js

@@ -1,50 +0,0 @@
-'use strict'
-
-import { CATEGORIES } from '../categories'
-
-import { Button } from 'smbls'
-
-const key = 'all-star'
-const title = 'All Star'
-const description = ''
-const category = CATEGORIES[1]
-const extend = 'Button'
-
-const state = {}
-const props = {
-  icon: 'star',
-  text: 'All Star',
-  theme: 'label',
-  padding: 'X1 Z2',
-  gap: 'X',
-  round: 'A',
-  fontWeight: 'bold'
-}
-
-const component = {
-  extend: Button,
-  props
-}
-
-const code = ``
-
-const settings = {
-  gridOptions: { colspan: 3, rowspan: 2 }
-}
-
-export default {
-  key,
-  title,
-  description,
-  category,
-  extend,
-
-  component,
-  code,
-  state,
-  props,
-
-  settings,
-  interactivity: [],
-  dataTypes: []
-}

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

@@ -1,47 +0,0 @@
-'use strict'
-
-import { CATEGORIES } from '../categories'
-
-import { CircleButton } from 'smbls'
-
-const key = 'button-circle'
-const title = 'Circle Button'
-const extend = 'CircleButton'
-const description = ''
-const category = CATEGORIES[1]
-
-const state = {}
-const props = {
-  theme: 'secondary',
-  background: 'blue .2',
-  fontSize: 'A2',
-  color: 'white',
-  padding: 'Y2',
-  text: '3'
-}
-
-const component = {
-  extend: CircleButton,
-  props
-}
-
-const code = ``
-
-const settings = {
-  gridOptions: { colspan: 2, rowspan: 2 }
-}
-
-export default {
-  key,
-  title,
-  description,
-  category,
-  component,
-  extend,
-  code,
-  state,
-  props,
-  settings,
-  interactivity: ['click'],
-  dataTypes: ['object']
-}

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

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

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

@@ -1,74 +0,0 @@
-'use strict'
-
-import { CATEGORIES } from '../categories'
-
-import { KangorooButton } from 'smbls'
-
-const key = 'button-theme-switcher'
-const title = 'Theme Switcher'
-const description = ''
-const category = CATEGORIES[1]
-const extend = 'KangorooButton'
-
-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'
-    }
-  },
-
-  child: {
-    gap: 'X1',
-    round: 'C',
-    text: 'Dark Mode',
-    background: 'black .95',
-    color: 'white',
-    padding: 'Z2 A2',
-    icon: {
-      color: 'yellow',
-      name: 'moon'
-    }
-  }
-}
-
-const component = {
-  extend: KangorooButton,
-
-  props,
-
-  label: {},
-  child: {}
-}
-
-const code = ``
-
-const settings = {
-  gridOptions: { colspan: 5, rowspan: 2 }
-}
-
-export default {
-  key,
-  title,
-  description,
-  category,
-  component,
-  extend,
-
-  code,
-  state,
-  props,
-  settings,
-  interactivity: [],
-  dataTypes: []
-}

package/.symbols/categories.js

@@ -1,44 +0,0 @@
-'use strict'
-
-export const CATEGORIES = [
-  {
-    key: 'basic',
-    text: 'Basic'
-  }, {
-    key: 'button',
-    text: 'Button'
-  }, {
-    key: 'form',
-    text: 'Form'
-  }, {
-    key: 'navigation',
-    text: 'Navigation'
-  }, {
-    key: 'notification',
-    text: 'Notification'
-  }, {
-    key: 'dropdown',
-    text: 'Dropdown'
-  }, {
-    key: 'badge',
-    text: 'Badge'
-  }, {
-    key: 'datepicker',
-    text: 'Datepicker'
-  }, {
-    key: 'tooltip',
-    text: 'Tooltip'
-  }, {
-    key: 'table',
-    text: 'Table'
-  }, {
-    key: 'toggle',
-    text: 'Toggle'
-  }, {
-    key: 'user',
-    text: 'User'
-  }, {
-    key: 'misc',
-    text: 'Miscellaneous'
-  }
-]

package/.symbols/components.js

@@ -1,42 +0,0 @@
-'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

@@ -1,55 +0,0 @@
-'use strict'
-
-import { CATEGORIES } from '../categories'
-
-import { DatePicker } from 'smbls'
-
-import style from './style'
-
-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,
-  aside: {
-    cnt: {
-      $setStateCollection: () => {
-        return new Array(30).fill(undefined).map((_, i) => (2022 - i)).reverse()
-      }
-    }
-  }
-}
-
-const code = `{}`
-
-const settings = {
-  gridOptions: { colspan: 7, rowspan: 5 }
-}
-
-export default {
-  key,
-  title,
-  description,
-  category,
-  extend,
-  component,
-  code,
-  state,
-  props,
-  settings,
-  interactivity: ['click', 'choose'],
-  dataTypes: ['date']
-}

package/.symbols/datepicker/style.js

@@ -1,4 +0,0 @@
-'use strict'
-
-export default {
-}

package/.symbols/dropdown/index.js

@@ -1,63 +0,0 @@
-'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

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

package/.symbols/index.js

@@ -1,4 +0,0 @@
-'use strict'
-
-export * from './library'
-export * from './components'

package/.symbols/label/index.js

@@ -1,47 +0,0 @@
-'use strict'
-
-import { CATEGORIES } from '../categories'
-
-import { Label } from '@symbo.ls/components'
-
-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,
-  on: {
-    click: (ev, { state }) => {
-      state.update({ value: state.value + 1 })
-    }
-  }
-}
-
-const code = ``
-
-const settings = {
-  gridOptions: { colspan: 3, rowspan: 2 }
-}
-
-export default {
-  key,
-  title,
-  description,
-  category,
-  component,
-  code,
-  state,
-  props,
-  settings,
-  interactivity: [],
-  dataTypes: []
-}

package/.symbols/library.js

@@ -1,92 +0,0 @@
-'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: 8, rowspan: 2 }
-    }
-  },
-  Search: {
-    settings: {
-      gridOptions: { colspan: 4 }
-    }
-  },
-  CodePreview: {
-    settings: {
-      gridOptions: { colspan: 4, rowspan: 4 }
-    }
-  },
-  StateDesignElement: {
-    settings: {
-      gridOptions: { colspan: 3, rowspan: 2 }
-    }
-  }
-}
-
-// export const LIBRARY = []
-
-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

@@ -1,57 +0,0 @@
-'use strict'
-
-import { CATEGORIES } from '../categories'
-
-import { Notification } from 'smbls'
-
-const key = 'notification'
-const title = 'Notification'
-const description = ''
-const category = CATEGORIES[4]
-const extend = 'Notification'
-
-const state = {}
-const props = {
-  theme: 'alert'
-}
-
-const component = {
-  extend: Notification,
-  props
-}
-
-const code = ``
-
-const settings = {
-  gridOptions: { colspan: 4, rowspan: 2 }
-}
-
-export default {
-  key,
-  title,
-  description,
-  category,
-  extend,
-  component,
-
-  code,
-  state,
-  props,
-  settings,
-  interactivity: [],
-  dataTypes: []
-}
-
-// {
-//   "key": "notification",
-//   "title": "Symbols notification",
-//   "description": ,
-//   "category": ,
-//   "component": ,
-//   "code": ,
-//   "state": ,
-//   "props": ,
-//   "settings": ,
-//   "interactivity": [],
-//   "dataTypes": []
-// }

package/.symbols/pills/index.js

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

package/.symbols/tooltip/index.js

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

package/.symbols/user/index.js

@@ -1,89 +0,0 @@
-'use strict'
-
-import { CATEGORIES } from '../categories'
-
-import { Button, User } from 'smbls'
-
-const key = 'user'
-const title = 'User Button'
-const description = ''
-const category = CATEGORIES[1]
-const extend = 'User'
-
-const state = {}
-const props = {
-  size: 'A',
-  round: 'C',
-  depth: 16,
-  gap: 'Y',
-  padding: 'W2 A W2 W2',
-  theme: 'quaternary',
-
-  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'
-  }
-}
-
-const component = {
-  extend: Button,
-  tag: 'label',
-
-  props,
-
-  user: { extend: User },
-  select: {
-    attr: { name: 'user', id: 'user' },
-    childExtend: { tag: 'option', text: ({ state }) => state.text },
-    $setCollection: () => [
-      { text: 'Kevin' },
-      { text: 'Jay' }
-    ],
-    on: {
-      change: (ev, { parent }) => {
-        parent.user.update({ key: ev.target.value })
-      }
-    }
-  }
-}
-
-const code = ``
-
-const settings = {
-  gridOptions: { colspan: 4, rowspan: 2 }
-}
-
-export default {
-  key,
-  title,
-  description,
-  category,
-  extend,
-
-  component,
-  code,
-  state,
-  props,
-
-  settings,
-  interactivity: [],
-  dataTypes: []
-}

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

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

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

@@ -1,13 +0,0 @@
-'use strict'
-
-export default {
-  padding: `${8 / 14}em`,
-  paddingRight: `${26 / 14}em`,
-  span: {
-    paddingLeft: '.4em',
-    whiteSpace: 'nowrap'
-  },
-  img: {
-    border: '2px solid white'
-  }
-}