Merge pull request #54 from DouglasNeuroInformatics/dev

docs: add index page and move instructions to site

Author: joshunrau

.storybook/index.mdx

@@ -0,0 +1,60 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Welcome" />
+
+# Welcome to the Douglasneuroinformatics UI Library
+
+This library includes generic UI components built using shadcn/ui with React and TailwindCSS.
+
+## 🚀 Getting Started
+
+## Installation
+
+```sh
+pnpm install @douglasneuroinformatics/libui
+```
+
+## Usage
+
+**globals.css**
+
+```css
+@import '@douglasneuroinformatics/libui/tailwind/globals.css';
+
+// adjust as required
+@source "../node_modules/@douglasneuroinformatics/libui";
+```
+
+**i18n.ts**
+
+```ts
+import { init } from '@douglasneuroinformatics/libui/i18n';
+
+import common from './common.json';
+
+declare module '@douglasneuroinformatics/libui/i18n' {
+  export namespace UserConfig {
+    export interface LanguageOptions {
+      en: true;
+      es: true;
+      fr: true;
+    }
+    export interface Translations {
+      common: typeof common;
+    }
+  }
+}
+
+init({ translations: { common } });
+```
+
+**main.tsx**
+
+```js
+import './globals.css';
+import './i18n';
+```
+
+## 📚 Available Components
+
+Browse the sidebar to view all available components.

.storybook/main.ts

@@ -1,7 +1,12 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
+  addons: [
+    '@storybook/addon-docs',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions'
+  ],
   core: {
     disableTelemetry: true
   },
@@ -14,7 +19,7 @@ const config: StorybookConfig = {
       strictMode: true
     }
   },
-  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['./index.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   typescript: {
     reactDocgen: 'react-docgen-typescript'
   }

README.md

@@ -33,52 +33,9 @@
 
 A React component library built by the Douglas Neuroinformatics Platform (DNP) using [shadcn/ui](https://github.com/shadcn-ui/ui) with [React](https://react.dev/) and [TailwindCSS](https://tailwindcss.com/). Although primarily intended for internal use in our platforms, it is designed as a generic implementation.
 
-## Installation
+## Documentation
 
-```sh
-pnpm install @douglasneuroinformatics/libui
-```
-
-## Usage
-
-**globals.css**
-
-```css
-@import '@douglasneuroinformatics/libui/tailwind/globals.css';
-
-// adjust as required
-@source "../node_modules/@douglasneuroinformatics/libui";
-```
-
-**i18n.ts**
-
-```ts
-import { init } from '@douglasneuroinformatics/libui/i18n';
-
-import common from './common.json';
-
-declare module '@douglasneuroinformatics/libui/i18n' {
-  export namespace UserConfig {
-    export interface LanguageOptions {
-      en: true;
-      es: true;
-      fr: true;
-    }
-    export interface Translations {
-      common: typeof common;
-    }
-  }
-}
-
-init({ translations: { common } });
-```
-
-**main.tsx**
-
-```js
-import './globals.css';
-import './i18n';
-```
+For detailed installation, configuration, and usage instructions, please refer to [the documentation](https://douglasneuroinformatics.github.io/libui).
 
 ## Contributing
 

package.json

@@ -115,6 +115,7 @@
     "@douglasneuroinformatics/semantic-release": "^0.2.1",
     "@douglasneuroinformatics/tsconfig": "^1.0.3",
     "@faker-js/faker": "^9.6.0",
+    "@storybook/addon-docs": "^8.6.11",
     "@storybook/addon-essentials": "^8.6.11",
     "@storybook/addon-interactions": "^8.6.11",
     "@storybook/addon-links": "^8.6.11",