ค้นหาเว็บไซต์

typescript - ข้อผิดพลาดในการคอมไพล์ของ Yarn workspaces + Storybook

ฉันกำลังทำงานกับ workspace ของ yarn ที่มีโครงสร้างดังนี้:

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

ฉันเขียนฟังก์ชันยูทิลิตี้บางอย่างใน Typescript และจากนั้นนำเข้ามาในไฟล์หนึ่งใน app/test/index.tsx

import React from '

อ่านต่อไป →

reactjs - เรียกใช้ React Hooks ในตัวตกแต่งระดับทั่วโลกสำหรับ Storybook

ฉันต้องการเรียกใช้ custom React hook สำหรับทุกเรื่องราว อย่างไรก็ตาม ฉันไม่แน่ใจว่าควรประกาศที่ไหน custom hook ที่ฉันต้องการเรียกต้องอยู่ใน context provider

มีวิธีใดบ้างในการประกาศ context provider และ custom hooks สำหรับเรื่องราวทั้งหมด?

import React from 'react'; import { useCustomHooks } f

อ่านต่อไป →

javascript - Storybook inlineStories ใช้งานได้แต่ทำให้การโต้ตอบ props หยุดทำงาน

ฉันมีคอมโพเนนต์แกลเลอรีสื่อแบบป๊อปอัปและฉันต้องการใช้มันแบบอินไลน์ เพื่อทำเอกสารในสตอรี่บุ๊ก เมื่อฉันเพิ่มโค้ดด้านล่างใน '.storybook/preview.js'

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

มันทำงานตามที่ฉันคาดไว้ แต่เมื่อฉันตั้งค่า inlineStories: false จะไม่มีปัญหาในการแก้ไขคุณสมบัติบน Canvas แต่ใน Docs การแก้ไขจะไม่ส่งผล

เพื่อหลีกเลี่ยงข้อผิดพลาดนี้ ฉันพยายามเพิ่ม inlineStories: false เฉพาะในคอมโพเนนต์ป๊อปอัพเท่านั้น แต่เมื่อฉันท

อ่านต่อไป →

reactjs - Storybook Typescript ไม่โหลดประเภท props ที่เพิ่งเพิ่ม ต้องรีสตาร์ท 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

อ่านต่อไป →

typescript - ใช้ประเภทกับ Storybook และ Sveltekit

ฉันพยายามที่จะใช้ 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={

อ่านต่อไป →

reactjs - storybook + วิธีเล่น jest ล้มเหลวเมื่อเรียก 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); con

อ่านต่อไป →

reactjs - "ไม่พบโมดูล" หรือ "เส้นทางการนำเข้าไม่สามารถลงท้ายด้วย tsx" เมื่อใช้ Storybook กับ TypeScript

ฉันกำลังเขียนคอมโพเนนต์ที่ใช้งานคอมโพเนนต์อีกตัว ดังนั้นฉันจึงได้เขียน

ในไฟล์ /src/stories/TextArea/TextArea.tsx.

อย่างไรก็ตาม สิ่งนี้ทำให้เกิดข้อผิดพลาด

อ่านต่อไป →

typescript - ฉันจะจัดการ Vue slots ใน Storybook อย่างถูกต้องได้อย่างไร

ฉันกำลังพยายามทำให้ Vue slots ทำงานใน Storybook ขณะนี้ฉันใช้ Storybook เวอร์ชัน 7 รุ่นเบต้า เพราะมีการเปลี่ยนแปลงที่ทำให้มันดีขึ้นสำหรับโปรเจกต์ของเรา เราใช้ Vue 3 กับ vite เราก็ใช้ Typescript ทุกที่ด้วยเช่นกัน

ปัญหาคือ Storybook ดูเหมือนไม่ได้ให้วิธีง่ายๆ ในการเพิ่มเนื้อหา slot วิธีเดียวคือผ่านอ็อบเจ็กต์ args และแม้ว่าจะใช้วิธีนั้น คุณก็ยังต้องมีบางอย่างแบบนี้เพื่อให้มันทำงานได้ถูกต้อง:

const meta: Meta<typeof Modal> = { title: 'Componenten/Modal', component

อ่านต่อไป →

angular - Storybook ล้มเหลวพร้อมข้อความ "ไม่สามารถอ่านคุณสมบัติของ undefined (กำลังอ่าน 'base16')" สำหรับบางคอมโพเนนต์

ฉันพยายามจะแสดงคอมโพเนนต์ Angular ของฉันใน Storybook สำหรับคอมโพเนนต์บางตัวสามารถทำได้ แต่สำหรับคอมโพเนนต์อื่น ๆ ฉันยังคงได้รับข้อยกเว้นนี้:

Cannot read properties of undefined (reading 'base16') TypeError: Cannot read properties of undefined (reading 'base16') at ./node_modules/rfc4648/lib/index.mjs (http://localhost:4400/vendors-node_modules_angular-auth-oidc-client_fesm2020_angular-auth-oidc-client_mjs.iframe.bundle.js:14476:66) at __webpack_require__ (http://localhos

อ่านต่อไป →

reactjs - Storybook: โมดูลที่ร้องขอ XXX ไม่มีการส่งออกที่ชื่อว่า XXX เมื่อพยายามเรนเดอร์คอมโพเนนต์ที่ซับซ้อน

ฉันกำลังใช้ Storybook เป็นครั้งแรก โดยส่วนใหญ่แล้วมันใช้งานได้ดีจนถึงตอนนี้ แต่ตอนนี้ฉันได้รับข้อผิดพลาดที่ไม่ให้ข้อมูลมากนัก (เนื่องจากดูเหมือนว่าจะไม่ถูกต้อง)

นี่คือไลบรารีคอมโพเนนต์ที่ฉันกำลังพยายามสร้าง https://github.com/replyke/base

ซึ่งมี 6 ส่วนประกอบที่ควรจะแสดงด้วย StoryBook

มี 4 ตัวที่แสดงผลโดยไม่มีปัญหา แต่มี 2 ตัว (StatsBar & Comment) แสดงข้อผิดพลาดบนชื่อเรื่อง

สำหรับทั้งสองอย่างนี้ ความผิดพลาดคือมีการไม่ได้ส่งออกอินเทอร์เฟซ ไม่ใช่สำหรับคอมโพเนนต์นั้น แต่สำ

อ่านต่อไป →