@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.
Files changed (95) hide show
  1. package/dist/lib/neutral/StackArticle-DDKRSUE7.mjs +199 -0
  2. package/dist/lib/neutral/StackArticle-DDKRSUE7.mjs.map +7 -0
  3. package/dist/lib/neutral/StackPlugin.mjs +6 -4
  4. package/dist/lib/neutral/StackPlugin.mjs.map +4 -4
  5. package/dist/lib/neutral/capabilities/index.mjs +3 -1
  6. package/dist/lib/neutral/capabilities/index.mjs.map +1 -1
  7. package/dist/lib/neutral/chunk-FDNICBZZ.mjs +18 -0
  8. package/dist/lib/neutral/chunk-FDNICBZZ.mjs.map +7 -0
  9. package/dist/lib/neutral/chunk-J5LGTIGS.mjs +10 -0
  10. package/dist/lib/neutral/chunk-J5LGTIGS.mjs.map +7 -0
  11. package/dist/lib/neutral/chunk-ZOIZTRMG.mjs +44 -0
  12. package/dist/lib/neutral/chunk-ZOIZTRMG.mjs.map +7 -0
  13. package/dist/lib/neutral/components/index.mjs +191 -147
  14. package/dist/lib/neutral/components/index.mjs.map +4 -4
  15. package/dist/lib/neutral/containers/index.mjs +3 -1
  16. package/dist/lib/neutral/containers/index.mjs.map +1 -1
  17. package/dist/lib/neutral/index.mjs +5 -6
  18. package/dist/lib/neutral/meta.json +1 -1
  19. package/dist/lib/neutral/meta.mjs +2 -1
  20. package/dist/lib/neutral/plugin.mjs +2 -1
  21. package/dist/lib/neutral/plugin.mjs.map +1 -1
  22. package/dist/lib/neutral/{react-surface-MD3CVY2N.mjs → react-surface-IL4CW7ND.mjs} +3 -1
  23. package/dist/lib/neutral/{react-surface-MD3CVY2N.mjs.map → react-surface-IL4CW7ND.mjs.map} +1 -1
  24. package/dist/lib/neutral/translations.mjs +9 -7
  25. package/dist/lib/neutral/translations.mjs.map +3 -3
  26. package/dist/lib/neutral/types/index.mjs +4 -5
  27. package/dist/types/dx.config.d.ts +28 -0
  28. package/dist/types/dx.config.d.ts.map +1 -0
  29. package/dist/types/src/capabilities/index.d.ts +1 -1
  30. package/dist/types/src/capabilities/index.d.ts.map +1 -1
  31. package/dist/types/src/capabilities/react-surface.d.ts +2 -2
  32. package/dist/types/src/capabilities/react-surface.d.ts.map +1 -1
  33. package/dist/types/src/components/Stack/Stack.d.ts +67 -0
  34. package/dist/types/src/components/Stack/Stack.d.ts.map +1 -0
  35. package/dist/types/src/components/Stack/index.d.ts +2 -0
  36. package/dist/types/src/components/Stack/index.d.ts.map +1 -0
  37. package/dist/types/src/components/index.d.ts +1 -3
  38. package/dist/types/src/components/index.d.ts.map +1 -1
  39. package/dist/types/src/containers/StackArticle/StackArticle.d.ts +1 -2
  40. package/dist/types/src/containers/StackArticle/StackArticle.d.ts.map +1 -1
  41. package/dist/types/src/containers/StackArticle/StackArticle.stories.d.ts +7 -0
  42. package/dist/types/src/containers/StackArticle/StackArticle.stories.d.ts.map +1 -0
  43. package/dist/types/src/meta.d.ts +32 -2
  44. package/dist/types/src/meta.d.ts.map +1 -1
  45. package/dist/types/src/translations.d.ts +5 -16
  46. package/dist/types/src/translations.d.ts.map +1 -1
  47. package/dist/types/src/types/Stack.d.ts +6 -0
  48. package/dist/types/src/types/Stack.d.ts.map +1 -0
  49. package/dist/types/src/types/index.d.ts +1 -2
  50. package/dist/types/src/types/index.d.ts.map +1 -1
  51. package/dist/types/tsconfig.tsbuildinfo +1 -1
  52. package/dx.config.ts +32 -0
  53. package/package.json +34 -28
  54. package/src/StackPlugin.ts +3 -3
  55. package/src/components/Stack/Stack.tsx +319 -0
  56. package/src/components/{StackContext → Stack}/index.ts +1 -1
  57. package/src/components/index.ts +1 -3
  58. package/src/containers/StackArticle/StackArticle.stories.tsx +122 -0
  59. package/src/containers/StackArticle/StackArticle.tsx +181 -119
  60. package/src/meta.ts +3 -26
  61. package/src/translations.ts +6 -6
  62. package/src/types/Stack.ts +12 -0
  63. package/src/types/index.ts +1 -2
  64. package/dist/lib/neutral/StackArticle-R7IS6TYR.mjs +0 -124
  65. package/dist/lib/neutral/StackArticle-R7IS6TYR.mjs.map +0 -7
  66. package/dist/lib/neutral/chunk-RGJSGQGF.mjs +0 -36
  67. package/dist/lib/neutral/chunk-RGJSGQGF.mjs.map +0 -7
  68. package/dist/lib/neutral/chunk-T4NSFSPH.mjs +0 -24
  69. package/dist/lib/neutral/chunk-T4NSFSPH.mjs.map +0 -7
  70. package/dist/types/src/components/StackContext/StackContext.d.ts +0 -11
  71. package/dist/types/src/components/StackContext/StackContext.d.ts.map +0 -1
  72. package/dist/types/src/components/StackContext/index.d.ts +0 -2
  73. package/dist/types/src/components/StackContext/index.d.ts.map +0 -1
  74. package/dist/types/src/components/StackSection/CaretDownUp.d.ts +0 -3
  75. package/dist/types/src/components/StackSection/CaretDownUp.d.ts.map +0 -1
  76. package/dist/types/src/components/StackSection/StackSection.d.ts +0 -5
  77. package/dist/types/src/components/StackSection/StackSection.d.ts.map +0 -1
  78. package/dist/types/src/components/StackSection/index.d.ts +0 -2
  79. package/dist/types/src/components/StackSection/index.d.ts.map +0 -1
  80. package/dist/types/src/components/StackSettings/StackSettings.d.ts +0 -6
  81. package/dist/types/src/components/StackSettings/StackSettings.d.ts.map +0 -1
  82. package/dist/types/src/components/StackSettings/index.d.ts +0 -2
  83. package/dist/types/src/components/StackSettings/index.d.ts.map +0 -1
  84. package/dist/types/src/types/stack.d.ts +0 -18
  85. package/dist/types/src/types/stack.d.ts.map +0 -1
  86. package/dist/types/src/types/types.d.ts +0 -44
  87. package/dist/types/src/types/types.d.ts.map +0 -1
  88. package/src/components/StackContext/StackContext.tsx +0 -25
  89. package/src/components/StackSection/CaretDownUp.tsx +0 -30
  90. package/src/components/StackSection/StackSection.tsx +0 -123
  91. package/src/components/StackSection/index.ts +0 -5
  92. package/src/components/StackSettings/StackSettings.tsx +0 -28
  93. package/src/components/StackSettings/index.ts +0 -5
  94. package/src/types/stack.ts +0 -26
  95. 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,2 +0,0 @@
