@teambit/sidebar 0.0.568 → 0.0.569

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/sidebar",
-  "version": "0.0.568",
+  "version": "0.0.569",
   "homepage": "https://bit.dev/teambit/ui-foundation/sidebar",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.ui-foundation",
     "name": "sidebar",
-    "version": "0.0.568"
+    "version": "0.0.569"
   },
   "dependencies": {
     "@teambit/harmony": "0.2.11",
@@ -17,9 +17,9 @@
     "@teambit/base-ui.routing.nav-link": "1.0.0",
     "@teambit/evangelist.elements.icon": "1.0.2",
     "@teambit/documenter.ui.separator": "4.1.1",
-    "@teambit/component": "0.0.568",
-    "@teambit/ui-foundation.ui.tree.drawer": "0.0.471",
-    "@teambit/ui": "0.0.568",
+    "@teambit/component": "0.0.569",
+    "@teambit/ui-foundation.ui.tree.drawer": "0.0.472",
+    "@teambit/ui": "0.0.569",
     "@teambit/design.ui.surfaces.menu.section": "0.0.347"
   },
   "devDependencies": {
@@ -33,7 +33,7 @@
     "@types/node": "12.20.4"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.180",
+    "@teambit/legacy": "1.0.181",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -61,27 +61,12 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.180",
+        "@teambit/legacy": "1.0.181",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }
     }
   },
-  "files": [
-    "dist",
-    "!dist/tsconfig.tsbuildinfo",
-    "**/*.md",
-    "**/*.mdx",
-    "**/*.js",
-    "**/*.json",
-    "**/*.sass",
-    "**/*.scss",
-    "**/*.less",
-    "**/*.css",
-    "**/*.css",
-    "**/*.jpeg",
-    "**/*.gif"
-  ],
   "private": false,
   "engines": {
     "node": ">=12.22.0"

package/sidebar.ui.runtime.tsx

@@ -0,0 +1,49 @@
+import { ComponentModel } from '@teambit/component';
+import { Slot, SlotRegistry } from '@teambit/harmony';
+import { UIRuntime } from '@teambit/ui';
+import React, { ComponentType } from 'react';
+
+import type { DrawerType } from '@teambit/ui-foundation.ui.tree.drawer';
+import { SidebarAspect } from './sidebar.aspect';
+import { SideBar, SideBarProps } from './ui';
+
+export type ComponentTypeProps = {
+  component: ComponentModel;
+};
+
+export type SidebarItem = ComponentType;
+
+export type SidebarItemSlot = SlotRegistry<SidebarItem[]>;
+
+export type DrawerSlot = SlotRegistry<DrawerType>;
+
+export class SidebarUI {
+  constructor(private drawerSlot: DrawerSlot) {}
+
+  /**
+   * register a new drawer into the component sidebar.
+   */
+  registerDrawer(drawer: DrawerType) {
+    this.drawerSlot.register(drawer);
+    return this;
+  }
+
+  /**
+   * render the sidebar.
+   */
+  render = (props: Partial<SideBarProps>) => {
+    return <SideBar drawerSlot={this.drawerSlot} {...props}></SideBar>;
+  };
+
+  static runtime = UIRuntime;
+
+  static slots = [Slot.withType<DrawerType>()];
+
+  static dependencies = [];
+
+  static async provider(deps, config, [drawerSlot]: [DrawerSlot]) {
+    return new SidebarUI(drawerSlot);
+  }
+}
+
+SidebarAspect.addRuntime(SidebarUI);

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

package/ui/index.ts

@@ -0,0 +1 @@
+export { SideBar, SideBarProps } from './side-bar';

package/ui/overview-link/index.ts

@@ -0,0 +1 @@
+export { OverviewLink } from './overview-link';

package/ui/overview-link/overview-link.tsx

@@ -0,0 +1,27 @@
+import { Separator } from '@teambit/documenter.ui.separator';
+import { Icon } from '@teambit/evangelist.elements.icon';
+import { NavLink } from '@teambit/base-ui.routing.nav-link';
+import classNames from 'classnames';
+import React from 'react';
+
+import styles from './overview-link.module.scss';
+
+export function OverviewLink() {
+  return (
+    <div className={styles.overview}>
+      <NavLink
+        exact
+        href="/"
+        activeClassName={styles.active}
+        className={classNames(
+          // hoverable, clickable, // TODO - return these somehow @oded
+          styles.overviewLink
+        )}
+      >
+        Components
+        <Icon of="comps" className={styles.icon} />
+      </NavLink>
+      <Separator className={styles.separator} />
+    </div>
+  );
+}

package/ui/side-bar/index.ts

@@ -0,0 +1 @@
+export { SideBar, SideBarProps } from './side-bar';

package/ui/side-bar/side-bar.tsx

@@ -0,0 +1,51 @@
+import React, { useState, useMemo } from 'react';
+import { flatten } from 'lodash';
+import { MenuSection } from '@teambit/design.ui.surfaces.menu.section';
+import { DrawerUI } from '@teambit/ui-foundation.ui.tree.drawer';
+import { DrawerSlot, SidebarItemSlot } from '../../sidebar.ui.runtime';
+import styles from './side-bar.module.scss';
+
+export type SideBarProps = {
+  /**
+   * slot of registered drawers.
+   */
+  drawerSlot: DrawerSlot;
+
+  itemSlot?: SidebarItemSlot;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+/**
+ * side bar component.
+ */
+export function SideBar({ drawerSlot, itemSlot, ...rest }: SideBarProps) {
+  const [openDrawerList, onToggleDrawer] = useState([drawerSlot.toArray()[0][0]]);
+  const items = useMemo(() => flatten(itemSlot?.values()), [itemSlot]);
+
+  const handleDrawerToggle = (id: string) => {
+    const isDrawerOpen = openDrawerList.includes(id);
+    if (isDrawerOpen) {
+      onToggleDrawer((list) => list.filter((drawer) => drawer !== id));
+      return;
+    }
+    onToggleDrawer((list) => list.concat(id));
+  };
+
+  return (
+    <div {...rest} className={styles.sidebar}>
+      <MenuSection items={items} />
+      {drawerSlot.toArray().map(([id, drawer]) => {
+        if (!drawer || !drawer.name) return null;
+        return (
+          <DrawerUI
+            isOpen={openDrawerList.includes(id)}
+            onToggle={() => handleDrawerToggle(id)}
+            key={id}
+            name={drawer.name}
+          >
+            <drawer.render />
+          </DrawerUI>
+        );
+      })}
+    </div>
+  );
+}