From 929dcd4579421cc2cb11f3085911e694268f8c2b Mon Sep 17 00:00:00 2001
From: Sascha Zarhuber <saschazar21@users.noreply.github.com>
Date: Sun, 18 Nov 2018 19:55:18 +0100
Subject: [PATCH] [react-sketchapp] Add types for Document and Page (#30627)

* Add types for Document and Page in react-sketchapp

* Updated version number in react-sketchapp
---
 types/react-sketchapp/index.d.ts              | 103 +++++++++++++-----
 .../react-sketchapp/react-sketchapp-tests.tsx |  54 ++++++---
 2 files changed, 115 insertions(+), 42 deletions(-)

diff --git a/types/react-sketchapp/index.d.ts b/types/react-sketchapp/index.d.ts
index 6152bd7b07..096a6c6da3 100644
--- a/types/react-sketchapp/index.d.ts
+++ b/types/react-sketchapp/index.d.ts
@@ -1,7 +1,8 @@
-// Type definitions for react-sketchapp 0.12
+// Type definitions for react-sketchapp 0.13
 // Project: https://github.com/airbnb/react-sketchapp
 // Definitions by: Rico Kahler <https://github.com/ricokahler>
 //                 DomiR <https://github.com/DomiR>
+//                 Sascha Zarhuber <https://github.com/saschazar21>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
@@ -13,7 +14,9 @@ declare global {
 
 // 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[];
@@ -34,7 +37,9 @@ export interface SketchDocument {
     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
@@ -68,7 +73,7 @@ export type StyleReference = number;
  */
 export interface Style {
     shadowColor?: Color;
-    shadowOffset?: { width?: number, height?: number };
+    shadowOffset?: { width?: number; height?: number };
     shadowOpacity?: number;
     shadowRadius?: number;
     width?: number;
@@ -103,7 +108,12 @@ export interface Style {
     position?: 'absolute' | 'relative';
     flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
     flexWrap?: 'wrap' | 'nowrap';
-    justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
+    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';
@@ -140,7 +150,7 @@ export interface TextStyle extends Style {
     fontStyle?: 'normal' | 'italic';
     fontWeight?: string;
     textDecorationLine?: 'none' | 'underline' | 'double' | 'line-through';
-    textShadowOffset?: { width: number, height: number };
+    textShadowOffset?: { width: number; height: number };
     textShadowRadius?: number;
     textShadowColor?: Color;
     letterSpacing?: number;
@@ -149,6 +159,33 @@ export interface TextStyle extends Style {
     writingDirection?: 'auto' | 'ltr' | 'rtl';
 }
 
+/**
+ * DocumentProps, a Document does not take any props but children
+ */
+export interface DocumentProps {
+    children?: any;
+}
+
+/**
+ * Document, a wrapper for a Sketch document, may contain Pages as children
+ * http://airbnb.io/react-sketchapp/docs/API.html#document
+ */
+export class Document extends React.Component<DocumentProps, any> {}
+
+/**
+ * PageProps, a Page takes optionally a name and children as props
+ */
+export interface PageProps {
+    name?: string;
+    children?: any;
+}
+
+/**
+ * Page, a wrapper for a Sketch page, may contain Artboards as children
+ * http://airbnb.io/react-sketchapp/docs/API.html#page
+ */
+export class Page extends React.Component<PageProps, any> {}
+
 // wanted to type these as classes because they are implemented as classes and typing them this
 // way gives you typings like `Artboard.prototype`
 
@@ -164,18 +201,24 @@ export interface ArtboardProps {
 /**
  * Wrapper for Sketch's Artboards.
  */
-export class Artboard extends React.Component<ArtboardProps, any> { }
+export class Artboard extends React.Component<ArtboardProps, any> {}
 
 // Image
 export type ImageSource = string | { src: string };
-export type ResizeMode = 'contain' | 'cover' | 'stretch' | 'center' | 'repeat' | 'none';
+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> { }
+export class Image extends React.Component<ImageProps, any> {}
 
 // RedBox
 export interface RedBoxProps {
@@ -186,7 +229,7 @@ export interface RedBoxProps {
  * 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> { }
+export class RedBox extends React.Component<RedBoxProps, any> {}
 
 // Text
 export interface TextProps {
@@ -195,7 +238,7 @@ export interface TextProps {
     style?: TextStyle | StyleReference;
 }
 /** Text primitives */
-export class Text extends React.Component<TextProps, any> { }
+export class Text extends React.Component<TextProps, any> {}
 
 // View
 export interface ViewProps {
@@ -204,7 +247,7 @@ export interface ViewProps {
     style?: Style | StyleReference;
 }
 /** View primitives */
-export class View extends React.Component<ViewProps, any> { }
+export class View extends React.Component<ViewProps, any> {}
 
 export const StyleSheet: {
     hairlineWidth: 1;
@@ -212,21 +255,25 @@ export const StyleSheet: {
     /**
      * Create an optimized `StyleSheet` reference from a style object.
      */
-    create: <T extends { [key: string]: Style | TextStyle }>(t: T) => {
-        [P in keyof T]: StyleReference
-    };
+    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: Array<Style | TextStyle | StyleReference> | StyleReference | undefined | Style
-    ) => Style | TextStyle, // returns the expanded style or expanded style reference which conforms
+        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
     /**
      * resolve one style
      */
-    resolve: (style: Style | TextStyle) => { style: Style | TextStyle }
+    resolve: (style: Style | TextStyle) => { style: Style | TextStyle };
 };
 
 /**
@@ -238,26 +285,26 @@ export const TextStyles: {
      * The primary interface to TextStyles. Call this before rendering.
      */
     create: (
-        options: { context: SketchContext, clearExistingStyles?: boolean },
-        styles: { [key: string]: TextStyle },
-    ) => any,
+        options: { context: SketchContext; clearExistingStyles?: boolean },
+        styles: { [key: string]: TextStyle }
+    ) => any;
     /**
      * Find a stored native Sketch style object for a given JavaScript style object. You probably
      * don't need to use this.
      */
-    resolve: (style: TextStyle) => any,
+    resolve: (style: TextStyle) => any;
     /**
      * Find a stored style by name.
      */
-    get: (name: string) => TextStyle | undefined,
+    get: (name: string) => TextStyle | undefined;
     /**
      * Find all of the registered styles. You probably don't need to use this.
      */
-    styles: { [key: string]: TextStyle | undefined },
+    styles: { [key: string]: TextStyle | undefined };
     /**
      * Reset the registered styles.
      */
-    clear: () => void,
+    clear: () => void;
 };
 
 // Symbols
@@ -278,7 +325,7 @@ export function makeSymbol<P>(
 export function injectSymbols(context: SketchContext): void;
 
 export const Platform: {
-    OS: 'sketch',
-    Version: 1,
-    select: (obj: any) => any
+    OS: 'sketch';
+    Version: 1;
+    select: (obj: any) => any;
 };
diff --git a/types/react-sketchapp/react-sketchapp-tests.tsx b/types/react-sketchapp/react-sketchapp-tests.tsx
index a3e339c625..3eef10db9d 100644
--- a/types/react-sketchapp/react-sketchapp-tests.tsx
+++ b/types/react-sketchapp/react-sketchapp-tests.tsx
@@ -1,30 +1,56 @@
 import {
-    Artboard, View, Text, StyleSheet, TextStyles, render, renderToJSON, Platform
+    Artboard,
+    Document,
+    Page,
+    View,
+    Text,
+    StyleSheet,
+    TextStyles,
+    render,
+    renderToJSON,
+    Platform,
 } from 'react-sketchapp';
 
 // the styles object should be a mapped typed mapping the keys of the object literal to numbers
 const styles = StyleSheet.create({
     red: {
-        backgroundColor: '#FF00000'
+        backgroundColor: '#FF00000',
     },
     flexRow: {
-        flexDirection: 'row'
-    }
+        flexDirection: 'row',
+    },
 });
 
 // style references are numbers
 const styleReference = styles.red;
 
-const Document = () => <Artboard name="some artboard name" style={{ backgroundColor: '#FF0000' }} >
-    <View name="some view name" style={{ backgroundColor: '#FF0000' }} >
-        <Text name="some text name">text must be a string</Text>
-    </View>
-    <View style={styles.red}>
-    </View>
-</Artboard>;
+// An Artboard
+const SketchArtboard = () => (
+    <Artboard name="some artboard name" style={styleReference}>
+        <View name="some view name" style={styleReference}>
+            <Text name="some text name">text must be a string</Text>
+        </View>
+        <View style={styles.red} />
+    </Artboard>
+);
 
-render(<Document />);
-renderToJSON(<Document />);
+// A Page containing multiple Artboards
+const SketchPage = () => (
+    <Page name="some page name">
+        <SketchArtboard />
+        <SketchArtboard />
+    </Page>
+);
+
+// The Document containing a page
+const SketchDocument = () => (
+    <Document>
+        <SketchPage />
+    </Document>
+);
+
+render(<SketchDocument />);
+renderToJSON(<SketchDocument />);
 
 // Artboard is typed with a class so the prototype should be typed too (not very useful though)
 Artboard.prototype.componentDidMount;
@@ -38,7 +64,7 @@ TextStyles.create(context as any, {
     heading: {
         fontSize: 16 * 1.618,
         fontWeight: 'bold',
-    }
+    },
 });
 
 const shouldBeSketch = Platform.OS;