@symbo.ls/preview 2.7.21 → 2.7.24

package/src/pages/Shapes/shapeSet.js

@@ -1,133 +0,0 @@
-'use strict'
-
-import { ShapeSet } from '../../components'
-
-export const rectangle = {
-  extend: ShapeSet,
-  label: {
-    text: 'Rectangle ',
-    span: 'with rounds'
-  },
-  list: {
-    $setStateCollection: () => [
-      { borderRadius: '0' },
-      { borderRadius: 'X' },
-      { borderRadius: 'Y' },
-      { borderRadius: 'Z' },
-      { borderRadius: 'A' },
-      { borderRadius: 'B' },
-      { borderRadius: 'C' }
-    ]
-  }
-}
-
-export const circle = {
-  extend: ShapeSet,
-  label: { text: 'Circle' },
-  list: {
-    $setStateCollection: () => [
-      { shape: 'circle' }
-    ]
-  }
-}
-
-export const toolTip = {
-  extend: ShapeSet,
-  label: { text: 'Tooltip' },
-  list: {
-    childExtend: {
-      props: {
-        childProps: { borderRadius: 'Y1' }
-      }
-    },
-
-    $setStateCollection: () => [
-      { shape: 'tooltip', shapeDirection: 'top' },
-      { shape: 'tooltip', shapeDirection: 'right' },
-      { shape: 'tooltip', shapeDirection: 'bottom' },
-      { shape: 'tooltip', shapeDirection: 'left' }
-    ]
-  }
-}
-
-export const tagShape = {
-  extend: ShapeSet,
-  label: { text: 'Tag' },
-  list: {
-    childExtend: {
-      props: {
-        padding: 'B C2+W',
-        childProps: { borderRadius: 6 }
-      }
-    },
-    $setStateCollection: () => [
-      { shape: 'tag', shapeDirection: 'left' },
-      { shape: 'tag', shapeDirection: 'right' }
-    ]
-  }
-}
-
-export const bubble = {
-  extend: ShapeSet,
-  label: { text: 'Bubble' },
-
-  list: {
-    $setStateCollection: () => [
-      { borderRadius: 'X B B X' },
-      { borderRadius: 'B X X B' },
-      { borderRadius: 'X X B B' },
-      { borderRadius: 'B B X X' },
-      { borderRadius: 'B X X X' },
-      { borderRadius: 'X B X X' },
-      { borderRadius: 'X X B X' },
-      { borderRadius: 'X X X B' }
-    ]
-  }
-}
-
-export const chevron = {
-  extend: ShapeSet,
-  label: { text: 'Chevron' },
-  list: {
-    childExtend: {
-      props: {
-        padding: 'B C2+W'
-      }
-    },
-    $setStateCollection: () => [
-      { shape: 'chevron', shapeDirection: 'left' },
-      { shape: 'chevron', shapeDirection: 'right' }
-    ]
-  }
-}
-
-export const tv = {
-  extend: ShapeSet,
-  label: { text: 'TV' },
-  list: {
-    childExtend: {
-      props: {
-        padding: 'B B2',
-        childProps: { minWidth: 'D' }
-      }
-    },
-    $setStateCollection: () => [
-      { shape: 'tv' }
-    ]
-  }
-}
-
-export const hexagon = {
-  extend: ShapeSet,
-  label: { text: 'Hexagon' },
-  list: {
-    childExtend: {
-      props: {
-        padding: 'B C2+W'
-      }
-    },
-    $setStateCollection: () => [
-      { shape: 'hexagon' }
-    ]
-  }
-}

package/src/pages/Shapes/style.js

@@ -1,11 +0,0 @@
-'use strict'
-
-export const styleUploadSVG = {
-  div: {
-    background: 'rgba(255, 255, 255, .05)',
-    display: 'flex',
-    alignItems: 'center'
-  },
-
-  input: { display: 'none' }
-}

package/src/pages/Spaces/index.js

