fiboui 1.0.0

package/src/structure/Grid/index.ts

@@ -0,0 +1,197 @@
+import React, { ReactElement, ReactNode } from 'react';
+import { FiboBuilder, createBuilder } from '../../core/builder';
+import { BaseProps } from '../../core/types';
+
+type GridVariant = 'standard' | 'masonry' | 'bento';
+type GridGap = 'none' | 'sm' | 'md' | 'lg' | 'xl' | number;
+type GridCols = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+interface ResponsiveCols {
+    sm?: GridCols;
+    md?: GridCols;
+    lg?: GridCols;
+    xl?: GridCols;
+}
+
+const GridInner = React.memo((props: any) => {
+    const { 
+        children, 
+        variant = 'standard', 
+        columns = 1, 
+        gap = 'md', 
+        className, 
+        style, 
+        ...rest 
+    } = props;
+
+    
+    const getGapClass = (g: GridGap) => {
+        if (typeof g === 'number') return ''; 
+        const gaps: Record<string, string> = {
+            none: 'gap-0',
+            sm: 'gap-2',
+            md: 'gap-4',
+            lg: 'gap-6',
+            xl: 'gap-8'
+        };
+        return gaps[g] || 'gap-4';
+    };
+
+    const getGapStyle = (g: GridGap) => {
+        if (typeof g === 'number') return g + 'px';
+        return undefined;
+    };
+
+    
+    const getColsClass = (cols: GridCols | ResponsiveCols) => {
+        if (typeof cols === 'number') return `grid-cols-${cols}`;
+        
+        
+        let classes = [];
+        if (cols.sm) classes.push(`sm:grid-cols-${cols.sm}`);
+        if (cols.md) classes.push(`md:grid-cols-${cols.md}`);
+        if (cols.lg) classes.push(`lg:grid-cols-${cols.lg}`);
+        if (cols.xl) classes.push(`xl:grid-cols-${cols.xl}`);
+        
+        
+        return classes.join(' ') || 'grid-cols-1';
+    };
+
+    
+    if (variant === 'masonry') {
+        const getMasonryColsClass = (cols: GridCols | ResponsiveCols) => {
+            if (typeof cols === 'number') return `columns-${cols}`;
+            let classes = [];
+            if (cols.sm) classes.push(`sm:columns-${cols.sm}`);
+            if (cols.md) classes.push(`md:columns-${cols.md}`);
+            if (cols.lg) classes.push(`lg:columns-${cols.lg}`);
+            if (cols.xl) classes.push(`xl:columns-${cols.xl}`);
+            return classes.join(' ') || 'columns-1';
+        };
+
+        return React.createElement('div', {
+            className: `${getMasonryColsClass(columns)} ${getGapClass(gap)} space-y-4 ${className}`,
+            style: { 
+                columnGap: getGapStyle(gap),
+                ...style 
+            },
+            ...rest
+        }, React.Children.map(children, child => 
+            React.createElement('div', { className: 'break-inside-avoid mb-4' }, child)
+        ));
+    }
+
+    
+    return React.createElement('div', {
+        className: `grid ${getColsClass(columns)} ${getGapClass(gap)} ${className}`,
+        style: { 
+            gap: getGapStyle(gap),
+            ...style 
+        },
+        ...rest
+    }, children);
+});
+
+
+const GridItemInner = React.memo((props: any) => {
+    const { children, colSpan, rowSpan, className, style, ...rest } = props;
+
+    const getSpanClass = () => {
+        let classes = [];
+        if (colSpan) classes.push(`col-span-${colSpan}`);
+        if (rowSpan) classes.push(`row-span-${rowSpan}`);
+        return classes.join(' ');
+    };
+
+    return React.createElement('div', {
+        className: `${getSpanClass()} ${className}`,
+        style,
+        ...rest
+    }, children);
+});
+
+
+class GridBuilder extends FiboBuilder {
+  private _variant: GridVariant = 'standard';
+  private _columns: GridCols | ResponsiveCols = 1;
+  private _gap: GridGap = 'md';
+  protected _children: ReactNode[] = [];
+
+  variant(v: GridVariant): this {
+    this._variant = v;
+    return this;
+  }
+
+  columns(cols: GridCols | ResponsiveCols): this {
+    this._columns = cols;
+    return this;
+  }
+
+  gap(g: GridGap): this {
+    this._gap = g;
+    return this;
+  }
+
+  children(nodes: ReactNode[]): this {
+    this._children = nodes;
+    return this;
+  }
+
+  build(): ReactElement {
+    const props = {
+        variant: this._variant,
+        columns: this._columns,
+        gap: this._gap,
+        children: this._children,
+        className: this.getClassName(),
+        style: this.getStyle(),
+        ...this._props
+    };
+    
+    return React.createElement(GridInner, props);
+  }
+}
+
+class GridItemBuilder extends FiboBuilder {
+    private _colSpan?: number;
+    private _rowSpan?: number;
+    protected _children: ReactNode[] = [];
+
+    colSpan(span: number): this {
+        this._colSpan = span;
+        return this;
+    }
+
+    rowSpan(span: number): this {
+        this._rowSpan = span;
+        return this;
+    }
+
+    children(nodes: ReactNode[]): this {
+        this._children = nodes;
+        return this;
+    }
+
+    build(): ReactElement {
+        const props = {
+            colSpan: this._colSpan,
+            rowSpan: this._rowSpan,
+            children: this._children,
+            className: this.getClassName(),
+            style: this.getStyle(),
+            ...this._props
+        };
+        return React.createElement(GridItemInner, props);
+    }
+}
+
+
+export const Grid = createBuilder(GridBuilder);
+
+export const GridItem = createBuilder(GridItemBuilder);
+
+export interface GridProps extends BaseProps {
+  variant?: GridVariant;
+  columns?: GridCols | ResponsiveCols;
+  gap?: GridGap;
+}

