bablus

v1.0.0

Published

3 months ago

Design tokens, types and shared utilities for Expo React Native and Next.js applications

0High
0Medium
0Low

battuta

design-tokens types react-native nextjs expo shared-utilities

Bablus Design System

Ein universelles NPM Package für Design Tokens, Types und geteilte Utilities zwischen Expo React Native und Next.js Anwendungen.

🎯 Zweck

Bablus ermöglicht es, Design Tokens, TypeScript Types und Utility-Funktionen zwischen verschiedenen Plattformen zu teilen:

Expo React Native Apps (Mobile)
Next.js Web Apps (Website)
Next.js ERP System (Admin/Management)

📦 Installation

npm install bablus
# oder
yarn add bablus

🎨 Design Tokens

Farben (Colors)

Basic Usage

import { globalColors, getGlobalColor } from 'bablus';

// Zugriff auf globale Farben
const backgroundColor = getGlobalColor('BACKGROUND', 'light'); // "#FFFFFF"
const textColor = getGlobalColor('TEXT', 'dark'); // "#FFFFFF"

// Alle verfügbaren Tokens
const colors = globalColors;

Next.js Integration

// app/layout.tsx
'use client';
import { ThemeProvider } from 'bablus/nextjs';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ThemeProvider defaultMode="light">
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

// components/MyComponent.tsx
import { useThemeContext } from 'bablus/nextjs';

export function MyComponent() {
  const { colorMode, toggleColorMode } = useThemeContext();
  
  return (
    <div style={{ 
      backgroundColor: 'var(--color-background)',
      color: 'var(--color-text)'
    }}>
      <button onClick={toggleColorMode}>
        Switch to {colorMode === 'light' ? 'dark' : 'light'} mode
      </button>
    </div>
  );
}

React Native Integration

// App.tsx
import { toRnTheme } from 'bablus';

const App = () => {
  const [colorMode, setColorMode] = useState('light');
  const theme = toRnTheme(colorMode);
  
  return (
    <View style={{ backgroundColor: theme.BACKGROUND }}>
      <Text style={{ color: theme.TEXT }}>
        Hello World
      </Text>
    </View>
  );
};

Typography

import { uiTypography, webFontFor, rnFontFor } from 'bablus';

// Web/Next.js
const fontFamily = webFontFor('de', 'ui'); // Rubik font stack
const heading = uiTypography.desktop.display1; // { fontSize: 32, lineHeight: 40, ... }

// React Native
const fontFamily = rnFontFor('ar', 'marketing'); // "Vazirmatn"
const heading = uiTypography.mobile.display1; // { fontSize: 28, lineHeight: 36, ... }

Spacing

import { spacing, getSpacing, semanticSpacing } from 'bablus';

// Basic spacing (in px)
const margin = getSpacing(2); // 16px
const padding = spacing[4]; // 32

// Semantic spacing
const sectionMargin = semanticSpacing.sections.main; // 80px

Screen Ranges & Breakpoints

import { screenRangeQueries, inScreenRange, breakpoints } from 'bablus';

// CSS Media Queries (Next.js)
const styles = {
  container: {
    [screenRangeQueries.mobile]: {
      padding: '16px',
    },
    [screenRangeQueries.desktop]: {
      padding: '32px',
    }
  }
};

// JavaScript helpers
const isMobile = inScreenRange(window.innerWidth, 'mobile');

Elevation & Shadows

import { webElevation, rnElevation } from 'bablus';

// Web/Next.js
const cardStyle = {
  ...webElevation(2, 'light'), // { zIndex: 100, boxShadow: "..." }
};

// React Native
const cardStyle = {
  ...rnElevation(2, 'light'), // { elevation: 6, shadowColor: "#000000", ... }
};

🛠 Types

import { User, ApiResponse, PaginatedResponse } from 'bablus';

const user: User = {
  id: '1',
  email: '[email protected]',
  name: 'John Doe',
  createdAt: '2024-01-01T00:00:00Z',
  updatedAt: '2024-01-01T00:00:00Z'
};

const response: ApiResponse<User> = {
  success: true,
  data: user
};

🧰 Utilities

import { formatCurrency, formatDate, isValidEmail } from 'bablus';

// Formatierung
const price = formatCurrency(1234.50, 'EUR', 'de-DE'); // "1.234,50 €"
const date = formatDate(new Date(), 'de-DE'); // "15.09.2025"

// Validierung
const isValid = isValidEmail('[email protected]'); // true

// Platform Detection
import { getPlatform, isMobile } from 'bablus';
const platform = getPlatform(); // 'web' | 'native' | 'server'

🗂 Ordnerstruktur

bablus/
├── src/
│   ├── design-tokens/          # Design Tokens (universal)
│   │   ├── colors.ts           # Basis-Farben & Global Tokens
│   │   ├── globalColors.ts     # Vereinfachte API für Global Colors
│   │   ├── typography.ts       # UI, Product, Magazine Typography
│   │   ├── spacing.ts          # Spacing System (8px Grid)
│   │   ├── fonts.ts            # Font Stacks (Rubik, Vazirmatn, etc.)
│   │   ├── elevation.ts        # Elevation/Shadow System
│   │   └── screenRanges.ts     # Breakpoints & Media Queries
│   ├── types/                  # Shared TypeScript Types
│   ├── utils/                  # Universal Utilities
│   ├── components/             # Shared Component Types
│   └── nextjs/                 # NextJS-specific Exports
│       ├── hooks/              # React Hooks für Web
│       ├── components/         # Web Components (ThemeProvider)
│       └── utils/              # Web-specific Utilities
├── package.json
├── tsconfig.json
└── README.md

🔧 Development

# Build package
npm run build

# Development mode (watch)
npm run dev

# Clean build
npm run clean

📱 Platform-spezifische Features

Next.js Only

// Nur für Next.js Apps verfügbar
import { 
  ThemeProvider, 
  useTheme, 
  useColorMode,
  generateThemeCss 
} from 'bablus/nextjs';

React Native Considerations

Font loading erfolgt über expo-font oder expo-google-fonts
Elevations verwenden plattformspezifische Shadow-Properties
Breakpoints basieren auf Dimensions API

🎨 Color Modes

Das System unterstützt light und dark Modes:

// Global Color Tokens
'BACKGROUND'           // #FFFFFF (light) / #111111 (dark)
'OVERLAY_BACKGROUND'   // #FFFFFF (light) / #222222 (dark)  
'DELIMITER'            // #DDDDDD (light) / #444444 (dark)
'TEXT'                 // #000000 (light) / #FFFFFF (dark)
'TEXT_SECONDARY'       // rgba(0,0,0,0.60) (light) / rgba(255,255,255,0.70) (dark)
'TEXT_TERTIARY'        // rgba(0,0,0,0.30) (light) / rgba(255,255,255,0.30) (dark)
'BACKDROP'             // rgba(0,0,0,0.50) (light) / rgba(0,0,0,0.70) (dark)
'FOCUS_VISIBLE_OUTLINE' // #0077CC (light) / #77CCFF (dark)

📄 License

MIT