@newlogic-digital/ui 3.7.5 → 4.2.0

package/src/styles/tinymce.css

@@ -1,34 +1,2 @@
-@import "Utils/theme/main.css";
-@import "Utils/config.css";
-@import "Ui/Text.css";
-
-.ui-text {
-  & .row {
-    display: flex;
-    box-sizing: border-box;
-    flex-wrap: wrap;
-
-    & > .col {
-      box-sizing: border-box;
-      padding-top: 0;
-      padding-bottom: 0;
-      border: 1px dotted rgb(0 0 0 / 50%);
-
-      &.col-6 {
-        width: calc(6 / 12 * 100%);
-      }
-
-      &.col-8 {
-        width: calc(8 / 12 * 100%);
-      }
-
-      &.col-4 {
-        width: calc(4 / 12 * 100%);
-      }
-
-      &.col-3 {
-        width: calc(3 / 12 * 100%);
-      }
-    }
-  }
-}
+@import "./theme/main.css";
+@import "./components/(ui)/Text.css";

package/src/styles/utils/+.css

@@ -0,0 +1,3 @@
+@import "./index.css";
+@import "./reveal.css";
+@import "./scrollbar.css";

package/src/styles/utils/index.css

@@ -0,0 +1,5 @@
+@import "winduum/src/utilities/container/props/default.css" layer(theme);
+@import "winduum/src/utilities/ripple/keyframes/default.css";
+@import "winduum/src/utilities/skeleton/props/default.css" layer(theme);
+@import "winduum/src/utilities/spinner/keyframes/ring.css";
+@import "winduum/tailwindcss/utilities/index.css";

package/src/styles/utils/reveal.css

@@ -0,0 +1,21 @@
+@utility reveal {
+  opacity: 0;
+  transition-property: var(--default-transition-property);
+  transition-timing-function: var(--ease-in-out);
+  transition-duration: 0.75s;
+  will-change: transform;
+
+  @media (prefers-reduced-motion), (scripting: none), print {
+    opacity: 1;
+    scale: none;
+    translate: none;
+    rotate: none;
+  }
+
+  &:is([data-in]) {
+    opacity: 1;
+    scale: none;
+    translate: none;
+    rotate: none;
+  }
+}

package/src/styles/utils/scrollbar.css

@@ -0,0 +1,23 @@
+@utility no-scrollbar {
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@utility scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-primary) var(--color-body-primary);
+  overscroll-behavior: contain;
+
+  &::-webkit-scrollbar {
+    width: 0.375rem;
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--color-primary);
+    border-radius: var(--radius-full);
+  }
+}

package/src/templates/components/(example)/PopoverAutocomplete.latte

@@ -0,0 +1,27 @@
+<div class="x-popover trigger-focus group mx-auto w-80" data-controller="x-popover">
+    <div class="x-control w-full">
+        <input
+            data-action="input->x-popover#autocomplete"
+            data-x-popover-target="autocomplete"
+            type="search"
+            placeholder="Vyhledávání ..."
+            autocomplete="off"
+            role="combobox"
+            aria-autocomplete="list"
+            aria-controls="popoverContent"
+            aria-haspopup="listbox"
+            aria-expanded="true"
+            value="Volba"
+        >
+    </div>
+    <div
+        class="x-popover-content center flex flex-col shadow dark:bg-body-secondary mt-2 p-2 gap-2 w-full empty:closed group-not-has-aria-expanded:closed"
+        data-x-popover-target="content"
+        role="listbox"
+        id="popoverContent"
+    >
+        <button id="option-1" class="x-button ghosted justify-start" role="option" data-action="click->x-popover#selectDescendant">Volba 1</button>
+        <button id="option-2" class="x-button ghosted justify-start" role="option" data-action="click->x-popover#selectDescendant">Volba 2</button>
+        <button id="option-3" class="x-button ghosted justify-start" role="option" data-action="click->x-popover#selectDescendant">Volba 3</button>
+    </div>
+</div>

package/src/templates/components/(layout)/Footer.latte

@@ -0,0 +1 @@
+<footer class="x-footer"></footer>

package/src/templates/components/(layout)/Header.latte

