UI Skillssity

Una libreria di componenti React moderna e leggera con CSS auto-iniettato. Costruita con TypeScript, Vite e testata con Storybook.

✨ Caratteristiche

• 🎨 CSS Auto-Iniettato - Non serve importare file CSS separati
• 📦 Leggera - Solo 6.6 kB
• 🔷 TypeScript - Completamente tipizzata
• ⚡️ Vite - Build veloce e ottimizzato
• 📚 Storybook - Documentazione interattiva dei componenti
• 🌳 Tree Shakeable - Include solo il codice che usi
• ⚛️ React 18 & 19 - Compatibile con entrambe le versioni
• 🎯 Zero Config - Funziona out-of-the-box

📦 Installazione

npm install ui-skillssity

yarn add ui-skillssity

pnpm add ui-skillssity

Requisiti

• React 18.0.0+ o React 19.0.0+
• React DOM 18.0.0+ o React DOM 19.0.0+

🚀 Quick Start

import { Button } from 'ui-skillssity';

function App() {
  return (
    <Button variant="primary" size="medium" onClick={() => alert('Clicked!')}>
      Click me!
    </Button>
  );
}

Importante: Gli stili vengono iniettati automaticamente! Non è necessario importare file CSS.

📚 Componenti Disponibili

Button

Un componente pulsante versatile con diverse varianti, dimensioni e stati.

Props

| Prop | Tipo | Default | Descrizione | |------|------|---------|-------------| | variant | 'primary' \| 'secondary' \| 'outline' | 'primary' | Stile del pulsante | | size | 'small' \| 'medium' \| 'large' | 'medium' | Dimensione del pulsante | | disabled | boolean | false | Disabilita il pulsante | | onClick | () => void | - | Funzione chiamata al click | | type | 'button' \| 'submit' \| 'reset' | 'button' | Tipo HTML del pulsante | | children | React.ReactNode | - | Contenuto del pulsante |

Esempi

Varianti

import { Button } from 'ui-skillssity';

function VariantExample() {
  return (
    <>
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
    </>
  );
}

Dimensioni

import { Button } from 'ui-skillssity';

function SizeExample() {
  return (
    <>
      <Button size="small">Small</Button>
      <Button size="medium">Medium</Button>
      <Button size="large">Large</Button>
    </>
  );
}

Stati

import { Button } from 'ui-skillssity';

function StateExample() {
  return (
    <>
      <Button>Enabled</Button>
      <Button disabled>Disabled</Button>
    </>
  );
}

Con onClick

import { Button } from 'ui-skillssity';

function ClickExample() {
  const handleClick = () => {
    console.log('Button clicked!');
  };

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

In un Form

import { Button } from 'ui-skillssity';

function FormExample() {
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log('Form submitted!');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" placeholder="Name" />
      <Button type="submit" variant="primary">
        Submit
      </Button>
      <Button type="reset" variant="secondary">
        Reset
      </Button>
    </form>
  );
}

🛠️ Sviluppo Locale

Prerequisiti

• Node.js v18 o superiore
• npm, yarn o pnpm

Setup

1. Clona il repository

git clone https://github.com/yourusername/ui-skillssity.git
cd ui-skillssity

2. Installa le dipendenze

npm install

3. Avvia Storybook

npm run storybook

Storybook sarà disponibile su http://localhost:6006

Script Disponibili

| Script | Comando | Descrizione | |--------|---------|-------------| | Dev | npm run dev | Avvia Vite in modalità sviluppo | | Build | npm run build | Compila la libreria per produzione | | Storybook | npm run storybook | Avvia Storybook su porta 6006 | | Build Storybook | npm run build-storybook | Crea build statico di Storybook | | Check Package | npm run check-package | Verifica il contenuto del pacchetto npm |

📁 Struttura del Progetto

ui-skillssity/
├── .storybook/              # Configurazione Storybook
│   ├── main.ts
│   ├── preview.ts
│   └── vitest.setup.ts
├── dist/                    # Build output (generato automaticamente)
│   ├── ui-skillssity.js     # ES Module
│   ├── ui-skillssity.umd.cjs # UMD Bundle
│   └── *.d.ts               # TypeScript Definitions
├── src/
│   ├── components/
│   │   └── Button/
│   │       ├── Button.tsx           # Componente React
│   │       ├── Button.css           # Stili CSS
│   │       ├── Button.stories.tsx   # Storie Storybook
│   │       └── index.ts             # Export componente
│   └── index.ts             # Entry point principale
├── .gitignore
├── .npmignore               # File da escludere da npm
├── package.json
├── README.md
├── tsconfig.json            # Configurazione TypeScript
├── vite.config.ts           # Configurazione Vite + CSS injection
└── vitest.shims.d.ts

