react-figma 0.21.0 → 0.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/localStyles/useEffectStyle.d.ts +6 -0
  2. package/package.json +1 -1
  3. package/styleTransformers/transformBlendProperties.d.ts +6 -1
  4. package/styleTransformers/transformBlendProperties.js +5 -1
  5. package/styleTransformers/transformBlendProperties.js.map +1 -1
  6. package/styleTransformers/transformBlurToEffect.d.ts +3 -0
  7. package/styleTransformers/transformBlurToEffect.js +14 -0
  8. package/styleTransformers/transformBlurToEffect.js.map +1 -0
package/localStyles/useEffectStyle.d.ts CHANGED
@@ -5,6 +5,7 @@ export declare const useEffectStyle: (style: Partial<BlendStyleProperties>, para
5
5
  opacity?: number;
6
6
  blendMode?: import("../styleTransformers/transformBlendProperties").CSSBlendMode;
7
7
  shadows?: import("../styleTransformers/transformBlendProperties").ShadowProperties[];
8
+ blurs?: import("../styleTransformers/transformBlendProperties").BlurProperties[];
8
9
  shadowColor?: string;
9
10
  shadowOffset?: {
10
11
  width: number;
@@ -14,10 +15,13 @@ export declare const useEffectStyle: (style: Partial<BlendStyleProperties>, para
14
15
  shadowRadius?: number;
15
16
  shadowSpread?: number;
16
17
  shadowType?: "DROP_SHADOW" | "INNER_SHADOW";
18
+ blurRadius?: number;
19
+ blurType?: "LAYER_BLUR" | "BACKGROUND_BLUR";
17
20
  } | {
18
21
  opacity?: number;
19
22
  blendMode?: import("../styleTransformers/transformBlendProperties").CSSBlendMode;
20
23
  shadows?: import("../styleTransformers/transformBlendProperties").ShadowProperties[];
24
+ blurs?: import("../styleTransformers/transformBlendProperties").BlurProperties[];
21
25
  effectStyleId?: string;
22
26
  shadowColor?: string;
23
27
  shadowOffset?: {
@@ -28,4 +32,6 @@ export declare const useEffectStyle: (style: Partial<BlendStyleProperties>, para
28
32
  shadowRadius?: number;
29
33
  shadowSpread?: number;
30
34
  shadowType?: "DROP_SHADOW" | "INNER_SHADOW";
35
+ blurRadius?: number;
36
+ blurType?: "LAYER_BLUR" | "BACKGROUND_BLUR";
31
37
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-figma",
3
- "version": "0.21.0",
3
+ "version": "0.22.0",
4
4
  "description": "Render React components to Figma",
5
5
  "scripts": {
6
6
  "tsc": "tsc -p tsconfig.json --noEmit",
package/styleTransformers/transformBlendProperties.d.ts CHANGED
@@ -1,5 +1,9 @@
1
1
  import { BlendProps, Color } from '../types';
2
2
  export declare type CSSBlendMode = 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity';
3
+ export interface BlurProperties {
4
+ blurRadius?: number;
5
+ blurType?: 'LAYER_BLUR' | 'BACKGROUND_BLUR';
6
+ }
3
7
  export interface ShadowProperties {
4
8
  shadowColor: Color;
5
9
  shadowOffset?: {
@@ -11,10 +15,11 @@ export interface ShadowProperties {
11
15
  shadowSpread?: number;
12
16
  shadowType?: 'DROP_SHADOW' | 'INNER_SHADOW';
13
17
  }
14
- export interface BlendStyleProperties extends ShadowProperties {
18
+ export interface BlendStyleProperties extends ShadowProperties, BlurProperties {
15
19
  opacity: number;
16
20
  blendMode: CSSBlendMode;
17
21
  shadows?: ShadowProperties[];
22
+ blurs?: BlurProperties[];
18
23
  effectStyleId?: string;
19
24
  }
20
25
  export declare const transformBlendProperties: (styles?: Partial<BlendStyleProperties> & {
package/styleTransformers/transformBlendProperties.js CHANGED
@@ -11,6 +11,7 @@ var __assign = (this && this.__assign) || function () {
11
11
  return __assign.apply(this, arguments);
12
12
  };
13
13
  Object.defineProperty(exports, "__esModule", { value: true });
14
+ var transformBlurToEffect_1 = require("./transformBlurToEffect");
14
15
  var transformShadowToEffect_1 = require("./transformShadowToEffect");
15
16
  var transformBlendMode = function (cssBlendMode) {
16
17
  /**
@@ -65,7 +66,10 @@ exports.transformBlendProperties = function (styles) {
65
66
  blendProps.blendMode = transformBlendMode(styles.blendMode);
66
67
  }
67
68
  if (styles.shadowColor || styles.shadows) {
68
- blendProps.effects = transformShadowToEffect_1.transformShadowToEffect(styles);
69
+ blendProps.effects = (blendProps.effects != null ? blendProps.effects : []).concat(transformShadowToEffect_1.transformShadowToEffect(styles));
70
+ }
71
+ if (styles.blurRadius || styles.blurs) {
72
+ blendProps.effects = (blendProps.effects != null ? blendProps.effects : []).concat(transformBlurToEffect_1.transformBlurToEffect(styles));
69
73
  }
70
74
  return __assign({}, blendProps, ((styles.effectStyleId && { effectStyleId: styles.effectStyleId }) || {}));
71
75
  };
package/styleTransformers/transformBlendProperties.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"transformBlendProperties.js","sourceRoot":"","sources":["../src/styleTransformers/transformBlendProperties.ts"],"names":[],"mappings":";;;;;;;;;;;;;AACA,qEAAoE;AAoCpE,IAAM,kBAAkB,GAAG,UAAC,YAA0B;IAClD;;OAEG;IACH,QAAQ,YAAY,EAAE;QAClB,KAAK,QAAQ;YACT,OAAO,QAAQ,CAAC;QACpB,KAAK,QAAQ;YACT,OAAO,QAAQ,CAAC;QACpB,KAAK,UAAU;YACX,OAAO,UAAU,CAAC;QACtB,KAAK,YAAY;YACb,OAAO,YAAY,CAAC;QACxB,KAAK,SAAS;YACV,OAAO,SAAS,CAAC;QACrB,KAAK,QAAQ;YACT,OAAO,QAAQ,CAAC;QACpB,KAAK,aAAa;YACd,OAAO,aAAa,CAAC;QACzB,KAAK,SAAS;YACV,OAAO,SAAS,CAAC;QACrB,KAAK,YAAY;YACb,OAAO,YAAY,CAAC;QACxB,KAAK,YAAY;YACb,OAAO,YAAY,CAAC;QACxB,KAAK,YAAY;YACb,OAAO,YAAY,CAAC;QACxB,KAAK,WAAW;YACZ,OAAO,WAAW,CAAC;QACvB,KAAK,KAAK;YACN,OAAO,KAAK,CAAC;QACjB,KAAK,YAAY;YACb,OAAO,YAAY,CAAC;QACxB,KAAK,OAAO;YACR,OAAO,OAAO,CAAC;QACnB,KAAK,YAAY;YACb,OAAO,YAAY,CAAC;QACxB;YACI,MAAM;KACb;AACL,CAAC,CAAC;AAEW,QAAA,wBAAwB,GAAG,UACpC,MAAmE;IAEnE,IAAI,CAAC,MAAM,EAAE;QACT,OAAO,EAAE,CAAC;KACb;IAED,IAAM,UAAU,GAAe,EAAE,CAAC;IAElC,IAAI,MAAM,CAAC,OAAO,EAAE;QAChB,UAAU,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;KACvC;IACD,IAAI,MAAM,CAAC,SAAS,EAAE;QAClB,UAAU,CAAC,SAAS,GAAG,kBAAkB,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;KAC/D;IAED,IAAI,MAAM,CAAC,WAAW,IAAI,MAAM,CAAC,OAAO,EAAE;QACtC,UAAU,CAAC,OAAO,GAAG,iDAAuB,CAAC,MAAM,CAAC,CAAC;KACxD;IAED,oBAAY,UAAU,EAAK,CAAC,CAAC,MAAM,CAAC,aAAa,IAAI,EAAE,aAAa,EAAE,MAAM,CAAC,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,EAAG;AAC3G,CAAC,CAAC"}
1
+ {"version":3,"file":"transformBlendProperties.js","sourceRoot":"","sources":["../src/styleTransformers/transformBlendProperties.ts"],"names":[],"mappings":";;;;;;;;;;;;;AACA,iEAAgE;AAChE,qEAAoE;AA0CpE,IAAM,kBAAkB,GAAG,UAAC,YAA0B;IAClD;;OAEG;IACH,QAAQ,YAAY,EAAE;QAClB,KAAK,QAAQ;YACT,OAAO,QAAQ,CAAC;QACpB,KAAK,QAAQ;YACT,OAAO,QAAQ,CAAC;QACpB,KAAK,UAAU;YACX,OAAO,UAAU,CAAC;QACtB,KAAK,YAAY;YACb,OAAO,YAAY,CAAC;QACxB,KAAK,SAAS;YACV,OAAO,SAAS,CAAC;QACrB,KAAK,QAAQ;YACT,OAAO,QAAQ,CAAC;QACpB,KAAK,aAAa;YACd,OAAO,aAAa,CAAC;QACzB,KAAK,SAAS;YACV,OAAO,SAAS,CAAC;QACrB,KAAK,YAAY;YACb,OAAO,YAAY,CAAC;QACxB,KAAK,YAAY;YACb,OAAO,YAAY,CAAC;QACxB,KAAK,YAAY;YACb,OAAO,YAAY,CAAC;QACxB,KAAK,WAAW;YACZ,OAAO,WAAW,CAAC;QACvB,KAAK,KAAK;YACN,OAAO,KAAK,CAAC;QACjB,KAAK,YAAY;YACb,OAAO,YAAY,CAAC;QACxB,KAAK,OAAO;YACR,OAAO,OAAO,CAAC;QACnB,KAAK,YAAY;YACb,OAAO,YAAY,CAAC;QACxB;YACI,MAAM;KACb;AACL,CAAC,CAAC;AAEW,QAAA,wBAAwB,GAAG,UACpC,MAAmE;IAEnE,IAAI,CAAC,MAAM,EAAE;QACT,OAAO,EAAE,CAAC;KACb;IAED,IAAM,UAAU,GAAe,EAAE,CAAC;IAElC,IAAI,MAAM,CAAC,OAAO,EAAE;QAChB,UAAU,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;KACvC;IACD,IAAI,MAAM,CAAC,SAAS,EAAE;QAClB,UAAU,CAAC,SAAS,GAAG,kBAAkB,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;KAC/D;IAED,IAAI,MAAM,CAAC,WAAW,IAAI,MAAM,CAAC,OAAO,EAAE;QACtC,UAAU,CAAC,OAAO,GACX,CAAC,UAAU,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,QACtD,iDAAuB,CAAC,MAAM,CAAC,CACrC,CAAC;KACL;IAED,IAAI,MAAM,CAAC,UAAU,IAAI,MAAM,CAAC,KAAK,EAAE;QACnC,UAAU,CAAC,OAAO,GACX,CAAC,UAAU,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,QACtD,6CAAqB,CAAC,MAAM,CAAC,CACnC,CAAC;KACL;IAED,oBAAY,UAAU,EAAK,CAAC,CAAC,MAAM,CAAC,aAAa,IAAI,EAAE,aAAa,EAAE,MAAM,CAAC,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,EAAG;AAC3G,CAAC,CAAC"}
package/styleTransformers/transformBlurToEffect.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ /// <reference types="plugin-typings" />
2
+ import { BlendStyleProperties } from './transformBlendProperties';
3
+ export declare const transformBlurToEffect: (styles: Partial<BlendStyleProperties>) => BlurEffect[];
package/styleTransformers/transformBlurToEffect.js ADDED
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.transformBlurToEffect = function (styles) {
4
+ var blurs = [styles];
5
+ if ('blurs' in styles && Array.isArray(styles.shadows)) {
6
+ blurs = styles.blurs;
7
+ }
8
+ return blurs.map(function (blur) { return ({
9
+ type: blur.blurType != null ? blur.blurType : 'LAYER_BLUR',
10
+ radius: blur.blurRadius || 0,
11
+ visible: true
12
+ }); });
13
+ };
14
+ //# sourceMappingURL=transformBlurToEffect.js.map
package/styleTransformers/transformBlurToEffect.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"transformBlurToEffect.js","sourceRoot":"","sources":["../src/styleTransformers/transformBlurToEffect.ts"],"names":[],"mappings":";;AAGa,QAAA,qBAAqB,GAAG,UAAC,MAAqC;IACvE,IAAI,KAAK,GAA8B,CAAC,MAAM,CAAC,CAAC;IAChD,IAAI,OAAO,IAAI,MAAM,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE;QACpD,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;KACxB;IACD,OAAO,KAAK,CAAC,GAAG,CAAC,UAAA,IAAI,IAAI,OAAA,CAAC;QACtB,IAAI,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY;QAC1D,MAAM,EAAE,IAAI,CAAC,UAAU,IAAI,CAAC;QAC5B,OAAO,EAAE,IAAI;KAChB,CAAC,EAJuB,CAIvB,CAAC,CAAC;AACR,CAAC,CAAC"}