@paperbits/styles - npm Package Compare versions

Comparing version 0.1.596 to 0.1.597

contracts/themeContract.ts

@@ -12,2 +12,7 @@ import { Bag } from "@paperbits/common";
     /**
+     * Contract schema version.
+     */
+    schemaVersion?: number;
+
+    /**
      * Font definitions.
@@ -14,0 +19,0 @@ */

defaultStyleCompiler.ts

@@ -191,3 +191,3 @@ import * as Utils from "@paperbits/common/utils";
 
-        this.generateAdditionalStyle(themeContract.components);
+        // this.generateAdditionalStyle(themeContract.components);
 
@@ -344,2 +344,4 @@ Objects.cleanupObject(themeContract, { collapseNulls: true });
 
+                resultStyle.modifierStyles.push(...pseudoStyles);
+
                 const nestedStyles = await plugin.configToNestedStyles(pluginConfig);
@@ -346,0 +348,0 @@

ko/bindingHandlers/bindingHandlers.styleable.ts

 import * as ko from "knockout";
-import { Styleable } from "@paperbits/common/styles";
+import { Styleable } from "../../contracts/styleable";
 
@@ -4,0 +4,0 @@

ko/bindingHandlers/bindingHandlers.styleableGlobal.ts

 import * as ko from "knockout";
-import { Styleable } from "@paperbits/common/styles";
+import { Styleable } from "../../contracts/styleable";
 import { StyleService } from "../../styleService";
