From 5ba5346b3c6af1a4259f4dbc0450007775a75247 Mon Sep 17 00:00:00 2001 From: Ludovic Janot Date: Thu, 7 Mar 2024 16:26:56 +0100 Subject: [PATCH 01/16] Add a section dedicated to Demos --- packages/docs/.vitepress/config.ts | 16 ++++++++++++++++ packages/docs/demos/index.md | 5 +++++ 2 files changed, 21 insertions(+) create mode 100644 packages/docs/demos/index.md diff --git a/packages/docs/.vitepress/config.ts b/packages/docs/.vitepress/config.ts index ce55dc6e..a08a392f 100644 --- a/packages/docs/.vitepress/config.ts +++ b/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[], { diff --git a/packages/docs/demos/index.md b/packages/docs/demos/index.md new file mode 100644 index 00000000..ab5da002 --- /dev/null +++ b/packages/docs/demos/index.md @@ -0,0 +1,5 @@ +# Playground demos + +:::tip +This section is providing **copy/paste** ready components and is a collection of experiments +::: From be9c9616c0ae3dd3ef773d5042f86c8eaf8911fc Mon Sep 17 00:00:00 2001 From: Ludovic Janot Date: Thu, 7 Mar 2024 16:27:12 +0100 Subject: [PATCH 02/16] Add a BurgerMenu demo --- packages/docs/demos/BurgerMenu/index.md | 7 +++ packages/docs/demos/BurgerMenu/stories/app.js | 42 +++++++++++++++++ .../docs/demos/BurgerMenu/stories/app.twig | 46 +++++++++++++++++++ 3 files changed, 95 insertions(+) create mode 100644 packages/docs/demos/BurgerMenu/index.md create mode 100644 packages/docs/demos/BurgerMenu/stories/app.js create mode 100644 packages/docs/demos/BurgerMenu/stories/app.twig diff --git a/packages/docs/demos/BurgerMenu/index.md b/packages/docs/demos/BurgerMenu/index.md new file mode 100644 index 00000000..023e5dd6 --- /dev/null +++ b/packages/docs/demos/BurgerMenu/index.md @@ -0,0 +1,7 @@ +# Burger Menu + + diff --git a/packages/docs/demos/BurgerMenu/stories/app.js b/packages/docs/demos/BurgerMenu/stories/app.js new file mode 100644 index 00000000..8b5f001a --- /dev/null +++ b/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) diff --git a/packages/docs/demos/BurgerMenu/stories/app.twig b/packages/docs/demos/BurgerMenu/stories/app.twig new file mode 100644 index 00000000..ca1a22a8 --- /dev/null +++ b/packages/docs/demos/BurgerMenu/stories/app.twig @@ -0,0 +1,46 @@ +
+ {% include '@ui/atoms/Button/StyledButton.twig' with { + label: 'Menu', + attr: { data_component: 'MenuBtn' } + } %} +
+
+
+ {% include '@ui/atoms/Button/StyledButton.twig' with { + label: 'Close', + attr: { data_component: 'MenuBtn' } + } %} +
+
    + {% for item in 1..3 %} + {% set duration = 1000 + 200 * loop.index0 %} +
  • + item #{{ item }} +
    • + {% endfor %} +
+
+
+
+ + From ae063fd703d2c589d0e33855caf6e5cb8fec93ea Mon Sep 17 00:00:00 2001 From: Ludovic Janot Date: Thu, 7 Mar 2024 16:27:24 +0100 Subject: [PATCH 03/16] Add a button demo --- packages/docs/demos/Buttons/index.md | 3 +++ packages/docs/demos/Buttons/stories/app.twig | 7 +++++++ 2 files changed, 10 insertions(+) create mode 100644 packages/docs/demos/Buttons/index.md create mode 100644 packages/docs/demos/Buttons/stories/app.twig diff --git a/packages/docs/demos/Buttons/index.md b/packages/docs/demos/Buttons/index.md new file mode 100644 index 00000000..7d580d10 --- /dev/null +++ b/packages/docs/demos/Buttons/index.md @@ -0,0 +1,3 @@ +# Buttons Demo + + diff --git a/packages/docs/demos/Buttons/stories/app.twig b/packages/docs/demos/Buttons/stories/app.twig new file mode 100644 index 00000000..5fe35642 --- /dev/null +++ b/packages/docs/demos/Buttons/stories/app.twig @@ -0,0 +1,7 @@ +
+ + + View more + + +
From 6aa746eeb47499599b37ace025b6bb406b986673 Mon Sep 17 00:00:00 2001 From: Ludovic Janot Date: Thu, 7 Mar 2024 16:27:38 +0100 Subject: [PATCH 04/16] Add a FooterAnimation demmo --- packages/docs/demos/FooterAnimation/index.md | 11 ++++++ .../docs/demos/FooterAnimation/stories/app.js | 37 +++++++++++++++++++ .../demos/FooterAnimation/stories/app.twig | 22 +++++++++++ 3 files changed, 70 insertions(+) create mode 100644 packages/docs/demos/FooterAnimation/index.md create mode 100644 packages/docs/demos/FooterAnimation/stories/app.js create mode 100644 packages/docs/demos/FooterAnimation/stories/app.twig diff --git a/packages/docs/demos/FooterAnimation/index.md b/packages/docs/demos/FooterAnimation/index.md new file mode 100644 index 00000000..5ffba5be --- /dev/null +++ b/packages/docs/demos/FooterAnimation/index.md @@ -0,0 +1,11 @@ +# Footer Animation + +Animation de footer inspiré par [https://chriskalafatis.com/](https://chriskalafatis.com/) + + + diff --git a/packages/docs/demos/FooterAnimation/stories/app.js b/packages/docs/demos/FooterAnimation/stories/app.js new file mode 100644 index 00000000..b312d020 --- /dev/null +++ b/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); diff --git a/packages/docs/demos/FooterAnimation/stories/app.twig b/packages/docs/demos/FooterAnimation/stories/app.twig new file mode 100644 index 00000000..099034da --- /dev/null +++ b/packages/docs/demos/FooterAnimation/stories/app.twig @@ -0,0 +1,22 @@ +
+
+ +
+
+

+ Studio Meta +

+
+
+

+ Projects +

+
+
+

+ Let's get in touch +

+
+
+
From 5c8e1f066af8573b0cdc1a8b8f10edb217d75321 Mon Sep 17 00:00:00 2001 From: Ludovic Janot Date: Thu, 7 Mar 2024 16:27:48 +0100 Subject: [PATCH 05/16] Add TextStricky demo --- packages/docs/demos/TextSticky/index.md | 6 ++++ packages/docs/demos/TextSticky/stories/app.js | 31 +++++++++++++++++++ .../docs/demos/TextSticky/stories/app.twig | 27 ++++++++++++++++ 3 files changed, 64 insertions(+) create mode 100644 packages/docs/demos/TextSticky/index.md create mode 100644 packages/docs/demos/TextSticky/stories/app.js create mode 100644 packages/docs/demos/TextSticky/stories/app.twig diff --git a/packages/docs/demos/TextSticky/index.md b/packages/docs/demos/TextSticky/index.md new file mode 100644 index 00000000..df74a658 --- /dev/null +++ b/packages/docs/demos/TextSticky/index.md @@ -0,0 +1,6 @@ +# Text Sticky + + diff --git a/packages/docs/demos/TextSticky/stories/app.js b/packages/docs/demos/TextSticky/stories/app.js new file mode 100644 index 00000000..bdf9b777 --- /dev/null +++ b/packages/docs/demos/TextSticky/stories/app.js @@ -0,0 +1,31 @@ +import { Base, createApp } from '@studiometa/js-toolkit'; +import { + ScrollAnimationChild, + ScrollAnimationParent as ScrollAnimationParentCore, +} from '@studiometa/ui'; + +class ScrollAnimationParent extends ScrollAnimationParentCore { + static config = { + name: 'ScrollAnimationParent', + components: { + ScrollAnimationChild, + }, + }; + + scrolledInView(props) { + this.$children.ScrollAnimationChild.forEach((child) => { + child.scrolledInView(props); + }); + } +} + +class App extends Base { + static config = { + name: 'App', + components: { + ScrollAnimationParent, + } + }; +} + +createApp(App) diff --git a/packages/docs/demos/TextSticky/stories/app.twig b/packages/docs/demos/TextSticky/stories/app.twig new file mode 100644 index 00000000..b91b064a --- /dev/null +++ b/packages/docs/demos/TextSticky/stories/app.twig @@ -0,0 +1,27 @@ +
+
+ scroll down +
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos odio atque, ea + ipsam sequi velit consectetur debitis nobis, quo eveniet molestias, nam magnam cumque. + Maxime dolores deleniti eius iusto distinctio. +
+
+
+
+
+
From 5be186b66c2b5fb2302c874ce33f46ce907285a1 Mon Sep 17 00:00:00 2001 From: Ludovic Janot Date: Thu, 7 Mar 2024 16:28:09 +0100 Subject: [PATCH 06/16] Add SliderVertical Demo --- packages/docs/demos/SliderVertical/index.md | 7 ++ .../docs/demos/SliderVertical/stories/app.js | 78 +++++++++++++++++++ .../demos/SliderVertical/stories/app.twig | 64 +++++++++++++++ 3 files changed, 149 insertions(+) create mode 100644 packages/docs/demos/SliderVertical/index.md create mode 100644 packages/docs/demos/SliderVertical/stories/app.js create mode 100644 packages/docs/demos/SliderVertical/stories/app.twig diff --git a/packages/docs/demos/SliderVertical/index.md b/packages/docs/demos/SliderVertical/index.md new file mode 100644 index 00000000..3c46461c --- /dev/null +++ b/packages/docs/demos/SliderVertical/index.md @@ -0,0 +1,7 @@ +# Slider Vertical + + diff --git a/packages/docs/demos/SliderVertical/stories/app.js b/packages/docs/demos/SliderVertical/stories/app.js new file mode 100644 index 00000000..346dfbba --- /dev/null +++ b/packages/docs/demos/SliderVertical/stories/app.js @@ -0,0 +1,78 @@ +import { Base, createApp } from "@studiometa/js-toolkit"; +import { + domScheduler, + transform, + clamp, + map, + easeInQuad, + easeInQuart, + easeInOutQuad, + easeInOutQuart, +} from "@studiometa/js-toolkit/utils"; +import { + Figure, + Slider as SliderCore, + SliderBtn, + SliderDots, + SliderDrag, + SliderItem as SliderItemCore, +} from "@studiometa/ui"; + +class SliderItem extends SliderItemCore { + static config = { + refs: ["inner", "scale"], + }; + + render() { + domScheduler.read(() => { + const x = this.rect.x - this.$parent.getOriginByMode() + this.dampedX; + const scaleProgress = clamp(x / this.rect.width, -1, 1); + const scale = map(scaleProgress, -1, 1, 1, 1.4); + const clipProgress = clamp(x / this.rect.width, -1, 0) * -1; + const clipBottomLeft = map(easeInOutQuad(clipProgress), 1, 0, 0, 100); + const clipBottomRight = map(easeInOutQuart(clipProgress), 1, 0, 0, 100); + const clipPath = `polygon(0 0, 100% 0, 100% ${clipBottomRight}%, 0% ${clipBottomLeft}%)`; + domScheduler.write(() => { + transform(this.$refs.scale, { scale }); + this.$refs.inner.style.clipPath = clipPath; + }); + }); + } + + /** + * Consider slides to always be visible. + */ + willBeVisible() { + return true; + } + + /** + * Consider slides to always be visible. + */ + willBeFullyVisible() { + return true; + } +} + +class Slider extends SliderCore { + static config = { + components: { + SliderBtn, + SliderDots, + SliderDrag, + SliderItem, + }, + }; +} + +class App extends Base { + static config = { + name: "App", + components: { + Figure, + Slider, + }, + }; +} + +createApp(App); diff --git a/packages/docs/demos/SliderVertical/stories/app.twig b/packages/docs/demos/SliderVertical/stories/app.twig new file mode 100644 index 00000000..017dd5ea --- /dev/null +++ b/packages/docs/demos/SliderVertical/stories/app.twig @@ -0,0 +1,64 @@ +{% set slides = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] %} + + + +
+
+ {%- for slide in slides -%} +
+
+ + {% include '@ui/atoms/Figure/Figure.twig' with { + src: 'https://picsum.photos/800/600?rand=' ~ slide, + width: 800, + height: 600, + absolute: true, + fit: 'cover', + attr: { + data_option_enter_from: 'opacity-0 transform scale-110', + data_option_enter_active: 'transition duration-1000 ease-out-expo' + }, + inner_attr: { class: 'bg-vp-bg' }, + img_attr: { class: 'opacity-0 transform scale-110' } + } only %} + +
+
+ {%- endfor -%} +
+ +
+ {% include '@ui/atoms/Button/StyledButton.twig' with { + label: 'Previous', + attr: { data_component: 'SliderBtn', data_option_prev: true } + } %} + {% include '@ui/atoms/Button/StyledButton.twig' with { + label: 'Next', + attr: { data_component: 'SliderBtn', data_option_next: true } + } %} +
+ {% for slide in slides %} + + {% endfor %} +
+
+
+ +
From e171a020a0433bbe78256ebdef22629b8d0b1f11 Mon Sep 17 00:00:00 2001 From: Ludovic Janot Date: Thu, 7 Mar 2024 16:28:20 +0100 Subject: [PATCH 07/16] Add a SliderMaquee demo --- packages/docs/demos/SliderMarquee/index.md | 3 +++ .../docs/demos/SliderMarquee/stories/app.css | 19 +++++++++++++++ .../docs/demos/SliderMarquee/stories/app.twig | 23 +++++++++++++++++++ 3 files changed, 45 insertions(+) create mode 100644 packages/docs/demos/SliderMarquee/index.md create mode 100644 packages/docs/demos/SliderMarquee/stories/app.css create mode 100644 packages/docs/demos/SliderMarquee/stories/app.twig diff --git a/packages/docs/demos/SliderMarquee/index.md b/packages/docs/demos/SliderMarquee/index.md new file mode 100644 index 00000000..d43b8872 --- /dev/null +++ b/packages/docs/demos/SliderMarquee/index.md @@ -0,0 +1,3 @@ +# Slider Marquee + + diff --git a/packages/docs/demos/SliderMarquee/stories/app.css b/packages/docs/demos/SliderMarquee/stories/app.css new file mode 100644 index 00000000..b575da1d --- /dev/null +++ b/packages/docs/demos/SliderMarquee/stories/app.css @@ -0,0 +1,19 @@ +body { + height: 100vh; + display: grid; + place-items: center; +} + +@keyframes marquee { + 0% { + transform: translateX(0); + } + + to { + transform: translateX(-100%); + } +} + +.marquee { + animation: marquee 20s linear infinite; +} diff --git a/packages/docs/demos/SliderMarquee/stories/app.twig b/packages/docs/demos/SliderMarquee/stories/app.twig new file mode 100644 index 00000000..7a182ad5 --- /dev/null +++ b/packages/docs/demos/SliderMarquee/stories/app.twig @@ -0,0 +1,23 @@ +
+
+
+ {% for item in 0..4 %} + + {% endfor %} +
+
+ {% for item in 0..4 %} + + {% endfor %} +
+
+
From 69190480ab2dbeca9f27ee1926ebafaf83a1d42a Mon Sep 17 00:00:00 2001 From: Ludovic Janot Date: Thu, 7 Mar 2024 16:28:31 +0100 Subject: [PATCH 08/16] Add a SliderCSS demo --- packages/docs/demos/SliderCSS/index.md | 8 +++ packages/docs/demos/SliderCSS/stories/app.js | 66 +++++++++++++++++++ .../docs/demos/SliderCSS/stories/app.twig | 53 +++++++++++++++ 3 files changed, 127 insertions(+) create mode 100644 packages/docs/demos/SliderCSS/index.md create mode 100644 packages/docs/demos/SliderCSS/stories/app.js create mode 100644 packages/docs/demos/SliderCSS/stories/app.twig diff --git a/packages/docs/demos/SliderCSS/index.md b/packages/docs/demos/SliderCSS/index.md new file mode 100644 index 00000000..2cc0d47d --- /dev/null +++ b/packages/docs/demos/SliderCSS/index.md @@ -0,0 +1,8 @@ +# Slider CSS + + diff --git a/packages/docs/demos/SliderCSS/stories/app.js b/packages/docs/demos/SliderCSS/stories/app.js new file mode 100644 index 00000000..7a7557d4 --- /dev/null +++ b/packages/docs/demos/SliderCSS/stories/app.js @@ -0,0 +1,66 @@ +import { Base, createApp } from '@studiometa/js-toolkit'; +import { compute } from 'https://esm.sh/compute-scroll-into-view'; + +class App extends Base { + static config = { + name: 'App', + refs: ['wrapper', 'items[]', 'prev', 'next'], + }; + + index = 0; + + get prevIndex() { + return Math.max(this.index - 1, 0); + } + + get nextIndex() { + return Math.min(this.index + 1, this.lastIndex); + } + + get lastIndex() { + return this.$refs.items.length - 1; + } + + mounted() { + this.goTo(this.index); + } + + onItemsClick(event, index) { + this.goTo(index); + } + + goPrev() { + this.goTo(this.prevIndex); + } + + goNext() { + this.goTo(this.nextIndex); + } + + goTo(index) { + this.index = index; + const currentItem = this.$refs.items[index]; + this.$refs.items.forEach(item => { + const method = item === currentItem ? 'add' : 'remove'; + item.classList[method]('ring'); + }) + const action = compute(currentItem, { block: 'nearest', inline: 'center' }).find((action) => action.el === this.$refs.wrapper); + if (action) { + action.el.scrollTo({ left: action.left, behavior: 'smooth' }); + } + } + + resized() { + this.goTo(this.index); + } + + onPrevClick() { + this.goPrev(); + } + + onNextClick() { + this.goNext(); + } +} + +createApp(App) diff --git a/packages/docs/demos/SliderCSS/stories/app.twig b/packages/docs/demos/SliderCSS/stories/app.twig new file mode 100644 index 00000000..a2610d48 --- /dev/null +++ b/packages/docs/demos/SliderCSS/stories/app.twig @@ -0,0 +1,53 @@ +{# + /** + * Slider with CSS and JS native features: + * - CSS scroll snap + * - CSS pointer media query + * - JS scrollIntoView + * + * To-do: + * - [ ] Update index when scrolled horizontally on touch device + * - [ ] Implement bullets + * - [ ] Implement drag on non-touch devices + * - [ ] Create components for each part: Wrapper, Item, Prev, Next, etc. + */ +#} + +{% set colors = ['red', 'green', 'blue', 'purple'] %} +{% set sizes = ['20', '30', '40'] %} +
+ Scroll down
+ ↓ +
+
+ {% for i in 1..10 %} + {% set color = colors[loop.index0 % (colors|length)] %} + {% set width = sizes[loop.index0 % (sizes|length)] %} + {% set height = sizes[loop.index % (sizes|length)] %} +
+ N°{{ i }} +
+ {% endfor %} +
+ +
+ ↑
+ Scroll up +
+ + From bd572e382eba8ee95519a607c899954cc8cecc31 Mon Sep 17 00:00:00 2001 From: Ludovic Janot Date: Thu, 7 Mar 2024 16:28:39 +0100 Subject: [PATCH 09/16] Add a ShareButton demo --- packages/docs/demos/ShareButton/index.md | 6 ++++ .../docs/demos/ShareButton/stories/app.js | 29 +++++++++++++++++++ .../docs/demos/ShareButton/stories/app.twig | 6 ++++ 3 files changed, 41 insertions(+) create mode 100644 packages/docs/demos/ShareButton/index.md create mode 100644 packages/docs/demos/ShareButton/stories/app.js create mode 100644 packages/docs/demos/ShareButton/stories/app.twig diff --git a/packages/docs/demos/ShareButton/index.md b/packages/docs/demos/ShareButton/index.md new file mode 100644 index 00000000..78d7477d --- /dev/null +++ b/packages/docs/demos/ShareButton/index.md @@ -0,0 +1,6 @@ +# Share Button + + diff --git a/packages/docs/demos/ShareButton/stories/app.js b/packages/docs/demos/ShareButton/stories/app.js new file mode 100644 index 00000000..89e5bf28 --- /dev/null +++ b/packages/docs/demos/ShareButton/stories/app.js @@ -0,0 +1,29 @@ +import { Base, createApp } from '@studiometa/js-toolkit'; +import { wait } from '@studiometa/js-toolkit/utils'; + +class Share extends Base { + static config = { + name: 'Share', + }; + + async onClick() { + navigator.clipboard.writeText(window.parent?.location.href); + const { textContent } = this.$el; + this.$el.disabled = true; + this.$el.textContent = 'URL copiée dans votre clipboard !'; + await wait(1000); + this.$el.textContent = textContent; + this.$el.disabled = false; + } +} + +class App extends Base { + static config = { + name: 'App', + components: { + Share, + }, + }; +} + +createApp(App); diff --git a/packages/docs/demos/ShareButton/stories/app.twig b/packages/docs/demos/ShareButton/stories/app.twig new file mode 100644 index 00000000..06821fdd --- /dev/null +++ b/packages/docs/demos/ShareButton/stories/app.twig @@ -0,0 +1,6 @@ +
+ {% include '@ui/atoms/Button/StyledButton.twig' with { + label: 'Partager cette page', + attr: { data_component: 'Share' } + } %} +
From 25a79b611e1470a60ff8b0f6ab1033f751366ad5 Mon Sep 17 00:00:00 2001 From: Ludovic Janot Date: Thu, 7 Mar 2024 16:28:52 +0100 Subject: [PATCH 10/16] Add SectionAnimation demo --- packages/docs/demos/SectionAnimation/index.md | 9 +++++++ .../demos/SectionAnimation/stories/app.js | 13 +++++++++ .../demos/SectionAnimation/stories/app.twig | 27 +++++++++++++++++++ 3 files changed, 49 insertions(+) create mode 100644 packages/docs/demos/SectionAnimation/index.md create mode 100644 packages/docs/demos/SectionAnimation/stories/app.js create mode 100644 packages/docs/demos/SectionAnimation/stories/app.twig diff --git a/packages/docs/demos/SectionAnimation/index.md b/packages/docs/demos/SectionAnimation/index.md new file mode 100644 index 00000000..c360e06e --- /dev/null +++ b/packages/docs/demos/SectionAnimation/index.md @@ -0,0 +1,9 @@ +# Sections Animation + + diff --git a/packages/docs/demos/SectionAnimation/stories/app.js b/packages/docs/demos/SectionAnimation/stories/app.js new file mode 100644 index 00000000..ae37a6a3 --- /dev/null +++ b/packages/docs/demos/SectionAnimation/stories/app.js @@ -0,0 +1,13 @@ +import { Base, createApp } from 'https://cdn.skypack.dev/@studiometa/js-toolkit'; +import { ScrollAnimationWithEase } from 'https://cdn.skypack.dev/@studiometa/ui'; + +class App extends Base { + static config = { + name: 'App', + components: { + ScrollAnimationWithEase, + } + }; +} + +createApp(App) diff --git a/packages/docs/demos/SectionAnimation/stories/app.twig b/packages/docs/demos/SectionAnimation/stories/app.twig new file mode 100644 index 00000000..a2718c1c --- /dev/null +++ b/packages/docs/demos/SectionAnimation/stories/app.twig @@ -0,0 +1,27 @@ +{% set list = [ + { name: 'About', bg: 'green-400' }, + { name: 'Team', bg: 'blue-400' }, + { name: 'Project', bg: 'purple-400' }, + { name: 'Contact', bg: 'green-400' }, + { name: 'Title', bg: 'red-400' }, + { name: 'Lorem ipsum', bg: 'cyan-400' } +] %} + +{% for item in list %} +
+
+ +
+

+ {{ item.name }} +

+
+
+{% endfor %} From 839c7ebfe9a48a75182e6c2f99eed83a82832e4a Mon Sep 17 00:00:00 2001 From: Ludovic Janot Date: Thu, 7 Mar 2024 16:29:02 +0100 Subject: [PATCH 11/16] Add ListParallax Demo --- packages/docs/demos/ListParallax/index.md | 6 +++ .../docs/demos/ListParallax/stories/app.js | 25 ++++++++++ .../docs/demos/ListParallax/stories/app.twig | 50 +++++++++++++++++++ 3 files changed, 81 insertions(+) create mode 100644 packages/docs/demos/ListParallax/index.md create mode 100644 packages/docs/demos/ListParallax/stories/app.js create mode 100644 packages/docs/demos/ListParallax/stories/app.twig diff --git a/packages/docs/demos/ListParallax/index.md b/packages/docs/demos/ListParallax/index.md new file mode 100644 index 00000000..9d42f55c --- /dev/null +++ b/packages/docs/demos/ListParallax/index.md @@ -0,0 +1,6 @@ +# List Parallax + + diff --git a/packages/docs/demos/ListParallax/stories/app.js b/packages/docs/demos/ListParallax/stories/app.js new file mode 100644 index 00000000..895a093a --- /dev/null +++ b/packages/docs/demos/ListParallax/stories/app.js @@ -0,0 +1,25 @@ +import { Base, createApp } from 'https://cdn.skypack.dev/@studiometa/js-toolkit'; +import { ScrollAnimation } from 'https://cdn.skypack.dev/@studiometa/ui'; + +class Parallax extends ScrollAnimation { + get $options() { + return { + ...super.$options, + from: { y: 0 }, + to: { y: [-10, '%'] }, + offset: 'start start / end end' + }; + } +} + +class App extends Base { + static config = { + name: 'App', + components: { + ScrollAnimation, + Parallax, + }, + }; +} + +createApp(App); diff --git a/packages/docs/demos/ListParallax/stories/app.twig b/packages/docs/demos/ListParallax/stories/app.twig new file mode 100644 index 00000000..cabefc44 --- /dev/null +++ b/packages/docs/demos/ListParallax/stories/app.twig @@ -0,0 +1,50 @@ +{% set heights = ['96', '48', '72', '64'] %} +{% set colors = ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'] %} +{% set directions = ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl'] %} + +
+
+ {% for i in 1..10 %} + {% set from = random(colors) %} + {% set to = random(colors) %} + {% set via = random(colors|filter(v => v != from and v != to)) %} +
+
+
+ {% endfor %} +
+
+
+ {% for i in 1..10 %} + {% set from = random(colors) %} + {% set to = random(colors) %} + {% set via = random(colors|filter(v => v != from and v != to)) %} +
+
+
+ {% endfor %} +
+
+
From f320c4f6e863957f1f186bd51785f042c58f415f Mon Sep 17 00:00:00 2001 From: Ludovic Janot Date: Thu, 7 Mar 2024 16:29:12 +0100 Subject: [PATCH 12/16] Add ListAnimation demo --- packages/docs/demos/ListAnimation/index.md | 6 +++++ .../docs/demos/ListAnimation/stories/app.css | 25 +++++++++++++++++++ .../docs/demos/ListAnimation/stories/app.twig | 11 ++++++++ 3 files changed, 42 insertions(+) create mode 100644 packages/docs/demos/ListAnimation/index.md create mode 100644 packages/docs/demos/ListAnimation/stories/app.css create mode 100644 packages/docs/demos/ListAnimation/stories/app.twig diff --git a/packages/docs/demos/ListAnimation/index.md b/packages/docs/demos/ListAnimation/index.md new file mode 100644 index 00000000..cb0ee060 --- /dev/null +++ b/packages/docs/demos/ListAnimation/index.md @@ -0,0 +1,6 @@ +# List Animation + + diff --git a/packages/docs/demos/ListAnimation/stories/app.css b/packages/docs/demos/ListAnimation/stories/app.css new file mode 100644 index 00000000..3a786812 --- /dev/null +++ b/packages/docs/demos/ListAnimation/stories/app.css @@ -0,0 +1,25 @@ +.link { + transition-duration: 500ms; +} + +.link:hover { + transform: scale(1.25); + transition-duration: 500ms; + box-shadow: 0 0 15px hsl(280, 20%, 20%, 0.5); + filter: brightness(145%); +} + +/* + 1 */ + .link:hover + .link { + transform: scale(1.1); + transition-duration: 1s; + transition-delay: 0.05s; + } + + +/* - 1 */ +.link:has(+ .link:hover) { + transform: scale(1.1); + transition-duration: 1s; + transition-delay: 0.05s; +} diff --git a/packages/docs/demos/ListAnimation/stories/app.twig b/packages/docs/demos/ListAnimation/stories/app.twig new file mode 100644 index 00000000..38e31af4 --- /dev/null +++ b/packages/docs/demos/ListAnimation/stories/app.twig @@ -0,0 +1,11 @@ +{% set list = ['about', 'team', 'project', 'blog', 'jobs', 'contact'] %} + +
+
    + {% for item in list %} +
  • + {{ item }} +
    • + {% endfor %} +
+
From 29f1583f15e1ff22bca8e690bf55b443159f8a90 Mon Sep 17 00:00:00 2001 From: Ludovic Janot Date: Thu, 7 Mar 2024 16:29:30 +0100 Subject: [PATCH 13/16] Add ImageGallery demo --- packages/docs/demos/ImageGallery/index.md | 7 ++ .../docs/demos/ImageGallery/stories/app.css | 15 ++++ .../docs/demos/ImageGallery/stories/app.js | 11 +++ .../docs/demos/ImageGallery/stories/app.twig | 72 +++++++++++++++++++ 4 files changed, 105 insertions(+) create mode 100644 packages/docs/demos/ImageGallery/index.md create mode 100644 packages/docs/demos/ImageGallery/stories/app.css create mode 100644 packages/docs/demos/ImageGallery/stories/app.js create mode 100644 packages/docs/demos/ImageGallery/stories/app.twig diff --git a/packages/docs/demos/ImageGallery/index.md b/packages/docs/demos/ImageGallery/index.md new file mode 100644 index 00000000..0285f69b --- /dev/null +++ b/packages/docs/demos/ImageGallery/index.md @@ -0,0 +1,7 @@ +# Image gallery + + diff --git a/packages/docs/demos/ImageGallery/stories/app.css b/packages/docs/demos/ImageGallery/stories/app.css new file mode 100644 index 00000000..bbd862a2 --- /dev/null +++ b/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; } diff --git a/packages/docs/demos/ImageGallery/stories/app.js b/packages/docs/demos/ImageGallery/stories/app.js new file mode 100644 index 00000000..b3550140 --- /dev/null +++ b/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; + } +}); diff --git a/packages/docs/demos/ImageGallery/stories/app.twig b/packages/docs/demos/ImageGallery/stories/app.twig new file mode 100644 index 00000000..c07314c3 --- /dev/null +++ b/packages/docs/demos/ImageGallery/stories/app.twig @@ -0,0 +1,72 @@ + +
+ #0
+ +
+
+ +
+ #1
+ +
+
+ +
+ #2
+ +
+
+ +
+ #3
+ +
+
+ +
+ #4
+ +
+
+ +
+ #5
+ +
+
+ + +
+ #1
+ +
+
From 8419a1fa9b0f5def094ae7b3120fa5e3a0b1c803 Mon Sep 17 00:00:00 2001 From: Ludovic Janot Date: Thu, 7 Mar 2024 16:29:40 +0100 Subject: [PATCH 14/16] Add HorizontalSticky demo --- packages/docs/demos/HorizontalSticky/index.md | 6 +++ .../demos/HorizontalSticky/stories/app.js | 19 ++++++++ .../demos/HorizontalSticky/stories/app.twig | 46 +++++++++++++++++++ 3 files changed, 71 insertions(+) create mode 100644 packages/docs/demos/HorizontalSticky/index.md create mode 100644 packages/docs/demos/HorizontalSticky/stories/app.js create mode 100644 packages/docs/demos/HorizontalSticky/stories/app.twig diff --git a/packages/docs/demos/HorizontalSticky/index.md b/packages/docs/demos/HorizontalSticky/index.md new file mode 100644 index 00000000..ca6e964c --- /dev/null +++ b/packages/docs/demos/HorizontalSticky/index.md @@ -0,0 +1,6 @@ +# Horizontal Sticky + + diff --git a/packages/docs/demos/HorizontalSticky/stories/app.js b/packages/docs/demos/HorizontalSticky/stories/app.js new file mode 100644 index 00000000..70754c30 --- /dev/null +++ b/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, + }, +}); diff --git a/packages/docs/demos/HorizontalSticky/stories/app.twig b/packages/docs/demos/HorizontalSticky/stories/app.twig new file mode 100644 index 00000000..09d14bbc --- /dev/null +++ b/packages/docs/demos/HorizontalSticky/stories/app.twig @@ -0,0 +1,46 @@ +{% set total = 10 %} + +
+ Scroll down +
+
+
+ {% for index in 1..total %} +
+
+
+
+ {% 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' } + } %} +
+
+
+
+ {% endfor %} +
+
+
+ Scroll up +
From 4cf2273839425a92c478eb17ee93f3c446eab1c4 Mon Sep 17 00:00:00 2001 From: Ludovic Janot Date: Fri, 8 Mar 2024 13:32:46 +0100 Subject: [PATCH 15/16] Remove an unused twig variable in SliderVertical demo template --- packages/docs/demos/SliderVertical/stories/app.twig | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/docs/demos/SliderVertical/stories/app.twig b/packages/docs/demos/SliderVertical/stories/app.twig index 017dd5ea..842ab99b 100644 --- a/packages/docs/demos/SliderVertical/stories/app.twig +++ b/packages/docs/demos/SliderVertical/stories/app.twig @@ -15,9 +15,7 @@ class="z-[{{ (slides|length) - loop.index - }}] absolute inset-0 flex items-center justify-center {{ - width - }} h-[400px] bg-gray-200 overflow-hidden"> + }}] absolute inset-0 flex items-center justify-center h-[400px] bg-gray-200 overflow-hidden"> {% include '@ui/atoms/Figure/Figure.twig' with { src: 'https://picsum.photos/800/600?rand=' ~ slide, From 382ecb86af437753349c6c72dd2913ba742a2864 Mon Sep 17 00:00:00 2001 From: Ludovic Janot Date: Fri, 8 Mar 2024 13:33:49 +0100 Subject: [PATCH 16/16] Update CHANGELOG --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index acabc5d9..402b810a 100644 --- a/CHANGELOG.md +++ b/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))