@lovince/ui-react 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { MyButtonProps, MyInputProps } from '@lovince/ui-shared';
+
+interface MyButtonComponentProps extends MyButtonProps {
+    onButtonClick?: (detail: {
+        variant: string;
+    }) => void;
+    children?: React.ReactNode;
+}
+declare const MyButton: React.ForwardRefExoticComponent<MyButtonComponentProps & React.RefAttributes<HTMLElement>>;
+
+interface MyInputComponentProps extends MyInputProps {
+    onInputChange?: (detail: {
+        value: string;
+    }) => void;
+}
+declare const MyInput: React.ForwardRefExoticComponent<MyInputComponentProps & React.RefAttributes<HTMLElement>>;
+
+export { MyButton, type MyButtonComponentProps, MyInput, type MyInputComponentProps };

package/dist/index.js

@@ -0,0 +1,50 @@
+// src/MyButton.tsx
+import React, { useRef, useEffect, forwardRef } from "react";
+var MyButton = forwardRef(
+  ({ onButtonClick, children, ...props }, ref) => {
+    const internalRef = useRef(null);
+    const elementRef = ref || internalRef;
+    useEffect(() => {
+      const element = elementRef.current;
+      if (!element) return;
+      Object.assign(element, props);
+      const handleButtonClick = (event) => {
+        onButtonClick?.(event.detail);
+      };
+      element.addEventListener("button-click", handleButtonClick);
+      return () => {
+        element.removeEventListener("button-click", handleButtonClick);
+      };
+    }, [props, onButtonClick]);
+    return React.createElement("my-button", { ref: elementRef }, children);
+  }
+);
+MyButton.displayName = "MyButton";
+
+// src/MyInput.tsx
+import React2, { useRef as useRef2, useEffect as useEffect2, forwardRef as forwardRef2 } from "react";
+var MyInput = forwardRef2(
+  ({ onInputChange, ...props }, ref) => {
+    const internalRef = useRef2(null);
+    const elementRef = ref || internalRef;
+    useEffect2(() => {
+      const element = elementRef.current;
+      if (!element) return;
+      Object.assign(element, props);
+      const handleInputChange = (event) => {
+        onInputChange?.(event.detail);
+      };
+      element.addEventListener("input-change", handleInputChange);
+      return () => {
+        element.removeEventListener("input-change", handleInputChange);
+      };
+    }, [props, onInputChange]);
+    return React2.createElement("my-input", { ref: elementRef });
+  }
+);
+MyInput.displayName = "MyInput";
+export {
+  MyButton,
+  MyInput
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/MyButton.tsx","../src/MyInput.tsx"],"sourcesContent":["import React, { useRef, useEffect, forwardRef } from 'react';\nimport { MyButtonProps } from '@lovince/ui-shared';\n\nexport interface MyButtonComponentProps extends MyButtonProps {\n  onButtonClick?: (detail: { variant: string }) => void;\n  children?: React.ReactNode;\n}\n\nexport const MyButton = forwardRef<HTMLElement, MyButtonComponentProps>(\n  ({ onButtonClick, children, ...props }, ref) => {\n    const internalRef = useRef<HTMLElement>(null);\n    const elementRef = (ref as React.RefObject<HTMLElement>) || internalRef;\n\n    useEffect(() => {\n      const element = elementRef.current;\n      if (!element) return;\n\n      // Update element properties\n      Object.assign(element, props);\n\n      // Handle events\n      const handleButtonClick = (event: CustomEvent) => {\n        onButtonClick?.(event.detail);\n      };\n\n      element.addEventListener('button-click', handleButtonClick as EventListener);\n\n      return () => {\n        element.removeEventListener('button-click', handleButtonClick as EventListener);\n      };\n    }, [props, onButtonClick]);\n\n    return React.createElement('my-button', { ref: elementRef }, children);\n  }\n);\n\nMyButton.displayName = 'MyButton';\n","import React, { useRef, useEffect, forwardRef } from 'react';\nimport { MyInputProps } from '@lovince/ui-shared';\n\nexport interface MyInputComponentProps extends MyInputProps {\n  onInputChange?: (detail: { value: string }) => void;\n}\n\nexport const MyInput = forwardRef<HTMLElement, MyInputComponentProps>(\n  ({ onInputChange, ...props }, ref) => {\n    const internalRef = useRef<HTMLElement>(null);\n    const elementRef = (ref as React.RefObject<HTMLElement>) || internalRef;\n\n    useEffect(() => {\n      const element = elementRef.current;\n      if (!element) return;\n\n      // Update element properties\n      Object.assign(element, props);\n\n      // Handle events\n      const handleInputChange = (event: CustomEvent) => {\n        onInputChange?.(event.detail);\n      };\n\n      element.addEventListener('input-change', handleInputChange as EventListener);\n\n      return () => {\n        element.removeEventListener('input-change', handleInputChange as EventListener);\n      };\n    }, [props, onInputChange]);\n\n    return React.createElement('my-input', { ref: elementRef });\n  }\n);\n\nMyInput.displayName = 'MyInput';\n"],"mappings":";AAAA,OAAO,SAAS,QAAQ,WAAW,kBAAkB;AAQ9C,IAAM,WAAW;AAAA,EACtB,CAAC,EAAE,eAAe,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC9C,UAAM,cAAc,OAAoB,IAAI;AAC5C,UAAM,aAAc,OAAwC;AAE5D,cAAU,MAAM;AACd,YAAM,UAAU,WAAW;AAC3B,UAAI,CAAC,QAAS;AAGd,aAAO,OAAO,SAAS,KAAK;AAG5B,YAAM,oBAAoB,CAAC,UAAuB;AAChD,wBAAgB,MAAM,MAAM;AAAA,MAC9B;AAEA,cAAQ,iBAAiB,gBAAgB,iBAAkC;AAE3E,aAAO,MAAM;AACX,gBAAQ,oBAAoB,gBAAgB,iBAAkC;AAAA,MAChF;AAAA,IACF,GAAG,CAAC,OAAO,aAAa,CAAC;AAEzB,WAAO,MAAM,cAAc,aAAa,EAAE,KAAK,WAAW,GAAG,QAAQ;AAAA,EACvE;AACF;AAEA,SAAS,cAAc;;;ACpCvB,OAAOA,UAAS,UAAAC,SAAQ,aAAAC,YAAW,cAAAC,mBAAkB;AAO9C,IAAM,UAAUA;AAAA,EACrB,CAAC,EAAE,eAAe,GAAG,MAAM,GAAG,QAAQ;AACpC,UAAM,cAAcF,QAAoB,IAAI;AAC5C,UAAM,aAAc,OAAwC;AAE5D,IAAAC,WAAU,MAAM;AACd,YAAM,UAAU,WAAW;AAC3B,UAAI,CAAC,QAAS;AAGd,aAAO,OAAO,SAAS,KAAK;AAG5B,YAAM,oBAAoB,CAAC,UAAuB;AAChD,wBAAgB,MAAM,MAAM;AAAA,MAC9B;AAEA,cAAQ,iBAAiB,gBAAgB,iBAAkC;AAE3E,aAAO,MAAM;AACX,gBAAQ,oBAAoB,gBAAgB,iBAAkC;AAAA,MAChF;AAAA,IACF,GAAG,CAAC,OAAO,aAAa,CAAC;AAEzB,WAAOF,OAAM,cAAc,YAAY,EAAE,KAAK,WAAW,CAAC;AAAA,EAC5D;AACF;AAEA,QAAQ,cAAc;","names":["React","useRef","useEffect","forwardRef"]}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@lovince/ui-react",
+  "version": "1.0.0",
+  "description": "React wrappers for UI components",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "peerDependencies": {
+    "@lovince/ui-core": "^1.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@lovince/ui-shared": "^1.0.0",
+    "@types/react": "^18.0.0",
+    "react": "^18.0.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  }
+}