akash-m / consent-application-react Goto Github PK

View Code? Open in Web Editor NEW

1.0 2.0 0.0 243.33 MB

React app to add and list consents.

License: MIT License

JavaScript 11.32% TypeScript 74.86% SCSS 11.20% Shell 0.46% HTML 1.28% Dockerfile 0.87%

react typescript jest redux-thunk react-testing-library webpack5 yarn3

consent-application-react's Introduction

Consent App (React)

React app to collect consents based on https://github.com/didomi/challenges/tree/master/frontend

Pipeline status:

Live Demo

Prerequisites

Package Manager

This repo is based on Yarn3. Ensure that you have a global installation of Yarn3. Note: The project uses pnp to ensure faster installation of application dependencies in a monorepo setup.

You can test if yarn is installed correctly by using:

yarn --version

Step 1: Install dependencies:

yarn

Step 2: Start the frontend app:

Start ui-consents app

yarn start:frontend

Step 3(Optional): Starting `ui-consents` using Docker

Ensure that docker is running on your machine. Then, run the following script:

yarn start:docker

Once the docker container is built, ui-consents app can be accessed on 0.0.0.0:8080/ or 127.0.0.1:8080/.

NOTE: If you need to run scripts for individual packages you can use the following commands:

For ui-consents package:

yarn workspace ui-consents start:dev --> to start the frontend app
yarn workspace ui-consents test:unit --> to run the tests
yarn workspace ui-consents lint --> to run the all the linters(eslint, prettier, stylelint)
yarn workspace ui-consents build --> to generate the distributions

For lib-components package:

yarn workspace lib-components start:dev --> to start storybook and render the custom components
yarn workspace lib-components lint --> to run the all the linters(eslint, prettier, stylelint)
yarn workspace lib-components build --> to generate the distributions for storybook

For lib-api package:

yarn workspace lib-api lint --> to run all the linters(eslint, prettier)
yarn workspace lib-api test:unit --> to run the tests

For lib-utils package:

yarn workspace lib-utils lint --> to run all the linters(eslint, prettier)

Further documentation:

Please find the documentation specific to the apps inside the app ReadMe linked in the following section: lib-api lib-components lib-utils ui-consents

Workspace Structure

This application follows a monorepo approach. The following sections explains the folder structure:

./.github/: PR templates and Github Action definitions.
./.yarn/: Dependencies installed from yarn2.
./packages/: TypeScript applications defined as independent modules.
- frontend/: Folder containing the frontend application and related code.
  - lib-api: Library of global api calls. Consists of mocked api calls for sake of demo.
  - lib-components: Library of global generic components independent of application specific logic.
  - lib-utils: Library of global utility files.
  - types: Global type definitions for frontend folder.
  - ui-consents: The Consents client app which is the final deliverable.
./
- .eslintrc.js: The global ESLint rules.
- .gitignore: File and folder globs to be ignored by git.
- .yarnrc.yml: Config file for yarn3.
- package.json: The node package definition, with packages links and scripts.
- yarn.lock: Auto generated lock file from yarn.
- jest.*.js: Global jest config for testing.
- .prettier: Config containing prettier files.
- .pnp.*: Autogenerated files containing dependency instructions for yarn3 plug and play.
- .yarnrc.yml: File to specify the dependency tree explicitly. Only required for specific packages.
- .tsconfig.*: Global typescript configuration.
- webpack.*: Global webpack configuration.

Application Architecture:

Future Improvements:

Filter for @mui DataGrid is not responsive due to open issue in the library: mui/mui-x#883

consent-application-react's People

Contributors

Stargazers

Watchers

consent-application-react's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Warning

These dependencies are deprecated:

Datasource	Name	Replacement PR?
npm	`@babel/plugin-proposal-class-properties`
npm	`@babel/plugin-proposal-private-methods`
npm	`@babel/plugin-proposal-private-property-in-object`
npm	`@material-ui/core`
npm	`@types/mini-css-extract-plugin`
npm	`@types/redux`
npm	`@types/redux-thunk`
npm	`@types/webpack-dev-server`
npm	`eslint-plugin-node`
npm	`i18next-xhr-backend`
npm	`node-sass`

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

docker-compose

docker-compose.yaml

dockerfile

packages/frontend/Dockerfile

