Add content to maxLength, minLength and url API reference

Co-authored-by: Simon Depelchin <[email protected]>

library/src/actions/url/url.ts

@@ -62,24 +62,24 @@ export interface UrlAction<
 }
 
 /**
- * Creates a [URL](https://en.wikipedia.org/wiki/URL) validation action.
+ * Creates an [URL](https://en.wikipedia.org/wiki/URL) validation action.
  *
  * Hint: The value is passed to the URL constructor to check if it is valid.
  * This check is not perfect. For example, values like "abc:1234" are accepted.
  *
- * @returns A URL action.
+ * @returns An URL action.
  */
 export function url<TInput extends string>(): UrlAction<TInput, undefined>;
 
 /**
- * Creates a [URL](https://en.wikipedia.org/wiki/URL) validation action.
+ * Creates an [URL](https://en.wikipedia.org/wiki/URL) validation action.
  *
  * Hint: The value is passed to the URL constructor to check if it is valid.
  * This check is not perfect. For example, values like "abc:1234" are accepted.
  *
  * @param message The error message.
  *
- * @returns A URL action.
+ * @returns An URL action.
  */
 export function url<
   TInput extends string,

website/src/routes/api/(actions)/maxLength/index.mdx

@@ -1,10 +1,81 @@
 ---
 title: maxLength
+description: Creates a max length validation action.
 source: /actions/maxLength/maxLength.ts
 contributors:
   - fabian-hiller
+  - depsimon
 ---
 
+import { ApiList, Property } from '~/components';
+import { properties } from './properties';
+
 # maxLength
 
