@soul-refiner/design-system 1.7.22 → 2.0.0-alpha.1

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

@@ -1,230 +0,0 @@
-'use client';
-import React from 'react';
-import Image from 'next/image';
-import Link from 'next/link';
-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 { Modal } from '../modal';
-import { ChevronLeft, ChevronRight } from '../../../icons/arrow';
-export const Post = ({ actions, author, authorActive, authorHref, authorImage, avatarTooltipContent, avatarTooltipSx, children, content, createdDate, dropdown, hasComments, id, images, isPaywalled = false, onJoin, }) => {
-    const componentId = React.useId();
-    const [curr, setCurr] = React.useState(-1);
-    const [modalContentSize, setModalContentSize] = React.useState({
-        x: '30vw',
-        y: '30vh',
-    });
-    React.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.Children.toArray(actions);
-    const _comments = React.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.createElement(Wrapper, { id: id },
-        curr > -1 && !!images?.[curr] && (React.createElement(Modal, { alwaysRender: false, controlledOpen: true, onChange: (open) => !open && setCurr(-1) },
-            React.createElement(Modal.Content, { sx: `
-            position: relative; 
-            height: ${modalContentSize.y}; 
-            width: ${modalContentSize.x};
-            margin: 0 auto;
-            ` },
-                React.createElement(NavArrow, { "$side": "left", "$visible": curr !== 0, onClick: handleDecrement },
-                    React.createElement(ChevronLeft, { color: "white", size: 48 })),
-                React.createElement(Image, { alt: "", fill: true, quality: 100, onLoad: handleImageLoad, priority: true, sizes: "100vw", src: images[curr], style: { objectFit: 'cover' } }),
-                React.createElement(NavArrow, { "$side": "right", "$visible": curr !== images.length - 1, onClick: handleIncrement },
-                    React.createElement(ChevronRight, { color: "white", size: 48 }))))),
-        React.createElement(Header, null,
-            React.createElement(Avatar, { as: !!authorHref ? Link : 'button', 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, tooltipSx: avatarTooltipSx, sx: !!authorHref ? 'img { cursor: pointer; }' : undefined }),
-            dropdown),
-        !!content?.length && (React.createElement("div", { style: { padding: '16px 24px' } },
-            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(Image, { alt: "", fill: true, onClick: () => setCurr(i), quality: 100, src: url, style: { cursor: 'pointer' } })))),
-            images.length > 4 && (React.createElement(H, { as: "p", className: "more-than", "$color": "grey-10", "$fontSize": 28, "$lineHeight": 36, "$semiBold": true },
-                "+",
-                images.length - 4)))),
-        !!images?.length && isPaywalled && (React.createElement(PaywallWrapper, null,
-            React.createElement(Lock, { size: 40, color: "grey-7" }),
-            React.createElement(P, { "$fontSize": 14, "$bold": true, "$lineHeight": 20, "$color": "white" },
-                "Become a member",
-                React.createElement("br", null),
-                "to unlock this post"),
-            React.createElement(Button, { onClick: onJoin, size: "small", sx: "width: 213px;", type: "outlined" }, "Join now"))),
-        !!_actions.length && (React.createElement(ActionsWrapper, null, !isPaywalled && _actions)),
-        hasComments && !!_comments.length && (React.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);
-  }
-`;

package/dist/components/table/index.js

@@ -1 +0,0 @@
-export { Table } from './table';

package/dist/components/table/table/index.js

@@ -1 +0,0 @@
-export { Table } from './table';

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

@@ -1,184 +0,0 @@
-'use client';
-import React from 'react';
-import styled from 'styled-components';
-import { Box } from '../../';
-const Table = ({ border = true, children, compact, footer, header, separated, striped, sx, padding = 32, }) => {
-    return (React.createElement(Box, { "$backgroundColor": "white", "$borderRadius": "large", "$display": "flex", "$dir": "column", "$gap": 32, "$padding": padding, sx: compact ? 'width: fit-content;' : '' },
-        !!header && header,
-        React.createElement(Box, { "$borderRadius": "small", sx: border ? 'border: 1px solid var(--color-grey-8);' : '' },
-            React.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.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.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.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.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.createElement(CellElement, { "$clamp": lines, "$padding": padding, "$sx": sx, "$textAlign": textAlign, "$verticalAlign": verticalAlign, "$width": percentageWidth ? percentageWidth : 'fit-content' },
-        React.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;
-export { Table };
-const HeaderCell = ({ children, lines, padding = '16px 24px', sx, textAlign = 'left', verticalAlign = 'middle', width, }) => {
-    const percentageWidth = width ? width * (100 / 16) + '%' : undefined;
-    return (React.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;