Merge remote-tracking branch 'origin/develop' into release-1.13.0

.editorconfig

@@ -11,9 +11,5 @@ insert_final_newline = true
 [*.{js,coffee,html,less,css,scss,json}]
 indent_style = tab
 
-[*.i18n.json]
-indent_style = space
-indent_size = 2
-
 [*.md]
 trim_trailing_whitespace = false

.eslintignore

@@ -1,3 +1,4 @@
 /build/*
-/src/i18n/index.js
 !/.storybook
+
+src/i18next.js

.eslintrc

@@ -47,13 +47,23 @@
 		"react/require-render-return": "error",
 		"react/self-closing-comp": "error",
 		"react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn"
+    	"react-hooks/exhaustive-deps": "warn",
+		"no-sequences": "off"
 	},
 	"settings": {
-    "react": {
-			"pragma": "h",
-			"pragmaFrag": "Fragment",
-			"version": "detect"
-    }
+		"import/resolver": {
+			"node": {
+			  "extensions": [
+				".js",
+				".ts",
+				".tsx"
+			  ]
+			}
+		  },
+		"react": {
+				"pragma": "h",
+				"pragmaFrag": "Fragment",
+				"version": "detect"
+		}
 	}
 }

.github/pr-title-checker-config.json

@@ -0,0 +1,10 @@
+{
+	"LABEL": {
+	  "name": "Invalid PR Title",
+	  "color": "B60205"
+	},
+	"CHECKS": {
+	  "regexp": "^(?:(?:\\[(NEW|BREAK|IMPROVE|FIX)\\](\\[(ENTERPRISE|APPS)\\])?|(?:Regression|Chore|Bump):) .+|Release [0-9]+\\.[0-9]+\\.[0-9]+)",
+	  "ignoreLabels" : ["[ignore-title]"]
+	}
+}

.github/workflows/cd.yml

@@ -65,7 +65,9 @@ jobs:
       - run: yarn publish
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}
-      - run: yarn release
+      - run: yarn release -y
+        env:
+          GH_RELEASE_GITHUB_API_TOKEN: ${{ secrets.GH_TOKEN }}
 
   publish-to-gh-pages:
     name: Publish to GitHub Pages

.github/workflows/pr-title-checker.yml

@@ -0,0 +1,12 @@
+name: "PR Title Checker"
+on:
+  pull_request:
+    types: [opened, edited]
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: thehanimo/pr-title-checker@v1.2
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.storybook/webpack.config.js

@@ -6,9 +6,6 @@ module.exports = ({ config }) => {
 		[require.resolve('../src/lib/uiKit')]: require.resolve('./mocks/uiKit'),
 	};
 
-	const babelRule = config.module.rules.find((rule) => Array.isArray(rule.use) && rule.use.find(({ loader }) => loader === 'babel-loader'));
-	babelRule.use.push({ loader: 'preact-i18nline/webpack-loader' });
-
 	config.module.rules = config.module.rules.filter(({ loader }) => !/json-loader/.test(loader));
 
 	const fileLoader = config.module.rules.find(({ loader }) => /file-loader/.test(loader));

README.md

@@ -78,10 +78,6 @@ yarn test
 # run the storybook
 yarn storybook
 
-# before commit run
-yarn i18n
-```
-
 ## Screens:
 ![image](https://user-images.githubusercontent.com/5263975/44279585-497b2980-a228-11e8-81a2-36bc3389549e.png)
 ![image](https://user-images.githubusercontent.com/5263975/44279599-5730af00-a228-11e8-8873-553ef53ee25a.png)

package.json

@@ -21,7 +21,6 @@
 		"eslint": "eslint src",
 		"stylelint": "stylelint 'src/**/*.scss'",
 		"storybook": "start-storybook -p 9001 -c .storybook",
-		"i18n": "i18nline synch && node_modules/.bin/eslint --fix src/i18n/index.js",
 		"deploy-storybook": "storybook-to-ghpages",
 		"release": "gh-release -c master --assets build.tar.gz",
 		"loki:test": "loki test --chromeDockerImage=chinello/alpine-chrome:latest --chromeFlags=\"--headless --no-sandbox --disable-gpu --disable-features=VizDisplayCompositor\" --verboseRenderer --requireReference --reactUri file:./storybook-static",
