mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-08-12 13:00:19 +00:00
Add type definitions and tests for 'react-elemental' module (#35768)
* Add type definitions and tests for 'react-elemental' module * Fix * Fix tslint.json
This commit is contained in:
Fernando Chen
committed by
Sheetal Nandi
Sheetal Nandi
parent
a39cadfd2a
commit
4b2c1d0844
Vendored
+462
@@ -0,0 +1,462 @@
|
||||
// Type definitions for React Elemental 1.2
|
||||
// Project: https://github.com/LINKIWI/react-elemental
|
||||
// Definitions by: Fernando Chen <https://github.com/wzfc>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.8
|
||||
import {
|
||||
AnchorHTMLAttributes,
|
||||
Component,
|
||||
CSSProperties,
|
||||
FunctionComponent,
|
||||
HTMLAttributes,
|
||||
ImgHTMLAttributes,
|
||||
InputHTMLAttributes,
|
||||
ReactElement,
|
||||
ReactNode,
|
||||
TextareaHTMLAttributes
|
||||
} from 'react';
|
||||
|
||||
export type AlertType = 'info' | 'success' | 'warn' | 'error';
|
||||
export type AlertSize = 'alpha' | 'beta';
|
||||
export interface AlertProps {
|
||||
readonly type?: AlertType;
|
||||
readonly size?: AlertSize;
|
||||
readonly title: string;
|
||||
readonly message: string | ReactElement;
|
||||
readonly dismissible?: boolean;
|
||||
readonly style?: CSSProperties;
|
||||
readonly onDismiss?: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Educational status alerts.
|
||||
*/
|
||||
export class Alert extends Component<AlertProps> {
|
||||
}
|
||||
|
||||
export type ButtonSize = 'alpha' | 'beta' | 'gamma';
|
||||
export interface ButtonProps {
|
||||
readonly color?: string;
|
||||
readonly size?: ButtonSize;
|
||||
readonly text?: string;
|
||||
readonly disabled?: boolean;
|
||||
readonly secondary?: boolean;
|
||||
readonly style?: CSSProperties;
|
||||
readonly children?: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* Button component.
|
||||
*/
|
||||
export class Button extends Component<ButtonProps> {
|
||||
}
|
||||
|
||||
export interface CheckboxProps {
|
||||
readonly checked?: boolean;
|
||||
readonly label?: string;
|
||||
readonly style?: CSSProperties;
|
||||
readonly disabled?: boolean;
|
||||
readonly onChange?: (checked: boolean) => void;
|
||||
readonly children?: ReactNode;
|
||||
}
|
||||
export interface CheckboxState {
|
||||
readonly isHover: boolean;
|
||||
readonly isFocus: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Styled checkbox element.
|
||||
*/
|
||||
export class Checkbox extends Component<CheckboxProps, CheckboxState> {
|
||||
}
|
||||
|
||||
export interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
|
||||
readonly alt: string;
|
||||
readonly color?: string;
|
||||
readonly width?: string;
|
||||
readonly height?: string;
|
||||
readonly lazy?: boolean;
|
||||
readonly showIntermediate?: boolean;
|
||||
readonly style?: CSSProperties;
|
||||
readonly imgStyle?: object;
|
||||
}
|
||||
export interface ImageState {
|
||||
readonly load: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Wrapper for external images.
|
||||
*/
|
||||
export class Image extends Component<ImageProps, ImageState> {
|
||||
}
|
||||
|
||||
export interface LabelProps {
|
||||
readonly label?: string;
|
||||
readonly sublabel?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Text label accompanying an input field.
|
||||
*/
|
||||
export const Label: FunctionComponent<LabelProps>;
|
||||
|
||||
export type LinkType = 'regular' | 'plain' | 'underline';
|
||||
export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
|
||||
readonly type?: LinkType;
|
||||
readonly ref?: string;
|
||||
readonly activeColor?: string;
|
||||
readonly style?: CSSProperties;
|
||||
readonly children?: ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Styled link element.
|
||||
*/
|
||||
export class Link extends Component<LinkProps> {
|
||||
}
|
||||
|
||||
export interface LoadingBarProps {
|
||||
readonly color?: string;
|
||||
readonly thickness?: number;
|
||||
readonly duration?: number;
|
||||
readonly delay?: number;
|
||||
readonly style?: CSSProperties;
|
||||
}
|
||||
export interface LoadingBarState {
|
||||
readonly position: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Indeterminate loading bar component.
|
||||
*/
|
||||
export class LoadingBar extends Component<LoadingBarProps, LoadingBarState> {
|
||||
}
|
||||
|
||||
export type ModalSize = 'alpha' | 'beta' | 'gamma';
|
||||
export interface ModalProps {
|
||||
readonly size?: ModalSize;
|
||||
readonly persistent?: boolean;
|
||||
readonly onHide?: () => void;
|
||||
readonly style?: CSSProperties;
|
||||
readonly children?: any;
|
||||
}
|
||||
export interface ModalState {
|
||||
readonly modal: HTMLDivElement;
|
||||
readonly windowWidth: number;
|
||||
readonly windowHeight: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Container for a full-page modal dialog.
|
||||
*/
|
||||
export class Modal extends Component<ModalProps, ModalState> {
|
||||
}
|
||||
|
||||
export type PulsatorSize = 'alpha' | 'beta' | 'gamma' | 'delta';
|
||||
export interface PulsatorProps {
|
||||
readonly color?: string;
|
||||
readonly size?: PulsatorSize;
|
||||
readonly inactive?: boolean;
|
||||
readonly transparent?: boolean;
|
||||
readonly style?: CSSProperties;
|
||||
}
|
||||
export interface PulsatorState {
|
||||
readonly color: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* Indeterminate progress indication spinner.
|
||||
*/
|
||||
export class Pulsator extends Component<PulsatorProps, PulsatorState> {
|
||||
}
|
||||
|
||||
export type RadioGroupProps = HTMLAttributes<HTMLDivElement> & {
|
||||
readonly options?: Array<{
|
||||
readonly value: string;
|
||||
readonly label: string | ReactNode;
|
||||
readonly disabled?: boolean;
|
||||
}>;
|
||||
readonly value?: string;
|
||||
readonly accentColor?: string;
|
||||
readonly idleColor?: string;
|
||||
readonly radioRenderer?: (option: ReactElement, idx: number, options: ReactElement[]) => ReactElement;
|
||||
readonly onChange?: (value: string) => void;
|
||||
};
|
||||
|
||||
/**
|
||||
* Group of individually selectable radio buttons.
|
||||
*/
|
||||
export class RadioGroup extends Component<RadioGroupProps> {
|
||||
}
|
||||
|
||||
export interface SelectListProps {
|
||||
readonly placeholder?: string;
|
||||
readonly options?: Array<{
|
||||
readonly label: string;
|
||||
readonly value: string;
|
||||
}>;
|
||||
readonly width?: number | string;
|
||||
readonly height?: number;
|
||||
readonly error?: string;
|
||||
readonly style?: CSSProperties;
|
||||
readonly onChange?: (value: string) => void;
|
||||
}
|
||||
export interface SelectListState {
|
||||
readonly isExpanded: boolean;
|
||||
readonly isFocused: boolean;
|
||||
readonly isHovered: boolean;
|
||||
readonly selectedOption: {
|
||||
readonly label: any;
|
||||
readonly value: string;
|
||||
};
|
||||
readonly highlightedIdx: number | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Dropdown menu component.
|
||||
*/
|
||||
export class SelectList extends Component<SelectListProps, SelectListState> {
|
||||
}
|
||||
|
||||
export interface SpacingProps {
|
||||
readonly padding?: boolean;
|
||||
readonly size?: string;
|
||||
readonly top?: boolean;
|
||||
readonly right?: boolean;
|
||||
readonly bottom?: boolean;
|
||||
readonly left?: boolean;
|
||||
readonly inline?: boolean;
|
||||
readonly style?: CSSProperties;
|
||||
readonly children?: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* Spacing component to add padding and margins.
|
||||
*/
|
||||
export const Spacing: FunctionComponent<SpacingProps>;
|
||||
|
||||
export type SpinnerSize = 'alpha' | 'beta' | 'gamma' | 'delta';
|
||||
export interface SpinnerProps {
|
||||
readonly size?: SpinnerSize;
|
||||
readonly ringColor?: string;
|
||||
readonly accentColor?: string;
|
||||
readonly duration?: number;
|
||||
readonly thickness?: number;
|
||||
readonly style?: CSSProperties;
|
||||
}
|
||||
|
||||
/**
|
||||
* Indeterminate progress indication spinner.
|
||||
*/
|
||||
export class Spinner extends Component<SpinnerProps> {
|
||||
}
|
||||
|
||||
export interface TabsProps {
|
||||
readonly options?: Array<{
|
||||
readonly value: string;
|
||||
readonly label: string | ReactNode;
|
||||
}>;
|
||||
readonly value?: string;
|
||||
readonly secondary?: boolean;
|
||||
readonly fit?: boolean;
|
||||
readonly invert?: boolean;
|
||||
readonly onChange?: (value: string) => void;
|
||||
readonly style?: CSSProperties;
|
||||
}
|
||||
|
||||
/**
|
||||
* Horizontally organized segments of options.
|
||||
*/
|
||||
export class Tabs extends Component<TabsProps> {
|
||||
}
|
||||
|
||||
export type TagSize = 'alpha' | 'beta';
|
||||
export interface TagProps {
|
||||
readonly outlineColor?: string;
|
||||
readonly backgroundColor?: string;
|
||||
readonly text: string;
|
||||
readonly size?: TagSize;
|
||||
readonly dismissible?: boolean;
|
||||
readonly onDismiss?: () => void;
|
||||
readonly style?: CSSProperties;
|
||||
}
|
||||
|
||||
/**
|
||||
* Textual status indicators.
|
||||
*/
|
||||
export const Tag: FunctionComponent<TagProps>;
|
||||
|
||||
export interface TextProps {
|
||||
readonly secondary?: boolean;
|
||||
readonly size?: string;
|
||||
readonly color?: string;
|
||||
readonly bold?: boolean;
|
||||
readonly inline?: boolean;
|
||||
readonly uppercase?: boolean;
|
||||
readonly center?: boolean;
|
||||
readonly right?: boolean;
|
||||
readonly style?: CSSProperties;
|
||||
readonly children?: ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Text component with automatic typeface formatting.
|
||||
*/
|
||||
export class Text extends Component<TextProps> {
|
||||
}
|
||||
|
||||
export type TextAreaProps = TextFieldProps & {
|
||||
readonly error?: string;
|
||||
readonly secondary?: boolean;
|
||||
readonly style?: CSSProperties;
|
||||
};
|
||||
|
||||
/**
|
||||
* Styled textarea element for blobs of text input.
|
||||
*
|
||||
* This component behaves similarly to TextField, with some minor modifications.
|
||||
*/
|
||||
export const TextArea: FunctionComponent<TextAreaProps>;
|
||||
|
||||
export type TextFieldProps = TextareaHTMLAttributes<HTMLTextAreaElement> & InputHTMLAttributes<HTMLInputElement> & {
|
||||
readonly error?: string;
|
||||
readonly secondary?: boolean;
|
||||
readonly textarea?: boolean;
|
||||
readonly style?: CSSProperties;
|
||||
};
|
||||
|
||||
/**
|
||||
* Input element for accepting user text input.
|
||||
*/
|
||||
export class TextField extends Component<TextFieldProps> {
|
||||
}
|
||||
|
||||
export interface ToastProps {
|
||||
readonly color?: string;
|
||||
readonly accent?: string;
|
||||
readonly style?: CSSProperties;
|
||||
readonly children?: ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fixed-position notification element. This component is purely presentational; in actual usage,
|
||||
* it should be wrapped in a manager to handle logic for conditional display.
|
||||
*/
|
||||
export const Toast: FunctionComponent<ToastProps>;
|
||||
|
||||
export interface TooltipProps {
|
||||
readonly contents: ReactElement;
|
||||
readonly persistent?: boolean;
|
||||
readonly width?: number | string;
|
||||
readonly offset?: number;
|
||||
readonly top?: boolean;
|
||||
readonly bottom?: boolean;
|
||||
readonly style?: CSSProperties;
|
||||
readonly children: ReactNode;
|
||||
}
|
||||
|
||||
export interface TooltipState {
|
||||
readonly displayTooltip: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* Wrap an arbitrary element with a tooltip next to the element on hover.
|
||||
*/
|
||||
export class Tooltip extends Component<TooltipProps, TooltipState> {
|
||||
}
|
||||
|
||||
export interface ElementalProps {
|
||||
readonly fontOpts?: {
|
||||
readonly primary?: {
|
||||
readonly regular?: string;
|
||||
readonly bold?: string;
|
||||
};
|
||||
readonly secondary?: {
|
||||
readonly regular?: string;
|
||||
readonly bold?: string;
|
||||
};
|
||||
};
|
||||
readonly colorOpts?: {
|
||||
readonly primary?: string;
|
||||
readonly primaryLight?: string;
|
||||
readonly primaryDark?: string;
|
||||
};
|
||||
readonly children: ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Component that declaratively wraps logic for idempotently bootstrapping the library. Client code
|
||||
* can be contained within the children of this component at the highest level of the application.
|
||||
*/
|
||||
export class Elemental extends Component<ElementalProps> {}
|
||||
|
||||
export interface FontOpts {
|
||||
primary?: {
|
||||
regular?: string;
|
||||
bold?: string;
|
||||
};
|
||||
secondary?: {
|
||||
regular?: string;
|
||||
bold?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface ColorOpts {
|
||||
primary?: string;
|
||||
primaryLight?: string;
|
||||
primaryDark?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Bootstrap Elemental. This will inject all necessary global CSS declarations and initialize custom
|
||||
* style overrides passed in as options.
|
||||
*
|
||||
* @param fontOpts Describes the primary and secondary fonts.
|
||||
* @param colorOpts Optional color overrides for the library's default primary colors.
|
||||
*/
|
||||
export function bootstrap(fontOpts?: FontOpts, colorOpts?: ColorOpts): void;
|
||||
|
||||
export const colors: {
|
||||
black: string;
|
||||
white: string;
|
||||
transparent: string;
|
||||
greenLight: string;
|
||||
green: string;
|
||||
redLight: string;
|
||||
red: string;
|
||||
blueLight: string;
|
||||
blue: string;
|
||||
blueDark: string;
|
||||
orangeLight: string;
|
||||
orange: string;
|
||||
yellow: string;
|
||||
yellowLight: string;
|
||||
purpleLight: string;
|
||||
purple: string;
|
||||
purpleDark: string;
|
||||
primary: string;
|
||||
primaryLight: string;
|
||||
primaryDark: string;
|
||||
[colorName: string]: string;
|
||||
};
|
||||
|
||||
export const sizes: {
|
||||
alpha: string;
|
||||
beta: string;
|
||||
gamma: string;
|
||||
delta: string;
|
||||
epsilon: string;
|
||||
iota: string;
|
||||
kilo: string;
|
||||
lambda: string;
|
||||
};
|
||||
|
||||
export const spacing: {
|
||||
default: string;
|
||||
micro: string
|
||||
tiny: string
|
||||
small: string
|
||||
large: string
|
||||
huge: string
|
||||
enormous: string;
|
||||
};
|
||||
@@ -0,0 +1,148 @@
|
||||
import * as React from 'react';
|
||||
import {
|
||||
Alert,
|
||||
Button,
|
||||
Checkbox,
|
||||
colors,
|
||||
Elemental,
|
||||
Image,
|
||||
Link,
|
||||
LoadingBar,
|
||||
Modal,
|
||||
Pulsator,
|
||||
RadioGroup,
|
||||
SelectList,
|
||||
Spacing,
|
||||
Spinner,
|
||||
Tabs,
|
||||
Tag,
|
||||
Text,
|
||||
TextArea,
|
||||
TextField,
|
||||
Toast,
|
||||
Tooltip
|
||||
} from 'react-elemental';
|
||||
|
||||
class App extends React.Component {
|
||||
handleChange = (key: string) => (value: any) => this.setState({ [key]: value });
|
||||
onClick: React.MouseEventHandler = (evt) => evt.preventDefault();
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Elemental
|
||||
fontOpts={{
|
||||
primary: { regular: '', bold: '' },
|
||||
secondary: { regular: '', bold: '' }
|
||||
}}
|
||||
>
|
||||
<Spacing size='huge' style={{maxWidth: '900px'}} top bottom right left>
|
||||
<RadioGroup
|
||||
options={[
|
||||
{ value: 's', label: 'Small' },
|
||||
{ value: 'm', label: 'Medium' },
|
||||
{ value: 'l', label: 'Large' },
|
||||
{ value: 'xl', label: 'Extra large (out of stock)', disabled: true }
|
||||
]}
|
||||
value='s'
|
||||
accentColor={colors.blue}
|
||||
style={{ display: 'flex' }}
|
||||
radioRenderer={(option) => (
|
||||
<Spacing key={option.props.value} right>
|
||||
{option}
|
||||
</Spacing>
|
||||
)}
|
||||
onChange={this.handleChange('radio-group')}
|
||||
/>
|
||||
<Image
|
||||
src='https://linkiwi.github.io/react-elemental/images/image/map.jpg'
|
||||
alt='Map of Great Britain'
|
||||
color='#b9ad97'
|
||||
width='400px'
|
||||
height='642px'
|
||||
/>
|
||||
<Tabs
|
||||
options={[
|
||||
{ value: 'one', label: 'one' },
|
||||
{ value: 'two', label: 'two' },
|
||||
{ value: 'three', label: 'three' },
|
||||
]}
|
||||
value='one'
|
||||
onChange={this.handleChange('tab')} />
|
||||
<Toast>
|
||||
<Text>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</Text>
|
||||
</Toast>
|
||||
<Modal size='beta'>
|
||||
</Modal>
|
||||
<Tooltip
|
||||
contents={
|
||||
<Text color='gray10' size='kilo' center>
|
||||
Tooltip contents
|
||||
</Text>
|
||||
}
|
||||
bottom
|
||||
>
|
||||
<Text>
|
||||
Text
|
||||
</Text>
|
||||
</Tooltip>
|
||||
<Pulsator size='delta' color={colors.purple} transparent />
|
||||
<Spinner size='alpha' accentColor={colors.orange} duration={1.2} thickness={5} />
|
||||
<Link type='plain' href='' activeColor={colors.black} onClick={this.onClick}>
|
||||
Use plain links to disable the underline on hover
|
||||
</Link>
|
||||
<TextArea
|
||||
placeholder='Type away'
|
||||
style={{
|
||||
height: '100px',
|
||||
width: '600px'
|
||||
}}
|
||||
secondary
|
||||
/>
|
||||
<Alert
|
||||
type='warn'
|
||||
size='alpha'
|
||||
title='Dismiss me'
|
||||
message='Click the clear icon toward the right'
|
||||
dismissible
|
||||
onDismiss={() => {}}
|
||||
/>
|
||||
<Checkbox
|
||||
label='Disabled state'
|
||||
onChange={this.handleChange('checkbox')}
|
||||
checked={false}
|
||||
disabled
|
||||
/>
|
||||
<LoadingBar color={colors.red} thickness={4} duration={500} delay={50} />
|
||||
<Tag
|
||||
text='Dismiss me again'
|
||||
outlineColor={colors.green}
|
||||
backgroundColor={colors.greenLight}
|
||||
dismissible
|
||||
/>
|
||||
<SelectList
|
||||
placeholder='Placeholder'
|
||||
width={200}
|
||||
options={[
|
||||
{ label: 'Some obnoxiously long label name', value: 'first-item' },
|
||||
{ label: 'Second item', value: 'second-item' },
|
||||
{ label: 'Third item', value: 'third-item' }
|
||||
]}
|
||||
onChange={this.handleChange('select-list')}
|
||||
error="That's a bad selection."
|
||||
/>
|
||||
<TextField
|
||||
value='Some invalid user input'
|
||||
error="That's not a number."
|
||||
onChange={() => {}}
|
||||
secondary
|
||||
/>
|
||||
<Button color={colors.green} size='gamma' text='Colors!' secondary />
|
||||
</Spacing>
|
||||
</Elemental>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"es6",
|
||||
"dom"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true,
|
||||
"baseUrl": "../",
|
||||
"jsx": "react",
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"react-elemental-tests.tsx"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
{ "extends": "dtslint/dt.json" }
|
||||
Reference in New Issue
Block a user