javascript - Cum să scrii storybook pentru un copil căruia un părinte îi gestionează starea
Scriu un Storybook pentru un element copil în care părintele va gestiona starea. De exemplu, value(string) și onChange(func) sunt transmise prin props. Ambele props sunt transmise, dar nu sunt sigur cum să actualizez starea în fișierul storybook.
textfield.tsx
import React, { FC, HTMLProps } from 'react'; type FirstNameTextFieldProps = HTMLProps<HTMLInputElement> const FirstNameTextField: FC<FirstNameTextFieldProps> = ({ ...restO Citeste mai mult →reactjs - Storybook: Cum să marchezi tipurile generice pentru args/props
Context și Cod
Am extins butonul nostru astfel:
export type ButtonProps<P = Record<string, unknown>> = P & { children: ReactNode | string onClick?: () => void className?: string disabled?: boolean secondary?: boolean } const Button = <P extend Citeste mai mult →reactjs - Fișierele de poveste Storybook scrise în TypeScript nu sunt gestionate corespunzător
Recent am migrat proiectul meu CRA la Next.js. Foloseam Storybook în acel proiect, așa că a trebuit să editez multe configurații, dar încă mai există probleme legate de TypeScript.
Acesta este exemplul fișierului meu de poveste.
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: ComponentStor Citeste mai mult →typescript - Yarn workspaces + Eroare de compilare Storybook
Lucrez cu un workspace Yarn cu următoarea structură:
"workspaces": [ "app/*", "packages/*", "utilities/*" ],Scriu o funcție utilitară în Typescript și apoi o import într-unul dintre fișierele din app/test/index.tsx
import React fr Citeste mai mult →reactjs - apelarea React Hooks în decorator global pentru Storybook
Vreau să apelez un hook personalizat React pentru toate poveștile, totuși, nu sunt sigur unde să îl declar. Hook-urile personalizate pe care vreau să le apelez trebuie să fie în furnizorul de context.
Există vreo modalitate de a declara un furnizor de context și hook-uri personalizate pentru toate poveștil
Citeste mai mult →javascript - Storybook inlineStories funcționează, dar distruge interacțiunile cu props
Am un component de galerie media popup și trebuie să-l folosesc în linie, pentru a-l documenta în Storybook. Când adaug codul de mai jos în '.storybook/preview.js'
export const parameters = { docs: { inlineStories: false, } }Funcționează așa cum mă așteptam, dar când setez inlineStories: false, nu există nicio problemă în a modifica proprietățile pe Canvas, dar în Docs, modificarea nu are efect.
Pentru a evita această eroare am încercat să adaug i
Citeste mai mult →reactjs - Storybook Typescript nu încarcă tipurile de props adăugate recent, este necesară repornirea 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
Citeste mai mult →typescript - Utilizarea tipurilor cu Storybook și Sveltekit
Încerc să folosesc storybook împreună cu typescript și sveltekit, deși acest lucru mi-a creat ceva probleme din care nu par să reușesc să mă descurc singur.
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', }Codul de mai sus îmi dă următoarea eroare pe linia
Citeste mai mult →reactjs - storybook + metoda play din jest eșuează atunci când se apelează shouldHaveBeenCalled pe o funcție
Am acest component:
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); con Citeste mai mult →reactjs - „Modulul nu a fost găsit” sau „Calea de import nu se poate încheia cu tsx” folosind Storybook cu TypeScript
Scriu un component care folosește un alt component, așa că am scris
în fișierul /src/stories/TextArea/TextArea.tsx.
Totuși, aceasta dă eroarea
Module not Citeste mai mult →