nvis-fe-cms-libs 1.1.4 → 1.1.5

package/README.md

@@ -1,12 +1,240 @@
-# React + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
+# 📦 nvis-fe-cms-lib
+
+Thư viện các component React được đóng gói để sử dụng trong dự án CMS Landing Page.  
+Thay vì viết lại code cho từng section, bạn có thể import trực tiếp các component từ thư viện này.
+
+---
+
+## 🚀 Bước 1: Khởi Tạo Dự Án Thư Viện
+
+Sử dụng Vite để tạo một dự án mới:
+
+```bash
+npm create vite@latest nvis-fe-cms-lib -- --template react
+```
+
+Cài đặt dependencies:
+
+```bash
+cd nvis-fe-cms-lib
+npm install
+```
+
+---
+
+## ⚙️ Bước 2: Cấu Hình Dự Án cho Thư Viện
+
+### 1. Sửa vite.config.js
+
+```javascript
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'src/index.js'),
+      name: 'AsaCmsSections',
+      fileName: (format) => `nvis-fe-cms-libs.${format}.js`,
+      formats: ['es', 'umd']
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom'],
+      output: {
+        globals: {
+          'react': 'React',
+          'react-dom': 'ReactDOM'
+        },
+        // Đảm bảo export đúng format
+        exports: 'named'
+      }
+    },
+    // Tối ưu cho library
+    target: 'es2015',
+    sourcemap: true,
+    // Tắt minification để debug dễ hơn (có thể bật lại sau)
+    minify: false
+  },
+  // Cấu hình cho development
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src')
+    }
+  }
+});
+```
+
+### 2. Sửa package.json
+
+```json
+{
+  "name": "nvis-fe-cms-libs",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "dist/nvis-fe-cms-libs.umd.js",
+  "module": "dist/nvis-fe-cms-libs.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/nvis-fe-cms-libs.es.js",
+      "require": "./dist/nvis-fe-cms-libs.umd.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
+  "keywords": [
+    "react",
+    "cms",
+    "components",
+    "ui",
+    "tailwindcss"
+  ],
+  "author": "NVIS FE Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/NVISToolkit/nvis-fe-cms-lib.git"
+  },
+  "dependencies": {
+    "i18next": "^25.5.2",
+    "i18next-browser-languagedetector": "^8.2.0",
+    "react-i18next": "^15.7.3"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.33.0",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^5.0.0",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.33.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.17",
+    "vite": "^7.1.2"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  }
+}
+``` 
+- `exports` giúp các công cụ build tìm đúng file.  
+- `peerDependencies` đảm bảo dự án dùng thư viện có sẵn React, tránh xung đột.
+
+---
+
+## 🧩 Bước 3: Code và Cấu Trúc Component
+
+### Ví dụ Component (AboutCompanySection.jsx)
+
+```javascript
+// src/components/AboutCompanySection.jsx
+import React from "react";
+import CompanyValues from "./CompanyValues";
+
+const AboutCompanySection = ({ data, t, isDarkMode }) => {
+  // Kiểm tra t function
+  const safeT = typeof t === 'function' ? t : (key, options) => {
+    console.warn(`Translation function not provided for key: ${key}`);
+    return key;
+  };
+
+  const companyData = data?.sectionDataBindingItems?.[0]?.data;
+
+  if (!companyData) {
+    return null;
+  }
+
+  const name = companyData.name || safeT('aboutCompany.defaults.companyName');
+  const shortName = companyData.shortName || safeT('aboutCompany.defaults.shortName');
+  const shortDescription = companyData.shortDescription || safeT('aboutCompany.defaults.shortDescription');
+  const establishedYear = companyData.establishedYear || "----";
+  const experienceYears = companyData.experienceYears || "0";
+  const description = companyData.description || "";
+....
+
+export default AboutCompanySection;
+```
+
+### File Đầu Vào (src/index.js)
+
+```javascript
+// src/index.js
+import AboutCompanySection from './sections/aboutCompany/AboutCompanySection';
+import CompanyValues from './sections/aboutCompany/CompanyValues';
+
+// Export các components
+export { AboutCompanySection, CompanyValues };
+
+// Default export (tuỳ chọn)
+export default {
+  AboutCompanySection,
+  CompanyValues
+};
+```
+
+---
+
+## 📦 Bước 4: Đóng Gói và Publish lên npm
+
+1. Tăng phiên bản trong `package.json` (ví dụ 1.0.2 → 1.0.3).  
+2. Chạy build để tạo thư mục dist:
+
+```bash
+npm run build
+```
+
+3. Đăng nhập và publish:
+
+```bash
+npm login
+npm publish
+```
+
+---
+
+## 🌐 Bước 5: Sử Dụng Thư Viện trong Dự Án CMS
+
+Cài đặt:
+
+```bash
+npm install nvis-fe-cms-lib@1.0.3
+```
+
+Sử dụng trong `SectionRenderer.jsx`:
+
+```javascript
+import React from 'react';
+import { AboutCompanySection } from 'nvis-fe-cms-libs';
+import { useTheme } from './contexts/ThemeContext';
+import { useTranslation } from 'react-i18next';
+
+const SectionRenderer = ({ section }) => {
+  const { isDarkMode } = useTheme();
+  const { t } = useTranslation();
+
+  return <AboutCompanySection data={section} t={t} isDarkMode={isDarkMode} />;
+};
+```
+
+---
+
+## 🎉 Kết Luận
+
+Thư viện **nvis-fe-cms-libs** giúp tách rời các section thành module độc lập, dễ tái sử dụng và bảo trì.  
+Bạn có thể mở rộng bằng cách thêm component mới và publish phiên bản tiếp theo lên npm.

