A Storybook használatának első lépései a Reactban

Próbálta már az összes felhasználói felület összetevőjét egy helyre elhelyezni a Reactban?

Ha még új a React világában, akkor valószínűleg nem fog.

Mit ért ez alatt?

Lásd a react-beautiful-dnd példák.

A példákban látottakat történeteknek nevezzük. A történetek létrehozásához használt eszközt pedig Storybooknak hívják.

Most már megértette, miről fogunk beszélni ebben a cikkben. Gond nélkül fedezzük fel.

Mi az a mesekönyv?

A Storybook egy felhasználói felülettel elkülönített fejlesztői környezet, amely játszóteret biztosít az összetevők számára. Különféle módon játszhatunk az összetevőinkkel anélkül, hogy futtatnánk a fő alkalmazást. A mesekönyvet a portjában futtathatjuk a beállítással.

Nem korlátozódik a Reactra. A mesekönyvet a legtöbb frontend keretrendszerrel használhatjuk, mint például a Vue, Angular, Mithril, Marko, Svelte stb.,

A mesekönyvről többet megtudhat itt.

Mi az a történet?

A történet határozza meg az összetevő renderelt állapotát. Ha egy közös komponenst veszünk, akkor azt többféleképpen használhatjuk kellékekkel. Mindegyik állapothoz írhatunk egy történetet.

Tegyük fel, hogy van egy Button komponensünk.

Egy gomb különböző állapotokban létezhet, például letiltott, betöltés, elsődleges, másodlagos, kicsi, nagy, közepes stb.. Ha az összes állapotot felsoroljuk, akkor nagyon nehéz lesz továbblépni az oktatóanyagban. Szerintem érted. Többet fog kapni, ha elkezd dolgozni a mesekönyvvel.

A gomb történeteit különböző esetekben láthatja (Nagy, Közepes, Kicsi).

Mesekönyv beállítása egy projektben

Mesekönyvet állítunk össze egy reakcióprojektben.

Gyerünk.

• Hozzon létre egy react projektet a következő paranccsal. Nevezhetsz, amit akarsz.

npx create-react-app storybook-demo

• Most telepítse a mesekönyvet a projektbe a következő paranccsal.

npx sb init

Befejeztük a mesekönyv beállítását.

A mesekönyv külön szervert biztosít számunkra.

Hogyan kell elindítani?

A mesekönyv automatikusan hozzáad egy parancsot a szkriptfájlunkhoz. Ellenőrizheti a package.json fájlban a szkriptek részben. A mesekönyvszerver elindításához egyelőre futtassa a következő parancsot.

npm run storybook

A Storybook új kiszolgálót indít a package.json fájl szkriptek részében megadott porttal. Ez automatikusan megnyitja a mesekönyvet az alapértelmezett böngészőnkben (ugyanaz, mint a react szerver).

Alapértelmezés szerint különböző történeteket fog látni benne. Ha nem akarja, eltávolíthatja őket, vagy megőrizheti referenciaként. Amint azt az előző részben tárgyaltuk, egy gombnak több állapota is lehet, ezeket a mesekönyvben láthatja (nem minden állapot szerepel). Az oktatóanyag utolsó részében a gombhoz egy nagy történetkészletet fogunk írni.

Fedezze fel a mesekönyv különböző részeit, és ismerkedjen meg a különböző részekkel. Ezek közül néhányat ismertetünk az oktatóanyagban.

Írjuk meg első történetünket.

Tesztelő mesekönyv

Láttuk futni a mesekönyvet és néhány példát benne.

• Hozzon létre egy Button nevű mappát az src mappában.
• Hozzon létre Button.jsx, Button.css és állandós.js fájlokat
• Helyezze el a megfelelő kódot az alábbi kódrészletekből a fájlokban.

Button.jsx

import React, { Component } from "react";
import PropTypes from "prop-types";

import "./Button.css";

