Reworks UI (#26)

* Update UI

* Update deps

* Remove dock animation

app/.eslintrc.cjs

@@ -5,71 +5,62 @@ const config = {
   parserOptions: {
     ecmaVersion: "latest",
     tsconfigRootDir: __dirname,
-    project: [
-      "./tsconfig.json",
-    ],
+    project: ["./tsconfig.json"],
   },
-  plugins: ["@typescript-eslint", "prettier", "import"], // Add "import" plugin
+  ignorePatterns: [
+    "**/.eslintrc.cjs",
+    "**/*.config.js",
+    "**/*.config.cjs",
+    "dist",
+    "pnpm-lock.yaml",
+  ],
+  plugins: ["@typescript-eslint", "import"],
   extends: [
-    "plugin:@typescript-eslint/recommended",
-      "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "eslint:recommended",
     "plugin:@typescript-eslint/recommended-type-checked",
     "plugin:@typescript-eslint/stylistic-type-checked",
     "prettier",
-    "plugin:tailwindcss/recommended",
-    "plugin:import/recommended",
-    "plugin:import/typescript",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:jsx-a11y/recommended",
   ],
-  settings: {
-    'import/resolver': {
-      typescript: {},
-      alias: {
-        map: [
-          ['@', './src'],
-        ],
-      },
-    }
-  },
   rules: {
-    "@typescript-eslint/restrict-template-expressions": "off",
     "@typescript-eslint/no-unused-vars": [
       "error",
-      {
-        argsIgnorePattern: "^_",
-        varsIgnorePattern: "^_",
-        caughtErrorsIgnorePattern: "^_",
-      },
+      { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
     ],
     "@typescript-eslint/consistent-type-imports": [
-      "error",
-      { prefer: "type-imports", fixStyle: "inline-type-imports" },
+      "warn",
+      { prefer: "type-imports", fixStyle: "separate-type-imports" },
     ],
-    // turn on errors for missing imports
-    "import/no-unresolved": "error",
-    // "import/no-named-as-default-member": "off",
-    "import/order": [
-      "error",
-      {
-        groups: [
-          "builtin", // Built-in imports (come from NodeJS native) go first
-          "external", // <- External imports
-          "internal", // <- Absolute imports
-          ["sibling", "parent"], // <- Relative imports, the sibling and parent types they can be mingled together
-          "index", // <- index imports
-          "unknown", // <- unknown
-        ],
-        "newlines-between": "always",
-        alphabetize: {
-          /* sort in ascending order. Options: ["ignore", "asc", "desc"] */
-          order: "asc",
-          /* ignore case. Options: [true, false] */
-          caseInsensitive: true,
-        },
-      },
+    "@typescript-eslint/no-misused-promises": [
+      2,
+      { checksVoidReturn: { attributes: false } },
     ],
-    "tailwindcss/no-custom-classname": "off",
+    "import/consistent-type-specifier-style": ["error", "prefer-inline"],
+    "react/prop-types": "off",
+    "jsx-a11y/click-events-have-key-events": "off",
+    "jsx-a11y/no-static-element-interactions": "off",
+    "jsx-a11y/heading-has-content": "off",
+    "react/no-unknown-property": "off",
+  },
+  globals: {
+    React: "writable",
+  },
+  settings: {
+    "import/resolver": {
+      typescript: {},
+      alias: {
+        map: [["@", "./src"]],
+      },
+    },
+    react: {
+      version: "detect",
+    },
+  },
+  env: {
+    browser: true,
   },
 };
 
-
 module.exports = config;

app/.prettierrc.mjs

@@ -0,0 +1,36 @@
+/** @typedef  {import("prettier").Config} PrettierConfig */
+/** @typedef {import("prettier-plugin-tailwindcss").PluginOptions} TailwindConfig */
+/** @typedef  {import("@ianvs/prettier-plugin-sort-imports").PluginConfig} SortImportsConfig */
+
+/** @type { PrettierConfig | SortImportsConfig | TailwindConfig } */
+const config = {
+  arrowParens: "always",
+  printWidth: 80,
+  singleQuote: false,
+  jsxSingleQuote: false,
+  semi: true,
+  trailingComma: "all",
+  tabWidth: 2,
+  plugins: [
+    "@ianvs/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss",
+  ],
+  importOrder: [
+    "^(react/(.*)$)|^(react$)|^(react-native(.*)$)",
+    "^(next/(.*)$)|^(next$)",
+    "^(expo(.*)$)|^(expo$)",
+    "<THIRD_PARTY_MODULES>",
+    "",
+    "",
+    "^~/utils/(.*)$",
+    "^~/components/(.*)$",
+    "^~/styles/(.*)$",
+    "^~/",
+    "^[../]",
+    "^[./]",
+  ],
+  importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
+  importOrderTypeScriptVersion: "4.4.0",
+};
+
+export default config;

app/README.md

@@ -1,3 +1,3 @@
 # App
 
-An interactive react app. 
+An interactive react app.

app/components.json

@@ -13,4 +13,4 @@
     "components": "@/components",
     "utils": "@/lib/utils"
   }
-}
+}

