react-figma - npm Package Compare versions

Comparing version 0.5.2 to 0.6.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" | "backgrounds" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "children" | "layoutMode" | "layoutAlign" | "primaryAxisAlignItems" | "counterAxisAlignItems" | "style" | "isMask" | "effects" | "effectStyleId" | "locked" | "constraints" | "name" | "pluginData" | "sharedPluginData" | "relativeTransform" | "x" | "y" | "rotation" | "isWithoutConstraints" | "layoutGrow" | "exportSettings" | "exportAsyncSettings" | "exportAsyncCallback" | "onSelectionEnter" | "onSelectionLeave" | "onLayout" | "primaryAxisSizingMode" | "counterAxisSizingMode" | "horizontalPadding" | "verticalPadding" | "itemSpacing">>;
-    Instance: React.FunctionComponent<Pick<InstanceProps, "width" | "height" | "visible" | "opacity" | "blendMode" | "backgrounds" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "children" | "layoutMode" | "layoutAlign" | "primaryAxisAlignItems" | "counterAxisAlignItems" | "style" | "isMask" | "effects" | "effectStyleId" | "locked" | "constraints" | "name" | "pluginData" | "sharedPluginData" | "relativeTransform" | "x" | "y" | "rotation" | "isWithoutConstraints" | "layoutGrow" | "exportSettings" | "exportAsyncSettings" | "exportAsyncCallback" | "onSelectionEnter" | "onSelectionLeave" | "onLayout" | "primaryAxisSizingMode" | "counterAxisSizingMode" | "horizontalPadding" | "verticalPadding" | "itemSpacing" | "overrides">>;
+    Component: React.FunctionComponent<Pick<ComponentProps, "width" | "height" | "visible" | "opacity" | "blendMode" | "backgrounds" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "name" | "children" | "layoutMode" | "layoutAlign" | "primaryAxisAlignItems" | "counterAxisAlignItems" | "style" | "isMask" | "effects" | "effectStyleId" | "locked" | "constraints" | "pluginData" | "sharedPluginData" | "relativeTransform" | "x" | "y" | "rotation" | "isWithoutConstraints" | "layoutGrow" | "exportSettings" | "exportAsyncSettings" | "exportAsyncCallback" | "onSelectionEnter" | "onSelectionLeave" | "onLayout" | "primaryAxisSizingMode" | "counterAxisSizingMode" | "horizontalPadding" | "verticalPadding" | "itemSpacing">>;
+    Instance: React.FunctionComponent<Pick<InstanceProps, "width" | "height" | "visible" | "opacity" | "blendMode" | "backgrounds" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "name" | "children" | "layoutMode" | "layoutAlign" | "primaryAxisAlignItems" | "counterAxisAlignItems" | "style" | "isMask" | "effects" | "effectStyleId" | "locked" | "constraints" | "pluginData" | "sharedPluginData" | "relativeTransform" | "x" | "y" | "rotation" | "isWithoutConstraints" | "layoutGrow" | "exportSettings" | "exportAsyncSettings" | "exportAsyncCallback" | "onSelectionEnter" | "onSelectionLeave" | "onLayout" | "primaryAxisSizingMode" | "counterAxisSizingMode" | "horizontalPadding" | "verticalPadding" | "itemSpacing" | "overrides">>;
 };

components/text/Text.js

@@ -39,6 +39,5 @@ "use strict";
         : {}), __1.StyleSheet.flatten(flattenOriginalStyle), transformAutoLayoutToYoga_1.transformAutoLayoutToYoga(props));
-    console.log(style);
     var children = normalizeTextNodeChidren(props.children);
     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,
+    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,
         children: children });
@@ -45,0 +44,0 @@ var hasDefinedWidth = textProps.width || style.maxWidth;

index.d.ts

@@ -22,1 +22,4 @@ export { render } from './renderer';
 export { Platform } from './helpers/Platform';
+export { useFillPaintStyle } from './localStyles/useFillPaintStyle';
+export { useStrokePaintStyle } from './localStyles/useStrokePaintStyle';
+export { useTextStyle } from './localStyles/useTextStyle';

index.js

@@ -46,2 +46,8 @@ "use strict";
 exports.Platform = Platform_1.Platform;
