@lamenna/lxp-react 0.0.1

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { ReactButtonProps } from "@lamenna/lxp-shared-components";
+export type { ReactButtonProps as ButtonProps };
+export declare const Button: React.FC<ReactButtonProps>;

package/dist/components/Button/Button.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { buttonConfig, } from "@lamenna/lxp-shared-components";
+export const Button = ({ children, variant = "primary", size = "md", disabled = false, className, id, ariaLabel, testID, onClick, }) => {
+    const variantConfig = buttonConfig.variants[variant];
+    const sizeConfig = buttonConfig.sizes[size];
+    const styles = {
+        ...buttonConfig.common,
+        ...variantConfig,
+        ...sizeConfig,
+        opacity: disabled ? 0.6 : 1,
+        cursor: disabled ? "not-allowed" : "pointer",
+    };
+    return (React.createElement("button", { style: styles, onClick: onClick, disabled: disabled, className: className, id: id, "aria-label": ariaLabel, "data-testid": testID }, children));
+};

package/dist/components/Button/__tests__/button.test.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Button Component Tests - React Implementation
+ *
+ * This test suite validates the React implementation of the Button component,
+ * ensuring it properly renders and responds to user interactions.
+ */
+import '@testing-library/jest-dom';

package/dist/components/Button/__tests__/button.test.js

@@ -0,0 +1,94 @@
+/**
+ * Button Component Tests - React Implementation
+ *
+ * This test suite validates the React implementation of the Button component,
+ * ensuring it properly renders and responds to user interactions.
+ */
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Button } from '../Button';
+describe('Button Component (React)', () => {
+    describe('Rendering', () => {
+        it('should render a button element', () => {
+            render(React.createElement(Button, null, "Click me"));
+            const button = screen.getByRole('button');
+            expect(button).toBeInTheDocument();
+        });
+        it('should display button text', () => {
+            render(React.createElement(Button, null, "Test Button"));
+            expect(screen.getByText('Test Button')).toBeInTheDocument();
+        });
+        it('should apply primary variant by default', () => {
+            render(React.createElement(Button, null, "Primary"));
+            const button = screen.getByRole('button');
+            expect(button).toHaveClass('button-primary');
+        });
+        it('should apply secondary variant when specified', () => {
+            render(React.createElement(Button, { variant: "secondary" }, "Secondary"));
+            const button = screen.getByRole('button');
+            expect(button).toHaveClass('button-secondary');
+        });
+        it('should apply size classes correctly', () => {
+            const { rerender } = render(React.createElement(Button, { size: "sm" }, "Small"));
+            expect(screen.getByRole('button')).toHaveClass('button-sm');
+            rerender(React.createElement(Button, { size: "md" }, "Medium"));
+            expect(screen.getByRole('button')).toHaveClass('button-md');
+            rerender(React.createElement(Button, { size: "lg" }, "Large"));
+            expect(screen.getByRole('button')).toHaveClass('button-lg');
+        });
+    });
+    describe('Interactions', () => {
+        it('should handle click events', () => {
+            const onClick = jest.fn();
+            render(React.createElement(Button, { onClick: onClick }, "Click me"));
+            const button = screen.getByRole('button');
+            fireEvent.click(button);
+            expect(onClick).toHaveBeenCalledTimes(1);
+        });
+        it('should not trigger onClick when disabled', () => {
+            const onClick = jest.fn();
+            render(React.createElement(Button, { onClick: onClick, disabled: true }, "Disabled"));
+            const button = screen.getByRole('button');
+            fireEvent.click(button);
+            expect(onClick).not.toHaveBeenCalled();
+        });
+        it('should have disabled attribute when disabled', () => {
+            render(React.createElement(Button, { disabled: true }, "Disabled"));
+            const button = screen.getByRole('button');
+            expect(button).toBeDisabled();
+        });
+    });
+    describe('Accessibility', () => {
+        it('should support aria-label', () => {
+            render(React.createElement(Button, { ariaLabel: "Close dialog" }, "\u00D7"));
+            const button = screen.getByLabelText('Close dialog');
+            expect(button).toBeInTheDocument();
+        });
+        it('should be keyboard accessible', () => {
+            const onClick = jest.fn();
+            render(React.createElement(Button, { onClick: onClick }, "Press me"));
+            const button = screen.getByRole('button');
+            fireEvent.keyDown(button, { key: 'Enter', code: 'Enter' });
+            // Button should handle Enter key (default behavior)
+            expect(button).toBeInTheDocument();
+        });
+        it('should have proper role attribute', () => {
+            render(React.createElement(Button, null, "Action"));
+            const button = screen.getByRole('button');
+            expect(button).toHaveAttribute('type', 'button');
+        });
+    });
+    describe('CSS Classes', () => {
+        it('should apply custom className', () => {
+            render(React.createElement(Button, { className: "custom-class" }, "Custom"));
+            const button = screen.getByRole('button');
+            expect(button).toHaveClass('custom-class');
+        });
+        it('should apply id when provided', () => {
+            render(React.createElement(Button, { id: "test-button" }, "ID Button"));
+            const button = screen.getByRole('button');
+            expect(button).toHaveAttribute('id', 'test-button');
+        });
+    });
+});

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from "./components/Button/Button";

package/dist/index.js

@@ -0,0 +1 @@
+export * from "./components/Button/Button";

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@lamenna/lxp-react",
+  "version": "0.0.1",
+  "description": "React components for LXP",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0"
+  },
+  "dependencies": {
+    "@lamenna/lxp-core": "0.0.1",
+    "@lamenna/lxp-tokens": "0.0.1",
+    "@lamenna/lxp-shared-components": "0.0.1"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@types/jest": "^29.5.11",
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0",
+    "typescript": "^5.3.3"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "clean": "rm -rf dist"
+  }
+}