@symbo.ls/preview 0.0.26 → 0.0.28

package/.symbols/datepicker/index.js

@@ -2,7 +2,7 @@
 
 import { CATEGORIES } from '../categories'
 
-import { DatePicker } from '@symbo.ls/components'
+import { DatePicker } from 'smbls'
 
 import style from './style'
 
@@ -20,6 +20,13 @@ const component = {
     style: {
       backdropFilter: 'blur(3px)',
     }
+  },
+  aside: {
+    cnt: {
+      $setStateCollection: () => {
+        return new Array(30).fill(undefined).map((_, i) => (2022 - i)).reverse()
+      }
+    }
   }
 }
 

package/.symbols/index.js

@@ -1,5 +1,7 @@
 'use strict'
 
+import { deepMerge } from '@domql/utils'
+
 import circleButton from './button-circle'
 import buttonContacts from './button-contacts'
 import buttonDownload from './button-download'
@@ -15,9 +17,57 @@ import field from './field'
 import tooltip from './tooltip'
 import pills from './pills'
 
-import * as smbls from '@symbo.ls/components/src/Fields'
+import * as smbls from '@symbo.ls/components/src/allImports'
 
-export const LIBRARY = [
+const define = {
+  default: {
+    settings: {
+      gridOptions: { colspan: 3, rowspan: 2 }
+    }
+  },
+  AccessibilityCheck: {
+    settings: {
+      gridOptions: { colspan: 8, rowspan: 2 }
+    }
+  },
+  Upload: {
+    settings: {
+      gridOptions: { colspan: 5, rowspan: 2 }
+    }
+  },
+  DeviceButtonSet: {
+    settings: {
+      gridOptions: { colspan: 6, rowspan: 2 }
+    }
+  },
+  SearchHeader: {
+    settings: {
+      gridOptions: { colspan: 6, rowspan: 2 }
+    }
+  },
+  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,
@@ -33,15 +83,3 @@ export const LIBRARY = [
   tooltip,
   pills
 ]
-
-export const COMPONENTS = Object.keys(smbls).map(key => {
-  const component = smbls[key]
-  return {
-    key,
-    component: { extend: component },
-    code: JSON.stringify(component, null, 2),
-    settings: {
-      gridOptions: { colspan: 3, rowspan: 2 }
-    }
-  }
-})

package/.symbols/notification/index.js

@@ -43,3 +43,17 @@ export default {
   interactivity: [],
   dataTypes: []
 }
+
+// {
+//   "key": "notification",
+//   "title": "Symbols notification",
+//   "description": ,
+//   "category": ,
+//   "component": ,
+//   "code": ,
+//   "defaultState": ,
+//   "props": ,
+//   "settings": ,
+//   "interactivity": [],
+//   "dataTypes": []
+// }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "repository": "https://github.com/rackai/editor",
   "main": "src/index.js",
   "scripts": {
@@ -24,13 +24,15 @@
   },
   "dependencies": {
     "@domql/router": "latest",
+    "@domql/tags": "^2.2.1",
     "@symbo.ls/components": "latest",
     "@symbo.ls/config": "latest",
     "@symbo.ls/icons": "latest",
     "@symbo.ls/init": "latest",
     "@symbo.ls/scratch": "latest",
     "@symbo.ls/utils": "latest",
-    "domql": "^1.5.7"
+    "domql": "^1.5.7",
+    "showdown": "^2.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.11.5",

package/src/pages/Export/description.js

@@ -1,33 +1,62 @@
 'use strict'
 
-import { Flex, PropertyList } from '@symbo.ls/components'
+import showdown from 'showdown'
+import { CommonField, Flex, PropertyList } from '@symbo.ls/components'
 
-import { styleArticle } from './style'
-
-export const description = {
-  props: { padding: '0 0 B 0' },
-  caption: {
-    props: {
-      text: 'Description',
+const description = {
+  extend: CommonField,
+  if: ({ state }) => state.description,
+  props: {
+    padding: '0 0 B 0',
+    caption: {
       size: 'Z',
-      padding: '0 0 Y2 0'
+      padding: '0 0 Y2 0',
+      opacity: 0.5
+    },
+    p: {
+      margin: '0'
     }
   },
+  caption: {
+    text: 'Description'
+  },
   p: {
-    props: {
-      text: 'Kangoroo buttons are button compositions where the original button contain one or more child buttons.'
+    text: ({ state }) => state.description
+  }
+}
+
+const readme = {
+  extend: CommonField,
+  if: ({ state }) => state.readme,
+  props: ({ state }) => ({
+    padding: '0 0 B 0',
+    caption: {
+      text: 'README.md',
+      size: 'Z',
+      opacity: 0.5,
+      padding: '0 0 Y2 0'
     },
-    style: { margin: 0 }
+    p: {
+      margin: '0'
+    }
+  }),
+  caption: {},
+  cnt: {
+    html: ({ state }) => {
+      const converter = new showdown.Converter()
+      return converter.makeHtml(state.readme)
+    }
   }
 }
 
 export default {
   tag: 'article',
-  style: styleArticle,
   props: { padding: 'B2 0' },
 
   description,
 
+  readme,
+
   usage: {
     extend: [Flex],
     props: { gap: 'C1' },

package/src/pages/Export/gist.js

@@ -0,0 +1,24 @@
+'use strict'
+
+export const fetchGist = (key, state) => {
+  console.log(state)
+  window.fetch(`https://api.github.com/gists/${key}`, {
+    headers: {
+      Authorization: `token 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`
+    }
+  })
+    .then((response) => response.json())
+    .then((data) => {
+      const { description, files } = data
+      const component = files['component.js'].content
+      const readme = files['README.md'].content
+      const props = files['props.js'] // .content
+
+      state.update({
+        readme,
+        component,
+        description,
+        props
+      })
+    })
+}

package/src/pages/Export/index.js

@@ -2,7 +2,7 @@
 
 import { router, lastLevel } from '@domql/router' // eslint-disable-line no-unused-vars
 
-import { ResponsiveToolBar, Flex } from '@symbo.ls/components'
+import { Flex } from '@symbo.ls/components'
 import { PageExtend } from '../PageExtend'
 
 import state from './state'
@@ -10,9 +10,11 @@ import scene from './scene'
 import tools from './tools'
 import description from './description'
 
+import { fetchGist } from './gist'
+
 import { COMPONENT_ROUTES } from './const'
 
-const componentState = (context) => {
+const componentState = (context) => { // eslint-disable-line no-unused-vars
   const arr = [...context.LIBRARY, ...context.COMPONENTS]
   return arr.filter(v => {
     const key = window.location.pathname.split('component/')[1]
@@ -30,18 +32,26 @@ export const Export = {
     padding: '0 Y2'
   },
 
-  state: ({ context }) => ({
-    ...componentState(context)[0],
-    ...state
-  }),
+  state,
 
   on: {
-    init: (el, s) => {
+    stateCreated: (element, state) => {
       const route = window.location.pathname
       const routes = route.slice(1).split('/')
+      const componentKey = routes[1]
+
+      const content = COMPONENT_ROUTES[`/${componentKey}`]
+
+      if (content) {
+        state.update({
+          ...content
+        }, { preventUpdate: true })
+      }
+      if (componentKey.length === 32) { // this might be Gist
+        fetchGist(componentKey, state)
+      }
 
-      const content = COMPONENT_ROUTES[`/${routes[1]}`]
-      if (!content) return router(el.__root, '/components')
+      // if (!content) return router(el.__root, '/components')
     }
   },
 
@@ -66,7 +76,7 @@ export const Export = {
 
       tools,
 
-      responsive: { extend: ResponsiveToolBar }
+      ResponsiveToolBar: {}
     },
 
     description

package/src/pages/Export/scene.js

@@ -1,5 +1,6 @@
 'use strict'
 
+import { isString } from '@domql/utils'
 import { BREAKPOINTS } from '@symbo.ls/scratch'
 import { Scene } from '@symbo.ls/components'
 import { updateReset } from '@symbo.ls/init'
@@ -38,8 +39,9 @@ export default {
           '*': { transition: 'all 255ms cubic-bezier(.29,.67,.51,.97)' }
         }
       },
+
       comp: (el, s) => ({
-        extend: [s.component],
+        extend: isString(s.component) ? document.eval(s.component) : s.component,
         props: { inheritSpacingRatio: true }
       }),
 

package/src/pages/Spaces/Table.js

@@ -1,8 +1,13 @@
 'use strict'
 
-import { ClickableItem, Grid, Pseudo, WiderButton } from '@symbo.ls/components'
-
-import { mapSequence, sortSequence } from '@symbo.ls/utils'
+import {
+  ClickableItem,
+  Grid,
+  Pseudo,
+  WiderButton,
+  mapSequence,
+  sortSequence
+} from '@symbo.ls/components'
 
 const Buttons = {
   childExtend: {

package/src/pages/Theme/index.js

@@ -16,11 +16,6 @@ import { friendTheme } from './friendTheme'
 
 import style, { styleLabel } from './style'
 
-// import ntc from './ntc'
-
-// const returnColor = element => element.lookup('ColorEditor').state.color
-// const setBackground = (element, opacity = 1) => `background: ${opacify(returnColor(element), opacity)}`
-
 const nameTheTheme = {
   tag: 'label',
   style: styleLabel,

package/src/pages/Typography/documentStyles.js

@@ -11,6 +11,9 @@ import {
 } from '@symbo.ls/components'
 import stylesHelpers from './stylesHelpers'
 
+import { HTML_TAGS } from '@domql/tags'
+console.log(HTML_TAGS)
+
 export default {
   header: {
     extend: SectionHeader,
@@ -30,6 +33,12 @@ export default {
       header: {
         width: '100%',
         align: 'center space-between'
+      },
+      headings: {
+        width: '100%'
+      },
+      doc: {
+        width: '100%'
       }
     },
 
@@ -41,6 +50,7 @@ export default {
 
     headings: {
       extend: DocumentStylesSequence,
+
       $setStateCollection: (el) => {
         const { state, context } = el // eslint-disable-line no-unused-vars
         const { TYPOGRAPHY, FONT_FAMILY } = context.SYSTEM

package/src/pages/Typography/stylesHelpers.js

@@ -13,7 +13,7 @@ export default {
       title: 'Helpers',
       p: 'Document styling and theming provides global themes of the entire app, imagine it as a <body> styling',
       nav: [{
-        href: '/typography/document-style',
+        href: '/typography/add-style',
         icon: 'plus'
       }]
     }

package/src/pages/Typography/typeScale.js

@@ -2,26 +2,26 @@
 
 import {
   TypeScaleSequence,
-  Grid,
   TestText,
-  Flex
+  Flex,
+  mapSequence,
+  sortSequence
 } from '@symbo.ls/components'
 
-import { mapSequence, sortSequence } from '@symbo.ls/utils'
 import { range0Buttons, range1Buttons } from './rangeButtons'
 
 export default {
-  extend: Grid,
+  extend: Flex,
 
   props: {
     gap: 'D',
-    columns: '16em auto',
     align: 'flex-start flex-start',
 
     sidebar: {
       padding: 'B 0 0',
+      width: 'F2',
       position: 'sticky',
-      top: 'E2'
+      top: 'E'
     },
 
     content: {

package/src/pages/Export/style.js

@@ -1,21 +0,0 @@
-'use strict'
-
-export const styleArticle = {
-  caption: {
-    // textTransform: 'capitalize',
-    opacity: '.35'
-  },
-
-  p: {
-    maxWidth: `${470 / 14}em`,
-    opacity: '.75',
-    lineHeight: '20px'
-  },
-
-  code: {
-    overflow: 'hidden'
-  }
-}
-
-export const styleHeader = {
-}