@dxos/plugin-status-bar 0.6.13-staging.1e988a3 → 0.6.14-main.7bd9c89
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/chunk-4KDZC7WS.mjs +14 -0
- package/dist/lib/browser/chunk-4KDZC7WS.mjs.map +7 -0
- package/dist/lib/browser/index.mjs +20 -16
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/meta.mjs +1 -1
- package/dist/types/src/components/FeedbackForm.d.ts.map +1 -1
- package/dist/types/src/components/StatusBar.d.ts.map +1 -1
- package/dist/types/src/components/StatusBar.stories.d.ts +6 -47
- package/dist/types/src/components/StatusBar.stories.d.ts.map +1 -1
- package/dist/types/src/components/StatusBarPanel.d.ts +3 -0
- package/dist/types/src/components/StatusBarPanel.d.ts.map +1 -0
- package/dist/types/src/components/index.d.ts +1 -1
- package/dist/types/src/components/index.d.ts.map +1 -1
- package/dist/types/src/hooks/useForm.d.ts +3 -3
- package/dist/types/src/hooks/useForm.d.ts.map +1 -1
- package/dist/types/src/meta.d.ts +3 -9
- package/dist/types/src/meta.d.ts.map +1 -1
- package/dist/types/src/util/validation.d.ts +1 -1
- package/dist/types/src/util/validation.d.ts.map +1 -1
- package/package.json +14 -18
- package/src/StatusBarPlugin.tsx +2 -2
- package/src/components/FeedbackForm.tsx +4 -4
- package/src/components/StatusBar.stories.tsx +33 -28
- package/src/components/StatusBar.tsx +3 -2
- package/src/components/{StatusBarImpl.tsx → StatusBarPanel.tsx} +4 -6
- package/src/components/index.ts +1 -1
- package/src/hooks/useForm.ts +3 -2
- package/src/meta.ts +14 -0
- package/src/util/validation.ts +2 -3
- package/dist/lib/browser/chunk-PL5XPTPX.mjs +0 -18
- package/dist/lib/browser/chunk-PL5XPTPX.mjs.map +0 -7
- package/dist/types/src/components/StatusBarImpl.d.ts +0 -3
- package/dist/types/src/components/StatusBarImpl.d.ts.map +0 -1
- package/src/meta.tsx +0 -18
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
// packages/plugins/plugin-status-bar/src/meta.ts
|
|
2
|
+
var STATUS_BAR_PLUGIN = "dxos.org/plugin/status-bar";
|
|
3
|
+
var meta_default = {
|
|
4
|
+
id: STATUS_BAR_PLUGIN,
|
|
5
|
+
name: "Status Bar",
|
|
6
|
+
description: "Display a bar with status and actions.",
|
|
7
|
+
icon: "ph--info--regular"
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
export {
|
|
11
|
+
STATUS_BAR_PLUGIN,
|
|
12
|
+
meta_default
|
|
13
|
+
};
|
|
14
|
+
//# sourceMappingURL=chunk-4KDZC7WS.mjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/meta.ts"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { type PluginMeta } from '@dxos/app-framework';\n\nexport const STATUS_BAR_PLUGIN = 'dxos.org/plugin/status-bar';\n\nexport default {\n id: STATUS_BAR_PLUGIN,\n name: 'Status Bar',\n description: 'Display a bar with status and actions.',\n icon: 'ph--info--regular',\n} satisfies PluginMeta;\n"],
|
|
5
|
+
"mappings": ";AAMO,IAAMA,oBAAoB;AAEjC,IAAA,eAAe;EACbC,IAAID;EACJE,MAAM;EACNC,aAAa;EACbC,MAAM;AACR;",
|
|
6
|
+
"names": ["STATUS_BAR_PLUGIN", "id", "name", "description", "icon"]
|
|
7
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
2
|
STATUS_BAR_PLUGIN,
|
|
3
3
|
meta_default
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-4KDZC7WS.mjs";
|
|
5
5
|
|
|
6
6
|
// packages/plugins/plugin-status-bar/src/StatusBarPlugin.tsx
|
|
7
7
|
import React4 from "react";
|
|
@@ -42,7 +42,7 @@ var StatusBarContainer = /* @__PURE__ */ forwardRef(({ classNames, children }, f
|
|
|
42
42
|
role: "menubar",
|
|
43
43
|
tabIndex: 0,
|
|
44
44
|
...groupAttrs,
|
|
45
|
-
className: mx("bs-[--statusbar-size] flex justify-end items-center gap-2
|
|
45
|
+
className: mx("bs-[--statusbar-size] flex justify-end items-center gap-2 bg-base text-description text-lg pointer-fine:text-xs ch-focus-ring-inset", classNames),
|
|
46
46
|
ref: forwardedRef
|
|
47
47
|
}, children);
|
|
48
48
|
});
|
|
@@ -65,17 +65,16 @@ var StatusBar = {
|
|
|
65
65
|
EndContent
|
|
66
66
|
};
|
|
67
67
|
|
|
68
|
-
// packages/plugins/plugin-status-bar/src/components/
|
|
69
|
-
import { DiscordLogo, PaperPlaneTilt as PaperPlaneTilt2 } from "@phosphor-icons/react";
|
|
68
|
+
// packages/plugins/plugin-status-bar/src/components/StatusBarPanel.tsx
|
|
70
69
|
import React3, { useState as useState2 } from "react";
|
|
71
70
|
import { Surface } from "@dxos/app-framework";
|
|
72
|
-
import { Popover as Popover2 } from "@dxos/react-ui";
|
|
71
|
+
import { Icon, Popover as Popover2 } from "@dxos/react-ui";
|
|
73
72
|
|
|
74
73
|
// packages/plugins/plugin-status-bar/src/components/FeedbackForm.tsx
|
|
74
|
+
import { Schema as S2 } from "@effect/schema";
|
|
75
75
|
import { X, PaperPlaneTilt } from "@phosphor-icons/react";
|
|
76
76
|
import React2, { useCallback as useCallback2 } from "react";
|
|
77
77
|
import { useIntentDispatcher } from "@dxos/app-framework";
|
|
78
|
-
import { S as S2 } from "@dxos/echo-schema";
|
|
79
78
|
import { Button, Input, Popover, useTranslation } from "@dxos/react-ui";
|
|
80
79
|
import { getSize } from "@dxos/react-ui-theme";
|
|
81
80
|
|
|
@@ -193,9 +192,8 @@ var translations_default = [
|
|
|
193
192
|
];
|
|
194
193
|
|
|
195
194
|
// packages/plugins/plugin-status-bar/src/util/validation.ts
|
|
196
|
-
import { ArrayFormatter } from "@effect/schema";
|
|
195
|
+
import { ArrayFormatter, Schema as S } from "@effect/schema";
|
|
197
196
|
import { Effect } from "effect";
|
|
198
|
-
import { S } from "@dxos/echo-schema";
|
|
199
197
|
var validate = (schema, data) => {
|
|
200
198
|
const validator = S.decodeUnknownEither(schema, {
|
|
201
199
|
errors: "all"
|
|
@@ -212,12 +210,12 @@ var validate = (schema, data) => {
|
|
|
212
210
|
};
|
|
213
211
|
|
|
214
212
|
// packages/plugins/plugin-status-bar/src/components/FeedbackForm.tsx
|
|
215
|
-
var Email = S2.String.pipe(S2.
|
|
213
|
+
var Email = S2.String.pipe(S2.nonEmptyString({
|
|
216
214
|
message: () => "Email is required."
|
|
217
215
|
}), S2.pattern(/^(?!\.)(?!.*\.\.)([A-Z0-9_+-.]*)[A-Z0-9_+-]@([A-Z0-9][A-Z0-9-]*\.)+[A-Z]{2,}$/i, {
|
|
218
216
|
message: () => "Invalid email address."
|
|
219
217
|
}));
|
|
220
|
-
var nonEmpty = (field) => S2.
|
|
218
|
+
var nonEmpty = (field) => S2.nonEmptyString({
|
|
221
219
|
message: () => `${field} is required.`
|
|
222
220
|
});
|
|
223
221
|
var maxLength = (field, length) => S2.maxLength(length, {
|
|
@@ -311,8 +309,8 @@ var FeedbackForm = ({ onClose }) => {
|
|
|
311
309
|
})))));
|
|
312
310
|
};
|
|
313
311
|
|
|
314
|
-
// packages/plugins/plugin-status-bar/src/components/
|
|
315
|
-
var
|
|
312
|
+
// packages/plugins/plugin-status-bar/src/components/StatusBarPanel.tsx
|
|
313
|
+
var StatusBarPanel = () => {
|
|
316
314
|
const [open, setOpen] = useState2(false);
|
|
317
315
|
return /* @__PURE__ */ React3.createElement(Popover2.Root, {
|
|
318
316
|
open,
|
|
@@ -322,7 +320,10 @@ var StatusBarImpl = () => {
|
|
|
322
320
|
}, /* @__PURE__ */ React3.createElement(StatusBar.Button, {
|
|
323
321
|
"aria-label": "Give feedback about composer",
|
|
324
322
|
"data-joyride": "welcome/feedback"
|
|
325
|
-
}, /* @__PURE__ */ React3.createElement(
|
|
323
|
+
}, /* @__PURE__ */ React3.createElement(Icon, {
|
|
324
|
+
icon: "ph--paper-plane-tilt--regular",
|
|
325
|
+
size: 4
|
|
326
|
+
}), /* @__PURE__ */ React3.createElement(StatusBar.Text, {
|
|
326
327
|
classNames: "hidden sm:block"
|
|
327
328
|
}, "Feedback"))), /* @__PURE__ */ React3.createElement(StatusBar.Button, {
|
|
328
329
|
"aria-label": "Open DXOS Discord",
|
|
@@ -331,7 +332,10 @@ var StatusBarImpl = () => {
|
|
|
331
332
|
href: "https://dxos.org/discord",
|
|
332
333
|
target: "_blank",
|
|
333
334
|
rel: "noopener noreferrer"
|
|
334
|
-
}, /* @__PURE__ */ React3.createElement(
|
|
335
|
+
}, /* @__PURE__ */ React3.createElement(Icon, {
|
|
336
|
+
icon: "ph--discord-logo--regular",
|
|
337
|
+
size: 4
|
|
338
|
+
}), /* @__PURE__ */ React3.createElement(StatusBar.Text, {
|
|
335
339
|
classNames: "hidden sm:block"
|
|
336
340
|
}, "Discord")))), /* @__PURE__ */ React3.createElement(Surface, {
|
|
337
341
|
role: "status"
|
|
@@ -352,7 +356,7 @@ var StatusBarPlugin = () => {
|
|
|
352
356
|
component: ({ role }) => {
|
|
353
357
|
switch (role) {
|
|
354
358
|
case "status-bar": {
|
|
355
|
-
return /* @__PURE__ */ React4.createElement(
|
|
359
|
+
return /* @__PURE__ */ React4.createElement(StatusBarPanel, null);
|
|
356
360
|
}
|
|
357
361
|
}
|
|
358
362
|
return null;
|
|
@@ -366,7 +370,7 @@ var StatusBarPlugin = () => {
|
|
|
366
370
|
var src_default = StatusBarPlugin;
|
|
367
371
|
export {
|
|
368
372
|
StatusBar,
|
|
369
|
-
|
|
373
|
+
StatusBarPanel,
|
|
370
374
|
StatusBarPlugin,
|
|
371
375
|
src_default as default
|
|
372
376
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/StatusBarPlugin.tsx", "../../../src/components/StatusBar.tsx", "../../../src/components/
|
|
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 { StatusBarImpl } 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 <StatusBarImpl />;\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);\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 border-bs border-separator 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 { DiscordLogo, PaperPlaneTilt } from '@phosphor-icons/react';\nimport React, { useState } from 'react';\n\nimport { Surface } from '@dxos/app-framework';\nimport { Popover } from '@dxos/react-ui';\n\nimport { FeedbackForm } from './FeedbackForm';\nimport { StatusBar } from './StatusBar';\n\n// TODO(wittjosiah): Rename.\nexport const StatusBarImpl = () => {\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 <PaperPlaneTilt />\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 <DiscordLogo />\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 { X, PaperPlaneTilt } from '@phosphor-icons/react';\nimport React, { useCallback } from 'react';\n\nimport { useIntentDispatcher } from '@dxos/app-framework';\nimport { S } from '@dxos/echo-schema';\nimport { Button, Input, Popover, useTranslation } from '@dxos/react-ui';\nimport { getSize } from '@dxos/react-ui-theme';\n\nimport { useForm } from '../hooks';\nimport { STATUS_BAR_PLUGIN } from '../meta';\nimport { mkTranslation } from '../translations';\nimport { validate } from '../util';\n\nconst Email = S.String.pipe(\n S.nonEmpty({ 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.nonEmpty({ 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 validate: (values) => validate(FeedbackFormSchema, values),\n onSubmit: (values) => onSubmit(values),\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 2024 DXOS.org\n//\nimport { type ChangeEvent, useCallback, useState } from 'react';\n\nimport { type ValidationError } from '../util';\n\n// TODO(Zan): This module will be generally useful and we should factor it out after the\n// API crystallizes a bit more.\n\ninterface FormOptions<T> {\n initialValues: T;\n validate: (values: any) => ValidationError[] | undefined;\n onSubmit: (values: T) => void;\n}\n\n/**\n * Creates a hook for managing form state, including values, validation, and submission.\n *\n * @example\n * const { values, handleChange, handleSubmit, errors, canSubmit, getInputProps } = useForm({\n * initialValues: { name: '', email: '' },\n * validate: (values) => { yourValidationLogic(values); },\n * onSubmit: (values) => { submissionLogic(values); },\n * });\n */\nexport const useForm = <T extends object>({ initialValues, validate, onSubmit }: FormOptions<T>) => {\n const [values, setValues] = useState<T>(initialValues);\n const [errors, setErrors] = useState<Record<keyof T, string>>({} as Record<keyof T, string>);\n const [touched, setTouched] = useState<Record<keyof T, boolean>>(\n Object.keys(initialValues).reduce((acc, key) => ({ ...acc, [key]: false }), {} as Record<keyof T, boolean>),\n );\n\n const runValidation = useCallback(\n (values: T) => {\n const validationErrors = validate(values);\n setErrors(collapseErrorArray(validationErrors ?? []));\n\n return validationErrors === undefined;\n },\n [validate],\n );\n\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n const { name, value } = event.target;\n const newValues = { ...values, [name]: value };\n setValues(newValues);\n runValidation(newValues);\n },\n [values, runValidation],\n );\n\n const touchAll = useCallback(() => setTouched(mkAllTouched(values)), [values, setTouched]);\n\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n const { name } = event.target;\n setTouched((touched) => ({ ...touched, [name]: true }));\n\n // TODO(Zan): This should be configurable behavior.\n if (event.relatedTarget?.getAttribute('type') === 'submit') {\n // NOTE: We do this here instead of onSubmit, because the blur event is triggered before the submit event\n // and results in the submit button being disabled when the form is invalid.\n touchAll();\n }\n\n runValidation(values);\n },\n [runValidation, values, touchAll],\n );\n\n const handleSubmit = useCallback(() => {\n if (runValidation(values)) {\n onSubmit(values);\n }\n }, [values, runValidation, onSubmit]);\n\n // NOTE: We can submit if there is no touched field that has an error.\n // - Basically, if there's a validation message present in the form, submit should be disabled.\n const canSubmit = Object.keys(values).every((key) => touched[key as keyof T] === false || !errors[key as keyof T]);\n\n const getInputProps = useCallback(\n (key: keyof T) => ({\n name: key,\n value: values[key],\n onChange: handleChange,\n onBlur: handleBlur,\n 'aria-invalid': errors[key] !== undefined,\n }),\n [values, handleChange, handleBlur, errors],\n );\n\n return {\n values,\n handleChange,\n handleSubmit,\n errors,\n canSubmit,\n touched,\n handleBlur,\n onValidate: runValidation,\n getInputProps,\n };\n};\n\nconst mkAllTouched = <T extends Record<keyof T, any>>(values: T) => {\n return Object.keys(values).reduce((acc, key) => ({ ...acc, [key]: true }), {} as Record<keyof T, boolean>);\n};\n\nconst collapseErrorArray = <T>(errors: ValidationError[]) =>\n errors.reduce(\n (acc, { path, message }) => {\n // TODO(Zan): This won't play well with nesting.\n acc[path as keyof T] = message;\n return acc;\n },\n {} as Record<keyof T, string>,\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 2024 DXOS.org\n//\nimport { ArrayFormatter } from '@effect/schema';\nimport { Effect } from 'effect';\n\nimport { S } from '@dxos/echo-schema';\n\nexport type ValidationError = { path: string; message: string };\n\nexport const validate = <T>(schema: S.Schema<T>, data: any): ValidationError[] | undefined => {\n const validator = S.decodeUnknownEither(schema, { errors: 'all' });\n const result = validator(data);\n\n if (result._tag === 'Left') {\n const errors = Effect.runSync(ArrayFormatter.formatError(result.left));\n // TODO(Zan): Path.join is an assumption...\n return errors.map(({ message, path }) => ({ message, path: path.join('.') }));\n }\n\n return undefined;\n};\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;
|
|
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", "
|
|
3
|
+
"sources": ["../../../src/StatusBarPlugin.tsx", "../../../src/components/StatusBar.tsx", "../../../src/components/StatusBarPanel.tsx", "../../../src/components/FeedbackForm.tsx", "../../../src/hooks/useForm.ts", "../../../src/translations.ts", "../../../src/util/validation.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 { X, PaperPlaneTilt } 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 { getSize } from '@dxos/react-ui-theme';\n\nimport { useForm } from '../hooks';\nimport { STATUS_BAR_PLUGIN } from '../meta';\nimport { mkTranslation } from '../translations';\nimport { validate } from '../util';\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 validate: (values) => validate(FeedbackFormSchema, values),\n onSubmit: (values) => onSubmit(values),\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 2024 DXOS.org\n//\n\nimport { type ChangeEvent, type FocusEvent, useCallback, useState } from 'react';\n\nimport { type ValidationError } from '../util';\n\n// TODO(Zan): This module will be generally useful and we should factor it out after the\n// API crystallizes a bit more.\n\ninterface FormOptions<T> {\n initialValues: T;\n validate: (values: any) => ValidationError[] | undefined;\n onSubmit: (values: T) => void;\n}\n\n/**\n * Creates a hook for managing form state, including values, validation, and submission.\n *\n * @example\n * const { values, handleChange, handleSubmit, errors, canSubmit, getInputProps } = useForm({\n * initialValues: { name: '', email: '' },\n * validate: (values) => { yourValidationLogic(values); },\n * onSubmit: (values) => { submissionLogic(values); },\n * });\n */\nexport const useForm = <T extends object>({ initialValues, validate, onSubmit }: FormOptions<T>) => {\n const [values, setValues] = useState<T>(initialValues);\n const [errors, setErrors] = useState<Record<keyof T, string>>({} as Record<keyof T, string>);\n const [touched, setTouched] = useState<Record<keyof T, boolean>>(\n Object.keys(initialValues).reduce((acc, key) => ({ ...acc, [key]: false }), {} as Record<keyof T, boolean>),\n );\n\n const runValidation = useCallback(\n (values: T) => {\n const validationErrors = validate(values);\n setErrors(collapseErrorArray(validationErrors ?? []));\n\n return validationErrors === undefined;\n },\n [validate],\n );\n\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n const { name, value } = event.target;\n const newValues = { ...values, [name]: value };\n setValues(newValues);\n runValidation(newValues);\n },\n [values, runValidation],\n );\n\n const touchAll = useCallback(() => setTouched(mkAllTouched(values)), [values, setTouched]);\n\n const handleBlur = useCallback(\n (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n const { name } = event.target;\n setTouched((touched) => ({ ...touched, [name]: true }));\n\n // TODO(Zan): This should be configurable behavior.\n if (event.relatedTarget?.getAttribute('type') === 'submit') {\n // NOTE: We do this here instead of onSubmit, because the blur event is triggered before the submit event\n // and results in the submit button being disabled when the form is invalid.\n touchAll();\n }\n\n runValidation(values);\n },\n [runValidation, values, touchAll],\n );\n\n const handleSubmit = useCallback(() => {\n if (runValidation(values)) {\n onSubmit(values);\n }\n }, [values, runValidation, onSubmit]);\n\n // NOTE: We can submit if there is no touched field that has an error.\n // - Basically, if there's a validation message present in the form, submit should be disabled.\n const canSubmit = Object.keys(values).every((key) => touched[key as keyof T] === false || !errors[key as keyof T]);\n\n const getInputProps = useCallback(\n (key: keyof T) => ({\n name: key,\n value: values[key],\n onChange: handleChange,\n onBlur: handleBlur,\n 'aria-invalid': errors[key] !== undefined,\n }),\n [values, handleChange, handleBlur, errors],\n );\n\n return {\n values,\n handleChange,\n handleSubmit,\n errors,\n canSubmit,\n touched,\n handleBlur,\n onValidate: runValidation,\n getInputProps,\n };\n};\n\nconst mkAllTouched = <T extends Record<keyof T, any>>(values: T) => {\n return Object.keys(values).reduce((acc, key) => ({ ...acc, [key]: true }), {} as Record<keyof T, boolean>);\n};\n\nconst collapseErrorArray = <T>(errors: ValidationError[]) =>\n errors.reduce(\n (acc, { path, message }) => {\n // TODO(Zan): This won't play well with nesting.\n acc[path as keyof T] = message;\n return acc;\n },\n {} as Record<keyof T, string>,\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 2024 DXOS.org\n//\n\nimport { ArrayFormatter, Schema as S } from '@effect/schema';\nimport { Effect } from 'effect';\n\nexport type ValidationError = { path: string; message: string };\n\nexport const validate = <T>(schema: S.Schema<T>, data: any): ValidationError[] | undefined => {\n const validator = S.decodeUnknownEither(schema, { errors: 'all' });\n const result = validator(data);\n\n if (result._tag === 'Left') {\n const errors = Effect.runSync(ArrayFormatter.formatError(result.left));\n // TODO(Zan): Path.join is an assumption...\n return errors.map(({ message, path }) => ({ message, path: path.join('.') }));\n }\n\n return undefined;\n};\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", "X", "PaperPlaneTilt", "React", "useCallback", "useIntentDispatcher", "Button", "Input", "Popover", "useTranslation", "getSize", "useCallback", "useState", "useForm", "initialValues", "validate", "onSubmit", "values", "setValues", "useState", "errors", "setErrors", "touched", "setTouched", "Object", "keys", "reduce", "acc", "key", "runValidation", "useCallback", "validationErrors", "collapseErrorArray", "undefined", "handleChange", "event", "name", "value", "target", "newValues", "touchAll", "mkAllTouched", "handleBlur", "relatedTarget", "getAttribute", "handleSubmit", "canSubmit", "every", "getInputProps", "onChange", "onBlur", "onValidate", "path", "message", "entry", "translation", "STATUS_BAR_PLUGIN", "mkTranslation", "t", "key", "translations", "ArrayFormatter", "Schema", "S", "Effect", "validate", "schema", "data", "validator", "S", "decodeUnknownEither", "errors", "result", "_tag", "Effect", "runSync", "ArrayFormatter", "formatError", "left", "map", "message", "path", "join", "undefined", "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", "errors", "handleSubmit", "canSubmit", "touched", "getInputProps", "useForm", "validate", "React", "div", "role", "className", "Input", "Root", "validationValence", "undefined", "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", "Trigger", "asChild", "Button", "aria-label", "data-joyride", "Icon", "icon", "size", "Text", "classNames", "a", "href", "target", "rel", "Surface", "role", "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":
|
|
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/hooks/useForm.ts":{"bytes":12439,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/plugins/plugin-status-bar/src/hooks/index.ts":{"bytes":511,"imports":[{"path":"packages/plugins/plugin-status-bar/src/hooks/useForm.ts","kind":"import-statement","original":"./useForm"}],"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/util/validation.ts":{"bytes":2755,"imports":[{"path":"@effect/schema","kind":"import-statement","external":true},{"path":"effect","kind":"import-statement","external":true}],"format":"esm"},"packages/plugins/plugin-status-bar/src/util/index.ts":{"bytes":517,"imports":[{"path":"packages/plugins/plugin-status-bar/src/util/validation.ts","kind":"import-statement","original":"./validation"}],"format":"esm"},"packages/plugins/plugin-status-bar/src/components/FeedbackForm.tsx":{"bytes":16845,"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-theme","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-status-bar/src/hooks/index.ts","kind":"import-statement","original":"../hooks"},{"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"},{"path":"packages/plugins/plugin-status-bar/src/util/index.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"packages/plugins/plugin-status-bar/src/components/StatusBarPanel.tsx":{"bytes":6006,"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":28210},"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-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@effect/schema","kind":"import-statement","external":true},{"path":"effect","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":1706},"packages/plugins/plugin-status-bar/src/components/FeedbackForm.tsx":{"bytesInOutput":4762},"packages/plugins/plugin-status-bar/src/hooks/useForm.ts":{"bytesInOutput":2228},"packages/plugins/plugin-status-bar/src/hooks/index.ts":{"bytesInOutput":0},"packages/plugins/plugin-status-bar/src/translations.ts":{"bytesInOutput":570},"packages/plugins/plugin-status-bar/src/util/validation.ts":{"bytesInOutput":471},"packages/plugins/plugin-status-bar/src/util/index.ts":{"bytesInOutput":0},"packages/plugins/plugin-status-bar/src/index.ts":{"bytesInOutput":35}},"bytes":13587},"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}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FeedbackForm.d.ts","sourceRoot":"","sources":["../../../../src/components/FeedbackForm.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FeedbackForm.d.ts","sourceRoot":"","sources":["../../../../src/components/FeedbackForm.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAgC3C,eAAO,MAAM,YAAY,gBAAiB;IAAE,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,sBAwFhE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusBar.d.ts","sourceRoot":"","sources":["../../../../src/components/StatusBar.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAmC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAgB/E,QAAA,MAAM,eAAe;cAHmC,SAAS;cAAY,OAAO;;;qFAsBnF,CAAC;AAEF,eAAe,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"StatusBar.d.ts","sourceRoot":"","sources":["../../../../src/components/StatusBar.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAmC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAgB/E,QAAA,MAAM,eAAe;cAHmC,SAAS;cAAY,OAAO;;;qFAsBnF,CAAC;AAEF,eAAe,eAAe,CAAC;AAwD/B,eAAO,MAAM,SAAS;;kBAvCqC,SAAS;;;;;kBAjDd,SAAS;;;;;kBAkCT,SAAS;;;;;kBA1BP,SAAS;kBAAY,OAAO;;;;;kBAgE/B,SAAS;;;;;kBAQX,SAAS;;;;CAe3D,CAAC"}
|
|
@@ -1,50 +1,9 @@
|
|
|
1
1
|
import '@dxos-theme';
|
|
2
|
+
import { type Meta } from '@storybook/react';
|
|
2
3
|
import React from 'react';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
}, "className"> & {
|
|
9
|
-
classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
|
|
10
|
-
} & React.RefAttributes<HTMLDivElement>>;
|
|
11
|
-
Text: React.ForwardRefExoticComponent<Omit<{
|
|
12
|
-
children: React.ReactNode;
|
|
13
|
-
}, "className"> & {
|
|
14
|
-
classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
|
|
15
|
-
} & React.RefAttributes<HTMLSpanElement>>;
|
|
16
|
-
Item: React.ForwardRefExoticComponent<Omit<{
|
|
17
|
-
children: React.ReactNode;
|
|
18
|
-
}, "className"> & {
|
|
19
|
-
classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
|
|
20
|
-
} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
21
|
-
Button: React.ForwardRefExoticComponent<Omit<{
|
|
22
|
-
children: React.ReactNode;
|
|
23
|
-
asChild?: boolean;
|
|
24
|
-
}, "className"> & {
|
|
25
|
-
classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
|
|
26
|
-
} & React.HTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
|
|
27
|
-
StartContent: React.ForwardRefExoticComponent<Omit<{
|
|
28
|
-
children: React.ReactNode;
|
|
29
|
-
}, "className"> & {
|
|
30
|
-
classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
|
|
31
|
-
} & React.RefAttributes<HTMLDivElement>>;
|
|
32
|
-
EndContent: React.ForwardRefExoticComponent<Omit<{
|
|
33
|
-
children: React.ReactNode;
|
|
34
|
-
}, "className"> & {
|
|
35
|
-
classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
|
|
36
|
-
} & React.RefAttributes<HTMLDivElement>>;
|
|
37
|
-
};
|
|
38
|
-
actions: {
|
|
39
|
-
argTypesRegex: string;
|
|
40
|
-
};
|
|
41
|
-
decorators: import("@storybook/react/*").Decorator[];
|
|
42
|
-
parameters: {
|
|
43
|
-
chromatic: {
|
|
44
|
-
disableSnapshot: boolean;
|
|
45
|
-
};
|
|
46
|
-
};
|
|
47
|
-
};
|
|
48
|
-
export default _default;
|
|
49
|
-
export declare const Normal: (_props: any) => React.JSX.Element;
|
|
4
|
+
import { StatusBar } from './StatusBar';
|
|
5
|
+
export declare const DefaultStory: () => React.JSX.Element;
|
|
6
|
+
export declare const Default: {};
|
|
7
|
+
declare const meta: Meta<typeof StatusBar>;
|
|
8
|
+
export default meta;
|
|
50
9
|
//# sourceMappingURL=StatusBar.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusBar.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/StatusBar.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"StatusBar.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/StatusBar.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,eAAO,MAAM,YAAY,yBAmBxB,CAAC;AAEF,eAAO,MAAM,OAAO,IAAK,CAAC;AAE1B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAQhC,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StatusBarPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/StatusBarPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAQxC,eAAO,MAAM,cAAc,yBA8B1B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,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,4 +1,4 @@
|
|
|
1
|
-
import { type ChangeEvent } from 'react';
|
|
1
|
+
import { type ChangeEvent, type FocusEvent } from 'react';
|
|
2
2
|
import { type ValidationError } from '../util';
|
|
3
3
|
interface FormOptions<T> {
|
|
4
4
|
initialValues: T;
|
|
@@ -22,13 +22,13 @@ export declare const useForm: <T extends object>({ initialValues, validate, onSu
|
|
|
22
22
|
errors: Record<keyof T, string>;
|
|
23
23
|
canSubmit: boolean;
|
|
24
24
|
touched: Record<keyof T, boolean>;
|
|
25
|
-
handleBlur: (event:
|
|
25
|
+
handleBlur: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
|
26
26
|
onValidate: (values: T) => boolean;
|
|
27
27
|
getInputProps: (key: keyof T) => {
|
|
28
28
|
name: keyof T;
|
|
29
29
|
value: T[keyof T];
|
|
30
30
|
onChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
|
31
|
-
onBlur: (event:
|
|
31
|
+
onBlur: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
|
32
32
|
'aria-invalid': boolean;
|
|
33
33
|
};
|
|
34
34
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useForm.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useForm.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAyB,MAAM,OAAO,CAAC;AAEjF,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,SAAS,CAAC;AAK/C,UAAU,WAAW,CAAC,CAAC;IACrB,aAAa,EAAE,CAAC,CAAC;IACjB,QAAQ,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,eAAe,EAAE,GAAG,SAAS,CAAC;IACzD,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;CAC/B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,MAAM,yCAAyC,WAAW,CAAC,CAAC,CAAC;;0BAkBnF,WAAW,CAAC,gBAAgB,GAAG,mBAAmB,CAAC;;;;;wBAYnD,UAAU,CAAC,gBAAgB,GAAG,mBAAmB,CAAC;yBAtBjD,CAAC;yBAiDJ,MAAM,CAAC;;;0BAvCL,WAAW,CAAC,gBAAgB,GAAG,mBAAmB,CAAC;wBAYnD,UAAU,CAAC,gBAAgB,GAAG,mBAAmB,CAAC;;;CAgD7D,CAAC"}
|
package/dist/types/src/meta.d.ts
CHANGED
|
@@ -1,15 +1,9 @@
|
|
|
1
|
-
import { type IconProps } from '@phosphor-icons/react';
|
|
2
|
-
import React from 'react';
|
|
3
1
|
export declare const STATUS_BAR_PLUGIN = "dxos.org/plugin/status-bar";
|
|
4
2
|
declare const _default: {
|
|
5
3
|
id: string;
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
homePage?: string;
|
|
10
|
-
tags?: string[];
|
|
11
|
-
iconComponent?: React.FC<IconProps>;
|
|
12
|
-
iconSymbol?: string;
|
|
4
|
+
name: string;
|
|
5
|
+
description: string;
|
|
6
|
+
icon: string;
|
|
13
7
|
};
|
|
14
8
|
export default _default;
|
|
15
9
|
//# sourceMappingURL=meta.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/meta.
|
|
1
|
+
{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/meta.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,iBAAiB,+BAA+B,CAAC;;;;;;;AAE9D,wBAKuB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"validation.d.ts","sourceRoot":"","sources":["../../../../src/util/validation.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"validation.d.ts","sourceRoot":"","sources":["../../../../src/util/validation.ts"],"names":[],"mappings":"AAIA,OAAO,EAAkB,MAAM,IAAI,CAAC,EAAE,MAAM,gBAAgB,CAAC;AAG7D,MAAM,MAAM,eAAe,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhE,eAAO,MAAM,QAAQ,GAAI,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,GAAG,KAAG,eAAe,EAAE,GAAG,SAWhF,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/plugin-status-bar",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.14-main.7bd9c89",
|
|
4
4
|
"description": "Status bar plugin",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -29,19 +29,15 @@
|
|
|
29
29
|
"src"
|
|
30
30
|
],
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@effect/schema": "^0.
|
|
32
|
+
"@effect/schema": "^0.75.1",
|
|
33
33
|
"@fluentui/react-tabster": "^9.19.0",
|
|
34
34
|
"@preact/signals-core": "^1.6.0",
|
|
35
35
|
"@radix-ui/react-slot": "^1.0.1",
|
|
36
|
-
"effect": "^3.
|
|
36
|
+
"effect": "^3.9.1",
|
|
37
37
|
"react-resize-detector": "^11.0.1",
|
|
38
|
-
"@dxos/
|
|
39
|
-
"@dxos/
|
|
40
|
-
"@dxos/
|
|
41
|
-
"@dxos/plugin-space": "0.6.13-staging.1e988a3",
|
|
42
|
-
"@dxos/async": "0.6.13-staging.1e988a3",
|
|
43
|
-
"@dxos/plugin-stack": "0.6.13-staging.1e988a3",
|
|
44
|
-
"@dxos/react-client": "0.6.13-staging.1e988a3"
|
|
38
|
+
"@dxos/app-framework": "0.6.14-main.7bd9c89",
|
|
39
|
+
"@dxos/async": "0.6.14-main.7bd9c89",
|
|
40
|
+
"@dxos/echo-schema": "0.6.14-main.7bd9c89"
|
|
45
41
|
},
|
|
46
42
|
"devDependencies": {
|
|
47
43
|
"@phosphor-icons/react": "^2.1.5",
|
|
@@ -49,17 +45,17 @@
|
|
|
49
45
|
"@types/react-dom": "~18.2.0",
|
|
50
46
|
"react": "~18.2.0",
|
|
51
47
|
"react-dom": "~18.2.0",
|
|
52
|
-
"vite": "
|
|
53
|
-
"@dxos/react-ui
|
|
54
|
-
"@dxos/react-ui": "0.6.
|
|
55
|
-
"@dxos/storybook-utils": "0.6.
|
|
48
|
+
"vite": "5.4.7",
|
|
49
|
+
"@dxos/react-ui": "0.6.14-main.7bd9c89",
|
|
50
|
+
"@dxos/react-ui-theme": "0.6.14-main.7bd9c89",
|
|
51
|
+
"@dxos/storybook-utils": "0.6.14-main.7bd9c89"
|
|
56
52
|
},
|
|
57
53
|
"peerDependencies": {
|
|
58
54
|
"@phosphor-icons/react": "^2.0.5",
|
|
59
|
-
"react": "
|
|
60
|
-
"react-dom": "
|
|
61
|
-
"@dxos/react-ui": "0.6.
|
|
62
|
-
"@dxos/react-ui-theme": "0.6.
|
|
55
|
+
"react": "~18.2.0",
|
|
56
|
+
"react-dom": "~18.2.0",
|
|
57
|
+
"@dxos/react-ui": "0.6.14-main.7bd9c89",
|
|
58
|
+
"@dxos/react-ui-theme": "0.6.14-main.7bd9c89"
|
|
63
59
|
},
|
|
64
60
|
"publishConfig": {
|
|
65
61
|
"access": "public"
|
package/src/StatusBarPlugin.tsx
CHANGED
|
@@ -6,7 +6,7 @@ import React from 'react';
|
|
|
6
6
|
|
|
7
7
|
import { type PluginDefinition, type SurfaceProvides, type TranslationsProvides } from '@dxos/app-framework';
|
|
8
8
|
|
|
9
|
-
import {
|
|
9
|
+
import { StatusBarPanel } from './components';
|
|
10
10
|
import meta from './meta';
|
|
11
11
|
import translations from './translations';
|
|
12
12
|
|
|
@@ -21,7 +21,7 @@ export const StatusBarPlugin = (): PluginDefinition<StatusBarPluginProvides> =>
|
|
|
21
21
|
component: ({ role }) => {
|
|
22
22
|
switch (role) {
|
|
23
23
|
case 'status-bar': {
|
|
24
|
-
return <
|
|
24
|
+
return <StatusBarPanel />;
|
|
25
25
|
}
|
|
26
26
|
}
|
|
27
27
|
|
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
// Copyright 2024 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
+
import { Schema as S } from '@effect/schema';
|
|
5
6
|
import { X, PaperPlaneTilt } from '@phosphor-icons/react';
|
|
6
7
|
import React, { useCallback } from 'react';
|
|
7
8
|
|
|
8
9
|
import { useIntentDispatcher } from '@dxos/app-framework';
|
|
9
|
-
import { S } from '@dxos/echo-schema';
|
|
10
10
|
import { Button, Input, Popover, useTranslation } from '@dxos/react-ui';
|
|
11
11
|
import { getSize } from '@dxos/react-ui-theme';
|
|
12
12
|
|
|
@@ -16,16 +16,16 @@ import { mkTranslation } from '../translations';
|
|
|
16
16
|
import { validate } from '../util';
|
|
17
17
|
|
|
18
18
|
const Email = S.String.pipe(
|
|
19
|
-
S.
|
|
19
|
+
S.nonEmptyString({ message: () => 'Email is required.' }),
|
|
20
20
|
S.pattern(/^(?!\.)(?!.*\.\.)([A-Z0-9_+-.]*)[A-Z0-9_+-]@([A-Z0-9][A-Z0-9-]*\.)+[A-Z]{2,}$/i, {
|
|
21
21
|
message: () => 'Invalid email address.',
|
|
22
22
|
}),
|
|
23
23
|
);
|
|
24
24
|
|
|
25
|
-
const nonEmpty = (field: string) => S.
|
|
25
|
+
const nonEmpty = (field: string) => S.nonEmptyString({ message: () => `${field} is required.` });
|
|
26
26
|
const maxLength = (field: string, length: number) => S.maxLength(length, { message: () => `${field} is too long.` });
|
|
27
27
|
|
|
28
|
-
//
|
|
28
|
+
// Types and validation.
|
|
29
29
|
const FeedbackFormSchema = S.Struct({
|
|
30
30
|
name: S.String.pipe(nonEmpty('Name'), maxLength('Name', 256)),
|
|
31
31
|
email: Email.pipe(maxLength('Email', 256)),
|
|
@@ -4,40 +4,45 @@
|
|
|
4
4
|
|
|
5
5
|
import '@dxos-theme';
|
|
6
6
|
|
|
7
|
-
import {
|
|
7
|
+
import { type Meta } from '@storybook/react';
|
|
8
8
|
import React from 'react';
|
|
9
9
|
|
|
10
|
+
import { Icon } from '@dxos/react-ui';
|
|
10
11
|
import { withTheme } from '@dxos/storybook-utils';
|
|
11
12
|
|
|
12
13
|
import { StatusBar } from './StatusBar';
|
|
13
14
|
|
|
14
|
-
export
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
export const Normal = (_props: any) => (
|
|
23
|
-
<>
|
|
24
|
-
<StatusBar.Container>
|
|
25
|
-
<StatusBar.EndContent>
|
|
15
|
+
export const DefaultStory = () => (
|
|
16
|
+
<StatusBar.Container>
|
|
17
|
+
<StatusBar.EndContent>
|
|
18
|
+
<StatusBar.Button>
|
|
19
|
+
<Icon icon='ph--mailbox--regular' size={4} />
|
|
20
|
+
<StatusBar.Text>Quick feedback</StatusBar.Text>
|
|
21
|
+
</StatusBar.Button>
|
|
22
|
+
<a href='https://dxos.org/discord' target='_blank' rel='noopener noreferrer'>
|
|
26
23
|
<StatusBar.Button>
|
|
27
|
-
<
|
|
28
|
-
<StatusBar.Text>
|
|
24
|
+
<Icon icon='ph--discord-logo--regular' size={4} />
|
|
25
|
+
<StatusBar.Text>Join us on Discord</StatusBar.Text>
|
|
29
26
|
</StatusBar.Button>
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
<Lightning />
|
|
38
|
-
<StatusBar.Text>Online</StatusBar.Text>
|
|
39
|
-
</StatusBar.Item>
|
|
40
|
-
</StatusBar.EndContent>
|
|
41
|
-
</StatusBar.Container>
|
|
42
|
-
</>
|
|
27
|
+
</a>
|
|
28
|
+
<StatusBar.Item>
|
|
29
|
+
<Icon icon='ph--lightning--regular' size={4} />
|
|
30
|
+
<StatusBar.Text>Online</StatusBar.Text>
|
|
31
|
+
</StatusBar.Item>
|
|
32
|
+
</StatusBar.EndContent>
|
|
33
|
+
</StatusBar.Container>
|
|
43
34
|
);
|
|
35
|
+
|
|
36
|
+
export const Default = {};
|
|
37
|
+
|
|
38
|
+
const meta: Meta<typeof StatusBar> = {
|
|
39
|
+
title: 'plugins/plugin-status/StatusBar',
|
|
40
|
+
component: StatusBar as any,
|
|
41
|
+
render: DefaultStory,
|
|
42
|
+
decorators: [withTheme],
|
|
43
|
+
parameters: {
|
|
44
|
+
chromatic: { disableSnapshot: false },
|
|
45
|
+
},
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
export default meta;
|
|
@@ -57,9 +57,10 @@ const StatusBarItem = forwardRef<HTMLDivElement, StatusBarItemProps>(
|
|
|
57
57
|
</div>
|
|
58
58
|
),
|
|
59
59
|
);
|
|
60
|
+
|
|
60
61
|
type StatusBarContainerProps = ThemedClassName<{ children: ReactNode }>;
|
|
61
62
|
|
|
62
|
-
// TODO(zan): tabable group with tabster
|
|
63
|
+
// TODO(zan): tabable group with tabster.
|
|
63
64
|
const StatusBarContainer = forwardRef<HTMLDivElement, StatusBarContainerProps>(
|
|
64
65
|
({ classNames, children }, forwardedRef) => {
|
|
65
66
|
const groupAttrs = useFocusableGroup({ tabBehavior: 'limited' });
|
|
@@ -69,7 +70,7 @@ const StatusBarContainer = forwardRef<HTMLDivElement, StatusBarContainerProps>(
|
|
|
69
70
|
tabIndex={0}
|
|
70
71
|
{...groupAttrs}
|
|
71
72
|
className={mx(
|
|
72
|
-
'bs-[--statusbar-size] flex justify-end items-center gap-2
|
|
73
|
+
'bs-[--statusbar-size] flex justify-end items-center gap-2 bg-base text-description text-lg pointer-fine:text-xs ch-focus-ring-inset',
|
|
73
74
|
classNames,
|
|
74
75
|
)}
|
|
75
76
|
ref={forwardedRef}
|
|
@@ -2,17 +2,15 @@
|
|
|
2
2
|
// Copyright 2024 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import { DiscordLogo, PaperPlaneTilt } from '@phosphor-icons/react';
|
|
6
5
|
import React, { useState } from 'react';
|
|
7
6
|
|
|
8
7
|
import { Surface } from '@dxos/app-framework';
|
|
9
|
-
import { Popover } from '@dxos/react-ui';
|
|
8
|
+
import { Icon, Popover } from '@dxos/react-ui';
|
|
10
9
|
|
|
11
10
|
import { FeedbackForm } from './FeedbackForm';
|
|
12
11
|
import { StatusBar } from './StatusBar';
|
|
13
12
|
|
|
14
|
-
|
|
15
|
-
export const StatusBarImpl = () => {
|
|
13
|
+
export const StatusBarPanel = () => {
|
|
16
14
|
const [open, setOpen] = useState(false);
|
|
17
15
|
|
|
18
16
|
// TODO(wittjosiah): Factor out feedback and discord buttons.
|
|
@@ -22,14 +20,14 @@ export const StatusBarImpl = () => {
|
|
|
22
20
|
<StatusBar.EndContent>
|
|
23
21
|
<Popover.Trigger asChild>
|
|
24
22
|
<StatusBar.Button aria-label='Give feedback about composer' data-joyride='welcome/feedback'>
|
|
25
|
-
<
|
|
23
|
+
<Icon icon='ph--paper-plane-tilt--regular' size={4} />
|
|
26
24
|
<StatusBar.Text classNames='hidden sm:block'>Feedback</StatusBar.Text>
|
|
27
25
|
</StatusBar.Button>
|
|
28
26
|
</Popover.Trigger>
|
|
29
27
|
{/* TODO(zan): Configure this label? */}
|
|
30
28
|
<StatusBar.Button aria-label='Open DXOS Discord' asChild>
|
|
31
29
|
<a href='https://dxos.org/discord' target='_blank' rel='noopener noreferrer'>
|
|
32
|
-
<
|
|
30
|
+
<Icon icon='ph--discord-logo--regular' size={4} />
|
|
33
31
|
<StatusBar.Text classNames='hidden sm:block'>Discord</StatusBar.Text>
|
|
34
32
|
</a>
|
|
35
33
|
</StatusBar.Button>
|
package/src/components/index.ts
CHANGED
package/src/hooks/useForm.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
//
|
|
2
2
|
// Copyright 2024 DXOS.org
|
|
3
3
|
//
|
|
4
|
-
|
|
4
|
+
|
|
5
|
+
import { type ChangeEvent, type FocusEvent, useCallback, useState } from 'react';
|
|
5
6
|
|
|
6
7
|
import { type ValidationError } from '../util';
|
|
7
8
|
|
|
@@ -54,7 +55,7 @@ export const useForm = <T extends object>({ initialValues, validate, onSubmit }:
|
|
|
54
55
|
const touchAll = useCallback(() => setTouched(mkAllTouched(values)), [values, setTouched]);
|
|
55
56
|
|
|
56
57
|
const handleBlur = useCallback(
|
|
57
|
-
(event:
|
|
58
|
+
(event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
|
58
59
|
const { name } = event.target;
|
|
59
60
|
setTouched((touched) => ({ ...touched, [name]: true }));
|
|
60
61
|
|
package/src/meta.ts
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2024 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import { type PluginMeta } from '@dxos/app-framework';
|
|
6
|
+
|
|
7
|
+
export const STATUS_BAR_PLUGIN = 'dxos.org/plugin/status-bar';
|
|
8
|
+
|
|
9
|
+
export default {
|
|
10
|
+
id: STATUS_BAR_PLUGIN,
|
|
11
|
+
name: 'Status Bar',
|
|
12
|
+
description: 'Display a bar with status and actions.',
|
|
13
|
+
icon: 'ph--info--regular',
|
|
14
|
+
} satisfies PluginMeta;
|
package/src/util/validation.ts
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
//
|
|
2
2
|
// Copyright 2024 DXOS.org
|
|
3
3
|
//
|
|
4
|
-
import { ArrayFormatter } from '@effect/schema';
|
|
5
|
-
import { Effect } from 'effect';
|
|
6
4
|
|
|
7
|
-
import { S } from '@
|
|
5
|
+
import { ArrayFormatter, Schema as S } from '@effect/schema';
|
|
6
|
+
import { Effect } from 'effect';
|
|
8
7
|
|
|
9
8
|
export type ValidationError = { path: string; message: string };
|
|
10
9
|
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
// packages/plugins/plugin-status-bar/src/meta.tsx
|
|
2
|
-
import { Info } from "@phosphor-icons/react";
|
|
3
|
-
import React from "react";
|
|
4
|
-
import { pluginMeta } from "@dxos/app-framework";
|
|
5
|
-
var STATUS_BAR_PLUGIN = "dxos.org/plugin/status-bar";
|
|
6
|
-
var meta_default = pluginMeta({
|
|
7
|
-
id: STATUS_BAR_PLUGIN,
|
|
8
|
-
name: "Status Bar",
|
|
9
|
-
description: "Display a bar with status and actions.",
|
|
10
|
-
iconComponent: (props) => /* @__PURE__ */ React.createElement(Info, props),
|
|
11
|
-
iconSymbol: "ph--info--regular"
|
|
12
|
-
});
|
|
13
|
-
|
|
14
|
-
export {
|
|
15
|
-
STATUS_BAR_PLUGIN,
|
|
16
|
-
meta_default
|
|
17
|
-
};
|
|
18
|
-
//# sourceMappingURL=chunk-PL5XPTPX.mjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/meta.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { Info, type IconProps } from '@phosphor-icons/react';\nimport React from 'react';\n\nimport { pluginMeta } from '@dxos/app-framework';\n\nexport const STATUS_BAR_PLUGIN = 'dxos.org/plugin/status-bar';\n\nexport default pluginMeta({\n id: STATUS_BAR_PLUGIN,\n name: 'Status Bar',\n description: 'Display a bar with status and actions.',\n iconComponent: (props: IconProps) => <Info {...props} />,\n iconSymbol: 'ph--info--regular',\n});\n"],
|
|
5
|
-
"mappings": ";AAIA,SAASA,YAA4B;AACrC,OAAOC,WAAW;AAElB,SAASC,kBAAkB;AAEpB,IAAMC,oBAAoB;AAEjC,IAAA,eAAeC,WAAW;EACxBC,IAAIF;EACJG,MAAM;EACNC,aAAa;EACbC,eAAe,CAACC,UAAqB,sBAAA,cAACC,MAASD,KAAAA;EAC/CE,YAAY;AACd,CAAA;",
|
|
6
|
-
"names": ["Info", "React", "pluginMeta", "STATUS_BAR_PLUGIN", "pluginMeta", "id", "name", "description", "iconComponent", "props", "Info", "iconSymbol"]
|
|
7
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"StatusBarImpl.d.ts","sourceRoot":"","sources":["../../../../src/components/StatusBarImpl.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAmB,MAAM,OAAO,CAAC;AASxC,eAAO,MAAM,aAAa,yBA8BzB,CAAC"}
|
package/src/meta.tsx
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2024 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import { Info, type IconProps } from '@phosphor-icons/react';
|
|
6
|
-
import React from 'react';
|
|
7
|
-
|
|
8
|
-
import { pluginMeta } from '@dxos/app-framework';
|
|
9
|
-
|
|
10
|
-
export const STATUS_BAR_PLUGIN = 'dxos.org/plugin/status-bar';
|
|
11
|
-
|
|
12
|
-
export default pluginMeta({
|
|
13
|
-
id: STATUS_BAR_PLUGIN,
|
|
14
|
-
name: 'Status Bar',
|
|
15
|
-
description: 'Display a bar with status and actions.',
|
|
16
|
-
iconComponent: (props: IconProps) => <Info {...props} />,
|
|
17
|
-
iconSymbol: 'ph--info--regular',
|
|
18
|
-
});
|