@symbo.ls/preview 2.7.25 → 2.11.269

package/blocks/shadow.js

@@ -0,0 +1,91 @@
+'use strict'
+
+import { Grid } from '@symbo.ls/atoms'
+import { DefaultBlock } from './section'
+
+export const shadow = {
+  extend: DefaultBlock,
+  props: {
+    padding: 'D2 D',
+    '@mobileL': { padding: 'E C' },
+    '@mobileS': { padding: 'E B' }
+  },
+
+  Title: null,
+
+  Paragraph: {
+    extend: Grid,
+    props: {
+      columns: 'repeat(8, 1fr)',
+      gap: 'C2',
+      '@tabletM': { gap: 'B2' },
+      '@tabletS': { columns: 'repeat(4, 1fr)' },
+      '@mobileL': { gap: 'B1' },
+      '@mobileS': { gap: 'B' },
+      '@mobileXS': { gap: 'A1' },
+      childProps: {
+        theme: 'dialog',
+        aspectRatio: '1 / 1',
+        round: 'Z'
+      }
+    },
+    ...[
+      {
+        props: {
+          style: {
+            boxShadow: 'rgb(38, 57, 77) 0px 20px 30px -10px'
+          }
+        }
+      },
+      {
+        props: {
+          style: {
+            boxShadow: 'rgba(38, 57, 77, 0.56) 0px 22px 70px 4px'
+          }
+        }
+      },
+      {
+        props: {
+          style: {
+            boxShadow: 'rgba(38, 57, 77, 0.19) 0px 10px 20px, rgba(38, 57, 77, 0.23) 0px 6px 6px'
+          }
+        }
+      },
+      {
+        props: {
+          style: {
+            boxShadow: 'rgba(38, 57, 77, 0.12) 0px 2px 4px 0px, rgba(38, 57, 77, 0.32) 0px 2px 16px 0px'
+          }
+        }
+      },
+      {
+        props: {
+          style: {
+            boxShadow: 'rgba(38, 57, 77, 0.3) 0px 19px 38px, rgba(38, 57, 77, 0.22) 0px 15px 12px'
+          }
+        }
+      },
+      {
+        props: {
+          style: {
+            boxShadow: 'rgba(38, 57, 77, 0.35) 0px 5px 15px'
+          }
+        }
+      },
+      {
+        props: {
+          style: {
+            boxShadow: 'rgba(38, 57, 77, 0.25) 0px 13px 27px -5px, rgba(38, 57, 77, 0.35) 0px 8px 16px -8px'
+          }
+        }
+      },
+      {
+        props: {
+          style: {
+            boxShadow: 'rgba(38, 57, 77, 0.25) 0px 30px 60px -12px, rgba(38, 57, 77, 0.25) 0px 18px 36px -18px'
+          }
+        }
+      }
+    ]
+  }
+}

package/blocks/shape.js

@@ -0,0 +1,34 @@
+'use strict'
+
+import { shadow } from './shadow'
+
+export const shape = {
+  extend: shadow,
+  Title: null,
+  Paragraph: {
+    props: {
+      // gap: 'E',
+      columns: 'repeat(8, 1fr)',
+      childProps: {
+        border: 'solid, white .05',
+        borderWidth: '2px',
+        style: {
+          boxShadow: 'rgba(38, 57, 77, 0.12) 0px 2px 4px 0px, rgba(38, 57, 77, 0.32) 0px 2px 16px 0px'
+        },
+        ':first-child': { round: 'A 0 0 0' },
+        ':nth-child(2)': { round: 'E A 0 0' },
+        ':nth-child(3)': {
+          round: '100%',
+          aspectRatio: '1/1'
+        },
+        ':nth-child(4)': { round: '0 D 0 A' },
+        ':nth-child(5)': { round: '0 0 G 0' },
+        ':nth-child(7)': { round: '0 0 E1 E1' },
+        ':nth-child(8)': { round: 'G 0 0 0' }
+      }
+    },
+    ...[
+      {}, {}, {}, {}, {}, {}, {}, {}
+    ]
+  }
+}

package/content/color.js

@@ -0,0 +1,3 @@
+export default {
+
+}

package/content/icon.js

@@ -0,0 +1,3 @@
+export default {
+
+}

package/content/index.js

@@ -0,0 +1,13 @@
+'use strict'
+
+import color from './color'
+import icon from './icon'
+import shadow from './shadow'
+import typography from './typography'
+
+export default {
+  color,
+  icon,
+  shadow,
+  typography
+}

package/content/shadow.js

@@ -0,0 +1,3 @@
+export default {
+
+}

package/content/typography.js

