@storybook/csf - npm Package Compare versions

Comparing version 0.0.2--canary.29b0df7.0 to 0.0.2--canary.3094f05.0

dist/index.d.ts

@@ -1,18 +0,355 @@
-export declare const sanitize: (string: string) => string;
-export declare const toId: (kind: string, name: string) => string;
-export declare const storyNameFromExport: (key: string) => string;
+import { Simplify, UnionToIntersection } from 'type-fest';
+
+interface SBBaseType {
+    required?: boolean;
+    raw?: string;
+}
+declare type SBScalarType = SBBaseType & {
+    name: 'boolean' | 'string' | 'number' | 'function' | 'symbol';
+};
+declare type SBArrayType = SBBaseType & {
+    name: 'array';
+    value: SBType;
+};
+declare type SBObjectType = SBBaseType & {
+    name: 'object';
+    value: Record<string, SBType>;
+};
+declare type SBEnumType = SBBaseType & {
+    name: 'enum';
+    value: (string | number)[];
+};
+declare type SBIntersectionType = SBBaseType & {
+    name: 'intersection';
+    value: SBType[];
+};
+declare type SBUnionType = SBBaseType & {
+    name: 'union';
+    value: SBType[];
+};
+declare type SBOtherType = SBBaseType & {
+    name: 'other';
+    value: string;
+};
+declare type SBType = SBScalarType | SBEnumType | SBArrayType | SBObjectType | SBIntersectionType | SBUnionType | SBOtherType;
+
+declare type StoryId = string;
+declare type ComponentId = string;
+declare type ComponentTitle = string;
+declare type StoryName = string;
+/** @deprecated */
+declare type StoryKind = ComponentTitle;
+declare type Tag = string;
+interface StoryIdentifier {
+    componentId: ComponentId;
+    title: ComponentTitle;
+    /** @deprecated */
+    kind: ComponentTitle;
+    id: StoryId;
+    name: StoryName;
+    /** @deprecated */
+    story: StoryName;
+    tags: Tag[];
+}
+interface Parameters {
+    [name: string]: unknown;
+}
+declare type ConditionalTest = {
+    truthy?: boolean;
+} | {
+    exists: boolean;
+} | {
+    eq: any;
+} | {
+    neq: any;
+};
+declare type ConditionalValue = {
+    arg: string;
+} | {
+    global: string;
+};
+declare type Conditional = ConditionalValue & ConditionalTest;
+interface InputType {
+    name?: string;
+    description?: string;
+    defaultValue?: any;
+    type?: SBType | SBScalarType['name'];
+    if?: Conditional;
+    [key: string]: any;
+}
+interface StrictInputType extends InputType {
+    name: string;
+    type?: SBType;
+}
+declare type Args = {
+    [name: string]: any;
+};
+declare type ArgTypes<TArgs = Args> = {
+    [name in keyof TArgs]: InputType;
+};
+declare type StrictArgTypes<TArgs = Args> = {
+    [name in keyof TArgs]: StrictInputType;
+};
+declare type Globals = {
+    [name: string]: any;
+};
+declare type GlobalTypes = {
+    [name: string]: InputType;
+};
+declare type StrictGlobalTypes = {
+    [name: string]: StrictInputType;
+};
+declare type Renderer = {
+    /** What is the type of the `component` annotation in this renderer? */
+    component: unknown;
+    /** What does the story function return in this renderer? */
+    storyResult: unknown;
+    /** What type of element does this renderer render to? */
+    canvasElement: unknown;
+    T?: unknown;
+};
+/** @deprecated - use `Renderer` */
+declare type AnyFramework = Renderer;
+declare type StoryContextForEnhancers<TRenderer extends Renderer = Renderer, TArgs = Args> = StoryIdentifier & {
+    component?: (TRenderer & {
+        T: any;
+    })['component'];
+    subcomponents?: Record<string, (TRenderer & {
+        T: any;
+    })['component']>;
+    parameters: Parameters;
+    initialArgs: TArgs;
+    argTypes: StrictArgTypes<TArgs>;
+};
+declare type ArgsEnhancer<TRenderer extends Renderer = Renderer, TArgs = Args> = (context: StoryContextForEnhancers<TRenderer, TArgs>) => TArgs;
+declare type ArgTypesEnhancer<TRenderer extends Renderer = Renderer, TArgs = Args> = ((context: StoryContextForEnhancers<TRenderer, TArgs>) => StrictArgTypes<TArgs>) & {
+    secondPass?: boolean;
+};
+declare type StoryContextUpdate<TArgs = Args> = {
+    args?: TArgs;
+    globals?: Globals;
+    [key: string]: any;
+};
+declare type ViewMode = 'story' | 'docs';
+declare type StoryContextForLoaders<TRenderer extends Renderer = Renderer, TArgs = Args> = StoryContextForEnhancers<TRenderer, TArgs> & Required<StoryContextUpdate<TArgs>> & {
+    hooks: unknown;
+    viewMode: ViewMode;
+    originalStoryFn: StoryFn<TRenderer>;
+};
+declare type LoaderFunction<TRenderer extends Renderer = Renderer, TArgs = Args> = (context: StoryContextForLoaders<TRenderer, TArgs>) => Promise<Record<string, any>>;
+declare type StoryContext<TRenderer extends Renderer = Renderer, TArgs = Args> = StoryContextForLoaders<TRenderer, TArgs> & {
+    loaded: Record<string, any>;
+    abortSignal: AbortSignal;
+    canvasElement: TRenderer['canvasElement'];
+};
+declare type StepLabel = string;
+declare type StepFunction<TRenderer extends Renderer = Renderer, TArgs = Args> = (label: StepLabel, play: PlayFunction<TRenderer, TArgs>) => Promise<void> | void;
+declare type PlayFunctionContext<TRenderer extends Renderer = Renderer, TArgs = Args> = StoryContext<TRenderer, TArgs> & {
+    step: StepFunction<TRenderer, TArgs>;
+};
+declare type PlayFunction<TRenderer extends Renderer = Renderer, TArgs = Args> = (context: PlayFunctionContext<TRenderer, TArgs>) => Promise<void> | void;
+declare type PartialStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (update?: StoryContextUpdate<Partial<TArgs>>) => TRenderer['storyResult'];
+declare type LegacyStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (context: StoryContext<TRenderer, TArgs>) => TRenderer['storyResult'];
+declare type ArgsStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (args: TArgs, context: StoryContext<TRenderer, TArgs>) => (TRenderer & {
+    T: TArgs;
+})['storyResult'];
+declare type StoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = LegacyStoryFn<TRenderer, TArgs> | ArgsStoryFn<TRenderer, TArgs>;
+declare type DecoratorFunction<TRenderer extends Renderer = Renderer, TArgs = Args> = (fn: PartialStoryFn<TRenderer, TArgs>, c: StoryContext<TRenderer, TArgs>) => TRenderer['storyResult'];
+declare type DecoratorApplicator<TRenderer extends Renderer = Renderer, TArgs = Args> = (storyFn: LegacyStoryFn<TRenderer, TArgs>, decorators: DecoratorFunction<TRenderer, TArgs>[]) => LegacyStoryFn<TRenderer, TArgs>;
+declare type StepRunner<TRenderer extends Renderer = Renderer, TArgs = Args> = (label: StepLabel, play: PlayFunction<TRenderer, TArgs>, context: PlayFunctionContext<TRenderer, TArgs>) => Promise<void>;
+declare type BaseAnnotations<TRenderer extends Renderer = Renderer, TArgs = Args> = {
+    /**
+     * Wrapper components or Storybook decorators that wrap a story.
+     *
+     * Decorators defined in Meta will be applied to every story variation.
+     * @see [Decorators](https://storybook.js.org/docs/addons/introduction/#1-decorators)
+     */
+    decorators?: DecoratorFunction<TRenderer, TArgs>[];
+    /**
+     * Custom metadata for a story.
+     * @see [Parameters](https://storybook.js.org/docs/basics/writing-stories/#parameters)
+     */
+    parameters?: Parameters;
+    /**
+     * Dynamic data that are provided (and possibly updated by) Storybook and its addons.
+     * @see [Arg story inputs](https://storybook.js.org/docs/react/api/csf#args-story-inputs)
+     */
+    args?: Partial<TArgs>;
+    /**
+     * ArgTypes encode basic metadata for args, such as `name`, `description`, `defaultValue` for an arg. These get automatically filled in by Storybook Docs.
+     * @see [Control annotations](https://github.com/storybookjs/storybook/blob/91e9dee33faa8eff0b342a366845de7100415367/addons/controls/README.md#control-annotations)
+     */
+    argTypes?: Partial<ArgTypes<TArgs>>;
+    /**
+     * Asynchronous functions which provide data for a story.
+     * @see [Loaders](https://storybook.js.org/docs/react/writing-stories/loaders)
+     */
+    loaders?: LoaderFunction<TRenderer, TArgs>[];
+    /**
+     * Define a custom render function for the story(ies). If not passed, a default render function by the renderer will be used.
+     */
+    render?: ArgsStoryFn<TRenderer, TArgs>;
+};
+declare type ProjectAnnotations<TRenderer extends Renderer = Renderer, TArgs = Args> = BaseAnnotations<TRenderer, TArgs> & {
+    argsEnhancers?: ArgsEnhancer<TRenderer, Args>[];
+    argTypesEnhancers?: ArgTypesEnhancer<TRenderer, Args>[];
+    globals?: Globals;
+    globalTypes?: GlobalTypes;
+    applyDecorators?: DecoratorApplicator<TRenderer, Args>;
+    runStep?: StepRunner<TRenderer, TArgs>;
+};
+declare type StoryDescriptor$1 = string[] | RegExp;
+interface ComponentAnnotations<TRenderer extends Renderer = Renderer, TArgs = Args> extends BaseAnnotations<TRenderer, TArgs> {
+    /**
+     * Title of the component which will be presented in the navigation. **Should be unique.**
+     *
+     * Components can be organized in a nested structure using "/" as a separator.
+     *
+     * Since CSF 3.0 this property is optional -- it can be inferred from the filesystem path
+     *
+     * @example
+     * export default {
+     *   ...
+     *   title: 'Design System/Atoms/Button'
+     * }
+     *
+     * @see [Story Hierarchy](https://storybook.js.org/docs/basics/writing-stories/#story-hierarchy)
+     */
+    title?: ComponentTitle;
+    /**
+     * Id of the component (prefix of the story id) which is used for URLs.
+     *
+     * By default is inferred from sanitizing the title
+     *
+     * @see [Story Hierarchy](https://storybook.js.org/docs/basics/writing-stories/#story-hierarchy)
+     */
+    id?: ComponentId;
+    /**
+     * Used to only include certain named exports as stories. Useful when you want to have non-story exports such as mock data or ignore a few stories.
+     * @example
+     * includeStories: ['SimpleStory', 'ComplexStory']
+     * includeStories: /.*Story$/
+     *
+     * @see [Non-story exports](https://storybook.js.org/docs/formats/component-story-format/#non-story-exports)
+     */
+    includeStories?: StoryDescriptor$1;
+    /**
+     * Used to exclude certain named exports. Useful when you want to have non-story exports such as mock data or ignore a few stories.
+     * @example
+     * excludeStories: ['simpleData', 'complexData']
+     * excludeStories: /.*Data$/
+     *
+     * @see [Non-story exports](https://storybook.js.org/docs/formats/component-story-format/#non-story-exports)
+     */
+    excludeStories?: StoryDescriptor$1;
+    /**
+     * The primary component for your story.
+     *
+     * Used by addons for automatic prop table generation and display of other component metadata.
+     */
+    component?: (TRenderer & {
+        T: Args extends TArgs ? any : TArgs;
+    })['component'];
+    /**
+     * Auxiliary subcomponents that are part of the stories.
+     *
+     * Used by addons for automatic prop table generation and display of other component metadata.
+     *
+     * @example
+     * import { Button, ButtonGroup } from './components';
+     *
+     * export default {
+     *   ...
+     *   subcomponents: { Button, ButtonGroup }
+     * }
+     *
+     * By defining them each component will have its tab in the args table.
+     */
+    subcomponents?: Record<string, TRenderer['component']>;
+    /**
+     * Function that is executed after the story is rendered.
+     */
+    play?: PlayFunction<TRenderer, TArgs>;
+    /**
+     * Named tags for a story, used to filter stories in different contexts.
+     */
+    tags?: Tag[];
+}
+declare type StoryAnnotations<TRenderer extends Renderer = Renderer, TArgs = Args, TRequiredArgs = Partial<TArgs>> = BaseAnnotations<TRenderer, TArgs> & {
+    /**
+     * Override the display name in the UI (CSF v3)
+     */
+    name?: StoryName;
+    /**
+     * Override the display name in the UI (CSF v2)
+     */
+    storyName?: StoryName;
+    /**
+     * Function that is executed after the story is rendered.
+     */
+    play?: PlayFunction<TRenderer, TArgs>;
+    /**
+     * Named tags for a story, used to filter stories in different contexts.
+     */
+    tags?: Tag[];
+    /** @deprecated */
+    story?: Omit<StoryAnnotations<TRenderer, TArgs>, 'story'>;
+} & ({} extends TRequiredArgs ? {
+    args?: TRequiredArgs;
+} : {
+    args: TRequiredArgs;
+});
+declare type LegacyAnnotatedStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = StoryFn<TRenderer, TArgs> & StoryAnnotations<TRenderer, TArgs>;
+declare type LegacyStoryAnnotationsOrFn<TRenderer extends Renderer = Renderer, TArgs = Args> = LegacyAnnotatedStoryFn<TRenderer, TArgs> | StoryAnnotations<TRenderer, TArgs>;
+declare type AnnotatedStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = ArgsStoryFn<TRenderer, TArgs> & StoryAnnotations<TRenderer, TArgs>;
+declare type StoryAnnotationsOrFn<TRenderer extends Renderer = Renderer, TArgs = Args> = AnnotatedStoryFn<TRenderer, TArgs> | StoryAnnotations<TRenderer, TArgs>;
+declare type ArgsFromMeta<TRenderer extends Renderer, Meta> = Meta extends {
+    render?: ArgsStoryFn<TRenderer, infer RArgs>;
+    loaders?: (infer Loaders)[];
+    decorators?: (infer Decorators)[];
+} ? Simplify<RArgs & DecoratorsArgs<TRenderer, Decorators> & LoaderArgs<TRenderer, Loaders>> : unknown;
+declare type DecoratorsArgs<TRenderer extends Renderer, Decorators> = UnionToIntersection<Decorators extends DecoratorFunction<TRenderer, infer TArgs> ? TArgs : unknown>;
+declare type LoaderArgs<TRenderer extends Renderer, Loaders> = UnionToIntersection<Loaders extends LoaderFunction<TRenderer, infer TArgs> ? TArgs : unknown>;
+
+/**
+ * Helper function to include/exclude an arg based on the value of other other args
+ * aka "conditional args"
+ */
+declare const includeConditionalArg: (argType: InputType, args: Args, globals: Globals) => boolean;
+
+/**
+ * Remove punctuation and illegal characters from a story ID.
+ *
+ * See https://gist.github.com/davidjrice/9d2af51100e41c6c4b4a
+ */
+declare const sanitize: (string: string) => string;
+/**
+ * Generate a storybook ID from a component/kind and story name.
+ */
+declare const toId: (kind: string, name?: string) => string;
+/**
+ * Transform a CSF named export into a readable story name
+ */
+declare const storyNameFromExport: (key: string) => string;
 declare type StoryDescriptor = string[] | RegExp;
