@dxos/plugin-stack 0.9.0 → 0.9.1-staging.ee54ba693a
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/neutral/StackArticle-DDKRSUE7.mjs +199 -0
- package/dist/lib/neutral/StackArticle-DDKRSUE7.mjs.map +7 -0
- package/dist/lib/neutral/StackPlugin.mjs +6 -4
- package/dist/lib/neutral/StackPlugin.mjs.map +4 -4
- package/dist/lib/neutral/capabilities/index.mjs +3 -1
- package/dist/lib/neutral/capabilities/index.mjs.map +1 -1
- package/dist/lib/neutral/chunk-FDNICBZZ.mjs +18 -0
- package/dist/lib/neutral/chunk-FDNICBZZ.mjs.map +7 -0
- package/dist/lib/neutral/chunk-J5LGTIGS.mjs +10 -0
- package/dist/lib/neutral/chunk-J5LGTIGS.mjs.map +7 -0
- package/dist/lib/neutral/chunk-ZOIZTRMG.mjs +44 -0
- package/dist/lib/neutral/chunk-ZOIZTRMG.mjs.map +7 -0
- package/dist/lib/neutral/components/index.mjs +191 -147
- package/dist/lib/neutral/components/index.mjs.map +4 -4
- package/dist/lib/neutral/containers/index.mjs +3 -1
- package/dist/lib/neutral/containers/index.mjs.map +1 -1
- package/dist/lib/neutral/index.mjs +5 -6
- package/dist/lib/neutral/meta.json +1 -1
- package/dist/lib/neutral/meta.mjs +2 -1
- package/dist/lib/neutral/plugin.mjs +2 -1
- package/dist/lib/neutral/plugin.mjs.map +1 -1
- package/dist/lib/neutral/{react-surface-MD3CVY2N.mjs → react-surface-IL4CW7ND.mjs} +3 -1
- package/dist/lib/neutral/{react-surface-MD3CVY2N.mjs.map → react-surface-IL4CW7ND.mjs.map} +1 -1
- package/dist/lib/neutral/translations.mjs +9 -7
- package/dist/lib/neutral/translations.mjs.map +3 -3
- package/dist/lib/neutral/types/index.mjs +4 -5
- package/dist/types/dx.config.d.ts +28 -0
- package/dist/types/dx.config.d.ts.map +1 -0
- package/dist/types/src/capabilities/index.d.ts +1 -1
- package/dist/types/src/capabilities/index.d.ts.map +1 -1
- package/dist/types/src/capabilities/react-surface.d.ts +2 -2
- package/dist/types/src/capabilities/react-surface.d.ts.map +1 -1
- package/dist/types/src/components/Stack/Stack.d.ts +67 -0
- package/dist/types/src/components/Stack/Stack.d.ts.map +1 -0
- package/dist/types/src/components/Stack/index.d.ts +2 -0
- package/dist/types/src/components/Stack/index.d.ts.map +1 -0
- package/dist/types/src/components/index.d.ts +1 -3
- package/dist/types/src/components/index.d.ts.map +1 -1
- package/dist/types/src/containers/StackArticle/StackArticle.d.ts +1 -2
- package/dist/types/src/containers/StackArticle/StackArticle.d.ts.map +1 -1
- package/dist/types/src/containers/StackArticle/StackArticle.stories.d.ts +7 -0
- package/dist/types/src/containers/StackArticle/StackArticle.stories.d.ts.map +1 -0
- package/dist/types/src/meta.d.ts +32 -2
- package/dist/types/src/meta.d.ts.map +1 -1
- package/dist/types/src/translations.d.ts +5 -16
- package/dist/types/src/translations.d.ts.map +1 -1
- package/dist/types/src/types/Stack.d.ts +6 -0
- package/dist/types/src/types/Stack.d.ts.map +1 -0
- package/dist/types/src/types/index.d.ts +1 -2
- package/dist/types/src/types/index.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/dx.config.ts +32 -0
- package/package.json +34 -28
- package/src/StackPlugin.ts +3 -3
- package/src/components/Stack/Stack.tsx +319 -0
- package/src/components/{StackContext → Stack}/index.ts +1 -1
- package/src/components/index.ts +1 -3
- package/src/containers/StackArticle/StackArticle.stories.tsx +122 -0
- package/src/containers/StackArticle/StackArticle.tsx +181 -119
- package/src/meta.ts +3 -26
- package/src/translations.ts +6 -6
- package/src/types/Stack.ts +12 -0
- package/src/types/index.ts +1 -2
- package/dist/lib/neutral/StackArticle-R7IS6TYR.mjs +0 -124
- package/dist/lib/neutral/StackArticle-R7IS6TYR.mjs.map +0 -7
- package/dist/lib/neutral/chunk-RGJSGQGF.mjs +0 -36
- package/dist/lib/neutral/chunk-RGJSGQGF.mjs.map +0 -7
- package/dist/lib/neutral/chunk-T4NSFSPH.mjs +0 -24
- package/dist/lib/neutral/chunk-T4NSFSPH.mjs.map +0 -7
- package/dist/types/src/components/StackContext/StackContext.d.ts +0 -11
- package/dist/types/src/components/StackContext/StackContext.d.ts.map +0 -1
- package/dist/types/src/components/StackContext/index.d.ts +0 -2
- package/dist/types/src/components/StackContext/index.d.ts.map +0 -1
- package/dist/types/src/components/StackSection/CaretDownUp.d.ts +0 -3
- package/dist/types/src/components/StackSection/CaretDownUp.d.ts.map +0 -1
- package/dist/types/src/components/StackSection/StackSection.d.ts +0 -5
- package/dist/types/src/components/StackSection/StackSection.d.ts.map +0 -1
- package/dist/types/src/components/StackSection/index.d.ts +0 -2
- package/dist/types/src/components/StackSection/index.d.ts.map +0 -1
- package/dist/types/src/components/StackSettings/StackSettings.d.ts +0 -6
- package/dist/types/src/components/StackSettings/StackSettings.d.ts.map +0 -1
- package/dist/types/src/components/StackSettings/index.d.ts +0 -2
- package/dist/types/src/components/StackSettings/index.d.ts.map +0 -1
- package/dist/types/src/types/stack.d.ts +0 -18
- package/dist/types/src/types/stack.d.ts.map +0 -1
- package/dist/types/src/types/types.d.ts +0 -44
- package/dist/types/src/types/types.d.ts.map +0 -1
- package/src/components/StackContext/StackContext.tsx +0 -25
- package/src/components/StackSection/CaretDownUp.tsx +0 -30
- package/src/components/StackSection/StackSection.tsx +0 -123
- package/src/components/StackSection/index.ts +0 -5
- package/src/components/StackSettings/StackSettings.tsx +0 -28
- package/src/components/StackSettings/index.ts +0 -5
- package/src/types/stack.ts +0 -26
- package/src/types/types.ts +0 -46
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
// src/types/stack.ts
|
|
2
|
-
import * as Schema from "effect/Schema";
|
|
3
|
-
import { DXN, Type } from "@dxos/echo";
|
|
4
|
-
var SectionSchema = Schema.Struct({
|
|
5
|
-
height: Schema.optional(Schema.Number),
|
|
6
|
-
// Space for data that isn't stack-specific but is specific to this view instance.
|
|
7
|
-
// e.g. cover/fill for an image
|
|
8
|
-
custom: Schema.optional(Schema.Record({
|
|
9
|
-
key: Schema.String,
|
|
10
|
-
value: Schema.Any
|
|
11
|
-
}))
|
|
12
|
-
});
|
|
13
|
-
var StackViewType = Schema.Struct({
|
|
14
|
-
sections: Schema.Record({
|
|
15
|
-
key: Schema.String,
|
|
16
|
-
value: SectionSchema
|
|
17
|
-
})
|
|
18
|
-
}).pipe(Type.makeObject(DXN.make("org.dxos.type.stackView", "0.1.0")));
|
|
19
|
-
|
|
20
|
-
export {
|
|
21
|
-
SectionSchema,
|
|
22
|
-
StackViewType
|
|
23
|
-
};
|
|
24
|
-
//# sourceMappingURL=chunk-T4NSFSPH.mjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/types/stack.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\n\nimport { DXN, Type } from '@dxos/echo';\n\n// All section metadata needs to be optional/have defaults.\n// Any objects added to the collection will start with the section defaults.\n// If an object is removed from the collection without removing the section metadata this is fine.\n// Stack components should clean-up the superfluous data on future edits.\n\nexport const SectionSchema = Schema.Struct({\n height: Schema.optional(Schema.Number),\n // Space for data that isn't stack-specific but is specific to this view instance.\n // e.g. cover/fill for an image\n custom: Schema.optional(Schema.Record({ key: Schema.String, value: Schema.Any })),\n});\n\n// TODO(wittjosiah): This needs a relation to be connected to a stack.\nexport const StackViewType = Schema.Struct({\n sections: Schema.Record({ key: Schema.String, value: SectionSchema }),\n}).pipe(Type.makeObject(DXN.make('org.dxos.type.stackView', '0.1.0')));\n\nexport type StackViewType = Type.InstanceType<typeof StackViewType>;\n"],
|
|
5
|
-
"mappings": ";AAIA,YAAYA,YAAY;AAExB,SAASC,KAAKC,YAAY;AAOnB,IAAMC,gBAAuBC,cAAO;EACzCC,QAAeC,gBAAgBC,aAAM;;;EAGrCC,QAAeF,gBAAgBG,cAAO;IAAEC,KAAYC;IAAQC,OAAcC;EAAI,CAAA,CAAA;AAChF,CAAA;AAGO,IAAMC,gBAAuBV,cAAO;EACzCW,UAAiBN,cAAO;IAAEC,KAAYC;IAAQC,OAAOT;EAAc,CAAA;AACrE,CAAA,EAAGa,KAAKd,KAAKe,WAAWhB,IAAIiB,KAAK,2BAA2B,OAAA,CAAA,CAAA;",
|
|
6
|
-
"names": ["Schema", "DXN", "Type", "SectionSchema", "Struct", "height", "optional", "Number", "custom", "Record", "key", "String", "value", "Any", "StackViewType", "sections", "pipe", "makeObject", "make"]
|
|
7
|
-
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { type AddSectionPosition } from '#types';
|
|
2
|
-
export type StackContextValue = {
|
|
3
|
-
attendableId: string;
|
|
4
|
-
onCollapse: (id: string, collapsed: boolean) => void;
|
|
5
|
-
onNavigate: (id: string) => Promise<void>;
|
|
6
|
-
onDelete: (id: string) => Promise<void>;
|
|
7
|
-
onAdd: (id: string, position: AddSectionPosition) => void;
|
|
8
|
-
};
|
|
9
|
-
export declare const StackContext: import("react").Context<StackContextValue>;
|
|
10
|
-
export declare const useStack: () => StackContextValue;
|
|
11
|
-
//# sourceMappingURL=StackContext.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"StackContext.d.ts","sourceRoot":"","sources":["../../../../../src/components/StackContext/StackContext.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACrD,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1C,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACxC,KAAK,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAC3D,CAAC;AAEF,eAAO,MAAM,YAAY,4CAMvB,CAAC;AAEH,eAAO,MAAM,QAAQ,yBAAiC,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/StackContext/index.ts"],"names":[],"mappings":"AAIA,cAAc,gBAAgB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CaretDownUp.d.ts","sourceRoot":"","sources":["../../../../../src/components/StackSection/CaretDownUp.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAE7D,eAAO,MAAM,WAAW,2BAA4B,wBAAwB,CAAC,KAAK,CAAC,sBAuBlF,CAAC"}
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { type StackSectionItem } from '#types';
|
|
3
|
-
export type StackSectionProps = StackSectionItem;
|
|
4
|
-
export declare const StackSection: ({ id, view, object, metadata: { icon }, }: StackSectionProps) => React.JSX.Element;
|
|
5
|
-
//# sourceMappingURL=StackSection.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"StackSection.d.ts","sourceRoot":"","sources":["../../../../../src/components/StackSection/StackSection.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAUjD,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAO/C,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,CAAC;AAEjD,eAAO,MAAM,YAAY,8CAKtB,iBAAiB,sBA6FnB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/StackSection/index.ts"],"names":[],"mappings":"AAIA,cAAc,gBAAgB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"StackSettings.d.ts","sourceRoot":"","sources":["../../../../../src/components/StackSettings/StackSettings.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAEjD,eAAO,MAAM,aAAa,iBAAkB;IAAE,QAAQ,EAAE,kBAAkB,CAAA;CAAE,sBAe3E,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/StackSettings/index.ts"],"names":[],"mappings":"AAIA,cAAc,iBAAiB,CAAC"}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import * as Schema from 'effect/Schema';
|
|
2
|
-
import { Type } from '@dxos/echo';
|
|
3
|
-
export declare const SectionSchema: Schema.Struct<{
|
|
4
|
-
height: Schema.optional<typeof Schema.Number>;
|
|
5
|
-
custom: Schema.optional<Schema.Record$<typeof Schema.String, typeof Schema.Any>>;
|
|
6
|
-
}>;
|
|
7
|
-
export declare const StackViewType: Type.Obj<{
|
|
8
|
-
readonly sections: {
|
|
9
|
-
readonly [x: string]: {
|
|
10
|
-
readonly height?: number | undefined;
|
|
11
|
-
readonly custom?: {
|
|
12
|
-
readonly [x: string]: any;
|
|
13
|
-
} | undefined;
|
|
14
|
-
};
|
|
15
|
-
};
|
|
16
|
-
}, Schema.Struct.Fields>;
|
|
17
|
-
export type StackViewType = Type.InstanceType<typeof StackViewType>;
|
|
18
|
-
//# sourceMappingURL=stack.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../../../src/types/stack.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AAExC,OAAO,EAAO,IAAI,EAAE,MAAM,YAAY,CAAC;AAOvC,eAAO,MAAM,aAAa;;;EAKxB,CAAC;AAGH,eAAO,MAAM,aAAa;;;;;;;;;wBAE4C,CAAC;AAEvE,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import { type FC } from 'react';
|
|
2
|
-
import { type Collection, type Obj } from '@dxos/echo';
|
|
3
|
-
import { type Label } from '@dxos/react-ui';
|
|
4
|
-
import { type StackItemSize } from '@dxos/react-ui-stack';
|
|
5
|
-
export type AddSectionPosition = 'before' | 'after' | 'beforeAll' | 'afterAll';
|
|
6
|
-
export type CollapsedSections = Record<string, boolean>;
|
|
7
|
-
export type CollectionItem = Collection.Collection['objects'][number];
|
|
8
|
-
export type StackSectionView = {
|
|
9
|
-
title?: string;
|
|
10
|
-
size?: StackItemSize;
|
|
11
|
-
height?: number;
|
|
12
|
-
collapsed?: boolean;
|
|
13
|
-
custom?: Record<string, any>;
|
|
14
|
-
};
|
|
15
|
-
type StackSectionAction = {
|
|
16
|
-
id: string;
|
|
17
|
-
testId: string;
|
|
18
|
-
type: string | [string, {
|
|
19
|
-
ns: string;
|
|
20
|
-
}];
|
|
21
|
-
label: string | [string, {
|
|
22
|
-
ns: string;
|
|
23
|
-
}];
|
|
24
|
-
icon: FC<{
|
|
25
|
-
className?: string;
|
|
26
|
-
size?: number;
|
|
27
|
-
}>;
|
|
28
|
-
};
|
|
29
|
-
export type StackSectionMetadata = {
|
|
30
|
-
icon?: string;
|
|
31
|
-
placeholder?: Label;
|
|
32
|
-
viewActions?: (item: CollectionItem) => StackSectionAction;
|
|
33
|
-
};
|
|
34
|
-
export type StackSectionItem = {
|
|
35
|
-
id: string;
|
|
36
|
-
object: Obj.Unknown;
|
|
37
|
-
view: StackSectionView;
|
|
38
|
-
metadata: StackSectionMetadata;
|
|
39
|
-
};
|
|
40
|
-
export type StackSettingsProps = {
|
|
41
|
-
separation: boolean;
|
|
42
|
-
};
|
|
43
|
-
export {};
|
|
44
|
-
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,GAAG,EAAE,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE1D,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,OAAO,GAAG,WAAW,GAAG,UAAU,CAAC;AAE/E,MAAM,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAExD,MAAM,MAAM,cAAc,GAAG,UAAU,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC9B,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACzC,IAAI,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACjD,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,kBAAkB,CAAC;CAC5D,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC;IACpB,IAAI,EAAE,gBAAgB,CAAC;IACvB,QAAQ,EAAE,oBAAoB,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAAE,UAAU,EAAE,OAAO,CAAA;CAAE,CAAC"}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2024 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import { createContext, useContext } from 'react';
|
|
6
|
-
|
|
7
|
-
import { type AddSectionPosition } from '#types';
|
|
8
|
-
|
|
9
|
-
export type StackContextValue = {
|
|
10
|
-
attendableId: string;
|
|
11
|
-
onCollapse: (id: string, collapsed: boolean) => void;
|
|
12
|
-
onNavigate: (id: string) => Promise<void>;
|
|
13
|
-
onDelete: (id: string) => Promise<void>;
|
|
14
|
-
onAdd: (id: string, position: AddSectionPosition) => void;
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
export const StackContext = createContext<StackContextValue>({
|
|
18
|
-
attendableId: '',
|
|
19
|
-
onCollapse: () => {},
|
|
20
|
-
onNavigate: async () => {},
|
|
21
|
-
onDelete: async () => {},
|
|
22
|
-
onAdd: () => {},
|
|
23
|
-
});
|
|
24
|
-
|
|
25
|
-
export const useStack = () => useContext(StackContext);
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2024 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import React, { type ComponentPropsWithoutRef } from 'react';
|
|
6
|
-
|
|
7
|
-
export const CaretDownUp = ({ children, ...props }: ComponentPropsWithoutRef<'svg'>) => {
|
|
8
|
-
return (
|
|
9
|
-
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' {...props}>
|
|
10
|
-
<rect width='256' height='256' fill='none' />
|
|
11
|
-
<polyline
|
|
12
|
-
points='80 224 128 176 176 224'
|
|
13
|
-
fill='none'
|
|
14
|
-
stroke='currentColor'
|
|
15
|
-
strokeLinecap='round'
|
|
16
|
-
strokeLinejoin='round'
|
|
17
|
-
strokeWidth='16'
|
|
18
|
-
/>
|
|
19
|
-
<polyline
|
|
20
|
-
points='80 32 128 80 176 32'
|
|
21
|
-
fill='none'
|
|
22
|
-
stroke='currentColor'
|
|
23
|
-
strokeLinecap='round'
|
|
24
|
-
strokeLinejoin='round'
|
|
25
|
-
strokeWidth='16'
|
|
26
|
-
/>
|
|
27
|
-
{children}
|
|
28
|
-
</svg>
|
|
29
|
-
);
|
|
30
|
-
};
|
|
@@ -1,123 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2024 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
|
|
6
|
-
import React, { useMemo, useState } from 'react';
|
|
7
|
-
|
|
8
|
-
import { Surface } from '@dxos/app-framework/ui';
|
|
9
|
-
import { AppSurface } from '@dxos/app-toolkit/ui';
|
|
10
|
-
import { DropdownMenu, Icon, IconButton, useTranslation } from '@dxos/react-ui';
|
|
11
|
-
import { useAttentionAttributes } from '@dxos/react-ui-attention';
|
|
12
|
-
import { StackItem } from '@dxos/react-ui-stack';
|
|
13
|
-
import { getSize, mx } from '@dxos/ui-theme';
|
|
14
|
-
|
|
15
|
-
import { meta } from '#meta';
|
|
16
|
-
import { type StackSectionItem } from '#types';
|
|
17
|
-
|
|
18
|
-
import { useStack } from '../StackContext';
|
|
19
|
-
import { CaretDownUp } from './CaretDownUp';
|
|
20
|
-
|
|
21
|
-
const sectionActionDimensions = 'p-1 my-1 shrink-0 min-h-0 w-(--dx-rail-action) h-min';
|
|
22
|
-
|
|
23
|
-
export type StackSectionProps = StackSectionItem;
|
|
24
|
-
|
|
25
|
-
export const StackSection = ({
|
|
26
|
-
id,
|
|
27
|
-
view,
|
|
28
|
-
object,
|
|
29
|
-
metadata: { icon = 'ph--circle-dashed--regular' },
|
|
30
|
-
}: StackSectionProps) => {
|
|
31
|
-
const { t } = useTranslation(meta.id);
|
|
32
|
-
const { attendableId: parentAttendableId, onNavigate, onAdd, onCollapse, onDelete } = useStack();
|
|
33
|
-
const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);
|
|
34
|
-
const attendableId = `${parentAttendableId}/${object.id}`;
|
|
35
|
-
const attentionAttrs = useAttentionAttributes(attendableId);
|
|
36
|
-
const stackItem = useMemo(() => ({ id }), [id]);
|
|
37
|
-
const data = useMemo(() => ({ attendableId, subject: object }), [object, attendableId]);
|
|
38
|
-
|
|
39
|
-
return (
|
|
40
|
-
<CollapsiblePrimitive.Root asChild open={!view.collapsed} onOpenChange={(nextOpen) => onCollapse?.(id, !nextOpen)}>
|
|
41
|
-
<StackItem.Root item={stackItem} role='section' {...attentionAttrs}>
|
|
42
|
-
<StackItem.Heading classNames='dx-attention-surface'>
|
|
43
|
-
<span className='sr-only'>{view.title}</span>
|
|
44
|
-
<StackItem.HeadingStickyContent>
|
|
45
|
-
<DropdownMenu.Root
|
|
46
|
-
{...{
|
|
47
|
-
open: optionsMenuOpen,
|
|
48
|
-
onOpenChange: setOptionsMenuOpen,
|
|
49
|
-
}}
|
|
50
|
-
>
|
|
51
|
-
<DropdownMenu.Trigger asChild>
|
|
52
|
-
<StackItem.SigilButton>
|
|
53
|
-
<Icon icon={icon} classNames='transition-opacity' />
|
|
54
|
-
</StackItem.SigilButton>
|
|
55
|
-
</DropdownMenu.Trigger>
|
|
56
|
-
<DropdownMenu.Portal>
|
|
57
|
-
<DropdownMenu.Content>
|
|
58
|
-
<DropdownMenu.Viewport>
|
|
59
|
-
{view.collapsed ? (
|
|
60
|
-
<DropdownMenu.Item onClick={() => onNavigate(id)} data-testid='section.navigate-to'>
|
|
61
|
-
<Icon icon='ph--arrow-right--regular' />
|
|
62
|
-
<span className='ms-2 grow'>{t('navigate-to-section.label')}</span>
|
|
63
|
-
</DropdownMenu.Item>
|
|
64
|
-
) : (
|
|
65
|
-
<CollapsiblePrimitive.Trigger asChild>
|
|
66
|
-
<DropdownMenu.Item>
|
|
67
|
-
<CaretDownUp className={getSize(5)} />
|
|
68
|
-
<span className='ms-2 grow'>{t('collapse.label')}</span>
|
|
69
|
-
</DropdownMenu.Item>
|
|
70
|
-
</CollapsiblePrimitive.Trigger>
|
|
71
|
-
)}
|
|
72
|
-
<DropdownMenu.Item onClick={() => onAdd(id, 'before')} data-testid='section.add-before'>
|
|
73
|
-
<Icon icon='ph--arrow-line-up--regular' />
|
|
74
|
-
<span className='ms-2 grow'>{t('add-section-before.label')}</span>
|
|
75
|
-
</DropdownMenu.Item>
|
|
76
|
-
<DropdownMenu.Item onClick={() => onAdd(id, 'after')} data-testid='section.add-after'>
|
|
77
|
-
<Icon icon='ph--arrow-line-down--regular' />
|
|
78
|
-
<span className='ms-2 grow'>{t('add-section-after.label')}</span>
|
|
79
|
-
</DropdownMenu.Item>
|
|
80
|
-
<DropdownMenu.Item onClick={() => onDelete(id)} data-testid='section.remove'>
|
|
81
|
-
<Icon icon='ph--trash--regular' />
|
|
82
|
-
<span className='ms-2 grow'>{t('remove-section.label')}</span>
|
|
83
|
-
</DropdownMenu.Item>
|
|
84
|
-
</DropdownMenu.Viewport>
|
|
85
|
-
<DropdownMenu.Arrow />
|
|
86
|
-
</DropdownMenu.Content>
|
|
87
|
-
</DropdownMenu.Portal>
|
|
88
|
-
</DropdownMenu.Root>
|
|
89
|
-
{view.collapsed ? (
|
|
90
|
-
<CollapsiblePrimitive.Trigger asChild>
|
|
91
|
-
<IconButton
|
|
92
|
-
iconOnly
|
|
93
|
-
variant='ghost'
|
|
94
|
-
label={t('expand.label')}
|
|
95
|
-
icon='ph--caret-up-down--regular'
|
|
96
|
-
classNames={sectionActionDimensions}
|
|
97
|
-
/>
|
|
98
|
-
</CollapsiblePrimitive.Trigger>
|
|
99
|
-
) : (
|
|
100
|
-
<IconButton
|
|
101
|
-
iconOnly
|
|
102
|
-
variant='ghost'
|
|
103
|
-
onClick={() => onNavigate(id)}
|
|
104
|
-
label={t('navigate-to-section.label')}
|
|
105
|
-
icon='ph--arrow-right--regular'
|
|
106
|
-
data-testid='section.navigate-to'
|
|
107
|
-
classNames={sectionActionDimensions}
|
|
108
|
-
/>
|
|
109
|
-
)}
|
|
110
|
-
</StackItem.HeadingStickyContent>
|
|
111
|
-
</StackItem.Heading>
|
|
112
|
-
<CollapsiblePrimitive.Content>
|
|
113
|
-
<Surface.Surface type={AppSurface.Section} data={data} limit={1} placeholder={<></>} />
|
|
114
|
-
</CollapsiblePrimitive.Content>
|
|
115
|
-
{view.collapsed && (
|
|
116
|
-
<StackItem.Content classNames='dx-attention-surface'>
|
|
117
|
-
<h2 className={mx('flex items-center p-4 font-medium')}>{view.title}</h2>
|
|
118
|
-
</StackItem.Content>
|
|
119
|
-
)}
|
|
120
|
-
</StackItem.Root>
|
|
121
|
-
</CollapsiblePrimitive.Root>
|
|
122
|
-
);
|
|
123
|
-
};
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2023 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import React from 'react';
|
|
6
|
-
|
|
7
|
-
import { Input, useTranslation } from '@dxos/react-ui';
|
|
8
|
-
import { Settings as SettingsForm } from '@dxos/react-ui-form';
|
|
9
|
-
|
|
10
|
-
import { meta } from '#meta';
|
|
11
|
-
import { type StackSettingsProps } from '#types';
|
|
12
|
-
|
|
13
|
-
export const StackSettings = ({ settings }: { settings: StackSettingsProps }) => {
|
|
14
|
-
const { t } = useTranslation(meta.id);
|
|
15
|
-
|
|
16
|
-
return (
|
|
17
|
-
<SettingsForm.Viewport>
|
|
18
|
-
<SettingsForm.Section title={t('settings.title', { ns: meta.id })}>
|
|
19
|
-
<SettingsForm.Item title={t('settings.separation.label')} description={t('settings.separation.description')}>
|
|
20
|
-
<Input.Switch
|
|
21
|
-
checked={settings.separation}
|
|
22
|
-
onCheckedChange={(checked) => (settings.separation = !!checked)}
|
|
23
|
-
/>
|
|
24
|
-
</SettingsForm.Item>
|
|
25
|
-
</SettingsForm.Section>
|
|
26
|
-
</SettingsForm.Viewport>
|
|
27
|
-
);
|
|
28
|
-
};
|
package/src/types/stack.ts
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2024 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import * as Schema from 'effect/Schema';
|
|
6
|
-
|
|
7
|
-
import { DXN, Type } from '@dxos/echo';
|
|
8
|
-
|
|
9
|
-
// All section metadata needs to be optional/have defaults.
|
|
10
|
-
// Any objects added to the collection will start with the section defaults.
|
|
11
|
-
// If an object is removed from the collection without removing the section metadata this is fine.
|
|
12
|
-
// Stack components should clean-up the superfluous data on future edits.
|
|
13
|
-
|
|
14
|
-
export const SectionSchema = Schema.Struct({
|
|
15
|
-
height: Schema.optional(Schema.Number),
|
|
16
|
-
// Space for data that isn't stack-specific but is specific to this view instance.
|
|
17
|
-
// e.g. cover/fill for an image
|
|
18
|
-
custom: Schema.optional(Schema.Record({ key: Schema.String, value: Schema.Any })),
|
|
19
|
-
});
|
|
20
|
-
|
|
21
|
-
// TODO(wittjosiah): This needs a relation to be connected to a stack.
|
|
22
|
-
export const StackViewType = Schema.Struct({
|
|
23
|
-
sections: Schema.Record({ key: Schema.String, value: SectionSchema }),
|
|
24
|
-
}).pipe(Type.makeObject(DXN.make('org.dxos.type.stackView', '0.1.0')));
|
|
25
|
-
|
|
26
|
-
export type StackViewType = Type.InstanceType<typeof StackViewType>;
|
package/src/types/types.ts
DELETED
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2023 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import { type FC } from 'react';
|
|
6
|
-
|
|
7
|
-
import { type Collection, type Obj } from '@dxos/echo';
|
|
8
|
-
import { type Label } from '@dxos/react-ui';
|
|
9
|
-
import { type StackItemSize } from '@dxos/react-ui-stack';
|
|
10
|
-
|
|
11
|
-
export type AddSectionPosition = 'before' | 'after' | 'beforeAll' | 'afterAll';
|
|
12
|
-
|
|
13
|
-
export type CollapsedSections = Record<string, boolean>;
|
|
14
|
-
|
|
15
|
-
export type CollectionItem = Collection.Collection['objects'][number];
|
|
16
|
-
|
|
17
|
-
export type StackSectionView = {
|
|
18
|
-
title?: string;
|
|
19
|
-
size?: StackItemSize;
|
|
20
|
-
height?: number;
|
|
21
|
-
collapsed?: boolean;
|
|
22
|
-
custom?: Record<string, any>;
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
type StackSectionAction = {
|
|
26
|
-
id: string;
|
|
27
|
-
testId: string;
|
|
28
|
-
type: string | [string, { ns: string }];
|
|
29
|
-
label: string | [string, { ns: string }];
|
|
30
|
-
icon: FC<{ className?: string; size?: number }>;
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
export type StackSectionMetadata = {
|
|
34
|
-
icon?: string;
|
|
35
|
-
placeholder?: Label;
|
|
36
|
-
viewActions?: (item: CollectionItem) => StackSectionAction;
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
export type StackSectionItem = {
|
|
40
|
-
id: string;
|
|
41
|
-
object: Obj.Unknown;
|
|
42
|
-
view: StackSectionView;
|
|
43
|
-
metadata: StackSectionMetadata;
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
export type StackSettingsProps = { separation: boolean };
|