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.
import styles from '@venice/styles/components/Button.module.scss'
;<button className={styles.button}></button><script lang="ts">
import { IButton } from '@venice/core/models'
</script>
<style lang="scss" scoped>
@import '~@venice/styles/components/Button.module.scss';
</style>
<template>
<button :class="button"></button>
</template>yarn installyarn startyarn buildyarn publishyarn deploy:storybookyarn testThis project has the following folders:
That contains shareable configs of Storybook, TypeScript interfaces and etc. If you need to share something between project, it need to stay here.
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