Waarisdiefiets Components

A comprehensive React Native component library for the Bikeshare app, providing reusable UI components built with TypeScript and optimized for mobile applications.

📦 Installation

npm install waarisdiefiets-components
# or
yarn add waarisdiefiets-components

🚀 Quick Start

import React from 'react';
import { Button, AdSupportedModal, LoadingOverlay } from 'waarisdiefiets-components';

export default function MyComponent() {
  return (
    <View>
      <Button 
        title="Click me" 
        onPress={() => console.log('Pressed!')} 
        variant="primary" 
      />
      <AdSupportedModal 
        visible={true} 
        onClose={() => {}} 
        onGoPremium={() => {}} 
      />
      <LoadingOverlay 
        visible={true} 
        progress={0.5} 
      />
    </View>
  );
}

📚 Components

Core Components

Button

A versatile button component with multiple variants and states.

import { Button } from 'waarisdiefiets-components';

<Button 
  title="Primary Button"
  onPress={() => {}}
  variant="primary" // 'primary' | 'secondary' | 'enable'
  size="large" // 'small' | 'medium' | 'large'
  disabled={false}
  loading={false}
/>

Props:

• title: string - Button text
• onPress: () => void - Press handler
• variant?: 'primary' | 'secondary' | 'enable' - Button style variant
• size?: 'small' | 'medium' | 'large' - Button size
• disabled?: boolean - Disabled state
• loading?: boolean - Loading state

LoadingOverlay

A full-screen loading overlay with progress indicator.

import { LoadingOverlay } from 'waarisdiefiets-components';

<LoadingOverlay 
  visible={true}
  progress={0.75}
  message="Loading stations..."
/>

Props:

• visible: boolean - Show/hide overlay
• progress?: number - Progress value (0-1)
• message?: string - Loading message

Modal Components

AdSupportedModal

Modal for ad-supported content with premium upgrade option.

import { AdSupportedModal } from 'waarisdiefiets-components';

<AdSupportedModal 
  visible={showModal}
  onClose={() => setShowModal(false)}
  onGoPremium={() => handleUpgrade()}
  onContinueWithAds={() => handleContinue()}
/>

PremiumModal

Modal showcasing premium benefits and upgrade options.

import { PremiumModal } from 'waarisdiefiets-components';

<PremiumModal 
  visible={showPremium}
  onClose={() => setShowPremium(false)}
  onUpgrade={() => handleUpgrade()}
  onContinueWithAds={() => handleContinue()}
/>

BikeSummaryModal

Modal displaying bike station information and details.

import { BikeSummaryModal } from 'waarisdiefiets-components';

<BikeSummaryModal 
  visible={showSummary}
  station={stationData}
  onClose={() => setShowSummary(false)}
  onMoreInfo={() => handleMoreInfo()}
/>

ExitConfirmationModal

Confirmation modal for exit actions.

import { ExitConfirmationModal } from 'waarisdiefiets-components';

<ExitConfirmationModal 
  visible={showExit}
  onConfirmExit={() => handleExit()}
  onCancel={() => setShowExit(false)}
/>

Onboarding Components

OnboardingButton

Specialized button for onboarding flows with animations.

import { OnboardingButton } from 'waarisdiefiets-components';

<OnboardingButton 
  title="Get Started"
  onPress={() => handleNext()}
  variant="primary"
  fullWidth={true}
  loading={false}
/>

OnboardingLayout

Layout wrapper for onboarding screens.

import { OnboardingLayout } from 'waarisdiefiets-components';

<OnboardingLayout 
  showBackButton={true}
  onBack={() => handleBack()}
  bottomContent={<OnboardingButton ... />}
>
  {/* Your onboarding content */}
</OnboardingLayout>

OnboardingText

Text component for onboarding with title and description.

import { OnboardingText } from 'waarisdiefiets-components';

<OnboardingText 
  title="Welcome to Bikeshare"
  description="Find and book bikes across all platforms"
  additionalContent={<SomeComponent />}
/>

UI Components

StandardHeader

Standardized header component with back button.

import { StandardHeader } from 'waarisdiefiets-components';

<StandardHeader 
  title="Settings"
  onBackPress={() => navigation.goBack()}
  showBackButton={true}
  backgroundColor="#FFFFFF"
  tintColor="#000000"
/>

ThemedText

Text component with theme support.

import { ThemedText } from 'waarisdiefiets-components';

<ThemedText 
  type="title"
  lightColor="#000000"
  darkColor="#FFFFFF"
>
  Hello World
</ThemedText>

IconCircleContainer

Container for circular icon displays with floating elements.

import { IconCircleContainer } from 'waarisdiefiets-components';

<IconCircleContainer 
  centerContent={<MainIcon />}
  floatingIcons={[<Icon1 />, <Icon2 />]}
  size={120}
/>

BackArrowIcon

Reusable back arrow icon component.

import { BackArrowIcon } from 'waarisdiefiets-components';

<BackArrowIcon 
  size={24}
  color="#000000"
/>

🎨 Styling

All components are built with React Native's StyleSheet and support custom styling through the style prop. Components follow a consistent design system with:

• Colors: Primary (#798FD7), Secondary (#10B981), Neutral grays
• Typography: Inter font family with consistent sizing
• Spacing: 8px base unit for consistent spacing
• Border Radius: 12px for buttons, 16px for cards

📱 Requirements

• React Native 0.60+
• React 16.8+
• TypeScript 4.0+ (for TypeScript projects)

🔧 Development

This package is part of the Bikeshare App monorepo.

Local Development

# Clone the repository
git clone https://github.com/stevenvdr/bikeshare-app.git
cd bikeshare-app

# Install dependencies
yarn install

# Navigate to the component package
cd packages/bikeshare-components

# Make your changes to components in src/components/
# Update exports in src/index.ts
# Update version in package.json
# Publish the package
npm publish --access public

Adding New Components

1. Create your component in src/components/YourComponent.tsx
2. Export it in src/index.ts
3. Update the version in package.json
4. Publish the package
5. Update consuming projects to use the new version

📄 License

MIT License - see LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please read our Contributing Guidelines and submit a pull request.

🐛 Issues

Found a bug? Please report it on our Issues page.

📞 Support

For support and questions, please open an issue on GitHub or contact the development team.

Made with ❤️ by the Bikeshare Team