/venice

🎨 Design System of @juntossomosmais

Primary LanguageTypeScriptApache License 2.0Apache-2.0

Venice Design System

Build Documentation Maintained with Lerna Venice is released under the Apache-2.0 license Contributors

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:

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 😁

Usage

React

import styles from '@venice/styles/components/Button.module.scss';

<button className={styles.button}>
  Hello
</button>

Vue

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

Commands

Install

yarn install

Usage

yarn start

Build library

yarn build

Publish library

yarn publish

Deploy Storybook on GH Pages

yarn deploy:storybook

Run tests

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

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

📝 License

Copyright © 2020 @juntossomosmais

This README was generated with ❤️ by readme-md-generator