refactor: monorepo setup with lerna (#243)

packages/core/src/components/UI/NavLink.tsx

@@ -0,0 +1,74 @@
+import React, { forwardRef } from 'react';
+import { NavLink as NavLinkBase } from 'react-router-dom';
+import { styled } from '@mui/material/styles';
+
+import { colors } from '@staticcms/core/components/UI/styles';
+import { transientOptions } from '@staticcms/core/lib';
+
+import type { RefAttributes } from 'react';
+import type { NavLinkProps as RouterNavLinkProps } from 'react-router-dom';
+
+export type NavLinkBaseProps = RouterNavLinkProps & RefAttributes<HTMLAnchorElement>;
+
+export interface NavLinkProps extends RouterNavLinkProps {
+  activeClassName?: string;
+}
+
+interface StyledNavLinkProps {
+  $activeClassName?: string;
+}
+
+const StyledNavLinkWrapper = styled(
+  'div',
+  transientOptions,
+)<StyledNavLinkProps>(
+  ({ $activeClassName }) => `
+    position: relative;
+
+    a {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      text-decoration: none;
+      color: ${colors.inactive};
+
+      :hover {
+        color: ${colors.active};
+
+        .MuiListItemIcon-root {
+          color: ${colors.active};
+        }
+      }
+    }
+
+    ${
+      $activeClassName
+        ? `
+          & > .${$activeClassName} {
+            color: ${colors.active};
+
+            .MuiListItemIcon-root {
+              color: ${colors.active};
+            }
+          }
+        `
+        : ''
+    }
+  `,
+);
+
+const NavLink = forwardRef<HTMLAnchorElement, NavLinkProps>(
+  ({ activeClassName, ...props }, ref) => (
+    <StyledNavLinkWrapper $activeClassName={activeClassName}>
+      <NavLinkBase
+        ref={ref}
+        {...props}
+        className={({ isActive }) => (isActive ? activeClassName : '')}
+      />
+    </StyledNavLinkWrapper>
+  ),
+);
+
+NavLink.displayName = 'NavLink';
+
+export default NavLink;