Use @ alias imports. Formatted files.
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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
@@ -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
@@ -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
@@ -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 */
|
||||||
|
|||||||
@@ -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,2 +1,3 @@
|
|||||||
import { LeftMenu, RightMenu } from "./SideMenu";
|
import { LeftMenu, RightMenu } from "./SideMenu";
|
||||||
|
|
||||||
export { LeftMenu, RightMenu };
|
export { LeftMenu, RightMenu };
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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
@@ -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(
|
||||||
|
|||||||
@@ -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") {
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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";
|
||||||
|
|||||||
@@ -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,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,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
@@ -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
@@ -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,
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user