Using flow for stylish components

Question

So, I played with type systems in JavaScript and, for the most part, everything works, but there is a problem with stylized components. I can’t find a good way to apply the flow to the details of a stylized component. So far, the only solution that I see is:

export type ButtonPropTypes = ReactPropTypes & {
  styleType: 'safe' | 'info' | 'warning' | 'danger' | 'link',
  isPill: boolean,
  isThin: boolean,
};

export const ButtonStyled = styled.button`
  ${generateBaseStyles}
  ${hoverStyles}
  ${fillStyles}
  ${thinStyles}
  ${linkStyles}
`;

export const Button = (props: ButtonPropTypes) => <ButtonStyled {...props} />;

It seems pretty excessive that I have to create 2 components for each stylized component.

I hope my google skills are just crap, and I'm missing something, but is there a better way to do this besides a few components for each stylized component?

Answer 1

! . , . casting , styled.button`...`, React, . React, type mytype = React.ComponentType<MyProps>.

// @flow
import styled from 'styled-components'
// Make sure you import with * to import the types too
import * as React from 'react'

// Mock function to use styleType
const makeStyles = ({styleType}) => ''

export type ButtonPropTypes = {
  styleType: 'safe' | 'info' | 'warning' | 'danger' | 'link',
  isPill: boolean,
  isThin: boolean,
};

export const ButtonStyled = (styled.button`
  ${makeStyles}
  ${({isPill}) => isPill ? 'display: block;' : ''}
  ${({isThin}) => isThin ? 'height: 10px;' : 'height: 100px;'}
`: React.ComponentType<ButtonPropTypes>) // Here the cast

const CorrectUsage = <ButtonStyled styleType="safe" isPill isThin/>

const CausesError = <ButtonStyled styleType="oops" isPill isThin/> // error

const CausesError2 = <ButtonStyled styleType="safe" isPill="abc" isThin={123}/> // error

GitHub ( ): https://github.com/jameskraus/flow-example-of-styled-components-props