import { buttonTypes, buttonVariants, buttonSizes } from "./constants";

class Button extends Component {
    static defaultProps = {
        isDisabled: false,
        type: "filled",
        variant: "oval",
        size: "medium",
        backgroundColor: "#1ea7fd",
        textColor: "#ffffff",
    };

    static buttonTypes = buttonTypes;
    static buttonVariants = buttonVariants;
    static buttonSizes = buttonSizes;

    renderButton = () => {
        const {
            text,
            isDisabled,
            type,
            variant,
            size,
            backgroundColor,
            textColor,
            onClick,
        } = this.props;
        return (
            <button
                onClick={onClick}
                className={`default ${variant} ${size} ${
                    isDisabled ? "disabled" : ""
                }`}
                style={
                    type === buttonTypes.outline
                        ? {
                              border: `1px solid ${backgroundColor}`,
                              color: "#000000",
                              backgroundColor: "transparent",
                          }
                        : {
                              backgroundColor: `${backgroundColor}`,
                              border: `1px solid ${backgroundColor}`,
                              color: textColor,
                          }
                }
                disabled={isDisabled}
            >
                {text}
            </button>
        );
    };

    render() {
        return this.renderButton();
    }
}

Button.propTypes = {
    text: PropTypes.string,
    isDisabled: PropTypes.bool,
    type: PropTypes.oneOf([buttonTypes.outline, buttonTypes.filled]),
    variant: PropTypes.oneOf([buttonVariants.oval, buttonVariants.rectangular]),
    size: PropTypes.oneOf([
        buttonSizes.small,
        buttonSizes.medium,
        buttonSizes.large,
    ]),
    backgroundColor: PropTypes.string,
    textColor: PropTypes.string,
    onClick: PropTypes.func,
};

export { Button };

Gomb.css

.default {
    border: none;
    cursor: pointer;
    background-color: transparent;
}

.default:focus {
    outline: none;
}

.disabled {
    opacity: 0.75; 
    cursor: not-allowed;
}
.small {
    font-size: 12px;
    padding: 4px 8px;
}

.medium {
    font-size: 14px;
    padding: 8px 12px;
}

.large {
    font-size: 16px;
    padding: 12px 16px;
}

.oval {
    border-radius: 4px;
}

.rectangular {
    border-radius: 0;
}

konstansok.js

export const buttonTypes = {
    outline: "outline",
    filled: "filled",
};

export const buttonVariants = {
    oval: "oval",
    rectangular: "rectangular",
};

export const buttonSizes = {
    small: "small",
    medium: "medium",
    large: "large",
};

Mi ez a kód?

A Buttonhoz írtunk egy közös összetevőt, amely többféleképpen használható. Most van egy összetevőnk, amelynek különböző állapotai lehetnek.

Írjuk meg első történetünket az alábbi lépések követésével.

• Hozzon létre egy Button.stories.jsx nevű fájlt
• Importálja a Reactot és a Button komponensünket a fájlba.
• Most adjon meg egy címet vagy útvonalat az összetevőtörténeteinknek. A következő kód segítségével határozzuk meg.

export default {
   title: ‘common/Button’,
}

A fenti kód az aktuális fájlban található összes történetet a közös/Button/ könyvtárba helyezi.

• Exportáljon egy gombot a kötelező kellékekkel az alábbiak szerint.

export const defaultButton = () => (
    <Button text=”Default Button” onClick={() => {}} />
);

Elkészítettük első történetünket. Futtassa a mesekönyvet a következő paranccsal, és nézze meg a kimenetet.

npm run storybook

Még több történetet fogunk írni, a végén ne aggódj.

Hogyan hasznos ez a Frontend fejlesztésben?

Mi a fő előnye a mesekönyv használatának?

Tegyük fel, hogy egy 10 fős csapatban dolgozunk. És ellenőriznünk kell a közös összetevőket, amelyeket mindenki írt az aktuális munkaprojekthez.

