Skip to content
This repository has been archived by the owner on Dec 13, 2018. It is now read-only.

feat(typescript): named exports for built-in glamorous components #319

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions test/glamorous.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,19 @@ import { GlamorousComponent, GlamorousComponentProps } from "../";

import { CSSPropertiesPseudo, CSSPropertiesLossy } from "../"


// Glamorous built in Components named exports

import { Article, H1, P } from '../'

const useBuiltInNamedExports = (
<Article color="black">
<H1 float="left">Test</H1>
<P marginBottom="10px">Built in components</P>
</Article>
)


// Properties
const Static = glamorous.div({
"fontSize": 20,
Expand Down
3 changes: 3 additions & 0 deletions typings/built-in-glamorous-components.d.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import { ExtraGlamorousProps } from './glamorous-component';
import { CSSProperties } from './css-properties';

// The file `./named-built-in-glamorous-components.d.ts` is based off this file
// and should get any updates this file does.

/*
* FIXME:
* Since TypeScript doesn't have
Expand Down
2 changes: 2 additions & 0 deletions typings/glamorous.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -173,6 +173,8 @@ export function withTheme<Props extends { theme: any }>(
Omit<Props, "theme">
>

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

declare const glamorous: GlamorousInterface

export default glamorous
138 changes: 138 additions & 0 deletions typings/named-built-in-glamorous-components.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
import * as React from 'react'
import { ExtraGlamorousProps } from './glamorous-component';
import { CSSProperties } from './css-properties';

// This file is based off `./built-in-glamorous-components.d.ts`

export const A: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLAnchorElement>>
export const Abbr: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Address: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Area: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLAreaElement>>
export const Article: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Aside: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Audio: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLAudioElement>>
export const B: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Base: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLBaseElement>>
export const Bdi: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Bdo: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Big: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Blockquote: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLQuoteElement>>
export const Body: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLBodyElement>>
export const Br: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLBRElement>>
export const Button: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLButtonElement>>
export const Canvas: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLCanvasElement>>
export const Caption: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLTableCaptionElement>>
export const Cite: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Code: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Col: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLTableColElement>>
export const Colgroup: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLTableColElement>>
export const Data: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLDataElement>>
export const Datalist: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLDataListElement>>
export const Dd: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Del: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLModElement>>
export const Details: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Dfn: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Dialog: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Div: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLDivElement>>
export const Dl: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLDListElement>>
export const Dt: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Em: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Embed: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLEmbedElement>>
export const Fieldset: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLFieldSetElement>>
export const Figcaption: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Figure: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Footer: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Form: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLFormElement>>
export const H1: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLHeadingElement>>
export const H2: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLHeadingElement>>
export const H3: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLHeadingElement>>
export const H4: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLHeadingElement>>
export const H5: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLHeadingElement>>
export const H6: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLHeadingElement>>
export const Head: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLHeadElement>>
export const Header: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Hgroup: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Hr: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLHRElement>>
export const Html: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLHtmlElement>>
export const I: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Iframe: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLIFrameElement>>
export const Img: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLImageElement>>
export const Input: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLInputElement>>
export const Ins: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLModElement>>
export const Kbd: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Keygen: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Label: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLLabelElement>>
export const Legend: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLLegendElement>>
export const Li: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLLIElement>>
export const Link: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLLinkElement>>
export const Main: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Map: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLMapElement>>
export const Mark: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Menu: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLMenuElement>>
export const Menuitem: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Meta: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLMetaElement>>
export const Meter: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLMeterElement>>
export const Nav: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Noscript: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Object: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLObjectElement>>
export const Ol: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLOListElement>>
export const Optgroup: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLOptGroupElement>>
export const Option: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLOptionElement>>
export const Output: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLOutputElement>>
export const P: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLParagraphElement>>
export const Param: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLParamElement>>
export const Picture: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLPictureElement>>
export const Pre: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLPreElement>>
export const Progress: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLProgressElement>>
export const Q: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLQuoteElement>>
export const Rp: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Rt: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Ruby: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const S: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Samp: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Script: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLScriptElement>>
export const Section: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Select: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLSelectElement>>
export const Small: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Source: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLSourceElement>>
export const Span: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLSpanElement>>
export const Strong: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Style: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLStyleElement>>
export const Sub: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Summary: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Sup: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Table: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLTableElement>>
export const Tbody: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLTableSectionElement>>
export const Td: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLTableDataCellElement>>
export const Textarea: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLTextAreaElement>>
export const Tfoot: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLTableSectionElement>>
export const Th: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLTableHeaderCellElement>>
export const Thead: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLTableSectionElement>>
export const Time: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLTimeElement>>
export const Title: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLTitleElement>>
export const Tr: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLTableRowElement>>
export const Track: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLTrackElement>>
export const U: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Ul: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLUListElement>>
export const Var: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Video: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLVideoElement>>
export const Wbr: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.HTMLProps<HTMLElement>>
export const Circle: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.SVGAttributes<SVGCircleElement>>;
export const ClipPath: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.SVGAttributes<SVGClipPathElement>>;
export const Defs: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.SVGAttributes<SVGDefsElement>>;
export const Ellipse: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.SVGAttributes<SVGEllipseElement>>;
export const G: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.SVGAttributes<SVGGElement>>;
export const Image: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.SVGAttributes<SVGImageElement>>;
export const Line: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.SVGAttributes<SVGLineElement>>;
export const LinearGradient: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.SVGAttributes<SVGLinearGradientElement>>;
export const Mask: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.SVGAttributes<SVGMaskElement>>;
export const Path: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.SVGAttributes<SVGPathElement>>;
export const Pattern: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.SVGAttributes<SVGPatternElement>>;
export const Polygon: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.SVGAttributes<SVGPolygonElement>>;
export const Polyline: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.SVGAttributes<SVGPolylineElement>>;
export const RadialGradient: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.SVGAttributes<SVGRadialGradientElement>>;
export const Rect: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.SVGAttributes<SVGRectElement>>;
export const Stop: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.SVGAttributes<SVGStopElement>>;
export const Svg: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.SVGAttributes<SVGSVGElement>>;
export const Text: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.SVGAttributes<SVGTextElement>>;
export const Tspan: React.StatelessComponent<CSSProperties & ExtraGlamorousProps & React.SVGAttributes<SVGTSpanElement>>;