vajrazenui
Version:
VajraZenUI: Empower your React projects with a dynamic component library developed in React.JS, TypeScript and Styled-Components.
170 lines (148 loc) • 19.6 kB
JavaScript
/*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("react"), require("react-dom"));
else if(typeof define === 'function' && define.amd)
define(["react", "react-dom"], factory);
else {
var a = typeof exports === 'object' ? factory(require("react"), require("react-dom")) : factory(root["react"], root["react-dom"]);
for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
}
})(this, (__WEBPACK_EXTERNAL_MODULE_react__, __WEBPACK_EXTERNAL_MODULE_react_dom__) => {
return /******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ "./src/App.tsx":
/*!*********************!*\
!*** ./src/App.tsx ***!
\*********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ App: () => (/* binding */ App)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _hooks_themes_fonts_useFonts__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./hooks/themes/fonts/useFonts */ \"./src/hooks/themes/fonts/useFonts.ts\");\n/**\n * This file has been created by the create-react-app on Tuesday, 19 March 2024.\n */\n\n\n\n\n/**\n * @author Reginald Sahil Chand\n * @email Developer.ReginaldSahilChand@gmail.com\n *\n * @functionFirstCreated Tuesday, 19 March 2024\n * @functionLastModified Tuesday, 19 March 2024\n *\n * @version 0.1.0\n *\n * @description Render the overall VajraZenUI, Execute the main application.\n *\n * @returns {React Element} App - The Main component to render UI component(S).\n */\nconst App = () => {\n const [fontFamily] = (0,_hooks_themes_fonts_useFonts__WEBPACK_IMPORTED_MODULE_1__.useFonts)({\n fontName: 'Noto Sans Display'\n });\n if (fontFamily !== '') {\n console.log(fontFamily);\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"h1\", null, \"Welcome To VajraZenUI\");\n};\n\n//# sourceURL=webpack://vajrazenui/./src/App.tsx?");
/***/ }),
/***/ "./src/errors/displayConsoleErrorsWarningsAndLogs.ts":
/*!***********************************************************!*\
!*** ./src/errors/displayConsoleErrorsWarningsAndLogs.ts ***!
\***********************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ displayConsoleErrorsWarningsAndLogs: () => (/* binding */ displayConsoleErrorsWarningsAndLogs)\n/* harmony export */ });\n/**\n * This file has been created by Reginald Sahil Chand on Friday, 22 March 2024.\n */\n\n/**\n * @author Reginald Sahil Chand\n * @email Developer.ReginaldSahilChand@gmail.com\n *\n * @typesFirstCreated Friday, 22 March 2024\n * @typesLastModified Friday, 22 March 2024\n *\n * @version 0.1.0\n *\n * @property {('error' | 'warn' | 'log')} errorType - Custom error types that correspond to console methods.\n * @property {string} errorMessage - Error message provided by the developer.\n * @property {(any | unknown)} [errorDetails] - Actual Error.\n */\n\n/**\n * @author Reginald Sahil Chand\n * @email Developer.ReginaldSahilChand@gmail.com\n *\n * @functionFirstCreated Friday, 22 March 2024\n * @functionLastModified Friday, 22 March 2024\n *\n * @version 0.1.0\n *\n * @description Display Errors, Warnings and Log messages based on the provided props.\n *\n * @type {DisplayConsoleErrorsWarningsAndLogsTypes}\n * @param {DisplayConsoleErrorsWarningsAndLogsTypes} props - Props containing errorType, errorMessage, and optional errorDetails.\n */\nconst displayConsoleErrorsWarningsAndLogs = ({\n errorType,\n errorMessage,\n errorDetails\n}) => {\n try {\n switch (errorType) {\n case 'error':\n console.error(`Alert From VajraZenUI: ${errorMessage} ${errorDetails}`);\n break;\n case 'warn':\n console.warn(`Alert From VajraZenUI: ${errorMessage} ${errorDetails}`);\n break;\n case 'log':\n console.log(`Alert From VajraZenUI: ${errorMessage} ${errorDetails}`);\n break;\n default:\n console.log(`Alert From VajraZenUI: ${errorMessage} ${errorDetails}`);\n }\n } catch (error) {\n console.error(`Alert From VajraZenUI: ${error}`);\n }\n};\n\n//# sourceURL=webpack://vajrazenui/./src/errors/displayConsoleErrorsWarningsAndLogs.ts?");
/***/ }),
/***/ "./src/hooks/themes/fonts/useFonts.ts":
/*!********************************************!*\
!*** ./src/hooks/themes/fonts/useFonts.ts ***!
\********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ useFonts: () => (/* binding */ useFonts)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _errors_displayConsoleErrorsWarningsAndLogs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../errors/displayConsoleErrorsWarningsAndLogs */ \"./src/errors/displayConsoleErrorsWarningsAndLogs.ts\");\n/* eslint-disable @typescript-eslint/indent */\n\n/**\n * This file has been created by Reginald Sahil Chand on Friday, 22 March 2024.\n */\n\n\n\n\n/**\n * @author Reginald Sahil Chand\n * @email Developer.ReginaldSahilChand@gmail.com\n *\n * @typesFirstCreated Friday, 22 March 2024\n * @typesLastModified Friday, 22 March 2024\n *\n * @version 0.1.0\n *\n * @property {string} fontName - The specified font family.\n */\n\n/**\n * @author Reginald Sahil Chand\n * @email Developer.ReginaldSahilChand@gmail.com\n *\n * @typesFirstCreated Friday, 22 March 2024\n * @typesLastModified Friday, 22 March 2024\n *\n * @version 0.1.0\n *\n * @property {Response} response - Fetched Google font data from the Google fonts API.\n * @property {React.Dispatch} - Set state action (useState hook) that stores the required fontData.\n */\n\n/**\n * @author Reginald Sahil Chand\n * @email Developer.ReginaldSahilChand@gmail.com\n *\n * @typesFirstCreated Friday, 22 March 2024\n * @typesLastModified Friday, 22 March 2024\n *\n * @version 0.1.0\n *\n * @property {unknown} error - Reported errors.\n */\n\n/**\n * @author Reginald Sahil Chand\n * @email Developer.ReginaldSahilChand@gmail.com\n *\n * @typesFirstCreated Friday, 22 March 2024\n * @typesLastModified Friday, 22 March 2024\n *\n * @version 0.1.0\n *\n * @description Communicate with the Google Fonts Api and fetch the required fonts data\n * \t\t\t\tbased on the given fontName.\n * \t\t\t\tCache the fetched font data for 1 hour (3600 seconds).\n *\n * @type {UseFontsType}\n *\n * @param {string} fontName - The specified font family.\n *\n * @returns {Response} - Fetched Google font data from the Google fonts API.\n */\nconst fetchGoogleFont = async ({\n fontName\n}) => {\n const googleApiEndPoint = 'https://www.googleapis.com/webfonts/v1/webfonts?';\n const getVariableFont = 'capability=VF&';\n const getFontFamily = `family=${fontName}&`;\n // Const setGoogleFontsApiKey = `key=${process.env.REACT_APP_GOOGLE_FONTS_API_KEY}`;\n const setGoogleFontsApiKey = 'key=AIzaSyAzEVvu8U0AQnosEPd_x1YFB5y3p0eEmTg';\n const googleApiEndPointUrl = `${googleApiEndPoint}${getVariableFont}${getFontFamily}${setGoogleFontsApiKey}`;\n const response = await fetch(googleApiEndPointUrl, {\n headers: {\n 'Cache-Control': 'public, max-age=3600'\n }\n });\n return response;\n};\n\n/**\n * @author Reginald Sahil Chand\n * @email Developer.ReginaldSahilChand@gmail.com\n *\n * @typesFirstCreated Friday, 22 March 2024\n * @typesLastModified Friday, 22 March 2024\n *\n * @version 0.1.0\n *\n * @description Retrieve the fetched font data and set the font data into setFontData setState method.\n * @abstract The prop response is retrieved from fetchGoogleFont function.\n * \t\t\t The prop setFontData is assigned the font data in useFonts hook.\n * \t\t\t The mentioned functions are then called inside useFonts hook and are passed with the required values.\n *\n * @type {SetGoogleFontTypes}\n *\n * @property {Response} response - Fetched Google font data from the Google fonts API.\n * @property {React.Dispatch} - Set state action (useState hook) that stores the required fontData.\n */\nconst setGoogleFont = async ({\n response,\n setFontData\n}) => {\n const responseData = await response?.json();\n if (response.ok) {\n const family = responseData.items[0]?.family;\n const variants = responseData.items[0]?.variants;\n const files = responseData.items[0]?.files;\n if (family && family.length > 0 && variants && variants.length > 0 && files) {\n setFontData({\n fontFamily: family,\n fontVariants: variants,\n fontFiles: files\n });\n } else {\n (0,_errors_displayConsoleErrorsWarningsAndLogs__WEBPACK_IMPORTED_MODULE_1__.displayConsoleErrorsWarningsAndLogs)({\n errorType: 'error',\n errorMessage: 'Invalid Font Data Received From Google Fonts API.',\n errorDetails: responseData.items[0]\n });\n }\n } else {\n (0,_errors_displayConsoleErrorsWarningsAndLogs__WEBPACK_IMPORTED_MODULE_1__.displayConsoleErrorsWarningsAndLogs)({\n errorType: 'error',\n errorMessage: 'Could Not Fetch Google Font, Hence Using Fallback Font Family And Font Variants.',\n errorDetails: `Error Status Code: ${response.status}`\n });\n setFontData({\n fontFamily: '',\n fontVariants: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],\n fontFiles: {}\n });\n }\n};\n\n/**\n * @author Reginald Sahil Chand\n * @email Developer.ReginaldSahilChand@gmail.com\n *\n * @typesFirstCreated Friday, 22 March 2024\n * @typesLastModified Friday, 22 March 2024\n *\n * @version 0.1.0\n *\n * @description Group related errors in this function and invoke else where in program as required\n * \t\t\t\tto avoid code redundancy.\n *\n * @param {unknown} error - Reported errors.\n */\nconst setAndDisplaySimilarErrorMessages = ({\n error\n}) => {\n (0,_errors_displayConsoleErrorsWarningsAndLogs__WEBPACK_IMPORTED_MODULE_1__.displayConsoleErrorsWarningsAndLogs)({\n errorType: 'error',\n errorMessage: 'An Error Has Occurred While Trying To Fetch Google Fonts:',\n errorDetails: error\n });\n};\n\n/**\n * @author Reginald Sahil Chand\n * @email Developer.ReginaldSahilChand@gmail.com\n *\n * @functionFirstCreated Friday, 22 March 2024\n * @functionLastModified Friday, 22 March 2024\n *\n * @version 0.1.0\n *\n * @description Fetch Google font data, store the fetched data into the required state\n * \t\t\t\tand return the font data state.\n *\n * @type {UseFontsType}\n *\n * @returns {Array<string | string[] | Record<string, string>>} [fontName, fontData]\n * \t\t\twhich contains Google font family, font variants and font files.\n */\nconst useFonts = ({\n fontName\n}) => {\n const [fontData, setFontData] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({\n fontFamily: '',\n fontVariants: [''],\n fontFiles: {}\n });\n const getGoogleFont = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(async () => {\n try {\n if (navigator.onLine) {\n const response = await fetchGoogleFont({\n fontName\n });\n setGoogleFont({\n response,\n setFontData\n });\n } else {\n (0,_errors_displayConsoleErrorsWarningsAndLogs__WEBPACK_IMPORTED_MODULE_1__.displayConsoleErrorsWarningsAndLogs)({\n errorType: 'warn',\n errorMessage: 'You Are Offline (Not Connected To The Internet) Hence Using Fallback Font Family And Font Variants'\n });\n setFontData({\n fontFamily: '',\n fontVariants: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],\n fontFiles: {}\n });\n }\n } catch (error) {\n setAndDisplaySimilarErrorMessages({\n error\n });\n }\n }, []);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n getGoogleFont().catch(error => {\n setAndDisplaySimilarErrorMessages({\n error\n });\n });\n }, [fontName]);\n return (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => [fontData.fontFamily, fontData.fontVariants, fontData.fontFiles], [fontData.fontFamily, fontData.fontVariants, fontData.fontFiles]);\n};\n\n//# sourceURL=webpack://vajrazenui/./src/hooks/themes/fonts/useFonts.ts?");
/***/ }),
/***/ "./src/index.tsx":
/*!***********************!*\
!*** ./src/index.tsx ***!
\***********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom_client__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom/client */ \"./node_modules/react-dom/client.js\");\n/* harmony import */ var _App__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./App */ \"./src/App.tsx\");\n/**\n * This file has been created by the create-react-app on Tuesday, 19 March 2024.\n */\n\n\n\n\nconst rootElement = document.getElementById('root');\nif (rootElement) {\n const root = react_dom_client__WEBPACK_IMPORTED_MODULE_1__.createRoot(rootElement);\n try {\n root.render( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().StrictMode), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_App__WEBPACK_IMPORTED_MODULE_2__.App, null)));\n } catch (error) {\n console.log('first');\n }\n} else {\n console.error('Root element not found!');\n}\n\n//# sourceURL=webpack://vajrazenui/./src/index.tsx?");
/***/ }),
/***/ "./node_modules/react-dom/client.js":
/*!******************************************!*\
!*** ./node_modules/react-dom/client.js ***!
\******************************************/
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
eval("\n\nvar m = __webpack_require__(/*! react-dom */ \"react-dom\");\nif (false) {} else {\n var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;\n exports.createRoot = function(c, o) {\n i.usingClientEntryPoint = true;\n try {\n return m.createRoot(c, o);\n } finally {\n i.usingClientEntryPoint = false;\n }\n };\n exports.hydrateRoot = function(c, h, o) {\n i.usingClientEntryPoint = true;\n try {\n return m.hydrateRoot(c, h, o);\n } finally {\n i.usingClientEntryPoint = false;\n }\n };\n}\n\n\n//# sourceURL=webpack://vajrazenui/./node_modules/react-dom/client.js?");
/***/ }),
/***/ "react":
/*!************************!*\
!*** external "react" ***!
\************************/
/***/ ((module) => {
module.exports = __WEBPACK_EXTERNAL_MODULE_react__;
/***/ }),
/***/ "react-dom":
/*!****************************!*\
!*** external "react-dom" ***!
\****************************/
/***/ ((module) => {
module.exports = __WEBPACK_EXTERNAL_MODULE_react_dom__;
/***/ })
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/************************************************************************/
/******/ /* webpack/runtime/compat get default export */
/******/ (() => {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = (module) => {
/******/ var getter = module && module.__esModule ?
/******/ () => (module['default']) :
/******/ () => (module);
/******/ __webpack_require__.d(getter, { a: getter });
/******/ return getter;
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/define property getters */
/******/ (() => {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = (exports, definition) => {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ (() => {
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ })();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = (exports) => {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ })();
/******/
/************************************************************************/
/******/
/******/ // startup
/******/ // Load entry module and return exports
/******/ // This entry module can't be inlined because the eval devtool is used.
/******/ var __webpack_exports__ = __webpack_require__("./src/index.tsx");
/******/
/******/ return __webpack_exports__;
/******/ })()
;
});