@solidstarters/solid-core-ui 0.1.26

package/src/components/tables/DemoData.tsx

@@ -0,0 +1,317 @@
+export const DemoService = {
+    getDemosData() {
+        return [
+            {
+                id: '1000',
+                name: 'EMS for RH, T and DP in Clean Room Area',
+                image: 'bamboo-watch.jpg',
+                date: "2024-07-03",
+                price: 17500,
+                quantity: 1,
+                orderStatus: 'Delivered',
+                slug: 'form-view'
+            },
+            {
+                id: '1001',
+                name: 'EMS for RH, T and DP in Clean Room Area',
+                image: 'bamboo-watch.jpg',
+                date: "2024-07-03",
+                price: 17500,
+                quantity: 1,
+                orderStatus: 'Delivered',
+                slug: 'form-view'
+            },
+            {
+                id: '1002',
+                name: 'EMS for RH, T and DP in Clean Room Area',
+                image: 'bamboo-watch.jpg',
+                date: "2024-07-03",
+                price: 17500,
+                quantity: 1,
+                orderStatus: 'On The Way',
+                slug: 'form-view'
+            },
+            {
+                id: '1003',
+                name: 'EMS for RH, T and DP in Clean Room Area',
+                image: 'bamboo-watch.jpg',
+                date: "2024-07-03",
+                price: 17500,
+                quantity: 1,
+                orderStatus: 'Delivered',
+                slug: 'form-view'
+            },
+            {
+                id: '1004',
+                name: 'EMS for RH, T and DP in Clean Room Area',
+                image: 'bamboo-watch.jpg',
+                date: "2024-07-03",
+                price: 17500,
+                quantity: 1,
+                orderStatus: 'Delivered',
+                slug: 'form-view'
+            },
+            {
+                id: '1005',
+                name: 'EMS for RH, T and DP in Clean Room Area',
+                image: 'bamboo-watch.jpg',
+                date: "2024-07-03",
+                price: 17500,
+                quantity: 1,
+                orderStatus: 'Cancelled',
+                slug: 'form-view'
+            },
+            {
+                id: '1006',
+                name: 'EMS for RH, T and DP in Clean Room Area',
+                image: 'bamboo-watch.jpg',
+                date: "2024-07-03",
+                price: 17500,
+                quantity: 1,
+                orderStatus: 'Returned',
+                slug: 'form-view'
+            },
+            {
+                id: '1007',
+                name: 'EMS for RH, T and DP in Clean Room Area',
+                image: 'bamboo-watch.jpg',
+                date: "2024-07-03",
+                price: 17500,
+                quantity: 1,
+                orderStatus: 'Delivered',
+                slug: 'form-view'
+            },
+            {
+                id: '1008',
+                name: 'EMS for RH, T and DP in Clean Room Area',
+                image: 'bamboo-watch.jpg',
+                date: "2024-07-03",
+                price: 17500,
+                quantity: 1,
+                orderStatus: 'Returned',
+                slug: 'form-view'
+            },
+            {
+                id: '1009',
+                name: 'EMS for RH, T and DP in Clean Room Area',
+                image: 'bamboo-watch.jpg',
+                date: "2024-07-03",
+                price: 17500,
+                quantity: 1,
+                orderStatus: 'Delivered',
+                slug: 'form-view'
+            },
+            {
+                id: '1010',
+                name: 'EMS for RH, T and DP in Clean Room Area',
+                image: 'bamboo-watch.jpg',
+                date: "2024-07-03",
+                price: 17500,
+                quantity: 1,
+                orderStatus: 'Cancelled',
+                slug: 'form-view'
+            },
+            {
+                id: '1011',
+                name: 'EMS for RH, T and DP in Clean Room Area',
+                image: 'bamboo-watch.jpg',
+                date: "2024-07-03",
+                price: 17500,
+                quantity: 1,
+                orderStatus: 'Delivered',
+                slug: 'form-view'
+            },
+            {
+                id: '1012',
+                name: 'EMS for RH, T and DP in Clean Room Area',
+                image: 'bamboo-watch.jpg',
+                date: "2024-07-03",
+                price: 17500,
+                quantity: 1,
+                orderStatus: 'Delivered',
+                slug: 'form-view'
+            },
+            {
+                id: '1013',
+                name: 'EMS for RH, T and DP in Clean Room Area',
+                image: 'bamboo-watch.jpg',
+                date: "2024-07-03",
+                price: 17500,
+                quantity: 1,
+                orderStatus: 'Cancelled',
+                slug: 'form-view'
+            },
+            {
+                id: '1014',
+                name: 'EMS for RH, T and DP in Clean Room Area',
+                image: 'bamboo-watch.jpg',
+                date: "2024-07-03",
+                price: 17500,
+                quantity: 1,
+                orderStatus: 'Returned',
+                slug: 'form-view'
+            },
+            {
+                id: '1015',
+                name: 'EMS for RH, T and DP in Clean Room Area',
+                image: 'bamboo-watch.jpg',
+                date: "2024-07-03",
+                price: 17500,
+                quantity: 1,
+                orderStatus: 'Delivered',
+                slug: 'form-view'
+            },
+            {
+                id: '1016',
+                name: 'EMS for RH, T and DP in Clean Room Area',
+                image: 'bamboo-watch.jpg',
+                date: "2024-07-03",
+                price: 17500,
+                quantity: 1,
+                orderStatus: 'Delivered',
+                slug: 'form-view'
+            },
+            {
+                id: '1017',
+                name: 'EMS for RH, T and DP in Clean Room Area',
+                image: 'bamboo-watch.jpg',
+                date: "2024-07-03",
+                price: 17500,
+                quantity: 1,
+                orderStatus: 'Delivered',
+                slug: 'form-view'
+            },
+            {
+                id: '1018',
+                name: 'EMS for RH, T and DP in Clean Room Area',
+                image: 'bamboo-watch.jpg',
+                date: "2024-07-03",
+                price: 17500,
+                quantity: 1,
+                orderStatus: 'Delivered',
+                slug: 'form-view'
+            },
+            {
+                id: '1019',
+                name: 'EMS for RH, T and DP in Clean Room Area',
+                image: 'bamboo-watch.jpg',
+                date: "2024-07-03",
+                price: 17500,
+                quantity: 1,
+                orderStatus: 'Delivered',
+                slug: 'form-view'
+            },
+            {
+                id: '1020',
+                name: 'EMS for RH, T and DP in Clean Room Area',
+                image: 'bamboo-watch.jpg',
+                date: "2024-07-03",
+                price: 17500,
+                quantity: 1,
+                orderStatus: 'Cancelled',
+                slug: 'form-view'
+            },
+            {
+                id: '1021',
+                name: 'EMS for RH, T and DP in Clean Room Area',
+                image: 'bamboo-watch.jpg',
+                date: "2024-07-03",
+                price: 17500,
+                quantity: 1,
+                orderStatus: 'Returned',
+                slug: 'form-view'
+            },
+            {
+                id: '1022',
+                name: 'EMS for RH, T and DP in Clean Room Area',
+                image: 'bamboo-watch.jpg',
+                date: "2024-07-03",
+                price: 17500,
+                quantity: 1,
+                orderStatus: 'Delivered',
+                slug: 'form-view'
+            },
+            {
+                id: '1023',
+                name: 'EMS for RH, T and DP in Clean Room Area',
+                image: 'bamboo-watch.jpg',
+                date: "2024-07-03",
+                price: 17500,
+                quantity: 1,
+                orderStatus: 'Returned',
+                slug: 'form-view'
+            },
+            {
+                id: '1024',
+                name: 'EMS for RH, T and DP in Clean Room Area',
+                image: 'bamboo-watch.jpg',
+                date: "2024-07-03",
+                price: 17500,
+                quantity: 1,
+                orderStatus: 'Delivered',
+                slug: 'form-view'
+            },
+            {
+                id: '1025',
+                name: 'EMS for RH, T and DP in Clean Room Area',
+                image: 'bamboo-watch.jpg',
+                date: "2024-07-03",
+                price: 17500,
+                quantity: 1,
+                orderStatus: 'Delivered',
+                slug: 'form-view'
+            },
+            {
+                id: '1026',
+                name: 'EMS for RH, T and DP in Clean Room Area',
+                image: 'bamboo-watch.jpg',
+                date: "2024-07-03",
+                price: 17500,
+                quantity: 1,
+                orderStatus: 'Returned',
+                slug: 'form-view'
+            },
+            {
+                id: '1027',
+                name: 'EMS for RH, T and DP in Clean Room Area',
+                image: 'bamboo-watch.jpg',
+                date: "2024-07-03",
+                price: 17500,
+                quantity: 1,
+                orderStatus: 'Delivered',
+                slug: 'form-view'
+            },
+            {
+                id: '1028',
+                name: 'EMS for RH, T and DP in Clean Room Area',
+                image: 'bamboo-watch.jpg',
+                date: "2024-07-03",
+                price: 17500,
+                quantity: 1,
+                orderStatus: 'Delivered',
+                slug: 'form-view'
+            },
+            {
+                id: '1029',
+                name: 'EMS for RH, T and DP in Clean Room Area',
+                image: 'bamboo-watch.jpg',
+                date: "2024-07-03",
+                price: 17500,
+                quantity: 1,
+                orderStatus: 'Delivered',
+                slug: 'form-view'
+            }
+        ];
+    },
+    // getDemosMini() {
+    //     return Promise.resolve(this.getDemosData().slice(0, 5));
+    // },
+
+    // getDemosSmall() {
+    //     return Promise.resolve(this.getDemosData().slice(0, 10));
+    // },
+
+    getDemos() {
+        return Promise.resolve(this.getDemosData());
+    },
+};

