Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/juntossomosmais/venice
[outdated] Design System of @juntossomosmais
https://github.com/juntossomosmais/venice
css-modules design-system hacktoberfest lerna monorepo react typescript vue
Last synced: 9 days ago
JSON representation
[outdated] Design System of @juntossomosmais
- Host: GitHub
- URL: https://github.com/juntossomosmais/venice
- Owner: juntossomosmais
- License: apache-2.0
- Created: 2020-02-28T22:59:55.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-07-11T19:22:59.000Z (over 1 year ago)
- Last Synced: 2025-01-17T08:08:01.653Z (18 days ago)
- Topics: css-modules, design-system, hacktoberfest, lerna, monorepo, react, typescript, vue
- Language: TypeScript
- Homepage:
- Size: 26 MB
- Stars: 148
- Watchers: 60
- Forks: 21
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
React Version | Vue Version
> Design System of @juntossomosmais
Venice is a Design System built with React and Vue.
It's using a CSS Variables to make easy to share variables across the projects, regardless of whether project are using Sass, Styled Components, Stylus, Emotion or whatever.
!important, as it's an internal design system, we don't accept suggestions to change or add new components.
## Stack
This project uses Lerna, Yarn Workspaces, TypeScript, Storybook, Sass, CSS Modules, React and Vue.
Maybe you want to read about them:
- [Lerna](https://lerna.js.org/)
- [Yarn Workspaces](https://classic.yarnpkg.com/en/docs/workspaces/)
- [TypeScript](https://www.typescriptlang.org/)
- [Storybook](https://storybook.js.org/)
- [Sass](https://sass-lang.com/)
- [CSS Modules](https://github.com/css-modules/css-modules)
- [React](https://reactjs.org/)
- [Vue](https://vuejs.org/)
This project also uses [Husky](https://github.com/typicode/husky) to prevent commit and push messy and wrong code.
You also can check our [frontend-guideline](https://github.com/juntossomosmais/frontend-guideline) with some Front-end patterns that we use on our projects 😁
## Usage
### React
```jsx
import styles from '@venice/styles/components/Button.module.scss';
Hello
```
### Vue
```vue
import { IButton } from '@juntossomosmais/venice-types'
@import '~@venice/styles/components/Button.module.scss';
Hello
```
## Commands
#### Install
```sh
yarn install
```
#### Usage
```sh
yarn start
```
#### Build library
```sh
yarn build
```
#### Publish library
```sh
yarn publish
```
#### Deploy Storybook on GH Pages
```sh
yarn deploy:storybook
```
#### Run tests
```sh
yarn test
```
## Overview
This project has the following folders:
#### `packages/core`
It contains internal configs of Venice. If you need to share something between project, it needs to stay here.
#### `packages/venice-icons`
It contains all the icons used in Venice. Venice uses [fontello](http://fontello.com/) to generate the `config.json` file with icons.
#### `packages/venice-types`
It contains types and interfaces used across Venice. Types related to an specific property of Vue/React should go to their package.
#### `packages/styles`
That contains shareable styles of components. The CSS of components always need to stay here, using Sass. So, you can import the file inside your component in each DS.
#### `packages/react-ds`
The UI Components using React.
All logical of React components, Storybook's presentation and build configs need to stay here.
#### `packages/vue-ds`
The UI Components using Vue.
All logical of Vue components, Storybook's presentation and build configs need to stay here.
## Author
👤 **@juntossomosmais**
- Website: https://www.juntossomosmais.com.br
- Github: [@juntossomosmais](https://github.com/juntossomosmais)
- LinkedIn: [@juntos-somos-mais](https://linkedin.com/company/juntos-somos-mais/)
- Medium: https://medium.com/juntos-somos-mais
## 🤝 Contributing
Contributions, issues and feature requests are welcome!
Feel free to check [issues page](https://github.com/juntossomosmais/venice/issues).
## 📝 License
Copyright © 2020 [@juntossomosmais](https://github.com/juntossomosmais)
---
_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_