@@ -0,0 +1,7 @@
+<header class="x-header grid grid-cols-container" data-controller="x-header">
+    <nav class="flex justify-center py-4 gap-4">
+        <a n:foreach="$nav as $page" class="x-link" href="{$page->url}" title="{$page->name}">
+            {$page->name}
+        </a>
+    </nav>
+</header>

package/src/templates/components/(ui)/Toast.latte

@@ -0,0 +1,9 @@
+<li class="x-toast" role="status" aria-live="assertive" aria-atomic="true" data-controller="x-toast" data-action="x-toast:connect->x-toast#show">
+    <div class="x-toast-content">
+        <div class="flex-col">
+            <div class="x-title">Hello toast</div>
+            <div class="x-text">Amazing toast</div>
+        </div>
+        <button class="x-button muted ml-auto" data-action="x-toast#close">Close</button>
+    </div>
+</li>

package/src/templates/{Sections/Text.latte → components/Content.latte}

@@ -1,6 +1,6 @@
-<div class="s-text py-12 grid-cols-container gap-8">
-    <h1 class="ui-heading">Zásady ochrany osobních údajů</h1>
-    <div class="ui-text">
+<div class="x-content py-12 grid grid-cols-container gap-y-8">
+    <h1 class="x-heading">Zásady ochrany osobních údajů</h1>
+    <div class="x-text">
         <p><strong>Správce osobních údajů a subjekt údajů</strong></p>
         <p>Správcem osobních údajů je společnost provozující tento web, rezervační službu.</p>
         <p>Subjektem údajů je fyzická osoba, která správci poskytla svoje osobní údaje na základě nájemní smlouvy, kupní

package/src/templates/components/Example.latte

@@ -0,0 +1,17 @@
+<div class="grid grid-cols-container">
+    <div class="p-4 bg-body-secondary rounded w-full max-w-xl mx-auto">
+        <h1 class="x-heading lg mb-4">Hello world!</h1>
+        <div class="x-text mb-4">Want to dig deeper into Newlogic UI?</div>
+
+        <a href="https://ui.newlogic.cz/" class="x-link underline">Read the docs &rarr;</a>
+    </div>
+    <div class="flex justify-center mt-4">
+        <button
+            class="x-button"
+            data-invoke-action="x-dialog#show"
+            data-invoke-url="/dialog/basic.json"
+        >
+            Dialog Fetch Example
+        </button>
+    </div>
+</div>

package/src/templates/{Sections/CookieConsent.latte → components/cookieconsent/CookieConsentContent.latte}

@@ -1,6 +1,6 @@
-<div class="s-text py-16 md:py-28 grid-cols-container gap-8">
-    <h2 class="ui-heading">Zásady používání cookies</h2>
-    <div class="ui-text">
+<div class="x-cookieconset-content x-content py-16 md:py-28 grid grid-cols-container gap-y-8">
+    <h2 class="x-heading">Zásady používání cookies</h2>
+    <div class="x-text">
         <p style="text-align: left;">Tyto webové stránky používají k poskytování služeb, personalizaci
             reklam a analýze návštěvnosti soubory cookies. Pokud nepovolíte využití reklamních cookies, web
             bude používat pouze cookies nezbytné k tomu, abyste se mohli pohybovat po webu a používat jeho
@@ -65,5 +65,5 @@
             </tbody>
         </table>
     </div>
-    {include '../Components/Form/CookieConsent.latte'}
+    {include 'CookieConsentForm.latte'}
 </div>

package/src/templates/components/cookieconsent/CookieConsentDialog.latte

