@orbe-agro/client-core 3.4.10 → 3.4.11

package/dist/lib/@ecme/views/guide/Documentations/components/Css.js

@@ -0,0 +1,62 @@
+import { jsxs as s, Fragment as i, jsx as e } from "react/jsx-runtime";
+import t from "../../../../components/shared/SyntaxHighlighter.js";
+const o = () => /* @__PURE__ */ s(i, { children: [
+  /* @__PURE__ */ s("p", { children: [
+    "While we primarily use Tailwind CSS, we also have additional custom styles written in standard CSS, located in the",
+    " ",
+    /* @__PURE__ */ e("code", { children: "src/assets/styles/*" }),
+    " directory. Because Tailwind depends on certain CSS processing features, we're using PostCSS as our preprocessor."
+  ] }),
+  /* @__PURE__ */ e("p", { children: "Here's an overview of our styles folder structure:" }),
+  /* @__PURE__ */ e(t, { children: `├── styles                     
+|   ├── components               # styles for base UI components
+|   ├── docs                     # styles for documentation components
+|   ├── tailwind                 # Tailwind entry & base styles
+|   ├── template                 # styles for template components
+|   ├── vendors                  # styles for third-party libraries
+|   └── index.css                # main entry CSS
+` }),
+  /* @__PURE__ */ s("p", { children: [
+    "Each folder inside the ",
+    /* @__PURE__ */ e("code", { children: "styles" }),
+    " directory contains an",
+    " ",
+    /* @__PURE__ */ e("code", { children: "index.css" }),
+    " file that imports all other CSS files within the same folder. Eventually, all these",
+    " ",
+    /* @__PURE__ */ e("code", { children: "index.css" }),
+    " files are imported into the main entry CSS."
+  ] }),
+  /* @__PURE__ */ s("div", { className: "mt-10", id: "writingCss", children: [
+    /* @__PURE__ */ e("h5", { children: "Custom CSS" }),
+    /* @__PURE__ */ s("p", { className: "mt-1", children: [
+      "If Tailwind doesn't cover all your styling needs, you can add custom CSS in this folder. We recommend using Tailwind's functions and directives when adding custom styles, such as",
+      " ",
+      /* @__PURE__ */ e("code", { children: "@apply" }),
+      ", ",
+      /* @__PURE__ */ e("code", { children: "@layer" }),
+      ", and",
+      " ",
+      /* @__PURE__ */ e("code", { children: "theme()" }),
+      "."
+    ] }),
+    /* @__PURE__ */ s("p", { children: [
+      "For more details on how to use these features, you can check the",
+      " ",
+      /* @__PURE__ */ e(
+        "a",
+        {
+          href: "https://tailwindcss.com/docs/functions-and-directives",
+          target: "_blank",
+          rel: "noreferrer",
+          children: "official Tailwind documentation"
+        }
+      ),
+      "."
+    ] })
+  ] })
+] });
+export {
+  o as default
+};
+//# sourceMappingURL=Css.js.map

