Chore: ui-client package (#25916)

<!-- This is a pull request template, you do not need to uncomment or remove the comments, they won't show up in the PR text. -->

<!-- Your Pull Request name should start with one of the following tags
  [NEW] For new features
  [IMPROVE] For an improvement (performance or little improvements) in existing features
  [FIX] For bug fixes that affect the end-user
  [BREAK] For pull requests including breaking changes
  Chore: For small tasks
  Doc: For documentation
-->

<!-- Checklist!!! If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code. 
  - I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
  - I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
  - Lint and unit tests pass locally with my changes
  - I have added tests that prove my fix is effective or that my feature works (if applicable)
  - I have added necessary documentation (if applicable)
  - Any dependent changes have been merged and published in downstream modules
-->

## Proposed changes (including videos or screenshots)
<!-- CHANGELOG -->
<!--
  Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request.
  If it fixes a bug or resolves a feature request, be sure to link to that issue below.
  This description will appear in the release notes if we accept the contribution.
-->

<!-- END CHANGELOG -->

## Issue(s)
<!-- Link the issues being closed by or related to this PR. For example, you can use #594 if this PR closes issue number 594 -->

## Steps to test or reproduce
<!-- Mention how you would reproduce the bug if not mentioned on the issue page already. Also mention which screens are going to have the changes if applicable -->

## Further comments
<!-- If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc... -->

apps/meteor/client/providers/TooltipProvider.tsx

@@ -1,8 +1,8 @@
 import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
+import { TooltipComponent } from '@rocket.chat/ui-client';
 import { TooltipContext } from '@rocket.chat/ui-contexts';
 import React, { FC, useEffect, useState, useMemo, ReactNode, useRef, memo } from 'react';
 
-import { TooltipComponent } from '../components/TooltipComponent';
 import TooltipPortal from '../components/TooltipPortal';
 
 const TooltipProvider: FC = ({ children }) => {

apps/meteor/client/views/admin/apps/AppDetailsPageContent.tsx

@@ -1,8 +1,8 @@
 import { Box, Callout, Chip, Margins } from '@rocket.chat/fuselage';
+import { ExternalLink } from '@rocket.chat/ui-client';
 import { TranslationKey, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { FC } from 'react';
 
-import ExternalLink from '../../../components/ExternalLink';
 import ScreenshotCarouselAnchor from './components/ScreenshotCarouselAnchor';
 import { AppInfo } from './definitions/AppInfo';
 

apps/meteor/client/views/admin/apps/AppsWhatIsIt.tsx

@@ -1,9 +1,9 @@
 import { Button, Box, Throbber } from '@rocket.chat/fuselage';
+import { ExternalLink } from '@rocket.chat/ui-client';
 import { useRoute, useMethod, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { FC, useState } from 'react';
 
 import { Apps } from '../../../../app/apps/client';
-import ExternalLink from '../../../components/ExternalLink';
 import Page from '../../../components/Page';
 
 const readMeUrl = 'https://go.rocket.chat/i/developing-an-app';

apps/meteor/client/views/admin/info/TextSeparator.js

@@ -1,8 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
+import { DotLeader } from '@rocket.chat/ui-client';
 import React from 'react';
 
-import DotLeader from '../../../components/DotLeader';
-
 const TextSeparator = ({ label, value }) => (
 	<Box display='flex' flexDirection='row' mb='x4'>
 		<Box display='inline-flex' alignItems='center'>

apps/meteor/client/views/location/MapViewFallback.tsx

@@ -1,9 +1,8 @@
 import { Box, Icon } from '@rocket.chat/fuselage';
+import { ExternalLink } from '@rocket.chat/ui-client';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { FC } from 'react';
 
-import ExternalLink from '../../components/ExternalLink';
-
 type MapViewFallbackProps = {
 	linkUrl: string;
 };

apps/meteor/client/views/location/MapViewImage.tsx

@@ -1,8 +1,7 @@
+import { ExternalLink } from '@rocket.chat/ui-client';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { FC } from 'react';
 
-import ExternalLink from '../../components/ExternalLink';
-
 type MapViewImageProps = {
 	linkUrl: string;
 	imageUrl: string;

apps/meteor/client/views/omnichannel/webhooks/WebhooksPage.js

@@ -1,9 +1,9 @@
 import { Box, FieldGroup, Field, TextInput, MultiSelect, Button, ButtonGroup } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { ExternalLink } from '@rocket.chat/ui-client';
 import { useToastMessageDispatch, useMethod, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useMemo } from 'react';
 
-import ExternalLink from '../../../components/ExternalLink';
 import Page from '../../../components/Page';
 import { useForm } from '../../../hooks/useForm';
 

apps/meteor/client/views/room/MessageList/MessageListErrorBoundary.tsx

@@ -1,9 +1,8 @@
 import { States, StatesIcon, StatesTitle, StatesSubtitle, StatesActions, StatesAction, Icon } from '@rocket.chat/fuselage';
+import { ErrorBoundary } from '@rocket.chat/ui-client';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ReactElement, ReactNode } from 'react';
 
-import { ErrorBoundary } from '../../../components/ErrorBoundary';
-
 const MessageListErrorBoundary = ({ children }: { children: ReactNode }): ReactElement => {
 	const t = useTranslation();
 	return (

apps/meteor/client/views/room/Room/Room.tsx

@@ -1,8 +1,8 @@
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { ErrorBoundary } from '@rocket.chat/ui-client';
 import { useUserPreference, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { useMemo, FC } from 'react';
 
-import { ErrorBoundary } from '../../../components/ErrorBoundary';
 import { useEmbeddedLayout } from '../../../hooks/useEmbeddedLayout';
 import Announcement from '../Announcement';
 import Header from '../Header';

apps/meteor/ee/client/views/admin/info/SeatsCard.tsx

@@ -1,10 +1,10 @@
 import { Box, Button, ButtonGroup, Skeleton } from '@rocket.chat/fuselage';
 import colors from '@rocket.chat/fuselage-tokens/colors';
+import { ExternalLink } from '@rocket.chat/ui-client';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ReactElement } from 'react';
 
 import Card from '../../../../../client/components/Card';
-import ExternalLink from '../../../../../client/components/ExternalLink';
 import UsagePieGraph from '../../../../../client/views/admin/info/UsagePieGraph';
 import { useRequestSeatsLink } from '../users/useRequestSeatsLink';
 import { useSeatsCap } from '../users/useSeatsCap';

apps/meteor/ee/client/views/admin/users/CloseToSeatsCapModal.tsx

@@ -1,8 +1,8 @@
 import { Modal, ButtonGroup, Button, Box } from '@rocket.chat/fuselage';
+import { ExternalLink } from '@rocket.chat/ui-client';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ReactElement } from 'react';
 
-import ExternalLink from '../../../../../client/components/ExternalLink';
 import MemberCapUsage from './SeatsCapUsage';
 
 type CloseToSeatsCapModalProps = {

apps/meteor/ee/client/views/admin/users/ReachedSeatsCapModal.tsx

@@ -1,8 +1,8 @@
 import { Icon, Modal, ButtonGroup, Button, Box } from '@rocket.chat/fuselage';
+import { ExternalLink } from '@rocket.chat/ui-client';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ReactElement } from 'react';
 
-import ExternalLink from '../../../../../client/components/ExternalLink';
 import SeatsCapUsage from './SeatsCapUsage';
 
 type ReachedSeatsCapModalProps = {

apps/meteor/ee/client/views/admin/users/UserPageHeaderContentWithSeatsCap.tsx

@@ -1,8 +1,8 @@
 import { Button, ButtonGroup, Icon, Margins } from '@rocket.chat/fuselage';
+import { ExternalLink } from '@rocket.chat/ui-client';
 import { useSetModal, useRoute, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ReactElement } from 'react';
 
-import ExternalLink from '../../../../../client/components/ExternalLink';
 import CloseToSeatsCapModal from './CloseToSeatsCapModal';
 import ReachedSeatsCapModal from './ReachedSeatsCapModal';
 import SeatsCapUsage from './SeatsCapUsage';

apps/meteor/package.json

@@ -216,6 +216,7 @@
 		"@rocket.chat/poplib": "workspace:^",
 		"@rocket.chat/rest-typings": "workspace:^",
 		"@rocket.chat/string-helpers": "~0.31.12",
+		"@rocket.chat/ui-client": "workspace:^",
 		"@rocket.chat/ui-contexts": "workspace:^",
 		"@rocket.chat/ui-kit": "~0.31.12",
 		"@slack/client": "^4.12.0",

packages/ui-client/.eslintrc

@@ -0,0 +1,67 @@
+{
+	"extends": [
+		"plugin:@typescript-eslint/recommended",
+		"plugin:@typescript-eslint/eslint-recommended",
+		"@rocket.chat/eslint-config/original",
+		"prettier",
+		"plugin:anti-trojan-source/recommended",
+		"plugin:react/jsx-runtime"
+	],
+	"parser": "@typescript-eslint/parser",
+	"plugins": ["@typescript-eslint", "react", "react-hooks", "prettier"],
+	"rules": {
+		"@typescript-eslint/ban-ts-ignore": "off",
+		"@typescript-eslint/explicit-function-return-type": "warn",
+		"@typescript-eslint/indent": "off",
+		"@typescript-eslint/no-extra-parens": "off",
+		"@typescript-eslint/no-explicit-any": "off",
+		"@typescript-eslint/no-unused-vars": [
+			"error",
+			{
+				"argsIgnorePattern": "^_"
+			}
+		],
+		"@typescript-eslint/prefer-optional-chain": "warn",
+		"func-call-spacing": "off",
+		"import/named": "error",
+		"import/order": [
+			"error",
+			{
+				"newlines-between": "always",
+				"groups": ["builtin", "external", "internal", ["parent", "sibling", "index"]],
+				"alphabetize": {
+					"order": "asc"
+				}
+			}
+		],
+		"indent": "off",
+		"jsx-quotes": ["error", "prefer-single"],
+		"new-cap": ["error"],
+		"no-extra-parens": "off",
+		"no-spaced-func": "off",
+		"no-undef": "off",
+		"no-unused-vars": "off",
+		"no-useless-constructor": "off",
+		"no-use-before-define": "off",
+		"prefer-arrow-callback": ["error", { "allowNamedFunctions": true }],
+		"prettier/prettier": 2,
+		"react/display-name": "error",
+		"react/jsx-uses-vars": "error",
+		"react/jsx-no-undef": "error",
+		"react/jsx-fragments": ["error", "syntax"],
+		"react/no-multi-comp": "error",
+		"react-hooks/rules-of-hooks": "error",
+		"react-hooks/exhaustive-deps": "warn"
+	},
+	"settings": {
+		"import/resolver": {
+			"node": {
+				"extensions": [".js", ".ts", ".tsx"]
+			}
+		},
+		"react": {
+			"version": "detect"
+		}
+	},
+	"ignorePatterns": ["**/dist"]
+}

packages/ui-client/.storybook/main.js

@@ -0,0 +1,12 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions"
+  ],
+  "framework": "@storybook/react"
+}

packages/ui-client/.storybook/preview.js

@@ -0,0 +1,25 @@
+import '../../../apps/meteor/app/theme/client/main.css';
+import 'highlight.js/styles/github.css';
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
+
+export const decorators = [
+	(Story) => (
+		<div className="rc-old">
+			<style>{`
+				body {
+					background-color: white;
+				}
+			`}</style>
+			<Story />
+		</div>
+	)
+];

packages/ui-client/package.json

@@ -0,0 +1,44 @@
+{
+	"name": "@rocket.chat/ui-client",
+	"version": "0.0.1",
+	"private": true,
+	"devDependencies": {
+		"@rocket.chat/fuselage": "^0.31.13",
+		"@storybook/addon-actions": "^6.5.9",
+		"@storybook/addon-docs": "^6.5.9",
+		"@storybook/addon-essentials": "^6.5.9",
+		"@storybook/addon-interactions": "^6.5.9",
+		"@storybook/addon-links": "^6.5.9",
+		"@storybook/builder-webpack4": "^6.5.9",
+		"@storybook/manager-webpack4": "^6.5.9",
+		"@storybook/react": "^6.5.9",
+		"@storybook/testing-library": "^0.0.13",
+		"@types/jest": "^27.4.1",
+		"@types/react": "~17.0.42",
+		"eslint": "^8.12.0",
+		"eslint-plugin-anti-trojan-source": "^1.1.0",
+		"eslint-plugin-react": "^7.30.0",
+		"eslint-plugin-react-hooks": "^4.6.0",
+		"jest": "^27.5.1",
+		"react": "~17.0.2",
+		"ts-jest": "^27.1.4",
+		"typescript": "~4.3.4"
+	},
+	"scripts": {
+		"lint": "eslint --ext .js,.jsx,.ts,.tsx .",
+		"lint:fix": "eslint --ext .js,.jsx,.ts,.tsx . --fix",
+		"jest": "jest",
+		"build": "rm -rf dist && tsc -p tsconfig.json",
+		"storybook": "start-storybook -p 6006",
+		"dev": "tsc -p --watch --preserveWatchOutput tsconfig.json"
+	},
+	"main": "./dist/index.js",
+	"typings": "./dist/index.d.ts",
+	"files": [
+		"/dist"
+	],
+	"peerDependencies": {
+		"@rocket.chat/fuselage": "*",
+		"react": "~17.0.2"
+	}
+}

apps/meteor/client/components/DotLeader.stories.tsx → packages/ui-client/src/components/DotLeader.stories.tsx

@@ -1,8 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import React from 'react';
 
-import DotLeader from './DotLeader';
+import { DotLeader } from './DotLeader';
 
 export default {
 	title: 'Components/DotLeader',

apps/meteor/client/components/DotLeader.tsx → packages/ui-client/src/components/DotLeader.tsx

@@ -1,13 +1,11 @@
 import { Box } from '@rocket.chat/fuselage';
-import React, { FC, CSSProperties } from 'react';
+import { FC, CSSProperties } from 'react';
 
 type DotLeaderProps = {
 	color?: CSSProperties['borderColor'];
 	dotSize?: CSSProperties['borderBlockEndWidth'];
 };
 
-const DotLeader: FC<DotLeaderProps> = ({ color = 'neutral-300', dotSize = 'x2' }) => (
+export const DotLeader: FC<DotLeaderProps> = ({ color = 'neutral-300', dotSize = 'x2' }) => (
 	<Box flexGrow={1} h='full' alignSelf='flex-end' borderBlockEndStyle='dotted' borderBlockEndWidth={dotSize} m='x2' borderColor={color} />
 );
-
-export default DotLeader;

apps/meteor/client/components/ExternalLink.tsx → packages/ui-client/src/components/ExternalLink.tsx

@@ -1,14 +1,12 @@
 import { Box } from '@rocket.chat/fuselage';
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 type ExternalLinkProps = {
 	to: string;
 };
 
-const ExternalLink: FC<ExternalLinkProps> = ({ children, to, ...props }) => (
+export const ExternalLink: FC<ExternalLinkProps> = ({ children, to, ...props }) => (
 	<Box is='a' href={to} target='_blank' rel='noopener noreferrer' {...props}>
 		{children || to}
 	</Box>
 );
-
-export default ExternalLink;

apps/meteor/client/components/TooltipComponent.tsx → packages/ui-client/src/components/TooltipComponent.tsx

@@ -1,5 +1,5 @@
 import { Tooltip, PositionAnimated, AnimatedVisibility } from '@rocket.chat/fuselage';
-import React, { ReactElement, ReactNode, useRef } from 'react';
+import { ReactElement, ReactNode, useRef } from 'react';
 
 type TooltipComponentProps = {
 	title: ReactNode;
@@ -15,5 +15,3 @@ export const TooltipComponent = ({ title, anchor }: TooltipComponentProps): Reac
 		</PositionAnimated>
 	);
 };
-
-export default TooltipComponent;

packages/ui-client/src/components/index.ts

@@ -0,0 +1,4 @@
+export * from './ExternalLink';
+export * from './ErrorBoundary';
+export * from './DotLeader';
+export * from './TooltipComponent';

packages/ui-client/src/index.ts

@@ -0,0 +1 @@
+export * from './components';

packages/ui-client/tsconfig.json

@@ -0,0 +1,10 @@
+{
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDir": "./src",
+		"outDir": "./dist",
+		"importsNotUsedAsValues": "preserve"
+	},
+	"include": ["./src/**/*"],
+	"exclude": ["**/*.stories.tsx", "**/*.stories.js"]
+}