diff --git a/.github/ISSUE_TEMPLATE/bug-report.md b/.github/ISSUE_TEMPLATE/bug-report.md deleted file mode 100644 index aeec3f1..0000000 --- a/.github/ISSUE_TEMPLATE/bug-report.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -name: Bug Report -about: Report a bug or issue -title: "[BUG] " -labels: bug -assignees: '' - ---- - -## ๐Ÿ› Bug Description - -A clear and concise description of what the bug is. - -## ๐Ÿ”„ Steps to Reproduce - -1. Go to '...' -2. Click on '....' -3. Scroll down to '....' -4. See error - -## ๐Ÿ“ฑ Expected Behavior - -A clear and concise description of what you expected to happen. - -## ๐Ÿ“ธ Actual Behavior - -A clear and concise description of what actually happened. - -## ๐ŸŒ Environment - -- **OS**: [e.g., Windows 11, macOS 12.0] -- **Browser**: [e.g., Chrome 91, Firefox 89] -- **Device**: [e.g., Desktop, Mobile] -- **Collaro Version**: [e.g., v2.0.0] - -## ๐Ÿ“‹ Additional Context - -- Screenshots -- Console errors -- Network logs -- Any other relevant information - -## ๐Ÿ” Possible Solution - -If you have any ideas about how to fix this issue, please share them here. diff --git a/.github/ISSUE_TEMPLATE/feature-request.md b/.github/ISSUE_TEMPLATE/feature-request.md deleted file mode 100644 index 3bd42a1..0000000 --- a/.github/ISSUE_TEMPLATE/feature-request.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -name: Feature Request -about: Suggest a new feature or enhancement -title: "[FEATURE] " -labels: enhancement -assignees: '' - ---- - -## โœจ Feature Summary - -A brief description of the feature you'd like to see. - -## ๐ŸŽฏ Problem Statement - -What problem does this feature solve? What pain point does it address? - -## ๐Ÿ’ก Proposed Solution - -Describe your proposed solution in detail. - -## ๐Ÿ”„ Alternative Solutions - -Have you considered any alternative solutions? If so, please describe them. - -## ๐Ÿ“Š User Impact - -Who would benefit from this feature? How many users would this affect? - -## ๐ŸŽจ Design/UX Considerations - -Any design or user experience considerations? - -## ๐Ÿ”ง Technical Considerations - -Any technical constraints or considerations? - -## ๐Ÿ“‹ Additional Context - -- Screenshots or mockups -- Links to similar features in other products -- Any research or data that supports this feature request - -## โœ… Acceptance Criteria - -What would make this feature complete? -- [ ] Criteria 1 -- [ ] Criteria 2 -- [ ] Criteria 3 diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md deleted file mode 100644 index 7522df4..0000000 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ /dev/null @@ -1,67 +0,0 @@ -## ๐Ÿ“ Description - -Brief description of the changes made in this PR. - -## ๐ŸŽฏ Changes Made - -### What was changed? -- Change 1 -- Change 2 -- Change 3 - -### Why was it changed? -- Reason 1 -- Reason 2 -- Reason 3 - -## ๐Ÿ” Type of Change - -- [ ] ๐Ÿ› Bug fix (non-breaking change which fixes an issue) -- [ ] โœจ New feature (non-breaking change which adds functionality) -- [ ] ๐Ÿ’ฅ Breaking change (fix or feature that would cause existing functionality to not work as expected) -- [ ] ๐Ÿ“š Documentation update -- [ ] ๐ŸŽจ UI/UX improvement -- [ ] โšก Performance improvement -- [ ] ๐Ÿ”ง Refactoring -- [ ] ๐Ÿงช Testing -- [ ] ๐Ÿ”’ Security enhancement - -## ๐Ÿงช Testing - -### How was this tested? -- [ ] Unit tests -- [ ] Integration tests -- [ ] E2E tests -- [ ] Manual testing - -### Test Results -- Test coverage: XX% -- All tests passing: Yes/No - -## ๐Ÿ“ธ Screenshots/Videos - - - -## ๐Ÿ”— Related Issues/PRs - -- Closes #issue_number -- Related to #issue_number - -## ๐Ÿš€ Deployment Notes - -Any special deployment considerations? - -## โœ… Checklist - -- [ ] My code follows the project's style guidelines -- [ ] I have performed a self-review of my own code -- [ ] I have commented my code, particularly in hard-to-understand areas -- [ ] I have made corresponding changes to the documentation -- [ ] My changes generate no new warnings -- [ ] I have added tests that prove my fix is effective or that my feature works -- [ ] New and existing unit tests pass locally with my changes -- [ ] Any dependent changes have been merged and published in downstream modules - -## ๐Ÿ“‹ Additional Notes - -Any additional information or context about this PR. diff --git a/.github/instructions/auth.instructions.md b/.github/instructions/auth.instructions.md new file mode 100644 index 0000000..88b126f --- /dev/null +++ b/.github/instructions/auth.instructions.md @@ -0,0 +1,149 @@ +# better-auth setup guide โœ… + +A compact, practical guide to install and configure `better-auth` in your project. This covers typical Node/Express and Next.js integrations, environment variables, basic testing, and troubleshooting tips. + +--- + +## 1) Quick summary + +- Purpose: add authentication (sign up / sign in / sessions) with minimal boilerplate. +- Scope: **server-side** auth (API routes, server components). You may combine with client components for UI. + +--- + +## 2) Requirements + +- Node 18+ (or your runtime of choice) +- A database connection (Postgres recommended) if you plan to persist users/sessions +- Package manager: npm, pnpm or bun + +--- + +## 3) Install + +Choose one of the common package managers: + +```bash +# npm +npm install better-auth + +# pnpm +pnpm add better-auth + +# bun +bun add better-auth +``` + +--- + +## 4) Environment variables + +Add required env vars to your `.env` (or secret store): + +- `DATABASE_URL` โ€” connection string to your DB +- `AUTH_SECRET` โ€” a strong random string used to sign cookies/tokens + Note: Keep secrets out of source control and rotate periodically. + +--- + +## 5) Basic wiring (Next.js example) + +Server route (Next.js App Router) example: + +```ts +// app/api/auth/[...all]/route.ts +import { handleAuth } from "better-auth"; + +export const GET = handleAuth; +export const POST = handleAuth; +``` + +Client usage (call sign in or secure pages): + +```ts +// client sign-in call +await fetch("/api/auth/sign-in", { + method: "POST", + body: JSON.stringify({ email, password }), +}); +``` + +Middleware (optional) for protecting pages: + +```ts +// middleware.ts +import { withAuth } from "better-auth"; + +export default withAuth((req, res) => { + // allow protected route or redirect +}); +``` + +Refer to the package docs for full API shapes and helpers. + +--- + +## 6) Basic wiring (Express / Node) + +```js +// server.js +const express = require("express"); +const { createAuthRouter } = require("better-auth"); + +const app = express(); +app.use("/api/auth", createAuthRouter()); +``` + +--- + +## 7) Database / Migrations + +- Create the tables the library expects (users, sessions) if using DB-backed sessions. +- If `better-auth` provides migration SQL, run that against your DB, or inspect the package docs for schema. + +--- + +## 8) Local testing + +- Start your app (e.g., `npm run dev`) and call the auth endpoints: + - `POST /api/auth/sign-up` + - `POST /api/auth/sign-in` + - `POST /api/auth/sign-out` +- Use curl or a REST client to test flows and examine cookies/response codes. + +Example: + +```bash +curl -X POST -H "Content-Type: application/json" \ + -d '{"email":"you@example.com","password":"password"}' \ + http://localhost:3000/api/auth/sign-up +``` + +--- + +## 9) Security & production tips โš ๏ธ + +- Use HTTPS in production; set cookies `Secure` and `SameSite` appropriately. +- Use a strong `AUTH_SECRET` and keep it in a secrets manager. +- Rate-limit authentication endpoints to reduce brute-force attacks. +- Ensure database credentials have least privilege. + +--- + +## 10) Troubleshooting + +- 401 or 403 on protected endpoints: verify cookie/token signing secret and cookie scope (domain/path). +- Missing DB tables: check migrations and run predefined SQL if included. +- Local dev vs container: ensure the app is reachable (hostnames like `host.docker.internal` may be needed in containers). + +--- + +## 11) Where to go next + +- Add email verification, password resets, and OAuth providers as needed. +- Add audit logging for auth events. +- Add observability: log auth events and add metrics for sign-ins, failures, latencies. + +--- + +Need the guide adapted to a specific framework (Next.js, Remix, Express) or a copy-paste example for a particular provider? Let me know which one and Iโ€™ll add a tailored section. โœจ diff --git a/.github/instructions/sidebar.instructions.md b/.github/instructions/sidebar.instructions.md new file mode 100644 index 0000000..0184f33 --- /dev/null +++ b/.github/instructions/sidebar.instructions.md @@ -0,0 +1,539 @@ +# Sidebar Implementation Instructions for Copilot + +## Overview + +This document provides comprehensive instructions for implementing and extending the sidebar navigation system in the Next.js 16 application. The sidebar is a key UI component that provides navigation and user account management. + +## Architecture & Design Patterns + +### High-Level Goal + +Create a responsive, accessible sidebar navigation system that: + +- Adapts to mobile and desktop viewports +- Supports collapsible/expandable states +- Maintains state persistence across sessions +- Integrates with authentication +- Provides role-based navigation items + +### Key Design Principles + +1. **Component Composition**: Use small, focused components that can be composed together +2. **State Management**: Use React Context for sidebar state (open/closed, mobile) +3. **Accessibility**: Include ARIA labels, keyboard shortcuts, and semantic HTML +4. **Responsive Design**: Mobile-first approach with Tailwind CSS +5. **Type Safety**: Full TypeScript support with strict typing + +## File Structure & Dependencies + +### Core UI Components (components/ui/sidebar.tsx) + +The foundation of the sidebar system. This is a **727-line file** with the following exports and functions: + +#### **Types & Context** + +- `SidebarContextProps`: Type definition for sidebar context containing: + - `state`: "expanded" | "collapsed" + - `open`: boolean (desktop state) + - `setOpen`: function to set open state + - `openMobile`: boolean (mobile state) + - `setOpenMobile`: function to set mobile state + - `isMobile`: boolean (responsive breakpoint) + - `toggleSidebar`: function to toggle state + +- `SidebarContext`: React Context created via `React.createContext(null)` + +#### **Constants** + +``` +SIDEBAR_COOKIE_NAME = "sidebar_state" +SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7 (7 days) +SIDEBAR_WIDTH = "16rem" +SIDEBAR_WIDTH_MOBILE = "18rem" +SIDEBAR_WIDTH_ICON = "3rem" +SIDEBAR_KEYBOARD_SHORTCUT = "b" (Cmd+B or Ctrl+B) +``` + +#### **Core Functions & Components** + +1. **useSidebar() Hook** + - Returns `SidebarContextProps` from context + - Throws error if used outside `SidebarProvider` + - Usage: Access state and toggle functions from any descendant component + +2. **SidebarProvider Component** + - Props: `defaultOpen` (boolean), `open` (controlled), `onOpenChange` (callback), `className`, `style`, `children` + - Manages sidebar state with cookie persistence + - Handles keyboard shortcut (Cmd/Ctrl+B to toggle) + - Responsive: Different state for mobile vs desktop + - Context Provider: Wraps children with `SidebarContext.Provider` + - Returns: `
` wrapper with CSS variables for width and state + +3. **Sidebar Component** + - Props: `side` ("left" | "right"), `variant` ("sidebar" | "floating" | "inset"), `collapsible` ("offcanvas" | "icon" | "none"), `className`, `children` + - Handles three collapsible modes: + - `offcanvas`: Slides out of view (default) + - `icon`: Shows only icons when collapsed + - `none`: Always expanded + - Mobile: Uses `Sheet` component for drawer UI + - Desktop: Uses fixed positioning with CSS Grid + - Exports data attributes: `data-state`, `data-collapsible`, `data-variant`, `data-side` + +4. **SidebarTrigger Component** + - Extends `Button` component + - Calls `toggleSidebar()` on click + - Props: `className`, `onClick`, standard button props + +5. **SidebarRail Component** + - Resizable element for drag-to-expand functionality + - Props: `className`, standard button props + - ARIA label: "Toggle Sidebar" + +6. **SidebarInset Component** + - Main content wrapper + - Replaces `
` when used with sidebar + - Props: `className`, standard div props + +7. **SidebarInput Component** + - Search/filter input styled for sidebar + - Props: `className`, standard input props + - Reduced height (h-8) with transparent background + +8. **SidebarHeader Component** + - Top section of sidebar (typically logo/branding) + - Props: `className`, standard div props + - Padding: p-2, gap: gap-2 + +9. **SidebarFooter Component** + - Bottom section of sidebar (typically user menu) + - Props: `className`, standard div props + +10. **SidebarSeparator Component** + - Visual divider using `Separator` component + - Props: `className`, standard Separator props + +11. **SidebarContent Component** + - Main scrollable content area + - Props: `className`, standard div props + - Flexbox with auto overflow + +12. **SidebarGroup Component** + - Groups related menu items + - Props: `className`, standard div props + - Example: One group for main nav, another for secondary + +13. **SidebarGroupLabel Component** + - Label for a group of menu items + - Props: `className`, `asChild`, standard div props + - Typically displays above a menu group + +14. **SidebarGroupAction Component** + - Action button within a group (e.g., "Add new") + - Props: `className`, `asChild`, standard button props + +15. **SidebarGroupContent Component** + - Container for menu items within a group + - Props: `className`, standard div props + +16. **SidebarMenu Component** (`