@symbo.ls/preview 0.0.23 → 0.0.24

package/package.json

@@ -2,12 +2,14 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "repository": "https://github.com/rackai/editor",
   "main": "src/index.js",
   "scripts": {
     "link:all": "yarn link smbls domql css-in-props @symbo.ls/icons @symbo.ls/config @symbo.ls/components @symbo.ls/scratch @symbo.ls/playground @symbo.ls/utils @symbo.ls/init @symbo.ls/config-default @domql/router @domql/utils @domql/router",
-    "prestart": "rm -rf .cache dist",
+    "clean": "rm -rf .cache dist",
+    "clean:modules": "rm -rf node_modules/**/node_modules/@symbo.ls node_modules/**/node_modules/@domql node_modules/**/node_modules/domql node_modules/**/node_modules/smbls",
+    "prestart": "yarn clean && yarn clean:modules",
     "start": "parcel src/dev.html --port 1200 --no-cache",
     "prebuild": "rm -rf .cache dist",
     "build": "parcel build src/dev.html",

package/src/app.js

@@ -3,7 +3,7 @@
 import './config'
 
 import 'domql/packages/emotion'
-import { router, lastLevel } from '@domql/router'
+import { router } from '@domql/router'
 
 import { state } from './state'
 import {
@@ -74,10 +74,4 @@ const App = {
   }
 }
 
-window.onpopstate = e => {
-  const { pathname, hash } = window.location
-  const url = pathname + hash
-  router(App, url, {}, lastLevel, true)
-}
-
 export default App

package/src/index.js

@@ -11,6 +11,7 @@ import * as smbls from '@symbo.ls/components'
 import App from './app'
 import { Header } from './components'
 import { Library } from './pages'
+import { router, lastLevel } from '@domql/router'
 
 import { context } from './state'
 
@@ -22,7 +23,7 @@ DOM.define({
 })
 
 // export default DOM.create(App, DevFocus, 'app', { TODO: try this
-export default DOM.create({
+const app = DOM.create({
   extend: App,
   style,
 
@@ -35,3 +36,12 @@ export default DOM.create({
   components: { ...smbls },
   context
 })
+
+window.onpopstate = e => {
+  const { pathname, hash } = window.location
+  const url = pathname + hash
+  router(app, url, {}, {
+    level: lastLevel,
+    pushState: false
+  })
+}

package/src/pages/Components/grid.js

@@ -17,13 +17,14 @@ export default {
   header: {
     extend: SectionHeader,
 
-    props: { margin: '0 0 X2' },
-
-    heading: {
+    props: {
+      margin: '0 0 X2',
       title: null,
       p: 'All Categories'
     },
 
+    heading: {},
+
     nav: {
       childExtend: {
         props: {
@@ -54,7 +55,6 @@ export default {
         on: {
           click: (ev, el, s) => {
             s.update({ view: 'grid' })
-            // debugger
           }
         }
       }, {

package/src/pages/DesignSystem/index.js

@@ -3,7 +3,7 @@
 import { ClickableItem, Flex, Link, SquareButton } from '@symbo.ls/components'
 import { PageExtend,
   Color,
-  ColorEditor,
+  Theme,
   Shapes,
   Spaces,
   Icons,
@@ -79,15 +79,14 @@ export const DesignSystem = {
   define: { routes: param => param },
   routes: {
     '/colors': Color,
-    '/theme': ColorEditor,
-    // '/theme': Theme,
+    '/theme': Theme,
     '/typography': Typography,
     '/fonts': Fonts,
     '/space': Spaces,
-    // '/sequence': Sequence,
     '/shape': Shapes,
-    // '/timing': Timing,
     '/icons': Icons
+    // '/sequence': Sequence,
+    // '/timing': Timing,
     // '/media-query': MediaQuery
   },
 

package/src/pages/Fonts/index.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Grid, Hoverable, FontObject, FontFamilyObject, Line } from '@symbo.ls/components'
+import { Grid, Hoverable, FontObject, FontFamilyObject } from '@symbo.ls/components'
 import { TypeSection } from '../Typography/shared'
 
 import { state } from './state'
@@ -97,6 +97,6 @@ export const Fonts = {
   state,
 
   FontFaces,
-  line: { extend: Line },
+  Line: {},
   FontFamilies
 }

package/src/pages/Icons/index.js

@@ -32,6 +32,7 @@ const IconItem = {
   on: {
     click: (event, element, state) => {
       copyStringToClipboard(state.name)
+      Link.on.click(event, element, state)
     }
   }
 }

package/src/pages/Shapes/index.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Flex, SectionHeader, Line } from '@symbo.ls/components'
+import { Flex, Line } from '@symbo.ls/components'
 
 import {
   rectangle,
@@ -33,12 +33,9 @@ export const Shapes = {
   },
 
   htmlShapes: {
-    header: {
-      extend: SectionHeader,
-      heading: {
-        title: 'HTML Shapes',
-        p: 'All ungrouped document icons'
-      }
+    SectionHeader: {
+      title: 'HTML Shapes',
+      p: 'All ungrouped document icons'
     },
 
     section: {
@@ -53,12 +50,9 @@ export const Shapes = {
   line: { extend: Line },
 
   svgShapes: {
-    header: {
-      extend: SectionHeader,
-      heading: {
-        title: 'SVG Shapes',
-        p: 'TBA'
-      }
+    SectionHeader: {
+      title: 'SVG Shapes',
+      p: 'TBA'
     }
   }
 }

package/src/pages/Spaces/SpacingScale.js

@@ -1,29 +1,32 @@
 'use strict'
 
-import { SequenceSliders, Flex } from '@symbo.ls/components'
+import { Flex } from '@symbo.ls/components'
 import { Preview } from './Preview'
 import { Table } from './Table'
 
 export const SpacingScale = {
-  extend: Flex,
+  extend: [Flex],
 
   props: {
     flow: 'column',
     gap: 'C1'
   },
 
-  sliders: {
-    extend: SequenceSliders,
-    props: {
-      position: 'sticky',
-      top: 'D',
-      background: 'black .5',
-      zIndex: '2',
-      margin: '-B2 -B -B',
-      padding: 'B2 B B',
-      style: {
-        backdropFilter: 'blur(15px)'
-      }
+  SectionHeader: {
+    title: 'The Sequence',
+    p: 'Spacing scale is a set of values that are used to define the padding, margin, gap and width of components.',
+    margin: '0'
+  },
+
+  SequenceSliders: {
+    position: 'sticky',
+    top: 'D',
+    background: 'black .5',
+    zIndex: '2',
+    margin: '-B2 -B -B',
+    padding: 'B2 B B',
+    style: {
+      backdropFilter: 'blur(15px)'
     }
   },
 

package/src/pages/Spaces/Table.js

@@ -124,10 +124,14 @@ const Row = {
     graph: {
       margin: '0 0 0 -B2',
       line: {
+        isBase: state.index === 0,
         widthRange: `${state.val}px` || 0,
         height: '2px',
         background: 'blue',
-        borderRadius: '2px'
+        borderRadius: 'A',
+        '.isBase': {
+          height: '5px'
+        }
       }
     }
   }),

package/src/pages/Spaces/index.js

@@ -5,17 +5,19 @@ import { SpacingScale } from './SpacingScale'
 import { state } from './state'
 
 export const Spaces = {
-  extend: TypeSection,
   state,
 
-  header: {
+  spaces: {
+    extend: TypeSection,
     state: {
       title: 'Spacing',
       p: 'Unlike typography, component may has the properties of padding, gap, width and rest.'
     }
   },
 
-  SpacingScale
+  Line: {},
+
+  scale: SpacingScale
 }
 
 // preview,

package/src/pages/Theme/colorTone.js

@@ -0,0 +1,163 @@
+'use strict'
+
+import { Block, Text, opacify, Shape, Grid, Overflow } from '@symbo.ls/components'
+
+const classOpacify = (el, opacity) => {
+  if (!el.state.value) return
+  const { background, backgroundColor, color } = el.state.value
+  const bg = background || backgroundColor || color
+  if (!bg) return
+  return { background: opacify(bg, opacity) }
+}
+
+const TONES_AMOUNT = 13
+const TONES_ARR = new Array(TONES_AMOUNT).fill(0).map((_, i) => i)
+
+export const Tones = {
+  extend: [Shape, Block, Grid, Overflow],
+  props: {
+    columns: `repeat(${TONES_AMOUNT}, 1fr)`,
+    height: 'B',
+    round: 'Z'
+  },
+  childExtend: {
+    tag: 'span',
+    extend: Shape,
+    props: { round: 0 },
+    class: {
+      transition: {
+        transition: '165ms cubic-bezier(.29,.67,.51,.97)',
+        transitionProperty: 'color, background'
+      }
+    }
+  },
+  ...TONES_ARR.map(v => ({
+    class: { background: el => classOpacify(el, (100 / TONES_AMOUNT * v) / 100) }
+  }))
+}
+
+export const colorTones = {
+  tag: 'aside',
+  // extend: Block,
+  // style: styleColorTones,
+  props: { flexFlow: 'column' },
+  span: {
+    extend: [Text, Block],
+    props: {
+      text: 'Preview',
+      size: 'Z'
+    },
+    style: {
+      display: 'block',
+      marginBottom: '8px',
+      opacity: '.65'
+    }
+  },
+
+  preview: {
+    extend: [Shape, Block],
+    style: {
+      background: 'rgba(255, 255, 255, .06)',
+      '&, & *': { transition: '165ms cubic-bezier(.29,.67,.51,.97)', transitionProperty: 'color, background' }
+    },
+    props: (el, s) => ({
+      padding: 'X1',
+      round: 'Z2',
+      theme: `${s.sceneTheme || 'dark'}Scene`
+    }),
+    scene: {
+      extend: [Block],
+      props: { padding: 'A' },
+      style: {
+        boxSizing: 'border-box',
+        backgroundPosition: `center`,
+        backgroundRepeat: `repeat`,
+        backgroundSize: '100px 100px'
+      },
+      circle: {
+        extend: [Block, Shape],
+        props: (el, s) => ({
+          theme: s.value,
+          flexFlow: 'column',
+          flexAlign: 'center center',
+          width: 'G',
+          aspectRatio: '1 / 1',
+          round: '100%'
+        }),
+        style: { position: 'relative', borderWidth: '1px', borderStyle: 'solid' },
+        h6: {
+          extend: Text,
+          style: { fontSize: `${26 / 16}em`, fontWeight: 'Bold' },
+          span: {
+            text: 'The',
+            style: {
+              fontWeight: 'normal',
+              marginRight: '6px'
+            }
+          },
+          text: 'Text Color'
+        },
+        span: {
+          extend: Text,
+          props: { text: (el, s) => s.value },
+          style: {
+            position: 'absolute',
+            top: '86%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            fontWeight: '600'
+          }
+        }
+      }
+    }
+  },
+
+  opacity: {
+    extend: Block,
+    props: {
+      padding: 'B1 0 0 0'
+    },
+    caption: {
+      extend: [Text, Block],
+      props: {
+        text: 'Opacity',
+        size: 'Z',
+        padding: '0 0 Z1 0'
+      },
+      style: { opacity: '.65' }
+    },
+    tones: { extend: Tones }
+  },
+
+  shades: {
+    extend: [Block],
+    props: { padding: 'B 0 0 0' },
+    caption: {
+      extend: [Text, Block],
+      props: {
+        text: 'Shades',
+        size: 'Z',
+        padding: '0 0 Z1 0'
+      },
+      style: { opacity: '.65' }
+    },
+
+    generate: {
+      extend: [Block, Shape, Overflow],
+      props: { flexFlow: 'column', round: 'Z', gap: '2px' },
+
+      childExtend: {
+        extend: [Tones],
+        props: { round: 'X' },
+        ...TONES_ARR.map(v => ({
+          class: { background: el => classOpacify(el, (100 / TONES_AMOUNT * v) / 100) }
+        }))
+      },
+
+      dark: {},
+      light: {
+        props: { theme: 'lightScene' }
+      }
+    }
+  }
+}

package/src/pages/Theme/friendTheme.js

@@ -0,0 +1,30 @@
+'use strict'
+
+import { CommonField, SelectTool } from '@symbo.ls/components'
+
+export const friendTheme = {
+  extend: CommonField,
+  style: { paddingBlock: 0 },
+  caption: {
+    tag: 'h6',
+    props: { text: 'Friend themes', size: 'B' },
+    style: { opacity: 1, fontWeight: 'normal', margin: 0 }
+  },
+  element: {
+    extend: SelectTool,
+    style: {
+      background: 'transparent',
+      paddingLeft: 0,
+      '&:hover': { background: 'transparent' }
+    },
+    title: null,
+    buttons: {
+      ...[
+        {
+          props: { icon: 'plus' },
+          style: { padding: `${10 / 16}em` }
+        }
+      ]
+    }
+  }
+}

package/src/pages/Theme/index.js

@@ -0,0 +1,185 @@
+'use strict'
+
+import {
+  PageTemplate,
+  Button,
+  Flex,
+  SectionHeader,
+  AccessibilityCheck,
+  SceneThemingBar
+} from '@symbo.ls/components'
+
+import { colorTones } from './colorTone'
+import { themingTools } from './themingTools'
+import { interactivity } from './interactivity'
+import { friendTheme } from './friendTheme'
+
+import style, { styleLabel } from './style'
+
+// import ntc from './ntc'
+
+// const returnColor = element => element.lookup('ColorEditor').state.color
+// const setBackground = (element, opacity = 1) => `background: ${opacify(returnColor(element), opacity)}`
+
+const nameTheTheme = {
+  tag: 'label',
+  style: styleLabel,
+  attr: { for: 'name-it' },
+  caption: {
+    props: {
+      text: 'Name the theme',
+      padding: '0 0 Y1 0',
+      size: 'Z'
+    }
+  },
+  span: {
+    tag: 'span',
+    props: {
+      text: (el, s) => s.value,
+      size: 'E'
+    },
+    attr: { contentEditable: true, placeholder: 'you name it', id: 'name-it' }
+  }
+}
+
+const footer = { //eslint-disable-line
+  extend: [Flex],
+  props: {
+    height: 'C2',
+    padding: '0 A'
+  },
+  style: {
+    margin: 'auto -80px 0',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+  nav: {
+    extend: [Flex],
+    props: { gap: 'A' },
+    childExtend: {
+      extend: [Button],
+      props: {
+        size: 'Z',
+        width: 'B2',
+        height: 'B2',
+        theme: 'transparent'
+      }
+    },
+    ...[
+      { props: { icon: 'starOutline' } },
+      { props: { icon: 'copyOutline' } },
+      { props: { icon: 'share' } }
+    ]
+  },
+  span: {
+    props: {
+      text: 'Autosaved 1 second ago',
+      size: 'Y'
+    },
+    style: { opacity: '.35' }
+  },
+
+  export: {
+    extend: Flex,
+    style: {
+      alignItems: 'center'
+    },
+    span: {
+      props: {
+        text: 'Export:',
+        size: 'Y',
+        padding: '0 B1 0 0'
+      },
+      style: { opacity: '.35' }
+    },
+    nav: {
+      extend: [Flex],
+      props: { gap: 'Y2' },
+      childExtend: {
+        extend: [Button],
+        props: {
+          size: 'Z',
+          width: 'B2',
+          height: 'B2',
+          theme: 'transparent'
+        },
+        style: {
+          color: 'white'
+        }
+      },
+      ...[
+        { props: { icon: 'themeOutline' } },
+        { props: { icon: 'sketch' } },
+        { props: { icon: 'arrowAngleMirroringHorizontal' } }
+      ]
+    }
+  }
+}
+
+export const Theme = {
+  key: 'ColorEditor',
+
+  extend: PageTemplate,
+
+  style,
+
+  state: {
+    sceneTheme: 'dark',
+    title: 'Typography',
+    p: 'A general configuration of type properties on the document.'
+  },
+
+  on: {
+    init: (el, s) => {
+      if (!el.context.SYSTEM) return
+      const path = window.location.pathname
+      const pathArray = path.split('edit-icon/')
+      if (!el.context.SYSTEM) return
+      const { THEME } = el.context.SYSTEM
+      const themeName = pathArray[1]
+      var theme = THEME[themeName]
+
+      if (themeName && theme) {
+        s.update({
+          themeName: themeName,
+          value: theme
+        }, { preventUpdate: true })
+      }
+    }
+  },
+
+  header: {
+    extend: SectionHeader,
+    props: {
+      padding: 'C 0 B2 0',
+      margin: '0'
+    },
+    heading: '',
+    label: nameTheTheme,
+    nav: { extend: SceneThemingBar }
+  },
+
+  cnt: {
+    extend: [Flex],
+    props: {
+      gap: 'D'
+    },
+
+    aside: colorTones,
+    colorEdit: {
+      props: { gap: 'C2', flexFlow: 'column' },
+      themingTools,
+      interactivity,
+      friendTheme
+    }
+  },
+
+  check: {
+    extend: AccessibilityCheck,
+    props: {
+      padding: 'E 0 F'
+    }
+  }
+
+  // footer
+}