@symbo.ls/preview 2.0.7 → 2.6.0

package/src/pages/Spaces/index.js

@@ -1,61 +1,37 @@
 'use strict'
 
-import style from './style'
-
-import { Link, TabHeader } from '@symbo.ls/all'
-import { PageProto } from '..'
-
-import preview from './preview'
 import sequence from './sequence'
-import boxModel from './boxModel'
-
-export default {
-  style,
-  key: 'spaces',
+import { state } from './state'
 
-  proto: PageProto,
+export const Spaces = {
+  state,
 
-  state: {
-    activePage: 'spaces',
-    activeTab: 'preview'
+  SectionHeader: {
+    margin: '0 0 C',
+    title: 'Spacing',
+    p: 'Unlike typography, component may has the properties of padding, gap, width and rest.'
   },
 
-  define: { routes: param => param },
+  SlidersWithResponsive: {},
 
-  routes: {
-    preview,
-    sequence,
-    boxModel
-  },
+  Line: {},
+
+  sequence,
 
   on: {
     init: (el, s) => {
-      var route = window.location.pathname
-      var routes = route.slice(1).split('/')
-      s.activeTab = routes[1] || s.activeTab
-    }
-  },
-
-  header: {
-    proto: TabHeader,
-    style: {
-      margin: `${42 / 16}em -2em 2em -2em`,
-      paddingLeft: '2em'
+      if (!s.__system.SPACING) {
+        s.systemUpdate({
+          SPACING: { base: s.base, ratio: s.ratio }
+        }, { preventUpdate: true })
+      }
     },
-    tabs: {
-      childProto: {
-        proto: [Link]
-      },
-
-      preview: { props: { text: 'Spacing Preview' } }
-      // sequence: { props: { text: 'Sequence' } },
-      // boxModel: { props: { text: 'Box Model' } }
+    stateUpdated: (el, s, changes) => {
+      s.systemUpdate({
+        SPACING: { base: s.base, ratio: s.ratio }
+      }, {
+        preventUpdate: true
+      })
     }
-  },
-
-  preview
-
-  // page: {
-  //   content: (el, s) => ({ proto: el.parent.routes[s.activeTab] })
-  // }
+  }
 }

package/src/pages/Spaces/sequence.js

@@ -1,3 +1,32 @@
 'use strict'
 
-export default {}
+import { Flex } from '@symbo.ls/components'
+
+export default {
+  extend: [Flex],
+
+  props: {
+    lazyLoad: true,
+    flow: 'column',
+    gap: 'C1'
+  },
+
+  SectionHeader: {
+    title: 'Sequence',
+    p: 'Spacing scale is a set of values that are used to define the padding, margin, gap and width of components.',
+    margin: '0'
+  },
+
+  Flex: {
+    props: {
+      lazyLoad: true,
+      flow: 'column',
+      gap: 'B1',
+
+      table: { flex: 1 },
+      preview: { flex: 1 }
+    },
+
+    SpacingTable: {}
+  }
+}

package/src/pages/Spaces/state.js

@@ -1,18 +1,16 @@
 'use strict'
 
-import { SPACING } from '@symbo.ls/all'
-import { TYPOGRAPHY_SEQUENCE } from '../Export/const'
+import { SPACING } from '@symbo.ls/scratch'
 
-export default {
-  tabs: [{
-    key: 0,
-    name: 'Default'
-  }, {
-    key: 1,
-    name: 'Font Size'
-  }],
-  activeTab: '0',
-  sequence: TYPOGRAPHY_SEQUENCE,
-  spacingRatio: SPACING.ratio,
-  currentFontSizeIndex: 3
+export const state = {
+  base: SPACING.base,
+  ratio: SPACING.ratio,
+  subSequence: true,
+  range: [-5, +12],
+  scales: {},
+  sequence: {},
+  vars: {},
+  type: 'spacing-scale',
+
+  props: {}
 }

package/src/pages/State/index.js

@@ -0,0 +1,86 @@
+'use strict'
+
+import { Input, Flex, CommonField } from '@symbo.ls/components'
+
+const sideBar = {
+  tag: 'aside'
+}
+
+export const State = {
+  sideBar,
+
+  form: {
+    extend: Flex,
+
+    props: {
+      flow: 'column',
+      gap: 'A2',
+      margin: 'C1 - -',
+      width: 'G2'
+    },
+
+    childExtend: {
+      extend: CommonField,
+
+      element: {
+        on: {
+          input: (ev, el, s) => {
+            const rootState = el.__root.state
+            const obj = {
+              STATE: { [el.parent.key]: el.node.value }
+            }
+            rootState.update({ SYSTEM: obj })
+          }
+        }
+      }
+    },
+
+    websiteTitle: {
+      title: 'Title',
+      element: {
+        extend: Input
+      }
+    },
+
+    websiteDesc: {
+      title: 'Description',
+      element: {
+        extend: Input
+      }
+    },
+
+    websiteTags: {
+      title: 'Tags',
+      element: {
+        extend: Input
+      }
+    },
+
+    headline: {
+      title: 'Headline',
+      element: {
+        extend: Input
+      }
+    },
+
+    paragraph: {
+      title: 'Paragraph',
+      element: {
+        extend: Input
+      }
+    },
+
+    bookNowUrl: {
+      title: 'Book now URL:',
+      element: {
+        extend: Input
+      }
+    }
+  },
+
+  on: {
+    stateUpdated: (el, s) => {
+      s.systemUpdate({ STATE: s.parse })
+    }
+  }
+}

package/src/pages/{ColorEditor → Theme}/friendTheme.js

@@ -1,9 +1,9 @@
 'use strict'
 
-import { CommonField, SelectTool } from '@symbo.ls/all'
+import { CommonField, SelectField } from '@symbo.ls/components'
 
 export const friendTheme = {
-  proto: CommonField,
+  extend: CommonField,
   style: { paddingBlock: 0 },
   caption: {
     tag: 'h6',
@@ -11,7 +11,7 @@ export const friendTheme = {
     style: { opacity: 1, fontWeight: 'normal', margin: 0 }
   },
   element: {
-    proto: SelectTool,
+    extend: SelectField,
     style: {
       background: 'transparent',
       paddingLeft: 0,

package/src/pages/Theme/index.js

@@ -0,0 +1,197 @@
+'use strict'
+
+import {
+  PageTemplate,
+  Button,
+  Flex,
+  SectionHeader,
+  AccessibilityCheck,
+  SceneThemingBar,
+  Pseudo,
+  CommonField
+} from '@symbo.ls/components'
+
+import preview from './preview'
+// import { themingTools } from './themingTools'
+// import { interactivity } from './interactivity'
+// import { friendTheme } from './friendTheme'
+
+import style from './style'
+
+const ThemeNameField = {
+  tag: 'label',
+  attr: { for: 'name-it' },
+  extend: CommonField,
+
+  props: ({ state }) => ({
+    gap: '0',
+
+    title: {
+      text: 'Name the theme'
+    },
+
+    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'
+      }
+    }
+  }),
+
+  title: {},
+  element: {
+    extend: Pseudo,
+    attr: { contentEditable: true, 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 (!s.__system) return
+      const path = window.location.pathname
+      const pathArray = path.split('theme/')
+      if (!s.__system) return
+      const { THEME } = s.__system
+      const themeName = pathArray[1]
+      var value = THEME[themeName]
+
+      if (themeName && value) {
+        s.update({
+          themeName,
+          value
+        }, { preventUpdate: true })
+      }
+    }
+  },
+
+  header: {
+    extend: SectionHeader,
+    props: {
+      margin: '0 0 B2'
+    },
+    heading: null,
+    ThemeNameField,
+    nav: { extend: SceneThemingBar }
+  },
+
+  cnt: {
+    extend: Flex,
+    props: { gap: 'D' },
+
+    preview,
+
+    colorEdit: {
+      props: { gap: 'C2', flexFlow: 'column' }
+      // themingTools,
+      // interactivity,
+      // friendTheme
+    }
+  },
+
+  check: {
+    extend: AccessibilityCheck,
+    props: {
+      padding: 'E 0 F'
+    }
+  }
+
+  // footer
+}

package/src/pages/{ColorEditor → Theme}/interactivity.js

@@ -1,15 +1,15 @@
 'use strict'
 
-import { Block, Grid, Text, SelectTool, CommonField } from '@symbo.ls/all'
+import { Block, Grid, Text, SelectField, CommonField } from '@symbo.ls/components'
 
 export const interactivity = {
   h6: {
-    proto: [Text, Block],
+    extend: [Text, Block],
     props: { text: 'Interactivity', padding: '0 0 Z2 0', size: 'B' },
     style: { fontWeight: 'normal', margin: 0 }
   },
   interactivitySet: {
-    proto: Grid,
+    extend: Grid,
     props: {
       columns: 'repeat(4, 1fr)',
       rows: 'repear(2, 1fr)',
@@ -17,11 +17,11 @@ export const interactivity = {
       rowGap: 'A2'
     },
     style: { width: 'fit-content' },
-    childProto: {
-      proto: CommonField,
+    childExtend: {
+      extend: CommonField,
       props: { padding: 0 },
       element: {
-        proto: SelectTool,
+        extend: SelectField,
         buttons: { ...[{ props: { icon: 'plus' } }] }
       }
     },
@@ -112,5 +112,4 @@ export const interactivity = {
       }
     ]
   }
-
 }

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 defaultBezier',
+      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/{ColorEditor → 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',