erikdstock / roses

an opinionated take on styled-system.
https://roses-ui.netlify.com/
9 stars 0 forks source link

Revamp `withStyleProps` api #14

Open erikdstock opened 5 years ago

erikdstock commented 5 years ago

As is withStyleProps gets values from a theme and adds the rx and variant style props. This feels a bit ham-fisted at times, like if you don't have anything in the theme but want the rx prop for the sake of consistency. Think about a better api:

Most component decorator/HOC logic is built up here: https://github.com/erikdstock/roses/blob/a8c070dca0218d6de95a4ed66a72cdfdefcbf93a/src/util/styleComposition.ts#L37-L44

There are different ways of calling withStyleProps at the bottom of the file. a simple (const Widget = withStyleProps('Widget')) will give you a border-box div with default styles from theme.styles.Widget, a variants prop with style overrides from theme.variants.widget, and the rx/variant props.'

The more verbose signature looks like const Box = withStyleProps({name: 'Box', component: RawBox, defaultVariant: "hot"}) where RawBox is a styled emotion component of its own.

A few possible points of simplification:

rather <Box rx={{bg: 'primary'}} />



All that said `rx` requires the `/** @jsx jsx */` pragma, and the current `withStyleProps` api does both `rx` and theming stuff. it's not always clear how it works.

My current thinking is something like this.
- consider exporting more than the single `withStyleProps` function, such as those highlighted in the link above.
- overload the `withStyleProps` function signature (all naming subject to change):
  - `name` or key or a single string argument get styles from `theme.styles`(if available)
    - If possible we also make this the component display name.
  - `variants` are removed and added as individual keys to `theme.styles.{x}` (absent the style object there is no variants prop perhaps)
  - a new `styles` key allows passing the same object inline that would have otherwise been at `theme.styles.{x}`
  - `rx` (or `includeRx`) defaults to true and adds the rx prop.
  - export `themed` and `rxHandler` for more granular composition. 
erikdstock commented 5 years ago

Need to revisit this as #21 may have covered most of it.