Package Exports

@micro.app.dev/shared
@micro.app.dev/shared/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@micro.app.dev/shared) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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