@storybook/csf - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2--canary.29.e31af55.0

dist/index.d.ts

@@ -1,18 +0,335 @@
-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;
+interface StoryIdentifier {
+    componentId: ComponentId;
+    title: ComponentTitle;
+    /** @deprecated */
+    kind: ComponentTitle;
+    id: StoryId;
+    name: StoryName;
+    /** @deprecated */
+    story: StoryName;
+}
+declare type Parameters = {
+    [name: string]: any;
+};
+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 AnyFramework = {
+    component: unknown;
+    storyResult: unknown;
+    T?: unknown;
+};
+declare type StoryContextForEnhancers<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = StoryIdentifier & {
+    component?: (TFramework & {
+        T: any;
+    })['component'];
+    subcomponents?: Record<string, (TFramework & {
+        T: any;
+    })['component']>;
+    parameters: Parameters;
+    initialArgs: TArgs;
+    argTypes: StrictArgTypes<TArgs>;
+};
+declare type ArgsEnhancer<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = (context: StoryContextForEnhancers<TFramework, TArgs>) => TArgs;
+declare type ArgTypesEnhancer<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = ((context: StoryContextForEnhancers<TFramework, 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<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = StoryContextForEnhancers<TFramework, TArgs> & Required<StoryContextUpdate<TArgs>> & {
+    hooks: unknown;
+    viewMode: ViewMode;
+    originalStoryFn: StoryFn<TFramework>;
+};
+declare type LoaderFunction<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = (context: StoryContextForLoaders<TFramework, TArgs>) => Promise<Record<string, any>>;
+declare type StoryContext<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = StoryContextForLoaders<TFramework, TArgs> & {
+    loaded: Record<string, any>;
+    abortSignal: AbortSignal;
+    canvasElement: HTMLElement;
+};
+declare type StepLabel = string;
+declare type StepFunction<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = (label: StepLabel, play: PlayFunction<TFramework, TArgs>) => Promise<void> | void;
+declare type PlayFunctionContext<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = StoryContext<TFramework, TArgs> & {
+    step: StepFunction<TFramework, TArgs>;
+};
+declare type PlayFunction<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = (context: PlayFunctionContext<TFramework, TArgs>) => Promise<void> | void;
+declare type PartialStoryFn<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = (update?: StoryContextUpdate<Partial<TArgs>>) => TFramework['storyResult'];
+declare type LegacyStoryFn<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = (context: StoryContext<TFramework, TArgs>) => TFramework['storyResult'];
+declare type ArgsStoryFn<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = (args: TArgs, context: StoryContext<TFramework, TArgs>) => (TFramework & {
+    T: TArgs;
+})['storyResult'];
+declare type StoryFn<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = LegacyStoryFn<TFramework, TArgs> | ArgsStoryFn<TFramework, TArgs>;
+declare type DecoratorFunction<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = (fn: PartialStoryFn<TFramework, TArgs>, c: StoryContext<TFramework, TArgs>) => TFramework['storyResult'];
+declare type DecoratorApplicator<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = (storyFn: LegacyStoryFn<TFramework, TArgs>, decorators: DecoratorFunction<TFramework, TArgs>[]) => LegacyStoryFn<TFramework, TArgs>;
+declare type StepRunner<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = (label: StepLabel, play: PlayFunction<TFramework, TArgs>, context: PlayFunctionContext<TFramework, TArgs>) => Promise<void>;
+declare type BaseAnnotations<TFramework extends AnyFramework = AnyFramework, 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<TFramework, 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<TFramework, TArgs>[];
+    /**
+     * Define a custom render function for the story(ies). If not passed, a default render function by the framework will be used.
+     */
+    render?: ArgsStoryFn<TFramework, TArgs>;
+};
+declare type ProjectAnnotations<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = BaseAnnotations<TFramework, TArgs> & {
+    argsEnhancers?: ArgsEnhancer<TFramework, Args>[];
+    argTypesEnhancers?: ArgTypesEnhancer<TFramework, Args>[];
+    globals?: Globals;
+    globalTypes?: GlobalTypes;
+    applyDecorators?: DecoratorApplicator<TFramework, Args>;
+    runStep?: StepRunner<TFramework, TArgs>;
+};
+declare type StoryDescriptor$1 = string[] | RegExp;
+interface ComponentAnnotations<TFramework extends AnyFramework = AnyFramework, TArgs = Args> extends BaseAnnotations<TFramework, 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?: (TFramework & {
+        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, TFramework['component']>;
+}
+declare type StoryAnnotations<TFramework extends AnyFramework = AnyFramework, TArgs = Args, TRequiredArgs = Partial<TArgs>> = BaseAnnotations<TFramework, 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<TFramework, TArgs>;
+    /** @deprecated */
+    story?: Omit<StoryAnnotations<TFramework, TArgs>, 'story'>;
+} & ({} extends TRequiredArgs ? {
+    args?: TRequiredArgs;
+} : {
+    args: TRequiredArgs;
+});
+declare type LegacyAnnotatedStoryFn<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = StoryFn<TFramework, TArgs> & StoryAnnotations<TFramework, TArgs>;
+declare type LegacyStoryAnnotationsOrFn<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = LegacyAnnotatedStoryFn<TFramework, TArgs> | StoryAnnotations<TFramework, TArgs>;
+declare type AnnotatedStoryFn<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = ArgsStoryFn<TFramework, TArgs> & StoryAnnotations<TFramework, TArgs>;
+declare type StoryAnnotationsOrFn<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = AnnotatedStoryFn<TFramework, TArgs> | StoryAnnotations<TFramework, TArgs>;
+declare type ArgsFromMeta<TFramework extends AnyFramework, Meta> = Meta extends {
+    render?: ArgsStoryFn<TFramework, infer RArgs>;
+    loaders?: (infer Loaders)[];
+    decorators?: (infer Decorators)[];
+} ? Simplify<RArgs & DecoratorsArgs<TFramework, Decorators> & LoaderArgs<TFramework, Loaders>> : unknown;
+declare type DecoratorsArgs<TFramework extends AnyFramework, Decorators> = UnionToIntersection<Decorators extends DecoratorFunction<TFramework, infer TArgs> ? TArgs : unknown>;
+declare type LoaderArgs<TFramework extends AnyFramework, Loaders> = UnionToIntersection<Loaders extends LoaderFunction<TFramework, 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 {};
+
+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, 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, ViewMode, includeConditionalArg, isExportStory, parseKind, sanitize, storyNameFromExport, toId };

