bernova 1.7.4 → 1.7.6

package/src/lib/generateProvider/template/providerTemplate-style.js

@@ -0,0 +1,155 @@
+import {
+  cssThemes,
+  cssClasses,
+  cssVars,
+  cssAvailableComponents,
+  cssGlobalStyles,
+  cssMediaQueries,
+} from './stats/stats';
+
+export class $_Provider_$ {
+  #currentTheme;
+  #themes;
+  #themesVariables;
+  #themesClassNames;
+  #themesComponents;
+  #themesGlobalStyles;
+  #themesMediaQueries;
+  #linkId;
+  #jsInCss;
+  /* Bernova provider methods */
+  #linkBuilder = (css, id) => {
+    if (typeof document === 'undefined') return;
+    let styleElement = document.getElementById(id);
+    if (!styleElement) {
+      styleElement = document.createElement('style');
+      styleElement.id = id;
+      styleElement.type = 'text/css';
+      document.head.appendChild(styleElement);
+    }
+    styleElement.innerHTML = css;
+  };
+  #handlerThemes = (data) => {
+    const { css } = data;
+    this.#linkBuilder(css, this.#linkId);
+  };
+  #cleanUpLinks = () => {
+    if (typeof document === 'undefined') return;
+    const style = document.getElementById(this.#linkId);
+    if (style) style.remove();
+  };
+  /* Bernova provider methods */
+
+  constructor({ linkId, jsInCss } = {}) {
+    this.#themes = cssThemes;
+    this.#themesVariables = cssVars;
+    this.#themesClassNames = cssClasses;
+    this.#themesComponents = cssAvailableComponents;
+    this.#themesGlobalStyles = cssGlobalStyles;
+    this.#themesMediaQueries = cssMediaQueries;
+    this.#linkId = linkId || 'kb-styled-link';
+    this.#currentTheme = Object.keys(cssThemes)[0];
+    this.#jsInCss = !!jsInCss;
+    this.getComponentStyles = this.getComponentStyles.bind(this);
+
+    if (
+      typeof window !== 'undefined' &&
+      typeof document !== 'undefined' &&
+      this.#jsInCss
+    ) {
+      this.#cleanUpLinks();
+      this.#handlerThemes(this.#themes[this.#currentTheme]);
+    }
+  }
+  // ? getters and setters
+  //* theme selected
+  get themeSelected() {
+    return this.#currentTheme;
+  }
+  set themeSelected(themeName) {
+    if (themeName in this.#themes) {
+      if (this.#jsInCss) {
+        this.#cleanUpLinks();
+        this.#handlerThemes(this.#themes[themeName]);
+      }
+      this.#currentTheme = themeName;
+    } else {
+      throw new Error(`${themeName} is not exists`);
+    }
+  }
+  //* themes
+  get allThemesNames() {
+    return Object.keys(this.#themes);
+  }
+  get allThemes() {
+    return this.#themes;
+  }
+  //* variables
+  get variables() {
+    return this.#themesVariables[this.#currentTheme];
+  }
+  //* classNames
+  get classNames() {
+    return this.#themesClassNames[this.#currentTheme];
+  }
+  //* components
+  get components() {
+    return this.#themesComponents[this.#currentTheme];
+  }
+  //* global styles
+  get globalStyles() {
+    return this.#themesGlobalStyles[this.#currentTheme];
+  }
+  //* media queries
+  get mediaQueries() {
+    return this.#themesMediaQueries[this.#currentTheme];
+  }
+  //? methods
+  getComponentStyles({ variant, component, additionalClassNames }) {
+    const THEME = this.#themesClassNames[this.#currentTheme];
+    const upperComponent = component.toLocaleUpperCase();
+    const COMPONENT = THEME[upperComponent];
+
+    if (!COMPONENT) return {};
+
+    const structure = {};
+    const startV = '$_';
+    const componentVariant = (() => {
+      if (!!variant) {
+        const lowerVariant = variant.toLocaleLowerCase().replace(/-/g, '_');
+        return `${startV}${lowerVariant}`;
+      } else {
+        return false;
+      }
+    })();
+    if (componentVariant && componentVariant in COMPONENT) {
+      const variantFragment = COMPONENT[componentVariant];
+      Object.entries(variantFragment).forEach(([key, value]) => {
+        if (!(key in structure)) {
+          structure[key] = value;
+        }
+      });
+    }
+    Object.entries(COMPONENT).forEach(([key, value]) => {
+      if (key.startsWith(startV)) return;
+      if (!(key in structure) && value) {
+        structure[key] = value;
+      }
+    });
+    if (!!additionalClassNames && Object.keys(additionalClassNames).length) {
+      Object.entries(additionalClassNames).forEach(([key, value]) => {
+        if (!(key in structure)) {
+          structure[key] = value;
+        } else {
+          const existingValue = structure[key].split(' ');
+          const newValue = value.split(' ');
+          const combinedValues = Array.from(
+            new Set([...existingValue, ...newValue]),
+          );
+          structure[key] = combinedValues.join(' ');
+        }
+      });
+    }
+    return structure;
+  }
+}

package/src/lib/generateProvider/template/providerTemplate.d.ts

