storybookjs / addon-cssresources Goto Github PK

View Code? Open in Web Editor NEW

6.0 6.0 3.0 6.17 MB

A storybook addon to switch between css resources at runtime for your story

License: MIT License

JavaScript 15.97% TypeScript 84.03%

addon-cssresources's People

Stargazers

Watchers

Forkers

isabella232 senicar

addon-cssresources's Issues

Question: specifying a class instead of an id for cssresources?

Is it possible to have the cssresource use a class instead of an id?

I want to use storybooks to test if className prop is being passed and properly applied to a component by toggling the style that is being applied via a class css selector.

The code below works, but I find it uncomfortable to use the id property in this way.

export default {
  title: 'React Trix Editor',
  component: ReactTrixRTEInput,
  parameters: {
    cssresources: [
      {
        id: ".tx-rte-with-border",
        code: `<style>.tx-rte-with-border { border: 2px solid blue; }</style>`,
        picked: false
      }
    ]
  },
  decorators: [withCssResources]
};

And, it also looks off (#.<classname>) when rendered

I was expecting to be able to use something like the following: (note class instead of id)

export default {
  title: 'React Trix Editor',
  component: ReactTrixRTEInput,
  parameters: {
    cssresources: [
      {
        class: "tx-rte-with-border",
        code: `<style>.tx-rte-with-border { border: 2px solid blue; }</style>`,
        picked: false
      }
    ]
  },
  decorators: [withCssResources]
};

I'm sorry if this is somewhere in the documentation and I missed it, happy to read it if I'm pointed to it.

[Bug] A component is changing an uncontrolled input of type checkbox to be controlled

Describe the bug

I get the following error message in the browser console, when checking the checkbox for a css resource:

vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:80555 Warning: A component is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components
    in input (created by CssResourcePanel)
    in label (created by CssResourcePanel)
    in div (created by CssResourcePanel)
    in div (created by CssResourcePanel)
    in CssResourcePanel
    in div (created by Context.Consumer)
    in Styled(div)
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown
    in Unknown
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer (created by Panel)
    in Panel (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Panel)
    in Panel (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in Main (created by Layout)
    in Layout (created by Context.Consumer)
    in WithTheme(Layout)
    in Unknown
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown (created by SizeMeRenderer(Component))
    in SizeMeReferenceWrapper (created by SizeMeRenderer(Component))
    in SizeMeRenderer(Component) (created by SizeMe(Component))
    in SizeMe(Component)
    in ThemeProvider
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer (created by Manager)
    in EffectOnMount (created by Manager)
    in Manager (created by Context.Consumer)
    in Location (created by QueryLocation)
    in QueryLocation (created by Root)
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root
printWarning @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:80555
error @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:80527
updateWrapper @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:82337
updateProperties @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:86727
commitUpdate @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:88020
commitWork @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:101013
commitMutationEffects @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:103243
callCallback @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:80655
invokeGuardedCallbackDev @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:80704
invokeGuardedCallback @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:80759
commitRootImpl @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:102976
unstable_runWithPriority @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:112238
runWithPriority$1 @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:91506
commitRoot @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:102848
finishSyncRender @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:102274
performSyncWorkOnRoot @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:102260
(anonymous) @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:91556
unstable_runWithPriority @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:112238
runWithPriority$1 @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:91506
flushSyncCallbackQueueImpl @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:91551
flushSyncCallbackQueue @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:91539
flushPendingDiscreteUpdates @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:102314
flushDiscreteUpdates @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:102294
finishEventHandler @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:81231
batchedEventUpdates @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:81265
dispatchEventForLegacyPluginEventSystem @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:84035
attemptToDispatchEvent @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:84734
dispatchEvent @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:84656
unstable_runWithPriority @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:112238
runWithPriority$1 @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:91506
discreteUpdates$1 @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:102354
discreteUpdates @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:81273
dispatchDiscreteEvent @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-a589d9.manager.bundle.js:84635
Show 3 more frames

Steps to reproduce the behavior

Setup Angular 12 app with Storybook 6 and addon-cssresources plugin
Setup a sample story with a single css-resource
Navigate to the story
Check the css-resource checkbox control
Open browser console (F12)
See error

Expected behavior

Error should not occur

Screenshots and/or logs

Please note that screenshots will vanish after 6 months (~19.04.2022)

Environment

OS: Windows 10
Node.js version: v14.17.6
NPM version: 6.14.15
Browser (if applicable): chrome
Browser version (if applicable): 94.0.4606.81 (Official Build) (64Bit)
Device (if applicable): Notebook
Libraries
- @angular/core 12.2.10
- @storybook/core 6.3.12
- @storybook/addon-cssresources 6.2.9 (latest, at the time being)
- react 16.14.0

Additional context

n/a

Addon: CSS Resources - Possible to change order of CSS files?

I'm using 'CSS Resources' to switch between different (global) CSS files.
This has been set-up in the preview.js and is working as expected.

There is one issue I can't solve:
The CSS file from the 'CSS Resources' addon is loaded after the story specific CSS.
This results in story specific styling being overwritten by the global CSS.

Example:
cssresources is loading bootstrap.css.
Button.stories.js is loading its own CSS file Button.css to overwrite specific styles.
Due to the order of the CSS files being loaded in the DOM this isn't working.

Is there a way to control the order of the CSS files? So the story specific CSS always loads after global / cssresources CSS files? Thanks!

Information:
@storybook/react version 6.2.9
@storybook/addon-cssresources version 6.2.9

please make addon compatible for react 18!

this would be very nice , thanks in advance!

Request: more examples

It isn't clear how to add the CSS resources to the entire component. The decorators on the component, with the same parameters as on per-story basis, results in an empty tab.

It's also unclear how, on the contrary, to make the CSS Resources tab hidden on stories that don't use the decorator.

Use the new Framework API

Opening this issue so we can address the upcoming changes on how addons are built/updated for the upcoming 7.0 release. If anyone is interested in making the changes required and continuing to support and maintain the addon, let us know so that we're aware and help/guide the community moving forward. To help with this process, we've built an abridged guide here, and should any questions or issues, please reach out to us in the prerelease channel in our Discord Server.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.

Jobs

Jooble