@serhiibudianskyi/wui 0.0.1

package/dist/types/Field.js

@@ -0,0 +1,442 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldFactory = exports.Field = void 0;
+const zod_1 = require("zod");
+// Field class representing a form field
+class Field {
+    // Constructor to initialize the field with its configuration and schema
+    constructor(config, schema) {
+        // Configuration for the field
+        this._config = {};
+        // Zod schema for the field
+        this.schema = zod_1.z.any();
+        this._config = config;
+        this.schema = schema;
+    }
+    get type() {
+        return this._config.type;
+    }
+    get name() {
+        return this._config.name;
+    }
+    get label() {
+        return this._config.label;
+    }
+    get placeholder() {
+        return this._config.placeholder || '';
+    }
+    get isReadOnly() {
+        return this._config.isReadOnly || false;
+    }
+    get isDisabled() {
+        return this._config.isDisabled || false;
+    }
+    get isRequired() {
+        return this._config.isRequired || false;
+    }
+    get min() {
+        return this._config.min;
+    }
+    get max() {
+        return this._config.max;
+    }
+    get revalidates() {
+        return this._config.revalidates || [];
+    }
+    get step() {
+        return this._config.step;
+    }
+    get options() {
+        return this._config.options || [];
+    }
+    get isMultiple() {
+        return this._config.isMultiple || false;
+    }
+    get maxSize() {
+        return this._config.maxSize;
+    }
+    get accept() {
+        return this._config.accept;
+    }
+    get maxFiles() {
+        return this.isMultiple ? this._config.maxFiles || +Infinity : 1;
+    }
+    get loadOptions() {
+        return this._config.loadOptions;
+    }
+    get className() {
+        return this._config.className || '';
+    }
+    get attrs() {
+        return this._config.attrs || {};
+    }
+    // Normalize the input value based on the field's configuration
+    getNormalizedValue(value) {
+        return this._config.normalize ? this._config.normalize(value) : value;
+    }
+    // Run custom validation logic for the field
+    runValidation(values, ctx) {
+        if (this._config.validate) {
+            this._config.validate(values, ctx);
+        }
+    }
+    // Get default value for the field based on its type
+    getDefaultValue() {
+        var _a;
+        switch (this._config.type) {
+            case 'file':
+                return (this._config.isMultiple ? [] : null);
+            case 'number':
+                return ((_a = this._config.min) !== null && _a !== void 0 ? _a : 0);
+            case 'checkbox':
+                return false;
+            case 'date':
+            case 'datetime-local':
+                return new Date();
+            case 'time':
+                return '00:00';
+            case 'select':
+            case 'async-select':
+            case 'creatable-select':
+            case 'async-creatable-select':
+                return (this._config.isMultiple ? [] : null);
+            case 'textarea':
+            case 'text':
+            case 'email':
+            case 'password':
+            case 'radio':
+            default:
+                return '';
+        }
+    }
+}
+exports.Field = Field;
+class FieldFactory {
+    // Create a Zod schema for string fields
+    static createStringSchema(config) {
+        let schema = zod_1.z.string();
+        // Apply required validation if specified
+        if (config.isRequired) {
+            schema = schema.nonempty({ message: `${config.label} is required` });
+        }
+        return schema;
+    }
+    // Create a Zod schema for email fields
+    static createEmailSchema(config) {
+        let schema = this.createStringSchema(config).email('Invalid email address');
+        return schema;
+    }
+    // Create a text field with the given configuration
+    static text(name, label, config = {}) {
+        const fieldConfig = Object.assign({ type: 'text', name,
+            label }, config);
+        return new Field(fieldConfig, this.createStringSchema(fieldConfig));
+    }
+    // Create an email field with the given configuration
+    static email(config) {
+        const fieldConfig = Object.assign({ type: 'email', name: config.name || 'email', label: config.label || 'Email' }, config);
+        return new Field(fieldConfig, this.createEmailSchema(fieldConfig));
+    }
+    // Create a password field with the given configuration
+    static password(config) {
+        const fieldConfig = Object.assign({ type: 'password', name: config.name || 'password', label: config.label || 'Password' }, config);
+        return new Field(fieldConfig, this.createStringSchema(fieldConfig));
+    }
+    // Create a textarea field with the given configuration
+    static textarea(name, label, config = {}) {
+        const fieldConfig = Object.assign({ type: 'textarea', name,
+            label }, config);
+        return new Field(fieldConfig, this.createStringSchema(fieldConfig));
+    }
+    // Create a Zod schema for number fields
+    static createNumberSchema(config) {
+        // Preprocess to handle empty strings and convert to number
+        let schema = zod_1.z.preprocess((val) => {
+            if (typeof val === 'string' && val.trim() === '' || isNaN(Number(val))) {
+                return undefined;
+            }
+            return Number(val);
+        }, zod_1.z.number().optional() // It should be optional initially!
+        );
+        // Apply required and range validations if specified
+        if (config.isRequired) {
+            schema = schema.refine((val) => val !== undefined, {
+                message: `${config.label} is required`
+            });
+        }
+        // Minmax value validation
+        schema = schema
+            .refine((val) => {
+            if (val === undefined)
+                return true;
+            if (typeof config.min === 'number') {
+                return val >= config.min;
+            }
+            return true;
+        }, {
+            message: `${config.label} must be at least ${config.min}`
+        })
+            .refine((val) => {
+            if (val === undefined)
+                return true;
+            if (typeof config.max === 'number') {
+                return val <= config.max;
+            }
+            return true;
+        }, {
+            message: `${config.label} must be at most ${config.max}`
+        });
+        return schema;
+    }
+    // Create a number field with the given configuration
+    static number(name, label, config = {}) {
+        const fieldConfig = Object.assign({ type: 'number', name,
+            label }, config);
+        return new Field(fieldConfig, this.createNumberSchema(fieldConfig));
+    }
+    // Create a Zod schema for checkbox fields
+    static createCheckboxSchema(config) {
+        let schema = zod_1.z.boolean();
+        // Apply required validation if specified
+        if (config.isRequired) {
+            schema = schema.refine((val) => val === true, {
+                message: `${config.label} must be checked`
+            });
+        }
+        return schema;
+    }
+    // Create a checkbox field with the given configuration
+    static checkbox(name, label, config = {}) {
+        const fieldConfig = Object.assign({ type: 'checkbox', name,
+            label }, config);
+        return new Field(fieldConfig, this.createCheckboxSchema(fieldConfig));
+    }
+    // Create a Zod schema for date fields
+    static createDateSchema(config) {
+        let schema = zod_1.z.preprocess((val) => {
+            if (typeof val === 'string' || val instanceof Date) {
+                const date = new Date(val);
+                return isNaN(date.getTime()) ? undefined : date;
+            }
+            return undefined;
+        }, zod_1.z.date().optional());
+        // Apply required validation if specified
+        if (config.isRequired) {
+            schema = schema.refine((val) => val !== undefined, {
+                message: `${config.label} is required`
+            });
+        }
+        // Minmax date validation
+        schema = schema
+            .refine((val) => {
+            if (val === undefined)
+                return true;
+            if (typeof config.min === 'string') {
+                return val >= new Date(config.min);
+            }
+            return true;
+        }, {
+            message: `${config.label} must be on or after ${config.min ? new Date(config.min).toLocaleDateString() : ''}`
+        })
+            .refine((val) => {
+            if (val === undefined)
+                return true;
+            if (typeof config.max === 'string') {
+                return val <= new Date(config.max);
+            }
+            return true;
+        }, {
+            message: `${config.label} must be on or before ${config.max ? new Date(config.max).toLocaleDateString() : ''}`
+        });
+        return schema;
+    }
+    // Create a date field with the given configuration
+    static date(name, label, config = {}) {
+        const fieldConfig = Object.assign({ type: 'date', name,
+            label }, config);
+        return new Field(fieldConfig, this.createDateSchema(fieldConfig));
+    }
+    // Create a Zod schema for datetime-local fields
+    static createDateTimeLocalSchema(config) {
+        let schema = zod_1.z.preprocess((val) => {
+            if (typeof val === 'string' || val instanceof Date) {
+                const date = new Date(val);
+                return isNaN(date.getTime()) ? undefined : date;
+            }
+            return undefined;
+        }, zod_1.z.date().optional());
+        // Apply required validation if specified
+        if (config.isRequired) {
+            schema = schema.refine((val) => val !== undefined, {
+                message: `${config.label} is required`
+            });
+        }
+        // Minmax datetime validation
+        schema = schema
+            .refine((val) => {
+            if (val === undefined)
+                return true;
+            if (typeof config.min === 'string') {
+                return val >= new Date(config.min);
+            }
+            return true;
+        }, {
+            message: `${config.label} must be on or after ${config.min ? new Date(config.min).toLocaleString() : ''}`
+        })
+            .refine((val) => {
+            if (val === undefined)
+                return true;
+            if (typeof config.max === 'string') {
+                return val <= new Date(config.max);
+            }
+            return true;
+        }, {
+            message: `${config.label} must be on or before ${config.max ? new Date(config.max).toLocaleString() : ''}`
+        });
+        return schema;
+    }
+    // Create a datetime-local field with the given configuration
+    static datetimeLocal(name, label, config = {}) {
+        const fieldConfig = Object.assign({ type: 'datetime-local', name,
+            label }, config);
+        return new Field(fieldConfig, this.createDateTimeLocalSchema(fieldConfig));
+    }
+    // Create a Zod schema for time fields
+    static createTimeSchema(config) {
+        let schema = zod_1.z.string().optional();
+        // Apply required validation if specified
+        if (config.isRequired) {
+            schema = schema.refine((val) => val !== undefined && val !== '', {
+                message: `${config.label} is required`
+            });
+        }
+        // Validate time format (HH:MM)
+        schema = schema.refine((val) => !val || /^([01]\d|2[0-3]):([0-5]\d)$/.test(val), {
+            message: `${config.label} must be a valid time in HH:MM format`
+        });
+        // Minmax time validation
+        schema = schema
+            .refine((val) => {
+            if (!val)
+                return true;
+            if (typeof config.min === 'string') {
+                return val >= config.min;
+            }
+            return true;
+        }, {
+            message: `${config.label} must be at or after ${config.min}`
+        })
+            .refine((val) => {
+            if (!val)
+                return true;
+            if (typeof config.max === 'string') {
+                return val <= config.max;
+            }
+            return true;
+        }, {
+            message: `${config.label} must be at or before ${config.max}`
+        });
+        return schema;
+    }
+    // Create a time field with the given configuration
+    static time(name, label, config = {}) {
+        const fieldConfig = Object.assign({ type: 'time', name,
+            label }, config);
+        return new Field(fieldConfig, this.createTimeSchema(fieldConfig));
+    }
+    // Create a radio field with the given configuration
+    static radio(name, label, options, config = {}) {
+        const fieldConfig = Object.assign({ type: 'radio', name,
+            label,
+            options }, config);
+        return new Field(fieldConfig, this.createStringSchema(fieldConfig));
+    }
+    // Create a Zod schema for select fields
+    static createSelectSchema(config) {
+        if (config.isMultiple) {
+            // Array schema for multi-select
+            let schema = zod_1.z.array(zod_1.z.object({
+                label: zod_1.z.string(),
+                value: zod_1.z.string()
+            }));
+            // Apply required validation
+            if (config.isRequired) {
+                schema = schema.nonempty({ message: `${config.label} is required` });
+            }
+            return schema.default([]);
+        }
+        else {
+            // For single-select, return an Option object or null
+            let schema = zod_1.z.object({
+                label: zod_1.z.string(),
+                value: zod_1.z.string()
+            }).nullable().default(null);
+            // Apply required validation
+            if (config.isRequired) {
+                schema = schema.refine((val) => val !== null, { message: `${config.label} is required` });
+            }
+            return schema;
+        }
+    }
+    // Create a select field with the given configuration
+    static select(name, label, options, config = {}) {
+        const fieldConfig = Object.assign({ type: 'select', name,
+            label,
+            options }, config);
+        return new Field(fieldConfig, this.createSelectSchema(fieldConfig));
+    }
+    // Create an async-select field with the given configuration
+    static asyncSelect(name, label, loadOptions, config = {}) {
+        const fieldConfig = Object.assign({ type: 'async-select', name,
+            label,
+            loadOptions }, config);
+        return new Field(fieldConfig, this.createSelectSchema(fieldConfig));
+    }
+    // Create a creatable-select field with the given configuration
+    static creatableSelect(name, label, options, config = {}) {
+        const fieldConfig = Object.assign({ type: 'creatable-select', name,
+            label,
+            options }, config);
+        return new Field(fieldConfig, this.createSelectSchema(fieldConfig));
+    }
+    // Create an async-creatable-select field with the given configuration
+    static asyncCreatableSelect(name, label, loadOptions, config = {}) {
+        const fieldConfig = Object.assign({ type: 'async-creatable-select', name,
+            label,
+            loadOptions }, config);
+        return new Field(fieldConfig, this.createSelectSchema(fieldConfig));
+    }
+    static createFileSchema(config) {
+        if (config.isMultiple) {
+            // Array schema for multiple files
+            let schema = zod_1.z.array(zod_1.z.string());
+            // Apply required validation
+            if (config.isRequired) {
+                schema = schema.nonempty({ message: `${config.label} is required` });
+            }
+            // Apply maxFiles validation
+            if (config.maxFiles) {
+                schema = schema.max(config.maxFiles, {
+                    message: `${config.label} cannot have more than ${config.maxFiles} file${config.maxFiles > 1 ? 's' : ''}`
+                });
+            }
+            return schema.default([]);
+        }
+        else {
+            // For single file, return a string (file ID) or null
+            let schema = zod_1.z.string().nullable().default(null);
+            // Apply required validation
+            if (config.isRequired) {
+                schema = schema.refine((val) => val !== null, { message: `${config.label} is required` });
+            }
+            return schema;
+        }
+    }
+    // Create a file field with the given configuration
+    static file(name, label, config = {}) {
+        const fieldConfig = Object.assign({ type: 'file', name,
+            label }, config);
+        return new Field(fieldConfig, this.createFileSchema(fieldConfig));
+    }
+}
+exports.FieldFactory = FieldFactory;

