DIGIT UI Core React Components

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

Topics covered:

• Overview

• Install

• Apply

• Modify Project Module

• Conclusion

Overview

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.

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.

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

Furthermore, TextInput, TextArea, Radio, Button, Checkbox, Toggle, Dropdown, Multiselectdropdown, InfoCard, and Toast 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

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>

Modify 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 the 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.