merged master conflicts

.eslintrc.js

@@ -10,6 +10,7 @@ module.exports = {
     'react/display-name': 'off',
     'react/react-in-jsx-scope': 'off',
     'react/no-unescaped-entities': 'off',
+    'import/no-duplicates': 'error',
     'unused-imports/no-unused-imports': 'error',
     'unused-imports/no-unused-vars': [
       'error',

.storybook/main.js

@@ -4,6 +4,7 @@ module.exports = {
   webpackFinal: async (config) => {
     const modules = [
       path.resolve(__dirname, '../app/src'),
+      path.resolve(__dirname, '../shared/src'),
       path.resolve(__dirname, '../lib/conduit/src'),
       path.resolve(__dirname, '../lib/design-system/src'),
       path.resolve(__dirname, '../lib/presence/src'),
@@ -17,6 +18,7 @@ module.exports = {
 
   stories: [
     "../app/src/**/*.stories.@(js|jsx|ts|tsx)",
+    "../shared/src/**/*.stories.@(js|jsx|ts|tsx)",
     "../lib/conduit/src/**/*.stories.@(js|jsx|ts|tsx)",
     "../lib/design-system/src/**/*.stories.@(js|jsx|ts|tsx)",
     "../lib/presence/src/**/*.stories.@(js|jsx|ts|tsx)",

.storybook/mock-themes/dark.css

@@ -4,35 +4,34 @@
   --transition: all 0.25s ease;
   --transition-slow: all 0.5s ease;
   --rlm-font: 'Rubik', sans-serif;
-  --rlm-base-color: #25343f;
-  --rlm-accent-color: #4e9efd;
-  --rlm-input-color: #1a252e;
-  --rlm-border-color: rgba(0, 0, 0, 0.2);
-  --rlm-window-color: #212d36;
-  --rlm-dock-color: #2a384375;
-  --rlm-card-color: #2a3843;
-  --rlm-theme-mode: dark;
-  --rlm-text-color: #ffffff;
-  --rlm-icon-color: #a2a8ac;
-  --rlm-intent-alert-color: #ff6240;
-  --rlm-intent-caution-color: #ffbc32;
-  --rlm-intent-success-color: #0fc383;
   --rlm-border-radius-4: 4px;
   --rlm-border-radius-6: 6px;
   --rlm-border-radius-9: 9px;
   --rlm-border-radius-12: 12px;
-  --rlm-border-radius-16: 16px;
+  --rlm-border-radius-12: 16px;
   --rlm-box-shadow-1: 0px 0px 4px rgba(0, 0, 0, 0.06);
   --rlm-box-shadow-2: 0px 0px 9px rgba(0, 0, 0, 0.12);
   --rlm-box-shadow-3: 0px 0px 9px rgba(0, 0, 0, 0.18);
   --rlm-box-shadow-lifted: 0px 0px 9px rgba(0, 0, 0, 0.24);
-  --rlm-overlay-hover: rgba(0, 0, 0, 0.05);
-  --rlm-overlay-active: rgba(0, 0, 0, 0.09);
+
+  --rlm-base-rgba: 37, 52, 63;
+  --rlm-accent-rgba: 78, 158, 253;
+  --rlm-input-rgba: 26, 37, 46;
+  --rlm-border-rgba: 0, 0, 0, 0.2;
+  --rlm-window-rgba: 33, 45, 54;
+  --rlm-dock-rgba: 42, 56, 67, 0.45;
+  --rlm-card-rgba: 42, 56, 67;
+  --rlm-text-rgba: 255, 255, 255;
+  --rlm-icon-rgba: 162, 168, 172;
+  --rlm-intent-alert-rgba: 255, 98, 64;
+  --rlm-intent-caution-rgba: 255, 188, 50;
+  --rlm-intent-success-rgba: 15, 195, 131;
+  --rlm-overlay-hover-rgba: 255, 255, 255, 0.05;
+  --rlm-overlay-active-rgba: 255, 255, 255, 0.09;
 }
 
 html {
-  background: var(--rlm-window-color);
-  caret-color: var(--rlm-accent-color);
+  background: rgba(var(--rlm-window-hex-rgba));
 }
 
 * {

.storybook/mock-themes/light.css

@@ -4,19 +4,6 @@
   --transition: all 0.25s ease;
   --transition-slow: all 0.5s ease;
   --rlm-font: 'Rubik', sans-serif;
-  --rlm-base-color: #c4c3bf;
-  --rlm-accent-color: #4e9efd;
-  --rlm-input-color: #ffffff;
-  --rlm-border-color: #ddddda;
-  --rlm-window-color: #f5f5f4;
-  --rlm-dock-color: #f5f5f475;
-  --rlm-card-color: #ffffff;
-  --rlm-theme-mode: light;
-  --rlm-text-color: #2a2927;
-  --rlm-icon-color: #333333;
-  --rlm-intent-alert-color: #ff6240;
-  --rlm-intent-caution-color: #ffbc32;
-  --rlm-intent-success-color: #0fc383;
   --rlm-border-radius-4: 4px;
   --rlm-border-radius-6: 6px;
   --rlm-border-radius-9: 9px;
@@ -26,12 +13,25 @@
   --rlm-box-shadow-2: 0px 0px 9px rgba(0, 0, 0, 0.12);
   --rlm-box-shadow-3: 0px 0px 9px rgba(0, 0, 0, 0.18);
   --rlm-box-shadow-lifted: 0px 0px 9px rgba(0, 0, 0, 0.24);
-  --rlm-overlay-hover: rgba(0, 0, 0, 0.05);
-  --rlm-overlay-active: rgba(0, 0, 0, 0.09);
+
+  --rlm-base-rgba: 196, 195, 191;
+  --rlm-accent-rgba: 78, 158, 253;
+  --rlm-input-rgba: 255, 255, 255;
+  --rlm-border-rgba: 221, 221, 218;
+  --rlm-window-rgba: 245, 245, 244;
+  --rlm-dock-rgba: 245, 245, 244, 0.45;
+  --rlm-card-rgba: 245, 245, 244;
+  --rlm-text-rgba: 42, 41, 39;
+  --rlm-icon-rgba: 51, 51, 51;
+  --rlm-intent-alert-rgba: 255, 98, 64;
+  --rlm-intent-caution-rgba: 255, 188, 50;
+  --rlm-intent-success-rgba: 15, 195, 131;
+  --rlm-overlay-hover-rgba: 0, 0, 0, 0.05;
+  --rlm-overlay-active-rgba: 0, 0, 0, 0.09;
 }
 
 html {
-  background: var(--rlm-window-color);
+  background: rgba(var(--rlm-window-hex-rgba));
 }
 
 * {

README.md

@@ -2,8 +2,21 @@
 
 A desktop environment for Urbit.
 
+## Directory structure
+
 We use yarn workspace to manage the multiple modules.
 
+```
+- app/ - the Realm desktop client
+- onboarding/ – holium.network
+- shared/ - shared code in the monorepo
+- lib/ - outwards facing packages that are published to npmjs.com
+  - conduit/ – SSE event handler
+  - design-system/ – component library for Realm apps
+  - presence/ – cursor streaming for Realm apps
+  - room/ – data streaming for Realm apps
+```
+
 ## Getting started
 
 We use yarn workspaces to build all packages for Realm.

app/src/main/helpers/mouse.ts

@@ -1,6 +1,6 @@
 import { BrowserWindow, ipcMain, screen } from 'electron';
 import { MouseState, PresenceArg } from '@holium/realm-presence';
-import { Position } from '../../os/types';
+import { Position } from '@holium/design-system';
 import { denormalizePosition } from '../../os/services/shell/lib/window-manager';
 
 const getWebContentsPosition = (mainWindow: BrowserWindow) => {

app/src/main/preload.multiplayer.ts

@@ -1,6 +1,6 @@
 import { ipcRenderer } from 'electron';
 import { PresenceArg, MouseState } from '@holium/realm-presence';
-import { Position } from '../os/types';
+import { Position } from '@holium/design-system';
 
 export const multiplayerPreload = {
   /* Senders */

app/src/main/preload.ts

@@ -1,7 +1,8 @@
 import { contextBridge, ipcRenderer } from 'electron';
 import { MouseState } from '@holium/realm-presence';
 import { osPreload } from '../os/preload';
-import { Position, MediaAccess, MediaAccessStatus } from '../os/types';
+import { MediaAccess, MediaAccessStatus } from '../os/types';
+import { Position } from '@holium/design-system';
 import { multiplayerPreload } from './preload.multiplayer';
 import './helpers/mouseListener';
 import './helpers/keyListener';

app/src/os/lib/color.ts

@@ -62,16 +62,38 @@ export function cleanNounColor(ux: string) {
 }
 
 export function hexToRgb(hex: string) {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result
-    ? {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16),
-      }
-    : null;
+  if (hex.length === 4) {
+    const r = hex.substring(1, 2);
+    const g = hex.substring(2, 3);
+    const b = hex.substring(3, 4);
+    return {
+      r: parseInt(`${r}${r}`, 16),
+      g: parseInt(`${g}${g}`, 16),
+      b: parseInt(`${b}${b}`, 16),
+    };
+  } else if (hex.length === 7) {
+    const r = hex.substring(1, 3);
+    const g = hex.substring(3, 5);
+    const b = hex.substring(5, 7);
+    return {
+      r: parseInt(r, 16),
+      g: parseInt(g, 16),
+      b: parseInt(b, 16),
+    };
+  }
+
+  return null;
 }
 
+export const rgbToHex = (r: number, g: number, b: number) => {
+  const componentToHex = (c: number) => {
+    var hex = c.toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+  };
+
+  return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
+};
+
 export function rgbToString(rgb: { r: number; g: number; b: number } | null) {
   return rgb ? `${rgb.r}, ${rgb.g}, ${rgb.b}` : rgb;
 }
@@ -82,6 +104,26 @@ export function rgbToStringFull(
   return rgb ? `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})` : 'rgb(0, 0, 0)';
 }
 
+/* Converts to 'r,g,b,a' string. */
+export const toRgbaString = (color: string): string => {
+  const isHex = color.startsWith('#');
+  const isRgb = color.startsWith('rgb');
+  const isRgba = color.startsWith('rgba');
+
+  if (isHex) {
+    const rgbaString = hexToRgb(color);
+    return rgbToString(rgbaString) as string;
+  } else if (isRgba) {
+    const rgbaString = color.replace('rgba(', '').replace(')', '');
+    return rgbaString;
+  } else if (isRgb) {
+    const rgbaString = color.replace('rgb(', '').replace(')', '');
+    return rgbaString;
+  } else {
+    return color;
+  }
+};
+
 // ---------
 
 // function dropWhile<T>(arr: T[], pred: (x: T) => boolean): T[] {

app/src/os/services/shell/desktop.model.ts

@@ -1,5 +1,5 @@
 import { types, applySnapshot, Instance, SnapshotIn } from 'mobx-state-tree';
-import { Dimensions } from 'os/types';
+import { Dimensions } from '@holium/design-system';
 import { AppType, Glob } from '../spaces/models/bazaar';
 import { toJS } from 'mobx';
 import {

app/src/os/services/shell/desktop.service.ts

@@ -12,7 +12,7 @@ import {
 import { AppType } from '../spaces/models/bazaar';
 import { IpcRendererEvent } from 'electron/renderer';
 import { toJS } from 'mobx';
-import { Bounds } from 'os/types';
+import { Bounds } from '@holium/design-system';
 
 import { getReleaseChannel, setReleaseChannel } from '../../lib/settings';
 
@@ -33,6 +33,10 @@ import { getReleaseChannel, setReleaseChannel } from '../../lib/settings';
  *      - google-font: "philosopher"
  */
 export class DesktopService extends BaseService {
+  public isHomePaneOpen = () => {
+    return this.state.homePaneOpen;
+  };
+
   private readonly state: DesktopStoreType; // for state management
   handlers: Record<string, (...args: any[]) => void> = {
     'realm.desktop.change-wallpaper': this.changeWallpaper,

app/src/os/services/shell/lib/dimensions.ts

@@ -1,4 +1,4 @@
-import { Dimensions } from 'os/types';
+import { Dimensions } from '@holium/design-system';
 import { normalizeDimensions } from './window-manager';
 
 const DEFAULT_APP_WINDOW_DIMENSIONS: Record<string, Dimensions> = {

app/src/os/services/shell/lib/window-manager.ts

@@ -1,5 +1,5 @@
 import { AppType, RealmConfigType } from 'os/services/spaces/models/bazaar';
-import { Dimensions, Position, Bounds } from 'os/types';
+import { Dimensions, Position, Bounds } from '@holium/design-system';
 import { getDefaultAppDimensions } from './dimensions';
 
 /**

app/src/os/services/shell/shell.service.ts

@@ -1,6 +1,5 @@
 import { ipcMain, ipcRenderer } from 'electron';
 import { onPatch, getSnapshot } from 'mobx-state-tree';
-
 import { Realm } from '../../index';
 import { BaseService } from '../base.service';
 import { ShellStoreType, ShellStore } from './shell.model';
@@ -59,7 +58,6 @@ export class ShellService extends BaseService {
   constructor(core: Realm, options: any = {}) {
     super(core, options);
     this.state = ShellStore.create({});
-
     // this.db = new Store({
     //   name: `realm.shell`, // TODO add windowId here
     //   accessPropertiesByDotNotation: true,
@@ -128,6 +126,12 @@ export class ShellService extends BaseService {
   }
 
   setBlur(_event: any, blurred: boolean) {
+    // setting blur to false when Home pane is open should be ignored.
+    if (!blurred) {
+      if (this.core.services.desktop.isHomePaneOpen()) {
+        return;
+      }
+    }
     this.state?.setIsBlurred(blurred);
   }
 

app/src/os/types.ts

@@ -76,12 +76,6 @@ export interface Membership {
   [path: SpacePath]: Members;
 }
 
-export type Position = { x: number; y: number };
-
-export type Dimensions = { width: number; height: number };
-
-export type Bounds = Position & Dimensions;
-
 export type RealmInstallationStatus = {
   result: 'success' | 'partial' | 'error';
   desks: string[] | undefined;