Merge pull request #3937 from signalco-io/next

signalco-io · Nov 25, 2023 · 7b854fb · 7b854fb · vercel · Nov 25, 2023
2 parents 4b48097 + ba653a4
commit 7b854fb
Show file tree

Hide file tree

Showing 46 changed files with 284 additions and 193 deletions.
diff --git a/web/apps/app/components/channels/ChannelGalleryItem.tsx b/web/apps/app/components/channels/ChannelGalleryItem.tsx
@@ -32,7 +32,7 @@ export default function ChannelGalleryItem(props: ChannelGalleryItemProps) {
             {/* {!planned && <ChannelGalleryItemChip label="New" color="info" />} */}
             <Stack alignItems="center" justifyContent="center" style={{ height: '100%', width: '100%' }} spacing={2}>
                 <ChannelLogo channelName={id} label={label} />
-                <Typography textAlign="center">{label}</Typography>
+                <Typography center>{label}</Typography>
             </Stack>
         </Card>
     );

diff --git a/web/apps/app/components/dashboards/DashboardView.tsx b/web/apps/app/components/dashboards/DashboardView.tsx
@@ -22,7 +22,7 @@ function NoWidgetsPlaceholder({ onAdd }: { onAdd: () => void }) {
                 <Stack style={{ maxWidth: 320 }} spacing={4} alignItems="center" justifyContent="center">
                     <Image priority width={280} height={213} alt="No Widgets" src="/assets/placeholders/placeholder-no-widgets.svg" />
                     <Typography level="h2">{t('NoWidgets')}</Typography>
-                    <Typography textAlign="center" level="body2">{t('NoWidgetsHelpTextFirstLine')}<br />{t('NoWidgetsHelpTextSecondLine')}</Typography>
+                    <Typography center level="body2">{t('NoWidgetsHelpTextFirstLine')}<br />{t('NoWidgetsHelpTextSecondLine')}</Typography>
                     <Button onClick={onAdd}>{t('AddWidget')}</Button>
                 </Stack>
             </Row>

diff --git a/web/apps/app/components/dashboards/Dashboards.tsx b/web/apps/app/components/dashboards/Dashboards.tsx
@@ -111,7 +111,7 @@ function Dashboards() {
                                         <Stack style={{ maxWidth: 280 }} spacing={4} alignItems="center" justifyContent="center">
                                             <Image priority width={280} height={213} alt={t('NoDashboardsPlaceholder')} src="/assets/placeholders/placeholder-no-dashboards.svg" />
                                             <Typography level="h2">{t('NoDashboardsPlaceholder')}</Typography>
-                                            <Typography textAlign="center" level="body2">{t('NoDashboardsHelpText')}</Typography>
+                                            <Typography center level="body2">{t('NoDashboardsHelpText')}</Typography>
                                             <Button variant="solid" onClick={handleNewDashboard}>{t('NewDashboard')}</Button>
                                         </Stack>
                                     </Row>

diff --git a/web/apps/app/components/widgets/parts/WidgetAirConditioning.tsx b/web/apps/app/components/widgets/parts/WidgetAirConditioning.tsx
@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 import { Typography } from '@signalco/ui-primitives/Typography';
 import { Stack } from '@signalco/ui-primitives/Stack';
 import { Row } from '@signalco/ui-primitives/Row';
+import { cx } from '@signalco/ui-primitives/cx';
 import { Button } from '@signalco/ui-primitives/Button';
 import { usePromise } from '@enterwell/react-hooks';
 import { WidgetSharedProps } from '../Widget';
@@ -78,8 +79,8 @@ function WidgetAirConditioning(props: WidgetSharedProps<ConfigProps>) {
                 {config?.label && (
                     <Typography
                         thin={rows > 1}
-                        fontSize={rows > 1 ? '1rem' : '0.7rem'}
-                        opacity={0.5}>
+                        className={cx(rows > 1 ? 'text-base' : 'text-xs')}
+                        tertiary>
                         {config.label}
                     </Typography>
                 )}

diff --git a/web/apps/app/components/widgets/parts/WidgetFinanceStock.tsx b/web/apps/app/components/widgets/parts/WidgetFinanceStock.tsx
@@ -95,7 +95,7 @@ export default function WidgetFinanceStock(props: WidgetSharedProps<ConfigProps>
                             </NoDataPlaceholder>
                         ) : (
                             <>
-                                <Typography level="h4" bold lineHeight={0.9}>${closePrice}</Typography>
+                                <Typography level="h4" bold>${closePrice}</Typography>
                                 <Typography color={diffPerc >= 0 ? 'success' : 'danger'}>{diffPerc >= 0 ? '+' : ''}{diffPercDecimals}%</Typography>
                             </>
                         )}

diff --git a/web/apps/app/components/widgets/parts/WidgetTime.tsx b/web/apps/app/components/widgets/parts/WidgetTime.tsx
@@ -41,11 +41,11 @@ function WidgetTime(props: WidgetSharedProps<ConfigProps>) {
         <div style={{ height: '100%' }}>
             <Stack style={{ height: '100%' }} alignItems="center" justifyContent="center">
                 <div style={{ position: 'relative', margin: 0, padding: 0 }}>
-                    <Typography fontSize={36} thin>
+                    <Typography level="h2" thin>
                         {time}
                         {showSeconds && (
                             <span style={{ position: 'absolute', opacity: 0.4, bottom: -20, right: 0 }}>
-                                <Typography fontSize={18}>{seconds}</Typography>
+                                <Typography level="h6">{seconds}</Typography>
                             </span>
                         )}
                     </Typography>

diff --git a/web/apps/app/components/widgets/parts/piece/PrimaryValueLabel.tsx b/web/apps/app/components/widgets/parts/piece/PrimaryValueLabel.tsx
@@ -1,6 +1,7 @@
 import { Typography } from '@signalco/ui-primitives/Typography';
 import { Stack } from '@signalco/ui-primitives/Stack';
 import { Row } from '@signalco/ui-primitives/Row';
+import { cx } from '@signalco/ui-primitives/cx';
 
 export function numberWholeAndDecimal(data: number | string | undefined): [undefined, undefined] | [number, number] {
     if (typeof data === 'undefined')
@@ -21,11 +22,11 @@ export function PrimaryValueLabel({ value, unit, size }: { value: number | strin
     return (
         <Row alignItems="stretch">
             <Stack className="h-full" justifyContent="center" alignItems="center">
-                <Typography extraThin fontSize={size === 'large' ? 64 : 42} lineHeight={1}>{degreesWhole}</Typography>
+                <Typography extraThin className={cx(size === 'large' ? 'text-6xl' : 'text-4xl')}>{degreesWhole}</Typography>
             </Stack>
             <Stack alignItems="start" justifyContent="space-between">
-                <Typography extraThin fontSize={size === 'large' ? 18 : 12} opacity={0.6}>{unit}</Typography>
-                <Typography extraThin fontSize={size === 'large' ? 18 : 14} opacity={0.6}>.{degreesDecimal}</Typography>
+                <Typography extraThin className={size === 'large' ? 'text-lg' : 'text-xs'} tertiary>{unit}</Typography>
+                <Typography extraThin className={size === 'large' ? 'text-lg' : 'text-sm'} tertiary>.{degreesDecimal}</Typography>
             </Stack>
         </Row>
     );

diff --git a/web/apps/app/package.json b/web/apps/app/package.json
@@ -40,10 +40,10 @@
         "@signalco/ui-primitives": "workspace:*",
         "@signalco/ui-notifications": "workspace:*",
         "@signalco/ui-icons": "workspace:*",
-        "@tanstack/query-sync-storage-persister": "5.8.6",
-        "@tanstack/react-query": "5.8.6",
-        "@tanstack/react-query-devtools": "5.8.6",
-        "@tanstack/react-query-persist-client": "5.8.6",
+        "@tanstack/query-sync-storage-persister": "5.8.7",
+        "@tanstack/react-query": "5.8.7",
+        "@tanstack/react-query-devtools": "5.8.7",
+        "@tanstack/react-query-persist-client": "5.8.7",
         "@vercel/analytics": "1.1.1",
         "@vvo/tzdb": "6.113.0",
         "autoprefixer": "10.4.16",
@@ -61,7 +61,7 @@
         "react": "18.2.0",
         "react-cool-inview": "3.0.1",
         "react-dom": "18.2.0",
-        "react-grid-layout": "1.4.3",
+        "react-grid-layout": "1.4.4",
         "react-transition-group": "4.4.5",
         "recharts": "2.10.1",
         "sharp": "0.32.6",

diff --git a/web/apps/blog/app/(posts)/hello-world/page.tsx b/web/apps/blog/app/(posts)/hello-world/page.tsx
@@ -17,7 +17,7 @@ export default function Page() {
                 </Row>
                 <Stack spacing={2}>
                     <Typography level="h1">{meta.title}</Typography>
-                    <Typography level="h2" fontSize="1.5em" secondary semiBold>{meta.description}</Typography>
+                    <Typography level="h4" secondary semiBold>{meta.description}</Typography>
                 </Stack>
             </Stack>
             <Container maxWidth="md" centered={false} padded={false}>

diff --git a/web/apps/blog/components/pages/PageCenterHeader.tsx b/web/apps/blog/components/pages/PageCenterHeader.tsx
@@ -9,7 +9,7 @@ export default function PageCenterHeader(props: { header: string; subHeader?: st
         <header className={style.root}>
             <Stack alignItems="center" spacing={2}>
                 <Typography level={secondary ? 'h5' : 'h4'}>{header}</Typography>
-                {subHeader && <Typography textAlign="center">{subHeader}</Typography>}
+                {subHeader && <Typography center>{subHeader}</Typography>}
             </Stack>
         </header>
     );

diff --git a/web/apps/blog/mdx-components.tsx b/web/apps/blog/mdx-components.tsx
@@ -27,14 +27,14 @@ function H6({ children }: PropsWithChildren) {
 }
 
 function P({ children }: PropsWithChildren) {
-    return <Typography level="body1" gutterBottom lineHeight={1.5} fontSize={'1.1em'}>{children}</Typography>;
+    return <Typography level="body1" gutterBottom>{children}</Typography>;
 }
 
 function Li({ children }: PropsWithChildren) {
     return (
         <Row spacing={1} style={{ marginBottom: 8 }} alignItems="start">
-            <Typography opacity={0.4} fontSize={'1.1em'} lineHeight={1.5}>&ndash;</Typography>
-            <Typography level="body1" fontSize={'1.1em'} lineHeight={1.5}>{children}</Typography>
+            <Typography tertiary>&ndash;</Typography>
+            <Typography level="body1">{children}</Typography>
         </Row>
     );
 }

diff --git a/web/apps/development/src/AppItemSection.tsx b/web/apps/development/src/AppItemSection.tsx
@@ -6,7 +6,7 @@ import { Typography } from '@signalco/ui-primitives/Typography';
 export function AppItemSection({ items, title }: { items: AppItemType[]; title: string; }) {
     return (
         <Row spacing={2}>
-            <Typography level="body3" textTransform='uppercase'>
+            <Typography level="body3" uppercase>
                 {title}
             </Typography>
             <Row spacing={1}>

diff --git a/web/apps/doprocess/components/processes/documents/DocumentSharedWithIndicator.tsx b/web/apps/doprocess/components/processes/documents/DocumentSharedWithIndicator.tsx
@@ -0,0 +1,18 @@
+import { Loadable } from '@signalco/ui/Loadable';
+import { SharedWithIndicator } from '../../shared/SharedWithIndicator';
+import { useDocument } from '../../../src/hooks/useDocument';
+
+export function DocumentSharedWithIndicator({ documentId }: { documentId: string; }) {
+    const {data: document, isLoading: documentIsLoading, error: documentError} = useDocument(documentId);
+    return (
+        <Loadable
+            placeholder="skeletonRect"
+            error={documentError}
+            isLoading={documentIsLoading}
+            width={80}
+            height={20}
+            loadingLabel={'Loading share information...'}>
+            {document && <SharedWithIndicator shareableEntity={document}/>}
+        </Loadable>
+    );
+}
diff --git a/web/apps/doprocess/components/processes/documents/DocumentsListItem.tsx b/web/apps/doprocess/components/processes/documents/DocumentsListItem.tsx
@@ -17,7 +17,7 @@ export function DocumentsListItem({ document }: DocumentsListItemProps) {
             endDecorator={(
                 <Row spacing={1}>
                     <SharedWithIndicator shareableEntity={document} />
-                    <Navigate className="opacity-0 group-hover:opacity-100" />
+                    <Navigate className="hidden opacity-0 group-hover:opacity-100 md:block" />
                 </Row>
             )}
             className="group w-full"

diff --git a/web/apps/doprocess/components/processes/processes/ProcessesListItem.tsx b/web/apps/doprocess/components/processes/processes/ProcessesListItem.tsx
@@ -17,7 +17,7 @@ export function ProcessesListItem({ process }: ProcessListItemProps) {
             endDecorator={(
                 <Row spacing={1}>
                     <SharedWithIndicator shareableEntity={process} />
-                    <Navigate className="opacity-0 group-hover:opacity-100" />
+                    <Navigate className="hidden opacity-0 group-hover:opacity-100 md:block" />
                 </Row>
             )}
             className="group w-full"

diff --git a/web/apps/doprocess/components/processes/processes/RunsListItem.tsx b/web/apps/doprocess/components/processes/processes/RunsListItem.tsx
@@ -22,22 +22,22 @@ export function RunsListItem({ run }: RunsListItemProps) {
             label={(
                 <Stack spacing={0.5}>
                     <Typography>{run.name}</Typography>
-                    <Row spacing={2}>
-                        <Row spacing={1} className="opacity-70">
-                            <ListChecks size={16} />
-                            <TypographyProcessName id={run.processId.toString()} level="body3" />
+                    <div className="flex flex-col gap-2 md:flex-row">
+                        <Row spacing={1}>
+                            <ListChecks size={16} className="opacity-80" />
+                            <TypographyProcessName id={run.processId.toString()} level="body2" />
                         </Row>
                         {process.data && (
                             <SharedWithIndicator shareableEntity={process.data} />
                         )}
-                    </Row>
+                    </div>
                 </Stack>
             )}
             startDecorator={<Play />}
             endDecorator={(
                 <Row spacing={1}>
                     <RunProgress processId={run.processId} runId={run.id} />
-                    <Navigate className="opacity-0 group-hover:opacity-100" />
+                    <Navigate className="hidden opacity-0 group-hover:opacity-100 md:block" />
                 </Row>
             )}
             className="group w-full"

diff --git a/web/apps/doprocess/components/processes/tasks/TaskDetails.tsx b/web/apps/doprocess/components/processes/tasks/TaskDetails.tsx
@@ -14,9 +14,12 @@ import { Loadable } from '@signalco/ui/Loadable';
 import { useSearchParam } from '@signalco/hooks/useSearchParam';
 import { TypographyDocumentName } from '../documents/TypographyDocumentName';
 import { EditorSkeleton } from '../documents/editor/EditorSkeleton';
+import { DocumentSharedWithIndicator } from '../documents/DocumentSharedWithIndicator';
+import { SharedWithIndicator } from '../../shared/SharedWithIndicator';
 import { KnownPages } from '../../../src/knownPages';
 import { useProcessTaskDefinitionUpdate } from '../../../src/hooks/useProcessTaskDefinitionUpdate';
 import { useProcessTaskDefinition } from '../../../src/hooks/useProcessTaskDefinition';
+import { useDocument } from '../../../src/hooks/useDocument';
 import TaskDetailsTypePicker from './TaskDetailsTypePicker';
 import { TaskDetailsToolbar } from './TaskDetailsToolbar';
 
@@ -97,15 +100,25 @@ export function TaskDetails({ processId, editable }: TaskDetailsProps) {
                         )}
                         {taskDefinition?.type && (
                             <Row spacing={1}>
-                                {taskDefinition.type === 'blank' && <Empty className="opacity-60" width={16} />}
-                                {taskDefinition.type === 'blank' && <Typography secondary semiBold>Blank - No details</Typography>}
-                                {taskDefinition.type === 'document' && <Link href={taskDefinition.typeData ? KnownPages.Document(taskDefinition.typeData) : '#'}><FileText className="opacity-60" width={16} /></Link>}
+                                {taskDefinition.type === 'blank' && (
+                                    <>
+                                        <Empty className="opacity-60" width={16} />
+                                        <Typography level="body2">Blank - No details</Typography>
+                                    </>
+                                )}
+                                {taskDefinition.type === 'document' && (
+                                    <Link href={taskDefinition.typeData ? KnownPages.Document(taskDefinition.typeData) : '#'}>
+                                        <FileText className="opacity-60" width={16} />
+                                    </Link>
+                                )}
                                 {taskDefinition.type === 'document' && taskDefinition.typeData && (
-                                    <TypographyDocumentName
-                                        secondary
-                                        semiBold
-                                        id={taskDefinition.typeData}
-                                        editable={editable} />
+                                    <>
+                                        <TypographyDocumentName
+                                            level="body2"
+                                            id={taskDefinition.typeData}
+                                            editable={editable} />
+                                        <DocumentSharedWithIndicator documentId={taskDefinition.typeData} />
+                                    </>
                                 )}
                             </Row>
                         )}

diff --git a/web/apps/doprocess/components/processes/tasks/TaskDetailsToolbar.tsx b/web/apps/doprocess/components/processes/tasks/TaskDetailsToolbar.tsx
@@ -1,13 +1,17 @@
 'use client';
 
 import { useState } from 'react';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@signalco/ui-primitives/Menu';
+import { Typography } from '@signalco/ui-primitives/Typography';
+import { Stack } from '@signalco/ui-primitives/Stack';
+import { Modal } from '@signalco/ui-primitives/Modal';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@signalco/ui-primitives/Menu';
 import { IconButton } from '@signalco/ui-primitives/IconButton';
 import { cx } from '@signalco/ui-primitives/cx';
-import { Delete, MoreHorizontal } from '@signalco/ui-icons';
+import { Delete, MoreHorizontal, Replace } from '@signalco/ui-icons';
 import { Toolbar } from '../../shared/Toolbar';
 import { SavingIndicator } from '../../shared/SavingIndicator';
 import { useProcessTaskDefinition } from '../../../src/hooks/useProcessTaskDefinition';
+import TaskDetailsTypePicker from './TaskDetailsTypePicker';
 import { TaskDeleteModal } from './TaskDeleteModal';
 
 type TaskDetailsToolbarProps = {
@@ -20,6 +24,7 @@ type TaskDetailsToolbarProps = {
 export function TaskDetailsToolbar({ processId, selectedTaskId, saving, editable }: TaskDetailsToolbarProps) {
     const { data: taskDefinition } = useProcessTaskDefinition(processId, selectedTaskId);
     const [deleteOpen, setDeleteOpen] = useState(false);
+    const [typePickerOpen, setTypePickerOpen] = useState(false);
 
     return (
         <>
@@ -36,6 +41,10 @@ export function TaskDetailsToolbar({ processId, selectedTaskId, saving, editable
                         </IconButton>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent>
+                        <DropdownMenuItem startDecorator={<Replace />} onClick={() => setTypePickerOpen(true)}>
+                            Change type...
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
                         <DropdownMenuItem startDecorator={<Delete />} onClick={() => setDeleteOpen(true)}>
                             Delete...
                         </DropdownMenuItem>
@@ -48,6 +57,18 @@ export function TaskDetailsToolbar({ processId, selectedTaskId, saving, editable
                     open={deleteOpen}
                     onOpenChange={setDeleteOpen} />
             )}
+            {typePickerOpen && selectedTaskId && (
+                <Modal open={typePickerOpen} onOpenChange={setTypePickerOpen}>
+                    <Stack spacing={1}>
+                        <Typography level="h5">Change task type</Typography>
+                        <TaskDetailsTypePicker
+                            processId={processId}
+                            taskDefinitionId={selectedTaskId}
+                            onPicked={() => setTypePickerOpen(false)}
+                        />
+                    </Stack>
+                </Modal>
+            )}
         </>
     );
 }