@pallasoft/ps-input-components 1.0.0

package/LICENSE

@@ -0,0 +1,32 @@
+Pallasoft Proprietary License
+
+Version 1.0, 23-Jan-2024
+
+1. Grant of License:
+   Pallasoft grants you a non-exclusive, non-transferable, revocable license to use the software, solely for internal business purposes.
+
+2. Restrictions:
+   You may not:
+   a. Distribute or sublicense the software to third parties.
+   b. Reverse engineer, decompile, or disassemble the software.
+   c. Remove or alter any proprietary notices or labels on the software.
+
+3. Ownership:
+   Pallasoft retains all right, title, and interest in and to the software, including all intellectual property rights.
+
+4. Confidentiality:
+   You agree to keep the software confidential and not disclose it to third parties.
+
+5. Support and Updates:
+   This license does not entitle you to support or updates. Pallasoft may, at its discretion, provide support and updates.
+
+6. Termination:
+   This license is effective until terminated. Pallasoft may terminate the license at any time if you breach any terms. Upon termination, you must cease using the software.
+
+7. Governing Law:
+   This license is governed by the Canadian Laws. Any disputes arising out of this license shall be resolved in the courts of Canada.
+
+8. Contact Information:
+   For inquiries regarding this license, contact operations@pallasoft.com.
+
+[End of License]

package/README.md

@@ -0,0 +1,10 @@
+# @pallasoft/ps-input-components
+
+Shared Pallasoft input components package.
+
+## Scripts
+
+- `npm run build` compiles the package into `dist`.
+- `npm run lint` runs ESLint using the shared package baseline.
+- `npm run format:check` checks Prettier formatting.
+- `npm run release` publishes through semantic-release.

package/dist/components/ps-combobox-input.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+export interface PsComboboxInputProps<T> {
+    className?: string;
+    getItemKey: (item: T) => string;
+    getItemLabel: (item: T) => string;
+    isLoading?: boolean;
+    items: T[];
+    label?: string;
+    onInputChange?: (value: string) => void;
+    onSelectionChange?: (item: T | null) => void;
+    placeholder?: string;
+    renderItem?: (item: T) => ReactNode;
+}
+export declare const PsComboboxInput: <T>({ className, getItemKey, getItemLabel, isLoading, items, label, onInputChange, onSelectionChange, placeholder, renderItem, }: PsComboboxInputProps<T>) => import("react").JSX.Element;

package/dist/components/ps-combobox-input.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsComboboxInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_core_components_1 = require("@pallasoft/ps-core-components");
+const react_aria_components_1 = require("react-aria-components");
+const PsComboboxInput = ({ className, getItemKey, getItemLabel, isLoading = false, items, label, onInputChange, onSelectionChange, placeholder, renderItem, }) => {
+    const itemsByKey = new Map(items.map((item) => [getItemKey(item), item]));
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.ComboBox, { className: ps_design_system_1.PallasoftClassNameService.merge('block', className), defaultFilter: () => true, items: items, onInputChange: onInputChange, onSelectionChange: (key) => onSelectionChange?.(key === null ? null : (itemsByKey.get(String(key)) ?? null)), children: [label ? (0, jsx_runtime_1.jsx)(react_aria_components_1.Label, { className: 'ps-input-label', children: label }) : null, (0, jsx_runtime_1.jsx)("span", { className: 'relative mt-2 block', children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Input, { className: 'ps-input-control ps-focus-ring min-h-11 w-full text-sm font-semibold', placeholder: placeholder }) }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'w-[--trigger-width] rounded-2xl border border-line bg-white/95 p-1.5 shadow-lg dark:border-white/10 dark:bg-slate-900/95', children: isLoading ? ((0, jsx_runtime_1.jsx)("div", { className: 'flex items-center justify-center py-4', children: (0, jsx_runtime_1.jsx)(ps_core_components_1.PsSpinner, { label: 'Loading results', size: 'small' }) })) : ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBox, { className: 'max-h-72 overflow-y-auto outline-none', items: items, children: (item) => ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListBoxItem, { className: 'ps-focus-ring cursor-pointer rounded-xl px-3 py-2 text-sm font-semibold text-ink selected:bg-primary-soft selected:text-primary hover:bg-slate-50 dark:hover:bg-white/6', id: getItemKey(item), textValue: getItemLabel(item), children: renderItem ? renderItem(item) : getItemLabel(item) })) })) })] }));
+};
+exports.PsComboboxInput = PsComboboxInput;

package/dist/components/ps-date-input.d.ts

@@ -0,0 +1,12 @@
+export interface PsDateInputProps {
+    className?: string;
+    defaultValue?: string;
+    disabled?: boolean;
+    helperText?: string;
+    label: string;
+    name?: string;
+    onChange?: (value: string) => void;
+    required?: boolean;
+    value?: string;
+}
+export declare const PsDateInput: ({ className, defaultValue, disabled, helperText, label, name, onChange, required, value, }: PsDateInputProps) => import("react").JSX.Element;

