-
Notifications
You must be signed in to change notification settings - Fork 0
Initialisation de Storybook
- Installation de Storybook
- Configuration de la localisation des stories
- Fournir Tailwind aux Stories
- Fournir aux Stories la typographie
Lancer la commande suivante dans le terminal: npx storybook@latest init
Supprimer l'addon: @storybook/addon-onboarding de la configuration Storybook car inutile pour les non néophytes
Supprimer la libraire @storybook/addon-onboarding du package.json
Installer Storybook dans un projet Next
Dans le fichier de configuration Storybook: main.ts
Changer les destinations en fonction du besoin:
stories: [
"../stories/**/*.mdx",
"../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
],
Dans mon cas, j'assigne les valeurs suivantes afin de placer les stories au niveau des composants d'interface:
stories: [
"../**/*.mdx",
"../**/*.stories.@(js|jsx|mjs|ts|tsx)",
],
Supprimer le dossier stories avec tout les fichiers d'examples
Importer le fichier global.css dans le fichier preview.tsx
Dans Next, il existe une fonctionnalité d'auto-hébergement intégré pour tout fichier de police. Cela signifie que vous pouvez charger des polices Web de manière optimale sans aucun changement de mise en page, grâce à la propriété CSS sous-jacente d'ajustement de la taille utilisée.
Ce nouveau système de polices vous permet également d'utiliser facilement toutes les polices Google en gardant à l'esprit les performances et la confidentialité. Les fichiers CSS et de polices sont téléchargés au moment de la construction et auto-hébergés avec le reste de vos ressources statiques. Aucune requête n'est envoyée à Google par le navigateur.
Pour fournir aux stories la typographie par le biais de la fonctionnalité next/font:
Si on utilise Google Fonts: Billet de blog
Si on utilise Local Fonts: Documentation Storybook sur la feature next-font Commentaire d'une issue