@soul-refiner/design-system 0.0.10 → 0.0.12

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

@@ -0,0 +1,251 @@
+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

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

package/dist/src/tables/index.ts

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

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "type": "module",
   "license": "MIT",
   "files": [
     "dist"
   ],
-  "main": "./dist/design-system.umd.cjs",
-  "module": "./dist/design-system.js",
+  "main": "./dist/index.umd.cjs",
+  "module": "./dist/index.js",
   "exports": {
     ".": {
-      "import": "./dist/design-system.js",
-      "require": "./dist/design-system.umd.cjs"
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
     }
   },
   "scripts": {
@@ -66,7 +66,8 @@
     "slate-history": "^0.66.0",
     "slate-hyperscript": "^0.77.0",
     "slate-react": "^0.83.2",
-    "styled-components": "^5.3.6"
+    "styled-components": "^5.3.6",
+    "vite-plugin-dts": "^1.7.1"
   },
   "jest": {
     "preset": "ts-jest",