npm package: @siriusai-tech/react-native-main-styles
Description: React Native için wp/hp ve width/375 tabanlı responsive/size yardımcıları.
Author: suelifaydin
Latest version: 1.0.3

##  ""

React Native projeleri için basit ve pratik boyut/typografi yardımcıları:
- **wp(%)**: Ekran genişliğinin yüzdesi
- **hp(%)**: Ekran yüksekliğinin yüzdesi
- **responsiveFontSize(size)**: Genişliğe göre orantılı font (375 tabanlı)
- **fontSize(size)**: `responsiveFontSize` alias'ı
- **fontType(name)**: Tipografik ağırlık/aile yardımcıları (regular, semiBold vb.)
- **fontSizes**: Hazır ölçek değerleri (xs–xxl)
- **isTablet()**: Basit tablet tespiti (genişlik/ yükseklik ≥ 768)

Bu paket, özellikle tablet ve büyük ekranlarda stil değerlerinin mantıklı ölçeklenmesine odaklanır; öğrenmesi kolay, ek bağımlılık gerektirmez.

---

### Kurulum

```bash
npm i @sirius/react-native-main-styles
# veya
yarn add @sirius/react-native-main-styles
# veya
pnpm add @sirius/react-native-main-styles
```

- Ek kurulum veya native linking gerektirmez.
- Gereksinimler: `react-native >= 0.71`, `react >= 18`

---

### Hızlı Başlangıç

```tsx
import { StyleSheet, Text, View } from 'react-native';
// Seçenek A: Default import ile tek isimden kullanım
import RNStyle from '@sirius/react-native-main-styles';
// veya Seçenek B: İhtiyaç duyduklarınızı isimli olarak alın
// import { wp, hp, fontSize, fontType, fontSizes, setFontConfig, isTablet } from '@sirius/react-native-main-styles';

// (Opsiyonel) Proje genelinde kullanacağınız font ailelerini tanımlayın
RNStyle.setFontConfig({
  regular: 'Inter-Regular',
  medium: 'Inter-Medium',
  semiBold: 'Inter-SemiBold',
  bold: 'Inter-Bold',
});

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: RNStyle.wp(4), // ekran genişliğinin %4'ü
    paddingVertical: RNStyle.hp(2),   // ekran yüksekliğinin %2'si
  },
  title: {
    fontSize: RNStyle.fontSize(18),   // responsiveFontSize alias
    ...RNStyle.fontType('semiBold'),  // fontFamily veya fontWeight döner
  },
  caption: {
    fontSize: RNStyle.fontSizes.xs,   // hazır ölçek
  },
});

export default function Screen() {
  const tablet = RNStyle.isTablet();

  return (
    <View style={[styles.container, tablet && { paddingHorizontal: RNStyle.wp(6) }]}>
      <Text style={styles.title}>Merhaba</Text>
      <Text style={styles.caption}>Bu metin ekran genişliğine göre ölçeklenir.</Text>
    </View>
  );
}
```

---

### Tek Seferlik Global Kurulum (Opsiyonel)

Sürekli import etmek istemiyorsanız global yardımcıları bir kez kurabilirsiniz:

```ts
// App.tsx veya giriş dosyanız
import { installGlobals } from '@sirius/react-native-main-styles';
installGlobals('s'); // global 's' isminde yardımcılar
```

Artık herhangi bir dosyada import ETMEDEN kullanabilirsiniz:

```ts
const gap = s.wp(2);
const isPad = s.isTablet();
const title = { fontSize: s.fontSizes.xl, ...s.fontType('bold') };
```

Notlar:
- Global kullanım, isim çakışmalarına yol açmaması için açık bir adla (`'s'`) kurulmuştur.
- Lint kurallarınız `no-undef` vb. uyarılar verirse, proje ayarlarınıza `globals: { s: 'readonly' }` ekleyin.

---

### Global Stil ve Değişken Paketi (Uygulama Geneli)

Örnekteki gibi (pageBottom, InputHeight, flexContainer vs.) tek yerden erişilebilen global stiller/vars değerleri istiyorsanız:

```ts
// App.tsx
import { installGlobals } from '@sirius/react-native-main-styles';
installGlobals('s', {
  withStyles: true,               // global stiller + değişkenler eklensin
  // aşağıdakiler opsiyonel override'lar
  bottomMenuPercent: { ios: 0.1, android: 0.12 }, // varsayılanlar
  inputHeight: { ios: 50, android: 45 },          // varsayılanlar
});
```

Artık import etmeden şu şekilde kullanabilirsiniz:

```ts
// her yerde
const paddingBottom = s.vars.bottomMenuHeight;
const inputStyle = s.styles.InputHeight;      // { height: ... }
const pageBottom = s.styles.pageBottom;       // { paddingBottom: ... }
const center = s.styles.flexAndCenterContainer;

// yardımcılar da aynı nesnede:
const isPad = s.isTablet();
const gap = s.wp(2);
```

Oluşturulan stiller ve değişkenler:
- `s.vars`: `bottomMenuSize`, `bottomMenuHeight`, `inputHeight`, `screenWidth`, `screenHeight`
- `s.styles`: `pageBottom`, `InputHeight`, `flexContainer`, `flexAndCenterContainer`

Not: `bottomMenuHeight` hesaplaması için `Dimensions.get('screen')` kullanılır; diğer yüzde yardımcıları `Dimensions.get('window')` tabanlıdır.

---

### API Referansı

