@symbo.ls/preview 0.0.98 → 2.0.7

package/src/style.js

@@ -1,20 +1,17 @@
 'use strict'
 
 export default {
-  theme: 'document',
-  boxSize: '100% 100%',
+  width: '100%',
+  height: '100%',
   position: 'absolute',
-  top: '0',
-  left: '0',
-  flow: 'column',
-  align: 'center flex-start',
-  overflow: 'hidden auto',
-  boxSizing: 'border-box',
-  cursor: 'default',
-  style: {
-    'button, a': {
-      cursor: 'default'
-    }
-  }
-  // content: { position: 'relative' }
+  top: 0,
+  left: 0,
+
+  overflow: 'hidden',
+  overflowY: 'auto',
+
+  display: 'grid',
+  gridTemplateRows: 'max-content',
+
+  caption: { whiteSpace: 'nowrap' }
 }

package/src/test.js

@@ -0,0 +1,30 @@
+'use strict'
+
+import DOM from 'domql-preview'
+import { Button } from '@symbo.ls/all'
+
+import './config'
+import './define'
+
+document.body.style.padding = '25%'
+document.body.style.color = 'white'
+document.body.style.backgroundColor = 'black'
+
+var button = {
+  proto: Button,
+  theme: 'six',
+  text: 'move'
+}
+
+var app = {
+  childProto: {
+    childProto: { proto: button },
+    // a: {},
+    b: {
+      icon: 'right'
+    }
+  },
+  a: {}
+}
+
+DOM.create(app)

package/svgSprite.config.js

@@ -3,6 +3,5 @@ const path = require('path')
 module.exports = {
   getSymbolId: (filePath, fileContent, fileHash) => {
     return path.basename(filePath, '.svg')
-  },
-  exclude: ['**/components/**', '**/Modals/**']
+  }
 }

package/test/index.test.js

@@ -0,0 +1,5 @@
+'use strict'
+
+test('test', () => {
+  expect(true).toBe(true)
+})

package/.legacy/index copy.js

@@ -1,45 +0,0 @@
-'use strict'
-
-import { SectionHeader } from '@symbo.ls/components'
-
-import preview from './preview'
-import sequence from './sequence'
-import boxModel from './boxModel'
-
-export const Spaces = {
-  key: 'spaces',
-
-  state: {
-    activePage: 'spaces',
-    activeTab: 'preview',
-
-    title: 'Spacing',
-    p: 'Unlike typography, component may has the properties of padding, gap, width and rest.'
-  },
-
-  define: { routes: param => param },
-
-  routes: {
-    preview,
-    sequence,
-    boxModel
-  },
-
-  on: {
-    init: (el, s) => {
-      var route = window.location.pathname
-      var routes = route.slice(1).split('/')
-      s.activeTab = routes[1] || s.activeTab
-    }
-  },
-
-  header: {
-    extend: SectionHeader
-  },
-
-  preview
-
-  // page: {
-  //   content: (el, s) => ({ extend: el.parent.routes[s.activeTab] })
-  // }
-}

package/.vscode/extensions.json

@@ -1,5 +0,0 @@
-{
-  "recommendations": [
-    "GitHub.copilot"
-  ]
-}

package/index.js

@@ -1,44 +0,0 @@
-'use strict'
-
-import '@symbo.ls/platform-init'
-
-import DOM from 'domql'
-import * as smbls from '@symbo.ls/components'
-
-import App from './src/app'
-import { router, lastLevel } from '@domql/router'
-import { platformOptions } from '@symbo.ls/platform-options'
-
-DOM.define({
-  routes: param => param,
-  __filepath: param => param,
-  $setCollection: smbls.Collection.define.$setCollection,
-  $setStateCollection: smbls.Collection.define.$setStateCollection
-})
-
-const app = DOM.create({
-  extend: App,
-
-  HeaderOnRouter: {},
-
-  on: {
-    render: (el, s) => {
-      const { pathname, hash } = window.location
-      const url = pathname + hash
-      router(el, url, {})
-    },
-
-    update: (el, s, changes) => {
-      smbls.openModal(el.parent, s)
-    }
-  }
-}, undefined, 'app', platformOptions)
-
-window.onpopstate = e => {
-  const { pathname, hash } = window.location
-  const url = pathname + hash
-  router(app, url, {}, {
-    level: lastLevel,
-    pushState: false
-  })
-}

package/src/components/Aside.js

