@storybook/blocks - npm Package Compare versions

Comparing version 8.4.0-alpha.5 to 8.4.0-alpha.6

dist/index.d.ts

 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 * as React from 'react';
+import React__default, { ComponentProps, FunctionComponent, ReactNode, FC, PropsWithChildren, Context, ReactElement } from 'react';
 import { PropDescriptor } from 'storybook/internal/preview-api';
@@ -9,3 +10,2 @@ import { Renderer } from '@storybook/csf';
 import { ThemeVars } from 'storybook/internal/theming';
-import PureMarkdown from 'markdown-to-jsx';
 
@@ -85,3 +85,3 @@ declare enum SourceError {
 interface ArgsTableOptionProps {
-    children?: React.ReactNode;
+    children?: React__default.ReactNode;
     updateArgs?: (args: Args) => void;
@@ -158,3 +158,3 @@ resetArgs?: (argNames?: string[]) => void;
 interface ColorPaletteProps {
-    children?: React.ReactNode;
+    children?: React__default.ReactNode;
 }
@@ -169,3 +169,3 @@ /**
     name: string;
-    children?: React.ReactNode;
+    children?: React__default.ReactNode;
 }
@@ -175,3 +175,3 @@ /** An individual icon with a caption and an example (passed as `children`). */
 interface IconGalleryProps {
-    children?: React.ReactNode;
+    children?: React__default.ReactNode;
 }
@@ -375,3 +375,3 @@ /** Show a grid of icons, as specified by `IconItem`. */
 };
-declare function Docs<TRenderer extends Renderer$1 = Renderer$1>({ context, docsParameter, }: DocsProps<TRenderer>): React.JSX.Element;
+declare function Docs<TRenderer extends Renderer$1 = Renderer$1>({ context, docsParameter, }: DocsProps<TRenderer>): React__default.JSX.Element;
 
@@ -401,5 +401,5 @@ declare const DocsPage: FC;
 };
-declare function ExternalDocs<TRenderer extends Renderer$1 = Renderer$1>({ projectAnnotationsList, children, }: PropsWithChildren<ExternalDocsProps<TRenderer>>): React.JSX.Element;
+declare function ExternalDocs<TRenderer extends Renderer$1 = Renderer$1>({ projectAnnotationsList, children, }: PropsWithChildren<ExternalDocsProps<TRenderer>>): React__default.JSX.Element;
 
