npmpackage.info

Gathering detailed insights and metrics for @newwwton/addon-storysource

@newwwton/addon-storysource

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation

5.3.0-alpha.23

87,253

MIT

TypeScript

652.11 kB

7.2

Installations

npm install @newwwton/addon-storysource

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

10.16.0

NPM Version

6.9.0 Pull Requests

Open

116

Total

14,175

Closed

2,674

Merged

11,385

Issues

Open

2,054

Total

13,594

Closed

11,540

Releases

1,600

v9.0.16

Updated on Jul 08, 2025

v9.1.0-alpha.7

Updated on Jul 07, 2025

v9.0.15

Updated on Jul 01, 2025

v9.0.14

Updated on Jun 27, 2025

v9.0.13

Updated on Jun 24, 2025

v9.0.12

Updated on Jun 18, 2025

View All 1,600 releases

Languages

TypeScript

JavaScript

MDX

Svelte

Vue

HTML

CSS

EJS

Pug

Handlebars

Shell

SCSS

TypeScript (75.57%)

JavaScript (22.15%)

MDX (0.78%)

Svelte (0.64%)

Vue (0.32%)

HTML (0.22%)

CSS (0.2%)

EJS (0.05%)

Pug (0.04%)

Handlebars (0.02%)

Shell (0.01%)

Developer

storybookjs

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

87,253 Stars

70,837 Commits

9,608 Forks

930 Watchers

744 Branches

2,005 Contributors

Updated on Jul 15, 2025

Maintainers

View All 2,005 Contributors

Package Meta Information

Latest Version

5.3.0-alpha.23

Package Id

@newwwton/addon-storysource@5.3.0-alpha.23

Unpacked Size

652.11 kB

Size

623.71 kB

File Count

NPM Version

6.9.0

Node Version

10.16.0

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

@storybook/addons @storybook/components @storybook/router @storybook/source-loader @storybook/theming core-js estraverse loader-utils prettier prop-types react-syntax-highlighter regenerator-runtime util-deprecate

Peer Dependencies

react @storybook/source-loader

Storybook Storysource Addon

This addon is used to show stories source in the addon panel.

Framework Support

Storysource Demo

Getting Started

First, install the addon

1yarn add @storybook/addon-storysource --dev

Add this line to your addons.js file

1import '@storybook/addon-storysource/register';

Use this hook to a custom webpack.config. This will generate a decorator call in every story:

1module.exports = function({ config }) {
2  config.module.rules.push({
3    test: /\.stories\.jsx?$/,
4    loaders: [require.resolve('@storybook/source-loader')],
5    enforce: 'pre',
6  });
7
8  return config;
9};

Loader Options

The loader can be customized with the following options:

parser

The parser that will be parsing your code to AST (based on prettier)

Allowed values:

javascript - default
typescript
flow

Be sure to update the regex test for the webpack rule if utilizing Typescript files.

Usage:

1module.exports = function({ config }) {
2  config.module.rules.push({
3    test: /\.stories\.tsx?$/,
4    loaders: [
5      {
6        loader: require.resolve('@storybook/source-loader'),
7        options: { parser: 'typescript' },
8      },
9    ],
10    enforce: 'pre',
11  });
12
13  return config;
14};

prettierConfig

The prettier configuration that will be used to format the story source in the addon panel.

Defaults:

1{
2  printWidth: 100,
3  tabWidth: 2,
4  bracketSpacing: true,
5  trailingComma: 'es5',
6  singleQuote: true,
7}

Usage:

1module.exports = function({ config }) {
2  config.module.rules.push({
3    test: /\.stories\.jsx?$/,
4    loaders: [
5      {
6        loader: require.resolve('@storybook/source-loader'),
7        options: {
8          prettierConfig: {
9            printWidth: 100,
10            singleQuote: false,
11          },
12        },
13      },
14    ],
15    enforce: 'pre',
16  });
17
18  return config;
19};

uglyCommentsRegex

The array of regex that is used to remove "ugly" comments.

Defaults:

1[/^eslint-.*/, /^global.*/];

Usage:

1module.exports = function({ config }) {
2  config.module.rules.push({
3    test: /\.stories\.jsx?$/,
4    loaders: [
5      {
6        loader: require.resolve('@storybook/source-loader'),
7        options: {
8          uglyCommentsRegex: [/^eslint-.*/, /^global.*/],
9        },
10      },
11    ],
12    enforce: 'pre',
13  });
14
15  return config;
16};

injectDecorator

Tell storysource whether you need inject decorator. If false, you need to add the decorator by yourself;

Defaults: true

Usage:

1module.exports = function({ config }) {
2  config.module.rules.push({
3    test: /\.stories\.jsx?$/,
4    loaders: [
5      {
6        loader: require.resolve('@storybook/source-loader'),
7        options: { injectDecorator: false },
8      },
9    ],
10    enforce: 'pre',
11  });
12
13  return config;
14};

