@symbo.ls/preview 0.0.57 → 0.0.58

package/.symbols/library.js

@@ -78,9 +78,9 @@ const define = {
   }
 }
 
-export const LIBRARY = []
+// export const LIBRARY = []
 
-export const SYMBOLS_LIBRARY = Object.keys(lib).map(key => {
+export const LIBRARY = Object.keys(lib).map(key => {
   const component = lib[key]
   const base = define[key] || define.default
   return deepMerge({

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "0.0.57",
+  "version": "0.0.58",
   "repository": "https://github.com/rackai/editor",
   "main": "src/index.js",
   "scripts": {
@@ -28,7 +28,7 @@
     "@symbo.ls/components": "latest",
     "@symbo.ls/config": "latest",
     "@symbo.ls/icons": "latest",
-    "@symbo.ls/init": "latest",
+    "@symbo.ls/init": "^1.1.3",
     "@symbo.ls/scratch": "latest",
     "@symbo.ls/utils": "latest",
     "domql": "^1.5.7",

package/src/app.js

@@ -4,6 +4,10 @@ import './config'
 
 import 'domql/packages/emotion'
 import { router } from '@domql/router'
+import { init } from '@symbo.ls/init'
+import { openModal } from '@symbo.ls/components'
+
+// import { send } from '@symbo.ls/socket/client'
 
 import { state } from './state'
 import {
@@ -12,7 +16,6 @@ import {
   Export,
   Library
 } from './pages'
-import { Modal, openModal } from '@symbo.ls/components'
 
 const SUB_ROUTES = {}
 Object.keys(DesignSystem.routes).map(route => {
@@ -55,7 +58,7 @@ const App = {
     props: { position: 'relative' }
   },
 
-  modal: Modal,
+  Modal: {},
 
   on: {
     render: element => {
@@ -63,13 +66,19 @@ const App = {
       const url = pathname + hash
       router(element, url, {})
     },
-    update: (el, s) => openModal(el, s),
+    update: (el, s) => { openModal(el, s) },
+    stateUpdated: (el, s, changes) => {
+      if (changes.SYSTEM) {
+        init(changes.SYSTEM)
+        // send(changes.SYSTEM, s.SYSTEM)
+      }
+    },
     scroll: (ev, el) => {
       const { scrollTop } = el.node
       const isFloating = scrollTop > 0
       if (isFloating !== el.props.isFloating) {
         el.props.isFloating = isFloating
-        // el._header.update()
+        // state.update()
       }
     }
   }

package/src/components/ColorText.js

@@ -0,0 +1,29 @@
+'use strict'
+
+import { Flex } from '@symbo.ls/components'
+
+const props = {
+  fontSize: 'Z',
+  alignItems: 'center',
+  gap: 'Y1',
+  whiteSpace: 'nowrap',
+
+  color: {
+    boxSize: 'B B',
+    background: 'red',
+    round: 'Y2'
+  },
+
+  value: {
+    text: 'Background',
+    color: 'white'
+  }
+}
+export const ColorText = {
+  extend: Flex,
+  props,
+
+  color: {},
+  value: {}
+  // text: 'efef'
+}

package/src/components/ColorsPalette.js

@@ -0,0 +1,64 @@
+'use strict'
+
+import { Flex, Grid } from '@symbo.ls/components'
+
+const props = {
+  flow: 'column',
+  gap: 'A',
+  opacity: '.35'
+}
+
+export const ColorsPalette = {
+  props,
+
+  extend: Flex,
+  childExtend: {
+    extend: Grid,
+    // text: 'B',
+
+    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' }
+      }
+    }),
+
+    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'
+  }]
+}

package/src/components/ContinueButton.js

@@ -0,0 +1,13 @@
+'use strict'
+import { Button } from '@symbo.ls/components'
+export const ContinueButton = {
+  extend: Button,
+  props: {
+    text: 'Continue',
+    fontSize: 'Z2',
+    padding: 'Z1 C',
+    background: 'linear-gradient(to top, rgba(50, 114, 184, .2), rgba(0, 121, 253, .27), rgba(0, 121, 253, .27))',
+    color: 'white',
+    fontWeight: '500'
+  }
+}

package/src/components/FontText.js

@@ -0,0 +1,186 @@
+'use strict'
+
+import { Flex, IconText } from '@symbo.ls/components'
+
+const fontName = {
+  tag: 'caption',
+  props: {
+    text: 'avenir next',
+    whiteSpace: 'nowrap',
+    textTransform: 'capitalize'
+  }
+}
+
+const fontWeights = {
+  extend: Flex,
+  props: {
+    position: 'relative',
+    width: 'fit-content',
+    ':after': {
+      content: '"+"',
+      position: 'absolute',
+      right: '-Z',
+      top: '0',
+      fontSize: '20px'
+    },
+    childProps: { fontSize: 'F3' }
+  },
+  childExtend: {
+    extend: { text: 'A' }
+  },
+  ...[
+    { props: { fontWeight: '700' } },
+    { props: { fontWeight: '500' } },
+    { props: { fontWeight: '400' } }
+  ]
+}
+
+const letterTransform = {
+  extend: Flex,
+  props: {
+    alignItems: 'center',
+    // border: '2px solid red',
+    gap: 'X2',
+    childProps: {
+      minHeight: 'fit-content'
+      // border: '2px solid black'
+    }
+  },
+  childExtend: {},
+  ...[
+    { props: { text: 'a', textTransform: 'uppercase', fontSize: 'F', fontWeight: '700' } },
+    { props: { text: 'b', fontWeight: '700', fontSize: 'E' } },
+    { props: { text: 'c', fontWeight: '500', fontSize: 'D1' } },
+    { props: { text: 'd', fontSize: 'C1' } },
+    { props: { text: 'e', fontWeight: '300', fontSize: 'B1' } },
+    { props: { text: 'f', fontSize: 'B' } }
+  ]
+}
+
+const fontStyle = {
+  extend: Flex,
+  props: {
+    gap: 'V2'
+  },
+  childExtend: {
+    props: {
+      fontSize: 'F',
+      textTransform: 'uppercase',
+      fontWeight: '300',
+      margin: '0',
+      padding: '0'
+    }
+  },
+  ...[
+    { props: { text: 'a' } },
+    { props: { text: 'b', style: { fontStyle: 'italic' } } },
+    {
+      props: {
+        text: 'c',
+        position: 'relative',
+        ':before': {
+          content: '""',
+          width: '100%',
+          height: '2px',
+          background: 'black .75',
+          position: 'absolute',
+          bottom: '10px'
+        }
+      }
+    }
+  ]
+}
+
+const paragraph = {
+  extend: Flex,
+  props: {
+    flow: 'column',
+    gap: 'Y',
+    title: {
+      text: 'Sometimes high',
+      fontSize: 'A2',
+      margin: '0'
+    },
+    p: {
+      text: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.`,
+      margin: '0',
+      fontWeight: '400',
+      maxWidth: 'G3',
+      color: 'gray6'
+    }
+  },
+  title: { tag: 'h3' },
+  p: {}
+}
+
+const iconText = {
+  extend: IconText,
+  props: {
+    fontSize: 'Z',
+    gap: 'X1',
+    icon: 'eyeOpen',
+    text: 'ABCDEFGHIKLMNOPQRSTVWXYZabcdefghijklmnopqrstvwxyz0123456789!@#$%^&*()'
+  }
+}
+
+const underlineSpan = {
+  props: {
+    text: 'Sometimes low',
+    textDecoration: 'underline',
+    style: { fontStyle: 'italic' }
+  }
+}
+
+const props = {
+  width: 'fit-content',
+  color: 'black',
+  background: 'white',
+  position: 'relative',
+  padding: 'A B',
+  round: 'A1',
+  flow: 'column',
+  gap: 'B',
+
+  fontName: {
+    position: 'absolute'
+
+  },
+
+  content: {
+    gap: 'D',
+    fonts: {
+      gap: 'C',
+      align: 'flex-end center'
+    },
+    paragraph: {
+    }
+  },
+
+  footer: {
+    justifyContent: 'space-between',
+    color: 'gray7'
+  }
+
+}
+export const FontText = {
+  extend: Flex,
+  props,
+
+  fontName,
+  content: {
+    extend: Flex,
+    fonts: {
+      extend: Flex,
+      fontWeights,
+      letterTransform,
+      fontStyle
+    },
+    paragraph
+  },
+
+  footer: {
+    extend: Flex,
+    iconText,
+    underlineSpan
+  }
+}

package/src/components/HeaderHeading.js

@@ -0,0 +1,26 @@
+'use strict'
+
+const props = {
+  caption: {
+    text: `Let's get started`,
+    whiteSpace: 'nowrap',
+    margin: '0',
+    color: 'gray6'
+  },
+  h1: {
+    color: 'white',
+    text: 'First was the light',
+    fontSize: 'H2',
+    fontWeight: '700',
+    margin: '0',
+    height: 'fit-content'
+  }
+}
+
+export const HeaderHeading = {
+  tag: 'header',
+  props,
+
+  caption: {},
+  h1: {}
+}

package/src/components/SlidersWithResponsive.js

@@ -0,0 +1,21 @@
+'use strict'
+
+import { Flex } from '@symbo.ls/components'
+
+export const SlidersWithResponsive = {
+  extend: Flex,
+  props: {
+    align: 'flex-end space-between',
+    position: 'sticky',
+    top: 'C2',
+    background: 'black .5',
+    zIndex: '9999',
+    margin: '-B2 -B -B',
+    padding: 'B2 B B',
+    style: {
+      backdropFilter: 'blur(15px)'
+    }
+  },
+  SequenceSliders: {},
+  DeviceButtonSet: {}
+}

package/src/components/ThemeButtons.js

@@ -0,0 +1,51 @@
+'use strict'
+
+import { Flex } from '@symbo.ls/components'
+
+import { ColorText } from './ColorText'
+
+const props = {
+  background: 'gray6',
+  width: 'fit-content',
+  round: 'B2',
+  position: 'relative',
+  maxHeight: '36px',
+  zIndex: '2',
+  ':after': {
+    content: '""',
+    width: '1px',
+    height: '95%',
+    background: 'black',
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)'
+  },
+  childProps: {
+    // color: 'red'
+    // padding: 'Z E Z B'
+  }
+
+}
+export const ThemeButtons = {
+  extend: Flex,
+
+  props,
+
+  attr: { buttons: true },
+
+  childExtend: ColorText,
+  ...[{
+    props: {
+      padding: 'Z E Z Z1',
+      color: { background: 'white' }
+    }
+
+  }, {
+    props: {
+      padding: 'Z E Z B',
+      color: { background: 'black' },
+      caption: { text: 'Text color' }
+    }
+  }]
+}

package/src/components/UploadImage.js

@@ -0,0 +1,28 @@
+'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/components/index.js

@@ -8,7 +8,15 @@ export * from './Aside'
 
 export * from './Banner'
 export * from './ShapeSet'
+export * from './ColorText'
+export * from './ThemeButtons'
+export * from './ContinueButton'
+export * from './SlidersWithResponsive'
+export * from './HeaderHeading'
+export * from './UploadImage'
+export * from './ColorsPalette'
 export * from './ShapePreview'
 export * from './SpacingPreview'
 export * from './ResponsivePreview'
 export * from './IconsGroup'
+export * from './FontText'

package/src/pages/Color/CreatePalette.js

@@ -0,0 +1,134 @@
+'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

@@ -0,0 +1,11 @@
+'use strict'
+
+export const fontText = {
+  HeaderHeading: {
+    caption: { text: 'Let’s make sure' },
+    h1: { text: 'Texts look good?' }
+  },
+
+  FontText: {},
+  ContinueButton: {}
+}

package/src/pages/Color/globalThemes.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { GlobalThemeTemplate, Flex, SectionHeader, Link } from '@symbo.ls/components'
+import { GlobalThemeTemplate, Flex, SectionHeader, Link, ClickableItem } from '@symbo.ls/components'
 
 export default {
   header: {
@@ -15,7 +15,7 @@ export default {
     extend: Flex,
     props: { gap: 'A' },
 
-    childExtend: [GlobalThemeTemplate, Link],
+    childExtend: [GlobalThemeTemplate, ClickableItem, Link],
 
     $setStateCollection: () => [{
       title: 'Light',