@symbo.ls/preview 2.7.21 → 2.7.23

package/src/pages/Export/index.js

@@ -1,82 +0,0 @@
-'use strict'
-
-import { router, lastLevel } from '@domql/router' // eslint-disable-line no-unused-vars
-
-import { Flex } from '@symbo.ls/components'
-import { Page } from '../../components'
-
-import state from './state'
-import scene from './scene'
-import tools from './tools'
-import description from './description' // eslint-disable-line no-unused-vars
-
-import { fetchGist } from './gist'
-
-import { COMPONENT_ROUTES } from './const'
-
-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]
-    return v.key === key
-  })
-}
-
-export const Export = {
-  key: 'export',
-  extend: Flex,
-
-  props: {
-    width: '100%',
-    flow: 'column',
-    padding: '0 Y2'
-  },
-
-  state,
-
-  on: {
-    stateCreated: (element, state) => {
-      const route = window.location.pathname
-      const routes = route.slice(1).split('/')
-      const componentKey = routes[1]
-      const COMPONENTS = state.__components
-
-      const libComponent = COMPONENT_ROUTES[`/${componentKey}`]
-      const liveComponent = COMPONENTS[componentKey]
-
-      const content = libComponent || liveComponent
-
-      if (content) {
-        state.update({
-          live: !!liveComponent,
-          ...content
-        }, { preventUpdate: true })
-      }
-
-      if (componentKey.length === 32) { // this might be Gist
-        fetchGist(componentKey, state)
-      }
-
-      // if (!content) return router(el.__root, '/components')
-    }
-  },
-
-  main: {
-    style: { maxWidth: 'none' },
-    scene
-  },
-
-  cnt: {
-    extend: [Page],
-
-    props: {
-      padding: 'Z2 C1 A',
-      flex: '1'
-    },
-
-    tools,
-    description
-  }
-
-  // footer: { extend: Footer }
-}

package/src/pages/Export/scene.js

@@ -1,59 +0,0 @@
-'use strict'
-
-import { getActiveConfig } from '@symbo.ls/scratch'
-import { Scene } from '@symbo.ls/components'
-
-export default {
-  extend: Scene,
-
-  props: (el, s) => {
-    const CONFIG = getActiveConfig()
-    const { BREAKPOINTS } = CONFIG
-    const previewSize = BREAKPOINTS[s.previewSize]
-    return {
-      width: '100%',
-      maxWidth: previewSize ? previewSize + 'px' : '100%',
-      margin: '- auto'
-    }
-  },
-
-  scene: {
-    props: {
-      padding: 'B 0',
-      maxHeight: '40em',
-      position: 'relative',
-      minHeight: '65vh'
-    },
-
-    class: {
-      z: (el, s) => ({
-        '> *': {
-          transform: `scale(${parseFloat(s.zoomLevel, 2)})`
-        }
-      })
-    },
-
-    Iframe: {
-      props: (el, s) => ({
-        id: 'component',
-        src: `/scene/${s.key}`,
-        border: '0',
-        background: 'transparent',
-        position: 'absolute',
-        boxSize: '100% 100%',
-        inset: '0 0 0 0'
-      }),
-      on: {
-        initUpdate: (el, s) => {
-          return false
-        }
-      }
-    }
-  },
-
-  on: {
-    stateUpdated: (el, s) => {
-      el.__root.node.scrollTo({ top: 0, behavior: 'smooth' })
-    }
-  }
-}

package/src/pages/Export/state.js

@@ -1,23 +0,0 @@
-'use strict'
-
-import { SPACING, TYPOGRAPHY } from '@symbo.ls/scratch'
-
-export default {
-  descriptionTheme: 'dark',
-  previewSize: 'unset',
-  sceneTheme: 'dark',
-  theme: '',
-  zoomLevel: 1,
-  currentFontSizeIndex: 3,
-}
-
-export const toolsState = {
-  base: TYPOGRAPHY.base,
-  ratio: SPACING.ratio,
-  range: [-1, +4],
-  scales: {},
-  sequence: {},
-  vars: {},
-  type: 'type-scale',
-  sampleText: 'Today is a big day for our tribe. The year ends.'
-}

package/src/pages/Export/tools.js