@@ -9,3 +9,3 @@
         ko.bindingHandlers["styleableGlobal"] = {
-            update: async (element: HTMLElement, valueAccessor) => {
+            update: async (element: HTMLElement, valueAccessor, allBindings, bindingContext) => {
                 const config = ko.unwrap(valueAccessor());
@@ -17,4 +17,2 @@
 
-                let styleable: Styleable;
-
                 const style = await this.styleService.getStyleByKey(styleKey);
@@ -26,30 +24,28 @@
 
-                const backgroundObservable = ko.observable();
+                const variationCard = bindingContext;
+                const toggleBackground = () => variationCard.toggleBackground();
 
-                let mode = 1;
+                let currentStateClass: string;
 
-                const toggleBackground = () => {
-                    switch (mode) {
-                        case 0:
-                            backgroundObservable(null);
-                            mode = 1;
-                            break;
-                            
-                        case 1:
-                            backgroundObservable("transparent");
-                            mode = 2;
-                            break;
+                const stateObservable = ko.observable();
 
-                        case 2:
-                            backgroundObservable("dark");
-                            mode = 0;
-                            break;
+                const setState = (state: string): void => {
+                    if (currentStateClass) {
+                        element.classList.remove(currentStateClass);
                     }
-                };
 
-                ko.applyBindingsToNode(element, { css: backgroundObservable }, null);
+                    if (state) {
+                        element.classList.add(state);
+                    }
 
-                styleable = {
+                    currentStateClass = state;
+                    stateObservable(state);
+                }
+
+                const styleable: Styleable = {
                     style: style,
-                    toggleBackground: toggleBackground
+                    toggleBackground: toggleBackground,
+                    setState: setState,
+                    state: stateObservable,
+                    variationCard: variationCard
                 };
@@ -56,0 +52,0 @@

package.json

 {
     "name": "@paperbits/styles",
-    "version": "0.1.596",
+    "version": "0.1.597",
     "description": "Paperbits style editors.",
@@ -19,3 +19,3 @@ "author": "Paperbits",
     "dependencies": {
-        "@paperbits/common": "0.1.596",
+        "@paperbits/common": "0.1.597",
         "@simonwep/pickr": "^1.7.4",
@@ -22,0 +22,0 @@ "jss": "^10.4.0",

styleGuide/styleGuide.ts

@@ -9,7 +9,7 @@ import * as ko from "knockout";
 import { Component, OnDestroyed, OnMounted } from "@paperbits/common/ko/decorators";
-import { IStyleGroup, Styleable, StyleCompiler, StyleManager, VariationContract } from "@paperbits/common/styles";
+import { Styleable } from "../contracts/styleable";
+import { IStyleGroup, StyleCompiler, StyleManager, VariationContract } from "@paperbits/common/styles";
 import { ActiveElement, IContextCommandSet, IHighlightConfig, View, ViewManager, ViewManagerMode } from "@paperbits/common/ui";
 import { ColorContract, FontContract, LinearGradientContract, ShadowContract } from "../contracts";
 import { ComponentStyle } from "../contracts/componentStyle";
-import { StyleItem } from "../models/styleItem";
 import { OpenTypeFontGlyph } from "../openType";
@@ -19,2 +19,63 @@ import { StyleService } from "../styleService";
 
+
+
+export class ComponentCard {
+    public name: string;
+    public displayName: ko.Observable<string>;
+    public backgroundClassName: ko.Observable<string>;
+    public itemTemplate: string;
+
+    public variationCards: ko.ObservableArray<ComponentVariationCard>;
+
+    constructor(public componentStyle: ComponentStyle) {
+        this.itemTemplate = componentStyle.itemTemplate;
+        this.name = componentStyle.name;
+        this.displayName = ko.observable(componentStyle.displayName);
+        this.backgroundClassName = ko.observable(null);
+
+        const self = this;
+
+        const variationCards = componentStyle.variations.map(variation => new ComponentVariationCard(self, variation));
+        this.variationCards = ko.observableArray(variationCards);
+    }
+}
+
+export class ComponentVariationCard {
+    private mode = 1;
+    public displayName: ko.Observable<string>;
+    public backgroundClassName: ko.Observable<string>;
+    public key: string;
+
+    constructor(private component: ComponentCard, public variation: VariationContract) {
+        this.displayName = ko.observable(variation.displayName);
+        this.backgroundClassName = ko.observable(null);
+        this.key = variation.key;
+    }
+
+    public toggleBackground = () => {
+        switch (this.mode) {
+            case 0:
+                this.backgroundClassName(null);
+                this.mode = 1;
+                break;
+
+            case 1:
+                this.backgroundClassName("transparent");
+                this.mode = 2;
+                break;
+
+            case 2:
+                this.backgroundClassName("dark");
+                this.mode = 0;
+                break;
+        }
+
+        console.log(this.backgroundClassName());
+    };
+
+    public delete(): void {
+        this.component.variationCards.remove(this);
+    }
+}
+
 @Component({
@@ -33,2 +94,4 @@ selector: "style-guide",
 
+    public readonly working: ko.Observable<boolean>;
+
     public readonly styles: ko.Observable<any>;
@@ -47,3 +110,3 @@ public readonly textBlocks: ko.ObservableArray<any>;
     public readonly navBars: ko.ObservableArray<any>;
-    public readonly uiComponents: ko.ObservableArray<ComponentStyle>;
+    public readonly uiComponents: ko.ObservableArray<ComponentCard>;
 
@@ -66,2 +129,3 @@ constructor(
 
+        this.working = ko.observable(true);
         this.styles = ko.observable();
@@ -93,4 +157,8 @@ this.colors = ko.observableArray([]);
                         this.viewManager.closeView();
-                        await this.applyChanges();
 
+                        this.refreshFonts();
+                        this.rebuildStyleSheet();
+
+                        this.refreshFonts();
+
                         if (!custom) {
@@ -108,3 +176,5 @@ return;
                                         await this.styleService.updateStyle(font);
-                                        this.applyChanges();
+
+                                        this.refreshFonts();
+                                        this.rebuildStyleSheet();
                                     }
@@ -128,9 +198,9 @@ }
         await this.styleService.removeStyle(contract.key);
+
         if (contract.key.startsWith("components/")) {
-            const parts = contract.key.split("/");
-            const componentName = parts[1];
-            await this.onUpdateStyle(componentName);
-        } else {
-            this.applyChanges();
         }
+        else {
+            this.refreshComponents();
+            this.rebuildStyleSheet();
+        }
     }
@@ -184,3 +254,5 @@
                         this.viewManager.closeView();
-                        this.applyChanges();
+
+                        this.refreshIcons();
+                        this.rebuildStyleSheet();
                     }
@@ -200,3 +272,5 @@ }
         await this.styleService.removeStyle(color.key);
-        this.applyChanges();
+
+        this.refreshColors();
+        this.rebuildStyleSheet();
     }
@@ -206,3 +280,5 @@
         await this.styleService.removeStyle(gradient.key);
-        this.applyChanges();
+
+        this.refreshGradients();
+        this.rebuildStyleSheet();
     }
@@ -219,3 +295,5 @@
                         await this.styleService.updateStyle(color);
-                        this.applyChanges();
+
+                        this.refreshColors();
+                        this.rebuildStyleSheet();
                     }
@@ -240,3 +318,5 @@ }
                         await this.styleService.updateStyle(gradient);
-                        this.applyChanges();
+
+                        this.refreshGradients();
+                        this.rebuildStyleSheet();
                     }
@@ -262,3 +342,5 @@ }
                         await this.styleService.updateStyle(shadow);
