@storybook/csf 0.0.2-alpha.0 → 0.0.2-next.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 CSF contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,14 +1,52 @@
-# 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:
 

package/dist/index.d.ts

@@ -1,28 +1,339 @@
-import { StoryProperties } from './properties';
-export * from './properties';
-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']>;
+    /**
+     * Function that is executed after the story is rendered.
+     */
+    play?: PlayFunction<TFramework, TArgs>;
+}
+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 interface StoryMetadata {
-    story?: {
-        name?: string;
-        properties?: StoryProperties;
-        parameters?: {
-            [key: string]: any;
-        };
-    };
-}
+
+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 };

package/dist/index.js

@@ -1,129 +1,109 @@
 "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 _startCase = _interopRequireDefault(require("lodash/startCase"));
-
-var _properties = require("./properties");
-
-Object.keys(_properties).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 _properties[key];
-    }
-  });
+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);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  includeConditionalArg: () => includeConditionalArg,
+  isExportStory: () => isExportStory,
+  parseKind: () => parseKind,
+  sanitize: () => sanitize,
+  storyNameFromExport: () => storyNameFromExport,
+  toId: () => toId
 });
-
-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(/-+$/, '');
+module.exports = __toCommonJS(src_exports);
+var import_startCase = __toESM(require("lodash/startCase"));
+
+// 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) {
   if (Array.isArray(arrayOrRegex)) {
     return arrayOrRegex.includes(storyKey);
   }
-
   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
   };
 };
-/**
- * csf story metadata attached to the story export function
- */
-
-
-exports.parseKind = parseKind;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  includeConditionalArg,
+  isExportStory,
+  parseKind,
+  sanitize,
+  storyNameFromExport,
+  toId
+});

package/dist/index.mjs

@@ -0,0 +1,73 @@
+// src/index.ts
+import startCase from "lodash/startCase";
+
+// src/includeConditionalArg.ts
+import isEqual from "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 isEqual(value, eq);
+  }
+  if (typeof neq !== "undefined") {
+    return !isEqual(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;
+};
+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 })}`);
+  }
+  const value = arg ? args[arg] : globals[global];
+  return testValue(argType.if, value);
+};
+
+// src/index.ts
+var sanitize = (string) => {
+  return string.toLowerCase().replace(/[ ’–—―′¿'`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, "-").replace(/-+/g, "-").replace(/^-+/, "").replace(/-+$/, "");
+};
+var sanitizeSafe = (string, part) => {
+  const sanitized = sanitize(string);
+  if (sanitized === "") {
+    throw new Error(`Invalid ${part} '${string}', must include alphanumeric characters`);
+  }
+  return sanitized;
+};
+var toId = (kind, name) => `${sanitizeSafe(kind, "kind")}${name ? `--${sanitizeSafe(name, "name")}` : ""}`;
+var storyNameFromExport = (key) => startCase(key);
+function matches(storyKey, arrayOrRegex) {
+  if (Array.isArray(arrayOrRegex)) {
+    return arrayOrRegex.includes(storyKey);
+  }
+  return storyKey.match(arrayOrRegex);
+}
+function isExportStory(key, { includeStories, excludeStories }) {
+  return key !== "__esModule" && (!includeStories || matches(key, includeStories)) && (!excludeStories || !matches(key, excludeStories));
+}
+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
+  };
+};
+export {
+  includeConditionalArg,
+  isExportStory,
+  parseKind,
+  sanitize,
+  storyNameFromExport,
+  toId
+};

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@storybook/csf",
-  "version": "0.0.2-alpha.0",
-  "description": "Storybook Component Story Format (CSF) utilities",
+  "version": "0.0.2-next.0",
+  "description": "Component Story Format (CSF) utilities",
   "keywords": [
     "storybook",
     "component story format",
     "csf",
     "stories"
   ],
