[Storybook] Add stories for more components (letter P) - Part 1

.storybook/utils.ts

@@ -11,6 +11,7 @@
  */
 
 import type { Args, ArgTypes, Meta, Preview, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
 
 type StorybookConfig<T> = Meta<T> | StoryObj<T> | Preview;
 
@@ -27,10 +28,12 @@ export const hideStorybookControls = <Props>(
   config: StorybookConfig<Props>,
   propNames: Array<keyof Props>
 ): StorybookConfig<Props> => {
-  const updatedConfig = _updateArgTypes(config, propNames, {
-    key: 'table',
-    value: { disable: true },
-  });
+  const updatedConfig = _updateArgTypes(config, propNames, [
+    {
+      key: 'table',
+      value: { disable: true },
+    },
+  ]);
 
   return updatedConfig;
 };
@@ -49,10 +52,12 @@ export const disableStorybookControls = <Props>(
   config: StorybookConfig<Props>,
   propNames: Array<keyof Props>
 ): StorybookConfig<Props> => {
-  const updatedConfig = _updateArgTypes(config, propNames, {
-    key: 'control',
-    value: false,
-  });
+  const updatedConfig = _updateArgTypes(config, propNames, [
+    {
+      key: 'control',
+      value: false,
+    },
+  ]);
 
   return updatedConfig;
 };
@@ -72,11 +77,44 @@ export const moveStorybookControlsToCategory = <Props>(
   propNames: Array<keyof Props>,
   category = 'Additional'
 ): StorybookConfig<Props> => {
-  const updatedConfig = _updateArgTypes(config, propNames, {
-    key: 'table',
-    value: { category },
+  const updatedConfig = _updateArgTypes(config, propNames, [
+    {
+      key: 'table',
+      value: { category },
+    },
+  ]);
+
+  return updatedConfig;
+};
+
+/**
+ * Configures passed argTypes to be setup as toggle control
+ * which fires a Storybook action when enabled.
+ * Should be used for function props only.
+ *
+ * Can be used for preview (Preview), component (Meta) or story (Story)
+ * context by passing the config object for either. Use after defining
+ * the specific config to be able to pass the config to this util.
+ *
+ * @returns the mutated config
+ */
+export const enableFunctionToggleControls = <Props>(
+  config: StorybookConfig<Props>,
+  propNames: Array<keyof Props>
+) => {
+  const setAction = (propName: string | number) => ({
+    true: action(propName.toString()),
+    false: undefined,
   });
 
+  const updatedConfig = _updateArgTypes(config, propNames, [
+    { key: 'control', value: 'boolean' },
+    {
+      key: 'mapping',
+      value: setAction,
+    },
+  ]);
+
   return updatedConfig;
 };
 
@@ -112,29 +150,43 @@ export const hidePanel = {
 const _updateArgTypes = <Props>(
   config: StorybookConfig<Props>,
   propNames: Array<keyof Props>,
-  {
-    key,
-    value,
-  }: { key: string; value: Record<string, string | boolean> | boolean }
+  controls: Array<{
+    key: string;
+    value:
+      | Record<string, any>
+      | boolean
+      | string
+      | ((propName: any) => Record<string, any>);
+  }>
 ): StorybookConfig<Props> => {
   const currentArgTypes = config.argTypes as Partial<ArgTypes<Props>>;
   const newArgTypes = { ...currentArgTypes };
 
   for (const propName of propNames) {
-    const currentArgTypeValue = newArgTypes?.[propName] ?? ({} as Args);
-    const currentControlValue = currentArgTypeValue.hasOwnProperty(key)
-      ? currentArgTypeValue[key]
-      : ({} as Record<string, any>);
-
-    const newValue =
-      typeof value === 'object' && typeof currentArgTypeValue[key] === 'object'
-        ? { ...currentControlValue, ...value }
-        : value;
-
-    newArgTypes[propName] = {
-      ...currentArgTypeValue,
-      [key]: newValue,
-    };
+    for (const { key, value } of controls) {
+      const currentArgTypeValue = newArgTypes?.[propName] ?? ({} as Args);
+      const currentControlValue = currentArgTypeValue.hasOwnProperty(key)
+        ? currentArgTypeValue[key]
+        : ({} as Record<string, any>);
+
+      let newValue = value;
+
+      if (typeof value === 'function') {
+        newValue = value(propName);
+      }
+
+      if (
+        typeof value === 'object' &&
+        typeof currentArgTypeValue[key] === 'object'
+      ) {
+        newValue = { ...currentControlValue, ...value };
+      }
+
+      newArgTypes[propName] = {
+        ...currentArgTypeValue,
+        [key]: newValue,
+      };
+    }
   }
 
   config.argTypes = newArgTypes;