run through linter

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 <https://github.com/ricokahler>
 // 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<ArtboardProps, any> { }
 
-
 // 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<ImageProps, any> { }
 
-
 // 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<RedBoxProps, any> { }
 
-
 // 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<TextProps, any> { }
 
-
 // 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<ViewProps, any> { }
 
-
 export const StyleSheet: {
-    hairlineWidth: 1,
-    absoluteFill: StyleReference,
+    hairlineWidth: 1;
+    absoluteFill: StyleReference;
     /**
      * Create an optimized `StyleSheet` reference from a style object.
      */
     create: <T extends { [key: string]: Style | TextStyle }>(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<Style | TextStyle | StyleReference> | StyleReference | undefined | Style
     ) => Style | TextStyle, // returns the expanded style or expanded style reference which conforms
     // to the `Style | TextStyle` interface
     /**
@@ -247,7 +238,7 @@ export const TextStyles: {
      */
     create: (
         options: { context: SketchContext, clearExistingStyle?: boolean },
-        styles: { [key: string]: TextStyle }
+        styles: { [key: string]: TextStyle },
     ) => any,
     /**
      * Find a stored native Sketch style object for a given JavaScript style object. You probably
@@ -268,7 +259,6 @@ export const TextStyles: {
     clear: () => void,
 };
 
-
 // Symbols
 /**
  * Returns a Sketch symbol given a node and an optional name.
@@ -283,6 +273,5 @@ export function makeSymbol<P>(
 
 /**
  * Injects the symbols into Sketch's symbol page. **Call this before rendering.**
- * @param context 
  */
-export function injectSymbols(context: SketchContext): void;
+export function injectSymbols(context: SketchContext): void;

types/react-sketchapp/react-sketchapp-tests.tsx

@@ -1,4 +1,4 @@
-import { Artboard, View, Text, StyleSheet, TextStyles, render, renderToJSON } from './index';
+import { Artboard, View, Text, StyleSheet, TextStyles, render, renderToJSON } from 'react-sketchapp';
 
 // the styles object should be a mapped typed mapping the keys of the object literal to numbers
 const styles = StyleSheet.create({
@@ -19,13 +19,13 @@ const Document = () => <Artboard name="some artboard name" style={{ backgroundCo
   </View>
   <View style={styles.red}>
   </View>
-</Artboard>
+</Artboard>;
 
 render(<Document />);
 renderToJSON(<Document />);
 
 // Artboard is typed with a class so the prototype should be typed too (not very useful though)
-Artboard.prototype.componentDidMount
+Artboard.prototype.componentDidMount;
 
 // context is a global but conflicts with others in this library
 // TODO: currently this interface returns any but it looks like this method produces a side-affect
@@ -38,4 +38,4 @@ TextStyles.create(context as any, {
     fontSize: 16 * 1.618,
     fontWeight: 'bold',
   }
-});
+});

types/react-sketchapp/tsconfig.json

@@ -1,11 +1,21 @@
 {
     "compilerOptions": {
         "target": "es2017",
-        "module": "es2015",
+        "module": "commonjs",
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "baseUrl": "../",
         "jsx": "preserve",
-        "strict": true,
         "typeRoots": [
             "../"
-        ]
+        ],
+        "lib": [
+            "es2015"
+        ],
+        "types": [],
+        "noImplicitAny": true,
+        "strictNullChecks": true,
+        "noImplicitThis": true,
+        "strictFunctionTypes": true
     }
 }