Add frontend checks and guide #447

GabriFila · 2021-04-25T20:59:26Z

Description

This PR includes the necessary checks and automation to ensure proper lifting and formatting of the code:

prettier
ESLint
husky to run checks before local commit
github action to perform check

And adds general guidelines for newcomers

kingmakerbot · 2021-04-25T20:59:39Z

Hi @GabriFila. Thanks for your PR.

I am @kingmakerbot.
You can interact with me issuing a slash command in the first line of a comment.
Currently, I understand the following commands:

/rebase: Rebase this PR onto the master branch
/merge: Merge this PR into the master branch
/hold: Adds hold label to prevent merging with /merge
/unhold: Removes the hold label to allow merging with /merge
/deploy-staging: Deploy a staging environment to test this PR
/undeploy-staging: Manually undeploy the staging environment

Make sure this PR appears in the CrownLabs changelog, adding one of the following labels:

kind/breaking: 💥 Breaking Change
kind/feature: 🚀 New Feature
kind/bug: 🐛 Bug Fix
kind/cleanup: 🧹 Code Refactoring
kind/docs: 📝 Documentation

GabriFila · 2021-04-26T09:29:53Z

/deploy-staging

GabriFila · 2021-04-26T14:04:44Z

/deploy-staging

GabriFila · 2021-04-26T15:35:44Z

/deploy-staging

kingmakerbot · 2021-04-26T15:39:58Z

Your staging environment has been correctly deployed/updated!

Current dashboard: check it out at https://447.staging.crownlabs.polito.it
New frontend: check it out at https://447.staging.crownlabs.polito.it/app
Frontend storybook: check it out at https://storybook.447.staging.crownlabs.polito.it
Operators: add the 'crownlabs.polito.it/operator-selector=staging-447' label to your tenant

giorio94

/lgtm Thanks @GabriFila

frontend/.husky/pre-commit

.github/workflows/lint.yml

frontend/src/includeTailwind.css

frontend/README.md

giorio94 · 2021-04-26T17:14:14Z

frontend/README.md

+
+The components are in `src/components`. The folder has subdirs, one for each page of the app, plus `misc` for the miscellaneous UI elements (those common between all components) and a `util` dir for custom UI elements used multiple times across the code (custom dialogs, inputs, etc...).
+
+Each component needs to have its own folder with the following structure, e.g. for an `Exmaple` component:


Suggested change

Each component needs to have its own folder with the following structure, e.g. for an `Exmaple` component:

Each component needs to have its own folder with the following structure, e.g. for an `Example` component:

giorio94 · 2021-04-26T17:14:58Z

frontend/README.md

+
+### File structure
+
+Refer to the [Example component] for a demo


I suppose this should be a link

giorio94 · 2021-04-26T17:15:16Z

frontend/README.md

+
+#### Component
+
+Each component file needs to host a single components and needs to have the following structure:


Suggested change

Each component file needs to host a single components and needs to have the following structure:

Each component file needs to host a single component and needs to have the following structure:

giorio94 · 2021-04-26T17:15:56Z

frontend/README.md

+- import declarations (
+  When you can use non-default imports use them to reduce bundle size)
+- general constant declarations for the components(if needed)


Suggested change

- import declarations (

When you can use non-default imports use them to reduce bundle size)

- general constant declarations for the components(if needed)

- import declarations (when you can use non-default imports use them to reduce bundle size)

- general constant declarations for the components (if needed)

frontend/README.md

QcFe · 2021-04-27T07:19:35Z

The package-lock.json file isn't tracked. It's usually a good thing to include it into the repository in order to ensure dependencies don't break during builds (if I got it right)

GabriFila · 2021-04-27T07:27:14Z

The package-lock.json file isn't tracked. It's usually a good thing to include it into the repository in order to ensure dependencies don't break during builds (if I got it right)

Yes we can add it, I do it now

giorio94 · 2021-04-27T07:32:01Z

frontend/README.md