@@ -1,101 +0,0 @@
-'use strict'
-
-import {
-  Flex,
-  SequenceSliders,
-  ClickableItem,
-  SquareButton,
-  ThemeSwitcher // eslint-disable-line no-unused-vars
-} from '@symbo.ls/components'
-import { Link } from '@symbo.ls/components/src/Link'
-import { toolsState } from './state'
-
-export default {
-  props: {
-    padding: 'Z2 0 0',
-    flexAlign: 'center space-between'
-  },
-
-  tools: {
-    extend: Flex,
-    props: { gap: 'B1' },
-    // theme: { extend: ThemeSwitcher },
-    state: toolsState,
-
-    on: {
-      stateUpdated: (el, s, changes) => {
-        // window.componentRoot.context.system = s.__projectSystem
-        window.componentState.update(changes)
-      }
-    },
-
-    editors: {
-      extend: Flex,
-      props: { gap: 'Z2' },
-
-      childExtend: {
-        extend: [ClickableItem, SquareButton],
-        props: {}
-      },
-
-      add: {
-        props: {
-          icon: 'plus'
-        }
-      },
-      remix: {
-        props: {
-          icon: 'magicstar outline'
-        },
-        on: {
-          click: (ev, el, s) => {
-            window.componentState.update({
-              system: s.__projectSystem
-            })
-          }
-        }
-      },
-      editor: {
-        extend: Link,
-        props: {
-          icon: 'edit',
-          href: '/editor/' + window.location.pathname.split('component/')[1]
-        }
-      }
-    },
-
-    VerticalLine: {
-      margin: 'auto 0',
-      height: 'A2'
-    },
-
-    sliders: {
-      extend: SequenceSliders,
-      childExtend: { title: null }
-    }
-  },
-
-  responsive: {
-    extend: Flex,
-    props: { gap: 'A2' },
-
-    direction: {
-      extend: [ClickableItem, SquareButton],
-      props: { icon: 'languageDirection' },
-      on: {
-        click: (ev, el, s) => {
-          window.componentState.update({
-            direction: window.componentState.direction === 'rtl' ? 'ltr' : 'rtl'
-          })
-        }
-      }
-    },
-
-    VerticalLine: {
-      margin: 'auto 0',
-      height: 'A2'
-    },
-
-    ResponsiveToolBar: {}
-  }
-}

package/src/pages/Fonts/fontFaces.js

@@ -1,50 +0,0 @@
-'use strict'
-
-import { Grid, Hoverable, FontObject } from '@symbo.ls/components'
-import { TypeSection } from '../Typography/shared'
-
-const mapFonts = (el, s) => {
-  const FONT = s.parse()
-  const fontKeys = Object.keys(FONT)
-
-  return fontKeys.map(v => {
-    const font = FONT[v]
-    const weights = Object.keys(font)
-    const weightsLength = weights.length
-    const fontWeightCaption = weights[0] === 'variable' ? 'variable' : `${weightsLength} style${weightsLength > 1 ? 's' : ''}`
-
-    return {
-      title: v,
-      href: `/fonts/font-settings/${v}`,
-      labels: [
-        { icon: 'fontVariable', text: fontWeightCaption }
-      ]
-    }
-  })
-}
-
-export default {
-  extend: TypeSection,
-  state: 'FONT',
-  header: {
-    state: {
-      title: 'Document Fonts',
-      p: 'Document @font-face, default and backup fonts',
-      nav: [{
-        icon: 'plus',
-        href: '/fonts/upload-font'
-      }]
-    }
-  },
-
-  content: {
-    extend: Grid,
-    props: {
-      columns: 'repeat(2, 1fr)',
-      gap: 'A',
-      margin: '0 -Z'
-    },
-    childExtend: [FontObject, Hoverable],
-    $setStateCollection: mapFonts
-  }
-}

package/src/pages/Fonts/fontFamilies.js

@@ -1,48 +0,0 @@
-'use strict'
-
-import { Grid, Hoverable, FontFamilyObject } from '@symbo.ls/components'
-import { TypeSection } from '../Typography/shared'
-
-const mapFontFamilies = (el, s) => {
-  const FONT_FAMILY = s.parse()
-  const fontFamilyKeys = Object.keys(FONT_FAMILY)
-
-  return fontFamilyKeys.map(v => {
-    const val = FONT_FAMILY[v]
-    if (v === 'default') return
-    return {
-      title: v,
-      href: `/fonts/font-family/${v}`,
-      val
-    }
-  }).filter(v => v)
-}
-
-export default {
-  extend: TypeSection,
-  state: 'FONT_FAMILY',
-
-  header: {
-    state: {
-      title: 'Font Families',
-      p: 'Setup a set and fallback fonts as font families',
-      nav: [{
-        icon: 'plus',
-        href: '/fonts/add-font-family',
-        scrollToTop: false
-      }]
-    }
-  },
-
-  content: {
-    extend: Grid,
-    props: {
-      columns: 'repeat(4, 1fr)',
-      gap: 'A',
-      margin: '0 -Z'
-    },
-
-    childExtend: [FontFamilyObject, Hoverable],
-    $setStateCollection: mapFontFamilies
-  }
-}