node 14.17.6

github-actions

.github/workflows/lib-api.yaml

actions/checkout v1

.github/workflows/lib-components.yaml

actions/checkout v1

.github/workflows/lib-utils.yaml

actions/checkout v1

.github/workflows/ui-consents.yaml

actions/checkout v1

npm

.yarn/sdks/eslint/package.json

.yarn/sdks/prettier/package.json

.yarn/sdks/typescript/package.json

package.json

@commitlint/cli ^12.1.4

@commitlint/config-conventional ^12.1.4

@commitlint/lint ^12.1.4

@typescript-eslint/eslint-plugin ^4.29.3

@typescript-eslint/parser ^4.29.3

concurrently ^6.3.0

danger ^10.6.6

danger-plugin-conventional-commitlint ^1.0.4

danger-plugin-kirinus ^1.1.0

eslint ^7.32.0

eslint-config-kirinus ^1.0.5

eslint-import-resolver-node ^0.3.6

eslint-import-resolver-typescript ^2.4.0

eslint-plugin-eslint-comments ^3.2.0

eslint-plugin-import ^2.24.2

eslint-plugin-jest ^24.5.2

eslint-plugin-jsx-a11y ^6.4.1

eslint-plugin-node ^11.1.0

eslint-plugin-ordered-imports ^0.5.0

eslint-plugin-promise ^5.1.0

eslint-plugin-react ^7.26.1

eslint-plugin-react-hooks ^4.2.0

eslint-plugin-unicorn ^35.0.0

husky ^7.0.2

jest ^27.0.6

jest-environment-node ^27.0.6

lint-staged ^11.1.2

markdownlint-cli ^0.28.1

prettier ^2.3.2

pretty-quick ^3.1.1

ts-jest ^27.0.5

ts-node ^10.2.1

tsconfig-paths ^3.10.1

typedoc ^0.21.9

typescript ^4.3.5

@types/jest ^26.0.24

yarn 3.0.0

packages/frontend/lib-api/package.json

typescript ^4.3.5

@babel/core ^7.15.8

@babel/plugin-proposal-class-properties ^7.14.5

@babel/plugin-transform-runtime ^7.15.8

@babel/preset-env ^7.15.8

@babel/preset-react ^7.14.5

@babel/preset-typescript ^7.15.0

@babel/runtime ^7.15.4

@types/jest ^26.0.24

@types/node ^14.17.19

@types/uuid ^8.3.3

@typescript-eslint/eslint-plugin ^4.29.3

@typescript-eslint/parser ^4.29.3

eslint ^7.32.0

eslint-config-prettier ^7.2.0

eslint-plugin-flowtype ^5.10.0

eslint-plugin-jest ^24.5.2

eslint-plugin-jsx-a11y ^6.4.1

eslint-plugin-prettier ^3.4.1

jest ^27.0.6

prettier ^2.3.2

uuid ^8.3.2

node >=v14.17.6

packages/frontend/lib-components/package.json

@emotion/react ^11.6.0

@emotion/styled ^11.6.0

@material-ui/core ^4.12.3

@mui/icons-material ^5.2.0

@mui/material ^5.1.1

react-docgen-typescript ^2.1.1

@babel/core ^7.15.8

@babel/plugin-proposal-class-properties ^7.14.5

@babel/plugin-proposal-private-methods ^7.14.5

@babel/plugin-proposal-private-property-in-object ^7.15.4

@babel/plugin-transform-runtime ^7.15.8

@babel/preset-env ^7.15.8

@babel/preset-react ^7.14.5

@babel/preset-typescript ^7.15.0

@babel/runtime ^7.15.4

@mdx-js/react ^1.6.22

@storybook/addon-actions ^6.3.12

@storybook/addon-docs ^6.3.12

@storybook/addon-essentials ^6.3.12

@storybook/addon-links ^6.3.12

@storybook/addon-viewport ^6.3.12

@storybook/builder-webpack5 ^6.3.12

@storybook/manager-webpack5 ^6.3.12

@storybook/react ^6.3.12

@types/material-ui ^0.21.12

@types/mini-css-extract-plugin ^2.0.1

@types/node ^14.17.19

@types/react ^17.0.30

@types/react-dom ^17.0.7

@types/react-router ^5.1.17

@types/react-router-dom ^5.1.9

