nextemos 3.6.3 → 3.7.0

package/dist/helpers/cdn.d.ts

@@ -0,0 +1,18 @@
+interface IThumbImage {
+    width?: number;
+    height?: number;
+    path: string;
+    quality?: number;
+    format?: string;
+    options?: {
+        service?: string;
+        backColor?: string;
+        quality?: number;
+        customOptions?: string;
+    };
+}
+declare const cdn: {
+    url: string;
+    thumbImage: (props: IThumbImage) => string;
+};
+export default cdn;

package/dist/helpers/cdn.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// Ortam değişkenlerinden CDN URL'si alınıyor, tanımlı değilse varsayılan olarak 'https://images.proj-e.com' kullanılıyor
+const CDN_URL = process.env.CDN_URL || 'https://images.proj-e.com';
+// Ortam değişkenlerinden CDN sağlayıcısı alınıyor
+const CDN_PROVIDER = process.env.CDN_PROVIDER;
+// CDN işlemleri için kullanılan nesne
+const cdn = {
+    // CDN URL'sini döndüren özellik
+    url: CDN_URL,
+    // Thumbnail URL'si oluşturan fonksiyon
+    thumbImage: function (props) {
+        switch (CDN_PROVIDER) { // CDN sağlayıcısına göre işlemci fonksiyonunu seçiyor
+            case 'huawei':
+                return huaweiImageProcessor(props); // Huawei işlemcisi kullanılıyor
+            case 'medianova':
+                return medianovaImageProcessor(props); // Medianova işlemcisi kullanılıyor
+            default:
+                return thumborImageProcessor(props); // Varsayılan olarak Thumbor işlemcisi kullanılıyor
+        }
+    }
+};
+// Değerin geçerli olup olmadığını kontrol eden ve string olarak döndüren yardımcı fonksiyon
+const getValueOrDefault = (value) => (!value || value <= 0) ? "-" : value.toString(); // Geçerli değilse "-" döner, aksi halde değeri string olarak döner
+// Huawei CDN sağlayıcısı için thumbnail URL'si oluşturan fonksiyon
+const huaweiImageProcessor = (props) => {
+    var _a, _b, _c, _d, _e, _f;
+    // Varsayılan servis türü "mnresize" olarak ayarlanıyor
+    let service = "mnresize";
+    // Varsayılan genişlik ve yükseklik 0 olarak atanıyor
+    const width = (_a = props.width) !== null && _a !== void 0 ? _a : 0;
+    const height = (_b = props.height) !== null && _b !== void 0 ? _b : 0;
+    // Eğer props içinde servis belirtilmişse, o servis kullanılıyor
+    if ((_c = props.options) === null || _c === void 0 ? void 0 : _c.service)
+        service = (_d = props.options) === null || _d === void 0 ? void 0 : _d.service;
+    // Thumbnail URL'si oluşturmak için bir dizi başlatılıyor
+    const thumbUrl = new Array();
+    thumbUrl.push(CDN_URL); // CDN URL'si ekleniyor
+    thumbUrl.push(service); // Seçilen servis türü ekleniyor
+    thumbUrl.push(getValueOrDefault(width)); // Genişlik ekleniyor
+    thumbUrl.push(getValueOrDefault(height)); // Yükseklik ekleniyor
+    // Eğer arka plan rengi belirtilmişse, o da ekleniyor
+    if ((_e = props.options) === null || _e === void 0 ? void 0 : _e.backColor)
+        thumbUrl.push((_f = props.options) === null || _f === void 0 ? void 0 : _f.backColor);
+    // Görüntü yolu ekleniyor
+    thumbUrl.push(props.path);
+    // Sonuç olarak oluşturulan URL döndürülüyor
+    return thumbUrl.join('/');
+};
+// Medianova CDN sağlayıcısı için thumbnail URL'si oluşturan fonksiyon
+const medianovaImageProcessor = (props) => {
+    // Şu an için Huawei işlemcisi ile aynı işlevi görüyor
+    return huaweiImageProcessor(props);
+};
+// Thumbor CDN sağlayıcısı için thumbnail URL'si oluşturan fonksiyon
+const thumborImageProcessor = (props) => {
+    var _a, _b, _c, _d, _e, _f;
+    // Varsayılan hash değeri "unsafe" olarak ayarlanıyor
+    let hash = "unsafe";
+    // Varsayılan genişlik ve yükseklik 0 olarak atanıyor
+    const width = (_a = props.width) !== null && _a !== void 0 ? _a : 0;
+    const height = (_b = props.height) !== null && _b !== void 0 ? _b : 0;
+    // Thumbnail URL'si oluşturmak için bir dizi başlatılıyor
+    const thumbUrl = new Array();
+    thumbUrl.push(CDN_URL); // CDN URL'si ekleniyor
+    thumbUrl.push(hash); // Hash ekleniyor
+    // Genişlik veya yükseklik tanımlıysa, boyutlar ekleniyor
+    if (width > 0 || height > 0)
+        thumbUrl.push(`${props.width}x${props.height}`);
+    // Filtreler için bir dizi başlatılıyor
+    const filters = new Array();
+    // Kalite tanımlıysa ve 0'dan büyükse, kalite filtresi ekleniyor
+    if (((_c = props.options) === null || _c === void 0 ? void 0 : _c.quality) && ((_d = props.options) === null || _d === void 0 ? void 0 : _d.quality) > 0)
+        filters.push(`:quality(${props.options.quality})`);
+    // Arka plan rengi tanımlıysa, arka plan rengi filtresi ekleniyor
+    if ((_e = props.options) === null || _e === void 0 ? void 0 : _e.backColor)
+        filters.push(`:background_color(${props.options.backColor})`);
+    // Özelleştirilmiş diğer seçenekler tanımlıysa, onlar da ekleniyor
+    if ((_f = props.options) === null || _f === void 0 ? void 0 : _f.customOptions)
+        filters.push(`:(${props.options.customOptions})`);
+    // Filtreler birleştirilerek URL'ye ekleniyor
+    thumbUrl.push(filters.join(''));
+    // Ortam değişkeninden Thumbor kaynağı alınıyor, eğer tanımlıysa URL'ye ekleniyor
+    const source = process.env.THUMBOR_SOURCE || '';
+    if (source)
+        thumbUrl.push(source);
+    // Görüntü yolu ekleniyor
+    thumbUrl.push(props.path);
+    // Sonuç olarak oluşturulan URL döndürülüyor
+    return thumbUrl.join('/');
+};
+exports.default = cdn;

