Introduction

MMPG Softwares admin

MMPG Softwares admin library

Getting started

Install the package with npm by running: npm install @mmpg-soft/admin@latest

Requirements

This package requires:

• Next js
• Tailwind css
• Firebase SDK
• Firebase Admin SDK

How to use it

In order to be able to use this package, you need to adhere to the following instructions

tailwind.config.ts

Include the path of the package's components in your tailwind config: './node_modules/@mmpg-soft/admin/dist/esm/components/**/*.{js,ts,jsx,tsx,mdx}'

Define your colors scheme as follow:

colors: {
	primary: 'primary-color',
    secondary: 'secondary-color',
    accent: 'accent-color',
    text: 'text-color',
    warning: 'warning-color',
    danger: 'danger-color',
    success: 'success-color',
},

Define your Navbar and Sidebar size:

spacing: {
	'header-height': '60px',
    'sidebar-width': '250px',
},

So your tailwind.config.ts should look like this:

import type { Config } from 'tailwindcss';

const config: Config = {
	content: [
		'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
		'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
		'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
		'./node_modules/@mmpg-soft/admin/dist/esm/components/**/*.{js,ts,jsx,tsx,mdx}',
	],
	theme: {
		extend: {
			colors: {
				primary: '#1c3773',
                secondary: '#646464',
                accent: '#337ab7',
                text: '#333333',
                warning: '#f5a623',
                danger: '#d0021b',
                success: '#28a745',
			},
			spacing: {
				'header-height': '60px',
				'sidebar-width': '250px',
			},
		},
	},
	plugins: [],
};
export default config;

firebase.config.ts

In your firebase config file, define your firestore database id in the function setFirestoreDatabaseId("YourFirestoreDatabaseId")

Example:

import { setFirestoreDatabaseId } from '@mmpg-soft/admin';
import { FirebaseOptions, getApp, getApps, initializeApp } from 'firebase/app';
import { browserLocalPersistence, getAuth } from 'firebase/auth';

export const firestoreDatabaseId =
	process.env.NEXT_PUBLIC_FIREBASE_DATABASE_ID || '(default)';

export const firebaseConfig = {
	apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
	authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
	projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
	storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
	messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
	appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
	measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};

export const initFirebaseApp = (config: FirebaseOptions) => {
	setFirestoreDatabaseId(firestoreDatabaseId);

	const firebaseApp = getApps().length > 0 ? getApp() : initializeApp(config);
	const firebaseAuth = getAuth(firebaseApp);

	firebaseAuth.setPersistence(browserLocalPersistence);

	return firebaseApp;
};

app/layout.tsx

In your app/layout.tsx add the initFirebaseApp():

import { initFirebaseApp } from '@/config/firebase';

initFirebaseApp();

function Layout({ children }: any) {
  ...
}

After fullfilling all the prerequesties, you can start using all the package features.