npm - @orbe-agro/client-core - Versions diffs - 3.4.12 → 3.4.13 - Mend

@orbe-agro/client-core 3.4.12 → 3.4.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1447) hide show

package/dist/lib/@ecme/views/guide/Documentations/components/DevelopmentServer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DevelopmentServer.js","sources":["../../../../../../../lib/@ecme/views/guide/Documentations/components/DevelopmentServer.tsx"],"sourcesContent":["import SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\n\nconst DevelopmentServer = () => {\n return (\n <>\n <p>\n Once you've installed all the dependencies, you can start\n the development server by running the following command in your\n terminal:\n </p>\n <SyntaxHighlighter>npm run dev</SyntaxHighlighter>\n <p>\n Open your browser and go to{' '}\n <a\n href=\"http://localhost:5173/\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n http://localhost:5173/\n </a>\n . The app will automatically reload whenever you make changes to\n the source files.\n </p>\n </>\n )\n}\n\nexport default DevelopmentServer\n"],"names":["DevelopmentServer","jsxs","Fragment","jsx","SyntaxHighlighter"],"mappings":";;AAEA,MAAMA,IAAoB,~~MAGd~~,gBAAAC,EAAAC,GAAA,~~EAAA~~,UAAA;AAAA,EAAA,gBAAAC,EAAC,OAAE,~~UAIH~~,sIAAA,~~CAAA~~;AAAA,EACA,gBAAAA,EAACC,KAAkB,~~UAAW~~,cAAA,~~CAAA~~;AAAA,oBAC7B,~~KAAE~~,~~EAAA~~,UAAA;AAAA,IAAA;AAAA,IAC6B;AAAA,IAC5B,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,QAAO;AAAA,QACP,KAAI;AAAA,QACP,UAAA;AAAA,MAAA;AAAA,~~IAED~~;AAAA,~~IAAI~~;AAAA,EAAA,~~EAGR~~,~~CAAA~~;AAAA,GACJ;"}
1	+ {"version":3,"file":"DevelopmentServer.js","sources":["../../../../../../../lib/@ecme/views/guide/Documentations/components/DevelopmentServer.tsx"],"sourcesContent":["import SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\n\nconst DevelopmentServer = () => {\n return (\n <>\n <p>\n Once you've installed all the dependencies, you can start\n the development server by running the following command in your\n terminal:\n </p>\n <SyntaxHighlighter>npm run dev</SyntaxHighlighter>\n <p>\n Open your browser and go to{' '}\n <a\n href=\"http://localhost:5173/\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n http://localhost:5173/\n </a>\n . The app will automatically reload whenever you make changes to\n the source files.\n </p>\n </>\n )\n}\n\nexport default DevelopmentServer\n"],"names":["DevelopmentServer","jsxs","Fragment","jsx","SyntaxHighlighter"],"mappings":";;AAEA,MAAMA,IAAoB,MAElB,gBAAAC,EAAAC,GAAA,EACI,UAAA;AAAA,EAAA,gBAAAC,EAAC,OAAE,UAAA,sIAAA,CAIH;AAAA,EACA,gBAAAA,EAACC,KAAkB,UAAA,cAAA,CAAW;AAAA,oBAC7B,KAAA,EAAE,UAAA;AAAA,IAAA;AAAA,IAC6B;AAAA,IAC5B,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,QAAO;AAAA,QACP,KAAI;AAAA,QACP,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEG;AAAA,EAAA,EAAA,CAGR;AAAA,GACJ;"}

package/dist/lib/@ecme/views/guide/Documentations/components/Direction.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Direction.js","sources":["../../../../../../../lib/@ecme/views/guide/Documentations/components/Direction.tsx"],"sourcesContent":["import SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\n\nconst Direction = () => {\n return (\n <>\n <p>\n To initialize the app direction, simply set{' '}\n <code>direction</code> field as\n <code>'ltr'</code> or <code>'rtl'</code> in{' '}\n <code>src/configs/theme.config.ts</code>. For example:\n </p>\n <SyntaxHighlighter language=\"ts\">{`export const themeConfig = {\n\t...\n\tdirection: 'rtl'\n}`}</SyntaxHighlighter>\n <div className=\"mt-10\" id=\"hook\">\n <h5>Hook</h5>\n <p className=\"mt-1\">\n You can access or update the direction in a component via\n our prepared hook.\n </p>\n <SyntaxHighlighter language=\"tsx\">{`import React from 'react'\nimport Button from '@/components/ui/Button'\nimport InputGroup from '@/components/ui/InputGroup'\nimport useDirection from '@/utils/hooks/useDirection'\nimport type { Direction } from '@/@types/theme';\n\nconst dirList = [\n\t{ value: 'ltr', label: 'LTR' },\n\t{ value: 'rtl', label: 'RTL' }\n]\n\nconst DirectionSwitcher = () => {\n\n\tconst [direction, setDirection] = useDirection()\n\n\tconst onDirChange = (val: Direction) => {\n\t\tsetDirection(val)\n\t}\n\n\treturn (\n\t\t<InputGroup size=\"sm\">\n\t\t\t{\n\t\t\t\tdirList.map(dir => (\n\t\t\t\t\t<Button \n\t\t\t\t\t\tkey={dir.value}\n\t\t\t\t\t\tactive={direction === dir.value}\n\t\t\t\t\t\tonClick={() => onDirChange(dir.value)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{dir.label}\n\t\t\t\t\t</Button>\n\t\t\t\t))\n\t\t\t}\n\t\t</InputGroup>\n\t)\n}\n\nexport default DirectionSwitcher\n`}</SyntaxHighlighter>\n </div>\n </>\n )\n}\n\nexport default Direction\n"],"names":["Direction","jsxs","Fragment","jsx","SyntaxHighlighter"],"mappings":";;AAEA,MAAMA,IAAY,~~MAGN~~,gBAAAC,EAAAC,GAAA,~~EAAA~~,UAAA;AAAA,EAAA,gBAAAD,EAAC,~~KAAE~~,~~EAAA~~,UAAA;AAAA,IAAA;AAAA,IAC6C;AAAA,IAC5C,gBAAAE,EAAC,UAAK,~~UAAS~~,YAAA,~~CAAA~~;AAAA,IAAO;AAAA,IACtB,gBAAAA,EAAC,UAAK,~~UAAe~~,QAAA,~~CAAA~~;AAAA,IAAO;AAAA,IAAI,gBAAAA,EAAC,UAAK,~~UAAe~~,QAAA,~~CAAA~~;AAAA,IAAO;AAAA,IAAI;AAAA,IAChE,gBAAAA,EAAC,UAAK,~~UAA2B~~,8BAAA,~~CAAA~~;AAAA,IAAO;AAAA,EAAA,GAC5C;AAAA,EACA,gBAAAA,EAACC,~~GAAkB~~,~~EAAA~~,UAAS,MAAM,UAAA;AAAA;AAAA;AAAA,IAG3C;AAAA,~~EACU~~,gBAAAH,~~EAAA~~,OAAA,EAAI,WAAU,SAAQ,IAAG,QACtB,UAAA;AAAA,IAAA,gBAAAE,EAAC,QAAG,~~UAAI~~,OAAA,~~CAAA~~;AAAA,~~IACP~~,gBAAAA,~~EAAA~~,KAAA,EAAE,WAAU,QAAO,~~UAGpB~~,~~gFAAA~~;AAAA,IACA,gBAAAA,EAACC,~~GAAkB~~,~~EAAA~~,UAAS,OAAO,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAqCjD~~,~~CAAA~~;AAAA,EAAA,~~EACU~~,~~CAAA~~;AAAA,GACJ;"}
1	+ {"version":3,"file":"Direction.js","sources":["../../../../../../../lib/@ecme/views/guide/Documentations/components/Direction.tsx"],"sourcesContent":["import SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\n\nconst Direction = () => {\n return (\n <>\n <p>\n To initialize the app direction, simply set{' '}\n <code>direction</code> field as\n <code>'ltr'</code> or <code>'rtl'</code> in{' '}\n <code>src/configs/theme.config.ts</code>. For example:\n </p>\n <SyntaxHighlighter language=\"ts\">{`export const themeConfig = {\n\t...\n\tdirection: 'rtl'\n}`}</SyntaxHighlighter>\n <div className=\"mt-10\" id=\"hook\">\n <h5>Hook</h5>\n <p className=\"mt-1\">\n You can access or update the direction in a component via\n our prepared hook.\n </p>\n <SyntaxHighlighter language=\"tsx\">{`import React from 'react'\nimport Button from '@/components/ui/Button'\nimport InputGroup from '@/components/ui/InputGroup'\nimport useDirection from '@/utils/hooks/useDirection'\nimport type { Direction } from '@/@types/theme';\n\nconst dirList = [\n\t{ value: 'ltr', label: 'LTR' },\n\t{ value: 'rtl', label: 'RTL' }\n]\n\nconst DirectionSwitcher = () => {\n\n\tconst [direction, setDirection] = useDirection()\n\n\tconst onDirChange = (val: Direction) => {\n\t\tsetDirection(val)\n\t}\n\n\treturn (\n\t\t<InputGroup size=\"sm\">\n\t\t\t{\n\t\t\t\tdirList.map(dir => (\n\t\t\t\t\t<Button \n\t\t\t\t\t\tkey={dir.value}\n\t\t\t\t\t\tactive={direction === dir.value}\n\t\t\t\t\t\tonClick={() => onDirChange(dir.value)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{dir.label}\n\t\t\t\t\t</Button>\n\t\t\t\t))\n\t\t\t}\n\t\t</InputGroup>\n\t)\n}\n\nexport default DirectionSwitcher\n`}</SyntaxHighlighter>\n </div>\n </>\n )\n}\n\nexport default Direction\n"],"names":["Direction","jsxs","Fragment","jsx","SyntaxHighlighter"],"mappings":";;AAEA,MAAMA,IAAY,MAEV,gBAAAC,EAAAC,GAAA,EACI,UAAA;AAAA,EAAA,gBAAAD,EAAC,KAAA,EAAE,UAAA;AAAA,IAAA;AAAA,IAC6C;AAAA,IAC5C,gBAAAE,EAAC,UAAK,UAAA,YAAA,CAAS;AAAA,IAAO;AAAA,IACtB,gBAAAA,EAAC,UAAK,UAAA,QAAA,CAAe;AAAA,IAAO;AAAA,IAAI,gBAAAA,EAAC,UAAK,UAAA,QAAA,CAAe;AAAA,IAAO;AAAA,IAAI;AAAA,IAChE,gBAAAA,EAAC,UAAK,UAAA,8BAAA,CAA2B;AAAA,IAAO;AAAA,EAAA,GAC5C;AAAA,EACA,gBAAAA,EAACC,GAAA,EAAkB,UAAS,MAAM,UAAA;AAAA;AAAA;AAAA,IAG3C;AAAA,EACS,gBAAAH,EAAC,OAAA,EAAI,WAAU,SAAQ,IAAG,QACtB,UAAA;AAAA,IAAA,gBAAAE,EAAC,QAAG,UAAA,OAAA,CAAI;AAAA,IACR,gBAAAA,EAAC,KAAA,EAAE,WAAU,QAAO,UAAA,gFAGpB;AAAA,IACA,gBAAAA,EAACC,GAAA,EAAkB,UAAS,OAAO,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA,CAqCjD;AAAA,EAAA,EAAA,CACU;AAAA,GACJ;"}

package/dist/lib/@ecme/views/guide/Documentations/components/FirebaseIntegration.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FirebaseIntegration.js","sources":["../../../../../../../lib/@ecme/views/guide/Documentations/components/FirebaseIntegration.tsx"],"sourcesContent":["/* eslint-disable react/no-unescaped-entities */\nimport SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\n\nconst FirebaseIntegration = () => {\n return (\n <>\n <p>\n Firebase is a platform developed by Google that provides a wide\n range of tools and services to help you build mobile and web\n applications. It offers backend services like authentication,\n real-time databases, cloud storage, and hosting, making it a\n powerful choice for developers.\n </p>\n <p>\n Our template includes basic Firebase integration out of the box.\n If your application uses Firebase, this guide will help you\n seamlessly incorporate Firebase into the template.\n </p>\n\n <div className=\"mt-10\" id=\"prerequisites\">\n <h5>Prerequisites</h5>\n <ul className=\"mt-1\">\n <li>\n <p>\n Create a Firebase project in the Firebase Console.\n </p>\n <ol>\n <li>\n Go to the{' '}\n <a\n target=\"_new\"\n href=\"https://console.firebase.google.com/\"\n >\n Firebase Console\n </a>{' '}\n and create a new project.\n </li>\n <li>\n Once your project is set up, click the \"Web\"\n option to add a web app to your project.\n </li>\n <li>\n Follow the instructions to register the app and\n obtain your Firebase configuration object.\n </li>\n </ol>\n </li>\n </ul>\n </div>\n\n <div className=\"mt-10\" id=\"setup-firebase-config\">\n <h5>Set Up Firebase Configuration</h5>\n <ul>\n <li>\n <p>\n Navigate to the <code>firebase.config.ts</code> file\n in the <code>/configs</code> directory of the\n template. Place your Firebase configuration details\n in this file, which you can find in your Firebase\n Console. For better security, it's recommended to\n store these values in a <code>.env</code> file.\n </p>\n <SyntaxHighlighter language=\"js\">{`const firebaseConfig = {\n apiKey: import.meta.env.VITE_FIREBASE_API_KEY,\n authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,\n projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,\n storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,\n messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,\n appId: import.meta.env.VITE_FIREBASE_APP_ID,\n};\n\nexport default firebaseConfig`}</SyntaxHighlighter>\n </li>\n <li>\n <p>\n Example firebase cofig in <code>.env</code> file.\n </p>\n <SyntaxHighlighter language=\"js\">{`VITE_FIREBASE_API_KEY=xxxxxxxxxxxxxxxxx\nVITE_FIREBASE_AUTH_DOMAIN=xxxxxxxxxx.firebaseapp.com\nVITE_FIREBASE_PROJECT_ID=xxxxxxxxxx\nVITE_FIREBASE_STORAGE_BUCKET=xxxxxxxxxx.appspot.com\nVITE_FIREBASE_MESSAGING_SENDER_ID=xxxxxxxxxx\nVITE_FIREBASE_APP_ID=xxxxxxxxxx\nVITE_FIREBASE_MEASUREMENT_ID=G-xxxxxxxxxx`}</SyntaxHighlighter>\n </li>\n </ul>\n </div>\n\n <div className=\"mt-10\" id=\"initialize-firebase\">\n <h5>Initialize Firebase</h5>\n <p>\n We have initialized a basic Firebase instance in{' '}\n <code>src/services/firebase/FirebaseApp.ts</code>. This\n initialization serves as a base for setting up other\n Firebase services like Firebase Authentication and Firebase\n Firestore. You can add additional Firebase packages as\n needed.\n </p>\n <SyntaxHighlighter language=\"ts\">{`import { initializeApp } from \"firebase/app\"\n\nimport firebaseConfig from '@/configs/firebase.config';\n\nconst FirebaseApp = initializeApp(firebaseConfig);\n\nexport default FirebaseApp`}</SyntaxHighlighter>\n </div>\n\n <div className=\"mt-10\" id=\"integrating-firebase\">\n <h5>Integrate Firebase</h5>\n <p>\n This section will guide you through examples of signing in\n with Firebase and retrieving data from Firebase.\n </p>\n <ul>\n <li>\n <strong>Sign in with Firebase Oauth</strong>\n <p>\n Firebase supports various authentication methods,\n including passwords, phone numbers, and popular\n identity providers like Google, Facebook, and\n Twitter.\n </p>\n <p>\n Below is an example of integrating Google OAuth.\n First, create a file named{' '}\n <code>FirebaseGoogleAuth.ts</code> and set up a{' '}\n <code>signInWithFirebaseGoogle</code> method:\n </p>\n <SyntaxHighlighter language=\"ts\">{`import {\n GoogleAuthProvider,\n signInWithPopup,\n} from 'firebase/auth'\nimport FirebaseAuth from './FirebaseAuth';\n\nconst googleAuthProvider = new GoogleAuthProvider();\n\nexport const signInWithFirebaseGoogle = async () => {\n try {\n const resp = await signInWithPopup(FirebaseAuth, googleAuthProvider);\n const token = await resp.user.getIdToken()\n return {\n token,\n user: resp.user\n }\n } catch (error) {\n throw error\n }\n}`}</SyntaxHighlighter>\n <p>\n Next, import this method into{' '}\n <code>OAuthService.ts</code> under the{' '}\n <code>apiGoogleOauthSignIn</code> function:\n </p>\n <SyntaxHighlighter language=\"ts\">{`import { signInWithFirebaseGoogle } from './firebase/FirebaseGoogleAuth'\n\nexport async function apiGoogleOauthSignIn() {\n return await signInWithFirebaseGoogle()\n}`}</SyntaxHighlighter>\n <p>\n Now, integrate it with your sign-in button. Ensure\n that <code>apiGoogleOauthSignIn</code> is called\n within the <code>oAuthSignIn</code> method from the{' '}\n <code>useAuth</code> hook to update the state after\n OAuth login is complete.\n </p>\n <SyntaxHighlighter language=\"tsx\">{`import Button from '@/components/ui/Button'\nimport { useAuth } from '@/auth'\nimport { apiGoogleOauthSignIn } from '@/services/OAuthServices'\n\nconst OauthSignIn = () => {\n\n const { oAuthSignIn } = useAuth()\n\n const handleGoogleSignIn = async () => {\n oAuthSignIn(async ({redirect, onSignIn}) => {\n try {\n const resp = await apiGoogleOauthSignIn()\n if (resp) {\n const { token, user } = resp\n onSignIn({accessToken: token}, user)\n redirect()\n }\n } catch (error) {\n console.error(error)\n }\n })\n }\n\n return (\n <Button className=\"flex-1\" onClick={handleGoogleSignIn} type=\"button\">\n <div className=\"flex items-center justify-center gap-2\">\n <span>Sign in with Google</span>\n </div>\n </Button>\n )\n}\n\nexport default OauthSignIn`}</SyntaxHighlighter>\n </li>\n <li>\n <strong>Sign in with Firebase Email & Password</strong>\n <p>\n If you want to use sign-in with email and password\n with Firebase, you can use the{' '}\n <code>signInWithEmailAndPassword</code> method\n within <code>apiSignIn</code> in{' '}\n <code>AuthService.ts</code>. Here’s an example:\n </p>\n <SyntaxHighlighter language=\"ts\">{`import { signInWithEmailAndPassword } from 'firebase/auth';\nimport FirebaseAuth from './firebase/FirebaseAuth';\n\nexport async function apiSignIn(data: SignInCredential) {\n try {\n const resp = await signInWithEmailAndPassword(FirebaseAuth, data.email, data.password);\n const token = await resp.user.getIdToken();\n return {\n token,\n user: resp.user,\n };\n } catch (error) {\n throw new Error('Sign in failed:' + error);\n }\n}`}</SyntaxHighlighter>\n </li>\n <li>\n <strong>Retrieve Data from Firebase</strong>\n <p>\n Here's an example of how to retrieve data from\n Firebase Firestore. In this example, we fetch a\n user's data from the Firestore database and display\n it in a component.\n </p>\n <SyntaxHighlighter language=\"tsx\">{`import { doc, getDoc } from \"firebase/firestore\"; \nimport db from \"@/services/firebase/FirebaseDB\";\nimport { useEffect, useState } from \"react\";\n\nconst Example = () => {\n\n const [data, setData] = useState<{firstName?: string, lastName?: string}>({})\n\n useEffect(() => {\n const getData = async () => {\n try {\n const docRef = doc(db, \"users\", \"1\");\n const docSnap = await getDoc(docRef);\n if (docSnap.exists()) {\n setData(docSnap.data())\n } else {\n console.log(\"No such document!\");\n }\n } catch (error) {\n console.error('Error fetching document:', error)\n }\n }\n getData()\n }, [])\n\n return (\n <div>\n {data?.firstName} {data?.lastName} \n </div>\n )\n}\n\nexport default Example`}</SyntaxHighlighter>\n </li>\n </ul>\n </div>\n <div className=\"mt-10\" id=\"removing-firebase\">\n <h5>Removing Firebase</h5>\n <p>\n If your app does not required firebase, you can delete{' '}\n <code>firebase.config.ts</code> & the entire{' '}\n <code>/firebase</code> folder under{' '}\n <code>src/services</code>\n </p>\n </div>\n <div className=\"mt-10\" id=\"conclusion\">\n <h5>Conclusion</h5>\n <p>\n You can now leverage Firebase's powerful features to enhance\n the functionality and user experience of your application.\n </p>\n <p>\n For more detailed information on using Firebase services, be\n sure to refer to the{' '}\n <a target=\"_new\" href=\"https://firebase.google.com/docs\">\n Firebase documentation\n </a>\n .\n </p>\n </div>\n </>\n )\n}\n\nexport default FirebaseIntegration\n"],"names":["FirebaseIntegration","jsxs","Fragment","jsx","SyntaxHighlighter"],"mappings":"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"}
1	+ {"version":3,"file":"FirebaseIntegration.js","sources":["../../../../../../../lib/@ecme/views/guide/Documentations/components/FirebaseIntegration.tsx"],"sourcesContent":["/* eslint-disable react/no-unescaped-entities */\nimport SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\n\nconst FirebaseIntegration = () => {\n return (\n <>\n <p>\n Firebase is a platform developed by Google that provides a wide\n range of tools and services to help you build mobile and web\n applications. It offers backend services like authentication,\n real-time databases, cloud storage, and hosting, making it a\n powerful choice for developers.\n </p>\n <p>\n Our template includes basic Firebase integration out of the box.\n If your application uses Firebase, this guide will help you\n seamlessly incorporate Firebase into the template.\n </p>\n\n <div className=\"mt-10\" id=\"prerequisites\">\n <h5>Prerequisites</h5>\n <ul className=\"mt-1\">\n <li>\n <p>\n Create a Firebase project in the Firebase Console.\n </p>\n <ol>\n <li>\n Go to the{' '}\n <a\n target=\"_new\"\n href=\"https://console.firebase.google.com/\"\n >\n Firebase Console\n </a>{' '}\n and create a new project.\n </li>\n <li>\n Once your project is set up, click the \"Web\"\n option to add a web app to your project.\n </li>\n <li>\n Follow the instructions to register the app and\n obtain your Firebase configuration object.\n </li>\n </ol>\n </li>\n </ul>\n </div>\n\n <div className=\"mt-10\" id=\"setup-firebase-config\">\n <h5>Set Up Firebase Configuration</h5>\n <ul>\n <li>\n <p>\n Navigate to the <code>firebase.config.ts</code> file\n in the <code>/configs</code> directory of the\n template. Place your Firebase configuration details\n in this file, which you can find in your Firebase\n Console. For better security, it's recommended to\n store these values in a <code>.env</code> file.\n </p>\n <SyntaxHighlighter language=\"js\">{`const firebaseConfig = {\n apiKey: import.meta.env.VITE_FIREBASE_API_KEY,\n authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,\n projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,\n storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,\n messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,\n appId: import.meta.env.VITE_FIREBASE_APP_ID,\n};\n\nexport default firebaseConfig`}</SyntaxHighlighter>\n </li>\n <li>\n <p>\n Example firebase cofig in <code>.env</code> file.\n </p>\n <SyntaxHighlighter language=\"js\">{`VITE_FIREBASE_API_KEY=xxxxxxxxxxxxxxxxx\nVITE_FIREBASE_AUTH_DOMAIN=xxxxxxxxxx.firebaseapp.com\nVITE_FIREBASE_PROJECT_ID=xxxxxxxxxx\nVITE_FIREBASE_STORAGE_BUCKET=xxxxxxxxxx.appspot.com\nVITE_FIREBASE_MESSAGING_SENDER_ID=xxxxxxxxxx\nVITE_FIREBASE_APP_ID=xxxxxxxxxx\nVITE_FIREBASE_MEASUREMENT_ID=G-xxxxxxxxxx`}</SyntaxHighlighter>\n </li>\n </ul>\n </div>\n\n <div className=\"mt-10\" id=\"initialize-firebase\">\n <h5>Initialize Firebase</h5>\n <p>\n We have initialized a basic Firebase instance in{' '}\n <code>src/services/firebase/FirebaseApp.ts</code>. This\n initialization serves as a base for setting up other\n Firebase services like Firebase Authentication and Firebase\n Firestore. You can add additional Firebase packages as\n needed.\n </p>\n <SyntaxHighlighter language=\"ts\">{`import { initializeApp } from \"firebase/app\"\n\nimport firebaseConfig from '@/configs/firebase.config';\n\nconst FirebaseApp = initializeApp(firebaseConfig);\n\nexport default FirebaseApp`}</SyntaxHighlighter>\n </div>\n\n <div className=\"mt-10\" id=\"integrating-firebase\">\n <h5>Integrate Firebase</h5>\n <p>\n This section will guide you through examples of signing in\n with Firebase and retrieving data from Firebase.\n </p>\n <ul>\n <li>\n <strong>Sign in with Firebase Oauth</strong>\n <p>\n Firebase supports various authentication methods,\n including passwords, phone numbers, and popular\n identity providers like Google, Facebook, and\n Twitter.\n </p>\n <p>\n Below is an example of integrating Google OAuth.\n First, create a file named{' '}\n <code>FirebaseGoogleAuth.ts</code> and set up a{' '}\n <code>signInWithFirebaseGoogle</code> method:\n </p>\n <SyntaxHighlighter language=\"ts\">{`import {\n GoogleAuthProvider,\n signInWithPopup,\n} from 'firebase/auth'\nimport FirebaseAuth from './FirebaseAuth';\n\nconst googleAuthProvider = new GoogleAuthProvider();\n\nexport const signInWithFirebaseGoogle = async () => {\n try {\n const resp = await signInWithPopup(FirebaseAuth, googleAuthProvider);\n const token = await resp.user.getIdToken()\n return {\n token,\n user: resp.user\n }\n } catch (error) {\n throw error\n }\n}`}</SyntaxHighlighter>\n <p>\n Next, import this method into{' '}\n <code>OAuthService.ts</code> under the{' '}\n <code>apiGoogleOauthSignIn</code> function:\n </p>\n <SyntaxHighlighter language=\"ts\">{`import { signInWithFirebaseGoogle } from './firebase/FirebaseGoogleAuth'\n\nexport async function apiGoogleOauthSignIn() {\n return await signInWithFirebaseGoogle()\n}`}</SyntaxHighlighter>\n <p>\n Now, integrate it with your sign-in button. Ensure\n that <code>apiGoogleOauthSignIn</code> is called\n within the <code>oAuthSignIn</code> method from the{' '}\n <code>useAuth</code> hook to update the state after\n OAuth login is complete.\n </p>\n <SyntaxHighlighter language=\"tsx\">{`import Button from '@/components/ui/Button'\nimport { useAuth } from '@/auth'\nimport { apiGoogleOauthSignIn } from '@/services/OAuthServices'\n\nconst OauthSignIn = () => {\n\n const { oAuthSignIn } = useAuth()\n\n const handleGoogleSignIn = async () => {\n oAuthSignIn(async ({redirect, onSignIn}) => {\n try {\n const resp = await apiGoogleOauthSignIn()\n if (resp) {\n const { token, user } = resp\n onSignIn({accessToken: token}, user)\n redirect()\n }\n } catch (error) {\n console.error(error)\n }\n })\n }\n\n return (\n <Button className=\"flex-1\" onClick={handleGoogleSignIn} type=\"button\">\n <div className=\"flex items-center justify-center gap-2\">\n <span>Sign in with Google</span>\n </div>\n </Button>\n )\n}\n\nexport default OauthSignIn`}</SyntaxHighlighter>\n </li>\n <li>\n <strong>Sign in with Firebase Email & Password</strong>\n <p>\n If you want to use sign-in with email and password\n with Firebase, you can use the{' '}\n <code>signInWithEmailAndPassword</code> method\n within <code>apiSignIn</code> in{' '}\n <code>AuthService.ts</code>. Here’s an example:\n </p>\n <SyntaxHighlighter language=\"ts\">{`import { signInWithEmailAndPassword } from 'firebase/auth';\nimport FirebaseAuth from './firebase/FirebaseAuth';\n\nexport async function apiSignIn(data: SignInCredential) {\n try {\n const resp = await signInWithEmailAndPassword(FirebaseAuth, data.email, data.password);\n const token = await resp.user.getIdToken();\n return {\n token,\n user: resp.user,\n };\n } catch (error) {\n throw new Error('Sign in failed:' + error);\n }\n}`}</SyntaxHighlighter>\n </li>\n <li>\n <strong>Retrieve Data from Firebase</strong>\n <p>\n Here's an example of how to retrieve data from\n Firebase Firestore. In this example, we fetch a\n user's data from the Firestore database and display\n it in a component.\n </p>\n <SyntaxHighlighter language=\"tsx\">{`import { doc, getDoc } from \"firebase/firestore\"; \nimport db from \"@/services/firebase/FirebaseDB\";\nimport { useEffect, useState } from \"react\";\n\nconst Example = () => {\n\n const [data, setData] = useState<{firstName?: string, lastName?: string}>({})\n\n useEffect(() => {\n const getData = async () => {\n try {\n const docRef = doc(db, \"users\", \"1\");\n const docSnap = await getDoc(docRef);\n if (docSnap.exists()) {\n setData(docSnap.data())\n } else {\n console.log(\"No such document!\");\n }\n } catch (error) {\n console.error('Error fetching document:', error)\n }\n }\n getData()\n }, [])\n\n return (\n <div>\n {data?.firstName} {data?.lastName} \n </div>\n )\n}\n\nexport default Example`}</SyntaxHighlighter>\n </li>\n </ul>\n </div>\n <div className=\"mt-10\" id=\"removing-firebase\">\n <h5>Removing Firebase</h5>\n <p>\n If your app does not required firebase, you can delete{' '}\n <code>firebase.config.ts</code> & the entire{' '}\n <code>/firebase</code> folder under{' '}\n <code>src/services</code>\n </p>\n </div>\n <div className=\"mt-10\" id=\"conclusion\">\n <h5>Conclusion</h5>\n <p>\n You can now leverage Firebase's powerful features to enhance\n the functionality and user experience of your application.\n </p>\n <p>\n For more detailed information on using Firebase services, be\n sure to refer to the{' '}\n <a target=\"_new\" href=\"https://firebase.google.com/docs\">\n Firebase documentation\n </a>\n .\n </p>\n </div>\n </>\n )\n}\n\nexport default FirebaseIntegration\n"],"names":["FirebaseIntegration","jsxs","Fragment","jsx","SyntaxHighlighter"],"mappings":"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"}

package/dist/lib/@ecme/views/guide/Documentations/components/FolderStructure.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FolderStructure.js","sources":["../../../../../../../lib/@ecme/views/guide/Documentations/components/FolderStructure.tsx"],"sourcesContent":["import SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\n\nconst FolderStructure = () => {\n return (\n <>\n <p>\n In this section you will find the basic folder structure and\n everything you need to get the template up and running. Both the\n demo and starter versions have the same structure, except that\n the starter version will have fewer files & folders than the\n demo version as they are not required in the starter.\n </p>\n <p>Below is a schematic diagram of directory structure:</p>\n <SyntaxHighlighter>\n {`\n├── public # Static resource\n\| ├── img # Images\n\| ├── data # Static data\n\| └── ... # Other static files\n├── src\n│ ├── @types # type files that share across the temeplate\n│ │ ├── ... \n│ ├── assets # App static resource\n│ │ ├── maps # Map meta data \n│ │ ├── markdown # Markdown files\n│ │ ├── styles # Global CSS files\n│ │ └── svg\t # SVG files\n│ ├── components # General components\n│ │ ├── docs # Documentations related components\n│ │ ├── layout # Layout components\n│ │ ├── route # Components related to route\n│ │ ├── shared # Upper level components built on top of ui components\n│ │ ├── template # Template components, such as Header, Footer, Nav, etc...\n│ │ └── ui # Bottom level components, such as Button, Dropdown, etc...\n│ ├── configs # Configuration files \n│ │ └── ... \n│ ├── constants # Constant files\n│ │ └── ... \n│ ├── locales # Localization configuration\n│ │ ├── lang\n│ │ \| └── ... # Language JSON files\n│ │ └── index.ts # Localization entry file\n│ ├── mock # Mock data for fake API Calls\n│ │ ├── data # Mock data\n│ │ \| └── ... # Mock data TS files\n│ │ ├── fakeApi # Fake API configuration\n│ │ \| └── ... # Fake API TS files\n│ │ └── index.ts # Mock entry file\n│ ├── services # Service files for managing API integrations\n│ │ ├── ApiService.ts # Api request & response handler\n│ │ ├── axios # Axios configs & interceptors\n\| \| \| └── ...\n│ │ └── ... # Other service files\n│ ├── store # Zustand store hooks for the template core states\n│ │ └── ... \n│ ├── utils # All reusable function & hooks\n│ │ ├── hooks # Hooks\n│ │ \| └── ... \t\t\t\t\t\n│ │ └── ... # Reusable functions \n│ ├── views # View files that render all the pages\n│ \| ├── ... # All view files\n│ \| └── index.ts # View entry point\n│ \| └── View.tsx # View component\n│ \| App.tsx # App setup\n│ \| index.css # Css entry\n│ \| main.tsx # React entry\n│ \| mdDynamicImporter.tsx # Dynamic md file import handling\n│ └── vite-env.d.ts # Vite environment declaration\n├── .env # File to stores environment configuration and secrets\n├── .eslintignore # Ignore file for eslint \n├── .eslintrc.cjs # eslint config\n├── .gitignore # Ignore file for git\n├── .prettierignore # Ignore file for prettier\n├── .prettierrc # Prettier config \n├── index.html # Entry file for the web\n├── package.json \n├── package.lock.json \n├── postcss.config.cjs # PostCss configuration file\n├── README.md \n├── tailwind.config.cjs # TailwindCSS configuration file\n├── tsconfig.eslint.json # Typescript config for eslint\n├── tsconfig.json # Project Typescript configuration file\n├── tsconfig.eslint.json # Typescript config for node\n└── vite.config.ts # Config file for vite\n`}\n </SyntaxHighlighter>\n <p>\n This folder structure provides a clear organization of\n resources, components, configuration, and assets, making it\n easier to manage and scale your project. Each folder and file is\n purposefully placed to ensure a clean and maintainable codebase.\n </p>\n </>\n )\n}\n\nexport default FolderStructure\n"],"names":["FolderStructure","jsxs","Fragment","jsx","SyntaxHighlighter"],"mappings":";;AAEA,MAAMA,IAAkB,~~MAGZ~~,gBAAAC,EAAAC,GAAA,~~EAAA~~,UAAA;AAAA,EAAA,gBAAAC,EAAC,OAAE,~~UAMH~~,kTAAA,~~CAAA~~;AAAA,EACA,gBAAAA,EAAC,OAAE,~~UAAoD~~,uDAAA,~~CAAA~~;AAAA,oBACtDC,~~GACI~~,~~EAAA~~,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAuEL;AAAA,EACA,gBAAAD,EAAC,OAAE,~~UAKH~~,uPAAA,~~CAAA~~;AAAA,GACJ;"}
1	+ {"version":3,"file":"FolderStructure.js","sources":["../../../../../../../lib/@ecme/views/guide/Documentations/components/FolderStructure.tsx"],"sourcesContent":["import SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\n\nconst FolderStructure = () => {\n return (\n <>\n <p>\n In this section you will find the basic folder structure and\n everything you need to get the template up and running. Both the\n demo and starter versions have the same structure, except that\n the starter version will have fewer files & folders than the\n demo version as they are not required in the starter.\n </p>\n <p>Below is a schematic diagram of directory structure:</p>\n <SyntaxHighlighter>\n {`\n├── public # Static resource\n\| ├── img # Images\n\| ├── data # Static data\n\| └── ... # Other static files\n├── src\n│ ├── @types # type files that share across the temeplate\n│ │ ├── ... \n│ ├── assets # App static resource\n│ │ ├── maps # Map meta data \n│ │ ├── markdown # Markdown files\n│ │ ├── styles # Global CSS files\n│ │ └── svg\t # SVG files\n│ ├── components # General components\n│ │ ├── docs # Documentations related components\n│ │ ├── layout # Layout components\n│ │ ├── route # Components related to route\n│ │ ├── shared # Upper level components built on top of ui components\n│ │ ├── template # Template components, such as Header, Footer, Nav, etc...\n│ │ └── ui # Bottom level components, such as Button, Dropdown, etc...\n│ ├── configs # Configuration files \n│ │ └── ... \n│ ├── constants # Constant files\n│ │ └── ... \n│ ├── locales # Localization configuration\n│ │ ├── lang\n│ │ \| └── ... # Language JSON files\n│ │ └── index.ts # Localization entry file\n│ ├── mock # Mock data for fake API Calls\n│ │ ├── data # Mock data\n│ │ \| └── ... # Mock data TS files\n│ │ ├── fakeApi # Fake API configuration\n│ │ \| └── ... # Fake API TS files\n│ │ └── index.ts # Mock entry file\n│ ├── services # Service files for managing API integrations\n│ │ ├── ApiService.ts # Api request & response handler\n│ │ ├── axios # Axios configs & interceptors\n\| \| \| └── ...\n│ │ └── ... # Other service files\n│ ├── store # Zustand store hooks for the template core states\n│ │ └── ... \n│ ├── utils # All reusable function & hooks\n│ │ ├── hooks # Hooks\n│ │ \| └── ... \t\t\t\t\t\n│ │ └── ... # Reusable functions \n│ ├── views # View files that render all the pages\n│ \| ├── ... # All view files\n│ \| └── index.ts # View entry point\n│ \| └── View.tsx # View component\n│ \| App.tsx # App setup\n│ \| index.css # Css entry\n│ \| main.tsx # React entry\n│ \| mdDynamicImporter.tsx # Dynamic md file import handling\n│ └── vite-env.d.ts # Vite environment declaration\n├── .env # File to stores environment configuration and secrets\n├── .eslintignore # Ignore file for eslint \n├── .eslintrc.cjs # eslint config\n├── .gitignore # Ignore file for git\n├── .prettierignore # Ignore file for prettier\n├── .prettierrc # Prettier config \n├── index.html # Entry file for the web\n├── package.json \n├── package.lock.json \n├── postcss.config.cjs # PostCss configuration file\n├── README.md \n├── tailwind.config.cjs # TailwindCSS configuration file\n├── tsconfig.eslint.json # Typescript config for eslint\n├── tsconfig.json # Project Typescript configuration file\n├── tsconfig.eslint.json # Typescript config for node\n└── vite.config.ts # Config file for vite\n`}\n </SyntaxHighlighter>\n <p>\n This folder structure provides a clear organization of\n resources, components, configuration, and assets, making it\n easier to manage and scale your project. Each folder and file is\n purposefully placed to ensure a clean and maintainable codebase.\n </p>\n </>\n )\n}\n\nexport default FolderStructure\n"],"names":["FolderStructure","jsxs","Fragment","jsx","SyntaxHighlighter"],"mappings":";;AAEA,MAAMA,IAAkB,MAEhB,gBAAAC,EAAAC,GAAA,EACI,UAAA;AAAA,EAAA,gBAAAC,EAAC,OAAE,UAAA,kTAAA,CAMH;AAAA,EACA,gBAAAA,EAAC,OAAE,UAAA,uDAAA,CAAoD;AAAA,oBACtDC,GAAA,EACI,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAuEL;AAAA,EACA,gBAAAD,EAAC,OAAE,UAAA,uPAAA,CAKH;AAAA,GACJ;"}

package/dist/lib/@ecme/views/guide/Documentations/components/Installation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Installation.js","sources":["../../../../../../../lib/@ecme/views/guide/Documentations/components/Installation.tsx"],"sourcesContent":["/* eslint-disable react/no-unescaped-entities */\nimport SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\n\nconst Installation = () => {\n return (\n <>\n <h6>Prerequisites</h6>\n <p>\n Before getting started with Ecme, ensure your development\n environment has the following tools installed:\n </p>\n <div className=\"mt-6\">\n <ul>\n <li>\n <a\n href=\"https://nodejs.org\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n Node.js\n </a>\n </li>\n <li>\n <a\n href=\"https://www.npmjs.com/\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n npm\n </a>\n </li>\n </ul>\n </div>\n <div className=\"mt-8\">\n <h6>Installing Ecme</h6>\n <p>\n After extracting the downloaded .zip file, you'll find three\n folders:\n </p>\n <ul>\n <li>\n <strong>demo</strong>\n <p className=\"mt-1\">\n This folder contains the full demo of the project,\n including everything you see in the live preview.\n It's meant for reference only and{' '}\n <strong className=\"heading-text\">\n <em>NOT</em>\n </strong>{' '}\n recommended for development.\n </p>\n </li>\n <li>\n <strong>starter</strong>\n <p className=\"mt-1\">\n The starter pack provides the basic setup for the\n template. This is where you should begin your\n development, creating pages and adding your code. We\n recommend copying this folder into your workspace.\n </p>\n </li>\n <li>\n <strong>documentation</strong>\n <p className=\"mt-1\">\n This folder includes an index.html file that\n redirects to the online documentation.\n </p>\n </li>\n </ul>\n <p>\n Once you've chosen your desired package, navigate to the\n project's root directory (where <code>package.json</code> is\n located) and run the following command in your console:\n </p>\n <SyntaxHighlighter>npm install</SyntaxHighlighter>\n <p>\n This will install all necessary dependencies in the\n node_modules directory, allowing you to start development.\n </p>\n </div>\n </>\n )\n}\n\nexport default Installation\n"],"names":["Installation","jsxs","Fragment","jsx","SyntaxHighlighter"],"mappings":";;AAGA,MAAMA,IAAe,~~MAGT~~,gBAAAC,EAAAC,GAAA,~~EAAA~~,UAAA;AAAA,EAAA,gBAAAC,EAAC,QAAG,~~UAAa~~,gBAAA,~~CAAA~~;AAAA,EACjB,gBAAAA,EAAC,OAAE,~~UAGH~~,2GAAA,~~CAAA~~;AAAA,~~EACC~~,gBAAAA,~~EAAA~~,OAAA,EAAI,WAAU,QACX,4BAAC,~~MACG~~,~~EAAA~~,UAAA;AAAA,IAAA,gBAAAA,EAAC,~~MACG~~,~~EAAA~~,UAAA,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,QAAO;AAAA,QACP,KAAI;AAAA,QACP,UAAA;AAAA,MAAA;AAAA,IAAA,GAGL;AAAA,sBACC,~~MACG~~,~~EAAA~~,UAAA,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,QAAO;AAAA,QACP,KAAI;AAAA,QACP,UAAA;AAAA,MAAA;AAAA,IAAA,~~EAGL~~,~~CAAA~~;AAAA,EAAA,EAAA,CACJ,~~EACJ~~,~~CAAA~~;AAAA,EACA,gBAAAF,EAAC,~~OAAI~~,~~EAAA~~,WAAU,QACX,UAAA;AAAA,IAAA,gBAAAE,EAAC,QAAG,~~UAAe~~,kBAAA,~~CAAA~~;AAAA,IACnB,gBAAAA,EAAC,OAAE,~~UAGH~~,wEAAA,~~CAAA~~;AAAA,sBACC,~~MACG~~,~~EAAA~~,UAAA;AAAA,MAAA,gBAAAF,EAAC,~~MACG~~,~~EAAA~~,UAAA;AAAA,QAAA,gBAAAE,EAAC,YAAO,~~UAAI~~,OAAA,~~CAAA~~;AAAA,QACZ,gBAAAF,EAAC,~~KAAE~~,~~EAAA~~,WAAU,QAAO,UAAA;AAAA,UAAA;AAAA,UAGkB;AAAA,4BACjC,~~UAAO~~,~~EAAA~~,WAAU,gBACd,~~UAAC~~,gBAAAE,~~EAAA~~,MAAA,EAAG,iBAAG,~~EACX~~,~~CAAA~~;AAAA,UAAU;AAAA,UAAI;AAAA,QAAA,~~EAElB~~,~~CAAA~~;AAAA,MAAA,GACJ;AAAA,wBACC,~~MACG~~,~~EAAA~~,UAAA;AAAA,QAAA,gBAAAA,EAAC,YAAO,~~UAAO~~,UAAA,~~CAAA~~;AAAA,~~QACd~~,gBAAAA,~~EAAA~~,KAAA,EAAE,WAAU,QAAO,~~UAKpB~~,0MAAA,~~CAAA~~;AAAA,MAAA,GACJ;AAAA,wBACC,~~MACG~~,~~EAAA~~,UAAA;AAAA,QAAA,gBAAAA,EAAC,YAAO,~~UAAa~~,gBAAA,~~CAAA~~;AAAA,~~QACpB~~,gBAAAA,~~EAAA~~,KAAA,EAAE,WAAU,QAAO,~~UAGpB~~,sFAAA,~~CAAA~~;AAAA,MAAA,~~EACJ~~,~~CAAA~~;AAAA,IAAA,GACJ;AAAA,sBACC,~~KAAE~~,~~EAAA~~,UAAA;AAAA,MAAA;AAAA,MAEiC,gBAAAA,EAAC,UAAK,~~UAAY~~,eAAA,~~CAAA~~;AAAA,MAAO;AAAA,IAAA,GAE7D;AAAA,IACA,gBAAAA,EAACC,KAAkB,~~UAAW~~,cAAA,~~CAAA~~;AAAA,IAC9B,gBAAAD,EAAC,OAAE,~~UAGH~~,iHAAA,~~CAAA~~;AAAA,EAAA,~~EACJ~~,~~CAAA~~;AAAA,GACJ;"}
1	+ {"version":3,"file":"Installation.js","sources":["../../../../../../../lib/@ecme/views/guide/Documentations/components/Installation.tsx"],"sourcesContent":["/* eslint-disable react/no-unescaped-entities */\nimport SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\n\nconst Installation = () => {\n return (\n <>\n <h6>Prerequisites</h6>\n <p>\n Before getting started with Ecme, ensure your development\n environment has the following tools installed:\n </p>\n <div className=\"mt-6\">\n <ul>\n <li>\n <a\n href=\"https://nodejs.org\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n Node.js\n </a>\n </li>\n <li>\n <a\n href=\"https://www.npmjs.com/\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n npm\n </a>\n </li>\n </ul>\n </div>\n <div className=\"mt-8\">\n <h6>Installing Ecme</h6>\n <p>\n After extracting the downloaded .zip file, you'll find three\n folders:\n </p>\n <ul>\n <li>\n <strong>demo</strong>\n <p className=\"mt-1\">\n This folder contains the full demo of the project,\n including everything you see in the live preview.\n It's meant for reference only and{' '}\n <strong className=\"heading-text\">\n <em>NOT</em>\n </strong>{' '}\n recommended for development.\n </p>\n </li>\n <li>\n <strong>starter</strong>\n <p className=\"mt-1\">\n The starter pack provides the basic setup for the\n template. This is where you should begin your\n development, creating pages and adding your code. We\n recommend copying this folder into your workspace.\n </p>\n </li>\n <li>\n <strong>documentation</strong>\n <p className=\"mt-1\">\n This folder includes an index.html file that\n redirects to the online documentation.\n </p>\n </li>\n </ul>\n <p>\n Once you've chosen your desired package, navigate to the\n project's root directory (where <code>package.json</code> is\n located) and run the following command in your console:\n </p>\n <SyntaxHighlighter>npm install</SyntaxHighlighter>\n <p>\n This will install all necessary dependencies in the\n node_modules directory, allowing you to start development.\n </p>\n </div>\n </>\n )\n}\n\nexport default Installation\n"],"names":["Installation","jsxs","Fragment","jsx","SyntaxHighlighter"],"mappings":";;AAGA,MAAMA,IAAe,MAEb,gBAAAC,EAAAC,GAAA,EACI,UAAA;AAAA,EAAA,gBAAAC,EAAC,QAAG,UAAA,gBAAA,CAAa;AAAA,EACjB,gBAAAA,EAAC,OAAE,UAAA,2GAAA,CAGH;AAAA,EACA,gBAAAA,EAAC,OAAA,EAAI,WAAU,QACX,4BAAC,MAAA,EACG,UAAA;AAAA,IAAA,gBAAAA,EAAC,MAAA,EACG,UAAA,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,QAAO;AAAA,QACP,KAAI;AAAA,QACP,UAAA;AAAA,MAAA;AAAA,IAAA,GAGL;AAAA,sBACC,MAAA,EACG,UAAA,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,QAAO;AAAA,QACP,KAAI;AAAA,QACP,UAAA;AAAA,MAAA;AAAA,IAAA,EAED,CACJ;AAAA,EAAA,EAAA,CACJ,EAAA,CACJ;AAAA,EACA,gBAAAF,EAAC,OAAA,EAAI,WAAU,QACX,UAAA;AAAA,IAAA,gBAAAE,EAAC,QAAG,UAAA,kBAAA,CAAe;AAAA,IACnB,gBAAAA,EAAC,OAAE,UAAA,wEAAA,CAGH;AAAA,sBACC,MAAA,EACG,UAAA;AAAA,MAAA,gBAAAF,EAAC,MAAA,EACG,UAAA;AAAA,QAAA,gBAAAE,EAAC,YAAO,UAAA,OAAA,CAAI;AAAA,QACZ,gBAAAF,EAAC,KAAA,EAAE,WAAU,QAAO,UAAA;AAAA,UAAA;AAAA,UAGkB;AAAA,4BACjC,UAAA,EAAO,WAAU,gBACd,UAAA,gBAAAE,EAAC,MAAA,EAAG,iBAAG,EAAA,CACX;AAAA,UAAU;AAAA,UAAI;AAAA,QAAA,EAAA,CAElB;AAAA,MAAA,GACJ;AAAA,wBACC,MAAA,EACG,UAAA;AAAA,QAAA,gBAAAA,EAAC,YAAO,UAAA,UAAA,CAAO;AAAA,QACf,gBAAAA,EAAC,KAAA,EAAE,WAAU,QAAO,UAAA,0MAAA,CAKpB;AAAA,MAAA,GACJ;AAAA,wBACC,MAAA,EACG,UAAA;AAAA,QAAA,gBAAAA,EAAC,YAAO,UAAA,gBAAA,CAAa;AAAA,QACrB,gBAAAA,EAAC,KAAA,EAAE,WAAU,QAAO,UAAA,sFAAA,CAGpB;AAAA,MAAA,EAAA,CACJ;AAAA,IAAA,GACJ;AAAA,sBACC,KAAA,EAAE,UAAA;AAAA,MAAA;AAAA,MAEiC,gBAAAA,EAAC,UAAK,UAAA,eAAA,CAAY;AAAA,MAAO;AAAA,IAAA,GAE7D;AAAA,IACA,gBAAAA,EAACC,KAAkB,UAAA,cAAA,CAAW;AAAA,IAC9B,gBAAAD,EAAC,OAAE,UAAA,iHAAA,CAGH;AAAA,EAAA,EAAA,CACJ;AAAA,GACJ;"}

package/dist/lib/@ecme/views/guide/Documentations/components/Internationalization.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Internationalization.js","sources":["../../../../../../../lib/@ecme/views/guide/Documentations/components/Internationalization.tsx"],"sourcesContent":["import SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\n\nconst Internationalization = () => {\n return (\n <>\n <p>\n Ecme uses{' '}\n <a\n rel=\"noopener\"\n target=\"_new\"\n href=\"https://react.i18next.com/\"\n >\n <strong>react-i18next</strong>\n </a>{' '}\n for internationalization, making it easy to manage and translate\n text across different languages. The relevant files are located\n in the <code>src/locales/</code> directory.\n </p>\n <div className=\"mt-10\" id=\"translatingText\">\n <h5>Translating text</h5>\n <p className=\"mt-1\">\n To translate text within your components, you can use the{' '}\n <code>useTranslation</code> hook provided by Ecme. This hook\n wraps the standard <code>useTranslation</code> from{' '}\n <code>react-i18next</code> and allows you to access the\n translation function <code>t</code> for translating keys\n defined in your locale files.\n </p>\n <SyntaxHighlighter language=\"tsx\">{`import { useTranslation } from '@/utils/hooks/useTranslation'\n\nconst Component = () => {\n\n const { t } = useTranslation()\n\n return (\n <div>{t('your.translate.key')}</div>\n )\n}\n\nexport default Component`}</SyntaxHighlighter>\n </div>\n <div className=\"mt-10\" id=\"changingLanguage\">\n <h5>Changing language</h5>\n <p className=\"mt-1\">\n If you need to switch languages dynamically, you can use the{' '}\n <code>i18n</code> object provided by the{' '}\n <code>useTranslation</code> hook to change the current\n language.\n </p>\n <SyntaxHighlighter language=\"tsx\">{`import { useTranslation } from 'react-i18next'\n\nconst Component = () => {\n\n const { i18n } = useTranslation()\n\n return (\n <button onClick={() => i18n.changeLanguage('fr')}>Change language</button>\n )\n}\n\nexport default Component`}</SyntaxHighlighter>\n </div>\n <div className=\"mt-10\" id=\"addNewLocale\">\n <h5>Add new locale</h5>\n <p className=\"mt-1\">\n We store all the locale data under{' '}\n <code>src/locales/lang/*</code>. To add a new locale, create\n a Json file under this directory. For example{' '}\n <code>fr.json</code>\n </p>\n <SyntaxHighlighter language=\"json\">{`{\n \"your\": {\n \"translate\": {\n \"key\": \"votre clé de traduction\"\n },\n }\n}`}</SyntaxHighlighter>\n <p>\n Now you can import this file into{' '}\n <code>src/locales/index.ts</code> & inject them to{' '}\n <code>resources</code> field, this is the entry file of all\n locales. Also, create an object to load date locale\n dynamically from{' '}\n <a\n href=\"https://github.com/iamkun/dayjs/tree/dev/src/locale\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <code>dayjs</code>\n </a>\n .\n </p>\n <SyntaxHighlighter language=\"ts\">{`import i18n from 'i18next'\nimport { initReactI18next } from 'react-i18next'\nimport en from './lang/en.json'\nimport fr from './lang/fr.json'\n\nconst resources = {\n en: {\n translation: en\n },\n fr: { // <--- this key will be the value you use on changeLanguage method\n translation: fr\n },\n}\n\n// Consistent the key with resource to load relavant locale from day.js\nexport const dateLocales: {\n [key: string]: () => Promise<ILocale>;\n} = {\n en: () => import('dayjs/locale/en'),\n fr: () => import('dayjs/locale/fr'),\n}\n\n`}</SyntaxHighlighter>\n <p>And, the new locale is basically set.</p>\n </div>\n <div className=\"mt-10\" id=\"settingDefaultLanguage\">\n <h5>Setting the Default Language</h5>\n <p className=\"mt-1\">\n To set the default language, you might need to visit{' '}\n <code>src/configs/app.config.ts</code> and change the{' '}\n <code>locale</code> field value\n </p>\n <SyntaxHighlighter language=\"ts\">{`export const appConfig: AppConfig = {\n ...\n locale: 'fr'\n}`}</SyntaxHighlighter>\n </div>\n <div className=\"mt-10\" id=\"turnOnTranslationForNavigation\">\n <h5>Turn on translation for navigation</h5>\n <p className=\"mt-1\">\n We have embeded the translation feature into the navigation,\n but it is not active by default at starter. To turn it on,\n you might need to visit{' '}\n <code>src/configs/app.config.ts</code> and change the{' '}\n <code>activeNavTranslation</code> field to <code>true</code>\n </p>\n <SyntaxHighlighter language=\"ts\">{`const appConfig: AppConfig = {\n ...\n activeNavTranslation: true\n}`}</SyntaxHighlighter>\n </div>\n <div className=\"mt-10\" id=\"injectLocleToTheApp\">\n <h5>Inject locale to the App</h5>\n <p className=\"mt-1\">\n Now you might need to inject the locale setup to{' '}\n <code>App.tsx</code>\n </p>\n <SyntaxHighlighter language=\"ts\">{`...\nimport './locales'\n\nif (appConfig.enableMock) {\n import('./mock')\n}\n\nfunction App() {\n return (\n <Theme>\n ...\n </Theme>\n )\n}\n\nexport default App\n`}</SyntaxHighlighter>\n </div>\n </>\n )\n}\n\nexport default Internationalization\n"],"names":["Internationalization","jsxs","Fragment","jsx","SyntaxHighlighter"],"mappings":"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"}
1	+ {"version":3,"file":"Internationalization.js","sources":["../../../../../../../lib/@ecme/views/guide/Documentations/components/Internationalization.tsx"],"sourcesContent":["import SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\n\nconst Internationalization = () => {\n return (\n <>\n <p>\n Ecme uses{' '}\n <a\n rel=\"noopener\"\n target=\"_new\"\n href=\"https://react.i18next.com/\"\n >\n <strong>react-i18next</strong>\n </a>{' '}\n for internationalization, making it easy to manage and translate\n text across different languages. The relevant files are located\n in the <code>src/locales/</code> directory.\n </p>\n <div className=\"mt-10\" id=\"translatingText\">\n <h5>Translating text</h5>\n <p className=\"mt-1\">\n To translate text within your components, you can use the{' '}\n <code>useTranslation</code> hook provided by Ecme. This hook\n wraps the standard <code>useTranslation</code> from{' '}\n <code>react-i18next</code> and allows you to access the\n translation function <code>t</code> for translating keys\n defined in your locale files.\n </p>\n <SyntaxHighlighter language=\"tsx\">{`import { useTranslation } from '@/utils/hooks/useTranslation'\n\nconst Component = () => {\n\n const { t } = useTranslation()\n\n return (\n <div>{t('your.translate.key')}</div>\n )\n}\n\nexport default Component`}</SyntaxHighlighter>\n </div>\n <div className=\"mt-10\" id=\"changingLanguage\">\n <h5>Changing language</h5>\n <p className=\"mt-1\">\n If you need to switch languages dynamically, you can use the{' '}\n <code>i18n</code> object provided by the{' '}\n <code>useTranslation</code> hook to change the current\n language.\n </p>\n <SyntaxHighlighter language=\"tsx\">{`import { useTranslation } from 'react-i18next'\n\nconst Component = () => {\n\n const { i18n } = useTranslation()\n\n return (\n <button onClick={() => i18n.changeLanguage('fr')}>Change language</button>\n )\n}\n\nexport default Component`}</SyntaxHighlighter>\n </div>\n <div className=\"mt-10\" id=\"addNewLocale\">\n <h5>Add new locale</h5>\n <p className=\"mt-1\">\n We store all the locale data under{' '}\n <code>src/locales/lang/*</code>. To add a new locale, create\n a Json file under this directory. For example{' '}\n <code>fr.json</code>\n </p>\n <SyntaxHighlighter language=\"json\">{`{\n \"your\": {\n \"translate\": {\n \"key\": \"votre clé de traduction\"\n },\n }\n}`}</SyntaxHighlighter>\n <p>\n Now you can import this file into{' '}\n <code>src/locales/index.ts</code> & inject them to{' '}\n <code>resources</code> field, this is the entry file of all\n locales. Also, create an object to load date locale\n dynamically from{' '}\n <a\n href=\"https://github.com/iamkun/dayjs/tree/dev/src/locale\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <code>dayjs</code>\n </a>\n .\n </p>\n <SyntaxHighlighter language=\"ts\">{`import i18n from 'i18next'\nimport { initReactI18next } from 'react-i18next'\nimport en from './lang/en.json'\nimport fr from './lang/fr.json'\n\nconst resources = {\n en: {\n translation: en\n },\n fr: { // <--- this key will be the value you use on changeLanguage method\n translation: fr\n },\n}\n\n// Consistent the key with resource to load relavant locale from day.js\nexport const dateLocales: {\n [key: string]: () => Promise<ILocale>;\n} = {\n en: () => import('dayjs/locale/en'),\n fr: () => import('dayjs/locale/fr'),\n}\n\n`}</SyntaxHighlighter>\n <p>And, the new locale is basically set.</p>\n </div>\n <div className=\"mt-10\" id=\"settingDefaultLanguage\">\n <h5>Setting the Default Language</h5>\n <p className=\"mt-1\">\n To set the default language, you might need to visit{' '}\n <code>src/configs/app.config.ts</code> and change the{' '}\n <code>locale</code> field value\n </p>\n <SyntaxHighlighter language=\"ts\">{`export const appConfig: AppConfig = {\n ...\n locale: 'fr'\n}`}</SyntaxHighlighter>\n </div>\n <div className=\"mt-10\" id=\"turnOnTranslationForNavigation\">\n <h5>Turn on translation for navigation</h5>\n <p className=\"mt-1\">\n We have embeded the translation feature into the navigation,\n but it is not active by default at starter. To turn it on,\n you might need to visit{' '}\n <code>src/configs/app.config.ts</code> and change the{' '}\n <code>activeNavTranslation</code> field to <code>true</code>\n </p>\n <SyntaxHighlighter language=\"ts\">{`const appConfig: AppConfig = {\n ...\n activeNavTranslation: true\n}`}</SyntaxHighlighter>\n </div>\n <div className=\"mt-10\" id=\"injectLocleToTheApp\">\n <h5>Inject locale to the App</h5>\n <p className=\"mt-1\">\n Now you might need to inject the locale setup to{' '}\n <code>App.tsx</code>\n </p>\n <SyntaxHighlighter language=\"ts\">{`...\nimport './locales'\n\nif (appConfig.enableMock) {\n import('./mock')\n}\n\nfunction App() {\n return (\n <Theme>\n ...\n </Theme>\n )\n}\n\nexport default App\n`}</SyntaxHighlighter>\n </div>\n </>\n )\n}\n\nexport default Internationalization\n"],"names":["Internationalization","jsxs","Fragment","jsx","SyntaxHighlighter"],"mappings":"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"}

package/dist/lib/@ecme/views/guide/Documentations/components/Introduction.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Introduction.js","sources":["../../../../../../../lib/@ecme/views/guide/Documentations/components/Introduction.tsx"],"sourcesContent":["/* eslint-disable react/no-unescaped-entities */\nconst coreFeatures = [\n {\n id: 'react',\n name: 'React',\n img: '/img/thumbs/react.png',\n src: 'https://reactjs.org/',\n description:\n 'A popular JavaScript library for building user interfaces.',\n },\n {\n id: 'vite',\n name: 'Vite',\n img: '/img/thumbs/vite.png',\n src: 'https://vitejs.dev/',\n description:\n 'Vite is a modern, blazing-fast tool for scaffolding and bundling',\n },\n {\n id: 'typeScript',\n name: 'TypeScript',\n img: '/img/thumbs/typeScript.png',\n src: 'https://www.typescriptlang.org/',\n description:\n 'TypeScript is a strongly typed programming language that builds on JavaScript',\n },\n {\n id: 'tailwind',\n name: 'Tailwind Css',\n img: '/img/thumbs/tailwind.png',\n src: 'https://tailwindcss.com/',\n description: 'A utility-first CSS framework packed with classes.',\n },\n]\n\nconst Introduction = () => {\n return (\n <>\n <div id=\"introduction\" className=\"mb-8\">\n <p>\n Ecme is not just another web template—it's a meticulously\n crafted masterpiece that stands out in a market flooded with\n generic, poorly designed options. Every aspect of Ecme, from\n its elegant UI to its robust code architecture, has been\n thoughtfully designed to ensure unparalleled flexibility and\n scalability for your projects.\n </p>\n <p>\n Unlike other templates that rely on common open-source\n libraries, Ecme features a comprehensive suite of\n custom-built UI components. These components are not only\n rich in functionality but also offer greater control,\n allowing you to tailor every detail to meet your specific\n needs.\n </p>\n <p>\n Ecme is equipped with advanced features like multi-language\n support, dark and light mode, right-to-left layout, theme\n color customization, and the ability to switch seamlessly\n between six pre-designed layouts. Whether you're building a\n global platform or a niche application, Ecme's versatility\n has you covered.\n </p>\n <p>\n Moreover, the included application examples are grounded in\n real-world use cases, giving you practical, ready-to-use\n solutions for your projects. With Ecme, you're not just\n buying a template—you're investing in a powerful, flexible\n foundation for your web development success.\n </p>\n </div>\n <div id=\"coreLibrary\">\n <h4>Core libraries used</h4>\n <p>Here's a list of the core libraries we use in Ecme</p>\n <div className=\"grid grid-cols-2 gap-4\">\n {coreFeatures.map((feat) => (\n <a\n key={feat.id}\n className=\"border-2 border-gray-200 dark:border-gray-700 hover:border-primary flex flex-col items-center justify-center py-4 rounded-xl gap-2 no-underline\"\n href={feat.src}\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n <img\n className=\"max-h-16\"\n src={feat.img}\n alt={feat.name}\n />\n <div className=\"text-center\">\n <div className=\"heading-text font-bold\">\n {feat.name}\n </div>\n </div>\n </a>\n ))}\n </div>\n </div>\n </>\n )\n}\n\nexport default Introduction\n"],"names":["coreFeatures","Introduction","jsxs","Fragment","jsx","feat"],"mappings":";AACA,MAAMA,IAAe;AAAA,EACjB;AAAA,IACI,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,KAAK;AAAA,IACL,KAAK;AAAA,IACL,aACI;AAAA,~~EACR~~;AAAA,~~EACA~~;AAAA,IACI,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,KAAK;AAAA,IACL,KAAK;AAAA,IACL,aACI;AAAA,~~EACR~~;AAAA,~~EACA~~;AAAA,IACI,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,KAAK;AAAA,IACL,KAAK;AAAA,IACL,aACI;AAAA,~~EACR~~;AAAA,~~EACA~~;AAAA,IACI,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,KAAK;AAAA,IACL,KAAK;AAAA,IACL,aAAa;AAAA,EAAA;AAErB,GAEMC,IAAe,~~MAGT~~,gBAAAC,EAAAC,GAAA,~~EAAA~~,UAAA;AAAA,EAAA,gBAAAD,EAAC,~~OAAI~~,~~EAAA~~,IAAG,gBAAe,WAAU,QAC7B,UAAA;AAAA,IAAA,gBAAAE,EAAC,OAAE,~~UAOH~~,2UAAA,~~CAAA~~;AAAA,IACA,gBAAAA,EAAC,OAAE,~~UAOH~~,4RAAA,~~CAAA~~;AAAA,IACA,gBAAAA,EAAC,OAAE,~~UAOH~~,0TAAA,~~CAAA~~;AAAA,IACA,gBAAAA,EAAC,OAAE,~~UAMH~~,uRAAA,~~CAAA~~;AAAA,EAAA,GACJ;AAAA,EACA,gBAAAF,EAAC,~~OAAI~~,~~EAAA~~,IAAG,eACJ,UAAA;AAAA,IAAA,gBAAAE,EAAC,QAAG,~~UAAmB~~,sBAAA,~~CAAA~~;AAAA,IACvB,gBAAAA,EAAC,OAAE,~~UAAkD~~,qDAAA,~~CAAA~~;AAAA,sBACpD,~~OAAI~~,~~EAAA~~,WAAU,0BACV,~~UAAaJ~~,~~EAAA~~,IAAI,CAACK,MACf,gBAAAH;AAAA,MAAC;AAAA,MAAA;AAAA,QAEG,WAAU;AAAA,QACV,MAAMG,EAAK;AAAA,QACX,QAAO;AAAA,QACP,KAAI;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAD;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAU;AAAA,cACV,KAAKC,EAAK;AAAA,cACV,KAAKA,EAAK;AAAA,YAAA;AAAA,~~UACd~~;AAAA,~~UACA~~,gBAAAD,EAAC,~~OAAI~~,~~EAAA~~,WAAU,eACX,UAAA,gBAAAA,EAAC,SAAI,WAAU,0BACV,~~UAAKC~~,~~EAAA~~,~~KACV~~,~~CAAA~~,~~EACJ~~,~~CAAA~~;AAAA,QAAA;AAAA,MAAA;AAAA,MAfKA,EAAK;AAAA,IAAA,CAiBjB,~~EACL~~,~~CAAA~~;AAAA,EAAA,~~EACJ~~,~~CAAA~~;AAAA,GACJ;"}
1	+ {"version":3,"file":"Introduction.js","sources":["../../../../../../../lib/@ecme/views/guide/Documentations/components/Introduction.tsx"],"sourcesContent":["/* eslint-disable react/no-unescaped-entities */\nconst coreFeatures = [\n {\n id: 'react',\n name: 'React',\n img: '/img/thumbs/react.png',\n src: 'https://reactjs.org/',\n description:\n 'A popular JavaScript library for building user interfaces.',\n },\n {\n id: 'vite',\n name: 'Vite',\n img: '/img/thumbs/vite.png',\n src: 'https://vitejs.dev/',\n description:\n 'Vite is a modern, blazing-fast tool for scaffolding and bundling',\n },\n {\n id: 'typeScript',\n name: 'TypeScript',\n img: '/img/thumbs/typeScript.png',\n src: 'https://www.typescriptlang.org/',\n description:\n 'TypeScript is a strongly typed programming language that builds on JavaScript',\n },\n {\n id: 'tailwind',\n name: 'Tailwind Css',\n img: '/img/thumbs/tailwind.png',\n src: 'https://tailwindcss.com/',\n description: 'A utility-first CSS framework packed with classes.',\n },\n]\n\nconst Introduction = () => {\n return (\n <>\n <div id=\"introduction\" className=\"mb-8\">\n <p>\n Ecme is not just another web template—it's a meticulously\n crafted masterpiece that stands out in a market flooded with\n generic, poorly designed options. Every aspect of Ecme, from\n its elegant UI to its robust code architecture, has been\n thoughtfully designed to ensure unparalleled flexibility and\n scalability for your projects.\n </p>\n <p>\n Unlike other templates that rely on common open-source\n libraries, Ecme features a comprehensive suite of\n custom-built UI components. These components are not only\n rich in functionality but also offer greater control,\n allowing you to tailor every detail to meet your specific\n needs.\n </p>\n <p>\n Ecme is equipped with advanced features like multi-language\n support, dark and light mode, right-to-left layout, theme\n color customization, and the ability to switch seamlessly\n between six pre-designed layouts. Whether you're building a\n global platform or a niche application, Ecme's versatility\n has you covered.\n </p>\n <p>\n Moreover, the included application examples are grounded in\n real-world use cases, giving you practical, ready-to-use\n solutions for your projects. With Ecme, you're not just\n buying a template—you're investing in a powerful, flexible\n foundation for your web development success.\n </p>\n </div>\n <div id=\"coreLibrary\">\n <h4>Core libraries used</h4>\n <p>Here's a list of the core libraries we use in Ecme</p>\n <div className=\"grid grid-cols-2 gap-4\">\n {coreFeatures.map((feat) => (\n <a\n key={feat.id}\n className=\"border-2 border-gray-200 dark:border-gray-700 hover:border-primary flex flex-col items-center justify-center py-4 rounded-xl gap-2 no-underline\"\n href={feat.src}\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n <img\n className=\"max-h-16\"\n src={feat.img}\n alt={feat.name}\n />\n <div className=\"text-center\">\n <div className=\"heading-text font-bold\">\n {feat.name}\n </div>\n </div>\n </a>\n ))}\n </div>\n </div>\n </>\n )\n}\n\nexport default Introduction\n"],"names":["coreFeatures","Introduction","jsxs","Fragment","jsx","feat"],"mappings":";AACA,MAAMA,IAAe;AAAA,EACjB;AAAA,IACI,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,KAAK;AAAA,IACL,KAAK;AAAA,IACL,aACI;AAAA,EAAA;AAAA,EAER;AAAA,IACI,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,KAAK;AAAA,IACL,KAAK;AAAA,IACL,aACI;AAAA,EAAA;AAAA,EAER;AAAA,IACI,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,KAAK;AAAA,IACL,KAAK;AAAA,IACL,aACI;AAAA,EAAA;AAAA,EAER;AAAA,IACI,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,KAAK;AAAA,IACL,KAAK;AAAA,IACL,aAAa;AAAA,EAAA;AAErB,GAEMC,IAAe,MAEb,gBAAAC,EAAAC,GAAA,EACI,UAAA;AAAA,EAAA,gBAAAD,EAAC,OAAA,EAAI,IAAG,gBAAe,WAAU,QAC7B,UAAA;AAAA,IAAA,gBAAAE,EAAC,OAAE,UAAA,2UAAA,CAOH;AAAA,IACA,gBAAAA,EAAC,OAAE,UAAA,4RAAA,CAOH;AAAA,IACA,gBAAAA,EAAC,OAAE,UAAA,0TAAA,CAOH;AAAA,IACA,gBAAAA,EAAC,OAAE,UAAA,uRAAA,CAMH;AAAA,EAAA,GACJ;AAAA,EACA,gBAAAF,EAAC,OAAA,EAAI,IAAG,eACJ,UAAA;AAAA,IAAA,gBAAAE,EAAC,QAAG,UAAA,sBAAA,CAAmB;AAAA,IACvB,gBAAAA,EAAC,OAAE,UAAA,qDAAA,CAAkD;AAAA,sBACpD,OAAA,EAAI,WAAU,0BACV,UAAAJ,EAAa,IAAI,CAACK,MACf,gBAAAH;AAAA,MAAC;AAAA,MAAA;AAAA,QAEG,WAAU;AAAA,QACV,MAAMG,EAAK;AAAA,QACX,QAAO;AAAA,QACP,KAAI;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAD;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAU;AAAA,cACV,KAAKC,EAAK;AAAA,cACV,KAAKA,EAAK;AAAA,YAAA;AAAA,UAAA;AAAA,UAEd,gBAAAD,EAAC,OAAA,EAAI,WAAU,eACX,UAAA,gBAAAA,EAAC,SAAI,WAAU,0BACV,UAAAC,EAAK,KAAA,CACV,EAAA,CACJ;AAAA,QAAA;AAAA,MAAA;AAAA,MAfKA,EAAK;AAAA,IAAA,CAiBjB,EAAA,CACL;AAAA,EAAA,EAAA,CACJ;AAAA,GACJ;"}

package/dist/lib/@ecme/views/guide/Documentations/components/Layouts.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Layouts.js","sources":["../../../../../../../lib/@ecme/views/guide/Documentations/components/Layouts.tsx"],"sourcesContent":["import SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\nimport DemoComponentApi from '@/components/docs/DemoComponentApi'\nimport type { CSSProperties } from 'react'\n\nconst Layouts = () => {\n return (\n <>\n <p>\n Ecme provide 6 types of post login layouts & 3 types of auth\n layouts, all layouts component can be found under directory{' '}\n <code>src/components/layouts/PostLoginLayout/components</code>\n and all the components used within layouts can be found under{' '}\n <code>src/components/template/</code>\n </p>\n <p>The following was the post login layouts that we had:</p>\n <ul>\n <li>\n Collapsible side - <code>'collapsibleSide'</code>\n </li>\n <li>\n Stacked side - <code>'stackedSide'</code>\n </li>\n <li>\n Top bar classic - <code>'topBarClassic'</code>\n </li>\n <li>\n Frameless side - <code>'framelessSide'</code>\n </li>\n <li>\n Content overlay - <code>'contentOverlay'</code>\n </li>\n <li>\n Blank - <code>'blank'</code>\n </li>\n </ul>\n <div className=\"mt-10\" id=\"configuringLayout\">\n <div className=\"mt-10\" id=\"classic\">\n <h5>Configuring Layout</h5>\n <p className=\"mt-1\">\n You can config the initial layout in{' '}\n <code>src/configs/theme.config.ts</code> with the string\n value above\n </p>\n <SyntaxHighlighter language=\"js\">{`export const themeConfig = {\n ...\n layout: {\n type: 'framelessSide',\n ...\n },\n}`}</SyntaxHighlighter>\n <p>\n Here's available values & key for configuring the{' '}\n <code>layout</code> field\n </p>\n <DemoComponentApi\n hideApiTitle\n keyText=\"properties\"\n api={[\n {\n api: [\n {\n propName: 'type',\n type: `<code>'blank'</code> \| <code>'collapsibleSide'</code> \| <code>'stackedSide'</code> \| <code>'topBarClassic'</code> \| <code>'framelessSide'</code> \| <code>'contentOverlay'</code>`,\n default: `<code>'modern'</code>`,\n desc: 'Type of the application layout',\n },\n {\n propName: 'sideNavCollapse',\n type: `<code>boolean</code>`,\n default: `<code>false</code>`,\n desc: `Whether to collapse the side navigation (only only applicable when <code>type</code> is <code>'classic'</code> or <code>'modern'</code>)`,\n },\n ],\n },\n ]}\n />\n </div>\n </div>\n <div className=\"mt-10\" id=\"overridingLayouts\">\n <h5>Overriding layouts</h5>\n <p className=\"mt-1\">\n In general, all route views will follow the settings of the\n layout in <code>theme.config.ts</code>. However, if there\n are some cases where you want to show a different layout in\n a certiain route view, you can the layout value you wish\n under the route <code>meta</code> to overide the current\n layout as we mentioned in <strong>Routing</strong> guide.\n </p>\n <SyntaxHighlighter language=\"js\">{`export const protectedRoutes = [\n {\n key: 'a-unique-id-for-this-view'\n path: 'path',\n component: React.lazy(() => import('views/Component')),\n authority: [],\n meta: {\n ...,\n layout: 'blank'\n }\n },\t\t\t\n]`}</SyntaxHighlighter>\n </div>\n <div className=\"mt-10\" id=\"authLayouts\">\n <h5>Auth layouts</h5>\n <p>\n Configuring auth layout is slightly different from the\n above, just need to visit{' '}\n <code>src/components/layouts/AuthLayout/AuthLayout.ts</code>{' '}\n and replace the wrapper component. For example, switching{' '}\n <code>side</code> to <code>simple</code>\n </p>\n <SyntaxHighlighter\n language=\"js\"\n wrapLines={true}\n showLineNumbers={true}\n lineProps={(lineNumber) => {\n const style: CSSProperties = { display: 'block' }\n if ([9].includes(lineNumber)) {\n style.backgroundColor = '#00ff002e'\n } else if ([10].includes(lineNumber)) {\n style.backgroundColor = '#ff00001f'\n }\n return { style }\n }}\n >{`import { useMemo, lazy } from 'react'\nimport type { CommonProps } from '@/@types/common'\nimport type { LazyExoticComponent } from 'react'\n\ntype LayoutType = 'simple' \| 'split' \| 'side'\n\ntype Layouts = Record<LayoutType, LazyExoticComponent<<T extends CommonProps>(props: T) => JSX.Element>>\n\nconst currentLayoutType: LayoutType = 'side'\nconst currentLayoutType: LayoutType = 'simple'\n\nconst layouts: Layouts = {\n simple: lazy(() => import('./Simple')),\n split: lazy(() => import('./Split')),\n side: lazy(() => import('./Side')),\n}\n\nconst AuthLayout = ({ children }: CommonProps) => {\n\n const Layout = useMemo(() => {\n return layouts[currentLayoutType]\n }, [])\n\n return (\n <Layout>{children}</Layout>\n )\n}\n\nexport default AuthLayout`}</SyntaxHighlighter>\n </div>\n </>\n )\n}\n\nexport default Layouts\n"],"names":["Layouts","jsxs","Fragment","jsx","SyntaxHighlighter","DemoComponentApi","lineNumber","style"],"mappings":"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"}
1	+ {"version":3,"file":"Layouts.js","sources":["../../../../../../../lib/@ecme/views/guide/Documentations/components/Layouts.tsx"],"sourcesContent":["import SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\nimport DemoComponentApi from '@/components/docs/DemoComponentApi'\nimport type { CSSProperties } from 'react'\n\nconst Layouts = () => {\n return (\n <>\n <p>\n Ecme provide 6 types of post login layouts & 3 types of auth\n layouts, all layouts component can be found under directory{' '}\n <code>src/components/layouts/PostLoginLayout/components</code>\n and all the components used within layouts can be found under{' '}\n <code>src/components/template/</code>\n </p>\n <p>The following was the post login layouts that we had:</p>\n <ul>\n <li>\n Collapsible side - <code>'collapsibleSide'</code>\n </li>\n <li>\n Stacked side - <code>'stackedSide'</code>\n </li>\n <li>\n Top bar classic - <code>'topBarClassic'</code>\n </li>\n <li>\n Frameless side - <code>'framelessSide'</code>\n </li>\n <li>\n Content overlay - <code>'contentOverlay'</code>\n </li>\n <li>\n Blank - <code>'blank'</code>\n </li>\n </ul>\n <div className=\"mt-10\" id=\"configuringLayout\">\n <div className=\"mt-10\" id=\"classic\">\n <h5>Configuring Layout</h5>\n <p className=\"mt-1\">\n You can config the initial layout in{' '}\n <code>src/configs/theme.config.ts</code> with the string\n value above\n </p>\n <SyntaxHighlighter language=\"js\">{`export const themeConfig = {\n ...\n layout: {\n type: 'framelessSide',\n ...\n },\n}`}</SyntaxHighlighter>\n <p>\n Here's available values & key for configuring the{' '}\n <code>layout</code> field\n </p>\n <DemoComponentApi\n hideApiTitle\n keyText=\"properties\"\n api={[\n {\n api: [\n {\n propName: 'type',\n type: `<code>'blank'</code> \| <code>'collapsibleSide'</code> \| <code>'stackedSide'</code> \| <code>'topBarClassic'</code> \| <code>'framelessSide'</code> \| <code>'contentOverlay'</code>`,\n default: `<code>'modern'</code>`,\n desc: 'Type of the application layout',\n },\n {\n propName: 'sideNavCollapse',\n type: `<code>boolean</code>`,\n default: `<code>false</code>`,\n desc: `Whether to collapse the side navigation (only only applicable when <code>type</code> is <code>'classic'</code> or <code>'modern'</code>)`,\n },\n ],\n },\n ]}\n />\n </div>\n </div>\n <div className=\"mt-10\" id=\"overridingLayouts\">\n <h5>Overriding layouts</h5>\n <p className=\"mt-1\">\n In general, all route views will follow the settings of the\n layout in <code>theme.config.ts</code>. However, if there\n are some cases where you want to show a different layout in\n a certiain route view, you can the layout value you wish\n under the route <code>meta</code> to overide the current\n layout as we mentioned in <strong>Routing</strong> guide.\n </p>\n <SyntaxHighlighter language=\"js\">{`export const protectedRoutes = [\n {\n key: 'a-unique-id-for-this-view'\n path: 'path',\n component: React.lazy(() => import('views/Component')),\n authority: [],\n meta: {\n ...,\n layout: 'blank'\n }\n },\t\t\t\n]`}</SyntaxHighlighter>\n </div>\n <div className=\"mt-10\" id=\"authLayouts\">\n <h5>Auth layouts</h5>\n <p>\n Configuring auth layout is slightly different from the\n above, just need to visit{' '}\n <code>src/components/layouts/AuthLayout/AuthLayout.ts</code>{' '}\n and replace the wrapper component. For example, switching{' '}\n <code>side</code> to <code>simple</code>\n </p>\n <SyntaxHighlighter\n language=\"js\"\n wrapLines={true}\n showLineNumbers={true}\n lineProps={(lineNumber) => {\n const style: CSSProperties = { display: 'block' }\n if ([9].includes(lineNumber)) {\n style.backgroundColor = '#00ff002e'\n } else if ([10].includes(lineNumber)) {\n style.backgroundColor = '#ff00001f'\n }\n return { style }\n }}\n >{`import { useMemo, lazy } from 'react'\nimport type { CommonProps } from '@/@types/common'\nimport type { LazyExoticComponent } from 'react'\n\ntype LayoutType = 'simple' \| 'split' \| 'side'\n\ntype Layouts = Record<LayoutType, LazyExoticComponent<<T extends CommonProps>(props: T) => JSX.Element>>\n\nconst currentLayoutType: LayoutType = 'side'\nconst currentLayoutType: LayoutType = 'simple'\n\nconst layouts: Layouts = {\n simple: lazy(() => import('./Simple')),\n split: lazy(() => import('./Split')),\n side: lazy(() => import('./Side')),\n}\n\nconst AuthLayout = ({ children }: CommonProps) => {\n\n const Layout = useMemo(() => {\n return layouts[currentLayoutType]\n }, [])\n\n return (\n <Layout>{children}</Layout>\n )\n}\n\nexport default AuthLayout`}</SyntaxHighlighter>\n </div>\n </>\n )\n}\n\nexport default Layouts\n"],"names":["Layouts","jsxs","Fragment","jsx","SyntaxHighlighter","DemoComponentApi","lineNumber","style"],"mappings":";;;AAIA,MAAMA,IAAU,MAER,gBAAAC,EAAAC,GAAA,EACI,UAAA;AAAA,EAAA,gBAAAD,EAAC,KAAA,EAAE,UAAA;AAAA,IAAA;AAAA,IAE6D;AAAA,IAC5D,gBAAAE,EAAC,UAAK,UAAA,qDAAA,CAAkD;AAAA,IAAO;AAAA,IACD;AAAA,IAC9D,gBAAAA,EAAC,UAAK,UAAA,4BAAA,CAAyB;AAAA,EAAA,GACnC;AAAA,EACA,gBAAAA,EAAC,OAAE,UAAA,wDAAA,CAAqD;AAAA,oBACvD,MAAA,EACG,UAAA;AAAA,IAAA,gBAAAF,EAAC,MAAA,EAAG,UAAA;AAAA,MAAA;AAAA,MACmB,gBAAAE,EAAC,UAAK,UAAA,oBAAA,CAA2B;AAAA,IAAA,GACxD;AAAA,sBACC,MAAA,EAAG,UAAA;AAAA,MAAA;AAAA,MACe,gBAAAA,EAAC,UAAK,UAAA,gBAAA,CAAuB;AAAA,IAAA,GAChD;AAAA,sBACC,MAAA,EAAG,UAAA;AAAA,MAAA;AAAA,MACkB,gBAAAA,EAAC,UAAK,UAAA,kBAAA,CAAyB;AAAA,IAAA,GACrD;AAAA,sBACC,MAAA,EAAG,UAAA;AAAA,MAAA;AAAA,MACiB,gBAAAA,EAAC,UAAK,UAAA,kBAAA,CAAyB;AAAA,IAAA,GACpD;AAAA,sBACC,MAAA,EAAG,UAAA;AAAA,MAAA;AAAA,MACkB,gBAAAA,EAAC,UAAK,UAAA,mBAAA,CAA0B;AAAA,IAAA,GACtD;AAAA,sBACC,MAAA,EAAG,UAAA;AAAA,MAAA;AAAA,MACQ,gBAAAA,EAAC,UAAK,UAAA,UAAA,CAAiB;AAAA,IAAA,EAAA,CACnC;AAAA,EAAA,GACJ;AAAA,EACA,gBAAAA,EAAC,OAAA,EAAI,WAAU,SAAQ,IAAG,qBACtB,UAAA,gBAAAF,EAAC,OAAA,EAAI,WAAU,SAAQ,IAAG,WACtB,UAAA;AAAA,IAAA,gBAAAE,EAAC,QAAG,UAAA,qBAAA,CAAkB;AAAA,IACtB,gBAAAF,EAAC,KAAA,EAAE,WAAU,QAAO,UAAA;AAAA,MAAA;AAAA,MACqB;AAAA,MACrC,gBAAAE,EAAC,UAAK,UAAA,8BAAA,CAA2B;AAAA,MAAO;AAAA,IAAA,GAE5C;AAAA,IACA,gBAAAA,EAACC,GAAA,EAAkB,UAAS,MAAM,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMnD;AAAA,sBACkB,KAAA,EAAE,UAAA;AAAA,MAAA;AAAA,MACwD;AAAA,MACvD,gBAAAD,EAAC,UAAK,UAAA,SAAA,CAAM;AAAA,MAAO;AAAA,IAAA,GACvB;AAAA,IACA,gBAAAA;AAAA,MAACE;AAAA,MAAA;AAAA,QACG,cAAY;AAAA,QACZ,SAAQ;AAAA,QACR,KAAK;AAAA,UACD;AAAA,YACI,KAAK;AAAA,cACD;AAAA,gBACI,UAAU;AAAA,gBACV,MAAM;AAAA,gBACN,SAAS;AAAA,gBACT,MAAM;AAAA,cAAA;AAAA,cAEV;AAAA,gBACI,UAAU;AAAA,gBACV,MAAM;AAAA,gBACN,SAAS;AAAA,gBACT,MAAM;AAAA,cAAA;AAAA,YACV;AAAA,UACJ;AAAA,QACJ;AAAA,MACJ;AAAA,IAAA;AAAA,EACJ,EAAA,CACJ,EAAA,CACJ;AAAA,EACA,gBAAAJ,EAAC,OAAA,EAAI,WAAU,SAAQ,IAAG,qBACtB,UAAA;AAAA,IAAA,gBAAAE,EAAC,QAAG,UAAA,qBAAA,CAAkB;AAAA,IACtB,gBAAAF,EAAC,KAAA,EAAE,WAAU,QAAO,UAAA;AAAA,MAAA;AAAA,MAEN,gBAAAE,EAAC,UAAK,UAAA,kBAAA,CAAe;AAAA,MAAO;AAAA,MAGtB,gBAAAA,EAAC,UAAK,UAAA,OAAA,CAAI;AAAA,MAAO;AAAA,MACP,gBAAAA,EAAC,YAAO,UAAA,UAAA,CAAO;AAAA,MAAS;AAAA,IAAA,GACtD;AAAA,IACA,gBAAAA,EAACC,GAAA,EAAkB,UAAS,MAAM,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAAA,CAW/C;AAAA,EAAA,GACS;AAAA,EACA,gBAAAH,EAAC,OAAA,EAAI,WAAU,SAAQ,IAAG,eACtB,UAAA;AAAA,IAAA,gBAAAE,EAAC,QAAG,UAAA,eAAA,CAAY;AAAA,sBACf,KAAA,EAAE,UAAA;AAAA,MAAA;AAAA,MAE2B;AAAA,MAC1B,gBAAAA,EAAC,UAAK,UAAA,kDAAA,CAA+C;AAAA,MAAQ;AAAA,MAAI;AAAA,MACP;AAAA,MAC1D,gBAAAA,EAAC,UAAK,UAAA,OAAA,CAAI;AAAA,MAAO;AAAA,MAAI,gBAAAA,EAAC,UAAK,UAAA,SAAA,CAAM;AAAA,IAAA,GACrC;AAAA,IACA,gBAAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,UAAS;AAAA,QACT,WAAW;AAAA,QACX,iBAAiB;AAAA,QACjB,WAAW,CAACE,MAAe;AACvB,gBAAMC,IAAuB,EAAE,SAAS,QAAA;AACxC,iBAAI,CAAC,CAAC,EAAE,SAASD,CAAU,IACvBC,EAAM,kBAAkB,cACjB,CAAC,EAAE,EAAE,SAASD,CAAU,MAC/BC,EAAM,kBAAkB,cAErB,EAAE,OAAAA,EAAA;AAAA,QAAM;AAAA,QAErB,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EA4BS,EAAA,CACf;AAAA,GACJ;"}

package/dist/lib/@ecme/views/guide/Documentations/components/MockApi.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MockApi.js","sources":["../../../../../../../lib/@ecme/views/guide/Documentations/components/MockApi.tsx"],"sourcesContent":["import SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\n\nconst MockApi = () => {\n return (\n <>\n <p>\n A mock API is a tool that simulates the behavior of a real API,\n providing data responses as if they were from an actual server.\n This can be extremely useful in situations where the real API is\n not yet fully developed, or when you need to simulate API calls\n for unit testing.\n </p>\n <p>\n Ecme utilizes the{' '}\n <a\n href=\"https://github.com/ctimmerm/axios-mock-adapter\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n axios-mock-adapter\n </a>{' '}\n library to handle API mocking. All API interactions in our demo\n operate through this adapter.\n </p>\n <div className=\"mt-10\" id=\"disableMockApi\">\n <h5>Disabling Mock API</h5>\n <p className=\"mt-1\">\n By default, the mock API is enabled in the{' '}\n <strong>starter-kit</strong>. If you want to disable it,\n simply set the <code>enableMock</code> field to{' '}\n <code>false</code> in <code>src/configs/app.config.ts</code>\n .\n </p>\n <SyntaxHighlighter language=\"ts\">{`const appConfig = {\n ...,\n enableMock: false\n}`}</SyntaxHighlighter>\n </div>\n <div className=\"mt-10\" id=\"usingMockApi\">\n <h5>Using the Mock API</h5>\n <p className=\"mt-1\">\n If you intend to use the mock API, follow these steps to\n create fake database data and APIs:\n </p>\n <ol>\n <li>\n <strong>Setup</strong>\n <p className=\"mt-1\">\n Go to <code>src/mock/MockAdapter.ts</code>. This\n file contains the basic configuration for the mock\n API.\n </p>\n <SyntaxHighlighter language=\"ts\">{`import MockAdapter from 'axios-mock-adapter'\nimport AxiosBase from '@/services/axios/AxiosBase'\n\nexport const mock = new MockAdapter(AxiosBase)`}</SyntaxHighlighter>\n </li>\n <li>\n <strong>Create a Mock API</strong>\n <p className=\"mt-1\">\n To create a mock API, add it to{' '}\n <code>src/mock/MockAdapter.ts</code>. For example,\n you can create <code>userFakeApi.ts</code>. Remember\n to import the mock instance from{' '}\n <code>MockAdapter.ts</code> to create a route.\n </p>\n <SyntaxHighlighter language=\"ts\">{`import { mock } from '../MockAdapter'\n\nmock.onGet('/api/users').reply(() => {\n\treturn [200, [\n {\n id: '1',\n name: 'Carolyn Perkins',\n },\n {\n id: '2',\n name: 'Terrance Moreno',\n },\n {\n id: '3',\n name: 'Ron Vargas',\n },\n ]];\n})`}</SyntaxHighlighter>\n </li>\n <li>\n <p>\n Next, import your <code>userFakeApi.ts</code> file\n into the mock entry file{' '}\n <code>src/mock/index.ts</code>.\n </p>\n <SyntaxHighlighter language=\"ts\">{`import { mock } from './MockAdapter'\nimport './fakeApi/userFakeApi'\n...\n\nmock.onAny().passThrough();`}</SyntaxHighlighter>\n </li>\n </ol>\n </div>\n <div>\n <p>\n Now, you can make requests to this mock API and receive the\n static data you set up as the response.\n </p>\n <SyntaxHighlighter language=\"ts\">{`// service\nimport ApiService from \"./ApiService\"\n\ntype GetUserResponse = {\n id: string\n name: string\n email: string\n}[]\n\nexport async function apiGetUsers () {\n return ApiService.fetchData<GetUserResponse>({\n url: '/api/getUsers',\n method: 'get'\n })\n}`}</SyntaxHighlighter>\n <SyntaxHighlighter language=\"ts\">{`// component\nimport { useEffect } from 'react'\nimport { apiGetUsers } from './YourService.ts'\n\nconst YourComponent = () => {\n\n const fetchData = async () => {\n try {\n const resp = await apiGetUsers()\n console.log(resp.data)\n } catch (errors) {\n // handle errors\n }\n }\n\n useEffect(() => {\n fetchData()\n }, [])\n\n return (\n // your component JSX\n )\n}`}</SyntaxHighlighter>\n </div>\n <p>\n For more information on using <code>axios-mock-adapter</code>,\n visit the{' '}\n <a\n href=\"https://github.com/ctimmerm/axios-mock-adapter\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n official GitHub repository\n </a>\n .\n </p>\n </>\n )\n}\n\nexport default MockApi\n"],"names":["MockApi","jsxs","Fragment","jsx","SyntaxHighlighter"],"mappings":";;AAEA,MAAMA,IAAU,~~MAGJ~~,gBAAAC,EAAAC,GAAA,~~EAAA~~,UAAA;AAAA,EAAA,gBAAAC,EAAC,OAAE,~~UAMH~~,qRAAA,~~CAAA~~;AAAA,oBACC,~~KAAE~~,~~EAAA~~,UAAA;AAAA,IAAA;AAAA,IACmB;AAAA,IAClB,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,QAAO;AAAA,QACP,KAAI;AAAA,QACP,UAAA;AAAA,MAAA;AAAA,~~IAED~~;AAAA,~~IAAK~~;AAAA,IAAI;AAAA,EAAA,GAGb;AAAA,~~EACC~~,gBAAAF,~~EAAA~~,OAAA,EAAI,WAAU,SAAQ,IAAG,kBACtB,UAAA;AAAA,IAAA,gBAAAE,EAAC,QAAG,~~UAAkB~~,qBAAA,~~CAAA~~;AAAA,IACtB,gBAAAF,EAAC,~~KAAE~~,~~EAAA~~,WAAU,QAAO,UAAA;AAAA,MAAA;AAAA,MAC2B;AAAA,MAC3C,gBAAAE,EAAC,YAAO,~~UAAW~~,cAAA,~~CAAA~~;AAAA,MAAS;AAAA,MACb,gBAAAA,EAAC,UAAK,~~UAAU~~,aAAA,~~CAAA~~;AAAA,MAAO;AAAA,MAAU;AAAA,MAChD,gBAAAA,EAAC,UAAK,~~UAAK~~,QAAA,~~CAAA~~;AAAA,MAAO;AAAA,MAAI,gBAAAA,EAAC,UAAK,~~UAAyB~~,4BAAA,~~CAAA~~;AAAA,MAAO;AAAA,IAAA,GAEhE;AAAA,IACA,gBAAAA,EAACC,~~GAAkB~~,~~EAAA~~,UAAS,MAAM,UAAA;AAAA;AAAA;AAAA,~~GAG~~/C~~,CAAA~~;AAAA,EAAA,GACS;AAAA,~~EACC~~,gBAAAH,~~EAAA~~,OAAA,EAAI,WAAU,SAAQ,IAAG,gBACtB,UAAA;AAAA,IAAA,gBAAAE,EAAC,QAAG,~~UAAkB~~,qBAAA,~~CAAA~~;AAAA,~~IACrB~~,gBAAAA,~~EAAA~~,KAAA,EAAE,WAAU,QAAO,~~UAGpB~~,~~gGAAA~~;AAAA,sBACC,~~MACG~~,~~EAAA~~,UAAA;AAAA,MAAA,gBAAAF,EAAC,~~MACG~~,~~EAAA~~,UAAA;AAAA,QAAA,gBAAAE,EAAC,YAAO,~~UAAK~~,QAAA,~~CAAA~~;AAAA,QACb,gBAAAF,EAAC,~~KAAE~~,~~EAAA~~,WAAU,QAAO,UAAA;AAAA,UAAA;AAAA,UACV,gBAAAE,EAAC,UAAK,~~UAAuB~~,0BAAA,~~CAAA~~;AAAA,UAAO;AAAA,QAAA,GAG9C;AAAA,QACA,gBAAAA,EAACC,~~GAAkB~~,~~EAAA~~,UAAS,MAAM,UAAA;AAAA;AAAA;AAAA,~~gDAGV~~,~~CAAA~~;AAAA,MAAA,GAC5B;AAAA,wBACC,~~MACG~~,~~EAAA~~,UAAA;AAAA,QAAA,gBAAAD,EAAC,YAAO,~~UAAiB~~,oBAAA,~~CAAA~~;AAAA,QACzB,gBAAAF,EAAC,~~KAAE~~,~~EAAA~~,WAAU,QAAO,UAAA;AAAA,UAAA;AAAA,UACgB;AAAA,UAChC,gBAAAE,EAAC,UAAK,~~UAAuB~~,0BAAA,~~CAAA~~;AAAA,UAAO;AAAA,UACrB,gBAAAA,EAAC,UAAK,~~UAAc~~,iBAAA,~~CAAA~~;AAAA,UAAO;AAAA,UACT;AAAA,UACjC,gBAAAA,EAAC,UAAK,~~UAAc~~,iBAAA,~~CAAA~~;AAAA,UAAO;AAAA,QAAA,GAC/B;AAAA,QACA,gBAAAA,EAACC,~~GAAkB~~,~~EAAA~~,UAAS,MAAM,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~IAiBtD~~,~~CAAA~~;AAAA,MAAA,GACgB;AAAA,wBACC,~~MACG~~,~~EAAA~~,UAAA;AAAA,QAAA,gBAAAH,EAAC,~~KAAE~~,~~EAAA~~,UAAA;AAAA,UAAA;AAAA,UACmB,gBAAAE,EAAC,UAAK,~~UAAc~~,iBAAA,~~CAAA~~;AAAA,UAAO;AAAA,UACpB;AAAA,UACzB,gBAAAA,EAAC,UAAK,~~UAAiB~~,oBAAA,~~CAAA~~;AAAA,UAAO;AAAA,QAAA,GAClC;AAAA,QACA,gBAAAA,EAACC,~~GAAkB~~,~~EAAA~~,UAAS,MAAM,UAAA;AAAA;AAAA;AAAA;AAAA,~~6BAI7B~~,~~CAAA~~;AAAA,MAAA,~~EACT~~,~~CAAA~~;AAAA,IAAA,~~EACJ~~,~~CAAA~~;AAAA,EAAA,GACJ;AAAA,oBACC,~~OACG~~,~~EAAA~~,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAE,~~UAGH~~,sGAAA,~~CAAA~~;AAAA,IACA,gBAAAA,EAACC,~~GAAkB~~,~~EAAA~~,UAAS,MAAM,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAc/C;AAAA,IACa,gBAAAD,EAACC,~~GAAkB~~,~~EAAA~~,UAAS,MAAM,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~GAsB~~/C~~,CAAA~~;AAAA,EAAA,GACS;AAAA,oBACC,~~KAAE~~,~~EAAA~~,UAAA;AAAA,IAAA;AAAA,IAC+B,gBAAAD,EAAC,UAAK,~~UAAkB~~,qBAAA,~~CAAA~~;AAAA,IAAO;AAAA,IACnD;AAAA,IACV,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,QAAO;AAAA,QACP,KAAI;AAAA,QACP,UAAA;AAAA,MAAA;AAAA,~~IAED~~;AAAA,~~IAAI~~;AAAA,EAAA,~~EAER~~,~~CAAA~~;AAAA,GACJ;"}
1	+ {"version":3,"file":"MockApi.js","sources":["../../../../../../../lib/@ecme/views/guide/Documentations/components/MockApi.tsx"],"sourcesContent":["import SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\n\nconst MockApi = () => {\n return (\n <>\n <p>\n A mock API is a tool that simulates the behavior of a real API,\n providing data responses as if they were from an actual server.\n This can be extremely useful in situations where the real API is\n not yet fully developed, or when you need to simulate API calls\n for unit testing.\n </p>\n <p>\n Ecme utilizes the{' '}\n <a\n href=\"https://github.com/ctimmerm/axios-mock-adapter\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n axios-mock-adapter\n </a>{' '}\n library to handle API mocking. All API interactions in our demo\n operate through this adapter.\n </p>\n <div className=\"mt-10\" id=\"disableMockApi\">\n <h5>Disabling Mock API</h5>\n <p className=\"mt-1\">\n By default, the mock API is enabled in the{' '}\n <strong>starter-kit</strong>. If you want to disable it,\n simply set the <code>enableMock</code> field to{' '}\n <code>false</code> in <code>src/configs/app.config.ts</code>\n .\n </p>\n <SyntaxHighlighter language=\"ts\">{`const appConfig = {\n ...,\n enableMock: false\n}`}</SyntaxHighlighter>\n </div>\n <div className=\"mt-10\" id=\"usingMockApi\">\n <h5>Using the Mock API</h5>\n <p className=\"mt-1\">\n If you intend to use the mock API, follow these steps to\n create fake database data and APIs:\n </p>\n <ol>\n <li>\n <strong>Setup</strong>\n <p className=\"mt-1\">\n Go to <code>src/mock/MockAdapter.ts</code>. This\n file contains the basic configuration for the mock\n API.\n </p>\n <SyntaxHighlighter language=\"ts\">{`import MockAdapter from 'axios-mock-adapter'\nimport AxiosBase from '@/services/axios/AxiosBase'\n\nexport const mock = new MockAdapter(AxiosBase)`}</SyntaxHighlighter>\n </li>\n <li>\n <strong>Create a Mock API</strong>\n <p className=\"mt-1\">\n To create a mock API, add it to{' '}\n <code>src/mock/MockAdapter.ts</code>. For example,\n you can create <code>userFakeApi.ts</code>. Remember\n to import the mock instance from{' '}\n <code>MockAdapter.ts</code> to create a route.\n </p>\n <SyntaxHighlighter language=\"ts\">{`import { mock } from '../MockAdapter'\n\nmock.onGet('/api/users').reply(() => {\n\treturn [200, [\n {\n id: '1',\n name: 'Carolyn Perkins',\n },\n {\n id: '2',\n name: 'Terrance Moreno',\n },\n {\n id: '3',\n name: 'Ron Vargas',\n },\n ]];\n})`}</SyntaxHighlighter>\n </li>\n <li>\n <p>\n Next, import your <code>userFakeApi.ts</code> file\n into the mock entry file{' '}\n <code>src/mock/index.ts</code>.\n </p>\n <SyntaxHighlighter language=\"ts\">{`import { mock } from './MockAdapter'\nimport './fakeApi/userFakeApi'\n...\n\nmock.onAny().passThrough();`}</SyntaxHighlighter>\n </li>\n </ol>\n </div>\n <div>\n <p>\n Now, you can make requests to this mock API and receive the\n static data you set up as the response.\n </p>\n <SyntaxHighlighter language=\"ts\">{`// service\nimport ApiService from \"./ApiService\"\n\ntype GetUserResponse = {\n id: string\n name: string\n email: string\n}[]\n\nexport async function apiGetUsers () {\n return ApiService.fetchData<GetUserResponse>({\n url: '/api/getUsers',\n method: 'get'\n })\n}`}</SyntaxHighlighter>\n <SyntaxHighlighter language=\"ts\">{`// component\nimport { useEffect } from 'react'\nimport { apiGetUsers } from './YourService.ts'\n\nconst YourComponent = () => {\n\n const fetchData = async () => {\n try {\n const resp = await apiGetUsers()\n console.log(resp.data)\n } catch (errors) {\n // handle errors\n }\n }\n\n useEffect(() => {\n fetchData()\n }, [])\n\n return (\n // your component JSX\n )\n}`}</SyntaxHighlighter>\n </div>\n <p>\n For more information on using <code>axios-mock-adapter</code>,\n visit the{' '}\n <a\n href=\"https://github.com/ctimmerm/axios-mock-adapter\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n official GitHub repository\n </a>\n .\n </p>\n </>\n )\n}\n\nexport default MockApi\n"],"names":["MockApi","jsxs","Fragment","jsx","SyntaxHighlighter"],"mappings":"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"}

package/dist/lib/@ecme/views/guide/Documentations/components/NavigationConfig.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NavigationConfig.js","sources":["../../../../../../../lib/@ecme/views/guide/Documentations/components/NavigationConfig.tsx"],"sourcesContent":["import SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\nimport DemoComponentApi from '@/components/docs/DemoComponentApi'\n\nconst NavigationConfig = () => {\n return (\n <>\n <p>\n We form our navigation structure as array of objects & render it\n into UI eventually. You can change or customize the app\n navigation very easily by accessing{' '}\n <code>src/configs/navigation.config/index.ts</code>\n </p>\n <p>Here is the type for a single menu item</p>\n <SyntaxHighlighter language=\"ts\">{`export type HorizontalMenuMeta = {\n layout: 'default'\n} \| {\n layout: 'columns'\n showColumnTitle?: boolean\n columns: 1 \| 2 \| 3 \| 4 \| 5\n} \| {\n layout: 'tabs'\n columns: 1 \| 2 \| 3 \| 4 \| 5\n}\n\nexport interface NavigationTree {\n key: string\n path: string\n isExternalLink?: boolean\n title: string\n translateKey: string\n icon: string\n type: 'title' \| 'collapse' \| 'item'\n authority: string[]\n subMenu: NavigationTree[]\n description?: string\n meta?: {\n horizontalMenu?: HorizontalMenuMeta\n description?: {\n translateKey: string\n label: string\n }\n }\n}\n`}</SyntaxHighlighter>\n <br />\n <DemoComponentApi\n hideApiTitle\n keyText=\"properties\"\n api={[\n {\n api: [\n {\n propName: 'key',\n type: `<code>string</code></code>`,\n default: `-`,\n desc: 'An unique key that need to be match with the route this menu navigate to',\n },\n {\n propName: 'path',\n type: `<code>string</code>`,\n default: '-',\n desc: 'An URL that this menu item link to',\n },\n {\n propName: 'isExternalLink',\n type: `<code>boolean</code>`,\n default: '-',\n desc: 'Whether to open link in new tab upon click',\n },\n {\n propName: 'title',\n type: `<code>string</code>`,\n default: '-',\n desc: 'Rendered text of this menu item',\n },\n {\n propName: 'translateKey',\n type: `<code>string</code>`,\n default: '-',\n desc: 'Translate key to translate the rendered text in menu item, fallback to <code>title</code> if empty or invalid',\n },\n {\n propName: 'icon',\n type: `<code>string</code>`,\n default: '-',\n desc: 'Render icon in menu item, string value must tally with object key in <code>navigation-icon.config.tsx</code>',\n },\n {\n propName: 'type',\n type: `<code>'title'</code> \| <code>'collapse'</code> \| <code>'item'</code>`,\n default: `-`,\n desc: 'To define the type of current menu item',\n },\n {\n propName: 'authority',\n type: `<code>string[]</code>`,\n default: `-`,\n desc: 'Display menu items to users who have the roles given, there will be no access block if the this field is undefine or empty array',\n },\n {\n propName: 'subMenu',\n type: `<code>navigationConfig[]</code>`,\n default: `-`,\n desc: `Whether have child in this menu item, it will render a menu group under this menu item, if the <code>type</code> is <code>'title'</code> or <code>'collapse'</code>, this field accept properties within this table`,\n },\n {\n propName: 'meta',\n type: `<code>{\n horizontalMenu?: HorizontalMenuMeta\n description?: {\n translateKey: string\n label: string\n }\n }</code>`,\n default: `-`,\n desc: `This is an optional configuration field for navigation. It can include additional information that's only needed in specific use cases`,\n },\n {\n propName: 'meta.horizontalMenu',\n type: `<code>{\n layout: 'default'\n} \| {\n layout: 'columns'\n showColumnTitle?: boolean\n columns: 1 \| 2 \| 3 \| 4 \| 5\n} \| {\n layout: 'tabs'\n columns: 1 \| 2 \| 3 \| 4 \| 5\n}</code>`,\n default: `-`,\n desc: `Further configuration for horizontal menu, e.g <code>layout</code>, <code>columns</code> & etc.`,\n },\n {\n propName: 'meta.description',\n type: `<code>navigationConfig[]</code>`,\n default: `-`,\n desc: `Description of the page, description only available when <code>themeConfig.layout.type</code> is <code>'contentOverlay'</code>`,\n },\n ],\n },\n ]}\n />\n <p>An example of structured navigation config</p>\n <SyntaxHighlighter language=\"ts\">{`const navigationConfig = [\n {\n key: 'uiComponent',\n path: '',\n title: 'Ui Component',\n translateKey: 'nav.uiComponents',\n icon: 'uiComponents',\n type: 'title',\n authority: ['admin', 'user'],\n /** We can define mnu config here, if we are using horizontal menu */\n meta: {\n horizontalMenu: {\n layout: 'columns',\n columns: 4\n }\n },\n subMenu: [\n {\n key: 'uiComponent.common',\n path: '',\n title: 'Common',\n translateKey: 'nav.uiComponentsCommon.common',\n icon: 'common',\n type: 'collapse',\n authority: ['admin', 'user'],\n subMenu: [\n {\n key: 'uiComponent.common.button',\n path: '/button',\n title: 'Button',\n translateKey: 'nav.uiComponentsCommon.button',\n icon: '',\n type: 'item',\n authority: ['admin', 'user'],\n subMenu: []\n },\n {\n key: 'uiComponent.common.typography',\n path: '/typography',\n title: 'Typography',\n translateKey: 'nav.uiComponentsCommon.typography',\n icon: '',\n type: 'item',\n authority: ['admin', 'user'],\n subMenu: []\n }\n ]\n }\n ]\n }\n]`}</SyntaxHighlighter>\n <div className=\"mt-10\" id=\"configuringNavigationIcon\">\n <h5>Configuring navigation icon</h5>\n <p className=\"mt-1\">\n Navigation icon configuration placed on seperate file in{' '}\n <code>src/configs/navigation-icon.config.tsx</code>\n </p>\n <p>\n In the above example, we use string value{' '}\n <code>uiComponents</code> in the <code>icon</code> field, we\n must then use this value in{' '}\n <code>navigation-icon.config.ts</code> to define the icon\n for the callout.\n </p>\n <p>\n First, import the icon you want from{' '}\n <a\n href=\"https://react-icons.github.io/react-icons/\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n react-icons\n </a>\n </p>\n <SyntaxHighlighter language=\"ts\">{`import { FaBeer } from 'react-icons/fa'\n\nconst navigationIcon = {}\n`}</SyntaxHighlighter>\n <p>\n Set the value used in <code>icon</code> field as & the\n imported icon component as value\n </p>\n <SyntaxHighlighter language=\"tsx\">{`import { FaBeer } from 'react-icons/fa'\n\nconst navigationIcon = {\n uiComponents: <FaBeer />\n}\n`}</SyntaxHighlighter>\n <p>\n Now the corresponding menu item will render{' '}\n <code>FaBeer</code> as the menu icon.\n </p>\n </div>\n </>\n )\n}\n\nexport default NavigationConfig\n"],"names":["NavigationConfig","jsxs","Fragment","jsx","SyntaxHighlighter","DemoComponentApi"],"mappings":"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"}
1	+ {"version":3,"file":"NavigationConfig.js","sources":["../../../../../../../lib/@ecme/views/guide/Documentations/components/NavigationConfig.tsx"],"sourcesContent":["import SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\nimport DemoComponentApi from '@/components/docs/DemoComponentApi'\n\nconst NavigationConfig = () => {\n return (\n <>\n <p>\n We form our navigation structure as array of objects & render it\n into UI eventually. You can change or customize the app\n navigation very easily by accessing{' '}\n <code>src/configs/navigation.config/index.ts</code>\n </p>\n <p>Here is the type for a single menu item</p>\n <SyntaxHighlighter language=\"ts\">{`export type HorizontalMenuMeta = {\n layout: 'default'\n} \| {\n layout: 'columns'\n showColumnTitle?: boolean\n columns: 1 \| 2 \| 3 \| 4 \| 5\n} \| {\n layout: 'tabs'\n columns: 1 \| 2 \| 3 \| 4 \| 5\n}\n\nexport interface NavigationTree {\n key: string\n path: string\n isExternalLink?: boolean\n title: string\n translateKey: string\n icon: string\n type: 'title' \| 'collapse' \| 'item'\n authority: string[]\n subMenu: NavigationTree[]\n description?: string\n meta?: {\n horizontalMenu?: HorizontalMenuMeta\n description?: {\n translateKey: string\n label: string\n }\n }\n}\n`}</SyntaxHighlighter>\n <br />\n <DemoComponentApi\n hideApiTitle\n keyText=\"properties\"\n api={[\n {\n api: [\n {\n propName: 'key',\n type: `<code>string</code></code>`,\n default: `-`,\n desc: 'An unique key that need to be match with the route this menu navigate to',\n },\n {\n propName: 'path',\n type: `<code>string</code>`,\n default: '-',\n desc: 'An URL that this menu item link to',\n },\n {\n propName: 'isExternalLink',\n type: `<code>boolean</code>`,\n default: '-',\n desc: 'Whether to open link in new tab upon click',\n },\n {\n propName: 'title',\n type: `<code>string</code>`,\n default: '-',\n desc: 'Rendered text of this menu item',\n },\n {\n propName: 'translateKey',\n type: `<code>string</code>`,\n default: '-',\n desc: 'Translate key to translate the rendered text in menu item, fallback to <code>title</code> if empty or invalid',\n },\n {\n propName: 'icon',\n type: `<code>string</code>`,\n default: '-',\n desc: 'Render icon in menu item, string value must tally with object key in <code>navigation-icon.config.tsx</code>',\n },\n {\n propName: 'type',\n type: `<code>'title'</code> \| <code>'collapse'</code> \| <code>'item'</code>`,\n default: `-`,\n desc: 'To define the type of current menu item',\n },\n {\n propName: 'authority',\n type: `<code>string[]</code>`,\n default: `-`,\n desc: 'Display menu items to users who have the roles given, there will be no access block if the this field is undefine or empty array',\n },\n {\n propName: 'subMenu',\n type: `<code>navigationConfig[]</code>`,\n default: `-`,\n desc: `Whether have child in this menu item, it will render a menu group under this menu item, if the <code>type</code> is <code>'title'</code> or <code>'collapse'</code>, this field accept properties within this table`,\n },\n {\n propName: 'meta',\n type: `<code>{\n horizontalMenu?: HorizontalMenuMeta\n description?: {\n translateKey: string\n label: string\n }\n }</code>`,\n default: `-`,\n desc: `This is an optional configuration field for navigation. It can include additional information that's only needed in specific use cases`,\n },\n {\n propName: 'meta.horizontalMenu',\n type: `<code>{\n layout: 'default'\n} \| {\n layout: 'columns'\n showColumnTitle?: boolean\n columns: 1 \| 2 \| 3 \| 4 \| 5\n} \| {\n layout: 'tabs'\n columns: 1 \| 2 \| 3 \| 4 \| 5\n}</code>`,\n default: `-`,\n desc: `Further configuration for horizontal menu, e.g <code>layout</code>, <code>columns</code> & etc.`,\n },\n {\n propName: 'meta.description',\n type: `<code>navigationConfig[]</code>`,\n default: `-`,\n desc: `Description of the page, description only available when <code>themeConfig.layout.type</code> is <code>'contentOverlay'</code>`,\n },\n ],\n },\n ]}\n />\n <p>An example of structured navigation config</p>\n <SyntaxHighlighter language=\"ts\">{`const navigationConfig = [\n {\n key: 'uiComponent',\n path: '',\n title: 'Ui Component',\n translateKey: 'nav.uiComponents',\n icon: 'uiComponents',\n type: 'title',\n authority: ['admin', 'user'],\n /** We can define mnu config here, if we are using horizontal menu */\n meta: {\n horizontalMenu: {\n layout: 'columns',\n columns: 4\n }\n },\n subMenu: [\n {\n key: 'uiComponent.common',\n path: '',\n title: 'Common',\n translateKey: 'nav.uiComponentsCommon.common',\n icon: 'common',\n type: 'collapse',\n authority: ['admin', 'user'],\n subMenu: [\n {\n key: 'uiComponent.common.button',\n path: '/button',\n title: 'Button',\n translateKey: 'nav.uiComponentsCommon.button',\n icon: '',\n type: 'item',\n authority: ['admin', 'user'],\n subMenu: []\n },\n {\n key: 'uiComponent.common.typography',\n path: '/typography',\n title: 'Typography',\n translateKey: 'nav.uiComponentsCommon.typography',\n icon: '',\n type: 'item',\n authority: ['admin', 'user'],\n subMenu: []\n }\n ]\n }\n ]\n }\n]`}</SyntaxHighlighter>\n <div className=\"mt-10\" id=\"configuringNavigationIcon\">\n <h5>Configuring navigation icon</h5>\n <p className=\"mt-1\">\n Navigation icon configuration placed on seperate file in{' '}\n <code>src/configs/navigation-icon.config.tsx</code>\n </p>\n <p>\n In the above example, we use string value{' '}\n <code>uiComponents</code> in the <code>icon</code> field, we\n must then use this value in{' '}\n <code>navigation-icon.config.ts</code> to define the icon\n for the callout.\n </p>\n <p>\n First, import the icon you want from{' '}\n <a\n href=\"https://react-icons.github.io/react-icons/\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n react-icons\n </a>\n </p>\n <SyntaxHighlighter language=\"ts\">{`import { FaBeer } from 'react-icons/fa'\n\nconst navigationIcon = {}\n`}</SyntaxHighlighter>\n <p>\n Set the value used in <code>icon</code> field as & the\n imported icon component as value\n </p>\n <SyntaxHighlighter language=\"tsx\">{`import { FaBeer } from 'react-icons/fa'\n\nconst navigationIcon = {\n uiComponents: <FaBeer />\n}\n`}</SyntaxHighlighter>\n <p>\n Now the corresponding menu item will render{' '}\n <code>FaBeer</code> as the menu icon.\n </p>\n </div>\n </>\n )\n}\n\nexport default NavigationConfig\n"],"names":["NavigationConfig","jsxs","Fragment","jsx","SyntaxHighlighter","DemoComponentApi"],"mappings":"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"}

package/dist/lib/@ecme/views/guide/Documentations/components/OverallThemeConfig.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OverallThemeConfig.js","sources":["../../../../../../../lib/@ecme/views/guide/Documentations/components/OverallThemeConfig.tsx"],"sourcesContent":["import SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\nimport DemoComponentApi from '@/components/docs/DemoComponentApi'\n\nconst OverallThemeConfig = () => {\n return (\n <>\n <p>\n The file <code>src/configs/theme.config.ts</code> contains the\n default theme settings for the template. These configurations\n are predefined but can be customized to suit your needs. Below\n is the default configuration:\n </p>\n <p>\n If you realize that the theme did not change after setting a new\n value to the configuration, you could consider to clear the{' '}\n <code>localStorage</code>, if you If you have no requiremnent to\n memorize users preferred appearance in the app, you can remove\n the persist method from the store. Refer to State Persistence\n section below. If the theme doesn't update after changing\n its configuration, try clearing the <code>localStorage</code>.\n If you don't need to remember the user's preferred\n appearance in the app, you can remove the <code>persist</code>{' '}\n method from the store. For more details, see the{' '}\n <strong>"State Persistence"</strong> section below.\n </p>\n <SyntaxHighlighter language=\"ts\">{`import { THEME_ENUM } from '@/constants/theme.constant'\nimport {\n Direction,\n Mode,\n ControlSize,\n LayoutType,\n} from '@/@types/theme'\n\nexport type ThemeConfig = {\n themeSchema: string\n direction: Direction\n mode: Mode\n panelExpand: boolean\n controlSize: ControlSize\n layout: {\n type: LayoutType\n sideNavCollapse: boolean\n }\n}\n\nexport const themeConfig: ThemeConfig = {\n themeSchema: '',\n direction: THEME_ENUM.DIR_LTR,\n mode: THEME_ENUM.MODE_LIGHT,\n panelExpand: false,\n controlSize: 'md',\n layout: {\n type: THEME_ENUM.LAYOUT_COLLAPSIBLE_SIDE,\n sideNavCollapse: false,\n },\n}`}</SyntaxHighlighter>\n <div className=\"mt-10\" id=\"properties\">\n <h5>Configuration Properties</h5>\n <DemoComponentApi\n hideApiTitle\n api={[\n {\n api: [\n {\n propName: 'themeSchema',\n type: `<code>string</code>`,\n default: `<code>''</code>`,\n desc: 'Sets the color scheme of the template. you can leave this field empty if you are having dynamic theme in your app',\n },\n {\n propName: 'direction',\n type: `<code>'ltr'</code> \| <code>'rtl'</code>`,\n default: `<code>'ltr'</code>`,\n desc: 'Defines the text direction for the template.',\n },\n {\n propName: 'mode',\n type: `<code>'light'</code> \| <code>'dark'</code>`,\n default: `<code>'light'</code>`,\n desc: 'Toggles between Light and Dark mode.',\n },\n {\n propName: 'panelExpand',\n type: `<code>boolean</code>`,\n default: `<code>false</code>`,\n desc: 'Determines whether the side panel is expanded by default.',\n },\n {\n propName: 'controlSize',\n type: `<code>'xs'</code> \| <code>'sm'</code> \| <code>'md'</code> \| <code>'lg'</code>`,\n default: `<code>'md'</code>`,\n desc: 'Sets the initial size of control inputs.',\n },\n {\n propName: 'layout.type',\n type: `<code>'blank'</code> \| <code>'collapsibleSide'</code> \| <code>'stackedSide'</code> \| <code>'topBarClassic'</code> \| <code>'framelessSide'</code> \| <code>'contentOverlay'</code>`,\n default: `<code>'modern'</code>`,\n desc: 'Defines the overall layout style of the application.',\n },\n {\n propName: 'layout.sideNavCollapse',\n type: `<code>boolean</code>`,\n default: `<code>false</code>`,\n desc: `Specifies whether the side navigation is collapsed. This option is only applicable when <code>type</code> is set to <code>'collapsibleSide'</code> or <code>'framelessSide'</code>.`,\n },\n ],\n },\n ]}\n />\n </div>\n <div className=\"mt-10\" id=\"persistence\">\n <h5>State Persistence</h5>\n <p>\n The <code>themeConfig</code> state is persisted by default,\n meaning your settings will be remembered by the browser all\n along. If you prefer not to persist the theme state for the\n users, you can modify <code>src/store/themeStore.ts</code>{' '}\n by removing the <code>persist</code> method from the Zustand\n store.\n </p>\n <p>\n The persisted state is also stored in the browser's{' '}\n <code>localStorage</code>. If you encounter issues where\n theme changes are not reflected, you may want to clear the{' '}\n <code>localStorage</code> key named{' '}\n <code>'theme'</code>. You can do this by running{' '}\n <code>localStorage.removeItem('theme')</code> in\n the browser console.\n </p>\n </div>\n </>\n )\n}\n\nexport default OverallThemeConfig\n"],"names":["OverallThemeConfig","jsxs","Fragment","jsx","SyntaxHighlighter","DemoComponentApi"],"mappings":";;;AAGA,MAAMA,IAAqB,~~MAGf~~,gBAAAC,EAAAC,GAAA,~~EAAA~~,UAAA;AAAA,EAAA,gBAAAD,EAAC,~~KAAE~~,~~EAAA~~,UAAA;AAAA,IAAA;AAAA,IACU,gBAAAE,EAAC,UAAK,~~UAA2B~~,8BAAA,~~CAAA~~;AAAA,IAAO;AAAA,EAAA,GAIrD;AAAA,oBACC,~~KAAE~~,~~EAAA~~,UAAA;AAAA,IAAA;AAAA,IAE6D;AAAA,IAC5D,gBAAAA,EAAC,UAAK,~~UAAY~~,eAAA,~~CAAA~~;AAAA,IAAO;AAAA,IAIW,gBAAAA,EAAC,UAAK,~~UAAY~~,eAAA,~~CAAA~~;AAAA,IAAO;AAAA,IAEnB,gBAAAA,EAAC,UAAK,~~UAAO~~,UAAA,~~CAAA~~;AAAA,IAAQ;AAAA,IAAI;AAAA,IAClB;AAAA,IACjD,gBAAAA,EAAC,YAAO,~~UAA6B~~,sBAAA,~~CAAA~~;AAAA,IAAS;AAAA,EAAA,GAClD;AAAA,EACA,gBAAAA,EAACC,~~GAAkB~~,~~EAAA~~,UAAS,MAAM,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA8B3C;AAAA,~~EACU~~,gBAAAH,~~EAAA~~,OAAA,EAAI,WAAU,SAAQ,IAAG,cACtB,UAAA;AAAA,IAAA,gBAAAE,EAAC,QAAG,~~UAAwB~~,2BAAA,~~CAAA~~;AAAA,IAC5B,gBAAAA;AAAA,MAACE;AAAA,MAAA;AAAA,QACG,cAAY;AAAA,QACZ,KAAK;AAAA,UACD;AAAA,YACI,KAAK;AAAA,cACD;AAAA,gBACI,UAAU;AAAA,gBACV,MAAM;AAAA,gBACN,SAAS;AAAA,gBACT,MAAM;AAAA,~~cACV~~;AAAA,~~cACA~~;AAAA,gBACI,UAAU;AAAA,gBACV,MAAM;AAAA,gBACN,SAAS;AAAA,gBACT,MAAM;AAAA,~~cACV~~;AAAA,~~cACA~~;AAAA,gBACI,UAAU;AAAA,gBACV,MAAM;AAAA,gBACN,SAAS;AAAA,gBACT,MAAM;AAAA,~~cACV~~;AAAA,~~cACA~~;AAAA,gBACI,UAAU;AAAA,gBACV,MAAM;AAAA,gBACN,SAAS;AAAA,gBACT,MAAM;AAAA,~~cACV~~;AAAA,~~cACA~~;AAAA,gBACI,UAAU;AAAA,gBACV,MAAM;AAAA,gBACN,SAAS;AAAA,gBACT,MAAM;AAAA,~~cACV~~;AAAA,~~cACA~~;AAAA,gBACI,UAAU;AAAA,gBACV,MAAM;AAAA,gBACN,SAAS;AAAA,gBACT,MAAM;AAAA,~~cACV~~;AAAA,~~cACA~~;AAAA,gBACI,UAAU;AAAA,gBACV,MAAM;AAAA,gBACN,SAAS;AAAA,gBACT,MAAM;AAAA,cAAA;AAAA,YACV;AAAA,UACJ;AAAA,QACJ;AAAA,MACJ;AAAA,IAAA;AAAA,EACJ,GACJ;AAAA,~~EACC~~,gBAAAJ,~~EAAA~~,OAAA,EAAI,WAAU,SAAQ,IAAG,eACtB,UAAA;AAAA,IAAA,gBAAAE,EAAC,QAAG,~~UAAiB~~,oBAAA,~~CAAA~~;AAAA,sBACpB,~~KAAE~~,~~EAAA~~,UAAA;AAAA,MAAA;AAAA,MACK,gBAAAA,EAAC,UAAK,~~UAAW~~,cAAA,~~CAAA~~;AAAA,MAAO;AAAA,MAGN,gBAAAA,EAAC,UAAK,~~UAAuB~~,0BAAA,~~CAAA~~;AAAA,MAAQ;AAAA,MAAI;AAAA,MAC/C,gBAAAA,EAAC,UAAK,~~UAAO~~,UAAA,~~CAAA~~;AAAA,MAAO;AAAA,IAAA,GAExC;AAAA,sBACC,~~KAAE~~,~~EAAA~~,UAAA;AAAA,MAAA;AAAA,MAC0D;AAAA,MACzD,gBAAAA,EAAC,UAAK,~~UAAY~~,eAAA,~~CAAA~~;AAAA,MAAO;AAAA,MACkC;AAAA,MAC3D,gBAAAA,EAAC,UAAK,~~UAAY~~,eAAA,~~CAAA~~;AAAA,MAAO;AAAA,MAAW;AAAA,MACpC,gBAAAA,EAAC,UAAK,~~UAAiB~~,UAAA,~~CAAA~~;AAAA,MAAO;AAAA,MAA6B;AAAA,MAC3D,gBAAAA,EAAC,UAAK,~~UAA0C~~,mCAAA,~~CAAA~~;AAAA,MAAO;AAAA,IAAA,~~EAE3D~~,~~CAAA~~;AAAA,EAAA,~~EACJ~~,~~CAAA~~;AAAA,GACJ;"}
1	+ {"version":3,"file":"OverallThemeConfig.js","sources":["../../../../../../../lib/@ecme/views/guide/Documentations/components/OverallThemeConfig.tsx"],"sourcesContent":["import SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\nimport DemoComponentApi from '@/components/docs/DemoComponentApi'\n\nconst OverallThemeConfig = () => {\n return (\n <>\n <p>\n The file <code>src/configs/theme.config.ts</code> contains the\n default theme settings for the template. These configurations\n are predefined but can be customized to suit your needs. Below\n is the default configuration:\n </p>\n <p>\n If you realize that the theme did not change after setting a new\n value to the configuration, you could consider to clear the{' '}\n <code>localStorage</code>, if you If you have no requiremnent to\n memorize users preferred appearance in the app, you can remove\n the persist method from the store. Refer to State Persistence\n section below. If the theme doesn't update after changing\n its configuration, try clearing the <code>localStorage</code>.\n If you don't need to remember the user's preferred\n appearance in the app, you can remove the <code>persist</code>{' '}\n method from the store. For more details, see the{' '}\n <strong>"State Persistence"</strong> section below.\n </p>\n <SyntaxHighlighter language=\"ts\">{`import { THEME_ENUM } from '@/constants/theme.constant'\nimport {\n Direction,\n Mode,\n ControlSize,\n LayoutType,\n} from '@/@types/theme'\n\nexport type ThemeConfig = {\n themeSchema: string\n direction: Direction\n mode: Mode\n panelExpand: boolean\n controlSize: ControlSize\n layout: {\n type: LayoutType\n sideNavCollapse: boolean\n }\n}\n\nexport const themeConfig: ThemeConfig = {\n themeSchema: '',\n direction: THEME_ENUM.DIR_LTR,\n mode: THEME_ENUM.MODE_LIGHT,\n panelExpand: false,\n controlSize: 'md',\n layout: {\n type: THEME_ENUM.LAYOUT_COLLAPSIBLE_SIDE,\n sideNavCollapse: false,\n },\n}`}</SyntaxHighlighter>\n <div className=\"mt-10\" id=\"properties\">\n <h5>Configuration Properties</h5>\n <DemoComponentApi\n hideApiTitle\n api={[\n {\n api: [\n {\n propName: 'themeSchema',\n type: `<code>string</code>`,\n default: `<code>''</code>`,\n desc: 'Sets the color scheme of the template. you can leave this field empty if you are having dynamic theme in your app',\n },\n {\n propName: 'direction',\n type: `<code>'ltr'</code> \| <code>'rtl'</code>`,\n default: `<code>'ltr'</code>`,\n desc: 'Defines the text direction for the template.',\n },\n {\n propName: 'mode',\n type: `<code>'light'</code> \| <code>'dark'</code>`,\n default: `<code>'light'</code>`,\n desc: 'Toggles between Light and Dark mode.',\n },\n {\n propName: 'panelExpand',\n type: `<code>boolean</code>`,\n default: `<code>false</code>`,\n desc: 'Determines whether the side panel is expanded by default.',\n },\n {\n propName: 'controlSize',\n type: `<code>'xs'</code> \| <code>'sm'</code> \| <code>'md'</code> \| <code>'lg'</code>`,\n default: `<code>'md'</code>`,\n desc: 'Sets the initial size of control inputs.',\n },\n {\n propName: 'layout.type',\n type: `<code>'blank'</code> \| <code>'collapsibleSide'</code> \| <code>'stackedSide'</code> \| <code>'topBarClassic'</code> \| <code>'framelessSide'</code> \| <code>'contentOverlay'</code>`,\n default: `<code>'modern'</code>`,\n desc: 'Defines the overall layout style of the application.',\n },\n {\n propName: 'layout.sideNavCollapse',\n type: `<code>boolean</code>`,\n default: `<code>false</code>`,\n desc: `Specifies whether the side navigation is collapsed. This option is only applicable when <code>type</code> is set to <code>'collapsibleSide'</code> or <code>'framelessSide'</code>.`,\n },\n ],\n },\n ]}\n />\n </div>\n <div className=\"mt-10\" id=\"persistence\">\n <h5>State Persistence</h5>\n <p>\n The <code>themeConfig</code> state is persisted by default,\n meaning your settings will be remembered by the browser all\n along. If you prefer not to persist the theme state for the\n users, you can modify <code>src/store/themeStore.ts</code>{' '}\n by removing the <code>persist</code> method from the Zustand\n store.\n </p>\n <p>\n The persisted state is also stored in the browser's{' '}\n <code>localStorage</code>. If you encounter issues where\n theme changes are not reflected, you may want to clear the{' '}\n <code>localStorage</code> key named{' '}\n <code>'theme'</code>. You can do this by running{' '}\n <code>localStorage.removeItem('theme')</code> in\n the browser console.\n </p>\n </div>\n </>\n )\n}\n\nexport default OverallThemeConfig\n"],"names":["OverallThemeConfig","jsxs","Fragment","jsx","SyntaxHighlighter","DemoComponentApi"],"mappings":"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"}