@teambit/lanes.ui.lane-overview 0.0.1

package/dist/empty-lane-overview.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { EmptyComponentGalleryProps } from '@teambit/ui-foundation.ui.empty-component-gallery';
+export declare type EmptyLaneOverviewProps = {} & EmptyComponentGalleryProps;
+/**
+ * A component to show when the scope is empty
+ */
+export declare function EmptyLaneOverview(props: EmptyLaneOverviewProps): JSX.Element;

package/dist/empty-lane-overview.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.EmptyLaneOverview = void 0;
+const react_1 = __importDefault(require("react"));
+const ui_foundation_ui_empty_component_gallery_1 = require("@teambit/ui-foundation.ui.empty-component-gallery");
+const empty_lane_overview_module_scss_1 = __importDefault(require("./empty-lane-overview.module.scss"));
+/**
+ * A component to show when the scope is empty
+ */
+function EmptyLaneOverview(props) {
+    return (react_1.default.createElement(ui_foundation_ui_empty_component_gallery_1.EmptyComponentGallery, Object.assign({}, props),
+        react_1.default.createElement("div", { className: empty_lane_overview_module_scss_1.default.text }, "Start by snapping components to this Lane.")));
+}
+exports.EmptyLaneOverview = EmptyLaneOverview;
+//# sourceMappingURL=empty-lane-overview.js.map

package/dist/empty-lane-overview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-lane-overview.js","sourceRoot":"","sources":["../empty-lane-overview.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,gHAAsH;AACtH,wGAAuD;AAIvD;;GAEG;AACH,SAAgB,iBAAiB,CAAC,KAA6B;IAC7D,OAAO,CACL,8BAAC,gEAAqB,oBAAK,KAAK;QAC9B,uCAAK,SAAS,EAAE,yCAAM,CAAC,IAAI,iDAAkD,CACvD,CACzB,CAAC;AACJ,CAAC;AAND,8CAMC"}

package/dist/empty-lane-overview.module.scss