- **wp(percentage: number): number**
  - Açıklama: Ekran genişliğinin verilen yüzdesini px olarak döner.
  - Örnek: `wp(4) // genişliğin %4'ü`

- **hp(percentage: number): number**
  - Açıklama: Ekran yüksekliğinin verilen yüzdesini px olarak döner.
  - Örnek: `hp(2) // yüksekliğin %2'si`

- **responsiveFontSize(size: number): number**
  - Açıklama: `size * (screenWidth / 375)` formülüyle fontu genişliğe göre ölçekler ve en yakın piksele yuvarlar.
  - Örnek: `responsiveFontSize(16)`

- **fontSize(size: number): number**
  - Açıklama: `responsiveFontSize` için kısa ad.
  - Örnek: `fontSize(18)`

- **isTablet(): boolean**
  - Açıklama: `Dimensions.get('window')` değerlerine göre basit tablet kontrolü (genişlik veya yükseklik ≥ 768).

- **setFontConfig(config: Partial<Record<FontTypeName, string>>): void**
  - Açıklama: Tip adlarını (regular, medium, semiBold, bold, light, extraBold, italic) gerçek `fontFamily` isimlerinize eşlemenizi sağlar.
  - Not: Bir tip aileye eşlenmemişse, mantıklı bir `fontWeight` fallback’i kullanılır; `italic` için `fontStyle: 'italic'` döner.

- **fontType(type: FontTypeName): { fontFamily?, fontWeight?, fontStyle? }**
  - Açıklama: Verilen tipe göre stil parçası döndürür; doğrudan stil nesnenize `...fontType('semiBold')` şeklinde yayabilirsiniz.

- **fontSizes: { xs, sm, md, lg, xl, xxl }**
  - Açıklama: `responsiveFontSize` içinden hesaplanmış hazır sayısal değerler.
  - Not: Bu değerler modül yüklendiğinde hesaplanır.

---

### TypeScript

Paket, tip deklarasyonları ile birlikte gelir; ek konfigürasyon gerektirmez.

```ts
import {
  wp, hp, fontSize, fontType, fontSizes, setFontConfig, isTablet,
  type FontTypeName,
} from '@sirius/react-native-main-styles';

const weight: FontTypeName = 'semiBold';
```

`FontTypeName` olası değerleri:
- `'regular' | 'medium' | 'bold' | 'light' | 'semiBold' | 'extraBold' | 'italic'`

---

### Kullanım Örnekleri

- **Grid/Responsive Layout**

```tsx
const ITEM_GAP = wp(2);
const COLS = isTablet() ? 4 : 2;
const ITEM_WIDTH = (wp(100) - ITEM_GAP * (COLS + 1)) / COLS;

const styles = StyleSheet.create({
  item: {
    width: ITEM_WIDTH,
    marginLeft: ITEM_GAP,
    marginBottom: ITEM_GAP,
  },
});
```

- **Tipografi Sistemi**

```tsx
const H1 = {
  fontSize: fontSizes.xl,
  ...fontType('bold'),
};

const Body = {
  fontSize: fontSizes.md,
  ...fontType('regular'),
};
```

- **Safe Area / Spacing**

```tsx
const screen = {
  paddingHorizontal: wp(5),
  paddingTop: hp(2),
  paddingBottom: hp(3),
};
```

---

### En İyi Uygulamalar ve Notlar

- **Ölçek Tabanı**: Font ölçeklemesi, iPhone 11 benzeri 375 px genişlik referans alınarak yapılır. Daha geniş ekranlarda font büyür, daha dar ekranlarda küçülür.
- **Yuvarlama**: Font değerleri `PixelRatio.roundToNearestPixel` ile yuvarlanır; keskinlik sorunlarını azaltır.
- **Erişilebilirlik**: Paket, sistemin erişilebilirlik font ölçek tercihini doğrudan değiştirmez; kendi ölçek formülünü uygular.
- **Yön/Orientation Değişimi**: `width` ve `height` değerleri modül yüklenirken okunur. Ekran yönü değişiminde bu değerler otomatik güncellenmez. Yön değişimini önemseyen ekranlarda:
  - ilgili bileşeni yeniden bağlamak (remount) veya
  - `Dimensions.addEventListener('change', ...)` ile kendi yeniden hesaplama mantığınızı tetiklemek
  iyi bir pratiktir.
- **Tablet Uyarlamaları**: `isTablet()` hızlı bir kontrol sağlar; grid kolon sayısı, padding, font büyüklüğü gibi alanlarda koşullu değerler kullanın.

---

### SSS

- “`fontType('semiBold')` neden sadece `fontWeight` döndürdü?”
  - `setFontConfig` ile `semiBold` için bir `fontFamily` belirtmediyseniz, paket otomatik olarak mantıklı bir `fontWeight` fallback’i verir.

- “`fontSizes` değerlerim yön değişince güncellenmiyor.”
  - `fontSizes` modül yüklenirken hesaplanır. Yön değişimi senaryosunda dinamik hesaplama için `fontSize(…)` çağrılarını tercih edin veya bileşeni yeniden bağlayın.

---

### Katkıda Bulunma

Sorun/öneri için GitHub üzerinden iletişime geçebilirsiniz:
- Issues: [GitHub Issues](https://github.com/suelifaydin/react-native-overall-style/issues)
- Repo: [GitHub Repository](https://github.com/suelifaydin/react-native-overall-style)

PR’ler memnuniyetle karşılanır.

---

### Lisans

MIT © suelifaydin