@soul-refiner/design-system 0.0.19 → 0.0.20

package/dist/src/surfaces/Review/Review.tsx

@@ -1,88 +0,0 @@
-import React from "react";
-import reviewStyle from "./Review.module.scss";
-import { Like, LikeOutline, ShareOutline } from "@soul-refiner/icons/src";
-import { abbrRelativeTimeString } from "@soul-refiner/utils/src";
-import { Avatar } from "../../iconography";
-import { StarRating } from "../../iconography";
-
-export interface ReviewProps {
-  reviewer: string;
-  reviewDate: Date;
-  rating: number;
-  verifiedPurchase: boolean;
-  title: string;
-  content: string;
-  avatarUrl: string;
-  likes: number;
-  hasLiked: boolean;
-  onLike: () => void;
-  onShare: () => void;
-}
-
-export const Review = ({
-  reviewer = "John Doe",
-  reviewDate = new Date(new Date().getTime() - 7800000 * 100),
-  rating = 5,
-  verifiedPurchase = false,
-  title = "",
-  content = "",
-  avatarUrl,
-  likes = 0,
-  hasLiked,
-  onLike,
-  onShare,
-}: ReviewProps) => {
-  return (
-    <article className={reviewStyle.review}>
-      <div className={reviewStyle.header}>
-        <div className={reviewStyle.avatar}>
-          <Avatar
-            url={avatarUrl}
-            color="inherit"
-            title={
-              <span style={{ color: "var(--color-grey-10)" }}>{reviewer}</span>
-            }
-            size={40}
-          />
-        </div>
-        <div className={reviewStyle.details}>
-          {verifiedPurchase && (
-            <div className={reviewStyle.verified}>Verified Purchase</div>
-          )}
-          <div>Reviewed on {abbrRelativeTimeString(reviewDate)}</div>
-        </div>
-      </div>
-      <div className={reviewStyle.rating}>
-        <div>
-          <StarRating
-            rating={rating}
-            width={100}
-            outlines={false}
-            gradient={true}
-          />
-        </div>
-        <div>{title}</div>
-      </div>
-      <div className={reviewStyle.content}>{content}</div>
-      <div className={reviewStyle.actions}>
-        <div>
-          <button className={reviewStyle.button} onClick={onLike}>
-            {!hasLiked ? (
-              <LikeOutline iconSize={20} size={21} fill="#FFF" />
-            ) : (
-              <Like iconSize={20} size={21} fill="var(--color-blue-6)" />
-            )}
-            {likes} {likes === 1 ? "Like" : "Likes"}
-          </button>
-        </div>
-
-        <div>
-          <button className={reviewStyle.button} onClick={onShare}>
-            <ShareOutline iconSize={20} size={21} fill="#FFF" />
-            Share
-          </button>
-        </div>
-      </div>
-    </article>
-  );
-};

package/dist/src/tables/Filter/Filter.module.scss

@@ -1,34 +0,0 @@
-@use "@soul-refiner/styles/mixins";
-
-.filter {
-  @include mixins.flex($gap: 6px, $align: center);
-  border: 1px solid var(--color-grey-7);
-  &#{&} {
-    padding: 9px 16px;
-  }
-
-  & > span {
-    @include mixins.flex($gap: 6px, $align: center);
-
-    & > [class~="label"] {
-      color: var(--color-grey-4);
-    }
-
-    & > [class~="value"] {
-      color: var(--colorify-blue-3);
-    }
-
-    & > [class~="divider"] {
-      width: 1px;
-      height: 12px;
-      background-color: var(--color-grey-8);
-    }
-  }
-
-  &:active {
-    background-color: var(--color-grey-7);
-    & > span > span {
-      color: #ffffff;
-    }
-  }
-}

package/dist/src/tables/Filter/Filter.tsx

