جافاسكريبت - كيفية كتابة Storybook لطفل يدير والده الحالة
أنا أكتب كتاب قصص لعنصر طفل حيث سيتولى العنصر الرئيسي إدارة الحالة. على سبيل المثال، يتم تمرير value (سلسلة نصية) وonChange (دالة) من خلال الخصائص. لدي كلا الخاصيتين تم تمريرهما، لكنني غير متأكد من كيفية تحديث الحالة في ملف الكتاب القصصي.
textfield.tsx
import React, { FC, HTMLProps } from 'react'; type FirstNameTextFieldProps = HTMLProps<HTMLInputElement> const FirstNameTextField: FC<FirstNameTextFieldProps> = ({ ...restOfProps } اقرأ أكثر →reactjs - Storybook: كيفية توضيح أنواع الوسائط/الخصائص العامة
السياق والكود
قمنا بتمديد زرنا كما يلي:
export type ButtonProps<P = Record<string, unknown>> = P & { children: ReactNode | string onClick?: () => void className?: string disabled?: boolean secondary?: boolean } const Button = <P extends Record اقرأ أكثر →reactjs - ملفات القصة في Storybook المكتوبة بـ TypeScript لا يتم التعامل معها بشكل صحيح
لقد قمت مؤخرًا بنقل مشروع CRA الخاص بي إلى Next.js كنت أستخدم Storybook في ذلك المشروع، لذلك كان عليّ تعديل العديد من الإعدادات، لكن لا تزال هناك مشاكل متعلقة بـ TypeScript.
هذا هو مثال على ملف قصتي.
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 Index> = (args اقرأ أكثر →تايب سكريبت - خطأ في تجميع Yarn workspaces + Storybook
أنا أعمل مع مساحة عمل Yarn بالبنية التالية:
"workspaces": [ "app/*", "packages/*", "utilities/*" ],أكتب بعض دوال المساعدة في تايب سكريبت، ثم أقوم باستيرادها في أحد الملفات في app/test/index.tsx
import React from 'react'; import { اقرأ أكثر →ريأكت ج إس - استدعاء هوكس ريأكت في المزين العالمي لـ ستوريبوك
أريد استدعاء hook المخصص في React لجميع القصص، ومع ذلك، لست متأكدًا من مكان الإعلان عنه. يجب أن تكون hooks المخصصة التي أريد استدعاءها داخل مزود السياق.
هل هناك أي طرق لإعلان موفر السياق والخطافات المخصصة لجميع القصص؟
import React from 'react'; import { useCustomHooks } from './custom'; impor اقرأ أكثر →جافاسكريبت - Storybook inlineStories يعمل ولكن يكسر تفاعلات الخصائص
لدي مكون معرض وسائط منبثق وأحتاج إلى استخدامه ضمن السطر، لتوثيقه في Storybook. عندما أضيف الكود أدناه في '.storybook/preview.js'
export const parameters = { docs: { inlineStories: false, } }يعمل كما توقعت، ولكن عندما أضبط inlineStories: false، لا توجد مشكلة في تعديل الخصائص على Canvas، ولكن في Docs، لا ينعكس التعديل.
لتجنب هذا الخطأ حاولت إضافة inlineStories: false إلى مكون النافذة المنبثقة فقط، ولكن عندما فعلت ذلك، توقف الوضع الداخلي عن العمل أيض
اقرأ أكثر →reactjs - ستوريبوك تايب سكريبت لا يقوم بتحميل نوع الخصائص المُضافة حديثًا، يحتاج إلى إعادة تشغيل ستوريبوك
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
اقرأ أكثر →تايب سكريبت - استخدام الأنواع مع ستوريبوك وسفلت كيت
أحاول استخدام Storybook مع TypeScript و SvelteKit، رغم أن هذا قد سبب لي بعض المشكلات التي لا يبدو أنني أستطيع حلها بنفسي.
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', }يعطيني الكود أعلاه الخطأ التالي في السطر Primary.args={ :
Proper اقرأ أكثر →reactjs - طريقة storybook + jest play تفشل عند استدعاء shouldHaveBeenCalled على دالة
لدي هذا المكوّن:
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); const اقرأ أكثر →reactjs - "الوحدة غير موجودة" أو "مسار الاستيراد لا يمكن أن ينتهي بـ tsx" عند استخدام Storybook مع TypeScript
أنا أكتب مكوّنًا يستخدم مكوّنًا آخر، لذا قد كتبت
في الملف /src/stories/TextArea/TextArea.tsx.
ومع ذلك، هذا يعطي الخطأ
Module not found: Can't resolve '.. اقرأ أكثر →