@@ -1,101 +0,0 @@
-'use strict'
-
-import { Link, ClickableItem, TooltipParent } from '@symbo.ls/components'
-import { Flex, SquareButton } from 'smbls'
-
-const setTooltipPosition = (el, s, options = {}) => {
-  const key = parseInt(el.key)
-  const rowHeight = `(var(--spacing-C) + var(--spacing-B1) + ${key}%)`
-  const translateY = `calc(${rowHeight} * ${key} + var(--spacing-Y2))`
-  const transform = `translate3d(0%, ${translateY}, 1px)`
-  const Tooltip = el.lookup('Tooltip')
-  if (Tooltip.setProps) {
-    Tooltip.setProps({
-      opacity: options.visible && '1',
-      visibility: options.visible && 'visible',
-      text: s.title,
-      transform
-    })
-  }
-}
-
-export const NavbarButton = {
-  extend: [ClickableItem, Link, SquareButton, TooltipParent],
-
-  props: ({ state }) => ({
-    href: state.href,
-    active: window.location.pathname.includes(state.href),
-    isActive: window.location.pathname.includes(state.href),
-    theme: null,
-    position: 'relative'
-  }),
-
-  on: {
-    update: (el, s) => {
-      const active = window.location.pathname.includes(s.href)
-      if (active) setTooltipPosition(el, s)
-    },
-    mouseover: (ev, el, s) => {
-      if (!s.hover) {
-        s.hover = true
-        setTooltipPosition(el, s, { visible: true })
-      }
-    },
-    mouseleave: (ev, el, s) => {
-      if (s.hover) {
-        s.hover = false
-        el.lookup('Tooltip').setProps({
-          opacity: '0',
-          visibility: 'hidden'
-        })
-      }
-    }
-  }
-}
-
-export const DesignSystemNavbar = {
-  tag: 'aside',
-
-  props: {
-    position: 'sticky',
-    top: 'E',
-    zIndex: 1001,
-
-    nav: {
-      gap: 'B1',
-      flow: 'column',
-      background: 'transparent',
-      color: 'gray7',
-      fontSize: 'A2'
-    }
-  },
-
-  nav: {
-    extend: Flex,
-    childExtend: NavbarButton
-  },
-
-  Tooltip: {
-    props: {
-      background: 'gray0 .95',
-      position: 'absolute',
-      pointerEvents: 'none',
-      top: '0',
-      left: '100%',
-      shape: 'rectangle',
-      shapeDirection: null,
-      padding: 'X2 Z1',
-      transform: 'translate3d(5%, -50%, 0)',
-      opacity: '0',
-      visibility: 'hidden',
-      transition: 'C defaultBezier, C defaultBezier, B defaultBezier',
-      transitionProperty: 'opacity, visibility, transform',
-      textAlign: 'start',
-      zIndex: 99999,
-      lineHeight: 1,
-      title: { fontSize: 'Z' }
-    },
-    title: null,
-    p: null
-  }
-}

package/src/components/Banner.js

@@ -1,58 +0,0 @@
-'use strict'
-
-import { Flex, Link, Hoverable, Pseudo, ArticleMedium } from '@symbo.ls/components'
-
-export const TutorialBanner = {
-  extend: [Link, Flex, ArticleMedium, Pseudo, Hoverable],
-
-  props: ({ state }) => ({
-    flow: 'column',
-    round: 'A',
-    height: 'F',
-    padding: 'A2 B',
-    background: 'gray2',
-    href: state.href,
-    gap: '0',
-    overflow: 'hidden',
-    position: 'relative',
-    color: 'white',
-    flex: 1,
-    transitionProperty: 'transform, opacity, padding',
-
-    title: { margin: 'auto 0 0', text: state.title },
-    p: { text: state.p },
-
-    style: {
-      userSelect: 'none',
-      'h2, p': { zIndex: 2 }
-    },
-
-    ':after, &:before': {
-      content: '""',
-      position: 'absolute',
-      zIndex: 0,
-      inset: '-5px -5px -5px -5px'
-    },
-
-    ':before': {
-      transition: 'B defaultBezier',
-      transitionProperty: 'opacity',
-      backgroundImage: `url(${state.background})`,
-      backgroundSize: 'cover',
-      opacity: '0.5'
-    },
-
-    ':after': {
-      transition: 'B defaultBezier',
-      transitionProperty: 'opacity',
-      background: 'shadow-overlay',
-      opacity: '0.9'
-    },
-
-    ':hover': {
-      padding: '- C1 - -',
-      ':before': { opacity: '1' },
-      ':after': { opacity: '1' }
-    }
-  })
-}

package/src/components/ColorText.js

@@ -1,29 +0,0 @@
-'use strict'
-
-import { Flex } from '@symbo.ls/components'
-
-const props = {
-  fontSize: 'Z',
-  alignItems: 'center',
-  gap: 'Y1',
-  whiteSpace: 'nowrap',
-
-  color: {
-    boxSize: 'B B',
-    background: 'red',
-    round: 'Y2'
-  },
-
-  value: {
-    text: 'Background',
-    color: 'white'
-  }
-}
-export const ColorText = {
-  extend: Flex,
-  props,
-
-  color: {},
-  value: {}
-  // text: 'efef'
-}

