@soul-refiner/design-system 0.1.38 → 0.1.39

package/src/components/surfaces/modal/modal.tsx

@@ -1,178 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import { Button } from '../../';
-import { Close } from '../../../icons';
-import { callAll } from '../../../utils';
-
-const ModalContext = React.createContext<
-  [boolean, React.Dispatch<React.SetStateAction<boolean>>]
->([false, (() => undefined) as React.Dispatch<React.SetStateAction<boolean>>]);
-
-export interface ModalProps extends React.PropsWithChildren {
-  /**
-   * This is to make the Modal a controlled component,
-   * instead of it managing its own state
-   */
-  controlledOpen?: boolean;
-}
-
-const Modal = ({ controlledOpen, ...props }: ModalProps) => {
-  const [open, setOpen] = React.useState(controlledOpen || false);
-
-  React.useEffect(() => {
-    if (controlledOpen !== undefined) {
-      setOpen(controlledOpen);
-    }
-  }, [controlledOpen]);
-
-  return <ModalContext.Provider value={[open, setOpen]} {...props} />;
-};
-
-const ModalTrigger = ({
-  children: child,
-}: {
-  children: React.ReactElement;
-}) => {
-  const [, setOpen] = React.useContext(ModalContext);
-  return (
-    child &&
-    React.cloneElement(child, {
-      onClick: callAll(() => setOpen(true), child.props.onClick),
-    })
-  );
-};
-
-ModalTrigger.displayName = 'Modal.Trigger';
-Modal.Trigger = ModalTrigger;
-
-const ModalDismiss = ({
-  children: child,
-
-  setClosed,
-}: {
-  children: React.ReactElement;
-  setClosed?: () => void;
-}) => {
-  const [, setOpen] = React.useContext(ModalContext);
-  return (
-    child &&
-    React.cloneElement(child, {
-      onClick: callAll(
-        () => setOpen(false),
-        child.props.onClick,
-        () => setClosed && setClosed()
-      ),
-    })
-  );
-};
-
-ModalDismiss.displayName = 'Modal.Dismiss';
-Modal.Dismiss = ModalDismiss;
-
-export interface ModalContentProps extends React.PropsWithChildren {
-  backgroundDark?: boolean;
-  footer?: React.ReactElement;
-  header?: React.ReactElement;
-  setClosed?: () => void;
-  sx?: string;
-}
-
-const ModalContent = ({
-  backgroundDark = true,
-  children,
-  footer,
-  header,
-  setClosed,
-  sx,
-  ...props
-}: ModalContentProps) => {
-  const [open, setOpen] = React.useContext(ModalContext);
-
-  const handleOutsideClick = (event: React.MouseEvent) => {
-    if (event.currentTarget != event.target) return;
-    setClosed ? setClosed() : setOpen(false);
-  };
-
-  return (
-    <Wrapper
-      $backgroundDark={backgroundDark}
-      $open={open}
-      onClick={handleOutsideClick}
-    >
-      <Content {...props} $sx={sx}>
-        {header && (
-          <div className="header">
-            <div>{header}</div>
-            <Modal.Dismiss setClosed={setClosed}>
-              <Button icon={<Close />} type="special" />
-            </Modal.Dismiss>
-          </div>
-        )}
-        {children}
-        {footer && <div className="footer">{footer}</div>}
-      </Content>
-    </Wrapper>
-  );
-};
-
-ModalContent.displayName = 'Modal.Content';
-Modal.Content = ModalContent;
-
-export { Modal };
-
-const Wrapper = styled.div<{
-  $open: boolean;
-  $backgroundDark: boolean;
-}>`
-  ${({ $open }) =>
-    $open
-      ? `display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;`
-      : 'display: none;'}
-  ${({ $backgroundDark }) =>
-    $backgroundDark
-      ? `background: rgba(0, 0, 0, 0.5);
-    cursor: pointer;`
-      : ''}
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 100;
-  width: 100vw;
-  height: 100vh;
-  padding: 0px;
-  margin: 0px;
-  overflow: hidden;
-`;
-
-const Content = styled.div<{ $sx?: string }>`
-  position: absolute;
-  z-index: 101;
-  background-color: var(--color-white);
-  box-shadow: var(--elevation-2);
-  border-radius: var(--small);
-  cursor: initial;
-  padding: 24px;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-
-  [class~='header'] {
-    display: flex;
-    align-items: center;
-
-    div:first-child {
-      flex: 1;
-    }
-  }
-
-  [class~='footer'] {
-    position: relative;
-    padding-top: 16px;
-  }
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;

package/src/components/table/index.ts

@@ -1,7 +0,0 @@
-export { Table } from './table';
-export type {
-  TableCellProps,
-  TableHeaderCellProps,
-  TableProps,
-  TableRowProps,
-} from './table';

package/src/components/table/table/index.ts

@@ -1,7 +0,0 @@
-export { Table } from './table';
-export type {
-  TableCellProps,
-  TableHeaderCellProps,
-  TableProps,
-  TableRowProps,
-} from './table';

package/src/components/table/table/table.tsx

@@ -1,385 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import { Box } from '../../';
-
-/********************************************************
- *  Table
- */
-export interface TableProps extends React.PropsWithChildren {
-  border?: boolean;
-  compact?: boolean;
-  footer?: React.ReactNode;
-  header?: React.ReactNode;
-  separated?: boolean;
-  striped?: boolean;
-  sx?: string;
-}
-
-const Table = ({
-  border = true,
-  children,
-  compact,
-  footer,
-  header,
-  separated,
-  striped,
-  sx,
-}: TableProps) => {
-  return (
-    <Box
-      $backgroundColor="white"
-      $borderRadius="large"
-      $display="flex"
-      $dir="column"
-      $gap={32}
-      $padding={32}
-      sx={compact ? 'width: fit-content;' : ''}
-    >
-      {!!header && header}
-      <Box
-        $borderRadius="small"
-        sx={border ? 'border: 1px solid var(--color-grey-8);' : ''}
-      >
-        <TableElement
-          $compact={compact}
-          $separated={separated}
-          $striped={striped}
-          $sx={sx}
-        >
-          {children}
-        </TableElement>
-      </Box>
-      {!!footer && footer}
-    </Box>
-  );
-};
-
-const TableElement = styled.table<{
-  $compact?: boolean;
-  $separated?: boolean;
-  $striped?: boolean;
-  $sx?: string;
-}>`
-  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 }: React.PropsWithChildren) => {
-  return <HeadElement {...rest}>{children}</HeadElement>;
-};
-
-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 }: React.PropsWithChildren) => {
-  return <BodyElement {...rest}>{children}</BodyElement>;
-};
-
-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 }: React.PropsWithChildren) => {
-  return <tfoot {...rest}>{children}</tfoot>;
-};
-
-Foot.displayName = 'Table.Foot';
-Table.Footer = Foot;
-
-/********************************************************
- *  Table Row
- */
-
-export interface TableRowProps extends React.PropsWithChildren {
-  disabled?: boolean;
-  href?: string;
-  hoverable?: boolean;
-  onClick?: (event: React.MouseEvent<HTMLTableRowElement>) => void;
-  padding?: string;
-  selected?: boolean;
-  sx?: string;
-}
-
-const Row = ({
-  children,
-  disabled,
-  href,
-  hoverable = false,
-  onClick,
-  selected,
-  sx,
-  ...rest
-}: TableRowProps) => {
-  const handleClick = href
-    ? (event: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => {
-        if (event.metaKey || event.ctrlKey) {
-          const win = window.open(href, '_blank');
-          win?.focus();
-        } else {
-          window.location.href = href;
-        }
-      }
-    : onClick
-    ? (event: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => {
-        onClick(event);
-      }
-    : undefined;
-
-  return (
-    <RowElement
-      onClick={handleClick}
-      $disabled={disabled}
-      $hoverable={hoverable}
-      $isAnchor={!!href}
-      $selected={selected}
-      $sx={sx}
-      {...rest}
-    >
-      {children}
-    </RowElement>
-  );
-};
-
-const RowElement = styled.tr<{
-  $disabled?: boolean;
-  $hoverable?: boolean;
-  $isAnchor?: boolean;
-  $selected?: boolean;
-  $sx?: string;
-}>`
-  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;
-
-/********************************************************
- *  Table Cell
- */
-
-export interface TableCellProps extends React.PropsWithChildren {
-  lines?: number;
-  padding?: string;
-  sx?: string;
-  textAlign?: 'left' | 'center' | 'right';
-  verticalAlign?: 'top' | 'middle' | 'bottom';
-  width?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16;
-}
-
-const Cell = ({
-  children,
-  lines,
-  padding = '16px 24px',
-  sx,
-  textAlign = 'left',
-  verticalAlign = 'middle',
-  width,
-}: TableCellProps) => {
-  const percentageWidth = width ? width * (1 / 16) + '%' : undefined;
-
-  return (
-    <CellElement
-      $clamp={lines}
-      $padding={padding}
-      $sx={sx}
-      $textAlign={textAlign}
-      $verticalAlign={verticalAlign}
-      $width={percentageWidth ? percentageWidth : 'fit-content'}
-    >
-      <div>{children}</div>
-    </CellElement>
-  );
-};
-
-const CellElement = styled.td<{
-  $clamp?: number;
-  $padding: string;
-  $sx?: string;
-  $textAlign: string;
-  $verticalAlign: string;
-  $width?: string;
-}>`
-  width: ${({ $width }) => $width};
-  height: 20px;
-  font-family: 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 };
-
-/********************************************************
- *  Table Header Cell
- */
-
-export interface TableHeaderCellProps extends React.PropsWithChildren {
-  lines?: number;
-  padding?: string;
-  sx?: string;
-  textAlign?: 'left' | 'center' | 'right';
-  verticalAlign?: 'top' | 'middle' | 'bottom';
-  width?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16;
-}
-
-const HeaderCell = ({
-  children,
-  lines,
-  padding = '16px 24px',
-  sx,
-  textAlign = 'left',
-  verticalAlign = 'middle',
-  width,
-}: TableHeaderCellProps) => {
-  const percentageWidth = width ? width * (100 / 16) + '%' : undefined;
-
-  return (
-    <HeadCellElement
-      as="th"
-      $clamp={lines}
-      $padding={padding}
-      $sx={sx}
-      $textAlign={textAlign}
-      $verticalAlign={verticalAlign}
-      $width={percentageWidth ? percentageWidth : 'fit-content'}
-    >
-      {children}
-    </HeadCellElement>
-  );
-};
-
-const HeadCellElement = styled(CellElement)<{
-  $clamp?: number;
-  $sx?: string;
-  $textAlign: string;
-  $verticalAlign: string;
-  $width?: string;
-}>`
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 24px;
-`;
-
-HeaderCell.displayName = 'Table.HeaderCell';
-Table.HeaderCell = HeaderCell;