@newlogic-digital/ui 3.0.1 → 3.1.0

package/README.md

@@ -10,9 +10,7 @@
 
 # 🎨 Newlogic UI
 
-> v3 is still in early development
-
-Modern and modular CSS framework with the best principles.
+Lightweight, modern and modular CSS framework with the best principles
 
 - 💡 Modern
 - 📦 Modular
@@ -20,7 +18,9 @@ Modern and modular CSS framework with the best principles.
 - ✨️ Progressive
 - ⚡️ Fast
 
-Newlogic UI is component framework with simple syntax. Inspired by popular frameworks like Bootstrap and Bulma. It uses Tailwind CSS for utility classes. The modern approach comes first.
+Newlogic UI is component framework with easy syntax. Modern approach of CSS properties, enriched with utility classes from Tailwind. Inspired by favourite frameworks like Boostrap and Bulma
+
+Javascript implementation is mainly intended for use on backend rendered websites and applications such as with PHP
 
 ## ⚙️ Under the hood
 * **[Newlogic Core](https://core.newlogic.cz/)** - set of tools that can be used to create modern web applications
@@ -32,9 +32,9 @@ Newlogic UI is component framework with simple syntax. Inspired by popular frame
 * **Easy syntax** - .ui-btn (ui elements), .c-component (components), .c-section (sections) etc.
 
 
-The core of the Newlogic UI is Newlogic Core, which compiles modern JS and CSS code and contains other tools for web development. The source code is written in way that it can be used with other tools or a completely different environment than NodeJS, such as Deno. In general the rule is that the source code should be executable in current or future browsers, so it's written with W3C standards in mind. The framework is modular and you can really use only what is needed for your project.
+The core of the Newlogic UI is Newlogic Core, which compiles modern JS and CSS syntax and contains other tools for web development. Source code can be used with any other tools or even different environment than NodeJS, eg. Deno and is written in W3C standards and should be runnable in current or future version of browsers. The framework is modular, and you can really use only what is needed for your project.
 
-##🪄 Instalation
+## 🪄 Instalation
 
 Creating a new project (using Newlogic Core)
 ```sh
@@ -56,7 +56,6 @@ $ npm i @newlogic-newlogic/ui
 
 ```css
 /* main.css or individual modules */
-@import "node_modules/@newlogic/ui/src/icons/style.css"
 @import "node_modules/@newlogic/ui/src/styles/main.css"
 ```
 
@@ -75,10 +74,7 @@ import "node_modules/@newlogic/ui/src/scripts/main.js"
 Each Newlogic Core project has to have config via `gulpfile.js`, docs - [core.newlogic.cz](https://core.newlogic.cz/)
 
 ## 📌 Future plans
-- finishing docs and translating it to english
-- lighthouse optimization
-- upgrading form elements
-- new elements - dropdown, notificaton, snack and more
+- performance optimization
 
 ## Licence
-GNU GPLv3
+GNU GPLv3

package/gulpfile.js

@@ -1,10 +1,15 @@
-import {Core} from  "@newlogic-digital/core";
-import postcssMixins from "postcss-mixins";
+import { defineConfig } from '@newlogic-digital/core'
+import cms from "./src/module.cms.js"
 
-export default new Core().init({
+export default defineConfig({
+    config: true,
+    modules: {cms},
+    serve: {
+        https: true
+    },
     scripts: {
         importResolution: {
-            directories: ["Components", "Sections", "Layout", "Libraries", "Utils/Functions"]
+            directories: ['Components', 'Sections', 'Layout', 'Libraries', 'Utils/Functions', 'Ui']
         },
         importMap: {
             build: false,
@@ -14,180 +19,23 @@ export default new Core().init({
     styles: {
         purge: {
             enabled: true,
-            content: ['src/scripts/**/*.js', 'src/templates/**/*.twig', 'temp/cdn/*.js'],
+            content: ['src/scripts/**/*.js', 'src/templates/**/*.twig', 'www/templates/**/*.tpl', 'temp/cdn/*.js', 'admin_ex/js/templates/*.html', 'index.html'],
             options: {
                 safelist: {
                     standard: [/(class|is-|to-|grecaptcha)/],
-                    deep: [/(ui-wsw|wsw|datepicker)/]
+                    deep: [/(ui-text|wsw|datepicker)/]
                 }
             }
         },
         vendor: {
-            path: "Utils/vendor.css"
+            path: 'Utils/vendor.css'
         },
         importResolution: {
-            directories: ["Components", "Sections", "Layout", "Libraries", "Ui"]
+            directories: ['Components', 'Sections', 'Layout', 'Libraries', 'Ui']
         },
-        themePath: "Utils/theme/{THEME}.{FORMAT}",
+        themePath: 'Utils/theme/{THEME}.{FORMAT}',
         postcss: {
-            extend: [postcssMixins]
+            extend: []
         }
-    },
-    tailwind: {
-        darkMode: "class", // or "media" or "class"
-        corePlugins: {
-            preflight: false,
-            container: false,
-            ringWidth: false,
-            ringColor: false,
-            ringOpacity: false,
-            ringOffsetWidth: false,
-            ringOffsetColor: false,
-            gradientColorStops: false,
-            backgroundImage: false,
-            boxShadow: false
-        },
-        theme: {
-            extend: {
-                colors: {
-                    background: ({ opacityVariable, opacityValue }) => {
-                        if (opacityValue !== undefined) {
-                            return `rgba(var(--color-background), ${opacityValue})`
-                        }
-                        if (opacityVariable !== undefined) {
-                            return `rgba(var(--color-background), var(${opacityVariable}, 1))`
-                        }
-                        return `rgb(var(--color-background))`
-                    },
-                    default: ({ opacityVariable, opacityValue }) => {
-                        if (opacityValue !== undefined) {
-                            return `rgba(var(--color-default), ${opacityValue})`
-                        }
-                        if (opacityVariable !== undefined) {
-                            return `rgba(var(--color-default), var(${opacityVariable}, 1))`
-                        }
-                        return `rgb(var(--color-default))`
-                    },
-                    invert: ({ opacityVariable, opacityValue }) => {
-                        if (opacityValue !== undefined) {
-                            return `rgba(var(--color-invert), ${opacityValue})`
-                        }
-                        if (opacityVariable !== undefined) {
-                            return `rgba(var(--color-invert), var(${opacityVariable}, 1))`
-                        }
-                        return `rgb(var(--color-invert))`
-                    },
-                    light: ({ opacityVariable, opacityValue }) => {
-                        if (opacityValue !== undefined) {
-                            return `rgba(var(--color-light), ${opacityValue})`
-                        }
-                        if (opacityVariable !== undefined) {
-                            return `rgba(var(--color-light), var(${opacityVariable}, 1))`
-                        }
-                        return `rgb(var(--color-light))`
-                    },
-                    dark: ({ opacityVariable, opacityValue }) => {
-                        if (opacityValue !== undefined) {
-                            return `rgba(var(--color-dark), ${opacityValue})`
-                        }
-                        if (opacityVariable !== undefined) {
-                            return `rgba(var(--color-dark), var(${opacityVariable}, 1))`
-                        }
-                        return `rgb(var(--color-dark))`
-                    },
-                    primary: ({ opacityVariable, opacityValue }) => {
-                        if (opacityValue !== undefined) {
-                            return `rgba(var(--color-primary), ${opacityValue})`
-                        }
-                        if (opacityVariable !== undefined) {
-                            return `rgba(var(--color-primary), var(${opacityVariable}, 1))`
-                        }
-                        return `rgb(var(--color-primary))`
-                    },
-                    secondary: ({ opacityVariable, opacityValue }) => {
-                        if (opacityValue !== undefined) {
-                            return `rgba(var(--color-secondary), ${opacityValue})`
-                        }
-                        if (opacityVariable !== undefined) {
-                            return `rgba(var(--color-secondary), var(${opacityVariable}, 1))`
-                        }
-                        return `rgb(var(--color-secondary))`
-                    },
-                    warning: ({ opacityVariable, opacityValue }) => {
-                        if (opacityValue !== undefined) {
-                            return `rgba(var(--color-warning), ${opacityValue})`
-                        }
-                        if (opacityVariable !== undefined) {
-                            return `rgba(var(--color-warning), var(${opacityVariable}, 1))`
-                        }
-                        return `rgb(var(--color-warning))`
-                    },
-                    error: ({ opacityVariable, opacityValue }) => {
-                        if (opacityValue !== undefined) {
-                            return `rgba(var(--color-error), ${opacityValue})`
-                        }
-                        if (opacityVariable !== undefined) {
-                            return `rgba(var(--color-error), var(${opacityVariable}, 1))`
-                        }
-                        return `rgb(var(--color-error))`
-                    },
-                    info: ({ opacityVariable, opacityValue }) => {
-                        if (opacityValue !== undefined) {
-                            return `rgba(var(--color-info), ${opacityValue})`
-                        }
-                        if (opacityVariable !== undefined) {
-                            return `rgba(var(--color-info), var(${opacityVariable}, 1))`
-                        }
-                        return `rgb(var(--color-info))`
-                    },
-                    success: ({ opacityVariable, opacityValue }) => {
-                        if (opacityValue !== undefined) {
-                            return `rgba(var(--color-success), ${opacityValue})`
-                        }
-                        if (opacityVariable !== undefined) {
-                            return `rgba(var(--color-success), var(${opacityVariable}, 1))`
-                        }
-                        return `rgb(var(--color-success))`
-                    }
-                }
-            },
-            fontFamily: {
-                primary: "var(--font-primary)",
-                secondary: "var(--font-secondary)"
-            },
-            fontWeight: {
-                light: "var(--weight-light)",
-                normal: "var(--weight-normal)",
-                medium: "var(--weight-medium)",
-                semibold: "var(--weight-semibold)",
-                bold: "var(--weight-bold)",
-                extrabold: "var(--weight-extrabold)"
-            },
-            zIndex: {
-                "0": 0,
-                "10": "var(--z-10)",
-                "20": "var(--z-20)",
-                "30": "var(--z-30)",
-                "40": "var(--z-40)",
-                "50": "var(--z-50)",
-                "auto": "auto"
-            },
-            screens: {
-                "m": {"max": "47.9375em"},
-                "t": "48em",
-                "d": "60em",
-                "w": "76em",
-                "hd": "88em",
-                "touch": {"max": "59.9375em"},
-            }
-        },
-        variants: {
-            extend: {
-                backgroundColor: ['checked'],
-                borderColor: ['checked'],
-                textColor: ['checked'],
-            }
-        },
-        plugins: [],
     }
-})
+})

package/package.json

@@ -1,22 +1,27 @@
 {
   "name": "@newlogic-digital/ui",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "type": "module",
   "main": "gulpfile.js",
   "author": "New Logic Studio s.r.o.",
-  "description": "Modern and modular CSS framework with the best principles",
+  "description": "Lightweight, modern and modular CSS framework with the best principles",
   "license": "GNU GPLv3",
+  "scripts": {
+    "utils:eslint": "eslint 'src/scripts/**/*.js' --fix",
+    "utils:stylelint": "stylelint 'src/styles/**/*.css' --fix"
+  },
   "imports": {},
   "dependencies": {
-    "@simonwep/pickr": "^1.8.0",
-    "cleave.js": "^1.6.0",
-    "stimulus": "2.0.0",
+    "@simonwep/pickr": "^1.8.2",
+    "@hotwired/stimulus": "3.0.1",
     "swup": "2.0.14",
-    "vanillajs-datepicker": "^1.1.4"
+    "tippy.js": "^6.3.7",
+    "vanillajs-datepicker": "^1.2.0"
   },
   "devDependencies": {
-    "@newlogic-digital/core": "^0.2.6",
-    "postcss-mixins": "^7.0.3"
+    "@newlogic-digital/core": "~0.9.5",
+    "eslint-config-standard": "^16.0.3",
+    "stylelint-config-standard": "^24.0.0"
   },
   "files": [
     "src",

package/src/emails/email.css

@@ -1,7 +1,7 @@
-@import "../styles/Utils/theme/core.css";
+@import "../styles/Utils/theme/main.css";
 
 :root {
-  --width : 660px;
+  --width: 660px;
   --container: 30px;
 }
 
@@ -23,22 +23,26 @@ p {
   margin: 0;
 }
 
-.nlm_container_wrapper {
+.elm_container_wrapper {
   background-color: #fff;
   width: 100%;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Roboto, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: var(--color-default);
-  & .nlm_container {
+
+  & .elm_container {
     margin: 0;
     width: 100%;
     background-color: #fff;
+
     & > tr > td {
       padding: 0 var(--container);
-      &.nlm_full {
+
+      &.elm_full {
         padding: 0;
       }
     }
-    & .nlm_inner_container {
+
+    & .elm_inner_container {
       width: var(--width);
       min-width: var(--width);
       padding: 0;
@@ -46,17 +50,19 @@ p {
   }
 }
 
-.nlm_content {
+.elm_content {
   & .elm_content_info {
     color: #606060;
     font-size: 13px;
     line-height: 2;
+
     & a {
       &, & span {
         color: #606060;
       }
     }
   }
+
   & .elm_content_heading {
     font-size: 22px;
     font-weight: 600;
@@ -66,6 +72,6 @@ p {
 
 @media print {
   * {
-    -webkit-print-color-adjust:exact;
+    -webkit-print-color-adjust: exact;
   }
-}
+}

package/src/emails/email.twig

@@ -6,21 +6,21 @@
         <!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <style type="text/css" n:syntax="off">
-            {{ fetch ("/temp/emails/email.css") }}
+            {{ fetch ('/temp/emails/email.css') }}
         </style>
     </head>
     <body>
-        <table class="nlm_container_wrapper">
+        <table class="elm_container_wrapper">
             <tr>
                 <td>
-                    <table class="nlm_container">
-                        <tr class="nlm_header">
+                    <table class="elm_container">
+                        <tr class="elm_header">
                             <td>
-                                <table class="nlm_inner_container">
+                                <table class="elm_inner_container">
                                     <tr>
                                         <td>
                                             <br />
-                                            <a href="#"><img src="https://www.newlogic.cz/assets/img/logo.png" width="160" alt="" style="width: 160px" /></a>
+                                            <a href="#"><img src="https://via.placeholder.com/160x60" width="160" alt="" style="width: 160px" /></a>
                                             <br />
                                             <br />
                                         </td>
@@ -30,7 +30,7 @@
                         </tr>
                         <tr class="nlm_content">
                             <td>
-                                <table class="nlm_inner_container">
+                                <table class="elm_inner_container">
                                     <tr>
                                         <td>
                                             <br />

package/src/icons.svg

@@ -0,0 +1,32 @@
+<svg hidden="">
+    <symbol id="icon-chevron-left" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+    </symbol>
+    <symbol id="icon-chevron-right" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+    </symbol>
+    <symbol id="icon-angle-down" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor">
+        <path d="M10.998 15.467c.491.71 1.513.71 2.004 0l3.767-5.453c.581-.843 0-2.013-1.002-2.014H8.234C7.232 8 6.65 9.17 7.231 10.014z" />
+    </symbol>
+    <symbol id="icon-angle-up" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor">
+        <path d="M10.998 15.467c.491.71 1.513.71 2.004 0l3.767-5.453c.581-.843 0-2.013-1.002-2.014H8.234C7.232 8 6.65 9.17 7.231 10.014z" style="transform: scaleY(-1) translateY(1px); transform-origin: 50% 50%;" />
+    </symbol>
+    <symbol id="icon-exclamation-circle" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </symbol>
+    <symbol id="icon-x" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M6 18L18 6M6 6l12 12" />
+    </symbol>
+    <symbol id="icon-menu" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+    </symbol>
+    <symbol id="icon-moon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+    </symbol>
+    <symbol id="icon-sun" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+    </symbol>
+    <symbol id="icon-at-symbol" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
+    </symbol>
+</svg>

package/src/main.json

@@ -5,45 +5,32 @@
     "https://fonts.googleapis.com"
   ],
   "assets": {
-    "fonts": {
-      "google": {
-        "families": ["Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700&display=block"]
-      },
-      "custom": {
-        "families": ["iconfont"],
-        "urls": ["/public/assets/css/iconfont.css"],
-        "testStrings": {
-          "iconfont": "\ue905"
-        }
-      },
-      "inline": false
-    },
     "css": {
       "all": [
-        "/public/assets/css/main.css"
+        "/src/styles/main.css",
+        "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=block"
       ],
-      "core.src": "/src/styles/main.css",
-      "icons.src": "/src/icons/style.css",
-      "preload": "/public/assets/css/preload.css",
-      "tailwind": "/temp/tailwind.css"
+      "tailwind": "/temp/tailwind.css",
+      "tailwind.src": "/src/styles/tailwind.css",
+      "ratio": "/temp/ratio.css"
     },
     "js": {
       "importmap": "/public/importmap.json",
-      "core.es5": "/public/assets/js/es5/core.js",
-      "core": "/public/assets/js/main.js",
-      "core.src": "/src/scripts/main.js",
-      "es-module-shims": "https://cdn.jsdelivr.net/npm/es-module-shims@0.10.4/dist/es-module-shims.js",
-      "lazysizes": "https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js",
-      "polyfills": "/public/assets/js/es5/polyfills.js"
+      "main": "/src/scripts/main.js",
+      "lazysizes": "https://cdn.jsdelivr.net/npm/lazysizes@5.3.2/lazysizes.min.js"
     }
   },
   "layout": {
     "template": "Layout/Main.twig",
-    "cookies": true,
+    "cookies": false,
     "nav": [
       {
-        "name": "Domů",
+        "name": "Home",
         "url": "/"
+      },
+      {
+        "name": "Documentation",
+        "url": "/ui"
       }
     ]
   },
@@ -62,4 +49,4 @@
     "8x5": "data:image/gif;base64,R0lGODlhCAAFAIAAAP///wAAACwAAAAACAAFAAACBYSPqctYADs=",
     "3x2": "data:image/gif;base64,R0lGODlhAwACAIAAAP///wAAACwAAAAAAwACAAACAoRfADs="
   }
-}
+}

package/src/scripts/Components/+.js

@@ -1,2 +1,2 @@
-import './CookieConsent.js';
-import './Form.js';
+import './CookieConsent.js'
+import './Form.js'