@teambit/compositions 0.0.553 → 0.0.557

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

@@ -1,119 +0,0 @@
-.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/compositions-panel.tsx

@@ -1,58 +0,0 @@
-import { Icon } from '@teambit/evangelist.elements.icon';
-import classNames from 'classnames';
-import React, { useCallback } from 'react';
-
-import { Composition } from '../../composition';
-import styles from './compositions-panel.module.scss';
-
-export type CompositionsPanelProps = {
-  compositions: Composition[];
-  onSelectComposition: (composition: Composition) => void;
-  active?: Composition;
-  url: string;
-} & React.HTMLAttributes<HTMLUListElement>;
-
-export function CompositionsPanel({
-  url,
-  compositions,
-  onSelectComposition: onSelect,
-  active,
-  className,
-  ...rest
-}: CompositionsPanelProps) {
-  const handleSelect = useCallback(
-    (selected: Composition) => {
-      onSelect && onSelect(selected);
-    },
-    [onSelect]
-  );
-
-  return (
-    <ul {...rest} className={classNames(className)}>
-      {compositions.map((composition) => {
-        // TODO - move to composition panel node
-        return (
-          <li
-            key={composition.identifier}
-            className={classNames(styles.linkWrapper, composition === active && styles.active)}
-          >
-            <a className={styles.panelLink} onClick={() => handleSelect(composition)}>
-              <span className={styles.box}></span>
-              <span className={styles.name}>{composition.displayName}</span>
-            </a>
-            <div className={styles.right}>
-              <a
-                className={styles.panelLink}
-                target="_blank"
-                rel="noopener noreferrer"
-                href={`${url}&${composition.identifier}`}
-              >
-                <Icon className={styles.icon} of="open-tab" />
-              </a>
-            </div>
-          </li>
-        );
-      })}
-    </ul>
-  );
-}

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

@@ -1,15 +0,0 @@
-.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;
-}

package/ui/compositions-panel-node/compositions-panel-node.tsx

@@ -1,22 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-
-import styles from './compositions-panel-node.module.scss';
-
-export type CompositionsPanelNodeProps = {
-  name: string;
-  onClick: (event: React.MouseEvent<HTMLAnchorElement>) => void;
-  isActive: boolean;
-} & React.HTMLAttributes<HTMLLIElement>;
-
-export function CompositionsPanelNode({ name, onClick, isActive, ...rest }: CompositionsPanelNodeProps) {
-  return (
-    <li {...rest}>
-      <div className={classNames(styles.linkWrapper, { [styles.active]: isActive })}>
-        <a className={styles.panelLink} onClick={onClick}>
-          {name}
-        </a>
-      </div>
-    </li>
-  );
-}

package/ui/compositions-panel-node/index.ts

@@ -1 +0,0 @@
-export * from './compositions-panel-node';

package/ui/index.ts

@@ -1 +0,0 @@
-export { ComponentComposition } from './composition-preview';

package/ui/use-compositions.tsx

@@ -1,14 +0,0 @@
-// import gql from 'graphql-tag';
-// import { ComponentModel } from '../../component';
-// import { Composition } from '../composition';
-// import { useDataQuery } from '../../ui';
-
-// const GET_COMPOSITIONS = gql`
-//   compositions: {
-
-//   }
-// `;
-
-// export function useCompositions(component: ComponentModel): Composition[] | [] {
-//   useDataQuery();
-// }