package/src/pages/Fonts/index.js

@@ -1,16 +0,0 @@
-'use strict'
-
-import fontFaces from './fontFaces'
-import fontFamilies from './fontFamilies'
-
-import { state } from './state'
-
-export const Fonts = {
-  state: 'PROJECT_SYSTEM',
-  on: { stateCreated: (el, s) => s.update(state, { preventUpdate: true }) },
-
-  fontFaces,
-  line3: { extend: 'Line' },
-
-  fontFamilies
-}

package/src/pages/Fonts/state.js

@@ -1,5 +0,0 @@
-'use strict'
-
-export const state = {
-  sampleText: 'Today is a big day for our tribe. The year ends.'
-}

package/src/pages/Icons/index.js

@@ -1,92 +0,0 @@
-'use strict'
-
-import * as ACCESSIBILITY from '@symbo.ls/icons/src/accessibility'
-import * as BOXMODEL from '@symbo.ls/icons/src/boxModel'
-import * as DISPLAY from '@symbo.ls/icons/src/display'
-import * as INTERACTIVE from '@symbo.ls/icons/src/interactive'
-import * as LOGOS from '@symbo.ls/icons/src/logos'
-import * as SIGNS from '@symbo.ls/icons/src/signs'
-import * as STYLE from '@symbo.ls/icons/src/style'
-import * as KEYBOARD from '@symbo.ls/icons/src/keyboard'
-import * as SVG from '@symbo.ls/icons/src/miscellaneous'
-import * as TECH from '@symbo.ls/icons/src/tech'
-import * as TEXT from '@symbo.ls/icons/src/text'
-
-import { IconsGroup } from '../../components'
-
-const ArraizeIconsCategory = (library, state) => {
-  const list = Object.keys(library)
-  if (state.searched) return list.filter(value => value.includes(state.searched))
-  return list
-}
-
-const ICON_GROUPS = state => [{
-  title: 'Document Icons',
-  p: 'All ungrouped document icons',
-  list: ArraizeIconsCategory(SVG, state)
-}, {
-  title: 'Accessibility',
-  list: ArraizeIconsCategory(ACCESSIBILITY, state)
-}, {
-  title: 'Box Model',
-  list: ArraizeIconsCategory(BOXMODEL, state)
-}, {
-  title: 'Display',
-  list: ArraizeIconsCategory(DISPLAY, state)
-}, {
-  title: 'Interactive',
-  list: ArraizeIconsCategory(INTERACTIVE, state)
-}, {
-  title: 'Logos',
-  list: ArraizeIconsCategory(LOGOS, state)
-}, {
-  title: 'Signs',
-  list: ArraizeIconsCategory(SIGNS, state)
-}, {
-  title: 'Style',
-  list: ArraizeIconsCategory(STYLE, state)
-}, {
-  title: 'Keys',
-  list: ArraizeIconsCategory(KEYBOARD, state)
-}, {
-  title: 'Tech',
-  list: ArraizeIconsCategory(TECH, state)
-}, {
-  title: 'Text',
-  list: ArraizeIconsCategory(TEXT, state)
-}]
-
-export const Icons = {
-  state: {},
-
-  SectionHeader: {
-    extend: true,
-
-    heading: {
-      title: 'Icons',
-      p: 'Unlike typography, component may has the properties of padding, gap, width and rest.'
-    },
-
-    Search: {
-      margin: '- -Z2 - -',
-      placeholder: 'Search Icons'
-    },
-
-    nav: null
-  },
-
-  Line: {},
-
-  Flex: {
-    props: {
-      flow: 'column',
-      gap: 'D1'
-    },
-
-    childExtend: IconsGroup,
-    $setStateCollection: (el, state) => {
-      el.removeContent()
-      return ICON_GROUPS(state)
-    }
-  }
-}

package/src/pages/Icons/style.js

@@ -1 +0,0 @@
-'use strict'

package/src/pages/Init/ChooseEnvironment.js

