Add conditional arg types and metadata

package.json

@@ -38,7 +38,10 @@
   },
   "prettier": "@storybook/linter-config/prettier.config",
   "jest": {
-    "testEnvironment": "node"
+    "testEnvironment": "node",
+    "roots": [
+      "<rootDir>/src"
+    ]
   },
   "dependencies": {
     "lodash": "^4.17.15"

src/includeConditionalArg.test.ts

@@ -0,0 +1,167 @@
+/* eslint-disable @typescript-eslint/ban-ts-ignore */
+import { includeConditionalArg, testValue } from './includeConditionalArg';
+
+describe('testValue', () => {
+  describe('truthy', () => {
+    it.each([
+      ['implicit true', {}, true, true],
+      ['implicit truthy', {}, 1, true],
+      ['implicit falsey', {}, 0, false],
+      ['truthy true', { truthy: true }, true, true],
+      ['truthy truthy', { truthy: true }, 1, true],
+      ['truthy falsey', { truthy: true }, 0, false],
+      ['falsey true', { truthy: false }, true, false],
+      ['falsey truthy', { truthy: false }, 1, false],
+      ['falsey falsey', { truthy: false }, 0, true],
+    ])('%s', (_name, cond, value, expected) => {
+      // @ts-ignore
+      expect(testValue(cond, value)).toBe(expected);
+    });
+  });
+  describe('exists', () => {
+    it.each([
+      ['exist', { exists: true }, 1, true],
+      ['exist false', { exists: true }, undefined, false],
+      ['nexist', { exists: false }, undefined, true],
+      ['nexist false', { exists: false }, 1, false],
+    ])('%s', (_name, cond, value, expected) => {
+      // @ts-ignore
+      expect(testValue(cond, value)).toBe(expected);
+    });
+  });
+  describe('eq', () => {
+    it.each([
+      ['true', { eq: 1 }, 1, true],
+      ['false', { eq: 1 }, 2, false],
+      ['undefined', { eq: undefined }, undefined, false],
+      ['undefined false', { eq: 1 }, undefined, false],
+      ['object true', { eq: { x: 1 } }, { x: 1 }, true],
+      ['object true', { eq: { x: 1 } }, { x: 2 }, false],
+    ])('%s', (_name, cond, value, expected) => {
+      // @ts-ignore
+      expect(testValue(cond, value)).toBe(expected);
+    });
+  });
+  describe('neq', () => {
+    it.each([
+      ['true', { neq: 1 }, 2, true],
+      ['false', { neq: 1 }, 1, false],
+      ['undefined true', { neq: 1 }, undefined, true],
+      ['undefined false', { neq: undefined }, undefined, false],
+      ['object true', { neq: { x: 1 } }, { x: 2 }, true],
+      ['object false', { neq: { x: 1 } }, { x: 1 }, false],
+    ])('%s', (_name, cond, value, expected) => {
+      // @ts-ignore
+      expect(testValue(cond, value)).toBe(expected);
+    });
+  });
+});
+
+describe('includeConditionalArg', () => {
+  describe('errors', () => {
+    it('should throw if arg and global are both specified', () => {
+      expect(() =>
+        includeConditionalArg({ if: { arg: 'a', global: 'b' } }, {}, {})
+      ).toThrowErrorMatchingInlineSnapshot(
+        `"Invalid conditional value {\\"arg\\":\\"a\\",\\"global\\":\\"b\\"}"`
+      );
+    });
+    it('should throw if mulitiple exists / eq / neq are specified', () => {
+      expect(() =>
+        includeConditionalArg({ if: { arg: 'a', exists: true, eq: 1 } }, {}, {})
+      ).toThrowErrorMatchingInlineSnapshot(
+        `"Invalid conditional test {\\"exists\\":true,\\"eq\\":1}"`
+      );
+
+      expect(() =>
+        includeConditionalArg({ if: { arg: 'a', exists: false, neq: 0 } }, {}, {})
+      ).toThrowErrorMatchingInlineSnapshot(
+        `"Invalid conditional test {\\"exists\\":false,\\"neq\\":0}"`
+      );
+
+      expect(() =>
+        includeConditionalArg({ if: { arg: 'a', eq: 1, neq: 0 } }, {}, {})
+      ).toThrowErrorMatchingInlineSnapshot(`"Invalid conditional test {\\"eq\\":1,\\"neq\\":0}"`);
+    });
+  });
+
+  describe('args', () => {
+    describe('implicit', () => {
+      it.each([
+        ['implicit true', { if: { arg: 'a' } }, { a: 1 }, {}, true],
+        ['truthy true', { if: { arg: 'a', truthy: true } }, { a: 0 }, {}, false],
+        ['truthy false', { if: { arg: 'a', truthy: false } }, {}, {}, true],
+      ])('%s', (_name, argType, args, globals, expected) => {
+        // @ts-ignore
+        expect(includeConditionalArg(argType, args, globals)).toBe(expected);
+      });
+    });
+    describe('exists', () => {
+      it.each([
+        ['exist', { if: { arg: 'a', exists: true } }, { a: 1 }, {}, true],
+        ['exist false', { if: { arg: 'a', exists: true } }, {}, {}, false],
+      ])('%s', (_name, argType, args, globals, expected) => {
+        // @ts-ignore
+        expect(includeConditionalArg(argType, args, globals)).toBe(expected);
+      });
+    });
+    describe('eq', () => {
+      it.each([
+        ['scalar true', { if: { arg: 'a', eq: 1 } }, { a: 1 }, {}, true],
+        ['scalar false', { if: { arg: 'a', eq: 1 } }, { a: 2 }, { a: 1 }, false],
+      ])('%s', (_name, argType, args, globals, expected) => {
+        // @ts-ignore
+        expect(includeConditionalArg(argType, args, globals)).toBe(expected);
+      });
+    });
+    describe('neq', () => {
+      it.each([
+        ['scalar true', { if: { arg: 'a', neq: 1 } }, { a: 2 }, {}, true],
+        ['scalar false', { if: { arg: 'a', neq: 1 } }, { a: 1 }, { a: 2 }, false],
+      ])('%s', (_name, argType, args, globals, expected) => {
+        // @ts-ignore
+        expect(includeConditionalArg(argType, args, globals)).toBe(expected);
+      });
+    });
+  });
+  describe('globals', () => {
+    describe('truthy', () => {
+      it.each([
+        ['implicit true', { if: { global: 'a' } }, {}, { a: 1 }, true],
+        ['implicit undefined', { if: { global: 'a' } }, {}, {}, false],
+        ['truthy true', { if: { global: 'a', truthy: true } }, {}, { a: 0 }, false],
+        ['truthy false', { if: { global: 'a', truthy: false } }, {}, { a: 0 }, true],
+      ])('%s', (_name, argType, args, globals, expected) => {
+        // @ts-ignore
+        expect(includeConditionalArg(argType, args, globals)).toBe(expected);
+      });
+    });
+    describe('exists', () => {
+      it.each([
+        ['implicit exist true', { if: { global: 'a', exists: true } }, {}, { a: 1 }, true],
+        ['implicit exist false', { if: { global: 'a', exists: true } }, { a: 1 }, {}, false],
+      ])('%s', (_name, argType, args, globals, expected) => {
+        // @ts-ignore
+        expect(includeConditionalArg(argType, args, globals)).toBe(expected);
+      });
+    });
+    describe('eq', () => {
+      it.each([
+        ['scalar true', { if: { global: 'a', eq: 1 } }, {}, { a: 1 }, true],
+        ['scalar false', { if: { arg: 'a', eq: 1 } }, { a: 2 }, { a: 1 }, false],
+      ])('%s', (_name, argType, args, globals, expected) => {
+        // @ts-ignore
+        expect(includeConditionalArg(argType, args, globals)).toBe(expected);
+      });
+    });
+    describe('neq', () => {
+      it.each([
+        ['scalar true', { if: { global: 'a', neq: 1 } }, {}, { a: 2 }, true],
+        ['scalar false', { if: { global: 'a', neq: 1 } }, { a: 2 }, { a: 1 }, false],
+      ])('%s', (_name, argType, args, globals, expected) => {
+        // @ts-ignore
+        expect(includeConditionalArg(argType, args, globals)).toBe(expected);
+      });
+    });
+  });
+});

src/includeConditionalArg.ts

@@ -0,0 +1,39 @@
+import isEqual from 'lodash/isEqual';
+import { Args, Globals, InputType, Conditional } from './story';
+
+const count = (vals: any[]) => vals.map(v => typeof v !== 'undefined').filter(Boolean).length;
+
+export const testValue = (cond: Omit<Conditional, 'arg' | 'global'>, value: any) => {
+  const { exists, eq, neq, truthy } = cond as any;
+  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;
+};
+
+/**
+ * Helper function to include/exclude an arg based on the value of other other args
+ * aka "conditional args"
+ */
+export const includeConditionalArg = (argType: InputType, args: Args, globals: Globals) => {
+  if (!argType.if) return true;
+
+  const { arg, global } = argType.if as any;
+  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.test.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-ts-ignore */
 import { toId, storyNameFromExport, isExportStory } from '.';
 
 describe('toId', () => {

src/index.ts

@@ -83,4 +83,5 @@ export const parseKind = (kind: string, { rootSeparator, groupSeparator }: Separ
   };
 };
 
+export { includeConditionalArg } from './includeConditionalArg';
 export * from './story';

src/story.ts

@@ -27,11 +27,15 @@ export interface StoryIdentifier {
 
 export type Parameters = { [name: string]: any };
 
+type ConditionalTest = { truthy?: boolean } | { exists: boolean } | { eq: any } | { neq: any };
+type ConditionalValue = { arg: string } | { global: string };
+export type Conditional = ConditionalValue & ConditionalTest;
 export interface InputType {
   name?: string;
   description?: string;
   defaultValue?: any;
   type?: SBType | SBScalarType['name'];
+  if?: Conditional;
   [key: string]: any;
 }
 
@@ -260,7 +264,7 @@ export type ComponentAnnotations<
    *
    * By defining them each component will have its tab in the args table.
    */
-    subcomponents?: Record<string, TFramework['component']>;
+  subcomponents?: Record<string, TFramework['component']>;
 };
 
 export type StoryAnnotations<
@@ -276,7 +280,7 @@ export type StoryAnnotations<
    * Override the display name in the UI (CSF v2)
    */
   storyName?: StoryName;
-  
+
   /**
    * Function that is executed after the story is rendered.
    */

tsconfig.json

@@ -11,5 +11,5 @@
     "outDir": "dist"
   },
   "include": ["src"],
-  "exclude": ["dist"]
+  "exclude": ["src/**/*.test.ts", "dist"]
 }