@studiocubics/components 0.0.1 → 0.0.2

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

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

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

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

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

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

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

@@ -1,11 +0,0 @@
-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/Table/Table.module.css

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

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

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

package/src/Layout/Table/TableHeader.tsx

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

package/src/Layout/Table/tableUtils.ts

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

@@ -1,48 +0,0 @@
-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/Misc/Cursor/Cursor.module.css

@@ -1,31 +0,0 @@
-.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);
-} */