Build: Generic stories for addon-controls

code/addons/controls/template/stories/basics.stories.ts

@@ -0,0 +1,83 @@
+import globalThis from 'global';
+import { PartialStoryFn, StoryContext } from '@storybook/csf';
+
+export default {
+  component: null,
+  decorators: [
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ component: globalThis.Components.Pre, args: { object: context.args } }),
+  ],
+  argTypes: {
+    boolean: { control: 'boolean' },
+    color: { control: 'color' },
+    colorWithPresets: {
+      control: {
+        type: 'color',
+        presetColors: ['#ff0', 'pink', { color: '#00f', title: 'mystery' }],
+      },
+    },
+    colorStartOpen: { control: { type: 'color', startOpen: true } },
+    date: { control: 'date' },
+    file: { control: { type: 'file', accept: '.png' }, name: 'Image Urls' },
+    number: { control: 'number' },
+    object: { control: 'object' },
+    radio: { control: { type: 'radio', options: ['a', 'b', 'c'] } },
+    radioWithLabels: {
+      control: { type: 'radio', options: ['a', 'b', 'c'], labels: ['alpha', 'beta', 'gamma'] },
+    },
+    inlineRadio: { control: { type: 'inline-radio', options: ['a', 'b', 'c'] } },
+    select: { control: { type: 'select', options: ['a', 'b', 'c'] } },
+    multiSelect: { control: { type: 'multi-select', options: ['a', 'b', 'c'] } },
+    range: { control: 'range' },
+    rangeCustom: { control: { type: 'range', min: 0, max: 1000, step: 100 } },
+    text: { control: 'text' },
+  },
+};
+
+export const Undefined = {
+  args: {},
+};
+
+const DEFAULT_NESTED_OBJECT = {
+  text: 'Hello world',
+  boolean: true,
+  array: ['One', 'Two', 'Three'],
+  object: { a: 1, b: 2, c: 3 },
+};
+export const Defined = {
+  args: {
+    boolean: true,
+    color: '#ff0',
+    colorWithPresets: 'pink',
+    colorStartOpen: 'orange',
+    date: new Date(2010, 1, 1),
+    file: ['https://storybook.js.org/images/placeholders/350x150.png'],
+    number: 10,
+    object: DEFAULT_NESTED_OBJECT,
+    radio: 'a',
+    radioWithLabels: 'b',
+    inlineRadio: 'c',
+    select: 'b',
+    multiSelect: ['a'],
+    range: 15,
+    rangeCustom: 10,
+    text: 'hello',
+  },
+};
+
+// export const ImageFileControl = (args) => <img src={args.imageUrls[0]} alt="Your Example Story" />;
+// ImageFileControl.args = {
+//   imageUrls: ['https://storybook.js.org/images/placeholders/350x150.png'],
+// };
+
+// const hasCycle: any = {};
+// hasCycle.cycle = hasCycle;
+
+// export const CyclicArgs = {
+//   args: process.env.NODE_ENV !== 'test' ? { object: hasCycle } : {},
+//   parameters: {
+//     docs: { disable: true },
+//     chromatic: { disable: true },
+//     storyshots: { disable: true },
+//   },
+// };

code/addons/controls/template/stories/conditional.stories.ts

