@symbo.ls/preview 2.0.7 → 2.6.0

package/src/components/SpacingPreview.js

@@ -0,0 +1,154 @@
+'use strict'
+
+import { Grid, Scene, Flex, Code } from '@symbo.ls/components'
+
+const returnScale = (state, key, fallback) => {
+  const { scales } = state
+  return (scales[state.props[key] || state.props[fallback]] || 0) + 'em'
+}
+
+const scene = {
+  extend: Scene,
+
+  scene: {
+    boxModel: {
+      extend: Grid,
+      props: ({ state }) => ({
+        color: 'gray5',
+        fontSize: 'Z',
+        columns: '30px auto 30px',
+        rows: '30px auto 30px',
+        templateAreas: `"x1 t x2"
+          "l content r"
+          "x3 b x4"`,
+        alignItems: 'center',
+        textAlign: 'center'
+      }),
+
+      ...[
+        ...['', { text: (el, s) => s.props.paddingTop || '', style: { gridArea: 't' } }, ''],
+        ...[
+          { text: (el, s) => s.props.paddingLeft || '', style: { gridArea: 'l' } },
+          {
+            props: ({ state }) => ({
+              gridArea: 'content',
+              borderStyle: 'solid',
+              borderColor: 'margin 0.15',
+
+              borderWidth: [
+                returnScale(state, 'marginBlockStart', 'margin'),
+                returnScale(state, 'marginInlineEnd', 'margin'),
+                returnScale(state, 'marginBlockEnd', 'margin'),
+                returnScale(state, 'marginInlineStart', 'margin')
+              ]
+            }),
+            border: {
+              props: ({ state }) => ({
+                gridArea: 'content',
+                borderStyle: 'solid',
+                borderColor: 'border 0.65',
+                overflow: 'hidden',
+
+                round: [
+                  returnScale(state, 'borderRadiusEndStart', 'borderRadius'),
+                  returnScale(state, 'borderRadiusStartEnd', 'borderRadius'),
+                  returnScale(state, 'borderRadiusEndEnd', 'borderRadius'),
+                  returnScale(state, 'borderRadiusStartStart', 'borderRadius')
+                ].join(' '),
+
+                borderWidth: [
+                  returnScale(state, 'borderBlockStartWidth', 'borderWidth'),
+                  returnScale(state, 'borderInlineEndWidth', 'borderWidth'),
+                  returnScale(state, 'borderBlockEndWidth', 'borderWidth'),
+                  returnScale(state, 'borderInlineStartWidth', 'borderWidth')
+                ]
+              }),
+              padding: {
+                extend: Flex,
+                props: ({ state }) => ({
+                  fontSize: `${state.base}px`,
+                  lineHeight: 1,
+                  borderStyle: 'solid',
+                  theme: 'quaternary',
+                  padding: 'X2',
+                  borderColor: 'grassgreen 0.25',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+
+                  width: state.props['width'],
+                  height: state.props['height'],
+
+                  minWidth: state.props['minWidth'],
+                  maxWidth: state.props['maxWidth'],
+
+                  minHeight: state.props['minHeight'],
+                  maxHeight: state.props['maxHeight'],
+
+                  borderWidth: [
+                    returnScale(state, 'paddingBlockStart', 'padding'),
+                    returnScale(state, 'paddingInlineEnd', 'padding'),
+                    returnScale(state, 'paddingBlockEnd', 'padding'),
+                    returnScale(state, 'paddingInlineStart', 'padding')
+                  ],
+                  style: { whiteSpace: 'nowrap' }
+                }),
+                span: (el, s) => `Base `,
+                gap: {
+                  props: ({ state }) => ({
+                    background: 'gap .15',
+                    margin: '0 .1em',
+                    height: '1em',
+                    minWidth: state.props['gap']
+                  })
+                },
+                base: { text: (el, s) => s.base }
+              }
+            }
+          }, {
+            text: (el, s) => s.paddingRight || '', style: { gridArea: 'r' }
+          }],
+        ...['', { text: (el, s) => s.paddingBottom || '', style: { gridArea: 'b' } }, '']
+      ]
+    }
+  }
+}
+
+export const SpacingPreview = {
+  extend: Flex,
+
+  props: {
+    maxHeight: '25vh',
+    zIndex: '9999',
+    gap: 'A',
+    lazyLoad: true,
+
+    scene: { flex: 1 },
+
+    style: {
+      backdropFilter: 'blur(15px)'
+    }
+  },
+
+  scene,
+  code: {
+    extend: Code,
+    props: ({ state }) => ({
+      hide: Object.keys(state.props).length === 0,
+      flex: '0 0 360px',
+      margin: '0',
+      code: {
+        margin: '0'
+      },
+      buttons: { marginInline: 'X2' }
+    }),
+    title: null,
+    code: {
+      props: {
+        text: ({ state }) => {
+          const code = 'const props = ' + JSON.stringify(state.props, null, 2)
+          return code
+        }
+      }
+    }
+  }
+}

