@symbo.ls/uikit 1.2.2 → 1.2.5

package/components/Atoms/Timing.js

@@ -1,55 +0,0 @@
-'use strict'
-
-import { isString } from '@domql/utils'
-import { getTimingByKey, getTimingFunction } from '@symbo.ls/scratch'
-
-export const transformTransition = transition => {
-  const arr = transition.split(' ')
-
-  if (!arr.length) return transition
-
-  return arr.map(v => {
-    if (v.slice(0, 2) === '--') return `var(${v})`
-    if (v.length < 3 || v.includes('ms')) {
-      const mapWithSequence = getTimingByKey(v)
-      return mapWithSequence.timing || v
-    }
-    if (getTimingFunction(v)) return getTimingFunction(v)
-    return v
-  }).join(' ')
-}
-
-export const transformDuration = (duration, props, propertyName) => {
-  if (!isString(duration)) return
-  return duration.split(',').map(v => getTimingByKey(v).timing || v).join(',')
-}
-
-export const splitTransition = transition => {
-  const arr = transition.split(',')
-  if (!arr.length) return
-  return arr.map(transformTransition).join(',')
-}
-
-export const Timing = {
-  class: {
-    transition: ({ props }) => props.transition && ({
-      transition: splitTransition(props.transition)
-    }),
-    willChange: ({ props }) => props.willChange && ({
-      willChange: props.willChange
-    }),
-    transitionDuration: ({ props }) => props.transitionDuration && ({
-      transitionDuration: transformDuration(props.transitionDuration)
-    }),
-    transitionDelay: ({ props }) => props.transitionDelay && ({
-      transitionDelay: transformDuration(props.transitionDelay)
-    }),
-    transitionTimingFunction: ({ props }) => props.transitionTimingFunction && ({
-      transitionTimingFunction: getTimingFunction(props.transitionTimingFunction)
-    }),
-    transitionProperty: ({ props }) => props.transitionProperty && ({
-      transitionProperty: props.transitionProperty,
-      willChange: props.transitionProperty
-    })
-  }
-}

package/components/Atoms/Transform.js

@@ -1,8 +0,0 @@
-'use strict'
-
-export const Transform = {
-  class: {
-    transform: ({ props }) => props.transform && ({ transform: props.transform }),
-    transformOrigin: ({ props }) => props.transformOrigin && ({ transformOrigin: props.transformOrigin })
-  }
-}

package/components/Atoms/XYZ.js

@@ -1,7 +0,0 @@
-'use strict'
-
-export const XYZ = {
-  class: {
-    zIndex: ({ props }) => props.zIndex && ({ zIndex: props.zIndex })
-  }
-}

package/components/Atoms/index.js

@@ -1,25 +0,0 @@
-'use strict'
-
-export * from './Block'
-export * from './Direction'
-export * from './Flex'
-export * from './Grid'
-export * from './Img'
-export * from './Form'
-export * from './Media'
-export * from './Iframe'
-export * from './Interaction'
-export * from './InteractiveComponent'
-export * from './Overflow'
-export * from './Collection'
-export * from './Position'
-export * from './Picture'
-export * from './Pseudo'
-export * from './SVG'
-export * from './Shape'
-export * from './Theme'
-export * from './Text'
-export * from './Timing'
-export * from './Transform'
-export * from './XYZ'
-export * from './Animation'

package/components/Atoms/package.json

@@ -1,13 +0,0 @@
-{
-  "name": "@symbo.ls/atoms",
-  "version": "1.2.4",
-  "main": "index.js",
-  "license": "MIT",
-  "gitHead": "54fa6500c697604b3f48ba33a573545d7bff35fa",
-  "dependencies": {
-    "@domql/utils": "latest",
-    "@symbo.ls/create-emotion": "latest",
-    "@symbo.ls/scratch": "latest"
-  },
-  "source": "src/index.js"
-}

package/components/Avatar/index.js

@@ -1,32 +0,0 @@
-'use strict'
-
-import { Img, Flex } from '.'
-
-export const Avatar = {
-  extend: Img,
-  key: 'nikoloza',
-  props: {
-    display: 'block',
-    avatarType: 'initials',
-    borderRadius: '100%',
-    boxSize: 'B',
-    cursor: 'pointer'
-  },
-  attr: {
-    src: ({ key, props }) => props.src || `https://avatars.dicebear.com/api/${props.avatarType || 'adventurer-neutral'}/${props.key || key}.svg`
-  }
-}
-
-export const AvatarBundle = {
-  extend: Flex,
-  childExtend: {
-    extend: Avatar,
-    props: {
-      boxSize: 'B1',
-      border: '0.1312em, black .85, solid',
-      ':not(:last-child)': {
-        margin: '0 -Y2 0 0'
-      }
-    }
-  }
-}

