fiboui 1.0.0

package/src/core/StateWrapper.tsx

@@ -0,0 +1,105 @@
+import { useState, useEffect, createContext, useContext, ReactNode } from 'react';
+import { Observable, Signal } from './state';
+
+
+
+
+
+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

@@ -0,0 +1,259 @@
+import { CSSProperties, ReactElement, ReactNode } from 'react';
+import { ResponsiveStyles } from './types';
+import { Observable, Signal } from './state';
+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;
+  }
+
+  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;
+  }
+
+  children(children: ReactNode | ReactNode[]): this {
+    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;
+    });
+    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[] {
+    return this._children;
+  }
+
+  abstract build(): ReactElement;
+}
+
+type StyleBuilder<T> = T & {
+  [K in keyof 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 (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

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

@@ -0,0 +1,27 @@
+import { MouseEvent } from 'react';
+
+export const createRipple = (event: MouseEvent<HTMLElement>, color: string = 'rgba(255, 255, 255, 0.3)') => {
+  const button = event.currentTarget;
+  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/icons.tsx

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

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