@symbo.ls/preview 0.0.98 → 2.0.7

package/src/pages/DesignSystem/index.js

@@ -1,187 +0,0 @@
-'use strict'
-
-import { router } from '@domql/router'
-
-import { Flex } from '@symbo.ls/components'
-
-import {
-  ShapePreview,
-  ResponsivePreview,
-  SpacingPreview,
-  Page
-} from '../../components'
-
-import { DesignSystemDashboard } from './Dashboard'
-import {
-  Color,
-  Theme,
-  Shapes,
-  Spaces,
-  Icons,
-  Typography,
-  Fonts,
-  MediaQuery
-} from '..'
-
-const NAV = [{
-  state: {
-    title: 'Colors',
-    href: '/colors'
-  },
-  props: {
-    icon: { name: 'color outline colored' }
-  }
-}, {
-  state: {
-    title: 'Typography',
-    href: '/typography'
-  },
-  props: {
-    icon: { name: 'typography outline' },
-    opacity: '.7'
-  }
-}, {
-  state: {
-    title: 'Spacing',
-    href: '/space'
-  },
-  props: {
-    icon: { name: 'space outline' },
-    opacity: '.7'
-  }
-}, {
-  state: {
-    title: 'Shapes',
-    href: '/shape'
-  },
-  props: {
-    icon: { name: 'shape outline colored' }
-  }
-}, {
-  state: {
-    title: 'Icons',
-    href: '/icons'
-  },
-  props: {
-    icon: { name: 'icons outline colored' },
-    '.isActive': {
-      icon: { name: 'icons colored' }
-    }
-  }
-}, {
-  state: {
-    title: 'Responsive',
-    href: '/media-query'
-  },
-  props: {
-    icon: { name: 'device mobile half fill' },
-    opacity: '.7'
-  }
-}, {
-  state: {
-    title: 'Fonts',
-    href: '/fonts'
-  },
-  props: {
-    icon: { name: 'fontFace colored' },
-    opacity: '.7'
-  }
-}, {
-  state: {
-    title: 'Timing',
-    href: '/timing'
-  },
-  props: {
-    icon: { name: 'clock colored' }
-  }
-}, {
-  state: {
-    title: 'Sequence',
-    href: '/sequence'
-  },
-  props: {
-    icon: { name: 'sequence colored' }
-  }
-}]
-
-export const DesignSystem = {
-  extend: Flex,
-
-  props: {
-    margin: '-C2+X2 - -',
-    padding: 'C2+X2 - -',
-    minHeight: '100%',
-    maxWidth: '100%',
-    width: '100%',
-    flow: 'column',
-    gap: 'B1',
-
-    page: {
-      width: '100%',
-      flow: 'row',
-      flex: 1,
-      align: 'flex-start flex-start',
-      gap: 'B1',
-      padding: 'D2 A C1',
-
-      Page: {
-        padding: 'X2 C1 B1',
-        flex: 1
-      }
-    },
-
-    widget: {
-      padding: 'A',
-      position: 'sticky',
-      width: '100%',
-      zIndex: 9999,
-      bottom: '0'
-    }
-  },
-
-  define: { routes: param => param },
-  routes: {
-    '/design-system': DesignSystemDashboard,
-    '/colors': Color,
-    '/theme': Theme,
-    '/typography': Typography,
-    '/space': Spaces,
-    '/shape': Shapes,
-    '/fonts': Fonts,
-    '/icons': Icons,
-    '/media-query': MediaQuery
-    // '/sequence': Sequence,
-    // '/timing': Timing,
-  },
-
-  page: {
-    extend: Flex,
-
-    DesignSystemNavbar: {
-      extend: true,
-      nav: { ...NAV }
-    },
-    Page: { extend: Page }
-  },
-
-  widget: {
-    state: ({ parent }) => ({ __ref: parent.page.Page.state }),
-
-    define: { routes: param => param },
-    routes: {
-      '/media-query': ResponsivePreview,
-      '/space': SpacingPreview,
-      '/shape': ShapePreview
-    },
-
-    on: {
-      render: element => {
-        const { pathname, hash } = window.location
-        const url = pathname + hash
-        router(element, url, {})
-      }
-    }
-  }
-}
-
-export * from './Dashboard'

package/src/pages/Export/gist.js

