@cratis/scene.blueprint.default 4.34.0 → 4.36.0
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/ComponentName.ts +12 -0
- package/defaultBlueprintComponents.ts +5 -1
- package/dist/cjs/ComponentName.js +4 -0
- package/dist/cjs/ComponentName.js.map +1 -1
- package/dist/cjs/defaultBlueprint.js +1 -0
- package/dist/cjs/defaultBlueprint.js.map +1 -1
- package/dist/cjs/defaultBlueprintComponentMetadata.js +1 -0
- package/dist/cjs/defaultBlueprintComponentMetadata.js.map +1 -1
- package/dist/cjs/defaultBlueprintComponents.js +9 -1
- package/dist/cjs/defaultBlueprintComponents.js.map +1 -1
- package/dist/cjs/foundation/ActivityFeed.js +122 -0
- package/dist/cjs/foundation/ActivityFeed.js.map +1 -0
- package/dist/cjs/foundation/AvatarStack.js +73 -0
- package/dist/cjs/foundation/AvatarStack.js.map +1 -0
- package/dist/cjs/foundation/ChecklistSection.js +174 -0
- package/dist/cjs/foundation/ChecklistSection.js.map +1 -0
- package/dist/cjs/foundation/FileUploader.js +218 -0
- package/dist/cjs/foundation/FileUploader.js.map +1 -0
- package/dist/cjs/foundation/FileUploaderHandler.js +17 -0
- package/dist/cjs/foundation/FileUploaderHandler.js.map +1 -0
- package/dist/cjs/foundation/activityModel.js +63 -0
- package/dist/cjs/foundation/activityModel.js.map +1 -0
- package/dist/cjs/foundation/avatarModel.js +42 -0
- package/dist/cjs/foundation/avatarModel.js.map +1 -0
- package/dist/cjs/foundation/checklistModel.js +59 -0
- package/dist/cjs/foundation/checklistModel.js.map +1 -0
- package/dist/cjs/foundation/formatting.js +11 -0
- package/dist/cjs/foundation/formatting.js.map +1 -1
- package/dist/cjs/foundation/foundationComponentMetadata.js +26 -0
- package/dist/cjs/foundation/foundationComponentMetadata.js.map +1 -1
- package/dist/cjs/foundation/foundationDescriptors.js +128 -0
- package/dist/cjs/foundation/foundationDescriptors.js.map +1 -1
- package/dist/cjs/foundation/foundationSamples.js +114 -0
- package/dist/cjs/foundation/foundationSamples.js.map +1 -1
- package/dist/cjs/foundation/foundationStrings.js +15 -0
- package/dist/cjs/foundation/foundationStrings.js.map +1 -1
- package/dist/cjs/foundation/uploadModel.js +71 -0
- package/dist/cjs/foundation/uploadModel.js.map +1 -0
- package/dist/cjs/index.js +33 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/preview-host/ApplicationHost.js +48 -27
- package/dist/cjs/preview-host/ApplicationHost.js.map +1 -1
- package/dist/esm/ComponentName.d.ts +5 -1
- package/dist/esm/ComponentName.d.ts.map +1 -1
- package/dist/esm/ComponentName.js +4 -0
- package/dist/esm/ComponentName.js.map +1 -1
- package/dist/esm/defaultBlueprint.js +1 -0
- package/dist/esm/defaultBlueprint.js.map +1 -1
- package/dist/esm/defaultBlueprintComponentMetadata.js +1 -0
- package/dist/esm/defaultBlueprintComponentMetadata.js.map +1 -1
- package/dist/esm/defaultBlueprintComponents.d.ts.map +1 -1
- package/dist/esm/defaultBlueprintComponents.js +9 -1
- package/dist/esm/defaultBlueprintComponents.js.map +1 -1
- package/dist/esm/foundation/ActivityFeed.d.ts +3 -0
- package/dist/esm/foundation/ActivityFeed.d.ts.map +1 -0
- package/dist/esm/foundation/ActivityFeed.js +120 -0
- package/dist/esm/foundation/ActivityFeed.js.map +1 -0
- package/dist/esm/foundation/AvatarStack.d.ts +3 -0
- package/dist/esm/foundation/AvatarStack.d.ts.map +1 -0
- package/dist/esm/foundation/AvatarStack.js +71 -0
- package/dist/esm/foundation/AvatarStack.js.map +1 -0
- package/dist/esm/foundation/ChecklistSection.d.ts +3 -0
- package/dist/esm/foundation/ChecklistSection.d.ts.map +1 -0
- package/dist/esm/foundation/ChecklistSection.js +172 -0
- package/dist/esm/foundation/ChecklistSection.js.map +1 -0
- package/dist/esm/foundation/FileUploader.d.ts +3 -0
- package/dist/esm/foundation/FileUploader.d.ts.map +1 -0
- package/dist/esm/foundation/FileUploader.js +216 -0
- package/dist/esm/foundation/FileUploader.js.map +1 -0
- package/dist/esm/foundation/FileUploaderHandler.d.ts +8 -0
- package/dist/esm/foundation/FileUploaderHandler.d.ts.map +1 -0
- package/dist/esm/foundation/FileUploaderHandler.js +14 -0
- package/dist/esm/foundation/FileUploaderHandler.js.map +1 -0
- package/dist/esm/foundation/Foundation.stories.d.ts +8 -0
- package/dist/esm/foundation/Foundation.stories.d.ts.map +1 -1
- package/dist/esm/foundation/Foundation.stories.js +8 -0
- package/dist/esm/foundation/Foundation.stories.js.map +1 -1
- package/dist/esm/foundation/activityModel.d.ts +22 -0
- package/dist/esm/foundation/activityModel.d.ts.map +1 -0
- package/dist/esm/foundation/activityModel.js +58 -0
- package/dist/esm/foundation/activityModel.js.map +1 -0
- package/dist/esm/foundation/avatarModel.d.ts +11 -0
- package/dist/esm/foundation/avatarModel.d.ts.map +1 -0
- package/dist/esm/foundation/avatarModel.js +38 -0
- package/dist/esm/foundation/avatarModel.js.map +1 -0
- package/dist/esm/foundation/checklistModel.d.ts +17 -0
- package/dist/esm/foundation/checklistModel.d.ts.map +1 -0
- package/dist/esm/foundation/checklistModel.js +53 -0
- package/dist/esm/foundation/checklistModel.js.map +1 -0
- package/dist/esm/foundation/formatting.d.ts +1 -0
- package/dist/esm/foundation/formatting.d.ts.map +1 -1
- package/dist/esm/foundation/formatting.js +11 -1
- package/dist/esm/foundation/formatting.js.map +1 -1
- package/dist/esm/foundation/foundationComponentMetadata.d.ts.map +1 -1
- package/dist/esm/foundation/foundationComponentMetadata.js +26 -0
- package/dist/esm/foundation/foundationComponentMetadata.js.map +1 -1
- package/dist/esm/foundation/foundationDescriptors.d.ts.map +1 -1
- package/dist/esm/foundation/foundationDescriptors.js +128 -0
- package/dist/esm/foundation/foundationDescriptors.js.map +1 -1
- package/dist/esm/foundation/foundationSamples.d.ts.map +1 -1
- package/dist/esm/foundation/foundationSamples.js +114 -0
- package/dist/esm/foundation/foundationSamples.js.map +1 -1
- package/dist/esm/foundation/foundationStrings.d.ts +15 -0
- package/dist/esm/foundation/foundationStrings.d.ts.map +1 -1
- package/dist/esm/foundation/foundationStrings.js +15 -0
- package/dist/esm/foundation/foundationStrings.js.map +1 -1
- package/dist/esm/foundation/index.d.ts +9 -0
- package/dist/esm/foundation/index.d.ts.map +1 -1
- package/dist/esm/foundation/index.js +9 -0
- package/dist/esm/foundation/index.js.map +1 -1
- package/dist/esm/foundation/uploadModel.d.ts +31 -0
- package/dist/esm/foundation/uploadModel.d.ts.map +1 -0
- package/dist/esm/foundation/uploadModel.js +65 -0
- package/dist/esm/foundation/uploadModel.js.map +1 -0
- package/dist/esm/index.js +10 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/preview-host/ApplicationHost.d.ts +5 -2
- package/dist/esm/preview-host/ApplicationHost.d.ts.map +1 -1
- package/dist/esm/preview-host/ApplicationHost.js +50 -29
- package/dist/esm/preview-host/ApplicationHost.js.map +1 -1
- package/dist/esm/tsconfig.tsbuildinfo +1 -1
- package/foundation/ActivityFeed.tsx +61 -0
- package/foundation/AvatarStack.tsx +43 -0
- package/foundation/ChecklistSection.tsx +80 -0
- package/foundation/FileUploader.tsx +122 -0
- package/foundation/FileUploaderHandler.tsx +22 -0
- package/foundation/Foundation.stories.tsx +8 -0
- package/foundation/activityModel.ts +65 -0
- package/foundation/avatarModel.ts +36 -0
- package/foundation/checklistModel.ts +62 -0
- package/foundation/formatting.ts +9 -0
- package/foundation/foundationComponentMetadata.ts +4 -0
- package/foundation/foundationDescriptors.ts +79 -0
- package/foundation/foundationSamples.ts +29 -0
- package/foundation/foundationStrings.ts +15 -0
- package/foundation/index.ts +9 -0
- package/foundation/uploadModel.ts +66 -0
- package/package.json +8 -8
- package/preview-host/ApplicationHost.tsx +57 -16
- package/shell/layout.css +234 -0
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { useMemo } from 'react';
|
|
3
|
+
import { readOptionalString } from '../shell/elementProperties.js';
|
|
4
|
+
import { readActivity, groupByDay, ActivityKind } from './activityModel.js';
|
|
5
|
+
import { readComponentState, ComponentState } from './ComponentState.js';
|
|
6
|
+
import { FoundationIcon } from './FoundationIcon.js';
|
|
7
|
+
import { readLocale, formatDay, formatDate } from './formatting.js';
|
|
8
|
+
import { readFoundationStrings } from './foundationStrings.js';
|
|
9
|
+
import { FoundationFrame } from './StateFrame.js';
|
|
10
|
+
|
|
11
|
+
const icons = {
|
|
12
|
+
[ActivityKind.Comment]: 'user',
|
|
13
|
+
[ActivityKind.Change]: 'refresh',
|
|
14
|
+
[ActivityKind.Status]: 'check',
|
|
15
|
+
[ActivityKind.System]: 'info'
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* The `activityFeed` component: what happened to a record, newest first, under a heading for each day.
|
|
19
|
+
*
|
|
20
|
+
* `entries` carry an id, who (`actor`), what (`action`), the instant (`at`, ISO 8601), a `kind` and an optional `body` such as a comment's
|
|
21
|
+
* text. The feed is an ordered list; each entry names its kind in words for assistive technology as well as by icon, and its time is a
|
|
22
|
+
* `time` element formatted for the locale. Content is supplied by the application - this only lays it out - and a feed of any length
|
|
23
|
+
* stays one list. `order="ascending"` reads oldest first, and `timeZone` fixes the zone days are cut in.
|
|
24
|
+
*/ function ActivityFeed({ element, interactions }) {
|
|
25
|
+
const entries = useMemo(()=>readActivity(element.properties.entries), [
|
|
26
|
+
element.properties.entries
|
|
27
|
+
]);
|
|
28
|
+
const strings = readFoundationStrings(element);
|
|
29
|
+
const locale = readLocale(element);
|
|
30
|
+
const timeZone = readOptionalString(element, 'timeZone');
|
|
31
|
+
const days = useMemo(()=>groupByDay(entries, element.properties.order === 'ascending', timeZone), [
|
|
32
|
+
entries,
|
|
33
|
+
element.properties.order,
|
|
34
|
+
timeZone
|
|
35
|
+
]);
|
|
36
|
+
const state = readComponentState(element, entries.length > 0);
|
|
37
|
+
const kindText = {
|
|
38
|
+
comment: strings.activityComment,
|
|
39
|
+
change: strings.activityChange,
|
|
40
|
+
status: strings.activityStatus,
|
|
41
|
+
system: strings.activitySystem
|
|
42
|
+
};
|
|
43
|
+
const emptyElement = state === ComponentState.Empty ? {
|
|
44
|
+
...element,
|
|
45
|
+
properties: {
|
|
46
|
+
emptyHeadline: strings.activityEmpty,
|
|
47
|
+
...element.properties
|
|
48
|
+
}
|
|
49
|
+
} : element;
|
|
50
|
+
return /*#__PURE__*/ jsx(FoundationFrame, {
|
|
51
|
+
element: emptyElement,
|
|
52
|
+
interactions: interactions,
|
|
53
|
+
name: "activity-feed",
|
|
54
|
+
state: state,
|
|
55
|
+
skeleton: [
|
|
56
|
+
60,
|
|
57
|
+
90,
|
|
58
|
+
70,
|
|
59
|
+
85
|
|
60
|
+
],
|
|
61
|
+
children: (state === ComponentState.Ready || state === ComponentState.Partial) && days.map((day)=>/*#__PURE__*/ jsxs("section", {
|
|
62
|
+
className: "foundation-activity-day",
|
|
63
|
+
children: [
|
|
64
|
+
/*#__PURE__*/ jsx("h3", {
|
|
65
|
+
className: "foundation-activity-heading",
|
|
66
|
+
children: /*#__PURE__*/ jsx("time", {
|
|
67
|
+
dateTime: day.day,
|
|
68
|
+
children: formatDay(day.day, locale)
|
|
69
|
+
})
|
|
70
|
+
}),
|
|
71
|
+
/*#__PURE__*/ jsx("ol", {
|
|
72
|
+
className: "foundation-activity-list",
|
|
73
|
+
children: day.entries.map((entry)=>/*#__PURE__*/ jsxs("li", {
|
|
74
|
+
className: "foundation-activity-entry",
|
|
75
|
+
"data-kind": entry.kind,
|
|
76
|
+
children: [
|
|
77
|
+
/*#__PURE__*/ jsx("span", {
|
|
78
|
+
className: "foundation-activity-icon",
|
|
79
|
+
children: /*#__PURE__*/ jsx(FoundationIcon, {
|
|
80
|
+
name: icons[entry.kind]
|
|
81
|
+
})
|
|
82
|
+
}),
|
|
83
|
+
/*#__PURE__*/ jsxs("div", {
|
|
84
|
+
className: "foundation-activity-content",
|
|
85
|
+
children: [
|
|
86
|
+
/*#__PURE__*/ jsxs("p", {
|
|
87
|
+
className: "foundation-activity-summary",
|
|
88
|
+
children: [
|
|
89
|
+
/*#__PURE__*/ jsx("span", {
|
|
90
|
+
className: "foundation-visually-hidden",
|
|
91
|
+
children: `${kindText[entry.kind]}: `
|
|
92
|
+
}),
|
|
93
|
+
/*#__PURE__*/ jsx("strong", {
|
|
94
|
+
children: entry.actor
|
|
95
|
+
}),
|
|
96
|
+
" ",
|
|
97
|
+
entry.action
|
|
98
|
+
]
|
|
99
|
+
}),
|
|
100
|
+
entry.body && /*#__PURE__*/ jsx("p", {
|
|
101
|
+
className: "foundation-activity-body",
|
|
102
|
+
children: entry.body
|
|
103
|
+
}),
|
|
104
|
+
/*#__PURE__*/ jsx("time", {
|
|
105
|
+
className: "foundation-count",
|
|
106
|
+
dateTime: entry.at,
|
|
107
|
+
children: formatDate(entry.at, locale, true)
|
|
108
|
+
})
|
|
109
|
+
]
|
|
110
|
+
})
|
|
111
|
+
]
|
|
112
|
+
}, entry.id))
|
|
113
|
+
})
|
|
114
|
+
]
|
|
115
|
+
}, day.day))
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
export { ActivityFeed };
|
|
120
|
+
//# sourceMappingURL=ActivityFeed.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ActivityFeed.js","sources":["../../../foundation/ActivityFeed.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useMemo } from 'react';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { readOptionalString } from '../shell/elementProperties';\nimport { ActivityKind, groupByDay, readActivity } from './activityModel';\nimport { ComponentState, readComponentState } from './ComponentState';\nimport { FoundationIcon, FoundationIconName } from './FoundationIcon';\nimport { formatDate, formatDay, readLocale } from './formatting';\nimport { readFoundationStrings } from './foundationStrings';\nimport { FoundationFrame } from './StateFrame';\n\nconst icons: Record<ActivityKind, FoundationIconName> = {\n [ActivityKind.Comment]: 'user', [ActivityKind.Change]: 'refresh', [ActivityKind.Status]: 'check', [ActivityKind.System]: 'info',\n};\n\n/**\n * The `activityFeed` component: what happened to a record, newest first, under a heading for each day.\n *\n * `entries` carry an id, who (`actor`), what (`action`), the instant (`at`, ISO 8601), a `kind` and an optional `body` such as a comment's\n * text. The feed is an ordered list; each entry names its kind in words for assistive technology as well as by icon, and its time is a\n * `time` element formatted for the locale. Content is supplied by the application - this only lays it out - and a feed of any length\n * stays one list. `order=\"ascending\"` reads oldest first, and `timeZone` fixes the zone days are cut in.\n */\nexport function ActivityFeed({ element, interactions }: RegisteredComponentProps) {\n const entries = useMemo(() => readActivity(element.properties.entries), [element.properties.entries]);\n const strings = readFoundationStrings(element);\n const locale = readLocale(element);\n const timeZone = readOptionalString(element, 'timeZone');\n const days = useMemo(() => groupByDay(entries, element.properties.order === 'ascending', timeZone), [entries, element.properties.order, timeZone]);\n const state = readComponentState(element, entries.length > 0);\n const kindText: Record<ActivityKind, string> = { comment: strings.activityComment, change: strings.activityChange, status: strings.activityStatus, system: strings.activitySystem };\n const emptyElement = state === ComponentState.Empty ? { ...element, properties: { emptyHeadline: strings.activityEmpty, ...element.properties } } : element;\n\n return (\n <FoundationFrame element={emptyElement} interactions={interactions} name='activity-feed' state={state} skeleton={[60, 90, 70, 85]}>\n {(state === ComponentState.Ready || state === ComponentState.Partial) && days.map(day => (\n <section key={day.day} className='foundation-activity-day'>\n <h3 className='foundation-activity-heading'><time dateTime={day.day}>{formatDay(day.day, locale)}</time></h3>\n <ol className='foundation-activity-list'>\n {day.entries.map(entry => (\n <li key={entry.id} className='foundation-activity-entry' data-kind={entry.kind}>\n <span className='foundation-activity-icon'><FoundationIcon name={icons[entry.kind]} /></span>\n <div className='foundation-activity-content'>\n <p className='foundation-activity-summary'>\n <span className='foundation-visually-hidden'>{`${kindText[entry.kind]}: `}</span>\n <strong>{entry.actor}</strong> {entry.action}\n </p>\n {entry.body && <p className='foundation-activity-body'>{entry.body}</p>}\n <time className='foundation-count' dateTime={entry.at}>{formatDate(entry.at, locale, true)}</time>\n </div>\n </li>\n ))}\n </ol>\n </section>\n ))}\n </FoundationFrame>\n );\n}\n\n"],"names":["icons","ActivityKind","Comment","Change","Status","System","ActivityFeed","element","interactions","entries","useMemo","readActivity","properties","strings","readFoundationStrings","locale","readLocale","timeZone","readOptionalString","days","groupByDay","order","state","readComponentState","length","kindText","comment","activityComment","change","activityChange","status","activityStatus","system","activitySystem","emptyElement","ComponentState","Empty","emptyHeadline","activityEmpty","_jsx","FoundationFrame","name","skeleton","Ready","Partial","map","day","_jsxs","section","className","h3","time","dateTime","formatDay","ol","entry","li","data-kind","kind","span","FoundationIcon","div","p","strong","actor","action","body","at","formatDate","id"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AvatarStack.d.ts","sourceRoot":"","sources":["../../../foundation/AvatarStack.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAa/D,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,wBAAwB,+BAyB9E"}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { useMemo } from 'react';
|
|
3
|
+
import { readPeople, visiblePeople, initialsOf } from './avatarModel.js';
|
|
4
|
+
import { readComponentState, ComponentState } from './ComponentState.js';
|
|
5
|
+
import { readFoundationStrings, formatText } from './foundationStrings.js';
|
|
6
|
+
import { FoundationFrame } from './StateFrame.js';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* The `avatarStack` component: overlapping avatars for the people on a record, with a "+N" chip for the rest.
|
|
10
|
+
*
|
|
11
|
+
* `people` are names with an optional picture; without one the avatar shows the person's initials. The stack is a labelled group ("5 people"),
|
|
12
|
+
* each avatar is an image named after its person, and the overflow chip says how many more in words. `max` is how many are shown (4 by
|
|
13
|
+
* default) and `size` is `small` or `medium`.
|
|
14
|
+
*/ function AvatarStack({ element, interactions }) {
|
|
15
|
+
const people = useMemo(()=>readPeople(element.properties.people), [
|
|
16
|
+
element.properties.people
|
|
17
|
+
]);
|
|
18
|
+
const strings = readFoundationStrings(element);
|
|
19
|
+
const { shown, hidden } = visiblePeople(people, typeof element.properties.max === 'number' ? element.properties.max : 4);
|
|
20
|
+
const state = readComponentState(element, people.length > 0);
|
|
21
|
+
const size = element.properties.size === 'small' ? 'small' : 'medium';
|
|
22
|
+
return /*#__PURE__*/ jsx(FoundationFrame, {
|
|
23
|
+
element: element,
|
|
24
|
+
interactions: interactions,
|
|
25
|
+
name: "avatar-stack",
|
|
26
|
+
state: state,
|
|
27
|
+
skeleton: [
|
|
28
|
+
35
|
|
29
|
+
],
|
|
30
|
+
children: (state === ComponentState.Ready || state === ComponentState.Partial) && /*#__PURE__*/ jsxs("ul", {
|
|
31
|
+
className: "foundation-avatars",
|
|
32
|
+
role: "group",
|
|
33
|
+
"aria-label": formatText(strings.avatarPeople, {
|
|
34
|
+
count: people.length
|
|
35
|
+
}),
|
|
36
|
+
"data-size": size,
|
|
37
|
+
children: [
|
|
38
|
+
shown.map((person)=>/*#__PURE__*/ jsx("li", {
|
|
39
|
+
className: "foundation-avatar",
|
|
40
|
+
role: "img",
|
|
41
|
+
"aria-label": person.name,
|
|
42
|
+
title: person.name,
|
|
43
|
+
children: person.imageUrl ? /*#__PURE__*/ jsx("img", {
|
|
44
|
+
src: person.imageUrl,
|
|
45
|
+
alt: ""
|
|
46
|
+
}) : /*#__PURE__*/ jsx("span", {
|
|
47
|
+
"aria-hidden": "true",
|
|
48
|
+
children: initialsOf(person.name)
|
|
49
|
+
})
|
|
50
|
+
}, person.name)),
|
|
51
|
+
hidden > 0 && /*#__PURE__*/ jsx("li", {
|
|
52
|
+
className: "foundation-avatar foundation-avatar-more",
|
|
53
|
+
role: "img",
|
|
54
|
+
"aria-label": formatText(strings.avatarOverflow, {
|
|
55
|
+
count: hidden
|
|
56
|
+
}),
|
|
57
|
+
children: /*#__PURE__*/ jsxs("span", {
|
|
58
|
+
"aria-hidden": "true",
|
|
59
|
+
children: [
|
|
60
|
+
"+",
|
|
61
|
+
hidden
|
|
62
|
+
]
|
|
63
|
+
})
|
|
64
|
+
})
|
|
65
|
+
]
|
|
66
|
+
})
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
export { AvatarStack };
|
|
71
|
+
//# sourceMappingURL=AvatarStack.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AvatarStack.js","sources":["../../../foundation/AvatarStack.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useMemo } from 'react';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { initialsOf, readPeople, visiblePeople } from './avatarModel';\nimport { ComponentState, readComponentState } from './ComponentState';\nimport { formatText, readFoundationStrings } from './foundationStrings';\nimport { FoundationFrame } from './StateFrame';\n\n/**\n * The `avatarStack` component: overlapping avatars for the people on a record, with a \"+N\" chip for the rest.\n *\n * `people` are names with an optional picture; without one the avatar shows the person's initials. The stack is a labelled group (\"5 people\"),\n * each avatar is an image named after its person, and the overflow chip says how many more in words. `max` is how many are shown (4 by\n * default) and `size` is `small` or `medium`.\n */\nexport function AvatarStack({ element, interactions }: RegisteredComponentProps) {\n const people = useMemo(() => readPeople(element.properties.people), [element.properties.people]);\n const strings = readFoundationStrings(element);\n const { shown, hidden } = visiblePeople(people, typeof element.properties.max === 'number' ? element.properties.max : 4);\n const state = readComponentState(element, people.length > 0);\n const size = element.properties.size === 'small' ? 'small' : 'medium';\n\n return (\n <FoundationFrame element={element} interactions={interactions} name='avatar-stack' state={state} skeleton={[35]}>\n {(state === ComponentState.Ready || state === ComponentState.Partial) && (\n <ul className='foundation-avatars' role='group' aria-label={formatText(strings.avatarPeople, { count: people.length })} data-size={size}>\n {shown.map(person => (\n <li key={person.name} className='foundation-avatar' role='img' aria-label={person.name} title={person.name}>\n {person.imageUrl ? <img src={person.imageUrl} alt='' /> : <span aria-hidden='true'>{initialsOf(person.name)}</span>}\n </li>\n ))}\n {hidden > 0 && (\n <li className='foundation-avatar foundation-avatar-more' role='img' aria-label={formatText(strings.avatarOverflow, { count: hidden })}>\n <span aria-hidden='true'>+{hidden}</span>\n </li>\n )}\n </ul>\n )}\n </FoundationFrame>\n );\n}\n"],"names":["AvatarStack","element","interactions","people","useMemo","readPeople","properties","strings","readFoundationStrings","shown","hidden","visiblePeople","max","state","readComponentState","length","size","_jsx","FoundationFrame","name","skeleton","ComponentState","Ready","Partial","_jsxs","ul","className","role","aria-label","formatText","avatarPeople","count","data-size","map","person","li","title","imageUrl","img","src","alt","span","aria-hidden","initialsOf","avatarOverflow"],"mappings":";;;;;;;AAUA;;;;;;AAMC,IACM,SAASA,WAAAA,CAAY,EAAEC,OAAO,EAAEC,YAAY,EAA4B,EAAA;IAC3E,MAAMC,MAAAA,GAASC,QAAQ,IAAMC,UAAAA,CAAWJ,QAAQK,UAAU,CAACH,MAAM,CAAA,EAAG;QAACF,OAAAA,CAAQK,UAAU,CAACH;AAAO,KAAA,CAAA;AAC/F,IAAA,MAAMI,UAAUC,qBAAAA,CAAsBP,OAAAA,CAAAA;AACtC,IAAA,MAAM,EAAEQ,KAAK,EAAEC,MAAM,EAAE,GAAGC,cAAcR,MAAAA,EAAQ,OAAOF,QAAQK,UAAU,CAACM,GAAG,KAAK,QAAA,GAAWX,QAAQK,UAAU,CAACM,GAAG,GAAG,CAAA,CAAA;AACtH,IAAA,MAAMC,KAAAA,GAAQC,kBAAAA,CAAmBb,OAAAA,EAASE,MAAAA,CAAOY,MAAM,GAAG,CAAA,CAAA;AAC1D,IAAA,MAAMC,OAAOf,OAAAA,CAAQK,UAAU,CAACU,IAAI,KAAK,UAAU,OAAA,GAAU,QAAA;AAE7D,IAAA,qBACIC,GAAA,CAACC,eAAAA,EAAAA;QAAgBjB,OAAAA,EAASA,OAAAA;QAASC,YAAAA,EAAcA,YAAAA;QAAciB,IAAAA,EAAK,cAAA;QAAeN,KAAAA,EAAOA,KAAAA;QAAOO,QAAAA,EAAU;AAAC,YAAA;AAAG,SAAA;kBAC1G,CAACP,KAAAA,KAAUQ,cAAAA,CAAeC,KAAK,IAAIT,UAAUQ,cAAAA,CAAeE,OAAO,mBAChEC,IAAA,CAACC,IAAAA,EAAAA;YAAGC,SAAAA,EAAU,oBAAA;YAAqBC,IAAAA,EAAK,OAAA;YAAQC,YAAAA,EAAYC,UAAAA,CAAWtB,OAAAA,CAAQuB,YAAY,EAAE;AAAEC,gBAAAA,KAAAA,EAAO5B,OAAOY;AAAO,aAAA,CAAA;YAAIiB,WAAAA,EAAWhB,IAAAA;;AAC9HP,gBAAAA,KAAAA,CAAMwB,GAAG,CAACC,CAAAA,MAAAA,iBACPjB,GAAA,CAACkB,IAAAA,EAAAA;wBAAqBT,SAAAA,EAAU,mBAAA;wBAAoBC,IAAAA,EAAK,KAAA;AAAMC,wBAAAA,YAAAA,EAAYM,OAAOf,IAAI;AAAEiB,wBAAAA,KAAAA,EAAOF,OAAOf,IAAI;kCACrGe,MAAAA,CAAOG,QAAQ,iBAAGpB,GAAA,CAACqB,KAAAA,EAAAA;AAAIC,4BAAAA,GAAAA,EAAKL,OAAOG,QAAQ;4BAAEG,GAAAA,EAAI;2CAAQvB,GAAA,CAACwB,MAAAA,EAAAA;4BAAKC,aAAAA,EAAY,MAAA;AAAQC,4BAAAA,QAAAA,EAAAA,UAAAA,CAAWT,OAAOf,IAAI;;AADrGe,qBAAAA,EAAAA,MAAAA,CAAOf,IAAI,CAAA,CAAA;AAIvBT,gBAAAA,MAAAA,GAAS,mBACNO,GAAA,CAACkB,IAAAA,EAAAA;oBAAGT,SAAAA,EAAU,0CAAA;oBAA2CC,IAAAA,EAAK,KAAA;oBAAMC,YAAAA,EAAYC,UAAAA,CAAWtB,OAAAA,CAAQqC,cAAc,EAAE;wBAAEb,KAAAA,EAAOrB;AAAO,qBAAA,CAAA;AAC/H,oBAAA,QAAA,gBAAAc,IAAA,CAACiB,MAAAA,EAAAA;wBAAKC,aAAAA,EAAY,MAAA;;AAAO,4BAAA,GAAA;AAAEhC,4BAAAA;;;;;;;AAOvD;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChecklistSection.d.ts","sourceRoot":"","sources":["../../../foundation/ChecklistSection.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAkB,MAAM,qBAAqB,CAAC;AAiB/E,wBAAgB,gBAAgB,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,wBAAwB,+BA0DnG"}
|
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { useMemo, useState, useEffect } from 'react';
|
|
3
|
+
import { useValueOutput } from '@cratis/scene.react';
|
|
4
|
+
import { readChecklist, doneTaskIds, completed, isOverdue, toggleTask } from './checklistModel.js';
|
|
5
|
+
import { readComponentState, ComponentState } from './ComponentState.js';
|
|
6
|
+
import { FoundationIcon } from './FoundationIcon.js';
|
|
7
|
+
import { readLocale, formatDate } from './formatting.js';
|
|
8
|
+
import { readFoundationStrings, formatText } from './foundationStrings.js';
|
|
9
|
+
import { readPermissionRule } from './PermissionRule.js';
|
|
10
|
+
import { FoundationFrame } from './StateFrame.js';
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* The `checklistSection` component: sections of tasks, each with its owner and due date, and a progress bar per section.
|
|
14
|
+
*
|
|
15
|
+
* `sections` give the structure (`title`, and `items` with `id`, `label`, `owner`, `due`, `done`). Ticking a task publishes the ids of all
|
|
16
|
+
* done tasks as the `value` output and runs the behaviors attached to the element. An open task past its due date says "Overdue" in
|
|
17
|
+
* words as well as in color. Progress is a labelled progress bar, so "2 of 5 complete" is read, not just seen. With `editPermission`
|
|
18
|
+
* not enabled the tasks are shown and cannot be changed.
|
|
19
|
+
*/ function ChecklistSection({ element, interactions, bindingOutputs }) {
|
|
20
|
+
const supplied = useMemo(()=>readChecklist(element.properties.sections), [
|
|
21
|
+
element.properties.sections
|
|
22
|
+
]);
|
|
23
|
+
const suppliedKey = JSON.stringify(supplied);
|
|
24
|
+
const [groups, setGroups] = useState(supplied);
|
|
25
|
+
const strings = readFoundationStrings(element);
|
|
26
|
+
const locale = readLocale(element);
|
|
27
|
+
const state = readComponentState(element, supplied.some((group)=>group.items.length > 0));
|
|
28
|
+
const locked = readPermissionRule(element, 'editPermission') !== 'enabled';
|
|
29
|
+
const now = useMemo(()=>typeof element.properties.today === 'string' ? new Date(element.properties.today) : new Date(), [
|
|
30
|
+
element.properties.today
|
|
31
|
+
]);
|
|
32
|
+
useEffect(()=>setGroups(supplied), [
|
|
33
|
+
suppliedKey
|
|
34
|
+
]);
|
|
35
|
+
useValueOutput(bindingOutputs, doneTaskIds(groups));
|
|
36
|
+
return /*#__PURE__*/ jsx(FoundationFrame, {
|
|
37
|
+
element: element,
|
|
38
|
+
interactions: interactions,
|
|
39
|
+
name: "checklist",
|
|
40
|
+
state: state,
|
|
41
|
+
skeleton: [
|
|
42
|
+
40,
|
|
43
|
+
100,
|
|
44
|
+
90,
|
|
45
|
+
95
|
|
46
|
+
],
|
|
47
|
+
children: (state === ComponentState.Ready || state === ComponentState.Partial) && groups.map((group, groupIndex)=>{
|
|
48
|
+
const done = completed(group);
|
|
49
|
+
const total = group.items.length;
|
|
50
|
+
return /*#__PURE__*/ jsxs("section", {
|
|
51
|
+
className: "foundation-checklist-group",
|
|
52
|
+
"aria-labelledby": `${element.id}-group-${groupIndex}`,
|
|
53
|
+
children: [
|
|
54
|
+
/*#__PURE__*/ jsxs("header", {
|
|
55
|
+
className: "foundation-checklist-header",
|
|
56
|
+
children: [
|
|
57
|
+
/*#__PURE__*/ jsx("h3", {
|
|
58
|
+
id: `${element.id}-group-${groupIndex}`,
|
|
59
|
+
children: group.title
|
|
60
|
+
}),
|
|
61
|
+
/*#__PURE__*/ jsx("span", {
|
|
62
|
+
className: "foundation-count",
|
|
63
|
+
children: formatText(strings.checklistProgress, {
|
|
64
|
+
done,
|
|
65
|
+
total
|
|
66
|
+
})
|
|
67
|
+
})
|
|
68
|
+
]
|
|
69
|
+
}),
|
|
70
|
+
/*#__PURE__*/ jsx("div", {
|
|
71
|
+
className: "foundation-progress",
|
|
72
|
+
role: "progressbar",
|
|
73
|
+
"aria-label": formatText(strings.checklistItemProgress, {
|
|
74
|
+
title: group.title
|
|
75
|
+
}),
|
|
76
|
+
"aria-valuemin": 0,
|
|
77
|
+
"aria-valuemax": total,
|
|
78
|
+
"aria-valuenow": done,
|
|
79
|
+
"aria-valuetext": formatText(strings.checklistProgress, {
|
|
80
|
+
done,
|
|
81
|
+
total
|
|
82
|
+
}),
|
|
83
|
+
children: /*#__PURE__*/ jsx("span", {
|
|
84
|
+
className: "foundation-progress-bar",
|
|
85
|
+
style: {
|
|
86
|
+
inlineSize: total === 0 ? '0%' : `${done / total * 100}%`
|
|
87
|
+
}
|
|
88
|
+
})
|
|
89
|
+
}),
|
|
90
|
+
total === 0 ? /*#__PURE__*/ jsx("p", {
|
|
91
|
+
className: "foundation-count",
|
|
92
|
+
children: strings.checklistNone
|
|
93
|
+
}) : /*#__PURE__*/ jsx("ul", {
|
|
94
|
+
className: "foundation-checklist-items",
|
|
95
|
+
children: group.items.map((item)=>{
|
|
96
|
+
const overdue = isOverdue(item, now);
|
|
97
|
+
return /*#__PURE__*/ jsxs("li", {
|
|
98
|
+
className: "foundation-checklist-item",
|
|
99
|
+
"data-done": item.done,
|
|
100
|
+
"data-overdue": overdue,
|
|
101
|
+
children: [
|
|
102
|
+
/*#__PURE__*/ jsxs("label", {
|
|
103
|
+
className: "foundation-check",
|
|
104
|
+
children: [
|
|
105
|
+
/*#__PURE__*/ jsx("input", {
|
|
106
|
+
type: "checkbox",
|
|
107
|
+
checked: item.done,
|
|
108
|
+
disabled: locked,
|
|
109
|
+
onChange: ()=>{
|
|
110
|
+
setGroups(toggleTask(groups, item.id));
|
|
111
|
+
interactions?.onChange?.();
|
|
112
|
+
}
|
|
113
|
+
}),
|
|
114
|
+
/*#__PURE__*/ jsx("span", {
|
|
115
|
+
className: "foundation-checklist-label",
|
|
116
|
+
children: item.label
|
|
117
|
+
})
|
|
118
|
+
]
|
|
119
|
+
}),
|
|
120
|
+
/*#__PURE__*/ jsxs("span", {
|
|
121
|
+
className: "foundation-checklist-meta",
|
|
122
|
+
children: [
|
|
123
|
+
item.owner && /*#__PURE__*/ jsxs("span", {
|
|
124
|
+
children: [
|
|
125
|
+
/*#__PURE__*/ jsx("span", {
|
|
126
|
+
className: "foundation-visually-hidden",
|
|
127
|
+
children: `${strings.checklistOwner}: `
|
|
128
|
+
}),
|
|
129
|
+
/*#__PURE__*/ jsx(FoundationIcon, {
|
|
130
|
+
name: "user"
|
|
131
|
+
}),
|
|
132
|
+
" ",
|
|
133
|
+
item.owner
|
|
134
|
+
]
|
|
135
|
+
}),
|
|
136
|
+
item.due && /*#__PURE__*/ jsxs("span", {
|
|
137
|
+
children: [
|
|
138
|
+
/*#__PURE__*/ jsx("span", {
|
|
139
|
+
className: "foundation-visually-hidden",
|
|
140
|
+
children: `${strings.checklistDue}: `
|
|
141
|
+
}),
|
|
142
|
+
/*#__PURE__*/ jsx("time", {
|
|
143
|
+
dateTime: item.due,
|
|
144
|
+
children: formatDate(item.due, locale)
|
|
145
|
+
}),
|
|
146
|
+
overdue && /*#__PURE__*/ jsxs("strong", {
|
|
147
|
+
className: "foundation-overdue",
|
|
148
|
+
children: [
|
|
149
|
+
" · ",
|
|
150
|
+
/*#__PURE__*/ jsx(FoundationIcon, {
|
|
151
|
+
name: "alert"
|
|
152
|
+
}),
|
|
153
|
+
" ",
|
|
154
|
+
strings.checklistOverdue
|
|
155
|
+
]
|
|
156
|
+
})
|
|
157
|
+
]
|
|
158
|
+
})
|
|
159
|
+
]
|
|
160
|
+
})
|
|
161
|
+
]
|
|
162
|
+
}, item.id);
|
|
163
|
+
})
|
|
164
|
+
})
|
|
165
|
+
]
|
|
166
|
+
}, group.title + groupIndex);
|
|
167
|
+
})
|
|
168
|
+
});
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
export { ChecklistSection };
|
|
172
|
+
//# sourceMappingURL=ChecklistSection.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChecklistSection.js","sources":["../../../foundation/ChecklistSection.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useEffect, useMemo, useState } from 'react';\nimport { RegisteredComponentProps, useValueOutput } from '@cratis/scene.react';\nimport { ChecklistGroup, completed, doneTaskIds, isOverdue, readChecklist, toggleTask } from './checklistModel';\nimport { ComponentState, readComponentState } from './ComponentState';\nimport { FoundationIcon } from './FoundationIcon';\nimport { formatDate, readLocale } from './formatting';\nimport { formatText, readFoundationStrings } from './foundationStrings';\nimport { readPermissionRule } from './PermissionRule';\nimport { FoundationFrame } from './StateFrame';\n\n/**\n * The `checklistSection` component: sections of tasks, each with its owner and due date, and a progress bar per section.\n *\n * `sections` give the structure (`title`, and `items` with `id`, `label`, `owner`, `due`, `done`). Ticking a task publishes the ids of all\n * done tasks as the `value` output and runs the behaviors attached to the element. An open task past its due date says \"Overdue\" in\n * words as well as in color. Progress is a labelled progress bar, so \"2 of 5 complete\" is read, not just seen. With `editPermission`\n * not enabled the tasks are shown and cannot be changed.\n */\nexport function ChecklistSection({ element, interactions, bindingOutputs }: RegisteredComponentProps) {\n const supplied = useMemo(() => readChecklist(element.properties.sections), [element.properties.sections]);\n const suppliedKey = JSON.stringify(supplied);\n const [groups, setGroups] = useState<ChecklistGroup[]>(supplied);\n const strings = readFoundationStrings(element);\n const locale = readLocale(element);\n const state = readComponentState(element, supplied.some(group => group.items.length > 0));\n const locked = readPermissionRule(element, 'editPermission') !== 'enabled';\n const now = useMemo(() => (typeof element.properties.today === 'string' ? new Date(element.properties.today) : new Date()), [element.properties.today]);\n\n useEffect(() => setGroups(supplied), [suppliedKey]);\n useValueOutput(bindingOutputs, doneTaskIds(groups));\n\n return (\n <FoundationFrame element={element} interactions={interactions} name='checklist' state={state} skeleton={[40, 100, 90, 95]}>\n {(state === ComponentState.Ready || state === ComponentState.Partial) && groups.map((group, groupIndex) => {\n const done = completed(group);\n const total = group.items.length;\n return (\n <section key={group.title + groupIndex} className='foundation-checklist-group' aria-labelledby={`${element.id}-group-${groupIndex}`}>\n <header className='foundation-checklist-header'>\n <h3 id={`${element.id}-group-${groupIndex}`}>{group.title}</h3>\n <span className='foundation-count'>{formatText(strings.checklistProgress, { done, total })}</span>\n </header>\n <div className='foundation-progress' role='progressbar' aria-label={formatText(strings.checklistItemProgress, { title: group.title })}\n aria-valuemin={0} aria-valuemax={total} aria-valuenow={done} aria-valuetext={formatText(strings.checklistProgress, { done, total })}>\n <span className='foundation-progress-bar' style={{ inlineSize: total === 0 ? '0%' : `${(done / total) * 100}%` }} />\n </div>\n {total === 0 ? <p className='foundation-count'>{strings.checklistNone}</p> : (\n <ul className='foundation-checklist-items'>\n {group.items.map(item => {\n const overdue = isOverdue(item, now);\n return (\n <li key={item.id} className='foundation-checklist-item' data-done={item.done} data-overdue={overdue}>\n <label className='foundation-check'>\n <input type='checkbox' checked={item.done} disabled={locked} onChange={() => { setGroups(toggleTask(groups, item.id)); interactions?.onChange?.(); }} />\n <span className='foundation-checklist-label'>{item.label}</span>\n </label>\n <span className='foundation-checklist-meta'>\n {item.owner && <span><span className='foundation-visually-hidden'>{`${strings.checklistOwner}: `}</span><FoundationIcon name='user' /> {item.owner}</span>}\n {item.due && (\n <span>\n <span className='foundation-visually-hidden'>{`${strings.checklistDue}: `}</span>\n <time dateTime={item.due}>{formatDate(item.due, locale)}</time>\n {overdue && <strong className='foundation-overdue'> · <FoundationIcon name='alert' /> {strings.checklistOverdue}</strong>}\n </span>\n )}\n </span>\n </li>\n );\n })}\n </ul>\n )}\n </section>\n );\n })}\n </FoundationFrame>\n );\n}\n"],"names":["ChecklistSection","element","interactions","bindingOutputs","supplied","useMemo","readChecklist","properties","sections","suppliedKey","JSON","stringify","groups","setGroups","useState","strings","readFoundationStrings","locale","readLocale","state","readComponentState","some","group","items","length","locked","readPermissionRule","now","today","Date","useEffect","useValueOutput","doneTaskIds","_jsx","FoundationFrame","name","skeleton","ComponentState","Ready","Partial","map","groupIndex","done","completed","total","_jsxs","section","className","aria-labelledby","id","header","h3","title","span","formatText","checklistProgress","div","role","aria-label","checklistItemProgress","aria-valuemin","aria-valuemax","aria-valuenow","aria-valuetext","style","inlineSize","p","checklistNone","ul","item","overdue","isOverdue","li","data-done","data-overdue","label","input","type","checked","disabled","onChange","toggleTask","owner","checklistOwner","FoundationIcon","due","checklistDue","time","dateTime","formatDate","strong","checklistOverdue"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FileUploader.d.ts","sourceRoot":"","sources":["../../../foundation/FileUploader.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAkB,MAAM,qBAAqB,CAAC;AA0B/E,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,wBAAwB,+BA2F/F"}
|