Hogyan tehetjük ezt meg?

Minden általános komponenshez el kell mennünk, hogy ellenőrizzük őket. De ez időigényes, és nem kedvelt módszer számunkra. Itt az új vendégmesekönyvünk.

Hogyan használjuk fel a problémánk leküzdésére?

A közös komponensekhez (bármilyen UI komponenshez) történeteket írhatunk a storybook segítségével. És amikor a csapattársad meg akarja nézni mások közös összetevőit, egyszerűen futtatja a storybook szervert, és ott fogja látni az összes felhasználói felület összetevőt, ahogy fent láttuk.

Sokkal többet tehetünk a mesekönyvben megjelenített komponensekkel. A Storybooknak van egy Addons nevű koncepciója, amely szuperképességeket ad történeteinknek.

Tegyük fel, hogy magában a mesekönyvben kell ellenőriznünk a felhasználói felület összetevőinek reszponzivitását, a mesekönyvben használhatjuk a Viewport nevű addont. A következő részekben többet megtudunk a kiegészítőkről.

Munka a mesekönyvvel

Ebben a részben különböző történeteket írunk le, amelyek meghatározzák a közös összetevőgombunk különböző állapotait.

Mesét írni nem olyan nehéz. A történet egy összetevő állapotát határozza meg. Ha látja egy komponens kellékeit, akkor könnyen megértheti az alkatrész különböző használati eseteit.

Írjunk néhány történetet opcionális kellékek megadásával.

export const largeButton = () => (
    <Button text="Large Button" onClick={() => {}} size="large" />
);
export const outlineSmallButton = () => (
    <Button
        text="Outline Small Button"
        onClick={() => {}}
        size="small"
        type="outline"
    />
);
export const rectangularLargeButton = () => (
    <Button
        text="Rectangular Large Button"
        onClick={() => {}}
        size="large"
        variant="rectangular"
    />
);


export const disabledButton = () => (
    <Button text="Disabled Button" onClick={() => {}} isDisabled={true} />
);


export const warningButton = () => (
    <Button
        text="Warning Button"
        onClick={() => {}}
        backgroundColor="orange"
    />
);

A fenti három történet a Button összetevőnk különböző használati eseteit határozza meg. Most rajtad a sor, hogy hozzáadjon néhány további történetet a közös összetevőnkhöz. Próbáld meg hozzáadni a tiltottSamllRectangularButton, veszélyButton, successDisabledButton stb.,

A fenti esetekre nem adok kódot. Magának kell megírnia, hogy megértse. Megtekintheti az eddig írt történetek teljes kódját.

import React from "react";

import { Button } from "./Button";

export default {
    title: "src/common/Button",
};

export const defaultButton = () => (
    <Button text="Default Button" onClick={() => {}} />
);

export const largeButton = () => (
    <Button text="Large Button" onClick={() => {}} size="large" />
);

export const outlineSmallButton = () => (
    <Button
        text="Outline Small Button"
        onClick={() => {}}
        size="small"
        type="outline"
    />
);

export const rectangularLargeButton = () => (
    <Button
        text="Rectangular Large Button"
        onClick={() => {}}
        size="large"
        variant="rectangular"
    />
);

export const disabledButton = () => (
    <Button text="Disabled Button" onClick={() => {}} isDisabled={true} />
);

export const warningButton = () => (
    <Button
        text="Disabled Button"
        onClick={() => {}}
        backgroundColor="orange"
    />
);

Most már teljes fogást kapott egy komponens történeteinek megírásában.

Ugorjunk a következő részre, ahol megismerjük a kiegészítőket, és azt, hogy hogyan erősítik a történeteinket.

Mesekönyv kiegészítések

Alapértelmezés szerint több kiegészítőnk is elérhető lesz. Ebben a részben megvizsgáljuk a fejlesztésünkhöz leghasznosabb kiegészítőket.

Növeljük a Button-történeteinket.

Vezérlők