package/src/structure/List/index.ts

@@ -0,0 +1,185 @@
+import React, { ReactElement, ReactNode } from 'react';
+import { FiboBuilder, createBuilder } from '../../core/builder';
+import { BaseProps } from '../../core/types';
+import { Box } from '../Box';
+
+type ListVariant = 'default' | 'card' | 'floating';
+
+const ListInner = React.memo((props: any) => {
+    const { 
+        items, 
+        renderItem, 
+        variant, 
+        separator, 
+        loading, 
+        threshold, 
+        onEndReached, 
+        className, 
+        style 
+    } = props;
+
+    const observerRef = React.useRef<HTMLDivElement>(null);
+
+    React.useEffect(() => {
+        if (!onEndReached || loading) return;
+        
+        const observer = new IntersectionObserver(
+            (entries) => {
+                if (entries[0].isIntersecting) {
+                    onEndReached?.();
+                }
+            },
+            { threshold: threshold }
+        );
+
+        if (observerRef.current) {
+            observer.observe(observerRef.current);
+        }
+
+        return () => observer.disconnect();
+    }, [loading, items.length, onEndReached, threshold]);
+
+    const variantStyles: Record<ListVariant, any> = {
+      default: { gap: '0px' },
+      card: { gap: '12px' },
+      floating: { gap: '8px' }
+    };
+
+    const itemContainerStyles: Record<ListVariant, any> = {
+      default: {
+        padding: '12px 16px',
+        borderBottom: separator ? '1px solid #F3F4F6' : 'none',
+        backgroundColor: 'transparent',
+        transition: 'background-color 0.2s'
+      },
+      card: {
+        padding: '16px',
+        backgroundColor: '#fff',
+        borderRadius: '16px',
+        boxShadow: '0 2px 8px -2px rgba(0,0,0,0.05)',
+        border: '1px solid #F3F4F6',
+        transition: 'transform 0.2s, box-shadow 0.2s'
+      },
+      floating: {
+        padding: '8px 12px',
+        borderRadius: '12px',
+        backgroundColor: 'transparent',
+        transition: 'background-color 0.2s'
+      }
+    };
+
+    const variantClasses: Record<ListVariant, string[]> = {
+      default: ['hover:bg-gray-50', 'first:rounded-t-xl', 'last:rounded-b-xl'],
+      card: ['hover:-translate-y-0.5', 'hover:shadow-md'],
+      floating: ['hover:bg-white', 'hover:shadow-sm']
+    };
+
+    return Box()
+      .className(className)
+      .classNames(['flex', 'flex-col', 'w-full'])
+      .style({
+        ...variantStyles[variant as ListVariant],
+        ...style
+      })
+      .children(
+        React.createElement(React.Fragment, {}, [
+           ...items.map((item: any, index: number) => 
+               React.cloneElement(
+                   Box()
+                     .style(itemContainerStyles[variant as ListVariant])
+                     .classNames(variantClasses[variant as ListVariant])
+                     .children(
+                       renderItem ? renderItem(item, index) : null
+                     )
+                     .build(),
+                   { key: `item-${index}` }
+               )
+           ),
+           
+           onEndReached && (
+               React.createElement('div', { 
+                   ref: observerRef, 
+                   className: 'py-4 flex justify-center w-full' 
+               }, loading ? (
+                   
+                    React.createElement('div', { className: 'animate-spin rounded-full h-5 w-5 border-2 border-gray-300 border-b-blue-600' })
+               ) : (
+                   
+                   React.createElement('div', { style: { height: '20px' } })
+               ))
+           )
+       ])
+      )
+      .build();
+});
+
+class ListBuilder<T = any> extends FiboBuilder {
+  private _items: T[] = [];
+  private _renderItem?: (item: T, index: number) => ReactNode;
+  private _variant: ListVariant = 'default';
+  private _separator: boolean = false;
+
+  items(items: T[]): this {
+    this._items = items;
+    return this;
+  }
+
+  renderItem(fn: (item: T, index: number) => ReactNode): this {
+    this._renderItem = fn;
+    return this;
+  }
+
+  variant(variant: ListVariant): this {
+    this._variant = variant;
+    return this;
+  }
+
+  separator(show: boolean = true): this {
+    this._separator = show;
+    return this;
+  }
+
+  private _onEndReached?: () => void;
+  private _loading: boolean = false;
+  private _threshold: number = 0.5;
+
+  onEndReached(handler: () => void): this {
+    this._onEndReached = handler;
+    return this;
+  }
+
+  loading(isLoading: boolean): this {
+    this._loading = isLoading;
+    return this;
+  }
+
+  threshold(value: number): this {
+    this._threshold = value;
+    return this;
+  }
+
+  build(): ReactElement {
+     const props = {
+         items: this._items,
+         renderItem: this._renderItem,
+         variant: this._variant,
+         separator: this._separator,
+         loading: this._loading,
+         threshold: this._threshold,
+         onEndReached: this._onEndReached,
+         className: this.getClassName(),
+         style: this.getStyle()
+     };
+     return React.createElement(ListInner, props);
+  }
+}
+
+
+export const List = createBuilder(ListBuilder);
+
+export interface ListProps<T = any> extends BaseProps {
+  items: T[];
+  renderItem?: (item: T, index: number) => ReactNode;
+  variant?: ListVariant;
+  separator?: boolean;
+}

