@symbo.ls/preview 2.0.7 → 2.6.0

package/src/pages/Color/themes.js

@@ -1,130 +1,36 @@
 'use strict'
 
-import { Block, COLOR, IconText, Link, opacify, Shape, Text, Flex, SectionHeader } from '@symbo.ls/all'
+import { ThemeTemplate, SectionHeader, Grid } from '@symbo.ls/components'
 
-const style = {
-  width: '100%',
-  maxWidth: '25%',
-  flex: '.25 .3333 25%',
-  cursor: 'pointer',
-  color: 'white',
-  textDecoration: 'none',
-  boxSizing: 'border-box',
-  caption: {
-    marginTop: `${12 / 13}em`
-  },
-
-  '> *': {
-    transition: '350ms',
-    transitionProperty: 'opacity, transform',
-    opacity: 0.35
-  },
-
-  '&:hover > *': {
-    opacity: 1,
-    transform: 'scale(1.015)'
-  }
-}
-
-export const ThemeTemplate = {
-  proto: [Link, Block],
-  style,
-
-  props: (el) => ({
-    href: `/theme/${el.key}`,
-    padding: 'A Z1'
-  }),
-
-  theme: {
-    colors: {
-      proto: [Block, Text, Shape, Flex],
-      props: {
-        round: 'Z1'
-      },
-
-      style: {
-        boxShadow: `${COLOR.blue && opacify(COLOR.blue.value, 0.2)} 0 2px 35px`,
-        overflow: 'hidden',
-        div: {
-          flex: 1,
-          display: 'flex',
-          alignItems: 'center'
-        }
-      },
-      _icon: '',
-      sun: {
-        proto: [Shape, Block, IconText, Flex],
-        props: {
-          icon: 'sun',
-          size: 'Z',
-          padding: 'Z1 0 Z1 A',
-          round: 'Z1 0 0 Z1'
-        },
-        style: (element, state) => ({
-          background: state.background,
-          color: state.color,
-          borderBottomLeftRadius: '12px',
-          '&:only-child': {
-            borderRadius: 12
-          }
-        })
-      },
-      moon: {
-        if: (el, state) => state.themes,
-        proto: [Shape, Block, IconText, Flex],
-        props: {
-          theme: 'secondary',
-          padding: 'Z1 0 Z1 A',
-          icon: 'moon',
-          round: '0 Z1 Z1 0'
-        },
-        style: (element, state) => ({
-          background: '', // state.themes.dark.backgroundColor,
-          color: '' // state.themes.dark.color
-        })
-      }
-    }
-  },
-  caption: {
-    proto: [Block, Text],
-    props: {
-      size: 'Y',
-      padding: 'Z 0 0 0'
-    },
-    text: (el, state) => el.parent.key
-  }
+const mapThemes = (el, s) => {
+  if (!s.__system) return
+  const { THEME } = s.__system
+  const themeKeys = Object.keys(THEME)
+  return themeKeys.map(v => ({ ...THEME[v], key: v }))
 }
 
 export default {
-  tag: 'section',
   header: {
-    proto: SectionHeader,
-    props: { padding: 'C 0 0 0' },
-    heading: {
-      caption: 'Theme',
-      p: { text: 'Themes are used to prepare color setting abstractly and apply it to any component' }
+    extend: SectionHeader,
+    state: {
+      title: 'Themes',
+      p: 'Themes are used to prepare color setting abstractly and apply it to any component',
+      nav: [{
+        icon: 'plus',
+        href: '/colors/add-color'
+      }]
     }
   },
-  colors: {
-    style: {
-      display: 'flex',
-      flexWrap: 'wrap',
-      margin: '0 -16px'
-    },
 
-    content: (el, s) => {
-      if (!el.__root.state.CONFIG) return
-      const { THEME } = el.__root.state.CONFIG
-
-      const Themes = {}
-      Object.keys(THEME).map(v => (Themes[v] = { state: THEME[v].value }))
-
-      return {
-        childProto: ThemeTemplate,
-        tag: 'fragment',
+  content: {
+    extend: Grid,
+    props: {
+      columns: 'repeat(5, 1fr)',
+      gap: 'C2',
+      margin: '0 -Z'
+    },
 
-        ...Themes
-      }
-    }
+    childExtend: ThemeTemplate,
+    $setStateCollection: (el, s) => mapThemes(el, s)
   }
 }

package/src/pages/Components/grid.js

@@ -0,0 +1,99 @@
+'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

@@ -0,0 +1,37 @@
+'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

@@ -0,0 +1,28 @@
+'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

@@ -0,0 +1,16 @@
+'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

@@ -0,0 +1,38 @@
+'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

@@ -0,0 +1,124 @@
+'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

@@ -0,0 +1,22 @@
+'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

@@ -0,0 +1,86 @@
+'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' }
+        }
+      }
+    }
+  }
+}