A vezérlők egy olyan funkciót adnak hozzá, amely egyéni kellékeket ad a mesekönyvben lévő összetevőhöz. A Gomb komponensünkhöz vezérlőket adhatunk a mesekönyv különböző kellékeinek megváltoztatásához.

Tegyük fel, hogy meg kell találnunk a Gomb háttérszínének legjobb színét. Időigényes lesz, ha teszteljük, hogy ellenőrizzük a háttérszínt úgy, hogy egyenként adjuk meg a komponenst. Ehelyett hozzáadhatunk egy vezérlőt, amellyel kiválaszthatjuk a mesekönyvben a különböző színt. Magában a mesekönyvben tesztelhetjük a háttérszínt.

Nézzük meg, hogyan adhatunk vezérlőket Gombtörténeteinkhez.

Először is meg kell határoznunk az összes kelléket a cím alatt az alábbiak szerint.

export default {
    title: "src/common/Button",
    argTypes: {
        text: { control: "text" },
        backgroundColor: { control: "color" },
        isDisabled: { control: "boolean" },
        size: {
            control: { type: "select", options: ["small", "medium", "large"] },
        },
        type: {
            control: { type: "select", options: ["filled", "outline"] },
        },
        variant: {
            control: { type: "select", options: ["oval", "rectangular"] },
        },
    },
};

Ezután válassza le a kellékeket az alkatrészről, és adja meg őket arg-ként az alábbiak szerint.

export const outlineSmallButton = (args) => (
    <Button {...args} onClick={() => {}} />
);
outlineSmallButton.args = {
    text: "Outline Small Button",
    size: "small",
    type: "outline",
};

A vezérlőket az összetevő előnézeti ablakának alján láthatja.

A vezérlők lapot az összetevő előnézeti ablakának alján láthatja. Játssz körülötte.

Frissítse az összes történetet a fentiek szerint. Ez inkább olyan, mint a mesekönyv-kiegészítők szintaxisának ismerete. Az argTypes-ben különböző típusú vezérlőket használtunk. A mesekönyvben megtalálható összes vezérlőelem megtalálható itt.

A frissített gombtörténetek a következőképpen néznek ki.

import React from "react";

import { Button } from "./Button";

export default {
    title: "src/common/Button",
    argTypes: {
        text: { control: "text" },
        backgroundColor: { control: "color" },
        isDisabled: { control: "boolean" },
        size: {
            control: { type: "select", options: ["small", "medium", "large"] },
        },
        type: {
            control: { type: "select", options: ["filled", "outline"] },
        },
        variant: {
            control: { type: "select", options: ["oval", "rectangular"] },
        },
    },
};

export const defaultButton = (args) => <Button {...args} onClick={() => {}} />;
defaultButton.args = {
    text: "Default Button",
};

export const largeButton = (args) => (
    <Button {...args} onClick={() => {}} size="large" />
);
largeButton.args = {
    text: "Large Button",
};

export const outlineSmallButton = (args) => (
    <Button {...args} onClick={() => {}} />
);
outlineSmallButton.args = {
    text: "Outline Small Button",
    size: "small",
    type: "outline",
};

export const rectangularLargeButton = (args) => (
    <Button {...args} onClick={() => {}} />
);
rectangularLargeButton.args = {
    text: "Rectangular Large Button",
    size: "large",
    variant: "rectangular",
};

export const disabledButton = (args) => <Button {...args} onClick={() => {}} />;
disabledButton.args = {
    text: "Disabled Button",
    isDisabled: true,
};

export const warningButton = (args) => <Button {...args} onClick={() => {}} />;
warningButton.args = {
    text: "Warning Button",
    backgroundColor: "orange",
};

Akciók

A műveletek események a JavaScriptben. Kattintson egy olyan gombra, amely esemény a JavaScriptben. Néhány műveletet elvégezhetünk a gombnyomással az Actions addon segítségével.

