Install

npm install @tnbt/react-favorit-style

Demo

Clone and run "npm run dev". Access "localhost:5173/test" or github page https://tiennguyen12g.github.io/Vite-React-TS-Template/test (/auth and /profile) to view style.

Usage

1. Import the CSS (Required)

In your main entry file (e.g., main.tsx, App.tsx, or index.tsx), import the styles:

// Recommended: Import the styles module (loads CSS automatically)
import "@tnbt/react-favorit-style/styles";

// OR import CSS directly using the styles.css export
import "@tnbt/react-favorit-style/styles.css";

2. Import Components

import { ButtonCommon, StatusModal, ButtonBlur, icons } from "@tnbt/react-favorit-style";

function App() {
  return (
    <div>
      <ButtonCommon>Click me</ButtonCommon>
      <ButtonBlur>Blur Button</ButtonBlur>
    </div>
  );
}

3. Configure Tailwind CSS (Required)

Your project needs Tailwind CSS v4 configured. Make sure you have:

1. Install Tailwind CSS v4:

npm install tailwindcss@next @tailwindcss/vite

2. Add Tailwind to your Vite config (vite.config.ts):

import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [
    // ... other plugins
    tailwindcss(),
  ],
});

3. Create a CSS file (e.g., src/index.css) with:

@import "tailwindcss";

4. Fix TypeScript CSS import errors (if you get CSS import errors):

Important: This must be done in YOUR project (the consumer), not in the package.

Even with "types": ["vite/client"] in tsconfig.json, TypeScript may still need explicit CSS declarations.

Solution 1: Create src/vite-env.d.ts in YOUR project root:

/// <reference types="vite/client" />

declare module "*.css" {
  const content: string;
  export default content;
}

Solution 2: Make sure your tsconfig.json includes it:

{
  "include": ["src", "src/vite-env.d.ts"],
  "compilerOptions": {
    "types": ["vite/client"]
  }
}

Solution 3: If still not working, restart TypeScript server:

• VS Code: Ctrl+Shift+P → "TypeScript: Restart TS Server"
• Or restart your IDE

Note: The package's vite-env.d.ts won't help - you need your own in your project.

Available Components

• Buttons: ButtonCommon, ButtonBlur, ButtonBorderGradient, GradientButton, GroupButton
• Modals: StatusModal, ConfirmDelete, ConfirmLogout, CommonModal, AnimatedInfoModal
• Forms: Input, Search, Select, SelectGray, Dropdown
• Tables: TableCommon, TableWithDragColumn, TableWithResizeColumn
• Icons: icons, iconSizeClasses
• Other: Notification, Modal

Internationalization (i18n)

This package uses react-i18next for internationalization. Components require your project to provide react-i18next and i18next as peer dependencies.

Prerequisites

Install react-i18next in your project:

npm install react-i18next i18next

Setup react-i18next

1. Initialize react-i18next in your project:

// src/i18n/i18next.ts
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import enTranslations from './locales/en.json';
import viTranslations from './locales/vi.json';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: enTranslations },
      vi: { translation: viTranslations },
    },
    lng: 'en',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

2. Import i18next initialization in your main file:

// main.tsx or App.tsx
import './i18n/i18next'; // Initialize react-i18next
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n/i18next';

function App() {
  return (
    <I18nextProvider i18n={i18n}>
      <YourApp />
    </I18nextProvider>
  );
}

Add Package Translations

Add translation keys to your translation files:

// src/i18n/locales/en.json
{
  "confirmDelete": {
    "title": "Delete",
    "areYouSure": "Are you sure?",
    "warning": "Warning:",
    "warningMessage": "This action cannot be undone. This will permanently delete.",
    "action": {
      "cancel": "Cancel",
      "delete": "Delete"
    }
  },
  "button": {
    "delete": "Delete",
    "cancel": "Cancel",
    "save": "Save"
  }
}

Use UI_KEYS constants from the package:

import { UI_KEYS, ConfirmDelete } from "@tnbt/react-favorit-style";
import { useTranslation } from "react-i18next";

function MyComponent() {
  const { t } = useTranslation();
  
  return (
    <>
      {/* Use UI_KEYS for type-safe translation keys */}
      <ConfirmDelete 
        isModalOpen={true}
        setIsModalOpen={() => {}}
        contentKey={UI_KEYS.confirmDelete.title}
      />
      
      {/* Button with translation */}
      <ButtonCommon>
        {t(UI_KEYS.button.delete, "Delete")}
      </ButtonCommon>
    </>
  );
}

Available Translation Keys

Import UI_KEYS to see all available translation keys:

import { UI_KEYS } from "@tnbt/react-favorit-style";

// Available keys:
// - UI_KEYS.confirmDelete.*
// - UI_KEYS.confirmLogout.*
// - UI_KEYS.confirmResetSettings.*
// - UI_KEYS.statusModal.*
// - UI_KEYS.commonModal.*
// - UI_KEYS.animatedInfoModal.*
// - UI_KEYS.button.*

Translating Dynamic Content

For dynamic content with parameters:

import { ConfirmDelete, UI_KEYS } from "@tnbt/react-favorit-style";
import { useTranslation } from "react-i18next";

function App() {
  const { t } = useTranslation();
  
  return (
    <ConfirmDelete 
      isModalOpen={true}
      setIsModalOpen={() => {}}
      contentKey="content.deleteOrders"
      contentParams={{ count: 5 }}
    />
  );
}

Add to your translations:

{
  "content": {
    "deleteOrders": "Delete {{count}} orders"
  }
}

Fallback Values

All components have English fallback values, so they work even without translations:

// Works without translations - uses fallback "Delete"
<ConfirmDelete 
  isModalOpen={true}
  setIsModalOpen={() => {}}
  contentKey={UI_KEYS.confirmDelete.title}
/>

// Or with custom fallback
const { t } = useTranslation();
t(UI_KEYS.button.delete, "Delete") // Uses "Delete" if translation missing