@symbo.ls/preview 0.0.44 → 0.0.45

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "0.0.44",
+  "version": "0.0.45",
   "repository": "https://github.com/rackai/editor",
   "main": "src/index.js",
   "scripts": {

package/src/components/Header.js

@@ -7,7 +7,7 @@ export const Header = {
     position: 'sticky',
     width: '100%',
     top: 0,
-    zIndex: 1
+    zIndex: 99999
   },
 
   define: { isFloating: param => param },

package/src/pages/DesignSystem/Main.js

@@ -0,0 +1,77 @@
+'use strict'
+
+import { Flex, Link, ArticleMedium } from '@symbo.ls/components'
+
+const Banner = {
+  extend: [Link, Flex, ArticleMedium],
+  props: ({ state }) => ({
+    flow: 'column',
+    round: 'A',
+    flex: '1',
+    height: 'F',
+    padding: 'A2 B',
+    backgroundImage: `url(${state.background})`,
+    backgroundSize: 'cover',
+    href: state.href,
+    gap: '0',
+
+    title: { margin: 'auto 0 0', text: state.title },
+    p: { text: state.p }
+  })
+}
+
+const banners = {
+  extend: Flex,
+  props: {
+    align: 'stretch space-between',
+    margin: 'C1 -Z2',
+    gap: 'B1'
+  },
+
+  childExtend: Banner,
+
+  $setStateCollection: ({ state }) => [{
+    title: 'Setting up a dark theme',
+    p: '5 mins tutorial',
+    background: 'https://p194.p3.n0.cdn.getcloudapp.com/items/eDu7le4P/ef9249a0-c522-49a7-8a0e-d7152b2e73a1.png?v=c4c8cd49408f26a6046b11f35d7b0656',
+    href: ''
+  }, {
+    title: 'Learn typography scaling',
+    p: '5 mins tutorial',
+    background: '',
+    href: ''
+  }]
+}
+
+const summary = {
+  extend: Flex,
+  props: {
+    align: 'stretch space-between',
+    margin: 'C1 -Z2',
+    gap: 'B1'
+  },
+
+  childExtend: Banner,
+
+  $setStateCollection: ({ state }) => [{
+    title: 'Setting up a dark theme',
+    p: '5 mins tutorial',
+    background: 'https://p194.p3.n0.cdn.getcloudapp.com/items/eDu7le4P/ef9249a0-c522-49a7-8a0e-d7152b2e73a1.png?v=c4c8cd49408f26a6046b11f35d7b0656',
+    href: ''
+  }, {
+    title: 'Learn typography scaling',
+    p: '5 mins tutorial',
+    background: '',
+    href: ''
+  }]
+}
+
+export const Main = {
+  ArticleBig: {
+    title: { text: 'Design System' },
+    p: { text: 'Create your Design System guidelines' }
+  },
+
+  banners,
+  summary
+}

package/src/pages/DesignSystem/designElements.js

@@ -0,0 +1,121 @@
+
+import { DesignElement } from '@symbo.ls/components'
+
+export default {
+  props: {
+    flexFlow: 'row wrap',
+    flexAlign: '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/index.js

@@ -2,6 +2,7 @@
 
 import { router } from '@domql/router'
 import { ClickableItem, Flex, Link, ResponsivePreview, SquareButton, TooltipParent } from '@symbo.ls/components'
+import { Main } from './Main'
 import { PageExtend,
   Color,
   Theme,
@@ -96,7 +97,7 @@ export const DesignSystem = {
 
   define: { routes: param => param },
   routes: {
-    '/design-system': Color,
+    '/design-system': Main,
     '/colors': Color,
     '/theme': Theme,
     '/typography': Typography,

package/src/pages/Icons/index.js

@@ -11,6 +11,7 @@ import * as INTERACTIVE from '@symbo.ls/icons/src/interactive'
 import * as LOGOS from '@symbo.ls/icons/src/logos'
 import * as SIGNS from '@symbo.ls/icons/src/signs'
 import * as STYLE from '@symbo.ls/icons/src/style'
+import * as KEYBOARD from '@symbo.ls/icons/src/keyboard'
 import * as SVG from '@symbo.ls/icons/src/svg'
 import * as TECH from '@symbo.ls/icons/src/tech'
 import * as TEXT from '@symbo.ls/icons/src/text'
@@ -93,6 +94,9 @@ const ICON_GROUPS = [{
 }, {
   title: 'Style',
   list: Object.keys(STYLE).map(name => ({ name }))
+}, {
+  title: 'Keys',
+  list: Object.keys(KEYBOARD).map(name => ({ name }))
 }, {
   title: 'Tech',
   list: Object.keys(TECH).map(name => ({ name }))

package/src/pages/Spaces/Preview.js

@@ -1,20 +1,15 @@
 'use strict'
 
-import { Grid, Scene } from '@symbo.ls/components'
+import { Grid, Scene, Flex } from '@symbo.ls/components'
 
-const returnScale = (state, key) => {
+const returnScale = (state, key, fallback) => {
   const { scales } = state
-  return (scales[state[key]] || 0) + 'em'
+  return (scales[state.props[key] || state.props[fallback]] || 0) + 'em'
 }
 
 export const Preview = {
   extend: Scene,
 
-  props: {
-    margin: '0 -Z1',
-    maxHeight: '25vh'
-  },
-
   scene: {
     boxModel: {
       extend: Grid,
@@ -31,28 +26,84 @@ export const Preview = {
       },
 
       ...[
-        ...['', { text: (el, s) => s.paddingTop || '', style: { gridArea: 't' } }, ''],
+        ...['', { text: (el, s) => s.props.paddingTop || '', style: { gridArea: 't' } }, ''],
         ...[
-          { text: (el, s) => s.paddingLeft || '', style: { gridArea: 'l' } },
+          { text: (el, s) => s.props.paddingLeft || '', style: { gridArea: 'l' } },
           {
             props: ({ state }) => ({
-              fontSize: `${state.base}px`,
-              borderRadius: state['borderRadius'],
-              lineHeight: 1,
               gridArea: 'content',
               borderStyle: 'solid',
-              theme: 'quaternary',
-              padding: 'X2',
-              borderColor: 'grassgreen 0.25',
+              borderColor: 'margin 0.15',
+
               borderWidth: [
-                returnScale(state, 'paddingTop'),
-                returnScale(state, 'paddingRight'),
-                returnScale(state, 'paddingBottom'),
-                returnScale(state, 'paddingLeft')
-              ],
-              style: { whiteSpace: 'nowrap' }
+                returnScale(state, 'marginBlockStart', 'margin'),
+                returnScale(state, 'marginInlineEnd', 'margin'),
+                returnScale(state, 'marginBlockEnd', 'margin'),
+                returnScale(state, 'marginInlineStart', 'margin')
+              ]
             }),
-            text: (el, s) => `Base ${s.base}`
+            border: {
+              props: ({ state }) => ({
+                gridArea: 'content',
+                borderStyle: 'solid',
+                borderColor: 'border 0.65',
+                overflow: 'hidden',
+
+                round: [
+                  returnScale(state, 'borderRadiusEndStart', 'borderRadius'),
+                  returnScale(state, 'borderRadiusStartEnd', 'borderRadius'),
+                  returnScale(state, 'borderRadiusEndEnd', 'borderRadius'),
+                  returnScale(state, 'borderRadiusStartStart', 'borderRadius')
+                ].join(' '),
+
+                borderWidth: [
+                  returnScale(state, 'borderBlockStartWidth', 'borderWidth'),
+                  returnScale(state, 'borderInlineEndWidth', 'borderWidth'),
+                  returnScale(state, 'borderBlockEndWidth', 'borderWidth'),
+                  returnScale(state, 'borderInlineStartWidth', 'borderWidth')
+                ]
+              }),
+              padding: {
+                extend: Flex,
+                props: ({ state }) => ({
+                  fontSize: `${state.base}px`,
+                  lineHeight: 1,
+                  borderStyle: 'solid',
+                  theme: 'quaternary',
+                  padding: 'X2',
+                  borderColor: 'grassgreen 0.25',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+
+                  width: state.props['width'],
+                  height: state.props['height'],
+
+                  minWidth: state.props['minWidth'],
+                  maxWidth: state.props['maxWidth'],
+
+                  minHeight: state.props['minHeight'],
+                  maxHeight: state.props['maxHeight'],
+
+                  borderWidth: [
+                    returnScale(state, 'paddingBlockStart', 'padding'),
+                    returnScale(state, 'paddingInlineEnd', 'padding'),
+                    returnScale(state, 'paddingBlockEnd', 'padding'),
+                    returnScale(state, 'paddingInlineStart', 'padding')
+                  ],
+                  style: { whiteSpace: 'nowrap' }
+                }),
+                span: (el, s) => `Base `,
+                gap: {
+                  props: ({ state }) => ({
+                    background: 'gap .15',
+                    margin: '0 .1em',
+                    height: '1em',
+                    minWidth: state.props['gap']
+                  })
+                },
+                base: (el, s) => s.base
+              }
+            }
           }, {
             text: (el, s) => s.paddingRight || '', style: { gridArea: 'r' }
           }],

package/src/pages/Spaces/SpacingScale.js

@@ -22,7 +22,7 @@ export const SpacingScale = {
     position: 'sticky',
     top: 'D',
     background: 'black .5',
-    zIndex: '2',
+    zIndex: '9999',
     margin: '-B2 -B -B',
     padding: 'B2 B B',
     style: {
@@ -42,14 +42,39 @@ export const SpacingScale = {
     },
 
     table: { extend: Table },
+
     preview: {
-      extend: Preview,
+      extend: Flex,
       props: {
         position: 'sticky',
+        margin: '0 -Z1',
+        maxHeight: '25vh',
         bottom: 'Z',
+        zIndex: '9999',
+        gap: 'A',
+
+        scene: { flex: 1 },
+
         style: {
           backdropFilter: 'blur(15px)'
         }
+      },
+      scene: {
+        extend: Preview
+      },
+      code: {
+        extend: 'Code',
+        props: ({ state }) => ({
+          hide: Object.keys(state.props).length === 0,
+          flex: '0 0 360px',
+          margin: '0',
+          code: { margin: '0' },
+          buttons: { marginInline: 'X2' }
+        }),
+        title: null,
+        code: {
+          text: ({ state }) => JSON.stringify(state.props, null, 2)
+        }
       }
     }
   }

package/src/pages/Spaces/Table.js

@@ -1,62 +1,13 @@
 'use strict'
 
 import {
-  ClickableItem,
   Grid,
   Pseudo,
-  WiderButton,
   mapSequence,
   sortSequence
 } from '@symbo.ls/components'
 
-const Buttons = {
-  childExtend: {
-    extend: [ClickableItem, WiderButton],
-    props: ({ key, state, parent }) => ({
-      isActive: parent.parent.parent.state[key] === state.key,
-      padding: 'Z',
-      icon: key,
-      theme: null,
-      '@dark': {
-        background: 'gray1',
-        color: 'gray5'
-      },
-      '@light': {
-        background: 'white .5',
-        color: 'gray7'
-      },
-      ':hover': {
-        theme: 'quaternary'
-      },
-      '.isActive': {
-        color: 'blue',
-        ':hover': {
-          color: 'blue'
-        }
-      }
-    }),
-
-    attr: { title: el => el.key },
-
-    on: {
-      click: (ev, { key, state, parent }) => {
-        const parentState = parent.parent.parent.state
-        const active = parentState[key] === state.key
-        if (active) {
-          delete parentState[key] && parentState.update()
-        } else {
-          parentState.update({ [key]: state.key })
-        }
-      }
-    }
-  },
-
-  paddingTop: {},
-  paddingRight: {},
-  paddingBottom: {},
-  paddingLeft: {},
-  borderRadius: {}
-}
+import buttons from './buttons'
 
 const Cell = {
   tag: 'div',
@@ -70,17 +21,15 @@ const Row = {
   key: state => state.key,
 
   props: ({ state }) => ({
-    columns: '10ch 14ch 13ch 10ch 18em 1fr',
+    columns: '10ch 14ch 13ch 10ch 21em 1fr',
     alignItems: 'center',
     isBase: state.index === 0,
-    isNotActive: (state.key && state.key.length) !== 1,
+    active: (state.key && state.key.length) === 1,
 
     margin: '0 -A',
     padding: '0 B',
+    position: 'relative',
 
-    '.isNotActive': {
-      opacity: 0.8
-    },
     '.isBase': {
       opacity: 1,
       background: 'gray1 .5'
@@ -92,15 +41,14 @@ const Row = {
 
     i: {
       text: state.key,
-      isActive: (state.key && state.key.length) === 1,
-      isNotActive: (state.key && state.key.length) !== 1,
+      active: (state.key && state.key.length) === 1,
 
-      '.isActive': {
+      '.active': {
         fontWeight: '600',
         '@dark': { color: 'gray9' },
         '@light': { color: 'gray3' }
       },
-      '.isNotActive': {
+      '!active': {
         fontWeight: '400',
         '@dark': { color: 'gray6' },
         '@light': { color: 'gray7' }
@@ -147,7 +95,7 @@ const Row = {
   em: {},
   decimal: {},
   px: {},
-  buttons: Buttons,
+  buttons,
 
   graph: { line: {} }
 }

package/src/pages/Spaces/buttons.js

@@ -0,0 +1,241 @@
+'use strict'
+
+import {
+  ClickableItem,
+  WiderButton,
+  DropdownParent,
+  Dropdown,
+  GridInDropdown
+} from '@symbo.ls/components'
+
+const ChoosableButton = {
+  extend: [ClickableItem],
+
+  props: ({ key, state, parent }) => ({
+    padding: 'Z',
+    icon: key,
+    theme: null,
+    '@dark': {
+      background: 'gray1',
+      color: 'gray5'
+    },
+    '@light': {
+      background: 'white .5',
+      color: 'gray7'
+    },
+    ':hover': {
+      theme: 'quaternary'
+    },
+    '.active': {
+      theme: null
+    }
+  })
+
+}
+
+const jointPropDirection = (parentKey, key) => {
+  return parentKey + key.slice(0, 1).toUpperCase() + key.slice(1)
+}
+
+const diffPropPosition = (parentKey, key) => {
+  if (parentKey.includes('borderWidth')) return key.split('Width')[0]
+  return key
+}
+
+const diffPropValue = (parentKey, key) => {
+  if (parentKey.includes('borderWidth')) parentKey = 'border'
+  return jointPropDirection(parentKey, key)
+}
+
+const diffIconTypes = (parentKey, key) => {
+  if (parentKey.includes('borderWidth')) key = key.split('Width')[0]
+  if (parentKey.includes('margin') || parentKey === 'borderWidth') parentKey = 'padding'
+  return jointPropDirection(parentKey, key)
+}
+
+const BUTTONS = {
+  margin: {
+    blockStart: {},
+    inlineEnd: {},
+    blockEnd: {},
+    inlineStart: {}
+  },
+  height: {
+    minWidth: {},
+    maxWidth: {}
+  },
+  width: {
+    minWidth: {},
+    maxWidth: {}
+  },
+  borderWidth: {
+    blockStartWidth: {},
+    inlineEndWidth: {},
+    blockEndWidth: {},
+    inlineStartWidth: {}
+  },
+  padding: {
+    blockStart: {},
+    inlineEnd: {},
+    blockEnd: {},
+    inlineStart: {}
+  },
+  gap: {
+    Horizontal: {},
+    Vertical: {}
+  },
+  borderRadius: {
+    endStart: {},
+    startEnd: {},
+    endEnd: {},
+    startStart: {}
+  }
+}
+
+export default {
+  childExtend: {
+    extend: [ChoosableButton, DropdownParent, WiderButton],
+
+    props: ({ key, state, parent }) => ({
+      active: state.parent.parent.props[state.value] === state.parent.key,
+      icon: { name: state.value },
+      '.active': {
+        color: 'blue',
+        ':hover': {
+          color: 'blue'
+        }
+      }
+    }),
+
+    dropdown: {
+      extend: Dropdown,
+
+      props: {
+        minWidth: 'none',
+        grid: { gap: '0' }
+      },
+
+      header: { text: ({ state }) => state.value },
+
+      grid: {
+        extend: GridInDropdown,
+        props: ({ state }) => {
+          const keys = Object.keys(BUTTONS[state.value])
+          if (keys.length < 4) {
+            return {
+              columns: 'repeat(4, 1fr)'
+            }
+          }
+          return {
+            columns: 'auto 32px auto',
+            rows: 'auto 32px auto',
+            templateAreas: `"endStart blockStart startEnd"
+            "inlineStart content inlineEnd"
+            "startStart blockEnd endEnd"`
+          }
+        },
+        childExtend: {
+          extend: [ChoosableButton],
+          props: ({ key, parent, state }) => {
+            const propState = state.parent
+            const rowState = propState.parent
+            const keys = Object.keys(BUTTONS[propState.value])
+            const tableState = rowState.parent
+            const propKey = diffPropValue(propState.value, state.value)
+            const iconKey = diffIconTypes(propState.value, state.value)
+            const active = tableState.props[propKey] === rowState.key
+            return {
+              active,
+              icon: {
+                name: iconKey
+              },
+              gridArea: keys.length > 3 && diffPropPosition(propState.value, state.value),
+              theme: null,
+              background: 'transparent 0',
+              '.active': {
+                theme: null,
+                color: 'blue',
+                ':hover': {
+                  color: 'blue'
+                }
+              }
+            }
+          },
+          attr: { title: ({ state }) => state.value },
+          on: {
+            click: (ev, { key, state, parent }) => {
+              const propState = state.parent
+              const rowState = propState.parent
+              const tableState = rowState.parent
+              const propKey = diffPropValue(propState.value, state.value)
+              const active = tableState.props[propKey] === rowState.key
+              if (active) {
+                delete tableState.props[propKey] && tableState.update()
+              } else {
+                tableState.update({ props: { [propKey]: rowState.key } })
+              }
+            }
+          }
+        },
+
+        $setStateCollection: ({ state }) => Object.keys(BUTTONS[state.value])
+      }
+    },
+
+    click: {
+      props: {
+        position: 'absolute',
+        inset: '0 0 0 0'
+      },
+
+      on: {
+        click: (ev, { state, parent }) => {
+          const rowState = state.parent
+          const tableState = rowState.parent
+          const propKey = state.value
+          const active = tableState.props[propKey] === rowState.key
+          if (active) {
+            delete tableState.props[propKey] && tableState.update()
+          } else {
+            const allKeys = Object.keys(tableState.props)
+            allKeys.filter(v => {
+              const splitInWords = propKey.split(/(?=[A-Z])/)
+              return v.includes(splitInWords[0]) && v.includes(splitInWords[1])
+            })
+              .forEach(v => delete tableState.props[v])
+            tableState.update({ props: { [propKey]: rowState.key } })
+          }
+        }
+      },
+
+      attr: { title: ({ state }) => state.value },
+
+      childExtend: {
+        props: ({ key, parent, state }) => {
+          const propState = state.parent
+          const rowState = propState.parent
+          const tableState = rowState.parent
+          const propKey = diffPropValue(propState.value, state.value)
+          const active = tableState.props[propKey] === rowState.key
+          return {
+            position: 'absolute',
+            round: '100%',
+            background: 'blue',
+            boxSize: 'W2',
+
+            hide: !active,
+
+            ':nth-child(1)': { left: '50%', top: 'W' },
+            ':nth-child(2)': { right: 'W', top: '50%' },
+            ':nth-child(3)': { left: '50%', bottom: 'W' },
+            ':nth-child(4)': { left: 'W', top: '50%' }
+          }
+        }
+      },
+
+      $setStateCollection: ({ state }) => Object.keys(BUTTONS[state.value])
+    }
+  },
+
+  $setStateCollection: ({ state }) => Object.keys(BUTTONS)
+}

package/src/pages/Spaces/state.js

@@ -3,14 +3,6 @@
 import { SPACING } from '@symbo.ls/scratch'
 
 export const state = {
-  tabs: [{
-    key: 0,
-    name: 'Default'
-  }, {
-    key: 1,
-    name: 'Font Size'
-  }],
-
   base: SPACING.base,
   ratio: SPACING.ratio,
   subSequence: true,
@@ -18,5 +10,7 @@ export const state = {
   scales: {},
   sequence: {},
   vars: {},
-  type: 'spacing-scale'
+  type: 'spacing-scale',
+
+  props: {}
 }