@symbo.ls/datepicker 0.4.2 → 0.5.10

package/packages/react/node_modules/@domql/utils/src/protoUtils.js

@@ -0,0 +1,119 @@
+'use strict'
+
+import { isArray, isFunction, isObject } from './object'
+
+export const generateHash = () => Math.random().toString(36).substring(2)
+
+// hashing
+export const protoStackRegistry = {}
+export const protoCachedRegistry = {}
+
+window.protoStackRegistry = protoStackRegistry
+window.protoCachedRegistry = protoCachedRegistry
+
+export const getHashedProto = proto => {
+  return protoStackRegistry[proto.__hash]
+}
+
+export const setHashedProto = (proto, stack) => {
+  const hash = generateHash()
+  proto.__hash = hash
+  protoStackRegistry[hash] = stack
+  return protoStackRegistry[hash]
+}
+
+export const getProtoStackRegistry = (proto, stack) => {
+  if (proto.__hash) {
+    return stack.concat(getHashedProto(proto))
+  } else {
+    setHashedProto(proto, stack)
+  }
+  return stack // .concat(hashedProto)
+}
+
+// stacking
+export const extractArrayProto = (proto, stack) => {
+  proto.forEach(each => flattenProto(each, stack))
+  return stack
+}
+
+export const deepProto = (proto, stack) => {
+  const protoOflattenProto = proto.proto
+  if (protoOflattenProto) {
+    flattenProto(protoOflattenProto, stack)
+  }
+  return stack
+}
+
+export const flattenProto = (proto, stack) => {
+  if (!proto) return stack
+  if (isArray(proto)) return extractArrayProto(proto, stack)
+  stack.push(proto)
+  if (proto.proto) deepProto(proto, stack)
+  return stack
+}
+
+// merging
+export const deepCloneProto = obj => {
+  const o = {}
+  for (const prop in obj) {
+    if (['parent', 'node', '__element', '__root', '__key'].indexOf(prop) > -1) continue
+    const objProp = obj[prop]
+    if (isObject(objProp)) {
+      o[prop] = deepCloneProto(objProp)
+    } else if (isArray(objProp)) {
+      o[prop] = objProp.map(x => x)
+    } else o[prop] = objProp
+  }
+  return o
+}
+
+export const deepMergeProto = (element, proto) => {
+  for (const e in proto) {
+    if (['parent', 'node', '__element', '__root'].indexOf(e) > -1) continue
+    const elementProp = element[e]
+    const protoProp = proto[e]
+    if (elementProp === undefined) {
+      element[e] = protoProp
+    } else if (isObject(elementProp) && isObject(protoProp)) {
+      deepMergeProto(elementProp, protoProp)
+    } else if (isArray(elementProp) && isArray(protoProp)) {
+      element[e] = elementProp.concat(protoProp)
+    } else if (isArray(elementProp) && isObject(protoProp)) {
+      const obj = deepMergeProto({}, elementProp)
+      element[e] = deepMergeProto(obj, protoProp)
+    } else if (elementProp === undefined && isFunction(protoProp)) {
+      element[e] = protoProp
+    }
+  }
+  return element
+}
+
+export const cloneAndMergeArrayProto = stack => {
+  return stack.reduce((a, c) => {
+    return deepMergeProto(a, deepCloneProto(c))
+  }, {})
+}
+
+// joint stacks
+export const jointStacks = (protoStack, childProtoStack) => {
+  return []
+    .concat(protoStack.slice(0, 1))
+    .concat(childProtoStack.slice(0, 1))
+    .concat(protoStack.slice(1))
+    .concat(childProtoStack.slice(1))
+}
+
+// init
+export const getProtoStack = proto => {
+  if (!proto) return []
+  if (proto.__hash) return getHashedProto(proto)
+  const stack = flattenProto(proto, [])
+  // console.log(stack)
+  return getProtoStackRegistry(proto, stack)
+}
+
+export const getProtoMerged = proto => {
+  const stack = getProtoStack(proto)
+  return cloneAndMergeArrayProto(stack)
+}

package/packages/react/node_modules/@symbo.ls/block/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@symbo.ls/block",
+  "version": "0.5.3",
+  "main": "src/index.js",
+  "license": "MIT",
+  "gitHead": "f0c29fae632536241c4e803b880991748344f7c5"
+}

