@symbo.ls/preview 2.7.21 → 2.7.23

package/src/pages/DesignSystem/Dashboard/banners.js

@@ -1,38 +0,0 @@
-'use strict'
-
-import { Flex } from '@symbo.ls/components'
-import { TutorialBanner } from '../../../components'
-
-import DARK_PNG from '../../../assets/dark.png'
-import TYPE_PNG from '../../../assets/type.png'
-import SPACE_PNG from '../../../assets/space.png' // eslint-disable-line
-import SHAPES_PNG from '../../../assets/shapes.png'
-
-export default {
-  extend: Flex,
-
-  props: {
-    align: 'stretch space-between',
-    margin: '-A -Z1 B',
-    gap: 'B1'
-  },
-
-  childExtend: TutorialBanner,
-
-  $setStateCollection: ({ state }) => [{
-    title: 'Setting up a dark theme',
-    p: '15 sec tutorial',
-    background: DARK_PNG,
-    href: ''
-  }, {
-    title: 'How to composite',
-    p: '3 mins tutorial',
-    background: TYPE_PNG,
-    href: ''
-  }, {
-    title: 'Master Shapes',
-    p: '45 sec tutorial',
-    background: SHAPES_PNG,
-    href: ''
-  }]
-}

package/src/pages/DesignSystem/Dashboard/designElements.js

@@ -1,124 +0,0 @@
-'use strict'
-
-import { Flex, DesignElement } from '@symbo.ls/components'
-
-export default {
-  extend: Flex,
-
-  props: {
-    flow: 'row wrap',
-    align: 'flex-start flex-start',
-    gap: 'C B2',
-    padding: 'B1 0 B2',
-    margin: '0 -Z2'
-  },
-
-  childExtend: {
-    extend: DesignElement,
-    props: {
-      flex: '1',
-      widthRange: 'F F'
-    }
-  },
-
-  ...[{
-    href: '/color',
-    button: {
-      theme: 'color',
-      icon: { name: 'color' }
-    },
-    heading: {
-      maxWidth: 'E1-default',
-      title: { text: 'Colors' },
-      p: { text: 'Colorize styles manually' }
-    }
-  }, {
-    href: '/theme',
-    button: {
-      theme: 'theme',
-      icon: { name: 'theme' }
-    },
-    heading: {
-      maxWidth: 'E1-default',
-      title: { text: 'Theming' },
-      p: { text: 'Color groups and states' }
-    }
-  }, {
-    href: '/typography',
-    button: {
-      theme: 'typography',
-      icon: { name: 'typography' }
-    },
-    heading: {
-      maxWidth: 'E-default',
-      title: { text: 'Typography' },
-      p: { text: 'Style a typed material' }
-    }
-  }, {
-    href: '/space',
-    button: {
-      theme: 'space',
-      icon: { name: 'space' }
-    },
-    heading: {
-      maxWidth: 'E1-default',
-      title: { text: 'Spacing' },
-      p: { text: 'Manage properties of a size' }
-    }
-  }, {
-    href: '/shape',
-    button: {
-      theme: 'shape',
-      icon: { name: 'shape' }
-    },
-    heading: {
-      maxWidth: 'E2-default',
-      title: { text: 'Shapes' },
-      p: { text: 'Design an outline to a component' }
-    }
-  }, {
-    href: '/icons',
-    button: {
-      theme: 'icons',
-      icon: { name: 'icons' }
-    },
-    heading: {
-      maxWidth: 'F-default',
-      title: { text: 'Icons' },
-      p: { text: 'Label a role of subject with glyphs' }
-    }
-  }, {
-    href: '/sequence',
-    button: {
-      theme: 'default',
-      icon: { name: 'state' }
-    },
-    heading: {
-      maxWidth: 'F-default',
-      title: { text: 'Sequence' },
-      p: { text: 'Generating set for measurable units' }
-    }
-  }, {
-    href: '/timing',
-    button: {
-      theme: 'default',
-      icon: { name: 'clock outline' }
-    },
-    heading: {
-      maxWidth: 'F-default',
-      title: { text: 'Timing' },
-      p: { text: 'Tokens for transitions and animations' }
-    }
-  }, {
-    href: '/media-query',
-    button: {
-      // theme: 'screen',
-      icon: { name: 'deviceSmallScreenOutline' }
-    },
-    heading: {
-      maxWidth: 'F-default',
-      title: { text: 'Media Query' },
-      p: { text: 'Frequently used media queries as variables' }
-    }
-  }].map(v => ({ props: v }))
-}

package/src/pages/DesignSystem/Dashboard/index.js

