DIGIT UI Core React Components

Migration guide to aid users in shifting from the "react-components" package to the "components-core" package

Introduction

This document details the essential modifications needed in the modules for smooth integration of components from the "components-core" package. It offers precise guidelines on utilizing FormComposerV2 and InboxSearchComposer, along with updates made in the configs.

Topics covered:

• Overview

• Install

• Apply

• Modifications to the Project Module

• Conclusion

Overview

In the components-core package, several enhancements have been implemented to improve code clarity and address issues related to pixel inconsistencies. Previously, there were challenges associated with pixel-based sizing, leading to inconsistencies across different devices and screen resolutions. To mitigate this, the codebase has been updated to utilize rems as the primary unit of measurement. This transition to rems offers several advantages over pixels, including improved scalability and responsiveness across various viewport sizes.

By adopting rems, the components' styling is now more consistent and adaptable, providing a seamless user experience across different platforms and devices.

Furthermore, the components, namely TextInput, TextArea, Radio, Button, Checkbox, Toggle, Dropdown, Multiselectdropdown, InfoCard, and Toast, now offer different variants. Adding variants for these components makes them more flexible, serving a wider range of purposes and meeting different design needs effectively.

These are some of the updates made in the components-core package.

Atom	Variants	State
TextInput	Text Date Time Geolocation Numeric Prefix Suffix Password Search	Default Filled Disabled NonEditable Focus Error Label Character Count Inner Label Info Help Text/ Description
TextArea		Default Filled Disabled NonEditable Focus Error Label Character Count Inner Label Info Help Text/ Description resizeSmart
Radio	Radio Selection	Default Disabled Selected PreSelected
Toggle	Toggle	Default Disabled Selected PreSelected
Button	Primary Secondary Teritiary Link	Active Disabled Label Interactions
Dropdown	Default Nested Tree select Profile Profile with nested text Nested Text	Default Disabled Selected Interactions
MultiSelect Dropdown	Default Nested Tree Multiselect Nested Text Multiselect	Default Disabled Selected Interactions
Checkbox	Default Checked	Active Disabled Label Interactions
Toast	Success Warning Failure
Info Card	Default Success Warning Error

Install - Steps

To install:

npm install -save @egovernments/digit-ui-components-core

Add the dependency in the frontend/micro-ui/web/package.json

"@egovernments/digit-ui-components-core":"0.0.1"

Apply

Syntax for importing any components:

import {TextInput, Dropdown} from "@egovernenets/digit-ui-components-core"

Syntax for importing FormComposerV2:

import {FormComposerV2} from "@egovernenets/digit-ui-components-core"

<React.Fragment>
<Header >{t("CREATE_HEADER")}</Header>
<FormComposerV2
label={t("PROCEED")}
config={configs.map((config) => {
return {
...config,
body: config.body.filter((a) => !a.hideInEmployee),
};
})}
defaultValues={sessionFormData}
onFormValueChange={onFormValueChange}
onSubmit={onFormSubmit}
/>
</React.Fragment>

Modifications To The Project Module

In the micro-ui/web/micro-ui-internals/packages/modules/Project/src/pages/employee/CreateProject/CreateProjectForm.js:

import {FormComposerV2} from "@egovernenets/digit-ui-components-core"

return (
<React.Fragment>
<Header className="works-header-create">{isModify ? t("COMMON_MODIFY_PROJECT") : t("WORKS_CREATE_PROJECT")}</Header>
{createProjectConfig && (
<FormComposerV2
label={!isModify ? "WORKS_CREATE_PROJECT" : "WORKS_MODIFY_PROJECT"}
config={config?.form?.map((config) => {
return {
...config,
body: config?.body.filter((a) => !a.hideInEmployee),
};
})}
onSubmit={handleSubmit}
submitInForm={false}
inline={false}
className="form-no-margin"
defaultValues={sessionFormData}
showWrapperContainers={false}
noBreakLine={true}
showNavs={config?.metaData?.showNavs}
showFormInNav={true}
showMultipleCardsWithoutNavs={false}
showMultipleCardsInNavs={false}
horizontalNavConfig={navTypeConfig}
currentFormCategory={currentFormCategory}
onFormValueChange={onFormValueChange}
cardClassName="mukta-header-card"
/>
)}
</React.Fragment>
);

In the micro-ui/web/micro-ui-internals/packages/modules/Project/package.json :

Add “@egovernments/digit-ui-components-core”:”0.0.1” in the dependencies.

And when you import any component the syntax for the import statement is:

import {TextInput, Dropdown} from "@egovernenets/digit-ui-components-core"

In the micro-ui/web/micro-ui-internals/packages/modules/Project/src/pages/employee/ProjectWMSSearch:

import {InboxSearchComposer} from "@egovernenets/digit-ui-components-core"

<div className ="inbox-search-wrapper">
<InboxSearchComposer configs={configs}></InboxSearchComposer>
</div>

Conclusion

Verify these components in the sample module:

Sample module Integrated with new components

These are some of the modifications that need to be done in the modules to use the components from the components-core package.