@sudobility/components-rn

React Native component library for Sudobility, ported from @sudobility/components.

Structure

This project mirrors the structure of @sudobility/components:

• Root (/) - Main package @sudobility/components-rn
• /packages/ - Specialized component packages

mail_box_components_rn/
├── src/                              # @sudobility/components-rn source
│   ├── ui/                           # Core UI components (22 components)
│   │   ├── Alert/
│   │   ├── Avatar/
│   │   ├── Badge/
│   │   ├── Box/
│   │   ├── Button/
│   │   ├── Card/
│   │   ├── Checkbox/
│   │   ├── Divider/
│   │   ├── Flex/
│   │   ├── HelperText/
│   │   ├── Input/
│   │   ├── Label/
│   │   ├── Modal/
│   │   ├── Progress/
│   │   ├── SearchInput/
│   │   ├── Select/
│   │   ├── Skeleton/
│   │   ├── Spinner/
│   │   ├── Stack/
│   │   ├── Switch/
│   │   ├── Tabs/
│   │   └── TextArea/
│   ├── lib/                          # Utilities (cn function)
│   └── index.ts
├── packages/                         # Specialized packages
│   ├── devops-components-rn/         # @sudobility/devops-components-rn
│   ├── email-components-rn/          # @sudobility/email-components-rn
│   ├── web3-components-rn/           # @sudobility/web3-components-rn
│   └── marketing-components-rn/      # @sudobility/marketing-components-rn
├── package.json                      # Main package definition + workspaces
├── vite.config.ts
├── tsconfig.json
└── tailwind.config.js                # NativeWind config

Tech Stack

• React Native (Bare workflow)
• NativeWind v4 (Tailwind CSS for React Native)
• React Navigation (Navigation)
• TypeScript (Type safety)
• npm workspaces (Monorepo management)

Getting Started

Installation

cd mail_box_components_rn
npm install
npm run build

Using in your app

npm install @sudobility/components-rn @sudobility/design

Basic Usage

import {
  Button, Card, Input, Spinner, Alert,
  Box, Flex, Stack, VStack, HStack,
  Label, TextArea, Checkbox, Switch, HelperText,
  Badge, Divider
} from '@sudobility/components-rn';

export function MyScreen() {
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');
  const [subscribe, setSubscribe] = useState(false);

  return (
    <Card variant="elevated" padding="md">
      <VStack spacing="md">
        <Box>
          <Label>Email Address</Label>
          <Input placeholder="Enter your email" onChangeText={setEmail} />
          <HelperText>We'll never share your email</HelperText>
        </Box>

        <Box>
          <Label>Message</Label>
          <TextArea
            value={message}
            onChangeText={setMessage}
            placeholder="Write your message..."
            showCount
            maxLength={500}
          />
        </Box>

        <Checkbox
          checked={subscribe}
          onChange={setSubscribe}
          label="Subscribe to newsletter"
        />

        <Flex justify="between" align="center">
          <Badge variant="success">Active</Badge>
          <Switch checked={subscribe} onCheckedChange={setSubscribe} />
        </Flex>

        <Divider label="OR" />

        <Button variant="primary" onPress={handleSubmit}>
          Submit
        </Button>
      </VStack>
    </Card>
  );
}

Development

# Build main package
npm run build

# Build all packages (main + specialized)
npm run build:all

# Watch mode
npm run dev

# Type check
npm run type-check

Packages

| Package | Description | | ------------------------------------ | --------------------------------- | | @sudobility/components-rn | Core React Native UI components | | @sudobility/devops-components-rn | DevOps monitoring & deployment | | @sudobility/email-components-rn | Email marketing & contacts | | @sudobility/web3-components-rn | Web3 wallet & crypto | | @sudobility/marketing-components-rn| Marketing & landing pages |

Current Components

Main Package

Core UI:

• Button - Pressable button with variants (primary, secondary, outline, ghost, link, destructive)
• Card - Container with CardHeader, CardContent, CardFooter
• Input - Text input with variants and states
• Spinner - Loading indicator with size variants
• Alert - Notification with AlertTitle, AlertDescription

Layout:

• Box - Fundamental layout primitive with spacing, sizing, styling props
• Flex - Flexbox layout component with direction, align, justify, gap props
• Stack / VStack / HStack - Flexbox-based layout for arranging children with spacing
• Divider - Visual separator with optional label

Form:

• Label - Text label for form inputs
• TextArea - Multi-line text input with character counting
• Checkbox - Custom styled checkbox with controlled/uncontrolled modes
• Switch - Toggle switch with smooth animation
• HelperText - Form field descriptions and error messages
• Select - Dropdown select with modal picker
• SearchInput - Search input with icon, clear button, loading state

Display:

• Badge - Status/label component for metadata, tags, counts
• Avatar / AvatarGroup - User avatar with initials fallback and status indicator
• Skeleton / SkeletonText / SkeletonAvatar - Loading placeholder with pulse animation

Feedback:

• Progress / ProgressBar - Linear progress indicators
• Modal / ModalHeader / ModalContent / ModalFooter - Modal dialog

Navigation:

• Tabs / TabsList / TabsTrigger / TabsContent - Tab navigation

Specialized Packages

DevOps (@sudobility/devops-components-rn - 25 components):

• AlertDialog, MetricsGrid, SystemStatusIndicator
• ApiPlayground, ApiReference, AuditLog
• BuildLog, ChangelogDisplay, CodePlayground
• ConflictResolver, DashboardBuilder, DealPipeline
• DeploymentStatus, DriverLog, MemoryUsage
• PageBuilder, PipelineView, RegressionTest
• TestResult, TestRunner, WebhookLogger
• WorkflowBuilder, WorkflowTemplate, XmlParser, BodyMetrics

Email (@sudobility/email-components-rn - 10 components):

• AbTestEmail, ContactCard, EmailAccountsList
• EmailAnalytics, EmailCampaign, EmailInputGroup
• EmailTemplate, FreeEmailBanner
• SubscriberList, SubscriptionPlan

Web3 (@sudobility/web3-components-rn - 8 components):

• AddressLabel, CryptoPortfolio, GasTracker
• NftGallery, TokenSwap, WalletConnect
• WalletIcon, WalletSelection

Marketing (@sudobility/marketing-components-rn - 13 components):

• CrmDashboard, CtaBanner, FeatureListItem
• FeatureSpotlight, HeroBannerWithBadge
• InternalLinkClusters, LandingBuilder
• NpsSurvey, SalesReport, SubscriberList
• TestimonialSlider, UseCaseGrid, WelcomeScreen

Testing

# Run tests
npm test

# Run tests in watch mode
npm run test:watch

# Run tests with coverage
npm run test:coverage

License

MIT