package/src/components/tables/DynamicTable.tsx

@@ -0,0 +1,56 @@
+"use client"
+import Link from 'next/link';
+import { Button } from 'primereact/button';
+import { Column } from 'primereact/column';
+import { DataTable } from 'primereact/datatable';
+import { useEffect, useState } from 'react';
+
+interface Menu {
+    id: string;
+    name: string;
+    tempField: string;
+}
+
+interface ColumnMeta {
+    field: string;
+    header: string;
+}
+
+interface Root {
+    data: any
+}
+export const DynamicTable = (props: Root) => {
+    const { data } = props;
+    const [menus, setMenus] = useState<Menu[]>([]);
+    const columns: ColumnMeta[] = [
+        { field: 'id', header: 'ID' },
+        { field: 'name', header: 'NAME' },
+        { field: 'tempField', header: 'TEMPFIELD' },
+    ];
+
+    useEffect(() => {
+        setMenus(data)
+    }, []);
+
+    const editBodyTemplate = (product: Menu) => {
+        return <div className='flex gap-4'>
+            <Link href={product.id} rel="noopener noreferrer" className="text-sm font-bold p-0" style={{ color: '#12415D' }}>
+                <svg className='opacity-50' xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" fill="none" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="#212134" fill-rule="evenodd" d="M23.604 3.514c.528.528.528 1.36 0 1.887l-2.622 2.607-4.99-4.99L18.6.396a1.322 1.322 0 0 1 1.887 0l3.118 3.118ZM0 24v-4.99l14.2-14.2 4.99 4.99L4.99 24H0Z" clip-rule="evenodd"></path></svg>
+            </Link>
+            <Button link onClick={() => console.log(product.id)} rel="noopener noreferrer" className="text-sm font-bold p-0" style={{ color: '#12415D' }}>
+                <svg className='opacity-50' xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" fill="none" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="#32324D" d="M3.236 6.149a.2.2 0 0 0-.197.233L6 24h12l2.96-17.618a.2.2 0 0 0-.196-.233H3.236ZM21.8 1.983c.11 0 .2.09.2.2v1.584a.2.2 0 0 1-.2.2H2.2a.2.2 0 0 1-.2-.2V2.183c0-.11.09-.2.2-.2h5.511c.9 0 1.631-1.09 1.631-1.983h5.316c0 .894.73 1.983 1.631 1.983H21.8Z"></path></svg>
+            </Button>
+        </div >
+    };
+
+    return (
+        <div className="card">
+            <DataTable size='small' className='text-sm' value={menus} tableStyle={{ minWidth: '50rem' }}>
+                {columns.map((col, i) => (
+                    <Column key={col.field} field={col.field} header={col.header} />
+                ))}
+                <Column key={'edit'} field={"edit"} body={editBodyTemplate} style={{ maxWidth: 100 }} headerStyle={{ height: 40 }} />
+            </DataTable>
+        </div>
+    );
+}

