@soul-refiner/design-system 0.0.5 → 0.0.7

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

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

package/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";

package/tsconfig.json

@@ -1,14 +0,0 @@
-{
-  "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

@@ -1,29 +0,0 @@
-import { resolve } from "path";
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()],
-  build: {
-    lib: {
-      // Could also be a dictionary or array of multiple entry points
-      entry: resolve(__dirname, "dist/src/index.js"),
-      name: "Design System",
-      // the proper extensions will be added
-      fileName: "design-system",
-    },
-    rollupOptions: {
-      // make sure to externalize deps that shouldn't be bundled
-      // into your library
-      external: ["react"],
-      output: {
-        // Provide global variables to use in the UMD build
-        // for externalized deps
-        globals: {
-          react: "React",
-        },
-      },
-    },
-  },
-});