Merge pull request #178 from studiometa/feature/playground-demos

Docs: Feature/playground demos

CHANGELOG.md

@@ -8,6 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Added
 
+- Add a **Demo** section inside the documentation to provide **copy/paste** ready components and a collection of experiments ([#178](https://github.com/studiometa/ui/pull/178))
 - Add the **MapboxStaticMap** molecule ([#175](https://github.com/studiometa/ui/pull/175))
 - **FigureTwicpics:** add `disable` option ([#176](https://github.com/studiometa/ui/pull/176))
 

packages/docs/.vitepress/config.ts

@@ -69,6 +69,10 @@ export default defineConfig({
         text: 'Components',
         link: '/components/',
       },
+      {
+        text: 'Demos',
+        link: '/demos/',
+      },
       {
         text: 'Playground',
         link: '/play/',
@@ -82,6 +86,7 @@ export default defineConfig({
     sidebar: {
       '/components/': getComponentsSidebar(),
       '/': getGuideSidebar(),
+      '/demos/': getDemoSidebar(),
     },
   },
 });
@@ -148,6 +153,17 @@ function getComponentsSidebar() {
   ];
 }
 
+function getDemoSidebar() {
+  return [
+    {
+      text: 'Demos',
+      link: '/demos/',
+      items: generateSidebarLinksFromPath('demos/*/index.md', {
+        extractTitle: true,
+      }),
+    },
+  ]
+}
 function generateSidebarLinksFromPath(
   globs: string | string[],
   {

packages/docs/demos/BurgerMenu/index.md

@@ -0,0 +1,7 @@
+# Burger Menu
+
+<PreviewPlayground
+  :html="() => import('./stories/app.twig')"
+  :script="() => import('./stories/app.js?raw')"
+  height="90vh"
+  />

packages/docs/demos/BurgerMenu/stories/app.js

@@ -0,0 +1,42 @@
+import { Base, createApp } from '@studiometa/js-toolkit';
+import { Menu as MenuCore, MenuList as MenuListCore, MenuBtn, Transition } from '@studiometa/ui';
+
+class MenuList extends MenuListCore {
+  static config = {
+    ...MenuListCore.config,
+    components: {
+      MenuList,
+      Transition,
+    }
+  }
+
+  onItemsOpen() {
+    this.$children.Transition.forEach(transition => transition.enter());
+  }
+
+  onItemsClose() {
+    this.$children.Transition.forEach(transition => transition.leave());
+  }
+}
+
+class Menu extends MenuCore {
+  static config = {
+    ...MenuCore.config,
+    components: {
+      Menu,
+      MenuList,
+      MenuBtn,
+    }
+  }
+}
+
+class App extends Base {
+  static config = {
+    name: 'App',
+    components: {
+      Menu,
+    }
+  };
+}
+
+createApp(App)

packages/docs/demos/BurgerMenu/stories/app.twig

@@ -0,0 +1,46 @@
+<div data-component="Menu" class="flex justify-end p-10">
+  {% include '@ui/atoms/Button/StyledButton.twig' with {
+    label: 'Menu',
+    attr: { data_component: 'MenuBtn' }
+  } %}
+  <div data-component="MenuList"
+    data-option-enter-from="-translate-y-full"
+    data-option-enter-active="transition duration-700 ease-out-expo"
+    data-option-leave-active="transition duration-700 ease-out-expo"
+    data-option-leave-to="-translate-y-full"
+    class="z-10 fixed top-0 left-0 w-full h-full bg-blue-600 overflow-hidden -translate-y-full">
+    <div data-component="Transition"
+      data-option-enter-from="translate-y-full"
+      data-option-enter-active="transition duration-700 ease-out-expo"
+      data-option-leave-active="transition duration-700 ease-out-expo"
+      data-option-leave-to="translate-y-full"
+      class="absolute inset-0 flex items-stretch p-10 bg-blue-400 translate-y-full">
+      <div class="absolute top-10 right-10">
+        {% include '@ui/atoms/Button/StyledButton.twig' with {
+          label: 'Close',
+          attr: { data_component: 'MenuBtn' }
+        } %}
+      </div>
+      <ul class="flex flex-col gap-10 justify-center text-white text-9xl font-bold uppercase">
+        {% for item in 1..3 %}
+          {% set duration = 1000 + 200 * loop.index0 %}
+          <li data-component="Transition"
+            data-option-enter-from="translate-y-full skew-y-12"
+            data-option-enter-active="transition ease-out-expo"
+            data-option-leave-active="transition ease-out-expo"
+            data-option-leave-to="translate-y-full skew-y-12"
+            style="transition-duration: {{ duration }}ms;"
+            class="origin-top-left translate-y-full skew-y-12">
+            item #{{ item }}
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
+  </div>
+</div>
+
+<style>
+  .ease-out-expo { transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
+
+  .ease-in-out-expo { transition-timing-function: cubic-bezier(0.9, 0, 0, 0.9); }
+</style>

packages/docs/demos/Buttons/index.md

@@ -0,0 +1,3 @@
+# Buttons Demo
+
+<PreviewPlayground :html="() => import('./stories/app.twig')"/>

packages/docs/demos/Buttons/stories/app.twig

@@ -0,0 +1,7 @@
+<div class="bg-[#36363d] grid items-center justify-center h-screen">
+  <a class="group relative font-mono uppercase bg-black px-8 py-4 rounded-full inline-flex items-center cursor-pointer transition-all duration-500 ease-in-out-quad before:content before:absolute before:top-1/2 before:left-5 before:bg-[#d3f153] before:w-5 before:h-5 before:rounded-full before:block before:-translate-y-1/2 before:transition-all before:duration-500 before:ease-in-out-quad hover:before:w-full hover:before:h-full hover:before:-translate-x-5 hover:before:-translate-y-1/2">
+    <span class="z-[5] relative text-sm leading-none pl-5 text-[#d3f153] transition-all duration-500 ease-in-out-quad group-hover:text-black group-hover:px-[10px]">
+      View more
+    </span>
+  </a>
+</div>

packages/docs/demos/FooterAnimation/index.md

@@ -0,0 +1,11 @@
+# Footer Animation
+
+Animation de footer inspiré par [https://chriskalafatis.com/](https://chriskalafatis.com/)
+
+<PreviewPlayground
+  :html="() => import('./stories/app.twig')"
+  :script="() => import('./stories/app.js?raw')"
+  css=" "
+  css-editor="false"
+/>
+

packages/docs/demos/FooterAnimation/stories/app.js

@@ -0,0 +1,37 @@
+import { Base, createApp } from '@studiometa/js-toolkit';
+import { transition } from '@studiometa/js-toolkit/utils';
+
+class App extends Base {
+  static config = {
+    name: 'App',
+    refs: ['bg'],
+  };
+
+  hasReachBottom = false;
+
+  scrolled({ x, y, changed, last, delta, progress, max, direction }) {
+    if (y === max.y) {
+      this.hasReachBottom = true;
+      return transition(this.$refs.bg, {
+        to: {
+          transform: 'scale(0.8)',
+          border: '2px solid #a8a29e',
+          borderRadius: '3.5rem',
+        }
+      }, 'keep');
+    }
+
+    if (this.hasReachBottom && y < max.y) {
+      this.hasReachBottom = false;
+      return transition(this.$refs.bg, {
+        to: {
+          transform: 'scale(1)',
+          border: '0px solid #a8a29e',
+          borderRadius: '0',
+        }
+      }, 'keep');
+    }
+  }
+}
+
+export default createApp(App, document.body);

packages/docs/demos/FooterAnimation/stories/app.twig

@@ -0,0 +1,22 @@
+<div class="relative bg-stone-700 text-stone-200">
+  <div data-ref="bg"
+    class="fixed w-full h-full bg-gradient-to-r from-stone-600 to-stone-800 transition-all duration-500 ease-out-quad origin-center"></div>
+
+  <div class="relative z-1">
+    <div class="h-screen grid justify-center content-center">
+      <h1 class="text-4xl">
+        Studio Meta
+      </h1>
+    </div>
+    <div class="h-screen grid justify-center content-center">
+      <h2 class="text-4xl">
+        Projects
+      </h2>
+    </div>
+    <div class="h-screen grid justify-center content-center">
+      <h2 class="text-4xl">
+        Let's get in touch
+      </h2>
+    </div>
+  </div>
+</div>

packages/docs/demos/HorizontalSticky/index.md

@@ -0,0 +1,6 @@
+# Horizontal Sticky
+
+<PreviewPlayground
+  :html="() => import('./stories/app.twig')"
+  :script="() => import('./stories/app.js?raw')"
+  />

packages/docs/demos/HorizontalSticky/stories/app.js

@@ -0,0 +1,19 @@
+import { Base, createApp } from '@studiometa/js-toolkit';
+import { Figure, ScrollAnimationParent, ScrollAnimation } from '@studiometa/ui';
+
+class App extends Base {
+  static config = {
+    name: 'App',
+    components: {
+      Figure,
+      ScrollAnimation,
+      ScrollAnimationParent,
+    },
+  };
+}
+
+createApp(App, {
+  features: {
+    asyncChildren: true,
+  },
+});

packages/docs/demos/HorizontalSticky/stories/app.twig

@@ -0,0 +1,46 @@
+{% set total = 10 %}
+
+<div class="flex items-center justify-center w-full h-screen">
+  Scroll down
+</div>
+<div data-component="ScrollAnimationParent"
+  data-option-offset="0 0 / 1 1"
+  style="--total: {{ total }}; height: calc(var(--total) * 100vw);"
+  class="relative w-full bg-gray-200">
+  <div data-component="ScrollAnimationChild"
+    {{
+    html_attributes({ data_option_from: { '--progress': 0 }, data_option_to: { '--progress': 1 } })
+    }}
+    style="width: calc(var(--total) * 100vw); --tw-translate-x: calc(var(--progress) * -100% + var(--progress) * 100vw)"
+    class="sticky top-0 flex h-screen bg-green-100 translate-x-0">
+    {% for index in 1..total %}
+      <div data-component="ScrollAnimation"
+        class="w-screen h-screen p-12"
+        {{
+        html_attributes({
+          data_option_from: { x: 200 },
+          data_option_to: { x: - 200 },
+          data_option_offset: '-1 0 / 1 -1'
+        })
+        }}>
+        <div class="relative w-full h-full">
+          <div class="absolute inset-0 bg-blue-300 overflow-hidden">
+            <div class="absolute inset-y-0 left-[-200px] right-[-200px]">
+              {% include '@ui/atoms/Figure/Figure.twig' with {
+                src: 'https://picsum.photos/seed/%s/800/400'|format(loop.index),
+                width: 800,
+                height: 400,
+                absolute: true,
+                fit: 'cover',
+                attr: { data_ref: 'target' }
+              } %}
+            </div>
+          </div>
+        </div>
+      </div>
+    {% endfor %}
+  </div>
+</div>
+<div class="flex items-center justify-center w-full h-screen">
+  Scroll up
+</div>

packages/docs/demos/ImageGallery/index.md

@@ -0,0 +1,7 @@
+# Image gallery
+
+<PreviewPlayground
+  :html="() => import('./stories/app.twig')"
+  :script="() => import('./stories/app.js?raw')"
+  :css="() => import('./stories/app.css?raw')"
+  />

packages/docs/demos/ImageGallery/stories/app.css

@@ -0,0 +1,15 @@
+@import "https://unpkg.com/open-props";
+
+html { scroll-snap-type: y mandatory; }
+
+@keyframes scale-up { 0% { scale: 0; }
+
+50% { scale: 1; }
+
+100% { scale: 3; } }
+
+.view { view-timeline: --view block; }
+
+.box { animation: scale-up 1ms var(--ease-in-out-1) both; animation-timeline: --view; }
+
+img { max-width: none !important; width: 100% !important; height: 100% !important; }

packages/docs/demos/ImageGallery/stories/app.js

@@ -0,0 +1,11 @@
+let previousScroll = window.pageYOffset;
+
+document.addEventListener('scroll', () => {
+  const newScroll = window.pageYOffset;
+  const scrollMax = document.scrollingElement.scrollHeight - window.innerHeight;
+
+  if (newScroll >= scrollMax && newScroll >= previousScroll) {
+    document.scrollingElement.scrollTo(0, 0);
+    previousScroll = newScroll;
+  }
+});