-> The content of this page is not yet ready. Until then, please use the [source code](https://github.com/fabian-hiller/valibot/blob/main/library/src/actions/maxLength/maxLength.ts) or take a look at [issue #287](https://github.com/fabian-hiller/valibot/issues/287) to help us extend the API reference.
+Creates a max length validation action.
+
+```ts
+const Action = v.maxLength<TInput, TRequirement, TMessage>(
+  requirement,
+  message
+);
+```
+
+## Generics
+
+- `TInput` <Property {...properties.TInput} />
+- `TRequirement` <Property {...properties.TRequirement} />
+- `TMessage` <Property {...properties.TMessage} />
+
+## Parameters
+
+- `requirement` <Property {...properties.requirement} />
+- `message` <Property {...properties.message} />
+
+### Explanation
+
+With `maxLength` you can validate the length of a string or array. If the input does not match the `requirement`, you can use `message` to customize the error message.
+
+## Returns
+
+- `Action` <Property {...properties.Action} />
+
+## Examples
+
+The following examples show how `maxLength` can be used.
+
+### Maximum string length
+
+Schema to validate a string with a maximum length of 32 characters.
+
+```ts
+const MaxStringSchema = v.pipe(
+  v.string(),
+  v.maxLength(32, 'The string must not exceed 32 characters.')
+);
+```
+
+### Maximum array length
+
+Schema to validate an array with a maximum length of 5 items.
+
+```ts
+const MaxArraySchema = v.pipe(
+  v.array(v.number()),
+  v.maxLength(5, 'The array must not exceed 5 numbers.')
+);
+```
+
+## Related
+
+The following APIs can be combined with `maxLength`.
+
+### Schemas
+
+<ApiList
+  items={['any', 'array', 'instance', 'special', 'string', 'tuple', 'unknown']}
+/>
+
+### Methods
+
+<ApiList items={['pipe']} />

website/src/routes/api/(actions)/maxLength/properties.ts

@@ -0,0 +1,80 @@
+import type { PropertyProps } from '~/components';
+
+export const properties: Record<string, PropertyProps> = {
+  TInput: {
+    modifier: 'extends',
+    type: {
+      type: 'custom',
+      name: 'LengthInput',
+      href: '../LengthInput/',
+    },
+  },
+  TRequirement: {
+    modifier: 'extends',
+    type: 'number',
+  },
+  TMessage: {
+    modifier: 'extends',
+    type: {
+      type: 'union',
+      options: [
+        {
+          type: 'custom',
+          name: 'ErrorMessage',
+          href: '../ErrorMessage/',
+          generics: [
+            {
+              type: 'custom',
+              name: 'MaxLengthIssue',
+              href: '../MaxLengthIssue/',
+              generics: [
+                {
+                  type: 'custom',
+                  name: 'TInput',
+                },
+                {
+                  type: 'custom',
+                  name: 'TRequirement',
+                },
+              ],
+            },
+          ],
+        },
+        'undefined',
+      ],
+    },
+  },
+  requirement: {
+    type: {
+      type: 'custom',
+      name: 'TRequirement',
+    },
+  },
+  message: {
+    type: {
+      type: 'custom',
+      name: 'TMessage',
+    },
+  },
+  Action: {
+    type: {
+      type: 'custom',
+      name: 'MaxLengthAction',
+      href: '../MaxLengthAction/',
+      generics: [
+        {
+          type: 'custom',
+          name: 'TInput',
+        },
+        {
+          type: 'custom',
+          name: 'TRequirement',
+        },
+        {
+          type: 'custom',
+          name: 'TMessage',
+        },
+      ],
+    },
+  },
+};

website/src/routes/api/(actions)/minLength/index.mdx

@@ -1,10 +1,81 @@
 ---
 title: minLength
+description: Creates a min length validation action.
 source: /actions/minLength/minLength.ts
 contributors:
   - fabian-hiller
+  - depsimon
 ---
 
+import { ApiList, Property } from '~/components';
+import { properties } from './properties';
+
 # minLength
 
-> The content of this page is not yet ready. Until then, please use the [source code](https://github.com/fabian-hiller/valibot/blob/main/library/src/actions/minLength/minLength.ts) or take a look at [issue #287](https://github.com/fabian-hiller/valibot/issues/287) to help us extend the API reference.
+Creates a min length validation action.
+
+```ts
+const Action = v.minLength<TInput, TRequirement, TMessage>(
+  requirement,
+  message
+);
+```
+
+## Generics
+
+- `TInput` <Property {...properties.TInput} />
+- `TRequirement` <Property {...properties.TRequirement} />
+- `TMessage` <Property {...properties.TMessage} />
+
+## Parameters
+
+- `requirement` <Property {...properties.requirement} />
+- `message` <Property {...properties.message} />
+
+### Explanation
+
+With `minLength` you can validate the length of a string or array. If the input does not match the `requirement`, you can use `message` to customize the error message.
+
+## Returns
+
+- `Action` <Property {...properties.Action} />
+
+## Examples
+
+The following examples show how `minLength` can be used.
+
+### Minumum string length
+
+Schema to validate a string with a minimum length of 3 characters.
+
+```ts
+const MinStringSchema = v.pipe(
+  v.string(),
+  v.minLength(3, 'The string must be 3 or more characters long.')
+);
+```
+
+### Minimum array length
+
+Schema to validate an array with a minimum length of 5 items.
+
+```ts
+const MinArraySchema = v.pipe(
+  v.array(v.number()),
+  v.minLength(5, 'The array must contain 3 numbers or more.')
+);
+```
+
+## Related
+
+The following APIs can be combined with `minLength`.
+
+### Schemas
+
+<ApiList
+  items={['any', 'array', 'instance', 'special', 'string', 'tuple', 'unknown']}
+/>
+
+### Methods
+
+<ApiList items={['pipe']} />

website/src/routes/api/(actions)/minLength/properties.ts

@@ -0,0 +1,80 @@
+import type { PropertyProps } from '~/components';
+
+export const properties: Record<string, PropertyProps> = {
+  TInput: {
+    modifier: 'extends',
+    type: {
+      type: 'custom',
+      name: 'LengthInput',
+      href: '../LengthInput/',
+    },
+  },
+  TRequirement: {
+    modifier: 'extends',
+    type: 'number',
+  },
+  TMessage: {
+    modifier: 'extends',
+    type: {
+      type: 'union',
+      options: [
+        {
+          type: 'custom',
+          name: 'ErrorMessage',
+          href: '../ErrorMessage/',
+          generics: [
+            {
+              type: 'custom',
+              name: 'MinLengthIssue',
+              href: '../MinLengthIssue/',
+              generics: [
+                {
+                  type: 'custom',
+                  name: 'TInput',
+                },
+                {
+                  type: 'custom',
+                  name: 'TRequirement',
+                },
+              ],
+            },
+          ],
+        },
+        'undefined',
+      ],
+    },
+  },
+  requirement: {
+    type: {
+      type: 'custom',
+      name: 'TRequirement',
+    },
+  },
+  message: {
+    type: {
+      type: 'custom',
+      name: 'TMessage',
+    },
+  },
+  Action: {
+    type: {
+      type: 'custom',
+      name: 'MinLengthAction',
+      href: '../MinLengthAction/',
+      generics: [
+        {
+          type: 'custom',
+          name: 'TInput',
+        },
+        {
+          type: 'custom',
+          name: 'TRequirement',
+        },
+        {
+          type: 'custom',
+          name: 'TMessage',
+        },
+      ],
+    },
+  },
+};