fiboui 1.0.0

package/src/layout/Center/index.ts

@@ -0,0 +1,34 @@
+import React, { ReactElement } from 'react';
+import { FiboBuilder, createBuilder } from '../../core/builder';
+import { ChildrenProps } from '../../core/types';
+
+class CenterBuilder extends FiboBuilder {
+  build(): ReactElement {
+    const classes = [
+      'fibo-center',
+      'flex',
+      'items-center',
+      'justify-center',
+      ...this._classNames,
+    ];
+
+    const className = classes.filter(Boolean).join(' ');
+    const style = this.getStyle();
+    const children = this.processChildren();
+
+    return React.createElement(
+      'div',
+      {
+        className,
+        style,
+        ...this._props,
+      },
+      ...children
+    );
+  }
+}
+
+
+export const Center = createBuilder(CenterBuilder);
+
+export interface CenterProps extends ChildrenProps {}

package/src/layout/Column/index.ts

@@ -0,0 +1,101 @@
+import React, { ReactElement } from 'react';
+import { FiboBuilder, createBuilder } from '../../core/builder';
+import { ChildrenProps, MainAxisAlignment, CrossAxisAlignment } from '../../core/types';
+
+class ColumnBuilder extends FiboBuilder {
+  private _mainAxisAlignment: MainAxisAlignment = 'start';
+  private _crossAxisAlignment: CrossAxisAlignment = 'start';
+  private _spacing?: string | number;
+  private _size?: 'small' | 'medium' | 'large';
+
+  mainAxisAlignment(alignment: MainAxisAlignment): this {
+    this._mainAxisAlignment = alignment;
+    return this;
+  }
+
+  crossAxisAlignment(alignment: CrossAxisAlignment): this {
+    this._crossAxisAlignment = alignment;
+    return this;
+  }
+
+  spacing(value: string | number): this {
+    this._spacing = value;
+    return this;
+  }
+
+  size(size: 'small' | 'medium' | 'large'): this {
+    this._size = size;
+    return this;
+  }
+
+  build(): ReactElement {
+    const alignmentMap: Record<MainAxisAlignment, string> = {
+      start: 'justify-start',
+      center: 'justify-center',
+      end: 'justify-end',
+      spaceBetween: 'justify-between',
+      spaceAround: 'justify-around',
+      spaceEvenly: 'justify-evenly',
+    };
+
+    const crossAlignmentMap: Record<CrossAxisAlignment, string> = {
+      start: 'items-start',
+      center: 'items-center',
+      end: 'items-end',
+      stretch: 'items-stretch',
+    };
+
+    const sizeMap = {
+      small: 'flex-[0.3]',
+      medium: 'flex-1',
+      large: 'flex-[1.5]',
+    };
+
+    const classes = [
+      'fibo-column',
+      'flex',
+      'flex-col',
+      alignmentMap[this._mainAxisAlignment],
+      crossAlignmentMap[this._crossAxisAlignment],
+      this._size ? sizeMap[this._size] : '',
+      ...this._classNames,
+    ];
+
+    const style = this.getStyle();
+
+    if (this._spacing) {
+      if (typeof this._spacing === 'number') {
+        style.gap = `${this._spacing}px`;
+      } else {
+        if (!isNaN(Number(this._spacing))) {
+             style.gap = `${Number(this._spacing) * 4}px`;
+        } else {
+             style.gap = this._spacing;
+        }
+      }
+    }
+
+    const className = classes.filter(Boolean).join(' ');
+    const children = this.processChildren();
+
+    return React.createElement(
+      'div',
+      {
+        className,
+        style,
+        ...this._props,
+      },
+      ...children
+    );
+  }
+}
+
+
+export const Column = createBuilder(ColumnBuilder);
+
+export interface ColumnProps extends ChildrenProps {
+  mainAxisAlignment?: MainAxisAlignment;
+  crossAxisAlignment?: CrossAxisAlignment;
+  spacing?: string | number;
+  size?: 'small' | 'medium' | 'large';
+}

package/src/layout/Container/index.ts

@@ -0,0 +1,28 @@
+import React, { ReactElement } from 'react';
+import { FiboBuilder, createBuilder } from '../../core/builder';
+import { ChildrenProps } from '../../core/types';
+
+class ContainerBuilder extends FiboBuilder {
+  build(): ReactElement {
+    const className = this.getClassName();
+    const style = this.getStyle();
+    const children = this.processChildren();
+
+    return React.createElement(
+      'div',
+      {
+        className: `fibo-container ${className}`,
+        style,
+        ...this._props,
+      },
+      ...children
+    );
+  }
+}
+
+
+export const Container = createBuilder(ContainerBuilder);
+
+export interface ContainerProps extends ChildrenProps {
+  maxWidth?: string | number;
+}

