@teambit/lanes.ui.menus.use-lanes-menu 0.0.1

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { UseLaneMenu } from './use-lanes-menu';

package/dist/index.js

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

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,mDAA+C;AAAtC,6GAAA,WAAW,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/dist/use-lanes-menu.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { LanesHost } from '@teambit/lanes.ui.models.lanes-model';
+import { LaneId } from '@teambit/lane-id';
+export declare type LaneImportContentProps = {
+    currentLaneId: LaneId;
+    switchedOutToCurrentLane: boolean;
+    host: LanesHost;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare function UseLaneMenu({ host, viewedLaneId, currentLaneId, }: {
+    host: LanesHost;
+    viewedLaneId: LaneId;
+    currentLaneId?: LaneId;
+}): JSX.Element;

package/dist/use-lanes-menu.js

@@ -0,0 +1,59 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UseLaneMenu = void 0;
+const react_1 = __importDefault(require("react"));
+const evangelist_elements_icon_1 = require("@teambit/evangelist.elements.icon");
+const documenter_ui_copy_box_1 = require("@teambit/documenter.ui.copy-box");
+const ui_foundation_ui_use_box_tab_content_1 = require("@teambit/ui-foundation.ui.use-box.tab-content");
+const design_ui_styles_ellipsis_1 = require("@teambit/design.ui.styles.ellipsis");
+const ui_foundation_ui_use_box_bottom_link_1 = require("@teambit/ui-foundation.ui.use-box.bottom-link");
+const ui_foundation_ui_use_box_dropdown_1 = require("@teambit/ui-foundation.ui.use-box.dropdown");
+const base_react_navigation_link_1 = require("@teambit/base-react.navigation.link");
+const use_lanes_menu_module_scss_1 = __importDefault(require("./use-lanes-menu.module.scss"));
+function UseLaneMenu({ host, viewedLaneId, currentLaneId, }) {
+    const switchedOutToCurrentLane = !!(currentLaneId === null || currentLaneId === void 0 ? void 0 : currentLaneId.isEqual(currentLaneId));
+    const Menu = (react_1.default.createElement("div", { className: use_lanes_menu_module_scss_1.default.lanesMenu },
+        react_1.default.createElement("div", { className: use_lanes_menu_module_scss_1.default.top },
+            react_1.default.createElement("div", { className: use_lanes_menu_module_scss_1.default.title },
+                react_1.default.createElement(evangelist_elements_icon_1.Icon, { className: use_lanes_menu_module_scss_1.default.titleIcon, of: "terminal" }),
+                react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, { className: use_lanes_menu_module_scss_1.default.titleText }, `Bulk import from ${viewedLaneId.name}`))),
+        react_1.default.createElement(ui_foundation_ui_use_box_tab_content_1.ExpandableTabContent, { content: react_1.default.createElement(LaneImportContent, { host: host, currentLaneId: viewedLaneId, switchedOutToCurrentLane: switchedOutToCurrentLane }), drawerTitle: react_1.default.createElement("div", { className: use_lanes_menu_module_scss_1.default.drawerTitle }, "Learn more about Lanes"), drawerContent: react_1.default.createElement(LaneInfo, null) })));
+    return react_1.default.createElement(ui_foundation_ui_use_box_dropdown_1.UseBoxDropdown, { position: "bottom-end", className: use_lanes_menu_module_scss_1.default.useBox, Menu: Menu });
+}
+exports.UseLaneMenu = UseLaneMenu;
+function LaneImportContent({ host, currentLaneId, switchedOutToCurrentLane }) {
+    const laneId = host === 'workspace' ? currentLaneId.name : currentLaneId.toString();
+    if (switchedOutToCurrentLane) {
+        return (react_1.default.createElement("div", { className: use_lanes_menu_module_scss_1.default.importContent },
+            react_1.default.createElement("div", { className: use_lanes_menu_module_scss_1.default.importContentLabel },
+                "Import all components from ",
+                laneId),
+            react_1.default.createElement(documenter_ui_copy_box_1.CopyBox, { className: use_lanes_menu_module_scss_1.default.importContentCmd }, `bit merge`)));
+    }
+    return (react_1.default.createElement("div", { className: use_lanes_menu_module_scss_1.default.importContent },
+        react_1.default.createElement("div", { className: use_lanes_menu_module_scss_1.default.importContentLabel },
+            "Switch and Import all components from ",
+            laneId),
+        react_1.default.createElement(documenter_ui_copy_box_1.CopyBox, { className: use_lanes_menu_module_scss_1.default.importContentCmd }, `bit lane import ${laneId}`)));
+}
+function LaneInfo(_a) {
+    var rest = __rest(_a, []);
+    return (react_1.default.createElement(ui_foundation_ui_use_box_tab_content_1.TabContent, Object.assign({}, rest, { className: use_lanes_menu_module_scss_1.default.moreInfo, bottom: react_1.default.createElement(base_react_navigation_link_1.Link, { external: true, href: 'https://bit.dev/docs/lanes/lanes-overview', className: ui_foundation_ui_use_box_bottom_link_1.linkStyles },
+            react_1.default.createElement(evangelist_elements_icon_1.Icon, { of: "information-sign" }),
+            react_1.default.createElement("span", null, "Getting Started with Lanes")) })));
+}
+//# sourceMappingURL=use-lanes-menu.js.map

