@medyll/cssfabric 0.2.0 → 0.2.1-beta.2

package/dist/cssFabric/cssProperties.d.ts

@@ -0,0 +1,27 @@
+export type CssFabricBlock = {
+    [key: string]: {
+        initial: string;
+        syntax: string;
+        fabric: Record<'classNames' | 'declinations' | 'variations', Record<string, string>>;
+        variations: Record<string, string[] | string[][]>;
+    };
+};
+export type CssFabricFragment = {
+    description: string;
+    syntax: string;
+    template: string;
+    initial: string;
+    appliesTo: string;
+    fabric: Record<'classNames' | 'declinations' | 'variations', Record<string, string>>;
+    variations: Record<string, string>;
+};
+export type CssFabricPropertyFragment = Record<string, CssFabricFragment>;
+export type CssFabricPropertyCatalog = Record<string, CssFabricPropertyFragment | CssFabricFragment>;
+export declare class CSSProperties {
+    private cssProperties;
+    private onlyKeys;
+    constructor(cssProperties: any, onlyKeys?: string[]);
+    private chkValidity;
+    private recursiveFabricSearch;
+    generateCSS(): Record<string, any>;
+}

package/dist/cssFabric/cssProperties.js

@@ -0,0 +1,343 @@
+import { cssFabricSheet } from './cssFabricSheet.js';
+import fsExtra from 'fs-extra';
+import { CssFabricVariations } from './cssVariationsAi.js';
+function camelToUnderscore(str) {
+    return str.replace(/([A-Z])/g, '-$1').toLowerCase();
+}
+const syntaxDecodeTypeConfig = {
+    length: [0, 52, 16, 'rem'],
+    width: [0, 256, 32, 'rem', [2, 16]],
+    'border-width': [0, 2, 0.5, 'px', [2, 16]],
+    height: [0, 256, 32, 'rem', [2, 16]],
+    percentage: [0, 100, 10, '%', [2, 16]],
+    number: [0, 10, 1, 'px', [2, 16]],
+    opacity: [0.1, 1.0, 0.2, [2, 16]],
+    color: ['blue', 'red', 'yellow', 'orange', 'green', 'violet']
+};
+function cleanSyntaxKey(toClean) {
+    let cleaned = toClean.replace(/(em|px|%|rem)$/, '');
+    cleaned = cleaned.endsWith('-') ? cleaned.slice(0, -1) : cleaned;
+    return cleaned;
+}
+class SyntaxDecode {
+    static hasProgression(...rest) {
+        return rest.some((value) => Boolean(syntaxDecodeTypeConfig[value]));
+    }
+    static generateValues(...title) {
+        let result = {};
+        let progression = syntaxDecodeTypeConfig[title[1]] ?? syntaxDecodeTypeConfig[title[0]];
+        if (progression?.every((value) => typeof value === 'string')) {
+            // presets iteration
+            progression.forEach((value) => {
+                let newKey = `${fabricTitle}-${value}`;
+                result[cleanSyntaxKey(newKey)] = value;
+            });
+        }
+        else {
+            const unity = SyntaxDecode.getUnity(progression);
+            let [from, to, increment, unit, [ease = 0, trigger] = []] = progression;
+            for (let i = from; i <= to; i += i < trigger || i >= to - trigger ? increment / ease : increment) {
+                let newKey = `${title[0]}-${i}`;
+                result[cleanSyntaxKey(newKey)] = [i, unit];
+            }
+        }
+        // return value,unity
+        return result;
+    }
+    static getUnity(arr) {
+        for (let i = arr?.length - 1; i >= 0; i--) {
+            if (typeof arr[i] === 'string') {
+                return arr[i];
+            }
+        }
+        return null;
+    }
+}
+class DistributionType {
+    static detectDistributionType(fragment, fabricKey) {
+        let fabricKeys = Object.keys(fragment.fabric[fabricKey]);
+        let syntaxKeys = fragment.syntax.split('|').map((s) => s.trim());
+        if (!fabricKeys.some((key) => syntaxKeys.includes(key))) {
+            return 'detectionProgressive';
+        }
+        if (fabricKeys.every((key, index) => syntaxKeys[index] === key)) {
+            return 'detectionFollowLine';
+        }
+        return 'unknown';
+    }
+}
+class CSSFormalSyntaxDecoder {
+    syntax;
+    decodedSyntax;
+    constructor() {
+        this.syntax = '';
+        this.decodedSyntax = {};
+    }
+    decodeQuantifier(group) {
+        const quantifierMatch = group.match(/\{(\d+),(\d+)\}/);
+        if (quantifierMatch) {
+            return { min: parseInt(quantifierMatch[1]), max: parseInt(quantifierMatch[2]) };
+        }
+        return null;
+    }
+    getRenderMode(syntax) {
+        if (syntax.includes('length')) {
+            return 'length';
+        }
+        else if (syntax.includes('percentage')) {
+            return 'percentage';
+        }
+        else if (syntax.includes('range')) {
+            return 'range';
+        }
+        else if (syntax.includes('number')) {
+            return 'number';
+        }
+        else {
+            return 'raw';
+        }
+    }
+    decodeFormalSyntax(syntax) {
+        let decodedSyntax = {};
+        // Split the syntax into groups
+        let groups = syntax.split('|').map((g) => g.trim());
+        groups.forEach((group) => {
+            let optional = false;
+            let repeatable = false;
+            let quantifier = null;
+            let optionalPart = null;
+            // Check if the group is optional or repeatable
+            if (group.endsWith('?')) {
+                optional = true;
+                group = group.slice(0, -1); // Remove the question mark
+            }
+            if (group.endsWith('+')) {
+                repeatable = true;
+                group = group.slice(0, -1); // Remove the plus sign
+            }
+            // Check for quantifiers like {1,4}
+            quantifier = this.decodeQuantifier(group);
+            if (quantifier) {
+                group = group.replace(/\{\d+,\d+\}/, '').trim(); // Remove the quantifier part
+            }
+            // Check for optional parts
+            const optionalPartMatch = group.match(/\[(.*?)\]/);
+            if (optionalPartMatch) {
+                optionalPart = optionalPartMatch[1];
+                group = group.replace(optionalPartMatch[0], '').trim(); // Remove the optional part
+            }
+            // Remove brackets from the group
+            group = group.replace(/\[|\]/g, '');
+            decodedSyntax[group] = { optional, repeatable, quantifier, optionalPart };
+        });
+        return decodedSyntax;
+    }
+    decodeAndGenerateValue(fragmentPiece, key = '', followUp = '') {
+        let result = {};
+        const fragmentTitle = Object.keys(fragmentPiece)[0];
+        const fragment = fragmentPiece[fragmentTitle];
+        let out = {};
+        //
+        // console.log('----------------------------------', key, fragmentTitle);
+        Object.keys(fragment?.fabric).forEach((fabricMode) => {
+            switch (fabricMode) {
+                case 'classNames':
+                    let classNames = this.applyClassNames(fragment, fabricMode);
+                    //console.log('followUp', followUp);
+                    if (Object.keys(classNames.classNames).length > 0) {
+                        // result = { ...result, [fragmentTitle]: { classNames: classNames.classNames } };
+                        result = { ...result, ...{ classNames: classNames.classNames } };
+                    }
+                    break;
+                case 'vertical':
+                    /* console.log(fabricMode);
+                    console.log(fragment.fabric); */
+                    break;
+                case 'variations':
+                    const ouh = { [fragmentTitle]: fragment.fabric };
+                    const tr = CSSFormalSyntaxDecoder.translateVariations(ouh);
+                    const gf = { [fragmentTitle]: { classNames: CssFabricVariations.loopVariations(tr) } };
+                    result = { ...result, ...gf };
+                    break;
+                case 'colors':
+                    Object.assign(result, {});
+                    break;
+            }
+        });
+        // console.log(result);
+        return result;
+    }
+    static translateVariations(cssBlock) {
+        let out = { ...cssBlock };
+        const mdl = Object.keys(cssBlock)[0];
+        Object.entries(cssBlock[mdl].variations).forEach(([key, value]) => {
+            // console.log(value);
+            out[mdl].variations[key] = value.split('|').map((v) => v.trim());
+        });
+        return out;
+    }
+    applyClassNames(fragment, fabricMode) {
+        let result = {};
+        const fragmentTitle = Object.keys(fragment.fabric[fabricMode])[0];
+        const fragmentPiece = fragment.fabric[fabricMode];
+        // console.log(fragmentTitle);
+        const distributionType = DistributionType.detectDistributionType(fragment, fabricMode);
+        //console.log(fragmentPiece);
+        Object.keys(fragmentPiece).forEach((fabricType) => {
+            //const distributionType = DistributionType.detectDistributionType(fragment, fabricType);
+            let syntax = fragment.syntax;
+            let fabricTitle = fragmentTitle == fabricType ? fragmentTitle : `${fragmentTitle}-${fabricType}`;
+            let decodedSyntax = this.decodeFormalSyntax(syntax);
+            Object.keys(decodedSyntax).forEach((syntaxKey) => {
+                let syntaxValue = decodedSyntax[syntaxKey];
+                if (syntaxValue.optional ||
+                    syntaxValue.repeatable ||
+                    syntaxValue.quantifier ||
+                    syntaxValue.optionalPart) {
+                    // This is a complex syntax, we need to decode it further
+                    // ...
+                }
+                else {
+                    switch (distributionType) {
+                        case 'detectionProgressive':
+                            // Handle progressive distribution
+                            let progression = syntaxDecodeTypeConfig[syntaxKey] ?? syntaxDecodeTypeConfig[fabricTitle];
+                            let generatedValues = {};
+                            if (!progression) {
+                                let className = `.${fabricTitle}-${syntaxKey}`;
+                                generatedValues = {
+                                    [className]: {
+                                        [`--${fabricTitle}`]: `var(--${fabricTitle}-${syntaxKey});`,
+                                        [`${fabricTitle}`]: `var(--${fabricTitle},${syntaxKey});`
+                                    }
+                                };
+                            }
+                            if (SyntaxDecode.hasProgression(fabricTitle, syntaxKey)) {
+                                //console.log(SyntaxDecode.generateValues(fabricTitle, syntaxKey));
+                                generatedValues = {};
+                                for (const [key, value] of Object.entries(SyntaxDecode.generateValues(fabricTitle, syntaxKey))) {
+                                    generatedValues[`.${key}`] = {
+                                        [`--${fabricTitle}-${value[0]}`]: `${value[0]}${value[1]};`,
+                                        [`${fabricTitle}`]: `var(--${fabricTitle}-${value[0]});`
+                                    };
+                                }
+                            }
+                            Object.assign(result, generatedValues);
+                            break;
+                        case 'detectionFollowLine':
+                            // Handle follow line distribution
+                            // ...
+                            break;
+                        default:
+                            // Handle unknown distribution
+                            // ...
+                            break;
+                    }
+                }
+            });
+        });
+        return { [fabricMode]: result };
+    }
+}
+export class CSSProperties {
+    cssProperties;
+    onlyKeys;
+    constructor(cssProperties, onlyKeys = []) {
+        this.cssProperties = cssProperties;
+        this.onlyKeys = onlyKeys;
+    }
+    chkValidity(cssProperties) {
+        if (cssProperties.fabric)
+            return true;
+        for (const key in cssProperties) {
+            if (cssProperties.hasOwnProperty(key)) {
+                const element = cssProperties[key];
+                if (typeof element === 'object') {
+                    if (element.fabric) {
+                        return true;
+                    }
+                    else {
+                        return this.chkValidity(element);
+                    }
+                }
+                return false;
+            }
+        }
+        return false;
+    }
+    recursiveFabricSearch(cssProperties, parent = '', followUp = []) {
+        let out = {};
+        for (let key in cssProperties) {
+            // if (key == 'box') console.log(key);
+            if (this.chkValidity(cssProperties[key]) && cssProperties.hasOwnProperty(key)) {
+                key = camelToUnderscore(key);
+                if (key == 'box')
+                    console.log(key, parent);
+                const element = cssProperties[key];
+                const elementTitle = Object.keys(cssProperties)[0];
+                if (typeof element === 'object') {
+                    // migration to new syntax
+                    if (element.fabric && (!this.onlyKeys.length || this.onlyKeys.includes(key))) {
+                        console.log('done followUp', key);
+                        followUp.push(key);
+                        try {
+                            let decoder = new CSSFormalSyntaxDecoder();
+                            let result = decoder.decodeAndGenerateValue({ [key]: element }, key, followUp);
+                            parent += key;
+                            if (!out[parent])
+                                out[parent] = {};
+                            out[parent] = { ...out[parent], ...result };
+                            //followUp = '';
+                        }
+                        catch (err) {
+                            out[parent] = { cssError: key };
+                            // followUp = '';
+                        }
+                        // followUp = [];
+                    }
+                    else {
+                        out = { ...out, ...this.recursiveFabricSearch(element, key, followUp) };
+                        followUp = [];
+                        parent = '';
+                        //followUp = '';
+                    }
+                }
+            }
+            else {
+                // console.log(key);
+                //console.log('done', followUp);
+                // followUp += key;
+            }
+            //console.log('done', followUp);
+            parent = '';
+            // followUp = '';
+        }
+        return out;
+    }
+    generateCSS() {
+        // console.log('-----------------------------------------------------------------------');
+        // console.log(this.cssProperties);
+        console.log('-----------------------------------------------------------------------');
+        return this.recursiveFabricSearch(this.cssProperties);
+    }
+}
+/* const cssF = cssP.generateCSS();
+console.log(cssF); */
+// console.log(JSON.stringify(cssF, null, 4));
+function modifyObject(obj, filepath) {
+    for (let key in obj) {
+        if (typeof obj[key] === 'object') {
+            if (obj[key].fabric && !obj[key].fabric.classNames) {
+                let tmp;
+                tmp = obj[key].fabric;
+                obj[key].fabric = {};
+                obj[key].fabric.classNames = tmp;
+            }
+            else {
+                modifyObject(obj[key], filepath);
+            }
+        }
+        else {
+        }
+    }
+}

