ค้นหาเว็บไซต์
javascript - วิธีโหลดสไตล์จากไฟล์ .scss และคอมโพเนนต์ react ไปยัง Storybook v7
ฉันพยายามที่จะเริ่มใช้งาน Storybook สำหรับโปรเจกต์ของฉัน แต่ไม่สามารถโหลดสไตล์จากไฟล์ .scss ของฉันได้ เมื่อฉันใช้สไตล์แบบอินไลน์ในคอมโพเนนต์ ทุกอย่างทำงานได้ดี แต่ไม่ใช่เมื่อมีการนำเข้าสไตล์
ภาพต่อไปนี้แสดงผลลัพธ์ที่แตกต่างกันใน storybook: เรื่องราวที่มีสไตล์จาก .scss เรื่องราวที่มีสไตล์แบบ inline
เมื่ออ่านในหลายกระทู้ ดูเหมือนว่าจะเป็น "ปัญหาที่เป็นที่รู้จัก" ประเภทหนึ่ง แต่แนวทางแก้ปัญหาสำหรับคนอื่นดูเหมือนไม่ได้ผลสำหรับฉัน.. อาจเป็นเพราะฉันไม่ได้เป็นนักพัฒนาฝั่งหน้าโด
อ่านต่อไป →reactjs - การหลีกเลี่ยงค่าที่เป็น null ในตัวควบคุมของ Storybook
ฉันกำลังใช้ class-variance-authority เพื่อสร้างรูปแบบปุ่ม จากนั้นจึงอนุมานประเภทจากมันสำหรับ props ของปุ่ม:
const variants = cva( { variants: { intent: { primary: [ ... ], secondary: [ ... ], ghost: [ ... ], อ่านต่อไป →typescript - Storybook + Vue3 วิธีที่เปิดเผยใน `defineExpose` จะไม่ปรากฏใน argTable โดยอัตโนมัติ
ฉันมี CustomInput.vue แบบนี้
<!-- components/input/CustomInput.vue --> <template> <div><!-- some html... --></div> </template> <script setup lang="ts"> ... function reset(): void { // some reset action... } defineExpose({ reset }) </script>และฉันส่งออกคอมโพเนนต์แบบนี้
// components/input/index.ts import { default as CustomInput } from './CustomInput.vue' type CustomI อ่านต่อไป →javascript - วิธีเปลี่ยนชื่อแท็บเมื่อใช้ Storybook
เพื่อความชัดเจนเพิ่มเติม ชื่อเรื่องที่ฉันหมายถึงคือถัดไปในแท็บถัดจากไอคอน Favicon บนเบราว์เซอร์ ตอนนี้ของฉันเป็นแบบนี้: Example/Button - Docs ⋅ Storybook และฉันดูเหมือนจะลบส่วน ⋅ Storybook หรือแก้ไขมันเป็นแบบที่ฉันต้องการไม่ได้
addons.setConfig({ theme: create({ brandTitle: "New Title", base: "light", brandImage: logo, }) });และเพิ่มสิ่งนี้ลงในการตั้งค่า main.ts
managerHead: (head) => `${head} <s อ่านต่อไป →reactjs - การใช้ Storybook และ Vitest การจำลองโมดูลทำให้เกิดข้อยกเว้น
ฉันมีการตั้งค่า Storybook โดยใช้ vitest และฉันต้องการจำลองโมดูลในสตอรี่โดยวิธีของ vitest ดังนั้นฉันจึงเพิ่มสิ่งต่อไปนี้ไว้ที่ด้านบนของไฟล์สตอรี่ของฉัน:
// my-nice-function.stories.tsx import { vi } from "vitest"; vi.mock("../some-module", () => ({ someFunction: vi.fn(), })); // the actual stories below here...แต่เมื่อฉันรันเรื่องราวนี้ ข้อผิดพลาดต่อไปนี้จะเกิดขึ้น:
ไม่สามารถอ่านคุณสมบัติของ undefined (กำลังอ่าน 'custo
อ่านต่อไป →javascript - Storybook กับ Vue ใน TypeScript วิธีนำเข้าไฟล์จาก .storybook.ts (การตั้งค่า Webpack)?
ฉันกำลังใช้ Storybook กับ Vue ใน TypeScript ตอนนี้ยังไม่มีการตั้งค่า TypeScript อย่างเป็นทางการสำหรับการใช้ Vue กับ Storybook
วิธีการกำหนดค่า Webpack เพื่อให้ในไฟล์ .storybook.ts ฉันสามารถนำเข้าจากไฟล์ .storybook.ts อื่นได้?
ตอน
อ่านต่อไป →javascript - Storybook Addon-Docs ไม่แสดงโค้ดสแนปเช็ต
ฉันกำลังใช้ Storybook เพื่อแสดงและบันทึกไลบรารีคอมโพเนนต์ React ของเรา ทุกอย่างทำงานได้ดี ยกเว้นว่าไม่แสดงโค้ดในหน้าหนังสือเอกสาร
ข้อมูลโครงการ: Typescript, React, Storybook
ความขึ้นต่อกันของโครงการ:
"dependencies": { "@types/node": "12.11.1", "@types/react": "16.9.9", "@types/react-dom": "16.9.2", "@types/styled-components": "4.1.19", "react": "16.10.2", "react-dom": "16.10.2", "react-scripts": "3.2.0", "styled-components": "4.4.0", อ่านต่อไป →reactjs - Storybook (พร้อม Vite/Typescript/MDX) ไม่แสดง ArgsTable
ฉันกำลังพยายามแสดงตารางพร้อมกับ props บนหน้าเอกสาร MDX แต่ไม่ว่าจะลองทำอย่างไร ตารางก็จะแสดงว่า: "ไม่พบข้อมูลนำเข้าสำหรับคอมโพเนนต์นี้ อ่านเอกสาร >"
ฉันลองหลายวิธีแล้ว แต่ดูเหมือนว่าจะไม่เปลี่ยนแปลงอะไรเลย
ฉันลองเล่นกับหลายเวอร์ชันของ react-docgen-typescript, react-docgen-typescript-vite, storybook-react-docgen-typescript-vite และ react-docgen-typescript-plugin แต่ดูเหมือนว่าจะไม่มีผลอะไร
นี่คือการตั้งค่าของฉัน:
main.
อ่านต่อไป →typescript - Vue storybook ไม่แสดงคอมโพเนนต์ในตอนแรก
หนังสือเรื่องราวทำงานได้ดี ยกเว้นว่ามันไม่สามารถ 'เรนเดอร์' คอมโพเนนต์เริ่มแรกได้
- คุณสามารถเห็นในภาพหน้าจอได้ว่า component-template ถูกใช้อย่างใดอย่างหนึ่ง มิฉะนั้น storybook จะไม่ทราบเค้าโครงพื้นฐานของ component
- คุณยังสามารถเห็นว่าการกระทำถูกเรียกใช้อย่างถูกต้องแล้วด้วย
- ปัญหาเดียวที่ฉันเห็นจริง ๆ คือในตอนแรก storybook พยายามเปลี่ยนแปลงทุก prop ที่คอมโพเนนต์มี ไม่รู้ว่าทำไม
- ข้อผิดพลาดนี้เกิดขึ้นในไฟล์ javaScript และ typeScript
- เรื่องราวที่ไม่ต้องใช้ อ่านต่อไป →
reactjs - ควบคุม Storybook ด้วย Typescript keyof
ฉันกำลังสร้างคอมโพเนนต์บางตัวเพื่อใช้กับ Storybook และเจอปัญหาเล็กน้อยกับประเภทที่ Typescript อนุมาน
เพื่อความเรียบร้อยของโค้ด DRY ผม/ฉันไม่อยากต้องกำหนดตัวเลือกสำหรับคอนโทรลภายในสตอรี่เอง อย่างไรก็ตามดูเหมือนว่าจะไม่ได้คาดเดาตัวเลือกได้อย่างถูกต้อง
ฉันมีคอมโพเนนต์ Button ที่มี prop 'option' ตัวเลือกที่มีอยู่เป็นสตริงตามค่าที่อยู่ในธีม:
ใน VSCode นี้จะแสดงอย่างถูกต้องว่าเป็น union ของคีย์สตริง ("base
อ่านต่อไป →