Architettura

• Bundler: Vite 7
• Framework: React 18/19
• Linguaggio: TypeScript 5
• Stili: CSS Vanilla con auto-injection
• Testing/Docs: Storybook 10
• CSS Injection: vite-plugin-css-injected-by-js

🏗️ Build e Deploy

Build della Libreria

Per creare un build di produzione:

npm run build

Questo comando:

1. Esegue TypeScript compiler (tsc) per generare i file .d.ts
2. Esegue Vite build per creare i bundle ES e UMD
3. Inietta automaticamente il CSS nei bundle JavaScript

Output nella cartella dist/:

• ui-skillssity.js - ES Module (per bundler moderni)
• ui-skillssity.umd.cjs - UMD bundle (per compatibilità)
• index.d.ts + altri .d.ts - TypeScript definitions

Pubblicazione su npm

Prima Pubblicazione

1. Login su npm

npm login

2. Verifica il contenuto del pacchetto

npm run check-package

3. Pubblica

npm publish --access public

Aggiornamenti Successivi

1. Modifica il codice

2. Aggiorna la versione

# Bug fix: 0.1.0 → 0.1.1
npm version patch

# Nuova feature: 0.1.0 → 0.2.0
npm version minor

# Breaking change: 0.1.0 → 1.0.0
npm version major

3. Pubblica l'aggiornamento

npm publish

Nota: Il comando prepublishOnly esegue automaticamente il build prima della pubblicazione.

Verificare la Pubblicazione

Dopo la pubblicazione, verifica su:

• npm: https://www.npmjs.com/package/ui-skillssity
• Installazione: npm info ui-skillssity

🧪 Testing

La libreria utilizza Storybook con addon Vitest per i test.

Eseguire i Test

npm run test

Visualizzare i Test in Storybook

I test sono integrati in Storybook e visibili nell'interfaccia:

npm run storybook

🔧 Configurazione

vite.config.ts

La configurazione Vite include:

• Plugin React per JSX
• Plugin CSS Injection per auto-inject degli stili
• Build ottimizzato per librerie
• External dependencies (React, React DOM)

tsconfig.json

• Target: ES2020
• Module: ESNext
• Strict mode abilitato
• Declaration files generati automaticamente

🤝 Come Contribuire

Aggiungere un Nuovo Componente

1. Crea la struttura

mkdir -p src/components/NuovoComponente

2. Crea i file necessari

src/components/NuovoComponente/
├── NuovoComponente.tsx        # Componente
├── NuovoComponente.css        # Stili
├── NuovoComponente.stories.tsx # Storybook stories
└── index.ts                   # Export

3. Implementa il componente

// NuovoComponente.tsx
import React from 'react';
import './NuovoComponente.css';

export interface NuovoComponenteProps {
  // props qui
}

export const NuovoComponente: React.FC<NuovoComponenteProps> = (props) => {
  // implementazione
  return <div>...</div>;
};

4. Esporta dal file index

// src/components/NuovoComponente/index.ts
export { NuovoComponente } from './NuovoComponente';
export type { NuovoComponenteProps } from './NuovoComponente';

5. Aggiungi all'export principale

// src/index.ts
export { NuovoComponente } from './components/NuovoComponente';
export type { NuovoComponenteProps } from './components/NuovoComponente';

6. Crea le Storybook Stories

// NuovoComponente.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { NuovoComponente } from './NuovoComponente';

const meta: Meta<typeof NuovoComponente> = {
  title: 'Components/NuovoComponente',
  component: NuovoComponente,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<typeof NuovoComponente>;

export const Default: Story = {
  args: {
    // props default
  },
};

7. Testa in Storybook

npm run storybook

📝 Versioning

Questo progetto segue Semantic Versioning:

• MAJOR (1.0.0): Breaking changes
• MINOR (0.1.0): Nuove feature backwards-compatible
• PATCH (0.0.1): Bug fixes backwards-compatible

📄 Licenza

ISC License - vedi LICENSE per dettagli.

🔗 Link Utili

• npm Package
• Storybook Documentation
• Vite Documentation
• TypeScript Documentation

👤 Autore

AndreiBurbulia

🙏 Ringraziamenti

Costruito con:

• React
• TypeScript
• Vite
• Storybook
• vite-plugin-css-injected-by-js

Made with ❤️ by AndreiBurbulia