@symbo.ls/preview 0.0.97 → 2.0.7

package/src/pages/Init/Personalize/fields.js

@@ -1,109 +0,0 @@
-'use strict'
-
-import { CommonField, Input, Grid, SelectField } from '@symbo.ls/components'
-
-export default {
-  extend: Grid,
-  props: {
-    columns: 'repeat(2, 270px)',
-    columnGap: 'C',
-    rowGap: 'C2'
-  },
-
-  childExtend: {
-    extend: CommonField,
-    props: {
-      position: 'relative',
-      align: 'stretch flex-start',
-      element: {
-        margin: '- -Z',
-        width: 'auto',
-        padding: 'Z1 A2'
-      }
-    }
-  },
-
-  name: {
-    props: {
-      title: { text: 'Name the project' },
-      element: { placeholder: 'You name it' }
-    },
-
-    title: {},
-    element: {
-      extend: Input,
-      attr: { value: ({ state }) => state.projectName }
-    }
-  },
-
-  k: {
-    props: {
-      title: { text: 'Key' }
-    },
-    title: {},
-    element: {
-      extend: Input,
-      attr: { value: ({ state }) => state.appKey && state.appKey.split('.')[0] },
-      props: { placeholder: 'a-zA-Z0-9' }
-    },
-    Span: {
-      position: 'absolute',
-      opacity: '.65',
-      text: '.symbo.ls',
-      right: 'Z2',
-      bottom: 'Z',
-      pointerEvents: 'none'
-    }
-  },
-
-  visibility: {
-    props: { title: { text: 'URL Access' } },
-    title: {},
-    element: {
-      extend: [SelectField],
-      props: {
-        style: { padding: '0' },
-        round: 'C1'
-      },
-      title: null,
-      buttons: {
-        props: {
-          position: 'absolute',
-          right: 'Z',
-          pointerEvents: 'none'
-        }
-      },
-
-      Select: {
-        props: {
-          outline: 'none',
-          border: 'none',
-          background: 'transparent',
-          color: 'currentColor',
-          padding: 'Z1 A2',
-          round: 'C1',
-          width: '100%',
-
-          style: {
-            cursor: 'default',
-            appearance: 'none'
-          },
-
-          name: 'user',
-          id: 'user'
-        },
-
-        childExtend: { tag: 'option', text: ({ state }) => state.text },
-        $setCollection: () => [
-          { text: 'Private' },
-          { text: 'Public' }
-        ],
-        on: {
-          change: (ev, { parent }) => {
-            parent.user.update({ key: ev.target.value })
-          }
-        }
-      }
-    }
-  }
-}

package/src/pages/Init/Personalize/icon.js

@@ -1,42 +0,0 @@
-'use strict'
-
-import { User } from '@symbo.ls/components'
-import { UploadImage } from '../../../components'
-
-export default {
-  extend: UploadImage,
-  props: {
-    title: { text: 'Project icon' },
-    element: {
-      flow: 'column',
-      position: 'relative',
-      width: 'fit-content',
-      padding: 'A',
-      gap: '0',
-
-      p: {
-        text: 'Drag and drop or click',
-        maxWidth: 'E',
-        textAlign: 'center'
-      }
-    }
-  },
-  title: {},
-  element: {
-    User: {
-      extend: User,
-      props: ({ state }) => ({
-        position: 'absolute',
-        fontSize: 'H',
-        top: '50%',
-        left: '50%',
-        transform: 'translate3d(-50%, -50%, 1px)',
-        src: state.icon && state.icon.src,
-        key: state.projectName,
-        transition: 'C defaultBezier opacity',
-        opacity: (state.icon && state.icon.src) ? '1' : '0',
-        pointerEvents: 'none'
-      })
-    }
-  }
-}

package/src/pages/Init/Personalize/index.js

@@ -1,37 +0,0 @@
-'use strict'
-
-import { InitPage } from '../../../components'
-
-import icon from './icon'
-import fields from './fields'
-
-export const Personalize = {
-  extend: InitPage,
-
-  back: null,
-
-  HeaderHeading: {
-    props: { margin: '- - D2 -' },
-    Caption: { text: `Let's personalize your Symbols` },
-    H1: { text: ({ state }) => `Hi ${state.userName}` }
-  },
-
-  ColumnParagraphs: {
-    extend: true,
-    ...[
-      { props: { text: `In this example we'll initialize a Symbols Design System for you.` } },
-      { props: { text: `You can connect Symbols to your app and style it online.` } }
-    ]
-  },
-
-  Flex: {
-    props: { gap: 'D1' },
-
-    icon,
-    fields
-  },
-
-  ContinueButton: {
-    href: '/init/theme'
-  }
-}

package/src/pages/Init/index.js

