Weboldal keresés
javascript - Hogyan írjunk storybook-ot egy gyermek komponenshez, amit a szülő kezel állapotot
Egy Storybook-ot írok egy gyermek elemhez, ahol a szülő kezeli az állapotot. Például a value (string) és a onChange (func) props-on keresztül kerülnek átadásra. Mindkét prop-ot átadom, de nem vagyok biztos abban, hogyan lehet frissíteni az állapotot a storybook fájlban.
szövegdoboz.tsx
import React, { FC, HTMLProps } from 'react'; type FirstNameTextFieldProps = HTMLProps<HTMLInputElement> const FirstNameTextField: FC<FirstNameTextFieldP További információ →reactjs - Storybook: Hogyan jegyezzük meg a generikus argumentumok/props típusait
Környezet és Kód
A gombunkat így hosszabbítottuk meg:
export type ButtonProps<P = Record<string, unknown>> = P & { children: ReactNode | string onClick?: () => void className?: string disabled?: boolean secondary?: boolean } const Button = <P További információ →reactjs - A Storybook történetfájljait, amelyek TypeScript-ben vannak írva, nem kezeli megfelelően
Nemrég áthelyeztem a CRA projektemet Next.js-re. Ebben a projektben a Storybook-ot használtam, így sok konfigurációt kellett szerkesztenem, de még mindig maradtak TypeScript-hez kapcsolódó problémák.
Ez a történetfájlom példája.
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 További információ →typescript - Yarn munkaterületek + Storybook fordítási hiba
Egy Yarn munkaterületen dolgozom a következő felépítéssel:
"workspaces": [ "app/*", "packages/*", "utilities/*" ],Írok néhány segédfunkciót TypeScript-ben, majd importálom azt az egyik fájlba az app/test/index.tsx-ben
import React További információ →reactjs - React Hookokat hívni globális dekorátorban a Storybookhoz
Azt szeretném, ha egy egyedi React hookot hívnék meg minden történethez, azonban nem vagyok biztos benne, hol kellene deklarálni. Az egyedi hookok, amiket meg akarok hívni, a context provider-ben kell legyenek.
Vannak módok arra, hogy kontextus szolgáltatót és egyedi hookokat deklaráljunk minden story szám
További információ →javascript - A Storybook inlineStories működik, de megszakítja a props interakciókat
Van egy felugró média galéria komponensem, és szeretném inline módon használni, hogy dokumentáljam a Storybookban. Amikor hozzáadom az alábbi kódot a '.storybook/preview.js'-hez
export const parameters = { docs: { inlineStories: false, } }Úgy működik, ahogy vártam, de amikor az inlineStories: false-t állítom, a Canvas-on a tulajdonságok módosítása nem okoz problémát, de a Docs-ban a módosítás nem lép érvénybe.
Ennek a hibának az elkerülése érdekéb
További információ →reactjs - A Storybook Typescript nem tölti be az újonnan hozzáadott props típust, szükséges a Storybook újraindítása
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
További információ →typescript - Típusok használata Storybookkal és Sveltekittel
Megpróbálom a storybookot együtt használni a typescripttel és a sveltekittel, bár ez néhány problémát okozott, amiből úgy tűnik, nem tudok egyedül kijönni.
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', }A fenti kód a következő hibát adja a Primary.args={
További információ →reactjs - storybook + jest play metódus hibát ad, amikor a shouldHaveBeenCalled-t hívják egy függvényen
Van ez az összetevőm:
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); c További információ →reactjs - „Module not found” vagy „Import path cannot end with tsx” a Storybook TypeScript-tel történő használatakor
Egy olyan komponenst írok, amely egy másik komponenst használ, így írtam
a(z) /src/stories/TextArea/TextArea.tsx fájlban.
Ez azonban hibát ad.
Module not További információ →