@storybook/csf 0.0.2--canary.68887a1.0 → 0.0.2--canary.789b78e.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,6 @@
+import { Args, InputType } from './story';
 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 {
@@ -15,4 +16,5 @@ export declare const parseKind: (kind: string, { rootSeparator, groupSeparator }
     root: string | null;
     groups: string[];
 };
+export declare const includeConditionalArg: (argType: InputType, args: Args) => boolean;
 export * from './story';

package/dist/index.js

@@ -8,10 +8,11 @@ var _exportNames = {
   toId: true,
   storyNameFromExport: true,
   isExportStory: true,
-  parseKind: true
+  parseKind: true,
+  includeConditionalArg: true
 };
 exports.isExportStory = isExportStory;
-exports.parseKind = exports.storyNameFromExport = exports.toId = exports.sanitize = void 0;
+exports.includeConditionalArg = exports.parseKind = exports.storyNameFromExport = exports.toId = exports.sanitize = void 0;
 
 var _startCase = _interopRequireDefault(require("lodash/startCase"));
 
@@ -69,7 +70,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
@@ -126,4 +127,23 @@ var parseKind = function parseKind(kind, _ref2) {
   };
 };
 
-exports.parseKind = parseKind;
+exports.parseKind = parseKind;
+
+var includeHelper = function includeHelper(includeIf, args) {
+  return typeof includeIf === 'string' && includeIf.length > 0 ? !!args[includeIf] : !!includeIf;
+};
+/**
+ * Helper function to include/exclude an arg based on the value of other other args
+ * aka "conditional args"
+ */
+
+
+var includeConditionalArg = function includeConditionalArg(argType, args) {
+  var includeIf = argType.includeIf,
+      excludeIf = argType.excludeIf;
+  if (typeof includeIf !== 'undefined') return includeHelper(includeIf, args);
+  if (typeof excludeIf !== 'undefined') return !includeHelper(excludeIf, args);
+  return true;
+};
+
+exports.includeConditionalArg = includeConditionalArg;

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

@@ -21,6 +21,8 @@ export interface InputType {
     description?: string;
     defaultValue?: any;
     type?: SBType | SBScalarType['name'];
+    includeIf?: boolean | string;
+    excludeIf?: boolean | string;
     [key: string]: any;
 }
 export interface StrictInputType extends InputType {
@@ -71,15 +73,13 @@ export declare type StoryContextForLoaders<TFramework extends AnyFramework = Any
     viewMode: ViewMode;
     originalStoryFn: StoryFn<TFramework>;
 };
-export declare type LoaderFunction<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = (c: StoryContextForLoaders<TFramework, TArgs>) => Promise<Record<string, any>>;
+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 StoryContextForPlayFunction<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = StoryContext<TFramework, TArgs> & {
     abortSignal: AbortSignal;
-    canvas?: HTMLElement;
+    canvasElement: HTMLElement;
 };
-export declare type PlayFunction<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = () => Promise<void> | void;
+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'];
@@ -87,20 +87,19 @@ export declare type StoryFn<TFramework extends AnyFramework = AnyFramework, TArg
 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>[];
+    decorators?: DecoratorFunction<TFramework, Args>[];
     parameters?: Parameters;
     args?: Partial<TArgs>;
     argTypes?: Partial<ArgTypes<TArgs>>;
-    loaders?: LoaderFunction<TFramework, TArgs>[];
-    render?: ArgsStoryFn<TFramework, TArgs>;
-    play?: PlayFunction<TFramework, TArgs>;
+    loaders?: LoaderFunction<TFramework, Args>[];
+    render?: ArgsStoryFn<TFramework, Args>;
 };
 export declare type ProjectAnnotations<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = BaseAnnotations<TFramework, TArgs> & {
-    argsEnhancers?: ArgsEnhancer<TFramework, TArgs>[];
-    argTypesEnhancers?: ArgTypesEnhancer<TFramework, TArgs>[];
+    argsEnhancers?: ArgsEnhancer<TFramework, Args>[];
+    argTypesEnhancers?: ArgTypesEnhancer<TFramework, Args>[];
     globals?: Globals;
     globalTypes?: GlobalTypes;
-    applyDecorators?: DecoratorApplicator<TFramework, TArgs>;
+    applyDecorators?: DecoratorApplicator<TFramework, Args>;
 };
 declare type StoryDescriptor = string[] | RegExp;
 export declare type ComponentAnnotations<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = BaseAnnotations<TFramework, TArgs> & {
@@ -114,9 +113,10 @@ export declare type ComponentAnnotations<TFramework extends AnyFramework = AnyFr
 export declare type StoryAnnotations<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = BaseAnnotations<TFramework, TArgs> & {
     name?: StoryName;
     storyName?: StoryName;
+    play?: PlayFunction<TFramework, TArgs>;
     story?: Omit<StoryAnnotations<TFramework, TArgs>, 'story'>;
 };
-declare type LegacyAnnotatedStoryFn<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = StoryFn<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>;
-declare type AnnotatedStoryFn<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = ArgsStoryFn<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.68887a1.0",
+  "version": "0.0.2--canary.789b78e.0",
   "description": "Component Story Format (CSF) utilities",
   "keywords": [
     "storybook",