Zkusili jste někdy umístit všechny komponenty uživatelského rozhraní na místo v Reactu?
Pokud jste ve světě Reactu nováčkem, pravděpodobně nebudete.
co se tím myslí?
Viz reagovat-krásný-dnd příklady.
To, co jste viděli v příkladech, se nazývá příběhy. A nástroj, který se používá k vytváření příběhů, se nazývá Storybook.
Nyní jste pochopili, o čem budeme hovořit v tomto článku. Bez řečí pojďme prozkoumat.
Table of Contents
Co je Storybook?
Storybook je vývojové prostředí izolované na uživatelském rozhraní, které poskytuje hřiště pro vaše komponenty. S našimi komponentami si můžeme hrát různými způsoby, aniž bychom spouštěli naši hlavní aplikaci. Můžeme spustit pohádkovou knihu v jejím portu s nastavením.
Není to omezeno na React. Příběhovou knihu můžeme použít s většinou frontendových frameworků jako Vue, Angular, Mithril, Marko, Svelte atd.,
Více o pohádkové knize najdete tady.
co je to příběh?
Příběh definuje vykreslený stav vaší komponenty. Pokud vezmeme běžnou součástku, můžeme ji s rekvizitami využít různě. Pro každý z těchto stavů můžeme napsat příběh.
Řekněme, že máme komponentu Button.
Tlačítko může existovat v různých stavech, jako je zakázáno, načítání, primární, sekundární, malé, velké, střední atd.. Pokud vypíšeme všechny stavy, bude velmi obtížné se v tutoriálu pohnout vpřed. Myslím, že to chápeš. Více získáte, když začnete pracovat s pohádkovou knihou.
Příběhy tlačítka můžete vidět v různých případech (Velký, Střední, Malý).
Nastavení Storybooku v projektu
Vytvoříme příběhovou knihu v projektu reakce.
Pojďme.
- Vytvořte projekt reakce pomocí následujícího příkazu. Můžete si pojmenovat, jak chcete.
npx create-react-app storybook-demo
- Nyní nainstalujte příběhovou knihu do svého projektu pomocí následujícího příkazu.
npx sb init
Dokončili jsme nastavení pohádkové knihy.
Pohádková kniha nám poskytuje samostatný server.
Jak to spustit?
Kniha příběhů automaticky přidá příkaz do našeho souboru skriptu. Můžete to zkontrolovat v souboru package.json v sekci skripty. Prozatím spusťte následující příkaz pro spuštění serveru příběhů.
npm run storybook
Storybook spustí nový server s portem uvedeným v sekci skriptů souboru package.json. Automaticky otevře příběhovou knihu v našem výchozím prohlížeči (stejném jako server pro reakce).
Ve výchozím nastavení v něm uvidíte různé příběhy. Pokud je nechcete, můžete je odstranit nebo si je ponechat pro referenci. Jak jsme probrali v předchozí části, tlačítko může mít více stavů, můžete je vidět v knize příběhů (ne všechny uvedené stavy). V poslední části tohoto tutoriálu napíšeme velkou sadu příběhů pro tlačítko.
Prozkoumejte různé části pohádkové knihy a seznamte se s různými částmi. V tutoriálu se budeme zabývat několika z nich.
Pojďme napsat náš první příběh.
Testovací pohádková kniha
Viděli jsme spuštěnou pohádkovou knihu a několik příkladů v ní.
- Ve složce src vytvořte složku s názvem Button.
- Vytvořte soubory s názvem Button.jsx, Button.css a konstanty.js
- Umístěte příslušný kód z níže uvedených úryvků do souborů.
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 };
Button.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;
}
konstanty.js
export const buttonTypes = {
outline: "outline",
filled: "filled",
};
export const buttonVariants = {
oval: "oval",
rectangular: "rectangular",
};
export const buttonSizes = {
small: "small",
medium: "medium",
large: "large",
};
Co je to za kód?
Napsali jsme společnou komponentu pro Button, kterou lze použít různými způsoby. Nyní máme komponentu, která může mít různé stavy.
Pojďme napsat náš první příběh podle níže uvedených kroků.
- Vytvořte soubor s názvem Button.stories.jsx
- Importujte React a naši komponentu Button do souboru.
- Nyní definujte název nebo cestu našich dílčích příběhů. Definujeme jej pomocí následujícího kódu.
export default {
title: ‘common/Button’,
}
Výše uvedený kód umístí všechny příběhy, které jsou v aktuálním souboru, do adresáře common/Button/.
- Exportujte tlačítko s povinnými rekvizitami následovně.
export const defaultButton = () => (
<Button text=”Default Button” onClick={() => {}} />
);
Dokončili jsme náš první příběh. Spusťte knihu příběhů pomocí následujícího příkazu a podívejte se na výstup.
npm run storybook
Nakonec napíšeme další příběhy, nebojte se.
Jak je to užitečné při vývoji frontendu?
Jaká je hlavní výhoda používání pohádkové knihy?
Řekněme, že pracujeme v týmu o 10 členech. A musíme zkontrolovat běžné komponenty, které každý napsal pro aktuální pracovní projekt.
Jak to můžeme udělat?
Musíme je zkontrolovat u každé běžné součásti. Je to však časově náročné a není to pro nás preferovaný způsob. Přichází naše nová návštěvní kniha.
Jak to využít k překonání našeho problému?
Můžeme psát příběhy pro běžné komponenty (jakékoli komponenty uživatelského rozhraní) pomocí storybooku. A kdykoli bude chtít váš spoluhráč zkontrolovat běžné součásti ostatních, jednoduše spustí server příběhové knihy a uvidí tam všechny součásti uživatelského rozhraní, jak jsme viděli výše.
S vykreslenými součástmi v pohádkové knize můžeme udělat mnohem více. Storybook má koncept zvaný Addons, který dává našim příběhům superschopnosti.
Řekněme, že musíme zkontrolovat odezvu komponent uživatelského rozhraní v samotné knize příběhů, v příběhové knize můžeme použít addon s názvem Viewport. Více o addonech se dozvíme v následujících sekcích.
Práce s Pohádkovou knihou
V této části napíšeme různé příběhy definující různé stavy naší společné komponenty Button.
Psaní příběhů není tak těžké. Příběh definuje stav komponenty. Pokud uvidíte rekvizity komponenty, pak snadno pochopíte různé případy použití komponenty.
Pojďme napsat nějaké příběhy s volitelnými rekvizitami.
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"
/>
);
Výše uvedené tři příběhy definují různé případy použití naší komponenty Button. Nyní je řada na vás, abyste přidali nějaké další případy příběhů pro naši společnou komponentu. Zkuste přidat disabledSamllRectangularButton, dangerButton, successDisabledButton atd.,
Nebudu poskytovat kód pro výše uvedené případy. Musíte to napsat sami, abyste to pochopili. Můžete vidět kompletní kód příběhů, který jsme dosud napsali.
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"
/>
);
Nyní máte plnou kontrolu nad psaním příběhů pro komponentu.
Pojďme skočit do další sekce, kde se dozvíme o doplňcích a o tom, jak posilují naše příběhy.
Pohádkové doplňky
Ve výchozím nastavení budeme mít k dispozici několik doplňků. V této části prozkoumáme nejužitečnější doplňky pro náš vývoj.
Pojďme posílit naše Button příběhy.
Řízení
Ovládací prvky přidávají funkci, která poskytuje vlastní rekvizity komponentě v samotné knize příběhů. Pro naši komponentu Button můžeme přidat ovládací prvky pro změnu různých rekvizit v pohádkové knize.
Řekněme, že musíme najít nejlepší barvu pro barvu pozadí tlačítka. Bude to časově náročné, pokud jej otestujeme, abychom zkontrolovali barvu pozadí tím, že budeme komponentě dávat jednu po druhé. Místo toho můžeme přidat ovládací prvek, který nám umožní vybrat si jinou barvu v pohádkové knize. Barvu pozadí můžeme otestovat v samotné pohádkové knize.
Podívejme se, jak přidat ovládací prvky do příběhů tlačítek.
Nejprve musíme definovat všechny rekvizity pod nadpisem následovně.
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"] },
},
},
};
Dále oddělte rekvizity od součásti a dejte je jako argumenty následovně.
export const outlineSmallButton = (args) => (
<Button {...args} onClick={() => {}} />
);
outlineSmallButton.args = {
text: "Outline Small Button",
size: "small",
type: "outline",
};
Ovládací prvky můžete vidět ve spodní části okna náhledu komponenty.
Kartu ovládacích prvků můžete vidět ve spodní části okna náhledu součásti. Hrajte si s tím.
Aktualizujte všechny příběhy, jak je uvedeno výše. To vše je spíše jako znalost syntaxe doplňků pohádkové knihy. V argTypes jsme použili různé typy ovládacích prvků. Všechny ovládací prvky, které jsou přítomné, najdete v pohádkové knize tady.
Aktualizované příběhy tlačítek budou vypadat následovně.
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",
};
Akce
Akce jsou události v JavaScriptu. Můžeme kliknout na tlačítko, které je událostí v JavaScriptu. Některé akce můžeme provést kliknutím na tlačítko pomocí doplňku akcí.
Pomocí akcí můžeme otestovat, zda události fungují správně nebo ne. Na zakázané tlačítko nelze kliknout a na aktivní tlačítko musí být možné kliknout. Můžeme to zajistit pomocí akcí.
Podívejme se, jak přidat akci ke kliknutí na tlačítko.
Již dříve jsme poskytli anonymní funkci rekvizitám onClick. Teď to musíme aktualizovat.
- Importujte akci z doplňku pohádkové knihy pomocí následujícího příkazu.
import { action } from "@storybook/addon-actions";
- Nahraďte všechny () => {} následujícím příkazem.
action("Button is clicked!")
Nyní přejděte do pohádkové knihy a klikněte na tlačítko. Zprávu uvidíte vytištěnou pod záložkou akcí, která je vedle záložky ovládání. Pokud klepnete na deaktivované tlačítko, zpráva se nevytiskne.
Tuto akci můžeme použít pro různé události jako onChange, onMouseOver, onMouseOut atd., abychom se ujistili, že fungují správně. Zkuste to samé implementovat pro onChange pro vstupní prvek.
Akce naleznete v dokumentaci tady.
Pozadí
Pozadí náhledového okna můžeme změnit pomocí doplňku pozadí. Nemusíme psát žádný kód. Stačí to změnit uvnitř pohádkové knihy. Níže se můžete podívat na gif.
Výřez
V pohádkové knize můžeme také otestovat odezvu našich komponent. Na obrázku níže se dozvíte o možnostech výřezu.
Docs
Své komponenty můžeme zdokumentovat v knize příběhů pomocí doplňku docs. Je to užitečnější, když pracujeme v týmu. Budou si komponentu číst a přímo jí rozumět. Vývojářům to ušetří spoustu času.
V okně náhledu komponent příběhů můžete vidět Dokumenty vpravo nahoře na kartě Plátno. Bude obsahovat všechny dokumenty všech příběhů komponenty. Pokud chceme dokumentovat pro komponentu, která zahrnuje jak markdown, tak vykreslování komponenty, musíme použít Button.stories.mdx. Prostě do něj napíšeme nějaký extra markdown kód spolu s příběhy komponent.
Píšeme dokument pro naše příběhy. Kód zahrnuje markdown a vykreslování komponent. Všechno je to jen učení syntaxe. Získáte to na první pohled.
Podívejme se na kód dokumentu Button.stories.mdx.
<!--- 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>
Zjistěte více o dokumentačních komponentách tady.
Můžete se dozvědět více o doplňcích tady.
Závěr
Doufám, že se vám návod líbil a dozvěděli jste se něco o pohádkové knize. A efektivně to využít ve svém týmu, aby byla vaše práce produktivní.
Začínáte reagovat? Podívejte se na tyto výukové zdroje.
Veselé kódování 🙂