@solidstarters/solid-core-ui 1.1.210 → 1.1.211

package/src/components/core/common/SolidLayoutViews.tsx

@@ -0,0 +1,87 @@
+'use client';
+import { Button } from 'primereact/button';
+import { OverlayPanel } from 'primereact/overlaypanel';
+import { RadioButton } from 'primereact/radiobutton';
+import { useRef } from 'react';
+interface Props {
+    sizeOptions: { label: string; value: string, image: string }[];
+    setSize: (value: string) => void;
+    size: string;
+    viewModes: { label: string; value: string, image: string }[];
+    setView: (value: string) => void;
+    view: string;
+}
+export const SolidLayoutViews = ({ sizeOptions, setSize, size, viewModes, setView, view }: Props) => {
+    const op = useRef(null);
+
+    return (
+        <div className="position-relative">
+            <Button
+                type="button"
+                size='small'
+                severity='secondary'
+                icon={
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none">
+                        <path d="M14.9016 13.1969L10.8031 9.09845L14.9016 5L19 9.09845L14.9016 13.1969ZM5 11.7461V5.94301H10.8031V11.7461H5ZM12.2539 19V13.1969H18.057V19H12.2539ZM5 19V13.1969H10.8031V19H5ZM6.45078 10.2953H9.35233V7.39378H6.45078V10.2953ZM14.9197 11.1658L16.9689 9.11658L14.9197 7.06736L12.8705 9.11658L14.9197 11.1658ZM13.7047 17.5492H16.6062V14.6477H13.7047V17.5492ZM6.45078 17.5492H9.35233V14.6477H6.45078V17.5492Z" fill="#4B4D52" />
+                    </svg>
+                }
+                className='custom-icon-button'
+                outlined
+                // @ts-ignore
+                onClick={(e) => op.current.toggle(e)}
+            />
+            <OverlayPanel ref={op} className='solid-header-dropdown-panel'>
+                <div className='secondary-border-bottom p-1'>
+                    <p className='px-3 pt-2'>Density</p>
+                    <div className="flex flex-column gap-1">
+                        {sizeOptions.map((option) => (
+                            <div key={option.value} className={`flex align-items-center ${option.value === size ? 'solid-active-view' : 'solid-view'}`}>
+                                <RadioButton
+                                    inputId={option.value}
+                                    name="sizes"
+                                    value={option.value}
+                                    onChange={(e) => setSize(e.value)}
+                                    checked={option.value === size}
+                                />
+                                <label htmlFor={option.value} className="ml-2 flex align-items-center justify-content-between w-full">
+                                    {option.label}
+                                    <img
+                                        src={option.image}
+                                        alt={option.value}
+                                        className='img-fluid position-relative'
+                                        style={{ width: '2.75rem' }}
+                                    />
+                                </label>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+                <div className='p-1'>
+                    <p className='px-3 pt-2'>View Mode</p>
+                    <div className="flex flex-column gap-1">
+                        {viewModes.map((option) => (
+                            <div key={option.value} className={`flex align-items-center ${option.value === view ? 'solid-active-view' : 'solid-view'}`}>
+                                <RadioButton
+                                    inputId={option.value}
+                                    name="views"
+                                    value={option.value}
+                                    onChange={(e) => setView(e.value)}
+                                    checked={option.value === view}
+                                />
+                                <label htmlFor={option.value} className="ml-2 flex align-items-center justify-content-between w-full">
+                                    {option.label}
+                                    <img
+                                        src={option.image}
+                                        alt={option.value}
+                                        className='img-fluid position-relative'
+                                        style={{ width: '2.75rem' }}
+                                    />
+                                </label>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </OverlayPanel>
+        </div>
+    );
+}

package/src/components/core/common/SolidListViewOptions.tsx

@@ -0,0 +1,31 @@
+'use client';
+import { Dialog } from "primereact/dialog";
+import { useState } from "react";
+
+
+export const SolidListViewOptions = ({ }: any) => {
+
+    const [visible, setVisible] = useState<boolean>(false);
+
+    const [componentsToRender, setComponentsToRender] = useState(["Header", "NonExistentComponent"]);
+
+    return (
+        <div className="card flex justify-content-center">
+            <i className="pi pi-cog" onClick={() => setVisible(true)}></i>
+
+            <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => { if (!visible) return; setVisible(false); }}>
+                <p className="m-0">
+                    ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+                <div>
+                   
+                </div>
+
+            </Dialog>
+        </div>
+    )
+
+}

package/src/components/core/common/SolidLoaders/SolidCircularLoader.tsx

@@ -0,0 +1,7 @@
+import styles from './SolidLoaders.module.css'
+
+export const SolidCircularLoader = () => {
+    return (
+        <div className={styles.SolidCircularLoader}></div>
+    )
+}

package/src/components/core/common/SolidPasswordHelperText.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import React from "react";
+
+interface PasswordHelperTextProps {
+  text?: any;
+}
+
+export const SolidPasswordHelperText: React.FC<PasswordHelperTextProps> = ({ text }) => {
+  const envPasswordHelperText = process.env.NEXT_PUBLIC_PASSWORD_COMPLEXITY_DESC ?? "";
+
+  if (!text && !envPasswordHelperText) return null;
+
+  return (
+    <div className="mt-4 text-sm grid">
+      {text ?
+        <div dangerouslySetInnerHTML={{ __html: text }}></div>
+        :
+        <div className="col-12">
+          <div className="grid">
+            {envPasswordHelperText.split("\\n").map((line, idx) => (
+              <div key={idx} className="col-6 pt-0">
+                <div className="flex gap-2">
+                  <span>•</span>
+                  <span>{line}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      }
+    </div>
+  );
+};

package/src/components/core/common/SolidSaveCustomFilterForm.tsx

@@ -0,0 +1,75 @@
+"use client"
+import { Button } from "primereact/button";
+import { Checkbox } from "primereact/checkbox";
+import { useState } from "react";
+
+interface SolidSaveCustomFilterFormProps {
+    currentSavedFilterData: any,
+    handleSaveFilter: ({ }) => void;
+    closeDialog: any
+}
+
+export const SolidSaveCustomFilterForm: React.FC<SolidSaveCustomFilterFormProps> = ({ currentSavedFilterData, handleSaveFilter, closeDialog }) => {
+    const [formValues, setFormValues] = useState({ name: currentSavedFilterData ? currentSavedFilterData.name : "", isPrivate: currentSavedFilterData ? currentSavedFilterData.isPrivate : false });
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, value, type, checked } = e.target;
+        setFormValues((prev) => ({
+            ...prev,
+            [name]: type === "checkbox" ? checked : value,
+        }));
+    };
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        const formData = {
+            id: currentSavedFilterData ? currentSavedFilterData.id : null,
+            name: formValues.name,
+            isPrivate: formValues.isPrivate === true ? true : "",
+        }
+        handleSaveFilter(formData);
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="flex flex-column gap-2">
+                <label htmlFor="name">Name:</label>
+                <input
+                    type="text"
+                    id="name"
+                    name="name"
+                    placeholder="Filter Title"
+                    className="p-inputtext p-inputtext-sm p-component"
+                    value={formValues.name}
+                    onChange={handleChange}
+                    readOnly={currentSavedFilterData}
+                />
+            </div>
+            <div className="mt-3 flex align-items-center ">
+                <Checkbox
+                    inputId="isPrivate"
+                    name="isPrivate"
+                    checked={formValues.isPrivate}
+                    onChange={(e: any) => handleChange(e)}
+                >
+                </Checkbox>
+                <label htmlFor="isPrivate" className="ml-2">Is Private</label>
+            </div>
+            <div className="mt-3 flex align-items-center gap-2">
+                <Button
+                    type="submit"
+                    label={currentSavedFilterData ? "Update" : "Save"}
+                    size="small"
+                />
+                <Button
+                    type="button"
+                    label="Cancel"
+                    size="small"
+                    outlined
+                    onClick={() => closeDialog()}
+                />
+            </div>
+        </form>
+    );
+};
+

package/src/components/core/common/SolidSearchBox.tsx

@@ -0,0 +1,17 @@
+'use client';
+import { AutoComplete } from "primereact/autocomplete";
+import { useState } from "react";
+
+
+export const SolidSearchBox = ({ viewData }: any) => {
+    const [value, setValue] = useState<string>('');
+    const [items, setItems] = useState<string[]>([]);
+    const search = (event: any) => {
+        // setItems([...Array(10).keys()].map(item => event.query + '-' + item));
+    }
+    return (
+        <div className="card flex justify-content-center">
+            <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />
+        </div>
+    )
+}

package/src/components/core/common/SolidViewLayoutManager.ts

@@ -0,0 +1,421 @@
+import { ERROR_MESSAGES } from "../../../constants/error-messages";
+import { LayoutAttribute, LayoutNode } from "../../../types/solid-core";
+
+/**
+ * SolidViewLayoutManager
+ *
+ * Central manager for mutating Solid View layout trees.
+ * Provides low-level tree operations and domain-specific helpers
+ * for view attributes, form buttons, and row buttons.
+ */
+export class SolidViewLayoutManager {
+    /** Internal mutable layout copy */
+    private layout: LayoutNode;
+
+    /**
+     * Creates a new layout manager instance.
+     * A deep copy of the provided layout is created to avoid side effects.
+     *
+     * @param layout - Original layout definition
+     */
+    constructor(layout: LayoutNode) {
+        // Create a deep copy to prevent modifying the original object
+        this.layout = structuredClone ? structuredClone(layout) : JSON.parse(JSON.stringify(layout));
+    }
+
+    /**
+     * Recursively finds a layout node by its `attrs.name`.
+     * Searches children and formButtons.
+     *
+     * @param node - Node to start searching from
+     * @param name - Name of the node to find
+     * @returns The matching LayoutNode or null
+     */
+    private findNode(node: LayoutNode, name: string): LayoutNode | null {
+        if (node.attrs.name === name) {
+            return node;
+        }
+
+        if (node.children) {
+            for (let child of node.children) {
+                const found = this.findNode(child, name);
+                if (found) return found;
+            }
+        }
+
+        // search in formButtons
+        if (node.attrs?.formButtons) {
+            for (const btn of node.attrs.formButtons) {
+                const found = this.findNode(btn, name);
+                if (found) return found;
+            }
+        }
+
+        return null;
+    }
+
+    private findNodes(node: LayoutNode, name: string): LayoutNode[] {
+        const nodes: LayoutNode[] = [];
+        if (node.attrs.name === name) {
+            nodes.push(node);
+        }
+        if (node.children) {
+            for (let child of node.children) {
+                nodes.push(...this.findNodes(child, name));
+            }
+        }
+        if (node.attrs?.formButtons) {
+            for (const btn of node.attrs.formButtons) {
+                nodes.push(...this.findNodes(btn, name));
+            }
+        }
+        return nodes;
+    }
+
+    /**
+     * Recursively removes a node from the layout tree.
+     *
+     * @param parent - Parent node to search within
+     * @param name - Name of the node to remove
+     * @returns true if the node was removed
+     */
+    private removeNodeRecursive(parent: LayoutNode, name: string): boolean {
+        if (!parent.children) return false;
+
+        const index = parent.children.findIndex((child) => child.attrs.name === name);
+        if (index !== -1) {
+            parent.children.splice(index, 1); // Remove the node
+            return true;
+        }
+
+        return parent.children.some((child) => this.removeNodeRecursive(child, name));
+    }
+
+
+    /**
+      * Returns the managed layout instance.
+      *
+      * @returns Current layout tree
+      */
+    getLayout(): LayoutNode {
+        // return structuredClone ? structuredClone(this.layout) : JSON.parse(JSON.stringify(this.layout));
+        return this.layout;
+    }
+
+    /**
+     * Updates attributes of a specific node.
+     * This method adds or overrides attributes.
+     *
+     * @param name - Node name
+     * @param newAttributes - Attributes to merge
+     * @returns true if node was found and updated
+     */
+    updateNodeAttributes(name: string, newAttributes: Partial<LayoutAttribute>): boolean {
+        const node = this.findNode(this.layout, name);
+        if (node) {
+            node.attrs = { ...node.attrs, ...newAttributes };
+            return true;
+        }
+        return false;
+    }
+
+    /**
+     * Adds a child node to a parent node.
+     *
+     * @param parentName - Name of the parent node
+     * @param newNode - Child layout node to add
+     * @param addChildrenToAll - If true, adds the child node to all nodes with the given parent name
+     * @returns true if parent exists and child was added
+     */
+    addChildNode(parentName: string, newNode: LayoutNode, addChildrenToAll: boolean = false): boolean {
+        console.log(`timepass....`);
+        
+        if (addChildrenToAll) {
+            const parentNodes = this.findNodes(this.layout, parentName);
+            parentNodes.forEach((node) => {
+                if (!node.children) {
+                    node.children = [];
+                }
+                node.children.push(newNode);
+            });
+            return true;
+        }
+        else {
+            const parentNode = this.findNode(this.layout, parentName);
+            if (parentNode) {
+                if (!parentNode.children) {
+                    parentNode.children = [];
+                }
+                parentNode.children.push(newNode);
+                return true;
+            }
+            return false;
+        }
+    }
+
+
+    /**
+     * Removes a node and its subtree.
+     * Root node removal is prevented.
+     *
+     * @param name - Name of the node to remove
+     * @returns true if node was removed
+     */
+    removeNode(name: string): boolean {
+        if (this.layout.attrs.name === name) {
+            console.warn(ERROR_MESSAGES.REMOVE_ROOT_NODE);
+            return false;
+        }
+
+        return this.removeNodeRecursive(this.layout, name);
+    }
+
+    /**
+     * Traverses the entire layout tree and executes a callback for each node.
+     *
+     * @param callback - Function executed for each node
+     * @param node - Starting node (defaults to root)
+     */
+    traverse(callback: (node: LayoutNode) => void, node: LayoutNode = this.layout) {
+        callback(node);
+        if (node.children) {
+            node.children.forEach((child) => this.traverse(callback, child));
+        }
+    }
+
+
+
+    /**
+     * Adds or updates view-level attributes.
+     * Existing attributes are updated, missing attributes are added.
+     *
+     * @param attrs - Attributes to set on the view
+     * @returns true if at least one attribute was applied
+     */
+    setViewAttributes(attrs: Partial<LayoutAttribute>): boolean {
+        const viewNode = this.findNode(this.layout, this.layout.attrs.name);
+        if (!viewNode) return false;
+
+        let changed = false;
+
+        for (const key of Object.keys(attrs) as (keyof LayoutAttribute)[]) {
+            const newValue = attrs[key];
+
+            if (viewNode.attrs[key] !== newValue) {
+                viewNode.attrs[key] = newValue;
+                changed = true;
+            }
+        }
+
+        return changed;
+    }
+
+
+
+    /**
+     * Adds view-level attributes only if they do not already exist.
+     *
+     * @param attrs - Attributes to add
+     * @returns true if at least one attribute was added
+     */
+    addViewAttributes(attrs: Partial<LayoutAttribute>): boolean {
+        const viewNode = this.findNode(this.layout, this.layout.attrs.name);
+        if (!viewNode) return false;
+
+        let added = false;
+
+        for (const key in attrs) {
+            if (!(key in viewNode.attrs)) {
+                // @ts-ignore – layout attributes are dynamic
+                viewNode.attrs[key] = attrs[key];
+                added = true;
+            }
+        }
+
+        return added;
+    }
+
+    /**
+     * Updates existing view-level attributes.
+     * Attributes that do not exist are ignored.
+     *
+     * @param attrs - Attributes to update
+     * @returns true if at least one attribute was updated
+     */
+    updateViewAttributes(attrs: Partial<LayoutAttribute>): boolean {
+        const viewNode = this.findNode(this.layout, this.layout.attrs.name);
+        if (!viewNode) return false;
+
+        let updated = false;
+
+        for (const key in attrs) {
+            if (key in viewNode.attrs) {
+                // @ts-ignore
+                viewNode.attrs[key] = attrs[key];
+                updated = true;
+            }
+        }
+
+        return updated;
+    }
+
+
+    /**
+     * Removes specific view-level attributes.
+     *
+     * @param keys - Attribute keys to remove
+     * @returns true if at least one attribute was removed
+     */
+    removeViewAttributes(keys: (keyof LayoutAttribute)[]): boolean {
+        const viewNode = this.findNode(this.layout, this.layout.attrs.name);
+        if (!viewNode) return false;
+
+        let removed = false;
+
+        for (const key of keys) {
+            if (key in viewNode.attrs) {
+                // @ts-ignore
+                delete viewNode.attrs[key];
+                removed = true;
+            }
+        }
+
+        return removed;
+    }
+
+    /**
+     * Adds a new form-level button.
+     *
+     * @param button - Button layout node
+     */
+    addFormButton(button: LayoutNode): void {
+        this.layout.attrs.formButtons ??= [];
+        this.layout.attrs.formButtons.push(button);
+    }
+
+    /**
+     * Updates a form button identified by its action.
+     *
+     * @param action - Button action identifier
+     * @param attrs - Attributes to update
+     * @returns true if button was found and updated
+     */
+    updateFormButtonByAction(
+        action: string,
+        attrs: Partial<LayoutAttribute>
+    ): boolean {
+        const button = this.layout.attrs.formButtons?.find(
+            (b: any) => b.attrs.action === action
+        );
+
+        if (!button) return false;
+
+        button.attrs = { ...button.attrs, ...attrs };
+        return true;
+    }
+
+    /**
+     * Removes a form button by its action.
+     *
+     * @param action - Button action identifier
+     * @returns true if button was removed
+     */
+    removeFormButtonByAction(action: string): boolean {
+        if (!this.layout.attrs.formButtons) return false;
+
+        const initialLength = this.layout.attrs.formButtons.length;
+
+        this.layout.attrs.formButtons = this.layout.attrs.formButtons.filter(
+            (b: any) => b.attrs.action !== action
+        );
+
+        return this.layout.attrs.formButtons.length !== initialLength;
+    }
+
+    /**
+     * Disables a form-level button.
+     *
+     * @param action - Button action identifier
+     * @returns true if button was disabled
+     */
+    disableFormButton(action: string): boolean {
+        return this.updateFormButtonByAction(action, { disabled: true });
+    }
+
+
+    /**
+     * Hides a form-level button.
+     *
+     * @param action - Button action identifier
+     * @returns true if button was hidden
+     */
+    hideFormButton(action: string): boolean {
+        return this.updateFormButtonByAction(action, { visible: false });
+    }
+
+
+    /**
+     * Adds a row-level button to a field.
+     *
+     * @param fieldName - Target field name
+     * @param button - Button definition
+     * @returns true if field exists and button was added
+     */
+    addRowButtonToField(fieldName: string, button: LayoutNode): boolean {
+        const fieldNode = this.findNode(this.layout, fieldName);
+        if (!fieldNode) return false;
+
+        fieldNode.attrs.rowButtons ??= [];
+        fieldNode.attrs.rowButtons.push(button);
+        return true;
+    }
+
+    /**
+     * Updates a row-level button for a field.
+     *
+     * @param fieldName - Field name
+     * @param action - Button action identifier
+     * @param attrs - Attributes to update
+     * @returns true if button was updated
+     */
+    updateRowButtonByAction(
+        fieldName: string,
+        action: string,
+        attrs: Partial<LayoutAttribute>
+    ): boolean {
+        const fieldNode = this.findNode(this.layout, fieldName);
+        if (!fieldNode?.attrs?.rowButtons) return false;
+
+        const button = fieldNode.attrs.rowButtons.find(
+            (b: any) => b.action === action
+        );
+
+        if (!button) return false;
+
+        Object.assign(button, attrs);
+        return true;
+    }
+
+
+    /**
+     * Removes a row-level button from a field.
+     *
+     * @param fieldName - Field name
+     * @param action - Button action identifier
+     * @returns true if button was removed
+     */
+    removeRowButtonByAction(fieldName: string, action: string): boolean {
+        const fieldNode = this.findNode(this.layout, fieldName);
+        if (!fieldNode?.attrs?.rowButtons) return false;
+
+        const initialLength = fieldNode.attrs.rowButtons.length;
+
+        fieldNode.attrs.rowButtons = fieldNode.attrs.rowButtons.filter(
+            (b: any) => b.action !== action
+        );
+
+        return fieldNode.attrs.rowButtons.length !== initialLength;
+    }
+
+
+}