@symbo.ls/preview 0.0.97 → 2.0.7

package/src/pages/Components/grid.js

@@ -1,99 +0,0 @@
-'use strict'
-
-import {
-  ComponentTemplate,
-  Grid,
-  SectionHeader
-} from '@symbo.ls/components'
-import { COMPONENTS } from '@symbo.ls/temp-db/symbols'
-import { gridStyle, rowStyle } from './style'
-
-export default {
-  props: {
-    padding: '0 Y2',
-    flex: 1
-  },
-
-  header: {
-    extend: SectionHeader,
-
-    props: {
-      margin: '0 0 X2',
-      title: null,
-      heading: {
-        p: {
-          opacity: '0',
-          text: 'All Categories'
-        },
-      }
-    },
-
-    heading: {},
-
-    nav: {
-      childExtend: {
-        props: {
-          theme: 'transparent',
-          background: 'transparent 0'
-        }
-      },
-
-      ...[{
-        props: (el, s) => ({
-          icon: { name: s.favorites ? 'star' : 'star outline' },
-          href: null
-        }),
-        on: {
-          click: (ev, el, s) => {
-            s.update({ favorites: !s.favorites })
-          }
-        }
-      }, {
-        props: (el, s) => {
-          const active = s.view === 'grid'
-          return {
-            active,
-            href: null,
-            icon: { name: active ? 'grid' : 'grid outline' }
-          }
-        },
-        on: {
-          click: (ev, el, s) => {
-            s.update({ view: 'grid' })
-          }
-        }
-      }, {
-        props: (el, s) => {
-          const active = s.view === 'list'
-          return {
-            active,
-            href: null,
-            icon: { name: active ? 'rows' : 'rows outline' }
-          }
-        },
-        on: {
-          click: (ev, el, s) => {
-            s.update({ view: 'list' })
-          }
-        }
-      }]
-    }
-  },
-
-  components: {
-    extend: Grid,
-
-    props: ({ state }) => ({
-      flex: 1,
-      gap: 'A',
-      margin: '- -Y2',
-      style: state.view === 'grid' ? gridStyle : rowStyle
-    }),
-
-    childExtend: ComponentTemplate,
-    $setStateCollection: ({ state }) => COMPONENTS.filter(v => {
-      if (!state.category) return true
-      return state.category === v.category.key
-    })
-  }
-}

package/src/pages/Components/index.js

@@ -1,37 +0,0 @@
-'use strict'
-
-import { splitRoute } from 'domql/packages/router'
-
-import sidebar from './sidebar'
-import grid from './grid'
-
-import { CATEGORIES } from '@symbo.ls/temp-db/symbols/categories'
-// import FAVORITES from '../../data/favorites'
-// import COMPONENTS from '../../data/components'
-
-export const Components = {
-  props: {
-    maxWidth: '100%',
-    width: '100%',
-    flexFlow: 'row',
-    flow: 'row',
-    gap: 'B1',
-    padding: 'A'
-  },
-
-  state: {
-    filters: {},
-    view: 'grid'
-  },
-
-  sidebar,
-  grid,
-
-  on: {
-    init: (el, s) => {
-      var route = splitRoute()[1]
-      var content = CATEGORIES.filter(v => v.key === route)[0]
-      s.category = content ? content.key : ''
-    }
-  }
-}

package/src/pages/Components/sidebar.js

@@ -1,28 +0,0 @@
-'use strict'
-
-import {
-  FilterCategories,
-  FilterInteractivity,
-  FilterDataTypes
-} from '@symbo.ls/components'
-import { CATEGORIES } from '@symbo.ls/temp-db/symbols/categories'
-
-export default {
-  sticky: {
-    props: {
-      position: 'sticky',
-      top: 'D2',
-      padding: '- - - X2'
-    },
-
-    categories: {
-      extend: FilterCategories,
-      header: {},
-      nav: {
-        ...CATEGORIES
-      }
-    },
-    FilterInteractivity,
-    FilterDataTypes
-  }
-}

package/src/pages/Components/style.js

