@teambit/component.ui.component-drawer 0.0.0-749a8f928da2d57edc546f586d491cdfcf30043d

package/component-drawer-filter-widget.context.tsx

@@ -0,0 +1,20 @@
+import React, { createContext, ReactNode, useState } from 'react';
+
+export type ComponentFilterWidgetContextType = {
+  filterWidgetOpen: boolean;
+  setFilterWidget: (open: boolean) => void;
+};
+
+export const ComponentFilterWidgetContext = createContext<ComponentFilterWidgetContextType>({
+  filterWidgetOpen: false,
+  setFilterWidget: () => {},
+});
+
+export const ComponentFilterWidgetProvider = ({ children }: { children: ReactNode }) => {
+  const [filterWidgetOpen, setFilterWidget] = useState<boolean>(false);
+  return (
+    <ComponentFilterWidgetContext.Provider value={{ filterWidgetOpen, setFilterWidget }}>
+      {children}
+    </ComponentFilterWidgetContext.Provider>
+  );
+};

package/component-drawer-tree-widget.context.tsx

@@ -0,0 +1,16 @@
+import React, { createContext, ReactNode, useState } from 'react';
+
+export type ComponentTreeContextType = {
+  collapsed: boolean;
+  setCollapsed: (collapsed: boolean) => void;
+};
+
+export const ComponentTreeContext = createContext<ComponentTreeContextType>({
+  collapsed: true,
+  setCollapsed: () => {},
+});
+
+export const ComponentTreeProvider = ({ children }: { children: ReactNode }) => {
+  const [collapsed, setCollapsed] = useState<boolean>(true);
+  return <ComponentTreeContext.Provider value={{ collapsed, setCollapsed }}>{children}</ComponentTreeContext.Provider>;
+};

package/component-drawer.module.scss