package/packages/react/node_modules/@symbo.ls/block/packages/react/index.js

@@ -0,0 +1 @@
+'use strict'

package/packages/react/node_modules/@symbo.ls/block/packages/react/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@symbo.ls/react-block",
+  "version": "0.5.3",
+  "main": "index.js",
+  "license": "MIT",
+  "gitHead": "f0c29fae632536241c4e803b880991748344f7c5"
+}

package/packages/react/node_modules/@symbo.ls/block/src/index.js

@@ -0,0 +1,90 @@
+'use strict'
+
+import { SPACING, mapSpacing } from '@symbo.ls/scratch'
+import style from './style'
+
+export const mapBasedOnRatio = (props, prop) => {
+  const { spacingRatio } = props
+  const val = props[prop]
+  if (spacingRatio) {
+    const params = SPACING[spacingRatio]
+
+    if (!params) {
+      SPACING[spacingRatio] = {
+        base: SPACING.base,
+        type: 'spacing',
+        ratio: spacingRatio,
+        range: [-5, +7],
+        subSequence: true,
+        sequence: {},
+        scales: {}
+      }
+    }
+
+    const result = mapSpacing(val, prop, params)
+
+    return result
+  }
+  return mapSpacing(val, prop)
+}
+
+export const Block = {
+  style,
+
+  props: {},
+
+  class: {
+    width: ({ props }) => props.width && mapBasedOnRatio(props, 'width'),
+    height: ({ props }) => props.height && mapBasedOnRatio(props, 'height'),
+    boxSize: ({ props }) => {
+      if (typeof props.boxSize !== 'string') return
+      const [width, height] = props.boxSize.split(' ')
+      return {
+        ...mapSpacing(width, 'width'),
+        ...mapSpacing(height, 'height')
+      }
+    },
+
+    maxWidth: ({ props }) => props.maxWidth && mapBasedOnRatio(props, 'maxWidth'),
+    minWidth: ({ props }) => props.minWidth && mapBasedOnRatio(props, 'minWidth'),
+    widthRange: ({ props }) => {
+      if (typeof props.widthRange !== 'string') return
+      const [minWidth, maxWidth] = props.widthRange.split(' ')
+      return {
+        ...mapSpacing(minWidth, 'minWidth'),
+        ...mapSpacing(maxWidth, 'maxWidth')
+      }
+    },
+
+    maxHeight: ({ props }) => props.maxHeight && mapBasedOnRatio(props, 'maxHeight'),
+    minHeight: ({ props }) => props.minHeight && mapBasedOnRatio(props, 'minHeight'),
+    heightRange: ({ props }) => {
+      if (typeof props.heightRange !== 'string') return
+      const [minHeight, maxHeight] = props.heightRange.split(' ')
+      return {
+        ...mapSpacing(minHeight, 'minHeight'),
+        ...mapSpacing(maxHeight, 'maxHeight')
+      }
+    },
+
+    aspectRatio: ({ props }) => ({ aspectRatio: props.aspectRatio }),
+
+    padding: ({ props }) => mapBasedOnRatio(props, 'padding'),
+    margin: ({ props }) => mapBasedOnRatio(props, 'margin'),
+    gap: ({ props }) => mapBasedOnRatio(props, 'gap'),
+
+    flexFlow: ({ props }) => props.flexFlow && ({
+      display: 'flex',
+      flexFlow: props.flexFlow
+    }),
+    flexAlign: ({ props }) => {
+      if (typeof props.flexAlign !== 'string') return
+      const [alignItems, justifyContent] = props.flexAlign.split(' ')
+      return {
+        display: 'flex',
+        alignItems: alignItems,
+        justifyContent: justifyContent
+      }
+    }
+  }
+}

package/packages/react/node_modules/@symbo.ls/block/src/style.js

@@ -0,0 +1,5 @@
+'use strict'
+
+export default {
+  // boxSizing: 'border-box'
+}

package/packages/react/node_modules/@symbo.ls/datepicker/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@symbo.ls/datepicker",
+  "version": "0.5.3",
+  "main": "src/index.js",
+  "license": "MIT",
+  "gitHead": "f0c29fae632536241c4e803b880991748344f7c5",
+  "dependencies": {
+    "@symbo.ls/block": "^0.5.3",
+    "@symbo.ls/icon": "^0.5.3",
+    "@symbo.ls/shape": "^0.5.3"
+  }
+}

