docs: add deep controls add on

We've integrated the [storybook-addon-deep-controls package](https://github.com/eliasm307/storybook-addon-deep-controls) into our Storybook setup to enhance the developer experience when working with complex, nested object props in our component stories. This addon transforms the way we interact with deeply nested properties by breaking them down into individual, user-friendly controls instead of requiring manual JSON editing.

Author: aresnik11

package.json

@@ -87,6 +87,7 @@
     "prettier": "^2.8.7",
     "react-test-renderer": "18.3.1",
     "storybook": "^8.3.6",
+    "storybook-addon-deep-controls": "^0.9.5",
     "style-loader": "^4.0.0",
     "svgo": "^1.3.2",
     "syncpack": "^10.9.3",

packages/styleguide/.storybook/argTypes/closeButtonProps.tsx

@@ -0,0 +1,62 @@
+const tipAlignmentOptions = [
+  'top-center',
+  'bottom-center',
+  'left-center',
+  'right-center',
+] as const;
+
+export const closeButtonPropsArgTypes = ({
+  defaultTipText,
+  defaultTipAlignment,
+}: {
+  defaultTipText: string;
+  defaultTipAlignment: (typeof tipAlignmentOptions)[number];
+}) =>
+  ({
+    closeButtonProps: {
+      table: {
+        disable: true, // Disable the closeButtonProps property from the storybook table in favor of the nested args
+      },
+    },
+    'closeButtonProps.hidden': {
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+      },
+      description:
+        'Whether to hide the default close button and pass your own through children to close the modal',
+    },
+    'closeButtonProps.ref': {
+      table: {
+        type: { summary: 'React.Ref<HTMLButtonElement>' },
+      },
+      description:
+        'An optional ref to be passed to the close button for programmatic access',
+    },
+    'closeButtonProps.tip': {
+      control: 'text',
+      description: 'The close button tooltip text',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: defaultTipText },
+      },
+    },
+    'closeButtonProps.tipAlignment': {
+      control: 'radio',
+      options: tipAlignmentOptions,
+      description: 'The alignment of the tooltip',
+      table: {
+        type: {
+          summary: tipAlignmentOptions.join(' | '),
+        },
+        defaultValue: { summary: defaultTipAlignment },
+      },
+    },
+    'closeButtonProps.disabled': {
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+      },
+      description: 'Whether to disable the default close button',
+    },
+  } as const);

packages/styleguide/.storybook/argTypes/index.tsx

@@ -0,0 +1,2 @@
+export * from './closeButtonProps';
+export * from './infotip';

packages/styleguide/.storybook/argTypes/infotip.tsx

@@ -0,0 +1,54 @@
+export const infotipNestedArgTypes = {
+  infotip: {
+    table: {
+      disable: true, // Disable the infotip property from the storybook table in favor of the nested args
+    },
+  },
+  'infotip.emphasis': {
+    control: 'radio',
+    options: ['high', 'low'],
+    table: {
+      defaultValue: { summary: 'low' },
+      type: { summary: 'high | low' },
+    },
+  },
+  'infotip.alignment': {
+    control: 'radio',
+    options: ['bottom-left', 'bottom-right', 'top-left', 'top-right'],
+    table: {
+      defaultValue: { summary: 'top-right' },
+      type: { summary: 'bottom-left | bottom-right | top-left | top-right' },
+    },
+  },
+  'infotip.placement': {
+    control: 'radio',
+    options: ['floating', 'inline'],
+    table: {
+      defaultValue: { summary: 'inline' },
+      type: { summary: 'floating | inline' },
+    },
+  },
+  'infotip.narrow': {
+    control: 'boolean',
+    table: {
+      type: { summary: 'boolean' },
+    },
+    description:
+      'Forces the tooltip to be its narrowest width. For use along the edges of the page or other tight spaces.',
+  },
+  'infotip.inheritDims': {
+    control: 'boolean',
+    table: {
+      type: { summary: 'boolean' },
+    },
+    description:
+      'If ToolTipWrapper should inherit the dimensions of the parent element. Can only be used for inline tips.',
+  },
+  'infotip.info': {
+    control: 'text',
+    table: {
+      type: { summary: 'string' },
+    },
+    description: 'The text for the infotip.',
+  },
+} as const;

packages/styleguide/.storybook/main.ts

