Memulai dengan Storybook di React

Pernahkah Anda mencoba menempatkan semua komponen UI Anda di suatu tempat di React?

Jika Anda baru mengenal dunia React, Anda mungkin tidak akan melakukannya.

Apa yang dimaksud dengan itu?

Lihat react-beautiful-dnd contoh.

Apa yang telah Anda lihat dalam contoh disebut cerita. Dan alat yang digunakan untuk membuat cerita disebut Buku Cerita.

Sekarang, Anda telah memahami apa yang akan kita bicarakan di artikel ini. Tanpa basa-basi mari kita jelajahi.

Apa itu Buku Cerita?

Storybook adalah lingkungan pengembangan terisolasi antarmuka pengguna yang menyediakan taman bermain untuk komponen Anda. Kami dapat bermain dengan komponen kami dengan cara yang berbeda tanpa menjalankan aplikasi utama kami. Kita dapat menjalankan buku cerita di portnya dengan pengaturan.

Ini tidak terbatas pada Bereaksi. Kita dapat menggunakan buku cerita dengan sebagian besar kerangka frontend seperti Vue, Angular, Mithril, Marko, Svelte, dll.,

Anda dapat menemukan lebih banyak tentang buku cerita di sini.

Apa itu cerita?

Sebuah cerita menentukan status yang dirender dari komponen Anda. Jika kita mengambil komponen umum, kita dapat menggunakannya dengan cara yang berbeda dengan menggunakan props. Kita bisa menulis cerita untuk masing-masing negara bagian tersebut.

Katakanlah kita memiliki komponen Button.

Sebuah tombol dapat berada dalam status yang berbeda seperti dinonaktifkan, memuat, primer, sekunder, kecil, besar, sedang, dll., Jika kita mencantumkan semua status, maka akan sangat sulit untuk melanjutkan tutorial. Saya pikir Anda memahaminya. Anda akan mendapatkannya lebih banyak saat mulai bekerja dengan buku cerita.

Anda dapat melihat cerita tombol dalam berbagai kasus (Besar, Sedang, Kecil).

Menyiapkan Buku Cerita di Proyek

Kami akan menyiapkan buku cerita dalam proyek reaksi.

Ayo pergi.

  • Buat proyek reaksi dengan perintah berikut. Anda dapat memberi nama apa pun yang Anda suka.
npx create-react-app storybook-demo
  • Sekarang, instal buku cerita di proyek Anda dengan perintah berikut.
npx sb init

Kami telah menyelesaikan penyiapan untuk buku cerita.

Buku cerita menyediakan server terpisah untuk kita.

Bagaimana memulainya?

Buku cerita secara otomatis menambahkan perintah di file skrip kami. Anda dapat memeriksanya di file package.json di dalam bagian skrip. Untuk sementara, jalankan perintah berikut untuk memulai server buku cerita.

npm run storybook

Storybook akan memulai server baru dengan port yang diberikan di bagian skrip file package.json. Ini akan secara otomatis membuka buku cerita di browser default kami (sama dengan server reaksi).

Anda akan melihat berbagai cerita di dalamnya secara default. Anda dapat menghapusnya jika tidak menginginkannya atau menyimpannya untuk referensi. Seperti yang telah kita bahas di bagian sebelumnya, sebuah tombol dapat memiliki banyak status, Anda dapat melihatnya di buku cerita (tidak semua status disebutkan). Kita akan menulis banyak cerita untuk tombol di bagian terakhir tutorial ini.

Jelajahi berbagai bagian buku cerita dan kenali bagian yang berbeda. Kami akan membahas beberapa di antaranya dalam tutorial.

Mari menulis cerita pertama kita.

Menguji buku cerita

Kami telah melihat buku cerita berjalan dan beberapa contoh di dalamnya.

  • Buat folder bernama Button di dalam folder src.
  • Buat file bernama Button.jsx, Button.css, dan constants.js
  • Tempatkan masing-masing kode dari cuplikan di bawah ini di dalam file.

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 };

Tombol.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;
}

konstanta.js

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

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

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

Apa kode itu?

  Cara melihat versi file terbaru di Google Documents

Kami telah menulis komponen umum untuk Tombol yang dapat digunakan dengan berbagai cara. Sekarang, kami memiliki komponen yang dapat memiliki status berbeda.

