[react-sketchapp] excluded types into own file, added types for render.js (#38816)

* feat(react-sketchapp): excluded and enhanced types * fix(react-sketchapp): fixed errors * chore(react-sketchapp): version bump * refactor(react-sketchapp): moved types file to same level as index and render * fix(react-sketchapp): fixed function param
2025-10-16 12:05:41 +00:00 · 2019-10-03 19:00:08 +02:00 · 2019-10-03 19:00:08 +02:00 · 48d7231956
commit 48d7231956
parent 631db5d025
3 changed files with 245 additions and 96 deletions
--- a/types/react-sketchapp/index.d.ts
+++ b/types/react-sketchapp/index.d.ts
@ -1,4 +1,4 @@
-// Type definitions for react-sketchapp 0.16
+// Type definitions for react-sketchapp 3.0
 // Project: https://github.com/airbnb/react-sketchapp
 // Definitions by: Rico Kahler <https://github.com/ricokahler>
 //                 DomiR <https://github.com/DomiR>
@ -7,83 +7,12 @@
 // TypeScript Version: 2.8

 import * as React from 'react';
+import { Color, ResizeConstraints, SketchContext, SketchShadow } from './types';

 declare global {
    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 SketchAssetCollection {
-    colors: () => any[];
-    gradients: () => any[];
-}
-export interface SketchSharedStyleContainer {
-    setObjects: (objects: any[]) => void;
-    addSharedStyleWithName_firstInstance: (name: string, ins: any) => void;
-}
-export interface SketchDocumentData {
-    layerStyles: () => void;
-    layerTextStyles: () => SketchSharedStyleContainer;
-    layerSymbols: () => void;
-    assets: () => SketchAssetCollection;
-}
-export interface SketchDocument {
-    documentData: () => SketchDocumentData;
-    pages: () => SketchPage[];
-    addBlankPage: () => SketchPage;
-    currentPage: () => SketchPage;
-}
-export interface SketchContext {
-    document: SketchDocument;
-}
-
-/**
- * Returns the top-level rendered Sketch object or an array of Sketch objects if you use
- * components.
- * @param element Top-level React component that defines your Sketch document.
- * @param container The element to render into - will be replaced. Should either be a Sketch Group
- * or Page Object.
- * @return The top-most rendered native Sketch layer.
- */
-export function render(element: JSX.Element, container?: any): any;
-
-/**
- * Returns a Sketch JSON object for further consumption - doesn't add to the page.
- * @return The top-most Sketch layer as JSON.
- */
-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
@ -132,12 +61,7 @@ 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';
@ -229,13 +153,7 @@ 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?: React.ReactNode[] | React.ReactNode;
    source?: ImageSource;
@ -269,8 +187,8 @@ export interface ViewProps {
    name?: string;
    children?: React.ReactNode[] | React.ReactNode;
    style?: Style | StyleReference;
-    resizingConstraint?: ResizingConstraintPropTypes;
-    shadows?: ShadowsPropTypes[];
+    resizingConstraint?: ResizeConstraints;
+    shadows?: SketchShadow[];
 }
 /** View primitives */
 export class View extends React.Component<ViewProps, any> {}
@ -281,19 +199,13 @@ 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,
+        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
    /**
@ -356,5 +268,8 @@ export const Platform: {
    select: (obj: any) => any;
 };

+// render functions from render.d.ts
+export { render, renderToJSON } from './render';
+
 // Svg, similar to https://github.com/react-native-community/react-native-svg
 export { default as Svg, SvgProps } from './lib/components/Svg';
--- a/types/react-sketchapp/render.d.ts
+++ b/types/react-sketchapp/render.d.ts
@ -0,0 +1,8 @@
+import * as React from 'react';
+import { SketchLayer, WrappedSketchLayer } from './types';
+
+export function renderToJSON(element: JSX.Element): object;
+
+export function renderLayers(layers: any[], container: SketchLayer): SketchLayer;
+
+export function render(element: JSX.Element, container?: SketchLayer | WrappedSketchLayer): SketchLayer | SketchLayer[];
--- a/types/react-sketchapp/types.d.ts
+++ b/types/react-sketchapp/types.d.ts
@ -0,0 +1,226 @@
+// Sketchy things
+export type SketchLayer = any;
+
+export interface WrappedSketchLayer {
+    sketchObject: SketchLayer;
+}
+
+export interface MSArray<T> {
+    [key: number]: T;
+    length: number;
+}
+
+export type NSString = any;
+
+export interface SketchPage {
+    name: () => NSString;
+    setName: (name: string) => void;
+    layers: () => SketchLayer[];
+}
+
+export type SketchStyle = any;
+
+export interface SketchSharedStyleContainer {
+    setObjects: (objects: SketchStyle[]) => void;
+    addSharedStyleWithName_firstInstance: (name: string, ins: SketchStyle) => any;
+}
+
+export type MSGradient = any;
+export type MSColor = any;
+
+export interface SketchAssetCollection {
+    colors: () => MSColor[];
+    gradients: () => MSGradient[];
+}
+
+export interface SketchDocumentData {
+    assets: () => SketchAssetCollection;
+    layerStyles: () => void;
+    layerTextStyles: () => SketchSharedStyleContainer;
+    layerSymbols: () => void;
+    removePageAtIndex: (index: number) => void;
+    addBlankPage: () => SketchPage;
+    currentPage: () => SketchPage;
+    setCurrentPage: (page: SketchPage) => void;
+    pages: () => MSArray<SketchPage>;
+    symbolsPageOrCreateIfNecessary: () => SketchPage;
+}
+
+export interface SketchDocument {
+    documentData: () => SketchDocumentData;
+    showMessage: (message: string) => void;
+}
+
+export interface WrappedSketchDocument {
+    sketchObject: SketchDocument | SketchDocumentData;
+}
+
+export interface SketchContext {
+    document: SketchDocument;
+}
+
+// Reacty things
+
+export interface Size {
+    width: number;
+    height: number;
+}
+
+// undefined: max content
+// exactly: fill available space
+// at-most: fit content
+export type MeasureMode = 'undefined' | 'exactly' | 'at-most';
+
+export type Color = string | number;
+
+export type BorderStyle = 'solid' | 'dotted' | 'dashed';
+
+export type Overflow = 'visible' | 'hidden' | 'scroll';
+
+export interface LayoutInfo {
+    width: number;
+    height: number;
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+    direction?: 'ltr' | 'rtl';
+}
+
+export interface ViewStyle {
+    color?: Color;
+    shadowColor?: Color;
+    shadowInner?: boolean;
+    shadowSpread?: number;
+    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;
+    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?: Overflow;
+    overflowX?: Overflow;
+    overflowY?: Overflow;
+    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?: BorderStyle;
+    borderTopStyle?: BorderStyle;
+    borderRightStyle?: BorderStyle;
+    borderBottomStyle?: BorderStyle;
+    borderLeftStyle?: BorderStyle;
+    borderWidth?: number;
+    borderTopWidth?: number;
+    borderRightWidth?: number;
+    borderBottomWidth?: number;
+    borderLeftWidth?: number;
+    opacity?: number;
+    transform?: string;
+    transformOrigin?: string;
+}
+
+export interface TextStyle {
+    color?: Color;
+    fontFamily?: string;
+    fontSize?: number;
+    fontStyle?: 'normal' | 'italic';
+    fontWeight?: string;
+    textDecoration?: string;
+    textShadowOpacity?: number;
+    textShadowSpread?: number;
+    textShadowOffset?: { width: number; height: number };
+    textShadowRadius?: number;
+    textShadowColor?: Color;
+    textTransform?: 'uppercase' | 'lowercase';
+    letterSpacing?: number;
+    lineHeight?: number;
+    textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify';
+    paragraphSpacing?: number;
+    writingDirection?: 'auto' | 'ltr' | 'rtl';
+}
+
+export interface TextNode {
+    content: string;
+    textStyles: TextStyle;
+}
+
+export type TextNodes = TextNode[];
+
+export interface TreeNode {
+    type: string;
+    style: ViewStyle;
+    textStyle: TextStyle;
+    layout: LayoutInfo;
+    props: any;
+    children?: TreeNode[];
+}
+
+export type LayerCreator = (
+    style: ViewStyle,
+    layout: LayoutInfo,
+    textStyle: TextStyle,
+    props: any,
+    value?: string,
+) => SketchLayer;
+
+export interface ResizeConstraints {
+    top: boolean;
+    right: boolean;
+    bottom: boolean;
+    left: boolean;
+    fixedHeight: boolean;
+    fixedWidth: boolean;
+}
+
+export interface SketchShadow {
+    shadowColor: Color;
+    shadowOffset: { width: number; height: number };
+    shadowSpread: number;
+    shadowOpacity: number;
+    shadowRadius: number;
+    shadowInner: boolean;
+}
+
+export type SketchShadows = SketchShadow[];