dnrops
/
YComponentBrowser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update README.md 

Updated color sample code and order of sample code
This commit is contained in:
PanchamiShenoy 2022-09-26 12:50:58 +05:30
parent 23a157bb30
commit a5c9a24d52
1 changed files with 191 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

382
README.md
View File

@ -14,6 +14,197 @@ Setup
Open `Package.swift` in Xcode. 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 Contributing to Y—Catalog-Viewer
---------- ----------
@ -93,194 +284,3 @@ To view additional documentation options type:
jazzy --help 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/ (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")
}
}