package/packages/react/node_modules/@symbo.ls/datepicker/packages/react/index.js

@@ -0,0 +1 @@
+'use strict'

package/packages/react/node_modules/@symbo.ls/datepicker/packages/react/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@symbo.ls/react-datepicker",
+  "version": "0.5.3",
+  "main": "index.js",
+  "license": "MIT",
+  "gitHead": "f0c29fae632536241c4e803b880991748344f7c5"
+}

package/packages/react/node_modules/@symbo.ls/datepicker/src/index.js

@@ -0,0 +1,115 @@
+'use strict'
+
+import style from './style'
+
+import { Icon } from '@symbo.ls/icon'
+import { Shape } from '@symbo.ls/shape'
+import { Block } from '@symbo.ls/block'
+
+export const DatePicker = {
+  style,
+
+  proto: [Shape, Block],
+  props: {
+    theme: 'lightDark',
+    padding: 'A',
+    round: 'Z',
+    depth: 16
+  },
+
+  aside: {
+    childProto: { tag: 'button' },
+    ...[
+      { text: '2020' },
+      { text: '2021' },
+      { text: '2022' },
+      { text: '2023' },
+      { text: '2024' },
+      { text: '2025' },
+      { text: '2026' },
+      { text: '2026' },
+      { text: '2026' }
+    ]
+  },
+
+  main: {
+    header: {
+      icon: {
+        proto: Icon,
+        props: { icon: 'arrowMediumLeft' }
+      },
+      month: {
+        childProto: { tag: 'span' },
+        ...[
+          { text: 'january' },
+          { text: 'february' },
+          { text: 'march' },
+          { text: 'april' },
+          { text: 'may' },
+          { text: 'june' },
+          { text: 'july' },
+          { text: 'august' },
+          { text: 'september' },
+          { text: 'october' },
+          { text: 'november' },
+          { text: 'december' }
+        ]
+      },
+      icon2: {
+        proto: Icon,
+        props: { icon: 'arrowMediumRight' }
+      }
+    },
+    days: {
+      tag: 'section',
+      header: {
+        childProto: { tag: 'span' },
+        ...[
+          { text: 'Mo' },
+          { text: 'Tu' },
+          { text: 'We' },
+          { text: 'Th' },
+          { text: 'Fr' },
+          { text: 'Sa' },
+          { text: 'Su' }
+        ]
+      },
+      content: {
+        childProto: { tag: 'button' },
+        ...[
+          { text: '1' },
+          { text: '2' },
+          { text: '3' },
+          { text: '4' },
+          { text: '5' },
+          { text: '6' },
+          { text: '7' },
+          { text: '8' },
+          { text: '9' },
+          { text: '10' },
+          { text: '11' },
+          { text: '12' },
+          { text: '13' },
+          { text: '14' },
+          { text: '15' },
+          { text: '16' },
+          { text: '17' },
+          { text: '18' },
+          { text: '19' },
+          { text: '20' },
+          { text: '21' },
+          { text: '22' },
+          { text: '23' },
+          { text: '24' },
+          { text: '25' },
+          { text: '26' },
+          { text: '27' },
+          { text: '28' },
+          { text: '29' },
+          { text: '30' },
+          { text: '31' }
+        ]
+      }
+    }
+  }
+}

package/packages/react/node_modules/@symbo.ls/datepicker/src/style.js

