vhad/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/gosticks/DefinitelyTyped.git synced 2026-10-04 06:47:03 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[react-sketchapp] Add types for Document and Page (#30627)

Browse Source 
* Add types for Document and Page in react-sketchapp

* Updated version number in react-sketchapp
This commit is contained in:
Sascha Zarhuber
2018-11-18 10:55:18 -08:00
committed by Pranav Senthilnathan
parent 71abbf7c6d
commit 929dcd4579
2 changed files with 115 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
types/react-sketchapp/index.d.ts
Vendored
+75 -28
View File
@@ -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;
};
types/react-sketchapp/react-sketchapp-tests.tsx
+40 -14
View File
@@ -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;