Merge pull request #4237 from signalco-io/next

signalco-io · Jan 3, 2024 · e2895e2 · e2895e2 · vercel · Jan 3, 2024
2 parents 1b08cc3 + bb892de
commit e2895e2
Show file tree

Hide file tree

Showing 26 changed files with 152 additions and 131 deletions.
diff --git a/infra/package.json b/infra/package.json
@@ -12,7 +12,7 @@
     "@infra/typescript-config": "workspace:*",
     "turbo": "latest"
   },
-  "packageManager": "pnpm@8.13.1",
+  "packageManager": "pnpm@8.14.0",
   "engines": {
     "node": ">=18"
   }

diff --git a/web/apps/app/components/icons/FanVisual.tsx b/web/apps/app/components/icons/FanVisual.tsx
@@ -1,17 +1,20 @@
+import { CSSProperties } from 'react';
 import { cx } from '@signalco/ui-primitives/cx';
 
-export default function FanVisual(props: { state: boolean, size: number }) {
-    const isActive = props.state;
+export default function FanVisual({ size, state }: { state: boolean, size?: number }) {
+    const isActive = state;
 
     return (
         <svg
             xmlns="http://www.w3.org/2000/svg"
             className={cx(
-                'mb-5 mt-0.5 -ml-1',
-                isActive && 'animate-spin [animation-direction:reverse] [animation-duration:5s] [transform-origin:41px_47px]'
+                'mt-2 [&_*]:transition-all',
+                isActive && 'animate-spin [animation-direction:reverse] [animation-duration:5s] [transform-origin:41px_47px]',
+                Boolean(size) ? 'w-[--visual-size] h-[--visual-size]' : 'w-full h-full'
             )}
-            width={props.size * 1.2}
-            height={props.size * 1.2}
+            style={{
+                '--visual-size': size ? `${size}px` : undefined
+            } as CSSProperties}
             fill="none"
             viewBox="0 0 72 72"
         >

diff --git a/web/apps/app/components/icons/LightBulbVisual.tsx b/web/apps/app/components/icons/LightBulbVisual.tsx
@@ -1,13 +1,20 @@
-export default function LightBulbVisual(props: { state: boolean, size: number }) {
-    const isActive = props.state;
+import { CSSProperties } from 'react';
+import { cx } from '@signalco/ui-primitives/cx';
+
+export default function LightBulbVisual({ state, size }: { state: boolean, size?: number }) {
+    const isActive = state;
     const bulbColor = isActive ? '#FFDD66' : '#c4c4c4';
 
     return (
         <svg
             xmlns="http://www.w3.org/2000/svg"
-            className="-ml-7 mt-2 [&_*]:transition-all"
-            width={props.size * 1.4}
-            height={props.size * 1.4}
+            className={cx(
+                'mt-2 -mx-4 [&_*]:transition-all',
+                Boolean(size) ? 'w-[--visual-size] h-[--visual-size]' : 'w-full h-full'
+            )}
+            style={{
+                '--visual-size': size ? `${size}px` : undefined
+            } as CSSProperties}
             fill="none"
             viewBox="0 0 78 94">
             <g>

diff --git a/web/apps/app/components/icons/TvVisual.module.scss b/web/apps/app/components/icons/TvVisual.module.scss
diff --git a/web/apps/app/components/icons/TvVisual.tsx b/web/apps/app/components/icons/TvVisual.tsx
@@ -1,23 +1,33 @@
-/* eslint-disable tailwindcss/no-custom-classname */
-import styles from './TvVisual.module.scss';
+import { CSSProperties } from 'react';
+import { cx } from '@signalco/ui-primitives/cx';
 
-function TvVisual(props: { state: boolean, size: number }) {
-    const isActive = props.state;
+function TvVisual({ state, size }: { state: boolean, size?: number }) {
+    const isActive = state;
     const screenColor = isActive ? '#378DBD' : '#333';
 
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" className={styles.root} width={props.size * 1.6} height={props.size * 1.6} fill="none" viewBox="0 0 103 77">
-            <g className="Theme=Dark, State=On">
-                <path fill="hsl(var(--foreground))" d="M19 14h65v40.524H19z" className="Edge" />
-                <path fill="hsl(var(--foreground))" d="M39.172 54.524h24.655v3.286H39.172z" className="BaseStand" />
-                <path fill="hsl(var(--foreground))" d="M32.448 57.809h38.103v2.19H32.448z" className="Base" />
-                <g className="Screen" filter={isActive ? 'url(#tvvisualfilter0_d)' : ''}>
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className={cx(
+                'mt-2 [&_*]:transition-all',
+                Boolean(size) ? 'w-[--visual-size] h-[--visual-size]' : 'w-full h-full'
+            )}
+            style={{
+                '--visual-size': size ? `${size}px` : undefined
+            } as CSSProperties}
+            fill="none"
+            viewBox="0 0 103 77">
+            <g>
+                <path fill="hsl(var(--foreground))" d="M19 14h65v40.524H19z" />
+                <path fill="hsl(var(--foreground))" d="M39.172 54.524h24.655v3.286H39.172z" />
+                <path fill="hsl(var(--foreground))" d="M32.448 57.809h38.103v2.19H32.448z" />
+                <g filter={isActive ? 'url(#tvvisualfilter0_d)' : ''}>
                     <path fill={screenColor} d="M22.362 18.381h58.276v31.762H22.362z" />
                 </g>
-                <path fill="#121212" floodOpacity=".12" opacity={isActive ? '0' : '1'} d="M22.362 18.381h30.259v31.762H22.362z" className="ScreenShadow" />
+                <path fill="#121212" floodOpacity=".12" opacity={isActive ? '0' : '1'} d="M22.362 18.381h30.259v31.762H22.362z" />
             </g>
             <defs>
-                <filter id="tvvisualfilter0_d" width="102.276" height="75.762" x=".362" y=".381" className="tvvisualfilter0_d" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
+                <filter id="tvvisualfilter0_d" width="102.276" height="75.762" x=".362" y=".381" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
                     <feFlood floodOpacity="0" result="BackgroundImageFix" />
                     <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
                     <feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />

diff --git a/web/apps/app/components/icons/WindowVisual.module.scss b/web/apps/app/components/icons/WindowVisual.module.scss
diff --git a/web/apps/app/components/icons/WindowVisual.tsx b/web/apps/app/components/icons/WindowVisual.tsx
@@ -1,9 +1,9 @@
 /* eslint-disable tailwindcss/no-custom-classname */
-import { useState } from 'react';
+import { CSSProperties, useState } from 'react';
+import { cx } from '@signalco/ui-primitives/cx';
 import { useInterval } from '@signalco/hooks/useInterval';
 import { now } from '../../src/services/DateTimeProvider';
 import { colorToRgb } from '../../src/helpers/StringHelpers';
-import styles from './WindowVisual.module.scss';
 
 const skySunnyGrads = [
     [{ color: '#00000c', position: 0 }, { color: '#00000c', position: 0 }],
@@ -32,7 +32,7 @@ const skySunnyGrads = [
     [{ color: '#00000c', position: 80 }, { color: '#150800', position: 100 }],
 ];
 
-function WindowVisual(props: { shadePerc: number, size: number, dateAndTime?: Date }) {
+function WindowVisual({ size, ...props }: { shadePerc: number, size?: number, dateAndTime?: Date }) {
     const [hours, setHours] = useState(((props.dateAndTime ?? now()).getHours()) % 24);
 
     // Update hours every minute
@@ -52,7 +52,17 @@ function WindowVisual(props: { shadePerc: number, size: number, dateAndTime?: Da
     const shadePosition = 1 + (perc * 64);
 
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" className={styles.root} width={props.size * 1.4} height={props.size * 1.4} fill="none" viewBox="0 0 81 104">
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className={cx(
+                'mt-2 -mx-4 [&_*]:transition-all',
+                Boolean(size) ? 'w-[--visual-size] h-[--visual-size]' : 'w-full h-full'
+            )}
+            style={{
+                '--visual-size': size ? `${size}px` : undefined
+            } as CSSProperties}
+            fill="none"
+            viewBox="0 0 81 104">
             <g className="Theme=Dark, Shades=Mid">
                 <path fill="hsl(var(--foreground))" d="M16 1h49v71H16z" className="Frame" />
                 <g className="Pane" filter="url(#filter0_d_21:114)">

diff --git a/web/apps/app/components/widgets/parts/WidgetShades.tsx b/web/apps/app/components/widgets/parts/WidgetShades.tsx
@@ -104,9 +104,11 @@ function WidgetShades({ config, onOptions }: WidgetSharedProps<ConfigProps>) {
             {columns > 1 && (
                 <div className="h-full">
                     <Stack
-                        className="h-full pb-4 pl-5 pr-4 pt-2"
+                        className="relative h-full w-full items-start p-2"
                         justifyContent={columns > 2 ? 'space-between' : 'center'}>
-                        <WindowVisual shadePerc={1 - shadePerc} size={68} />
+                        <div className="relative h-3/4 grow">
+                            <WindowVisual shadePerc={1 - shadePerc} size={80} />
+                        </div>
                         {columns > 2 && <Typography semiBold noWrap>{label}</Typography>}
                     </Stack>
                     <Divider orientation="vertical" />

diff --git a/web/apps/app/components/widgets/parts/WidgetState.tsx b/web/apps/app/components/widgets/parts/WidgetState.tsx
@@ -153,13 +153,11 @@ function WidgetState(props: WidgetSharedProps<ConfigProps>) {
             onClick={handleStateChangeRequest}
             variant="plain"
             className="m-0 h-full w-full !items-start !justify-start p-0 text-start">
-            <Stack className="h-full pb-4 pt-2 pl-1">
-                <div className="px-2">
-                    <Visual state={state} size={68} />
-                </div>
-                <div className="px-2">
-                    <Typography semiBold noWrap>{label}</Typography>
+            <Stack className="relative h-full w-full items-start p-2">
+                <div className="grow">
+                    <Visual state={state} size={80} />
                 </div>
+                <Typography semiBold noWrap>{label}</Typography>
             </Stack>
             {isLoading && (
                 <div className="absolute right-4 top-4">

diff --git a/web/apps/app/next.config.mjs b/web/apps/app/next.config.mjs
@@ -18,7 +18,14 @@ const nextConfig = {
     images: {
         dangerouslyAllowSVG: true,
         contentSecurityPolicy: 'default-src \'self\'; script-src \'none\'; sandbox;',
-        domains: ['www.signalco.io']
+        remotePatterns: [
+            {
+                protocol: 'https',
+                hostname: 'www.signalco.io',
+                port: '',
+                pathname: '**'
+            }
+        ]
     },
     eslint: {
         dirs: ['worker', 'tools', 'src', 'pages', 'app', 'locales', 'components']

diff --git a/web/apps/app/package.json b/web/apps/app/package.json
@@ -99,7 +99,7 @@
         "postcss": "8.4.32",
         "react-is": "18.2.0",
         "rimraf": "5.0.5",
-        "sass": "1.69.6",
+        "sass": "1.69.7",
         "sass-loader": "13.3.3",
         "typescript": "5.3.3"
     },

diff --git a/web/apps/blog/package.json b/web/apps/blog/package.json
@@ -67,7 +67,7 @@
         "next-sitemap": "4.2.3",
         "postcss": "8.4.32",
         "rimraf": "5.0.5",
-        "sass": "1.69.6",
+        "sass": "1.69.7",
         "typescript": "5.3.3"
     },
     "nextBundleAnalysis": {

diff --git a/web/apps/brandgrab/package.json b/web/apps/brandgrab/package.json
@@ -55,7 +55,7 @@
         "next-sitemap": "4.2.3",
         "postcss": "8.4.32",
         "rimraf": "5.0.5",
-        "sass": "1.69.6",
+        "sass": "1.69.7",
         "tailwindcss": "3.4.0",
         "tailwindcss-animate": "1.0.7",
         "typescript": "5.3.3"

diff --git a/web/apps/doprocess/package.json b/web/apps/doprocess/package.json
@@ -81,7 +81,7 @@
     "next-sitemap": "4.2.3",
     "postcss": "8.4.32",
     "rimraf": "5.0.5",
-    "sass": "1.69.6",
+    "sass": "1.69.7",
     "typescript": "5.3.3"
   },
   "nextBundleAnalysis": {

diff --git a/web/apps/slco/package.json b/web/apps/slco/package.json
@@ -55,7 +55,7 @@
         "next-sitemap": "4.2.3",
         "postcss": "8.4.32",
         "rimraf": "5.0.5",
-        "sass": "1.69.6",
+        "sass": "1.69.7",
         "typescript": "5.3.3"
     },
     "nextBundleAnalysis": {

diff --git a/web/apps/ui-docs/package.json b/web/apps/ui-docs/package.json
@@ -31,7 +31,7 @@
         "postcss": "8.4.32",
         "postcss-loader": "7.3.4",
         "rimraf": "5.0.5",
-        "sass": "1.69.6",
+        "sass": "1.69.7",
         "sass-loader": "13.3.3",
         "storybook": "7.6.7",
         "storybook-addon-swc": "1.2.0",

diff --git a/web/apps/uier/package.json b/web/apps/uier/package.json
@@ -61,7 +61,7 @@
         "next-sitemap": "4.2.3",
         "postcss": "8.4.32",
         "rimraf": "5.0.5",
-        "sass": "1.69.6",
+        "sass": "1.69.7",
         "typescript": "5.3.3"
     },
     "nextBundleAnalysis": {

diff --git a/web/apps/web/package.json b/web/apps/web/package.json
@@ -72,7 +72,7 @@
         "openapi-types": "12.1.3",
         "postcss": "8.4.32",
         "rimraf": "5.0.5",
-        "sass": "1.69.6",
+        "sass": "1.69.7",
         "typescript": "5.3.3"
     },
     "nextBundleAnalysis": {

diff --git a/web/package.json b/web/package.json
@@ -6,7 +6,7 @@
         "apps/*",
         "packages/*"
     ],
-    "packageManager": "pnpm@8.13.1",
+    "packageManager": "pnpm@8.14.0",
     "scripts": {
         "build": "turbo run build",
         "clean": "turbo run clean",

diff --git a/web/packages/tailwindcss-config-signalco/index.js b/web/packages/tailwindcss-config-signalco/index.js
@@ -91,11 +91,11 @@ export const appBaseConfig = {
             '2xl': [`${1.5 * appFontCoef}rem`, { lineHeight: `${2 * appFontCoef}rem` }],
             '3xl': [`${1.875 * appFontCoef}rem`, { lineHeight: `${2.25 * appFontCoef}rem` }],
             '4xl': [`${2.25 * appFontCoef}rem`, { lineHeight: `${2.5 * appFontCoef}rem` }],
-            '5xl': [`${3 * appFontCoef}rem`, { lineHeight: `${1 * appFontCoef}rem` }],
-            '6xl': [`${3.75 * appFontCoef}rem`, { lineHeight: `${1 * appFontCoef}rem` }],
-            '7xl': [`${4.5 * appFontCoef}rem`, { lineHeight: `${1 * appFontCoef}rem` }],
-            '8xl': [`${6 * appFontCoef}rem`, { lineHeight: `${1 * appFontCoef}rem` }],
-            '9xl': [`${8 * appFontCoef}rem`, { lineHeight: `${1 * appFontCoef}rem` }],
+            '5xl': [`${3 * appFontCoef}rem`, { lineHeight: '1' }],
+            '6xl': [`${3.75 * appFontCoef}rem`, { lineHeight: '1' }],
+            '7xl': [`${4.5 * appFontCoef}rem`, { lineHeight: '1' }],
+            '8xl': [`${6 * appFontCoef}rem`, { lineHeight: '1' }],
+            '9xl': [`${8 * appFontCoef}rem`, { lineHeight: '1' }],
         }
     }
 };
diff --git a/web/packages/ui-primitives/package.json b/web/packages/ui-primitives/package.json
@@ -36,7 +36,7 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-timeago": "7.2.0",
-        "sass": "1.69.6",
+        "sass": "1.69.7",
         "tailwind-merge": "2.2.0",
         "typescript": "5.3.3"
     }

diff --git a/web/packages/ui-primitives/src/Row/Row.tsx b/web/packages/ui-primitives/src/Row/Row.tsx
@@ -27,7 +27,7 @@ const Row = forwardRef<HTMLDivElement, RowProps>(({ spacing, alignItems, justify
                 justifyItems === 'center' && 'justify-items-center',
                 className)}
             style={{
-                '--s-gap': `${(spacing ?? 0) * 8}px`,
+                '--s-gap': `${(spacing ?? 0) * 0.5}rem`,
                 ...style
             } as CSSProperties}
             {...props}

diff --git a/web/packages/ui-primitives/src/Stack/Stack.tsx b/web/packages/ui-primitives/src/Stack/Stack.tsx
@@ -24,7 +24,7 @@ const Stack = forwardRef<HTMLDivElement, StackProps>(({ spacing, alignItems, jus
                 justifyContent === 'stretch' && 'justify-stretch',
                 className)}
             style={{
-                '--s-gap': `${(spacing ?? 0) * 8}px`,
+                '--s-gap': `${(spacing ?? 0) * 0.5}rem`,
                 ...style
             } as CSSProperties}
             {...props}

diff --git a/web/packages/ui/package.json b/web/packages/ui/package.json
@@ -37,7 +37,7 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-timeago": "7.2.0",
-        "sass": "1.69.6",
+        "sass": "1.69.7",
         "tailwind-merge": "2.2.0",
         "typescript": "5.3.3"
     }

diff --git a/web/packages/uier-toolbar/package.json b/web/packages/uier-toolbar/package.json
@@ -42,7 +42,7 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-timeago": "7.2.0",
-        "sass": "1.69.6",
+        "sass": "1.69.7",
         "tsup": "8.0.1",
         "tailwind-merge": "2.2.0",
         "tailwindcss": "3.4.0",