package/dist/types/Form.d.ts

@@ -0,0 +1,29 @@
+import { z } from 'zod';
+import { Field } from './Field';
+export interface Section {
+    title?: string;
+    fields: Record<string, Field<any>>;
+    className?: string;
+}
+export declare class Form {
+    private _fields;
+    private _schema;
+    private _defaultValues;
+    private _sections;
+    constructor(sections: Section[]);
+    get sections(): Section[];
+    get schema(): z.ZodObject<any>;
+    get defaultValues(): Record<string, any>;
+    setDefaultValues(values: Record<string, any>): void;
+    private _buildSchema;
+    private _buildDefaultValues;
+    private _extractFieldsFromSections;
+}
+export declare class FormBuilder {
+    private _sections;
+    private _defaultValues;
+    section(section: Section): this;
+    sections(sections: Section[]): this;
+    defaultValues(values: Record<string, any>): this;
+    build(): Form;
+}

package/dist/types/Form.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormBuilder = exports.Form = void 0;
+const zod_1 = require("zod");
+class Form {
+    // Alternative constructor to initialize the form with sections
+    constructor(sections) {
+        // Form fields
+        this._fields = {};
+        // Zod schema for the form
+        this._schema = null;
+        // Default values for the form
+        this._defaultValues = {};
+        // Sections of the form
+        this._sections = [];
+        this._sections = sections;
+        this._fields = this._extractFieldsFromSections();
+        this._buildDefaultValues();
+    }
+    get sections() {
+        return this._sections;
+    }
+    get schema() {
+        // Build the schema if it hasn't been built yet
+        if (!this._schema) {
+            this._schema = this._buildSchema();
+        }
+        return this._schema;
+    }
+    // Get default values for the form
+    get defaultValues() {
+        return this._defaultValues;
+    }
+    // Set default values for the form
+    setDefaultValues(values) {
+        this._defaultValues = Object.assign(Object.assign({}, this._defaultValues), values);
+    }
+    // Build the Zod schema for the form based on its fields
+    _buildSchema() {
+        const shape = {};
+        // Iterate over each field to build its schema
+        for (const [name, field] of Object.entries(this._fields)) {
+            let schema = field.schema;
+            // Wrap the schema with preprocessing to normalize the value
+            schema = zod_1.z.preprocess(field.getNormalizedValue.bind(field), schema);
+            shape[name] = schema;
+        }
+        // Return the combined schema with custom refinements callback
+        return zod_1.z.object(shape).superRefine((values, ctx) => {
+            for (const field of Object.values(this._fields)) {
+                field.runValidation(values, ctx);
+            }
+        });
+    }
+    // Build default values for the form based on its fields
+    _buildDefaultValues() {
+        this._defaultValues = {};
+        for (const [key, field] of Object.entries(this._fields)) {
+            this._defaultValues[key] = field.getDefaultValue();
+        }
+    }
+    // Extract fields from sections
+    _extractFieldsFromSections() {
+        const fields = {};
+        for (const section of this._sections) {
+            Object.assign(fields, section.fields);
+        }
+        return fields;
+    }
+}
+exports.Form = Form;
+class FormBuilder {
+    constructor() {
+        // Set of sections of fields for the form
+        this._sections = [];
+        // Default values for the form
+        this._defaultValues = {};
+    }
+    // Add a section to the form
+    section(section) {
+        this._sections.push(section);
+        // Extract default values from section fields
+        for (const [name, field] of Object.entries(section.fields)) {
+            this._defaultValues[name] = field.getDefaultValue();
+        }
+        return this;
+    }
+    // Add multiple sections to the form
+    sections(sections) {
+        for (const section of sections) {
+            this.section(section);
+        }
+        return this;
+    }
+    // Set default values for the form
+    defaultValues(values) {
+        this._defaultValues = Object.assign(Object.assign({}, this._defaultValues), values);
+        return this;
+    }
+    // Build and return the form instance
+    build() {
+        const form = new Form(this._sections);
+        form.setDefaultValues(this._defaultValues);
+        return form;
+    }
+}
+exports.FormBuilder = FormBuilder;

