@skroz/frontend 0.0.2

package/src/ui/FormError.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useExistingForm } from '@os-design/form';
+import { Alert } from 'antd';
+import FormItem from './FormItem';
+
+const FormError: React.FC = () => {
+    const { useError } = useExistingForm();
+    const error = useError('_error'); // Use any name that is not used by any field
+    return error ? (
+        <FormItem>
+            <Alert
+                type='error'
+                message={error}
+                style={{ whiteSpace: 'break-spaces' }}
+                className='allow-text-selection'
+            />
+        </FormItem>
+    ) : null;
+};
+
+export default FormError;

package/src/ui/FormItem.tsx

@@ -0,0 +1,60 @@
+import React, { CSSProperties } from 'react';
+import { Form } from 'antd';
+import { useTranslation } from 'next-i18next';
+
+interface FormItemProps {
+    children?: React.ReactNode;
+    label?: React.ReactNode;
+    className?: string;
+    error?: string | undefined;
+    help?: React.ReactNode;
+    isRequired?: boolean;
+    style?: CSSProperties;
+}
+
+const FormItem: React.FC<FormItemProps> = ({
+    children,
+    label,
+    error,
+    help,
+    className,
+    isRequired = false,
+    style,
+}) => {
+    const { t } = useTranslation('common');
+
+    return (
+        <Form.Item
+            style={style}
+            className={className}
+            label={
+                label ? (
+                    <span
+                        style={{
+                            width: '100%',
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'center',
+                        }}
+                    >
+                        <span>
+                            {label}
+                            {isRequired && (
+                                <span style={{ color: 'red', marginLeft: 5 }} title={t('formItem.required')}>
+                                    *
+                                </span>
+                            )}
+                        </span>
+                        <span>{help}</span>
+                    </span>
+                ) : null
+            }
+            help={error}
+            validateStatus={error !== undefined ? 'error' : undefined}
+        >
+            {children}
+        </Form.Item>
+    );
+};
+
+export default FormItem;

package/src/ui/H.tsx

@@ -0,0 +1,76 @@
+import React, { useMemo } from 'react';
+import { Button } from 'antd';
+import { LeftOutlined } from '@ant-design/icons';
+import Link from 'next/link';
+import classNames from 'classnames';
+
+interface HProps {
+    type: 'h1' | 'h2' | 'h3' | 'h4';
+    onBack?: () => void; // если функция, например router.back()
+    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; // Add className prop support
+}
+
+const H: React.FC<HProps> = ({
+    onBack,
+    children,
+    type,
+    extra,
+    subHeader,
+    backLink,
+    prefix,
+    postfix,
+    preHeader,
+    textAlign = 'left',
+    className,
+}) => {
+    const header = useMemo(() => {
+        if (type === 'h1') return <h1>{children}</h1>;
+        if (type === 'h2') return <h2>{children}</h2>;
+        if (type === 'h3') return <h3>{children}</h3>;
+        if (type === 'h4') return <h4>{children}</h4>;
+        return null;
+    }, [children, type]);
+
+    const backButton = useMemo(
+        () => (
+            <Button
+                type='link'
+                icon={<LeftOutlined />}
+                size='large'
+                shape='circle'
+                onClick={onBack}
+            />
+        ),
+        [onBack]
+    );
+
+    return (
+        <div className={classNames('h', className)}>
+            {preHeader && <div className={`h-row ${textAlign}`}>{preHeader}</div>}
+            <div className={`h-row ${textAlign}`}>
+                {prefix && <div className='h-row-prefix'>{prefix}</div>}
+                {(onBack || backLink) && (
+                    <div className='h-row-back'>
+                        {backLink ? <Link href={backLink}>{backButton}</Link> : backButton}
+                    </div>
+                )}
+                <div className='h-row-content'>
+                    {header}
+                    {postfix && <div className='h-row-content-postfix'>{postfix}</div>}
+                </div>
+                {extra && <div className='h-row-extra'>{extra}</div>}
+            </div>
+            {subHeader && <div className={`h-row ${textAlign}`}>{subHeader}</div>}
+        </div>
+    );
+};
+
+export default H;

package/src/ui/Panel.tsx

@@ -0,0 +1,44 @@
+import React, { CSSProperties } from 'react';
+import Link from 'next/link';
+
+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';
+}
+
+const Panel: React.FC<PanelProps> = ({
+    children,
+    bg,
+    link,
+    image,
+    id,
+    className,
+    style,
+    marginBottom,
+}) => {
+    const classNames = `panel ${bg}-bg ${link ? 'is-panel-link' : ''} ${className || ''
+        } ${marginBottom ? `mb-${marginBottom}` : ''}`;
+
+    return link ? (
+        <Link className={classNames} href={link.href} id={id} style={style}>
+            <div className='panel-image'>{image}</div>
+            <div className='panel-content'>{children}</div>
+        </Link>
+    ) : (
+        <div className={classNames} id={id} style={style}>
+            <div className='panel-image'>{image}</div>
+            <div className='panel-content'>{children}</div>
+        </div>
+    );
+};
+
+export default Panel;

