@teambit/react.ui.compositions-app 0.0.1

package/composition-app.docs.mdx

@@ -0,0 +1,3 @@
+This mounts compositions into the DOM in the component preview.
+
+this function can be overridden through ReactAspect.overrideCompositionsMounter() API to apply custom logic for component DOM mounting.

package/compositions-app.tsx

@@ -0,0 +1,31 @@
+import React, { ComponentType } from 'react';
+import { Composer } from '@teambit/base-ui.utils.composer';
+import { StandaloneNotFoundPage } from '@teambit/design.ui.pages.standalone-not-found-page';
+import { RenderingContext } from '@teambit/preview';
+import { ErrorFallback } from '@teambit/react.ui.error-fallback';
+import { useFallback } from '@teambit/react.ui.loader-fallback';
+import { ErrorBoundary } from 'react-error-boundary';
+
+// hide scrollbars so they won't be visible in the preview at the component card (and it's ok not to show them in the compositions page)
+const hideScrollbars = 'body::-webkit-scrollbar {display: none;}';
+
+export function CompositionsApp({
+  Composition,
+  previewContext,
+}: {
+  Composition?: ComponentType;
+  previewContext?: RenderingContext;
+}) {
+  const { providers = [] } = previewContext?.get('teambit.react/react') || {};
+
+  const safeComposition = useFallback(Composition && <Composition />, <StandaloneNotFoundPage />);
+
+  return (
+    <ErrorBoundary FallbackComponent={ErrorFallback} resetKeys={[Composition]}>
+      <Composer components={providers}>
+        <style>{hideScrollbars}</style>
+        {safeComposition}
+      </Composer>
+    </ErrorBoundary>
+  );
+}

package/compositions.app-root.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { RenderingContext } from '@teambit/preview';
+
+import { CompositionsApp } from './compositions-app';
+
+/**
+ * mounts compositions into the DOM in the component preview.
+ */
+export default (Composition: React.ComponentType, previewContext: RenderingContext) => {
+  ReactDOM.render(
+    <CompositionsApp Composition={Composition} previewContext={previewContext} />,
+    document.getElementById('root')
+  );
+};

package/compositions.compositions.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { CompositionsApp } from './compositions-app';
+
+const mockedComposition = () => <div>mocked composition</div>;
+// const mockedErrorComposition = () => {
+//   throw new Error('some generic error');
+// };
+
+export const Preview = () => {
+  return <CompositionsApp Composition={mockedComposition} />;
+};
+
+export const NotFound = () => {
+  return <CompositionsApp Composition={undefined} />;
+};
+
+// // TBD - automatically shows a large error message in dev mode
+// export const ErrorComposition = () => {
+//   return <CompositionsApp Composition={mockedErrorComposition} />;
+// };

package/dist/composition-app.docs.mdx

@@ -0,0 +1,3 @@
+This mounts compositions into the DOM in the component preview.
+
+this function can be overridden through ReactAspect.overrideCompositionsMounter() API to apply custom logic for component DOM mounting.

package/dist/compositions-app.d.ts

@@ -0,0 +1,6 @@
+import { ComponentType } from 'react';
+import { RenderingContext } from '@teambit/preview';
+export declare function CompositionsApp({ Composition, previewContext, }: {
+    Composition?: ComponentType;
+    previewContext?: RenderingContext;
+}): JSX.Element;

package/dist/compositions-app.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompositionsApp = void 0;
+const react_1 = __importDefault(require("react"));
+const base_ui_utils_composer_1 = require("@teambit/base-ui.utils.composer");
+const design_ui_pages_standalone_not_found_page_1 = require("@teambit/design.ui.pages.standalone-not-found-page");
+const react_ui_error_fallback_1 = require("@teambit/react.ui.error-fallback");
+const react_ui_loader_fallback_1 = require("@teambit/react.ui.loader-fallback");
+const react_error_boundary_1 = require("react-error-boundary");
+// hide scrollbars so they won't be visible in the preview at the component card (and it's ok not to show them in the compositions page)
+const hideScrollbars = 'body::-webkit-scrollbar {display: none;}';
+function CompositionsApp({ Composition, previewContext, }) {
+    const { providers = [] } = (previewContext === null || previewContext === void 0 ? void 0 : previewContext.get('teambit.react/react')) || {};
+    const safeComposition = (0, react_ui_loader_fallback_1.useFallback)(Composition && react_1.default.createElement(Composition, null), react_1.default.createElement(design_ui_pages_standalone_not_found_page_1.StandaloneNotFoundPage, null));
+    return (react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { FallbackComponent: react_ui_error_fallback_1.ErrorFallback, resetKeys: [Composition] },
+        react_1.default.createElement(base_ui_utils_composer_1.Composer, { components: providers },
+            react_1.default.createElement("style", null, hideScrollbars),
+            safeComposition)));
+}
+exports.CompositionsApp = CompositionsApp;
+//# sourceMappingURL=compositions-app.js.map