-                        this.applyChanges();
+
+                        this.refreshShadows();
+                        this.rebuildStyleSheet();
                     }
@@ -274,4 +356,29 @@ }
 
-    public selectStyle(style: VariationContract): boolean {
+    public selectComponent(variationCard: ComponentVariationCard): boolean {
         const view: View = {
+            heading: variationCard.variation.displayName,
+            component: {
+                name: "style-editor",
+                params: {
+                    elementStyle: variationCard.variation,
+                    onUpdate: async () => {
+                        await this.styleService.updateStyle(variationCard.variation);
+
+                        this.refreshTextVariations();
+                        this.rebuildStyleSheet();
+                    },
+                    onRename: () => {
+                        this.refreshComponents();
+                    }
+                }
+            },
+            resizing: "vertically horizontally"
+        };
+
+        this.viewManager.openViewAsPopup(view);
+        return true;
+    }
+
+    public selectTextStyle(style: VariationContract): boolean {
+        const view: View = {
             heading: style.displayName,
@@ -285,10 +392,4 @@ component: {
 
-                        if (style.key.startsWith("components/")) {
-                            const parts = style.key.split("/");
-                            const componentName = parts[1];
-
-                            await this.onUpdateStyle(componentName);
-                        }
-
-                        await this.applyChanges();
+                        this.refreshTextVariations();
+                        this.rebuildStyleSheet();
                     }
@@ -312,8 +413,8 @@ }
 
-        this.selectStyle(addedItem);
+        this.selectTextStyle(addedItem);
     }
 
-    public async openInEditor(componentName: string, snippet?: ComponentStyle): Promise<void> {
+    public async addComponentVariation(componentName: string, componentCard?: ComponentCard): Promise<void> {
         const variationName = `${Utils.identifier().toLowerCase()}`; // TODO: Replace name with kebab-like name.
-        let defaultVariation = snippet.variations.find(x => x.key === `components/${componentName}/default`);
+        let defaultVariation = componentCard.componentStyle.variations.find(x => x.key === `components/${componentName}/default`);
 
@@ -326,36 +427,55 @@ if (!defaultVariation) {
         const addedStyleKey = await this.styleService.addComponentVariation(componentName, variationName, defaultVariation);
-        const addedStyle = await this.styleService.getStyleByKey(addedStyleKey);
+        const addedVariation = await this.styleService.getStyleByKey(addedStyleKey);
 
-        this.selectStyle(addedStyle);
+        const variationCard = new ComponentVariationCard(componentCard, addedVariation);
+        componentCard.variationCards.push(variationCard);
 
-        await this.onUpdateStyle(componentName);
+        this.selectComponent(variationCard);
     }
 
-    private async onUpdateStyle(componentName: string): Promise<void> {
-        const components = this.uiComponents();
-        const old = components.find(c => c.name === componentName);
+    public async applyChanges(): Promise<void> {
+        this.refreshColors();
+        this.refreshGradients();
+        this.refreshShadows();
+        this.refreshIcons();
+        this.refreshTextVariations();
+        this.refreshComponents();
 
-        if (old) {
-            const updated = await this.getComponentsStyles();
-            const updatedItem = updated.find(c => c.name === componentName);
-            this.uiComponents.replace(old, updatedItem);
-        }
+        this.rebuildStyleSheet();
     }
 
-    public async applyChanges(): Promise<void> {
-        const styles = await this.styleService.getStyles();
+    private async rebuildStyleSheet(): Promise<void> {
+        const styleManager = new StyleManager(this.eventManager);
+        const styleSheet = await this.styleCompiler.getStyleSheet();
+        styleManager.setStyleSheet(styleSheet);
+    }
 
+
+    private async refreshFonts(): Promise<void> {
         const fonts = await this.styleService.getFonts();
+        this.fonts([]);
         this.fonts(fonts.filter(x => x.key !== "fonts/icons"));
+    }
 
+    private async refreshColors(): Promise<void> {
         const colors = await this.styleService.getColors();
+        this.colors([]);
         this.colors(this.sortByDisplayName(colors));
+    }
 
+    private async refreshGradients(): Promise<void> {
         const gradients = await this.styleService.getGadients();
+        this.gradients([]);
         this.gradients(this.sortByDisplayName(gradients));
+    }
 
+    private async refreshShadows(): Promise<void> {
         const shadows = await this.styleService.getShadows();
+        this.shadows([]);
         this.shadows(shadows);
+    }
 
+    private async refreshIcons(): Promise<void> {
         const icons = await this.styleService.getIcons();
+
         const extendedIcons = icons.map(icon => ({
@@ -369,14 +489,13 @@ key: icon.key,
         this.icons(extendedIcons);
+    }
 
+    private async refreshTextVariations(): Promise<void> {
         const textVariations = await this.styleService.getTextVariations();
+        this.textStyles([]);
         this.textStyles(textVariations);
+    }
 
+    private async refreshComponents(): Promise<void> {
         const components = await this.getComponentsStyles();
-        this.uiComponents(components);
-
-        this.styles(styles);
-
-        const styleManager = new StyleManager(this.eventManager);
-        const styleSheet = await this.styleCompiler.getStyleSheet();
-        styleManager.setStyleSheet(styleSheet);
+        this.uiComponents(components.map(x => new ComponentCard(x)));
     }
@@ -440,5 +559,4 @@
     @OnMounted()
-    public initialize(): void {
+    public async initialize(): Promise<void> {
         this.viewManager.mode = ViewManagerMode.selecting;
-        this.applyChanges();
         this.ownerDocument = this.viewManager.getHostDocument();
@@ -453,2 +571,12 @@ this.ownerDocument.addEventListener(Events.MouseMove, this.onPointerMove, true);
         });
+
+        this.refreshColors();
+        this.refreshFonts();
+        this.refreshGradients();
+        this.refreshShadows();
+        this.refreshIcons();
+        this.refreshTextVariations();
+        this.refreshComponents();
+
+        this.working(false);
     }
@@ -594,36 +722,4 @@
 
-        if (this.canBeDeleted(style.key)) {
-            styleContextualEditor.deleteCommand = {
-                controlType: "toolbox-button",
-                tooltip: "Delete",
-                color: "#607d8b",
-                doNotClearSelection: true,
-                component: {
-                    name: "confirmation",
-                    params: {
-                        getMessage: async () => {
-                            const references = await this.styleService.checkStyleIsInUse(style.key);
-                            const styleNames = references.map(x => x.displayName).join(`", "`);
 
-                            let message = `Are you sure you want to delete this style?`;
 
-                            if (styleNames) {
-                                message += ` It is referenced by "${styleNames}".`;
-                            }
-
-                            return message;
-                        },
-                        onConfirm: () => {
-                            this.removeStyle(style);
-                            this.viewManager.clearContextualCommands();
-                            this.viewManager.notifySuccess("Styles", `Style "${style.displayName}" was deleted.`);
-                        },
-                        onDecline: () => {
-                            this.viewManager.clearContextualCommands();
-                        }
-                    }
-                }
-            };
-        }
-
         if (style.key.startsWith("icons/")) {
@@ -643,5 +739,8 @@ styleContextualEditor.deleteCommand = {
                             await this.styleService.removeIcon(style.key);
-                            await this.applyChanges();
+
+                            this.refreshIcons();
+                            this.rebuildStyleSheet();
+
                             this.viewManager.clearContextualCommands();
-                            this.viewManager.notifySuccess("Styles", `Style "${style.displayName}" was deleted.`);
+                            this.viewManager.notifySuccess("Styles", `Icon "${style.displayName}" was deleted.`);
                         },
@@ -664,3 +763,2 @@ onDecline: () => {
             });
-            styleContextualEditor.selectCommands.push({ controlType: "toolbox-splitter" });
         }
@@ -676,3 +774,2 @@
             });
-            styleContextualEditor.selectCommands.push({ controlType: "toolbox-splitter" });
         }
@@ -688,11 +785,9 @@
             });
-            styleContextualEditor.selectCommands.push({ controlType: "toolbox-splitter" });
         }
 
