Package Card

[mksglu]

Package Card

• Kartın sol kenarında bulunan Icon bir CompanyServiceType verisidir. Bu enum a constants dizini içerisinden ulaşabilirsin. API'de bu tipte dönecek bize veri. Bu nedenle şunu yapalım: İhtiyaca göre bir hook ya da bir helper yazalım. Util değil, özellikle belirtmek isterim ki dosya isimleri yardımcı methodları içeriyorsa ve bir React bağımlılığı yoksa helper olmalıdır Velat.
• Bu prop un ismi companyServiceType olabilir. Sana, enum da yer alan değerler gelecek. Sen de o enum da yer alan değerleri içeren bir Type yazabilirsin. Bir method olsun: getCompanyServiceTypeIcon isminde ve bu method bana bir Switch Case içerisinde Icon döndürsün. Bu icon ları kendin seçebilirsin. Üç adet tipimiz var şu anda zaten. 😸 Bkz: Expo Icon
• Bir diğer prop ismimiz: companyServiceName olmalıdır. Örnek: Yoga gibi. Sana string tipinde döner. Domains altından şema tiplerini inceleyebilirsin.
• Bir diğer prop isimlerimiz: totalCount ve remainingCount olabilir. Kalan hakları ve toplam paket hakkını alacak sayıları burada vereceğiz.
• Bir diğer prop: companyServicePackageName Örnek: Silver gibi. Sana string tipinde döner. Domains altından şema tiplerini inceleyebilirsin.
• Bir diğer prop ise Detail olup olmadığını ayırt etmemize imkan sağlayan bir boolean değer olabilir.

import {CompanyServiceType} from 'constants'

type PackageCardProps = {
  companyServiceType: keyof typeof CompanyServiceType;
  companyServiceName: string;
  totalCount: number;
  remainingCount: number;
  companyServicePackageName: string;
  detail: boolean;
}

• Detail ekranında, yani My Packages ekranında, Upgrade yazısı da gözükmekte. Sen bunu kendin değiştirebilir, daha farklı bir Card yapabilirsin elbette. Şunu demek istiyorum, bu tarzda UI'de gözükebilecek yetkinliğe (ability)'e sahip durumlarda should ön eki kullanalım isimlendirmelerde. Yani shouldShowUpgradeText gibi... Tabii, bunu da detail prop'unu kontrol ederek yapabilirsin.
• Bu kart hem Home ekranında, hem de My Packages ekranında gösterilmelidir.
• Bu kart, daima 4 ve 8'in katlarını kullansın. Örneğin: 4,8,64, 16 gibi... 13 olmasın mesela. Bu sayede bir tasarım-sistemi çıkartmaya çalışalım. Dışarısına hiçbir zaman margin vermesin. Yalın olsun. Bırak, Card'ı kullanan düşünsün bunları.
• Variant yazmak istersen Styled Comp'a prop vererek çözebilirsin. Ama, dilersen Stylesheet'de kullanabilirsin, esnetelim biraz.
• Tip tanımlalarını extract etmeyelim types gibi dosyalarla.
• Component dizini dışında bir yere dokunmayalım PR'de.

[savataqe1]

#34