@@ -1,149 +0,0 @@
-'use strict'
-
-import { InitPage } from '../../components'
-import {
-  Flex,
-  CommonField,
-  WiderButton,
-  ClickableItem,
-  TooltipParent
-} from '@symbo.ls/components'
-import { setCookie } from 'domql/packages/cookie'
-
-const ButtonOptions = {
-  tag: 'section',
-  extend: CommonField,
-
-  props: {
-    margin: '- - C2 -',
-    gap: 'Z2',
-    element: {
-      gap: 'A',
-      maxWidth: 'I',
-      alignItems: 'center',
-      childProps: {
-        theme: 'quaternary',
-        color: 'white .8',
-        round: 'Z1',
-        fontSize: 'A2'
-      }
-    }
-  },
-
-  title: {},
-  element: {
-    extend: Flex,
-    childExtend: {
-      extend: [ClickableItem, WiderButton, TooltipParent],
-      props: ({ key, state, parent }) => ({
-        active: state[parent.parent.key] === key.toLowerCase(),
-        '.active': {
-          opacity: 1
-        },
-
-        style: {
-          '&:hover, &:focus-visible': {
-            zIndex: 1000,
-            '& [tooltip]': {
-              transform: 'translate3d(-50%,0,0)',
-              opacity: 1,
-              visibility: 'visible'
-            }
-          }
-        }
-      }),
-
-      Tooltip: {
-        props: {
-          background: 'gray2 .95',
-          position: 'absolute',
-          pointerEvents: 'none',
-          top: '115%',
-          left: '50%',
-          shape: 'tooltip',
-          shapeDirection: 'top',
-          fontSize: 'Z1',
-          padding: 'Y Z1',
-          transform: 'translate3d(-50%, 10%, 0)',
-          transition: 'C defaultBezier, C defaultBezier, B defaultBezier',
-          transitionProperty: 'opacity, visibility, transform',
-          textAlign: 'center',
-          opacity: '0',
-          visibility: 'hidden',
-          zIndex: 9,
-          lineHeight: 1
-        },
-        title: ({ parent }) => parent.key,
-        p: null
-      },
-
-      on: {
-        click: (ev, el, s) => {
-          const key = el.parent.parent.key
-          const value = el.key.toLowerCase()
-          setCookie(key, value)
-          s.update({ [key]: value })
-        }
-      }
-    }
-  }
-}
-
-const language = {
-  extend: ButtonOptions,
-  title: { text: 'Your environment' },
-
-  element: {
-    HTML: { props: { icon: 'html' } },
-    JavaScript: { props: { icon: 'js outline' } },
-    TypeScript: { props: { icon: 'ts outline' } },
-    PDF: { props: { icon: 'pdf' } },
-    none: {
-      props: {
-        boxSizing: 'content-box',
-        padding: 'Z B',
-        width: 'auto',
-        borderRadius: 'B',
-        text: `I'm just playing`,
-        aspectRatio: 'auto'
-      },
-      icon: null
-    }
-  }
-}
-
-const framework = {
-  extend: ButtonOptions,
-  title: { text: 'Your framework' },
-
-  element: {
-    DOMQL: { props: { icon: 'domql' } },
-    React: { props: { icon: 'react' } },
-    Vue: { props: { icon: 'vue' } },
-    Angular: { props: { icon: 'angular' } },
-    Svelte: { props: { icon: 'svelte' } },
-    WebComponents: { props: { icon: 'webComponents' } }
-  }
-}
-
-export const ChooseEnvironment = {
-  extend: InitPage,
-
-  back: { props: { href: '/init/font' } },
-
-  HeaderHeading: {
-    margin: '- - D -',
-
-    Caption: { text: 'And finally,' },
-    H1: { text: 'Your environment' }
-  },
-
-  language,
-  framework,
-
-  ContinueButton: {
-    text: 'Create Symbols',
-    theme: 'primary',
-    href: '/design-system'
-  }
-}

package/src/pages/Init/ChooseProject.js

@@ -1,61 +0,0 @@
-'use strict'
-
-import { Flex, ProjectTab, Grid } from '@symbo.ls/components'
-
-import { InitPage } from '../../components'
-
-const props = {
-  align: 'flex-start flex-start',
-  width: '100%',
-
-  footer: {
-    p: {
-      color: 'gray6',
-      maxWidth: `${272 / 14}em`,
-      margin: '0'
-    }
-  }
-}
-
-export const ChooseProject = {
-  extend: InitPage,
-
-  props,
-
-  back: null,
-
-  HeaderHeading: {
-    margin: '- - D -',
-
-    Caption: { text: 'Sign in to one of your projects' },
-    H1: { text: null }
-  },
-
-  cnt: {
-    extend: Grid,
-    props: {
-      columns: 'repeat(7, 1fr)',
-      gap: 'D1',
-      margin: '10% -Z auto'
-    },
-
-    childExtend: ProjectTab,
-    $setStateCollection: ({ state }) => state.projects
-  },
-
-  footer: {
-    extend: Flex,
-    props: {
-      align: 'flex-start flex-start',
-      gap: 'C',
-      margin: 'auto - -'
-    },
-    ContinueButton: {
-      text: 'Create',
-      href: '/init/create'
-    },
-    p: {
-      text: `In this example we'll initialize a Symbols Design System for you.`
-    }
-  }
-}