Merge branch 'release/0.2.46'

studiometa · Mar 22, 2024 · 67d268a · 67d268a
2 parents 8f6ca88 + 178fc4f
commit 67d268a
Show file tree

Hide file tree

Showing 10 changed files with 2,818 additions and 6,055 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+## [v0.2.46](https://github.com/studiometa/ui/compare/0.2.45..0.2.46) (2024-03-22)
+
+### Fixed
+
+- Fix docs playground preview displaying nothing ([#189](https://github.com/studiometa/ui/pull/189), [fa59c05](https://github.com/studiometa/ui/commit/fa59c05))
+- Update doc with correct syntax highlighting ([#189](https://github.com/studiometa/ui/pull/189), [1154d19](https://github.com/studiometa/ui/commit/1154d19))
+
 ## [v0.2.45](https://github.com/studiometa/ui/compare/0.2.44..0.2.45) (2024-03-22)
 
 ### Added

diff --git a/composer.json b/composer.json
@@ -1,6 +1,6 @@
 {
   "name": "studiometa/ui",
-  "version": "0.2.45",
+  "version": "0.2.46",
   "description": "A set of opiniated, unstyled and accessible components.",
   "license": "MIT",
   "require": {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui-workspace",
-  "version": "0.2.45",
+  "version": "0.2.46",
   "private": true,
   "workspaces": [
     "packages/*"

diff --git a/packages/docs/.vitepress/theme/components/PreviewPlayground.vue b/packages/docs/.vitepress/theme/components/PreviewPlayground.vue
@@ -1,62 +1,69 @@
 <script setup lang="ts">
-  import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
+  import { ref, unref, computed, watch, onMounted, onUnmounted } from 'vue';
+  import type { Ref } from 'vue';
+  import { UseElementVisibility } from '@vueuse/components'
   import { withBase, useData } from 'vitepress';
   import { isFunction, isString } from '@studiometa/js-toolkit/utils';
   import { zip } from '@studiometa/playground/dist/lib/utils/zip.js';
   import Loader from './Loader.vue';
   import ControlButton from './PreviewControlButton.vue';
 
-  const props = defineProps({
-    script: [String, Function],
-    scriptEditor: { type: Boolean, default: null },
-    html: [String, Function],
-    htmlEditor: { type: Boolean, default: null },
-    css: [String, Function],
-    cssEditor: { type: Boolean, default: null },
-    height: {
-      type: String,
-      default: '60vh',
-    },
-    zoom: {
-      type: [Number, String],
-      default: 0.9,
-    },
-    noControls: Boolean,
+  type CodeProp = string | (() => Promise<{ default: string }>);
+
+  interface Props {
+    script?: CodeProp;
+    scriptEditor?: boolean;
+    html?: CodeProp;
+    htmlEditor?: boolean;
+    css?: CodeProp;
+    cssEditor?: boolean;
+    height?: string;
+    zoom?: string | number;
+    noControls?: boolean;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    scriptEditor: null,
+    htmlEditor: null,
+    cssEditor: null,
+    height: '60vh',
+    zoom: 0.9,
   });
 
   const { isDark } = useData();
 
   const defaultContent = zip('');
 
-  const script = ref(defaultContent);
-  if (isFunction(props.script)) {
-    props.script().then((mod) => {
-      script.value = zip(mod.default);
-    });
-  } else if (isString(props.script)) {
-    script.value = zip(props.script);
-  }
+  function useCode(codeProp: CodeProp):[Ref<string>, Ref<boolean>] {
+    const code = ref(defaultContent);
+    let codeIsLoading = ref(false);
+    if (isFunction(codeProp)) {
+      codeIsLoading.value = true;
+      codeProp().then((mod) => {
+        code.value = zip(mod.default);
+        codeIsLoading.value = false;
+      });
+    } else if (isString(codeProp)) {
+      code.value = zip(codeProp);
+    }
 
-  const html = ref(defaultContent);
-  if (isFunction(props.html)) {
-    props.html().then((mod) => {
-      html.value = zip(mod.default);
-    });
-  } else if (isString(props.html)) {
-    html.value = zip(props.html);
+    return [code, codeIsLoading];
   }
 
-  const css = ref(defaultContent);
-  if (isFunction(props.css)) {
-    props.css().then((mod) => {
-      css.value = zip(mod.default);
-    });
-  } else if (isString(props.css)) {
-    css.value = zip(props.css);
-  }
+  const [script, scriptIsLoading] = useCode(props.script);
+  const [html, htmlIsLoading] = useCode(props.html);
+  const [css, cssIsLoading] = useCode(props.css);
 
   const src = computed(() => {
-    const url = new URL(import.meta.env.DEV ? '/-/play/index.html' : '/-/play/', 'http://localhost');
+    if (unref(scriptIsLoading) || unref(htmlIsLoading) || unref(cssIsLoading)) {
+      return null;
+    }
+
+    const url = new URL(
+      // @ts-ignore
+      import.meta.env.DEV ? '/-/play/index.html' : '/-/play/',
+      'http://localhost',
+    );
 
     url.searchParams.set('html', html.value);
     url.searchParams.set('script', script.value);
@@ -66,7 +73,10 @@
 
     url.searchParams.set('html-editor', html.value !== defaultContent ? 'true' : 'false');
     url.searchParams.set('script-editor', script.value !== defaultContent ? 'true' : 'false');
-    url.searchParams.set('style-editor', css.value !== defaultContent && [true, null].includes(props.cssEditor) ? 'true' : 'false');
+    url.searchParams.set(
+      'style-editor',
+      css.value !== defaultContent && [true, null].includes(props.cssEditor) ? 'true' : 'false',
+    );
 
     url.searchParams.set('theme', isDark.value ? 'dark' : 'light');
 
@@ -87,7 +97,7 @@
   watch(isDark, (newValue) => {
     const theme = newValue ? 'dark' : 'light';
     iframe.value.contentDocument.querySelector(`#theme-${theme}`)?.click();
-  })
+  });
 
   function reloadIframe() {
     isLoading.value = true;
@@ -108,65 +118,69 @@
 </script>
 
 <template>
-  <div class="story">
-    <div
-      class="z-above relative my-4 bg-vp-bg-soft ring-2 ring-vp-c-gutter rounded-md overflow-hidden resize-x"
-      :style="{ height }"
-    >
-      <div class="z-above absolute flex gap-1 top-0 left-0 p-2">
-        <slot name="controls-top-left" />
-      </div>
-      <div v-if="withControls" class="z-above absolute flex gap-1 bottom-0 left-0 p-2">
-        <slot name="controls-top-right" />
-        <ControlButton @click="setIframeZoom(scale * 1.1)" title="Zoom in">
-          <span class="sr-only">Zoom in</span>
-          <i-octicon-plus-circle-16 class="block w-4 h-4" />
-        </ControlButton>
-        <ControlButton @click="setIframeZoom(scale * 0.9)" title="Zoom out">
-          <span class="sr-only">Zoom out</span>
-          <svg
-            width="16"
-            height="16"
-            class="block w-4 h-4"
-            viewBox="0 0 16 16"
-            fill="currentColor"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M1.5 8C1.5 6.27609 2.18482 4.62279 3.40381 3.40381C4.62279 2.18482 6.27609 1.5 8 1.5C9.72391 1.5 11.3772 2.18482 12.5962 3.40381C13.8152 4.62279 14.5 6.27609 14.5 8C14.5 9.72391 13.8152 11.3772 12.5962 12.5962C11.3772 13.8152 9.72391 14.5 8 14.5C6.27609 14.5 4.62279 13.8152 3.40381 12.5962C2.18482 11.3772 1.5 9.72391 1.5 8ZM8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.84344 15.1571 5.87827 16 8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0ZM4.75 7.25C4.55109 7.25 4.36032 7.32902 4.21967 7.46967C4.07902 7.61032 4 7.80109 4 8C4 8.19891 4.07902 8.38968 4.21967 8.53033C4.36032 8.67098 4.55109 8.75 4.75 8.75C8.91901 8.75 7.54171 8.75 11.25 8.75C11.4489 8.75 11.6397 8.67098 11.7803 8.53033C11.921 8.38968 12 8.19891 12 8C12 7.80109 11.921 7.61032 11.7803 7.46967C11.6397 7.32902 11.4489 7.25 11.25 7.25C7.54231 7.25 8.91825 7.25 4.75 7.25Z"
-            />
-          </svg>
-        </ControlButton>
-        <ControlButton @click="setIframeZoom(Number(zoom))" title="Reset zoom">
-          <span class="sr-only">Reset zoom</span>
-          <i-octicon-x-circle-16 class="block w-4 h-4" />
-        </ControlButton>
-        <ControlButton :href="src" target="_blank" rel="noopener" title="Open in a new window">
-          <span class="sr-only">Open in a new window</span>
-          <i-octicon-link-external-16 class="block w-4 h-4" />
-        </ControlButton>
-        <ControlButton @click="reloadIframe" title="Reload iframe">
-          <span class="sr-only">Reload iframe</span>
-          <i-octicon-sync-16 class="block w-4 h-4" />
-        </ControlButton>
+  <UseElementVisibility v-slot="{ isVisible }">
+    <pre>{{ isVisible }}</pre>
+    <div class="story">
+      <div
+        class="z-above relative my-4 bg-vp-bg-soft ring-2 ring-vp-c-gutter rounded-md overflow-hidden resize-x"
+        :style="{ height }"
+      >
+        <div class="z-above absolute flex gap-1 top-0 left-0 p-2">
+          <slot name="controls-top-left" />
+        </div>
+        <div v-if="withControls" class="z-above absolute flex gap-1 bottom-0 left-0 p-2">
+          <slot name="controls-top-right" />
+          <ControlButton @click="setIframeZoom(scale * 1.1)" title="Zoom in">
+            <span class="sr-only">Zoom in</span>
+            <i-octicon-plus-circle-16 class="block w-4 h-4" />
+          </ControlButton>
+          <ControlButton @click="setIframeZoom(scale * 0.9)" title="Zoom out">
+            <span class="sr-only">Zoom out</span>
+            <svg
+              width="16"
+              height="16"
+              class="block w-4 h-4"
+              viewBox="0 0 16 16"
+              fill="currentColor"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M1.5 8C1.5 6.27609 2.18482 4.62279 3.40381 3.40381C4.62279 2.18482 6.27609 1.5 8 1.5C9.72391 1.5 11.3772 2.18482 12.5962 3.40381C13.8152 4.62279 14.5 6.27609 14.5 8C14.5 9.72391 13.8152 11.3772 12.5962 12.5962C11.3772 13.8152 9.72391 14.5 8 14.5C6.27609 14.5 4.62279 13.8152 3.40381 12.5962C2.18482 11.3772 1.5 9.72391 1.5 8ZM8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.84344 15.1571 5.87827 16 8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0ZM4.75 7.25C4.55109 7.25 4.36032 7.32902 4.21967 7.46967C4.07902 7.61032 4 7.80109 4 8C4 8.19891 4.07902 8.38968 4.21967 8.53033C4.36032 8.67098 4.55109 8.75 4.75 8.75C8.91901 8.75 7.54171 8.75 11.25 8.75C11.4489 8.75 11.6397 8.67098 11.7803 8.53033C11.921 8.38968 12 8.19891 12 8C12 7.80109 11.921 7.61032 11.7803 7.46967C11.6397 7.32902 11.4489 7.25 11.25 7.25C7.54231 7.25 8.91825 7.25 4.75 7.25Z"
+              />
+            </svg>
+          </ControlButton>
+          <ControlButton @click="setIframeZoom(Number(zoom))" title="Reset zoom">
+            <span class="sr-only">Reset zoom</span>
+            <i-octicon-x-circle-16 class="block w-4 h-4" />
+          </ControlButton>
+          <ControlButton :href="src" target="_blank" rel="noopener" title="Open in a new window">
+            <span class="sr-only">Open in a new window</span>
+            <i-octicon-link-external-16 class="block w-4 h-4" />
+          </ControlButton>
+          <ControlButton @click="reloadIframe" title="Reload iframe">
+            <span class="sr-only">Reload iframe</span>
+            <i-octicon-sync-16 class="block w-4 h-4" />
+          </ControlButton>
+        </div>
+        <Loader v-if="isLoading" />
+        <iframe
+          v-if="isVisible"
+          ref="iframe"
+          :key="iframeKey"
+          @load="onLoad"
+          class="block border-0 transform origin-top-left duration-300"
+          :class="{ 'opacity-0': isLoading }"
+          :src="src"
+          width="100%"
+          :style="{
+            '--scale': scale,
+            '--tw-scale-x': 'var(--scale)',
+            '--tw-scale-y': 'var(--scale)',
+            width: `calc(1 / var(--scale) * 100%)`,
+            height: `calc(1 / var(--scale) * ${height})`,
+          }"
+        />
       </div>
-      <Loader v-if="isLoading" />
-      <iframe
-        ref="iframe"
-        :key="iframeKey"
-        @load="onLoad"
-        class="block border-0 transform origin-top-left duration-300"
-        :class="{ 'opacity-0': isLoading }"
-        :src="src"
-        width="100%"
-        :style="{
-          '--scale': scale,
-          '--tw-scale-x': 'var(--scale)',
-          '--tw-scale-y': 'var(--scale)',
-          width: `calc(1 / var(--scale) * 100%)`,
-          height: `calc(1 / var(--scale) * ${height})`,
-        }"
-      />
     </div>
-  </div>
+  </UseElementVisibility>
 </template>
diff --git a/packages/docs/components/molecules/Reinsurance/examples.md b/packages/docs/components/molecules/Reinsurance/examples.md
@@ -49,7 +49,7 @@ Once the [package installed](/guide/installation/), simply include the Twig temp
 
 ## HTML Snippet
 
-```
+```twig
 <section class="text-[0] pt-14 pb-6 text-center w-full">
   {% for item in 0..4 %}
     <div class="inline-block align-top mb-12 s:mb-8 px-3 w-56 whitespace-normal">

diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui-docs",
-  "version": "0.2.45",
+  "version": "0.2.46",
   "private": true,
   "type": "module",
   "scripts": {
@@ -18,6 +18,8 @@
     "@studiometa/playground": "^0.0.3",
     "@studiometa/tailwind-config": "^1.1.0",
     "@studiometa/ui-shared": "*",
+    "@vueuse/components": "^10.9.0",
+    "@vueuse/core": "^10.9.0",
     "autoprefixer": "^10.4.16",
     "concurrently": "^8.2.2",
     "snake-case": "^3.0.4",

diff --git a/packages/playground/package.json b/packages/playground/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui-playground",
-  "version": "0.2.45",
+  "version": "0.2.46",
   "private": true,
   "type": "module",
   "scripts": {

diff --git a/packages/tests/package.json b/packages/tests/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui-tests",
-  "version": "0.2.45",
+  "version": "0.2.46",
   "private": true,
   "type": "module",
   "scripts": {

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui",
-  "version": "0.2.45",
+  "version": "0.2.46",
   "description": "A set of opiniated, unstyled and accessible components",
   "publishConfig": {
     "access": "public"