@symbo.ls/preview 2.0.7 → 2.6.0

package/src/pages/Fonts/fontFaces.js

@@ -0,0 +1,50 @@
+'use strict'
+
+import { Grid, Hoverable, FontObject } from '@symbo.ls/components'
+import { TypeSection } from '../Typography/shared'
+
+const mapFonts = (el, s) => {
+  if (!s.__system) return
+  const { FONT } = s.__system
+  const fontKeys = Object.keys(FONT)
+
+  return fontKeys.map(v => {
+    const font = FONT[v]
+    const weights = Object.keys(font)
+    const weightsLength = weights.length
+    const fontWeightCaption = weights[0] === 'variable' ? 'variable' : `${weightsLength} style${weightsLength > 1 ? 's' : ''}`
+
+    return {
+      title: v,
+      href: `/fonts/font-settings/${v}`,
+      labels: [
+        { icon: 'fontVariable', text: fontWeightCaption }
+      ]
+    }
+  })
+}
+
+export default {
+  extend: TypeSection,
+  header: {
+    state: {
+      title: 'Document Fonts',
+      p: 'Document @font-face, default and backup fonts',
+      nav: [{
+        icon: 'plus',
+        href: '/fonts/upload-font'
+      }]
+    }
+  },
+
+  content: {
+    extend: Grid,
+    props: {
+      columns: 'repeat(2, 1fr)',
+      gap: 'A',
+      margin: '0 -Z'
+    },
+    childExtend: [FontObject, Hoverable],
+    $setStateCollection: mapFonts
+  }
+}

package/src/pages/Fonts/fontFamilies.js

@@ -0,0 +1,47 @@
+'use strict'
+
+import { Grid, Hoverable, FontFamilyObject } from '@symbo.ls/components'
+import { TypeSection } from '../Typography/shared'
+
+const mapFontFamilies = (el, s) => {
+  if (!s.__system) return
+  const { FONT_FAMILY } = s.__system
+  const fontFamilyKeys = Object.keys(FONT_FAMILY)
+
+  return fontFamilyKeys.map(v => {
+    const val = FONT_FAMILY[v]
+    if (v === 'default') return
+    return {
+      title: v,
+      href: `/fonts/font-family/${v}`,
+      val
+    }
+  }).filter(v => v)
+}
+
+export default {
+  extend: TypeSection,
+  header: {
+    state: {
+      title: 'Font Families',
+      p: 'Setup a set and fallback fonts as font families',
+      nav: [{
+        icon: 'plus',
+        href: '/fonts/add-font-family',
+        scrollToTop: false
+      }]
+    }
+  },
+
+  content: {
+    extend: Grid,
+    props: {
+      columns: 'repeat(4, 1fr)',
+      gap: 'A',
+      margin: '0 -Z'
+    },
+
+    childExtend: [FontFamilyObject, Hoverable],
+    $setStateCollection: mapFontFamilies
+  }
+}

package/src/pages/Fonts/index.js

@@ -0,0 +1,15 @@
+'use strict'
+
+import fontFaces from './fontFaces'
+import fontFamilies from './fontFamilies'
+
+import { state } from './state'
+
+export const Fonts = {
+  state,
+
+  fontFaces,
+  line3: { extend: 'Line' },
+
+  fontFamilies
+}

package/src/pages/Fonts/state.js

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

package/src/pages/Icons/index.js

@@ -1,88 +1,92 @@
 'use strict'
 
-import style, { styleIconsOption } from './style'
+import * as ACCESSIBILITY from '@symbo.ls/icons/src/accessibility'
+import * as BOXMODEL from '@symbo.ls/icons/src/boxModel'
+import * as DISPLAY from '@symbo.ls/icons/src/display'
+import * as INTERACTIVE from '@symbo.ls/icons/src/interactive'
+import * as LOGOS from '@symbo.ls/icons/src/logos'
+import * as SIGNS from '@symbo.ls/icons/src/signs'
+import * as STYLE from '@symbo.ls/icons/src/style'
+import * as KEYBOARD from '@symbo.ls/icons/src/keyboard'
+import * as SVG from '@symbo.ls/icons/src/svg'
+import * as TECH from '@symbo.ls/icons/src/tech'
+import * as TEXT from '@symbo.ls/icons/src/text'
 
-import { IconText, Direction, ClickableItem, SectionHeader, sprite, Grid, Block } from '@symbo.ls/all'
-import { PageProto } from '..'
+import { IconsGroup } from '../../components'
 