package/dist/use-lanes-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-lanes-menu.js","sourceRoot":"","sources":["../use-lanes-menu.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,gFAAyD;AACzD,4EAA0D;AAC1D,wGAAiG;AACjG,kFAA8D;AAC9D,wGAA2E;AAE3E,kGAA4E;AAC5E,oFAA2D;AAE3D,8FAAkD;AAQlD,SAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,YAAY,EACZ,aAAa,GAKd;IACC,MAAM,wBAAwB,GAAG,CAAC,CAAC,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,CAAC,aAAa,CAAC,CAAA,CAAC;IACzE,MAAM,IAAI,GAAG,CACX,uCAAK,SAAS,EAAE,oCAAM,CAAC,SAAS;QAC9B,uCAAK,SAAS,EAAE,oCAAM,CAAC,GAAG;YACxB,uCAAK,SAAS,EAAE,oCAAM,CAAC,KAAK;gBAC1B,8BAAC,+BAAI,IAAC,SAAS,EAAE,oCAAM,CAAC,SAAS,EAAE,EAAE,EAAC,UAAU,GAAG;gBACnD,8BAAC,oCAAQ,IAAC,SAAS,EAAE,oCAAM,CAAC,SAAS,IAAG,oBAAoB,YAAY,CAAC,IAAI,EAAE,CAAY,CACvF,CACF;QACN,8BAAC,2DAAoB,IACnB,OAAO,EACL,8BAAC,iBAAiB,IAChB,IAAI,EAAE,IAAI,EACV,aAAa,EAAE,YAAY,EAC3B,wBAAwB,EAAE,wBAAwB,GAClD,EAEJ,WAAW,EAAE,uCAAK,SAAS,EAAE,oCAAM,CAAC,WAAW,6BAA8B,EAC7E,aAAa,EAAE,8BAAC,QAAQ,OAAG,GAC3B,CACE,CACP,CAAC;IAEF,OAAO,8BAAC,kDAAc,IAAC,QAAQ,EAAC,YAAY,EAAC,SAAS,EAAE,oCAAM,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;AACxF,CAAC;AAjCD,kCAiCC;AAED,SAAS,iBAAiB,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,wBAAwB,EAA0B;IAClG,MAAM,MAAM,GAAG,IAAI,KAAK,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,EAAE,CAAC;IACpF,IAAI,wBAAwB,EAAE;QAC5B,OAAO,CACL,uCAAK,SAAS,EAAE,oCAAM,CAAC,aAAa;YAClC,uCAAK,SAAS,EAAE,oCAAM,CAAC,kBAAkB;;gBAA8B,MAAM,CAAO;YACpF,8BAAC,gCAAO,IAAC,SAAS,EAAE,oCAAM,CAAC,gBAAgB,IAAG,WAAW,CAAW,CAChE,CACP,CAAC;KACH;IACD,OAAO,CACL,uCAAK,SAAS,EAAE,oCAAM,CAAC,aAAa;QAClC,uCAAK,SAAS,EAAE,oCAAM,CAAC,kBAAkB;;YAAyC,MAAM,CAAO;QAC/F,8BAAC,gCAAO,IAAC,SAAS,EAAE,oCAAM,CAAC,gBAAgB,IAAG,mBAAmB,MAAM,EAAE,CAAW,CAChF,CACP,CAAC;AACJ,CAAC;AAID,SAAS,QAAQ,CAAC,EAA0B;QAArB,IAAI,cAAT,EAAW,CAAF;IACzB,OAAO,CACL,8BAAC,iDAAU,oBACL,IAAI,IACR,SAAS,EAAE,oCAAM,CAAC,QAAQ,EAC1B,MAAM,EACJ,8BAAC,iCAAI,IAAC,QAAQ,QAAC,IAAI,EAAE,2CAA2C,EAAE,SAAS,EAAE,iDAAU;YACrF,8BAAC,+BAAI,IAAC,EAAE,EAAC,kBAAkB,GAAG;YAC9B,yEAAuC,CAClC,IAEG,CACf,CAAC;AACJ,CAAC"}