@@ -1,16 +0,0 @@
-'use strict'
-
-export const gridStyle = {
-  gridTemplateColumns: 'repeat(12, 1fr)',
-  gridAutoFlow: 'dense',
-  justifyItems: 'stretch',
-  boxSizing: 'border-box',
-  marginBottom: '2em',
-  gridAutoColumns: 'auto',
-  gridAutoRows: 'auto'
-}
-
-export const rowStyle = {
-  display: 'flex',
-  flexFlow: 'row wrap'
-}

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: 'C1 -Z1',
-    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' // eslint-disable-line no-unused-vars
-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,86 +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: {
-      // display: 'inline-flex',
-      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 -g' }
-        }
-      }
-    },
-
-    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: {
-        note: { text: 'Create .symbolsrc.js file in your project and insert your Symbols key' },
-        props: ({ state }) => ({
-          code: {
-            text: `{ "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,118 +0,0 @@
-'use strict'
-
-export default ({ parent: { state: { __system } } }) => ({
-  data: [{
-    icon: 'colorOutline',
-    iconTheme: 'theme',
-    title: 'colors',
-    paragraph: 'Colorize styles manually',
-    iconBackground: 'red',
-    properties: [{
-      property: 'Colors',
-      value: Object.keys(__system.COLOR).length
-    }, {
-      property: 'Themes',
-      value: Object.keys(__system.THEME).length
-    }]
-  }, {
-    icon: 'typographyOutline',
-    iconTheme: 'typography',
-    title: 'typography',
-    paragraph: 'style a typed material',
-    properties: [{
-      property: 'Base size',
-      value: __system.TYPOGRAPHY.base + 'px'
-    }, {
-      property: 'Ratio',
-      value: __system.TYPOGRAPHY.ratio
-    }, {
-      property: 'Styles',
-      value: __system.TYPOGRAPHY.styles && Object.keys(__system.TYPOGRAPHY.styles).length
-    }, {
-      property: 'Fonts',
-      value: Object.keys(__system.FONT).length
-    }, {
-      property: 'Families',
-      value: Object.keys(__system.FONT_FAMILY).length - 1
-    }]
-  }, {
-    icon: 'spaceOutline',
-    iconTheme: 'space',
-    title: 'Spacing',
-    paragraph: 'Manage properties of a size',
-    properties: [{
-      property: 'Ratio',
-      value: __system.SPACING.ratio
-    }, {
-      property: 'Templates',
-      value: 'TBA'
-    }]
-  }, {
-    icon: 'shape',
-    iconTheme: 'shape',
-    title: 'shapes',
-    paragraph: 'Design an outline to a chosen component',
-    properties: [{
-      property: 'HTML',
-      value: '32'
-    }, {
-      property: 'SVG',
-      value: 'TBA'
-    }]
-  }, {
-    icon: 'iconsOutline',
-    iconTheme: 'color',
-    title: 'Icons',
-    paragraph: 'Label a role of subject with glyphs',
-    properties: [{
-      property: 'All',
-      value: Object.keys(__system.ICONS).length
-    }, {
-      property: 'Linear',
-      value: Object.keys(__system.ICONS).filter(v => v.includes('Outline')).length
-    }, {
-      property: 'Colored',
-      value: Object.keys(__system.ICONS).filter(v => v.includes('Colored')).length
-    }]
-  }, {
-    icon: 'clock',
-    iconTheme: 'icons',
-    title: 'Timing',
-    paragraph: 'Tokens for transitions and animations',
-    properties: [{
-      property: 'Timing base',
-      value: __system.TIMING.base + 'ms'
-    }, {
-      property: 'Ratio',
-      value: __system.TIMING.ratio
-    }, {
-      property: 'Transitions',
-      value: 'TBA'
-    }, {
-      property: 'Animations',
-      value: 'TBA'
-    }]
-  }, {
-    icon: 'deviceMobileOutline',
-    title: 'Breakpoints',
-    paragraph: 'Label a role of subject with glyphs',
-    properties: [{
-      property: 'Breakpoints',
-      value: Object.keys(__system.MEDIA).length
-    }, {
-      property: 'Screens',
-      value: Object.keys(__system.DEVICES).length
-    }]
-  }, {
-    icon: 'threeDots',
-    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,40 +0,0 @@
-'use strict'
-
-import { ClickableItem } from '@symbo.ls/components'
-import { DesignComponent } from '../../../components'
-
-import state from './state'
-
-export const content = {
-  props: {
-    margin: '- -Z',
-    columns: '15rem',
-    gap: 'B1'
-  },
-
-  childExtend: {
-    extend: [ClickableItem, DesignComponent],
-    props: {
-      maxWidth: 'none',
-      width: '100%',
-      margin: '- - B1'
-    }
-  },
-
-  $setStateCollection: ({ state }) => state.data
-}
-
-export default {
-  props: {
-    margin: '- - C1'
-  },
-
-  state,
-
-  SectionHeader: {
-    title: 'Design System takeaways',
-    p: 'Your tokens in the system at a glance'
-  },
-
-  content
-}