@pepperi-addons/ngx-lib-react 0.0.1 → 0.0.2

package/README.md

@@ -2,6 +2,48 @@
 
 Thin React wrappers around Pepperi Angular Elements (Web Components) for better DX in React apps.
 
+## Quickstart: test in another addon (0.0.1)
+
+- **Install**
+
+```bash
+npm i @pepperi-addons/ngx-lib-react
+```
+
+- **Load Elements (embedded in this package)**
+
+```ts
+// e.g., in src/index.tsx or src/main.tsx
+import '@pepperi-addons/ngx-lib-react/elements/runtime.js';
+import '@pepperi-addons/ngx-lib-react/elements/polyfills.js';
+import '@pepperi-addons/ngx-lib-react/elements/main.js';
+import '@pepperi-addons/ngx-lib-react/elements/styles.css';
+```
+
+- **Theme wrapper**
+
+```tsx
+export function App() {
+    return <div className="pepperi-theme">{/* ... */}</div>;
+}
+```
+
+- **Use components**
+
+```tsx
+import { PepButton, PepTextbox, PepSelect } from '@pepperi-addons/ngx-lib-react';
+
+export function Example() {
+    return (
+        <div className="pepperi-theme">
+            <PepButton value="Save" styleType="strong" />
+            <PepTextbox label="Amount" type="currency" accessory="$" />
+            <PepSelect label="Status" options={[{ key: 'open', value: 'Open' }]} />
+        </div>
+    );
+}
+```
+
 This package expects you to load the Elements bundle and theme CSS (from `@pepperi-addons/ngx-lib-elements`) in your app.
 
 ## Install

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pepperi-addons/ngx-lib-react",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Thin React wrappers for Pepperi Angular Elements (Web Components) to improve DX in React.",
   "license": "MIT",
   "author": "Pepperi",

package/pep-button.js

@@ -13,7 +13,14 @@ export const PepButton = ({ value, styleType, styleStateType, sizeType, disabled
             el.iconName = iconName;
         if (typeof iconPosition !== 'undefined')
             el.iconPosition = iconPosition;
-    }, [disabled, iconName, iconPosition]);
+        // Ensure style and size inputs are applied as properties so internal styling updates immediately
+        if (typeof styleType !== 'undefined')
+            el.styleType = styleType;
+        if (typeof styleStateType !== 'undefined')
+            el.styleStateType = styleStateType;
+        if (typeof sizeType !== 'undefined')
+            el.sizeType = sizeType;
+    }, [disabled, iconName, iconPosition, styleType, styleStateType, sizeType]);
     // Attach events
     useEffect(() => {
         const el = ref.current;
@@ -23,6 +30,6 @@ export const PepButton = ({ value, styleType, styleStateType, sizeType, disabled
         el.addEventListener('buttonClick', handler);
         return () => el.removeEventListener('buttonClick', handler);
     }, [onButtonClick]);
-    return (_jsx("pep-button", { ref: ref, value: value, "style-type": styleType, "style-state-type": styleStateType, "size-type": sizeType, class: className, ...rest }));
+    return (_jsx("pep-button", { ref: ref, value: value, "style-type": styleType, "style-state-type": styleStateType, "size-type": sizeType, className: className, ...rest }));
 };
 //# sourceMappingURL=pep-button.js.map