@mbao01/ui 0.0.9 → 0.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/ui",
   "private": false,
-  "version": "0.0.9",
+  "version": "0.1.0",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -44,6 +44,7 @@
     "daisyui": "^4.4.24"
   },
   "devDependencies": {
+    "@heroicons/react": "^2.1.1",
     "@storybook/addon-essentials": "^7.6.6",
     "@storybook/addon-interactions": "^7.6.6",
     "@storybook/addon-links": "^7.6.6",
@@ -74,7 +75,9 @@
     "postcss": "^8.4.32",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.6.6",
+    "react-router-dom": "^6.21.3",
+    "storybook": "^7.6.10",
+    "storybook-addon-react-router-v6": "^2.0.10",
     "tailwindcss": "^3.4.0",
     "typescript": "^5.2.2",
     "vite": "^5.0.8",
@@ -82,11 +85,13 @@
     "vitest": "^1.1.1"
   },
   "peerDependencies": {
+    "@heroicons/react": "^2.1.1",
     "postcss": "^8.4.32",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.3",
     "tailwindcss": "^3.4.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "10e56e5ce5495f4c29d84d7fc1a53622c436f72f"
+  "gitHead": "f59eb6ddcd7936eb43ccff7f829d6393ed3a2690"
 }

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,30 @@
+import { useLocation } from "react-router-dom";
+import { getBreadcrumbs } from "./constant";
+import type { BreadcrumbsProps } from "./types";
+import { Link } from "../Link";
+
+export const Breadcrumbs = ({ root, labels }: BreadcrumbsProps) => {
+  const location = useLocation();
+  const breadcrumbs = getBreadcrumbs(location.pathname, labels);
+
+  return (
+    <div className="breadcrumbs -ml-1 w-fit px-1 text-sm">
+      <ul>
+        {root && (
+          <li>
+            <Link hover href="/">
+              {root}
+            </Link>
+          </li>
+        )}
+        {breadcrumbs.map((crumb) => (
+          <li key={crumb.href.pathname}>
+            <Link hover href={crumb.href} className="capitalize">
+              {crumb.segment}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};

package/src/components/Breadcrumbs/constant.ts

@@ -0,0 +1,17 @@
+export const getBreadcrumbs = (
+  pathname: string,
+  labels?: Record<string, string>
+) => {
+  const segments = pathname.split("/").filter(Boolean);
+
+  const breadcrumbs = segments.map((segment, index) => {
+    const path = `/${segments.slice(0, index + 1).join("/")}`;
+    return {
+      href: { pathname: path },
+      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+      segment: labels?.[segment] || segment, // always fallback to segment if label is falsy
+    };
+  });
+
+  return breadcrumbs;
+};

package/src/components/Breadcrumbs/index.ts

@@ -0,0 +1 @@
+export { Breadcrumbs } from './Breadcrumbs';

package/src/components/Breadcrumbs/types.ts

@@ -0,0 +1,4 @@
+export type BreadcrumbsProps = {
+  root?: string;
+  labels?: Record<string, string>;
+};

package/src/components/Link/Link.tsx

@@ -0,0 +1,31 @@
+import c from "clsx";
+import { Link as RouterLink } from "react-router-dom";
+import { getLinkClasses } from "./constant";
+import { type LinkProps } from "./types";
+import { ArrowUpRightIcon } from "@heroicons/react/20/solid";
+
+export const Link = ({
+  href,
+  hover,
+  target,
+  variant,
+  children,
+  className,
+  ...props
+}: LinkProps) => {
+  return (
+    <RouterLink
+      {...props}
+      to={href}
+      className={c(getLinkClasses({ hover, variant }), className)}
+    >
+      {children}
+      {target === "_blank" && (
+        <ArrowUpRightIcon
+          name="external"
+          className="ml-[2px] inline h-4 w-4 align-middle"
+        />
+      )}
+    </RouterLink>
+  );
+};

package/src/components/Link/constant.ts

@@ -0,0 +1,21 @@
+import c from 'clsx';
+import { LinkVariant } from './types';
+
+const LINK_VARIANTS = {
+  accent: c('link-accent'),
+  default: c('link-default'),
+  error: c('link-error'),
+  info: c('link-info'),
+  link: c('link-link'),
+  neutral: c('link-neutral'),
+  primary: c('link-primary'),
+  secondary: c('link-secondary'),
+  success: c('link-success'),
+  warning: c('link-warning'),
+} satisfies Record<LinkVariant, string>;
+
+export const getLinkClasses = ({ hover, variant }: { hover?: boolean; variant?: LinkVariant }) => {
+  return c('link transition-all', LINK_VARIANTS[variant!], {
+    'link-hover': hover,
+  });
+};

package/src/components/Link/index.ts

@@ -0,0 +1 @@
+export { Link } from './Link';

package/src/components/Link/types.ts

@@ -0,0 +1,19 @@
+import type { To, LinkProps as RouterLinkProps } from "react-router-dom";
+
+export type LinkVariant =
+  | "default"
+  | "neutral"
+  | "primary"
+  | "secondary"
+  | "accent"
+  | "link"
+  | "info"
+  | "success"
+  | "warning"
+  | "error";
+
+export type LinkProps = Omit<RouterLinkProps, "to"> & {
+  href: To;
+  hover?: boolean;
+  variant?: LinkVariant;
+};