feat: Add label configuration file

kimseungbin commented 22 hours ago

Summary by CodeRabbit

New Features
- Enhanced label configuration management with new type definitions for colors and label names.
- Introduced a constant for predefined color codes and updated label configurations for major, minor, and patch versions.
- Implemented color validation and accessibility checks for label contrast.
Improvements
- Updated the LabelChecker class to dynamically load and validate label configurations.
Tests
- Added unit tests for color utility functions to ensure robustness and correctness.
Documentation
- Improved the README to enhance the presentation of label color representations.

Close #6

coderabbitai[bot] commented 22 hours ago

Walkthrough

The pull request introduces enhancements to label configuration management in the repository. A new LabelConfig interface and a constant labelConfigs are defined in src/label-config.ts, organizing label configurations for major, minor, and patch versions. The src/color-utils.ts file adds functions for validating and manipulating hex color codes. The LabelChecker class in src/label-checker.ts is updated to utilize dynamic label configurations instead of hardcoded values, incorporating validation logic. Unit tests for color utility functions are added in src/color-utils.spec.ts.

Changes

File	Change Summary
src/label-config.ts	Added `LabelConfig` interface and `labelConfigs` constant with predefined configurations.
src/color-utils.ts	Introduced functions for color validation and manipulation: `isHexColorCode`, `validateColorCode`, `hexToRgb`, `getLuminance`, `getContrastRatio`, `hasAccessibleContrast`.
src/label-checker.ts	Updated `LabelChecker` to import `labelConfigs` and added validation logic for dynamic labels.
src/color-utils.spec.ts	Added unit tests for `isHexColorCode`, `validateColorCode`, and `hasAccessibleContrast`.

Assessment against linked issues

Objective	Addressed	Explanation
Move label configurations to a separate file (#6)	✅
Support for different label sets for different purposes (#6)	✅
Easier modification of label configurations (#6)	✅
Addition of validation for color codes (#6)	✅	Validation logic implemented.
Future support for user-defined configurations (#6)	❓	User-defined configurations not yet implemented.

Possibly related issues

#10: The changes enhance the validation logic in label-config.ts, aligning with the request for improved validation.
#7: The modifications to LabelChecker partially address the need for dynamic label configurations instead of hardcoded values.
#5: The structured management of labels through labelConfigs supports the future implementation of user-defined configurations.
#3: The predefined labels in labelConfigs align with the request to create labels for issues and PRs.

Poem

🐰 In the meadow where labels bloom,
A new config chases away the gloom.
Colors bright for each version's cheer,
Major, minor, patch—oh dear!
With structure now, we hop with glee,
Labeling joyfully, come see! 🌼

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

🪧 Tips

### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit , please review it.` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (Invoked using PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. ### Other keywords and placeholders - Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. - Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description. - Add `@coderabbitai` anywhere in the PR title to generate the title automatically. ### Documentation and Community - Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit. - Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

kimseungbin commented 22 hours ago

@coderabbitai Help me creating a validation utility for the color codes. Include:

Validation for 6-character hex codes
Color contrast checking for accessibility
TypeScript type guards

coderabbitai[bot] commented 22 hours ago

[!TIP] For best results, initiate chat on the files or code changes.

@kimseungbin

Certainly! Here's a validation utility for the color codes that includes:

Validation for 6-character hex codes
Color contrast checking for accessibility
TypeScript type guards

// src/color-utils.ts

// Type guard to check if a string is a valid 6-character hex color code
export function isHexColorCode(color: string): color is `#${string}` {
  const hexRegex = /^#[0-9A-Fa-f]{6}$/;
  return hexRegex.test(color);
}

// Function to validate color codes using the type guard
export function validateColorCode(color: string): void {
  if (!isHexColorCode(color)) {
    throw new Error(`Invalid color code: ${color}. It must be a 6-character hex code starting with '#'.`);
  }
}

// Helper function to convert hex color code to RGB values
function hexToRgb(hex: string): { r: number; g: number; b: number } {
  const sanitizedHex = hex.replace('#', '');
  const bigint = parseInt(sanitizedHex, 16);
  return {
    r: (bigint >> 16) & 255,
    g: (bigint >> 8) & 255,
    b: bigint & 255,
  };
}

// Function to calculate the relative luminance of a color
function getLuminance(r: number, g: number, b: number): number {
  const [rsrgb, gsrgb, bsrgb] = [r, g, b].map((v) => {
    v /= 255;
    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * rsrgb + 0.7152 * gsrgb + 0.0722 * bsrgb;
}

// Function to calculate the contrast ratio between two colors
function getContrastRatio(foreground: string, background: string): number {
  const fgRgb = hexToRgb(foreground);
  const bgRgb = hexToRgb(background);

  const fgLuminance = getLuminance(fgRgb.r, fgRgb.g, fgRgb.b);
  const bgLuminance = getLuminance(bgRgb.r, bgRgb.g, bgRgb.b);

  const lighter = Math.max(fgLuminance, bgLuminance);
  const darker = Math.min(fgLuminance, bgLuminance);

  return (lighter + 0.05) / (darker + 0.05);
}

// Function to check color contrast for accessibility based on WCAG AA standards
export function hasAccessibleContrast(
  foreground: string,
  background: string,
  largeText: boolean = false
): boolean {
  validateColorCode(foreground);
  validateColorCode(background);

  const contrastRatio = getContrastRatio(foreground, background);
  const minimumContrast = largeText ? 3.0 : 4.5;

  return contrastRatio >= minimumContrast;
}

Explanation:

Type Guards:
- isHexColorCode is a type guard that ensures the string is a valid 6-character hex code starting with #.
- It allows TypeScript to infer the type after validation.
Validation Function:
- validateColorCode uses the type guard to throw an error if the color code is invalid.
- This ensures that only valid hex color codes are used.
Color Contrast Checking:
- hasAccessibleContrast calculates the contrast ratio between two colors.
- It uses the WCAG (Web Content Accessibility Guidelines) standards.
- A contrast ratio of at least 4.5:1 is required for normal text.
- A contrast ratio of at least 3:1 is acceptable for large text.
- The function returns true if the contrast ratio meets the accessibility standards.

Usage Example:

// src/label-config.ts

import { LabelConfig } from './label-config';
import { validateColorCode, hasAccessibleContrast } from './color-utils';

const backgroundColor = '#FFFFFF'; // Assuming a white background

// Validate and process label configurations
labelConfigs.forEach((label) => {
  try {
    validateColorCode(label.color);

    if (!hasAccessibleContrast(label.color, backgroundColor)) {
      console.warn(
        `The color ${label.color} for label "${label.name}" does not have sufficient contrast with the background color ${backgroundColor}.`
      );
      // Handle the insufficient contrast (e.g., adjust the color or notify the user)
    }
  } catch (error) {
    console.error(error.message);
    // Handle the invalid color code (e.g., skip this label or fix the color code)
  }
});

Notes:

Replace backgroundColor with the actual background color used in your application.
Adjust the largeText parameter in hasAccessibleContrast if the labels use large text.
The utility functions help ensure that all label colors are valid and accessible.

Let me know if you need further assistance or modifications!

kimseungbin commented 18 hours ago

@codoerabbitai update PR title

kimseungbin / tag-and-release