package/src/structure/Table/index.ts

@@ -0,0 +1,165 @@
+import React, { ReactElement, ReactNode } from 'react';
+import { FiboBuilder, createBuilder } from '../../core/builder';
+import { BaseProps } from '../../core/types';
+import { Box } from '../Box';
+
+type TableVariant = 'default' | 'clean';
+type TableDensity = 'compact' | 'standard' | 'relaxed';
+
+export interface TableColumn<T = any> {
+  header: string;
+  accessor?: keyof T;
+  render?: (item: T) => ReactNode;
+  width?: string;
+  align?: 'left' | 'center' | 'right';
+}
+
+const TableInner = React.memo((props: any) => {
+    const { 
+        data, 
+        columns, 
+        variant, 
+        density, 
+        striped, 
+        width, 
+        className, 
+        style 
+    } = props;
+    
+    const tableStyles: React.CSSProperties = {
+       width: '100%',
+       borderCollapse: 'separate',
+       borderSpacing: '0',
+       ...style
+    };
+    
+    if (width) {
+        tableStyles.width = typeof width === 'number' ? `${width}px` : width;
+    }
+
+    const containerClass = variant === 'clean' 
+       ? ['bg-white', 'rounded-2xl', 'border', 'border-gray-100', 'overflow-hidden', 'shadow-sm'] 
+       : [];
+
+    
+    const cellPadding: Record<TableDensity, string> = {
+        compact: '10px 16px', 
+        standard: '16px 24px',
+        relaxed: '24px 32px'
+    };
+    const padding = cellPadding[density as TableDensity];
+
+    return Box()
+       .className(className)
+       .classNames(containerClass)
+       .children(
+          React.createElement('table', { style: tableStyles }, [
+             
+             React.createElement('thead', { key: 'thead', className: 'bg-gray-50/50' }, 
+                React.createElement('tr', {}, 
+                   columns.map((col: any, i: number) => 
+                      React.createElement('th', {
+                          key: i,
+                          style: { 
+                              textAlign: col.align || 'left', 
+                              padding: padding,
+                              width: col.width
+                          },
+                          className: 'text-xs font-bold text-gray-400 uppercase tracking-widest' 
+                      }, col.header)
+                   )
+                )
+             ),
+             
+             React.createElement('tbody', { key: 'tbody' }, 
+                 data.map((row: any, i: number) => 
+                     React.createElement('tr', {
+                         key: i,
+                         
+                         className: `group transition-all duration-200 border-b border-gray-50 last:border-b-0 ${
+                             striped && i % 2 !== 0 ? 'bg-gray-50/30' : 'bg-transparent'
+                         } ${variant === 'clean' ? 'hover:bg-white hover:shadow-md hover:scale-[1.002] hover:z-10 relative' : 'hover:bg-gray-50/50'}`
+                     }, 
+                     columns.map((col: any, j: number) => 
+                         React.createElement('td', {
+                             key: j,
+                             style: { 
+                                 textAlign: col.align || 'left',
+                                 padding: padding,
+                                 borderTop: variant === 'default' ? '1px solid #F3F4F6' : 'none'
+                             },
+                             className: 'text-sm text-gray-900 font-medium'
+                         }, 
+                          col.render ? col.render(row) : (col.accessor ? row[col.accessor] as ReactNode : null)
+                         )
+                     )
+                     )
+                 )
+             )
+          ])
+       ).build();
+});
+
+class TableBuilder<T = any> extends FiboBuilder {
+  private _data: T[] = [];
+  private _columns: TableColumn<T>[] = [];
+  private _variant: TableVariant = 'clean';
+  private _density: TableDensity = 'standard';
+  private _striped: boolean = false;
+  private _width: string | number | undefined;
+
+  data(items: T[]): this {
+    this._data = items;
+    return this;
+  }
+
+  columns(cols: TableColumn<T>[]): this {
+    this._columns = cols;
+    return this;
+  }
+
+  variant(variant: TableVariant): this {
+    this._variant = variant;
+    return this;
+  }
+
+  density(density: TableDensity): this {
+    this._density = density;
+    return this;
+  }
+
+  striped(enable: boolean = true): this {
+    this._striped = enable;
+    return this;
+  }
+
+  width(value: string | number): this {
+    this._width = value;
+    return this;
+  }
+
+  build(): ReactElement {
+     const props = {
+         data: this._data,
+         columns: this._columns,
+         variant: this._variant,
+         density: this._density,
+         striped: this._striped,
+         width: this._width,
+         className: this.getClassName(),
+         style: this.getStyle()
+     };
+     return React.createElement(TableInner, props);
+  }
+}
+
+
+export const Table = createBuilder(TableBuilder);
+
+export interface TableProps<T = any> extends BaseProps {
+  data: T[];
+  columns: TableColumn<T>[];
+  variant?: TableVariant;
+  density?: TableDensity;
+  striped?: boolean;
+}

