Centralizzare i nostri stili in NPM Packages
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:
- 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');
- Estendi il Tema Predefinito di Tailwind: Utilizza la proprietà
extend
all'interno della sezionetheme
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.