@dxos/plugin-registry 0.8.4-main.a4bbb77 → 0.8.4-main.ae835ea
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/browser/{app-graph-builder-YN3N2KW4.mjs → app-graph-builder-AOIN4N2Q.mjs} +8 -7
- package/dist/lib/browser/app-graph-builder-AOIN4N2Q.mjs.map +7 -0
- package/dist/lib/browser/chunk-XPEFEID2.mjs +19 -0
- package/dist/lib/browser/chunk-XPEFEID2.mjs.map +7 -0
- package/dist/lib/browser/index.mjs +4 -4
- package/dist/lib/browser/{intent-resolver-RUD6WFGT.mjs → intent-resolver-LKNUYBTN.mjs} +2 -2
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/{react-surface-3CDFJHV3.mjs → react-surface-KP3NX4UD.mjs} +90 -68
- package/dist/lib/browser/react-surface-KP3NX4UD.mjs.map +7 -0
- package/dist/types/src/capabilities/app-graph-builder.d.ts.map +1 -1
- package/dist/types/src/components/PluginDetail.d.ts.map +1 -1
- package/dist/types/src/components/PluginDetail.stories.d.ts +0 -1
- package/dist/types/src/components/PluginDetail.stories.d.ts.map +1 -1
- package/dist/types/src/components/PluginItem.d.ts +1 -1
- package/dist/types/src/components/PluginItem.d.ts.map +1 -1
- package/dist/types/src/components/PluginList.d.ts.map +1 -1
- package/dist/types/src/components/PluginList.stories.d.ts +2 -5
- package/dist/types/src/components/PluginList.stories.d.ts.map +1 -1
- package/dist/types/src/meta.d.ts.map +1 -1
- package/dist/types/src/types.d.ts +3 -1
- package/dist/types/src/types.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +18 -20
- package/src/capabilities/app-graph-builder.ts +6 -5
- package/src/components/PluginDetail.stories.tsx +3 -3
- package/src/components/PluginDetail.tsx +47 -30
- package/src/components/PluginItem.tsx +51 -50
- package/src/components/PluginList.stories.tsx +27 -30
- package/src/components/PluginList.tsx +2 -4
- package/src/components/RegistryContainer.tsx +1 -1
- package/src/meta.ts +5 -0
- package/src/types.ts +5 -1
- package/dist/lib/browser/app-graph-builder-YN3N2KW4.mjs.map +0 -7
- package/dist/lib/browser/chunk-MWZPWWWF.mjs +0 -14
- package/dist/lib/browser/chunk-MWZPWWWF.mjs.map +0 -7
- package/dist/lib/browser/react-surface-3CDFJHV3.mjs.map +0 -7
- package/dist/types/src/components/Icon.stories.d.ts +0 -14
- package/dist/types/src/components/Icon.stories.d.ts.map +0 -1
- package/src/components/Icon.stories.tsx +0 -110
- /package/dist/lib/browser/{intent-resolver-RUD6WFGT.mjs.map → intent-resolver-LKNUYBTN.mjs.map} +0 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/plugin-registry",
|
|
3
|
-
"version": "0.8.4-main.
|
|
3
|
+
"version": "0.8.4-main.ae835ea",
|
|
4
4
|
"description": "Braneframe plugin gallery",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -25,31 +25,29 @@
|
|
|
25
25
|
],
|
|
26
26
|
"dependencies": {
|
|
27
27
|
"@preact-signals/safe-react": "^0.9.0",
|
|
28
|
-
"@dxos/echo": "0.8.4-main.
|
|
29
|
-
"@dxos/
|
|
30
|
-
"@dxos/
|
|
31
|
-
"@dxos/
|
|
32
|
-
"@dxos/plugin-graph": "0.8.4-main.
|
|
33
|
-
"@dxos/
|
|
34
|
-
"@dxos/
|
|
35
|
-
"@dxos/
|
|
36
|
-
"@dxos/react-ui-
|
|
37
|
-
"@dxos/util": "0.8.4-main.a4bbb77"
|
|
28
|
+
"@dxos/echo": "0.8.4-main.ae835ea",
|
|
29
|
+
"@dxos/live-object": "0.8.4-main.ae835ea",
|
|
30
|
+
"@dxos/app-framework": "0.8.4-main.ae835ea",
|
|
31
|
+
"@dxos/plugin-observability": "0.8.4-main.ae835ea",
|
|
32
|
+
"@dxos/plugin-graph": "0.8.4-main.ae835ea",
|
|
33
|
+
"@dxos/react-ui-stack": "0.8.4-main.ae835ea",
|
|
34
|
+
"@dxos/invariant": "0.8.4-main.ae835ea",
|
|
35
|
+
"@dxos/util": "0.8.4-main.ae835ea",
|
|
36
|
+
"@dxos/react-ui-form": "0.8.4-main.ae835ea"
|
|
38
37
|
},
|
|
39
38
|
"devDependencies": {
|
|
40
39
|
"@effect-rx/rx-react": "0.42.4",
|
|
41
40
|
"@effect/platform": "0.92.1",
|
|
42
|
-
"@
|
|
43
|
-
"@types/react": "~19.2.
|
|
44
|
-
"@types/react-dom": "~19.2.0",
|
|
41
|
+
"@types/react": "~19.2.2",
|
|
42
|
+
"@types/react-dom": "~19.2.2",
|
|
45
43
|
"effect": "3.18.3",
|
|
46
44
|
"react": "~19.2.0",
|
|
47
45
|
"react-dom": "~19.2.0",
|
|
48
46
|
"vite": "7.1.9",
|
|
49
|
-
"@dxos/
|
|
50
|
-
"@dxos/
|
|
51
|
-
"@dxos/react-ui-theme": "0.8.4-main.
|
|
52
|
-
"@dxos/storybook-utils": "0.8.4-main.
|
|
47
|
+
"@dxos/react-ui": "0.8.4-main.ae835ea",
|
|
48
|
+
"@dxos/random": "0.8.4-main.ae835ea",
|
|
49
|
+
"@dxos/react-ui-theme": "0.8.4-main.ae835ea",
|
|
50
|
+
"@dxos/storybook-utils": "0.8.4-main.ae835ea"
|
|
53
51
|
},
|
|
54
52
|
"peerDependencies": {
|
|
55
53
|
"@effect-rx/rx-react": "^0.34.1",
|
|
@@ -57,8 +55,8 @@
|
|
|
57
55
|
"effect": "^3.13.3",
|
|
58
56
|
"react": "^19.0.0",
|
|
59
57
|
"react-dom": "^19.0.0",
|
|
60
|
-
"@dxos/react-ui": "0.8.4-main.
|
|
61
|
-
"@dxos/react-ui-theme": "0.8.4-main.
|
|
58
|
+
"@dxos/react-ui": "0.8.4-main.ae835ea",
|
|
59
|
+
"@dxos/react-ui-theme": "0.8.4-main.ae835ea"
|
|
62
60
|
},
|
|
63
61
|
"publishConfig": {
|
|
64
62
|
"access": "public"
|
|
@@ -3,7 +3,8 @@
|
|
|
3
3
|
//
|
|
4
4
|
|
|
5
5
|
import { Rx } from '@effect-rx/rx-react';
|
|
6
|
-
import
|
|
6
|
+
import * as Function from 'effect/Function';
|
|
7
|
+
import * as Option from 'effect/Option';
|
|
7
8
|
|
|
8
9
|
import { Capabilities, type PluginContext, SettingsAction, contributes, createIntent } from '@dxos/app-framework';
|
|
9
10
|
import { createExtension } from '@dxos/plugin-graph';
|
|
@@ -16,7 +17,7 @@ export default (context: PluginContext) =>
|
|
|
16
17
|
id: meta.id,
|
|
17
18
|
actions: (node) =>
|
|
18
19
|
Rx.make((get) =>
|
|
19
|
-
pipe(
|
|
20
|
+
Function.pipe(
|
|
20
21
|
get(node),
|
|
21
22
|
Option.flatMap((node) => (node.id === 'root' ? Option.some(node) : Option.none())),
|
|
22
23
|
Option.map((node) => [
|
|
@@ -41,7 +42,7 @@ export default (context: PluginContext) =>
|
|
|
41
42
|
id: meta.id,
|
|
42
43
|
connector: (node) =>
|
|
43
44
|
Rx.make((get) =>
|
|
44
|
-
pipe(
|
|
45
|
+
Function.pipe(
|
|
45
46
|
get(node),
|
|
46
47
|
Option.flatMap((node) => (node.id === 'root' ? Option.some(node) : Option.none())),
|
|
47
48
|
Option.map((node) => [
|
|
@@ -110,7 +111,7 @@ export default (context: PluginContext) =>
|
|
|
110
111
|
id: `${meta.id}/actions`,
|
|
111
112
|
actions: (node) =>
|
|
112
113
|
Rx.make((get) =>
|
|
113
|
-
pipe(
|
|
114
|
+
Function.pipe(
|
|
114
115
|
get(node),
|
|
115
116
|
Option.flatMap((node) => (node.id === REGISTRY_ID ? Option.some(node) : Option.none())),
|
|
116
117
|
Option.map(() => [
|
|
@@ -132,7 +133,7 @@ export default (context: PluginContext) =>
|
|
|
132
133
|
id: `${meta.id}/plugins`,
|
|
133
134
|
connector: (node) =>
|
|
134
135
|
Rx.make((get) =>
|
|
135
|
-
pipe(
|
|
136
|
+
Function.pipe(
|
|
136
137
|
get(node),
|
|
137
138
|
Option.flatMap((node) => (node.id === REGISTRY_ID ? Option.some(node) : Option.none())),
|
|
138
139
|
Option.map(() => {
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
import { type Meta, type StoryObj } from '@storybook/react-vite';
|
|
6
6
|
|
|
7
7
|
import { faker } from '@dxos/random';
|
|
8
|
-
import { withTheme } from '@dxos/react-ui/testing';
|
|
8
|
+
import { withLayout, withTheme } from '@dxos/react-ui/testing';
|
|
9
9
|
|
|
10
10
|
import { translations } from '../translations';
|
|
11
11
|
|
|
@@ -14,9 +14,8 @@ import { PluginDetail } from './PluginDetail';
|
|
|
14
14
|
const meta = {
|
|
15
15
|
title: 'plugins/plugin-registry/PluginDetail',
|
|
16
16
|
component: PluginDetail,
|
|
17
|
-
decorators: [withTheme],
|
|
17
|
+
decorators: [withTheme, withLayout({ container: 'column' })],
|
|
18
18
|
parameters: {
|
|
19
|
-
layout: 'column',
|
|
20
19
|
translations,
|
|
21
20
|
},
|
|
22
21
|
} satisfies Meta<typeof PluginDetail>;
|
|
@@ -33,6 +32,7 @@ export const Default: Story = {
|
|
|
33
32
|
name: 'Test Plugin',
|
|
34
33
|
description: faker.lorem.paragraphs(2),
|
|
35
34
|
icon: 'ph--bug--regular',
|
|
35
|
+
iconHue: 'sky',
|
|
36
36
|
homePage: 'https://example.com',
|
|
37
37
|
source: 'https://github.com/example/test-plugin',
|
|
38
38
|
screenshots: [
|
|
@@ -7,6 +7,7 @@ import React from 'react';
|
|
|
7
7
|
import { type Plugin } from '@dxos/app-framework';
|
|
8
8
|
import { Icon, Input, Link, useTranslation } from '@dxos/react-ui';
|
|
9
9
|
import { StackItem } from '@dxos/react-ui-stack';
|
|
10
|
+
import { getStyles, mx } from '@dxos/react-ui-theme';
|
|
10
11
|
|
|
11
12
|
import { meta } from '../meta';
|
|
12
13
|
|
|
@@ -18,45 +19,61 @@ export type PluginDetailProps = {
|
|
|
18
19
|
|
|
19
20
|
export const PluginDetail = ({ plugin, enabled, onEnable }: PluginDetailProps) => {
|
|
20
21
|
const { t } = useTranslation(meta.id);
|
|
21
|
-
const {
|
|
22
|
+
const {
|
|
23
|
+
id,
|
|
24
|
+
name,
|
|
25
|
+
description,
|
|
26
|
+
homePage,
|
|
27
|
+
source,
|
|
28
|
+
screenshots,
|
|
29
|
+
icon = 'ph--circle--regular',
|
|
30
|
+
iconHue = 'neutral',
|
|
31
|
+
} = plugin.meta;
|
|
32
|
+
const styles = getStyles(iconHue);
|
|
22
33
|
|
|
23
34
|
return (
|
|
24
|
-
<StackItem.Content
|
|
25
|
-
<div role='none' className='container-max-width p-4'>
|
|
26
|
-
<div role='none'
|
|
27
|
-
<p
|
|
28
|
-
<Input.Root>
|
|
29
|
-
<Input.Switch classNames='self-center' checked={enabled} onClick={onEnable} />
|
|
30
|
-
</Input.Root>
|
|
35
|
+
<StackItem.Content scrollable>
|
|
36
|
+
<div role='none' className='grid grid-cols-[min-content_1fr] gap-4 container-max-width p-4'>
|
|
37
|
+
<div role='none'>
|
|
38
|
+
<Icon classNames={mx('p-1 rounded', styles.bg, styles.icon)} icon={icon} size={14} />
|
|
31
39
|
</div>
|
|
40
|
+
<div role='none' className='flex flex-col gap-6'>
|
|
41
|
+
<div role='none' className='grid grid-cols-[1fr_min-content] gap-x-3 is-full pbs-1'>
|
|
42
|
+
<h2 className='text-xl'>{name}</h2>
|
|
43
|
+
<Input.Root>
|
|
44
|
+
<Input.Switch classNames='self-center' checked={enabled} onClick={onEnable} />
|
|
45
|
+
</Input.Root>
|
|
46
|
+
<p className='pbs-0.5 text-sm text-description'>{id}</p>
|
|
47
|
+
</div>
|
|
32
48
|
|
|
33
|
-
{screenshots && screenshots.length > 0 && (
|
|
34
49
|
<div role='none'>
|
|
35
|
-
<
|
|
36
|
-
<img src={screenshots[0]} alt={name} className='aspect-video object-fit' />
|
|
50
|
+
<p className='text-description'>{description}</p>
|
|
37
51
|
</div>
|
|
38
|
-
)}
|
|
39
52
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
53
|
+
{screenshots && screenshots.length > 0 && (
|
|
54
|
+
<div role='none' className='flex flex-col gap-2'>
|
|
55
|
+
<h2>Preview</h2>
|
|
56
|
+
<img src={screenshots[0]} alt={name} className='aspect-video object-fit' />
|
|
57
|
+
</div>
|
|
58
|
+
)}
|
|
43
59
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
60
|
+
<div role='none' className='flex flex-col gap-2'>
|
|
61
|
+
<h2>Resources</h2>
|
|
62
|
+
<div className='flex gap-2'>
|
|
63
|
+
{homePage && (
|
|
64
|
+
<Link href={homePage} target='_blank' rel='noreferrer' classNames='text-sm text-description'>
|
|
65
|
+
{t('home page label')}
|
|
66
|
+
<Icon icon='ph--arrow-square-out--bold' size={3} classNames='inline-block leading-none mli-1' />
|
|
67
|
+
</Link>
|
|
68
|
+
)}
|
|
53
69
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
70
|
+
{source && (
|
|
71
|
+
<Link href={source} target='_blank' rel='noreferrer' classNames='text-sm text-description'>
|
|
72
|
+
{t('source label')}
|
|
73
|
+
<Icon icon='ph--arrow-square-out--bold' size={3} classNames='inline-block leading-none mli-1' />
|
|
74
|
+
</Link>
|
|
75
|
+
)}
|
|
76
|
+
</div>
|
|
60
77
|
</div>
|
|
61
78
|
</div>
|
|
62
79
|
</div>
|
|
@@ -5,10 +5,12 @@
|
|
|
5
5
|
import React, { type MouseEvent, useCallback } from 'react';
|
|
6
6
|
|
|
7
7
|
import { type Plugin } from '@dxos/app-framework';
|
|
8
|
-
import { Icon, IconButton, Input, Link, ListItem, Tag, useTranslation } from '@dxos/react-ui';
|
|
8
|
+
import { type ChromaticPalette, Icon, IconButton, Input, Link, ListItem, Tag, useTranslation } from '@dxos/react-ui';
|
|
9
9
|
import { descriptionText, mx } from '@dxos/react-ui-theme';
|
|
10
|
+
import { getStyles } from '@dxos/react-ui-theme';
|
|
10
11
|
|
|
11
12
|
import { meta } from '../meta';
|
|
13
|
+
import { type RegistryTagType } from '../types';
|
|
12
14
|
|
|
13
15
|
export type PluginItemProps = {
|
|
14
16
|
plugin: Plugin;
|
|
@@ -25,11 +27,11 @@ export const PluginItem = ({
|
|
|
25
27
|
enabled = [],
|
|
26
28
|
onClick,
|
|
27
29
|
onChange,
|
|
28
|
-
hasSettings:
|
|
30
|
+
hasSettings: hasSettingsParam,
|
|
29
31
|
onSettings,
|
|
30
32
|
}: PluginItemProps) => {
|
|
31
33
|
const { t } = useTranslation(meta.id);
|
|
32
|
-
const { id, name, description, tags, icon = 'ph--circle--regular' } = plugin.meta;
|
|
34
|
+
const { id, name, description, tags, icon = 'ph--circle--regular', iconHue = 'neutral' } = plugin.meta;
|
|
33
35
|
const isEnabled = enabled.includes(id);
|
|
34
36
|
const inputId = `${id}-input`;
|
|
35
37
|
const labelId = `${id}-label`;
|
|
@@ -44,8 +46,11 @@ export const PluginItem = ({
|
|
|
44
46
|
[id, isEnabled, onChange],
|
|
45
47
|
);
|
|
46
48
|
|
|
47
|
-
const hasSettings =
|
|
49
|
+
const hasSettings = hasSettingsParam?.(id) ?? false;
|
|
48
50
|
const handleSettings = useCallback(() => onSettings?.(id), [id, onSettings]);
|
|
51
|
+
const styles = getStyles(iconHue);
|
|
52
|
+
const gridCols = 'grid grid-cols-[5rem_1fr]';
|
|
53
|
+
const gridRows = 'grid grid-rows-[40px_1fr_min-content_40px]';
|
|
49
54
|
|
|
50
55
|
return (
|
|
51
56
|
<ListItem.Root
|
|
@@ -53,67 +58,63 @@ export const PluginItem = ({
|
|
|
53
58
|
labelId={labelId}
|
|
54
59
|
data-testid={`pluginList.${id}`}
|
|
55
60
|
aria-describedby={descriptionId}
|
|
56
|
-
|
|
57
|
-
classNames='is-full bs-full grid grid-cols-[48px_1fr_48px] grid-rows-[40px_1fr_32px] p-1 border border-separator rounded-md'
|
|
61
|
+
classNames={mx(gridCols, 'bs-[12rem] is-full gap-3 pie-2 border border-separator rounded-md overflow-hidden')}
|
|
58
62
|
>
|
|
59
|
-
{
|
|
60
|
-
|
|
61
|
-
<Icon icon={icon} size={
|
|
62
|
-
</div>
|
|
63
|
-
<div className='flex items-center overflow-hidden cursor-pointer' onClick={handleClick}>
|
|
64
|
-
<span className='truncate'>{name ?? id}</span>
|
|
65
|
-
</div>
|
|
66
|
-
<div className='flex justify-center items-center'>
|
|
67
|
-
<Input.Root id={inputId}>
|
|
68
|
-
<Input.Switch classNames='self-center' checked={isEnabled} onClick={handleChange} />
|
|
69
|
-
</Input.Root>
|
|
63
|
+
<div className={mx(gridRows, 'justify-center rounded-l-md', styles.bg)}>
|
|
64
|
+
<div />
|
|
65
|
+
<Icon classNames={mx('cursor-pointer', styles.icon)} icon={icon} size={14} onClick={handleClick} />
|
|
70
66
|
</div>
|
|
71
67
|
|
|
72
|
-
{
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
<div id={descriptionId} className='col-span-2 flex flex-col w-full justify-between gap-2 pb-2'>
|
|
76
|
-
<div className='grow'>
|
|
77
|
-
<p className={mx(descriptionText, 'line-clamp-3 min-w-0 pie-2')}>{description}</p>
|
|
78
|
-
</div>
|
|
79
|
-
{tags && tags.length > 0 && (
|
|
80
|
-
<div>
|
|
81
|
-
{tags.map((tag) => (
|
|
82
|
-
<Tag key={tag} palette={'indigo'} classNames='text-xs capitalize'>
|
|
83
|
-
{tag}
|
|
84
|
-
</Tag>
|
|
85
|
-
))}
|
|
86
|
-
</div>
|
|
87
|
-
)}
|
|
68
|
+
<div className={mx(gridRows)}>
|
|
69
|
+
<div className='flex items-center overflow-hidden cursor-pointer' onClick={handleClick}>
|
|
70
|
+
<span className='text-lg truncate'>{name ?? id}</span>
|
|
88
71
|
</div>
|
|
89
|
-
)}
|
|
90
72
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
<Link
|
|
95
|
-
aria-describedby={descriptionId}
|
|
96
|
-
classNames='text-sm text-description cursor-pointer'
|
|
97
|
-
onClick={handleClick}
|
|
98
|
-
>
|
|
99
|
-
{t('details label')}
|
|
100
|
-
</Link>
|
|
73
|
+
<div>
|
|
74
|
+
<p className={mx(descriptionText, 'line-clamp-4 min-is-0')}>{description}</p>
|
|
75
|
+
</div>
|
|
101
76
|
|
|
102
|
-
<div className='flex-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
77
|
+
<div className='flex -mis-0.5 overflow-x-auto scrollbar-none'>
|
|
78
|
+
{tags?.map((tag) => (
|
|
79
|
+
<Tag key={tag} palette={tagColors[tag as RegistryTagType]} classNames='text-xs uppercase font-thin'>
|
|
80
|
+
{tag}
|
|
81
|
+
</Tag>
|
|
82
|
+
))}
|
|
83
|
+
</div>
|
|
84
|
+
|
|
85
|
+
<div className='flex gap-2 items-center text-sm'>
|
|
106
86
|
<IconButton
|
|
107
87
|
aria-describedby={descriptionId}
|
|
108
|
-
classNames='
|
|
88
|
+
classNames='cursor-pointer'
|
|
109
89
|
icon='ph--gear--regular'
|
|
110
90
|
label={t('settings label')}
|
|
111
91
|
iconOnly
|
|
112
92
|
size={4}
|
|
113
93
|
onClick={handleSettings}
|
|
94
|
+
disabled={!hasSettings}
|
|
114
95
|
/>
|
|
115
|
-
|
|
96
|
+
|
|
97
|
+
<Link aria-describedby={descriptionId} classNames='text-description cursor-pointer' onClick={handleClick}>
|
|
98
|
+
{t('details label')}
|
|
99
|
+
</Link>
|
|
100
|
+
|
|
101
|
+
<div className='grow' />
|
|
102
|
+
<div className='pie-1'>
|
|
103
|
+
<Input.Root id={inputId}>
|
|
104
|
+
<Input.Switch classNames='self-center' checked={isEnabled} onClick={handleChange} />
|
|
105
|
+
</Input.Root>
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
116
108
|
</div>
|
|
117
109
|
</ListItem.Root>
|
|
118
110
|
);
|
|
119
111
|
};
|
|
112
|
+
|
|
113
|
+
const tagColors: Record<RegistryTagType, ChromaticPalette> = {
|
|
114
|
+
new: 'rose',
|
|
115
|
+
beta: 'teal',
|
|
116
|
+
labs: 'blue',
|
|
117
|
+
popular: 'green',
|
|
118
|
+
featured: 'pink',
|
|
119
|
+
experimental: 'amber',
|
|
120
|
+
};
|
|
@@ -7,11 +7,11 @@ import React, { useState } from 'react';
|
|
|
7
7
|
|
|
8
8
|
import { type Plugin, definePlugin } from '@dxos/app-framework';
|
|
9
9
|
import { faker } from '@dxos/random';
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import { mx } from '@dxos/react-ui-theme';
|
|
10
|
+
import { withLayout, withTheme } from '@dxos/react-ui/testing';
|
|
11
|
+
import { getHashHue } from '@dxos/react-ui-theme';
|
|
13
12
|
|
|
14
13
|
import { translations } from '../translations';
|
|
14
|
+
import { RegistryTagType } from '../types';
|
|
15
15
|
|
|
16
16
|
import { PluginList } from './PluginList';
|
|
17
17
|
|
|
@@ -26,24 +26,24 @@ const icons = [
|
|
|
26
26
|
'ph--github-logo--regular',
|
|
27
27
|
];
|
|
28
28
|
|
|
29
|
-
const DefaultStory = (
|
|
29
|
+
const DefaultStory = () => {
|
|
30
30
|
const [plugins] = useState<Plugin[]>(
|
|
31
31
|
faker.helpers.multiple(
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
:
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
{ count:
|
|
32
|
+
() =>
|
|
33
|
+
definePlugin(
|
|
34
|
+
{
|
|
35
|
+
id: `dxos.org/plugin/plugin-${faker.string.uuid()}`,
|
|
36
|
+
name: `${faker.commerce.productName()}`,
|
|
37
|
+
description: faker.lorem.sentences(Math.ceil(Math.random() * 3)),
|
|
38
|
+
tags: faker.helpers.uniqueArray(RegistryTagType.literals as any, Math.floor(Math.random() * 3)),
|
|
39
|
+
icon: faker.helpers.arrayElement(icons),
|
|
40
|
+
iconHue: getHashHue(faker.string.uuid()),
|
|
41
|
+
homePage: faker.datatype.boolean({ probability: 0.5 }) ? faker.internet.url() : undefined,
|
|
42
|
+
source: faker.internet.url(),
|
|
43
|
+
},
|
|
44
|
+
() => [],
|
|
45
|
+
)(),
|
|
46
|
+
{ count: 32 },
|
|
47
47
|
),
|
|
48
48
|
);
|
|
49
49
|
const [enabled, setEnabled] = useState<string[]>([]);
|
|
@@ -52,20 +52,14 @@ const DefaultStory = ({ classNames }: ThemedClassName<{}>) => {
|
|
|
52
52
|
setEnabled((plugins) => (enabled ? [...plugins, id] : plugins.filter((plugin) => plugin === id)));
|
|
53
53
|
};
|
|
54
54
|
|
|
55
|
-
return (
|
|
56
|
-
<div className={mx('flex overflow-hidden', classNames)}>
|
|
57
|
-
<PluginList plugins={plugins} enabled={enabled} onChange={handleChange} hasSettings={() => true} />
|
|
58
|
-
</div>
|
|
59
|
-
);
|
|
55
|
+
return <PluginList plugins={plugins} enabled={enabled} onChange={handleChange} hasSettings={() => true} />;
|
|
60
56
|
};
|
|
61
57
|
|
|
62
58
|
const meta = {
|
|
63
59
|
title: 'plugins/plugin-registry/PluginList',
|
|
64
60
|
component: PluginList,
|
|
65
61
|
render: DefaultStory,
|
|
66
|
-
decorators: [withTheme],
|
|
67
62
|
parameters: {
|
|
68
|
-
layout: 'column',
|
|
69
63
|
translations,
|
|
70
64
|
},
|
|
71
65
|
} satisfies Meta<typeof PluginList>;
|
|
@@ -74,10 +68,13 @@ export default meta;
|
|
|
74
68
|
|
|
75
69
|
type Story = StoryObj<typeof meta>;
|
|
76
70
|
|
|
77
|
-
export const Default: Story = {
|
|
71
|
+
export const Default: Story = {
|
|
72
|
+
decorators: [withTheme, withLayout({ container: 'column', scroll: true })],
|
|
73
|
+
};
|
|
78
74
|
|
|
79
|
-
export const
|
|
80
|
-
|
|
81
|
-
|
|
75
|
+
export const FullScreen: Story = {
|
|
76
|
+
decorators: [withTheme, withLayout({ scroll: true })],
|
|
77
|
+
parameters: {
|
|
78
|
+
layout: 'fullscreen',
|
|
82
79
|
},
|
|
83
80
|
};
|
|
@@ -15,11 +15,9 @@ export type PluginListProps = Omit<PluginItemProps, 'plugin'> & {
|
|
|
15
15
|
|
|
16
16
|
export const PluginList = ({ plugins = [], ...props }: PluginListProps) => {
|
|
17
17
|
return (
|
|
18
|
-
<List classNames='grid grid-cols-[repeat(auto-fill,minmax(
|
|
18
|
+
<List classNames='grid grid-cols-[repeat(auto-fill,minmax(18rem,1fr))] gap-4 p-4'>
|
|
19
19
|
{plugins.map((plugin) => (
|
|
20
|
-
<
|
|
21
|
-
<PluginItem plugin={plugin} {...props} />
|
|
22
|
-
</div>
|
|
20
|
+
<PluginItem key={plugin.meta.id} plugin={plugin} {...props} />
|
|
23
21
|
))}
|
|
24
22
|
</List>
|
|
25
23
|
);
|
|
@@ -70,7 +70,7 @@ export const RegistryContainer = ({ id, plugins: _plugins }: { id: string; plugi
|
|
|
70
70
|
);
|
|
71
71
|
|
|
72
72
|
return (
|
|
73
|
-
<StackItem.Content
|
|
73
|
+
<StackItem.Content scrollable>
|
|
74
74
|
<PluginList
|
|
75
75
|
plugins={plugins}
|
|
76
76
|
enabled={manager.enabled}
|
package/src/meta.ts
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
//
|
|
4
4
|
|
|
5
5
|
import { type PluginMeta } from '@dxos/app-framework';
|
|
6
|
+
import { trim } from '@dxos/util';
|
|
6
7
|
|
|
7
8
|
// TODO(wittjosiah): Deck does not currently support `/` in ids.
|
|
8
9
|
// TODO(wittjosiah): This is a hack to prevent the previous deck from being set for pinned items.
|
|
@@ -13,4 +14,8 @@ export const REGISTRY_KEY = 'plugin-registry';
|
|
|
13
14
|
export const meta: PluginMeta = {
|
|
14
15
|
id: 'dxos.org/plugin/registry',
|
|
15
16
|
name: 'Plugins',
|
|
17
|
+
description: trim`
|
|
18
|
+
Plugin management system for discovering, installing, and configuring workspace extensions.
|
|
19
|
+
Browse available plugins and customize your workspace capabilities.
|
|
20
|
+
`,
|
|
16
21
|
};
|
package/src/types.ts
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
// Copyright 2025 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import
|
|
5
|
+
import * as Schema from 'effect/Schema';
|
|
6
6
|
|
|
7
7
|
export const RegistrySettingsSchema = Schema.mutable(
|
|
8
8
|
Schema.Struct({
|
|
@@ -11,3 +11,7 @@ export const RegistrySettingsSchema = Schema.mutable(
|
|
|
11
11
|
);
|
|
12
12
|
|
|
13
13
|
export type RegistrySettings = Schema.Schema.Type<typeof RegistrySettingsSchema>;
|
|
14
|
+
|
|
15
|
+
export const RegistryTagType = Schema.Literal('new', 'beta', 'labs', 'popular', 'featured', 'experimental');
|
|
16
|
+
|
|
17
|
+
export type RegistryTagType = Schema.Schema.Type<typeof RegistryTagType>;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/capabilities/app-graph-builder.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { Rx } from '@effect-rx/rx-react';\nimport { Option, pipe } from 'effect';\n\nimport { Capabilities, type PluginContext, SettingsAction, contributes, createIntent } from '@dxos/app-framework';\nimport { createExtension } from '@dxos/plugin-graph';\n\nimport { REGISTRY_ID, REGISTRY_KEY, meta } from '../meta';\n\nexport default (context: PluginContext) =>\n contributes(Capabilities.AppGraphBuilder, [\n createExtension({\n id: meta.id,\n actions: (node) =>\n Rx.make((get) =>\n pipe(\n get(node),\n Option.flatMap((node) => (node.id === 'root' ? Option.some(node) : Option.none())),\n Option.map((node) => [\n {\n id: meta.id,\n data: async () => {\n const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);\n await dispatch(createIntent(SettingsAction.OpenPluginRegistry));\n },\n properties: {\n label: ['open plugin registry label', { ns: meta.id }],\n icon: 'ph--squares-four--regular',\n disposition: 'menu',\n },\n },\n ]),\n Option.getOrElse(() => []),\n ),\n ),\n }),\n createExtension({\n id: meta.id,\n connector: (node) =>\n Rx.make((get) =>\n pipe(\n get(node),\n Option.flatMap((node) => (node.id === 'root' ? Option.some(node) : Option.none())),\n Option.map((node) => [\n {\n id: REGISTRY_ID,\n type: meta.id,\n properties: {\n label: ['plugin registry label', { ns: meta.id }],\n icon: 'ph--squares-four--regular',\n disposition: 'pin-end',\n testId: 'treeView.pluginRegistry',\n },\n nodes: [\n {\n id: `${REGISTRY_KEY}+all`,\n type: 'category',\n data: `${REGISTRY_KEY}+all`,\n properties: {\n label: ['all plugins label', { ns: meta.id }],\n icon: 'ph--squares-four--regular',\n key: REGISTRY_KEY,\n testId: 'pluginRegistry.all',\n },\n },\n {\n id: `${REGISTRY_KEY}+installed`,\n type: 'category',\n data: `${REGISTRY_KEY}+installed`,\n properties: {\n label: ['installed plugins label', { ns: meta.id }],\n icon: 'ph--check--regular',\n key: REGISTRY_KEY,\n testId: 'pluginRegistry.installed',\n },\n },\n {\n id: `${REGISTRY_KEY}+recommended`,\n type: 'category',\n data: `${REGISTRY_KEY}+recommended`,\n properties: {\n label: ['recommended plugins label', { ns: meta.id }],\n icon: 'ph--star--regular',\n key: REGISTRY_KEY,\n testId: 'pluginRegistry.recommended',\n },\n },\n {\n id: `${REGISTRY_KEY}+labs`,\n type: 'category',\n data: `${REGISTRY_KEY}+labs`,\n properties: {\n label: ['labs plugins label', { ns: meta.id }],\n icon: 'ph--flask--regular',\n key: REGISTRY_KEY,\n testId: 'pluginRegistry.labs',\n },\n },\n ],\n },\n ]),\n Option.getOrElse(() => []),\n ),\n ),\n }),\n createExtension({\n id: `${meta.id}/actions`,\n actions: (node) =>\n Rx.make((get) =>\n pipe(\n get(node),\n Option.flatMap((node) => (node.id === REGISTRY_ID ? Option.some(node) : Option.none())),\n Option.map(() => [\n {\n id: `${meta.id}/load-by-url`,\n data: async () => {},\n properties: {\n label: ['load by url label', { ns: meta.id }],\n icon: 'ph--cloud-arrow-down--regular',\n disabled: true,\n },\n },\n ]),\n Option.getOrElse(() => []),\n ),\n ),\n }),\n createExtension({\n id: `${meta.id}/plugins`,\n connector: (node) =>\n Rx.make((get) =>\n pipe(\n get(node),\n Option.flatMap((node) => (node.id === REGISTRY_ID ? Option.some(node) : Option.none())),\n Option.map(() => {\n const manager = context.getCapability(Capabilities.PluginManager);\n return manager.plugins.map((plugin) => ({\n id: plugin.meta.id.replaceAll('/', ':'),\n type: 'dxos.org/plugin',\n data: plugin,\n properties: {\n label: plugin.meta.name ?? plugin.meta.id,\n icon: plugin.meta.icon ?? 'ph--circle--regular',\n disposition: 'hidden',\n },\n }));\n }),\n Option.getOrElse(() => []),\n ),\n ),\n }),\n ]);\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["Rx", "Option", "pipe", "Capabilities", "SettingsAction", "contributes", "createIntent", "createExtension", "context", "contributes", "Capabilities", "AppGraphBuilder", "createExtension", "id", "meta", "actions", "node", "Rx", "make", "get", "pipe", "Option", "flatMap", "some", "none", "map", "data", "dispatchPromise", "dispatch", "getCapability", "IntentDispatcher", "createIntent", "SettingsAction", "OpenPluginRegistry", "properties", "label", "ns", "icon", "disposition", "getOrElse", "connector", "REGISTRY_ID", "type", "testId", "nodes", "REGISTRY_KEY", "key", "disabled", "manager", "PluginManager", "plugins", "plugin", "replaceAll", "name"]
|
|
7
|
-
}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
// src/meta.ts
|
|
2
|
-
var REGISTRY_ID = "!dxos:plugin-registry";
|
|
3
|
-
var REGISTRY_KEY = "plugin-registry";
|
|
4
|
-
var meta = {
|
|
5
|
-
id: "dxos.org/plugin/registry",
|
|
6
|
-
name: "Plugins"
|
|
7
|
-
};
|
|
8
|
-
|
|
9
|
-
export {
|
|
10
|
-
REGISTRY_ID,
|
|
11
|
-
REGISTRY_KEY,
|
|
12
|
-
meta
|
|
13
|
-
};
|
|
14
|
-
//# sourceMappingURL=chunk-MWZPWWWF.mjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/meta.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type PluginMeta } from '@dxos/app-framework';\n\n// TODO(wittjosiah): Deck does not currently support `/` in ids.\n// TODO(wittjosiah): This is a hack to prevent the previous deck from being set for pinned items.\n// Ideally this should be worked into the data model in a generic way.\nexport const REGISTRY_ID = '!dxos:plugin-registry';\nexport const REGISTRY_KEY = 'plugin-registry';\n\nexport const meta: PluginMeta = {\n id: 'dxos.org/plugin/registry',\n name: 'Plugins',\n};\n"],
|
|
5
|
-
"mappings": ";AASO,IAAMA,cAAc;AACpB,IAAMC,eAAe;AAErB,IAAMC,OAAmB;EAC9BC,IAAI;EACJC,MAAM;AACR;",
|
|
6
|
-
"names": ["REGISTRY_ID", "REGISTRY_KEY", "meta", "id", "name"]
|
|
7
|
-
}
|