@symbo.ls/preview 2.7.24 → 2.11.265

package/components.js

@@ -0,0 +1,289 @@
+'use strict'
+
+import { Flex } from '@symbo.ls/atoms'
+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/index.js

@@ -1,50 +1,35 @@
 '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
-      })
+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'
+      }
     }
-  }
-}, 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
-  })
+  Colors,
+  Typography,
+  Shadows,
+  Shapes,
+  Icons,
+  Spacing
 }

package/package.json

@@ -1,31 +1,12 @@
 {
   "name": "@symbo.ls/preview",
-  "description": "Symbols editor",
-  "author": "symbo.ls",
-  "version": "2.7.24",
-  "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.265",
+  "main": "index.js",
+  "license": "MIT",
+  "gitHead": "e256f5a24de103ca563abb7cf95fdc8723a2b1ab",
   "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/sections/color.js

@@ -0,0 +1,52 @@
+'use strict'
+
+import { Grid } from '@symbo.ls/atoms'
+import { DemoSection } from './section'
+
+const ColorTemplate = {
+  extend: 'Flex',
+  props: {
+    gap: 'A'
+  },
+
+  Color: {
+    boxSize: 'D1',
+    aspectRatio: '1 / 1',
+    theme: 'dialog',
+    round: 'W'
+  },
+
+  Description: {
+    extend: 'Flex',
+    props: { gap: 'X', flow: 'column' },
+    Title: { color: 'title' },
+    Value: { margin: 'X - -', color: 'paragraph' },
+    Var: { color: 'paragraph' }
+  }
+}
+
+export const ColorSection = {
+  extend: DemoSection,
+
+  Title: {
+    props: {
+      text: 'Primary color',
+      padding: 'C1 - B1 -'
+    }
+  },
+
+  Paragraph: {
+    extend: Grid,
+
+    props: {
+      columns: 'repeat(4, 1fr)',
+      gap: 'D',
+      '@tabletS': { columns: 'repeat(3, 1fr)' },
+      '@mobileL': { columns: 'repeat(2, 1fr)' },
+      '@mobileS': { columns: 'repeat(1, 1fr)' },
+      '@mobileXS': { gap: 'A2' }
+    },
+
+    childExtend: ColorTemplate
+  }
+}

package/sections/font.js

@@ -0,0 +1,60 @@
+'use stric'
+
+import { DemoSection } from './section'
+
+export const font = {
+  extend: DemoSection,
+  props: {
+    flex: '1',
+    padding: 'D D D1 D',
+    '@mobileL': { padding: 'C C' },
+    '@mobileS': { padding: 'C B' }
+  },
+
+  Title: {
+    props: { text: 'Sans-Serif' }
+  },
+  Paragraph: {
+    tag: 'p',
+    props: {
+      theme: 'dialog',
+      fontSize: 'G2',
+      maxWidth: '100%',
+      boxSizing: 'border-box',
+      padding: 'A',
+      flow: 'column',
+      gap: '0',
+      round: 'V2',
+      lineHeight: '1.1em',
+      '@mobileL': {
+        fontSize: 'G',
+        padding: 'Z1 Z1'
+      },
+      '@mobileS': {
+        fontSize: 'F2',
+        padding: 'Z1 Z'
+      },
+
+      childProps: {
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        maxWidth: '100%',
+        whiteSpace: 'nowrap',
+        minWidth: '0',
+        text: 'Today is a big day for our tribe. The year ends.',
+        ':first-child': { fontWeight: '900' },
+        ':nth-child(2)': { fontWeight: '700' },
+        ':nth-child(3)': { fontWeight: '500' },
+        ':nth-child(4)': { fontWeight: '400' },
+        ':last-child': { fontWeight: '100' }
+      }
+    },
+    ...[
+      { },
+      {},
+      {},
+      {},
+      {}
+    ]
+  }
+}

package/sections/icon.js

@@ -0,0 +1,54 @@
+'use strict'
+
+import { Grid } from '@symbo.ls/atoms'
+import { DemoSection } from './section'
+
+export const icon = {
+  extend: DemoSection,
+  props: {
+    padding: 'E D E1 D',
+    '@mobileL': { padding: 'D C' },
+    '@mobileS': { padding: 'D B' }
+  },
+
+  Title: null,
+  Paragraph: {
+    extend: Grid,
+    props: {
+      columns: 'repeat(7, 1fr)',
+      gap: 'C',
+      '@tabletS': { gap: 'B1' },
+      '@mobileL': { gap: 'A2' },
+      '@mobileM': { gap: 'A' },
+      '@mobileS': { gap: 'Z' }
+      // padding: 'E D E2 D'
+    },
+    childExtend: {
+      extend: 'Flex',
+      props: {
+        align: 'center',
+        aspectRatio: '1/1',
+        theme: 'dialog',
+        round: 'Z'
+        // padding: 'D B'
+      },
+      Icon: {
+        margin: 'auto',
+        fontSize: 'D',
+        '@mobileM': { fontSize: 'C' },
+        '@mobileS': {
+          fontSize: 'B1',
+          round: 'X'
+        }
+      }
+    },
+
+    $collection: ({ context }) => {
+      const { ICONS } = context.designSystem
+      return Object.keys(ICONS).map(name => ({
+        Icon: { name }
+      }))
+    }
+
+  }
+}

package/sections/index.js

@@ -0,0 +1,7 @@
+'use strict'
+
+export * from './font'
+export * from './color'
+export * from './shadow'
+export * from './icon'
+export * from './shape'

package/sections/section.js

@@ -0,0 +1,23 @@
+'use strict'
+
+import { Hgroup } from '@symbo.ls/hgroup'
+
+export const DemoSection = {
+  tag: 'section',
+  extend: Hgroup,
+  props: {
+    gap: 'A'
+  },
+
+  Title: {
+    tag: 'h5',
+    props: {
+      fontSize: 'A',
+      fontWeight: '500',
+      '@tabletS<': { alignItems: 'flex-end' },
+      letterSpacing: '.2em',
+      padding: '- Z1',
+      textTransform: 'uppercase'
+    }
+  }
+}

package/sections/shadow.js

@@ -0,0 +1,91 @@
+'use strict'
+
+import { Grid } from '@symbo.ls/atoms'
+import { DemoSection } from './section'
+
+export const shadow = {
+  extend: DemoSection,
+  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'
+          }
+        }
+      }
+    ]
+  }
+}