package/src/components/SpacingTable.js

@@ -0,0 +1,210 @@
+'use strict'
+
+import {
+  Grid,
+  Pseudo,
+  mapSequence,
+  sortSequence
+} from '@symbo.ls/components'
+
+import { SpacingRowButton } from '.'
+import actionButtons, { setRowButtons } from './SpacingButton/actionButtons'
+
+const Cell = {
+  tag: 'div',
+  props: {
+    padding: 'X2 C2 X2 0'
+  }
+}
+
+const Row = {
+  extend: Grid,
+  key: state => state.key,
+
+  props: ({ state }) => ({
+    columns: '7ch 14ch 12ch 12ch 20em 1fr',
+    alignItems: 'center',
+    isBase: state.index === 0,
+    active: (state.key && state.key.length) === 1,
+
+    margin: '0 -A',
+    padding: '0 B',
+    position: 'relative',
+    height: 'C+Z',
+    transition: 'A defaultBezier background',
+
+    '.isBase': {
+      opacity: 1,
+      background: 'gray1 .5'
+    },
+
+    ':hover': {
+      background: 'gray1 .65'
+    },
+
+    i: {
+      text: state.key,
+      active: (state.key && state.key.length) === 1,
+
+      '.active': {
+        fontWeight: '600',
+        '@dark': { color: 'gray9' },
+        '@light': { color: 'gray3' }
+      },
+      '!active': {
+        fontWeight: '400',
+        '@dark': { color: 'gray6' },
+        '@light': { color: 'gray7' }
+      }
+    },
+    decimal: {
+      text: state.decimal,
+      color: 'gray6',
+      fontWeight: '300'
+    },
+    px: {
+      text: state.val,
+      '@dark': { color: 'gray9' },
+      '@light': { color: 'gray3' }
+    },
+    em: {
+      color: 'gray6',
+      text: state.scaling + 'em'
+    },
+    graph: {
+      margin: '0 0 0 -B2',
+      maxWidth: '1px',
+      line: {
+        isBase: state.index === 0,
+        widthRange: `${state.val}px` || 0,
+        height: '2px',
+        background: 'blue',
+        borderRadius: 'A',
+        '.isBase': {
+          height: '5px'
+        }
+      }
+    },
+    buttons: {
+      columns: 'repeat(7, var(--spacing-B2))',
+      rows: 'var(--spacing-B2)',
+      position: 'relative',
+      gap: '.2em',
+      opacity: '1',
+      boxSizing: 'content-box',
+      margin: '0 0 0 -1.9em'
+    }
+  }),
+
+  childExtend: Cell,
+
+  i: {},
+  em: {},
+  decimal: {},
+  px: {},
+  buttons: {
+    extend: Grid,
+    childExtend: SpacingRowButton,
+    $setStateCollection: setRowButtons
+  },
+  graph: { line: {} },
+
+  overlay: {
+    props: {
+      position: 'absolute',
+      right: '0',
+      top: '0',
+      bottom: '0',
+      width: 'calc(100% - var(--spacing-G3))',
+      height: '100%'
+    },
+
+    on: {
+      mouseover: (ev, el, s) => {
+        if (!s.parent.hovered !== s.key) {
+          const key = parseInt(el.parent.key)
+          const rowHeight = '(var(--spacing-C) + var(--spacing-Z))'
+          const translateY = `calc(${rowHeight} * ${key + 1})`
+          const transform = `translate3d(0px, ${translateY}, 1px)`
+          s.parent.hovered = s.key
+          s.parent.selectedKey = s.key
+          el.lookup('actionButtons').setProps({ opacity: '1', transform })
+        }
+      },
+
+      mouseleave: (ev, el, s) => {
+        if (s.parent.hovered && s.parent.hovered === s.key) {
+          s.parent.hovered = false
+          el.lookup('actionButtons').setProps({ opacity: '0' })
+        }
+      }
+    }
+  }
+}
+
+const HeaderRow = {
+  extend: Row,
+
+  childExtend: {
+    props: {
+      color: 'gray7',
+      style: { paddingBlock: '0 .618em' }
+    }
+  },
+
+  i: '#',
+  em: 'em',
+  decimal: 'decimal',
+  px: 'px',
+  buttons: '',
+  graph: null,
+  overlay: null
+}
+
+export const SpacingTable = {
+  extend: Pseudo,
+  tag: 'section',
+
+  props: {
+    lazyLoad: true,
+    overflow: 'hidden',
+    position: 'relative',
+    header: {
+      '@dark': { color: 'gray6' },
+      '@light': { color: 'gray7' }
+    },
+
+    '::after': {
+      content: '""',
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      top: '0',
+      left: '100%'
+    },
+    '@dark': {
+      color: 'gray8',
+      '::after': {
+        background: 'gray0',
+        boxShadow: 'gray0, 0 0px 50px 50px'
+      }
+    },
+    '@light': {
+      color: 'gray3',
+      '::after': {
+        background: 'gray12',
+        boxShadow: 'gray12, 0 0px 50px 50px'
+      }
+    }
+  },
+
+  header: HeaderRow,
+
+  cnt: {
+    childExtend: Row,
+    props: { lazyLoad: true },
+    $setStateCollection: ({ state }) => mapSequence(state, sortSequence)
+  },
+
+  actionButtons
+}