package/dist/compositions-app.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compositions-app.js","sourceRoot":"","sources":["../compositions-app.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA6C;AAC7C,4EAA2D;AAC3D,kHAA4F;AAE5F,8EAAiE;AACjE,gFAAgE;AAChE,+DAAqD;AAErD,wIAAwI;AACxI,MAAM,cAAc,GAAG,0CAA0C,CAAC;AAElE,SAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,cAAc,GAIf;IACC,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,GAAG,CAAC,qBAAqB,CAAC,KAAI,EAAE,CAAC;IAE5E,MAAM,eAAe,GAAG,IAAA,sCAAW,EAAC,WAAW,IAAI,8BAAC,WAAW,OAAG,EAAE,8BAAC,kEAAsB,OAAG,CAAC,CAAC;IAEhG,OAAO,CACL,8BAAC,oCAAa,IAAC,iBAAiB,EAAE,uCAAa,EAAE,SAAS,EAAE,CAAC,WAAW,CAAC;QACvE,8BAAC,iCAAQ,IAAC,UAAU,EAAE,SAAS;YAC7B,6CAAQ,cAAc,CAAS;YAC9B,eAAe,CACP,CACG,CACjB,CAAC;AACJ,CAAC;AAnBD,0CAmBC"}

package/dist/compositions.app-root.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { RenderingContext } from '@teambit/preview';
+declare const _default: (Composition: React.ComponentType, previewContext: RenderingContext) => void;
+/**
+ * mounts compositions into the DOM in the component preview.
+ */
+export default _default;

package/dist/compositions.app-root.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+const compositions_app_1 = require("./compositions-app");
+/**
+ * mounts compositions into the DOM in the component preview.
+ */
+exports.default = (Composition, previewContext) => {
+    react_dom_1.default.render(react_1.default.createElement(compositions_app_1.CompositionsApp, { Composition: Composition, previewContext: previewContext }), document.getElementById('root'));
+};
+//# sourceMappingURL=compositions.app-root.js.map

package/dist/compositions.app-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compositions.app-root.js","sourceRoot":"","sources":["../compositions.app-root.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,0DAAiC;AAGjC,yDAAqD;AAErD;;GAEG;AACH,kBAAe,CAAC,WAAgC,EAAE,cAAgC,EAAE,EAAE;IACpF,mBAAQ,CAAC,MAAM,CACb,8BAAC,kCAAe,IAAC,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,cAAc,GAAI,EAC7E,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAChC,CAAC;AACJ,CAAC,CAAC"}

package/dist/compositions.compositions.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const Preview: () => JSX.Element;
+export declare const NotFound: () => JSX.Element;

package/dist/compositions.compositions.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotFound = exports.Preview = void 0;
+const react_1 = __importDefault(require("react"));
+const compositions_app_1 = require("./compositions-app");
+const mockedComposition = () => react_1.default.createElement("div", null, "mocked composition");
+// const mockedErrorComposition = () => {
+//   throw new Error('some generic error');
+// };
+const Preview = () => {
+    return react_1.default.createElement(compositions_app_1.CompositionsApp, { Composition: mockedComposition });
+};
+exports.Preview = Preview;
+const NotFound = () => {
+    return react_1.default.createElement(compositions_app_1.CompositionsApp, { Composition: undefined });
+};
+exports.NotFound = NotFound;
+// // TBD - automatically shows a large error message in dev mode
+// export const ErrorComposition = () => {
+//   return <CompositionsApp Composition={mockedErrorComposition} />;
+// };
+//# sourceMappingURL=compositions.compositions.js.map

package/dist/compositions.compositions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compositions.compositions.js","sourceRoot":"","sources":["../compositions.compositions.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,yDAAqD;AAErD,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,gEAA6B,CAAC;AAC9D,yCAAyC;AACzC,2CAA2C;AAC3C,KAAK;AAEE,MAAM,OAAO,GAAG,GAAG,EAAE;IAC1B,OAAO,8BAAC,kCAAe,IAAC,WAAW,EAAE,iBAAiB,GAAI,CAAC;AAC7D,CAAC,CAAC;AAFW,QAAA,OAAO,WAElB;AAEK,MAAM,QAAQ,GAAG,GAAG,EAAE;IAC3B,OAAO,8BAAC,kCAAe,IAAC,WAAW,EAAE,SAAS,GAAI,CAAC;AACrD,CAAC,CAAC;AAFW,QAAA,QAAQ,YAEnB;AAEF,iEAAiE;AACjE,0CAA0C;AAC1C,qEAAqE;AACrE,KAAK"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { CompositionsApp } from './compositions-app';
+export { default } from './compositions.app-root';

