javascript - Hvordan man skriver storybook for et barn, som en forælder styrer state for

Jeg skriver en Storybook for et børneelement, hvor forælderen vil styre tilstanden. For eksempel bliver value(string) og onChange(func) sendt gennem props. Jeg har begge props sendt, men jeg er usikker på, hvordan jeg opdaterer tilstanden i storybook-filen.

tekstfelt.tsx

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

Læs mere →

reactjs - Storybook: Hvordan man annoterer generiske args/props-typer

Kontekst & kode

Vi udvidede vores knap sådan her:

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

Læs mere →

reactjs - Storybooks storyfiler skrevet i TypeScript håndteres ikke korrekt

Jeg migrerede for nylig mit CRA-projekt til Next.js. Jeg brugte Storybook i det projekt, så jeg måtte redigere mange konfigurationer, men der er stadig TypeScript-relaterede problemer tilbage.

Dette er eksemplet på min historiefil.

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

Læs mere →

typescript - Yarn workspaces + Storybook kompileringsfejl

Jeg arbejder med et Yarn-arbejdsområde med følgende struktur:

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

Jeg skriver nogle hjælpefunktioner i Typescript, og importerer dem derefter i en af filerne i app/test/index.tsx

Læs mere →

reactjs - kald React Hooks i global dekoratør for Storybook

Jeg vil gerne kalde en brugerdefineret React-hook for alle stories, men jeg er ikke sikker på, hvor jeg skal erklære den. De brugerdefinerede hooks, jeg vil kalde, skal være i kontekstudbyderen.

Er der nogen måder at erklære kontekstudbyder og brugerdefinerede hooks for alle historier?

import

Læs mere →

javascript - Storybook inlineStories virker, men bryder props-interaktioner

Jeg har en popup-mediegalleri-komponent, og jeg har brug for at bruge den inline for at dokumentere den i Storybook. Når jeg tilføjer koden nedenfor i '.storybook/preview.js'

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

Det fungerer, som jeg forventede, men når jeg sætter inlineStories: false, er der ingen problemer med at ændre egenskaber på Canvas, men i Docs får ændringen ingen effekt.

For at undgå denne fejl forsøgte jeg kun at

Læs mere →

reactjs - Storybook Typescript indlæser ikke nyligt tilføjede props type, skal genstarte 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 mere →

typescript - Brug af typer med Storybook og Sveltekit

Jeg forsøger at bruge Storybook sammen med TypeScript og SvelteKit, men dette har givet mig nogle problemer, som jeg ikke kan finde ud af selv.

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

Ovenstående kode giver mig følgende fejl på linjen Primary.args

Læs mere →

reactjs - storybook + jest play-metode fejler, når man kalder shouldHaveBeenCalled på en funktion

Jeg har denne 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 mere →

reactjs - "Modul ikke fundet" eller "Importsti kan ikke ende med tsx" ved brug af Storybook med TypeScript

Jeg skriver en komponent, der gør brug af en anden komponent, så jeg har skrevet

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

Men dette giver fejl

Module

Læs mere →