@weirdoo-srl/woffice
Advanced tools
React component library for Weirdoo - a complete design system with TypeScript and SCSS
WOffice è la libreria di componenti ufficiale di Weirdoo, progettata per garantire coerenza, accessibilità e qualità nei nostri prodotti digitali.
WOffice nasce dall'esigenza di standardizzare l'esperienza utente attraverso tutti i prodotti Weirdoo, fornendo ai nostri team di sviluppo e design uno strumento condiviso per creare interfacce moderne, accessibili e performanti.
# Clona il repository
git clone https://github.com/weirdoo/woffice.git
cd woffice
# Installa le dipendenze
yarn install
# Avvia Storybook per esplorare i componenti
yarn storybook
# Oppure visualizza la versione online
# https://68b7f08cda73791b842e0029-uczerdchdj.chromatic.com/
# Installa WOffice come dipendenza
yarn add woffice
# Oppure per sviluppo locale
yarn add file:../woffice
import { WButton, WInput, WTextarea, WErrorMessage } from 'woffice';
function MyForm() {
return (
<form>
<WInput
name="email"
label="Email"
type="email"
required
/>
<WTextarea
name="description"
label="Descrizione"
placeholder="Inserisci la tua descrizione..."
rows={4}
resize="vertical"
maxLength={500}
minLength={10}
/>
<WButton variant="primary" type="submit">
Invia
</WButton>
<WErrorMessage error="Email non valida" />
</form>
);
}
src/
├── components/ # Componenti React
│ ├── atoms/ # Componenti atomici (WInput, WErrorMessage)
│ ├── molecules/ # Componenti molecolari
│ └── organisms/ # Componenti organismici
├── styles/ # Sistema di design
│ ├── _breakpoints.scss # Breakpoints responsive
│ ├── _utils.scss # Funzioni di utilità
│ ├── _index.scss # Import principale
│ └── themes/ # Sistema di temi
│ ├── _base.scss # Variabili base
│ ├── _wtheme.scss # Tema WOffice
│ └── _chtheme.scss # Tema Chiron
├── models/ # Tipi TypeScript
└── types/ # Dichiarazioni di tipo
WOffice utilizza un sistema di design basato su:
WOffice supporta un sistema di temi flessibile e facilmente estendibile. Vedi la documentazione completa sui temi per dettagli su:
// Personalizza i colori tramite CSS Custom Properties
[data-theme="mytema"] {
--wo-color-primary: #your-brand-color;
--wo-color-secondary: #your-secondary-color;
--wo-font-family-primary: 'YourFont', sans-serif;
// ... altre variabili
}
# Avvia Storybook
yarn storybook
# Build per produzione
yarn build-storybook
# Test interattivi
yarn test-storybook
# Test in modalità CI
yarn test-storybook:ci
# Test in modalità watch
yarn test-storybook:watch
WOffice utilizza Chromatic per test automatici completi durante le Pull Request:
# Test locale con Chromatic
yarn chromatic
# Test solo componenti modificati
npx chromatic --only-changed
📖 Guida completa ai test con Chromatic
🔍 Configurazione Status Checks
# Esegui tutti i test
yarn test
# Test con coverage
yarn test:coverage
# Test in modalità watch
yarn test:watch
# Test con Playwright
yarn test:e2e
# Test specifici
yarn test:e2e:components
La documentazione completa è disponibile in Storybook, dove puoi:
Il link è pubblico e accessibile a tutti senza registrazione!
Ogni componente include:
⚠️ Importante: Prima di contribuire, assicurati di aver letto e compreso gli Standard di Sviluppo Weirdoo. Questi standard garantiscono coerenza e qualità in tutto il codicebase.
git checkout -b feature/nuova-feature)git commit -am 'Aggiunge nuova feature')git push origin feature/nuova-feature)Per garantire uno stile di codice coerente, il repository è configurato con formattazione automatica al commit:
Non è necessario fare nulla manualmente: al comando git commit verranno eseguiti i check e la formattazione dei file modificati.
Comandi utili:
# Esegui Prettier su tutto il progetto
npx prettier --write "src/**/*.{ts,tsx,js,jsx,scss,css,json,md}"
# Esegui i task di lint-staged (sui file staged)
npx lint-staged
# Lint completo del progetto con ESLint
yarn lint
# Lint completo degli stili con Stylelint
yarn lint:styles
Configurazione rilevante:
.husky/pre-commit → esegue npx lint-stagedpackage.json → sezione lint-staged con pattern: src/**/*.{ts,tsx,js,jsx,scss,css,md,json}Per garantire coerenza e qualità nel codice, tutti i componenti WOffice devono seguire gli standard definiti nel nostro repository di onboarding:
Questo repository contiene:
Ogni contributo passa attraverso:
WOffice segue Semantic Versioning:
# Build per produzione
yarn build
# Pubblica su npm
yarn publish
# Genera changelog
yarn changelog
WOffice è sviluppato e mantenuto da Weirdoo, azienda specializzata in:
Questo progetto è rilasciato sotto licenza MIT. Vedi il file LICENSE per i dettagli.
WOffice - Costruiamo il futuro digitale insieme 🚀
Sviluppato con ❤️ dal team Weirdoo
FAQs
React component library for Weirdoo - a complete design system with TypeScript and SCSS
We found that @weirdoo-srl/woffice demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now scans OpenVSX extensions, giving teams early detection of risky behaviors, hidden capabilities, and supply chain threats in developer tools.
Product
Bringing supply chain security to the next generation of JavaScript package managers
Product
A safer, faster way to eliminate vulnerabilities without updating dependencies