Skip to content

Commit c8ee0ce

Browse files
dylanvorsterdylanvorster
authored
Merge pull request #82 from journeyapps-labs/improvements_march11
Lots of improvements around preserveSymlinks, themes and tables
2 parents cbe0c73 + 843f74d commit c8ee0ce

30 files changed

+443
-116
lines changed

‎.changeset/ten-maps-hide.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
'@journeyapps-labs/lib-reactor-builder': patch
3+
'@journeyapps-labs/reactor-mod-editor': patch
4+
'@journeyapps-labs/reactor-mod': patch
5+
---
6+
7+
Remove the custom symlink-preservation config from the TypeScript and webpack builds, and tighten exported typing for composite compilation.
8+
9+
Improve built-in editor theme selection and active-line colors, add a tables playground demo, and refine table theming/rendering with explicit row, group, border, and pill styling tokens across the built-in Reactor themes.

‎demo/module-playground/src/ReactorPlaygroundModule.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { PlaygroundFormsPanelWidget } from './panels/PlaygroundFormsPanelWidget'
88
import { PlaygroundCardsPanelWidget } from './panels/PlaygroundCardsPanelWidget';
99
import { PlaygroundButtonsPanelWidget } from './panels/PlaygroundButtonsPanelWidget';
1010
import { PlaygroundEditorsPanelWidget } from './panels/PlaygroundEditorsPanelWidget';
11+
import { PlaygroundTablesPanelWidget } from './panels/PlaygroundTablesPanelWidget';
1112
import { PlaygroundTreeSearchPanelWidget } from './panels/tree/PlaygroundTreeSearchPanelWidget';
1213
import { PlaygroundDragDropPanelWidget } from './panels/PlaygroundDragDropPanelWidget';
1314

