@soul-refiner/design-system 0.2.102 → 0.2.104

package/dist/components/atoms/index.d.ts

@@ -2,3 +2,5 @@ export { Box } from './box';
 export type { BoxProps } from './box';
 export { Display, H, P, Typography } from './typography';
 export type { DisplayProps, HeadingProps, ParagraphProps, TypographyProps, } from './typography';
+export { TimeAgo } from './time_ago';
+export type { TimeAgoProps } from './time_ago';

package/dist/components/atoms/index.js

@@ -1,2 +1,3 @@
 export { Box } from './box';
 export { Display, H, P, Typography } from './typography';
+export { TimeAgo } from './time_ago';

package/dist/components/atoms/time_ago/index.d.ts

@@ -0,0 +1,2 @@
+export { TimeAgo } from './time_ago';
+export type { TimeAgoProps } from './time_ago';

package/dist/components/atoms/time_ago/index.js

@@ -0,0 +1 @@
+export { TimeAgo } from './time_ago';

package/dist/components/atoms/time_ago/time_ago.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface TimeAgoProps extends React.PropsWithChildren {
+    date: Date;
+}
+export declare const TimeAgo: ({ date }: TimeAgoProps) => React.JSX.Element;

package/dist/components/{surfaces/post/helpers.js → atoms/time_ago/time_ago.js}

