Use @ alias imports. Formatted files.

This commit is contained in:
Jay
2025-08-01 23:28:56 -04:00
parent 68c7486725
commit f639876604
20 changed files with 82 additions and 42 deletions
+4 -4
View File
@@ -1,9 +1,9 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Components App</title> <title>Components App</title>
</head> </head>
<body> <body>
+1 -2
View File
@@ -12,6 +12,5 @@
// You can read more here: // You can read more here:
// https://on.cypress.io/configuration // https://on.cypress.io/configuration
// *********************************************************** // ***********************************************************
// Import commands.js using ES2015 syntax: // Import commands.js using ES2015 syntax:
import './commands' import "./commands";
+13 -12
View File
@@ -1,28 +1,29 @@
import js from '@eslint/js' import js from "@eslint/js";
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks' import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from 'eslint-plugin-react-refresh' import reactRefresh from "eslint-plugin-react-refresh";
import tseslint from 'typescript-eslint' import globals from "globals";
import tseslint from "typescript-eslint";
export default tseslint.config( export default tseslint.config(
{ ignores: ['dist'] }, { ignores: ["dist"] },
{ {
extends: [js.configs.recommended, ...tseslint.configs.recommended], extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ['**/*.{ts,tsx}'], files: ["**/*.{ts,tsx}"],
languageOptions: { languageOptions: {
ecmaVersion: 2020, ecmaVersion: 2020,
globals: globals.browser, globals: globals.browser,
}, },
plugins: { plugins: {
'react-hooks': reactHooks, "react-hooks": reactHooks,
'react-refresh': reactRefresh, "react-refresh": reactRefresh,
}, },
rules: { rules: {
...reactHooks.configs.recommended.rules, ...reactHooks.configs.recommended.rules,
'react-refresh/only-export-components': [ "react-refresh/only-export-components": [
'warn', "warn",
{ allowConstantExport: true }, { allowConstantExport: true },
], ],
}, },
}, },
) );
+9 -3
View File
@@ -42,9 +42,15 @@
}, },
"prettier": { "prettier": {
"importOrder": [ "importOrder": [
"^@core/(.*)$", "^react$",
"^@server/(.*)$", "^react-dom(.*)$",
"^@ui/(.*)$", "^react(.*)$",
"^@(?!(components|hooks|providers|/))(.*)$",
"^(?!@|[.])(.*)$",
"^@/(.*)$",
"^@components(.*)$",
"^@hooks(.*)$",
"^@providers(.*)$",
"^[./]" "^[./]"
], ],
"importOrderSeparation": true, "importOrderSeparation": true,
+8 -5
View File
@@ -1,11 +1,14 @@
import clsx from "clsx";
import { useState } from "react"; 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 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 // Menu Button Components
@@ -6,6 +6,11 @@
.valueItem { .valueItem {
} }
/* Component Editor */
.componentWrapper {
}
/* Large - Landscape Tablets / Desktops */ /* Large - Landscape Tablets / Desktops */
/* Medium - Portrait Tablets */ /* Medium - Portrait Tablets */
/* Horizontal layout, vertically scrolling picker and palette content */ /* Horizontal layout, vertically scrolling picker and palette content */
+2 -1
View File
@@ -1,6 +1,7 @@
import clsx from "clsx";
import type { ReactNode } from "react"; import type { ReactNode } from "react";
import clsx from "clsx";
import styles from "./SideMenu.module.css"; import styles from "./SideMenu.module.css";
interface SideMenuProps { interface SideMenuProps {
+1
View File
@@ -1,2 +1,3 @@
import { LeftMenu, RightMenu } from "./SideMenu"; import { LeftMenu, RightMenu } from "./SideMenu";
export { LeftMenu, RightMenu }; export { LeftMenu, RightMenu };
+1 -1
View File
@@ -1,4 +1,4 @@
import { useRef, useCallback } from "react"; import { useCallback, useRef } from "react";
export function useSmoothAnimation() { export function useSmoothAnimation() {
const animationRef = useRef<number | null>(null); const animationRef = useRef<number | null>(null);
+2 -2
View File
@@ -1,13 +1,13 @@
import { useCallback, useEffect, useRef, useState } from "react"; import { useCallback, useEffect, useRef, useState } from "react";
import type { Dispatch, SetStateAction } from "react"; import type { Dispatch, SetStateAction } from "react";
import type { CartesianSpace } from "../types"; import type { CartesianSpace } from "@/types";
import { import {
extractEventCoordinates, extractEventCoordinates,
isLeftMouseButton, isLeftMouseButton,
isTouchEvent, isTouchEvent,
minmax, minmax,
} from "../util"; } from "@/util";
if (typeof TouchEvent === "undefined") { if (typeof TouchEvent === "undefined") {
// @ts-ignore - intentionally creating global // @ts-ignore - intentionally creating global
+1 -1
View File
@@ -5,7 +5,7 @@ import {
extractEventCoordinates, extractEventCoordinates,
isLeftMouseButton, isLeftMouseButton,
isTouchEvent, isTouchEvent,
} from "../util"; } from "@/util";
type DragAction<T> = type DragAction<T> =
| { type: "resetItems"; items: T[] } | { type: "resetItems"; items: T[] }
+1 -1
View File
@@ -1,4 +1,4 @@
import { useState, useRef, useEffect, useCallback } from "react"; import { useCallback, useEffect, useRef, useState } from "react";
import type { RefObject } from "react"; import type { RefObject } from "react";
export function handleScroll( export function handleScroll(
+3 -2
View File
@@ -1,13 +1,14 @@
import { useCallback, useEffect, useRef, useState } from "react"; import { useCallback, useEffect, useRef, useState } from "react";
import type { Dispatch, SetStateAction } from "react"; import type { Dispatch, SetStateAction } from "react";
import type { CartesianSpace } from "../types"; import type { CartesianSpace } from "@/types";
import { import {
extractEventCoordinates, extractEventCoordinates,
isLeftMouseButton, isLeftMouseButton,
isTouchEvent, isTouchEvent,
minmax, minmax,
} from "../util"; } from "@/util";
import { useScroll } from "./scroll"; import { useScroll } from "./scroll";
if (typeof TouchEvent === "undefined") { if (typeof TouchEvent === "undefined") {
+2 -1
View File
@@ -1,6 +1,7 @@
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import type { CartesianSpace } from "../../types"; import type { CartesianSpace } from "@/types";
import { useCrosshair } from "../crosshair"; import { useCrosshair } from "../crosshair";
// Test Fixtures // Test Fixtures
+2 -1
View File
@@ -1,6 +1,7 @@
import { useState } from "react";
import clsx from "clsx"; import clsx from "clsx";
import { motion } from "motion/react"; import { motion } from "motion/react";
import { useState } from "react";
import { useDragAndDrop } from "../dragAndDrop"; import { useDragAndDrop } from "../dragAndDrop";
import styles from "./dragAndDropTest.module.css"; import styles from "./dragAndDropTest.module.css";
+2 -1
View File
@@ -1,6 +1,7 @@
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import type { CartesianSpace } from "../../types"; import type { CartesianSpace } from "@/types";
import { Direction, useSlider } from "../slider"; import { Direction, useSlider } from "../slider";
// Test Fixtures // Test Fixtures
+1
View File
@@ -1,4 +1,5 @@
import { StrictMode } from "react"; import { StrictMode } from "react";
import { createRoot } from "react-dom/client"; import { createRoot } from "react-dom/client";
import App from "./App.tsx"; import App from "./App.tsx";
+1
View File
@@ -1,4 +1,5 @@
import { useContext } from "react"; import { useContext } from "react";
import { MediaQueryContext } from "./MediaQueryProvider"; import { MediaQueryContext } from "./MediaQueryProvider";
function useMediaQuery() { function useMediaQuery() {
+10 -2
View File
@@ -6,7 +6,7 @@
"lib": ["ES2020", "DOM", "DOM.Iterable"], "lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext", "module": "ESNext",
"skipLibCheck": true, "skipLibCheck": true,
"types": ["cypress", "node", "cypress-real-events"], "types": ["cypress", "node"],
/* Bundler mode */ /* Bundler mode */
"moduleResolution": "bundler", "moduleResolution": "bundler",
@@ -21,7 +21,15 @@
"noUnusedLocals": true, "noUnusedLocals": true,
"noUnusedParameters": true, "noUnusedParameters": true,
"noFallthroughCasesInSwitch": true, "noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true "noUncheckedSideEffectImports": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"],
"@components/*": ["./src/components/*"],
"@hooks/*": ["./src/hooks/*"],
"@providers/*": ["./src/providers/*"]
}
}, },
"include": ["src", "cypress"] "include": ["src", "cypress"]
} }
+12 -2
View File
@@ -1,11 +1,21 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react"; 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 topLevelAwait from "vite-plugin-top-level-await";
import wasm from "vite-plugin-wasm";
// https://vite.dev/config/ // https://vite.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [react(), wasm(), topLevelAwait()], 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: { server: {
port: 5173, port: 5173,
}, },