@pstdio/ui 0.0.3 → 0.1.0

package/src/theme/tokens/text.ts

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

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

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

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

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

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