@cntrl-site/sdk 1.25.2 → 1.25.3

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2022 CNTRL
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2022 CNTRL
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,2 +1,2 @@
-# CNTRL SDK
-This is a root SDK module for CNTRL. Should be used along with other framework-specific modules like `@cntrl-site/sdk-react`
+# CNTRL SDK
+This is a root SDK module for CNTRL. Should be used along with other framework-specific modules like `@cntrl-site/sdk-react`

package/lib/FontFaceGenerator/FontFaceGenerator.js

@@ -15,12 +15,12 @@ class FontFaceGenerator {
             const otherFiles = font.files
                 .filter(file => file.type !== 'eot')
                 .map(file => `url('${file.url}') format('${FILE_TYPES_MAP[file.type] || file.type}')`);
-            return `
-@font-face {
-  font-family: "${font.name}";
-  font-weight: ${font.weight};
-  font-style: ${font.style};
-  ${eotFile ? `src: url('${eotFile.url}');\n  ` : ''}src: ${otherFiles.join(', ')};
+            return `
+@font-face {
+  font-family: "${font.name}";
+  font-weight: ${font.weight};
+  font-style: ${font.style};
+  ${eotFile ? `src: url('${eotFile.url}');\n  ` : ''}src: ${otherFiles.join(', ')};
 }`;
         }).join('\n');
     }

package/lib/schemas/article/Item.schema.js

@@ -47,7 +47,8 @@ const ImageItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
         strokeWidth: zod_1.z.number(),
         strokeFill: zod_1.z.array(FillLayer_schema_1.FillLayerSchema),
         blur: zod_1.z.number(),
-        isDraggable: zod_1.z.boolean().optional()
+        isDraggable: zod_1.z.boolean().optional(),
+        blendMode: zod_1.z.string().optional()
     })),
     state: zod_1.z.record(ItemState_schema_1.MediaStateParamsSchema)
 });
@@ -72,6 +73,7 @@ const VideoItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
         strokeFill: zod_1.z.array(FillLayer_schema_1.FillLayerSchema),
         blur: zod_1.z.number(),
         isDraggable: zod_1.z.boolean().optional(),
+        blendMode: zod_1.z.string().optional(),
         play: zod_1.z.enum(['on-hover', 'on-click', 'auto']),
         muted: zod_1.z.boolean(),
         controls: zod_1.z.boolean(),
@@ -96,7 +98,8 @@ const RectangleItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
         blur: zod_1.z.number(),
         backdropBlur: zod_1.z.number(),
         blurMode: zod_1.z.enum(['default', 'backdrop']),
-        isDraggable: zod_1.z.boolean().optional()
+        isDraggable: zod_1.z.boolean().optional(),
+        blendMode: zod_1.z.string().optional()
     })),
     state: zod_1.z.record(ItemState_schema_1.RectangleStateParamsSchema)
 });
@@ -111,7 +114,8 @@ const CustomItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
         to: zod_1.z.number().optional()
     }).nullable()),
     layoutParams: zod_1.z.record(zod_1.z.object({
-        isDraggable: zod_1.z.boolean().optional()
+        isDraggable: zod_1.z.boolean().optional(),
+        blendMode: zod_1.z.string().optional()
     })),
     state: zod_1.z.record(ItemState_schema_1.CustomItemStateParamsSchema)
 });
@@ -135,7 +139,8 @@ const VimeoEmbedItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
         controls: zod_1.z.boolean(),
         loop: zod_1.z.boolean(),
         muted: zod_1.z.boolean(),
-        pictureInPicture: zod_1.z.boolean()
+        pictureInPicture: zod_1.z.boolean(),
+        blendMode: zod_1.z.string().optional()
     })),
     state: zod_1.z.record(ItemState_schema_1.EmbedStateParamsSchema)
 });
@@ -157,6 +162,7 @@ const YoutubeEmbedItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
         play: zod_1.z.enum(['on-hover', 'on-click', 'auto']),
         controls: zod_1.z.boolean(),
         loop: zod_1.z.boolean(),
+        blendMode: zod_1.z.string().optional()
     })),
     state: zod_1.z.record(ItemState_schema_1.EmbedStateParamsSchema)
 });
@@ -176,7 +182,8 @@ const CodeEmbedItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
         areaAnchor: zod_1.z.nativeEnum(ItemArea_1.AreaAnchor),
         opacity: zod_1.z.number().nonnegative(),
         blur: zod_1.z.number(),
-        isDraggable: zod_1.z.boolean().optional()
+        isDraggable: zod_1.z.boolean().optional(),
+        blendMode: zod_1.z.string().optional()
     })),
     state: zod_1.z.record(ItemState_schema_1.CodeEmbedStateParamsSchema)
 });
@@ -220,7 +227,7 @@ exports.ItemSchema = zod_1.z.lazy(() => zod_1.z.discriminatedUnion('type', [
         layoutParams: zod_1.z.record(zod_1.z.object({
             opacity: zod_1.z.number().nonnegative(),
             blur: zod_1.z.number(),
-            isDraggable: zod_1.z.boolean().optional()
+            blendMode: zod_1.z.string().optional()
         })),
         state: zod_1.z.record(ItemState_schema_1.GroupStateParamsSchema)
     }),
@@ -237,7 +244,7 @@ exports.ItemSchema = zod_1.z.lazy(() => zod_1.z.discriminatedUnion('type', [
         }).nullable()),
         layoutParams: zod_1.z.record(zod_1.z.object({
             opacity: zod_1.z.number().nonnegative(),
-            isDraggable: zod_1.z.boolean().optional()
+            blendMode: zod_1.z.string().optional()
         })),
         state: zod_1.z.record(ItemState_schema_1.CompoundStateParamsSchema)
     })

package/lib/schemas/article/RichTextItem.schema.d.ts

@@ -150,6 +150,7 @@ export declare const RichTextItemSchema: z.ZodObject<{
         fontWeight: z.ZodNumber;
         fontVariant: z.ZodString;
         isDraggable: z.ZodOptional<z.ZodBoolean>;
+        blendMode: z.ZodOptional<z.ZodString>;
     }, "strip", z.ZodTypeAny, {
         color: string;
         letterSpacing: number;
@@ -172,6 +173,7 @@ export declare const RichTextItemSchema: z.ZodObject<{
             value?: string | undefined;
         }[] | undefined;
         isDraggable?: boolean | undefined;
+        blendMode?: string | undefined;
     }, {
         color: string;
         letterSpacing: number;
@@ -194,6 +196,7 @@ export declare const RichTextItemSchema: z.ZodObject<{
             value?: string | undefined;
         }[] | undefined;
         isDraggable?: boolean | undefined;
+        blendMode?: string | undefined;
     }>>;
     state: z.ZodRecord<z.ZodString, z.ZodObject<{
         color: z.ZodOptional<z.ZodObject<{
@@ -1027,6 +1030,7 @@ export declare const RichTextItemSchema: z.ZodObject<{
             value?: string | undefined;
         }[] | undefined;
         isDraggable?: boolean | undefined;
+        blendMode?: string | undefined;
     }>;
     commonParams: {
         text: string;
@@ -1216,6 +1220,7 @@ export declare const RichTextItemSchema: z.ZodObject<{
             value?: string | undefined;
         }[] | undefined;
         isDraggable?: boolean | undefined;
+        blendMode?: string | undefined;
     }>;
     commonParams: {
         text: string;

package/lib/schemas/article/RichTextItem.schema.js

@@ -54,7 +54,8 @@ exports.RichTextItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
         fontStyle: zod_1.z.string(),
         fontWeight: zod_1.z.number(),
         fontVariant: zod_1.z.string(),
-        isDraggable: zod_1.z.boolean().optional()
+        isDraggable: zod_1.z.boolean().optional(),
+        blendMode: zod_1.z.string().optional()
     })),
     state: zod_1.z.record(ItemState_schema_1.RichTextStateParamsSchema)
 });

package/lib/types/article/Item.d.ts

@@ -97,24 +97,29 @@ interface MediaLayoutParams {
     strokeFill: FillLayer[];
     blur: number;
     isDraggable?: boolean;
+    blendMode?: string;
 }
 interface CustomLayoutParams {
     isDraggable?: boolean;
+    blendMode?: string;
 }
 interface GroupLayoutParams {
     opacity: number;
     blur: number;
     isDraggable?: boolean;
+    blendMode?: string;
 }
 interface CompoundLayoutParams {
     opacity: number;
     isDraggable?: boolean;
+    blendMode?: string;
 }
 interface CodeEmbedLayoutParams {
     areaAnchor: AreaAnchor;
     opacity: number;
     blur: number;
     isDraggable?: boolean;
+    blendMode?: string;
 }
 interface VimeoEmbedLayoutParams {
     play: 'on-hover' | 'on-click' | 'auto';
@@ -125,6 +130,7 @@ interface VimeoEmbedLayoutParams {
     radius: number;
     blur: number;
     opacity: number;
+    blendMode?: string;
 }
 interface YoutubeEmbedLayoutParams {
     play: 'on-hover' | 'on-click' | 'auto';
@@ -133,6 +139,7 @@ interface YoutubeEmbedLayoutParams {
     radius: number;
     blur: number;
     opacity: number;
+    blendMode?: string;
 }
 interface ImageLayoutParams extends MediaLayoutParams {
 }
@@ -159,6 +166,7 @@ interface RichTextLayoutParams {
     fontWeight: number;
     fontVariant: string;
     isDraggable?: boolean;
+    blendMode?: string;
 }
 interface RectangleLayoutParams {
     radius: number;
@@ -169,6 +177,7 @@ interface RectangleLayoutParams {
     backdropBlur: number;
     blurMode: 'default' | 'backdrop';
     isDraggable?: boolean;
+    blendMode?: string;
 }
 export type FillLayer = SolidFillLayer | LinearGradientFillLayer | RadialGradientFillLayer | ConicGradientFillLayer | ImageLayer;
 type ColorPoint = {

package/lib/utils.js

@@ -8,8 +8,8 @@ function getLayoutStyles(layouts, layoutValues, mapToStyles) {
         .sort((a, b) => a.startsWith - b.startsWith)
         .reduce((acc, layout) => {
         const values = layoutValues.map(lv => lv[layout.id]);
-        return `
-        ${acc}
+        return `
+        ${acc}
         ${layout.startsWith !== 0
             ? `@media (min-width: ${layout.startsWith}px) {${mapToStyles(values, layout.exemplary)}}`
             : `${mapToStyles(values, layout.exemplary)}`}`;

package/package.json

@@ -1,62 +1,62 @@
-{
-  "name": "@cntrl-site/sdk",
-  "version": "1.25.2",
-  "description": "Generic SDK for use in public websites.",
-  "main": "lib/index.js",
-  "types": "lib/index.d.ts",
-  "scripts": {
-    "test": "jest",
-    "prebuild": "rimraf ./lib",
-    "build": "tsc --project tsconfig.build.json",
-    "prepublishOnly": "cross-env NODE_ENV=production npm run build"
-  },
-  "bin": {
-    "cntrl-sdk": "lib/cli.js"
-  },
-  "files": [
-    "lib",
-    "resources"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/cntrl-site/sdk.git"
-  },
-  "author": "arsen@momdesign.nyc",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/cntrl-site/sdk/issues"
-  },
-  "homepage": "https://github.com/cntrl-site/sdk#readme",
-  "directories": {
-    "lib": "lib"
-  },
-  "dependencies": {
-    "@splidejs/react-splide": "^0.7.12",
-    "@types/ejs": "^3.1.2",
-    "@types/isomorphic-fetch": "^0.0.36",
-    "@types/ua-parser-js": "^0.7.39",
-    "commander": "^10.0.1",
-    "dotenv": "^16.1.3",
-    "ejs": "^3.1.9",
-    "isomorphic-fetch": "^3.0.0",
-    "mp4box": "^0.5.2",
-    "styled-jsx": "^5.1.6",
-    "ts-node": "^10.9.1",
-    "ua-parser-js": "^1.0.37",
-    "url": "^0.11.0",
-    "zod": "^3.22.4"
-  },
-  "devDependencies": {
-    "@tsconfig/node16": "^1.0.3",
-    "@tsconfig/recommended": "^1.0.1",
-    "@types/jest": "^29.0.0",
-    "@types/node": "^18.11.7",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
-    "@vitejs/plugin-react": "^4.3.4",
-    "cross-env": "^10.1.0",
-    "jest": "^28.1.3",
-    "ts-jest": "^28.0.8",
-    "typescript": "^5.2.2"
-  }
-}
+{
+  "name": "@cntrl-site/sdk",
+  "version": "1.25.3",
+  "description": "Generic SDK for use in public websites.",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "test": "jest",
+    "prebuild": "rimraf ./lib",
+    "build": "tsc --project tsconfig.build.json",
+    "prepublishOnly": "cross-env NODE_ENV=production npm run build"
+  },
+  "bin": {
+    "cntrl-sdk": "lib/cli.js"
+  },
+  "files": [
+    "lib",
+    "resources"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cntrl-site/sdk.git"
+  },
+  "author": "arsen@momdesign.nyc",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/cntrl-site/sdk/issues"
+  },
+  "homepage": "https://github.com/cntrl-site/sdk#readme",
+  "directories": {
+    "lib": "lib"
+  },
+  "dependencies": {
+    "@splidejs/react-splide": "^0.7.12",
+    "@types/ejs": "^3.1.2",
+    "@types/isomorphic-fetch": "^0.0.36",
+    "@types/ua-parser-js": "^0.7.39",
+    "commander": "^10.0.1",
+    "dotenv": "^16.1.3",
+    "ejs": "^3.1.9",
+    "isomorphic-fetch": "^3.0.0",
+    "mp4box": "^0.5.2",
+    "styled-jsx": "^5.1.6",
+    "ts-node": "^10.9.1",
+    "ua-parser-js": "^1.0.37",
+    "url": "^0.11.0",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@tsconfig/node16": "^1.0.3",
+    "@tsconfig/recommended": "^1.0.1",
+    "@types/jest": "^29.0.0",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "cross-env": "^10.1.0",
+    "jest": "^28.1.3",
+    "ts-jest": "^28.0.8",
+    "typescript": "^5.2.2"
+  }
+}

