Merge pull request #182 from rtCamp/feat/component-label

Feat: Component Label

Author: ayushnirwal

packages/frappe-ui-react/package.json

@@ -42,20 +42,21 @@
     "@headlessui/react": "^2.2.9",
     "@popperjs/core": "^2.11.8",
     "@tailwindcss/typography": "^0.5.19",
+    "@tiptap/extension-blockquote": "^3.17.1",
     "@tiptap/extension-code-block-lowlight": "^3.17.1",
     "@tiptap/extension-highlight": "^3.17.1",
-    "@tiptap/extension-blockquote": "^3.17.1",
     "@tiptap/extension-horizontal-rule": "^3.17.1",
-    "@tiptap/extension-strike": "^3.17.1",
     "@tiptap/extension-list": "^3.17.1",
     "@tiptap/extension-placeholder": "^3.17.1",
+    "@tiptap/extension-strike": "^3.17.1",
     "@tiptap/extension-table": "^3.17.1",
     "@tiptap/extension-task-list": "^3.17.1",
     "@tiptap/extension-text-align": "^3.17.1",
     "@tiptap/extension-text-style": "^3.17.1",
     "@tiptap/pm": "^3.17.1",
     "@tiptap/react": "^3.17.1",
     "@tiptap/starter-kit": "^3.17.1",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.19",
     "dompurify": "^3.3.1",
@@ -68,6 +69,7 @@
     "react-grid-layout": "^1.5.3",
     "react-resizable": "^3.1.3",
     "styled-components": "^6.3.8",
+    "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.18"
   },
   "devDependencies": {

packages/frappe-ui-react/src/components/index.ts

@@ -19,6 +19,7 @@ export * from "./fileUploader";
 export * from "./formControl";
 export * from "./gridLayout";
 export * from "./hooks";
+export * from "./label";
 export * from "./listview";
 export * from "./password";
 export * from "./progress";

packages/frappe-ui-react/src/components/label/index.ts

@@ -0,0 +1,2 @@
+export { Label } from "./label";
+export * from "./types";

packages/frappe-ui-react/src/components/label/label.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Label } from "./label";
+import { Field } from "@base-ui/react/field";
+
+const meta: Meta<typeof Label> = {
+  title: "Components/Label",
+  component: Label,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      description: "The label text component",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: "Label Text",
+  },
+  render: ({ children }) => {
+    return (
+      <Field.Root>
+        <Label>{children}</Label>
+      </Field.Root>
+    );
+  },
+};

packages/frappe-ui-react/src/components/label/label.tsx

@@ -0,0 +1,29 @@
+/**
+ * External dependencies.
+ */
+import { Field } from "@base-ui/react/field";
+import { cva } from "class-variance-authority";
+
+/**
+ * Internal dependencies.
+ */
+import type { LabelProps } from "./types";
+import { cn } from "../../utils";
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+
+export const Label: React.FC<LabelProps> = ({
+  children,
+  className,
+  ...props
+}) => {
+  return (
+    <Field.Label className={cn(labelVariants(), className)} {...props}>
+      {children}
+    </Field.Label>
+  );
+};
+
+Label.displayName = "Label";

packages/frappe-ui-react/src/components/label/types.ts

@@ -0,0 +1,4 @@
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  children: React.ReactNode;
+  className?: string;
+}

packages/frappe-ui-react/src/utils/cn.ts

@@ -0,0 +1,9 @@
+/**
+ * External dependencies.
+ */
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...args: ClassValue[]) {
+  return twMerge(clsx(args));
+}

packages/frappe-ui-react/src/utils/index.ts

@@ -1,3 +1,4 @@
+export * from "./cn";
 export { default as noop } from "./noop";
 export * from "./debounce";
 export * from "./fileUploadHandler";

packages/frappe-ui-react/src/utils/tests/cn.ts

@@ -0,0 +1,56 @@
+import "@testing-library/jest-dom";
+
+import { cn } from "../cn";
+
+describe("cn", () => {
+  it("should return empty string when no arguments provided", () => {
+    expect(cn()).toBe("");
+  });
+
+  it("should return single class name", () => {
+    expect(cn("px-4")).toBe("px-4");
+  });
+
+  it("should concatenate multiple class names", () => {
+    expect(cn("px-4", "py-2", "rounded")).toBe("px-4 py-2 rounded");
+  });
+
+  it("should handle conditional class names with boolean values", () => {
+    // eslint-disable-next-line no-constant-binary-expression
+    expect(cn("px-4", true && "py-2", false && "rounded")).toBe("px-4 py-2");
+  });
+
+  it("should handle undefined and null values", () => {
+    expect(cn("px-4", undefined, null, "py-2")).toBe("px-4 py-2");
+  });
+
+  it("should handle objects with conditional classes", () => {
+    expect(cn({ "px-4": true, "py-2": false, rounded: true })).toBe(
+      "px-4 rounded"
+    );
+  });
+
+  it("should handle arrays of class names", () => {
+    expect(cn(["px-4", "py-2", "rounded"])).toBe("px-4 py-2 rounded");
+  });
+
+  it("should handle mixed arguments", () => {
+    expect(
+      cn(
+        "base",
+        { "px-4": true, "py-2": false },
+        ["rounded", "shadow"],
+        undefined,
+        "text-sm"
+      )
+    ).toBe("base px-4 rounded shadow text-sm");
+  });
+
+  it("should handle empty strings", () => {
+    expect(cn("px-4", "", "py-2")).toBe("px-4 py-2");
+  });
+
+  it("should deduplicate class names", () => {
+    expect(cn("px-4", "py-2", "px-4")).toBe("py-2 px-4");
+  });
+});