-        if (style.key.startsWith("components/") || style.key.startsWith("globals/")) {
+        if (style.key.startsWith("fonts/")) {
             styleContextualEditor.selectCommands.push({
                 name: "edit",
                 controlType: "toolbox-button",
-                displayName: "Edit style",
-                // iconClass: "paperbits-icon paperbits-edit-72",
+                displayName: "Edit font",
                 position: "top right",
@@ -704,8 +799,9 @@ color: "#607d8b",
                         component: {
-                            name: "style-editor",
+                            name: "font-editor",
                             params: {
-                                elementStyle: style,
-                                onUpdate: async () => {
+                                font: style,
+                                onChange: async () => {
                                     await this.styleService.updateStyle(style);
-                                    this.applyChanges();
+                                    this.refreshFonts();
+                                    this.rebuildStyleSheet();
                                 }
@@ -720,31 +816,71 @@ }
             });
-
-            styleContextualEditor.selectCommands.push({ controlType: "toolbox-splitter" });
         }
 
-        if (!style.key.startsWith("colors/") &&
-            !style.key.startsWith("icons/") &&
-            !style.key.startsWith("fonts/") &&
-            !style.key.startsWith("shadows/") &&
-            !style.key.startsWith("gradients/") &&
-            !style.key.includes("/components/") // sub-components
-        ) {
+        const getDisplayName = ko.computed(() => {
+            return styleable.state()
+                ? `Edit style (:${styleable.state()})`
+                : `Edit style`
+        });
+
+        if (style.key.startsWith("components/")) {
             styleContextualEditor.selectCommands.push({
-                name: "background",
+                name: "edit",
                 controlType: "toolbox-button",
-                tooltip: "Change background",
-                iconClass: "paperbits-icon paperbits-drop",
+                displayName: getDisplayName,
+                // iconClass: "paperbits-icon paperbits-edit-72",
                 position: "top right",
                 color: "#607d8b",
                 callback: () => {
-                    styleable.toggleBackground();
+                    const view: View = {
+                        heading: style.displayName,
+                        component: {
+                            name: "style-editor",
+                            params: {
+                                elementStyle: style,
+                                onUpdate: async () => {
+                                    await this.styleService.updateStyle(style);
+                                    this.rebuildStyleSheet();
+                                },
+                                currentState: styleable.state(),
+                                onStateChange: (state: string): void => {
+                                    styleable.setState(state);
+                                    this.rebuildStyleSheet();
+                                },
+                                onRename: () => {
+                                    this.refreshComponents();
+                                }
+                            }
+                        },
+                        resizing: "vertically horizontally"
+                    };
+
+                    this.viewManager.openViewAsPopup(view);
                 }
             });
+
+            if (style["allowedStates"]?.length > 1) {
+                styleContextualEditor.selectCommands.push({
+                    tooltip: "Select state",
+                    iconClass: "paperbits-icon paperbits-small-down",
+                    controlType: "toolbox-dropdown",
+                    component: {
+                        name: "state-selector",
+                        params: {
+                            states: style["allowedStates"],
+                            selectedState: styleable.state,
+                            onSelect: (state: string): void => {
+                                styleable.setState(state);
+                            }
+                        }
+                    }
+                });
+            }
         }
 
-        if (style.key.startsWith("fonts/")) {
+        if (style.key.startsWith("globals/")) {
             styleContextualEditor.selectCommands.push({
                 name: "edit",
                 controlType: "toolbox-button",
-                displayName: "Edit font",
+                displayName: "Edit style",
+                // iconClass: "paperbits-icon paperbits-edit-72",
                 position: "top right",
@@ -756,8 +892,11 @@ color: "#607d8b",
                         component: {
-                            name: "font-editor",
+                            name: "style-editor",
                             params: {
-                                font: style,
-                                onChange: async () => {
+                                elementStyle: style,
+                                onUpdate: async () => {
                                     await this.styleService.updateStyle(style);
-                                    this.applyChanges();
+                                    this.rebuildStyleSheet();
+                                },
+                                onRename: () => {
+                                    this.refreshTextVariations();
                                 }
@@ -774,2 +913,61 @@ }
 
+        if (!style.key.startsWith("colors/") &&
+            !style.key.startsWith("icons/") &&
+            !style.key.startsWith("fonts/") &&
+            !style.key.startsWith("shadows/") &&
+            !style.key.startsWith("gradients/") &&
+            !style.key.includes("/components/") // sub-components
+        ) {
+            styleContextualEditor.selectCommands.push({ controlType: "toolbox-splitter" });
+
+            styleContextualEditor.selectCommands.push({
+                name: "background",
+                controlType: "toolbox-button",
+                tooltip: "Change background",
+                iconClass: "paperbits-icon paperbits-drop",
+                position: "top right",
+                color: "#607d8b",
+                callback: () => styleable.toggleBackground()
+            });
+        }
+
+        if (this.canBeDeleted(style.key)) {
+            if (styleContextualEditor.selectCommands.length == 1) {
+                styleContextualEditor.selectCommands.push({ controlType: "toolbox-splitter" });
+            }
+
+            styleContextualEditor.deleteCommand = {
+                controlType: "toolbox-button",
+                tooltip: "Delete",
+                color: "#607d8b",
+                doNotClearSelection: true,
+                component: {
+                    name: "confirmation",
+                    params: {
+                        getMessage: async () => {
+                            const references = await this.styleService.checkStyleIsInUse(style.key);
+                            const styleNames = references.map(x => x.displayName).join(`", "`);
+
+                            let message = `Are you sure you want to delete this style?`;
+
+                            if (styleNames) {
+                                message += ` It is referenced by "${styleNames}".`;
+                            }
+
+                            return message;
+                        },
+                        onConfirm: () => {
+                            styleable.variationCard.delete();
+                            this.removeStyle(style);
+                            this.viewManager.clearContextualCommands();
+                            this.viewManager.notifySuccess("Styles", `Style "${style.displayName}" was deleted.`);
+                        },
+                        onDecline: () => {
+                            this.viewManager.clearContextualCommands();
+                        }
+                    }
+                }
+            };
+        }
+
         return styleContextualEditor;
@@ -776,0 +974,0 @@ }

styles.design.module.ts

@@ -36,6 +36,4 @@ /**
 import { Container } from "./workshops/container/container";
-import { StyleSnippetSelector } from "./workshops/snippets/styleSnippetSelector";
 import { StyleSnippetService } from "./styleSnippetService";
 import { StyleSnippet } from "./workshops/snippets/styleSnippet";
-import { StyleVariationSelector } from "./workshops/snippets/styleVariationSelector";
 import { StyledBindingHandler } from "./ko/bindingHandlers";
@@ -53,2 +51,4 @@ import { OptionSelectorEditor } from "./workshops/optionSelector/optionSelectorEditor";
 import { SizeInput } from "./workshops/size/size-input";
+import { DefaultMigrationService } from "./migrations/defaultMigrationService";
+import { StateSelector } from "./plugins/state/stateSelector";
 
@@ -82,2 +82,3 @@ export class StylesDesignModule implements IInjectorModule {
         injector.bind("animationEditor", AnimationEditor);
+        injector.bind("stateEditor", StateSelector);
         injector.bindSingleton("styleService", StyleService);
@@ -92,4 +93,2 @@ injector.bindSingleton("styleCompiler", DefaultStyleCompiler);
         injector.bind("styleSnippet", StyleSnippet);
-        injector.bind("styleSnippetSelector", StyleSnippetSelector);
-        injector.bind("styleVariationSelector", StyleVariationSelector);
         injector.bindSingleton("styleSnippetService", StyleSnippetService);
@@ -103,3 +102,4 @@ injector.bindToCollection("autostart", StylesheetBindingHandler);
         injector.bindToCollection("permalinkResolvers", FontPermalinkResolver, "fontPermalinkResolver");
+        injector.bindSingleton("migrationService", DefaultMigrationService);
     }
 }

styles.publish.module.ts

@@ -16,2 +16,3 @@ /**
 import { LocalStyleHtmlPagePublisherPlugin } from "./publishing/localStylesHtmlPagePublisherPlugin";
+import { DefaultMigrationService } from "./migrations/defaultMigrationService";
 
@@ -28,3 +29,4 @@
         injector.bindToCollectionAsSingletone("htmlPagePublisherPlugins", LocalStyleHtmlPagePublisherPlugin);
+        injector.bindSingleton("migrationService", DefaultMigrationService);
     }
 }

styleService.ts

@@ -15,2 +15,3 @@ import * as _ from "lodash";
 import { ISettingsProvider } from "@paperbits/common/configuration";
+import { MigrationService } from "./migrations/migrationService";
 
@@ -21,2 +22,4 @@
 export class StyleService {
+    private stylesObject: ThemeContract;
+
     constructor(
@@ -27,3 +30,4 @@ private readonly objectStorage: IObjectStorage,
         private readonly settingsProvider: ISettingsProvider,
-        private readonly httpClient: HttpClient
+        private readonly httpClient: HttpClient,
+        private readonly migrationService: MigrationService
     ) { }
@@ -36,5 +40,9 @@
     /**
-     * Returns object with the whole theme styles.
+     * Returns object with the theme styles.
      */
     public async getStyles(): Promise<ThemeContract> {
+        if (this.stylesObject) {
+            return this.stylesObject;
+        }
+
         const stylesObject = await this.objectStorage.getObject<ThemeContract>(stylesPath);
@@ -46,6 +54,36 @@
 
+        await this.migrationService.migrateTheme(stylesObject);
+        this.stylesObject = stylesObject;
+
         return stylesObject;
     }
 
-    public async getStyleByKey(styleKey: string): Promise<any> {
+    public async backfillLocalStyles(localStyles: LocalStyles, styleDefinition: StyleDefinition): Promise<void> {
+        StyleHelper.backfillLocalStyles(styleDefinition, localStyles);
+
+        if (styleDefinition.colors) { // in case style definition require global styles
+            await this.backfillGlobalStyles(styleDefinition);
+        }
+    }
+
+    public async backfillGlobalStyles(definition: StyleDefinition): Promise<void> {
+        const styles = await this.getStyles();
+        const colorNames = Object.keys(definition.colors);
+
+        colorNames.forEach(colorName => {
+            const colorDefinition = definition.colors[colorName];
+            const colorKey = `colors/${colorName}`;
+
+            Objects.setValue(colorKey, styles, {
+                key: colorKey,
+                displayName: colorDefinition.displayName,
+                value: colorDefinition.defaults.value
+            });
+        });
+
+        this.updateStyles(styles);
+    }
+
+
+    public async getStyleByKey(styleKey: string): Promise<VariationContract> {
         if (!styleKey) {
@@ -64,3 +102,3 @@ throw new Error(`Parameter "styleKey" not specified.`);
         // TODO: If no style found, try to take default one
-        const style = Objects.getObjectAt<any>(styleKey, styles);
+        const style = Objects.getObjectAt<VariationContract>(styleKey, styles);
 
@@ -71,5 +109,7 @@ if (style) {
 
+        // Style handlers needed to create styles if they are absent in the style sheet.
+        // TODO: Use style definitions concept to backfill them instead of style handlers.
         const defaultStyle = this.styleHandlers
             .map(handler => handler.getDefaultStyle(styleKey))
-            .find(x => !!x);
+            .find(handler => !!handler);
 
@@ -404,28 +444,2 @@ if (defaultStyle) {
 
-    public async backfillLocalStyles(localStyles: LocalStyles, styleDefinition: StyleDefinition): Promise<void> {
-        StyleHelper.backfillLocalStyles(styleDefinition, localStyles);
-
-        if (styleDefinition.colors) { // in case style definition require global styles
-            await this.backfillGlobalStyles(styleDefinition);
-        }
-    }
-
-    public async backfillGlobalStyles(definition: StyleDefinition): Promise<void> {
-        const styles = await this.getStyles();
-        const colorNames = Object.keys(definition.colors);
-
-        colorNames.forEach(colorName => {
-            const colorDefinition = definition.colors[colorName];
-            const colorKey = `colors/${colorName}`;
-
-            Objects.setValue(colorKey, styles, {
-                key: colorKey,
-                displayName: colorDefinition.displayName,
-                value: colorDefinition.defaults.value
-            });
-        });
-
-        this.updateStyles(styles);
-    }
-
     public async addComponentVariation(componentName: string, variationName: string, variation?: VariationContract): Promise<string> {
@@ -437,3 +451,3 @@ const key = `components/${componentName}/${variationName}`;
         variation.key = key;
-        variation.displayName = variation.displayName || "< Unnamed >";
+        variation.displayName = "< Unnamed >";
         variation.category = "appearance";
@@ -440,0 +454,0 @@

workshops/background/index.ts

@@ -1,1 +0,1 @@
-export * from "./background";
+export * from "./backgroundEditor";

workshops/border/borderEditor.ts

@@ -67,3 +67,3 @@ import * as ko from "knockout";
 
-    public clearColor(): void {
+    public clearColors(): void {
         this.borderColorKey(null);
@@ -70,0 +70,0 @@ this.applyChanges();

workshops/styleEditor/styleEditor.ts

@@ -21,3 +21,2 @@ import * as ko from "knockout";
     private readonly elementStates: ko.ObservableArray<string>;
-    private currentState: string;
 
@@ -83,2 +82,5 @@ public readonly styleName: ko.Observable<string>;
     @Param()
+    public currentState: string;
+
+    @Param()
     public plugins: string[];
@@ -89,4 +91,12 @@
 
+    @Event()
+    public onRename: (name: string) => void;
+
+    @Event()
+    public onStateChange: (state: string) => void;
+
     @OnMounted()
     public async initialize(): Promise<void> {
+        this.selectedState(this.currentState);
+
         if (this.plugins) {
@@ -179,2 +189,6 @@ this.allowTypography(this.plugins.includes("typography"));
         this.updateObservables();
+
+        if (this.onStateChange) {
+            this.onStateChange(state);
+        }
     }
@@ -216,3 +230,6 @@
         this.elementStyle.displayName = name;
-        this.scheduleUpdate();
+
+        if (this.onRename) {
+            this.onRename(name);
+        }
     }
@@ -219,0 +236,0 @@

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

Number of package files

191

increased by2.14%

Worsened metrics

Total package byte prevSize

409136

decreased by-1.03%

Lines of code

7879

decreased by-0.45%

Dependency changes

• + Added@paperbits/common@0.1.597(transitive)

• - Removed@paperbits/common@0.1.596(transitive)

• Updated@paperbits/common@0.1.597