1.3.7 • Published 2 years ago

@storybook/addon-styling v1.3.7

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

@storybook/addon-styling

Get started in Storybook faster with popular styling tools.

Toggling between themes

✨ Features

  • 🧩 Configuration templates for popular tools
  • 🎨 Provide themes
  • 🔄 Toggle between multiple themes when more than one is provided
  • ❗️ Override theme at the component and story level through parameters

🏁 Getting Started

To get started, install the package as a dev dependency

yarn:

yarn add -D @storybook/addon-styling

npm:

npm install -D @storybook/addon-styling

pnpm:

pnpm add -D @storybook/addon-styling

Then, include the addon in your .storybook/main.js file

module.exports = {
  stories: [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-essentials",
+   "@storybook/addon-style-config"
  ],
};

👇 Tool specific configuration

For tool-specific setup, check out the recipes below

Don't see your favorite tool listed? Don't worry! That doesn't mean this addon isn't for you. Check out the "Writing a custom decorator" section of the api reference.

❗️ Overriding theme

If you want to override your theme for a particular component or story, you can use the theming.themeOverride parameter.

import React from "react";
import { Button } from "./Button";

export default {
  title: "Example/Button",
  component: Button,
  parameters: {
    theming: {
      themeOverride: "light", // component level override
    },
  },
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: "Button",
};

export const PrimaryDark = Template.bind({});
PrimaryDark.args = {
  primary: true,
  label: "Button",
};
PrimaryDark.parameters = {
  theming: {
    themeOverride: "dark", // Story level override
  },
};

🤝 Contributing

If you'd like to contribute to this addon, THANK YOU, I'd love your help 🙏

📝 Development scripts

  • yarn start runs babel in watch mode and starts Storybook
  • yarn build build and package your addon code
districtr-mapbox-glbarely-human-library@everything-registry/sub-chunk-875nextra-docs-demomo-react-ui@amalitech-org/design-systemwistron-storybookstorybook-aerathe-handsomestnerd-internalthemepublishv1ux-sil-componentsux-sil-components-betaux-sil-components2react-native-lib-builder-bob-story-1ui-lmo-components@bbl-digital/snorre-v2h-ui-lreact-native-lib-builder-bob-story-2tsr-uiui-sil-components2titan.designsystemtopty-component-web-lib@asad1381/custom-components@alicd/storybook-config-cone@allegriakinzola/evirtus@ada-h/homebase-integration@cruk/chakra-components@hovo2003/design-system@hovo2003/gag@gargalo/ui-kit@goddardsystems/web-component-library@leap-ai/ui@leoj_anidem/toast-notify@itgold/grandbazar-ui-kit@m_v_c_1198/viewers@m_v_c_1198/journey@marimo-team/frontend-wasm@nds_core/nds@niranjan821/journey-demo@noahspan/noahspan-components@ehsanabdolrashidi/react-basic-elements@mitalic/journey@mitalic/journey-app@mitalic/journey1@mitalic/view@mitalic/viewers@moda/om@joshvera/frontend@raygun-playground/ui@procore/storybook-addonmo-react-ui-testmobase-testoa-componentbookpayabl-ui-libraryrmscomponentsnextra-docs-demoonextra-docs-template-demo-2nextra-docs-template-demo1nextra-docs-test-demonextra-docs-test-demo2pluzchat-design-systemrn-core-componentshfn-core-admin-componentshamrahi-ui-libraryls-core-componentslx-taro-storybook-helperldnc-uikpi-ui-webcomp-ds-2@youpal-design-system/design-systemadmin-core-components@zimyo/componentsara-crom-components-libastraui-tailwindcore-admin-componentsbh-uibahmni-carbon-uiexperimental-bahmni-next-uifbeyzak-ui-libraryffn-core-componentsfn-core-componentsfree-bee@stn-ui/storybook@sisiras/openmrs-module-ipd-frontend@shubh799/homebase@shubh799/homebase-integration@shubh799/journey@shubh799/viewers@simuratli/uds@solussaude-ui/docs
2.0.2-next.3

2 years ago

2.0.2-next.4

2 years ago

2.0.2-next.1

2 years ago

1.3.7

2 years ago

1.3.6

2 years ago

1.3.5

2 years ago

1.3.4

2 years ago

1.3.3

2 years ago

1.3.2

2 years ago

1.3.1

2 years ago

1.2.0

2 years ago

1.1.0

2 years ago

1.3.0

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

2.0.0

2 years ago

1.0.0-next.0

2 years ago

1.0.0-next.1

2 years ago

1.0.0-next.2

2 years ago

0.3.2

2 years ago

0.3.1

2 years ago

0.3.2-next.1

2 years ago

0.3.3-next.0

2 years ago

0.3.2-next.0

2 years ago

0.3.0

2 years ago

0.2.1

2 years ago

0.1.0

2 years ago

0.2.0

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago