Page and component structure

jobiqo-component.md

Summary

This document explains a generic approach to component structures in jobiqo-decoupled.

Naming pattern

Every component should use PascalCase naming in the folder (which is also required in react for components) like ResumeCompleteness but pages use a kebab-case like job-apply this is because folders map to URL's and so makes it cleaner and simpler to have proper urls like this in nextjs

Overridability

One thing that is important to consider is what parts of components we want to optimize for "overriding", and that is probably the rendering part and not so much the data fetching logic (and maybe even error and loading handling)

So for this I think a good way for us to go about it would be to inside lets say a ResumeFolderTesting component have the following folders:

• graphql : Includes any queries, mutations and fragments used for this component
• view : Which would include a ResumeFolderTestingView component which receives already the "processed" props (e.g. resume: Resume or also maybe errors if there were any). This would be tipically the compponent people might be overriding on client projects but this way all the data fetching and error handling is already being done
• components : Ofc most components might have subcomponents and its fine that they are included as well, they should tipically just follow the same pattern (e.g. a graphql folder with specific queries for that subcomponent).
• utils : If any utilities are needed (maybe some function that for example gets a logo from the job or company depending if there is a logo on the company) can be added here. Basically just helpers
• tests : Any unit testing that is needed for a component

This folder structure works particularly well with the visual studio code extension https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme which makes it very clear when looking at a component what is happening (see attachments)

The View part I think its mostly to separate the "overridable" part from the data fetching.

Importing

its important to import { Component } from '~/jobiqo/components' because this will ensure our overrides folder works as expected.

On mac you can use you [apple]+left click on a component or left click and then go to definition or apperenlty also only F12.

On mac you can also open up the command line and enter @ComponentName:

Yep, navigating to a component by using CTRL + Click is working on Linux too.
Nice your second tip is great! I can work with that 👍 (I have bound my CTRL + P now to "Go to symbol in workspace").
If you are using #ComponentName it will search the whole workspace instead of just the file.