@stackshift-ui/button 6.0.2 → 6.0.4-beta.0

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@stackshift-ui/button",
-  "version": "6.0.2",
+  "version": "6.0.4-beta.0",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist/**"
+    "dist/**",
+    "src"
   ],
   "devDependencies": {
     "@testing-library/react": "^16.0.1",
@@ -26,15 +27,15 @@
     "typescript": "^5.6.2",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
-    "@stackshift-ui/eslint-config": "6.0.2",
-    "@stackshift-ui/typescript-config": "6.0.2"
+    "@stackshift-ui/eslint-config": "6.0.3-beta.0",
+    "@stackshift-ui/typescript-config": "6.0.3-beta.0"
   },
   "dependencies": {
     "classnames": "^2.5.1",
     "react-icons": "^5.3.0",
-    "@stackshift-ui/system": "6.0.2",
-    "@stackshift-ui/link": "6.0.2",
-    "@stackshift-ui/scripts": "6.0.2"
+    "@stackshift-ui/scripts": "6.0.3-beta.0",
+    "@stackshift-ui/system": "6.0.4-beta.0",
+    "@stackshift-ui/link": "6.0.4-beta.0"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",

package/src/button.test.tsx

@@ -0,0 +1,13 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, test } from "vitest";
+import { Button } from "./button";
+
+describe.concurrent("button", () => {
+  afterEach(cleanup);
+
+  test("Common: Button - test if renders without errors", ({ expect }) => {
+    const clx = "button-class";
+    render(<Button className={clx} />);
+    expect(screen.getByTestId("button").classList).toContain(clx);
+  });
+});

package/src/button.tsx

@@ -0,0 +1,135 @@
+import { Link } from "@stackshift-ui/link";
+import { useStackShiftUIComponents } from "@stackshift-ui/system";
+import cn from "classnames";
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
+import { FaSpinner } from "react-icons/fa";
+import { extractLink } from "./helper";
+import { type LabeledRoute, type StyleVariants } from "./types";
+
+type Variant =
+  | "outline"
+  | "ghost"
+  | "link"
+  | "custom"
+  | "solid"
+  | "addToWishlist"
+  | "unstyled"
+  | "swiper_pagination"
+  | "tab";
+type TextSize = "xs" | "sm" | "md" | "lg";
+type RadiusSize = "none" | "sm" | "md" | "base" | "lg" | "xl" | "2xl" | "full";
+
+interface BaseType {
+  children?: ReactNode;
+  variant?: Variant;
+  radius?: RadiusSize;
+  size?: TextSize;
+  ariaLabel?: string;
+  isActive?: boolean;
+}
+
+interface LinkProps extends BaseType, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type"> {
+  link: LabeledRoute;
+  as: "link";
+}
+
+interface ButtonProps extends BaseType, ButtonHTMLAttributes<HTMLButtonElement> {
+  as?: "button";
+  loading?: boolean;
+  disabled?: boolean;
+  loadingComponent?: React.ReactNode;
+}
+
+type Props = ButtonProps | LinkProps;
+
+const displayName = "Button";
+
+export function Button({ children, ...props }: Props) {
+  const { [displayName]: Component = "button" } = useStackShiftUIComponents();
+
+  const sizes = {
+    xs: "py-1 px-3 text-xs",
+    sm: "py-2 px-4 text-sm",
+    default: "py-3 px-6 text-default",
+    md: "py-3 px-6 text-base",
+    lg: "py-4 px-7 text-lg",
+  };
+
+  const borderRadiusMap = {
+    none: "rounded-none",
+    sm: "rounded-sm",
+    md: "rounded-md",
+    base: "rounded-base",
+    lg: "rounded-lg",
+    xl: "rounded-xl",
+    "2xl": "rounded-2xl",
+    full: "rounded-full",
+    global: "rounded-global",
+  };
+
+  const { radius, size, variant, ariaLabel, className, isActive } = props;
+
+  const buttonRadius = radius ? borderRadiusMap[radius] : "rounded-global";
+  const buttonSize = sizes[size ?? "default"];
+
+  const commonStyles = "inline-block font-default text-default transition duration-200";
+  const solid = `${commonStyles} ${buttonSize} ${buttonRadius} bg-primary hover:bg-primary/50 text-gray-50`;
+  const custom = `inline-block bg-primary hover:bg-primary/50 ${buttonSize} ${buttonRadius} text-gray-50 font-bold transition duration-200`;
+  const outline = `${commonStyles} ${buttonSize} ${buttonRadius} bg-white hover:bg-primary/50 outline outline-1 text-primary outline-primary`;
+  const ghost = `${commonStyles} ${buttonRadius} ${buttonSize} bg-transparent hover:bg-primary/50 text-primary`;
+  const linkType = `transition-200 text-primary hover:text-primary/50 underline ${buttonRadius} ${cn(buttonSize, "px-0 py-0")}`;
+  const unstyled = ``;
+  const swiper_pagination = `mr-1 ${isActive ? "bg-primary" : "bg-gray-200"} rounded-full p-1 focus:outline-none`;
+  const tab = `mx-auto mb-1 w-auto px-4 py-2 rounded duration-200 transition focus:outline-none font-bold ${
+    isActive
+      ? "bg-gray-50 text-primary shadow"
+      : "text-gray-700 hover:bg-secondary/50 hover:text-primary hover:shadow"
+  }`;
+  const addToWishlist = `${commonStyles} ${buttonRadius} ${buttonSize} ml-auto sm:ml-0 flex-shrink-0 inline-flex items-center justify-center w-full rounded-md border hover:border-primary`;
+
+  const variants: StyleVariants<Variant> = {
+    outline,
+    ghost,
+    link: linkType,
+    custom,
+    solid,
+    addToWishlist,
+    unstyled,
+    swiper_pagination,
+    tab,
+  };
+
+  const variantClass = variants[variant ?? "solid"];
+
+  if (props.as === "link") {
+    const { link, ...rest } = props as LinkProps;
+
+    return (
+      <Link
+        className={cn(variantClass, className)}
+        aria-label={ariaLabel}
+        href={extractLink(link)}
+        target={link.linkTarget}
+        rel={link.linkTarget === "_blank" ? "noopener noreferrer" : ""}
+        {...rest}>
+        {children}
+      </Link>
+    );
+  }
+
+  const { loadingComponent, onClick, loading, disabled, type } = props;
+
+  const Loader = loadingComponent ?? <FaSpinner className="animate-spin" size={30} />;
+
+  return (
+    <Component
+      onClick={onClick}
+      disabled={disabled ?? loading}
+      className={cn(variantClass, className)}
+      aria-label={ariaLabel}
+      data-testid={displayName.toLowerCase()}
+      type={type}>
+      {loading ? Loader : children}
+    </Component>
+  );
+}

package/src/helper/index.ts

@@ -0,0 +1,25 @@
+import { LabeledRoute } from "../types";
+
+export const extractLink = (link: LabeledRoute) => {
+  //not found page
+  if (!link?.internalLink && !link?.externalLink) {
+    return "/page-not-found";
+  }
+
+  //home page
+  if (link?.type === "linkInternal" && link?.internalLink?.toLowerCase()?.includes("home")) {
+    return "/";
+  }
+
+  //internal link
+  if (link?.type === "linkInternal") {
+    return `/${link?.internalLink}`;
+  }
+
+  //external link
+  if (link?.type === "linkExternal") {
+    return `${link?.externalLink}`;
+  }
+
+  return "/";
+};

package/src/index.ts

@@ -0,0 +1,4 @@
+"use client";
+
+// component exports
+export * from "./button";

package/src/types.ts

@@ -0,0 +1,16 @@
+export type StyleVariants<T extends string> = Record<T, string>;
+
+export interface LabeledRoute extends ConditionalLink {
+  ariaLabel?: string;
+  label?: string;
+  linkTarget?: string;
+  linkType?: string;
+  _type?: string;
+  linkInternal?: any;
+}
+
+export interface ConditionalLink {
+  type?: string;
+  internalLink?: string | null;
+  externalLink?: string | null;
+}