@cloud-ru/uikit-product-error-pages 0.13.7

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright 2023 Cloud technology Limited (Ltd.)
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,30 @@
+# Error Pages
+
+## Installation
+`npm i @cloud-ru/uikit-product-error-pages`
+
+## Props
+
+```ts
+enum LogoVariant {
+  MLSpace = 'MLSpace',
+  Cloud = 'Cloud',
+  None = 'None',
+}
+
+enum ErrorType {
+  FrontendError = 'FrontendError',
+  PageUnavailable = 'PageUnavailable',
+  PageNotFound = 'PageNotFound',
+}
+
+type ErrorPageProps = WithSupportProps<{
+  className: string;
+  mainPageUrl: string;
+  onSupportCenterClick(): void;
+  logoVariant?: LogoVariant;
+  errorType?: ErrorType;
+}>;
+```
+
+

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@cloud-ru/uikit-product-error-pages",
+  "title": "Error Pages",
+  "version": "0.13.7",
+  "sideEffects": [
+    "*.css",
+    "*.woff",
+    "*.woff2"
+  ],
+  "description": "",
+  "types": "./dist/esm/index.d.ts",
+  "exports": {
+    "import": "./dist/esm/index.js",
+    "require": "./dist/cjs/index.js"
+  },
+  "files": [
+    "dist/esm",
+    "dist/cjs",
+    "src",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "homepage": "https://gitverse.ru/cloud-ru-tech/uikit-product/-/tree/master/packages/error-pages",
+  "repository": {
+    "type": "git",
+    "url": "https://gitverse.ru/cloud-ru-tech/uikit-product.git",
+    "directory": "packages/error-pages"
+  },
+  "author": {
+    "name": "Akhremenko Grigorii",
+    "url": "https://github.com/AGrigorii"
+  },
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {},
+  "dependencies": {
+    "@cloud-ru/uikit-product-icons": "15.1.1",
+    "@cloud-ru/uikit-product-utils": "7.0.0",
+    "@snack-uikit/button": "0.19.7",
+    "@snack-uikit/link": "0.15.9",
+    "@snack-uikit/tag": "0.12.4",
+    "@snack-uikit/utils": "3.7.0",
+    "classnames": "2.5.1"
+  },
+  "peerDependencies": {
+    "@cloud-ru/uikit-product-locale": "*"
+  },
+  "gitHead": "e8bd79bc92b26a8f52611972eec98a867536ccd3"
+}

package/src/components/ErrorPage.tsx