-export interface IncludeExcludeOptions {
+interface IncludeExcludeOptions {
     includeStories?: StoryDescriptor;
     excludeStories?: StoryDescriptor;
 }
-export declare function isExportStory(key: string, { includeStories, excludeStories }: IncludeExcludeOptions): boolean | null;
-export interface SeparatorOptions {
+/**
+ * Does a named export match CSF inclusion/exclusion options?
+ */
+declare function isExportStory(key: string, { includeStories, excludeStories }: IncludeExcludeOptions): boolean | null;
+interface SeparatorOptions {
     rootSeparator: string | RegExp;
     groupSeparator: string | RegExp;
 }
-export declare const parseKind: (kind: string, { rootSeparator, groupSeparator }: SeparatorOptions) => {
+/**
+ * Parse out the component/kind name from a path, using the given separator config.
+ */
+declare const parseKind: (kind: string, { rootSeparator, groupSeparator }: SeparatorOptions) => {
     root: string | null;
     groups: string[];
 };
-export * from './story';
+
+export { AnnotatedStoryFn, AnyFramework, ArgTypes, ArgTypesEnhancer, Args, ArgsEnhancer, ArgsFromMeta, ArgsStoryFn, BaseAnnotations, ComponentAnnotations, ComponentId, ComponentTitle, Conditional, DecoratorApplicator, DecoratorFunction, GlobalTypes, Globals, IncludeExcludeOptions, InputType, LegacyAnnotatedStoryFn, LegacyStoryAnnotationsOrFn, LegacyStoryFn, LoaderFunction, Parameters, PartialStoryFn, PlayFunction, PlayFunctionContext, ProjectAnnotations, Renderer, SBArrayType, SBEnumType, SBIntersectionType, SBObjectType, SBOtherType, SBScalarType, SBType, SBUnionType, SeparatorOptions, StepFunction, StepLabel, StepRunner, StoryAnnotations, StoryAnnotationsOrFn, StoryContext, StoryContextForEnhancers, StoryContextForLoaders, StoryContextUpdate, StoryFn, StoryId, StoryIdentifier, StoryKind, StoryName, StrictArgTypes, StrictGlobalTypes, StrictInputType, Tag, ViewMode, includeConditionalArg, isExportStory, parseKind, sanitize, storyNameFromExport, toId };

dist/index.js

 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {
-  sanitize: true,
-  toId: true,
-  storyNameFromExport: true,
-  isExportStory: true,
-  parseKind: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
 };
-exports.isExportStory = isExportStory;
-exports.parseKind = exports.storyNameFromExport = exports.toId = exports.sanitize = void 0;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-var _startCase = _interopRequireDefault(require("lodash/startCase"));
-
-var _story = require("./story");
-
-Object.keys(_story).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _story[key];
-    }
-  });
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  includeConditionalArg: () => includeConditionalArg,
+  isExportStory: () => isExportStory,
+  parseKind: () => parseKind,
+  sanitize: () => sanitize,
+  storyNameFromExport: () => storyNameFromExport,
+  toId: () => toId
 });