package/src/layout/DashboardLayout/index.ts

@@ -0,0 +1,106 @@
+import React, { ReactElement, ReactNode, useState } from 'react';
+import { FiboBuilder, createBuilder } from '../../core/builder';
+
+
+
+
+
+
+
+
+
+const DashboardLayoutInner = React.memo((props: any) => {
+    const { sidebar, header, children, className, style, ...rest } = props;
+    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+    return React.createElement(
+        'div',
+        {
+            className: `h-full w-full bg-[#0B0C15] overflow-hidden relative ${className || ''}`,
+            style,
+            ...rest
+        },
+        
+        isMobileMenuOpen && React.createElement('div', {
+            className: 'fixed inset-0 z-40 bg-black/50 backdrop-blur-sm transition-opacity lg:hidden',
+            onClick: () => setIsMobileMenuOpen(false)
+        }),
+
+        
+        
+        React.createElement('button', {
+            className: 'lg:hidden fixed top-4 right-4 z-50 p-2 rounded-lg bg-[#1A1B23] border border-white/10 text-white shadow-lg',
+            onClick: () => setIsMobileMenuOpen(!isMobileMenuOpen)
+        }, 
+            React.createElement('div', { className: isMobileMenuOpen ? 'i-heroicons-x-mark w-6 h-6' : 'i-heroicons-bars-3 w-6 h-6' })
+        ),
+
+        
+        React.createElement(
+            'div',
+            {
+                className: 'grid h-full w-full lg:grid-cols-[260px_1fr] transition-all duration-300' 
+            },
+
+            
+            React.createElement(
+                'aside',
+                {
+                    className: `
+                        fixed inset-y-0 left-0 z-50 w-[260px] bg-[#0B0C15] border-r border-white/5 transition-transform duration-300 transform
+                        lg:relative lg:translate-x-0 
+                        ${isMobileMenuOpen ? 'translate-x-0 shadow-2xl' : '-translate-x-full'}
+                    `
+                },
+                sidebar
+            ),
+
+            
+            React.createElement(
+                'main',
+                {
+                    className: 'flex flex-col min-w-0 h-full overflow-hidden relative'
+                },
+                
+                header && React.createElement('div', { className: 'flex-shrink-0' }, header),
+                
+                
+                React.createElement(
+                    'div',
+                    { className: 'flex-1 overflow-y-auto scrollbar-hide p-4 lg:p-0' },
+                    children
+                )
+            )
+        )
+    );
+});
+
+class DashboardLayoutBuilder extends FiboBuilder {
+    private _sidebar?: ReactNode;
+    private _header?: ReactNode;
+
+    sidebar(component: ReactNode): this {
+        this._sidebar = component;
+        return this;
+    }
+
+    header(component: ReactNode): this {
+        this._header = component;
+        return this;
+    }
+
+    build(): ReactElement {
+        const props = {
+            sidebar: this._sidebar,
+            header: this._header,
+            className: this.getClassName(),
+            style: this.getStyle(),
+            children: this.processChildren(),
+            ...this._props
+        };
+        return React.createElement(DashboardLayoutInner, props);
+    }
+}
+
+
+export const DashboardLayout = createBuilder(DashboardLayoutBuilder);

package/src/layout/Header/index.ts

@@ -0,0 +1,50 @@
+import React, { ReactElement } from 'react';
+import { FiboBuilder, createBuilder } from '../../core/builder';
+
+
+
+
+
+const HeaderInner = React.memo((props: any) => {
+    const { height = 64, sticky, className, style, children, ...rest } = props;
+
+    return React.createElement(
+        'header',
+        {
+            className: `flex items-center px-6 border-b border-gray-200 bg-white/80 backdrop-blur-md z-10 w-full ${sticky ? 'sticky top-0' : ''} ${className || ''}`,
+            style: { height, minHeight: height, ...style },
+            ...rest
+        },
+        children
+    );
+});
+
+class HeaderBuilder extends FiboBuilder {
+    private _height: number | string = 64;
+    private _sticky: boolean = false;
+
+    height(height: number | string): this {
+        this._height = height;
+        return this;
+    }
+
+    sticky(enable: boolean = true): this {
+        this._sticky = enable;
+        return this;
+    }
+
+    build(): ReactElement {
+        const props = {
+            height: this._height,
+            sticky: this._sticky,
+            className: this.getClassName(),
+            style: this.getStyle(),
+            children: this.processChildren(),
+            ...this._props
+        };
+        return React.createElement(HeaderInner, props);
+    }
+}
+
+
+export const Header = createBuilder(HeaderBuilder);

