Socket
Socket
Sign inDemoInstall

@storybook/react

Package Overview
Dependencies
Maintainers
11
Versions
1881
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@storybook/react - npm Package Compare versions

Comparing version 0.0.0-pr-28882-sha-90fe4bc9 to 0.0.0-pr-28882-sha-a04fe375

52

dist/index.d.ts

@@ -9,9 +9,13 @@ import { M as Meta } from './public-types-1083bc5a.js';

/** Function that sets the globalConfig of your storybook. The global config is the preview module of your .storybook folder.
/**
* Function that sets the globalConfig of your storybook. The global config is the preview module of
* your .storybook folder.
*
* It should be run a single time, so that your global config (e.g. decorators) is applied to your stories when using `composeStories` or `composeStory`.
* It should be run a single time, so that your global config (e.g. decorators) is applied to your
* stories when using `composeStories` or `composeStory`.
*
* Example:
*```jsx
* // setup.js (for jest)
*
* ```jsx
* // setup-file.js
* import { setProjectAnnotations } from '@storybook/react';

@@ -21,18 +25,19 @@ * import projectAnnotations from './.storybook/preview';

* setProjectAnnotations(projectAnnotations);
*```
* ```
*
* @param projectAnnotations - e.g. (import * as projectAnnotations from '../.storybook/preview')
* @param projectAnnotations - E.g. (import * as projectAnnotations from '../.storybook/preview')
*/
declare function setProjectAnnotations(projectAnnotations: NamedOrDefaultProjectAnnotations | NamedOrDefaultProjectAnnotations[]): NormalizedProjectAnnotations<ReactRenderer>;
declare function setProjectAnnotations(projectAnnotations: NamedOrDefaultProjectAnnotations<any> | NamedOrDefaultProjectAnnotations<any>[]): NormalizedProjectAnnotations<ReactRenderer>;
declare const INTERNAL_DEFAULT_PROJECT_ANNOTATIONS: ProjectAnnotations<ReactRenderer>;
/**
* Function that will receive a story along with meta (e.g. a default export from a .stories file)
* and optionally projectAnnotations e.g. (import * as projectAnnotations from '../.storybook/preview)
* and will return a composed component that has all args/parameters/decorators/etc combined and applied to it.
* and optionally projectAnnotations e.g. (import * as projectAnnotations from
* '../.storybook/preview) and will return a composed component that has all
* args/parameters/decorators/etc combined and applied to it.
*
*
* It's very useful for reusing a story in scenarios outside of Storybook like unit testing.
*
* Example:
*```jsx
*
* ```jsx
* import { render } from '@testing-library/react';

@@ -48,8 +53,9 @@ * import { composeStory } from '@storybook/react';

* });
*```
* ```
*
* @param story
* @param componentAnnotations - e.g. (import Meta from './Button.stories')
* @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
* @param [exportsName] - in case your story does not contain a name and you want it to have a name.
* @param componentAnnotations - E.g. (import Meta from './Button.stories')
* @param [projectAnnotations] - E.g. (import * as projectAnnotations from '../.storybook/preview')
* this can be applied automatically if you use `setProjectAnnotations` in your setup files.
* @param [exportsName] - In case your story does not contain a name and you want it to have a name.
*/

@@ -59,10 +65,11 @@ declare function composeStory<TArgs extends Args = Args>(story: StoryAnnotationsOrFn<ReactRenderer, TArgs>, componentAnnotations: Meta<TArgs | any>, projectAnnotations?: ProjectAnnotations<ReactRenderer>, exportsName?: string): ComposedStoryFn<ReactRenderer, Partial<TArgs>>;

* Function that will receive a stories import (e.g. `import * as stories from './Button.stories'`)
* and optionally projectAnnotations (e.g. `import * as projectAnnotations from '../.storybook/preview`)
* and will return an object containing all the stories passed, but now as a composed component that has all args/parameters/decorators/etc combined and applied to it.
* and optionally projectAnnotations (e.g. `import * as projectAnnotations from
* '../.storybook/preview`) and will return an object containing all the stories passed, but now as
* a composed component that has all args/parameters/decorators/etc combined and applied to it.
*
*
* It's very useful for reusing stories in scenarios outside of Storybook like unit testing.
*
* Example:
*```jsx
*
* ```jsx
* import { render } from '@testing-library/react';

