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

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.

AtomVariantsState

Text

Date

Time

Geolocation

Numeric

Prefix

Suffix

Password

Search

Default

Filled

Disabled

NonEditable

Focus

Error

Label

Character Count

Inner Label

Info

Help Text/ Description

Default

Filled

Disabled

NonEditable

Focus

Error

Label

Character Count

Inner Label

Info

Help Text/ Description

resizeSmart

Radio Selection

Default

Disabled

Selected

PreSelected

Toggle

Default

Disabled

Selected

PreSelected

Primary

Secondary

Teritiary

Link

Active

Disabled

Label

Interactions

Default

Nested

Tree select

Profile

Profile with nested text

Nested Text

Default

Disabled

Selected

Interactions

Default

Nested

Tree Multiselect

Nested Text Multiselect

Default

Disabled

Selected

Interactions

Default

Checked

Active

Disabled

Label

Interactions

Success

Warning

Failure

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.

Last updated

All content on this page by eGov Foundation is licensed under a Creative Commons Attribution 4.0 International License.