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:

``bash
npm i tec-web-base
`

Components

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

$3

The Backdrop component narrows the user's focus to a particular element on the screen.

`jsx
import {Backdrop} from 'tec-web-base';


`

#### 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

$3

The Button component allows users to take actions and make choices with a single tap.

`jsx
import {Button} from 'tec-web-base';

variant={"contained"}
title={"Title"}
startIcon={}
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

$3

The Checkboxes allow the user to select one or more items from a set.

`jsx
import {CheckBox} from 'tec-web-base';

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

$3

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.

`jsx
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 (

open={open}
setOpen={setOpen}
/>

);
}
`

You can pass children to Dialog components. This allows you to include additional content, such as text, buttons, or
other components, within the dialog.

`jsx
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 (

open={open}
setOpen={setOpen}
children={You can pass any JSX/React component here.}
/>

);
}
`

#### 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

$3

The File Upload component allows users to easily select and upload files.

`jsx
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 (

name="logo"
label="Logo"
accept="image/*"
onChangeHandler={(event) => {
let {files} = event?.target;
//Here You can implement your logic.
}}
/>

);
}
`

#### 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

$3

Creating a form is no more complicated while building a React application.

`jsx
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 (

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

$3

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.

`jsx
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 (

name="city"
label="City"
value={value}
options={options}
onChangeHandler={(event, value) => {
console.log(value, event);
setValue(value);
}}
/>

);
}
``

#### 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.