Mari kita menulis cerita pertama kita dengan mengikuti langkah-langkah di bawah ini.

  • Buat file bernama Button.stories.jsx
  • Impor React dan komponen Button kita ke dalam file.
  • Sekarang, tentukan judul atau jalur cerita komponen kita. Kami akan mendefinisikannya menggunakan kode berikut.
export default {
   title: ‘common/Button’,
}

Kode di atas akan menempatkan semua cerita yang ada di file saat ini di dalam direktori common/Button/.

  • Ekspor tombol dengan alat peraga wajib sebagai berikut.
export const defaultButton = () => (
    <Button text=”Default Button” onClick={() => {}} />
);

Kami telah menyelesaikan cerita pertama kami. Jalankan buku cerita dengan perintah berikut dan lihat hasilnya.

npm run storybook

Kami akan menulis lebih banyak cerita, pada akhirnya, jangan khawatir.

Bagaimana ini berguna dalam pengembangan Frontend?

Apa keuntungan utama menggunakan buku cerita?

Katakanlah kita bekerja dalam tim yang terdiri dari 10 anggota. Dan kita perlu memeriksa komponen umum yang telah ditulis semua orang untuk proyek kerja saat ini.

Bagaimana kita bisa melakukan itu?

Kami harus pergi ke setiap komponen umum untuk memeriksanya. Tapi, ini memakan waktu dan bukan cara yang disukai bagi kami. Inilah buku cerita tamu baru kami.

Bagaimana memanfaatkannya untuk mengatasi masalah kita?

Kita dapat menulis cerita untuk komponen umum (semua komponen UI) menggunakan buku cerita. Dan setiap kali rekan satu tim Anda ingin memeriksa komponen umum orang lain, maka mereka cukup menjalankan server buku cerita dan akan melihat semua komponen UI di sana seperti yang telah kita lihat di atas.

Kita dapat melakukan lebih banyak hal dengan komponen yang dirender di dalam buku cerita. Storybook memiliki konsep yang disebut Addons yang memberikan kekuatan super pada cerita kita.

Katakanlah kita harus memeriksa respons komponen UI di buku cerita itu sendiri, kita bisa menggunakan addon bernama Viewport di buku cerita. Kami akan mempelajari lebih lanjut tentang addons di bagian mendatang.

Bekerja dengan Buku Cerita

Di bagian ini, kita akan menulis cerita berbeda yang mendefinisikan status berbeda dari Tombol komponen umum kita.

Menulis cerita tidak begitu sulit. Sebuah cerita mendefinisikan keadaan komponen. Jika Anda melihat props dari sebuah komponen, maka Anda akan dengan mudah memahami kasus penggunaan yang berbeda dari komponen tersebut.

Mari menulis beberapa cerita dengan memberikan alat peraga opsional.

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"
    />
);

Tiga cerita di atas menentukan kasus penggunaan yang berbeda dari Tombol komponen kami. Sekarang, giliran Anda untuk menambahkan beberapa kasus cerita lain untuk komponen umum kita. Cobalah untuk menambahkan DisableSamllRectangularButton, dangerButton, successDisabledButton, dll.,

  Cara Menulis di PDF pada tahun 2022

Saya tidak akan memberikan kode untuk kasus di atas. Anda harus menulisnya sendiri untuk memahaminya. Anda dapat melihat kode cerita lengkap yang telah kami tulis hingga saat ini.

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"
    />
);

Sekarang, Anda menguasai sepenuhnya menulis cerita untuk sebuah komponen.

Mari lompat ke bagian selanjutnya di mana kita akan belajar tentang addons dan bagaimana mereka meningkatkan cerita kita.

Tambahan Buku Cerita

Kami akan memiliki beberapa addon yang tersedia secara default. Di bagian ini, kami akan menjelajahi add-on yang paling berguna untuk pengembangan kami.

Mari tingkatkan cerita Button kita.

Kontrol

Kontrol menambahkan fitur untuk memberikan properti khusus ke komponen dalam buku cerita itu sendiri. Untuk komponen Tombol kami, kami dapat menambahkan kontrol untuk mengubah berbagai alat peraga di buku cerita.

Katakanlah kita harus mencari tahu warna terbaik untuk warna latar Tombol. Akan memakan waktu lama jika kita mengujinya untuk mengecek warna background dengan memberikan satu per satu ke komponen. Sebagai gantinya, kita dapat menambahkan kontrol yang memungkinkan kita memilih warna berbeda di buku cerita. Kita bisa menguji warna latar belakang di buku cerita itu sendiri.

