@pepperi-addons/ngx-lib-react 0.0.1

package/index.d.ts

@@ -0,0 +1,3 @@
+export * from './pep-select.js';
+export * from './pep-button.js';
+export * from './pep-textbox.js';

package/index.js

@@ -0,0 +1,4 @@
+export * from './pep-select.js';
+export * from './pep-button.js';
+export * from './pep-textbox.js';
+//# sourceMappingURL=index.js.map

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@pepperi-addons/ngx-lib-react",
+  "version": "0.0.1",
+  "description": "Thin React wrappers for Pepperi Angular Elements (Web Components) to improve DX in React.",
+  "license": "MIT",
+  "author": "Pepperi",
+  "repository": {
+    "type": "git",
+    "url": "https://example.com/repo.git"
+  },
+  "keywords": [
+    "pepperi",
+    "react",
+    "web-components",
+    "angular-elements"
+  ],
+  "main": "index.js",
+  "module": "index.js",
+  "types": "index.d.ts",
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "dependencies": {},
+  "files": [
+    "*.js",
+    "*.d.ts",
+    "README.md",
+    "elements/*"
+  ]
+}

package/pep-button.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export declare type PepStyleType = 'weak' | 'regular' | 'strong';
+export declare type PepStyleStateType = 'system' | 'success' | 'caution';
+export declare type PepSizeType = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export declare type PepIconPosition = 'start' | 'end';
+export interface PepButtonClickEvent {
+    source?: any;
+    event?: Event;
+}
+export interface PepButtonProps extends React.HTMLAttributes<HTMLElement> {
+    value?: string;
+    styleType?: PepStyleType;
+    styleStateType?: PepStyleStateType;
+    sizeType?: PepSizeType;
+    disabled?: boolean;
+    iconName?: string;
+    iconPosition?: PepIconPosition;
+    className?: string;
+    onButtonClick?: (e: PepButtonClickEvent) => void;
+}
+export declare const PepButton: React.FC<PepButtonProps>;

package/pep-button.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+export const PepButton = ({ value, styleType, styleStateType, sizeType, disabled, iconName, iconPosition, className, onButtonClick, ...rest }) => {
+    const ref = useRef(null);
+    // Sync non-string/boolean props as properties
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (typeof disabled !== 'undefined')
+            el.disabled = !!disabled;
+        if (typeof iconName !== 'undefined')
+            el.iconName = iconName;
+        if (typeof iconPosition !== 'undefined')
+            el.iconPosition = iconPosition;
+    }, [disabled, iconName, iconPosition]);
+    // Attach events
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || !onButtonClick)
+            return;
+        const handler = (e) => { var _a; return onButtonClick((_a = e.detail) !== null && _a !== void 0 ? _a : e); };
+        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 }));
+};
+//# sourceMappingURL=pep-button.js.map

package/pep-select.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export interface PepOption {
+    key: string;
+    value: string;
+}
+export interface PepSelectProps extends React.HTMLAttributes<HTMLElement> {
+    keyProp?: string;
+    value?: string;
+    label?: string;
+    placeholder?: string;
+    type?: 'select' | 'multi';
+    disabled?: boolean;
+    readonly?: boolean;
+    mandatory?: boolean;
+    options?: PepOption[];
+    addValueToOptionsIfNotExist?: boolean;
+    onValueChange?: (value: string) => void;
+}
+export declare const PepSelect: React.FC<PepSelectProps>;

package/pep-select.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+export const PepSelect = ({ keyProp, value, label, placeholder, type, disabled, readonly, mandatory, options, addValueToOptionsIfNotExist, onValueChange, ...rest }) => {
+    const ref = useRef(null);
+    // Sync complex props via properties
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (options)
+            el.options = options;
+        if (typeof addValueToOptionsIfNotExist !== 'undefined')
+            el.addValueToOptionsIfNotExist = !!addValueToOptionsIfNotExist;
+    }, [options, addValueToOptionsIfNotExist]);
+    // Sync booleans via properties to be safe
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (typeof disabled !== 'undefined')
+            el.disabled = !!disabled;
+        if (typeof readonly !== 'undefined')
+            el.readonly = !!readonly;
+        if (typeof mandatory !== 'undefined')
+            el.mandatory = !!mandatory;
+    }, [disabled, readonly, mandatory]);
+    // Events
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || !onValueChange)
+            return;
+        const handler = (e) => { var _a, _b; return onValueChange((_a = e.detail) !== null && _a !== void 0 ? _a : (_b = e.target) === null || _b === void 0 ? void 0 : _b.value); };
+        el.addEventListener('valueChange', handler);
+        return () => el.removeEventListener('valueChange', handler);
+    }, [onValueChange]);
+    return (_jsx("pep-select", { ref: ref, 
+        // attributes (strings)
+        value: value, label: label, placeholder: placeholder, type: type, ...rest }, keyProp));
+};
+//# sourceMappingURL=pep-select.js.map