package/src/layout/Line/index.ts

@@ -0,0 +1,41 @@
+import React, { ReactElement } from 'react';
+import { FiboBuilder, createBuilder } from '../../core/builder';
+import { ChildrenProps } from '../../core/types';
+
+class LineBuilder extends FiboBuilder {
+  private _sizeHeight?: string;
+
+  sizeHeight(value: string): this {
+    this._sizeHeight = value;
+    return this;
+  }
+
+  build(): ReactElement {
+    const classes = ['fibo-line', 'flex', 'flex-row', ...this._classNames];
+    const className = classes.filter(Boolean).join(' ');
+    const style = this.getStyle();
+    
+    if (this._sizeHeight) {
+      style.height = this._sizeHeight;
+    }
+
+    const children = this.processChildren();
+
+    return React.createElement(
+      'div',
+      {
+        className,
+        style,
+        ...this._props,
+      },
+      ...children
+    );
+  }
+}
+
+
+export const Line = createBuilder(LineBuilder);
+
+export interface LineProps extends ChildrenProps {
+  sizeHeight?: string;
+}

package/src/layout/Row/index.ts

@@ -0,0 +1,93 @@
+import React, { ReactElement } from 'react';
+import { FiboBuilder, createBuilder } from '../../core/builder';
+import { ChildrenProps, MainAxisAlignment, CrossAxisAlignment } from '../../core/types';
+
+class RowBuilder extends FiboBuilder {
+  private _mainAxisAlignment: MainAxisAlignment = 'start';
+  private _crossAxisAlignment: CrossAxisAlignment = 'start';
+  private _spacing?: string | number;
+
+  mainAxisAlignment(alignment: MainAxisAlignment): this {
+    this._mainAxisAlignment = alignment;
+    return this;
+  }
+
+  crossAxisAlignment(alignment: CrossAxisAlignment): this {
+    this._crossAxisAlignment = alignment;
+    return this;
+  }
+
+  spacing(value: string | number): this {
+    this._spacing = value;
+    return this;
+  }
+
+  items(children: ReactElement[]): this {
+    this.children(children);
+    return this;
+  }
+
+  build(): ReactElement {
+    const alignmentMap: Record<MainAxisAlignment, string> = {
+      start: 'justify-start',
+      center: 'justify-center',
+      end: 'justify-end',
+      spaceBetween: 'justify-between',
+      spaceAround: 'justify-around',
+      spaceEvenly: 'justify-evenly',
+    };
+
+    const crossAlignmentMap: Record<CrossAxisAlignment, string> = {
+      start: 'items-start',
+      center: 'items-center',
+      end: 'items-end',
+      stretch: 'items-stretch',
+    };
+
+    const classes = [
+      'fibo-row',
+      'flex',
+      'flex-row',
+      alignmentMap[this._mainAxisAlignment],
+      crossAlignmentMap[this._crossAxisAlignment],
+      ...this._classNames,
+    ];
+
+    const style = this.getStyle();
+
+    if (this._spacing) {
+      if (typeof this._spacing === 'number') {
+        style.gap = `${this._spacing}px`;
+      } else {
+        
+        if (!isNaN(Number(this._spacing))) {
+             style.gap = `${Number(this._spacing) * 4}px`; 
+        } else {
+             style.gap = this._spacing; 
+        }
+      }
+    }
+
+    const className = classes.filter(Boolean).join(' ');
+    const children = this.processChildren();
+
+    return React.createElement(
+      'div',
+      {
+        className,
+        style,
+        ...this._props,
+      },
+      ...children
+    );
+  }
+}
+
+
+export const Row = createBuilder(RowBuilder);
+
+export interface RowProps extends ChildrenProps {
+  mainAxisAlignment?: MainAxisAlignment;
+  crossAxisAlignment?: CrossAxisAlignment;
+  spacing?: string | number;
+}

package/src/layout/Scaffold/index.ts

