fiboui 1.0.2 → 2.0.0

package/src/core/StateWrapper.tsx

@@ -1,131 +0,0 @@
-import { useState, useEffect, createContext, useContext, ReactNode, useRef } from 'react';
-import { Observable, Signal, Tracker } from './state';
-
-export function Observer({ children }: { children: () => ReactNode }) {
-    const [, forceUpdate] = useState({});
-    const tracker = useRef<Tracker | null>(null);
-
-    if (!tracker.current) {
-        tracker.current = new Tracker(() => {
-             forceUpdate({});
-        });
-    }
-
-    useEffect(() => {
-        return () => {
-            tracker.current?.dispose();
-        }
-    }, []);
-
-    let result;
-    try {
-        result = tracker.current.execute(children);
-    } catch (e) {
-        console.error("Observer render error", e);
-        result = null;
-    }
-    return <>{result}</>;
-} 
-
-
-
-
-
-export const StateContext = createContext<Map<string, any>>(new Map());
-
-export function useStateContext() {
-  return useContext(StateContext);
-}
-
-
-
-
-
-interface StateWrapperProps {
-  stateMap: Map<string, any>;
-  children: ReactNode;
-}
-
-
-export function StateWrapper({ stateMap, children }: StateWrapperProps) {
-  const [state] = useState(() => new Map(stateMap));
-
-  return (
-    <StateContext.Provider value={state}>
-      {children}
-    </StateContext.Provider>
-  );
-}
-
-
-
-
-
-interface ObserverWrapperProps {
-  observables: Set<Observable<any>>;
-  children: ReactNode;
-}
-
-
-export function ObserverWrapper({ observables, children }: ObserverWrapperProps) {
-  const [, forceUpdate] = useState({});
-
-  useEffect(() => {
-    const unsubscribers = Array.from(observables).map(obs =>
-      obs.subscribe(() => forceUpdate({}))
-    );
-    
-    return () => unsubscribers.forEach(unsub => unsub());
-  }, [observables]);
-
-  return <>{children}</>;
-}
-
-
-
-
-
-interface SignalWrapperProps {
-  signals: Set<Signal<any>>;
-  children: ReactNode;
-}
-
-
-export function SignalWrapper({ signals, children }: SignalWrapperProps) {
-  const [, forceUpdate] = useState({});
-
-  useEffect(() => {
-    const unsubscribers = Array.from(signals).map(sig =>
-      sig.subscribe(() => forceUpdate({}))
-    );
-    
-    return () => unsubscribers.forEach(unsub => unsub());
-  }, [signals]);
-
-  return <>{children}</>;
-}
-
-
-
-
-
-interface ProviderWrapperProps {
-  providers: Map<string, any>;
-  children: ReactNode;
-}
-
-export const ProviderContext = createContext<Map<string, any>>(new Map());
-
-export function useProvider<T>(key: string): T | undefined {
-  const providers = useContext(ProviderContext);
-  return providers.get(key);
-}
-
-
-export function ProviderWrapper({ providers, children }: ProviderWrapperProps) {
-  return (
-    <ProviderContext.Provider value={providers}>
-      {children}
-    </ProviderContext.Provider>
-  );
-}

package/src/core/builder.ts

