css-in-props 0.0.2 → 0.8.30

package/README.md

@@ -0,0 +1,24 @@
+# css-in-props
+
+UI Library in composition of [Scratch](https://github.com/smbo-ls/scratch) and [DOMQL](https://github.com/domql/domql)
+
+[![npm version](https://badge.fury.io/js/smbls.svg)](https://badge.fury.io/js/smbls)
+
+### Setup
+
+1. Installation
+```
+yarn add css-in-props
+```
+
+2. Import the component from Symbols
+```
+import { transformClassname, transformEmotion } from 'css-in-props'
+```
+
+3. Use it inside your DOMQL code
+```
+const Box = ({ children, ...props }) => <div className={
+  transformEmotion(transformClassname(props))
+}>{children}</div>
+```

package/package.json

@@ -1,19 +1,41 @@
 {
   "name": "css-in-props",
-  "version": "0.0.2",
-  "description": "",
-  "main": "index.js",
+  "description": "Utilize props as CSS methods",
+  "private": false,
+  "author": "symbo.ls",
+  "version": "0.8.30",
+  "repository": "https://github.com/symbo-ls/smbls",
+  "main": "src/index.js",
+  "files": [
+    "src"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "prestart": "rm -rf dist .cache",
+    "start": "parcel index.html",
+    "build": "parcel build index.html --public-url .",
+    "deploy": "yarn build && gh-pages -d dist",
+    "clean": "rm yarn.lock && rm -rf node_modules && rm -rf dist && rm -rf .cache",
+    "reinstall": "rm yarn.lock && rm -rf node_modules/rackai && yarn",
+    "bump": "npx np"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/symbo-ls/css-in-props.git"
+  "dependencies": {
+    "@domql/utils": "^2.2.1",
+    "@emotion/css": "^11.10.0",
+    "@symbo.ls/scratch": "^0.3.19"
   },
-  "author": "symbo.ls",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/symbo-ls/css-in-props/issues"
+  "devDependencies": {
+    "@babel/core": "^7.14.6",
+    "babel-eslint": "^10.0.3",
+    "emotion": "^10.0.27",
+    "np": "^7.2.0",
+    "parcel-bundler": "^1.12.3",
+    "parcel-plugin-svg-sprite": "^1.4.1",
+    "standard": "^13.1.0"
   },
-  "homepage": "https://github.com/symbo-ls/css-in-props#readme"
+  "standard": {
+    "parser": "babel-eslint"
+  }
 }

package/src/_fromClass.js

@@ -0,0 +1,45 @@
+'use strict'
+
+const methods = {
+  shape: (element) => {
+    const { props } = element
+    const { shape } = props
+    return shape ? exec(SHAPES[shape], element) : null
+  },
+  shapeDirection: ({ props }) => {
+    const { shape, shapeDirection } = props
+    if (!shape || !shapeDirection) return
+    const shapeDir = SHAPES[shape + 'Direction']
+    return shape ? shapeDir[shapeDirection || 'top'] : null
+  },
+  shapeDirectionColor: ({ props, ...el }) => props.shapeDirection ? { '&:before': { borderColor: el.class.backgroundColor } } : null,
+  depth: ({ props }) => depth[props.depth],
+  round: ({ props, key, ...el }) => props.round ? (mapSpacing(props.round, 'borderRadius') || ({ borderRadius: props.round })) : null,
+  borderRadius: ({ props, key, ...el }) => props.borderRadius ? (mapSpacing(props.borderRadius, 'borderRadius') || ({ borderRadius: props.borderRadius })) : null,
+
+  theme: ({ props }) => {
+    if (!props.theme) return
+    return getTheme(props.theme)
+  },
+
+  color: ({ props }) => props.color ? ({ color: getColor(props.color) }) : null,
+  background: ({ props }) => props.background ? ({ backgroundColor: getColor(props.background) }) : null,
+
+  textStroke: ({ props }) => props.textStroke ? diffStroke(props.textStroke) : null,
+
+  border: ({ props }) => props.border ? diffBorder(props.border) : null,
+  borderColor: ({ props }) => props.borderColor ? ({ borderColor: getColor(props.borderColor) }) : null,
+  borderStyle: ({ props }) => props.borderStyle && ({ borderStyle: props.borderStyle }),
+
+  borderLeft: ({ props }) => props.borderLeft ? diffBorder(props.borderLeft, 'borderLeft') : null,
+  borderTop: ({ props }) => props.borderTop ? diffBorder(props.borderTop, 'borderTop') : null,
+  borderRight: ({ props }) => props.borderRight ? diffBorder(props.borderRight, 'borderRight') : null,
+  borderBottom: ({ props }) => props.borderBottom ? diffBorder(props.borderBottom, 'borderBottom') : null,
+
+  opacity: ({ props }) => props.opacity && ({ opacity: props.opacity }),
+  visibility: ({ props }) => execClass({ visibility: props.visibility })
+}
+const execClass = (prop, element, state) => {
+  const { props } = element
+  if (props[prop]) return { prop }
+}

package/src/index.js

@@ -0,0 +1,4 @@
+'use strict'
+
+export { set } from '@symbo.ls/scratch'
+export * from './transform'

package/src/registry.js

@@ -0,0 +1,216 @@
+'use strict'
+
+import { isArray, isObject } from '@domql/utils'
+import { getColor, mapSpacing, getTheme, SPACING, mapFontSize, getFontFamily, FONT_FAMILY } from '@symbo.ls/scratch'
+
+export const mapBasedOnRatio = (props, prop, unit) => {
+  const { spacingRatio } = props
+  const val = props[prop]
+  // TODO: move this to mapSpacing
+  if (spacingRatio) {
+    const params = SPACING[spacingRatio]
+
+    if (!params) {
+      SPACING[spacingRatio] = {
+        base: SPACING.base,
+        type: 'spacing',
+        ratio: spacingRatio,
+        range: [-5, +7],
+        subSequence: true,
+        sequence: {},
+        scales: {}
+      }
+    }
+
+    return mapSpacing(val, prop, params, unit)
+  }
+  return mapSpacing(val, prop, null, unit)
+}
+
+const isBorderStyle = str =>
+  ['none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'initial'].some(v => str.includes(v))
+
+const diffBorder = (border, key = 'border') => {
+  const obj = {}
+  const arr = isObject(border) ? Object.values(border) : isArray(border) ? border : border.split(', ')
+  arr.map(v => {
+    if (v.includes('px')) obj[`${key}Width`] = v // TODO: add map spacing
+    else if (isBorderStyle(v)) obj[`${key}Style`] = v || 'solid'
+    else if (getColor(v)) obj[`${key}Color`] = getColor(v)
+  })
+  return obj
+}
+
+const diffStroke = stroke => {
+  const WebkitTextStroke = stroke.split(', ').map(v => {
+    if (v.includes('px')) return v
+    else if (getColor(v)) return getColor(v)
+  }).join(' ')
+  return { WebkitTextStroke }
+}
+
+export const grid = {
+  columns: props => props.columns ? ({ gridTemplateColumns: props.columns }) : null,
+  rows: props => props.rows ? ({ gridTemplateRows: props.rows }) : null,
+  area: props => props.area ? ({ gridArea: props.area }) : null,
+  template: props => props.template ? ({ gridTemplate: props.template }) : null,
+  templateAreas: props => props.templateAreas ? ({ gridTemplateAreas: props.templateAreas }) : null,
+  gap: props => props.gap ? mapBasedOnRatio(props, 'gap') : null,
+  columnGap: props => props.template ? mapBasedOnRatio(props, 'columnGap') : null,
+  rowGap: props => props.template ? mapBasedOnRatio(props, 'rowGap') : null
+}
+
+export const theme = {
+  theme: props => props.theme ? getTheme(props.theme) : null,
+
+  color: props => props.color ? ({ color: getColor(props.color) }) : null,
+  background: props => props.background ? ({ backgroundColor: getColor(props.background) }) : null,
+
+  textStroke: props => props.textStroke ? diffStroke(props.textStroke) : null,
+
+  border: props => props.border ? diffBorder(props.border) : null,
+  borderColor: props => props.borderColor ? ({ borderColor: getColor(props.borderColor) }) : null,
+  borderStyle: props => props.borderStyle && ({ borderStyle: props.borderStyle }),
+
+  borderLeft: props => props.borderLeft ? diffBorder(props.borderLeft, 'borderLeft') : null,
+  borderTop: props => props.borderTop ? diffBorder(props.borderTop, 'borderTop') : null,
+  borderRight: props => props.borderRight ? diffBorder(props.borderRight, 'borderRight') : null,
+  borderBottom: props => props.borderBottom ? diffBorder(props.borderBottom, 'borderBottom') : null,
+
+  opacity: props => props.opacity && ({ opacity: props.opacity }),
+  visibility: props => ({ visibility: props.visibility })
+}
+
+export const block = {
+  round: ({ props, key }) => props.round ? (mapSpacing(props.round, 'borderRadius') || ({ borderRadius: props.round })) : null,
+  borderRadius: ({ props, key }) => props.borderRadius ? (mapSpacing(props.borderRadius, 'borderRadius') || ({ borderRadius: props.borderRadius })) : null,
+
+  transition: props => props.transition && ({ transition: props.transition }),
+  transitionProperty: props => props.transitionProperty && ({
+    transitionProperty: props.transitionProperty,
+    willChange: props.transitionProperty
+  }),
+
+  boxSizing: props => props.boxSizing ? ({ display: props.boxSizing }) : {
+    boxSizing: 'border-box'
+  },
+
+  display: props => props.display && ({ display: props.display }),
+
+  hide: props => props.hide && ({ display: 'none' }),
+
+  width: props => props.width && mapBasedOnRatio(props, 'width'),
+  height: props => props.height && mapBasedOnRatio(props, 'height'),
+  boxSize: props => {
+    if (typeof props.boxSize !== 'string') return
+    const [height, width] = props.boxSize.split(' ')
+    return {
+      ...mapSpacing(height, 'height'),
+      ...mapSpacing(width, 'width')
+    }
+  },
+
+  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 => props.aspectRatio && ({ aspectRatio: props.aspectRatio }),
+
+  borderWidth: props => props.borderWidth ? mapBasedOnRatio(props, 'borderWidth') : null,
+
+  padding: props => props.padding ? mapBasedOnRatio(props, 'padding') : null,
+  margin: props => props.margin ? mapBasedOnRatio(props, 'margin') : null,
+
+  gap: props => props.gap ? mapBasedOnRatio(props, 'gap') : null,
+  gridArea: props => props.gridArea && ({ gridArea: props.gridArea })
+}
+
+export const flex = {
+  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
+    }
+  },
+
+  flex: props => props.flex && ({ flex: props.flex }),
+  alignItems: props => props.alignItems && ({ alignItems: props.alignItems }),
+  alignContent: props => props.alignContent && ({ alignContent: props.alignContent }),
+  justifyContent: props => props.justifyContent && ({ justifyContent: props.justifyContent })
+}
+
+export const position = {
+  position: props => props.position && ({ position: props.position }),
+  inset: props => {
+    const { inset } = props
+    if (typeof inset !== 'string') return
+    return { inset: inset.split(' ').map(v => mapSpacing(v, 'k').k).join(' ') }
+  },
+
+  left: props => mapSpacing(props.left, 'left'),
+  top: props => mapSpacing(props.top, 'top'),
+  right: props => mapSpacing(props.right, 'right'),
+  bottom: props => mapSpacing(props.bottom, 'bottom')
+}
+
+export const text = {
+  fontSize: props => props.fontSize ? mapFontSize(props.fontSize) : null,
+  fontFamily: props => props.fontFamily && ({ fontFamily: getFontFamily(FONT_FAMILY, props.fontFamily) || props.fontFamily }),
+  lineHeight: props => props.lineHeight && ({ lineHeight: props.lineHeight }),
+  // lineHeight: props => props.lineHeight && mapBasedOnRatio(props, 'lineHeight', null, ''),
+  textDecoration: props => props.textDecoration && ({ textDecoration: props.textDecoration }),
+  textTransform: props => props.textTransform && ({ textTransform: props.textTransform }),
+  textAlign: props => props.textAlign && ({ textAlign: props.textAlign }),
+  fontWeight: props => props.fontWeight && ({ fontWeight: props.fontWeight })
+}
+
+export const registry = {
+  style: props => props.style,
+
+  ...theme,
+  ...block,
+  ...flex,
+  ...position,
+  ...text,
+
+  gridColumn: props => props.gridColumn && ({ gridColumn: props.gridColumn }),
+  gridRow: props => props.gridRow && ({ gridRow: props.gridRow }),
+
+  size: props => {
+    if (typeof props.heightRange !== 'string') return
+    const [minHeight, maxHeight] = props.heightRange.split(' ')
+    return {
+      ...mapSpacing(minHeight, 'minHeight'),
+      ...mapSpacing(maxHeight, 'maxHeight')
+    }
+  },
+
+  overflow: props => props.overflow && ({ overflow: props.overflow }),
+
+  transform: props => props.transform && ({ transform: props.transform })
+}

package/src/transform/classname.js

@@ -0,0 +1,21 @@
+'use strict'
+
+import { merge, isFunction } from '@domql/utils'
+import { keySetters } from './subProps'
+
+import { registry } from '../registry'
+
+export const transformClassname = props => {
+  const CLASS_NAMES = {}
+
+  for (const key in props) {
+    const setter = keySetters[key.slice(0, 1)]
+    const hasCSS = registry[key]
+
+    if (setter) setter(key, props[key], CLASS_NAMES)
+    else if (isFunction(hasCSS)) merge(CLASS_NAMES, hasCSS(props))
+  }
+
+
+  return CLASS_NAMES
+}

package/src/transform/emotion.js

@@ -0,0 +1,20 @@
+'use strict'
+
+import createEmotion from '@emotion/css/create-instance'
+// const ENV = process.env.NODE_ENV
+
+export const {
+  flush,
+  hydrate,
+  cx,
+  getRegisteredStyles,
+  injectGlobal,
+  keyframes,
+  css,
+  sheet,
+  cache
+} = createEmotion({
+  key: 'smbls'
+})
+
+export const transformEmotion = props => css(props)

package/src/transform/index.js

@@ -0,0 +1,5 @@
+'use strict'
+
+export * from './emotion'
+export * from './classname'
+export * from './subProps'

package/src/transform/subProps.js

@@ -0,0 +1,68 @@
+
+import { isArray, merge } from '@domql/utils'
+import { CASES as CONFIG_CASES, MEDIA as CONFIG_MEDIA } from '@symbo.ls/scratch'
+import { registry } from '../registry'
+
+const execClass = (key, props, result, rootProps) => {
+  const className = registry[key]
+
+  if (typeof className !== 'function') return
+
+  let classExec = className(props)
+  if (isArray(classExec)) {
+    classExec = classExec.reduce((a, c) => merge(a, c), {})
+  }
+
+  for (const finalProp in classExec) {
+    result[finalProp] = classExec[finalProp]
+  }
+}
+
+export const transformProps = (props, result, rootProps) => {
+  const propsClassObj = {}
+
+  for (const key in props) {
+    const setter = keySetters[key.slice(0, 1)]
+    if (setter) {
+      setter(key, props[key], propsClassObj, rootProps)
+      continue
+    } else {
+      execClass(key, props, propsClassObj, rootProps)
+    }
+  }
+
+  return propsClassObj
+}
+
+export const transformMedia = (key, props, result, rootProps) => {
+  const mediaName = CONFIG_MEDIA[key.slice(1)]
+  const mediaKey = `@media screen and ${mediaName}`
+  // result[mediaKey] = transformProps(props, result, rootProps)
+  const obj = { [mediaKey]: transformProps(props, result, rootProps) }
+  merge(result, obj)
+}
+
+export const transformSelector = (key, props, result, rootProps) => {
+  const selectorKey = `&${key}`
+  const obj = { [selectorKey]: transformProps(props, result, rootProps) }
+  merge(result, obj)
+}
+
+export const transformCases = (key, props, result, rootProps) => {
+  const caseKey = key.slice(1)
+  if (!CONFIG_CASES[caseKey]) return
+  merge(result, transformProps(props, result, rootProps))
+}
+
+export const transformConditionalCases = (key, props, result, rootProps) => {
+  const caseKey = key.slice(1)
+  if (!rootProps[caseKey]) return // remove classname if not here
+  merge(result, transformProps(props, result, rootProps))
+}
+
+export const keySetters = {
+  '@': transformMedia,
+  ':': transformSelector,
+  $: transformCases,
+  '.': transformConditionalCases
+}