@@ -1,36 +0,0 @@
-'use strict'
-
-import { Flex } from '@symbo.ls/components'
-import { Personalize } from './Personalize'
-import { CreateDocumentTheme } from './CreateDocumentTheme'
-import { CreatePallete } from './CreatePalette'
-import { FontText } from './FontText'
-import { ChooseEnvironment } from './ChooseEnvironment'
-import { router } from '@domql/router'
-
-export const Init = {
-  extend: Flex,
-
-  props: {
-    boxSize: '100% 100%',
-    gap: 'A',
-    padding: '8.5% E1 E1 12.5%'
-  },
-
-  define: { routes: param => param },
-  routes: {
-    '/': Personalize,
-    '/theme': CreateDocumentTheme,
-    '/pallete': CreatePallete,
-    '/font': FontText,
-    '/env': ChooseEnvironment
-  },
-
-  on: {
-    render: element => {
-      const { pathname, hash } = window.location
-      const url = pathname + hash
-      router(element, url, {}, { level: 1 })
-    }
-  }
-}

package/src/pages/Library/disabled.js

@@ -1,38 +0,0 @@
-'use strict'
-
-import { ComponentTemplate } from '@symbo.ls/components'
-import { Page, DisabledPage } from '../../components'
-
-import { COMPONENTS } from '../../../.symbols' // eslint-disable-line
-
-export const Library = {
-  extend: [Page, DisabledPage],
-
-  SectionHeader: {
-    title: 'My Symbols',
-    p: 'This is the first collection of your components'
-  },
-
-  Grid: {
-    props: {
-      flex: 1,
-      templateColumns: 'repeat(12, 1fr)',
-      autoFlow: 'dense',
-      autoColumns: 'auto',
-      autoRows: 'auto',
-      justifyItems: 'stretch',
-
-      margin: '- -Z2 B1',
-      gap: 'A'
-    },
-
-    childExtend: ComponentTemplate,
-    $setStateCollection: () => {
-      return new Array(15).fill(void 0).map(v => ({
-        settings: {
-          gridOptions: { colspan: 3, rowspan: 1 }
-        }
-      }))
-    }
-  }
-}

package/src/pages/MediaQuery/index.js

@@ -1,46 +0,0 @@
-'use strict'
-
-import { Flex } from '@symbo.ls/components'
-
-import { mediaQueryList, screenSizingList } from './lists'
-
-const content = {
-  extend: Flex,
-
-  props: {
-    justifyContent: 'space-between',
-    margin: '0 -Z',
-    gap: 'C1',
-
-    childProps: {
-      heading: {
-        color: 'white',
-        padding: '0 0 A1 Z1',
-        fontWeight: '700'
-      }
-    },
-
-    mediaQueries: {
-      flex: 1
-    }
-  },
-
-  mediaQueries: {
-    heading: { text: 'Media Queries' },
-    mediaQueryList
-  },
-
-  screensSheet: {
-    heading: { text: 'Screen Sizing Sheet' },
-    screenSizingList
-  }
-}
-
-export const MediaQuery = {
-  SectionHeader: {
-    title: 'Responsive',
-    p: 'A Design System is the single source of truth that defines all design elements and allows the crews to assemble components and compose them into more complex apps.'
-  },
-
-  content
-}

package/src/pages/MediaQuery/lists.js

