Merge pull request #4249 from signalco-io/next

signalco-io · Jan 4, 2024 · 465d904 · 465d904 · vercel · Jan 4, 2024
2 parents d9705d0 + b7d7630
commit 465d904
Show file tree

Hide file tree

Showing 25 changed files with 431 additions and 329 deletions.
diff --git a/infra/packages/eslint-config/package.json b/infra/packages/eslint-config/package.json
@@ -6,7 +6,7 @@
     "library.js"
   ],
   "devDependencies": {
-    "eslint-config-turbo": "1.11.2",
+    "eslint-config-turbo": "1.11.3",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-only-warn": "1.1.0",
     "eslint-plugin-import": "2.29.1",

diff --git a/infra/pnpm-lock.yaml b/infra/pnpm-lock.yaml
diff --git a/web/apps/app/components/dashboards/BackgroundSelector.tsx b/web/apps/app/components/dashboards/BackgroundSelector.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { cx } from '@signalco/ui-primitives/cx';
+import { Button } from '@signalco/ui-primitives/Button';
+import { spaceBackgroundGradients } from './Dashboards';
+
+export function BackgroundSelector({ value, onChange }: { value?: string; onChange: (background: string | undefined) => void; }) {
+    return (
+        <div className="grid grid-cols-[repeat(auto-fit,40px)] gap-2">
+            <Button
+                className={cx(
+                    'h-10 w-10 rounded-full transition-all border',
+                    !value && 'ring-2 ring-primary/80 ring-offset-2'
+                )}
+                style={{
+                    backgroundImage: 'linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 49%, rgba(255,0,0,1) 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 100%)'
+                }}
+                onClick={() => onChange(undefined)} />
+            {Object.keys(spaceBackgroundGradients).map((key) => (
+                <Button
+                    key={key}
+                    className={cx(
+                        'h-10 w-10 rounded-full transition-all border',
+                        value === key && 'ring-2 ring-primary/80 ring-offset-2'
+                    )}
+                    style={{
+                        backgroundImage: spaceBackgroundGradients[key]
+                    }}
+                    onClick={() => onChange(key)} />
+            ))}
+        </div>
+    );
+}
diff --git a/web/apps/app/components/dashboards/DashboardSettings.tsx b/web/apps/app/components/dashboards/DashboardSettings.tsx
@@ -10,24 +10,30 @@ import useLocale from '../../src/hooks/useLocale';
 import useSaveDashboard from '../../src/hooks/dashboards/useSaveDashboard';
 import useDeleteDashboard from '../../src/hooks/dashboards/useDeleteDashboard';
 import { IDashboardModel } from '../../src/dashboards/DashboardsRepository';
+import { BackgroundSelector } from './BackgroundSelector';
 
 interface IDashboardSettingsProps {
     isOpen: boolean,
-    dashboard?: IDashboardModel,
+    dashboard: IDashboardModel,
     onClose: () => void,
 }
 
 function DashboardSettings({ isOpen, dashboard, onClose }: IDashboardSettingsProps) {
     const { t } = useLocale('App', 'Dashboards');
     const [name, setName] = useState(dashboard?.name || '');
+    const [background, setBackground] = useState(dashboard?.background);
     const [, setDashboardId] = useSearchParam('dashboard');
     const saveDashboard = useSaveDashboard();
     const deleteDashboard = useDeleteDashboard();
 
     const handleSave = async () => {
         saveDashboard.mutate({
             ...dashboard,
-            name: name
+            name,
+            configurationSerialized: JSON.stringify({
+                ...(JSON.parse(dashboard?.configurationSerialized || '{}') as object),
+                background
+            })
         });
         onClose();
     }
@@ -62,8 +68,12 @@ function DashboardSettings({ isOpen, dashboard, onClose }: IDashboardSettingsPro
                     label={t('DashboardSettingName')}
                     value={name}
                     onChange={(e) => setName(e.target.value ?? '')} />
+                <Stack spacing={2}>
+                    <Typography level="body2" semiBold>{t('Background')}</Typography>
+                    <BackgroundSelector value={background} onChange={setBackground} />
+                </Stack>
                 <Stack spacing={1}>
-                    <Typography level="body2">{t('Advanced')}</Typography>
+                    <Typography level="body2" semiBold>{t('Advanced')}</Typography>
                     <ConfirmDeleteButton
                         buttonLabel={t('DeleteButtonLabel')}
                         header={t('DeleteTitle')}

diff --git a/web/apps/app/components/dashboards/Dashboards.tsx b/web/apps/app/components/dashboards/Dashboards.tsx
@@ -6,6 +6,7 @@ import dynamic from 'next/dynamic';
 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 { showNotification } from '@signalco/ui-notifications';
 import { Loadable } from '@signalco/ui/Loadable';
@@ -22,6 +23,51 @@ import DashboardSettings from './DashboardSettings';
 
 const WidgetStoreDynamic = dynamic(() => import('../widget-store/WidgetStore'));
 
+export const spaceBackgroundGradients: Record<string, string> = {
+    blue: 'linear-gradient( 109.6deg,  rgba(0,51,102,1) 11.2%, #bbb 91.1% )',
+    blue2: 'radial-gradient( circle farthest-corner at 1.8% 4.8%,  rgba(17,23,58,1) 0%, rgba(58,85,148,1) 90% )',
+    purple: 'radial-gradient( circle farthest-corner at 10% 20%,  rgba(100,43,115,1) 0%, rgba(4,0,4,1) 90% )',
+    redPurple: 'radial-gradient( circle farthest-corner at 48.4% 47.5%,  rgba(76,21,51,1) 0%, rgba(34,10,37,1) 90% )',
+    moonshine: 'radial-gradient( circle 815px at 23.4% -21.8%,  rgba(9,29,85,1) 0.2%, rgba(0,0,0,1) 100.2% )',
+    sunset: 'linear-gradient( 179deg,  rgba(0,0,0,1) 9.2%, rgba(127,16,16,1) 103.9% )',
+    silver: 'radial-gradient( circle farthest-corner at 10% 20%,  rgba(90,92,106,1) 0%, rgba(32,45,58,1) 81.3% )',
+    softGreen: 'radial-gradient( circle farthest-corner at 10% 20%,  rgba(176,229,208,1) 42%, rgba(92,202,238,0.41) 93.6% )',
+    darkGreen: 'radial-gradient( circle farthest-corner at 10% 20%,  rgba(14,174,87,1) 0%, rgba(12,116,117,1) 90% )',
+    softPink: 'radial-gradient( circle 879px at 10.4% 22.3%,  rgba(255,235,238,1) 0%, rgba(186,190,245,1) 93.6% )'
+}
+
+function SpaceBackground({ background }: { background?: string }) {
+    const [currentGradient, setCurrentGradient] = useState<string | undefined>(undefined);
+
+    useEffect(() => {
+        const timeoutId = setTimeout(() => {
+            setCurrentGradient(background);
+        }, 500);
+        return () => clearTimeout(timeoutId);
+    }, [background]);
+
+    return (
+        <>
+            {(background && background !== currentGradient) && (
+                <div
+                    className="pointer-events-none fixed inset-0 -z-50 h-full w-full"
+                    style={{
+                        backgroundImage: spaceBackgroundGradients[background]
+                    }} />
+            )}
+            <div
+                className={cx(
+                    'pointer-events-none fixed inset-0 -z-50 h-full w-full',
+                    background !== currentGradient && 'opacity-0 transition-opacity duration-500',
+                    !currentGradient && 'bg-background'
+                )}
+                style={{
+                    backgroundImage: currentGradient ? spaceBackgroundGradients[currentGradient] : undefined
+                }} />
+        </>
+    );
+}
+
 function Dashboards() {
     const { t } = useLocale('App', 'Dashboards');
     const [selectedId, setDashboardId] = useSearchParam('dashboard');
@@ -83,6 +129,7 @@ function Dashboards() {
 
     return (
         <>
+            <SpaceBackground background={selectedDashboard.data?.background} />
             {isEditing && (
                 <>
                     <SpacesEditingBackground />
@@ -120,10 +167,12 @@ function Dashboards() {
                     </div>
                 </Loadable>
             </Stack>
-            <DashboardSettings
-                dashboard={selectedDashboard.data}
-                isOpen={isDashboardSettingsOpen}
-                onClose={() => setIsDashboardSettingsOpen(undefined)} />
+            {selectedDashboard.data && (
+                <DashboardSettings
+                    dashboard={selectedDashboard.data}
+                    isOpen={isDashboardSettingsOpen}
+                    onClose={() => setIsDashboardSettingsOpen(undefined)} />
+            )}
             <ConfigurationDialog open={showWidgetStore} onClose={() => setShowWidgetStore(false)} header={t('WidgetsStore')}>
                 <WidgetStoreDynamic onAddWidget={handleAddWidget} />
             </ConfigurationDialog>

diff --git a/web/apps/app/components/navigation/FloatingNavContainer.tsx b/web/apps/app/components/navigation/FloatingNavContainer.tsx
@@ -7,7 +7,7 @@ export function FloatingNavContainer({ children }: PropsWithChildren) {
             'fixed z-10 inset-x-0 top-0 p-2 sm:inset-y-0 sm:left-0 sm:right-auto sm:p-2',
             'animate-in slide-in-from-top-16 sm:slide-in-from-top-0 sm:slide-in-from-left-20',
         )}>
-            <div className="h-full rounded-lg border bg-card-transparent/30 shadow-md backdrop-blur-md">
+            <div className="h-full rounded-lg border border-border/70 bg-card/80 shadow-md backdrop-blur-md">
                 {children}
             </div>
         </nav>

diff --git a/web/apps/app/components/widgets/parts/WidgetCard.tsx b/web/apps/app/components/widgets/parts/WidgetCard.tsx
@@ -61,7 +61,7 @@ export default function WidgetCard(props: IWidgetCardProps) {
 
     return (
         <>
-            <Card className="relative h-[--widget-instance-h] w-[--widget-instance-w] overflow-hidden p-0"
+            <Card className="relative h-[--widget-instance-h] w-[--widget-instance-w] overflow-hidden border border-border/70 bg-card/80 p-0 shadow-md backdrop-blur-md"
                 style={{
                     '--widget-instance-w': `calc(${width} * var(--widget-size) + ${0.5 * (width - 1)}rem)`,
                     '--widget-instance-h': `calc(${height} * var(--widget-size) + ${0.5 * (height - 1)}rem)`,

diff --git a/web/apps/app/locales/en.json b/web/apps/app/locales/en.json
@@ -159,6 +159,7 @@
             "Cancel": "Cancel",
             "SaveChanges": "Save changes",
             "Advanced": "Advanced",
+            "Background": "Background",
             "DeleteButtonLabel": "Delete...",
             "DeleteTitle": "Delete dashboard",
             "ConfirmDialogExpectedText": "confirm",

diff --git a/web/apps/app/package.json b/web/apps/app/package.json
@@ -96,7 +96,7 @@
         "fs-extra": "11.2.0",
         "next-sitemap": "4.2.3",
         "openapi-types": "12.1.3",
-        "postcss": "8.4.32",
+        "postcss": "8.4.33",
         "react-is": "18.2.0",
         "rimraf": "5.0.5",
         "sass": "1.69.7",

diff --git a/web/apps/app/src/dashboards/DashboardsRepository.ts b/web/apps/app/src/dashboards/DashboardsRepository.ts
@@ -41,6 +41,7 @@ export interface IDashboardModel {
     widgets: IWidget[];
     sharedWith: IUser[];
     order: number;
+    background?: string | undefined;
 
     get configurationSerialized() : string;
 }
@@ -53,41 +54,50 @@ class DashboardModel implements IDashboardModel {
     sharedWith: IUser[];
     order: number;
     timeStamp: Date | undefined;
+    background?: string | undefined;
 
     constructor(
         id: string,
         name: string,
         sharedWith: IUser[],
         isFavorite: boolean | undefined,
         timeStamp: Date | undefined,
-        order: number) {
+        order: number,
+        background: string | undefined) {
         this.id = id;
         this.name = name;
         this.isFavorite = isFavorite ?? false;
         this.widgets = [];
         this.sharedWith = sharedWith;
         this.timeStamp = timeStamp;
         this.order = order;
+        this.background = background;
     }
 
     public get configurationSerialized() : string {
         return JSON.stringify({
-            widgets: this.widgets
+            widgets: this.widgets,
+            background: this.background
         });
     }
 }
 
 export function dashboardModelFromEntity(entity: IEntityDetails, order: number, favorites: string[]): IDashboardModel {
+    const configurationSerializedContact = entity.contacts.find(c => c.channelName === 'config' && c.contactName === 'configuration');
+    const configurationSerialized = configurationSerializedContact?.valueSerialized;
+
+    const dashboardBackground = configurationSerialized != null
+        ? (objectWithKey(JSON.parse(configurationSerialized), 'background')?.background ?? undefined) as (string | undefined)
+        : undefined;
+
     const dashboard = new DashboardModel(
         entity.id,
         entity.alias,
         entity.sharedWith,
         favorites.indexOf(entity.id) >= 0,
         entity.timeStamp,
-        order);
-
-    const configurationSerializedContact = entity.contacts.find(c => c.channelName === 'config' && c.contactName === 'configuration');
-    const configurationSerialized = configurationSerializedContact?.valueSerialized
+        order,
+        dashboardBackground);
 
     dashboard.widgets = (configurationSerialized != null
         ? (objectWithKey(JSON.parse(configurationSerialized), 'widgets')?.widgets ?? []) as Array<IWidget> // TODO: Construct models

diff --git a/web/apps/app/src/hooks/dashboards/useDashboard.ts b/web/apps/app/src/hooks/dashboards/useDashboard.ts
@@ -7,5 +7,5 @@ export default function useDashboard(id?: string): Omit<ReturnType<typeof useDas
     return useMemo(() => ({
         ...dashboards,
         data: dashboards.data?.find(d => d.id === id)
-    }), [dashboards]);
+    }), [dashboards, id]);
 }
diff --git a/web/apps/blog/package.json b/web/apps/blog/package.json
@@ -65,7 +65,7 @@
         "cross-env": "7.0.3",
         "eslint": "8.56.0",
         "next-sitemap": "4.2.3",
-        "postcss": "8.4.32",
+        "postcss": "8.4.33",
         "rimraf": "5.0.5",
         "sass": "1.69.7",
         "typescript": "5.3.3"

diff --git a/web/apps/brandgrab/package.json b/web/apps/brandgrab/package.json
@@ -53,7 +53,7 @@
         "cross-env": "7.0.3",
         "eslint": "8.56.0",
         "next-sitemap": "4.2.3",
-        "postcss": "8.4.32",
+        "postcss": "8.4.33",
         "rimraf": "5.0.5",
         "sass": "1.69.7",
         "tailwindcss": "3.4.0",

diff --git a/web/apps/doprocess/package.json b/web/apps/doprocess/package.json
@@ -79,7 +79,7 @@
     "eslint": "8.56.0",
     "eslint-plugin-drizzle": "0.2.3",
     "next-sitemap": "4.2.3",
-    "postcss": "8.4.32",
+    "postcss": "8.4.33",
     "rimraf": "5.0.5",
     "sass": "1.69.7",
     "typescript": "5.3.3"

diff --git a/web/apps/slco/package.json b/web/apps/slco/package.json
@@ -53,7 +53,7 @@
         "cross-env": "7.0.3",
         "eslint": "8.56.0",
         "next-sitemap": "4.2.3",
-        "postcss": "8.4.32",
+        "postcss": "8.4.33",
         "rimraf": "5.0.5",
         "sass": "1.69.7",
         "typescript": "5.3.3"

diff --git a/web/apps/ui-docs/package.json b/web/apps/ui-docs/package.json
@@ -28,7 +28,7 @@
         "@types/react-dom": "18.2.18",
         "autoprefixer": "10.4.16",
         "css-loader": "6.8.1",
-        "postcss": "8.4.32",
+        "postcss": "8.4.33",
         "postcss-loader": "7.3.4",
         "rimraf": "5.0.5",
         "sass": "1.69.7",

diff --git a/web/apps/uier/package.json b/web/apps/uier/package.json
@@ -59,7 +59,7 @@
         "dotenv": "16.3.1",
         "eslint": "8.56.0",
         "next-sitemap": "4.2.3",
-        "postcss": "8.4.32",
+        "postcss": "8.4.33",
         "rimraf": "5.0.5",
         "sass": "1.69.7",
         "typescript": "5.3.3"

diff --git a/web/apps/web/package.json b/web/apps/web/package.json
@@ -70,7 +70,7 @@
         "eslint": "8.56.0",
         "next-sitemap": "4.2.3",
         "openapi-types": "12.1.3",
-        "postcss": "8.4.32",
+        "postcss": "8.4.33",
         "rimraf": "5.0.5",
         "sass": "1.69.7",
         "typescript": "5.3.3"

diff --git a/web/package.json b/web/package.json
@@ -16,6 +16,6 @@
         "test": "turbo run test"
     },
     "devDependencies": {
-        "turbo": "1.11.2"
+        "turbo": "1.11.3"
     }
 }
diff --git a/web/packages/eslint-config-signalco/package.json b/web/packages/eslint-config-signalco/package.json
@@ -9,7 +9,7 @@
         "@typescript-eslint/eslint-plugin": "6.17.0",
         "@typescript-eslint/parser": "6.17.0",
         "eslint-config-next": "14.0.4",
-        "eslint-config-turbo": "1.11.2",
+        "eslint-config-turbo": "1.11.3",
         "eslint-plugin-import": "2.29.1",
         "eslint-plugin-only-warn": "1.1.0",
         "eslint-plugin-react": "7.33.2",