feat: Storybook (#215)

* feat: integrate Storybook into the project

- Updated ESLint configuration to extend Storybook recommendations.
- Added Storybook-related entries to .gitignore to exclude log files and static builds.
- Enhanced package.json with new Storybook scripts for development and building.
- Updated pnpm-lock.yaml to include new Storybook dependencies.
- Refactored the Home component to redirect to the Storybook introduction page.

* feat: enhance README with new features and Storybook integration

- Added Storybook badge and documentation for component development.
- Expanded feature list to include visual page builder, Docker support, and development tools.
- Updated project overview with new dependencies and improved descriptions.
- Removed outdated src/README.md file to streamline documentation.

* feat: enhance README and CI/CD integration for Storybook

- Added detailed CI/CD integration section in README, outlining automatic building, testing, Docker deployment, and artifact storage.
- Updated access instructions for Storybook in development and Docker environments.
- Included a new job in the Docker workflow to build Storybook during CI processes.
- Removed outdated blog posts and authors from the documentation to streamline content.

* chore: remove Storybook testing step from CI workflow

- Eliminated the 'Test Storybook' step from the GitHub Actions workflow to streamline the CI process.
- Updated package.json to remove the 'test-storybook' script, reflecting the changes in the CI configuration.

* refactor: remove TestCarouselPage component

- Deleted the TestCarouselPage component from the test-carousel directory to streamline the codebase.
- This component was previously used for testing the CarouselBlock but is no longer necessary.

Author: antosubash

.github/workflows/docker.yml

@@ -62,6 +62,8 @@ jobs:
 
     - name: Build
       run: pnpm run build
+    - name: Build Storybook
+      run: pnpm run build-storybook
     - name: Bump version and release
       env:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/storybook.yml

@@ -0,0 +1,107 @@
+name: Storybook CI
+
+on:
+  push:
+    branches: [ "main" ]
+    paths:
+      - "src/**/*.stories.@(js|jsx|ts|tsx)"
+      - "src/**/*.mdx"
+      - "src/.storybook/**"
+      - "src/components/**"
+      - "src/stories/**"
+  pull_request:
+    branches: [ "main" ]
+    paths:
+      - "src/**/*.stories.@(js|jsx|ts|tsx)"
+      - "src/**/*.mdx"
+      - "src/.storybook/**"
+      - "src/components/**"
+      - "src/stories/**"
+
+jobs:
+  storybook:
+    defaults:
+      run:
+        working-directory: ./src
+    runs-on: ubuntu-latest
+    
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v4
+      with:
+        fetch-depth: 0
+
+    - name: Install Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: 22
+
+    - uses: pnpm/action-setup@v2
+      name: Install pnpm
+      id: pnpm-install
+      with:
+        version: 9
+        run_install: false
+
+    - name: Get pnpm store directory
+      id: pnpm-cache
+      shell: bash
+      run: |
+        echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+    - uses: actions/cache@v3
+      name: Setup pnpm cache
+      with:
+        path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-pnpm-store-
+
+    - name: Install dependencies
+      run: pnpm install
+
+    - name: Build Storybook
+      run: pnpm run build-storybook
+
+    - name: Upload Storybook build artifacts
+      uses: actions/upload-artifact@v4
+      with:
+        name: storybook-static
+        path: src/storybook-static
+        retention-days: 30
+
+  storybook-docker:
+    defaults:
+      run:
+        working-directory: ./src
+    runs-on: ubuntu-latest
+    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+    needs: storybook
+    
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v4
+
+    - name: Log in to GitHub Container Registry
+      uses: docker/login-action@v3
+      with:
+        registry: ghcr.io
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}
+
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v3
+
+    - name: Build and push Storybook Docker image
+      uses: docker/build-push-action@v4
+      with:
+        context: ./src
+        file: ./src/Dockerfile.storybook
+        push: true
+        tags: |
+          ghcr.io/${{ github.repository }}/storybook:latest
+          ghcr.io/${{ github.repository }}/storybook:${{ github.sha }}
+        cache-from: type=gha
+        cache-to: type=gha,mode=max
+
+ 