@@ -1,301 +0,0 @@
-import React, { CSSProperties, ReactElement, ReactNode } from 'react';
-import { ResponsiveStyles } from './types';
-import { Observable, Signal } from './state';
-import { Observer } from './StateWrapper';
-import clsx from 'clsx';
-
-import { cssToTailwind } from '@metagptx/css-to-tailwind';
-
-export abstract class FiboBuilder {
-  protected _props: Record<string, any> = {};
-  protected _style: CSSProperties = {};
-  protected _cssStyles: CSSProperties = {};
-  protected _classNames: string[] = [];
-  protected _children: ReactNode[] = [];
-  protected _responsive?: ResponsiveStyles;
-  
-  
-  protected _state: Map<string, any> = new Map();
-  protected _providers: Map<string, any> = new Map();
-  protected _observers: Set<Observable<any>> = new Set();
-  protected _signals: Set<Signal<any>> = new Set();
-  protected _isObserver: boolean = false;
-
-
-
-  id(value: string): this {
-    this._props.id = value;
-    return this;
-  }
-
-  key(value: string | number): this {
-    this._props.key = value;
-    return this;
-  }
-
-  paddingHorizontal(value: string | number): this {
-    if (typeof value === 'number') {
-      this._classNames.push(`px-[${value}px]`);
-    } else {
-      this._classNames.push(`px-${value}`);
-    }
-    return this;
-  }
-
-  paddingVertical(value: string | number): this {
-    if (typeof value === 'number') {
-      this._classNames.push(`py-[${value}px]`);
-    } else {
-      this._classNames.push(`py-${value}`);
-    }
-    return this;
-  }
-
-
-
-  marginHorizontal(value: string | number): this {
-    if (typeof value === 'number') {
-      this._classNames.push(`mx-[${value}px]`);
-    } else {
-      this._classNames.push(`mx-${value}`);
-    }
-    return this;
-  }
-
-  marginVertical(value: string | number): this {
-    if (typeof value === 'number') {
-      this._classNames.push(`my-[${value}px]`);
-    } else {
-      this._classNames.push(`my-${value}`);
-    }
-    return this;
-  }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-  flexDirection(direction: 'row' | 'column'): this {
-    this._classNames.push(`flex-${direction}`);
-    return this;
-  }
-
-  alignItems(alignment: 'start' | 'center' | 'end' | 'stretch'): this {
-    this._classNames.push(`items-${alignment}`);
-    return this;
-  }
-
-  justifyContent(justify: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'): this {
-    this._classNames.push(`justify-${justify}`);
-    return this;
-  }
-
-
-
-
-
-
-
-  responsive(styles: ResponsiveStyles): this {
-    this._responsive = styles;
-    return this;
-  }
-
-  
-  
-  
-
-  
-  state<T>(key: string, initialValue: T): this {
-    this._state.set(key, initialValue);
-    return this;
-  }
-
-  
-  getState<T>(key: string): T | undefined {
-    return this._state.get(key);
-  }
-
-  
-  setState<T>(key: string, value: T): this {
-    this._state.set(key, value);
-    return this;
-  }
-
-  
-  provide<T>(key: string, value: T): this {
-    this._providers.set(key, value);
-    return this;
-  }
-
-  
-  consume<T>(key: string): T | undefined {
-    return this._providers.get(key);
-  }
-
-  
-  observer(): this {
-    this._isObserver = true;
-    return this;
-  }
-
-  
-  observe<T>(observable: Observable<T>): this {
-    this._observers.add(observable);
-    return this;
-  }
-
-  
-  bindSignal<T>(signal: Signal<T>): this {
-    this._signals.add(signal);
-    return this;
-  }
-
-  
-  protected hasStateManagement(): boolean {
-    return (
-      this._state.size > 0 ||
-      this._providers.size > 0 ||
-      this._observers.size > 0 ||
-      this._signals.size > 0 ||
-      this._isObserver
-    );
-  }
-
-  className(className: string): this {
-    this._classNames.push(className);
-    return this;
-  }
-
-  classNames(classNames: string[]): this {
-    this._classNames.push(...classNames);
-    return this;
-  }
-
-  css(styles: CSSProperties): this {
-    this._cssStyles = { ...this._cssStyles, ...styles };
-    return this;
-  }
-
-  style(style: CSSProperties): this {
-    this._style = { ...this._style, ...style };
-    return this;
-  }
-
-  props(props: Record<string, any>): this {
-    this._props = { ...this._props, ...props };
-    return this;
-  }
-
-  protected _childFunction?: () => ReactNode;
-
-  children(children: ReactNode | ReactNode[] | (() => ReactNode)): this {
-    if (typeof children === 'function') {
-        this._childFunction = children as () => ReactNode;
-        this._children = []; // Clear static children
-    } else {
-        const childArray = Array.isArray(children) ? children : [children];
-        this._children = childArray.map((child) => {
-          if (child && typeof child === 'object' && 'build' in child && typeof (child as any).build === 'function') {
-            return (child as any).build();
-          }
-          return child;
-        });
-        this._childFunction = undefined;
-    }
-    return this;
-  }
-
-  protected getClassName(): string {
-    if (Object.keys(this._cssStyles).length > 0) {
-       
-       const tailwindClasses = cssToTailwind(this._cssStyles as Record<string, string | number | undefined>);
-       if (tailwindClasses) {
-          this._classNames.push(tailwindClasses);
-       }
-    }
-    return clsx(this._classNames);
-  }
-
-  protected getStyle(): CSSProperties {
-    let finalStyle = { ...this._style, ...this._cssStyles };
-
-    if (this._responsive) {
-      if (this._responsive.mobile) {
-        finalStyle = { ...finalStyle, ...this._responsive.mobile };
-      }
-    }
-
-    return finalStyle;
-  }
-
-  protected processChildren(): ReactNode[] {
-    if (this._childFunction) {
-        const result = this._childFunction();
-        // Ensure result is an array for consistent consumption by subclasses using ...children
-        return Array.isArray(result) ? result : [result]; 
-    }
-    return this._children;
-  }
-  
-  protected getChildFunction(): (() => ReactNode) | undefined {
-      return this._childFunction;
-  }
-
-  abstract build(): ReactElement;
-}
-
-type KnownKeys<T> = {
-  [K in keyof T]: string extends K ? never : number extends K ? never : K
-} extends { [_ in keyof T]: infer U } ? U : never;
-
-type StyleBuilder<T> = T & {
-  [K in KnownKeys<CSSProperties>]-?: (value: CSSProperties[K]) => StyleBuilder<T>;
-};
-
-export function createBuilder<T extends FiboBuilder, Args extends any[]>(
-  BuilderClass: new (...args: Args) => T
-): (...args: Args) => StyleBuilder<T> {
-  return (...args: Args) => {
-    const instance = new BuilderClass(...args);
-    
-    return new Proxy(instance, {
-      get(target, prop, receiver) {
-        if (prop === 'build') {
-             return () => {
-                 // Check if this builder instance is marked as an observer
-                 // Accessing protected/private members via casting
-                 const isObserver = (target as any)._isObserver;
-                 if (isObserver) {
-                     return React.createElement(Observer, {
-                         children: () => target.build()
-                     });
-                 }
-                 
-                 // Normal build
-                 return target.build();
-             }
-        }
-
-        if (Reflect.has(target, prop)) {
-          return Reflect.get(target, prop, receiver);
-        }
-        
-        return (value: any) => {
-          target.css({ [prop]: value });
-          return receiver;
-        };
-      },
-    }) as StyleBuilder<T>;
-  };
-}

