@medyll/cssfabric 0.2.0 → 0.2.1

package/src/cssfabric/modules/zindex/zindex.scss

@@ -0,0 +1,15 @@
+
+@use 'zindex-vars';
+$zindex-config: zindex-vars.$zindex-config;
+// load scss config file
+@use '../../_utils';
+
+// read variables
+$z_groups: map-get($zindex-config, z_groups);
+
+
+@for $z_value from 0 through 10 {
+  .zI-#{$z_value} {
+    z-index: (($z_value) * 100);
+  }
+}

package/src/hooks.ts

@@ -0,0 +1,27 @@
+import cookie from 'cookie';
+import {v4 as uuid} from '@lukeed/uuid';
+import type {Handle} from '@sveltejs/kit';
+
+export const handle: Handle = async ({event, resolve}) => {
+  const cookies       = cookie.parse(event.request.headers.get('cookie') || '');
+  event.locals.userid = cookies.userid || uuid();
+  
+  const response = await resolve(event, {
+    ssr          : false,
+    transformPage: ({html}) => html.replace('old', 'new')
+  });
+  
+  if (!cookies.userid) {
+    // if this is the first time the user has visited this app,
+    // set a cookie so that we recognise them when they return
+    response.headers.set(
+      'set-cookie',
+      cookie.serialize('userid', event.locals.userid, {
+        path    : '/',
+        httpOnly: true
+      })
+    );
+  }
+  
+  return response;
+};

package/src/index.d.ts

@@ -0,0 +1,3 @@
+declare const cssfabric;
+
+export default cssfabric;

package/src/index.ts

@@ -0,0 +1,4 @@
+
+import cssfabric from "./lib/scripts/cssfabric"
+
+export default cssfabric

package/src/lib/_generated/index.d.ts

@@ -0,0 +1,3 @@
+declare const module;
+
+export default module;

package/{init/importCssVars.js → src/lib/init/importCssVars.ts}

@@ -1,2 +1,3 @@
-// copy css vars file
-export {};
+// copy css vars file
+
+export {}

package/src/lib/scripts/cssfabric.ts

@@ -0,0 +1,54 @@
+import jsonConfig              from "../_generated/cssFabric.vars.json" ;
+import cssfabricClassNames from "./cssfabricClassNames";
+
+export type IFabricConfModulePart = Record<string, any>;
+export type IFabricConfModuleDataPart = Record<string, any>;
+export type IFabricConfModuleMetaDataPart = Record<string, any>;
+export type IFabricConfModuleDocsPart = Record<string, any>;
+export type TFabricConfModuleDocsAttributesPart = Record<string, any>;
+
+//
+const getModuleList = (): Record<string, any> => {
+    return jsonConfig["cssfabric"]?.["modules"] || {};
+};
+
+const getModuleConfig = (module?: string): IFabricConfModulePart => {
+    if (module) return jsonConfig["cssfabric"]?.["modules"]?.[module] || {};
+    return jsonConfig;
+};
+
+const getModuleData = (module?: string): IFabricConfModuleDataPart => {
+    if (module) return jsonConfig["cssfabric"]?.["modules"]?.[module]?.["_data"] || {};
+    return jsonConfig;
+};
+
+const getModuleMetaData = (module?: string): IFabricConfModuleMetaDataPart => {
+    if (module)
+        return jsonConfig["cssfabric"]?.["modules"]?.[module]?.["_metadata"] || {};
+    return jsonConfig;
+};
+
+const getModuleDocs = (module?: string): IFabricConfModuleDocsPart => {
+    if (module)
+        return jsonConfig["cssfabric"]?.["modules"]?.[module]?.["_docs"] || {};
+    return jsonConfig;
+};
+
+const getModuleDocsAttributes = (module?: string): TFabricConfModuleDocsAttributesPart => {
+    if (module)
+        return jsonConfig["cssfabric"]?.["modules"]?.[module]?.["_docs"]?.["attributes"] || {};
+    return jsonConfig;
+};
+
+export default {
+    getModuleList,
+    getModuleConfig,
+    getModuleData,
+    getModuleMetaData,
+    getModuleDocs,
+    getModuleDocsAttributes,
+    getClassNames: cssfabricClassNames,
+    getModuleClassNames: cssfabricClassNames,
+    getModuleTagClassNames: cssfabricClassNames.getModuleTagClassNames,
+    getModuleTagDebug: cssfabricClassNames.getModuleTagDebug,
+};

package/{scripts/cssfabricClassNames.js → src/lib/scripts/cssfabricClassNames.ts}