Mari kita lihat cara menambahkan kontrol ke cerita Tombol kita.

Pertama, kita harus mendefinisikan semua properti di bawah judul sebagai berikut.

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"] },
        },
    },
};

Selanjutnya, pisahkan props dari komponen dan berikan sebagai args sebagai berikut.

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

Anda dapat melihat kontrol di bagian bawah jendela pratinjau komponen.

Anda dapat melihat tab kontrol di bagian bawah jendela pratinjau komponen. Bermain di sekitarnya.

Perbarui semua cerita seperti di atas. Ini semua lebih seperti mengetahui sintaks addon buku cerita. Di argTypes, kami telah menggunakan berbagai jenis kontrol. Anda dapat menemukan semua kontrol yang ada di buku cerita di sini.

Cerita tombol yang diperbarui akan terlihat seperti berikut.

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",
};

Tindakan

Tindakan adalah peristiwa dalam JavaScript. Kita bisa mengklik tombol yang merupakan event di JavaScript. Kami dapat melakukan beberapa tindakan pada klik tombol menggunakan addon tindakan.

  3 Alat Untuk Membuat Dan Menyematkan Grafik Atau Bagan Secara Online

Dengan tindakan, kita dapat menguji apakah acara tersebut berfungsi dengan baik atau tidak. Tombol yang dinonaktifkan tidak dapat diklik dan tombol yang diaktifkan harus dapat diklik. Kami dapat memastikannya menggunakan tindakan.

Mari kita lihat cara menambahkan tindakan ke klik tombol.

Kami telah memberikan fungsi anonim ke alat peraga onClick sebelumnya. Sekarang, kita harus memperbaruinya.

  • Impor tindakan dari addon buku cerita menggunakan pernyataan berikut.
import { action } from "@storybook/addon-actions";
  • Ganti semua () => {} dengan pernyataan berikut.
action("Button is clicked!")

Sekarang, buka buku cerita dan klik tombol. Anda akan melihat pesan tercetak di bawah tab tindakan yang ada di samping tab kontrol. Pesan tidak akan dicetak jika Anda mengklik tombol nonaktif saat dinonaktifkan.

Kita dapat menggunakan tindakan untuk berbagai acara seperti onChange, onMouseOver, onMouseOut, dll., untuk memastikannya berfungsi dengan baik. Coba terapkan hal yang sama untuk onChange untuk elemen input.

Lihat dokumentasi untuk tindakan di sini.

Latar belakang

Kita dapat mengubah latar belakang jendela pratinjau menggunakan addon latar belakang. Kita tidak perlu menulis kode apa pun. Ubah saja di dalam buku cerita. Anda dapat melihat gif di bawah ini.

Area pandang

Kami juga dapat menguji daya tanggap komponen kami di buku cerita. Lihat gif di bawah untuk mencari tahu tentang opsi viewport.

Dokumen

Kami dapat mendokumentasikan komponen kami di buku cerita menggunakan docs addon. Ini lebih berguna ketika kita bekerja dalam tim. Mereka akan membaca komponen dan memahaminya secara langsung. Ini menghemat banyak waktu bagi para pengembang.

Di jendela pratinjau komponen buku cerita, Anda dapat melihat Dokumen di kanan atas tab Kanvas. Ini akan berisi semua dokumen dari semua cerita komponen. Kita harus menggunakan Button.stories.mdx jika kita ingin mendokumentasikan komponen yang menyertakan penurunan harga dan rendering komponen. Kami hanya menulis beberapa kode penurunan harga tambahan di dalamnya bersama dengan cerita komponennya.

Kami sedang menulis dokumen untuk cerita kami. Kode tersebut mencakup penurunan harga dan rendering komponen. Itu semua hanya mempelajari sintaks. Anda akan mendapatkannya sekilas.

Mari kita lihat kode dokumen 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>

Cari tahu lebih lanjut tentang komponen pendokumentasian di sini.

Anda dapat mengetahui lebih lanjut tentang add-on di sini.

Kesimpulan

Harap Anda menikmati tutorial dan belajar tentang buku cerita. Dan gunakan secara efektif dalam tim Anda untuk membuat pekerjaan Anda produktif.

Baru Bereaksi? Lihat sumber belajar ini.

Selamat Coding 🙂