@symbo.ls/preview 2.7.21 → 2.7.24

package/src/pages/Init/CreateDocumentTheme.js

@@ -1,176 +0,0 @@
-'use strict'
-
-import { Clickable, Flex, GlobalThemeTemplate } from '@symbo.ls/components'
-import { InitPage } from '../../components'
-
-const paragraphs = {
-  extend: Flex,
-  childExtend: { tag: 'p' },
-  ...['To personalize your Symbols experience, we need to get started with themes',
-    'Please fill in the document dark and light themes']
-}
-
-const modes = {
-  extend: Flex,
-  props: {
-    gap: 'C',
-    margin: '- -Z E2'
-  },
-
-  childExtend: {
-    extend: [Clickable, GlobalThemeTemplate],
-
-    props: ({ state }) => ({
-      minWidth: 'G3',
-      maxWidth: '406px',
-      position: 'relative',
-      maxHeight: 'E2',
-      boxSizing: 'content-box',
-      align: 'flex-start flex-start',
-      padding: 'A A Z',
-      overflow: 'hidden',
-      round: 'A1',
-      color: state.color,
-      background: state.background,
-      wrap: 'wrap',
-      transitionProperty: 'transform, opacity, border-radius',
-
-      icon: {
-        boxSize: 'C C',
-        color: 'yellow 1 +5',
-        background: 'yellow .2',
-        pointerEvents: 'none',
-        fontSize: `B`
-      },
-
-      article: {
-        padding: 'X2 - - -',
-        title: { fontSize: 'D2', fontWeight: 'bold' }
-      },
-
-      '.active': {
-        opacity: '1',
-        round: 'A1 A1 Y2 Y2',
-
-        style: {
-          '[buttons]': {
-            opacity: '1',
-            transform: 'translate3d(0, 0, 0)'
-          }
-        }
-      }
-    }),
-
-    icon: {},
-    article: {
-
-    },
-
-    ThemeButtons: {
-      position: 'absolute',
-      left: 'W',
-      right: 'W',
-      bottom: 'W',
-      opacity: '0',
-      transition: 'B defaultBezier',
-      transitionProperty: 'transform, opacity',
-      transform: 'translate3d(0, 100%, 0)',
-      columnGap: 'W'
-    },
-
-    Span: {
-      width: '100%',
-      fontSize: 'Z',
-      color: 'gray7',
-      fontStyle: 'italic',
-      pointerEvents: 'none',
-      margin: 'C 0 0 X2',
-      text: 'click to change'
-    },
-
-    on: {
-      click: (ev, el, s) => {
-        if (ev.target === el.node) {
-          el.setProps({ active: !el.props.active })
-        }
-      },
-      stateUpdated: (el, s, changes) => {
-        const { color, background } = s
-        s.projectSystemUpdate({
-          THEME: {
-            document: {
-              ['@' + s.key]: { color, background }
-            }
-          }
-        }, { preventUpdate: true })
-      }
-    }
-  },
-
-  $setStateCollection: ({ state }) => state.values
-}
-
-export const CreateDocumentTheme = {
-  extend: InitPage,
-
-  props: {
-    flow: 'column',
-    align: 'flex-start',
-
-    paragraphs: {
-      gap: 'E',
-      margin: '- - D1 -',
-      childProps: {
-        color: 'gray6',
-        maxWidth: `G1`
-      }
-    }
-  },
-
-  back: { props: { href: '/init/personalize' } },
-
-  HeaderHeading: {},
-  paragraphs,
-  modes,
-
-  ContinueButton: {
-    href: '/init/pallete'
-  },
-
-  on: {
-    init: ({ state }) => {
-      const { THEME, COLOR } = state.__projectSystem
-      console.log(state.__projectSystem)
-      if (!THEME || !THEME.document) return
-      const { document } = THEME
-      const dark = document['@dark']
-      const light = document['@light']
-
-      const colorRef = {}
-
-      if (dark) {
-        colorRef.dark = {
-          key: 'dark',
-          title: 'Night',
-          icon: 'moon',
-          color: COLOR[dark.color] || dark.color || '#FFFFFF',
-          background: COLOR[dark.background] || dark.background || '#000000'
-        }
-      }
-
-      if (light) {
-        colorRef.light = {
-          key: 'light',
-          title: 'Day',
-          icon: 'sun',
-          color: COLOR[light.color] || light.color || '#000000',
-          background: COLOR[light.background] || light.background || '#FFFFFF'
-        }
-      }
-
-      state.update({
-        values: colorRef
-      }, { preventUpdate: true, ignoreInitUpdate: true })
-    }
-  }
-}

