@storybook/blocks
Advanced tools
@storybook/blocks - npm Package Compare versions
Comparing version 0.0.0-pr-28768-sha-f4bf860e to 0.0.0-pr-28797-sha-2c38805d
| import { Conditional, DocsContextProps, PreparedStory, ModuleExports, Renderer as Renderer$1, Args as Args$1, StoryId, ModuleExport, ResolvedModuleExportType, ResolvedModuleExportFromType, Parameters as Parameters$1, ProjectAnnotations, BaseAnnotations, ComponentTitle } from 'storybook/internal/types'; | ||
| export { DocsContextProps } from 'storybook/internal/types'; | ||
| import React, { ComponentProps, FunctionComponent, ReactNode, FC, PropsWithChildren, Context, ReactElement } from 'react'; | ||
| import { PropDescriptor } from 'storybook/internal/preview-api'; | ||
| import { Renderer } from '@storybook/csf'; | ||
| import { PropDescriptor } from 'storybook/internal/preview-api'; | ||
| import { SupportedLanguage, SyntaxHighlighter, ActionItem, SyntaxHighlighterFormatTypes } from 'storybook/internal/components'; | ||
@@ -16,17 +16,9 @@ import { SourceType } from 'storybook/internal/docs-tools'; | ||
| interface SourceCodeProps { | ||
| /** | ||
| * The language the syntax highlighter uses for your story’s code | ||
| */ | ||
| /** The language the syntax highlighter uses for your story’s code */ | ||
| language?: SupportedLanguage; | ||
| /** | ||
| * Use this to override the content of the source block. | ||
| */ | ||
| /** Use this to override the content of the source block. */ | ||
| code?: string; | ||
| /** | ||
| * The (prettier) formatter the syntax highlighter uses for your story’s code. | ||
| */ | ||
| /** The (prettier) formatter the syntax highlighter uses for your story’s code. */ | ||
| format?: ComponentProps<typeof SyntaxHighlighter>['format']; | ||
| /** | ||
| * Display the source snippet in a dark mode. | ||
| */ | ||
| /** Display the source snippet in a dark mode. */ | ||
| dark?: boolean; | ||
@@ -38,5 +30,3 @@ } | ||
| } | ||
| /** | ||
| * Syntax-highlighted source code for a component (or anything!) | ||
| */ | ||
| /** Syntax-highlighted source code for a component (or anything!) */ | ||
| declare const Source$1: FunctionComponent<SourceProps$1>; | ||
@@ -118,4 +108,4 @@ | ||
| /** | ||
| * Display the props for a component as a props table. Each row is a collection of | ||
| * ArgDefs, usually derived from docgen info for the component. | ||
| * Display the props for a component as a props table. Each row is a collection of ArgDefs, usually | ||
| * derived from docgen info for the component. | ||
| */ | ||
@@ -150,4 +140,4 @@ declare const ArgsTable: FC<ArgsTableProps>; | ||
| /** | ||
| * Convenient styleguide documentation showing examples of type | ||
| * with different sizes and weights and configurable sample text. | ||
| * Convenient styleguide documentation showing examples of type with different sizes and weights and | ||
| * configurable sample text. | ||
| */ | ||
@@ -165,4 +155,4 @@ declare const Typeset: FC<TypesetProps>; | ||
| /** | ||
| * A single color row your styleguide showing title, subtitle and one or more colors, used | ||
| * as a child of `ColorPalette`. | ||
| * A single color row your styleguide showing title, subtitle and one or more colors, used as a | ||
| * child of `ColorPalette`. | ||
| */ | ||
@@ -174,4 +164,4 @@ declare const ColorItem: FunctionComponent<ColorItemProps>; | ||
| /** | ||
| * Styleguide documentation for colors, including names, captions, and color swatches, | ||
| * all specified as `ColorItem` children of this wrapper component. | ||
| * Styleguide documentation for colors, including names, captions, and color swatches, all specified | ||
| * as `ColorItem` children of this wrapper component. | ||
| */ | ||
@@ -184,5 +174,3 @@ declare const ColorPalette: FunctionComponent<ColorPaletteProps>; | ||
| } | ||
| /** | ||
| * An individual icon with a caption and an example (passed as `children`). | ||
| */ | ||
| /** An individual icon with a caption and an example (passed as `children`). */ | ||
| declare const IconItem: FunctionComponent<IconItemProps>; | ||
@@ -192,5 +180,3 @@ interface IconGalleryProps { | ||
| } | ||
| /** | ||
| * Show a grid of icons, as specified by `IconItem`. | ||
| */ | ||
| /** Show a grid of icons, as specified by `IconItem`. */ | ||
| declare const IconGallery: FunctionComponent<IconGalleryProps>; | ||
@@ -234,13 +220,7 @@ | ||
| type SourceParameters = SourceCodeProps & { | ||
| /** | ||
| * Where to read the source code from, see `SourceType` | ||
| */ | ||
| /** Where to read the source code from, see `SourceType` */ | ||
| type?: SourceType; | ||
| /** | ||
| * Transform the detected source for display | ||
| */ | ||
| /** Transform the detected source for display */ | ||
| transform?: (code: string, storyContext: ReturnType<DocsContextProps['getStoryContext']>) => string; | ||
| /** | ||
| * Internal: set by our CSF loader (`enrichCsf` in `@storybook/csf-tools`). | ||
| */ | ||
| /** Internal: set by our CSF loader (`enrichCsf` in `@storybook/csf-tools`). */ | ||
| originalSource?: string; | ||
@@ -256,9 +236,7 @@ }; | ||
| * | ||
| * <Source of={ButtonStories.Primary} /> | ||
| * <Source of={ButtonStories.Primary} />; | ||
| * ``` | ||
| */ | ||
| of?: ModuleExport; | ||
| /** | ||
| * Internal prop to control if a story re-renders on args updates | ||
| */ | ||
| /** Internal prop to control if a story re-renders on args updates */ | ||
| __forceInitialArgs?: boolean; | ||
@@ -269,5 +247,4 @@ }; | ||
| /** | ||
| * Story source doc block renders source code if provided, | ||
| * or the source for a story if `storyId` is provided, or | ||
| * the source for the current story if nothing is provided. | ||
| * Story source doc block renders source code if provided, or the source for a story if `storyId` is | ||
| * provided, or the source for the current story if nothing is provided. | ||
| */ | ||
@@ -277,5 +254,3 @@ declare const Source: FC<SourceProps>; | ||
| type PureStoryProps = ComponentProps<typeof Story$1>; | ||
| /** | ||
| * Props to reference another story | ||
| */ | ||
| /** Props to reference another story */ | ||
| type StoryRefProps = { | ||
@@ -301,3 +276,3 @@ /** | ||
| * | ||
| * <Story of={ButtonStories.Primary} meta={ButtonStories} /> | ||
| * <Story of={ButtonStories.Primary} meta={ButtonStories} />; | ||
| * ``` | ||
@@ -308,21 +283,11 @@ */ | ||
| type StoryParameters = { | ||
| /** | ||
| * Render the story inline or in an iframe | ||
| */ | ||
| /** Render the story inline or in an iframe */ | ||
| inline?: boolean; | ||
| /** | ||
| * When rendering in an iframe (`inline={false}`), set the story height | ||
| */ | ||
| /** When rendering in an iframe (`inline={false}`), set the story height */ | ||
| height?: string; | ||
| /** | ||
| * Whether to run the story's play function | ||
| */ | ||
| /** Whether to run the story's play function */ | ||
| autoplay?: boolean; | ||
| /** | ||
| * Internal prop to control if a story re-renders on args updates | ||
| */ | ||
| /** Internal prop to control if a story re-renders on args updates */ | ||
| __forceInitialArgs?: boolean; | ||
| /** | ||
| * Internal prop if this story is the primary story | ||
| */ | ||
| /** Internal prop if this story is the primary story */ | ||
| __primary?: boolean; | ||
@@ -355,3 +320,3 @@ }; | ||
| * | ||
| * <Canvas of={ButtonStories.Primary} meta={ButtonStories} /> | ||
| * <Canvas of={ButtonStories.Primary} meta={ButtonStories} />; | ||
| * ``` | ||
@@ -361,6 +326,6 @@ */ | ||
| /** | ||
| * Specify the initial state of the source panel | ||
| * hidden: the source panel is hidden by default | ||
| * shown: the source panel is shown by default | ||
| * none: the source panel is not available and the button to show it is hidden | ||
| * Specify the initial state of the source panel hidden: the source panel is hidden by default | ||
| * shown: the source panel is shown by default none: the source panel is not available and the | ||
| * button to show it is hidden | ||
| * | ||
| * @default 'hidden' | ||
@@ -370,16 +335,12 @@ */ | ||
| /** | ||
| * how to layout the story within the canvas | ||
| * padded: the story has padding within the canvas | ||
| * fullscreen: the story is rendered edge to edge within the canvas | ||
| * centered: the story is centered within the canvas | ||
| * How to layout the story within the canvas padded: the story has padding within the canvas | ||
| * fullscreen: the story is rendered edge to edge within the canvas centered: the story is | ||
| * centered within the canvas | ||
| * | ||
| * @default 'padded' | ||
| */ | ||
| layout?: Layout; | ||
| /** | ||
| * @see {SourceProps} | ||
| */ | ||
| /** @see {SourceProps} */ | ||
| source?: Omit<SourceProps, 'dark'>; | ||
| /** | ||
| * @see {StoryProps} | ||
| */ | ||
| /** @see {StoryProps} */ | ||
| story?: Pick<StoryProps, 'inline' | 'height' | 'autoplay' | '__forceInitialArgs' | '__primary'>; | ||
@@ -401,6 +362,5 @@ }; | ||
| /** | ||
| * A hook to resolve the `of` prop passed to a block. | ||
| * will return the resolved module | ||
| * if the resolved module is a meta it will include a preparedMeta property similar to a preparedStory | ||
| * if the resolved module is a component it will include the project annotations | ||
| * A hook to resolve the `of` prop passed to a block. will return the resolved module if the | ||
| * resolved module is a meta it will include a preparedMeta property similar to a preparedStory if | ||
| * the resolved module is a component it will include the project annotations | ||
| */ | ||
@@ -417,4 +377,4 @@ declare const useOf: <TType extends ResolvedModuleExportType>(moduleExportOrType: Of, validTypes?: TType[]) => ResolvedModuleExportFromType<TType>; | ||
| /** | ||
| * Specify where to get the description from. Can be a component, a CSF file or a story. | ||
| * If not specified, the description will be extracted from the meta of the attached CSF file. | ||
| * Specify where to get the description from. Can be a component, a CSF file or a story. If not | ||
| * specified, the description will be extracted from the meta of the attached CSF file. | ||
| */ | ||
@@ -473,4 +433,4 @@ of?: Of; | ||
| /** | ||
| * This component is used to declare component metadata in docs | ||
| * and gets transformed into a default export underneath the hood. | ||
| * This component is used to declare component metadata in docs and gets transformed into a default | ||
| * export underneath the hood. | ||
| */ | ||
@@ -480,5 +440,3 @@ declare const Meta: FC<MetaProps>; | ||
| interface PrimaryProps { | ||
| /** | ||
| * Specify where to get the primary story from. | ||
| */ | ||
| /** Specify where to get the primary story from. */ | ||
| of?: Of; | ||
@@ -499,4 +457,4 @@ } | ||
| /** | ||
| * Specify where to get the subtitle from. | ||
| * If not specified, the subtitle will be extracted from the meta of the attached CSF file. | ||
| * Specify where to get the subtitle from. If not specified, the subtitle will be extracted from | ||
| * the meta of the attached CSF file. | ||
| */ | ||
@@ -509,9 +467,7 @@ of?: Of; | ||
| /** | ||
| * Specify where to get the title from. Must be a CSF file's default export. | ||
| * If not specified, the title will be read from children, or extracted from the meta of the attached CSF file. | ||
| * Specify where to get the title from. Must be a CSF file's default export. If not specified, the | ||
| * title will be read from children, or extracted from the meta of the attached CSF file. | ||
| */ | ||
| of?: Of; | ||
| /** | ||
| * Specify content to display as the title. | ||
| */ | ||
| /** Specify content to display as the title. */ | ||
| children?: ReactNode; | ||
@@ -565,2 +521,3 @@ } | ||
| * Whether the color picker should be open by default when rendered. | ||
| * | ||
| * @default false | ||
@@ -609,10 +566,10 @@ */ | ||
| * # Boolean Control | ||
| * Renders a switch toggle with "True" or "False". | ||
| * or if the value is `undefined`, renders a button to set the boolean. | ||
| * | ||
| * Renders a switch toggle with "True" or "False". or if the value is `undefined`, renders a button | ||
| * to set the boolean. | ||
| * | ||
| * ## Example usage | ||
| * | ||
| * ``` | ||
| * | ||
| * <BooleanControl name="isTrue" value={value} onChange={handleValueChange}/> | ||
| * <BooleanControl name="isTrue" value={value} onChange={handleValueChange} />; | ||
| * ``` | ||
@@ -648,9 +605,11 @@ */ | ||
| /** | ||
| * The accept attribute value is a string that defines the file types the file input should accept. This string is a comma-separated list of unique file type specifiers. | ||
| * @example | ||
| * *\/* | ||
| * @example | ||
| * .webm,video/webm | ||
| * @example | ||
| * .doc,.docx,application/msword | ||
| * The accept attribute value is a string that defines the file types the file input should | ||
| * accept. This string is a comma-separated list of unique file type specifiers. | ||
| * | ||
| * @example _/_ | ||
| * | ||
| * @example .webm,video/webm | ||
| * | ||
| * @example .doc,.docx,application/msword | ||
| * | ||
| * @defaultValue `image/*` | ||
@@ -657,0 +616,0 @@ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept |
| { | ||
| "name": "@storybook/blocks", | ||
| "version": "0.0.0-pr-28768-sha-f4bf860e", | ||
| "version": "0.0.0-pr-28797-sha-2c38805d", | ||
| "description": "Storybook Doc Blocks", | ||
@@ -26,5 +26,5 @@ "keywords": [ | ||
| "types": "./dist/index.d.ts", | ||
| "node": "./dist/index.js", | ||
| "import": "./dist/index.mjs", | ||
| "require": "./dist/index.js" | ||
| "require": "./dist/index.js", | ||
| "node": "./dist/index.js" | ||
| }, | ||
@@ -44,4 +44,4 @@ "./package.json": "./package.json" | ||
| "scripts": { | ||
| "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", | ||
| "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" | ||
| "check": "jiti ../../../scripts/prepare/check.ts", | ||
| "prep": "jiti ../../../scripts/prepare/bundle.ts" | ||
| }, | ||
@@ -65,5 +65,5 @@ "dependencies": { | ||
| "devDependencies": { | ||
| "@storybook/addon-actions": "0.0.0-pr-28768-sha-f4bf860e", | ||
| "@storybook/react": "0.0.0-pr-28768-sha-f4bf860e", | ||
| "@storybook/test": "0.0.0-pr-28768-sha-f4bf860e", | ||
| "@storybook/addon-actions": "0.0.0-pr-28797-sha-2c38805d", | ||
| "@storybook/react": "0.0.0-pr-28797-sha-2c38805d", | ||
| "@storybook/test": "0.0.0-pr-28797-sha-2c38805d", | ||
| "@types/color-convert": "^2.0.0", | ||
@@ -75,3 +75,3 @@ "tocbot": "^4.20.1" | ||
| "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", | ||
| "storybook": "^0.0.0-pr-28768-sha-f4bf860e" | ||
| "storybook": "^0.0.0-pr-28797-sha-2c38805d" | ||
| }, | ||
@@ -78,0 +78,0 @@ "peerDependenciesMeta": { |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-0.11%
359420
- Lines of code
- decreased by-2.09%
1925
No dependency changes