Add Storybook for component library documentation and development

.gitignore

@@ -33,4 +33,8 @@ report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
 # Finder (MacOS) folder config
 .DS_Store
 
-/old
+/old
+
+# Storybook
+storybook-static
+debug-storybook.log

.storybook/README.md

@@ -0,0 +1,95 @@
+# Storybook for @kacker/ui
+
+This directory contains Storybook configuration and component stories for the @kacker/ui library.
+
+## Getting Started
+
+### Prerequisites
+- Node.js 20+
+- npm
+
+### Installation
+
+Install dependencies:
+```bash
+npm install --legacy-peer-deps
+```
+
+### Running Storybook
+
+Start the Storybook development server:
+```bash
+npm run storybook
+```
+
+This will start Storybook on http://localhost:6006
+
+### Building Storybook
+
+Build a static version of Storybook:
+```bash
+npm run build-storybook
+```
+
+The static site will be generated in the `storybook-static` directory.
+
+## About the Mocks
+
+The `.storybook/mocks` directory contains mock implementations of Capacitor dependencies. These are required because the @kacker/ui library has peer dependencies on various Capacitor plugins that are only available in native mobile environments.
+
+The mocks allow Storybook to run in a web browser while maintaining compatibility with the library's code structure.
+
+## Component Stories
+
+Stories are organized by component type:
+
+- **Components/** - Core UI components (Image, Page, etc.)
+- **Interactive/** - Interactive form components (Button, Input, Switch, Select, TextArea, Toggle, Form, etc.)
+
+Each story file demonstrates multiple variants and states of the component, making it easy to:
+- Visualize all component variations
+- Test component behavior interactively
+- Generate documentation automatically
+- Develop components in isolation
+
+## Adding New Stories
+
+To add a story for a new component:
+
+1. Create a `.stories.tsx` file next to your component:
+   ```typescript
+   import type { Meta, StoryObj } from '@storybook/react';
+   import YourComponent from './YourComponent';
+
+   const meta = {
+     title: 'Category/YourComponent',
+     component: YourComponent,
+     parameters: {
+       layout: 'centered',
+     },
+     tags: ['autodocs'],
+   } satisfies Meta<typeof YourComponent>;
+
+   export default meta;
+   type Story = StoryObj<typeof meta>;
+
+   export const Default: Story = {
+     args: {
+       // your props here
+     },
+   };
+   ```
+
+2. Storybook will automatically detect and display your new story.
+
+## Configuration
+
+- `.storybook/main.ts` - Main Storybook configuration
+- `.storybook/preview.ts` - Global preview configuration and decorators
+- `.storybook/mocks/` - Mock implementations for Capacitor dependencies
+
+## Learn More
+
+- [Storybook Documentation](https://storybook.js.org/docs)
+- [Writing Stories](https://storybook.js.org/docs/writing-stories)
+- [Storybook Addons](https://storybook.js.org/addons)

.storybook/main.ts

@@ -0,0 +1,33 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+import path from "path";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  viteFinal: async (config) => {
+    // Merge custom configuration
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        "@": path.resolve(__dirname, "../src"),
+        // Mock Capacitor dependencies
+        "@capacitor/app": path.resolve(__dirname, "./mocks/capacitor-app.ts"),
+        "@capacitor/core": path.resolve(__dirname, "./mocks/capacitor-core.ts"),
+        "@capacitor/status-bar": path.resolve(__dirname, "./mocks/capacitor-status-bar.ts"),
+        "@capgo/capacitor-updater": path.resolve(__dirname, "./mocks/capacitor-updater.ts"),
+        "@aashu-dubey/capacitor-statusbar-safe-area": path.resolve(__dirname, "./mocks/capacitor-statusbar-safe-area.ts"),
+        "@hugotomazi/capacitor-navigation-bar": path.resolve(__dirname, "./mocks/capacitor-navigation-bar.ts"),
+      };
+    }
+    return config;
+  },
+};
+export default config;

.storybook/mocks/capacitor-app.ts

@@ -0,0 +1,5 @@
+// Mock for @capacitor/app
+export const App = {
+  addListener: () => ({ remove: () => {} }),
+  removeAllListeners: () => Promise.resolve(),
+};

.storybook/mocks/capacitor-core.ts

@@ -0,0 +1,5 @@
+// Mock for @capacitor/core
+export const Capacitor = {
+  getPlatform: () => 'web',
+  isNativePlatform: () => false,
+};

.storybook/mocks/capacitor-navigation-bar.ts

@@ -0,0 +1,5 @@
+// Mock for @hugotomazi/capacitor-navigation-bar
+export const NavigationBar = {
+  setColor: () => Promise.resolve(),
+  setTransparency: () => Promise.resolve(),
+};

.storybook/mocks/capacitor-status-bar.ts

@@ -0,0 +1,5 @@
+// Mock for @capacitor/status-bar
+export const StatusBar = {
+  setStyle: () => Promise.resolve(),
+  setBackgroundColor: () => Promise.resolve(),
+};

.storybook/mocks/capacitor-statusbar-safe-area.ts

@@ -0,0 +1,4 @@
+// Mock for @aashu-dubey/capacitor-statusbar-safe-area
+export const SafeArea = {
+  getSafeAreaInsets: () => Promise.resolve({ insets: { top: 0, right: 0, bottom: 0, left: 0 } }),
+};

.storybook/mocks/capacitor-updater.ts

@@ -0,0 +1,6 @@
+// Mock for @capgo/capacitor-updater
+export const CapacitorUpdater = {
+  notifyAppReady: () => Promise.resolve(),
+  download: () => Promise.resolve({ version: '' }),
+  set: () => Promise.resolve(),
+};

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react";
+import "../src/index.css";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;