package/dist/cssFabric/cssVariationsAi.d.ts

@@ -0,0 +1,12 @@
+import type { CssFabricBlock } from './cssProperties.js';
+export declare class CssFabricVariations {
+    verticalModel: Record<string, any>;
+    className: string;
+    insert: string;
+    constructor(model: Record<string, any>, options?: any);
+    generateCss(prefix?: string): Record<string, any>;
+    static loopVertical(): void;
+    static loopVariations(fragmentObj: CssFabricBlock): Record<string, any>;
+    private generateRoot;
+    private generateCombinations;
+}

package/dist/cssFabric/cssVariationsAi.js

@@ -0,0 +1,111 @@
+import { colorConfig } from './config.js';
+export class CssFabricVariations {
+    verticalModel;
+    className;
+    insert;
+    constructor(model, options = {}) {
+        [this.className, this.verticalModel] = Object.entries(model)[0];
+        // this.insert = insert;
+    }
+    generateCss(prefix = '') {
+        this.generateRoot(this.verticalModel, prefix);
+        return this.generateCombinations(this.verticalModel, prefix);
+    }
+    static loopVertical() { }
+    static loopVariations(fragmentObj) {
+        const fragmentKey = Object.keys(fragmentObj)[0];
+        const fragment = Object.values(fragmentObj)[0];
+        let variations = fragment.variations;
+        let variationValues = Object.values(variations);
+        let firstVarKey = variationValues?.[0];
+        let firstKey = Object.keys(variations)?.[0];
+        let strap = firstVarKey?.[0];
+        let remainingVariations = Object.fromEntries(Object.entries(variations).slice(1));
+        // if (strap.includes('cssFab')) {
+        let output = {};
+        // loop on each array
+        for (const value of [firstVarKey]) {
+            // create CssModel
+            value.forEach((element) => {
+                // if enclosed by ()
+                const enclosedValue = element.match(/\((.*?)\)/)?.[1];
+                if (enclosedValue) {
+                    console.log('will be root:', enclosedValue);
+                }
+                // if contains cssFab.
+                let modelData = {
+                    [fragmentKey]: { [firstKey]: [], ...remainingVariations }
+                };
+                const options = {};
+                let theme;
+                if (element.includes('cssFab.')) {
+                    // replace with cssFab.theme
+                    const fabTheme = element.split('cssFab.')[1].replace(')', '');
+                    // modelData[fabTheme] = {};
+                    modelData[fragmentKey][firstKey] = Object.keys(colorConfig[fabTheme] ?? {});
+                    if (enclosedValue)
+                        options[firstKey] = fabTheme;
+                    console.log(options);
+                    theme = fabTheme;
+                }
+                else {
+                    modelData[fragmentKey][firstKey] = value;
+                }
+                // create CssModel
+                const cssModel = new CssFabricVariations(modelData, options);
+                let results = cssModel.generateCss();
+                // console.log('results');
+                if (theme) {
+                    output[theme] = results;
+                }
+                else {
+                    output = results;
+                }
+            });
+        }
+        return output;
+        // }
+        /*  else {
+            let modelData: Record<string, any> = {
+                [fragmentKey]: { [firstKey]: [], ...remainingVariations }
+            };
+            //
+            let objg = {};
+            for (const value of firstVarKey) {
+                objg[value] = firstVarKey;
+            }
+            return modelData;
+        } */
+    }
+    generateRoot(obj, prefix = '') {
+        let result = {};
+        result[`.${this.className}`] = 'thin solid blue';
+        const ref = Object.entries(obj).reduce((acc, [style, propertyValues]) => {
+            acc[style] = propertyValues;
+            return acc;
+        }, {});
+    }
+    generateCombinations(obj, prefix = '', remainingCombinations = {}) {
+        let result = {};
+        // if no more keys, return the remaining combinations
+        if (Object.keys(remainingCombinations).length > 0) {
+            result[prefix] = remainingCombinations;
+        }
+        for (const key in obj) {
+            for (const value of obj[key]) {
+                const newPrefix = prefix + (prefix ? '-' : '.' + this.className + '-') + value;
+                let cssVar = `--var(${this.className}-${key},${value})`;
+                const newCombination = {
+                    ...remainingCombinations,
+                    [`${this.className}-${key}`]: cssVar,
+                    [`--${this.className}-${key}`]: value
+                };
+                const { [key]: _, ...remainingObj } = obj;
+                const subCombinations = this.generateCombinations(remainingObj, newPrefix, newCombination);
+                result = { ...result, ...subCombinations };
+            }
+            break; // S'arrêter après avoir traité la première clé
+        }
+        return result;
+    }
+}

