glamorous/typings/component-factory.d.ts

React component styling solved

import {GlamorousComponent} from './glamorous-component'
import {Omit} from './helpers'

import {StyleArgument, StaticStyleArgument} from './style-arguments'

// # built-in DOM - component factories glamorous.div

export interface BuiltInGlamorousComponentFactory<ElementProps, Properties> {
  (...styles: StaticStyleArgument<Properties>[]): GlamorousComponent<
    ElementProps,
    object
  >

  <Props extends {theme: object}>(
    ...styles: StyleArgument<Properties, Props>[]
  ): GlamorousComponent<Omit<Props, 'theme'> & ElementProps, Props>

  <Props>(...styles: StyleArgument<Properties, Props>[]): GlamorousComponent<
    Props & ElementProps,
    Props
  >
}

// # dom tag - component factories glamorous('div')

// ## without propsAreCssOverides

export interface KeyGlamorousComponentFactory<
  ElementProps,
  Properties,
  ExternalProps,
  DefaultProps
> {
  (...styles: StaticStyleArgument<Properties>[]): GlamorousComponent<
    ElementProps & ExternalProps & Partial<DefaultProps>,
    ExternalProps
  >

  <Props extends {theme?: any}>(
    ...styles: StyleArgument<Properties, Props & ExternalProps & DefaultProps>[]
  ): GlamorousComponent<
    ElementProps &
      ExternalProps &
      Partial<DefaultProps> &
      Omit<Props, 'theme'> &
      Props,
    ExternalProps
  >

  <Props>(
    ...styles: StyleArgument<Properties, Props & ExternalProps & DefaultProps>[]
  ): GlamorousComponent<
    ElementProps & ExternalProps & Partial<DefaultProps> & Props,
    ExternalProps
  >
}

// ## with propsAreCssOverides

export interface KeyGlamorousComponentFactoryCssOverides<
  ElementProps,
  Properties,
  ExternalProps,
  DefaultProps
> {
  (...styles: StaticStyleArgument<Properties>[]): GlamorousComponent<
    ElementProps & ExternalProps & Partial<DefaultProps> & Properties,
    ExternalProps
  >

  <Props extends {theme?: any}>(
    ...styles: StyleArgument<Properties, Props & ExternalProps & DefaultProps>[]
  ): GlamorousComponent<
    ElementProps &
      ExternalProps &
      Partial<DefaultProps> &
      Omit<Props, 'theme'> &
      Properties,
    ExternalProps
  >

  <Props>(
    ...styles: StyleArgument<Properties, Props & ExternalProps & DefaultProps>[]
  ): GlamorousComponent<
    ElementProps & ExternalProps & Partial<DefaultProps> & Props & Properties,
    ExternalProps
  >
}

// # react component - component factories glamorous(Component)

// ## without propsAreCssOverides

export interface GlamorousComponentFactory<
  ExternalProps,
  Properties,
  DefaultProps
> {
  (...styles: StaticStyleArgument<Properties>[]): GlamorousComponent<
    ExternalProps & Partial<DefaultProps>,
    object
  >

  <Props extends {theme: any}>(
    ...styles: StyleArgument<Properties, Props & ExternalProps & DefaultProps>[]
  ): GlamorousComponent<
    ExternalProps & Partial<DefaultProps> & Omit<Props, 'theme'>,
    Props
  >

  <Props>(
    ...styles: StyleArgument<Properties, Props & ExternalProps & DefaultProps>[]
  ): GlamorousComponent<ExternalProps & Partial<DefaultProps> & Props, Props>
}

// ## with propsAreCssOverides

export interface GlamorousComponentFactoryCssOverides<
  ExternalProps,
  Properties,
  DefaultProps
> {
  (...styles: StaticStyleArgument<Properties>[]): GlamorousComponent<
    ExternalProps & Partial<DefaultProps> & Properties,
    object
  >

  <Props extends {theme: any}>(
    ...styles: StyleArgument<Properties, Props & ExternalProps & DefaultProps>[]
  ): GlamorousComponent<
    ExternalProps & Partial<DefaultProps> & Properties & Omit<Props, 'theme'>,
    Props
  >

  <Props>(
    ...styles: StyleArgument<Properties, Props & ExternalProps & DefaultProps>[]
  ): GlamorousComponent<
    ExternalProps & Partial<DefaultProps> & Properties & Props,
    Props
  >
}