Skip to content

Commit a8e53ca

Browse files
FadhlanRFadhlanR
committed
Merge branch 'main' into cs-7748-add-copy-from-seed-realm-checkbox
2 parents 90ce75e + 673efbc commit a8e53ca

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+3146
-2264
lines changed

‎.github/workflows/ci.yaml

+2-1
Original file line numberDiff line numberDiff line change
@@ -252,7 +252,8 @@ jobs:
252252
"loader-test.ts",
253253
"module-syntax-test.ts",
254254
"queue-test.ts",
255-
"realm-server-test.ts",
255+
"realm-endpoints-test.ts",
256+
"server-endpoints-test.ts",
256257
"virtual-network-test.ts",
257258
]
258259
steps:

‎README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -84,8 +84,8 @@ Instead of running `pnpm start:base`, you can alternatively use `pnpm start:all`
8484
| :4205 | `/test` realm for matrix client tests (playwright controlled) | 🚫 | 🚫 |
8585
| :4210 | Development Worker Manager (spins up 1 worker by default) | ✅ | 🚫 |
8686
| :4211 | Test Worker Manager (spins up 1 worker by default) | ✅ | 🚫 |
87-
| :4212 | Test Worker Manager for matrix client tests (playwright controlled - 1 worker) | ✅ | 🚫 |
88-
| :4213 | Test Worker Manager for matrix client tests - base realm server (playwright controlled - 1 worker) | ✅ | 🚫 |
87+
| :4212 | Worker Manager for matrix client tests (playwright controlled - 1 worker) | ✅ | 🚫 |
88+
| :4213 | Worker Manager for matrix client tests - base realm server (playwright controlled - 1 worker) | ✅ | 🚫 |
8989
| :5001 | Mail user interface for viewing emails sent to local SMTP | ✅ | 🚫 |
9090
| :5435 | Postgres DB | ✅ | 🚫 |
9191
| :8008 | Matrix synapse server | ✅ | 🚫 |
@@ -223,7 +223,7 @@ There is a ember-freestyle component explorer available to assist with developme
223223

224224
1. `cd packages/boxel-ui/test-app`
225225
2. `pnpm start`
226-
3. Visit http://localhost:4210/ in your browser
226+
3. Visit http://localhost:4220/ in your browser
227227

228228
## Boxel Motion Demo App
229229

@@ -290,7 +290,7 @@ To run the `packages/realm-server/` workspace tests start:
290290
### Boxel UI
291291

