npm package: @mntzdevs/label-generator
Description: Label Generator library - React component library for creating and editing label templates.
Latest version: 1.0.2

# @mntzdevs/label-generator

Label Generator library - React component library for creating and editing label templates.

## Installation

```bash
npm install @mntzdevs/label-generator
```

**That's it!** All required dependencies (including Mantine) will be installed automatically.

### Peer Dependencies

Only React and ReactDOM are peer dependencies (if you're using React in your project, you likely already have them):

- `react` >= 18.0.0
- `react-dom` >= 18.0.0

**Note:** Tailwind CSS is bundled with the library CSS, so you don't need to install it separately. However, if you're using Tailwind in your project, make sure it doesn't conflict.

## Usage

### Plain JavaScript

**Important:** Make sure you're using a bundler (like Vite, Webpack, or Parcel) that supports ES modules and package.json exports. If you're using a simple HTML file with `<script type="module">`, you may need to configure your dev server to properly resolve npm packages.

```javascript
import { create } from '@mntzdevs/label-generator';
import '@mntzdevs/label-generator/label-generator.css';

const rootElement = document.getElementById('label-generator');
const api = create(rootElement);

// Set initial template
api.setState({
  canvas: {
    width: 100,
    height: 50,
    unit: 'mm',
    dpi: 300,
  },
  nodes: [],
  print: {
    format: 'sheet',
  },
});

// Get current state
const state = api.getState();
```

### React

```tsx
import { LabelGenerator } from '@mntzdevs/label-generator/react';
import '@mntzdevs/label-generator/label-generator.css';

function App() {
  const apiRef = useRef<LabelGeneratorApi>(null);

  useEffect(() => {
    if (apiRef.current) {
      apiRef.current.setState({
        canvas: {
          width: 100,
          height: 50,
          unit: 'mm',
          dpi: 300,
        },
        nodes: [],
        print: {
          format: 'sheet',
        },
      });
    }
  }, []);

  return <LabelGenerator ref={apiRef} />;
}
```

## Important: CSS Import

**You must import the CSS file** for the library to work correctly:

```javascript
import '@mntzdevs/label-generator/label-generator.css';
```

This CSS file includes:
- Tailwind CSS utilities (all classes used by the library components)
- Library-specific styles

**Important:** The CSS file is already processed and includes all Tailwind classes used by the library. You don't need to install or configure Tailwind CSS in your project.

## API

### `create(selectorOrElement: string | HTMLElement): LabelGeneratorApi`

Creates a new label generator instance.

**Returns:**
- `getState(): Template | null` - Get current template state
- `setState(template: Template): void` - Set template state

### React Component

```tsx
<LabelGenerator ref={apiRef} />
```

The component exposes the same API through a ref.

## Examples

See the `examples/` directory for complete examples:
- `examples/plain/` - Plain JavaScript example
- `examples/react/` - React example

## Development

```bash
# Install dependencies
npm install

# Run development server
npm run dev

# Build library
npm run build:lib
```

## Troubleshooting

### Error: Cannot find module '@mntzdevs/label-generator/dist/index.js' or 'dist/index.js not found'

This error occurs when your bundler or browser tries to resolve the module incorrectly. Here are solutions:

1. **Make sure you're using the correct import:**
   ```javascript
   // ✅ Correct
   import { create } from '@mntzdevs/label-generator';
   
   // ❌ Wrong - don't import from dist directly
   import { create } from '@mntzdevs/label-generator/dist/index.js';
   ```

2. **If using Vite, ensure proper module resolution:**
   - Vite should automatically resolve `package.json` exports
   - If you're using a custom Vite config, make sure you're not overriding module resolution

3. **If using a dev server that doesn't support package.json exports:**
   - Use a bundler like Vite, Webpack, or Parcel
   - Or configure your dev server to properly resolve npm packages

4. **Build the library first (if using locally):**
   ```bash
   cd path/to/label-generator
   npm run build:lib
   ```

5. **If using npm link, rebuild after changes:**
   ```bash
   # In library directory
   npm run build:lib
   
   # In parent app, restart dev server
   ```

### CSS not loading in plain JS

Make sure you import the CSS file:
```javascript
import '@mntzdevs/label-generator/label-generator.css';
```

## License

MIT