package/dist/nvis-fe-cms-libs.es.js

@@ -513,7 +513,7 @@ const AboutCompanySection = ({ data, t, isDarkMode }) => {
     console.warn(`Translation function not provided for key: ${key}`);
     return key;
   };
-  const companyData = (_b = (_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a[0]) == null ? void 0 : _b.data;
+  const companyData = ((_b = (_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.filter((item) => item == null ? void 0 : item.data)) == null ? void 0 : _b.map((item) => item.data)) || [];
   if (!companyData) {
     return null;
   }
@@ -668,7 +668,7 @@ const AboutCompanySection = ({ data, t, isDarkMode }) => {
 };
 const TimelineSection = ({ data, t, isDarkMode }) => {
   var _a;
-  const timelineData = ((_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.map((item) => item.data)) || [];
+  const timelineData = ((_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.filter((item) => item == null ? void 0 : item.data).map((item) => item.data)) || [];
   const [timelineVisible, setTimelineVisible] = useState([]);
   const timelineRefs = useRef([]);
   useEffect(() => {
@@ -967,8 +967,8 @@ function useWindowSize$1() {
   return width;
 }
 const PartnersSection = ({ data, t, isDarkMode, imageBaseUrl = "" }) => {
-  var _a;
-  const partnersData = ((_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.map((item) => item.data)) || [];
+  var _a, _b;
+  const partnersData = ((_b = (_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.filter((item) => item == null ? void 0 : item.data)) == null ? void 0 : _b.map((item) => item.data)) || [];
   const [currentPartnerSlide, setCurrentPartnerSlide] = useState(0);
   const [partnersVisible, setPartnersVisible] = useState(false);
   const partnersRef = useRef(null);
@@ -1087,7 +1087,7 @@ const MilestoneSection = ({ data, t, isDarkMode, getMilestoneTimeline }) => {
   const timelineRefs = useRef([]);
   useEffect(() => {
     const fetchMilestones = () => __async(null, null, function* () {
-      var _a;
+      var _a, _b;
       if (getMilestoneTimeline) {
         try {
           setLoading(true);
@@ -1103,7 +1103,7 @@ const MilestoneSection = ({ data, t, isDarkMode, getMilestoneTimeline }) => {
           setLoading(false);
         }
       } else {
-        const milestonesData = ((_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.map((item) => item.data)) || [];
+        const milestonesData = ((_b = (_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.filter((item) => item == null ? void 0 : item.data)) == null ? void 0 : _b.map((item) => item.data)) || [];
         setMilestones(milestonesData);
         setLoading(false);
       }
@@ -1244,12 +1244,15 @@ const MilestoneSection = ({ data, t, isDarkMode, getMilestoneTimeline }) => {
 const TestimonialsSection = ({ data, t, isDarkMode }) => {
   var _a;
   const [currentIndex, setCurrentIndex] = useState(0);
-  const testimonials = ((_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.map((item) => ({
-    quote: item.data.content,
-    author: item.data.customerName,
-    position: item.data.customerTitle || t("testimonials.fallback.defaultPosition"),
-    company: item.data.customerCompany || ""
-  }))) || [];
+  const testimonials = ((_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.filter((item) => item == null ? void 0 : item.data).map((item) => {
+    var _a2, _b, _c, _d;
+    return {
+      quote: ((_a2 = item.data) == null ? void 0 : _a2.content) || "",
+      author: ((_b = item.data) == null ? void 0 : _b.customerName) || "",
+      position: ((_c = item.data) == null ? void 0 : _c.customerTitle) || t("testimonials.fallback.defaultPosition"),
+      company: ((_d = item.data) == null ? void 0 : _d.customerCompany) || ""
+    };
+  })) || [];
   const fallbackTestimonials = [
     {
       quote: t("testimonials.fallback.testimonial1.quote"),
@@ -2313,7 +2316,8 @@ const ContactFormSection = ({ data, t, isDarkMode, consultationRequestService })
   ] }) }) });
 };
 const ContactInfoSection = ({ data, t, isDarkMode }) => {
-  const contactData = (data == null ? void 0 : data.sectionDataBindingItems) || [];
+  var _a;
+  const contactData = ((_a = data == null ? void 0 : data.sectionDataBindingItems) == null ? void 0 : _a.filter((item) => item)) || [];
   if (!contactData.length) return null;
   return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: `py-16 ${isDarkMode ? "bg-gray-900" : "bg-slate-50"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-12", children: [
@@ -2328,14 +2332,14 @@ const ContactInfoSection = ({ data, t, isDarkMode }) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-lg max-w-3xl mx-auto ${isDarkMode ? "text-gray-300" : "text-slate-600"}`, children: t("contact.team.description") || "Chúng tôi luôn sẵn sàng hỗ trợ bạn với đội ngũ chuyên nghiệp và giàu kinh nghiệm" })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid md:grid-cols-2 lg:grid-cols-3 gap-8", children: contactData.map((contact, index2) => {
-      var _a;
+      var _a2;
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "div",
         {
           className: `rounded-2xl p-8 shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1 border ${isDarkMode ? "bg-gray-800 border-gray-700" : "bg-white border-slate-200"}`,
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center mb-6", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-20 h-20 rounded-full mx-auto mb-4 flex items-center justify-center text-2xl font-bold text-white bg-gradient-to-br from-indigo-500 to-purple-600", children: ((_a = contact.data.name) == null ? void 0 : _a.charAt(0)) || "A" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-20 h-20 rounded-full mx-auto mb-4 flex items-center justify-center text-2xl font-bold text-white bg-gradient-to-br from-indigo-500 to-purple-600", children: ((_a2 = contact.data.name) == null ? void 0 : _a2.charAt(0)) || "A" }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: `text-xl font-bold mb-2 ${isDarkMode ? "text-white" : "text-slate-800"}`, children: contact.data.name }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `inline-block px-3 py-1 rounded-full text-sm font-semibold ${isDarkMode ? "bg-indigo-900/50 text-indigo-300" : "bg-indigo-50 text-indigo-700"}`, children: contact.data.position })
             ] }),