glamorous/typings/glamorous.d.ts

React component styling solved

// Type definitions for Glamorous v3.2.0
// Project: https://github.com/paypal/glamorous
// Definitions by: Kok Sam <https://github.com/sammkj>

import * as React from 'react'
import {HTMLComponent, SVGComponent} from './built-in-glamorous-components'
import {
  HTMLComponentFactory,
  HTMLKey,
  SVGComponentFactory,
  SVGKey,
} from './built-in-component-factories'
import {
  GlamorousComponent,
  GlamorousComponentProps,
  GlamorousComponentFunctions,
  ExtraGlamorousProps,
} from './glamorous-component'
import {
  BuiltInGlamorousComponentFactory,
  KeyGlamorousComponentFactory,
  KeyGlamorousComponentFactoryCssOverides,
  GlamorousComponentFactory,
  GlamorousComponentFactoryCssOverides,
} from './component-factory'
import {
  CSSProperties,
  CSSPropertiesCompleteSingle,
  CSSPropertiesComplete,
  CSSPropertiesPseudo,
  CSSPropertiesLossy,
} from './css-properties'
import {
  SVGProperties,
  SVGPropertiesCompleteSingle,
  SVGPropertiesComplete,
  SVGPropertiesLossy,
} from './svg-properties'
import {StyleFunction, StyleArray, StyleArgument} from './style-arguments'
import {
  DOMTagComponentFactory,
  SVGTagComponentFactory,
  HTMLDomTags,
  SVGDomTags,
  DOMTagGlamorousComponentFactory,
  SVGTagGlamorousComponentFactory,
} from './dom-tag-component-factory'

import {Omit} from './helpers'

export {
  CSSProperties,
  CSSPropertiesCompleteSingle,
  CSSPropertiesComplete,
  CSSPropertiesPseudo,
  CSSPropertiesLossy,
  SVGProperties,
  SVGPropertiesCompleteSingle,
  SVGPropertiesComplete,
  SVGPropertiesLossy,
  GlamorousComponent,
  GlamorousComponentProps,
  GlamorousComponentFunctions,
  ExtraGlamorousProps,
  StyleFunction,
  StyleArray,
  StyleArgument,
  BuiltInGlamorousComponentFactory,
  KeyGlamorousComponentFactory,
  KeyGlamorousComponentFactoryCssOverides,
  GlamorousComponentFactory,
  GlamorousComponentFactoryCssOverides,
  HTMLComponent,
  SVGComponent,
  HTMLComponentFactory,
  HTMLKey,
  SVGComponentFactory,
  SVGKey,
  DOMTagComponentFactory,
  SVGTagComponentFactory,
  HTMLDomTags,
  SVGDomTags,
  DOMTagGlamorousComponentFactory,
  SVGTagGlamorousComponentFactory,
}

export interface GlamorousOptions<Props, Context, DefaultProps> {
  displayName: string
  rootEl: string | Element
  forwardProps: string[]
  filterProps: string[]
  shouldClassNameUpdate: (
    props: Props,
    prevProps: Props,
    context: Context,
    prevContext: Context,
  ) => boolean
  propsAreCssOverrides?: false
  withProps: DefaultProps
}

export interface PropsAreCssOverridesGlamorousOptions<
  Props,
  Context,
  DefaultProps
> {
  displayName?: string
  rootEl?: string | Element
  forwardProps?: string[]
  filterProps?: string[]
  shouldClassNameUpdate?: (
    props: Props,
    prevProps: Props,
    context: Context,
    prevContext: Context,
  ) => boolean
  propsAreCssOverrides: true
  withProps?: DefaultProps
}

export type Component<T> = React.ComponentClass<T> | React.StatelessComponent<T>

type OmitInternals<Props extends {className?: string; theme?: object}> = Omit<
  Props,
  'className' | 'theme'
>

type GlamorousProps = {className?: string; theme?: object}

export interface GlamorousInterface
  extends HTMLComponentFactory,
    SVGComponentFactory,
    HTMLComponent,
    SVGComponent,
    DOMTagComponentFactory,
    SVGTagComponentFactory {
  // # Glamarous Component factories

  // Two overloads are needed per shape due to a union return of CSSProperties | SVGProperties
  // resulting in a loss of typesafety on function arguments

  // ## create a component factory from your own component

  <ExternalProps, Context = object, DefaultProps extends object = object>(
    component: Component<ExternalProps & GlamorousProps>,
    options?: Partial<GlamorousOptions<ExternalProps, Context, DefaultProps>>,
  ): GlamorousComponentFactory<ExternalProps, CSSProperties, DefaultProps>
  <ExternalProps, Context = object, DefaultProps extends object = object>(
    component: Component<ExternalProps & GlamorousProps>,
    options?: Partial<GlamorousOptions<ExternalProps, Context, DefaultProps>>,
  ): GlamorousComponentFactory<ExternalProps, SVGProperties, DefaultProps>

  <ExternalProps, Context = object, DefaultProps extends object = object>(
    component: Component<ExternalProps & GlamorousProps>,
    options?: PropsAreCssOverridesGlamorousOptions<
      ExternalProps,
      Context,
      DefaultProps
    >,
  ): GlamorousComponentFactoryCssOverides<
    ExternalProps,
    CSSProperties,
    DefaultProps
  >
  <ExternalProps, Context = object, DefaultProps extends object = object>(
    component: Component<ExternalProps & GlamorousProps>,
    options?: PropsAreCssOverridesGlamorousOptions<
      ExternalProps,
      Context,
      DefaultProps
    >,
  ): GlamorousComponentFactoryCssOverides<
    ExternalProps,
    SVGProperties,
    DefaultProps
  >
}

interface ThemeProps {
  theme: object
}

export class ThemeProvider extends React.Component<ThemeProps, any> {}

export function withTheme<Props extends {theme: any}>(
  component: React.ComponentClass<Props>,
): React.ComponentClass<Omit<Props, 'theme'>>

export function withTheme<Props extends {theme: any}>(
  component: React.StatelessComponent<Props>,
): React.StatelessComponent<Omit<Props, 'theme'>>

export * from './named-built-in-glamorous-components'

declare const glamorous: GlamorousInterface

export default glamorous