@soul-refiner/design-system 1.6.1-alpha.3 → 1.6.2

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

@@ -0,0 +1,129 @@
+'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';
+import { Button } from '../../actions/button';
+import { Avatar } from '../../iconography/avatar';
+import { Lock } from '../../../icons';
+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 _actions = React.Children.toArray(actions);
+    const _comments = React.Children.toArray(children);
+    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 },
+                    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 }),
+            dropdown),
+        !!content?.length && (React.createElement("div", { style: { padding: 24 } },
+            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, quality: 100, 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)))),
+        !!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;
+`;

package/dist/components/table/index.js

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

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

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

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

@@ -0,0 +1,184 @@
+'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;