fiboui 1.0.0

package/src/examples/ScaffoldExamples.tsx

@@ -0,0 +1,299 @@
+
+
+import { Scaffold } from '../layout/Scaffold';
+import { Box } from '../structure/Box';
+import { Text } from '../content/Text';
+import { Button } from '../interactive/Button';
+import { Header } from '../layout/Header';
+import { Row } from '../layout/Row';
+import { Column } from '../layout/Column';
+import { signal, createStore } from '../core/state';
+
+
+
+
+
+
+const lightTheme = {
+  primary: '#3B82F6',
+  secondary: '#10B981',
+  background: '#FFFFFF',
+  text: '#1F2937',
+  mode: 'light' as const,
+};
+
+const darkTheme = {
+  primary: '#60A5FA',
+  secondary: '#34D399',
+  background: '#1F2937',
+  text: '#F9FAFB',
+  mode: 'dark' as const,
+};
+
+
+const currentTheme = signal<typeof lightTheme | typeof darkTheme>(lightTheme);
+
+
+const appStore = createStore({
+  user: {
+    name: 'Guest',
+    email: '',
+    isLoggedIn: false,
+  },
+  notifications: [],
+  settings: {
+    language: 'pt-BR',
+    timezone: 'America/Sao_Paulo',
+  },
+});
+
+
+
+
+
+function AppHeader() {
+  const theme = currentTheme.value;
+  const user = appStore.getState().user;
+
+  return Header()
+    .height(64)
+    .children(
+      Row()
+        .mainAxisAlignment('spaceBetween')
+        .crossAxisAlignment('center')
+        .padding('0 24px')
+        .children([
+          Text('🏗️ My App').variant('h2').color(theme.primary).build(),
+
+          Row()
+            .spacing(16)
+            .children([
+              Text(user.name).variant('body').build(),
+              Button()
+                .text(theme.mode === 'light' ? '🌙' : '☀️')
+                .variant('outline')
+                .onPress(() => {
+                  currentTheme.value =
+                    theme.mode === 'light' ? darkTheme : lightTheme;
+                })
+                .build(),
+            ])
+            .build(),
+        ])
+        .build()
+    )
+    .build();
+}
+
+function AppContent() {
+  const theme = currentTheme.value;
+
+  return Box()
+    .flex('1')
+    .padding('24px')
+    .backgroundColor(theme.background)
+    .children(
+      Column()
+        .spacing(24)
+        .children([
+          Text('Welcome to FiboUI!').variant('h1').color(theme.text).build(),
+          Text('This app uses Scaffold for global configuration.')
+            .variant('body')
+            .color(theme.text)
+            .build(),
+
+          Box()
+            .padding('24px')
+            .backgroundColor(theme.primary)
+            .borderRadius('12px')
+            .children(
+              Text('Themed Box')
+                .variant('h3')
+                .color('#FFFFFF')
+                .build()
+            )
+            .build(),
+        ])
+        .build()
+    )
+    .build();
+}
+
+function AppFooter() {
+  const theme = currentTheme.value;
+
+  return Box()
+    .padding('16px 24px')
+    .borderTop(`1px solid ${theme.primary}`)
+    .backgroundColor(theme.background)
+    .children(
+      Text('© 2024 My App - Built with FiboUI')
+        .variant('caption')
+        .color(theme.text)
+        .textAlign('center')
+        .build()
+    )
+    .build();
+}
+
+
+
+
+
+export function App() {
+  return (
+    Scaffold()
+      
+      .theme(currentTheme.value)
+
+      
+      .locale('pt-BR')
+
+      
+      .providers({
+        store: appStore,
+        theme: currentTheme,
+      })
+
+      
+      .bindSignal(currentTheme)
+
+      
+      .children([
+        AppHeader(),
+        AppContent(),
+        AppFooter(),
+      ])
+      .build()
+  );
+}
+
+
+
+
+
+const ecommerceTheme = {
+  primary: '#FF6B6B',
+  secondary: '#4ECDC4',
+  background: '#F7F7F7',
+  text: '#2C3E50',
+};
+
+const ecommerceStore = createStore({
+  cart: [],
+  products: [],
+  user: null,
+});
+
+export function EcommerceApp() {
+  return (
+    Scaffold()
+      .theme(ecommerceTheme)
+      .locale('pt-BR')
+      .provider('cart', ecommerceStore)
+      .provider('analytics', { track: () => {} })
+      .backgroundColor(ecommerceTheme.background)
+      .children([
+        
+        Header()
+          .height(80)
+          .children(
+            Row()
+              .mainAxisAlignment('spaceBetween')
+              .padding('0 48px')
+              .children([
+                Text('🛒 Shop').variant('h2').build(),
+                Text('Cart (0)').variant('body').build(),
+              ])
+              .build()
+          )
+          .build(),
+
+        
+        Box()
+          .flex('1')
+          .padding('48px')
+          .children(
+            Text('Products will go here')
+              .variant('h3')
+              .build()
+          )
+          .build(),
+      ])
+      .build()
+  );
+}
+
+
+
+
+
+export function DashboardApp() {
+  return (
+    Scaffold()
+      .theme(darkTheme)
+      .locale('en-US')
+      .providers({
+        auth: createStore({ user: null, token: null }),
+        notifications: createStore({ items: [] }),
+        settings: createStore({ theme: 'dark', sidebar: 'expanded' }),
+      })
+      .children([
+        
+        Box()
+          .display('flex')
+          .height('100vh')
+          .children([
+            
+            Box()
+              .width('260px')
+              .backgroundColor('#1E293B')
+              .children(
+                Text('Sidebar').color('#FFF').padding('24px').build()
+              )
+              .build(),
+
+            
+            Box()
+              .flex('1')
+              .display('flex')
+              .flexDirection('column')
+              .children([
+                
+                Box()
+                  .height('64px')
+                  .backgroundColor('#0F172A')
+                  .children(
+                    Text('Dashboard')
+                      .color('#FFF')
+                      .padding('0 24px')
+                      .lineHeight('64px')
+                      .build()
+                  )
+                  .build(),
+
+                
+                Box()
+                  .flex('1')
+                  .padding('24px')
+                  .backgroundColor('#0F172A')
+                  .children(
+                    Text('Dashboard content')
+                      .color('#FFF')
+                      .build()
+                  )
+                  .build(),
+              ])
+              .build(),
+          ])
+          .build(),
+      ])
+      .build()
+  );
+}
+
+
+
+
+
+

