@symbo.ls/preview 2.7.21 → 2.7.24

package/src/pages/Editor/layers.js

@@ -1,126 +0,0 @@
-' use strict'
-
-import { Shape, Block, Flex, Text, Icon } from '@symbo.ls/components'
-
-const objectLayer = {
-  extend: [Block, Text, Shape],
-  props: {
-    round: 'A',
-    padding: '0 Y Y Y'
-  },
-
-  h4: {
-    extend: [Block, Text],
-    props: {
-      text: 'Button',
-      padding: 'A 0 A1 A1'
-    },
-    style: { margin: 0, fontWeight: 'normal' }
-  },
-
-  caption: {
-    extend: [Block, Text],
-    props: {
-      text: 'IconText',
-      padding: '0 0 A B1'
-    }
-  },
-
-  objectComponent: {
-    extend: [Block, Flex],
-    style: { flexDirection: 'column' },
-    childExtend: {
-      extend: [Block, Flex, Text, Shape],
-      props: {
-        padding: 'Z2 0 Z2 B1',
-        round: 'A'
-      },
-      style: {
-        alignItems: 'center'
-      },
-      icon: { extend: Icon },
-      caption: {
-        extend: [Block, Text],
-        props: { padding: '0 X2 0 Y' }
-      },
-      span: {
-        extend: Text,
-        style: { opacity: '.35' }
-      }
-    },
-    ...[
-      {
-        icon: {
-          name: 'shapes',
-          style: { color: '#7345AF' }
-        },
-        caption: { props: { text: 'Icon' } },
-        span: { props: { text: 'moon' } }
-      },
-
-      {
-        icon: {
-          name: 'typography',
-          style: { color: '#35C6E4' }
-        },
-        caption: { props: { text: 'Text' } },
-        span: { props: { text: 'Go Dark' } }
-      }
-    ]
-  }
-}
-
-export default {
-  tag: 'aside',
-  extend: [Block, Text],
-  props: { size: 'Y' },
-
-  caption: {
-    extend: [Block, Text],
-    props: {
-      text: 'Layer'
-    },
-    style: {
-      opacity: '.35',
-      display: 'flex',
-      alignItems: 'center',
-      height: '32.5px',
-      marginTop: '12px',
-      marginBottom: '4px',
-      marginLeft: '6px'
-    }
-  },
-
-  layer: {
-    extend: objectLayer,
-    props: {
-      theme: 'buttonPrimary'
-    },
-    style: { background: 'rgba(255, 255, 255, .05)' },
-    h4: {},
-    caption: {},
-    objectComponent: {},
-
-    layer2: {
-      extend: objectLayer,
-      style: {
-        margin: '0 auto',
-        background: 'rgba(255, 255, 255, .04)',
-        cursor: 'pointer',
-        '&:hover': {
-          border: '1px solid #3477F4',
-          color: 'white'
-        }
-      },
-
-      h4: {},
-      caption: { },
-
-      objectComponent: {
-        style: {
-          '> div:hover': { border: '1px solid #3477F4' }
-        }
-      }
-    }
-  }
-}

package/src/pages/Editor/scene.js

@@ -1,95 +0,0 @@
-'use strict'
-
-import { Block, Flex, Text, KangorooButton, Breadcrumb, SceneToolBar, Scene } from '@symbo.ls/components'
-
-const header = {
-  extend: [Flex, Block],
-  style: {
-    justifyContent: 'space-between',
-    marginTop: '12px',
-    marginBottom: '4px'
-  },
-  nav: {
-    extend: [Breadcrumb, Text],
-    props: { size: 'A' },
-    all: {
-      props: {
-        href: '/components'
-      },
-      text: 'Buttons'
-    },
-
-    title: {
-      text: 'kangoroo'
-    }
-  },
-  tool: {
-    SceneToolBar
-  }
-}
-
-const buttonThemeSwitcher = {
-  extend: KangorooButton,
-
-  props: {
-    round: 'C',
-    size: 'A',
-    padding: 'X1 Y X1 A1',
-    gap: 'Z1',
-    depth: 16,
-
-    light: {
-      icon: 'sun',
-      text: 'Light Mode'
-    },
-
-    dark: {
-      round: 'C',
-      icon: 'moon',
-      padding: 'Z Z1',
-      text: 'Dark Mode'
-    }
-  },
-
-  iconText: {
-    props: el => el.parent.props.light
-  },
-
-  child: {
-    props: el => el.parent.props.dark
-  },
-
-  style: {
-    fontWeight: 'bold',
-
-    svg: {
-      color: '#EDCB38',
-      marginRight: `${4 / 16}em`
-    },
-
-    span: {
-      maxHeight: '32px',
-      padding: `${9 / 14}em ${16 / 14}em`,
-      marginLeft: `${16 / 14}em`
-    }
-  }
-
-}
-export default {
-  extend: Flex,
-  style: {
-    flex: 1,
-    flexDirection: 'column'
-  },
-  header: { extend: header },
-  scene: {
-    extend: Scene,
-    style: {
-      flex: 1,
-      '> div': { height: '100%' }
-    },
-    scene: {
-      buttonThemeSwitcher
-    }
-  }
-}

