fiboui 1.0.0 → 1.0.2

package/src/examples/ScaffoldExamples.tsx

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

@@ -1,149 +0,0 @@
-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();
-}