@@ -1,30 +0,0 @@
-import React from "react";
-import { ChevronDown, ChevronUp } from "@soul-refiner/icons/src";
-import { Button } from "../../actions";
-import filterStyles from "./Filter.module.scss";
-
-export interface FilterProps {
-  label: string;
-  open: boolean;
-  value: string;
-}
-
-export const Filter = ({ label, open, value }: FilterProps) => {
-  return (
-    <Button
-      bold={false}
-      buttonColor="#FFFFFF"
-      className={`${filterStyles.filter}`}
-      uppercase={false}
-    >
-      <span className="label">{label}</span>
-      <span className="divider" />
-      <span className="value">{value}</span>
-      {open ? (
-        <ChevronUp fill="var(--color-grey-7)" iconSize={8} size={8} />
-      ) : (
-        <ChevronDown fill="var(--color-grey-7)" iconSize={8} size={8} />
-      )}
-    </Button>
-  );
-};

package/dist/src/tables/Filter/index.ts

@@ -1 +0,0 @@
-export { Filter, type FilterProps } from "./Filter";

package/dist/src/tables/Table/Table.module.scss

@@ -1,126 +0,0 @@
-@use "@soul-refiner/styles/mixins";
-
-.wrapper {
-  background: #ffffff;
-  padding: 32px;
-  display: flex;
-  flex-flow: column nowrap;
-  gap: 32px;
-  border-radius: 25px;
-}
-
-.table {
-  width: 100%;
-
-  &[class~="compact"] {
-    width: fit-content;
-  }
-
-  &[class~="separated"] > tbody > * {
-    border-bottom: 1px solid var(--color-grey-9);
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-
-  &[class~="striped"] > tbody > *:nth-of-type(even) {
-    background-color: var(--color-grey-10);
-  }
-}
-
-.head {
-  --var: 0;
-}
-
-.body {
-  --var: 0;
-}
-
-.footer {
-  --var: 0;
-}
-
-.headercell {
-  &#{&} {
-    @include mixins.font(700, 16px, 24px);
-    color: #99b4cf;
-
-    & > p {
-      @include mixins.font(700, 16px, 24px);
-      color: #99b4cf;
-    }
-  }
-}
-
-.row {
-  display: table-row;
-  color: var(--color-grey-0);
-  border-radius: var(--border-radius-small);
-
-  & > * {
-    padding: var(--padding);
-  }
-
-  & > *:first-child {
-    border-top-left-radius: var(--border-radius-small);
-    border-bottom-left-radius: var(--border-radius-small);
-  }
-
-  & > *:last-child {
-    border-top-right-radius: var(--border-radius-small);
-    border-bottom-right-radius: var(--border-radius-small);
-  }
-
-  &[class~="anchor"] {
-    cursor: pointer;
-    padding-right: 24px;
-
-    &:hover {
-      background-color: var(--color-blue-9);
-
-      & > td:last-child {
-        position: relative;
-      }
-      & > td:last-child::after {
-        content: "❯";
-        color: var(--color-blue-3);
-        position: absolute;
-        right: 12px;
-        top: calc(50% - 16px);
-      }
-    }
-  }
-
-  &[class~="hoverable"] {
-    &:hover {
-      background-color: var(--color-blue-9);
-    }
-  }
-
-  &[class~="selected"] {
-    background-color: var(--colorify-blue-1);
-  }
-}
-
-.cell {
-  @include mixins.font(400, 16px, 28px);
-  color: var(--color-grey-3);
-  vertical-align: var(--vertical-align);
-  text-align: var(--text-align);
-
-  & > p {
-    @include mixins.font(400, 16px, 28px);
-    color: var(--color-grey-3);
-  }
-
-  &[class~="clamped"] {
-    @include mixins.font-clamp(var(--clamp));
-    & > * {
-      @include mixins.font-clamp(var(--clamp));
-    }
-  }
-
-  &[class~="wide"] {
-    width: var(--width);
-  }
-}

package/dist/src/tables/Table/Table.spec.js