Theming

Storysource will automatically use the light or dark syntax theme based on your storybook theme. See Theming Storybook for more information. Storysource Light/Dark Themes

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

CI-Tests

Determines if the project runs tests before pull requests are merged.

10

Contributors

Determines if the project has a set of contributors from multiple organizations (e.g., companies).

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Dependency-Update-Tool

Determines if the project uses a dependency update tool.

10

License

Determines if the project has defined a license.

10

Maintained

Determines if the project is "actively maintained".

10

Security-Policy

Determines if the project has published a security policy.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

7

Code-Review

Determines if the project requires code review before pull requests (aka merge requests) are merged.

7

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 7

Details

Warn: third-party GitHubAction not pinned by hash: .github/workflows/canary-release-pr.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/canary-release-pr.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/canary-release-pr.yml:52: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/canary-release-pr.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/canary-release-pr.yml:59: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/canary-release-pr.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/canary-release-pr.yml:63: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/canary-release-pr.yml/next?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/canary-release-pr.yml:90: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/canary-release-pr.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cron-weekly.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/cron-weekly.yml/next?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/cron-weekly.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/cron-weekly.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/danger-js.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/danger-js.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/danger-js.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/danger-js.yml/next?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/danger-js.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/danger-js.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/generate-sandboxes.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/generate-sandboxes.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/generate-sandboxes.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/generate-sandboxes.yml/next?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/generate-sandboxes.yml:71: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/generate-sandboxes.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/generate-sandboxes.yml:81: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/generate-sandboxes.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/generate-sandboxes.yml:85: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/generate-sandboxes.yml/next?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/generate-sandboxes.yml:123: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/generate-sandboxes.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/handle-release-branches.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/handle-release-branches.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/handle-release-branches.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/handle-release-branches.yml/next?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/handle-release-branches.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/handle-release-branches.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/handle-release-branches.yml:57: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/handle-release-branches.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/prepare-non-patch-release.yml:46: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/prepare-non-patch-release.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/prepare-non-patch-release.yml:55: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/prepare-non-patch-release.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/prepare-non-patch-release.yml:60: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/prepare-non-patch-release.yml/next?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/prepare-non-patch-release.yml:181: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/prepare-non-patch-release.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/prepare-patch-release.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/prepare-patch-release.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/prepare-patch-release.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/prepare-patch-release.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/prepare-patch-release.yml:39: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/prepare-patch-release.yml/next?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/prepare-patch-release.yml:186: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/prepare-patch-release.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/publish.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:46: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/publish.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:51: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/publish.yml/next?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish.yml:198: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/publish.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/stale.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/stale.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests-unit.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/tests-unit.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests-unit.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/tests-unit.yml/next?enable=pin
Info: Dockerfile dependencies are pinned
Info: no insecure (not pinned by hash) dependency downloads found in Dockerfiles
Info: no insecure (not pinned by hash) dependency downloads found in shell scripts

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

Reason

non read-only tokens detected in GitHub workflows

Details

Warn: no topLevel permission defined: .github/workflows/cron-weekly.yml:1: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/cron-weekly.yml/next?enable=permissions
Warn: no topLevel permission defined: .github/workflows/danger-js.yml:1: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/danger-js.yml/next?enable=permissions
Warn: no topLevel permission defined: .github/workflows/generate-sandboxes.yml:1: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/generate-sandboxes.yml/next?enable=permissions
Warn: no topLevel permission defined: .github/workflows/handle-release-branches.yml:1: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/handle-release-branches.yml/next?enable=permissions
Warn: no topLevel permission defined: .github/workflows/prepare-non-patch-release.yml:1: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/prepare-non-patch-release.yml/next?enable=permissions
Warn: no topLevel permission defined: .github/workflows/prepare-patch-release.yml:1: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/prepare-patch-release.yml/next?enable=permissions
Warn: topLevel 'contents' permission set to 'write': .github/workflows/publish.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/publish.yml/next?enable=permissions
Info: topLevel permissions set to 'read-all': .github/workflows/scorecards.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/scorecards.yml/next?enable=permissions
Warn: no topLevel permission defined: .github/workflows/stale.yml:1: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/stale.yml/next?enable=permissions
Warn: no topLevel permission defined: .github/workflows/tests-unit.yml:1: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/tests-unit.yml/next?enable=permissions
Warn: no topLevel permission defined: .github/workflows/trigger-circle-ci-workflow.yml:1: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/storybook/trigger-circle-ci-workflow.yml/next?enable=permissions

Score

7.2

/10

Last Scanned on 2024-03-19

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

@newwwton/addon-storysource - 5.3.0-alpha.23 | npmpackage.info