@symbo.ls/preview 0.0.98 → 2.0.7

package/src/pages/MediaQuery/state.js

@@ -1,150 +0,0 @@
-'use strict'
-
-export const BREAKPOINTS_DATA = {
-  data: [{
-    icon: 'deviceBigScreenOutline',
-    name: 'iMac',
-    breakpoints: [{
-      type: 'minWidth',
-      value: '2780',
-      placeholder: '2780'
-    }]
-  }, {
-    icon: 'deviceSmallScreenOutline',
-    name: 'screenLg',
-    breakpoints: [{
-      type: 'minWidth',
-      value: '1920',
-      placeholder: '1920'
-    }]
-  }, {
-    icon: 'deviceSmallScreenOutline',
-    name: 'screebMd',
-    breakpoints: [{
-      type: 'minWidth',
-      value: '1680',
-      placeholder: '1680'
-    }]
-  }, {
-    icon: 'deviceSmallScreenOutline',
-    name: 'screebSm',
-    breakpoints: [{
-      type: 'minWidth',
-      value: '1440',
-      placeholder: '1440'
-    }]
-  }, {
-    icon: 'deviceTabletLandscapeOutline',
-    name: 'tabletLg',
-    breakpoints: [{
-      type: 'minWidth',
-      value: '1366',
-      placeholder: '1440'
-    }]
-  }, {
-    icon: 'deviceTabletLandscapeOutline',
-    name: 'tabletMd',
-    breakpoints: [{
-      type: 'minWidth',
-      value: '280',
-      placeholder: '1440'
-    }]
-  }, {
-    icon: 'deviceTabletLandscapeOutline',
-    name: 'tabletSm',
-    breakpoints: [{
-      type: 'minWidth',
-      value: '1024',
-      placeholder: '1440'
-    }]
-  }, {
-    icon: 'deviceMobileOutline',
-    name: 'mobileLg',
-    breakpoints: [{
-      type: 'minWidth',
-      value: '768',
-      value2: '657',
-      placeholder: '768'
-    }]
-  }, {
-    icon: 'deviceMobileOutline',
-    name: 'mobileMd',
-    breakpoints: [{
-      type: 'minWidth',
-      value: '560',
-      placeholder: '560'
-    }]
-  }, {
-    icon: 'deviceMobileOutline',
-    name: 'mobileSm',
-    breakpoints: [{
-      type: 'minWidth',
-      value: '480',
-      placeholder: '480'
-    }]
-
-  }, {
-    icon: 'deviceMobileOutline',
-    name: 'mobileXs',
-    breakpoints: [{
-      type: 'minWidth',
-      value: '375',
-      placeholder: '375'
-    }]
-
-  }]
-}
-
-export const DEVICE_SIZE_DATA = {
-  data: [{
-    icon: 'deviceBigScreenOutline',
-    name: 'Apple XDR',
-    xValue: '3008',
-    yValue: '1692'
-  }, {
-    icon: 'deviceBigScreenOutline',
-    name: `iMac 27''`,
-    xValue: '2560',
-    yValue: '1440'
-  }, {
-    icon: 'deviceBigScreenOutline',
-    name: `iMac 24''`,
-    xValue: '2240',
-    yValue: '1260'
-  }, {
-    icon: 'deviceBigScreenOutline',
-    name: 'Full HD',
-    xValue: '1920',
-    yValue: '1080'
-  }, {
-    icon: 'deviceSmallScreenOutline',
-    name: `MacBook Pro 16''`,
-    xValue: '1728',
-    yValue: '1117'
-  }, {
-    icon: 'deviceSmallScreenOutline',
-    name: `MacBook Pro 14''`,
-    xValue: '1512',
-    yValue: '982'
-  }, {
-    icon: 'deviceSmallScreenOutline',
-    name: `MacBook Pro 13''`,
-    xValue: '1470',
-    yValue: '956'
-  }, {
-    icon: 'deviceTabletLandscapeOutline',
-    name: `iPad Pro 12.9''`,
-    xValue: '1024',
-    yValue: '1366'
-  }, {
-    icon: 'deviceTabletLandscapeOutline',
-    name: `iPad Air 10.9''`,
-    xValue: '820',
-    yValue: '1180'
-  }, {
-    icon: 'deviceTabletLandscapeOutline',
-    name: `iPad Mini 8.3''`,
-    xValue: '744',
-    yValue: '1133'
-  }]
-}

package/src/pages/MediaQuery/typeScale.js