package/dist/components/ps-date-input.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsDateInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const PsDateInput = ({ className, defaultValue, disabled, helperText, label, name, onChange, required, value, }) => ((0, jsx_runtime_1.jsxs)("label", { className: ps_design_system_1.PallasoftClassNameService.merge('block', className), children: [(0, jsx_runtime_1.jsx)("span", { className: 'ps-input-label', children: label }), (0, jsx_runtime_1.jsx)("input", { className: 'ps-input-control ps-focus-ring mt-2 min-h-11 w-full text-sm font-semibold', defaultValue: value === undefined ? defaultValue : undefined, disabled: disabled, name: name, onChange: (event) => onChange?.(event.target.value), required: required, type: 'date', value: value }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
+exports.PsDateInput = PsDateInput;

package/dist/components/ps-dropdown.d.ts

@@ -0,0 +1,15 @@
+import { type PsSelectOption } from './ps-select-input';
+export type PsDropdownOption = PsSelectOption;
+export interface PsDropdownProps {
+    className?: string;
+    defaultValue?: string;
+    disabled?: boolean;
+    helperText?: string;
+    label: string;
+    name: string;
+    onChange?: (value: string) => void;
+    options: PsDropdownOption[];
+    placeholder?: string;
+    value?: string;
+}
+export declare const PsDropdown: ({ className, defaultValue, disabled, helperText, label, name, onChange, options, placeholder, value, }: PsDropdownProps) => import("react").JSX.Element;

package/dist/components/ps-dropdown.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsDropdown = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_select_input_1 = require("./ps-select-input");
+const PsDropdown = ({ className, defaultValue, disabled = false, helperText, label, name, onChange, options, placeholder, value, }) => ((0, jsx_runtime_1.jsx)(ps_select_input_1.PsSelectInput, { className: className, defaultValue: defaultValue, disabled: disabled, helperText: helperText, label: label, name: name, onChange: onChange, options: options, placeholder: placeholder, value: value }));
+exports.PsDropdown = PsDropdown;

package/dist/components/ps-form-control.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export interface PsFormControlProps {
+    children: ReactNode;
+    className?: string;
+    errorText?: string;
+    helperText?: string;
+    label?: string;
+}
+export declare const PsFormControl: ({ children, className, errorText, helperText, label, }: PsFormControlProps) => import("react").JSX.Element;

package/dist/components/ps-form-control.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFormControl = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const PsFormControl = ({ children, className, errorText, helperText, label, }) => ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('grid gap-2', className), children: [label ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-label-compact', children: label }) : null, children, errorText ? ((0, jsx_runtime_1.jsx)("p", { className: 'text-xs font-semibold text-danger', children: errorText })) : helperText ? ((0, jsx_runtime_1.jsx)("p", { className: 'ps-input-helper', children: helperText })) : null] }));
+exports.PsFormControl = PsFormControl;

package/dist/components/ps-multi-select-input.d.ts

@@ -0,0 +1,13 @@
+import type { PsSelectOption } from './ps-select-input';
+export interface PsMultiSelectInputProps {
+    className?: string;
+    defaultValue?: string[];
+    disabled?: boolean;
+    helperText?: string;
+    label: string;
+    name?: string;
+    onChange?: (value: string[]) => void;
+    options: PsSelectOption[];
+    value?: string[];
+}
+export declare const PsMultiSelectInput: ({ className, defaultValue, disabled, helperText, label, name, onChange, options, value, }: PsMultiSelectInputProps) => import("react").JSX.Element;

package/dist/components/ps-multi-select-input.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsMultiSelectInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const react_aria_components_1 = require("react-aria-components");
+const PsMultiSelectInput = ({ className, defaultValue, disabled, helperText, label, name, onChange, options, value, }) => {
+    const selectedProps = value === undefined ? { defaultValue } : { value };
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.CheckboxGroup, { ...selectedProps, className: ps_design_system_1.PallasoftClassNameService.merge('grid gap-2', className), isDisabled: disabled, onChange: onChange, children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Label, { className: 'ps-input-label', children: label }), (0, jsx_runtime_1.jsx)("div", { className: 'grid gap-2', children: options.map((option) => ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Checkbox, { className: 'ps-focus-ring group flex cursor-pointer items-start gap-3 rounded-2xl border border-line bg-white/62 px-3.5 py-3 text-sm transition selected:border-primary/40 selected:bg-primary-soft/42 hover:border-primary/30 dark:border-white/10 dark:bg-white/6', name: name, value: option.value, children: [(0, jsx_runtime_1.jsx)("span", { className: 'mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded border border-line bg-white text-[0.65rem] font-black text-white group-selected:border-primary group-selected:bg-primary dark:border-white/20 dark:bg-white/8', children: "\u2713" }), (0, jsx_runtime_1.jsxs)("span", { className: 'min-w-0', children: [(0, jsx_runtime_1.jsx)("span", { className: 'block font-semibold text-ink', children: option.label }), option.description ? ((0, jsx_runtime_1.jsx)("span", { className: 'mt-1 block text-xs leading-5 text-slate-500', children: option.description })) : null] })] }, option.value))) }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
+};
+exports.PsMultiSelectInput = PsMultiSelectInput;

package/dist/components/ps-select-input.d.ts

@@ -0,0 +1,19 @@
+export interface PsSelectOption {
+    description?: string;
+    label: string;
+    value: string;
+}
+export interface PsSelectInputProps {
+    className?: string;
+    defaultValue?: string;
+    disabled?: boolean;
+    helperText?: string;
+    label: string;
+    name?: string;
+    onChange?: (value: string) => void;
+    options: PsSelectOption[];
+    placeholder?: string;
+    required?: boolean;
+    value?: string;
+}
+export declare const PsSelectInput: ({ className, defaultValue, disabled, helperText, label, name, onChange, options, placeholder, required, value, }: PsSelectInputProps) => import("react").JSX.Element;

package/dist/components/ps-select-input.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSelectInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const PsSelectInput = ({ className, defaultValue, disabled, helperText, label, name, onChange, options, placeholder = 'Select an option', required, value, }) => ((0, jsx_runtime_1.jsxs)("label", { className: ps_design_system_1.PallasoftClassNameService.merge('block', className), children: [(0, jsx_runtime_1.jsx)("span", { className: 'ps-input-label', children: label }), (0, jsx_runtime_1.jsxs)("span", { className: 'relative mt-2 block', children: [(0, jsx_runtime_1.jsxs)("select", { className: 'ps-input-control ps-focus-ring min-h-11 w-full appearance-none pr-10 text-left font-semibold disabled:cursor-not-allowed disabled:opacity-60', defaultValue: value === undefined ? (defaultValue ?? options[0]?.value ?? '') : undefined, disabled: disabled, name: name, onChange: (event) => onChange?.(event.target.value), required: required, value: value, children: [options.length === 0 || !defaultValue ? ((0, jsx_runtime_1.jsx)("option", { disabled: true, value: '', children: placeholder })) : null, options.map((option) => ((0, jsx_runtime_1.jsx)("option", { value: option.value, children: option.label }, option.value)))] }), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: 'pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-primary', children: "\u2304" })] }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
+exports.PsSelectInput = PsSelectInput;

package/dist/components/ps-text-input.d.ts

@@ -0,0 +1,6 @@
+import type { InputHTMLAttributes } from 'react';
+export interface PsTextInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    helperText?: string;
+    label: string;
+}
+export declare const PsTextInput: ({ className, defaultValue, disabled, helperText, label, name, onChange, required, type, value, ...props }: PsTextInputProps) => import("react").JSX.Element;

package/dist/components/ps-text-input.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTextInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_date_input_1 = require("./ps-date-input");
+const PsTextInput = ({ className, defaultValue, disabled, helperText, label, name, onChange, required, type, value, ...props }) => {
+    if (type === 'date') {
+        return ((0, jsx_runtime_1.jsx)(ps_date_input_1.PsDateInput, { className: className, defaultValue: typeof defaultValue === 'string' ? defaultValue : undefined, disabled: disabled, helperText: helperText, label: label, name: name, onChange: (nextValue) => onChange?.({
+                target: { name, value: nextValue },
+            }), required: required, value: typeof value === 'string' ? value : undefined }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("label", { className: 'block', children: [(0, jsx_runtime_1.jsx)("span", { className: 'ps-input-label', children: label }), (0, jsx_runtime_1.jsx)("input", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-input-control mt-2', className), defaultValue: defaultValue, disabled: disabled, name: name, onChange: onChange, required: required, type: type, value: value, ...props }), helperText ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-input-helper', children: helperText }) : null] }));
+};
+exports.PsTextInput = PsTextInput;

package/dist/components/ps-toggle.d.ts

@@ -0,0 +1,8 @@
+export interface PsToggleProps {
+    description?: string;
+    isChecked: boolean;
+    label: string;
+    name?: string;
+    onChange?: (isChecked: boolean) => void;
+}
+export declare const PsToggle: ({ description, isChecked, label, name, onChange }: PsToggleProps) => import("react").JSX.Element;

package/dist/components/ps-toggle.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsToggle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const PsToggle = ({ description, isChecked, label, name, onChange }) => ((0, jsx_runtime_1.jsxs)("label", { className: 'ps-focus-ring flex cursor-pointer items-center justify-between gap-4 rounded-2xl border border-line bg-white/78 px-4 py-3 text-ink transition-colors hover:border-primary/35 dark:border-white/10 dark:bg-white/6 dark:text-white', children: [(0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("span", { className: 'block text-sm font-semibold text-current', children: label }), description ? ((0, jsx_runtime_1.jsx)("span", { className: 'mt-1 block text-xs leading-5 text-slate-500 dark:text-slate-400', children: description })) : null] }), (0, jsx_runtime_1.jsx)("input", { checked: isChecked, className: 'sr-only', name: name, onChange: (event) => onChange?.(event.target.checked), type: 'checkbox' }), (0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('flex h-7 w-12 items-center rounded-full p-1 transition', isChecked ? 'bg-primary' : 'bg-slate-200 dark:bg-slate-700'), children: (0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('h-5 w-5 rounded-full bg-white ring-1 ring-black/5 transition dark:ring-white/10', isChecked && 'translate-x-5') }) })] }));
+exports.PsToggle = PsToggle;

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export * from './components/ps-combobox-input';
+export * from './components/ps-date-input';
+export * from './components/ps-dropdown';
+export * from './components/ps-form-control';
+export * from './components/ps-multi-select-input';
+export * from './components/ps-select-input';
+export * from './components/ps-text-input';
+export * from './components/ps-toggle';

package/dist/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components/ps-combobox-input"), exports);
+__exportStar(require("./components/ps-date-input"), exports);
+__exportStar(require("./components/ps-dropdown"), exports);
+__exportStar(require("./components/ps-form-control"), exports);
+__exportStar(require("./components/ps-multi-select-input"), exports);
+__exportStar(require("./components/ps-select-input"), exports);
+__exportStar(require("./components/ps-text-input"), exports);
+__exportStar(require("./components/ps-toggle"), exports);

package/package.json

@@ -0,0 +1,76 @@
+{
+	"name": "@pallasoft/ps-input-components",
+	"version": "1.0.0",
+	"private": false,
+	"main": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"require": "./dist/index.js",
+			"default": "./dist/index.js"
+		}
+	},
+	"files": [
+		"/dist"
+	],
+	"scripts": {
+		"husky:prepare": "npx husky",
+		"build": "tsc",
+		"setup:graphify": "sh scripts/graphify-setup.sh",
+		"update:graphify": "sh scripts/graphify-update.sh",
+		"lint": "npm run lint:eslint",
+		"lint:fix": "npm run lint:eslint:fix",
+		"format:check": "npx prettier --check --ignore-unknown \"src/**/*.{ts,tsx,json,md}\"",
+		"format:prettier": "npx prettier --write \"src/**/*.{ts,tsx,json,md}\"",
+		"lint:eslint": "npx eslint \"src/**/*.{ts,tsx}\"",
+		"lint:eslint:fix": "npx eslint --fix \"src/**/*.{ts,tsx}\"",
+		"release": "semantic-release"
+	},
+	"dependencies": {
+		"@internationalized/date": "^3.12.2",
+		"@pallasoft/ps-core-components": "^1.0.0",
+		"@pallasoft/ps-design-system": "^1.0.0",
+		"react-aria-components": "^1.19.0"
+	},
+	"peerDependencies": {
+		"react": "^18 || ^19",
+		"react-dom": "^18 || ^19"
+	},
+	"devDependencies": {
+		"@commitlint/cli": "^20.1.0",
+		"@commitlint/config-conventional": "^20.0.0",
+		"@eslint/compat": "^2.0.0",
+		"@ianvs/prettier-plugin-sort-imports": "^4.7.0",
+		"@semantic-release/changelog": "^6.0.3",
+		"@semantic-release/commit-analyzer": "^13.0.0",
+		"@semantic-release/git": "^10.0.1",
+		"@semantic-release/github": "^11.0.1",
+		"@semantic-release/npm": "^12.0.0",
+		"@semantic-release/release-notes-generator": "^14.0.1",
+		"@types/react": "^18.3.28",
+		"@types/react-dom": "^18.3.7",
+		"@typescript-eslint/eslint-plugin": "^8.48.0",
+		"@typescript-eslint/parser": "^8.48.0",
+		"commitlint": "^20.1.0",
+		"conventional-changelog-conventionalcommits": "^7.0.2",
+		"eslint": "^9.39.1",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-import": "^2.32.0",
+		"eslint-plugin-prettier": "^5.5.4",
+		"husky": "^9.1.7",
+		"lint-staged": "^16.2.7",
+		"prettier": "^3.6.2",
+		"semantic-release": "^24.2.0",
+		"ts-node": "^10.9.2",
+		"typescript": "^5.9.3"
+	},
+	"publishConfig": {
+		"access": "public",
+		"registry": "https://registry.npmjs.org/"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/pallasoft/ps-input-components.git"
+	}
+}