@@ -69,6 +70,14 @@ export class ReactorPlaygroundModule extends AbstractReactorModule {
6970
widget: PlaygroundEditorsPanelWidget
7071
})
7172
);
73+
workspaceStore.registerFactory(
74+
new PlaygroundPanelFactory({
75+
type: 'playground.tables',
76+
name: 'Tables',
77+
icon: 'table',
78+
widget: PlaygroundTablesPanelWidget
79+
})
80+
);
7281
workspaceStore.registerFactory(
7382
new PlaygroundPanelFactory({
7483
type: 'playground.drag-drop',

‎demo/module-playground/src/panels/PlaygroundTablesPanelWidget.tsx‎

Lines changed: 245 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,245 @@
1+
import * as React from 'react';
2+
import { observer } from 'mobx-react';
3+
import {
4+
PillWidget,
5+
ReactorPanelModel,
6+
SearchableTableWidget,
7+
TablePillWidget,
8+
TableRow,
9+
styled
10+
} from '@journeyapps-labs/reactor-mod';
11+
12+
export interface PlaygroundTablesPanelWidgetProps {
13+
model: ReactorPanelModel;
14+
}
15+
16+
enum TableColumns {
17+
NAME = 'name',
18+
STATUS = 'status',
19+
OWNER = 'owner',
20+
TAGS = 'tags',
21+
LATENCY = 'latency'
22+
}
23+
24+
interface DemoTableRow extends TableRow {
25+
cells: {
26+
[TableColumns.NAME]: string;
27+
[TableColumns.STATUS]: {
28+
label: string;
29+
color: string;
30+
meta?: string;
31+
};
32+
[TableColumns.OWNER]: string;
33+
[TableColumns.TAGS]: string[];
34+
[TableColumns.LATENCY]: string;
35+
};
36+
}
37+
38+
const TABLE_ROWS: DemoTableRow[] = [
39+
{
40+
key: 'core-builds',
41+
groupKey: 'Core services',
42+
cells: {
43+
[TableColumns.NAME]: 'Build queue',
44+
[TableColumns.STATUS]: { label: 'Stable', color: '#7fd29a', meta: '12 jobs' },
45+
[TableColumns.OWNER]: 'Platform',
46+
[TableColumns.TAGS]: ['worker', 'queue', 'prod'],
47+
[TableColumns.LATENCY]: '42 ms'
48+
}
49+
},
50+
{
51+
key: 'core-auth',
52+
groupKey: 'Core services',
53+
cells: {
54+
[TableColumns.NAME]: 'Auth gateway',
55+
[TableColumns.STATUS]: { label: 'Watching', color: '#f0c36a', meta: '2 retries' },
56+
[TableColumns.OWNER]: 'Security',
57+
[TableColumns.TAGS]: ['edge', 'jwt'],
58+
[TableColumns.LATENCY]: '83 ms'
59+
}
60+
},
61+
{
62+
key: 'core-events',
63+
groupKey: 'Core services',
64+
cells: {
65+
[TableColumns.NAME]: 'Event relay',
66+
[TableColumns.STATUS]: { label: 'Stable', color: '#7fd29a', meta: 'live' },
67+
[TableColumns.OWNER]: 'Platform',
68+
[TableColumns.TAGS]: ['stream', 'sync'],
69+
[TableColumns.LATENCY]: '57 ms'
70+
}
71+
},
72+
{
73+
key: 'core-audit',
74+
groupKey: 'Core services',
75+
cells: {
76+
[TableColumns.NAME]: 'Audit trail',
77+
[TableColumns.STATUS]: { label: 'Queued', color: '#d4a95f', meta: 'backfill' },
78+
[TableColumns.OWNER]: 'Security',
79+
[TableColumns.TAGS]: ['logs', 'retention'],
80+
[TableColumns.LATENCY]: '118 ms'
81+
}
82+
},
83+
{
84+
key: 'ux-table',
85+
groupKey: 'UI surfaces',
86+
cells: {
87+
[TableColumns.NAME]: 'Table tokens',
88+
[TableColumns.STATUS]: { label: 'Needs review', color: '#7aa6c2', meta: 'reactor' },
89+
[TableColumns.OWNER]: 'Design systems',
90+
[TableColumns.TAGS]: ['theme', 'rows', 'hover'],
91+
[TableColumns.LATENCY]: 'n/a'
92+
}
93+
},
94+
{
95+
key: 'ux-editor',
96+
groupKey: 'UI surfaces',
97+
cells: {
98+
[TableColumns.NAME]: 'Editor theme pass',
99+
[TableColumns.STATUS]: { label: 'Complete', color: '#5cc9a7', meta: '8 themes' },
100+
[TableColumns.OWNER]: 'Frontend',
101+
[TableColumns.TAGS]: ['editor', 'selection'],
102+
[TableColumns.LATENCY]: 'n/a'
103+
}
104+
},
105+
{
106+
key: 'ux-panels',
107+
groupKey: 'UI surfaces',
108+
cells: {
109+
[TableColumns.NAME]: 'Panel chrome',
110+
[TableColumns.STATUS]: { label: 'Exploring', color: '#7aa6c2', meta: 'tokens' },
111+
[TableColumns.OWNER]: 'Frontend',
112+
[TableColumns.TAGS]: ['tabs', 'headers'],
113+
[TableColumns.LATENCY]: 'n/a'
114+
}
115+
},
116+
{
117+
key: 'ux-status',
118+
groupKey: 'UI surfaces',
119+
cells: {
120+
[TableColumns.NAME]: 'Status surfaces',
121+
[TableColumns.STATUS]: { label: 'Complete', color: '#5cc9a7', meta: 'qa pass' },
122+
[TableColumns.OWNER]: 'Design systems',
123+
[TableColumns.TAGS]: ['pills', 'cards'],
124+
[TableColumns.LATENCY]: 'n/a'
125+
}
126+
},
127+
{
128+
key: 'ops-cache',
129+
groupKey: 'Operations',
130+
cells: {
131+
[TableColumns.NAME]: 'Cache warmers',
132+
[TableColumns.STATUS]: { label: 'Degraded', color: '#d98686', meta: '1 region' },
133+
[TableColumns.OWNER]: 'SRE',
134+
[TableColumns.TAGS]: ['jobs', 'background'],
135+
[TableColumns.LATENCY]: '137 ms'
136+
}
137+
},
138+
{
139+
key: 'ops-backups',
140+
groupKey: 'Operations',
141+
cells: {
142+
[TableColumns.NAME]: 'Snapshot backups',
143+
[TableColumns.STATUS]: { label: 'Stable', color: '#7fd29a', meta: 'nightly' },
144+
[TableColumns.OWNER]: 'SRE',
145+
[TableColumns.TAGS]: ['storage', 'recovery'],
146+
[TableColumns.LATENCY]: '91 ms'
147+
}
148+
},
149+
{
150+
key: 'ops-regions',
151+
groupKey: 'Operations',
152+
cells: {
153+
[TableColumns.NAME]: 'Regional failover',
154+
[TableColumns.STATUS]: { label: 'Watching', color: '#f0c36a', meta: 'eu-west' },
155+
[TableColumns.OWNER]: 'Infra',
156+
[TableColumns.TAGS]: ['routing', 'health'],
157+
[TableColumns.LATENCY]: '104 ms'
158+
}
159+
},
160+
{
161+
key: 'ops-alerts',
162+
groupKey: 'Operations',
163+
cells: {
164+
[TableColumns.NAME]: 'Alert fanout',
165+
[TableColumns.STATUS]: { label: 'Degraded', color: '#d98686', meta: 'slack' },
166+
[TableColumns.OWNER]: 'Infra',
167+
[TableColumns.TAGS]: ['pager', 'notifications'],
168+
[TableColumns.LATENCY]: '166 ms'
169+
}
170+
}
171+
];
172+
173+
export const PlaygroundTablesPanelWidget: React.FC<PlaygroundTablesPanelWidgetProps> = observer(() => {
174+
return (
175+
<S.Container>
176+
<SearchableTableWidget<DemoTableRow>
177+
columns={[
178+
{
179+
key: TableColumns.NAME,
180+
display: 'Name',
181+
accessorSearch: (cell) => cell
182+
},
183+
{
184+
key: TableColumns.STATUS,
185+
display: 'Status',
186+
noWrap: true,
187+
accessor: (cell: DemoTableRow['cells'][TableColumns.STATUS]) => (
188+
<PillWidget label={cell.label} color={cell.color} meta={cell.meta ? { label: cell.meta } : null} />
189+
),
190+
accessorSearch: (cell) => cell.label
191+
},
192+
{
193+
key: TableColumns.OWNER,
194+
display: 'Owner',
195+
accessorSearch: (cell) => cell
196+
},
197+
{
198+
key: TableColumns.TAGS,
199+
display: 'Tags',
200+
accessor: (cell: string[]) => (
201+
<S.Tags>
202+
{cell.map((tag, index) => (
203+
<TablePillWidget key={`${tag}-${index}`} special={index === 0}>
204+
{tag}
205+
</TablePillWidget>
206+
))}
207+
</S.Tags>
208+
),
209+
accessorSearch: (cell) => cell.join(' ')
210+
},
211+
{
212+
key: TableColumns.LATENCY,
213+
display: 'Latency',
214+
noWrap: true,
215+
shrink: true,
216+
accessorSearch: (cell) => cell
217+
}
218+
]}
219+
rows={TABLE_ROWS}
220+
renderGroup={(event) => ({
221+
defaultCollapsed: false,
222+
children: `${event.groupKey} (${event.rows.length})`
223+
})}
224+
emptyLabel="No demo rows match the current search"
225+
/>
226+
</S.Container>
227+
);
228+
});
229+
230+
namespace S {
231+
export const Container = styled.div`
232+
padding: 12px;
233+
display: flex;
234+
flex-direction: column;
235+
row-gap: 12px;
236+
min-height: 100%;
237+
box-sizing: border-box;
238+
`;
239+
240+
export const Tags = styled.div`
241+
display: flex;
242+
gap: 6px;
243+
flex-wrap: wrap;
244+
`;
245+
}

‎demo/module-playground/src/setupWorkspaces.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export const setupWorkspaces = () => {
1717
.addModel(new PlaygroundPanelModel('playground.cards'))
1818
.addModel(new PlaygroundPanelModel('playground.buttons'))
1919
.addModel(new PlaygroundPanelModel('playground.editors'))
20+
.addModel(new PlaygroundPanelModel('playground.tables'))
2021
.addModel(new PlaygroundPanelModel('playground.drag-drop'))
2122
);
2223

‎libs/lib-reactor-builder/src/webpack.config.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,11 +63,9 @@ export const generateCommonWebpack = (dir: string): Configuration => {
6363
ignored: ['**/*.ts', '**/node_modules/**', '**/dist-module/**']
6464
},
6565
resolveLoader: {
66-
modules: [path.join(__dirname, '../node_modules'), 'node_modules'],
67-
symlinks: true
66+
modules: [path.join(__dirname, '../node_modules'), 'node_modules']
6867
},
6968
resolve: {
70-
symlinks: true,
7169
extensions: ['.json', '.js', '.jsx'],
7270
alias: {
7371
'process/browser': require.resolve('process/browser')

‎modules/module-editor/media/themes/ayu-light.json5‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -111,23 +111,23 @@
111111
"editorGutter.addedBackground": "#8ce99a",
112112
"editorGutter.deletedBackground": "#ff4000",
113113
"editorGutter.modifiedBackground": "#e9a149",
114-
"editor.selectionBackground": "#b4adeb77",
115-
"editor.selectionHighlightBackground": "#14a5ff33",
114+
"editor.selectionBackground": "#8e80ff66",
115+
"editor.selectionHighlightBackground": "#7060eb3d",
116116
"editor.selectionHighlightBorder": "#14a5ff00",
117-
"editor.inactiveSelectionBackground": "#b4adeb55",
118-
"editor.wordHighlightStrongBackground": "#b5890027",
117+
"editor.inactiveSelectionBackground": "#8e80ff40",
118+
"editor.wordHighlightStrongBackground": "#b5890038",
119119
"editor.wordHighlightStrongBorder": "#b5890000",
120-
"editor.wordHighlightBackground": "#e9a14922",
120+
"editor.wordHighlightBackground": "#e9a14938",
121121
"editor.wordHighlightBorder": "#e9a14900",
122122
"editor.findMatchBackground": "#8ce99a60",
123123
"editor.findMatchBorder": "#8ce99a00",
124124
"editor.findMatchHighlightBackground": "#148f9f33",
125125
"editor.findMatchHighlightBorder": "#148f9f00",
126-
"editor.findRangeHighlightBackground": "#99e62a55",
126+
"editor.findRangeHighlightBackground": "#8ce99a66",
127127
"editor.findRangeHighlightBorder": "#58CC6D00",
128128
"editor.hoverHighlightBackground": "#7060eb3f",
129-
"editor.lineHighlightBackground": "#d5d2ef99",
130-
"editor.lineHighlightBorder": "#d5d2ef00",
129+
"editor.lineHighlightBackground": "#d5d2efcc",
130+
"editor.lineHighlightBorder": "#00000000",
131131
"editor.rangeHighlightBackground": "#f1e9d5a1",
132132
"editorLink.activeForeground": "#14a5ff",
133133
"editorWhitespace.foreground": "#c3c1d7bb",
@@ -1106,4 +1106,4 @@
11061106
}
11071107
}
11081108
]
1109-
}
1109+
}

