Awesome

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.

Documentation

Yoga is documented at http://gympass.github.io/yoga.

Installing

In order to install our design-system just run:

$ yarn add @gympass/yoga

Usage

An 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>
);

Architecture

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

Support

Browser: We support the 3 latest and stable releases of all major browsers and platforms

Operational System: Yoga provides support for iOS 14 and higher and Android 7 and higher.

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.

License

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).

Report an issue

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.

Request a feature

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.

Contributing Guide

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.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!