BAH-4747 | [Storybook]: Consistent update for composite controls

[komalsharma225]

Summary

Enhance Storybook documentation for control stories by adding professional, auto-generated documentation following the Carbon Design System pattern. Stories now include comprehensive prop descriptions, type information, and usage guidance.

Changes

New Files

• stories/_meta/ — 5 reusable metadata files with descriptions and argTypes:
  • obsControlMeta.js — ObsControl documentation and prop definitions
  • abnormalObsControlMeta.js — AbnormalObsControl documentation
  • sectionMeta.js — Section documentation
  • multiSelectMeta.js — MultiSelect documentation
  • formsMeta.js — Forms documentation

Modified Files

• .storybook/main.js — Added MDX file support (../stories/**/*.mdx)
• stories/StoryWrapper.js — Added optional showDebug prop (defaults to false) for clean default views with optional debug variants
• stories/ObsControl.stories.js — Imported metadata, added tags: ['autodocs'] for auto-generated docs
• stories/AbnormalObsControl.stories.js — Imported metadata, added autodocs support, added component: reference
• stories/Section.stories.js — Imported metadata, added autodocs support, removed unused React import
• stories/MultiSelect.stories.js — Imported metadata, added autodocs support, added component: reference
• stories/Forms.stories.js — Imported metadata, added autodocs support, added component: reference

Acceptance Criteria Met

• ✅ AC BN-171 | Add. RTL + Jest Based Unit Tests Replacing Enzyme #2 — Story descriptions: All 5 controls now have comprehensive descriptions imported from _meta/*.js
• ✅ AC BN-172 | Add. Upgrade Webpack, Babel And Eslint Config #3 — Props documentation: Complete argTypes with descriptions, types, and defaults for all control props
• ✅ AC BN-149 | Upgrade from React17 to React18 #4 — Auto-generated docs: Added tags: ['autodocs'] to enable professional Docs tabs (Carbon Design System style)
• ✅ AC BN-199 | Upgrade React18 to React19 #5 — Clean default view: StoryWrapper refactored with optional debug toggle; default is clean (no JSON tree)
• ✅ AC Changed library name to forms2-control and updated npm publish workflow to publish dev versions #7 — All affected controls enhanced: ObsControl, AbnormalObsControl, Section, MultiSelect, Forms

Technical Details

Metadata Pattern

Each _meta/*.js file exports:

export const description = '...'; // Markdown string explaining control purpose, usage, examples
export const argTypes = { ... }; // Storybook argTypes format with descriptions

Story Wiring

Each story file imports metadata:

import { description, argTypes } from './_meta/controlMeta';

export default {
  title: 'Complex Controls/ControlName',
  component: ControlComponent,
  tags: ['autodocs'],
  argTypes,
  parameters: {
    docs: {
      description: { component: description },
    },
  },
};

Backward Compatibility

• StoryWrapper changes are fully backward compatible (default showDebug: false)
• Existing stories continue to render without modification
• New WithDebugView variants are optional additions

Testing

• ✅ Storybook builds successfully with all 5 updated stories
• ✅ Docs tabs auto-generate correctly with imported descriptions and argTypes
• ✅ Stories render without errors
• ✅ No console warnings related to missing props or metadata
• ✅ Clean default view works (no JSON tree by default)

Visual Improvements

Before: Basic stories with minimal documentation
After: Professional, auto-generated docs with complete prop tables and usage guidance (Carbon Design System style)