# @talend/scripts-config-storybook-lib > Storybook configuration for @talend/scripts-core Latest version **5.7.0** (published 2025-09-09) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install @talend/scripts-config-storybook-lib pnpm add @talend/scripts-config-storybook-lib yarn add @talend/scripts-config-storybook-lib bun add @talend/scripts-config-storybook-lib ``` ## Health **Score 40/100 (D)** — status: stable. Positive: no vulnerabilities; high maintenance score. Warnings: low downloads; no types; no esm support. Negative: stale. ## Facts | | | |---|---| | Version | 5.7.0 | | Published | 2025-09-09 | | First published | 2022-01-17 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 21 | | Unpacked size | 31.3 KB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 159 | | Author | Talend Frontend | | Maintainers | talend-frontend | ## Links - npm: https://www.npmjs.com/package/@talend/scripts-config-storybook-lib - Repository: https://github.com/Talend/ui - Homepage: https://github.com/Talend/ui/tree/master/packages/ui-scripts#readme - Issues: https://github.com/Talend/ui/issues - npm.io page: https://npm.io/package/@talend/scripts-config-storybook-lib ## Dependencies (21) - [msw](https://npm.io/package/msw.md) ^2.11.1 - [util](https://npm.io/package/util.md) ^0.12.5 - [assert](https://npm.io/package/assert.md) ^2.1.0 - [lodash](https://npm.io/package/lodash.md) ^4.17.21 - [storybook](https://npm.io/package/storybook.md) ^7.6.20 - [@storybook/jest](https://npm.io/package/@storybook/jest.md) ^0.2.3 - [querystring-es3](https://npm.io/package/querystring-es3.md) ^0.2.1 - [@storybook/react](https://npm.io/package/@storybook/react.md) ^7.6.20 - [msw-storybook-addon](https://npm.io/package/msw-storybook-addon.md) ^2.0.5 - [i18next-http-backend](https://npm.io/package/i18next-http-backend.md) ^1.4.5 - [@storybook/addon-a11y](https://npm.io/package/@storybook/addon-a11y.md) ^7.6.20 - [@storybook/addon-links](https://npm.io/package/@storybook/addon-links.md) ^7.6.20 - [@storybook/preset-scss](https://npm.io/package/@storybook/preset-scss.md) ^1.0.3 - [@storybook/source-loader](https://npm.io/package/@storybook/source-loader.md) ^7.6.20 - [@storybook/react-webpack5](https://npm.io/package/@storybook/react-webpack5.md) ^7.6.20 - [@storybook/testing-library](https://npm.io/package/@storybook/testing-library.md) ^0.2.2 - [@storybook/addon-essentials](https://npm.io/package/@storybook/addon-essentials.md) ^7.6.20 - [@storybook/addon-storysource](https://npm.io/package/@storybook/addon-storysource.md) ^7.6.20 - [@storybook/addon-interactions](https://npm.io/package/@storybook/addon-interactions.md) ^7.6.20 - [@talend/dynamic-cdn-webpack-plugin](https://npm.io/package/@talend/dynamic-cdn-webpack-plugin.md) ^14.2.0 - [@talend/scripts-config-react-webpack](https://npm.io/package/@talend/scripts-config-react-webpack.md) ^16.10.0 ## Recent versions - 5.7.0 (latest) — 2025-09-09 - 5.6.0 — 2025-07-09 - 5.5.2 — 2025-06-27 - 5.5.1 — 2025-06-19 - 5.5.0 — 2024-12-10 - 5.4.0 — 2024-06-13 - 5.3.2 — 2024-06-11 - 5.3.1 — 2024-02-29 - 5.3.0 — 2023-12-15 - 5.2.1 — 2023-12-01 - 5.2.0 — 2023-11-15 - 5.1.0 — 2023-10-24 - 5.0.0 — 2023-09-29 - 4.1.0 — 2023-07-24 - 4.0.3 — 2023-06-12 - … 45 more at https://npm.io/package/@talend/scripts-config-storybook-lib/versions ## README ## Storybook configuration for lib This configuration module contains an opinionated storybook configuration, supporting some extra features around talend libraries and framework. ### How to use First step is to use it with the default configuration as possible. This is served with talend presets ``` bash yarn add @talend/scripts-core @talend/scripts-preset-react-lib # or yarn add @talend/scripts-core @talend/scripts-preset-react # or yarn add @talend/scripts-core @talend/scripts-preset-react-ng ``` In your package.json ```json { "scripts": { "start-storybook": "talend-scripts start-storybook", "build-storybook": "talend-scripts build-storybook", } } ``` ### Default configuration Default configuration can be found in ui-scripts repo: - [main.js](https://github.com/Talend/ui-scripts/blob/master/packages/config-storybook-lib/.storybook-templates/main.js#L22) - [preview.js](https://github.com/Talend/ui-scripts/blob/master/packages/config-storybook-lib/.storybook-templates/preview.js#L26) - [preview-head](https://github.com/Talend/ui-scripts/blob/master/packages/config-storybook-lib/.storybook-templates/preview-head.html) ### MSW addon MSW addon is configured and initialized out of the box. You can use it directly without any other configuration. ### CMF You can initialize `@talend/react-cmf` with a proper decorator by exporting the cmf modules and settings in `preview.js`. ```javascript import cmfModule, { settings } from './cmfModule'; export const cmf = { modules: [cmfModule], settings, // optional }; ``` ### i18n You can initialize `i18next` with a proper decorator by exporting the i18n namespaces and locales `preview.js`. Locales can be static translations or urls to the translation files. Static translations example ```javascript import { locales as datasetLocales } from '@talend/locales-inventory-dataset/locales'; import { namespaces as datasetNamespaces } from '@talend/locales-inventory-dataset/namespaces'; import { locales as ratingLocales } from '@talend/locales-inventory-rating/locales'; import { namespaces as ratingNamespaces } from '@talend/locales-inventory-rating/namespaces'; import { locales as sharingLocales } from '@talend/locales-inventory-sharing/locales'; import { namespaces as sharingNamespaces } from '@talend/locales-inventory-sharing/namespaces'; export const i18n = { namespaces: [...datasetNamespaces, ...ratingNamespaces, ...sharingNamespaces], locales: merge(sharingLocales, datasetLocales, ratingLocales), }; ``` Remote translations example ```javascript import { namespaces as tuiNamespaces } from '@talend/locales-tui-components/namespaces'; import { namespaces as dsNamespaces } from '@talend/locales-design-system/namespaces'; export const i18n = { namespaces: [...tuiNamespaces, ...dsNamespaces], remoteLocalesMap: { 'tui-components': 'https://unpkg.com/@talend/locales-tui-components/locales/{{lng}}/{{ns}}.json', 'design-system': 'https://unpkg.com/@talend/locales-design-system/locales/{{lng}}/{{ns}}.json', }, }; ``` ### Advanced configuration It is possible to add custom storybook configurations. They will be merged with default configuration. To do so, just create a `.storybook/` folder and any storybook configuration files in it, like when you configure your storybook yourself. Keep in mind that using `@talend/scripts` to run/build storybook will always take default settings too. --- _Source: https://npm.io/package/@talend/scripts-config-storybook-lib · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._