@@ -1,22 +0,0 @@
-'use strict'
-
-import { Flex } from '@symbo.ls/components'
-
-import banners from './banners'
-import summary from './summary'
-import quickstart from './quickstart'
-
-export const DesignSystemDashboard = {
-  extend: Flex,
-
-  props: { flow: 'column', gap: 'C1' },
-
-  ArticleBig: {
-    title: { text: 'Design System' },
-    p: { text: 'Create your Design System guidelines' }
-  },
-
-  banners,
-  summary,
-  quickstart
-}

package/src/pages/DesignSystem/Dashboard/quickstart.js

@@ -1,84 +0,0 @@
-'use strict'
-
-const startElementProps = {
-  position: 'relative',
-  minWidth: 'G',
-  maxWidth: 'G2',
-  width: '100%',
-  note: {
-    fontSize: 'Z1',
-    color: 'gray6',
-    position: 'absolute',
-    maxWidth: '100%',
-    whiteSpace: 'initial',
-    top: '115%',
-    left: 'Z',
-    fontFamily: 'smbls'
-  }
-}
-
-export default {
-  SectionHeader: {
-    margin: '- - B2',
-    title: 'Setting up locally',
-    p: 'This is how you initialize Symbols Design System to your local app.'
-  },
-
-  Flex: {
-    props: {
-      gap: 'D1',
-      align: 'flex-start space-between',
-      childProps: {
-        flex: '1',
-
-        Terminal: startElementProps,
-        Code: startElementProps
-      }
-    },
-
-    step1: {
-      extend: 'QuickStartTerminal',
-      QuickStartNumber: { width: '.87ch', text: '1' },
-      Terminal: {
-        note: { text: 'Install Symbols to your project' },
-        props: {
-          command: { text: 'npm i smbls --save' }
-        }
-      }
-    },
-
-    step2: {
-      extend: 'QuickStartTerminal',
-      QuickStartNumber: { text: '2' },
-      Terminal: {
-        note: { text: 'Login to Symbols from command line' },
-        props: {
-          command: { text: 'smbls login' }
-        }
-      }
-    },
-
-    step3: {
-      extend: 'QuickStartCode',
-      QuickStartNumber: { text: '3' },
-      Code: {
-        props: {},
-        note: { text: 'Create .symbolsrc.js file in your project and insert your Symbols key' },
-        code: {
-          text: ({ state }) => `{ "key": "${state.appKey}" }`
-        }
-      }
-    },
-
-    step4: {
-      extend: 'QuickStartTerminal',
-      QuickStartNumber: { text: '4' },
-      Terminal: {
-        note: { text: 'Sync live changes' },
-        props: {
-          command: { text: 'smbls sync --live' }
-        }
-      }
-    }
-  }
-}

package/src/pages/DesignSystem/Dashboard/state.js

