feat(onboarding-ui): Common components

packages/css-in-js/src/sheet.ts

@@ -4,8 +4,15 @@ const elementId = 'rcx-styles';
 let element: HTMLStyleElement;
 const getStyleTag = (): HTMLStyleElement => {
   if (!element) {
-    element = (document.getElementById(elementId) ||
-      document.createElement('style')) as HTMLStyleElement;
+    const el = document.getElementById(elementId) as HTMLStyleElement;
+    if (el) {
+      element = el;
+      return element;
+    }
+  }
+
+  if (!element) {
+    element = document.createElement('style');
     element.id = elementId;
     element.appendChild(document.createTextNode(''));
     if (document.head) {

packages/fuselage-hooks/src/index.ts

@@ -1,6 +1,7 @@
 export * from './useAutoFocus';
 export * from './useBreakpoints';
 export * from './useClipboard';
+export * from './useDarkMode';
 export * from './useDebouncedCallback';
 export * from './useDebouncedReducer';
 export * from './useDebouncedState';

packages/fuselage-hooks/src/useDarkMode.ts

@@ -0,0 +1,11 @@
+import { usePrefersColorScheme } from './usePrefersColorScheme';
+
+export const useDarkMode = (forced?: boolean): boolean => {
+  const systemDarkMode = usePrefersColorScheme('dark');
+
+  if (forced !== undefined) {
+    return forced;
+  }
+
+  return systemDarkMode;
+};

packages/fuselage/src/components/Box/AnimatedVisibility/AnimatedVisibility.d.ts

@@ -0,0 +1,16 @@
+import { ReactElement, ReactNode } from 'react';
+
+type AnimatedVisibilityProps = {
+  children: ReactNode;
+  visibility?: 'hidden' | 'visible' | 'hiding' | 'unhiding';
+};
+
+const AnimatedVisibility: {
+  (props: AnimatedVisibilityProps): ReactElement;
+  HIDDEN: 'hidden';
+  VISIBLE: 'visible';
+  HIDING: 'hiding';
+  UNHIDING: 'unhiding';
+};
+
+export = AnimatedVisibility;

packages/fuselage/src/components/Box/AnimatedVisibility/index.ts

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

packages/fuselage/src/components/Box/index.d.ts

@@ -148,5 +148,6 @@ type BoxProps = PropsWithChildren<{
 
 export const Box: ForwardRefExoticComponent<BoxProps>;
 
+export { default as AnimatedVisibility } from './AnimatedVisibility';
 export { default as Position, PositionAnimated } from './Position';
 export { default as Scrollable } from './Scrollable';

packages/fuselage/src/components/PasswordInput/PasswordInput.stories.tsx

@@ -1,4 +1,3 @@
-import { Meta, Story } from '@storybook/react';
 import React from 'react';
 
 import { Icon, PasswordInput } from '../..';
@@ -8,25 +7,25 @@ export default {
   title: 'Forms/Inputs/PasswordInput',
   component: PasswordInput,
   parameters: { jest: ['PasswordInput.spec.tsx'] },
-} as Meta;
+};
 
-export const Default: Story = () => <PasswordInput />;
+export const Default = () => <PasswordInput />;
 
-export const WithValue: Story = () => <PasswordInput defaultValue='password' />;
+export const WithValue = () => <PasswordInput defaultValue='password' />;
 
-export const WithIconAddon: Story = () => (
+export const WithIconAddon = () => (
   <PasswordInput addon={<Icon name='send' size={20} />} />
 );
 
-export const Invalid: Story = () => <PasswordInput error='Error' />;
+export const Invalid = () => <PasswordInput error='Error' />;
 
-export const Disabled: Story = () => <PasswordInput disabled />;
+export const Disabled = () => <PasswordInput disabled />;
 
-export const WithPlaceholder: Story = () => (
+export const WithPlaceholder = () => (
   <PasswordInput placeholder='Placeholder' />
 );
 
-export const States: Story = () => (
+export const States = () => (
   <PropsVariation
     component={PasswordInput}
     common={{ onChange: () => undefined }}

packages/fuselage/src/components/Tooltip/Tooltip.styles.scss

@@ -1,5 +1,4 @@
 @use '../../styles/colors.scss';
-@use '../../styles/lengths.scss';
 @use '../../styles/typography.scss';
 @use '../../styles/functions.scss';
 
@@ -17,35 +16,37 @@ $tooltip-text-color: functions.theme('tooltip-text-color', colors.surface());
 
     content: ' ';
 
-    border-width: lengths.border-width(4) + lengths.border-width(1);
+    border-width: 4px;
     border-color: transparent transparent $tooltip-background-color
       $tooltip-background-color;
-    border-radius: lengths.border-radius(none) lengths.border-radius(none)
-      lengths.border-radius(none) (lengths.border-radius(2) + to-rem(1));
+    border-radius: 0 0 0 (2px);
+
+    block-size: 0;
+    inline-size: 0;
 
     @if $direction == 'bottom' {
-      inset-block-start: lengths.inset(-4);
+      inset-block-start: -4px;
 
       transform: rotate(135deg);
     }
     @if $direction == 'top' {
-      inset-block-end: lengths.inset(-4);
+      inset-block-end: -4px;
 
       transform: rotate(-45deg);
     }
     @if $direction == 'right' {
       inset-block-start: 50%;
-      inset-inline-start: lengths.inset(-4);
+      inset-inline-start: -4px;
 
-      margin-block-start: lengths.margin(-4);
+      margin-block-start: -4px;
 
       transform: rotate(45deg);
     }
     @if $direction == 'left' {
       inset-block-start: 50%;
-      inset-inline-end: lengths.inset(-4);
+      inset-inline-end: -4px;
 
-      margin-block-start: lengths.margin(-4);
+      margin-block-start: -4px;
 
       transform: rotate(-135deg);
     }
@@ -57,15 +58,19 @@ $tooltip-text-color: functions.theme('tooltip-text-color', colors.surface());
 
   display: inline-block;
 
-  max-width: lengths.size(240);
+  max-width: 240px;
+
+  padding: 8px 12px;
 
-  padding: lengths.padding(8) lengths.padding(12);
+  user-select: none;
 
   word-break: break-word;
 
+  pointer-events: none;
+
   color: $tooltip-text-color;
 
-  border-radius: lengths.border-radius(4);
+  border-radius: 4px;
 
   background-color: $tooltip-background-color;
 
@@ -92,22 +97,22 @@ $tooltip-text-color: functions.theme('tooltip-text-color', colors.surface());
       &::after {
         inset-inline-start: 50%;
 
-        margin-inline-start: lengths.margin(-4);
+        margin-inline-start: -4px;
       }
     }
 
     &-start {
       &::after {
-        inset-inline-start: lengths.inset(8);
+        inset-inline-start: 8px;
 
-        margin: lengths.margin(none);
+        margin: 0;
       }
     }
 
     &-end {
       &::after {
         inset-inline-start: initial;
-        inset-inline-end: lengths.inset(8);
+        inset-inline-end: 8px;
 
         margin: 0;
       }

packages/fuselage/src/components/Tooltip/Tooltip.tsx

@@ -4,6 +4,18 @@ import { useStyleSheet } from '../../hooks/useStyleSheet';
 import { Box } from '../Box';
 import tooltipStyleSheet from './Tooltip.styles.scss';
 
+const parsePlacement = (placement: string | null | undefined) => {
+  const [direction, position] = placement
+    ? placement.split('-')
+    : [false, false];
+
+  if (direction === 'right' || direction === 'left') {
+    return [direction, false];
+  }
+
+  return [direction, position];
+};
+
 type TooltipProps = ComponentProps<typeof Box> & {
   placement?:
     | 'top-start'
@@ -12,12 +24,6 @@ type TooltipProps = ComponentProps<typeof Box> & {
     | 'bottom-start'
     | 'bottom-middle'
     | 'bottom-end'
-    | 'left-start'
-    | 'left-middle'
-    | 'left-end'
-    | 'right-start'
-    | 'right-middle'
-    | 'right-end'
     | 'top'
     | 'left'
     | 'bottom'
@@ -32,9 +38,7 @@ const Tooltip = forwardRef(function Tooltip(
   useStyleSheet();
   useStyleSheet(tooltipStyleSheet);
 
-  const [direction, position] = placement
-    ? placement.split('-')
-    : [false, false];
+  const [direction, position] = parsePlacement(placement);
 
   return (
     <Box

packages/fuselage/tsconfig-bundle.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src"
+  },
+  "include": ["./src"],
+  "exclude": ["./**/*.stories.tsx"]
+}

packages/fuselage/webpack.config.js

@@ -36,7 +36,12 @@ module.exports = (env, { mode = 'production' }) => ({
       {
         test: /\.tsx?$/,
         exclude: /node_modules/,
-        use: 'ts-loader',
+        use: {
+          loader: 'ts-loader',
+          options: {
+            configFile: path.resolve(__dirname, './tsconfig-bundle.json'),
+          },
+        },
       },
       {
         test: /\.scss$/,

packages/onboarding-ui/.eslintrc.js

@@ -1,6 +1,9 @@
 module.exports = {
-  extends: '@rocket.chat/eslint-config-alt/typescript',
+  extends: '@rocket.chat/eslint-config-alt/react',
   env: {
     jest: true,
   },
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+  },
 };

packages/onboarding-ui/.lintstagedrc.json

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

packages/onboarding-ui/.loki/.gitignore

@@ -0,0 +1,2 @@
+current
+difference

packages/onboarding-ui/package.json

@@ -48,6 +48,7 @@
   },
   "devDependencies": {
     "@rocket.chat/eslint-config-alt": "^0.27.0",
+    "@rocket.chat/fuselage-polyfills": "^0.27.0",
     "@rocket.chat/fuselage-tokens": "^0.27.0",
     "@rocket.chat/prettier-config": "^0.27.0",
     "@storybook/addon-essentials": "^6.3.1",
@@ -75,25 +76,34 @@
   "dependencies": {
     "@rocket.chat/fuselage": "^0.27.0",
     "@rocket.chat/fuselage-hooks": "^0.27.0",
-    "@rocket.chat/fuselage-polyfills": "^0.27.0",
     "@rocket.chat/icons": "^0.27.0",
+    "@rocket.chat/styled": "workspace:packages/styled",
     "tslib": "^2.3.0"
   },
   "peerDependencies": {
+    "@rocket.chat/fuselage-polyfills": "^0.27.0",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   },
   "loki": {
     "configurations": {
-      "chrome.laptop": {
+      "desktop": {
+        "target": "chrome.docker",
+        "width": 1440,
+        "height": 896,
+        "deviceScaleFactor": 1,
+        "mobile": false,
+        "fitWindow": false
+      },
+      "tablet": {
         "target": "chrome.docker",
-        "width": 1366,
-        "height": 768,
+        "width": 768,
+        "height": 970,
         "deviceScaleFactor": 1,
         "mobile": false,
         "fitWindow": false
       },
-      "chrome.iphone7": {
+      "mobile": {
         "target": "chrome.docker",
         "preset": "iPhone 7"
       }

packages/onboarding-ui/src/common/BackgroundLayer.spec.tsx

@@ -0,0 +1,9 @@
+import ReactDOM from 'react-dom';
+
+import BackgroundLayer from './BackgroundLayer';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<BackgroundLayer />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});