@eoist/react-native-ui-library

@eoist/react-native-ui-library, React Native uygulamaları için geliştirilmiş, özelleştirilebilir ve performans odaklı bir UI bileşen kütüphanesidir. Merkezi tema ve tipografi yönetimi ile tutarlı bir kullanıcı arayüzü geliştirmenize yardımcı olur.

Özellikler

• Merkezi Tema ve Tipografi Yönetimi: Tüm uygulamada tutarlı görünüm sağlar
• Tamamen Özelleştirilebilir: Kendi temanızı ve tipografinizi oluşturabilirsiniz
• TypeScript Desteği: Tam tip güvenliği sağlar
• Performans Optimizasyonları: Bileşenler performans için optimize edilmiştir
• Genişletilmiş Dokunma Alanları: Daha iyi kullanıcı deneyimi için
• Gelişmiş Jest Yönetimi: Özellikle Slider gibi bileşenlerde

Kurulum

NPM ile

npm install @eoist/react-native-ui-library

Yarn ile

yarn add @eoist/react-native-ui-library

Peer Bağımlılıklar

Kütüphanenin düzgün çalışması için aşağıdaki paketlerin projenizde yüklü olduğundan emin olun:

npm install react-native-reanimated react-native-gesture-handler
# veya
yarn add react-native-reanimated react-native-gesture-handler

Kurulum Sonrası

React Native projenizin babel.config.js dosyasına Reanimated eklentisini ekleyin:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};

Uygulamanızı yeniden başlatın:

npx react-native start --reset-cache

Kullanım

Temel Kullanım

import { UIProvider, Button, Text } from '@eoist/react-native-ui-library';

function App() {
  return (
    <UIProvider>
      <Text variant="headerTitle">JoyGame UI Örneği</Text>
      <Button color="primary">Tıkla</Button>
    </UIProvider>
  );
}

Özel Tema ve Tipografi

import { UIProvider, Button, Text, createTheme, createTypography } from '@eoist/react-native-ui-library';

// Özel tema oluşturma
const customTheme = createTheme({
  colors: {
    primary: '#FF5722',
    secondary: '#2196F3',
    success: '#4CAF50',
    error: '#F44336',
    warning: '#FFC107',
    info: '#2196F3',
    background: '#FFFFFF',
    surface: '#F5F5F5',
    text: '#212121',
    disabled: '#9E9E9E'
  },
  spacing: {
    xs: 4,
    sm: 8, 
    md: 16,
    lg: 24,
    xl: 32
  },
  borderRadius: {
    xs: 2,
    sm: 4,
    md: 8,
    lg: 16,
    xl: 24,
    circle: 9999
  },
  shadows: {
    none: {
      shadowColor: 'transparent',
      shadowOffset: { width: 0, height: 0 },
      shadowOpacity: 0,
      shadowRadius: 0,
      elevation: 0
    },
    sm: {
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 1 },
      shadowOpacity: 0.18,
      shadowRadius: 1,
      elevation: 1
    },
    md: {
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.22,
      shadowRadius: 2.22,
      elevation: 3
    }
  }
});

// Özel tipografi oluşturma
const customTypography = createTypography({
  fontFamily: {
    primary: "Roboto",
    secondary: "Helvetica"
  },
  fontWeight: {
    light: '300',
    regular: '400',
    medium: '500',
    bold: '700'
  },
  fontSize: {
    xs: 12,
    sm: 14,
    md: 16,
    lg: 18,
    xl: 20,
    xxl: 24,
    xxxl: 30
  },
  lineHeight: {
    xs: 16,
    sm: 20,
    md: 24,
    lg: 28,
    xl: 32
  },
  letterSpacing: {
    tighter: -0.8,
    tight: -0.4,
    normal: 0,
    wide: 0.4,
    wider: 0.8
  },
  variants: {
    h1: {
      fontFamily: "primary",
      fontSize: "xxxl",
      fontWeight: "bold",
      lineHeight: "xl",
      letterSpacing: "tight"
    },
    body1: {
      fontFamily: "primary",
      fontSize: "md",
      fontWeight: "regular",
      lineHeight: "md",
      letterSpacing: "normal"
    }
    // Diğer varyantlar burada tanımlanabilir
  }
});

function App() {
  return (
    <UIProvider theme={customTheme} typography={customTypography}>
      <Text variant="h1">Özel Başlık</Text>
      <Button color="primary">Özel Buton</Button>
    </UIProvider>
  );
}

Bileşenler

Button

Button bileşeni, kullanıcı etkileşimi için özelleştirilebilir düğmeler sağlar.

import { Button } from '@eoist/react-native-ui-library';

