javascript - Bagaimana menulis storybook untuk kanak-kanak yang negeri dikendalikan oleh ibu bapa

Saya sedang menulis Storybook untuk elemen kanak-kanak di mana induk akan menguruskan keadaan. Sebagai contoh, value(string) dan onChange(func) dihantar melalui props. Saya mempunyai kedua-dua props yang dihantar, tetapi saya tidak pasti bagaimana untuk mengemas kini keadaan dalam fail storybook.

textfield.tsx

import React, { FC, HTMLProps } from 'react'; type FirstNameTextFieldProps = HTMLProps<HTMLInputElement> const FirstNameTextField:

Baca lagi →

reactjs - Storybook: Cara untuk menandakan jenis args/props generik

Konteks & Kod

Kami memanjangkan butang kami seperti ini:

export type ButtonProps<P = Record<string, unknown>> = P & { children: ReactNode | string onClick?: () => void className?: string disabled?: boolean secondary?: boolean } const Button = <

Baca lagi →

reactjs - Fail cerita Storybook yang ditulis dalam TypeScript tidak dikendalikan dengan betul

Saya baru-baru ini memindahkan projek CRA saya ke Next.js. Saya menggunakan Storybook dalam projek itu, jadi terpaksa mengedit banyak konfigurasi, tetapi masih terdapat masalah berkaitan TypeScript yang belum diselesaikan.

Ini adalah contoh fail cerita saya.

import { ComponentStory, ComponentMeta } from '@storybook/react'; import Index from 'pages/profile'; export default { title: 'Views/Profile', component: Index, } as ComponentMeta<typeof Index>; export cons

Baca lagi →

typescript - Ralat Penyusunan Yarn workspaces + Storybook

Saya sedang bekerja dengan ruang kerja yarn dengan struktur berikut:

"workspaces": [ "app/*", "packages/*", "utilities/*" ],

Saya menulis beberapa fungsi utiliti dalam Typescript, dan kemudian mengimportnya di salah satu fail dalam app/test/inde

Baca lagi →

reactjs - panggil React Hooks dalam dekorator global untuk Storybook

Saya ingin memanggil hook reaktif tersuai untuk semua cerita, bagaimanapun, saya tidak pasti di mana untuk mengisytiharkannya. Hook tersuai yang ingin saya panggil mesti berada dalam penyedia konteks.

Adakah terdapat sebarang cara untuk mengisytiharkan penyedia konteks dan cangkuk tersuai untuk semua kisah

Baca lagi →

javascript - Storybook inlineStories berfungsi tetapi merosakkan interaksi props

Saya mempunyai komponen galeri media popup dan saya perlu menggunakannya secara sebaris, untuk mendokumentasikannya dalam storybook. Apabila saya menambah kod di bawah dalam '.storybook/preview.js'

export const parameters = { docs: { inlineStories: false, } }

Ia berfungsi seperti yang saya jangkakan, tetapi apabila saya menetapkan inlineStories: false, tiada masalah untuk mengubah suai sifat di Canvas, tetapi di Docs, pengubahsuaian tidak berke

Baca lagi →

reactjs - Storybook Typescript tidak memuat jenis props yang baru ditambah, perlu mulakan semula storybook

module.exports = { stories: ["../**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"], addons: [ "@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions", "@storybook/preset-create-react-app", "@storybook/addon-a11y" ], typescript: { reactDocgen: "react-docgen-typescript", reactDocgenTypescriptOptions: { shouldExtractLitera

Baca lagi →

typescript - Menggunakan jenis dengan Storybook dan Sveltekit

Saya sedang mencuba menggunakan storybook bersama dengan typescript dan sveltekit, walaupun ini telah memberi saya beberapa masalah yang nampaknya saya tidak dapat menyelesaikannya sendiri.

import Modal from './Modal.svelte' export default { title: 'Modal', component: Modal, } const Template = (args: any) => ({ component: Modal, props: args, }) export const Primary = Template.bind({}) Primary.args = { text: 'Hello World', }

Kod di atas memberi say

Baca lagi →

reactjs - storybook + jest kaedah play gagal apabila memanggil shouldHaveBeenCalled pada sebuah fungsi

Saya mempunyai komponen ini:

import { FC, ReactElement, useState, MouseEvent as ReactMouseEvent, ChangeEvent as ReactChangeEvent, } from 'react'; import { Stack, TablePagination } from '@mui/material'; export const Pagination: FC<IPaginationProps> = ({ total, page = 1, rowsPerPage = 25, position = 'start', rowsPerPageOptions = [10, 25, 50, 100], onPageChange, onRowsPerPageChange, }): ReactElement => { const [localPage, setPage] = useState(pag

Baca lagi →

reactjs - "Modul tidak ditemui" atau "Jalur import tidak boleh berakhir dengan tsx" menggunakan Storybook dengan TypeScript

Saya sedang menulis satu komponen yang menggunakan komponen lain, jadi saya telah menulis

dalam fail /src/stories/TextArea/TextArea.tsx.

Walau bagaimanapun, ini member

Baca lagi →