From 903f12c9299a12e668aac9fa473de244b84e1c24 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tlacaelel=20Leon=20Villase=C3=B1or?= <radeon777@live.com>
Date: Fri, 17 Apr 2026 11:09:37 -0600
Subject: [PATCH] build(storybook): add mdx documentation to skeleton

---
 libs/components/.storybook/main.js            |  5 +-
 .../button/{Overview.mdx => _Overview.mdx}    |  0
 .../dialog/{Overview.mdx => _Overview.mdx}    |  3 ++
 .../{Overview.mdx => _Overview.mdx}           |  0
 .../src/list/{Overview.mdx => _Overview.mdx}  |  0
 libs/components/src/skeleton/Overview.mdx     | 49 +++++++++++++++++++
 .../src/skeleton/skeleton.stories.js          |  1 -
 .../src/tab/{Overview.mdx => _Overview.mdx}   |  0
 8 files changed, 56 insertions(+), 2 deletions(-)
 rename libs/components/src/button/{Overview.mdx => _Overview.mdx} (100%)
 rename libs/components/src/dialog/{Overview.mdx => _Overview.mdx} (99%)
 rename libs/components/src/expansion-panel/{Overview.mdx => _Overview.mdx} (100%)
 rename libs/components/src/list/{Overview.mdx => _Overview.mdx} (100%)
 create mode 100644 libs/components/src/skeleton/Overview.mdx
 rename libs/components/src/tab/{Overview.mdx => _Overview.mdx} (100%)

diff --git a/libs/components/.storybook/main.js b/libs/components/.storybook/main.js
index 1356b17f3e..de904d71f8 100644
--- a/libs/components/.storybook/main.js
+++ b/libs/components/.storybook/main.js
@@ -2,7 +2,10 @@ const rootMain = require('../../../.storybook/main.js');
 const { mergeConfig } = require('vite');
 
 // Use the following syntax to add addons!
-((rootMain.stories = ['../**/*.stories.@(js|jsx|ts|tsx|mdx)']),
+((rootMain.stories = [
+  '../**/*.stories.@(js|jsx|ts|tsx)',
+  '../**/Overview.mdx',
+]),
   (rootMain.core = { builder: '@storybook/builder-vite' }));
 module.exports = {
   ...rootMain,
diff --git a/libs/components/src/button/Overview.mdx b/libs/components/src/button/_Overview.mdx
similarity index 100%
rename from libs/components/src/button/Overview.mdx
rename to libs/components/src/button/_Overview.mdx
diff --git a/libs/components/src/dialog/Overview.mdx b/libs/components/src/dialog/_Overview.mdx
similarity index 99%
rename from libs/components/src/dialog/Overview.mdx
rename to libs/components/src/dialog/_Overview.mdx
index 8e2f76e7ad..4a427561ad 100644
--- a/libs/components/src/dialog/Overview.mdx
+++ b/libs/components/src/dialog/_Overview.mdx
@@ -18,6 +18,7 @@ import * as DialogStories from './dialog.stories';
 {/* <Story id="components-dialog--anatomy" /> is deprecated, please migrate it to <Story of={referenceToStory} /> see: https://storybook.js.org/migration-guides/7.0 */}
 
 {' '}
+
 <Story id="components-dialog--anatomy" />
 
 ---
@@ -29,6 +30,7 @@ import * as DialogStories from './dialog.stories';
 {/* <Story id="components-dialog--logout" /> is deprecated, please migrate it to <Story of={referenceToStory} /> see: https://storybook.js.org/migration-guides/7.0 */}
 
 {' '}
+
 <Story id="components-dialog--logout" />
 
 ### Destructive dialog
@@ -36,4 +38,5 @@ import * as DialogStories from './dialog.stories';
 {/* <Story id="components-dialog--udf" /> is deprecated, please migrate it to <Story of={referenceToStory} /> see: https://storybook.js.org/migration-guides/7.0 */}
 
 {' '}
+
 <Story id="components-dialog--udf" />
diff --git a/libs/components/src/expansion-panel/Overview.mdx b/libs/components/src/expansion-panel/_Overview.mdx
similarity index 100%
rename from libs/components/src/expansion-panel/Overview.mdx
rename to libs/components/src/expansion-panel/_Overview.mdx
diff --git a/libs/components/src/list/Overview.mdx b/libs/components/src/list/_Overview.mdx
similarity index 100%
rename from libs/components/src/list/Overview.mdx
rename to libs/components/src/list/_Overview.mdx
diff --git a/libs/components/src/skeleton/Overview.mdx b/libs/components/src/skeleton/Overview.mdx
new file mode 100644
index 0000000000..05c95303a7
--- /dev/null
+++ b/libs/components/src/skeleton/Overview.mdx
@@ -0,0 +1,49 @@
+import { Canvas, Meta, Source } from '@storybook/addon-docs/blocks';
+import { useDarkMode } from '@vueless/storybook-dark-mode';
+import * as SkeletonStories from './skeleton.stories';
+
+export const DarkSource = (props) => {
+  const isDark = useDarkMode();
+  return <Source {...props} dark={isDark} />;
+};
+
+<Meta of={SkeletonStories} />
+
+# Skeleton
+
+These examples use [skeleton-elements](https://skeleton-elements.nolimits4web.com/) — a third-party
+library for skeleton screen / ghost element effects. The stories below show how to integrate it.
+
+---
+
+## Setup
+
+**1. Install**
+
+<DarkSource language="bash" code="npm install skeleton-elements" />
+
+**2. Import styles**
+
+<DarkSource language="js" code="import 'skeleton-elements/css';" />
+
+**3. Apply classes to your markup**
+
+<DarkSource
+  language="html"
+  code={`<p class="skeleton-text skeleton-effect-fade">Loading…</p>
+<div class="skeleton-block skeleton-effect-wave" style="height: 200px;"></div>`}
+/>
+
+Effect modifiers: `skeleton-effect-fade` · `skeleton-effect-wave` · `skeleton-effect-pulse`
+
+---
+
+## STORIES
+
+<Canvas of={SkeletonStories.DataTable} />
+
+<Canvas of={SkeletonStories.Typography} />
+
+<Canvas of={SkeletonStories.Content} />
+
+<Canvas of={SkeletonStories.Checkbox} />
diff --git a/libs/components/src/skeleton/skeleton.stories.js b/libs/components/src/skeleton/skeleton.stories.js
index 4a5cfbbc95..76862b35cb 100644
--- a/libs/components/src/skeleton/skeleton.stories.js
+++ b/libs/components/src/skeleton/skeleton.stories.js
@@ -9,7 +9,6 @@ import 'skeleton-elements/css';
 
 export default {
   title: 'Components/Skeleton',
-  tags: ['autodocs'],
 };
 
 const skeletonClsName = 'skeleton-text';
diff --git a/libs/components/src/tab/Overview.mdx b/libs/components/src/tab/_Overview.mdx
similarity index 100%
rename from libs/components/src/tab/Overview.mdx
rename to libs/components/src/tab/_Overview.mdx