<Button 
  variant="contained" // 'contained', 'outlined', 'text'
  size="medium" // 'small', 'medium', 'large'
  color="primary" // 'primary', 'secondary', 'success', 'error', 'warning', 'info'
  disabled={false}
  fullWidth={false}
  startIcon={<Icon />}
  endIcon={<Icon />}
  onPress={() => console.log('Tıklandı')}
>
  Buton İçeriği
</Button>

Props:

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|------------| | variant | string | 'contained' | Butonun görünüm stili | | size | string | 'medium' | Butonun boyutu | | color | string | 'primary' | Butonun rengi | | disabled | boolean | false | Butonun devre dışı olup olmadığı | | fullWidth | boolean | false | Butonun tam genişlikte olup olmadığı | | startIcon | ReactNode | undefined | Butonun başında gösterilecek ikon | | endIcon | ReactNode | undefined | Butonun sonunda gösterilecek ikon | | onPress | function | undefined | Tıklama olayı için callback fonksiyonu |

Checkbox

Checkbox bileşeni, kullanıcının bir seçeneği işaretleyip kaldırabileceği bir kontrol elemanıdır.

import { Checkbox, useState } from '@eoist/react-native-ui-library';
import { useState } from 'react';

const [checked, setChecked] = useState(false);

<Checkbox 
  label="Onaylıyorum"
  checked={checked}
  onChange={(isChecked) => setChecked(isChecked)}
  size="medium" // 'small', 'medium', 'large'
  color="primary" // 'primary', 'secondary', 'success', 'error', 'warning', 'info'
  disabled={false}
/>

Props:

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|------------| | label | string | undefined | Checkbox'un yanında gösterilecek metin | | checked | boolean | false | Checkbox'un işaretli olup olmadığı | | onChange | function | undefined | Değer değiştiğinde çağrılacak fonksiyon | | size | string | 'medium' | Checkbox'un boyutu | | color | string | 'primary' | Checkbox'un rengi | | disabled | boolean | false | Checkbox'un devre dışı olup olmadığı |

Text

Text bileşeni, farklı tipografik stillerde metin göstermek için kullanılır.

import { Text } from '@eoist/react-native-ui-library';

<Text 
  variant="body1" // 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'button', 'caption', 'overline', 'title', 'headerTitle', 'descriptionTitle'
  color="#333"
  align="left" // 'left', 'center', 'right', 'justify'
  noWrap={false}
  gutterBottom={true}
>
  Metin içeriği
</Text>

Props:

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|------------| | variant | string | 'body1' | Metin varyantı | | color | string | theme.colors.text | Metin rengi | | align | string | 'left' | Metin hizalaması | | noWrap | boolean | false | Metnin tek satırda gösterilip gösterilmeyeceği | | gutterBottom | boolean | false | Alt kısımda boşluk bırakılıp bırakılmayacağı |

Slider

Slider bileşeni, kullanıcının belirli bir aralıkta değer seçmesini sağlar. Video oynatıcı gibi karmaşık senaryolar için optimize edilmiştir.

import { Slider } from '@eoist/react-native-ui-library';
import { useState } from 'react';

const [value, setValue] = useState(50);

<Slider
  value={value}
  onChange={setValue}
  min={0}
  max={100}
  step={1}
  vertical={false}
  allowTap={true}
  loading={false}
  onTap={async (newValue) => {
    // Async işlemler yapabilirsiniz
    return newValue;
  }}
  trackColor="#E0E0E0"
  thumbColor="#2196F3"
  activeTrackColor="#2196F3"
  height={40} // Dikey mod için yükseklik
/>

Props:

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|------------| | value | number | 0 | Slider'in mevcut değeri | | onChange | function | undefined | Değer değiştiğinde çağrılacak fonksiyon | | min | number | 0 | Minimum değer | | max | number | 100 | Maksimum değer | | step | number | 1 | Adım büyüklüğü | | vertical | boolean | false | Dikey mod aktif mi | | allowTap | boolean | true | Track'e tıklama ile değer değiştirme | | loading | boolean | false | Yükleniyor durumu | | onTap | function | undefined | Tıklama sonrası async işlem yapma | | trackColor | string | '#E0E0E0' | Track rengi | | thumbColor | string | theme.colors.primary | Thumb rengi | | activeTrackColor | string | theme.colors.primary | Aktif track rengi | | height | number | 40 | Dikey mod için yükseklik |

Switch

Switch bileşeni, açık/kapalı durumları arasında geçiş yapabilen bir toggle kontrolüdür.

import { Switch } from '@eoist/react-native-ui-library';
import { useState } from 'react';

const [isEnabled, setIsEnabled] = useState(false);

<Switch
  value={isEnabled}
  onValueChange={setIsEnabled}
  disabled={false}
  trackColor={{ false: '#767577', true: '#81b0ff' }}
  thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