package/src/structure/Tags/index.ts

@@ -0,0 +1,69 @@
+import React, { ReactElement } from 'react';
+import { FiboBuilder, createBuilder } from '../../core/builder';
+import { BaseProps } from '../../core/types';
+
+interface TagItem {
+  title: string;
+}
+
+const TagsInner = React.memo((props: any) => {
+    const { items, className, style, ...rest } = props;
+
+    const tags = items.map((item: TagItem, index: number) =>
+      React.createElement(
+        'span',
+        {
+          key: index,
+          className: 'fibo-tag',
+        },
+        item.title
+      )
+    );
+
+    return React.createElement(
+      'div',
+      {
+        className,
+        style,
+        ...rest,
+      },
+      ...tags
+    );
+});
+
+class TagsBuilder extends FiboBuilder {
+  private _items: TagItem[] = [];
+
+  constructor(items: TagItem[] = []) {
+    super();
+    this._items = items;
+  }
+
+  items(items: TagItem[]): this {
+    this._items = items;
+    return this;
+  }
+
+  build(): ReactElement {
+    const className = ['fibo-tags', 'flex', 'gap-2', 'flex-wrap', ...this._classNames]
+      .filter(Boolean)
+      .join(' ');
+      
+    const props = {
+        items: this._items,
+        className: className,
+        style: this.getStyle(),
+        ...this._props
+    };
+    return React.createElement(TagsInner, props);
+  }
+}
+
+
+export const Tags = createBuilder(TagsBuilder);
+
+export interface TagsProps extends BaseProps {
+  items: TagItem[];
+}
+
+export type { TagItem };