@symbo.ls/preview 2.7.21 → 2.7.24

package/src/components/UploadImage.js

@@ -1,31 +0,0 @@
-'use strict'
-
-import { Flex, CommonField, Upload, ClickableItem } from '@symbo.ls/components'
-
-export const UploadImage = {
-  extend: [CommonField],
-  props: {
-    element: {
-      border: 'none',
-      background: 'gray1',
-      padding: 'Z A Z Z',
-      gap: 'Z',
-      flow: 'row',
-      icon: { fontSize: '52px' },
-      p: {
-        text: 'Upload or drop the image'
-      }
-    }
-  },
-  title: { text: 'Pick from the picture' },
-  element: {
-    extend: [Upload, Flex, ClickableItem],
-    icon: {},
-    p: { span: null },
-    input: {
-      on: {
-        change: async (ev, el, s) => {}
-      }
-    }
-  }
-}

package/src/components/Widget.js

@@ -1 +0,0 @@
-'use strict'

package/src/components/index.js

@@ -1,25 +0,0 @@
-'use strict'
-
-export * from './Widget'
-export * from './Route'
-export * from './Page'
-export * from './Header'
-export * from './Aside'
-
-export * from './Banner'
-export * from './ShapeSet'
-export * from './ColorText'
-export * from './ThemeButtons'
-export * from './SlidersWithResponsive'
-export * from './HeaderHeading'
-export * from './ColorsPalette'
-export * from './ShapePreview'
-export * from './SpacingPreview'
-export * from './ResponsivePreview'
-export * from './IconsGroup'
-export * from './FontText'
-export * from './DesignComponent'
-export * from './ColumnParagrphs'
-export * from './SpacingButton'
-export * from './UploadImage'
-export * from './SpacingTable'

package/src/pages/Account/Personal.js

@@ -1,59 +0,0 @@
-'use strict'
-
-import { Flex, Grid } from '@symbo.ls/components'
-
-import { fieldsGridProps } from './fieldsGridProps'
-
-const fields = {
-  extend: Grid,
-
-  InputField_email: {
-    gridColumn: 'span 2',
-    title: { text: 'Your Email' }
-  },
-
-  InputField_username: {
-    title: { text: 'Your Username' }
-  },
-
-  SelectField2_role: {
-    title: { text: 'Your role' }
-  },
-
-  PasswordField: {
-    title: { text: 'Change Password' }
-  },
-
-  PasswordField_repeat: {
-    title: { opacity: '0' }
-  }
-}
-
-const props = {
-  boxSize: '100% 100%',
-  flow: 'column',
-  title: {
-    text: 'Your personal account',
-    padding: '- - C2 -'
-  },
-  fields: {
-    ...fieldsGridProps
-  },
-  button: {
-    text: 'Update',
-    padding: 'Z1 C1',
-    fontSize: 'Z2',
-    margin: 'auto - - -',
-    width: 'fit-content'
-  }
-}
-
-export const PersonalAccount = {
-  extend: Flex,
-  props,
-
-  title: {},
-  fields,
-
-  ContinueButton: {}
-}

package/src/pages/Account/Project.js

@@ -1,40 +0,0 @@
-'use strict'
-
-import { Flex } from '@symbo.ls/components'
-import icon from '../Init/Personalize/icon'
-import fields from '../Init/Personalize/fields'
-
-export const ProjectAccount = {
-  extend: Flex,
-  props: {
-    flow: 'column',
-    height: '100%'
-  },
-
-  SectionHeader: {
-    title: ({ state }) => 'Settings for ' + state.projectName,
-    p: 'Some settings will be stored only in this device.'
-  },
-
-  ColumnParagraphs: {
-    props: { margin: '- - D1' },
-    ...[
-      { props: { text: `In this example we'll initialize a Symbols Design System for you.` } },
-      { props: { text: `But we already initialized your system, let's just make sure it's all good.` } }
-    ]
-  },
-
-  Flex: {
-    props: { gap: 'C1', align: 'flex-start' },
-
-    icon,
-    fields
-  },
-
-  ContinueButton: {
-    text: 'Update',
-    padding: 'Z1 C1',
-    margin: 'auto - - -',
-    width: 'fit-content'
-  }
-}

