Merge pull request #4089 from signalco-io/feature/comments

Feature/comments

DEVELOPMENT.md

@@ -39,6 +39,10 @@ Apps:
 - App on [http://localhost:3001](http://localhost:3001)
 - UI Docs on [http://localhost:6006](http://localhost:6006)
 
+#### Turbo in local development
+
+Remote caching is enabled but `TURBO_REMOTE_CACHE_SIGNATURE_KEY` environemnt variable needs to be set. Contact any contributor to get access to signature key to enable remote caching for your development environment.
+
 ## Configure env variables
 
 `.env.local` example:

web/apps/doprocess/app/layout.tsx

@@ -1,3 +1,4 @@
+import Script from 'next/script';
 import { Inter } from 'next/font/google';
 import { Metadata, Viewport } from 'next';
 import './global.css';
@@ -20,6 +21,7 @@ export default function RootLayout({ children, }: {
                     <ClientProvider>
                         {children}
                         <Analytics />
+                        <Script src="http://localhost:5500/index.js" />
                     </ClientProvider>
                 </AuthProvider>
             </body>

web/apps/doprocess/next.config.js

@@ -35,6 +35,7 @@ const nextConfig = {
                     knownSecureHeadersExternalUrls.clarity,
                     knownSecureHeadersExternalUrls.vercel,
                     knownSecureHeadersExternalUrls.clerk,
+                    { scriptSrc: 'http://localhost:5500', styleSrc: 'http://localhost:5500' },
                     {
                         frameAncestors: '\'self\'' // NOTE: This is required for embedding out app in an iframe
                     }

web/packages/hooks/package.json

@@ -5,17 +5,7 @@
     "sideEffects": false,
     "type": "module",
     "exports": {
-        "./useWindowWidth": "./src/useWindowWidth.ts",
-        "./useWindowRect": "./src/useWindowRect.ts",
-        "./useWindowEvent": "./src/useWindowEvent.ts",
-        "./useTimeout": "./src/useTimeout.ts",
-        "./useSearchParam": "./src/useSearchParam.ts",
-        "./useIsServer": "./src/useIsServer.ts",
-        "./useIsomorphicLayoutEffect": "./src/useIsomorphicLayoutEffect.ts",
-        "./useInterval": "./src/useInterval.ts",
-        "./useControllableState": "./src/useControllableState.ts",
-        "./useCallbackRef": "./src/useCallbackRef.ts",
-        "./useAudio": "./src/useAudio.ts"
+        "./*": "./src/*.ts"
     },
     "scripts": {
         "lint": "eslint ."

web/packages/hooks/src/useDocumentEvent.ts

@@ -0,0 +1,8 @@
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+
+export function useDocumentEvent<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => void) {
+    useIsomorphicLayoutEffect(() => {
+        document.addEventListener(type, listener);
+        return () => document.removeEventListener(type, listener);
+    }, []);
+}

web/packages/hooks/src/useWindowEvent.ts

@@ -1,8 +1,9 @@
+import { DependencyList } from 'react';
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
 
-export function useWindowEvent<K extends keyof WindowEventMap>(type: K, listener: (this: Window, ev: WindowEventMap[K]) => void  ) {
+export function useWindowEvent<K extends keyof WindowEventMap>(type: K, listener: (this: Window, ev: WindowEventMap[K]) => void, dependencies?: DependencyList | undefined) {
     useIsomorphicLayoutEffect(() => {
         window.addEventListener(type, listener);
         return () => window.removeEventListener(type, listener);
-    }, []);
+    }, dependencies ?? []);
 }

web/packages/js/src/DOMHelpers.ts

@@ -0,0 +1,92 @@
+function getQuerySelector(element: Element | Node | null | undefined, options: { proceedAfterId: boolean, includeClasses: boolean }) {
+    if (!(element instanceof Element))
+        return '';
+
+    let currentNode: Element | null = element;
+    if (!currentNode)
+        return '';
+
+    // Walk from current element up to the root
+    const selectorParts = [];
+    while (currentNode && currentNode.nodeType === Node.ELEMENT_NODE) {
+        let currentSelector = '';
+        if (currentNode.id) {
+            currentSelector += '#'.concat(escapeClass(currentNode.id))
+            if (!options.proceedAfterId) {
+                selectorParts.unshift(currentSelector);
+                break;
+            }
+        } else {
+            // Handle tag
+            const currentTag = currentNode.nodeName.toLowerCase();
+            if ('html' === currentTag)
+                break;
+            currentSelector += currentTag;
+
+            // Handle classes
+            const currentClass = currentNode.classList.item(0);
+            if (options.includeClasses && currentClass) {
+                currentSelector += `.${escapeClass(currentClass)}`;
+            }
+
+            let nthSibiling: Element | null = currentNode;
+            let sibilingMathingClasses = options.includeClasses && currentClass;
+            let sibilingsCount = 1
+            while (nthSibiling = nthSibiling.previousElementSibling) {
+                if (nthSibiling.nodeName.toLowerCase() === currentTag) {
+                    sibilingsCount++;
+                }
+                if (options.includeClasses && currentClass && nthSibiling.classList.contains(currentClass)) {
+                    sibilingMathingClasses = false;
+                }
+            }
+            if (sibilingsCount !== 1 && !(options.includeClasses && sibilingMathingClasses)) {
+                currentSelector += `:nth-of-type(${sibilingsCount})`;
+            }
+        }
+        selectorParts.unshift(currentSelector);
+        currentNode = currentNode.parentNode instanceof Element ? currentNode.parentNode : null;
+    }
+    return selectorParts.join('>')
+}
+function escapeClass(selector: string) {
+    // Fix ID numbers: "50" -> "\\35\\30"
+    return selector.replace(/([^a-zA-Z0-9-_])/g, '\\$1')
+}
+
+export const getElementSelector = (element: Element | Node | null | undefined) => {
+    const variations = [
+        getQuerySelector(element, {
+            proceedAfterId: !1,
+            includeClasses: !1
+        }),
+        getQuerySelector(element, {
+            proceedAfterId: !0,
+            includeClasses: !1
+        }),
+        getQuerySelector(element, {
+            proceedAfterId: !1,
+            includeClasses: !0
+        }),
+        getQuerySelector(element, {
+            proceedAfterId: !0,
+            includeClasses: !0
+        })
+    ];
+
+    const selectors = new Set();
+    return variations
+        .filter(variationSelector => {
+            if (selectors.has(variationSelector))
+                return false;
+            selectors.add(variationSelector);
+            try {
+                document.querySelector(variationSelector)
+            } catch (n) {
+                console.error('Faulty nodeId selector', variationSelector, String(n));
+                return false;
+            }
+            return true;
+        })
+        .join(',');
+}

web/packages/js/src/index.ts

@@ -2,3 +2,4 @@ export * from './ArrayHelpers';
 export * from './StringHelpers';
 export * from './SharedTypes';
 export * from './ObjectHelpers';
+export * from './DOMHelpers';

web/packages/ui-icons/src/lucide/index.ts

@@ -26,6 +26,7 @@ export {
     ChevronsRight as Right,
     Copy,
     Copy as Duplicate,
+    MessageCircle as Comment,
     Check,
     CircleSlashed as Disabled,
     CircleEqual,
@@ -48,6 +49,7 @@ export {
     Send,
     Users as People,
     Minimize,
+    Inbox,
     Link2 as Link,
     Link2Off as LinkOff,
     AlertTriangle as Warning,

web/packages/ui-primitives/src/Avatar/Avatar.tsx

@@ -1,16 +1,40 @@
-import { PropsWithChildren } from 'react';
+import { HTMLAttributes } from 'react';
 import { cx } from '../cx';
 
-export type AvatarProps = PropsWithChildren<{
-    size?: 'sm' | 'md' | 'lg'; // TODO: Implement
-    src?: string; // TODO: Implement
-    alt?: string; // TODO: Implement
-    className?: string;
-}>;
+export type AvatarProps = HTMLAttributes<HTMLDivElement> & {
+    size?: 'sm' | 'md' | 'lg';
+} & ({
+    children: React.ReactNode;
+    src?: never;
+    alt?: never;
+} | {
+    children?: never;
+    src: string;
+    alt: string;
+});
 
-export function Avatar({ children, className }: AvatarProps) {
-    return (<div className={cx(
-        'flex h-10 min-w-[40px] max-w-[40px] items-center justify-center rounded-full bg-muted border',
-        className
-    )}>{children}</div>);
+export function Avatar({ children, size, src, alt, className, ...rest }: AvatarProps) {
+    return (
+        <div
+            className={cx(
+                'flex items-center justify-center rounded-full bg-muted border',
+                (!size || size === 'md') && 'h-10 min-w-[40px] max-w-[40px]',
+                size === 'sm' && 'h-6 min-w-[24px] max-w-[24px] text-xs',
+                size === 'lg' && 'h-12 min-w-[48px] max-w-[48px] text-lg',
+                className
+            )}
+            {...rest}
+        >
+            {src ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                    src={src}
+                    alt={alt}
+                    width={size === 'lg' ? 48 : (size === 'sm' ? 24 : 40)}
+                    height={size === 'lg' ? 48 : (size === 'sm' ? 24 : 40)} />
+            ) : (
+                children
+            )}
+        </div>
+    );
 }

web/packages/ui-primitives/src/Button/Button.tsx

@@ -7,7 +7,7 @@ import { cx } from '../cx'
 
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
     variant?: VariantKeys | 'link';
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     startDecorator?: ReactNode;
     endDecorator?: ReactNode;
     loading?: boolean;
@@ -31,7 +31,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
     ...otherProps
 }, ref) => {
     const Comp = useMemo(() => href && !disabled
-        ? ({ children }: PropsWithChildren) => <Link href={href} legacy>{children}</Link>
+        ? ({ children }: PropsWithChildren) => <Link href={href}>{children}</Link>
         : ({ children }: PropsWithChildren) => <>{children}</>, [href, disabled]);
     const ButtonComp = useMemo(() => asChild ? Slot : 'button', [asChild]);
 
@@ -47,6 +47,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
                     variant === 'solid' && 'bg-primary text-primary-foreground hover:bg-primary/90',
                     variant === 'link' && 'underline-offset-4 hover:underline text-primary',
                     (!size || size === 'md') && 'h-10 py-2 px-4',
+                    size === 'xs' && 'h-7 px-2 rounded-md gap-0.5',
                     size === 'sm' && 'h-9 px-3 rounded-md gap-0.5',
                     size === 'lg' && 'h-11 px-6 rounded-md gap-2',
                     fullWidth && 'w-full',

web/packages/ui-primitives/src/IconButton/IconButton.tsx

@@ -26,6 +26,7 @@ const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(({
                     variant === 'plain' && 'hover:bg-accent hover:text-accent-foreground',
                     variant === 'solid' && 'bg-primary text-primary-foreground hover:bg-primary/90',
                     (!size || size === 'md') && 'h-9 w-9 p-2 rounded-md',
+                    size === 'xs' && 'h-6 w-6 rounded-sm p-1',
                     size === 'sm' && 'h-8 w-8 rounded-sm p-2',
                     size === 'lg' && 'h-12 w-12 rounded-md',
                     fullWidth && 'w-full',

web/packages/ui-primitives/src/Input/Input.tsx

@@ -9,6 +9,7 @@ export type InputProps = InputHTMLAttributes<HTMLInputElement> & {
     label?: string;
     helperText?: string;
     fullWidth?: boolean;
+    variant?: 'outlined' | 'plain';
 };
 
 export function Input({
@@ -17,6 +18,7 @@ export function Input({
     className,
     startDecorator,
     endDecorator,
+    variant,
     ...rest
 }: InputProps) {
     const VerticalContainer = useMemo(() => label || helperText
@@ -35,7 +37,9 @@ export function Input({
                 {startDecorator ?? null}
                 <input
                     className={cx(
-                        'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+                        'flex h-10 w-full rounded-md px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-offset-2 disabled:cursor-not-allowed',
+                        (!variant || variant === 'outlined') && 'border border-input bg-background focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50',
+                        variant === 'plain' && 'border-0 bg-transparent disabled:opacity-50 disabled:bg-muted/30',
                         className
                     )}
                     {...rest}

web/packages/ui-primitives/src/Link/Link.tsx

@@ -1,30 +1,24 @@
 import type { AnchorHTMLAttributes } from 'react';
-import NextLink from 'next/link';
-import type { Url } from 'next/dist/shared/lib/router/router';
 import { isAbsoluteUrl } from '@signalco/js';
 import { cx } from '../cx';
 
 export type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
-    href: string | Url;
+    href: string;
     className?: string | undefined;
     'aria-label'?: string | undefined;
-    legacy?: boolean;
 };
 
-export function Link({ className, href, children, legacy, ...rest }: LinkProps) {
+export function Link({ className, href, children, ...rest }: LinkProps) {
     return (
-        <NextLink
+        <a
             href={href}
             className={cx(
                 typeof children === 'string' && 'no-underline text-muted-foreground',
                 className
             )}
             target={isAbsoluteUrl(href) ? '_blank' : '_self'}
-            passHref
-            prefetch={false}
-            legacyBehavior={legacy}
             {...rest}>
             {children}
-        </NextLink>
+        </a>
     );
 }

web/packages/ui-primitives/src/Menu/DropdownMenu.tsx

@@ -1,5 +1,4 @@
 import { Fragment, PropsWithChildren, forwardRef } from 'react'
-import Link from 'next/link'
 import { cx } from 'classix'
 import { Navigate } from '@signalco/ui-icons'
 import {
@@ -87,7 +86,7 @@ const DropdownMenuItem = forwardRef<
     }
 >(({ className, inset, href, children, startDecorator, endDecorator, ...props }, ref) => {
     const LinkOrNot = href
-        ? (props: PropsWithChildren) => <Link href={href} {...props} />
+        ? (props: PropsWithChildren) => <a href={href} {...props} />
         : (props: PropsWithChildren) => <Fragment {...props} />;
     const DecoratorWrapper = startDecorator || endDecorator ? Row : Fragment;
 

web/packages/ui-primitives/src/Popper/Popper.tsx

@@ -6,10 +6,14 @@ export type PopperProps = HTMLAttributes<HTMLDivElement> & {
     trigger?: React.ReactNode;
     anchor?: React.ReactNode;
     open?: boolean;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    sideOffset?: number;
+    align?: 'start' | 'center' | 'end';
+    alignOffset?: number;
     onOpenChange?: (open: boolean) => void;
 };
 
-export function Popper({ className, trigger, anchor, open, onOpenChange, ...rest }: PopperProps) {
+export function Popper({ className, trigger, anchor, side, sideOffset, align, alignOffset, open, onOpenChange, ...rest }: PopperProps) {
     return (
         <PopoverPrimitive.Root open={open} onOpenChange={onOpenChange}>
             {trigger && (
@@ -24,10 +28,13 @@ export function Popper({ className, trigger, anchor, open, onOpenChange, ...rest
             )}
             <PopoverPrimitive.Portal>
                 <PopoverPrimitive.Content
-                    align="center"
-                    sideOffset={4}
+                    align={align ?? 'center'}
+                    sideOffset={sideOffset ?? 4}
+                    side={side}
+                    alignOffset={alignOffset ?? (align === 'center' ? 0 : align === 'start' ? -4 : 4)}
+                    collisionPadding={Math.max(sideOffset ?? 0, alignOffset ?? 0)}
                     className={cx(
-                        'z-50 w-72 rounded-md border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+                        'z-50 w-72 rounded-lg border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
                         className
                     )}
                     {...rest}

web/packages/ui-primitives/src/Typography/Typography.tsx

@@ -31,7 +31,7 @@ export function populateTypographyStylesAndClasses({
         className: cx(
             'm-0',
             // Levels
-            level === 'body1' && 'text-base',
+            level === 'body1' && 'text-base text-primary',
             level === 'body2' && 'text-sm text-secondary-foreground',
             level === 'body3' && 'text-xs text-tertiary-foreground',
             level === 'h1' && 'text-5xl',

web/packages/ui/package.json

@@ -32,7 +32,6 @@
         "@types/react-timeago": "4.1.6",
         "autoprefixer": "10.4.16",
         "classix": "2.1.35",
-        "next": "14.0.4",
         "postcss": "8.4.32",
         "postcss-preset-env": "9.3.0",
         "react": "18.2.0",