fiboui 1.0.2 → 2.0.0

package/src/structure/Collapse/index.ts

@@ -1,122 +0,0 @@
-import React, { ReactElement, ReactNode, useState } from 'react';
-import { FiboBuilder, createBuilder } from '../../core/builder';
-import { BaseProps } from '../../core/types';
-import { Box } from '../Box';
-import { Row } from '../../layout/Row';
-import { Text } from '../../content/Text';
-
-
-class CollapseBuilder extends FiboBuilder {
-  public _title: ReactNode | string = '';
-  public _content: ReactNode = null;
-  public _defaultExpanded: boolean = false;
-  public _expanded?: boolean; 
-  public _onToggle?: (isOpen: boolean) => void;
-
-  title(value: ReactNode | string): this {
-    this._title = value;
-    return this;
-  }
-
-  content(value: ReactNode): this {
-    this._content = value;
-    return this;
-  }
-
-  isOpen(value: boolean): this {
-    this._expanded = value;
-    return this;
-  }
-
-  defaultOpen(value: boolean): this {
-    this._defaultExpanded = value;
-    return this;
-  }
-
-  onToggle(handler: (isOpen: boolean) => void): this {
-    this._onToggle = handler;
-    return this;
-  }
-
-  build(): ReactElement {
-    return React.createElement(CollapseBase, {
-       builder: this,
-       ...this._props 
-    });
-  }
-}
-
-
-const CollapseBase = React.memo(({ builder }: { builder: CollapseBuilder }) => {
-    
-    
-    const b = builder as any; 
-    
-    
-    const isControlled = b._expanded !== undefined;
-    const [internalOpen, setInternalOpen] = useState(b._defaultExpanded);
-    
-    const isOpen = isControlled ? b._expanded : internalOpen;
-
-    const toggle = () => {
-        if (!isControlled) {
-            setInternalOpen(!isOpen);
-        }
-        if (b._onToggle) {
-            b._onToggle(!isOpen);
-        }
-    };
-
-    return Box()
-        .classNames(['w-full', 'border', 'border-gray-200', 'rounded-xl', 'overflow-hidden', 'bg-white', 'transition-all', 'duration-300'])
-        .className(b.getClassName())
-        .style(b.getStyle())
-        .children([
-            
-            Row()
-                .justifyContent("between")
-                .alignItems("center")
-                .classNames(['p-4', 'cursor-pointer', 'hover:bg-gray-50', 'transition-colors', 'select-none'])
-                .props({ onClick: toggle })
-                .children([
-                     typeof b._title === 'string' 
-                        ? Text(b._title).fontWeight(600).fontSize(15).color("#1F2937").build()
-                        : b._title,
-                     
-                     
-                     Box()
-                        .classNames(['transition-transform', 'duration-300'])
-                        .style({ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' })
-                        .children(
-                           
-                           React.createElement('svg', {
-                               width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round",
-                               className: "text-gray-400"
-                           }, React.createElement('polyline', { points: "6 9 12 15 18 9" }))
-                        ).build()
-                ]).build(),
-            
-            
-            Box()
-                .classNames(['transition-all', 'duration-300', 'ease-in-out', 'overflow-hidden'])
-                .style({ 
-                    maxHeight: isOpen ? '500px' : '0px', 
-                    opacity: isOpen ? 1 : 0, 
-                })
-                .children(
-                    Box().classNames(['p-4', 'pt-0', 'text-gray-600', 'text-sm']).children(b._content).build()
-                ).build()
-        ])
-        .build();
-});
-
-
-export const Collapse = createBuilder(CollapseBuilder);
-
-export interface CollapseProps extends BaseProps {
-  title: ReactNode | string;
-  content: ReactNode;
-  isOpen?: boolean;
-  defaultOpen?: boolean;
-  onToggle?: (isOpen: boolean) => void;
-}

package/src/structure/Grid/index.ts

@@ -1,197 +0,0 @@
-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

@@ -1,185 +0,0 @@
-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

@@ -1,165 +0,0 @@
-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;
-}