package/src/pages/Account/fields.js

@@ -1,74 +0,0 @@
-'use strict'
-
-import {
-  InputField,
-  Grid,
-  PasswordField,
-  SelectField2
-} from '@symbo.ls/components'
-
-import { fieldsGridProps } from './fieldsGridProps'
-
-export default {
-  extend: Grid,
-  props: fieldsGridProps,
-  childExtend: {
-    title: {},
-    element: {
-      props: ({ state, parent }) => ({ value: state[parent.key] }),
-      on: {
-        change: (event, el, s) => {
-          s.update({ [el.parent.key]: event.target.value })
-        }
-      }
-    }
-  },
-  ...[
-    {
-      extend: InputField,
-      props: { title: { text: 'Name the project' } }
-    },
-
-    {
-      extend: InputField,
-      props: { title: { text: 'Key' } }
-    },
-
-    {
-      extend: SelectField2,
-      props: {
-        title: { text: 'URL Access' },
-        element: { title: { text: 'Password Protected' } }
-      }
-    },
-
-    {
-      extend: PasswordField,
-      props: {
-        opacity: '.3',
-        title: { text: 'Password' }
-      }
-    },
-    {
-      extend: SelectField2,
-      props: {
-        title: { text: 'Environment' },
-        element: { title: { text: 'JavaScript' } }
-      }
-    },
-
-    {
-      extend: SelectField2,
-      props: {
-        title: { text: 'Framework' },
-        element: { title: { text: 'DOMQL' } }
-      }
-    }
-  ]
-}
-
-// uploadIcon: {
-//   extend: Upload,
-//   icon: {},
-//   p: { span: null }
-// },

package/src/pages/Account/fieldsGridProps.js

@@ -1,15 +0,0 @@
-'use strict'
-
-export const fieldsGridProps = {
-  width: 'fit-content',
-  columns: 'repeat(2, 1fr)',
-  columnGap: 'C',
-  rowGap: 'C2',
-  childProps: {
-    width: 'F3',
-    element: {
-      placeholder: null,
-      height: 'C'
-    }
-  }
-}

package/src/pages/Account/index.js

@@ -1,117 +0,0 @@
-'use strict'
-
-import { router } from '@domql/router'
-import { Flex, IconButton, Link, SquareButton } from '@symbo.ls/components'
-
-import { PersonalAccount } from './Personal'
-import { ProjectAccount } from './Project'
-
-const ProjectButton = {
-  extend: [Link, SquareButton],
-  props: ({ state }) => ({
-    theme: 'transparent',
-    href: '/account/' + state.key.split('.')[0],
-    User: {
-      round: '100%',
-      src: state.icon && state.icon.src,
-      title: state.projectName
-    }
-  }),
-  User: {},
-  on: {
-    click: (event, el, s) => {
-      const { id, name } = s.parse()
-      el.context.fetchProject(el, s.parent, {
-        username: name,
-        projectId: id,
-        activeProject: el.key
-      })
-      Link.on.click(event, el, s)
-    }
-  }
-}
-
-const sidebar = {
-  extend: Flex,
-
-  props: {
-    flow: 'column',
-    boxSize: '100% fit-content',
-    justifyContent: 'space-between',
-    padding: '- C - -',
-    borderRight: 'gray2, solid',
-    borderWidth: '1px',
-    minWidth: 'D1',
-
-    childProps: {
-      flow: 'column',
-      gap: 'A2'
-    }
-  },
-
-  childExtend: {
-    tag: 'nav',
-    extend: Flex
-  },
-
-  Flex: {
-    extend: Flex,
-    profile: {
-      extend: [Link, IconButton],
-      props: { icon: 'human', href: '/account' }
-    },
-
-    projects: {
-      extend: Flex,
-      props: {
-        flow: 'column',
-        gap: 'A'
-      },
-      childExtend: ProjectButton,
-      $setStateCollection: ({ state }) => state.projects
-    },
-
-    add: {
-      extend: [IconButton, Link],
-      props: { icon: 'plus', href: '/init/create' }
-    }
-  },
-
-  meta: {
-    extend: Flex,
-    childExtend: [Link, IconButton],
-    props: { gap: 'A' },
-    info: { props: { icon: 'info' } },
-    logout: { props: { icon: 'logout', href: '/logout' } }
-  }
-}
-
-const props = {
-  boxSize: '100% 100%',
-  padding: 'D - D D1',
-  gap: 'E',
-  overflow: 'hidden',
-
-  content: { flex: '1' }
-}
-
-export const Account = {
-  extend: Flex,
-  props,
-
-  sidebar,
-
-  define: { routes: param => param },
-  routes: {
-    '/': PersonalAccount,
-    '/*': ProjectAccount
-  },
-
-  on: {
-    render: element => {
-      const { pathname, hash } = window.location
-      const url = pathname + hash
-      router(element, url, {})
-    }
-  }
-}