package/dist/helpers/index.d.ts

@@ -1,3 +1,4 @@
 export { default as fetchRequest } from './fetchRequest';
 export { default as toIntArray } from './toIntArray';
 export { default as toQueryString } from './toQueryString';
+export { default as cdn } from './cdn';

package/dist/helpers/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.toQueryString = exports.toIntArray = exports.fetchRequest = void 0;
+exports.cdn = exports.toQueryString = exports.toIntArray = exports.fetchRequest = void 0;
 /// helpers
 var fetchRequest_1 = require("./fetchRequest");
 Object.defineProperty(exports, "fetchRequest", { enumerable: true, get: function () { return __importDefault(fetchRequest_1).default; } });
@@ -11,3 +11,5 @@ var toIntArray_1 = require("./toIntArray");
 Object.defineProperty(exports, "toIntArray", { enumerable: true, get: function () { return __importDefault(toIntArray_1).default; } });
 var toQueryString_1 = require("./toQueryString");
 Object.defineProperty(exports, "toQueryString", { enumerable: true, get: function () { return __importDefault(toQueryString_1).default; } });
+var cdn_1 = require("./cdn");
+Object.defineProperty(exports, "cdn", { enumerable: true, get: function () { return __importDefault(cdn_1).default; } });

package/dist/hooks/index.d.ts

@@ -1,3 +1,3 @@
 export { default as useFetch } from './useFetch';
 export { default as useLocalStorage } from './useLocalStorage';
-export { default as useWindowSize } from './useWindowSize';
+export { default as useMediaQuery } from './useMediaQuery';

package/dist/hooks/index.js

@@ -3,11 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useWindowSize = exports.useLocalStorage = exports.useFetch = void 0;
+exports.useMediaQuery = exports.useLocalStorage = exports.useFetch = void 0;
 /// hooks
 var useFetch_1 = require("./useFetch");
 Object.defineProperty(exports, "useFetch", { enumerable: true, get: function () { return __importDefault(useFetch_1).default; } });
 var useLocalStorage_1 = require("./useLocalStorage");
 Object.defineProperty(exports, "useLocalStorage", { enumerable: true, get: function () { return __importDefault(useLocalStorage_1).default; } });
-var useWindowSize_1 = require("./useWindowSize");
-Object.defineProperty(exports, "useWindowSize", { enumerable: true, get: function () { return __importDefault(useWindowSize_1).default; } });
+var useMediaQuery_1 = require("./useMediaQuery");
+Object.defineProperty(exports, "useMediaQuery", { enumerable: true, get: function () { return __importDefault(useMediaQuery_1).default; } });

package/dist/hooks/useMediaQuery.d.ts

@@ -0,0 +1,37 @@
+interface IWindowSize {
+    width: number;
+    height: number;
+}
+/**
+ * useMediaQuery Hook
+ *
+ * @description
+ * A custom React hook that listens for the window size and checks if it matches a specified media query.
+ *
+ * This hook is particularly useful in responsive design scenarios where you need to render different components
+ * or apply different styles based on the screen size (e.g., mobile vs desktop).
+ *
+ * @param {Object} options - The options for the hook.
+ * @param {string} options.query - The media query string to be matched (e.g., '(max-width: 960px)').
+ * If not provided, it defaults to a common mobile screen width.
+ *
+ * @returns {Object} An object containing:
+ * - `width` (number): The current width of the window.
+ * - `height` (number): The current height of the window.
+ * - `isMobile` (boolean): Whether the screen matches the provided media query (typically for mobile screens).
+ *
+ * @example
+ * const { width, height, isMobile } = useMediaQuery({ query: '(max-width: 768px)' });
+ *
+ * if (isMobile) {
+ *   // Render mobile-specific component or apply mobile-specific styles
+ * } else {
+ *   // Render desktop-specific component or apply desktop-specific styles
+ * }
+ */
+declare const useMediaQuery: ({ query }?: {
+    query?: string;
+}) => IWindowSize & {
+    isMobile: boolean;
+};
+export default useMediaQuery;

