@soul-refiner/design-system 2.0.0-alpha.0 → 2.0.0-alpha.10

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

@@ -0,0 +1,238 @@
+"use client";
+import React__default from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { styled } from 'styled-components';
+import { H } from '../../atoms/typography/heading.js';
+import { P } from '../../atoms/typography/paragraph.js';
+import '../../atoms/box/box.js';
+import '../../atoms/typography/display.js';
+import '../../atoms/typography/typography.js';
+import { TimeAgo } from '../../atoms/time_ago/time_ago.js';
+import { Button } from '../../actions/button/button.js';
+import { Avatar } from '../../iconography/avatar/avatar.js';
+import { Lock } from '../../../icons/security/lock.js';
+import { Modal } from '../modal/modal.js';
+import { ChevronLeft } from '../../../icons/arrow/chevron_left.js';
+import { ChevronRight } from '../../../icons/arrow/chevron_right.js';
+
+const Post = ({ actions, author, authorActive, authorHref, authorImage, avatarTooltipContent, avatarTooltipSx, children, content, createdDate, dropdown, hasComments, id, images, isPaywalled = false, onJoin, }) => {
+    const componentId = React__default.useId();
+    const [curr, setCurr] = React__default.useState(-1);
+    const [modalContentSize, setModalContentSize] = React__default.useState({
+        x: '30vw',
+        y: '30vh',
+    });
+    React__default.useEffect(() => {
+        const handleKeyEvent = (event) => {
+            if (event.key === 'ArrowLeft') {
+                handleDecrement();
+            }
+            else if (event.key === 'ArrowRight') {
+                handleIncrement();
+            }
+            else if (event.key === 'Escape' || event.key === 'Enter') {
+                setCurr(-1);
+            }
+        };
+        if (typeof document !== 'undefined' && !!images?.length) {
+            document.addEventListener('keydown', handleKeyEvent);
+        }
+        return () => {
+            images?.length &&
+                document.removeEventListener('keydown', handleKeyEvent);
+        };
+    }, []);
+    const _actions = React__default.Children.toArray(actions);
+    const _comments = React__default.Children.toArray(children);
+    const handleImageLoad = (event) => {
+        const { naturalHeight, naturalWidth } = event.target;
+        let x = `${naturalWidth}px`;
+        let y = `${naturalHeight}px`;
+        // if natural size is smaller than window height and width
+        if (window?.innerHeight < naturalHeight &&
+            window?.innerWidth < naturalWidth) {
+            x = `${Math.floor((window.innerHeight * 0.95 * naturalWidth) / naturalHeight)}px`;
+            y = `${Math.round((window.innerWidth * 0.95 * naturalHeight) / naturalWidth)}px`;
+            // just smaller than height
+        }
+        else if (window?.innerHeight < naturalHeight) {
+            x = `${Math.floor((window.innerHeight * 0.95 * naturalWidth) / naturalHeight)}px`;
+            y = '95vh';
+            // just smaller than width
+        }
+        else if (window?.innerWidth < naturalWidth) {
+            x = '95vw';
+            y = `${Math.round((window.innerWidth * 0.95 * naturalHeight) / naturalWidth)}px`;
+        }
+        setModalContentSize({ x, y });
+    };
+    const handleIncrement = () => {
+        setCurr((prev) => {
+            if (images?.length && prev !== images.length - 1) {
+                return prev + 1;
+            }
+            else {
+                return prev;
+            }
+        });
+    };
+    const handleDecrement = () => {
+        setCurr((prev) => {
+            if (images?.length && prev !== 0) {
+                return prev - 1;
+            }
+            else {
+                return prev;
+            }
+        });
+    };
+    return (React__default.createElement(Wrapper, { id: id },
+        curr > -1 && !!images?.[curr] && (React__default.createElement(Modal, { alwaysRender: false, controlledOpen: true, onChange: (open) => !open && setCurr(-1) },
+            React__default.createElement(Modal.Content, { sx: `
+            position: relative; 
+            height: ${modalContentSize.y}; 
+            width: ${modalContentSize.x};
+            margin: 0 auto;
+            ` },
+                React__default.createElement(NavArrow, { "$side": "left", "$visible": curr !== 0, onClick: handleDecrement },
+                    React__default.createElement(ChevronLeft, { color: "white", size: 48 })),
+                React__default.createElement(Image, { alt: "", fill: true, quality: 100, onLoad: handleImageLoad, priority: true, sizes: "100vw", src: images[curr], style: { objectFit: 'cover' } }),
+                React__default.createElement(NavArrow, { "$side": "right", "$visible": curr !== images.length - 1, onClick: handleIncrement },
+                    React__default.createElement(ChevronRight, { color: "white", size: 48 }))))),
+        React__default.createElement(Header, null,
+            React__default.createElement(Avatar, { as: !!authorHref ? Link : 'button', href: authorHref, image: authorImage, size: 64, status: authorActive ? 'online' : undefined, subtitle: React__default.createElement(P, { as: "span", sx: "vertical-align: top;", "$fontSize": 14, "$lineHeight": 20 },
+                    React__default.createElement(TimeAgo, { date: new Date(createdDate) })), title: React__default.createElement(H, { as: "span", "$bold": true, "$fontSize": 18, "$lineHeight": 26 }, author), textPosition: "right", tooltipContent: avatarTooltipContent, tooltipSx: avatarTooltipSx, sx: !!authorHref ? 'img { cursor: pointer; }' : undefined }),
+            dropdown),
+        !!content?.length && (React__default.createElement("div", { style: { padding: '16px 24px' } },
+            React__default.createElement(P, { "$textClampLines": isPaywalled ? 2 : undefined }, content))),
+        !!images?.length && (React__default.createElement(ImagesWrapper, { "$numImages": images.length, "$isPaywalled": isPaywalled },
+            images.slice(0, 4).map((url, i) => (React__default.createElement(ImageWrapper, { key: `${componentId}${url.slice(0, 15)}${i}` },
+                React__default.createElement(Image, { alt: "", fill: true, onClick: () => setCurr(i), quality: 100, src: url, style: { cursor: 'pointer' } })))),
+            images.length > 4 && (React__default.createElement(H, { as: "p", className: "more-than", "$color": "grey-10", "$fontSize": 28, "$lineHeight": 36, "$semiBold": true },
+                "+",
+                images.length - 4)))),
+        !!images?.length && isPaywalled && (React__default.createElement(PaywallWrapper, null,
+            React__default.createElement(Lock, { size: 40, color: "grey-7" }),
+            React__default.createElement(P, { "$fontSize": 14, "$bold": true, "$lineHeight": 20, "$color": "white" },
+                "Become a member",
+                React__default.createElement("br", null),
+                "to unlock this post"),
+            React__default.createElement(Button, { onClick: onJoin, size: "small", sx: "width: 213px;", type: "outlined" }, "Join now"))),
+        !!_actions.length && (React__default.createElement(ActionsWrapper, null, !isPaywalled && _actions)),
+        hasComments && !!_comments.length && (React__default.createElement(CommentWrapper, null, _comments))));
+};
+const Wrapper = styled.div `
+  position: relative;
+  max-width: 700px;
+  width: 100%;
+  background-color: var(--color-white);
+  border-radius: 24px;
+  box-shadow: var(--elevation-7);
+
+  label > div {
+    box-shadow: var(--elevation-6);
+    border-radius: 16px;
+  }
+`;
+const Header = styled.div `
+  padding: 16px 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  border-bottom: 1px solid var(--color-grey-9);
+`;
+const ImagesWrapper = styled.div `
+  position: relative;
+  display: flex;
+  gap: 8px;
+  flex-flow: row wrap;
+  justify-content: space-between;
+
+  @media screen and (max-width: 532px) {
+    overflow-y: auto;
+  }
+
+  .more-than {
+    position: absolute;
+    bottom: 94px;
+    right: 154px;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
+  }
+
+  ${({ $numImages }) => $numImages > 1
+    ? `
+    div {
+      min-width: calc(50% - 4px);
+      max-width: calc(50% - 4px);
+
+      flex:1;
+      img {
+        object-fit: cover;
+        width: 100%;
+        height: 100%;
+      }
+    }`
+    : `
+    div > img {
+      object-fit: contain;
+      width: 100%;
+      height: 100%;
+    }
+    `}
+
+  ${({ $isPaywalled }) => $isPaywalled
+    ? /** TODO REMOVE USER CAN CHANGE -> SECURITY */
+        `
+    filter: blur(10px) brightness(0.6);
+    clip-path: inset(0px 0px 0px 0px);`
+    : ''}
+`;
+const ImageWrapper = styled.div `
+  position: relative;
+  aspect-ratio: 700 / 427;
+  flex: 1;
+  min-width: min(227px, 80vw);
+`;
+const PaywallWrapper = styled.div `
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: center;
+  top: 310px;
+  left: 242px;
+`;
+const ActionsWrapper = styled.div `
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 24px;
+`;
+const CommentWrapper = styled.div `
+  padding: 24px;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 24px;
+`;
+const NavArrow = styled.button `
+  width: 48px;
+  height: 150px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  z-index: 100;
+  top: calc(50vh - 75px);
+  background-color: rgba(0, 0, 0, 0.5);
+  ${({ $side }) => $side}: 0;
+  border-radius: ${({ $side }) => $side === 'left' ? '0 12px 12px 0' : '12px 0 0 12px'};
+  ${({ $visible }) => $visible
+    ? 'visibility: visible; cursor: pointer;'
+    : 'visibility: hidden; pointer-events: none;'}
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+`;
+
+export { Post };

