Remove fbjs peerDependency

0.5.0

0.5.0

[prop]-selector support

0.4.0

fix api ref typo

Support for Stateless Components

Breaking changes:

Seamstress.createDecorator / Seamstress.createContainer

The main export is no longer a decorator function.

Before:

import seamstress from 'react-seamstress';

@seamstress
class MyComponent extends React.Component {
  styles: { ... },
  styleStateTypes: { ... },
  subComponentTypes: { ... },
  getStyleState: function () { ... },

  ...

}

After:

import Seamstress from 'react-seamstress';

@Seamstress.createDecorator({
  styles: { ... },
  styleStateTypes: { ... },
  subComponentTypes: { ... },
  getStyleState: function () { ... },
})
class MyComponent extends React.Component { ... }

Stateless components must use Seamstress.createContainer to wrap with a HoC:

import Seamstress from 'react-seamstress';

function MyComponent (props) { ... }

MyComponent = Seamstress.createContainer(MyComponent, {
  styles: { ... },
  styleStateTypes: { ... },
  subComponentTypes: { ... },
  getStyleState: function () { ... },
});

computedStyles

When using createDecorator, all computed styles are accessed with this.getComputedStyles().

When using createContainer, a computedStyles prop will be provided by the HoC.

Before:

<div {...this.getStyleProps()}>
  <div {...this.getStylePropsFor('indicator')} />
</div>

After:

// With createDecorator:
const computedStyles = this.getComputedStyles();

// With createContainer:
const computedStyles = props.computedStyles;

<div {...computedStyles.root}>
  <div {...computedStyles.indicator} />
</div>

See the API Reference for details.

0.2.3

Initial pre-release version. 🍻

Features:

Custom :pseudo-selectors

<Combobox styles={{
  ':busy': { opacity: 0.5 },
}} />

Custom ::pseudo-elements

<Combobox styles={{
  '::indicator': { color: 'red' },
}} />

:chained::selectors

<Combobox styles={{
  ':busy::indicator': {
    animationName: 'spin',
    animationDuration: '500ms'
  },
}} />

Style callbacks

Compute style properties from the exposed style-state of your component.

import chroma from 'chroma-js';

const colorScale = chroma.scale([
  'white',
  'yellow',
  'red',
]).domain([
  0,
  5000,
  7000,
]);

<Tachometer styles={{
  color: ({rpm}) => { return colorScale(rpm).hex() }
}} />

<Dashboard styles={({rpm} => {
  return {
    '::tachometer': {
      color: colorScale(rpm).hex(),
    },
  };
})} />