Anche se DevOz è un'agenzia web che vive ogni giorno nel caos creativo della costruzione di soluzioni IT per i clienti, dobbiamo ammettere che amiamo, e sottolineo, AMIAMO sviluppare i nostri prodotti interni o pubblici da aggiungere alla nostra "suite".

Per mantenere una certa coesione e la nostra brand identity in tutti i contesti, ci siamo trovati di fronte a un dilemma: come possiamo centralizzare i nostri stili senza perdere la nostra unicità e, soprattutto, la nostra sanità mentale, reinventando la ruota ogni volta che creiamo un prodotto con una libreria o framework diverso? 🤯

Abbiamo esplorato il deserto delle opzioni, valutando soluzioni che andavano dai fogli di stile condivisi ospitati su un server remoto (decisamente troppo retrò per i nostri gusti) all'uso di variabili CSS su un CDN (sicuramente moderno, ma ancora non abbastanza flessibile per i nostri gusti esotici).

Alla fine, quasi per caso, come Archimede nella sua vasca, abbiamo avuto la nostra epifania (senza tutta quell'acqua, naturalmente): "Sarebbe fantastico se avessimo una libreria UI che potessimo installare con un semplice comando npm install!"

Implementiamolo!

Per semplicità, facciamo finta dobbiamo creare un package che includa la nostra color palette

1. Imposta il Tuo Pacchetto

Crea una Nuova Directory per il Tuo Pacchetto: Inizia creando una nuova directory dove vivrà il tuo pacchetto. Puoi farlo con un comando come mkdir my-shared-colors e poi navigare all'interno con cd my-shared-colors.

Inizializza un Nuovo Pacchetto Node.js: Esegui npm init o yarn init per creare un file package.json per il tuo pacchetto. Completa le richieste per specificare i dettagli del tuo pacchetto come il suo nome e la versione. Per i GitHub Packages, di solito nomini il tuo pacchetto con l'ambito della tua organizzazione, come @your-org/my-shared-colors.

Imposta la Struttura del Tuo Progetto: Organizza il tuo pacchetto. Poiché è principalmente per le costanti dei colori, potresti avere solo una directory src dove memorizzerai il tuo codice.

2. Sviluppa il Tuo Pacchetto

Crea il Tuo File di Costanti dei Colori: All'interno della directory src, crea un file (ad es., colors.js) dove esporterai le tue costanti dei colori. Ad esempio:

// src/colors.js
const colors = {
  primary: "#007bff",
  secondary: "#6c757d",
  success: "#28a745",
  // Aggiungi altri colori secondo necessità
};
module.exports = colors;

Assicurati che il Tuo Pacchetto Sia Importabile: Il tuo file principale (specificato in package.json sotto il campo main) dovrebbe esportare correttamente i tuoi colori. Se il tuo package.json non lo specifica già, aggiornalo per puntare al tuo file dei colori:

"main": "src/colors.js",

3. Preparati alla Pubblicazione

Autenticati con GitHub Packages: Per pubblicare pacchetti su GitHub Packages, devi autenticarti utilizzando un token di accesso personale (PAT) con gli ambiti appropriati (write:packages, read:packages e delete:packages potrebbero essere necessari a seconda del tuo caso d'uso). Configura il tuo file .npmrc per utilizzare il tuo PAT:

rubyCopy code
//npm.pkg.github.com/:_authToken=TOKEN

Sostituisci TOKEN con il tuo PAT effettivo.

Configura il Tuo package.json per GitHub Packages: Devi specificare il repository e le impostazioni di pubblicazione nel tuo package.json:

jsonCopy code
"name": "@your-org/my-shared-colors",
"version": "1.0.0",
"repository": "<https://github.com/your-org/my-shared-colors>",
"publishConfig": {
  "registry": "<https://npm.pkg.github.com/@your-org>"
}

Sostituisci @your-org con il nome effettivo della tua organizzazione GitHub e aggiusta l'URL del repository di conseguenza.

4. Pubblica il Tuo Pacchetto

Pubblica il Pacchetto: Con tutto configurato, pubblica il tuo pacchetto su GitHub Packages eseguendo:

bashCopy code
npm publish

oppure, se stai usando Yarn:

bashCopy code
yarn publish

Utilizzo del Pacchetto

Con @devozteam/devoz-shared-styles installato, puoi facilmente importare e utilizzare le costanti dei colori condivisi nel tuo progetto. Ecco alcuni esempi per iniziare:

In JavaScript o TypeScript

Puoi importare direttamente le costanti dei colori nei tuoi file JavaScript o TypeScript per usarle all'interno dei tuoi componenti o stili.

Importazione dei Colori

jsxCopy code
import DevOzColors from '@devozteam/devoz-shared-styles';

Utilizzo dei Colori

In un Componente

jsxCopy code
function WelcomeBanner() {
  return (
    <div style={{ backgroundColor: DevOzColors.BLACK, color: 'white', padding: '20px', textAlign: 'center' }}>
      Benvenuti nella Nostra Applicazione!
    </div>
  );
}

In Styled Components

Se stai utilizzando styled-components nel tuo progetto React, puoi incorporare direttamente i colori condivisi nelle definizioni dei tuoi componenti stilizzati.

jsxCopy code
import styled from 'styled-components';
import DevOzColors from '@devozteam/devoz-shared-styles';

const StyledButton = styled.button`
  background-color: ${DevOzColors.PINK};
  color: white;
  padding: 10px 15px;
  border: none;
  cursor: pointer;

  &:hover {
    background-color: ${DevOzColors.BLACK};
  }
`;

In Tailwind

Prima di tutto, devi importare le tue costanti di colore nel file di configurazione di Tailwind (tailwind.config.js). Ecco come puoi farlo:

1. Importa le Costanti dei Colori: Nel tuo tailwind.config.js, importa le costanti dei colori dal pacchetto.

jsxCopy code
// All'inizio del tuo tailwind.config.js
const colors = require('@devozteam/devoz-shared-styles');

1. Estendi il Tema Predefinito di Tailwind: Utilizza la proprietà extend all'interno della sezione theme della tua configurazione Tailwind per integrare i tuoi colori importati. Puoi sostituire o aggiungere alla palette di colori predefinita di Tailwind.

module.exports = {
  theme: {
    extend: {
      colors: {
        // Utilizza qui le tue costanti di colore
        'primary': colors.primary,
        'secondary': colors.secondary,
        // Aggiungi quanti colori hai bisogno
      },
    },
  },
  // Altra configurazione Tailwind...
};

Conclusione

Centralizzare i nostri stili con un pacchetto npm su GitHub Packages è stata un'avventura degna di essere raccontata. Ci ha permesso di mantenere la nostra creatività incontrollata (e la nostra sanità mentale) mentre costruiamo l'ecosistema digitale di DevOz.

Chiamate se avete bisogno di aiuto!