[Bug]: Refactor Needed for Long Function parseValue in Color.tsx

[leyvae]

Describe the bug

The parseValue function in Color.tsx is relatively lengthy and takes on multiple responsibilities, which could benefit from alignment with the single responsibility principle. Refactoring the function into smaller, more focused components, would enhance readability, maintainability, and testability, ultimately supporting best practices for code quality.

Reproduction link

https://github.com/storybookjs/storybook/blob/next/code/lib/blocks/src/controls/Color.tsx

Reproduction steps

1. Open the Color.tsx file in the Storybook repository.
2. Navigate to the parseValue function.
3. Observe how the function handles multiple responsibilities, including:

• Parsing various color formats (HEX, RGB, HSL).
• Validating input values.
• Generating fallback colors for invalid inputs.

Expected Behavior:
The function should be refactored into smaller, single-purpose functions, such as:

• A function to handle color validation.
• A function to parse specific color formats (e.g., one for HEX, another for RGB).
• A function to generate fallback colors.

Potential Solutions:

• Split the parseValue function into smaller, reusable functions:

• validateColor(value: string): boolean
• parseHex(value: string): ParsedColor
• parseRgb(value: string): ParsedColor
• generateFallbackColor(): ParsedColor

• Add appropriate unit tests for each of the new functions to ensure reliability.

System

Storybook Environment Info:

  System:
    OS: Linux 5.14 Rocky Linux 9.4 (Blue Onyx)
    CPU: (8) x64 Intel(R) Xeon(R) Gold 6226R CPU @ 2.90GHz
    Shell: 5.1.8 - /bin/bash
  Binaries:
    Node: 18.20.5 - ~/.nvm/versions/node/v18.20.5/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v18.20.5/bin/npm <----- active
  Browsers:
    Chrome: 131.0.6778.85

Additional context

No response