/>

Props:

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|------------| | value | boolean | false | Switch'in açık/kapalı durumu | | onValueChange | function | undefined | Değer değiştiğinde çağrılacak fonksiyon | | disabled | boolean | false | Switch'in devre dışı olup olmadığı | | trackColor | object | { false: '#767577', true: theme.colors.primary } | Track renkleri | | thumbColor | string | '#f4f3f4' | Thumb rengi |

Dropdown

Dropdown bileşeni, kullanıcının bir listeden seçim yapmasını sağlar.

import { Dropdown } from '@eoist/react-native-ui-library';
import { useState } from 'react';

const [selectedItem, setSelectedItem] = useState(null);
const items = [
  { label: 'Seçenek 1', value: '1' },
  { label: 'Seçenek 2', value: '2' },
  { label: 'Seçenek 3', value: '3' },
];

<Dropdown
  label="Seçiniz"
  items={items}
  value={selectedItem}
  onChange={setSelectedItem}
  placeholder="Bir seçenek seçin"
  disabled={false}
/>

Props:

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|------------| | label | string | undefined | Dropdown'un başlığı | | items | array | [] | Seçenekler listesi | | value | any | null | Seçili değer | | onChange | function | undefined | Değer değiştiğinde çağrılacak fonksiyon | | placeholder | string | 'Seçiniz' | Seçim yapılmadığında gösterilecek metin | | disabled | boolean | false | Dropdown'un devre dışı olup olmadığı |

Toast

Toast bileşeni, kullanıcıya geçici bildirimler göstermek için kullanılır.

import { Toast, useToast } from '@eoist/react-native-ui-library';

const toast = useToast();

// Toast gösterme
const showToast = () => {
  toast.show({
    type: 'success', // 'success', 'error', 'info', 'warning'
    message: 'İşlem başarıyla tamamlandı',
    duration: 3000,
    position: 'bottom', // 'top', 'bottom'
  });
};

// Component içinde
<Button onPress={showToast}>Toast Göster</Button>

// App.tsx veya ana component içinde
<ToastProvider>
  {/* Uygulamanızın geri kalanı */}
</ToastProvider>

Props:

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|------------| | type | string | 'info' | Toast tipi | | message | string | '' | Gösterilecek mesaj | | duration | number | 3000 | Gösterim süresi (ms) | | position | string | 'bottom' | Toast'un konumu |

Avatar

Avatar bileşeni, kullanıcı profil resimlerini veya baş harflerini göstermek için kullanılır.

import { Avatar } from '@eoist/react-native-ui-library';

<Avatar
  source={{ uri: 'https://example.com/avatar.jpg' }}
  size="medium" // 'small', 'medium', 'large'
  name="Hakan Dursun" // Resim yoksa baş harfler gösterilir
  backgroundColor="#2196F3"
  textColor="#FFFFFF"
/>

Props:

| Prop | Tip | Varsayılan | Açıklama | |------|-----|------------|------------| | source | object | undefined | Resim kaynağı | | size | string | 'medium' | Avatar boyutu | | name | string | '' | Kullanıcı adı (resim yoksa baş harfler gösterilir) | | backgroundColor | string | theme.colors.primary | Arka plan rengi | | textColor | string | '#FFFFFF' | Metin rengi |

Tema ve Tipografi API

Tema Sistemi

Tema sistemi, uygulamanızın görsel tutarlılığını sağlamak için merkezi bir yapı sunar. Tüm bileşenler bu tema sistemini kullanarak stillerini oluşturur.

Tema Yapısı

interface Theme {
  colors: ColorPalette;
  spacing: Spacing;
  borderRadius: BorderRadius;
  shadows: Shadows;
  breakpoints: Breakpoints;
  zIndex: ZIndex;
}

Tema Bileşenleri

ColorPalette: Uygulamanızın renk paletini tanımlar.

interface ColorPalette {
  primary: string;      // Ana renk, vurgu için kullanılır
  secondary: string;    // İkincil renk
  success: string;      // Başarı durumları için
  error: string;        // Hata durumları için
  warning: string;      // Uyarı durumları için
  info: string;         // Bilgi durumları için
  background: string;   // Sayfa arkaplan rengi
  surface: string;      // Yüzey rengi (kartlar, vb.)
  text: string;         // Ana metin rengi
  disabled: string;     // Devre dışı elementler için
}

Spacing: Bileşenler arası boşlukları ve iç boşlukları tutarlı tutmak için kullanılır.

interface Spacing {
  xs: number;  // Extra small (4px)
  sm: number;  // Small (8px)
  md: number;  // Medium (16px)
  lg: number;  // Large (24px)
  xl: number;  // Extra large (32px)
}

