@teambit/component 0.0.743 → 0.0.744

package/ui/top-bar-nav/top-bar-nav.tsx

@@ -1,27 +1,25 @@
 import React from 'react';
 import classnames from 'classnames';
-import { useRouteMatch, useLocation } from 'react-router-dom';
-import { NavLink, NavLinkProps } from '@teambit/base-ui.routing.nav-link';
-import { extendPath } from '@teambit/ui-foundation.ui.react-router.extend-path';
+import { useLocation } from 'react-router-dom';
+import { Link, LinkProps } from '@teambit/base-react.navigation.link';
 
 import styles from './top-bar-nav.module.scss';
 
-export type TopBarNavProps = {} & NavLinkProps;
+export type TopBarNavProps = {} & LinkProps;
 
 export function TopBarNav({ href, className, activeClassName, children, ...rest }: TopBarNavProps) {
-  const { url } = useRouteMatch();
   const { search } = useLocation(); // sticky query params
 
-  const target = `${extendPath(url, href)}${search}`;
+  const target = `${href}${search}`;
 
   return (
-    <NavLink
+    <Link
       {...rest}
       className={classnames(className, styles.topBarLink)}
       activeClassName={classnames(activeClassName, styles.active)}
       href={target}
     >
       <div>{children}</div>
-    </NavLink>
+    </Link>
   );
 }

package/ui/use-component-from-location.tsx

@@ -0,0 +1,12 @@
+import { useParams } from 'react-router-dom';
+
+/** component url is comprised of letters, numbers, "_", "-", "/" but should not include trailing "/", and should not include "~" */
+const componentRegex = /^[\w/-]*[\w-]/;
+export function useIdFromLocation() {
+  const params = useParams();
+  const splat = params['*'];
+  if (!splat) return undefined;
+
+  const match = componentRegex.exec(splat);
+  return match?.[0];
+}

package/ui/use-component.tsx

@@ -1,4 +1,3 @@
-import { useRouteMatch } from 'react-router-dom';
 import { ComponentID } from '@teambit/component-id';
 import { useQuery } from '@teambit/ui-foundation.ui.react-router.use-query';
 import { ComponentDescriptor } from '@teambit/component-descriptor';
@@ -13,18 +12,13 @@ export type Component = {
   componentDescriptor?: ComponentDescriptor;
 };
 
-type ComponentRoute = {
-  componentId?: string;
-};
-
-export function useComponent(host: string, id?: ComponentID): Component {
-  const {
-    params: { componentId },
-  } = useRouteMatch<ComponentRoute>();
+export function useComponent(host: string, id?: string | ComponentID): Component {
   const query = useQuery();
   const version = query.get('version') || undefined;
   const lanesContext = useLanesContext();
-  const targetId = id?.toString({ ignoreVersion: true }) || componentId;
+
+  const targetId =
+    (typeof id === 'string' && id) || (typeof id !== 'undefined' && id.toString({ ignoreVersion: true }));
   if (!targetId) throw new TypeError('useComponent received no component id');
   const currentLane = lanesContext?.viewedLane;
   // when on a lane, always fetch all the logs starting from the 'head' version