@@ -1,69 +0,0 @@
-'use strict'
-
-import {
-  TestText,
-  Flex
-} from '@symbo.ls/components'
-
-export default {
-  extend: Flex,
-
-  props: {
-    gap: 'D',
-    align: 'flex-start flex-start',
-
-    sidebar: {
-      padding: 'B 0 0',
-      widthRange: 'F2',
-      position: 'sticky',
-      top: 'E'
-    },
-
-    content: {
-      overflow: 'hidden',
-      flex: '1',
-      flow: 'column',
-      gap: 'C',
-
-      header: {
-        align: 'flex-end space-between',
-        padding: '0 0 0 C',
-        gap: 'C1'
-      },
-
-      footer: {
-        padding: '0 0 0 C'
-      }
-    }
-  },
-
-  sidebar: {
-    SectionHeader: {
-      title: 'TypeScale',
-      p: 'Generate text sequence by a base size and ratio'
-    },
-
-    SequenceSliders: {
-      flow: 'column'
-    },
-
-    Paragraph: {
-      margin: '0',
-      fontSize: 'Z2',
-      padding: 'B2 0',
-      text: `Base size and ratio sequentially generate set by multiplying each next calculated unit by the ratio.`
-    }
-  },
-
-  content: {
-    extend: Flex,
-
-    header: {
-      extend: Flex,
-      TestText
-    },
-
-    sequence: {
-    }
-  }
-}

package/src/pages/Shapes/shapeSet.js

@@ -1,133 +0,0 @@
-'use strict'
-
-import { ShapeSet } from '../../components'
-
-export const rectangle = {
-  extend: ShapeSet,
-  label: {
-    text: 'Rectangle ',
-    span: 'with rounds'
-  },
-  list: {
-    $setStateCollection: () => [
-      { borderRadius: '0' },
-      { borderRadius: 'X' },
-      { borderRadius: 'Y' },
-      { borderRadius: 'Z' },
-      { borderRadius: 'A' },
-      { borderRadius: 'B' },
-      { borderRadius: 'C' }
-    ]
-  }
-}
-
-export const circle = {
-  extend: ShapeSet,
-  label: { text: 'Circle' },
-  list: {
-    $setStateCollection: () => [
-      { shape: 'circle' }
-    ]
-  }
-}
-
-export const toolTip = {
-  extend: ShapeSet,
-  label: { text: 'Tooltip' },
-  list: {
-    childExtend: {
-      props: {
-        childProps: { borderRadius: 'Y1' }
-      }
-    },
-
-    $setStateCollection: () => [
-      { shape: 'tooltip', shapeDirection: 'top' },
-      { shape: 'tooltip', shapeDirection: 'right' },
-      { shape: 'tooltip', shapeDirection: 'bottom' },
-      { shape: 'tooltip', shapeDirection: 'left' }
-    ]
-  }
-}
-
-export const tagShape = {
-  extend: ShapeSet,
-  label: { text: 'Tag' },
-  list: {
-    childExtend: {
-      props: {
-        padding: 'B C2+W',
-        childProps: { borderRadius: 6 }
-      }
-    },
-    $setStateCollection: () => [
-      { shape: 'tag', shapeDirection: 'left' },
-      { shape: 'tag', shapeDirection: 'right' }
-    ]
-  }
-}
-
-export const bubble = {
-  extend: ShapeSet,
-  label: { text: 'Bubble' },
-
-  list: {
-    $setStateCollection: () => [
-      { borderRadius: 'X B B X' },
-      { borderRadius: 'B X X B' },
-      { borderRadius: 'X X B B' },
-      { borderRadius: 'B B X X' },
-      { borderRadius: 'B X X X' },
-      { borderRadius: 'X B X X' },
-      { borderRadius: 'X X B X' },
-      { borderRadius: 'X X X B' }
-    ]
-  }
-}
-
-export const chevron = {
-  extend: ShapeSet,
-  label: { text: 'Chevron' },
-  list: {
-    childExtend: {
-      props: {
-        padding: 'B C2+W'
-      }
-    },
-    $setStateCollection: () => [
-      { shape: 'chevron', shapeDirection: 'left' },
-      { shape: 'chevron', shapeDirection: 'right' }
-    ]
-  }
-}
-
-export const tv = {
-  extend: ShapeSet,
-  label: { text: 'TV' },
-  list: {
-    childExtend: {
-      props: {
-        padding: 'B B2',
-        childProps: { minWidth: 'D' }
-      }
-    },
-    $setStateCollection: () => [
-      { shape: 'tv' }
-    ]
-  }
-}
-
-export const hexagon = {
-  extend: ShapeSet,
-  label: { text: 'Hexagon' },
-  list: {
-    childExtend: {
-      props: {
-        padding: 'B C2+W'
-      }
-    },
-    $setStateCollection: () => [
-      { shape: 'hexagon' }
-    ]
-  }
-}

package/src/pages/State/index.js

@@ -1,86 +0,0 @@
-'use strict'
-
-import { Input, Flex, CommonField } from '@symbo.ls/components'
-
-const sideBar = {
-  tag: 'aside'
-}
-
-export const State = {
-  sideBar,
-
-  form: {
-    extend: Flex,
-
-    props: {
-      flow: 'column',
-      gap: 'A2',
-      margin: 'C1 - -',
-      width: 'G2'
-    },
-
-    childExtend: {
-      extend: CommonField,
-
-      element: {
-        on: {
-          input: (ev, el, s) => {
-            const rootState = el.__root.state
-            const obj = {
-              STATE: { [el.parent.key]: el.node.value }
-            }
-            rootState.update({ SYSTEM: obj })
-          }
-        }
-      }
-    },
-
-    websiteTitle: {
-      title: 'Title',
-      element: {
-        extend: Input
-      }
-    },
-
-    websiteDesc: {
-      title: 'Description',
-      element: {
-        extend: Input
-      }
-    },
-
-    websiteTags: {
-      title: 'Tags',
-      element: {
-        extend: Input
-      }
-    },
-
-    headline: {
-      title: 'Headline',
-      element: {
-        extend: Input
-      }
-    },
-
-    paragraph: {
-      title: 'Paragraph',
-      element: {
-        extend: Input
-      }
-    },
-
-    bookNowUrl: {
-      title: 'Book now URL:',
-      element: {
-        extend: Input
-      }
-    }
-  },
-
-  on: {
-    stateUpdated: (el, s) => {
-      s.systemUpdate({ STATE: s.parse })
-    }
-  }
-}