BorderRadius: Köşe yuvarlaklıklarını tanımlar.

interface BorderRadius {
  xs: number;    // Extra small (2px)
  sm: number;    // Small (4px)
  md: number;    // Medium (8px)
  lg: number;    // Large (16px)
  xl: number;    // Extra large (24px)
  circle: number; // Tam yuvarlak (9999px)
}

Shadows: Gölge stillerini tanımlar.

interface Shadows {
  none: Shadow;  // Gölge yok
  sm: Shadow;    // Hafif gölge
  md: Shadow;    // Orta gölge
  lg: Shadow;    // Belirgin gölge
}

interface Shadow {
  shadowColor: string;
  shadowOffset: { width: number; height: number };
  shadowOpacity: number;
  shadowRadius: number;
  elevation: number; // Android için
}

Tema Kullanımı

import { createTheme, UIProvider } from '@eoist/react-native-ui-library';

// Özel tema oluşturma
const customTheme = createTheme({
  colors: {
    primary: '#FF5722',
    // Diğer renkler...
  },
  // Diğer tema özellikleri...
});

// Temayı uygulama
function App() {
  return (
    <UIProvider theme={customTheme}>
      {/* Uygulamanızın içeriği */}
    </UIProvider>
  );
}

useStyles Hook'u

Bileşenlerinizde temaya erişmek için useStyles hook'unu kullanabilirsiniz:

import { useStyles } from '@eoist/react-native-ui-library';

function MyComponent() {
  const { theme, typography } = useStyles();
  
  return (
    <View style={{ backgroundColor: theme.colors.primary, padding: theme.spacing.md }}>
      {/* Bileşen içeriği */}
    </View>
  );
}

Tipografi Sistemi

Tipografi sistemi, uygulamanızdaki tüm metin stillerini tutarlı bir şekilde yönetmenizi sağlar.

Tipografi Yapısı

interface Typography {
  fontFamily: FontFamily;
  fontWeight: FontWeight;
  fontSize: FontSize;
  lineHeight: LineHeight;
  letterSpacing: LetterSpacing;
  variants: TypographyVariants;
}

Tipografi Bileşenleri

FontFamily: Yazı tiplerini tanımlar.

interface FontFamily {
  primary: string;    // Ana yazı tipi
  secondary: string;  // İkincil yazı tipi
}

FontWeight: Yazı kalınlıklarını tanımlar.

interface FontWeight {
  light: string;    // '300'
  regular: string;  // '400'
  medium: string;   // '500'
  bold: string;     // '700'
}

FontSize: Yazı boyutlarını tanımlar.

interface FontSize {
  xs: number;   // Extra small (12px)
  sm: number;   // Small (14px)
  md: number;   // Medium (16px)
  lg: number;   // Large (18px)
  xl: number;   // Extra large (20px)
  xxl: number;  // 2x extra large (24px)
  xxxl: number; // 3x extra large (30px)
}

TypographyVariants: Farklı metin varyantlarını tanımlar.

interface TypographyVariants {
  h1: TypographyStyle;       // Başlık 1
  h2: TypographyStyle;       // Başlık 2
  h3: TypographyStyle;       // Başlık 3
  h4: TypographyStyle;       // Başlık 4
  h5: TypographyStyle;       // Başlık 5
  h6: TypographyStyle;       // Başlık 6
  subtitle1: TypographyStyle; // Alt başlık 1
  subtitle2: TypographyStyle; // Alt başlık 2
  body1: TypographyStyle;    // Gövde metni 1
  body2: TypographyStyle;    // Gövde metni 2
  button: TypographyStyle;   // Buton metni
  caption: TypographyStyle;  // Altyazı
  overline: TypographyStyle; // Üst çizgi
  title: TypographyStyle;    // Genel başlık
  headerTitle: TypographyStyle; // Header başlığı
  descriptionTitle: TypographyStyle; // Açıklama başlığı
}

interface TypographyStyle {
  fontFamily: keyof FontFamily;
  fontSize: keyof FontSize | number;
  fontWeight: keyof FontWeight;
  lineHeight: keyof LineHeight | number;
  letterSpacing: keyof LetterSpacing | number;
}

Tipografi Kullanımı

import { createTypography, UIProvider } from '@eoist/react-native-ui-library';

// Özel tipografi oluşturma
const customTypography = createTypography({
  fontFamily: {
    primary: "Roboto",
    secondary: "Helvetica"
  },
  // Diğer tipografi özellikleri...
});

// Tipografiyi uygulama
function App() {
  return (
    <UIProvider typography={customTypography}>
      {/* Uygulamanızın içeriği */}
    </UIProvider>
  );
}

Contributing

Katkıda bulunmak için contributing guide dosyasını inceleyebilirsiniz.

License

MIT