Какие инструменты SwiftUI будешь использовать для построения дизайн системы?

Инструменты SwiftUI для построения дизайн-системы

При построении дизайн-системы в SwiftUI я использую комбинацию встроенных инструментов и кастомных решений, которые обеспечивают консистентность, масштабируемость и легкое поддержание кодовой базы. Вот ключевые инструменты и подходы:

1. Кастомные ViewModifier для стилизации

ViewModifier — это основа для создания переиспользуемых стилей. Например, для кнопок, текстовых полей или карточек.

struct PrimaryButtonModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.headline)
            .foregroundColor(.white)
            .padding()
            .frame(maxWidth: .infinity)
            .background(Color.blue)
            .cornerRadius(10)
            .shadow(radius: 5)
    }
}

extension View {
    func primaryButtonStyle() -> some View {
        modifier(PrimaryButtonModifier())
    }
}

// Использование
Button("Действие") { }
    .primaryButtonStyle()

2. Кастомные View для компонентов

Создание оберток для сложных компонентов, таких как карточки, диалоги или навигационные панели.

struct CardView<Content: View>: View {
    let content: Content
    
    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }
    
    var body: some View {
        content
            .padding()
            .background(Color(.systemBackground))
            .cornerRadius(12)
            .shadow(color: .gray.opacity(0.2), radius: 8)
    }
}

3. Система цветов и типографики через Assets и Font

• Используйте Color Set в Assets.xcassets для централизованного управления цветами.
• Создайте кастомные шрифты через Font.custom().

extension Color {
    static let brandPrimary = Color("BrandPrimary")
    static let secondaryBackground = Color("SecondaryBackground")
}

extension Font {
    static let largeTitleBranded = Font.custom("Inter-Bold", size: 34)
    static let bodyBranded = Font.custom("Inter-Regular", size: 16)
}

4. @Environment и EnvironmentValues для глобальных настроек

Для передачи глобальных параметров, таких как тема, размеры или язык.

struct ThemeKey: EnvironmentKey {
    static let defaultValue = Theme.light
}

extension EnvironmentValues {
    var theme: Theme {
        get { self[ThemeKey.self] }
        set { self[ThemeKey.self] = newValue }
    }
}

enum Theme {
    case light, dark
}

5. PreferenceKey и Anchor для сложных layout-расчетов

Полезно для создания адаптивных сеток, кастомной навигации или сложных анимаций.

struct WidthPreferenceKey: PreferenceKey {
    static let defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

6. @ViewBuilder и @State для динамических интерфейсов

Позволяет создать гибкие компоненты, которые принимают различные конфигурации.

struct DynamicList<Item, Content: View>: View {
    let items: [Item]
    @ViewBuilder let content: (Item) -> Content
    
    var body: some View {
        ForEach(items, id: \.self) { item in
            content(item)
        }
    }
}

7. Swift Package Manager для модульности

Выношу дизайн-систему в отдельный Swift Package, чтобы использовать в нескольких проектах.

8. Протоколы и generics для типобезопасности

Создаю протоколы для компонентов, которые должны соответствовать определенным правилам.

protocol DesignSystemComponent {
    var isEnabled: Bool { get }
    func applyStyle() -> AnyView
}

9. Инструменты тестирования: ViewInspector и Snapshot

• ViewInspector для unit-тестов компонентов.
• Snapshot-тестирование для проверки визуальной консистентности.

10. Документирование с помощью DocC

Использую DocC для создания интерактивной документации по компонентам дизайн-системы.

Ключевые принципы:

• Единый источник истины для всех стилей и цветов.
• Инкапсуляция логики внутри компонентов.
• Поддержка темной темы и динамического типа.
• Оптимизация производительности через EquatableView и @ViewBuilder.

Этот подход позволяет создавать масштабируемую и легко поддерживаемую дизайн-систему, которая интегрируется в большие проекты с минимальными затратами на переделку.