@teambit/component.ui.component-drawer 0.0.1

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,58 @@
+.drawerContainer {
+  height: 100%;
+}
+
+.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 300ms ease-in-out;
+  max-height: 0;
+  border-bottom: 1px solid #ededed;
+
+  &.open {
+    opacity: 1;
+    max-height: 100%;
+  }
+}
+
+.filter {
+  display: flex;
+  flex-direction: row;
+  font-size: 14px;
+  justify-content: space-between;
+  padding: 8px;
+  margin: 4px 8px;
+}
+
+.componentTree {
+  overflow-y: scroll;
+  height: 100%;
+}

package/component-drawer.tsx

@@ -0,0 +1,165 @@
+import React, { useCallback, useContext, ReactNode, useMemo } from 'react';
+import classNames from 'classnames';
+import { ComponentTree, PayloadType } from '@teambit/ui-foundation.ui.side-bar';
+import { FullLoader } from '@teambit/ui-foundation.ui.full-loader';
+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 { 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';
+import { SlotRegistry } from '@teambit/harmony';
+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 ComponentsDrawerProps = Omit<DrawerType, 'render'> & {
+  useComponents: () => { components: ComponentModel[]; loading?: boolean };
+  emptyMessage?: ReactNode;
+  plugins?: ComponentsDrawerPlugins;
+};
+
+export type ComponentsDrawerPlugins = {
+  tree?: {
+    customRenderer?: (treeNodeSlot?: ComponentTreeSlot) => TreeNodeRenderer<PayloadType>;
+    widgets: ComponentTreeSlot;
+  };
+  filters?: ComponentFiltersSlot;
+  drawerWidgets?: DrawerWidgetSlot;
+};
+
+export class ComponentsDrawer implements DrawerType {
+  readonly id: string;
+  readonly useComponents: () => { components: ComponentModel[]; loading?: boolean };
+  name: ReactNode;
+  tooltip?: string;
+  order?: number;
+  isHidden?: () => boolean;
+  emptyMessage?: ReactNode;
+  widgets: ReactNode[];
+  plugins: ComponentsDrawerPlugins;
+
+  constructor(props: ComponentsDrawerProps) {
+    Object.assign(this, props);
+    this.useComponents = props.useComponents;
+    this.emptyMessage = props.emptyMessage;
+    this.plugins = props.plugins || {};
+    this.setWidgets(props.plugins?.drawerWidgets);
+  }
+
+  Context = ({ children }) => {
+    const filters = flatten(this.plugins?.filters?.values() || []);
+    const combinedContexts = [
+      ComponentTreeProvider,
+      ComponentFilterWidgetProvider,
+      [ComponentFiltersProvider, { filters }] as ComponentTuple<{ filters: any }>,
+    ];
+    return <Composer components={combinedContexts}>{children}</Composer>;
+  };
+
+  renderFilters = ({ components }: { components: ComponentModel[] }) => {
+    if (!this.plugins.filters) return null;
+    const filterPlugins = this.plugins.filters;
+    const { filterWidgetOpen } = useContext(ComponentFilterWidgetContext);
+
+    if (!filterPlugins) return null;
+
+    const filters = useMemo(
+      () =>
+        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]
+    );
+
+    return (
+      <div className={classNames(styles.filtersContainer, filterWidgetOpen && styles.open)}>
+        {filters.map((filter) => (
+          <filter.render key={filter.key} components={components} className={styles.filter} />
+        ))}
+      </div>
+    );
+  };
+
+  renderTree = ({ components }: { components: ComponentModel[] }) => {
+    const { collapsed } = useContext(ComponentTreeContext);
+    const { tree } = this.plugins;
+
+    const TreeNode = tree?.customRenderer && useCallback(tree.customRenderer(tree.widgets), [tree.widgets]);
+    const isVisible = components.length > 0;
+    if (!isVisible) return null;
+    return (
+      <ComponentTree
+        components={components}
+        isCollapsed={collapsed}
+        className={styles.componentTree}
+        TreeNode={TreeNode}
+      />
+    );
+  };
+
+  setWidgets = (widgets?: DrawerWidgetSlot) => {
+    this.widgets = flatten(widgets?.values());
+  };
+
+  render = () => {
+    const { loading, components } = this.useComponents();
+    const componentFiltersContext = useContext(ComponentFilterContext);
+
+    if (loading) return <FullLoader />;
+
+    const filters = componentFiltersContext?.filters || [];
+
+    const filteredComponents = useMemo(() => runAllFilters(filters, components), [filters]);
+
+    const Filters = this.renderFilters({ components });
+    const Tree = this.renderTree({ components: filteredComponents });
+
+    const emptyDrawer = (
+      <span className={classNames(mutedItalic, ellipsis, styles.emptyDrawer)}>{this.emptyMessage}</span>
+    );
+
+    return (
+      <div key={this.id} className={styles.drawerContainer}>
+        {Filters}
+        {Tree}
+        {Tree || emptyDrawer}
+      </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 declare type ComponentFilterWidgetContextType = {
+    filterWidgetOpen: boolean;
+    setFilterWidget: (open: boolean) => void;
+};
+export declare const ComponentFilterWidgetContext: React.Context<ComponentFilterWidgetContextType>;
+export declare const ComponentFilterWidgetProvider: ({ children }: {
+    children: ReactNode;
+}) => JSX.Element;

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

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 declare type ComponentTreeContextType = {
+    collapsed: boolean;
+    setCollapsed: (collapsed: boolean) => void;
+};
+export declare const ComponentTreeContext: React.Context<ComponentTreeContextType>;
+export declare const ComponentTreeProvider: ({ children }: {
+    children: ReactNode;
+}) => JSX.Element;

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

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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,54 @@
+import { ReactNode } from 'react';
+import { 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 { TreeNodeRenderer } from '@teambit/design.ui.tree';
+import { ComponentFilters } from '@teambit/component.ui.component-filters';
+import { SlotRegistry } from '@teambit/harmony';
+export declare type ComponentFiltersSlot = SlotRegistry<ComponentFilters>;
+export declare type DrawerWidgetSlot = SlotRegistry<ReactNode[]>;
+export declare type ComponentsDrawerProps = Omit<DrawerType, 'render'> & {
+    useComponents: () => {
+        components: ComponentModel[];
+        loading?: boolean;
+    };
+    emptyMessage?: ReactNode;
+    plugins?: ComponentsDrawerPlugins;
+};
+export declare type ComponentsDrawerPlugins = {
+    tree?: {
+        customRenderer?: (treeNodeSlot?: ComponentTreeSlot) => TreeNodeRenderer<PayloadType>;
+        widgets: ComponentTreeSlot;
+    };
+    filters?: ComponentFiltersSlot;
+    drawerWidgets?: DrawerWidgetSlot;
+};
+export declare class ComponentsDrawer implements DrawerType {
+    readonly id: string;
+    readonly useComponents: () => {
+        components: ComponentModel[];
+        loading?: boolean;
+    };
+    name: ReactNode;
+    tooltip?: string;
+    order?: number;
+    isHidden?: () => boolean;
+    emptyMessage?: ReactNode;
+    widgets: ReactNode[];
+    plugins: ComponentsDrawerPlugins;
+    constructor(props: ComponentsDrawerProps);
+    Context: ({ children }: {
+        children: any;
+    }) => JSX.Element;
+    renderFilters: ({ components }: {
+        components: ComponentModel[];
+    }) => JSX.Element;
+    renderTree: ({ components }: {
+        components: ComponentModel[];
+    }) => JSX.Element;
+    setWidgets: (widgets?: DrawerWidgetSlot) => void;
+    render: () => JSX.Element;
+}
+export declare function TreeToggleWidget(): JSX.Element;
+export declare function FilterWidget(): JSX.Element;

package/dist/component-drawer.js

@@ -0,0 +1,113 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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.FilterWidget = exports.TreeToggleWidget = exports.ComponentsDrawer = void 0;
+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 ui_foundation_ui_full_loader_1 = require("@teambit/ui-foundation.ui.full-loader");
+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_1 = require("@teambit/component.ui.component-filters");
+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_1.ComponentFiltersProvider, { filters }],
+            ];
+            return react_1.default.createElement(base_ui_utils_composer_1.Composer, { components: combinedContexts }, children);
+        };
+        this.renderFilters = ({ components }) => {
+            if (!this.plugins.filters)
+                return null;
+            const filterPlugins = this.plugins.filters;
+            const { filterWidgetOpen } = (0, react_1.useContext)(component_drawer_filter_widget_context_1.ComponentFilterWidgetContext);
+            if (!filterPlugins)
+                return null;
+            const filters = (0, react_1.useMemo)(() => (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]);
+            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, className: component_drawer_module_scss_1.default.filter })))));
+        };
+        this.renderTree = ({ components }) => {
+            const { collapsed } = (0, react_1.useContext)(component_drawer_tree_widget_context_1.ComponentTreeContext);
+            const { tree } = this.plugins;
+            const TreeNode = (tree === null || tree === void 0 ? void 0 : tree.customRenderer) && (0, react_1.useCallback)(tree.customRenderer(tree.widgets), [tree.widgets]);
+            const isVisible = components.length > 0;
+            if (!isVisible)
+                return null;
+            return (react_1.default.createElement(ui_foundation_ui_side_bar_1.ComponentTree, { components: components, isCollapsed: collapsed, className: component_drawer_module_scss_1.default.componentTree, TreeNode: TreeNode }));
+        };
+        this.setWidgets = (widgets) => {
+            this.widgets = (0, lodash_flatten_1.default)(widgets === null || widgets === void 0 ? void 0 : widgets.values());
+        };
+        this.render = () => {
+            const { loading, components } = this.useComponents();
+            const componentFiltersContext = (0, react_1.useContext)(component_ui_component_filters_1.ComponentFilterContext);
+            if (loading)
+                return react_1.default.createElement(ui_foundation_ui_full_loader_1.FullLoader, null);
+            const filters = (componentFiltersContext === null || componentFiltersContext === void 0 ? void 0 : componentFiltersContext.filters) || [];
+            const filteredComponents = (0, react_1.useMemo)(() => (0, component_ui_component_filters_1.runAllFilters)(filters, components), [filters]);
+            const Filters = this.renderFilters({ components });
+            const Tree = this.renderTree({ components: filteredComponents });
+            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) }, this.emptyMessage));
+            return (react_1.default.createElement("div", { key: this.id, className: component_drawer_module_scss_1.default.drawerContainer },
+                Filters,
+                Tree,
+                Tree || emptyDrawer));
+        };
+        Object.assign(this, props);
+        this.useComponents = props.useComponents;
+        this.emptyMessage = props.emptyMessage;
+        this.plugins = props.plugins || {};
+        this.setWidgets((_a = props.plugins) === null || _a === void 0 ? void 0 : _a.drawerWidgets);
+    }
+}
+exports.ComponentsDrawer = ComponentsDrawer;
+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) })));
+}
+exports.TreeToggleWidget = TreeToggleWidget;
+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) })));
+}
+exports.FilterWidget = FilterWidget;
+//# 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":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA2E;AAC3E,4DAAoC;AACpC,kFAAgF;AAChF,wFAAmE;AAGnE,0FAAqE;AACrE,kFAA8D;AAG9D,4EAA2E;AAC3E,oEAAqC;AACrC,4FAKiD;AAEjD,qGAAuH;AACvH,iGAAqG;AAErG,kGAAoD;AAoBpD,MAAa,gBAAgB;IAW3B,YAAY,KAA4B;;QAQxC,YAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;;YACzB,MAAM,OAAO,GAAG,IAAA,wBAAO,EAAC,CAAA,MAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,OAAO,0CAAE,MAAM,EAAE,KAAI,EAAE,CAAC,CAAC;YAC/D,MAAM,gBAAgB,GAAG;gBACvB,4DAAqB;gBACrB,sEAA6B;gBAC7B,CAAC,yDAAwB,EAAE,EAAE,OAAO,EAAE,CAAqC;aAC5E,CAAC;YACF,OAAO,8BAAC,iCAAQ,IAAC,UAAU,EAAE,gBAAgB,IAAG,QAAQ,CAAY,CAAC;QACvE,CAAC,CAAC;QAEF,kBAAa,GAAG,CAAC,EAAE,UAAU,EAAoC,EAAE,EAAE;YACnE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO;gBAAE,OAAO,IAAI,CAAC;YACvC,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;YAC3C,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAA,kBAAU,EAAC,qEAA4B,CAAC,CAAC;YAEtE,IAAI,CAAC,aAAa;gBAAE,OAAO,IAAI,CAAC;YAEhC,MAAM,OAAO,GAAG,IAAA,eAAO,EACrB,GAAG,EAAE,CACH,IAAA,wBAAO,EACL,aAAa,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,YAAY,CAAC,EAAE,EAAE;gBAClD,OAAO,YAAY,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,iCAAM,MAAM,KAAE,GAAG,EAAE,GAAG,GAAG,IAAI,MAAM,CAAC,EAAE,EAAE,IAAG,CAAC,CAAC;YACnF,CAAC,CAAC,CACH,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,eAAC,OAAA,CAAC,MAAA,CAAC,CAAC,KAAK,mCAAI,CAAC,CAAC,GAAG,CAAC,MAAA,CAAC,CAAC,KAAK,mCAAI,CAAC,CAAC,CAAA,EAAA,CAAC,EACnD,CAAC,aAAa,CAAC,CAChB,CAAC;YAEF,OAAO,CACL,uCAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,sCAAM,CAAC,gBAAgB,EAAE,gBAAgB,IAAI,sCAAM,CAAC,IAAI,CAAC,IACjF,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,8BAAC,MAAM,CAAC,MAAM,IAAC,GAAG,EAAE,MAAM,CAAC,GAAG,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,sCAAM,CAAC,MAAM,GAAI,CACrF,CAAC,CACE,CACP,CAAC;QACJ,CAAC,CAAC;QAEF,eAAU,GAAG,CAAC,EAAE,UAAU,EAAoC,EAAE,EAAE;YAChE,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,kBAAU,EAAC,2DAAoB,CAAC,CAAC;YACvD,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;YAE9B,MAAM,QAAQ,GAAG,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,cAAc,KAAI,IAAA,mBAAW,EAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;YACxG,MAAM,SAAS,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;YACxC,IAAI,CAAC,SAAS;gBAAE,OAAO,IAAI,CAAC;YAC5B,OAAO,CACL,8BAAC,yCAAa,IACZ,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,SAAS,EACtB,SAAS,EAAE,sCAAM,CAAC,aAAa,EAC/B,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;QACJ,CAAC,CAAC;QAEF,eAAU,GAAG,CAAC,OAA0B,EAAE,EAAE;YAC1C,IAAI,CAAC,OAAO,GAAG,IAAA,wBAAO,EAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,EAAE,CAAC,CAAC;QAC5C,CAAC,CAAC;QAEF,WAAM,GAAG,GAAG,EAAE;YACZ,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YACrD,MAAM,uBAAuB,GAAG,IAAA,kBAAU,EAAC,uDAAsB,CAAC,CAAC;YAEnE,IAAI,OAAO;gBAAE,OAAO,8BAAC,yCAAU,OAAG,CAAC;YAEnC,MAAM,OAAO,GAAG,CAAA,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAE,OAAO,KAAI,EAAE,CAAC;YAEvD,MAAM,kBAAkB,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAA,8CAAa,EAAC,OAAO,EAAE,UAAU,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;YAExF,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC;YACnD,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,EAAE,UAAU,EAAE,kBAAkB,EAAE,CAAC,CAAC;YAEjE,MAAM,WAAW,GAAG,CAClB,wCAAM,SAAS,EAAE,IAAA,oBAAU,EAAC,2CAAW,EAAE,oCAAQ,EAAE,sCAAM,CAAC,WAAW,CAAC,IAAG,IAAI,CAAC,YAAY,CAAQ,CACnG,CAAC;YAEF,OAAO,CACL,uCAAK,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,SAAS,EAAE,sCAAM,CAAC,eAAe;gBACjD,OAAO;gBACP,IAAI;gBACJ,IAAI,IAAI,WAAW,CAChB,CACP,CAAC;QACJ,CAAC,CAAC;QAxFA,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAC3B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC;QACzC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,CAAC;QACvC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC;QACnC,IAAI,CAAC,UAAU,CAAC,MAAA,KAAK,CAAC,OAAO,0CAAE,aAAa,CAAC,CAAC;IAChD,CAAC;CAoFF;AArGD,4CAqGC;AAED,SAAgB,gBAAgB;IAC9B,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,IAAA,kBAAU,EAAC,2DAAoB,CAAC,CAAC;IACrE,MAAM,IAAI,GAAG,SAAS;QACpB,CAAC,CAAC,6CAA6C;QAC/C,CAAC,CAAC,+CAA+C,CAAC;IACpD,OAAO,CACL,uCAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,sCAAM,CAAC,UAAU,EAAE,CAAC,SAAS,IAAI,sCAAM,CAAC,IAAI,CAAC;QACtE,uCAAK,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC,GAAI,CACvD,CACP,CAAC;AACJ,CAAC;AAVD,4CAUC;AAED,SAAgB,YAAY;IAC1B,MAAM,EAAE,gBAAgB,EAAE,eAAe,EAAE,GAAG,IAAA,kBAAU,EAAC,qEAA4B,CAAC,CAAC;IACvF,OAAO,CACL,uCAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,sCAAM,CAAC,UAAU,EAAE,sCAAM,CAAC,YAAY,EAAE,gBAAgB,IAAI,sCAAM,CAAC,IAAI,CAAC;QACjG,uCAAK,GAAG,EAAC,6CAA6C,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,GAAI,CACxG,CACP,CAAC;AACJ,CAAC;AAPD,oCAOC"}

