@teambit/react.ui.error-fallback 0.0.0-cdb41241f2f4c8e0e98f402a679bbd5fc6b6244b

package/dist/error-fallback.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { FallbackProps } from 'react-error-boundary';
+export type ErrorFallbackProps = FallbackProps & {
+    className?: string;
+    children?: ReactNode;
+    cta?: string;
+};
+export declare function ErrorFallback({ resetErrorBoundary, className, children, cta, }: ErrorFallbackProps): React.JSX.Element;

package/dist/error-fallback.js

@@ -0,0 +1,34 @@
+"use strict";
+/* eslint-disable @typescript-eslint/no-misused-promises */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorFallback = ErrorFallback;
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const design_ui_icon_button_1 = require("@teambit/design.ui.icon-button");
+const base_ui_styles_flex_center_1 = require("@teambit/base-ui.styles.flex-center");
+const error_fallback_module_scss_1 = __importDefault(require("./error-fallback.module.scss"));
+function ErrorFallback({ 
+/* error, */
+resetErrorBoundary, className, children = 'Failed to render', cta = 'try again', }) {
+    const handleClick = () => __awaiter(this, void 0, void 0, function* () {
+        yield new Promise((resolve) => setTimeout(resolve, 480));
+        resetErrorBoundary();
+    });
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(error_fallback_module_scss_1.default.errorFallback, base_ui_styles_flex_center_1.flexCenter, className) },
+        react_1.default.createElement("div", { className: error_fallback_module_scss_1.default.icon }),
+        react_1.default.createElement("div", { className: error_fallback_module_scss_1.default.message }, children),
+        react_1.default.createElement(design_ui_icon_button_1.IconButton, { onClick: handleClick, className: error_fallback_module_scss_1.default.retryButton }, cta)));
+}
+//# sourceMappingURL=error-fallback.js.map

package/dist/error-fallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-fallback.js","sourceRoot":"","sources":["../error-fallback.tsx"],"names":[],"mappings":";AAAA,2DAA2D;;;;;;;;;;;;;;AAY3D,sCAqBC;AA9BD,kDAA0B;AAC1B,4DAAoC;AAEpC,0EAA4D;AAC5D,oFAAiE;AAEjE,8FAAkD;AAGlD,SAAgB,aAAa,CAAC;AAC5B,YAAY;AACZ,kBAAkB,EAClB,SAAS,EACT,QAAQ,GAAG,kBAAkB,EAC7B,GAAG,GAAG,WAAW,GACE;IACnB,MAAM,WAAW,GAAG,GAAS,EAAE;QAC7B,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;QACzD,kBAAkB,EAAE,CAAC;IACvB,CAAC,CAAA,CAAC;IAEF,OAAO,CACL,uCAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,oCAAM,CAAC,aAAa,EAAE,uCAAU,EAAE,SAAS,CAAC;QACrE,uCAAK,SAAS,EAAE,oCAAM,CAAC,IAAI,GAAI;QAC/B,uCAAK,SAAS,EAAE,oCAAM,CAAC,OAAO,IAAG,QAAQ,CAAO;QAChD,8BAAC,kCAAU,IAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,oCAAM,CAAC,WAAW,IAC5D,GAAG,CACO,CACT,CACP,CAAC;AACJ,CAAC"}

package/dist/error-fallback.module.scss