@@ -0,0 +1,62 @@
+import globalThis from 'global';
+import { PartialStoryFn, StoryContext } from '@storybook/csf';
+
+export default {
+  component: null,
+  decorators: [
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ component: globalThis.Components.Pre, args: { object: context.args } }),
+  ],
+};
+
+export const MutuallyExclusiveModes = {
+  argTypes: {
+    mutuallyExclusiveA: { control: 'text', if: { arg: 'mutuallyExclusiveB', truthy: false } },
+    mutuallyExclusiveB: { control: 'text', if: { arg: 'mutuallyExclusiveA', truthy: false } },
+  },
+};
+
+export const ToggleControl = {
+  argTypes: {
+    colorMode: {
+      control: 'boolean',
+    },
+    dynamicText: {
+      if: { arg: 'colorMode', truthy: false },
+      control: 'text',
+    },
+    dynamicColor: {
+      if: { arg: 'colorMode' },
+      control: 'color',
+    },
+  },
+};
+
+export const ToggleExpandCollapse = {
+  argTypes: {
+    advanced: {
+      control: 'boolean',
+    },
+    margin: {
+      control: 'number',
+      if: { arg: 'advanced' },
+    },
+    padding: {
+      control: 'number',
+      if: { arg: 'advanced' },
+    },
+    cornerRadius: {
+      control: 'number',
+      if: { arg: 'advanced' },
+    },
+  },
+};
+
+export const GlobalBased = {
+  argTypes: {
+    ifThemeExists: { control: 'text', if: { global: 'theme' } },
+    ifThemeNotExists: { control: 'text', if: { global: 'theme', exists: false } },
+    ifLightTheme: { control: 'text', if: { global: 'theme', eq: 'light' } },
+    ifNotLightTheme: { control: 'text', if: { global: 'theme', neq: 'light' } },
+  },
+};

code/addons/controls/template/stories/disable.stories.ts

@@ -0,0 +1,22 @@
+import globalThis from 'global';
+import { PartialStoryFn, StoryContext } from '@storybook/csf';
+
+export default {
+  component: null,
+  decorators: [
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ component: globalThis.Components.Pre, args: { object: context.args } }),
+  ],
+};
+
+export const DisableTable = {
+  args: { a: 'a', b: 'b' },
+  argTypes: {
+    b: { table: { disable: true } },
+  },
+};
+
+export const DisableControl = {
+  args: { a: 'a', b: 'b' },
+  b: { control: { disable: true } },
+};

code/addons/controls/template/stories/filters.stories.ts

@@ -0,0 +1,47 @@
+import globalThis from 'global';
+import { PartialStoryFn, StoryContext } from '@storybook/csf';
+
+export default {
+  component: null,
+  decorators: [
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ component: globalThis.Components.Pre, args: { object: context.args } }),
+  ],
+  args: {
+    helloWorld: 1,
+    helloPlanet: 1,
+    byeWorld: 1,
+  },
+};
+
+export const IncludeList = {
+  parameters: {
+    controls: {
+      include: ['helloWorld'],
+    },
+  },
+};
+
+export const IncludeRegex = {
+  parameters: {
+    controls: {
+      include: /hello*/,
+    },
+  },
+};
+
+export const ExcludeList = {
+  parameters: {
+    controls: {
+      exclude: ['helloPlanet', 'helloWorld'],
+    },
+  },
+};
+
+export const ExcludeRegex = {
+  parameters: {
+    controls: {
+      exclude: /hello*/,
+    },
+  },
+};

code/addons/controls/template/stories/issues.stories.ts

@@ -0,0 +1,16 @@
+import globalThis from 'global';
+import { PartialStoryFn, StoryContext } from '@storybook/csf';
+
+export default {
+  component: null,
+  decorators: [
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ component: globalThis.Components.Pre, args: { object: context.args } }),
+  ],
+};
+
+// https://github.com/storybookjs/storybook/issues/14752
+export const MissingRadioOptions = {
+  argTypes: { invalidRadio: { control: 'radio' } },
+  args: { invalidRadio: 'someValue' },
+};

code/addons/controls/template/stories/matchers.stories.ts

@@ -0,0 +1,39 @@
+import globalThis from 'global';
+import { PartialStoryFn, StoryContext } from '@storybook/csf';
+
+export default {
+  component: null,
+  decorators: [
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ component: globalThis.Components.Pre, args: { object: context.args } }),
+  ],
+};
+
+export const CustomMatchers = {
+  parameters: {
+    controls: {
+      matchers: {
+        date: /whateverIwant/,
+      },
+    },
+    docs: { source: { state: 'open' } },
+  },
+  args: {
+    whateverIwant: '10/10/2020',
+  },
+};
+
+export const DisabledMatchers = {
+  parameters: {
+    controls: {
+      matchers: {
+        date: null,
+        color: null,
+      },
+    },
+  },
+  args: {
+    purchaseDate: '10/10/2020',
+    backgroundColor: '#BADA55',
+  },
+};