@soul-refiner/design-system 0.2.119 → 0.2.121

package/dist/components/card/action/action.js

@@ -1,12 +1,13 @@
 'use client';
 import React from 'react';
+import Image from 'next/image';
 import styled from 'styled-components';
 import { Box, H, P } from '../../';
 export const ActionCard = ({ actions, content, href, image, logo, subtitle, sx, title, }) => {
     const isAnchor = !!href;
     return (React.createElement(Wrapper, { as: isAnchor ? 'a' : 'div', href: href },
         React.createElement(Action, { "$backgroundImage": image, "$sx": sx },
-            React.createElement("img", { src: image, alt: "" }),
+            React.createElement(Image, { alt: "", height: 160, src: image, width: 310 }),
             React.createElement(Figcaption, null,
                 React.createElement(LogoWrapper, null, logo),
                 React.createElement(H, { as: "span", "$mediumBold": true, "$color": "grey-2", "$fontSize": 18, "$lineHeight": 26 }, title),

package/dist/components/card/audio/audio.js

@@ -1,5 +1,6 @@
 'use client';
 import React from 'react';
+import Image from 'next/image';
 import styled from 'styled-components';
 import { Box, H, P, Rate } from '../../';
 export const AudioEpisodeCard = ({ actions, actionDropdown, content, cta, href, image, logo, numRating, rating, subtitle, supportLabel, sx, title, }) => {
@@ -7,7 +8,7 @@ export const AudioEpisodeCard = ({ actions, actionDropdown, content, cta, href,
     return (React.createElement(Wrapper, { "$sx": sx, href: href },
         React.createElement(Figure, null,
             actionDropdown && React.createElement(DropdownWrapper, null, actionDropdown),
-            React.createElement("img", { className: "thumbnail", src: image, alt: "" }),
+            React.createElement(Image, { alt: "", className: "thumbnail", height: 228, src: image, width: 228 }),
             React.createElement(Figcaption, null,
                 React.createElement(Box, { "$display": "block", className: "hidden" }, cta),
                 React.createElement(Box, { "$align": "center", "$dir": "row", "$gap": 16 },
@@ -86,6 +87,7 @@ const Figure = styled.figure `
 
   .thumbnail {
     border-radius: 16px;
+    object-fit: cover;
     position: relative;
     z-index: -1;
     width: 100%;

package/dist/components/card/feature/feature.js

@@ -1,5 +1,6 @@
 'use client';
 import React from 'react';
+import Image from 'next/image';
 import styled from 'styled-components';
 import { Box, Button, Modal } from '../../';
 import { Camera, Checkmark, Close, Pencil, Trash } from '../../../icons';
@@ -27,7 +28,7 @@ export const FeatureCard = ({ content = '', editable, href, image, onDelete, onS
     const isLink = !!href;
     return (React.createElement(Wrapper, { as: isLink ? 'a' : 'div', href: href },
         React.createElement(Figure, { "$editing": editing, "$isLink": isLink, "$sx": sx },
-            React.createElement("img", { alt: title, src: image }),
+            React.createElement(Image, { alt: title, height: 352, src: image, width: 352 }),
             !editing && (React.createElement(Title, null,
                 editingTitle,
                 React.createElement("figure", null,

package/dist/components/card/meeting/meeting.js

@@ -1,5 +1,6 @@
 'use client';
 import React from 'react';
+import Image from 'next/image';
 import styled from 'styled-components';
 import { Box, H, P, Modal, Button, Dropdown } from '../..';
 import { Calendar, GraduationCap, Clock, Pin, ForwardBold, StarFilled, Star, EllipsisHorizontal, } from '../../../icons';
@@ -34,7 +35,7 @@ export const MeetingCard = ({ href, image, sx, title, actions, course, startDate
         });
     return (React.createElement(Wrapper, { "$isLink": !!href, "$sx": sx, as: href ? 'a' : 'div', href: href },
         React.createElement(Figure, null,
-            React.createElement("img", { src: image, alt: "" }),
+            React.createElement(Image, { alt: "", height: 160, src: image, width: 312 }),
             React.createElement(OverlayTopContainer, { id: "overlayTop" }, dotsActions && !!dotsActions.length && (React.createElement(Dropdown, { hasArrow: true, maintainState: false, options: dotsActions, trigger: React.createElement(Button, { icon: React.createElement(EllipsisHorizontal, null), showChevron: false, type: "outlined", size: "small", className: "icon" }), onClick: (e) => e.preventDefault() }))),
             React.createElement(OverlayBottomContainer, { id: "overlayBottom" },
                 shareModal && (React.createElement(Modal, null,
@@ -103,6 +104,7 @@ const MeetingInformation = styled.div `
   flex-direction: column;
   gap: 16px;
   margin-top: 16px;
+  height: 128px;
 `;
 const Figure = styled.figure `
   position: relative;

package/dist/components/card/person/person.js

@@ -1,5 +1,6 @@
 'use client';
 import React from 'react';
+import Image from 'next/image';
 import styled from 'styled-components';
 import { Box, Button, Dropdown, H, P } from '../../';
 import { EllipsisHorizontal } from '../../../icons';
@@ -7,7 +8,7 @@ export const PersonCard = ({ actions, dotsActions, href, image, subtitle, sx, ti
     return (React.createElement(Wrapper, { "$image": image, as: href ? 'a' : 'div', href: href },
         React.createElement(Person, { "$sx": sx },
             dotsActions && !!dotsActions.length && (React.createElement(Dropdown, { containerSx: "", hasArrow: true, maintainState: false, onClick: (e) => e.preventDefault(), options: dotsActions, sx: "position: absolute; top: 8px; right: 8px; z-index: 24; display: none;", trigger: React.createElement(Button, { className: "icon", icon: React.createElement(EllipsisHorizontal, null), onClick: (event) => event.stopPropagation(), showChevron: false, size: "small", type: "outlined" }) })),
-            React.createElement("img", { src: image, alt: "" }),
+            React.createElement(Image, { alt: "", height: 400, src: image, width: 312 }),
             React.createElement(Shadow, null),
             React.createElement(Figcaption, null,
                 React.createElement(H, { as: "span", "$bold": true, "$color": "white", "$fontSize": 24, "$lineHeight": 36 }, title),

package/dist/components/card/regular/regular.js

@@ -1,10 +1,11 @@
 'use client';
 import React from 'react';
+import Image from 'next/image';
 import styled from 'styled-components';
 import { Box } from '../../';
 export const RegularCard = ({ children, href, image, sx, }) => {
     return (React.createElement(Wrapper, { "$isLink": !!href, "$sx": sx, as: href ? 'a' : 'div', href: href },
-        React.createElement("img", { src: image, alt: "" }),
+        React.createElement(Image, { alt: "", height: 352, src: image, width: 352 }),
         React.createElement(Box, { "$dir": "column", "$padding": 24 }, children)));
 };
 const Wrapper = styled.div `

package/dist/components/card/video/video.js

@@ -1,5 +1,6 @@
 'use client';
 import React from 'react';
+import Image from 'next/image';
 import styled from 'styled-components';
 import { Box, H, P, Rate } from '../../';
 export const VideoEpisodeCard = ({ actions, actionDropdown, content, cta, href, image, logo, numRating, rating, subtitle, supportLabel, sx, title, }) => {
@@ -7,7 +8,7 @@ export const VideoEpisodeCard = ({ actions, actionDropdown, content, cta, href,
     return (React.createElement(Wrapper, { "$sx": sx, href: href },
         React.createElement(Figure, null,
             actionDropdown && React.createElement(DropdownWrapper, null, actionDropdown),
-            React.createElement("img", { className: "thumbnail", src: image, alt: "" }),
+            React.createElement(Image, { alt: "", className: "thumbnail", height: 228, src: image, width: 314 }),
             React.createElement(Figcaption, null,
                 React.createElement(Box, { "$display": "block", className: "hidden" }, cta),
                 React.createElement(Box, { "$align": "center", "$dir": "row", "$gap": 16 },
@@ -78,6 +79,7 @@ const Figure = styled.figure `
 
   .thumbnail {
     position: relative;
+    object-fit: cover;
     z-index: -1;
     width: 100%;
     aspect-ratio: 379 / 275;

package/dist/components/card/written/written.js

@@ -1,5 +1,6 @@
 'use client';
 import React from 'react';
+import Image from 'next/image';
 import styled from 'styled-components';
 import { Box, H, P, Rate } from '../../';
 export const WrittenEpisodeCard = ({ actions, actionDropdown, content, cta, href, image, logo, numRating, rating, subtitle, supportLabel, sx, title, }) => {
@@ -7,7 +8,7 @@ export const WrittenEpisodeCard = ({ actions, actionDropdown, content, cta, href
     return (React.createElement(Wrapper, { "$sx": sx, href: href },
         React.createElement(Figure, null,
             actionDropdown && React.createElement(DropdownWrapper, null, actionDropdown),
-            React.createElement("img", { className: "thumbnail", src: image, alt: "" }),
+            React.createElement(Image, { alt: "", className: "thumbnail", height: 228, src: image, width: 176 }),
             React.createElement(Figcaption, null,
                 React.createElement(Box, { "$display": "block", className: "hidden" }, cta),
                 React.createElement(Box, { "$align": "center", "$dir": "row", "$gap": 16 },
@@ -87,6 +88,7 @@ const Figure = styled.figure `
 
   .thumbnail {
     border-radius: 16px;
+    object-fit: cover;
     position: relative;
     z-index: -1;
     width: 100%;

package/dist/components/feedback/banner/banner.d.ts

@@ -6,6 +6,9 @@ export interface BannerProps {
     onClose?: () => void;
     title: string;
     type: BannerTypes;
+    setContentInNewLine?: boolean;
+    additionalContent?: string;
+    sx?: string;
 }
-export declare const Banner: ({ content, href, onClose, title, type, }: BannerProps) => React.JSX.Element;
+export declare const Banner: ({ content, href, onClose, title, type, setContentInNewLine, additionalContent, sx, }: BannerProps) => React.JSX.Element;
 export {};

package/dist/components/feedback/banner/banner.js

@@ -4,18 +4,19 @@ import styled from 'styled-components';
 import { Styles } from '../../../common';
 import { Box, Button, P } from '../../';
 import { AlertCircle, AlertOctogon, AlertTriangle, Close, Information, } from '../../../icons';
-export const Banner = ({ content, href, onClose, title, type, }) => {
+export const Banner = ({ content, href, onClose, title, type, setContentInNewLine = false, additionalContent, sx, }) => {
     const iconLookup = {
         error: React.createElement(AlertOctogon, { size: 24 }),
         info: React.createElement(Information, { size: 24 }),
         success: React.createElement(AlertCircle, { size: 24 }),
         warning: React.createElement(AlertTriangle, { size: 24 }),
     };
-    return (React.createElement(Wrapper, { as: "output", "$align": "center", "$dir": "row", "$gap": 8, "$type": type },
+    return (React.createElement(Wrapper, { as: "output", "$dir": "row", "$gap": 8, "$type": type, "$sx": sx },
         iconLookup[type],
-        React.createElement(Box, { "$dir": "row", "$gap": 4, "$align": "center" },
+        React.createElement(Box, { "$dir": setContentInNewLine ? 'column' : 'row', "$gap": 4 },
             React.createElement(P, { as: "span", "$semiBold": true }, title),
-            React.createElement(P, { as: "span" }, content),
+            React.createElement(P, { as: "span", sx: setContentInNewLine ? 'margin-top: 12px;' : '' }, content),
+            additionalContent && React.createElement(P, { as: "span" }, additionalContent),
             href && (React.createElement(P, { as: "a", href: href, "$color": "primary-blue-2" }, "Read more"))),
         onClose && (React.createElement(Button, { icon: React.createElement(Close, { size: 24 }), onClick: onClose, type: "special" }))));
 };
@@ -74,4 +75,6 @@ const Wrapper = styled.output `
   }
 
   ${Styles.flex}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
 `;

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.js

@@ -1,5 +1,6 @@
 'use client';
 import React from 'react';
+import Image from 'next/image';
 import styled from 'styled-components';
 import { Box, H, P } from '../../';
 import { Approved, Busy, Declined, Default, Focus, Locked, Offline, Online, Subscribed, } from './icons';
@@ -70,7 +71,7 @@ const Avatar = ({ as = 'button', href, image, size = 64, status, subtitle, sx, t
         ${sx}
       `, ...rest },
         React.createElement(Container, { as: as, "$size": size, href: href },
-            !displayDefault && (React.createElement("img", { src: image ?? '', onError: () => setDisplayDefault(true) })),
+            !displayDefault && (React.createElement(Image, { alt: "avatar image", height: size, onError: () => setDisplayDefault(true), src: image ?? '', width: size })),
             displayDefault && React.createElement(Default, null),
             React.createElement("div", null,
                 React.createElement(Icon, null))),

package/dist/components/input/filter/filter.js

@@ -18,7 +18,7 @@ const Filter = ({ closeOnBlur = true, disabled, graphic, label = '', sx, trigger
         }
     }, [disabled]);
     React.useEffect(() => {
-        if (triggerType === 'outlined' && !defaultValue) {
+        if (triggerType === 'outlined' && defaultValue === undefined) {
             setSelected(multiple
                 ? [options[0]?.value]
                 : options[0]?.value);

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/dist/components/surfaces/post/post.js

@@ -1,5 +1,6 @@
 'use client';
 import React from 'react';
+import Image from 'next/image';
 import styled from 'styled-components';
 import { H, P } from '../../atoms/typography';
 import { TimeAgo } from '../../atoms/time_ago/time_ago';
@@ -19,7 +20,7 @@ export const Post = ({ actions, author, authorActive, authorHref, authorImage, a
             React.createElement(P, { "$textClampLines": isPaywalled ? 2 : undefined }, content))),
         !!images?.length && (React.createElement(ImagesWrapper, { "$numImages": images.length, "$isPaywalled": isPaywalled },
             images.slice(0, 4).map((url, i) => (React.createElement(ImageWrapper, { key: `${componentId}${url.slice(0, 15)}${i}` },
-                React.createElement("img", { src: url, alt: "" })))),
+                React.createElement(Image, { alt: "", fill: true, src: url })))),
             images.length > 4 && (React.createElement(H, { as: "p", className: "more-than", "$color": "grey-10", "$fontSize": 28, "$lineHeight": 36, "$semiBold": true },
                 "+",
                 images.length - 4)))),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.2.119",
+  "version": "0.2.121",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {
@@ -29,25 +29,20 @@
     "@storybook/addon-links": "^7.2.1",
     "@storybook/addons": "^7.2.1",
     "@storybook/blocks": "^7.2.1",
+    "@storybook/nextjs": "^7.5.3",
     "@storybook/react": "^7.2.1",
-    "@storybook/react-vite": "^7.2.1",
     "@storybook/testing-library": "^0.2.0",
     "@types/react-dom": "18.2.0",
     "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^5.59.5",
-    "@typescript-eslint/parser": "^5.59.5",
-    "@vitejs/plugin-react": "^4.0.0",
     "chromatic": "^6.17.4",
-    "eslint": "^8.40.0",
     "husky": "^8.0.0",
     "prettier": "^2.8.8",
     "pretty-quick": "^3.1.3",
     "prop-types": "^15.8.1",
-    "storybook": "^7.2.1",
+    "storybook": "^7.5.3",
     "tsconfig-paths-webpack-plugin": "^4.0.1",
     "typescript": "^5.0.4",
-    "vite": "^4.3.5",
-    "vite-tsconfig-paths": "^4.2.0"
+    "webpack": "^5.89.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json",
@@ -61,6 +56,7 @@
     "@emoji-mart/react": "^1.1.1",
     "@udecode/plate": "^22.0.1",
     "emoji-mart": "^5.5.2",
+    "next": "13.4.10",
     "react": "^18.2.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
@@ -74,5 +70,5 @@
     "slate-react": "^0.97.1",
     "styled-components": "^6.0.0-rc.3"
   },
-  "packageManager": "yarn@3.6.1"
+  "packageManager": "yarn@3.4.1"
 }