-
Notifications
You must be signed in to change notification settings - Fork 42
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Finished frontend boilerplate and added coding guidelines
- Loading branch information
Showing
25 changed files
with
320 additions
and
37 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -23,4 +23,5 @@ yarn-debug.log* | |
| yarn-error.log* | ||
|
|
||
| storybook-static | ||
| yarn.lock | ||
| yarn.lock | ||
| .env | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| _ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| #!/bin/sh | ||
| # shellcheck disable=SC1090 | ||
| . "$(dirname "$0")/_/husky.sh" | ||
|
|
||
| yarn --cwd=frontend pre-commit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,47 @@ | ||
| const path = require('path'); | ||
|
|
||
| module.exports = { | ||
| stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], | ||
| addons: [ | ||
| '@storybook/addon-links', | ||
| '@storybook/addon-essentials', | ||
| '@storybook/preset-create-react-app' | ||
| ] | ||
| { | ||
| // allows to theme antd in the storybook | ||
| name: '@storybook/preset-ant-design', | ||
| options: { | ||
| lessOptions: { | ||
| modifyVars: { | ||
| '@primary-color': '#1c7afd', | ||
| '@secondary-color': '#FF7C11', | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| { | ||
| // allows to use less in the storybook in create-react-app (required for antd theming) | ||
| name: '@storybook/preset-create-react-app', | ||
| options: { | ||
| craOverrides: { | ||
| fileLoaderExcludes: ['less'], | ||
| }, | ||
| }, | ||
| }, | ||
| ], | ||
| // allows to use tailwind utilities in the storybook | ||
| webpackFinal: async config => { | ||
| config.module.rules.push({ | ||
| test: /\.css$/, | ||
| use: [ | ||
| { | ||
| loader: 'postcss-loader', | ||
| options: { | ||
| ident: 'postcss', | ||
| plugins: [require('tailwindcss'), require('autoprefixer')], | ||
| }, | ||
| }, | ||
| ], | ||
| include: path.resolve(__dirname, '../'), | ||
| }); | ||
| return config; | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,12 @@ | ||
| // include tailwind classes in the storybook | ||
| import '../src/includeTailwind.css'; | ||
|
|
||
| export const parameters = { | ||
| actions: { argTypesRegex: '^on[A-Z].*' }, | ||
| controls: { | ||
| matchers: { | ||
| color: /(background|color)$/i, | ||
| date: /Date$/ | ||
| } | ||
| } | ||
| date: /Date$/, | ||
| }, | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| # CrownLabs frontend | ||
|
|
||
| This file describes the structure and general coding guidelines of the CrownLabs frontend. | ||
|
|
||
| ## Setup | ||
|
|
||
| Before starting set the necessary environment variables either using a `.env` file (preferred on windows) or by defining them on your local machine. To setup the repo, use the following commands ([yarn](https://yarnpkg.com/cli/install) use is mandatory). | ||
|
|
||
| ```bash | ||
| # If you don't have yarn installed | ||
| npm install -g yarn | ||
|
|
||
| # install necessary packages | ||
| yarn install | ||
|
|
||
| # To run the app locally | ||
| yarn start | ||
|
|
||
| # To run the storybook locally | ||
| yarn storybook | ||
|
|
||
| # To build the app locally | ||
| yarn build-app | ||
|
|
||
| # To build the storybook locally | ||
| yarn build-storybook | ||
| ``` | ||
|
|
||
| After the setup is complete, if you start the app locally and see the apiserver url on the home page everything is working fine. | ||
|
|
||
| ## 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. | ||
|
|
||
| The application is made to be deployed using docker and can be hosted on a custom subroute. The application takes some environment variables, each needs to have the `REACT_APP_CROWNLABS` prefix. In order to define environment variables at container run-time they need to be defined on the `window` object in the `public/config.js` file. | ||
|
|
||
| ## CI checks | ||
|
|
||
| We use ESLint to enforce linting and code quality. We use Prettier to have a uniform code style. These checks are enforced by a GitHub Action run on PRs. Also locally a pre-commit hook written with [husky](https://typicode.github.io/husky/#/) uses [lint-staged](https://github.com/okonet/lint-staged) to format and check files in the staging area before each commit. | ||
|
|
||
| ## Guidelines | ||
|
|
||
| We define some coding guidelines to ease the collaboration in our team and to ease the review process. | ||
|
|
||
| ### Dir structure | ||
|
|
||
| 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 `Example` component: | ||
|
|
||
| - `Example.tsx` - component definition | ||
| - `Example.stories.ts` - storybook stories to show component usage | ||
| - `Exmaple.css` - css specific code for component | ||
| - `index.ts` - utility file to shorten component import statement in other files | ||
|
|
||
| ### File structure | ||
|
|
||
| Refer to the [Example component](./src/components/Example/) for a demo | ||
|
|
||
| #### Component | ||
|
|
||
| Each component file needs to host a single component and needs to have the following structure: | ||
|
|
||
| - import declarations (when you can use non-default imports use them to reduce bundle size) | ||
| - general constant declarations for the components (if needed) | ||
| - component props interface with the name `${ComponentName}Props` (if needed) | ||
| - functional component declaration | ||
|
|
||
| #### Storybook | ||
|
|
||
| Each storybook file needs to have the following structure: | ||
|
|
||
| - import declarations | ||
| - default export containing necessary story info (title, component, argTypes,...) | ||
| - default component args declaration (use `someKeysOf` type function) | ||
| - template declaration | ||
| - component stories | ||
|
|
||
| ## Useful links | ||
|
|
||
| - [Useful answer for deploying react app on subroute](https://stackoverflow.com/a/58508562/11143279) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| const CracoLessPlugin = require('craco-less'); | ||
|
|
||
| module.exports = { | ||
| style: { | ||
| postcss: { | ||
| plugins: [require('tailwindcss'), require('autoprefixer')], | ||
| }, | ||
| }, | ||
| plugins: [ | ||
| { | ||
| plugin: CracoLessPlugin, | ||
| options: { | ||
| lessLoaderOptions: { | ||
| lessOptions: { | ||
| modifyVars: { | ||
| '@primary-color': '#1c7afd', | ||
| '@secondary-color': '#FF7C11', | ||
| }, | ||
| javascriptEnabled: true, | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| ], | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| .rainbow-text { | ||
| -webkit-background-clip: text; | ||
| background-clip: text; | ||
| -webkit-text-fill-color: transparent; | ||
| background-image: linear-gradient( | ||
| to left, | ||
| violet, | ||
| indigo, | ||
| blue, | ||
| green, | ||
| yellow, | ||
| orange, | ||
| red | ||
| ); | ||
| } |
Oops, something went wrong.