Monorepo migration

packages/pack/template/.editorconfig → .editorconfig

@@ -11,3 +11,7 @@ insert_final_newline = true
 
 [*.md]
 trim_trailing_whitespace = false
+
+[*.scss]
+indent_size = 2
+indent_style = tab

.gitignore

@@ -0,0 +1,27 @@
+.DS_Store
+.idea
+.cache
+.stylelintcache
+.eslintcache
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+node_modules
+dist
+config.ts
+.yarn/*
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+.pnp.*
+.netlify
+storybook-static
+i18n-js
+po
+coverage
+test-report.xml
+ci/images/.env
+.env
+appConfig.json
+webapp-bundle.tar.gz

.lintstagedrc

@@ -0,0 +1,13 @@
+{
+    "(*.ts|*.tsx|*.js)": [
+        "prettier --write",
+        "eslint --fix",
+    ],
+    "*.scss": [
+        "prettier --write",
+        "stylelint --fix",
+    ],
+    "*.json": "prettier --write",
+    "*.md": "prettier --write",
+    "package.json": "sort-package-json",
+}

.prettierignore

@@ -0,0 +1 @@
+applications/**/locales/**/*.json

.prettierrc

@@ -0,0 +1,17 @@
+{
+  "printWidth": 120,
+  "arrowParens": "always",
+  "singleQuote": true,
+  "tabWidth": 4,
+  "proseWrap": "never",
+  "overrides": [
+    {
+      "files": "*.scss",
+      "options": {
+        "tabWidth": 2,
+        "useTabs": true,
+        "singleQuote": true
+      }
+    }
+  ]
+}

.stylelintrc

@@ -0,0 +1,5 @@
+{
+    "extends": [
+        "@proton/stylelint-config-proton"
+    ]
+}

.yarnrc.yml

@@ -0,0 +1,7 @@
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
+    spec: "@yarnpkg/plugin-workspace-tools"
+
+yarnPath: .yarn/releases/yarn-2.4.2.cjs

README.md

@@ -0,0 +1,42 @@
+# Web clients
+
+This project is a monorepo hosting the proton web clients. It includes the web applications, their dependencies & shared modules as well as all tooling surrounding development of the web clients (as well as some additional miscellaneous things).
+
+-   <img src="./applications/mail/src/assets/mail.svg" style="vertical-align: middle" height="20" width="20" /> <span style="vertical-align: middle; display: inline-block">Proton Mail</span>
+-   <img src="./applications/calendar/src/assets/protoncalendar.svg" style="vertical-align: middle" height="20" width="20" /> <span style="vertical-align: middle; display: inline-block">Proton Calendar</span>
+-   <img src="./applications/drive/src/assets/protondrive.svg" style="vertical-align: middle" height="20" width="20" /> <span style="vertical-align: middle; display: inline-block">Proton Drive</span>
+-   <img src="./applications/account/src/assets/protonaccount.svg" style="vertical-align: middle" height="20" width="20" /> <span style="vertical-align: middle; display: inline-block">Proton Account</span>
+-   <img src="./applications/vpn-settings/src/assets/vpn.svg" style="vertical-align: middle" height="20" width="20" /> <span style="vertical-align: middle; display: inline-block">Proton VPN Account</span>
+
+Technically, this monorepo is based on Yarn 2 & Yarn Workspaces, with unified versioning for all packages inside.
+
+## Getting Started
+
+You'll need to have the following environment to work with this project
+
+-   Node.js LTS
+-   Yarn 2
+-   git
+
+```console
+# Clone the project
+git clone https://github.com/ProtonMail/web-clients.git
+git clone [email protected]:ProtonMail/web-clients.git
+
+# Install all dependencies for the entire monorepo & symlink
+# local dependents to one another
+
+yarn install
+
+# Run web clients by running proton-<package-name>
+# Example: proton mail web client
+yarn workspace proton-mail start
+```
+
+For additional details on how to interact with the monorepo, see the [yarn docs](https://yarnpkg.com/) for reference.
+
+## License
+
+The code and data files in this distribution are licensed under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. See https://www.gnu.org/licenses/ for a copy of this license.
+
+See [LICENSE](LICENSE) file

applications/account/.eslintrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+  "extends": [
+    "@proton/eslint-config-proton"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "tsconfigRootDir": __dirname,
+    "project": "./tsconfig.json"
+  },
+  "ignorePatterns": [
+    ".eslintrc.js"
+  ]
+}

applications/account/jest.config.js

@@ -7,5 +7,5 @@ module.exports = {
   },
   collectCoverage: true,
   collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}"],
-  transformIgnorePatterns: ["node_modules/(?!(proton-shared)/)"]
+  transformIgnorePatterns: ["node_modules/(?!(@proton/shared)/)"]
 };

applications/account/package.json

