@mbao01/ui 0.0.9 → 0.1.1

package/dist/types/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,2 @@
+import type { BreadcrumbsProps } from "./types";
+export declare const Breadcrumbs: ({ root, labels }: BreadcrumbsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Breadcrumbs/constant.d.ts

@@ -0,0 +1,6 @@
+export declare const getBreadcrumbs: (pathname: string, labels?: Record<string, string>) => {
+    href: {
+        pathname: string;
+    };
+    segment: string;
+}[];

package/dist/types/components/Breadcrumbs/index.d.ts

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

package/dist/types/components/Breadcrumbs/types.d.ts

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

package/dist/types/components/Button/Button.d.ts

@@ -0,0 +1,2 @@
+import { type ButtonProps } from "./types";
+export declare const Button: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Button/constants.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonSize, ButtonVariant } from './types';
+export declare const getButtonClasses: ({ size, wide, loading, outline, variant, }: {
+    size?: ButtonSize | undefined;
+    wide?: boolean | undefined;
+    loading?: boolean | undefined;
+    outline?: boolean | undefined;
+    variant?: ButtonVariant | undefined;
+}) => string;

package/dist/types/components/Button/index.d.ts

@@ -0,0 +1 @@
+export { Button } from "./Button";

package/dist/types/components/Button/types.d.ts

@@ -0,0 +1,12 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+export type ButtonVariant = 'default' | 'neutral' | 'primary' | 'secondary' | 'accent' | 'ghost' | 'link' | 'info' | 'success' | 'warning' | 'error';
+export type ButtonProps = {
+    size?: ButtonSize;
+    wide?: boolean;
+    label: ReactNode;
+    loading?: boolean;
+    outline?: boolean;
+    variant?: ButtonVariant;
+    disabled?: boolean;
+} & ButtonHTMLAttributes<HTMLButtonElement>;

package/dist/types/components/Link/Link.d.ts

@@ -0,0 +1,2 @@
+import { type LinkProps } from "./types";
+export declare const Link: ({ href, hover, target, variant, children, className, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Link/constant.d.ts

@@ -0,0 +1,5 @@
+import { LinkVariant } from './types';
+export declare const getLinkClasses: ({ hover, variant }: {
+    hover?: boolean | undefined;
+    variant?: LinkVariant | undefined;
+}) => string;

package/dist/types/components/Link/index.d.ts

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

package/dist/types/components/Link/types.d.ts

@@ -0,0 +1,7 @@
+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;
+};

package/dist/types/components/Text/Text.d.ts

@@ -0,0 +1,4 @@
+import { type TextProps } from './types';
+export declare const Text: ({ as, size, variant, children, className }: TextProps) => import("react").DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;

package/dist/types/components/Text/constants.d.ts

@@ -0,0 +1,5 @@
+import type { TextSize, TextVariant } from './types';
+export declare const getTextClasses: ({ size, variant }: {
+    size?: TextSize | undefined;
+    variant?: TextVariant | undefined;
+}) => string;

package/dist/types/components/Text/index.d.ts

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

package/dist/types/components/Text/types.d.ts

@@ -0,0 +1,10 @@
+export type TextSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
+export type TextTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'span';
+export type TextVariant = 'info' | 'error' | 'success' | 'warning' | 'primary' | 'secondary' | 'accent' | 'neutral';
+export type TextProps = {
+    as?: TextTag;
+    size?: TextSize;
+    variant?: TextVariant;
+    children: React.ReactNode;
+    className?: string;
+};

package/dist/types/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./components/Breadcrumbs";
+export * from "./components/Button";
+export * from "./components/Link";
+export * from "./components/Text";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/ui",
   "private": false,
-  "version": "0.0.9",
+  "version": "0.1.1",
   "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": "a8f9e309d549d280a3c3b1048ab7946d554744bd"
 }

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

package/src/index.ts

@@ -1,2 +1,4 @@
+export * from "./components/Breadcrumbs";
 export * from "./components/Button";
+export * from "./components/Link";
 export * from "./components/Text";