dist/index.js

 "use strict";
+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 });
+};
+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);
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  includeConditionalArg: () => includeConditionalArg,
+  isExportStory: () => isExportStory,
+  parseKind: () => parseKind,
+  sanitize: () => sanitize,
+  storyNameFromExport: () => storyNameFromExport,
+  toId: () => toId
 });
-exports.isExportStory = isExportStory;
-exports.parseKind = exports.storyNameFromExport = exports.toId = exports.sanitize = void 0;
+module.exports = __toCommonJS(src_exports);
+var import_startCase = __toESM(require("lodash/startCase"));
 
-var _startCase = _interopRequireDefault(require("lodash/startCase"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
-
-function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { 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) {
@@ -67,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.1",
-  "description": "Storybook Component Story Format (CSF) utilities",
+  "version": "0.0.2--canary.29.e31af55.0",
+  "description": "Component Story Format (CSF) utilities",
   "keywords": [
@@ -11,9 +11,9 @@ "storybook",
   ],
-  "homepage": "https://github.com/storybookjs/csf",
+  "homepage": "https://github.com/ComponentDriven/csf",
   "bugs": {
-    "url": "https://github.com/storybookjs/csf/issues"
+    "url": "https://github.com/ComponentDriven/csf/issues"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/storybookjs/csf.git"
+    "url": "https://github.com/ComponentDriven/csf.git"
   },
@@ -28,8 +28,10 @@ "license": "MIT",
   "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",
-    "prepublish": "yarn build",
-    "test": "jest"
+    "build": "tsup ./src/index.ts --format esm,cjs --dts",
+    "check": "tsc",
+    "lint": "eslint src --ext .ts",
+    "test": "jest",
+    "release": "yarn build && auto shipit"
   },
@@ -39,27 +41,50 @@ "eslintConfig": {
       "@storybook/eslint-config-storybook"
-    ]
+    ],
+    "rules": {
+      "jest/expect-expect": [
+        "warn",
+        {
+          "assertFunctionNames": [
+            "expect",
+            "expectTypeOf"
+          ]
+        }
+      ]
+    }
   },
   "prettier": "@storybook/linter-config/prettier.config",
   "jest": {
-    "testEnvironment": "node"
+    "preset": "ts-jest",
+    "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.7.4",
-    "@babel/core": "^7.7.4",
-    "@babel/preset-env": "^7.7.4",
-    "@babel/preset-typescript": "^7.7.4",
+    "@auto-it/released": "^10.37.1",
     "@storybook/eslint-config-storybook": "^2.1.0",
-    "@types/jest": "^24.0.23",
+    "@types/jest": "^29.2.0",
     "@types/lodash": "^4.14.149",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "^24.9.0",
+    "@types/node": "^18.11.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "auto": "^10.31.0",
     "common-tags": "^1.8.0",
     "eslint": "^6.7.1",
-    "jest": "^24.9.0",
-    "prettier": "^1.19.1",
-    "typescript": "^3.7.2"
+    "jest": "^29.2.0",
+    "prettier": "^2.7.1",
+    "ts-jest": "^29.0.3",
+    "tsup": "^6.3.0",
+    "typescript": "^4.8.4"
   },