+var useFillPaintStyle_1 = require("./localStyles/useFillPaintStyle");
+exports.useFillPaintStyle = useFillPaintStyle_1.useFillPaintStyle;
+var useStrokePaintStyle_1 = require("./localStyles/useStrokePaintStyle");
+exports.useStrokePaintStyle = useStrokePaintStyle_1.useStrokePaintStyle;
+var useTextStyle_1 = require("./localStyles/useTextStyle");
+exports.useTextStyle = useTextStyle_1.useTextStyle;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-figma",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "Render React components to Figma",
@@ -50,3 +50,3 @@ "scripts": {
     "css-loader": "^3.2.0",
-    "figma-api-stub": "0.0.44",
+    "figma-api-stub": "0.0.45",
     "file-loader": "^6.2.0",
@@ -75,3 +75,3 @@ "html-webpack-inline-source-plugin": "^0.0.10",
     "figma-jsonrpc": "^0.4.0",
-    "nanoid": "^2.0.3",
+    "nanoid": "3.1.20",
     "react-devtools-core": "^4.7.0",
@@ -78,0 +78,0 @@ "react-fetch-hook": "1.7.2",

README.md

@@ -121,2 +121,3 @@ # React Figma
 * [MDX](examples/mdx)
+* [Local Styles](examples/local-styles)
 
@@ -123,0 +124,0 @@ ## Sponsoring

renderer.js

@@ -50,3 +50,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var nanoid = require("nanoid/non-secure");
+var non_secure_1 = require("nanoid/non-secure");
 var createReconciler = require("react-reconciler");
@@ -113,3 +113,3 @@ var useTextChildren_1 = require("./hooks/useTextChildren");
 var renderInstance = function (type, node, props) {
-    var result = { reactId: (node && node.reactId) || nanoid(), type: type.toUpperCase() };
+    var result = { reactId: (node && node.reactId) || non_secure_1.nanoid(), type: type.toUpperCase() };
     var children = props.children, otherProps = __rest(props, ["children"]);
@@ -116,0 +116,0 @@ if (props.ref) {

renderers/text.js

@@ -27,3 +27,4 @@ "use strict";
     'letterSpacing',
-    'lineHeight'
+    'lineHeight',
+    'textStyleId'
 ], {
@@ -30,0 +31,0 @@ characters: '',

rpc.d.ts

 /// <reference types="plugin-typings" />
 import { Subject } from 'rxjs';
+import { CommonStyleProps } from './types';
 export declare const api: Readonly<{
@@ -22,3 +23,3 @@ getInitialTree: () => Promise<{
         reactId: string | void;
-        nodeBatchId: any;
+        nodeBatchId: string;
     }>;
@@ -34,2 +35,11 @@ findNodeByName: (_node: any, name: any) => Promise<{
     highlightNativeElement: (_node: any) => Promise<void>;
+    createOrUpdatePaintStyle: (properties: {
+        paints: void | readonly Paint[];
+        params: CommonStyleProps;
+    }) => Promise<string>;
+    createOrUpdateTextStyle: (properties: {
+        textProperties: any;
+        params: CommonStyleProps;
+        loadedFont: any;
+    }) => Promise<string>;
 }>;
@@ -36,0 +46,0 @@ export declare const setupMainThread: () => void;

rpc.js

@@ -52,5 +52,6 @@ "use strict";
 var renderers = require("./renderers");
-var nanoid = require("nanoid/non-secure");
+var non_secure_1 = require("nanoid/non-secure");
 var rxjs_1 = require("rxjs");
 var safeGetPluginData_1 = require("./helpers/safeGetPluginData");
+var isEqualFontStyle_1 = require("./helpers/isEqualFontStyle");
 var getInitialTree = function (node) {
@@ -80,3 +81,3 @@ return {
     }
-    var nodeBatchId = nanoid();
+    var nodeBatchId = non_secure_1.nanoid();
     node.setPluginData('nodeBatchId', nodeBatchId);
@@ -226,2 +227,40 @@ var children = node.children && node.children.map(transformNodesToTree).filter(function (item) { return !!item; });
         }
+    },
+    createOrUpdatePaintStyle: function (properties) {
+        var paints = properties.paints, params = properties.params;
+        var name = params.name, id = params.id, description = params.description;
+        var foundPaintStyle = figma.getLocalPaintStyles().find(function (style) { return style.name === name || style.id === id; });
+        var paintStyle = foundPaintStyle || figma.createPaintStyle();
+        if (name) {
+            paintStyle.name = name;
+        }
+        if (description) {
+            paintStyle.description = description;
+        }
+        if (paints) {
+            paintStyle.paints = paints;
+        }
+        return paintStyle.id;
+    },
+    createOrUpdateTextStyle: function (properties) {
+        var _a = properties.textProperties, textProperties = _a === void 0 ? {} : _a, params = properties.params, loadedFont = properties.loadedFont;
+        var name = params.name, id = params.id, description = params.description;
+        var foundTextStyle = figma.getLocalTextStyles().find(function (style) { return style.name === name || style.id === id; });
+        var textStyle = foundTextStyle || figma.createTextStyle();
+        if (name) {
+            textStyle.name = name;
+        }
+        if (description) {
+            textStyle.description = description;
+        }
+        var _b = textProperties.fontName, fontName = _b === void 0 ? { family: 'Roboto', style: 'Regular' } : _b;
+        if (loadedFont &&
+            fontName &&
+            loadedFont.family === fontName.family &&
+            isEqualFontStyle_1.isEqualFontStyle(loadedFont.style, fontName.style)) {
+            Object.keys(textProperties).forEach(function (key) {
+                textStyle[key] = textProperties[key];
+            });
+        }
+        return textStyle.id;
     }
@@ -228,0 +267,0 @@ }, {

styleTransformers/transformGeometryStyleProperties.d.ts

@@ -13,2 +13,5 @@ import { GeometryProps } from '../types';
 };
-export declare const transformGeometryStyleProperties: (property: "fills" | "backgrounds", style?: Partial<LayoutStyleProperties & GeometryStyleProperties>, imageHash?: string) => GeometryProps;
+export declare const transformGeometryStyleProperties: (property: "fills" | "backgrounds", style?: Partial<LayoutStyleProperties & GeometryStyleProperties & {
+    fillStyleId?: string;
+    strokeStyleId?: string;
+}>, imageHash?: string) => GeometryProps;

styleTransformers/transformGeometryStyleProperties.js

@@ -66,4 +66,4 @@ "use strict";
     }
-    return __assign({}, ((fills.length > 0 && (_a = {}, _a[property] = fills, _a)) || {}));
+    return __assign({}, ((fills.length > 0 && (_a = {}, _a[property] = fills, _a)) || {}), ((style.fillStyleId && { fillStyleId: style.fillStyleId }) || {}), ((style.strokeStyleId && { strokeStyleId: style.strokeStyleId }) || {}));
 };
 //# sourceMappingURL=transformGeometryStyleProperties.js.map

styleTransformers/transformTextStyleProperties.d.ts

@@ -18,2 +18,3 @@ import { Color, GeometryProps, TextNodeProps } from '../types';
     textShadowRadius: number;
+    textStyleId: string;
 }
@@ -20,0 +21,0 @@ interface TextProperties extends GeometryProps, TextNodeProps {

types.d.ts

@@ -37,3 +37,3 @@ /// <reference types="plugin-typings" />
 export interface GeometryProps {
-    fills?: ReadonlyArray<Paint> | symbol;
+    fills?: ReadonlyArray<Paint>;
     strokes?: ReadonlyArray<Paint>;
@@ -87,2 +87,3 @@ strokeWeight?: number;
     lineHeight?: LineHeight | symbol;
+    textStyleId?: string;
 }
@@ -141,1 +142,6 @@ export interface VectorNodeProps {
 }
+export interface CommonStyleProps {
+    id?: string;
+    name?: string;
+    description?: string;
+}

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

384587

increased by7.29%

Number of package files

299

increased by3.1%

Lines of code

5463

increased by8.22%

Number of lines in readme file

197

increased by0.51%

Dependency changes

• + Addednanoid@3.1.20(transitive)

• - Removednanoid@2.1.11(transitive)

• Updatednanoid@3.1.20