-declare const ExternalDocsContainer: React.FC<React.PropsWithChildren<{
+declare const ExternalDocsContainer: React__default.FC<React__default.PropsWithChildren<{
     projectAnnotations: any;
@@ -413,5 +413,393 @@ }>>;
 
-type MarkdownProps = typeof PureMarkdown extends React.ComponentType<infer Props> ? Props : never;
-declare const Markdown: (props: MarkdownProps) => React.JSX.Element;
+/**
+ * markdown-to-jsx is a fork of
+ * [simple-markdown v0.2.2](https://github.com/Khan/simple-markdown)
+ * from Khan Academy. Thank you Khan devs for making such an awesome
+ * and extensible parsing infra... without it, half of the
+ * optimizations here wouldn't be feasible. 🙏🏼
+ */
 
+/**
+ * Analogous to `node.type`. Please note that the values here may change at any time,
+ * so do not hard code against the value directly.
+ */
+declare const enum RuleType {
+    blockQuote = "0",
+    breakLine = "1",
+    breakThematic = "2",
+    codeBlock = "3",
+    codeFenced = "4",
+    codeInline = "5",
+    footnote = "6",
+    footnoteReference = "7",
+    gfmTask = "8",
+    heading = "9",
+    headingSetext = "10",
+    /** only available if not `disableHTMLParsing` */
+    htmlBlock = "11",
+    htmlComment = "12",
+    /** only available if not `disableHTMLParsing` */
+    htmlSelfClosing = "13",
+    image = "14",
+    link = "15",
+    /** emits a `link` 'node', does not render directly */
+    linkAngleBraceStyleDetector = "16",
+    /** emits a `link` 'node', does not render directly */
+    linkBareUrlDetector = "17",
+    /** emits a `link` 'node', does not render directly */
+    linkMailtoDetector = "18",
+    newlineCoalescer = "19",
+    orderedList = "20",
+    paragraph = "21",
+    ref = "22",
+    refImage = "23",
+    refLink = "24",
+    table = "25",
+    tableSeparator = "26",
+    text = "27",
+    textBolded = "28",
+    textEmphasized = "29",
+    textEscaped = "30",
+    textMarked = "31",
+    textStrikethroughed = "32",
+    unorderedList = "33"
+}
+declare const enum Priority {
+    /**
+     * anything that must scan the tree before everything else
+     */
+    MAX = 0,
+    /**
+     * scans for block-level constructs
+     */
+    HIGH = 1,
+    /**
+     * inline w/ more priority than other inline
+     */
+    MED = 2,
+    /**
+     * inline elements
+     */
+    LOW = 3,
+    /**
+     * bare text and stuff that is considered leftovers
+     */
+    MIN = 4
+}
+/**
+ * A simple HOC for easy React use. Feed the markdown content as a direct child
+ * and the rest is taken care of automatically.
+ */
+declare const Markdown$1: React.FC<{
+    [key: string]: any;
+    children: string;
+    options?: MarkdownToJSX.Options;
+}>;
+declare namespace MarkdownToJSX {
+    /**
+     * RequireAtLeastOne<{ ... }> <- only requires at least one key
+     */
+    type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> & {
+        [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;
+    }[Keys];
+    export type CreateElement = typeof React.createElement;
+    export type HTMLTags = keyof JSX.IntrinsicElements;
+    export type State = {
+        /** true if the current content is inside anchor link grammar */
+        inAnchor?: boolean;
+        /** true if parsing in an inline context (subset of rules around formatting and links) */
+        inline?: boolean;
+        /** true if in a table */
+        inTable?: boolean;
+        /** use this for the `key` prop */
+        key?: React.Key;
+        /** true if in a list */
+        list?: boolean;
+        /** true if parsing in inline context w/o links */
+        simple?: boolean;
+    };
+    export interface BlockQuoteNode {
+        children: MarkdownToJSX.ParserResult[];
+        type: RuleType.blockQuote;
+    }
+    export interface BreakLineNode {
+        type: RuleType.breakLine;
+    }
+    export interface BreakThematicNode {
+        type: RuleType.breakThematic;
+    }
+    export interface CodeBlockNode {
+        type: RuleType.codeBlock;
+        attrs?: JSX.IntrinsicAttributes;
+        lang?: string;
+        text: string;
+    }
+    export interface CodeFencedNode {
+        type: RuleType.codeFenced;
+    }
+    export interface CodeInlineNode {
+        type: RuleType.codeInline;
+        text: string;
+    }
+    export interface FootnoteNode {
+        type: RuleType.footnote;
+    }
+    export interface FootnoteReferenceNode {
+        type: RuleType.footnoteReference;
+        target: string;
+        text: string;
+    }
+    export interface GFMTaskNode {
+        type: RuleType.gfmTask;
+        completed: boolean;
+    }
+    export interface HeadingNode {
+        type: RuleType.heading;
+        children: MarkdownToJSX.ParserResult[];
+        id: string;
+        level: 1 | 2 | 3 | 4 | 5 | 6;
+    }
+    export interface HeadingSetextNode {
+        type: RuleType.headingSetext;
+    }
+    export interface HTMLCommentNode {
+        type: RuleType.htmlComment;
+    }
+    export interface ImageNode {
+        type: RuleType.image;
+        alt?: string;
+        target: string;
+        title?: string;
+    }
+    export interface LinkNode {
+        type: RuleType.link;
+        children: MarkdownToJSX.ParserResult[];
+        target: string;
+        title?: string;
+    }
+    export interface LinkAngleBraceNode {
+        type: RuleType.linkAngleBraceStyleDetector;
+    }
+    export interface LinkBareURLNode {
+        type: RuleType.linkBareUrlDetector;
+    }
+    export interface LinkMailtoNode {
+        type: RuleType.linkMailtoDetector;
+    }
+    export interface OrderedListNode {
+        type: RuleType.orderedList;
+        items: MarkdownToJSX.ParserResult[][];
+        ordered: true;
+        start?: number;
+    }
+    export interface UnorderedListNode {
+        type: RuleType.unorderedList;
+        items: MarkdownToJSX.ParserResult[][];
+        ordered: false;
+    }
+    export interface NewlineNode {
+        type: RuleType.newlineCoalescer;
+    }
+    export interface ParagraphNode {
+        type: RuleType.paragraph;
+        children: MarkdownToJSX.ParserResult[];
+    }
+    export interface ReferenceNode {
+        type: RuleType.ref;
+    }
+    export interface ReferenceImageNode {
+        type: RuleType.refImage;
+        alt?: string;
+        ref: string;
+    }
+    export interface ReferenceLinkNode {
+        type: RuleType.refLink;
+        children: MarkdownToJSX.ParserResult[];
+        fallbackChildren: MarkdownToJSX.ParserResult[];
+        ref: string;
+    }
+    export interface TableNode {
+        type: RuleType.table;
+        /**
+         * alignment for each table column
+         */
+        align: ('left' | 'right' | 'center')[];
+        cells: MarkdownToJSX.ParserResult[][][];
+        header: MarkdownToJSX.ParserResult[][];
+    }
+    export interface TableSeparatorNode {
+        type: RuleType.tableSeparator;
+    }
+    export interface TextNode {
+        type: RuleType.text;
+        text: string;
+    }
+    export interface BoldTextNode {
+        type: RuleType.textBolded;
+        children: MarkdownToJSX.ParserResult[];
+    }
+    export interface ItalicTextNode {
+        type: RuleType.textEmphasized;
+        children: MarkdownToJSX.ParserResult[];
+    }
+    export interface EscapedTextNode {
+        type: RuleType.textEscaped;
+    }
+    export interface MarkedTextNode {
+        type: RuleType.textMarked;
+        children: MarkdownToJSX.ParserResult[];
+    }
+    export interface StrikethroughTextNode {
+        type: RuleType.textStrikethroughed;
+        children: MarkdownToJSX.ParserResult[];
+    }
+    export interface HTMLNode {
+        type: RuleType.htmlBlock;
+        attrs: JSX.IntrinsicAttributes;
+        children?: ReturnType<MarkdownToJSX.NestedParser> | undefined;
+        noInnerParse: Boolean;
+        tag: MarkdownToJSX.HTMLTags;
+        text?: string | undefined;
+    }
+    export interface HTMLSelfClosingNode {
+        type: RuleType.htmlSelfClosing;
+        attrs: JSX.IntrinsicAttributes;
+        tag: string;
+    }
+    export type ParserResult = BlockQuoteNode | BreakLineNode | BreakThematicNode | CodeBlockNode | CodeFencedNode | CodeInlineNode | FootnoteNode | FootnoteReferenceNode | GFMTaskNode | HeadingNode | HeadingSetextNode | HTMLCommentNode | ImageNode | LinkNode | LinkAngleBraceNode | LinkBareURLNode | LinkMailtoNode | OrderedListNode | UnorderedListNode | NewlineNode | ParagraphNode | ReferenceNode | ReferenceImageNode | ReferenceLinkNode | TableNode | TableSeparatorNode | TextNode | BoldTextNode | ItalicTextNode | EscapedTextNode | MarkedTextNode | StrikethroughTextNode | HTMLNode | HTMLSelfClosingNode;
+    export type NestedParser = (input: string, state?: MarkdownToJSX.State) => MarkdownToJSX.ParserResult[];
+    export type Parser<ParserOutput> = (capture: RegExpMatchArray, nestedParse: NestedParser, state?: MarkdownToJSX.State) => ParserOutput;
+    export type RuleOutput = (ast: MarkdownToJSX.ParserResult | MarkdownToJSX.ParserResult[], state: MarkdownToJSX.State) => JSX.Element;
+    export type Rule<ParserOutput = MarkdownToJSX.ParserResult> = {
+        match: (source: string, state: MarkdownToJSX.State, prevCapturedString?: string) => RegExpMatchArray;
+        order: Priority;
+        parse: MarkdownToJSX.Parser<Omit<ParserOutput, 'type'>>;
+        render?: (node: ParserOutput, 
+        /**
+         * Continue rendering AST nodes if applicable.
+         */
+        render: RuleOutput, state?: MarkdownToJSX.State) => React.ReactChild;
+    };
+    export type Rules = {
+        [K in ParserResult['type']]: Rule<Extract<ParserResult, {
+            type: K;
+        }>>;
+    };
+    export type Override = RequireAtLeastOne<{
+        component: React.ElementType;
+        props: Object;
+    }> | React.ElementType;
+    export type Overrides = {
+        [tag in HTMLTags]?: Override;
+    } & {
+        [customComponent: string]: Override;
+    };
+    export type Options = Partial<{
+        /**
+         * Ultimate control over the output of all rendered JSX.
+         */
+        createElement: (tag: Parameters<CreateElement>[0], props: JSX.IntrinsicAttributes, ...children: React.ReactChild[]) => React.ReactChild;
+        /**
+         * Disable the compiler's best-effort transcription of provided raw HTML
+         * into JSX-equivalent. This is the functionality that prevents the need to
+         * use `dangerouslySetInnerHTML` in React.
+         */
+        disableParsingRawHTML: boolean;
+        /**
+         * Forces the compiler to have space between hash sign and the header text which
+         * is explicitly stated in the most of the markdown specs.
+         * https://github.github.com/gfm/#atx-heading
+         * `The opening sequence of # characters must be followed by a space or by the end of line.`
+         */
+        enforceAtxHeadings: boolean;
+        /**
+         * Forces the compiler to always output content with a block-level wrapper
+         * (`<p>` or any block-level syntax your markdown already contains.)
+         */
+        forceBlock: boolean;
+        /**
+         * Forces the compiler to always output content with an inline wrapper (`<span>`)
+         */
+        forceInline: boolean;
+        /**
+         * Forces the compiler to wrap results, even if there is only a single
+         * child or no children.
+         */
+        forceWrapper: boolean;
+        /**
+         * Supply additional HTML entity: unicode replacement mappings.
+         *
+         * Pass only the inner part of the entity as the key,
+         * e.g. `&le;` -> `{ "le": "\u2264" }`
+         *
+         * By default
+         * the following entities are replaced with their unicode equivalents:
+         *
+         * ```
+         * &amp;
+         * &apos;
+         * &gt;
+         * &lt;
+         * &nbsp;
+         * &quot;
+         * ```
+         */
+        namedCodesToUnicode: {
+            [key: string]: string;
+        };
+        /**
+         * Selectively control the output of particular HTML tags as they would be
+         * emitted by the compiler.
+         */
+        overrides: Overrides;
+        /**
+         * Allows for full control over rendering of particular rules.
+         * For example, to implement a LaTeX renderer such as `react-katex`:
+         *
+         * ```
+         * renderRule(next, node, renderChildren, state) {
+         *   if (node.type === RuleType.codeBlock && node.lang === 'latex') {
+         *     return (
+         *       <TeX as="div" key={state.key}>
+         *         {String.raw`${node.text}`}
+         *       </TeX>
+         *     )
+         *   }
+         *
+         *   return next();
+         * }
+         * ```
+         *
+         * Thar be dragons obviously, but you can do a lot with this
+         * (have fun!) To see how things work internally, check the `render`
+         * method in source for a particular rule.
+         */
+        renderRule: (
+        /** Resume normal processing, call this function as a fallback if you are not returning custom JSX. */
+        next: () => React.ReactChild, 
+        /** the current AST node, use `RuleType` against `node.type` for identification */
+        node: ParserResult, 
+        /** use as `renderChildren(node.children)` for block nodes */
+        renderChildren: RuleOutput, 
+        /** contains `key` which should be supplied to the topmost JSX element */
+        state: State) => React.ReactChild;
+        /**
+         * Override normalization of non-URI-safe characters for use in generating
+         * HTML IDs for anchor linking purposes.
+         */
+        slugify: (source: string) => string;
+        /**
+         * Declare the type of the wrapper to be used when there are multiple
+         * children to render. Set to `null` to get an array of children back
+         * without any wrapper, or use `React.Fragment` to get a React element
+         * that won't show up in the DOM.
+         */
+        wrapper: React.ElementType | null;
+    }>;
+    export {};
+}
+
+type MarkdownProps = typeof Markdown$1 extends React__default.ComponentType<infer Props> ? Props : never;
+declare const Markdown: (props: MarkdownProps) => React__default.JSX.Element;
+
 type MetaProps = BaseAnnotations & {
@@ -463,5 +851,5 @@ of?: ModuleExports;
 
-declare const Unstyled: React.FC<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+declare const Unstyled: React__default.FC<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 
-declare const Wrapper: FC<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+declare const Wrapper: FC<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 
@@ -606,5 +994,5 @@ declare const assertIsFn: (val: any) => any;
 type ColorProps = ColorControlProps;
-declare const LazyColorControl: React.LazyExoticComponent<React.FC<ColorControlProps>>;
-declare const ColorControl: (props: ComponentProps<typeof LazyColorControl>) => React.JSX.Element;
+declare const LazyColorControl: React__default.LazyExoticComponent<React__default.FC<ColorControlProps>>;
+declare const ColorControl: (props: ComponentProps<typeof LazyColorControl>) => React__default.JSX.Element;
 
 export { AddContext, Anchor, AnchorMdx, AnchorProps, ArgTypes, BooleanConfig, BooleanControl, BooleanProps, BooleanValue, Canvas, CodeOrSourceMdx, ColorConfig, ColorControl, ColorItem, ColorPalette, ColorProps, ColorValue, Component, Control, ControlProps, ControlType, Controls, DateConfig, DateControl, DateProps, DateValue, DescriptionContainer as Description, DescriptionType, Docs, DocsContainer, DocsContainerProps, DocsContext, DocsPage, DocsProps, DocsStory, DocsStoryProps, ExternalDocs, ExternalDocsContainer, ExternalDocsProps, FilesControl, FilesControlProps, HeaderMdx, HeadersMdx, Heading, HeadingProps, IconGallery, IconItem, Markdown, Meta, NormalizedOptionsConfig, NumberConfig, NumberControl, NumberValue, ObjectConfig, ObjectControl, ObjectProps, ObjectValue, Of, Options, OptionsArray, OptionsConfig, OptionsControl, OptionsControlType, OptionsMultiSelection, OptionsObject, OptionsProps, OptionsSelection, OptionsSingleSelection, PRIMARY_STORY, PresetColor, Primary, ArgsTable as PureArgsTable, RangeConfig, RangeControl, SortType, Source, SourceContainer, SourceContext, SourceContextProps, SourceItem, SourceProps, Stories, Story, StoryProps, StorySources, Subheading, Subtitle, TextConfig, TextControl, TextProps, TextValue, Title, Typeset, UNKNOWN_ARGS_HASH, Unstyled, Wrapper, anchorBlockIdFromId, argsHash, assertIsFn, extractTitle, format, formatDate, formatTime, getStoryId, getStoryProps, parse, parseDate, parseTime, useOf, useSourceProps };

package.json

 {
   "name": "@storybook/blocks",
-  "version": "8.4.0-alpha.5",
+  "version": "8.4.0-alpha.6",
   "description": "Storybook Doc Blocks",
@@ -47,6 +47,12 @@ "keywords": [
     "@storybook/csf": "^0.1.11",
-    "@storybook/global": "^5.0.0",
     "@storybook/icons": "^1.2.10",
+    "ts-dedent": "^2.0.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "8.4.0-alpha.6",
+    "@storybook/react": "8.4.0-alpha.6",
+    "@storybook/test": "8.4.0-alpha.6",
+    "@types/color-convert": "^2.0.0",
     "color-convert": "^2.0.1",
-    "dequal": "^2.0.2",
+    "es-toolkit": "^1.21.0",
     "markdown-to-jsx": "^7.4.5",
@@ -57,11 +63,2 @@ "memoizerific": "^1.11.3",
     "telejson": "^7.2.0",
-    "ts-dedent": "^2.0.0",
-    "util-deprecate": "^1.0.2"
-  },
-  "devDependencies": {
-    "@storybook/addon-actions": "8.4.0-alpha.5",
-    "@storybook/react": "8.4.0-alpha.5",
-    "@storybook/test": "8.4.0-alpha.5",
-    "@types/color-convert": "^2.0.0",
-    "es-toolkit": "^1.21.0",
     "tocbot": "^4.20.1"
@@ -72,3 +69,3 @@ },
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-    "storybook": "^8.4.0-alpha.5"
+    "storybook": "^8.4.0-alpha.6"
   },
@@ -75,0 +72,0 @@ "peerDependenciesMeta": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

603543

increased by63.04%

Dependency count

6

decreased by-60%

Lines of code

3304

increased by68.23%

Worsened metrics

Dev dependency count

12

increased by100%

Number of low supply chain risk alerts

6

increased byInfinity%

Number of medium supply chain risk alerts

11

increased by450%

Dependency changes

• - Removed@storybook/global@^5.0.0

• - Removedcolor-convert@^2.0.1

• - Removeddequal@^2.0.2

• - Removedmarkdown-to-jsx@^7.4.5

• - Removedmemoizerific@^1.11.3

• - Removedpolished@^4.2.2

• - Removedreact-colorful@^5.1.2

• - Removedtelejson@^7.2.0

• - Removedutil-deprecate@^1.0.2

• - Removed@babel/runtime@7.25.7(transitive)

• - Removed@storybook/global@5.0.0(transitive)

• - Removedcolor-convert@2.0.1(transitive)

• - Removedcolor-name@1.1.4(transitive)

• - Removeddequal@2.0.3(transitive)

• - Removedmap-or-similar@1.5.0(transitive)

• - Removedmarkdown-to-jsx@7.5.0(transitive)

• - Removedmemoizerific@1.11.3(transitive)

• - Removedpolished@4.3.1(transitive)

• - Removedreact-colorful@5.6.1(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• - Removedtelejson@7.2.0(transitive)

• - Removedutil-deprecate@1.0.2(transitive)