package/src/pages/Editor/style.js

@@ -1,13 +0,0 @@
-'use strict'
-
-export default {
-  // border: '1px solid red',
-  flexDirection: 'column',
-  '> div': {
-    // border: '5px solid green',
-    flex: 1
-  },
-  aside: {
-    width: '223px'
-  }
-}

package/src/pages/Editor/tools.js

@@ -1,360 +0,0 @@
-'use strict'
-
-import { Shape, Block, Flex, Text, SquareButton, ButtonSet, ClickableItem, ThemeSwitcher, ToolItem } from '@symbo.ls/components'
-
-const commonComponent = {
-  extend: Block,
-  caption: {
-    extend: [Block, Text],
-    props: {
-      padding: 'A X'
-    },
-    style: {
-      opacity: '.35',
-      textTransform: 'capitalize'
-    }
-  },
-  toolsContainer: {
-    extend: [Block, Shape, Flex],
-    props: {
-      gap: 'A',
-      padding: 'A 0',
-      round: 'A'
-    },
-    style: {
-      flexDirection: 'column',
-      alignItems: 'center',
-      background: 'rgba(255, 255, 255, .06)'
-    },
-    tools: {
-      extend: [Block, Flex],
-      props: { gap: 'A' },
-      style: {
-        flexDirection: 'column'
-      },
-      childExtend: {
-        extend: ToolItem,
-        icon: { },
-        tool: {
-          props: { padding: 'X2' },
-          button0: { props: { size: 'B' } },
-          value: {
-            props: { size: 'A' },
-            style: { color: 'white', opacity: 1 }
-          },
-          range: {},
-          button1: { props: { size: 'B' } },
-          button2: {
-            extend: [SquareButton, ClickableItem],
-            props: {
-              icon: 'arrowAngleMirroringVertical',
-              size: 'B',
-              padding: 'X'
-            }
-          }
-        }
-      },
-      ...[{}]
-    }
-  }
-}
-
-const themeSwitcher = {
-  extend: ThemeSwitcher,
-  props: {
-    padding: 'Y2 X2 Y2 Z'
-  },
-  themePreview: {
-    props: {
-      round: 'Y',
-      text: 'A'
-    },
-    style: {
-      background: 'rgba(53, 31, 89, .35)',
-      width: '24px',
-      height: '24px'
-    },
-    dot: {
-      style: {
-        top: '6px',
-        right: '6px'
-      }
-    }
-  },
-
-  title: {
-    extend: [Flex, Block],
-    props: { gap: 'W' },
-    style: { flexDirection: 'column' },
-    text: 'Revolver',
-    span: {
-      text: 'Call to action',
-      style: {
-        display: 'block',
-        opacity: '.4'
-      }
-    }
-  },
-  button0: { props: { size: 'B' } },
-  button1: {
-    props: {
-      icon: 'arrowAngleMirroringVertical',
-      size: 'B'
-    }
-  }
-}
-
-const style = {
-  extend: commonComponent,
-  caption: {
-    props: { text: 'style' }
-  },
-  toolsContainer: {
-    themeSwitcher,
-    tools: {
-      ...[
-        {
-          icon: { name: 'colorOpacity' },
-
-          tool: {
-            button0: {},
-            value: { text: '100%' },
-            range: {},
-            button1: {},
-            button2: 0
-          }
-        },
-
-        {
-          icon: { name: 'textCaseTitle' },
-
-          tool: {
-            button0: {},
-            value: { text: '100%' },
-            range: {},
-            button1: {},
-            button2: null
-          }
-        }
-      ]
-    }
-  }
-}
-
-const spaces = {
-  extend: commonComponent,
-  caption: { props: { text: 'spaces' } },
-  toolsContainer: {
-    tools: {
-      ...[
-        {
-          icon: { name: 'fontSize' },
-          tool: {
-            button0: {},
-            value: { text: '16px' },
-            range: {},
-            button1: {},
-            button2: null
-          }
-        },
-
-        {
-          icon: { name: 'spacesOutline' },
-
-          tool: {
-            button0: {},
-            value: {
-              text: '1.618',
-              style: {
-                flex: 1,
-                textAlign: 'center'
-              }
-            },
-            range: null,
-            button1: {
-              style: {
-                marginRight: '6px'
-              }
-            },
-            button2: {}
-          }
-        }
-      ]
-    }
-  }
-}
-
-const border = {
-  extend: commonComponent,
-  caption: { props: { text: 'border' } },
-  toolsContainer: {
-    tools: {
-      ...[
-        {
-          icon: { name: 'borderWeight' },
-
-          tool: {
-            button0: {},
-            value: { text: '16px' },
-            range: {},
-            button1: {},
-            button2: 0
-          }
-        },
-
-        {
-          icon: { name: 'borderOpacity' },
-
-          tool: {
-            button0: {},
-            value: { text: '1.618' },
-            range: {},
-            button1: {},
-            button2: null
-          }
-        }
-      ]
-    }
-  }
-}
-
-const form = {
-  extend: commonComponent,
-  caption: { props: { text: 'form' } },
-  toolsContainer: {
-    tools: {
-      ...[
-        {
-          icon: { name: 'shapes' },
-
-          tool: {
-            button0: null,
-            box: {
-              extend: [Block, Shape],
-              props: {
-                round: 'X2'
-              },
-              style: {
-                width: '13px',
-                height: '13px',
-                background: 'rgba(255, 255, 255, .1)',
-                border: '1px solid rgba(255, 255, 255, .1)',
-                marginLeft: '2px',
-                marginRight: '5px'
-              }
-            },
-            value: {
-              text: 'Rounded',
-              style: {
-                flex: '1'
-              }
-            },
-            range: null,
-            button1: null,
-            button2: {}
-          }
-        },
-
-        {
-          icon: { name: 'borderRadius' },
-
-          tool: {
-            button0: {},
-            value: {
-              text: '1.618',
-              style: {
-                flex: 1,
-                textAlign: 'center'
-              }
-            },
-            range: null,
-            button1: { style: { marginRight: '6px' } },
-            button2: {}
-          }
-        }
-      ]
-    }
-  }
-}
-
-export const accessibilityButoons = {
-  extend: ButtonSet,
-  props: {
-    gap: 'A1',
-    padding: '0 0 Z 0'
-  },
-
-  childExtend: {
-    extend: SquareButton,
-    props: {
-      theme: 'transparent',
-      size: 'C'
-    }
-  },
-  ...[
-    { props: { icon: 'crossmark' } },
-    { props: { icon: 'url' } },
-    { props: { icon: 'keyboard' } },
-    { props: { icon: 'arrayOutline' } },
-    { props: { icon: 'mouse' } }
-  ]
-}
-
-const accessibility = {
-  extend: commonComponent,
-  caption: { props: { text: 'accessibility' } },
-  toolsContainer: {
-    accessibilityButoons,
-    tools: {
-      ...[
-        {
-          icon: { name: 'eyeOpen' },
-
-          tool: {
-            button0: null,
-            box: {
-              extend: [Block, Shape],
-              props: {
-                round: 'X2'
-              },
-              style: {
-                width: '13px',
-                height: '13px',
-                background: 'rgba(255, 255, 255, .1)',
-                border: '1px solid rgba(255, 255, 255, .1)',
-                marginLeft: '2px',
-                marginRight: '5px'
-              }
-            },
-            value: {
-              text: 'Rounded',
-              style: {
-                flex: '1'
-              }
-            },
-            range: null,
-            button1: null,
-            button2: {}
-          }
-        }
-      ]
-    }
-  }
-}
-
-export default {
-  tag: 'aside',
-  extend: [Block, Text],
-  props: { size: 'Y' },
-  style: {
-    paddingTop: '10px'
-  },
-  childExtend: commonComponent,
-  ...[
-    style,
-    spaces,
-    border,
-    form,
-    accessibility
-  ]
-}

