mock-config-server 2.3.0 → 2.4.0

package/README.md

@@ -215,7 +215,7 @@ Entity for connecting statics to the server, like HTML, JSON, PNG, etc.
 Object with settings for [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS). You can flexibly configure the required origin, methods, headers, credentials, maxAge for the entire server. If you do not specify `CORS` settings, then it will be disabled.
 
 - `origin` {string | RegExp | Array<string | RegExp> | Function | Promise } available origins from which requests can be made
-- `methods?` {Array<GET | POST | DELETE | PUT | PATCH>} available methods (default: `*`)
+- `methods?` {Array<GET | POST | DELETE | PUT | PATCH>} available methods (default: `GET,OPTIONS,PUT,PATCH,POST,DELETE`)
 - `allowedHeaders?` {Array<string>} allowed headers (default: `*`)
 - `exposedHeaders?` {Array<string>} exposed headers (default: `*`)
 - `credentials?` {boolean} param tells browsers whether to expose the response to the frontend JavaScript code (default: `true`)

package/dist/src/core/graphql/createGraphQLRoutes/createGraphQLRoutes.js

@@ -8,16 +8,20 @@ const createGraphQLRoutes = (router, graphqlConfig, serverResponseInterceptors)
     const graphqlMiddleware = async (request, response, next) => {
         const graphQLInput = (0, helpers_1.getGraphQLInput)(request);
         if (!graphQLInput || !graphQLInput.query) {
-            return response.status(400).json('Query is missing, you must pass a valid GraphQL query');
+            return response
+                .status(400)
+                .json({ message: 'Query is missing, you must pass a valid GraphQL query' });
         }
         const query = (0, helpers_1.parseQuery)(graphQLInput.query);
         if (!query) {
-            return response.status(400).json('Query is invalid, you must use a valid GraphQL query');
-        }
-        if (!query.operationName || !query.operationType) {
             return response
                 .status(400)
-                .json(`You should to specify operationName and operationType for ${request.method}:${request.baseUrl}${request.path}`);
+                .json({ message: 'Query is invalid, you must use a valid GraphQL query' });
+        }
+        if (!query.operationName || !query.operationType) {
+            return response.status(400).json({
+                message: `You should to specify operationName and operationType for ${request.method}:${request.baseUrl}${request.path}`
+            });
         }
         const matchedRequestConfig = preparedGraphQLRequestConfig.find((requestConfig) => {
             if (requestConfig.operationName instanceof RegExp) {

package/dist/src/core/middlewares/notFoundMiddleware/helpers/getGraphqlUrlSuggestions/getGraphqlUrlSuggestions.d.ts

@@ -1,6 +1,11 @@
+import type { GraphQLOperationType } from '../../../../../utils/types';
+export type GraphqlRequestSuggestionConfigs = {
+    operationType: GraphQLOperationType;
+    operationName: string;
+}[];
 interface GetGraphqlUrlSuggestionsParams {
     url: URL;
-    graphqlPatternUrlMeaningfulStrings: string[];
+    requestConfigs: GraphqlRequestSuggestionConfigs;
 }
-export declare const getGraphqlUrlSuggestions: ({ url, graphqlPatternUrlMeaningfulStrings }: GetGraphqlUrlSuggestionsParams) => string[];
+export declare const getGraphqlUrlSuggestions: ({ url, requestConfigs }: GetGraphqlUrlSuggestionsParams) => GraphqlRequestSuggestionConfigs;
 export {};

package/dist/src/core/middlewares/notFoundMiddleware/helpers/getGraphqlUrlSuggestions/getGraphqlUrlSuggestions.js

@@ -2,15 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getGraphqlUrlSuggestions = void 0;
 const getLevenshteinDistance_1 = require("../getLevenshteinDistance/getLevenshteinDistance");
-const getGraphqlUrlSuggestions = ({ url, graphqlPatternUrlMeaningfulStrings }) => {
+const getGraphqlUrlSuggestions = ({ url, requestConfigs }) => {
     // ✅ important: operationName is always second word in 'query' query param
-    const operationName = url.searchParams.get('query')?.split(' ')[1];
-    const actualUrlMeaningfulString = `${url.pathname}/${operationName}`;
-    const graphqlUrlSuggestions = graphqlPatternUrlMeaningfulStrings.reduce((acc, patternUrlMeaningfulString) => {
-        const distance = (0, getLevenshteinDistance_1.getLevenshteinDistance)(actualUrlMeaningfulString, patternUrlMeaningfulString);
-        const tolerance = Math.floor(patternUrlMeaningfulString.length / 2);
+    const actualOperationName = url.searchParams.get('query')?.split(' ')[1];
+    const actualUrlMeaningful = `${url.pathname}/${actualOperationName}`;
+    const graphqlUrlSuggestions = requestConfigs.reduce((acc, requestConfig) => {
+        const { operationName } = requestConfig;
+        const distance = (0, getLevenshteinDistance_1.getLevenshteinDistance)(actualUrlMeaningful, operationName);
+        const tolerance = Math.floor(operationName.length / 2);
         if (distance <= tolerance)
-            acc.push(patternUrlMeaningfulString);
+            acc.push(requestConfig);
         return acc;
     }, []);
     return graphqlUrlSuggestions;

package/dist/src/core/middlewares/notFoundMiddleware/helpers/getRestUrlSuggestions/getRestUrlSuggestions.d.ts

@@ -1,6 +1,11 @@
+import type { RestMethod, RestPathString } from '../../../../../utils/types';
+export type RestRequestSuggestionConfigs = {
+    method: RestMethod;
+    path: RestPathString;
+}[];
 interface GetRestUrlSuggestionsParams {
     url: URL;
-    patternUrls: string[];
+    requestConfigs: RestRequestSuggestionConfigs;
 }
-export declare const getRestUrlSuggestions: ({ url, patternUrls }: GetRestUrlSuggestionsParams) => string[];
+export declare const getRestUrlSuggestions: ({ url, requestConfigs }: GetRestUrlSuggestionsParams) => RestRequestSuggestionConfigs;
 export {};

package/dist/src/core/middlewares/notFoundMiddleware/helpers/getRestUrlSuggestions/getRestUrlSuggestions.js

@@ -4,10 +4,10 @@ exports.getRestUrlSuggestions = void 0;
 const helpers_1 = require("../../../../../utils/helpers");
 const getLevenshteinDistance_1 = require("../getLevenshteinDistance/getLevenshteinDistance");
 const helpers_2 = require("./helpers");
-const getRestUrlSuggestions = ({ url, patternUrls }) => {
+const getRestUrlSuggestions = ({ url, requestConfigs }) => {
     const actualUrlParts = (0, helpers_1.getUrlParts)(url.pathname);
-    const restUrlSuggestions = patternUrls.reduce((acc, patternUrl) => {
-        const patternUrlParts = (0, helpers_1.getUrlParts)(patternUrl);
+    const restUrlSuggestions = requestConfigs.reduce((acc, requestConfig) => {
+        const patternUrlParts = (0, helpers_1.getUrlParts)(requestConfig.path);
         // ✅ important: ignore patterns with different amount of parts
         if (patternUrlParts.length !== actualUrlParts.length)
             return acc;
@@ -25,7 +25,7 @@ const getRestUrlSuggestions = ({ url, patternUrls }) => {
             })
                 .join('/');
             const suggestionWithQueryParams = `/${urlSuggestion}${url.search}`;
-            acc.push(suggestionWithQueryParams);
+            acc.push({ ...requestConfig, path: suggestionWithQueryParams });
         }
         return acc;
     }, []);

package/dist/src/core/middlewares/notFoundMiddleware/notFoundMiddleware.js

@@ -5,42 +5,48 @@ const helpers_1 = require("../../../utils/helpers");
 const helpers_2 = require("./helpers");
 const notFoundMiddleware = ({ server, mockServerConfig }) => {
     const { baseUrl: serverBaseUrl, rest, graphql } = mockServerConfig;
-    const operationNames = graphql?.configs.map(({ operationName }) => operationName) ?? [];
-    const graphqlPatternUrlMeaningfulStrings = Array.from(operationNames.reduce((acc, operationName) => {
-        if (typeof operationName === 'string')
-            acc.add(`${serverBaseUrl ?? ''}${graphql?.baseUrl ?? ''}/${operationName}`);
-        return acc;
-    }, new Set()));
-    const restPaths = rest?.configs.map(({ path }) => path) ?? [];
-    const patternUrls = Array.from(restPaths.reduce((acc, patternPath) => {
-        if (typeof patternPath === 'string')
-            acc.add(`${serverBaseUrl ?? ''}${rest?.baseUrl ?? ''}${patternPath}`);
-        return acc;
-    }, new Set()));
+    const restRequestConfigs = rest?.configs
+        .filter(({ path }) => !(path instanceof RegExp))
+        .map((request) => ({
+        method: request.method,
+        path: `${serverBaseUrl ?? ''}${rest?.baseUrl ?? ''}${request.path}`
+    })) ?? [];
+    const graphqlRequestConfigs = graphql?.configs
+        .filter(({ operationName }) => !(operationName instanceof RegExp))
+        .map((request) => ({
+        operationType: request.operationType,
+        operationName: `${serverBaseUrl ?? ''}${graphql?.baseUrl ?? ''} ${request.operationName}`
+    })) ?? [];
     server.use((request, response) => {
         const url = new URL(`${request.protocol}://${request.get('host')}${request.originalUrl}`);
-        let graphqlUrlSuggestions = [];
-        if (graphql) {
-            const graphqlQuery = (0, helpers_1.parseGraphQLRequest)(request);
-            if (graphqlQuery) {
-                graphqlUrlSuggestions = (0, helpers_2.getGraphqlUrlSuggestions)({
-                    url,
-                    graphqlPatternUrlMeaningfulStrings
-                });
-            }
-        }
-        let restUrlSuggestions = [];
+        let restRequestSuggestions = [];
         if (rest) {
-            restUrlSuggestions = (0, helpers_2.getRestUrlSuggestions)({
+            restRequestSuggestions = (0, helpers_2.getRestUrlSuggestions)({
+                url,
+                requestConfigs: restRequestConfigs
+            });
+        }
+        let graphqlRequestSuggestions = [];
+        if (graphql && (0, helpers_1.parseGraphQLRequest)(request)) {
+            graphqlRequestSuggestions = (0, helpers_2.getGraphqlUrlSuggestions)({
                 url,
-                patternUrls
+                requestConfigs: graphqlRequestConfigs
+            });
+        }
+        const isRequestSupportHtml = request.headers.accept?.includes('text/html') || request.headers.accept?.includes('*/*');
+        if (isRequestSupportHtml) {
+            response.status(404).render('pages/404', {
+                restRequestSuggestions,
+                graphqlRequestSuggestions
             });
+            return;
         }
-        response.status(404).render('notFound', {
-            requestMethod: request.method,
-            url: `${url.pathname}${url.search}`,
-            restUrlSuggestions,
-            graphqlUrlSuggestions
+        response.status(404).json({
+            message: 'Request or page not found. Similar requests in data',
+            data: {
+                restRequestSuggestions,
+                graphqlRequestSuggestions
+            }
         });
     });
 };

package/dist/src/server/createMockServer/createMockServer.js

@@ -13,8 +13,9 @@ const helpers_1 = require("../../utils/helpers");
 const createMockServer = (mockServerConfig) => {
     const { cors, staticPath, rest, graphql, interceptors } = mockServerConfig;
     const server = (0, express_1.default)();
-    server.set('views', (0, helpers_1.urlJoin)(__dirname, '../../static/views'));
     server.set('view engine', 'ejs');
+    server.set('views', (0, helpers_1.urlJoin)(__dirname, '../../static/views'));
+    server.use(express_1.default.static((0, helpers_1.urlJoin)(__dirname, '../../static/views')));
     server.use(body_parser_1.default.urlencoded({ extended: false }));
     server.use(body_parser_1.default.json({ limit: '10mb' }));
     (0, middlewares_1.cookieParseMiddleware)(server);

package/dist/src/static/views/assets/icons/scheme-dark.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 8C12.65 8 14 9.35 14 11C14 12.65 12.65 14 11 14C9.35 14 8 12.65 8 11C8 9.35 9.35 8 11 8ZM11 6C8.24 6 6 8.24 6 11C6 13.76 8.24 16 11 16C13.76 16 16 13.76 16 11C16 8.24 13.76 6 11 6ZM1 12H3C3.55 12 4 11.55 4 11C4 10.45 3.55 10 3 10H1C0.45 10 0 10.45 0 11C0 11.55 0.45 12 1 12ZM19 12H21C21.55 12 22 11.55 22 11C22 10.45 21.55 10 21 10H19C18.45 10 18 10.45 18 11C18 11.55 18.45 12 19 12ZM10 1V3C10 3.55 10.45 4 11 4C11.55 4 12 3.55 12 3V1C12 0.45 11.55 0 11 0C10.45 0 10 0.45 10 1ZM10 19V21C10 21.55 10.45 22 11 22C11.55 22 12 21.55 12 21V19C12 18.45 11.55 18 11 18C10.45 18 10 18.45 10 19ZM4.99 3.58C4.6 3.19 3.96 3.19 3.58 3.58C3.19 3.97 3.19 4.61 3.58 4.99L4.64 6.05C5.03 6.44 5.67 6.44 6.05 6.05C6.43 5.66 6.44 5.02 6.05 4.64L4.99 3.58ZM17.36 15.95C16.97 15.56 16.33 15.56 15.95 15.95C15.56 16.34 15.56 16.98 15.95 17.36L17.01 18.42C17.4 18.81 18.04 18.81 18.42 18.42C18.81 18.03 18.81 17.39 18.42 17.01L17.36 15.95ZM18.42 4.99C18.81 4.6 18.81 3.96 18.42 3.58C18.03 3.19 17.39 3.19 17.01 3.58L15.95 4.64C15.56 5.03 15.56 5.67 15.95 6.05C16.34 6.43 16.98 6.44 17.36 6.05L18.42 4.99ZM6.05 17.36C6.44 16.97 6.44 16.33 6.05 15.95C5.66 15.56 5.02 15.56 4.64 15.95L3.58 17.01C3.19 17.4 3.19 18.04 3.58 18.42C3.97 18.8 4.61 18.81 4.99 18.42L6.05 17.36Z" fill="white"/>
+</svg>

package/dist/src/static/views/assets/icons/scheme-light.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill="#343434" fill-opacity="0.9" d="M6.36997 2.51C6.18997 3.15 6.09997 3.82 6.09997 4.5C6.09997 8.58 9.41997 11.9 13.5 11.9C14.18 11.9 14.85 11.81 15.49 11.63C14.45 14.19 11.93 16 8.99997 16C5.13997 16 1.99997 12.86 1.99997 9C1.99997 6.07 3.80997 3.55 6.36997 2.51ZM8.99997 0C4.02997 0 -3.05176e-05 4.03 -3.05176e-05 9C-3.05176e-05 13.97 4.02997 18 8.99997 18C13.97 18 18 13.97 18 9C18 8.54 17.96 8.08 17.9 7.64C16.92 9.01 15.32 9.9 13.5 9.9C10.52 9.9 8.09997 7.48 8.09997 4.5C8.09997 2.69 8.98997 1.08 10.36 0.0999999C9.91997 0.0399999 9.45997 0 8.99997 0Z"/>
+</svg>

package/dist/src/static/views/assets/styles/global.css

@@ -0,0 +1,88 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+    'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0;
+  background-color: var(--background-body);
+  color: var(--primary);
+}
+
+svg {
+  color: var(--primary-glass);
+}
+
+a {
+  color: var(--primary);
+  text-decoration-line: none;
+}
+
+.link {
+  color: var(--primary);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 17px;
+  text-decoration-line: underline;
+}
+
+.title {
+  display: flex;
+  height: 50px;
+  flex-direction: row;
+  align-items: center;
+  font-size: 20px;
+  font-weight: 500;
+  gap: 10px;
+  line-height: 24px;
+}
+
+.title img {
+  height: 50px;
+}
+
+.description {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  font-size: 14px;
+  font-weight: 200;
+  gap: 10px;
+  line-height: 17px;
+}
+
+.margin-container {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
+
+.hero {
+  display: flex;
+  width: 800px;
+  flex-direction: column;
+  margin-top: 100px;
+  margin-bottom: 100px;
+  gap: 10px;
+  padding-inline: 75px;
+}
+
+.content {
+  display: flex;
+  width: 800px;
+  flex-direction: column;
+  gap: 20px;
+  padding-inline: 75px;
+}
+
+.content-head {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}

package/dist/src/static/views/components/header/index.css

@@ -0,0 +1,55 @@
+.header {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  backdrop-filter: blur(20px);
+  background-color: var(--background-container);
+}
+
+.header-content {
+  display: flex;
+  width: 800px;
+  height: 60px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 25px;
+  padding-inline: 75px;
+}
+
+.header-menu {
+  display: flex;
+  flex-direction: row;
+  gap: 25px;
+}
+
+.header-menu-item {
+  display: flex;
+  height: 25px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 400;
+  gap: 10px;
+  line-height: 17px;
+}
+
+.logo img {
+  height: 30px;
+  margin-right: 5px;
+}
+
+li {
+  list-style-type: none;
+}
+
+.scheme-switcher {
+  width: 22px;
+  height: 22px;
+  background-image: var(--image-scheme);
+  background-position: center;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}

package/dist/src/static/views/components/header/index.ejs

@@ -0,0 +1,40 @@
+<link rel="stylesheet" href="/components/header/index.css" />
+<script defer src="/components/header/index.js"></script>
+
+<header class="header">
+  <div class="header-content">
+    <a href="/">
+      <div class="header-menu-item logo">
+        <img src="/assets/images/logo.png" />
+        <svg width="41" height="9" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12.04 8.5C11.9067 8.5 11.7867 8.45333 11.68 8.36C11.5867 8.25333 11.54 8.13333 11.54 8V3.8C11.54 3.01333 11.38 2.46 11.06 2.14C10.7533 1.82 10.3533 1.66 9.86 1.66C9.36667 1.66 8.88667 1.8 8.42 2.08C7.95333 2.36 7.52667 2.71333 7.14 3.14V8C7.14 8.13333 7.09333 8.25333 7 8.36C6.90667 8.45333 6.78667 8.5 6.64 8.5C6.50667 8.5 6.38667 8.45333 6.28 8.36C6.18667 8.25333 6.14 8.13333 6.14 8V3.8C6.14 3.01333 5.98 2.46 5.66 2.14C5.35333 1.82 4.95333 1.66 4.46 1.66C3.96667 1.66 3.48 1.81333 3 2.12C2.52 2.41333 2.08667 2.77333 1.7 3.2V8C1.7 8.13333 1.65333 8.25333 1.56 8.36C1.46667 8.45333 1.34667 8.5 1.2 8.5C1.06667 8.5 0.946667 8.45333 0.84 8.36C0.746667 8.25333 0.7 8.13333 0.7 8V1.16C0.7 1.01333 0.746667 0.893333 0.84 0.8C0.946667 0.706666 1.06667 0.66 1.2 0.66C1.34667 0.66 1.46667 0.706666 1.56 0.8C1.65333 0.893333 1.7 1.01333 1.7 1.16V1.84C2.12667 1.49333 2.57333 1.21333 3.04 0.999999C3.50667 0.773333 3.98 0.66 4.46 0.66C4.98 0.66 5.45333 0.753333 5.88 0.94C6.30667 1.12667 6.63333 1.49333 6.86 2.04C7.31333 1.62667 7.79333 1.29333 8.3 1.04C8.82 0.786666 9.34 0.66 9.86 0.66C10.3533 0.66 10.8 0.746666 11.2 0.92C11.6 1.09333 11.92 1.40667 12.16 1.86C12.4133 2.3 12.54 2.94667 12.54 3.8V8C12.54 8.13333 12.4933 8.25333 12.4 8.36C12.3067 8.45333 12.1867 8.5 12.04 8.5ZM18.9791 0.579999C19.7924 0.579999 20.4924 0.766666 21.0791 1.14C21.6791 1.5 22.1391 1.99333 22.4591 2.62C22.7924 3.23333 22.9591 3.92 22.9591 4.68C22.9591 5.41333 22.7924 6.07333 22.4591 6.66C22.1391 7.24667 21.6791 7.71333 21.0791 8.06C20.4924 8.40667 19.7924 8.58 18.9791 8.58C18.1791 8.58 17.4791 8.40667 16.8791 8.06C16.2791 7.71333 15.8124 7.24 15.4791 6.64C15.1591 6.04 14.9991 5.37333 14.9991 4.64C14.9991 3.89333 15.1591 3.21333 15.4791 2.6C15.7991 1.98667 16.2591 1.5 16.8591 1.14C17.4591 0.766666 18.1657 0.579999 18.9791 0.579999ZM18.9791 1.58C18.3657 1.58 17.8324 1.72 17.3791 2C16.9391 2.28 16.5991 2.65333 16.3591 3.12C16.1191 3.57333 15.9991 4.08 15.9991 4.64C15.9991 5.46667 16.2657 6.16667 16.7991 6.74C17.3457 7.3 18.0724 7.58 18.9791 7.58C19.8857 7.58 20.6057 7.3 21.1391 6.74C21.6857 6.18 21.9591 5.49333 21.9591 4.68C21.9591 4.10667 21.8391 3.58667 21.5991 3.12C21.3591 2.65333 21.0124 2.28 20.5591 2C20.1191 1.72 19.5924 1.58 18.9791 1.58ZM30.6391 1.88C30.1591 1.73333 29.6924 1.66 29.2391 1.66C28.2257 1.66 27.4324 1.95333 26.8591 2.54C26.2991 3.11333 26.0191 3.85333 26.0191 4.76C26.0191 5.54667 26.2991 6.2 26.8591 6.72C27.4191 7.24 28.2057 7.5 29.2191 7.5C29.5924 7.5 29.9191 7.47333 30.1991 7.42C30.4791 7.35333 30.6991 7.29333 30.8591 7.24C31.0057 7.18667 31.0991 7.15333 31.1391 7.14C31.1924 7.12667 31.2324 7.12 31.2591 7.12C31.3924 7.12 31.5057 7.17333 31.5991 7.28C31.7057 7.37333 31.7591 7.48667 31.7591 7.62C31.7591 7.84667 31.6524 8 31.4391 8.08C31.1457 8.2 30.8124 8.3 30.4391 8.38C30.0791 8.46 29.6724 8.5 29.2191 8.5C28.3124 8.5 27.5457 8.33333 26.9191 8C26.2924 7.65333 25.8191 7.2 25.4991 6.64C25.1791 6.06667 25.0191 5.44 25.0191 4.76C25.0191 3.97333 25.1857 3.27333 25.5191 2.66C25.8524 2.03333 26.3324 1.54667 26.9591 1.2C27.5857 0.84 28.3457 0.66 29.2391 0.66C29.9191 0.66 30.5657 0.766666 31.1791 0.98C31.4057 1.06 31.5191 1.22667 31.5191 1.48C31.5191 1.6 31.4657 1.71333 31.3591 1.82C31.2524 1.91333 31.1324 1.96 30.9991 1.96C30.9591 1.96 30.8391 1.93333 30.6391 1.88ZM39.05 1.82C38.9167 1.78 38.6833 1.73333 38.35 1.68C38.03 1.62667 37.6767 1.6 37.29 1.6C36.6367 1.6 36.13 1.71333 35.77 1.94C35.41 2.16667 35.23 2.44667 35.23 2.78C35.23 3.07333 35.3767 3.31333 35.67 3.5C35.9767 3.67333 36.4767 3.79333 37.17 3.86L37.97 3.94C38.65 4.00667 39.1833 4.16 39.57 4.4C39.9567 4.64 40.23 4.92667 40.39 5.26C40.55 5.58 40.63 5.92 40.63 6.28C40.63 6.64 40.5367 7 40.35 7.36C40.1633 7.70667 39.8367 8 39.37 8.24C38.9167 8.46667 38.2633 8.58 37.41 8.58C36.9167 8.58 36.41 8.53333 35.89 8.44C35.37 8.33333 34.8767 8.18 34.41 7.98C34.21 7.88667 34.11 7.72667 34.11 7.5C34.11 7.38 34.1633 7.27333 34.27 7.18C34.3767 7.07333 34.4967 7.02 34.63 7.02C34.6567 7.02 34.7033 7.03333 34.77 7.06C34.8367 7.08667 34.9567 7.13333 35.13 7.2C35.3833 7.29333 35.7167 7.38 36.13 7.46C36.5433 7.54 36.97 7.58 37.41 7.58C38.13 7.58 38.6767 7.46 39.05 7.22C39.4367 6.96667 39.63 6.65333 39.63 6.28C39.63 5.93333 39.4967 5.64 39.23 5.4C38.9633 5.14667 38.5167 4.99333 37.89 4.94L37.09 4.86C36.3033 4.78 35.7033 4.63333 35.29 4.42C34.8767 4.19333 34.5967 3.93333 34.45 3.64C34.3033 3.34667 34.23 3.05333 34.23 2.76C34.23 2.42667 34.3167 2.1 34.49 1.78C34.6767 1.44667 34.99 1.16667 35.43 0.94C35.8833 0.713333 36.5033 0.6 37.29 0.6C37.7433 0.6 38.1633 0.633333 38.55 0.7C38.95 0.753333 39.3033 0.826667 39.61 0.92C39.7167 0.933333 39.8033 0.993333 39.87 1.1C39.9367 1.19333 39.97 1.29333 39.97 1.4C39.97 1.54667 39.9167 1.66667 39.81 1.76C39.7167 1.85333 39.6033 1.9 39.47 1.9C39.39 1.9 39.25 1.87333 39.05 1.82Z" fill="currentColor" />
+        </svg>
+      </div>
+    </a>
+    <ul class="header-menu">
+      <li>
+        <a href="https://github.com/siberiacancode/mock-config-server" rel="noopener noreferrer" target="_blank">
+          <div class="header-menu-item">
+            <svg width="21" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M10.5613 0C5.03628 0 0.561279 4.59118 0.561279 10.2539C0.561279 14.7853 3.42628 18.6279 7.39878 19.9823C7.89878 20.0788 8.08211 19.7618 8.08211 19.4892C8.08211 19.2457 8.07378 18.6006 8.06961 17.7461C5.28795 18.3647 4.70128 16.3703 4.70128 16.3703C4.24628 15.1869 3.58878 14.8707 3.58878 14.8707C2.68295 14.235 3.65878 14.2478 3.65878 14.2478C4.66295 14.3196 5.19045 15.3039 5.19045 15.3039C6.08211 16.8719 7.53128 16.4191 8.10295 16.1567C8.19295 15.4936 8.45045 15.0416 8.73628 14.7853C6.51545 14.5289 4.18128 13.6471 4.18128 9.71813C4.18128 8.59875 4.56878 7.68444 5.21045 6.96667C5.09795 6.70776 4.76045 5.66528 5.29795 4.2528C5.29795 4.2528 6.13545 3.97766 8.04795 5.30383C8.84795 5.07568 9.69795 4.96289 10.5479 4.95776C11.3979 4.96289 12.2479 5.07568 13.0479 5.30383C14.9479 3.97766 15.7854 4.2528 15.7854 4.2528C16.3229 5.66528 15.9854 6.70776 15.8854 6.96667C16.5229 7.68444 16.9104 8.59875 16.9104 9.71813C16.9104 13.6573 14.5729 14.5246 12.3479 14.7767C12.6979 15.0843 13.0229 15.7132 13.0229 16.6737C13.0229 18.046 13.0104 19.1483 13.0104 19.4816C13.0104 19.7507 13.1854 20.0711 13.6979 19.9686C17.6988 18.6236 20.5613 14.7784 20.5613 10.2539C20.5613 4.59118 16.0838 0 10.5613 0Z" fill="currentColor" />
+            </svg>
+            github
+          </div>
+        </a>
+      </li>
+      <li>
+        <a href="https://github.com/siberiacancode/mock-config-server/issues" rel="noopener noreferrer" target="_blank">
+          <div class="header-menu-item">
+            <svg width="17" height="17" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M14.9613 0.5H2.16128C1.28128 0.5 0.569279 1.22 0.569279 2.1L0.561279 16.5L3.76128 13.3H14.9613C15.8413 13.3 16.5613 12.58 16.5613 11.7V2.1C16.5613 1.22 15.8413 0.5 14.9613 0.5ZM6.16128 7.7H4.56128V6.1H6.16128V7.7ZM9.36128 7.7H7.76128V6.1H9.36128V7.7ZM12.5613 7.7H10.9613V6.1H12.5613V7.7Z" fill="currentColor" />
+            </svg>
+            issues
+          </div>
+        </a>
+      </li>
+      <li>
+        <div id="scheme-switcher" class="scheme-switcher"></div>
+      </li>
+    </ul>
+  </div>
+</header>

package/dist/src/static/views/components/header/index.js

@@ -0,0 +1 @@
+document.getElementById('scheme-switcher').addEventListener('click', () => window.switchScheme());

package/dist/src/static/views/features/scheme/dark.css

@@ -0,0 +1,12 @@
+:root {
+  color-scheme: dark;
+  --accent: #6972ff;
+  --accent-glass: rgb(105 114 255 / 50%);
+  --primary: #fff;
+  --primary-glass: rgba(255 255 255 / 70%);
+  --shadow: 0px 4px 10px rgba(0 0 0 / 25%);
+  --background-body: #363942;
+  --background-container: rgba(0 0 0 / 15%);
+  --background-card: rgba(255 255 255 / 5%);
+  --image-scheme: url('/assets/icons/scheme-dark.svg');
+}

package/dist/src/static/views/features/scheme/index.ejs

@@ -0,0 +1,3 @@
+<link rel="stylesheet" href="/features/scheme/light.css" media="(prefers-color-scheme: light)" />
+<link rel="stylesheet" href="/features/scheme/dark.css" media="(prefers-color-scheme: dark)" />
+<script defer src="/features/scheme/index.js"></script>

package/dist/src/static/views/features/scheme/index.js

@@ -0,0 +1,31 @@
+const lightStyles = document.querySelector(
+  'link[rel=stylesheet][media*=prefers-color-scheme][media*=light]'
+);
+const darkStyles = document.querySelector(
+  'link[rel=stylesheet][media*=prefers-color-scheme][media*=dark]'
+);
+
+function getSavedScheme() {
+  return localStorage.getItem('color-scheme');
+}
+
+function setScheme(scheme) {
+  const lightMedia = scheme === 'light' ? 'all' : 'not all';
+  const darkMedia = scheme === 'dark' ? 'all' : 'not all';
+
+  lightStyles.media = lightMedia;
+  darkStyles.media = darkMedia;
+
+  localStorage.setItem('color-scheme', scheme);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function switchScheme() {
+  setScheme(getSavedScheme() === 'light' ? 'dark' : 'light');
+}
+
+function initScheme() {
+  setScheme(getSavedScheme() ?? 'dark');
+}
+
+initScheme();

package/dist/src/static/views/features/scheme/light.css

@@ -0,0 +1,12 @@
+:root {
+  color-scheme: light;
+  --accent: rgb(149 155 255);
+  --accent-glass: rgb(149 155 255 / 50%);
+  --primary: #343434;
+  --primary-glass: rgba(52 52 52 / 70%);
+  --shadow: 0px 4px 10px rgba(0 0 0 / 15%);
+  --background-body: #e4e5ef;
+  --background-container: rgba(255 255 255 / 75%);
+  --background-card: rgba(255 255 255 / 75%);
+  --image-scheme: url('/assets/icons/scheme-light.svg');
+}

package/dist/src/static/views/features/tab/index.css

@@ -0,0 +1,30 @@
+.tab-items {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 3px;
+  border-radius: 20px;
+  background: var(--background-container);
+  font-size: 14px;
+  font-weight: 300;
+  gap: 4px;
+  line-height: 17px;
+}
+
+.tab-item {
+  display: flex;
+  width: 120px;
+  height: 30px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 20px;
+  cursor: pointer;
+}
+
+.tab-item:not(.tab-item-active):hover {
+  background-color: var(--accent-glass);
+}
+
+.tab-content {
+  display: none;
+}

package/dist/src/static/views/features/tab/index.ejs

@@ -0,0 +1,2 @@
+<link rel="stylesheet" href="/features/tab/index.css" />
+<script defer src="/features/tab/index.js"></script>

package/dist/src/static/views/features/tab/index.js

@@ -0,0 +1,12 @@
+function switchTab(activeTabId) {
+  document.querySelector('body').className = activeTabId;
+}
+
+function initTab() {
+  const tabItems = document.getElementsByClassName('tab-item');
+  for (let i = 0; i < tabItems.length; i += 1) {
+    tabItems[i].addEventListener('click', () => switchTab(tabItems[i].id));
+  }
+}
+
+initTab();

package/dist/src/static/views/pages/404/index.css

@@ -0,0 +1,10 @@
+/* stylelint-disable */
+.tab-item-REST #tab-item-REST,
+.tab-item-GraphQL #tab-item-GraphQL {
+  background: var(--accent);
+}
+
+.tab-item-REST #tab-content-REST,
+.tab-item-GraphQL #tab-content-GraphQL {
+  display: unset;
+}

package/dist/src/static/views/pages/404/index.ejs

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+  <title>404 - 🎉 Mock Config Server</title>
+
+  <link rel="stylesheet" href="/assets/styles/global.css" />
+  <link rel="stylesheet" href="/pages/404/index.css" />
+
+  <% const api = { rest: "REST", graphql: "GraphQL" } %>
+
+  <% const rootPath = (path) => `../../${path}` %>
+  <%- include(rootPath('features/scheme/index')) -%>
+  <%- include(rootPath('features/tab/index')) -%>
+</head>
+
+<body class="tab-item-<%= graphqlRequestSuggestions.length ? api.graphql : api.rest %>">
+  <%- include(rootPath('components/header/index')) -%>
+  <div class="margin-container">
+    <div class="hero">
+      <div class="title">
+        <img src="/assets/images/404.png" />
+        404
+      </div>
+      <div class="description">
+        Such request or page not found ☹️
+        <a class="link" href="/">
+          Return on main page
+        </a>
+      </div>
+    </div>
+  </div>
+  <div class="margin-container">
+    <div class="content">
+      <div class="content-head">
+        <div class="tab-items">
+          <% Object.values(api).forEach((variant)=> { %>
+          <div id="tab-item-<%=variant%>" class="tab-item">
+            <%=variant%>
+          </div>
+          <% }) %>
+        </div>
+      </div>
+      <div id="tab-content-<%=api.rest%>" class="tab-content">
+        <div class="description">
+          <% if (restRequestSuggestions.length) { %>
+          <span>We searched a bit, maybe this will help you:</span>
+          <% restRequestSuggestions.forEach((requestSuggestion) => { %>
+          <span><%= requestSuggestion.method.toUpperCase() %> <%=
+              requestSuggestion.path %></span>
+          <% })} else { %>
+          <span>We searched, but found nothing.</span>
+          <span>Maybe you don't have <%=api.rest%> configs? 👀</span>
+          <a class="link" href="https://github.com/siberiacancode/mock-config-server#configs" rel="noopener noreferrer" target="_blank">
+            Read documentation 📘 for more information
+          </a>
+          <% } %>
+        </div>
+      </div>
+
+      <div id="tab-content-<%=api.graphql%>" class="tab-content">
+        <div class="description">
+          <% if (graphqlRequestSuggestions.length) { %>
+          <span>We searched a bit, maybe this will help you:</span>
+          <% graphqlRequestSuggestions.forEach((requestSuggestion) => { %>
+          <span><%= requestSuggestion.operationType %> <%=
+              requestSuggestion.operationName %></span>
+          <% })} else { %>
+          <span>We searched, but found nothing.</span>
+          <span>Maybe you don't have <%=api.graphql%> configs? 👀</span>
+          <a class="link" href="https://github.com/siberiacancode/mock-config-server#configs" rel="noopener noreferrer" target="_blank">
+            Read documentation 📘 for more information
+          </a>
+          <% } %>
+        </div>
+      </div>
+    </div>
+  </div>
+  </div>
+</body>
+
+</html>

package/dist/src/utils/types/rest.d.ts

@@ -23,8 +23,9 @@ export interface RestRouteConfig<Method extends RestMethod, Entities extends Res
     interceptors?: Pick<Interceptors, 'response'>;
 }
 export type RestMethod = 'get' | 'post' | 'delete' | 'put' | 'patch' | 'options';
+export type RestPathString = `/${string}`;
 export interface BaseRestRequestConfig<Method extends RestMethod> {
-    path: `/${string}` | RegExp;
+    path: RestPathString | RegExp;
     method: Method;
     routes: RestRouteConfig<Method>[];
     interceptors?: Interceptors;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mock-config-server",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Tool that easily and quickly imitates server operation, create full fake api in few steps",
   "author": {
     "name": "SIBERIA CAN CODE 🧊",
@@ -41,10 +41,12 @@
     "test": "jest",
     "type": "tsc --noEmit",
     "lint": "eslint . --ext ts --no-error-on-unmatched-pattern",
+    "stylelint": "stylelint \"src/static/**/*.css\"",
     "format": "prettier --write {src,bin}/**/*.ts",
     "pretty": "yarn type && yarn format && yarn lint --fix"
   },
   "lint-staged": {
+    "*.css": "yarn stylelint",
     "*.js": "yarn format",
     "*.ts": "yarn pretty"
   },
@@ -55,7 +57,7 @@
     "@types/yargs": "^17.0.24",
     "ansi-colors": "^4.1.3",
     "body-parser": "^1.20.0",
-    "ejs": "^3.1.8",
+    "ejs": "^3.1.9",
     "esbuild": "^0.17.8",
     "express": "^4.18.1",
     "flat": "^5.0.2",
@@ -76,6 +78,11 @@
     "eslint-import-resolver-typescript": "^3.4.1",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-prettier": "^4.2.1",
+    "style-loader": "^3.3.2",
+    "stylelint": "^15.6.1",
+    "stylelint-config-prettier": "^9.0.5",
+    "stylelint-config-standard": "^32.0.0",
+    "stylelint-order": "^6.0.3",
     "husky": "^8.0.1",
     "jest": "^29.4.2",
     "lint-staged": "^13.1.1",

package/dist/src/static/views/notFound.ejs

@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <body class="container">
-        <h1>404</h1>
-        <div>
-            Seems to be your config does not have data for <%= requestMethod %>
-            <%= decodeURIComponent(url) %> request, or you have typo in it.
-        </div>
-
-        <% if (restUrlSuggestions.length || graphqlUrlSuggestions.length) { %>
-            <h2>
-                Maybe you are looking for one of these paths?
-            </h2>
-        <% } %>
-
-        <% if (restUrlSuggestions.length) { %>
-            <div>
-                <h3>REST</h3>
-                <ul>
-                    <% restUrlSuggestions.forEach((restUrlSuggestion) => { %>
-                        <li>
-                            <a href=<%= restUrlSuggestion %>><%= decodeURIComponent(restUrlSuggestion) %></a>
-                        </li>
-                    <% }) %>
-                </ul>
-            </div>
-        <% } %>
-
-        <% if (graphqlUrlSuggestions.length) { %>
-            <div>
-                <h3>GraphQL</h3>
-                <ul>
-                    <% graphqlUrlSuggestions.forEach((graphqlUrlSuggestion) => { %>
-                        <li>
-                            <%= decodeURIComponent(graphqlUrlSuggestion) %>
-                        </li>
-                    <% }) %>
-                </ul>
-            </div>
-        <% } %>
-    </body>
-</html>