SERIES FOR REACT ARCHITECTURE

React Örnek Mimarisi — 7 (Design System Implementation)

Bundan önceki blog yazısında Design System’den bahsetmiştik, bu yazıda Design Systemi projemize nasıl gerçekleştirebileceğimiz üzerinde duracağız.

Onur Dayıbaşı

Published in

Frontend Development With JS

3 min readApr 23, 2024

Eğer hazır bir bileşen kütüphanesi kullanmıyor UIX designer ile kendi tasarımlarınızı oluşturuyorsanız ufakta olsa bir Design System (Tasarım Sistemini) yapınızıda barındırmanızda büyük fayda var.

Bundan önceki yazılarımda Design System’inden bahsetmiştim. Bu blogda bu design systemi react projemize nasıl uygulayacağımız konusuna değineceğim.

Aşağıdaki resimde görebileceğiniz gibi uygulamamızı oluşturan bileşenler temelde 2 kavram üzerinde durur.

Contents (İçerik, Title , Desc, Data ….)
Foundations (Bunun nasıl gösterileceği Icon, Font, Size, Color)

Foundations

Foundations dediğimiz aslında Icon, Image, Font, Typography, Size, Animasyon opsiyonlarının mantıklı bir şekilde proje içerisinde kullanılmasıdır. İşte burada Tasarım Sistemine ihtiyaç duyarız. Her bir yapının projeye dahil edilmesi ile ilgili farklı farklı yöntemler bulunur, ben burada styled-components üzerinden bu yaklaşımı nasıl gerçekleştirdiğimi anlatacağım.

Not: Referanslar bölümüne konu ile ilgili birçok blog yazımı da ekliyorum.

Burada işin özü kısıtlamak.

1nci Aşama: Seed Yapıları Oluşturma

Font Family : Arial, Inter ..
Color paleti oluşturuyorum SeedColor üzerinden alpha ile oynayabileceğim belirli renkler ve temel Beyaz, Siyah tonları
Size modülü oluşturuyorum , 2nin katları, 4 katları, 8in katları…

Burada amacım ufak prop değişiklikleri ile Kavramsal bir Foundation bileşeni oluşturmak

Blue100, Black100
x2, x4,x8, x16 ……

Not: Color tanımlaması yaparken tüm Color paletini tek tek tanımlamak yerine applyOpacity ile SeedColor üzerinden türeterek oluşturuyorum.

PrimaryHover= applyOpacity(SeedColor.dimBlue100, 0.7),

export const applyOpacity = (hexCode, opacity = 1) => {
  hexCode = hexCode.replace('#', '');
  if (hexCode.length !== 6) {
    throw new Error('Invalid hex color code length (must be 6 characters).');
  }

  const r = parseInt(hexCode.slice(0, 2), 16);
  const g = parseInt(hexCode.slice(2, 4), 16);
  const b = parseInt(hexCode.slice(4), 16);

  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
};

2nci Aşama: Token Yapılarını Oluşturma

Seed değişkenler üzerinde daha uygulama seviyesine yakın Token’lar oluşturuyoruz.

ColorTokens: Ner bir grup içerisinde tabi birden fazla token bulunuyor ve bu mantıksal isimleri uygulama içerisinde kullanmak oldukça basit ve anlaşılır oluyor.

TextColorTokens,
ForegroundColorTokens,
PrimaryColorTokens,
NotificationColorTokens,

Örneğin: TextColorToken.SolidText , PrimaryColorTokens.PrimaryHover benzeri..

Size Tokens: Boyutlar ve uzunluklar ile ilgili

SizeTokens (Width, Height)
MarginTokens
PaddingTokens
GapTokens
RadiusTokens

Örneğin MarginTokens.XXL, RadiusTokens.L gibi..

3ncü aşama: Bileşen Altyapıları (Layout, Typography, Icon, Image) Oluşturma

Burada bileşenlerin temelini oluşturacak altyapı bileşenlerini oluşturuyoruz.

Layout modülü içerisinde FlexLayout, GridLayot, BoxLayout, Divider gibi Layout bileşenleri bulunuyor ve bunlar yukarıdaki Token’lardan beslenerek çalışıyor

Typography modülü içerisinde Headline, Title, Body, Other. bileşenler var. Bu bileşenlere

<Headline large bold>ABC</Headline>
<Title small><>

Icon modülü içerisinde projelerde önceden tanımladığınız veya daha öncesinde hazır bir kütüphaneden kullandığınız kaynakları bu Icon bileşenine atayarak kullanabilirsiniz.

<Icon src.... large bold>

Referanslar

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki(react-mimarisi) diğer yazılara erişmek için bu linke tıklayabilirsiniz.