@@ -0,0 +1,133 @@
+import React, { ReactElement } from 'react';
+import { FiboBuilder, createBuilder } from '../../core/builder';
+import { ProviderWrapper } from '../../core/StateWrapper';
+
+
+
+interface ScaffoldConfig {
+  theme?: any;
+  locale?: string;
+  providers?: Record<string, any>;
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+const ScaffoldInner = React.memo((props: ScaffoldConfig) => {
+  const {
+    theme,
+    locale,
+    providers = {},
+    className,
+    style,
+    children,
+  } = props;
+
+  
+  const allProviders = new Map<string, any>();
+
+  
+  if (theme) {
+    allProviders.set('theme', theme);
+  }
+
+  
+  if (locale) {
+    allProviders.set('locale', locale);
+  }
+
+  
+  Object.entries(providers).forEach(([key, value]) => {
+    allProviders.set(key, value);
+  });
+
+  
+  if (allProviders.size > 0) {
+    return React.createElement(
+      ProviderWrapper,
+      { 
+        providers: allProviders,
+        children: React.createElement(
+          'div',
+          {
+            className: `fibo-scaffold ${className || ''}`,
+            style: {
+              minHeight: '100vh',
+              display: 'flex',
+              flexDirection: 'column',
+              ...style,
+            },
+          },
+          children
+        )
+      }
+    );
+  }
+
+  
+  return React.createElement(
+    'div',
+    {
+      className: `fibo-scaffold ${className || ''}`,
+      style: {
+        minHeight: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
+        ...style,
+      },
+    },
+    children
+  );
+});
+
+class ScaffoldBuilder extends FiboBuilder {
+  private _theme?: any;
+  private _locale?: string;
+  private _customProviders: Record<string, any> = {};
+
+  
+  theme(theme: any): this {
+    this._theme = theme;
+    return this;
+  }
+
+  
+  locale(locale: string): this {
+    this._locale = locale;
+    return this;
+  }
+
+  
+  providers(providers: Record<string, any>): this {
+    this._customProviders = { ...this._customProviders, ...providers };
+    return this;
+  }
+
+  
+  provider(key: string, value: any): this {
+    this._customProviders[key] = value;
+    return this;
+  }
+
+  build(): ReactElement {
+    const props: ScaffoldConfig = {
+      theme: this._theme,
+      locale: this._locale,
+      providers: this._customProviders,
+      className: this.getClassName(),
+      style: this.getStyle(),
+      children: this.processChildren(),
+    };
+
+    return React.createElement(ScaffoldInner, props);
+  }
+}
+
+
+export const Scaffold = createBuilder(ScaffoldBuilder);
+
+export interface ScaffoldProps {
+  theme?: any;
+  locale?: string;
+  providers?: Record<string, any>;
+}

package/src/layout/ScrollView/index.ts

@@ -0,0 +1,67 @@
+import React, { ReactElement } from 'react';
+import { FiboBuilder, createBuilder } from '../../core/builder';
+import { BaseProps } from '../../core/types';
+
+
+type ScrollDirection = 'vertical' | 'horizontal' | 'both';
+type ScrollbarVisibility = 'hidden' | 'visible' | 'auto';
+
+class ScrollViewBuilder extends FiboBuilder {
+  private _direction: ScrollDirection = 'vertical';
+  private _scrollbar: ScrollbarVisibility = 'auto';
+
+  direction(direction: ScrollDirection): this {
+    this._direction = direction;
+    return this;
+  }
+
+  horizontal(): this {
+    this._direction = 'horizontal';
+    return this;
+  }
+
+  vertical(): this {
+    this._direction = 'vertical';
+    return this;
+  }
+
+  scrollbar(visibility: ScrollbarVisibility): this {
+    this._scrollbar = visibility;
+    return this;
+  }
+
+  build(): ReactElement {
+    const scrollStyles: React.CSSProperties = {
+        overflowX: this._direction === 'horizontal' || this._direction === 'both' ? 'auto' : 'hidden',
+        overflowY: this._direction === 'vertical' || this._direction === 'both' ? 'auto' : 'hidden',
+        WebkitOverflowScrolling: 'touch', 
+        display: 'flex',
+        flexDirection: this._direction === 'horizontal' ? 'row' : 'column',
+        ...this.getStyle()
+    };
+
+    const classNames = [...this.getClassName().split(' ')];
+    
+    if (this._scrollbar === 'hidden') {
+        classNames.push('scrollbar-hide'); 
+        
+        scrollStyles.scrollbarWidth = 'none'; 
+        
+        scrollStyles['msOverflowStyle'] = 'none'; 
+    }
+
+    return React.createElement('div', {
+        className: classNames.join(' '),
+        style: scrollStyles,
+        ...this._props
+    }, ...this._children);
+  }
+}
+
+
+export const ScrollView = createBuilder(ScrollViewBuilder);
+
+export interface ScrollViewProps extends BaseProps {
+  direction?: ScrollDirection;
+  scrollbar?: ScrollbarVisibility;
+}