package/dist/lib/@ecme/views/guide/Documentations/components/Css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Css.js","sources":["../../../../../../../lib/@ecme/views/guide/Documentations/components/Css.tsx"],"sourcesContent":["/* eslint-disable react/no-unescaped-entities */\nimport SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\n\nconst Css = () => {\n    return (\n        <>\n            <p>\n                While we primarily use Tailwind CSS, we also have additional\n                custom styles written in standard CSS, located in the{' '}\n                <code>src/assets/styles/*</code> directory. Because Tailwind\n                depends on certain CSS processing features, we're using PostCSS\n                as our preprocessor.\n            </p>\n            <p>Here's an overview of our styles folder structure:</p>\n            <SyntaxHighlighter>\n                {`├── styles                     \n|   ├── components               # styles for base UI components\n|   ├── docs                     # styles for documentation components\n|   ├── tailwind                 # Tailwind entry & base styles\n|   ├── template                 # styles for template components\n|   ├── vendors                  # styles for third-party libraries\n|   └── index.css                # main entry CSS\n`}\n            </SyntaxHighlighter>\n            <p>\n                Each folder inside the <code>styles</code> directory contains an{' '}\n                <code>index.css</code> file that imports all other CSS files\n                within the same folder. Eventually, all these{' '}\n                <code>index.css</code> files are imported into the main entry\n                CSS.\n            </p>\n            <div className=\"mt-10\" id=\"writingCss\">\n                <h5>Custom CSS</h5>\n                <p className=\"mt-1\">\n                    If Tailwind doesn't cover all your styling needs, you can\n                    add custom CSS in this folder. We recommend using Tailwind's\n                    functions and directives when adding custom styles, such as{' '}\n                    <code>@apply</code>, <code>@layer</code>, and{' '}\n                    <code>theme()</code>.\n                </p>\n                <p>\n                    For more details on how to use these features, you can check\n                    the{' '}\n                    <a\n                        href=\"https://tailwindcss.com/docs/functions-and-directives\"\n                        target=\"_blank\"\n                        rel=\"noreferrer\"\n                    >\n                        official Tailwind documentation\n                    </a>\n                    .\n                </p>\n            </div>\n        </>\n    )\n}\n\nexport default Css\n"],"names":["Css","jsxs","Fragment","jsx","SyntaxHighlighter"],"mappings":";;AAGA,MAAMA,IAAM,MAGA,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,EAAA,gBAAAD,EAAC,KAAE,EAAA,UAAA;AAAA,IAAA;AAAA,IAEuD;AAAA,IACtD,gBAAAE,EAAC,UAAK,UAAmB,sBAAA,CAAA;AAAA,IAAO;AAAA,EAAA,GAGpC;AAAA,EACA,gBAAAA,EAAC,OAAE,UAAkD,qDAAA,CAAA;AAAA,oBACpDC,GACI,EAAA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQL;AAAA,oBACC,KAAE,EAAA,UAAA;AAAA,IAAA;AAAA,IACwB,gBAAAD,EAAC,UAAK,UAAM,SAAA,CAAA;AAAA,IAAO;AAAA,IAAuB;AAAA,IACjE,gBAAAA,EAAC,UAAK,UAAS,YAAA,CAAA;AAAA,IAAO;AAAA,IACwB;AAAA,IAC9C,gBAAAA,EAAC,UAAK,UAAS,YAAA,CAAA;AAAA,IAAO;AAAA,EAAA,GAE1B;AAAA,EACC,gBAAAF,EAAA,OAAA,EAAI,WAAU,SAAQ,IAAG,cACtB,UAAA;AAAA,IAAA,gBAAAE,EAAC,QAAG,UAAU,aAAA,CAAA;AAAA,IACd,gBAAAF,EAAC,KAAE,EAAA,WAAU,QAAO,UAAA;AAAA,MAAA;AAAA,MAG4C;AAAA,MAC5D,gBAAAE,EAAC,UAAK,UAAM,SAAA,CAAA;AAAA,MAAO;AAAA,MAAE,gBAAAA,EAAC,UAAK,UAAM,SAAA,CAAA;AAAA,MAAO;AAAA,MAAM;AAAA,MAC9C,gBAAAA,EAAC,UAAK,UAAO,UAAA,CAAA;AAAA,MAAO;AAAA,IAAA,GACxB;AAAA,sBACC,KAAE,EAAA,UAAA;AAAA,MAAA;AAAA,MAEK;AAAA,MACJ,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,MAAK;AAAA,UACL,QAAO;AAAA,UACP,KAAI;AAAA,UACP,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,MAAI;AAAA,IAAA,EAER,CAAA;AAAA,EAAA,EACJ,CAAA;AAAA,GACJ;"}

package/dist/lib/@ecme/views/guide/Documentations/components/DarkLightMode.js

@@ -0,0 +1,52 @@
+import { jsxs as o, Fragment as t, jsx as e } from "react/jsx-runtime";
+import r from "../../../../components/shared/SyntaxHighlighter.js";
+const a = () => /* @__PURE__ */ o(t, { children: [
+  /* @__PURE__ */ o("p", { children: [
+    "To initialize dark or light mode to the app, simply set",
+    " ",
+    /* @__PURE__ */ e("code", { children: "mode" }),
+    " field as",
+    /* @__PURE__ */ e("code", { children: "'light'" }),
+    " or ",
+    /* @__PURE__ */ e("code", { children: "'dark'" }),
+    " ",
+    "in ",
+    /* @__PURE__ */ e("code", { children: "src/configs/theme.config.ts" }),
+    ". For example:"
+  ] }),
+  /* @__PURE__ */ e(r, { language: "ts", children: `export const themeConfig = {
+    ...
+    mode: 'dark'
+}` }),
+  /* @__PURE__ */ o("div", { className: "mt-10", id: "hook", children: [
+    /* @__PURE__ */ e("h5", { children: "Hook" }),
+    /* @__PURE__ */ e("p", { className: "mt-1", children: "You can access or update the mode in a component via our prepared hook." }),
+    /* @__PURE__ */ e(r, { language: "tsx", children: `import React from 'react'
+import Switcher from '@/components/ui/Switcher'
+import useDarkMode from '@/utils/hooks/useDarkMode'
+
+const ModeSwitcher = () => {
+
+    const [isDark, setIsDark] = useDarkMode()
+
+    const onSwitchChange = (checked: boolean) => {
+        setIsDark(checked ? 'dark' : 'light')
+    }
+
+    return (
+        <div>
+            <Switcher 
+                value={isDark}
+                onChange={checked => onSwitchChange(checked)}
+            />
+        </div>
+    )
+}
+
+export default ModeSwitcher` })
+  ] })
+] });
+export {
+  a as default
+};
+//# sourceMappingURL=DarkLightMode.js.map

package/dist/lib/@ecme/views/guide/Documentations/components/DarkLightMode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DarkLightMode.js","sources":["../../../../../../../lib/@ecme/views/guide/Documentations/components/DarkLightMode.tsx"],"sourcesContent":["import SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\n\nconst DarkLightMode = () => {\n    return (\n        <>\n            <p>\n                To initialize dark or light mode to the app, simply set{' '}\n                <code>mode</code> field as\n                <code>&apos;light&apos;</code> or <code>&apos;dark&apos;</code>{' '}\n                in <code>src/configs/theme.config.ts</code>. For example:\n            </p>\n            <SyntaxHighlighter language=\"ts\">{`export const themeConfig = {\n    ...\n    mode: 'dark'\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 mode in a component via our\n                    prepared hook.\n                </p>\n                <SyntaxHighlighter language=\"tsx\">{`import React from 'react'\nimport Switcher from '@/components/ui/Switcher'\nimport useDarkMode from '@/utils/hooks/useDarkMode'\n\nconst ModeSwitcher = () => {\n\n    const [isDark, setIsDark] = useDarkMode()\n\n    const onSwitchChange = (checked: boolean) => {\n        setIsDark(checked ? 'dark' : 'light')\n    }\n\n    return (\n        <div>\n            <Switcher \n                value={isDark}\n                onChange={checked => onSwitchChange(checked)}\n            />\n        </div>\n    )\n}\n\nexport default ModeSwitcher`}</SyntaxHighlighter>\n            </div>\n        </>\n    )\n}\n\nexport default DarkLightMode\n"],"names":["DarkLightMode","jsxs","Fragment","jsx","SyntaxHighlighter"],"mappings":";;AAEA,MAAMA,IAAgB,MAGV,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,EAAA,gBAAAD,EAAC,KAAE,EAAA,UAAA;AAAA,IAAA;AAAA,IACyD;AAAA,IACxD,gBAAAE,EAAC,UAAK,UAAI,OAAA,CAAA;AAAA,IAAO;AAAA,IACjB,gBAAAA,EAAC,UAAK,UAAiB,UAAA,CAAA;AAAA,IAAO;AAAA,IAAI,gBAAAA,EAAC,UAAK,UAAgB,SAAA,CAAA;AAAA,IAAQ;AAAA,IAAI;AAAA,IACjE,gBAAAA,EAAC,UAAK,UAA2B,8BAAA,CAAA;AAAA,IAAO;AAAA,EAAA,GAC/C;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,2EAAA;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,6BAsBtB,CAAA;AAAA,EAAA,EACjB,CAAA;AAAA,GACJ;"}

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

@@ -0,0 +1,24 @@
+import { jsxs as r, Fragment as n, jsx as e } from "react/jsx-runtime";
+import t from "../../../../components/shared/SyntaxHighlighter.js";
+const a = () => /* @__PURE__ */ r(n, { children: [
+  /* @__PURE__ */ e("p", { children: "Once you've installed all the dependencies, you can start the development server by running the following command in your terminal:" }),
+  /* @__PURE__ */ e(t, { children: "npm run dev" }),
+  /* @__PURE__ */ r("p", { children: [
+    "Open your browser and go to",
+    " ",
+    /* @__PURE__ */ e(
+      "a",
+      {
+        href: "http://localhost:5173/",
+        target: "_blank",
+        rel: "noreferrer",
+        children: "http://localhost:5173/"
+      }
+    ),
+    ". The app will automatically reload whenever you make changes to the source files."
+  ] })
+] });
+export {
+  a as default
+};
+//# sourceMappingURL=DevelopmentServer.js.map

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

@@ -0,0 +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&apos;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;"}

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

@@ -0,0 +1,67 @@
+import { jsxs as i, Fragment as r, jsx as e } from "react/jsx-runtime";
+import t from "../../../../components/shared/SyntaxHighlighter.js";
+const c = () => /* @__PURE__ */ i(r, { children: [
+  /* @__PURE__ */ i("p", { children: [
+    "To initialize the app direction, simply set",
+    " ",
+    /* @__PURE__ */ e("code", { children: "direction" }),
+    " field as",
+    /* @__PURE__ */ e("code", { children: "'ltr'" }),
+    " or ",
+    /* @__PURE__ */ e("code", { children: "'rtl'" }),
+    " in",
+    " ",
+    /* @__PURE__ */ e("code", { children: "src/configs/theme.config.ts" }),
+    ". For example:"
+  ] }),
+  /* @__PURE__ */ e(t, { language: "ts", children: `export const themeConfig = {
+	...
+	direction: 'rtl'
+}` }),
+  /* @__PURE__ */ i("div", { className: "mt-10", id: "hook", children: [
+    /* @__PURE__ */ e("h5", { children: "Hook" }),
+    /* @__PURE__ */ e("p", { className: "mt-1", children: "You can access or update the direction in a component via our prepared hook." }),
+    /* @__PURE__ */ e(t, { language: "tsx", children: `import React from 'react'
+import Button from '@/components/ui/Button'
+import InputGroup from '@/components/ui/InputGroup'
+import useDirection from '@/utils/hooks/useDirection'
+import type { Direction } from '@/@types/theme';
+
+const dirList = [
+	{ value: 'ltr', label: 'LTR' },
+	{ value: 'rtl', label: 'RTL' }
+]
+
+const DirectionSwitcher = () => {
+
+	const [direction, setDirection] = useDirection()
+
+	const onDirChange = (val: Direction) => {
+		setDirection(val)
+	}
+
+	return (
+		<InputGroup size="sm">
+			{
+				dirList.map(dir => (
+					<Button 
+						key={dir.value}
+						active={direction === dir.value}
+						onClick={() => onDirChange(dir.value)}
+					>
+						{dir.label}
+					</Button>
+				))
+			}
+		</InputGroup>
+	)
+}
+
+export default DirectionSwitcher
+` })
+  ] })
+] });
+export {
+  c as default
+};
+//# sourceMappingURL=Direction.js.map

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

@@ -0,0 +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>&apos;ltr&apos;</code> or <code>&apos;rtl&apos;</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;"}

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

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

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

@@ -0,0 +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

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