@skroz/frontend 0.0.2

package/dist/ui/H.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface HProps {
+    type: 'h1' | 'h2' | 'h3' | 'h4';
+    onBack?: () => void;
+    backLink?: string;
+    children: React.ReactNode;
+    extra?: React.ReactNode;
+    subHeader?: React.ReactNode;
+    preHeader?: React.ReactNode;
+    prefix?: React.ReactNode;
+    postfix?: React.ReactNode;
+    textAlign?: 'left' | 'center' | 'right';
+    className?: string;
+}
+declare const H: React.FC<HProps>;
+export default H;

package/dist/ui/H.js

@@ -0,0 +1,39 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var antd_1 = require("antd");
+var icons_1 = require("@ant-design/icons");
+var link_1 = __importDefault(require("next/link"));
+var classnames_1 = __importDefault(require("classnames"));
+var H = function (_a) {
+    var onBack = _a.onBack, children = _a.children, type = _a.type, extra = _a.extra, subHeader = _a.subHeader, backLink = _a.backLink, prefix = _a.prefix, postfix = _a.postfix, preHeader = _a.preHeader, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, className = _a.className;
+    var header = (0, react_1.useMemo)(function () {
+        if (type === 'h1')
+            return (0, jsx_runtime_1.jsx)("h1", { children: children });
+        if (type === 'h2')
+            return (0, jsx_runtime_1.jsx)("h2", { children: children });
+        if (type === 'h3')
+            return (0, jsx_runtime_1.jsx)("h3", { children: children });
+        if (type === 'h4')
+            return (0, jsx_runtime_1.jsx)("h4", { children: children });
+        return null;
+    }, [children, type]);
+    var backButton = (0, react_1.useMemo)(function () { return ((0, jsx_runtime_1.jsx)(antd_1.Button, { type: 'link', icon: (0, jsx_runtime_1.jsx)(icons_1.LeftOutlined, {}), size: 'large', shape: 'circle', onClick: onBack })); }, [onBack]);
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)('h', className) }, { children: [preHeader && (0, jsx_runtime_1.jsx)("div", __assign({ className: "h-row ".concat(textAlign) }, { children: preHeader })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "h-row ".concat(textAlign) }, { children: [prefix && (0, jsx_runtime_1.jsx)("div", __assign({ className: 'h-row-prefix' }, { children: prefix })), (onBack || backLink) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: 'h-row-back' }, { children: backLink ? (0, jsx_runtime_1.jsx)(link_1.default, __assign({ href: backLink }, { children: backButton })) : backButton }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: 'h-row-content' }, { children: [header, postfix && (0, jsx_runtime_1.jsx)("div", __assign({ className: 'h-row-content-postfix' }, { children: postfix }))] })), extra && (0, jsx_runtime_1.jsx)("div", __assign({ className: 'h-row-extra' }, { children: extra }))] })), subHeader && (0, jsx_runtime_1.jsx)("div", __assign({ className: "h-row ".concat(textAlign) }, { children: subHeader }))] })));
+};
+exports.default = H;

package/dist/ui/Panel.d.ts

@@ -0,0 +1,16 @@
+import React, { CSSProperties } from 'react';
+interface PanelProps {
+    children: React.ReactNode;
+    bg: 'white' | 'primary' | 'secondary' | 'black' | 'blue' | 'venice' | 'grey';
+    link?: {
+        href: string;
+        title: string;
+    };
+    image?: React.ReactNode;
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+    marginBottom?: 'xs' | 's' | 'md';
+}
+declare const Panel: React.FC<PanelProps>;
+export default Panel;

package/dist/ui/Panel.js

