diff --git a/.storybook/i18n.js b/.storybook/i18n.js index d7c5533..51de9d4 100644 --- a/.storybook/i18n.js +++ b/.storybook/i18n.js @@ -1,42 +1,47 @@ import { initReactI18next } from 'react-i18next' -import i18n from 'i18next'; - -import Backend from 'i18next-xhr-backend'; -import LanguageDetector from 'i18next-browser-languagedetector'; +import i18n from 'i18next' +// import Backend from 'i18next-xhr-backend' +import LanguageDetector from 'i18next-browser-languagedetector' +const ns = ['common'] +const supportedLngs = ['en', 'de'] /** - * Example - * - @see https://github.com/i18next/react-i18next/blob/7cfab9746b3ccc6f833cd9c892e7c3c804944a5e/example/react-typescript4.1/namespaces/src/i18n/config.ts#L13 + * Inspired by and uses: + * - @see https://github.com/stevensacks/storybook-react-i18next + * + * Other Examples: + * - @see https://github.com/i18next/react-i18next/blob/c383abdb8d0f874a64bea3147a3dd3b9e1853f5e/example/storybook/src/i18n.js#L6-L24 */ i18n -.use(Backend) -.use(LanguageDetector) -.use(initReactI18next) -.init({ - lng: 'en', - fallbackLng: 'en', - // have a common namespace used around the full app - ns: ['common'], - defaultNS: 'common', - debug: true, - interpolation: { - escapeValue: false, // not needed for react!! - }, - // resources: { - // en: { - // 'common': { - // "home": "Home GERMAN", - // "home_EN": "Home English" - // } - // }, - // de: { - // 'common': { - // "home": "Home DEUTSCH", - // "home_EN": "Home ENGLISCH" - // } - // } - // }, + // load translation using http -> see /public/locales + // learn more: https://github.com/i18next/i18next-http-backend + // .use(Backend) + // detect user language + // learn more: https://github.com/i18next/i18next-browser-languageDetector + .use(LanguageDetector) + // pass the i18n instance to react-i18next. + .use(initReactI18next) + // init i18next + // for all options read: https://www.i18next.com/overview/configuration-options + .init({ + lng: supportedLngs[0], + fallbackLng: supportedLngs[0], + // have a common namespace used around the full app + ns, + defaultNS: ns[0], + debug: true, + interpolation: { + escapeValue: false, // not needed for react!! + }, + supportedLngs, + whitelist: supportedLngs, + }) + +supportedLngs.forEach(lang => { + ns.forEach(n => { + i18n.addResources(lang, n, require(`../public/locales/${lang}/${n}.json`)) + }) }) -export default i18n \ No newline at end of file +export default i18n diff --git a/.storybook/main.js b/.storybook/main.js index 3ad3336..3db468a 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -14,7 +14,6 @@ module.exports = { '@storybook/addon-links', '@storybook/addon-essentials', 'storybook-addon-next-router', - 'storybook-addon-i18next/register', { /** * NOTE: fix Storybook issue with PostCSS@8 @@ -27,6 +26,7 @@ module.exports = { }, }, }, + 'storybook-react-i18next', ], webpackFinal: config => { /** @@ -52,16 +52,16 @@ module.exports = { * @see https://github.com/isaachinman/next-i18next/issues/1012#issuecomment-792697008 * @see https://github.com/storybookjs/storybook/issues/4082#issuecomment-758272734 * @see https://webpack.js.org/migrate/5/ - * + * * source: https://github.com/isaachinman/next-i18next/issues/1012#issuecomment-818042184 */ config.resolve.fallback = { ...config.resolve?.fallback, fs: false, - // tls: false, - // net: false, - // module: false, - // path: require.resolve('path-browserify'), + tls: false, + net: false, + module: false, + path: require.resolve('path-browserify'), } return config diff --git a/.storybook/preview.js b/.storybook/preview.js index 5906c32..4dc7af2 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,7 +1,5 @@ -import React, { Suspense } from 'react'; -import { RouterContext } from "next/dist/next-server/lib/router-context"; -// import { I18nextProvider } from 'react-i18next'; -import { withI18next } from 'storybook-addon-i18next'; +import { Suspense } from 'react' +import { RouterContext } from 'next/dist/next-server/lib/router-context' import '../src/styles/index.scss' @@ -22,11 +20,20 @@ export const parameters = { asPath: '/', // defaults to `/` query: {}, // defaults to `{}` push() {}, // defaults to using addon actions integration, can override any method in the router - } + }, + // @see https://github.com/stevensacks/storybook-react-i18next + i18n, + locale: 'en', + locales: { + en: 'English', + de: 'Deutsch', + }, } export const decorators = [ - // Story => , - withI18next({ i18n, languages: { en: 'English', de: 'Deutsch' }}), - Story => + Story => ( + loading...}> + + + ), ] diff --git a/package.json b/package.json index 790dea3..fbe43a4 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "lint:css": "stylelint --cache './**/*.{ts,tsx,scss}'", "prepare": "node scripts/setup && is-ci || husky install", "start": "next start", - "storybook": "start-storybook -p 6006 -s ./public", + "storybook": "start-storybook -p 6006 -s public", "test": "jest", "test:cypress": "start-server-and-test dev 3000 cypress:open", "test:cypress:ci": "yarn build && start-server-and-test start 3000 cypress:run" @@ -31,7 +31,6 @@ "date-fns": "^2.23.0", "i18next": "^20.3.5", "i18next-browser-languagedetector": "^6.1.2", - "i18next-xhr-backend": "^3.2.2", "next": "^11.0.1", "next-compose-plugins": "^2.2.1", "next-i18next": "^8.5.5", @@ -41,7 +40,7 @@ "react-i18next": "^11.11.4" }, "devDependencies": { - "@babel/core": "^7.14.8", + "@babel/core": "^7.15.0", "@commitlint/cli": "^13.1.0", "@commitlint/config-conventional": "^13.1.0", "@natterstefan/scripts": "^1.2.0", @@ -69,7 +68,7 @@ "autoprefixer": "^10.3.1", "babel-loader": "^8.2.2", "css-loader": "^6.2.0", - "cypress": "^8.1.0", + "cypress": "^8.2.0", "enzyme": "^3.11.0", "eslint": "^7.25.0", "eslint-config-airbnb": "^18.2.1", @@ -93,12 +92,13 @@ "postcss-loader": "^6.1.1", "postcss-preset-env": "^6.7.0", "prettier": "^2.2.1", - "sass": "^1.37.2", + "sass": "^1.37.5", "sass-loader": "^12.1.0", "semantic-release": "^17.4.4", "start-server-and-test": "^1.13.1", "storybook-addon-i18next": "^1.3.0", "storybook-addon-next-router": "^3.0.5", + "storybook-react-i18next": "^1.0.6", "style-loader": "^3.2.1", "stylelint": "^13.13.1", "stylelint-config-recommended": "^5.0.0", diff --git a/src/__stories__/pages-index.stories.tsx b/src/__stories__/pages-index.stories.tsx new file mode 100644 index 0000000..7d2c20a --- /dev/null +++ b/src/__stories__/pages-index.stories.tsx @@ -0,0 +1,14 @@ +import React from 'react' +import { Story, Meta } from '@storybook/react' + +import IndexPage from '@/pages/index' + +export default { + title: 'Pages', + component: IndexPage, +} as Meta + +const Template: Story = args => + +export const Home: Story = Template.bind({}) +Home.args = {} diff --git a/yarn.lock b/yarn.lock index dcbfc68..8484876 100644 --- a/yarn.lock +++ b/yarn.lock @@ -45,6 +45,11 @@ resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.14.9.tgz#ac7996ceaafcf8f410119c8af0d1db4cf914a210" integrity sha512-p3QjZmMGHDGdpcwEYYWu7i7oJShJvtgMjJeb0W95PPhSm++3lm8YXYOh45Y6iCN9PkZLTZ7CIX5nFrp7pw7TXw== +"@babel/compat-data@^7.15.0": + version "7.15.0" + resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.15.0.tgz#2dbaf8b85334796cafbb0f5793a90a2fc010b176" + integrity sha512-0NqAC1IJE0S0+lL1SWFMxMkz1pKCNCjI4tr2Zx4LJSXxCLAdr6KyArnY+sno5m3yH9g737ygOyPABDsnXkpxiA== + "@babel/core@7.12.9", "@babel/core@^7.1.0", "@babel/core@^7.7.5": version "7.12.9" resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.9.tgz#fd450c4ec10cdbb980e2928b7aa7a28484593fc8" @@ -109,6 +114,27 @@ semver "^6.3.0" source-map "^0.5.0" +"@babel/core@^7.15.0": + version "7.15.0" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.15.0.tgz#749e57c68778b73ad8082775561f67f5196aafa8" + integrity sha512-tXtmTminrze5HEUPn/a0JtOzzfp0nk+UEXQ/tqIJo3WDGypl/2OFQEMll/zSFU8f/lfmfLXvTaORHF3cfXIQMw== + dependencies: + "@babel/code-frame" "^7.14.5" + "@babel/generator" "^7.15.0" + "@babel/helper-compilation-targets" "^7.15.0" + "@babel/helper-module-transforms" "^7.15.0" + "@babel/helpers" "^7.14.8" + "@babel/parser" "^7.15.0" + "@babel/template" "^7.14.5" + "@babel/traverse" "^7.15.0" + "@babel/types" "^7.15.0" + convert-source-map "^1.7.0" + debug "^4.1.0" + gensync "^1.0.0-beta.2" + json5 "^2.1.2" + semver "^6.3.0" + source-map "^0.5.0" + "@babel/generator@^7.12.11", "@babel/generator@^7.13.9": version "7.13.9" resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.13.9.tgz#3a7aa96f9efb8e2be42d38d80e2ceb4c64d8de39" @@ -136,6 +162,15 @@ jsesc "^2.5.1" source-map "^0.5.0" +"@babel/generator@^7.15.0": + version "7.15.0" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.15.0.tgz#a7d0c172e0d814974bad5aa77ace543b97917f15" + integrity sha512-eKl4XdMrbpYvuB505KTta4AV9g+wWzmVBW69tX0H2NwKVKd2YJbKgyK6M8j/rgLbmHOYJn6rUklV677nOyJrEQ== + dependencies: + "@babel/types" "^7.15.0" + jsesc "^2.5.1" + source-map "^0.5.0" + "@babel/helper-annotate-as-pure@^7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.4.tgz#5bf0d495a3f757ac3bda48b5bf3b3ba309c72ba3" @@ -193,6 +228,16 @@ browserslist "^4.16.6" semver "^6.3.0" +"@babel/helper-compilation-targets@^7.15.0": + version "7.15.0" + resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.15.0.tgz#973df8cbd025515f3ff25db0c05efc704fa79818" + integrity sha512-h+/9t0ncd4jfZ8wsdAsoIxSa61qhBYlycXiHWqJaQBCXAhDCMbPRSMTGnZIkkmt1u4ag+UQmuqcILwqKzZ4N2A== + dependencies: + "@babel/compat-data" "^7.15.0" + "@babel/helper-validator-option" "^7.14.5" + browserslist "^4.16.6" + semver "^6.3.0" + "@babel/helper-create-class-features-plugin@^7.12.1": version "7.12.1" resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.12.1.tgz#3c45998f431edd4a9214c5f1d3ad1448a6137f6e" @@ -386,6 +431,13 @@ dependencies: "@babel/types" "^7.14.5" +"@babel/helper-member-expression-to-functions@^7.15.0": + version "7.15.0" + resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.15.0.tgz#0ddaf5299c8179f27f37327936553e9bba60990b" + integrity sha512-Jq8H8U2kYiafuj2xMTPQwkTBnEEdGKpT35lJEQsRRjnG0LW3neucsaMWLgKcwu3OHKNeYugfw+Z20BXBSEs2Lg== + dependencies: + "@babel/types" "^7.15.0" + "@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.13.12": version "7.13.12" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.13.12.tgz#c6a369a6f3621cb25da014078684da9196b61977" @@ -450,6 +502,20 @@ "@babel/traverse" "^7.14.8" "@babel/types" "^7.14.8" +"@babel/helper-module-transforms@^7.15.0": + version "7.15.0" + resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.15.0.tgz#679275581ea056373eddbe360e1419ef23783b08" + integrity sha512-RkGiW5Rer7fpXv9m1B3iHIFDZdItnO2/BLfWVW/9q7+KqQSDY5kUfQEbzdXM1MVhJGcugKV7kRrNVzNxmk7NBg== + dependencies: + "@babel/helper-module-imports" "^7.14.5" + "@babel/helper-replace-supers" "^7.15.0" + "@babel/helper-simple-access" "^7.14.8" + "@babel/helper-split-export-declaration" "^7.14.5" + "@babel/helper-validator-identifier" "^7.14.9" + "@babel/template" "^7.14.5" + "@babel/traverse" "^7.15.0" + "@babel/types" "^7.15.0" + "@babel/helper-optimise-call-expression@^7.10.4": version "7.12.7" resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.7.tgz#7f94ae5e08721a49467346aa04fd22f750033b9c" @@ -534,6 +600,16 @@ "@babel/traverse" "^7.14.5" "@babel/types" "^7.14.5" +"@babel/helper-replace-supers@^7.15.0": + version "7.15.0" + resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.15.0.tgz#ace07708f5bf746bf2e6ba99572cce79b5d4e7f4" + integrity sha512-6O+eWrhx+HEra/uJnifCwhwMd6Bp5+ZfZeJwbqUTuqkhIT6YcRhiZCOOFChRypOIe0cV46kFrRBlm+t5vHCEaA== + dependencies: + "@babel/helper-member-expression-to-functions" "^7.15.0" + "@babel/helper-optimise-call-expression" "^7.14.5" + "@babel/traverse" "^7.15.0" + "@babel/types" "^7.15.0" + "@babel/helper-simple-access@^7.12.1": version "7.12.1" resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.12.1.tgz#32427e5aa61547d38eb1e6eaf5fd1426fdad9136" @@ -709,6 +785,11 @@ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.8.tgz#66fd41666b2d7b840bd5ace7f7416d5ac60208d4" integrity sha512-syoCQFOoo/fzkWDeM0dLEZi5xqurb5vuyzwIMNZRNun+N/9A4cUZeQaE7dTrB8jGaKuJRBtEOajtnmw0I5hvvA== +"@babel/parser@^7.15.0": + version "7.15.0" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.0.tgz#b6d6e29058ca369127b0eeca2a1c4b5794f1b6b9" + integrity sha512-0v7oNOjr6YT9Z2RAOTv4T9aP+ubfx4Q/OhVtAet7PFDt0t9Oy6Jn+/rfC6b8HJ5zEqrQCiMxJfgtHpmIminmJQ== + "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.13.12": version "7.13.12" resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.13.12.tgz#a3484d84d0b549f3fc916b99ee4783f26fabad2a" @@ -2207,6 +2288,21 @@ debug "^4.1.0" globals "^11.1.0" +"@babel/traverse@^7.15.0": + version "7.15.0" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.15.0.tgz#4cca838fd1b2a03283c1f38e141f639d60b3fc98" + integrity sha512-392d8BN0C9eVxVWd8H6x9WfipgVH5IaIoLp23334Sc1vbKKWINnvwRpb4us0xtPaCumlwbTtIYNA0Dv/32sVFw== + dependencies: + "@babel/code-frame" "^7.14.5" + "@babel/generator" "^7.15.0" + "@babel/helper-function-name" "^7.14.5" + "@babel/helper-hoist-variables" "^7.14.5" + "@babel/helper-split-export-declaration" "^7.14.5" + "@babel/parser" "^7.15.0" + "@babel/types" "^7.15.0" + debug "^4.1.0" + globals "^11.1.0" + "@babel/types@7.8.3": version "7.8.3" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.8.3.tgz#5a383dffa5416db1b73dedffd311ffd0788fb31c" @@ -2250,6 +2346,14 @@ "@babel/helper-validator-identifier" "^7.14.9" to-fast-properties "^2.0.0" +"@babel/types@^7.15.0": + version "7.15.0" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.0.tgz#61af11f2286c4e9c69ca8deb5f4375a73c72dcbd" + integrity sha512-OBvfqnllOIdX4ojTHpwZbpvz4j3EWyjkZEdmjH0/cgsd6QOdSgU8rLSk6ard/pcW7rlmjdVSX/AWOaORR1uNOQ== + dependencies: + "@babel/helper-validator-identifier" "^7.14.9" + to-fast-properties "^2.0.0" + "@base2/pretty-print-object@1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.0.tgz#860ce718b0b73f4009e153541faff2cb6b85d047" @@ -7919,10 +8023,10 @@ cyclist@^1.0.1: resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9" integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk= -cypress@^8.1.0: - version "8.1.0" - resolved "https://registry.yarnpkg.com/cypress/-/cypress-8.1.0.tgz#9aaed7fb2a4d1876528b72d437f97bc824db0735" - integrity sha512-GXjlqPjY/6HPbQwAp3AvlA1Mk/NoJTAmqVSUhQsuM/1xDpd/FQHkxVuq5h6O6RrAoCXSgpZPXFsVtdqE+FwEJw== +cypress@^8.2.0: + version "8.2.0" + resolved "https://registry.yarnpkg.com/cypress/-/cypress-8.2.0.tgz#1e4e9f6218324e82a95c1b9cad7f3965ba663d7f" + integrity sha512-jg7S5VxxslwsgEyAkCE9ZCkFADxOUY1bSWScp1cWnga88K0TZgFQ0zdxyG9Mw/4spLGuvkriIZ62am+TR6C04w== dependencies: "@cypress/request" "^2.88.5" "@cypress/xvfb" "^1.2.4" @@ -10711,13 +10815,6 @@ i18next-fs-backend@^1.0.7: resolved "https://registry.yarnpkg.com/i18next-fs-backend/-/i18next-fs-backend-1.1.1.tgz#1d8028926803f63784ffa0f2b1478fb369f92735" integrity sha512-RFkfy10hNxJqc7MVAp5iAZq0Tum6msBCNebEe3OelOBvrROvzHUPaR8Qe10RQrOGokTm0W4vJGEJzruFkEt+hQ== -i18next-xhr-backend@^3.2.2: - version "3.2.2" - resolved "https://registry.yarnpkg.com/i18next-xhr-backend/-/i18next-xhr-backend-3.2.2.tgz#769124441461b085291f539d91864e3691199178" - integrity sha512-OtRf2Vo3IqAxsttQbpjYnmMML12IMB5e0fc5B7qKJFLScitYaXa1OhMX0n0X/3vrfFlpHL9Ro/H+ps4Ej2j7QQ== - dependencies: - "@babel/runtime" "^7.5.5" - i18next@^19.7.0: version "19.9.2" resolved "https://registry.yarnpkg.com/i18next/-/i18next-19.9.2.tgz#ea5a124416e3c5ab85fddca2c8e3c3669a8da397" @@ -16586,10 +16683,10 @@ sass-loader@^12.1.0: klona "^2.0.4" neo-async "^2.6.2" -sass@^1.37.2: - version "1.37.2" - resolved "https://registry.yarnpkg.com/sass/-/sass-1.37.2.tgz#eb87c01a1e6ec12e50fa69571b69628ea043a372" - integrity sha512-+XMg8QOg7OGLo4F5R3fLYEti/3MxFkyX0NxYbqWycU8xYMAhPDN5FuCO2ZJudnM1wcnZ3CeJRnpqUBZpLOitCQ== +sass@^1.37.5: + version "1.37.5" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.37.5.tgz#f6838351f7cc814c4fcfe1d9a20e0cabbd1e7b3c" + integrity sha512-Cx3ewxz9QB/ErnVIiWg2cH0kiYZ0FPvheDTVC6BsiEGBTZKKZJ1Gq5Kq6jy3PKtL6+EJ8NIoaBW/RSd2R6cZOA== dependencies: chokidar ">=3.0.0 <4.0.0" @@ -17264,6 +17361,18 @@ storybook-addon-outline@^1.4.1: "@storybook/core-events" "^6.3.0" ts-dedent "^2.1.1" +storybook-i18n@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/storybook-i18n/-/storybook-i18n-1.0.2.tgz#e1c80f36ec8d74ed61e52a80bde6d1622efe8b42" + integrity sha512-Dq+HSgfzyipFjiWwAOnou4xqCJWngDMg/AD61Zf/v2Ua11N4iS1NMT1KMTtOvzK7T6FRFxPJty6Hg6FcxkW1+A== + +storybook-react-i18next@^1.0.6: + version "1.0.6" + resolved "https://registry.yarnpkg.com/storybook-react-i18next/-/storybook-react-i18next-1.0.6.tgz#4de26cc7a6c0ef2930c3fee643240fece7977163" + integrity sha512-PCv5m71gSUGZkCplDeAx3KulYmOROG/8Vl1cHKhF3Ym4bY/VbwJWNLJ9KvH0sJIzWAlcEEXm9H6JmPPPocOG2w== + dependencies: + storybook-i18n "^1.0.2" + stream-browserify@3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-3.0.0.tgz#22b0a2850cdf6503e73085da1fc7b7d0c2122f2f"