package/dist/index.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = exports.CompositionsApp = void 0;
+var compositions_app_1 = require("./compositions-app");
+Object.defineProperty(exports, "CompositionsApp", { enumerable: true, get: function () { return compositions_app_1.CompositionsApp; } });
+var compositions_app_root_1 = require("./compositions.app-root");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(compositions_app_root_1).default; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;;;;AAAA,uDAAqD;AAA5C,mHAAA,eAAe,OAAA;AACxB,iEAAkD;AAAzC,iIAAA,OAAO,OAAA"}

package/dist/tsconfig.json

@@ -0,0 +1,32 @@
+{
+    "compilerOptions": {
+        "lib": [
+            "es2019",
+            "DOM",
+            "ES6",
+            "DOM.Iterable"
+        ],
+        "target": "es2015",
+        "module": "CommonJS",
+        "jsx": "react",
+        "allowJs": true,
+        "composite": true,
+        "declaration": true,
+        "sourceMap": true,
+        "skipLibCheck": true,
+        "experimentalDecorators": true,
+        "outDir": "dist",
+        "moduleResolution": "node",
+        "esModuleInterop": true,
+        "rootDir": ".",
+        "resolveJsonModule": true
+    },
+    "exclude": [
+        "dist",
+        "package.json"
+    ],
+    "include": [
+        "**/*",
+        "**/*.json"
+    ]
+}

package/index.ts

@@ -0,0 +1,2 @@
+export { CompositionsApp } from './compositions-app';
+export { default } from './compositions.app-root';

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@teambit/react.ui.compositions-app",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "componentId": {
+    "scope": "teambit.react",
+    "name": "ui/compositions-app",
+    "version": "0.0.1"
+  },
+  "dependencies": {
+    "react-error-boundary": "^3.0.0",
+    "core-js": "^3.0.0",
+    "@teambit/base-ui.utils.composer": "1.0.0",
+    "@teambit/design.ui.pages.standalone-not-found-page": "0.0.359",
+    "@teambit/react.ui.error-fallback": "0.0.111",
+    "@teambit/react.ui.loader-fallback": "0.0.90"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.8",
+    "@types/react-dom": "^17.0.5",
+    "@types/mocha": "9.1.0",
+    "@types/testing-library__jest-dom": "5.9.5",
+    "@babel/runtime": "7.12.18",
+    "@types/jest": "^26.0.0",
+    "@types/node": "12.20.4"
+  },
+  "peerDependencies": {
+    "react-dom": "^16.8.0 || ^17.0.0",
+    "react": "^16.8.0 || ^17.0.0"
+  },
+  "license": "Apache-2.0",
+  "bit": {
+    "bindingPrefix": "@teambit",
+    "env": {},
+    "overrides": {
+      "dependencies": {
+        "@teambit/legacy": "-",
+        "core-js": "^3.0.0",
+        "react-dom": "-",
+        "react": "-"
+      },
+      "devDependencies": {
+        "@teambit/legacy": "-",
+        "@types/mocha": "9.1.0",
+        "@types/testing-library__jest-dom": "5.9.5",
+        "@babel/runtime": "7.12.18",
+        "@types/jest": "^26.0.0",
+        "@types/react-dom": "^17.0.5",
+        "@types/react": "^17.0.8",
+        "@types/node": "12.20.4",
+        "react-dom": "-",
+        "react": "-"
+      },
+      "peerDependencies": {
+        "react-dom": "^16.8.0 || ^17.0.0",
+        "react": "^16.8.0 || ^17.0.0"
+      }
+    }
+  },
+  "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",
+    "vue",
+    "vue-components"
+  ]
+}

package/preview-1657129833874.js

@@ -0,0 +1,5 @@
+import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_compositions-app@0.0.1/dist/compositions.compositions.js';
+import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.react_ui_compositions-app@0.0.1/dist/composition-app.docs.mdx';
+
+export const compositions = [compositions_0];
+export const overview = [overview_0];

package/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "es2019",
+      "DOM",
+      "ES6",
+      "DOM.Iterable"
+    ],
+    "target": "es2015",
+    "module": "CommonJS",
+    "jsx": "react",
+    "allowJs": true,
+    "composite": true,
+    "declaration": true,
+    "sourceMap": true,
+    "skipLibCheck": true,
+    "experimentalDecorators": true,
+    "outDir": "dist",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "rootDir": ".",
+    "resolveJsonModule": true
+  },
+  "exclude": [
+    "dist",
+    "package.json"
+  ],
+  "include": [
+    "**/*",
+    "**/*.json"
+  ]
+}

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;
+}