diff --git a/cypress/support/component-index.html b/cypress/support/component-index.html index ac6e79f..faf3b5f 100644 --- a/cypress/support/component-index.html +++ b/cypress/support/component-index.html @@ -1,12 +1,12 @@ - + - - - + + + Components App
- \ No newline at end of file + diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts index e4e246e..48ff15e 100644 --- a/cypress/support/e2e.ts +++ b/cypress/support/e2e.ts @@ -12,6 +12,5 @@ // You can read more here: // https://on.cypress.io/configuration // *********************************************************** - // Import commands.js using ES2015 syntax: -import './commands' \ No newline at end of file +import "./commands"; diff --git a/eslint.config.js b/eslint.config.js index 092408a..0bc6f98 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -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 }, ], }, }, -) +); diff --git a/package.json b/package.json index 681d1af..7f90ce3 100644 --- a/package.json +++ b/package.json @@ -42,9 +42,15 @@ }, "prettier": { "importOrder": [ - "^@core/(.*)$", - "^@server/(.*)$", - "^@ui/(.*)$", + "^react$", + "^react-dom(.*)$", + "^react(.*)$", + "^@(?!(components|hooks|providers|/))(.*)$", + "^(?!@|[.])(.*)$", + "^@/(.*)$", + "^@components(.*)$", + "^@hooks(.*)$", + "^@providers(.*)$", "^[./]" ], "importOrderSeparation": true, diff --git a/src/App.tsx b/src/App.tsx index ba9d92b..bb2d556 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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 diff --git a/src/components/ColorValues/ColorValues.module.css b/src/components/ColorValues/ColorValues.module.css index 28553a2..a6a2a2b 100644 --- a/src/components/ColorValues/ColorValues.module.css +++ b/src/components/ColorValues/ColorValues.module.css @@ -6,6 +6,11 @@ .valueItem { } +/* Component Editor */ + +.componentWrapper { +} + /* Large - Landscape Tablets / Desktops */ /* Medium - Portrait Tablets */ /* Horizontal layout, vertically scrolling picker and palette content */ diff --git a/src/components/SideMenu/SideMenu.tsx b/src/components/SideMenu/SideMenu.tsx index 5827afa..6ab7961 100644 --- a/src/components/SideMenu/SideMenu.tsx +++ b/src/components/SideMenu/SideMenu.tsx @@ -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 { diff --git a/src/components/SideMenu/index.ts b/src/components/SideMenu/index.ts index 2be693a..5747395 100644 --- a/src/components/SideMenu/index.ts +++ b/src/components/SideMenu/index.ts @@ -1,2 +1,3 @@ import { LeftMenu, RightMenu } from "./SideMenu"; + export { LeftMenu, RightMenu }; diff --git a/src/hooks/animation.ts b/src/hooks/animation.ts index e177fb7..1a6af1e 100644 --- a/src/hooks/animation.ts +++ b/src/hooks/animation.ts @@ -1,4 +1,4 @@ -import { useRef, useCallback } from "react"; +import { useCallback, useRef } from "react"; export function useSmoothAnimation() { const animationRef = useRef(null); diff --git a/src/hooks/crosshair.tsx b/src/hooks/crosshair.tsx index e6ba5dc..2a39a17 100644 --- a/src/hooks/crosshair.tsx +++ b/src/hooks/crosshair.tsx @@ -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 diff --git a/src/hooks/dragAndDrop.tsx b/src/hooks/dragAndDrop.tsx index f2c2c7a..c1c5483 100644 --- a/src/hooks/dragAndDrop.tsx +++ b/src/hooks/dragAndDrop.tsx @@ -5,7 +5,7 @@ import { extractEventCoordinates, isLeftMouseButton, isTouchEvent, -} from "../util"; +} from "@/util"; type DragAction = | { type: "resetItems"; items: T[] } diff --git a/src/hooks/scroll.ts b/src/hooks/scroll.ts index 4e40c18..b9670de 100644 --- a/src/hooks/scroll.ts +++ b/src/hooks/scroll.ts @@ -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( diff --git a/src/hooks/slider.tsx b/src/hooks/slider.tsx index 090e147..aed15f5 100644 --- a/src/hooks/slider.tsx +++ b/src/hooks/slider.tsx @@ -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") { diff --git a/src/hooks/tests/crosshairTest.cy.tsx b/src/hooks/tests/crosshairTest.cy.tsx index e84db0f..a547b5c 100644 --- a/src/hooks/tests/crosshairTest.cy.tsx +++ b/src/hooks/tests/crosshairTest.cy.tsx @@ -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 diff --git a/src/hooks/tests/dragAndDropTest.cy.tsx b/src/hooks/tests/dragAndDropTest.cy.tsx index cff5373..df20532 100644 --- a/src/hooks/tests/dragAndDropTest.cy.tsx +++ b/src/hooks/tests/dragAndDropTest.cy.tsx @@ -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"; diff --git a/src/hooks/tests/sliderTest.cy.tsx b/src/hooks/tests/sliderTest.cy.tsx index 8e22a9f..dc4c77b 100644 --- a/src/hooks/tests/sliderTest.cy.tsx +++ b/src/hooks/tests/sliderTest.cy.tsx @@ -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 diff --git a/src/main.tsx b/src/main.tsx index 5493032..cf16e0a 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,4 +1,5 @@ import { StrictMode } from "react"; + import { createRoot } from "react-dom/client"; import App from "./App.tsx"; diff --git a/src/providers/hooks.ts b/src/providers/hooks.ts index 7f280ba..ac06ce8 100644 --- a/src/providers/hooks.ts +++ b/src/providers/hooks.ts @@ -1,4 +1,5 @@ import { useContext } from "react"; + import { MediaQueryContext } from "./MediaQueryProvider"; function useMediaQuery() { diff --git a/tsconfig.app.json b/tsconfig.app.json index 8f19b42..3b06989 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -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"] } diff --git a/vite.config.ts b/vite.config.ts index dc75322..66f23a9 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -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, },