@startlibs/utils 1.1.2 → 1.2.0-rc.2

package/src/styled.js

@@ -1,52 +1,13 @@
+/* @startlibs-yak keep-styled-components */
 // @flow
+// Na lib-yak, este arquivo é trocado por styled.yak.js (sem styled-components).
 import _ from 'lodash/fp'
-import {darken} from 'polished'
-import React from 'react'
 import styled, {css} from 'styled-components'
-import createEmotion from 'create-emotion'
 import {scrollWidth} from './fixMediaQuery'
-import {_s} from './lodashUtils'
 import {callIfFunction} from './utils'
+import {ifPropValue} from './styledShared'
 
-export const getColor = (propsOrColor, hover) => {
-  if (propsOrColor === undefined) {
-    return ({theme})=>theme.colors.gray150
-  }
-  if (typeof propsOrColor==='string') {
-    return ({theme})=>theme.colors[propsOrColor] || propsOrColor
-  }
-  const {theme,...props} = propsOrColor
-  if (props.dark) {
-    return darken(0.1, getColor({theme, ..._.unset( 'dark', props)}))
-  } else if (hover && props.hover) {
-    return getColor({theme, color: props.hover})
-  } else if (props.color) {
-    return theme.colors[props.color] || props.color
-  } else if (props.highlight) {
-    return theme.colors.main
-  } else if (props.alert) {
-    return theme.colors.alert
-  } else if (props.success) {
-    return theme.colors.success
-  } else {
-    return theme.colors.gray150
-  }
-}
-
-export const getMargin = (enumeratedMargins) => (props) => enumeratedMargins[props.margin] || props.margin || enumeratedMargins['default'] || 0
-
-/**
- * Returns the value of `props[path]` or `defaultValue`
- * @example
- * const Button = styled.button`
- *  color: ${prop('color', 'red')};
- * `
- */
-export const prop = (path,defaultValue) =>
-  (props = {}) => _.get(path.trim(), props) || defaultValue
-
-export const customTheme = (type) =>
-  (props = {}) => _.get(["theme","startlibs",type], props) || ''
+export {getColor, getMargin, prop, customTheme, vheight, oneWayAnimation, twoWayAnimation, animationTiming, identityTranslateFrames, identityOpacityFrames} from './styledShared'
 
 /**
  * Returns `pass` if prop is truthy. Otherwise returns `fail`
@@ -64,17 +25,7 @@ export const customTheme = (type) =>
  */
 export const ifProp = (path, pass, fail) => {
   if (pass && !_.isFunction(pass)) { // old version
-    return (props = {}) => {
-      let result = false
-      if (Array.isArray(path)) {
-        result = path.every(p=> testSinglePath(props,p))
-      } else if (typeof path === 'object') {
-        result = !Object.entries(path).find(([k,v])=>props[k]!==v)
-      } else {
-        result = testSinglePath(props,path)
-      }
-      return result ? pass : fail
-    }
+    return ifPropValue(path, pass, fail)
   } else {
     return (...argsTrue) => {
       const check = pass || _.identity
@@ -116,49 +67,6 @@ media.max = (n) => media([n,'max-width'])
 media.min = (n) => media([n,'min-width'])
 media.desktop = media([601,'min-width'])
 
-export const vheight = (strings,size) => {
-  const propType = strings[0]
-  const calc = (strings[1]||"").replace(";","").trim()
-  return `
-  ${propType} ${calc ? `calc(${size}vh ${calc})` : `${size}vh`};
-  ${propType} ${calc ? `calc(calc(var(--vh, 1vh) * ${size}) ${calc})` : `calc(var(--vh, 1vh) * ${size})`};
-  `
-}
-
-function testSinglePath(props,path) {
-  if (typeof path === 'string') {
-    return !!_s.get(path, props)
-  } else if (typeof path === 'number') {
-    return !!props[path]
-  } else {
-    return false
-  }
-}
-
-const getFrameOffset = (i,total) => Math.round(i*100/(total-1))
-
-
-const emotion = createEmotion({
-  nonce: (typeof document !== 'undefined' &&
-    (document.querySelector('meta[property="csp-nonce"]') || {}).content) || 'animation_nonce'
-})
-
-export const oneWayAnimation = (...frames) => {
-  return emotion.keyframes`
-  ${frames.map((frame,i) =>
-    !frame ? '' : `${getFrameOffset(i,frames.length)}% {
-      ${frame}
-    }`
-  )}`
-}
-
-export const twoWayAnimation = (...frames) => [frames,_.reverse(frames)].map((frames)=>oneWayAnimation(...frames))
-
-export const animationTiming = (props) => (...animations) => animations.filter(_=>_).map(_=>_+' '+props).join(',')
-
-export const identityTranslateFrames = oneWayAnimation('transform: translateY(0);', 'transform: translateY(0);')
-export const identityOpacityFrames = oneWayAnimation('opacity: 1;', 'opacity:1;')
-
 export const styledExtend = ({target,componentStyle}) => (...template) => {
   const wasStatic = !_.find(_.isFunction,componentStyle.rules)
   const v = styled(target)(...template,...(wasStatic ? [] : [() => ""]))

package/src/styled.yak.js

@@ -0,0 +1,30 @@
+// Saída yak (lib-yak/) de styled.js, sem styled-components: o runtime dele não vai para o bundle.
+// O plugin startlibs-to-yak reduz ifProp (template), media, styledExtend e printerMedia a CSS
+// estático no build da startlibs. No app em modo yak, esses helpers não têm como funcionar em
+// runtime: falham com uma mensagem clara em vez de gerar CSS errado.
+import _ from 'lodash/fp'
+import {ifPropValue} from './styledShared'
+
+export {getColor, getMargin, prop, customTheme, vheight, oneWayAnimation, twoWayAnimation, animationTiming, identityTranslateFrames, identityOpacityFrames} from './styledShared'
+
+const notInYak = (name, instead) => () => {
+  throw new Error(`@startlibs/utils: ${name} usa styled-components e não existe no modo yak. Use ${instead}.`)
+}
+
+export const ifProp = (path, pass, fail) =>
+  pass && !_.isFunction(pass)
+    ? ifPropValue(path, pass, fail)
+    : notInYak('ifProp com template', 'uma função de props com css`` do @yak/react')
+export const ifPropEquals = (path,str) => ifProp(path,_.isEqual(str))
+export const ifNotProp = (path) => ifProp(path,v => !v)
+
+export const media = () => notInYak('media', '@media no próprio CSS')
+media.mobile = media()
+media.between = media
+media.max = media
+media.min = media
+media.desktop = media()
+
+export const styledExtend = notInYak('styledExtend', 'styled(Componente)')
+export const printerMedia = notInYak('printerMedia', '@media print')
+export const notPrinterMedia = notInYak('notPrinterMedia', '@media screen')

package/src/styledShared.js

@@ -0,0 +1,96 @@
+// Helpers de estilo que não dependem de styled-components: valem na lib/ e na lib-yak/.
+import _ from 'lodash/fp'
+import {darken} from 'polished'
+import {animationKeyframes} from './animationKeyframes'
+import {_s} from './lodashUtils'
+
+export const getColor = (propsOrColor, hover) => {
+  if (propsOrColor === undefined) {
+    return ({theme})=>theme.colors.gray150
+  }
+  if (typeof propsOrColor==='string') {
+    return ({theme})=>theme.colors[propsOrColor] || propsOrColor
+  }
+  const {theme,...props} = propsOrColor
+  if (props.dark) {
+    return darken(0.1, getColor({theme, ..._.unset( 'dark', props)}))
+  } else if (hover && props.hover) {
+    return getColor({theme, color: props.hover})
+  } else if (props.color) {
+    return theme.colors[props.color] || props.color
+  } else if (props.highlight) {
+    return theme.colors.main
+  } else if (props.alert) {
+    return theme.colors.alert
+  } else if (props.success) {
+    return theme.colors.success
+  } else {
+    return theme.colors.gray150
+  }
+}
+
+export const getMargin = (enumeratedMargins) => (props) => enumeratedMargins[props.margin] || props.margin || enumeratedMargins['default'] || 0
+
+/**
+ * Returns the value of `props[path]` or `defaultValue`
+ * @example
+ * const Button = styled.button`
+ *  color: ${prop('color', 'red')};
+ * `
+ */
+export const prop = (path,defaultValue) =>
+  (props = {}) => _.get(path.trim(), props) || defaultValue
+
+export const customTheme = (type) =>
+  (props = {}) => _.get(["theme","startlibs",type], props) || ''
+
+export const vheight = (strings,size) => {
+  const propType = strings[0]
+  const calc = (strings[1]||"").replace(";","").trim()
+  return `
+  ${propType} ${calc ? `calc(${size}vh ${calc})` : `${size}vh`};
+  ${propType} ${calc ? `calc(calc(var(--vh, 1vh) * ${size}) ${calc})` : `calc(var(--vh, 1vh) * ${size})`};
+  `
+}
+
+const getFrameOffset = (i,total) => Math.round(i*100/(total-1))
+
+
+export const oneWayAnimation = (...frames) => {
+  return animationKeyframes`
+  ${frames.map((frame,i) =>
+    !frame ? '' : `${getFrameOffset(i,frames.length)}% {
+      ${frame}
+    }`
+  )}`
+}
+
+export const twoWayAnimation = (...frames) => [frames,_.reverse(frames)].map((frames)=>oneWayAnimation(...frames))
+
+export const animationTiming = (props) => (...animations) => animations.filter(_=>_).map(_=>_+' '+props).join(',')
+
+export const identityTranslateFrames = oneWayAnimation('transform: translateY(0);', 'transform: translateY(0);')
+export const identityOpacityFrames = oneWayAnimation('opacity: 1;', 'opacity:1;')
+
+function testSinglePath(props,path) {
+  if (typeof path === 'string') {
+    return !!_s.get(path, props)
+  } else if (typeof path === 'number') {
+    return !!props[path]
+  } else {
+    return false
+  }
+}
+
+// ifProp na forma antiga (valor pronto, não template): devolve pass ou fail
+export const ifPropValue = (path, pass, fail) => (props = {}) => {
+  let result = false
+  if (Array.isArray(path)) {
+    result = path.every(p=> testSinglePath(props,p))
+  } else if (typeof path === 'object') {
+    result = !Object.entries(path).find(([k,v])=>props[k]!==v)
+  } else {
+    result = testSinglePath(props,path)
+  }
+  return result ? pass : fail
+}

package/src/timerUtils.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
-import styled from 'styled-components/macro'
 
-styled
 export const timerPromise = (time) => new Promise((res) => setTimeout(res,time))
 
 export const cancelableTimer = (res,time) => {

package/src/yakDomTag.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import isPropValid from '@emotion/is-prop-valid'
+
+// Task 13c: @yak/react só filtra props `$`-prefixadas e `undefined` antes de repassar pro
+// elemento real; qualquer prop custom (string, número, objeto) lida por um `styled.<tag>` no yak
+// vaza como atributo no DOM. styled-components v5 evita isso sozinho pra tags string, usando
+// @emotion/is-prop-valid. yakDomTag(tag) devolve um componente equivalente: filtra pelas mesmas
+// regras antes de renderizar `tag`, pra o DOM do yak ficar idêntico ao do sc.
+//
+// Resolvido via `@startlibs/utils/yakDomTag` (exports["./*"] do package.json) — não passa pelo
+// index: só existe nessa saída porque o babel-plugin-startlibs-to-yak importa explicitamente
+// (ver tools/babel-plugin-startlibs-to-yak/domTag.cjs), nunca no fonte sc.
+//
+// Memoizado por nome de tag: `styled(yakDomTag('div'))` precisa devolver sempre o MESMO
+// componente de DOM final pra identidade ficar estável entre `${X}` e composições
+// (`styled(X)`/`styledExtend(X)`) de um mesmo `styled.div` — ver @yak/react runtime, que carrega
+// esse componente até o fim da cadeia de composição.
+//
+// `as` (styled-components troca a tag renderizada com essa prop, ex.: components/src/containers/
+// usePositioning.jsx's Placeholder as={placeholderAs}, form/src/TextInput.jsx's Input
+// as={inputTag}) não é filtrada pelo @emotion/is-prop-valid (`isPropValid('as')` é false) — sem
+// tratar à parte, o yak renderizaria sempre a tag original, ignorando a troca.
+const cache = new Map()
+
+export const yakDomTag = (tag) => {
+  let Component = cache.get(tag)
+  if (!Component) {
+    Component = React.forwardRef((props, ref) => {
+      const domProps = {}
+      for (const key in props) {
+        // `as` troca a tag renderizada (como styled-components faz); não é uma prop do DOM.
+        if (key === 'as') continue
+        if (key === 'className' || isPropValid(key)) domProps[key] = props[key]
+      }
+      domProps.ref = ref
+      return React.createElement(props.as || tag, domProps)
+    })
+    Component.displayName = `yakDomTag(${tag})`
+    cache.set(tag, Component)
+  }
+  return Component
+}

package/src/yakDomTag.test.mjs

@@ -0,0 +1,49 @@
+import {test} from 'node:test'
+import assert from 'node:assert/strict'
+import React from 'react'
+import {yakDomTag} from './yakDomTag.jsx'
+
+// yakDomTag's component is a React.forwardRef — `.render(props, ref)` runs the exact same logic
+// a real render would, and React.createElement just returns a plain element descriptor
+// ({type, props, ...}), so this is enough to assert on without react-dom/mounting.
+const render = (tag, props, ref) => yakDomTag(tag).render(props, ref)
+
+test('filtra prop custom (não aceita por @emotion/is-prop-valid)', () => {
+  const el = render('div', {rounded: true, children: 'x'})
+  assert.equal(el.type, 'div')
+  assert.equal('rounded' in el.props, false)
+  assert.equal(el.props.children, 'x')
+})
+
+test('mantém className, style e props de DOM válidas', () => {
+  const el = render('div', {className: 'a', style: {color: 'red'}, id: 'x', 'data-foo': '1'})
+  assert.equal(el.props.className, 'a')
+  assert.deepEqual(el.props.style, {color: 'red'})
+  assert.equal(el.props.id, 'x')
+  assert.equal(el.props['data-foo'], '1')
+})
+
+test('repassa ref pro elemento real', () => {
+  // React.createElement extrai `ref` do objeto de config pro próprio elemento (el.ref), não
+  // deixa em el.props (acessar el.props.ref em dev dispara um warning do React — por isso o
+  // teste não toca em el.props aqui, só em el.ref).
+  const ref = {current: null}
+  const el = render('div', {}, ref)
+  assert.equal(el.ref, ref)
+})
+
+test('as troca a tag renderizada (como no sc) e não vaza pro DOM', () => {
+  const el = render('span', {as: 'textarea', children: 'x'})
+  assert.equal(el.type, 'textarea')
+  assert.equal('as' in el.props, false)
+})
+
+test('sem as, renderiza a tag original', () => {
+  const el = render('input', {type: 'text'})
+  assert.equal(el.type, 'input')
+})
+
+test('memoiza por nome de tag: mesmo tag devolve o mesmo componente', () => {
+  assert.equal(yakDomTag('div'), yakDomTag('div'))
+  assert.notEqual(yakDomTag('div'), yakDomTag('span'))
+})