@symbo.ls/preview 2.0.7 → 2.6.0

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

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

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

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

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

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

@@ -1,56 +1,33 @@
 'use strict'
 
-import style, { grid } from './style'
+import { ComponentTemplate } from '@symbo.ls/components'
+import { DisabledPage, Page } from '../../components'
 
-import { Block, SectionHeader, ComponentTemplate } from '@symbo.ls/all'
+export const Library = {
+  extend: [DisabledPage, Page],
 
-import { PageProto } from '..'
-
-export default {
-  style,
-
-  proto: PageProto,
-
-  header: {
-    proto: [SectionHeader, Block],
-    props: { padding: 'C 0 0 0' },
-    heading: {},
-    nav: {
-      ...[
-        // { props: { icon: 'arrowAngleDown' } }
-      ]
-    }
+  SectionHeader: {
+    title: 'My Symbols',
+    p: 'This is the first collection of your components'
   },
 
-  grid: {
-    class: { grid },
-    style: { flex: 1 },
-
-    content: (el, s) => {
-      if (!el.__root.state.LIBRARY) return
-      const { LIBRARY } = el.__root.state
-      const keys = Object.keys(LIBRARY)
-      const Symbols = keys.map(val => {
-        const v = LIBRARY[val]
-        return {
-          key: v.key,
-          title: v.title,
-          description: v.description,
-          category: v.category,
-          component: v.component,
-          interactivity: v.interactivity,
-          dataTypes: v.dataTypes,
-          code: v.code,
-          params: v.params,
-          settings: v.settings
-        }
-      })
-      return {
-        tag: 'fragment',
-        childProto: ComponentTemplate,
-
-        ...Symbols
-      }
+  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.__system
+      return Object.values(COMPONENTS)
     }
   }
 }

package/src/pages/MediaQuery/index.js

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

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