UI Component Library

This package contains reusable React components (e.g., Dropdown, Search) for use in multiple projects without code duplication.

Getting Started

1. Install Dependencies

npm install

2. Build the Package (if using TypeScript)

Add this to your package.json scripts if not present:

"build": "tsc"

Then run:

npm run build

3. Link the Package Globally (for local development only)

npm link

4. Link the Package in Your Local Project (for local development only)

In your other project's root directory:

npm link ui

(Replace ui with your actual package name if different.)

Using This Package in Any Project (Recommended for Deployment/Production)

1. Check Your Package Name

• Open package.json in this package.
• Find the "name" field. Example:

  "name": "ui"

• If you want to publish to npm, use a unique name (e.g., mono-ui or vaishnavi-ui).

2. Install the Package in Your Project

A. If published to npm:

npm install your-package-name

(Replace your-package-name with the value from your package.json)

B. If installing directly from GitHub:

npm install git+https://github.com/vaishnavig57/mono-ui.git

📦 How to Publish to npm (Quick Steps)

1. Create an npm account:

• https://www.npmjs.com/signup

2. Login in your terminal:

npm login

3. Make sure your package name is unique in package.json.

4. Build your package:

npm run build

5. Bump the version if needed in package.json.

6. Publish:

npm publish --access public

7. Check your package:

• https://www.npmjs.com/package/your-package-name

8. Install in any project:

npm install your-package-name

🚀 How to Use This Package in a New Project

1. Install the package:

npm install your-package-name

Replace your-package-name with the name in your package.json (e.g., vaishnavi-ui).

2. Import components in your code:

import { Search, Dropdown } from 'your-package-name';

function App() {
  return (
    <div>
      <Search placeholder="Search..." />
      <Dropdown options={['Option 1', 'Option 2']} />
    </div>
  );
}

3. Build and run your project as usual.

Notes

• Use npm link only for local development. For deployment/production, always use npm install from npm or GitHub.
• Rebuild (npm run build) your UI package after making changes to see updates in your linked project.
• Restart your local project's dev server after linking or installing.
• If you encounter issues, check your package name and import paths.