@@ -1,113 +0,0 @@
-import React from "react";
-import "@testing-library/jest-dom";
-import { render, screen, fireEvent } from "@testing-library/react";
-
-import { BarGraph } from "@soul-refiner/icons/src";
-import { Table } from "./Table";
-
-const generateProps = (props) => ({
-  ...props,
-});
-
-const Head = (props) => (
-  <Table.Head {...props}>
-    <Table.Row>
-      <Table.HeaderCell width={4}>Title 1</Table.HeaderCell>
-      <Table.HeaderCell width={2}>Title 2</Table.HeaderCell>
-    </Table.Row>
-  </Table.Head>
-);
-
-const Row = (props) => (
-  <Table.Row {...props}>
-    <Table.Cell>Row {props.row ? props.row : 1} Data 1</Table.Cell>
-    <Table.Cell>Row {props.row ? props.row : 1} Data 2</Table.Cell>
-  </Table.Row>
-);
-
-describe("Table", () => {
-  it("renders an icon header", () => {
-    const props = generateProps({
-      iconHeader: {
-        as: "h5",
-        color: "blue",
-        icon: <BarGraph iconSize={18} size={24} fill="var(--color-blue-3)" />,
-        title: "Summary",
-      },
-    });
-    render(
-      <Table {...props}>
-        <Head />
-        <Table.Body>
-          <Row row={1} />
-        </Table.Body>
-      </Table>
-    );
-    expect(screen.getByText("Summary"));
-  });
-
-  it("renders a footer", () => {
-    const props = generateProps({
-      footer: <p>This is a footer</p>,
-    });
-    render(
-      <Table {...props}>
-        <Head />
-        <Table.Body>
-          <Row row={1} />
-        </Table.Body>
-      </Table>
-    );
-    expect(screen.getByText("This is a footer"));
-  });
-
-  it("renders rows separated by lines", () => {
-    const props = generateProps({});
-    render(
-      <Table {...props}>
-        <Head />
-        <Table.Body>
-          <Row row={1} />
-          <Row row={2} />
-        </Table.Body>
-      </Table>
-    );
-    const row1 = screen.getByText("Row 1 Data 1").parentElement;
-    expect(row1).toHaveStyle({
-      borderBottom: "1px solid var(--color-grey-9)",
-    });
-  });
-
-  it("renders a striped table", () => {
-    const props = generateProps({});
-    render(
-      <Table {...props}>
-        <Head />
-        <Table.Body>
-          <Row row={1} />
-          <Row row={2} />
-        </Table.Body>
-      </Table>
-    );
-    const row2 = screen.getByText("Row 2 Data 1").parentElement;
-    expect(row2).toHaveStyle({
-      backgroundColor: "var(--color-grey-9)",
-    });
-  });
-
-  it("renders clickable rows", () => {
-    const props = generateProps({});
-    const rowClickHandler = jest.fn();
-    render(
-      <Table {...props}>
-        <Head />
-        <Table.Body>
-          <Row row={1} onClick={rowClickHandler} />
-        </Table.Body>
-      </Table>
-    );
-    const row1 = screen.getByText("Row 1 Data 1").parentElement;
-    fireEvent.click(row1);
-    expect(rowClickHandler).toHaveBeenCalled();
-  });
-});

package/dist/src/tables/Table/Table.tsx