package/src/examples/StateExamples.tsx

@@ -0,0 +1,149 @@
+import { Box } from '../structure/Box';
+import { Text } from '../content/Text';
+import { Button } from '../interactive/Button';
+import { signal, computed, observable, createStore } from '../core/state';
+
+
+
+
+
+export function SignalCounterExample() {
+  const count = signal(0);
+  const doubled = computed(() => count.value * 2);
+
+  return Box()
+    .display('flex')
+    .flexDirection('column')
+    .gap('16px')
+    .padding('24px')
+    .border('1px solid #E5E7EB')
+    .borderRadius('8px')
+    .children([
+      Text(`Count: ${count.value}`).variant('h3').build(),
+      Text(`Doubled: ${doubled.value}`).variant('body').build(),
+      Box()
+        .display('flex')
+        .gap('8px')
+        .children([
+          Button()
+            .text('Increment')
+            .onPress(() => count.value++)
+            .build(),
+          Button()
+            .text('Decrement')
+            .onPress(() => count.value--)
+            .build(),
+        ])
+        .build(),
+    ])
+    .bindSignal(count)
+    .bindSignal(doubled)
+    .build();
+}
+
+
+
+
+
+export function ObservableExample() {
+  const state = observable({ name: 'John', age: 25 });
+
+  return Box()
+    .display('flex')
+    .flexDirection('column')
+    .gap('16px')
+    .padding('24px')
+    .border('1px solid #E5E7EB')
+    .borderRadius('8px')
+    .children([
+      Text(`Name: ${state.get().name}`).variant('body').build(),
+      Text(`Age: ${state.get().age}`).variant('body').build(),
+      Button()
+        .text('Update')
+        .onPress(() => state.set({ name: 'Jane', age: 30 }))
+        .build(),
+    ])
+    .observe(state)
+    .build();
+}
+
+
+
+
+
+const appStore = createStore({
+  user: { name: 'Guest', loggedIn: false },
+  theme: 'light',
+});
+
+export function StoreExample() {
+  const state = appStore.getState();
+
+  return Box()
+    .display('flex')
+    .flexDirection('column')
+    .gap('16px')
+    .padding('24px')
+    .border('1px solid #E5E7EB')
+    .borderRadius('8px')
+    .children([
+      Text(`User: ${state.user.name}`).variant('body').build(),
+      Text(`Theme: ${state.theme}`).variant('body').build(),
+      Button()
+        .text('Login')
+        .onPress(() =>
+          appStore.setState({ user: { name: 'John Doe', loggedIn: true } })
+        )
+        .build(),
+    ])
+    .observer()
+    .build();
+}
+
+
+
+
+
+export function ProviderExample() {
+  const theme = { primary: '#3B82F6', secondary: '#10B981' };
+
+  return Box()
+    .provide('theme', theme)
+    .padding('24px')
+    .children([
+      Box()
+        .padding('16px')
+        .backgroundColor('#3B82F6')
+        .borderRadius('8px')
+        .children(
+          Text('Themed Box').color('#FFF').variant('h3').build()
+        )
+        .build(),
+    ])
+    .build();
+}
+
+
+
+
+
+export function LocalStateExample() {
+  return Box()
+    .state('count', 0)
+    .state('name', 'Guest')
+    .display('flex')
+    .flexDirection('column')
+    .gap('16px')
+    .padding('24px')
+    .border('1px solid #E5E7EB')
+    .borderRadius('8px')
+    .children([
+      Text('Local State Example').variant('h3').build(),
+      Text('Count: 0').variant('body').build(),
+      Text('Name: Guest').variant('body').build(),
+      Button()
+        .text('Increment')
+        .build(),
+    ])
+    .build();
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+export * from './core';
+export * from './theme';
+export * from './layout';
+export * from './content';
+export * from './interactive';
+export * from './structure';
+
+import './styles/base.css';

package/src/interactive/Button/index.ts

@@ -0,0 +1,218 @@
+import React, { ReactElement, ReactNode } from 'react';
+import { FiboBuilder, createBuilder } from '../../core/builder';
+import { BaseProps, ButtonVariant } from '../../core/types';
+
+
+type ExtendedButtonVariant = ButtonVariant | 'ghost' | 'soft' | 'outline' | 'text';
+type ButtonSize = 'sm' | 'md' | 'lg';
+type ButtonShape = 'default' | 'pill' | 'square';
+
+const ButtonInner = React.memo((props: any) => {
+    const { 
+        text, 
+        variant, 
+        size, 
+        onPress, 
+        disabled, 
+        icon, 
+        shape, 
+        shadow, 
+        className, 
+        style, 
+        ...rest 
+    } = props;
+    
+    
+    const finalStyle = { ...style };
+    
+    
+    const sizeStyles: Record<ButtonSize, any> = {
+        sm: { padding: '6px 14px', fontSize: '13px', gap: '6px', height: '32px' },
+        md: { padding: '10px 22px', fontSize: '15px', gap: '8px', height: '44px' }, 
+        lg: { padding: '16px 32px', fontSize: '17px', gap: '10px', height: '56px' }
+    };
+    Object.assign(finalStyle, sizeStyles[size as ButtonSize]);
+
+    
+    if (shape === 'pill') {
+        finalStyle.borderRadius = '9999px';
+    } else if (shape === 'square') {
+        finalStyle.borderRadius = '12px'; 
+    } else {
+        finalStyle.borderRadius = '14px'; 
+    }
+
+    
+    if (shadow === 'soft') {
+        
+        finalStyle.boxShadow = '0 8px 20px -6px rgba(59, 130, 246, 0.4)';
+    }
+
+    
+    if (variant === 'ghost') {
+        finalStyle.backgroundColor = 'transparent';
+        finalStyle.color = '#4B5563';
+        finalStyle.boxShadow = 'none';
+        finalStyle.border = '1px solid transparent';
+    } 
+    else if (variant === 'text') {
+        finalStyle.backgroundColor = 'transparent';
+        finalStyle.color = '#4B5563';
+        finalStyle.boxShadow = 'none';
+        finalStyle.border = 'none';
+        finalStyle.paddingLeft = '8px';
+        finalStyle.paddingRight = '8px';
+    }
+    else if (variant === 'soft') {
+        
+        finalStyle.backgroundColor = '#EEF2FF'; 
+        finalStyle.color = '#4F46E5'; 
+        finalStyle.boxShadow = 'none';
+        finalStyle.border = 'none';
+    } else if (variant === 'outline') {
+        finalStyle.backgroundColor = 'transparent';
+        finalStyle.border = '1.5px solid #E5E7EB'; 
+        finalStyle.color = '#374151';
+        finalStyle.boxShadow = 'none';
+    }
+
+    const children = [];
+    if (icon) {
+      children.push(icon);
+    }
+    if (text) {
+      children.push(text);
+    }
+
+    return React.createElement(
+      'button',
+      {
+        className,
+        style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            opacity: disabled ? 0.6 : 1,
+            fontWeight: 600,
+            whiteSpace: 'nowrap',
+            ...finalStyle
+        },
+        onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
+          if (!disabled) {
+            
+            if (document.documentElement.classList.contains('fibo-theme-material')) {
+              import('../../core/effects').then(({ createRipple }) => {
+                createRipple(e);
+              });
+            }
+            onPress?.();
+          }
+        },
+        disabled: disabled,
+        ...rest,
+      },
+      ...children
+    );
+});
+
+class ButtonBuilder extends FiboBuilder {
+  private _text: string = '';
+  private _variant: ExtendedButtonVariant = 'elevated';
+  private _size: ButtonSize = 'md';
+  private _onPress?: () => void;
+  private _disabled: boolean = false;
+  private _icon?: ReactNode;
+  private _shape: ButtonShape = 'default';
+  private _shadow: 'none' | 'soft' = 'none';
+
+  constructor(text: string = '') {
+    super();
+    this._text = text;
+  }
+
+  text(value: string): this {
+    this._text = value;
+    return this;
+  }
+
+  variant(variant: ExtendedButtonVariant): this {
+    this._variant = variant;
+    return this;
+  }
+
+  size(size: ButtonSize): this {
+    this._size = size;
+    return this;
+  }
+
+  onPress(handler: () => void): this {
+    this._onPress = handler;
+    return this;
+  }
+
+  disabled(value: boolean = true): this {
+    this._disabled = value;
+    return this;
+  }
+
+  icon(icon: ReactNode): this {
+    this._icon = icon;
+    return this;
+  }
+
+  shape(value: ButtonShape): this {
+    this._shape = value;
+    return this;
+  }
+
+  shadow(value: 'none' | 'soft'): this {
+    this._shadow = value;
+    return this;
+  }
+
+  build(): ReactElement {
+    const className = [
+      'fibo-button',
+      `fibo-button-${this._variant}`,
+      'active:scale-[0.96]', 
+      'transform',
+      'transition-all',
+      'duration-200',
+      'ease-out',
+      ...this._classNames,
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    const props = {
+        text: this._text,
+        variant: this._variant,
+        size: this._size,
+        onPress: this._onPress,
+        disabled: this._disabled,
+        icon: this._icon,
+        shape: this._shape,
+        shadow: this._shadow,
+        className: className,
+        style: this.getStyle(),
+        ...this._props
+    };
+
+    return React.createElement(ButtonInner, props);
+  }
+}
+
+
+export const Button = createBuilder(ButtonBuilder);
+
+export interface ButtonProps extends BaseProps {
+  text: string;
+  variant?: ExtendedButtonVariant;
+  size?: ButtonSize;
+  onPress?: () => void;
+  disabled?: boolean;
+  icon?: ReactNode;
+  shape?: ButtonShape;
+  shadow?: 'none' | 'soft';
+}