package/src/pages/Color/globalThemes.js

@@ -1,32 +0,0 @@
-'use strict'
-
-import { GlobalThemeTemplate, Flex, SectionHeader, Link, ClickableItem } from '@symbo.ls/components'
-
-export default {
-  state: 'THEME',
-
-  header: {
-    extend: SectionHeader,
-    state: {
-      title: 'Global Themes',
-      p: 'Document styling and theming provides global themes of the entire app, imagine it as a <body> styling'
-    }
-  },
-
-  modes: {
-    extend: Flex,
-    props: { gap: 'A' },
-
-    childExtend: [GlobalThemeTemplate, ClickableItem, Link],
-
-    $setStateCollection: () => [{
-      title: 'Light',
-      key: 'light',
-      icon: 'sun'
-    }, {
-      title: 'Dark',
-      key: 'dark',
-      icon: 'moon'
-    }]
-  }
-}

package/src/pages/Color/index.js

@@ -1,18 +0,0 @@
-'use strict'
-
-import globalThemes from './globalThemes'
-import palette from './palette'
-import themes from './themes'
-
-export const Color = {
-  key: 'colors',
-  state: 'PROJECT_SYSTEM',
-
-  props: { gap: 'A' },
-
-  globalThemes,
-  Line: {},
-  palette,
-  Line_2: {},
-  themes
-}

package/src/pages/Color/palette.js

@@ -1,36 +0,0 @@
-'use strict'
-
-import { SectionHeader, ColorTemplate, Flex } from '@symbo.ls/components'
-
-const mapColors = (el, s) => {
-  const COLOR = s.parse()
-  const colorKeys = Object.keys(COLOR)
-  return colorKeys.map(v => ({ key: v, value: COLOR[v] }))
-}
-
-export default {
-  state: 'COLOR',
-
-  header: {
-    extend: SectionHeader,
-    state: {
-      title: 'Color Palette',
-      p: 'Document styling and theming',
-      nav: [{
-        icon: 'plus',
-        href: '/colors/add-color'
-      }]
-    }
-  },
-
-  cnt: {
-    extend: Flex,
-    props: {
-      flow: 'row wrap',
-      gap: 'Z2'
-    },
-
-    childExtend: ColorTemplate,
-    $setStateCollection: mapColors
-  }
-}

package/src/pages/Color/themes.js

@@ -1,37 +0,0 @@
-'use strict'
-
-import { ThemeTemplate, SectionHeader, Grid } from '@symbo.ls/components'
-
-const mapThemes = (el, s) => {
-  const THEME = s.parse()
-  const themeKeys = Object.keys(THEME)
-  return themeKeys.map(v => ({ ...THEME[v], key: v }))
-}
-
-export default {
-  state: 'THEME',
-
-  header: {
-    extend: SectionHeader,
-    state: {
-      title: 'Themes',
-      p: 'Themes are used to prepare color setting abstractly and apply it to any component',
-      nav: [{
-        icon: 'plus',
-        href: '/colors/add-color'
-      }]
-    }
-  },
-
-  cnt: {
-    extend: Grid,
-    props: {
-      columns: 'repeat(5, 1fr)',
-      gap: 'C2',
-      margin: '0 -Z'
-    },
-
-    childExtend: ThemeTemplate,
-    $setStateCollection: mapThemes
-  }
-}

package/src/pages/Components/grid.js

