feat: plugin structure and API rework (new abstraction layer and events)

exadel-inc · Dec 11, 2023 · 318668f · 318668f
1 parent 6d4492e
commit 318668f
Show file tree

Hide file tree

Showing 44 changed files with 492 additions and 293 deletions.
diff --git a/README.md b/README.md
@@ -14,10 +14,10 @@
 **UIPlayground** is a solution for presenting your custom components.
 
 With the help of *UIP* components we allow user to *'play'* with a component.
-You can choose from the variety of component's templates ([UIP Snippets](src/plugins/header/snippets/README.md)),
+You can choose from the variety of component's templates ([UIP Snippets](src/plugins/snippets-list/README.md)),
 play with the component's settings ([UIP Settings](src/plugins/settings/README.md))
 or even change its markup ([UIP Editor](src/plugins/editor/README.md))!
-You can also manage Playground visual appearance by our options ([UIP Options](src/plugins/header/options/README.md))
+You can also manage Playground visual appearance by our options ([UIP Options](src/plugins/snippets/options/README.md))
 
 Every element (except the *UIP Root*) isn't required, so you can combine them the way you want.
 
@@ -47,9 +47,9 @@ Import CSS styles
 - ### Components
   - #### [UIP Preview](src/core/preview/README.md)
   - #### [UIP Editor](src/plugins/editor/README.md)