package/src/pages/Init/CreatePalette.js

@@ -1,94 +0,0 @@
-'use strict'
-
-import { observe, upload } from '@symbo.ls/based'
-import { Flex, ColorPickerWithTitle } from '@symbo.ls/components'
-import { InitPage } from '../../components'
-
-const colors = {
-  extend: Flex,
-  props: {
-    width: 'F3',
-    flow: 'column',
-    gap: 'B1',
-    opacity: '.75'
-  },
-
-  childExtend: {
-    extend: ColorPickerWithTitle,
-    props: ({ state }) => ({
-      title: { text: state.title }
-    })
-  },
-
-  $setStateCollection: ({ state }) => [{
-    title: 'Accent color',
-    value: state[0]
-  }, {
-    title: 'Secondary Color',
-    value: state[1]
-  }, {
-    title: 'Inactive Color',
-    value: state[2]
-  }]
-}
-
-const content = {
-  extend: Flex,
-  props: {
-    margin: '- - F -',
-    align: 'flex-start',
-    gap: 'E2',
-    ColorsPalette: {
-      margin: '- - - auto'
-    }
-  },
-
-  colors,
-
-  ImageColorPicker: {
-    props: {},
-    title: {},
-    element: {
-      upload: {
-        input: {
-          on: {
-            change: (ev, el, s) => {
-              upload(ev.target.files[0], d => {
-                observe({
-                  $id: d.id,
-                  $all: true
-                }, pic => {
-                  if (pic.progress) s.update({ imageUrl: pic.src })
-                })
-              })
-            }
-          }
-        }
-      }
-    }
-  },
-  ColorsPalette: {
-    props: ({ state }) => ({
-      hide: state.imageUrl,
-      margin: '- - auto'
-    })
-  }
-}
-
-export const CreatePallete = {
-  extend: InitPage,
-
-  back: { props: { href: '/init/theme' } },
-
-  HeaderHeading: {
-    margin: '- - D -',
-    Caption: { text: `Let's get started` },
-    H1: { text: 'Create your palette' }
-  },
-
-  content,
-
-  ContinueButton: {
-    href: '/init/font'
-  }
-}

package/src/pages/Init/FontText.js

@@ -1,33 +0,0 @@
-'use strict'
-
-import { InitPage } from '../../components'
-
-import tools from '../Export/tools'
-
-export const FontText = {
-  extend: InitPage,
-
-  back: { props: { href: '/init/pallete' } },
-
-  state: {
-    base: 16,
-    ratio: 1.618
-  },
-
-  HeaderHeading: {
-    props: { margin: '- - D2 -' },
-    Caption: { text: `Let's customize` },
-    H1: { text: 'Typography' }
-  },
-
-  FontText: {
-    margin: '- -Z A'
-  },
-  tools: {
-    extend: tools.tools
-  },
-
-  ContinueButton: {
-    href: '/init/env'
-  }
-}

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