‎modules/module-editor/media/themes/ayu-mirage.json5‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -97,21 +97,22 @@
9797
"editorLineNumber.foreground": "#6c738099",
9898
"editorLineNumber.activeForeground": "#6c7380e6",
9999
"editorCursor.foreground": "#e6b450",
100-
"editor.inactiveSelectionBackground": "#409fff21",
101-
"editor.selectionBackground": "#409fff4d",
102-
"editor.selectionHighlightBackground": "#7fd96226",
103-
"editor.selectionHighlightBorder": "#7fd96200",
104-
"editor.wordHighlightBackground": "#73b8ff14",
105-
"editor.wordHighlightStrongBackground": "#7fd96214",
106-
"editor.wordHighlightBorder": "#73b8ff80",
100+
"editor.inactiveSelectionBackground": "#e6b4502b",
101+
"editor.selectionBackground": "#e6b4504d",
102+
"editor.selectionHighlightBackground": "#e6b45033",
103+
"editor.selectionHighlightBorder": "#e6b45055",
104+
"editor.wordHighlightBackground": "#e6b45024",
105+
"editor.wordHighlightStrongBackground": "#7fd9622b",
106+
"editor.wordHighlightBorder": "#e6b45066",
107107
"editor.wordHighlightStrongBorder": "#7fd96280",
108108
"editor.findMatchBackground": "#6c5980",
109109
"editor.findMatchBorder": "#6c5980",
110110
"editor.findMatchHighlightBackground": "#6c598066",
111111
"editor.findMatchHighlightBorder": "#5f4c7266",
112-
"editor.findRangeHighlightBackground": "#6c598040",
112+
"editor.findRangeHighlightBackground": "#e6b45030",
113113
"editor.rangeHighlightBackground": "#6c598033",
114-
"editor.lineHighlightBackground": "#131721",
114+
"editor.lineHighlightBackground": "#242934",
115+
"editor.lineHighlightBorder": "#00000000",
115116
"editorLink.activeForeground": "#e6b450",
116117
"editorWhitespace.foreground": "#6c738099",
117118
"editorIndentGuide.background": "#6c738033",
@@ -843,4 +844,4 @@
843844
"semanticTokenColors": {
844845
"parameter.label": "#bfbdb6"
845846
}
846-
}
847+
}

0 commit comments

Comments
 (0)