@@ -33,7 +33,7 @@ export declare class $_Provider_$ {
   #linkId: string;
   #jsInCss: boolean;
   /* Bernova provider methods */
-  #linkBuilder: (url: string, id: string) => void;
+  #linkBuilder: (css: string, id: string) => void;
   #handlerThemes: (data: {
     css: string;
     foreign?: { high?: string[]; low?: string[] };

package/src/lib/typingStyles/typingStyles.utils.js

@@ -72,6 +72,7 @@ const typingStyles = ({ mediaConfig }) => {
   const cssAdvancedSelectorsName = 'CssAdvancedSelectorsType';
   const cssMediaQueriesName = 'CssMediaQueriesType';
   const cssForeignName = 'CssForeignType';
+  const cssLiteralsName = 'CssLiteralsType';
   //* bases types
   const cssPropsWithTarget = `${cssLibPropsName} & { $target?: string; }`;
   const cssPropsType = `export type ${cssPropsName} = {\n${generateKeysType({
@@ -82,22 +83,23 @@ const typingStyles = ({ mediaConfig }) => {
     {
       object: cssPseudoClasses,
       type: `${cssPseudoClassesName} | ${cssPseudoElementsName} | ${cssPropsWithTarget}`,
-    }
+    },
   )}}\n`;
   const cssPseudoElementsType = `export type ${cssPseudoElementsName} = {\n${generateKeysType(
     {
       object: cssPseudoElements,
       type: `${cssPseudoElementsName} | ${cssPseudoClassesName} | ${cssLibPropsName}`,
-    }
+    },
   )}}\n`;
   const cssAdvancedSelectorsType = `export type ${cssAdvancedSelectorsName} = \n${generateAdvancedSelectorsType(
     {
       advancedSelectors: cssAdvancedSelectors,
       type: cssPropsWithTarget,
-    }
+    },
   )}\n`;
-  const mediaQueriesType = `export type ${cssMediaQueriesName} = ${cssPropsName} & { $type?: string; $values?: { [key: string]: string }; }\n`;
+  const mediaQueriesType = `export type ${cssMediaQueriesName} = ${cssPropsName} & { $type?: string; $values?: { [key: string]: string; }; }\n`;
   const foreignType = `export type ${cssForeignName} = { [key:string]: { component: object; variant?: string | unknown; name: string; } }\n`;
+  const literalsType = `export type ${cssLiteralsName} = { [key: string]: string | number | boolean | null | undefined | bigint | symbol; }\n`;
   ///? lib
   //* lib names
   const cssLibPseudoClassesName = 'CssLibPseudoClassesType';
@@ -107,21 +109,23 @@ const typingStyles = ({ mediaConfig }) => {
   const cssLibMediaQueriesName = 'CssLibMediaQueriesType';
   const cssForeignLibName = 'CssForeignLibType';
   const cssDynamicValuesName = 'CssDynamicValuesType';
+  const cssLibLiteralsName = 'CssLibLiteralsType';
   //* lib types
   const libProps = `export type ${cssLibPropsName} = ${cssPropsName} & ${cssLibPseudoClassesName} & ${cssLibPseudoElementsName} & ${cssLibAdvancedSelectorsName} & ${cssDynamicValuesName} & ${cssLibAttributesName}${
     hasMediaConfig ? ` & ${cssLibMediaQueriesName}` : ''
-  } & ${cssForeignLibName};\n`;
+  } & ${cssForeignLibName} & ${cssLibLiteralsName};\n`;
   const pseudoClasses = `export type ${cssLibPseudoClassesName} = {\n  $pseudoClasses?: ${cssPseudoClassesName} \n}\n`;
   const pseudoElements = `export type ${cssLibPseudoElementsName} = {\n  $pseudoElements?: ${cssPseudoElementsName} \n}\n`;
   const advancedSelectors = `export type ${cssLibAdvancedSelectorsName} = {\n  $advancedSelectors?: ${cssAdvancedSelectorsName}[] \n}\n`;
   const attributes = `export type ${cssLibAttributesName} = { $attributes?: { [key: string]: ${cssLibPropsName} } | { [key: string]: { [key: string]: ${cssLibPropsName} } } }\n`;
   const mediaQueries = hasMediaConfig
     ? `export type ${cssLibMediaQueriesName} = {\n  $mediaQueries?: {\n    [key: string]: ${cssMediaQueriesName}\n  } | {\n${generateMediaTypes(
-        { mediaConfig, type: cssLibPropsName }
+        { mediaConfig, type: cssLibPropsName },
       )}  }\n}\n`
     : '';
   const foreign = `export type ${cssForeignLibName} = {\n  $foreign?: ${cssForeignName} \n}\n`;
   const dynamicValues = `export type ${cssDynamicValuesName} = {\n  $dynamicValues?: string[]; \n}\n`;
+  const literals = `export type ${cssLibLiteralsName} = {\n  $literals?: ${cssLiteralsName}; \n}\n`;
 
   return `
 ${cssPropsType}
@@ -130,6 +134,7 @@ ${cssPseudoElementsType}
 ${cssAdvancedSelectorsType}
 ${mediaQueriesType}
 ${foreignType}
+${literalsType}
 ${pseudoClasses}
 ${pseudoElements}
 ${dynamicValues}
@@ -137,6 +142,7 @@ ${advancedSelectors}
 ${attributes}
 ${mediaQueries}
 ${foreign}
+${literals}
 ${libProps}
   `;
 };