javascript - Hur man skriver storybook för ett barn som en förälder hanterar tillståndet för

Jag skriver en Storybook för ett barnelement där föräldern kommer att hantera tillståndet. Till exempel skickas value (sträng) och onChange (funktion) genom props. Jag har båda props skickade, men jag är osäker på hur man uppdaterar tillståndet i storybook-filen.

textfält.tsx

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

Läs mer →

reactjs - Storybook: Hur man annoterar generiska args/props-typer

Kontext & Kod

Vi förlängde vår knapp så här:

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

Läs mer →

reactjs - Storybooks storyfiler skrivna i TypeScript hanteras inte korrekt

Jag migrerade nyligen mitt CRA-projekt till Next.js. Jag använde Storybook i det projektet, så jag var tvungen att redigera många konfigurationer, men det finns fortfarande TypeScript-relaterade problem kvar.

Detta är exemplet på min berättelsefil.

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

Läs mer →

typescript - Yarn-arbetsytor + Storybook-kompileringsfel

Jag arbetar med ett Yarn-arbetsutrymme med följande struktur:

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

Jag skriver en viss hjälpfunktion i Typescript och importerar den sedan i en av filerna i app/test/index.tsx

impo

Läs mer →

reactjs - kalla på React Hooks i global dekoratör för Storybook

Jag vill kalla på en anpassad React-hook för alla stories, men jag är inte säker på var jag ska deklarera den. De anpassade hooks jag vill kalla på måste vara i context provider.

Finns det några sätt att deklarera context-providern och egna hooks för alla stories?

import React from 'react'; i

Läs mer →

javascript - Storybook inlineStories fungerar men bryter props-interaktionerna

Jag har en popup-mediegalleri-komponent och jag behöver använda den inline, för att dokumentera den i Storybook. När jag lägger till koden nedan i '.storybook/preview.js'

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

Det fungerar som jag förväntade mig, men när jag sätter inlineStories: false finns det inget problem med att ändra egenskaper på Canvas, men i Docs får ändringen ingen effekt.

För att undvika detta fel försökte jag lägg

Läs mer →

reactjs - Storybook Typescript laddar inte nyligen tillagda props-typer, behöver starta om 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

Läs mer →

typescript - Använda typer med Storybook och Sveltekit

Jag försöker använda Storybook tillsammans med TypeScript och SvelteKit, men detta har gett mig några problem som jag inte verkar kunna lösa själv.

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

Ovanstående kod ger mig följande fel på raden Primary.args=

Läs mer →

reactjs - storybook + jest play-metod misslyckas när man kallar shouldHaveBeenCalled på en funktion

Jag har denna komponent:

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

Läs mer →

reactjs - "Modul hittades inte" eller "Importvägen kan inte sluta med tsx" när du använder Storybook med TypeScript

Jag skriver en komponent som använder en annan komponent, så jag har skrivit

i filen /src/stories/TextArea/TextArea.tsx.

Men detta ger felet

Module not f

Läs mer →