npm package: @rohit-shinde/test-mylib
Description: A React component library with customizable Button component
Author: rohits04
Latest version: 0.0.1

# @rohit-shinde/test-mylib

A React component library with a customizable Button component built with TypeScript and SCSS modules.

## Installation

```bash
npm install @rohit-shinde/test-mylib
```

or

```bash
yarn add @rohit-shinde/test-mylib
```

## Components

### Button

A flexible and customizable button component with multiple variants and sizes.

#### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `types` | `"primary"` \| `"tertiary"` \| `"subtle"` \| `"ghost"` | `"primary"` | Button variant style |
| `size` | `"regular"` \| `"small"` | `"regular"` | Button size |
| `leftIcon` | `React.ReactNode` | `undefined` | Icon to display on the left side |
| `rightIcon` | `React.ReactNode` | `undefined` | Icon to display on the right side |
| `label` | `React.ReactNode` | `undefined` | Button label text |
| ...rest | `ButtonHTMLAttributes` | - | All standard HTML button attributes |

#### Usage

```tsx
import { Button } from '@rohit-shinde/test-mylib';

function App() {
  return (
    <div>
      {/* Primary button */}
      <Button label="Click me" onClick={() => console.log('Clicked!')} />
      
      {/* Small button with icon */}
      <Button 
        label="Save" 
        size="small" 
        types="primary"
        leftIcon={<SaveIcon />}
      />
      
      {/* Ghost button */}
      <Button 
        label="Cancel" 
        types="ghost"
        onClick={() => console.log('Cancelled')}
      />
      
      {/* Disabled button */}
      <Button 
        label="Submit" 
        disabled
      />
    </div>
  );
}
```

#### Variants

- **primary**: Solid background with primary color
- **tertiary**: Dark background variant
- **subtle**: Light background with primary text
- **ghost**: Transparent with border

#### Sizes

- **regular**: Default size (48px height)
- **small**: Compact size (40px height)

## Development

### Setup

```bash
# Install dependencies
npm install

# Start development mode (watch)
npm start

# Build the library
npm run build

# Run tests
npm test

# Lint code
npm run lint
```

### Project Structure

```
src/
├── components/
│   └── Button/
│       ├── Button.tsx
│       ├── Button.module.scss
│       └── index.ts
├── styles/
│   ├── colorToken.scss
│   ├── fontToken.scss
│   └── spacingToken.scss
├── index.tsx
└── types.d.ts
```

## Publishing to NPM

### First Time Setup

1. **Create an NPM account** (if you don't have one):
   - Go to [npmjs.com](https://www.npmjs.com)
   - Sign up for an account

2. **Login to NPM from terminal**:
   ```bash
   npm login
   ```

3. **Update package name** (if needed):
   - Edit `package.json` and change `name` to a unique package name
   - Check availability: `npm view <package-name>`

### Publishing Steps

1. **Build the library**:
   ```bash
   npm run build
   ```

2. **Update version** (follow [Semantic Versioning](https://semver.org/)):
   ```bash
   # For patch release (0.1.0 -> 0.1.1)
   npm version patch
   
   # For minor release (0.1.0 -> 0.2.0)
   npm version minor
   
   # For major release (0.1.0 -> 1.0.0)
   npm version major
   ```

3. **Publish to NPM** (scoped packages require --access public):
   ```bash
   npm publish --access public
   ```

### Using in Another Project

After publishing, install in your other project:

```bash
npm install @rohit-shinde/test-mylib
```

Then import and use:

```tsx
import { Button } from '@rohit-shinde/test-mylib';

function MyApp() {
  return <Button label="Hello World" />;
}
```

## TypeScript Support

This library is built with TypeScript and includes type definitions. TypeScript will provide autocomplete and type checking when using this library.

## License

MIT © rohits04

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.