@@ -1,65 +0,0 @@
-'use strict'
-
-import { mapSequence, sortSequence } from '@symbo.ls/components'
-import sequence from './sequence'
-import templates from './templates'
-
-export const Spaces = {
-  state: 'PROJECT_SYSTEM',
-
-  SectionHeader: {
-    margin: '0 0 C',
-    title: 'Spacing',
-    p: 'Unlike typography, component may has the properties of padding, gap, width and rest.'
-  },
-
-  cnt: {
-    state: 'SPACING',
-
-    SlidersWithResponsive: {},
-
-    Line: {},
-
-    templates,
-
-    Line_2: {},
-
-    sequence,
-
-    on: {
-      stateCreated: (el, s) => {
-        s.update({
-          base: s.base || 16,
-          ratio: s.ratio || 1.618,
-          range: s.range || [-5, +12],
-          subSequence: s.subSequence || true,
-          templates: s.templates || {},
-          scales: {},
-          sequence: {},
-          vars: {},
-          props: {},
-          type: 'demo-spacing',
-          sampleText: 'Today is a big day for our tribe. The year ends.'
-        }, {
-          preventUpdate: true,
-          preventUpdateListener: true
-        })
-
-        if (s.base && s.range) s.sequence = mapSequence(s, sortSequence)
-      },
-      stateUpdated: (el, s, changes) => {
-        const { base, ratio, range, subSequence } = changes
-
-        s.update({
-          base,
-          ratio,
-          range,
-          subSequence
-        }, {
-          preventUpdate: true,
-          preventUpdateListener: true
-        })
-      }
-    }
-  }
-}

package/src/pages/Spaces/sequence.js

@@ -1,34 +0,0 @@
-'use strict'
-
-import { Flex } from '@symbo.ls/components'
-
-export default {
-  extend: [Flex],
-
-  props: {
-    lazyLoad: true,
-    flow: 'column',
-    gap: 'C1'
-  },
-
-  SectionHeader: {
-    title: 'Sequence',
-    p: 'Spacing scale is a set of values that are used to define the padding, margin, gap and width of components.',
-    margin: '0'
-  },
-
-  Flex: {
-    props: {
-      lazyLoad: true,
-      flow: 'column',
-      gap: 'B1',
-
-      table: { flex: 1 },
-      preview: { flex: 1 }
-    },
-
-    SpacingTable: {
-      state: 'sequence'
-    }
-  }
-}

package/src/pages/Spaces/templates.js

@@ -1,37 +0,0 @@
-'use strict'
-
-import { Flex } from '@symbo.ls/components'
-
-export default {
-  extend: [Flex],
-
-  state: 'templates',
-
-  props: {
-    flow: 'column',
-    gap: 'C1'
-  },
-
-  SectionHeader: {
-    title: 'Templates',
-    p: 'Spacing scale is a set of values that are used to define the padding, margin, gap and width of components.',
-    margin: '0'
-  },
-
-  cnt: {
-    extend: Flex,
-    props: { columns: 'repeat(3, 1fr)' },
-
-    $setStateCollection: (el, s) => {
-      const SPACING = s.parse()
-      const templates = SPACING.templates || {}
-
-      const HELPERS = Object.keys(templates)
-        .filter(v => v.slice(0, 1) === '.')
-
-      el.removeContent()
-
-      return HELPERS
-    }
-  }
-}

package/src/pages/State/index.js

@@ -1,87 +0,0 @@
-'use strict'
-
-import { Input, Flex, CommonField } from '@symbo.ls/components'
-
-const sideBar = {
-  tag: 'aside'
-}
-
-export const State = {
-  sideBar,
-
-  form: {
-    extend: Flex,
-
-    props: {
-      flow: 'column',
-      gap: 'A2',
-      margin: 'C1 - -',
-      width: 'G2'
-    },
-
-    childExtend: {
-      extend: CommonField,
-
-      element: {
-        on: {
-          input: (ev, el, s) => {
-            const rootState = el.__root.state
-            const key = el.parent.key.toUpperCase()
-            const obj = {
-              PROJECT_STATE: { [key]: el.node.value }
-            }
-            rootState.update(obj)
-          }
-        }
-      }
-    },
-
-    title: {
-      title: 'Title',
-      element: {
-        extend: Input
-      }
-    },
-
-    websiteDesc: {
-      title: 'Description',
-      element: {
-        extend: Input
-      }
-    },
-
-    websiteTags: {
-      title: 'Tags',
-      element: {
-        extend: Input
-      }
-    },
-
-    headline: {
-      title: 'Headline',
-      element: {
-        extend: Input
-      }
-    },
-
-    paragraph: {
-      title: 'Paragraph',
-      element: {
-        extend: Input
-      }
-    },
-
-    bookNowUrl: {
-      title: 'Book now URL:',
-      element: {
-        extend: Input
-      }
-    }
-  },
-
-  on: {
-    stateUpdated: (el, s) => {
-      s.projectSystemUpdate({ PROJECT_STATE: s.parse })
-    }
-  }
-}

