{"_id":"@alfredogaliza/create-cbmpa-app","_rev":"2-f13b722e1276615a9e43f89c88a6b7f8","name":"@alfredogaliza/create-cbmpa-app","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.1":{"name":"@alfredogaliza/create-cbmpa-app","version":"1.0.1","keywords":["react","keycloak","tailwind","cbmpa","bombeiros","create-app","scaffolding"],"author":"","license":"MIT","_id":"@alfredogaliza/create-cbmpa-app@1.0.1","maintainers":[{"name":"alfredogaliza","email":"alfredogaliza@gmail.com"}],"bin":{"create-cbmpa-app":"index.js"},"dist":{"shasum":"476d9ca04c65c046d03519b1021595e5e81a2063","tarball":"https://registry.npmjs.org/@alfredogaliza/create-cbmpa-app/-/create-cbmpa-app-1.0.1.tgz","fileCount":73,"integrity":"sha512-2HMkMS5Emtr3V9zik0Y8dJ5BMJbNgvFI5LWaZqCAVngDcRlZMn94gTcSwpUkPQyYg6TGEnhnTNLaLsASkLvXgQ==","signatures":[{"sig":"MEYCIQDgEkohLlEXm4FoV3eDZb5+O3NfxjKjW+naDOUEguJcrgIhAL92/WOkwC5v0ONrg45v76PmV5CIoxA7MzJ7J4V+DpMu","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":915722},"engines":{"npm":">=9.0.0","node":">=18.0.0"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"alfredogaliza","email":"alfredogaliza@gmail.com"},"_npmVersion":"11.17.0","description":"Create a new CBMPA React application with Keycloak SSO, Tailwind CSS, and Context API","directories":{},"_nodeVersion":"24.16.0","dependencies":{"ora":"^6.3.1","chalk":"^5.3.0","fs-extra":"^11.2.0","inquirer":"^8.2.6"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/create-cbmpa-app_1.0.1_1783095013133_0.15905596605327754","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@alfredogaliza/create-cbmpa-app","version":"1.0.2","publishConfig":{"access":"public"},"description":"Create a new CBMPA React application with Keycloak SSO, Tailwind CSS, and Context API","bin":{"create-cbmpa-app":"index.js"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["react","keycloak","tailwind","cbmpa","bombeiros","create-app","scaffolding"],"author":"","license":"MIT","engines":{"node":">=18.0.0","npm":">=9.0.0"},"dependencies":{"fs-extra":"^11.2.0","inquirer":"^8.2.6"},"_id":"@alfredogaliza/create-cbmpa-app@1.0.2","_nodeVersion":"24.16.0","_npmVersion":"11.17.0","dist":{"integrity":"sha512-4ypqMFSbsxGWzfoHSPMW1I+WXiRYJXyFdGzBaBUq+i0TFs7ufx7aVshaym0anxZk6rV8is7Gww+ZRwLiclgwzQ==","shasum":"1b709108e672da21cb0816ab1775dcd0d756c2ef","tarball":"https://registry.npmjs.org/@alfredogaliza/create-cbmpa-app/-/create-cbmpa-app-1.0.2.tgz","fileCount":73,"unpackedSize":915496,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDWzwmb3wxSV+Q3M8aqBrpSw6Oy8RJYu0JXSFoChQomGgIhAPD1rRCgUefmpXaOLhVDfN5lk161qu+S8l1cVsiZdOsy"}]},"_npmUser":{"name":"alfredogaliza","email":"alfredogaliza@gmail.com"},"directories":{},"maintainers":[{"name":"alfredogaliza","email":"alfredogaliza@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/create-cbmpa-app_1.0.2_1783260644283_0.4871195667337407"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-03T16:10:12.935Z","modified":"2026-07-05T14:10:44.571Z","1.0.1":"2026-07-03T16:10:13.332Z","1.0.2":"2026-07-05T14:10:44.451Z"},"license":"MIT","keywords":["react","keycloak","tailwind","cbmpa","bombeiros","create-app","scaffolding"],"description":"Create a new CBMPA React application with Keycloak SSO, Tailwind CSS, and Context API","maintainers":[{"name":"alfredogaliza","email":"alfredogaliza@gmail.com"}],"readme":"# create-cbmpa-app\n\n🚀 Create a new CBMPA React application with Keycloak SSO, Tailwind CSS, and Context API.\n\n## Quick Start\n\n```bash\nnpm create cbmpa-app\n```\n\nOr specify a project name:\n\n```bash\nnpm create cbmpa-app my-app\n```\n\nThen follow the interactive prompts to:\n- Choose your project name\n- Install dependencies (optional)\n- Initialize Git repository (optional)\n\n## What's Included\n\nThis scaffolding template creates a production-ready React application with:\n\n### 🎨 UI & Styling\n- **React 19** - Latest React with compiler optimization\n- **Tailwind CSS 4** - Utility-first CSS framework\n- **React Bootstrap 5** - Component library\n- **Glass Morphism Design** - Modern aesthetic\n\n### 🔐 Authentication & State Management\n- **Keycloak SSO** - Single Sign-On integration\n- **Context API + Providers** - Global state management\n  - Auth Context (user, roles, sectors)\n  - Sidebar Context (responsive menu state)\n  - Breadcrumb Context (navigation breadcrumbs)\n  - Modal Context (global modals)\n  - Notification Context (toasts + history)\n\n### 🛠️ Developer Experience\n- **Vite** - Fast, modern build tool with HMR\n- **TypeScript** - Full type safety\n- **React Router 8** - Client-side routing\n- **ESLint** - Code quality and consistency\n- **Custom Hooks** - Simplified APIs for contexts\n\n### 📐 Responsive Layout\n- **Two-column layout** - Sidebar navigation + content area\n- **Fixed header & footer** - Only content scrolls\n- **Mobile overlay menu** - Responsive sidebar behavior\n- **Breadcrumb navigation** - Context-aware navigation trail\n\n### 📦 Centralized Configuration\n- `src/config/app.ts` - Single source of truth for:\n  - Menu items and navigation\n  - Keycloak configuration\n  - Branding (logos, acronyms, descriptions)\n  - Feature flags (notifications, user info)\n  - Tailwind configuration\n  - Breakpoints and responsive settings\n\n## Project Structure\n\n```\nmy-app/\n├── src/\n│   ├── assets/              # Images and backgrounds\n│   ├── components/          # Reusable UI components\n│   ├── contexts/            # React Context providers\n│   ├── hooks/               # Custom React hooks\n│   ├── layouts/             # Page layout wrappers\n│   ├── pages/               # Route pages\n│   ├── services/            # API services\n│   ├── types/               # TypeScript types\n│   ├── styles/              # CSS files\n│   ├── config/              # Centralized configuration\n│   └── index.tsx            # App entry point\n├── public/                  # Static assets\n├── vite.config.ts           # Vite configuration\n├── tsconfig.json            # TypeScript configuration\n├── tailwind.config.js       # Tailwind CSS configuration\n├── .env                     # Environment variables\n└── package.json             # Dependencies\n```\n\n## Configuration\n\n### Environment Variables (`.env`)\n\n```env\nVITE_KEYCLOAK_URL=https://keycloak.example.com\nVITE_KEYCLOAK_REALM=your-realm\nVITE_KEYCLOAK_CLIENT_ID=your-client-id\n```\n\n### App Configuration (`src/config/app.ts`)\n\nEdit this file to customize:\n- Application name, acronym, and description\n- Menu items and navigation\n- Keycloak URLs and configuration\n- Branding (logos, colors)\n- Feature toggles (notifications, user info)\n- Responsive breakpoints\n\n## Available Scripts\n\n```bash\n# Start development server\nnpm run dev\n\n# Build for production\nnpm run build\n\n# Preview production build\nnpm run preview\n\n# Lint code\nnpm run lint\n```\n\n## Key Features\n\n### Authentication Flow\n1. User lands on app (requires authentication)\n2. Redirected to Keycloak login if not authenticated\n3. After login, user info (name, roles, sectors) stored in Auth context\n4. Access available throughout app via custom `useAuth()` hook\n\n### Responsive Sidebar\n- **Mobile (<768px)**: Overlay menu, toggled by hamburger button\n- **Desktop (≥768px)**: Fixed or collapsible sidebar, toggled by hamburger button\n\n### Global Notifications\n- **Toasts**: Ephemeral notifications, auto-dismiss\n- **History**: Persistent notification history with badge counter\n- **Types**: success, error, warning, info\n\n### Modal System\n- Support for multiple simultaneous modals\n- Customizable size and button variants\n- Glass morphism design\n\n### Breadcrumb Navigation\n- Automatic breadcrumb generation\n- Sticky positioning below header\n- Hidden on mobile screens\n\n## Customization\n\n### Add Custom Components\n1. Create component in `src/components/`\n2. Follow existing naming conventions\n3. Use TypeScript for type safety\n\n### Add New Pages\n1. Create page in `src/pages/`\n2. Add route in `src/index.tsx` or create a Router config\n3. Add menu item in `src/config/app.ts` (MAIN_MENU_ITEMS)\n\n### Extend Configuration\n1. Edit `src/config/app.ts`\n2. Add new configuration groups as needed\n3. Update `src/types/config.ts` if adding new types\n\n### Customize Styling\n- Use Tailwind CSS utility classes\n- Customize in `tailwind.config.js`\n- Theme colors: violet (primary), red (danger), blue (info), green (success), yellow (warning)\n\n## Publishing to npm\n\nTo make this template available as a published npm package:\n\n```bash\ncd create-cbmpa-app\nnpm login\nnpm publish\n```\n\nThen anyone can create a new project with:\n\n```bash\nnpm create cbmpa-app\n```\n\n## Migration from create-cbmpa-app\n\nIf you've already used this scaffolding tool and want to update your existing project:\n\n1. Update dependencies: `npm install`\n2. Check `src/config/app.ts` for new configuration options\n3. Review `package.json` for new scripts\n4. Update environment variables in `.env` if needed\n\n## Support\n\nFor issues or questions:\n- Check the generated project's documentation files\n- Review Keycloak documentation: https://www.keycloak.org\n- React documentation: https://react.dev\n- Tailwind CSS: https://tailwindcss.com\n\n## License\n\nMIT\n\n---\n\n**Happy coding! 🚀**\n","readmeFilename":"README.md"}