feat: border color support rgb pattern

README.md

@@ -158,9 +158,9 @@ export default () => {
 | autoComplete | string | "off" | Determines if browser should provide value suggestions. |
 | autoFocus | boolean | false | If true the input will be focused on the first mount. |
 | autoTab | boolean | true | If true focus will move automatically to the next/previous input once filled or deleted |
-| errorBorderColor | string |  | Let you customize border color when the input is invalid. (string **MUST** be hex code.)
-| focusBorderColor | string |  | Let you customize border color when the input is focused. (string **MUST** be hex code.)
-| validBorderColor | string |  | Let you customize border color when the input is valid. (string **MUST** be hex code.)
+| errorBorderColor | string |  | Let you customize border color when the input is invalid.
+| focusBorderColor | string |  | Let you customize border color when the input is focused.
+| validBorderColor | string |  | Let you customize border color when the input is valid.
 | disabled | boolean |  | Renders component in disabled state. |
 | format | (char: string) => string |  | Pure function to transform raw input. |
 | id | string |  | Id attribute value to be added to the input element and as a label's for attribute value. |

src/stories/PinInput.stories.tsx

@@ -95,6 +95,15 @@ Disabled.args = {
   disabled: true,
 };
 
+export const BorderColor = Template.bind({});
+
+BorderColor.args = {
+  values: ['', '', '', ''],
+  errorBorderColor: 'rgb(220, 53, 69)',
+  focusBorderColor: '#0d6efd',
+  validBorderColor: 'rgb(25, 135, 84)',
+};
+
 export const CustomStyle = Template.bind({});
 
 CustomStyle.args = {

src/styles/PinInputField.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { hexToRgb } from '../utils';
+import { colorParser } from '../utils';
 
 export const Input = styled.input<{
   completed: boolean;
@@ -64,7 +64,7 @@ export const Input = styled.input<{
     margin-right: 0;
   }
   ${({ completed, showState, validBorderColor }) => {
-    const rgb = hexToRgb(validBorderColor);
+    const rgb = colorParser(validBorderColor);
 
     return completed && showState
       ? `&:valid {
@@ -81,7 +81,7 @@ export const Input = styled.input<{
       : '';
   }}
   ${({ showState, errorBorderColor }) => {
-    const rgb = hexToRgb(errorBorderColor);
+    const rgb = colorParser(errorBorderColor);
 
     return showState
       ? `&:invalid {

src/tests/utils.test.ts

@@ -1,4 +1,4 @@
-import { validateToPattern, hexToRgb } from '../utils';
+import { validateToPattern, colorParser } from '../utils';
 
 describe('validateToPattern', () => {
   it('should return correct pattern', () => {
@@ -12,18 +12,26 @@ describe('validateToPattern', () => {
   });
 });
 
-describe('hexToRgb', () => {
-  it('should return correct rgb number', () => {
-    expect(hexToRgb('05fc41')).toEqual({ r: 5, g: 252, b: 65 });
-    expect(hexToRgb('#05fc41')).toEqual({ r: 5, g: 252, b: 65 });
-    expect(hexToRgb('#05FC41')).toEqual({ r: 5, g: 252, b: 65 });
-    expect(hexToRgb('#FFF')).toEqual({ r: 255, g: 255, b: 255 });
-    expect(hexToRgb('#09C')).toEqual({ r: 0, g: 153, b: 204 });
+describe('colorParser', () => {
+  it('should return correct rgb number if arg is rgb pattern', () => {
+    expect(colorParser('rgb(5,252,65)')).toEqual({ r: 5, g: 252, b: 65 });
+    expect(colorParser('rgb(5, 252, 65)')).toEqual({ r: 5, g: 252, b: 65 });
+  });
+
+  it('should return correct rgb number if arg is hex pattern', () => {
+    expect(colorParser('05fc41')).toEqual({ r: 5, g: 252, b: 65 });
+    expect(colorParser('#05fc41')).toEqual({ r: 5, g: 252, b: 65 });
+    expect(colorParser('#05FC41')).toEqual({ r: 5, g: 252, b: 65 });
+    expect(colorParser('#FFF')).toEqual({ r: 255, g: 255, b: 255 });
+    expect(colorParser('#09C')).toEqual({ r: 0, g: 153, b: 204 });
   });
 
   it('should return null', () => {
-    expect(hexToRgb('#05GC41')).toBeNull();
-    expect(hexToRgb('#05FC411')).toBeNull();
-    expect(hexToRgb(undefined)).toBeNull();
+    expect(colorParser('rgb(5,252,65')).toBeNull();
+    expect(colorParser('rgb(5,252,)')).toBeNull();
+    expect(colorParser('rgb(5,2522,65)')).toBeNull();
+    expect(colorParser('#05GC41')).toBeNull();
+    expect(colorParser('#05FC411')).toBeNull();
+    expect(colorParser(undefined)).toBeNull();
   });
 });

src/utils.ts

@@ -14,18 +14,31 @@ export const validateToPattern = (
     return undefined;
   }
 };
-export const hexToRgb = (hex: string): { r: number; g: number; b: number } => {
-  if (hex === undefined) return null;
-  const shorthand = /^#?[a-fA-Z\d]{3}$/i.test(hex);
-  const result = shorthand
-    ? /^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(hex)
-    : /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+export const colorParser = (
+  color: string
+): { r: number; g: number; b: number } => {
+  if (color === undefined) return null;
 
-  return result
-    ? {
-        r: parseInt(shorthand ? result[1] + result[1] : result[1], 16),
-        g: parseInt(shorthand ? result[2] + result[2] : result[2], 16),
-        b: parseInt(shorthand ? result[3] + result[3] : result[3], 16),
-      }
-    : null;
+  const match = color.match(/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/);
+
+  if (match) {
+    return {
+      r: Number(match[1]),
+      g: Number(match[2]),
+      b: Number(match[3]),
+    };
+  } else {
+    const shorthand = /^#?[a-fA-Z\d]{3}$/i.test(color);
+    const result = shorthand
+      ? /^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(color)
+      : /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
+
+    return result
+      ? {
+          r: parseInt(shorthand ? result[1] + result[1] : result[1], 16),
+          g: parseInt(shorthand ? result[2] + result[2] : result[2], 16),
+          b: parseInt(shorthand ? result[3] + result[3] : result[3], 16),
+        }
+      : null;
+  }
 };