@@ -0,0 +1,3 @@
+.text {
+  margin-bottom: 30px;
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { LaneOverviewProps, LaneOverview, LaneOverviewLine, LaneOverviewLineSlot } from './lane-overview';
+export { EmptyLaneOverview, EmptyLaneOverviewProps } from './empty-lane-overview';

package/dist/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmptyLaneOverview = exports.LaneOverview = void 0;
+var lane_overview_1 = require("./lane-overview");
+Object.defineProperty(exports, "LaneOverview", { enumerable: true, get: function () { return lane_overview_1.LaneOverview; } });
+var empty_lane_overview_1 = require("./empty-lane-overview");
+Object.defineProperty(exports, "EmptyLaneOverview", { enumerable: true, get: function () { return empty_lane_overview_1.EmptyLaneOverview; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,iDAA0G;AAA9E,6GAAA,YAAY,OAAA;AACxC,6DAAkF;AAAzE,wHAAA,iBAAiB,OAAA"}

package/dist/lane-overview.d.ts

@@ -0,0 +1,12 @@
+import { ComponentType } from 'react';
+import { LanesHost } from '@teambit/lanes.ui.models.lanes-model';
+import { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';
+import { SlotRegistry } from '@teambit/harmony';
+export declare type LaneOverviewLine = ComponentType;
+export declare type LaneOverviewLineSlot = SlotRegistry<LaneOverviewLine[]>;
+export declare type LaneOverviewProps = {
+    routeSlot: RouteSlot;
+    overviewSlot?: LaneOverviewLineSlot;
+    host: LanesHost;
+};
+export declare function LaneOverview({ routeSlot, overviewSlot, host }: LaneOverviewProps): JSX.Element;

package/dist/lane-overview.js

@@ -0,0 +1,62 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LaneOverview = void 0;
+const react_1 = __importStar(require("react"));
+const lanes_ui_models_lanes_model_1 = require("@teambit/lanes.ui.models.lanes-model");
+const explorer_ui_gallery_component_grid_1 = require("@teambit/explorer.ui.gallery.component-grid");
+const ui_foundation_ui_react_router_slot_router_1 = require("@teambit/ui-foundation.ui.react-router.slot-router");
+const workspace_ui_workspace_component_card_1 = require("@teambit/workspace.ui.workspace-component-card");
+const lanes_hooks_use_lanes_1 = require("@teambit/lanes.hooks.use-lanes");
+const lanes_hooks_use_lane_components_1 = require("@teambit/lanes.hooks.use-lane-components");
+const lodash_flatten_1 = __importDefault(require("lodash.flatten"));
+const scope_1 = require("@teambit/scope");
+const lanes_ui_lane_details_1 = require("@teambit/lanes.ui.lane-details");
+const empty_lane_overview_1 = require("./empty-lane-overview");
+const lane_overview_module_scss_1 = __importDefault(require("./lane-overview.module.scss"));
+function LaneOverview({ routeSlot, overviewSlot, host }) {
+    const { lanesModel } = (0, lanes_hooks_use_lanes_1.useLanes)();
+    const overviewItems = (0, react_1.useMemo)(() => (0, lodash_flatten_1.default)(overviewSlot === null || overviewSlot === void 0 ? void 0 : overviewSlot.values()), [overviewSlot]);
+    const currentLane = lanesModel === null || lanesModel === void 0 ? void 0 : lanesModel.viewedLane;
+    if (!currentLane || !currentLane.id)
+        return null;
+    if (currentLane.components.length === 0)
+        return react_1.default.createElement(empty_lane_overview_1.EmptyLaneOverview, { name: currentLane.id.name });
+    return (react_1.default.createElement(LaneOverviewWithPreview, { host: host, currentLane: currentLane, overviewItems: overviewItems, routeSlot: routeSlot }));
+}
+exports.LaneOverview = LaneOverview;
+function LaneOverviewWithPreview({ currentLane, overviewItems, routeSlot, host }) {
+    const { loading, components } = (0, lanes_hooks_use_lane_components_1.useLaneComponents)(currentLane.id);
+    if (loading)
+        return null;
+    const ComponentCard = host === 'workspace'
+        ? ({ component }) => (react_1.default.createElement(workspace_ui_workspace_component_card_1.WorkspaceComponentCard, { component: component, componentUrl: lanes_ui_models_lanes_model_1.LanesModel.getLaneComponentUrl(component.id, currentLane.id) }))
+        : ({ component }) => (react_1.default.createElement(scope_1.ScopeComponentCard, { component: component, componentUrl: lanes_ui_models_lanes_model_1.LanesModel.getLaneComponentUrl(component.id, currentLane.id) }));
+    return (react_1.default.createElement("div", { className: lane_overview_module_scss_1.default.container },
+        react_1.default.createElement(lanes_ui_lane_details_1.LaneDetails, { className: lane_overview_module_scss_1.default.laneDetails, laneId: currentLane.id, description: '', componentCount: currentLane.components.length }),
+        react_1.default.createElement(explorer_ui_gallery_component_grid_1.ComponentGrid, null, components === null || components === void 0 ? void 0 : components.map((component, index) => (react_1.default.createElement(ComponentCard, { component: component, key: index })))),
+        routeSlot && react_1.default.createElement(ui_foundation_ui_react_router_slot_router_1.SlotRouter, { slot: routeSlot }),
+        overviewItems.length > 0 && overviewItems.map((Item, index) => react_1.default.createElement(Item, { key: index }))));
+}
+//# sourceMappingURL=lane-overview.js.map

package/dist/lane-overview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lane-overview.js","sourceRoot":"","sources":["../lane-overview.tsx"],"names":[],"mappings":"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"}

package/dist/lane-overview.module.scss

@@ -0,0 +1,10 @@
+.container {
+  padding: 50px 5% 150px 5%;
+  overflow-y: auto;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.laneDetails {
+  padding-bottom: 32px;
+}

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/empty-lane-overview.module.scss

@@ -0,0 +1,3 @@
+.text {
+  margin-bottom: 30px;
+}

package/empty-lane-overview.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { EmptyComponentGallery, EmptyComponentGalleryProps } from '@teambit/ui-foundation.ui.empty-component-gallery';
+import styles from './empty-lane-overview.module.scss';
+
+export type EmptyLaneOverviewProps = {} & EmptyComponentGalleryProps;
+
+/**
+ * A component to show when the scope is empty
+ */
+export function EmptyLaneOverview(props: EmptyLaneOverviewProps) {
+  return (
+    <EmptyComponentGallery {...props}>
+      <div className={styles.text}>Start by snapping components to this Lane.</div>
+    </EmptyComponentGallery>
+  );
+}

package/index.ts

@@ -0,0 +1,2 @@
+export { LaneOverviewProps, LaneOverview, LaneOverviewLine, LaneOverviewLineSlot } from './lane-overview';
+export { EmptyLaneOverview, EmptyLaneOverviewProps } from './empty-lane-overview';

package/lane-overview.module.scss

@@ -0,0 +1,10 @@
+.container {
+  padding: 50px 5% 150px 5%;
+  overflow-y: auto;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.laneDetails {
+  padding-bottom: 32px;
+}

package/lane-overview.tsx

@@ -0,0 +1,87 @@
+import React, { useMemo, ComponentType } from 'react';
+import { LaneModel, LanesModel, LanesHost } from '@teambit/lanes.ui.models.lanes-model';
+import { ComponentGrid } from '@teambit/explorer.ui.gallery.component-grid';
+import { RouteSlot, SlotRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';
+import { WorkspaceComponentCard } from '@teambit/workspace.ui.workspace-component-card';
+import { useLanes } from '@teambit/lanes.hooks.use-lanes';
+import { useLaneComponents } from '@teambit/lanes.hooks.use-lane-components';
+import flatten from 'lodash.flatten';
+import { SlotRegistry } from '@teambit/harmony';
+import { ScopeComponentCard } from '@teambit/scope';
+import { LaneDetails } from '@teambit/lanes.ui.lane-details';
+import { EmptyLaneOverview } from './empty-lane-overview';
+
+import styles from './lane-overview.module.scss';
+
+export type LaneOverviewLine = ComponentType;
+export type LaneOverviewLineSlot = SlotRegistry<LaneOverviewLine[]>;
+
+export type LaneOverviewProps = {
+  routeSlot: RouteSlot;
+  overviewSlot?: LaneOverviewLineSlot;
+  host: LanesHost;
+};
+export function LaneOverview({ routeSlot, overviewSlot, host }: LaneOverviewProps) {
+  const { lanesModel } = useLanes();
+  const overviewItems = useMemo(() => flatten(overviewSlot?.values()), [overviewSlot]);
+
+  const currentLane = lanesModel?.viewedLane;
+
+  if (!currentLane || !currentLane.id) return null;
+  if (currentLane.components.length === 0) return <EmptyLaneOverview name={currentLane.id.name} />;
+
+  return (
+    <LaneOverviewWithPreview
+      host={host}
+      currentLane={currentLane}
+      overviewItems={overviewItems}
+      routeSlot={routeSlot}
+    />
+  );
+}
+
+type LaneOverviewWithPreviewProps = {
+  currentLane: LaneModel;
+  overviewItems: LaneOverviewLine[];
+  routeSlot: RouteSlot;
+  host: LanesHost;
+};
+
+function LaneOverviewWithPreview({ currentLane, overviewItems, routeSlot, host }: LaneOverviewWithPreviewProps) {
+  const { loading, components } = useLaneComponents(currentLane.id);
+
+  if (loading) return null;
+
+  const ComponentCard =
+    host === 'workspace'
+      ? ({ component }) => (
+          <WorkspaceComponentCard
+            component={component}
+            componentUrl={LanesModel.getLaneComponentUrl(component.id, currentLane.id)}
+          />
+        )
+      : ({ component }) => (
+          <ScopeComponentCard
+            component={component}
+            componentUrl={LanesModel.getLaneComponentUrl(component.id, currentLane.id)}
+          />
+        );
+
+  return (
+    <div className={styles.container}>
+      <LaneDetails
+        className={styles.laneDetails}
+        laneId={currentLane.id}
+        description={''}
+        componentCount={currentLane.components.length}
+      ></LaneDetails>
+      <ComponentGrid>
+        {components?.map((component, index) => (
+          <ComponentCard component={component} key={index} />
+        ))}
+      </ComponentGrid>
+      {routeSlot && <SlotRouter slot={routeSlot} />}
+      {overviewItems.length > 0 && overviewItems.map((Item, index) => <Item key={index} />)}
+    </div>
+  );
+}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@teambit/lanes.ui.lane-overview",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "componentId": {
+    "scope": "teambit.lanes",
+    "name": "ui/lane-overview",
+    "version": "0.0.1"
+  },
+  "dependencies": {
+    "lodash.flatten": "4.4.0",
+    "core-js": "^3.0.0",
+    "@teambit/harmony": "0.3.3",
+    "@teambit/ui-foundation.ui.empty-component-gallery": "0.0.499",
+    "@teambit/explorer.ui.gallery.component-grid": "0.0.492",
+    "@teambit/lanes.hooks.use-lane-components": "0.0.38",
+    "@teambit/lanes.hooks.use-lanes": "0.0.39",
+    "@teambit/lanes.ui.lane-details": "0.0.1",
+    "@teambit/lanes.ui.models.lanes-model": "0.0.1",
+    "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.496",
+    "@teambit/workspace.ui.workspace-component-card": "0.0.505"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.8",
+    "@types/lodash.flatten": "4.4.6",
+    "@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/node": "12.20.4"
+  },
+  "peerDependencies": {
+    "react-dom": "^16.8.0 || ^17.0.0",
+    "react": "^16.8.0 || ^17.0.0"
+  },
+  "license": "Apache-2.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"
+  ]
+}

package/preview-1664735485436.js

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

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