package/components/Avatar/package.json

@@ -1,12 +0,0 @@
-{
-  "name": "@symbo.ls/avatar",
-  "version": "1.2.3",
-  "main": "index.js",
-  "license": "MIT",
-  "gitHead": "54fa6500c697604b3f48ba33a573545d7bff35fa",
-  "dependencies": {
-    "@symbo.ls/flex": "latest",
-    "@symbo.ls/img": "latest"
-  },
-  "source": "src/index.js"
-}

package/components/Avatar/style.js

@@ -1,19 +0,0 @@
-'use strict'
-
-export const styleUser = {
-  cursor: 'pointer',
-  borderRadius: '100%'
-}
-
-export const styleUserBundle = {
-  display: 'flex',
-  alignItems: 'center',
-  textTransform: 'capitalize',
-  '> div': {
-    display: 'flex',
-    marginRight: '1em',
-    '> img': {
-      marginRight: '-0.5em'
-    }
-  }
-}

package/components/Banner/index.js

@@ -1,22 +0,0 @@
-'use strict'
-
-import { Icon } from '@symbo.ls/icon'
-import { AvatarBundle } from '@symbo.ls/avatar'
-
-import { styleParentMode } from './style'
-
-export const ParentMode = {
-  round: 10,
-  theme: 'purple',
-  style: styleParentMode,
-  icon: {
-    extend: Icon,
-    props: { icon: 'checkMedium' }
-  },
-  h2: 'Welcome to parent Mode',
-  description: {
-    extend: AvatarBundle,
-    users: { ...[{}, {}, {}] },
-    span: 'You\'ll now be able to chat with tutor privately. No other participants will see the messages.'
-  }
-}

package/components/Banner/package.json

@@ -1,12 +0,0 @@
-{
-  "name": "@symbo.ls/banner",
-  "version": "1.2.0",
-  "main": "index.js",
-  "license": "MIT",
-  "gitHead": "54fa6500c697604b3f48ba33a573545d7bff35fa",
-  "dependencies": {
-    "@symbo.ls/avatar": "latest",
-    "@symbo.ls/icon": "latest"
-  },
-  "source": "src/index.js"
-}

package/components/Banner/style.js

@@ -1,27 +0,0 @@
-'use strict'
-
-export const styleParentMode = {
-  boxSizing: 'border-box',
-  padding: '3.6em 1.6em 4em 3.6em',
-  position: 'relative',
-  display: 'block',
-  width: '700px',
-  '> svg': {
-    position: 'absolute',
-    top: '1.2em',
-    right: '1.2em',
-    color: 'rgba(215, 100, 185, .2)'
-  },
-  '> div': {
-    alignItems: 'flex-start',
-    '> div': { marginTop: '4px' }
-  },
-  h2: {
-    margin: 0,
-    marginBottom: '10px'
-  },
-  span: {
-    maxWidth: `${314 / 14}em`,
-    lineHeight: '22px'
-  }
-}

package/components/Box/index.js

@@ -1,44 +0,0 @@
-'use strict'
-
-import {
-  Shape,
-  Position,
-  Theme,
-  Block,
-  Text,
-  Overflow,
-  Timing,
-  Transform,
-  Media,
-  Interaction,
-  XYZ,
-  Animation
-} from '@symbo.ls/atoms'
-
-const PropsCSS = {
-  class: {
-    style: ({ props }) => props && props.style
-  }
-}
-
-export const Box = {
-  extend: [
-    PropsCSS,
-    Shape,
-    Position,
-    Theme,
-    Block,
-    Text,
-    Overflow,
-    Timing,
-    Transform,
-    Media,
-    Interaction,
-    XYZ,
-    Animation
-  ],
-  attr: {
-    id: ({ props }) => props.id
-  }
-}
-

package/components/Box/package.json

@@ -1,10 +0,0 @@
-{
-  "name": "@symbo.ls/box",
-  "version": "1.2.0",
-  "main": "index.js",
-  "license": "MIT",
-  "dependencies": {
-    "@symbo.ls/atoms": "latest"
-  },
-  "source": "src/index.js"
-}

package/components/Button/README.md