@@ -0,0 +1,15 @@
+export default {
+  title: 'Colors',
+  paragraph: 'Our color palette is led by a bold, distinct primary color and rounded out by a select set of secondary colors that give depth and diversity to our designs.',
+
+  list: {
+    title: 'What you’ll find',
+    data: [
+      'Primary colors',
+      'Secondary colors',
+      'Greyscale',
+      'System colors',
+      'Background colors'
+    ]
+  }
+}

package/index.js

@@ -1,50 +1,4 @@
 'use strict'
 
-import '@symbo.ls/platform-define'
-import { init, system } from '@symbo.ls/platform-init'
-import { state } from '@symbo.ls/platform-state'
-
-import DOM from 'domql'
-import * as smbls from '@symbo.ls/components'
-import * as components from './src/components'
-
-import App from './src/app'
-import { router, lastLevel } from '@domql/router'
-import { Main } from './src/pages'
-
-const designSystem = init(system)
-
-const app = DOM.create({
-  extend: App,
-  state,
-  header: { extend: components.Header },
-
-  define: { routes: param => param },
-  routes: {
-    '/': Main
-  },
-
-  on: {
-    render: (el) => {
-      const { pathname, hash } = window.location
-      const url = pathname + hash
-      router(el, url, {}, {
-        level: lastLevel,
-        pushState: false
-      })
-    }
-  }
-}, undefined, 'app', {
-  extend: [smbls.Box],
-  components: { ...smbls, ...components },
-  context: { system: designSystem }
-})
-
-window.onpopstate = e => {
-  const { pathname, hash } = window.location
-  const url = pathname + hash
-  router(app, url, {}, {
-    level: lastLevel,
-    pushState: false
-  })
-}
+export * from './pages/Components'
+export * from './pages/Styleguide'

package/package.json

@@ -1,31 +1,12 @@
 {
   "name": "@symbo.ls/preview",
-  "description": "Symbols editor",
-  "author": "symbo.ls",
-  "version": "2.7.25",
-  "repository": "https://github.com/symbo-ls/editor",
-  "main": "src/app.js",
-  "scripts": {
-    "prestart": "rm -rf .cache dist",
-    "start": "parcel index.html --port 1300 --no-cache",
-    "prebuild": "rm -rf dist",
-    "build": "parcel build index.html",
-    "reinstall": "rm -rf node_modules/@symbo.ls node_modules/@domql node_modules/domql node_modules/smbls dist yarn.lock .cache && yarn"
-  },
+  "version": "2.11.269",
+  "main": "index.js",
+  "license": "MIT",
+  "gitHead": "9539c62d29cc279dbe7e149aa96bb8ee019c7119",
   "dependencies": {
-    "@symbo.ls/components": "latest"
-  },
-  "devDependencies": {
-    "@domql/router": "latest",
-    "domql": "^1.5.2",
-    "@babel/core": "^7.11.5",
-    "babel-eslint": "^10.0.3",
-    "eslint": "^6.1.0",
-    "parcel-bundler": "^1.12.4",
-    "parcel-plugin-svg-sprite": "^1.4.1",
-    "standard": "^13.1.0"
+    "@symbo.ls/atoms": "latest",
+    "@symbo.ls/button": "latest"
   },
-  "standard": {
-    "parser": "babel-eslint"
-  }
+  "source": "src/index.js"
 }

package/pages/Components.js