@@ -0,0 +1,24 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var link_1 = __importDefault(require("next/link"));
+var Panel = function (_a) {
+    var children = _a.children, bg = _a.bg, link = _a.link, image = _a.image, id = _a.id, className = _a.className, style = _a.style, marginBottom = _a.marginBottom;
+    var classNames = "panel ".concat(bg, "-bg ").concat(link ? 'is-panel-link' : '', " ").concat(className || '', " ").concat(marginBottom ? "mb-".concat(marginBottom) : '');
+    return link ? ((0, jsx_runtime_1.jsxs)(link_1.default, __assign({ className: classNames, href: link.href, id: id, style: style }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: 'panel-image' }, { children: image })), (0, jsx_runtime_1.jsx)("div", __assign({ className: 'panel-content' }, { children: children }))] }))) : ((0, jsx_runtime_1.jsxs)("div", __assign({ className: classNames, id: id, style: style }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: 'panel-image' }, { children: image })), (0, jsx_runtime_1.jsx)("div", __assign({ className: 'panel-content' }, { children: children }))] })));
+};
+exports.default = Panel;

package/dist/ui/SeoHead.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface SeoHeadProps {
+    children?: React.ReactNode;
+    metaTitle: string;
+    metaDescription: string;
+    noindex?: boolean;
+    nofollow?: boolean;
+    smmType?: 'website' | 'profile';
+    smmImageUrl?: string;
+    smmPageUrl?: string;
+}
+declare const SeoHead: React.FC<SeoHeadProps>;
+export default SeoHead;