package/src/components/ThemeButtons.js

@@ -0,0 +1,42 @@
+'use strict'
+
+import { ColorPicker } from '@symbo.ls/components'
+
+export const ThemeButtons = {
+  props: {
+    position: 'relative',
+    zIndex: '2',
+    round: 'X2',
+    style: {
+      columnCount: 2,
+      columnGap: '0'
+    }
+  },
+
+  attr: { buttons: true },
+
+  childExtend: {
+    extend: ColorPicker,
+    props: {
+      width: '100%',
+      theme: null,
+      background: 'black 0'
+    },
+    on: {
+      stateUpdated: (el, s) => {
+        s.parent.update({ [s.key]: s.value })
+        return false
+      }
+    }
+  },
+
+  $setStateCollection: (el, s) => {
+    return [{
+      key: 'color',
+      value: s.color
+    }, {
+      key: 'background',
+      value: s.background
+    }]
+  }
+}

package/src/components/UploadImage.js

@@ -0,0 +1,61 @@
+'use strict'
+
+import { Flex, CommonField, Upload, ClickableItem } from '@symbo.ls/components'
+
+export const UploadImage = {
+  extend: [CommonField],
+  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 },
+    input: {
+      on: {
+        change: async (ev, el, s) => {
+          const { context } = el
+          const { client } = context
+          s.update({ icon: { pending: true } })
+
+          try {
+            let id
+            await client.file(ev.target.files[0]).then(async d => { id = d.id })
+
+            await client.observe({
+              $id: id,
+              $all: true
+            }, async (data) => {
+              console.log(data)
+              s.update({ icon: { pending: false, ...data } })
+
+              // await client.set({
+              //   $id: s.projectId,
+              //   icon: data
+              // }, d => console.log('d', d))
+
+              await client.set({
+                $id: s.projectId,
+                icon: data.id
+              }, d => console.log('d2', d))
+            })
+          } catch (e) {
+            console.log(e)
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/Widget.js

@@ -0,0 +1 @@
+'use strict'

package/src/components/index.js

@@ -0,0 +1,25 @@
+'use strict'
+
+export * from './Widget'
+export * from './Route'
+export * from './Page'
+export * from './Header'
+export * from './Aside'
+
+export * from './Banner'
+export * from './ShapeSet'
+export * from './ColorText'
+export * from './ThemeButtons'
+export * from './SlidersWithResponsive'
+export * from './HeaderHeading'
+export * from './ColorsPalette'
+export * from './ShapePreview'
+export * from './SpacingPreview'
+export * from './ResponsivePreview'
+export * from './IconsGroup'
+export * from './FontText'
+export * from './DesignComponent'
+export * from './ColumnParagrphs'
+export * from './SpacingButton'
+export * from './UploadImage'
+export * from './SpacingTable'

package/src/config/index.js

@@ -1,38 +1,19 @@
 'use strict'
 
-import CONFIG from '@symbo.ls/config'
-import { set, setEach, RESET, FONT_FAMILY, FONT, getFontFace, getFontFamily } from '@symbo.ls/scratch'
-import { injectGlobal } from '@emotion/css'
+import { init } from '@symbo.ls/components'
 
-import { merge } from 'domql-preview/src/utils/object'
-import { EDITOR_THEMES, COMPONENT_THEMES } from './theme'
 import { EDITOR_COLORS } from './color'
-
-export const applyConfig = (userConfig) => {
-  let DATA = CONFIG
-  if (userConfig) DATA = merge(CONFIG, userConfig)
-
-  DATA.FONT_FAMILY.EditorFamily.default = true
-
-  set(DATA)
-  setEach('color', EDITOR_COLORS)
-  setEach('theme', COMPONENT_THEMES)
-  setEach('theme', EDITOR_THEMES)
-
-  const FontFace = getFontFace(FONT)
-  const family = getFontFamily(FONT_FAMILY)
-
-  injectGlobal(RESET)
-  injectGlobal(FontFace)
-  injectGlobal(`
-  body,
-  input,
-  select {
-    font-family: ${family};
+import { COMPONENT_THEMES, EDITOR_THEMES } from './theme'
+
+const PREVIEW_CONF = {
+  color: {
+    blue2: '#4676EC',
+    ...EDITOR_COLORS
+  },
+  theme: {
+    ...EDITOR_THEMES,
+    ...COMPONENT_THEMES
   }
-  `)
 }
 
-applyConfig()
-
-export default CONFIG
+export default init(PREVIEW_CONF)

package/src/config/theme.js

@@ -1,83 +1,13 @@
 'use strict'
 
-import dots from '../assets/dots.png'
-import dotsDark from '../assets/dotsDark.png'
-
-const MODAL = {
-  modalFade: {
-    color: 'white',
-    backdropFilter: 'blur(3px)',
-    backgroundColor: 'modalFade 0.75'
-  },
-  modalBackground: {
-    color: 'white',
-    backgroundColor: 'modalBackground'
-  }
-}
-
-const SCENE = {
-  darkScene: {
-    backgroundColor: 'white 0.02',
-    '> div': { backgroundImage: `url(${dots})` }
-  },
-  lightScene: {
-    backgroundColor: 'white',
-    '> div': { backgroundImage: `url(${dotsDark})` }
-  }
-}
-
-const DROPDOWN = {
-  dropdownItem: {
-    color: 'white 0.65',
-    state: {
-      hover: {
-        color: 'white',
-        background: 'gradient-light-active'
-      },
-      active: {
-        color: 'white',
-        background: 'gradient-light-active'
-      }
-    }
-  },
-  dropdownItemActive: {
-    color: 'white',
-    background: 'gradient-light-active'
-  }
-}
-
 export const EDITOR_THEMES = {
-  header: {
-    color: 'white',
-    backgroundColor: 'black 0.85',
-    borderColor: 'white 0.09',
-    backdropFilter: 'blur(3px)'
-  },
-
   shape: {
     background: 'shapeColor',
     border: 'none'
-  },
-
-  ...MODAL,
-  ...SCENE,
-  ...DROPDOWN
+  }
 }
 
 export const COMPONENT_THEMES = {
-  lightDark: {
-    background: 'white',
-    color: 'darkPurple',
-    variants: {
-      inverse: true
-    }
-  },
-
-  alert: {
-    background: 'yellow',
-    color: 'black'
-  },
-
   label: {
     background: 'brown',
     color: 'white'