@symbo.ls/preview 2.7.21 → 2.7.23

package/src/pages/Library/index.js

@@ -1,33 +0,0 @@
-'use strict'
-
-import { ComponentTemplate } from '@symbo.ls/components'
-import { DisabledPage, Page } from '../../components'
-
-export const Library = {
-  extend: [DisabledPage, Page],
-
-  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: ({ state }) => {
-      const COMPONENTS = state.__components
-      return Object.values(COMPONENTS)
-    }
-  }
-}

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,299 +0,0 @@
-'use strict'
-
-import {
-  IconText,
-  Flex,
-  SquareButton,
-  Select,
-  Input,
-  ClickableItem
-} from '@symbo.ls/components'
-import { copyStringToClipboard } from '@symbo.ls/utils'
-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: 'copy outline' },
-        on: {
-          click: (event, element, state) => {
-            copyStringToClipboard(`@${state.name}`)
-          }
-        }
-      },
-      { 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
-}

package/src/pages/MediaQuery/state.js

@@ -1,149 +0,0 @@
-'use strict'
-
-export const BREAKPOINTS_DATA = {
-  data: [{
-    icon: 'deviceBigScreenOutline',
-    name: 'iMac',
-    breakpoints: [{
-      type: 'minWidth',
-      value: '2780',
-      placeholder: '2780'
-    }]
-  }, {
-    icon: 'deviceSmallScreenOutline',
-    name: 'screenL',
-    breakpoints: [{
-      type: 'minWidth',
-      value: '1920',
-      placeholder: '1920'
-    }]
-  }, {
-    icon: 'deviceSmallScreenOutline',
-    name: 'screebM',
-    breakpoints: [{
-      type: 'minWidth',
-      value: '1680',
-      placeholder: '1680'
-    }]
-  }, {
-    icon: 'deviceSmallScreenOutline',
-    name: 'screenS',
-    breakpoints: [{
-      type: 'minWidth',
-      value: '1440',
-      placeholder: '1440'
-    }]
-  }, {
-    icon: 'deviceTabletLandscapeOutline',
-    name: 'tabletL',
-    breakpoints: [{
-      type: 'minWidth',
-      value: '1366',
-      placeholder: '1366'
-    }]
-  }, {
-    icon: 'deviceTabletLandscapeOutline',
-    name: 'tabletM',
-    breakpoints: [{
-      type: 'minWidth',
-      value: '1280px',
-      placeholder: '1280px'
-    }]
-  }, {
-    icon: 'deviceTabletLandscapeOutline',
-    name: 'tabletS',
-    breakpoints: [{
-      type: 'minWidth',
-      value: '1024',
-      placeholder: '1024'
-    }]
-  }, {
-    icon: 'deviceMobileOutline',
-    name: 'mobileL',
-    breakpoints: [{
-      type: 'minWidth',
-      value: '768',
-      placeholder: '768'
-    }]
-  }, {
-    icon: 'deviceMobileOutline',
-    name: 'mobileM',
-    breakpoints: [{
-      type: 'minWidth',
-      value: '560',
-      placeholder: '560'
-    }]
-  }, {
-    icon: 'deviceMobileOutline',
-    name: 'mobileS',
-    breakpoints: [{
-      type: 'minWidth',
-      value: '480',
-      placeholder: '480'
-    }]
-
-  }, {
-    icon: 'deviceMobileOutline',
-    name: 'mobileXs',
-    breakpoints: [{
-      type: 'minWidth',
-      value: '375',
-      placeholder: '375'
-    }]
-
-  }]
-}
-
-export const DEVICE_SIZE_DATA = {
-  data: [{
-    icon: 'deviceBigScreenOutline',
-    name: 'Apple XDR',
-    xValue: '3008',
-    yValue: '1692'
-  }, {
-    icon: 'deviceBigScreenOutline',
-    name: `iMac 27''`,
-    xValue: '2560',
-    yValue: '1440'
-  }, {
-    icon: 'deviceBigScreenOutline',
-    name: `iMac 24''`,
-    xValue: '2240',
-    yValue: '1260'
-  }, {
-    icon: 'deviceBigScreenOutline',
-    name: 'Full HD',
-    xValue: '1920',
-    yValue: '1080'
-  }, {
-    icon: 'deviceSmallScreenOutline',
-    name: `MacBook Pro 16''`,
-    xValue: '1728',
-    yValue: '1117'
-  }, {
-    icon: 'deviceSmallScreenOutline',
-    name: `MacBook Pro 14''`,
-    xValue: '1512',
-    yValue: '982'
-  }, {
-    icon: 'deviceSmallScreenOutline',
-    name: `MacBook Pro 13''`,
-    xValue: '1470',
-    yValue: '956'
-  }, {
-    icon: 'deviceTabletLandscapeOutline',
-    name: `iPad Pro 12.9''`,
-    xValue: '1024',
-    yValue: '1366'
-  }, {
-    icon: 'deviceTabletLandscapeOutline',
-    name: `iPad Air 10.9''`,
-    xValue: '820',
-    yValue: '1180'
-  }, {
-    icon: 'deviceTabletLandscapeOutline',
-    name: `iPad Mini 8.3''`,
-    xValue: '744',
-    yValue: '1133'
-  }]
-}