@@ -0,0 +1,42 @@
+.icon {
+  // fail-safe inline image (with the color #e62e5c, $r5  0)
+  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E%3Ctitle%3E%3C/title%3E%3Cpath fill='%23e62e5c' d='M256 512c141.385 0 256-114.615 256-256s-114.615-256-256-256c-141.385 0-256 114.615-256 256s114.615 256 256 256zM376.262 171.498l-86.038 84.5 86.038 84.511c10.451 10.275 10.183 25.962 0 35.968-10.077 9.891-25.68 10.17-36.038 0l-84.222-82.743-84.235 82.743c-10.345 10.17-25.949 9.891-36.026 0-10.182-10.007-10.461-25.693 0-35.968l86.038-84.511-86.038-84.501c-10.461-10.286-10.182-25.971 0-35.978 10.077-9.891 25.681-10.159 36.026 0l84.235 82.743 84.222-82.743c10.358-10.159 25.962-9.891 36.038 0 10.183 10.007 10.451 25.692 0 35.978z'%3E%3C/path%3E%3C/svg%3E%0A");
+
+  height: 24px;
+  width: 24px;
+  background-color: white;
+  background-size: contain;
+  margin-bottom: 16px;
+  border-radius: 100%;
+}
+
+.message {
+  color: var(--bit-error-color, #e62e5c);
+  margin-bottom: 8px;
+}
+
+.errorFallback {
+  animation: enter 300ms ease-in forwards;
+
+  height: 100%;
+  padding: 8px;
+  border: 4px solid var(--bit-error-light, #f086a0);
+  border-radius: 4px;
+  box-sizing: border-box;
+
+  color: var(--bit-error-color, #e62e5c);
+  font-family: sans-serif;
+
+  > * {
+    flex: none; // prevent squashing in low res
+  }
+}
+
+@keyframes enter {
+  0% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { ErrorFallback } from './error-fallback';
+export type { ErrorFallbackProps } from './error-fallback';

package/dist/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorFallback = void 0;
+var error_fallback_1 = require("./error-fallback");
+Object.defineProperty(exports, "ErrorFallback", { enumerable: true, get: function () { return error_fallback_1.ErrorFallback; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,mDAAiD;AAAxC,+GAAA,aAAa,OAAA"}

package/dist/preview-1753818132020.js

@@ -0,0 +1,7 @@
+;
+;
+
+export const compositions = [];
+export const overview = [];
+
+export const compositions_metadata = {"compositions":[]};

package/error-fallback.module.scss

@@ -0,0 +1,42 @@
+.icon {
+  // fail-safe inline image (with the color #e62e5c, $r5  0)
+  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E%3Ctitle%3E%3C/title%3E%3Cpath fill='%23e62e5c' d='M256 512c141.385 0 256-114.615 256-256s-114.615-256-256-256c-141.385 0-256 114.615-256 256s114.615 256 256 256zM376.262 171.498l-86.038 84.5 86.038 84.511c10.451 10.275 10.183 25.962 0 35.968-10.077 9.891-25.68 10.17-36.038 0l-84.222-82.743-84.235 82.743c-10.345 10.17-25.949 9.891-36.026 0-10.182-10.007-10.461-25.693 0-35.968l86.038-84.511-86.038-84.501c-10.461-10.286-10.182-25.971 0-35.978 10.077-9.891 25.681-10.159 36.026 0l84.235 82.743 84.222-82.743c10.358-10.159 25.962-9.891 36.038 0 10.183 10.007 10.451 25.692 0 35.978z'%3E%3C/path%3E%3C/svg%3E%0A");
+
+  height: 24px;
+  width: 24px;
+  background-color: white;
+  background-size: contain;
+  margin-bottom: 16px;
+  border-radius: 100%;
+}
+
+.message {
+  color: var(--bit-error-color, #e62e5c);
+  margin-bottom: 8px;
+}
+
+.errorFallback {
+  animation: enter 300ms ease-in forwards;
+
+  height: 100%;
+  padding: 8px;
+  border: 4px solid var(--bit-error-light, #f086a0);
+  border-radius: 4px;
+  box-sizing: border-box;
+
+  color: var(--bit-error-color, #e62e5c);
+  font-family: sans-serif;
+
+  > * {
+    flex: none; // prevent squashing in low res
+  }
+}
+
+@keyframes enter {
+  0% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/error-fallback.tsx

@@ -0,0 +1,34 @@
+/* eslint-disable @typescript-eslint/no-misused-promises */
+
+import type { ReactNode } from 'react';
+import React from 'react';
+import classnames from 'classnames';
+import type { FallbackProps } from 'react-error-boundary';
+import { IconButton } from '@teambit/design.ui.icon-button';
+import { flexCenter } from '@teambit/base-ui.styles.flex-center';
+
+import styles from './error-fallback.module.scss';
+
+export type ErrorFallbackProps = FallbackProps & { className?: string; children?: ReactNode; cta?: string };
+export function ErrorFallback({
+  /* error, */
+  resetErrorBoundary,
+  className,
+  children = 'Failed to render',
+  cta = 'try again',
+}: ErrorFallbackProps) {
+  const handleClick = async () => {
+    await new Promise((resolve) => setTimeout(resolve, 480));
+    resetErrorBoundary();
+  };
+
+  return (
+    <div className={classnames(styles.errorFallback, flexCenter, className)}>
+      <div className={styles.icon} />
+      <div className={styles.message}>{children}</div>
+      <IconButton onClick={handleClick} className={styles.retryButton}>
+        {cta}
+      </IconButton>
+    </div>
+  );
+}

package/index.ts

@@ -0,0 +1,2 @@
+export { ErrorFallback } from './error-fallback';
+export type { ErrorFallbackProps } from './error-fallback';

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@teambit/react.ui.error-fallback",
+  "version": "0.0.0-cdb41241f2f4c8e0e98f402a679bbd5fc6b6244b",
+  "homepage": "https://bit.cloud/teambit/react/ui/error-fallback",
+  "main": "dist/index.js",
+  "componentId": {
+    "scope": "teambit.react",
+    "name": "ui/error-fallback",
+    "version": "cdb41241f2f4c8e0e98f402a679bbd5fc6b6244b"
+  },
+  "dependencies": {
+    "classnames": "2.2.6",
+    "react-error-boundary": "^3.0.0",
+    "core-js": "^3.0.0",
+    "@teambit/base-ui.styles.flex-center": "1.0.0",
+    "@teambit/design.ui.icon-button": "1.0.16"
+  },
+  "devDependencies": {
+    "@types/classnames": "2.2.11",
+    "@types/react": "^17.0.8",
+    "@types/mocha": "9.1.0",
+    "@types/node": "12.20.4",
+    "@types/react-dom": "^17.0.5",
+    "@types/jest": "^26.0.0",
+    "@babel/runtime": "7.20.0",
+    "@types/testing-library__jest-dom": "5.9.5"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0"
+  },
+  "license": "Apache-2.0",
+  "optionalDependencies": {},
+  "peerDependenciesMeta": {},
+  "private": false,
+  "engines": {
+    "node": ">=12.22.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/teambit/bit"
+  },
+  "keywords": [
+    "bit",
+    "components",
+    "collaboration",
+    "web",
+    "react",
+    "react-components",
+    "angular",
+    "angular-components"
+  ]
+}

package/types/asset.d.ts

@@ -0,0 +1,29 @@
+declare module '*.png' {
+  const value: any;
+  export = value;
+}
+declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react';
+
+  export const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>;
+  const src: string;
+  export default src;
+}
+
+// @TODO Gilad
+declare module '*.jpg' {
+  const value: any;
+  export = value;
+}
+declare module '*.jpeg' {
+  const value: any;
+  export = value;
+}
+declare module '*.gif' {
+  const value: any;
+  export = value;
+}
+declare module '*.bmp' {
+  const value: any;
+  export = value;
+}

package/types/style.d.ts

@@ -0,0 +1,42 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.mdx' {
+  const component: any;
+  export default component;
+}