1
- export * from './StackContext';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/StackContext/index.ts"],"names":[],"mappings":"AAIA,cAAc,gBAAgB,CAAC"}
@@ -1,3 +0,0 @@
1
- import React, { type ComponentPropsWithoutRef } from 'react';
2
- export declare const CaretDownUp: ({ children, ...props }: ComponentPropsWithoutRef<'svg'>) => React.JSX.Element;
3
- //# sourceMappingURL=CaretDownUp.d.ts.map
@@ -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,2 +0,0 @@
1
- export * from './StackSection';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/StackSection/index.ts"],"names":[],"mappings":"AAIA,cAAc,gBAAgB,CAAC"}
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- import { type StackSettingsProps } from '#types';
3
- export declare const StackSettings: ({ settings }: {
4
- settings: StackSettingsProps;
5
- }) => React.JSX.Element;
6
- //# sourceMappingURL=StackSettings.d.ts.map
@@ -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,2 +0,0 @@
1
- export * from './StackSettings';
2
- //# sourceMappingURL=index.d.ts.map
@@ -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,5 +0,0 @@
1
- //
2
- // Copyright 2024 DXOS.org
3
- //
4
-
5
- export * from './StackSection';
@@ -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
- };
@@ -1,5 +0,0 @@
1
- //
2
- // Copyright 2023 DXOS.org
3
- //
4
-
5
- export * from './StackSettings';
@@ -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>;
@@ -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 };