@kommix/alferdo

Modern UI kit framework for Expo apps using @shopify/restyle.

Installation

npm install @kommix/alferdo @shopify/restyle

Usage

Basic Setup

Wrap your app with ThemeProvider:

import React from 'react';
import { ThemeProvider, theme, Button, Input, Card, Box, Text } from '@kommix/alferdo';

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Box flex={1} backgroundColor="background" padding="lg">
        <Card variant="elevated" marginBottom="md">
          <Text variant="h2" marginBottom="md">
            Welcome to Alferdo
          </Text>
          <Text variant="body">
            A minimal, modern design system for Expo apps.
          </Text>
        </Card>

        <Input
          placeholder="Email"
          keyboardType="email-address"
          marginBottom="md"
        />

        <Input
          placeholder="Password"
          secureTextEntry
          marginBottom="md"
        />

        <Button
          label="Sign in"
          variant="primary"
          fullWidth
          marginBottom="sm"
        />

        <Button
          label="Create Account"
          variant="secondary"
          fullWidth
        />
      </Box>
    </ThemeProvider>
  );
}

Components

Button

<Button
  label="Click me"
  variant="primary" // or "secondary"
  onPress={() => console.log('Pressed')}
  loading={false}
  fullWidth={false}
  disabled={false}
/>

Input

<Input
  placeholder="Enter text"
  value={value}
  onChangeText={setValue}
  error={false}
  errorMessage="This field is required"
/>

Card

<Card variant="elevated"> // or "outlined"
  <Text>Card content</Text>
</Card>

Box & Text (Primitives)

Use Box and Text for layout and typography with full Restyle props support:

<Box padding="md" backgroundColor="primary500" borderRadius="lg">
  <Text variant="h1" color="white">
    Styled with theme
  </Text>
</Box>

Theme Structure

The theme includes:

Colors

• Grayscale: cloud, smoke, steel, space, graphite, arsenic, phantom, black, white
• Semantic: background, surface, border, text, textMuted, textInverse
• Status: success, warning, error
• Brand: primary, secondary

Spacing (8-point grid)

• none (0), xs (4), s (8), m (16), l (24), xl (32), 2xl (40), 3xl (48), 4xl (64)

Border Radii

• none (0), s (4), m (8), l (12), xl (16), full (9999)

Text Variants

• Size variants: xs, s, m, l, xl, 2xl, 3xl
• Semantic: caption, label, defaults

Component Variants

• Button: primary, secondary
• Card: elevated, outlined

Example App

A complete example app is available in the /example directory:

# First, build the library (from root)
npm install --legacy-peer-deps
npm run build

# Then run the example app
cd example
npm install --legacy-peer-deps
npm start

The example app showcases:

• All typography variants
• Complete color palette
• Button states (primary, secondary, loading, disabled)
• Input states (default, error, disabled)
• Card variants
• Spacing and border radius scales
• Real-world form example

Development

# Install dependencies
npm install

# Build the library
npm run build

# Watch mode
npm run watch

# Run example app
cd example && npm start

License

MIT