fix missing deps (#464)

fix missing deps

Author: mathieudutour

.eslintrc

@@ -24,7 +24,8 @@
     "react/default-props-match-prop-types": 0,
     "jsx-a11y/label-has-for": 0,
     "no-mixed-operators": 0,
-    "import/no-cycle": 0
+    "import/no-cycle": 0,
+    "import/extensions": 0
   },
   "env": {
     "node": true,

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 This project adheres to [Semantic Versioning](http://semver.org/). Every release, along with the migration instructions, is documented on the Github [Releases](https://github.com/airbnb/react-sketchapp/releases) page.
 
+## Version 3.0.5
+
+- Fix missing dependency (#462)
+
 ## Version 3.0.4
 
 - Fix rendering images (#458)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-sketchapp",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "description": "A React renderer for Sketch.app",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -42,6 +42,7 @@
   },
   "dependencies": {
     "@lona/svg-model": "^1.0.1",
+    "@sketch-hq/sketch-file-format-ts": "^4.0.0",
     "airbnb-prop-types": "^2.15.0",
     "error-stack-parser": "^2.0.4",
     "invariant": "^2.2.2",
@@ -85,8 +86,6 @@
     ]
   },
   "devDependencies": {
-    "@sketch-hq/sketch-file-format": "^3.2.0",
-    "@sketch-hq/sketch-file-format-ts": "^3.0.0",
     "@skpm/babel-preset": "^0.2.1",
     "@skpm/test-runner": "^0.4.1",
     "@types/airbnb-prop-types": "^2.13.1",
@@ -97,34 +96,35 @@
     "@types/react": "^16.9.11",
     "@types/react-test-renderer": "^16.9.1",
     "@types/seedrandom": "^2.4.28",
-    "@typescript-eslint/eslint-plugin": "^2.7.0",
-    "@typescript-eslint/parser": "^2.7.0",
-    "eslint": "^6.6.0",
+    "@typescript-eslint/eslint-plugin": "^2.11.0",
+    "@typescript-eslint/parser": "^2.11.0",
+    "eslint": "^6.7.2",
     "eslint-config-airbnb": "^18.0.1",
-    "eslint-config-prettier": "^6.6.0",
+    "eslint-config-prettier": "^6.7.0",
     "eslint-config-sketch": "^0.2.4",
-    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-import": "^2.19.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-react": "^7.16.0",
+    "eslint-plugin-react": "^7.17.0",
     "eslint-plugin-react-hooks": "^1.7.0",
     "gitbook-cli": "^2.3.0",
     "gitbook-plugin-anchorjs": "^2.1.0",
     "gitbook-plugin-codeblock-disable-glossary": "0.0.1",
     "gitbook-plugin-edit-link": "^2.0.2",
     "gitbook-plugin-github": "^2.0.0",
     "gitbook-plugin-prism": "^2.3.0",
+    "jest": "^24.9.0",
     "jest-cli": "^24.9.0",
-    "lint-staged": "^9.4.3",
+    "lint-staged": "^9.5.0",
     "npm-run-all": "^4.1.5",
     "pre-commit": "^1.2.2",
     "prettier": "^1.19.1",
     "react": "^16.12.0",
     "react-test-renderer": "^16.12.0",
     "sketchapp-json-flow-types": "^0.3.6",
     "trash-cli": "^3.0.0",
-    "ts-jest": "^24.1.0",
-    "typescript": "^3.7.2"
+    "ts-jest": "^24.2.0",
+    "typescript": "^3.7.3"
   },
   "skpm": {
     "test": {

src/jsonUtils/models.ts

@@ -139,13 +139,13 @@ export const makeColorFill = (cssColor: Color): FileFormat.Fill => ({
 });
 
 export const makeImageFill = (
-  image: FileFormat.ImageFileRef,
+  image: FileFormat.ImageDataRef,
   patternFillType: FileFormat.PatternFillType = FileFormat.PatternFillType.Fill,
 ): FileFormat.Fill => ({
   _class: 'fill',
   isEnabled: true,
-  fillType: 4, // FileFormat.FillType.Pattern,
-  // @ts-ignore
+  fillType: FileFormat.FillType.Pattern,
+  color: makeColorFromCSS('white'),
   image,
   noiseIndex: 0,
   noiseIntensity: 0,
@@ -172,7 +172,6 @@ export const makeRect = (x: number, y: number, width: number, height: number): F
 export const makeJSONDataReference = (image: {
   data: string;
   sha1: string;
-  // @ts-ignore
 }): FileFormat.ImageDataRef => ({
   _class: 'MSJSONOriginalDataReference',
   _ref: `images/${generateID()}`,
@@ -189,11 +188,12 @@ export const makeJSONDataReference = (image: {
 export const makeOverride = (
   path: string,
   type: 'symbolID' | 'stringValue' | 'layerStyle' | 'textStyle' | 'flowDestination' | 'image',
-  value: string | FileFormat.ImageFileRef,
+  value: string | FileFormat.ImageDataRef,
 ): FileFormat.OverrideValue => ({
   _class: 'overrideValue',
   do_objectID: generateID(),
   overrideName: `${path}_${type}`,
+  // @ts-ignore https://github.com/sketch-hq/sketch-file-format-ts/issues/9
   value,
 });
 

src/jsonUtils/style.ts

@@ -64,8 +64,6 @@ export const makeShadow = (
       : 'textShadowRadius' in style && style.textShadowRadius !== undefined
       ? style.textShadowRadius
       : 1;
-  const _class: 'innerShadow' | 'shadow' =
-    style.shadowInner !== undefined ? 'innerShadow' : 'shadow';
   const spread =
     style.shadowSpread !== undefined
       ? style.shadowSpread
@@ -76,7 +74,6 @@ export const makeShadow = (
     style.shadowOffset || ('textShadowOffset' in style && style.textShadowOffset) || {};
 
   const commonProps = {
-    _class,
     isEnabled: true,
     blurRadius: radius,
     color: makeColorFromCSS(color, opacity),
@@ -88,11 +85,17 @@ export const makeShadow = (
     offsetX,
     offsetY,
     spread,
-  };
+  } as const;
+
+  if (style.shadowInner) {
+    return {
+      _class: 'innerShadow',
+      ...commonProps,
+    };
+  }
 
   return {
-    // @ts-ignore
-    _class,
+    _class: 'shadow',
     ...commonProps,
   };
 };
@@ -146,19 +149,19 @@ export const makeStyle = (
   if (hasAnyDefined(style, SHADOW_STYLES)) {
     const shadow = [makeShadow(style)];
     if (style.shadowInner) {
-      json.innerShadows = shadow;
+      json.innerShadows = shadow as FileFormat.InnerShadow[];
     } else {
-      json.shadows = shadow;
+      json.shadows = shadow as FileFormat.Shadow[];
     }
   }
 
   if (shadowsProp) {
     shadowsProp.map(shadowStyle => {
       const shadow = makeShadow(shadowStyle);
       if (shadowStyle.shadowInner) {
-        json.innerShadows.push(shadow);
+        json.innerShadows.push(shadow as FileFormat.InnerShadow);
       } else {
-        json.shadows.push(shadow);
+        json.shadows.push(shadow as FileFormat.Shadow);
       }
       return shadowStyle;
     });

src/renderers/SymbolInstanceRenderer.ts

@@ -21,7 +21,6 @@ const findInGroup = (layer: FileFormat.AnyGroup, type: string): FileFormat.AnyLa
   layer && layer.layers && layer.layers.find(l => l._class === type);
 
 const hasImageFill = (layer: FileFormat.AnyLayer): boolean =>
-  // @ts-ignore
   !!(layer.style && layer.style.fills && layer.style.fills.some(f => f.image));
 
 const removeDuplicateOverrides = (overrides: Array<Override>): Array<Override> => {

src/renderers/TextRenderer.ts

@@ -36,7 +36,6 @@ export default class TextRenderer extends SketchRenderer {
       if (!layer.style) {
         layer.style = resolvedTextStyle.sketchStyle;
       }
-      // @ts-ignore
       layer.sharedStyleID = resolvedTextStyle.sharedObjectID;
     }