package/pep-textbox.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+export declare type PepTextboxFieldType = 'text' | 'int' | 'real' | 'currency' | 'percentage' | 'email' | 'phone' | 'link' | 'duration';
+export interface PepTextboxProps extends React.HTMLAttributes<HTMLElement> {
+    keyProp?: string;
+    value?: string;
+    label?: string;
+    placeholder?: string;
+    type?: PepTextboxFieldType;
+    accessory?: string;
+    minFractionDigits?: number;
+    maxFractionDigits?: number;
+    mandatory?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
+    minValue?: number;
+    maxValue?: number;
+    regex?: string | RegExp;
+    regexError?: string;
+    onValueChange?: (value: string) => void;
+    onKeyup?: (e: any) => void;
+    onValidationChange?: (isValid: boolean) => void;
+}
+export declare const PepTextbox: React.FC<PepTextboxProps>;

package/pep-textbox.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+export const PepTextbox = ({ keyProp, value, label, placeholder, type, accessory, minFractionDigits, maxFractionDigits, mandatory, readonly, disabled, minValue, maxValue, regex, regexError, onValueChange, onKeyup, onValidationChange, ...rest }) => {
+    const ref = useRef(null);
+    // Sync complex/boolean props as properties on the element
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (typeof accessory !== 'undefined')
+            el.accessory = accessory;
+        if (typeof minFractionDigits !== 'undefined')
+            el.minFractionDigits = minFractionDigits;
+        if (typeof maxFractionDigits !== 'undefined')
+            el.maxFractionDigits = maxFractionDigits;
+        if (typeof mandatory !== 'undefined')
+            el.mandatory = !!mandatory;
+        if (typeof readonly !== 'undefined')
+            el.readonly = !!readonly;
+        if (typeof disabled !== 'undefined')
+            el.disabled = !!disabled;
+        if (typeof minValue !== 'undefined')
+            el.minValue = minValue;
+        if (typeof maxValue !== 'undefined')
+            el.maxValue = maxValue;
+        if (typeof regex !== 'undefined')
+            el.regex = regex;
+        if (typeof regexError !== 'undefined')
+            el.regexError = regexError;
+    }, [
+        accessory,
+        minFractionDigits,
+        maxFractionDigits,
+        mandatory,
+        readonly,
+        disabled,
+        minValue,
+        maxValue,
+        regex,
+        regexError,
+    ]);
+    // Attach events
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handlers = [];
+        if (onValueChange) {
+            const h = (e) => { var _a, _b; return onValueChange((_a = e.detail) !== null && _a !== void 0 ? _a : (_b = e.target) === null || _b === void 0 ? void 0 : _b.value); };
+            handlers.push(['valueChange', h]);
+        }
+        if (onKeyup) {
+            const h = (e) => onKeyup(e);
+            handlers.push(['keyup', h]);
+        }
+        if (onValidationChange) {
+            const h = (e) => { var _a, _b; return onValidationChange(!!((_a = e.detail) !== null && _a !== void 0 ? _a : (_b = e.target) === null || _b === void 0 ? void 0 : _b.value)); };
+            handlers.push(['validationChange', h]);
+        }
+        handlers.forEach(([name, h]) => el.addEventListener(name, h));
+        return () => handlers.forEach(([name, h]) => el.removeEventListener(name, h));
+    }, [onValueChange, onKeyup, onValidationChange]);
+    return (_jsx("pep-textbox", { ref: ref, value: value, label: label, placeholder: placeholder, type: type, ...rest }, keyProp));
+};
+//# sourceMappingURL=pep-textbox.js.map