Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add hex color validation #308

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion library/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ All notable changes to the library will be documented in this file.

## vX.X.X (Month DD, YYYY)

- Add `hex` validation function (pull request #304)
- Add `hex`, `hexColor` validation function (pull request #304, #308)

## v0.24.1 (December 11, 2023)

Expand Down
6 changes: 6 additions & 0 deletions library/src/regex.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,12 @@ export const EMOJI_REGEX = /^[\p{Extended_Pictographic}\p{Emoji_Component}]+$/u;
*/
export const HEX_REGEX = /^(0h|0x)?[\da-f]+$/iu;

/**
* [Hex color](https://en.wikipedia.org/wiki/Web_colors#Hex_triplet) regex.
*/
export const HEX_COLOR_REGEX =
/^#([\da-f]{3}|[\da-f]{4}|[\da-f]{6}|[\da-f]{8})$/iu;

/**
* [IMEI](https://en.wikipedia.org/wiki/International_Mobile_Equipment_Identity) regex.
*/
Expand Down
45 changes: 45 additions & 0 deletions library/src/validations/hexColor/hexColor.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { describe, expect, test } from 'vitest';
import { hexColor } from './hexColor.ts';

describe('hexColor', () => {
test('should pass only a finite number', () => {
const validate = hexColor();

const value1 = '#FFFFFF';
expect(validate._parse(value1).output).toBe(value1);
const value2 = '#000000';
expect(validate._parse(value2).output).toBe(value2);
const value3 = '#FF5733';
expect(validate._parse(value3).output).toBe(value3);
const value4 = '#FF5';
expect(validate._parse(value4).output).toBe(value4);
const value5 = '#336699';
expect(validate._parse(value5).output).toBe(value5);
const value6 = '#abcdef';
expect(validate._parse(value6).output).toBe(value6);
const value7 = '#123456';
expect(validate._parse(value7).output).toBe(value7);
const value8 = '#123ABC';
expect(validate._parse(value8).output).toBe(value8);
const value9 = '#000000ff';
expect(validate._parse(value9).output).toBe(value9);

expect(validate._parse('').issues).toBeTruthy();
expect(validate._parse('#').issues).toBeTruthy();
expect(validate._parse('123456').issues).toBeTruthy();
expect(validate._parse('#GHIJKL').issues).toBeTruthy();
expect(validate._parse('#12345').issues).toBeTruthy();
expect(validate._parse('#123456789').issues).toBeTruthy();
expect(validate._parse('#00 00FF').issues).toBeTruthy();
expect(validate._parse('##0000FF').issues).toBeTruthy();
expect(validate._parse('#000FFZ').issues).toBeTruthy();
expect(validate._parse('#12345G').issues).toBeTruthy();
expect(validate._parse('#!23456').issues).toBeTruthy();
});

test('should return custom error message', () => {
const error = 'Value is not a hexadecimal color value!';
const validate = hexColor(error);
expect(validate._parse('test').issues?.[0].message).toBe(error);
});
});
41 changes: 41 additions & 0 deletions library/src/validations/hexColor/hexColor.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { HEX_COLOR_REGEX } from './../../regex.ts';
import type { BaseValidation, ErrorMessage } from '../../types/index.ts';
import { actionIssue, actionOutput } from '../../utils/index.ts';

/**
* Hex color validation type.
*/
export type HexColorValidation<TInput extends string> =
BaseValidation<TInput> & {
/**
* The validation type.
*/
type: 'hex_color';
/**
* The hex color regex.
*/
requirement: RegExp;
};

/**
* Creates a validation function that validates hex color string.
*
* @param message The error message.
*
* @returns A validation function.
*/
export function hexColor<TInput extends string>(
message: ErrorMessage = 'Invalid hex color'
): HexColorValidation<TInput> {
return {
type: 'hex_color',
async: false,
message,
requirement: HEX_COLOR_REGEX,
_parse(input: TInput) {
return !this.requirement.test(input)
? actionIssue(this.type, this.message, input, this.requirement)
: actionOutput(input);
},
};
}
1 change: 1 addition & 0 deletions library/src/validations/hexColor/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './hexColor.ts';
1 change: 1 addition & 0 deletions library/src/validations/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ export * from './equal/index.ts';
export * from './excludes/index.ts';
export * from './finite/index.ts';
export * from './hex/index.ts';
export * from './hexColor/index.ts';
export * from './imei/index.ts';
export * from './includes/index.ts';
export * from './integer/integer.ts';
Expand Down
1 change: 1 addition & 0 deletions website/src/routes/api/(schemas)/any/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ The following APIs can be combined with `any`.
'excludes',
'finite',
'hex',
'hexColor',
'imei',
'includes',
'integer',
Expand Down
1 change: 1 addition & 0 deletions website/src/routes/api/(schemas)/string/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@ The following APIs can be combined with `string`.
'endsWith',
'excludes',
'hex',
'hexColor',
'imei',
'includes',
'ip',
Expand Down
9 changes: 9 additions & 0 deletions website/src/routes/api/(validations)/hexColor/index.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
title: hexColor
contributors:
- ariskemper
---

# hexColor

> The content of this page is not yet ready. Until then just use the [source code](https://github.com/fabian-hiller/valibot/blob/main/library/src/validations/hexColor/hexColor.ts).
1 change: 1 addition & 0 deletions website/src/routes/api/menu.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@
- [excludes](/api/excludes/)
- [finite](/api/finite/)
- [hex](/api/hex/)
- [hexColor](/api/hexColor/)
- [imei](/api/imei/)
- [includes](/api/includes/)
- [integer](/api/integer/)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ Validation functions examine the input and, if the input does not meet a certain
'excludes',
'finite',
'hex',
'hexColor',
'includes',
'integer',
'ip',
Expand Down
Loading