package/src/components/tables/ListViewTable.tsx

@@ -0,0 +1,155 @@
+"use client"
+import React, { useState, useEffect } from 'react';
+import { DataTable, DataTableFilterMeta } from 'primereact/datatable';
+import { Column, ColumnFilterElementTemplateOptions } from 'primereact/column';
+import { DemoService } from './DemoData';
+import { CustomTag } from '../Tag/CustomTag';
+import { FilterMatchMode, FilterOperator } from 'primereact/api';
+import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
+import { Calendar, CalendarViewChangeEvent } from 'primereact/calendar';
+import { InputNumber, InputNumberChangeEvent } from 'primereact/inputnumber';
+import { Button } from 'primereact/button';
+import { FilterIcon } from '../modelsComponents/filterIcon';
+const defaultFilters: DataTableFilterMeta = {
+    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+    name: {
+        operator: FilterOperator.AND,
+        constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }],
+    },
+    date: {
+        operator: FilterOperator.AND,
+        constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }],
+    },
+    price: {
+        operator: FilterOperator.AND,
+        constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }],
+    },
+    quantity: {
+        operator: FilterOperator.AND,
+        constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }],
+    },
+    orderStatus: {
+        operator: FilterOperator.OR,
+        constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }],
+    },
+};
+export interface Product {
+    id: string;
+    date: string;
+    name: string;
+    image: string;
+    price: number;
+    quantity: number;
+    orderStatus: string;
+    slug: string;
+}
+export const ListViewTable = () => {
+    const [products, setProducts] = useState<Product[]>([]);
+    const [filters, setFilters] = useState<DataTableFilterMeta>(defaultFilters);
+    const [selectedProducts, setSelectedProducts] = useState<Product[] | null>(null);
+    const [globalFilterValue, setGlobalFilterValue] = useState<string>('');
+    const [statuses] = useState<string[]>(['Delivered', 'On The Way', 'Cancelled', 'Returned']);
+    const clearFilter = () => {
+        initFilters();
+    };
+    const onGlobalFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
+        let _filters = { ...filters };
+        // @ts-ignore
+        _filters['global'].value = value;
+        setFilters(_filters);
+        setGlobalFilterValue(value);
+    };
+    const initFilters = () => {
+        setFilters(defaultFilters);
+        setGlobalFilterValue('');
+    };
+    useEffect(() => {
+        DemoService.getDemos().then((data) => setProducts(data));
+    }, []);
+    const formatCurrency = (value: number) => {
+        return value.toLocaleString('en-IN', { style: 'currency', currency: 'INR', minimumFractionDigits: 0, maximumFractionDigits: 0 });
+    };
+    const priceBodyTemplate = (product: Product) => {
+        return formatCurrency(product.price);
+    };
+    const imageBodyTemplate = (product: Product) => {
+        return <img src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`} alt={product.image} className="w-3rem shadow-2 border-round" />;
+    };
+    const statusBodyTemplate = (product: Product) => {
+        return <div>
+            <CustomTag className={''} value={product.orderStatus} severity={product.orderStatus} />
+        </div>
+    };
+    const detailsBodyTemplate = (product: Product) => {
+        return <a href={`${product.slug}`} rel="noopener noreferrer" className="text-sm font-bold p-0" style={{ color: '#12415D' }}>
+            View Details
+        </a>
+    };
+    const quantityBodyTemplate = (product: Product) => {
+        return <p className="text-sm m-0" style={{ color: '#197EF7' }}>
+            {product.quantity < 10 ? `0${product.quantity}` : product.quantity}
+        </p>
+    };
+    const statusItemTemplate = (option: string) => {
+        return <CustomTag className={''} value={option} severity={option} />;
+    };
+    const statusFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+        return <Dropdown value={options.value} options={statuses} onChange={(e: DropdownChangeEvent) => options.filterCallback(e.value, options.index)} itemTemplate={statusItemTemplate} placeholder="Select One" className="p-column-filter" showClear />;
+    };
+    const formatDate = (value: Date) => {
+        return value.toLocaleDateString('en-IN', {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric'
+        });
+    };
+    const dateBodyTemplate = (rowData: Product) => {
+        return formatDate(new Date(rowData.date));
+    };
+    const dateFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+        return <Calendar value={options.value} onChange={(e: any) => options.filterCallback(e.value, options.index)} dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />;
+    };
+    const priceFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+        return <InputNumber value={options.value} onChange={(e: InputNumberChangeEvent) => options.filterCallback(e.value, options.index)} mode="currency" currency="INR" locale="en-IN" />;
+    };
+    const quantityFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+        return <InputNumber value={options.value} onChange={(e: InputNumberChangeEvent) => options.filterCallback(e.value, options.index)} />;
+    };
+    return (
+        <div className="">
+              <div className="form-wrapper-title mb-5">All</div>
+            <div className='flex gap-3 mb-3'>
+
+                {selectedProducts?.length ?
+                    <div className='flex gap-3 mb-3'>
+                        <p className='text-xs'>{selectedProducts.length} entry selected</p>
+                        <Button severity="danger" label='Delete' size='small' outlined>
+                        </Button>
+                    </div>
+                    : null
+                }
+                <Button type="button" icon="pi pi-filter-slash" label="Clear" size='small' outlined onClick={clearFilter} className='mb-3' />
+            </div>
+            <DataTable
+                value={products} tableStyle={{ minWidth: '60rem' }} size='small' paginator rows={10}
+                dataKey="id"
+                filters={filters} globalFilterFields={['name', 'orderStatus', 'price', "date"]}
+                emptyMessage="No Product found." onFilter={(e) => setFilters(e.filters)}
+                filterIcon={() => <FilterIcon />}
+                selectionMode={'checkbox'}
+                selection={selectedProducts|| []}
+                onSelectionChange={(e) => setSelectedProducts(e.value)}
+            >
+                <Column selectionMode="multiple" headerStyle={{ width: '4rem' }}></Column>
+                <Column header="Product Image" body={imageBodyTemplate}></Column>
+                <Column field="name" filter header="Product Name" className='text-sm' filterPlaceholder="Search by Product Name" ></Column>
+                <Column field="date" filterField="date" dataType="date" header="Date" className='text-sm' body={dateBodyTemplate} filter filterElement={dateFilterTemplate}></Column>
+                <Column header="Quantity" filterField="quantity" body={quantityBodyTemplate} filter filterElement={quantityFilterTemplate}></Column>
+                <Column field="price" filterField="price" dataType="numeric" header="Price" body={priceBodyTemplate} className='text-sm' filter filterElement={priceFilterTemplate} ></Column>
+                <Column field="orderStatus" header="Status" body={statusBodyTemplate} filter filterElement={statusFilterTemplate} ></Column>
+                <Column body={detailsBodyTemplate}></Column>
+            </DataTable>
+        </div>
+    )
+}

package/src/helpers/ToastContainer.tsx

@@ -0,0 +1,92 @@
+import { FetchBaseQueryError } from '@reduxjs/toolkit/dist/query';
+import { Toast } from 'primereact/toast';
+import React, { useRef } from 'react';
+
+
+interface ErrorResponseData {
+    message: string;
+    statusCode: number;
+    error: string;
+}
+
+
+let toastRef: React.MutableRefObject<Toast | null> | null = null;
+
+export const ToastContainer = () => {
+    toastRef = useRef(null);
+
+    return <Toast ref={toastRef} />;
+};
+
+function isFetchBaseQueryErrorWithErrorResponse(error: any): error is FetchBaseQueryError & { data: ErrorResponseData } {
+    return error && typeof error === 'object' && 'data' in error && 'message' in error.data;
+}
+const extractErrorMessages = (errorObj: Record<string, string>): string[] => {
+    return Object.values(errorObj);
+};
+
+
+export const handleError = (errorToast: any) => {
+    let errorMessage: any = errorToast ? errorToast : ['An error occurred'];
+
+
+    if (typeof errorMessage == 'object') {
+        if (isFetchBaseQueryErrorWithErrorResponse(errorToast)) {
+            errorMessage = errorToast.data.message;
+        }
+    }
+    // if (isFetchBaseQueryErrorWithErrorResponse(errorToast)) {
+    //     errorMessage = errorToast.data.message;
+    // } else {
+    //     errorMessage = ['Something went wrong'];
+    // }
+
+    toastRef?.current?.show({
+        severity: 'error',
+        summary: 'Error',
+        detail: errorMessage,
+        life: 3000,
+        //@ts-ignore
+        content: (props) => (
+            <div className="flex flex-column align-items-left" style={{ flex: "1" }}>
+                {Array.isArray(errorMessage) ? (
+                    errorMessage.map((message, index) => (
+                        <div className="flex align-items-center gap-2" key={index}>
+                            <span className="font-bold text-900">{message.trim()}</span>
+                        </div>
+                    ))
+                ) : (
+                    <div className="flex align-items-center gap-2">
+                        <span className="font-bold text-900">{errorMessage?.trim()}</span>
+                    </div>
+                )}
+            </div>
+        ),
+    });
+};
+
+export const handleSuccess = (successMessage: any) => {
+
+    toastRef?.current?.show({
+        severity: 'error',
+        summary: 'Success',
+        detail: successMessage,
+        life: 3000,
+        //@ts-ignore
+        content: (props) => (
+            <div className="flex flex-column align-items-left" style={{ flex: "1" }}>
+                {Array.isArray(successMessage) ? (
+                    successMessage.map((message, index) => (
+                        <div className="flex align-items-center gap-2" key={index}>
+                            <span className="font-bold text-900">{message.trim()}</span>
+                        </div>
+                    ))
+                ) : (
+                    <div className="flex align-items-center gap-2">
+                        <span className="font-bold text-900">{successMessage?.trim()}</span>
+                    </div>
+                )}
+            </div>
+        ),
+    });
+};

package/src/helpers/authHeader.ts

@@ -0,0 +1,19 @@
+import { cookies } from "next/headers";
+
+export const getAuthCookieName = () =>
+  process.env.NODE_ENV === "production"
+    ? "__Secure-next-auth.session-token"
+    : "next-auth.session-token";
+
+export const getAuthHeader = () => {
+  const nextCookies = cookies();
+  const cookieName = getAuthCookieName();
+
+  const nextAuthSessionToken = nextCookies.get(cookieName);
+
+  return {
+    headers: {
+      Cookie: `${nextAuthSessionToken?.name}=${nextAuthSessionToken?.value}`,
+    },
+  };
+};