@@ -0,0 +1,100 @@
+'use strict'
+
+export default {
+  maxWidth: `${336 / 16}em`,
+  maxHeight: `${260 / 16}em`,
+  display: 'flex',
+  padding: '0 1em',
+  boxSizing: 'border-box',
+  borderRadius: '10px',
+  button: {
+    border: 'none',
+    outline: 'none',
+    background: 'transparent',
+    cursor: 'pointer'
+  },
+
+  aside: {
+    display: 'flex',
+    flexDirection: 'column',
+    overflowX: 'auto',
+    paddingRight: `${10 / 16}em`,
+
+    button: {
+      opacity: 0.5,
+      marginBottom: `${22 / 12}em`
+    }
+  },
+
+  main: {
+    flex: 1,
+    paddingTop: `${14 / 16}em`,
+    paddingBottom: `${10 / 16}em`,
+    overflow: 'hidden',
+
+    display: 'flex',
+    flexDirection: 'column',
+
+    '> header': {
+      display: 'flex',
+      alignItems: 'center',
+      height: 'auto',
+      overflow: 'hidden',
+      width: '100%',
+      padding: `0 ${8 / 16}em ${14 / 16}em ${8 / 16}em`,
+      boxSizing: 'border-box'
+    },
+    '> header > svg': {
+      cursor: 'pointer'
+    },
+
+    '> header > div': {
+      display: 'flex',
+      overflow: 'hidden',
+      flex: 1
+    },
+    '> header span': {
+      minWidth: '100%',
+      textTransform: 'capitalize',
+      textAlign: 'center',
+      fontWeight: 'bold'
+    },
+
+    section: {
+      flex: 1,
+      display: 'flex',
+      flexDirection: 'column'
+    },
+    'section > header': {
+      height: 'auto',
+      display: 'grid',
+      gridTemplateColumns: 'repeat(7, 1fr)',
+      gap: '6px',
+      paddingBottom: `${2 / 16}em`
+    },
+    'section > header span': {
+      textAlign: 'center',
+      fontWeight: 'bold'
+    },
+    'section > header span:nth-child(6)': {
+      opacity: 0.5
+    },
+    'section > header span:nth-child(7)': {
+      opacity: 0.5
+    },
+    'section > div': {
+      flex: 1,
+      display: 'grid',
+      gridTemplateColumns: 'repeat(7, 1fr)',
+      gap: '6px'
+    },
+    'section > div button': {
+    },
+    'section > div button:nth-child(7n)': {
+      opacity: 0.5
+    },
+    'section > div button:nth-child(7n - 1)': {
+      opacity: 0.5
+    }
+  }
+}

package/packages/react/node_modules/@symbo.ls/icon/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@symbo.ls/icon",
+  "version": "0.5.3",
+  "main": "src/index.js",
+  "license": "MIT",
+  "gitHead": "f0c29fae632536241c4e803b880991748344f7c5",
+  "dependencies": {
+    "@symbo.ls/svg": "^0.5.3"
+  }
+}

package/packages/react/node_modules/@symbo.ls/icon/packages/react/index.js

@@ -0,0 +1 @@
+'use strict'

package/packages/react/node_modules/@symbo.ls/icon/packages/react/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@symbo.ls/react-icon",
+  "version": "0.5.3",
+  "main": "index.js",
+  "license": "MIT",
+  "gitHead": "f0c29fae632536241c4e803b880991748344f7c5"
+}

package/packages/react/node_modules/@symbo.ls/icon/src/index.js

@@ -0,0 +1,14 @@
+'use strict'
+
+import style from './style'
+
+import { SVG } from '@symbo.ls/svg'
+
+export const Icon = {
+  proto: SVG,
+  style,
+  define: { name: param => param },
+  name: ({ props }) => props.icon,
+  attr: { viewBox: '0 0 24 24' },
+  src: ({ key, name }) => name || key || 'noIcon'
+}

package/packages/react/node_modules/@symbo.ls/icon/src/style.js

@@ -0,0 +1,8 @@
+'use strict'
+
+export default {
+  width: '1em',
+  height: '1em',
+  fill: 'currentColor',
+  display: 'inline-block'
+}

package/packages/react/node_modules/@symbo.ls/shape/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@symbo.ls/shape",
+  "version": "0.5.3",
+  "main": "src/index.js",
+  "license": "MIT",
+  "gitHead": "f0c29fae632536241c4e803b880991748344f7c5"
+}

package/packages/react/node_modules/@symbo.ls/shape/packages/react/index.js

@@ -0,0 +1 @@
+'use strict'

package/packages/react/node_modules/@symbo.ls/shape/packages/react/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@symbo.ls/react-shape",
+  "version": "0.5.3",
+  "main": "index.js",
+  "license": "MIT",
+  "gitHead": "f0c29fae632536241c4e803b880991748344f7c5"
+}

package/packages/react/node_modules/@symbo.ls/shape/src/index.js