@@ -0,0 +1,27 @@
+{var $center = true}
+
+<dialog class="x-cookieconsent-dialog x-dialog {if $center}center{/if}" data-controller="x-cookieconsent-dialog">
+    <div class="x-dialog-content">
+        <div class="mt-2 mb-4 md:mb-6">
+            {if true}
+                <div class="x-image w-40 my-4">
+                    <img src="{placeholder(160, 46)}" alt="">
+                </div>
+            {/if}
+            <div class="x-heading text-3xl md:my-8">Nastavení soukromí a&nbsp;cookies&nbsp;🍪</div>
+        </div>
+        <div class="x-text">
+            <p>Webové stránky používají k poskytování služeb, personalizaci reklam a analýze návštěvnosti soubory&nbsp;cookies.</p>
+            <p>Následující volbou souhlasíte s našimi <a href="/gdpr">zásady&nbsp;ochrany osobních údajů a cookies</a>. Svá&nbsp;nastavení můžete kdykoli změnit.</p>
+        </div>
+        <div class="flex items-center mt-6 md:mt-8 gap-4 {if $center}flex-col{else}max-md:flex-col{/if} px-4">
+            <div class="flex flex-col w-full">
+                <button class="x-button lg w-full" data-action="click->x-cookieconsent-dialog#approve">Ano, souhlasím</button>
+            </div>
+            <div class="flex w-full gap-4">
+                <a class="x-button ghosted lg accent-main flex-1 px-4" href="/gdpr"><span>Přizpůsobit</span></a>
+                <button class="x-button ghosted lg accent-main flex-1 px-4" data-action="click->x-cookieconsent-dialog#decline"><span>Nesouhlasím</span></button>
+            </div>
+        </div>
+    </div>
+</dialog>

package/src/templates/{Components/Form/CookieConsent.latte → components/cookieconsent/CookieConsentForm.latte}

@@ -1,6 +1,6 @@
-<form class="c-form-cookieconsent flex flex-col gap-8 mt-8" data-controller="c-form-cookieconsent" data-action="submit->c-form-cookieconsent#update:prevent" autocomplete="off">
+<form class="x-cookieconsent-form flex flex-col gap-8 mt-8" data-controller="x-cookieconsent-form" data-action="submit->x-cookieconsent-form#update:prevent" autocomplete="off">
     <div class="flex-col">
-        <div class="ui-text">
+        <div class="x-text">
             <h3 style="text-align: left;">Nastavení cookies</h3>
             <p style="text-align: left;">
                 Následujícím nastavením můžete upravit jaké soubory cookie
@@ -9,39 +9,39 @@
         </div>
     </div>
     <div class="flex-col">
-        <div class="ui-text mb-4">
+        <div class="x-text mb-4">
             <h5>Nutné cookies</h5>
             <p>
                 Tyto soubory cookies jsou nezbytně nutné pro váš pohyb po webové stránce a využívání všech funkcí, např. nastavení preferencí soukromí, přihlašování nebo vyplňování formulářů. Bez těchto cookies by nebylo možné řádně poskytovat služby požadované při používání naší stránky. Nezbytně nutné cookies nevyžadují souhlas uživatele dle příslušných právních předpisů. Můžete si také nakonfigurovat webový prohlížeč a nezbytně nutné soubory cookies zablokovat, ovšem následně se může stát, že nebudete moci používat všechny funkce stránky tak, jak byste chtěli.
             </p>
         </div>
-        <label class="ui-switch">
+        <label class="x-switch">
             <input type="checkbox" value="decline" checked disabled>
         </label>
     </div>
     <div class="flex-col">
-        <div class="ui-text mb-4">
+        <div class="x-text mb-4">
             <h5>Statistické soubory cookies</h5>
             <p>
                 Tyto soubory cookie nám umožňují počítat návštěvy a zdroje návštěvnosti, abychom mohli měřit a zlepšovat výkon našich stránek. Pomáhají nám zjistit, které stránky jsou nejoblíbenější a které nejméně, a vidět, jak se návštěvníci na webu pohybují, což nám pomáhá optimalizovat váš zážitek. Všechny informace, které tyto soubory cookie shromažďují, jsou agregované, a proto anonymní. Pokud tyto soubory cookie nepovolíte, nebudeme moci používat vaše údaje tímto způsobem.
             </p>
         </div>
-        <label class="ui-switch">
+        <label class="x-switch">
             <input type="checkbox" value="performance">
         </label>
     </div>
     <div class="flex-col">
-        <div class="ui-text mb-4">
+        <div class="x-text mb-4">
             <h5>Reklamní soubory cookies</h5>
             <p>
                 Tyto soubory cookies (zvané také cílené nebo reklamní cookies) se používají k zobrazování reklam na stránkách třetích stran, které by více odpovídaly vaší osobě a vašim zájmům. Používají se také k omezení počtu shlédnutí reklam a měření účinností reklamních kampaní.
             </p>
         </div>
