javascript - Bir ebeveynin durumu yönettiği bir çocuk için storybook nasıl yazılır
Ben, üst bileşenin durumu yöneteceği bir çocuk öğe için Storybook yazıyorum. Örneğin, value (string) ve onChange (func) props aracılığıyla aktarılır. Her iki prop da iletiliyor, ancak storybook dosyasında durumu nasıl güncelleyeceğimden emin değilim.
textfield.tsx
import React, { FC, HTMLProps } from 'react'; type FirstNameTextFieldProps = HTMLProps<HTMLInputElement> const FirstNameTextField: FC<FirstNameTextFieldProps> = ({ ...r DAHA FAZLASI →reactjs - Storybook: Genel argüman/özellik türlerini nasıl notlandırılır
Bağlam & Kod
Düğmemizi şöyle uzattık:
export type ButtonProps<P = Record<string, unknown>> = P & { children: ReactNode | string onClick?: () => void className?: string disabled?: boolean secondary?: boolean } const Button = <P extends Record&l DAHA FAZLASI →reactjs - TypeScript ile yazılmış Storybook hikaye dosyaları düzgün şekilde işlenmiyor
Yakın zamanda CRA projemi Next.js'e taşıdım. O projede Storybook kullanıyordum, bu yüzden birçok yapılandırmayı düzenlemem gerekti, ama hâlâ TypeScript ile ilgili sorunlar devam ediyor.
Bu, hikaye dosyamın örneğidir.
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: ComponentStory<typeof DAHA FAZLASI →typescript - Yarn çalışma alanları + Storybook Derleme Hatası
Aşağıdaki yapıya sahip bir yarn çalışma alanında çalışıyorum:
"workspaces": [ "app/*", "packages/*", "utilities/*" ],Typescript'te bazı yardımcı fonksiyonlar yazıyorum ve sonra bunu app/test/index.tsx dosyalarından birine import ediyorum
DAHA FAZLASI →reactjs - Storybook için global dekoratörde React Hook'larını çağırma
Tüm hikayeler için özel bir React kancası çağırmak istiyorum, ancak nerede declare edeceğimden emin değilim. Çağırmak istediğim özel kancalar context provider içinde olmalı.
Tüm hikayeler için bağlam sağlayıcı ve özel kancaları (hooks) bildirmek için herhangi bir yol var mı?
import React from DAHA FAZLASI →javascript - Storybook inlineStories çalışıyor ama props etkileşimlerini bozuyor
Bir açılır medya galeri bileşenim var ve bunu hikaye kitabında belgelenmesi için satır içi olarak kullanmam gerekiyor. Aşağıdaki kodu '.storybook/preview.js' dosyasına eklediğimde
export const parameters = { docs: { inlineStories: false, } }Beklediğim gibi çalışıyor, ancak inlineStories: false olarak ayarladığımda Canvas üzerinde özellikleri değiştirmede bir sorun yok, ama Docs'ta değişiklik etkili olmuyor.
Bu hatadan kaçınmak için sadece popup bi
DAHA FAZLASI →reactjs - Storybook Typescript yeni eklenen props tipini yüklemiyor, storybook'u yeniden başlatmak gerekiyor
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
DAHA FAZLASI →typescript - Storybook ve Sveltekit ile türleri kullanma
Storybook'ı TypeScript ve SvelteKit ile birlikte kullanmaya çalışıyorum, ancak bu bana kendi başıma çözemediğim bazı sorunlar yarattı.
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', }Yukarıdaki kod bana Primary.args={ satırında aşağıdaki hatayı ver
DAHA FAZLASI →reactjs - storybook + jest play yöntemi, bir fonksiyonda shouldHaveBeenCalled çağrıldığında başarısız oluyor
Bu bileşene sahibim:
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); co DAHA FAZLASI →reactjs - TypeScript ile Storybook kullanırken "Modül bulunamadı" veya "İçe aktarma yolu tsx ile bitemez"
Başka bir bileşeni kullanan bir bileşen yazıyorum, bu yüzden yazdım
dosyada /src/stories/TextArea/TextArea.tsx.
Ancak bu hata veriyor
Module not found: C DAHA FAZLASI →