package/dist/ui/SeoHead.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var head_1 = __importDefault(require("next/head"));
+var FrontendContext_1 = require("../utils/FrontendContext");
+var SeoHead = function (_a) {
+    var metaTitle = _a.metaTitle, metaDescription = _a.metaDescription, children = _a.children, _b = _a.noindex, noindex = _b === void 0 ? false : _b, _c = _a.nofollow, nofollow = _c === void 0 ? false : _c, smmImageUrl = _a.smmImageUrl, smmPageUrl = _a.smmPageUrl, _d = _a.smmType, smmType = _d === void 0 ? 'website' : _d;
+    var domain = (0, FrontendContext_1.useFrontendConfig)().domain;
+    return ((0, jsx_runtime_1.jsxs)(head_1.default, { children: [(0, jsx_runtime_1.jsx)("title", { children: metaTitle }), (0, jsx_runtime_1.jsx)("meta", { name: 'description', content: metaDescription }), (0, jsx_runtime_1.jsx)("meta", { name: 'theme-color', content: '#edf1f6' }), (0, jsx_runtime_1.jsx)("meta", { charSet: 'UTF-8' }), (0, jsx_runtime_1.jsx)("meta", { name: 'viewport', content: 'width=device-width, initial-scale=1, viewport-fit=cover' }), (0, jsx_runtime_1.jsx)("link", { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' }), (0, jsx_runtime_1.jsx)("link", { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' }), (0, jsx_runtime_1.jsx)("link", { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' }), (0, jsx_runtime_1.jsx)("link", { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }), (0, jsx_runtime_1.jsx)("link", { rel: 'manifest', href: '/manifest.json' }), (0, jsx_runtime_1.jsx)("meta", { name: 'robots', content: "".concat(noindex ? 'noindex' : 'index', ",").concat(nofollow ? 'nofollow' : 'follow') }), (0, jsx_runtime_1.jsx)("meta", { property: 'og:type', content: smmType }), smmPageUrl && (0, jsx_runtime_1.jsx)("meta", { property: 'og:url', content: smmPageUrl }), smmImageUrl && (0, jsx_runtime_1.jsx)("meta", { name: 'og:image', content: smmImageUrl }), (0, jsx_runtime_1.jsx)("meta", { property: 'og:title', content: metaTitle }), (0, jsx_runtime_1.jsx)("meta", { property: 'og:description', content: metaDescription }), (0, jsx_runtime_1.jsx)("meta", { name: 'twitter:card', content: 'summary_large_image' }), smmImageUrl && (0, jsx_runtime_1.jsx)("meta", { name: 'twitter:image', content: smmImageUrl }), domain && (0, jsx_runtime_1.jsx)("meta", { property: 'twitter:domain', content: domain }), smmPageUrl && (0, jsx_runtime_1.jsx)("meta", { property: 'twitter:url', content: smmPageUrl }), (0, jsx_runtime_1.jsx)("meta", { name: 'twitter:title', content: metaTitle }), (0, jsx_runtime_1.jsx)("meta", { name: 'twitter:description', content: metaDescription }), children] }));
+};
+exports.default = SeoHead;

package/dist/ui/index.d.ts

@@ -0,0 +1,6 @@
+export { default as H } from './H';
+export { default as Panel } from './Panel';
+export { default as FormItem } from './FormItem';
+export { default as FormError } from './FormError';
+export { default as AreYouSure } from './AreYouSure';
+export { default as SeoHead } from './SeoHead';

package/dist/ui/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SeoHead = exports.AreYouSure = exports.FormError = exports.FormItem = exports.Panel = exports.H = void 0;
+var H_1 = require("./H");
+Object.defineProperty(exports, "H", { enumerable: true, get: function () { return __importDefault(H_1).default; } });
+var Panel_1 = require("./Panel");
+Object.defineProperty(exports, "Panel", { enumerable: true, get: function () { return __importDefault(Panel_1).default; } });
+var FormItem_1 = require("./FormItem");
+Object.defineProperty(exports, "FormItem", { enumerable: true, get: function () { return __importDefault(FormItem_1).default; } });
+var FormError_1 = require("./FormError");
+Object.defineProperty(exports, "FormError", { enumerable: true, get: function () { return __importDefault(FormError_1).default; } });
+var AreYouSure_1 = require("./AreYouSure");
+Object.defineProperty(exports, "AreYouSure", { enumerable: true, get: function () { return __importDefault(AreYouSure_1).default; } });
+var SeoHead_1 = require("./SeoHead");
+Object.defineProperty(exports, "SeoHead", { enumerable: true, get: function () { return __importDefault(SeoHead_1).default; } });

package/dist/utils/FrontendContext.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface FrontendConfig {
+    loginPath?: string;
+    registerPath?: string;
+    forgotPasswordPath?: string;
+    defaultPath?: string;
+    domain?: string;
+    websiteUrl?: string;
+}
+export declare const useFrontendConfig: () => FrontendConfig;
+export declare const FrontendProvider: React.FC<{
+    config: FrontendConfig;
+    children: React.ReactNode;
+}>;

package/dist/utils/FrontendContext.js

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FrontendProvider = exports.useFrontendConfig = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var defaultConfig = {
+    loginPath: '/login',
+    registerPath: '/register',
+    forgotPasswordPath: '/forgot',
+    defaultPath: '/',
+};
+var FrontendContext = (0, react_1.createContext)(defaultConfig);
+var useFrontendConfig = function () { return (0, react_1.useContext)(FrontendContext); };
+exports.useFrontendConfig = useFrontendConfig;
+var FrontendProvider = function (_a) {
+    var config = _a.config, children = _a.children;
+    return ((0, jsx_runtime_1.jsx)(FrontendContext.Provider, __assign({ value: __assign(__assign({}, defaultConfig), config) }, { children: children })));
+};
+exports.FrontendProvider = FrontendProvider;

package/dist/utils/getError.d.ts

@@ -0,0 +1,11 @@
+interface Constraint {
+    code: string;
+    message: string;
+}
+interface ErrorObject {
+    code: string;
+    message: string;
+    data?: Record<string, Constraint>;
+}
+declare const getError: (error: unknown) => ErrorObject;
+export default getError;

package/dist/utils/getError.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var DEFAULT_CODE = 'no_code';
+var DEFAULT_MESSAGE = 'Error';
+var isObject = function (value) {
+    return typeof value === 'object' && !Array.isArray(value) && value !== null;
+};
+var isData = function (value) {
+    return isObject(value) &&
+        Object.values(value).every(function (constraint) {
+            return isObject(constraint) &&
+                'code' in constraint &&
+                typeof constraint.code === 'string' &&
+                'message' in constraint &&
+                typeof constraint.message === 'string';
+        });
+};
+var getError = function (error) {
+    // Trying to find the message of an error
+    if (!isObject(error) ||
+        !('message' in error) ||
+        typeof error.message !== 'string') {
+        return {
+            code: DEFAULT_CODE,
+            message: DEFAULT_MESSAGE,
+        };
+    }
+    // Trying to find the first GraphQL error
+    if (!('source' in error) ||
+        !isObject(error.source) ||
+        !('errors' in error.source) ||
+        !Array.isArray(error.source.errors) ||
+        error.source.errors.length === 0) {
+        return {
+            code: DEFAULT_CODE,
+            message: error.message,
+        };
+    }
+    var firstError = error.source.errors[0];
+    // Trying to find the message of the GraphQL error
+    if (!isObject(firstError) ||
+        !('message' in firstError) ||
+        typeof firstError.message !== 'string') {
+        return {
+            code: DEFAULT_CODE,
+            message: error.message,
+        };
+    }
+    // Trying to find the code of the GraphQL message
+    if (!('extensions' in firstError) ||
+        !isObject(firstError.extensions) ||
+        !('code' in firstError.extensions) ||
+        typeof firstError.extensions.code !== 'string') {
+        return {
+            code: DEFAULT_CODE,
+            message: firstError.message,
+        };
+    }
+    // Trying to find the data in the GraphQL message
+    if (!('data' in firstError.extensions) ||
+        !isData(firstError.extensions.data)) {
+        return {
+            code: firstError.extensions.code,
+            message: firstError.message,
+        };
+    }
+    return {
+        code: firstError.extensions.code,
+        message: firstError.message,
+        data: firstError.extensions.data,
+    };
+};
+exports.default = getError;

package/dist/utils/handleFormErrors.d.ts

@@ -0,0 +1,15 @@
+import { Form } from '@os-design/form';
+declare const handleFormErrors: (form: Form<any>, error: unknown) => void;
+/**
+ * @example { isExists: 'The error message' }
+ */
+export type ConstraintMessageMap = Record<string, string>;
+/**
+ * @example { name: { isExists: 'The error message' } }
+ */
+export type FieldConstraintMessageMap = Record<string, ConstraintMessageMap>;
+/**
+ * Formats the argument validation error to the field/message map.
+ */
+export declare const formatArgumentValidationError: (error: Error, messages?: FieldConstraintMessageMap) => Record<string, string>;
+export default handleFormErrors;

package/dist/utils/handleFormErrors.js

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatArgumentValidationError = void 0;
+var getError_1 = __importDefault(require("./getError"));
+var isObject_1 = __importDefault(require("./isObject"));
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+var handleFormErrors = function (form, error) {
+    var _a = (0, getError_1.default)(error), message = _a.message, data = _a.data;
+    if (data) {
+        Object.entries(data).forEach(function (_a) {
+            var key = _a[0], constraint = _a[1];
+            form.errors.set(key, constraint.message);
+        });
+    }
+    else {
+        form.errors.set('_error', message);
+    }
+};
+/**
+ * Formats the argument validation error to the field/message map.
+ */
+var formatArgumentValidationError = function (error, messages) {
+    if (messages === void 0) { messages = {}; }
+    // Check if validationErrors is exists
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var e = error;
+    if (!(0, isObject_1.default)(e.source) ||
+        !Array.isArray(e.source.errors) ||
+        e.source.errors.length === 0 ||
+        !(0, isObject_1.default)(e.source.errors[0]) ||
+        e.source.errors[0].message !== 'Argument Validation Error' ||
+        !(0, isObject_1.default)(e.source.errors[0].extensions) ||
+        !(0, isObject_1.default)(e.source.errors[0].extensions.exception) ||
+        !Array.isArray(e.source.errors[0].extensions.exception.validationErrors))
+        return {};
+    var validationErrors = e.source.errors[0].extensions.exception.validationErrors;
+    var errors = {};
+    validationErrors.forEach(function (validationError) {
+        // Check if validationError has property and constraints
+        if (!(0, isObject_1.default)(validationError) ||
+            typeof validationError.property !== 'string' ||
+            !(0, isObject_1.default)(validationError.constraints))
+            return;
+        // Check if constraints has key/value
+        var constraints = Object.entries(validationError.constraints);
+        if (constraints.length === 0)
+            return;
+        var _a = constraints[0], key = _a[0], message = _a[1];
+        if (typeof message !== 'string')
+            return;
+        var customMessage = messages[validationError.property]
+            ? messages[validationError.property][key]
+            : undefined;
+        errors[validationError.property] = customMessage || message;
+    });
+    return errors;
+};
+exports.formatArgumentValidationError = formatArgumentValidationError;
+exports.default = handleFormErrors;

package/dist/utils/index.d.ts

@@ -0,0 +1,5 @@
+export { default as getError } from './getError';
+export { default as handleFormErrors } from './handleFormErrors';
+export { default as isObject } from './isObject';
+export * from './limitExpiresAt';
+export * from './FrontendContext';

package/dist/utils/index.js

@@ -0,0 +1,28 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isObject = exports.handleFormErrors = exports.getError = void 0;
+var getError_1 = require("./getError");
+Object.defineProperty(exports, "getError", { enumerable: true, get: function () { return __importDefault(getError_1).default; } });
+var handleFormErrors_1 = require("./handleFormErrors");
+Object.defineProperty(exports, "handleFormErrors", { enumerable: true, get: function () { return __importDefault(handleFormErrors_1).default; } });
+var isObject_1 = require("./isObject");
+Object.defineProperty(exports, "isObject", { enumerable: true, get: function () { return __importDefault(isObject_1).default; } });
+__exportStar(require("./limitExpiresAt"), exports);
+__exportStar(require("./FrontendContext"), exports);

package/dist/utils/isObject.d.ts

@@ -0,0 +1,2 @@
+declare const isObject: (value: any) => boolean;
+export default isObject;

package/dist/utils/isObject.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var isObject = function (value) {
+    return typeof value === 'object' && value !== null;
+};
+exports.default = isObject;

package/dist/utils/limitExpiresAt.d.ts

@@ -0,0 +1,3 @@
+export declare const setLimitExpiresAt: (value: number) => void;
+export declare const getLimitExpiresAt: () => number;
+export declare const getLimitExpiresIn: () => number;

package/dist/utils/limitExpiresAt.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLimitExpiresIn = exports.getLimitExpiresAt = exports.setLimitExpiresAt = void 0;
+var LIMIT_EXPIRES_AT_KEY = 'lea';
+var setLimitExpiresAt = function (value) {
+    if (typeof window === 'undefined')
+        return;
+    window.sessionStorage.setItem(LIMIT_EXPIRES_AT_KEY, value.toString());
+};
+exports.setLimitExpiresAt = setLimitExpiresAt;
+var getLimitExpiresAt = function () {
+    if (typeof window === 'undefined')
+        return 0;
+    var value = window.sessionStorage.getItem(LIMIT_EXPIRES_AT_KEY);
+    return Number(value) || 0;
+};
+exports.getLimitExpiresAt = getLimitExpiresAt;
+var getLimitExpiresIn = function () { return (0, exports.getLimitExpiresAt)() - Date.now(); };
+exports.getLimitExpiresIn = getLimitExpiresIn;

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@skroz/frontend",
+  "version": "0.0.2",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "yarn clean && tsc",
+    "lint": "eslint --fix ."
+  },
+  "peerDependencies": {
+    "@os-design/form": "1.0.82",
+    "antd": "5.19.1",
+    "classnames": "2.3.2",
+    "next": "14.2.5",
+    "next-i18next": "15.3.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-relay": "17.0.0"
+  },
+  "devDependencies": {
+    "@ant-design/icons": "^5.0.0",
+    "@os-design/form": "1.0.82",
+    "@os-design/use-interval": "1.0.18",
+    "@types/node": "18.17.5",
+    "@types/react": "18.3.3",
+    "@types/react-relay": "16.0.6",
+    "antd": "5.19.1",
+    "babel-plugin-relay": "^17.0.0",
+    "classnames": "2.3.2",
+    "next": "14.2.5",
+    "next-i18next": "15.3.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-relay": "17.0.0",
+    "rimraf": "4.4.1",
+    "typescript": "4.9.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "3f0c992cd2b622b92fd58a82ba60137a58b73834"
+}

package/src/auth/Auth.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Tabs } from 'antd';
+import { FormProvider, useForm } from "@os-design/form";
+import { useRouter } from "next/router";
+import { useTranslation } from 'next-i18next';
+import Login from './Login';
+import Register from './Register';
+import Forgot from './Forgot';
+import { RegisterInput } from "../graphql/RegisterMutation.graphql";
+
+interface AuthProps {
+    authType: 'login' | 'register' | 'forgot';
+    setAuthType: (type: 'login' | 'register' | 'forgot') => void;
+    onFinish: () => void;
+}
+
+const Auth: React.FC<AuthProps> = ({ authType, setAuthType, onFinish }) => {
+    const router = useRouter();
+    const { t } = useTranslation('common');
+
+    // если это отдельная страница восстановления пароля, то он может быть передан в строке
+    let initialEmail = router.query.email;
+    if (typeof initialEmail !== 'string') initialEmail = '';
+
+    const { form } = useForm<RegisterInput>({
+        email: initialEmail || '',
+        password: '',
+        isPrivacyPolicyAgree: false,
+        isUserAgreementAgree: false
+    })
+
+    return (
+        <FormProvider form={form}>
+            {authType !== 'forgot' && (
+                <Tabs
+                    activeKey={authType}
+                    centered
+                    onChange={(activeKey: string) => setAuthType(activeKey as 'login' | 'register' | 'forgot')}
+                    className='no-text-selection'
+                    items={[
+                        {
+                            label: t('buttons.login'),
+                            key: 'login',
+                            children: (
+                                <Login
+                                    isModal
+                                    onFinish={onFinish}
+                                    onForgotClick={() => setAuthType('forgot')}
+                                />
+                            ),
+                        },
+                        {
+                            label: t('buttons.register'),
+                            key: 'register',
+                            children: (
+                                <Register
+                                    isModal
+                                    onFinish={onFinish}
+                                    onForgotClick={() => setAuthType('forgot')}
+                                />
+                            ),
+                        },
+                    ]}
+                />
+            )}
+            {authType === 'forgot' && (
+                <Forgot
+                    onFinish={onFinish}
+                    onLoginClick={() => setAuthType('login')}
+                />
+            )}
+        </FormProvider>
+    );
+};
+
+export default Auth;

package/src/auth/AuthFooterLinks.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useTranslation } from 'next-i18next';
+import Link from 'next/link';
+
+export type DocPage = 'privacy-policy' | 'agency-agreement';
+
+const AuthFooterLinks: React.FC = () => {
+    const { t } = useTranslation('common');
+    const docs: DocPage[] = ['agency-agreement', 'privacy-policy'];
+
+    return (
+        <div className='auth-footer-issues'>
+            {t('auth.agreeLoginLabel')}{' '}
+            {docs.map((doc, index) => (
+                <React.Fragment key={doc}>
+                    <Link href={`/docs/${doc}`} passHref target='_blank'>
+                        {t(`docsPage.${doc}`)}
+                    </Link>
+                    {index < docs.length - 1 && ', '}
+                </React.Fragment>
+            ))}
+            .
+        </div>
+    );
+};
+
+export default AuthFooterLinks;