@@ -12,6 +12,7 @@ const config: StorybookConfig = {
     getAbsolutePath('@nx/react/plugins/storybook', ''),
     getAbsolutePath('@storybook/addon-links'),
     getAbsolutePath('@storybook/addon-designs'),
+    getAbsolutePath('storybook-addon-deep-controls'),
   ],
 
   framework: {
@@ -45,6 +46,7 @@ const config: StorybookConfig = {
       ...config.resolve,
       alias: {
         '~styleguide/blocks': resolve(__dirname, './components/'),
+        '~styleguide/argTypes': resolve(__dirname, './argTypes/'),
         '@codecademy/gamut-styles$': resolve(
           __dirname,
           '../../gamut-styles/src'

packages/styleguide/.storybook/preview.ts

@@ -10,6 +10,7 @@ const preview: Preview = {
     backgrounds: {
       disable: true,
     },
+    deepControls: { enabled: true },
     docs: {
       container: DocsContainer,
       theme: theme,

packages/styleguide/src/lib/Atoms/Badge/Badge.stories.tsx

@@ -9,9 +9,7 @@ const meta: Meta<typeof Badge> = {
   args: { children: 'Badge' },
   argTypes: {
     icon: {
-      control: {
-        type: 'select',
-      },
+      control: 'select',
       options: Object.keys(icons),
       mapping: icons,
     },

packages/styleguide/src/lib/Atoms/Buttons/CTAButton/CTAButton.stories.tsx

@@ -6,17 +6,11 @@ const meta: Meta<typeof CTAButton> = {
   args: {
     children: 'Click Me',
     disabled: false,
-    size: 'normal',
   },
   argTypes: {
     href: {
       description: 'If defined, component will use an anchor tag',
-    },
-    size: {
-      control: {
-        type: 'select',
-        options: ['normal', 'small', 'large'],
-      },
+      type: 'string',
     },
     as: {
       table: {

packages/styleguide/src/lib/Atoms/Buttons/FillButton/FillButton.stories.tsx

@@ -1,5 +1,5 @@
 import { FillButton } from '@codecademy/gamut';
-import { SearchIcon } from '@codecademy/gamut-icons';
+import * as icons from '@codecademy/gamut-icons';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof FillButton> = {
@@ -12,17 +12,16 @@ const meta: Meta<typeof FillButton> = {
   argTypes: {
     href: {
       description: 'If defined, component will use an anchor tag',
+      type: 'string',
     },
     size: {
-      control: {
-        type: 'select',
-        options: ['normal', 'small', 'large'],
-      },
+      control: 'radio',
+      options: ['normal', 'small', 'large'],
     },
     icon: {
-      control: {
-        options: [SearchIcon],
-      },
+      control: 'select',
+      options: Object.keys(icons),
+      mapping: icons,
     },
     as: {
       table: {

packages/styleguide/src/lib/Atoms/Buttons/IconButton/IconButton.stories.tsx

@@ -1,31 +1,28 @@
 import { IconButton } from '@codecademy/gamut';
 import * as icons from '@codecademy/gamut-icons';
 import type { Meta, StoryObj } from '@storybook/react';
+import type { TypeWithDeepControls } from 'storybook-addon-deep-controls';
 
-const meta: Meta<typeof IconButton> = {
+const meta: TypeWithDeepControls<Meta<typeof IconButton>> = {
   component: IconButton,
   args: {
-    children: 'Click Me',
     disabled: false,
     size: 'normal',
     icon: icons.SearchIcon,
     tip: 'ToolTip',
-    tipProps: { placement: 'floating' },
+    tipProps: { placement: 'floating', alignment: 'top-center' },
   },
   argTypes: {
     href: {
       description: 'If defined, component will use an anchor tag',
+      type: 'string',
     },
     size: {
-      control: {
-        type: 'select',
-        options: ['normal', 'small', 'large'],
-      },
+      control: 'radio',
+      options: ['normal', 'small', 'large'],
     },
     icon: {
-      control: {
-        type: 'select',
-      },
+      control: 'select',
       options: Object.keys(icons),
       mapping: icons,
     },
@@ -34,6 +31,14 @@ const meta: Meta<typeof IconButton> = {
         disable: true,
       },
     },
+    'tipProps.placement': {
+      control: 'radio',
+      options: ['floating', 'inline'],
+    },
+    'tipProps.alignment': {
+      control: 'radio',
+      options: ['top-center', 'bottom-center', 'left-center', 'right-center'],
+    },
   },
 };