@solidstarters/solid-core-ui 0.1.26

package/src/components/common/FilterComponent.tsx

@@ -0,0 +1,427 @@
+// @ts-nocheck
+import { Calendar } from 'primereact/calendar';
+import { Dropdown } from 'primereact/dropdown';
+import { InputNumber } from 'primereact/inputnumber';
+import { InputText } from 'primereact/inputtext';
+import { Tooltip } from 'primereact/tooltip';
+import React, { useState } from 'react';
+
+enum FilterRuleType {
+  RULE = 'rule',
+  RULE_GROUP = 'rule_group'
+}
+
+enum FilterOperator {
+  AND = 'and',
+  OR = 'or'
+}
+
+enum FilterMatchMode {
+  STARTS_WITH = 'startsWith',
+  CONTAINS = 'contains',
+  EQUALS = 'equals',
+  GREATER_THAN = 'gt',
+  LESS_THAN = 'lt',
+}
+
+interface FilterRule {
+  id: number;
+  type: FilterRuleType;
+  matchOperator?: FilterOperator;
+  fieldName?: string;
+  matchMode?: FilterMatchMode;
+  value?: any;
+  parentRule: number | null;
+  children?: FilterRule[];
+}
+
+interface Field {
+  name: string;
+  type: 'string' | 'number' | 'date';
+}
+
+const fields: Field[] = [
+  { name: 'name', type: 'string' },
+  { name: 'dob', type: 'date' },
+  { name: 'lastName', type: 'string' },
+  { name: 'amount', type: 'number' }
+];
+
+const operatorOptions = {
+  string: [FilterMatchMode.CONTAINS, FilterMatchMode.EQUALS],
+  date: [FilterMatchMode.EQUALS, FilterMatchMode.GREATER_THAN, FilterMatchMode.LESS_THAN],
+  number: [FilterMatchMode.GREATER_THAN, FilterMatchMode.LESS_THAN]
+};
+
+const getRandomInt = (min, max) => {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+// Component to render a single filter rule
+const FilterRuleComponent = ({ rule, onChange, onAddRule, onAddGroup, onDelete, level }) => {
+  const applicableOperators = rule.fieldName ? operatorOptions[fields.find(f => f.name === rule.fieldName)?.type].map(e => { return { name: e } }) : [];
+  const applicableInputField = rule.fieldName ? fields.find(f => f.name === rule.fieldName)?.type : "";
+
+  const [fieldName, setFieldName] = useState({ name: rule.fieldName });
+  const [matchMode, setMatchMode] = useState({ name: rule.matchMode });
+
+console.log("fields");
+console.log(fields);
+
+
+  return (
+    // <div style={{ marginLeft: (level - 1) * 10 + 'px' }} className="filter-rule">
+    <div style={{ marginLeft: 5 + 'px' }} className="filter-rule">
+      <div className="filter-individual-rule">
+        <div className='filter-individual-rule-form'>
+          <div className="grid align-items-center">
+            <div className="col-10">
+              <div className="grid">
+                <div className="col-4">
+                  {/* <select
+                    value={rule.fieldName || ''}
+                    onChange={e => onChange(rule.id, 'fieldName', e.target.value)}
+                  >
+                    <option value="" disabled>Select Field</option>
+                    {fields.map(field => (
+                      <option key={field.name} value={field.name}>{field.name}</option>
+                    ))}
+                  </select> */}
+                  <Dropdown
+                    value={fieldName}
+                    onChange={e => {
+                      console.log("e.target");
+                      console.log(e.target);
+                      
+                      setFieldName({ name: e.value.name , type: e.value.type})
+                      onChange(rule.id, 'fieldName', e.value.name)
+                    }}
+                    options={fields}
+                    optionLabel='name'
+                    optionValue='name'
+                    placeholder="Select Field" className="w-full md:w-14rem" />
+
+                </div>
+                <div className="col-4">
+                  {/* <select
+                    value={rule.matchMode || ''}
+                    onChange={e => onChange(rule.id, 'matchMode', e.target.value)}
+                    disabled={!rule.fieldName}
+                  >
+                    <option value="" disabled>Select Operator</option>
+                    {applicableOperators.map(op => (
+                      <option key={op} value={op}>{op}</option>
+                    ))}
+                  </select> */}
+                  <Dropdown
+                    value={matchMode}
+                    onChange={e => {
+                      setMatchMode({ name: e.value.name })
+                      onChange(rule.id, 'matchMode', e.value.name)
+                    }}
+                    disabled={!rule.fieldName}
+                    options={applicableOperators}
+                    optionLabel='name'
+                    optionValue='name'
+                    placeholder="Select Field" className="w-full md:w-14rem" />
+
+                </div>
+                <div className="col-4">
+                  {applicableInputField === 'number' && (
+                    // <input
+                    //   type="number"
+                    //   value={rule.value || ''}
+                    //   onChange={e => onChange(rule.id, 'value', e.target.value)}
+                    //   placeholder="Value"
+                    // />
+                    <InputNumber
+                      value={rule.value || ''}
+                      placeholder="Value"
+                      onChange={(e) => onChange(rule.id, 'value', e.value)}
+                    />
+                  )
+                  }
+                  {applicableInputField === 'string' && (
+                    <InputText
+                      value={rule.value || ''}
+                      placeholder="Value"
+                      onChange={(e) => onChange(rule.id, 'value', e.target.value)}
+                    />
+                  )
+                  }
+                  {applicableInputField === 'date' && (
+                    // <InputText
+                    //   value={rule.value || ''}
+                    //   placeholder="Value"
+                    //   onChange={(e) => onChange(rule.id, 'value', e.target.value)}
+                    // />
+
+                    <Calendar value={rule.value || ''} onChange={(e) => onChange(rule.id, 'value', new Date(e.value))}  dateFormat="dd/mm/yy" showIcon />
+                  )
+                  }
+                </div>
+
+
+              </div>
+            </div>
+            <div className="col-2 flex justify-content-end">
+              <button onClick={() => onAddRule(rule.parentRule)}>
+                <div className="card flex justify-content-center">
+                  {/* <Tooltip target=".custom-target-icon" /> */}
+
+                  <i className="custom-target-icon pi pi-plus-circle p-text-secondary p-overlay-badge"
+                    data-pr-tooltip="Add Rule"
+                    data-pr-position="right"
+                    data-pr-at="right+5 top"
+                    data-pr-my="left center-2"
+                    style={{ fontSize: '1.2rem', cursor: 'pointer' }}>
+                  </i>
+                </div>
+
+
+              </button>
+              <button onClick={() => onAddGroup(rule.id)}>
+                <div className="card flex justify-content-center">
+                  {/* <Tooltip target=".custom-target-icon" /> */}
+
+                  <i className="custom-target-icon pi pi-sitemap p-text-secondary p-overlay-badge"
+                    data-pr-tooltip="Add Group"
+                    data-pr-position="right"
+                    data-pr-at="right+5 top"
+                    data-pr-my="left center-2"
+                    style={{ fontSize: '1.2rem', cursor: 'pointer' }}>
+                  </i>
+                </div>
+
+              </button>
+
+              <button onClick={() => onDelete(rule.id)}>
+                <div className="card flex justify-content-center">
+                  {/* <Tooltip target=".custom-target-icon" /> */}
+
+                  <i className="custom-target-icon pi pi-trash p-text-secondary p-overlay-badge"
+                    data-pr-tooltip="Delete Rule"
+                    data-pr-position="right"
+                    data-pr-at="right+5 top"
+                    data-pr-my="left center-2"
+                    style={{ fontSize: '1.2rem', cursor: 'pointer' }}>
+                  </i>
+                </div>
+              </button>
+
+            </div>
+
+          </div>
+
+
+
+
+
+        </div>
+
+      </div>
+
+      <div className="nested-rules">
+        {rule.children && rule.children.map(nestedRule => (
+          nestedRule.type === FilterRuleType.RULE
+            ? <FilterRuleComponent key={nestedRule.id} rule={nestedRule} onChange={onChange} onAddRule={onAddRule} onAddGroup={onAddGroup} onDelete={onDelete} level={level + 1} />
+            : <FilterGroupComponent key={nestedRule.id} group={nestedRule} onChange={onChange} onAddRule={onAddRule} onAddGroup={onAddGroup} onDelete={onDelete} level={level + 1} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+// Component to render a group of filter rules
+const FilterGroupComponent = ({ group, onChange, onAddRule, onAddGroup, onDelete, level }) => {
+  return (
+    <div style={{ marginLeft: 5 + 'px' }} className="filter-group">
+      {/* <div style={{ marginLeft: (level - 1) * 10 + 'px' }} className="filter-group"> */}
+
+      <div className='flex justify-content-between align-items-center'>
+        <p> Match
+          <select className='filter-select'
+            value={group.matchOperator}
+            onChange={e => onChange(group.id, 'matchOperator', e.target.value)}
+          >
+            <option value={FilterOperator.AND}>AND</option>
+            <option value={FilterOperator.OR}>OR</option>
+          </select>
+          of the following rules:</p>
+
+        {/* <button onClick={() => onAddRule(group.id)}>Add Rule to Group</button> */}
+        {/* <button onClick={() => onAddGroup(group.id)}>Add Group to Group</button> */}
+
+        {/* Add Delete Button for non-root groups */}
+        {level > 0 && <button onClick={() => onDelete(group.id)}>
+          <div className="card flex justify-content-center">
+            <Tooltip target=".custom-target-icon" />
+
+            <i className="custom-target-icon pi pi-trash p-text-secondary p-overlay-badge"
+              data-pr-tooltip="Delete Group"
+              data-pr-position="right"
+              data-pr-at="right+5 top"
+              data-pr-my="left center-2"
+              style={{ fontSize: '1.2rem', cursor: 'pointer' }}>
+            </i>
+          </div></button>}
+      </div>
+      {group.children && group.children.map(rule => (
+        rule.type === FilterRuleType.RULE
+          ? <FilterRuleComponent key={rule.id} rule={rule} onChange={onChange} onAddRule={onAddRule} onAddGroup={onAddGroup} onDelete={onDelete} level={level + 1} />
+          : <FilterGroupComponent key={rule.id} group={rule} onChange={onChange} onAddRule={onAddRule} onAddGroup={onAddGroup} onDelete={onDelete} level={level + 1} />
+      ))}
+    </div>
+  );
+};
+
+// Main Filter component
+const FilterComponent = () => {
+  const initialState: FilterRule[] = [
+    {
+      id: 1,
+      type: FilterRuleType.RULE_GROUP,
+      matchOperator: FilterOperator.OR,
+      parentRule: null,
+      children: [
+        {
+          id: Date.now() + getRandomInt(1, 500),
+          type: FilterRuleType.RULE,
+          fieldName: null,
+          matchMode: null,
+          value: null,
+          parentRule: 1,
+          children: []
+        }
+      ]
+    }
+  ];
+
+  const [filterRules, setFilterRules] = useState<FilterRule[]>(initialState);
+  const [printedState, setPrintedState] = useState<string>('');
+
+  const addChild = (rules, parentId, newChild) => {
+    return rules.map(rule => {
+      if (rule.id === parentId) {
+        return {
+          ...rule,
+          children: [...(rule.children || []), newChild]
+        };
+      } else if (rule.children) {
+        return {
+          ...rule,
+          children: addChild(rule.children, parentId, newChild)
+        };
+      }
+      return rule;
+    });
+  };
+
+  const handleChange = (id, key, value) => {
+    const updateRuleRecursively = (rules) => {
+      return rules.map(rule => {
+        if (rule.id === id) {
+          return { ...rule, [key]: value };
+        } else if (rule.children) {
+          return {
+            ...rule,
+            children: updateRuleRecursively(rule.children)
+          };
+        }
+        return rule;
+      });
+    };
+    setFilterRules(prev => updateRuleRecursively(prev));
+  };
+
+  const handleAddRule = (parentGroupId) => {
+    const newRule: FilterRule = {
+      id: Date.now(),
+      type: FilterRuleType.RULE,
+      fieldName: null,
+      matchMode: null,
+      value: null,
+      parentRule: parentGroupId,
+      children: []
+    };
+    setFilterRules(prev => addChild(prev, parentGroupId, newRule));
+  };
+
+  const handleAddGroup = (parentRuleId) => {
+    const newGroupId = Date.now();
+    const newGroup: FilterRule = {
+      id: newGroupId,
+      type: FilterRuleType.RULE_GROUP,
+      matchOperator: FilterOperator.AND,
+      parentRule: parentRuleId,
+      children: [
+        {
+          id: Date.now() + getRandomInt(1, 500),
+          type: FilterRuleType.RULE,
+          fieldName: null,
+          matchMode: null,
+          value: null,
+          parentRule: newGroupId,
+          children: []
+        },
+        {
+          id: Date.now() + getRandomInt(1, 500),
+          type: FilterRuleType.RULE,
+          fieldName: null,
+          matchMode: null,
+          value: null,
+          parentRule: newGroupId,
+          children: []
+        }
+      ]
+    };
+    setFilterRules(prev => addChild(prev, parentRuleId, newGroup));
+  };
+
+  const handleDeleteRule = (id) => {
+    const deleteRecursively = (rules, id) => {
+      return rules.filter(rule => rule.id !== id).map(rule => {
+        if (rule.children) {
+          return {
+            ...rule,
+            children: deleteRecursively(rule.children, id)
+          };
+        }
+        return rule;
+      });
+    };
+    setFilterRules(prev => deleteRecursively(prev, id));
+  };
+
+  const handlePrintState = () => {
+    setPrintedState(JSON.stringify(filterRules, null, 2)); // Pretty format the state
+  };
+
+  return (
+    <div className=''>
+      <div className="filter-builder">
+
+        {filterRules.map(rule => (
+          <FilterGroupComponent
+            key={rule.id}
+            group={rule}
+            onChange={handleChange}
+            onAddRule={handleAddRule}
+            onAddGroup={handleAddGroup}
+            onDelete={handleDeleteRule}
+            level={0} // Top-level group
+          />
+        ))}
+
+      </div>
+
+      <div>
+        <button onClick={handlePrintState}>Print State</button>
+        <br></br>
+        <textarea value={printedState} readOnly rows={20} cols={80} style={{ marginTop: '20px' }} />
+      </div>
+    </div>
+  );
+};
+
+export default FilterComponent;

package/src/components/common/HeaderDynamicTitles.tsx

@@ -0,0 +1,11 @@
+import { usePathname } from 'next/navigation';
+export const HeaderDynamicTitles = () => {
+    const path = usePathname();
+    const getHeading = path.split('/').slice(-2, -1)[0].replace(/-/g, ' ').replace(/\b\w/g, char => char.toUpperCase());
+
+    return (
+        <div className='text-xl font-bold'>
+            All {getHeading}s
+        </div>
+    )
+}

package/src/components/common/MarkdownViewer.tsx

@@ -0,0 +1,14 @@
+import { useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+
+const MarkdownViewer = ({ data }: any) => {
+  const [markdown, setMarkdown] = useState(data);
+
+  return (
+    <div>
+      <ReactMarkdown className="markdown-view">{markdown}</ReactMarkdown>
+    </div>
+  );
+};
+
+export default MarkdownViewer;

package/src/components/common/MultipleSelectAutoCompleteField.tsx

@@ -0,0 +1,61 @@
+import { AutoComplete } from "primereact/autocomplete";
+import { useEffect, useState } from "react";
+
+
+
+// UsesCases
+// Suppose you have a moduelId field In create Dto then you need to creaate a module key in firmik and use that to store the autocomplete state and along with it update the moduleId  Field with id
+// In case of relationType the Id field will always will be id   
+// Else the value will be whatever valuekey use passed 
+
+export const MultipleSelectAutoCompleteField = ({ formik, isFormFieldValid, relationField, fieldName, fieldNameId, labelKey, valueKey, searchData, existingData, additionalAction }: any) => {
+
+    const [selectedItem, setSelectedItem] = useState(existingData && existingData.length > 0 && existingData.map((i: any) => ({ label: i, value: i })));
+    const [filteredItem, setFilteredItem] = useState([]);
+    useEffect(() => {
+        // if (existingData) {
+        setSelectedItem(existingData && existingData.length > 0 && existingData.map((i: any) => ({ label: i, value: i })))
+        // formik.setFieldValue(fieldName, existingData);
+
+        // }
+    }, [existingData])
+    const searchItems = async (event: any) => {
+        const data = await searchData(event);
+        setFilteredItem(data);
+
+    };
+
+
+
+
+    return (
+
+        <AutoComplete
+            multiple
+            value={selectedItem}
+            suggestions={filteredItem}
+            invalid={isFormFieldValid(formik, fieldName)}
+            completeMethod={searchItems}
+            virtualScrollerOptions={{ itemSize: 38 }}
+            className="w-full"
+            // style={{
+            //     maxHeight: 39.67
+            // }}
+            field={labelKey}
+            dropdown
+            onChange={(e) => {
+                setSelectedItem(e.value);
+                if (additionalAction) {
+                    additionalAction(e);
+                }
+                if (relationField === true) {
+                    formik.setFieldValue(fieldName, e.value);
+                    formik.setFieldValue(fieldNameId, e.value.id);
+                } else {
+                    const mediaTypes = e.value.map((i: any) => i[valueKey]);
+                    formik.setFieldValue(fieldName, mediaTypes);
+                }
+            }}
+        />
+    )
+}

package/src/components/common/SingleSelectAutoCompleteField.tsx

@@ -0,0 +1,64 @@
+import { AutoComplete } from "primereact/autocomplete";
+import { useEffect, useState } from "react";
+
+
+
+// UsesCases
+// Suppose you have a moduelId field In create Dto then you need to creaate a module key in firmik and use that to store the autocomplete state and along with it update the moduleId  Field with id
+// In case of relationType the Id field will always will be id   
+// Else the value will be whatever valuekey use passed 
+
+export const SingleSelectAutoCompleteField = ({ disabled, formik, isFormFieldValid, relationField, fieldName, fieldNameId, labelKey, valueKey, searchData, existingData, additionalAction }: any) => {
+
+    const [selectedItem, setSelectedItem] = useState(existingData);
+    const [filteredItem, setFilteredItem] = useState([]);
+    useEffect(() => {
+        // if (existingData) {
+        setSelectedItem(existingData)
+        // formik.setFieldValue(fieldName, existingData);
+
+        // }
+    }, [existingData])
+    const searchItems = async (event: any) => {
+        const data = await searchData(event);
+        setFilteredItem(data);
+
+    };    
+
+    return (
+        <>
+            <AutoComplete
+                disabled={disabled ? disabled : false}
+                value={selectedItem}
+                suggestions={filteredItem}
+                invalid={isFormFieldValid(formik, fieldName)}
+                completeMethod={searchItems}
+                virtualScrollerOptions={{ itemSize: 38 }}
+                className="w-full small-input"
+                // style={{
+                //     maxHeight: 39.67
+                // }}
+                field={labelKey}
+                dropdown
+                onChange={(e) => {
+                    // formik.handleChange(e)
+                    setSelectedItem(e.value);
+                    if (additionalAction) {
+                        additionalAction(e);
+                    }
+                    if (relationField === true) {
+                        formik.setFieldValue(fieldName, e.value);
+                        formik.setFieldValue(fieldNameId, e.value.id);
+                    } else {
+                        formik.setFieldValue(fieldName, e.value[valueKey]);
+
+                    }
+
+                }}
+            />
+
+        </>
+
+
+    )
+}

package/src/components/common/SocialMediaLogin.tsx

@@ -0,0 +1,44 @@
+import { Button } from 'primereact/button'
+
+export const SocialMediaLogin = () => {
+    return (
+        <div className="flex justify-content-center mt-4 gap-3">
+            <Button icon={() => (
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                    <g clipPath="url(#clip0_3520_3825)">
+                        <path d="M23.0938 9.91355L13.3044 9.91309C12.8721 9.91309 12.5217 10.2634 12.5217 10.6957V13.823C12.5217 14.2552 12.8721 14.6056 13.3044 14.6056H18.8171C18.2135 16.1722 17.0868 17.4842 15.6493 18.3178L18 22.387C21.7707 20.2062 24 16.3799 24 12.0965C24 11.4866 23.955 11.0506 23.8651 10.5597C23.7968 10.1867 23.4729 9.91355 23.0938 9.91355Z" fill="#167EE6" />
+                        <path d="M12 19.3047C9.30218 19.3047 6.94699 17.8306 5.68207 15.6494L1.61304 17.9948C3.68374 21.5836 7.56283 24.0003 12 24.0003C14.1768 24.0003 16.2307 23.4143 18 22.3929V22.3873L15.6494 18.3181C14.5742 18.9417 13.3299 19.3047 12 19.3047Z" fill="#12B347" />
+                        <path d="M18 22.3922V22.3866L15.6494 18.3174C14.5741 18.941 13.33 19.304 12 19.304V23.9996C14.1767 23.9996 16.2308 23.4135 18 22.3922Z" fill="#0F993E" />
+                        <path d="M4.69566 12.0003C4.69566 10.6705 5.05856 9.42637 5.68205 8.3512L1.61302 6.00586C0.586031 7.76962 0 9.81797 0 12.0003C0 14.1826 0.586031 16.2309 1.61302 17.9947L5.68205 15.6494C5.05856 14.5742 4.69566 13.3301 4.69566 12.0003Z" fill="#FFD500" />
+                        <path d="M12 4.69566C13.7593 4.69566 15.3753 5.32078 16.6375 6.36061C16.9488 6.61711 17.4014 6.59859 17.6867 6.31336L19.9024 4.09758C20.2261 3.77395 20.203 3.24422 19.8573 2.94431C17.7425 1.10967 14.991 0 12 0C7.56283 0 3.68374 2.41673 1.61304 6.00558L5.68207 8.35092C6.94699 6.16969 9.30218 4.69566 12 4.69566Z" fill="#FF4B26" />
+                        <path d="M16.6374 6.36061C16.9488 6.61711 17.4015 6.59859 17.6866 6.31336L19.9024 4.09758C20.226 3.77395 20.2029 3.24422 19.8573 2.94431C17.7425 1.10963 14.991 0 12 0V4.69566C13.7592 4.69566 15.3752 5.32078 16.6374 6.36061Z" fill="#D93F21" />
+                    </g>
+                    <defs>
+                        <clipPath id="clip0_3520_3825">
+                            <rect width="24" height="24" fill="white" />
+                        </clipPath>
+                    </defs>
+                </svg>
+            )}
+                outlined
+                severity="secondary"
+            >
+            </Button>
+            <Button icon={() => (
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xlinkHref="http://www.w3.org/1999/xlink">
+                    <rect width="24" height="24" fill="url(#pattern0_3520_3835)" />
+                    <defs>
+                        <pattern id="pattern0_3520_3835" patternContentUnits="objectBoundingBox" width="1" height="1">
+                            <use xlinkHref="#image0_3520_3835" transform="scale(0.00195312)" />
+                        </pattern>
+                        <image id="image0_3520_3835" width="512" height="512" xlinkHref="data:image/png;base64,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" />
+                    </defs>
+                </svg>
+            )}
+                outlined
+                severity="secondary"
+            >
+            </Button>
+        </div>
+    )
+}

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

@@ -0,0 +1,24 @@
+import { Dialog } from "primereact/dialog";
+import { useState } from "react";
+
+
+export const SolidConfigureLayoutElement = ({}: any) => {
+
+    const [visible, setVisible] = useState<boolean>(false);
+
+    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">
+                    Lorem 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>
+            </Dialog>
+        </div>
+    )
+
+}