mini-react-framework

**# Mini-Framework

Overview

This mini-state-framework is a lightweight, React-based framework utilizing the Material-UI library. It's designed to provide a structured yet flexible foundation for building web applications with a focus on state management, routing, and Firebase integration.

Features

• Material-UI Integration: Leverages Material-UI for a consistent and modern UI design.
• State Management: Utilizes a custom ContextProvider for global state management across the application.
• Routing: Implements react-router-dom for navigation between different components and pages.
• Firebase Integration: Configured to work seamlessly with Firebase Authentication, Firestore, and Storage.
• Dynamic Theming: Includes a theme configuration using Material-UI's createTheme for easy customization.
• Firestore Security Rules: Comes with predefined Firestore security rules for basic operations.

Structure

• src/framework: Contains the core framework files.
  • index.tsx: Entry point for the application.
  • App.tsx: Main application component.
  • Router.tsx: Routing configuration.
• src/framework/etc: Configurations and utility files.
  • routes.ts: Route definitions.
  • firebase.ts: Firebase initialization and configuration.
  • context.ts: Context configurations for different modules.
• src/framework/extensions: Custom extensions and components.
  • StateProvider: Global state management setup.
  • TestPage: Example implementation of a test page.
• src/framework/etc/types: Type definitions for global state and routes.

Installation

Creating a New React Application with Create-React-App

Follow these steps to create a new React application using create-react-app:

Prerequisites

• Ensure Node.js and npm (Node Package Manager) are installed on your computer.
• If not installed, download them from the Node.js official website.

Installation Steps

1. Open a Terminal/Command Prompt

• On Windows, use Command Prompt or PowerShell.
• On macOS or Linux, use the Terminal.

2. Install create-react-app Globally

• Run the command below to install create-react-app globally on your machine.

  npm install -g create-react-app

3. Create a New React App

• Navigate to the directory where you want your project.
• Run the command, replacing my-app with your desired project name.

  create-react-app my-app

• This creates a new folder named my-app with all necessary files for a React application.

4. Navigate to Your App Directory

• Move to your newly created app directory:

  cd my-app

5 Install mini-react-framework

• Move to your newly created app directory:

  npm install mini-react-framework

5. Start the Development Server

• Start the local development server with:

  npm start

