From 5db739c1e1ba318e0affa69a8d6913d01520e220 Mon Sep 17 00:00:00 2001
From: Javi Aguilar <122741+itsjavi@users.noreply.github.com>
Date: Sat, 19 Oct 2024 19:17:19 +0200
Subject: [PATCH] docs: show readme as storybook home

---
 .storybook/home.mdx |  6 ++++++
 .storybook/main.ts  | 12 +++++++++++-
 .storybook/theme.ts |  2 +-
 README.md           |  2 ++
 package.json        |  7 +------
 pnpm-lock.yaml      |  3 +++
 6 files changed, 24 insertions(+), 8 deletions(-)
 create mode 100644 .storybook/home.mdx

diff --git a/.storybook/home.mdx b/.storybook/home.mdx
new file mode 100644
index 0000000..b99fb7f
--- /dev/null
+++ b/.storybook/home.mdx
@@ -0,0 +1,6 @@
+import { Markdown, Meta } from '@storybook/blocks'
+import README from '../README.md?raw'
+
+<Meta title="About/README" />
+
+<Markdown>{README}</Markdown>
diff --git a/.storybook/main.ts b/.storybook/main.ts
index 122e0e1..3b4774f 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,13 +1,23 @@
 import type { StorybookConfig } from '@storybook/react-vite'
 
 const config: StorybookConfig = {
-  stories: ['../stories/**/*.@(mdx)', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: ['./home.mdx', '../stories/**/*.@(mdx)', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-themes',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        csfPluginOptions: null,
+        mdxPluginOptions: {},
+      },
+    },
   ],
+  docs: {
+    defaultName: 'docs',
+  },
   framework: {
     name: '@storybook/react-vite',
     options: {},
diff --git a/.storybook/theme.ts b/.storybook/theme.ts
index 344b128..24a5f41 100644
--- a/.storybook/theme.ts
+++ b/.storybook/theme.ts
@@ -3,7 +3,7 @@ import { create } from '@storybook/theming/create'
 // @see https://storybook.js.org/docs/configure/user-interface/theming#create-a-theme-quickstart
 export default create({
   base: 'dark',
-  brandTitle: 'Glassmorphic shadcn/ui',
+  brandTitle: 'glasscn-ui',
   brandUrl: 'https://github.com/itsjavi/glasscn-ui',
   brandTarget: '_blank',
   brandImage: undefined, //url
diff --git a/README.md b/README.md
index bbc3696..dd705ff 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,8 @@
 # glasscn-ui
 
+![GitHub](https://img.shields.io/github/stars/itsjavi/glasscn-ui?style=flat-square&label=GitHub&logo=github)
 ![NPM](https://img.shields.io/npm/v/glasscn-ui)
+![License](https://img.shields.io/github/license/itsjavi/glasscn-ui?label=License)
 
 Themable shadcn/ui component library with glassmorphism variants, and extra components like the Circular Progress.
 
diff --git a/package.json b/package.json
index 601852c..893f407 100644
--- a/package.json
+++ b/package.json
@@ -80,6 +80,7 @@
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^19.5.0",
+    "@storybook/addon-docs": "^8.3.6",
     "@storybook/addon-essentials": "^8.3.6",
     "@storybook/addon-interactions": "^8.3.6",
     "@storybook/addon-links": "^8.3.6",
@@ -120,11 +121,5 @@
   "packageManager": "pnpm@9.12.2",
   "publishConfig": {
     "access": "public"
-  },
-  "overrides": {
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "react": "^18",
-    "react-dom": "^18"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 29e6f90..7f38579 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -114,6 +114,9 @@ importers:
       '@commitlint/config-conventional':
         specifier: ^19.5.0
         version: 19.5.0
+      '@storybook/addon-docs':
+        specifier: ^8.3.6
+        version: 8.3.6(storybook@8.3.6)
       '@storybook/addon-essentials':
         specifier: ^8.3.6
         version: 8.3.6(storybook@8.3.6)