@newlogic-digital/ui 3.4.2 → 3.7.5

package/README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://ui.newlogic.cz/" target="_blank" rel="noopener noreferrer">
-    <img width="180" src="https://ui.newlogic.cz/favicons/android-chrome-192x192.png" alt="Logo">
+    <img width="180" src="https://ui.newlogic.cz/favicons/favicon.svg" alt="Logo">
   </a>
 </p>
 <p align="center">
@@ -18,14 +18,24 @@ Lightweight, modern and modular CSS framework with the best principles
 - ✨️ Progressive
 - ⚡️ Fast
 
-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
+## Příprava projektu pro implementaci
+1. nainstalovat node - `npm i`
+2. nainstalovat cms - `newlogic init cms`
+3. vytvořit si db na devlogic.cz a nastavit v `config/local.neon`
+4. spustit `docker compose up` a `vite`
+5. spustit `make prepare`
+6. spustit `make phinx-seed`
+7. nastavit `FTP_SERVER`, `DB_USERNAME` a `DB_PASSWORD` a vytvořit prostor na devlogic.cz
+8. commitnout změny a pushnout
 
-Javascript implementation is mainly intended for use on backend rendered websites and applications such as with PHP
+Newlogic UI is component framework with easy syntax for backend integration. Modern approach of CSS properties, enriched with utility classes from TailwindCSS and powered by Winduum.
+
+Javascript implementation is only **28 kB** and mainly intended for use on backend rendered websites and applications with PHP framework Nette
 
 ## ⚙️ Under the hood
