npm package: @roger-hub/package-01
Description: A modern UI component library for React applications, built with TailwindCSS and React.
Latest version: 1.0.9

# @roger-hub/package-01

A modern UI component library for React applications, built with TailwindCSS and React.

## Features

- 🎨 Beautiful UI components with a consistent design language
- 🧩 Modular approach, use only what you need
- ✨ Based on TailwindCSS for easy customization
- 📦 Tree-shakable for optimized production bundles
- 💻 TypeScript support with full type definitions

## Installation

```bash
npm install @roger-hub/package-01
```

## Quick Start

1. Install the package:
```bash
npm install @roger-hub/package-01
```

2. Configure Tailwind CSS in your project:
```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

3. Update your `tailwind.config.js`:
```js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // Your project files
    "./src/**/*.{js,jsx,ts,tsx}",
    
    // Include our component library
    "./node_modules/@roger-hub/package-01/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {
      // Theme extensions needed by our components (see INTEGRATION-GUIDE.md)
    }
  }
}
```

4. Import styles in your main CSS file (before Tailwind directives):
```css
/* main.css */
@import '@roger-hub/package-01/styles.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
```

## Troubleshooting

### CSS Import Issues

As of version 1.0.9, we've improved how CSS is handled to prevent the common error:
```
[postcss] Missing "./base" specifier in "tailwindcss" package
```

Our solution uses a precompiled CSS file that doesn't rely on Tailwind's direct imports. To use it:

```css
/* Import our styles BEFORE your Tailwind directives */
@import '@roger-hub/package-01/styles.css';

@tailwind base;
@tailwind components;
@tailwind utilities;
```

For more detailed solutions, see our [Tailwind Troubleshooting Guide](./TAILWIND-TROUBLESHOOTING.md).

3. Configure Tailwind to include the component styles:
```js
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    // ...
    "./node_modules/@roger-hub/package-01/dist/**/*.js"
  ],
  // See USAGE.md for complete theme configuration
}
```

4. Use components in your application:
```jsx
import { Button } from '@roger-hub/package-01';

function App() {
  return (
    <div className="p-4">
      <h1 className="text-2xl mb-4">My App</h1>
      <Button>Click Me</Button>
    </div>
  );
}
```

## TypeScript Support

All components and utilities are fully typed with TypeScript. You can import types directly:

```tsx
import { Button, ButtonProps } from '@roger-hub/package-01';

// Create a custom button component
const CustomButton = (props: ButtonProps) => {
  return <Button {...props} className="custom-class" />;
};
```

The package includes TypeScript declarations that provide intellisense and type checking in your IDE.

## Components

### Button

A versatile button component with various styles and sizes.

```jsx
import { Button } from '@roger-hub/package-01';

<Button variant="default" size="default">Default Button</Button>
<Button variant="destructive" size="sm">Destructive Button</Button>
<Button variant="outline" size="lg">Outline Button</Button>
<Button variant="secondary">Secondary Button</Button>
<Button variant="ghost">Ghost Button</Button>
<Button variant="link">Link Button</Button>
```

## Utilities

### `cn` function

Utility for conditionally joining class names:

```jsx
import { cn } from '@roger-hub/package-01';

<div className={cn("base-class", isActive && "active-class")}>
  Content
</div>
```

## Documentation

- [Complete Usage Guide](./USAGE.md)
- [Publishing Guide](./PUBLISHING.md)
- [TypeScript Troubleshooting](./TS-TROUBLESHOOTING.md)

## Troubleshooting

### CSS Import Issues

If you encounter an error like:
```
[vite] Internal server error: [postcss] Missing "./dist/style.css" specifier in "@roger-hub/package-01" package
```

or 

```
Error: Failed to scan for dependencies from entries:
  Missing "./dist/styles.css" specifier in "@roger-hub/package-01" package [plugin vite:dep-scan]
```

Make sure you're importing the CSS correctly:
```css
/* Recommended way */
@import '@roger-hub/package-01/styles.css';

/* These also work with version 1.0.7+ */
@import '@roger-hub/package-01/dist/style.css';
@import '@roger-hub/package-01/dist/styles.css';
```

If you're using a bundler other than Vite or have specific CSS import requirements, you can also try:
```css
@import '~@roger-hub/package-01/styles.css';
```

Make sure you're using version 1.0.7 or later to avoid CSS import issues.

## License

MIT+ TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

```js
export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})
```

You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:

```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})
```