@@ -1,251 +0,0 @@
-import React from "react";
-import styles from "./Table.module.scss";
-import { IconHeader, IconHeaderProps } from "../../iconography";
-
-/********************************************************
- *  Table
- */
-export interface TableProps
-  extends React.DetailedHTMLProps<
-    React.TableHTMLAttributes<HTMLTableElement>,
-    HTMLTableElement
-  > {
-  compact?: boolean;
-  iconHeader?: IconHeaderProps;
-  footer?: React.ReactNode;
-  header?: React.ReactNode;
-  separated?: boolean;
-  striped?: boolean;
-}
-
-const Table = ({
-  className,
-  compact,
-  iconHeader,
-  footer,
-  header,
-  separated,
-  striped,
-  children,
-  ...rest
-}: TableProps) => {
-  return (
-    <div className={`${styles.wrapper} ${className ? className : ""}`}>
-      {!!iconHeader && <IconHeader {...iconHeader} />}
-      {!!header && header}
-      <table
-        className={`${styles.table} ${compact ? "compact" : ""} ${
-          separated ? "separated" : ""
-        } ${striped ? "striped" : ""}`}
-        {...rest}
-      >
-        {children}
-      </table>
-      {!!footer && footer}
-    </div>
-  );
-};
-
-/********************************************************
- *  Table Head
- */
-
-const Head = ({ children, ...rest }: React.PropsWithChildren) => {
-  return (
-    <thead className={`${styles.head}`} {...rest}>
-      {children}
-    </thead>
-  );
-};
-
-Head.displayName = "Table.Head";
-Table.Head = Head;
-
-/********************************************************
- *  Table Body
- */
-
-const Body = ({ children, ...rest }: React.PropsWithChildren) => {
-  return (
-    <tbody className={`${styles.body}`} {...rest}>
-      {children}
-    </tbody>
-  );
-};
-
-Body.displayName = "Table.Body";
-Table.Body = Body;
-
-/********************************************************
- *  Table Foot
- */
-
-const Foot = ({ children, ...rest }: React.PropsWithChildren) => {
-  return (
-    <tfoot className={`${styles.footer}`} {...rest}>
-      {children}
-    </tfoot>
-  );
-};
-
-Foot.displayName = "Table.Foot";
-Table.Footer = Foot;
-
-/********************************************************
- *  Table Header Cell
- */
-export interface TableHeaderCellProps
-  extends React.DetailedHTMLProps<
-    React.HTMLAttributes<HTMLTableCellElement>,
-    HTMLTableCellElement
-  > {
-  lines?: number;
-  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,
-  style,
-  textAlign = "left",
-  verticalAlign = "middle",
-  width,
-  ...rest
-}: TableHeaderCellProps) => {
-  const percentageWidth = width ? width * 6.25 + "%" : undefined;
-  return (
-    <th
-      className={`${styles.cell} ${styles.headercell} ${
-        lines ? "clamped" : ""
-      } ${width ? "wide" : ""}`}
-      style={
-        {
-          ...style,
-          "--clamp": lines,
-          "--text-align": textAlign,
-          "--vertical-align": verticalAlign,
-          "--width": percentageWidth,
-        } as React.CSSProperties
-      }
-      {...rest}
-    >
-      {children}
-    </th>
-  );
-};
-
-HeaderCell.displayName = "Table.HeaderCell";
-Table.HeaderCell = HeaderCell;
-
-/********************************************************
- *  Table Row
- */
-export interface TableRowProps
-  extends React.DetailedHTMLProps<
-    React.HTMLAttributes<HTMLTableRowElement>,
-    HTMLTableRowElement
-  > {
-  href?: string;
-  hoverable?: boolean;
-  padding?: string;
-  selected?: boolean;
-}
-
-const Row = ({
-  children,
-  href,
-  hoverable = false,
-  onClick,
-  padding = "16px 8px",
-  selected,
-  style,
-  ...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 (
-    <tr
-      className={`${styles.row} ${selected ? "selected" : ""} ${
-        hoverable ? "hoverable" : ""
-      } ${href ? "anchor" : ""}`}
-      onClick={handleClick}
-      style={
-        {
-          ...style,
-          "--padding": padding,
-        } as React.CSSProperties
-      }
-      {...rest}
-    >
-      {children}
-    </tr>
-  );
-};
-
-Row.displayName = "Table.Row";
-Table.Row = Row;
-
-/********************************************************
- *  Table Cell
- */
-export interface TableCellProps
-  extends React.DetailedHTMLProps<
-    React.HTMLAttributes<HTMLTableCellElement>,
-    HTMLTableCellElement
-  > {
-  lines?: number;
-  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,
-  style,
-  textAlign = "left",
-  verticalAlign = "middle",
-  width,
-  ...rest
-}: TableCellProps) => {
-  const percentageWidth = width ? width * 6.25 + "%" : undefined;
-  return (
-    <td
-      className={`${styles.cell} ${lines ? "clamped" : ""} ${
-        width ? "wide" : ""
-      }`}
-      style={
-        {
-          ...style,
-          "--clamp": lines,
-          "--text-align": textAlign,
-          "--vertical-align": verticalAlign,
-          "--width": percentageWidth,
-        } as React.CSSProperties
-      }
-      {...rest}
-    >
-      {children}
-    </td>
-  );
-};
-
-Cell.displayName = "Table.Cell";
-Table.Cell = Cell;
-
-export { Table };

package/dist/src/tables/Table/index.ts

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

package/dist/src/tables/index.ts

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