Mistica is a framework that contains reusable UI components and utilities for the Telefonica Design System (Mistica)

• Installation
  • Swift Package Manager
  • Carthage
  • Cocoapods
• Configuration
• Fonts
• Components
• Demo app
• Contributing

Packages

This repo has contains three different packages:

• Mistica: It contains all the components of Mistica for UIKit.
• MisticaSwiftUI: It contains all the components of Mistica for SwiftUI.
• MisticaCommon: It contains all the common elements for both UIKit and SwiftUI implementation, including assets, colors and fonts. It is internal, so you won't need to import it in any case.

Installation

Swift Package Manager

You can add Mistica to an Xcode project by adding it as a package dependency.

1. From the File menu, select Swift Package > Add Package Dependency.
2. Enter "https://github.com/Telefonica/mistica-ios" into the package repository URL text field.
3. From the Add Package to App window, select MisticaCommon and Mistica or MisticaSwiftUI library.

You also can integrate Mitica to Swift Package, add the following as a dependency to your Package.swift:

.package(name: "Mistica", url: "https://github.com/Telefonica/mistica-ios.git", .from("2.0.0"))

and then specify "Mistica" or "MisticaSwiftUI" as dependencies of the target in which you wish to use Mistica.

Carthage

Add Mistica to your Cartfile:

github "Telefonica/mistica-ios"

And then run:

carthage update --platform iOS --use-ssh --use-xcframeworks

More information about Carthage integration here

Cocoapods

Add Mistica to your Podfile:

pod 'MisticaSwiftUI', :git => 'git@github.com:Telefonica/mistica-ios.git'

or

pod 'Mistica', :git => 'git@github.com:Telefonica/mistica-ios.git'

And then run:

pod install

Configuration

By default the framework components are created with the Movistar's brand style, to select a different one, configure the brand style:

MisticaConfig.brandStyle = .o2

Remember to initialize Mistica with you desired brand style before the initialize the UI of your app.

In applications before iOS 13, the initialziation should be done in the UIApplicationDelegate,

func application(_: UIApplication, didFinishLaunchingWithOptions _: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // Set up Mistica
    MisticaConfig.brandStyle = .vivo

    return true
}

For applications in iOS 13 and above, the initialization should be done in the SceneDelegate

func scene(_ scene: UIScene, willConnectTo _: UISceneSession, options _: UIScene.ConnectionOptions) {
    guard let windowScene = (scene as? UIWindowScene) else { return }

    // Configure brand style before initializing the UI
    MisticaConfig.brandStyle = .movistar
}

Every component in mistica supports dark mode. In order to configure dark mode in you app, you can follow Apple guidelines.

Fonts

By default mistica uses the system font, but if you need to use a custom font (Telefonica font, On-Air, etc) you can follow these instructions.

Components

UIKit

• Badge
• Button
• Cards
  • DataCard
  • MediaCard
  • HighlightedCard
• Checkbox
• Controls
• Crouton
• EmptyState
• Feedbacks
• Filter
• Form
• Header
• InputFields
• Lists
• NavigationBar
• Popover
• RadioButton
• ScrollContentIndicator
• SectionTitle
• Stepper
• Switch
• Tabs
• Tag
• ViewStates

SwiftUI

• Badge
• Button
• Cards
  • DataCard
  • [Not Implemented]MediaCard
  • [Not Implemented]HighlightedCard
• Checkbox
• Crouton
• EmptyState
• Feedbacks
• [Not Implemented]Filter
• [Not Implemented]Header
• InputFields
• Lists
• Popover
• RadioButton
• ScrollContentIndicator
• SectionTitle
• Stepper
• Tabs
• Tag
• [Not Implemented]ViewStates

Demo app

Included in this repository there's a demo app showcasing all implemented components. With each new release, a new version of the mistica catalog app is created. It can be installed with this link or by using the following QR:

Contributing

See CONTRIBUTING.md