-  "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"
   },
   "license": "MIT",
   "files": [
@@ -24,40 +24,65 @@
     "*.d.ts"
   ],
   "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"
   },
   "eslintConfig": {
     "extends": [
       "@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": {
     "access": "public"

package/.babelrc.js

@@ -1,6 +0,0 @@
-module.exports = {
-  presets: [
-    '@babel/preset-env',
-    '@babel/preset-typescript',
-  ],
-};

package/dist/index.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/index.test.js

@@ -1,137 +0,0 @@
-"use strict";
-
-var _ = require(".");
-
-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; }
-
-describe('toId', function () {
-  [// name, kind, story, output
-  ['handles simple cases', 'kind', 'story', 'kind--story'], ['handles basic substitution', 'a b$c?d😀e', '1-2:3', 'a-b-c-d😀e--1-2-3'], ['handles runs of non-url chars', 'a?&*b', 'story', 'a-b--story'], ['removes non-url chars from start and end', '?ab-', 'story', 'ab--story'], ['downcases', 'KIND', 'STORY', 'kind--story'], ['non-latin', 'Кнопки', 'нормальный', 'кнопки--нормальный'], ['korean', 'kind', '바보 (babo)', 'kind--바보-babo'], ['all punctuation', 'kind', 'unicorns,’–—―′¿`"<>()!.!!!{}[]%^&$*#&', 'kind--unicorns']].forEach(function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 4),
-        name = _ref2[0],
-        kind = _ref2[1],
-        story = _ref2[2],
-        output = _ref2[3];
-
-    it(name, function () {
-      expect((0, _.toId)(kind, story)).toBe(output);
-    });
-  });
-  it('does not allow kind with *no* url chars', function () {
-    expect(function () {
-      return (0, _.toId)('?', 'asdf');
-    }).toThrow("Invalid kind '?', must include alphanumeric characters");
-  });
-  it('does not allow empty kind', function () {
-    expect(function () {
-      return (0, _.toId)('', 'asdf');
-    }).toThrow("Invalid kind '', must include alphanumeric characters");
-  });
-  it('does not allow story with *no* url chars', function () {
-    expect(function () {
-      return (0, _.toId)('kind', '?');
-    }).toThrow("Invalid name '?', must include alphanumeric characters");
-  });
-  it('does not allow empty story', function () {
-    expect(function () {
-      return (0, _.toId)('kind', '');
-    }).toThrow("Invalid name '', must include alphanumeric characters");
-  });
-});
-describe('storyNameFromExport', function () {
-  it('should format CSF exports with sensible defaults', function () {
-    var testCases = {
-      name: 'Name',
-      someName: 'Some Name',
-      someNAME: 'Some NAME',
-      some_custom_NAME: 'Some Custom NAME',
-      someName1234: 'Some Name 1234',
-      someName1_2_3_4: 'Some Name 1 2 3 4'
-    };
-    Object.entries(testCases).forEach(function (_ref3) {
-      var _ref4 = _slicedToArray(_ref3, 2),
-          key = _ref4[0],
-          val = _ref4[1];
-
-      return expect((0, _.storyNameFromExport)(key)).toBe(val);
-    });
-  });
-});
-describe('isExportStory', function () {
-  it('should exclude __esModule', function () {
-    expect((0, _.isExportStory)('__esModule', {})).toBeFalsy();
-  });
-  it('should include all stories when there are no filters', function () {
-    expect((0, _.isExportStory)('a', {})).toBeTruthy();
-  });
-  it('should filter stories by arrays', function () {
-    expect((0, _.isExportStory)('a', {
-      includeStories: ['a']
-    })).toBeTruthy();
-    expect((0, _.isExportStory)('a', {
-      includeStories: []
-    })).toBeFalsy();
-    expect((0, _.isExportStory)('a', {
-      includeStories: ['b']
-    })).toBeFalsy();
-    expect((0, _.isExportStory)('a', {
-      excludeStories: ['a']
-    })).toBeFalsy();
-    expect((0, _.isExportStory)('a', {
-      excludeStories: []
-    })).toBeTruthy();
-    expect((0, _.isExportStory)('a', {
-      excludeStories: ['b']
-    })).toBeTruthy();
-    expect((0, _.isExportStory)('a', {
-      includeStories: ['a'],
-      excludeStories: ['a']
-    })).toBeFalsy();
-    expect((0, _.isExportStory)('a', {
-      includeStories: [],
-      excludeStories: []
-    })).toBeFalsy();
-    expect((0, _.isExportStory)('a', {
-      includeStories: ['a'],
-      excludeStories: ['b']
-    })).toBeTruthy();
-  });
-  it('should filter stories by regex', function () {
-    expect((0, _.isExportStory)('a', {
-      includeStories: /a/
-    })).toBeTruthy();
-    expect((0, _.isExportStory)('a', {
-      includeStories: /.*/
-    })).toBeTruthy();
-    expect((0, _.isExportStory)('a', {
-      includeStories: /b/
-    })).toBeFalsy();
-    expect((0, _.isExportStory)('a', {
-      excludeStories: /a/
-    })).toBeFalsy();
-    expect((0, _.isExportStory)('a', {
-      excludeStories: /.*/
-    })).toBeFalsy();
-    expect((0, _.isExportStory)('a', {
-      excludeStories: /b/
-    })).toBeTruthy();
-    expect((0, _.isExportStory)('a', {
-      includeStories: /a/,
-      excludeStories: ['a']
-    })).toBeFalsy();
-    expect((0, _.isExportStory)('a', {
-      includeStories: /.*/,
-      excludeStories: /.*/
-    })).toBeFalsy();
-    expect((0, _.isExportStory)('a', {
-      includeStories: /a/,
-      excludeStories: /b/
-    })).toBeTruthy();
-  });
-});