@@ -1,285 +0,0 @@
-'use strict'
-
-import { IconText, Flex, SquareButton, Select, Input, ClickableItem } from '@symbo.ls/components'
-import { BREAKPOINTS_DATA, DEVICE_SIZE_DATA } from './state'
-
-const stateCom = {
-  activeScreen: false
-}
-
-const listProps = {
-  background: 'gray1',
-  round: 'A',
-  fontSize: 'Z1',
-  style: { overflow: 'hidden' }
-}
-
-const valueItemProps = {
-  height: 'B',
-  theme: 'quaternary',
-  round: 'Y',
-  align: 'center center',
-  minWidth: 'C2'
-}
-
-const MEDIA_TYPES = [{
-  text: 'min-width',
-  value: 'minWidth'
-}, {
-  text: 'max-width',
-  value: 'maxWidth'
-}, {
-  text: 'min-height',
-  value: 'minHeight'
-}, {
-  text: 'max-height',
-  value: 'maxHeight'
-}, {
-  text: 'exact',
-  value: 'exact'
-}]
-
-const BreakpointItem = {
-  extend: Flex,
-  state: stateCom,
-  props: {
-    gap: 'X',
-    alignItems: 'center'
-  },
-
-  childExtend: {
-    extend: Flex,
-    props: valueItemProps
-  },
-
-  select: {
-    extend: Select,
-    props: ({ state }) => ({
-      color: 'white'
-    }),
-
-    on: {
-      change: (ev, el, s) => {
-        const { value } = el.node
-        const exact = value === 'exact'
-        s.update({ type: value }, { preventUpdate: true })
-        s.parent.update({
-          exact,
-          breakpoints: {
-            [s.__element.key]: { type: value }
-          }
-        })
-      }
-    },
-
-    $setCollection: () => MEDIA_TYPES.map(props => ({ props }))
-  },
-
-  value: {
-    extend: Input,
-    props: ({ state }) => ({
-      placeholder: state.placeholder,
-      value: state.value,
-      round: 'Y',
-      maxWidth: 'C2',
-      padding: '0',
-      style: { textAlign: 'center' }
-    })
-  },
-
-  value2: {
-    extend: Input,
-    props: ({ state }) => ({
-      hide: state.type !== 'exact',
-      placeholder: '728px',
-      round: 'Y',
-      maxWidth: 'C1',
-      padding: '0',
-      textAlign: 'center'
-    })
-  }
-}
-
-const screenIconText = {
-  extend: [IconText, Flex],
-  props: ({ state }) => ({
-    text: state.name,
-    gap: 'Z1',
-    align: 'center flex-start',
-    whiteSpace: 'nowrap',
-    icon: {
-      name: state.icon,
-      opacity: '.5'
-    }
-  })
-}
-
-const MediaQueryRow = {
-  extend: Flex,
-  props: {
-    gap: 'D',
-    align: 'center',
-    minHeight: 'D',
-    padding: '- A - B',
-    childProps: { minWidth: 'E' },
-    ':not(:last-child)': {
-      border: 'dashed, white 0.05',
-      borderWidth: '0 0 1px'
-    },
-    ':hover': {
-      background: 'gray2'
-    },
-    ':hover > div > button': { opacity: 1 }
-  },
-
-  screen: { extend: screenIconText },
-
-  columnBreakPoints: {
-    extend: Flex,
-    props: { gap: 'D' },
-
-    childExtend: BreakpointItem,
-    $setStateCollection: ({ state }) => state.breakpoints
-  },
-
-  plusButton: {
-    button: {
-      extend: SquareButton,
-
-      props: ({ state }) => ({
-        hide: Object.keys(state.breakpoints).length > 2,
-        icon: { name: 'plus' },
-        padding: 'X2',
-        round: '100%',
-        border: 'solid, gray4',
-        borderWidth: '1px',
-        color: 'gray6',
-        background: 'transparent'
-      }),
-
-      on: {
-        click: (ev, el, s) => {
-          const length = Object.keys(s.breakpoints).length
-          if (!s.breakpoints || length > 2) return
-          s.update({
-            breakpoints: { [length]: {} }
-          })
-        }
-      }
-    }
-  },
-
-  hoverButtons: {
-    extend: Flex,
-    props: {
-      margin: '- - - auto'
-    },
-    childExtend: {
-      extend: [ClickableItem, SquareButton],
-      props: {
-        style: { opacity: '0' }
-      }
-    },
-    ...[
-      { props: { icon: 'eyeOpen' } },
-      { props: { icon: 'arrowAngleMirroringHorizontal' } },
-      { props: { icon: 'trashAlt' },
-        on: {
-          click: (event, element, state) => {
-            const { key } = element.parent.parent
-            delete state.parent.data[key]
-            state.parent.update()
-          }
-        }
-      }
-    ]
-  }
-}
-
-export const mediaQueryList = {
-  state: BREAKPOINTS_DATA,
-  props: listProps,
-
-  childExtend: MediaQueryRow,
-  $setStateCollection: ({ state }) => state.data
-}
-
-const DefaultScreensRow = {
-  extend: Flex,
-  state: stateCom,
-  // state: MEDIA_TYPES,
-  class: {
-    show: (element, state) => state.activeScreen
-      ? { opacity: 1 } : { opacity: 0.45 }
-  },
-  props: ({ el, state }) => ({
-    // if () {},
-    // hide: state.value !== 'exact' ? el.update({ style: { opacity: '.3' } }) : 'center',
-    // hide: state.value !== 'exact',
-    // text.
-
-    minHeight: 'C2',
-    padding: '- A - A',
-    gap: 'C',
-    ':not(:last-child)': {
-      border: 'solid, white .05',
-      borderWidth: '0 0 1px'
-    }
-  }),
-  // class: {
-  //   show: (element, state) => MEDIA_TYPES.value === 'match'
-  //     ? { opacity: 0 } : { opacity: 1 }
-  // },
-  // props: {
-
-  //   // on: {
-  //   //   click: (event, element, state) => {
-  //   //     state.offers
-  //   //       ? state.update({ offers: false })
-  //   //       : state.update({ offers: true })
-  //   //   }
-  //   // }
-  // },
-  // on: {
-  //   change: (ev, el, s) => {
-  //     s.update({ value: el.node.value })
-  //     s.stateCom.update({ activeScreen: true })
-  //   }
-  //   // click: (ev, el, s) => {
-  //   //   s.update({ activeScreen: true })
-  //   // }
-  // },
-
-  screen: { extend: screenIconText, style: { minWidth: '150px' } },
-  values: {
-    extend: Flex,
-    props: {
-      alignItems: 'center',
-      gap: 'X1'
-    },
-
-    valueX: {
-      extend: Flex,
-      props: valueItemProps,
-      text: ({ state }) => state.xValue
-    },
-    x: { props: { text: 'x' } },
-    valueY: {
-      extend: Flex,
-      props: valueItemProps,
-      text: ({ state }) => state.yValue
-    }
-  }
-}
-
-export const screenSizingList = {
-  state: DEVICE_SIZE_DATA,
-  props: {
-    ...listProps,
-    minWidth: '300px'
-  },
-
-  childExtend: DefaultScreensRow,
-
-  $setStateCollection: ({ state }) => state.data
-}