@symbo.ls/preview 2.11.398 → 2.11.446

package/index.js

@@ -1,4 +1,5 @@
 'use strict'
 
 export * from './pages/Styleguide'
+export * from './pages/Component'
 export * from './pages/Components'

package/package.json

@@ -1,11 +1,8 @@
 {
   "name": "@symbo.ls/preview",
-  "version": "2.11.398",
+  "version": "2.11.446",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "d3cb027daada2cda9943517e98ffc67e0170a763",
-  "dependencies": {
-    "smbls": "latest"
-  },
+  "gitHead": "d042e0c4fc9379b0ca7584f6405cfa2e7c1301d4",
   "source": "src/index.js"
 }

package/pages/Component.js

@@ -0,0 +1,67 @@
+'use strict'
+
+export const Component = {
+  extend: 'Flex',
+  props: {
+    align: 'center center',
+    minHeight: '100vh'
+  },
+
+  smblsHeader: {
+    if: () => {
+      const urlParams = new URLSearchParams(window.location.search)
+      return !urlParams.get('hideUi') || !urlParams.get('fullsize')
+    },
+    extend: 'Flex',
+    props: {
+      align: 'center space-between',
+      position: 'absolute',
+      inset: '0 0 auto 0',
+      background: 'black 0.15',
+      padding: 'Z A'
+    },
+    'Link+SquareButton': { Icon: { name: 'symbols', fontSize: 'B' }, href: '/' },
+    OpenInSymbols: () => {
+      const urlParams = new URLSearchParams(window.location.search)
+      const key = urlParams.get('key') || 'Logo'
+      const screenshot = urlParams.get('screenshot')
+      const activeProject = window.location.host.split('.')[0]
+      return {
+        extends: ['Link', 'Button'],
+        target: '_blank',
+        padding: 'Z A',
+        href: `https://symbols.app/?activeProject=${activeProject}&selected=${key}`,
+        // href: () => `https://symbols.app/?activeProject=${window.location.host.split('.')[0]}&selected=${key}`,
+        text: screenshot ? window.location.host : 'Open in Symbols'
+      }
+    }
+  },
+
+  Component: (el, s, ctx) => {
+    const urlParams = new URLSearchParams(window.location.search)
+    const width = urlParams.get('width') || '860px'
+    const height = urlParams.get('height') || '560px'
+    // const theme = urlParams.get('theme') || 'dark'
+    const key = urlParams.get('key') || 'Logo'
+    const hideUi = urlParams.get('hideUi')
+    const fullsize = hideUi || urlParams.get('fullsize')
+    const factory = key.startsWith('/') ? 'pages' : 'components'
+    const schema = ctx.schema[factory][key]
+    return {
+      key,
+      extend: 'Flex',
+      state: schema.state,
+      props: () => ({
+        class: 'component',
+        align: 'center center',
+        boxSize: fullsize ? '100dvh 100dvw' : `${height} ${width}`
+      }),
+      [key]: fullsize
+        ? {
+            ...schema.props?.demoComponent,
+            boxSize: '100dvh 100dvw'
+          }
+        : schema.props?.demoComponent || {}
+    }
+  }
+}

package/pages/Components.js

@@ -1,7 +1,5 @@
 'use strict'
 
-import { Avatar, SearchWithButton } from '@symbo.ls/uikit'
-
 export const ComponentsPage = {
   extend: 'Flex',
 
@@ -52,7 +50,7 @@ export const ComponentsPage = {
     Avatar: {},
     AvatarIndicator: {},
     AvatarBundle: {
-      childExtend: Avatar,
+      childExtend: 'Avatar',
       ...[{}, {}, {}]
     },
     AvatarChooser: {
@@ -218,7 +216,7 @@ export const ComponentsPage = {
       }
     },
     Search: {
-      extend: SearchWithButton,
+      extend: 'SearchWithButton',
       props: {
         minWidth: 'G+C',
         minHeight: 'C+X',