@@ -0,0 +1,288 @@
+'use strict'
+
+import { Avatar, SearchWithButton } from '@symbo.ls/uikit'
+
+export const ComponentsPage = {
+  extend: 'Flex',
+
+  state: {
+    globalTheme: 'dark',
+    value: ''
+  },
+
+  props: {
+    fontFamily: 'avenir',
+    ':before': {
+      content: '""',
+      boxSize: 'E 100%',
+      position: 'fixed',
+      top: '0',
+      left: '0',
+      zIndex: '10',
+      background: ' linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%)',
+      pointerEvents: 'none'
+    },
+    ':after': {
+      content: '""',
+      boxSize: 'E 100%',
+      position: 'fixed',
+      bottom: '0',
+      left: '0',
+      zIndex: '10',
+      background: ' linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%)',
+      pointerEvents: 'none'
+    },
+
+    footer: {
+      position: 'fixed',
+      width: 'calc(100% - 70px)',
+      zIndex: '100',
+      bottom: '0',
+      right: '0',
+      align: 'center flex-end',
+      padding: '- B B -',
+      '@media only screen and (max-width: 480px)': {
+        justifyContent: 'center',
+        padding: '- 20px 30px 20px'
+      },
+      search: {
+        fontFamily: 'avenir',
+        fontWeight: '400',
+        round: 'D',
+        flow: 'row',
+        border: 'solid, #252527',
+        borderWidth: '1px',
+        width: 'G+D',
+        padding: 'Z A Z B',
+        position: 'relative',
+        Icon: {
+          boxSize: 'A+V A+V',
+          color: '#3F3F43'
+        },
+        input: {
+          fontFamily: 'avenir',
+          placeholder: 'find component . . .',
+          fontSize: 'A',
+          ':focus ~ svg': { opacity: '0' }
+        },
+        x: {
+          color: 'white',
+          position: 'absolute',
+          right: 'A'
+        }
+      }
+    }
+  },
+
+  cnt: {
+    extend: 'Flex',
+
+    props: {
+      flow: 'column',
+      padding: 'F E E D',
+      gap: 'E+C',
+      minWidth: 'calc(100% - 70px)',
+      height: '100dvh',
+      margin: '- - - auto',
+      style: {
+        overflowY: 'auto',
+        scrollBehavior: 'smooth'
+      }
+    },
+
+    childExtend: {
+      props: ({ key, state }) => ({
+        hide: !key.toLowerCase().includes(state.value),
+        position: 'relative'
+      }),
+      __title: {
+        props: {
+          ignoreChildExtend: true,
+          position: 'absolute',
+          left: '0',
+          top: '-C',
+          fontSize: '14px',
+          color: 'white .35'
+        },
+        text: ({ parent }) => parent.key
+      }
+    },
+
+    H1: {
+      props: { hide: false },
+      __title: { text: 'Searched value:' },
+      text: ({ state }) => state.value
+    },
+
+    StatusIndicator: {},
+    Avatar: {},
+    AvatarIndicator: {},
+    AvatarBundle: {
+      childExtend: Avatar,
+      ...[{}, {}, {}]
+    },
+    AvatarChooser: {
+      options: [{
+        text: 'Kevin'
+      }, {
+        text: 'John'
+      }]
+    },
+    Hgroup: {
+      Title: { text: 'Title' },
+      Paragraph: { text: 'Paragraph' }
+    },
+    User: {
+      Avatar: {},
+      Notes: {
+        Title: { text: 'Erin Schleifer' },
+        Paragraph: { text: 'email@symbols.com' }
+      }
+    },
+    Label: {},
+    UserWithLabel: {},
+    CountIndicator: {},
+    ChatUser: {},
+    UserButtonSet: {},
+    UserButtonSetCircle: {},
+    UserMessage: {},
+    UserWithButton: {},
+
+    FlexButton: {},
+    CancelConfirmButtons: {},
+    SquareButton: {},
+
+    Tab: {},
+    IconTab: {},
+    Modal: {},
+    Message: {},
+    SuccessIndicator: {},
+    CompleteProcess: {},
+    UploadButton: {},
+    UploadLabel: {},
+    UploadFooter: {},
+    UploadModal: {},
+    UploadButtonWithBackground: {},
+    UploadLabel2: {},
+    UploadModal2: {},
+    UploadModal3: {},
+    UploadImage: {},
+    DoubleUnitValue: {},
+    ProgressLine: {},
+    UploadingProcess: {},
+    UploadedProcess: {},
+    UnitValue: {
+      Value: { text: '72' },
+      Unit: { text: '%' }
+    },
+    ProgressLineWithUnitValue: {},
+    UploadingProcess2: {},
+    UploadedProcess2: {},
+    ProgressCircleWithSideUnitValue: {},
+    UploadingProcess3: {},
+    UploadedProcess3: {},
+    ProgressCircle: {},
+    ProgressCircleWithIcon: {},
+    ProgressCircleWithUnitValue: {},
+    UploadingProcess4: {},
+    UploadedProcess4: {},
+    UploadModal4: {},
+
+    Checkbox: {},
+    Radio: {},
+    Toggle: {},
+    NumberInput: {},
+
+    Field: {},
+    FieldTemplate: {},
+    FieldWithTitle: {},
+    FieldWithTitleTemplate: {},
+    TextAreaField: {},
+
+    ParagraphButton: {},
+    VerificationCode: {},
+    ResetPassword: {},
+    ParagraphButtonWithCheckbox: {},
+    ContactForm: {},
+    SignUp: {},
+    DoubleHr: {},
+    SocialLink: {},
+    LogIn: {},
+
+    Search: {},
+    SearchWithButton: {},
+    DropDownButton: {},
+    SearchWithDropDownButton: {},
+    ListTemplate: {},
+    ListWithTitleTemplate: {},
+    GroupListTemplate: {},
+    GroupListWithSearchTemplate: {},
+
+    CheckIndicator: {},
+    CheckIndicatorWithLabel: {},
+    CheckStep: {},
+    CheckSteps: {},
+    RadioIndicator: {},
+    RadioIndicatorWithLabel: {},
+    RadioStep: {},
+    RadioSteps: {},
+    LineSteps: {},
+    LineStepsWithHgroup: {},
+
+    StepCard: {},
+    UnitValueWithLabel: {},
+    BalanceCard: {},
+    UnitValueWithTitle: {},
+    DropDownButtonWithAvatar: {},
+    ConvertCard: {},
+    CurrencyConvert: {},
+    PlusMinusButtons: {},
+    Pricing: {},
+
+    DatePicker: {},
+    TimePicker: {}
+  },
+
+  footer: {
+    extend: 'Flex',
+    Search: {
+      extend: SearchWithButton,
+      props: {
+        minWidth: 'G+C',
+        minHeight: 'C+X',
+        maxHeight: 'C+Z',
+        round: 'C',
+        padding: '- A+W - A+Y',
+        border: '1px solid #3F3F43',
+        background: 'transparent'
+      },
+      Input: {
+        props: {
+          fontSize: 'Z1',
+          placeholder: 'Find component ...',
+          ':focus ~ svg': { opacity: '0' }
+        },
+        on: {
+          keyup: (event, el, s) => {
+            const value = el.node.value.toLowerCase()
+            s.update({ value })
+          }
+        }
+      },
+      Icon: {
+        props: {
+          fontSize: 'C',
+          color: '#3F3F43'
+        }
+      },
+      Button: {
+        props: {
+          position: 'absolute',
+          margin: 'auto',
+          right: 'Z',
+          color: '#3F3F43'
+        }
+      }
+    }
+  }
+}

