@symbo.ls/preview 0.0.9

package/src/pages/ColorEditor/style.js

@@ -0,0 +1,49 @@
+'use strict'
+
+export const styleLabel = {
+  caption: { whiteSpace: 'nowrap', opacity: 0.65 },
+  span: {
+    display: 'block',
+    whiteSpace: 'nowrap',
+    minWidth: `1.618em`,
+    maxWidth: 'fit-content',
+    borderBottom: '1px dashed rgba(255, 255, 255, .35)',
+    outline: 'none'
+  }
+}
+
+export const styleTool = {
+  caption: { opacity: '.65' },
+  '> div span': { opacity: '.5' },
+  '> div > div': { gap: '1px' }
+}
+export const styleColorTones = {
+  width: '22em',
+  display: 'flex',
+  flexDirection: 'column',
+  '> div > button': {
+    padding: `${123 / 16}em`,
+    position: 'absolute'
+  },
+  caption: {
+    textTransform: 'capitalize',
+    opacity: '.65',
+    marginBottom: `${10 / 13}em`
+  }
+}
+
+export default {
+  display: 'flex',
+  flexFlow: 'column',
+  'header > nav a:hover': {
+    background: 'rgba(255, 255, 255, .08)',
+    opacity: 1,
+    color: '#EDCB38'
+  },
+
+  '> section': {
+    display: 'flex',
+    gap: '6.6em',
+    border: '2px solid red'
+  }
+}

package/src/pages/ColorEditor/themingTools.js

@@ -0,0 +1,107 @@
+'use strict'
+
+import { Grid, ColorSwitcher, CommonField, SelectTool, ButtonSet, ClickableItem } from '@symbo.ls/components'
+
+
+ColorSwitcher.props = (el, s) => {
+  if (!s.value) return
+  const value = s.value[el.props.type] || s.value[el.props.type + 'Color']
+  const key = filterByValue(value).key || value
+  return {
+    key: key,
+    value: value
+  }
+}
+
+export const themingTools = {
+  extend: Grid,
+  style: {
+    width: 'fit-content'
+  },
+  props: {
+    columns: 'repeat(4, 1fr)',
+    columnGap: 'C',
+    rowGap: 'C'
+  },
+  childExtend: {
+    extend: CommonField,
+    props: { padding: 0 },
+    caption: { text: el => el.parent.props.caption },
+    element: {}
+  },
+  ...[{
+    props: { caption: 'Background color' },
+    caption: {},
+    element: {
+      extend: ColorSwitcher,
+      props: { type: 'background' },
+
+      title: {},
+      buttons: { ...[
+        { props: { icon: 'plus' } },
+        { props: { icon: 'arrowAngleMirroringVertical', theme: 'transparent' } }
+      ] }
+    }
+  }, {
+    props: { caption: 'Text color' },
+    caption: {},
+    element: {
+      extend: ColorSwitcher,
+      props: { type: 'color' },
+
+      title: {},
+      buttons: { ...[
+        { props: { icon: 'colorInvert' } },
+        { props: { icon: 'arrowAngleMirroringVertical', theme: 'transparent' } }
+      ] }
+    }
+  }, {
+    props: { caption: 'Border color' },
+    caption: {},
+    element: {
+      extend: ColorSwitcher,
+      props: { type: 'border' },
+
+      title: {},
+      buttons: { ...[
+        { props: { icon: 'colorInvert' } },
+        { props: { icon: 'arrowAngleMirroringVertical', theme: 'transparent' } }
+      ] }
+    }
+  }, {
+    props: { caption: 'Use as' },
+    caption: {},
+    element: {
+      extend: SelectTool,
+      title: { props: { text: 'Background color' } },
+      buttons: { ...[{ props: { icon: 'arrowAngleMirroringVertical', theme: 'transparent' } }] }
+    }
+  },
+
+  {
+    props: { caption: 'Border' },
+    caption: {},
+    element: {
+      extend: ButtonSet,
+      childExtend: { extend: [ClickableItem] },
+      props: { gap: 'Z' },
+      ...[
+        { props: { icon: 'colorsColored' } },
+        { props: { icon: 'borderOpacity' } },
+        { props: { icon: 'borderWeight' } },
+        { props: { icon: 'borderProps' } }
+      ]
+    }
+  },
+
+  {
+    props: { caption: 'Shadow' },
+    caption: {},
+    element: {
+      extend: ButtonSet,
+      childExtend: { extend: [ClickableItem] },
+      ...[{ props: { icon: 'plus' } }]
+    }
+  }
+  ]
+}

package/src/pages/Components/grid.js

