javascript - Jak napsat storybook pro dítě, jehož stav spravuje rodič

Píšu Storybook pro dětský prvek, kde rodič bude spravovat stav. Například value (string) a onChange (funkce) jsou předávány přes props. Mám obě props předané, ale nejsem si jistý, jak aktualizovat stav v souboru storybooku.

textfield.tsx

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

Přečtěte si více →

reactjs - Storybook: Jak anotovat obecné typy argumentů/vlastností

Kontext & Kód

Tlačítko jsme rozšířili takto:

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

Přečtěte si více →

reactjs - Storybookovy soubory příběhů napsané v TypeScriptu nejsou správně zpracovávány

Nedávno jsem migroval svůj projekt CRA na Next.js. V tom projektu jsem používal Storybook, takže jsem musel upravit spoustu konfigurací, ale stále zůstávají problémy související s TypeScriptem.

Toto je příklad mého souboru příběhu.

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

Přečtěte si více →

typescript - Yarn workspaces + Chyba při kompilaci Storybooku

Pracuji s pracovním prostorem Yarn s následující strukturou:

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

Napíšu nějakou užitečnou funkci v Typescriptu, a pak ji importuji do jednoho souboru v app/test/index.tsx

import R

Přečtěte si více →

reactjs - volání React Hooks v globálním dekorátoru pro Storybook

Chci volat vlastní React hook pro všechny příběhy, ale nejsem si jistý, kde ho deklarovat. Vlastní hooky, které chci volat, musí být v poskytovateli kontextu.

Existují nějaké způsoby, jak deklarovat poskytovatele kontextu a vlastní hooky pro všechny příběhy?

import React from 'react'; import

Přečtěte si více →

javascript - Storybook inlineStories funguje, ale narušuje interakce s vlastnostmi

Mám komponentu vyskakovací mediální galerie a potřebuji ji použít inline, abych ji zdokumentoval ve Storybooku. Když přidám níže uvedený kód do '.storybook/preview.js'

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

Funguje to, jak jsem očekával, ale když nastavím inlineStories: false, na Canvasu není problém s úpravou vlastností, ale v Docs úprava nemá účinek.

Abych se této chybě vyhnul, zkusil jsem přidat do komponenty popup pouze i

Přečtěte si více →

reactjs - Storybook Typescript nenačítá nově přidaný typ props, je potřeba restartovat 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

Přečtěte si více →

typescript - Použití typů se Storybookem a Sveltekitem

Snažím se používat Storybook společně s TypeScriptem a SvelteKitem, i když mi to přineslo nějaké problémy, se kterými si nemohu poradit.

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', }

Výše uvedený kód mi na řádku Primary.args={ dává následující ch

Přečtěte si více →

reactjs - storybook + jest metoda play selhává při volání shouldHaveBeenCalled na funkci

Mám tuto komponentu:

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(page); co

Přečtěte si více →

reactjs - „Modul nebyl nalezen“ nebo „Importovaná cesta nemůže končit na tsx“ při použití Storybooku s TypeScriptem

Píšu komponentu, která využívá jinou komponentu, takže jsem napsal

v souboru /src/stories/TextArea/TextArea.tsx.

Nicméně to způsobí chybu

Module not foun

Přečtěte si více →