@astragroup/fect-libs-nextjs

A React component library built with TypeScript, Vite, and Tailwind CSS for Next.js applications.

📦 Installation

npm install @astragroup/fect-libs-nextjs

⚠️ React Version Compatibility

This library has different React version requirements depending on the version:

• Version 0.1.xx and below: Compatible with React 18
• Version 0.2.xx and above: Compatible with React 19

Please ensure you install the correct version for your React project:

For React 18 projects:

npm install @astragroup/[email protected]

For React 19 projects:

npm install @astragroup/fect-libs-nextjs@latest

🚀 Quick Start

Prerequisites

• Node.js (see .nvmrc for required version)
• npm or yarn

Development Setup

1. Clone the repository

   git clone https://github.com/ASTRA-TECHNOLOGY-COMPANY-LIMITED/fect-libs-nextjs.git
   cd fect-libs-nextjs

2. Install dependencies

   npm install

3. Build the library

   npm run build

4. Start development server

   npm run dev

5. Preview the demo Open your browser and navigate to:

   http://localhost:3000

📚 Available Components

This library includes the following components:

• Languages - Language selection component
• UserWorkspaceDropdown - User workspace dropdown menu
• PlanTypeBadge - Plan type badge component
• DefaultAvatar - Default avatar component
• FECTTool - FECT tool component

🛠️ Scripts

| Command | Description | |---------|-------------| | npm run dev | Start development server on port 3000 | | npm run build | Build the library for production | | npm run lint | Run ESLint for code quality | | npm run preview | Preview the built library |

📤 Publishing to NPM

To publish this library to npm with public access, follow these steps:

Prerequisites for Publishing

• npm account with publishing permissions
• Logged in to npm CLI: npm login

Publishing Steps

1. Update version (if needed)

   npm version patch  # for bug fixes
   npm version minor  # for new features
   npm version major  # for breaking changes

2. Build the library

   npm run build

3. Publish with public access

   npm publish --access public

Automated Publishing (Recommended)

For automated publishing, you can add this script to your package.json:

{
  "scripts": {
    "publish:public": "npm run build && npm publish --access public"
  }
}

Then run:

npm run publish:public

Verify Publication

After publishing, verify your package is available:

npm view @astragroup/fect-libs-nextjs

🔧 Tech Stack

• React 19.1.0
• TypeScript 5.4.3
• Vite 4.5.3
• Tailwind CSS 3.4.1
• HeroUI 2.7.6
• Framer Motion 12.15.0

📄 License

This project is licensed under the terms specified in the LICENSE file.

👥 Contributing

Developed by the FE Team at ASTRA TECHNOLOGY COMPANY LIMITED.

🔗 Repository

GitHub Repository