@storybook/csf 0.0.2--canary.b1d5348.0 → 0.0.2--canary.87bc651.0

package/README.md

@@ -30,7 +30,7 @@ export const emoji = () => <Button>😀😎👍💯</Button>;
 
 ### Who uses CSF?
 
-**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/)
 
 **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.
 

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export declare const sanitize: (string: string) => string;
-export declare const toId: (kind: string, name: string) => string;
+export declare const toId: (kind: string, name?: string | undefined) => string;
 export declare const storyNameFromExport: (key: string) => string;
 declare type StoryDescriptor = string[] | RegExp;
 export interface IncludeExcludeOptions {

package/dist/index.js

@@ -69,7 +69,7 @@ var sanitizeSafe = function sanitizeSafe(string, part) {
 
 
 var toId = function toId(kind, name) {
-  return "".concat(sanitizeSafe(kind, 'kind'), "--").concat(sanitizeSafe(name, 'name'));
+  return "".concat(sanitizeSafe(kind, 'kind')).concat(name ? "--".concat(sanitizeSafe(name, 'name')) : '');
 };
 /**
  * Transform a CSF named export into a readable story name

package/dist/index.test.js

@@ -15,8 +15,9 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 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 testCases = [// name, kind, story, output
+  ['handles simple cases', 'kind', 'story', 'kind--story'], ['handles kind without story', 'kind', undefined, 'kind'], ['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']];
+  testCases.forEach(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 4),
         name = _ref2[0],
         kind = _ref2[1],
@@ -42,10 +43,10 @@ describe('toId', function () {
       return (0, _.toId)('kind', '?');
     }).toThrow("Invalid name '?', must include alphanumeric characters");
   });
-  it('does not allow empty story', function () {
+  it('allows empty story', function () {
     expect(function () {
       return (0, _.toId)('kind', '');
-    }).toThrow("Invalid name '', must include alphanumeric characters");
+    }).not.toThrow();
   });
 });
 describe('storyNameFromExport', function () {

package/dist/properties.d.ts

@@ -0,0 +1,75 @@
+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

@@ -0,0 +1,27 @@
+"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

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

package/dist/properties.test.js

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

package/dist/story.d.ts

@@ -49,15 +49,15 @@ export declare type AnyFramework = {
     component: unknown;
     storyResult: unknown;
 };
-export declare type StoryContextForEnhancers<TFramework extends AnyFramework, TArgs = Args> = StoryIdentifier & {
+export declare type StoryContextForEnhancers<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = StoryIdentifier & {
     component?: TFramework['component'];
     subcomponents?: Record<string, TFramework['component']>;
     parameters: Parameters;
     initialArgs: TArgs;
     argTypes: StrictArgTypes<TArgs>;
 };
-export declare type ArgsEnhancer<TFramework extends AnyFramework, TArgs = Args> = (context: StoryContextForEnhancers<TFramework, TArgs>) => TArgs;
-export declare type ArgTypesEnhancer<TFramework extends AnyFramework, TArgs = Args> = ((context: StoryContextForEnhancers<TFramework, TArgs>) => StrictArgTypes<TArgs>) & {
+export declare type ArgsEnhancer<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = (context: StoryContextForEnhancers<TFramework, TArgs>) => TArgs;
+export declare type ArgTypesEnhancer<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = ((context: StoryContextForEnhancers<TFramework, TArgs>) => StrictArgTypes<TArgs>) & {
     secondPass?: boolean;
 };
 export declare type StoryContextUpdate<TArgs = Args> = {
@@ -66,31 +66,34 @@ export declare type StoryContextUpdate<TArgs = Args> = {
     [key: string]: any;
 };
 export declare type ViewMode = 'story' | 'docs';
-export declare type StoryContextForLoaders<TFramework extends AnyFramework, TArgs = Args> = StoryContextForEnhancers<TFramework, TArgs> & Required<StoryContextUpdate<TArgs>> & {
+export declare type StoryContextForLoaders<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = StoryContextForEnhancers<TFramework, TArgs> & Required<StoryContextUpdate<TArgs>> & {
     hooks: unknown;
     viewMode: ViewMode;
     originalStoryFn: StoryFn<TFramework>;
 };
-export declare type LoaderFunction<TFramework extends AnyFramework, TArgs = Args> = (c: StoryContextForLoaders<TFramework, TArgs>) => Promise<Record<string, any>>;
-export declare type StoryContext<TFramework extends AnyFramework, TArgs = Args> = StoryContextForLoaders<TFramework, TArgs> & {
+export declare type LoaderFunction<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = (context: StoryContextForLoaders<TFramework, TArgs>) => Promise<Record<string, any>>;
+export declare type StoryContext<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = StoryContextForLoaders<TFramework, TArgs> & {
     loaded: Record<string, any>;
-};
-export declare type PartialStoryFn<TFramework extends AnyFramework, TArgs = Args> = (update?: StoryContextUpdate<TArgs>) => TFramework['storyResult'];
-export declare type LegacyStoryFn<TFramework extends AnyFramework, TArgs = Args> = (context: StoryContext<TFramework, TArgs>) => TFramework['storyResult'];
-export declare type ArgsStoryFn<TFramework extends AnyFramework, TArgs = Args> = (args: TArgs, context: StoryContext<TFramework, TArgs>) => TFramework['storyResult'];
-export declare type StoryFn<TFramework extends AnyFramework, TArgs = Args> = LegacyStoryFn<TFramework, TArgs> | ArgsStoryFn<TFramework, TArgs>;
-export declare type DecoratorFunction<TFramework extends AnyFramework, TArgs = Args> = (fn: PartialStoryFn<TFramework, TArgs>, c: StoryContext<TFramework, TArgs>) => TFramework['storyResult'];
-export declare type DecoratorApplicator<TFramework extends AnyFramework, TArgs = Args> = (storyFn: LegacyStoryFn<TFramework, TArgs>, decorators: DecoratorFunction<TFramework, TArgs>[]) => LegacyStoryFn<TFramework, TArgs>;
-export declare type BaseAnnotations<TFramework extends AnyFramework, TArgs = Args> = {
+    abortSignal: AbortSignal;
+    canvasElement: HTMLElement;
+};
+export declare type PlayFunction<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = (context: StoryContext<TFramework, TArgs>) => Promise<void> | void;
+export declare type PartialStoryFn<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = (update?: StoryContextUpdate<TArgs>) => TFramework['storyResult'];
+export declare type LegacyStoryFn<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = (context: StoryContext<TFramework, TArgs>) => TFramework['storyResult'];
+export declare type ArgsStoryFn<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = (args: TArgs, context: StoryContext<TFramework, TArgs>) => TFramework['storyResult'];
+export declare type StoryFn<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = LegacyStoryFn<TFramework, TArgs> | ArgsStoryFn<TFramework, TArgs>;
+export declare type DecoratorFunction<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = (fn: PartialStoryFn<TFramework, TArgs>, c: StoryContext<TFramework, TArgs>) => TFramework['storyResult'];
+export declare type DecoratorApplicator<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = (storyFn: LegacyStoryFn<TFramework, TArgs>, decorators: DecoratorFunction<TFramework, TArgs>[]) => LegacyStoryFn<TFramework, TArgs>;
+export declare type BaseAnnotations<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = {
     decorators?: DecoratorFunction<TFramework, TArgs>[];
     parameters?: Parameters;
     args?: Partial<TArgs>;
     argTypes?: Partial<ArgTypes<TArgs>>;
     loaders?: LoaderFunction<TFramework, TArgs>[];
     render?: ArgsStoryFn<TFramework, TArgs>;
-    play?: () => Promise<void>;
+    play?: PlayFunction<TFramework, TArgs>;
 };
-export declare type ProjectAnnotations<TFramework extends AnyFramework, TArgs = Args> = BaseAnnotations<TFramework, TArgs> & {
+export declare type ProjectAnnotations<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = BaseAnnotations<TFramework, TArgs> & {
     argsEnhancers?: ArgsEnhancer<TFramework, TArgs>[];
     argTypesEnhancers?: ArgTypesEnhancer<TFramework, TArgs>[];
     globals?: Globals;
@@ -98,7 +101,7 @@ export declare type ProjectAnnotations<TFramework extends AnyFramework, TArgs =
     applyDecorators?: DecoratorApplicator<TFramework, TArgs>;
 };
 declare type StoryDescriptor = string[] | RegExp;
-export declare type ComponentAnnotations<TFramework extends AnyFramework, TArgs = Args> = BaseAnnotations<TFramework, TArgs> & {
+export declare type ComponentAnnotations<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = BaseAnnotations<TFramework, TArgs> & {
     title?: ComponentTitle;
     id?: ComponentId;
     includeStories?: StoryDescriptor;
@@ -106,12 +109,12 @@ export declare type ComponentAnnotations<TFramework extends AnyFramework, TArgs
     component?: TFramework['component'];
     subcomponents?: Record<string, TFramework['component']>;
 };
-export declare type StoryAnnotations<TFramework extends AnyFramework, TArgs = Args> = BaseAnnotations<TFramework, TArgs> & {
+export declare type StoryAnnotations<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = BaseAnnotations<TFramework, TArgs> & {
     name?: StoryName;
     storyName?: StoryName;
     story?: Omit<StoryAnnotations<TFramework, TArgs>, 'story'>;
 };
-declare type LegacyAnnotatedStoryFn<TFramework extends AnyFramework, TArgs = Args> = StoryFn<TFramework, TArgs> & StoryAnnotations<TFramework, TArgs>;
-export declare type LegacyStoryAnnotationsOrFn<TFramework extends AnyFramework, TArgs = Args> = LegacyAnnotatedStoryFn<TFramework, TArgs> | StoryAnnotations<TFramework, TArgs>;
-declare type AnnotatedStoryFn<TFramework extends AnyFramework, TArgs = Args> = ArgsStoryFn<TFramework, TArgs> & StoryAnnotations<TFramework, TArgs>;
-export declare type StoryAnnotationsOrFn<TFramework extends AnyFramework, TArgs = Args> = AnnotatedStoryFn<TFramework, TArgs> | StoryAnnotations<TFramework, TArgs>;
+export declare type LegacyAnnotatedStoryFn<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = StoryFn<TFramework, TArgs> & StoryAnnotations<TFramework, TArgs>;
+export declare type LegacyStoryAnnotationsOrFn<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = LegacyAnnotatedStoryFn<TFramework, TArgs> | StoryAnnotations<TFramework, TArgs>;
+export declare type AnnotatedStoryFn<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = ArgsStoryFn<TFramework, TArgs> & StoryAnnotations<TFramework, TArgs>;
+export declare type StoryAnnotationsOrFn<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = AnnotatedStoryFn<TFramework, TArgs> | StoryAnnotations<TFramework, TArgs>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/csf",
-  "version": "0.0.2--canary.b1d5348.0",
+  "version": "0.0.2--canary.87bc651.0",
   "description": "Component Story Format (CSF) utilities",
   "keywords": [
     "storybook",