@@ -62,7 +61,6 @@
 		"loki": "^0.24.0",
 		"lorem-ipsum": "^2.0.3",
 		"mini-css-extract-plugin": "^0.11.0",
-		"node-sass": "^4.14.1",
 		"npm-run-all": "^4.1.5",
 		"postcss-css-variables": "^0.17.0",
 		"postcss-dir-pseudo-class": "^5.0.0",
@@ -72,12 +70,15 @@
 		"postcss-logical": "^4.0.2",
 		"postcss-selector-not": "^4.0.0",
 		"rimraf": "^3.0.2",
+		"sass": "^1.49.10",
 		"sass-loader": "^9.0.2",
 		"serve": "^11.3.2",
 		"style-loader": "^1.2.1",
 		"stylelint": "^13.6.1",
 		"stylelint-order": "^4.1.0",
 		"svg-loader": "^0.0.2",
+		"ts-loader": "^8.3.0",
+		"typescript": "^4.6.3",
 		"url-loader": "^4.1.0",
 		"webpack": "^4.44.1",
 		"webpack-cli": "^3.3.12",
@@ -93,14 +94,14 @@
 		"desvg": "^1.0.2",
 		"emoji-mart": "^3.0.0",
 		"history": "^5.0.0",
-		"i18nline": "^2.0.1",
+		"i18next": "^21.3.3",
 		"markdown-it": "^11.0.0",
 		"mem": "^6.1.0",
 		"mitt": "^2.1.0",
 		"preact": "^10.4.6",
-		"preact-i18nline": "^2.0.0",
 		"preact-router": "^3.2.1",
 		"query-string": "^6.13.1",
+		"react-i18next": "^11.13.0",
 		"whatwg-fetch": "^3.4.0"
 	},
 	"browserslist": [
@@ -113,11 +114,6 @@
 		"gitEmail": "guilherme.gazzo@rocket.chat",
 		"commitMessage": "Deploy Storybook to GitHub Pages [skip ci]"
 	},
-	"husky": {
-		"hooks": {
-			"pre-commit": "run-s i18n && git add -A src/i18n"
-		}
-	},
 	"houston": {
 		"updateFiles": [
 			"package.json"

src/components/Alert/index.js

@@ -1,12 +1,12 @@
 import { h, Component } from 'preact';
+import { withTranslation } from 'react-i18next';
 
-import I18n from '../../i18n';
 import CloseIcon from '../../icons/close.svg';
 import { createClassName } from '../helpers';
 import styles from './styles.scss';
 
 
-export class Alert extends Component {
+class Alert extends Component {
 	static defaultProps = {
 		timeout: 3000,
 		hideCloseButton: false,
@@ -28,7 +28,7 @@ export class Alert extends Component {
 		clearTimeout(this.dismissTimeout);
 	}
 
-	render = ({ success, warning, error, color, hideCloseButton, className, style = {}, children }) => (
+	render = ({ success, warning, error, color, hideCloseButton, className, style = {}, children, t }) => (
 		<div
 			role='alert'
 			className={createClassName(styles, 'alert', { success, warning, error }, [className])}
@@ -44,11 +44,13 @@ export class Alert extends Component {
 				<button
 					onClick={this.handleDismiss}
 					className={createClassName(styles, 'alert__close')}
-					aria-label={I18n.t('Dismiss this alert')}
+					aria-label={t('dismiss_this_alert')}
 				>
 					<CloseIcon width={20} height={20} />
 				</button>
 			)}
 		</div>
 	)
 }
+
+export default withTranslation()(Alert);

src/components/Alert/stories.js

@@ -3,7 +3,7 @@ import { withKnobs, boolean, color, text } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 import { h } from 'preact';
 
-import { Alert } from '.';
+import Alert from '.';
 import { screenCentered, loremIpsum } from '../../helpers.stories';