release/0.1.0 - Storybook

[BenoitSafari]

Installer Storybook

Installer Storybook et y integrer les composants existants.

https://storybook.js.org/

Criteres d'acceptation

• [x] La librairie Storybook est installée sur le projet
• [x] Storybbok est correctement configuré sur le projet
  • Le classement des stories suivent le pattern src/components/<component_name>/story.tsx
• [x] LupoButton est integré dans une story
  • L'erreur dans la fonction handleClassNames qui rend toujours la props "disabled" est corrigé
  • L'erreur dans la fonction handleClassNames est couverte par un nouveau test unitaire
  • Voir https://storybook.js.org/docs/writing-stories/typescript
• [ ] Le composant https://github.com/horameus/Lupokedex/issues/3 est integré dans storybook

Installation

Installer les packages suivants

npm i -D storybook @storybook/test @storybook/react-vite @storybook/react @storybook/blocks @storybook/addon-links @storybook/addon-essentials

Configuration

Creer les fichiers suivants:

| src/
---| .storybook/
------| main.ts
------| preview.tsx

main.ts

Configuration de storybook

import path from 'path';

export default {
    stories: ['patternVersFichiersStory'], // Expressions de resolution vers les fichiers story.tsx
    addons: ['@storybook/addon-links', '@storybook/addon-essentials'], // Ajout des addons installés
    framework: { name: '@storybook/react-vite' }, // Ajout du framework installé
    async viteFinal(config) { // Resolution des aliases (voir tsconfig.json et vite.config.ts)
        if (config?.resolve?.alias) {
            config.resolve.alias = {
                ...config.resolve.alias,
                '@': path.resolve(__dirname, '..'),
            };
        }
        return config;
    },
};

preview.tsx

Configuration de la page de rendu des Stories

import { Preview, StoryFn } from '@storybook/react';
import React from 'react';
import '../styles.global.css';

const Decorator = (Story: StoryFn) => { // Enveloppe les stories
    return (
        <div style={{ boxSizing: 'border-box', display: 'flex', padding: '2rem' }}>
            <Story />
        </div>
    );
};

const preview: Preview = {
    decorators: [Decorator],
    parameters: {
        actions: { argTypesRegex: '^on[A-Z].*' },
        controls: {
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/,
            },
        },
        layout: 'fullscreen',
        options: {
            storySort: {
                order: ['*'],
            },
        },
    },
};

export default preview;

[BenoitSafari]

Terminé par => https://github.com/horameus/Lupokedex/pull/11