@@ -1,23 +0,0 @@
-'use strict'
-
-export const fetchGist = (key, 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/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) => {
-  if (!s.__system) return
-  const { FONT } = s.__system
-  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,
-  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,47 +0,0 @@
-'use strict'
-
-import { Grid, Hoverable, FontFamilyObject } from '@symbo.ls/components'
-import { TypeSection } from '../Typography/shared'
-
-const mapFontFamilies = (el, s) => {
-  if (!s.__system) return
-  const { FONT_FAMILY } = s.__system
-  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,
-  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,15 +0,0 @@
-'use strict'
-
-import fontFaces from './fontFaces'
-import fontFamilies from './fontFamilies'
-
-import { state } from './state'
-
-export const Fonts = {
-  state,
-
-  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/Init/ChooseEnvironment.js

@@ -1,104 +0,0 @@
-'use strict'
-
-import { Flex, CommonField, WiderButton, ClickableItem } from '@symbo.ls/components'
-
-import { InitPage } from '../../components'
-
-const ButtonOptions = {
-  tag: 'section',
-  extend: CommonField,
-
-  props: {
-    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: [WiderButton, ClickableItem],
-      on: {
-        click: (ev, el, s) => {
-          s.parent.update({ })
-        }
-      }
-    }
-  }
-}
-
-const yourEnvironment = {
-  extend: ButtonOptions,
-  props: {
-    margin: '- - C2 -',
-    title: { text: 'Your environment' }
-  },
-
-  title: {},
-  element: { ...[
-    { props: { icon: 'html' } },
-    { props: { icon: 'js outline' } },
-    { props: { icon: 'ts outline' } },
-    { props: { icon: 'pdf' } },
-    {
-      props: {
-        boxSizing: 'content-box',
-        padding: 'Z B',
-        width: 'auto',
-        borderRadius: 'B',
-        text: `I'm just playing`,
-        aspectRatio: 'auto'
-      },
-      icon: null
-    }
-  ] }
-}
-
-const yourFramework = {
-  extend: ButtonOptions,
-  props: {
-    margin: '- - F -',
-    title: { text: 'Your framework' }
-  },
-  title: {},
-  element: { ...[
-    { props: { icon: 'domql' } },
-    { props: { icon: 'react' } },
-    { props: { icon: 'vue' } },
-    { props: { icon: 'angular' } },
-    { props: { icon: 'svelte' } },
-    { props: { icon: 'webComponents' } }
-  ] }
-}
-
-export const ChooseEnvironment = {
-  extend: InitPage,
-
-  back: { props: { href: '/init/font' } },
-
-  HeaderHeading: {
-    margin: '- - D -',
-
-    Caption: { text: 'And finally,' },
-    H1: { text: 'Your environment' }
-  },
-
-  yourEnvironment,
-  yourFramework,
-
-  ContinueButton: {
-    text: 'Create Symbols',
-    theme: 'primary',
-    href: '/design-system'
-  }
-}

package/src/pages/Init/CreateDocumentTheme.js

@@ -1,166 +0,0 @@
-'use strict'
-
-import { Clickable, Flex, GlobalThemeTemplate } from '@symbo.ls/components'
-import { InitPage } from '../../components'
-
-const paragraphs = {
-  extend: Flex,
-  childExtend: { tag: 'p' },
-  ...['To personalize your Symbols experience, we need to get started with themes',
-    'Please fill in the document dark and light themes']
-}
-
-const modes = {
-  extend: Flex,
-  props: {
-    gap: 'C',
-    margin: '- -Z E2'
-  },
-
-  childExtend: {
-    extend: [Clickable, GlobalThemeTemplate],
-
-    props: ({ state }) => ({
-      minWidth: 'G3',
-      maxWidth: '406px',
-      position: 'relative',
-      maxHeight: 'E2',
-      boxSizing: 'content-box',
-      align: 'flex-start flex-start',
-      padding: 'A A Z',
-      overflow: 'hidden',
-      round: 'A1',
-      color: state.color,
-      background: state.background,
-      wrap: 'wrap',
-      transitionProperty: 'transform, opacity, border-radius',
-
-      icon: {
-        boxSize: 'C C',
-        color: 'yellow 1 +5',
-        background: 'yellow .2',
-        pointerEvents: 'none',
-        fontSize: `B`
-      },
-
-      article: {
-        padding: 'X2 - - -',
-        title: { fontSize: 'D2', fontWeight: 'bold' }
-      },
-
-      '.active': {
-        opacity: '1',
-        round: 'A1 A1 Y2 Y2',
-
-        style: {
-          '[buttons]': {
-            opacity: '1',
-            transform: 'translate3d(0, 0, 0)'
-          }
-        }
-      }
-    }),
-
-    icon: {},
-    article: {},
-
-    ThemeButtons: {
-      position: 'absolute',
-      left: 'W',
-      right: 'W',
-      bottom: 'W',
-      opacity: '0',
-      transition: 'B defaultBezier',
-      transitionProperty: 'transform, opacity',
-      transform: 'translate3d(0, 100%, 0)',
-      columnGap: 'W'
-    },
-
-    Span: {
-      width: '100%',
-      fontSize: 'Z',
-      color: 'gray7',
-      fontStyle: 'italic',
-      margin: 'C 0 0 X2',
-      text: 'click to change'
-    },
-
-    on: {
-      click: (ev, el, s) => {
-        if (ev.target === el.node) {
-          el.setProps({ active: !el.props.active })
-        }
-      },
-      stateUpdated: (el, s, changes) => {
-        const { color, background } = s
-        s.systemUpdate({
-          THEME: {
-            document: {
-              ['@' + s.key]: { color, background }
-            }
-          }
-        }, { preventUpdate: true })
-      }
-    }
-  },
-
-  $setStateCollection: ({ state }) => state.values
-}
-
-export const CreateDocumentTheme = {
-  extend: InitPage,
-
-  props: {
-    flow: 'column',
-    align: 'flex-start',
-
-    paragraphs: {
-      gap: 'E',
-      margin: '- - D1 -',
-      childProps: {
-        color: 'gray6',
-        maxWidth: `G1`
-      }
-    }
-  },
-
-  back: { props: { href: '/init/' } },
-
-  HeaderHeading: {},
-  paragraphs,
-  modes,
-
-  ContinueButton: {
-    href: '/init/pallete'
-  },
-
-  on: {
-    init: ({ state }) => {
-      const { THEME, COLOR } = state.__system
-      const { document } = THEME
-      const dark = document['@dark']
-      const light = document['@light']
-
-      const colorRef = {
-        light: {
-          key: 'light',
-          title: 'Day',
-          icon: 'sun',
-          color: COLOR[light.color] || light.color || '#000000',
-          background: COLOR[light.background] || light.background || '#FFFFFF'
-        },
-        dark: {
-          key: 'dark',
-          title: 'Night',
-          icon: 'moon',
-          color: COLOR[dark.color] || dark.color || '#FFFFFF',
-          background: COLOR[dark.background] || dark.background || '#000000'
-        }
-      }
-
-      state.update({
-        values: colorRef
-      }, { preventUpdate: true, ignoreInitUpdate: true })
-    }
-  }
-}

package/src/pages/Init/CreatePalette.js

@@ -1,72 +0,0 @@
-'use strict'
-
-import { Flex, ColorPickerWithTitle } from '@symbo.ls/components'
-import { InitPage } from '../../components'
-
-const colors = {
-  extend: Flex,
-  props: {
-    width: 'F3',
-    flow: 'column',
-    gap: 'B1',
-    opacity: '.75'
-  },
-
-  childExtend: {
-    extend: ColorPickerWithTitle,
-    props: ({ state }) => ({
-      title: { text: state.title }
-    })
-  },
-
-  $setStateCollection: ({ state }) => [{
-    title: 'Accent color',
-    value: state[0]
-  }, {
-    title: 'Secondary Color',
-    value: state[1]
-  }, {
-    title: 'Inactive Color',
-    value: state[2]
-  }]
-}
-
-const content = {
-  extend: Flex,
-  props: {
-    margin: '- - F -',
-    align: 'flex-start',
-    gap: 'E2',
-    ColorsPalette: {
-      margin: '- - - auto'
-    }
-  },
-
-  colors,
-
-  ImageColorPicker: {},
-  ColorsPalette: {
-    props: ({ state }) => ({
-      hide: state.imageUrl,
-      margin: '- - auto'
-    })
-  }
-}
-
-export const CreatePallete = {
-  extend: InitPage,
-
-  back: { props: { href: '/init/theme' } },
-
-  HeaderHeading: {
-    margin: '- - D -',
-    Caption: { text: `Let's get started` },
-    H1: { text: 'Create your palette' }
-  },
-
-  content,
-
-  ContinueButton: {
-    href: '/init/font'
-  }
-}

package/src/pages/Init/FontText.js

@@ -1,23 +0,0 @@
-'use strict'
-
-import { InitPage } from '../../components'
-
-export const FontText = {
-  extend: InitPage,
-
-  back: { props: { href: '/init/pallete' } },
-
-  HeaderHeading: {
-    props: { margin: '- - D2 -' },
-    Caption: { text: `Let's make sure` },
-    H1: { text: 'Texts look good?' }
-  },
-
-  FontText: {
-    margin: '- -Z'
-  },
-
-  ContinueButton: {
-    href: '/init/env'
-  }
-}