Storybook - Costruire gli UI nell'isolamento
>
Storybook è un workshop frontend per la costruzione di componenti e pagine UI in isolamento. Ti aiuta a sviluppare e condividere stati e casi di bordo difficili da raggiungere senza dover eseguire l'intera app. Migliaia di squadre lo usano per lo sviluppo, il test e la documentazione dell'UI.
< >
< >
Traduzione:
Traduzione: Copia tutti i comandi
Traduzione: Generare PDF
< >
< >
## Tabella dei contenuti
- [Installazione]
- [Getting Started](#getting-started_)
- [Storie di scrittura](#writing-stories)
- [Story Formats](#story-formats)
- [Controlli e azioni](#controls--actions)
- [Addons]
- [Configurazione](#configuration)
- [Theming](_LINK_7__]
- [Testing]
- [Documentazione]
- [Deployment]
- [Caratteristiche avanzate](#advanced-features_)
- [Performance]
- [Integrazione]
- [Troubleshooting](#troubleshooting_)
- [Le migliori pratiche](_LINK_15__)
## Installazione
### Avvio rapido
Traduzione:
### Installazione manuale
Traduzione:
### Setup Framework-Specific
Traduzione:
### Struttura del progetto
Traduzione:
## Iniziare
### Storia di base
Traduzione:
### Esempio di componenti
Traduzione:
### Storia in esecuzione
Traduzione:
## Storie di scrittura
### Struttura della storia
Traduzione:
### Nome della storia
Traduzione:
### Componenti multipli
Traduzione:
### Parametri di storia
Traduzione:
## Formati di storia
### CSF 3.0 (Current)
Traduzione:
### CSF 2.0 (Legacy)
#
### Funzioni di rimborso personalizzate
Traduzione:
### Funzioni di gioco
Traduzione:
## Controlli e azioni
### Configurazione di ArgTypes
Traduzione:
### Azioni
Traduzione:
### Controlli avanzati
Traduzione:
## Addizioni
### Addonimenti essenziali
Traduzione:
### Aggiunta di Accessibilità
Traduzione:
### Visualizzare Addon
Traduzione:
### Design Tokens Addon
Traduzione:
### Addizioni personalizzate
Traduzione:
## Configurazione
### Configurazione principale
Traduzione:
### Configurazione di anteprima
Traduzione:
### Variabili dell'ambiente
Traduzione:
## Theming
### Personale Tema
Traduzione:
### Tema scuro
Traduzione:
### Interruttore a tema
Traduzione:
## Testing
### Test di visualizzazione
Traduzione:
### Test di interazione
Traduzione:
### Test di unità con storie
Traduzione:
### Test di Accessibilità
Traduzione:
## Documentazione
### Documentazione automatica
Traduzione:
### Documentazione personalizzata
#
### MDX Documentazione
Traduzione:
importazione { Pulsante } da './Button';
funzione MyComponent() {
ritorno (
*
< Button primario suClick={() => alert('Primary clicked!')}
Azione primaria
< / Pulsante
< Button onClick={() => alert('Secondo clicked!')}
Azione secondaria
< / Pulsante
< >
);
#
Traduzione:
### Pagine di documentazione
Traduzione:
npm install @company/design-system
Traduzione:
import { Pulsante, Input, Card } da '@company/design-system';
Traduzione:
## Distribuzione
### Costruzione statica
Traduzione:
### Netlify Distribuzione
Traduzione:
### Vercel Deployment
Traduzione:
### GitHub Pagine
Traduzione:
### Docker Deployment
Traduzione:
### AWS S3 + CloudFront
Traduzione:
## Caratteristiche avanzate
### Configurazione personalizzata di Webpack
Traduzione:
### Configurazione personalizzata di Babele
Traduzione:
### Configurazione ambientale-Specifica
Traduzione:
### Gestione personalizzata UI
Traduzione:
## Prestazioni
### Caricamento pigro
Traduzione:
### Ottimizzazione del Bundle
Traduzione:
### Ottimizzazione della memoria
Traduzione:
## Integrazione
### Integrazione degli strumenti di progettazione
Traduzione:
### Integrazione di test
__________
### Integrazione CI/CD
Traduzione:
## Risoluzione dei problemi
### Questioni comuni
Traduzione:
### Modalità di debito
Traduzione:
### Problemi di prestazione
Traduzione:
### Costruisci i problemi
Traduzione:
## Migliori Pratiche
### Organizzazione della storia
- ** Struttura gerarchica ** Utilizzare modelli di denominazione coerenti
- **Logical Grouping**: Gruppo componenti correlati
- "Clear Naming"... Utilizzare nomi di storia descrittiva
- # Documentazione # Includere la documentazione completa
### Sviluppo dei componenti
- **Isolation**: Sviluppare componenti in isolamento
- **Props Interface**: Progettare interfacce pro trasparenti e coerenti
- ** Valori di default**: Fornire predefinizioni ragionevoli
- **Error Handling**: Custodie con bordi aggraziati
### Strategia di test
- **Visual Testing**: Utilizzare test di regressione visiva
- **Interaction Testing**: Interazioni utente di prova
- ** Test di accessibilità**: Assicurare che i componenti siano accessibili
- # Unit Testing # Logica dei componenti di prova
### Ottimizzazione delle prestazioni
- **Carico pigro ** Utilizzare story store v7 per carico pigro
- Traduzione: Ottimizzare la configurazione del webpack
- **Memory Management** Pulire correttamente le risorse
- **Build Optimization**: Minimizzare i tempi di costruzione
### Collaborazione team
- **Design System**: Mantenere un sistema di progettazione coerente
- # Documentazione # Mantenere la documentazione aggiornata
- **Code Recensioni**: Review story e componenti
- **Automation**: Automatizzare test e distribuzione
---
## Sintesi
Storybook è uno strumento essenziale per lo sviluppo moderno di frontend che permette:
- ** Isolamento completo**: sviluppare e testare i componenti UI in modo indipendente
- ** Documentazione virtuale ** Creare documentazione vivente per sistemi di progettazione
- **Interactive Development**: Costruire componenti con feedback in tempo reale
- **Testing Integration**: Test di visualizzazione, interazione e accessibilità
- **Team Collaboration**: Condividere componenti tra team e stakeholder
- **Design System Management**: Mantenere i modelli di interfaccia utente coerenti
I vantaggi principali includono cicli di sviluppo più veloci, una migliore qualità dei componenti, una migliore collaborazione del team e una documentazione completa. Storybook supporta tutti i principali framework frontend e fornisce ampie opzioni di personalizzazione attraverso addons e configurazione.
Traduzione:
copia funzioneToClipboard() {}
const commands = document.querySelectorAll('code');
tutti i Comandi = '';
comandi. per ogni(cmd => AllCommands += cmd.textContent + '\n');
navigatore.clipboard.writeText(tutti iComandi);
alert('Tutti i comandi copiati a clipboard!');
#
funzione generaPDF() {
finestra.print();
#
< >