Content:
Other documents:
📔 Getting Started 💡 Create components 📣 Modify component 📂 Deploy components 📝 Document component
Aqua is a versatile library that serves as a comprehensive collection of user interface components designed for all our company's products. With over 50 public components, this library offers a wide range of possibilities and functionalities. Its primary goal is to ensure visual consistency across all views and custom components employed by developers, ultimately leading to reduced development times and operational burdens for our development teams.
This project is built with Vue2 framework, using webpack as bundler, babel as compiler, eslint with the airbnb configuration for code correction assistance and jest as code testing base. In addition, a selection of libraries have been used to include or improve various functionalities such as icon integration, design token inclusion, use of tables, texts internationalization, development environment recognition, drag and drop options and others. For more information on this topic, see the Libraries/Dependencies section.
A component is an independent and reusable unit designed for a specific purpose. It can encompass both the visual structure and associated functionalities. Components serve as modular elements that compose the user interface of an application or website, simplifying the process of constructing and maintaining interfaces. Components are fundamental pillars of the design system and play an essential role in the visual uniformity and functional coherence of products.
In the context of "Aqua", each component follows a structured designation, which includes separate resources to manage its stylistic attributes (Styles file), the underlying logic (Logic file), reusable or external functionalities, local implementations to test use cases (Local implementation file) and code tests with minimal test cases (Testing files). This structure ensures a well-organized development process and promotes consistency and reliability throughout the process.
This file includes the template and the main functionalities and features of the component such as props, computed properties, watchers, methods, lifecycle hooks, etc; it also contains non-shared functionalities that only cover the scope of the component. In general, Vue and pure javascript functionalities and other external resources such as popper, vuedragabble, vue-calendars, vue-tables, lodash, clamp, howler, moment, numeral and others, are used in the development of the logic.
This file includes the styles and CSS modifiers necessary to meet the design requirements. These styles comply with the guidelines and remain aligned with the established by Saas reference architecture.
This/these file(s) contains all possible use cases and includes the implementation for testing the component in different environments to ensure compliance with the scope and functionality
This/these file(s) contains the minimum set of tests to ensure the testing of the code in minimal use cases for each component
This type of file may refer to certain components that provide reusable functionalities intended to assist other components. Moreover, it may refer to common or specific functionalities located outside the 'logical file' of each component but which can be used within it