Use @ alias imports. Formatted files.

2025-08-01 23:28:56 -04:00
parent 68c7486725
commit f639876604
20 changed files with 82 additions and 42 deletions
@@ -1,9 +1,9 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Components App</title>
  </head>
  <body>
@@ -12,6 +12,5 @@
 // You can read more here:
 // https://on.cypress.io/configuration
 // ***********************************************************
-
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "./commands";
@@ -1,28 +1,29 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+import js from "@eslint/js";
+
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import globals from "globals";
+import tseslint from "typescript-eslint";

 export default tseslint.config(
-  { ignores: ['dist'] },
+  { ignores: ["dist"] },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
+    files: ["**/*.{ts,tsx}"],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
+      "react-refresh/only-export-components": [
+        "warn",
        { allowConstantExport: true },
      ],
    },
  },
-)
+);
@@ -42,9 +42,15 @@
  },
  "prettier": {
    "importOrder": [
-      "^@core/(.*)$",
-      "^@server/(.*)$",
-      "^@ui/(.*)$",
+      "^react$",
+      "^react-dom(.*)$",
+      "^react(.*)$",
+      "^@(?!(components|hooks|providers|/))(.*)$",
+      "^(?!@|[.])(.*)$",
+      "^@/(.*)$",
+      "^@components(.*)$",
+      "^@hooks(.*)$",
+      "^@providers(.*)$",
      "^[./]"
    ],
    "importOrderSeparation": true,
@@ -1,11 +1,14 @@
-import clsx from "clsx";
 import { useState } from "react";

+import clsx from "clsx";
+
+import ColorPicker from "@components/ColorPicker/ColorPicker";
+import ColorValues from "@components/ColorValues/ColorValues";
+import { LeftMenu, RightMenu } from "@components/SideMenu";
+
+import { useMediaQuery } from "@providers/hooks";
+
 import styles from "./App.module.css";
-import ColorPicker from "./components/ColorPicker/ColorPicker";
-import ColorValues from "./components/ColorValues/ColorValues";
-import { LeftMenu, RightMenu } from "./components/SideMenu";
-import { useMediaQuery } from "./providers/hooks";

 // Menu Button Components

@@ -6,6 +6,11 @@
 .valueItem {
 }

+/* Component Editor */
+
+.componentWrapper {
+}
+
 /* Large - Landscape Tablets / Desktops */
 /* Medium - Portrait Tablets */
 /* Horizontal layout, vertically scrolling picker and palette content */
@@ -1,6 +1,7 @@
-import clsx from "clsx";
 import type { ReactNode } from "react";

+import clsx from "clsx";
+
 import styles from "./SideMenu.module.css";

 interface SideMenuProps {
@@ -1,2 +1,3 @@
 import { LeftMenu, RightMenu } from "./SideMenu";
+
 export { LeftMenu, RightMenu };
@@ -1,4 +1,4 @@
-import { useRef, useCallback } from "react";
+import { useCallback, useRef } from "react";

 export function useSmoothAnimation() {
  const animationRef = useRef<number | null>(null);
@@ -1,13 +1,13 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { Dispatch, SetStateAction } from "react";

-import type { CartesianSpace } from "../types";
+import type { CartesianSpace } from "@/types";
 import {
  extractEventCoordinates,
  isLeftMouseButton,
  isTouchEvent,
  minmax,
-} from "../util";
+} from "@/util";

 if (typeof TouchEvent === "undefined") {
  // @ts-ignore - intentionally creating global
@@ -5,7 +5,7 @@ import {
  extractEventCoordinates,
  isLeftMouseButton,
  isTouchEvent,
-} from "../util";
+} from "@/util";

 type DragAction<T> =
  | { type: "resetItems"; items: T[] }
@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect, useCallback } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type { RefObject } from "react";

 export function handleScroll(
@@ -1,13 +1,14 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { Dispatch, SetStateAction } from "react";

-import type { CartesianSpace } from "../types";
+import type { CartesianSpace } from "@/types";
 import {
  extractEventCoordinates,
  isLeftMouseButton,
  isTouchEvent,
  minmax,
-} from "../util";
+} from "@/util";
+
 import { useScroll } from "./scroll";

 if (typeof TouchEvent === "undefined") {
@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from "react";

-import type { CartesianSpace } from "../../types";
+import type { CartesianSpace } from "@/types";
+
 import { useCrosshair } from "../crosshair";

 // Test Fixtures
@@ -1,6 +1,7 @@
+import { useState } from "react";
+
 import clsx from "clsx";
 import { motion } from "motion/react";
-import { useState } from "react";

 import { useDragAndDrop } from "../dragAndDrop";
 import styles from "./dragAndDropTest.module.css";
@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from "react";

-import type { CartesianSpace } from "../../types";
+import type { CartesianSpace } from "@/types";
+
 import { Direction, useSlider } from "../slider";

 // Test Fixtures
@@ -1,4 +1,5 @@
 import { StrictMode } from "react";
+
 import { createRoot } from "react-dom/client";

 import App from "./App.tsx";
@@ -1,4 +1,5 @@
 import { useContext } from "react";
+
 import { MediaQueryContext } from "./MediaQueryProvider";

 function useMediaQuery() {
@@ -6,7 +6,7 @@
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
-    "types": ["cypress", "node", "cypress-real-events"],
+    "types": ["cypress", "node"],

    /* Bundler mode */
    "moduleResolution": "bundler",
@@ -21,7 +21,15 @@
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@components/*": ["./src/components/*"],
+      "@hooks/*": ["./src/hooks/*"],
+      "@providers/*": ["./src/providers/*"]
+    }
  },
  "include": ["src", "cypress"]
 }
@@ -1,11 +1,21 @@
-import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
-import wasm from "vite-plugin-wasm";
+
+import path from "path";
+import { defineConfig } from "vite";
 import topLevelAwait from "vite-plugin-top-level-await";
+import wasm from "vite-plugin-wasm";

 // https://vite.dev/config/
 export default defineConfig({
  plugins: [react(), wasm(), topLevelAwait()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+      "@components": path.resolve(__dirname, "./src/components"),
+      "@hooks": path.resolve(__dirname, "./src/hooks"),
+      "@providers": path.resolve(__dirname, "./src/providers"),
+    },
+  },
  server: {
    port: 5173,
  },