tec-web-base v0.2.11

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

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

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

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

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

Note: You can further enhance the functionality by including the additional props available for the MUI Dialog component... Read More

Action Props

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

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

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

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.