{"_id":"@apisuite/fe-base","_rev":"11-4331af55ce36dc8e47cd66c07854de82","name":"@apisuite/fe-base","dist-tags":{"next":"1.0.0-next.10","latest":"1.0.0-next.1"},"versions":{"1.0.0-next.1":{"name":"@apisuite/fe-base","version":"1.0.0-next.1","description":"ApiSuite core base that exports a provider of server settings, style system and internationalization.","author":{"name":"Bruno Morgado","email":"bruno@cloudoki.com"},"license":"MPL-2","homepage":"https://github.com/APISuite/fe-base#readme","bugs":{"url":"https://github.com/APISuite/fe-base/issues"},"repository":{"type":"git","url":"git+https://github.com/APISuite/fe-base.git"},"main":"dist/index.js","scripts":{"build":"rimraf ./dist && tsc && node scripts/move-build-files dist","prebuild":"npm run lint","lint":"eslint './lib/**/*.{js,ts,tsx}'","test":"echo \"Error: no test specified\" && exit 1","semantic-release":"semantic-release"},"peerDependencies":{"react":"^16.12.0","react-dom":"^16.12.0"},"dependencies":{"@material-ui/core":"4.11.3","i18next":"20.2.1","react-i18next":"11.8.13"},"_id":"@apisuite/fe-base@1.0.0-next.1","_nodeVersion":"15.14.0","_npmVersion":"7.9.0","dist":{"integrity":"sha512-dRvhUk+0GCgNQ6Nxco9Ulqtvy/nmowMKMi3s2cPEt8rfxVyjrQTHd9KyS+LRcNYeeKtgZv1PzrmWIIgOErLnjg==","shasum":"c926019799178e4091482bab6797247102f6b886","tarball":"https://registry.npmjs.org/@apisuite/fe-base/-/fe-base-1.0.0-next.1.tgz","fileCount":24,"unpackedSize":92448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh11sVCRA9TVsSAnZWagAAvnYP/2EkR4oKLW0b5VM36erL\n+iN+rO/c0GGxz3tGv3iNLMtv68kCOzbn045LlzfMe7HACgMsP2QsmztqErG4\npaF6eeB1uA2QGF9ORGjS9RABFsMBdyca1U6MS+fAsjQcXG0k3yjKUy+C8Ebj\n35pcZ3XXJuChkR8Ed3Gz3mHbQ/eQJ2u/ENphPcIpNDgvMP9oUpwXREMglV2I\nuyBsVNcg9izwpdc51ZkSSlDdRodgthHdYn79V1BdOgVmTBW3Ayz1+4aZQpiE\nHf6nC3Onifgqx/c7weGwuaKi1Ml8eXxzXyCy/XpdLOk+Zar/h0YGM+MDtpEU\nEwRqwbxnE+SYk7K8oTYO6fbyOJEOk5AJBYdS9xSAldzbewvjRrieIbgkVKjP\njLWA9eEWsrVxJ2VWQMzZ1scQP4cI0I7JHXPNlaCgm1fqM9b+5oa0t84tSeJW\nxu4havIZoy0uqTTxMNmmkYDDKS51Jg0avGzj54CNaTLbuRMcsNupjyOyPHYi\nCn2iWS7/lmZskeYE4DFeUiAl017I1Dg4f1USgfrVyNaIBo8fO9ceJ5zbxTL1\nPFAXvF0QvC+oXlMJU9NLMqhg32696qRON7rgglPCvVi8RW15LGXWjmz1oM42\nbnF9f5jf8g6OCzRKvpGJClUGQJjMSy8Vw9wYc714m+VRxabiIcysZgjH6Nxx\n63S7\r\n=VWKP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPWO43nTm/ycAz0BHB8qv9PEsPvvLqiduuaqABWNxzzwIhANPFShXXw0VgpTkuGs2JTgeMVMuziFgf/FJsTA9G2D2M"}]},"_npmUser":{"name":"apisuite-admin","email":"dev@apisuite.io"},"directories":{},"maintainers":[{"name":"apisuite-admin","email":"dev@apisuite.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fe-base_1.0.0-next.1_1618484065310_0.09323585412627078"},"_hasShrinkwrap":false},"1.0.0-next.2":{"name":"@apisuite/fe-base","version":"1.0.0-next.2","description":"ApiSuite core base that exports a provider of server settings, style system and internationalization.","author":{"name":"Bruno Morgado","email":"bruno@cloudoki.com"},"license":"MPL-2","homepage":"https://github.com/APISuite/fe-base#readme","bugs":{"url":"https://github.com/APISuite/fe-base/issues"},"repository":{"type":"git","url":"git+https://github.com/APISuite/fe-base.git"},"main":"index.js","bin":{"convert-translation":"scripts/convert-translation.js"},"scripts":{"build":"rimraf ./dist && tsc && node scripts/move-build-files dist","prebuild":"npm run lint && npm t","lint":"eslint './lib/**/*.{js,ts,tsx}'","test":"jest -c ./jest.json","semantic-release":"semantic-release"},"peerDependencies":{"react":"^16.12.0","react-dom":"^16.12.0"},"dependencies":{"@material-ui/core":"4.11.3","i18next":"20.2.1","react-i18next":"11.8.13"},"readme":"# @apisuite/fe-base\n\nAPI Suite frontend provider for settings, style and i18n.\n\n### Installation\n```bash\nnpm install @apisuite/fe-base\n```\n\n## Usage\n\n### ConfigProvider\n\nThe provider should wrap all other components.\n\n| prop | required | example value | description |\n|------|----------|-------|-------------|\n| api | Yes | `{ base: <ROOT_ENDPOINT>, settings?: <SETTINGS_ROUTE>, owner?: <OWNER_ROUTE> }` | API endpoints to fetch settings. Only base is required, the other routes will default to it's property names. |\n| translations | Yes | `{ \"en-US\": import(\"./en-US\"), \"pt-PT\": import(\"./pt-PT\") }` | Dynamic imports mapping for translations . |\n\nHave access to settings and style context. Wrap your App with the `ConfigProvider`.\n\n```tsx\nconst translations = {\n  \"en-US\": import(\"./en-US\"),\n  \"pt-PT\": import(\"./pt-PT\"),\n  ...\n}\n\n...\n\n<ConfigProvider api={{ base: \"https://my-api.io\" }} translations={translations}>\n  <App />\n</ConfigProvider>\n\n...\n```\n\nUsing settings:\n\n```tsx\nimport { useConfig } from \"@apisuite/fe-base\";\n\nexport const MyComponent = () => {\n  const { portalName } = useConfig();\n\n  return (\n    <span>Welcome to {portalName}</span>\n  );\n};\n```\n\n## Internationalization\n\ni18n is provided using [react-i18next](https://react.i18next.com/). This package re-exports the necessary bits no need to install it.\n\n| method | description |\n|--------|-------------|\n| changeLocale | Changes current locale and optionally registers new translations merging them deep. |\n| registerTranslations | Registers new translations merging them deep. |\n| useTranslation | Hook to access translations. see [react-i18next docs](https://react.i18next.com/latest/usetranslation-hook).\n\n```tsx\nimport React, { useEffect } from \"react\";\nimport { useConfig, useTranslation, registerTranslations, changeLocale } from \"@apisuite/fe-base\";\n\nexport const MyComponent = () => {\n  const { portalName } = useConfig();\n  const { t, i18n } = useTranslation();\n\n  useEffect(() => {\n    // add translations programmatically\n    registerTranslations(\"nl-BE\", await import(\"./nl-BE.json\"));\n\n    // change selected locale\n    changeLocale(\"nl-BE\");\n\n    console.log(\"Current Locale:\", i18n.language);\n  }, []);\n\n  return (\n    <span>{t(\"MyComponent.welcome\", { portalName })}</span>\n  );\n};\n```\n\n## Style System\n\nStyles and theme are provided using [MUI-UI](https://material-ui.com/). This package re-exports the `@material-ui/core` package no need to install it.\n\n**Note**: You still have to handle fonts in your project. It's not handle by this package to give more flexibility in this matter.\n\nMake styles:\n\n```ts\n// styles.ts\nimport { makeStyles } from \"@apisuite/fe-base\";\n\nexport default makeStyles((theme) => ({\n  container: {\n    backgroundColor: theme.palette.background.default,\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  },\n});\n```\n\nUse styles:\n\n```tsx\nimport { useTheme, Button } from \"@apisuite/fe-base\";\nimport useStyles from \"./styles\";\n\nexport const MyComponent = () => {\n  const classes = useStyles();\n  const { palette } = useTheme();\n\n  return (\n    <div className={classes.container}>\n      <span style={{ color: palette.primary.main }}>Hello</span>\n      <Button>Dummy</Button>\n    </div>\n  );\n};\n```\n\n## Tools\n\n### convert-translation\n\nA `convert-translation` script is provided to help convert `json` translation files into `csv` format and back.\n\nTo use it run it from the bin folder `./node_modules/.bin/convert-translation` with a file path as argument or add it to your scripts:\n\n```json\n...\n\"scripts\": {\n  ...\n  \"convert-translation\": \"./node_modules/.bin/convert-translation\"\n}\n...\n```\n\nThen in your terminal run:\n\n```bash\nnpm run convert-translation ./translations/en-US.json # npm run convert-translation ./en-US.csv\n```\n\n**JSON File**\n\nNormal `[key]: value` pairs object.\n\n**CSV File**\n\nThe CSV file follows google translation service requirements, which consists in two columns without a header, where the first is the `key` and the second is the `value`. You can add more columns to give more context to the translators, `convert-translation` will only handle this two columns.\n\n| | |\n|-|-|\n| MyComponent.welcome | welcome to {{portalName}}! |\n| MyComponent.registerCTA | register |\n| MyPage.hello | Hello World! |\n\n","readmeFilename":"README.md","_id":"@apisuite/fe-base@1.0.0-next.2","_nodeVersion":"15.14.0","_npmVersion":"7.9.0","dist":{"integrity":"sha512-Tr+RzfEaoibY8FLqEqNHk8Wn8uKFx7zRqa1i9+FJH+8BpjP/bpsSdDuqFXVYD0hYVwxBd6qPdEsxmjMgm7PRvQ==","shasum":"663e544b881dfdfc3b322effe96de808cfeb9090","tarball":"https://registry.npmjs.org/@apisuite/fe-base/-/fe-base-1.0.0-next.2.tgz","fileCount":25,"unpackedSize":96101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfWZsCRA9TVsSAnZWagAAfyoP/20WeOT2eR2+zSDKXe5k\n5jW6JIVFnKTDTAd2bkmgOXEvKbmzNdCEtINyDqvXWWKa6T2o4ffyH494v5P6\nc9hcuQ/iLCqqeEg0yvUy73rLOybliN/SCkFE6VsWBzEs0Z4YEA6WBlp3ievF\nZlN0WeMC7/eN8L7UJ60IO+k5mmnLTQrYiJh+SQJ9BE53vbVDsQqf+okT95jJ\nb3dVhcTpbGfUGf9qtk/lRXP/8UeeSe/KYsAUKbjj2Whq6BBv7G/qFMwtjJr9\nynsAbZB0TvJ21uXMj1hfkL/BIStTocNunge4z28xrrp1FYi+40dBNDVb7+8+\nAM/1bnbKv8Qj6ckthbzJ+7Y7+WVc4D2vEs28L2fDIoBRzNEmD5kxv9FPvCUz\nWVKRrRiSuaM298aYK5Hpz+vYFjzVzbQxOAJn7OOqUsQyYogrOZmwyPYhlUVc\n8LgOzrJZNKPCLXmKX3BZVeLJzi5uptMXvSfczK6MiiqLUiozjSq+81Q21e0C\nti+DSUekyDWgejqQeTCoWfOQQ5tFZm2V2rLAWyA3nyY/Bht4SB9babRIL0pj\nOIeL8jMa91t3K7+lq3BwMt8WSC2q5GUUIHInbmfRjvA5XKWWXsXvW3jPB9x/\nFWZ8eKqpVxlQLP80mvTHNROT+bax/AtiGlxcV8obI7B8ffkFlJyHQG0T3WzG\n+IK7\r\n=pJhA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGkooSWtC4jF1as+Mzk8/Ol8lmjWZQ/mpzcqVYncfj/QAiBNYXQhIASApCDfzn5AtN+9bD0xSMtTUHUs+ZgqBVqgtw=="}]},"_npmUser":{"name":"apisuite-admin","email":"dev@apisuite.io"},"directories":{},"maintainers":[{"name":"apisuite-admin","email":"dev@apisuite.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fe-base_1.0.0-next.2_1618830955073_0.20094441122623108"},"_hasShrinkwrap":false},"1.0.0-next.3":{"name":"@apisuite/fe-base","version":"1.0.0-next.3","description":"ApiSuite core base that exports a provider of server settings, style system and internationalization.","author":{"name":"Bruno Morgado","email":"bruno@cloudoki.com"},"license":"MPL-2","homepage":"https://github.com/APISuite/fe-base#readme","bugs":{"url":"https://github.com/APISuite/fe-base/issues"},"repository":{"type":"git","url":"git+https://github.com/APISuite/fe-base.git"},"main":"index.js","bin":{"convert-translation":"scripts/convert-translation.js"},"scripts":{"build":"rimraf ./dist && tsc && node scripts/move-build-files dist","prebuild":"npm run lint && npm t","lint":"eslint './lib/**/*.{js,ts,tsx}'","test":"jest -c ./jest.json","semantic-release":"semantic-release"},"peerDependencies":{"react":"^16.12.0","react-dom":"^16.12.0"},"dependencies":{"@material-ui/core":"4.11.3","i18next":"20.2.1","react-i18next":"11.8.13"},"readme":"# @apisuite/fe-base\n\nAPI Suite frontend provider for settings, style and i18n.\n\n### Installation\n```bash\nnpm install @apisuite/fe-base\n```\n\n## Usage\n\n### ConfigProvider\n\nThe provider should wrap all other components.\n\n| prop | required | example value | description |\n|------|----------|-------|-------------|\n| api | Yes | `{ base: <ROOT_ENDPOINT>, settings?: <SETTINGS_ROUTE>, owner?: <OWNER_ROUTE> }` | API endpoints to fetch settings. Only base is required, the other routes will default to it's property names. |\n| translations | Yes | `{ \"en-US\": import(\"./en-US\"), \"pt-PT\": import(\"./pt-PT\") }` | Dynamic imports mapping for translations . |\n\nHave access to settings and style context. Wrap your App with the `ConfigProvider`.\n\n```tsx\nconst translations = {\n  \"en-US\": import(\"./en-US\"),\n  \"pt-PT\": import(\"./pt-PT\"),\n  ...\n}\n\n...\n\n<ConfigProvider api={{ base: \"https://my-api.io\" }} translations={translations}>\n  <App />\n</ConfigProvider>\n\n...\n```\n\nUsing settings:\n\n```tsx\nimport { useConfig } from \"@apisuite/fe-base\";\n\nexport const MyComponent = () => {\n  const { portalName } = useConfig();\n\n  return (\n    <span>Welcome to {portalName}</span>\n  );\n};\n```\n\n## Internationalization\n\ni18n is provided using [react-i18next](https://react.i18next.com/). This package re-exports the necessary bits no need to install it.\n\n| method | description |\n|--------|-------------|\n| i18n | i18n instance |\n| changeLocale | Changes current locale and optionally registers new translations merging them deep. |\n| registerTranslations | Registers new translations merging them deep. |\n| Trans | Component to help interpolation with HTML elements. see [react-i18next docs](https://react.i18next.com/latest/trans-component). |\n| useTranslation | Hook to access translations. see [react-i18next docs](https://react.i18next.com/latest/usetranslation-hook). |\n\n```tsx\nimport React, { useEffect } from \"react\";\nimport { useConfig, useTranslation, registerTranslations, changeLocale } from \"@apisuite/fe-base\";\n\nexport const MyComponent = () => {\n  const { portalName } = useConfig();\n  const { t, i18n } = useTranslation();\n\n  useEffect(() => {\n    // add translations programmatically\n    registerTranslations(\"nl-BE\", await import(\"./nl-BE.json\"));\n\n    // change selected locale\n    changeLocale(\"nl-BE\");\n\n    console.log(\"Current Locale:\", i18n.language);\n  }, []);\n\n  return (\n    <span>{t(\"MyComponent.welcome\", { portalName })}</span>\n  );\n};\n```\n\n## Style System\n\nStyles and theme are provided using [MUI-UI](https://material-ui.com/). This package re-exports the `@material-ui/core` package no need to install it.\n\n**Note**: You still have to handle fonts in your project. It's not handle by this package to give more flexibility in this matter.\n\nMake styles:\n\n```ts\n// styles.ts\nimport { makeStyles } from \"@apisuite/fe-base\";\n\nexport default makeStyles((theme) => ({\n  container: {\n    backgroundColor: theme.palette.background.default,\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  },\n});\n```\n\nUse styles:\n\n```tsx\nimport { useTheme, Button } from \"@apisuite/fe-base\";\nimport useStyles from \"./styles\";\n\nexport const MyComponent = () => {\n  const classes = useStyles();\n  const { palette } = useTheme();\n\n  return (\n    <div className={classes.container}>\n      <span style={{ color: palette.primary.main }}>Hello</span>\n      <Button>Dummy</Button>\n    </div>\n  );\n};\n```\n\n## Tools\n\n### convert-translation\n\nA `convert-translation` script is provided to help convert `json` translation files into `csv` format and back.\n\nTo use it run it from the bin folder `./node_modules/.bin/convert-translation` with a file path as argument or add it to your scripts:\n\n```json\n...\n\"scripts\": {\n  ...\n  \"convert-translation\": \"./node_modules/.bin/convert-translation\"\n}\n...\n```\n\nThen in your terminal run:\n\n```bash\nnpm run convert-translation ./translations/en-US.json # npm run convert-translation ./en-US.csv\n```\n\n**JSON File**\n\nNormal `[key]: value` pairs object.\n\n**CSV File**\n\nThe CSV file follows google translation service requirements, which consists in two columns without a header, where the first is the `key` and the second is the `value`. You can add more columns to give more context to the translators, `convert-translation` will only handle this two columns.\n\n| | |\n|-|-|\n| MyComponent.welcome | welcome to {{portalName}}! |\n| MyComponent.registerCTA | register |\n| MyPage.hello | Hello World! |\n\n","readmeFilename":"README.md","_id":"@apisuite/fe-base@1.0.0-next.3","_nodeVersion":"15.14.0","_npmVersion":"7.9.0","dist":{"integrity":"sha512-8IrLRiElTF6qEwWPHu/SnBuJK0e0+79d05HUYJDTGUuXlFwMgcdkAFiZ5ZrPYScI+lOWFYaCVZ/17LEnNc845w==","shasum":"9d3c9622aa643c6d920f6a40d276730db8270aea","tarball":"https://registry.npmjs.org/@apisuite/fe-base/-/fe-base-1.0.0-next.3.tgz","fileCount":25,"unpackedSize":96316,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfw21CRA9TVsSAnZWagAAkY0P+wYkq8a0j239wZ2HyzSR\nKmRtAkx4zXWYLwQXDelfvo6dMVZyZVh3wdNg56RYWrQgWLsmI0TnW0VQAVBi\noUhxapMaz9Zb8iYN9+Pc+801UVH1uO6F3eLw9fKHIelBMYduu4E4QfKZ3i8m\nb3zYcGJr1fuuR2MagxzOcc2UyTfG3q4qd+NYvFs5o4BtnyYeXO94vVRQhVP6\nhtOeLvQ/8odbtPUlmM5MnNWcvYeDzhvmeIzrQWukTsZzCRb1ZG8aop6LGaMo\nFHeG3NEdF8ud+krNRdDUixczYa+PlyRqIJ/HO8IIpQyBKbxH/HJVZUsslsa+\nZQXdnXSsnqnBrOcY9YcpFrX+83FOKc8y5Ydo5PldvC7EdhcBZOzI2vyBllg7\nKCe1ZigBM1zqlW0bsVvoP3nx4KOq2vikbCs2bt1RV6v6QmJe/RFJmsBJTV3v\n7WC3hs187TdeFkVa/nqtr6Q1nvcpcB8+rEPboZlnQN5GI7PCGXWlrEUb1By4\naXeyGVYJiM7Qd8shNAGwUQk8pXGUGnoJHCYW/L6N78bPl+O//woo5KvhVFKk\ntkPGRbQIbHF5Q9onk7q3KMeRiy//51JdjLAJ23Pr8Qc0BhOB/bgKnIqm6vFc\nSN5SbUUq7nZ+pYqFy9X/ZgGEBEonf1Q6Dbv4E71qFdc44w2J0cqy/3S2EGgo\n8Nmo\r\n=jZLQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB45EhTILXEtDp/BytFC2puZtYQhW/n4qvnN1NtTNfETAiEA2cMVg+qI0Z+Qyp4t8/1L3fcgz9JoVyc+m7dt9l7hQbQ="}]},"_npmUser":{"name":"apisuite-admin","email":"dev@apisuite.io"},"directories":{},"maintainers":[{"name":"apisuite-admin","email":"dev@apisuite.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fe-base_1.0.0-next.3_1618939317171_0.08739682976794816"},"_hasShrinkwrap":false},"1.0.0-next.4":{"name":"@apisuite/fe-base","version":"1.0.0-next.4","description":"ApiSuite core base that exports a provider of server settings, style system and internationalization.","author":{"name":"Bruno Morgado","email":"bruno@cloudoki.com"},"license":"MPL-2","homepage":"https://github.com/APISuite/fe-base#readme","bugs":{"url":"https://github.com/APISuite/fe-base/issues"},"repository":{"type":"git","url":"git+https://github.com/APISuite/fe-base.git"},"main":"index.js","bin":{"convert-translation":"scripts/convert-translation.js"},"scripts":{"build":"cross-env NODE_ENV=production rimraf ./dist && tsc && node scripts/move-build-files dist","prebuild":"npm run lint && npm t","lint":"eslint './lib/**/*.{js,ts,tsx}'","test":"cross-env NODE_ENV=test jest -c ./jest.json","semantic-release":"semantic-release"},"peerDependencies":{"react":"^16.12.0","react-dom":"^16.12.0"},"dependencies":{"@material-ui/core":"4.11.3","i18next":"20.2.1","react-i18next":"11.8.13"},"readme":"# @apisuite/fe-base\n\nAPI Suite frontend provider for settings, style and i18n.\n\n### Installation\n```bash\nnpm install @apisuite/fe-base\n```\n\n## Usage\n\n### ConfigProvider\n\nThe provider should wrap all other components.\n\n| prop | required | example value | description |\n|------|----------|-------|-------------|\n| api | Yes | `{ base: <ROOT_ENDPOINT>, settings?: <SETTINGS_ROUTE>, owner?: <OWNER_ROUTE> }` | API endpoints to fetch settings. Only base is required, the other routes will default to it's property names. |\n| translations | Yes | `{ \"en-US\": import(\"./en-US\"), \"pt-PT\": import(\"./pt-PT\") }` | Dynamic imports mapping for translations . |\n\nHave access to settings and style context. Wrap your App with the `ConfigProvider`.\n\n```tsx\nconst translations = {\n  \"en-US\": import(\"./en-US\"),\n  \"pt-PT\": import(\"./pt-PT\"),\n  ...\n}\n\n...\n\n<ConfigProvider api={{ base: \"https://my-api.io\" }} translations={translations}>\n  <App />\n</ConfigProvider>\n\n...\n```\n\nUsing settings:\n\n```tsx\nimport { useConfig } from \"@apisuite/fe-base\";\n\nexport const MyComponent = () => {\n  const { portalName } = useConfig();\n\n  return (\n    <span>Welcome to {portalName}</span>\n  );\n};\n```\n\n## Internationalization\n\ni18n is provided using [react-i18next](https://react.i18next.com/). This package re-exports the necessary bits no need to install it.\n\n| method | description |\n|--------|-------------|\n| i18n | i18n instance |\n| changeLocale | Changes current locale and optionally registers new translations merging them deep. |\n| registerTranslations | Registers new translations merging them deep. |\n| Trans | Component to help interpolation with HTML elements. see [react-i18next docs](https://react.i18next.com/latest/trans-component). |\n| useTranslation | Hook to access translations. see [react-i18next docs](https://react.i18next.com/latest/usetranslation-hook). |\n\n```tsx\nimport React, { useEffect } from \"react\";\nimport { useConfig, useTranslation, registerTranslations, changeLocale } from \"@apisuite/fe-base\";\n\nexport const MyComponent = () => {\n  const { portalName } = useConfig();\n  const { t, i18n } = useTranslation();\n\n  useEffect(() => {\n    // add translations programmatically\n    registerTranslations(\"nl-BE\", await import(\"./nl-BE.json\"));\n\n    // change selected locale\n    changeLocale(\"nl-BE\");\n\n    console.log(\"Current Locale:\", i18n.language);\n  }, []);\n\n  return (\n    <span>{t(\"MyComponent.welcome\", { portalName })}</span>\n  );\n};\n```\n\n## Style System\n\nStyles and theme are provided using [MUI-UI](https://material-ui.com/). This package re-exports the `@material-ui/core` package no need to install it.\n\n**Note**: You still have to handle fonts in your project. It's not handle by this package to give more flexibility in this matter.\n\nMake styles:\n\n```ts\n// styles.ts\nimport { makeStyles } from \"@apisuite/fe-base\";\n\nexport default makeStyles((theme) => ({\n  container: {\n    backgroundColor: theme.palette.background.default,\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  },\n});\n```\n\nUse styles:\n\n```tsx\nimport { useTheme, Button } from \"@apisuite/fe-base\";\nimport useStyles from \"./styles\";\n\nexport const MyComponent = () => {\n  const classes = useStyles();\n  const { palette } = useTheme();\n\n  return (\n    <div className={classes.container}>\n      <span style={{ color: palette.primary.main }}>Hello</span>\n      <Button>Dummy</Button>\n    </div>\n  );\n};\n```\n\n## Tools\n\n### convert-translation\n\nA `convert-translation` script is provided to help convert `json` translation files into `csv` format and back.\n\nTo use it run it from the bin folder `./node_modules/.bin/convert-translation` with a file path as argument or add it to your scripts:\n\n```json\n...\n\"scripts\": {\n  ...\n  \"convert-translation\": \"./node_modules/.bin/convert-translation\"\n}\n...\n```\n\nThen in your terminal run:\n\n```bash\nnpm run convert-translation ./translations/en-US.json # npm run convert-translation ./en-US.csv\n```\n\n**JSON File**\n\nNormal `[key]: value` pairs object.\n\n**CSV File**\n\nThe CSV file follows google translation service requirements, which consists in two columns without a header, where the first is the `key` and the second is the `value`. You can add more columns to give more context to the translators, `convert-translation` will only handle this two columns.\n\n| | |\n|-|-|\n| MyComponent.welcome | welcome to {{portalName}}! |\n| MyComponent.registerCTA | register |\n| MyPage.hello | Hello World! |\n\n","readmeFilename":"README.md","_id":"@apisuite/fe-base@1.0.0-next.4","_nodeVersion":"15.14.0","_npmVersion":"7.9.0","dist":{"integrity":"sha512-xnCtYuNQOQywCH2yEVD2ivmWD56kpJ1kzMH5xLuq23nCq+oaNHcPLZqn5ETXxi1cku6meraXyofIorRim153BA==","shasum":"74381fbe5a15b4529a6327c8e5bfdeabbbbf89a8","tarball":"https://registry.npmjs.org/@apisuite/fe-base/-/fe-base-1.0.0-next.4.tgz","fileCount":25,"unpackedSize":98266,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiR5bCRA9TVsSAnZWagAA85IP/0Zcl9PFNyuYCKjMq5d1\nh9+aTocED7bGqSKQVoom9yv5PiKtw3cSbfHxuBdAb10yttm848M9wcuHsBRE\nQYdnQQGVCHkiBvoOsOnmT4t14YvfApL9JV9KIWQr9nnYFabb3XoUCh1fvstb\nWefAUS8vz3JqPYLn12By+p/Vp19MwwPgoXKNmzTHQsRgOy5JNvytHZFnuM8A\n0qQPMhGqFNY7dB2vHfyy1hRi/3OX6hKRZm0BaX9BDhDO3n+T4ZfkHr+FQut+\nKzdeMoWjKwRx1ge6UG1BMW3KDiXoawNijqoBZMAXq/gC3+rXM4Y0c2w5vjOL\nPlnMeOczfN3wjVX0Vqd+bebwrP4q5bovHIsqcTEpGQtH4zCOTtclcwrOUpny\nmvcpk0VI3kI7mDuPV1UwDjc+P5bk99hX45tF5xGDY04Y9Q5JEG5zsi21K1A/\nP5TIYcr4BY7pTgttCcNYmkRbEicb0Np22ejJvZbWl20c2eSkqFVgcd/9XGkC\nXCwfaC/k0XUTDuL7deXeUbDIZS0xUmkub1vlgwgh5u4ncEbObqnPVy/5DkUF\nZm6C4zrvZAZ5+5rfqOIMWMAtrBamR7kcCeJhHrYGHdVpztLkLxAXUGVOSG/2\n2rebBF2/T0W/3Mlp62nwmIKj0Qz7q8ewIg86T4Orgzkfl904KlMFwYdc06uT\n7I1I\r\n=B4xj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHhreyIDayNhIE1x3r78QsGpBgxUH3bHTWEoNohzw/hwAiEA52AuUbSuM21Opv/7cpES94nUYHZ5ZjK9xGnRtre/daM="}]},"_npmUser":{"name":"apisuite-admin","email":"dev@apisuite.io"},"directories":{},"maintainers":[{"name":"apisuite-admin","email":"dev@apisuite.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fe-base_1.0.0-next.4_1619598938820_0.4084384128659799"},"_hasShrinkwrap":false},"1.0.0-next.5":{"name":"@apisuite/fe-base","version":"1.0.0-next.5","description":"ApiSuite core base that exports a provider of server settings, style system and internationalization.","author":{"name":"Bruno Morgado","email":"bruno@cloudoki.com"},"license":"MPL-2","homepage":"https://github.com/APISuite/fe-base#readme","bugs":{"url":"https://github.com/APISuite/fe-base/issues"},"repository":{"type":"git","url":"git+https://github.com/APISuite/fe-base.git"},"main":"index.js","bin":{"convert-translation":"scripts/convert-translation.js"},"scripts":{"build":"cross-env NODE_ENV=production rimraf ./dist && tsc && node scripts/move-build-files dist","prebuild":"npm run lint && npm t","lint":"eslint './lib/**/*.{js,ts,tsx}'","test":"cross-env NODE_ENV=test jest -c ./jest.json","semantic-release":"semantic-release"},"peerDependencies":{"react":"^16.12.0","react-dom":"^16.12.0"},"dependencies":{"@material-ui/core":"4.11.3","i18next":"20.2.1","react-i18next":"11.8.13"},"readme":"# @apisuite/fe-base\n\nAPI Suite frontend provider for settings, style and i18n.\n\n### Installation\n```bash\nnpm install @apisuite/fe-base\n```\n\n## Usage\n\n### ConfigProvider\n\nThe provider should wrap all other components.\n\n| prop | required | example value | description |\n|------|----------|-------|-------------|\n| api | Yes | `{ base: <ROOT_ENDPOINT>, settings?: <SETTINGS_ROUTE>, owner?: <OWNER_ROUTE> }` | API endpoints to fetch settings. Only base is required, the other routes will default to it's property names. |\n| translations | Yes | `{ \"en-US\": import(\"./en-US\"), \"pt-PT\": import(\"./pt-PT\") }` | Dynamic imports mapping for translations . |\n\nHave access to settings and style context. Wrap your App with the `ConfigProvider`.\n\n```tsx\nconst translations = {\n  \"en-US\": import(\"./en-US\"),\n  \"pt-PT\": import(\"./pt-PT\"),\n  ...\n}\n\n...\n\n<ConfigProvider api={{ base: \"https://my-api.io\" }} translations={translations}>\n  <App />\n</ConfigProvider>\n\n...\n```\n\nUsing settings:\n\n```tsx\nimport { useConfig } from \"@apisuite/fe-base\";\n\nexport const MyComponent = () => {\n  const { portalName } = useConfig();\n\n  return (\n    <span>Welcome to {portalName}</span>\n  );\n};\n```\n\n## Internationalization\n\ni18n is provided using [react-i18next](https://react.i18next.com/). This package re-exports the necessary bits no need to install it.\n\n| method | description |\n|--------|-------------|\n| i18n | i18n instance |\n| changeLocale | Changes current locale and optionally registers new translations merging them deep. |\n| registerTranslations | Registers new translations merging them deep. |\n| Trans | Component to help interpolation with HTML elements. see [react-i18next docs](https://react.i18next.com/latest/trans-component). |\n| useTranslation | Hook to access translations. see [react-i18next docs](https://react.i18next.com/latest/usetranslation-hook). |\n\n```tsx\nimport React, { useEffect } from \"react\";\nimport { useConfig, useTranslation, registerTranslations, changeLocale } from \"@apisuite/fe-base\";\n\nexport const MyComponent = () => {\n  const { portalName } = useConfig();\n  const { t, i18n } = useTranslation();\n\n  useEffect(() => {\n    // add translations programmatically\n    registerTranslations(\"nl-BE\", await import(\"./nl-BE.json\"));\n\n    // change selected locale\n    changeLocale(\"nl-BE\");\n\n    console.log(\"Current Locale:\", i18n.language);\n  }, []);\n\n  return (\n    <span>{t(\"MyComponent.welcome\", { portalName })}</span>\n  );\n};\n```\n\n## Style System\n\nStyles and theme are provided using [MUI-UI](https://material-ui.com/). This package re-exports the `@material-ui/core` package no need to install it.\n\n**Note**: You still have to handle fonts in your project. It's not handle by this package to give more flexibility in this matter.\n\nMake styles:\n\n```ts\n// styles.ts\nimport { makeStyles } from \"@apisuite/fe-base\";\n\nexport default makeStyles((theme) => ({\n  container: {\n    backgroundColor: theme.palette.background.default,\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  },\n});\n```\n\nUse styles:\n\n```tsx\nimport { useTheme, Button } from \"@apisuite/fe-base\";\nimport useStyles from \"./styles\";\n\nexport const MyComponent = () => {\n  const classes = useStyles();\n  const { palette } = useTheme();\n\n  return (\n    <div className={classes.container}>\n      <span style={{ color: palette.primary.main }}>Hello</span>\n      <Button>Dummy</Button>\n    </div>\n  );\n};\n```\n\n## Tools\n\n### convert-translation\n\nA `convert-translation` script is provided to help convert `json` translation files into `csv` format and back.\n\nTo use it run it from the bin folder `./node_modules/.bin/convert-translation` with a file path as argument or add it to your scripts:\n\n```json\n...\n\"scripts\": {\n  ...\n  \"convert-translation\": \"./node_modules/.bin/convert-translation\"\n}\n...\n```\n\nThen in your terminal run:\n\n```bash\nnpm run convert-translation ./translations/en-US.json # npm run convert-translation ./en-US.csv\n```\n\n**JSON File**\n\nNormal `[key]: value` pairs object.\n\n**CSV File**\n\nThe CSV file follows google translation service requirements, which consists in two columns without a header, where the first is the `key` and the second is the `value`. You can add more columns to give more context to the translators, `convert-translation` will only handle this two columns.\n\n| | |\n|-|-|\n| MyComponent.welcome | welcome to {{portalName}}! |\n| MyComponent.registerCTA | register |\n| MyPage.hello | Hello World! |\n\n","readmeFilename":"README.md","_id":"@apisuite/fe-base@1.0.0-next.5","_nodeVersion":"15.14.0","_npmVersion":"7.9.0","dist":{"integrity":"sha512-53hli6eRynI20VuxuTSpsYc2C8TCNURxtuekwKlknhf4I5LAbtOh+mSb7ZZ6HKd324NcDXD95jpRlceglT+UKQ==","shasum":"76e3ff21e9dccd2972efdf303598082e588a459c","tarball":"https://registry.npmjs.org/@apisuite/fe-base/-/fe-base-1.0.0-next.5.tgz","fileCount":25,"unpackedSize":98119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnOuxCRA9TVsSAnZWagAAwdIQAKRdO7RJOGw0foZ9fbhD\nSGmNTMRC4lXM1Lm35cnwBZQugAt2ttgo2Ei+EyoH1ufNdrwrPXtdjTUxce6B\nNxFpfcZ0o/gSHCAQ33XQa5Qjq0pEF1mOwNl/i/HLfPV15WipJdjnZ4ejlYF+\nTS5fSzHJQJgnud32cjzmlzsaAzG8fNTW9IgseFQtW+3NnB1a2Kex9kbLzNiB\nQakbGhkpVCJTeNTsmWq4o/4vrKHMjgh2l64LfmW6XkX8DV4ki+YWIx7tJdPC\n7UGy+m6SBflc8s2nD5itH9mbLbATPyq343JBT5yPxocqoBkPALRKaz+zXXqN\nr5OYYMJqsmVByIsuSHQGUXMjLYcFug2STNrzyKwbbhhD1dDmM27n1QgReT7o\nWWxghXSXS4mthts+CBZes3hSnEzAOOxTvok0vXVfyWQcRTr3Ip7BYMKc9054\nRiHdvk9pqIRRWFY7CkuxXxAthR2f6Fe3C/ac7eGMer71GzCdvorbhe7Uh8JJ\nLgEtZWOhNdNUaHZPTV1irEYjsnHD+ZHPkiRJlSlPPlAB3adkKgcWGqbniSvA\nte3EmFn6Bhj/myLrHPuL4/C1Lq0xIzExH5maNFE5QoUwlLle2P50tpLty5ob\nQvDaKHZwi/qY8FERE6lCGXeNqDTuUSXZALOMYYD/nuvFWnmopQJC2AjEbV+M\nXmSc\r\n=Z1Lp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDc4WSI4WoTCszz5xnwfYtDCpLSdZZUvWmTW4Olb9G1fwIgPMdmgSCJNtyDiQWdRgJbQ/DLvyPKiuvaZmq0J9cd1g8="}]},"_npmUser":{"name":"apisuite-admin","email":"dev@apisuite.io"},"directories":{},"maintainers":[{"name":"apisuite-admin","email":"dev@apisuite.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fe-base_1.0.0-next.5_1620896688979_0.17136637274145738"},"_hasShrinkwrap":false},"1.0.0-next.6":{"name":"@apisuite/fe-base","version":"1.0.0-next.6","description":"ApiSuite core base that exports a provider of server settings, style system and internationalization.","author":{"name":"Bruno Morgado","email":"bruno@cloudoki.com"},"license":"MPL-2","homepage":"https://github.com/APISuite/fe-base#readme","bugs":{"url":"https://github.com/APISuite/fe-base/issues"},"repository":{"type":"git","url":"git+https://github.com/APISuite/fe-base.git"},"main":"index.js","bin":{"convert-translation":"scripts/convert-translation.js"},"watch":{"dev-build":{"patterns":["lib"],"extensions":"ts,tsx,scss,json","quiet":false}},"scripts":{"build":"rimraf ./dist && tsc && node scripts/move-build-files dist","prebuild":"npm run lint && npm t","dev-build":"tsc","dev":"npm-watch dev-build","lint":"eslint './lib/**/*.{js,ts,tsx}'","test":"jest -c ./jest.json","semantic-release":"semantic-release"},"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2"},"dependencies":{"@material-ui/core":"4.11.3","i18next":"20.2.1","react-i18next":"11.8.13"},"readme":"# @apisuite/fe-base\n\nAPI Suite frontend provider for settings, style and i18n.\n\n### Installation\n```bash\nnpm install @apisuite/fe-base\n```\n\n## Usage\n\n### ConfigProvider\n\nThe provider should wrap all other components.\n\n| prop | required | example value | description |\n|------|----------|-------|-------------|\n| api | Yes | `{ base: <ROOT_ENDPOINT>, settings?: <SETTINGS_ROUTE>, owner?: <OWNER_ROUTE> }` | API endpoints to fetch settings. Only base is required, the other routes will default to it's property names. |\n| translations | Yes | `{ \"en-US\": import(\"./en-US\"), \"pt-PT\": import(\"./pt-PT\") }` | Dynamic imports mapping for translations . |\n\nHave access to settings and style context. Wrap your App with the `ConfigProvider`.\n\n```tsx\nconst translations = {\n  \"en-US\": import(\"./en-US\"),\n  \"pt-PT\": import(\"./pt-PT\"),\n  ...\n}\n\n...\n\n<ConfigProvider api={{ base: \"https://my-api.io\" }} translations={translations}>\n  <App />\n</ConfigProvider>\n\n...\n```\n\nUsing settings:\n\n```tsx\nimport { useConfig } from \"@apisuite/fe-base\";\n\nexport const MyComponent = () => {\n  const { portalName } = useConfig();\n\n  return (\n    <span>Welcome to {portalName}</span>\n  );\n};\n```\n\n## Internationalization\n\ni18n is provided using [react-i18next](https://react.i18next.com/). This package re-exports the necessary bits no need to install it.\n\n| method | description |\n|--------|-------------|\n| i18n | i18n instance |\n| changeLocale | Changes current locale and optionally registers new translations merging them deep. |\n| registerTranslations | Registers new translations merging them deep. |\n| Trans | Component to help interpolation with HTML elements. see [react-i18next docs](https://react.i18next.com/latest/trans-component). |\n| useTranslation | Hook to access translations. see [react-i18next docs](https://react.i18next.com/latest/usetranslation-hook). |\n\n```tsx\nimport React, { useEffect } from \"react\";\nimport { useConfig, useTranslation, registerTranslations, changeLocale } from \"@apisuite/fe-base\";\n\nexport const MyComponent = () => {\n  const { portalName } = useConfig();\n  const { t, i18n } = useTranslation();\n\n  useEffect(() => {\n    // add translations programmatically\n    registerTranslations(\"nl-BE\", await import(\"./nl-BE.json\"));\n\n    // change selected locale\n    changeLocale(\"nl-BE\");\n\n    console.log(\"Current Locale:\", i18n.language);\n  }, []);\n\n  return (\n    <span>{t(\"MyComponent.welcome\", { portalName })}</span>\n  );\n};\n```\n\n## Style System\n\nStyles and theme are provided using [MUI-UI](https://material-ui.com/). This package re-exports the `@material-ui/core` package no need to install it.\n\n**Note**: You still have to handle fonts in your project. It's not handle by this package to give more flexibility in this matter.\n\nMake styles:\n\n```ts\n// styles.ts\nimport { makeStyles } from \"@apisuite/fe-base\";\n\nexport default makeStyles((theme) => ({\n  container: {\n    backgroundColor: theme.palette.background.default,\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  },\n});\n```\n\nUse styles:\n\n```tsx\nimport { useTheme, Button } from \"@apisuite/fe-base\";\nimport useStyles from \"./styles\";\n\nexport const MyComponent = () => {\n  const classes = useStyles();\n  const { palette } = useTheme();\n\n  return (\n    <div className={classes.container}>\n      <span style={{ color: palette.primary.main }}>Hello</span>\n      <Button>Dummy</Button>\n    </div>\n  );\n};\n```\n\n## Tools\n\n### convert-translation\n\nA `convert-translation` script is provided to help convert `json` translation files into `csv` format and back.\n\nTo use it run it from the bin folder `./node_modules/.bin/convert-translation` with a file path as argument or add it to your scripts:\n\n```json\n...\n\"scripts\": {\n  ...\n  \"convert-translation\": \"./node_modules/.bin/convert-translation\"\n}\n...\n```\n\nThen in your terminal run:\n\n```bash\nnpm run convert-translation ./translations/en-US.json # npm run convert-translation ./en-US.csv\n```\n\n**JSON File**\n\nNormal `[key]: value` pairs object.\n\n**CSV File**\n\nThe CSV file follows google translation service requirements, which consists in two columns without a header, where the first is the `key` and the second is the `value`. You can add more columns to give more context to the translators, `convert-translation` will only handle this two columns.\n\n| | |\n|-|-|\n| MyComponent.welcome | welcome to {{portalName}}! |\n| MyComponent.registerCTA | register |\n| MyPage.hello | Hello World! |\n\n","readmeFilename":"README.md","_id":"@apisuite/fe-base@1.0.0-next.6","_nodeVersion":"15.14.0","_npmVersion":"7.9.0","dist":{"integrity":"sha512-tm6XmKgDX6/1s5Vc4mjGrKXxqVqbfVhMCDdL9gibNvrFggl+ZLp/mDq0rQjoeVLvGkv2J9ygz9zKKoIlCWuIRA==","shasum":"bfbcf3db0a27dd1fcddf35a4991a4af54a400a70","tarball":"https://registry.npmjs.org/@apisuite/fe-base/-/fe-base-1.0.0-next.6.tgz","fileCount":25,"unpackedSize":100677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrf1XCRA9TVsSAnZWagAAARMP/iyF454RUyCKdb9JTAkq\nPXoMaYqE36+QMp0lFMZ6/LNY9/LIkJegc2FnCN4HEnTBq8JXuUE4lciNfFV+\nmuyhoWOku1qtS/ZpxSsX4k57TTHEJq6ltjebzoj7HzxSN+w2it9jkJi5iPGs\n78uYGcQEPVAxuI1n26PfwZid+HP9jAEOfFLRN3w1D3VhjIMS16e7/m7/lTHQ\nGJKxPt0/Bn25RfQMI2Y4Dr5qJD2Bs/wK5DfWLTBkUCraq9aPUSvQPNRYIW4Z\n6a+NBjaOLVddHXTMuCI5+bbBFSgvNAXIjA16EJ7+8LC4y5Tff5VvvYhLT8Ke\nMMFRBLa6dug8CNDHkWrZukbRfz2G2hU80y1LErl52mwKLSI9mLydky47KByX\ndoc5w6nXpXzdaWTnSB+1nq8Irm/pfhGxgagQRB1/vdEM3bOip/DA4yTtyztw\nl3BscqsLFnnPWTeERqg8F+nohwknNeGIb8YuXz7pA+sQZkkMcMV4ekLPdlXm\ninnCA9S+Gq2/BEBm+5EcMaotl8zQ8MlExrf+aL/bdDU20HbEuDpBBMfgqgGY\nayZpDCr7QDSFDIXcBHTm13aCK5F/ZOiQmjYWPZZfhlTsm/PQX66Skn++Q+mR\nwo3DkVO4/O8Af89mnmxUYL3JvMfst8zmJfK8fDXuGOtCg6StuZIO3jqHab9O\nGRVS\r\n=WPXf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBUUBUpSzGYYzIrCA4WjAXJJWfc06YBQbbumEOwaXlJ7AiEAnCpyFDtJBdA92Eks1kjbQz2YKoeiTBXB+XKqxXuHNis="}]},"_npmUser":{"name":"apisuite-admin","email":"dev@apisuite.io"},"directories":{},"maintainers":[{"name":"apisuite-admin","email":"dev@apisuite.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fe-base_1.0.0-next.6_1622015318975_0.38534358245167843"},"_hasShrinkwrap":false},"1.0.0-next.7":{"name":"@apisuite/fe-base","version":"1.0.0-next.7","description":"ApiSuite core base that exports a provider of server settings, style system and internationalization.","author":{"name":"Bruno Morgado","email":"bruno@cloudoki.com"},"license":"MPL-2","homepage":"https://github.com/APISuite/fe-base#readme","bugs":{"url":"https://github.com/APISuite/fe-base/issues"},"repository":{"type":"git","url":"git+https://github.com/APISuite/fe-base.git"},"main":"index.js","bin":{"convert-translation":"scripts/convert-translation.js"},"watch":{"dev-build":{"patterns":["lib"],"extensions":"ts,tsx,scss,json","quiet":false}},"scripts":{"build":"rimraf ./dist && tsc && node scripts/move-build-files dist","prebuild":"npm run lint && npm t","dev-build":"tsc","dev":"npm-watch dev-build","lint":"eslint './lib/**/*.{js,ts,tsx}'","test":"jest -c ./jest.json","semantic-release":"semantic-release"},"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2"},"dependencies":{"@material-ui/core":"4.11.3","i18next":"20.2.1","react-i18next":"11.8.13"},"readme":"# @apisuite/fe-base\n\nAPI Suite frontend provider for settings, style and i18n.\n\n### Installation\n```bash\nnpm install @apisuite/fe-base\n```\n\n## Usage\n\n### ConfigProvider\n\nThe provider should wrap all other components.\n\n| prop | required | example value | description |\n|------|----------|-------|-------------|\n| api | Yes | `{ base: <ROOT_ENDPOINT>, settings?: <SETTINGS_ROUTE>, owner?: <OWNER_ROUTE> }` | API endpoints to fetch settings. Only base is required, the other routes will default to it's property names. |\n| translations | Yes | `{ \"en-US\": import(\"./en-US\"), \"pt-PT\": import(\"./pt-PT\") }` | Dynamic imports mapping for translations . |\n\nHave access to settings and style context. Wrap your App with the `ConfigProvider`.\n\n```tsx\nconst translations = {\n  \"en-US\": import(\"./en-US\"),\n  \"pt-PT\": import(\"./pt-PT\"),\n  ...\n}\n\n...\n\n<ConfigProvider api={{ base: \"https://my-api.io\" }} translations={translations}>\n  <App />\n</ConfigProvider>\n\n...\n```\n\nUsing settings:\n\n```tsx\nimport { useConfig } from \"@apisuite/fe-base\";\n\nexport const MyComponent = () => {\n  const { portalName } = useConfig();\n\n  return (\n    <span>Welcome to {portalName}</span>\n  );\n};\n```\n\n## Internationalization\n\ni18n is provided using [react-i18next](https://react.i18next.com/). This package re-exports the necessary bits no need to install it.\n\n| method | description |\n|--------|-------------|\n| i18n | i18n instance |\n| changeLocale | Changes current locale and optionally registers new translations merging them deep. |\n| registerTranslations | Registers new translations merging them deep. |\n| Trans | Component to help interpolation with HTML elements. see [react-i18next docs](https://react.i18next.com/latest/trans-component). |\n| useTranslation | Hook to access translations. see [react-i18next docs](https://react.i18next.com/latest/usetranslation-hook). |\n\n```tsx\nimport React, { useEffect } from \"react\";\nimport { useConfig, useTranslation, registerTranslations, changeLocale } from \"@apisuite/fe-base\";\n\nexport const MyComponent = () => {\n  const { portalName } = useConfig();\n  const { t, i18n } = useTranslation();\n\n  useEffect(() => {\n    // add translations programmatically\n    registerTranslations(\"nl-BE\", await import(\"./nl-BE.json\"));\n\n    // change selected locale\n    changeLocale(\"nl-BE\");\n\n    console.log(\"Current Locale:\", i18n.language);\n  }, []);\n\n  return (\n    <span>{t(\"MyComponent.welcome\", { portalName })}</span>\n  );\n};\n```\n\n## Style System\n\nStyles and theme are provided using [MUI-UI](https://material-ui.com/). This package re-exports the `@material-ui/core` package no need to install it.\n\n**Note**: You still have to handle fonts in your project. It's not handle by this package to give more flexibility in this matter.\n\nMake styles:\n\n```ts\n// styles.ts\nimport { makeStyles } from \"@apisuite/fe-base\";\n\nexport default makeStyles((theme) => ({\n  container: {\n    backgroundColor: theme.palette.background.default,\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  },\n});\n```\n\nUse styles:\n\n```tsx\nimport { useTheme, Button } from \"@apisuite/fe-base\";\nimport useStyles from \"./styles\";\n\nexport const MyComponent = () => {\n  const classes = useStyles();\n  const { palette } = useTheme();\n\n  return (\n    <div className={classes.container}>\n      <span style={{ color: palette.primary.main }}>Hello</span>\n      <Button>Dummy</Button>\n    </div>\n  );\n};\n```\n\n## Tools\n\n### convert-translation\n\nA `convert-translation` script is provided to help convert `json` translation files into `csv` format and back.\n\nTo use it run it from the bin folder `./node_modules/.bin/convert-translation` with a file path as argument or add it to your scripts:\n\n```json\n...\n\"scripts\": {\n  ...\n  \"convert-translation\": \"./node_modules/.bin/convert-translation\"\n}\n...\n```\n\nThen in your terminal run:\n\n```bash\nnpm run convert-translation ./translations/en-US.json # npm run convert-translation ./en-US.csv\n```\n\n**JSON File**\n\nNormal `[key]: value` pairs object.\n\n**CSV File**\n\nThe CSV file follows google translation service requirements, which consists in two columns without a header, where the first is the `key` and the second is the `value`. You can add more columns to give more context to the translators, `convert-translation` will only handle this two columns.\n\n| | |\n|-|-|\n| MyComponent.welcome | welcome to {{portalName}}! |\n| MyComponent.registerCTA | register |\n| MyPage.hello | Hello World! |\n\n","readmeFilename":"README.md","_id":"@apisuite/fe-base@1.0.0-next.7","_nodeVersion":"16.2.0","_npmVersion":"7.9.0","dist":{"integrity":"sha512-1VzBXXKtpSHx/7mj7oSML0RZOQq6hWcsIUCAm1wfsmueCFqH1qhVmL8jQUIxmJKhM5K+GE/FFw3aeaYW5PAZ7g==","shasum":"2f9ca6cacac6bfa627482de8588ebdd41b665583","tarball":"https://registry.npmjs.org/@apisuite/fe-base/-/fe-base-1.0.0-next.7.tgz","fileCount":27,"unpackedSize":101363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtkEQCRA9TVsSAnZWagAA7foP/ikaXDWN6XBm1Cv8WuOK\nbDegCa5gDbEZkoI06MAceqqmzXxA7Yhwtq93Zxfjra6511bVoNudl+QUdZXl\nU5neQEpvUOj7rjlJNmgpQDaX24jU/864YgToPcnyoCWLjwTDDTupxsnIs3Cm\nA+KAAnWkUGMaoptAtxmwUTqdddWdGa5uQdr484E6JryU/plaZUjZbUnriPP4\nxQNyz4N3RegqQ1XI0IG0xyQ9KNop3VmB5u407bjrJCcHRCkDDJGTK2Kb3Mk+\nZQRMfMeqhfTUljLKr6O976lq3DElHbjrFpCwvdI5foAR+wvOnbUUxyeTdmN6\nA1O/TbdREwrcv7pdH68kAzau3DFeHtfUzcnMpZk77SXaWpn+5uexG7wUhTUN\ndTvbA3THdhwOHkrglVmy+ml658kd35GNZZDvAhzjNPQ2cer0SSZUwSJG/SzA\n9pH4WKnn+VuyE1a4dKH5CVBOh+CrHhgIJvjcUMyaXHnOccpO8kR71hjrD5dQ\nvh9TIZZGL+DRXkUlb6pu+sTBTEUtgz29soNNe/S9AUolT8YKJwzyz4lajmOU\n7BpiS9kC+xi3AqQBpAkINnvM+N07wQJ3rJsOdxSnINWe8YMfS9pPYSybnsar\nRSyqzDP294+HL7qJv2quqMzEl7LWK7YzKwKoJ/hDaYyzTdN6hYP921olL94P\nGmEQ\r\n=yAKx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICGHcLXPEpOM6ZFerdfqnfvur9f28jp8z3qIVGdakNqSAiEA0AkToT69VRlx/oiF+YVuw+Uc7IWdOagr9oxZ4mrKDtM="}]},"_npmUser":{"name":"apisuite-admin","email":"dev@apisuite.io"},"directories":{},"maintainers":[{"name":"apisuite-admin","email":"dev@apisuite.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fe-base_1.0.0-next.7_1622556943702_0.5654252692627051"},"_hasShrinkwrap":false},"1.0.0-next.8":{"name":"@apisuite/fe-base","version":"1.0.0-next.8","description":"ApiSuite core base that exports a provider of server settings, style system and internationalization.","author":{"name":"Bruno Morgado","email":"bruno@cloudoki.com"},"license":"MPL-2","homepage":"https://github.com/APISuite/fe-base#readme","bugs":{"url":"https://github.com/APISuite/fe-base/issues"},"repository":{"type":"git","url":"git+https://github.com/APISuite/fe-base.git"},"main":"index.js","bin":{"convert-translation":"scripts/convert-translation.js"},"watch":{"dev-build":{"patterns":["lib"],"extensions":"ts,tsx,scss,json","quiet":false}},"scripts":{"build":"rimraf ./dist && tsc && node scripts/move-build-files dist","prebuild":"npm run lint && npm t","dev-build":"tsc","dev":"npm-watch dev-build","lint":"eslint './lib/**/*.{js,ts,tsx}'","test":"jest -c ./jest.json","semantic-release":"semantic-release"},"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2"},"dependencies":{"@material-ui/core":"4.11.3","i18next":"20.2.1","react-i18next":"11.8.13"},"readme":"# @apisuite/fe-base\n\nAPI Suite frontend provider for settings, style and i18n.\n\n### Installation\n```bash\nnpm install @apisuite/fe-base\n```\n\n## Usage\n\n### ConfigProvider\n\nThe provider should wrap all other components.\n\n| prop | required | example value | description |\n|------|----------|-------|-------------|\n| api | Yes | `{ base: <ROOT_ENDPOINT>, settings?: <SETTINGS_ROUTE>, owner?: <OWNER_ROUTE> }` | API endpoints to fetch settings. Only base is required, the other routes will default to it's property names. |\n| translations | Yes | `{ \"en-US\": import(\"./en-US\"), \"pt-PT\": import(\"./pt-PT\") }` | Dynamic imports mapping for translations . |\n\nHave access to settings and style context. Wrap your App with the `ConfigProvider`.\n\n```tsx\nconst translations = {\n  \"en-US\": import(\"./en-US\"),\n  \"pt-PT\": import(\"./pt-PT\"),\n  ...\n}\n\n...\n\n<ConfigProvider api={{ base: \"https://my-api.io\" }} translations={translations}>\n  <App />\n</ConfigProvider>\n\n...\n```\n\nUsing settings:\n\n```tsx\nimport { useConfig } from \"@apisuite/fe-base\";\n\nexport const MyComponent = () => {\n  const { portalName } = useConfig();\n\n  return (\n    <span>Welcome to {portalName}</span>\n  );\n};\n```\n\n## Internationalization\n\ni18n is provided using [react-i18next](https://react.i18next.com/). This package re-exports the necessary bits no need to install it.\n\n| method | description |\n|--------|-------------|\n| i18n | i18n instance |\n| changeLocale | Changes current locale and optionally registers new translations merging them deep. |\n| registerTranslations | Registers new translations merging them deep. |\n| Trans | Component to help interpolation with HTML elements. see [react-i18next docs](https://react.i18next.com/latest/trans-component). |\n| useTranslation | Hook to access translations. see [react-i18next docs](https://react.i18next.com/latest/usetranslation-hook). |\n\n```tsx\nimport React, { useEffect } from \"react\";\nimport { useConfig, useTranslation, registerTranslations, changeLocale } from \"@apisuite/fe-base\";\n\nexport const MyComponent = () => {\n  const { portalName } = useConfig();\n  const { t, i18n } = useTranslation();\n\n  useEffect(() => {\n    // add translations programmatically\n    registerTranslations(\"nl-BE\", await import(\"./nl-BE.json\"));\n\n    // change selected locale\n    changeLocale(\"nl-BE\");\n\n    console.log(\"Current Locale:\", i18n.language);\n  }, []);\n\n  return (\n    <span>{t(\"MyComponent.welcome\", { portalName })}</span>\n  );\n};\n```\n\n## Style System\n\nStyles and theme are provided using [MUI-UI](https://material-ui.com/). This package re-exports the `@material-ui/core` package no need to install it.\n\n**Note**: You still have to handle fonts in your project. It's not handle by this package to give more flexibility in this matter.\n\nMake styles:\n\n```ts\n// styles.ts\nimport { makeStyles } from \"@apisuite/fe-base\";\n\nexport default makeStyles((theme) => ({\n  container: {\n    backgroundColor: theme.palette.background.default,\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  },\n});\n```\n\nUse styles:\n\n```tsx\nimport { useTheme, Button } from \"@apisuite/fe-base\";\nimport useStyles from \"./styles\";\n\nexport const MyComponent = () => {\n  const classes = useStyles();\n  const { palette } = useTheme();\n\n  return (\n    <div className={classes.container}>\n      <span style={{ color: palette.primary.main }}>Hello</span>\n      <Button>Dummy</Button>\n    </div>\n  );\n};\n```\n\n## Tools\n\n### convert-translation\n\nA `convert-translation` script is provided to help convert `json` translation files into `csv` format and back.\n\nTo use it run it from the bin folder `./node_modules/.bin/convert-translation` with a file path as argument or add it to your scripts:\n\n```json\n...\n\"scripts\": {\n  ...\n  \"convert-translation\": \"./node_modules/.bin/convert-translation\"\n}\n...\n```\n\nThen in your terminal run:\n\n```bash\nnpm run convert-translation ./translations/en-US.json # npm run convert-translation ./en-US.csv\n```\n\n**JSON File**\n\nNormal `[key]: value` pairs object.\n\n**CSV File**\n\nThe CSV file follows google translation service requirements, which consists in two columns without a header, where the first is the `key` and the second is the `value`. You can add more columns to give more context to the translators, `convert-translation` will only handle this two columns.\n\n| | |\n|-|-|\n| MyComponent.welcome | welcome to {{portalName}}! |\n| MyComponent.registerCTA | register |\n| MyPage.hello | Hello World! |\n\n","readmeFilename":"README.md","_id":"@apisuite/fe-base@1.0.0-next.8","_nodeVersion":"17.0.1","_npmVersion":"7.9.0","dist":{"integrity":"sha512-Qt+QannrWcFqppeDo/swUYI3V5UneDwkR91LuRFD8EfiFn9GZc9g3NCffn6hffpB2ZbG/Jc4qQShB/wsN51U2Q==","shasum":"a2a75e8cc398ec425c009241cc073acbe95a2c27","tarball":"https://registry.npmjs.org/@apisuite/fe-base/-/fe-base-1.0.0-next.8.tgz","fileCount":27,"unpackedSize":101474,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF4SxBGNxfHIEaf6AlHg93k7cGmurC+skeVfPg0GXVAvAiEAgtuVAZqslTqUqmw3T/oo7K8o09dBwhX8xBtvjvy4kr0="}]},"_npmUser":{"name":"apisuite-admin","email":"dev@apisuite.io"},"directories":{},"maintainers":[{"name":"apisuite-admin","email":"dev@apisuite.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fe-base_1.0.0-next.8_1636383212243_0.765828182776257"},"_hasShrinkwrap":false},"1.0.0-next.9":{"name":"@apisuite/fe-base","version":"1.0.0-next.9","description":"ApiSuite core base that exports a provider of server settings, style system and internationalization.","author":{"name":"Bruno Morgado","email":"bruno@cloudoki.com"},"license":"MPL-2","homepage":"https://github.com/APISuite/fe-base#readme","bugs":{"url":"https://github.com/APISuite/fe-base/issues"},"repository":{"type":"git","url":"git+https://github.com/APISuite/fe-base.git"},"main":"index.js","bin":{"convert-translation":"scripts/convert-translation.js"},"watch":{"dev-build":{"patterns":["lib"],"extensions":"ts,tsx,scss,json","quiet":false}},"scripts":{"build":"rimraf ./dist && tsc && node scripts/move-build-files dist","prebuild":"npm run lint && npm t","dev-build":"tsc","dev":"npm-watch dev-build","lint":"eslint './lib/**/*.{js,ts,tsx}'","test":"jest -c ./jest.json","semantic-release":"semantic-release"},"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2"},"dependencies":{"@material-ui/core":"4.11.3","i18next":"20.2.1","react-i18next":"11.8.13"},"readme":"# @apisuite/fe-base\n\nAPI Suite frontend provider for settings, style and i18n.\n\n### Installation\n```bash\nnpm install @apisuite/fe-base\n```\n\n## Usage\n\n### ConfigProvider\n\nThe provider should wrap all other components.\n\n| prop | required | example value | description |\n|------|----------|-------|-------------|\n| api | Yes | `{ base: <ROOT_ENDPOINT>, settings?: <SETTINGS_ROUTE>, owner?: <OWNER_ROUTE> }` | API endpoints to fetch settings. Only base is required, the other routes will default to it's property names. |\n| translations | Yes | `{ \"en-US\": import(\"./en-US\"), \"pt-PT\": import(\"./pt-PT\") }` | Dynamic imports mapping for translations . |\n\nHave access to settings and style context. Wrap your App with the `ConfigProvider`.\n\n```tsx\nconst translations = {\n  \"en-US\": import(\"./en-US\"),\n  \"pt-PT\": import(\"./pt-PT\"),\n  ...\n}\n\n...\n\n<ConfigProvider api={{ base: \"https://my-api.io\" }} translations={translations}>\n  <App />\n</ConfigProvider>\n\n...\n```\n\nUsing settings:\n\n```tsx\nimport { useConfig } from \"@apisuite/fe-base\";\n\nexport const MyComponent = () => {\n  const { portalName } = useConfig();\n\n  return (\n    <span>Welcome to {portalName}</span>\n  );\n};\n```\n\n## Internationalization\n\ni18n is provided using [react-i18next](https://react.i18next.com/). This package re-exports the necessary bits no need to install it.\n\n| method | description |\n|--------|-------------|\n| i18n | i18n instance |\n| changeLocale | Changes current locale and optionally registers new translations merging them deep. |\n| registerTranslations | Registers new translations merging them deep. |\n| Trans | Component to help interpolation with HTML elements. see [react-i18next docs](https://react.i18next.com/latest/trans-component). |\n| useTranslation | Hook to access translations. see [react-i18next docs](https://react.i18next.com/latest/usetranslation-hook). |\n\n```tsx\nimport React, { useEffect } from \"react\";\nimport { useConfig, useTranslation, registerTranslations, changeLocale } from \"@apisuite/fe-base\";\n\nexport const MyComponent = () => {\n  const { portalName } = useConfig();\n  const { t, i18n } = useTranslation();\n\n  useEffect(() => {\n    // add translations programmatically\n    registerTranslations(\"nl-BE\", await import(\"./nl-BE.json\"));\n\n    // change selected locale\n    changeLocale(\"nl-BE\");\n\n    console.log(\"Current Locale:\", i18n.language);\n  }, []);\n\n  return (\n    <span>{t(\"MyComponent.welcome\", { portalName })}</span>\n  );\n};\n```\n\n## Style System\n\nStyles and theme are provided using [MUI-UI](https://material-ui.com/). This package re-exports the `@material-ui/core` package no need to install it.\n\n**Note**: You still have to handle fonts in your project. It's not handle by this package to give more flexibility in this matter.\n\nMake styles:\n\n```ts\n// styles.ts\nimport { makeStyles } from \"@apisuite/fe-base\";\n\nexport default makeStyles((theme) => ({\n  container: {\n    backgroundColor: theme.palette.background.default,\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  },\n});\n```\n\nUse styles:\n\n```tsx\nimport { useTheme, Button } from \"@apisuite/fe-base\";\nimport useStyles from \"./styles\";\n\nexport const MyComponent = () => {\n  const classes = useStyles();\n  const { palette } = useTheme();\n\n  return (\n    <div className={classes.container}>\n      <span style={{ color: palette.primary.main }}>Hello</span>\n      <Button>Dummy</Button>\n    </div>\n  );\n};\n```\n\n## Tools\n\n### convert-translation\n\nA `convert-translation` script is provided to help convert `json` translation files into `csv` format and back.\n\nTo use it run it from the bin folder `./node_modules/.bin/convert-translation` with a file path as argument or add it to your scripts:\n\n```json\n...\n\"scripts\": {\n  ...\n  \"convert-translation\": \"./node_modules/.bin/convert-translation\"\n}\n...\n```\n\nThen in your terminal run:\n\n```bash\nnpm run convert-translation ./translations/en-US.json # npm run convert-translation ./en-US.csv\n```\n\n**JSON File**\n\nNormal `[key]: value` pairs object.\n\n**CSV File**\n\nThe CSV file follows google translation service requirements, which consists in two columns without a header, where the first is the `key` and the second is the `value`. You can add more columns to give more context to the translators, `convert-translation` will only handle this two columns.\n\n| | |\n|-|-|\n| MyComponent.welcome | welcome to {{portalName}}! |\n| MyComponent.registerCTA | register |\n| MyPage.hello | Hello World! |\n\n","readmeFilename":"README.md","_id":"@apisuite/fe-base@1.0.0-next.9","_nodeVersion":"17.0.1","_npmVersion":"7.9.0","dist":{"integrity":"sha512-PkBsOgrmJOZjaeqD/bhc6QHlNG9eSiGw8F9uwWK0fy3Kn1zmc2KELzsDaDN8Mn0eGzpjDQWi5054CS+fE+b0FQ==","shasum":"1ac357b0d4c7845559e3efa88567160638d10652","tarball":"https://registry.npmjs.org/@apisuite/fe-base/-/fe-base-1.0.0-next.9.tgz","fileCount":35,"unpackedSize":104693,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHfw4M8qf17wN8PNsqRFwZcj8xk8uJPrjlo6lzdYLa2+AiAoWCRYfVJpuqwQEzsbI5lG9oRg88wBKX4HZ4YWGVBCVw=="}]},"_npmUser":{"name":"apisuite-admin","email":"dev@apisuite.io"},"directories":{},"maintainers":[{"name":"apisuite-admin","email":"dev@apisuite.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fe-base_1.0.0-next.9_1636660908577_0.6981066293974978"},"_hasShrinkwrap":false},"1.0.0-next.10":{"name":"@apisuite/fe-base","version":"1.0.0-next.10","description":"ApiSuite core base that exports a provider of server settings, style system and internationalization.","author":{"name":"Bruno Morgado","email":"bruno@cloudoki.com"},"license":"MPL-2","homepage":"https://github.com/APISuite/fe-base#readme","bugs":{"url":"https://github.com/APISuite/fe-base/issues"},"repository":{"type":"git","url":"git+https://github.com/APISuite/fe-base.git"},"main":"index.js","bin":{"convert-translation":"scripts/convert-translation.js"},"watch":{"dev-build":{"patterns":["lib"],"extensions":"ts,tsx,scss,json","quiet":false}},"scripts":{"build":"rimraf ./dist && tsc && node scripts/move-build-files dist","prebuild":"npm run lint && npm t","dev-build":"tsc","dev":"npm-watch dev-build","lint":"eslint './lib/**/*.{js,ts,tsx}'","test":"jest -c ./jest.json","semantic-release":"semantic-release"},"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2"},"dependencies":{"@material-ui/core":"4.11.3","i18next":"20.2.1","react-i18next":"11.8.13"},"readme":"# @apisuite/fe-base\n\nAPI Suite frontend provider for settings, style and i18n.\n\n### Installation\n```bash\nnpm install @apisuite/fe-base\n```\n\n## Usage\n\n### ConfigProvider\n\nThe provider should wrap all other components.\n\n| prop | required | example value | description |\n|------|----------|-------|-------------|\n| api | Yes | `{ base: <ROOT_ENDPOINT>, settings?: <SETTINGS_ROUTE>, owner?: <OWNER_ROUTE> }` | API endpoints to fetch settings. Only base is required, the other routes will default to it's property names. |\n| translations | Yes | `{ \"en-US\": import(\"./en-US\"), \"pt-PT\": import(\"./pt-PT\") }` | Dynamic imports mapping for translations . |\n\nHave access to settings and style context. Wrap your App with the `ConfigProvider`.\n\n```tsx\nconst translations = {\n  \"en-US\": import(\"./en-US\"),\n  \"pt-PT\": import(\"./pt-PT\"),\n  ...\n}\n\n...\n\n<ConfigProvider api={{ base: \"https://my-api.io\" }} translations={translations}>\n  <App />\n</ConfigProvider>\n\n...\n```\n\nUsing settings:\n\n```tsx\nimport { useConfig } from \"@apisuite/fe-base\";\n\nexport const MyComponent = () => {\n  const { portalName } = useConfig();\n\n  return (\n    <span>Welcome to {portalName}</span>\n  );\n};\n```\n\n## Internationalization\n\ni18n is provided using [react-i18next](https://react.i18next.com/). This package re-exports the necessary bits no need to install it.\n\n| method | description |\n|--------|-------------|\n| i18n | i18n instance |\n| changeLocale | Changes current locale and optionally registers new translations merging them deep. |\n| registerTranslations | Registers new translations merging them deep. |\n| Trans | Component to help interpolation with HTML elements. see [react-i18next docs](https://react.i18next.com/latest/trans-component). |\n| useTranslation | Hook to access translations. see [react-i18next docs](https://react.i18next.com/latest/usetranslation-hook). |\n\n```tsx\nimport React, { useEffect } from \"react\";\nimport { useConfig, useTranslation, registerTranslations, changeLocale } from \"@apisuite/fe-base\";\n\nexport const MyComponent = () => {\n  const { portalName } = useConfig();\n  const { t, i18n } = useTranslation();\n\n  useEffect(() => {\n    // add translations programmatically\n    registerTranslations(\"nl-BE\", await import(\"./nl-BE.json\"));\n\n    // change selected locale\n    changeLocale(\"nl-BE\");\n\n    console.log(\"Current Locale:\", i18n.language);\n  }, []);\n\n  return (\n    <span>{t(\"MyComponent.welcome\", { portalName })}</span>\n  );\n};\n```\n\n## Style System\n\nStyles and theme are provided using [MUI-UI](https://material-ui.com/). This package re-exports the `@material-ui/core` package no need to install it.\n\n**Note**: You still have to handle fonts in your project. It's not handle by this package to give more flexibility in this matter.\n\nMake styles:\n\n```ts\n// styles.ts\nimport { makeStyles } from \"@apisuite/fe-base\";\n\nexport default makeStyles((theme) => ({\n  container: {\n    backgroundColor: theme.palette.background.default,\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  },\n});\n```\n\nUse styles:\n\n```tsx\nimport { useTheme, Button } from \"@apisuite/fe-base\";\nimport useStyles from \"./styles\";\n\nexport const MyComponent = () => {\n  const classes = useStyles();\n  const { palette } = useTheme();\n\n  return (\n    <div className={classes.container}>\n      <span style={{ color: palette.primary.main }}>Hello</span>\n      <Button>Dummy</Button>\n    </div>\n  );\n};\n```\n\n## Tools\n\n### convert-translation\n\nA `convert-translation` script is provided to help convert `json` translation files into `csv` format and back.\n\nTo use it run it from the bin folder `./node_modules/.bin/convert-translation` with a file path as argument or add it to your scripts:\n\n```json\n...\n\"scripts\": {\n  ...\n  \"convert-translation\": \"./node_modules/.bin/convert-translation\"\n}\n...\n```\n\nThen in your terminal run:\n\n```bash\nnpm run convert-translation ./translations/en-US.json # npm run convert-translation ./en-US.csv\n```\n\n**JSON File**\n\nNormal `[key]: value` pairs object.\n\n**CSV File**\n\nThe CSV file follows google translation service requirements, which consists in two columns without a header, where the first is the `key` and the second is the `value`. You can add more columns to give more context to the translators, `convert-translation` will only handle this two columns.\n\n| | |\n|-|-|\n| MyComponent.welcome | welcome to {{portalName}}! |\n| MyComponent.registerCTA | register |\n| MyPage.hello | Hello World! |\n\n","readmeFilename":"README.md","_id":"@apisuite/fe-base@1.0.0-next.10","_nodeVersion":"17.0.1","_npmVersion":"7.9.0","dist":{"integrity":"sha512-tDKY9TCYQz4UR6w2ATseLjW+8J/oYAjlv4Fo+AEP5+9bLIFyETh5bQ/pkaC1MrhNBjKYyZMKCgMoQblIzqWlMA==","shasum":"602bbdbeb03303d78d0040bf0e2b6b43f19b9a6f","tarball":"https://registry.npmjs.org/@apisuite/fe-base/-/fe-base-1.0.0-next.10.tgz","fileCount":35,"unpackedSize":105020,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpQytcwayy1reqeZWmK7wWAxOo4buhedjy1yiVJqf3ZQIgaaPp4W6//flpANsxdxrGg2OyVpgSVOeWqsOd/F7XasY="}]},"_npmUser":{"name":"apisuite-admin","email":"dev@apisuite.io"},"directories":{},"maintainers":[{"name":"apisuite-admin","email":"dev@apisuite.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fe-base_1.0.0-next.10_1636749736154_0.5353766455526214"},"_hasShrinkwrap":false}},"time":{"created":"2021-04-15T10:54:25.047Z","1.0.0-next.1":"2021-04-15T10:54:25.483Z","modified":"2022-04-04T14:38:31.231Z","1.0.0-next.2":"2021-04-19T11:15:55.203Z","1.0.0-next.3":"2021-04-20T17:21:57.380Z","1.0.0-next.4":"2021-04-28T08:35:39.011Z","1.0.0-next.5":"2021-05-13T09:04:49.103Z","1.0.0-next.6":"2021-05-26T07:48:39.108Z","1.0.0-next.7":"2021-06-01T14:15:43.877Z","1.0.0-next.8":"2021-11-08T14:53:32.399Z","1.0.0-next.9":"2021-11-11T20:01:48.953Z","1.0.0-next.10":"2021-11-12T20:42:16.430Z"},"maintainers":[{"name":"apisuite-admin","email":"dev@apisuite.io"}],"description":"ApiSuite core base that exports a provider of server settings, style system and internationalization.","homepage":"https://github.com/APISuite/fe-base#readme","repository":{"type":"git","url":"git+https://github.com/APISuite/fe-base.git"},"author":{"name":"Bruno Morgado","email":"bruno@cloudoki.com"},"bugs":{"url":"https://github.com/APISuite/fe-base/issues"},"license":"MPL-2","readme":"","readmeFilename":""}