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.
This project uses Lerna, Yarn Workspaces, TypeScript, Storybook, Sass, CSS Modules, React and Vue.
Maybe you want to read about them:
This project also uses Husky to prevent commit and push messy and wrong code.
You also can check our frontend-guideline with some Front-end patterns that we use on our projects 😁
import styles from '@venice/styles/components/Button.module.scss';
<button className={styles.button}>
Hello
</button>
<script lang="ts">
import { IButton } from '@juntossomosmais/venice-types'
</script>
<style lang="scss" scoped>
@import '~@venice/styles/components/Button.module.scss';
</style>
<template>
<button :class="button">
Hello
</button>
</template>
yarn install
yarn start
yarn build
yarn publish
yarn deploy:storybook
yarn test
This project has the following folders:
It contains internal configs of Venice. If you need to share something between project, it needs to stay here.
It contains all the icons used in Venice. Venice uses fontello to generate the config.json
file with icons.
It contains types and interfaces used across Venice. Types related to an specific property of Vue/React should go to their package.
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.
The UI Components using React.
All logical of React components, Storybook's presentation and build configs need to stay here.
The UI Components using Vue.
All logical of Vue components, Storybook's presentation and build configs need to stay here.
👤 @juntossomosmais
- Website: https://www.juntossomosmais.com.br
- Github: @juntossomosmais
- LinkedIn: @juntos-somos-mais
- Medium: https://medium.com/juntos-somos-mais
Contributions, issues and feature requests are welcome!
Feel free to check issues page.
Copyright © 2020 @juntossomosmais
This README was generated with ❤️ by readme-md-generator