@@ -0,0 +1,208 @@
+import cn from 'classnames';
+import { useMemo } from 'react';
+
+import { CloudFullLogoSVG, MailInterfaceSVG, MlSpaceFullLogoSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { extractSupportProps, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { ButtonFilled, ButtonOutline } from '@snack-uikit/button';
+import { Link } from '@snack-uikit/link';
+import { Tag } from '@snack-uikit/tag';
+import { isBrowser } from '@snack-uikit/utils';
+
+import { COLORS, ErrorType, LogoVariant } from './constants';
+import { useGetButtonPropsByErrorType, useGetContentByErrorType } from './hooks';
+import styles from './styles.module.scss';
+
+export type ErrorPageProps = WithSupportProps<{
+  className?: string;
+  mainPageUrl?: string;
+  onSupportCenterClick?(): void;
+  logoVariant?: LogoVariant;
+  errorType?: ErrorType;
+  showMainButton?: boolean;
+}>;
+
+export function ErrorPage({
+  className,
+  mainPageUrl = '/',
+  onSupportCenterClick,
+  logoVariant = LogoVariant.None,
+  errorType = ErrorType.FrontendError,
+  showMainButton = true,
+  ...rest
+}: ErrorPageProps) {
+  const { t } = useLocale('ErrorPage');
+  const content = useGetContentByErrorType(errorType);
+  const button = useGetButtonPropsByErrorType(errorType, mainPageUrl);
+
+  const hasMainPageLink = [ErrorType.FrontendError].includes(errorType);
+  const hasBackLink = [ErrorType.FrontendError, ErrorType.PageUnavailable].includes(errorType);
+
+  const logo = useMemo(() => {
+    switch (logoVariant) {
+      case LogoVariant.MLSpace:
+        return (
+          <div className={styles.logo}>
+            <MlSpaceFullLogoSVG />
+          </div>
+        );
+      case LogoVariant.Cloud:
+        return (
+          <div className={styles.logo}>
+            <CloudFullLogoSVG />
+          </div>
+        );
+      case LogoVariant.None:
+      default:
+        return null;
+    }
+  }, [logoVariant]);
+
+  return (
+    <div className={cn(styles.wrapper, className)} {...extractSupportProps(rest)}>
+      <div className={styles.leftSide}>
+        <div className={styles.textContainer}>
+          {logo}
+
+          <h1 className={styles.title} data-user>
+            {content.title}
+
+            {content.statusCode && (
+              <Tag className={styles.statusCode} appearance='neutral' size='s' label={String(content.statusCode)} />
+            )}
+          </h1>
+
+          <div className={styles.actionWrapper}>
+            <span className={styles.actionsTitle}>{content.text}</span>
+
+            <div className={styles.actionsLink}>
+              {hasMainPageLink && <Link size='m' href={mainPageUrl} target={'_self'} text={t('mainPageLink')} />}
+
+              {hasBackLink && (
+                <Link
+                  size='m'
+                  onClick={() => isBrowser() && window.history.back()}
+                  target={'_self'}
+                  text={t('backLink')}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className={styles.buttonContainer}>
+          {onSupportCenterClick && (
+            <ButtonOutline
+              size='m'
+              className={styles.button}
+              label={t('supportCenterButton')}
+              onClick={onSupportCenterClick}
+              icon={<MailInterfaceSVG />}
+            />
+          )}
+          {showMainButton && (
+            <ButtonFilled
+              size='m'
+              className={styles.button}
+              label={button.text}
+              href={button.href}
+              target={button.href && '_self'}
+              onClick={button.onClick}
+              icon={button.icon}
+            />
+          )}
+        </div>
+      </div>
+      <div className={styles.rightSide}>
+        <svg className={styles.pic} viewBox='0 0 863 520' fill='none' xmlns='http://www.w3.org/2000/svg'>
+          <path
+            d='M721.711 93H94.2882C86.397 93 80 99.8168 80 108.226V446.774C80 455.183 86.397 462 94.2882 462H721.711C729.602 462 735.999 455.183 735.999 446.774V108.226C735.999 99.8168 729.602 93 721.711 93Z'
+            fill={`var(${COLORS.svgBackground})`}
+            stroke={`var(${COLORS.svgStroke})`}
+            strokeWidth='2'
+            strokeMiterlimit='10'
+          />
+          <path d='M735.999 165H81.7061' stroke={`var(${COLORS.svgStroke})`} strokeWidth='2' strokeMiterlimit='10' />
+          <path
+            d='M126.81 129C126.81 135.079 121.902 140 115.857 140C109.812 140 104.905 135.079 104.905 129C104.905 122.921 109.812 118 115.857 118C121.902 118 126.81 122.921 126.81 129Z'
+            stroke={`var(${COLORS.svgStroke})`}
+            strokeWidth='2'
+          />
+          <path
+            d='M158.681 129C158.681 135.079 153.773 140 147.729 140C141.684 140 136.776 135.079 136.776 129C136.776 122.921 141.684 118 147.729 118C153.773 118 158.681 122.921 158.681 129Z'
+            stroke={`var(${COLORS.svgStroke})`}
+            strokeWidth='2'
+          />
+          <path
+            d='M190.557 129C190.557 135.079 185.649 140 179.605 140C173.56 140 168.652 135.079 168.652 129C168.652 122.921 173.56 118 179.605 118C185.649 118 190.557 122.921 190.557 129Z'
+            stroke={`var(${COLORS.svgStroke})`}
+            strokeWidth='2'
+          />
+          <path
+            d='M22.0427 284.986L116.584 256.508C116.925 256.415 117.286 256.426 117.621 256.539C117.957 256.652 118.251 256.863 118.468 257.144C118.685 257.425 118.814 257.765 118.839 258.12C118.864 258.476 118.785 258.83 118.61 259.14L67.8006 344.25C67.6327 344.526 67.3933 344.75 67.108 344.899C66.8227 345.047 66.5024 345.115 66.1819 345.093C65.8613 345.072 65.5527 344.963 65.2893 344.778C65.0259 344.593 64.8177 344.338 64.6874 344.043L54.9955 322.218C54.8828 321.975 54.7176 321.759 54.5117 321.588C54.3059 321.417 54.0646 321.294 53.8056 321.229C53.5466 321.164 53.2765 321.158 53.0148 321.211C52.7532 321.265 52.5067 321.376 52.2934 321.538L16.6093 349.484C16.2343 349.771 15.7621 349.898 15.2948 349.837C14.8276 349.777 14.4029 349.533 14.1129 349.159L9.14941 342.742L4.36224 336.531C4.07866 336.159 3.95338 335.688 4.01394 335.222C4.0745 334.757 4.3159 334.334 4.68526 334.047L40.3693 306.101C40.6056 305.935 40.7986 305.714 40.9319 305.456C41.0651 305.199 41.1347 304.913 41.1347 304.623C41.1347 304.332 41.0651 304.046 40.9319 303.789C40.7986 303.532 40.6056 303.31 40.3693 303.144L21.426 287.914C21.2068 287.709 21.0442 287.45 20.9539 287.163C20.8636 286.875 20.8488 286.569 20.9109 286.274C20.973 285.98 21.11 285.706 21.3083 285.48C21.5067 285.255 21.7597 285.084 22.0427 284.986Z'
+            fill={`var(${COLORS.svgBackground})`}
+            stroke={`var(${COLORS.svgStroke})`}
+            strokeWidth='2'
+            strokeLinecap='round'
+          />
+          <path
+            d='M148.586 311.289L124.086 283.727'
+            stroke={`var(${COLORS.svgStroke})`}
+            strokeWidth='2'
+            strokeLinecap='round'
+          />
+          <path
+            d='M159.336 300.565L130.242 279.127'
+            stroke={`var(${COLORS.svgStroke})`}
+            strokeWidth='2'
+            strokeLinecap='round'
+          />
+          <path
+            d='M166.969 286.789L133.281 273.008'
+            stroke={`var(${COLORS.svgStroke})`}
+            strokeWidth='2'
+            strokeLinecap='round'
+          />
+          <path
+            d='M390.619 52.8901L157.466 483.672C155.767 486.812 154.919 490.334 155.006 493.894C155.093 497.454 156.112 500.932 157.964 503.987C159.815 507.041 162.436 509.57 165.57 511.325C168.704 513.08 172.245 514.001 175.847 514H642.153C645.755 514.001 649.296 513.08 652.43 511.325C655.564 509.57 658.185 507.041 660.036 503.987C661.888 500.932 662.907 497.454 662.994 493.894C663.081 490.334 662.233 486.812 660.534 483.672L427.41 52.8901C425.627 49.5993 422.974 46.8484 419.735 44.9306C416.495 43.0129 412.79 42 409.015 42C405.239 42 401.534 43.0129 398.294 44.9306C395.055 46.8484 392.402 49.5993 390.619 52.8901Z'
+            fill={`var(${COLORS.svgBackground})`}
+            stroke={`var(${COLORS.svgStroke})`}
+            strokeWidth='2'
+            strokeLinecap='round'
+          />
+          <path
+            d='M408.107 376C405.042 375.986 402.075 374.935 399.7 373.022C397.324 371.109 395.683 368.449 395.05 365.485L368.005 235.997C366.644 229.996 366.665 223.77 368.067 217.779C369.469 211.787 372.215 206.184 376.104 201.384C379.992 196.583 384.922 192.708 390.53 190.045C396.137 187.383 402.279 186 408.5 186C414.721 186 420.863 187.383 426.47 190.045C432.078 192.708 437.008 196.583 440.896 201.384C444.785 206.184 447.531 211.787 448.933 217.779C450.335 223.77 450.356 229.996 448.995 235.997L422.095 364.708C421.422 367.887 419.666 370.743 417.12 372.798C414.575 374.853 411.393 375.983 408.107 376Z'
+            fill={`var(${COLORS.svgExclamationMark})`}
+          />
+          <path
+            d='M408 454C402.66 454 397.44 452.416 393 449.45C388.559 446.483 385.099 442.266 383.055 437.332C381.012 432.399 380.477 426.97 381.519 421.733C382.561 416.495 385.132 411.684 388.908 407.908C392.684 404.132 397.495 401.561 402.733 400.519C407.97 399.477 413.399 400.012 418.332 402.055C423.266 404.099 427.483 407.559 430.45 412C433.416 416.44 435 421.66 435 427C434.992 434.158 432.145 441.021 427.083 446.083C422.021 451.145 415.158 453.992 408 454Z'
+            fill={`var(${COLORS.svgExclamationMark})`}
+          />
+          <path
+            fillRule='evenodd'
+            clipRule='evenodd'
+            d='M758.622 69.709C758.622 65.2907 762.204 61.709 766.622 61.709H777.378C781.796 61.709 785.378 65.2907 785.378 69.709V75.6192C785.378 79.4239 788.076 82.6524 791.712 83.7722C795.74 85.0126 799.606 86.623 803.269 88.5639C806.631 90.3449 810.821 89.9691 813.511 87.279L817.695 83.0952C820.819 79.971 825.884 79.971 829.009 83.0952L836.614 90.7003C839.738 93.8245 839.738 98.8899 836.614 102.014L832.43 106.198C829.74 108.888 829.364 113.078 831.145 116.44C833.086 120.103 834.697 123.969 835.937 127.997C837.057 131.633 840.285 134.331 844.09 134.331H850C854.418 134.331 858 137.913 858 142.331V153.087C858 157.505 854.418 161.087 850 161.087H844.09C840.285 161.087 837.057 163.785 835.937 167.421C834.697 171.449 833.086 175.315 831.145 178.978C829.364 182.34 829.74 186.53 832.43 189.22L836.614 193.404C839.738 196.528 839.738 201.593 836.614 204.718L829.009 212.323C825.884 215.447 820.819 215.447 817.695 212.323L813.511 208.139C810.821 205.449 806.631 205.073 803.269 206.854C799.606 208.795 795.74 210.405 791.712 211.646C788.076 212.766 785.378 215.994 785.378 219.799V225.709C785.378 230.127 781.796 233.709 777.378 233.709H766.622C762.204 233.709 758.622 230.127 758.622 225.709V219.799C758.622 215.994 755.924 212.766 752.288 211.646C748.26 210.405 744.395 208.795 740.731 206.854C737.369 205.073 733.179 205.449 730.489 208.139L726.305 212.323C723.181 215.447 718.116 215.447 714.992 212.323L707.386 204.718C704.262 201.593 704.262 196.528 707.386 193.404L711.57 189.22C714.26 186.53 714.636 182.34 712.855 178.978C710.914 175.315 709.303 171.449 708.063 167.421C706.943 163.785 703.715 161.087 699.91 161.087H694C689.582 161.087 686 157.505 686 153.087V142.331C686 137.913 689.582 134.331 694 134.331H699.91C703.715 134.331 706.943 131.633 708.063 127.997C709.303 123.969 710.914 120.103 712.855 116.44C714.636 113.078 714.26 108.888 711.57 106.198L707.386 102.014C704.262 98.8899 704.262 93.8246 707.386 90.7004L714.992 83.0952C718.116 79.971 723.181 79.971 726.305 83.0952L730.489 87.279C733.179 89.9691 737.369 90.3449 740.731 88.5639C744.395 86.623 748.26 85.0126 752.288 83.7722C755.924 82.6524 758.622 79.4239 758.622 75.6192V69.709ZM772 181.153C753.529 181.153 738.556 166.18 738.556 147.709C738.556 129.238 753.529 114.265 772 114.265C790.471 114.265 805.444 129.238 805.444 147.709C805.444 166.18 790.471 181.153 772 181.153Z'
+            fill={`var(${COLORS.svgBackground})`}
+            stroke={`var(${COLORS.svgStroke})`}
+            strokeWidth='2'
+            strokeMiterlimit='10'
+            className={styles.rotateSmall}
+          />
+          <path
+            fillRule='evenodd'
+            clipRule='evenodd'
+            d='M646 8C646 5.79102 647.791 4 650 4H662C664.209 4 666 5.79102 666 8V14.4608C666 18.2656 668.708 21.4784 672.304 22.7186C674.226 23.3813 676.095 24.1579 677.903 25.0403C681.322 26.7089 685.507 26.3511 688.197 23.6611L692.77 19.0889C694.332 17.5264 696.864 17.5264 698.427 19.0889L706.912 27.5732C708.474 29.1357 708.474 31.6689 706.912 33.2305L702.34 37.8025C699.649 40.4926 699.292 44.6783 700.96 48.0973C701.842 49.9049 702.619 51.7737 703.281 53.6955C704.521 57.2925 707.734 60 711.539 60H718C720.209 60 722 61.791 722 64V76C722 78.209 720.209 80 718 80H711.539C707.734 80 704.521 82.7075 703.281 86.3045C702.619 88.2261 701.842 90.0947 700.96 91.9021C699.292 95.3209 699.649 99.5063 702.339 102.196L706.912 106.77C708.474 108.331 708.474 110.864 706.912 112.426L698.427 120.911C696.864 122.474 694.332 122.474 692.77 120.911L688.198 116.339C685.508 113.649 681.322 113.292 677.903 114.96C676.095 115.843 674.226 116.619 672.305 117.282C668.708 118.522 666 121.734 666 125.539V132C666 134.209 664.209 136 662 136H650C647.791 136 646 134.209 646 132V125.539C646 121.734 643.292 118.522 639.696 117.281C637.774 116.619 635.905 115.842 634.097 114.96C630.679 113.291 626.493 113.649 623.803 116.339L619.23 120.912C617.668 122.474 615.136 122.474 613.574 120.912L605.088 112.427C603.526 110.864 603.526 108.332 605.088 106.77L609.661 102.197C612.351 99.5074 612.709 95.3217 611.04 91.9027C610.158 90.0951 609.381 88.2263 608.719 86.3045C607.479 82.7075 604.266 80 600.461 80H594C591.791 80 590 78.209 590 76V64C590 61.791 591.791 60 594 60H600.461C604.266 60 607.479 57.2925 608.719 53.6955C609.381 51.7737 610.158 49.9049 611.04 48.0973C612.709 44.6783 612.351 40.4926 609.661 37.8025L605.088 33.2305C603.526 31.668 603.526 29.1357 605.088 27.5732L613.574 19.0879C615.136 17.5264 617.668 17.5264 619.23 19.0879L623.803 23.6605C626.493 26.3503 630.679 26.708 634.098 25.0396C635.905 24.1574 637.774 23.381 639.696 22.7185C643.292 21.4784 646 18.2656 646 14.4609V8ZM656 95C642.193 95 631 83.8066 631 70C631 56.1934 642.193 45 656 45C669.807 45 681 56.1934 681 70C681 83.8066 669.807 95 656 95Z'
+            fill={`var(${COLORS.svgBackground})`}
+            stroke={`var(${COLORS.svgStroke})`}
+            strokeWidth='2'
+            strokeMiterlimit='10'
+            className={styles.rotateBig}
+          />
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+ErrorPage.logoVariants = LogoVariant;
+ErrorPage.errorTypes = ErrorType;

package/src/components/constants.tsx

@@ -0,0 +1,19 @@
+export enum LogoVariant {
+  MLSpace = 'MLSpace',
+  Cloud = 'Cloud',
+  None = 'None',
+}
+
+export enum ErrorType {
+  FrontendError = 'FrontendError',
+  PageUnavailable = 'PageUnavailable',
+  PageNotFound = 'PageNotFound',
+  Offline = 'Offline',
+  Redirect = 'Redirect',
+}
+
+export const COLORS = {
+  svgExclamationMark: '--svgExclamationMark',
+  svgStroke: '--svgStroke',
+  svgBackground: '--svgBackground',
+};

package/src/components/hooks.tsx

@@ -0,0 +1,71 @@
+import { useMemo } from 'react';
+
+import { HomeOutlineInterfaceSVG, RefreshInterfaceSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { isBrowser } from '@snack-uikit/utils';
+
+import { ErrorType } from './constants';
+
+export function useGetContentByErrorType(errorType: ErrorType) {
+  const { t } = useLocale('ErrorPage');
+
+  return useMemo(() => {
+    switch (errorType) {
+      case ErrorType.PageUnavailable:
+        return {
+          title: t('pageUnavailableTitle'),
+          text: t('actionRedirectTitle'),
+          statusCode: 403,
+        };
+      case ErrorType.PageNotFound:
+        return {
+          title: t('pageNotFoundTitle'),
+          text: t('actionRedirectTitle'),
+          statusCode: 404,
+        };
+      case ErrorType.Offline:
+        return {
+          title: t('offlineTitle'),
+          text: t('offlineText'),
+        };
+      case ErrorType.Redirect:
+        return {
+          title: t('redirectTitle'),
+          text: t('redirectText'),
+        };
+      case ErrorType.FrontendError:
+      default:
+        return {
+          title: t('frontendErrorTitle'),
+          text: t('actionRedirectTitle'),
+        };
+    }
+  }, [errorType, t]);
+}
+
+export function useGetButtonPropsByErrorType(errorType: ErrorType, mainPageUrl?: string) {
+  const { t } = useLocale('ErrorPage');
+
+  return useMemo(() => {
+    switch (errorType) {
+      case ErrorType.PageNotFound:
+      case ErrorType.PageUnavailable:
+        return {
+          text: t('mainPageLink'),
+          icon: <HomeOutlineInterfaceSVG />,
+          href: mainPageUrl,
+        };
+      case ErrorType.Redirect:
+        return {
+          text: t('redirectButton'),
+          href: mainPageUrl,
+        };
+      default:
+        return {
+          text: t('refreshButton'),
+          icon: <RefreshInterfaceSVG />,
+          onClick: () => isBrowser() && window.location.reload(),
+        };
+    }
+  }, [errorType, mainPageUrl, t]);
+}

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from './ErrorPage';