Update README.md
Updated color sample code and order of sample code
This commit is contained in:
PanchamiShenoy
parent
23a157bb30
commit
a5c9a24d52
382
README.md
382
README.md
|
|
@ -14,6 +14,197 @@ Setup
|
|||
|
||||
Open `Package.swift` in Xcode.
|
||||
|
||||
|
||||
### Sample code to display built-in components
|
||||
|
||||
A user can use built-in components like Iconoraphy Category, Font Category, and Color Category to display icons, fonts, and colors respectively.
|
||||
|
||||
For example, a user can create an iconoraphy category as follows:
|
||||
|
||||
```enum IconographySample {
|
||||
static var media: IconographyCategory {
|
||||
IconographyCategory(
|
||||
name: "Media",
|
||||
models: [
|
||||
.init(
|
||||
title: "Play",
|
||||
model: UIImage(systemName: "play.fill") ?? UIImage()
|
||||
),
|
||||
]
|
||||
)
|
||||
}
|
||||
}
|
||||
```
|
||||
where the user needs to provide the following parameters:
|
||||
* The name of the category.
|
||||
* Model for the image to be displayed, which again includes:
|
||||
* The title label for the image.
|
||||
* model which is an image to be displayed.
|
||||
* The detail label which is an optional parameter, allows a user to include additional details about the image if needed.
|
||||
*The axis attribute which is an optional parameter with which a user can decide whether they want to display the title, details, and image to be displayed vertically or horizontally.
|
||||
|
||||
|
||||
a user can create a font category as follows:
|
||||
```
|
||||
enum TypographySample {
|
||||
static var tiemposHeadlineBold: FontCategory {
|
||||
FontCategory(
|
||||
name: "TiemposHeadline Bold",
|
||||
models: [
|
||||
.init(
|
||||
title: "Title 1",
|
||||
axis: .vertical,
|
||||
model: .init(font: UIFont(name: "TiemposHeadline-Bold", size: 36) ?? UIFont())
|
||||
),
|
||||
]
|
||||
)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
where the user needs to provide the following parameters:
|
||||
* The name of the category.
|
||||
* Model for the font to be displayed, which again includes:
|
||||
* The title label to display the content.
|
||||
* model which is the font for the title and detail label.
|
||||
* The detail label which is an optional parameter, allows a user to display additional details if needed.
|
||||
*The axis attribute which is an optional parameter with which a user can decide whether they want to display the title and details to be displayed vertically or horizontally.
|
||||
|
||||
a user can create a color category as follows:
|
||||
```
|
||||
enum colourSample {
|
||||
static var colorSample: ColorCategory {
|
||||
ColorCategory(
|
||||
name: "Easter",
|
||||
models: [
|
||||
.init(
|
||||
title: "Purple",
|
||||
detail: "HEX: #D9D7F1 / RGB: 217, 215, 241",
|
||||
model: UIColor(red: 217/255, green: 215/255, blue: 241/255, alpha: 1)
|
||||
)
|
||||
]
|
||||
)
|
||||
}
|
||||
}
|
||||
```
|
||||
where the user needs to provide the following parameters:
|
||||
* The name of the category.
|
||||
* Model for the view to be displayed, which again includes:
|
||||
* The title label to display the content.
|
||||
* model which is the color of the color view.
|
||||
* The detail label which is an optional parameter, allows a user to display additional details if needed.
|
||||
*The axis attribute which is an optional parameter with which a user can decide whether they want to display the title, details and color view to be displayed vertically or horizontally.
|
||||
|
||||
We can create a category which conatins other categories.
|
||||
```
|
||||
let foundationalCategory = CatalogCategory(
|
||||
name: "Foundational",
|
||||
subcategories: [
|
||||
ColorSample.category,
|
||||
IconographySample.category,
|
||||
TypographySample.category
|
||||
]
|
||||
)
|
||||
```
|
||||
where the user needs to provide the following parameters:
|
||||
* The name of the category.
|
||||
* Array of subcategories.
|
||||
|
||||
|
||||
### Sample code to display Custom Components
|
||||
|
||||
We can use Custom Category to display components like buttons, views within design system
|
||||
|
||||
Suppose a user wants to display a button named DemoButton from their project.
|
||||
```
|
||||
enum DemoButtonSample {
|
||||
static var demoButtonCategory: CustomCategory<CatalogDisplayView<DemoButton>> {
|
||||
CustomCategory<CatalogDisplayView<DemoButton>>(
|
||||
name: "Demo Button",
|
||||
models: [
|
||||
.init(
|
||||
title: "Login",
|
||||
model:
|
||||
.init(
|
||||
backgroundColor: .systemBlue,
|
||||
title: "Login",
|
||||
titleColor: .white
|
||||
)
|
||||
),
|
||||
]
|
||||
)
|
||||
}
|
||||
}
|
||||
```
|
||||
where the user needs to provide the following parameters:
|
||||
* name for the category.
|
||||
* model needed to initialise the button.
|
||||
|
||||
|
||||
We can display a custom view within the catalog.
|
||||
Suppose a user wants to display a custom view named DemoView from their project.
|
||||
```
|
||||
enum DemoViewSample {
|
||||
static var demoViewCategory: CustomCategory<DemoView> {
|
||||
CustomCategory<DemoView>(
|
||||
name: "Demo View",
|
||||
models: [
|
||||
.init(
|
||||
title: "Grocery List",
|
||||
description: "1) apples\n 2) sugar\n 3) coffee\n 4)snacks",
|
||||
backgroundColor: .systemYellow
|
||||
)
|
||||
]
|
||||
)
|
||||
}
|
||||
}
|
||||
```
|
||||
where the user needs to provide the following parameters:
|
||||
* name for the category.
|
||||
* model needed to initialise the custom view.
|
||||
|
||||
We can display view controllers in the catalog
|
||||
1. First create a custom destination that returns the view controller
|
||||
```
|
||||
struct CarouselDestination: Destination {
|
||||
var navigationTitle: String?
|
||||
|
||||
var presentationStyle: Presentation = .detail
|
||||
|
||||
func getDestinationController() -> UIViewController {
|
||||
return CarouselDemoViewController(navigationTitle: navigationTitle ?? "")
|
||||
}
|
||||
|
||||
init(presentationStyle: Presentation = .detail, navigationTitle: String) {
|
||||
self.presentationStyle = presentationStyle
|
||||
self.navigationTitle = navigationTitle
|
||||
}
|
||||
}
|
||||
```
|
||||
2. Create a custom category for that particular view controller
|
||||
```
|
||||
struct CarouselCategory: Classification {
|
||||
let name: String
|
||||
|
||||
var destination: Destination {
|
||||
CarouselDestination(navigationTitle: name)
|
||||
}
|
||||
|
||||
init(name: String) {
|
||||
self.name = name
|
||||
}
|
||||
}
|
||||
```
|
||||
3. Create instance of the category
|
||||
```
|
||||
enum CarouselSample {
|
||||
static var category: CarouselCategory {
|
||||
.init(name: "Carousel Demo View Controller")
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
Contributing to Y—Catalog-Viewer
|
||||
----------
|
||||
|
||||
|
|
@ -93,194 +284,3 @@ To view additional documentation options type:
|
|||
jazzy --help
|
||||
```
|
||||
(Once this repo is made public) A GitHub Action automatically runs each time a commit is pushed to `main` that runs Jazzy to generate the documentation for our GitHub page at: https://yml-org.github.io/ycatalogviewer-ios/
|
||||
|
||||
|
||||
|
||||
### Sample code to display built-in components
|
||||
|
||||
A user can use built-in components like Iconoraphy Category, Font Category, and Color Category to display icons, fonts, and colors respectively.
|
||||
|
||||
For example, a user can create an iconoraphy category as follows:
|
||||
|
||||
enum IconographySample {
|
||||
static var media: IconographyCategory {
|
||||
IconographyCategory(
|
||||
name: "Media",
|
||||
models: [
|
||||
.init(
|
||||
title: "Play",
|
||||
model: UIImage(systemName: "play.fill") ?? UIImage()
|
||||
),
|
||||
]
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
where the user needs to provide the following parameters:
|
||||
* The name of the category.
|
||||
* Model for the image to be displayed, which again includes:
|
||||
* The title label for the image.
|
||||
* model which is an image to be displayed.
|
||||
* The detail label which is an optional parameter, allows a user to include additional details about the image if needed.
|
||||
*The axis attribute which is an optional parameter with which a user can decide whether they want to display the title, details, and image to be displayed vertically or horizontally.
|
||||
|
||||
|
||||
a user can create a font category as follows:
|
||||
enum TypographySample {
|
||||
static var tiemposHeadlineBold: FontCategory {
|
||||
FontCategory(
|
||||
name: "TiemposHeadline Bold",
|
||||
models: [
|
||||
.init(
|
||||
title: "Title 1",
|
||||
axis: .vertical,
|
||||
model: .init(font: UIFont(name: "TiemposHeadline-Bold", size: 36) ?? UIFont())
|
||||
),
|
||||
]
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
where the user needs to provide the following parameters:
|
||||
* The name of the category.
|
||||
* Model for the font to be displayed, which again includes:
|
||||
* The title label to display the content.
|
||||
* model which is the font for the title and detai label.
|
||||
* The detail label which is an optional parameter, allows a user to display additional details if needed.
|
||||
*The axis attribute which is an optional parameter with which a user can decide whether they want to display the title and details to be displayed vertically or horizontally.
|
||||
|
||||
a user can create a color category as follows:
|
||||
1. First a user needs to add all colors in the Color set and create an enum.
|
||||
public enum NeutralColors: String, CaseIterable, Colorable {
|
||||
case neutrals50
|
||||
case neutrals100
|
||||
case neutrals200
|
||||
case neutrals300
|
||||
case neutrals400
|
||||
case neutrals500
|
||||
case neutrals600
|
||||
case neutrals700
|
||||
case neutrals800
|
||||
case neutrals900
|
||||
}
|
||||
2. Create a color Category
|
||||
enum ColorSample {
|
||||
static var primary: ColorCategory {
|
||||
ColorCategory(
|
||||
name: "Primary",
|
||||
models: PrimaryColors.allCases.map { $0.model }
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
where the user needs to provide the following parameters:
|
||||
* The name of the category.
|
||||
* models can be displayed using map function
|
||||
|
||||
We can create a category which conatins other categories.
|
||||
let foundationalCategory = CatalogCategory(
|
||||
name: "Foundational",
|
||||
subcategories: [
|
||||
ColorSample.category,
|
||||
IconographySample.category,
|
||||
TypographySample.category
|
||||
]
|
||||
)
|
||||
where the user needs to provide the following parameters:
|
||||
* The name of the category.
|
||||
* Array of subcategories.
|
||||
|
||||
|
||||
|
||||
### Sample code to display Custom Components
|
||||
|
||||
We can use Custom Category to display components like buttons, views within design system
|
||||
|
||||
Suppose a user wants to display a button named DemoButton from their project.
|
||||
|
||||
enum DemoButtonSample {
|
||||
static var demoButtonCategory: CustomCategory<CatalogDisplayView<DemoButton>> {
|
||||
CustomCategory<CatalogDisplayView<DemoButton>>(
|
||||
name: "Demo Button",
|
||||
models: [
|
||||
.init(
|
||||
title: "Login",
|
||||
model:
|
||||
.init(
|
||||
backgroundColor: .systemBlue,
|
||||
title: "Login",
|
||||
titleColor: .white
|
||||
)
|
||||
),
|
||||
]
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
where the user needs to provide the following parameters:
|
||||
* name for the category.
|
||||
* model needed to initialise the button.
|
||||
|
||||
|
||||
We can display a custom view within the catalog.
|
||||
Suppose a user wants to display a custom view named DemoView from their project.
|
||||
|
||||
enum DemoViewSample {
|
||||
static var demoViewCategory: CustomCategory<DemoView> {
|
||||
CustomCategory<DemoView>(
|
||||
name: "Demo View",
|
||||
models: [
|
||||
.init(
|
||||
title: "Grocery List",
|
||||
description: "1) apples\n 2) sugar\n 3) coffee\n 4)snacks",
|
||||
backgroundColor: .systemYellow
|
||||
)
|
||||
]
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
where the user needs to provide the following parameters:
|
||||
* name for the category.
|
||||
* model needed to initialise the custom view.
|
||||
|
||||
We can display view controllers in the catalog
|
||||
1. First create a custom destination that returns the view controller
|
||||
|
||||
struct CarouselDestination: Destination {
|
||||
var navigationTitle: String?
|
||||
|
||||
var presentationStyle: Presentation = .detail
|
||||
|
||||
func getDestinationController() -> UIViewController {
|
||||
return CarouselDemoViewController(navigationTitle: navigationTitle ?? "")
|
||||
}
|
||||
|
||||
init(presentationStyle: Presentation = .detail, navigationTitle: String) {
|
||||
self.presentationStyle = presentationStyle
|
||||
self.navigationTitle = navigationTitle
|
||||
}
|
||||
}
|
||||
2. Create a custom category for that particular view controller
|
||||
|
||||
struct CarouselCategory: Classification {
|
||||
let name: String
|
||||
|
||||
var destination: Destination {
|
||||
CarouselDestination(navigationTitle: name)
|
||||
}
|
||||
|
||||
init(name: String) {
|
||||
self.name = name
|
||||
}
|
||||
}
|
||||
|
||||
3. Create instance of the category
|
||||
enum CarouselSample {
|
||||
static var category: CarouselCategory {
|
||||
.init(name: "Carousel Demo View Controller")
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue