javascript - Wie man ein Storybook für ein Kind schreibt, dessen Zustand von einem Elternteil verwaltet wird

Ich schreibe ein Storybook für ein Kind-Element, bei dem der Elternteil den Zustand verwaltet. Zum Beispiel werden das value (String) und das onChange (Funktion) über Props übergeben. Ich habe beide Props übergeben, bin mir jedoch unsicher, wie man den Zustand in der Storybook-Datei aktualisiert.

textfield.tsx

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

Weiterlesen →

reactjs - Storybook: Wie man generische args/props Typen annotiert

Kontext & Code

Wir haben unseren Button wie folgt erweitert:

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

Weiterlesen →

reactjs - Storybook-Story-Dateien, die in TypeScript geschrieben sind, werden nicht richtig verarbeitet

Ich habe kürzlich mein CRA-Projekt zu Next.js migriert. Ich habe in diesem Projekt Storybook verwendet, also musste ich viele Konfigurationen bearbeiten, aber es gibt immer noch TypScript-bezogene Probleme.

Dies ist das Beispiel meiner Geschichtsdatei.

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

Weiterlesen →

TypeScript - Yarn-Arbeitsbereiche + Storybook-Kompilierfehler

Ich arbeite mit einem Yarn-Workspace mit der folgenden Struktur:

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

Ich schreibe einige Hilfsfunktionen in TypeScript und importiere sie dann in eine der Dateien in app/test/index.tsx

Weiterlesen →

reactjs - React Hooks in globalem Decorator für Storybook aufrufen

Ich möchte einen benutzerdefinierten React-Hook für alle Stories aufrufen, bin mir jedoch nicht sicher, wo ich ihn deklarieren soll. Die benutzerdefinierten Hooks, die ich aufrufen möchte, müssen im Context-Provider sein.

Gibt es Möglichkeiten, einen Kontextanbieter und benutzerdefinierte Hooks für alle St

Weiterlesen →

javascript - Storybook inlineStories funktioniert, bricht aber die Props-Interaktionen

Ich habe eine Popup-Mediagalerie-Komponente und ich muss sie inline verwenden, um sie im Storybook zu dokumentieren. Wenn ich den untenstehenden Code in '.storybook/preview.js' einfüge

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

Es funktioniert wie erwartet, aber wenn ich inlineStories: false setze, gibt es kein Problem beim Ändern von Eigenschaften auf der Leinwand, aber in den Docs tritt die Änderung nicht in Kraft.

Um

Weiterlesen →

reactjs - Storybook TypeScript lädt neu hinzugefügte Prop-Typen nicht, Storybook muss neu gestartet werden

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

Weiterlesen →

TypeScript - Verwendung von Typen mit Storybook und SvelteKit

Ich versuche, Storybook zusammen mit TypeScript und SvelteKit zu verwenden, obwohl mir dies einige Probleme bereitet hat, aus denen ich mich anscheinend selbst nicht befreien kann.

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

Der obige Code gibt mir den folg

Weiterlesen →

reactjs - Storybook + Jest-Play-Methode schlägt fehl, wenn versucht wird, shouldHaveBeenCalled auf einer Funktion aufzurufen

Ich habe diese Komponente:

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)

Weiterlesen →

reactjs - „Modul nicht gefunden“ oder „Importpfad darf nicht mit tsx enden“ bei Verwendung von Storybook mit TypeScript

Ich schreibe eine Komponente, die eine andere Komponente verwendet, also habe ich geschrieben

in der Datei /src/stories/TextArea/TextArea.tsx.

Dies führt jedoch zu ein

Weiterlesen →