Merge pull request #259 from siberiacancode/#255

#255 into main 👽 add introducing and references

Author: debabin

packages/docs/content/docs/mocking-requests/introducing.mdx

@@ -0,0 +1,38 @@
+---
+title: Introducing
+description: Introduction to mock-config-server
+---
+
+<img src='/mock-config/configSchemaLight.svg' className='dark:hidden' />
+<img src='/mock-config/configSchemaDark.svg' className='hidden dark:block' />
+
+The global mock configuration is represented as an array in which the first element is either `settings` or a `component`, and all subsequent elements are components.
+
+## Settings
+
+`Settings` define global parameters for the mock server. They enable you to configure features such as CORS, logging, artificial delays, and other operational options that apply to the entire server.
+
+Settings are optional and can be placed as the first element in your configuration array. For detailed information, refer to the [Settings](./settings) section.
+
+## Components
+
+`Components` are modular units that organize and group related mock requests. They allow you to:
+
+- Scope requests under a common base URL
+- Apply shared interceptors to all requests within the component
+- Group related endpoints together for better organization
+
+Each component contains a `configs` array, which holds the actual request definitions. These configs are where you define how individual API endpoints should be mocked.
+
+For detailed type information, refer to the [MockServerComponent](./references/MockServerComponent) reference.
+
+## Configs
+
+`Configs` are the fundamental concept in the mock server. Each config defines how to handle a single API endpoint.
+
+Configs are easy to fill and maintain. They allow you to emulate various application behaviors by specifying matching criteria:
+
+- For **REST requests**: `headers`, `cookies`, `query`, `params`, or `body`
+- For **GraphQL requests**: `headers`, `cookies`, `query`, or `variables`
+
+Using these matching criteria, you can define different responses for different request conditions, making it easy to simulate various server behaviors and edge cases.

packages/docs/content/docs/mocking-requests/meta.json

@@ -0,0 +1,3 @@
+{
+  "pages": ["introducing.mdx", "references"]
+}

packages/docs/content/docs/mocking-requests/references/Cors.mdx

@@ -0,0 +1,66 @@
+---
+title: CORS
+---
+
+import { TypeTable } from 'fumadocs-ui/components/type-table';
+
+## Cors
+
+<TypeTable
+  type={{
+    allowedHeaders: {
+      description: 'List of allowed headers for CORS',
+      type: 'string[]',
+      default: '*'
+    },
+    credentials: {
+      description: 'Whether to allow sending credentials (cookies, auth headers)',
+      type: 'boolean',
+      default: true
+    },
+    exposedHeaders: {
+      description: 'Headers exposed to the browser',
+      type: 'string[]',
+      default: '*'
+    },
+    maxAge: {
+      description: 'How long (in seconds) the results of a preflight request can be cached',
+      type: 'number',
+      default: 3600
+    },
+    methods: {
+      description: 'Allowed HTTP methods (uppercased)',
+      type: 'Uppercase<RestMethod>[]',
+      typeDescriptionLink: './Rest#RestMethod',
+      default: '"GET,OPTIONS,PUT,PATCH,POST,DELETE"'
+    },
+    origin: {
+      description:
+        'Allowed origin(s) — string, RegExp, array of strings/RegExps, or a function returning them',
+      type: (
+        <span>
+          ((request: Request) {'=>'}{' '}
+          <a className='underline' href='#CorsOrigin'>
+            CorsOrigin
+          </a>{' '}
+          | Promise{'<'}
+          <a className='underline' href='#CorsOrigin'>
+            CorsOrigin
+          </a>
+          {'>'}) |{' '}
+          <a className='underline' href='#CorsOrigin'>
+            CorsOrigin
+          </a>
+        </span>
+      ),
+      required: true
+    }
+  }}
+/>
+
+<a id='CorsOrigin'></a>
+## CorsOrigin
+
+```typescript
+string | (string | RegExp)[] | RegExp
+```

packages/docs/content/docs/mocking-requests/references/Database.mdx

