{"id":13694630,"url":"https://github.com/molcik/swiftui-elements","last_synced_at":"2025-05-03T04:30:48.304Z","repository":{"id":40630087,"uuid":"276662696","full_name":"molcik/swiftui-elements","owner":"molcik","description":"iOS SwiftUI starter kit based on Sketch Elements. ","archived":false,"fork":false,"pushed_at":"2024-07-31T07:00:55.000Z","size":313927,"stargazers_count":37,"open_issues_count":0,"forks_count":9,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-12T21:39:00.829Z","etag":null,"topics":["boiletplate","ios","starter-kit","swift","swiftui","swiftui-example","template","xcode"],"latest_commit_sha":null,"homepage":"https://koala42.com","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/molcik.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["molcik"],"buy_me_a_coffee":"p9idjxx"}},"created_at":"2020-07-02T14:06:45.000Z","updated_at":"2024-08-29T00:52:03.000Z","dependencies_parsed_at":"2024-11-12T21:43:20.809Z","dependency_job_id":null,"html_url":"https://github.com/molcik/swiftui-elements","commit_stats":null,"previous_names":["molcik/swiftui-elements"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/molcik%2Fswiftui-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/molcik%2Fswiftui-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/molcik%2Fswiftui-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/molcik%2Fswiftui-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/molcik","download_url":"https://codeload.github.com/molcik/swiftui-elements/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252144369,"owners_count":21701398,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boiletplate","ios","starter-kit","swift","swiftui","swiftui-example","template","xcode"],"created_at":"2024-08-02T17:01:36.028Z","updated_at":"2025-05-03T04:30:43.296Z","avatar_url":"https://github.com/molcik.png","language":"Swift","funding_links":["https://github.com/sponsors/molcik","https://buymeacoffee.com/p9idjxx","https://www.buymeacoffee.com/p9IDjxX"],"categories":["Misc"],"sub_categories":["SwiftUI"],"readme":"# SwiftUI Elements - iOS Template/Boilerplate\n\niOS Template is an iOS SwiftUI starter kit based on [Sketch Elements](https://www.sketch.com/elements). \n\n![ios-cover](https://filipmolcik.com/wp-content/uploads/2020/12/ios-app-template-based-on-sketch-elements-cover-1024x397.png)\n\n## Overview\nThis section of the documentation describes the props and examples for all the components from iOS SwiftUI Template based on [Sketch Elements](https://www.sketch.com/elements). Please take some time to explore all of the components.\nThe following is the list of screens provided by this template.\n\n## General\n- [x] Navigation\n- [x] Theming\n- [x] Dark mode\n- [x] Modal\n- [x] Lazy Loading (Images)\n\n## Themes\n- [x] Food\n- [x] Social\n- [x] Travel\n- [x] Music\n- [x] Photography\n\n## Installation\n\nAfter downloading the files just unzip it and open Xcode. From the welcome window select open existing project. After opening the project make sure to configure all settings as is the bundle identifier and signing as you are used to.\n\n## Usage\n\nThe best way to use this project is to create your custom folder in the project root e.g. MyApp With default user story. I will copy past here Travel.swift content to simulate it. Then in ContentView.swift delete or comment out all the unnecessary lines you don’t want to use. Here is minimal example.\n\n![xcode-entrypoint](https://filipmolcik.com/wp-content/uploads/2024/07/Screenshot-2024-07-30-at-16.23.45.png)\n\nNow you should be able to run your project.\n\n## Customization\n\nCustomization can be done by defining the Theme in ContentView.swift as follows\n\n```swift\n@State var selectedTheme = Theme.food\n```\n\nOr through the color variables, icons, and components used across the projects. You can edit it directly as it is best way how to use this project.\n\n### Color Variables\nAll color variables are located in ColorPalette.xcassets and the defaults are:\n* BrandPrimary\n* Contras\n* Default\n* Gray\n* SocialPrimary\n* Transparent\n* TravelPrimary\n\nThese colors come in 3 variations Any Appearance, Light Appearance, and Dark Appearance. All the colors are then defined in Models/Constants.swift file. Usage is then as easy as\n\n```swift\nvar tintColor: Color = Constant.color.travelPrimary\n```\n\n### Mock Data\n\nMock data are loaded to the app through Models/Data.swift, where they are parsed to the models defined in Models folder. \n\nFor example Recipes.json\n\n```json\n\n   {\n     \"id\": \"hummus\",\n     \"title\": \"Hummus\",\n     \"category\": \"vegetarian\",\n     \"people\": 6,\n     \"minutes\": 10,\n     \"picture\": {\n       \"uri\": \"https://firebasestorage.googleapis.com/v0/b/react-native-e.appspot.com/o/hummus.jpeg?alt=media\u0026token=86b00866-3989-492e-9206-9127bbd9745d\",\n       \"preview\": \"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAYABgAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAA…”.\n     },\n     \"instructions\": [\n       \"In the bowl of a food processor, combine the tahini and lemon juice and process for 1 minute.\",\n       \"Add the olive oil, minced garlic, cumin, and a 1/2 teaspoon of salt to the whipped tahini and lemon juice. Process for 30 seconds, scrape the sides and bottom of the bowl then process another 30 seconds or until well blended.\",\n       \"Add half of the chickpeas to the food processor and process for 1 minute. Scrape sides and bottom of the bowl, then add remaining chickpeas and process until thick and quite smooth; 1 to 2 minutes.\"\n     ],\n     \"ingredients\": [\n       {\n         \"checked\": true,\n         \"name\": \"Chickpeas\",\n         \"quantity\": \"15 ounces\"\n       },\n       {\n         \"checked\": true,\n         \"name\": \"Fresh lemon\",\n         \"quantity\": \"1\"\n       },\n       {\n         \"checked\": false,\n         \"name\": \"Well-stirred tahini\",\n         \"quantity\": \"¼ cup\"\n       }\n     ]\n   }\n```\n\nIt is parsed as a Recipe model defined in Recipe.swift\n\n\n``` swift\n\u2028struct Recipe: Hashable, Codable, Identifiable {\n    var id: String\n    var title: String\n    var people: Int\n    var minutes: Int\n    var instructions: [String]\n    var ingredients: [Ingredient]\n    var picture: Picture\n    var category: String\n}\n\nstruct Category: Hashable, Codable, Identifiable {\n    var id: String\n    var title: String\n    var subtitle: String\n    var picture: Picture\n}\n\nstruct Ingredient: Hashable, Codable, Identifiable {\n    var id: String {name}\n    var checked: Bool\n    var name: String\n    var quantity: String\n}\n\nstruct Instruction: Hashable, Codable, Identifiable {\n    var description: String\n    var id: String {description}\n}\n```\n\nFor other data it is similar. Here is a list of other data used for mocks.\n\n* recipes\n* restaurants\n* recipeCategories\n* stories\n* conversations\n* posts\n* users\n* guides\n* cities\n\n### Components\n\nAll reusable components are located in the Elements folder. Usage is similar across all the components and can be seen in the preview for each component. E.g. Stars Component is defined in Elements/Stars.swift and its structure is as follows:\n\n```swift\n\nstruct Stars: View {\n\n\t// implementation\n\n}\n\n// usage example\nstruct Stars_Previews: PreviewProvider {\n    static var previews: some View {\n        Stars(4, label: \"167 reviews\", color: Color(\"TravelPrimary\"))\n    }\n}\n\n```\n\nHere is the list of all reusable components. \n\n* Modal\n* Card\n* Header\n* Button\n* Table\n* Stars\n* Segmented Picker\n* Collapsable Picker\n* SegmentedPickerCollapsed\n* Count Picker\n* Profile\n* VenuesList\n\n### Modifiers\nModifiers can be used through extension API defined in Elements/ViewExtensions.swift. For TabBarModifier it is:\n\n```swift\nTabView() {\n\tText(“Tab 1”)\n\t}\n        .tabBarOpaque()\n```\n\nThere are 3 modifiers that can be used across the project. \n\n* NavigationBarModifier\n* TabBarModifier\n* SizeAwareViewModifier\n\n\n## Dependencies\nThe whole project uses only modern Swift Page Manager and is not dependent on any other managers as is CocoaPods etc. These Swift packages are managed from the Project view in the Swift Packages tab.\n\n\n## Help\nEven with the great documentation, you're likely to get stuck at some point. If you've encountered a bug with this iOS Template, please [post an issue](https://github.com/molcik/swiftui-elements/issues/new) and one of our maintainers will happily reach out to you. No question's too silly to ask but we recommend checking the documentation and [existing issues](https://github.com/molcik/ios-sketch-elements/issues) before opening and a new one.\n\n# Support me\nIf you find this useful, consider supporting independent open-source development and buy me a coffee.\n\n[![buy me a coffee](https://filipmolcik.com/wp-content/uploads/2020/07/BUY-ME-A-COFFEE.png)](https://www.buymeacoffee.com/p9IDjxX)\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmolcik%2Fswiftui-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmolcik%2Fswiftui-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmolcik%2Fswiftui-elements/lists"}