+
+## Structure
+
+Our frontend is a [React](https://it.reactjs.org/) application. We use [antd](https://ant.design/) as the main component library and [Tailwind](https://tailwindcss.com/) utilities to handle specific css scenarios (padding and margin). We also use [Storybook](https://storybook.js.org/) to ease teamwork. We chose to use [Typescript](https://www.typescriptlang.org/) to have a bettere development experience.


Suggested change

Our frontend is a [React](https://it.reactjs.org/) application. We use [antd](https://ant.design/) as the main component library and [Tailwind](https://tailwindcss.com/) utilities to handle specific css scenarios (padding and margin). We also use [Storybook](https://storybook.js.org/) to ease teamwork. We chose to use [Typescript](https://www.typescriptlang.org/) to have a bettere development experience.

Our frontend is a [React](https://it.reactjs.org/) application. We use [antd](https://ant.design/) as the main component library and [Tailwind](https://tailwindcss.com/) utilities to handle specific css scenarios (padding and margin). We also use [Storybook](https://storybook.js.org/) to ease teamwork. We chose to use [Typescript](https://www.typescriptlang.org/) to have a better development experience.

GabriFila · 2021-04-27T08:37:17Z

/merge

kingmakerbot · 2021-04-27T08:39:47Z

Your staging environment has been correctly teared-down!

pull-request-size bot added the size/M label Apr 25, 2021

kingmakerbot added sig/devops sig/ui labels Apr 25, 2021

GabriFila force-pushed the gbf/add_frontend_lint branch from aa07b8a to 433b71e Compare April 25, 2021 21:08

pull-request-size bot added size/L and removed size/M labels Apr 26, 2021

GabriFila force-pushed the gbf/add_frontend_lint branch from e606922 to 55ab3a2 Compare April 26, 2021 13:04

GabriFila force-pushed the gbf/add_frontend_lint branch from 55ab3a2 to 2e139fd Compare April 26, 2021 15:29

GabriFila force-pushed the gbf/add_frontend_lint branch from 2e139fd to a84f0f2 Compare April 26, 2021 16:52

GabriFila requested review from giorio94, a team and QcFe April 26, 2021 17:05

giorio94 approved these changes Apr 26, 2021

View reviewed changes

giorio94 added kind/docs Improvements or additions to documentation kind/feature New feature or request and removed kind/feature New feature or request labels Apr 26, 2021

GabriFila marked this pull request as ready for review April 26, 2021 17:20

GabriFila force-pushed the gbf/add_frontend_lint branch 7 times, most recently from 9128cf1 to 84ea9ac Compare April 27, 2021 07:10

giorio94 reviewed Apr 27, 2021

View reviewed changes

Finished frontend boilerplate and added coding guidelines

910b744

GabriFila force-pushed the gbf/add_frontend_lint branch from 84ea9ac to 910b744 Compare April 27, 2021 08:16

QcFe approved these changes Apr 27, 2021

View reviewed changes

kingmakerbot added the merge-requested label Apr 27, 2021

kingmakerbot merged commit c0f4ed0 into master Apr 27, 2021

kingmakerbot deleted the gbf/add_frontend_lint branch April 27, 2021 08:37

kingmakerbot removed the merge-requested label Apr 27, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add frontend checks and guide #447

Add frontend checks and guide #447

GabriFila commented Apr 25, 2021 •

edited

Loading

kingmakerbot commented Apr 25, 2021

GabriFila commented Apr 26, 2021

GabriFila commented Apr 26, 2021

GabriFila commented Apr 26, 2021

kingmakerbot commented Apr 26, 2021

giorio94 left a comment

giorio94 Apr 26, 2021

giorio94 Apr 26, 2021

giorio94 Apr 26, 2021

giorio94 Apr 26, 2021

QcFe commented Apr 27, 2021

GabriFila commented Apr 27, 2021

giorio94 Apr 27, 2021

GabriFila commented Apr 27, 2021

kingmakerbot commented Apr 27, 2021


		The components are in `src/components`. The folder has subdirs, one for each page of the app, plus `misc` for the miscellaneous UI elements (those common between all components) and a `util` dir for custom UI elements used multiple times across the code (custom dialogs, inputs, etc...).

		Each component needs to have its own folder with the following structure, e.g. for an `Exmaple` component:


		### File structure

		Refer to the [Example component] for a demo


		#### Component

		Each component file needs to host a single components and needs to have the following structure:


		## Structure

		Our frontend is a [React](https://it.reactjs.org/) application. We use [antd](https://ant.design/) as the main component library and [Tailwind](https://tailwindcss.com/) utilities to handle specific css scenarios (padding and margin). We also use [Storybook](https://storybook.js.org/) to ease teamwork. We chose to use [Typescript](https://www.typescriptlang.org/) to have a bettere development experience.

Add frontend checks and guide #447

Add frontend checks and guide #447

Conversation

GabriFila commented Apr 25, 2021 • edited Loading

Description

kingmakerbot commented Apr 25, 2021

GabriFila commented Apr 26, 2021

GabriFila commented Apr 26, 2021

GabriFila commented Apr 26, 2021

kingmakerbot commented Apr 26, 2021

giorio94 left a comment

Choose a reason for hiding this comment

giorio94 Apr 26, 2021

Choose a reason for hiding this comment

giorio94 Apr 26, 2021

Choose a reason for hiding this comment

giorio94 Apr 26, 2021

Choose a reason for hiding this comment

giorio94 Apr 26, 2021

Choose a reason for hiding this comment

QcFe commented Apr 27, 2021

GabriFila commented Apr 27, 2021

giorio94 Apr 27, 2021

Choose a reason for hiding this comment

GabriFila commented Apr 27, 2021

kingmakerbot commented Apr 27, 2021

GabriFila commented Apr 25, 2021 •

edited

Loading