@soul-refiner/design-system 0.2.135 → 1.0.0

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/navigation/breadcrumb/breadcrumb.js

@@ -1,7 +1,6 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
-import Link from 'next/link';
 import { Box } from '../../';
 import { ChevronLeft, ChevronRight } from '../../../icons';
 const Breadcrumb = ({ children, previous }) => {
@@ -29,14 +28,14 @@ const Breadcrumb = ({ children, previous }) => {
     })));
 };
 const BreadcrumbItem = ({ avatar, children, href, icon, iconColor = 'blue', onClick, }) => {
-    return (React.createElement(Item, { href: href || '#', onClick: onClick, "$type": icon ? 'icon' : avatar ? 'avatar' : 'text', "$iconColor": `hue-${iconColor}-1`, scroll: false },
+    return (React.createElement(Item, { as: href ? 'a' : 'div', href: href, onClick: onClick, "$type": icon ? 'icon' : avatar ? 'avatar' : 'text', "$iconColor": `hue-${iconColor}-1` },
         icon && (React.createElement(IconWrapper, { "$color": iconColor }, React.cloneElement(icon, { color: `hue-${iconColor}-1`, size: 24 }))),
         avatar,
         children));
 };
 Breadcrumb.Item = BreadcrumbItem;
 BreadcrumbItem.displayName = 'Breadcrumb.Item';
-const Item = styled(Link) `
+const Item = styled.div `
   display: flex;
   flex-flow: row nowrap;
   align-items: center;

package/dist/components/navigation/inner/inner.d.ts

@@ -9,7 +9,7 @@ declare const InnerNav: {
         displayName: string;
     };
     Dropdown: {
-        ({ children, icon, label, open, sx, onClick, }: InnerNavDropdownProps): React.JSX.Element;
+        ({ children, href, icon, label, open, sx, onClick, }: InnerNavDropdownProps): React.JSX.Element;
         displayName: string;
     };
     BackButton: {
@@ -63,6 +63,7 @@ export interface InnerNavItemProps {
  * Dropdown
  */
 export interface InnerNavDropdownProps extends React.PropsWithChildren {
+    href?: string;
     icon?: React.ReactElement;
     label: React.ReactNode;
     open: boolean;

package/dist/components/navigation/inner/inner.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import styled from 'styled-components';
-import Link from 'next/link';
 import { Button } from '../../../components/actions/button';
 import { Drawer } from '../../../components/surfaces/drawer';
 import { ChevronDown, ChevronLeft, ChevronUp, Plus } from '../../../icons';
@@ -54,11 +53,12 @@ const NavWrapper = styled.nav `
   border-right: 1px solid var(--color-grey-9);
 `;
 const InnerNavItem = ({ active, href, icon, label, sx }) => {
-    return (React.createElement(Item, { "$active": active, "$sx": sx, href: href || '#', scroll: false },
+    const isAnchor = !!href;
+    return (React.createElement(Item, { "$active": active, "$sx": sx, as: isAnchor ? 'a' : 'button', href: href },
         icon,
         label));
 };
-const Item = styled(Link) `
+const Item = styled.button `
   padding: 14px 16px;
   display: flex;
   gap: 16px;
@@ -85,9 +85,10 @@ const Item = styled(Link) `
 `;
 InnerNav.Item = InnerNavItem;
 InnerNavItem.displayName = 'InnerNav.Item';
-const InnerNavDropdown = ({ children, icon, label, open, sx, onClick, }) => {
+const InnerNavDropdown = ({ children, href, icon, label, open, sx, onClick, }) => {
+    const isAnchor = !!href;
     return (React.createElement(React.Fragment, null,
-        React.createElement(DropdownItem, { "$active": false, "$sx": sx, onClick: onClick },
+        React.createElement(Item, { "$active": false, "$sx": sx, as: isAnchor ? 'a' : 'button', href: !!onClick ? undefined : href, onClick: onClick },
             icon,
             React.createElement(DropdownTriggerWrapper, null,
                 label,
@@ -107,40 +108,15 @@ const DropdownTriggerWrapper = styled.div `
   align-items: center;
   flex: 1;
 `;
-const DropdownItem = styled.a `
-  padding: 14px 16px;
-  display: flex;
-  gap: 16px;
-  align-items: center;
-  border-radius: 8px;
-  font-family: var(--font-inter);
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 24px;
-  color: var(--color-blue-2);
-  cursor: pointer;
-  svg {
-    fill: var(--color-blue-2);
-  }
-  ${({ $active }) => $active
-    ? `
-    background-color: var(--color-primary-blue-3);`
-    : `
-    &:hover {
-      background-color: var(--color-primary-blue-4);
-    }`}
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
 InnerNav.Dropdown = InnerNavDropdown;
 InnerNavDropdown.displayName = 'InnerNav.Dropdown';
 const InnerNavBackButton = ({ href, label, sx }) => {
-    return (React.createElement(BackButton, { href: href, "$sx": sx, scroll: false },
+    return (React.createElement(BackButton, { href: href, "$sx": sx },
         React.createElement("div", null,
             React.createElement(ChevronLeft, { size: 24 })),
         label));
 };
-const BackButton = styled(Link) `
+const BackButton = styled.a `
   display: flex;
   align-items: center;
   gap: 8px;

package/dist/components/navigation/tabs/tabs.js

@@ -1,7 +1,6 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
-import Link from 'next/link';
 import { P } from '../../';
 const colorLookup = {
     blue: {
@@ -65,16 +64,17 @@ const Wrapper = styled.div `
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
 const Item = ({ active, color, disabled, href, icon, label, onClick, size = 'large', }) => {
+    const isAnchor = !!href;
     const inputColor = disabled ? 'grey' : color ? color : 'blue';
     const iconColor = colorLookup[inputColor].icon;
     const bgColor = colorLookup[inputColor].bg;
     const fontSize = size === 'large' ? 16 : size === 'medium' ? 14 : 12;
     const lineHeight = size === 'large' ? 24 : size === 'medium' ? 20 : 16;
-    return (React.createElement(Element, { onClick: !disabled && onClick ? onClick : undefined, href: href || '#', scroll: false, "$active": active, "$color": iconColor, "$disabled": disabled, "$hasIcon": !!icon, "$size": size },
+    return (React.createElement(Element, { as: isAnchor ? 'a' : 'div', href: href, onClick: !disabled && onClick ? onClick : undefined, "$active": active, "$color": iconColor, "$disabled": disabled, "$hasIcon": !!icon, "$size": size },
         icon && React.createElement(IconWrapper, { "$bg": bgColor }, icon),
         React.createElement(P, { "$fontSize": fontSize, "$lineHeight": lineHeight, "$semiBold": true }, label)));
 };
-const Element = styled(Link) `
+const Element = styled.div `
   position: relative;
   display: flex;
   align-items: center;

package/dist/components/surfaces/calendar_date/calendar_date.d.ts

@@ -6,6 +6,5 @@ export interface CalendarDateProps {
     startTime?: string;
     endTime?: string;
     sx?: string;
-    size?: 'small' | 'large';
 }
-export declare const CalendarDate: ({ monthAbbreviation, date, dayOfWeek, startTime, endTime, sx, size, }: CalendarDateProps) => React.JSX.Element;
+export declare const CalendarDate: ({ monthAbbreviation, date, dayOfWeek, startTime, endTime, sx, }: CalendarDateProps) => React.JSX.Element;

package/dist/components/surfaces/calendar_date/calendar_date.js

@@ -2,15 +2,13 @@
 import React from 'react';
 import styled from 'styled-components';
 import { H, P } from '../../atoms/typography';
-export const CalendarDate = ({ monthAbbreviation, date, dayOfWeek, startTime, endTime, sx, size = 'large', }) => {
+export const CalendarDate = ({ monthAbbreviation, date, dayOfWeek, startTime, endTime, sx, }) => {
     return (React.createElement(Container, { "$sx": sx },
-        React.createElement(CalendarContainer, { "$size": size },
-            React.createElement(MonthContainer, { "$size": size },
-                size === 'large' && (React.createElement(H.Seven, { "$color": "white", "$textAlign": "center", "$semiBold": true }, monthAbbreviation)),
-                size === 'small' && (React.createElement(P, { "$color": "white", "$textAlign": "center", "$fontSize": 14 }, monthAbbreviation))),
-            React.createElement(DateContainer, { "$size": size },
-                size === 'large' && (React.createElement(H.One, { "$textAlign": "center", "$semiBold": true }, date)),
-                size === 'small' && (React.createElement(H.Six, { "$color": "grey-2", "$textAlign": "center" }, date)))),
+        React.createElement(CalendarContainer, null,
+            React.createElement(MonthContainer, null,
+                React.createElement(H.Seven, { "$color": "white", "$textAlign": "center", sx: "font-weight: 600;" }, monthAbbreviation)),
+            React.createElement(DateContainer, null,
+                React.createElement(H.One, { "$textAlign": "center", sx: "font-weight: 600;" }, date))),
         dayOfWeek && startTime && endTime && (React.createElement(TimeContainer, null,
             React.createElement(P, { as: "span", "$color": "red-5" }, `${dayOfWeek}, ${startTime} -> ${endTime}`)))));
 };
@@ -24,21 +22,18 @@ const Container = styled.div `
 const CalendarContainer = styled.div `
   display: flex;
   flex-direction: column;
-
-  ${({ $size }) => ($size === 'large' ? 'width: 120px;' : 'width: 64px;')}
+  width: 120px;
 `;
 const MonthContainer = styled.div `
+  padding: 8px 16px;
   background-color: var(--color-red-5);
   border-radius: 16px 16px 0 0;
-
-  ${({ $size }) => $size === 'large' ? 'padding: 8px 16px;' : 'padding: 2px 8px;'}
 `;
 const DateContainer = styled.div `
+  padding: 8px 16px;
   background-color: white;
   border-radius: 0 0 16px 16px;
   box-shadow: var(--elevation-3);
-
-  ${({ $size }) => $size === 'large' ? 'padding: 8px 16px;' : 'padding: 2px 16px;'}
 `;
 const TimeContainer = styled.div `
   margin-top: 16px;

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

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

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

@@ -0,0 +1,26 @@
+export const abbrTimeBeforeDate = (date) => {
+    const now = new Date();
+    const diff = now.getTime() - date.getTime();
+    if (diff < 60000) {
+        // under 1 min
+        return 'Just now';
+    }
+    else if (diff < 3600000) {
+        // under one hour
+        const minutes = Math.floor(diff / 60000);
+        return `${minutes} ${minutes === 1 ? 'min' : 'mins'}`;
+    }
+    else if (diff < 86400000) {
+        // under one day
+        const hours = Math.floor(diff / 3600000);
+        return `${hours} ${hours === 1 ? 'hour' : 'hours'}`;
+    }
+    else if (diff < 604800000) {
+        // under one week
+        const days = Math.floor(diff / 86400000);
+        return `${days} ${days === 1 ? 'day' : 'days'}`;
+    }
+    else {
+        return date.toDateString().slice(4);
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.2.135",
+  "version": "1.0.0",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {
@@ -53,29 +53,29 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@emoji-mart/react": "^1.1.1",
-    "@udecode/plate": "^22.0.1",
-    "emoji-mart": "^5.5.2",
-    "next": "^13.5",
-    "react": "^18.2.0",
-    "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "^18.2.0",
-    "react-is": "^18.2.0",
-    "react-player": "^2.13.0",
-    "react-tooltip": "^5.18.0",
-    "scheduler": "^0.23.0",
-    "slate": "^0.94.1",
-    "slate-history": "^0.93.0",
-    "slate-hyperscript": "^0.77.0",
-    "slate-react": "^0.97.1",
-    "styled-components": "^6.0.0-rc.3"
+    "@emoji-mart/react": "~1.1.1",
+    "@udecode/plate": "~22.0.2",
+    "emoji-mart": "~5.5.2",
+    "next": "~13.5",
+    "react": "18.2.0",
+    "react-dnd": "~16.0.1",
+    "react-dnd-html5-backend": "~16.0.1",
+    "react-dom": "~18.2.0",
+    "react-is": "~18.2.0",
+    "react-player": "~2.13.0",
+    "react-tooltip": "~5.18.0",
+    "scheduler": "~0.23.0",
+    "slate": "~0.94.1",
+    "slate-history": "~0.93.0",
+    "slate-hyperscript": "~0.77.0",
+    "slate-react": "~0.97.1",
+    "styled-components": "~6.1.1"
   },
   "peerDependencies": {
-    "next": "^13.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-player": "^2.13.0",
-    "styled-components": "^6.0.0-rc.3"
+    "next": "~13.5",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "react-player": "~2.13.0",
+    "styled-components": "~6.1.1"
   }
 }