feat(logo): Rocket.Chat logo package (#535)

* feat: rocketchat logo package

* chore: replace logo in onboarding-ui package

* fix: jest config

* fix: width prop to prevent SVG to be hidden in Safari

* Remove ARIA role attribute

Co-authored-by: Tasso Evangelista <[email protected]>

packages/logo/.eslintignore

@@ -0,0 +1,2 @@
+/node_modules
+/dist

packages/logo/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: '@rocket.chat/eslint-config-alt/typescript',
+  env: {
+    jest: true,
+  },
+};

packages/logo/.gitignore

@@ -0,0 +1 @@
+/dist

packages/logo/.lintstagedrc.json

@@ -0,0 +1,5 @@
+{
+  "src/**/*.{js,ts}": [
+    "yarn eslint --fix --"
+  ]
+}

packages/logo/.prettierignore

@@ -0,0 +1,2 @@
+/node_modules
+/dist

packages/logo/.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require('@rocket.chat/prettier-config/fuselage');

packages/logo/CHANGELOG.md

@@ -0,0 +1,4 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

packages/logo/README.md

@@ -0,0 +1,91 @@
+<!--header-->
+
+<p align="center">
+  <a href="https://rocket.chat" title="Rocket.Chat">
+    <img src="https://github.com/RocketChat/Rocket.Chat.Artwork/raw/master/Logos/2020/png/logo-horizontal-red.png" alt="Rocket.Chat" />
+  </a>
+</p>
+
+# `@rocket.chat/logo`
+
+> Rocket.Chat logo package
+
+---
+
+![npm@latest](https://img.shields.io/npm/v/@rocket.chat/logo/latest?style=flat-square) ![npm@next](https://img.shields.io/npm/v/@rocket.chat/logo/next?style=flat-square) ![npm downloads](https://img.shields.io/npm/dw/@rocket.chat/logo?style=flat-square) ![License: MIT](https://img.shields.io/npm/l/@rocket.chat/logo?style=flat-square)
+
+![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Flogo&style=flat-square) ![peer deps](https://img.shields.io/david/peer/RocketChat/Rocket.Chat.Fuselage?path=packages%2Flogo&style=flat-square) ![dev deps](https://img.shields.io/david/dev/RocketChat/Rocket.Chat.Fuselage?path=packages%2Flogo&style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/min/@rocket.chat/logo?style=flat-square)
+
+<!--/header-->
+
+## Install
+
+<!--install-->
+
+Add `@rocket.chat/logo` as a dependency:
+
+```sh
+npm i @rocket.chat/logo
+
+# or, if you are using yarn:
+
+yarn add @rocket.chat/logo
+```
+
+<!--/install-->
+
+## Contributing
+
+<!--contributing(msg)-->
+
+Contributions, issues, and feature requests are welcome!<br />
+Feel free to check the [issues](https://github.com/RocketChat/Rocket.Chat.Fuselage/issues).
+
+<!--/contributing(msg)-->
+
+### Building
+
+As this package dependends on others in this monorepo, before anything run the following at the root directory:
+
+<!--yarn(build)-->
+
+```sh
+yarn build
+```
+
+<!--/yarn(build)-->
+
+### Linting
+
+To ensure the source is matching our coding style, we perform [linting](<https://en.wikipedia.org/wiki/Lint_(software)>).
+Before commiting, check if your code fits our style by running:
+
+<!--yarn(lint)-->
+
+```sh
+yarn lint
+```
+
+<!--/yarn(lint)-->
+
+Some linter warnings and errors can be automatically fixed:
+
+<!--yarn(lint-fix)-->
+
+```sh
+yarn lint-fix
+```
+
+<!--/yarn(lint-fix)-->
+
+### Running tests
+
+Whenever possible, add tests to describe exactly what your code do. You can run them by yourself:
+
+<!--yarn(test)-->
+
+```sh
+yarn test
+```
+
+<!--/yarn(test)-->

packages/logo/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: [
+    ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
+    ['@babel/plugin-proposal-private-methods', { loose: true }],
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
+  ],
+};

packages/logo/jest.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  preset: 'ts-jest',
+  errorOnDeprecated: true,
+  testMatch: ['<rootDir>/src/**/*.spec.ts?(x)'],
+  testEnvironment: 'jsdom',
+  globals: {
+    'ts-jest': {
+      tsconfig: {
+        noUnusedLocals: false,
+        noUnusedParameters: false,
+      },
+    },
+  },
+};

packages/logo/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@rocket.chat/logo",
+  "version": "0.29.0",
+  "description": "Rocket.Chat logo package",
+  "keywords": [
+    "rocketchat",
+    "rocketchat logo"
+  ],
+  "author": {
+    "name": "Rocket.Chat",
+    "url": "https://rocket.chat/"
+  },
+  "homepage": "https://github.com/RocketChat/Rocket.Chat.Fuselage#readme",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/RocketChat/Rocket.Chat.Fuselage.git",
+    "directory": "packages/logo"
+  },
+  "bugs": {
+    "url": "https://github.com/RocketChat/Rocket.Chat.Fuselage/issues"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/esm/index.d.ts",
+  "files": [
+    "/dist"
+  ],
+  "scripts": {
+    "build": "run-s .:build:clean .:build:esm .:build:cjs",
+    ".:build:clean": "rimraf dist",
+    ".:build:esm": "tsc -p tsconfig-esm.json",
+    ".:build:cjs": "tsc -p tsconfig-cjs.json",
+    "lint": "run-s .:lint:eslint .:lint:tsc",
+    ".:lint:eslint": "eslint src",
+    ".:lint:tsc": "tsc -p tsconfig.json --noEmit",
+    "lint-fix": "eslint --fix src",
+    "lint-staged": "lint-staged",
+    "test": "jest --runInBand",
+    "docs": "typedoc"
+  },
+  "devDependencies": {
+    "@rocket.chat/eslint-config-alt": "workspace:packages/eslint-config-alt",
+    "@rocket.chat/fuselage-tokens": "workspace:packages/fuselage-tokens",
+    "@rocket.chat/prettier-config": "workspace:packages/prettier-config",
+    "@types/jest": "^27.0.1",
+    "@types/react": "^17.0.14",
+    "@types/react-dom": "^17.0.9",
+    "eslint": "^7.32.0",
+    "jest": "^27.2.0",
+    "lint-staged": "^11.1.2",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.4.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "rimraf": "^3.0.2",
+    "ts-jest": "^27.0.5",
+    "typedoc": "^0.22.3",
+    "typescript": "^4.4.3"
+  },
+  "dependencies": {
+    "@rocket.chat/fuselage-hooks": "workspace:packages/fuselage-hooks",
+    "tslib": "^2.3.1"
+  },
+  "peerDependencies": {
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  }
+}

packages/onboarding-ui/src/common/RocketChatLogo.tsx → packages/logo/src/RocketChatLogo.tsx

@@ -17,7 +17,7 @@ const RocketChatLogo = ({
       viewBox='0 0 180 30'
       fill={color}
       aria-labelledby={titleId}
-      role='img'
+      width='100%'
     >
       <title id={titleId}>Rocket.Chat</title>
       <path d='M173.243 3.53369H176.613V8.14872H179.731V11.185H176.613V19.4313H179.562V22.4125C179.085 22.5238 178.495 22.58 177.821 22.58C174.76 22.58 173.242 20.9925 173.242 17.8163V3.53369H173.243Z' />

packages/logo/src/index.ts

@@ -0,0 +1 @@
+export { default as RocketChatLogo } from './RocketChatLogo';

packages/logo/tsconfig-cjs.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "outDir": "./dist/cjs"
+  },
+  "exclude": ["./**/*.spec.tsx"]
+}

packages/logo/tsconfig-esm.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["./**/*.spec.tsx"]
+}

