Design system at Wellhub, our main intent is to support our projects. We have open-sourced our project for those who are interested in checkout how we do things and organize our code and documentation here.
What does it mean?
Yoga is a scientific system of practices made to help each one of us achieve our highest potential and experience.
Yoga is documented at http://gympass.github.io/yoga.
In order to install our design-system just run:
$ yarn add @gympass/yogaAn important point is that your whole application must be wrapped in our ThemeProvider component:
import { ThemeProvider, Button } from '@gympass/yoga';
const App = () => (
<ThemeProvider>
<Button>Find an activity</Button>
</ThemeProvider>
);
The Yoga Design System codebase is structured as a monorepo, containing individually versioned libraries. Below is an overview of the main packages:
| Package | Version | Size | Description |
|---|---|---|---|
@gympass/yoga |
Main package that brings together and exports all components | ||
@gympass/yoga-tokens |
Contains the design tokens used to maintain visual consistency | ||
@gympass/yoga-common |
Contains some helper variables used in all packages | ||
@gympass/yoga-icons |
Library of icons used in components | ||
@gympass/yoga-illustrations |
Library of illustrations used in components | ||
@gympass/yoga-helpers |
Helper functions to make yoga components easier to use | ||
@gympass/yoga-system |
Tools to apply themes and styles based on design tokens |
Browser: We support the 3 latest and stable releases of all major browsers and platforms
| Browser | Version |
|---|---|
| Chrome | >= 125 |
| Chrome (Android) | >= 125 |
| Safari (macOS) | >= 15 |
| Safari (iOS) | >= 15 |
| Edge | >= 125 |
| Firefox | >= 125 |
Operational System: Yoga provides support for iOS 14 and higher and Android 7 and higher.
| OS | Version | Viewport Size |
|---|---|---|
| Android | >= 7 | Android Large: 360 x 800 (Samsung S20) |
| iOS | >= 14 | iPhone SE: 320 x 568 |
React: Build user interfaces out of individual pieces called components written in JavaScript. Yoga supports versions >=16.
React Native: Brings the React programming paradigm to platforms like Android and iOS. Yoga supports version 0.72.3.
Picker: A Picker component for React Native which emulates the native interfaces for iOS and Android. Yoga supports versions ^2.4.9.
Styled Componentes: This lets you write actual CSS in your JavaScript.Yoga supports versions ^4.4.0.
Yoga is an open-source collaborative project, in other words, its distribution grants the right to study, use, change and distribute it to anyone (MIT license).
Check if there is already an issue open in our repository. If not, you can create a new one. Also, check the discussion topics. Our team will analyze and prioritize within our initiatives. If you are interested and available, let us know and we will address you ASAP. Wellhub developers should refer to the Internal Guidelines.
If you believe it is necessary to develop a new feature, for example a new component, please contact our team. You can open a new discussion topic, explaining the need. Our team will analyze and prioritize within our initiatives, taking into account design and engineering principles, such as reusability. If you are interested and available, let us know and we will address you ASAP. Wellhub developers should refer to the Internal Guidelines.
This repository should and will grow, its contents will be used for many people in our current and future projects. As such, we follow some practices to keep a common architecture in our changes. Read our Contributing Guide to learn about our code of conduct, environments setups and development process. Wellhub developers should also consult the Internal Guidelines.
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!