Coding style

[KoukiHama]

The project is getting bigger.
Let's discuss rules about Coding Style.

Related Info :
Coding style in sw360 website

[heliocastro]

Ok, pushing the points, let's separate on:

• What we have today
• What we need to define
• What we need to move soon ( or urgent ? )

Good reference to start: Typescripting lang

What we have today

• We do have ESLINT based typescript check. I will enforce to second level. We can see here. This will prevent the most logic errors and misused parts.
  The extended rules still are not able to be turned on because will generate tons of errors, fixing is in progress.
• We have prettier that do the formatting of the code. Today is possible using the vscode project or run by hand. It is 4 tabs and code indentation.
  Can be run with npx prettier <source>

What de we need to define

• Typescript Guidelines: There's no official guidelines for typescript, available possibilities are:
  • Google TypeScript Style Guide
  • TypeScript Style guide
• Styling: We need to choose which of the models presented here in Next.js Styling. We already have two in our code, modules ,and in-js, which is already confusing, but i honestly expect someone will want to introduce sass, so we need decide ok or not for the types to avoid more complications.
• Components: We need to start to use components on folder base instead single file and/or inline code.

What we need to move soon

• Move to app router based: Next.js got one of the best ideas of Svelte and sart to move to App based routing. Meaning, this will make more clear separation of where is the pages, routing, etc. Is not a small move but need to be done now or future migrations will be painfull. Is a future proof change
• Create the global CSS instead of spread multiple css files like it is right now.

[hoangnt2]

• Move to app router based: Next.js got one of the best ideas of Svelte and sart to move to App based routing. Meaning, this will make more clear separation of where is the pages, routing, etc. Is not a small move but need to be done now or future migrations will be painfull. Is a future proof change

This is a good idea. We need to move to use App directory soon.
But the next-i18next (multiple language library) which I used in #26 seem not work on App directory (we need customize to work on it https://locize.com/blog/next-13-app-dir-i18n/).

After hours of searching. I found new library https://next-intl-docs.vercel.app/docs/getting-started, which will support the new App directory. I'm migrating from Pages to App directory with new library and I will create a new PR for it soon.

[heliocastro]

Add function comment requirement

We need to enforce that ALL code functions need to be documented.
Suggestions to folow TSDOC

[heliocastro]

Interesting best practices to discuss tomorrow:
Part 1: Naming Conventions - The Foundation of Clean Code
Part 2: Folder Structure - Building a Solid Foundation
Part 3: Component Structure - Building Reusable and Maintainable Components in React!

[heliocastro]

@amritkv @hoangnt2
Just updated the projects page to initially get new layout and use gridjs. Still not added the widgets on the table, but functionality of get is done.
Suggestion to give a view on the AdvancedSearch component. Is build on the fly and reduce a lot the code on the page.
We need add on discussion about the components location. I think instead of doing like i’m doing now SW360Table, SW360AdvancedSearch, we could use an extra namespace like sw360/AdvancedSearch sw360/Table.