package/src/core/component.ts

@@ -1,49 +0,0 @@
-import { ReactNode } from 'react';
-import { ResponsiveStyles } from './types';
-
-export function processChildren(children: ReactNode | ReactNode[]): ReactNode[] {
-  const childArray = Array.isArray(children) ? children : [children];
-  
-  return childArray.map((child) => {
-    if (child && typeof child === 'object' && 'build' in child) {
-      return (child as any).build();
-    }
-    return child;
-  });
-}
-
-export function mergeStyles(...styles: (React.CSSProperties | undefined)[]): React.CSSProperties {
-  return styles.reduce<React.CSSProperties>((acc, style) => {
-    if (style) {
-      return { ...acc, ...style };
-    }
-    return acc;
-  }, {});
-}
-
-export function applyResponsiveStyles(
-  baseStyle: React.CSSProperties,
-  responsive?: ResponsiveStyles
-): React.CSSProperties {
-  if (!responsive) return baseStyle;
-
-  let finalStyle = { ...baseStyle };
-
-  if (typeof window !== 'undefined') {
-    const width = window.innerWidth;
-    
-    if (width < 768 && responsive.mobile) {
-      finalStyle = { ...finalStyle, ...responsive.mobile };
-    } else if (width >= 768 && width < 1024 && responsive.tablet) {
-      finalStyle = { ...finalStyle, ...responsive.tablet };
-    } else if (width >= 1024 && responsive.desktop) {
-      finalStyle = { ...finalStyle, ...responsive.desktop };
-    }
-  }
-
-  return finalStyle;
-}
-
-export function normalizeValue(value: string | number, unit = 'px'): string {
-  return typeof value === 'number' ? `${value}${unit}` : value;
-}

package/src/core/effects.ts