+module.exports = __toCommonJS(src_exports);
+var import_startCase = __toESM(require("lodash/startCase"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-/**
- * Remove punctuation and illegal characters from a story ID.
- *
- * See https://gist.github.com/davidjrice/9d2af51100e41c6c4b4a
- */
-var sanitize = function sanitize(string) {
-  return string.toLowerCase() // eslint-disable-next-line no-useless-escape
-  .replace(/[ ’–—―′¿'`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, '-').replace(/-+/g, '-').replace(/^-+/, '').replace(/-+$/, '');
+// src/includeConditionalArg.ts
+var import_isEqual = __toESM(require("lodash/isEqual"));
+var count = (vals) => vals.map((v) => typeof v !== "undefined").filter(Boolean).length;
+var testValue = (cond, value) => {
+  const { exists, eq, neq, truthy } = cond;
+  if (count([exists, eq, neq, truthy]) > 1) {
+    throw new Error(`Invalid conditional test ${JSON.stringify({ exists, eq, neq })}`);
+  }
+  if (typeof eq !== "undefined") {
+    return (0, import_isEqual.default)(value, eq);
+  }
+  if (typeof neq !== "undefined") {
+    return !(0, import_isEqual.default)(value, neq);
+  }
+  if (typeof exists !== "undefined") {
+    const valueExists = typeof value !== "undefined";
+    return exists ? valueExists : !valueExists;
+  }
+  const shouldBeTruthy = typeof truthy === "undefined" ? true : truthy;
+  return shouldBeTruthy ? !!value : !value;
 };
-
-exports.sanitize = sanitize;
-
-var sanitizeSafe = function sanitizeSafe(string, part) {
-  var sanitized = sanitize(string);
-
-  if (sanitized === '') {
-    throw new Error("Invalid ".concat(part, " '").concat(string, "', must include alphanumeric characters"));
+var includeConditionalArg = (argType, args, globals) => {
+  if (!argType.if)
+    return true;
+  const { arg, global } = argType.if;
+  if (count([arg, global]) !== 1) {
+    throw new Error(`Invalid conditional value ${JSON.stringify({ arg, global })}`);
   }
-
-  return sanitized;
+  const value = arg ? args[arg] : globals[global];
+  return testValue(argType.if, value);
 };
-/**
- * Generate a storybook ID from a component/kind and story name.
- */
 
-
-var toId = function toId(kind, name) {
-  return "".concat(sanitizeSafe(kind, 'kind'), "--").concat(sanitizeSafe(name, 'name'));
+// src/index.ts
+var sanitize = (string) => {
+  return string.toLowerCase().replace(/[ ’–—―′¿'`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, "-").replace(/-+/g, "-").replace(/^-+/, "").replace(/-+$/, "");
 };
-/**
- * Transform a CSF named export into a readable story name
- */
-
-
-exports.toId = toId;
-
-var storyNameFromExport = function storyNameFromExport(key) {
-  return (0, _startCase["default"])(key);
+var sanitizeSafe = (string, part) => {
+  const sanitized = sanitize(string);
+  if (sanitized === "") {
+    throw new Error(`Invalid ${part} '${string}', must include alphanumeric characters`);
+  }
+  return sanitized;
 };
-
-exports.storyNameFromExport = storyNameFromExport;
-
+var toId = (kind, name) => `${sanitizeSafe(kind, "kind")}${name ? `--${sanitizeSafe(name, "name")}` : ""}`;
+var storyNameFromExport = (key) => (0, import_startCase.default)(key);
 function matches(storyKey, arrayOrRegex) {
@@ -91,40 +88,23 @@ if (Array.isArray(arrayOrRegex)) {
   }
-
   return storyKey.match(arrayOrRegex);
 }
-/**
- * Does a named export match CSF inclusion/exclusion options?
- */
-
-
-function isExportStory(key, _ref) {
-  var includeStories = _ref.includeStories,
-      excludeStories = _ref.excludeStories;
-  return (// https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs
-    key !== '__esModule' && (!includeStories || matches(key, includeStories)) && (!excludeStories || !matches(key, excludeStories))
-  );
+function isExportStory(key, { includeStories, excludeStories }) {
+  return key !== "__esModule" && (!includeStories || matches(key, includeStories)) && (!excludeStories || !matches(key, excludeStories));
 }
-
-/**
- * Parse out the component/kind name from a path, using the given separator config.
- */
-var parseKind = function parseKind(kind, _ref2) {
-  var rootSeparator = _ref2.rootSeparator,
-      groupSeparator = _ref2.groupSeparator;
-
-  var _kind$split = kind.split(rootSeparator, 2),
-      _kind$split2 = _slicedToArray(_kind$split, 2),
-      root = _kind$split2[0],
-      remainder = _kind$split2[1];
-
-  var groups = (remainder || kind).split(groupSeparator).filter(function (i) {
-    return !!i;
-  }); // when there's no remainder, it means the root wasn't found/split
-
+var parseKind = (kind, { rootSeparator, groupSeparator }) => {
+  const [root, remainder] = kind.split(rootSeparator, 2);
+  const groups = (remainder || kind).split(groupSeparator).filter((i) => !!i);
   return {
     root: remainder ? root : null,
-    groups: groups
+    groups
   };
 };
-
-exports.parseKind = parseKind;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  includeConditionalArg,
+  isExportStory,
+  parseKind,
+  sanitize,
+  storyNameFromExport,
+  toId
+});

package.json

 {
   "name": "@storybook/csf",
-  "version": "0.0.2--canary.29b0df7.0",
+  "version": "0.0.2--canary.3094f05.0",
   "description": "Component Story Format (CSF) utilities",
@@ -26,8 +26,16 @@ "keywords": [
   ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
   "main": "dist/index.js",
+  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "babel src --out-dir dist --extensions \".ts\" && tsc --emitDeclarationOnly",
-    "lint": "eslint src --ext .js,.ts",
-    "test": "jest",
+    "build": "tsup ./src/index.ts --format esm,cjs --dts",
+    "check": "tsc",
+    "lint": "eslint src --ext .ts",
+    "test": "NODE_NO_WARNINGS=1 NODE_OPTIONS=--experimental-vm-modules jest",
     "release": "yarn build && auto shipit"
@@ -38,28 +46,83 @@ },
       "@storybook/eslint-config-storybook"
-    ]
+    ],
+    "parserOptions": {
+      "project": [
+        "./tsconfig.json"
+      ]
+    },
+    "settings": {
+      "import/resolver": {
+        "typescript": {
+          "project": [
+            "./tsconfig.json"
+          ]
+        }
+      }
+    },
+    "rules": {
+      "import/no-unresolved": "error",
+      "jest/expect-expect": [
+        "warn",
+        {
+          "assertFunctionNames": [
+            "expect",
+            "expectTypeOf"
+          ]
+        }
+      ]
+    }
   },
   "prettier": "@storybook/linter-config/prettier.config",
   "jest": {
-    "testEnvironment": "node"
+    "preset": "ts-jest/presets/default-esm",
+    "extensionsToTreatAsEsm": [
+      ".ts"
+    ],
+    "moduleNameMapper": {
+      "^(\\.{1,2}/.*)\\.js$": "$1"
+    },
+    "transform": {
+      "^.+\\.tsx?$": [
+        "ts-jest",
+        {
+          "useESM": true
+        }
+      ]
+    },
+    "testEnvironment": "node",
+    "roots": [
+      "<rootDir>/src"
+    ]
   },
   "dependencies": {
-    "lodash": "^4.17.15"
+    "expect-type": "^0.14.2",
+    "lodash": "^4.17.15",
+    "type-fest": "^2.19.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.9.0",
-    "@babel/preset-env": "^7.9.5",
-    "@babel/preset-typescript": "^7.9.0",
-    "@storybook/eslint-config-storybook": "^2.1.0",
-    "@types/jest": "^24.0.23",
+    "@auto-it/released": "^10.37.6",
+    "@storybook/eslint-config-storybook": "^3.1.2",
+    "@types/jest": "^29.2.0",
     "@types/lodash": "^4.14.149",
-    "auto": "^10.31.0",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "^24.9.0",
+    "@types/node": "^18.11.0",
+    "@typescript-eslint/eslint-plugin": "^5.42.1",
+    "@typescript-eslint/parser": "^5.42.1",
+    "auto": "^10.37.6",
     "common-tags": "^1.8.0",
-    "eslint": "^6.7.1",
-    "jest": "^24.9.0",
-    "prettier": "^1.19.1",
-    "typescript": "^3.7.2"
+    "eslint": "^8.27.0",
+    "eslint-import-resolver-typescript": "^3.5.2",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest": "^27.1.4",
+    "jest": "^29.3.1",
+    "prettier": "^2.7.1",
+    "ts-jest": "^29.0.3",
+    "tsup": "^6.4.0",
+    "typescript": "^4.8.4"
   },
+  "auto": {
+    "plugins": [
+      "npm",
+      "released"
+    ]
+  },
   "publishConfig": {
@@ -66,0 +129,0 @@ "access": "public"

README.md

@@ -33,3 +33,3 @@ <img src="https://user-images.githubusercontent.com/42671/89649515-eceafc00-d88e-11ea-9728-5ef80cdf8462.png" width="321px" height="236px" />
 
-**Tools:** [Storybook](https://storybook.js.org), [WebComponents.dev](https://webcomponents.dev), [RedwoodJS](https://redwoodjs.com/), [UXPin](https://www.uxpin.com/)
+**Tools:** [Storybook](https://storybook.js.org), [WebComponents.dev](https://webcomponents.dev), [Components.studio](https://components.studio), [RedwoodJS](https://redwoodjs.com/), [UXPin](https://www.uxpin.com/)
 
@@ -36,0 +36,0 @@ **Compatible with:** [Jest](https://jestjs.io/), [Enzyme](https://enzymejs.github.io/enzyme), [Testing Library](https://testing-library.com), [Cypress](https://www.cypress.io/), [Playwright](https://playwright.dev/), [Mocha](https://mochajs.org), etc.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance 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

29404

increased by13.25%

Worsened metrics

Dependency count

3

increased by200%

Dev dependency count

18

increased by20%

Number of package files

6

decreased by-53.85%

Lines of code

530

decreased by-8.15%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedexpect-type@^0.14.2

• + Addedtype-fest@^2.19.0

• + Addedexpect-type@0.14.2(transitive)

• + Addedtype-fest@2.19.0(transitive)