storybook-addon | Develop themable components with Emotion/Styled Components | Addon library

by react-theming JavaScript Version: 1.1.1 License: MIT

X-Ray Key Features Code Snippets Community Discussions(10)Vulnerabilities Install Support

kandi X-RAY | storybook-addon Summary

storybook-addon is a JavaScript library typically used in Plugin, Addon, React applications. storybook-addon has no bugs, it has no vulnerabilities, it has a Permissive License and it has low support. You can install using 'npm i @react-theming/storybook-addon' or download it from GitHub, npm.

Storybook addon for Styled Components, Emotion, Material-UI and any other theming solution. Allows to develop themed components in isolation.

Support

Quality

Security

License

Reuse

Support

storybook-addon has a low active ecosystem.

It has 182 star(s) with 27 fork(s). There are 4 watchers for this library.

It had no major release in the last 12 months.

There are 5 open issues and 31 have been closed. On average issues are closed in 70 days. There are 1 open pull requests and 0 closed requests.

It has a neutral sentiment in the developer community.

The latest version of storybook-addon is 1.1.1

Quality

storybook-addon has 0 bugs and 0 code smells.

Security

storybook-addon has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

storybook-addon code analysis shows 0 unresolved vulnerabilities.

There are 0 security hotspots that need review.

License

storybook-addon is licensed under the MIT License. This license is Permissive.

Permissive licenses have the least restrictions, and you can use them in most projects.

Reuse

storybook-addon releases are available to install and integrate.

Deployable package is available in npm.

Installation instructions are not available. Examples and code snippets are available.

storybook-addon saves you 5 person hours of effort in developing the same functionality from scratch.

It has 15 lines of code, 0 functions and 29 files.

It has low code complexity. Code complexity directly impacts maintainability of the code.

Top functions reviewed by kandi - BETA

kandi has reviewed storybook-addon and discovered the below as its top functions. This is intended to give you an instant insight into storybook-addon implemented functionality, and help decide if they suit your requirements.

Resolve relative path to webpack config
Generate a packager

Get all kandi verified functions for this library.

storybook-addon Key Features

No Key Features are available at this moment for storybook-addon.

storybook-addon Examples and Code Snippets

No Code Snippets are available at this moment for storybook-addon.

Community Discussions

Trending Discussions on storybook-addon

import css file into es6 returns string instead of object

How to install all packages from Gatsby V3

JSX styles are not working for Storybook after an upgrade

Storybook only loads stories when I make changes

import test from "css-loader!./test.css" returns string

React-Router Redirect in Storybook

How to customize theme in Vuetify using Storybook 6?

Setting up a new project with typescript, react and jest and I am running into a SyntaxError: Unexpected token '<'

TaskHarness in React Storybook

npm run build-storybook fails with "Module parse failed: Unexpected token (20:25)"

QUESTION

import css file into es6 returns string instead of object

Asked 2021-Dec-03 at 18:13

TL;DR

I'm importing a css file into a typescript module, but the import resolves to a string instead of an object. Can anyone tell me why I don't get an object??

Example ...

ANSWER

Answered 2021-Oct-18 at 10:52

I think you have mistake in your Webpack config. You have nested rules property, instead you should have use:

Source https://stackoverflow.com/questions/69614700

QUESTION

How to install all packages from Gatsby V3

Asked 2021-Nov-23 at 14:16

I currently have Gatsby installed on version 4, but I wanted to "downgrade" it to version 3, and all dependencies to be compatible with version 3.

Is there any method to "downgrade" everything to the most up-to-date V3 version?

My package.json

...

ANSWER

Answered 2021-Nov-23 at 14:16

There's no magic command to downgrade automatically Gatsby version and all related dependencies. Basically, you need uninstall and reinstall Gatsby to your desired version:

If you need to reset your gatsby-cli version:

Source https://stackoverflow.com/questions/70081219

QUESTION

JSX styles are not working for Storybook after an upgrade

Asked 2021-Nov-13 at 13:23

I upgraded my project from NextJS 10 to NextJS 12. Everything is working except for Storybook, which has no styles now.

I am using styled-jsx library to generate embedded css, using it as:

...

ANSWER

Answered 2021-Nov-13 at 13:23

Newer styled-jsx required the following:

Source https://stackoverflow.com/questions/69918707

QUESTION

Storybook only loads stories when I make changes

Asked 2021-Nov-12 at 00:55

Storybook only loads stories when I make changes. So when I yarn start my storybook it shows up with:

...

ANSWER

Answered 2021-Nov-12 at 00:55

"chart.js": "^3.6.0",

Chart JS, when it has an error, instead of throwing an error message, sometimes it just silently breaks.

I guess storybook had no handle for this odd case and loaded nothing without an error in the console. Which is fine because storybook was not the one with the error, this seems like Chart's fault.

