react-figma - npm Package Compare versions

Comparing version 0.20.0 to 0.21.0

components/component/createComponent.d.ts

@@ -5,4 +5,4 @@ import * as React from 'react';
 export declare const createComponent: () => {
-    Component: React.FunctionComponent<Pick<ComponentProps, "width" | "height" | "visible" | "opacity" | "blendMode" | "fillStyleId" | "fills" | "backgrounds" | "strokeStyleId" | "strokes" | "strokeWeight" | "strokeAlign" | "strokeCap" | "strokeJoin" | "dashPattern" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "name" | "children" | "layoutMode" | "layoutAlign" | "primaryAxisAlignItems" | "counterAxisAlignItems" | "style" | "cornerRadius" | "cornerSmoothing" | "isMask" | "effects" | "effectStyleId" | "topLeftRadius" | "topRightRadius" | "bottomLeftRadius" | "bottomRightRadius" | "locked" | "constraints" | "pluginData" | "sharedPluginData" | "onNodeId" | "relativeTransform" | "x" | "y" | "rotation" | "isWithoutConstraints" | "layoutGrow" | "exportSettings" | "exportAsyncSettings" | "exportAsyncCallback" | "onSelectionEnter" | "onSelectionLeave" | "onLayout" | "primaryAxisSizingMode" | "counterAxisSizingMode" | "horizontalPadding" | "verticalPadding" | "itemSpacing" | "clipsContent" | "guides" | "layoutGrids" | "gridStyleId" | "description" | "documentationLinks">>;
-    Instance: React.FunctionComponent<Pick<InstanceProps, "width" | "height" | "visible" | "opacity" | "blendMode" | "fillStyleId" | "backgrounds" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "name" | "children" | "layoutMode" | "layoutAlign" | "primaryAxisAlignItems" | "counterAxisAlignItems" | "style" | "isMask" | "effects" | "effectStyleId" | "locked" | "constraints" | "pluginData" | "sharedPluginData" | "onNodeId" | "relativeTransform" | "x" | "y" | "rotation" | "isWithoutConstraints" | "layoutGrow" | "exportSettings" | "exportAsyncSettings" | "exportAsyncCallback" | "onSelectionEnter" | "onSelectionLeave" | "onLayout" | "primaryAxisSizingMode" | "counterAxisSizingMode" | "horizontalPadding" | "verticalPadding" | "itemSpacing" | "overrides" | "detach">>;
+    Component: React.FunctionComponent<Pick<ComponentProps, "width" | "height" | "visible" | "opacity" | "blendMode" | "effectStyleId" | "fillStyleId" | "fills" | "backgrounds" | "strokeStyleId" | "strokes" | "strokeWeight" | "strokeAlign" | "strokeCap" | "strokeJoin" | "dashPattern" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "name" | "children" | "layoutMode" | "layoutAlign" | "primaryAxisAlignItems" | "counterAxisAlignItems" | "style" | "cornerRadius" | "cornerSmoothing" | "isMask" | "effects" | "topLeftRadius" | "topRightRadius" | "bottomLeftRadius" | "bottomRightRadius" | "locked" | "constraints" | "pluginData" | "sharedPluginData" | "onNodeId" | "relativeTransform" | "x" | "y" | "rotation" | "isWithoutConstraints" | "layoutGrow" | "exportSettings" | "exportAsyncSettings" | "exportAsyncCallback" | "onSelectionEnter" | "onSelectionLeave" | "onLayout" | "primaryAxisSizingMode" | "counterAxisSizingMode" | "horizontalPadding" | "verticalPadding" | "itemSpacing" | "clipsContent" | "guides" | "layoutGrids" | "gridStyleId" | "description" | "documentationLinks">>;
+    Instance: React.FunctionComponent<Pick<InstanceProps, "width" | "height" | "visible" | "opacity" | "blendMode" | "effectStyleId" | "fillStyleId" | "backgrounds" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "name" | "children" | "layoutMode" | "layoutAlign" | "primaryAxisAlignItems" | "counterAxisAlignItems" | "style" | "isMask" | "effects" | "locked" | "constraints" | "pluginData" | "sharedPluginData" | "onNodeId" | "relativeTransform" | "x" | "y" | "rotation" | "isWithoutConstraints" | "layoutGrow" | "exportSettings" | "exportAsyncSettings" | "exportAsyncCallback" | "onSelectionEnter" | "onSelectionLeave" | "onLayout" | "primaryAxisSizingMode" | "counterAxisSizingMode" | "horizontalPadding" | "verticalPadding" | "itemSpacing" | "overrides" | "detach">>;
 };

index.d.ts

@@ -32,1 +32,2 @@ export { render } from './renderer';
 export { useTextStyle } from './localStyles/useTextStyle';
+export { useEffectStyle } from './localStyles/useEffectStyle';

index.js

@@ -66,2 +66,4 @@ "use strict";
 exports.useTextStyle = useTextStyle_1.useTextStyle;