@@ -1,27 +0,0 @@
-
-
-export const createRipple = (event: { clientX: number, clientY: number }, button: HTMLElement, color: string = 'rgba(255, 255, 255, 0.3)') => {
-  if (!button) return;
-  const circle = document.createElement('span');
-  const diameter = Math.max(button.clientWidth, button.clientHeight);
-  const radius = diameter / 2;
-
-  const rect = button.getBoundingClientRect();  
-  
-  circle.style.width = circle.style.height = `${diameter}px`;
-  circle.style.left = `${event.clientX - rect.left - radius}px`;
-  circle.style.top = `${event.clientY - rect.top - radius}px`;
-  circle.style.position = 'absolute';
-  circle.style.borderRadius = '50%';
-  circle.style.transform = 'scale(0)';
-  circle.style.animation = 'fibo-ripple 600ms linear';
-  circle.style.backgroundColor = color;
-  circle.style.pointerEvents = 'none';
-
-  const rippleContainer = button.querySelector('.fibo-ripple-container') || button;
-  rippleContainer.appendChild(circle);
-
-  setTimeout(() => {
-    circle.remove();
-  }, 600);
-};

package/src/core/hooks.ts

@@ -1,48 +0,0 @@
-import { useState, useEffect } from 'react';
-import { Signal, ComputedSignal, Store, Observable } from './state';
-
-export function useSignal<T>(signal: Signal<T> | ComputedSignal<T>): T {
-  const [value, setValue] = useState(signal.value);
-
-  useEffect(() => {
-    // Initial sync
-    setValue(signal.value); 
-    
-    // Subscribe
-    const unsubscribe = signal.subscribe((newVal) => {
-      setValue(newVal);
-    });
-    
-    return unsubscribe;
-  }, [signal]);
-
-  return value;
-}
-
-export function useStore<T>(store: Store<T>): T {
-  const [state, setState] = useState(store.getState());
-
-  useEffect(() => {
-    setState(store.getState());
-    const unsubscribe = store.subscribe((newState) => {
-      setState(newState);
-    });
-    return unsubscribe;
-  }, [store]);
-
-  return state;
-}
-
-export function useObservable<T>(obs: Observable<T>): T {
-  const [val, setVal] = useState(obs.get());
-
-  useEffect(() => {
-    setVal(obs.get());
-    const unsubscribe = obs.subscribe((newVal) => {
-      setVal(newVal);
-    });
-    return unsubscribe;
-  }, [obs]);
-
-  return val;
-}

package/src/core/icons.tsx

@@ -1,57 +0,0 @@
-
-
-export const Icons = {
-  Heart: (
-    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
-    </svg>
-  ),
-  Eth: (
-    <svg width="14" height="24" viewBox="0 0 32 32" fill="currentColor">
-      <path d="M15.925 23.96l-9.815-5.8 9.815 13.84 9.825-13.84-9.825 5.8zm0-23.96l-9.815 16.275 9.815 5.675 9.825-5.675-9.825-16.275zm0 20.3l-8.915-5.265 8.915-12.42 8.925 12.42-8.925 5.265z" />
-    </svg>
-  ),
-  Verify: (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="#3B82F6" stroke="none">
-      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
-    </svg>
-  ),
-  More: (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-      <circle cx="12" cy="12" r="1" />
-      <circle cx="19" cy="12" r="1" />
-      <circle cx="5" cy="12" r="1" />
-    </svg>
-  ),
-  Clock: (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-      <circle cx="12" cy="12" r="10"></circle>
-      <polyline points="12 6 12 12 16 14"></polyline>
-    </svg>
-  ),
-  Info: (
-    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-        <circle cx="12" cy="12" r="10"></circle>
-        <line x1="12" y1="16" x2="12" y2="12"></line>
-        <line x1="12" y1="8" x2="12.01" y2="8"></line>
-    </svg>
-  ),
-  Check: (
-    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
-        <polyline points="22 4 12 14.01 9 11.01"></polyline>
-    </svg>
-  ),
-  Search: (
-    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-        <circle cx="11" cy="11" r="8"></circle>
-        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-    </svg>
-  ),
-  Close: (
-    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-        <line x1="18" y1="6" x2="6" y2="18"></line>
-        <line x1="6" y1="6" x2="18" y2="18"></line>
-    </svg>
-  )
-};

package/src/core/index.ts

@@ -1,6 +0,0 @@
-export * from './types';
-export * from './builder';
-export * from './component';
-export * from './state';
-export * from './StateWrapper';
-export * from './hooks';