2,203
questions
0
votes
0
answers
18
views
How can I resolve a TypeError reading 'app' error when using Storybook, Vue, Vite, and Pinia?
I have a simple reproduction case at https://github.com/eric-g-97477-vue/dev-tools-plugin-test
To create this, I did the following...
(1) I created the default vue Project
$ npm create vue@latest ...
- 706
0
votes
0
answers
7
views
Storyboard Docs "Copy Code" and "tags" integrations in custom docs pages
Storyboard Docs - "Copy Code" and "tags" integrations in custom doc pages
Hey, I'm new to Storybook. I'm currently displaying an array of components into a custom Docs page UI, but ...
- 350
-2
votes
0
answers
12
views
Storybook - how to use as a developer [closed]
We're looking at a way of developing a standardised design system based on shadcn with our own variants and styling. We need some way of documenting these components and other things like typography ...
1
vote
1
answer
24
views
How to configure angular storybook for ngx-translate
I'm setting up an angular 18 UI library with standalone components. While configuring this for storybook 8 and the ngx-translate package, my json translation files (en.json, fr.json...) are not found.
...
- 12.8k
0
votes
2
answers
26
views
Incorrect stories order on Storybook
I am using Storybook v8.4.2 (just updated to the latest version).
I am trying to sort my stories so they come in this order:
1. COMPONENTS
- inside each story inside the Components folder the &...
- 1,813
0
votes
0
answers
28
views
Interface Extend Issue with storybook react Material UI
Note
Simple Code in the end if anyone wishes to skip the actual problem faced and just focus on the issue
Problem Statement
Working on Storybook components and trying to reuse the MUI TextField, ...
- 457
0
votes
0
answers
18
views
Storybook for simple ionic components
I'm keen to use storybook to test my custom building blocks in isolation. I make use of a lot of customised ionic components. From my reading of storybook, I can see how it is easy enough to create ...
- 1,573
0
votes
0
answers
32
views
Writing a react story for a component using react hooks
I'm learning how to use react storybook. I'm trying to write a story for the GeneralDashboardSidebar component. However, nothing is being rendered on storybook. I've tried going over the docs no much ...
- 11
0
votes
0
answers
16
views
Storybook showing error while listing the components of ParkUI
When I tried to run pnpm run storybook
It showing the error below:
Error: Cannot read properties of undefined (reading 'getRootProps')
at renderWithHooks (/node_modules/.cache/storybook/...
- 409
1
vote
0
answers
21
views
How to set conditional props to manage different classes with Typescript
I'm a beginner and I have a question about conditionals. Hope to explain it clearly.
So, I have some props and based on different conditionals I want to apply different classes to div elements.
I'm ...
- 11
0
votes
0
answers
23
views
Storybook Not working for Nx Angular Library
I'm trying to migrate an angular project with Storybook into Nx. The stage I'm stuck at is migrating the UI components into a shared Nx Library. As a first step, I have successfully moved a single ...
- 1,573
1
vote
0
answers
62
views
Storybook not working on Electron Angular App
After installing Storybook 8.4.1 on my Angular 18 / Electron 33 app, and running it by ng run angular-electron:storybook I get:
`=> Failed to build the preview
TypeError [ERR_INVALID_ARG_TYPE]: The ...
- 794
0
votes
1
answer
43
views
How to install Storybook properly in Expo project?
I have created a demo project on react-native following the instruction on their official site. I chose to use Expo platform and the project is typescript based. I tried to add a storybook also ...
- 1,774
0
votes
0
answers
42
views
Storybook not taking the styles
I was trying to build a single storybook for shadcnui, mantineui and parkui,
started with matineui, it works fine for me but when i try to configure shadcnui, the styles not taking by storybook, How ...
- 409
1
vote
1
answer
61
views
Type T and any in Vue 3 with typescript
I have this code for Tile component in Vue 3.4 with typescript
<template>
<FormControl :valid="isValid">
<template v-if="props.inlineContent">
<...
- 154
1
vote
0
answers
42
views
Storybook v8 and Angular v18 render function type error (is not assignable to type 'ArgsStoryFn')
I have a set of stories for a component in Storybook 8.3.4 and Angular 18.2.6 that show a type error when the component includes an EventEmitter. For example:
class MyComponent {
@Output() someEvent ...
- 1,123
0
votes
1
answer
25
views
Hide the first, repeated, story in the Docs
In the Docs page of any collection of stories, before the stories are listed, there is some kind of summary composed of a title, optionally a description of the collection and a duplicate of the first ...
- 2,434
0
votes
1
answer
45
views
Storybook dynamic argTypes options
I have this type of story:
const meta: Meta<typeof forwardRef<HTMLButtonElement, IButtonProps>> = {
title: 'Atoms/Button',
component: Button,
argTypes: {
size: args({ ...
- 673
-2
votes
0
answers
27
views
ReferenceError: React is not defined (Storybook + TypeScript + React 18 + Babel + Webpack 5) [duplicate]
Does anyone know why I keep getting the following when I load storybook?
enter image description here
I only recently started seeing this once I upgraded the repo to React 18, and removed the imports ...
0
votes
0
answers
28
views
Chart.Js Chart's layout is not updated in storybook
my goal
I'm trying to make Chart preview with using StroyBook and Chart.Js.
what I Did
make Chart Component with using Chart.Js
make Story Component with using Chart Component
versions
"chart....
- 21
0
votes
1
answer
16
views
MDUI Button Not Rendering Properly in Stencil Web Component
I'm working on a project where I'm trying to integrate MDUI components (like buttons) into my Stencil web components project. I've followed the MDUI documentation and introduced MDUI CSS and ...
2
votes
0
answers
78
views
Why a component is wrapped by forwardRef , storybook <Controls /> table is rendered incomplete?
I have a button react component and it defined as a forwardRef component:
const Button = forwardRef<HTMLElement, ButtonProps>((props, ref) => {
const { type, children, tagName, variant, ...
- 543
0
votes
0
answers
35
views
Issue with Storybook and Next.js 12
I just installed Storybook for my Next.js project using npx storybook@latest init following the official documentation. However, when I try to run Storybook, I encounter the following error:
Cannot ...
- 1,226
1
vote
1
answer
40
views
Can you remove the 'Default' column on storybook controls addon?
I can't seem to find in the documentation anywhere about this Default column, and I would like to remove it from my storybook because it's not doing anything.
I would prefer to do this on a global ...
- 620
0
votes
0
answers
30
views
Storybook: Updated values do not update in the UI
I need to be able to set "selectedItem" to the item that is clicked in this storybook-file. As proven by the console.log in "onItemClick", it logs out the correct item value, but ...
- 1
0
votes
0
answers
72
views
Vite storybook not respecting target config
I'm trying to create a storybook project with Vite. My dependencies require top-level await. I have the following main.ts file:
/// <reference types="vite/client" />
import type { ...
- 1,548
1
vote
0
answers
55
views
Semantic error TS2786: 'Popover' cannot be used as a JSX component
The project was created with tsdx, rollup and storybook
A popover component was created using the react-tiny-popover library, it works correctly when running storybook, when running the tsdx build it ...
1
vote
1
answer
61
views
How to sync the controls of storybook and manual state changes
I am new to storybook and frontend development.
I have this checkbox.tsx
import React from 'react';
import styles from './checkbox.module.css'; // Ensure this import points to the correct CSS module
...
- 11
0
votes
0
answers
40
views
How to override component method from angular storybook
In the component I have a method onExample. I am trying to override the functionality of the onExample method from the storybook. As you can see below, I have tried to add the method as argTypes and ...
- 295
1
vote
1
answer
53
views
How to reveal class/styles per component such as color and font used in Storybook
I am not a developer, im a designer. My problem is i'm trying to figure out how to reveal more information in Storybook stories so as a Designer I can check content without having to browser inspect ...
0
votes
1
answer
28
views
Storybook overwrite imported constant
The React component, I write a story for, looks like this:
import { SHOW_ERRORS } from './env.js';
export const ErrorList = React.memo((): JSX.Element | null => {
return SHOW_ERRORS ? <p>...
- 924
0
votes
0
answers
93
views
SB_BUILDER-WEBPACK5_003 error when building Storybook with React-webpack5
Storybook Version: 7.6.20 with react-webpack5.
Storybook main.ts file:
{
framework: {
name: "@storybook/react-webpack5"
}
},
core: {
builder: "webpack5"
}
When ...
- 8,625
0
votes
0
answers
163
views
Storybook with Next.js and Webpack 5 cannot resolve various node modules
I'm trying to create a Storybook project with Next.js and webpack 5. I have a few decorators in my preview.tsx:
import type { Preview } from "@storybook/react";
import React from "react&...
- 1,548
0
votes
0
answers
35
views
Storybook v8.3 won't import svg files with @svgr/webpack
Storybook main.ts config:
import type { StorybookConfig } from '@storybook/nextjs'
import { RuleSetRule } from 'webpack';
import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'
const config:...
- 4,913
3
votes
1
answer
106
views
How to add customisable ng-content in a Storybook story in Angular
I've got a component for a badge where the text displayed in the badge is done with ng-content. I trying to create a Storybook story for this where I want the text in the badge to be customisable when ...
- 3,212
0
votes
0
answers
28
views
Storybook doesn't read args when opening a new tab
I'm using Storybook.js on a Laravel/Inertia project.
Everything is working well except the "Open in new tab" button.
For example, I have a button component which can have 2 sizes: default &...
- 292
1
vote
0
answers
43
views
Storybook setup along with lerna, vite and pnpm in existing application
Is it possible to configure application services and storybook services using Lerna and pnpm? So that I shouldn't start two different servers with different ports. I am using PNPM along with vite and ...
- 2,243
0
votes
0
answers
55
views
Storybook Vite SCSS "does not provide an export named 'default'"
I have a stencil web component library as part of a nx angular monorepo. I tried adding storybook to the stencil library using the nx storybook configuration command using the web-components-vite ...
0
votes
0
answers
25
views
How to automatically display ts type definitions in storybook
const mate = {
title: 'MemoOrMessage',
component: MemoOrMessage,
tags: ['autodocs'],
} satisfies Meta<typeof MemoOrMessage>;
I'm currently using autodocs to generate documentation, which ...
- 29
0
votes
0
answers
57
views
How to build HTML files from a storybook project?
I created a storybook project via npx storybook@latest init and chose html as the type and html-vite as the bundler. I want to use storybook to distribute the templates to different production apps ...
- 1,540
0
votes
0
answers
104
views
How do you change the title on the tab when using Storybook
For more clarification the title I'm referring to is next on the tab next to the Favicon on a browser, currently mine is like this: Example / Button - Docs ⋅ Storybook, and I can't seem to get rid of ...
- 3
0
votes
2
answers
312
views
How to change the Favicon in Storybook
I'm trying to implement Storybook into my project and I can't seem to figure out how to change the Favicon. I'm using version 8.2.9 and I can't find any relevant information online. I don't have a ...
- 3
1
vote
0
answers
169
views
While installing storybook.js I am getting error "Int.default is not a function" in a current project
I have a Vue 3 application running on VITE.
I am trying to add Storybook to the project.
As stated in storybook doc.. I run npx storybook@latest init
while installing the dependencies the setup throws ...
- 11
0
votes
0
answers
22
views
Implementing siteCode-based translations w/Ng17(i18n) Storybook
I'm implementing internationalization (i18n) in an Angular 17 project using the approach outlined in the Angular documentation for merging translations. My goal is to have a single application that ...
0
votes
0
answers
32
views
Storybook a11y addon not failing on custom object-alt rule
I'm using Storybook with the @storybook/addon-a11y addon to ensure my components meet accessibility standards. I've enabled the object-alt rule and added a custom check for it, but it doesn't seem to ...
- 69
0
votes
0
answers
60
views
Angular Storybook - Can't find stylesheet to import
@angular/cli: 18.2.0
@storybook/angular: 8.2.9
I have an existing Angular component library that i'm trying to set up in Storybook.
The library has shared styles (library/src/styles) that are used ...
- 4,551
0
votes
1
answer
219
views
Storybook, autodocs not being generated for react component with forwardref
I have a react component like so
type SearchBoxProps = {
/** Optional, value used for input if making it a controlled component */
value?: string,
/** Optional, value used for input if making ...
- 392
0
votes
0
answers
28
views
How can type set as global be displayed as an Enum in storybook?
src/@type/index.ts
declare global {
export type Size = "xs" | "sm" | "md" | "lg" | "xl";
}
export {};
My Component's index.d.ts
export type ...
0
votes
0
answers
29
views
window.location.hash not defined upon pasting url containing hash
I got Storybook project where I have story with 100+ icons in it, I wrapped each icon with tag and assign corresponding icon name at the end of the
href={/?path=/story/design-system-v2-foundations-...
0
votes
0
answers
17
views
Type errors in story args are not thrown when running the lint script
I've noticed some inconsistent behavior with the linting rules for stories, but it will be easier to explain with a simple example. Let's say we have a basic button component that looks like this:
...
- 13