inyad-design-system-k
v0.1.7
Published
You need to have a **node** version installed >= 14.x. ([https://nodejs.org/en/](https://nodejs.org/en/))
Downloads
6
Readme
Prerequisites
You need to have a node version installed >= 14.x. (https://nodejs.org/en/)
You need to have a yarn version installed >= 1.21.1 (https://yarnpkg.com/getting-started/install)
Project installation
- You need to install the packages, use:
yarn install
- Now, you can start the project in the development mode by using:
yarn dev
- Open http://localhost:3000 to view it in the browser.
Useful commands:
yarn install
to install dependenciesyarn dev
to start a local dev-serveryarn build
to build a minified version of the code, for production use!yarn test
to launch tests in watch modeyarn lint:fix
to automatically fix linting errorsyarn test:coverage
to generate the coverage
Technology stack
- React: a JavaScript library for building user interfaces (more information)
- Next.Js: The React Framework (more information)
- Redux-toolkit (more information)
- Jest / React testing library for all testing
- Eslint, Prettier for linting and formatting
- Gitlab-CI/CD for Continuous Integration CI / Continuous Deployment CD
- Typescript
Frontend architecture
The project is structured as follows:
components
: React components are reusable pieces of the application (such as a button).- Atoms: the atoms of our interfaces serve as the foundational building blocks that comprise all our user interfaces. These atoms include basic HTML elements like form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional.
- Molecules: the molecules are relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form molecule.
- Organisms: the organisms are relatively complex UI components composed of groups of molecules and/or atoms. These organisms form distinct sections of an interface.
- Templates: the templates are page-level objects that place components into a layout and articulate the design’s underlying content structure.
pages
: Next pages correspond to the application pages (such as the home page).redux
: Redux hooks/reducers/slices/store. Learn more about Redux / Redux-toolkit by reading Usage With TypeScript.
TODO
Complete the documentation
Use i18n