Mokhtassim/react-toolbox

A highly scalable architecture to start your digital product in clean way

React toolbox

React toolbox is a cutting-edge web project starter template designed to provide a highly scalable architecture for launching your digital product. By adopting this template, you can kickstart your development process in a clean and efficient manner, enabling rapid product development. Experience the seamless developer journey and deliver exceptional user experiences with ease.

Authors

• @LaghzaliTaha
• @Maimoun Bakr

React toolbox Style Guide

This document provides an overview of the style guide for the react toolbox, as defined in our TypeScript files. Our library offers a comprehensive set of styling guidelines and components to ensure consistency and quality in design.

style guide components:

• Colors
• Typography
• Layout
• Spacing
• Shadows
• Z-Index
• Color Modes
• Additional Styles

Colors

Our color system, defined in colors.ts, includes a range of primary and secondary colors along with various shades.

Color Type	Description	Defined In
Primary Colors	Shades for primary colors	colors.ts
Secondary Colors	Shades for secondary colors	colors.ts

Typography

Typography settings in typography.ts include font sizes, styles, and weights.

Element	Description	Defined In
Font Sizes	Various font sizes	typography.ts
Font Weights	Specific font weights	typography.ts

Layout

Layout configurations in layout.ts include breakpoints and structure.

Element	Description	Defined In
Breakpoints	Defined breakpoints for responsive design	layout.ts
Structure	Rules for layout structuring	layout.ts

Spacing

Spacing rules in spacing.ts cover margins and paddings.

Element	Description	Defined In
Margins and Paddings	Standardized spacing across components	spacing.ts

Shadows

Shadow styles in shadows.ts for UI elements.

Element	Description	Defined In
Box Shadows	Various shadow effects	shadows.ts

Z-Index

Z-index levels in z-index.ts for the stacking order of elements.

Element	Description	Defined In
Levels	Defined z-index levels for UI elements	z-index.ts

Color Modes

Support for light and dark modes in color-mode.ts.

Mode	Description	Defined In
Light/Dark	Styles for color modes	color-mode.ts

Additional Styles

Additional styling considerations in styles.ts and css.ts.

Element	Description	Defined In
Global Styles	Overall CSS styling rules	styles.ts

Contribution

Contributions to the style guide are welcome. Please refer to our contribution guidelines for more information.

---

Demo

https://react-toolbox-785c5.web.app/

Installation

Install and launch react-toolbox with yarn

  yarn install
  nx serve

To Build the project:

nx build: 

To run tests, run the following command

nx test