package/src/pages/Theme/index.js

@@ -1,197 +0,0 @@
-'use strict'
-
-import {
-  PageTemplate,
-  Button,
-  Flex,
-  SectionHeader,
-  AccessibilityCheck,
-  SceneThemingBar,
-  Pseudo,
-  CommonField
-} from '@symbo.ls/components'
-
-import preview from './preview'
-// import { themingTools } from './themingTools'
-// import { interactivity } from './interactivity'
-// import { friendTheme } from './friendTheme'
-
-import style from './style'
-
-const ThemeNameField = {
-  tag: 'label',
-  attr: { for: 'name-it' },
-  extend: CommonField,
-
-  props: ({ state }) => ({
-    gap: '0',
-
-    title: {
-      text: 'Name the theme'
-    },
-
-    element: {
-      whiteSpace: 'nowrap',
-      minWidth: 'C1',
-      maxWidth: 'fit-content',
-      outline: 'none',
-      fontSize: 'E',
-
-      border: 'dashed, gray5',
-      borderWidth: '0 0 1px',
-
-      text: (el, s) => s.themeName,
-
-      ':empty::before': {
-        content: '"You name it"',
-        color: 'gray5'
-      }
-    }
-  }),
-
-  title: {},
-  element: {
-    extend: Pseudo,
-    attr: { contentEditable: true, id: 'name-it' }
-  }
-}
-
-const footer = { //eslint-disable-line
-  extend: [Flex],
-  props: {
-    height: 'C2',
-    padding: '0 A'
-  },
-  style: {
-    margin: 'auto -80px 0',
-    justifyContent: 'space-between',
-    alignItems: 'center'
-  },
-  nav: {
-    extend: [Flex],
-    props: { gap: 'A' },
-    childExtend: {
-      extend: [Button],
-      props: {
-        size: 'Z',
-        width: 'B2',
-        height: 'B2',
-        theme: 'transparent'
-      }
-    },
-    ...[
-      { props: { icon: 'starOutline' } },
-      { props: { icon: 'copyOutline' } },
-      { props: { icon: 'share' } }
-    ]
-  },
-  span: {
-    props: {
-      text: 'Autosaved 1 second ago',
-      size: 'Y'
-    },
-    style: { opacity: '.35' }
-  },
-
-  export: {
-    extend: Flex,
-    style: {
-      alignItems: 'center'
-    },
-    span: {
-      props: {
-        text: 'Export:',
-        size: 'Y',
-        padding: '0 B1 0 0'
-      },
-      style: { opacity: '.35' }
-    },
-    nav: {
-      extend: [Flex],
-      props: { gap: 'Y2' },
-      childExtend: {
-        extend: [Button],
-        props: {
-          size: 'Z',
-          width: 'B2',
-          height: 'B2',
-          theme: 'transparent'
-        },
-        style: {
-          color: 'white'
-        }
-      },
-      ...[
-        { props: { icon: 'themeOutline' } },
-        { props: { icon: 'sketch' } },
-        { props: { icon: 'arrowAngleMirroringHorizontal' } }
-      ]
-    }
-  }
-}
-
-export const Theme = {
-  key: 'ColorEditor',
-
-  extend: PageTemplate,
-
-  style,
-
-  state: {
-    sceneTheme: 'dark',
-    title: 'Typography',
-    p: 'A general configuration of type properties on the document.'
-  },
-
-  on: {
-    init: (el, s) => {
-      if (!s.__system) return
-      const path = window.location.pathname
-      const pathArray = path.split('theme/')
-      if (!s.__system) return
-      const { THEME } = s.__system
-      const themeName = pathArray[1]
-      var value = THEME[themeName]
-
-      if (themeName && value) {
-        s.update({
-          themeName,
-          value
-        }, { preventUpdate: true })
-      }
-    }
-  },
-
-  header: {
-    extend: SectionHeader,
-    props: {
-      margin: '0 0 B2'
-    },
-    heading: null,
-    ThemeNameField,
-    nav: { extend: SceneThemingBar }
-  },
-
-  cnt: {
-    extend: Flex,
-    props: { gap: 'D' },
-
-    preview,
-
-    colorEdit: {
-      props: { gap: 'C2', flexFlow: 'column' }
-      // themingTools,
-      // interactivity,
-      // friendTheme
-    }
-  },
-
-  check: {
-    extend: AccessibilityCheck,
-    props: {
-      padding: 'E 0 F'
-    }
-  }
-
-  // footer
-}