npm - @symbo.ls/preview - Versions diffs - 0.0.12 → 0.0.14 - Mend

@symbo.ls/preview 0.0.12 → 0.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/package.json +1 -1
package/src/app.js +4 -0
package/src/pages/Color/globalThemes.js +30 -0
package/src/pages/Color/index.js +3 -3
package/src/pages/Color/{colors.js → palette.js} +1 -1
package/src/pages/Color/themes.js +4 -88
package/src/pages/DesignSystem/index.js +28 -8
package/src/pages/Export/scene.js +3 -8
package/src/pages/{Typography/docFonts.js → Fonts/index.js} +12 -8
package/src/pages/Fonts/state.js +5 -0
package/src/pages/Typography/index.js +7 -21
package/src/pages/Typography/state.js +7 -5
package/src/pages/Typography/typeScale.js +71 -82
package/src/pages/index.js +1 -0
package/src/pages/Color/documentThemes.js +0 -80

package/package.json CHANGED Viewed

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

package/src/app.js CHANGED Viewed

@@ -13,6 +13,7 @@ import {
   Export,
   Library
 } from './pages'
+import { Modal, openModal } from '@symbo.ls/components'
 const SUB_ROUTES = {}
 Object.keys(DesignSystem.routes).map(route => {
@@ -54,12 +55,15 @@ const App = {
     style: { position: 'relative' }
   },
+  Modal,
   on: {
     render: element => {
       const { pathname, hash } = window.location
       const url = pathname + hash
       router(element, url, {})
     },
+    update: (el, s) => openModal(el, s),
     scroll: (ev, el) => {
       const { scrollTop } = el.node
       const isFloating = scrollTop > 0

package/src/pages/Color/globalThemes.js ADDED Viewed

@@ -0,0 +1,30 @@
+'use strict'
+import { GlobalThemeTemplate, Flex, SectionHeader, Link } from '@symbo.ls/components'
+export default {
+  header: {
+    extend: SectionHeader,
+    state: {
+      title: 'Global Themes',
+      p: 'Document styling and theming provides global themes of the entire app, imagine it as a <body> styling'
+    }
+  },
+  modes: {
+    extend: Flex,
+    props: { gap: 'A' },
+    childExtend: [GlobalThemeTemplate, Link],
+    $setCollection: () => [{
+      title: 'Light',
+      key: 'light',
+      icon: 'sun'
+    }, {
+      title: 'Dark',
+      key: 'dark',
+      icon: 'moon'
+    }]
+  }
+}

package/src/pages/Color/index.js CHANGED Viewed

@@ -2,8 +2,8 @@
 import { Line } from '@symbo.ls/components'
-import documentThemes from './documentThemes'
-import palette from './colors'
+import globalThemes from './globalThemes'
+import palette from './palette'
 import themes from './themes'
 export const Color = {
@@ -12,7 +12,7 @@ export const Color = {
     gap: '68px'
   },
-  documentThemes,
+  globalThemes,
   line: { extend: Line },
   palette,
   line2: { extend: Line },

package/src/pages/Color/{colors.js → palette.js} RENAMED Viewed

@@ -6,7 +6,7 @@ const mapColors = (el, s) => {
   if (!el.context.SYSTEM) return
   const { COLOR } = el.context.SYSTEM
   const colorKeys = Object.keys(COLOR)
-  return colorKeys.map(v => COLOR[v])
+  return colorKeys.map(v => ({ key: v, ...COLOR[v] }))
 }
 export default {

package/src/pages/Color/themes.js CHANGED Viewed

@@ -1,86 +1,6 @@
 'use strict'
-import { IconText, Link, Flex, SectionHeader, Grid } from '@symbo.ls/components'
-const style = {
-  cursor: 'pointer',
-  '> *': {
-    transition: '350ms',
-    transitionProperty: 'opacity, transform',
-    opacity: 0.35
-  },
-  '&:hover > *': {
-    opacity: 1,
-    transform: 'scale(1.015)'
-  }
-}
-export const ThemeTemplate = {
-  extend: [Link, Flex],
-  props: (el, s) => ({
-    flow: 'column',
-    href: `/theme/${s.key}`,
-    padding: 'A Z1',
-    fontWeight: '400',
-    color: 'white',
-    colors: {
-      margin: '0 -Z',
-      round: 'A2',
-      overflow: 'hidden'
-    },
-    title: {
-      size: 'Y',
-      margin: 'Z 0 0 0'
-    },
-    style
-  }),
-  colors: {
-    extend: Flex,
-    childExtend: {
-      extend: [IconText, Flex],
-      props: {
-        align: 'center flex-start',
-        flex: 1,
-        padding: 'Z1 A'
-      }
-    },
-    just: {
-      if: (el, s) => !s['@dark'] && !s['@light'],
-      props: (el, s) => ({
-        theme: s.key,
-        height: 'A',
-        boxSizing: 'content-box',
-        padding: 'Z1 A'
-      })
-    },
-    sun: {
-      if: (el, s) => s['@light'],
-      props: (el, s) => ({
-        icon: { name: 'sun' },
-        theme: `${s.key} @light`
-      })
-    },
-    moon: {
-      if: (el, s) => s['@dark'],
-      props: (el, s) => ({
-        theme: `${s.key} @dark`,
-        icon: { name: 'moon' }
-      })
-    }
-  },
-  title: { text: (el, state) => state.key }
-}
+import { ThemeTemplate, SectionHeader, Grid } from '@symbo.ls/components'
 const mapThemes = (el, s) => {
   if (!el.context.SYSTEM) return
@@ -105,16 +25,12 @@ export default {
   content: {
     extend: Grid,
     props: {
-      columns: 'repeat(6, 1fr)',
-      gap: 'A',
+      columns: 'repeat(5, 1fr)',
+      gap: 'C2',
       margin: '0 -Z'
     },
     childExtend: ThemeTemplate,
-    $setCollection: (el, s) => {
-      const c = mapThemes(el, s)
-      console.log(c)
-      return c
-    }
+    $setCollection: (el, s) => mapThemes(el, s)
   }
 }

package/src/pages/DesignSystem/index.js CHANGED Viewed

@@ -1,13 +1,14 @@
 'use strict'
-import { Flex, Link, SquareButton } from '@symbo.ls/components'
+import { ClickableItem, Flex, Link, SquareButton } from '@symbo.ls/components'
 import { PageExtend,
   Color,
   ColorEditor,
   Shapes,
   Spaces,
   Icons,
-  Typography
+  Typography,
+  Fonts
 } from '..'
 const NAV = [{
@@ -23,7 +24,8 @@ const NAV = [{
 }, {
   props: {
     icon: 'space outline',
-    href: '/space'
+    href: '/space',
+    opacity: '.55'
   }
 }, {
   props: {
@@ -33,12 +35,21 @@ const NAV = [{
 }, {
   props: {
     icon: 'icons outline colored',
-    href: '/icons'
+    href: '/icons',
+    $active: {
+      icon: 'icons colored'
+    }
+  }
+}, {
+  props: {
+    icon: 'typeface colored',
+    href: '/fonts'
   }
 }, {
   props: {
     icon: 'device mobile half fill',
-    href: '/responsive'
+    href: '/responsive',
+    opacity: '.55'
   }
 }, {
   props: {
@@ -59,6 +70,7 @@ export const DesignSystem = {
     maxWidth: '100%',
     width: '100%',
     flow: 'row',
+    align: 'flex-start flex-start',
     gap: 'B1',
     padding: 'D2 A B1'
   },
@@ -69,7 +81,7 @@ export const DesignSystem = {
     '/theme': ColorEditor,
     // '/theme': Theme,
     '/typography': Typography,
-    // '/font': Font,
+    '/fonts': Fonts,
     '/space': Spaces,
     // '/sequence': Sequence,
     '/shape': Shapes,
@@ -81,14 +93,22 @@ export const DesignSystem = {
   sidebar: {
     tag: 'nav',
     extend: Flex,
-    childExtend: [Link, SquareButton],
+    childExtend: {
+      extend: [ClickableItem, Link, SquareButton],
+      props: ({ props }) => ({
+        active: props.href === window.location.pathname,
+        theme: null
+      })
+    },
     props: {
       gap: 'B1',
       flow: 'column',
       background: 'transparent',
       color: 'gray7',
-      fontSize: 'A2'
+      fontSize: 'A2',
+      position: 'sticky',
+      top: 'E'
     },
     ...NAV

package/src/pages/Export/scene.js CHANGED Viewed

@@ -39,14 +39,9 @@ export default {
           }
         }
       },
-      comp: (el, s) => {
-        console.warn(s)
-        return {
-          extend: [s.component],
-          props: {
-          }
-        }
-      },
+      comp: (el, s) => ({
+        extend: [s.component],
+      }),
       on: {
         initUpdate: (el, s) => {

package/src/pages/{Typography/docFonts.js → Fonts/index.js} RENAMED Viewed

@@ -1,7 +1,9 @@
 'use strict'
 import { Grid, FontObject, FontFamilyObject, Line } from '@symbo.ls/components'
-import { TypeSection } from './shared'
+import { TypeSection } from '../Typography/shared'
+import { state } from './state'
 const mapFonts = (el, s) => {
   if (!el.context.SYSTEM) return
@@ -16,7 +18,7 @@ const mapFonts = (el, s) => {
     return {
       title: v,
-      href: `/typography/document-fonts/font-settings/${v}`,
+      href: `/fonts/font-settings/${v}`,
       labels: [
         { icon: 'variableFont', text: fontWeightCaption }
       ]
@@ -34,13 +36,13 @@ const mapFontFamilies = (el, s) => {
     if (v === 'default') return
     return {
       title: v,
-      href: `/typography/font-family/${v}`,
+      href: `/fonts/font-family/${v}`,
       val
     }
   }).filter(v => v)
 }
-const Fonts = {
+const FontFaces = {
   extend: TypeSection,
   header: {
     state: {
@@ -48,7 +50,7 @@ const Fonts = {
       p: 'Document @font-face, default and backup fonts',
       nav: [{
         icon: 'plus',
-        href: '/typography/upload-font'
+        href: '/fonts/upload-font'
       }]
     }
   },
@@ -74,7 +76,7 @@ const FontFamilies = {
       p: 'Setup a set and fallback fonts as font families',
       nav: [{
         icon: 'plus',
-        href: '/typography/add-font-family'
+        href: '/fonts/add-font-family'
       }]
     }
   },
@@ -91,8 +93,10 @@ const FontFamilies = {
   }
 }
-export default {
-  Fonts,
+export const Fonts = {
+  state,
+  FontFaces,
   line: { extend: Line },
   FontFamilies
 }

package/src/pages/Fonts/state.js ADDED Viewed

@@ -0,0 +1,5 @@
+'use strict'
+export const state = {
+  sampleText: 'Today is a big day for our tribe. The year ends.'
+}

package/src/pages/Typography/index.js CHANGED Viewed

@@ -1,12 +1,11 @@
 'use strict'
-import { SectionHeader } from '@symbo.ls/components'
+import { SectionHeader } from '@symbo.ls/components' // eslint-disable-line no-unused-vars
 import state from './state'
-import documentFonts from './docFonts'
 import documentStyle from './docStyles'
-import typeScale from './typeScale'
+import { TypeScale } from './typeScale'
 export const Typography = {
   define: { routes: param => param },
@@ -14,28 +13,15 @@ export const Typography = {
   state,
   routes: {
-    '/': documentFonts,
-    '/document-fonts': documentFonts,
-    '/type-scale': typeScale,
+    '/': TypeScale,
     '/document-styles': documentStyle
   },
-  header: {
-    extend: SectionHeader
-  },
+  // header: {
+  //   extend: SectionHeader
+  // },
   page: {
-    content: (el, s) => {
-      const content = el.parent?.routes['/' + s.activeTab]
-      return { extend: content }
-    }
-  },
-  on: {
-    init: (el, s) => {
-      const route = window.location.pathname
-      const routes = route.slice(1).split('/')
-      s.activeTab = routes[1] || state.activeTab
-    }
+    TypeScale
   }
 }

package/src/pages/Typography/state.js CHANGED Viewed

@@ -1,13 +1,15 @@
 'use strict'
 export default {
-  base: 14,
-  ratio: 1.125,
-  scales: {},
-  range: [-3, +10],
+  base: 16,
+  ratio: 1.2,
+  range: [-3, +8],
   h1Matches: +6,
+  scales: {},
   sequence: {},
-  type: 'font-size',
+  vars: {},
+  // subSequence: true,
+  type: 'demo-font-size',
   title: 'Typography',
   p: 'A general configuration of type properties on the document.',

package/src/pages/Typography/typeScale.js CHANGED Viewed

@@ -1,101 +1,90 @@
 'use strict'
 import {
-  Flex, Block, Text, Grid,
-  SequenceGraph,
-  SliderToolWithCaption,
-  StaticSpacing,
-  PreviewSettings,
-  ScalesSequence,
-  CommonField
+  TypeScaleSequence,
+  SequenceSliders
 } from '@symbo.ls/components'
+import { mapSequence, sortSequence } from '@symbo.ls/utils'
 import { TypeSection } from './shared'
-const ScalingTools = {
-  extend: Flex,
+export const TypeScale = {
+  extend: TypeSection,
-  props: {
-    flow: 'column',
-    gap: 'A2'
+  header: {
+    state: {
+      title: 'TypeScale',
+      p: 'Generate text sequence by a base size and ratio'
+    }
   },
-  fontSize: {
-    extend: [SliderToolWithCaption],
-    caption: { text: 'Base size' },
-    element: {
-      style: {
-        maxWidth: `${232 / 16}em`
-      }
+  sliders: { extend: SequenceSliders },
+  p: {
+    extend: 'Paragraph',
+    props: {
+      margin: '0',
+      padding: 'B2 0',
+      text: `Base size and ratio will sequentially generate set by multiplying each next unit by the ratio.`
     }
   },
   sequence: {
-    extend: CommonField,
-    caption: { text: 'Sequence ratio' },
-    element: {
-      extend: StaticSpacing,
-      spacings: {
-        childExtend: {
-          on: {
-            click: (ev, el, s) => s.update({ ratio: el.value.text })
-          }
-        }
-      }
-    }
+    extend: TypeScaleSequence,
+    $setCollection: ({ state }) => mapSequence(state, sortSequence)
   }
 }
-export default {
-  extend: TypeSection,
+// export default {
+//   extend: TypeSection,
-  header: {
-    heading: {
-      p: { props: { text: 'Generate text sequence by a base size and ratio' } }
-    },
-    nav: {
-      add: { props: { icon: 'plus' } }
-    }
-  },
+//   header: {
+//     heading: {
+//       p: { props: { text: 'Generate text sequence by a base size and ratio' } }
+//     },
+//     nav: {
+//       add: { props: { icon: 'plus' } }
+//     }
+//   },
-  wrapper: {
-    textTest: '',
-    fonts: '',
-    cnt: {
-      extend: [Block, Grid],
-      props: {
-        gap: 'D',
-        columns: '16em auto'
-      },
-      aside: ScalingTools,
-      wrapper: {
-        settings: {
-          extend: PreviewSettings,
-          props: { margin: '0 0 B' }
-        },
-        fonts: ScalesSequence
-      },
-      sequenceSet: {
-        extend: CommonField,
-        props: { margin: 'C2 0' },
-        caption: {
-          extend: [Block, Text],
-          props: {
-            text: 'Sizing generated by this setting',
-            padding: '0 0 A 0'
-          }
-        },
-        element: {
-          extend: [SequenceGraph, Block, Text],
-          style: { '> span': { display: 'none' } }
-        }
-      }
-    }
-  }
-}
+//   wrapper: {
+//     textTest: '',
+//     fonts: '',
+//     cnt: {
+//       extend: [Block, Grid],
+//       props: {
+//         gap: 'D',
+//         columns: '16em auto'
+//       },
+//       aside: ScalingTools,
+//       wrapper: {
+//         settings: {
+//           extend: PreviewSettings,
+//           props: { margin: '0 0 B' }
+//         },
+//         fonts: ScalesSequence
+//       },
+//       sequenceSet: {
+//         extend: CommonField,
+//         props: { margin: 'C2 0' },
+//         caption: {
+//           extend: [Block, Text],
+//           props: {
+//             text: 'Sizing generated by this setting',
+//             padding: '0 0 A 0'
+//           }
+//         },
+//         element: {
+//           extend: [SequenceGraph, Block, Text],
+//           style: { '> span': { display: 'none' } }
+//         }
+//       }
+//     }
+//   }
+// }

package/src/pages/index.js CHANGED Viewed

@@ -3,6 +3,7 @@
 export * from './PageExtend'
 export * from './Components'
 export * from './Export'
+export * from './Fonts'
 export * from './Icons'
 export * from './Library'
 export * from './Color'

package/src/pages/Color/documentThemes.js DELETED Viewed

@@ -1,80 +0,0 @@
-'use strict'
-import { Notification, Flex, ClickableItem, SectionHeader, IconText, Link } from '@symbo.ls/components'
-const ThemeItem = {
-  extend: [Notification, ClickableItem],
-  // if: ({ context, state }) => {
-  //   if (!context?.SYSTEM) return
-  //   const { THEME } = context.SYSTEM
-  //   console.log(!!THEME.document[`@${state.key}`])
-  //   return !!THEME.document[`@${state.key}`]
-  // },
-  props: ({ state }) => ({
-    opacity: '.5',
-    textDecoration: 'none',
-    gap: 'Z',
-    round: 'Z',
-    padding: 'Z1 D2 A A1',
-    theme: `document @${state.key}`,
-    fontWeight: '400',
-    href: `/colors/document-theme/${state.key}`,
-    icon: {
-      size: 'Z',
-      padding: 'Z',
-      round: 'Z',
-      theme: `sepia @${state.key}`,
-      icon: state.icon
-    },
-    article: {
-      gap: 'X',
-      title: {
-        size: 'B'
-      },
-      p: {
-        fontSize: 'Y',
-        text: state.key
-      }
-    }
-  }),
-  icon: { extend: IconText },
-  article: {
-    title: {
-      text: ({ state }) => state.title
-    },
-    p: {
-      span: ({ state }) => 'prefers-color-scheme: '
-    }
-  }
-}
-export default {
-  header: {
-    extend: SectionHeader,
-    state: {
-      title: 'Global Themes',
-      p: 'Document styling and theming provides global themes of the entire app, imagine it as a <body> styling'
-    }
-  },
-  modes: {
-    extend: Flex,
-    props: { gap: 'A' },
-    childExtend: [ThemeItem, Link],
-    $setCollection: () => [{
-      title: 'Light',
-      key: 'light',
-      icon: 'sun'
-    }, {
-      title: 'Dark',
-      key: 'dark',
-      icon: 'moon'
-    }]
-  }
-}