ค้นหาเว็บไซต์
ฉันกำลังทำงานกับ workspace ของ yarn ที่มีโครงสร้างดังนี้:
"workspaces": [ "app/*", "packages/*", "utilities/*" ],ฉันเขียนฟังก์ชันยูทิลิตี้บางอย่างใน Typescript และจากนั้นนำเข้ามาในไฟล์หนึ่งใน app/test/index.tsx
import React from ' อ่านต่อไป →
ฉันต้องการเรียกใช้ custom React hook สำหรับทุกเรื่องราว อย่างไรก็ตาม ฉันไม่แน่ใจว่าควรประกาศที่ไหน custom hook ที่ฉันต้องการเรียกต้องอยู่ใน context provider
มีวิธีใดบ้างในการประกาศ context provider และ custom hooks สำหรับเรื่องราวทั้งหมด?
import React from 'react'; import { useCustomHooks } f อ่านต่อไป →ฉันมีคอมโพเนนต์แกลเลอรีสื่อแบบป๊อปอัปและฉันต้องการใช้มันแบบอินไลน์ เพื่อทำเอกสารในสตอรี่บุ๊ก เมื่อฉันเพิ่มโค้ดด้านล่างใน '.storybook/preview.js'
export const parameters = { docs: { inlineStories: false, } }มันทำงานตามที่ฉันคาดไว้ แต่เมื่อฉันตั้งค่า inlineStories: false จะไม่มีปัญหาในการแก้ไขคุณสมบัติบน Canvas แต่ใน Docs การแก้ไขจะไม่ส่งผล
เพื่อหลีกเลี่ยงข้อผิดพลาดนี้ ฉันพยายามเพิ่ม inlineStories: false เฉพาะในคอมโพเนนต์ป๊อปอัพเท่านั้น แต่เมื่อฉันท
อ่านต่อไป →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={
อ่านต่อไป →
ฉันมีส่วนประกอบนี้:
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 อ่านต่อไป →
ฉันกำลังเขียนคอมโพเนนต์ที่ใช้งานคอมโพเนนต์อีกตัว ดังนั้นฉันจึงได้เขียน
ในไฟล์ /src/stories/TextArea/TextArea.tsx.
อย่างไรก็ตาม สิ่งนี้ทำให้เกิดข้อผิดพลาด
อ่านต่อไป →ฉันกำลังพยายามทำให้ Vue slots ทำงานใน Storybook ขณะนี้ฉันใช้ Storybook เวอร์ชัน 7 รุ่นเบต้า เพราะมีการเปลี่ยนแปลงที่ทำให้มันดีขึ้นสำหรับโปรเจกต์ของเรา เราใช้ Vue 3 กับ vite เราก็ใช้ Typescript ทุกที่ด้วยเช่นกัน
ปัญหาคือ Storybook ดูเหมือนไม่ได้ให้วิธีง่ายๆ ในการเพิ่มเนื้อหา slot วิธีเดียวคือผ่านอ็อบเจ็กต์ args และแม้ว่าจะใช้วิธีนั้น คุณก็ยังต้องมีบางอย่างแบบนี้เพื่อให้มันทำงานได้ถูกต้อง:
const meta: Meta<typeof Modal> = { title: 'Componenten/Modal', component อ่านต่อไป →ฉันพยายามจะแสดงคอมโพเนนต์ 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 อ่านต่อไป →ฉันกำลังใช้ Storybook เป็นครั้งแรก โดยส่วนใหญ่แล้วมันใช้งานได้ดีจนถึงตอนนี้ แต่ตอนนี้ฉันได้รับข้อผิดพลาดที่ไม่ให้ข้อมูลมากนัก (เนื่องจากดูเหมือนว่าจะไม่ถูกต้อง)
นี่คือไลบรารีคอมโพเนนต์ที่ฉันกำลังพยายามสร้าง https://github.com/replyke/base
ซึ่งมี 6 ส่วนประกอบที่ควรจะแสดงด้วย StoryBook
มี 4 ตัวที่แสดงผลโดยไม่มีปัญหา แต่มี 2 ตัว (StatsBar & Comment) แสดงข้อผิดพลาดบนชื่อเรื่อง
สำหรับทั้งสองอย่างนี้ ความผิดพลาดคือมีการไม่ได้ส่งออกอินเทอร์เฟซ ไม่ใช่สำหรับคอมโพเนนต์นั้น แต่สำ
อ่านต่อไป →