@rohit-shinde/test-mylib

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

Installation

npm install @rohit-shinde/test-mylib

or

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

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

# 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
   • Sign up for an account

2. Login to NPM from terminal:

   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:

   npm run build

2. Update version (follow Semantic Versioning):

   # 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):

   npm publish --access public

Using in Another Project

After publishing, install in your other project:

npm install @rohit-shinde/test-mylib

Then import and use:

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.