typescript - Storybook'ta Vue slotlarını nasıl doğru şekilde yönetebilirim
Storybook'ta Vue slotlarının çalışmasını sağlamaya çalışıyorum. Şu anda Storybook v7 beta sürümündeyim, çünkü projemiz için daha iyi hale getiren değişiklikler oldu. Vue 3'ü vite ile kullanıyoruz. Ayrıca her yerde Typescript kullanıyoruz.
Sorun şu ki, Storybook görünüyor ki slot içeriği eklemek için kolay bir yol sunmuyor. Tek yol args nesnesi aracılığıyla ve hatta o zaman bile doğru çalışması için bunun gibi bir şeye ihtiyacınız var:
const meta: Meta<typeof Modal> = DAHA FAZLASI →angular - Storybook bazı bileşenler için "tanımsızın özellikleri okunamıyor ('base16' okunuyor)" hatası veriyor
Angular bileşenlerimi Storybook'ta göstermeye çalışıyorum. Bazı bileşenler için bu işe yarıyor, ama diğerleri için sürekli bu istisna gösteriliyor:
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://l DAHA FAZLASI →reactjs - Storybook: Kompleks bileşenleri render etmeye çalışırken, istenen XXX modülü XXX adında bir ihracat sağlamıyor
Storybook'u ilk kez kullanıyorum. Şimdiye kadar çoğunlukla çalıştı, ancak şimdi pek bilgi vermeyen bir hata alıyorum (yanlış göründüğü için).
Bu, inşa etmeye çalıştığım bir bileşen kütüphanesidir https://github.com/replyke/base
StoryBook ile gösterilmesi gereken 6 bileşeni vardır.
Dörtlüsü sorunsuz görüntüleniyor, ancak ikisi (StatsBar ve Comment) başlıkta hata gösteriyor.
Ancak bu ikisi için de hata, bir arayüzün dışa aktarılmaması, ama bu bileşen için değil, bir alt
DAHA FAZLASI →javascript - .scss dosyalarından ve React bileşenlerinden stiller Storybook v7'ye nasıl yüklenir
Projem için storybook'u çalıştırmaya çalışıyorum ama .scss dosyalarımdan stil yüklemiyor. Bileşenlerimde satır içi stiller kullandığımda her şey düzgün çalışıyor ama stiller ithal edildiğinde çalışmıyor.
Aşağıdaki görseller, storybook'taki farklı çıktıları göstermektedir: .scss ile stillendirilmiş hikaye Satır içi stil ile hikaye
Birkaç forumu okurken bunun bir çeşit "bilinen sorun" gibi göründüğünü fark ettim ama herkes için işe yarayan çözümler bana uymuyor gibi.. Belk
DAHA FAZLASI →reactjs - Storybook kontrollerinde null değerinden kaçınma
Düğme değişkenlerini oluşturmak ve ardından düğme özellikleri için türleri çıkarmak amacıyla class-variance-authority kullanıyorum:
const variants = cva( { variants: { intent: { primary: [ ... ], secondary: [ ... ], ghost: [ DAHA FAZLASI →typescript - Storybook + Vue3'te `defineExpose` içinde tanımlanan yöntemler otomatik olarak argTable'da görünmüyor
Bende şöyle bir CustomInput.vue var
<!-- components/input/CustomInput.vue --> <template> <div><!-- some html... --></div> </template> <script setup lang="ts"> ... function reset(): void { // some reset action... } defineExpose({ reset }) </script>ve bileşeni böyle dışa aktarırım.
// components/input/index.ts import { default as CustomInput } from './CustomInput.vue' DAHA FAZLASI →javascript - Storybook kullanırken sekmenin başlığını nasıl değiştirirsiniz
Daha fazla açıklama için bahsettiğim başlık, bir tarayıcıda Favicon'un yanındaki sekmedeki sonraki başlıktır, şu anda benimki şöyle görünüyor: Example/Button - Docs ⋅ Storybook ve ⋅ Storybook kısmından kurtulamıyor veya istediğim şekilde düzenleyemiyorum.
addons.setConfig({ theme: create({ brandTitle: "New Title", base: "light", brandImage: logo, }) });ve bunu main.ts konfigürasyonuna eklemek
managerHead: (head) DAHA FAZLASI →reactjs - Storybook ve Vitest kullanarak, bir modülü taklit etmek istendiğinde istisna fırlatıyor
Vitest kullanan bir Storybook kurulumum var ve bir hikâyede bir modülü vitest aracılığıyla sahtelemek istiyorum, bu yüzden hikâyeler dosyamın en üstüne şunu ekliyorum:
// my-nice-function.stories.tsx import { vi } from "vitest"; vi.mock("../some-module", () => ({ someFunction: vi.fn(), })); // the actual stories below here...Ama bu hikayeyi çalıştırdığımda, aşağıdaki hata oluşuyor:
Tanımsız'ın özellikleri okunamıyor (
DAHA FAZLASI →javascript - TypeScript'te Vue ile Storybook, .storybook.ts dosyasından nasıl import edilir (Webpack yapılandırmaları)?
TypeScript ile Vue kullanarak Storybook kullanıyorum. Vue'yu Storybook ile kullanmak için henüz resmi bir TypeScript yapılandırması yok.
.storybook.ts dosyasında başka bir .storybook.ts dosyasından nasıl import yapabileceğim şekilde Webpack na
DAHA FAZLASI →javascript - Storybook Addon-Docs Kod Parçacığını Göstermez
React Bileşen Kütüphanemizi Görselleştirmek ve Belgelemek için Storybook kullanıyorum. Her şey düzgün çalışıyor ama Doküman Sayfasında Kodu Gösteremiyor.
Proje Verileri: Typescript, React, Storybook
Proje Bağımlılıkları:
"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- DAHA FAZLASI →