package/dist/src/components/table/table/table.js

@@ -0,0 +1,186 @@
+"use client";
+import React__default from 'react';
+import { styled } from 'styled-components';
+import { Box } from '../../atoms/box/box.js';
+
+const Table = ({ border = true, children, compact, footer, header, separated, striped, sx, padding = 32, }) => {
+    return (React__default.createElement(Box, { "$backgroundColor": "white", "$borderRadius": "large", "$display": "flex", "$dir": "column", "$gap": 32, "$padding": padding, sx: compact ? 'width: fit-content;' : '' },
+        !!header && header,
+        React__default.createElement(Box, { "$borderRadius": "small", sx: border ? 'border: 1px solid var(--color-grey-8);' : '' },
+            React__default.createElement(TableElement, { "$compact": compact, "$separated": separated, "$striped": striped, "$sx": sx }, children)),
+        !!footer && footer));
+};
+const TableElement = styled.table `
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  ${({ $compact }) => ($compact ? 'width: fit-content;' : '')}
+  ${({ $separated }) => $separated
+    ? `
+    & > tbody > * {
+      border-bottom: 1px solid var(--color-grey-9);
+      &:last-child {
+        border-bottom: none;
+      }
+    }`
+    : ''}
+  ${({ $striped }) => $striped
+    ? `
+    & > tbody > *:nth-of-type(even) {
+      background-color: var(--color-grey-10);
+    }`
+    : ''}
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+/********************************************************
+ *  Table Head
+ */
+const Head = ({ children, ...rest }) => {
+    return React__default.createElement(HeadElement, { ...rest }, children);
+};
+const HeadElement = styled.thead `
+  tr {
+    background-color: var(--color-grey-10);
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+
+    & > *:first-of-type {
+      border-top-left-radius: 8px;
+    }
+
+    & > *:last-of-type {
+      border-top-right-radius: 8px;
+    }
+  }
+`;
+Head.displayName = 'Table.Head';
+Table.Head = Head;
+/********************************************************
+ *  Table Body
+ */
+const Body = ({ children, ...rest }) => {
+    return React__default.createElement(BodyElement, { ...rest }, children);
+};
+const BodyElement = styled.tbody `
+  & > tr:last-of-type {
+    & > *:first-child {
+      border-bottom-left-radius: 8px;
+    }
+
+    & > *:last-child {
+      border-bottom-right-radius: 8px;
+    }
+  }
+`;
+Body.displayName = 'Table.Body';
+Table.Body = Body;
+/********************************************************
+ *  Table Foot
+ */
+const Foot = ({ children, ...rest }) => {
+    return React__default.createElement("tfoot", { ...rest }, children);
+};
+Foot.displayName = 'Table.Foot';
+Table.Footer = Foot;
+const Row = ({ children, disabled, href, hoverable = false, onClick, selected, sx, ...rest }) => {
+    const handleClick = href
+        ? (event) => {
+            if (event.metaKey || event.ctrlKey) {
+                const win = window.open(href, '_blank');
+                win?.focus();
+            }
+            else {
+                window.location.href = href;
+            }
+        }
+        : onClick
+            ? (event) => {
+                onClick(event);
+            }
+            : undefined;
+    return (React__default.createElement(RowElement, { onClick: handleClick, "$disabled": disabled, "$hoverable": hoverable, "$isAnchor": !!href, "$selected": selected, "$sx": sx, ...rest }, children));
+};
+const RowElement = styled.tr `
+  display: table-row;
+
+  ${({ $disabled }) => $disabled
+    ? `
+    background-color: var(--color-grey-9) !important;
+    color: var(--color-grey-7);
+    & > * {
+      color: var(--color-grey-7) !important;
+    }`
+    : ''}
+
+  ${({ $disabled, $hoverable }) => !$disabled && $hoverable ? 'background-color: var(--color-grey-9);' : ''}
+
+  ${({ $disabled, $selected }) => !$disabled && $selected ? 'background-color: var(--color-grey-8;' : ''}
+
+  ${({ $disabled, $isAnchor }) => !$disabled && $isAnchor
+    ? `
+    cursor: pointer;
+    padding-right: 24px;
+
+    &:hover {
+      background-color: var(--color-grey-10);
+
+      & > td:last-child {
+        position: relative;
+      }
+      & > td:last-child::after {
+        content: "❯";
+        color: var(--color-blue-3);
+        position: absolute;
+        right: 12px;
+        top: calc(50% - 11px);
+      }
+    }`
+    : ''}
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+Row.displayName = 'Table.Row';
+Table.Row = Row;
+const Cell = ({ children, lines, padding = '16px 24px', sx, textAlign = 'left', verticalAlign = 'middle', width, }) => {
+    const percentageWidth = width ? width * (1 / 16) + '%' : undefined;
+    return (React__default.createElement(CellElement, { "$clamp": lines, "$padding": padding, "$sx": sx, "$textAlign": textAlign, "$verticalAlign": verticalAlign, "$width": percentageWidth ? percentageWidth : 'fit-content' },
+        React__default.createElement("div", null, children)));
+};
+const CellElement = styled.td `
+  width: ${({ $width }) => $width};
+  height: 20px;
+  font-family: var(--font-inter);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--color-grey-3);
+  vertical-align: ${({ $verticalAlign }) => $verticalAlign ? $verticalAlign : ''};
+  text-align: ${({ $textAlign }) => ($textAlign ? $textAlign : '')};
+  padding: ${({ $padding }) => $padding};
+  ${({ $clamp }) => $clamp
+    ? `
+  & > div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    line-clamp: ${$clamp};
+    -webkit-line-clamp: ${$clamp};
+    -webkit-box-orient: vertical;
+  }`
+    : ''}
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+Cell.displayName = 'Table.Cell';
+Table.Cell = Cell;
+const HeaderCell = ({ children, lines, padding = '16px 24px', sx, textAlign = 'left', verticalAlign = 'middle', width, }) => {
+    const percentageWidth = width ? width * (100 / 16) + '%' : undefined;
+    return (React__default.createElement(HeadCellElement, { as: "th", "$clamp": lines, "$padding": padding, "$sx": sx, "$textAlign": textAlign, "$verticalAlign": verticalAlign, "$width": percentageWidth ? percentageWidth : 'fit-content' }, children));
+};
+const HeadCellElement = styled(CellElement) `
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+`;
+HeaderCell.displayName = 'Table.HeaderCell';
+Table.HeaderCell = HeaderCell;
+
+export { Table };