+var useEffectStyle_1 = require("./localStyles/useEffectStyle");
+exports.useEffectStyle = useEffectStyle_1.useEffectStyle;
 //# sourceMappingURL=index.js.map

mixins/blendMixin.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var propsAssign_1 = require("../helpers/propsAssign");
-exports.blendMixin = propsAssign_1.propsAssign(['blendMode', 'effectStyleId', 'effects', 'isMask', 'opacity'], {
+exports.blendMixin = propsAssign_1.propsAssign(['blendMode', 'effects', 'isMask', 'opacity', 'effectStyleId'], {
     blendMode: 'NORMAL',
@@ -6,0 +6,0 @@ effects: [],

package.json

 {
   "name": "react-figma",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "Render React components to Figma",
@@ -5,0 +5,0 @@ "scripts": {

README.md

@@ -197,2 +197,3 @@ # React Figma
     <td align="center"><a href="https://github.com/mrkenneh"><img src="https://avatars.githubusercontent.com/u/96268806?v=4?s=100" width="100px;" alt=""/><br /><sub><b>mrkenneh</b></sub></a><br /><a href="https://github.com/react-figma/react-figma/commits?author=mrkenneh" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/annuhdo"><img src="https://avatars.githubusercontent.com/u/6846913?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Anna Do</b></sub></a><br /><a href="https://github.com/react-figma/react-figma/commits?author=annuhdo" title="Code">💻</a></td>
   </tr>
@@ -199,0 +200,0 @@ </table>

rpc.d.ts

@@ -43,2 +43,6 @@ /// <reference types="plugin-typings" />
     }) => Promise<string>;
+    createOrUpdateEffectStyle: (properties: {
+        effects: symbol | void | readonly Effect[];
+        params: CommonStyleProps;
+    }) => Promise<string>;
 }>;
@@ -45,0 +49,0 @@ export declare const setupMainThread: () => void;

rpc.js

@@ -264,2 +264,18 @@ "use strict";
         return textStyle.id;
+    },
+    createOrUpdateEffectStyle: function (properties) {
+        var effects = properties.effects, params = properties.params;
+        var name = params.name, id = params.id, description = params.description;
+        var foundEffectStyle = figma.getLocalEffectStyles().find(function (style) { return style.name === name || style.id === id; });
+        var effectStyle = foundEffectStyle || figma.createEffectStyle();
+        if (name) {
+            effectStyle.name = name;
+        }
+        if (description) {
+            effectStyle.description = description;
+        }
+        if (effects) {
+            effectStyle.effects = effects;
+        }
+        return effectStyle.id;
     }
@@ -266,0 +282,0 @@ }, {

styleTransformers/transformBlendProperties.d.ts

@@ -11,2 +11,4 @@ import { BlendProps, Color } from '../types';
     shadowRadius?: number;
+    shadowSpread?: number;
+    shadowType?: 'DROP_SHADOW' | 'INNER_SHADOW';
 }
@@ -17,3 +19,6 @@ export interface BlendStyleProperties extends ShadowProperties {
     shadows?: ShadowProperties[];
+    effectStyleId?: string;
 }
-export declare const transformBlendProperties: (styles?: Partial<BlendStyleProperties>) => BlendProps;
+export declare const transformBlendProperties: (styles?: Partial<BlendStyleProperties> & {
+    effectStyleId?: string;
+}) => BlendProps;

styleTransformers/transformBlendProperties.js

 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var transformShadowToEffect_1 = require("./transformShadowToEffect");
-var transofrmBlendMode = function (cssBlendMode) {
+var transformBlendMode = function (cssBlendMode) {
     /**
@@ -54,3 +65,3 @@ * TODO: Missing modes - PASS_THROUGH, LINEAR_BURN, LINEAR_DODGE
     if (styles.blendMode) {
-        blendProps.blendMode = transofrmBlendMode(styles.blendMode);
+        blendProps.blendMode = transformBlendMode(styles.blendMode);
     }
@@ -60,4 +71,4 @@ if (styles.shadowColor || styles.shadows) {
     }
-    return blendProps;
+    return __assign({}, blendProps, ((styles.effectStyleId && { effectStyleId: styles.effectStyleId }) || {}));
 };
 //# sourceMappingURL=transformBlendProperties.js.map

styleTransformers/transformShadowToEffect.js

@@ -10,3 +10,3 @@ "use strict";
     return shadows.map(function (shadow) { return ({
-        type: 'DROP_SHADOW',
+        type: shadow.shadowType != null ? shadow.shadowType : 'DROP_SHADOW',
         color: transformColors_1.colorToRGBA(shadow.shadowColor, shadow.shadowOpacity),
@@ -23,2 +23,3 @@ offset: shadow.shadowOffset
         radius: shadow.shadowRadius || 0,
+        spread: shadow.shadowSpread || 0,
         visible: true,
@@ -25,0 +26,0 @@ blendMode: 'NORMAL'

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

478421

increased by2.23%

Number of package files

341

increased by1.79%

Lines of code

7244

increased by2.33%

Number of lines in readme file

207

increased by0.49%

No dependency changes