package/src/pages/Theme/buttonTitlesGrid.js

@@ -1,47 +0,0 @@
-'use strict'
-
-import { ButtonTitle, Grid } from '@symbo.ls/components'
-
-export const columnTitleButton = {
-  extend: ButtonTitle,
-  props: {
-    flow: 'column',
-    align: 'flex-start flex-start',
-    gap: 'Z2',
-    title: {
-      color: 'gray8',
-      textTransform: 'capitalize'
-    },
-    iconBox: {
-      background: 'gray2',
-      icon: { icon: 'plus' }
-    }
-  }
-}
-
-export const buttonTitlesGrid = {
-  extend: Grid,
-  props: {
-    justiyItems: 'start',
-    padding: 'B2 - - -',
-    columns: 'repeat(4, auto)',
-    gap: 'C1',
-    width: '100%',
-    justifyItems: 'start',
-    '@tabletL': { columns: 'repeat(3, auto)' },
-    '@tabletM': { columns: 'repeat(2, auto)' },
-    childProps: { width: 'F+Z1' }
-  },
-
-  childExtend: {
-    extend: columnTitleButton,
-    title: {},
-    iconBox: {}
-  },
-  ...[
-    { props: { title: { text: 'shadow' } } },
-    { props: { title: { text: 'Opacity' } } },
-    { props: { title: { text: 'Background Blur' } } },
-    { props: { title: { text: 'Blend mode' } } }
-  ]
-}

package/src/pages/Theme/buttonsHeader.js

@@ -1,33 +0,0 @@
-'use strict'
-
-import { Flex, IconButton } from '@symbo.ls/components'
-
-const props = {
-  gap: 'A2',
-  margin: '- - - auto',
-  childProps: {
-    theme: 'none',
-    background: 'transparent',
-    color: 'gray7',
-    ':hover': {
-      background: 'gray3',
-      color: 'white'
-    }
-  }
-}
-
-export const buttonsHeader = {
-  extend: Flex,
-  props,
-
-  childExtend: IconButton,
-  $setPropsCollection: () => [
-    { icon: 'cursorOutline' },
-    { icon: 'clickOutline' },
-    { icon: 'clickOutline' },
-    { icon: 'focusOutline' },
-    { icon: 'selection' },
-    { icon: 'colorInvert' },
-    { icon: 'accessibilityOutline' }
-  ]
-}

package/src/pages/Theme/friendTheme.js

@@ -1,30 +0,0 @@
-'use strict'
-
-import { CommonField, SelectField } from '@symbo.ls/components'
-
-export const friendTheme = {
-  extend: CommonField,
-  style: { paddingBlock: 0 },
-  caption: {
-    tag: 'h6',
-    props: { text: 'Friend themes', size: 'B' },
-    style: { opacity: 1, fontWeight: 'normal', margin: 0 }
-  },
-  element: {
-    extend: SelectField,
-    style: {
-      background: 'transparent',
-      paddingLeft: 0,
-      '&:hover': { background: 'transparent' }
-    },
-    title: null,
-    buttons: {
-      ...[
-        {
-          props: { icon: 'plus' },
-          style: { padding: `${10 / 16}em` }
-        }
-      ]
-    }
-  }
-}

package/src/pages/Theme/index.js