package/pages/Styleguide.js

@@ -0,0 +1,35 @@
+'use strict'
+
+import { Flex } from '@symbo.ls/atoms'
+
+import { Colors, Typography, Shadows, Icons, Spacing, Shapes } from '../articles'
+
+export const StyleguidePage = {
+  extend: Flex,
+  tag: 'main',
+  props: {
+    theme: 'document',
+    position: 'relative',
+    flow: 'column',
+    overflow: 'hidden auto',
+    height: '100%',
+    width: '100%',
+    '@tabletM': {
+      fontSize: 'Z1'
+    },
+    '> article': {
+      flow: 'column',
+      '> header': {
+        border: 'solid, white .15',
+        borderWidth: '.5px 0 .5px 0'
+      }
+    }
+  },
+
+  Colors,
+  Typography,
+  Shadows,
+  Shapes,
+  Icons,
+  Spacing
+}

package/.eslintrc.js

@@ -1,9 +0,0 @@
-module.exports = {
-  "extend": "standard",
-  "env": {
-    "es6": true,
-    "browser": true,
-    "node": true,
-    "jest": true
-  }
-}

package/.vscode/settings.json

@@ -1,6 +0,0 @@
-{
-  "search.exclude": {
-    "**/*.code-search": false,
-    "**/node_modules": false
-  }
-}

package/README.md

@@ -1 +0,0 @@
-# Editor

package/config.js

@@ -1,6 +0,0 @@
-'use strict'
-
-import { init } from '@symbo.ls/components'
-import SYMBOLS_CONF from '@symbo.ls/config'
-
-export default init({ verbose: false, ...SYMBOLS_CONF })

package/define.js

@@ -1,10 +0,0 @@
-'use strict'
-
-import DOM from 'domql'
-import * as smbls from '@symbo.ls/components'
-
-DOM.define({
-  __filepath: param => param,
-  $setCollection: smbls.Collection.define.$setCollection,
-  $setStateCollection: smbls.Collection.define.$setStateCollection
-})

package/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html background="#000">
-  <title>Editor - Symbols</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
-  <meta name="apple-mobile-web-app-capable" content="yes">
-
-  <meta charset="UTF-8">
-</head>
-<body>
-</body>
-<script src="./index.js"></script>
-</html>

package/src/app.js

@@ -1,54 +0,0 @@
-'use strict'
-
-import { Flex } from '@symbo.ls/components'
-
-const Preview = {
-  key: 'app',
-
-  props: {
-    boxSize: '100% 100%',
-    position: 'absolute',
-    top: '0',
-    left: '0',
-    theme: 'document',
-    flexFlow: 'column',
-    flexAlign: 'center flex-start'
-  },
-
-  routes: {
-    '/preview': {
-      extend: Flex,
-      props: ({ state }) => ({
-        fullscreen: state.previewTab === 'fullscreen',
-        transition: 'B defaultBezier',
-        transitionProperty: 'padding',
-        boxSize: '100% 100%',
-        position: 'absolute',
-        top: '0',
-        left: '0',
-        theme: 'document',
-        flexFlow: 'column',
-        flexAlign: 'center flex-start',
-
-        '.fullscreen': {
-          zIndex: '999999',
-          padding: 'X'
-        },
-
-        '!fullscreen': {
-          padding: 'D+Z Z Z Z'
-        }
-      }),
-      Iframe: {
-        props: (el, s) => ({
-          boxSize: '100% 100%',
-          round: 'Z',
-          border: '0',
-          src: `https://${s.appKey}/`
-        })
-      }
-    }
-  }
-}
-
-export default Preview