shipd 0.1.0

package/docs-template/README.md

@@ -0,0 +1,255 @@
+# Documentation Pages Module - Integration Guide
+
+**Module Version:** 1.0.0  
+**Last Updated:** 2025-01-19  
+**Standalone:** ✅ Yes (includes all dependencies)
+
+---
+
+## Overview
+
+This module adds a complete, standalone documentation section to your Next.js application. It includes a beautiful docs layout with navigation, search, and all the components needed to display documentation pages.
+
+**Key Features:**
+- Complete docs layout with header and sidebar navigation
+- Dynamic routing for docs pages (`/docs/[slug]`)
+- Table of contents component
+- Code snippet display with copy functionality
+- Category pages with quickstart guides
+- Fully responsive design
+
+---
+
+## Files Added
+
+### Pages/Routes
+- `app/docs/page.tsx` - Docs landing page with feature overview
+- `app/docs/layout.tsx` - Docs layout with header and sidebar
+- `app/docs/[slug]/page.tsx` - Dynamic doc pages
+- `app/docs/[slug]/[subslug]/page.tsx` - Nested doc pages
+- `app/docs/api/page.tsx` - API documentation page
+- `app/docs/documentation/page.tsx` - Main documentation page
+
+### Components
+- `components/docs/docs-header.tsx` - Docs header with navigation and search
+- `components/docs/docs-sidebar.tsx` - Sidebar navigation with expandable sections
+- `components/docs/docs-toc.tsx` - Table of contents component
+- `components/docs/docs-category-page.tsx` - Category page layout component
+- `components/docs/docs-code-card.tsx` - Code snippet display with copy button
+- `components/docs/docs-nav.ts` - Navigation data structure
+
+### Included UI Components
+- `components/ui/button.tsx` - Button component (if not exists)
+- `components/ui/card.tsx` - Card component (if not exists)
+- `components/ui/badge.tsx` - Badge component (if not exists)
+- `components/ui/sheet.tsx` - Sheet/modal component (if not exists)
+- `lib/utils.ts` - Utility functions for className merging (if not exists)
+
+---
+
+## Dependencies
+
+### Package Dependencies
+The following packages will be added to `package.json` if missing:
+- `@radix-ui/react-slot@^1.1.0` - For Button component
+- `@radix-ui/react-dialog@^1.1.0` - For Sheet component
+- `class-variance-authority@^0.7.0` - For component variants
+- `clsx@^2.1.1` - For className utilities
+- `tailwind-merge@^2.5.4` - For merging Tailwind classes
+- `lucide-react@^0.469.0` - For icons
+
+**Smart Deduplication:** If UI components already exist in your project, they won't be overwritten.
+
+---
+
+## Environment Variables
+
+No environment variables required for this module.
+
+---
+
+## Manual Integration Steps
+
+If you're appending this module to an existing project, follow these steps:
+
+### Step 1: Install Dependencies
+
+```bash
+npm install
+# or
+pnpm install
+# or
+yarn install
+```
+
+The append command automatically adds missing dependencies to `package.json`, but you need to install them.
+
+### Step 2: Verify Files Were Added
+
+Check that the following directories exist:
+- `app/docs/` - Should contain all docs pages
+- `components/docs/` - Should contain all docs components
+- `components/ui/` - Should contain UI components (if they didn't exist)
+
+### Step 3: Access the Docs
+
+1. Start your dev server: `npm run dev`
+2. Visit `http://localhost:3000/docs` in your browser
+3. You should see the docs landing page with navigation
+
+### Step 4: Customize Navigation
+
+Edit `components/docs/docs-nav.ts` to customize the sidebar navigation:
+
+```typescript
+export const docsNav: DocsNavItem[] = [
+  {
+    title: "Docs",
+    items: [
+      { title: "Introduction", href: "/docs" },
+      { title: "Documentation", href: "/docs/documentation" },
+      // Add your own pages here
+    ],
+  },
+  // Add more sections
+];
+```
+
+### Step 5: Add Your Own Documentation Pages
+
+1. Create new pages in `app/docs/`:
+   ```bash
+   app/docs/my-page/page.tsx
+   ```
+
+2. Add entry to navigation in `components/docs/docs-nav.ts`
+
+3. Follow the existing page structure for consistency
+
+---
+
+## Usage Examples
+
+### Basic Docs Page
+
+```typescript
+// app/docs/my-page/page.tsx
+export default function MyPage() {
+  return (
+    <div className="py-10">
+      <h1 className="text-3xl font-semibold">My Page</h1>
+      <p className="mt-4 text-white/70">Content goes here</p>
+    </div>
+  );
+}
+```
+
+### Category Page with Quickstart
+
+```typescript
+// app/docs/my-feature/page.tsx
+import DocsCategoryPage, { type CategoryPageModel } from "@/components/docs/docs-category-page";
+
+const categoryData: CategoryPageModel = {
+  title: "My Feature",
+  subtitle: "Description of my feature",
+  updated: "January 19, 2025",
+  atAGlance: {
+    whatYouGet: ["Feature 1", "Feature 2"],
+    youConfigure: ["Setting 1", "Setting 2"],
+  },
+  quickStart: [
+    { title: "Step 1", description: "Do this first" },
+    { title: "Step 2", description: "Then do this" },
+  ],
+  variants: [
+    {
+      title: "Option A",
+      href: "/docs/my-feature/option-a",
+      summary: "Description",
+      status: "available",
+    },
+  ],
+};
+
+export default function MyFeaturePage() {
+  return <DocsCategoryPage model={categoryData} />;
+}
+```
+
+---
+
+## Customization
+
+### Styling
+The docs use Tailwind CSS with a dark theme. To customize:
+- Edit component files in `components/docs/`
+- Modify Tailwind classes directly
+- Update `app/docs/layout.tsx` for layout changes
+
+### Navigation
+- Edit `components/docs/docs-nav.ts` to change sidebar structure
+- Modify `components/docs/docs-sidebar.tsx` for sidebar behavior
+- Update `components/docs/docs-header.tsx` for header changes
+
+### Content
+- Edit pages in `app/docs/` to customize content
+- Follow existing page patterns for consistency
+- Use `DocsCategoryPage` for feature overviews
+- Use `DocsCodeCard` for code examples
+
+---
+
+## Troubleshooting
+
+### Common Issues
+
+**Issue:** Docs pages show 404 errors
+**Solution:** 
+- Verify `app/docs/` directory exists
+- Check that page files are named correctly (`page.tsx`)
+- Restart dev server
+
+**Issue:** UI components not found
+**Solution:**
+- Check that `components/ui/` directory exists
+- Verify dependencies are installed: `npm install`
+- Check that `lib/utils.ts` exists
+
+**Issue:** Navigation not showing
+**Solution:**
+- Verify `components/docs/docs-nav.ts` exists
+- Check that navigation data structure is correct
+- Ensure `components/docs/docs-sidebar.tsx` is importing `docsNav`
+
+---
+
+## Next Steps
+
+After installing this module:
+
+1. ✅ Visit `/docs` to see your documentation
+2. ✅ Customize navigation in `components/docs/docs-nav.ts`
+3. ✅ Add your own documentation pages
+4. ✅ Update content in existing pages
+5. ✅ Customize styling if needed
+
+---
+
+## Related Modules
+
+This module works independently and doesn't require other modules. However, it complements:
+- **Authentication Module** - Can document auth setup
+- **Database Module** - Can document database configuration
+- **Payments Module** - Can document payment integration
+
+---
+
+## Module Status
+
+✅ **Standalone Package** - All components included  
+✅ **No Missing Dependencies** - Everything needed is bundled  
+✅ **Ready to Use** - Works immediately after append  
+✅ **Well Documented** - Comprehensive integration guide  
+✅ **Smart Deduplication** - Won't overwrite existing components
+