npm - @orbe-agro/client-core - Versions diffs - 5.3.147 → 5.3.156 - Mend

@orbe-agro/client-core 5.3.147 → 5.3.156

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 (1696) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ApiIntegration.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/ApiIntegration.tsx"],"sourcesContent":["import SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\nimport Alert from '@/components/ui/Alert'\n\nconst ApiIntegration = () => {\n return (\n <>\n <p>\n In this guide, you'll learn how to integrate your backend\n API with the template. We'll cover everything from\n configuring your environment to setting up a proxy, and creating\n service files for seamless API communication.\n </p>\n\n <div className=\"mt-10\" id=\"turningOffMockApi\">\n <h5 className=\"mb-4\">Turning off mock api</h5>\n <Alert showIcon type=\"info\" title=\"Important:\">\n Before you begin, make sure to turn off the mock API by\n setting <code>enableMock</code> to <code>false</code> in{' '}\n <code>src/configs/app.config.ts</code>. The template\n defaults to mock API, so disabling this will allow your app\n to connect to your actual backend endpoints.\n </Alert>\n </div>\n <div className=\"mt-10\" id=\"proxying\">\n <h5>Setting Up a Proxy</h5>\n <p className=\"mt-1\">\n If your backend API is hosted on a different server than\n your frontend, you'll need to set up a proxy to avoid\n issues with cross-origin requests. You can configure the\n proxy either through the <code>package.json</code> file or\n via <code>vite.config.ts</code> for more flexibility.\n </p>\n <ul>\n <li>\n <strong>Option 1: Manual Setup in Vite</strong>\n <p className=\"mt-1\">\n For a more customized setup, configure the proxy in{' '}\n <code>vite.config.ts</code>:\n </p>\n <SyntaxHighlighter language=\"ts\">{`export default defineConfig({\n plugins: ...,\n server: {\n proxy: {\n '/api': {\n // Update the target URL with your backend server's URL\n target: 'http://yourDevDomain.com',\n changeOrigin: true,\n secure: false,\n }\n }\n }\n})`}</SyntaxHighlighter>\n </li>\n <li>\n <strong>Option 2: Using package.json</strong>\n <p className=\"mt-1\">\n Add the following line to your{' '}\n <code>package.json</code> file to quickly set up a\n proxy:\n </p>\n <SyntaxHighlighter language=\"json\">{`\"proxy\": \"http://yourDevDomain.com\"`}</SyntaxHighlighter>\n </li>\n </ul>\n </div>\n <div className=\"mt-10\" id=\"configureApiPrefix\">\n <h5>Configuring the API Prefix</h5>\n <p>\n You can define a prefix for your API endpoints in{' '}\n <code>src/configs/app.config.ts</code> using the{' '}\n <code>apiPrefix</code> property. This prefix will be\n prepended to all API requests, allowing for a consistent and\n manageable API structure.\n </p>\n <SyntaxHighlighter language=\"ts\">{`const appConfig: AppConfig = {\n apiPrefix: '/api',\n // other configurations...\n}`}</SyntaxHighlighter>\n </div>\n\n <div className=\"mt-10\" id=\"integration\">\n <h5>Step-by-Step integration</h5>\n </div>\n\n <p>Follow the steps below to make backend api linkage working.</p>\n <ol>\n <li>\n <p>\n Start by creating a new service file specific to your\n feature or module. For instance, if you're working\n on user management, create a file named{' '}\n <code>UserManagementService.ts</code> in the{' '}\n <code>services</code> directory.\n </p>\n </li>\n <li>\n <p>\n Inside the service file, declare an asynchronous\n function to handle the API request. This function should\n utilize <code>ApiService.fetchData</code>, accepting two\n generic types: <strong>Response</strong> and{' '}\n <strong>Request</strong>, along with the Axios\n configuration. Here's an example:\n </p>\n <SyntaxHighlighter language=\"ts\">{`type MyApiResponse = {\n someResponseData: string\n someResponseData2: boolean\n}\n\ntype MyApiRequest = {\n someRequestData: string\n}\n\nexport async function myApi (data) {\n return ApiService.fetchData<MyApiResponse,MyApiRequest>({\n url: '/my-api-url',\n method: 'post',\n data\n })\n}\n...`}</SyntaxHighlighter>\n <p>\n or forwarding the type to generic from comsumer level:\n </p>\n <SyntaxHighlighter language=\"ts\">{`import ApiService from \"./ApiService\"\n\nexport async function myApi<TResponse, TRequest>(data) {\n return ApiService.fetchData<TResponse, TRequest>({\n url: '/my-api-url',\n method: 'post',\n data\n })\n}\n...`}</SyntaxHighlighter>\n </li>\n <li>\n <p>And now you can hook up this API in your component</p>\n <SyntaxHighlighter language=\"tsx\">{`\ntype MyApiResponse = {\n someResponseData: string\n someResponseData2: boolean\n}\n\ntype MyApiRequest = {\n someRequestData: string\n}\n\nimport { myApi } from './MyService.ts'\n\nconst MyComponent = props => {\n\n const fetchData = async () => {\n const reqeustParam = { key: 'value'}\n try {\n const resp = await myApi<MyApiResponse, MyApiRequest>(reqeustParam)\n if (resp.data) {\n ...do something\n }\n } catch (errors) {\n ...handle errors\n }\n }\n \n // You can\n useEffect(() => {\n fetchData()\n }, [])\n\n return (\n ...\n)`}</SyntaxHighlighter>\n <p>\n <strong>Note</strong>: You can also use data-fetching\n libraries like{' '}\n <a\n href=\"https://swr.vercel.app/\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n SWR\n </a>{' '}\n or{' '}\n <a\n href=\"https://tanstack.com/query/latest\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n TanStack Query\n </a>{' '}\n for a more declarative approach to data fetching. The\n choice depends on your specific needs.\n </p>\n </li>\n </ol>\n </>\n )\n}\n\nexport default ApiIntegration\n"],"names":["ApiIntegration","jsxs","Fragment","jsx","Alert","SyntaxHighlighter"],"mappings":"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"}
1	+ {"version":3,"file":"ApiIntegration.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/ApiIntegration.tsx"],"sourcesContent":["import SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\nimport Alert from '@/components/ui/Alert'\n\nconst ApiIntegration = () => {\n return (\n <>\n <p>\n In this guide, you'll learn how to integrate your backend\n API with the template. We'll cover everything from\n configuring your environment to setting up a proxy, and creating\n service files for seamless API communication.\n </p>\n\n <div className=\"mt-10\" id=\"turningOffMockApi\">\n <h5 className=\"mb-4\">Turning off mock api</h5>\n <Alert showIcon type=\"info\" title=\"Important:\">\n Before you begin, make sure to turn off the mock API by\n setting <code>enableMock</code> to <code>false</code> in{' '}\n <code>src/configs/app.config.ts</code>. The template\n defaults to mock API, so disabling this will allow your app\n to connect to your actual backend endpoints.\n </Alert>\n </div>\n <div className=\"mt-10\" id=\"proxying\">\n <h5>Setting Up a Proxy</h5>\n <p className=\"mt-1\">\n If your backend API is hosted on a different server than\n your frontend, you'll need to set up a proxy to avoid\n issues with cross-origin requests. You can configure the\n proxy either through the <code>package.json</code> file or\n via <code>vite.config.ts</code> for more flexibility.\n </p>\n <ul>\n <li>\n <strong>Option 1: Manual Setup in Vite</strong>\n <p className=\"mt-1\">\n For a more customized setup, configure the proxy in{' '}\n <code>vite.config.ts</code>:\n </p>\n <SyntaxHighlighter language=\"ts\">{`export default defineConfig({\n plugins: ...,\n server: {\n proxy: {\n '/api': {\n // Update the target URL with your backend server's URL\n target: 'http://yourDevDomain.com',\n changeOrigin: true,\n secure: false,\n }\n }\n }\n})`}</SyntaxHighlighter>\n </li>\n <li>\n <strong>Option 2: Using package.json</strong>\n <p className=\"mt-1\">\n Add the following line to your{' '}\n <code>package.json</code> file to quickly set up a\n proxy:\n </p>\n <SyntaxHighlighter language=\"json\">{`\"proxy\": \"http://yourDevDomain.com\"`}</SyntaxHighlighter>\n </li>\n </ul>\n </div>\n <div className=\"mt-10\" id=\"configureApiPrefix\">\n <h5>Configuring the API Prefix</h5>\n <p>\n You can define a prefix for your API endpoints in{' '}\n <code>src/configs/app.config.ts</code> using the{' '}\n <code>apiPrefix</code> property. This prefix will be\n prepended to all API requests, allowing for a consistent and\n manageable API structure.\n </p>\n <SyntaxHighlighter language=\"ts\">{`const appConfig: AppConfig = {\n apiPrefix: '/api',\n // other configurations...\n}`}</SyntaxHighlighter>\n </div>\n\n <div className=\"mt-10\" id=\"integration\">\n <h5>Step-by-Step integration</h5>\n </div>\n\n <p>Follow the steps below to make backend api linkage working.</p>\n <ol>\n <li>\n <p>\n Start by creating a new service file specific to your\n feature or module. For instance, if you're working\n on user management, create a file named{' '}\n <code>UserManagementService.ts</code> in the{' '}\n <code>services</code> directory.\n </p>\n </li>\n <li>\n <p>\n Inside the service file, declare an asynchronous\n function to handle the API request. This function should\n utilize <code>ApiService.fetchData</code>, accepting two\n generic types: <strong>Response</strong> and{' '}\n <strong>Request</strong>, along with the Axios\n configuration. Here's an example:\n </p>\n <SyntaxHighlighter language=\"ts\">{`type MyApiResponse = {\n someResponseData: string\n someResponseData2: boolean\n}\n\ntype MyApiRequest = {\n someRequestData: string\n}\n\nexport async function myApi (data) {\n return ApiService.fetchData<MyApiResponse,MyApiRequest>({\n url: '/my-api-url',\n method: 'post',\n data\n })\n}\n...`}</SyntaxHighlighter>\n <p>\n or forwarding the type to generic from comsumer level:\n </p>\n <SyntaxHighlighter language=\"ts\">{`import ApiService from \"./ApiService\"\n\nexport async function myApi<TResponse, TRequest>(data) {\n return ApiService.fetchData<TResponse, TRequest>({\n url: '/my-api-url',\n method: 'post',\n data\n })\n}\n...`}</SyntaxHighlighter>\n </li>\n <li>\n <p>And now you can hook up this API in your component</p>\n <SyntaxHighlighter language=\"tsx\">{`\ntype MyApiResponse = {\n someResponseData: string\n someResponseData2: boolean\n}\n\ntype MyApiRequest = {\n someRequestData: string\n}\n\nimport { myApi } from './MyService.ts'\n\nconst MyComponent = props => {\n\n const fetchData = async () => {\n const reqeustParam = { key: 'value'}\n try {\n const resp = await myApi<MyApiResponse, MyApiRequest>(reqeustParam)\n if (resp.data) {\n ...do something\n }\n } catch (errors) {\n ...handle errors\n }\n }\n \n // You can\n useEffect(() => {\n fetchData()\n }, [])\n\n return (\n ...\n)`}</SyntaxHighlighter>\n <p>\n <strong>Note</strong>: You can also use data-fetching\n libraries like{' '}\n <a\n href=\"https://swr.vercel.app/\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n SWR\n </a>{' '}\n or{' '}\n <a\n href=\"https://tanstack.com/query/latest\"\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n TanStack Query\n </a>{' '}\n for a more declarative approach to data fetching. The\n choice depends on your specific needs.\n </p>\n </li>\n </ol>\n </>\n )\n}\n\nexport default ApiIntegration\n"],"names":["ApiIntegration","jsxs","Fragment","jsx","Alert","SyntaxHighlighter"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Application.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/Application.tsx"],"sourcesContent":["import SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\nimport ReactHtmlParser from 'html-react-parser'\nimport Table from '@/components/ui/Table'\n\nconst { Tr, Th, Td, THead, TBody } = Table\n\nconst metadata = {\n api: [\n {\n propName: 'apiPrefix',\n type: `<code>string</code>`,\n defaultDemo: `<code>'/api'</code>`,\n defaultStarter: `<code>'/api'</code>`,\n desc: 'The base path for all API requests.',\n },\n {\n propName: 'authenticatedEntryPath',\n type: `<code>string</code>`,\n defaultDemo: `<code>'/app/sales/dashboard'</code>`,\n defaultStarter: `<code>'/home'</code>`,\n desc: 'The path users are redirected to after successful authentication.',\n },\n {\n propName: 'unAuthenticatedEntryPath',\n type: `<code>string</code>`,\n defaultDemo: `<code>'/sign-in'</code>`,\n defaultStarter: `<code>'/sign-in'</code>`,\n desc: 'The path users are redirected to if they are not authenticated.',\n },\n {\n propName: 'locale',\n type: `<code>string</code>`,\n defaultDemo: `<code>'en'</code>`,\n defaultStarter: `<code>'en'</code>`,\n desc: 'The default language/locale for the app.',\n },\n {\n propName: 'enableMock',\n type: `<code>boolean</code>`,\n defaultDemo: '<code>true</code>',\n defaultStarter: '<code>true</code>',\n desc: 'Enables or disables API requests being routed to a mock server.',\n },\n {\n propName: 'accessTokenPersistStrategy',\n type: `<code>'localStorage' \| 'sessionStorage' \| 'cookies' </code>`,\n defaultDemo: `<code>'cookies'</code>`,\n defaultStarter: `<code>'cookies'</code>`,\n desc: 'The choice of storage where auth token store.',\n },\n {\n propName: 'activeNavTranslation',\n type: `<code>boolean</code>`,\n defaultDemo: '<code>true</code>',\n defaultStarter: '<code>false</code>',\n desc: 'Enables or disables the tranlation fucntionality that implmented in navigation.',\n },\n ],\n}\n\nconst Application = () => {\n return (\n <>\n <p>\n You can configure various static app settings in{' '}\n <code>src/configs/app.config.ts</code>. Below are the default\n configurations for both the demo and starter versions.\n </p>\n <span>\n <i>Demo Configuration</i>\n </span>\n <SyntaxHighlighter language=\"ts\">{`const appConfig: AppConfig = {\n apiPrefix: '/api',\n authenticatedEntryPath: '/dashboards/ecommerce',\n unAuthenticatedEntryPath: '/sign-in',\n locale: 'en',\n accessTokenPersistStrategy: 'localStorage',\n enableMock: true,\n activeNavTranslation: true\n}`}</SyntaxHighlighter>\n <span>\n <i>Starter Configuration</i>\n </span>\n <SyntaxHighlighter language=\"ts\">{`const appConfig: AppConfig = {\n apiPrefix: '/api',\n authenticatedEntryPath: '/home',\n unAuthenticatedEntryPath: '/sign-in',\n locale: 'en',\n accessTokenPersistStrategy: 'cookies',\n enableMock: true,\n activeNavTranslation: false\n}`}</SyntaxHighlighter>\n <h5 className=\"-mb-2 mt-6\">Configuration Metadata</h5>\n <Table className=\"demo-api-table\">\n <THead>\n <Tr>\n <Th>Property</Th>\n <Th>Description</Th>\n <Th>Type</Th>\n <Th>Default (Demo)</Th>\n <Th>Default (Starter)</Th>\n </Tr>\n </THead>\n <TBody>\n {metadata.api.map((item) => (\n <Tr key={`row-${item.propName}`}>\n <Td className=\"font-semibold\">{item.propName}</Td>\n <Td>{ReactHtmlParser(item.desc)}</Td>\n <Td>{ReactHtmlParser(item.type)}</Td>\n <Td>{ReactHtmlParser(item.defaultDemo)}</Td>\n <Td>{ReactHtmlParser(item.defaultStarter)}</Td>\n </Tr>\n ))}\n </TBody>\n </Table>\n </>\n )\n}\n\nexport default Application\n"],"names":["Tr","Th","Td","THead","TBody","Table","metadata","Application","jsxs","Fragment","jsx","SyntaxHighlighter","item","ReactHtmlParser"],"mappings":";;;;AAIA,MAAM,EAAE,IAAAA,GAAI,IAAAC,GAAI,IAAAC,GAAI,OAAAC,GAAO,OAAAC,~~MAAUC~~,GAE/BC,IAAW;AAAA,EACb,KAAK;AAAA,IACD;AAAA,MACI,UAAU;AAAA,MACV,MAAM;AAAA,MACN,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,MAAM;AAAA,~~IAAA~~;AAAA,~~IAEV~~;AAAA,MACI,UAAU;AAAA,MACV,MAAM;AAAA,MACN,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,MAAM;AAAA,~~IAAA~~;AAAA,~~IAEV~~;AAAA,MACI,UAAU;AAAA,MACV,MAAM;AAAA,MACN,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,MAAM;AAAA,~~IAAA~~;AAAA,~~IAEV~~;AAAA,MACI,UAAU;AAAA,MACV,MAAM;AAAA,MACN,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,MAAM;AAAA,~~IAAA~~;AAAA,~~IAEV~~;AAAA,MACI,UAAU;AAAA,MACV,MAAM;AAAA,MACN,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,MAAM;AAAA,~~IAAA~~;AAAA,~~IAEV~~;AAAA,MACI,UAAU;AAAA,MACV,MAAM;AAAA,MACN,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,MAAM;AAAA,~~IAAA~~;AAAA,~~IAEV~~;AAAA,MACI,UAAU;AAAA,MACV,MAAM;AAAA,MACN,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,MAAM;AAAA,IAAA;AAAA,EACV;AAER,GAEMC,IAAc,~~MAEZ~~,gBAAAC,EAAAC,GAAA,~~EACI~~,UAAA;AAAA,EAAA,gBAAAD,EAAC,~~KAAA~~,~~EAAE~~,UAAA;AAAA,IAAA;AAAA,IACkD;AAAA,IACjD,gBAAAE,EAAC,UAAK,~~UAAA~~,4BAAA,~~CAAyB~~;AAAA,IAAO;AAAA,EAAA,GAE1C;AAAA,~~EACA~~,gBAAAA,~~EAAC~~,QAAA,EACG,~~UAAA~~,gBAAAA,~~EAAC~~,KAAA,EAAE,~~gCAAkB~~,GACzB;AAAA,EACA,gBAAAA,EAACC,~~GAAA~~,~~EAAkB~~,UAAS,MAAM,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQ3C;AAAA,~~EACS~~,gBAAAD,~~EAAC~~,QAAA,EACG,~~UAAA~~,gBAAAA,~~EAAC~~,KAAA,EAAE,~~mCAAqB~~,GAC5B;AAAA,EACA,gBAAAA,EAACC,~~GAAA~~,~~EAAkB~~,UAAS,MAAM,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQ3C;AAAA,~~EACS~~,gBAAAD,~~EAAC~~,MAAA,EAAG,WAAU,cAAa,~~UAAA~~,~~0BAAsB~~;AAAA,EACjD,gBAAAF,EAACH,~~GAAA~~,~~EAAM~~,WAAU,kBACb,UAAA;AAAA,~~IAAA~~,gBAAAK,~~EAACP~~,GAAA,EACG,4BAACH,~~GAAA~~,~~EACG~~,UAAA;AAAA,MAAA,gBAAAU,EAACT,KAAG,~~UAAA~~,WAAA,~~CAAQ~~;AAAA,MACZ,gBAAAS,EAACT,KAAG,~~UAAA~~,cAAA,~~CAAW~~;AAAA,MACf,gBAAAS,EAACT,KAAG,~~UAAA~~,OAAA,~~CAAI~~;AAAA,MACR,gBAAAS,EAACT,KAAG,~~UAAA~~,iBAAA,~~CAAc~~;AAAA,MAClB,gBAAAS,EAACT,KAAG,~~UAAA~~,oBAAA,~~CAAiB~~;AAAA,IAAA,EAAA,CACzB,~~EAAA~~,~~CACJ~~;AAAA,IACA,gBAAAS,EAACN,KACI,~~UAAAE~~,~~EAAS~~,IAAI,IAAI,CAACM,wBACdZ,~~GAAA~~,~~EACG~~,UAAA;AAAA,MAAA,gBAAAU,EAACR,~~GAAA~~,~~EAAG~~,WAAU,iBAAiB,UAAAU,EAAK,UAAS;AAAA,~~MAC7C~~,gBAAAF,~~EAACR~~,GAAA,EAAI,~~UAAAW~~,~~EAAgBD~~,EAAK,IAAI,GAAE;AAAA,~~MAChC~~,gBAAAF,~~EAACR~~,GAAA,EAAI,~~UAAAW~~,~~EAAgBD~~,EAAK,IAAI,GAAE;AAAA,~~MAChC~~,gBAAAF,~~EAACR~~,GAAA,EAAI,~~UAAAW~~,~~EAAgBD~~,EAAK,WAAW,GAAE;AAAA,~~MACvC~~,gBAAAF,~~EAACR~~,GAAA,EAAI,~~UAAAW~~,~~EAAgBD~~,EAAK,cAAc,~~EAAA~~,~~CAAE~~;AAAA,IAAA,EAAA,GALrC,OAAOA,EAAK,QAAQ,EAM7B,CACH,~~EAAA~~,~~CACL~~;AAAA,EAAA,~~EAAA~~,~~CACJ~~;AAAA,GACJ;"}
1	+ {"version":3,"file":"Application.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/Application.tsx"],"sourcesContent":["import SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\nimport ReactHtmlParser from 'html-react-parser'\nimport Table from '@/components/ui/Table'\n\nconst { Tr, Th, Td, THead, TBody } = Table\n\nconst metadata = {\n api: [\n {\n propName: 'apiPrefix',\n type: `<code>string</code>`,\n defaultDemo: `<code>'/api'</code>`,\n defaultStarter: `<code>'/api'</code>`,\n desc: 'The base path for all API requests.',\n },\n {\n propName: 'authenticatedEntryPath',\n type: `<code>string</code>`,\n defaultDemo: `<code>'/app/sales/dashboard'</code>`,\n defaultStarter: `<code>'/home'</code>`,\n desc: 'The path users are redirected to after successful authentication.',\n },\n {\n propName: 'unAuthenticatedEntryPath',\n type: `<code>string</code>`,\n defaultDemo: `<code>'/sign-in'</code>`,\n defaultStarter: `<code>'/sign-in'</code>`,\n desc: 'The path users are redirected to if they are not authenticated.',\n },\n {\n propName: 'locale',\n type: `<code>string</code>`,\n defaultDemo: `<code>'en'</code>`,\n defaultStarter: `<code>'en'</code>`,\n desc: 'The default language/locale for the app.',\n },\n {\n propName: 'enableMock',\n type: `<code>boolean</code>`,\n defaultDemo: '<code>true</code>',\n defaultStarter: '<code>true</code>',\n desc: 'Enables or disables API requests being routed to a mock server.',\n },\n {\n propName: 'accessTokenPersistStrategy',\n type: `<code>'localStorage' \| 'sessionStorage' \| 'cookies' </code>`,\n defaultDemo: `<code>'cookies'</code>`,\n defaultStarter: `<code>'cookies'</code>`,\n desc: 'The choice of storage where auth token store.',\n },\n {\n propName: 'activeNavTranslation',\n type: `<code>boolean</code>`,\n defaultDemo: '<code>true</code>',\n defaultStarter: '<code>false</code>',\n desc: 'Enables or disables the tranlation fucntionality that implmented in navigation.',\n },\n ],\n}\n\nconst Application = () => {\n return (\n <>\n <p>\n You can configure various static app settings in{' '}\n <code>src/configs/app.config.ts</code>. Below are the default\n configurations for both the demo and starter versions.\n </p>\n <span>\n <i>Demo Configuration</i>\n </span>\n <SyntaxHighlighter language=\"ts\">{`const appConfig: AppConfig = {\n apiPrefix: '/api',\n authenticatedEntryPath: '/dashboards/ecommerce',\n unAuthenticatedEntryPath: '/sign-in',\n locale: 'en',\n accessTokenPersistStrategy: 'localStorage',\n enableMock: true,\n activeNavTranslation: true\n}`}</SyntaxHighlighter>\n <span>\n <i>Starter Configuration</i>\n </span>\n <SyntaxHighlighter language=\"ts\">{`const appConfig: AppConfig = {\n apiPrefix: '/api',\n authenticatedEntryPath: '/home',\n unAuthenticatedEntryPath: '/sign-in',\n locale: 'en',\n accessTokenPersistStrategy: 'cookies',\n enableMock: true,\n activeNavTranslation: false\n}`}</SyntaxHighlighter>\n <h5 className=\"-mb-2 mt-6\">Configuration Metadata</h5>\n <Table className=\"demo-api-table\">\n <THead>\n <Tr>\n <Th>Property</Th>\n <Th>Description</Th>\n <Th>Type</Th>\n <Th>Default (Demo)</Th>\n <Th>Default (Starter)</Th>\n </Tr>\n </THead>\n <TBody>\n {metadata.api.map((item) => (\n <Tr key={`row-${item.propName}`}>\n <Td className=\"font-semibold\">{item.propName}</Td>\n <Td>{ReactHtmlParser(item.desc)}</Td>\n <Td>{ReactHtmlParser(item.type)}</Td>\n <Td>{ReactHtmlParser(item.defaultDemo)}</Td>\n <Td>{ReactHtmlParser(item.defaultStarter)}</Td>\n </Tr>\n ))}\n </TBody>\n </Table>\n </>\n )\n}\n\nexport default Application\n"],"names":["Tr","Th","Td","THead","TBody","Table","metadata","Application","jsxs","Fragment","jsx","SyntaxHighlighter","item","ReactHtmlParser"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Authentication.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/Authentication.tsx"],"sourcesContent":["/* eslint-disable react/no-unescaped-entities /\nimport SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\nimport DemoComponentApi from '@/components/docs/DemoComponentApi'\n\nconst Authentication = () => {\n return (\n <>\n <p>\n This guide provides an overview of the authentication system\n implemented in the template\n </p>\n <div className=\"mt-10\" id=\"useAuth\">\n <h5>useAuth</h5>\n <p className=\"mt-1\">\n The authentication system is managed through the{' '}\n <code>AuthProvider</code> component, which should wrap your\n application or relevant parts of it. It manages auth states\n and provides the following methods via the{' '}\n <code>useAuth</code> hook:\n </p>\n <DemoComponentApi\n hideApiTitle\n keyText=\"properties\"\n api={[\n {\n api: [\n {\n propName: 'authenticated',\n type: `<code>boolean</code>`,\n default: `-`,\n desc: 'A boolean indicating whether the user is currently authenticated.',\n },\n {\n propName: 'user',\n type: `<code>{\n userId: string\n userName: string\n authority: string[]\n avatar: string\n email: string\n }</code>`,\n default: `-`,\n desc: `An object containing the user's details, such as <code>userName</code>, <code>email</code>, and <code>authority</code>`,\n },\n {\n propName: 'signIn',\n type: `<code>(values: {email: string, password: string}) => Promise<{status: 'success' \| 'failed', message: string}></code>`,\n default: `-`,\n desc: `A method to sign in a user with their credentials </p>`,\n },\n {\n propName: 'signUp',\n type: `<code>(values: {userName: string, email: string, password: string}) => Promise<{status: 'success' \| 'failed', message: string}></code>`,\n default: `-`,\n desc: `A method to register a new user`,\n },\n {\n propName: 'signOut',\n type: `<code>() => void</code>`,\n default: `-`,\n desc: `A method to sign out the current user`,\n },\n {\n propName: 'oAuthSignIn',\n type: `<code>callback: (payload: {\n onSignIn: (tokens: Token, user?: User) => void\n redirect: () => void\n}) => void</code>`,\n default: `-`,\n desc: `A method to handle OAuth sign-in callbacks for third-party authentication providers.</p>`,\n },\n ],\n },\n ]}\n />\n <p>Here's how you can use the useAuth hook in components:</p>\n <SyntaxHighlighter language=\"tsx\">{`import { useAuth } from '@/auth'\n\nconst YourComponent = () => {\n const { signIn, signOut, user, authenticated } = useAuth();\n\n const handleLogin = async () => {\n const credentials = { email: 'user@example.com', password: 'password' };\n const result = await signIn(credentials);\n if (result?.status === 'success') {\n console.log('Logged in successfully');\n }\n if (result?.status === 'failed') {\n console.error('Failed to login')\n }\n };\n\n const handleLogout = () => {\n signOut();\n };\n\n return (\n <div>\n {authenticated ? <p>Welcome, {user.userName}</p> : <p>Please log in</p>}\n <button onClick={handleLogin}>Login</button>\n <button onClick={handleLogout}>Logout</button>\n </div>\n );\n};\n`}</SyntaxHighlighter>\n </div>\n <div className=\"mt-10\" id=\"OAuth\">\n <h5>OAuth Sign-In</h5>\n <p className=\"mt-1\">\n If you're implementing OAuth with third-party providers, the{' '}\n <code>oAuthSignIn</code> method will be essential. You can\n use it within your OAuth callback to complete the sign-in\n process and manage tokens.\n </p>\n <SyntaxHighlighter language=\"tsx\">{`import { useAuth } from '@/auth'\nimport SomeOauthSdkSignInMethod from 'SomeOauthSdk'\n\nconst YourComponent = () => {\n const { oAuthSignIn } = useAuth();\n\n const handleOAuthSignIn = () => {\n\n oAuthSignIn(async ({redirect, onSignIn}) => {\n try {\n const resp = await SomeOauthSdkSignInMethod()\n if (resp) {\n /* extract token & user information for the response / \n const { token, user } = resp\n onSignIn({accessToken: token}, user)\n redirect()\n }\n } catch (error) {\n console.error('Failed to login')\n }\n })\n }\n\n const handleLogout = () => {\n signOut();\n };\n\n return (\n <button onClick={handleOAuthSignIn}>Login with OAuth</button>\n );\n};\n`}</SyntaxHighlighter>\n </div>\n <div className=\"mt-10\" id=\"customizing-data-model\">\n <h5>Customizing the Data Models</h5>\n <p className=\"mt-1\">\n Since not all applications having the same data model, you\n can customize the data structures in{' '}\n <code>@/types/auth.ts</code> and{' '}\n <code>@/auth/AuthProvider.ts</code> to suit your needs.\n Adjust the types and interfaces defined for{' '}\n <code>User</code>, <code>Token</code>, and other\n authentication-related entities according to your\n application's requirements.\n </p>\n <SyntaxHighlighter language=\"ts\">{`// Example: Modifying the User type\nexport type User = {\n userId?: string \| null\n avatar?: string \| null\n userName?: string \| null\n email?: string \| null\n authority?: string[]\n // Add your custom fields here\n role?: string \| null\n};\n`}</SyntaxHighlighter>\n <div className=\"mt-10\" id=\"useAuth\">\n <h5>Diving into AuthProvider</h5>\n <p className=\"mt-1\">\n If the default authentication implementation doesn't\n meet your needs, feel free to dive into the{' '}\n <code>AuthProvider</code> to make any necessary\n modifications. This component handles the core logic for\n authentication, including token management, session\n handling, and more. Customizing this logic can help you\n better align the authentication system with your\n application's specific requirements.\n </p>\n <SyntaxHighlighter language=\"tsx\">{`...\nimport { apiSignIn, apiSignOut, apiSignUp } from '@/services/AuthService'\n\nfunction AuthProvider({ children }: AuthProviderProps) {\n \n ...\n\n const handleSignIn = (...) => {\n ... /* Your implementation here /\n }\n\n const handleSignOut = () => {\n ... /* Your implementation here */\n }\n\n const signIn = async (values: SignInCredential): AuthResult => {\n try {\n const resp = await apiSignIn(values)\n if (resp) {\n handleSignIn(...)\n }\n } catch (errors: any) {\n return {\n status: 'failed',\n message: errors?.response?.data?.message \|\| errors.toString(),\n }\n }\n }\n\n const signOut = async () => {\n try {\n await apiSignOut()\n } finally {\n handleSignOut()\n navigate(appConfig.unAuthenticatedEntryPath)\n }\n }\n ... \n \n return (\n <AuthContext.Provider value={{\n signIn,\n signOut,\n ...\n }}>\n {children}\n </AuthContext.Provider>\n )\n}\n`}</SyntaxHighlighter>\n </div>\n </div>\n </>\n )\n}\n\nexport default Authentication\n"],"names":["Authentication","jsxs","Fragment","jsx","DemoComponentApi","SyntaxHighlighter"],"mappings":"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"}
1	+ {"version":3,"file":"Authentication.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/Authentication.tsx"],"sourcesContent":["/* eslint-disable react/no-unescaped-entities /\nimport SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\nimport DemoComponentApi from '@/components/docs/DemoComponentApi'\n\nconst Authentication = () => {\n return (\n <>\n <p>\n This guide provides an overview of the authentication system\n implemented in the template\n </p>\n <div className=\"mt-10\" id=\"useAuth\">\n <h5>useAuth</h5>\n <p className=\"mt-1\">\n The authentication system is managed through the{' '}\n <code>AuthProvider</code> component, which should wrap your\n application or relevant parts of it. It manages auth states\n and provides the following methods via the{' '}\n <code>useAuth</code> hook:\n </p>\n <DemoComponentApi\n hideApiTitle\n keyText=\"properties\"\n api={[\n {\n api: [\n {\n propName: 'authenticated',\n type: `<code>boolean</code>`,\n default: `-`,\n desc: 'A boolean indicating whether the user is currently authenticated.',\n },\n {\n propName: 'user',\n type: `<code>{\n userId: string\n userName: string\n authority: string[]\n avatar: string\n email: string\n }</code>`,\n default: `-`,\n desc: `An object containing the user's details, such as <code>userName</code>, <code>email</code>, and <code>authority</code>`,\n },\n {\n propName: 'signIn',\n type: `<code>(values: {email: string, password: string}) => Promise<{status: 'success' \| 'failed', message: string}></code>`,\n default: `-`,\n desc: `A method to sign in a user with their credentials </p>`,\n },\n {\n propName: 'signUp',\n type: `<code>(values: {userName: string, email: string, password: string}) => Promise<{status: 'success' \| 'failed', message: string}></code>`,\n default: `-`,\n desc: `A method to register a new user`,\n },\n {\n propName: 'signOut',\n type: `<code>() => void</code>`,\n default: `-`,\n desc: `A method to sign out the current user`,\n },\n {\n propName: 'oAuthSignIn',\n type: `<code>callback: (payload: {\n onSignIn: (tokens: Token, user?: User) => void\n redirect: () => void\n}) => void</code>`,\n default: `-`,\n desc: `A method to handle OAuth sign-in callbacks for third-party authentication providers.</p>`,\n },\n ],\n },\n ]}\n />\n <p>Here's how you can use the useAuth hook in components:</p>\n <SyntaxHighlighter language=\"tsx\">{`import { useAuth } from '@/auth'\n\nconst YourComponent = () => {\n const { signIn, signOut, user, authenticated } = useAuth();\n\n const handleLogin = async () => {\n const credentials = { email: 'user@example.com', password: 'password' };\n const result = await signIn(credentials);\n if (result?.status === 'success') {\n console.log('Logged in successfully');\n }\n if (result?.status === 'failed') {\n console.error('Failed to login')\n }\n };\n\n const handleLogout = () => {\n signOut();\n };\n\n return (\n <div>\n {authenticated ? <p>Welcome, {user.userName}</p> : <p>Please log in</p>}\n <button onClick={handleLogin}>Login</button>\n <button onClick={handleLogout}>Logout</button>\n </div>\n );\n};\n`}</SyntaxHighlighter>\n </div>\n <div className=\"mt-10\" id=\"OAuth\">\n <h5>OAuth Sign-In</h5>\n <p className=\"mt-1\">\n If you're implementing OAuth with third-party providers, the{' '}\n <code>oAuthSignIn</code> method will be essential. You can\n use it within your OAuth callback to complete the sign-in\n process and manage tokens.\n </p>\n <SyntaxHighlighter language=\"tsx\">{`import { useAuth } from '@/auth'\nimport SomeOauthSdkSignInMethod from 'SomeOauthSdk'\n\nconst YourComponent = () => {\n const { oAuthSignIn } = useAuth();\n\n const handleOAuthSignIn = () => {\n\n oAuthSignIn(async ({redirect, onSignIn}) => {\n try {\n const resp = await SomeOauthSdkSignInMethod()\n if (resp) {\n /* extract token & user information for the response / \n const { token, user } = resp\n onSignIn({accessToken: token}, user)\n redirect()\n }\n } catch (error) {\n console.error('Failed to login')\n }\n })\n }\n\n const handleLogout = () => {\n signOut();\n };\n\n return (\n <button onClick={handleOAuthSignIn}>Login with OAuth</button>\n );\n};\n`}</SyntaxHighlighter>\n </div>\n <div className=\"mt-10\" id=\"customizing-data-model\">\n <h5>Customizing the Data Models</h5>\n <p className=\"mt-1\">\n Since not all applications having the same data model, you\n can customize the data structures in{' '}\n <code>@/types/auth.ts</code> and{' '}\n <code>@/auth/AuthProvider.ts</code> to suit your needs.\n Adjust the types and interfaces defined for{' '}\n <code>User</code>, <code>Token</code>, and other\n authentication-related entities according to your\n application's requirements.\n </p>\n <SyntaxHighlighter language=\"ts\">{`// Example: Modifying the User type\nexport type User = {\n userId?: string \| null\n avatar?: string \| null\n userName?: string \| null\n email?: string \| null\n authority?: string[]\n // Add your custom fields here\n role?: string \| null\n};\n`}</SyntaxHighlighter>\n <div className=\"mt-10\" id=\"useAuth\">\n <h5>Diving into AuthProvider</h5>\n <p className=\"mt-1\">\n If the default authentication implementation doesn't\n meet your needs, feel free to dive into the{' '}\n <code>AuthProvider</code> to make any necessary\n modifications. This component handles the core logic for\n authentication, including token management, session\n handling, and more. Customizing this logic can help you\n better align the authentication system with your\n application's specific requirements.\n </p>\n <SyntaxHighlighter language=\"tsx\">{`...\nimport { apiSignIn, apiSignOut, apiSignUp } from '@/services/AuthService'\n\nfunction AuthProvider({ children }: AuthProviderProps) {\n \n ...\n\n const handleSignIn = (...) => {\n ... /* Your implementation here /\n }\n\n const handleSignOut = () => {\n ... /* Your implementation here */\n }\n\n const signIn = async (values: SignInCredential): AuthResult => {\n try {\n const resp = await apiSignIn(values)\n if (resp) {\n handleSignIn(...)\n }\n } catch (errors: any) {\n return {\n status: 'failed',\n message: errors?.response?.data?.message \|\| errors.toString(),\n }\n }\n }\n\n const signOut = async () => {\n try {\n await apiSignOut()\n } finally {\n handleSignOut()\n navigate(appConfig.unAuthenticatedEntryPath)\n }\n }\n ... \n \n return (\n <AuthContext.Provider value={{\n signIn,\n signOut,\n ...\n }}>\n {children}\n </AuthContext.Provider>\n )\n}\n`}</SyntaxHighlighter>\n </div>\n </div>\n </>\n )\n}\n\nexport default Authentication\n"],"names":["Authentication","jsxs","Fragment","jsx","DemoComponentApi","SyntaxHighlighter"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BuildProduction.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/BuildProduction.tsx"],"sourcesContent":["import SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\n\nconst BuildProduction = () => {\n return (\n <>\n <p>\n Run the following command to build the application into{' '}\n <code>/build</code> directory\n </p>\n <SyntaxHighlighter language=\"js\">{`npm run build`}</SyntaxHighlighter>\n <p>\n If you having issue about deployment, try to checkout the guide\n from vite official{' '}\n <a\n rel=\"noopener noreferrer\"\n href=\"https://vitejs.dev/guide/build.html\"\n target=\"_blank\"\n >\n doc\n </a>\n .\n </p>\n </>\n )\n}\n\nexport default BuildProduction\n"],"names":["BuildProduction","jsxs","Fragment","jsx","SyntaxHighlighter"],"mappings":";;AAEA,MAAMA,IAAkB,~~MAEhB~~,gBAAAC,EAAAC,GAAA,~~EACI~~,UAAA;AAAA,EAAA,gBAAAD,EAAC,~~KAAA~~,~~EAAE~~,UAAA;AAAA,IAAA;AAAA,IACyD;AAAA,IACxD,gBAAAE,EAAC,UAAK,~~UAAA~~,SAAA,~~CAAM~~;AAAA,IAAO;AAAA,EAAA,GACvB;AAAA,~~EACA~~,gBAAAA,~~EAACC~~,GAAA,EAAkB,UAAS,MAAM,~~UAAA~~,~~iBAAgB~~;AAAA,oBACjD,~~KAAA~~,~~EAAE~~,UAAA;AAAA,IAAA;AAAA,IAEoB;AAAA,IACnB,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAI;AAAA,QACJ,MAAK;AAAA,QACL,QAAO;AAAA,QACV,UAAA;AAAA,MAAA;AAAA,~~IAAA~~;AAAA,~~IAEG~~;AAAA,EAAA,~~EAAA~~,~~CAER~~;AAAA,GACJ;"}
1	+ {"version":3,"file":"BuildProduction.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/BuildProduction.tsx"],"sourcesContent":["import SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\n\nconst BuildProduction = () => {\n return (\n <>\n <p>\n Run the following command to build the application into{' '}\n <code>/build</code> directory\n </p>\n <SyntaxHighlighter language=\"js\">{`npm run build`}</SyntaxHighlighter>\n <p>\n If you having issue about deployment, try to checkout the guide\n from vite official{' '}\n <a\n rel=\"noopener noreferrer\"\n href=\"https://vitejs.dev/guide/build.html\"\n target=\"_blank\"\n >\n doc\n </a>\n .\n </p>\n </>\n )\n}\n\nexport default BuildProduction\n"],"names":["BuildProduction","jsxs","Fragment","jsx","SyntaxHighlighter"],"mappings":";;AAEA,MAAMA,IAAkB,MAGZ,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,EAAA,gBAAAD,EAAC,KAAE,EAAA,UAAA;AAAA,IAAA;AAAA,IACyD;AAAA,IACxD,gBAAAE,EAAC,UAAK,UAAM,SAAA,CAAA;AAAA,IAAO;AAAA,EAAA,GACvB;AAAA,EACC,gBAAAA,EAAAC,GAAA,EAAkB,UAAS,MAAM,UAAgB,iBAAA;AAAA,oBACjD,KAAE,EAAA,UAAA;AAAA,IAAA;AAAA,IAEoB;AAAA,IACnB,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAI;AAAA,QACJ,MAAK;AAAA,QACL,QAAO;AAAA,QACV,UAAA;AAAA,MAAA;AAAA,IAED;AAAA,IAAI;AAAA,EAAA,EAER,CAAA;AAAA,GACJ;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Credit.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/Credit.tsx"],"sourcesContent":["import Table from '@/components/ui/Table'\n\nconst { Tr, Th, Td, THead, TBody } = Table\n\nconst packages = [\n {\n name: '@floating-ui/react',\n url: 'https://github.com/floating-ui/floating-ui',\n license: 'MIT',\n },\n {\n name: '@floating-ui/core',\n url: 'https://github.com/fullcalendar/fullcalendar',\n license: 'MIT',\n },\n {\n name: '@fullcalendar/daygrid',\n url: 'https://github.com/fullcalendar/fullcalendar',\n license: 'MIT',\n },\n {\n name: '@fullcalendar/interaction',\n url: 'https://github.com/fullcalendar/fullcalendar',\n license: 'MIT',\n },\n {\n name: '@fullcalendar/react',\n url: 'https://github.com/fullcalendar/fullcalendar',\n license: 'MIT',\n },\n {\n name: '@fullcalendar/timegrid',\n url: 'https://github.com/fullcalendar/fullcalendar',\n license: 'MIT',\n },\n {\n name: '@hello-pangea/dnd',\n url: 'https://github.com/hello-pangea/dnd',\n license: 'Apache',\n },\n {\n name: '@hookform/resolvers',\n url: 'https://github.com/react-hook-form/resolvers',\n license: 'MIT',\n },\n {\n name: '@tailwindcss/typography',\n url: 'https://github.com/tailwindlabs/tailwindcss-typography',\n license: 'MIT',\n },\n {\n name: '@tanstack/match-sorter-utils',\n url: 'https://github.com/tanstack/table',\n license: 'MIT',\n },\n {\n name: '@tanstack/react-table',\n url: 'https://github.com/tanstack/table',\n license: 'MIT',\n },\n {\n name: '@tanstack/react-virtual',\n url: 'https://github.com/TanStack/virtual',\n license: 'MIT',\n },\n {\n name: '@testing-library/jest-dom',\n url: 'https://github.com/testing-library/jest-dom',\n license: 'MIT',\n },\n {\n name: '@testing-library/react',\n url: 'https://github.com/testing-library/react-testing-library',\n license: 'MIT',\n },\n {\n name: '@testing-library/user-event',\n url: 'https://github.com/testing-library/user-event',\n license: 'MIT',\n },\n {\n name: '@tiptap/pm',\n url: 'https://github.com/ueberdosis/tiptap',\n license: 'MIT',\n },\n {\n name: '@tiptap/react',\n url: 'https://github.com/ueberdosis/tiptap',\n license: 'MIT',\n },\n {\n name: '@tiptap/starter-kit',\n url: 'https://github.com/ueberdosis/tiptap',\n license: 'MIT',\n },\n {\n name: '@visx/pattern',\n url: 'https://github.com/airbnb/visx',\n license: 'MIT',\n },\n {\n name: '@vitejs/plugin-react',\n url: 'https://github.com/vitejs/vite-plugin-react',\n license: 'MIT',\n },\n { name: 'axios', url: 'https://github.com/axios/axios', license: 'MIT' },\n {\n name: 'axios-mock-adapter',\n url: 'https://github.com/ctimmerm/axios-mock-adapter',\n license: 'MIT',\n },\n {\n name: 'classnames',\n url: 'https://github.com/JedWatson/classnames',\n license: 'MIT',\n },\n { name: 'dayjs', url: 'https://github.com/iamkun/dayjs/', license: 'MIT' },\n { name: 'd3-fetch', url: 'https://github.com/d3/d3-fetch', license: 'ISC' },\n { name: 'd3-dsv', url: 'https://github.com/d3/d3-dsv', license: 'ISC' },\n { name: 'd3-scale', url: 'https://github.com/d3/d3-scale', license: 'ISC' },\n {\n name: 'firebase',\n url: 'https://github.com/firebase/firebase-js-sdk',\n license: 'Apache',\n },\n {\n name: 'framer-motion',\n url: 'https://github.com/framer/motion',\n license: 'MIT',\n },\n {\n name: 'gantt-task-react',\n url: 'https://github.com/MaTeMaTuK/gantt-task-react',\n license: 'Apache',\n },\n {\n name: 'html-react-parser',\n url: 'https://github.com/remarkablemark/html-react-parser',\n license: 'MIT',\n },\n {\n name: 'js-cookies',\n url: 'https://github.com/js-cookie/js-cookie',\n license: 'MIT',\n },\n { name: 'lodash', url: 'https://github.com/lodash/lodash', license: 'MIT' },\n {\n name: 'marked',\n url: 'https://github.com/markedjs/marked',\n license: 'MIT',\n },\n {\n name: 'postcss-import',\n url: 'https://github.com/postcss/postcss-import',\n license: 'MIT',\n },\n {\n name: 'react',\n url: 'https://github.com/facebook/react/',\n license: 'MIT',\n },\n {\n name: 'react-apexcharts',\n url: 'https://github.com/apexcharts/react-apexcharts',\n license: 'MIT',\n },\n {\n name: 'react-dom',\n url: 'https://github.com/facebook/react',\n license: 'MIT',\n },\n {\n name: 'react-highlight-words',\n url: 'https://github.com/bvaughn/react-highlight-words',\n license: 'MIT',\n },\n {\n name: 'react-hook-form',\n url: 'https://github.com/react-hook-form/react-hook-form',\n license: 'MIT',\n },\n {\n name: 'react-apexcharts',\n url: 'https://github.com/apexcharts/react-apexcharts',\n license: 'MIT',\n },\n {\n name: 'react-i18next',\n url: 'https://github.com/i18next/react-i18next',\n license: 'MIT',\n },\n {\n name: 'react-icons',\n url: 'https://github.com/react-icons/react-icons',\n license: 'MIT',\n },\n {\n name: 'react-markdown',\n url: 'https://github.com/remarkjs/react-markdown',\n license: 'MIT',\n },\n {\n name: 'react-modal',\n url: 'https://github.com/reactjs/react-modal',\n license: 'MIT',\n },\n {\n name: 'react-number-format',\n url: 'https://github.com/s-yadav/react-number-format',\n license: 'MIT',\n },\n {\n name: 'react-router-dom',\n url: 'https://github.com/remix-run/react-router',\n license: 'MIT',\n },\n {\n name: 'react-scroll',\n url: 'https://github.com/fisshy/react-scroll',\n license: 'MIT',\n },\n {\n name: 'react-select',\n url: 'https://github.com/JedWatson/react-select',\n license: 'MIT',\n },\n {\n name: 'react-simple-maps',\n url: 'https://github.com/zcreativelabs/react-simple-maps',\n license: 'MIT',\n },\n {\n name: 'react-syntax-highlighter',\n url: 'https://github.com/react-syntax-highlighter/react-syntax-highlighter',\n license: 'MIT',\n },\n {\n name: 'react-tooltip',\n url: 'https://github.com/wwayne/react-tooltip',\n license: 'MIT',\n },\n {\n name: 'react-window',\n url: 'https://github.com/bvaughn/react-window',\n license: 'MIT',\n },\n {\n name: 'simplebar-react',\n url: 'https://github.com/grsmto/simplebar',\n license: 'MIT',\n },\n {\n name: 'swr',\n url: 'https://github.com/vercel/swr',\n license: 'MIT',\n },\n {\n name: 'autoprefixer',\n url: 'https://github.com/postcss/autoprefixer',\n license: 'MIT',\n },\n {\n name: 'postcss',\n url: 'https://github.com/postcss/postcss',\n license: 'MIT',\n },\n {\n name: 'postcss-preset-env',\n url: 'https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env',\n license: 'MIT',\n },\n {\n name: 'tailwindcss',\n url: 'https://github.com/tailwindlabs/tailwindcss',\n license: 'MIT',\n },\n {\n name: 'tailwind-merge',\n url: 'https://github.com/dcastil/tailwind-merge',\n license: 'MIT',\n },\n {\n name: 'typescript',\n url: 'https://github.com/microsoft/TypeScript',\n license: 'MIT',\n },\n {\n name: 'vite',\n url: 'https://github.com/vitejs/vite',\n license: 'MIT',\n },\n {\n name: 'vite-plugin-dynamic-import',\n url: 'https://github.com/vite-plugin/vite-plugin-dynamic-import',\n license: 'MIT',\n },\n {\n name: 'yet-another-react-lightbox',\n url: 'https://github.com/igordanchenko/yet-another-react-lightbox/tree/main',\n license: 'MIT',\n },\n { name: 'zod', url: 'https://github.com/colinhacks/zod', license: 'MIT' },\n {\n name: 'zustand',\n url: 'https://github.com/pmndrs/zustand',\n license: 'MIT',\n },\n]\n\nconst Credit = () => {\n return (\n <Table className=\"demo-api-table\">\n <THead>\n <Tr>\n <Th>Name</Th>\n <Th>URL</Th>\n <Th>License</Th>\n </Tr>\n </THead>\n <TBody>\n {packages.map((item) => (\n <Tr key={`row-${item.name}`}>\n <Td>{item.name}</Td>\n <Td>\n <a\n href={item.url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n {item.url}\n </a>\n </Td>\n <Td>{item.license}</Td>\n </Tr>\n ))}\n </TBody>\n </Table>\n )\n}\n\nexport default Credit\n"],"names":["Tr","Th","Td","THead","TBody","Table","packages","Credit","jsxs","jsx","item"],"mappings":"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AA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAAA,EAEb;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAAA,EAEb;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAAA,EAEb;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAAA,EAEb;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAAA,EAEb;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAAA,EAEb;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAAA,EAEb;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAAA,EAEb;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAAA,EAEb;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAAA,EAEb;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAAA,EAEb;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAAA,EAEb;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAAA,EAEb;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAAA,EAEb;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAAA,EAEb;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAAA,EAEb;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAAA,EAEb;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAAA,EAEb;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAAA,EAEb;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAAA,EAEb;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAAA,EAEb;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAAA,EAEb;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAAA,EAEb;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAAA,EAEb;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAAA,EAEb;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAAA,EAEb;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAAA,EAEb,EAAE,MAAM,OAAO,KAAK,qCAAqC,SAAS,MAAA;AAAA,EAClE;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAEjB,GAEMC,IAAS,MAEP,gBAAAC,EAACH,GAAA,EAAM,WAAU,kBACb,UAAA;AAAA,EAAA,gBAAAI,EAACN,GAAA,EACG,4BAACH,GAAA,EACG,UAAA;AAAA,IAAA,gBAAAS,EAACR,KAAG,UAAA,OAAA,CAAI;AAAA,IACR,gBAAAQ,EAACR,KAAG,UAAA,MAAA,CAAG;AAAA,IACP,gBAAAQ,EAACR,KAAG,UAAA,UAAA,CAAO;AAAA,EAAA,EAAA,CACf,EAAA,CACJ;AAAA,oBACCG,GAAA,EACI,UAAAE,EAAS,IAAI,CAACI,wBACVV,GAAA,EACG,UAAA;AAAA,IAAA,gBAAAS,EAACP,GAAA,EAAI,YAAK,KAAA,CAAK;AAAA,sBACdA,GAAA,EACG,UAAA,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAMC,EAAK;AAAA,QACX,QAAO;AAAA,QACP,KAAI;AAAA,QAEH,UAAAA,EAAK;AAAA,MAAA;AAAA,IAAA,GAEd;AAAA,IACA,gBAAAD,EAACP,GAAA,EAAI,UAAAQ,EAAK,QAAA,CAAQ;AAAA,EAAA,EAAA,GAXb,OAAOA,EAAK,IAAI,EAYzB,CACH,EAAA,CACL;AAAA,GACJ;"}
1	+ {"version":3,"file":"Credit.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/Credit.tsx"],"sourcesContent":["import Table from '@/components/ui/Table'\n\nconst { Tr, Th, Td, THead, TBody } = Table\n\nconst packages = [\n {\n name: '@floating-ui/react',\n url: 'https://github.com/floating-ui/floating-ui',\n license: 'MIT',\n },\n {\n name: '@floating-ui/core',\n url: 'https://github.com/fullcalendar/fullcalendar',\n license: 'MIT',\n },\n {\n name: '@fullcalendar/daygrid',\n url: 'https://github.com/fullcalendar/fullcalendar',\n license: 'MIT',\n },\n {\n name: '@fullcalendar/interaction',\n url: 'https://github.com/fullcalendar/fullcalendar',\n license: 'MIT',\n },\n {\n name: '@fullcalendar/react',\n url: 'https://github.com/fullcalendar/fullcalendar',\n license: 'MIT',\n },\n {\n name: '@fullcalendar/timegrid',\n url: 'https://github.com/fullcalendar/fullcalendar',\n license: 'MIT',\n },\n {\n name: '@hello-pangea/dnd',\n url: 'https://github.com/hello-pangea/dnd',\n license: 'Apache',\n },\n {\n name: '@hookform/resolvers',\n url: 'https://github.com/react-hook-form/resolvers',\n license: 'MIT',\n },\n {\n name: '@tailwindcss/typography',\n url: 'https://github.com/tailwindlabs/tailwindcss-typography',\n license: 'MIT',\n },\n {\n name: '@tanstack/match-sorter-utils',\n url: 'https://github.com/tanstack/table',\n license: 'MIT',\n },\n {\n name: '@tanstack/react-table',\n url: 'https://github.com/tanstack/table',\n license: 'MIT',\n },\n {\n name: '@tanstack/react-virtual',\n url: 'https://github.com/TanStack/virtual',\n license: 'MIT',\n },\n {\n name: '@testing-library/jest-dom',\n url: 'https://github.com/testing-library/jest-dom',\n license: 'MIT',\n },\n {\n name: '@testing-library/react',\n url: 'https://github.com/testing-library/react-testing-library',\n license: 'MIT',\n },\n {\n name: '@testing-library/user-event',\n url: 'https://github.com/testing-library/user-event',\n license: 'MIT',\n },\n {\n name: '@tiptap/pm',\n url: 'https://github.com/ueberdosis/tiptap',\n license: 'MIT',\n },\n {\n name: '@tiptap/react',\n url: 'https://github.com/ueberdosis/tiptap',\n license: 'MIT',\n },\n {\n name: '@tiptap/starter-kit',\n url: 'https://github.com/ueberdosis/tiptap',\n license: 'MIT',\n },\n {\n name: '@visx/pattern',\n url: 'https://github.com/airbnb/visx',\n license: 'MIT',\n },\n {\n name: '@vitejs/plugin-react',\n url: 'https://github.com/vitejs/vite-plugin-react',\n license: 'MIT',\n },\n { name: 'axios', url: 'https://github.com/axios/axios', license: 'MIT' },\n {\n name: 'axios-mock-adapter',\n url: 'https://github.com/ctimmerm/axios-mock-adapter',\n license: 'MIT',\n },\n {\n name: 'classnames',\n url: 'https://github.com/JedWatson/classnames',\n license: 'MIT',\n },\n { name: 'dayjs', url: 'https://github.com/iamkun/dayjs/', license: 'MIT' },\n { name: 'd3-fetch', url: 'https://github.com/d3/d3-fetch', license: 'ISC' },\n { name: 'd3-dsv', url: 'https://github.com/d3/d3-dsv', license: 'ISC' },\n { name: 'd3-scale', url: 'https://github.com/d3/d3-scale', license: 'ISC' },\n {\n name: 'firebase',\n url: 'https://github.com/firebase/firebase-js-sdk',\n license: 'Apache',\n },\n {\n name: 'framer-motion',\n url: 'https://github.com/framer/motion',\n license: 'MIT',\n },\n {\n name: 'gantt-task-react',\n url: 'https://github.com/MaTeMaTuK/gantt-task-react',\n license: 'Apache',\n },\n {\n name: 'html-react-parser',\n url: 'https://github.com/remarkablemark/html-react-parser',\n license: 'MIT',\n },\n {\n name: 'js-cookies',\n url: 'https://github.com/js-cookie/js-cookie',\n license: 'MIT',\n },\n { name: 'lodash', url: 'https://github.com/lodash/lodash', license: 'MIT' },\n {\n name: 'marked',\n url: 'https://github.com/markedjs/marked',\n license: 'MIT',\n },\n {\n name: 'postcss-import',\n url: 'https://github.com/postcss/postcss-import',\n license: 'MIT',\n },\n {\n name: 'react',\n url: 'https://github.com/facebook/react/',\n license: 'MIT',\n },\n {\n name: 'react-apexcharts',\n url: 'https://github.com/apexcharts/react-apexcharts',\n license: 'MIT',\n },\n {\n name: 'react-dom',\n url: 'https://github.com/facebook/react',\n license: 'MIT',\n },\n {\n name: 'react-highlight-words',\n url: 'https://github.com/bvaughn/react-highlight-words',\n license: 'MIT',\n },\n {\n name: 'react-hook-form',\n url: 'https://github.com/react-hook-form/react-hook-form',\n license: 'MIT',\n },\n {\n name: 'react-apexcharts',\n url: 'https://github.com/apexcharts/react-apexcharts',\n license: 'MIT',\n },\n {\n name: 'react-i18next',\n url: 'https://github.com/i18next/react-i18next',\n license: 'MIT',\n },\n {\n name: 'react-icons',\n url: 'https://github.com/react-icons/react-icons',\n license: 'MIT',\n },\n {\n name: 'react-markdown',\n url: 'https://github.com/remarkjs/react-markdown',\n license: 'MIT',\n },\n {\n name: 'react-modal',\n url: 'https://github.com/reactjs/react-modal',\n license: 'MIT',\n },\n {\n name: 'react-number-format',\n url: 'https://github.com/s-yadav/react-number-format',\n license: 'MIT',\n },\n {\n name: 'react-router-dom',\n url: 'https://github.com/remix-run/react-router',\n license: 'MIT',\n },\n {\n name: 'react-scroll',\n url: 'https://github.com/fisshy/react-scroll',\n license: 'MIT',\n },\n {\n name: 'react-select',\n url: 'https://github.com/JedWatson/react-select',\n license: 'MIT',\n },\n {\n name: 'react-simple-maps',\n url: 'https://github.com/zcreativelabs/react-simple-maps',\n license: 'MIT',\n },\n {\n name: 'react-syntax-highlighter',\n url: 'https://github.com/react-syntax-highlighter/react-syntax-highlighter',\n license: 'MIT',\n },\n {\n name: 'react-tooltip',\n url: 'https://github.com/wwayne/react-tooltip',\n license: 'MIT',\n },\n {\n name: 'react-window',\n url: 'https://github.com/bvaughn/react-window',\n license: 'MIT',\n },\n {\n name: 'simplebar-react',\n url: 'https://github.com/grsmto/simplebar',\n license: 'MIT',\n },\n {\n name: 'swr',\n url: 'https://github.com/vercel/swr',\n license: 'MIT',\n },\n {\n name: 'autoprefixer',\n url: 'https://github.com/postcss/autoprefixer',\n license: 'MIT',\n },\n {\n name: 'postcss',\n url: 'https://github.com/postcss/postcss',\n license: 'MIT',\n },\n {\n name: 'postcss-preset-env',\n url: 'https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env',\n license: 'MIT',\n },\n {\n name: 'tailwindcss',\n url: 'https://github.com/tailwindlabs/tailwindcss',\n license: 'MIT',\n },\n {\n name: 'tailwind-merge',\n url: 'https://github.com/dcastil/tailwind-merge',\n license: 'MIT',\n },\n {\n name: 'typescript',\n url: 'https://github.com/microsoft/TypeScript',\n license: 'MIT',\n },\n {\n name: 'vite',\n url: 'https://github.com/vitejs/vite',\n license: 'MIT',\n },\n {\n name: 'vite-plugin-dynamic-import',\n url: 'https://github.com/vite-plugin/vite-plugin-dynamic-import',\n license: 'MIT',\n },\n {\n name: 'yet-another-react-lightbox',\n url: 'https://github.com/igordanchenko/yet-another-react-lightbox/tree/main',\n license: 'MIT',\n },\n { name: 'zod', url: 'https://github.com/colinhacks/zod', license: 'MIT' },\n {\n name: 'zustand',\n url: 'https://github.com/pmndrs/zustand',\n license: 'MIT',\n },\n]\n\nconst Credit = () => {\n return (\n <Table className=\"demo-api-table\">\n <THead>\n <Tr>\n <Th>Name</Th>\n <Th>URL</Th>\n <Th>License</Th>\n </Tr>\n </THead>\n <TBody>\n {packages.map((item) => (\n <Tr key={`row-${item.name}`}>\n <Td>{item.name}</Td>\n <Td>\n <a\n href={item.url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n {item.url}\n </a>\n </Td>\n <Td>{item.license}</Td>\n </Tr>\n ))}\n </TBody>\n </Table>\n )\n}\n\nexport default Credit\n"],"names":["Tr","Th","Td","THead","TBody","Table","packages","Credit","jsxs","jsx","item"],"mappings":"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CA;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EACb;AAAA,EACA;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EACb;AAAA,EACA;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EACb;AAAA,EACA;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EACb;AAAA,EACA;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EACb;AAAA,EACA;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EACb;AAAA,EACA;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EACb;AAAA,EACA;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EACb;AAAA,EACA;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EACb;AAAA,EACA;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EACb;AAAA,EACA;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EACb;AAAA,EACA;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EACb;AAAA,EACA;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EACb;AAAA,EACA;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EACb;AAAA,EACA;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EACb;AAAA,EACA;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EACb;AAAA,EACA;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EACb;AAAA,EACA;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EACb;AAAA,EACA;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EACb;AAAA,EACA;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EACb;AAAA,EACA;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EACb;AAAA,EACA;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EACb;AAAA,EACA;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EACb;AAAA,EACA;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EACb;AAAA,EACA;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EACb;AAAA,EACA;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EACb;AAAA,EACA;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EACb;AAAA,EACA,EAAE,MAAM,OAAO,KAAK,qCAAqC,SAAS,MAAM;AAAA,EACxE;AAAA,IACI,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAEjB,GAEMC,IAAS,MAEP,gBAAAC,EAACH,GAAM,EAAA,WAAU,kBACb,UAAA;AAAA,EAAC,gBAAAI,EAAAN,GAAA,EACG,4BAACH,GACG,EAAA,UAAA;AAAA,IAAA,gBAAAS,EAACR,KAAG,UAAI,OAAA,CAAA;AAAA,IACR,gBAAAQ,EAACR,KAAG,UAAG,MAAA,CAAA;AAAA,IACP,gBAAAQ,EAACR,KAAG,UAAO,UAAA,CAAA;AAAA,EAAA,EAAA,CACf,EACJ,CAAA;AAAA,oBACCG,GACI,EAAA,UAAAE,EAAS,IAAI,CAACI,wBACVV,GACG,EAAA,UAAA;AAAA,IAAC,gBAAAS,EAAAP,GAAA,EAAI,YAAK,KAAK,CAAA;AAAA,sBACdA,GACG,EAAA,UAAA,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAMC,EAAK;AAAA,QACX,QAAO;AAAA,QACP,KAAI;AAAA,QAEH,UAAKA,EAAA;AAAA,MAAA;AAAA,IAAA,GAEd;AAAA,IACA,gBAAAD,EAACP,GAAI,EAAA,UAAAQ,EAAK,QAAQ,CAAA;AAAA,EAAA,EAAA,GAXb,OAAOA,EAAK,IAAI,EAYzB,CACH,EACL,CAAA;AAAA,GACJ;"}

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

	@@ -1 +1 @@
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,~~MAEJ~~,gBAAAC,EAAAC,GAAA,~~EACI~~,UAAA;AAAA,EAAA,gBAAAD,EAAC,~~KAAA~~,~~EAAE~~,UAAA;AAAA,IAAA;AAAA,IAEuD;AAAA,IACtD,gBAAAE,EAAC,UAAK,~~UAAA~~,sBAAA,~~CAAmB~~;AAAA,IAAO;AAAA,EAAA,GAGpC;AAAA,EACA,gBAAAA,EAAC,OAAE,~~UAAA~~,qDAAA,~~CAAkD~~;AAAA,oBACpDC,~~GAAA~~,~~EACI~~,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQL;AAAA,oBACC,~~KAAA~~,~~EAAE~~,UAAA;AAAA,IAAA;AAAA,IACwB,gBAAAD,EAAC,UAAK,~~UAAA~~,SAAA,~~CAAM~~;AAAA,IAAO;AAAA,IAAuB;AAAA,IACjE,gBAAAA,EAAC,UAAK,~~UAAA~~,YAAA,~~CAAS~~;AAAA,IAAO;AAAA,IACwB;AAAA,IAC9C,gBAAAA,EAAC,UAAK,~~UAAA~~,YAAA,~~CAAS~~;AAAA,IAAO;AAAA,EAAA,GAE1B;AAAA,~~EACA~~,gBAAAF,~~EAAC~~,OAAA,EAAI,WAAU,SAAQ,IAAG,cACtB,UAAA;AAAA,IAAA,gBAAAE,EAAC,QAAG,~~UAAA~~,aAAA,~~CAAU~~;AAAA,IACd,gBAAAF,EAAC,~~KAAA~~,~~EAAE~~,WAAU,QAAO,UAAA;AAAA,MAAA;AAAA,MAG4C;AAAA,MAC5D,gBAAAE,EAAC,UAAK,~~UAAA~~,SAAA,~~CAAM~~;AAAA,MAAO;AAAA,MAAE,gBAAAA,EAAC,UAAK,~~UAAA~~,SAAA,~~CAAM~~;AAAA,MAAO;AAAA,MAAM;AAAA,MAC9C,gBAAAA,EAAC,UAAK,~~UAAA~~,UAAA,~~CAAO~~;AAAA,MAAO;AAAA,IAAA,GACxB;AAAA,sBACC,~~KAAA~~,~~EAAE~~,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,~~MAAA~~;AAAA,~~MAEG~~;AAAA,IAAA,~~EAAA~~,~~CAER~~;AAAA,EAAA,~~EAAA~~,~~CACJ~~;AAAA,GACJ;"}
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/@ecme/views/guide/Documentations/components/DarkLightMode.js.map CHANGED Viewed

	@@ -1 +1 @@
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>'light'</code> or <code>'dark'</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,~~MAEd~~,gBAAAC,EAAAC,GAAA,~~EACI~~,UAAA;AAAA,EAAA,gBAAAD,EAAC,~~KAAA~~,~~EAAE~~,UAAA;AAAA,IAAA;AAAA,IACyD;AAAA,IACxD,gBAAAE,EAAC,UAAK,~~UAAA~~,OAAA,~~CAAI~~;AAAA,IAAO;AAAA,IACjB,gBAAAA,EAAC,UAAK,~~UAAA~~,UAAA,~~CAAiB~~;AAAA,IAAO;AAAA,IAAI,gBAAAA,EAAC,UAAK,~~UAAA~~,SAAA,~~CAAgB~~;AAAA,IAAQ;AAAA,IAAI;AAAA,IACjE,gBAAAA,EAAC,UAAK,~~UAAA~~,8BAAA,~~CAA2B~~;AAAA,IAAO;AAAA,EAAA,GAC/C;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~~,~~2EAGpB~~;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,~~6BAAA~~,~~CAsBtB~~;AAAA,EAAA,~~EAAA~~,~~CACjB~~;AAAA,GACJ;"}
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>'light'</code> or <code>'dark'</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/@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,~~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;"}
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;"}

package/dist/@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,~~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;"}
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;"}

package/dist/@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/@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,~~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;"}
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;"}

package/dist/@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,~~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;"}
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;"}

package/dist/@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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"}