package/dist/use-lanes-menu.module.scss

@@ -0,0 +1,38 @@
+.top {
+  padding: 16px 24px;
+  color: var(--bit-text-color, #414141);
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  font-size: var(--bit-p-xs, 14px);
+  font-weight: bold;
+}
+
+.titleIcon,
+.titleText {
+  color: var(--bit-text-color-heavy, #2b2b2b);
+  font-weight: bold;
+  margin-right: 8px;
+}
+
+.importContentLabel,
+.importContentCmd {
+  margin: 12px 0;
+}
+
+.drawerTitle {
+  display: flex;
+  align-items: center;
+  margin-right: 8px;
+}
+
+.useBox {
+  --bit-drawer-margin: 14px;
+}
+
+.lanesMenu {
+  background-color: var(--bit-bg-color, #ffffff);
+  border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
+}

package/index.ts

@@ -0,0 +1 @@
+export { UseLaneMenu } from './use-lanes-menu';

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@teambit/lanes.ui.menus.use-lanes-menu",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "componentId": {
+    "scope": "teambit.lanes",
+    "name": "ui/menus/use-lanes-menu",
+    "version": "0.0.1"
+  },
+  "dependencies": {
+    "core-js": "^3.0.0",
+    "@teambit/base-react.navigation.link": "2.0.27",
+    "@teambit/documenter.ui.copy-box": "4.0.1",
+    "@teambit/evangelist.elements.icon": "1.0.2",
+    "@teambit/design.ui.styles.ellipsis": "0.0.353",
+    "@teambit/lane-id": "0.0.97",
+    "@teambit/lanes.ui.models.lanes-model": "0.0.1",
+    "@teambit/ui-foundation.ui.use-box.bottom-link": "0.0.110",
+    "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.122",
+    "@teambit/ui-foundation.ui.use-box.tab-content": "0.0.111"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.8",
+    "@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;
+}

package/use-lanes-menu.module.scss

@@ -0,0 +1,38 @@
+.top {
+  padding: 16px 24px;
+  color: var(--bit-text-color, #414141);
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  font-size: var(--bit-p-xs, 14px);
+  font-weight: bold;
+}
+
+.titleIcon,
+.titleText {
+  color: var(--bit-text-color-heavy, #2b2b2b);
+  font-weight: bold;
+  margin-right: 8px;
+}
+
+.importContentLabel,
+.importContentCmd {
+  margin: 12px 0;
+}
+
+.drawerTitle {
+  display: flex;
+  align-items: center;
+  margin-right: 8px;
+}
+
+.useBox {
+  --bit-drawer-margin: 14px;
+}
+
+.lanesMenu {
+  background-color: var(--bit-bg-color, #ffffff);
+  border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
+}

package/use-lanes-menu.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { Icon } from '@teambit/evangelist.elements.icon';
+import { CopyBox } from '@teambit/documenter.ui.copy-box';
+import { ExpandableTabContent, TabContent } from '@teambit/ui-foundation.ui.use-box.tab-content';
+import { Ellipsis } from '@teambit/design.ui.styles.ellipsis';
+import { linkStyles } from '@teambit/ui-foundation.ui.use-box.bottom-link';
+import { LanesHost } from '@teambit/lanes.ui.models.lanes-model';
+import { UseBoxDropdown } from '@teambit/ui-foundation.ui.use-box.dropdown';
+import { Link } from '@teambit/base-react.navigation.link';
+import { LaneId } from '@teambit/lane-id';
+import styles from './use-lanes-menu.module.scss';
+
+export type LaneImportContentProps = {
+  currentLaneId: LaneId;
+  switchedOutToCurrentLane: boolean;
+  host: LanesHost;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+export function UseLaneMenu({
+  host,
+  viewedLaneId,
+  currentLaneId,
+}: {
+  host: LanesHost;
+  viewedLaneId: LaneId;
+  currentLaneId?: LaneId;
+}) {
+  const switchedOutToCurrentLane = !!currentLaneId?.isEqual(currentLaneId);
+  const Menu = (
+    <div className={styles.lanesMenu}>
+      <div className={styles.top}>
+        <div className={styles.title}>
+          <Icon className={styles.titleIcon} of="terminal" />
+          <Ellipsis className={styles.titleText}>{`Bulk import from ${viewedLaneId.name}`}</Ellipsis>
+        </div>
+      </div>
+      <ExpandableTabContent
+        content={
+          <LaneImportContent
+            host={host}
+            currentLaneId={viewedLaneId}
+            switchedOutToCurrentLane={switchedOutToCurrentLane}
+          />
+        }
+        drawerTitle={<div className={styles.drawerTitle}>Learn more about Lanes</div>}
+        drawerContent={<LaneInfo />}
+      />
+    </div>
+  );
+
+  return <UseBoxDropdown position="bottom-end" className={styles.useBox} Menu={Menu} />;
+}
+
+function LaneImportContent({ host, currentLaneId, switchedOutToCurrentLane }: LaneImportContentProps) {
+  const laneId = host === 'workspace' ? currentLaneId.name : currentLaneId.toString();
+  if (switchedOutToCurrentLane) {
+    return (
+      <div className={styles.importContent}>
+        <div className={styles.importContentLabel}>Import all components from {laneId}</div>
+        <CopyBox className={styles.importContentCmd}>{`bit merge`}</CopyBox>
+      </div>
+    );
+  }
+  return (
+    <div className={styles.importContent}>
+      <div className={styles.importContentLabel}>Switch and Import all components from {laneId}</div>
+      <CopyBox className={styles.importContentCmd}>{`bit lane import ${laneId}`}</CopyBox>
+    </div>
+  );
+}
+
+type LaneInfoProps = {} & React.HTMLAttributes<HTMLDivElement>;
+
+function LaneInfo({ ...rest }: LaneInfoProps) {
+  return (
+    <TabContent
+      {...rest}
+      className={styles.moreInfo}
+      bottom={
+        <Link external href={'https://bit.dev/docs/lanes/lanes-overview'} className={linkStyles}>
+          <Icon of="information-sign" />
+          <span>Getting Started with Lanes</span>
+        </Link>
+      }
+    ></TabContent>
+  );
+}