-  - #### [UIP Header](src/plugins/header/README.md)
-    - ##### [UIP Snippets](src/plugins/header/snippets/README.md)
-    - ##### [UIP Options](src/plugins/header/options/README.md)
+  - #### [UIP Header](src/plugins/snippets/README.md)
+    - ##### [UIP Snippets](src/plugins/snippets-list/README.md)
+    - ##### [UIP Options](src/plugins/snippets/options/README.md)
   - #### [UIP Settings](src/plugins/settings/README.md)
     - ##### [UIP Setting](src/settings/setting/README.md)
     - ##### [UIP Text Setting](src/plugins/settings/text-setting/README.md)

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -69,7 +69,7 @@
     "node": ">=18.17.0"
   },
   "dependencies": {
-    "@exadel/esl": "^4.12.0",
+    "@exadel/esl": "^4.14.1",
     "codejar": "^4.2.0",
     "jsx-dom": "6.4.23",
     "prismjs": "^1.29.0"

diff --git a/pages/rtl.svg b/pages/rtl.svg
diff --git a/pages/views/components/components.njk b/pages/views/components/components.njk
@@ -19,15 +19,6 @@ title: Components
     <li class="item">
       <a href="{{ plugin.url | url }}">{{ plugin.data.title }}</a>
     </li>
-    {% if plugin.data.isHeaderList %}
-    <ul class="collection-sublist">
-      {% for headerItem in collections.header %}
-      <li class="item">
-        <a href="{{ headerItem.url | url }}">{{ headerItem.data.title }}</a>
-      </li>
-      {%- endfor %}
-    </ul>
-    {%- endif %}
     {% if plugin.data.isSettingList %}
       <ul class="collection-sublist">
         {% for setting in collections.setting %}

diff --git a/pages/views/examples/example/form.njk b/pages/views/examples/example/form.njk
@@ -2,9 +2,8 @@
 title: Example with form
 ---
 
+<uip-snippets root="::next"></uip-snippets>
 <uip-root>
-  <uip-header></uip-header>
-
   <script type="text/html" uip-snippet label="Example with form">
     <form class="demo-form">
       <div class="form-section">

diff --git a/pages/views/examples/example/image.njk b/pages/views/examples/example/image.njk
@@ -1,12 +1,11 @@
 ---
 title: Example with image
 ---
-
-<uip-snippets snippets-tabs root-target="::parent::child(uip-root)"></uip-snippets>
+<uip-snippets root="::next" dropdown-view="all"></uip-snippets>
 <uip-root editor-collapsed>
-  <uip-header>
-    <uip-options hide-theme hide-direction></uip-options>
-  </uip-header>
+  <div class="uip-toolbar">
+    <uip-theme-toggle></uip-theme-toggle>
+  </div>
   <script type="text/html" uip-snippet label="Example with image">
     <img class="demo-img" alt="patrick" src="{{ '/assets/patrick.png' | url }}" height="500" width="500">
   </script>
@@ -16,7 +15,7 @@ title: Example with image
     </a>
   </script>
   <uip-preview></uip-preview>
-  <uip-settings target=".demo-img">
+  <uip-settings target=".demo-img" vertical collapsible>
     <uip-text-setting label="Source:" attribute="src"></uip-text-setting>
     <uip-text-setting label="Alternative alt text:" attribute="alt"></uip-text-setting>
     <uip-slider-setting label="Height:" attribute="Height" min="300" max="1000"></uip-slider-setting>
@@ -25,5 +24,5 @@ title: Example with image
     <uip-bool-setting label="Open in new window" attribute="target" target=".img-link"
                       value="_blank"></uip-bool-setting>
   </uip-settings>
-  <uip-editor></uip-editor>
+  <uip-editor collapsible></uip-editor>
 </uip-root>
diff --git a/pages/views/examples/example/list.njk b/pages/views/examples/example/list.njk
@@ -3,15 +3,64 @@ title: Example with list of cards
 ---
 
 <uip-root>
-  <uip-header>
-    <uip-snippets></uip-snippets>
-  </uip-header>
+  <div class="uip-toolbar">
+    <uip-snippets dropdown-view="all"></uip-snippets>
+    <uip-theme-toggle></uip-theme-toggle>
+  </div>
   <script type="text/html" uip-snippet label="List of aqua cards">
     <div class="card-list">
       <div class="card-item aqua">Card #1</div>
       <div class="card-item aqua">Card #2</div>
       <div class="card-item aqua">Card #3</div>
     </div>
+  </script><script type="text/html" uip-snippet label="List of aqua cards">
+    <div class="card-list">
+      <div class="card-item aqua">Card #1</div>
+      <div class="card-item aqua">Card #2</div>
+      <div class="card-item aqua">Card #3</div>
+    </div>
+  </script><script type="text/html" uip-snippet label="List of aqua cards">
+    <div class="card-list">
+      <div class="card-item aqua">Card #1</div>
+      <div class="card-item aqua">Card #2</div>
+      <div class="card-item aqua">Card #3</div>
+    </div>
+  </script><script type="text/html" uip-snippet label="List of aqua cards">
+    <div class="card-list">
+      <div class="card-item aqua">Card #1</div>
+      <div class="card-item aqua">Card #2</div>
+      <div class="card-item aqua">Card #3</div>
+    </div>
+  </script><script type="text/html" uip-snippet label="List of aqua cards">
+    <div class="card-list">
+      <div class="card-item aqua">Card #1</div>
+      <div class="card-item aqua">Card #2</div>
+      <div class="card-item aqua">Card #3</div>
+    </div>
+  </script><script type="text/html" uip-snippet label="List of aqua cards">
+    <div class="card-list">
+      <div class="card-item aqua">Card #1</div>
+      <div class="card-item aqua">Card #2</div>
+      <div class="card-item aqua">Card #3</div>
+    </div>
+  </script><script type="text/html" uip-snippet label="List of aqua cards">
+    <div class="card-list">
+      <div class="card-item aqua">Card #1</div>
+      <div class="card-item aqua">Card #2</div>
+      <div class="card-item aqua">Card #3</div>
+    </div>
+  </script><script type="text/html" uip-snippet label="List of aqua cards">
+    <div class="card-list">
+      <div class="card-item aqua">Card #1</div>
+      <div class="card-item aqua">Card #2</div>
+      <div class="card-item aqua">Card #3</div>
+    </div>
+  </script><script type="text/html" uip-snippet label="List of aqua cards">
+    <div class="card-list">
+      <div class="card-item aqua">Card #1</div>
+      <div class="card-item aqua">Card #2</div>
+      <div class="card-item aqua">Card #3</div>
+    </div>
   </script>
   <script type="text/html" uip-snippet active label="Long list of red cards containing seven items" wrap-items>
     <div class="card-list">
@@ -53,13 +102,13 @@ title: Example with list of cards
     </div>
   </script>
   <uip-preview></uip-preview>
-  <uip-settings target=".card-list">
+  <uip-settings target=".card-list" vertical>
     <uip-select-setting label="Card color:" target=".card-item" attribute="class" mode="append">
       <option value="red">Red</option>
       <option value="aqua">Aqua</option>
       <option value="green">Green</option>
     </uip-select-setting>
     <uip-bool-setting label="Wrap items" attribute="wrap-items"></uip-bool-setting>
   </uip-settings>
-  <uip-editor></uip-editor>
+  <uip-editor collapsible></uip-editor>
 </uip-root>
diff --git a/pages/views/examples/example/multiple-playgrounds.njk b/pages/views/examples/example/multiple-playgrounds.njk
@@ -10,22 +10,25 @@ title: Example with multiple playgrounds
     </p>
 
     <uip-root>
-      <uip-header></uip-header>
+      <div class="uip-toolbar">
+          <uip-snippets dropdown-view="all"></uip-snippets>
+          <uip-theme-toggle></uip-theme-toggle>
+        </div>
       <script type="text/html" uip-snippet label="Rectangle card">
         <div class="card-item aqua">Single card</div>
       </script>
       <script type="text/html" uip-snippet label="Circle card" wrap-items>
         <div class="card-item card-circle aqua">Single card</div>
       </script>
       <uip-preview></uip-preview>
-      <uip-settings target=".card-item">
+      <uip-settings target=".card-item" vertical>
         <uip-select-setting label="Card color:" attribute="class" mode="append">
           <option value="red">Red</option>
           <option value="aqua">Aqua</option>
           <option value="green">Green</option>
         </uip-select-setting>
       </uip-settings>
-      <uip-editor></uip-editor>
+      <uip-editor collapsible></uip-editor>
     </uip-root>
   </section>
 
@@ -37,7 +40,10 @@ title: Example with multiple playgrounds
     </p>
 
     <uip-root>
-      <uip-header></uip-header>
+      <div class="uip-toolbar">
+        <uip-snippets></uip-snippets>
+        <uip-theme-toggle></uip-theme-toggle>
+      </div>
       <script type="text/html" uip-snippet label="List of aqua cards">
         <div class="card-list">
           <div class="card-item aqua">Card #1</div>
@@ -57,15 +63,15 @@ title: Example with multiple playgrounds
         </div>
       </script>
       <uip-preview></uip-preview>
-      <uip-settings target=".card-list">
+      <uip-settings target=".card-list" vertical>
         <uip-select-setting label="Card color:" target=".card-item" attribute="class" mode="append">
           <option value="red">Red</option>
           <option value="aqua">Aqua</option>
           <option value="green">Green</option>
         </uip-select-setting>
         <uip-bool-setting label="Wrap items" attribute="wrap-items"></uip-bool-setting>
       </uip-settings>
-      <uip-editor></uip-editor>
+      <uip-editor collapsible></uip-editor>
     </uip-root>
   </section>
 </div>
diff --git a/pages/views/examples/example/playground.njk b/pages/views/examples/example/playground.njk
@@ -1,15 +1,13 @@
 ---
 title: Example with a playground that contains playground inside
 ---
-
+<uip-snippets root="::next"></uip-snippets>
 <uip-root>
-  <uip-header>
-    <uip-snippets></uip-snippets>
-    <uip-options hide-settings></uip-options>
-  </uip-header>
   <script type="text/html" uip-snippet label="Playground">
+    <uip-snippets root="::parent::child(uip-root)"></uip-snippets>
+    <uip-preview root="::next"></uip-preview>
+
     <uip-root>
-      <uip-header></uip-header>
       <template uip-snippet label="List of aqua cards">
         <div class="card-list">
           <div class="card-item aqua">Card #1</div>
@@ -28,16 +26,15 @@ title: Example with a playground that contains playground inside
           <div class="card-item red">Card #7</div>
         </div>
       </template>
-      <uip-preview></uip-preview>
-      <uip-settings target=".card-list">
+      <uip-settings target=".card-list" vertical dir-toggle theme-toggle>
         <uip-select-setting label="Card color:" target=".card-item" attribute="class" mode="append">
           <option value="red">Red</option>
           <option value="aqua">Aqua</option>
           <option value="green">Green</option>
         </uip-select-setting>
         <uip-bool-setting label="Wrap items" attribute="wrap-items"></uip-bool-setting>
       </uip-settings>
-      <uip-editor></uip-editor>
+      <uip-editor collapsible></uip-editor>
     </uip-root>
   </script>
   <script type="text/html" uip-snippet label="List of aqua cards">
@@ -48,5 +45,9 @@ title: Example with a playground that contains playground inside
     </div>
   </script>
   <uip-preview resizable></uip-preview>
-  <uip-editor></uip-editor>
+  <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-settings>
 </uip-root>
diff --git a/pages/views/header/header.json b/pages/views/header/header.json
diff --git a/pages/views/header/snippets.njk b/pages/views/header/snippets.njk
diff --git a/pages/views/index.njk b/pages/views/index.njk
@@ -22,7 +22,7 @@ isLandingPage: true
         <a class="get-started" href="{{ '/general/getting-started/' | url }}" data-test-msg="Get Started!"></a>
       </div>
     </script>
-    <uip-preview></uip-preview>
+    <uip-preview class="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>