@paperbits/styles - npm Package Compare versions

Comparing version 0.1.587 to 0.1.588

defaultStyleCompiler.ts

@@ -45,3 +45,4 @@ import * as Utils from "@paperbits/common/utils";
     ComponentBagContract,
-    VariationContract
+    VariationContract,
+    StyleDefinition
 } from "@paperbits/common/styles";
@@ -184,3 +185,2 @@ import { JssCompiler } from "./jssCompiler";
 
-
         const styleSheet = new StyleSheet("global");
@@ -590,3 +590,3 @@ const themeContract = await this.getStyles();
 
-    public async getStyleModelAsync(localStyles: LocalStyles, styleManager?: StyleManager, widgetHandlerClass?: any): Promise<StyleModel> {
+    public async getStyleModelAsync(localStyles: LocalStyles, styleManager?: StyleManager): Promise<StyleModel> {
         if (!localStyles) {
@@ -596,6 +596,2 @@ throw new Error(`Parameter "localStyles" not specified.`);
 
-        if (widgetHandlerClass) {
-            this.backfillLocalStyles(widgetHandlerClass, localStyles);
-        }
-
         localStyles = Objects.clone(localStyles); // To drop any object references
@@ -627,25 +623,8 @@ Objects.cleanupObject(localStyles, { removeNulls: true });
             else {
-                if (this.isResponsive(categoryConfig)) {
-                    const pluginBag = <PluginBag>categoryConfig;
+                const styleKey = <string>categoryConfig;
+                const className = await this.getClassNameByStyleKeyAsync(styleKey);
 
-                    for (const breakpoint of Object.keys(pluginBag)) {
-                        const styleKey = pluginBag[breakpoint];
-
-                        const className = breakpoint === "xs"
-                            ? await this.getClassNameByStyleKeyAsync(styleKey)
-                            : await this.getClassNameByStyleKeyAsync(styleKey, breakpoint);
-
-                        if (className) {
-                            classNames.push(className);
-                        }
-                    }
+                if (className) {
+                    classNames.push(className);
                 }
-                else {
-                    const styleKey = <string>categoryConfig;
-                    const className = await this.getClassNameByStyleKeyAsync(styleKey);
-
-                    if (className) {
-                        classNames.push(className);
-                    }
-                }
             }
@@ -714,19 +693,6 @@ }
 
-    public styleToCss(style: Style): string {
-        if (!style) {
-            return "";
-        }
-
-        const styleSheet = new StyleSheet();
-        styleSheet.styles.push(style);
-
-        const compiler = new JssCompiler();
-        const css = compiler.compile(styleSheet);
-        return css;
+    public backfillLocalStyles(localStyles: LocalStyles, styleDefinition: StyleDefinition): void {
+        this.styleService.backfillLocalStyles(localStyles, styleDefinition);
     }
 
-    public backfillLocalStyles(handlerClass: any, localStyles: LocalStyles): void {
-        this.styleService.backfillLocalStyles(handlerClass, localStyles);
-    }
-
     public getIconClassName(iconKey: string): string {
@@ -733,0 +699,0 @@ const segments = iconKey.split("/");

package.json

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

styleGuide/styleGuide.ts

 import * as ko from "knockout";
 import * as Utils from "@paperbits/common/utils";
+import * as Objects from "@paperbits/common/objects";
 import * as _ from "lodash";
@@ -298,10 +299,12 @@ import template from "./styleGuide.html";
 
-    public async onSnippetSelected(snippet: StyleItem): Promise<void> {
-        await this.styleService.mergeStyles(snippet.stylesConfig);
-        await this.openInEditor(snippet.stylesType.split("/").pop(), snippet);
-    }
+    public async openInEditor(componentName: string, snippet?: ComponentStyle): 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`);
 
-    public async openInEditor(componentName: string, snippet?: any): Promise<void> {
-        const variationName = `${Utils.identifier().toLowerCase()}`; // TODO: Replace name with kebab-like name.
-        const addedStyleKey = await this.styleService.addComponentVariation(componentName, variationName, snippet);
+        if (!defaultVariation) {
+            throw new Error(`Default variation for component "${componentName}" not found.`);
+        }
+
+        defaultVariation = Objects.clone(defaultVariation); // dropping references
+        const addedStyleKey = await this.styleService.addComponentVariation(componentName, variationName, defaultVariation);
         const addedStyle = await this.styleService.getStyleByKey(addedStyleKey);
@@ -308,0 +311,0 @@

styleService.ts

@@ -8,4 +8,3 @@ import * as _ from "lodash";
 import { AnimationContract } from "./plugins";
-import { ComponentStyle } from "./contracts/componentStyle";
-import { ComponentStyleDefinition, LocalStyles, StyleDefinition, StyleHandler, VariationContract } from "@paperbits/common/styles";
+import { LocalStyles, StyleDefinition, StyleHandler, VariationContract } from "@paperbits/common/styles";
 import { StylePrimitives } from "./constants";
@@ -15,3 +14,2 @@ import { OpenTypeFontGlyph } from "./openType/openTypeFontGlyph";
 import { HttpClient } from "@paperbits/common/http";
-import { IWidgetHandler } from "@paperbits/common/editing";
 import { StyleHelper } from "./styleHelper";
@@ -27,3 +25,2 @@ import { ISettingsProvider } from "@paperbits/common/configuration";
         private readonly styleHandlers: StyleHandler[],
-        private readonly widgetHandlers: IWidgetHandler[],
         private readonly fontManager: FontManager,
@@ -48,14 +45,2 @@ private readonly settingsProvider: ISettingsProvider,
 
-        // this.styleHandlers.forEach(styleHandler => {
-        //     if (styleHandler.migrate) {
-        //         styleHandler.migrate(stylesObject.components[styleHandler.key]);
-        //     }
-
-        //     if (stylesObject.components[styleHandler.key]) {
-        //         return;
-        //     }
-
-        //     stylesObject.components[styleHandler.key] = styleHandler.getDefaultStyle();
-        // });
-
         return stylesObject;
@@ -195,26 +180,2 @@ }
 
-    public async addComponentVariation(componentName: string, variationName: string, snippet?: ComponentStyle): Promise<string> {
-        const styles = await this.getStyles();
-        const defaultVariation = snippet.variations.find(x => x.key === `components/${componentName}/default`);
-
-        if (!defaultVariation) {
-            throw new Error(`Default variation for component "${componentName}" not found.`);
-        }
-
-        const variation: VariationContract = Objects.clone(defaultVariation);
-        const key = `components/${componentName}/${variationName}`;
-
-        this.rewriteVariationKeysRecursively(variation, key);
-
-        variation.key = key;
-        variation.displayName = "< Unnamed >";
-        variation.category = "appearance";
-
-        styles.components[componentName][variationName] = variation;
-
-        await this.updateStyles(styles);
-
-        return variation.key;
-    }
-
     public async addTextStyleVariation(variationName: string): Promise<VariationContract> {
@@ -441,23 +402,11 @@ const styles = await this.getStyles();
 
-    public async backfillLocalStyles(handlerClass: any, localStyles: LocalStyles): Promise<void> {
-        const handler = this.widgetHandlers.find(x => x instanceof handlerClass);
+    public async backfillLocalStyles(localStyles: LocalStyles, styleDefinition: StyleDefinition): Promise<void> {
+        StyleHelper.backfillLocalStyles(styleDefinition, localStyles);
 
-        if (!handler?.getStyleDefinitions) {
-            return;
+        if (styleDefinition.colors) { // in case style definition require global styles
+            await this.backfillGlobalStyles(styleDefinition);
         }
-
-        const definition = handler.getStyleDefinitions();
-
-        if (!definition) {
-            return;
-        }
-
-        StyleHelper.backfillLocalStyles(definition, localStyles);
-
-        if (definition.colors) {
-            await this.backfillGlobals(definition);
-        }
     }
 
-    private async backfillGlobals(definition: StyleDefinition): Promise<void> {
+    public async backfillGlobalStyles(definition: StyleDefinition): Promise<void> {
         const styles = await this.getStyles();
@@ -480,34 +429,41 @@ const colorNames = Object.keys(definition.colors);
 
-    public async backfillStyles(): Promise<void> {
+    public async addComponentVariation(componentName: string, variationName: string, variation?: VariationContract): Promise<string> {
+        const key = `components/${componentName}/${variationName}`;
+
+        this.rewriteVariationKeysRecursively(variation, key);
+
+        variation.key = key;
+        variation.displayName = variation.displayName || "< Unnamed >";
+        variation.category = "appearance";
+
         const styles = await this.getStyles();
+        styles.components[componentName][variationName] = variation;
 
-        this.widgetHandlers.forEach(x => {
-            if (!x.getStyleDefinitions) {
-                return;
-            }
+        await this.updateStyles(styles);
 
-            const definition = x.getStyleDefinitions();
+        return variation.key;
+    }
 
-            if (!definition) {
-                return;
-            }
+    public async convertLocalStylesToVariation(componentName: string, variationDisplayName: string, localStyles: LocalStyles): Promise<LocalStyles> {
+        const variationName = Utils.randomClassName();
+        const styleKey = `components/button/${variationName}`;
 
-            if (definition.colors) {
-                const colorNames = Object.keys(definition.colors);
+        const variation: VariationContract = {
+            key: styleKey,
+            displayName: variationDisplayName,
+            category: "appearance",
+            allowedStates: [], // copy from default
+        }
 
-                colorNames.forEach(colorName => {
-                    const colorDefinition = definition.colors[colorName];
-                    const colorKey = `colors/${colorName}`;
+        delete localStyles.instance.key;
+        Object.assign(variation, localStyles.instance);
 
-                    Objects.setValue(colorKey, styles, {
-                        key: colorKey,
-                        displayName: colorDefinition.displayName,
-                        value: colorDefinition.defaults.value
-                    });
-                });
-            }
-        });
+        delete localStyles.instance;
 
-        this.updateStyles(styles);
+        localStyles["appearance"] = styleKey;
+
+        await this.addComponentVariation(componentName, variationName, <any>variation)
+
+        return localStyles;
     }
 }

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

Worsened metrics

Total package byte prevSize

412581

decreased by-1.02%

Lines of code

7786

decreased by-0.74%

Dependency changes

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

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

• Updated@paperbits/common@0.1.588