Merge branch 'release/0.2.4'

studiometa · Apr 1, 2022 · 9e972d4 · 9e972d4
2 parents d9ae984 + 7dff7ec
commit 9e972d4
Show file tree

Hide file tree

Showing 43 changed files with 7,468 additions and 8,303 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,37 +1,36 @@
 {
   "name": "@studiometa/ui-workspace",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "private": true,
   "workspaces": [
     "packages/*"
   ],
   "scripts": {
     "test": "npm run test -w @studiometa/ui-tests",
-    "build": "rm -rf dist && npm run build:pkg && npm run build:types && npm run build:cp-files",
+    "build": "rm -rf dist && npm run build:pkg && npm run build:sizes && npm run build:types && npm run build:cp-files",
     "build:cp-files": "cp packages/ui/package.json dist/ && cp LICENSE dist/ && cp README.md dist/",
     "build:types": "tsc --build tsconfig.build.json",
-    "build:pkg": "node scripts/build.js",
+    "build:pkg": "node scripts/build.mjs",
+    "build:sizes": "node scripts/sizes.mjs",
     "lint": "npm run lint:eslint && npm run lint:types",
     "lint:eslint": "eslint packages/ui",
     "lint:types": "tsc --build tsconfig.lint.json",
     "docs:dev": "cd packages/docs && npm install && npm run dev",
     "docs:build": "cd packages/docs && npm install && npm run build"
   },
   "devDependencies": {
-    "@babel/cli": "^7.15.7",
-    "@babel/core": "^7.15.5",
-    "@babel/preset-env": "^7.15.6",
     "@studiometa/eslint-config": "^2.1.3",
-    "@studiometa/prettier-config": "^2.0.1",
-    "@typescript-eslint/eslint-plugin": "^4.32.0",
-    "@typescript-eslint/parser": "^4.32.0",
-    "esbuild": "^0.14.14",
+    "@studiometa/prettier-config": "^2.1.1",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "esbuild": "^0.14.29",
     "eslint": "^7.32.0",
-    "eslint-plugin-jest": "^24.5.0",
+    "eslint-plugin-jest": "^24.7.0",
     "fast-glob": "^3.2.11",
-    "prettier": "^2.4.1",
+    "gzip-size": "^7.0.0",
+    "prettier": "^2.6.1",
     "prettier-plugin-twig-melody": "^0.4.6",
-    "typescript": "^4.4.3",
+    "typescript": "^4.6.3",
     "vue": "^2.6.14"
   }
 }
diff --git a/packages/docs/.vitepress/theme/components/RenderTwig.vue b/packages/docs/.vitepress/theme/components/RenderTwig.vue
@@ -35,18 +35,32 @@
       throw new Error('The `tpl` is not defined. Use the `tplImporter` prop or the default slot.');
     }
 