A cselekvésekkel ellenőrizhetjük, hogy az események megfelelően működnek-e vagy sem. A letiltott gombra nem lehet kattintani, az engedélyezett gombra pedig kattinthatónak kell lennie. Az akciók segítségével tudjuk ezt biztosítani.

Nézzük meg, hogyan adhatunk műveletet a gombkattintáshoz.

Korábban anonim funkciót adtunk az onClick kellékeknek. Most frissítenünk kell.

• Importálja a műveletet a mesekönyv-kiegészítőből a következő utasítással.

import { action } from "@storybook/addon-actions";

• Cserélje le az összes () => {} értéket a következő utasításra.

action("Button is clicked!")

Most lépjen a mesekönyvbe, és kattintson egy gombra. Az üzenetet a vezérlők lap melletti Műveletek lap alatt fogja látni. Az üzenet nem kerül kinyomtatásra, ha a letiltott gombra kattint, mivel az le van tiltva.

A műveletet különféle eseményekhez használhatjuk, például az onChange, onMouseOver, onMouseOut stb., hogy megbizonyosodjunk arról, hogy megfelelően működnek. Próbálja meg ugyanezt megvalósítani az onChange esetében egy bemeneti elemnél.

A műveleteket a dokumentációban találja itt.

Háttér

Az előnézeti ablak hátterét a háttérkiegészítővel módosíthatjuk. Nem kell kódot írnunk. Csak változtasd meg a mesekönyvben. A gifet alább láthatjátok.

Viewport

A mesekönyvben a komponenseink reakciókészségét is tesztelhetjük. Tekintse meg az alábbi gif-et, hogy tájékozódjon a nézetablak opcióiról.

Dokumentumok

Összetevőinket a mesekönyvben dokumentálhatjuk a docs addon segítségével. Hasznosabb, ha csapatban dolgozunk. El fogják olvasni az összetevőt, és közvetlenül megértik. Rengeteg időt takarít meg a fejlesztőknek.

A mesekönyvek összetevőinek előnézeti ablakában a Dokumentumok láthatók a Vászon lap jobb felső sarkában. Tartalmazni fogja egy összetevő összes történetének összes dokumentumát. A Button.stories.mdx fájlt kell használnunk, ha azt a komponenst szeretnénk dokumentálni, amely mind a markdownt, mind a komponens renderinget tartalmazza. Csak írunk bele néhány extra leértékelési kódot az összetevő történetekkel együtt.

Dokumentumot írunk történeteinkhez. A kód tartalmazza a leértékelést és a komponensek megjelenítését. Az egész csak a szintaxis megtanulása. Első pillantásra megkapod.

Lássuk a Button.stories.mdx doc kódot.

<!--- Button.stories.mdx -->

import {
    Meta,
    Story,
    Preview,
    ArgsTable
} from '@storybook/addon-docs/blocks';

import { Button } from './Button';

<Meta title="MDX/Button" component={Button} />

# Button Documentation

With `MDX` we can define a story for `Button` right in the middle of our
Markdown documentation.

<ArgsTable of={Button} />

export const Template = (args) => <Button {...args} />

## Default Button
We can write the documentation related to the Default Button
<Preview>
    <Story name="Default Button" args={{
        text: 'Default Button'
    }}>
    {Template.bind({})}
   </Story>
</Preview>

## Large Button
We are writing sample docs for two stories, you can write rest of them
<Preview>
    <Story name="Large Button" args={{
        text: "Large Button",
        }}>
        {Template.bind({})}
    </Story>
</Preview>

Tudjon meg többet a dokumentálási összetevőkről itt.

A kiegészítőkről többet megtudhat itt.

Következtetés

Remélem tetszett az oktatóanyag, és megismerted a mesekönyvet. És hatékonyan használja a csapatában, hogy eredményes legyen a munka.

Új a React? Tekintse meg ezeket a tanulási forrásokat.

Boldog kódolást 🙂