package/src/pages/Export/const.js

@@ -1,19 +0,0 @@
-'use strict'
-
-import { SEQUENCE, TYPOGRAPHY } from '@symbo.ls/scratch'
-import { LIBRARY, COMPONENTS } from '@symbo.ls/temp-db/symbols' // eslint-disable-line
-
-const COMPONENT_ROUTES = {}
-// LIBRARY.map(v => (COMPONENT_ROUTES[`/${v.key}`] = v))
-COMPONENTS.map(v => (COMPONENT_ROUTES[`/${v.key}`] = v))
-
-// const SEQUENCE = [8, 9, 10, 11, 12, 13, 14, 15, 16, 18, 20, 22, 24, 26, 32, 36, 42, 48, 56, 62, 68, 76, 84, 92, 100, 110]
-
-const TYPOGRAPHY_SEQUENCE = Object.keys(TYPOGRAPHY.sequence).reverse().map(v => {
-  const val = TYPOGRAPHY.sequence[v].val
-  return val
-})
-
-const SPACING_RATIO = Object.values(SEQUENCE).reverse().map(v => v)
-
-export { COMPONENT_ROUTES, TYPOGRAPHY_SEQUENCE, SPACING_RATIO }

package/src/pages/Export/description.js

@@ -1,88 +0,0 @@
-'use strict'
-
-// import showdown from 'showdown'
-import { CommonField, Flex, PropertyList } from '@symbo.ls/components'
-
-const description = {
-  extend: CommonField,
-  if: ({ state }) => state.description,
-  props: {
-    padding: '0 0 B 0',
-    caption: {
-      size: 'Z',
-      padding: '0 0 Y2 0',
-      opacity: 0.5
-    },
-    p: {
-      margin: '0'
-    }
-  },
-  caption: {
-    text: 'Description'
-  },
-  p: {
-    text: ({ state }) => state.description
-  }
-}
-
-const readme = {
-  extend: CommonField,
-  if: ({ state }) => state.readme,
-  props: ({ state }) => ({
-    padding: '0 0 B 0',
-    caption: {
-      text: 'README.md',
-      size: 'Z',
-      opacity: 0.5,
-      padding: '0 0 Y2 0'
-    },
-    p: {
-      margin: '0'
-    }
-  }),
-  caption: {},
-  cnt: {
-    html: ({ state }) => {
-      // const converter = new showdown.Converter()
-      // return converter.makeHtml(state.readme)
-    }
-  }
-}
-
-export default {
-  tag: 'article',
-  props: { padding: 'B2 0' },
-
-  description,
-
-  readme,
-
-  usage: {
-    extend: [Flex],
-    props: { gap: 'C1' },
-
-    table: {
-      props: { flex: 1 },
-      extend: PropertyList,
-      if: ({ state }) => state.props,
-
-      title: {},
-      list: {
-        // $setStateCollection: ({ state }) => state.props
-      }
-    },
-
-    code: {
-      extend: 'Code',
-      props: {
-        flex: '0 0 320px',
-        margin: '0'
-      },
-      if: ({ state }) => state.code,
-      title: {},
-      code: {
-        text: ({ state }) => state.code
-      }
-    }
-  }
-}

package/src/pages/Export/gist.js

@@ -1,23 +0,0 @@
-'use strict'
-
-export const fetchGist = (key, state) => {
-  window.fetch(`https://api.github.com/gists/${key}`, {
-    headers: {
-      Authorization: `token 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`
-    }
-  })
-    .then((response) => response.json())
-    .then((data) => {
-      const { description, files } = data
-      const component = files['component.js'].content
-      const readme = files['README.md'].content
-      const props = files['props.js'] // .content
-
-      state.update({
-        readme,
-        component,
-        description,
-        props
-      })
-    })
-}