@@ -0,0 +1,109 @@
+---
+title: Database
+---
+
+import { TypeTable } from 'fumadocs-ui/components/type-table';
+
+## DatabaseConfig
+
+<TypeTable
+  type={{
+    data: {
+      description: 'Initial data for the database',
+      type: '`${string}.json` | Record<string, unknown>',
+      required: true
+    },
+    routes: {
+      description: 'Optional route mapping or JSON file path for database operations',
+      type: '`${string}.json` | Record<`/${string}`, `/${string}`>'
+    }
+  }}
+/>
+
+<a id='Orm'></a>
+## ORM
+
+The ORM type is determined by the structure of your database. If a database is an array where each element has an `id` property, it uses `NestedOrm`. Otherwise, it uses `ShallowOrm`.
+
+## ShallowOrm{'<'}Item{'>'}
+
+Used for non-array database fields or arrays without `id` properties.
+
+<TypeTable
+  type={{
+    get: {
+      description: 'Get the current value',
+      type: '() => Item',
+      required: true
+    },
+    update: {
+      description: 'Update the value',
+      type: '(data: Item) => void',
+      required: true
+    }
+  }}
+/>
+
+## NestedOrm{'<'}Item{'>'}
+
+Used for array database fields where each element has an `id` property. Provides full CRUD operations.
+
+<TypeTable
+  type={{
+    count: {
+      description: 'Get the number of items in the collection',
+      type: '() => number',
+      required: true
+    },
+    create: {
+      description: 'Create a new item (id will be auto-generated)',
+      type: '(item: Omit<Item, "id">) => Item',
+      required: true
+    },
+    createMany: {
+      description: 'Create multiple items at once',
+      type: '(items: Omit<Item, "id">[]) => void',
+      required: true
+    },
+    delete: {
+      description: 'Delete an item by id',
+      type: '(id: StorageIndex) => void',
+      required: true
+    },
+    deleteMany: {
+      description: 'Delete multiple items by their ids',
+      type: '(ids: StorageIndex[]) => void',
+      required: true
+    },
+    exists: {
+      description: 'Check if an item exists matching the filters',
+      type: '(filters: Partial<Item>) => boolean',
+      required: true
+    },
+    findById: {
+      description: 'Find an item by its id',
+      type: '(id: StorageIndex) => Item | undefined',
+      required: true
+    },
+    findFirst: {
+      description: 'Find the first item matching the filters',
+      type: '(filters?: Partial<Item>) => Item | undefined',
+      required: true
+    },
+    findMany: {
+      description: 'Find all items matching the filters',
+      type: '(filters?: Partial<Item>) => Item[]',
+      required: true
+    },
+    update: {
+      description: 'Update an item by its id',
+      type: '(id: StorageIndex, item: Partial<Omit<Item, "id">>) => void',
+      required: true
+    },
+    updateMany: {
+      description: 'Update multiple items by their ids',
+      type: '(ids: StorageIndex[], item: Partial<Omit<Item, "id">>) => number',
+      required: true
+    }
+  }}
+/>

packages/docs/content/docs/mocking-requests/references/GraphQL.mdx