-        <label class="ui-switch">
+        <label class="x-switch">
             <input type="checkbox" value="marketing">
         </label>
     </div>
     <div class="flex-col items-start">
-        <button class="ui-btn">Uložit předvolby</button>
+        <button class="x-button">Uložit předvolby</button>
     </div>
 </form>

package/src/templates/components/dialog/DialogBasic.latte

@@ -0,0 +1,18 @@
+<dialog class="x-dialog" data-controller="x-dialog">
+    <form class="x-dialog-content">
+        <div class="flex justify-between">
+            <h2 class="x-heading">Dialog Basic</h2>
+            <button class="x-button square ghosted accent-main" type="button" data-action="click->x-dialog#close">
+                <svg>
+                    <use href="#icon-x-mark"></use>
+                </svg>
+            </button>
+        </div>
+        <div class="x-text py-4">
+            {foreach range(1, 44) as $i}
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget efficitur metus. In bibendum nisi et dui sagittis efficitur.</p>
+            {/foreach}
+        </div>
+        <button class="x-button" type="button" data-action="click->x-dialog#close">Continue</button>
+    </form>
+</dialog>

package/src/templates/emails/components/Content.latte

@@ -0,0 +1,29 @@
+<tr class="x-content">
+    <td class="p-container">
+        <table class="w-full">
+            <tr>
+                <td class="x-heading pb-[24px]">
+                    Lorem ipsum
+                </td>
+            </tr>
+            <tr>
+                <td class="x-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>
+            <tr>
+                <td class="pt-[24px]">
+                    <table class="x-button flat">
+                        <tr>
+                            <td class="x-button-content">
+                                <a href="https://www.kouzelnechaloupky.cz"><span>Button</span></a>
+                            </td>
+                        </tr>
+                    </table>
+                </td>
+            </tr>
+        </table>
+    </td>
+</tr>
+

package/src/templates/emails/components/Footer.latte

@@ -0,0 +1,13 @@
+<tr class="x-footer">
+    <td class="p-container pt-[0px]">
+        <table class="w-full text-center">
+            <tr>
+                <td class="x-text sm">
+                    ahoj@email.cz<br>
+                    (+420) 123 456 789<br>
+                    po-pá 9:00 - 17:30
+                </td>
+            </tr>
+        </table>
+    </td>
+</tr>

package/src/templates/emails/components/Header.latte

@@ -0,0 +1,8 @@
+<tr class="x-header">
+    <td class="px-container pt-container">
+        <a href="https://www.bookolosystem.com" target="_blank">
+            <img src="https://placehold.co/160x60" alt="Logo" style="width: 160px; height: 60px;">
+        </a>
+    </td>
+</tr>
+

package/src/templates/emails/layouts/default.latte

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <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">
+
+    {var $forceLightMode = true}
+
+    {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}
+
+    <link rel="stylesheet" href="/src/styles/emails/main.css">
+
+    <script type="module" n:if="VITE_SERVER">
+        if (import.meta.hot && window.location.search === '?send') {
+            import.meta.hot.send('my:send', {
+                filename: window.location.href,
+                content:
+                    new XMLSerializer().serializeToString(document.doctype) +
+                    document.documentElement.outerHTML.replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, "")
+            })
+        }
+    </script>
+</head>
+<body>
+    <table class="x-main w-full" align="center">
+        <tr>
+            <td class="p-[20px]" align="center">
+                <table class="x-main-body container">
+                    {include '../../utils/sections.latte', sections => $body}
+                </table>
+            </td>
+        </tr>
+        {include '../components/Footer.latte'}
+    </table>
+</body>
+</html>

package/src/templates/{Layout/Main.latte → layouts/default.latte}

@@ -1,8 +1,8 @@
 <!DOCTYPE html>
-<html class="no-js" lang="en">
+<html lang="en">
     <head>
         <meta charset="utf-8">
-        <title>{$page->title}</title>
+        <title>{$title}</title>
 
         <meta name="keywords" content="">
         <meta name="description" content="">
@@ -10,7 +10,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
         <meta name="format-detection" content="telephone=no">
         <meta name="mobile-web-app-capable" content="yes">