package/resources/template.scss.ejs

@@ -1,50 +1,50 @@
-// CAUTION: THIS FILE IS AUTO-GENERATED BASED ON
-// LAYOUT CONFIGURATION IN YOUR CNTRL PROJECT
-// WE HIGHLY ADVICE YOU TO NOT CHANGE IT MANUALLY
-@use "sass:map";
-
-$__CNTRL_LAYOUT_WIDTH__: <%= ranges[0].exemplary %>;
-
-$layout: (
-<% ranges.forEach(function(range) { %>
-    <%= range.name %>: (
-        start: <%= range.start %>,
-        end: <%= range.end %>,
-        exemplary: <%= range.exemplary %>,
-        isFirst: <%= range.isFirst %>,
-        isLast: <%= range.isLast %>
-    ),
-<% }); %>
-);
-
-@function size($value) {
-    @return #{$value/$__CNTRL_LAYOUT_WIDTH__*100}vw;
-}
-
-@mixin for($name) {
-    $start: map.get(map.get($layout, $name), "start");
-    $end: map.get(map.get($layout, $name), "end");
-    $isFirst: map.get(map.get($layout, $name), "isFirst");
-    $isLast: map.get(map.get($layout, $name), "isLast");
-    $exemplary: map.get(map.get($layout, $name), "exemplary");
-    $__CNTRL_LAYOUT_WIDTH__: $exemplary !global;
-
-    @if $isFirst == true and $isLast == true {
-        @content;
-    } @else if $isFirst == true {
-        @media (max-width: #{$end}px) {
-            @content;
-        }
-    } @else if $isLast == true {
-        @media (min-width: #{$start}px) {
-            @content;
-        }
-    } @else {
-        @media (min-width: #{$start}px) and (max-width: #{$end}px) {
-            @content;
-        }
-    }
-
-    // reset global variable back to first layout's exemplary (mobile-first)
-    $__CNTRL_LAYOUT_WIDTH__: <%= ranges[0].exemplary %> !global;
-}
+// CAUTION: THIS FILE IS AUTO-GENERATED BASED ON
+// LAYOUT CONFIGURATION IN YOUR CNTRL PROJECT
+// WE HIGHLY ADVICE YOU TO NOT CHANGE IT MANUALLY
+@use "sass:map";
+
+$__CNTRL_LAYOUT_WIDTH__: <%= ranges[0].exemplary %>;
+
+$layout: (
+<% ranges.forEach(function(range) { %>
+    <%= range.name %>: (
+        start: <%= range.start %>,
+        end: <%= range.end %>,
+        exemplary: <%= range.exemplary %>,
+        isFirst: <%= range.isFirst %>,
+        isLast: <%= range.isLast %>
+    ),
+<% }); %>
+);
+
+@function size($value) {
+    @return #{$value/$__CNTRL_LAYOUT_WIDTH__*100}vw;
+}
+
+@mixin for($name) {
+    $start: map.get(map.get($layout, $name), "start");
+    $end: map.get(map.get($layout, $name), "end");
+    $isFirst: map.get(map.get($layout, $name), "isFirst");
+    $isLast: map.get(map.get($layout, $name), "isLast");
+    $exemplary: map.get(map.get($layout, $name), "exemplary");
+    $__CNTRL_LAYOUT_WIDTH__: $exemplary !global;
+
+    @if $isFirst == true and $isLast == true {
+        @content;
+    } @else if $isFirst == true {
+        @media (max-width: #{$end}px) {
+            @content;
+        }
+    } @else if $isLast == true {
+        @media (min-width: #{$start}px) {
+            @content;
+        }
+    } @else {
+        @media (min-width: #{$start}px) and (max-width: #{$end}px) {
+            @content;
+        }
+    }
+
+    // reset global variable back to first layout's exemplary (mobile-first)
+    $__CNTRL_LAYOUT_WIDTH__: <%= ranges[0].exemplary %> !global;
+}