Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gympass/yoga
Yoga design-system: a scientific system of practices made to help each one of us achieve our highest potential and experience.
https://github.com/gympass/yoga
design-system gympass hacktoberfest react
Last synced: 3 days ago
JSON representation
Yoga design-system: a scientific system of practices made to help each one of us achieve our highest potential and experience.
- Host: GitHub
- URL: https://github.com/gympass/yoga
- Owner: gympass
- License: mit
- Created: 2019-09-03T14:19:37.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-29T10:25:19.000Z (3 months ago)
- Last Synced: 2024-10-29T12:18:47.110Z (3 months ago)
- Topics: design-system, gympass, hacktoberfest, react
- Language: JavaScript
- Homepage: https://gympass.github.io/yoga/
- Size: 302 MB
- Stars: 225
- Watchers: 81
- Forks: 47
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
[](#contributors)
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](https://gympass.github.io/yoga).
## Installing
In order to install our design-system just run:
```bash
$ yarn add @gympass/yoga
```
## Usage
An important point is that your whole application must be wrapped in our ThemeProvider component:
```bash
import { ThemeProvider, Button } from '@gympass/yoga';
const App = () => (
Find an activity
);
```
## 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`](/packages/yoga) | [](https://www.npmjs.com/package/@gympass/yoga) | [](https://bundlephobia.com/result?p=@gympass/yoga) | Main package that brings together and exports all components |
| [`@gympass/yoga-tokens`](/packages/tokens) | [](https://www.npmjs.com/package/@gympass/yoga-tokens) | [](https://bundlephobia.com/result?p=@gympass/yoga-tokens) | Contains the design tokens used to maintain visual consistency |
| [`@gympass/yoga-common`](/packages/common) | [](https://www.npmjs.com/package/@gympass/yoga-common) | [](https://bundlephobia.com/result?p=@gympass/yoga-common) | Contains some helper variables used in all packages |
| [`@gympass/yoga-icons`](/packages/icons) | [](https://www.npmjs.com/package/@gympass/yoga-icons) | [](https://bundlephobia.com/result?p=@gympass/yoga-icons) | Library of icons used in components |
| [`@gympass/yoga-illustrations`](/packages/illustrations) | [](https://www.npmjs.com/package/@gympass/yoga-illustrations) | [](https://bundlephobia.com/result?p=@gympass/yoga-illustrations) | Library of illustrations used in components |
| [`@gympass/yoga-helpers`](/packages/helpers) | [](https://www.npmjs.com/package/@gympass/yoga-helpers) | [](https://bundlephobia.com/result?p=@gympass/yoga-helpers) | Helper functions to make yoga components easier to use |
| [`@gympass/yoga-system`](/packages/system) | [](https://www.npmjs.com/package/@gympass/yoga-system) | [](https://bundlephobia.com/result?p=@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
| 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](https://react.dev/):** Build user interfaces out of individual pieces called components written in JavaScript. Yoga supports versions `>=16`.
**[React Native](https://reactnative.dev/):** Brings the React programming paradigm to platforms like Android and iOS. Yoga supports version `0.72.3`.
**[Picker](https://www.npmjs.com/package/react-native-picker-select):** A Picker component for React Native which emulates the native interfaces for iOS and Android. Yoga supports versions `^2.4.9`.
**[Styled Componentes](https://styled-components.com/):** 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](https://github.com/gympass/yoga/issues) open in our repository. If not, you can create a new one. Also, check the [discussion topics](https://github.com/gympass/yoga/discussions). 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](CONTRIBUTING.md)
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](CONTRIBUTING.md) 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](https://allcontributors.org/docs/en/emoji-key)):
Gabriel Daltoso
💻 🤔 📖 👀
Allysson dos Santos
💻 🤔 📖 👀
Victor Caetano
💻 🤔 📖 👀
Alan Oliveira
💻 🤔 📖 👀
Kaic Bastidas
💻 🤔 📖
Luis Pires
💻
invilliaanajacobsen
🐛
Caio Alexandre
📖 💻 🤔
Thaylla Christine
💻
Esthéfanie Vila Maior
📖 💻
Geovana Silva
🐛
Lucas Coelho
💻 🤔 📖 👀
André Rocha
📖 💻
Katharine Padilha
💻 🤔
Thiago Amâncio
💻 🎨 🐛
Alyce Cristine
💻 📖 🐛
Nathália Pacheco
💻 📖
Matheus Henrique
📖 💻
Dário Felipe
📖
João Victor
📖
Wendler Eis
🐛 💻
Deborah Miranda
🐛
Matheus Martins
💻 🤔 📖 👀
Leticia Soares
💻 📖
Marcos Ricardo
📖 💻
Jonatas Falkaniere
💻 🤔
Davi Marins Dantas
📖
Natalia Braz
🐛
Eric Cerqueira Leão
💻 📖
Aline Rigoni
💻
Lucas Fernandes Souza
💻
Henrique Sugiyama
💻
Giovanna Freitas
💻 📖
Salomão Luiz de Araújo Neto
💻
Caio Tracera
🐛 💻
Leonardo Gomes
💻
Rafael Pizzaia Coleta
💻
Diego Marcuz
🐛
Luis Guilherme Cardoso Rosa
💻
Ruan Ramalho
🐛
Caio Augusto
🐛
Júlia Ohara
🐛 📖
Micael Rodrigues
🐛 📖
Marina Souza
💻
Luan Lorenzo
💻 📖
Tomás Keong
💻
Leonardo Luiz
💻 📖
Marcos Creuz Filho
💻
Jonas
📖 💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!