app/package.json

@@ -8,58 +8,64 @@
     "build": "tsc && vite build",
     "preview": "vite preview",
     "lint": "eslint .",
-    "lint:fix": "eslint --fix ."
+    "lint:fix": "eslint --fix .",
+    "format": "prettier --check \"**/*.{js,cjs,mjs,ts,tsx,md,json}\"",
+    "format:fix": "prettier --write \"**/*.{js,cjs,mjs,ts,tsx,md,json}\""
   },
   "dependencies": {
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-scroll-area": "^1.0.4",
     "@radix-ui/react-select": "^1.2.2",
+    "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
-    "@react-three/drei": "^9.83.3",
-    "@react-three/fiber": "^8.14.1",
-    "@react-three/postprocessing": "^2.15.1",
-    "@tanstack/react-query": "5.0.0-beta.23",
+    "@react-three/drei": "^9.97.4",
+    "@react-three/fiber": "^8.15.16",
+    "@react-three/postprocessing": "^2.15.13",
+    "@tanstack/react-query": "5.20.1",
     "class-variance-authority": "^0.7.0",
-    "classnames": "^2.3.2",
-    "clsx": "^2.0.0",
-    "lucide-react": "^0.274.0",
+    "clsx": "^2.1.0",
+    "lucide-react": "^0.323.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-dropzone": "^14.2.3",
     "react-error-boundary": "^4.0.11",
     "simplex-noise": "^4.0.1",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.6",
-    "three": "^0.156.1",
+    "three": "^0.161.0",
     "zod": "^3.22.4",
     "zod-fetch": "^0.1.1",
-    "zustand": "^4.4.1"
+    "zustand": "^4.5.0"
   },
   "devDependencies": {
-    "@ianvs/prettier-plugin-sort-imports": "^4.1.0",
+    "@ianvs/prettier-plugin-sort-imports": "^4.1.1",
+    "@types/eslint": "^8.44.6",
     "@types/node": "^20.6.0",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
-    "@types/three": "^0.155.1",
-    "@typescript-eslint/eslint-plugin": "^6.6.0",
+    "@types/three": "^0.161.2",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "^6.9.1",
     "@vitejs/plugin-react": "^4.0.4",
-    "autoprefixer": "^10.4.15",
+    "autoprefixer": "^10.4.17",
+    "eslint": "^8.52.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-import-resolver-typescript": "^3.6.0",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-config-turbo": "^1.10.16",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-tailwindcss": "^3.13.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "gh-pages": "^6.0.0",
-    "postcss": "^8.4.31",
-    "prettier": "^3.0.3",
-    "prettier-plugin-tailwindcss": "^0.5.4",
-    "tailwindcss": "^3.3.3",
-    "typescript": "^5.2.2",
+    "postcss": "^8.4.35",
+    "prettier": "^3.1.1",
+    "prettier-plugin-tailwindcss": "0.5.11",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3",
     "vite": "^4.4.9"
   }
-}
+}