@symbo.ls/preview 0.0.39 → 0.0.40

package/.symbols/library.js

@@ -58,7 +58,7 @@ const define = {
   },
   SearchHeader: {
     settings: {
-      gridOptions: { colspan: 6, rowspan: 2 }
+      gridOptions: { colspan: 8, rowspan: 2 }
     }
   },
   Search: {

package/package.json

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

package/src/pages/Export/index.js

@@ -68,17 +68,7 @@ export const Export = {
       flex: '1'
     },
 
-    tools: {
-      props: {
-        padding: 'Z2 0 0 0',
-        flexAlign: 'center space-between'
-      },
-
-      tools,
-
-      ResponsiveToolBar: {}
-    },
-
+    tools,
     description
   }
 

package/src/pages/Export/scene.js

@@ -50,7 +50,8 @@ export default {
           el.comp.setProps({
             base: s.base,
             fontSize: s.base + 'px',
-            spacingRatio: s.ratio
+            spacingRatio: s.ratio,
+            direction: s.direction
           }, { preventUpdate: true })
           updateReset()
         }

package/src/pages/Export/tools.js

@@ -1,14 +1,53 @@
 'use strict'
 
-import { Flex, SequenceSliders } from '@symbo.ls/components'
+import {
+  Flex,
+  SequenceSliders,
+  ClickableItem,
+  SquareButton
+} from '@symbo.ls/components'
 
 export default {
-  extend: [Flex],
-  props: { gap: 'B1' },
-  // theme: { extend: ThemeSwitcher },
+  props: {
+    padding: 'Z2 0 0',
+    flexAlign: 'center space-between'
+  },
 
-  sliders: {
-    extend: SequenceSliders,
-    childExtend: { title: null }
+  tools: {
+    extend: Flex,
+    props: { gap: 'B1' },
+    // theme: { extend: ThemeSwitcher },
+
+    sliders: {
+      extend: SequenceSliders,
+      childExtend: { title: null }
+    }
+  },
+
+  responsive: {
+    extend: Flex,
+    props: { gap: 'A2' },
+
+    direction: {
+      extend: [ClickableItem, SquareButton],
+      props: {
+        icon: 'languageDirection'
+      },
+      on: {
+        click: (ev, el, s) => {
+          console.log(s.direction)
+          s.update({
+            direction: s.direction === 'rtl' ? 'ltr' : 'rtl'
+          })
+        }
+      }
+    },
+
+    VerticalLine: {
+      margin: 'auto 0',
+      height: 'A2'
+    },
+
+    ResponsiveToolBar: {}
   }
 }

package/src/pages/Theme/index.js

@@ -6,34 +6,53 @@ import {
   Flex,
   SectionHeader,
   AccessibilityCheck,
-  SceneThemingBar
+  SceneThemingBar,
+  Pseudo,
+  CommonField
 } from '@symbo.ls/components'
 
-import { colorTones } from './colorTone'
-import { themingTools } from './themingTools'
-import { interactivity } from './interactivity'
-import { friendTheme } from './friendTheme'
+import preview from './preview'
+// import { themingTools } from './themingTools'
+// import { interactivity } from './interactivity'
+// import { friendTheme } from './friendTheme'
 
-import style, { styleLabel } from './style'
+import style from './style'
 
-const nameTheTheme = {
+const ThemeNameField = {
   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'
+  extend: CommonField,
+
+  props: ({ state }) => ({
+    gap: '0',
+
+    caption: {
+      text: 'Name the theme'
     },
-    attr: { contentEditable: true, placeholder: 'you name it', id: 'name-it' }
+
+    element: {
+      whiteSpace: 'nowrap',
+      minWidth: 'C1',
+      maxWidth: 'fit-content',
+      outline: 'none',
+      fontSize: 'E',
+
+      border: 'dashed, gray5',
+      borderWidth: '0 0 1px',
+
+      text: (el, s) => s.themeName,
+
+      ':empty::before': {
+        content: '"You name it"',
+        color: 'gray5'
+      }
+    }
+  }),
+
+  caption: {},
+  element: {
+    extend: Pseudo,
+    attr: { contentEditable: true, id: 'name-it' }
   }
 }
 
@@ -128,16 +147,16 @@ export const Theme = {
     init: (el, s) => {
       if (!el.context.SYSTEM) return
       const path = window.location.pathname
-      const pathArray = path.split('edit-icon/')
+      const pathArray = path.split('theme/')
       if (!el.context.SYSTEM) return
       const { THEME } = el.context.SYSTEM
       const themeName = pathArray[1]
-      var theme = THEME[themeName]
+      var value = THEME[themeName]
 
-      if (themeName && theme) {
+      if (themeName && value) {
         s.update({
-          themeName: themeName,
-          value: theme
+          themeName,
+          value
         }, { preventUpdate: true })
       }
     }
@@ -146,26 +165,24 @@ export const Theme = {
   header: {
     extend: SectionHeader,
     props: {
-      padding: 'C 0 B2 0',
-      margin: '0'
+      margin: '0 0 B2'
     },
-    heading: '',
-    label: nameTheTheme,
+    heading: null,
+    ThemeNameField,
     nav: { extend: SceneThemingBar }
   },
 
   cnt: {
-    extend: [Flex],
-    props: {
-      gap: 'D'
-    },
+    extend: Flex,
+    props: { gap: 'D' },
+
+    preview,
 
-    aside: colorTones,
     colorEdit: {
-      props: { gap: 'C2', flexFlow: 'column' },
-      themingTools,
-      interactivity,
-      friendTheme
+      props: { gap: 'C2', flexFlow: 'column' }
+      // themingTools,
+      // interactivity,
+      // friendTheme
     }
   },
 

package/src/pages/Theme/preview.js

@@ -0,0 +1,153 @@
+'use strict'
+
+import { opacify } from '@symbo.ls/scratch'
+import { Flex, Grid } from '@symbo.ls/components'
+
+const classOpacify = (value, opacity) => {
+  const { background, backgroundColor, color } = 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)
+
+const getThemeProperty = (property, value, mod) => {
+  const modifier = `@${mod}`
+  return value[modifier] && value[modifier][property] ? value[modifier][property] : value[property]
+}
+
+export const Tones = {
+  extend: Grid,
+  props: {
+    columns: `repeat(${TONES_AMOUNT}, 1fr)`,
+    height: 'B',
+    round: 'Z',
+    overflow: 'hidden'
+  },
+  childExtend: {
+    tag: 'span',
+    text: null,
+    props: ({ key, state }) => ({
+      round: '0',
+      transition: 'B default-bezier',
+      transitionProperty: 'color, background',
+      background: getThemeProperty('background', state.value, state.sceneTheme),
+      opacity: '' + (100 / TONES_AMOUNT * parseInt(key)) / 100
+    })
+  },
+  $setCollection: () => TONES_ARR
+}
+
+export default {
+  tag: 'aside',
+  extend: Flex,
+  props: {
+    flow: 'column'
+  },
+
+  preview: {
+    props: (el, s) => ({
+      padding: 'X1',
+      round: 'Z2',
+      theme: `scene @${s.sceneTheme}`,
+      style: {
+        '&, & *': {
+          transition: '165ms cubic-bezier(.29,.67,.51,.97)',
+          transitionProperty: 'color, background'
+        }
+      }
+    }),
+    scene: {
+      props: {
+        padding: 'A',
+        backgroundPosition: `center`,
+        backgroundRepeat: `repeat`,
+        backgroundSize: '100px 100px'
+      },
+      circle: {
+        props: (el, s) => ({
+          theme: `${s.themeName} @${s.sceneTheme}`,
+          flexFlow: 'column',
+          flexAlign: 'center center',
+          width: 'G',
+          aspectRatio: '1 / 1',
+          round: '100%',
+          position: 'relative',
+          borderWidth: '1px',
+          borderStyle: 'solid',
+          borderColor: 'transparent',
+
+          h6: {
+            fontSize: 'D',
+            fontWeight: 'bold',
+            gap: 'X'
+          }
+        }),
+        h6: {
+          extend: Flex,
+          Span: {
+            text: 'The',
+            fontWeight: 'normal',
+            marginRight: '6px'
+          },
+          text: 'Text Color'
+        },
+        Span: {
+          text: (el, s) => s.themeName,
+          position: 'absolute',
+          top: '86%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          fontWeight: '600'
+        }
+      }
+    }
+  },
+
+  opacity: {
+    props: {
+      padding: 'B1 0 0 0'
+    },
+    caption: {
+      props: {
+        text: 'Opacity',
+        size: 'Z',
+        padding: '0 0 Z1 0',
+        opacity: '.65'
+      }
+    },
+    tones: { extend: Tones }
+  },
+
+  shades: {
+    if: () => false,
+    props: { padding: 'B 0 0 0' },
+    caption: {
+      props: {
+        text: 'Shades',
+        size: 'Z',
+        padding: '0 0 Z1 0'
+      },
+      style: { opacity: '.65' }
+    },
+
+    generate: {
+      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/style.js

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

package/src/pages/ColorEditor/colorTone.js

@@ -1,163 +0,0 @@
-'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/ColorEditor/friendTheme.js

@@ -1,30 +0,0 @@
-'use strict'
-
-import { CommonField, SelectField } 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: SelectField,
-    style: {
-      background: 'transparent',
-      paddingLeft: 0,
-      '&:hover': { background: 'transparent' }
-    },
-    title: null,
-    buttons: {
-      ...[
-        {
-          props: { icon: 'plus' },
-          style: { padding: `${10 / 16}em` }
-        }
-      ]
-    }
-  }
-}