@@ -1,226 +0,0 @@
-'use strict'
-
-import {
-  PageTemplate,
-  Button,
-  Flex,
-  SectionHeader,
-  Pseudo,
-  CommonField
-} from '@symbo.ls/components'
-
-import preview from './preview'
-
-import { buttonsHeader } from './buttonsHeader'
-import { selectsGrid } from './selectsGrid'
-import { buttonTitlesGrid, columnTitleButton } from './buttonTitlesGrid'
-
-const ThemeNameField = {
-  tag: 'label',
-  attr: { for: 'name-it' },
-  extend: CommonField,
-
-  props: {
-    gap: '0',
-    title: {
-      text: 'Name the theme',
-      fontSize: 'Z'
-    },
-
-    element: {
-      whiteSpace: 'nowrap',
-      minWidth: 'C1',
-      maxWidth: 'fit-content',
-      outline: 'none',
-      fontSize: 'C2',
-      round: '0',
-      textTransform: 'capitalize',
-
-      border: 'dashed, gray3',
-      borderWidth: '0 0 1px',
-
-      ':empty::before': {
-        content: '"You name it"',
-        color: 'gray5'
-      }
-    }
-  },
-
-  title: {},
-  element: {
-    extend: Pseudo,
-    text: ({ state }) => state.themeName,
-    attr: { contentEditable: true, id: 'name-it' }
-  }
-}
-
-const footer = { //eslint-disable-line
-  extend: [Flex],
-  props: {
-    height: 'C2',
-    padding: '0 A'
-  },
-  style: {
-    margin: 'auto -80px 0',
-    justifyContent: 'space-between',
-    alignItems: 'center'
-  },
-  nav: {
-    extend: [Flex],
-    props: { gap: 'A' },
-    childExtend: {
-      extend: [Button],
-      props: {
-        size: 'Z',
-        width: 'B2',
-        height: 'B2',
-        theme: 'transparent'
-      }
-    },
-    ...[
-      { props: { icon: 'starOutline' } },
-      { props: { icon: 'copyOutline' } },
-      { props: { icon: 'share' } }
-    ]
-  },
-  span: {
-    props: {
-      text: 'Autosaved 1 second ago',
-      size: 'Y'
-    },
-    style: { opacity: '.35' }
-  },
-
-  export: {
-    extend: Flex,
-    style: {
-      alignItems: 'center'
-    },
-    span: {
-      props: {
-        text: 'Export:',
-        size: 'Y',
-        padding: '0 B1 0 0'
-      },
-      style: { opacity: '.35' }
-    },
-    nav: {
-      extend: [Flex],
-      props: { gap: 'Y2' },
-      childExtend: {
-        extend: [Button],
-        props: {
-          size: 'Z',
-          width: 'B2',
-          height: 'B2',
-          theme: 'transparent'
-        },
-        style: {
-          color: 'white'
-        }
-      },
-      ...[
-        { props: { icon: 'themeOutline' } },
-        { props: { icon: 'sketch' } },
-        { props: { icon: 'arrowAngleMirroringHorizontal' } }
-      ]
-    }
-  }
-}
-
-export const Theme = {
-  key: 'ColorEditor',
-
-  extend: PageTemplate,
-
-  state: 'PROJECT_SYSTEM',
-
-  props: {
-    padding: '- D2 - -',
-    boxSizing: 'border-box'
-  },
-
-  header: {
-    extend: SectionHeader,
-    props: {
-      margin: '0 - B2 0',
-      justifyContent: 'space-between'
-    },
-    heading: null,
-    ThemeNameField,
-    nav: null,
-    buttons: { extend: buttonsHeader },
-    SceneThemingBar: {}
-  },
-
-  cnt: {
-    extend: Flex,
-    props: { gap: 'C2', margin: 'Z 0 0' },
-    state: 'THEME',
-
-    preview,
-
-    colorEdit: {
-      state: window.location.pathname.split('theme/')[1],
-
-      props: {
-        flex: '1',
-        gap: '',
-        flexFlow: 'column'
-      },
-
-      colors: {
-        props: {
-          padding: '- - C1 -',
-          border: 'solid, gray2',
-          borderWidth: '0 0 1px 0'
-        },
-        selectsGrid,
-        buttonTitlesGrid
-      },
-
-      selectors: {
-        childExtend: {
-          extend: CommonField,
-          state: true,
-          props: ({ key }) => ({
-            border: 'solid, gray2',
-            borderWidth: '0 0 1px 0',
-            gap: 'B2',
-            padding: 'B - C1 -',
-            title: {
-              text: key,
-              color: 'white'
-            }
-          }),
-          title: {},
-          element: { extend: selectsGrid }
-        },
-
-        ':hover': {},
-        ':focus': {},
-        ':active': {},
-        ':selection': {},
-        ':disabled': {}
-      },
-
-      friendThemes: {
-        extend: columnTitleButton,
-        props: {
-          padding: 'C2 - - -',
-          title: {
-            text: 'Friend themes',
-            fontSize: 'A1',
-            color: 'gray9'
-          }
-        },
-        title: {},
-        iconBox: {}
-      }
-    }
-  }
-
-  // AccessibilityCheck: {
-  //   padding: 'E 0 F'
-  // },
-}