Pixel CLI

@wface/pixel-cli — Pixel UI bileşen kütüphanesini projelerinize entegre etmek için kullanılan komut satırı aracıdır. Hazır React bileşen şablonlarını projenize ekleyebilir ve uygulama konfigürasyonunu iskelet olarak kurabilir.

Gereksinimler

• Node.js >= 18

Kurulum

npm install @wface/pixel-cli

ya da global olarak:

npm install -g @wface/pixel-cli

Komutlar

list

Mevcut bileşen şablonlarını listeler.

pixel-ui list [seçenekler]

| Seçenek | Açıklama | |-----------------------|---------------------------------------------| | --category <name> | Belirli bir kategoriyle filtreler (blocks, layouts, views) |

Örnek:

pixel-ui list
pixel-ui list --category blocks

add <category> <name>

Belirtilen bileşen şablonunu projenize kopyalar. Şablonun bağımlı olduğu diğer şablonları da (template.json → dependencies) otomatik olarak ekler.

Şablonların ihtiyaç duyduğu npm paketleri (template.json → packages) kurulmaz; işlem sonunda kurulum komutu ekrana yazdırılır:

This template needs these packages, install them if missing:
  npm install react-icons react-router swiper

pixel-ui add <category> <name> [seçenekler]

Kategoriler: blocks | layouts | views

| Seçenek | Varsayılan | Açıklama | |-------------------|------------------|---------------------------------------------------| | --base <path> | src/components | Bileşenlerin kopyalanacağı ana dizin | | --dir <name> | <category> | --base altında oluşturulacak alt dizin adı | | --force | false | Mevcut dosyaların üzerine prompt olmadan yazar | | --yes | false | Tüm üzerine yazma sorularına otomatik "evet" der | | --no | false | Mevcut dosyaları atlar (üzerine yazmaz) | | --dry-run | false | Dosya yazmadan yapılacak işlemleri önizler |

Örnekler:

# Login form bileşenini ekle
pixel-ui add blocks login-form

# Sidebar bileşenini farklı bir dizine ekle
pixel-ui add blocks sidebar --base src/shared/components

# Üzerine yazma sorusu olmadan ekle
pixel-ui add layouts dashboard-layout --force

# Önce ne yapacağını gör, dosya yazma
pixel-ui add views example-list --dry-run

app:configuration

Uygulama iskeletini (src/core) projenize kopyalar: route tanımları (AppRoutes.tsx, constants/routes.ts), blokların kullandığı ayarlar (constants/settings.ts, constants/sidebar-icons.ts) ve örnek sayfalar.

Kopyaladıktan sonra uygulamanızı router ve Pixel provider'ı ile sarmalayın (react-router kurulu olmalı):

import { BrowserRouter } from 'react-router'
import { Pixel } from '@wface/pixel-ui'
import '@wface/pixel-ui/styles.css'
import AppRoutes from './core/AppRoutes'

createRoot(document.getElementById('root')!).render(
  <BrowserRouter>
    <Pixel>
      <AppRoutes />
    </Pixel>
  </BrowserRouter>
)

Yeni sayfalar constants/routes.ts içine eklenir ve /dashboard/<path> altında açılır.

Bloklar ayarları src/core/constants altından okur. --flat ya da farklı bir --dir kullanırsanız blok import yollarını buna göre düzenleyin.

pixel-ui app:configuration [seçenekler]

| Seçenek | Varsayılan | Açıklama | |-----------------|------------|--------------------------------------------------| | --dir <path> | src | Hedef dizin | | --flat | false | Dosyaları core/ alt dizini olmadan doğrudan kopyalar | | --force | false | Mevcut dosyaların üzerine prompt olmadan yazar | | --yes | false | Tüm üzerine yazma sorularına otomatik "evet" der | | --no | false | Mevcut dosyaları atlar | | --dry-run | false | Dosya yazmadan işlemleri önizler |

Örnekler:

# Konfigürasyonu src/core dizinine kopyala
pixel-ui app:configuration

# Farklı bir dizine kopyala
pixel-ui app:configuration --dir app

# Flat yapıda kopyala (core/ alt klasörü olmadan)
pixel-ui app:configuration --flat

Mevcut Bileşenler

Blocks

Tekrar kullanılabilir UI bileşenleri:

| Bileşen | Açıklama | |---------------|------------------------------------------------------| | login-form | OTP destekli login formu (Formik + Yup validasyon) | | sidebar | Daraltılabilir navigasyon kenar çubuğu | | topbar | Üst navigasyon çubuğu | | topnav | Alternatif üst navigasyon | | entity-card | Varlık/içerik gösterimi için kart bileşeni |

Layouts

Sayfa düzeni şablonları:

| Bileşen | Açıklama | |--------------------|---------------------------| | auth-layout | Kimlik doğrulama düzeni | | dashboard-layout | Dashboard ana düzeni |

Views

Tam sayfa görünümleri:

| Bileşen | Açıklama | |---------------------|----------------------------------------------------| | example-list | Örnek liste görünümü | | programming-guide | EPG (Elektronik Program Rehberi) görünümü |

Geliştirme

Projeyi geliştirmek için:

# Bağımlılıkları yükle
npm install

# Şablonları typecheck et (@wface/pixel-ui yerel ../pixel-ui klasöründen gelir, önce orada build alın)
npm run typecheck

# Lint kontrol
npm run lint

Teknoloji Yığını

• React 19 — UI bileşenleri
• React Router 8 — Şablonlardaki routing
• TypeScript ~5.9 — Tip güvenliği
• Commander — CLI komut yönetimi
• fs-extra — Gelişmiş dosya sistemi işlemleri
• kleur — Terminal renk çıktısı
• @wface/pixel-ui — Temel UI kütüphanesi

Lisans

Digiturk dahili kullanımına aittir.