@@ -0,0 +1,64 @@
+.drawerContainer {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.emptyDrawer {
+  padding: 8px 8px 0 28px;
+  display: block;
+}
+
+.widgetIcon {
+  padding: 4px;
+  border-radius: 8px;
+  align-items: center;
+  display: flex;
+  margin-left: 4px;
+
+  &: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;
+}
+
+.filtersContainer {
+  opacity: 0;
+  transition:
+    max-height 300ms ease-in-out,
+    opacity 250ms ease-in-out;
+  max-height: 0;
+  border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
+
+  &.open {
+    opacity: 1;
+    max-height: 100%;
+  }
+}
+
+.filter {
+  display: none;
+  &.open {
+    display: flex;
+    flex-direction: row;
+    font-size: 14px;
+    justify-content: space-between;
+    margin: 4px 8px;
+  }
+}
+
+.drawerTreeContainer {
+  height: 100%;
+  overflow-y: auto;
+}

package/component-drawer.tsx

@@ -0,0 +1,264 @@
+import React, { useContext, ReactNode, useMemo } from 'react';
+import classNames from 'classnames';
+import { ComponentTree } from '@teambit/ui-foundation.ui.side-bar';
+import type { PayloadType } from '@teambit/ui-foundation.ui.side-bar';
+import { ComponentTreeSlot } from '@teambit/component-tree';
+import type { DrawerType } from '@teambit/ui-foundation.ui.tree.drawer';
+import { mutedItalic } from '@teambit/design.ui.styles.muted-italic';
+import { ellipsis } from '@teambit/design.ui.styles.ellipsis';
+import { ComponentModel } from '@teambit/component';
+import { TreeNode as TreeNodeType, TreeNodeRenderer } from '@teambit/design.ui.tree';
+import { Composer, ComponentTuple } from '@teambit/base-ui.utils.composer';
+import flatten from 'lodash.flatten';
+import {
+  ComponentFiltersProvider,
+  ComponentFilterContext,
+  runAllFilters,
+  ComponentFilters,
+} from '@teambit/component.ui.component-filters.component-filter-context';
+import { useLanes } from '@teambit/lanes.hooks.use-lanes';
+import { LanesModel } from '@teambit/lanes.ui.models.lanes-model';
+import { SlotRegistry } from '@teambit/harmony';
+import { ScopeModel } from '@teambit/scope.models.scope-model';
+import { WorkspaceModel } from '@teambit/workspace';
+import { ComponentTreeLoader } from '@teambit/design.ui.skeletons.sidebar-loader';
+import { ComponentFilterWidgetProvider, ComponentFilterWidgetContext } from './component-drawer-filter-widget.context';
+import { ComponentTreeContext, ComponentTreeProvider } from './component-drawer-tree-widget.context';
+
+import styles from './component-drawer.module.scss';
+
+export type ComponentFiltersSlot = SlotRegistry<ComponentFilters>;
+export type DrawerWidgetSlot = SlotRegistry<ReactNode[]>;
+export type TransformTreeFn = (host?: WorkspaceModel | ScopeModel) => (rootNode: TreeNodeType) => TreeNodeType;
+
+export type ComponentsDrawerProps = Omit<DrawerType, 'render'> & {
+  useComponents: () => { components: ComponentModel[]; loading?: boolean };
+  useLanes?: () => { lanesModel?: LanesModel; loading?: boolean };
+  emptyMessage?: ReactNode;
+  plugins?: ComponentsDrawerPlugins;
+  transformTree?: TransformTreeFn;
+  assumeScopeInUrl?: boolean;
+  useHost?: () => ScopeModel | WorkspaceModel;
+};
+
+export type ComponentsDrawerPlugins = {
+  tree?: {
+    customRenderer?: (
+      treeNodeSlot?: ComponentTreeSlot,
+      host?: ScopeModel | WorkspaceModel
+    ) => TreeNodeRenderer<PayloadType>;
+    widgets: ComponentTreeSlot;
+  };
+  filters?: ComponentFiltersSlot;
+  drawerWidgets?: DrawerWidgetSlot;
+};
+
+export class ComponentsDrawer implements DrawerType {
+  readonly id: string;
+  readonly useComponents: () => { components: ComponentModel[]; loading?: boolean };
+  readonly useLanes: () => { lanesModel?: LanesModel; loading?: boolean };
+  name: ReactNode;
+  tooltip?: string;
+  order?: number;
+  isHidden?: () => boolean;
+  emptyMessage?: ReactNode;
+  widgets: ReactNode[];
+  plugins: ComponentsDrawerPlugins;
+  assumeScopeInUrl: boolean;
+  useHost?: () => ScopeModel | WorkspaceModel;
+  transformTree?: TransformTreeFn;
+
+  constructor(props: ComponentsDrawerProps) {
+    Object.assign(this, props);
+    this.useComponents = props.useComponents;
+    this.useLanes = props.useLanes || useLanes;
+    this.emptyMessage = props.emptyMessage;
+    this.plugins = props.plugins || {};
+    this.setWidgets(props.plugins?.drawerWidgets);
+    this.assumeScopeInUrl = props.assumeScopeInUrl || false;
+    this.useHost = props.useHost;
+    this.transformTree = props.transformTree;
+  }
+
+  Context = ({ children }) => {
+    const filters = flatten(this.plugins?.filters?.values() || []);
+    const combinedContexts = [
+      ComponentTreeProvider,
+      ComponentFilterWidgetProvider,
+      [ComponentFiltersProvider, { filters }] as ComponentTuple<{ children?: ReactNode; filters: any }>,
+    ];
+    return <Composer components={combinedContexts}>{children}</Composer>;
+  };
+
+  setWidgets = (widgets?: DrawerWidgetSlot) => {
+    this.widgets = flatten(widgets?.values());
+  };
+
+  render = () => {
+    const { useComponents, useLanes: useLanesFromInstance, emptyMessage, plugins, transformTree, useHost, id } = this;
+    return (
+      <ComponentsDrawerContent
+        useComponents={useComponents}
+        useLanes={useLanesFromInstance}
+        emptyMessage={emptyMessage}
+        plugins={plugins}
+        transformTree={transformTree}
+        useHost={useHost}
+        id={id}
+      />
+    );
+  };
+}
+
+function ComponentsDrawerContent({
+  useComponents,
+  useLanes: useLanesFromProps,
+  emptyMessage,
+  plugins,
+  transformTree,
+  useHost,
+  id,
+}: {
+  useComponents: () => { components: ComponentModel[]; loading?: boolean };
+  useLanes: () => { lanesModel?: LanesModel; loading?: boolean };
+  emptyMessage: ReactNode;
+  plugins: ComponentsDrawerPlugins;
+  transformTree?: TransformTreeFn;
+  useHost?: () => ScopeModel | WorkspaceModel;
+  id: string;
+}) {
+  const { loading: loadingComponents, components } = useComponents();
+  const { lanesModel: lanes, loading: loadingLanesModel } = useLanesFromProps();
+  const componentFiltersContext = useContext(ComponentFilterContext);
+  const filters = componentFiltersContext?.filters || [];
+  const host = useHost?.();
+
+  const filteredComponents = useMemo(() => {
+    if (!filters.length) return components;
+    return runAllFilters(filters, { components, lanes });
+  }, [filters, components.length, lanes?.lanes.length, lanes?.viewedLane?.id.toString(), loadingLanesModel]);
+
+  const Filters = <ComponentsDrawerRenderFilters components={components} lanes={lanes} plugins={plugins} />;
+
+  const Tree = (
+    <ComponentsDrawerRenderTree
+      components={filteredComponents}
+      host={host}
+      plugins={plugins}
+      transformTree={transformTree}
+      lanesModel={lanes}
+    />
+  );
+
+  const emptyDrawer = <span className={classNames(mutedItalic, ellipsis, styles.emptyDrawer)}>{emptyMessage}</span>;
+
+  const loading = loadingComponents || loadingLanesModel || !lanes || !components;
+
+  if (loading) return <ComponentTreeLoader />;
+
+  return (
+    <div key={id} className={styles.drawerContainer}>
+      {Filters}
+      {Tree}
+      {filteredComponents.length === 0 && emptyDrawer}
+    </div>
+  );
+}
+
+function ComponentsDrawerRenderFilters({
+  components,
+  lanes,
+  plugins,
+}: {
+  components: ComponentModel[];
+  lanes?: LanesModel;
+  plugins: ComponentsDrawerPlugins;
+}) {
+  const { filterWidgetOpen } = useContext(ComponentFilterWidgetContext);
+  const filterPlugins = plugins.filters;
+
+  const filters = useMemo(
+    () =>
+      (filterPlugins &&
+        flatten(
+          filterPlugins.toArray().map(([key, filtersByKey]) => {
+            return filtersByKey.map((filter) => ({ ...filter, key: `${key}-${filter.id}` }));
+          })
+        ).sort((a, b) => (a.order ?? 0) - (b.order ?? 0))) ||
+      [],
+    [filterPlugins?.map.size, filterPlugins?.values()?.length]
+  );
+
+  if (!filters.length) return null;
+
+  return (
+    <div className={classNames(styles.filtersContainer, filterWidgetOpen && styles.open)}>
+      {filters.map((filter) => (
+        <filter.render
+          key={filter.key}
+          components={components}
+          lanes={lanes}
+          className={classNames(styles.filter, filterWidgetOpen && styles.open)}
+        />
+      ))}
+    </div>
+  );
+}
+
+function ComponentsDrawerRenderTree({
+  components,
+  host,
+  plugins,
+  transformTree,
+  lanesModel,
+}: {
+  components: ComponentModel[];
+  host?: ScopeModel | WorkspaceModel;
+  plugins: ComponentsDrawerPlugins;
+  transformTree?: TransformTreeFn;
+  lanesModel?: LanesModel;
+}) {
+  const { collapsed } = useContext(ComponentTreeContext);
+  const { tree } = plugins;
+
+  const TreeNode = useMemo(() => {
+    return tree?.customRenderer && tree.customRenderer(tree.widgets, host);
+  }, [tree?.customRenderer, tree?.widgets.map.size, tree?.widgets.values().length]);
+
+  const isVisible = components.length > 0;
+
+  if (!isVisible) return null;
+
+  return (
+    <div className={styles.drawerTreeContainer}>
+      <ComponentTree
+        transformTree={transformTree ? transformTree(host) : undefined}
+        components={components}
+        isCollapsed={collapsed}
+        TreeNode={TreeNode}
+        lanesModel={lanesModel}
+      />
+    </div>
+  );
+}
+
+export function TreeToggleWidget() {
+  const { collapsed, setCollapsed } = useContext(ComponentTreeContext);
+  const icon = collapsed
+    ? 'https://static.bit.dev/bit-icons/expand.svg'
+    : 'https://static.bit.dev/bit-icons/collapse.svg';
+  return (
+    <div className={classNames(styles.widgetIcon, !collapsed && styles.open)}>
+      <img src={icon} onClick={() => setCollapsed(!collapsed)} />
+    </div>
+  );
+}
+
+export function FilterWidget() {
+  const { filterWidgetOpen, setFilterWidget } = useContext(ComponentFilterWidgetContext);
+  return (
+    <div className={classNames(styles.widgetIcon, styles.filterWidget, filterWidgetOpen && styles.open)}>
+      <img src="https://static.bit.dev/bit-icons/filter.svg" onClick={() => setFilterWidget(!filterWidgetOpen)} />
+    </div>
+  );
+}

package/dist/component-drawer-filter-widget.context.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from 'react';
+export type ComponentFilterWidgetContextType = {
+    filterWidgetOpen: boolean;
+    setFilterWidget: (open: boolean) => void;
+};
+export declare const ComponentFilterWidgetContext: React.Context<ComponentFilterWidgetContextType>;
+export declare const ComponentFilterWidgetProvider: ({ children }: {
+    children: ReactNode;
+}) => React.JSX.Element;

package/dist/component-drawer-filter-widget.context.js

@@ -0,0 +1,37 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentFilterWidgetProvider = exports.ComponentFilterWidgetContext = void 0;
+const react_1 = __importStar(require("react"));
+exports.ComponentFilterWidgetContext = (0, react_1.createContext)({
+    filterWidgetOpen: false,
+    setFilterWidget: () => { },
+});
+const ComponentFilterWidgetProvider = ({ children }) => {
+    const [filterWidgetOpen, setFilterWidget] = (0, react_1.useState)(false);
+    return (react_1.default.createElement(exports.ComponentFilterWidgetContext.Provider, { value: { filterWidgetOpen, setFilterWidget } }, children));
+};
+exports.ComponentFilterWidgetProvider = ComponentFilterWidgetProvider;
+//# sourceMappingURL=component-drawer-filter-widget.context.js.map

package/dist/component-drawer-filter-widget.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-drawer-filter-widget.context.js","sourceRoot":"","sources":["../component-drawer-filter-widget.context.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAkE;AAOrD,QAAA,4BAA4B,GAAG,IAAA,qBAAa,EAAmC;IAC1F,gBAAgB,EAAE,KAAK;IACvB,eAAe,EAAE,GAAG,EAAE,GAAE,CAAC;CAC1B,CAAC,CAAC;AAEI,MAAM,6BAA6B,GAAG,CAAC,EAAE,QAAQ,EAA2B,EAAE,EAAE;IACrF,MAAM,CAAC,gBAAgB,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IACrE,OAAO,CACL,8BAAC,oCAA4B,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,gBAAgB,EAAE,eAAe,EAAE,IAChF,QAAQ,CAC6B,CACzC,CAAC;AACJ,CAAC,CAAC;AAPW,QAAA,6BAA6B,iCAOxC"}

package/dist/component-drawer-tree-widget.context.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from 'react';
+export type ComponentTreeContextType = {
+    collapsed: boolean;
+    setCollapsed: (collapsed: boolean) => void;
+};
+export declare const ComponentTreeContext: React.Context<ComponentTreeContextType>;
+export declare const ComponentTreeProvider: ({ children }: {
+    children: ReactNode;
+}) => React.JSX.Element;

package/dist/component-drawer-tree-widget.context.js

@@ -0,0 +1,37 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentTreeProvider = exports.ComponentTreeContext = void 0;
+const react_1 = __importStar(require("react"));
+exports.ComponentTreeContext = (0, react_1.createContext)({
+    collapsed: true,
+    setCollapsed: () => { },
+});
+const ComponentTreeProvider = ({ children }) => {
+    const [collapsed, setCollapsed] = (0, react_1.useState)(true);
+    return react_1.default.createElement(exports.ComponentTreeContext.Provider, { value: { collapsed, setCollapsed } }, children);
+};
+exports.ComponentTreeProvider = ComponentTreeProvider;
+//# sourceMappingURL=component-drawer-tree-widget.context.js.map

package/dist/component-drawer-tree-widget.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-drawer-tree-widget.context.js","sourceRoot":"","sources":["../component-drawer-tree-widget.context.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAkE;AAOrD,QAAA,oBAAoB,GAAG,IAAA,qBAAa,EAA2B;IAC1E,SAAS,EAAE,IAAI;IACf,YAAY,EAAE,GAAG,EAAE,GAAE,CAAC;CACvB,CAAC,CAAC;AAEI,MAAM,qBAAqB,GAAG,CAAC,EAAE,QAAQ,EAA2B,EAAE,EAAE;IAC7E,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAU,IAAI,CAAC,CAAC;IAC1D,OAAO,8BAAC,4BAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,YAAY,EAAE,IAAG,QAAQ,CAAiC,CAAC;AACvH,CAAC,CAAC;AAHW,QAAA,qBAAqB,yBAGhC"}

package/dist/component-drawer.d.ts

@@ -0,0 +1,66 @@
+import React, { ReactNode } from 'react';
+import type { PayloadType } from '@teambit/ui-foundation.ui.side-bar';
+import { ComponentTreeSlot } from '@teambit/component-tree';
+import type { DrawerType } from '@teambit/ui-foundation.ui.tree.drawer';
+import { ComponentModel } from '@teambit/component';
+import { TreeNode as TreeNodeType, TreeNodeRenderer } from '@teambit/design.ui.tree';
+import { ComponentFilters } from '@teambit/component.ui.component-filters.component-filter-context';
+import { LanesModel } from '@teambit/lanes.ui.models.lanes-model';
+import { SlotRegistry } from '@teambit/harmony';
+import { ScopeModel } from '@teambit/scope.models.scope-model';
+import { WorkspaceModel } from '@teambit/workspace';
+export type ComponentFiltersSlot = SlotRegistry<ComponentFilters>;
+export type DrawerWidgetSlot = SlotRegistry<ReactNode[]>;
+export type TransformTreeFn = (host?: WorkspaceModel | ScopeModel) => (rootNode: TreeNodeType) => TreeNodeType;
+export type ComponentsDrawerProps = Omit<DrawerType, 'render'> & {
+    useComponents: () => {
+        components: ComponentModel[];
+        loading?: boolean;
+    };
+    useLanes?: () => {
+        lanesModel?: LanesModel;
+        loading?: boolean;
+    };
+    emptyMessage?: ReactNode;
+    plugins?: ComponentsDrawerPlugins;
+    transformTree?: TransformTreeFn;
+    assumeScopeInUrl?: boolean;
+    useHost?: () => ScopeModel | WorkspaceModel;
+};
+export type ComponentsDrawerPlugins = {
+    tree?: {
+        customRenderer?: (treeNodeSlot?: ComponentTreeSlot, host?: ScopeModel | WorkspaceModel) => TreeNodeRenderer<PayloadType>;
+        widgets: ComponentTreeSlot;
+    };
+    filters?: ComponentFiltersSlot;
+    drawerWidgets?: DrawerWidgetSlot;
+};
+export declare class ComponentsDrawer implements DrawerType {
+    readonly id: string;
+    readonly useComponents: () => {
+        components: ComponentModel[];
+        loading?: boolean;
+    };
+    readonly useLanes: () => {
+        lanesModel?: LanesModel;
+        loading?: boolean;
+    };
+    name: ReactNode;
+    tooltip?: string;
+    order?: number;
+    isHidden?: () => boolean;
+    emptyMessage?: ReactNode;
+    widgets: ReactNode[];
+    plugins: ComponentsDrawerPlugins;
+    assumeScopeInUrl: boolean;
+    useHost?: () => ScopeModel | WorkspaceModel;
+    transformTree?: TransformTreeFn;
+    constructor(props: ComponentsDrawerProps);
+    Context: ({ children }: {
+        children: any;
+    }) => React.JSX.Element;
+    setWidgets: (widgets?: DrawerWidgetSlot) => void;
+    render: () => React.JSX.Element;
+}
+export declare function TreeToggleWidget(): React.JSX.Element;
+export declare function FilterWidget(): React.JSX.Element;

package/dist/component-drawer.js

@@ -0,0 +1,138 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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.ComponentsDrawer = void 0;
+exports.TreeToggleWidget = TreeToggleWidget;
+exports.FilterWidget = FilterWidget;
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const ui_foundation_ui_side_bar_1 = require("@teambit/ui-foundation.ui.side-bar");
+const design_ui_styles_muted_italic_1 = require("@teambit/design.ui.styles.muted-italic");
+const design_ui_styles_ellipsis_1 = require("@teambit/design.ui.styles.ellipsis");
+const base_ui_utils_composer_1 = require("@teambit/base-ui.utils.composer");
+const lodash_flatten_1 = __importDefault(require("lodash.flatten"));
+const component_ui_component_filters_component_filter_context_1 = require("@teambit/component.ui.component-filters.component-filter-context");
+const lanes_hooks_use_lanes_1 = require("@teambit/lanes.hooks.use-lanes");
+const design_ui_skeletons_sidebar_loader_1 = require("@teambit/design.ui.skeletons.sidebar-loader");
+const component_drawer_filter_widget_context_1 = require("./component-drawer-filter-widget.context");
+const component_drawer_tree_widget_context_1 = require("./component-drawer-tree-widget.context");
+const component_drawer_module_scss_1 = __importDefault(require("./component-drawer.module.scss"));
+class ComponentsDrawer {
+    constructor(props) {
+        var _a;
+        this.Context = ({ children }) => {
+            var _a, _b;
+            const filters = (0, lodash_flatten_1.default)(((_b = (_a = this.plugins) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.values()) || []);
+            const combinedContexts = [
+                component_drawer_tree_widget_context_1.ComponentTreeProvider,
+                component_drawer_filter_widget_context_1.ComponentFilterWidgetProvider,
+                [component_ui_component_filters_component_filter_context_1.ComponentFiltersProvider, { filters }],
+            ];
+            return react_1.default.createElement(base_ui_utils_composer_1.Composer, { components: combinedContexts }, children);
+        };
+        this.setWidgets = (widgets) => {
+            this.widgets = (0, lodash_flatten_1.default)(widgets === null || widgets === void 0 ? void 0 : widgets.values());
+        };
+        this.render = () => {
+            const { useComponents, useLanes: useLanesFromInstance, emptyMessage, plugins, transformTree, useHost, id } = this;
+            return (react_1.default.createElement(ComponentsDrawerContent, { useComponents: useComponents, useLanes: useLanesFromInstance, emptyMessage: emptyMessage, plugins: plugins, transformTree: transformTree, useHost: useHost, id: id }));
+        };
+        Object.assign(this, props);
+        this.useComponents = props.useComponents;
+        this.useLanes = props.useLanes || lanes_hooks_use_lanes_1.useLanes;
+        this.emptyMessage = props.emptyMessage;
+        this.plugins = props.plugins || {};
+        this.setWidgets((_a = props.plugins) === null || _a === void 0 ? void 0 : _a.drawerWidgets);
+        this.assumeScopeInUrl = props.assumeScopeInUrl || false;
+        this.useHost = props.useHost;
+        this.transformTree = props.transformTree;
+    }
+}
+exports.ComponentsDrawer = ComponentsDrawer;
+function ComponentsDrawerContent({ useComponents, useLanes: useLanesFromProps, emptyMessage, plugins, transformTree, useHost, id, }) {
+    var _a;
+    const { loading: loadingComponents, components } = useComponents();
+    const { lanesModel: lanes, loading: loadingLanesModel } = useLanesFromProps();
+    const componentFiltersContext = (0, react_1.useContext)(component_ui_component_filters_component_filter_context_1.ComponentFilterContext);
+    const filters = (componentFiltersContext === null || componentFiltersContext === void 0 ? void 0 : componentFiltersContext.filters) || [];
+    const host = useHost === null || useHost === void 0 ? void 0 : useHost();
+    const filteredComponents = (0, react_1.useMemo)(() => {
+        if (!filters.length)
+            return components;
+        return (0, component_ui_component_filters_component_filter_context_1.runAllFilters)(filters, { components, lanes });
+    }, [filters, components.length, lanes === null || lanes === void 0 ? void 0 : lanes.lanes.length, (_a = lanes === null || lanes === void 0 ? void 0 : lanes.viewedLane) === null || _a === void 0 ? void 0 : _a.id.toString(), loadingLanesModel]);
+    const Filters = react_1.default.createElement(ComponentsDrawerRenderFilters, { components: components, lanes: lanes, plugins: plugins });
+    const Tree = (react_1.default.createElement(ComponentsDrawerRenderTree, { components: filteredComponents, host: host, plugins: plugins, transformTree: transformTree, lanesModel: lanes }));
+    const emptyDrawer = react_1.default.createElement("span", { className: (0, classnames_1.default)(design_ui_styles_muted_italic_1.mutedItalic, design_ui_styles_ellipsis_1.ellipsis, component_drawer_module_scss_1.default.emptyDrawer) }, emptyMessage);
+    const loading = loadingComponents || loadingLanesModel || !lanes || !components;
+    if (loading)
+        return react_1.default.createElement(design_ui_skeletons_sidebar_loader_1.ComponentTreeLoader, null);
+    return (react_1.default.createElement("div", { key: id, className: component_drawer_module_scss_1.default.drawerContainer },
+        Filters,
+        Tree,
+        filteredComponents.length === 0 && emptyDrawer));
+}
+function ComponentsDrawerRenderFilters({ components, lanes, plugins, }) {
+    var _a;
+    const { filterWidgetOpen } = (0, react_1.useContext)(component_drawer_filter_widget_context_1.ComponentFilterWidgetContext);
+    const filterPlugins = plugins.filters;
+    const filters = (0, react_1.useMemo)(() => (filterPlugins &&
+        (0, lodash_flatten_1.default)(filterPlugins.toArray().map(([key, filtersByKey]) => {
+            return filtersByKey.map((filter) => (Object.assign(Object.assign({}, filter), { key: `${key}-${filter.id}` })));
+        })).sort((a, b) => { var _a, _b; return ((_a = a.order) !== null && _a !== void 0 ? _a : 0) - ((_b = b.order) !== null && _b !== void 0 ? _b : 0); })) ||
+        [], [filterPlugins === null || filterPlugins === void 0 ? void 0 : filterPlugins.map.size, (_a = filterPlugins === null || filterPlugins === void 0 ? void 0 : filterPlugins.values()) === null || _a === void 0 ? void 0 : _a.length]);
+    if (!filters.length)
+        return null;
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(component_drawer_module_scss_1.default.filtersContainer, filterWidgetOpen && component_drawer_module_scss_1.default.open) }, filters.map((filter) => (react_1.default.createElement(filter.render, { key: filter.key, components: components, lanes: lanes, className: (0, classnames_1.default)(component_drawer_module_scss_1.default.filter, filterWidgetOpen && component_drawer_module_scss_1.default.open) })))));
+}
+function ComponentsDrawerRenderTree({ components, host, plugins, transformTree, lanesModel, }) {
+    const { collapsed } = (0, react_1.useContext)(component_drawer_tree_widget_context_1.ComponentTreeContext);
+    const { tree } = plugins;
+    const TreeNode = (0, react_1.useMemo)(() => {
+        return (tree === null || tree === void 0 ? void 0 : tree.customRenderer) && tree.customRenderer(tree.widgets, host);
+    }, [tree === null || tree === void 0 ? void 0 : tree.customRenderer, tree === null || tree === void 0 ? void 0 : tree.widgets.map.size, tree === null || tree === void 0 ? void 0 : tree.widgets.values().length]);
+    const isVisible = components.length > 0;
+    if (!isVisible)
+        return null;
+    return (react_1.default.createElement("div", { className: component_drawer_module_scss_1.default.drawerTreeContainer },
+        react_1.default.createElement(ui_foundation_ui_side_bar_1.ComponentTree, { transformTree: transformTree ? transformTree(host) : undefined, components: components, isCollapsed: collapsed, TreeNode: TreeNode, lanesModel: lanesModel })));
+}
+function TreeToggleWidget() {
+    const { collapsed, setCollapsed } = (0, react_1.useContext)(component_drawer_tree_widget_context_1.ComponentTreeContext);
+    const icon = collapsed
+        ? 'https://static.bit.dev/bit-icons/expand.svg'
+        : 'https://static.bit.dev/bit-icons/collapse.svg';
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(component_drawer_module_scss_1.default.widgetIcon, !collapsed && component_drawer_module_scss_1.default.open) },
+        react_1.default.createElement("img", { src: icon, onClick: () => setCollapsed(!collapsed) })));
+}
+function FilterWidget() {
+    const { filterWidgetOpen, setFilterWidget } = (0, react_1.useContext)(component_drawer_filter_widget_context_1.ComponentFilterWidgetContext);
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(component_drawer_module_scss_1.default.widgetIcon, component_drawer_module_scss_1.default.filterWidget, filterWidgetOpen && component_drawer_module_scss_1.default.open) },
+        react_1.default.createElement("img", { src: "https://static.bit.dev/bit-icons/filter.svg", onClick: () => setFilterWidget(!filterWidgetOpen) })));
+}
+//# sourceMappingURL=component-drawer.js.map