@@ -1,48 +1,94 @@
-import cssfabric from "./cssfabric";
-import utils from "./utils";
-function loopIt(props) {
-    const { module } = props;
-    const moduleAttributes = cssfabric.getModuleDocsAttributes(module);
+import cssfabric from "./cssfabric"
+import utils     from "./utils";
+
+export interface IListCssfabricClassNamesProps {
+    module: string;
+    moduleAttribute: any;
+    outputStyle?: 'default' | 'debug';
+}
+
+type TFabricClassName = string;
+type TClassNameFragment = string | number;
+
+type TCollect = string[];
+type TFabricClassNameList = TFabricClassName[];
+type TFabricClassNameListFragments = TClassNameFragment[];
+
+type TGuess = any;
+type TLevelKey = string;
+
+type level = string[];
+
+type IModuleLevels = level | level[] | [] | any[] | Record<string, any[]>;
+
+
+export interface ILoopIt {
+    module: string;
 }
-function cssfabricClassNames(props) {
-    const { module, moduleAttribute, outputStyle } = props;
+
+function loopIt(props: ILoopIt) {
+    
+    const {module}         = props;
     const moduleAttributes = cssfabric.getModuleDocsAttributes(module);
-    const fabricAttributes = moduleAttributes[moduleAttribute];
-    const moduleTag = fabricAttributes["tag"];
-    const moduleKeys = fabricAttributes["keys"] || undefined;
-    const moduleLevels = fabricAttributes["levels"] || undefined;
-    const moduleLevelsLinked = fabricAttributes["levelsLinked"] || undefined;
-    const moduleLevelsExtended = fabricAttributes["levelsDeclin"] || undefined;
-    const moduleClassNames = fabricAttributes["classNames"] || undefined;
-    let finalOutput = [];
-    let finalOutputDebug = {};
+    
+}
+
+function cssfabricClassNames(props: IListCssfabricClassNamesProps) {
+    
+    const {module, moduleAttribute, outputStyle} = props;
+    const moduleAttributes                       = cssfabric.getModuleDocsAttributes(module);
+    
+    const fabricAttributes                  = moduleAttributes[moduleAttribute];
+    const moduleTag                         = fabricAttributes["tag"];
+    const moduleKeys: any[]                 = fabricAttributes["keys"] || undefined;
+    const moduleLevels: IModuleLevels       = fabricAttributes["levels"] || undefined;
+    const moduleLevelsLinked: IModuleLevels = fabricAttributes["levelsLinked"] || undefined;
+    const moduleLevelsExtended              = fabricAttributes["levelsDeclin"] || undefined;
+    const moduleClassNames                  = fabricAttributes["classNames"] || undefined;
+    
+    let finalOutput: TCollect                 = [];
+    let finalOutputDebug: Record<string, any> = {};
+    
+    
     return doParse(outputStyle);
-    function doParse(mode) {
-        let keyList, levelList, levelListLinked, levelListDeclin;
+    
+    function doParse(mode?: string) {
+        
+        let keyList,
+            levelList,
+            levelListLinked,
+            levelListDeclin;
+        
         const finalOut = [];
         const debugOut = {};
+        
         if (moduleKeys && moduleKeys.length) {
             // beware of any [][]
             keyList = concatenateWithKey(moduleTag, moduleKeys);
         }
+        
         if (moduleLevels && Object.keys(moduleLevels).length) { // object !!!
             levelList = Object.keys(moduleLevels).map((level) => {
-                let val = moduleLevels[level];
+                let val = moduleLevels[level]
                 return concatenateWithKey(level, val);
             }).flat();
         }
+        
         if (moduleLevelsLinked && Object.keys(moduleLevelsLinked).length) {
             levelListLinked = Object.keys(moduleLevelsLinked).map((level) => {
-                let val = moduleLevelsLinked[level];
+                let val = moduleLevelsLinked[level]
                 return concatenateWithKey(level, val);
             }).flat();
         }
+        
+        
         if (moduleLevelsExtended && Object.keys(moduleLevelsExtended).length) {
             levelListDeclin = Object.keys(moduleLevelsExtended).map((level) => {
-                let val = moduleLevelsLinked[level];
+                let val = moduleLevelsLinked[level]
                 return concatenateWithKey(level, val);
             }).flat();
         }
+        
         // prefix all now , and link
         // colors :
         if (keyList && !moduleLevels && !moduleLevelsLinked) {
@@ -50,18 +96,24 @@ function cssfabricClassNames(props) {
             finalOut.push(keyList);
             registerDebug('default', keyList);
         }
+        
         if (moduleKeys && (moduleLevels || moduleLevelsLinked)) {
             // base
             if (moduleLevels) {
                 let tg = keyList.map(x => {
+                    
                     let tre = Object.keys(moduleLevels).map((level) => {
-                        let val = moduleLevels[level];
+                        let val = moduleLevels[level]
+                        
                         let debugKey = (x !== '_' && x.toString().charAt(0) !== '_') ? x : level;
-                        debugKey = (level.toString().charAt(0) === '_') ? debugKey : debugKey + '-' + level;
-                        registerDebug(x, concatenateWithKey(debugKey, val), level);
+                        debugKey = (level.toString().charAt(0)==='_')? debugKey : debugKey + '-' + level
+                        registerDebug(x, concatenateWithKey(debugKey , val), level);
+                        
                         return concatenateWithKey(level, val);
-                    }).flat(4);
+                    }).flat(4)
+                    
                     return concatenateWithKey(x, tre);
+                    
                 });
                 // is it declinated ? only colors, so nope
                 // export
@@ -71,10 +123,12 @@ function cssfabricClassNames(props) {
             if (moduleLevelsLinked) {
                 //
                 let yt = Object.values(moduleKeys).map(moduleKey => {
+                    
                     if (moduleKeys.includes(moduleKey)) {
                         let out = [];
                         // linked are here !!
                         registerDebug('linked', concatenateWithKey(moduleTag + '-' + moduleKey, moduleLevelsLinked[moduleKey]), moduleKey);
+                        
                         out.push(concatenateWithKey(moduleKey, moduleLevelsLinked[moduleKey]));
                         // is it declinated ?
                         if (moduleLevelsExtended && moduleLevelsExtended[moduleKey]) {
@@ -82,65 +136,81 @@ function cssfabricClassNames(props) {
                             out.push(moduleLevelsLinked[moduleKey].map((z) => {
                                 // iddem
                                 registerDebug('declinated', concatenateWithKey(moduleTag + '-' + moduleKey + '-' + z, moduleLevelsExtended[moduleKey]), z);
+                                
                                 return concatenateWithKey(z, moduleLevelsExtended[moduleKey]);
-                            }).flat(2));
+                            }).flat(2))
                         }
+                        
                         // flatten for group here
                         return out.flat(2);
                     }
                 }).flat();
+                
                 // export
                 finalOut.push(concatenateWithKey(moduleTag, yt));
+                
             }
             if (levelListDeclin) {
             } // only colors ? don't go there
+            
         }
         if (!keyList && levelList) {
             // export
             let kkk = concatenateWithKey(moduleTag, levelList);
             finalOut.push(kkk);
         }
+        
         if (moduleClassNames) {
-            let kk = parseClassNames();
+            let kk  = parseClassNames();
             let kkk = concatenateWithKey(moduleTag, kk);
+            
             registerDebug('classnames', kk);
+            
             // export
             finalOut.push(kkk);
         }
+        
         if (mode && mode === 'debug') {
-            return finalOutputDebug;
-        }
-        else {
+            return finalOutputDebug
+            
+        } else {
             return finalOut.flat(2);
         }
     }
-    function registerDebug(tag, data, nestedTag) {
+    
+    function registerDebug(tag: string, data: string[], nestedTag?: string) {
         if (nestedTag) {
-            if (!finalOutputDebug[tag])
-                finalOutputDebug[tag] = {};
+            if (!finalOutputDebug[tag]) finalOutputDebug[tag] = {}
             finalOutputDebug[tag][nestedTag] = finalOutputDebug[tag][nestedTag] ? finalOutputDebug[tag][nestedTag].concat(data) : data;
-        }
-        else {
+            
+        } else {
+            
             finalOutputDebug[tag] = finalOutputDebug[tag] ? finalOutputDebug[tag].concat(data) : data;
         }
     }
+    
     function parseClassNames() {
         return Object.keys(moduleClassNames).map((klass) => {
             return concatenateWithKey(klass, moduleClassNames[klass]);
         }).flat();
     }
-    function concatenateWithKey(key, levelLine) {
-        return levelLine.map((levelTag) => {
+    
+    
+    function concatenateWithKey(key, levelLine: string[]) {
+        return levelLine.map((levelTag: string) => {
             return [key, levelTag].filter((val) => {
-                return (val !== '_' && val.toString().charAt(0) !== '_');
+                return (val !== '_' && val.toString().charAt(0) !== '_')
             }).filter(x => Boolean(x)).join('-');
-        });
+        })
     }
+    
+    
 }
+
 export default {
     getModuleTagClassNames: cssfabricClassNames,
-    getModuleTagDebug: function doIt(props) {
-        props.outputStyle = 'debug';
+    getModuleTagDebug:      function doIt(props: IListCssfabricClassNamesProps) {
+        props.outputStyle = 'debug'
         return cssfabricClassNames(props);
     }
-};
+}

package/src/lib/scripts/index.ts

@@ -0,0 +1,8 @@
+
+
+function buildReadme(vars: string){
+ return "readme"
+}
+
+
+export default buildReadme;

package/src/lib/scripts/utils.ts

@@ -0,0 +1,37 @@
+const utils = {
+
+    isArrayOfTypes: (arr: any): any => {
+        let ret = '';
+
+        if (!Array.isArray(arr)) {
+            return false;
+        }
+        if (arr.every(x => Array.isArray(x))) ret = 'arrays'
+        if (arr.every(x => typeof x === 'number' || typeof x === 'string' ) ) ret = 'strings'
+        if (arr.every(x => typeof x === 'string')) ret = 'strings'
+        if (arr.every(x => typeof x === 'number')) ret = 'numbers'
+        if (arr.every(x => typeof x === 'object' && !Array.isArray(x))) ret = 'objects'
+
+        return ret;
+    },
+
+    isObjectOfTypes: (arr: any): any => {
+
+        if (Array.isArray(arr)) {
+            return false;
+        }
+
+        let ret = '';
+        let arrValues = Object.values(arr);
+
+        if (arrValues.every(x => typeof x === 'number' || typeof x === 'string' ) ) ret = 'strings'
+        if (arrValues.every(x => Array.isArray(x))) ret = 'arrays'
+        if (arrValues.every(x => typeof x === 'string')) ret = 'strings'
+        if (arrValues.every(x => typeof x === 'number')) ret = 'numbers'
+        if (arrValues.every(x => typeof x === 'object' && !Array.isArray(x))) ret = 'objects'
+
+        return ret;
+    }
+}
+
+export default utils;

package/src/routes/__layout.svelte

@@ -0,0 +1,91 @@
+<script context="module" lang="ts">
+
+  export const prerender = true;
+</script>
+<script lang="ts">
+  import Header from '$lib/../components/header/Header.svelte';
+  import '../app.css';
+  import HeaderSiteTitle from "../components/HeaderSiteTitle.svelte";
+  import {fabricNavigation} from "../scripts/utils";
+
+  const links: string[] = fabricNavigation.getActiveLinks();
+
+  export let moduleTag  = '';
+  export let modulePage = '';
+
+
+
+</script>
+
+<main class={"w-full  flex flex-v   h-full content-start overflow-auto"}>
+    <div class={"w-full w-sm-main "}>
+        <HeaderSiteTitle
+                description={"cssFabric is an alpha cssFabric"}
+                title="cssfabric"
+                title_tag={"just.fabric.it"}
+        />
+
+    </div>
+    <div class={" dsp-none"}>
+        <div class={"dsp-none dsp-sm-block"}>sm</div>
+        <div class={"dsp-md-block dsp-none "}>md</div>
+        <div class={"dsp-lg-block dsp-none"}>lg</div>
+        <div class={"dsp-none dsp-xl-block dsp-none"}>xl</div>
+        <div class={"dsp-none dsp-xxl-block dsp-none"}>xxl</div>
+        <div class={"dsp-none dsp-xxxl-block dsp-none"}>xxxl</div>
+    </div>
+    <div class={"flex flex-lg-v flex-h  h-full"}>
+        <aside class={"w-lg-full w-8 pad "}>
+            <nav class={"pad pad-lg"}>
+                <ul class={"menu-lg-h menu-v"}>
+                    <li class={"menu-item " }>
+                        <a href={'/installation'}>
+                            <span>installation</span>
+                        </a>
+                    </li>
+                </ul>
+                <ul class={"menu-lg-h menu-v"}>
+                    {#each Object.values(links) as key}
+                        <!--{    css = (staticModule === key) ? 'active' : '';}-->
+                        <li class={"menu-item " } class:active={(moduleTag === key)}>
+                            <a  rel="external" href={fabricNavigation.getModuleClassNamesPage(key)}>
+                                <span>{`${key}`}</span>
+                            </a>
+                        </li>
+                    {/each}
+                </ul>
+            </nav>
+        </aside>
+        <section class={"flex-main"}>
+            <slot>slot test</slot>
+        </section>
+    </div>
+</main>
+
+
+<style global lang="scss">
+  @import "src/lib/styles/cssfabric.min";
+
+  main {
+    margin: 0 auto;
+    box-sizing: border-box;
+  }
+
+  footer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 40px;
+  }
+
+  footer a {
+    font-weight: bold;
+  }
+
+  @media (min-width: 480px) {
+    footer {
+      padding: 40px 0;
+    }
+  }
+</style>