Components Architectures for Projects Page

Component Architecture

Projects Page

Src>Components>

• AppBar

  1. which can receive any number of props list, log in details and title, etc
  2. Acts as a higher-order component which provides different usage to project list, sync, new project, and profile component

• Drawer

  1. Independent components which can receive a set of list of title and actions
  2. Provides multiple usages inside home page also (eg. search)

• SearchBar

  1. It can be a basic search and also capable of advanced search output as per the usage
  2. Basic search string and advance search should be can cable of searching the context or title of matched string and send that as output along with the matched.

• Autocomplete

  1. Functional component which receives props list and searches value

• MdEditor

  1. Functional components to receive MD raw file as per the usage and converts
  2. Provides editing capability with the help of markdown-translatable

• ItemList

  1. Functional Component of the list which takes a set of metadata of list from file or any storage
  2. It can be used with multiple props value for different scenarios (eg: starred and unstarred, sorting, a simple list of filenames or books inside finder, etc.)
  3. should be capable of editing and deleting the list items

• Validator

  1. It can be a hook useValidator which takes in the multiple field values and validates based on required criteria.
  2. Returns success, errors, and warnings

• CustomDialog

  1. Should receive a set of title and body props (list or can be component itself)
  2. Usage in multiple places as (custom language, custom license, custom canon specs, etc)

• Avatar

  1. Which is used to display pictures in different sizes in multiple scenarios
  2. Can accept image src path or baseUrl and dimensions props

• Login

  1. Reusable functional component with UI
  2. Should be able to receive custom styles as per the usage
  3. Can handle state (remember me) and pass to the children
  4. Can be used inside sync components and also app login

• ProjectListPane

• Profile

• NewProject

• Sync