package/src/components/ColorsPalette.js

@@ -1,69 +0,0 @@
-'use strict'
-
-import { ClickableItem, CommonField, Flex, Grid } from '@symbo.ls/components'
-
-export const ColorsPalette = {
-  extend: CommonField,
-
-  props: {
-    gap: 'Z',
-    element: {
-      margin: '0 -X',
-      flow: 'column',
-      gap: 'Z2'
-    }
-  },
-
-  title: { text: 'Suggestions' },
-  element: {
-    extend: Flex,
-    childExtend: {
-      extend: [ClickableItem, Grid],
-
-      props: ({ state }) => ({
-        minWidth: '190px',
-        round: 'Z2',
-        columns: 'repeat(3, 1fr)',
-        overflow: 'hidden',
-        opacity: '.35',
-        childProps: { height: 'B2' },
-
-        color1: { background: state[0] },
-        color2: { background: state[1] },
-        color3: { background: state[2] }
-      }),
-
-      color1: {},
-      color2: {},
-      color3: {},
-
-      on: {
-        click: (event, element, state) => {
-          state.parent.update(state.parse())
-        }
-      }
-    },
-
-    $setStateCollection: () => [[
-      '#5F6C37',
-      '#F1E0BC',
-      '#FFFFFF'
-    ], [
-      '#CCD5AE',
-      '#FEF9E1',
-      '#D3A374'
-    ], [
-      '#CDB4DB',
-      '#FEAFCC',
-      '#A2D2FF'
-    ], [
-      '#274553',
-      '#E9C46A',
-      '#E76F51'
-    ], [
-      '#8EC9E6',
-      '#013047',
-      '#FFB703'
-    ]]
-  }
-}

package/src/components/ColumnParagrphs.js

@@ -1,23 +0,0 @@
-'use strict'
-
-import { Flex } from '@symbo.ls/components'
-
-const props = {
-  gap: 'E',
-  margin: '- - D1 -',
-  childProps: {
-    fontSize: 'Z1',
-    color: 'gray6',
-    maxWidth: `${272 / 14}em`
-  }
-}
-
-export const ColumnParagraphs = {
-  props,
-  extend: Flex,
-
-  childExtend: { tag: 'p' },
-  ...[{ props: { text: 'To personalize your Symbols experience, we need to get started with themes' } },
-    { props: { text: 'Please fill in the document dark and light themes' } }]
-
-}

package/src/components/ContinueButton.js

@@ -1,14 +0,0 @@
-'use strict'
-import { Button } from '@symbo.ls/components'
-
-export const ContinueButton = {
-  extend: Button,
-  props: {
-    text: 'Continue',
-    fontSize: 'Z2',
-    padding: 'Z1 C',
-    background: 'linear-gradient(to top, rgba(50, 114, 184, .2), rgba(0, 121, 253, .27), rgba(0, 121, 253, .27))',
-    color: 'white',
-    fontWeight: '500'
-  }
-}

package/src/components/DesignComponent.js

@@ -1,80 +0,0 @@
-'use strict'
-
-import { DesignElement, Flex, Grid } from '@symbo.ls/components'
-
-const componentHeader = {
-  tag: 'header',
-  extend: [DesignElement, Flex],
-
-  props: ({ state }) => ({
-    minWidth: '100%',
-    padding: 'Z1 - Z1 Z2',
-    flow: 'row',
-    round: '0',
-    alignItems: 'flex-start',
-    pointerEvents: 'none',
-    background: 'gray2',
-
-    button: {
-      padding: 'Y2',
-      icon: state.icon,
-      theme: state.iconTheme
-    },
-    heading: {
-      gap: '0',
-      title: {
-        text: state.title,
-        textTransform: 'capitalize'
-      },
-      p: {
-        text: state.paragraph,
-        maxWidth: 'F1'
-      }
-    }
-  })
-}
-
-const propertyNumber = {
-  extend: Grid,
-  props: ({ state }) => ({
-    columns: 'repeat(2, 1fr)',
-    property: {
-      text: state.property,
-      color: 'gray6'
-    },
-    value: {
-      text: state.value,
-      fontWeight: '500'
-    }
-  }),
-  property: {},
-  value: {}
-}
-
-const componentProperties = {
-  extend: Flex,
-  props: {
-    padding: 'Z2 A',
-    flow: 'column',
-    gap: 'Z2',
-    background: 'gray1'
-  },
-  childExtend: propertyNumber,
-  $setStateCollection: ({ state }) => state.properties
-}
-
-export const DesignComponent = {
-  extend: Flex,
-  props: {
-    flow: 'column',
-    minWidth: 'F1',
-    maxWidth: 'F2',
-    round: 'A',
-    height: 'fit-content',
-    overflow: 'hidden',
-    userSelect: 'none'
-  },
-
-  componentHeader,
-  componentProperties
-}