{"_id":"@balazs31/new-component","_rev":"5-c81ff977b8723dda2d68ecc5e193db74","name":"@balazs31/new-component","dist-tags":{"latest":"0.5.1"},"versions":{"0.4.3":{"name":"@balazs31/new-component","version":"0.4.3","scope":"balazs31","description":"CLI for creating new React components","main":"src/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["react","reactjs","cli","component"],"author":{"name":"Balazs Kendi"},"license":"MIT","bin":{"new-component":"src/index.js"},"dependencies":{"@material-ui/core":"^4.10.0","chalk":"2.1.0","clsx":"^1.1.0","commander":"2.11.0","i18next":"^19.0.3","i18next-browser-languagedetector":"^4.0.1","prettier":"^1.19.1","react-i18next":"^11.3.0"},"gitHead":"11ddf91509df3b613fb32b7e8c71433e2cc026b9","_id":"@balazs31/new-component@0.4.3","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-VtzuFlHSQoULL+x2TFLcqSm8yqT/RDMdRMqGZUeNgxJSP0IbfEJwTP4IhMQ2waPCkkW9GhSajZefaxhSln2qyg==","shasum":"c1802ba7bcac4141ab0c1ba605ccf0a01653958a","tarball":"https://registry.npmjs.org/@balazs31/new-component/-/new-component-0.4.3.tgz","fileCount":11,"unpackedSize":23821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9br9CRA9TVsSAnZWagAAHOsP/1VlyuDcd3QrLcKmK7LI\nzEWmBA3r2bhOLVoImOyTO7tGG2koX5dmOhUeYM6SuOEgbmdP+zL78SYU3Uwv\nLffsvaFUVFoTZgzrOetXcIr7vffwKpmWJ6OZj1byWny/39DEsb46A5kpnRkw\nf/t9hmTtNp19u4oAq+Q39BwI9sZh8ep2qT2o5F+EVssj2y1C2Y1zRYQIcW4r\nLFAkA9Uu+ysTQgEhebJOOWdZu4iVQgDQmac82Pz6hyhggKhVc+394CcDsJDH\n3Cuzzi7N1rlHdabfRfUOUOz686U9Z48OHzjDAJY5OkQNtX5Aq0Tinr6XERwJ\nH2WIEPdYKGHJB4sObMq6Rc5W1ccJxXjv8EjlcfdfYtOlDjgk86p2gJNaQ5rO\nP4pcbYX/SW5ElhaogjzHAcrgcRTpajQC9ytY6Ug054HAEl6awEdsD6FVo964\nXqWdGJ4mqPieBD7+rl6HbdOS2+63baP33hSvcoEaUz1F4ThKp9QHmlnTpWzI\nJfavZbRloDAZQ3RZr9iQt2c1kTXKCXRbg0jsSLPUvYFIVvX0PARbpm61KV9M\nMvgfETejNrDMww2gJY46f1JgZv05dyN8SQEaKeHX+UF7ZxdwiqUHsY8+MWPE\nEFpBlbEqKRhD2u7umYXIy9CIgDo/syc20h89D/3FsDDn/6AZ1GocltfmfbhF\nXZs/\r\n=usGB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYOwHHscpthMLLp2uL9HUmdbdvOnwvTfA6XoOt0/6FPAIgYfNKevDnmuSa6N2MG5nC+LdTLsyaXCaelSNQ0T6Dlqg="}]},"maintainers":[{"name":"balazs31","email":"kendi.balazs41@gmail.com"}],"_npmUser":{"name":"balazs31","email":"kendi.balazs41@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/new-component_0.4.3_1593162492728_0.4911142801808761"},"_hasShrinkwrap":false},"0.4.4":{"name":"@balazs31/new-component","version":"0.4.4","scope":"balazs31","description":"CLI for creating new React components","main":"src/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["react","reactjs","cli","component"],"author":{"name":"Balazs Kendi"},"license":"MIT","bin":{"new-component":"src/index.js"},"dependencies":{"@material-ui/core":"^4.10.0","chalk":"2.1.0","clsx":"^1.1.0","commander":"2.11.0","i18next":"^19.0.3","i18next-browser-languagedetector":"^4.0.1","prettier":"^1.19.1","react-i18next":"^11.3.0"},"gitHead":"11ddf91509df3b613fb32b7e8c71433e2cc026b9","_id":"@balazs31/new-component@0.4.4","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-hX8ETeRPSld6LPtbPUuG3WaWVayirjYa5OQB+Nsez1WDfk6X2QlEW+Wjqs+F+XGO0u9b+w17RyWJByStWkbafA==","shasum":"f1b56456d069581b74554a4f4f416a55b0d4a078","tarball":"https://registry.npmjs.org/@balazs31/new-component/-/new-component-0.4.4.tgz","fileCount":11,"unpackedSize":23829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9btvCRA9TVsSAnZWagAA070P/RRfZ4aVEqohASYjzgF+\nbvADXsaExwBDErwf4OoYfBfCQ/Hfo+BWnZcYkU/rDqsiIkRTIPeWMt2Tuan7\nQWCMxLcyUZXJ/T3QDiw8EM9A5OrFat7GnMaJl/XmYlLpH4Z9Marh39B4j6M8\noM65RgS6ZDWwLAx0rxaYWJjhc3EzoVqyELZAxBHim/rdiXn5F7Uq++Fharjn\njjv2m1a3oCnK0ewq8OwHGRXV1Yb4dA14lIqU1rEF7r04nM02JDLUyjdDfIOZ\nVJm7RhvMBmAr1FqKBBmb64eLEfFVvIeeBHKBh/Z8Xbcj4qYOo63mMzONRnGE\n01LReVEsyRfXICX9Q5f1y3tL+3pGFZllZrwDBpgrjMFfCbTK805m05HFPSEX\nLj9ekOBn+ut3nNT45bx0pN3VEowp3w1wZwVjkPLvcgn9zFmKOB7fz/dCgxDf\noB4tH8MbUKzAfv6dem8TDf2D3x9p4TBJjPMEeKIjzf5qNph6EzLxOd4dMYQR\n4yTT19Ng41ngcWwc+AQX6egWAREq245dffMq55ufCkwCJC56nmKySfzc4NI7\nkoNu5Snd6CpAMQPDeAskhRsifTJWrUtMpiLt561B73hVqv6Bxzylg6aClTV/\niNETyR4t7WHQ/GJqrHDWlO4kvnA3iCxcTd/jfBh+K2r2YHe/cJ63GPwVgTeB\nydSh\r\n=VxKR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKMs6gixfYz/0/X/DTWbrBPwkyDnfkq7IASDstqO1MpwIgBvdoycM0HxV+VO9OJVXcuBF2nFqYx5K6Qs1H7FOmC7o="}]},"maintainers":[{"name":"balazs31","email":"kendi.balazs41@gmail.com"}],"_npmUser":{"name":"balazs31","email":"kendi.balazs41@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/new-component_0.4.4_1593162606995_0.1484799135360908"},"_hasShrinkwrap":false},"0.4.5":{"name":"@balazs31/new-component","version":"0.4.5","scope":"balazs31","description":"CLI for creating new React components","main":"src/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["react","reactjs","cli","component"],"author":{"name":"Balazs Kendi"},"license":"MIT","bin":{"new-component":"src/index.js"},"dependencies":{"@material-ui/core":"^4.10.0","chalk":"2.1.0","clsx":"^1.1.0","commander":"2.11.0","i18next":"^19.0.3","i18next-browser-languagedetector":"^4.0.1","prettier":"^1.19.1","react-i18next":"^11.3.0"},"gitHead":"11ddf91509df3b613fb32b7e8c71433e2cc026b9","_id":"@balazs31/new-component@0.4.5","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-FkJ+P3gG6hGwixUDfpqEvSmZBSmw2Pcy17Y5tqY/rY+rbmuDbSj759LlsHF6rM8m072AZN02A+pj9+hc6lB3ZA==","shasum":"e0840233576e1a86ca8b4b3ac3fa8e91bf52c988","tarball":"https://registry.npmjs.org/@balazs31/new-component/-/new-component-0.4.5.tgz","fileCount":10,"unpackedSize":19503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGZUkCRA9TVsSAnZWagAAEUIQAIKbhoIcfR+YXTgsX3pX\nQM37UB9gwVFCZbYiRKy5kXvJtb3fkSbobopqoAIreo3Hi7AbrZoEHd2r5PSF\njSqFB2lj9sas4evZEj45XxmvfUfioZQW/h5IhltN6BHPkWWAu5jsr/QEvzBR\nIY6d9l9qEiSDJrWYKy9qU/6jzxrCy7YTFZ/rULIsxYkk2XO1LssLdeWNO+Rw\nd3wiDGkzEHpweuvtpGzyZfzvbDr8jFBDgknnlfN5ouowyK/f10fkvNxcHtfM\nJr/P8ym4XtA3DBIKgtJT+VOKS04Vwf+S/K7wHRY+2us+IC8LKBHpiNBwJQX2\noLhvvcEtm70UL7ayDFY2VqS3xsTO7ljnj7AmsHwcaM0Gbh0tQvAzAKslIK7l\ngLLEOxvm8vItoWpJ5I3z7J0aODeXyu6/0t86i1SF5ndFbDygAFJDSVDdSCfK\nGCZgLP1YEj5R3QgnzrXwvxj+X8LhjIcrIS4HUH8zynBs6vsJqz2TfJF/TnE2\n866sIejC7b0yDUpME+2Mja7LgxFovMVE5ITfpFXcgQ78a542xBDxjYoJKiVT\nU/MTDBnkI1Kph4wKhAK5OP3XtTmkbLNVZfFCZxB2REcWeZSTE0F5F4RUk7zq\nXLMYrAMWII+XSg5L3YSyn1YJxQgoMgFEBCNJmQTOD34nARurJwBjV3EXfTCI\nu7ZX\r\n=7yGU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCqBZz+ilxhHu78aMXdtrnf91Mr5k/aCLxaLsbFRcb2AIgW75IDYKxjeUp4JCd8sYBdkpIg23c6k5TR+M52ph4z8w="}]},"maintainers":[{"name":"balazs31","email":"kendi.balazs41@gmail.com"}],"_npmUser":{"name":"balazs31","email":"kendi.balazs41@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/new-component_0.4.5_1595512099744_0.2290555601042712"},"_hasShrinkwrap":false},"0.5.0":{"name":"@balazs31/new-component","version":"0.5.0","scope":"balazs31","description":"CLI for creating new React components","main":"src/index.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["react","reactjs","cli","component"],"author":{"name":"Balazs Kendi"},"license":"MIT","bin":{"new-component":"src/index.js"},"dependencies":{"@material-ui/core":"^4.10.0","chalk":"2.1.0","clsx":"^1.1.0","commander":"2.11.0","i18next":"^19.0.3","i18next-browser-languagedetector":"^4.0.1","prettier":"^1.19.1","react-i18next":"^11.3.0"},"gitHead":"bd7bd26d7ee0ac9d6c94705406871b38f83d2233","_id":"@balazs31/new-component@0.5.0","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-I92VmV/Q95A8sWQPM/mm2XtLiXhEszYj4qol6WRPklOyQqSLS1vCBwgmmNS3f2OQ4BXG9uCLn0Isj5YkEMZJBQ==","shasum":"e226ae76c84658e89fda45d717d74fa039b55cb6","tarball":"https://registry.npmjs.org/@balazs31/new-component/-/new-component-0.5.0.tgz","fileCount":9,"unpackedSize":19296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKn1dCRA9TVsSAnZWagAAaIcQAKLbvKh8/MYo7QNUzZKR\niPzhgdVH8Qk2y8h5SijG7dLmDwd8Hg6W6dWEY8GLBYIxPVoQtKseFPe1iHph\njpgKTOgn75PZvxit/kBTNhgQmDskGxZQ6gnPkH+bTBLlryuxoSbJ4HW6BBdS\nbpYeOuduBlgnVkD1wcczLzzGWz3dysbE9CIVM1N6HAkXJfK3nEYT7caw2BLc\nQDXcENO3wr2Xsy5l6sKioDrNzIhB77IGzR9eOdGOKUAqO3yYx6zuwED7QexJ\nDmlhUeqmYw1iBapo39TpotnScUQvZMCDryDjFpfuTUiA+FZo46rfn+m4AtB0\nd8GOq1kITDau0vbiNH+eJNdMKhzMUgTz1vAg+hXmygYf7eNtgzkxVT7ilwMG\n3Ibx1ETvV8Rh+Bud4UAVdsr1fd35EiUlF5aYB8tAqU8AXR91YD89IW+rY+OB\nMJDR1fyX2oPsXg6Xkr7HeCQEINhsigMJG+T//mc2TBKP5conOECW6jvALjyJ\nflbsOPfBIzgVzZHRI1TWZNiKg8QB2Y7auwEe7K9gg/UcF/ILEsnaBOFpAmAR\n4uJplPFXL3R1KK5GjPooZ7smYsgGuL3uZmdSYtubi5W3hCu+OjjUSOaoq79K\nKPwgsyphRHJtQqNIiXT46FSKoR1iFvvNVduzfGI18u8r5IWK0Y3jpeaEQDIN\n5iPk\r\n=1Xs3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPoWJFtxKt2KlH+X7h8pDcCuKo0VkS9DIEAK30jpgyjwIhAOUkj2wD8UmqmSsIL3B595KWOoTVqsimlANthb5TPUQ7"}]},"_npmUser":{"name":"balazs31","email":"kendi.balazs41@gmail.com"},"directories":{},"maintainers":[{"name":"balazs31","email":"kendi.balazs41@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/new-component_0.5.0_1613397341060_0.3682938117170378"},"_hasShrinkwrap":false},"0.5.1":{"name":"@balazs31/new-component","version":"0.5.1","scope":"balazs31","description":"CLI for creating new React components","main":"src/index.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["react","reactjs","cli","component"],"author":{"name":"Balazs Kendi"},"license":"MIT","bin":{"new-component":"src/index.js"},"dependencies":{"@material-ui/core":"^4.10.0","chalk":"2.1.0","clsx":"^1.1.0","commander":"2.11.0","i18next":"^19.0.3","i18next-browser-languagedetector":"^4.0.1","prettier":"^1.19.1","react-i18next":"^11.3.0"},"gitHead":"2e395a13d9593be11ae335ebd9ce09caeae05ec6","_id":"@balazs31/new-component@0.5.1","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-rfWsmCz8i2seTFMAB+07oDVFgi9ntIZG8Z7X8eCx/v9r0GJDdHogwaBnuzWL+YiBbEGtz0Jn/J2pgJP7qSMgZw==","shasum":"e4a68301804699026787fc91299e8b39881652f8","tarball":"https://registry.npmjs.org/@balazs31/new-component/-/new-component-0.5.1.tgz","fileCount":9,"unpackedSize":19357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL5NOCRA9TVsSAnZWagAAe28P/0WzxzHMqGXXy9PhsM88\n+bd7sVtMW9p3UFQVleLJmLZzuq2eFMxOluReg4fquqYuMBREMQHuIOdVoPjA\nEoMpJHTz4wlbTh1XcY1xrs/w6CGgaYRH6iKwNpocIwxHCtbn/00za2RrlwQE\nvpfG3xjYUf37NoO8XIxum+62My6hdeZefb97wQZXYzqxt6zD2VUkVTNyFaKB\nY5HWwlhseesQSbs9dpRMWC0XA1TcZkPsRSoJnfQDIChmEO+q4j4Z62UXvY8i\nSrt2/e6lkCw3UCJsFou/Elo37qwopfJKm1MjNoGXALAwdIQ2RYFQmhszi35a\n0yU8CrYnSYay/HeX19QvHhqe2CsWASvO3PReJqXMB/+jBFarYvox5Ew1qtCW\nPDaJUqIwqarxrajMFxdh58SZt6Y0Cf0P8YRz+fo8FSAIdE3KwwBfGFCkBWnd\ny7XkX1qk6nCVl3cHkV1dEgMoRcrUjYWxi/l+yNjsfAv38WJBAFY7lUSvRg+o\n2yrChswuVtcPDSRkBmO2voWJR4zulUR/04UTqRBSizcdJgJ0ltKYKM/0evmN\nhmu7ZCBpOsUhfYSpfynK2J1c5CwfeFzBaPkyc1uLvlmIYTzrvd70BcKjLNYM\nSUiaVEl17SBkXXJhJasVuIZtzmnuCOn8JyBHRuSEAwQ+t1LrMBbp72LcHtkY\n8YSl\r\n=pidT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCu9r1B/WkZccFr6NRXIUXJOJI/E9NWqJiwZ3PxHLItKAIgOO8VMCGNa7vxv8fmm3/Jlf3BjXs638Odv7pYfCRs3gE="}]},"_npmUser":{"name":"balazs31","email":"kendi.balazs41@gmail.com"},"directories":{},"maintainers":[{"name":"balazs31","email":"kendi.balazs41@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/new-component_0.5.1_1613730637789_0.34901658443509254"},"_hasShrinkwrap":false}},"time":{"created":"2020-06-26T09:08:12.679Z","0.4.3":"2020-06-26T09:08:12.866Z","modified":"2022-04-04T17:32:29.391Z","0.4.4":"2020-06-26T09:10:07.146Z","0.4.5":"2020-07-23T13:48:19.956Z","0.5.0":"2021-02-15T13:55:41.185Z","0.5.1":"2021-02-19T10:30:37.912Z"},"maintainers":[{"name":"balazs31","email":"kendi.balazs41@gmail.com"}],"description":"CLI for creating new React components","keywords":["react","reactjs","cli","component"],"author":{"name":"Balazs Kendi"},"license":"MIT","readme":"## Create a new React component\n\nForked from https://github.com/joshwcomeau/new-component.\nAdded Storybook and basic testing.\n\n### Usage\n\nInstall via NPM:\n\n#### Globally for all projects\n\n```bash\n# Using Yarn:\n$ yarn global add @balazs31/new-component\n\n# or, using NPM\n$ npm i -g @balazs31/new-component\n```\n\n#### Locally for a specific project\n\n```bash\n# Using Yarn:\n$ yarn add @balazs31/new-component\n\n# or, using NPM\n$ npm i @balazs31/new-component\n```\n\nThen run:\n\n```bash\n$ cd PROJECT_DIRECTORY\n$ new-component Button\n```\n\n### Packages included\n\n### `clsx` for better class names\n\nSee https://www.npmjs.com/package/clsx for details.\n\n### `i18next` for multi-language support\n\nWill support the following languages / locales:\n\n- Romanian (default): `ro-RO`\n- Hungarian: `hu-HU`\n- German: `de-DE`\n- English: `en-US`\n\nThe locales / short codes were chosen from [this list](https://stackoverflow.com/questions/3191664/list-of-all-locales-and-their-short-codes).\n\nSee https://github.com/i18next/react-i18next for details.\n\n#### Setup\n\nYou must have a `i18n.js` config file next to the `index.js` file in a CRA app.\n\n```js\nimport i18n from \"i18next\";\nimport { initReactI18next } from \"react-i18next\";\nimport LanguageDetector from \"i18next-browser-languagedetector\";\n\n/**\n * Sets up translations\n *\n * - Every component manages it's own translations via namespaces\n * - Every component adds it's own translation items to `resources`\n *\n * @see https://github.com/i18next/react-i18next/issues/299\n * @see https://react.i18next.com/latest/usetranslation-hook#loading-namespaces\n *\n */\nconst resources = {};\n\n/**\n * Sets up i18next\n *\n * @see https://react.i18next.com/latest/using-with-hooks\n */\ni18n\n  /**\n   * Detects user language\n   *\n   * @see https://github.com/i18next/i18next-browser-languageDetector\n   */\n  .use(LanguageDetector)\n  /**\n   * Passes the i18n instance to react-i18next.\n   */\n  .use(initReactI18next)\n  /**\n   * Inits i18next\n   *\n   * @see https://www.i18next.com/overview/configuration-options\n   */\n  .init({\n    resources,\n    lng: \"en-EN\",\n\n    keySeparator: false, // we do not use keys in form messages.welcome\n\n    interpolation: {\n      escapeValue: false, // react already safes from xss\n    },\n  });\n\nexport default i18n;\n```\n\nIn `index.js` you'll have to add this import statement:\n\n```js\nimport \"./i18n\"; // See https://react.i18next.com/latest/using-with-hooks\n```\n\n### What you'll get\n\nIn `src/components/Button`:\n\n```Javascript\n// `Button/Button.js`\n/**\n * Component short description\n *\n * @see Button.md for details\n */\n\n/**\n * Imports React and third party packages\n */\nimport React from \"react\";\nimport clsx from \"clsx\";\n\n/**\n * Imports project specific components and hooks\n */\n\n/**\n * Imports propTypes / component data requirements\n */\nimport { propTypes, defaultProps } from \"./Button.data\";\n\n/**\n * Imports Material UI components\n */\nimport { makeStyles } from \"@material-ui/core\";\nimport Grid from \"@material-ui/core/Grid\";\n\n/**\n * Imports translations\n */\nimport i18n from \"../../i18n\";\nimport { useTranslation } from \"react-i18next\";\nimport { ro_ro } from \"./Button.lang.ro-ro\";\nimport { hu_hu } from \"./Button.lang.hu-hu\";\nimport { en_us } from \"./Button.lang.en-us\";\nimport { de_de } from \"./Button.lang.de-de\";\n\ni18n.addResourceBundle(\"ro-RO\", \"Button\", ro_ro);\ni18n.addResourceBundle(\"hu-HU\", \"Button\", hu_hu);\ni18n.addResourceBundle(\"en-US\", \"Button\", en_us);\ni18n.addResourceBundle(\"de-DE\", \"Button\", de_de);\n\n/**\n * Styles the component\n */\nconst useStyles = makeStyles(theme => ({\n  container: {\n    padding: theme.spacing(1),\n    margin: theme.spacing(1),\n    border: \"1px solid\"\n  }\n}));\n\n/**\n * Displays the component\n */\nconst Button = props => {\n  const { container } = useStyles(props);\n  const { t } = useTranslation(\"Button\");\n\n  return (\n    <Grid container>\n      <Grid item xs={12} className={clsx(container, \"Button\")}>\n        {t(\"Button\")}\n      </Grid>\n    </Grid>\n  );\n};\n\nButton.propTypes = propTypes;\nButton.defaultProps = defaultProps;\n\nexport default Button;\nexport { propTypes as ButtonPropTypes, defaultProps as ButtonDefaultProps };\n```\n\n```Javascript\n// `Button/Button.data.js`\n/**\n * Defines the data requirements for the company\n */\nimport PropTypes from \"prop-types\";\n\n/**\n * Defines the prop types\n */\nconst propTypes = {};\n\n/**\n * Defines the default props\n */\nconst defaultProps = {};\n\nexport { propTypes, defaultProps };\n```\n\n```Javascript\n// `Button/Button.native.js`\n/**\n * React Native specific code\n *\n * @see https://reactnative.dev/docs/platform-specific-code#platform-specific-extensions\n */\n```\n\n```Markdown\n// `Button/Button.md`\n## Button\n```\n\n```Javascript\n// `Button/Button.test.js`\nimport React from \"react\";\nimport { render } from \"@testing-library/react\";\nimport Button from \"./Button\";\n\nit(\"has a Button component\", () => {\n  const { getByText } = render(<Button />);\n  expect(getByText(\"Button\")).toBeInTheDocument();\n});\n```\n\n```Javascript\n// `Button/index.js`\nexport { default, ButtonPropTypes, ButtonDefaultProps } from \"./Button\";\n```\n\n```Javascript\n// `Button/Button.lang.en-us.js`\nconst en_us = {\n  Button: \"Button\"\n};\n\nexport { en_us };\n```\n\n```Javascript\n// `Button/Button.lang.de-de.js`\nconst de_de = {\n  Button: \"Button (de_de)\"\n};\n\nexport { de_de };\n```\n\n```Javascript\n// `Button/Button.lang.ro-ro.js`\nconst ro_ro = {\n  Button: \"Button (ro_ro)\"\n};\n\nexport { ro_ro };\n```\n\n```Javascript\n// `Button/Button.lang.hu-hu.js`\nconst hu_hu = {\n  Button: \"Button (hu_hu)\"\n};\n\nexport { hu_hu };\n```\n\n### Modify & test locally\n\nYou can easily fork this repo, modify, test, and publish on npm.\n\nNOTE: Always start with changing the version number in `package.json` !!\n\n#### Test locally\n\nIn this current repo:\n\n```shell\nnpm pack\n```\n\nThis will create a file like `new-component@0.0.1.tgz`.\n\nIn another folder:\n\n```bash\nnpx create-react-app new-component-test\ncd new-component-test\nmkdir src/components\nyarn add <path_to_new_component_repo>/metamn-new-component@0.0.1.tgz\n./node_modules/.bin/new-component Button\n# create the i18n.j file\n# import and render <Button> in App.js\nyarn start # run server and check the result\n```\n\n#### Update the changelog\n\nNOTE: Always update the changelog\n\n#### Publish\n\nFirst push changes to Github. Then:\n\n```bash\nnpm publish\n```\n\n## Changelog\n\nAll notable changes to this project will be documented in this file.\n\nThe format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),\nand this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).\n\n### [0.4.3] - 2020-05-27\n\n#### Changed\n\n- The copy on some comments\n- `import i18n from \"../../../i18n\";` - that 3 levels of nesting (changed from two) means in this project new components will mostly be added under a page subfolder. Ex: `src/components/pagename/Component`\n\n### [0.4.2] - 2020-05-25\n\n#### Added\n\n- `clsx`, for better class names\n- Material UI, as the default Design System\n\n#### Removed\n\n- `styled-components`, replaced with Material UI\n- Storybook, never used in the previous few projects\n\n### [0.3.0] - 2020-01-14\n\n#### Added\n\n- `styled-components`, re-added, because when a new component is added it's first purpose is to mockup. Also every new component has a border and padding added to serve mockuping.\n- `react-i18next` with `addResourceBundle` loading translations from language files co-located to the component\n\n### [0.2.0] - 2019-11-6\n\n#### Added\n\n- Default tests\n\n#### Changed\n\n- Storybook stories to follow the Component Story Format: https://storybook.js.org/docs/formats/component-story-format/\n\n#### Removed\n\n- `styled-components`, because many times components use another library, like `material-ui`\n\n### [0.1.2] - 2018-08-17\n\n#### Fixed\n\n- Exporting default props\n\n### [0.1.1] - 2018-08-17\n\n#### Changed\n\n- How default props are exported\n\n### [0.1.0] - 2018-07-03\n\n#### Added\n\n- New templates for function components\n\n### [0.0.4] - 2018-12-11\n\n#### Fixed\n\n- Markdown is not run through `prettify()`.\n\n### [0.0.3] - 2018-12-11\n\n#### Added\n\n- Markdown documentation support.\n\n### [0.0.2] - 2018-12-11\n\n#### Added\n\n- A CHANGELOG section in README.\n\n#### Changed\n\n- The install instructions in README.\n\n### 0.0.1 - 2018-12-11\n\n#### Added\n\n- Initial release\n","readmeFilename":"README.md"}