+  "auto": {
+    "plugins": [
+      "npm",
+      "released"
+    ]
+  },
   "publishConfig": {
@@ -66,0 +91,0 @@ "access": "public"

README.md

@@ -1,15 +0,55 @@
-# Storybook Component Story Format (CSF)
+<img src="https://user-images.githubusercontent.com/42671/89649515-eceafc00-d88e-11ea-9728-5ef80cdf8462.png" width="321px" height="236px" />
 
-A minimal set of utility functions for dealing with Storybook [Component Story Format (CSF)](https://storybook.js.org/docs/formats/component-story-format/).
+# Component Story Format (CSF)
 
-## Install
+### Why a standard format?
+Components have risen to dominate the UI landscape. There are new component-oriented tools for development, testing, design, and prototyping. These tools engage in the creation and consumption of components and component examples (a.k.a. stories). But each tool has its own proprietary format because a simple, platform-agnostic way to express component examples doesn't yet exist.
 
+### The "Story" is the source of truth for a component.
+A story is a code snippet that renders an example of a component in a specific state. Think about it like a "[user story](https://en.wikipedia.org/wiki/User_story)".
+
+It uses the production code shipped to users, making it the most accurate representation of a component example. What's more, stories are expressed in the view layer you use to build your app.
+
+
+### Component Story Format
+The Component Story Format is an open standard for component examples based on JavaScript ES6 modules. This enables interoperation between development, testing, and design tools.
+
+```js
+export default { title: 'atoms/Button' };
+export const text = () => <Button>Hello</Button>;
+export const emoji = () => <Button>😀😎👍💯</Button>;
+```
+
+💎 **Simple.** Writing component "stories" is as easy as exporting ES6 functions using a clean, widely-used format.
+
+🚚 **Non-proprietary.** CSF doesn't require any vendor-specific libraries. Component stories are easily consumed anywhere ES6 modules live, including your favourite testing tools like Jest and Cypress.
+
+☝️ **Declarative.** The declarative syntax is isomorphic to higher-level formats like MDX, enabling clean, verifiable transformations.
+
+🔥 **Optimized.** Component stories don't need any libraries other than your components. And because they're ES6 modules, they're even tree-shakeable!
+
+### Who uses CSF?
+
+**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/)
+
+**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.
+
+
+## CSF utilities
+
+A minimal set of utility functions for dealing with [Component Story Format (CSF)](https://storybook.js.org/docs/formats/component-story-format/).
+
+
+### Install
+
 ```sh
-yarn add @storybook/csf
+yarn add @componentdriven/csf
 ```
 
-## API
+### API
 
 See package source for function definitions and types:
 
+- `storyNameFromExport(key)` - Enhance export name (`key`) of the story. Currently implemented with [startCase](https://lodash.com/docs/4.17.11#startCase).
+
 - `isExportStory(key, { includeStories, excludeStories })` - Does a named export match CSF inclusion/exclusion options?
@@ -16,0 +56,0 @@

New alerts

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

Improved metrics

Total package byte prevSize

27018

increased by120.74%

Lines of code

510

increased by118.88%

Number of lines in readme file

74

increased by117.65%

Worsened metrics

Dependency count

3

increased by200%

Number of package files

5

decreased by-28.57%

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)