@studiocubics/components 0.0.1

package/src/Layout/Sidebar/SidebarBody/SidebarBody.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import type { ComponentProps } from "react";
+import styles from "./SidebarBody.module.css";
+import { cn } from "@studiocubics/utils";
+import { useSidebar } from "../Sidebar";
+export function SidebarBody(props: ComponentProps<"div">) {
+  const { children, className, ...rest } = props;
+  const { sidebarOpen } = useSidebar();
+  return (
+    <div
+      className={cn(styles.root, className, sidebarOpen ? styles.open : "")}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}

package/src/Layout/Sidebar/SidebarDrawer/SidebarDrawer.module.css

@@ -0,0 +1,20 @@
+.root {
+  background: var(--color-surface);
+  transition: width var(--transition-time) var(--transition-tf);
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  z-index: -1;
+}
+
+@media (min-width: 600px) {
+  .root {
+    background: var(--sidebar-color-surface);
+    flex-direction: column;
+    width: var(--sidebar-closed-width);
+    z-index: 0;
+  }
+  .open {
+    width: var(--sidebar-open-width);
+  }
+}

package/src/Layout/Sidebar/SidebarDrawer/SidebarDrawer.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import type { ComponentProps } from "react";
+import styles from "./SidebarDrawer.module.css";
+import { cn } from "@studiocubics/utils";
+import { useSidebar } from "../Sidebar";
+
+export function SidebarDrawer(props: ComponentProps<"div">) {
+  const { children, className, ...rest } = props;
+  const { sidebarOpen } = useSidebar();
+  return (
+    <aside
+      className={cn(styles.root, className, sidebarOpen ? styles.open : "")}
+      {...rest}
+    >
+      {children}
+    </aside>
+  );
+}

package/src/Layout/Sidebar/SidebarFooter/SidebarFooter.module.css

@@ -0,0 +1,35 @@
+.root {
+  /* display: none; */
+
+  position: fixed;
+  left: -100%;
+  top: calc(var(--sidebar-header-height) + var(--sidebar-body-height));
+  width: var(--sidebar-open-width);
+  padding-bottom: var(--spacing-gap-2);
+  padding-top: var(--spacing-gap-1);
+
+  background-color: var(--color-surface-alpha);
+  backdrop-filter: var(--backdrop-blur);
+  height: calc(
+    100dvh - var(--sidebar-body-height) - var(--sidebar-header-height)
+  );
+  overflow: auto;
+  transition: left var(--transition-time) var(--transition-tf);
+}
+.open {
+  left: 0;
+}
+@media (min-width: 600px) {
+  .root {
+    position: relative;
+    left: 0;
+    height: unset;
+    width: unset;
+    top: 0;
+    background-color: transparent;
+    backdrop-filter: none;
+  }
+  .open {
+    left: 0;
+  }
+}

package/src/Layout/Sidebar/SidebarFooter/SidebarFooter.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { cn } from "@studiocubics/utils";
+import styles from "./SidebarFooter.module.css";
+import type { ComponentProps } from "react";
+import { useSidebar } from "../Sidebar";
+
+export function SidebarFooter(props: ComponentProps<"div">) {
+  const { children, className, ...rest } = props;
+  const { sidebarOpen } = useSidebar();
+  return (
+    <div
+      className={cn(styles.root, className, sidebarOpen ? styles.open : "")}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}

package/src/Layout/Sidebar/SidebarHeader/SidebarHeader.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import type { ComponentProps } from "react";
+import { useSidebar } from "../Sidebar";
+
+export function SidebarHeader(props: ComponentProps<"div">) {
+  const { children, ...rest } = props;
+  const { sidebarOpen } = useSidebar();
+  return (
+    <div data-open={sidebarOpen} {...rest}>
+      {children}
+    </div>
+  );
+}

package/src/Layout/Sidebar/SidebarViewport/SidebarViewport.module.css

@@ -0,0 +1,12 @@
+.root {
+  /* background: var(--sidebar-color-surface); */
+  flex: 1;
+  z-index: -3;
+  overflow: auto;
+  container-type: inline-size;
+}
+@media (min-width: 600px) {
+  .root {
+    z-index: 0;
+  }
+}

package/src/Layout/Sidebar/SidebarViewport/SidebarViewport.tsx

@@ -0,0 +1,11 @@
+import type { ComponentProps } from "react";
+import styles from "./SidebarViewport.module.css";
+import { cn } from "@studiocubics/utils";
+export function SidebarViewport(props: ComponentProps<"div">) {
+  const { children, className, ...rest } = props;
+  return (
+    <div className={cn(styles.root, className)} {...rest}>
+      {children}
+    </div>
+  );
+}

package/src/Layout/Sidebar/_index.ts

@@ -0,0 +1,6 @@
+export * from "./Sidebar";
+export * from "./SidebarBody/SidebarBody";
+export * from "./SidebarDrawer/SidebarDrawer";
+export * from "./SidebarFooter/SidebarFooter";
+export * from "./SidebarHeader/SidebarHeader";
+export * from "./SidebarViewport/SidebarViewport";

package/src/Layout/Table/Table.module.css

@@ -0,0 +1,46 @@
+.root {
+  overflow: auto;
+  max-width: 100%;
+  max-height: 100%;
+}
+.table {
+  display: grid;
+  width: 100%;
+  /* border-collapse: collapse; */
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    sans-serif;
+  font-size: var(--fs-body2);
+  line-height: 1.4;
+  border-radius: var(--shape-br-md);
+  overflow: hidden;
+}
+.tableCell {
+  padding: 8px 12px;
+  border-right: 1px solid var(--color-outline);
+  border-bottom: 1px solid var(--color-outline);
+  background: var(--color-background);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  user-select: none;
+  &:hover {
+    background: var(--color-background-faint);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: -2px;
+  }
+  /* Last column */
+  &:nth-child(n) {
+    border-right: none;
+  }
+  &[data-selected="true"] {
+    background: var(--color-surface);
+    outline: 2px solid var(--color-primary);
+    outline-offset: -2px;
+    z-index: 1;
+  }
+}

package/src/Layout/Table/Table.tsx

@@ -0,0 +1,222 @@
+"use client";
+
+import {
+  createContext,
+  isValidElement,
+  useContext,
+  useRef,
+  useState,
+  type ElementType,
+  type MouseEvent,
+} from "react";
+import { getColumnCount, isAOA, isAOO, isOCR, isOOA } from "./tableUtils";
+import styles from "./Table.module.css";
+import type { CellData, TableContextProps, TableProps } from "./types";
+import type {
+  PolymorphicComponentProps,
+  PolymorphicComponentType,
+} from "@studiocubics/types";
+import { cn, mergeRefs } from "@studiocubics/utils";
+
+const TableContext = createContext<TableContextProps | null>(null);
+
+export function useTable() {
+  const c = useContext(TableContext);
+  if (!c) throw new Error("Components must be wrapped in <Table/>");
+  return c;
+}
+
+/**
+ * Works for data of four types
+ *
+ * **Array of arrays:-**
+ *
+ * ```ts
+ * const aoaData: TableData = [
+    ["name", "email", "age"], // column headers are always 0th element
+    ["pumpernickel", "pump@nick.com", 420],
+    ["rumpelstiltskin", "rump@stilt.com", 96],
+  ];
+ * ```
+ * **Array of objects:-**
+ * 
+ * ```ts
+ * const aooData: TableData = [
+    { name: "pumpernickel", email: "pump@nick.com", age: 420 }, // keys are column headers
+    { name: "rumpelstiltskin", email: "rump@stilt.com", age: 96 },
+  ]; 
+ * ``` 
+ * **Object of arrays:-**
+ * 
+ * ```ts
+ * const ooaData: TableData = {
+    name: ["pumpernickel", "rumpelstiltskin"], // keys are column headers
+    email: ["pump@nick.com", "rump@stilt.com"],
+    age: [420, 96],
+  }; 
+ * ``` 
+ * **Explicit schema + rows:-**
+ * 
+ * ```ts
+ * const ocrData: TableData = {
+    columns: ["name", "email", "age"], // column headers are defined in a seperate columns array
+    rows: [
+      ["pumpernickel", "pump@nick.com", 420],
+      ["rumpelstiltskin", "rump@stilt.com", 96],
+    ],
+  }; 
+ * ``` 
+ */
+export function Table({ data }: TableProps) {
+  const [selectedCell, setSelectedCell] = useState<HTMLElement | null>(null);
+
+  const columnCount = getColumnCount(data);
+  function renderRows() {
+    // AOA (array of arrays)
+    if (isAOA(data)) {
+      return data.map((row, r) =>
+        Array.isArray(row)
+          ? row.map((cell, c) => (
+              <TableCell
+                id={`${r},${c}`}
+                key={`${r},${c}`}
+                // selected={selectedCell[0] === r && selectedCell[1] === c}
+              >
+                {renderCell(cell)}
+              </TableCell>
+            ))
+          : null,
+      );
+    }
+
+    // AOO (array of objects)
+    if (isAOO(data)) {
+      const columns = Object.keys(data[0]);
+
+      return data.map((row, r) =>
+        columns.map((col, c) => (
+          <TableCell
+            id={`${r},${c}`}
+            key={`${r},${c}`}
+            // selected={selectedCell[0] === r && selectedCell[1] === c}
+          >
+            {renderCell(row[col])}
+          </TableCell>
+        )),
+      );
+    }
+
+    // OOA (object of arrays)
+    if (isOOA(data)) {
+      const columns = Object.keys(data);
+      const rowCount = data[columns[0]]?.length ?? 0;
+
+      return Array.from({ length: rowCount }, (_, r) =>
+        columns.map((col, c) => (
+          <TableCell
+            id={`${r},${c}`}
+            key={`${r},${c}`}
+            // selected={selectedCell[0] === r && selectedCell[1] === c}
+          >
+            {renderCell(data[col][r])}
+          </TableCell>
+        )),
+      );
+    }
+
+    // OCR (columns + rows)
+    if (isOCR(data)) {
+      return data.rows.map((row, r) =>
+        row.map((cell, c) => (
+          <TableCell
+            id={`${r},${c}`}
+            key={`${r},${c}`}
+            // selected={selectedCell[0] === r && selectedCell[1] === c}
+          >
+            {renderCell(cell)}
+          </TableCell>
+        )),
+      );
+    }
+
+    return null;
+  }
+
+  return (
+    <TableContext.Provider
+      value={{ selectedCell, setSelectedCell, columnCount }}
+    >
+      <div className={styles.root}>
+        <div
+          className={styles.table}
+          style={{
+            gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))`,
+          }}
+        >
+          {renderRows()}
+        </div>
+      </div>
+    </TableContext.Provider>
+  );
+}
+export interface TableCellBaseProps {}
+
+const defaultElement = "div";
+type DefaultElement = typeof defaultElement;
+
+export type TableCellProps<C extends ElementType = DefaultElement> =
+  PolymorphicComponentProps<C, TableCellBaseProps>;
+
+function TableCellBase<C extends ElementType = DefaultElement>(
+  props: TableCellProps<C>,
+) {
+  const { as, children, ref, onClick, ...rest } =
+    props as TableCellProps<DefaultElement>;
+  const cellRef = useRef<HTMLDivElement>(null);
+  const { setSelectedCell, selectedCell } = useTable();
+
+  const Component = as || defaultElement;
+  const componentProps = {
+    className: cn(
+      styles.tableCell,
+      selectedCell?.id == cellRef.current?.id ? styles.selected : "",
+    ),
+    ref: mergeRefs(cellRef, ref),
+    onClick: handleSelectCell,
+    ...rest,
+  };
+
+  function handleSelectCell(e: MouseEvent<HTMLDivElement>) {
+    setSelectedCell(cellRef.current);
+    onClick?.(e);
+  }
+
+  return <Component {...componentProps}>{children}</Component>;
+}
+
+TableCellBase.displayName = "TableCell";
+
+export const TableCell = TableCellBase as PolymorphicComponentType<
+  TableCellBaseProps,
+  DefaultElement
+>;
+
+export function renderCell(cell: CellData) {
+  if (typeof cell === "boolean") return cell ? "✔" : "❌";
+  if (!cell) return;
+  if (typeof cell === "string" || isValidElement(cell)) return cell;
+  if (typeof cell === "object" && "type" in cell) {
+    switch (cell.type) {
+      case "boolean":
+        return cell.value ? "✔" : "X";
+      case "timestamp":
+        return cell.value.toLocaleString();
+      case "array":
+        return JSON.stringify(cell.value);
+      case "image":
+        return <img src={cell.value} alt={cell.alt} />;
+      default:
+        return cell.value;
+    }
+  }
+}

package/src/Layout/Table/TableFooter.tsx

@@ -0,0 +1,4 @@
+// TODO complete table footer
+export function TableFooter() {
+  return <div>TableFooter</div>;
+}

package/src/Layout/Table/TableHeader.tsx

@@ -0,0 +1,4 @@
+// TODO complete table header
+export function TableHeader() {
+  return <div>TableHeader</div>;
+}

package/src/Layout/Table/_index.ts

@@ -0,0 +1,5 @@
+export * from "./Table";
+export * from "./TableFooter";
+export * from "./TableHeader";
+export * from "./tableUtils";
+export * from "./types";

package/src/Layout/Table/tableUtils.ts

@@ -0,0 +1,142 @@
+import type { TableData, RowData, CellData } from "./types";
+
+/**
+ * Checks if array of arrays:-
+ *
+ * ```ts
+ * const aoaData: TableData = [
+ *   ["name", "email", "age"],
+ *   ["pumpernickel", "pump@nick.com", 420],
+ *   ["rumpelstiltskin", "rump@stilt.com", 96],
+ * ];
+ * ```
+ */
+export function isAOA(data: TableData): data is RowData[] {
+  if (!Array.isArray(data) || data.length === 0) return false;
+
+  if (!Array.isArray(data[0])) return false;
+
+  for (let i = 1; i < data.length; i++) {
+    const row = data[i];
+    if (row === null || (typeof row !== "object" && !Array.isArray(row))) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/*
+ * Checks if array of objects:-
+ *
+ * ```ts
+ * const aooData: TableData = [
+ *   { name: "pumpernickel", email: "pump@nick.com", age: 420 },
+ *   { name: "rumpelstiltskin", email: "rump@stilt.com", age: 96 },
+ * ];
+ * ```
+ */
+export function isAOO(
+  data: TableData,
+): data is { [column: string]: CellData }[] {
+  if (!Array.isArray(data) || data.length === 0) return false;
+
+  for (let i = 0; i < data.length; i++) {
+    const row = data[i];
+    if (row === null || typeof row !== "object" || Array.isArray(row)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/**
+ * Checks if object of arrays:-
+ *
+ * ```ts
+ * const ooaData: TableData = {
+ *   name: ["pumpernickel", "rumpelstiltskin"],
+ *   email: ["pump@nick.com", "rump@stilt.com"],
+ *   age: [420, 96],
+ * };
+ * ```
+ */
+export function isOOA(
+  data: TableData,
+): data is { [column: string]: CellData[] } {
+  if (
+    data === null ||
+    typeof data !== "object" ||
+    Array.isArray(data) ||
+    "columns" in data
+  ) {
+    return false;
+  }
+
+  for (const value of Object.values(data)) {
+    if (!Array.isArray(value)) return false;
+  }
+  return true;
+}
+
+/**
+ * Checks if explicit schema + rows:-
+ *
+ * ```ts
+ * const ocrData: TableData = {
+ *   columns: ["name", "email", "age"],
+ *   rows: [
+ *     ["pumpernickel", "pump@nick.com", 420],
+ *     ["rumpelstiltskin", "rump@stilt.com", 96],
+ *   ],
+ * };
+ * ```
+ */
+export function isOCR(
+  data: TableData,
+): data is { columns: CellData[]; rows: CellData[][] } {
+  if (data === null || typeof data !== "object" || Array.isArray(data)) {
+    return false;
+  }
+
+  const d = data as any;
+
+  if (!Array.isArray(d.columns) || !Array.isArray(d.rows)) {
+    return false;
+  }
+
+  for (let i = 0; i < d.rows.length; i++) {
+    if (!Array.isArray(d.rows[i])) return false;
+  }
+
+  return true;
+}
+
+/**
+ * Returns the column count for any supported TableData shape.
+ * Assumes the data has already been validated with the appropriate is* guard.
+ */
+export function getColumnCount(data: TableData): number {
+  // Array of arrays (AOA)
+  if (Array.isArray(data)) {
+    if (data.length === 0) return 0;
+
+    const firstRow = data[0];
+
+    // Header row (AOA)
+    if (Array.isArray(firstRow)) {
+      return firstRow.length;
+    }
+
+    // Array of objects (AOO)
+    return Object.keys(firstRow).length;
+  }
+
+  // Object of arrays (OOA)
+  if ("columns" in data && "rows" in data) {
+    // Explicit columns + rows (OCR)
+    return data.columns.length;
+  }
+
+  // Object of arrays (OOA)
+  return Object.keys(data).length;
+}

package/src/Layout/Table/types.ts

@@ -0,0 +1,48 @@
+import type { SetState } from "@studiocubics/types";
+import type { ReactNode } from "react";
+
+export type TableData =
+  | RowData[]
+  | { columns: CellData[]; rows: CellData[][] }
+  | { [column: string]: CellData[] };
+
+export type RowData = { [column: string]: CellData } | CellData[];
+export type ITableCell = {
+  defaultSelected?: boolean;
+} & (
+  | {
+      value: Date;
+      type: "timestamp";
+    }
+  | {
+      value: (string | number)[];
+      type: "array";
+    }
+  | {
+      value: string;
+      type: "string";
+    }
+  | {
+      value: number;
+      type: "number";
+    }
+  | {
+      alt: string;
+      value: string;
+      type: "image";
+    }
+  | {
+      value: boolean;
+      type: "boolean";
+    }
+);
+export type CellData = ITableCell | ReactNode;
+export interface TableContextProps {
+  selectedCell: HTMLElement | null;
+  setSelectedCell: SetState<HTMLElement | null>;
+  columnCount: number;
+}
+export interface TableProps {
+  data: TableData;
+  showMarker?: boolean;
+}

package/src/Layout/_index.ts

@@ -0,0 +1,8 @@
+export * from "./Dialog/Dialog";
+export * from "./PageLayout/PageLayout";
+export * from "./PageLayoutPagination/PageLayoutPagination";
+export * from "./PageLayoutTabs/PageLayoutTabs";
+export * from "./Popover/Popover";
+export * from "./SectionWrapper/SectionWrapper";
+export * from "./Sidebar/_index";
+export * from "./Table/_index";

package/src/Misc/Cursor/Cursor.module.css

@@ -0,0 +1,31 @@
+.root {
+  position: fixed;
+  width: 100%;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  isolation: isolate;
+  pointer-events: none;
+}
+.main {
+  /* --cursor-mouse-down-size: 11em; */
+  background: radial-gradient(
+    41.94% 82.95% at 50% 50%,
+    color-mix(in srgb, var(--color-primary) 50%, transparent) 0%,
+    color-mix(in srgb, var(--color-secondary) 50%, transparent) 100%
+  );
+  filter: blur(90px);
+
+  position: absolute;
+  transition-property: width, height, filter;
+  transition-duration: var(--transition-time);
+  transition-timing-function: var(--transition-tf);
+  translate: -50% -50%;
+  border-radius: 50%;
+}
+/* .mouseDowned {
+  filter: blur(50px);
+  width: calc(1.618 * var(--cursor-mouse-down-size));
+  height: var(--cursor-mouse-down-size);
+} */