@dxos/plugin-status-bar 0.7.0 → 0.7.1-staging.8709ba7
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.
|
@@ -76,7 +76,7 @@ import { PaperPlaneTilt, X } from "@phosphor-icons/react";
|
|
|
76
76
|
import React2, { useCallback } from "react";
|
|
77
77
|
import { useIntentDispatcher } from "@dxos/app-framework";
|
|
78
78
|
import { Button, Input, Popover, useTranslation } from "@dxos/react-ui";
|
|
79
|
-
import { useForm } from "@dxos/react-ui-
|
|
79
|
+
import { useForm } from "@dxos/react-ui-form";
|
|
80
80
|
import { getSize } from "@dxos/react-ui-theme";
|
|
81
81
|
|
|
82
82
|
// packages/plugins/plugin-status-bar/src/translations.ts
|
|
@@ -136,7 +136,7 @@ var FeedbackForm = ({ onClose }) => {
|
|
|
136
136
|
dispatch,
|
|
137
137
|
onClose
|
|
138
138
|
]);
|
|
139
|
-
const { handleSubmit, canSubmit,
|
|
139
|
+
const { handleSubmit, canSubmit, getStatus, ...inputProps } = 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: getStatus("name").status
|
|
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
|
-
...
|
|
157
|
-
}), /* @__PURE__ */ React2.createElement(Input.DescriptionAndValidation, null, /* @__PURE__ */ React2.createElement(Input.Validation, null,
|
|
156
|
+
...inputProps
|
|
157
|
+
}), /* @__PURE__ */ React2.createElement(Input.DescriptionAndValidation, null, /* @__PURE__ */ React2.createElement(Input.Validation, null, getStatus("name").error)))), /* @__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: getStatus("email").status
|
|
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
|
-
...
|
|
166
|
-
}), /* @__PURE__ */ React2.createElement(Input.DescriptionAndValidation, null, /* @__PURE__ */ React2.createElement(Input.Validation, null,
|
|
165
|
+
...inputProps
|
|
166
|
+
}), /* @__PURE__ */ React2.createElement(Input.DescriptionAndValidation, null, /* @__PURE__ */ React2.createElement(Input.Validation, null, getStatus("email").error)))), /* @__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: getStatus("message").status
|
|
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
|
-
...
|
|
177
|
-
}), /* @__PURE__ */ React2.createElement(Input.DescriptionAndValidation, null, /* @__PURE__ */ React2.createElement(Input.Validation, null,
|
|
176
|
+
...inputProps
|
|
177
|
+
}), /* @__PURE__ */ React2.createElement(Input.DescriptionAndValidation, null, /* @__PURE__ */ React2.createElement(Input.Validation, null, getStatus("message").error)))), /* @__PURE__ */ React2.createElement("div", {
|
|
178
178
|
role: "none",
|
|
179
179
|
className: "space-b-2"
|
|
180
180
|
}, /* @__PURE__ */ React2.createElement(Button, {
|
|
@@ -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 <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", "
|
|
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-form';\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 FeedbackFormType = S.Schema.Type<typeof FeedbackFormSchema>;\n\nconst initialValues: FeedbackFormType = { 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: FeedbackFormType) => {\n void dispatch({ action: 'dxos.org/plugin/observability/capture-feedback', data: values });\n onClose();\n },\n [dispatch, onClose],\n );\n\n const { handleSubmit, canSubmit, getStatus, ...inputProps } = useForm<FeedbackFormType>({\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={getStatus('name').status}>\n <Input.Label>{translation('name label')}</Input.Label>\n <Input.TextInput\n classNames={'text-sm'}\n placeholder={translation('name placeholder')}\n autoFocus\n {...inputProps}\n />\n <Input.DescriptionAndValidation>\n <Input.Validation>{getStatus('name').error}</Input.Validation>\n </Input.DescriptionAndValidation>\n </Input.Root>\n </div>\n\n <div role='none' className='space-b-1'>\n <Input.Root validationValence={getStatus('email').status}>\n <Input.Label>{translation('email input label')}</Input.Label>\n <Input.TextInput\n classNames={'text-sm'}\n placeholder={translation('email input placeholder')}\n {...inputProps}\n />\n <Input.DescriptionAndValidation>\n <Input.Validation>{getStatus('email').error}</Input.Validation>\n </Input.DescriptionAndValidation>\n </Input.Root>\n </div>\n\n <div role='none' className='space-b-1'>\n <Input.Root validationValence={getStatus('message').status}>\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 {...inputProps}\n />\n <Input.DescriptionAndValidation>\n <Input.Validation>{getStatus('message').error}</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": ";;;;;;AAIA,OAAOA,YAAW;;;ACAlB,SAASC,yBAAyB;AAClC,SAASC,YAAY;AACrB,OAAOC,SAASC,kBAAuD;AAGvE,SAASC,UAAU;AAInB,IAAMC,gBAAgBC,2BAAgD,CAAC,EAAEC,YAAYC,SAAQ,GAAIC,iBAC/F,sBAAA,cAACC,QAAAA;EAAKC,WAAWC,GAAGL,UAAAA;EAAaM,KAAKJ;GACnCD,QAAAA,CAAAA;AAOL,IAAMM,kBAAkBR,2BACtB,CAAC,EAAEC,YAAYC,UAAUO,SAAS,GAAGC,MAAAA,GAASP,iBAAAA;AAC5C,QAAMQ,UAAUL,GACd,+CACA,4CACA,kGACAL,UAAAA;AAGF,SAAOQ,UACL,sBAAA,cAACG,MAAAA;IAAKC,MAAK;IAASN,KAAKJ;IAAcE,WAAWM;IAAU,GAAGD;KAC5DR,QAAAA,IAGH,sBAAA,cAACY,UAAAA;IAAOT,WAAWM;IAASJ,KAAKJ;IAAe,GAAGO;KAChDR,QAAAA;AAGP,CAAA;AAOF,IAAMa,gBAAgBC,2BACpB,CAAC,EAAEC,YAAYC,UAAU,GAAGC,MAAAA,GAASC,iBACnC,sBAAA,cAACC,OAAAA;EACCC,MAAK;EACLC,WAAWC,GAAG,2DAA2DP,UAAAA;EACzEQ,KAAKL;EACJ,GAAGD;GAEHD,QAAAA,CAAAA;AAQP,IAAMQ,qBAAqBV,2BACzB,CAAC,EAAEC,YAAYC,SAAQ,GAAIE,iBAAAA;AACzB,QAAMO,aAAaC,kBAAkB;IAAEC,aAAa;EAAU,CAAA;AAC9D,SACE,sBAAA,cAACR,OAAAA;IACCC,MAAK;IACLQ,UAAU;IACT,GAAGH;IACJJ,WAAWC,GACT,uIACAP,UAAAA;IAEFQ,KAAKL;KAEJF,QAAAA;AAGP,CAAA;AAKF,IAAMa,eAAef,2BAA8C,CAAC,EAAEC,YAAYC,SAAQ,GAAIE,iBAC5F,sBAAA,cAACC,OAAAA;EAAIC,MAAK;EAAOC,WAAWC,GAAG,yCAAyCP,UAAAA;EAAaQ,KAAKL;GACvFF,QAAAA,CAAAA;AAML,IAAMc,aAAahB,2BAA4C,CAAC,EAAEC,YAAYC,SAAQ,GAAIE,iBACxF,sBAAA,cAACC,OAAAA;EAAIC,MAAK;EAAOC,WAAWC,GAAG,2CAA2CP,UAAAA;EAAaQ,KAAKL;GACzFF,QAAAA,CAAAA;AAIE,IAAMe,YAAY;EACvBC,WAAWR;EACXS,MAAMC;EACNC,MAAMtB;EACNuB,QAAQC;EACRR;EACAC;AACF;;;ACtGA,OAAOQ,UAASC,gBAAgB;AAEhC,SAASC,eAAe;AACxB,SAASC,MAAMC,WAAAA,gBAAe;;;ACH9B,SAASC,UAAUC,SAAS;AAC5B,SAASC,gBAAgBC,SAAS;AAClC,OAAOC,UAASC,mBAAmB;AAEnC,SAASC,2BAA2B;AACpC,SAASC,QAAQC,OAAOC,SAASC,sBAAsB;AACvD,SAASC,eAAe;AACxB,SAASC,eAAe;;;ACYxB,IAAMC,QAAQ,CAACC,iBAAwD;EAAE,CAACC,iBAAAA,GAAoBD;AAAY;AACnG,IAAME,gBAAgB,CAACC,MAA8C,CAACC,QAAkCD,EAAEC,GAAAA;AAEjH,IAAMC,eAAmD;EACvD,SAASN,MAAM;IACb,eAAe;IACf,cAAc;IACd,oBAAoB;IACpB,qBAAqB;IACrB,2BAA2B;IAC3B,4BAA4B;IAC5B,kCAAkC;IAClC,uBAAuB;EACzB,CAAA;AACF;AAEA,IAAA,uBAAe;EAACM;;;;ADvBhB,IAAMC,QAAQC,EAAEC,OAAOC,KACrBF,EAAEG,eAAe;EAAEC,SAAS,MAAM;AAAqB,CAAA,GACvDJ,EAAEK,QAAQ,kFAAkF;EAC1FD,SAAS,MAAM;AACjB,CAAA,CAAA;AAGF,IAAME,WAAW,CAACC,UAAkBP,EAAEG,eAAe;EAAEC,SAAS,MAAM,GAAGG,KAAAA;AAAqB,CAAA;AAC9F,IAAMC,YAAY,CAACD,OAAeE,WAAmBT,EAAEQ,UAAUC,QAAQ;EAAEL,SAAS,MAAM,GAAGG,KAAAA;AAAqB,CAAA;AAGlH,IAAMG,qBAAqBV,EAAEW,OAAO;EAClCC,MAAMZ,EAAEC,OAAOC,KAAKI,SAAS,MAAA,GAASE,UAAU,QAAQ,GAAA,CAAA;EACxDK,OAAOd,MAAMG,KAAKM,UAAU,SAAS,GAAA,CAAA;EACrCJ,SAASJ,EAAEC,OAAOC,KAAKI,SAAS,UAAA,GAAaE,UAAU,YAAY,KAAA,CAAA;AACrE,CAAA;AAIA,IAAMM,gBAAkC;EAAEF,MAAM;EAAIC,OAAO;EAAIT,SAAS;AAAG;AAEpE,IAAMW,eAAe,CAAC,EAAEC,QAAO,MAA2B;AAC/D,QAAM,EAAEC,EAAC,IAAKC,eAAeC,iBAAAA;AAC7B,QAAMC,cAAcC,cAAcJ,CAAAA;AAClC,QAAMK,WAAWC,oBAAAA;AAEjB,QAAMC,WAAWC,YACf,CAACC,WAAAA;AACC,SAAKJ,SAAS;MAAEK,QAAQ;MAAkDC,MAAMF;IAAO,CAAA;AACvFV,YAAAA;EACF,GACA;IAACM;IAAUN;GAAQ;AAGrB,QAAM,EAAEa,cAAcC,WAAWC,WAAW,GAAGC,WAAAA,IAAeC,QAA0B;IACtFnB;IACAoB,QAAQxB;IACRc;EACF,CAAA;AAEA,SACE,gBAAAW,OAAA,cAACC,OAAAA;IAAIC,MAAK;IAAOC,WAAU;KACzB,gBAAAH,OAAA,cAACC,OAAAA;IAAIC,MAAK;IAAOC,WAAU;KACzB,gBAAAH,OAAA,cAACI,MAAMC,MAAI;IAACC,mBAAmBV,UAAU,MAAA,EAAQW;KAC/C,gBAAAP,OAAA,cAACI,MAAMI,OAAK,MAAEvB,YAAY,YAAA,CAAA,GAC1B,gBAAAe,OAAA,cAACI,MAAMK,WAAS;IACdC,YAAY;IACZC,aAAa1B,YAAY,kBAAA;IACzB2B,WAAAA;IACC,GAAGf;MAEN,gBAAAG,OAAA,cAACI,MAAMS,0BAAwB,MAC7B,gBAAAb,OAAA,cAACI,MAAMU,YAAU,MAAElB,UAAU,MAAA,EAAQmB,KAAK,CAAA,CAAA,CAAA,GAKhD,gBAAAf,OAAA,cAACC,OAAAA;IAAIC,MAAK;IAAOC,WAAU;KACzB,gBAAAH,OAAA,cAACI,MAAMC,MAAI;IAACC,mBAAmBV,UAAU,OAAA,EAASW;KAChD,gBAAAP,OAAA,cAACI,MAAMI,OAAK,MAAEvB,YAAY,mBAAA,CAAA,GAC1B,gBAAAe,OAAA,cAACI,MAAMK,WAAS;IACdC,YAAY;IACZC,aAAa1B,YAAY,yBAAA;IACxB,GAAGY;MAEN,gBAAAG,OAAA,cAACI,MAAMS,0BAAwB,MAC7B,gBAAAb,OAAA,cAACI,MAAMU,YAAU,MAAElB,UAAU,OAAA,EAASmB,KAAK,CAAA,CAAA,CAAA,GAKjD,gBAAAf,OAAA,cAACC,OAAAA;IAAIC,MAAK;IAAOC,WAAU;KACzB,gBAAAH,OAAA,cAACI,MAAMC,MAAI;IAACC,mBAAmBV,UAAU,SAAA,EAAWW;KAClD,gBAAAP,OAAA,cAACI,MAAMI,OAAK,MAAEvB,YAAY,0BAAA,CAAA,GAC1B,gBAAAe,OAAA,cAACI,MAAMY,UAAQ;IACbN,YAAY;IACZO,MAAM;IACNC,MAAM;IACNP,aAAa1B,YAAY,gCAAA;IACxB,GAAGY;MAEN,gBAAAG,OAAA,cAACI,MAAMS,0BAAwB,MAC7B,gBAAAb,OAAA,cAACI,MAAMU,YAAU,MAAElB,UAAU,SAAA,EAAWmB,KAAK,CAAA,CAAA,CAAA,GAKnD,gBAAAf,OAAA,cAACC,OAAAA;IAAIC,MAAK;IAAOC,WAAU;KACzB,gBAAAH,OAAA,cAACmB,QAAAA;IACCC,MAAK;IACLC,SAAQ;IACRX,YAAW;IACXY,UAAU,CAAC3B;IACX4B,SAAS7B;KAET,gBAAAM,OAAA,cAACwB,QAAAA,MAAMvC,YAAY,qBAAA,CAAA,GACnB,gBAAAe,OAAA,cAACC,OAAAA;IAAIE,WAAU;MACf,gBAAAH,OAAA,cAACyB,gBAAAA;IAAetB,WAAWuB,QAAQ,CAAA;OAErC,gBAAA1B,OAAA,cAAC2B,QAAQC,OAAK;IAACC,SAAAA;KACb,gBAAA7B,OAAA,cAACmB,QAAAA;IAAOT,YAAW;KACjB,gBAAAV,OAAA,cAACwB,QAAAA,MAAM1C,EAAE,gBAAgB;IAAEgD,IAAI;EAAK,CAAA,CAAA,GACpC,gBAAA9B,OAAA,cAACC,OAAAA;IAAIE,WAAU;MACf,gBAAAH,OAAA,cAAC+B,GAAAA;IAAE5B,WAAWuB,QAAQ,CAAA;;AAMlC;;;ADjHO,IAAMM,iBAAiB,MAAA;AAC5B,QAAM,CAACC,MAAMC,OAAAA,IAAWC,SAAS,KAAA;AAGjC,SACE,gBAAAC,OAAA,cAACC,SAAQC,MAAI;IAACL;IAAYM,cAAcL;KACtC,gBAAAE,OAAA,cAACI,UAAUC,WAAS,MAClB,gBAAAL,OAAA,cAACI,UAAUE,YAAU,MACnB,gBAAAN,OAAA,cAACO,SAAAA;IAAQC,MAAK;MACd,gBAAAR,OAAA,cAACC,SAAQQ,SAAO;IAACC,SAAAA;KACf,gBAAAV,OAAA,cAACI,UAAUO,QAAM;IAACC,cAAW;IAA+BC,gBAAa;KACvE,gBAAAb,OAAA,cAACc,MAAAA;IAAKC,MAAK;IAAgCC,MAAM;MACjD,gBAAAhB,OAAA,cAACI,UAAUa,MAAI;IAACC,YAAW;KAAkB,UAAA,CAAA,CAAA,GAIjD,gBAAAlB,OAAA,cAACI,UAAUO,QAAM;IAACC,cAAW;IAAoBF,SAAAA;KAC/C,gBAAAV,OAAA,cAACmB,KAAAA;IAAEC,MAAK;IAA2BC,QAAO;IAASC,KAAI;KACrD,gBAAAtB,OAAA,cAACc,MAAAA;IAAKC,MAAK;IAA4BC,MAAM;MAC7C,gBAAAhB,OAAA,cAACI,UAAUa,MAAI;IAACC,YAAW;KAAkB,SAAA,CAAA,CAAA,CAAA,CAAA,GAKrD,gBAAAlB,OAAA,cAACC,SAAQsB,SAAO;IAACL,YAAW;KAC1B,gBAAAlB,OAAA,cAACwB,cAAAA;IAAaC,SAAS,MAAM3B,QAAQ,KAAA;MACrC,gBAAAE,OAAA,cAACC,SAAQyB,OAAK,IAAA,CAAA,CAAA;AAItB;;;AF5BO,IAAMC,kBAAkB,MAAA;AAC7B,SAAO;IACLC;IACAC,UAAU;MACRC;MACAC,SAAS;QACPC,WAAW,CAAC,EAAEC,KAAI,MAAE;AAClB,kBAAQA,MAAAA;YACN,KAAK,cAAc;AACjB,qBAAO,gBAAAC,OAAA,cAACC,gBAAAA,IAAAA;YACV;UACF;AAEA,iBAAO;QACT;MACF;IACF;EACF;AACF;;;AK1BA,IAAA,cAAeC;",
|
|
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", "getStatus", "inputProps", "useForm", "schema", "React", "div", "role", "className", "Input", "Root", "validationValence", "status", "Label", "TextInput", "classNames", "placeholder", "autoFocus", "DescriptionAndValidation", "Validation", "error", "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":16012,"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-form","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":20104},"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-form","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":4592},"packages/plugins/plugin-status-bar/src/translations.ts":{"bytesInOutput":570},"packages/plugins/plugin-status-bar/src/index.ts":{"bytesInOutput":35}},"bytes":10582},"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.7.
|
|
3
|
+
"version": "0.7.1-staging.8709ba7",
|
|
4
4
|
"description": "Status bar plugin",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -30,16 +30,17 @@
|
|
|
30
30
|
"src"
|
|
31
31
|
],
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@effect/schema": "^0.75.
|
|
33
|
+
"@effect/schema": "^0.75.5",
|
|
34
34
|
"@fluentui/react-tabster": "^9.19.0",
|
|
35
35
|
"@preact/signals-core": "^1.6.0",
|
|
36
36
|
"@radix-ui/react-slot": "^1.0.1",
|
|
37
|
-
"effect": "^3.9.
|
|
37
|
+
"effect": "^3.9.2",
|
|
38
38
|
"react-resize-detector": "^11.0.1",
|
|
39
|
-
"@dxos/app-framework": "0.7.
|
|
40
|
-
"@dxos/
|
|
41
|
-
"@dxos/echo-schema": "0.7.
|
|
42
|
-
"@dxos/
|
|
39
|
+
"@dxos/app-framework": "0.7.1-staging.8709ba7",
|
|
40
|
+
"@dxos/react-ui-form": "0.7.1-staging.8709ba7",
|
|
41
|
+
"@dxos/echo-schema": "0.7.1-staging.8709ba7",
|
|
42
|
+
"@dxos/schema": "0.7.1-staging.8709ba7",
|
|
43
|
+
"@dxos/async": "0.7.1-staging.8709ba7"
|
|
43
44
|
},
|
|
44
45
|
"devDependencies": {
|
|
45
46
|
"@phosphor-icons/react": "^2.1.5",
|
|
@@ -48,16 +49,16 @@
|
|
|
48
49
|
"react": "~18.2.0",
|
|
49
50
|
"react-dom": "~18.2.0",
|
|
50
51
|
"vite": "5.4.7",
|
|
51
|
-
"@dxos/
|
|
52
|
-
"@dxos/react-ui": "0.7.
|
|
53
|
-
"@dxos/
|
|
52
|
+
"@dxos/react-ui": "0.7.1-staging.8709ba7",
|
|
53
|
+
"@dxos/react-ui-theme": "0.7.1-staging.8709ba7",
|
|
54
|
+
"@dxos/storybook-utils": "0.7.1-staging.8709ba7"
|
|
54
55
|
},
|
|
55
56
|
"peerDependencies": {
|
|
56
57
|
"@phosphor-icons/react": "^2.0.5",
|
|
57
58
|
"react": "~18.2.0",
|
|
58
59
|
"react-dom": "~18.2.0",
|
|
59
|
-
"@dxos/react-ui": "0.7.
|
|
60
|
-
"@dxos/react-ui-theme": "0.7.
|
|
60
|
+
"@dxos/react-ui": "0.7.1-staging.8709ba7",
|
|
61
|
+
"@dxos/react-ui-theme": "0.7.1-staging.8709ba7"
|
|
61
62
|
},
|
|
62
63
|
"publishConfig": {
|
|
63
64
|
"access": "public"
|
|
@@ -8,7 +8,7 @@ import React, { useCallback } from 'react';
|
|
|
8
8
|
|
|
9
9
|
import { useIntentDispatcher } from '@dxos/app-framework';
|
|
10
10
|
import { Button, Input, Popover, useTranslation } from '@dxos/react-ui';
|
|
11
|
-
import { useForm } from '@dxos/react-ui-
|
|
11
|
+
import { useForm } from '@dxos/react-ui-form';
|
|
12
12
|
import { getSize } from '@dxos/react-ui-theme';
|
|
13
13
|
|
|
14
14
|
import { STATUS_BAR_PLUGIN } from '../meta';
|
|
@@ -31,9 +31,9 @@ const FeedbackFormSchema = S.Struct({
|
|
|
31
31
|
message: S.String.pipe(nonEmpty('Feedback'), maxLength('Feedback', 32_768)),
|
|
32
32
|
});
|
|
33
33
|
|
|
34
|
-
type
|
|
34
|
+
type FeedbackFormType = S.Schema.Type<typeof FeedbackFormSchema>;
|
|
35
35
|
|
|
36
|
-
const initialValues:
|
|
36
|
+
const initialValues: FeedbackFormType = { name: '', email: '', message: '' };
|
|
37
37
|
|
|
38
38
|
export const FeedbackForm = ({ onClose }: { onClose: () => void }) => {
|
|
39
39
|
const { t } = useTranslation(STATUS_BAR_PLUGIN);
|
|
@@ -41,14 +41,14 @@ export const FeedbackForm = ({ onClose }: { onClose: () => void }) => {
|
|
|
41
41
|
const dispatch = useIntentDispatcher();
|
|
42
42
|
|
|
43
43
|
const onSubmit = useCallback(
|
|
44
|
-
(values:
|
|
44
|
+
(values: FeedbackFormType) => {
|
|
45
45
|
void dispatch({ action: 'dxos.org/plugin/observability/capture-feedback', data: values });
|
|
46
46
|
onClose();
|
|
47
47
|
},
|
|
48
48
|
[dispatch, onClose],
|
|
49
49
|
);
|
|
50
50
|
|
|
51
|
-
const { handleSubmit, canSubmit,
|
|
51
|
+
const { handleSubmit, canSubmit, getStatus, ...inputProps } = useForm<FeedbackFormType>({
|
|
52
52
|
initialValues,
|
|
53
53
|
schema: FeedbackFormSchema,
|
|
54
54
|
onSubmit,
|
|
@@ -57,46 +57,46 @@ 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={getStatus('name').status}>
|
|
61
61
|
<Input.Label>{translation('name label')}</Input.Label>
|
|
62
62
|
<Input.TextInput
|
|
63
63
|
classNames={'text-sm'}
|
|
64
64
|
placeholder={translation('name placeholder')}
|
|
65
65
|
autoFocus
|
|
66
|
-
{...
|
|
66
|
+
{...inputProps}
|
|
67
67
|
/>
|
|
68
68
|
<Input.DescriptionAndValidation>
|
|
69
|
-
<Input.Validation>{
|
|
69
|
+
<Input.Validation>{getStatus('name').error}</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={getStatus('email').status}>
|
|
76
76
|
<Input.Label>{translation('email input label')}</Input.Label>
|
|
77
77
|
<Input.TextInput
|
|
78
78
|
classNames={'text-sm'}
|
|
79
79
|
placeholder={translation('email input placeholder')}
|
|
80
|
-
{...
|
|
80
|
+
{...inputProps}
|
|
81
81
|
/>
|
|
82
82
|
<Input.DescriptionAndValidation>
|
|
83
|
-
<Input.Validation>{
|
|
83
|
+
<Input.Validation>{getStatus('email').error}</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={getStatus('message').status}>
|
|
90
90
|
<Input.Label>{translation('feedback text area label')}</Input.Label>
|
|
91
91
|
<Input.TextArea
|
|
92
92
|
classNames={'text-sm'}
|
|
93
93
|
rows={5}
|
|
94
94
|
cols={30}
|
|
95
95
|
placeholder={translation('feedback text area placeholder')}
|
|
96
|
-
{...
|
|
96
|
+
{...inputProps}
|
|
97
97
|
/>
|
|
98
98
|
<Input.DescriptionAndValidation>
|
|
99
|
-
<Input.Validation>{
|
|
99
|
+
<Input.Validation>{getStatus('message').error}</Input.Validation>
|
|
100
100
|
</Input.DescriptionAndValidation>
|
|
101
101
|
</Input.Root>
|
|
102
102
|
</div>
|