README.md

@@ -5,8 +5,9 @@
 [![Next.js](https://img.shields.io/badge/Next.js-black?style=flat&logo=next.js&logoColor=white)](https://nextjs.org/)
 [![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=flat&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
 [![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=flat&logo=tailwind-css&logoColor=white)](https://tailwindcss.com/)
+[![Storybook](https://img.shields.io/badge/Storybook-FF4785?style=flat&logo=storybook&logoColor=white)](https://storybook.js.org/)
 
-A modern, high-performance React UI implementation for the [ABP Framework](https://abp.io/). This project serves as a drop-in replacement for the default Angular UI, offering improved performance, better SEO capabilities, and a more modern development experience.
+A modern, high-performance React UI implementation for the [ABP Framework](https://abp.io/). This project serves as a drop-in replacement for the default Angular UI, offering improved performance, better SEO capabilities, and a more modern development experience with advanced features like visual page building and component documentation.
 
 ## 📋 Table of Contents
 
@@ -20,6 +21,9 @@ A modern, high-performance React UI implementation for the [ABP Framework](https
     - [Configuration](#configuration)
     - [Running the Project](#running-the-project)
   - [📚 Project Overview](#-project-overview)
+  - [🎨 Visual Page Builder](#-visual-page-builder)
+  - [📖 Storybook](#-storybook)
+  - [🐳 Docker Support](#-docker-support)
   - [📊 Performance](#-performance)
   - [🤝 Contributing](#-contributing)
   - [💬 Support](#-support)
@@ -34,15 +38,17 @@ Check out the live demo at [https://abpreact.antosubash.com/](https://abpreact.a
 ## ✨ Features
 
 - 🎨 **Modern UI/UX**
-  - Responsive design
+  - Responsive design with Tailwind CSS v4
   - Dark/Light theme support
-  - Tailwind CSS styling
+  - Modern component library with Radix UI
+  - Beautiful animations and transitions
 
 - 🔐 **Authentication & Authorization**
   - Login/Logout functionality
   - User registration
   - Password recovery
   - Role-based access control
+  - OpenID Connect support
 
 - 🌐 **Multi-tenant Support**
   - Tenant management
@@ -55,11 +61,26 @@ Check out the live demo at [https://abpreact.antosubash.com/](https://abpreact.a
   - Permission management
   - Profile management
 
+- 📝 **Content Management System (CMS)**
+  - Visual page builder with Puck editor
+  - Drag-and-drop interface
+  - Rich text editing
+  - Component library
+  - Page templates and layouts
+
 - ⚙️ **System Features**
   - Multilingual support
   - Theme customization
   - Settings management
   - Feature management
+  - Email configuration
+
+- 🧪 **Development Tools**
+  - Storybook for component documentation
+  - TypeScript for type safety
+  - ESLint and Prettier for code quality
+  - Husky for git hooks
+  - Vitest for testing
 
 ## 🚀 Getting Started
 
@@ -122,20 +143,123 @@ pnpm install
 pnpm dev
 ```
 
+4. (Optional) Start Storybook for component development:
+
+```bash
+pnpm storybook
+```
+
 ## 📚 Project Overview
 
 ABP React is built with modern web technologies:
 
-- [Next.js](https://nextjs.org/) - React framework for production
+- [Next.js 15](https://nextjs.org/) - React framework for production
 - [TypeScript](https://www.typescriptlang.org/) - Type-safe JavaScript
-- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework
+- [Tailwind CSS v4](https://tailwindcss.com/) - Utility-first CSS framework
+- [Radix UI](https://www.radix-ui.com/) - Accessible component primitives
+- [TanStack Query](https://tanstack.com/query) - Data fetching and caching
+- [React Hook Form](https://react-hook-form.com/) - Form management
+- [Zod](https://zod.dev/) - Schema validation
 
 The project aims to provide a production-ready React UI for ABP Framework applications, focusing on:
 
 - Performance optimization
 - SEO friendliness
 - Modern development experience
 - Full ABP Framework integration
+- Visual content creation
+
+## 🎨 Visual Page Builder
+
+ABP React includes a powerful visual page builder powered by [Puck](https://measured.co/puck):
+
+- **Drag-and-Drop Interface**: Create pages visually without coding
+- **Component Library**: Pre-built components for common UI patterns
+- **Responsive Design**: Built-in responsive design tools
+- **Real-time Preview**: See changes instantly as you build
+- **Template System**: Save and reuse page layouts
+
+### Available Components
+
+- Hero sections
+- Text blocks and headings
+- Image galleries and carousels
+- Cards and containers
+- Buttons and forms
+- Grid layouts and spacers
+- And many more...
+
+## 📖 Storybook
+
+The project includes comprehensive component documentation with Storybook:
+
+```bash
+# Start Storybook development server
+pnpm storybook
+
+# Build Storybook for production
+pnpm build-storybook
+
+# Run Storybook tests
+pnpm test-storybook
+```
+
+Storybook provides:
+- Interactive component documentation
+- Component testing and validation
+- Design system guidelines
+- Accessibility testing
+- Visual regression testing
+
+### CI/CD Integration
+
+Storybook is fully integrated into the CI/CD pipeline:
+
+- **Automatic Building**: Storybook is built on every push to main and pull request
+- **Testing**: Storybook tests run automatically to ensure component quality
+- **Docker Deployment**: Storybook is containerized and deployed to GitHub Container Registry
+- **Artifact Storage**: Storybook build artifacts are stored for 30 days
+
+#### CI Workflow Features:
+
+1. **Storybook Build Job**: Builds and tests Storybook on every change
+2. **Docker Image**: Creates and pushes Storybook Docker image to GHCR
+
+#### Accessing Storybook:
+
+- **Development**: `http://localhost:6006` (run `pnpm storybook`)
+- **Docker**: `http://localhost:80` (run `docker run -p 80:80 ghcr.io/your-repo/storybook:latest`)
+- **CI Artifacts**: Download Storybook build artifacts from GitHub Actions
+
+## 🐳 Docker Support
+
+ABP React includes Docker support for easy deployment:
+
+### Main Application
+
+```bash
+# Build the application
+docker build -t abp-react .
+
+# Run the application
+docker run -p 3000:3000 abp-react
+```
+
+### Storybook
+
+```bash
+# Build Storybook
+docker build -f Dockerfile.storybook -t abp-react-storybook .
+
+# Run Storybook
+docker run -p 80:80 abp-react-storybook
+```
+
+The Docker setup includes:
+- Multi-stage builds for optimization
+- Nginx configuration for production
+- Security headers and caching
+- Non-root user execution
 
 ## 📊 Performance
 
@@ -161,6 +285,25 @@ Please ensure your code:
 - Updates documentation as needed
 - Passes all CI checks
 
+### Development Scripts
+
+```bash
+# Development
+pnpm dev              # Start development server
+pnpm build            # Build for production
+pnpm start            # Start production server
+pnpm lint             # Run ESLint
+pnpm format           # Format code with Prettier
+
+# Storybook
+pnpm storybook        # Start Storybook
+pnpm build-storybook  # Build Storybook
+pnpm test-storybook   # Test Storybook
+
+# API Generation
+pnpm gen-api          # Generate API client from OpenAPI spec
+```
+
 ## 💬 Support
 
 For support, please:
@@ -182,6 +325,8 @@ Special thanks to:
 - [Next.js](https://nextjs.org/) - The framework
 - [TypeScript](https://www.typescriptlang.org/) - The language
 - [Tailwind CSS](https://tailwindcss.com/) - The styling
+- [Puck](https://measured.co/puck) - The visual page builder
+- [Storybook](https://storybook.js.org/) - The component documentation
 
 ## 👥 Contributors
 

docs/blog/2019-05-28-first-blog-post.md

@@ -1,11 +1,6 @@
 ---
 slug: first-blog-post
 title: First Blog Post
-authors:
-  name: Gao Wei
-  title: Docusaurus Core Team
-  url: https://github.com/wgao19
-  image_url: https://github.com/wgao19.png
 tags: [hola, docusaurus]
 ---