@workerbase/sdk - npm Package Compare versions

Comparing version 0.1.16-beta.28 to 0.1.16-beta.29

dist/example/index.js

@@ -222,9 +222,29 @@ "use strict";
 var myStep = function () { return __awaiter(void 0, void 0, void 0, function () {
-    var step;
+    var flexStep, infotext, photoStep, flexGroup;
     return __generator(this, function (_a) {
-        step = index_1.default.steps.InfoText({
-            title: 'title',
-            description: "" + index_1.richTextH1("Hello, " + index_1.richTextBold('World')),
+        flexStep = index_1.default.steps.LayoutFlex({
+            title: 'layout flex step text',
+            direction: index_1.FLEX_DIRECTION.COLUMN,
         });
-        console.log(step);
+        infotext = index_1.default.steps.InfoText({
+            title: 'Hello, world!',
+            description: 'Description of step',
+        });
+        console.log(infotext);
+        photoStep = index_1.default.steps.InfoPhoto({
+            title: 'Some Photo',
+            mediaId: '5d9f0653e762e70006ab9ecd',
+            description: '',
+        });
+        console.log(photoStep);
+        flexGroup = flexStep.createGroup({
+            direction: index_1.FLEX_DIRECTION.COLUMN,
+            flex: 8,
+        });
+        flexGroup.addStep({ flex: 10, step: infotext });
+        flexStep.addGroup(flexGroup);
+        flexStep.addStep({ flex: 1, step: photoStep });
+        flexStep.setShowAsBox(true);
+        flexStep.addButton(index_1.default.buttons.Close());
+        console.log(flexStep);
         return [2 /*return*/];
@@ -231,0 +251,0 @@ });

dist/index.d.ts

@@ -5,3 +5,2 @@ import { WorkerbaseSDK } from './WorkerbaseSDK';
 import { FlexDirection } from './resources/steps/LayoutFlexStep';
-import { alignCenter, alignLeft, alignRight, bold, h1, h2, h3, italic, underline } from './utils/richTextSupport';
 export declare const FLEX_DIRECTION: typeof FlexDirection;
@@ -13,12 +12,3 @@ export declare const STATUS_SCREEN_ICONS: typeof StatusScreenIcon;
 export declare const LIST_OPTIONS_SOURCE: typeof ListOptionsSource;
-export declare const richTextH1: typeof h1;
-export declare const richTextH2: typeof h2;
-export declare const richTextH3: typeof h3;
-export declare const richTextItalic: typeof italic;
-export declare const richTextBold: typeof bold;
-export declare const richTextUnderline: typeof underline;
-export declare const richTextAlignLeft: typeof alignLeft;
-export declare const richTextAlignRight: typeof alignRight;
-export declare const richTextAlignCenter: typeof alignCenter;
 export declare const workerbase: WorkerbaseSDK;
 export default workerbase;

dist/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.workerbase = exports.richTextAlignCenter = exports.richTextAlignRight = exports.richTextAlignLeft = exports.richTextUnderline = exports.richTextBold = exports.richTextItalic = exports.richTextH3 = exports.richTextH2 = exports.richTextH1 = exports.LIST_OPTIONS_SOURCE = exports.OPTION_ICONS = exports.STATUS_SCREEN_COLORS = exports.ACTION_ICONS = exports.STATUS_SCREEN_ICONS = exports.FLEX_DIRECTION = void 0;
+exports.workerbase = exports.LIST_OPTIONS_SOURCE = exports.OPTION_ICONS = exports.STATUS_SCREEN_COLORS = exports.ACTION_ICONS = exports.STATUS_SCREEN_ICONS = exports.FLEX_DIRECTION = void 0;
 var WorkerbaseSDK_1 = require("./WorkerbaseSDK");
@@ -8,3 +8,2 @@ var WorkerbaseIcon_1 = require("./resources/WorkerbaseIcon");
 var LayoutFlexStep_1 = require("./resources/steps/LayoutFlexStep");
-var richTextSupport_1 = require("./utils/richTextSupport");
 exports.FLEX_DIRECTION = LayoutFlexStep_1.FlexDirection;
@@ -16,11 +15,2 @@ exports.STATUS_SCREEN_ICONS = WorkerbaseIcon_1.StatusScreenIcon;
 exports.LIST_OPTIONS_SOURCE = steps_1.ListOptionsSource;
-exports.richTextH1 = richTextSupport_1.h1;
-exports.richTextH2 = richTextSupport_1.h2;
-exports.richTextH3 = richTextSupport_1.h3;
-exports.richTextItalic = richTextSupport_1.italic;
-exports.richTextBold = richTextSupport_1.bold;
-exports.richTextUnderline = richTextSupport_1.underline;
-exports.richTextAlignLeft = richTextSupport_1.alignLeft;
-exports.richTextAlignRight = richTextSupport_1.alignRight;
-exports.richTextAlignCenter = richTextSupport_1.alignCenter;
 exports.workerbase = new WorkerbaseSDK_1.Workerbase();
@@ -36,12 +26,3 @@ exports.default = exports.workerbase;
 module.exports.LIST_OPTIONS_SOURCE = exports.LIST_OPTIONS_SOURCE;
-module.exports.richTextH1 = exports.richTextH1;
-module.exports.richTextH2 = exports.richTextH2;
-module.exports.richTextH3 = exports.richTextH3;
-module.exports.richTextItalic = exports.richTextItalic;
-module.exports.richTextBold = exports.richTextBold;
-module.exports.richTextUnderline = exports.richTextUnderline;
-module.exports.richTextAlignLeft = exports.richTextAlignLeft;
-module.exports.richTextAlignRight = exports.richTextAlignRight;
-module.exports.richTextAlignCenter = exports.richTextAlignCenter;
 module.exports.default = exports.workerbase;
 //# sourceMappingURL=index.js.map

dist/resources/steps/LayoutFlexStep.d.ts

@@ -7,2 +7,6 @@ import { Step } from '../../types/steps';
 }
+declare enum FlexChildType {
+    STEP = "step",
+    FLEX = "flex"
+}
 export default class LayoutFlexStep extends StepBase {
@@ -25,8 +29,8 @@ direction: FlexDirection;
     addGroup(group: FlexGroup): void;
+    setStylesOfFlexChildStep(step: Step): void;
+    setShowAsBox(showAsBox: boolean): void;
+    setHideTitleBar(hideTitleBar: boolean): void;
+    private setStyles;
 }
 export declare type FlexChild = FlexChildStep | FlexGroup;
-declare enum FlexChildType {
-    STEP = "step",
-    FLEX = "flex"
-}
 declare class FlexChildBase {
@@ -33,0 +37,0 @@ flex: number;

dist/resources/steps/LayoutFlexStep.js

@@ -15,4 +15,16 @@ "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 });
 exports.FlexGroup = exports.FlexChildStep = exports.FlexDirection = void 0;
+/* eslint-disable no-param-reassign */
 var steps_1 = require("../../types/steps");
@@ -28,2 +40,7 @@ var StepBase_1 = require("./utils/StepBase");
 exports.FlexDirection = FlexDirection;
+var FlexChildType;
+(function (FlexChildType) {
+    FlexChildType["STEP"] = "step";
+    FlexChildType["FLEX"] = "flex";
+})(FlexChildType || (FlexChildType = {}));
 var LayoutFlexStep = /** @class */ (function (_super) {
@@ -50,10 +67,53 @@ __extends(LayoutFlexStep, _super);
     };
+    LayoutFlexStep.prototype.setStylesOfFlexChildStep = function (step) {
+        if (step.showAsBox) {
+            var boxStyles = {
+                backgroundColor: '#2d3b48',
+                title: {
+                    color: '#ffffff',
+                    backgroundColor: '#354555',
+                },
+            };
+            step.styles = __assign(__assign({}, boxStyles), step.styles);
+            step.hideTitleBar = false;
+        }
+        else {
+            step.hideTitleBar = true;
+        }
+    };
+    LayoutFlexStep.prototype.setShowAsBox = function (showAsBox) {
+        this.showAsBox = showAsBox;
+        if (showAsBox) {
+            this.setStyles();
+            this.hideTitleBar = false;
+        }
+        else {
+            this.hideTitleBar = true;
+            this.styles = undefined;
+        }
+    };
+    LayoutFlexStep.prototype.setHideTitleBar = function (hideTitleBar) {
+        this.hideTitleBar = hideTitleBar;
+        if (hideTitleBar) {
+            this.styles = undefined;
+            this.showAsBox = false;
+        }
+        else {
+            this.showAsBox = true;
+            this.setStyles();
+        }
+    };
+    LayoutFlexStep.prototype.setStyles = function () {
+        var boxStyles = {
+            backgroundColor: '#2d3b48',
+            title: {
+                color: '#ffffff',
+                backgroundColor: '#354555',
+            },
+        };
+        this.styles = __assign(__assign({}, boxStyles), this.styles);
+    };
     return LayoutFlexStep;
 }(StepBase_1.StepBase));
 exports.default = LayoutFlexStep;
-var FlexChildType;
-(function (FlexChildType) {
-    FlexChildType["STEP"] = "step";
-    FlexChildType["FLEX"] = "flex";
-})(FlexChildType || (FlexChildType = {}));
 var FlexChildBase = /** @class */ (function () {
@@ -60,0 +120,0 @@ function FlexChildBase(props) {

dist/resources/steps/utils/StepBase.d.ts

 import { Button } from '../../../types/buttons';
 import { ListOptionsSource, WorkinstructionStepType } from '../../../types/steps';
+import { StepStyles } from './Styles';
 export declare class StepBase {
@@ -10,2 +11,5 @@ id: string;
     loadVariablesFromUrl?: string;
+    showAsBox?: boolean;
+    hideTitleBar?: boolean;
+    styles?: StepStyles;
     constructor(props: {
@@ -12,0 +16,0 @@ type: WorkinstructionStepType;

dist/resources/steps/utils/StepBase.js

@@ -37,2 +37,4 @@ "use strict";
         this.buttons = [];
+        this.showAsBox = false;
+        this.hideTitleBar = false;
     }
@@ -39,0 +41,0 @@ StepBase.prototype.addButton = function (button) {

dist/resources/steps/utils/Styles.d.ts

@@ -8,4 +8,9 @@ export declare enum ImageScaleType {
 }
+declare class TextStyles {
+    color?: string;
+    backgroundColor?: string;
+}
 export declare class StepStyles {
     backgroundColor?: string;
+    title?: TextStyles;
 }
@@ -15,1 +20,2 @@ export declare class InfoPhotoStyles extends StepStyles {
 }
+export {};

dist/resources/steps/utils/Styles.js

@@ -28,2 +28,7 @@ "use strict";
 exports.ImageStyles = ImageStyles;
+var TextStyles = /** @class */ (function () {
+    function TextStyles() {
+    }
+    return TextStyles;
+}());
 var StepStyles = /** @class */ (function () {
@@ -30,0 +35,0 @@ function StepStyles() {

package.json

 {
   "name": "@workerbase/sdk",
-  "version": "0.1.16-beta.28",
+  "version": "0.1.16-beta.29",
   "description": "",
@@ -5,0 +5,0 @@ "scripts": {

README.md

@@ -656,7 +656,4 @@ # Workerbase SDK for JavaScript
 });
-flexStep.addButton(workerbase.buttons.Finish({}));
-flexStep.addButtons([
-  workerbase.buttons.Close({}),
-  workerbase.buttons.Suspend({}),
-]);
+flexStep.addButton(workerbase.buttons.Finish());
+flexStep.addButtons([workerbase.buttons.Close(), workerbase.buttons.Suspend()]);
 
@@ -736,5 +733,5 @@ const flexGroup = flexStep.createGroup({
 
-Each step has an optional `id` value. If it is not set by the user, the SDK will assign a value to it.
+Each step has an optional `id` value. If it is not set by the user, the SDK will auto-generate a value for it.
 
-For each step, buttons can be added as follows:
+For each step, the following functions can be called:
 
@@ -747,9 +744,42 @@ ```typescript
 
-step.addButton(workerbase.buttons.Close({}));
-step.addButtons([
-  workerbase.buttons.Finish({}),
-  workerbase.buttons.Suspend({}),
-]);
+// Add one function
+step.addButton(workerbase.buttons.Close());
+
+// Add multiple buttons
+step.addButtons([workerbase.buttons.Finish(), workerbase.buttons.Suspend()]);
+
+// Set maxTime:
+step.setMaxTime(100);
+
+// Load variables from a function:
+step.setLoadVariablesFromUrl('functionId');
 ```
 
+For each step with a `description` variable, you can add rich text support via HTML:
+
+```typescript
+// H1
+const description = '<h1> Hello, World! </h1>';
+// H2
+const description2 = '<h2> Hello, World! </h2>';
+// H3
+const description3 = '<h3> Hello, World! </h3>';
+// Bold
+const description4 = '<strong> Hello, World! </strong>';
+// Italic
+const description5 = '<em> Hello, World! </em>';
+// Underline
+const description6 = '<u> Hello, World! </u>';
+// Align Left
+const description7 = '<div style="text-align: left;"> Hello, World! </div>';
+// Align Center
+const description8 = '<div style="text-align: center;"> Hello, World! </div>';
+// Align Right
+const description9 = '<div style="text-align: right;"> Hello, World! </div>';
+
+// More complex descriptions can be built with this:
+const description10 =
+  '<div style="text-align: center;"><h1>Hello, <em>World.</em></h1></div> What a <u>wonderful</u> day.';
+```
+
 - **Info Text Step**
@@ -1360,4 +1390,4 @@ ```typescript
 flexStep.addButtons([
-  workerbase.buttons.Suspend({}),
-  workerbase.buttons.Finish({}),
+  workerbase.buttons.Suspend(),
+  workerbase.buttons.Finish(),
 ]);
@@ -1364,0 +1394,0 @@

No alert changes

Improved metrics

Total package byte prevSize

674823

increased by0.54%

Lines of code

11347

increased by0.63%

Number of lines in readme file

1464

increased by2.09%

No dependency changes