@@ -0,0 +1,43 @@
+'use strict'
+
+import { mapSpacing, getTheme, getColor } from '@symbo.ls/scratch'
+
+import style, { shape, depth } from './style'
+
+export const Shape = {
+  class: {
+    default: style,
+    shape: ({ props }) => props.shape && shape[props.shape],
+    shapeDirection: ({ props }) => props.shape && shape[props.shape][props.shapeDirection || 'top'],
+    shapeDirectionColor: ({ props, ...el }) => props.shapeDirection && { '&:before': { borderColor: el.class.backgroundColor } },
+    depth: ({ props }) => depth[props.depth],
+    round: ({ props, key, ...el }) => props.round && (mapSpacing(props.round, 'borderRadius') || ({ borderRadius: props.round })),
+    theme: ({ props }) => props.theme && getTheme(props.theme),
+    color: ({ props }) => props.color && ({ color: getColor(props.color) }),
+    border: ({ props }) => props.border ? ({ border: getColor(props.border) }) : 'transparent 0',
+    background: ({ props }) => props.background && ({ backgroundColor: getColor(props.background) })
+  }
+
+  // mode: {
+  //   dark: {
+  //     theme: 'white'
+  //   }
+  // }
+
+  // theme: {
+  //   default: 'primary',
+  //   dark: 'whiteish'
+  // }
+
+  // size: {
+  //   default: 'auto',
+  //   mobile: 'fit'
+  // }
+
+  // padding: {
+  //   default: ratio.phi,
+  //   mobile: ratio.perfect
+  // }
+}
+
+export default Shape

package/packages/react/node_modules/@symbo.ls/shape/src/style.js

@@ -0,0 +1,102 @@
+'use strict'
+
+import { UNIT } from '@symbo.ls/scratch'
+
+export default {
+  boxSizing: 'border-box'
+}
+
+export const depth = {
+  4: { boxShadow: `rgba(0,0,0,.10) 0 2${UNIT.default} 4${UNIT.default}` },
+  6: { boxShadow: `rgba(0,0,0,.10) 0 3${UNIT.default} 6${UNIT.default}` },
+  10: { boxShadow: `rgba(0,0,0,.10) 0 4${UNIT.default} 10${UNIT.default}` },
+  16: { boxShadow: `rgba(0,0,0,.10) 0 8${UNIT.default} 16${UNIT.default}` },
+  26: { boxShadow: `rgba(0,0,0,.10) 0 14${UNIT.default} 26${UNIT.default}` },
+  42: { boxShadow: `rgba(0,0,0,.10) 0 20${UNIT.default} 42${UNIT.default}` }
+}
+
+export const shape = {
+  rectangle: {},
+  circle: { borderRadius: '100%' },
+  bubble: {},
+  tooltip: {
+    position: 'relative',
+    '&:before': {
+      content: '""',
+      display: 'block',
+      width: '0px',
+      height: '0px',
+      border: '6px solid #343434',
+      position: 'absolute',
+      borderRadius: '2px'
+    },
+    top: {
+      '&:before': {
+        top: '2px',
+        left: '50%',
+        transform: 'translate(-50%, -50%) rotate(45deg)'
+      }
+    },
+    right: {
+      '&:before': {
+        top: '50%',
+        right: '-10px',
+        transform: 'translate(-50%, -50%) rotate(45deg)'
+      }
+    },
+    bottom: {
+      '&:before': {
+        bottom: '-10px',
+        left: '50%',
+        transform: 'translate(-50%, -50%) rotate(45deg)'
+      }
+    },
+    left: {
+      '&:before': {
+        top: '50%',
+        left: '2px',
+        transform: 'translate(-50%, -50%) rotate(45deg)'
+      }
+    }
+  },
+  tag: {
+    position: 'relative',
+    '&:before': {
+      content: '""',
+      display: 'block',
+      width: '0',
+      height: '0',
+      border: '16px solid #343434',
+      borderRadius: '6px',
+      position: 'absolute'
+    },
+    top: {
+      '&:before': {
+        bottom: '100%',
+        left: '50%',
+        transform: 'translate(-50%, 60%) rotate(45deg)'
+      }
+    },
+    right: {
+      '&:before': {
+        top: '50%',
+        left: '100%',
+        transform: 'translate(-60%, -50%) rotate(45deg)'
+      }
+    },
+    bottom: {
+      '&:before': {
+        top: '100%',
+        left: '50%',
+        transform: 'translate(-50%, -60%) rotate(45deg)'
+      }
+    },
+    left: {
+      '&:before': {
+        top: '50%',
+        right: '100%',
+        transform: 'translate(60%, -50%) rotate(45deg)'
+      }
+    }
+  }
+}