@types/webpack ^5.28.0

@types/webpack-dev-server ^4.3.1

@typescript-eslint/eslint-plugin ^4.29.3

@typescript-eslint/parser ^4.29.3

babel-loader ^8.2.2

copy-webpack-plugin ^9.0.1

css-loader ^5.2.7

eslint ^7.32.0

eslint-config-prettier ^7.2.0

eslint-config-react-app ^6.0.0

eslint-plugin-flowtype ^5.10.0

eslint-plugin-import ^2.24.2

eslint-plugin-jest ^24.5.2

eslint-plugin-jsx-a11y ^6.4.1

eslint-plugin-prettier ^3.4.1

eslint-plugin-react ^7.26.1

eslint-plugin-react-hooks ^4.2.0

eslint-plugin-testing-library ^4.12.4

fork-ts-checker-webpack-plugin ^6.3.4

html-webpack-plugin ^5.3.2

mini-css-extract-plugin ^2.1.0

postcss-loader ^6.1.1

prettier ^2.3.2

raw-loader ^4.0.2

react ^17.0.2

react-dom ^17.0.2

react-hook-form ^7.15.3

react-hot-loader ^4.13.0

react-router ^5.2.1

react-router-dom ^5.3.0

resolve-url-loader ^4.0.0

sass ^1.42.1

sass-loader ^11.1.1

source-map-explorer ^2.5.2

style-loader ^2.0.0

stylelint ^13.13.1

stylelint-config-prettier ^8.0.2

stylelint-config-rational-order ^0.1.2

stylelint-config-standard ^22.0.0

stylelint-order ^4.1.0

stylelint-scss ^3.21.0

svg-inline-loader ^0.8.2

ts-jest ^27.0.5

ts-loader ^9.2.5

ts-node ^10.2.1

tsconfig-paths-webpack-plugin ^3.5.1

typescript ^4.3.5

webpack ^5.64.0

webpack-cli ^4.9.1

webpack-dev-server ^4.4.0

@emotion/react *

@emotion/styled *

@mui/icons-material *

@mui/material *

@types/material-ui *

history *

react *

react-dom *

react-hook-form *

react-router *

react-router-dom *

typescript *

node >=v14.17.6

packages/frontend/lib-utils/package.json

@babel/core ^7.15.8

@babel/plugin-proposal-class-properties ^7.14.5

@babel/plugin-transform-runtime ^7.15.8

@babel/preset-env ^7.15.8

@babel/preset-react ^7.14.5

@babel/preset-typescript ^7.15.0

@babel/runtime ^7.15.4

@testing-library/react ^12.1.1

@types/jest ^26.0.24

@types/node ^14.17.19

@types/react ^17.0.30

@types/react-dom ^17.0.7

@types/react-redux ^7.1.20

@types/react-router-dom ^5.1.9

@types/redux ^3.6.0

@typescript-eslint/eslint-plugin ^4.29.3

@typescript-eslint/parser ^4.29.3

eslint ^7.32.0

eslint-config-prettier ^7.2.0

eslint-config-react-app ^6.0.0

eslint-plugin-flowtype ^5.10.0

eslint-plugin-import ^2.24.2

eslint-plugin-jest ^24.5.2

eslint-plugin-jsx-a11y ^6.4.1

eslint-plugin-prettier ^3.4.1

eslint-plugin-react ^7.26.1

eslint-plugin-react-hooks ^4.2.0

eslint-plugin-testing-library ^4.12.4

i18next ^20.4.0

i18next-browser-languagedetector ^6.1.2

i18next-chained-backend ^3.0.2

i18next-localstorage-backend ^3.1.3

i18next-xhr-backend ^3.2.2

jest ^27.0.6

jsdom ^16.7.0

prettier ^2.3.2

react ^17.0.2

react-dom ^17.0.2

react-i18next ^11.11.4

react-redux ^7.2.6

react-router-dom ^5.3.0

redux ^4.1.2

ts-jest ^27.0.3

typescript ^4.3.5

yaml ^1.10.2

@testing-library/react *

i18next *

i18next-browser-languagedetector *

i18next-chained-backend *

i18next-localstorage-backend *

i18next-xhr-backend *

react *

react-dom *

react-i18next *

react-redux *

react-router-dom *

