@pixelfusion-nz/ui-button

A customizable React button component with built-in styles, TypeScript support, and various states.

Features

• 🎨 Multiple variants (primary, secondary, outline)
• 📏 Different sizes (small, medium, large)
• 🔄 Loading state support
• 🎯 Hover effects
• 📦 No CSS imports needed
• 💪 TypeScript support
• ♿ Accessibility-friendly
• 🔌 Framework agnostic (works with React, Next.js, Astro, etc.)

Installation

Public Package

npm install @pixelfusion-nz/ui-button

Private Package

If you're using this as a private package, you'll need to:

1. Set up your npm organization:

   npm org create pixelfusion-nz

2. Configure npm authentication:

   # Create or edit .npmrc in your project root
   @pixelfusion-nz:registry=https://registry.npmjs.org/
   //registry.npmjs.org/:_authToken=${NPM_TOKEN}

3. Set up the NPM_TOKEN environment variable:

   # Add to your shell profile (.zshrc, .bashrc, etc.)
   export NPM_TOKEN=your_npm_token_here

4. Install the private package:

   npm install @pixelfusion-nz/ui-button

Usage

Basic Usage

import { Button } from '@pixelfusion-nz/ui-button';

function App() {
  return <Button variant="primary">Click me</Button>;
}

Variants

<Button variant="primary">Primary Button</Button>
<Button variant="secondary">Secondary Button</Button>
<Button variant="outline">Outline Button</Button>

Sizes

<Button size="small">Small Button</Button>
<Button size="medium">Medium Button</Button>
<Button size="large">Large Button</Button>

Loading State

<Button isLoading>Loading...</Button>

Disabled State

<Button disabled>Disabled Button</Button>

In Astro

---
import { Button } from '@pixelfusion-nz/ui-button';
---

<Button variant="primary">Astro Button</Button>

API

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'primary' \| 'secondary' \| 'outline' | 'primary' | The visual style variant of the button | | size | 'small' \| 'medium' \| 'large' | 'medium' | The size of the button | | isLoading | boolean | false | Shows a loading spinner and disables the button | | disabled | boolean | false | Disables the button | | className | string | '' | Additional CSS classes to apply | | style | CSSProperties | undefined | Additional inline styles to apply | | children | ReactNode | undefined | The content of the button |

Development & Deployment

Local Development

1. Clone the repository

2. Install dependencies:

   npm install

3. Make your changes

4. Build the package:

   npm run build

Publishing

As a Public Package

1. Update version:

   npm version patch # or minor, or major

2. Build and publish:

   npm run build
   npm publish --access public

As a Private Package

1. Set up private npm organization:

   # Create organization if not exists
   npm org create pixelfusion-nz

2. Configure npm authentication:

   # Generate new token from npm website
   npm token create
      
   # Add to .npmrc
   @pixelfusion-nz:registry=https://registry.npmjs.org/
   //registry.npmjs.org/:_authToken=${NPM_TOKEN}

3. Update package.json:

   {
     "name": "@pixelfusion-nz/ui-button",
     "publishConfig": {
       "access": "restricted"
     }
   }

4. Build and publish:

   npm version patch # or minor, or major
   npm run build
   npm publish --access restricted

Using Private Package in Other Projects

1. Create .npmrc in project root:

   @pixelfusion-nz:registry=https://registry.npmjs.org/
   //registry.npmjs.org/:_authToken=${NPM_TOKEN}

2. Add NPM_TOKEN to environment:

   # Add to your shell profile (.zshrc, .bashrc, etc.)
   export NPM_TOKEN=your_npm_token_here

3. Install package:

   npm install @pixelfusion-nz/ui-button

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT

Support

For issues and feature requests, please open an issue in the repository.