package/src/ui/SeoHead.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import Head from 'next/head';
+import { useFrontendConfig } from '../utils/FrontendContext';
+
+interface SeoHeadProps {
+    children?: React.ReactNode;
+    metaTitle: string;
+    metaDescription: string;
+    noindex?: boolean;
+    nofollow?: boolean;
+    smmType?: 'website' | 'profile';
+    smmImageUrl?: string;
+    smmPageUrl?: string;
+}
+
+const SeoHead: React.FC<SeoHeadProps> = ({
+    metaTitle,
+    metaDescription,
+    children,
+    noindex = false,
+    nofollow = false,
+    smmImageUrl,
+    smmPageUrl,
+    smmType = 'website',
+}) => {
+    const { domain } = useFrontendConfig();
+
+    return (
+        <Head>
+            <title>{metaTitle}</title>
+            <meta name='description' content={metaDescription} />
+            <meta name='theme-color' content='#edf1f6' />
+            <meta charSet='UTF-8' />
+            <meta
+                name='viewport'
+                content='width=device-width, initial-scale=1, viewport-fit=cover'
+            />
+            <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png' />
+            <link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png' />
+            <link rel='icon' type='image/png' sizes='16x16' href='/favicon-16x16.png' />
+            <link rel='icon' type='image/x-icon' href='/favicon.ico' />
+            <link rel='manifest' href='/manifest.json' />
+
+            <meta
+                name='robots'
+                content={`${noindex ? 'noindex' : 'index'},${nofollow ? 'nofollow' : 'follow'
+                    }`}
+            />
+
+            {/* для сниппета в социальных сетях */}
+            <meta property='og:type' content={smmType} />
+            {smmPageUrl && <meta property='og:url' content={smmPageUrl} />}
+            {smmImageUrl && <meta name='og:image' content={smmImageUrl} />}
+            <meta property='og:title' content={metaTitle} />
+            <meta property='og:description' content={metaDescription} />
+
+            <meta name='twitter:card' content='summary_large_image' />
+            {smmImageUrl && <meta name='twitter:image' content={smmImageUrl} />}
+            {domain && <meta property='twitter:domain' content={domain} />}
+            {smmPageUrl && <meta property='twitter:url' content={smmPageUrl} />}
+            <meta name='twitter:title' content={metaTitle} />
+            <meta name='twitter:description' content={metaDescription} />
+
+            {children}
+        </Head>
+    );
+};
+
+export default SeoHead;

package/src/ui/index.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/src/utils/FrontendContext.tsx

@@ -0,0 +1,30 @@
+import React, { createContext, useContext } from 'react';
+
+export interface FrontendConfig {
+  loginPath?: string;
+  registerPath?: string;
+  forgotPasswordPath?: string;
+  defaultPath?: string;
+  domain?: string;
+  websiteUrl?: string; // Used in SeoHead
+}
+
+const defaultConfig: FrontendConfig = {
+  loginPath: '/login',
+  registerPath: '/register',
+  forgotPasswordPath: '/forgot',
+  defaultPath: '/',
+};
+
+const FrontendContext = createContext<FrontendConfig>(defaultConfig);
+
+export const useFrontendConfig = () => useContext(FrontendContext);
+
+export const FrontendProvider: React.FC<{
+  config: FrontendConfig;
+  children: React.ReactNode;
+}> = ({ config, children }) => (
+  <FrontendContext.Provider value={{ ...defaultConfig, ...config }}>
+    {children}
+  </FrontendContext.Provider>
+);

package/src/utils/getError.ts