@@ -1,120 +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'
-      }
-    },
-    title: {},
-    element: {
-      on: {
-        change: (ev, el, s) => {
-          s.update({ [el.parent.key]: ev.target.value })
-        }
-      }
-    }
-  },
-
-  projectName: {
-    title: { text: 'Name the project' },
-    element: {
-      extend: Input,
-      props: ({ state }) => ({
-        placeholder: 'You name it',
-        value: state.projectName,
-        required: true
-      })
-    }
-  },
-
-  appKey: {
-    title: { text: 'Key' },
-    element: {
-      extend: Input,
-      props: ({ state }) => ({
-        placeholder: 'a-zA-Z0-9',
-        value: state.appKey && state.appKey.split('.')[0],
-        required: true
-      }),
-      on: {
-        change: (ev, el, s) => {
-          s.update({ [el.parent.key]: ev.target.value + '.symbo.ls' })
-        }
-      }
-    },
-    Span: {
-      position: 'absolute',
-      opacity: '.65',
-      text: '.symbo.ls',
-      right: 'Z2',
-      bottom: 'Z',
-      pointerEvents: 'none'
-    }
-  },
-
-  urlVisibility: {
-    title: { text: 'URL Access' },
-    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,76 +0,0 @@
-'use strict'
-
-import { observe, set, upload } from '@symbo.ls/based'
-import { User } from '@symbo.ls/components'
-import { UploadImage } from '../../../components'
-
-export default {
-  extend: UploadImage,
-  props: ({ state }) => ({
-    position: 'relative',
-
-    title: { text: 'Project icon' },
-
-    element: {
-      flow: 'column',
-      position: 'relative',
-      width: 'fit-content',
-      padding: 'A',
-      gap: '0',
-      opacity: !!state.icon,
-
-      p: {
-        text: 'Drag and drop or click',
-        maxWidth: 'E',
-        textAlign: 'center'
-      }
-    }
-  }),
-
-  title: {},
-  element: {
-    input: {
-      on: {
-        change: (ev, el, s) => {
-          s.update({ icon: { pending: true } })
-
-          try {
-            upload(ev.target.files[0], d => {
-              observe({
-                $id: d.id,
-                $all: true
-              }, icon => {
-                if (icon.progress) {
-                  delete s.icon.pending
-                  set({
-                    $id: s.projectId,
-                    type: 'project',
-                    icon
-                  })
-                  s.update({ icon })
-                }
-              })
-            })
-          } catch (e) {
-            console.log(e)
-          }
-        }
-      }
-    }
-  },
-
-  User: {
-    extend: User,
-    props: ({ state }) => ({
-      position: 'absolute',
-      fontSize: 'H',
-      bottom: 'Y',
-      left: 'Y1',
-      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,120 +0,0 @@
-'use strict'
-
-import { InitPage } from '../../../components'
-
-import { Flex, Form } from '@symbo.ls/components'
-import { router } from '@domql/router'
-import { isArray } from '@domql/utils'
-
-import icon from './icon'
-import fields from './fields'
-import { set } from '@symbo.ls/based'
-
-export const Personalize = {
-  extend: InitPage,
-  props: {
-    height: '100%'
-  },
-
-  back: { props: { href: '/init/' } },
-
-  HeaderHeading: {
-    props: { margin: '- - D1 -' },
-    Caption: { text: `Let's personalize your Symbols` },
-    H1: { text: ({ state }) => `Hi ${(state.userName && state.userName.split(' ')[0]) || ''}` }
-  },
-
-  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.` } }
-    ]
-  },
-
-  Form: {
-    extend: [Form, Flex],
-    props: {
-      flex: 1,
-      flow: 'column',
-      align: 'flex-start space-between'
-    },
-
-    Flex: {
-      props: { gap: 'D1', align: 'flex-start' },
-
-      icon,
-      fields
-    },
-
-    ContinueButton: {
-      href: null,
-      type: 'submit'
-    },
-
-    on: {
-      submit: (ev, el, s) => {
-        ev.preventDefault()
-        console.log(1, s.parse())
-        router(el.__root, '/init/theme', {})
-      }
-    }
-  }
-}
-
-export const CreateProject = {
-  extend: Personalize,
-
-  back: null,
-
-  HeaderHeading: {
-    props: { margin: '- - D1 -' },
-    Caption: { text: ({ state }) => `Hi ${state.userName}, let's start` },
-    H1: { text: `Creating a Project` }
-  },
-
-  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.` } }
-    ]
-  },
-
-  Form: {
-    state: {},
-    Flex: {},
-
-    ContinueButton: {
-      href: null,
-      type: 'submit'
-    },
-
-    on: {
-      submit: (ev, el, s) => {
-        ev.preventDefault()
-        console.log(2, s.parse())
-        const parentState = s.parent
-        const { projects, userId, username } = parentState
-        const setProject = {
-          type: 'project',
-          key: s.appKey,
-          name: s.projectName,
-          icon: s.icon,
-          visibility: s.visibility || 'private',
-          users: userId
-        }
-        console.log(setProject)
-        set(setProject, async d => {
-          await el.context.fetchProject(el, s.parent, {
-            username,
-            projectId: d.id,
-            activeProject: isArray(projects) ? projects.length : 0
-          })
-          router(el.__root, '/init/theme', {})
-        })
-        // router(el.__root, '/init/theme', {})
-      }
-    }
-  }
-}

package/src/pages/Init/index.js

@@ -1,39 +0,0 @@
-'use strict'
-
-import { Flex } from '@symbo.ls/components'
-import { CreateProject, Personalize } from './Personalize'
-import { ChooseProject } from './ChooseProject'
-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: {
-    '/*': ChooseProject,
-    '/create': CreateProject,
-    '/personalize': 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 }
-        }
-      }))
-    }
-  }
-}