diff --git a/types/react-sketchapp/index.d.ts b/types/react-sketchapp/index.d.ts index 38573eac89..055e5aadc3 100644 --- a/types/react-sketchapp/index.d.ts +++ b/types/react-sketchapp/index.d.ts @@ -1,39 +1,39 @@ - // Type definitions for react-sketchapp 0.12 // Project: https://github.com/airbnb/react-sketchapp // Definitions by: Rico Kahler // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.3 import * as React from "../react/index"; declare global { - export const context: SketchContext; + const context: SketchContext; } // sketch interfaces taken from // https://github.com/airbnb/react-sketchapp/blob/v0.12.1/src/types.js -export interface SketchPage { name: () => any } +export interface SketchPage { name: () => any; } export interface SketchAssetCollection { - colors: () => any[], - gradients: () => any[], + colors: () => any[]; + gradients: () => any[]; } export interface SketchSharedStyleContainer { - setObjects: (objects: any[]) => void, - addSharedStyleWithName_firstInstance: (name: string, ins: any) => void, + setObjects: (objects: any[]) => void; + addSharedStyleWithName_firstInstance: (name: string, ins: any) => void; } export interface SketchDocumentData { - layerStyles: () => void, - layerTextStyles: () => SketchSharedStyleContainer, - layerSymbols: () => void, - assets: () => SketchAssetCollection, + layerStyles: () => void; + layerTextStyles: () => SketchSharedStyleContainer; + layerSymbols: () => void; + assets: () => SketchAssetCollection; } export interface SketchDocument { - documentData: () => SketchDocumentData, - pages: () => SketchPage[], - addBlankPage: () => SketchPage, - currentPage: SketchPage, + documentData: () => SketchDocumentData; + pages: () => SketchPage[]; + addBlankPage: () => SketchPage; + currentPage: SketchPage; } -export interface SketchContext { document: SketchDocument } +export interface SketchContext { document: SketchDocument; } /** * Returns the top-level rendered Sketch object or an array of Sketch objects if you use @@ -47,7 +47,6 @@ export function render(element: JSX.Element, container?: any): any; /** * Returns a Sketch JSON object for further consumption - doesn't add to the page. - * @param element * @return The top-most Sketch layer as JSON. */ export function renderToJSON(element: JSX.Element): any; @@ -67,66 +66,66 @@ export type StyleReference = number; * Represents the base styles that can be applied to a component. */ export interface Style { - shadowColor?: Color, - shadowOffset?: { width?: number, height?: number }, - shadowOpacity?: number, - shadowRadius?: number, - width?: number, - height?: number, - top?: number, - left?: number, - right?: number, - bottom?: number, - minWidth?: number, - maxWidth?: number, - minHeight?: number, - maxHeight?: number, - margin?: number, - marginVertical?: number, - marginHorizontal?: number, - marginTop?: number, - marginBottom?: number, - marginLeft?: number, - marginRight?: number, - padding?: number, - paddingVertical?: number, - paddingHorizontal?: number, - paddingTop?: number, - paddingBottom?: number, - paddingLeft?: number, - paddingRight?: number, - borderWidth?: number, - borderTopWidth?: number, - borderRightWidth?: number, - borderBottomWidth?: number, - borderLeftWidth?: number, - position?: 'absolute' | 'relative', - flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse', - flexWrap?: 'wrap' | 'nowrap', - justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around', - alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch', - alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch', - overflow?: 'visible' | 'hidden' | 'scroll', - flex?: number, - flexGrow?: number, - flexShrink?: number, - flexBasis?: number, - aspectRatio?: number, - zIndex?: number, - backfaceVisibility?: 'visible' | 'hidden', - backgroundColor?: Color, - borderColor?: Color, - borderTopColor?: Color, - borderRightColor?: Color, - borderBottomColor?: Color, - borderLeftColor?: Color, - borderRadius?: number, - borderTopLeftRadius?: number, - borderTopRightRadius?: number, - borderBottomLeftRadius?: number, - borderBottomRightRadius?: number, - borderStyle?: 'solid' | 'dotted' | 'dashed', - opacity?: number, + shadowColor?: Color; + shadowOffset?: { width?: number, height?: number }; + shadowOpacity?: number; + shadowRadius?: number; + width?: number; + height?: number; + top?: number; + left?: number; + right?: number; + bottom?: number; + minWidth?: number; + maxWidth?: number; + minHeight?: number; + maxHeight?: number; + margin?: number; + marginVertical?: number; + marginHorizontal?: number; + marginTop?: number; + marginBottom?: number; + marginLeft?: number; + marginRight?: number; + padding?: number; + paddingVertical?: number; + paddingHorizontal?: number; + paddingTop?: number; + paddingBottom?: number; + paddingLeft?: number; + paddingRight?: number; + borderWidth?: number; + borderTopWidth?: number; + borderRightWidth?: number; + borderBottomWidth?: number; + borderLeftWidth?: number; + position?: 'absolute' | 'relative'; + flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse'; + flexWrap?: 'wrap' | 'nowrap'; + justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around'; + alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch'; + alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch'; + overflow?: 'visible' | 'hidden' | 'scroll'; + flex?: number; + flexGrow?: number; + flexShrink?: number; + flexBasis?: number; + aspectRatio?: number; + zIndex?: number; + backfaceVisibility?: 'visible' | 'hidden'; + backgroundColor?: Color; + borderColor?: Color; + borderTopColor?: Color; + borderRightColor?: Color; + borderBottomColor?: Color; + borderLeftColor?: Color; + borderRadius?: number; + borderTopLeftRadius?: number; + borderTopRightRadius?: number; + borderBottomLeftRadius?: number; + borderBottomRightRadius?: number; + borderStyle?: 'solid' | 'dotted' | 'dashed'; + opacity?: number; } /** @@ -134,101 +133,93 @@ export interface Style { * extends the `Style` interface */ export interface TextStyle extends Style { - color?: Color, - fontFamily?: string, - fontSize?: number, - fontStyle?: 'normal' | 'italic', - fontWeight?: string, - textDecorationLine?: 'none' | 'underline' | 'double' | 'line-through', - textShadowOffset?: { width: number, height: number }, - textShadowRadius?: number, - textShadowColor?: Color, - letterSpacing?: number, - lineHeight?: number, - textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify', - writingDirection?: 'auto' | 'ltr' | 'rtl', + color?: Color; + fontFamily?: string; + fontSize?: number; + fontStyle?: 'normal' | 'italic'; + fontWeight?: string; + textDecorationLine?: 'none' | 'underline' | 'double' | 'line-through'; + textShadowOffset?: { width: number, height: number }; + textShadowRadius?: number; + textShadowColor?: Color; + letterSpacing?: number; + lineHeight?: number; + textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify'; + writingDirection?: 'auto' | 'ltr' | 'rtl'; } // wanted to type these as classes because they are implemented as classes and typing them this // way gives you typings like `Artboard.prototype` - // Artboard export interface ArtboardProps { /** * The name to be displayed in the Sketch Layer List */ - name?: string, - children?: any, - style?: Style | StyleReference, + name?: string; + children?: any; + style?: Style | StyleReference; } /** * Wrapper for Sketch's Artboards. */ export class Artboard extends React.Component { } - // Image -type ImageSource = string | { src: string }; -type ResizeMode = 'contain' | 'cover' | 'stretch' | 'center' | 'repeat' | 'none'; -interface ImageProps { - children?: any, - source?: ImageSource, - style?: Style | StyleReference, - resizeMode: ResizeMode, +export type ImageSource = string | { src: string }; +export type ResizeMode = 'contain' | 'cover' | 'stretch' | 'center' | 'repeat' | 'none'; +export interface ImageProps { + children?: any; + source?: ImageSource; + style?: Style | StyleReference; + resizeMode: ResizeMode; } export class Image extends React.Component { } - // RedBox export interface RedBoxProps { /** A JavaScript Error object */ - error: Error, + error: Error; } /** - * A red box / 'red screen of death' error handler. Thanks to [commissure/redbox-react.][0] - * --SUGGESTION: can you give a screenshot of what this looks like? - * - * [0]: https://github.com/commissure/redbox-react + * A red box / 'red screen of death' error handler. Thanks to + * [commissure/redbox-react.](https://github.com/commissure/redbox-react) */ export class RedBox extends React.Component { } - // Text export interface TextProps { - name?: string, - children?: string, - style?: TextStyle | StyleReference, + name?: string; + children?: string; + style?: TextStyle | StyleReference; } /** Text primitives */ export class Text extends React.Component { } - // View export interface ViewProps { - name?: string, - children?: any, - style?: Style | StyleReference, + name?: string; + children?: any; + style?: Style | StyleReference; } /** View primitives */ export class View extends React.Component { } - export const StyleSheet: { - hairlineWidth: 1, - absoluteFill: StyleReference, + hairlineWidth: 1; + absoluteFill: StyleReference; /** * Create an optimized `StyleSheet` reference from a style object. */ create: (t: T) => { [P in keyof T]: StyleReference - }, - /** + }; + /** * Flatten an array of style objects into one aggregated object, or look up the definition for a * registered stylesheet. */ flatten: ( - input: (Style | TextStyle | StyleReference)[] | StyleReference | undefined | Style + input: Array