Skip to content

Telefonica/mistica-ios

Repository files navigation

Mistica for iOS Mistica for iOS

Swift Version Xcode Version Platform iOS Version Languages Swift Package Manager compatible Carthage compatible Cocoapods compatible

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

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

SwiftUI

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:

Mística Catalog for iOS

Contributing

See CONTRIBUTING.md