package/dist/component-drawer.js.map

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

package/dist/component-drawer.module.scss

@@ -0,0 +1,64 @@
+.drawerContainer {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.emptyDrawer {
+  padding: 8px 8px 0 28px;
+  display: block;
+}
+
+.widgetIcon {
+  padding: 4px;
+  border-radius: 8px;
+  align-items: center;
+  display: flex;
+  margin-left: 4px;
+
+  &: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;
+}
+
+.filtersContainer {
+  opacity: 0;
+  transition:
+    max-height 300ms ease-in-out,
+    opacity 250ms ease-in-out;
+  max-height: 0;
+  border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
+
+  &.open {
+    opacity: 1;
+    max-height: 100%;
+  }
+}
+
+.filter {
+  display: none;
+  &.open {
+    display: flex;
+    flex-direction: row;
+    font-size: 14px;
+    justify-content: space-between;
+    margin: 4px 8px;
+  }
+}
+
+.drawerTreeContainer {
+  height: 100%;
+  overflow-y: auto;
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { ComponentsDrawer, ComponentsDrawerProps, FilterWidget, TreeToggleWidget, ComponentFiltersSlot, DrawerWidgetSlot, } from './component-drawer';
+export { ComponentFilterWidgetContextType, ComponentFilterWidgetContext, ComponentFilterWidgetProvider, } from './component-drawer-filter-widget.context';
+export { ComponentTreeContextType, ComponentTreeContext, ComponentTreeProvider, } from './component-drawer-tree-widget.context';

package/dist/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentTreeProvider = exports.ComponentTreeContext = exports.ComponentFilterWidgetProvider = exports.ComponentFilterWidgetContext = exports.TreeToggleWidget = exports.FilterWidget = exports.ComponentsDrawer = void 0;
+var component_drawer_1 = require("./component-drawer");
+Object.defineProperty(exports, "ComponentsDrawer", { enumerable: true, get: function () { return component_drawer_1.ComponentsDrawer; } });
+Object.defineProperty(exports, "FilterWidget", { enumerable: true, get: function () { return component_drawer_1.FilterWidget; } });
+Object.defineProperty(exports, "TreeToggleWidget", { enumerable: true, get: function () { return component_drawer_1.TreeToggleWidget; } });
+var component_drawer_filter_widget_context_1 = require("./component-drawer-filter-widget.context");
+Object.defineProperty(exports, "ComponentFilterWidgetContext", { enumerable: true, get: function () { return component_drawer_filter_widget_context_1.ComponentFilterWidgetContext; } });
+Object.defineProperty(exports, "ComponentFilterWidgetProvider", { enumerable: true, get: function () { return component_drawer_filter_widget_context_1.ComponentFilterWidgetProvider; } });
+var component_drawer_tree_widget_context_1 = require("./component-drawer-tree-widget.context");
+Object.defineProperty(exports, "ComponentTreeContext", { enumerable: true, get: function () { return component_drawer_tree_widget_context_1.ComponentTreeContext; } });
+Object.defineProperty(exports, "ComponentTreeProvider", { enumerable: true, get: function () { return component_drawer_tree_widget_context_1.ComponentTreeProvider; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,uDAO4B;AAN1B,oHAAA,gBAAgB,OAAA;AAEhB,gHAAA,YAAY,OAAA;AACZ,oHAAA,gBAAgB,OAAA;AAIlB,mGAIkD;AAFhD,sJAAA,4BAA4B,OAAA;AAC5B,uJAAA,6BAA6B,OAAA;AAE/B,+FAIgD;AAF9C,4IAAA,oBAAoB,OAAA;AACpB,6IAAA,qBAAqB,OAAA"}

package/dist/preview-1752267760470.js

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

package/index.ts

@@ -0,0 +1,18 @@
+export {
+  ComponentsDrawer,
+  ComponentsDrawerProps,
+  FilterWidget,
+  TreeToggleWidget,
+  ComponentFiltersSlot,
+  DrawerWidgetSlot,
+} from './component-drawer';
+export {
+  ComponentFilterWidgetContextType,
+  ComponentFilterWidgetContext,
+  ComponentFilterWidgetProvider,
+} from './component-drawer-filter-widget.context';
+export {
+  ComponentTreeContextType,
+  ComponentTreeContext,
+  ComponentTreeProvider,
+} from './component-drawer-tree-widget.context';

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@teambit/component.ui.component-drawer",
+  "version": "0.0.0-749a8f928da2d57edc546f586d491cdfcf30043d",
+  "homepage": "https://bit.cloud/teambit/component/ui/component-drawer",
+  "main": "dist/index.js",
+  "componentId": {
+    "scope": "teambit.component",
+    "name": "ui/component-drawer",
+    "version": "749a8f928da2d57edc546f586d491cdfcf30043d"
+  },
+  "dependencies": {
+    "classnames": "2.2.6",
+    "lodash.flatten": "4.4.0",
+    "core-js": "^3.0.0",
+    "@teambit/base-ui.utils.composer": "1.0.0",
+    "@teambit/design.ui.skeletons.sidebar-loader": "0.0.4",
+    "@teambit/design.ui.styles.ellipsis": "0.0.357",
+    "@teambit/design.ui.styles.muted-italic": "0.0.44",
+    "@teambit/harmony": "0.4.7",
+    "@teambit/ui-foundation.ui.tree.drawer": "0.0.518",
+    "@teambit/design.ui.tree": "0.0.16",
+    "@teambit/component.ui.component-filters.component-filter-context": "0.0.238",
+    "@teambit/lanes.hooks.use-lanes": "0.0.289",
+    "@teambit/lanes.ui.models.lanes-model": "0.0.228",
+    "@teambit/scope.models.scope-model": "0.0.528",
+    "@teambit/ui-foundation.ui.side-bar": "0.0.0-a9e2edbdd7f2d36a9ebd1ee8d02d04427ed71d54"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.8",
+    "@types/classnames": "2.2.11",
+    "@types/lodash.flatten": "4.4.6",
+    "@types/mocha": "9.1.0",
+    "@types/node": "12.20.4",
+    "@types/react-dom": "^17.0.5",
+    "@types/jest": "^26.0.0",
+    "@babel/runtime": "7.20.0",
+    "@types/testing-library__jest-dom": "5.9.5"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0"
+  },
+  "license": "Apache-2.0",
+  "optionalDependencies": {},
+  "peerDependenciesMeta": {},
+  "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/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;
+}