Source https://stackoverflow.com/questions/69849711

QUESTION

import test from "css-loader!./test.css" returns string

Asked 2021-Oct-18 at 11:07

Preface

I know close to zero about Webpack, Babel, Loaders and how they interact.

Problem description

I develop an Angular component library that I recently migrated to Angular 12. I am currently setting up Storybook for documentation. I wanted to use the Storybook plugin "@etchteam/storybook-addon-css-variables-theme" to switch between different CSS stylesheets.

Through the documentation of this plugin I found out about the webpack loader syntax, especially for lazy-loaded stylesheets, i.e.

...

ANSWER

Answered 2021-Oct-18 at 11:07

My issue has been solved by @Akxe: import css file into es6 returns string instead of object

Using import * as test from '...' solved my issue.

Source https://stackoverflow.com/questions/69570350

QUESTION

React-Router Redirect in Storybook

Asked 2021-Oct-12 at 16:22

I have some components that use Redirect (from react-router-dom) in certain scenarios. It seems that Storybook does not like this even though I wrap my story with a router decorator. Does anyone know how to make Storybook work with Redirect?

The closest thing I have been to achieve this is to use @storybook/addon-links but no success so far. I have created a repository, the components I am looking for are related to Landing.stories.jsx and Login.stories.jsx

https://github.com/javierguzman/storybook-addon-links

Thank you in advance and regards

...

ANSWER

Answered 2021-Oct-12 at 16:22

The solution I found is to use "Story Links Addon", npm package name "@storybook/addon-links".

Once it is installed, I wrap my story with a memory router, specifying route and path according to the Redirect you want to make. In this way, once Redirect is called, AutoLinkTo gets rendered as well, which is the one switching stories:

Source https://stackoverflow.com/questions/69422540

QUESTION

How to customize theme in Vuetify using Storybook 6?

Asked 2021-Sep-20 at 10:21

I want to customize themes in Vuetify using Storybook 6 and I am using @socheatsok78/storybook-addon-vuetify package https://storybook.js.org/addons/@socheatsok78/storybook-addon-vuetify

I did exactly what documentation says but theme is still not working at all. I want to configure vuetify with custom properties and with my own color palette.

preview.js

...

ANSWER

Answered 2021-Sep-20 at 10:21

Ok I fixed the theme, you can find an tutorial how to do this and with all working code down below. I found a great explanation here:

https://morphatic.com/2020/09/30/configuring-storybook-6-for-vue-2-vuetify-2-3/

preview.html

Source https://stackoverflow.com/questions/69220380

QUESTION

Setting up a new project with typescript, react and jest and I am running into a SyntaxError: Unexpected token '<'

Asked 2021-Aug-18 at 16:18

I am setting up a new project from scratch. The project is in typescript using storybooks and jest for testing. I am encountering an issue while running toMatchSnapshot() assertion on a react component.

This is my index.test.tsx:

...

ANSWER

Answered 2021-Aug-18 at 15:30

The fix is very simple.I had to set the "jsx" key to "react" rather than "preserve" in tsconfig.json. Found the answer here: https://github.com/vercel/next.js/issues/8663

Source https://stackoverflow.com/questions/68834890

QUESTION

TaskHarness in React Storybook

Asked 2021-May-18 at 11:17

I have a really serious problem. I created a Storybook under React. I am not getting the correct values on the Docs site as shown here.

Normally, it should give me something like:

and the values should be changed.

Here is my component file:

...

ANSWER

Answered 2021-May-18 at 11:17

I solved this problem by removing withPerformance from decorators.

Edit: Here is the solution:

Source https://stackoverflow.com/questions/67551466

QUESTION

npm run build-storybook fails with "Module parse failed: Unexpected token (20:25)"

Asked 2020-Dec-18 at 19:37

I am trying to setup Storybook from scratch for a new project. I am hitting a wall and finding no useful information online around a babel/webpack issue that appears during build.

Note that I am able to correctly run Storybook locally, this issue only happens during build time.

The project has no webpack.config.js file as none came via the following commands.

How to diagnose further and fix the build issues?

Initial Set-up

React Boilerplate: https://react-boilerplate.github.io/react-boilerplate-cra-template/
Storybook out of the box set-up: https://storybook.js.org/docs/react/get-started/install

No issue running storybook locally

npm run storybook --debug-webpack

...

ANSWER

Answered 2020-Dec-18 at 19:37

By default the react template uses a webpack config which is in a different directory. Replacing the build directory app by stories fixed it.

internals\webpack\webpack.base.babel.js

Source https://stackoverflow.com/questions/65362646

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install storybook-addon

You can install using 'npm i @react-theming/storybook-addon' or download it from GitHub, npm.

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

Find more information at: