Add an exemple of usage for the sticky table of content

packages/docs/components/molecules/StickyTableOfContent/examples.md

@@ -0,0 +1,10 @@
+---
+outline: deep
+---
+
+# Examples
+
+<PreviewPlayground
+  :html="() => import('./stories/app.twig')"
+  :script="() => import('./stories/app.js?raw')"
+/>

packages/docs/components/molecules/StickyTableOfContent/index.md

@@ -0,0 +1,11 @@
+# StickyTable <Badges :texts="badges" />
+
+<script setup>
+  import pkg from '@studiometa/ui/molecules/StickyTable/package.json';
+  const badges = [`v${pkg.version}`, 'Twig'];
+</script>
+
+## Table of content
+
+- [Examples](./examples)
+- [Twig API](./twig-api)

packages/docs/components/molecules/StickyTableOfContent/js-api.md

@@ -0,0 +1,5 @@
+---
+title: Slider JS API
+---
+
+# JS API (todo)

packages/docs/components/molecules/StickyTableOfContent/stories/app.js

@@ -0,0 +1,33 @@
+/* eslint-disable max-classes-per-file */
+import { Base, createApp } from '@studiometa/js-toolkit';
+import {
+  StickyTable as StickyTableCore,
+  StickyTableItem,
+  StickyTableSection,
+} from '@studiometa/ui';
+
+/**
+ *
+ */
+class StickyTable extends StickyTableCore {
+  static config = {
+    components: {
+      StickyTableItem,
+      StickyTableSection,
+    },
+  };
+}
+
+/**
+ *
+ */
+class App extends Base {
+  static config = {
+    name: 'App',
+    components: {
+      StickyTable,
+    },
+  };
+}
+
+createApp(App, document.body);

packages/docs/components/molecules/StickyTableOfContent/stories/app.twig

@@ -0,0 +1,18 @@
+<style type="text/css">
+  .current {
+    color: red;
+  }
+</style>
+
+<div data-component="StickyTable" class="flex items-start">
+  <div class="bg-blue-200 w-1/3 sticky top-4">
+    <div data-component="StickyTableItem" data-option-id="item-1"> item-1 </div>
+    <div data-component="StickyTableItem" data-option-id="item-2"> item-2</div>
+    <div data-component="StickyTableItem" data-option-id="item-3"> item-3</div>
+  </div>
+  <div data-component="StickyTableSection" class="bg-green-200 w-2/3 h-[300vh]">
+    <div class="h-1/3" data-ref="item[]" id="item-1">Item1</div>
+    <div class="h-1/3" data-ref="item[]" id="item-2">Item2</div>
+    <div class="h-1/3" data-ref="item[]" id="item-3">Item3</div>
+  </div>
+</div>