@teambit/compositions 0.0.557 → 0.0.561

package/compositions.docs.mdx

@@ -0,0 +1,8 @@
+---
+description: Renders component instances as part of different compositions.
+labels: ['ui', 'tests']
+---
+
+import { Compositions } from '@teambit/compositions.aspect-docs.compositions';
+
+<Compositions />

package/compositions.module.scss

@@ -0,0 +1,100 @@
+@import '~@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
+$panelBg: #fafafa;
+
+.compositionsPage {
+  height: 100%;
+  width: 100%;
+}
+
+.compositionPreview {
+  padding-top: 20px;
+  width: 100%;
+}
+
+.left {
+  min-width: 200px;
+
+  //cannot assign max-width directly to right side
+  max-width: calc(100% - 200px);
+
+  display: flex;
+  overflow-y: auto;
+  flex-direction: column;
+}
+
+.right {
+  background: $panelBg;
+  overflow-y: auto;
+  // this is to fix the right panel when it gets too big or too small
+  min-width: 200px;
+  max-width: calc(100% - 200px);
+}
+
+.menuBar {
+  border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
+}
+
+.splitter {
+  position: relative;
+
+  > :first-child {
+    z-index: $nav-z-index + 1;
+    position: absolute;
+  }
+}
+
+.collapser {
+  right: 0;
+}
+
+.tabsContainer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.tabs {
+  flex: none;
+}
+
+.tabContent {
+  flex: 1 1;
+  overflow: auto;
+
+  &:empty {
+    display: none;
+  }
+}
+
+.compositions {
+  padding: 16px 8px 0 8px;
+}
+
+.openInNewTab {
+  text-decoration: none;
+  color: inherit;
+
+  &:active {
+    color: inherit;
+  }
+}
+
+.noCompositionsPage {
+  padding: 50px 40px 100px 40px;
+  width: 100%;
+  box-sizing: border-box;
+  max-width: 1440px;
+  margin: 0 auto;
+
+  .title {
+    margin-bottom: 24px;
+    font-size: var(--bit-h-xs, 26px);
+  }
+  .separator {
+    margin-bottom: 41px;
+  }
+}
+
+.buildStatusMessage {
+  margin: auto;
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/compositions",
-  "version": "0.0.557",
+  "version": "0.0.561",
   "homepage": "https://bit.dev/teambit/compositions/compositions",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.compositions",
     "name": "compositions",
-    "version": "0.0.557"
+    "version": "0.0.561"
   },
   "dependencies": {
     "@teambit/harmony": "0.2.11",
@@ -23,32 +23,32 @@
     "@teambit/documenter.ui.heading": "4.1.1",
     "@teambit/documenter.ui.property-table": "4.1.3",
     "@teambit/evangelist.elements.icon": "1.0.2",
-    "@teambit/component": "0.0.557",
-    "@teambit/compositions.model.composition-id": "0.0.465",
-    "@teambit/graphql": "0.0.557",
-    "@teambit/cli": "0.0.388",
-    "@teambit/dev-files": "0.0.557",
-    "@teambit/preview": "0.0.557",
-    "@teambit/schema": "0.0.557",
-    "@teambit/workspace": "0.0.557",
-    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.465",
-    "@teambit/envs": "0.0.557",
-    "@teambit/compositions.ui.compositions-menu-bar": "0.0.142",
-    "@teambit/compositions.ui.hooks.use-composition": "0.0.142",
+    "@teambit/component": "0.0.561",
+    "@teambit/compositions.model.composition-id": "0.0.467",
+    "@teambit/graphql": "0.0.561",
+    "@teambit/cli": "0.0.390",
+    "@teambit/dev-files": "0.0.561",
+    "@teambit/preview": "0.0.561",
+    "@teambit/schema": "0.0.561",
+    "@teambit/workspace": "0.0.561",
+    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.467",
+    "@teambit/envs": "0.0.561",
+    "@teambit/compositions.ui.compositions-menu-bar": "0.0.144",
+    "@teambit/compositions.ui.hooks.use-composition": "0.0.144",
     "@teambit/design.ui.alert-card": "0.0.13",
     "@teambit/design.ui.empty-box": "0.0.352",
     "@teambit/design.ui.input.option-button": "0.0.26",
     "@teambit/design.ui.separator": "0.0.351",
     "@teambit/design.ui.surfaces.status-message-card": "0.0.6",
-    "@teambit/docs.ui.queries.get-docs": "0.0.465",
-    "@teambit/mdx.ui.mdx-layout": "0.0.469",
-    "@teambit/panels": "0.0.388",
-    "@teambit/preview.ui.component-preview": "0.0.465",
-    "@teambit/ui-foundation.ui.buttons.collapser": "0.0.170",
-    "@teambit/ui-foundation.ui.hooks.use-is-mobile": "0.0.158",
-    "@teambit/ui": "0.0.557",
-    "@teambit/compositions.model.composition-type": "0.0.466",
-    "@teambit/compositions.ui.composition-card": "0.0.471"
+    "@teambit/docs.ui.queries.get-docs": "0.0.467",
+    "@teambit/mdx.ui.mdx-layout": "0.0.471",
+    "@teambit/panels": "0.0.390",
+    "@teambit/preview.ui.component-preview": "0.0.467",
+    "@teambit/ui-foundation.ui.buttons.collapser": "0.0.172",
+    "@teambit/ui-foundation.ui.hooks.use-is-mobile": "0.0.160",
+    "@teambit/ui": "0.0.561",
+    "@teambit/compositions.model.composition-type": "0.0.468",
+    "@teambit/compositions.ui.composition-card": "0.0.473"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -59,10 +59,10 @@
     "@types/jest": "^26.0.0",
     "@types/react-dom": "^17.0.5",
     "@types/node": "12.20.4",
-    "@teambit/compositions.aspect-docs.compositions": "0.0.107"
+    "@teambit/compositions.aspect-docs.compositions": "0.0.109"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.174",
+    "@teambit/legacy": "1.0.176",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -90,7 +90,7 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.174",
+        "@teambit/legacy": "1.0.176",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }
@@ -99,10 +99,17 @@
   "files": [
     "dist",
     "!dist/tsconfig.tsbuildinfo",
-    "README.md",
-    "README.mdx",
-    "*.js",
-    "*.json"
+    "**/*.md",
+    "**/*.mdx",
+    "**/*.js",
+    "**/*.json",
+    "**/*.sass",
+    "**/*.scss",
+    "**/*.less",
+    "**/*.css",
+    "**/*.css",
+    "**/*.jpeg",
+    "**/*.gif"
   ],
   "private": false,
   "engines": {

package/ui/compositions-overview/compositions-overview.module.scss

@@ -0,0 +1,16 @@
+.background {
+  background: var(--bit-bg-dent, #f6f6f6);
+  padding: 12px;
+  border-radius: 6px;
+  border: 1px solid var(--bit-border-color-lightest, #ededed);
+  display: flex;
+  overflow-x: auto;
+
+  > * {
+    margin-right: 16px;
+  }
+
+  > :last-child {
+    margin: 0;
+  }
+}

package/ui/compositions-panel/compositions-panel.module.scss

@@ -0,0 +1,119 @@
+.linkWrapper {
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+  font-size: var(--bit-p-xs);
+  transition: all 300ms ease-in-out;
+
+  &:hover {
+    background-color: var(--bit-border-color-lightest, #ededed);
+    // border-radius: 8px;
+    transition: background-color 300ms ease-in-out;
+    .right {
+      visibility: unset;
+      opacity: 1;
+      color: var(--bit-text-color-light, #6c707c);
+      //TODO - fix hover effect and timing of icon
+      transition: visibility 200ms, opacity 100ms ease-in-out;
+      .icon {
+        &:hover {
+          color: var(--bit-text-color-heavy);
+        }
+      }
+    }
+  }
+  &.active {
+    display: flex;
+    align-items: center;
+    background-color: var(--bit-accent-color, #6c5ce7);
+    color: var(--bit-bg-color, #ffffff);
+
+    // overrides
+    &:hover {
+      background-color: #5d4aec;
+    }
+
+    .box {
+      background-color: var(--bit-bg-color, #ffffff);
+    }
+
+    .right {
+      visibility: unset;
+      opacity: 1;
+      color: var(--bit-accent-bg, #eceaff);
+      .icon {
+        &:hover {
+          color: var(--bit-bg-color, #ffffff);
+        }
+      }
+    }
+  }
+  .right {
+    opacity: 0;
+    visibility: hidden;
+    font-size: 13px;
+    transition: visibility 200ms, opacity 100ms ease-in-out;
+  }
+}
+
+.box {
+  width: 10px;
+  height: 10px;
+  flex-shrink: 0;
+  background-color: var(--bit-text-color-heavy);
+  margin-right: 11px;
+  border-radius: 1px;
+}
+.name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-right: 8px;
+}
+.panelLink {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  width: 100%;
+  height: 100%;
+  text-decoration: none;
+  color: inherit;
+  min-width: 0;
+
+  &:active {
+    color: inherit;
+  }
+}
+
+.tabs {
+  display: flex;
+  align-items: center;
+  margin-bottom: 17px;
+  > div {
+    position: relative;
+    padding: 8px;
+    text-transform: uppercase;
+    font-size: 12px;
+    font-weight: bold;
+    &:not(:first-child) {
+      color: #878c9a;
+    }
+
+    &:first-child {
+      &:before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        background-color: var(--bit-accent-color, #6c5ce7);
+        height: 3px;
+        border-radius: 10px;
+        transition: background-color 300ms, height 300ms;
+      }
+    }
+  }
+}

package/ui/compositions-panel-node/compositions-panel-node.module.scss

@@ -0,0 +1,15 @@
+.linkWrapper {
+  background-color: var(--bit-accent-color, #6c5ce7);
+  &.active {
+    display: flex;
+    background-color: var(--bit-accent-color, #6c5ce7);
+    height: 40px;
+  }
+}
+.panelLink {
+  cursor: pointer;
+}
+
+.composition {
+  width: 200px;
+}