@symbo.ls/preview 0.0.89 → 0.0.91

package/src/pages/Init/Personalize.js

@@ -1,145 +0,0 @@
-'use strict'
-
-import { CommonField, Input, Grid, Flex, ClickableItem } from '@symbo.ls/components'
-
-import { InitPage, UploadImage } from '../../components'
-
-const fields = {
-  extend: Grid,
-  props: {
-    columns: 'repeat(2, 270px)',
-    columnGap: 'C',
-    rowGap: 'C2',
-    childProps: {
-      element: {
-        round: 'Y2'
-        // padding: '- A'
-        // height: 'C',
-
-        // style: { background: 'rgba(255, 255, 255, .1) !important' },
-        // align: 'center space-between',
-      }
-    }
-  },
-
-  childExtend: {
-    extend: CommonField,
-    title: {},
-    element: { extend: Flex }
-  },
-
-  ...[{
-    props: {
-      title: { text: 'Name the project' },
-      element: { placeholder: 'You name it' }
-    },
-
-    title: {},
-    element: { extend: Input, props: { } }
-  }, {
-    props: {
-      title: { text: 'Key' },
-      element: {
-        extend: Input,
-        props: {
-          placeholder: 'a-zA-Z0-9'
-        },
-        Span: {
-          position: 'absolute',
-          text: '.symbo.ls',
-          right: 'A',
-          pointerEvents: 'none'
-        }
-      }
-    },
-    title: {},
-    element: {
-      input: { extend: Input },
-      span: {}
-    }
-  }, {
-    props: { title: { text: 'URL Access' } },
-    title: {},
-    element: {
-      extend: [ClickableItem],
-      Select: {
-        props: {
-          outline: 'none',
-          pointerEvents: 'all',
-          appearance: 'none',
-          border: 'none',
-          width: '100%',
-          height: '100%',
-          background: 'none',
-          color: 'currentColor',
-          fontSize: 'A',
-          lineHeight: 1,
-          padding: 'Z A',
-
-          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 })
-          }
-        }
-      }
-    }
-  }]
-}
-
-const uploadImage = {
-  extend: UploadImage,
-  props: {
-    title: { text: 'Project icon' },
-    element: {
-      flow: 'column',
-      width: 'fit-content',
-      padding: 'A',
-      gap: '0',
-      p: {
-        text: 'Drag and drop or click',
-        maxWidth: 'E',
-        textAlign: 'center'
-      }
-    }
-  }
-
-}
-
-export const Personalize = {
-  extend: InitPage,
-
-  back: null,
-
-  HeaderHeading: {
-    props: { margin: '- - D2 -' },
-    Caption: { text: `Let's personalize your Symbols` },
-    H1: { text: 'Hi George' }
-  },
-
-  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.` } }
-    ]
-  },
-
-  content: {
-    extend: Flex,
-    props: { gap: 'D1' },
-    uploadImage,
-    fields
-  },
-
-  ContinueButton: {
-    href: '/init/theme'
-  }
-}