@@ -0,0 +1,101 @@
+interface Constraint {
+    code: string;
+    message: string;
+}
+
+interface ErrorObject {
+    code: string;
+    message: string;
+    data?: Record<string, Constraint>;
+}
+
+const DEFAULT_CODE = 'no_code';
+const DEFAULT_MESSAGE = 'Error';
+
+const isObject = (value: unknown): value is object =>
+    typeof value === 'object' && !Array.isArray(value) && value !== null;
+
+const isData = (value: unknown): value is Record<string, Constraint> =>
+    isObject(value) &&
+    Object.values(value).every(
+        (constraint: unknown) =>
+            isObject(constraint) &&
+            'code' in constraint &&
+            typeof constraint.code === 'string' &&
+            'message' in constraint &&
+            typeof constraint.message === 'string'
+    );
+
+const getError = (error: unknown): ErrorObject => {
+    // Trying to find the message of an error
+    if (
+        !isObject(error) ||
+        !('message' in error) ||
+        typeof (error as any).message !== 'string'
+    ) {
+        return {
+            code: DEFAULT_CODE,
+            message: DEFAULT_MESSAGE,
+        };
+    }
+
+    // Trying to find the first GraphQL error
+    if (
+        !('source' in error) ||
+        !isObject((error as any).source) ||
+        !('errors' in (error as any).source) ||
+        !Array.isArray((error as any).source.errors) ||
+        (error as any).source.errors.length === 0
+    ) {
+        return {
+            code: DEFAULT_CODE,
+            message: (error as any).message,
+        };
+    }
+
+    const firstError = (error as any).source.errors[0] as unknown;
+
+    // Trying to find the message of the GraphQL error
+    if (
+        !isObject(firstError) ||
+        !('message' in firstError) ||
+        typeof (firstError as any).message !== 'string'
+    ) {
+        return {
+            code: DEFAULT_CODE,
+            message: (error as any).message,
+        };
+    }
+
+    // Trying to find the code of the GraphQL message
+    if (
+        !('extensions' in firstError) ||
+        !isObject((firstError as any).extensions) ||
+        !('code' in (firstError as any).extensions) ||
+        typeof (firstError as any).extensions.code !== 'string'
+    ) {
+        return {
+            code: DEFAULT_CODE,
+            message: (firstError as any).message,
+        };
+    }
+
+    // Trying to find the data in the GraphQL message
+    if (
+        !('data' in (firstError as any).extensions) ||
+        !isData((firstError as any).extensions.data)
+    ) {
+        return {
+            code: (firstError as any).extensions.code,
+            message: (firstError as any).message,
+        };
+    }
+
+    return {
+        code: (firstError as any).extensions.code,
+        message: (firstError as any).message,
+        data: (firstError as any).extensions.data,
+    };
+};
+
+export default getError;

package/src/utils/handleFormErrors.ts

@@ -0,0 +1,77 @@
+import { Form } from '@os-design/form';
+import getError from './getError';
+import isObject from './isObject';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const handleFormErrors = (form: Form<any>, error: unknown): void => {
+    const { message, data } = getError(error);
+    if (data) {
+        Object.entries(data).forEach(([key, constraint]) => {
+            form.errors.set(key, constraint.message);
+        });
+    } else {
+        form.errors.set('_error', message);
+    }
+};
+
+/**
+ * @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 const formatArgumentValidationError = (
+    error: Error,
+    messages: FieldConstraintMessageMap = {}
+): Record<string, string> => {
+    // Check if validationErrors is exists
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const e = error as any;
+    if (
+        !isObject(e.source) ||
+        !Array.isArray(e.source.errors) ||
+        e.source.errors.length === 0 ||
+        !isObject(e.source.errors[0]) ||
+        e.source.errors[0].message !== 'Argument Validation Error' ||
+        !isObject(e.source.errors[0].extensions) ||
+        !isObject(e.source.errors[0].extensions.exception) ||
+        !Array.isArray(e.source.errors[0].extensions.exception.validationErrors)
+    )
+        return {};
+
+    const { validationErrors } = e.source.errors[0].extensions.exception;
+    const errors: Record<string, string> = {};
+
+    validationErrors.forEach((validationError: any) => {
+        // Check if validationError has property and constraints
+        if (
+            !isObject(validationError) ||
+            typeof validationError.property !== 'string' ||
+            !isObject(validationError.constraints)
+        )
+            return;
+
+        // Check if constraints has key/value
+        const constraints = Object.entries(validationError.constraints);
+        if (constraints.length === 0) return;
+
+        const [key, message] = constraints[0];
+        if (typeof message !== 'string') return;
+
+        const customMessage = messages[validationError.property]
+            ? messages[validationError.property][key]
+            : undefined;
+        errors[validationError.property] = customMessage || message;
+    });
+
+    return errors;
+};
+
+export default handleFormErrors;

package/src/utils/index.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/src/utils/isObject.ts

@@ -0,0 +1,4 @@
+const isObject = (value: any): boolean =>
+    typeof value === 'object' && value !== null;
+
+export default isObject;

package/src/utils/limitExpiresAt.ts

@@ -0,0 +1,14 @@
+const LIMIT_EXPIRES_AT_KEY = 'lea';
+
+export const setLimitExpiresAt = (value: number) => {
+    if (typeof window === 'undefined') return;
+    window.sessionStorage.setItem(LIMIT_EXPIRES_AT_KEY, value.toString());
+};
+
+export const getLimitExpiresAt = () => {
+    if (typeof window === 'undefined') return 0;
+    const value = window.sessionStorage.getItem(LIMIT_EXPIRES_AT_KEY);
+    return Number(value) || 0;
+};
+
+export const getLimitExpiresIn = () => getLimitExpiresAt() - Date.now();