@teambit/workspace 0.0.685 → 0.0.686

package/dist/ui/workspace-components-drawer/workspace-components.drawer.js

@@ -1,270 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-require("core-js/modules/es.array.iterator.js");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.WorkspaceComponentsDrawer = void 0;
-
-function _extends2() {
-  const data = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-  _extends2 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _defineProperty2() {
-  const data = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-  _defineProperty2 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _uiFoundationUi() {
-  const data = require("@teambit/ui-foundation.ui.full-loader");
-
-  _uiFoundationUi = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _uiFoundationUi2() {
-  const data = require("@teambit/ui-foundation.ui.side-bar");
-
-  _uiFoundationUi2 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _react() {
-  const data = _interopRequireWildcard(require("react"));
-
-  _react = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _classnames() {
-  const data = _interopRequireDefault(require("classnames"));
-
-  _classnames = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _designUiStyles() {
-  const data = require("@teambit/design.ui.styles.muted-italic");
-
-  _designUiStyles = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _designUiStyles2() {
-  const data = require("@teambit/design.ui.styles.ellipsis");
-
-  _designUiStyles2 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _designUiInput() {
-  const data = require("@teambit/design.ui.input.toggle");
-
-  _designUiInput = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _workspaceContext() {
-  const data = require("../workspace/workspace-context");
-
-  _workspaceContext = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _workspaceComponentsDrawerModule() {
-  const data = _interopRequireDefault(require("./workspace-components-drawer.module.scss"));
-
-  _workspaceComponentsDrawerModule = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const WorkspaceTreeContext = /*#__PURE__*/(0, _react().createContext)({
-  collapsed: true,
-  setCollapsed: () => {},
-  activeFilters: [],
-  setActiveFilter: () => {},
-  filterOpen: false,
-  setFilterOpen: () => {}
-});
-
-class WorkspaceComponentsDrawer {
-  constructor(treeNodeSlot) {
-    this.treeNodeSlot = treeNodeSlot;
-    (0, _defineProperty2().default)(this, "id", 'workspace-components');
-    (0, _defineProperty2().default)(this, "name", 'COMPONENTS');
-    (0, _defineProperty2().default)(this, "widgets", [/*#__PURE__*/_react().default.createElement(FilterWidget, {
-      key: 'filter-widget'
-    }), /*#__PURE__*/_react().default.createElement(TreeToggleWidget, {
-      key: 'tree-toggle-widget'
-    })]);
-    (0, _defineProperty2().default)(this, "Context", ({
-      children
-    }) => {
-      const [collapsed, setCollapsed] = (0, _react().useState)(true);
-      const [activeFilters, setActiveFilters] = (0, _react().useState)([]);
-      const [filterOpen, setFilterOpen] = (0, _react().useState)(false);
-
-      const handleActiveFilterToggle = filterId => {
-        const isFilterActive = activeFilters.includes(filterId);
-
-        if (isFilterActive) {
-          setActiveFilters(list => list.filter(id => id !== filterId));
-          return;
-        }
-
-        setActiveFilters(list => list.concat(filterId));
-      };
-
-      return /*#__PURE__*/_react().default.createElement(WorkspaceTreeContext.Provider, {
-        value: {
-          collapsed,
-          setCollapsed,
-          activeFilters,
-          setActiveFilter: handleActiveFilterToggle,
-          filterOpen,
-          setFilterOpen
-        }
-      }, children);
-    });
-    (0, _defineProperty2().default)(this, "Filters", [/*#__PURE__*/_react().default.createElement(DeprecateFilter, {
-      key: 'deprecate-filter'
-    })]);
-    (0, _defineProperty2().default)(this, "render", () => {
-      const workspace = (0, _react().useContext)(_workspaceContext().WorkspaceContext);
-      const {
-        collapsed,
-        activeFilters
-      } = (0, _react().useContext)(WorkspaceTreeContext);
-      const {
-        treeNodeSlot
-      } = this;
-      const showDeprecatedComponents = activeFilters.find(activeFilter => activeFilter === 'deprecate');
-      const TreeNodeRenderer = (0, _react().useCallback)(function TreeNode(props) {
-        const children = props.node.children;
-        if (!children) return /*#__PURE__*/_react().default.createElement(_uiFoundationUi2().ComponentView, (0, _extends2().default)({}, props, {
-          treeNodeSlot: treeNodeSlot
-        })); // non collapse
-
-        if (props.node.payload instanceof _uiFoundationUi2().ScopePayload) return /*#__PURE__*/_react().default.createElement(_uiFoundationUi2().ScopeTreeNode, props);
-        return /*#__PURE__*/_react().default.createElement(_uiFoundationUi2().NamespaceTreeNode, props);
-      }, [treeNodeSlot]);
-      if (!workspace) return /*#__PURE__*/_react().default.createElement(_uiFoundationUi().FullLoader, null);
-      const components = showDeprecatedComponents ? workspace.components : workspace.components.filter(component => {
-        var _component$deprecatio;
-
-        return !((_component$deprecatio = component.deprecation) !== null && _component$deprecatio !== void 0 && _component$deprecatio.isDeprecate);
-      });
-
-      if (components.length === 0) {
-        return /*#__PURE__*/_react().default.createElement("span", {
-          className: (0, _classnames().default)(_designUiStyles().mutedItalic, _designUiStyles2().ellipsis, _workspaceComponentsDrawerModule().default.emptyWorkspace)
-        }, "Workspace is empty");
-      }
-
-      return /*#__PURE__*/_react().default.createElement(_uiFoundationUi2().ComponentTree, {
-        components: components,
-        isCollapsed: collapsed,
-        TreeNode: TreeNodeRenderer
-      });
-    });
-  }
-
-}
-
-exports.WorkspaceComponentsDrawer = WorkspaceComponentsDrawer;
-
-function TreeToggleWidget() {
-  const {
-    collapsed,
-    setCollapsed
-  } = (0, _react().useContext)(WorkspaceTreeContext);
-  const icon = collapsed ? 'https://static.bit.dev/bit-icons/expand.svg' : 'https://static.bit.dev/bit-icons/collapse.svg';
-  return /*#__PURE__*/_react().default.createElement("div", {
-    className: _workspaceComponentsDrawerModule().default.widgetIcon
-  }, /*#__PURE__*/_react().default.createElement("img", {
-    src: icon,
-    onClick: () => setCollapsed(!collapsed)
-  }));
-}
-
-function FilterWidget() {
-  const {
-    filterOpen,
-    setFilterOpen
-  } = (0, _react().useContext)(WorkspaceTreeContext);
-  return /*#__PURE__*/_react().default.createElement("div", {
-    className: (0, _classnames().default)(_workspaceComponentsDrawerModule().default.widgetIcon, _workspaceComponentsDrawerModule().default.filterWidgetIcon, filterOpen && _workspaceComponentsDrawerModule().default.open)
-  }, /*#__PURE__*/_react().default.createElement("img", {
-    src: "https://static.bit.dev/bit-icons/filter.svg",
-    onClick: () => setFilterOpen(!filterOpen)
-  }));
-}
-
-function DeprecateFilter() {
-  const {
-    activeFilters,
-    setActiveFilter,
-    filterOpen
-  } = (0, _react().useContext)(WorkspaceTreeContext);
-  const isActive = activeFilters.includes('deprecate');
-  if (!filterOpen) return null;
-  return /*#__PURE__*/_react().default.createElement("div", {
-    className: (0, _classnames().default)(_workspaceComponentsDrawerModule().default.deprecateFilter, isActive && _workspaceComponentsDrawerModule().default.active)
-  }, /*#__PURE__*/_react().default.createElement("div", {
-    className: _workspaceComponentsDrawerModule().default.filterIcon
-  }, /*#__PURE__*/_react().default.createElement("img", {
-    src: "https://static.bit.dev/bit-icons/deprecated.svg"
-  }), /*#__PURE__*/_react().default.createElement("span", {
-    className: _workspaceComponentsDrawerModule().default.filterIconLabel
-  }, "Deprecated")), /*#__PURE__*/_react().default.createElement("div", null, /*#__PURE__*/_react().default.createElement(_designUiInput().Toggle, {
-    checked: isActive,
-    onInputChanged: () => setActiveFilter('deprecate')
-  })));
-}
-
-//# sourceMappingURL=workspace-components.drawer.js.map

package/dist/ui/workspace-components-drawer/workspace-components.drawer.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["workspace-components.drawer.tsx"],"names":["WorkspaceTreeContext","collapsed","setCollapsed","activeFilters","setActiveFilter","filterOpen","setFilterOpen","WorkspaceComponentsDrawer","constructor","treeNodeSlot","children","setActiveFilters","handleActiveFilterToggle","filterId","isFilterActive","includes","list","filter","id","concat","workspace","WorkspaceContext","showDeprecatedComponents","find","activeFilter","TreeNodeRenderer","TreeNode","props","node","payload","ScopePayload","components","component","deprecation","isDeprecate","length","mutedItalic","ellipsis","styles","emptyWorkspace","TreeToggleWidget","icon","widgetIcon","FilterWidget","filterWidgetIcon","open","DeprecateFilter","isActive","deprecateFilter","active","filterIcon","filterIconLabel"],"mappings":"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","sourcesContent":["import type { DrawerType } from '@teambit/ui-foundation.ui.tree.drawer';\nimport { FullLoader } from '@teambit/ui-foundation.ui.full-loader';\nimport {\n  ComponentTree,\n  PayloadType,\n  ComponentView,\n  ScopeTreeNode,\n  NamespaceTreeNode,\n  ScopePayload,\n} from '@teambit/ui-foundation.ui.side-bar';\nimport { TreeNodeProps } from '@teambit/design.ui.tree';\nimport React, { useCallback, useContext, useState, createContext } from 'react';\nimport classNames from 'classnames';\nimport { ComponentTreeSlot } from '@teambit/component-tree';\nimport { mutedItalic } from '@teambit/design.ui.styles.muted-italic';\nimport { ellipsis } from '@teambit/design.ui.styles.ellipsis';\nimport { Toggle } from '@teambit/design.ui.input.toggle';\nimport { WorkspaceContext } from '../workspace/workspace-context';\nimport styles from './workspace-components-drawer.module.scss';\n\ntype WorkspaceTreeContextType = {\n  collapsed: boolean;\n  setCollapsed: (x: boolean) => void;\n  filterOpen: boolean;\n  setFilterOpen: (open: boolean) => void;\n  activeFilters: string[];\n  setActiveFilter: (filterId: string) => void;\n};\nconst WorkspaceTreeContext = createContext<WorkspaceTreeContextType>({\n  collapsed: true,\n  setCollapsed: () => {},\n  activeFilters: [],\n  setActiveFilter: () => {},\n  filterOpen: false,\n  setFilterOpen: () => {},\n});\n\nexport class WorkspaceComponentsDrawer implements DrawerType {\n  constructor(private treeNodeSlot: ComponentTreeSlot) {}\n\n  id = 'workspace-components';\n  name = 'COMPONENTS';\n\n  widgets = [<FilterWidget key={'filter-widget'} />, <TreeToggleWidget key={'tree-toggle-widget'} />];\n\n  Context = ({ children }) => {\n    const [collapsed, setCollapsed] = useState(true);\n    const [activeFilters, setActiveFilters] = useState<string[]>([]);\n    const [filterOpen, setFilterOpen] = useState<boolean>(false);\n\n    const handleActiveFilterToggle = (filterId: string) => {\n      const isFilterActive = activeFilters.includes(filterId);\n      if (isFilterActive) {\n        setActiveFilters((list) => list.filter((id) => id !== filterId));\n        return;\n      }\n      setActiveFilters((list) => list.concat(filterId));\n    };\n\n    return (\n      <WorkspaceTreeContext.Provider\n        value={{\n          collapsed,\n          setCollapsed,\n          activeFilters,\n          setActiveFilter: handleActiveFilterToggle,\n          filterOpen,\n          setFilterOpen,\n        }}\n      >\n        {children}\n      </WorkspaceTreeContext.Provider>\n    );\n  };\n\n  Filters = [<DeprecateFilter key={'deprecate-filter'} />];\n\n  render = () => {\n    const workspace = useContext(WorkspaceContext);\n    const { collapsed, activeFilters } = useContext(WorkspaceTreeContext);\n    const { treeNodeSlot } = this;\n    const showDeprecatedComponents = activeFilters.find((activeFilter) => activeFilter === 'deprecate');\n\n    const TreeNodeRenderer = useCallback(\n      function TreeNode(props: TreeNodeProps<PayloadType>) {\n        const children = props.node.children;\n\n        if (!children) return <ComponentView {...props} treeNodeSlot={treeNodeSlot} />; // non collapse\n\n        if (props.node.payload instanceof ScopePayload) return <ScopeTreeNode {...props} />;\n\n        return <NamespaceTreeNode {...props} />;\n      },\n      [treeNodeSlot]\n    );\n\n    if (!workspace) return <FullLoader />;\n\n    const components = showDeprecatedComponents\n      ? workspace.components\n      : workspace.components.filter((component) => !component.deprecation?.isDeprecate);\n\n    if (components.length === 0) {\n      return <span className={classNames(mutedItalic, ellipsis, styles.emptyWorkspace)}>Workspace is empty</span>;\n    }\n\n    return <ComponentTree components={components} isCollapsed={collapsed} TreeNode={TreeNodeRenderer} />;\n  };\n}\n\nfunction TreeToggleWidget() {\n  const { collapsed, setCollapsed } = useContext(WorkspaceTreeContext);\n  const icon = collapsed\n    ? 'https://static.bit.dev/bit-icons/expand.svg'\n    : 'https://static.bit.dev/bit-icons/collapse.svg';\n  return (\n    <div className={styles.widgetIcon}>\n      <img src={icon} onClick={() => setCollapsed(!collapsed)} />\n    </div>\n  );\n}\n\nfunction FilterWidget() {\n  const { filterOpen, setFilterOpen } = useContext(WorkspaceTreeContext);\n  return (\n    <div className={classNames(styles.widgetIcon, styles.filterWidgetIcon, filterOpen && styles.open)}>\n      <img src=\"https://static.bit.dev/bit-icons/filter.svg\" onClick={() => setFilterOpen(!filterOpen)} />\n    </div>\n  );\n}\n\nfunction DeprecateFilter() {\n  const { activeFilters, setActiveFilter, filterOpen } = useContext(WorkspaceTreeContext);\n  const isActive = activeFilters.includes('deprecate');\n\n  if (!filterOpen) return null;\n\n  return (\n    <div className={classNames(styles.deprecateFilter, isActive && styles.active)}>\n      <div className={styles.filterIcon}>\n        <img src=\"https://static.bit.dev/bit-icons/deprecated.svg\" />\n        <span className={styles.filterIconLabel}>Deprecated</span>\n      </div>\n      <div>\n        <Toggle checked={isActive} onInputChanged={() => setActiveFilter('deprecate')} />\n      </div>\n    </div>\n  );\n}\n"]}

package/ui/workspace-components-drawer/index.ts

@@ -1 +0,0 @@
-export { WorkspaceComponentsDrawer } from './workspace-components.drawer';

package/ui/workspace-components-drawer/workspace-components-drawer.module.scss

@@ -1,51 +0,0 @@
-.emptyWorkspace {
-  padding: 8px 8px 0 28px;
-  display: block;
-}
-
-.widgetIcon {
-  padding: 4px;
-  border-radius: 8px;
-  align-items: center;
-  display: flex;
-  &:hover,
-  &.open {
-    background-color: var(--bit-border-color-lightest, #ededed);
-  }
-  img {
-    width: 16px;
-  }
-  &:active img,
-  &.open img {
-    filter: invert(38%) sepia(33%) saturate(7140%) hue-rotate(234deg) brightness(96%) contrast(87%);
-  }
-}
-
-.filterWidgetIcon {
-  margin-right: 8px;
-}
-
-.deprecateFilter {
-  display: flex;
-  flex-direction: row;
-  font-size: 14px;
-  justify-content: space-between;
-  padding: 8px;
-  margin: 4px 8px;
-
-  > div {
-    line-height: 16px;
-    display: flex;
-  }
-
-  .filterIcon {
-    img {
-      width: 16px;
-    }
-
-    .filterIconLabel {
-      margin: 0px 8px;
-      font-size: 14px;
-    }
-  }
-}

package/ui/workspace-components-drawer/workspace-components.drawer.tsx

@@ -1,149 +0,0 @@
-import type { DrawerType } from '@teambit/ui-foundation.ui.tree.drawer';
-import { FullLoader } from '@teambit/ui-foundation.ui.full-loader';
-import {
-  ComponentTree,
-  PayloadType,
-  ComponentView,
-  ScopeTreeNode,
-  NamespaceTreeNode,
-  ScopePayload,
-} from '@teambit/ui-foundation.ui.side-bar';
-import { TreeNodeProps } from '@teambit/design.ui.tree';
-import React, { useCallback, useContext, useState, createContext } from 'react';
-import classNames from 'classnames';
-import { ComponentTreeSlot } from '@teambit/component-tree';
-import { mutedItalic } from '@teambit/design.ui.styles.muted-italic';
-import { ellipsis } from '@teambit/design.ui.styles.ellipsis';
-import { Toggle } from '@teambit/design.ui.input.toggle';
-import { WorkspaceContext } from '../workspace/workspace-context';
-import styles from './workspace-components-drawer.module.scss';
-
-type WorkspaceTreeContextType = {
-  collapsed: boolean;
-  setCollapsed: (x: boolean) => void;
-  filterOpen: boolean;
-  setFilterOpen: (open: boolean) => void;
-  activeFilters: string[];
-  setActiveFilter: (filterId: string) => void;
-};
-const WorkspaceTreeContext = createContext<WorkspaceTreeContextType>({
-  collapsed: true,
-  setCollapsed: () => {},
-  activeFilters: [],
-  setActiveFilter: () => {},
-  filterOpen: false,
-  setFilterOpen: () => {},
-});
-
-export class WorkspaceComponentsDrawer implements DrawerType {
-  constructor(private treeNodeSlot: ComponentTreeSlot) {}
-
-  id = 'workspace-components';
-  name = 'COMPONENTS';
-
-  widgets = [<FilterWidget key={'filter-widget'} />, <TreeToggleWidget key={'tree-toggle-widget'} />];
-
-  Context = ({ children }) => {
-    const [collapsed, setCollapsed] = useState(true);
-    const [activeFilters, setActiveFilters] = useState<string[]>([]);
-    const [filterOpen, setFilterOpen] = useState<boolean>(false);
-
-    const handleActiveFilterToggle = (filterId: string) => {
-      const isFilterActive = activeFilters.includes(filterId);
-      if (isFilterActive) {
-        setActiveFilters((list) => list.filter((id) => id !== filterId));
-        return;
-      }
-      setActiveFilters((list) => list.concat(filterId));
-    };
-
-    return (
-      <WorkspaceTreeContext.Provider
-        value={{
-          collapsed,
-          setCollapsed,
-          activeFilters,
-          setActiveFilter: handleActiveFilterToggle,
-          filterOpen,
-          setFilterOpen,
-        }}
-      >
-        {children}
-      </WorkspaceTreeContext.Provider>
-    );
-  };
-
-  Filters = [<DeprecateFilter key={'deprecate-filter'} />];
-
-  render = () => {
-    const workspace = useContext(WorkspaceContext);
-    const { collapsed, activeFilters } = useContext(WorkspaceTreeContext);
-    const { treeNodeSlot } = this;
-    const showDeprecatedComponents = activeFilters.find((activeFilter) => activeFilter === 'deprecate');
-
-    const TreeNodeRenderer = useCallback(
-      function TreeNode(props: TreeNodeProps<PayloadType>) {
-        const children = props.node.children;
-
-        if (!children) return <ComponentView {...props} treeNodeSlot={treeNodeSlot} />; // non collapse
-
-        if (props.node.payload instanceof ScopePayload) return <ScopeTreeNode {...props} />;
-
-        return <NamespaceTreeNode {...props} />;
-      },
-      [treeNodeSlot]
-    );
-
-    if (!workspace) return <FullLoader />;
-
-    const components = showDeprecatedComponents
-      ? workspace.components
-      : workspace.components.filter((component) => !component.deprecation?.isDeprecate);
-
-    if (components.length === 0) {
-      return <span className={classNames(mutedItalic, ellipsis, styles.emptyWorkspace)}>Workspace is empty</span>;
-    }
-
-    return <ComponentTree components={components} isCollapsed={collapsed} TreeNode={TreeNodeRenderer} />;
-  };
-}
-
-function TreeToggleWidget() {
-  const { collapsed, setCollapsed } = useContext(WorkspaceTreeContext);
-  const icon = collapsed
-    ? 'https://static.bit.dev/bit-icons/expand.svg'
-    : 'https://static.bit.dev/bit-icons/collapse.svg';
-  return (
-    <div className={styles.widgetIcon}>
-      <img src={icon} onClick={() => setCollapsed(!collapsed)} />
-    </div>
-  );
-}
-
-function FilterWidget() {
-  const { filterOpen, setFilterOpen } = useContext(WorkspaceTreeContext);
-  return (
-    <div className={classNames(styles.widgetIcon, styles.filterWidgetIcon, filterOpen && styles.open)}>
-      <img src="https://static.bit.dev/bit-icons/filter.svg" onClick={() => setFilterOpen(!filterOpen)} />
-    </div>
-  );
-}
-
-function DeprecateFilter() {
-  const { activeFilters, setActiveFilter, filterOpen } = useContext(WorkspaceTreeContext);
-  const isActive = activeFilters.includes('deprecate');
-
-  if (!filterOpen) return null;
-
-  return (
-    <div className={classNames(styles.deprecateFilter, isActive && styles.active)}>
-      <div className={styles.filterIcon}>
-        <img src="https://static.bit.dev/bit-icons/deprecated.svg" />
-        <span className={styles.filterIconLabel}>Deprecated</span>
-      </div>
-      <div>
-        <Toggle checked={isActive} onInputChanged={() => setActiveFilter('deprecate')} />
-      </div>
-    </div>
-  );
-}