react-figma - npm Package Compare versions

Comparing version 0.18.0 to 0.19.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" | "fills" | "backgrounds" | "fillStyleId" | "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" | "backgrounds" | "fillStyleId" | "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" | "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">>;
 };

components/text/Text.js

@@ -43,3 +43,3 @@ "use strict";
     var charactersByChildren = useTextChildren_1.useTextChildren(nodeRef);
-    var textProps = __assign({}, transformLayoutStyleProperties_1.transformLayoutStyleProperties(style), transformTextStyleProperties_1.transformTextStyleProperties(style), transformBlendProperties_1.transformBlendProperties(style), props, { characters: charactersByChildren || props.characters }, (style && style.textStyleId ? { textStyleId: style.textStyleId } : {}), { style: style,
+    var textProps = __assign({}, transformLayoutStyleProperties_1.transformLayoutStyleProperties(style), transformTextStyleProperties_1.transformTextStyleProperties(style), transformBlendProperties_1.transformBlendProperties(style), props, { characters: charactersByChildren || props.characters }, (style && style.textStyleId ? { textStyleId: style.textStyleId } : {}), (style && style.fillStyleId ? { fillStyleId: style.fillStyleId } : {}), { style: style,
         children: children });
@@ -46,0 +46,0 @@ var hasDefinedWidth = textProps.width || style.maxWidth;

localStyles/useFillPaintStyle.js

@@ -13,48 +13,12 @@ "use strict";
 };
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var _this = this;
 Object.defineProperty(exports, "__esModule", { value: true });
 var transformGeometryStyleProperties_1 = require("../styleTransformers/transformGeometryStyleProperties");
-var rpc_1 = require("../rpc");
 var React = require("react");
 var useImageHash_1 = require("../hooks/useImageHash");
 var Platform_1 = require("../helpers/Platform");
+var useCreateFillStyleId_1 = require("./useCreateFillStyleId");
 exports.useFillPaintStyle = function (style, params) {
-    var _a = React.useState(null), fillStyleId = _a[0], setFillStyleId = _a[1];
     var imageHash = useImageHash_1.useImageHash(style.backgroundImage);
     var transformedStyles = __assign({}, transformGeometryStyleProperties_1.transformGeometryStyleProperties('fills', style, imageHash), { style: style });
+    var _a = useCreateFillStyleId_1.useCreateFillStyleId(transformedStyles.fills, params), createFillsStyle = _a[0], fillStyleId = _a[1];
     React.useEffect(function () {
@@ -64,21 +28,2 @@ if (Platform_1.Platform.OS !== 'figma') {
         }
-        var createFillsStyle = function () { return __awaiter(_this, void 0, void 0, function () {
-            var id;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!transformedStyles.fills) {
-                            return [2 /*return*/];
-                        }
-                        return [4 /*yield*/, rpc_1.api.createOrUpdatePaintStyle({
-                                paints: transformedStyles.fills,
-                                params: params
-                            })];
-                    case 1:
-                        id = _a.sent();
-                        setFillStyleId(id);
-                        return [2 /*return*/];
-                }
-            });
-        }); };
         createFillsStyle();
@@ -85,0 +30,0 @@ }, [transformedStyles]);

localStyles/useTextStyle.d.ts

 import { TextStyleProperties } from '../styleTransformers/transformTextStyleProperties';
 import { CommonStyleProps } from '../types';
 export declare const useTextStyle: (style: Partial<TextStyleProperties>, params: CommonStyleProps) => {
+    fillStyleId: any;
     textStyleId: any;
@@ -21,2 +22,3 @@ color?: string;
 } | {
+    textStyleId: any;
     color?: string;
@@ -37,3 +39,39 @@ fontFamily?: string;
     textShadowRadius?: number;
+    fillStyleId?: string;
+} | {
+    fillStyleId: any;
+    color?: string;
+    fontFamily?: string;
+    fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
+    fontStyle?: "normal" | "italic" | "solid";
+    fontSize?: number;
+    textAlign?: "left" | "center" | "auto" | "right" | "justify";
+    lineHeight?: import("../helpers/size").TSize;
+    letterSpacing?: import("../helpers/size").TSize;
+    textDecorationLine?: "none" | "underline" | "line-through";
+    textShadowColor?: string;
+    textShadowOffset?: {
+        width: number;
+        height: number;
+    };
+    textShadowRadius?: number;
     textStyleId?: string;
+} | {
+    color?: string;
+    fontFamily?: string;
+    fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
+    fontStyle?: "normal" | "italic" | "solid";
+    fontSize?: number;
+    textAlign?: "left" | "center" | "auto" | "right" | "justify";
+    lineHeight?: import("../helpers/size").TSize;
+    letterSpacing?: import("../helpers/size").TSize;
+    textDecorationLine?: "none" | "underline" | "line-through";
+    textShadowColor?: string;
+    textShadowOffset?: {
+        width: number;
+        height: number;
+    };
+    textShadowRadius?: number;
+    textStyleId?: string;
+    fillStyleId?: string;
 };

localStyles/useTextStyle.js

@@ -55,2 +55,3 @@ "use strict";
 var useFontName_1 = require("../hooks/useFontName");
+var useCreateFillStyleId_1 = require("./useCreateFillStyleId");
 var AVAILABLE_TEXT_PROPERTIES = [
@@ -69,2 +70,3 @@ 'fontSize',
     var transformedStyles = React.useMemo(function () { return (__assign({}, transformTextStyleProperties_1.transformTextStyleProperties(style), { style: style })); }, [style]);
+    var _b = useCreateFillStyleId_1.useCreateFillStyleId(transformedStyles.fills, params), createFillsStyle = _b[0], fillStyleId = _b[1];
     var textProperties = React.useMemo(function () {
@@ -78,3 +80,3 @@ return Object.keys(transformedStyles).reduce(function (prev, current) {
     React.useEffect(function () {
-        if (Platform_1.Platform.OS !== 'figma' || !loadedFont) {
+        if (Platform_1.Platform.OS !== 'figma') {
             return;
@@ -102,6 +104,9 @@ }
         }); };
-        createTextStyle();
+        if (loadedFont) {
+            createTextStyle();
+        }
+        createFillsStyle();
     }, [textProperties, loadedFont]);
-    return __assign({}, style, (textStyleId ? { textStyleId: textStyleId } : {}));
+    return __assign({}, style, (textStyleId ? { textStyleId: textStyleId } : {}), (fillStyleId ? { fillStyleId: fillStyleId } : {}));
 };
 //# sourceMappingURL=useTextStyle.js.map

package.json

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

README.md

@@ -196,2 +196,3 @@ # React Figma
     <td align="center"><a href="https://utkarsh299-tech.github.io/myportfolio/"><img src="https://avatars.githubusercontent.com/u/60184229?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Utkarsh Singh</b></sub></a><br /><a href="https://github.com/react-figma/react-figma/commits?author=Utkarsh299-tech" title="Documentation">📖</a></td>
+    <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>
   </tr>
@@ -198,0 +199,0 @@ </table>

styleTransformers/transformTextStyleProperties.d.ts

@@ -19,2 +19,3 @@ import { Color, GeometryProps, TextNodeProps } from '../types';
     textStyleId: string;
+    fillStyleId: string;
 }
@@ -21,0 +22,0 @@ interface TextProperties extends GeometryProps, TextNodeProps {

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

467940

increased by0.74%

Number of package files

335

increased by0.9%

Lines of code

7079

increased by0.78%

Number of lines in readme file

206

increased by0.49%

No dependency changes