From fa641c186cb649362991a524ce719c3c97eb5b0c Mon Sep 17 00:00:00 2001 From: Jay Date: Fri, 1 Aug 2025 20:22:33 -0400 Subject: [PATCH] Added packages. Reformatted files. --- cypress/support/component.ts | 5 +- package-lock.json | 113 +++++++++++++++++- package.json | 15 +++ src/App.tsx | 3 +- src/components/SideMenu/SideMenu.tsx | 3 +- .../SideMenu/tests/SideMenuTest.cy.tsx | 1 + src/hooks/slider.tsx | 10 +- src/hooks/tests/crosshairTest.cy.tsx | 5 +- src/main.tsx | 3 +- src/providers/MediaQueryProvider.tsx | 2 +- 10 files changed, 148 insertions(+), 12 deletions(-) diff --git a/cypress/support/component.ts b/cypress/support/component.ts index fac7de6..b8afbf7 100644 --- a/cypress/support/component.ts +++ b/cypress/support/component.ts @@ -12,12 +12,11 @@ // You can read more here: // https://on.cypress.io/configuration // *********************************************************** - // Import commands.js using ES2015 syntax: -import "./commands"; - import { mount } from "cypress/react"; +import "./commands"; + // Augment the Cypress namespace to include type definitions for // your custom command. // Alternatively, can be defined in cypress/support/component.d.ts diff --git a/package-lock.json b/package-lock.json index 10aa21c..dc561a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,12 +8,14 @@ "name": "luminance", "version": "0.0.0", "dependencies": { + "motion": "^12.23.12", "react": "^19.1.0", "react-dom": "^19.1.0" }, "devDependencies": { "@eslint/js": "^9.25.0", "@rollup/plugin-wasm": "^6.2.2", + "@trivago/prettier-plugin-sort-imports": "^5.2.2", "@types/react": "^19.1.2", "@types/react-dom": "^19.1.2", "@vitejs/plugin-react": "^4.4.1", @@ -1719,6 +1721,41 @@ "@swc/counter": "^0.1.3" } }, + "node_modules/@trivago/prettier-plugin-sort-imports": { + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/@trivago/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-5.2.2.tgz", + "integrity": "sha512-fYDQA9e6yTNmA13TLVSA+WMQRc5Bn/c0EUBditUHNfMMxN7M82c38b1kEggVE3pLpZ0FwkwJkUEKMiOi52JXFA==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@babel/generator": "^7.26.5", + "@babel/parser": "^7.26.7", + "@babel/traverse": "^7.26.7", + "@babel/types": "^7.26.7", + "javascript-natural-sort": "^0.7.1", + "lodash": "^4.17.21" + }, + "engines": { + "node": ">18.12" + }, + "peerDependencies": { + "@vue/compiler-sfc": "3.x", + "prettier": "2.x - 3.x", + "prettier-plugin-svelte": "3.x", + "svelte": "4.x || 5.x" + }, + "peerDependenciesMeta": { + "@vue/compiler-sfc": { + "optional": true + }, + "prettier-plugin-svelte": { + "optional": true + }, + "svelte": { + "optional": true + } + } + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -3662,6 +3699,33 @@ "node": ">= 6" } }, + "node_modules/framer-motion": { + "version": "12.23.12", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.12.tgz", + "integrity": "sha512-6e78rdVtnBvlEVgu6eFEAgG9v3wLnYEboM8I5O5EXvfKC8gxGQB8wXJdhkMy10iVcn05jl6CNw7/HTsTCfwcWg==", + "license": "MIT", + "dependencies": { + "motion-dom": "^12.23.12", + "motion-utils": "^12.23.6", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fs-extra": { "version": "9.1.0", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz", @@ -4142,6 +4206,13 @@ "dev": true, "license": "MIT" }, + "node_modules/javascript-natural-sort": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz", + "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==", + "dev": true, + "license": "MIT" + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -4547,6 +4618,47 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/motion": { + "version": "12.23.12", + "resolved": "https://registry.npmjs.org/motion/-/motion-12.23.12.tgz", + "integrity": "sha512-8jCD8uW5GD1csOoqh1WhH1A6j5APHVE15nuBkFeRiMzYBdRwyAHmSP/oXSuW0WJPZRXTFdBoG4hY9TFWNhhwng==", + "license": "MIT", + "dependencies": { + "framer-motion": "^12.23.12", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, + "node_modules/motion-dom": { + "version": "12.23.12", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.12.tgz", + "integrity": "sha512-RcR4fvMCTESQBD/uKQe49D5RUeDOokkGRmz4ceaJKDBgHYtZtntC/s2vLvY38gqGaytinij/yi3hMcWVcEF5Kw==", + "license": "MIT", + "dependencies": { + "motion-utils": "^12.23.6" + } + }, + "node_modules/motion-utils": { + "version": "12.23.6", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz", + "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==", + "license": "MIT" + }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", @@ -5514,7 +5626,6 @@ "version": "2.8.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", - "dev": true, "license": "0BSD" }, "node_modules/tunnel-agent": { diff --git a/package.json b/package.json index 050a6b7..681d1af 100644 --- a/package.json +++ b/package.json @@ -14,12 +14,14 @@ "test:wasmdoc": "cargo test --doc --manifest-path colorlib/Cargo.toml" }, "dependencies": { + "motion": "^12.23.12", "react": "^19.1.0", "react-dom": "^19.1.0" }, "devDependencies": { "@eslint/js": "^9.25.0", "@rollup/plugin-wasm": "^6.2.2", + "@trivago/prettier-plugin-sort-imports": "^5.2.2", "@types/react": "^19.1.2", "@types/react-dom": "^19.1.2", "@vitejs/plugin-react": "^4.4.1", @@ -37,5 +39,18 @@ "vite": "^6.3.5", "vite-plugin-top-level-await": "^1.5.0", "vite-plugin-wasm": "^3.4.1" + }, + "prettier": { + "importOrder": [ + "^@core/(.*)$", + "^@server/(.*)$", + "^@ui/(.*)$", + "^[./]" + ], + "importOrderSeparation": true, + "importOrderSortSpecifiers": true, + "plugins": [ + "@trivago/prettier-plugin-sort-imports" + ] } } diff --git a/src/App.tsx b/src/App.tsx index 7620b21..ba9d92b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,11 @@ +import clsx from "clsx"; import { useState } from "react"; + 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"; -import clsx from "clsx"; // Menu Button Components diff --git a/src/components/SideMenu/SideMenu.tsx b/src/components/SideMenu/SideMenu.tsx index d9971c4..5827afa 100644 --- a/src/components/SideMenu/SideMenu.tsx +++ b/src/components/SideMenu/SideMenu.tsx @@ -1,5 +1,6 @@ -import type { ReactNode } from "react"; import clsx from "clsx"; +import type { ReactNode } from "react"; + import styles from "./SideMenu.module.css"; interface SideMenuProps { diff --git a/src/components/SideMenu/tests/SideMenuTest.cy.tsx b/src/components/SideMenu/tests/SideMenuTest.cy.tsx index 4d04581..47c6f20 100644 --- a/src/components/SideMenu/tests/SideMenuTest.cy.tsx +++ b/src/components/SideMenu/tests/SideMenuTest.cy.tsx @@ -1,4 +1,5 @@ import { useState } from "react"; + import { LeftMenu, RightMenu } from "../SideMenu"; // Test Fixtures diff --git a/src/hooks/slider.tsx b/src/hooks/slider.tsx index 7634c3e..a724f5a 100644 --- a/src/hooks/slider.tsx +++ b/src/hooks/slider.tsx @@ -1,7 +1,13 @@ -import { useState, useRef, useEffect, useCallback } from "react"; +import { useCallback, useEffect, useRef, useState } from "react"; import type { Dispatch, SetStateAction } from "react"; -import { minmax } from "../util"; + import type { CartesianSpace } from "../types"; +import { + extractEventCoordinates, + isLeftMouseButton, + isTouchEvent, + minmax, +} 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 c038c68..32761c8 100644 --- a/src/hooks/tests/crosshairTest.cy.tsx +++ b/src/hooks/tests/crosshairTest.cy.tsx @@ -1,6 +1,7 @@ -import { useState, useRef, useEffect } from "react"; -import { useCrosshair } from "../crosshair"; +import { useEffect, useRef, useState } from "react"; + import type { CartesianSpace } from "../../types"; +import { useCrosshair } from "../crosshair"; // Test Fixtures diff --git a/src/main.tsx b/src/main.tsx index 8a87d96..5493032 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,7 +1,8 @@ import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; -import "./index.css"; + import App from "./App.tsx"; +import "./index.css"; import { MediaQueryProvider } from "./providers"; createRoot(document.getElementById("root")!).render( diff --git a/src/providers/MediaQueryProvider.tsx b/src/providers/MediaQueryProvider.tsx index 9dec320..f6a425d 100644 --- a/src/providers/MediaQueryProvider.tsx +++ b/src/providers/MediaQueryProvider.tsx @@ -1,4 +1,4 @@ -import { createContext, useState, useEffect } from "react"; +import { createContext, useEffect, useState } from "react"; import type { ReactNode } from "react"; enum ViewportMode {