@@ -0,0 +1,94 @@
+'use strict'
+
+import {
+  ComponentTemplate,
+  Grid,
+  SectionHeader
+} from '@symbo.ls/components'
+import { LIBRARY } from '../../../.symbols'
+import { gridStyle, rowStyle } from './style'
+
+export default {
+  props: {
+    padding: '0 Y2',
+    flex: 1
+  },
+
+  header: {
+    extend: SectionHeader,
+
+    props: { margin: '0 0 X2' },
+
+    heading: {
+      title: null,
+      p: 'All Categories'
+    },
+
+    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' })
+            // debugger
+          }
+        }
+      }, {
+        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,
+    $setCollection: ({ state }) => LIBRARY.filter(v => {
+      if (!state.category) return true
+      return state.category === v.category.key
+    })
+  }
+}

package/src/pages/Components/index.js

@@ -0,0 +1,40 @@
+'use strict'
+
+import PageExtend from '../PageExtend'
+import { splitRoute } from 'domql/packages/router'
+
+import sidebar from './sidebar'
+import grid from './grid'
+
+import { CATEGORIES } from '../../../.symbols/categories'
+// import FAVORITES from '../../data/favorites'
+// import COMPONENTS from '../../data/components'
+
+export const Components = {
+  extend: PageExtend,
+
+  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,23 @@
+'use strict'
+
+import { FilterCategories, FilterInteractivity, FilterDataTypes } from '@symbo.ls/components'
+import { CATEGORIES } from '../../../.symbols/categories'
+
+export default {
+  sticky: {
+    props: {
+      position: 'sticky',
+      top: 'C2'
+    },
+
+    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/index.js

@@ -0,0 +1,106 @@
+'use strict'
+
+import { Flex, Link, SquareButton } from '@symbo.ls/components'
+import { PageExtend,
+  Color,
+  ColorEditor,
+  Shapes,
+  Spaces,
+  Icons,
+  Typography
+} from '..'
+
+const NAV = [{
+  props: {
+    icon: 'typography outline',
+    href: '/typography'
+  }
+}, {
+  props: {
+    icon: 'color outline colored',
+    href: '/colors'
+  }
+}, {
+  props: {
+    icon: 'space outline',
+    href: '/space'
+  }
+}, {
+  props: {
+    icon: 'shape outline colored',
+    href: '/shape'
+  }
+}, {
+  props: {
+    icon: 'icons outline colored',
+    href: '/icons'
+  }
+}, {
+  props: {
+    icon: 'device mobile half fill',
+    href: '/responsive'
+  }
+}, {
+  props: {
+    icon: 'clock colored',
+    href: '/timing'
+  }
+}, {
+  props: {
+    icon: 'sequence colored',
+    href: '/sequence'
+  }
+}]
+
+export const DesignSystem = {
+  extend: PageExtend,
+
+  props: {
+    maxWidth: '100%',
+    width: '100%',
+    flow: 'row',
+    gap: 'B1',
+    padding: 'D2 A B1'
+  },
+
+  define: { routes: param => param },
+  routes: {
+    '/colors': Color,
+    '/theme': ColorEditor,
+    // '/theme': Theme,
+    '/typography': Typography,
+    // '/font': Font,
+    '/space': Spaces,
+    // '/sequence': Sequence,
+    '/shape': Shapes,
+    // '/timing': Timing,
+    '/icons': Icons
+    // '/media-query': MediaQuery
+  },
+
+  sidebar: {
+    tag: 'nav',
+    extend: Flex,
+    childExtend: [Link, SquareButton],
+
+    props: {
+      gap: 'B1',
+      flow: 'column',
+      background: 'transparent',
+      color: 'gray7',
+      fontSize: 'A2'
+    },
+
+    ...NAV
+  },
+
+  main: {
+    tag: 'section',
+    extend: PageExtend,
+
+    props: {
+      flex: 1,
+      padding: '0 C1 B1'
+    }
+  }
+}

package/src/pages/DesignSystem/style.js

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

package/src/pages/Editor/index.js

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

package/src/pages/Editor/layers.js

@@ -0,0 +1,126 @@
+' use strict'
+
+import { Shape, Block, Flex, Text, Icon } from '@symbo.ls/components'
+
+const objectLayer = {
+  extend: [Block, Text, Shape],
+  props: {
+    round: 'A',
+    padding: '0 Y Y Y'
+  },
+
+  h4: {
+    extend: [Block, Text],
+    props: {
+      text: 'Button',
+      padding: 'A 0 A1 A1'
+    },
+    style: { margin: 0, fontWeight: 'normal' }
+  },
+
+  caption: {
+    extend: [Block, Text],
+    props: {
+      text: 'IconText',
+      padding: '0 0 A B1'
+    }
+  },
+
+  objectComponent: {
+    extend: [Block, Flex],
+    style: { flexDirection: 'column' },
+    childExtend: {
+      extend: [Block, Flex, Text, Shape],
+      props: {
+        padding: 'Z2 0 Z2 B1',
+        round: 'A'
+      },
+      style: {
+        alignItems: 'center'
+      },
+      icon: { extend: Icon },
+      caption: {
+        extend: [Block, Text],
+        props: { padding: '0 X2 0 Y' }
+      },
+      span: {
+        extend: Text,
+        style: { opacity: '.35' }
+      }
+    },
+    ...[
+      {
+        icon: {
+          name: 'shapes',
+          style: { color: '#7345AF' }
+        },
+        caption: { props: { text: 'Icon' } },
+        span: { props: { text: 'moon' } }
+      },
+
+      {
+        icon: {
+          name: 'typography',
+          style: { color: '#35C6E4' }
+        },
+        caption: { props: { text: 'Text' } },
+        span: { props: { text: 'Go Dark' } }
+      }
+    ]
+  }
+}
+
+export default {
+  tag: 'aside',
+  extend: [Block, Text],
+  props: { size: 'Y' },
+
+  caption: {
+    extend: [Block, Text],
+    props: {
+      text: 'Layer'
+    },
+    style: {
+      opacity: '.35',
+      display: 'flex',
+      alignItems: 'center',
+      height: '32.5px',
+      marginTop: '12px',
+      marginBottom: '4px',
+      marginLeft: '6px'
+    }
+  },
+
+  layer: {
+    extend: objectLayer,
+    props: {
+      theme: 'buttonPrimary'
+    },
+    style: { background: 'rgba(255, 255, 255, .05)' },
+    h4: {},
+    caption: {},
+    objectComponent: {},
+
+    layer2: {
+      extend: objectLayer,
+      style: {
+        margin: '0 auto',
+        background: 'rgba(255, 255, 255, .04)',
+        cursor: 'pointer',
+        '&:hover': {
+          border: '1px solid #3477F4',
+          color: 'white'
+        }
+      },
+
+      h4: {},
+      caption: { },
+
+      objectComponent: {
+        style: {
+          '> div:hover': { border: '1px solid #3477F4' }
+        }
+      }
+    }
+  }
+}

package/src/pages/Editor/scene.js

@@ -0,0 +1,97 @@
+'use strict'
+
+import { Block, Flex, Text, KangorooButton, Breadcrumb, SceneToolBar, Scene } from '@symbo.ls/components'
+
+const header = {
+  extend: [Flex, Block],
+  style: {
+    justifyContent: 'space-between',
+    marginTop: '12px',
+    marginBottom: '4px'
+  },
+  nav: {
+    extend: [Breadcrumb, Text],
+    props: { size: 'A' },
+    all: {
+      props: {
+        href: '/components'
+      },
+      text: 'Buttons'
+    },
+
+    title: {
+      text: 'kangoroo'
+    }
+  },
+  tool: {
+    SceneToolBar
+  }
+}
+
+const buttonThemeSwitcher = {
+  extend: KangorooButton,
+
+  props: {
+    round: 'C',
+    theme: 'lightDark',
+    size: 'A',
+    padding: 'X1 Y X1 A1',
+    gap: 'Z1',
+    depth: 16,
+
+    light: {
+      icon: 'sun',
+      text: 'Light Mode'
+    },
+
+    dark: {
+      theme: ['lightDark', 'inverse'],
+      round: 'C',
+      icon: 'moon',
+      padding: 'Z Z1',
+      text: 'Dark Mode'
+    }
+  },
+
+  iconText: {
+    props: el => el.parent.props.light
+  },
+
+  child: {
+    props: el => el.parent.props.dark
+  },
+
+  style: {
+    fontWeight: 'bold',
+
+    svg: {
+      color: '#EDCB38',
+      marginRight: `${4 / 16}em`
+    },
+
+    span: {
+      maxHeight: '32px',
+      padding: `${9 / 14}em ${16 / 14}em`,
+      marginLeft: `${16 / 14}em`
+    }
+  }
+
+}
+export default {
+  extend: Flex,
+  style: {
+    flex: 1,
+    flexDirection: 'column'
+  },
+  header: { extend: header },
+  scene: {
+    extend: Scene,
+    style: {
+      flex: 1,
+      '> div': { height: '100%' }
+    },
+    scene: {
+      buttonThemeSwitcher
+    }
+  }
+}