tec-web-base
Tec Web Base
Welcome to the comprehensive documentation for our tec-web-base npm package, a dynamic foundation meticulously built on React.js, integrating essential components and best practices for seamless and efficient software development. This robust starting point encapsulates a wealth of features, including custom hooks for HTTP services and sessions, Material-UI for component design. Whether you are a seasoned developer or just starting, this documentation provides a roadmap to leverage the rich functionalities and ensure a smooth development journey.
Getting Started
Install npm package tec-web-base in your project through this command:
npm i tec-web-baseComponents
Our package comes equipped with a versatile set of components, carefully selected to enhance your development experience. Each component is designed to seamlessly integrate with your projects, providing consistent styling and behavior. Let's explore the main components included in our package:
- Backdrop
- Button
- Checkbox
- Dialog
- FileUpload
- Form
- Multistep Form
- Radio
- Select
- Snackbar
- Table
- Text Field
- TreeSelect
- TransferList
Backdrop
The Backdrop component narrows the user's focus to a particular element on the screen.
import {Backdrop} from 'tec-web-base';
<Backdrop loading={loading}/>Props
| Name | Type | Default | Description |
|---|---|---|---|
| loading | boolean | false | Controls the visibility of the backdrop. When set to true, the backdrop is visible; when set to false, the backdrop is hidden. |
Note: You can further enhance the functionality by including the additional props available for the MUI Backdrop component... Read More
Button
The Button component allows users to take actions and make choices with a single tap.
import {Button} from 'tec-web-base';
<Button
variant={"contained"}
title={"Title"}
startIcon={<AddIcon/>}
onClick={() => {
}}
/>Props
| Name | Type | Default | Description |
|---|---|---|---|
| title | string | 'Button' | The text displayed on the button |
Note: You can further enhance the functionality by including the additional props available for the MUI Button component... Read More
Checkbox
The Checkboxes allow the user to select one or more items from a set.
import {CheckBox} from 'tec-web-base';
<CheckBox
name="jobType"
label="Job Type"
value={['full-time', 'contract']}
options={[
{id: 'full-time', label: 'Full Time', checked: false},
{id: 'part-time', label: 'Part Time', checked: false},
{id: 'contract', label: 'Contract', checked: false}
]}
onChangeHandler={(event, selectedValues) => {
console.log('job type', event.target.value, selectedValues)
}}
errors={{jobType: {message: 'Something went wrong'}}}
/>Props
| Name | Type | Default | Description |
|---|---|---|---|
| name | string | - | This property will be used when you are using a checkbox in a form or when displaying errors. |
| label | string | 'Checkbox' | The text displayed as the title of the checkbox. |
| options | array | - | TIn this property, you will send an array of options for the checkbox. |
| value | array | - | Represent the current state of the checkbox group. The array should contain the IDs of items that are to be checked by default. |
| disabled | boolean | false | This is used to disable the checkbox group. |
Note: You can further enhance the functionality by including the additional props available for the MUI FormGroup component... Read More
Dialog
A Dialog is a type of modal window that appears in front of app content to provide critical information or ask for a decision. Dialogs disable all app functionality when they appear and remain on screen until confirmed, dismissed, or a required action has been taken.
import * as React from 'react';
import Box from '@mui/material/Box';
import {Dialog} from 'tec-web-base';
export default function Component() {
const [open, setOpen] = React.useState(false);
return (
<Box>
<Dialog
open={open}
setOpen={setOpen}
/>
</Box>
);
}You can pass children to Dialog components. This allows you to include additional content, such as text, buttons, or other components, within the dialog.
import * as React from 'react';
import Box from '@mui/material/Box';
import {Dialog} from 'tec-web-base';
export default function Component() {
const [open, setOpen] = React.useState(false);
return (
<Box>
<Dialog
open={open}
setOpen={setOpen}
children={<Typography>You can pass any JSX/React component here.</Typography>}
/>
</Box>
);
}Props
| Name | Type | Default | Description |
|---|---|---|---|
| open | boolean | false | If true, the component is shown. |
| setOpen | function | - | 'setOpen' is a function that will change the state of 'open'. |
| action | object | { title: 'Okay', variant: 'contained', onClick: function () {setOpen(false)} } | Action is an object that contains additional props for the action button. For more details, see the 'Action Props'. |
| heading | string | 'Success!' | The heading prop contains the title of the dialog. |
| description | string | 'Your action has been completed successfully.' | It contains the message of the dialog. |
| children | node | - | Dialog children, usually the included sub-components. |
Note: You can further enhance the functionality by including the additional props available for the MUI Dialog component... Read More
Action Props
| Name | Type | Default | Description |
|---|---|---|---|
| title | string | 'Okay' | The text displayed on the action button. |
| variant | string | 'contained', 'outlined', 'text', 'string' | The variant to use. |
| onClick | function | function () { setOpen(false) } | Function that will call on action button click. |
Note: You can further enhance the functionality by including the additional props available for the MUI Button component... Read More
FileUpload
The File Upload component allows users to easily select and upload files.
import * as React from 'react';
import Box from '@mui/material/Box';
import {FileUpload} from 'tec-web-base';
export default function BasicTextFields() {
const [open, setOpen] = React.useState(false);
return (
<Box>
<FileUpload
name="logo"
label="Logo"
accept="image/*"
onChangeHandler={(event) => {
let {files} = event?.target;
//Here You can implement your logic.
}}
/>
</Box>
);
}Props
| Name | Type | Default | Description |
|---|---|---|---|
| name | string | - | This property will be used when you are using a FileUpload Field in a form or when displaying errors. |
| label | string | 'Upload File' | The text displayed as the title of the |
| variant | 'contained', 'outlined', 'filled' | 'outlined' | The variant to use. |
| onChangeHandler | function | - | function(event: object) => void event The event source of the callback. You can pull out the new value by accessing event.target.value (string). |
| accept | string | 'image/*' | The accept attribute specifies the types of files that are allowed to be uploaded using this file input field |
Note: You can further enhance the functionality by including the additional props available for the MUI Text Field component... Read More
Form
Creating a form is no more complicated while building a React application.
import React, {useEffect} from "react";
import {Form, useForm} from "tec-web-base";
export default function BasicForm() {
const {getFormValues, setFormValues, ...others} = useForm();
var fieldsData = [
{
name: "full_name",
label: "Full Name",
fieldStyle: {gridColumn: 'span 3'}
},
{
name: "gender",
label: "Gender",
required: true,
type: "select",
fieldStyle: {gridColumn: 'span 1'},
options: [
{id: 1, label: "Male"},
{id: 2, label: "FeMale"}
],
disabled: false,
},
{
name: "status",
label: "Status",
required: true,
type: "select",
options: [
{id: "active", label: "Active"},
{id: "inactive", label: "In Active"}
]
},
{
name: "city",
label: "City",
type: "treeSelect",
required: true,
fieldStyle: {gridColumn: 'span 3/2'},
options: [{
id: 1,
name: "Punjab",
childs: [
{
id: 10,
name: "Lahore",
childs: [
{
id: 100,
name: "Shalimar Town",
childs: [],
},
{
id: 101,
name: "Gulberg",
childs: [],
},
],
},
{
id: 11,
name: "Faisalabad",
childs: [
{
id: 105,
name: "Lyallpur Town",
childs: [],
},
{
id: 106,
name: "Madina Town",
childs: [
{
id: 115,
name: "D Ground",
childs: [],
},
{
id: 116,
name: "Peoples Colony",
childs: [],
},
],
},
],
},
],
}
]
}
];
useEffect(() => {
setFormValues({...getFormValues, full_name: 'XYZ'})
}, [])
return (<Form
fieldsData={fieldsData}
getFormValues={getFormValues}
setFormValues={setFormValues}
submitHandler={(values, event) => {
//Here You can implement your logic.
}}
formStyle={{display: 'grid', gap: 2, gridTemplateColumns: 'repeat(3, 1fr)'}}
actions={[
{
title: 'Submit',
type: 'submit',
variant: 'outlined',
gridStyle: {sx: {minWidth: "15vw"}}
},
{
title: 'Cancel', onClick: () => {
//Here You can implement your logic.
}
}]}
{...others}
/>);
};Props
| Name | Type | Default | Description |
|---|---|---|---|
| fieldsData | array | - | The 'fieldsData' property, containing the fields you want to display in the form. The 'type' should be 'text', 'textarea', 'number', 'date', 'email', 'password', 'color', 'file', 'select', 'multiselect', 'checkbox' and 'radio'. |
| actions | array | - | The 'actions' property, containing the actions you want to display in the form. |
| submitHandler | function | - | The function to use. |
| formStyle | object | {display: 'grid', gap: 2, gridTemplateColumns: 'repeat(3, 1fr)'} | Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive grid utilities. Read More |
Note: 1- You can further enhance the functionality by including the additional props available for the useForm Hook... Read More
2- You can further enhance the functionality of Form Fields by including the additional props available for the MUI Input components e.g 'Text Field', 'Select', 'CheckBox' etc. Read More
TreeSelect
The TreeSelect component is a customizable tree selection input for React applications using Material-UI components. It allows users to select an item from a hierarchical list of options.
import * as React from 'react';
import Box from '@mui/material/Box';
import {TreeSelect} from 'tec-web-base';
export default function BasicTreeSelect() {
const [value, setValue] = React.useState(null);
const options = [
{
id: 1,
name: "Punjab",
childs: [
{
id: 10,
name: "Lahore",
childs: [
{
id: 100,
name: "Shalimar Town",
childs: [],
},
{
id: 101,
name: "Gulberg",
childs: [],
},
],
},
{
id: 11,
name: "Faisalabad",
childs: [
{
id: 105,
name: "Lyallpur Town",
childs: [],
},
{
id: 106,
name: "Madina Town",
childs: [
{
id: 115,
name: "D Ground",
childs: [],
},
{
id: 116,
name: "Peoples Colony",
childs: [],
},
],
},
],
},
],
},
{
id: 2,
name: "Sindh",
childs: [
{
id: 20,
name: "Karachi",
childs: [
{
id: 200,
name: "Saddar Town",
childs: [],
},
{
id: 201,
name: "Gulshan Town",
childs: [],
},
],
},
{
id: 21,
name: "Hyderabad",
childs: [
{
id: 205,
name: "Qasimabad",
childs: [],
},
{
id: 206,
name: "Latifabad",
childs: [],
},
],
},
],
},
];
return (
<Box>
<TreeSelect
name="city"
label="City"
value={value}
options={options}
onChangeHandler={(event, value) => {
console.log(value, event);
setValue(value);
}}
/>
</Box>
);
}Props
| Name | Type | Default | Description |
|---|---|---|---|
| id | string | - | The ID for the component |
| name | string | - | This property will be used when you are using a FileUpload Field in a form or when displaying errors. |
| label | string | 'Tree Select' | The text displayed as the title of the Field |
| onChangeHandler | function | - | function(event: object, value: object) => void event The event source of the callback. You can pull out the new value by accessing event.target.value (string). |
Note: You can further enhance the functionality by including the additional props available for the MUI OutlinedInput component... Read More
Note: The documentation for tec-web-base is currently incomplete and is still in the process of being developed. We apologize for any inconvenience this may cause and appreciate your patience.