@soul-refiner/design-system 0.0.14 → 0.0.16

package/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/src/tables/Table/index.ts

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

package/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/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "resolveJsonModule": true,
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true,
+    "outDir": "dist"
+  },
+  "extends": "@soul-refiner/tsconfig/react-library.json",
+  "include": ["./*"],
+  "exclude": ["dist", "build", "node_modules"]
+}

package/vite.config.ts

@@ -0,0 +1,28 @@
+import { resolve } from "path";
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import dts from 'vite-plugin-dts';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    dts({
+      insertTypesEntry: true,
+    }),
+  ],
+  build: {
+    lib: {
+      entry: resolve(__dirname, "src/index.ts"),
+      name: "Design System",
+      fileName: "index",
+    },
+    rollupOptions: {
+      external: ["react"],
+      output: {
+        globals: {
+          react: "React",
+        },
+      },
+    },
+  },
+});