@pstdio/ui 0.0.1

package/src/theme/tokens/text.ts

@@ -0,0 +1,236 @@
+import { defineTextStyles } from "@chakra-ui/react";
+
+export const textStyles = defineTextStyles({
+  brand: {
+    value: {
+      fontFamily: "brand",
+      fontSize: "3xl",
+      fontWeight: "500",
+    },
+  },
+  "heading/display/L": {
+    value: {
+      fontFamily: "display",
+      fontWeight: "600",
+      fontSize: ["5xl", "5xl", "5xl", "6xl"],
+      lineHeight: "120%",
+    },
+  },
+  "heading/display/M": {
+    value: {
+      fontFamily: "display",
+      fontWeight: "600",
+      fontSize: ["4xl", "5xl"],
+      lineHeight: "120%",
+    },
+  },
+  "heading/display/S": {
+    value: {
+      fontFamily: "display",
+      fontWeight: "600",
+      fontSize: ["3xl", "4xl"],
+      lineHeight: "120%",
+    },
+  },
+  "heading/XL": {
+    value: {
+      fontFamily: "heading",
+      fontSize: "5xl",
+      fontWeight: "500",
+      lineHeight: "120%",
+    },
+  },
+  "heading/L": {
+    value: {
+      fontFamily: "heading",
+      fontSize: "4xl",
+      fontWeight: "500",
+      lineHeight: "110%",
+    },
+  },
+  "heading/M": {
+    value: {
+      fontFamily: "heading",
+      fontSize: "3xl",
+      fontWeight: "500",
+      lineHeight: "120%",
+    },
+  },
+  "heading/S": {
+    value: {
+      fontFamily: "heading",
+      fontSize: "2xl",
+      fontWeight: "500",
+      lineHeight: "120%",
+    },
+  },
+  "label/XL/regular": {
+    value: {
+      fontFamily: "label",
+      fontSize: "2xl",
+      fontWeight: "400",
+      lineHeight: "150%",
+      letterSpacing: "0.16px",
+    },
+  },
+  "label/L/regular": {
+    value: {
+      fontFamily: "label",
+      fontSize: "lg",
+      fontWeight: "400",
+      lineHeight: "20px",
+      letterSpacing: "0.16px",
+    },
+  },
+  "label/L/medium": {
+    value: {
+      fontFamily: "label",
+      fontSize: "lg",
+      fontWeight: "500",
+      lineHeight: "20px",
+      letterSpacing: "0.16px",
+    },
+  },
+  "label/L/medium/underline": {
+    value: {
+      textDecoration: "underline",
+      fontFamily: "label",
+      fontSize: "lg",
+      fontWeight: "500",
+      lineHeight: "20px",
+      letterSpacing: "0.16px",
+    },
+  },
+  "label/L/medium/uppercase": {
+    value: {
+      letterSpacing: "0.089rem",
+      fontFamily: "label",
+      fontWeight: "600",
+      fontSize: "lg",
+      lineHeight: "150%",
+      textTransform: "uppercase",
+      color: "fg.muted",
+    },
+  },
+  "label/M/regular": {
+    value: {
+      fontFamily: "label",
+      fontSize: "md",
+      fontWeight: "400",
+      lineHeight: "150%",
+      letterSpacing: "0.14px",
+    },
+  },
+  "label/M/regular/underline": {
+    value: {
+      fontFamily: "label",
+      fontSize: "md",
+      fontWeight: "400",
+      lineHeight: "150%",
+      textDecoration: "underline",
+      letterSpacing: "0.14px",
+    },
+  },
+  "label/M/medium": {
+    value: {
+      fontFamily: "label",
+      fontSize: "md",
+      fontWeight: "500",
+      lineHeight: "150%",
+      letterSpacing: "0.14px",
+    },
+  },
+  "label/S/regular": {
+    value: {
+      fontFamily: "label",
+      fontSize: "sm",
+      fontWeight: "400",
+      lineHeight: "150%",
+      letterSpacing: "0.12px",
+    },
+  },
+  "label/S/medium": {
+    value: {
+      fontFamily: "label",
+      fontSize: "sm",
+      fontWeight: "500",
+      lineHeight: "150%",
+      letterSpacing: "0.12px",
+    },
+  },
+  "label/S/italic": {
+    value: {
+      fontFamily: "label",
+      fontSize: "sm",
+      fontWeight: "400",
+      lineHeight: "150%",
+      letterSpacing: "0.12px",
+      fontStyle: "italic",
+    },
+  },
+  "label/XS": {
+    value: {
+      fontFamily: "label",
+      fontSize: "xs",
+      fontWeight: "400",
+      lineHeight: "150%",
+      letterSpacing: "0.1px",
+    },
+  },
+  "paragraph/M/regular": {
+    value: {
+      fontFamily: "body",
+      fontSize: "md",
+      fontWeight: "400",
+      lineHeight: "171%",
+      letterSpacing: "0.14px",
+    },
+  },
+  "paragraph/M/medium": {
+    value: {
+      fontFamily: "body",
+      fontSize: "md",
+      fontWeight: "500",
+      lineHeight: "171%",
+      letterSpacing: "0.14px",
+    },
+  },
+  "paragraph/L/regular": {
+    value: {
+      fontFamily: "body",
+      fontSize: "lg",
+      fontWeight: "400",
+      lineHeight: "150%",
+      letterSpacing: "0.14px",
+    },
+  },
+  "paragraph/L/medium": {
+    value: {
+      fontFamily: "body",
+      fontSize: "lg",
+      fontWeight: "500",
+      lineHeight: "150%",
+      letterSpacing: "0.14px",
+    },
+  },
+  "paragraph/XL/regular": {
+    value: {
+      fontFamily: "body",
+      fontWeight: "400",
+      lineHeight: "150%",
+      fontSize: ["xl", "2xl"],
+      color: "fg",
+      letterSpacing: "0.14px",
+    },
+  },
+  "paragraph/XL/medium": {
+    value: {
+      fontFamily: "body",
+      fontWeight: "500",
+      lineHeight: "150%",
+      fontSize: ["xl", "2xl"],
+      color: "fg",
+      letterSpacing: "0.14px",
+    },
+  },
+} satisfies Parameters<typeof defineTextStyles>[0]);

