@dxos/plugin-status-bar 0.6.14-staging.9e90729 → 0.6.14-staging.a52de51
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.
|
@@ -136,7 +136,7 @@ var FeedbackForm = ({ onClose }) => {
|
|
|
136
136
|
dispatch,
|
|
137
137
|
onClose
|
|
138
138
|
]);
|
|
139
|
-
const {
|
|
139
|
+
const { handleSubmit, canSubmit, getInputProps, getErrorValence, getErrorMessage } = useForm({
|
|
140
140
|
initialValues,
|
|
141
141
|
schema: FeedbackFormSchema,
|
|
142
142
|
onSubmit
|
|
@@ -148,33 +148,33 @@ var FeedbackForm = ({ onClose }) => {
|
|
|
148
148
|
role: "none",
|
|
149
149
|
className: "space-b-1"
|
|
150
150
|
}, /* @__PURE__ */ React2.createElement(Input.Root, {
|
|
151
|
-
validationValence:
|
|
151
|
+
validationValence: getErrorValence("name")
|
|
152
152
|
}, /* @__PURE__ */ React2.createElement(Input.Label, null, translation("name label")), /* @__PURE__ */ React2.createElement(Input.TextInput, {
|
|
153
153
|
classNames: "text-sm",
|
|
154
154
|
placeholder: translation("name placeholder"),
|
|
155
155
|
autoFocus: true,
|
|
156
156
|
...getInputProps("name")
|
|
157
|
-
}), /* @__PURE__ */ React2.createElement(Input.DescriptionAndValidation, null, /* @__PURE__ */ React2.createElement(Input.Validation, null,
|
|
157
|
+
}), /* @__PURE__ */ React2.createElement(Input.DescriptionAndValidation, null, /* @__PURE__ */ React2.createElement(Input.Validation, null, getErrorMessage("name"))))), /* @__PURE__ */ React2.createElement("div", {
|
|
158
158
|
role: "none",
|
|
159
159
|
className: "space-b-1"
|
|
160
160
|
}, /* @__PURE__ */ React2.createElement(Input.Root, {
|
|
161
|
-
validationValence:
|
|
161
|
+
validationValence: getErrorValence("email")
|
|
162
162
|
}, /* @__PURE__ */ React2.createElement(Input.Label, null, translation("email input label")), /* @__PURE__ */ React2.createElement(Input.TextInput, {
|
|
163
163
|
classNames: "text-sm",
|
|
164
164
|
placeholder: translation("email input placeholder"),
|
|
165
165
|
...getInputProps("email")
|
|
166
|
-
}), /* @__PURE__ */ React2.createElement(Input.DescriptionAndValidation, null, /* @__PURE__ */ React2.createElement(Input.Validation, null,
|
|
166
|
+
}), /* @__PURE__ */ React2.createElement(Input.DescriptionAndValidation, null, /* @__PURE__ */ React2.createElement(Input.Validation, null, getErrorMessage("email"))))), /* @__PURE__ */ React2.createElement("div", {
|
|
167
167
|
role: "none",
|
|
168
168
|
className: "space-b-1"
|
|
169
169
|
}, /* @__PURE__ */ React2.createElement(Input.Root, {
|
|
170
|
-
validationValence:
|
|
170
|
+
validationValence: getErrorValence("message")
|
|
171
171
|
}, /* @__PURE__ */ React2.createElement(Input.Label, null, translation("feedback text area label")), /* @__PURE__ */ React2.createElement(Input.TextArea, {
|
|
172
172
|
classNames: "text-sm",
|
|
173
173
|
rows: 5,
|
|
174
174
|
cols: 30,
|
|
175
175
|
placeholder: translation("feedback text area placeholder"),
|
|
176
176
|
...getInputProps("message")
|
|
177
|
-
}), /* @__PURE__ */ React2.createElement(Input.DescriptionAndValidation, null, /* @__PURE__ */ React2.createElement(Input.Validation, null,
|
|
177
|
+
}), /* @__PURE__ */ React2.createElement(Input.DescriptionAndValidation, null, /* @__PURE__ */ React2.createElement(Input.Validation, null, getErrorMessage("message"))))), /* @__PURE__ */ React2.createElement("div", {
|
|
178
178
|
role: "none",
|
|
179
179
|
className: "space-b-2"
|
|
180
180
|
}, /* @__PURE__ */ React2.createElement(Button, {
|
|
@@ -206,7 +206,9 @@ var StatusBarPanel = () => {
|
|
|
206
206
|
return /* @__PURE__ */ React3.createElement(Popover2.Root, {
|
|
207
207
|
open,
|
|
208
208
|
onOpenChange: setOpen
|
|
209
|
-
}, /* @__PURE__ */ React3.createElement(StatusBar.Container, null, /* @__PURE__ */ React3.createElement(StatusBar.EndContent, null, /* @__PURE__ */ React3.createElement(
|
|
209
|
+
}, /* @__PURE__ */ React3.createElement(StatusBar.Container, null, /* @__PURE__ */ React3.createElement(StatusBar.EndContent, null, /* @__PURE__ */ React3.createElement(Surface, {
|
|
210
|
+
role: "status"
|
|
211
|
+
}), /* @__PURE__ */ React3.createElement(Popover2.Trigger, {
|
|
210
212
|
asChild: true
|
|
211
213
|
}, /* @__PURE__ */ React3.createElement(StatusBar.Button, {
|
|
212
214
|
"aria-label": "Give feedback about composer",
|
|
@@ -228,9 +230,7 @@ var StatusBarPanel = () => {
|
|
|
228
230
|
size: 4
|
|
229
231
|
}), /* @__PURE__ */ React3.createElement(StatusBar.Text, {
|
|
230
232
|
classNames: "hidden sm:block"
|
|
231
|
-
}, "Discord")))), /* @__PURE__ */ React3.createElement(
|
|
232
|
-
role: "status"
|
|
233
|
-
})), /* @__PURE__ */ React3.createElement(Popover2.Content, {
|
|
233
|
+
}, "Discord"))))), /* @__PURE__ */ React3.createElement(Popover2.Content, {
|
|
234
234
|
classNames: "shadow-lg"
|
|
235
235
|
}, /* @__PURE__ */ React3.createElement(FeedbackForm, {
|
|
236
236
|
onClose: () => setOpen(false)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/StatusBarPlugin.tsx", "../../../src/components/StatusBar.tsx", "../../../src/components/StatusBarPanel.tsx", "../../../src/components/FeedbackForm.tsx", "../../../src/translations.ts", "../../../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type PluginDefinition, type SurfaceProvides, type TranslationsProvides } from '@dxos/app-framework';\n\nimport { StatusBarPanel } from './components';\nimport meta from './meta';\nimport translations from './translations';\n\nexport type StatusBarPluginProvides = SurfaceProvides & TranslationsProvides;\n\nexport const StatusBarPlugin = (): PluginDefinition<StatusBarPluginProvides> => {\n return {\n meta,\n provides: {\n translations,\n surface: {\n component: ({ role }) => {\n switch (role) {\n case 'status-bar': {\n return <StatusBarPanel />;\n }\n }\n\n return null;\n },\n },\n },\n };\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\ntype StatusBarTextProps = ThemedClassName<{ children: ReactNode }>;\n\nconst StatusBarText = forwardRef<HTMLSpanElement, StatusBarTextProps>(({ classNames, children }, forwardedRef) => (\n <span className={mx(classNames)} ref={forwardedRef}>\n {children}\n </span>\n));\n\ntype StatusBarButtonProps = ThemedClassName<{ children: ReactNode; asChild?: boolean }> &\n HTMLAttributes<HTMLButtonElement>;\n\nconst StatusBarButton = forwardRef<HTMLButtonElement, StatusBarButtonProps>(\n ({ classNames, children, asChild, ...props }, forwardedRef) => {\n const classes = mx(\n 'flex items-center gap-2 p-1 px-2 rounded-sm',\n 'select-none cursor-pointer ch-focus-ring',\n 'hover:bg-neutral-75 active:bg-neutral-150 dark:hover:bg-neutral-750 dark:active:bg-neutral-700',\n classNames,\n );\n\n return asChild ? (\n <Slot role='button' ref={forwardedRef} className={classes} {...props}>\n {children}\n </Slot>\n ) : (\n <button className={classes} ref={forwardedRef} {...props}>\n {children}\n </button>\n );\n },\n);\n\nexport default StatusBarButton;\n\ntype StatusBarItemProps = ThemedClassName<{ children: ReactNode }> & HTMLAttributes<HTMLDivElement>;\n\nconst StatusBarItem = forwardRef<HTMLDivElement, StatusBarItemProps>(\n ({ classNames, children, ...props }, forwardedRef) => (\n <div\n role='menuitem'\n className={mx('flex items-center gap-2 p-1 px-2 rounded-sm select-none', classNames)}\n ref={forwardedRef}\n {...props}\n >\n {children}\n </div>\n ),\n);\n\ntype StatusBarContainerProps = ThemedClassName<{ children: ReactNode }>;\n\n// TODO(zan): tabable group with tabster.\nconst StatusBarContainer = forwardRef<HTMLDivElement, StatusBarContainerProps>(\n ({ classNames, children }, forwardedRef) => {\n const groupAttrs = useFocusableGroup({ tabBehavior: 'limited' });\n return (\n <div\n role='menubar'\n tabIndex={0}\n {...groupAttrs}\n className={mx(\n 'bs-[--statusbar-size] flex justify-end items-center gap-2 bg-base text-description text-lg pointer-fine:text-xs ch-focus-ring-inset',\n classNames,\n )}\n ref={forwardedRef}\n >\n {children}\n </div>\n );\n },\n);\n\ntype StartContentProps = ThemedClassName<{ children: ReactNode }>;\n\nconst StartContent = forwardRef<HTMLDivElement, StartContentProps>(({ classNames, children }, forwardedRef) => (\n <div role='none' className={mx('flex-grow flex items-center space-x-2', classNames)} ref={forwardedRef}>\n {children}\n </div>\n));\n\ntype EndContentProps = ThemedClassName<{ children: ReactNode }>;\n\nconst EndContent = forwardRef<HTMLDivElement, EndContentProps>(({ classNames, children }, forwardedRef) => (\n <div role='none' className={mx('flex-grow flex items-center justify-end', classNames)} ref={forwardedRef}>\n {children}\n </div>\n));\n\nexport const StatusBar = {\n Container: StatusBarContainer,\n Text: StatusBarText,\n Item: StatusBarItem,\n Button: StatusBarButton,\n StartContent,\n EndContent,\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { useState } from 'react';\n\nimport { Surface } from '@dxos/app-framework';\nimport { Icon, Popover } from '@dxos/react-ui';\n\nimport { FeedbackForm } from './FeedbackForm';\nimport { StatusBar } from './StatusBar';\n\nexport const StatusBarPanel = () => {\n const [open, setOpen] = useState(false);\n\n // TODO(wittjosiah): Factor out feedback and discord buttons.\n return (\n <Popover.Root open={open} onOpenChange={setOpen}>\n <StatusBar.Container>\n <StatusBar.EndContent>\n <Popover.Trigger asChild>\n <StatusBar.Button aria-label='Give feedback about composer' data-joyride='welcome/feedback'>\n <Icon icon='ph--paper-plane-tilt--regular' size={4} />\n <StatusBar.Text classNames='hidden sm:block'>Feedback</StatusBar.Text>\n </StatusBar.Button>\n </Popover.Trigger>\n {/* TODO(zan): Configure this label? */}\n <StatusBar.Button aria-label='Open DXOS Discord' asChild>\n <a href='https://dxos.org/discord' target='_blank' rel='noopener noreferrer'>\n <Icon icon='ph--discord-logo--regular' size={4} />\n <StatusBar.Text classNames='hidden sm:block'>Discord</StatusBar.Text>\n </a>\n </StatusBar.Button>\n </StatusBar.EndContent>\n <Surface role='status' />\n </StatusBar.Container>\n <Popover.Content classNames='shadow-lg'>\n <FeedbackForm onClose={() => setOpen(false)} />\n <Popover.Arrow />\n </Popover.Content>\n </Popover.Root>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { Schema as S } from '@effect/schema';\nimport { PaperPlaneTilt, X } from '@phosphor-icons/react';\nimport React, { useCallback } from 'react';\n\nimport { useIntentDispatcher } from '@dxos/app-framework';\nimport { Button, Input, Popover, useTranslation } from '@dxos/react-ui';\nimport { useForm } from '@dxos/react-ui-data';\nimport { getSize } from '@dxos/react-ui-theme';\n\nimport { STATUS_BAR_PLUGIN } from '../meta';\nimport { mkTranslation } from '../translations';\n\nconst Email = S.String.pipe(\n S.nonEmptyString({ message: () => 'Email is required.' }),\n S.pattern(/^(?!\\.)(?!.*\\.\\.)([A-Z0-9_+-.]*)[A-Z0-9_+-]@([A-Z0-9][A-Z0-9-]*\\.)+[A-Z]{2,}$/i, {\n message: () => 'Invalid email address.',\n }),\n);\n\nconst nonEmpty = (field: string) => S.nonEmptyString({ message: () => `${field} is required.` });\nconst maxLength = (field: string, length: number) => S.maxLength(length, { message: () => `${field} is too long.` });\n\n// Types and validation.\nconst FeedbackFormSchema = S.Struct({\n name: S.String.pipe(nonEmpty('Name'), maxLength('Name', 256)),\n email: Email.pipe(maxLength('Email', 256)),\n message: S.String.pipe(nonEmpty('Feedback'), maxLength('Feedback', 32_768)),\n});\n\ntype FeedbackFormState = S.Schema.Type<typeof FeedbackFormSchema>;\n\nconst initialValues: FeedbackFormState = { name: '', email: '', message: '' };\n\nexport const FeedbackForm = ({ onClose }: { onClose: () => void }) => {\n const { t } = useTranslation(STATUS_BAR_PLUGIN);\n const translation = mkTranslation(t);\n const dispatch = useIntentDispatcher();\n\n const onSubmit = useCallback(\n (values: FeedbackFormState) => {\n void dispatch({ action: 'dxos.org/plugin/observability/capture-feedback', data: values });\n onClose();\n },\n [dispatch, onClose],\n );\n\n const { errors, handleSubmit, canSubmit, touched, getInputProps } = useForm<FeedbackFormState>({\n initialValues,\n schema: FeedbackFormSchema,\n onSubmit,\n });\n\n return (\n <div role='form' className='p-3 flex flex-col gap-2'>\n <div role='none' className='space-b-1'>\n <Input.Root validationValence={touched.name && errors.name ? 'error' : undefined}>\n <Input.Label>{translation('name label')}</Input.Label>\n <Input.TextInput\n classNames={'text-sm'}\n placeholder={translation('name placeholder')}\n autoFocus\n {...getInputProps('name')}\n />\n <Input.DescriptionAndValidation>\n <Input.Validation>{touched.name && errors.name}</Input.Validation>\n </Input.DescriptionAndValidation>\n </Input.Root>\n </div>\n\n <div role='none' className='space-b-1'>\n <Input.Root validationValence={touched.email && errors.email ? 'error' : undefined}>\n <Input.Label>{translation('email input label')}</Input.Label>\n <Input.TextInput\n classNames={'text-sm'}\n placeholder={translation('email input placeholder')}\n {...getInputProps('email')}\n />\n <Input.DescriptionAndValidation>\n <Input.Validation>{touched.email && errors.email}</Input.Validation>\n </Input.DescriptionAndValidation>\n </Input.Root>\n </div>\n\n <div role='none' className='space-b-1'>\n <Input.Root validationValence={touched.message && errors.message ? 'error' : undefined}>\n <Input.Label>{translation('feedback text area label')}</Input.Label>\n <Input.TextArea\n classNames={'text-sm'}\n rows={5}\n cols={30}\n placeholder={translation('feedback text area placeholder')}\n {...getInputProps('message')}\n />\n <Input.DescriptionAndValidation>\n <Input.Validation>{touched.message && errors.message}</Input.Validation>\n </Input.DescriptionAndValidation>\n </Input.Root>\n </div>\n\n <div role='none' className='space-b-2'>\n <Button\n type='submit'\n variant='primary'\n classNames='is-full flex gap-2'\n disabled={!canSubmit}\n onClick={handleSubmit}\n >\n <span>{translation('send feedback label')}</span>\n <div className='grow' />\n <PaperPlaneTilt className={getSize(5)} />\n </Button>\n <Popover.Close asChild>\n <Button classNames='is-full flex gap-2'>\n <span>{t('cancel label', { ns: 'os' })}</span>\n <div className='grow' />\n <X className={getSize(5)} />\n </Button>\n </Popover.Close>\n </div>\n </div>\n );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type useTranslation } from '@dxos/react-ui';\n\nimport { STATUS_BAR_PLUGIN } from './meta';\n\ntype StatusBarTranslationKeys =\n | 'plugin name'\n | 'email input label'\n | 'email input placeholder'\n | 'feedback text area label'\n | 'feedback text area placeholder'\n | 'send feedback label'\n | 'name label'\n | 'name placeholder';\n\ntype RequiredTranslation = { [key in StatusBarTranslationKeys]: string };\ntype TranslationEntry = { [STATUS_BAR_PLUGIN]: RequiredTranslation };\ntype Language = string;\n\n// -- helpers.\nconst entry = (translation: RequiredTranslation): TranslationEntry => ({ [STATUS_BAR_PLUGIN]: translation });\nexport const mkTranslation = (t: ReturnType<typeof useTranslation>['t']) => (key: StatusBarTranslationKeys) => t(key);\n\nconst translations: Record<Language, TranslationEntry> = {\n 'en-US': entry({\n 'plugin name': 'Status Bar',\n 'name label': 'Name',\n 'name placeholder': 'Preferred name',\n 'email input label': 'Email',\n 'email input placeholder': 'hello@example.com',\n 'feedback text area label': 'Feedback',\n 'feedback text area placeholder': 'Found a bug? Have a suggestion? Let us know!',\n 'send feedback label': 'Send Feedback',\n }),\n};\n\nexport default [translations];\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { StatusBarPlugin } from './StatusBarPlugin';\n\nexport default StatusBarPlugin;\n\nexport * from './StatusBarPlugin';\nexport * from './components';\n"],
|
|
5
|
-
"mappings": "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
|
|
6
|
-
"names": ["React", "useFocusableGroup", "Slot", "React", "forwardRef", "mx", "StatusBarText", "forwardRef", "classNames", "children", "forwardedRef", "span", "className", "mx", "ref", "StatusBarButton", "asChild", "props", "classes", "Slot", "role", "button", "StatusBarItem", "forwardRef", "classNames", "children", "props", "forwardedRef", "div", "role", "className", "mx", "ref", "StatusBarContainer", "groupAttrs", "useFocusableGroup", "tabBehavior", "tabIndex", "StartContent", "EndContent", "StatusBar", "Container", "Text", "StatusBarText", "Item", "Button", "StatusBarButton", "React", "useState", "Surface", "Icon", "Popover", "Schema", "S", "PaperPlaneTilt", "X", "React", "useCallback", "useIntentDispatcher", "Button", "Input", "Popover", "useTranslation", "useForm", "getSize", "entry", "translation", "STATUS_BAR_PLUGIN", "mkTranslation", "t", "key", "translations", "Email", "S", "String", "pipe", "nonEmptyString", "message", "pattern", "nonEmpty", "field", "maxLength", "length", "FeedbackFormSchema", "Struct", "name", "email", "initialValues", "FeedbackForm", "onClose", "t", "useTranslation", "STATUS_BAR_PLUGIN", "translation", "mkTranslation", "dispatch", "useIntentDispatcher", "onSubmit", "useCallback", "values", "action", "data", "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type PluginDefinition, type SurfaceProvides, type TranslationsProvides } from '@dxos/app-framework';\n\nimport { StatusBarPanel } from './components';\nimport meta from './meta';\nimport translations from './translations';\n\nexport type StatusBarPluginProvides = SurfaceProvides & TranslationsProvides;\n\nexport const StatusBarPlugin = (): PluginDefinition<StatusBarPluginProvides> => {\n return {\n meta,\n provides: {\n translations,\n surface: {\n component: ({ role }) => {\n switch (role) {\n case 'status-bar': {\n return <StatusBarPanel />;\n }\n }\n\n return null;\n },\n },\n },\n };\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\ntype StatusBarTextProps = ThemedClassName<{ children: ReactNode }>;\n\nconst StatusBarText = forwardRef<HTMLSpanElement, StatusBarTextProps>(({ classNames, children }, forwardedRef) => (\n <span className={mx(classNames)} ref={forwardedRef}>\n {children}\n </span>\n));\n\ntype StatusBarButtonProps = ThemedClassName<{ children: ReactNode; asChild?: boolean }> &\n HTMLAttributes<HTMLButtonElement>;\n\nconst StatusBarButton = forwardRef<HTMLButtonElement, StatusBarButtonProps>(\n ({ classNames, children, asChild, ...props }, forwardedRef) => {\n const classes = mx(\n 'flex items-center gap-2 p-1 px-2 rounded-sm',\n 'select-none cursor-pointer ch-focus-ring',\n 'hover:bg-neutral-75 active:bg-neutral-150 dark:hover:bg-neutral-750 dark:active:bg-neutral-700',\n classNames,\n );\n\n return asChild ? (\n <Slot role='button' ref={forwardedRef} className={classes} {...props}>\n {children}\n </Slot>\n ) : (\n <button className={classes} ref={forwardedRef} {...props}>\n {children}\n </button>\n );\n },\n);\n\nexport default StatusBarButton;\n\ntype StatusBarItemProps = ThemedClassName<{ children: ReactNode }> & HTMLAttributes<HTMLDivElement>;\n\nconst StatusBarItem = forwardRef<HTMLDivElement, StatusBarItemProps>(\n ({ classNames, children, ...props }, forwardedRef) => (\n <div\n role='menuitem'\n className={mx('flex items-center gap-2 p-1 px-2 rounded-sm select-none', classNames)}\n ref={forwardedRef}\n {...props}\n >\n {children}\n </div>\n ),\n);\n\ntype StatusBarContainerProps = ThemedClassName<{ children: ReactNode }>;\n\n// TODO(zan): tabable group with tabster.\nconst StatusBarContainer = forwardRef<HTMLDivElement, StatusBarContainerProps>(\n ({ classNames, children }, forwardedRef) => {\n const groupAttrs = useFocusableGroup({ tabBehavior: 'limited' });\n return (\n <div\n role='menubar'\n tabIndex={0}\n {...groupAttrs}\n className={mx(\n 'bs-[--statusbar-size] flex justify-end items-center gap-2 bg-base text-description text-lg pointer-fine:text-xs ch-focus-ring-inset',\n classNames,\n )}\n ref={forwardedRef}\n >\n {children}\n </div>\n );\n },\n);\n\ntype StartContentProps = ThemedClassName<{ children: ReactNode }>;\n\nconst StartContent = forwardRef<HTMLDivElement, StartContentProps>(({ classNames, children }, forwardedRef) => (\n <div role='none' className={mx('flex-grow flex items-center space-x-2', classNames)} ref={forwardedRef}>\n {children}\n </div>\n));\n\ntype EndContentProps = ThemedClassName<{ children: ReactNode }>;\n\nconst EndContent = forwardRef<HTMLDivElement, EndContentProps>(({ classNames, children }, forwardedRef) => (\n <div role='none' className={mx('flex-grow flex items-center justify-end', classNames)} ref={forwardedRef}>\n {children}\n </div>\n));\n\nexport const StatusBar = {\n Container: StatusBarContainer,\n Text: StatusBarText,\n Item: StatusBarItem,\n Button: StatusBarButton,\n StartContent,\n EndContent,\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { useState } from 'react';\n\nimport { Surface } from '@dxos/app-framework';\nimport { Icon, Popover } from '@dxos/react-ui';\n\nimport { FeedbackForm } from './FeedbackForm';\nimport { StatusBar } from './StatusBar';\n\nexport const StatusBarPanel = () => {\n const [open, setOpen] = useState(false);\n\n // TODO(wittjosiah): Factor out feedback and discord buttons.\n return (\n <Popover.Root open={open} onOpenChange={setOpen}>\n <StatusBar.Container>\n <StatusBar.EndContent>\n <Surface role='status' />\n <Popover.Trigger asChild>\n <StatusBar.Button aria-label='Give feedback about composer' data-joyride='welcome/feedback'>\n <Icon icon='ph--paper-plane-tilt--regular' size={4} />\n <StatusBar.Text classNames='hidden sm:block'>Feedback</StatusBar.Text>\n </StatusBar.Button>\n </Popover.Trigger>\n {/* TODO(zan): Configure this label? */}\n <StatusBar.Button aria-label='Open DXOS Discord' asChild>\n <a href='https://dxos.org/discord' target='_blank' rel='noopener noreferrer'>\n <Icon icon='ph--discord-logo--regular' size={4} />\n <StatusBar.Text classNames='hidden sm:block'>Discord</StatusBar.Text>\n </a>\n </StatusBar.Button>\n </StatusBar.EndContent>\n </StatusBar.Container>\n <Popover.Content classNames='shadow-lg'>\n <FeedbackForm onClose={() => setOpen(false)} />\n <Popover.Arrow />\n </Popover.Content>\n </Popover.Root>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { Schema as S } from '@effect/schema';\nimport { PaperPlaneTilt, X } from '@phosphor-icons/react';\nimport React, { useCallback } from 'react';\n\nimport { useIntentDispatcher } from '@dxos/app-framework';\nimport { Button, Input, Popover, useTranslation } from '@dxos/react-ui';\nimport { useForm } from '@dxos/react-ui-data';\nimport { getSize } from '@dxos/react-ui-theme';\n\nimport { STATUS_BAR_PLUGIN } from '../meta';\nimport { mkTranslation } from '../translations';\n\nconst Email = S.String.pipe(\n S.nonEmptyString({ message: () => 'Email is required.' }),\n S.pattern(/^(?!\\.)(?!.*\\.\\.)([A-Z0-9_+-.]*)[A-Z0-9_+-]@([A-Z0-9][A-Z0-9-]*\\.)+[A-Z]{2,}$/i, {\n message: () => 'Invalid email address.',\n }),\n);\n\nconst nonEmpty = (field: string) => S.nonEmptyString({ message: () => `${field} is required.` });\nconst maxLength = (field: string, length: number) => S.maxLength(length, { message: () => `${field} is too long.` });\n\n// Types and validation.\nconst FeedbackFormSchema = S.Struct({\n name: S.String.pipe(nonEmpty('Name'), maxLength('Name', 256)),\n email: Email.pipe(maxLength('Email', 256)),\n message: S.String.pipe(nonEmpty('Feedback'), maxLength('Feedback', 32_768)),\n});\n\ntype FeedbackFormState = S.Schema.Type<typeof FeedbackFormSchema>;\n\nconst initialValues: FeedbackFormState = { name: '', email: '', message: '' };\n\nexport const FeedbackForm = ({ onClose }: { onClose: () => void }) => {\n const { t } = useTranslation(STATUS_BAR_PLUGIN);\n const translation = mkTranslation(t);\n const dispatch = useIntentDispatcher();\n\n const onSubmit = useCallback(\n (values: FeedbackFormState) => {\n void dispatch({ action: 'dxos.org/plugin/observability/capture-feedback', data: values });\n onClose();\n },\n [dispatch, onClose],\n );\n\n const { handleSubmit, canSubmit, getInputProps, getErrorValence, getErrorMessage } = useForm<FeedbackFormState>({\n initialValues,\n schema: FeedbackFormSchema,\n onSubmit,\n });\n\n return (\n <div role='form' className='p-3 flex flex-col gap-2'>\n <div role='none' className='space-b-1'>\n <Input.Root validationValence={getErrorValence('name')}>\n <Input.Label>{translation('name label')}</Input.Label>\n <Input.TextInput\n classNames={'text-sm'}\n placeholder={translation('name placeholder')}\n autoFocus\n {...getInputProps('name')}\n />\n <Input.DescriptionAndValidation>\n <Input.Validation>{getErrorMessage('name')}</Input.Validation>\n </Input.DescriptionAndValidation>\n </Input.Root>\n </div>\n\n <div role='none' className='space-b-1'>\n <Input.Root validationValence={getErrorValence('email')}>\n <Input.Label>{translation('email input label')}</Input.Label>\n <Input.TextInput\n classNames={'text-sm'}\n placeholder={translation('email input placeholder')}\n {...getInputProps('email')}\n />\n <Input.DescriptionAndValidation>\n <Input.Validation>{getErrorMessage('email')}</Input.Validation>\n </Input.DescriptionAndValidation>\n </Input.Root>\n </div>\n\n <div role='none' className='space-b-1'>\n <Input.Root validationValence={getErrorValence('message')}>\n <Input.Label>{translation('feedback text area label')}</Input.Label>\n <Input.TextArea\n classNames={'text-sm'}\n rows={5}\n cols={30}\n placeholder={translation('feedback text area placeholder')}\n {...getInputProps('message')}\n />\n <Input.DescriptionAndValidation>\n <Input.Validation>{getErrorMessage('message')}</Input.Validation>\n </Input.DescriptionAndValidation>\n </Input.Root>\n </div>\n\n <div role='none' className='space-b-2'>\n <Button\n type='submit'\n variant='primary'\n classNames='is-full flex gap-2'\n disabled={!canSubmit}\n onClick={handleSubmit}\n >\n <span>{translation('send feedback label')}</span>\n <div className='grow' />\n <PaperPlaneTilt className={getSize(5)} />\n </Button>\n <Popover.Close asChild>\n <Button classNames='is-full flex gap-2'>\n <span>{t('cancel label', { ns: 'os' })}</span>\n <div className='grow' />\n <X className={getSize(5)} />\n </Button>\n </Popover.Close>\n </div>\n </div>\n );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type useTranslation } from '@dxos/react-ui';\n\nimport { STATUS_BAR_PLUGIN } from './meta';\n\ntype StatusBarTranslationKeys =\n | 'plugin name'\n | 'email input label'\n | 'email input placeholder'\n | 'feedback text area label'\n | 'feedback text area placeholder'\n | 'send feedback label'\n | 'name label'\n | 'name placeholder';\n\ntype RequiredTranslation = { [key in StatusBarTranslationKeys]: string };\ntype TranslationEntry = { [STATUS_BAR_PLUGIN]: RequiredTranslation };\ntype Language = string;\n\n// -- helpers.\nconst entry = (translation: RequiredTranslation): TranslationEntry => ({ [STATUS_BAR_PLUGIN]: translation });\nexport const mkTranslation = (t: ReturnType<typeof useTranslation>['t']) => (key: StatusBarTranslationKeys) => t(key);\n\nconst translations: Record<Language, TranslationEntry> = {\n 'en-US': entry({\n 'plugin name': 'Status Bar',\n 'name label': 'Name',\n 'name placeholder': 'Preferred name',\n 'email input label': 'Email',\n 'email input placeholder': 'hello@example.com',\n 'feedback text area label': 'Feedback',\n 'feedback text area placeholder': 'Found a bug? Have a suggestion? Let us know!',\n 'send feedback label': 'Send Feedback',\n }),\n};\n\nexport default [translations];\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { StatusBarPlugin } from './StatusBarPlugin';\n\nexport default StatusBarPlugin;\n\nexport * from './StatusBarPlugin';\nexport * from './components';\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React", "useFocusableGroup", "Slot", "React", "forwardRef", "mx", "StatusBarText", "forwardRef", "classNames", "children", "forwardedRef", "span", "className", "mx", "ref", "StatusBarButton", "asChild", "props", "classes", "Slot", "role", "button", "StatusBarItem", "forwardRef", "classNames", "children", "props", "forwardedRef", "div", "role", "className", "mx", "ref", "StatusBarContainer", "groupAttrs", "useFocusableGroup", "tabBehavior", "tabIndex", "StartContent", "EndContent", "StatusBar", "Container", "Text", "StatusBarText", "Item", "Button", "StatusBarButton", "React", "useState", "Surface", "Icon", "Popover", "Schema", "S", "PaperPlaneTilt", "X", "React", "useCallback", "useIntentDispatcher", "Button", "Input", "Popover", "useTranslation", "useForm", "getSize", "entry", "translation", "STATUS_BAR_PLUGIN", "mkTranslation", "t", "key", "translations", "Email", "S", "String", "pipe", "nonEmptyString", "message", "pattern", "nonEmpty", "field", "maxLength", "length", "FeedbackFormSchema", "Struct", "name", "email", "initialValues", "FeedbackForm", "onClose", "t", "useTranslation", "STATUS_BAR_PLUGIN", "translation", "mkTranslation", "dispatch", "useIntentDispatcher", "onSubmit", "useCallback", "values", "action", "data", "handleSubmit", "canSubmit", "getInputProps", "getErrorValence", "getErrorMessage", "useForm", "schema", "React", "div", "role", "className", "Input", "Root", "validationValence", "Label", "TextInput", "classNames", "placeholder", "autoFocus", "DescriptionAndValidation", "Validation", "TextArea", "rows", "cols", "Button", "type", "variant", "disabled", "onClick", "span", "PaperPlaneTilt", "getSize", "Popover", "Close", "asChild", "ns", "X", "StatusBarPanel", "open", "setOpen", "useState", "React", "Popover", "Root", "onOpenChange", "StatusBar", "Container", "EndContent", "Surface", "role", "Trigger", "asChild", "Button", "aria-label", "data-joyride", "Icon", "icon", "size", "Text", "classNames", "a", "href", "target", "rel", "Content", "FeedbackForm", "onClose", "Arrow", "StatusBarPlugin", "meta", "provides", "translations", "surface", "component", "role", "React", "StatusBarPanel", "StatusBarPlugin"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/plugins/plugin-status-bar/src/components/StatusBar.tsx":{"bytes":9929,"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"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":1252,"imports":[],"format":"esm"},"packages/plugins/plugin-status-bar/src/translations.ts":{"bytes":3385,"imports":[{"path":"packages/plugins/plugin-status-bar/src/meta.ts","kind":"import-statement","original":"./meta"}],"format":"esm"},"packages/plugins/plugin-status-bar/src/components/FeedbackForm.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"packages/plugins/plugin-status-bar/src/components/StatusBar.tsx":{"bytes":9929,"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"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":1252,"imports":[],"format":"esm"},"packages/plugins/plugin-status-bar/src/translations.ts":{"bytes":3385,"imports":[{"path":"packages/plugins/plugin-status-bar/src/meta.ts","kind":"import-statement","original":"./meta"}],"format":"esm"},"packages/plugins/plugin-status-bar/src/components/FeedbackForm.tsx":{"bytes":16125,"imports":[{"path":"@effect/schema","kind":"import-statement","external":true},{"path":"@phosphor-icons/react","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":"@dxos/react-ui-data","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"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/components/StatusBarPanel.tsx":{"bytes":6010,"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/FeedbackForm.tsx","kind":"import-statement","original":"./FeedbackForm"},{"path":"packages/plugins/plugin-status-bar/src/components/StatusBar.tsx","kind":"import-statement","original":"./StatusBar"}],"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/StatusBarPlugin.tsx":{"bytes":2663,"imports":[{"path":"react","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/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":916,"imports":[{"path":"packages/plugins/plugin-status-bar/src/StatusBarPlugin.tsx","kind":"import-statement","original":"./StatusBarPlugin"},{"path":"packages/plugins/plugin-status-bar/src/StatusBarPlugin.tsx","kind":"import-statement","original":"./StatusBarPlugin"},{"path":"packages/plugins/plugin-status-bar/src/components/index.ts","kind":"import-statement","original":"./components"}],"format":"esm"}},"outputs":{"packages/plugins/plugin-status-bar/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":20188},"packages/plugins/plugin-status-bar/dist/lib/browser/index.mjs":{"imports":[{"path":"packages/plugins/plugin-status-bar/dist/lib/browser/chunk-4KDZC7WS.mjs","kind":"import-statement"},{"path":"react","kind":"import-statement","external":true},{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"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":"@effect/schema","kind":"import-statement","external":true},{"path":"@phosphor-icons/react","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":"@dxos/react-ui-data","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["StatusBar","StatusBarPanel","StatusBarPlugin","default"],"entryPoint":"packages/plugins/plugin-status-bar/src/index.ts","inputs":{"packages/plugins/plugin-status-bar/src/StatusBarPlugin.tsx":{"bytesInOutput":424},"packages/plugins/plugin-status-bar/src/components/StatusBar.tsx":{"bytesInOutput":2478},"packages/plugins/plugin-status-bar/src/components/index.ts":{"bytesInOutput":0},"packages/plugins/plugin-status-bar/src/components/StatusBarPanel.tsx":{"bytesInOutput":1692},"packages/plugins/plugin-status-bar/src/components/FeedbackForm.tsx":{"bytesInOutput":4649},"packages/plugins/plugin-status-bar/src/translations.ts":{"bytesInOutput":570},"packages/plugins/plugin-status-bar/src/index.ts":{"bytesInOutput":35}},"bytes":10639},"packages/plugins/plugin-status-bar/dist/lib/browser/meta.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":93},"packages/plugins/plugin-status-bar/dist/lib/browser/meta.mjs":{"imports":[{"path":"packages/plugins/plugin-status-bar/dist/lib/browser/chunk-4KDZC7WS.mjs","kind":"import-statement"}],"exports":["STATUS_BAR_PLUGIN","default"],"entryPoint":"packages/plugins/plugin-status-bar/src/meta.ts","inputs":{},"bytes":169},"packages/plugins/plugin-status-bar/dist/lib/browser/chunk-4KDZC7WS.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":600},"packages/plugins/plugin-status-bar/dist/lib/browser/chunk-4KDZC7WS.mjs":{"imports":[],"exports":["STATUS_BAR_PLUGIN","meta_default"],"inputs":{"packages/plugins/plugin-status-bar/src/meta.ts":{"bytesInOutput":210}},"bytes":353}}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/plugin-status-bar",
|
|
3
|
-
"version": "0.6.14-staging.
|
|
3
|
+
"version": "0.6.14-staging.a52de51",
|
|
4
4
|
"description": "Status bar plugin",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -36,10 +36,10 @@
|
|
|
36
36
|
"@radix-ui/react-slot": "^1.0.1",
|
|
37
37
|
"effect": "^3.9.1",
|
|
38
38
|
"react-resize-detector": "^11.0.1",
|
|
39
|
-
"@dxos/app-framework": "0.6.14-staging.
|
|
40
|
-
"@dxos/async": "0.6.14-staging.
|
|
41
|
-
"@dxos/react-ui-data": "0.6.14-staging.
|
|
42
|
-
"@dxos/echo-schema": "0.6.14-staging.
|
|
39
|
+
"@dxos/app-framework": "0.6.14-staging.a52de51",
|
|
40
|
+
"@dxos/async": "0.6.14-staging.a52de51",
|
|
41
|
+
"@dxos/react-ui-data": "0.6.14-staging.a52de51",
|
|
42
|
+
"@dxos/echo-schema": "0.6.14-staging.a52de51"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@phosphor-icons/react": "^2.1.5",
|
|
@@ -48,16 +48,16 @@
|
|
|
48
48
|
"react": "~18.2.0",
|
|
49
49
|
"react-dom": "~18.2.0",
|
|
50
50
|
"vite": "5.4.7",
|
|
51
|
-
"@dxos/react-ui-theme": "0.6.14-staging.
|
|
52
|
-
"@dxos/react-ui": "0.6.14-staging.
|
|
53
|
-
"@dxos/storybook-utils": "0.6.14-staging.
|
|
51
|
+
"@dxos/react-ui-theme": "0.6.14-staging.a52de51",
|
|
52
|
+
"@dxos/react-ui": "0.6.14-staging.a52de51",
|
|
53
|
+
"@dxos/storybook-utils": "0.6.14-staging.a52de51"
|
|
54
54
|
},
|
|
55
55
|
"peerDependencies": {
|
|
56
56
|
"@phosphor-icons/react": "^2.0.5",
|
|
57
57
|
"react": "~18.2.0",
|
|
58
58
|
"react-dom": "~18.2.0",
|
|
59
|
-
"@dxos/react-ui": "0.6.14-staging.
|
|
60
|
-
"@dxos/react-ui-theme": "0.6.14-staging.
|
|
59
|
+
"@dxos/react-ui": "0.6.14-staging.a52de51",
|
|
60
|
+
"@dxos/react-ui-theme": "0.6.14-staging.a52de51"
|
|
61
61
|
},
|
|
62
62
|
"publishConfig": {
|
|
63
63
|
"access": "public"
|
|
@@ -48,7 +48,7 @@ export const FeedbackForm = ({ onClose }: { onClose: () => void }) => {
|
|
|
48
48
|
[dispatch, onClose],
|
|
49
49
|
);
|
|
50
50
|
|
|
51
|
-
const {
|
|
51
|
+
const { handleSubmit, canSubmit, getInputProps, getErrorValence, getErrorMessage } = useForm<FeedbackFormState>({
|
|
52
52
|
initialValues,
|
|
53
53
|
schema: FeedbackFormSchema,
|
|
54
54
|
onSubmit,
|
|
@@ -57,7 +57,7 @@ export const FeedbackForm = ({ onClose }: { onClose: () => void }) => {
|
|
|
57
57
|
return (
|
|
58
58
|
<div role='form' className='p-3 flex flex-col gap-2'>
|
|
59
59
|
<div role='none' className='space-b-1'>
|
|
60
|
-
<Input.Root validationValence={
|
|
60
|
+
<Input.Root validationValence={getErrorValence('name')}>
|
|
61
61
|
<Input.Label>{translation('name label')}</Input.Label>
|
|
62
62
|
<Input.TextInput
|
|
63
63
|
classNames={'text-sm'}
|
|
@@ -66,13 +66,13 @@ export const FeedbackForm = ({ onClose }: { onClose: () => void }) => {
|
|
|
66
66
|
{...getInputProps('name')}
|
|
67
67
|
/>
|
|
68
68
|
<Input.DescriptionAndValidation>
|
|
69
|
-
<Input.Validation>{
|
|
69
|
+
<Input.Validation>{getErrorMessage('name')}</Input.Validation>
|
|
70
70
|
</Input.DescriptionAndValidation>
|
|
71
71
|
</Input.Root>
|
|
72
72
|
</div>
|
|
73
73
|
|
|
74
74
|
<div role='none' className='space-b-1'>
|
|
75
|
-
<Input.Root validationValence={
|
|
75
|
+
<Input.Root validationValence={getErrorValence('email')}>
|
|
76
76
|
<Input.Label>{translation('email input label')}</Input.Label>
|
|
77
77
|
<Input.TextInput
|
|
78
78
|
classNames={'text-sm'}
|
|
@@ -80,13 +80,13 @@ export const FeedbackForm = ({ onClose }: { onClose: () => void }) => {
|
|
|
80
80
|
{...getInputProps('email')}
|
|
81
81
|
/>
|
|
82
82
|
<Input.DescriptionAndValidation>
|
|
83
|
-
<Input.Validation>{
|
|
83
|
+
<Input.Validation>{getErrorMessage('email')}</Input.Validation>
|
|
84
84
|
</Input.DescriptionAndValidation>
|
|
85
85
|
</Input.Root>
|
|
86
86
|
</div>
|
|
87
87
|
|
|
88
88
|
<div role='none' className='space-b-1'>
|
|
89
|
-
<Input.Root validationValence={
|
|
89
|
+
<Input.Root validationValence={getErrorValence('message')}>
|
|
90
90
|
<Input.Label>{translation('feedback text area label')}</Input.Label>
|
|
91
91
|
<Input.TextArea
|
|
92
92
|
classNames={'text-sm'}
|
|
@@ -96,7 +96,7 @@ export const FeedbackForm = ({ onClose }: { onClose: () => void }) => {
|
|
|
96
96
|
{...getInputProps('message')}
|
|
97
97
|
/>
|
|
98
98
|
<Input.DescriptionAndValidation>
|
|
99
|
-
<Input.Validation>{
|
|
99
|
+
<Input.Validation>{getErrorMessage('message')}</Input.Validation>
|
|
100
100
|
</Input.DescriptionAndValidation>
|
|
101
101
|
</Input.Root>
|
|
102
102
|
</div>
|
|
@@ -18,6 +18,7 @@ export const StatusBarPanel = () => {
|
|
|
18
18
|
<Popover.Root open={open} onOpenChange={setOpen}>
|
|
19
19
|
<StatusBar.Container>
|
|
20
20
|
<StatusBar.EndContent>
|
|
21
|
+
<Surface role='status' />
|
|
21
22
|
<Popover.Trigger asChild>
|
|
22
23
|
<StatusBar.Button aria-label='Give feedback about composer' data-joyride='welcome/feedback'>
|
|
23
24
|
<Icon icon='ph--paper-plane-tilt--regular' size={4} />
|
|
@@ -32,7 +33,6 @@ export const StatusBarPanel = () => {
|
|
|
32
33
|
</a>
|
|
33
34
|
</StatusBar.Button>
|
|
34
35
|
</StatusBar.EndContent>
|
|
35
|
-
<Surface role='status' />
|
|
36
36
|
</StatusBar.Container>
|
|
37
37
|
<Popover.Content classNames='shadow-lg'>
|
|
38
38
|
<FeedbackForm onClose={() => setOpen(false)} />
|