npm - @symbo.ls/preview - Versions diffs - 0.0.11 → 0.0.13 - Mend

@symbo.ls/preview 0.0.11 → 0.0.13

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 (12) hide show

package/package.json +1 -1
package/src/pages/Color/globalThemes.js +30 -0
package/src/pages/Color/index.js +6 -5
package/src/pages/Color/{colors.js → palette.js} +0 -3
package/src/pages/Color/themes.js +22 -117
package/src/pages/DesignSystem/index.js +24 -6
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 +1 -4
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.11",
+  "version": "0.0.13",
   "repository": "https://github.com/rackai/editor",
   "main": "src/index.js",
   "scripts": {

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,8 +12,9 @@ export const Color = {
     gap: '68px'
   },
-  documentThemes,
+  globalThemes,
   line: { extend: Line },
-  palette
-  // themes
+  palette,
+  line2: { extend: Line },
+  themes
 }

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

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

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

@@ -1,131 +1,36 @@
 'use strict'
-import { COLOR, opacify } from '@symbo.ls/scratch'
-import { Block, IconText, Link, Shape, Text, Flex, SectionHeader } from '@symbo.ls/components'
+import { ThemeTemplate, SectionHeader, Grid } from '@symbo.ls/components'
-const style = {
-  width: '100%',
-  maxWidth: '25%',
-  flex: '.25 .3333 25%',
-  cursor: 'pointer',
-  color: 'white',
-  textDecoration: 'none',
-  boxSizing: 'border-box',
-  caption: {
-    marginTop: `${12 / 13}em`
-  },
-  '> *': {
-    transition: '350ms',
-    transitionProperty: 'opacity, transform',
-    opacity: 0.35
-  },
-  '&:hover > *': {
-    opacity: 1,
-    transform: 'scale(1.015)'
-  }
-}
-export const ThemeTemplate = {
-  extend: [Link, Block],
-  style,
-  props: (el) => ({
-    href: `/theme/${el.key}`,
-    padding: 'A Z1'
-  }),
-  theme: {
-    colors: {
-      extend: [Block, Text, Shape, Flex],
-      props: {
-        round: 'Z1'
-      },
-      style: {
-        boxShadow: `${COLOR.blue && opacify(COLOR.blue.value, 0.2)} 0 2px 35px`,
-        overflow: 'hidden',
-        div: {
-          flex: 1,
-          display: 'flex',
-          alignItems: 'center'
-        }
-      },
-      _icon: '',
-      sun: {
-        extend: [Shape, Block, IconText, Flex],
-        props: {
-          icon: 'sun',
-          size: 'Z',
-          padding: 'Z1 0 Z1 A',
-          round: 'Z1 0 0 Z1'
-        },
-        style: (element, state) => ({
-          background: state.background,
-          color: state.color,
-          borderBottomLeftRadius: '12px',
-          '&:only-child': {
-            borderRadius: 12
-          }
-        })
-      },
-      moon: {
-        if: (el, state) => state.themes,
-        extend: [Shape, Block, IconText, Flex],
-        props: {
-          theme: 'secondary',
-          padding: 'Z1 0 Z1 A',
-          icon: 'moon',
-          round: '0 Z1 Z1 0'
-        },
-        style: (element, state) => ({
-          background: '', // state.themes.dark.backgroundColor,
-          color: '' // state.themes.dark.color
-        })
-      }
-    }
-  },
-  caption: {
-    extend: [Block, Text],
-    props: {
-      size: 'Y',
-      padding: 'Z 0 0 0'
-    },
-    text: (el, state) => el.parent.key
-  }
+const mapThemes = (el, s) => {
+  if (!el.context.SYSTEM) return
+  const { THEME } = el.context.SYSTEM
+  const themeKeys = Object.keys(THEME)
+  return themeKeys.map(v => ({ ...THEME[v], key: v }))
 }
 export default {
-  tag: 'section',
   header: {
     extend: SectionHeader,
-    props: { padding: 'C 0 0 0' },
-    heading: {
-      caption: 'Theme',
-      p: { text: 'Themes are used to prepare color setting abstractly and apply it to any component' }
+    state: {
+      title: 'Themes',
+      p: 'Themes are used to prepare color setting abstractly and apply it to any component',
+      nav: [{
+        icon: 'plus',
+        href: '/colors/add-color'
+      }]
     }
   },
-  colors: {
-    style: {
-      display: 'flex',
-      flexWrap: 'wrap',
-      margin: '0 -16px'
-    },
-    content: (el, s) => {
-      if (!el.context.SYSTEM) return
-      const { THEME } = el.context.SYSTEM
-      const Themes = {}
-      Object.keys(THEME).map(v => (Themes[v] = { state: THEME[v].value }))
-      return {
-        childExtend: ThemeTemplate,
-        tag: 'fragment',
+  content: {
+    extend: Grid,
+    props: {
+      columns: 'repeat(5, 1fr)',
+      gap: 'C2',
+      margin: '0 -Z'
+    },
-        ...Themes
-      }
-    }
+    childExtend: ThemeTemplate,
+    $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 = [{
@@ -33,7 +34,15 @@ const NAV = [{
 }, {
   props: {
     icon: 'icons outline colored',
-    href: '/icons'
+    href: '/icons',
+    $active: {
+      icon: 'icons colored'
+    }
+  }
+}, {
+  props: {
+    icon: 'typeface colored',
+    href: '/fonts'
   }
 }, {
   props: {
@@ -59,6 +68,7 @@ export const DesignSystem = {
     maxWidth: '100%',
     width: '100%',
     flow: 'row',
+    align: 'flex-start flex-start',
     gap: 'B1',
     padding: 'D2 A B1'
   },
@@ -69,7 +79,7 @@ export const DesignSystem = {
     '/theme': ColorEditor,
     // '/theme': Theme,
     '/typography': Typography,
-    // '/font': Font,
+    '/fonts': Fonts,
     '/space': Spaces,
     // '/sequence': Sequence,
     '/shape': Shapes,
@@ -81,14 +91,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

@@ -4,7 +4,6 @@ import { SectionHeader } from '@symbo.ls/components'
 import state from './state'
-import documentFonts from './docFonts'
 import documentStyle from './docStyles'
 import typeScale from './typeScale'
@@ -14,9 +13,7 @@ export const Typography = {
   state,
   routes: {
-    '/': documentFonts,
-    '/document-fonts': documentFonts,
-    '/type-scale': typeScale,
+    '/': typeScale,
     '/document-styles': documentStyle
   },

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'
-    }]
-  }
-}