Typed shit

typed.js

/* @flow */
import type { Style, Theme } from '../themes/types';
import React from 'react';
import { createComponent } from 'react-fela';

// TODO:
//  Exact<PropType> on Component props.
//  Text.style(props) should by typed.
//  Text.Props like React.Element, how React does it?
//  Autocomplete for props.
// type Exact<T> = T & $Shape<T>;

type StyleFunction = <PropsType>(
  rule: Style | (props: PropsType, theme: Theme) => Style,
  type?: string | Function,
  passThroughProps?: Array<string>,
) => (props: PropsType) => React.Element<any>;

const style: StyleFunction = (rule, type, passThroughProps) => {
  const styleComponent = props => typeof rule === 'function'
    ? rule(props, props.theme)
    : rule;
  const StyleComponent = createComponent(styleComponent, type, passThroughProps);
  const Component = (props: any) => <StyleComponent {...props} />;
  Component.style = styleComponent;
  return Component;
};

/* @flow */
import React from 'react';
import { style } from './components';

const Container = style({
  maxWidth: 800,
  marginLeft: 'auto',
  marginRight: 'auto',
});

type TextProps = {
  warning?: boolean,
};

const Text = style((props: TextProps) => ({
  color: props.warning ? 'red' : 'black',
  fontFamily: 'sans-serif',
}));

type LinkProps = TextProps & {
  href: string,
};

const Link = style((props: LinkProps) => ({
  ...Text.style(props),
  color: props.warning ? 'red' : 'blue',
}), 'a', ['href']);

const App = () => (
  <Container>
    <Text warning>Ahoy</Text>
    <Link href="https://github.com/este/este">Este</Link>
  </Container>
);

export default App;