**# Mini-Framework
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.
- 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.
-
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.
Follow these steps to create a new React application using create-react-app
:
- Ensure Node.js and npm (Node Package Manager) are installed on your computer.
- If not installed, download them from the Node.js official website.
- Open a Terminal/Command Prompt
- On Windows, use Command Prompt or PowerShell.
- On macOS or Linux, use the Terminal.
- Install
create-react-app
Globally
- Run the command below to install
create-react-app
globally on your machine.npm install -g create-react-app
- 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.
- 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
- 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.
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.
import {GlobalRoutes} from "./types/GlobalRoutes";
export const routes: GlobalRoutes.Routes = {
test: '/test',
root: '/'
};
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.
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.
To add a new route to the application:
-
Define the Route in
types/GlobalRoutes.ts
: First, extend theRoutes
interface to include the new route key and path type.export namespace GlobalRoutes { export interface Routes { // existing routes... userProfile: String; // New route key } }
-
Add the Route Path in
routes.ts
: Then, in theroutes.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 };
-
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>;
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.
import {config as TestDocument} from "../extensions/TestPage/context/config";
export const config = [
TestDocument,
];
-
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. -
Global Configuration Array: The
config
array consolidates these configurations. Each element represents a specific application part and its state management setup. -
Modularity and Extensibility: This approach allows easy extension of the application. New feature configurations can be imported and added to the array for integration.
-
Create Feature Configuration: For a new feature, e.g.,
UserProfile
, create a configuration file likeUserProfile/context/config.ts
. This should export a configuration object with initial state, functions, and reducers forUserProfile
. -
Import and Integrate Configuration: In
context.ts
, import the new configuration and add it to theconfig
array.import {config as UserProfileConfig} from "../extensions/UserProfile/context/config"; export const config = [ TestDocument, UserProfileConfig, // New feature configuration ];
-
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.
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.
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.
import {MainMenuType} from "../extensions/MainMenu/types/MainMenu";
import {Test} from '../extensions/TestPage/etc/menu';
export const config: MainMenuType.RootObject = {
pages: [
...Test.pages,
]
};
-
Importing Menu Configurations: The file imports menu configurations from different extensions, such as
Test
from theTestPage
extension. -
Menu Configuration Object: The
config
is an object of typeMainMenuType.RootObject
. It includes an array ofpages
, where each page can contain several menu items. -
Extensibility: The structure is designed to allow the addition of multiple page configurations, facilitating a dynamic and scalable menu structure.
-
Create Menu Page Configuration: For a new feature like
UserProfile
, create a menu configuration inUserProfile/etc/menu.tsx
. This should export an object with the menu items for the UserProfile page. -
Import and Integrate Menu Configuration: In
Menu.tsx
, import this new menu configuration and integrate it into theconfig.pages
array.import {UserProfile} from '../extensions/UserProfile/etc/menu'; export const config: MainMenuType.RootObject = { pages: [ ...Test.pages, ...UserProfile.pages, // New menu page ] };
-
Menu Integration: This addition extends the main menu to include the
UserProfile
feature's menu items, enhancing the navigation options in the application.
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.
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.
-
Create Configuration File: Create a new file,
UserProfile/etc/menu.tsx
, in theUserProfile
extension. -
Implement the Configuration: The file should export an object of type
MainMenuType.RootObject
containing the menu items specific to theUserProfile
feature.
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,
],
};
-
Import UserProfile Menu Configuration: In the
Menu.tsx
file, import theUserProfile
menu configuration. -
Add to Main Menu Configuration: Add the
UserProfile
pages to theconfig.pages
array in theMenu.tsx
file.
// 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
],
};
-
Usage in Application:
The main menu component will now include the
UserProfile
menu items, rendered alongside other menu items.
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.
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.
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>
);
The StateProvider
, known as ContextProvider
, is crucial for global state management in React applications, providing a shared context for state across various components.
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>
);
InitialState
in StateProvider
sets up default state properties.
export const TestDocument = () => ({
initialState: [{
key: 'testDocumentCollection',
value: TestDocumentType.InitialState
}],
// functions and reducers...
});
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'
}];
}
-
Define InitialState:
export const UserProfile = () => ({ initialState: [{ key: 'userProfileData', value: { name: '', email: '' } // Example initial data }], // functions and reducers... });
-
Integrate into Global Context:
import {UserProfile} from '../extensions/UserProfile/context/config'; export const config = [ TestDocument(), UserProfile(), // New initial state ];
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.
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.
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.
export namespace UserProfileType {
export interface Type {
username: String;
email: String;
// other properties...
}
export const InitialState = {
username: 'DefaultUser',
email: 'email@example.com'
// default values...
};
}
-
Create a Namespace:
UserProfileType
. - Define an Interface: Specify the properties of the feature.
-
Set Default Values: In
InitialState
.
Setting the InitialState
for the UserProfile
feature involves using the type structure created in the previous step.
export const UserProfile = () => ({
initialState: [{
key: 'userProfileData',
value: UserProfileType.InitialState
}],
// functions and reducers...
});
-
Define the InitialState: In the context configuration for
UserProfile
. -
Use the Type Structure: Assign
UserProfileType.InitialState
as the value.
Integrating the UserProfile
InitialState into the global context configuration makes its state accessible throughout the application.
-
Locate Global Context Configuration File: Typically found in the
etc
directory. -
Import UserProfile Configuration:
import {UserProfile} from '../extensions/UserProfile/context/config';
-
Include UserProfile InitialState:
export const config = [ TestDocument(), UserProfile(), // Include new initial state ];
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.
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
.
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...
],
});
Create a function that encapsulates the desired action, such as API calls or data processing.
Use the dispatch
method within the function to send actions to the reducer, including a type and payload.
Add the function to the functions
array in the context configuration with a unique key
and a method
.
-
Define the Function:
const myNewFunction = (dispatch, data) => { // Function logic dispatch({ type: 'MY_ACTION_TYPE', value: data }); };
-
Add to Context Configuration:
export const MyFeatureContext = () => ({ // initialState and reducers... functions: [ ...existingFunctions, { key: "myNewFunction", method: myNewFunction } ], });
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.