@@ -1,75 +1,54 @@
 {
     "name": "proton-account",
-    "version": "4.1.0",
     "description": "React web application to manage Proton accounts",
+    "keywords": [],
+    "license": "GPL-3.0",
+    "author": "",
     "main": "index.js",
     "scripts": {
         "start": "proton-pack dev-server --appMode=standalone",
         "lint": "eslint src --ext .js,.ts,.tsx --quiet --cache",
         "pretty": "prettier --write  $(find src/app -type f -name '*.js' -o -name '*.ts' -o -name '*.tsx')",
-        "preversion": "git update-index --no-assume-unchanged package-lock.json",
-        "postversion": "git update-index --assume-unchanged package-lock.json && git push --tags",
         "i18n:validate": "proton-i18n validate lint-functions",
         "i18n:validate:context": "proton-i18n extract && proton-i18n validate",
         "i18n:upgrade": "proton-i18n extract --verbose && proton-i18n crowdin --verbose",
         "test": "jest",
-        "deploy": "proton-bundler --git",
         "deploy:prod": "proton-bundler --remote --branch=deploy-prod",
-        "deploy:standalone": "proton-bundler --git --appMode=standalone",
-        "build": "cross-env NODE_ENV=production proton-pack compile",
         "build:sso": "cross-env NODE_ENV=production proton-pack compile --appMode=sso",
         "build:standalone": "cross-env NODE_ENV=production proton-pack compile --appMode=standalone",
         "bundle": "proton-bundler",
-        "check-types": "tsc"
+        "check-types": "tsc",
+        "pack": "proton-pack",
+        "postinstall": "proton-pack config"
     },
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/ProtonMail/proton-account.git"
-    },
-    "keywords": [],
-    "author": "",
-    "license": "GPL-3.0",
-    "bugs": {
-        "url": "https://github.com/ProtonMail/proton-account/issues"
+    "dependencies": {
+        "@proton/components": "workspace:packages/components",
+        "@proton/pack": "workspace:packages/pack",
+        "@proton/shared": "workspace:packages/shared",
+        "@proton/styles": "workspace:packages/styles",
+        "@types/react": "^16.0.0",
+        "@types/react-dom": "^16.0.0",
+        "abortcontroller-polyfill": "^1.2.1",
+        "core-js": "^3.2.1",
+        "proton-translations": "github:ProtonMail/proton-translations#fe-account",
+        "react": "^16.0.0",
+        "react-dom": "^16.0.0",
+        "ttag": "^1.7.22",
+        "yetch": "^1.1.0"
     },
-    "homepage": "https://github.com/ProtonMail/proton-account#readme",
     "devDependencies": {
         "@babel/preset-typescript": "^7.6.0",
+        "@proton/bundler": "workspace:packages/bundler",
+        "@proton/eslint-config-proton": "workspace:packages/eslint-config-proton",
+        "@proton/i18n": "workspace:packages/i18n",
         "@testing-library/jest-dom": "^4.0.0",
         "@testing-library/react": "^8.0.7",
         "@types/jest": "^24.0.18",
         "babel-jest": "^24.8.0",
-        "cross-env": "^5.2.0",
+        "cross-env": "^7.0.3",
         "eslint": "^7.5.0",
-        "eslint-config-proton-lint": "github:ProtonMail/proton-lint#semver:^0.0.5",
-        "husky": "^4.2.5",
         "jest": "^24.9.0",
-        "lint-staged": "^10.4.0",
         "prettier": "^2.0.5",
-        "proton-bundler": "github:ProtonMail/proton-bundler#semver:^2.0.0",
-        "proton-i18n": "github:ProtonMail/proton-i18n#semver:^2.0.0",
         "typescript": "^4.0.3"
-    },
-    "dependencies": {
-        "abortcontroller-polyfill": "^1.2.1",
-        "core-js": "^3.2.1",
-        "design-system": "github:ProtonMail/design-system#master",
-        "proton-pack": "github:ProtonMail/proton-pack#semver:^3.0.0",
-        "proton-shared": "github:ProtonMail/proton-shared#master",
-        "proton-translations": "github:ProtonMail/proton-translations#fe-account",
-        "react-components": "github:ProtonMail/react-components#master",
-        "ttag": "^1.7.22",
-        "yetch": "^1.1.0"
-    },
-    "lint-staged": {
-        "(*.ts|*.tsx|*.js)": [
-            "prettier --write",
-            "eslint"
-        ]
-    },
-    "husky": {
-        "hooks": {
-            "pre-commit": "lint-staged"
-        }
     }
-}
+}

applications/account/src/app/App.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import { Route, Switch } from 'react-router-dom';
 
-import sentry from 'proton-shared/lib/helpers/sentry';
-import { LoaderPage, ProtonApp, ErrorBoundary, StandardErrorPage } from 'react-components';
-import { G_OAUTH_REDIRECT_PATH } from 'react-components/containers/importAssistant/constants';
+import sentry from '@proton/shared/lib/helpers/sentry';
+import { LoaderPage, ProtonApp, ErrorBoundary, StandardErrorPage } from '@proton/components';
+import { G_OAUTH_REDIRECT_PATH } from '@proton/components/containers/importAssistant/constants';
 
 import * as config from './config';
 import Setup from './Setup';