redux *

yaml *

node >=v14.17.6

packages/frontend/ui-consents/package.json

@emotion/react ^11.6.0

@emotion/styled ^11.6.0

@material-ui/core ^4.12.3

@mui/icons-material ^5.2.0

@mui/material ^5.1.1

@mui/x-data-grid ^5.1.0

i18next ^21.5.2

i18next-browser-languagedetector ^6.1.2

i18next-chained-backend ^3.0.2

i18next-http-backend ^1.3.1

i18next-localstorage-backend ^3.1.3

i18next-xhr-backend ^3.2.2

prop-types ^15.7.2

react ^17.0.2

react-dom ^17.0.2

react-i18next ^11.14.2

react-redux ^7.2.6

react-router ^6.0.2

react-router-dom ^6.0.2

react-toastify ^8.1.0

redux ^4.1.2

redux-thunk ^2.4.1

yaml ^1.10.2

@babel/core ^7.15.8

@babel/plugin-proposal-class-properties ^7.14.5

@babel/plugin-transform-runtime ^7.15.8

@babel/preset-env ^7.15.8

@babel/preset-react ^7.14.5

@babel/preset-typescript ^7.15.0

@babel/runtime ^7.15.4

@svgr/webpack ^5.5.0

@testing-library/dom ^7.31.2

@testing-library/jest-dom ^5.14.1

@testing-library/react ^11.2.7

@testing-library/react-hooks ^7.0.2

@testing-library/user-event ^13.1.9

@types/jest ^26.0.24

@types/js-yaml ^4.0.3

@types/material-ui ^0.21.12

@types/mini-css-extract-plugin ^2.0.1

@types/node ^14.17.19

@types/prop-types ^15.7.4

@types/react ^17.0.30

@types/react-dom ^17.0.7

@types/react-loadable ^5.5.6

@types/react-redux ^7.1.20

@types/react-router-dom ^5.1.9

@types/react-test-renderer ^17.0.1

@types/redux ^3.6.0

@types/redux-thunk ^2.1.0

@types/webpack ^5.28.0

@types/webpack-dev-server ^3.11.6

@typescript-eslint/eslint-plugin ^4.29.3

@typescript-eslint/parser ^4.29.3

babel-loader ^8.2.2

babel-plugin-istanbul ^6.1.1

copy-webpack-plugin ^9.0.1

css-loader ^6.3.0

eslint ^7.32.0

eslint-config-prettier ^8.3.0

eslint-config-react-app ^6.0.0

eslint-plugin-flowtype ^5.10.0

eslint-plugin-import ^2.24.2

eslint-plugin-jest ^24.5.2

eslint-plugin-jsx-a11y ^6.4.1

eslint-plugin-prettier ^3.4.1

eslint-plugin-react ^7.26.1

eslint-plugin-react-hooks ^4.2.0

eslint-plugin-testing-library ^4.12.4

fork-ts-checker-webpack-plugin ^6.3.4

html-webpack-plugin ^5.3.2

jest ^27.0.6

jest-fetch-mock ^3.0.3

jest-styled-components ^7.0.5

jest-transform-stub ^2.0.0

jest-watch-typeahead ^0.6.5

jsdom ^16.7.0

mini-css-extract-plugin ^2.1.0

node-sass ^7.0.0

postcss-loader ^6.1.1

prettier ^2.3.2

raw-loader ^4.0.2

react-hot-loader ^4.13.0

react-test-renderer ^17.0.2

resolve-url-loader ^4.0.0

sass-loader ^12.1.0

source-map-explorer ^2.5.2

style-loader ^3.2.1

stylelint ^13.13.1

stylelint-config-prettier ^8.0.2

stylelint-config-rational-order ^0.1.2

stylelint-config-standard ^22.0.0

stylelint-order ^4.1.0

stylelint-scss ^3.21.0

svg-inline-loader ^0.8.2

ts-jest ^27.0.3

ts-loader ^8.3.0

ts-node ^10.2.1

tsconfig-paths-webpack-plugin ^3.5.1

typescript ^4.3.5

web-vitals ^2.1.2

webpack ^5.58.2

webpack-cli ^4.9.1

webpack-dev-server ^3.11.2

node >=v14.17.6

Check this box to trigger a request for Renovate to run again on this repository

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.