@@ -0,0 +1,178 @@
+---
+title: GraphQL
+---
+
+import { TypeTable } from 'fumadocs-ui/components/type-table';
+ 
+## GraphqlConfig
+
+<TypeTable
+  type={{
+    baseUrl: {
+      description: 'The base URL',
+      type: '`/${string}`'
+    },
+    configs: {
+      description: 'Array of GraphQL request configurations',
+      type: 'GraphQLRequestConfig[]',
+      typeDescriptionLink: '#GraphQLRequestConfig',
+      required: true
+    },
+    interceptors: {
+      description: 'Optional interceptors applied to GraphQL handlers',
+      type: "Interceptors<'graphql'>",
+      typeDescriptionLink: './Interceptors'
+    }
+  }}
+/>
+
+<a id='GraphQLRequestConfig'></a>
+## GraphQLRequestConfig
+
+<TypeTable
+  type={{
+    operationType: {
+      description: 'Operation type (query or mutation)',
+      type: 'GraphQLOperationType',
+      typeDescriptionLink: '#GraphQLOperationType',
+      required: true
+    },
+    operationName: {
+      description: 'Operation name (string or RegExp) used to match requests',
+      type: 'GraphQLOperationName',
+      typeDescriptionLink: '#GraphQLOperationName'
+    },
+    query: {
+      description: 'GraphQL query string to match against incoming requests',
+      type: 'string'
+    },
+    routes: {
+      description: 'One or more route responses or queues for this operation',
+      type: 'GraphQLRouteConfig[]',
+      typeDescriptionLink: '#GraphQLRouteConfig',
+      required: true
+    },
+    interceptors: {
+      description: 'Optional interceptors for this specific GraphQL config',
+      type: "Interceptors<'graphql'>",
+      typeDescriptionLink: './Interceptors'
+    }
+  }}
+/>
+
+<a id='GraphQLRouteConfig'></a>
+## GraphQLRouteConfig
+
+There are 2 ways to specify a GraphQL route:
+
+You can pass a `queue` field with an array of timed responses (for polling/queues):
+
+<TypeTable
+  type={{
+    settings: {
+      description: 'Optional response settings (delay, polling, status)',
+      type: 'GraphQLSettings & { polling: true }',
+      typeDescriptionLink: '#GraphQLSettings'
+    },
+    queue: {
+      description: 'Sequence of timed responses (for polling/queues)',
+      type: 'Array<{ time?: number; data: GraphqlDataResponse }>',
+      required: true
+    },
+    entities: {
+      description: 'Optional request entities mapping (cookies, headers, query, variables)',
+      type: 'GraphQLEntitiesByEntityName',
+      typeDescriptionLink: '#GraphQLEntitiesByEntityName'
+    },
+    interceptors: {
+      description: 'Optional interceptors applied to GraphQL routes',
+      type: "Interceptors<'graphql'>",
+      typeDescriptionLink: './Interceptors'
+    }
+  }}
+/>
+
+Or you can specify a single response with the `data` field:
+
+<TypeTable
+  type={{
+    settings: {
+      description: 'Optional response settings (delay, polling, status)',
+      type: 'GraphQLSettings & { polling?: false }',
+      typeDescriptionLink: '#GraphQLSettings'
+    },
+    data: {
+      description: 'Static or dynamic response data (function or value)',
+      type: 'GraphqlDataResponse',
+      typeDescriptionLink: '#GraphqlDataResponse',
+      required: true
+    },
+    entities: {
+      description: 'Optional request entities mapping (cookies, headers, query, variables)',
+      type: 'GraphQLEntitiesByEntityName',
+      typeDescriptionLink: '#GraphQLEntitiesByEntityName'
+    },
+    interceptors: {
+      description: 'Optional interceptors applied to GraphQL routes',
+      type: "Interceptors<'graphql'>",
+      typeDescriptionLink: './Interceptors'
+    }
+  }}
+/>
+
+<a id='GraphqlDataResponse'></a>
+## GraphqlDataResponse
+
+<TypeTable
+  type={{
+    GraphqlDataResponse: {
+      description: 'Either a static Data value or a function producing Data (sync or async)',
+      type: 'Data | (request: Request, entities: GraphQLEntitiesByEntityName) => Data | Promise<Data>'
+    }
+  }}
+/>
+
+<a id='GraphQLSettings'></a>
+## GraphQLSettings
+
+<TypeTable
+  type={{
+    delay: {
+      description: 'Optional artificial delay (ms) applied to this response',
+      type: 'number'
+    },
+    polling: {
+      description: 'Whether this route is polling (returns queued responses)',
+      type: 'boolean'
+    },
+    status: {
+      description: 'Optional HTTP status code for the response',
+      type: 'number'
+    }
+  }}
+/>
+
+<a id='GraphQLOperationType'></a>
+## GraphQLOperationType
+
+Operation types supported by GraphQL configs
+
+```typescript
+type GraphQLOperationType = 'mutation' | 'query';
+```
+
+<a id='GraphQLOperationName'></a>
+## GraphQLOperationName
+
+Operation name
+
+```typescript
+type GraphQLOperationName = string | RegExp;
+```
+
+<a id='GraphQLEntitiesByEntityName'></a>
+## GraphQLEntitiesByEntityName
+
+```typescript
+Record<'cookies' | 'headers' | 'query' | 'variables', GraphQLEntity>;
+```