@symbo.ls/preview 0.0.66 → 0.0.68

package/package.json

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

package/src/components/ColorsPalette.js

@@ -1,64 +1,69 @@
 'use strict'
 
-import { Flex, Grid } from '@symbo.ls/components'
-
-const props = {
-  flow: 'column',
-  gap: 'A',
-  opacity: '.35'
-}
+import { ClickableItem, CommonField, Flex, Grid } from '@symbo.ls/components'
 
 export const ColorsPalette = {
-  props,
+  extend: CommonField,
+
+  props: {
+    gap: 'Z',
+    element: {
+      margin: '0 -X',
+      flow: 'column',
+      gap: 'Z2'
+    }
+  },
 
-  extend: Flex,
-  childExtend: {
-    extend: Grid,
-    // text: 'B',
+  title: { text: 'Suggestions' },
+  element: {
+    extend: Flex,
+    childExtend: {
+      extend: [ClickableItem, Grid],
 
-    props: ({ state }) => ({
-      minWidth: '190px',
-      round: 'A',
-      // round: 'D',
-      columns: 'repeat(3, 1fr)',
-      childProps: {
-        height: 'B2'
-        // style: { border: '4px solid red' }
-      },
-      color1: {
-        background: state.color1,
-        style: { borderTopLeftRadius: '10px', borderBottomLeftRadius: '10px' }
-      },
-      color2: { background: state.color2 },
-      color3: {
-        background: state.color3,
-        style: { borderTopRightRadius: '10px', borderBottomRightRadius: '10px' }
+      props: ({ state }) => ({
+        minWidth: '190px',
+        round: 'Z2',
+        columns: 'repeat(3, 1fr)',
+        overflow: 'hidden',
+        opacity: '.35',
+        childProps: { height: 'B2' },
+
+        color1: { background: state[0] },
+        color2: { background: state[1] },
+        color3: { background: state[2] }
+      }),
+
+      color1: {},
+      color2: {},
+      color3: {},
+
+      on: {
+        click: (event, element, state) => {
+          state.parent.update(state.parse())
+        }
       }
-    }),
+    },
 
-    color1: {},
-    color2: {},
-    color3: {}
-  },
-  $setStateCollection: () => [{
-    color1: '#5F6C37',
-    color2: '#F1E0BC',
-    color3: '#FFFFFF'
-  }, {
-    color1: '#CCD5AE',
-    color2: '#FEF9E1',
-    color3: '#D3A374'
-  }, {
-    color1: '#CDB4DB',
-    color2: '#FEAFCC',
-    color3: '#A2D2FF'
-  }, {
-    color1: '#274553',
-    color2: '#E9C46A',
-    color3: '#E76F51'
-  }, {
-    color1: '#8EC9E6',
-    color2: '#013047',
-    color3: '#FFB703'
-  }]
+    $setStateCollection: () => [[
+      '#5F6C37',
+      '#F1E0BC',
+      '#FFFFFF'
+    ], [
+      '#CCD5AE',
+      '#FEF9E1',
+      '#D3A374'
+    ], [
+      '#CDB4DB',
+      '#FEAFCC',
+      '#A2D2FF'
+    ], [
+      '#274553',
+      '#E9C46A',
+      '#E76F51'
+    ], [
+      '#8EC9E6',
+      '#013047',
+      '#FFB703'
+    ]]
+  }
 }

package/src/components/index.js

@@ -13,7 +13,6 @@ export * from './ThemeButtons'
 export * from './ContinueButton'
 export * from './SlidersWithResponsive'
 export * from './HeaderHeading'
-export * from './UploadImage'
 export * from './ColorsPalette'
 export * from './ShapePreview'
 export * from './SpacingPreview'

package/src/index.js

@@ -38,7 +38,7 @@ const app = DOM.create({
     },
 
     on: {
-      update: element => {
+      render: element => {
         const { pathname, hash } = window.location
         const url = pathname + hash
         router(element, url, {}, { updateState: false })

package/src/pages/Export/scene.js

@@ -53,6 +53,13 @@ export default {
             spacingRatio: s.ratio,
             direction: s.direction
           }, { preventUpdate: true })
+
+          // const componentNode = el.comp.node
+          // const SVG = elementToSVG(componentNode)
+          // const svgString = new window.XMLSerializer().serializeToString(SVG)
+          // console.log(SVG)
+          // console.log(svgString)
+
           updateReset()
         }
       }

package/src/pages/Init/ChooseEnvironment.js

@@ -2,7 +2,7 @@
 
 import { Flex, CommonField, WiderButton } from '@symbo.ls/components'
 
-import { HeaderHeading, InitPage } from '../../components'
+import { InitPage } from '../../components'
 
 const header = {
   props: {

package/src/pages/Init/CreateDocumentTheme.js

@@ -22,7 +22,7 @@ const modes = {
       minWidth: 'G3',
       maxWidth: '406px',
       position: 'relative',
-      maxHeight: 'F',
+      maxHeight: 'E2',
       boxSizing: 'content-box',
       align: 'flex-start flex-start',
       padding: 'A2 A X X1',
@@ -41,10 +41,12 @@ const modes = {
 
       article: {
         padding: 'X2 - - -',
-        title: { fontSize: 'D2' }
+        title: { fontSize: 'D2', fontWeight: 'bold' }
       },
 
       ':hover': {
+        opacity: '1',
+
         style: {
           '[buttons]': {
             opacity: '1',
@@ -62,7 +64,7 @@ const modes = {
       transition: 'B default-bezier',
       transitionProperty: 'transform, opacity',
       opacity: '0',
-      margin: 'C1 0 0 0',
+      margin: 'B2 0 0 0',
       alignSelf: 'flex-end'
     },
 
@@ -78,7 +80,7 @@ const modes = {
   },
 
   $setStateCollection: () => [{
-    title: 'Dark',
+    title: 'Day',
     key: 'light',
     icon: 'sun',
     background: 'white'

package/src/pages/Init/CreatePalette.js

@@ -17,10 +17,10 @@ const colors = {
       width: '100%',
       title: { text: state.title },
       element: {
-        padding: 'Y Y Y Z1',
+        padding: 'Z',
         title: {
           box: {
-            boxSize: 'A2 A2',
+            boxSize: 'B B',
             position: 'relative',
             zIndex: 2,
             background: 'white .05',
@@ -36,7 +36,7 @@ const colors = {
             round: 'Z',
             position: 'absolute',
             inset: '0 0 0 0',
-            padding: '- - - B2+W',
+            padding: '- - - B2+W1',
             textAlign: 'start',
             lineHeight: '100%',
             placeholder: 'Color value',
@@ -55,7 +55,7 @@ const colors = {
           tag: 'input',
           attr: {
             type: 'color',
-            value: ({ state }) => 'rgba(255,255,255,0.05)'
+            value: ({ state }) => state.value
           },
           props: {
             border: '0',
@@ -89,12 +89,15 @@ const colors = {
     }
   },
 
-  $setStateCollection: () => [{
-    title: 'Accent color'
+  $setStateCollection: ({ state }) => [{
+    title: 'Accent color',
+    value: state[0]
   }, {
-    title: 'Secondary Color'
+    title: 'Secondary Color',
+    value: state[1]
   }, {
-    title: 'Inactive Color'
+    title: 'Inactive Color',
+    value: state[2]
   }]
 }
 
@@ -111,9 +114,12 @@ const content = {
 
   colors,
 
-  UploadImage: {},
+  ImageColorPicker: {},
   ColorsPalette: {
-    margin: '- - auto'
+    props: ({ state }) => ({
+      hide: state.imageUrl,
+      margin: '- - auto'
+    })
   }
 }
 

package/src/pages/Init/index.js

@@ -13,7 +13,7 @@ export const Init = {
   props: {
     boxSize: '100% 100%',
     gap: 'A',
-    padding: '10% E1 D1 15%'
+    padding: '7.5% E1 D1 12.5%'
   },
 
   define: { routes: param => param },

package/src/style.js

@@ -3,5 +3,9 @@
 export default {
   boxSizing: 'border-box',
   overflow: 'hidden',
-  overflowY: 'auto'
+  overflowY: 'auto',
+  cursor: 'default',
+  'button, a': {
+    cursor: 'default'
+  }
 }

package/src/components/UploadImage.js

@@ -1,28 +0,0 @@
-'use strict'
-
-import { Flex, CommonField, Upload, ClickableItem } from '@symbo.ls/components'
-
-export const UploadImage = {
-  extend: [CommonField],
-  Flex,
-  props: {
-    title: { text: 'Pick from the picture' },
-    element: {
-      border: 'none',
-      background: 'gray1',
-      padding: 'Z A Z Z',
-      gap: 'Z',
-      flow: 'row',
-      icon: { style: { fontSize: '52px' } },
-      p: {
-        text: 'Upload or drop the image'
-      }
-    }
-  },
-  title: {},
-  element: {
-    extend: [Upload, Flex, ClickableItem],
-    icon: { style: { fontSize: '52px' } },
-    p: { span: null }
-  }
-}

package/src/pages/Color/CreatePalette.js

@@ -1,134 +0,0 @@
-'use strict'
-
-import { Flex, ColorSelectWithTitle } from '@symbo.ls/components'
-import { Input } from 'smbls'
-
-import { ContinueButton, UploadImage, ColorsPalette } from '../../components'
-
-const colors = {
-  extend: Flex,
-  props: {
-    width: 'F3',
-    flow: 'column',
-    gap: 'B1',
-    opacity: '.75'
-  },
-  childExtend: {
-    extend: ColorSelectWithTitle,
-    props: ({ state }) => ({
-      width: '100%',
-      title: { text: state.title },
-      element: {
-        padding: 'Y Y Y Z1',
-        title: {
-          box: {
-            boxSize: 'A2 A2',
-            position: 'relative',
-            zIndex: 2,
-            background: 'white .05',
-            '::-webkit-color-swatch-wrapper': {
-              padding: '0'
-            },
-            '::-webkit-color-swatch': {
-              border: 'none',
-              round: 'Y'
-            }
-          },
-          value: {
-            round: 'Z',
-            position: 'absolute',
-            inset: '0 0 0 0',
-            padding: '- - - B2+W',
-            textAlign: 'start',
-            lineHeight: '100%',
-            placeholder: 'Color value',
-            ':focus': {
-              outline: 'solid, X, blue .3'
-            }
-          }
-        }
-      }
-    }),
-    title: {},
-    element: {
-      title: {
-        box: {
-          extend: 'Focusable',
-          tag: 'input',
-          attr: {
-            type: 'color',
-            value: ({ state }) => 'rgba(255,255,255,0.05)'
-          },
-          props: {
-            border: '0',
-            padding: '0',
-            style: {
-              appearance: 'none'
-            }
-          },
-          on: {
-            update: (el, s) => {
-              el.node.value = s.value || ''
-            },
-            input: (ev, el, s) => {
-              s.update({ value: el.node.value || '' })
-            }
-          }
-        },
-        value: {
-          extend: Input,
-          on: {
-            update: (el, s) => {
-              el.node.value = s.value || ''
-            },
-            input: (ev, el, s) => {
-              s.update({ value: el.node.value || '' })
-            }
-          }
-        }
-      },
-      buttons: null
-    }
-  },
-
-  $setStateCollection: () => [{
-    title: 'Accent color'
-  }, {
-    title: 'Secondary Color'
-  }, {
-    title: 'Inactive Color'
-  }]
-}
-
-const content = {
-  extend: Flex,
-  props: {
-    margin: '- - F -',
-    align: 'flex-start',
-    gap: 'E2',
-    ColorsPalette: {
-      margin: '- - - auto'
-    }
-  },
-
-  colors,
-  UploadImage,
-  ColorsPalette
-}
-
-const props = {
-  // style: { border: '5px solid red' }
-}
-
-export const CreatePallete = {
-  props,
-
-  HeaderHeading: {
-    margin: '- - D -',
-    title: { text: `Let's get started` },
-    h1: { text: 'Create your palette' }
-  },
-
-  content,
-  ContinueButton
-}

package/src/pages/Color/FontText.js

@@ -1,13 +0,0 @@
-'use strict'
-
-export const fontText = {
-
-  HeaderHeading: {
-    props: { margin: '- - D2 -' },
-    caption: { text: `Let's make sure` },
-    h1: { text: 'Texts look good?' }
-  },
-
-  FontText: {},
-  ContinueButton: { props: { margin: 'F - - -' } }
-}

package/src/pages/Color/chooseEnvironment.js

@@ -1,132 +0,0 @@
-'use strict'
-
-import { Flex, CommonField, WiderButton, Button } from '@symbo.ls/components'
-
-import { HeaderHeading } from '../../components'
-
-const header = {
-  extend: HeaderHeading,
-  props: {
-    margin: '- - D -',
-    caption: { text: 'And finally' },
-    h1: {
-      text: 'Choose your environment',
-      flow: 'row-reverse',
-      align: 'center flex-end',
-      span: {
-        text: 'if any',
-        fontWeight: '300',
-        opacity: '.85',
-        padding: '- - - X'
-      },
-      span2: {
-        text: ',',
-        fontWeight: '300',
-        opacity: '.85'
-      }
-    }
-  },
-
-  caption: {},
-  h1: {
-    extend: Flex,
-    span: {},
-    span2: { }
-  }
-}
-
-const commonField = {
-  extend: CommonField,
-  props: {
-    gap: 'Z2',
-    element: {
-      gap: 'A',
-      maxWidth: 'I',
-      alignItems: 'center',
-      childProps: {
-        // boxSize: 'B2 C',
-        // padding: '0',
-        background: 'gray2',
-        color: 'white .8',
-        round: 'Z1'
-      }
-    }
-  },
-
-  title: {},
-  element: {
-    extend: Flex,
-    childExtend: {
-      extend: WiderButton
-    }
-  }
-}
-const yourEnvironment = {
-  extend: commonField,
-  props: {
-    margin: '- - C2 -',
-    title: { text: 'Your environment' },
-    element: {
-      childProps: {}
-    }
-  },
-
-  title: {},
-  element: {
-    ...[
-      { props: { icon: 'inputOutline' } },
-      { props: { icon: 'accessibilityOutline' } },
-      {
-        props: {
-          boxSizing: 'content-box',
-          padding: 'Z C3',
-          border: '2px solid red',
-          style: { borderRadius: '50px' },
-          span: {
-            text: `I'm just playing`,
-            fontSize: 'Z'
-          }
-        },
-        icon: null,
-        span: {}
-      },
-
-      {
-        props: {
-          icon: 'inputOutline',
-          margin: '- - - auto'
-        }
-      }
-    ]
-  }
-}
-
-const yourFramework = {
-  extend: commonField,
-  props: {
-    margin: '- - F -',
-    title: { text: 'Your framework' },
-    element: { childProps: { icon: 'info' } }
-  },
-  title: {},
-  element: { ...[{}, {}, {}, {}, {}, {}] }
-}
-
-const createSymbolsButton = {
-  extend: Button,
-  props: {
-    text: 'create symbols',
-    fontSize: 'Z2',
-    padding: 'Z1 C',
-    textTransform: 'capitalize',
-    round: 'C',
-    theme: 'primary'
-  }
-}
-
-export const chooseEnvironment = {
-  header,
-  yourEnvironment,
-  yourFramework,
-  createSymbolsButton
-}

package/src/pages/Color/themeLightDark.js

@@ -1,121 +0,0 @@
-'use strict'
-
-import { Flex, GlobalThemeTemplate, Hoverable } from '@symbo.ls/components'
-
-import { ContinueButton, HeaderHeading } from '../../components'
-
-const header = {
-  extend: HeaderHeading
-}
-
-const paragraphs = {
-  extend: Flex,
-  childExtend: { tag: 'p' },
-  ...[{ text: 'To personalize your Symbols experience, we need to get started with themes' },
-    { text: 'Please fill in the document dark and light themes' }]
-}
-
-const modes = {
-  extend: Flex,
-  props: {
-    gap: 'C',
-    margin: '- - E2 -'
-  },
-  childExtend: {
-    extend: [Hoverable, GlobalThemeTemplate],
-    props: ({ state }) => ({
-      minWidth: 'G3',
-      maxWidth: '406px',
-      position: 'relative',
-      maxHeight: 'F',
-      boxSizing: 'content-box',
-      align: 'flex-start flex-start',
-      padding: 'A2 A X X1',
-      overflow: 'hidden',
-      round: 'A1',
-      background: state.background,
-      wrap: 'wrap',
-      icon: {
-        padding: '0',
-        boxSize: 'C C',
-        margin: '- - - Z2',
-        background: 'yellow .3',
-        style: {
-          pointerEvents: 'none',
-          '> svg': { fontSize: `${22 / 16}em` }
-        }
-      },
-      article: {
-        padding: 'X2 - - -',
-        title: { fontSize: 'D2' }
-      },
-      span: { text: 'hover to change' },
-
-      ':hover': {
-        style: {
-          '[buttons]': {
-            opacity: '1',
-            transform: 'translate3d(0, 0, 0)'
-          }
-        }
-      }
-    }),
-
-    icon: {},
-    article: {},
-
-    ThemeButtons: {
-      transform: 'translate3d(0, 150%, 0)',
-      transition: 'B default-bezier',
-      transitionProperty: 'transform, opacity',
-      opacity: '0',
-      margin: 'C1 0 0 0',
-      alignSelf: 'flex-end'
-    },
-
-    span: {
-      props: {
-        position: 'absolute',
-        bottom: 'A2',
-        left: 'B',
-        fontSize: 'Z',
-        color: 'gray7',
-        style: { fontStyle: 'italic' }
-      }
-    }
-  },
-
-  $setStateCollection: () => [{
-    title: 'Night',
-    key: 'dark',
-    icon: 'moon',
-    background: 'gray3'
-  }, {
-    title: 'Dark',
-    key: 'light',
-    icon: 'sun',
-    background: 'white'
-  }]
-}
-
-const props = {
-  header: { margin: '- - C2 -' },
-  paragraphs: {
-    gap: 'E',
-    margin: '- - D1 -',
-    childProps: {
-      fontSize: 'Z1',
-      color: 'gray6',
-      maxWidth: `${272 / 14}em`
-    }
-  }
-}
-
-export const themeLightDark = {
-  props,
-
-  header,
-  paragraphs,
-  modes,
-  ContinueButton
-}