@@ -1,142 +0,0 @@
-'use strict'
-
-export const applySummaryCollection = (el, s) => {
-  if (!s) return
-  const {
-    COLOR,
-    THEME,
-    TYPOGRAPHY,
-    FONT,
-    FONT_FAMILY,
-    SPACING,
-    ICONS,
-    TIMING,
-    MEDIA,
-    DEVICES
-  } = s
-
-  if (!COLOR) return
-
-  return [{
-    icon: 'colorOutline',
-    href: '/colors',
-    iconTheme: 'theme',
-    title: 'colors',
-    paragraph: 'Colorize styles manually',
-    iconBackground: 'red',
-    properties: [{
-      property: 'Colors',
-      value: COLOR && Object.keys(COLOR).length
-    }, {
-      property: 'Themes',
-      value: THEME && Object.keys(THEME).length
-    }]
-  }, {
-    icon: 'typographyOutline',
-    href: '/typography',
-    iconTheme: 'typography',
-    title: 'typography',
-    paragraph: 'style a typed material',
-    properties: [{
-      property: 'Base size',
-      value: TYPOGRAPHY && TYPOGRAPHY.base + 'px'
-    }, {
-      property: 'Ratio',
-      value: TYPOGRAPHY && TYPOGRAPHY.ratio
-    }, {
-      property: 'Styles',
-      value: TYPOGRAPHY && TYPOGRAPHY.styles && Object.keys(TYPOGRAPHY.styles).length
-    }, {
-      property: 'Fonts',
-      value: FONT && Object.keys(FONT).length
-    }, {
-      property: 'Families',
-      value: FONT_FAMILY && Object.keys(FONT_FAMILY).length - 1
-    }]
-  }, {
-    icon: 'spaceOutline',
-    href: '/space',
-    iconTheme: 'space',
-    title: 'Spacing',
-    paragraph: 'Manage properties of a size',
-    properties: [{
-      property: 'Ratio',
-      value: SPACING && SPACING.ratio
-    }, {
-      property: 'Templates',
-      value: 'TBA'
-    }]
-  }, {
-    icon: 'shape',
-    href: '/shape',
-    iconTheme: 'shape',
-    title: 'shapes',
-    paragraph: 'Design an outline to a chosen component',
-    properties: [{
-      property: 'HTML',
-      value: '32'
-    }, {
-      property: 'SVG',
-      value: 'TBA'
-    }]
-  }, {
-    icon: 'iconsOutline',
-    href: '/icons',
-    iconTheme: 'color',
-    title: 'Icons',
-    paragraph: 'Label a role of subject with glyphs',
-    properties: [{
-      property: 'All',
-      value: ICONS && Object.keys(ICONS).length
-    }, {
-      property: 'Linear',
-      value: ICONS && Object.keys(ICONS).filter(v => v.includes('Outline')).length
-    }, {
-      property: 'Colored',
-      value: ICONS && Object.keys(ICONS).filter(v => v.includes('Colored')).length
-    }]
-  }, {
-    icon: 'clock',
-    href: '/timing',
-    iconTheme: 'icons',
-    title: 'Timing',
-    paragraph: 'Tokens for transitions and animations',
-    properties: [{
-      property: 'Timing base',
-      value: TIMING && TIMING.base + 'ms'
-    }, {
-      property: 'Ratio',
-      value: TIMING && TIMING.ratio
-    }, {
-      property: 'Transitions',
-      value: 'TBA'
-    }, {
-      property: 'Animations',
-      value: 'TBA'
-    }]
-  }, {
-    icon: 'deviceMobileOutline',
-    href: '/media-query',
-    title: 'Breakpoints',
-    paragraph: 'Label a role of subject with glyphs',
-    properties: [{
-      property: 'Breakpoints',
-      value: MEDIA && Object.keys(MEDIA).length
-    }, {
-      property: 'Screens',
-      value: DEVICES && Object.keys(DEVICES).length
-    }]
-  }, {
-    icon: 'threeDots',
-    href: '/sequence',
-    title: 'Sequence',
-    paragraph: 'The mapping system of generative sizing units',
-    properties: [{
-      property: 'Breakpoints',
-      value: '8'
-    }, {
-      property: 'Screens',
-      value: '3'
-    }]
-  }]
-}

package/src/pages/DesignSystem/Dashboard/summary.js

@@ -1,52 +0,0 @@
-'use strict'
-
-import { ClickableItem, Link } from '@symbo.ls/components'
-import { DesignComponent } from '../../../components'
-
-import { applySummaryCollection } from './state'
-
-export const cnt = {
-  state: 'summary',
-
-  props: {
-    margin: '- -Z',
-    columns: '15rem',
-    gap: 'B1'
-  },
-
-  childExtend: {
-    extend: [Link, ClickableItem, DesignComponent],
-    state: true,
-    props: ({ state }) => ({
-      maxWidth: 'none',
-      width: '100%',
-      margin: '- - B1',
-      fontWeight: '400',
-      href: state.href
-    })
-  },
-
-  $setPropsCollection: (el, s) => s.parse()
-}
-
-export default {
-  props: {
-    margin: '- - C1'
-  },
-
-  state: 'PROJECT_SYSTEM',
-
-  SectionHeader: {
-    title: 'Design System takeaways',
-    p: 'Your tokens in the system at a glance'
-  },
-
-  cnt,
-
-  on: {
-    initUpdate: (el, s) => {
-      if (s.summary) return
-      s.summary = applySummaryCollection(el, s)
-    }
-  }
-}

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/Editor/index.js

@@ -1,46 +0,0 @@
-'use strict'
-
-import { Block, Flex, Footer, ResponsiveToolBar } from '@symbo.ls/components'
-
-import { LIBRARY } from '../../../.symbols'
-
-import LayerSidebar from './layers'
-import ToolSidebar from './tools'
-import scene from './scene'
-
-import style from './style'
-const COMPONENT_ROUTES = {}
-LIBRARY.map(v => (COMPONENT_ROUTES[`/${v.key}`] = v))
-
-export default {
-  style,
-  extend: Flex,
-  mainContainer: {
-    extend: [Block, Flex],
-    props: {
-      padding: '0 A2',
-      gap: 'B'
-    },
-
-    LayerSidebar,
-    scene,
-    ToolSidebar
-  },
-
-  footer: {
-    extend: Footer,
-    FooterBar: {},
-    // span: 'Autosaved 1 secsond ago',
-    screenChanger: {
-      extend: ResponsiveToolBar,
-      style: {
-        marginLeft: 'auto'
-      }
-    },
-    spaceExport: {
-      cd: null,
-      fr: null,
-      sp: null
-    }
-  }
-}