packages/logo/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "rootDir": "./src",
+    "target": "es5",
+    "module": "ESNext",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "./dist/esm",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "jsx": "react-jsx",
+    "importsNotUsedAsValues": "error"
+  }
+}

packages/logo/typedoc.json

@@ -0,0 +1,4 @@
+{
+  "entryPoints": ["src/index.ts"],
+  "out": "../../static/logo"
+}

packages/onboarding-ui/package.json

@@ -78,6 +78,7 @@
     "@rocket.chat/fuselage": "workspace:packages/fuselage",
     "@rocket.chat/fuselage-hooks": "workspace:packages/fuselage-hooks",
     "@rocket.chat/icons": "workspace:packages/icons",
+    "@rocket.chat/logo": "workspace:packages/logo",
     "@rocket.chat/styled": "workspace:packages/styled",
     "i18next": "^20.3.2",
     "react-hook-form": "^7.10.1",

packages/onboarding-ui/src/common/FormPageLayout.tsx

@@ -1,3 +1,4 @@
+import { RocketChatLogo } from '@rocket.chat/logo';
 import type { ReactElement, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -10,7 +11,6 @@ import {
   Title,
   Wrapper,
 } from './FormPageLayout.styles';
-import RocketChatLogo from './RocketChatLogo';
 
 type FormPageLayoutProps = {
   logo?: ReactNode;

packages/onboarding-ui/src/index.ts

@@ -1,4 +1,3 @@
-export { default as RocketChatLogo } from './common/RocketChatLogo';
 export { default as AdminInfoPage } from './pages/AdminInfoPage';
 export { default as AwaitingConfirmationPage } from './pages/AwaitingConfirmationPage';
 export { default as CheckYourEmailPage } from './pages/CheckYourEmailPage';

packages/onboarding-ui/src/pages/AwaitingConfirmationPage/AwaitingConfirmationPage.tsx

@@ -1,12 +1,12 @@
 import { Box, Margins } from '@rocket.chat/fuselage';
 import colors from '@rocket.chat/fuselage-tokens/colors.json';
+import { RocketChatLogo } from '@rocket.chat/logo';
 import type { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import BackgroundLayer from '../../common/BackgroundLayer';
 import { useDarkMode } from '../../common/DarkModeProvider';
 import EmailCodeFallback from '../../common/EmailCodeFallback';
-import RocketChatLogo from '../../common/RocketChatLogo';
 
 type AwaitingConfirmationPageProps = {
   emailAddress: string;

packages/onboarding-ui/src/pages/CheckYourEmailPage/CheckYourEmailPage.tsx

@@ -1,12 +1,12 @@
 import { Box, Margins } from '@rocket.chat/fuselage';
 import colors from '@rocket.chat/fuselage-tokens/colors.json';
+import { RocketChatLogo } from '@rocket.chat/logo';
 import type { ReactElement } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
 
 import BackgroundLayer from '../../common/BackgroundLayer';
 import { useDarkMode } from '../../common/DarkModeProvider';
 import EmailCodeFallback from '../../common/EmailCodeFallback';
-import RocketChatLogo from '../../common/RocketChatLogo';
 
 type CheckYourEmailPageProps = {
   onResendEmailRequest: () => void;

packages/onboarding-ui/src/pages/ConfirmationProcessPage/ConfirmationProcessPage.tsx

@@ -1,11 +1,11 @@
 import { Box, Margins, Throbber } from '@rocket.chat/fuselage';
 import colors from '@rocket.chat/fuselage-tokens/colors.json';
+import { RocketChatLogo } from '@rocket.chat/logo';
 import type { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import BackgroundLayer from '../../common/BackgroundLayer';
 import { useDarkMode } from '../../common/DarkModeProvider';
-import RocketChatLogo from '../../common/RocketChatLogo';
 
 const ConfirmationProcessPage = (): ReactElement => {
   const darkMode = useDarkMode();

packages/onboarding-ui/src/pages/EmailConfirmedPage/EmailConfirmedPage.tsx

@@ -1,11 +1,11 @@
 import { Box, Margins } from '@rocket.chat/fuselage';
 import colors from '@rocket.chat/fuselage-tokens/colors.json';
+import { RocketChatLogo } from '@rocket.chat/logo';
 import type { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import BackgroundLayer from '../../common/BackgroundLayer';
 import { useDarkMode } from '../../common/DarkModeProvider';
-import RocketChatLogo from '../../common/RocketChatLogo';
 
 const EmailConfirmedPage = (): ReactElement => {
   const darkMode = useDarkMode();

packages/onboarding-ui/src/pages/InvalidLinkPage/InvalidLinkPage.tsx

@@ -1,11 +1,11 @@
 import { Box, Margins, Button } from '@rocket.chat/fuselage';
 import colors from '@rocket.chat/fuselage-tokens/colors.json';
+import { RocketChatLogo } from '@rocket.chat/logo';
 import type { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import BackgroundLayer from '../../common/BackgroundLayer';
 import { useDarkMode } from '../../common/DarkModeProvider';
-import RocketChatLogo from '../../common/RocketChatLogo';
 
 type InvalidLinkPageProps = {
   onRequestNewLink: () => void;

packages/onboarding-ui/src/pages/MagicLinkEmailPage/MagicLinkEmailPage.tsx

@@ -1,12 +1,12 @@
 import { Box, Margins } from '@rocket.chat/fuselage';
 import colors from '@rocket.chat/fuselage-tokens/colors.json';
+import { RocketChatLogo } from '@rocket.chat/logo';
 import type { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import BackgroundLayer from '../../common/BackgroundLayer';
 import { useDarkMode } from '../../common/DarkModeProvider';
 import EmailCodeFallback from '../../common/EmailCodeFallback';
-import RocketChatLogo from '../../common/RocketChatLogo';
 
 type MagicLinkEmailProps = {
   onResendEmailRequest: () => void;