-        <meta name="apple-mobile-web-app-title" content="{$page->title}">
+        <meta name="apple-mobile-web-app-title" content="{$title}">
         <meta name="apple-mobile-web-app-capable" content="yes">
         <meta name="theme-color" content="#ffffff">
 
@@ -22,50 +22,48 @@
         {/if}
 
         {if isset($preload)}
-            {foreach $preload as $url}
-                <link
-                    {if isset($url->rel)}rel="{$url->rel}"{else}rel="preload"{/if}
-                    href="{$url->href|asset}"
-                    {if isset($url->as)}as="{$url->as}"{/if}
-                    {if isset($url->type)}type="{$url->type}"{/if}
-                    {if isset($url->crossorigin)}crossorigin{/if}
-                >
-            {/foreach}
+            <link
+                n:foreach="$preload as $url"
+                href="{$url->href|asset}"
+                {if isset($url->rel)}rel="{$url->rel}"{else}rel="preload"{/if}
+                {if isset($url->as)}as="{$url->as}"{/if}
+                {if isset($url->type)}type="{$url->type}"{/if}
+                {if isset($url->crossorigin)}crossorigin{/if}
+            >
         {/if}
 
-        {foreach $assets->css->all as $url}
-            <link rel="stylesheet" href="{$url|asset}">
-        {/foreach}
+        <link n:foreach="$assets->css->all as $url" href="{$url|asset}" rel="stylesheet">
 
         {if isset($modulepreload)}
-            {foreach $modulepreload as $url}
-                <link rel="modulepreload" href="{$url|asset}">
-            {/foreach}
+            <link n:foreach="$modulepreload as $url" href="{$url|asset}" rel="modulepreload">
         {/if}
 
         <script>
             (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) && document.documentElement.classList.add('dark')
-            document.documentElement.classList.remove('no-js')
         </script>
 
         <script src="{$assets->js->main|asset}" type="module"></script>
 
         <link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg">
+        <link rel="icon" type="image/webp" href="/favicons/favicon-512.webp">
         <link rel="apple-touch-icon" type="image/webp" href="/favicons/favicon-512.webp">
         <link rel="manifest" href="/favicons/manifest.webmanifest">
     </head>
+    <body data-controller="x-app invoke" data-naja-snippet-append>
+        {include '../components/(layout)/Header.latte'}
+        <main class="x-main view-transition-main">
+            {include '../utils/sections.latte', sections => $body}
+        </main>
+        {include '../components/(layout)/Footer.latte'}
 
-    <body data-controller="controller utils lib-dialog lib-ripple lib-reveal lib-toaster">
-        {include '../Layout/Header.latte'}
-            <main class="l-main swup-transition">
-                {include '../Utils/sections.latte', sections => $page->body}
-            </main>
-        {include '../Layout/Footer.latte'}
-
-        {if $layout->cookies}
-            {include '../Components/Dialog/CookieConsent.latte'}
+        {if $cookieConsent}
+            {include '../components/cookieconsent/CookieConsentDialog.latte'}
         {/if}
 
+        <ol class="x-toaster items-end">
+            {*include TEMPLATES_DIR . 'Components/(ui)/Toast.latte'*}
+        </ol>
+
         {if true} {* load only on first load in production *}
             {fetch('/src/icons.svg')|noescape}
         {/if}

package/vite.config.js

@@ -4,24 +4,9 @@ import core from '@newlogic-digital/core'
 export default defineConfig({
     plugins: [
         core({
-            juice: {
-                postcss: {
-                    globalData: {
-                        files: ['./src/emails/styles/main/Base/config.css']
-                    }
-                }
+            css: {
+                transformer: 'lightningcss'
             }
         })
-    ],
-    build: {
-        target: ['edge111', 'firefox111', 'chrome111', 'safari16'],
-        rollupOptions: {
-            output: {
-                manualChunks: {
-                    swup: ['swup'],
-                    stimulus: ['@hotwired/stimulus']
-                }
-            }
-        }
-    }
+    ]
 })

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

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

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

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

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

@@ -1,22 +0,0 @@
-: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

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

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

@@ -1,12 +0,0 @@
-.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

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