feat(react-sketchapp): refactored children types, fixed minor bugs

types/react-sketchapp/index.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for react-sketchapp 0.15
+// Type definitions for react-sketchapp 0.16
 // Project: https://github.com/airbnb/react-sketchapp
 // Definitions by: Rico Kahler <https://github.com/ricokahler>
 //                 DomiR <https://github.com/DomiR>
@@ -60,6 +60,30 @@ export function renderToJSON(element: JSX.Element): any;
 // https://github.com/airbnb/react-sketchapp/blob/v0.12.1/src/types.js#L59
 export type Color = string | number;
 
+/**
+ * Additional prop type interfaces
+ */
+export interface ResizingConstraintPropTypes {
+    top?: boolean;
+    right?: boolean;
+    bottom?: boolean;
+    left?: boolean;
+    fixedHeight?: boolean;
+    fixedWidth?: boolean;
+}
+
+export interface ShadowsPropTypes {
+    shadowColor?: string | number;
+    shadowOffset?: {
+      width?: number;
+      height?: number;
+    };
+    shadowOpacity?: number;
+    shadowRadius?: number;
+    shadowSpread?: number;
+    shadowInner?: boolean;
+}
+
 /**
  * The [`StyleSheet` api uses numbers as IDs][0] to pull registered styles. The component props
  * can actually take either a `Style` or a `StyleReference` (where the `StyleReference` is given
@@ -163,7 +187,7 @@ export interface TextStyle extends Style {
  * DocumentProps, a Document does not take any props but children
  */
 export interface DocumentProps {
-    children?: any;
+    children?: React.ReactElement<PageProps, any>[] | React.ReactElement<PageProps, any>;
 }
 
 /**
@@ -177,7 +201,7 @@ export class Document extends React.Component<DocumentProps, any> {}
  */
 export interface PageProps {
     name?: string;
-    children?: any;
+    children?: React.ReactNode[] | React.ReactNode;
 }
 
 /**
@@ -195,7 +219,7 @@ export interface ArtboardProps {
      * The name to be displayed in the Sketch Layer List
      */
     name?: string;
-    children?: any;
+    children?: React.ReactNode[] | React.ReactNode;
     style?: Style | StyleReference;
 }
 /**
@@ -213,7 +237,7 @@ export type ResizeMode =
     | 'repeat'
     | 'none';
 export interface ImageProps {
-    children?: any;
+    children?: React.ReactNode[] | React.ReactNode;
     source?: ImageSource;
     style?: Style | StyleReference;
     resizeMode: ResizeMode;
@@ -243,8 +267,10 @@ export class Text extends React.Component<TextProps, any> {}
 // View
 export interface ViewProps {
     name?: string;
-    children?: React.ReactChild[] | React.ReactChild;
+    children?: React.ReactNode[] | React.ReactNode;
     style?: Style | StyleReference;
+    resizingConstraint?: ResizingConstraintPropTypes;
+    shadows?: ShadowsPropTypes[];
 }
 /** View primitives */
 export class View extends React.Component<ViewProps, any> {}

types/react-sketchapp/lib/components/Svg/ClipPath.d.ts

@@ -2,7 +2,7 @@ import React = require('react');
 
 export interface ClipPathProps {
     id: string;
-    children?: React.ReactChild[] | React.ReactChild;
+    children?: React.ReactNode[] | React.ReactNode;
 }
 
 export default class ClipPath extends React.Component<ClipPathProps> {}

types/react-sketchapp/lib/components/Svg/Defs.d.ts

@@ -1,7 +1,7 @@
 import React = require('react');
 
 export interface DefsProps {
-    children: React.ReactChild[] | React.ReactChild;
+    children: React.ReactNode[] | React.ReactNode;
 }
 
 export default class Defs extends React.Component<DefsProps> {}

types/react-sketchapp/lib/components/Svg/Image.d.ts

@@ -9,7 +9,7 @@ export interface ImageProps {
     height: NumberProp;
     href: string;
     preserveAspectRatio?: string;
-    children?: React.ReactChild[] | React.ReactChild;
+    children?: React.ReactNode[] | React.ReactNode;
 }
 
 export default class Image extends React.Component<ImageProps> {}

types/react-sketchapp/lib/components/Svg/LinearGradient.d.ts

@@ -9,7 +9,7 @@ export interface LinearGradientProps {
     y2: NumberProp;
     gradientUnits?: 'objectBoundingBox' | 'userSpaceOnUse';
     id?: string;
-    children?: React.ReactChild[] | React.ReactChild;
+    children?: React.ReactNode[] | React.ReactNode;
 }
 
 export default class LinearGradient extends React.Component<

types/react-sketchapp/lib/components/Svg/Pattern.d.ts

@@ -10,7 +10,7 @@ export interface PatternProps {
     patternTransform?: string;
     patternUnits?: 'userSpaceOnUse' | 'objectBoundingBox';
     patternContentUnits?: 'userSpaceOnUse' | 'objectBoundingBox';
-    children?: React.ReactChild[] | React.ReactChild;
+    children?: React.ReactNode[] | React.ReactNode;
 }
 
 export default class Pattern extends React.Component<PatternProps> {}

types/react-sketchapp/lib/components/Svg/RadialGradient.d.ts

@@ -12,7 +12,7 @@ export interface RadialGradientProps {
     r?: NumberProp;
     gradientUnits?: 'objectBoundingBox' | 'userSpaceOnUse';
     id: string;
-    children?: React.ReactChild[] | React.ReactChild;
+    children?: React.ReactNode[] | React.ReactNode;
 }
 
 export default class RadialGradient extends React.Component<

types/react-sketchapp/lib/components/Svg/Stop.d.ts

@@ -5,7 +5,7 @@ import { NumberProp } from './props';
 export interface StopProps {
     stopColor?: string;
     stopOpacity?: NumberProp;
-    children?: React.ReactChild[] | React.ReactChild;
+    children?: React.ReactNode[] | React.ReactNode;
 }
 
 export default class Stop extends React.Component<StopProps> {}

types/react-sketchapp/lib/components/Svg/Svg.d.ts

@@ -23,7 +23,6 @@ import TSpan, { TSpanProps } from './TSpan';
 import Use, { UseProps } from './Use';
 
 export interface SvgProps extends ViewProps {
-    className?: string;
     opacity?: string | number;
     width?: string | number;
     height?: string | number;

types/react-sketchapp/lib/components/Svg/Symbol.d.ts

@@ -4,7 +4,7 @@ export interface SymbolProps {
     id: string;
     viewBox?: string;
     preserveAspectRatio?: string;
-    children: React.ReactChild[] | React.ReactChild;
+    children: React.ReactNode[] | React.ReactNode;
 }
 
 export default class Symbol extends React.Component<SymbolProps> {}

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

@@ -19,7 +19,7 @@ import Rect from 'react-sketchapp/lib/components/Svg/Rect';
 // 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: '#FF0000',
     },
     flexRow: {
         flexDirection: 'row',
@@ -34,6 +34,24 @@ 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
+                name="some blue block"
+                style={{
+                alignItems: 'center',
+                backgroundColor: '#0000ff',
+                height: 128,
+                justifyContent: 'center',
+                width: 64,
+                }}
+            >
+                <Text
+                style={{
+                    color: '#fff',
+                }}
+                >
+                    Blue
+                </Text>
+            </View>
         </View>
         <View style={styles.red} />
     </Artboard>