Content:

Other documents:

📔 Getting Started 👷🏻 In deep 💡 Create components 📣 Modify component 📂 Deploy components

<aside> ℹ️ Remember:

‘Aqua components UI’ has 8 component groups, which are:

• actions: Contains components designed to assist users in achieving specific goals
• dataVisualization: Contains components that facilitate the organized and clean display of information
• feedback: Contains components that provide valuable information, with the goal of equipping users with sufficient context
• forms: Contains components for capturing entered information and user actions
• imagensAndIcons: Contains components that serve as cross-cutting helpers
• navigation: Contains components that guide users through the UI
• overlays: Contains floating elements that offer dynamic information
• titlesAndText: this folder includes logic and templates files for components of titlesAndText group </aside>

Generalities

What is aqua playground documentation?

As a complement to the design, development, support, and documentation processes, the Aqua team has created a project where all stakeholders can test the functionality of each library and components offered by Aqua team in real time. This project was developed in Vue 2, following the Masiv frontend development guidelines and includes real-time implementations of each component encapsulated in separate files

<aside> ➡️ Do you want to see our playground documentation? visit ***https://aqua-playground.masivianlabs.com***

</aside>

Structure and components

The "playground documentation" project contains its own reusable components, views, router, global state management, helpers, mixins, etc, but in the views, which is where Aqua components are recreated, the same code structure as Aqua is maintained, with a similar scaffolding divided into groups and components as follows:

SRC

• assets:
  • scss:
    • 06_pages: This folder contains all CSS modifiers for all Aqua´s components
• components: This folders contains all reusable components for ‘playground’ project
  • commons:
    • layout: This folder contains reusable components that constitutes content of navigation bar and main view layout
    • templateBase: This folder contains reusable components that constitutes content of side bar and main view content
  • templateDoucmentation.vue: This file is main project view
• helpers: This folder contains all files with key information and auxiliary functionalities for each component.
  • charts: This folders includes information/auxiliar functionalities for all ‘Aqua charts’
  • commons: This folder contains files with cross-cutting information for various views and functionalities such as:
    • Clear extra spaces in an object or string
    • Generating lists of nested objects
    • Formatting objects with different identations and line breaks
  • components: This folders includes information/auxiliar functionalities for all ‘Aqua components UI’ by already known groups
• language: This folder includes all files with languages keys with ‘aqua-documentation’ scope with words in spanish, english and portuguese
• mixins:
  • templateDocumentation.js: This file mixin includes all props needed to show each view
• store:
  • aqua: This folder contains all files such as actions, mutations, state, etc; for managing the global status of project.
• views:
  • addons:
    • Editor.vue: This file includes the implementation of the 'editorHTML' addon to provide a space where all users can interact with this product and visualize/verify its functionalities
  • charts: This folder includes all chart offered by 'Aqua Charts', these implementations provide spaces where all users can interact with each chart, visualize/verify its functionalities and copy the code resulting from their interactions to replicate it in their products.
  • components: This folder includes all 'Aqua components UI' separated by already known groups, these implementations provide spaces where all users can interact with each component, visualize/verify their functionalities and copy code resulting from their interactions to replicate it in their products
  • icons: This folder contains components that constitutes complete view of "aq-icons" list
  • illustrations: This folder contains components that constitutes complete view of "aq-illustrations" list
  • overviews: This folder contains landing views for charts and components

Repo Location

Inside Masiv, we use Azure devops as the versioning control where all the things are upload in the ***Aqua documentation repo***

The project repository has to be allocated inside the MasivianFront azure account. The repository must be downloaded and updated from the develop branch.