package/dist/component-drawer.module.scss

@@ -0,0 +1,58 @@
+.drawerContainer {
+  height: 100%;
+}
+
+.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 300ms ease-in-out;
+  max-height: 0;
+  border-bottom: 1px solid #ededed;
+
+  &.open {
+    opacity: 1;
+    max-height: 100%;
+  }
+}
+
+.filter {
+  display: flex;
+  flex-direction: row;
+  font-size: 14px;
+  justify-content: space-between;
+  padding: 8px;
+  margin: 4px 8px;
+}
+
+.componentTree {
+  overflow-y: scroll;
+  height: 100%;
+}

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/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,88 @@
+{
+  "name": "@teambit/component.ui.component-drawer",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "componentId": {
+    "scope": "teambit.component",
+    "name": "ui/component-drawer",
+    "version": "0.0.1"
+  },
+  "dependencies": {
+    "@teambit/harmony": "0.2.11",
+    "classnames": "2.2.6",
+    "lodash.flatten": "4.4.0",
+    "core-js": "^3.0.0",
+    "@teambit/base-ui.utils.composer": "1.0.0",
+    "@teambit/component.ui.component-filters": "0.0.1",
+    "@teambit/design.ui.styles.ellipsis": "0.0.347",
+    "@teambit/design.ui.styles.muted-italic": "0.0.35",
+    "@teambit/design.ui.tree": "0.0.5",
+    "@teambit/ui-foundation.ui.full-loader": "0.0.486",
+    "@teambit/ui-foundation.ui.side-bar": "0.0.520",
+    "@teambit/ui-foundation.ui.tree.drawer": "0.0.497"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.8",
+    "@types/classnames": "2.2.11",
+    "@types/lodash.flatten": "4.4.6",
+    "@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",
+  "bit": {
+    "bindingPrefix": "@teambit",
+    "env": {},
+    "overrides": {
+      "dependencies": {
+        "@teambit/legacy": "-",
+        "core-js": "^3.0.0",
+        "react-dom": "-",
+        "react": "-"
+      },
+      "devDependencies": {
+        "@teambit/legacy": "-",
+        "@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/react": "^17.0.8",
+        "@types/node": "12.20.4",
+        "react-dom": "-",
+        "react": "-"
+      },
+      "peerDependencies": {
+        "react-dom": "^16.8.0 || ^17.0.0",
+        "react": "^16.8.0 || ^17.0.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",
+    "vue",
+    "vue-components"
+  ]
+}

package/preview-1648092203429.js

@@ -0,0 +1 @@
+

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "es2019",
+      "DOM",
+      "ES6",
+      "DOM.Iterable"
+    ],
+    "target": "es2015",
+    "module": "commonjs",
+    "jsx": "react",
+    "allowJs": true,
+    "composite": true,
+    "declaration": true,
+    "sourceMap": true,
+    "skipLibCheck": true,
+    "outDir": "dist",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "rootDir": ".",
+    "resolveJsonModule": true
+  },
+  "exclude": [
+    "dist"
+  ]
+}

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;
+}