• This launches the React application in your default web browser (usually at http://localhost:3000).

Now, you can start developing your React application!

Visit http://localhost:3000 in your browser to see your application.

Routes Configuration (routes.ts)

Overview

The routes.ts file in the project is responsible for defining the routing paths used throughout the application. It exports a routes object which maps route names to corresponding URL paths.

Structure

import {GlobalRoutes} from "./types/GlobalRoutes";

export const routes: GlobalRoutes.Routes = {
    test: '/test',
    root: '/'
};

Relationship with types/GlobalRoutes.ts

The routes.ts file imports and utilizes the GlobalRoutes namespace from the types/GlobalRoutes.ts file. This namespace defines the structure of the routes object, ensuring type safety and consistency in route definitions. The routes.ts file, in conjunction with the types/GlobalRoutes.ts, provides a structured and type-safe way to manage routing paths in the application, ensuring that route definitions are consistent and easily maintainable.

types/GlobalRoutes.ts Structure

export namespace GlobalRoutes {
    export interface Routes {
        test: String,
        root: String
    }
}

In types/GlobalRoutes.ts, an interface Routes is declared within the GlobalRoutes namespace. This interface specifies the keys and types of the routes object. Each key represents a route name, and the type is String, representing the URL path.

Adding New Routes

To add a new route to the application:

1. Define the Route in types/GlobalRoutes.ts: First, extend the Routes interface to include the new route key and path type.

   export namespace GlobalRoutes {
       export interface Routes {
           // existing routes...
           userProfile: String; // New route key
       }
   }

2. Add the Route Path in routes.ts: Then, in the routes.ts file, add the corresponding URL path for the new route key.

   export const routes: GlobalRoutes.Routes = {
       // existing routes...
       userProfile: '/user/profile' // New route path
   };

3. Usage: Utilize the new route in components or navigation logic as needed.

   import { routes } from './etc/routes';
   
   // Example usage in a component
   const ProfileLink = () => <Link to={routes.userProfile}>Profile</Link>;

Global Context Configuration (context.ts)

Overview

The context.ts file in the etc folder is crucial for global state management in the application. It brings together configurations from different application parts to create a unified global context.

Structure

import {config as TestDocument} from "../extensions/TestPage/context/config";

export const config = [
    TestDocument,
];

Details

1. Importing Configurations: Configurations from various application parts, such as extensions or features, are imported. For example, the configuration from the TestPage extension is imported here.

2. Global Configuration Array: The config array consolidates these configurations. Each element represents a specific application part and its state management setup.

3. Modularity and Extensibility: This approach allows easy extension of the application. New feature configurations can be imported and added to the array for integration.

Adding a New Feature

1. Create Feature Configuration: For a new feature, e.g., UserProfile, create a configuration file like UserProfile/context/config.ts. This should export a configuration object with initial state, functions, and reducers for UserProfile.

2. Import and Integrate Configuration: In context.ts, import the new configuration and add it to the config array.

   import {config as UserProfileConfig} from "../extensions/UserProfile/context/config";
   
   export const config = [
       TestDocument,
       UserProfileConfig,  // New feature configuration
   ];

3. Global State Integration: This integration extends the global state to include the UserProfile feature's state, functions, and reducers, making them available throughout the application.

Conclusion

The context.ts file is essential for a centralized, scalable global state structure. Its modular design facilitates the integration of new features and extensions, enhancing the maintainability and scalability of the application's development.

Main Menu Configuration (Menu.tsx)

Overview

The Menu.tsx file in the etc folder is crucial for defining the main menu's structure and content in the application. It specifies the navigation menu's configuration, enabling easy access to different application pages or features.

Structure

import {MainMenuType} from "../extensions/MainMenu/types/MainMenu";
import {Test} from '../extensions/TestPage/etc/menu';

export const config: MainMenuType.RootObject = {
    pages: [
        ...Test.pages,
    ]
};

Details

1. Importing Menu Configurations: The file imports menu configurations from different extensions, such as Test from the TestPage extension.

2. Menu Configuration Object: The config is an object of type MainMenuType.RootObject. It includes an array of pages, where each page can contain several menu items.

3. Extensibility: The structure is designed to allow the addition of multiple page configurations, facilitating a dynamic and scalable menu structure.

Adding a New Menu Page

1. Create Menu Page Configuration: For a new feature like UserProfile, create a menu configuration in UserProfile/etc/menu.tsx. This should export an object with the menu items for the UserProfile page.

2. Import and Integrate Menu Configuration: In Menu.tsx, import this new menu configuration and integrate it into the config.pages array.

   import {UserProfile} from '../extensions/UserProfile/etc/menu';
   
   export const config: MainMenuType.RootObject = {
       pages: [
           ...Test.pages,
           ...UserProfile.pages,  // New menu page
       ]
   };

3. Menu Integration: This addition extends the main menu to include the UserProfile feature's menu items, enhancing the navigation options in the application.

Conclusion

The Menu.tsx file is vital for setting up the main menu's structure and content. Its design promotes easy integration of new features into the application's navigation system, ensuring a user-friendly and dynamic menu.

Configuring UserProfile Menu (UserProfile/etc/menu.tsx)

Overview

To configure a new menu page for the UserProfile feature, you will create a dedicated menu configuration file within the UserProfile extension. This configuration is then integrated into the main menu of the application.

Define UserProfile Menu Configuration

1. Create Configuration File: Create a new file, UserProfile/etc/menu.tsx, in the UserProfile extension.

2. Implement the Configuration: The file should export an object of type MainMenuType.RootObject containing the menu items specific to the UserProfile feature.

Example: UserProfile/etc/menu.tsx

import { MainMenuType } from "../../MainMenu/types/MainMenu";
import AccountCircleIcon from '@mui/icons-material/AccountCircle';  // Example icon
import React from "react";

const UserProfilePage: MainMenuType.page = {
    pageId: '/userProfile',  // Unique identifier for the menu page
    items: [
        {
            label: 'Profile Settings',
            url: '/user/settings',
            icon: <AccountCircleIcon/>,
        },
        // Additional menu items as needed
    ],
};

export const UserProfile: MainMenuType.RootObject = {
    pages: [
        UserProfilePage,
    ],
};

Integrate with Main Menu

1. Import UserProfile Menu Configuration: In the Menu.tsx file, import the UserProfile menu configuration.

2. Add to Main Menu Configuration: Add the UserProfile pages to the config.pages array in the Menu.tsx file.

Example: Integration in Menu.tsx

// Menu.tsx
import {MainMenuType} from "../extensions/MainMenu/types/MainMenu";
import {Test} from '../extensions/TestPage/etc/menu';
import {UserProfile} from '../extensions/UserProfile/etc/menu';  // Import

export const config: MainMenuType.RootObject = {
    pages: [
        ...Test.pages,
        ...UserProfile.pages,  // Integrate UserProfile menu
    ],
};

3. Usage in Application: The main menu component will now include the UserProfile menu items, rendered alongside other menu items.

Conclusion

This approach demonstrates how to create and integrate a new menu page for a specific feature (UserProfile) into the application's main menu. It allows for a modular and extensible menu structure, adaptable to various features and requirements of the application.

StateProvider (ContextProvider) Documentation

Overview

The StateProvider (also known as ContextProvider) is a critical component for global state management in the application. It encapsulates the entire application, providing shared state and functions across components.

1. Relationship with index.tsx

The ContextProvider is implemented in the index.tsx file to wrap the entire application. This setup ensures that the global state is accessible in all parts of the application.

Example in index.tsx:

import { createRoot } from 'react-dom/client';
import App from './App';
import { ContextProvider } from './extensions/StateProvider/ContextProvider';

const container = document.getElementById('root') as HTMLElement;
const root = createRoot(container);
root.render(
    <ContextProvider>
        <App />
    </ContextProvider>
);

StateProvider (ContextProvider) Documentation

Overview

The StateProvider, known as ContextProvider, is crucial for global state management in React applications, providing a shared context for state across various components.

1. Relationship with index.tsx

The ContextProvider is integrated in the index.tsx file to ensure global state accessibility throughout the application.

Example in index.tsx:

import { createRoot } from 'react-dom/client';
import App from './App';
import { ContextProvider } from './extensions/StateProvider/ContextProvider';

const container = document.getElementById('root') as HTMLElement;
const root = createRoot(container);
root.render(
    <ContextProvider>
        <App />
    </ContextProvider>
);

2. Creating a New InitialState

Purpose

InitialState in StateProvider sets up default state properties.

Example from TestDocument.ts

export const TestDocument = () => ({
    initialState: [{
        key: 'testDocumentCollection',
        value: TestDocumentType.InitialState
    }],
    // functions and reducers...
});

TestDocumentType Structure

export namespace TestDocumentType {
    export interface Type {
        label: String;
        description: String;
        created?: any;
        updated?: any;
    }

    export const InitialState = [{
        label: 'This is a Test Label',
        description: 'Test Description'
    }];
}

Creating New InitialState for UserProfile

1. Define InitialState:

   export const UserProfile = () => ({
       initialState: [{
           key: 'userProfileData',
           value: { name: '', email: '' }  // Example initial data
       }],
       // functions and reducers...
   });

2. Integrate into Global Context:

   import {UserProfile} from '../extensions/UserProfile/context/config';
   
   export const config = [
       TestDocument(),
       UserProfile(),  // New initial state
   ];

Conclusion

The StateProvider (ContextProvider) is vital for global state management in React applications. Its integration in index.tsx and the pattern for adding new initial states, as demonstrated with UserProfile, ensures consistency and scalability in state management.

Comprehensive Guide to Implementing UserProfile Feature in React Applications

Overview

This documentation provides a structured approach to implementing a new feature, UserProfile, in React applications. It covers creating a type structure, setting up the initial state, and integrating the feature's state into the global context for consistent and type-safe state management.

Step 1: Define the Type Structure for UserProfile

Concept

Creating a namespace for the new feature type (UserProfileType) is crucial. This step involves defining an interface for the feature's properties and setting default values.

Example: UserProfileType

export namespace UserProfileType {
    export interface Type {
        username: String;
        email: String;
        // other properties...
    }

    export const InitialState = {
        username: 'DefaultUser',
        email: '[e-mail]'
        // default values...
    };
}

Action Items

1. Create a Namespace: UserProfileType.
2. Define an Interface: Specify the properties of the feature.
3. Set Default Values: In InitialState.

Step 2: Set the Defined Type as InitialState

Concept

Setting the InitialState for the UserProfile feature involves using the type structure created in the previous step.

Example: UserProfile Context Configuration

export const UserProfile = () => ({
    initialState: [{
        key: 'userProfileData',
        value: UserProfileType.InitialState
    }],
    // functions and reducers...
});

Action Items

1. Define the InitialState: In the context configuration for UserProfile.
2. Use the Type Structure: Assign UserProfileType.InitialState as the value.

Step 3: Integrate UserProfile InitialState in Global Context Configuration

Concept

Integrating the UserProfile InitialState into the global context configuration makes its state accessible throughout the application.

Steps for Integration

1. Locate Global Context Configuration File: Typically found in the etc directory.
2. Import UserProfile Configuration:

   import {UserProfile} from '../extensions/UserProfile/context/config';

3. Include UserProfile InitialState:

   export const config = [
       TestDocument(),
       UserProfile(),  // Include new initial state
   ];

Conclusion

By following these structured steps, developers can ensure that new features like UserProfile are integrated seamlessly into their React applications. This approach enhances the maintainability and scalability of the application by ensuring a consistent, organized, and type-safe method for state management.

Creating Functions in React Context

Overview

Functions in the React context are crucial for defining actions that can be dispatched to modify the global state. This document outlines how to create such functions, inspired by the examples in TestDocument.ts.

Example from TestDocument.ts

In TestDocument.ts, functions form a part of the context configuration, designed to perform operations and dispatch actions to update the state.

import {addTestDocument, getTestDocumentCollection} from "../../firestore/TestDocument";
import {TestDocumentType} from "../../types/TestDocumentType";
import {TestDocumentContextType} from "../../types/context/TestDocument";

export const TestDocument = () => ({
    // initialState and reducers...
    functions: [
        {
            key: "addTestDocument",
            method: (dispatch: any, data: TestDocumentType.Type) => {
                addTestDocument(data).then(async () => {
                    dispatch({
                        type: TestDocumentContextType.Actions.TEST_DOCUMENT_UPDATE_LIST,
                        value: await getTestDocumentCollection()
                    })
                });
            }
        },
        // Other functions...
    ],
});

Creating New Functions

Define the Function Logic

Create a function that encapsulates the desired action, such as API calls or data processing.

Dispatching Actions

Use the dispatch method within the function to send actions to the reducer, including a type and payload.

Integrate Function into Context Configuration

Add the function to the functions array in the context configuration with a unique key and a method.

Steps to Add a New Function

1. Define the Function:

   const myNewFunction = (dispatch, data) => {
       // Function logic
       dispatch({
           type: 'MY_ACTION_TYPE',
           value: data
       });
   };

2. Add to Context Configuration:

   export const MyFeatureContext = () => ({
       // initialState and reducers...
       functions: [
           ...existingFunctions,
           {
               key: "myNewFunction",
               method: myNewFunction
           }
       ],
   });

Conclusion

Creating functions in the context configuration is essential for a scalable and maintainable approach to state management in React applications. This pattern ensures organized handling of actions and state updates.