Merge pull request #546 from exadel-inc/epic/rework-2.0

epic: cumulative update 2.0

pages/src/examples/list.less

@@ -1,14 +1,14 @@
 .card {
   &-list {
     display: flex;
+    gap: 20px;
     justify-content: center;
   }
 
   &-item {
     width: 200px;
     height: 200px;
     padding: 15px;
-    margin: 0 10px;
     text-align: center;
     overflow-wrap: break-word;
 

pages/src/page/page.less

@@ -60,35 +60,33 @@ hr {
       justify-content: center;
       flex-direction: column;
       align-items: center;
+      min-height: 250px;
       height: 100%;
 
-      &.blue-clr {
-        svg {
-          fill: @blue-color;
-        }
+      .get-started svg {
+        margin-inline-start: 0.5em;
+        fill: currentColor;
+        vertical-align: middle;
+      }
+      .get-started span {
+        vertical-align: middle;
+      }
 
+      &.blue-clr {
         .get-started {
           border-color: @blue-color;
           color: @blue-color;
         }
       }
 
       &.gray-clr {
-        svg {
-          fill: @landing-dark-bg;
-        }
-
         .get-started {
           border-color: @landing-dark-bg;
           color: @landing-dark-bg;
         }
       }
 
       &.purple-clr {
-        svg {
-          fill: @purple-color;
-        }
-
         .get-started {
           border-color: @purple-color;
           color: @purple-color;
@@ -98,15 +96,11 @@ hr {
 
     .get-started {
       margin-top: 10px;
-      padding: 6px 8px;
-      border: 3px solid #4e4e4e;
+      padding: 0.5rem 2em;
       border-radius: 10px;
-      font-size: 26px;
-      color: @landing-dark-bg;
-
-      &::after {
-        content: attr(data-test-msg);
-      }
+      font-size: 3rem;
+      border: 4px solid @blue-color;
+      color: @blue-color;
     }
   }
 }

pages/views/examples/example/form.njk

@@ -3,7 +3,7 @@ title: Example with form
 ---
 
 <uip-root>
-  <uip-snippets></uip-snippets>
+  <uip-snippets class="uip-toolbar"></uip-snippets>
 
   <script type="text/html" uip-snippet label="Example with form">
     <form class="demo-form">

pages/views/examples/example/list.njk

@@ -102,7 +102,7 @@ title: Example with list of cards
     </div>
   </script>
   <uip-preview></uip-preview>
-  <uip-settings target=".card-list" vertical>
+  <uip-settings target=".card-list" vertical resizable>
     <uip-select-setting label="Card color:" target=".card-item" attribute="class" mode="append">
       <option value="red">Red</option>
       <option value="aqua">Aqua</option>

pages/views/examples/example/playground.njk

@@ -47,6 +47,6 @@ title: Example with a playground that contains playground inside
   <uip-editor collapsible></uip-editor>
 
   <uip-settings collapsible vertical="@+sm" target=".demo-form">
-      <uip-bool-setting label="Snippets dropdown view" target="uip-snippets" mode="append" attribute="dropdown-view" value="all"></uip-bool-setting>
+      <uip-bool-setting label="Snippets dropdown view" target="uip-snippets" attribute="dropdown-view" value="all"></uip-bool-setting>
   </uip-settings>
 </uip-root>

pages/views/examples/example/text.njk

@@ -0,0 +1,21 @@
+---
+title: Example with dummy text (pre-processors)
+---
+
+<uip-root role="presentation">
+  <uip-snippets class="uip-toolbar"></uip-snippets>
+
+  <script type="text/html" uip-snippet label="Example with dummy text">
+    <h2><!-- text --></h2>
+    <div class="text">
+      <!-- paragraph x2 -->
+    </div>
+    <button type="button">
+      <!-- text x5 -->
+    </button>
+  </script>
+
+  <uip-preview class="centered-content" resizable></uip-preview>
+
+  <uip-editor copy collapsible label="Markdown"></uip-editor>
+</uip-root>

pages/views/index.njk

@@ -16,17 +16,18 @@ isLandingPage: true
     <uip-header></uip-header>
     <script type="text/html" uip-snippet label="Logo">
       <div class="logo-content gray-clr">
-        <svg width="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" viewBox="0 0 47 46">
-          <path fill-rule="evenodd" d="M23.244 0C10.402 0 0 10.28 0 22.97c0 12.692 10.402 22.971 23.244 22.971s23.244-10.28 23.244-22.97C46.488 10.279 36.086 0 23.244 0Zm0 44.218c-11.869 0-21.5-9.518-21.5-21.247 0-11.73 9.631-21.248 21.5-21.248s21.5 9.518 21.5 21.248c0 11.729-9.631 21.247-21.5 21.247ZM13.007 27.96l3.89-3.844a1.14 1.14 0 0 0 0-1.624 1.172 1.172 0 0 0-1.644 0l-4.303 4.252c-.08.08-.147.168-.199.262a1.139 1.139 0 0 0-.196 1.78l4.723 4.668c.454.448 1.19.448 1.644 0a1.139 1.139 0 0 0 0-1.625l-3.915-3.869Zm11.564-4.54 2.013 1.149-4.358 7.46-2.013-1.149 4.358-7.46Zm-2.49 8.857-2.013-1.148-.156 2.563 2.169-1.415Zm2.926-9.603a1.17 1.17 0 0 1 1.588-.42 1.14 1.14 0 0 1 .425 1.569l-.29.497-2.013-1.149.29-.497Zm10.945 6.109c-.061.06-.127.112-.196.156a1.15 1.15 0 0 1-.2.262l-4.302 4.253a1.172 1.172 0 0 1-1.644 0 1.139 1.139 0 0 1 0-1.625l3.89-3.844-3.915-3.869a1.14 1.14 0 0 1 0-1.624 1.172 1.172 0 0 1 1.644 0l4.723 4.667a1.139 1.139 0 0 1 0 1.624ZM22.297 6.698c.058-.057.12-.107.187-.15a1.172 1.172 0 0 1 1.637.007l3.65 3.606 1.871-1.85a.879.879 0 0 1 1.233 0c.34.337.34.882 0 1.218l-1.872 1.85 11.143 11.012a1.14 1.14 0 0 1 0 1.625 1.172 1.172 0 0 1-1.644 0L23.282 8.974 7.914 24.159a1.172 1.172 0 0 1-1.643 0 1.139 1.139 0 0 1 0-1.624L22.297 6.698Z" clip-rule="evenodd"/>
-        </svg>
-        <a class="get-started" href="{{ '/general/getting-started/' | url }}" data-test-msg="Get Started!"></a>
+        <a class="get-started" href="{{ '/general/getting-started/' | url }}">
+          <span>Get Started with</span>
+          <svg width="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" viewBox="0 0 47 46" aria-label="UI Playground">
+            <path fill-rule="evenodd" d="M23.244 0C10.402 0 0 10.28 0 22.97c0 12.692 10.402 22.971 23.244 22.971s23.244-10.28 23.244-22.97C46.488 10.279 36.086 0 23.244 0Zm0 44.218c-11.869 0-21.5-9.518-21.5-21.247 0-11.73 9.631-21.248 21.5-21.248s21.5 9.518 21.5 21.248c0 11.729-9.631 21.247-21.5 21.247ZM13.007 27.96l3.89-3.844a1.14 1.14 0 0 0 0-1.624 1.172 1.172 0 0 0-1.644 0l-4.303 4.252c-.08.08-.147.168-.199.262a1.139 1.139 0 0 0-.196 1.78l4.723 4.668c.454.448 1.19.448 1.644 0a1.139 1.139 0 0 0 0-1.625l-3.915-3.869Zm11.564-4.54 2.013 1.149-4.358 7.46-2.013-1.149 4.358-7.46Zm-2.49 8.857-2.013-1.148-.156 2.563 2.169-1.415Zm2.926-9.603a1.17 1.17 0 0 1 1.588-.42 1.14 1.14 0 0 1 .425 1.569l-.29.497-2.013-1.149.29-.497Zm10.945 6.109c-.061.06-.127.112-.196.156a1.15 1.15 0 0 1-.2.262l-4.302 4.253a1.172 1.172 0 0 1-1.644 0 1.139 1.139 0 0 1 0-1.625l3.89-3.844-3.915-3.869a1.14 1.14 0 0 1 0-1.624 1.172 1.172 0 0 1 1.644 0l4.723 4.667a1.139 1.139 0 0 1 0 1.624ZM22.297 6.698c.058-.057.12-.107.187-.15a1.172 1.172 0 0 1 1.637.007l3.65 3.606 1.871-1.85a.879.879 0 0 1 1.233 0c.34.337.34.882 0 1.218l-1.872 1.85 11.143 11.012a1.14 1.14 0 0 1 0 1.625 1.172 1.172 0 0 1-1.644 0L23.282 8.974 7.914 24.159a1.172 1.172 0 0 1-1.643 0 1.139 1.139 0 0 1 0-1.624L22.297 6.698Z" clip-rule="evenodd"/>
+          </svg>
+        </a>
       </div>
     </script>
-    <uip-preview class="center-alignment"></uip-preview>
+    <uip-preview class="fill center-alignment"></uip-preview>
 
-    <uip-settings collapsible vertical="@+sm" target=".logo-content" theme-toggle dir-toggle>
-      <uip-text-setting label="Alternative Button Text:" target=".get-started" attribute="data-test-msg"></uip-text-setting>
-      <uip-slider-setting label="Width:" target=".logo-content svg" attribute="width" min="100" max="500"></uip-slider-setting>
+    <uip-settings resizable collapsible vertical="@+sm" target=".logo-content" theme-toggle dir-toggle>
+      <uip-slider-setting label="Width:" target=".logo-content svg" attribute="width" min="50" max="150"></uip-slider-setting>
       <uip-select-setting label="Color:" attribute="class" mode="append">
         <option value="gray-clr">Dark gray</option>
         <option value="blue-clr">Blue</option>

src/core/base/README.md

@@ -20,7 +20,7 @@ As you can see, the flow is quite similar to what we usually do in [Observable](
 import {UIPPlugin} from "./plugin";
 
 class UIPComponent extends UIPPlugin {
-  @listen({event: 'uip:model:change', target: (that: UIPSetting)=> that.model})
+  @listen({event: 'uip:model:change', target: (that: UIPSetting) => that.model})
   protected _onRootStateChange(): void {
       // ...
   }
@@ -36,7 +36,7 @@ You can find a way of getting current markup in [UIPStateModel](src/core/README.
 import {UIPPlugin} from "./plugin";
 
 class UIPPreview extends UIPPlugin {
-  @listen({event: 'uip:model:change', target: (that: UIPSetting)=> that.model})
+  @listen({event: 'uip:model:change', target: (that: UIPSetting) => that.model})
   protected _onRootStateChange(): void {
     this.$inner.innerHTML = this.model!.html;
     this.innerHTML = '';

src/core/base/base.less

@@ -12,6 +12,7 @@ html {
 
   --uip-plugin-fg: #000;
   --uip-plugin-bg: #f5f2f0;
+  --uip-plugin-hover-fg: #0086cc;
   --uip-plugin-divider: #ccc;
   --uip-plugin-header-bg: #ccc;
   --uip-plugin-header-fg: #000;

src/core/base/model.ts

@@ -2,7 +2,7 @@ import {SyntheticEventTarget} from '@exadel/esl/modules/esl-utils/dom';
 import {decorate} from '@exadel/esl/modules/esl-utils/decorators';
 import {microtask} from '@exadel/esl/modules/esl-utils/async';
 
-import {UIPHtmlNormalizationService} from '../utils/normalization';
+import {UIPHtmlNormalizationService} from '../processors/normalization';
 import {UIPSnippetItem} from './snippet';
 
 import type {UIPRoot} from './root';
@@ -95,7 +95,7 @@ export class UIPStateModel extends SyntheticEventTarget {
     this.setHtml(snippet.html, modifier);
     this.dispatchEvent(new CustomEvent('uip:model:snippet:change', {detail: this}));
   }
-  /** Apply an active snippet from DOM */
+  /** Applies an active snippet from DOM */
   public applyCurrentSnippet(modifier: UIPPlugin | UIPRoot): void {
     this.applySnippet(this.activeSnippet || this.snippets[0], modifier);
   }

src/core/button/plugin-button.less

@@ -0,0 +1,17 @@
+.uip-plugin-button {
+  position: relative;
+  transition: color 0.25s ease-in-out;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -4px;
+    z-index: -1;
+  }
+
+  .uip-plugin-header-toolbar &:hover {
+    color: var(--uip-plugin-hover-fg);
+  }
+}
+
+

src/core/button/plugin-button.ts

@@ -28,6 +28,7 @@ export abstract class UIPPluginButton extends UIPPlugin {
 
   protected override connectedCallback(): void {
     super.connectedCallback();
+    this.$$cls('uip-plugin-button', true);
     this.setAttribute('tabindex', '0');
     this.setAttribute('role', 'button');
 

src/core/panel/plugin-panel.header.less

@@ -46,6 +46,7 @@
     height: 100%;
     z-index: 1;
 
+    cursor: pointer;
     background: transparent;
     border: none;
     box-shadow: none;

src/core/panel/plugin-panel.horizontal.less

@@ -2,7 +2,7 @@
   flex-direction: column;
   margin-bottom: 1px;
 
-  .uip-plugin-resizebar {
+  .uip-plugin-resize-bar {
     order: 100;
     cursor: row-resize;
   }

src/core/panel/plugin-panel.less

@@ -8,13 +8,15 @@
     transition: none !important;
   }
 
-  .uip-plugin-resizebar {
+  .uip-plugin-resize-bar {
     border: 3px solid transparent;
     z-index: 10;
     margin: -3px;
     box-sizing: border-box;
   }
-  &:not([resizable]) .uip-plugin-resizebar {
+
+  &[collapsed] .uip-plugin-resize-bar,
+  &:not([resizable]) .uip-plugin-resize-bar {
     display: none;
   }
 

src/core/panel/plugin-panel.tsx

@@ -59,8 +59,8 @@ export abstract class UIPPluginPanel extends UIPPlugin {
 
   /** Creates resize area element */
   @memoize()
-  protected get $resizebar(): HTMLElement {
-    return (<div class="uip-plugin-resizebar" />) as HTMLElement;
+  protected get $resize(): HTMLElement {
+    return (<div class="uip-plugin-resize-bar" />) as HTMLElement;
   }
 
   /** @returns if the plugin should be rendered vertically */
@@ -89,7 +89,9 @@ export abstract class UIPPluginPanel extends UIPPlugin {
     selector: '.uip-plugin-header-trigger',
   })
   protected _onCollapseClick(): void {
-    if (this.collapsible) this.collapsed = !this.collapsed;
+    if (!this.collapsible) return;
+    this.collapsed = !this.collapsed;
+    this.resizing = false;
   }
 
   /** Handles vertical media query change */
@@ -111,36 +113,36 @@ export abstract class UIPPluginPanel extends UIPPlugin {
   /** Handles resize start */
   @listen({
     event: 'pointerdown',
-    selector: '.uip-plugin-resizebar'
+    selector: '.uip-plugin-resize-bar'
   })
   protected _onPointerStart(event: PointerEvent): void {
-    if (!this.resizable) return;
+    if (!this.resizable || this.collapsed) return;
     const {isVertical} = this;
     this.resizing = true;
     const prop = isVertical ? '--uip-plugin-width' : '--uip-plugin-height';
     this._startSize = parseFloat(getComputedStyle(this).getPropertyValue(prop) || '0');
     this._startPoint = isVertical ? event.x : event.y;
-    if (this.$resizebar.setPointerCapture) this.$resizebar.setPointerCapture(event.pointerId);
+    if (this.$resize.setPointerCapture) this.$resize.setPointerCapture(event.pointerId);
 
     this.$$on(this._onPointerMove);
   }
 
   /** Handles resize end */
   @listen({
     event: 'pointerup',
-    selector: '.uip-plugin-resizebar'
+    selector: '.uip-plugin-resize-bar'
   })
   protected _onPointerEnd(event: PointerEvent): void {
     this.resizing = false;
-    if (this.$resizebar.releasePointerCapture) this.$resizebar.releasePointerCapture(event.pointerId);
+    if (this.$resize.releasePointerCapture) this.$resize.releasePointerCapture(event.pointerId);
     this.$$off(this._onPointerMove);
   }
 
   /** Handles resize */
   @listen({
     auto: false,
     event: 'pointermove',
-    selector: '.uip-plugin-resizebar'
+    selector: '.uip-plugin-resize-bar'
   })
   protected _onPointerMove(event: PointerEvent): void {
     if (!this.resizing) return;

src/core/panel/plugin-panel.vertical.less

@@ -3,7 +3,7 @@
   flex-direction: row;
   min-height: max(100%, 100px);
 
-  .uip-plugin-resizebar {
+  .uip-plugin-resize-bar {
     order: -1;
     cursor: col-resize;
   }

src/core/preview/preview.tsx

@@ -4,10 +4,11 @@ import {listen, memoize} from '@exadel/esl/modules/esl-utils/decorators';
 import {afterNextRender, skipOneRender} from '@exadel/esl/modules/esl-utils/async';
 
 import {UIPPlugin} from '../base/plugin';
+import {UIPRenderingPreprocessorService} from '../processors/rendering';
 
 /**
- * Preview {@link UIPPlugin} custom element definition
- * Element that displays active markup
+ * Preview {@link UIPPlugin} custom element definition.
+ * Mandatory for UI Playground rendering. Displays active playground content
  */
 export class UIPPreview extends UIPPlugin {
   static is = 'uip-preview';
@@ -37,7 +38,7 @@ export class UIPPreview extends UIPPlugin {
   @listen({event: 'uip:change', target: ($this: UIPPreview) => $this.$root})
   protected _onRootStateChange(): void {
     this.$container.style.minHeight = `${this.$inner.offsetHeight}px`;
-    this.$inner.innerHTML = this.model!.html;
+    this.$inner.innerHTML = UIPRenderingPreprocessorService.preprocess(this.model!.html);
 
     afterNextRender(() => this.$container.style.minHeight = '0px');
     skipOneRender(() => {