package/dist/properties.d.ts

@@ -1,75 +0,0 @@
-export declare enum PropertyTypes {
-    TEXT = "text",
-    NUMBER = "number",
-    BOOLEAN = "boolean",
-    OPTIONS = "options",
-    DATE = "date",
-    COLOR = "color",
-    BUTTON = "button",
-    OBJECT = "object",
-    ARRAY = "array",
-    FILES = "files"
-}
-export interface StoryPropertyBase<T> {
-    type: PropertyTypes;
-    label?: string;
-    value?: T;
-    hideLabel?: boolean;
-    hidden?: boolean;
-    groupId?: string;
-    order?: number;
-}
-export interface StoryPropertyText extends StoryPropertyBase<string> {
-    type: PropertyTypes.TEXT;
-    placeholder?: string;
-    maxRows?: number;
-}
-export interface StoryPropertyBoolean extends StoryPropertyBase<boolean> {
-    type: PropertyTypes.BOOLEAN;
-}
-export interface StoryPropertyColor extends StoryPropertyBase<string> {
-    type: PropertyTypes.COLOR;
-}
-export interface StoryPropertyDate extends StoryPropertyBase<Date> {
-    type: PropertyTypes.DATE;
-    datePicker?: boolean;
-    timePicker?: boolean;
-}
-export interface StoryPropertyFiles extends StoryPropertyBase<string[]> {
-    type: PropertyTypes.FILES;
-    accept?: string;
-}
-export interface StoryPropertyArray extends StoryPropertyBase<string[]> {
-    type: PropertyTypes.ARRAY;
-    separator?: string;
-}
-export interface StoryPropertyObject extends StoryPropertyBase<object> {
-    type: PropertyTypes.OBJECT;
-}
-export interface StoryPropertyButton extends StoryPropertyBase<void> {
-    type: PropertyTypes.BUTTON;
-    onClick?: (prop: StoryPropertyButton) => void;
-}
-export declare type OptionsValueType<T = unknown> = T | string | number | string[] | number[] | {
-    label: string;
-    value: any;
-};
-export declare type OptionsListType<T = unknown> = {
-    [key: string]: T;
-} | OptionsValueType<T>[];
-export interface StoryPropertyOptions<T = unknown> extends StoryPropertyBase<OptionsValueType<T>> {
-    type: PropertyTypes.OPTIONS;
-    options: OptionsListType<T>;
-    display?: 'select' | 'multi-select' | 'radio' | 'inline-radio' | 'check' | 'inline-check';
-}
-export interface StoryPropertyNumber extends StoryPropertyBase<number> {
-    type: PropertyTypes.NUMBER;
-    range?: boolean;
-    min?: number;
-    max?: number;
-    step?: number;
-}
-export declare type StoryProperty = StoryPropertyText | StoryPropertyBoolean | StoryPropertyColor | StoryPropertyDate | StoryPropertyObject | StoryPropertyButton | StoryPropertyOptions | StoryPropertyNumber | StoryPropertyArray | StoryPropertyFiles;
-export interface StoryProperties {
-    [name: string]: StoryProperty;
-}

package/dist/properties.js

@@ -1,27 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PropertyTypes = void 0;
-
-/**
- * Property field types
- * examples are provided for the different types:
- *
- */
-var PropertyTypes;
-exports.PropertyTypes = PropertyTypes;
-
-(function (PropertyTypes) {
-  PropertyTypes["TEXT"] = "text";
-  PropertyTypes["NUMBER"] = "number";
-  PropertyTypes["BOOLEAN"] = "boolean";
-  PropertyTypes["OPTIONS"] = "options";
-  PropertyTypes["DATE"] = "date";
-  PropertyTypes["COLOR"] = "color";
-  PropertyTypes["BUTTON"] = "button";
-  PropertyTypes["OBJECT"] = "object";
-  PropertyTypes["ARRAY"] = "array";
-  PropertyTypes["FILES"] = "files";
-})(PropertyTypes || (exports.PropertyTypes = PropertyTypes = {}));

package/dist/properties.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/properties.test.js

@@ -1,14 +0,0 @@
-"use strict";
-
-var _ = require(".");
-
-describe('properties', function () {
-  it('type PropertyTypes.TEXT', function () {
-    expect(function () {
-      var prop = {
-        type: _.PropertyTypes.TEXT
-      };
-      return prop.type === 'text';
-    }).toBeTruthy();
-  });
-});