feat: add code block component stories with syntax highlighting and v… #48
Conversation
|
🤖 Reviewers have been automatically assigned based on the CODEOWNERS file. If you need different reviewers, please update manually. |
✅ PR Size Check PassedThis PR changes 2988 lines across 6 files. |
|
📄 Description Added new Storybook and UI files (.stories.tsx) for the following components: code-block 🛠 Changes Storybook files: Created under devapps/storybook/stories to provide visual documentation and testing for the new UI components. |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| return { h: h * 360, s: s * 100, l: l * 100 }; | ||
| }; | ||
|
|
||
| const hslToRgb = (h: number, s: number, l: number): { r: number; g: number; b: number } => { |
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI about 1 month ago
To resolve this warning, we should remove the unused function hslToRgb from the file. This involves deleting the block of code that defines hslToRgb, which begins at line 95 and ends at line 122. Since this function is not referenced elsewhere in the provided code, no further changes are required and no imports, methods, or definitions need to be updated to accommodate its removal.
| @@ -92,35 +92,8 @@ | ||
| return { h: h * 360, s: s * 100, l: l * 100 }; | ||
| }; | ||
|
|
||
| const hslToRgb = (h: number, s: number, l: number): { r: number; g: number; b: number } => { | ||
| h /= 360; | ||
| s /= 100; | ||
| l /= 100; | ||
|
|
||
| const hue2rgb = (p: number, q: number, t: number): number => { | ||
| if (t < 0) t += 1; | ||
| if (t > 1) t -= 1; | ||
| if (t < 1/6) return p + (q - p) * 6 * t; | ||
| if (t < 1/2) return q; | ||
| if (t < 2/3) return p + (q - p) * (2/3 - t) * 6; | ||
| return p; | ||
| }; | ||
|
|
||
| let r, g, b; | ||
|
|
||
| if (s === 0) { | ||
| r = g = b = l; // achromatic | ||
| } else { | ||
| const q = l < 0.5 ? l * (1 + s) : l + s - l * s; | ||
| const p = 2 * l - q; | ||
| r = hue2rgb(p, q, h + 1/3); | ||
| g = hue2rgb(p, q, h); | ||
| b = hue2rgb(p, q, h - 1/3); | ||
| } | ||
|
|
||
| return { r: r * 255, g: g * 255, b: b * 255 }; | ||
| }; | ||
|
|
||
| const rgbToHsv = (r: number, g: number, b: number): { h: number; s: number; v: number } => { | ||
| r /= 255; | ||
| g /= 255; |
|
|
||
| const currentColor = value !== undefined ? value : internalValue; | ||
| const rgb = hexToRgb(currentColor); | ||
| const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b); |
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI about 1 month ago
The best way to fix the problem is to remove the declaration of the unused variable hsl from the code. This means deleting or commenting out the line that assigns a value to hsl (line 203). No further changes are necessary since no code relies on hsl in the provided snippet, so this can be safely done without affecting existing functionality.
You only need to edit the line:
- In
packages/design-system/ui/color-picker.tsx, remove the line:
const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);(line 203)
No additional definitions, imports, or code changes are required.
| @@ -200,7 +200,6 @@ | ||
|
|
||
| const currentColor = value !== undefined ? value : internalValue; | ||
| const rgb = hexToRgb(currentColor); | ||
| const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b); | ||
| const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b); | ||
|
|
||
| const [hue, setHue] = React.useState(hsv.h); |
…ariants
Pull Request
Description
Please provide a brief description of the changes introduced in this pull request.
Type of Change
Related Issues
Closes #<issue_number>
Branch Naming
feat/,fix/,docs/,hotfix/, etc.)Checklist
pnpm lintandpnpm testScreenshots (if applicable)
Additional Notes