package/src/utils/apply-theme-preference.ts

@@ -0,0 +1,17 @@
+export type ThemePreference = "light" | "dark";
+
+export const applyThemePreference = (theme: ThemePreference) => {
+  if (typeof document === "undefined") return;
+
+  const root = document.documentElement;
+  const body = document.body;
+  const opposite = theme === "dark" ? "light" : "dark";
+
+  for (const el of [root, body]) {
+    if (!el) continue;
+    el.classList.remove(opposite);
+    el.classList.add(theme);
+    el.setAttribute("data-theme", theme);
+    el.style.colorScheme = theme;
+  }
+};

package/src/utils/formats.ts

@@ -0,0 +1,27 @@
+import { format, isSameYear, parseISO } from "date-fns";
+
+export const getTimeFormat = (time: string) => {
+  const parsedTime = parseISO(time);
+  const currentTime = new Date();
+
+  if (isSameYear(parsedTime, currentTime)) {
+    return format(parsedTime, "HH:mm MMM dd");
+  }
+
+  return format(parsedTime, "HH:mm MMM dd, yyyy");
+};
+
+export const shortenId = (value: string) => {
+  if (value.length <= 14) {
+    return value;
+  }
+
+  return `${value.slice(0, 8)}...${value.slice(-4)}`;
+};
+
+export const formats = {
+  getTimeFormat,
+  shortenId,
+};
+
+export type ThemeFormats = typeof formats;

package/src/utils/get-file-type-icon.ts