applications/account/src/app/Setup.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import locales from 'proton-shared/lib/i18n/locales';
+import locales from '@proton/shared/lib/i18n/locales';
 
-import { PublicAuthenticationStore, PrivateAuthenticationStore, useAuthentication } from 'react-components';
+import { PublicAuthenticationStore, PrivateAuthenticationStore, useAuthentication } from '@proton/components';
 
 import PrivateApp from './content/PrivateApp';
 import PublicApp from './content/PublicApp';

applications/account/src/app/app.scss

@@ -1,4 +1,4 @@
-@import '~design-system/scss/proton-account';
+@import '@proton/styles/scss/proton-account';
 @import
-    '~design-system/scss/specifics/placeholder-loading',
-    '~design-system/scss/specifics/settings';
+    '@proton/styles/scss/specifics/placeholder-loading',
+    '@proton/styles/scss/specifics/settings';

applications/account/src/app/components/EmailResubscribed.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from 'react-components';
+import { Button } from '@proton/components';
 import { c } from 'ttag';
 import EmailUnsubscribeCategories from './EmailUnsubscribeCategories';
 import EmailUnsubscribeLayout from './EmailUnsubscribeLayout';

applications/account/src/app/components/EmailSubscriptionManagement.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { EmailSubscriptionCheckboxes } from 'react-components';
+import { EmailSubscriptionCheckboxes } from '@proton/components';
 import { c } from 'ttag';
-import protonLogoSvg from 'design-system/assets/img/shared/proton-logo.svg';
+import protonLogoSvg from '@proton/styles/assets/img/shared/proton-logo.svg';
 
 import EmailUnsubscribeBorderedContainer from './EmailUnsubscribeBorderedContainer';
 import './EmailUnsubscribeLayout.scss';

applications/account/src/app/components/EmailUnsubscribeBorderedContainer.scss

@@ -1,4 +1,4 @@
-@import '~design-system/scss/config/';
+@import '@proton/styles/scss/config/';
 
 .email-unsubscribe-container {
     width: rem(480);

applications/account/src/app/components/EmailUnsubscribeBorderedContainer.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { classnames } from 'react-components';
+import { classnames } from '@proton/components';
 import './EmailUnsubscribeBorderedContainer.scss';
 
 interface EmailUnsubscribeBorderedContainerProps {

applications/account/src/app/components/EmailUnsubscribeLayout.scss

@@ -1,4 +1,4 @@
-@import '~design-system/scss/config/';
+@import '@proton/styles/scss/config/';
 
 .email-unsubscribe-layout--logo {
     width: rem(90);

applications/account/src/app/components/EmailUnsubscribeLayout.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { c } from 'ttag';
-import protonLogoSvg from 'design-system/assets/img/shared/proton-logo.svg';
+import protonLogoSvg from '@proton/styles/assets/img/shared/proton-logo.svg';
 import EmailUnsubscribeBorderedContainer from './EmailUnsubscribeBorderedContainer';
 import './EmailUnsubscribeLayout.scss';
 

applications/account/src/app/components/EmailUnsubscribed.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from 'react-components';
+import { Button } from '@proton/components';
 import { c } from 'ttag';
 import EmailUnsubscribeCategories from './EmailUnsubscribeCategories';
 import EmailUnsubscribeLayout from './EmailUnsubscribeLayout';

applications/account/src/app/components/PrivateMainAreaLoading.tsx

@@ -5,7 +5,7 @@ import {
     SettingsParagraph,
     SettingsSection,
     SettingsSectionTitle,
-} from 'react-components';
+} from '@proton/components';
 
 const PrivateMainAreaLoading = () => {
     return (

applications/account/src/app/components/PrivateMainSettingsAreaWithPermissions.tsx

@@ -7,12 +7,12 @@ import {
     SectionConfig,
     ButtonLike,
     SettingsLink,
-} from 'react-components';
-import { hasPermission } from 'proton-shared/lib/helpers/permissions';
-import { PERMISSIONS } from 'proton-shared/lib/constants';
+} from '@proton/components';
+import { hasPermission } from '@proton/shared/lib/helpers/permissions';
+import { PERMISSIONS } from '@proton/shared/lib/constants';
 import { c } from 'ttag';
-import upgradeSvg from 'design-system/assets/img/placeholders/upgrade.svg';
-import noAccess from 'design-system/assets/img/errors/no-access-page.svg';
+import upgradeSvg from '@proton/styles/assets/img/placeholders/upgrade.svg';
+import noAccess from '@proton/styles/assets/img/errors/no-access-page.svg';
 
 const { ADMIN, MEMBER } = PERMISSIONS;
 

applications/account/src/app/components/SettingsListItem.tsx

@@ -5,7 +5,7 @@ import {
     SidebarListItemContent,
     SidebarListItemContentIcon,
     SidebarListItemLink,
-} from 'react-components';
+} from '@proton/components';
 
 const SettingsListItem = ({ to, icon, children }: { to: string; icon: string; children: React.ReactNode }) => (
     <SidebarListItem>