@fireact/core

@fireact/core

Core components and utilities for Fireact applications.

Installation

npm install @fireact/core

Setup

• Install the required peer dependencies:

npm install firebase react-router-dom i18next react-i18next @headlessui/react @heroicons/react tailwindcss i18next-browser-languagedetector

• Set up Tailwind CSS:

npx tailwindcss init

Update your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@fireact/core/dist/**/*.{js,mjs}" // Add this line
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add Tailwind directives to your CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

• Create a config.json file in your src directory:

{
  "firebase": {
    "apiKey": "your-api-key",
    "authDomain": "your-auth-domain",
    "projectId": "your-project-id",
    "storageBucket": "your-storage-bucket",
    "messagingSenderId": "your-messaging-sender-id",
    "appId": "your-app-id"
  },
  "socialLogin": {
    "google": true,
    "microsoft": false,
    "facebook": false,
    "apple": false,
    "github": false,
    "twitter": false,
    "yahoo": false
  },
  "pages": {
    "home": "/",
    "dashboard": "/dashboard",
    "profile": "/profile",
    "editName": "/edit-name",
    "editEmail": "/edit-email",
    "changePassword": "/change-password",
    "deleteAccount": "/delete-account",
    "signIn": "/signin",
    "signUp": "/signup",
    "resetPassword": "/reset-password"
  }
}

Social Login Configuration

To enable or disable social login providers:

• Set the corresponding provider to true in the socialLogin section of your config.json

• Configure the provider in your Firebase Console:

  • Go to Authentication > Sign-in method
  • Enable the providers you want to use
  • Configure the OAuth settings for each provider
  • Add the authorized domains

• Create an App.tsx file in your project:

import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import {
  AuthProvider,
  ConfigProvider,
  LoadingProvider,
  PublicLayout,
  AuthenticatedLayout,
  SignIn,
  SignUp,
  ResetPassword,
  Dashboard,
  Profile,
  EditName,
  EditEmail,
  ChangePassword,
  DeleteAccount,
  DesktopMenuItems,
  MobileMenuItems,
  Logo
} from '@fireact/core';
import config from './config.json';
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import en from './i18n/locales/en';
import zh from './i18n/locales/zh';

// Initialize i18next
i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources: {
      en: {
        translation: en
      },
      zh: {
        translation: zh
      }
    },
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false
    }
  });

function App() {
  return (
    <Router>
      <ConfigProvider config={config}>
        <AuthProvider>
          <LoadingProvider>
            <Routes>
              <Route element={
                <AuthenticatedLayout 
                  desktopMenuItems={<DesktopMenuItems />}
                  mobileMenuItems={<MobileMenuItems />}
                  logo={<Logo className="w-10 h-10" />}
                />
              }>
                <Route path={config.pages.home} element={<Navigate to={config.pages.dashboard} />} />
                <Route path={config.pages.dashboard} element={<Dashboard />} />
                <Route path={config.pages.profile} element={<Profile />} />
                <Route path={config.pages.editName} element={<EditName />} />
                <Route path={config.pages.editEmail} element={<EditEmail />} />
                <Route path={config.pages.changePassword} element={<ChangePassword />} />
                <Route path={config.pages.deleteAccount} element={<DeleteAccount />} />
              </Route>
              <Route element={<PublicLayout logo={<Logo className="w-20 h-20" />} />}>
                <Route path={config.pages.signIn} element={<SignIn />} />
                <Route path={config.pages.signUp} element={<SignUp />} />
                <Route path={config.pages.resetPassword} element={<ResetPassword />} />
              </Route>
            </Routes>
          </LoadingProvider>
        </AuthProvider>
      </ConfigProvider>
    </Router>
  );
}

export default App;

• Set up i18n:

Create a directory structure in your project:

src/
  i18n/
    locales/
      en.ts
      zh.ts

Download the language files from: https://github.com/chaoming/fireact/tree/main/src/i18n/locales

Note: The ConfigProvider will automatically initialize Firebase using the configuration from config.json. You don't need to initialize Firebase separately.

• Create index.css with Tailwind directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

• Create main.tsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Firebase Initialization and Deployment

Initialize Firebase Project

• Install Firebase CLI globally:

npm install -g firebase-tools

• Login to Firebase:

firebase login

• Initialize Firebase in your project directory:

firebase init

During the initialization process:

• Select "Hosting" when prompted for features
• Choose your Firebase project or create a new one
• Specify your build directory (usually 'dist' for Vite projects)
• Configure as a single-page application: Yes
• Don't overwrite your index.html if asked

Build and Deploy

• Build your project:

npm run build

• Deploy to Firebase Hosting:

firebase deploy

Your app will be deployed and accessible at https://your-project-id.web.app and https://your-project-id.firebaseapp.com

Available Components

• Avatar - User avatar display
• ChangePassword - Password change form
• Dashboard - User dashboard
• DeleteAccount - Account deletion interface
• DesktopMenuItems - Desktop navigation menu
• EditEmail - Email editing form
• EditName - Name editing form
• LanguageSwitcher - Language selection component
• Logo - Application logo
• Message - Message display component
• MobileMenuItems - Mobile navigation menu
• PrivateRoute - Protected route component
• Profile - User profile component
• ResetPassword - Password reset form
• SignIn - Sign in form
• SignUp - Sign up form

Contexts

• AuthContext - Firebase authentication context
• ConfigProvider - Application configuration context
• LoadingContext - Loading state management

Layouts

• AuthenticatedLayout - Layout for authenticated pages
• PublicLayout - Layout for public pages

Utils

• userUtils - User-related utility functions

License

MIT