package/dist/cssFabric/index.d.ts

@@ -0,0 +1,113 @@
+import { colorConfig } from './config.js';
+type Steps = [number, number, number];
+type Mask = string;
+type ToMask = string;
+type EaseTrigger = number;
+type Ease = number;
+declare class CssFabricExport {
+    private cssFabricModel;
+    exportPaths: Record<'css' | 'json', string>;
+    constructor(cssFabricModel: cssFabricModelType, exportPaths?: CssFabricExport['exportPaths']);
+    export(options: CssFabricExport['exportPaths']): void;
+    private createCssFile;
+    private createJsonModel;
+}
+declare class CssFabricBuilder {
+    cssFabricBuilderParams: CssFabricBuilderParams;
+    constructor();
+    parseModel(json: Record<string, any>, parentKey?: string): string;
+    createProgression(options: {
+        property: string;
+        steps: {
+            steps: Steps;
+            presets?: string[];
+            ease: [Ease, EaseTrigger];
+            reverseValue?: boolean;
+        };
+        iteratorMask: string;
+        propertyValue?: {
+            content: [Mask, ToMask];
+            apply: string;
+        };
+    }, format?: 'css' | 'json'): {};
+    /**
+     * Dispatches elements based on the input mask.
+     *
+     * @template M - The type of the mask key.
+     * @template E - The type of the element.
+     * @template A - The type of the value.
+     *
+     * @param inputMask - The input mask.
+     * @param creatorFunction - The function to create the element based on the mask key.
+     * @param apply - The function to apply the value to the element.
+     */
+    dispatchHandleElements<M extends string = string, E = Element, A = any>(inputMask: any[], creatorFunction: (maskKey: M, index: number) => E, apply: (element: E, value: A) => void): void;
+    enqueue(callback: (callbackKey: string) => void, ...rest: string[][]): any;
+    flattenIt(arr1: string[], arr2: string[], scope?: string): Record<string, any>;
+    makeVariation(themeColor: string, variation: string): any;
+    makeDefaultVariations(arr1: string[], arr2: string[], prefix: string, vendor?: string): Record<string, any>;
+    mainRule(vars: Record<string, any>, prefix: string): Record<string, any>;
+}
+declare class CssFabricBuilderParams {
+    vendorName: string;
+    variations: {
+        readonly none: "var({#vendor}-color-##);";
+        readonly light: "color-mix(in srgb, var({#vendor}-color-##) white ##%);";
+        readonly lighter: "color-mix(in srgb, var({#vendor}-color-##) white ##%);";
+        readonly dark: "color-mix(in srgb, var({#vendor}-color-##) black ##%);";
+        readonly darker: "color-mix(in srgb, var({#vendor}-color-##) black ##%);";
+        readonly complement: "color-mix(in srgb, var({#vendor}-color-##) black ##%);";
+        readonly invert: "color-mix(in srgb, var({#vendor}-color-##) black ##%);";
+        readonly 'alpha-low': "color-mix(in srgb, var({#vendor}-color-##) transparent ##%);";
+        readonly alpha: "color-mix(in srgb, var({#vendor}-color-##) transparent ##%);";
+        readonly 'alpha-high': "color-mix(in srgb, var({#vendor}-color-##) transparent ##%);";
+    };
+    defaultVariationSteps: {
+        readonly steps: readonly [0, 100, 10];
+        readonly ease: readonly [2, 20];
+    };
+    correspondances: Record<string, any>;
+    baseColors: {
+        primary: string;
+        secondary: string;
+        accent: string;
+        neutral: string;
+        error: string;
+    };
+    presets: string[];
+    config: typeof colorConfig;
+    constructor();
+    setVariations(variations: typeof CssFabricBuilderParams.prototype.variations): void;
+    setDefaultVariationSteps(variationSteps: typeof CssFabricBuilderParams.prototype.defaultVariationSteps): void;
+    private deepMerge;
+}
+declare enum ModelConfigKeys {
+    base = 0,
+    palette = 1,
+    presets = 2,
+    status = 3,
+    out = 4,
+    gray = 5,
+    out2 = 6
+}
+type cssFabricModelKey = keyof typeof ModelConfigKeys;
+type cssFabricModelType = Record<cssFabricModelKey, any>;
+declare class CssFabric {
+    vendor: (fragment?: string) => string;
+    cssFabricModel: cssFabricModelType;
+    cssFabricBuilderParams: CssFabricBuilderParams;
+    cssFabricBuilder: CssFabricBuilder;
+    constructor();
+    private cleanModelKey;
+    setParams(params: Partial<CssFabricBuilderParams>): void;
+    createCssFabricVarsColors(...args: cssFabricModelKey[]): {
+        export: CssFabricExport['export'];
+        css: string;
+    };
+    cssFabricSheet(): {
+        export: (options: any) => void;
+        css: Record<string, any>;
+    };
+}
+export declare const cssFabric: CssFabric;
+export {};