@@ -1,11 +0,0 @@
-# `Button`
-
-> TODO: description
-
-## Usage
-
-```
-const button = require('Button');
-
-// TODO: DEMONSTRATE API
-```

package/components/Button/index.js

@@ -1,48 +0,0 @@
-'use strict'
-
-import { FocusableComponent } from '@symbo.ls/atoms'
-import { IconText } from '@symbo.ls/icon'
-
-export const Button = {
-  extend: [FocusableComponent, IconText],
-  tag: 'button',
-  props: {
-    fontSize: 'A',
-    type: 'button',
-    border: 'none',
-    display: 'inline-flex',
-    align: 'center center',
-    textDecoration: 'none',
-    lineHeight: '1',
-    whiteSpace: 'nowrap',
-    padding: 'Z A1',
-    fontFamily: 'inherit',
-    round: 'C2'
-  },
-  attr: {
-    type: ({ props }) => props.type
-  }
-}
-
-export const SquareButton = {
-  extend: Button,
-  props: {
-    fontSize: 'A',
-    width: 'A',
-    padding: 'Z',
-    aspectRatio: '1 / 1',
-    justifyContent: 'center',
-    round: 'Z',
-    style: { boxSizing: 'content-box' }
-  }
-}
-
-export const CircleButton = {
-  extend: SquareButton,
-  props: { round: 'C' }
-}
-
-export const KangorooButton = {
-  extend: Button,
-  childExtend: IconText
-}

package/components/Button/package.json

@@ -1,12 +0,0 @@
-{
-  "name": "@symbo.ls/button",
-  "version": "1.2.0",
-  "main": "index.js",
-  "license": "MIT",
-  "gitHead": "54fa6500c697604b3f48ba33a573545d7bff35fa",
-  "dependencies": {
-    "@symbo.ls/atoms": "latest",
-    "@symbo.ls/icon": "latest"
-  },
-  "source": "src/index.js"
-}

package/components/ButtonSet/index.js

@@ -1,10 +0,0 @@
-'use strict'
-
-import { Flex } from '@symbo.ls/atoms'
-import { SquareButton } from '@symbo.ls/button'
-
-export const ButtonSet = {
-  tag: 'nav',
-  extend: Flex,
-  childExtend: SquareButton
-}

package/components/ButtonSet/package.json

@@ -1,12 +0,0 @@
-{
-  "name": "@symbo.ls/buttonset",
-  "version": "1.2.0",
-  "main": "index.js",
-  "license": "MIT",
-  "gitHead": "54fa6500c697604b3f48ba33a573545d7bff35fa",
-  "dependencies": {
-    "@symbo.ls/atoms": "latest",
-    "@symbo.ls/button": "latest"
-  },
-  "source": "src/index.js"
-}

package/components/Datepicker/index.js

@@ -1,156 +0,0 @@
-'use strict'
-
-import style from './style'
-
-import { SquareButton, Button } from '@symbo.ls/button'
-import { Flex, Grid } from '@symbo.ls/atoms'
-
-const buttonProps = {
-  theme: 'transparent',
-  color: '--theme-quinary-dark-color',
-  ':hover': {
-    theme: 'quinary .child'
-  }
-}
-
-const aside = {
-  props: {
-    gap: 'X2',
-    margin: '-Z - -Z -X2',
-    padding: 'Z - Z X2',
-    minHeight: '100%',
-    height: '100%',
-    width: '--spacing-D'
-  },
-
-  cnt: {
-    extend: Flex,
-    props: {
-      flow: 'column',
-      overflow: 'hidden auto',
-      boxSize: '100% --spacing-D',
-      top: '0',
-      position: 'absolute',
-      maxHeight: '100%',
-      justifyContent: 'flex-end'
-    },
-
-    childExtend: {
-      extend: Button,
-      props: {
-        ...buttonProps,
-        fontSize: 'Z1'
-      },
-      text: ({ state }) => state.value
-    }
-  }
-
-}
-
-const main = {
-  extend: Flex,
-
-  props: {
-    flex: 1,
-    gap: 'X2',
-    flow: 'column',
-
-    header: {
-      align: 'center space-between'
-    }
-  },
-
-  header: {
-    extend: Flex,
-    left: {
-      extend: SquareButton,
-      props: {
-        ...buttonProps,
-        round: 'C',
-        icon: 'arrowAngleLeft'
-      }
-    },
-    month: {
-      tag: 'span',
-      text: 'December'
-    },
-    right: {
-      extend: SquareButton,
-      props: {
-        ...buttonProps,
-        round: 'C',
-        icon: 'arrowAngleRight'
-      }
-    }
-  },
-  days: {
-    extend: Flex,
-    props: {
-      flow: 'column',
-      gap: 'X2'
-    },
-    childExtend: {
-      extend: Grid,
-      props: {
-        columns: 'repeat(7, 1fr)',
-        gap: 'X2'
-      }
-    },
-    weekDays: {
-      childExtend: {
-        extend: Button,
-        props: {
-          ...buttonProps,
-          fontSize: 'Z1',
-          padding: 'X2'
-        }
-      },
-      ...[
-        { text: 'Mo' },
-        { text: 'Tu' },
-        { text: 'We' },
-        { text: 'Th' },
-        { text: 'Fr' },
-        { text: 'Sa' },
-        { text: 'Su' }
-      ]
-    },
-
-    cnt: {
-      childExtend: {
-        extend: SquareButton,
-
-        props: ({ key, state }) => ({
-          ...buttonProps,
-          theme: 'quaternary',
-          active: key === '18',
-          '.active': {
-            theme: 'quinary'
-          }
-        })
-      },
-
-      ...new Array(31).fill(undefined).map((_, i) => ({ text: i + 1 }))
-    }
-  }
-}
-
-export const DatePicker = {
-  style,
-  extend: Flex,
-
-  props: {
-    position: 'relative',
-    theme: 'quinary',
-    transition: 'A all',
-    round: 'Z',
-    padding: 'Z Z2 Z X2',
-    gap: 'X2',
-    depth: 16,
-    minHeight: '0',
-    align: 'stretch center'
-  },
-
-  aside,
-  main
-}