package/src/pages/MediaQuery/typeScale.js

@@ -1,69 +0,0 @@
-'use strict'
-
-import {
-  TestText,
-  Flex
-} from '@symbo.ls/components'
-
-export default {
-  extend: Flex,
-
-  props: {
-    gap: 'D',
-    align: 'flex-start flex-start',
-
-    sidebar: {
-      padding: 'B 0 0',
-      widthRange: 'F2',
-      position: 'sticky',
-      top: 'E'
-    },
-
-    content: {
-      overflow: 'hidden',
-      flex: '1',
-      flow: 'column',
-      gap: 'C',
-
-      header: {
-        align: 'flex-end space-between',
-        padding: '0 0 0 C',
-        gap: 'C1'
-      },
-
-      footer: {
-        padding: '0 0 0 C'
-      }
-    }
-  },
-
-  sidebar: {
-    SectionHeader: {
-      title: 'TypeScale',
-      p: 'Generate text sequence by a base size and ratio'
-    },
-
-    SequenceSliders: {
-      flow: 'column'
-    },
-
-    Paragraph: {
-      margin: '0',
-      fontSize: 'Z2',
-      padding: 'B2 0',
-      text: `Base size and ratio sequentially generate set by multiplying each next calculated unit by the ratio.`
-    }
-  },
-
-  content: {
-    extend: Flex,
-
-    header: {
-      extend: Flex,
-      TestText
-    },
-
-    sequence: {
-    }
-  }
-}

package/src/pages/Shapes/index.js

@@ -1,75 +0,0 @@
-'use strict'
-
-import { Flex } from '@symbo.ls/components'
-
-import {
-  rectangle,
-  circle,
-  toolTip,
-  tagShape,
-  bubble,
-  chevron,
-  tv,
-  hexagon
-} from './shapeSet'
-
-export const Shapes = {
-  extend: Flex,
-  props: {
-    flow: 'column'
-  },
-
-  state: {
-    props: {}
-  },
-
-  content: {
-    extend: Flex,
-    props: {
-      flow: 'column'
-    },
-
-    childExtend: {
-      extend: Flex,
-      props: {
-        gap: 'A2',
-        flow: 'column',
-        SectionHeader: {
-          margin: '- - A2'
-        },
-        section: {
-          flow: 'row wrap',
-          gap: 'A2'
-        }
-      },
-      section: { extend: Flex }
-    },
-
-    htmlShapes: {
-      SectionHeader: {
-        title: 'HTML Shapes',
-        p: 'All ungrouped document icons'
-      },
-
-      section: {
-        rectangle,
-        circle,
-        toolTip,
-        tagShape,
-        bubble,
-        tv,
-        chevron,
-        hexagon
-      }
-    },
-
-    Line: {},
-
-    svgShapes: {
-      SectionHeader: {
-        title: 'SVG Shapes',
-        p: 'TBA'
-      }
-    }
-  }
-}