feat: include/exclude controls as function

Author: atanasster

core/core/src/common.ts

@@ -1,8 +1,12 @@
 import { ElementType } from 'react';
 import { deepMerge } from './deepMerge';
 import { StoryRenderFn } from './utility';
-import { ComponentControls } from './controls';
+import { ComponentControls, ComponentControl } from './controls';
+import { PropType } from './components';
 
+export type IncludeFn = (
+  control: { name: string; prop?: PropType } & ComponentControl,
+) => boolean;
 export interface SmartControls {
   /**
    * whether to generate "smart" controls for a story
@@ -11,12 +15,12 @@ export interface SmartControls {
   /**
    * include props only
    */
-  include?: string[];
+  include?: string[] | IncludeFn;
 
   /**
    * exclude props only
    */
-  exclude?: string[];
+  exclude?: string[] | IncludeFn;
 }
 
 /**

core/core/src/controls-utils.ts

@@ -440,9 +440,19 @@ export const getStoryControls = (
           if (Array.isArray(include) && !include.includes(key)) {
             return false;
           }
+          if (typeof include === 'function') {
+            const prop = component.info?.props[key];
+            return include({ name: key, ...newControls[key], prop });
+          }
+
           if (Array.isArray(exclude) && exclude.includes(key)) {
             return false;
           }
+
+          if (typeof exclude === 'function') {
+            const prop = component.info?.props[key];
+            return !exclude({ name: key, ...newControls[key], prop });
+          }
           if (usedProps && !usedProps.includes(key)) {
             return false;
           }

examples/stories/src/stories/VariantButton/VariantButton.stories.tsx

@@ -26,6 +26,9 @@ export default {
     },
   },
   description: `This example demonstrates documenting a hypothetical Button component that supports variants, icons, text, and padding`,
+  smartControls: {
+    include: p => p.prop?.parentName === 'VariantButtonProps',
+  },
 } as Document;
 
 export const overview: Example<VariantButtonProps> = props => (

examples/stories/src/stories/VariantButton/VariantButton.tsx

@@ -108,7 +108,8 @@ export interface VariantButtonProps {
 /**
  * Button with variants
  */
-export const VariantButton: FC<VariantButtonProps> = ({
+export const VariantButton: FC<VariantButtonProps &
+  React.HTMLProps<HTMLButtonElement>> = ({
   text,
   fontSize = 18,
   iconSize = 'small',