@@ -78,6 +85,7 @@ * import { composeStories } from '@storybook/react';

* });
*```
* ```
*
* @param csfExports - e.g. (import * as stories from './Button.stories')
* @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
* @param csfExports - E.g. (import * as stories from './Button.stories')
* @param [projectAnnotations] - E.g. (import * as projectAnnotations from '../.storybook/preview')
* this can be applied automatically if you use `setProjectAnnotations` in your setup files.
*/

@@ -84,0 +92,0 @@ declare function composeStories<TModule extends Store_CSFExports<ReactRenderer, any>>(csfExports: TModule, projectAnnotations?: ProjectAnnotations<ReactRenderer>): Omit<StoriesWithPartialProps<ReactRenderer, TModule>, keyof Store_CSFExports>;

@@ -6,8 +6,9 @@ import { PresetProperty } from 'storybook/internal/types';

/**
* Try to resolve react and react-dom from the root node_modules of the project
* addon-docs uses this to alias react and react-dom to the project's version when possible
* If the user doesn't have an explicit dependency on react this will return the existing values
* Which will be the versions shipped with addon-docs
* Try to resolve react and react-dom from the root node_modules of the project addon-docs uses this
* to alias react and react-dom to the project's version when possible If the user doesn't have an
* explicit dependency on react this will return the existing values Which will be the versions
* shipped with addon-docs
*
* We do the exact same thing in the common preset, but that will fail in Yarn PnP because
*
* @storybook/core-server doesn't have a peer dependency on react

@@ -14,0 +15,0 @@ * This will make @storybook/react projects work in Yarn PnP

{
"name": "@storybook/react",
"version": "0.0.0-pr-28882-sha-90fe4bc9",
"version": "0.0.0-pr-28882-sha-a04fe375",
"description": "Storybook React renderer",

@@ -67,8 +67,8 @@ "keywords": [

"dependencies": {
"@storybook/components": "^0.0.0-pr-28882-sha-90fe4bc9",
"@storybook/components": "^0.0.0-pr-28882-sha-a04fe375",
"@storybook/global": "^5.0.0",
"@storybook/manager-api": "^0.0.0-pr-28882-sha-90fe4bc9",
"@storybook/preview-api": "^0.0.0-pr-28882-sha-90fe4bc9",
"@storybook/react-dom-shim": "0.0.0-pr-28882-sha-90fe4bc9",
"@storybook/theming": "^0.0.0-pr-28882-sha-90fe4bc9",
"@storybook/manager-api": "^0.0.0-pr-28882-sha-a04fe375",
"@storybook/preview-api": "^0.0.0-pr-28882-sha-a04fe375",
"@storybook/react-dom-shim": "0.0.0-pr-28882-sha-a04fe375",
"@storybook/theming": "^0.0.0-pr-28882-sha-a04fe375",
"@types/escodegen": "^0.0.6",

@@ -90,3 +90,3 @@ "@types/estree": "^0.0.51",

"devDependencies": {
"@storybook/test": "0.0.0-pr-28882-sha-90fe4bc9",
"@storybook/test": "0.0.0-pr-28882-sha-a04fe375",
"@types/babel-plugin-react-docgen": "^4",

@@ -103,3 +103,3 @@ "@types/semver": "^7.3.4",

"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
"storybook": "^0.0.0-pr-28882-sha-90fe4bc9",
"storybook": "^0.0.0-pr-28882-sha-a04fe375",
"typescript": ">= 4.2.x"

@@ -106,0 +106,0 @@ },

@@ -7,5 +7,3 @@ import React from 'react';

/**
* Primary UI component for user interaction
*/
/** Primary UI component for user interaction */
export const Button = ({ primary, backgroundColor, size, label, ...props }) => {

@@ -26,21 +24,11 @@ const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';

Button.propTypes = {
/**
* Is this the principal call to action on the page?
*/
/** Is this the principal call to action on the page? */
primary: PropTypes.bool,
/**
* What background color to use
*/
/** What background color to use */
backgroundColor: PropTypes.string,
/**
* How large should the button be?
*/
/** How large should the button be? */
size: PropTypes.oneOf(['small', 'medium', 'large']),
/**
* Button contents
*/
/** Button contents */
label: PropTypes.string.isRequired,
/**
* Optional click handler
*/
/** Optional click handler */
onClick: PropTypes.func,

@@ -47,0 +35,0 @@ };

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc