funuicss 2.7.15 → 3.0.0

package/ui/table/Row.tsx

@@ -1,16 +0,0 @@
-import * as React from 'react';
-
-type TableRowProps = {
-  children?: React.ReactNode;
-  funcss?: string;
-  rowKey?: React.Key;
-  key?: React.Key;
-};
-
-export default function TableRow({ children, funcss, rowKey , key}: TableRowProps) {
-  return (
-    <tr className={`${funcss ? funcss : ''}`} key={key ? key : rowKey }>
-      {children}
-    </tr>
-  );
-}

package/ui/table/Table.tsx

@@ -1,372 +0,0 @@
-'use client'
-import * as React from 'react';
-import TableHead from './Head';
-import TableBody from './Body';
-import TableRow from './Row';
-import TableData from './Data';
-import Input from '../input/Input';
-import { useState } from "react";
-import RowFlex from '../specials/RowFlex';
-import Button from '../button/Button';
-import { PiDownload, PiFileCsv} from "react-icons/pi";
-import Circle from '../specials/Circle';
-import Text from '../text/Text';
-import { exportToCSV } from 'react-easy-export';
-
-type TableProps = {
-  children?: React.ReactNode;
-  funcss?: string;
-  title?: string;
-  bordered?: boolean;
-  noStripped?: boolean;
-  hoverable?: boolean;
-  showTotal?: boolean;
-  light?: boolean;
-  isLoading?: boolean;
-  hideExport?: boolean;
-  dark?: boolean;
-  data?: { "fields": string[], "data": any[], "titles": string[] , "funcss": string[]};
-  head?: React.ReactNode;
-  right?: React.ReactNode;
-  body?: React.ReactNode;
-  height?: number;
-  pageSize?: number; // New prop for page size
-  customColumns?: { title: string; render: (data: any) => React.ReactNode; onClick?: (data: any) => void }[];
-  filterableFields?: string[]; // New prop for filterable fields
-};
-
-export default function Table({
-  children,
-  funcss,
-  bordered,
-  noStripped,
-  hoverable,
-  title,
-  showTotal,
-  light,
-  dark,
-  head,
-  body,
-  data,
-  isLoading,
-  right,
-  hideExport,
-  height,
-  pageSize = data ? 10 : 0, // Default page size,
-  customColumns,
-  filterableFields, // New prop
-  ...rest
-}: TableProps) {
-   // Check if data is null or undefined before accessing its properties
-  // Replace this in your component
-const [search, setSearch] = useState<string | string[]>('');
-   const [currentPage, setCurrentPage] = useState<number>(1);
-
-  // Determine the total number of pages based on data length and page size
-  const totalPages = data ? Math.ceil((data?.data?.length || 0) / pageSize) : 0;
-  
-  // Calculate start and end indices for data pagination
-  const startIndex = data ? (currentPage - 1) * pageSize : 0;
-  const endIndex = data ? Math.min(startIndex + pageSize, data?.data?.length || 0) : 0;
-
-  const [selectedField, setSelectedField] = useState<string | null>(null);
-  const [selectedValue, setSelectedValue] = useState<string | null>(null);
-
-
-
-  // Enhanced filter logic:
-const normalize = (val: any) => val?.toString().toLowerCase().trim();
-
-const matchesSearch = (item: any) => {
-  const searchTerms = Array.isArray(search) ? search : [search];
-  return searchTerms.some(term =>
-    Object.values(item).some(value =>
-      normalize(value).includes(normalize(term))
-    )
-  );
-};
-
-
-
-
-
-  // Function to handle page change
-  const handleChangePage = (page: number) => {
-    if(data) {
-      setCurrentPage(page);
-    }
-  };
-
-  const handleFieldChange = (field: string) => {
-    setSelectedField(field);
-    setSelectedValue(null); // Reset selected value when field changes
-  };
-
-  const handleValueChange = (value: string) => {
-    setSelectedValue(value);
-  };
-
-  const getNestedValue = (obj: any, path: string) => {
-    return path.split('.').reduce((acc, part) => acc && acc[part], obj);
-  };
-
-  const filteredData = data ? data?.data.filter(item => {
-    if (!search && !selectedField && !selectedValue) return true;
-    if (selectedField && selectedValue) {
-      const value = getNestedValue(item, selectedField);
-     if(value){
-      return value.toString().toLowerCase() === selectedValue.toString().toLowerCase();
-     }
-    }
-    if (selectedField) {
-      const value = getNestedValue(item, selectedField);
-      if(value){
-      return value.toString().toLowerCase().includes(search.toString().toLowerCase());
-      }
-    }
-    return Object.values(item).some(value => {
-      if(value){
-        return value.toString().toLowerCase().includes(search.toString().toLowerCase());
-      }
-    });
-  })
-  : [];
-
-  // Maximum number of visible pages for pagination
-  const maxVisiblePages = 5; 
-
-  // Determine which pages to display
-  let startPage = data ?  Math.max(1, currentPage - Math.floor(maxVisiblePages / 2)) : 0;
-  let endPage = data ? Math.min(startPage + maxVisiblePages - 1, totalPages) : 0;
-
-  // Adjust startPage and endPage if there are not enough pages to fill maxVisiblePages
-  if (endPage - startPage + 1 < maxVisiblePages) {
-    startPage = Math.max(1, endPage - maxVisiblePages + 1);
-  }
-
-  // Function to export data to CSV
-  const Export = () => {
-    exportToCSV(filteredData, title ? `${title} ${selectedField ? `_${selectedField}` : ''}.csv` : 'data.csv');
-  }
-
-   // Extract the data array
-   const dataArray = data ? data.data : []
-   
- // Remove duplicate values
-const uniqueValues = selectedField
-  ? Array.from(new Set(dataArray.map(item => getNestedValue(item, selectedField))))
-  : [];
-
-  return (
-    <div className={`${funcss ? funcss : ''} roundEdge`}>
-      {
-        data &&
-        <div className="padding bb">
-        <RowFlex gap={0.5} justify='space-between'>
-        {
-          title ? 
-          <div>
-                 {
-              showTotal && data &&
-              <div >
-                       <Text text='Records: ' size='sm'  />
-                        <Text text={filteredData.length} size='h6'/>
-              </div>
-            }
-          {
-              title &&
-              <div >
-                       <Text text={title || ""} size='h4'/>
-              </div>
-
-              
-            }
-         
-        </div>
-        : 
-           <>
-                {
-              showTotal && data &&
-              <div >
-                       <Text text='Records: ' size='sm'  />
-                        <Text text={filteredData.length} size='h6'/>
-              </div>
-            }
-           </>
-        }
-        
-          {
-            data && filterableFields ?
-            <div className="col width-200-max">
-           <RowFlex gap={0.7}>
-           {
-            !selectedField && 
-              <select 
-           className=" input borderedInput roundEdgeSmall smallInput" 
-           value={selectedField || ''} 
-           onChange={(e) => {
-            handleFieldChange(e.target.value)
-           }}>
-        <option value="">🔍 Filter</option>
-        <option value="">All*</option>
-        {filterableFields?.map(field => (
-          <option key={field} value={field}>{field}</option>
-        ))}
-      </select>
-           }
-      {/* {
-        selectedField && <div>
-        =
-      </div>
-      } */}
-      {selectedField && (
-        <select  
-        className=" input borderedInput width-200-max  roundEdgeSmall smallInput" 
-         value={selectedValue || ''} 
-         onChange={(e) => {
-        if(e.target.value === 'clear_all'){
-          setSelectedField('')
-        }else{
-            handleValueChange(e.target.value)
-          handleChangePage(1)
-        }
-         }}
-         >
-          <option value="">All*</option>
-          {uniqueValues.map(item => (
-           <>
-           {
-            item &&
-            <option key={item} value={item}>
-            {item.toString()}
-          </option>
-           }
-           </>
-          ))}
-             <option value="clear_all">Clear</option>
-        </select>
-      )}
-           </RowFlex>
-            </div>
-            :''
-          }
-          <>
-          <RowFlex gap={0.5}>
-            {
-              right && right
-            }
-         {
-          !hideExport &&
-           <Button
-              small
-              bold
-              text='Export'
-              startIcon={<PiFileCsv />}
-              color='gradient'
-              onClick={Export}
-            />
-         }
-          </RowFlex>
-          </>
-        </RowFlex>
-      </div>
-      }
-     <main
-     style={{overflow:"auto" , width:"100%"}}>
-       <table
-        className={`table  ${bordered ? 'border' : ''} ${
-          noStripped ? '' : 'stripped'
-          } ${hoverable ? 'hoverableTr' : ''} ${light ? 'light' : ''} ${dark ? 'dark' : ''}`}
-        style={{
-          height: height ? height + "px" : ""
-        }}
-        {...rest}  >
-
-        { data &&
-          data?.titles &&
-          <TableHead>
-            {
-              data.titles.map(mdoc => (
-                <th key={mdoc}>
-                  <Text text={mdoc} weight={500} funcss='text-secondary'/>
-                </th>
-              ))
-            }
-          </TableHead>
-        }
-        {
-          head && <TableHead>{head}</TableHead>
-        }
-        {
-          body && <TableBody>{body}</TableBody>
-        }
-
-        {  data &&
-          filteredData.slice(startIndex, endIndex).map((mdoc, index) => (
-            <TableRow funcss='animated slide-down' rowKey={index} >
-              {
-                data.fields.map((fdoc , findex) => (
-                  <TableData key={fdoc} funcss={data.funcss ? data?.funcss?.[findex] || '' : ''}>
-                    {getNestedValue(mdoc, fdoc)}
-                  </TableData>
-                ))
-              }
-              {customColumns ?
-                customColumns.map((column, columnIndex) => (
-                  <td key={columnIndex}>
-                    {column.render && column.render(mdoc)}
-                    {column.onClick && (
-                      <Button onClick={() => column.onClick && column.onClick(mdoc)}>
-                        {column.title}
-                      </Button>
-                    )}
-                  </td>
-                )) : ""}
-            </TableRow>
-          ))
-        }
-        {
-          isLoading &&
-          [1,2,3,4,5,6,7,8,9,10].map(() => (
-            <TableRow funcss='skeleton'/>
-          ))
-        }
-        {children ? children : ''}
-      </table>
-     </main>
-      {
-        data && 
-        <>
-        {
-            pageSize &&
-            <>
-            {
-              filteredData.length > pageSize &&
-              <div className="padding bt">
-              <RowFlex gap={1} justify='center'>
-             
-                <div className="pagination">
-                  {Array.from({ length: endPage - startPage + 1 }, (_, i) => (
-                    <Circle
-                      size={2.5}
-                      key={startPage + i}
-                      onClick={() => handleChangePage(startPage + i)}
-                      funcss={currentPage === startPage + i ? 'primary pageCircle' : 'lighter pageCircle text-primary'}
-                    >
-                      <Text text={`${startPage + i}`} bold size='sm'/>
-                    </Circle>
-                  ))}
-                </div>
-            
-              </RowFlex>
-            </div>
-            }
-            </>
-        }
-
-        </>
-      }
-    </div>
-  );
-}
-

package/ui/text/Text.tsx

@@ -1,179 +0,0 @@
-import React from 'react';
-import { PiQuotesLight } from 'react-icons/pi';
-
-type TypographyProps = {
-  id?: string;
-  text?: React.ReactNode;
-  funcss?: string;
-  bg?: string;
-  color?: string;
-  hoverBg?: string;
-  hoverText?: string;
-  monospace?: boolean;
-  emp?: boolean;
-  bold?: boolean;
-  block?: boolean;
-  body?: boolean;
-  article?: boolean;
-  light?: boolean;
-  lighter?: boolean;
-  italic?: boolean;
-  underline?: boolean;
-  weight?: number;
-  quote?: boolean;
-  align?: "left" | "center" | "right" | "justify";
-  lineHeight?: string;
-  letterSpacing?: string;
-  uppercase?: boolean;
-  lowercase?: boolean;
-  capitalize?: boolean;
-  textDecoration?: "none" | "underline" | "overline" | "line-through";
-  textTransform?: "none" | "capitalize" | "uppercase" | "lowercase";
-  whiteSpace?: "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap";
-  wordBreak?: "normal" | "break-all" | "keep-all" | "break-word";
-  fontFamily?: string;
-  textShadow?: string;
-  textAlign?: "left" | "center" | "right" | "justify";
-  opacity?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
-  zIndex?: number;
-  truncate?: number;
-  transform?: string;
-  customStyles?: React.CSSProperties;
-  onClick?: () => void;
-  children?: React.ReactNode;
-  size?: 
-    | "xs" 
-    | "sm" 
-    | "base" 
-    | "lg" 
-    | "xl" 
-    | "2xl" 
-    | "3xl" 
-    | "4xl" 
-    | "5xl" 
-    | "6xl"
-    | "7xl"
-    | "8xl"
-    | "9xl"
-    | "h1" 
-    | "h2" 
-    | "h3" 
-    | "h4" 
-    | "h5" 
-    | "h6";
-};
-
-const Text: React.FC<TypographyProps> = ({
-  id,
-  bg,
-  color,
-  children,
-  hoverBg,
-  hoverText,
-  text,
-  funcss,
-  emp,
-  bold,
-  block,
-  body,
-  article,
-  light,
-  lighter,
-  italic,
-  weight,
-  underline,
-  align,
-  lineHeight,
-  letterSpacing,
-  uppercase,
-  lowercase,
-  capitalize,
-  textDecoration,
-  textTransform,
-  whiteSpace,
-  wordBreak,
-  fontFamily,
-  truncate,
-  textShadow,
-  textAlign,
-  customStyles,
-  monospace,
-  quote,
-  opacity,
-  size = 'base', // default
-  ...rest
-}) => {
-  const Tag = block ? 'div' : 'span';
-
-  const sizeClass = `${size === 'h1' ? `h1` : 
-    size === 'h2' ? `h2` : 
-    size === 'h3' ? `h3` : 
-    size === 'h4' ? `h4` : 
-    size === 'h5' ? `h5` : 
-    size === 'h6' ? `h6` : 
-    `text-${size}`}`;
-
-const mergedStyles: React.CSSProperties = {
-  display: block ? 'block' : undefined,
-  fontWeight: bold ? 'bold' : weight ? weight : undefined,
-  lineHeight,
-  letterSpacing,
-  textTransform,
-  textDecoration,
-  fontFamily,
-  textShadow,
-  textAlign,
-  whiteSpace,
-  wordBreak,
-  transform: customStyles?.transform,
-  ...customStyles,
-  ...(truncate
-    ? {
-        display: '-webkit-box',
-        WebkitBoxOrient: 'vertical',
-        WebkitLineClamp: truncate,
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-      }
-    : {}),
-};
-
-
-  const classNames = [
-    funcss || '',
-    sizeClass,
-    color ? ` text-${color} ` : '',
-    align ? ` text-${align} ` : '',
-    monospace ? 'monospace' : '',
-    bg || '',
-    hoverText ? `hover-text-${hoverText}` : '',
-    hoverBg ? `hover-${hoverBg}` : '',
-    light ? 'lightText' : lighter ? 'lighterText' : '',
-    italic ? 'italicText' : '',
-    underline ? 'underlineText' : '',
-    body ? 'body' : '',
-    article ? 'article' : '',
-    emp ? 'emp' : '',
-    bold ? 'bold' : '',
-    uppercase ? 'uppercase' : '',
-    lowercase ? 'lowercase' : '',
-    capitalize ? 'capitalize' : '',
-    opacity ? 'opacity-' + opacity : '',
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  return (
-    <Tag id={id} className={classNames} style={mergedStyles} {...rest}>
-      {quote && (
-        <div>
-          <PiQuotesLight />
-        </div>
-      )}
-      {children}
-      {text}
-    </Tag>
-  );
-};
-
-export default Text;

package/ui/theme/dark.tsx

@@ -1,45 +0,0 @@
-
-
-type DarkModeProps = {
-  state: boolean;
-};
-
-export default function DarkMode({ state }: DarkModeProps) {
-  if (state) {
-    const root = document.querySelector(':root') as HTMLElement; // Properly declare the type of root
-
-    const bdColor = "#FFFFFFD9";
-    let borderColor: string;
-    let raiseColor: string;
-
-    borderColor = "#444654";
-    raiseColor = "#1e1e1e";
-
-    root.style.setProperty('--bd-theme', "#141414");
-    root.style.setProperty('--bd-color', bdColor);
-    root.style.setProperty('--borderColor', borderColor);
-    root.style.setProperty('--raiseThemes', raiseColor);
-    root.style.setProperty('--lighter', "#33333349");
-    root.style.setProperty('--inputOutline', "#1e1e1e");
-    root.style.setProperty('--lightThemeDark', bdColor);
-
-    // Dark theme for all the colors
-    root.style.setProperty('--success', "#1d6640");
-    root.style.setProperty('--successLight', " #c7e6c8");
-
-    root.style.setProperty('--info', "#2471a3");
-    root.style.setProperty('--infoLight', "#b3d9ed");
-
-    root.style.setProperty('--warning', "#8c3d00");
-    root.style.setProperty('--warningLight', "#d8b69c");
-
-    root.style.setProperty('--danger', "#6b0600");
-    root.style.setProperty('--dangerLight', "#bfbfbf");
-
-    // root.style.setProperty('--info', "#2471a3");
-    // root.style.setProperty('--infoLight', "#b3d9ed");
-
-    root.style.setProperty('--light', "#c5d8e0");
-    root.style.setProperty('--deepLight', "#154556");
-  }
-}

package/ui/theme/darkenUtils.ts

@@ -1,15 +0,0 @@
-import tinycolor from 'tinycolor2';
-
-export const getDarkenAmount = (variable: string): number => {
-  if (variable.includes('50')) return 5;
-  if (variable.includes('100')) return 10;
-  if (variable.includes('200')) return 15;
-  if (variable.includes('300')) return 20;
-  if (variable.includes('400')) return 25;
-  return 20;
-};
-
-export const darkenToRgba = (hex: string, darkenAmount: number, alpha = 1): string => {
-  const color = tinycolor(hex).darken(darkenAmount).toRgb();
-  return `rgba(${color.r}, ${color.g}, ${color.b}, ${alpha})`;
-};

package/ui/theme/theme.tsx

@@ -1,48 +0,0 @@
-'use client';
-import React, { useEffect } from 'react';
-import { colorVarsToDarken, themes } from './themes';
-import { getDarkenAmount, darkenToRgba } from './darkenUtils';
-
-interface ThemeProviderProps {
-  theme: 'light' | 'dark' | 'dark-blue' | 'light-gray' | 'pastel-green' | 'warm-orange' | 'frosted-glass' | 'midnight-purple' | 'cyber-metal';
-  children: React.ReactNode;
-}
-
-const ThemeProvider: React.FC<ThemeProviderProps> = ({ theme, children }) => {
-  useEffect(() => {
-    const root = document.documentElement;
-    const selectedTheme = themes[theme] || themes.light;
-
-    // Apply selected theme variables
-    Object.entries(selectedTheme).forEach(([key, value]) => {
-      root.style.setProperty(key, value);
-    });
-
-    // Apply darkened RGBA versions (for dark themes only)
-    if (theme === 'dark' || theme === 'dark-blue' || theme === 'midnight-purple' || theme === 'cyber-metal') {
-      colorVarsToDarken.forEach((varName) => {
-        const original = getComputedStyle(root).getPropertyValue(varName).trim();
-        if (original) {
-          const darkAmount = getDarkenAmount(varName);
-          const rgba = darkenToRgba(original, darkAmount, 0.9);
-          root.style.setProperty(varName, rgba);
-        }
-      });
-    }
-  }, [theme]);
-
-  return (
-    <div
-      className={`theme-${theme}`}
-      style={{
-        backgroundColor: 'var(--page-bg)',
-        color: 'var(--text-color)',
-        minHeight: '100vh',
-      }}
-    >
-      {children}
-    </div>
-  );
-};
-
-export default ThemeProvider;