From d06b4c2818f72670bd048e0242b2ddabaaed7903 Mon Sep 17 00:00:00 2001 From: hasparus Date: Mon, 16 Mar 2020 11:36:45 +0100 Subject: [PATCH] chore(@theme-ui/components): import types from DT --- packages/components/index.d.ts | 365 +++++++++++++++++++++++++++++++ packages/components/package.json | 5 +- packages/theme-ui/package.json | 3 +- 3 files changed, 370 insertions(+), 3 deletions(-) create mode 100644 packages/components/index.d.ts diff --git a/packages/components/index.d.ts b/packages/components/index.d.ts new file mode 100644 index 000000000..59db62897 --- /dev/null +++ b/packages/components/index.d.ts @@ -0,0 +1,365 @@ +import * as React from 'react' +import { StyledComponent } from '@emotion/styled' +import { InterpolationWithTheme } from '@emotion/core' +import { SxStyleProp } from 'theme-ui' +import { SpaceProps, ColorProps, MarginProps } from 'styled-system' +import { ResponsiveStyleValue } from '@theme-ui/css' + +type Assign = { + [P in keyof (T & U)]: P extends keyof T + ? T[P] + : P extends keyof U + ? U[P] + : never +} + +type ForwardRef = React.ForwardRefExoticComponent< + React.PropsWithoutRef

& React.RefAttributes +> + +export interface BoxOwnProps extends SpaceProps, ColorProps { + as?: React.ElementType + variant?: string + css?: InterpolationWithTheme +} +export interface BoxProps + extends Assign, BoxOwnProps> {} +/** + * Use the Box component as a layout primitive to add margin, padding, and colors to content. + * @see https://theme-ui.com/components/box + */ +export const Box: StyledComponent, BoxOwnProps, {}> + +export type FlexStyleProps = BoxOwnProps +export type FlexProps = BoxProps +/** + * Use the Flex component to create flexbox layouts. + * @see https://theme-ui.com/components/flex + */ +export const Flex: StyledComponent< + React.ComponentProps<'div'>, + FlexStyleProps, + {} +> + +export interface GridProps extends BoxProps { + /** + * Minimum width of child elements + */ + width?: ResponsiveStyleValue + /** + * Number of columns to use for the layout (cannot be used in conjunction with the width prop) + */ + columns?: ResponsiveStyleValue + /** + * Space between child elements + */ + gap?: ResponsiveStyleValue +} +/** + * CSS grid layout component to arrange direct child elements in a tiled grid layout. + * @see https://theme-ui.com/components/grid + */ +export const Grid: ForwardRef + +export interface ButtonProps + extends Assign, BoxOwnProps> {} +/** + * Primitive button component with variants + * @see https://theme-ui.com/components/button + */ +export const Button: ForwardRef + +export interface LinkProps + extends Assign, BoxOwnProps> {} +/** + * Link variants can be defined in the `theme.links` object. + * By default the Link component will use styles defined in `theme.styles.a`. + * @see https://theme-ui.com/components/link + */ +export const Link: ForwardRef + +export type TextProps = BoxProps +/** + * Primitive typographic component. + * + * Text style variants can be defined in the theme.text object. + * @see https://theme-ui.com/components/text + */ +export const Text: ForwardRef + +export interface HeadingProps + extends Assign, BoxOwnProps> {} +/** + * Primitive heading component, defaults to

. + * + * Text style variants can be defined in the theme.text object. + * The Heading component uses theme.text.heading as its default variant style. + * @see https://theme-ui.com/components/heading + */ +export const Heading: ForwardRef + +export interface ImageProps + extends Assign, BoxOwnProps> {} +/** + * Image style variants can be defined in the theme.images object. + * @see https://theme-ui.com/components/image/ + */ +export const Image: ForwardRef + +export type CardProps = BoxProps +/** + * Card style variants can be defined in the `theme.cards` object. + * By default the Card component uses the `theme.cards.primary` variant. + * @see https://theme-ui.com/components/card + */ +export const Card: ForwardRef + +export interface LabelProps + extends Assign, BoxOwnProps> {} +/** + * Label variants can be defined in `theme.forms` + * and the component uses the `theme.forms.label` variant by default. + * @see https://theme-ui.com/components/label/ + */ +export const Label: ForwardRef + +export interface InputProps + extends Assign, BoxOwnProps> {} +/** + * Input variants can be defined in `theme.forms` + * and the component uses the `theme.forms.input` variant by default. + * @see https://theme-ui.com/components/input/ + */ +export const Input: ForwardRef + +export interface SelectProps + extends Assign, BoxOwnProps> {} +/** + * Select variants can be defined in `theme.forms` + * and the component uses the `theme.forms.select` variant by default. + * @see https://theme-ui.com/components/select/ + */ +export const Select: ForwardRef + +export interface TextareaProps + extends Assign, BoxOwnProps> {} +/** + * Form textarea component + * + * Textarea variants can be defined in `theme.forms` + * and the component uses the `theme.forms.textarea` variant by default. + * @see https://theme-ui.com/components/textarea/ + */ +export const Textarea: ForwardRef + +export interface RadioProps + extends Assign, BoxOwnProps> {} +/** + * Form radio input component + * + * Radio variants can be defined in `theme.forms` and the + * component uses the `theme.forms.radio variant` by default. + * @see https://theme-ui.com/components/radio/ + */ +export const Radio: ForwardRef + +export interface CheckboxProps + extends Assign, BoxOwnProps> {} +/** + * Form checkbox input component + * + * Checkbox variants can be defined in `theme.forms` and the + * component uses the `theme.forms.checkbox` variant by default. + * @see https://theme-ui.com/components/checkbox/ + */ +export const Checkbox: ForwardRef + +export interface SliderProps + extends Assign, BoxOwnProps> {} +/** + * Range input element + * + * Slider variants can be defined in the `theme.forms` object. + * The Slider component uses `theme.forms.slider` as its default variant style. + * @see https://theme-ui.com/components/slider/ + */ +export const Slider: ForwardRef + +export interface FieldOwnProps extends MarginProps { + /** + * Text for Label component + */ + label: string + /** + * Used for the for, id, and name attributes + */ + name: string +} +export type FieldProps = FieldOwnProps & + Omit, 'as' | keyof FieldOwnProps> & { + /** + * form control to render, default Input + */ + as?: T + } + +// `T` is far from unnecessary. We derive component props from it. +// tslint:disable-next-line no-unnecessary-generics +export function Field< + T extends React.ElementType = React.ElementType +>(props: FieldProps): JSX.Element + +export interface ProgressProps + extends Assign, BoxOwnProps> {} +/** + * @see https://theme-ui.com/components/progress/ + */ +export const Progress: ForwardRef + +export interface DonutProps + extends Omit< + React.SVGProps, + 'opacity' | 'color' | 'css' | 'sx' | 'max' | 'min' + >, + BoxOwnProps { + value: number + min?: number + max?: number + title?: string + size?: string | number +} +/** + * Single value SVG donut chart + * @see https://theme-ui.com/components/donut/ + */ +export const Donut: ForwardRef + +export interface SpinnerProps + extends Omit< + React.SVGProps, + 'opacity' | 'color' | 'css' | 'sx' + >, + BoxOwnProps { + size?: number | string +} +export const Spinner: ForwardRef + +export interface AvatarProps extends ImageProps { + size?: number | string +} +export const Avatar: ForwardRef + +export type BadgeProps = BoxProps +export const Badge: ForwardRef + +interface CloseProps extends Omit {} +/** + * Button with close (×) icon. + * + * The Close component renders as a