Add examples support

[sayem314]

Prerequisites

• [X] I have written a descriptive issue title
• [X] I have searched existing issues to ensure the feature has not already been requested

🚀 Feature Proposal

The library is currently unable to exhibit examples from the "examples" array in the UI schema. Ideally, the framework should be able to choose an example from the array or produce one automatically if no example is available.

The current image shows what the library is currently generating:

Motivation

Improving the library's ability to display examples from the "examples" array in the UI schema is to make it easier for developers to understand the expected structure and values of the input and output data in their APIs. By providing clear examples in the UI, developers can quickly understand the expected data formats and use them as a reference when building their applications.

Example

Here is my schema.

export const UserSignup = {
  body: Type.Object(
    {
      displayname: Type.String({
        minLength: 1,
        maxLength: 48,
        description: "The user's display name",
      }),
      username: Type.String({
        minLength: 2,
        maxLength: 16,
        pattern: usernamePattern,
        description:
          "The user's username. Must contain only alphanumeric characters or single hyphens, and cannot begin or end with a hyphen.",
      }),
      password: Type.String({
        minLength: 6,
        maxLength: 32,
        description: "The user's password",
      }),
      sex: Type.Union([Type.Literal('male'), Type.Literal('female'), Type.Literal('unknown')], {
        default: 'unknown',
        description: "The user's gender",
      }),
    },
    {
      examples: [
        {
          displayname: 'John Doe',
          username: 'john_doe',
          password: 'p@ssword123',
          sex: 'male',
        },
      ],
    },
  ),
  response: {
    201: Type.Literal('User created successfully.', {
      description: 'The success message after a user has been created',
    }),
  },
};

The library could benefit from an enhancement that checks whether body.examples is available before generating an example. This would prevent the generation of unnecessary or redundant examples and ensure that the user's intended example is always displayed in the UI schema.

[sayem314]

Additionally, if a description is provided for the schema, it would be beneficial to display it alongside the generated example in the UI.

[sayem314]

Here's the output for the schema with examples array using @sinclair/typebox.

{
  "body": {
    "examples": [
      {
        "displayname": "John Doe",
        "username": "john_doe",
        "password": "p@ssword123",
        "sex": "male"
      }
    ],
    "type": "object",
    "properties": {
    ...
    },
    "required": [
    ...
    ]
  },
  "response": {
   ...
  }
}

[mcollina]

Thanks for reporting! Would you like to send a Pull Request to address this issue?