-* **[Vituum](https://vituum.dev/)** - a small wrapper around Vite, adds support of template engines and more
-* **[Newlogic Core](https://github.com/newlogic-digital/core)** - integration for Vituum, adds pre-defined config of integrations and more
-* **[ESM](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)** - completely written in modern JS syntax - ES8+, ES module, etc.
+* **[Vituum](https://vituum.dev/)** - plugins for Vite, adds support for template engines and more.
+* **[Newlogic Core](https://github.com/newlogic-digital/core)** - starter pack for creating modern web applications. Powered by Vite and Vituum.
+* **[ESM](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)** - completely written in modern JS syntax - esnext, ES modules, etc.
 * **[PostCSS](https://postcss.org/)** - completely written in modern CSS syntax - nesting, variables, etc.
 * **[Tailwind CSS](https://tailwindcss.com/)** - rich utility classes for everything
 * **[Stimulus](https://stimulus.hotwire.dev/)** - a modest JavaScript framework for the HTML you already have
@@ -33,11 +43,11 @@ Javascript implementation is mainly intended for use on backend rendered website
 * **Easy syntax** - .ui-btn (ui elements), .c-component (components), .c-section (sections) etc.
 
 
-The core of the Newlogic UI is Vituum with 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.
+Newlogic UI uses Newlogic Core, which compiles modern JS and CSS syntax via Vite and Vituum. Source code can be used with any other tools or even different environment than NodeJS, e.g. Deno and is written in W3C standards and should be runnable in current or future version of browsers.
 
 ## 🪄 Get started
 
-Creating a new project (using Vituum)
+Creating a new project (with Vituum and Newlogic Core)
 ```sh
 $ git clone --depth 1 https://github.com/newlogic-digital/ui.git newlogic-ui-project
 $ cd newlogic-ui-project && npm i
@@ -57,22 +67,18 @@ $ npm i @newlogic-digital/ui
 
 ```css
 /* main.css or individual modules */
-@import "node_modules/@newlogic-digital/ui/src/styles/main.css"
+@import "@newlogic-digital/ui/src/styles/main.css"
 ```
 
 ```js
 /* main.js or individual modules */
-import "node_modules/@newlogic-digital/ui/src/scripts/main.js"
+import "@newlogic-digital/ui/src/scripts/main.js"
 ```
 
 ### Requirements
 
 - [Node.js LTS (16.x)](https://nodejs.org/en/download/)
-- [NPM (7.x)](https://www.npmjs.com/package/npm) or any other package manager
-
-### Config
-
-Each Vituum project has to have config via `vite.config.js`, docs - [vituum.dev](https://vituum.dev)
+- [NPM (9.x)](https://www.npmjs.com/package/npm) or any other package manager
 
 ## Licence
 GNU GPLv3

package/package.json

@@ -1,49 +1,57 @@
 {
   "name": "@newlogic-digital/ui",
-  "version": "3.4.2",
+  "version": "3.7.5",
   "type": "module",
   "main": "vite.config.js",
   "author": "New Logic Studio s.r.o.",
   "description": "Lightweight, modern and modular CSS framework with the best principles",
   "license": "GNU GPLv3",
   "scripts": {
-    "postinstall": "rm -rf node_modules/typed-query-selector",
-    "dev": "vite",
+    "postinstall": "rm -rf node_modules/typed-query-selector && ncu",
+    "dev": "npm run cleanup && vite",
+    "dev-emails": "npm run cleanup && vite --mode emails",
     "preview": "vite preview",
-    "build": "vite build --mode development",
-    "build-production": "vite build",
+    "build": "npm run cleanup && vite build --mode development",
+    "build-production": "npm run cleanup && vite build",
     "build-emails": "vite build --mode emails",
-    "emails": "vituum emails",
-    "cleanup": "vituum cleanup",
+    "cleanup": "git clean -qdfX public -e \\!userfiles",
     "eslint": "eslint 'src/scripts/**/*.js'",
     "eslint-fix": "eslint 'src/scripts/**/*.js' --fix",
     "stylelint": "stylelint 'src/styles/**/*.css'",
-    "stylelint-fix": "stylelint 'src/styles/**/*.css' --fix"
+    "stylelint-fix": "stylelint 'src/styles/**/*.css' --fix",
+    "npm-update": "ncu -u && npm update",
+    "npm-sort": "npm r -S example && npm r -D example"
   },
   "dependencies": {
-    "@simonwep/pickr": "^1.8.2",
-    "@hotwired/stimulus": "^3.2.1",
-    "winduum": "^0.1.18",
-    "swup": "^3.1.1",
-    "naja": "^2.5.0",
-    "tippy.js": "^6.3.7",
-    "vanillajs-datepicker": "^1.3.3",
-    "css-has-pseudo": "^5.0.2"
+    "@floating-ui/dom": "^1.6.12",
+    "@hotwired/stimulus": "^3.2.2",
+    "@newlogic-digital/cookieconsent-js": "^1.0.0",
+    "@newlogic-digital/utils-js": "^1.1.1",
+    "@simonwep/pickr": "^1.9.1",
+    "air-datepicker": "^3.5.3",
+    "eslint": "^9.15.0",
+    "naja": "^3.2.1",
+    "neostandard": "^0.11.8",
+    "stylelint-config-standard": "^36.0.1",
+    "swup": "^4.8.1",
+    "winduum": "^1.2.4"
   },
   "devDependencies": {
-    "@newlogic-digital/core": "^2.0.0",
-    "@types/grecaptcha": "^3.0.4",
-    "eslint-config-standard": "^17.1.0",
-    "stylelint-config-standard": "^33.0.0",
-    "stylelint-stylistic": "^0.4.2",
-    "postcss-custom-selectors": "^7.1.3"
+    "@newlogic-digital/core": "^2.1.2",
+    "@stylistic/stylelint-config": "^2.0.0",
+    "@tailwindcss/container-queries": "^0.1.1",
+    "@types/grecaptcha": "^3.0.9",
+    "npm-check-updates": "^17.1.11",
+    "vite": "^5.4.11"
   },
   "files": [
     "src"
   ],
+  "exports": {
+    "./src/*": "./src/*"
+  },
   "engines": {
-    "node": ">=16.0.0",
-    "npm": ">=7.10.0"
+    "node": "^18.0.0 || >=20.0.0"
   },
   "repository": {
     "type": "git",

package/src/data/main.json

@@ -1,28 +1,37 @@
 {
+  "baseUrl": "https://localhost:5173",
   "lang": "en",
   "prefetch": [
     "https://cdn.jsdelivr.net",
     "https://fonts.gstatic.com",
     "https://fonts.googleapis.com"
   ],
+  "preload": [
+    {
+      "href": "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=block",
+      "rel": "preload stylesheet",
+      "as": "style",
+      "crossorigin": true
+    },
+    {
+      "href": "https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2",
+      "as": "font",
+      "type": "font/woff2",
+      "crossorigin": true
+    }
+  ],
   "assets": {
     "css": {
       "all": [
-        "/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"
-      ],
-      "tailwind": "/temp/tailwind.css",
-      "tailwind.src": "/src/styles/tailwind.css",
-      "ratio": "/temp/ratio.css"
+        "/src/styles/main.css"
+      ]
     },
     "js": {
-      "importmap": "/public/importmap.json",
-      "main": "/src/scripts/main.js",
-      "lazysizes": "https://cdn.jsdelivr.net/npm/lazysizes@5.3.2/lazysizes.min.js"
+      "main": "/src/scripts/main.js"
     }
   },
   "layout": {
-    "cookies": false,
+    "cookies": true,
     "nav": [
       {
         "name": "Home",
@@ -39,11 +48,12 @@
     ]
   },
   "media": {
-    "min-1280": "(min-width: 1280px)",
-    "min-960": "(min-width: 960px)",
-    "min-768": "(min-width: 768px)",
-    "max-400": "(max-width: 767px)",
-    "min-320": "(min-width: 320px)"
+    "min-xl": "(min-width: 1216px)",
+    "max-lg": "(max-width: 959px)",
+    "min-lg": "(min-width: 960px)",
+    "min-md": "(min-width: 768px)",
+    "max-md": "(max-width: 767px)",
+    "min-xs": "(min-width: 360px)"
   },
   "lazy": {
     "1x1": "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",

package/src/emails/styles/main/+.css

@@ -0,0 +1,3 @@
+@import "Base/+.css";
+@import "Components/+.css";
+@import "Ui/+.css";

package/src/emails/styles/main/Base/+.css

@@ -0,0 +1,2 @@
+@import "config.css";
+@import "font.css";

package/src/emails/styles/main/Base/config.css

@@ -0,0 +1,22 @@
+:root {
+  --color-primary: 131, 205, 79;
+  --color-main: 21, 23, 26;
+  --color-body-primary: 255, 255, 255;
+  --color-body-secondary: 245, 245, 245;
+  --color-body-tertiary: 230, 230, 230;
+  --color-light: 255, 255, 255;
+}
+
+:root {
+  --color-body-primary-dark: 21, 23, 26;
+  --color-body-secondary-dark: 41, 43, 46;
+  --color-body-tertiary-dark: 61, 63, 66;
+}
+
+:root {
+  --spacing-container: 20px;
+  --spacing-container-inner: 30px;
+  --rounded: 20px;
+  --transition-background: background-color 0.2s ease;
+  --transition-color: color 0.2s ease;
+}

package/src/emails/styles/main/Components/+.css

@@ -0,0 +1 @@
+@import "Card.css";

package/src/emails/styles/main/Components/Card.css

@@ -0,0 +1,12 @@
+.c-card {
+  background-color: rgb(var(--color-body-tertiary));
+  border-radius: var(--rounded);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: rgb(var(--color-body-tertiary-dark)) !important;
+  }
+
+  & > tr > td {
+    padding: 28px 24px;
+  }
+}

package/src/emails/styles/main/Ui/+.css

@@ -0,0 +1,3 @@
+@import "Btn.css";
+@import "Heading.css";
+@import "Text.css";

package/src/emails/styles/main/Ui/Btn.css

@@ -0,0 +1,78 @@
+.ui-btn-group {
+  width: auto;
+
+  & td {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+}
+
+
+.ui-btn {
+  padding: 10px 15px;
+  background-color: rgb(var(--color-primary));
+  font-size: 12px;
+  border-radius: var(--rounded);
+  font-weight: 700;
+  transition: var(--transition-background), var(--transition-color);
+
+  &.lg {
+    padding: 20px;
+    border-radius: 999px;
+    font-size: 16px;
+  }
+
+  &, & span {
+    color: rgb(var(--color-light));
+    text-decoration: none;
+  }
+
+  & span {
+    transition: var(--transition-color);
+  }
+
+  &.ghosted {
+    background-color: transparent;
+
+    &, & span {
+      color: rgb(var(--color-primary));
+    }
+  }
+
+  &:hover {
+    background-color: rgba(var(--color-primary), 0.8) !important;
+
+    &[class*="text-main"] {
+      background-color: rgba(var(--color-main), 0.15) !important;
+    }
+  }
+}
+
+.ui-btn-table {
+  & table {
+    background-color: rgb(var(--color-primary));
+    width: auto;
+    border-radius: 999px;
+    font-weight: 700;
+    transition: var(--transition-background), var(--transition-color);
+  }
+
+  & td {
+    padding: 16px 20px;
+  }
+
+  &, & span {
+    color: rgb(var(--color-light));
+    text-decoration: none;
+  }
+
+  &:hover {
+    & table {
+      background-color: rgba(var(--color-primary), 0.8) !important;
+
+      &[class*="text-main"] {
+        background-color: rgba(var(--color-main), 0.15) !important;
+      }
+    }
+  }
+}

package/src/emails/styles/main/Ui/Heading.css

@@ -0,0 +1,8 @@
+.ui-heading {
+  font-size: 16px;
+  font-weight: 700;
+
+  &.lg {
+    font-size: 28px;
+  }
+}

package/src/emails/styles/main/Ui/Text.css

@@ -0,0 +1,12 @@
+.ui-text {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+  mso-line-height-rule: exactly;
+
+  &.sm {
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 20px;
+  }
+}

package/src/emails/styles/main.css

@@ -0,0 +1,92 @@
+@import "tailwindcss/base.css";
+@import "tailwindcss/components.css";
+@import "tailwindcss/utilities.css";
+@import "tailwindcss/variants.css";
+@import "main/Base/font.css";
+@import "main/Ui/+.css";
+@import "main/Components/+.css";
+
+:where([class*="border-"]) {
+  border-width: 0;
+  border-style: solid;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+table {
+  width: 100%;
+}
+
+a {
+  &, img {
+    text-decoration: none;
+    color: rgb(var(--color-main));
+  }
+
+  & img {
+    font-weight: 700;
+  }
+}
+
+.l-main {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Roboto, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  width: 600px;
+}
+
+.l-main-body {
+  background-color: rgb(var(--color-body-secondary));
+  border-radius: var(--rounded);
+
+  & > tr {
+    &:first-child > td {
+      padding-top: var(--spacing-container-inner);
+    }
+
+    &:last-child > td {
+      padding-bottom: var(--spacing-container-inner);
+    }
+  }
+}
+
+.dark-img {
+  display: none !important;
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: rgb(var(--color-body-primary-dark));
+    color: rgb(var(--color-light));
+    border-radius: var(--rounded);
+  }
+
+  a {
+    &, img {
+      color: rgb(var(--color-light)) !important;
+    }
+  }
+
+  .l-main-body {
+    background-color: rgb(var(--color-body-secondary-dark)) !important;
+  }
+
+  [class*="border-main/10"] {
+    border-color: rgba(var(--color-light), 0.15) !important;
+  }
+
+  [class*="text-main"] {
+    &, & span {
+      color: rgb(var(--color-light)) !important;
+    }
+  }
+
+  .light-img {
+    display: none !important;
+  }
+
+  .dark-img {
+    display: block !important;
+  }
+}

package/src/emails/{templates/Layout.twig → templates.test/Layout.latte}

@@ -5,19 +5,31 @@
     <title>Email Template</title>
     <!--[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">
-      @import '/src/emails/styles/email.css';
+
+    {var $forceLightMode = false}
+
+    {if $forceLightMode}
+        <meta name="color-scheme" content="only light">
+        <meta name="supported-color-schemes" content="only light">
+    {else}
+        <meta name="color-scheme" content="light dark">
+        <meta name="supported-color-schemes" content="light dark">
+    {/if}
+
+    <style type="text/css" n:syntax="off">
+      @import '/src/emails/styles/main.css';
     </style>
 </head>
 <body>
-<table class="elm_container_wrapper">
+<table class="l-main" align="center">
     <tr>
-        <td>
-            <table class="elm_container">
+        <td class="p-container" align="center">
+            <table class="l-main-body w-full">
                 <block name="body" with="locals"></block>
             </table>
         </td>
     </tr>
+    <include src="emails/templates.test/Sections/Footer.latte"></include>
 </table>
 </body>
 </html>

package/src/emails/templates.test/Sections/Footer.latte

@@ -0,0 +1,22 @@
+<tr class="s-footer">
+    <td class="p-container pt-[16px]">
+        <table class="s_body" align="center">
+            <tr>
+                <td class="px-container-inner">
+                    <table>
+                        <tr>
+                            <td class="ui-text sm pr-[160px]">
+                                Název webu<br>
+                                Adresa
+                            </td>
+                            <td class="ui-text sm">
+                                <a href="mailto:info@example.com"><span>info@example.com</span></a><br>
+                                <a href="tel:+420111222333"><span>(+420) 111 222 333</span></a>
+                            </td>
+                        </tr>
+                    </table>
+                </td>
+            </tr>
+        </table>
+    </td>
+</tr>

package/src/emails/templates.test/Sections/Header.latte

@@ -0,0 +1,37 @@
+<tr class="s-header">
+    <td>
+        <table class="s_body" align="center">
+            <tr>
+                <td class="px-container-inner">
+                    <table>
+                        <tr>
+                            <td>
+                                <a href="https://www.bookolosystem.com" target="_blank">
+                                    <img src="https://via.placeholder.com/160x60" alt="Logo" class="light-img w-[160px] h-[60px] block">
+                                    <!--[if !mso]><! -->
+                                    <img src="https://via.placeholder.com/160x60" alt="Logo" class="dark-img w-[160px] h-[60px] block"
+                                         style="{if $forceLightMode}background-color: rgb(245,245,245);border-radius: 8px;padding: 6px{/if}">
+                                    <!--<![endif]-->
+                                </a>
+                            </td>
+                            <td class="text-right">
+                                <table class="ui-btn-group" align="right">
+                                    <tr>
+                                        <td>
+                                            <a href="#" class="ui-btn"><span>Zobrazit web</span></a>
+                                        </td>
+                                    </tr>
+                                </table>
+                            </td>
+                        </tr>
+                    </table>
+                    <table>
+                        <tr><td class="border-b border-main/10 pb-[32px]"></td></tr>
+                        <tr><td class="pb-[32px]"></td></tr>
+                    </table>
+                </td>
+            </tr>
+        </table>
+    </td>
+</tr>
+

package/src/emails/templates.test/Sections/Text.latte

@@ -0,0 +1,24 @@
+<tr class="s-text">
+    <td>
+        <table class="s_body" align="center">
+            <tr>
+                <td class="px-container-inner">
+                    <table>
+                        <tr>
+                            <td class="ui-heading lg pb-[24px]">
+                                Lorem ipsum
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="ui-text">
+                                Hello David,<br>
+                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+                            </td>
+                        </tr>
+                    </table>
+                </td>
+            </tr>
+        </table>
+    </td>
+</tr>
+