@micro.app.dev/shared v0.1.3

@micro.app.dev/shared

Shared components, contexts, and services for MicroApp.

Installation

npm install @micro.app.dev/shared
# or
yarn add @micro.app.dev/shared

Features

• Theme context and provider
• App context for authentication state
• Storage services for todos, budget, and authentication
• Reusable UI components

Usage

Theme Provider

import { ThemeProvider } from '@micro.app.dev/shared';

function App() {
  return (
    <ThemeProvider>
      {/* Your app content */}
    </ThemeProvider>
  );
}

Using Theme

import { useTheme } from '@micro.app.dev/shared';

function MyComponent() {
  const { colors, isDark, toggleTheme } = useTheme();
  
  return (
    <View style={{ backgroundColor: colors.background }}>
      <Text style={{ color: colors.text }}>
        Current theme: {isDark ? 'Dark' : 'Light'}
      </Text>
      <Button title="Toggle Theme" onPress={toggleTheme} />
    </View>
  );
}

App Context

import { AppContext, useAppContext } from '@micro.app.dev/shared';

function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  
  return (
    <AppContext.Provider value={{ isAuthenticated, setIsAuthenticated }}>
      {/* Your app content */}
    </AppContext.Provider>
  );
}

// In a component
function MyComponent() {
  const { isAuthenticated, setIsAuthenticated } = useAppContext();
  
  return (
    <Button 
      title={isAuthenticated ? 'Logout' : 'Login'} 
      onPress={() => setIsAuthenticated(!isAuthenticated)} 
    />
  );
}

Storage Services

import { todoStorage, budgetStorage, authStorage } from '@micro.app.dev/shared';

// Todo storage
const todos = await todoStorage.getTodos();
await todoStorage.addTodo({ id: '1', title: 'New Todo', completed: false });

// Budget storage
const expenses = await budgetStorage.getExpenses();
await budgetStorage.addExpense({ id: '1', amount: 100, category: 'Food' });

// Auth storage
await authStorage.setToken('your-auth-token');
const token = await authStorage.getToken();

License

MIT