@dxos/plugin-status-bar 0.8.1-staging.5be625a → 0.8.1-staging.9eaf14f
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/browser/index.mjs +86 -205
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +85 -205
- package/dist/lib/node/index.cjs.map +4 -4
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +86 -205
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/StatusBarPanel.d.ts.map +1 -1
- package/dist/types/src/components/index.d.ts +0 -1
- package/dist/types/src/components/index.d.ts.map +1 -1
- package/dist/types/src/translations.d.ts +1 -1
- package/dist/types/src/translations.d.ts.map +1 -1
- package/package.json +13 -13
- package/src/components/StatusBarPanel.tsx +8 -25
- package/src/components/index.ts +0 -1
- package/src/translations.ts +4 -14
- package/dist/types/src/components/FeedbackForm.d.ts +0 -6
- package/dist/types/src/components/FeedbackForm.d.ts.map +0 -1
- package/src/components/FeedbackForm.tsx +0 -117
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/plugins/plugin-status-bar/src/
|
|
1
|
+
{"inputs":{"packages/plugins/plugin-status-bar/src/components/StatusBar.tsx":{"bytes":7783,"imports":[{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/plugins/plugin-status-bar/src/meta.ts":{"bytes":1277,"imports":[],"format":"esm"},"packages/plugins/plugin-status-bar/src/components/VersionNumber.tsx":{"bytes":11172,"imports":[{"path":"date-fns/formatDistance","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-client","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-status-bar/src/components/StatusBar.tsx","kind":"import-statement","original":"./StatusBar"},{"path":"packages/plugins/plugin-status-bar/src/meta.ts","kind":"import-statement","original":"../meta"}],"format":"esm"},"packages/plugins/plugin-status-bar/src/components/StatusBarPanel.tsx":{"bytes":5831,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-status-bar/src/components/StatusBar.tsx","kind":"import-statement","original":"./StatusBar"},{"path":"packages/plugins/plugin-status-bar/src/components/VersionNumber.tsx","kind":"import-statement","original":"./VersionNumber"},{"path":"packages/plugins/plugin-status-bar/src/meta.ts","kind":"import-statement","original":"../meta"}],"format":"esm"},"packages/plugins/plugin-status-bar/src/components/index.ts":{"bytes":624,"imports":[{"path":"packages/plugins/plugin-status-bar/src/components/StatusBar.tsx","kind":"import-statement","original":"./StatusBar"},{"path":"packages/plugins/plugin-status-bar/src/components/StatusBarPanel.tsx","kind":"import-statement","original":"./StatusBarPanel"}],"format":"esm"},"packages/plugins/plugin-status-bar/src/translations.ts":{"bytes":3815,"imports":[{"path":"packages/plugins/plugin-status-bar/src/meta.ts","kind":"import-statement","original":"./meta"}],"format":"esm"},"packages/plugins/plugin-status-bar/src/StatusBarPlugin.tsx":{"bytes":6167,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-status-bar/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/plugins/plugin-status-bar/src/components/VersionNumber.tsx","kind":"import-statement","original":"./components/VersionNumber"},{"path":"packages/plugins/plugin-status-bar/src/meta.ts","kind":"import-statement","original":"./meta"},{"path":"packages/plugins/plugin-status-bar/src/translations.ts","kind":"import-statement","original":"./translations"}],"format":"esm"},"packages/plugins/plugin-status-bar/src/index.ts":{"bytes":699,"imports":[{"path":"packages/plugins/plugin-status-bar/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/plugins/plugin-status-bar/src/meta.ts","kind":"import-statement","original":"./meta"},{"path":"packages/plugins/plugin-status-bar/src/StatusBarPlugin.tsx","kind":"import-statement","original":"./StatusBarPlugin"}],"format":"esm"}},"outputs":{"packages/plugins/plugin-status-bar/dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":18335},"packages/plugins/plugin-status-bar/dist/lib/node-esm/index.mjs":{"imports":[{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"date-fns/formatDistance","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-client","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true}],"exports":["STATUS_BAR_PLUGIN","StatusBar","StatusBarActions","StatusBarPanel","StatusBarPlugin","meta"],"entryPoint":"packages/plugins/plugin-status-bar/src/index.ts","inputs":{"packages/plugins/plugin-status-bar/src/components/StatusBar.tsx":{"bytesInOutput":1948},"packages/plugins/plugin-status-bar/src/components/index.ts":{"bytesInOutput":0},"packages/plugins/plugin-status-bar/src/components/StatusBarPanel.tsx":{"bytesInOutput":1703},"packages/plugins/plugin-status-bar/src/components/VersionNumber.tsx":{"bytesInOutput":3210},"packages/plugins/plugin-status-bar/src/meta.ts":{"bytesInOutput":202},"packages/plugins/plugin-status-bar/src/index.ts":{"bytesInOutput":0},"packages/plugins/plugin-status-bar/src/StatusBarPlugin.tsx":{"bytesInOutput":1317},"packages/plugins/plugin-status-bar/src/translations.ts":{"bytesInOutput":608}},"bytes":9819}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusBarPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/StatusBarPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,
|
|
1
|
+
{"version":3,"file":"StatusBarPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/StatusBarPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AASxC,eAAO,MAAM,gBAAgB,yBAsB5B,CAAC;AAEF,eAAO,MAAM,cAAc,yBAQ1B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type useTranslation } from '@dxos/react-ui';
|
|
2
2
|
import { STATUS_BAR_PLUGIN } from './meta';
|
|
3
|
-
type StatusBarTranslationKeys = 'plugin name' | '
|
|
3
|
+
type StatusBarTranslationKeys = 'plugin name' | 'warning title' | 'technology preview message' | 'learn more label' | 'released message' | 'see release label' | 'powered by dxos message' | 'discord label' | 'github label' | 'feedback label';
|
|
4
4
|
type RequiredTranslation = {
|
|
5
5
|
[key in StatusBarTranslationKeys]: string;
|
|
6
6
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAI3C,KAAK,wBAAwB,GACzB,aAAa,GACb,eAAe,GACf,4BAA4B,GAC5B,kBAAkB,GAClB,kBAAkB,GAClB,mBAAmB,GACnB,yBAAyB,GACzB,eAAe,GACf,cAAc,GACd,gBAAgB,CAAC;AAErB,KAAK,mBAAmB,GAAG;KAAG,GAAG,IAAI,wBAAwB,GAAG,MAAM;CAAE,CAAC;AACzE,KAAK,gBAAgB,GAAG;IAAE,CAAC,iBAAiB,CAAC,EAAE,mBAAmB,CAAA;CAAE,CAAC;AAKrE,eAAO,MAAM,aAAa,MAAO,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,GAAG,CAAC,WAAW,wBAAwB,WAAW,CAAC;;AAiBtH,wBAA8B"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/plugin-status-bar",
|
|
3
|
-
"version": "0.8.1-staging.
|
|
3
|
+
"version": "0.8.1-staging.9eaf14f",
|
|
4
4
|
"description": "Status bar plugin",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -30,13 +30,13 @@
|
|
|
30
30
|
"date-fns": "^3.3.1",
|
|
31
31
|
"effect": "3.13.3",
|
|
32
32
|
"react-resize-detector": "^11.0.1",
|
|
33
|
-
"@dxos/app-framework": "0.8.1-staging.
|
|
34
|
-
"@dxos/async": "0.8.1-staging.
|
|
35
|
-
"@dxos/echo-schema": "0.8.1-staging.
|
|
36
|
-
"@dxos/plugin-observability": "0.8.1-staging.
|
|
37
|
-
"@dxos/react-
|
|
38
|
-
"@dxos/
|
|
39
|
-
"@dxos/
|
|
33
|
+
"@dxos/app-framework": "0.8.1-staging.9eaf14f",
|
|
34
|
+
"@dxos/async": "0.8.1-staging.9eaf14f",
|
|
35
|
+
"@dxos/echo-schema": "0.8.1-staging.9eaf14f",
|
|
36
|
+
"@dxos/plugin-observability": "0.8.1-staging.9eaf14f",
|
|
37
|
+
"@dxos/react-client": "0.8.1-staging.9eaf14f",
|
|
38
|
+
"@dxos/react-ui-form": "0.8.1-staging.9eaf14f",
|
|
39
|
+
"@dxos/schema": "0.8.1-staging.9eaf14f"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"@phosphor-icons/react": "^2.1.5",
|
|
@@ -45,16 +45,16 @@
|
|
|
45
45
|
"react": "~18.2.0",
|
|
46
46
|
"react-dom": "~18.2.0",
|
|
47
47
|
"vite": "5.4.7",
|
|
48
|
-
"@dxos/react-ui": "0.8.1-staging.
|
|
49
|
-
"@dxos/
|
|
50
|
-
"@dxos/
|
|
48
|
+
"@dxos/react-ui": "0.8.1-staging.9eaf14f",
|
|
49
|
+
"@dxos/react-ui-theme": "0.8.1-staging.9eaf14f",
|
|
50
|
+
"@dxos/storybook-utils": "0.8.1-staging.9eaf14f"
|
|
51
51
|
},
|
|
52
52
|
"peerDependencies": {
|
|
53
53
|
"@phosphor-icons/react": "^2.0.5",
|
|
54
54
|
"react": "~18.2.0",
|
|
55
55
|
"react-dom": "~18.2.0",
|
|
56
|
-
"@dxos/react-ui
|
|
57
|
-
"@dxos/react-ui": "0.8.1-staging.
|
|
56
|
+
"@dxos/react-ui": "0.8.1-staging.9eaf14f",
|
|
57
|
+
"@dxos/react-ui-theme": "0.8.1-staging.9eaf14f"
|
|
58
58
|
},
|
|
59
59
|
"publishConfig": {
|
|
60
60
|
"access": "public"
|
|
@@ -2,13 +2,11 @@
|
|
|
2
2
|
// Copyright 2024 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import React, {
|
|
5
|
+
import React, { useState } from 'react';
|
|
6
6
|
|
|
7
|
-
import {
|
|
8
|
-
import { ObservabilityAction, type UserFeedback } from '@dxos/plugin-observability/types';
|
|
7
|
+
import { Surface } from '@dxos/app-framework';
|
|
9
8
|
import { Icon, Popover, useTranslation } from '@dxos/react-ui';
|
|
10
9
|
|
|
11
|
-
import { FeedbackForm } from './FeedbackForm';
|
|
12
10
|
import { StatusBar } from './StatusBar';
|
|
13
11
|
import { VersionNumber } from './VersionNumber';
|
|
14
12
|
import { STATUS_BAR_PLUGIN } from '../meta';
|
|
@@ -16,24 +14,9 @@ import { STATUS_BAR_PLUGIN } from '../meta';
|
|
|
16
14
|
export const StatusBarActions = () => {
|
|
17
15
|
const { t } = useTranslation(STATUS_BAR_PLUGIN);
|
|
18
16
|
const [open, setOpen] = useState(false);
|
|
19
|
-
const { dispatchPromise: dispatch } = useIntentDispatcher();
|
|
20
|
-
|
|
21
|
-
const handleSave = useCallback(
|
|
22
|
-
(values: UserFeedback) => {
|
|
23
|
-
void dispatch(createIntent(ObservabilityAction.CaptureUserFeedback, values));
|
|
24
|
-
setOpen(false);
|
|
25
|
-
},
|
|
26
|
-
[dispatch],
|
|
27
|
-
);
|
|
28
17
|
|
|
29
18
|
return (
|
|
30
19
|
<Popover.Root open={open} onOpenChange={setOpen}>
|
|
31
|
-
<Popover.Trigger asChild>
|
|
32
|
-
<StatusBar.Button data-joyride='welcome/feedback'>
|
|
33
|
-
<Icon icon='ph--paper-plane-tilt--regular' size={4} />
|
|
34
|
-
<StatusBar.Text classNames='hidden sm:block'>{t('feedback label')}</StatusBar.Text>
|
|
35
|
-
</StatusBar.Button>
|
|
36
|
-
</Popover.Trigger>
|
|
37
20
|
{/* TODO(zan): Configure this label? */}
|
|
38
21
|
<StatusBar.Button asChild>
|
|
39
22
|
<a href='https://dxos.org/discord' target='_blank' rel='noopener noreferrer'>
|
|
@@ -41,13 +24,13 @@ export const StatusBarActions = () => {
|
|
|
41
24
|
<StatusBar.Text classNames='hidden sm:block'>{t('discord label')}</StatusBar.Text>
|
|
42
25
|
</a>
|
|
43
26
|
</StatusBar.Button>
|
|
27
|
+
<StatusBar.Button asChild>
|
|
28
|
+
<a href='https://github.com/dxos/dxos' target='_blank' rel='noopener noreferrer'>
|
|
29
|
+
<Icon icon='ph--github-logo--regular' size={4} />
|
|
30
|
+
<StatusBar.Text classNames='hidden sm:block'>{t('github label')}</StatusBar.Text>
|
|
31
|
+
</a>
|
|
32
|
+
</StatusBar.Button>
|
|
44
33
|
<VersionNumber />
|
|
45
|
-
<Popover.Portal>
|
|
46
|
-
<Popover.Content classNames='shadow-lg'>
|
|
47
|
-
<FeedbackForm onSave={handleSave} />
|
|
48
|
-
<Popover.Arrow />
|
|
49
|
-
</Popover.Content>
|
|
50
|
-
</Popover.Portal>
|
|
51
34
|
</Popover.Root>
|
|
52
35
|
);
|
|
53
36
|
};
|
package/src/components/index.ts
CHANGED
package/src/translations.ts
CHANGED
|
@@ -6,15 +6,10 @@ import { type useTranslation } from '@dxos/react-ui';
|
|
|
6
6
|
|
|
7
7
|
import { STATUS_BAR_PLUGIN } from './meta';
|
|
8
8
|
|
|
9
|
+
// TODO(wittjosiah): There's got to be a better way to do typesafe translations, this is too much boilerplate.
|
|
10
|
+
|
|
9
11
|
type StatusBarTranslationKeys =
|
|
10
12
|
| 'plugin name'
|
|
11
|
-
| 'email input label'
|
|
12
|
-
| 'email input placeholder'
|
|
13
|
-
| 'feedback text area label'
|
|
14
|
-
| 'feedback text area placeholder'
|
|
15
|
-
| 'send feedback label'
|
|
16
|
-
| 'name label'
|
|
17
|
-
| 'name placeholder'
|
|
18
13
|
| 'warning title'
|
|
19
14
|
| 'technology preview message'
|
|
20
15
|
| 'learn more label'
|
|
@@ -22,6 +17,7 @@ type StatusBarTranslationKeys =
|
|
|
22
17
|
| 'see release label'
|
|
23
18
|
| 'powered by dxos message'
|
|
24
19
|
| 'discord label'
|
|
20
|
+
| 'github label'
|
|
25
21
|
| 'feedback label';
|
|
26
22
|
|
|
27
23
|
type RequiredTranslation = { [key in StatusBarTranslationKeys]: string };
|
|
@@ -35,13 +31,6 @@ export const mkTranslation = (t: ReturnType<typeof useTranslation>['t']) => (key
|
|
|
35
31
|
const translations: Record<Language, TranslationEntry> = {
|
|
36
32
|
'en-US': entry({
|
|
37
33
|
'plugin name': 'Status Bar',
|
|
38
|
-
'name label': 'Name',
|
|
39
|
-
'name placeholder': 'Preferred name',
|
|
40
|
-
'email input label': 'Email',
|
|
41
|
-
'email input placeholder': 'hello@example.com',
|
|
42
|
-
'feedback text area label': 'Feedback',
|
|
43
|
-
'feedback text area placeholder': 'Please describe your issue or suggestion.',
|
|
44
|
-
'send feedback label': 'Send Feedback',
|
|
45
34
|
'warning title': 'WARNING',
|
|
46
35
|
'technology preview message': 'Composer is currently in beta.',
|
|
47
36
|
'learn more label': 'Learn more',
|
|
@@ -49,6 +38,7 @@ const translations: Record<Language, TranslationEntry> = {
|
|
|
49
38
|
'see release label': 'See release on GitHub',
|
|
50
39
|
'powered by dxos message': 'Powered by <dxos>DXOS</dxos>',
|
|
51
40
|
'discord label': 'Discord',
|
|
41
|
+
'github label': 'GitHub',
|
|
52
42
|
'feedback label': 'Feedback',
|
|
53
43
|
}),
|
|
54
44
|
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FeedbackForm.d.ts","sourceRoot":"","sources":["../../../../src/components/FeedbackForm.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAGtC,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAgGhE,eAAO,MAAM,YAAY,eAAgB;IAAE,MAAM,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAA;CAAE,sBAYlF,CAAC"}
|
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2024 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import { PaperPlaneTilt, X } from '@phosphor-icons/react';
|
|
6
|
-
import React, { useRef } from 'react';
|
|
7
|
-
|
|
8
|
-
import { getSnapshot } from '@dxos/echo-schema';
|
|
9
|
-
import { UserFeedback } from '@dxos/plugin-observability/types';
|
|
10
|
-
import { Button, Input, Popover, useTranslation } from '@dxos/react-ui';
|
|
11
|
-
import { FormProvider, useFormContext, useInputProps } from '@dxos/react-ui-form';
|
|
12
|
-
import { getSize } from '@dxos/react-ui-theme';
|
|
13
|
-
|
|
14
|
-
import { STATUS_BAR_PLUGIN } from '../meta';
|
|
15
|
-
import { mkTranslation } from '../translations';
|
|
16
|
-
|
|
17
|
-
const defaultValues: UserFeedback = { name: '', email: '', message: '' };
|
|
18
|
-
|
|
19
|
-
const FormContent = () => {
|
|
20
|
-
const { t } = useTranslation(STATUS_BAR_PLUGIN);
|
|
21
|
-
const translation = mkTranslation(t);
|
|
22
|
-
const { handleSave, canSave } = useFormContext<UserFeedback>();
|
|
23
|
-
|
|
24
|
-
const nameProps = useInputProps(['name']);
|
|
25
|
-
const emailProps = useInputProps(['email']);
|
|
26
|
-
const messageProps = useInputProps(['message']);
|
|
27
|
-
|
|
28
|
-
return (
|
|
29
|
-
<div role='form' className='p-3 flex flex-col gap-2'>
|
|
30
|
-
<div role='none' className='space-b-1'>
|
|
31
|
-
<Input.Root validationValence={nameProps.getStatus().status}>
|
|
32
|
-
<Input.Label>{translation('name label')}</Input.Label>
|
|
33
|
-
<Input.TextInput
|
|
34
|
-
classNames={'text-sm'}
|
|
35
|
-
placeholder={translation('name placeholder')}
|
|
36
|
-
autoFocus
|
|
37
|
-
value={nameProps.getValue() ?? ''}
|
|
38
|
-
onChange={(e) => nameProps.onValueChange('string', e.target.value)}
|
|
39
|
-
onBlur={nameProps.onBlur}
|
|
40
|
-
/>
|
|
41
|
-
<Input.DescriptionAndValidation>
|
|
42
|
-
<Input.Validation>{nameProps.getStatus().error}</Input.Validation>
|
|
43
|
-
</Input.DescriptionAndValidation>
|
|
44
|
-
</Input.Root>
|
|
45
|
-
</div>
|
|
46
|
-
|
|
47
|
-
<div role='none' className='space-b-1'>
|
|
48
|
-
<Input.Root validationValence={emailProps.getStatus().status}>
|
|
49
|
-
<Input.Label>{translation('email input label')}</Input.Label>
|
|
50
|
-
<Input.TextInput
|
|
51
|
-
classNames={'text-sm'}
|
|
52
|
-
placeholder={translation('email input placeholder')}
|
|
53
|
-
value={emailProps.getValue() ?? ''}
|
|
54
|
-
onChange={(e) => emailProps.onValueChange('string', e.target.value)}
|
|
55
|
-
onBlur={emailProps.onBlur}
|
|
56
|
-
/>
|
|
57
|
-
<Input.DescriptionAndValidation>
|
|
58
|
-
<Input.Validation>{emailProps.getStatus().error}</Input.Validation>
|
|
59
|
-
</Input.DescriptionAndValidation>
|
|
60
|
-
</Input.Root>
|
|
61
|
-
</div>
|
|
62
|
-
|
|
63
|
-
<div role='none' className='space-b-1'>
|
|
64
|
-
<Input.Root validationValence={messageProps.getStatus().status}>
|
|
65
|
-
<Input.Label>{translation('feedback text area label')}</Input.Label>
|
|
66
|
-
<Input.TextArea
|
|
67
|
-
classNames={'text-sm'}
|
|
68
|
-
rows={5}
|
|
69
|
-
cols={30}
|
|
70
|
-
placeholder={translation('feedback text area placeholder')}
|
|
71
|
-
value={messageProps.getValue() ?? ''}
|
|
72
|
-
onChange={(e) => messageProps.onValueChange('string', e.target.value)}
|
|
73
|
-
onBlur={messageProps.onBlur}
|
|
74
|
-
/>
|
|
75
|
-
<Input.DescriptionAndValidation>
|
|
76
|
-
<Input.Validation>{messageProps.getStatus().error}</Input.Validation>
|
|
77
|
-
</Input.DescriptionAndValidation>
|
|
78
|
-
</Input.Root>
|
|
79
|
-
</div>
|
|
80
|
-
|
|
81
|
-
<div role='none' className='space-b-2'>
|
|
82
|
-
<Button
|
|
83
|
-
type='submit'
|
|
84
|
-
variant='primary'
|
|
85
|
-
classNames='is-full flex gap-2'
|
|
86
|
-
disabled={!canSave}
|
|
87
|
-
onClick={handleSave}
|
|
88
|
-
>
|
|
89
|
-
<span>{translation('send feedback label')}</span>
|
|
90
|
-
<div className='grow' />
|
|
91
|
-
<PaperPlaneTilt className={getSize(5)} />
|
|
92
|
-
</Button>
|
|
93
|
-
<Popover.Close asChild>
|
|
94
|
-
<Button classNames='is-full flex gap-2'>
|
|
95
|
-
<span>{t('cancel label', { ns: 'os' })}</span>
|
|
96
|
-
<div className='grow' />
|
|
97
|
-
<X className={getSize(5)} />
|
|
98
|
-
</Button>
|
|
99
|
-
</Popover.Close>
|
|
100
|
-
</div>
|
|
101
|
-
</div>
|
|
102
|
-
);
|
|
103
|
-
};
|
|
104
|
-
|
|
105
|
-
export const FeedbackForm = ({ onSave }: { onSave: (values: UserFeedback) => void }) => {
|
|
106
|
-
const formRef = useRef<HTMLDivElement>(null);
|
|
107
|
-
|
|
108
|
-
const initialValues = getSnapshot(defaultValues);
|
|
109
|
-
|
|
110
|
-
return (
|
|
111
|
-
<FormProvider formRef={formRef} schema={UserFeedback} initialValues={initialValues} onSave={onSave}>
|
|
112
|
-
<div ref={formRef}>
|
|
113
|
-
<FormContent />
|
|
114
|
-
</div>
|
|
115
|
-
</FormProvider>
|
|
116
|
-
);
|
|
117
|
-
};
|