package/dist/hooks/useMediaQuery.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+/**
+ * useMediaQuery Hook
+ *
+ * @description
+ * A custom React hook that listens for the window size and checks if it matches a specified media query.
+ *
+ * This hook is particularly useful in responsive design scenarios where you need to render different components
+ * or apply different styles based on the screen size (e.g., mobile vs desktop).
+ *
+ * @param {Object} options - The options for the hook.
+ * @param {string} options.query - The media query string to be matched (e.g., '(max-width: 960px)').
+ * If not provided, it defaults to a common mobile screen width.
+ *
+ * @returns {Object} An object containing:
+ * - `width` (number): The current width of the window.
+ * - `height` (number): The current height of the window.
+ * - `isMobile` (boolean): Whether the screen matches the provided media query (typically for mobile screens).
+ *
+ * @example
+ * const { width, height, isMobile } = useMediaQuery({ query: '(max-width: 768px)' });
+ *
+ * if (isMobile) {
+ *   // Render mobile-specific component or apply mobile-specific styles
+ * } else {
+ *   // Render desktop-specific component or apply desktop-specific styles
+ * }
+ */
+const useMediaQuery = ({ query = process.env.NEXT_PUBLIC_MAX_MATCHES || '(max-width: 960px)' } = {}) => {
+    const [windowSize, setWindowSize] = (0, react_1.useState)({ width: 0, height: 0 });
+    const [isMobile, setIsMobile] = (0, react_1.useState)(false);
+    /**
+     * handleResize
+     *
+     * @description
+     * Updates the window size state when the window is resized.
+     */
+    const handleResize = () => {
+        const { innerWidth, innerHeight } = window;
+        setWindowSize({ width: innerWidth, height: innerHeight });
+    };
+    /**
+     * handleChange
+     *
+     * @description
+     * Updates the isMobile state when the media query status changes.
+     */
+    const handleChange = (event) => {
+        setIsMobile(event.matches);
+    };
+    (0, react_1.useEffect)(() => {
+        if (typeof window !== 'undefined') {
+            // Initialize window size and media query match
+            handleResize();
+            const mediaQuery = window.matchMedia(query);
+            setIsMobile(mediaQuery.matches);
+            // Add event listeners
+            mediaQuery.addEventListener('change', handleChange);
+            window.addEventListener('resize', handleResize);
+            // Cleanup event listeners on component unmount
+            return () => {
+                mediaQuery.removeEventListener('change', handleChange);
+                window.removeEventListener('resize', handleResize);
+            };
+        }
+    }, [query]);
+    return Object.assign(Object.assign({}, windowSize), { isMobile });
+};
+exports.default = useMediaQuery;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextemos",
-  "version": "3.6.3",
+  "version": "3.7.0",
   "description": "For helpers and hooks used in NextJS projects",
   "main": "dist/index.js",
   "types": "./dist/index.d.ts",

package/dist/hooks/useWindowSize.d.ts

@@ -1,14 +0,0 @@
-interface IWindowSize {
-    width: number;
-    height: number;
-}
-/**
- * useWindowSize Hook
- *
- * @description
- * A custom React hook that listens for the window size and returns it.
- *
- * @returns {Object} An object containing the width and height of the window window.
- */
-declare const useWindowSize: () => IWindowSize;
-export default useWindowSize;

package/dist/hooks/useWindowSize.js

@@ -1,52 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-/**
- * useWindowSize Hook
- *
- * @description
- * A custom React hook that listens for the window size and returns it.
- *
- * @returns {Object} An object containing the width and height of the window window.
- */
-const useWindowSize = () => {
-    const [windowSize, setWindowSize] = (0, react_1.useState)({
-        width: 0,
-        height: 0,
-    });
-    /**
-     * handleResize
-     *
-     * @description
-     * A function to update the window size state when the window is resized.
-     */
-    const handleResize = () => {
-        setWindowSize({
-            width: window.innerWidth,
-            height: window.innerHeight,
-        });
-    };
-    /**
-     * useEffect Hook
-     *
-     * @description
-     * A React hook that is used for side-effects in functional components.
-     *
-     * @params {Function} () => {} A callback function that contains the side-effect logic.
-     * @params {Array} [] An array of dependencies. When empty, it means the useEffect runs once after the initial render.
-     */
-    (0, react_1.useEffect)(() => {
-        if (typeof window !== 'undefined') {
-            setWindowSize({
-                width: window.innerWidth,
-                height: window.innerHeight,
-            });
-            window.addEventListener('resize', handleResize);
-            return () => {
-                window.removeEventListener('resize', handleResize);
-            };
-        }
-    }, []);
-    return windowSize;
-};
-exports.default = useWindowSize;