@@ -1,99 +0,0 @@
-'use strict'
-
-import {
-  ComponentTemplate,
-  Grid,
-  SectionHeader
-} from '@symbo.ls/components'
-import { COMPONENTS } from '@symbo.ls/temp-db/symbols'
-import { gridStyle, rowStyle } from './style'
-
-export default {
-  props: {
-    padding: '0 Y2',
-    flex: 1
-  },
-
-  header: {
-    extend: SectionHeader,
-
-    props: {
-      margin: '0 0 X2',
-      title: null,
-      heading: {
-        p: {
-          opacity: '0',
-          text: 'All Categories'
-        }
-      }
-    },
-
-    heading: {},
-
-    nav: {
-      childExtend: {
-        props: {
-          theme: 'transparent',
-          background: 'transparent 0'
-        }
-      },
-
-      ...[{
-        props: (el, s) => ({
-          icon: { name: s.favorites ? 'star' : 'star outline' },
-          href: null
-        }),
-        on: {
-          click: (ev, el, s) => {
-            s.update({ favorites: !s.favorites })
-          }
-        }
-      }, {
-        props: (el, s) => {
-          const active = s.view === 'grid'
-          return {
-            active,
-            href: null,
-            icon: { name: active ? 'grid' : 'grid outline' }
-          }
-        },
-        on: {
-          click: (ev, el, s) => {
-            s.update({ view: 'grid' })
-          }
-        }
-      }, {
-        props: (el, s) => {
-          const active = s.view === 'list'
-          return {
-            active,
-            href: null,
-            icon: { name: active ? 'rows' : 'rows outline' }
-          }
-        },
-        on: {
-          click: (ev, el, s) => {
-            s.update({ view: 'list' })
-          }
-        }
-      }]
-    }
-  },
-
-  components: {
-    extend: Grid,
-
-    props: ({ state }) => ({
-      flex: 1,
-      gap: 'A',
-      margin: '- -Y2',
-      style: state.view === 'grid' ? gridStyle : rowStyle
-    }),
-
-    childExtend: ComponentTemplate,
-    $setStateCollection: ({ state }) => COMPONENTS.filter(v => {
-      if (!state.category) return true
-      return state.category === v.category.key
-    })
-  }
-}

package/src/pages/Components/index.js

@@ -1,37 +0,0 @@
-'use strict'
-
-import { splitRoute } from 'domql/packages/router'
-
-import sidebar from './sidebar'
-import grid from './grid'
-
-import { CATEGORIES } from '@symbo.ls/temp-db/symbols/categories'
-// import FAVORITES from '../../data/favorites'
-// import COMPONENTS from '../../data/components'
-
-export const Components = {
-  props: {
-    maxWidth: '100%',
-    width: '100%',
-    flexFlow: 'row',
-    flow: 'row',
-    gap: 'B1',
-    padding: 'A'
-  },
-
-  state: {
-    filters: {},
-    view: 'grid'
-  },
-
-  sidebar,
-  grid,
-
-  on: {
-    init: (el, s) => {
-      var route = splitRoute()[1]
-      var content = CATEGORIES.filter(v => v.key === route)[0]
-      s.category = content ? content.key : ''
-    }
-  }
-}

package/src/pages/Components/sidebar.js

@@ -1,28 +0,0 @@
-'use strict'
-
-import {
-  FilterCategories,
-  FilterInteractivity,
-  FilterDataTypes
-} from '@symbo.ls/components'
-import { CATEGORIES } from '@symbo.ls/temp-db/symbols/categories'
-
-export default {
-  sticky: {
-    props: {
-      position: 'sticky',
-      top: 'D2',
-      padding: '- - - X2'
-    },
-
-    categories: {
-      extend: FilterCategories,
-      header: {},
-      nav: {
-        ...CATEGORIES
-      }
-    },
-    FilterInteractivity,
-    FilterDataTypes
-  }
-}

package/src/pages/Components/style.js

@@ -1,16 +0,0 @@
-'use strict'
-
-export const gridStyle = {
-  gridTemplateColumns: 'repeat(12, 1fr)',
-  gridAutoFlow: 'dense',
-  justifyItems: 'stretch',
-  boxSizing: 'border-box',
-  marginBottom: '2em',
-  gridAutoColumns: 'auto',
-  gridAutoRows: 'auto'
-}
-
-export const rowStyle = {
-  display: 'flex',
-  flexFlow: 'row wrap'
-}