@@ -0,0 +1,52 @@
+import type { LucideIcon } from "lucide-react";
+import {
+  File,
+  FileArchive,
+  FileChartLine,
+  FileCode,
+  FileCog,
+  FileImage,
+  FileJson,
+  FileSpreadsheet,
+  FileText,
+} from "lucide-react";
+
+export const getFileTypeIcon = (filename: string): LucideIcon => {
+  const extension = filename.split(".").pop()?.toLowerCase() ?? "";
+
+  if (["csv", "tsv", "xlsx", "xls", "parquet"].includes(extension)) return FileSpreadsheet;
+  if (
+    [
+      "sql",
+      "py",
+      "js",
+      "ts",
+      "jsx",
+      "tsx",
+      "java",
+      "cpp",
+      "c",
+      "h",
+      "css",
+      "scss",
+      "sass",
+      "php",
+      "rb",
+      "go",
+      "rs",
+      "kt",
+      "swift",
+    ].includes(extension)
+  ) {
+    return FileCode;
+  }
+  if (["json", "jsonl", "ndjson"].includes(extension)) {
+    if (filename.includes("/visualizations/")) return FileChartLine;
+    return FileJson;
+  }
+  if (["md", "txt", "rst", "org", "pdf", "doc", "docx", "rtf"].includes(extension)) return FileText;
+  if (["yaml", "yml", "toml", "ini", "conf", "config"].includes(extension)) return FileCog;
+  if (["png", "jpg", "jpeg", "gif", "svg", "webp", "ico"].includes(extension)) return FileImage;
+  if (["zip", "tar", "gz", "rar", "7z"].includes(extension)) return FileArchive;
+  return File;
+};

package/src/utils/theme-preference.tsx

@@ -0,0 +1,60 @@
+import { createContext, type ReactNode, useContext, useEffect, useState } from "react";
+
+import { applyThemePreference, type ThemePreference } from "./apply-theme-preference";
+
+const STORAGE_KEY = "theme-preference";
+
+const ThemePreferenceContext = createContext<ThemePreferenceContextValue | null>(null);
+
+interface ThemePreferenceContextValue {
+  themePreference: ThemePreference;
+  setThemePreference: (preference: ThemePreference) => void;
+  toggleThemePreference: () => void;
+}
+
+interface ThemePreferenceProviderProps {
+  children: ReactNode;
+  initialPreference?: ThemePreference;
+}
+
+export const getInitialThemePreference = () => {
+  if (typeof window === "undefined") return "light";
+
+  const stored = window.localStorage.getItem(STORAGE_KEY);
+  if (stored === "dark" || stored === "light") return stored;
+
+  const prefersDark =
+    typeof window.matchMedia === "function" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+  return prefersDark ? "dark" : "light";
+};
+
+export const ThemePreferenceProvider = (props: ThemePreferenceProviderProps) => {
+  const { children, initialPreference = getInitialThemePreference() } = props;
+  const [themePreference, setThemePreference] = useState<ThemePreference>(initialPreference);
+
+  useEffect(() => {
+    applyThemePreference(themePreference);
+    if (typeof window !== "undefined") {
+      window.localStorage.setItem(STORAGE_KEY, themePreference);
+    }
+  }, [themePreference]);
+
+  const toggleThemePreference = () => setThemePreference((prev) => (prev === "dark" ? "light" : "dark"));
+
+  return (
+    <ThemePreferenceContext value={{ themePreference, setThemePreference, toggleThemePreference }}>
+      {children}
+    </ThemePreferenceContext>
+  );
+};
+
+export const useThemePreference = () => {
+  const context = useContext(ThemePreferenceContext);
+
+  if (!context) {
+    throw new Error("useThemePreference must be used within a ThemePreferenceProvider");
+  }
+
+  return context;
+};

package/src/vite-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare module "*.css" {
+  const content: string;
+  export default content;
+}