package/package.json

@@ -0,0 +1,57 @@
+{
+    "name": "@serhiibudianskyi/wui",
+    "version": "0.0.1",
+    "description": "Web User Interface npm libray",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "scripts": {
+        "build": "tsc -p tsconfig.json",
+        "prepublishOnly": "npm run build"
+    },
+    "files": [
+        "dist"
+    ],
+    "keywords": [
+        "form",
+        "fields",
+        "library",
+        "typescript"
+    ],
+    "author": "Serhii Budianskyi",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/serhiibudianskyi/wui.git"
+    },
+    "homepage": "https://github.com/serhiibudianskyi/wui#readme",
+    "bugs": {
+        "url": "https://github.com/serhiibudianskyi/wui/issues"
+    },
+    "engines": {
+        "node": ">=16.0.0"
+    },
+    "peerDependencies": {
+        "typescript": "^5.0.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-hook-form": "^7.53.0",
+        "react-router-dom": "^7.6.3",
+        "react-select": "^5.10.2",
+        "react-toastify": "^10.0.6",
+        "@types/react": "^18.2.0",
+        "@types/react-dom": "^18.2.0"
+    },
+    "dependencies": {
+        "zod": "^4.0.17",
+        "filesize": "^11.0.13",
+        "@rpldy/uploady": "^1.12.0",
+        "@rpldy/upload-button": "^1.12.0",
+        "@rpldy/upload-preview": "^1.12.0",
+        "@rpldy/upload-drop-zone": "^1.12.0",
+        "@hookform/resolvers": "^5.2.1"
+    },
+    "exclude": [
+        "node_modules",
+        "dist"
+    ]
+}