292292
1. `cd packages/boxel-ui/test-app`
293-
2. `pnpm test` (or `pnpm start` and visit http://localhost:4210/tests to run tests in the browser)
293+
2. `pnpm test` (or `pnpm start` and visit http://localhost:4220/tests to run tests in the browser)
294294

295295
### Boxel Motion
296296

‎docs/realm.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ The capabilites of the realm are:
1616

1717
The entry point that serves these requests `handle` function in `realm.ts` file. Depending on the `Accept` header (the recognized ones are `application/vnd.card+json`, `application/vnd.card+source`, `application/vnd.api+json`, `text/event-stream`, `text/html`) and the HTTP verb (`GET`, `PATCH`, `POST`, `DELETE` ), it will perform one of the actions listed in the above list. The routing that depends on the MIME type and HTTP method is defined in `router.ts`. There's a special case of requesting the realm root (`/`) with `GET` and `application/vnd.card+json`. This looks for a card instance at `index.json` to return.
1818

19-
The different types of requests, together with its params, are documented in `realm-server-test.ts`.
19+
The different types of requests, together with its params, are documented in `realm-endpoints-test.ts`.
2020

2121
## Transpiling code
2222

‎packages/boxel-ui/addon/raw-icons/icon-trash.svg

+1-1
Loading

‎packages/boxel-ui/addon/src/components/color-palette/index.gts

+53-13
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@ import { on } from '@ember/modifier';
44
import { htmlSafe } from '@ember/template';
55
import Component from '@glimmer/component';
66

7+
import IconTrash from '../../icons/icon-trash.gts';
78
import ColorPicker from '../color-picker/index.gts';
9+
import IconButton from '../icon-button/index.gts';
810

911
interface Signature {
1012
Args: {
11-
color: string;
12-
onChange: (color: string) => void;
13+
color: string | null;
14+
onChange: (color: string | null) => void;
1315
};
1416
Element: HTMLDivElement;
1517
}
@@ -40,16 +42,31 @@ export default class ColorPalette extends Component<Signature> {
4042

4143
<template>
4244
<div class='color-palette-container' ...attributes>
43-
<div class='color-palette'>
44-
{{#each this.colors as |color|}}
45-
<button
46-
type='button'
47-
class='swatch {{if (eq color @color) "selected"}}'
48-
style={{htmlSafe (concat '--swatch-color: ' color)}}
49-
{{on 'click' (fn @onChange color)}}
50-
title={{color}}
51-
/>
52-
{{/each}}
45+
<div class='palette-group'>
46+
<div class='color-palette'>
47+
{{#each this.colors as |color|}}
48+
<button
49+
type='button'
50+
class='swatch {{if (eq color @color) "selected"}}'
51+
style={{htmlSafe (concat '--swatch-color: ' color)}}
52+
{{on 'click' (fn @onChange color)}}
53+
title={{color}}
54+
/>
55+
{{/each}}
56+
</div>
57+
{{#if @color}}
58+
<div>
59+
<code class='selected-color'>{{@color}}</code>
60+
<IconButton
61+
@icon={{IconTrash}}
62+
@width='16px'
63+
@height='16px'
64+
class='remove'
65+
{{on 'click' (fn @onChange null)}}
66+
aria-label='Unset color'
67+
/>
68+
</div>
69+
{{/if}}
5370
</div>
5471

5572
<label class='color-picker-container'>
@@ -65,12 +82,25 @@ export default class ColorPalette extends Component<Signature> {
6582
}
6683
6784
.color-palette-container {
85+
--boxel-icon-button-width: var(--boxel-icon-sm);
86+
--boxel-icon-button-height: var(--boxel-icon-sm);
6887
display: flex;
6988
gap: var(--boxel-sp);
7089
align-items: flex-start;
7190
flex-direction: column;
7291
}
7392
93+
.palette-group {
94+
display: flex;
95+
gap: var(--boxel-sp) var(--boxel-sp-lg);
96+
align-items: center;
97+
flex-wrap: wrap;
98+
}
99+
100+
.selected-color {
101+
text-transform: uppercase;
102+
}
103+
74104
.color-picker-container {
75105
--swatch-size: 1.8rem;
76106
border: 1px solid var(--boxel-border-color);
@@ -100,7 +130,7 @@ export default class ColorPalette extends Component<Signature> {
100130
.swatch {
101131
width: var(--swatch-size);
102132
height: var(--swatch-size);
103-
border: 1px solid transparent;
133+
border: 2px solid transparent;
104134
border-radius: 50%;
105135
padding: 2px;
106136
cursor: pointer;
@@ -143,6 +173,16 @@ export default class ColorPalette extends Component<Signature> {
143173
border: 1px solid transparent;
144174
border-radius: 50%;
145175
}
176+
177+
.remove {
178+
vertical-align: text-bottom;
179+
margin-left: var(--boxel-sp-xxxs);
180+
}
181+
.remove:focus,
182+
.remove:hover {
183+
--icon-color: var(--boxel-red);
184+
outline: 0;
185+
}
146186
</style>
147187
</template>
148188
}

‎packages/boxel-ui/addon/src/components/color-palette/usage.gts

+2-3
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
66
import ColorPalette from './index.gts';
77

88
export default class ColorPaletteUsage extends Component {
9-
@tracked color = '#000000';
9+
@tracked color: string | null = null;
1010

11-
private handleColorChange = (newColor: string) => {
11+
private handleColorChange = (newColor: string | null) => {
1212
this.color = newColor;
1313
};
1414

@@ -31,7 +31,6 @@ export default class ColorPaletteUsage extends Component {
3131
@description='Currently selected color in hex format.'
3232
@value={{this.color}}
3333
@onInput={{fn (mut this.color)}}
34-
@defaultValue='#000000'
3534
/>
3635
<Args.Action
3736
@name='onChange'

‎packages/boxel-ui/addon/src/components/color-picker/index.gts

+5-9
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import Component from '@glimmer/component';
33

44
interface Signature {
55
Args: {
6-
color: string;
6+
color: string | null;
77
disabled?: boolean;
8-
onChange: (color: string) => void;
8+
onChange: (color: string | null) => void;
99
showHexString?: boolean;
1010
};
1111
Element: HTMLDivElement;
@@ -21,14 +21,14 @@ export default class ColorPicker extends Component<Signature> {
2121
<div class='color-picker' ...attributes>
2222
<input
2323
type='color'
24-
value={{@color}}
24+
value={{if @color @color '#ffffff'}}
2525
class='input'
2626
disabled={{@disabled}}
2727
aria-label='Choose color'
2828
{{on 'input' this.handleColorChange}}
2929
/>
3030
{{#if @showHexString}}
31-
<span class='hex-value'>{{@color}}</span>
31+
<code class='hex-value'>{{@color}}</code>
3232
{{/if}}
3333
</div>
3434

@@ -44,10 +44,8 @@ export default class ColorPicker extends Component<Signature> {
4444
width: var(--swatch-size);
4545
height: var(--swatch-size);
4646
padding: 0;
47-
border: none;
4847
cursor: pointer;
49-
background: transparent;
50-
border: 1px solid var(--boxel-200);
48+
border: var(--boxel-border);
5149
border-radius: 50%;
5250
}
5351
@@ -65,8 +63,6 @@ export default class ColorPicker extends Component<Signature> {
6563
}
6664
6765
.hex-value {
68-
font: var(--boxel-font);
69-
color: var(--boxel-dark);
7066
text-transform: uppercase;
7167
}
7268
</style>

‎packages/boxel-ui/addon/src/components/color-picker/usage.gts

+2-3
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
66
import ColorPicker from './index.gts';
77

88
export default class ColorPickerUsage extends Component {
9-
@tracked color = '#ff0000';
9+
@tracked color: string | null = null;
1010
@tracked disabled = false;
1111
@tracked showHexString = true;
1212

13-
private onChange = (newColor: string) => {
13+
private onChange = (newColor: string | null) => {
1414
this.color = newColor;
1515
};
1616

@@ -35,7 +35,6 @@ export default class ColorPickerUsage extends Component {
3535
@description='Hex color value.'
3636
@value={{this.color}}
3737
@onInput={{fn (mut this.color)}}
38-
@defaultValue='#ff0000'
3938
/>
4039
<Args.Action
4140
@name='onChange'

‎packages/boxel-ui/addon/src/components/icon-button/index.gts

+1
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ class IconButton extends Component<Signature> {
5858
padding: 0;
5959
background: var(--boxel-icon-button-background, none);
6060
border: 1px solid transparent;
61+
color: var(--boxel-icon-button-color, currentColor);
6162
z-index: 0;
6263
overflow: hidden;
6364
}

‎packages/boxel-ui/addon/src/helpers/color-tools.ts

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ type RGB = { r: number; g: number; b: number };
33

44
// contrast ratio should be at least 4.5 for regular sized text based on WCAG guidelines
55
export const targetContrast = 4.5;
6+
export const targetContrastAAA = 7;
67

78
export function rgbToHex({ r, g, b }: RGB): string {
89
return (

‎packages/boxel-ui/addon/src/helpers/contrast-color.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {
33
calculateLuminance,
44
hexToRgb,
55
targetContrast,
6+
targetContrastAAA,
67
} from './color-tools.ts';
78

89
/*
@@ -16,6 +17,7 @@ export function getContrastColor(
1617
value: string | undefined,
1718
darkColor = 'var(--boxel-dark, #000000)',
1819
lightColor = 'var(--boxel-light, #ffffff)',
20+
opts?: { isSmallText: true },
1921
) {
2022
if (!value) {
2123
return;
@@ -25,5 +27,6 @@ export function getContrastColor(
2527
return;
2628
}
2729
let ratio = calculateContrast(calculateLuminance(rgb), 0); // luminocity of black is 0
28-
return ratio >= targetContrast ? darkColor : lightColor;
30+
let contrastLevel = opts?.isSmallText ? targetContrastAAA : targetContrast;
31+
return ratio >= contrastLevel ? darkColor : lightColor;
2932
}

‎packages/boxel-ui/addon/src/icons/icon-trash.gts

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const IconComponent: TemplateOnlyComponent<Signature> = <template>
1010
...attributes
1111
><g
1212
fill='none'
13-
stroke='var(--icon-color, #000)'
13+
stroke='var(--icon-color, currentColor)'
1414
stroke-linecap='round'
1515
stroke-linejoin='round'
1616
stroke-width='var(--icon-stroke-width, 1px)'

‎packages/boxel-ui/test-app/.ember-cli.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ module.exports = {
1414
1515
Setting `disableAnalytics` to true will prevent any data from being sent.
1616
*/
17-
port: 4210,
17+
port: 4220,
1818
testPort: 7356,
1919
disableAnalytics: false,
2020
};

‎packages/experiments-realm/BlogCategory/5c529dbb-bc16-41ee-9c31-a2b28e07b79d.json

+2-3
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@
55
"longName": "Movie Review",
66
"shortName": "Movies",
77
"slug": "movies",
8-
"backgroundColor": "#fff500",
9-
"textColor": null,
8+
"pillColor": "#fff500",
109
"description": null,
1110
"title": "Movie Review",
1211
"thumbnailURL": null
@@ -25,4 +24,4 @@
2524
}
2625
}
2726
}
28-
}
27+
}

‎packages/experiments-realm/BlogCategory/a4ee8a18-182b-47ff-b557-ef2e529c97ec.json

+2-3
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@
55
"longName": "TV Series",
66
"shortName": "TV",
77
"slug": "tv-series",
8-
"backgroundColor": "#fff500",
9-
"textColor": null,
8+
"pillColor": "#fff500",
109
"description": null,
1110
"title": "TV Series",
1211
"thumbnailURL": null
@@ -25,4 +24,4 @@
2524
}
2625
}
2726
}
28-
}
27+
}

‎packages/experiments-realm/BlogCategory/crypto.json

+2-7
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,7 @@
55
"longName": "Cryptocurrencies",
66
"shortName": "Crypto",
77
"slug": "crypto",
8-
"backgroundColor": {
9-
"hexValue": "#FA2200"
10-
},
11-
"textColor": {
12-
"hexValue": "#ffffff"
13-
},
8+
"pillColor": "#FA2200",
149
"description": "News about cryptocurrencies, price predictions, charts and everything about Satoshi Nakamoto",
1510
"title": "Cryptocurrency",
1611
"thumbnailURL": null
@@ -29,4 +24,4 @@
2924
}
3025
}
3126
}
32-
}
27+
}

‎packages/experiments-realm/BlogCategory/home-decor.json

+1-6
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,7 @@
55
"longName": "Home decoration & interior design",
66
"shortName": "Home Decor",
77
"slug": "home",
8-
"backgroundColor": {
9-
"hexValue": "#FCF8A6"
10-
},
11-
"textColor": {
12-
"hexValue": "#FA2200"
13-
},
8+
"pillColor": "#FCF8A6",
149
"description": "Articles about the aesthetic side of home building and renovation",
1510
"title": "Home decoration & interior design",
1611
"thumbnailURL": null

‎packages/experiments-realm/BlogCategory/productivity.json

+1-6
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,7 @@
55
"longName": "Productivity",
66
"shortName": "Productivity",
77
"slug": "productivity",
8-
"backgroundColor": {
9-
"color": "#9D00FF"
10-
},
11-
"textColor": {
12-
"color": "#ffffff"
13-
},
8+
"pillColor": "#9D00FF",
149
"description": "Tips and tricks for better organization and effectiveness at work",
1510
"title": "Productivity",
1611
"thumbnailURL": null

0 commit comments

Comments
 (0)