@@ -1,4 +1,9 @@
-export const abbrTimeBeforeDate = (date) => {
+'use client';
+import React from 'react';
+export const TimeAgo = ({ date }) => {
+    return React.createElement(React.Fragment, null, abbrTimeBeforeDate(date));
+};
+const abbrTimeBeforeDate = (date) => {
     const now = new Date();
     const diff = now.getTime() - date.getTime();
     if (diff < 60000) {
@@ -8,17 +13,17 @@ export const abbrTimeBeforeDate = (date) => {
     else if (diff < 3600000) {
         // under one hour
         const minutes = Math.floor(diff / 60000);
-        return `${minutes} ${minutes === 1 ? 'min' : 'mins'}`;
+        return `${minutes} ${minutes === 1 ? 'min' : 'mins'} ago`;
     }
     else if (diff < 86400000) {
         // under one day
         const hours = Math.floor(diff / 3600000);
-        return `${hours} ${hours === 1 ? 'hour' : 'hours'}`;
+        return `${hours} ${hours === 1 ? 'hour' : 'hours'} ago`;
     }
     else if (diff < 604800000) {
         // under one week
         const days = Math.floor(diff / 86400000);
-        return `${days} ${days === 1 ? 'day' : 'days'}`;
+        return `${days} ${days === 1 ? 'day' : 'days'} ago`;
     }
     else {
         return date.toDateString().slice(4);

package/dist/components/hooks/click-outside.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useClickOutside: (ref: React.Ref<HTMLElement>, cb: (...args: any[]) => unknown) => void;

package/dist/components/hooks/click-outside.js

@@ -0,0 +1,10 @@
+'use client';
+import { useEventListener } from './event-listenter';
+export const useClickOutside = (ref, cb) => {
+    useEventListener('click', (e) => {
+        if (ref?.current == null ||
+            ref?.current?.contains(e.target))
+            return;
+        cb(e);
+    }, document);
+};

package/dist/components/hooks/event-listenter.d.ts

@@ -0,0 +1 @@
+export declare const useEventListener: (eventType: string, callback: (...args: any[]) => unknown, element?: Window & typeof globalThis) => void;

package/dist/components/hooks/event-listenter.js

@@ -0,0 +1,15 @@
+'use client';
+import React from 'react';
+export const useEventListener = (eventType, callback, element = window) => {
+    const callbackRef = React.useRef(callback);
+    React.useEffect(() => {
+        callbackRef.current = callback;
+    }, [callback]);
+    React.useEffect(() => {
+        if (element == null)
+            return;
+        const handler = (e) => callbackRef.current(e);
+        element.addEventListener(eventType, handler);
+        return () => element.removeEventListener(eventType, handler);
+    }, [eventType, element]);
+};

package/dist/components/hooks/hover.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useHover: (ref: React.Ref<HTMLElement>) => boolean;

package/dist/components/hooks/hover.js

@@ -0,0 +1,9 @@
+'use client';
+import React from 'react';
+import { useEventListener } from './event-listenter';
+export const useHover = (ref) => {
+    const [hovered, setHovered] = React.useState(false);
+    useEventListener('mouseover', () => setHovered(true), ref?.current);
+    useEventListener('mouseout', () => setHovered(false), ref?.current);
+    return hovered;
+};

package/dist/components/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export { useClickOutside } from './click-outside';
+export { useEventListener } from './event-listenter';
+export { useHover } from './hover';
+export { useWindowSize } from './window-size';

package/dist/components/hooks/index.js

@@ -0,0 +1,4 @@
+export { useClickOutside } from './click-outside';
+export { useEventListener } from './event-listenter';
+export { useHover } from './hover';
+export { useWindowSize } from './window-size';

package/dist/components/hooks/window-size.d.ts

@@ -0,0 +1,4 @@
+export declare const useWindowSize: () => {
+    width: number;
+    height: number;
+};

package/dist/components/hooks/window-size.js

@@ -0,0 +1,13 @@
+'use client';
+import React from 'react';
+import { useEventListener } from './event-listenter';
+export const useWindowSize = () => {
+    const [windowSize, setWindowSize] = React.useState({
+        width: window.innerWidth,
+        height: window.innerHeight,
+    });
+    useEventListener('resize', () => {
+        setWindowSize({ width: window.innerWidth, height: window.innerHeight });
+    });
+    return windowSize;
+};

package/dist/components/iconography/avatar/avatar.d.ts

@@ -15,13 +15,15 @@ export interface AvatarProps extends NativeProps {
     textPosition?: 'left' | 'right';
     title?: React.ReactNode;
     tooltipContent?: React.ReactElement;
+    tooltipSx?: string;
+    tooltipWrapperId?: string;
 }
 /**
  *
  * Avatar
  */
 declare const Avatar: {
-    ({ as, href, image, size, status, subtitle, sx, textPosition, title, tooltipContent, ...rest }: AvatarProps): React.JSX.Element;
+    ({ as, href, image, size, status, subtitle, sx, textPosition, title, tooltipContent, tooltipSx, tooltipWrapperId, ...rest }: AvatarProps): React.JSX.Element;
     displayName: string;
     Group: {
         ({ children, numDisplayed, total }: AvatarGroupProps): React.JSX.Element;

package/dist/components/iconography/avatar/avatar.js

@@ -1,8 +1,9 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
-import { Box, H, P } from '../../';
+import { Box, H, P, Portal } from '../../';
 import { Approved, Busy, Declined, Default, Focus, Locked, Offline, Online, Subscribed, } from './icons';
+import { useHover } from '../../../';
 /**
  * Lookup tables for sizes
  */
@@ -57,16 +58,14 @@ const iconOffsetY = {
  *
  * Avatar
  */
-const Avatar = ({ as = 'button', href, image, size = 64, status, subtitle, sx, textPosition = 'left', title, tooltipContent, ...rest }) => {
+const Avatar = ({ as = 'button', href, image, size = 64, status, subtitle, sx, textPosition = 'left', title, tooltipContent, tooltipSx, tooltipWrapperId = 'avatar-tooltip', ...rest }) => {
     const [displayDefault, setDisplayDefault] = React.useState(false);
+    const componentWrapperRef = React.useRef(null);
+    const tooltipRef = React.useRef(null);
+    const hovered = useHover(componentWrapperRef);
+    const tooltipHovered = useHover(tooltipRef);
     const Icon = iconReference?.[status ?? 'none'];
-    return (React.createElement(Box, { "$align": "center", "$gap": 18, sx: `
-        position: relative; 
-        &:hover > div:nth-of-type(2) {
-          display: flex;
-        }
-        ${sx}
-      `, ...rest },
+    return (React.createElement(ComponentWrapper, { id: "avatar-tooltip", ref: componentWrapperRef, "$sx": sx, ...rest },
         React.createElement(Container, { as: as, "$size": size, href: href },
             !displayDefault && (React.createElement("img", { src: image ?? '', onError: () => setDisplayDefault(true) })),
             displayDefault && React.createElement(Default, null),
@@ -75,9 +74,26 @@ const Avatar = ({ as = 'button', href, image, size = 64, status, subtitle, sx, t
         (title || subtitle) && (React.createElement(TextContainer, { "$textPosition": textPosition },
             title && (React.createElement(H, { as: "h3", "$bold": true, "$color": "grey-2", "$textClampLines": 1, sx: "font-size: 26px;" }, title)),
             subtitle && (React.createElement(P, { "$color": "grey-4", "$textClampLines": 1 }, subtitle)))),
-        tooltipContent && React.createElement(TooltipContainer, null, tooltipContent)));
+        tooltipContent && (React.createElement(Portal, { wrapperId: tooltipWrapperId },
+            React.createElement(TooltipContainer, { id: "tooltip-container", ref: tooltipRef, "$sx": `${hovered || tooltipHovered ? 'display: flex' : 'display: none'}; ${tooltipSx}` }, tooltipContent)))));
 };
 Avatar.displayName = 'Avatar';
+const ComponentWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  flex: none;
+  flex-flow: row;
+  flex-direction: row;
+  justify-content: normal;
+  background-color: var(--page-bg);
+  box-shadow: none;
+  margin: 0px;
+  padding: 0px;
+  position: relative;
+
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
 const Container = styled.div `
   flex-shrink: 0;
   display: flex;
@@ -115,13 +131,14 @@ const TextContainer = styled.div `
   order: ${({ $textPosition }) => ($textPosition === 'left' ? -1 : 1)};
 `;
 const TooltipContainer = styled.div `
-  display: none;
   position: absolute;
   top: 100%;
-  left: -50%;
+  z-index: 250;
   background-color: var(--color-white);
   border-radius: 24px;
   box-shadow: var(--elevation-2);
+  // pointer-events: none;
+  ${({ $sx }) => ($sx ? $sx : '')}
 `;
 const Group = ({ children, numDisplayed, total }) => {
     let size = 0;

package/dist/components/index.d.ts

@@ -3,6 +3,7 @@ export * from './atoms';
 export * from './card';
 export * from './editor';
 export * from './feedback';
+export * from './hooks';
 export * from './iconography';
 export * from './input';
 export * from './navigation';

package/dist/components/index.js

@@ -3,6 +3,7 @@ export * from './atoms';
 export * from './card';
 export * from './editor';
 export * from './feedback';
+export * from './hooks';
 export * from './iconography';
 export * from './input';
 export * from './navigation';

package/dist/components/surfaces/post/post.js

@@ -2,18 +2,18 @@
 import React from 'react';
 import styled from 'styled-components';
 import { H, P } from '../../atoms/typography';
+import { TimeAgo } from '../../atoms/time_ago/time_ago';
 import { Button } from '../../actions/button';
 import { Avatar } from '../../iconography/avatar';
 import { Lock } from '../../../icons';
-import { abbrTimeBeforeDate } from './helpers';
 export const Post = ({ actions, author, authorActive, authorHref, authorImage, avatarTooltipContent, children, content, createdDate, dropdown, hasComments, id, images, isPaywalled = false, onJoin, }) => {
     const componentId = React.useId();
     const _actions = React.Children.toArray(actions);
     const _comments = React.Children.toArray(children);
-    const subtitle = abbrTimeBeforeDate(new Date(createdDate));
     return (React.createElement(Wrapper, { id: id },
         React.createElement(Header, null,
-            React.createElement(Avatar, { href: authorHref, image: authorImage, size: 64, status: authorActive ? 'online' : undefined, subtitle: React.createElement(P, { as: "span", sx: "vertical-align: top;", "$fontSize": 14, "$lineHeight": 20 }, subtitle), title: React.createElement(H, { as: "span", "$bold": true, "$fontSize": 18, "$lineHeight": 26 }, author), textPosition: "right", tooltipContent: avatarTooltipContent }),
+            React.createElement(Avatar, { href: authorHref, image: authorImage, size: 64, status: authorActive ? 'online' : undefined, subtitle: React.createElement(P, { as: "span", sx: "vertical-align: top;", "$fontSize": 14, "$lineHeight": 20 },
+                    React.createElement(TimeAgo, { date: new Date(createdDate) })), title: React.createElement(H, { as: "span", "$bold": true, "$fontSize": 18, "$lineHeight": 26 }, author), textPosition: "right", tooltipContent: avatarTooltipContent }),
             dropdown),
         !!content?.length && (React.createElement("div", { style: { padding: 24 } },
             React.createElement(P, { "$textClampLines": isPaywalled ? 2 : undefined }, content))),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.2.102",
+  "version": "0.2.104",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {

package/dist/components/surfaces/post/helpers.d.ts

@@ -1 +0,0 @@
-export declare const abbrTimeBeforeDate: (date: Date) => string;