-const IconsOption = {
-  style: styleIconsOption,
-  header: { proto: SectionHeader },
-
-  iconSet: {
-    proto: Grid,
-    props: {
-      columns: 'repeat(12, 1fr)',
-      gap: 'Z'
-    }
-  }
+const ArraizeIconsCategory = (library, state) => {
+  const list = Object.keys(library)
+  if (state.searched) return list.filter(value => value.includes(state.searched))
+  return list
 }
 
-const ICONS = Object.keys(sprite).map(key => ({ key: '_' + key }))
+const ICON_GROUPS = state => [{
+  title: 'Document Icons',
+  p: 'All ungrouped document icons',
+  list: ArraizeIconsCategory(SVG, state)
+}, {
+  title: 'Accessibility',
+  list: ArraizeIconsCategory(ACCESSIBILITY, state)
+}, {
+  title: 'Box Model',
+  list: ArraizeIconsCategory(BOXMODEL, state)
+}, {
+  title: 'Display',
+  list: ArraizeIconsCategory(DISPLAY, state)
+}, {
+  title: 'Interactive',
+  list: ArraizeIconsCategory(INTERACTIVE, state)
+}, {
+  title: 'Logos',
+  list: ArraizeIconsCategory(LOGOS, state)
+}, {
+  title: 'Signs',
+  list: ArraizeIconsCategory(SIGNS, state)
+}, {
+  title: 'Style',
+  list: ArraizeIconsCategory(STYLE, state)
+}, {
+  title: 'Keys',
+  list: ArraizeIconsCategory(KEYBOARD, state)
+}, {
+  title: 'Tech',
+  list: ArraizeIconsCategory(TECH, state)
+}, {
+  title: 'Text',
+  list: ArraizeIconsCategory(TEXT, state)
+}]
 
-const copyStringToClipboard = str => {
-  var el = document.createElement('textarea')
-  el.value = str
-  el.setAttribute('readonly', '')
-  el.style = { position: 'absolute', left: '-9999px' }
-  document.body.appendChild(el)
-  el.select()
-  document.execCommand('copy')
-  document.body.removeChild(el)
-}
+export const Icons = {
+  state: {},
 
-const documentIcons = {
-  proto: IconsOption,
+  SectionHeader: {
+    extend: true,
 
-  header: {
-    props: { padding: 'C 0 B1 0' },
     heading: {
-      caption: { props: { text: 'Document Icons' } },
-      p: { props: { text: 'All ungrouped document icons' } }
+      title: 'Icons',
+      p: 'Unlike typography, component may has the properties of padding, gap, width and rest.'
     },
-    nav: {
-      ...[
-        {
-          props: {
-            icon: 'upload',
-            href: '/icons/upload-icon'
-          }
-        },
-        { props: { icon: 'arrowAngleUp' } }
-      ]
-    }
-  },
 
-  iconSet: {
-    childProto: {
-      proto: [ClickableItem, IconText, Direction, Block],
-      props: el => ({
-        round: 'Z',
-        size: 'D',
-        aspectRatio: '1 / 1',
-        flexAlign: 'center center',
-        icon: el.key.slice(1)
-      }),
-      on: {
-        click: (event, element, state) => {
-          copyStringToClipboard(element.key.slice(1))
-        }
-      }
+    Search: {
+      margin: '- -Z2 - -',
+      placeholder: 'Search Icons'
     },
 
-    ...ICONS
-  }
-}
-
-export default {
-  style,
+    nav: null
+  },
 
-  proto: PageProto,
+  Line: {},
 
-  content: {
-    tag: 'section',
+  Flex: {
+    props: {
+      flow: 'column',
+      gap: 'D1'
+    },
 
-    documentIcons
-    // navigationIcons
+    childExtend: IconsGroup,
+    $setStateCollection: (el, state) => {
+      el.removeContent()
+      return ICON_GROUPS(state)
+    }
   }
 }

package/src/pages/Icons/style.js

@@ -1,19 +1 @@
 'use strict'
-
-export const styleIconsOption = {
-  '> div': {
-    '> div': {
-      '&:hover': {
-        background: 'rgba(255, 255, 255, .06)'
-      },
-      '&:hover > svg': {
-        color: 'white'
-      }
-    }
-  }
-}
-
-export default {
-  section: {
-  }
-}

package/src/pages/Init/ChooseEnvironment.js

@@ -0,0 +1,104 @@
+'use strict'
+
+import { Flex, CommonField, WiderButton, ClickableItem } from '@symbo.ls/components'
+
+import { InitPage } from '../../components'
+
+const ButtonOptions = {
+  tag: 'section',
+  extend: CommonField,
+
+  props: {
+    gap: 'Z2',
+    element: {
+      gap: 'A',
+      maxWidth: 'I',
+      alignItems: 'center',
+      childProps: {
+        theme: 'quaternary',
+        color: 'white .8',
+        round: 'Z1',
+        fontSize: 'A2'
+      }
+    }
+  },
+
+  title: {},
+  element: {
+    extend: Flex,
+    childExtend: {
+      extend: [WiderButton, ClickableItem],
+      on: {
+        click: (ev, el, s) => {
+          s.parent.update({ })
+        }
+      }
+    }
+  }
+}
+
+const yourEnvironment = {
+  extend: ButtonOptions,
+  props: {
+    margin: '- - C2 -',
+    title: { text: 'Your environment' }
+  },
+
+  title: {},
+  element: { ...[
+    { props: { icon: 'html' } },
+    { props: { icon: 'js outline' } },
+    { props: { icon: 'ts outline' } },
+    { props: { icon: 'pdf' } },
+    {
+      props: {
+        boxSizing: 'content-box',
+        padding: 'Z B',
+        width: 'auto',
+        borderRadius: 'B',
+        text: `I'm just playing`,
+        aspectRatio: 'auto'
+      },
+      icon: null
+    }
+  ] }
+}
+
+const yourFramework = {
+  extend: ButtonOptions,
+  props: {
+    margin: '- - F -',
+    title: { text: 'Your framework' }
+  },
+  title: {},
+  element: { ...[
+    { props: { icon: 'domql' } },
+    { props: { icon: 'react' } },
+    { props: { icon: 'vue' } },
+    { props: { icon: 'angular' } },
+    { props: { icon: 'svelte' } },
+    { props: { icon: 'webComponents' } }
+  ] }
+}
+
+export const ChooseEnvironment = {
+  extend: InitPage,
+
+  back: { props: { href: '/init/font' } },
+
+  HeaderHeading: {
+    margin: '- - D -',
+
+    Caption: { text: 'And finally,' },
+    H1: { text: 'Your environment' }
+  },
+
+  yourEnvironment,
+  yourFramework,
+
+  ContinueButton: {
+    text: 'Create Symbols',
+    theme: 'primary',
+    href: '/design-system'
+  }
+}

package/src/pages/Init/CreateDocumentTheme.js

@@ -0,0 +1,166 @@
+'use strict'
+
+import { Clickable, Flex, GlobalThemeTemplate } from '@symbo.ls/components'
+import { InitPage } from '../../components'
+
+const paragraphs = {
+  extend: Flex,
+  childExtend: { tag: 'p' },
+  ...['To personalize your Symbols experience, we need to get started with themes',
+    'Please fill in the document dark and light themes']
+}
+
+const modes = {
+  extend: Flex,
+  props: {
+    gap: 'C',
+    margin: '- -Z E2'
+  },
+
+  childExtend: {
+    extend: [Clickable, GlobalThemeTemplate],
+
+    props: ({ state }) => ({
+      minWidth: 'G3',
+      maxWidth: '406px',
+      position: 'relative',
+      maxHeight: 'E2',
+      boxSizing: 'content-box',
+      align: 'flex-start flex-start',
+      padding: 'A A Z',
+      overflow: 'hidden',
+      round: 'A1',
+      color: state.color,
+      background: state.background,
+      wrap: 'wrap',
+      transitionProperty: 'transform, opacity, border-radius',
+
+      icon: {
+        boxSize: 'C C',
+        color: 'yellow 1 +5',
+        background: 'yellow .2',
+        pointerEvents: 'none',
+        fontSize: `B`
+      },
+
+      article: {
+        padding: 'X2 - - -',
+        title: { fontSize: 'D2', fontWeight: 'bold' }
+      },
+
+      '.active': {
+        opacity: '1',
+        round: 'A1 A1 Y2 Y2',
+
+        style: {
+          '[buttons]': {
+            opacity: '1',
+            transform: 'translate3d(0, 0, 0)'
+          }
+        }
+      }
+    }),
+
+    icon: {},
+    article: {},
+
+    ThemeButtons: {
+      position: 'absolute',
+      left: 'W',
+      right: 'W',
+      bottom: 'W',
+      opacity: '0',
+      transition: 'B defaultBezier',
+      transitionProperty: 'transform, opacity',
+      transform: 'translate3d(0, 100%, 0)',
+      columnGap: 'W'
+    },
+
+    Span: {
+      width: '100%',
+      fontSize: 'Z',
+      color: 'gray7',
+      fontStyle: 'italic',
+      margin: 'C 0 0 X2',
+      text: 'click to change'
+    },
+
+    on: {
+      click: (ev, el, s) => {
+        if (ev.target === el.node) {
+          el.setProps({ active: !el.props.active })
+        }
+      },
+      stateUpdated: (el, s, changes) => {
+        const { color, background } = s
+        s.systemUpdate({
+          THEME: {
+            document: {
+              ['@' + s.key]: { color, background }
+            }
+          }
+        }, { preventUpdate: true })
+      }
+    }
+  },
+
+  $setStateCollection: ({ state }) => state.values
+}
+
+export const CreateDocumentTheme = {
+  extend: InitPage,
+
+  props: {
+    flow: 'column',
+    align: 'flex-start',
+
+    paragraphs: {
+      gap: 'E',
+      margin: '- - D1 -',
+      childProps: {
+        color: 'gray6',
+        maxWidth: `G1`
+      }
+    }
+  },
+
+  back: { props: { href: '/init/' } },
+
+  HeaderHeading: {},
+  paragraphs,
+  modes,
+
+  ContinueButton: {
+    href: '/init/pallete'
+  },
+
+  on: {
+    init: ({ state }) => {
+      const { THEME, COLOR } = state.__system
+      const { document } = THEME
+      const dark = document['@dark']
+      const light = document['@light']
+
+      const colorRef = {
+        light: {
+          key: 'light',
+          title: 'Day',
+          icon: 'sun',
+          color: COLOR[light.color] || light.color || '#000000',
+          background: COLOR[light.background] || light.background || '#FFFFFF'
+        },
+        dark: {
+          key: 'dark',
+          title: 'Night',
+          icon: 'moon',
+          color: COLOR[dark.color] || dark.color || '#FFFFFF',
+          background: COLOR[dark.background] || dark.background || '#000000'
+        }
+      }
+
+      state.update({
+        values: colorRef
+      }, { preventUpdate: true, ignoreInitUpdate: true })
+    }
+  }
+}

package/src/pages/Init/CreatePalette.js

@@ -0,0 +1,72 @@
+'use strict'
+
+import { Flex, ColorPickerWithTitle } from '@symbo.ls/components'
+import { InitPage } from '../../components'
+
+const colors = {
+  extend: Flex,
+  props: {
+    width: 'F3',
+    flow: 'column',
+    gap: 'B1',
+    opacity: '.75'
+  },
+
+  childExtend: {
+    extend: ColorPickerWithTitle,
+    props: ({ state }) => ({
+      title: { text: state.title }
+    })
+  },
+
+  $setStateCollection: ({ state }) => [{
+    title: 'Accent color',
+    value: state[0]
+  }, {
+    title: 'Secondary Color',
+    value: state[1]
+  }, {
+    title: 'Inactive Color',
+    value: state[2]
+  }]
+}
+
+const content = {
+  extend: Flex,
+  props: {
+    margin: '- - F -',
+    align: 'flex-start',
+    gap: 'E2',
+    ColorsPalette: {
+      margin: '- - - auto'
+    }
+  },
+
+  colors,
+
+  ImageColorPicker: {},
+  ColorsPalette: {
+    props: ({ state }) => ({
+      hide: state.imageUrl,
+      margin: '- - auto'
+    })
+  }
+}
+
+export const CreatePallete = {
+  extend: InitPage,
+
+  back: { props: { href: '/init/theme' } },
+
+  HeaderHeading: {
+    margin: '- - D -',
+    Caption: { text: `Let's get started` },
+    H1: { text: 'Create your palette' }
+  },
+
+  content,
+
+  ContinueButton: {
+    href: '/init/font'
+  }
+}

package/src/pages/Init/FontText.js

@@ -0,0 +1,23 @@
+'use strict'
+
+import { InitPage } from '../../components'
+
+export const FontText = {
+  extend: InitPage,
+
+  back: { props: { href: '/init/pallete' } },
+
+  HeaderHeading: {
+    props: { margin: '- - D2 -' },
+    Caption: { text: `Let's make sure` },
+    H1: { text: 'Texts look good?' }
+  },
+
+  FontText: {
+    margin: '- -Z'
+  },
+
+  ContinueButton: {
+    href: '/init/env'
+  }
+}