package/components/Datepicker/package.json

@@ -1,13 +0,0 @@
-{
-  "name": "@symbo.ls/datepicker",
-  "version": "1.2.2",
-  "main": "index.js",
-  "license": "MIT",
-  "gitHead": "54fa6500c697604b3f48ba33a573545d7bff35fa",
-  "dependencies": {
-    "@symbo.ls/block": "latest",
-    "@symbo.ls/icon": "latest",
-    "@symbo.ls/shape": "latest"
-  },
-  "source": "src/index.js"
-}

package/components/Datepicker/style.js

@@ -1,18 +0,0 @@
-'use strict'
-
-export default {
-  main: {
-    'section > header span:nth-child(6)': {
-      opacity: 0.5
-    },
-    'section > header span:nth-child(7)': {
-      opacity: 0.5
-    },
-    'section > div button:nth-child(7n)': {
-      opacity: 0.5
-    },
-    'section > div button:nth-child(7n - 1)': {
-      opacity: 0.5
-    }
-  }
-}

package/components/Dropdown/index.js

@@ -1,52 +0,0 @@
-'use strict'
-
-import { Flex } from '@symbo.ls/atoms'
-import { Button } from '@symbo.ls/button'
-
-export const DropdownList = {
-  extend: Flex,
-
-  props: {
-    padding: '0 Y',
-    maxHeight: 'G',
-    flow: 'column',
-    theme: 'quaternary',
-    overflow: 'hidden auto',
-    style: { listStyleType: 'none' }
-  },
-
-  childExtend: {
-    extend: Button,
-
-    props: (el, s) => ({
-      active: s.active === el.key,
-      position: 'relative',
-      round: '0',
-      align: 'center flex-end',
-      flow: 'row-reverse',
-      padding: 'Z2 C Z2 Y2',
-      margin: '0',
-      gap: 'Y2',
-      theme: 'quaternary .child',
-
-      ':hover': {
-        style: {
-          svg: { opacity: '0.5' }
-        }
-      },
-
-      icon: {
-        active: s.active === el.key,
-        name: 'checkmark',
-        opacity: '0.1',
-        '.active': { opacity: '1' }
-      },
-
-      ':not(:first-child)': {
-        '@dark': { border: 'gray4 .65, solid' },
-        '@light': { border: 'gray11, solid' },
-        borderWidth: '1px 0 0'
-      }
-    })
-  }
-}

package/components/Dropdown/package.json

@@ -1,12 +0,0 @@
-{
-  "name": "@symbo.ls/dropdown",
-  "version": "1.2.0",
-  "main": "index.js",
-  "license": "MIT",
-  "gitHead": "54fa6500c697604b3f48ba33a573545d7bff35fa",
-  "dependencies": {
-    "@symbo.ls/atoms": "latest",
-    "@symbo.ls/button": "latest"
-  },
-  "source": "src/index.js"
-}