-    fetchRenderedTwig(params, controller).then((response) => {
-      content.value = response;
-
-      nextTick(async () => {
-        emit('rendered');
-        if (props.jsImporter) {
-          const { default: useApp } = await props.jsImporter();
-          const app = await useApp();
-          app.$update();
+    function fetchContent() {
+      fetchRenderedTwig(params, controller).then((response) => {
+        content.value = response;
+
+        nextTick(async () => {
+          emit('rendered');
+          if (props.jsImporter) {
+            const { default: useApp } = await props.jsImporter();
+            const app = await useApp();
+            app.$update();
+          }
+        });
+      }).catch((error) => {
+        if (!error.message.includes('aborted')) {
+          content.value = error.toString();
         }
       });
-    });
+    }
+
+    if (import.meta.hot) {
+      import.meta.hot.on('vite:beforeUpdate', () => {
+        fetchContent();
+      });
+    }
+
+    fetchContent();
   });
 </script>
 

diff --git a/packages/docs/.vitepress/theme/utils/index.js b/packages/docs/.vitepress/theme/utils/index.js
@@ -38,7 +38,7 @@ export async function fetchRenderedTwig(params = {}, controller = new AbortContr
   fetchUrl.search = search.toString();
 
   const cacheKey = fetchUrl.toString();
-  if (cache.has(cacheKey)) {
+  if (cache.has(cacheKey) && !import.meta.env.DEV) {
     return cache.get(cacheKey);
   }
 

diff --git a/packages/docs/components/molecules/Menu/burger/Menu.js b/packages/docs/components/molecules/Menu/burger/Menu.js
@@ -0,0 +1,13 @@
+import { Menu as MenuCore, MenuBtn } from '@studiometa/ui';
+import MenuList from './MenuList.js';
+
+export default class Menu extends MenuCore {
+  static config = {
+    name: 'Menu',
+    components: {
+      Menu,
+      MenuBtn,
+      MenuList,
+    },
+  };
+}
diff --git a/packages/docs/components/molecules/Menu/burger/MenuList.js b/packages/docs/components/molecules/Menu/burger/MenuList.js
@@ -0,0 +1,24 @@
+import { MenuList as MenuListCore } from '@studiometa/ui';
+
+export default class MenuList extends MenuListCore {
+  static config = {
+    name: 'MenuList',
+    components: {
+      MenuList,
+    },
+  };
+
+  /**
+   * Assign required values for the transitions.
+   */
+  get $options() {
+    const options = super.$options;
+
+    options.enterTo = 'is-open';
+    options.enterActive = 'transition duration-500 ease-out-expo';
+    options.leaveActive = 'transition duration-500 ease-out-expo';
+    options.leaveTo = 'transform -translate-x-full pointer-events-none';
+
+    return options;
+  }
+}
diff --git a/packages/docs/components/molecules/Menu/burger/app.js b/packages/docs/components/molecules/Menu/burger/app.js
@@ -0,0 +1,13 @@
+import { Base, createApp } from '@studiometa/js-toolkit';
+import Menu from './Menu.js';
+
+class App extends Base {
+  static config = {
+    name: 'App',
+    components: {
+      Menu,
+    },
+  };
+}
+
+export default createApp(App, document.body);
diff --git a/packages/docs/components/molecules/Menu/burger/app.twig b/packages/docs/components/molecules/Menu/burger/app.twig
@@ -0,0 +1,209 @@
+<style>
+  a { color: inherit; text-decoration: none; }
+  a:focus, button:focus { outline: none; }
+  ul { list-style-type: none; padding: 0; }
+</style>
+
+<nav data-component="Menu" data-option-mode="click" class="inline-block mx-10 my-20">
+  {% include '@ui/atoms/Button/StyledButton.twig' with {
+    label: 'Menu',
+    attr: {
+      data_component: 'MenuBtn',
+    }
+  } %}
+  <div data-component="MenuList"
+    class="z-10 fixed top-0 left-0 h-full w-1/3 py-4 transform -translate-x-full pointer-events-none">
+    <div class="absolute inset-0 bg-blue-200"></div>
+    <ul class="w-full">
+      <li data-component="Menu" data-option-mode="hover">
+        <a data-component="MenuBtn"
+          class="relative block p-4 hover:bg-blue-300 focus:ring-2 ring-inset"
+          href="#">
+          Subitem #1
+        </a>
+        <div data-component="MenuList"
+          class="z-under absolute top-0 left-full w-full h-full py-4 transform -translate-x-full pointer-events-none">
+          <div class="absolute inset-0 bg-green-200"></div>
+          <ul>
+            <li data-component="Menu" data-option-mode="hover">
+              <a href="#"
+                data-component="MenuBtn"
+                class="relative block p-4 hover:bg-blue-300 focus:ring-2 ring-inset">
+                Subitem #1.1
+              </a>
+              <div data-component="MenuList"
+                class="z-under absolute top-0 left-full w-full h-full py-4 bg-red-300 transform -translate-x-full pointer-events-none">
+                <ul>
+                  <li>
+                    <a class="block p-4 hover:bg-blue-300 focus:ring-2 ring-inset"
+                      href="#">
+                      Subitem #1.1.1
+                    </a>
+                  </li>
+                  <li>
+                    <a class="block p-4 hover:bg-blue-300 focus:ring-2 ring-inset"
+                      href="#">
+                      Subitem #1.1.2
+                    </a>
+                  </li>
+                  <li>
+                    <a class="block p-4 hover:bg-blue-300 focus:ring-2 ring-inset"
+                      href="#">
+                      Subitem #1.1.3
+                    </a>
+                  </li>
+                  <li>
+                    <a class="block p-4 hover:bg-blue-300 focus:ring-2 ring-inset"
+                      href="#">
+                      Subitem #1.1.4
+                    </a>
+                  </li>
+                  <li>
+                    <a class="block p-4 hover:bg-blue-300 focus:ring-2 ring-inset"
+                      href="#">
+                      Subitem #1.1.5
+                    </a>
+                  </li>
+                  <li>
+                    <a class="block p-4 hover:bg-blue-300 focus:ring-2 ring-inset"
+                      href="#">
+                      Subitem #1.1.6
+                    </a>
+                  </li>
+                  <li>
+                    <a class="block p-4 hover:bg-blue-300 focus:ring-2 ring-inset"
+                      href="#">
+                      Subitem #1.1.7
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </li>
+            <li>
+              <a href="#"
+                class="relative block p-4 hover:bg-blue-300 focus:ring-2 ring-inset">
+                Subitem #1.2
+              </a>
+            </li>
+            <li>
+              <a href="#"
+                class="relative block p-4 hover:bg-blue-300 focus:ring-2 ring-inset">
+                Subitem #1.3
+              </a>
+            </li>
+          </ul>
+        </div>
+      </li>
+      <li data-component="Menu" data-option-mode="hover">
+        <a data-component="MenuBtn"
+          class="relative block p-4 hover:bg-blue-300 focus:ring-2 ring-inset"
+          href="#">
+          Subitem #2
+        </a>
+        <div data-component="MenuList"
+          class="z-under absolute top-0 left-full w-full h-full py-4 transform -translate-x-full pointer-events-none">
+          <div class="absolute inset-0 bg-green-200"></div>
+          <ul>
+            <li data-component="Menu" data-option-mode="hover">
+              <a href="#"
+                data-component="MenuBtn"
+                class="relative block p-4 hover:bg-blue-300 focus:ring-2 ring-inset">
+                Subitem #2.1
+              </a>
+              <div data-component="MenuList"
+                class="z-under absolute top-0 left-full w-full h-full py-4 bg-red-300 transform -translate-x-full pointer-events-none">
+                <ul>
+                  <li>
+                    <a class="block p-4 hover:bg-blue-300 focus:ring-2 ring-inset"
+                      href="#">
+                      Subitem #2.1.1
+                    </a>
+                  </li>
+                  <li>
+                    <a class="block p-4 hover:bg-blue-300 focus:ring-2 ring-inset"
+                      href="#">
+                      Subitem #2.1.2
+                    </a>
+                  </li>
+                  <li>
+                    <a class="block p-4 hover:bg-blue-300 focus:ring-2 ring-inset"
+                      href="#">
+                      Subitem #2.1.3
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </li>
+            <li>
+              <a href="#"
+                class="relative block p-4 hover:bg-blue-300 focus:ring-2 ring-inset">
+                Subitem #2.2
+              </a>
+            </li>
+            <li>
+              <a href="#"
+                class="relative block p-4 hover:bg-blue-300 focus:ring-2 ring-inset">
+                Subitem #2.3
+              </a>
+            </li>
+          </ul>
+        </div>
+      </li>
+      <li data-component="Menu" data-option-mode="hover">
+        <a data-component="MenuBtn"
+          class="relative block p-4 hover:bg-blue-300 focus:ring-2 ring-inset"
+          href="#">
+          Subitem #3
+        </a>
+        <div data-component="MenuList"
+          class="z-under absolute top-0 left-full w-full h-full py-4 transform -translate-x-full pointer-events-none">
+          <div class="absolute inset-0 bg-green-200"></div>
+          <ul>
+            <li data-component="Menu" data-option-mode="hover">
+              <a href="#"
+                data-component="MenuBtn"
+                class="relative block p-4 hover:bg-blue-300 focus:ring-2 ring-inset">
+                Subitem #3.1
+              </a>
+              <div data-component="MenuList"
+                class="z-under absolute top-0 left-full w-full h-full py-4 bg-red-300 transform -translate-x-full pointer-events-none">
+                <ul>
+                  <li>
+                    <a class="block p-4 hover:bg-blue-300 focus:ring-2 ring-inset"
+                      href="#">
+                      Subitem #3.1.1
+                    </a>
+                  </li>
+                  <li>
+                    <a class="block p-4 hover:bg-blue-300 focus:ring-2 ring-inset"
+                      href="#">
+                      Subitem #3.1.2
+                    </a>
+                  </li>
+                  <li>
+                    <a class="block p-4 hover:bg-blue-300 focus:ring-2 ring-inset"
+                      href="#">
+                      Subitem #3.1.3
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </li>
+            <li>
+              <a href="#"
+                class="relative block p-4 hover:bg-blue-300 focus:ring-2 ring-inset">
+                Subitem #3.2
+              </a>
+            </li>
+            <li>
+              <a href="#"
+                class="relative block p-4 hover:bg-blue-300 focus:ring-2 ring-inset">
+                Subitem #3.3
+              </a>
+            </li>
+          </ul>
+        </div>
+      </li>
+    </ul>
+  </div>
+</nav>
diff --git a/packages/docs/components/molecules/Menu/burger/index.js b/packages/docs/components/molecules/Menu/burger/index.js
@@ -0,0 +1,31 @@
+import appJsRaw from './app.js?raw';
+import AppTwigRaw from './app.twig?raw';
+import MenuJsRaw from './Menu.js?raw';
+import MenuListJsRaw from './MenuList.js?raw';
+
+export default {
+  src: './burger/story.html',
+  name: 'Burger',
+  files: [
+    {
+      label: 'app.js',
+      lang: 'js',
+      content: appJsRaw,
+    },
+    {
+      label: 'Menu.js',
+      lang: 'js',
+      content: MenuJsRaw,
+    },
+    {
+      label: 'MenuList.js',
+      lang: 'js',
+      content: MenuListJsRaw,
+    },
+    {
+      label: 'app.twig',
+      lang: 'twig',
+      content: AppTwigRaw,
+    },
+  ],
+};