Merge pull request #3 from Mohmdev/base-ui-optimization

Base UI optimization #1

.prettierrc

@@ -9,8 +9,8 @@
   "trailingComma": "es5",
   "tabWidth": 2,
   "importOrder": [
-    "^react",
-    "^next",
+    "^react$",
+    "^next$",
     "<THIRD_PARTY_MODULES>",
     "^@/(.*)$",
     "^[./]"

.vscode/extensions.json

@@ -3,7 +3,6 @@
     "esbenp.prettier-vscode",
     "dbaeumer.vscode-eslint",
     "bradlc.vscode-tailwindcss",
-    "unifiedjs.vscode-mdx",
     "yoavbls.pretty-ts-errors"
   ]
 }

.vscode/settings.json

@@ -1,17 +1,19 @@
 {
   "workbench.colorCustomizations": {
-    "titleBar.activeBackground": "#1f0d49",
+    "titleBar.activeBackground": "#3e394d",
     "titleBar.activeForeground": "#e2e8f0",
     "titleBar.inactiveBackground": "#181239",
     "titleBar.inactiveForeground": "#b1b6bd"
   },
 
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit",
-    "source.organizeImports": "explicit"
+    // "source.fixAll.eslint": "explicit",
+    // "source.organizeImports": "never"
+    // "source.sortImports": "never"
   },
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true,
+  "prettier.prettierPath": "./node_modules/prettier",
+  "prettier.requireConfig": true,
+  // "editor.formatOnSave": true,
   // "editor.rulers": [100],
   "editor.tabSize": 2,
   "editor.quickSuggestions": {
@@ -24,19 +26,9 @@
     "typescript",
     "typescriptreact"
   ],
-
   "eslint.rules.customizations": [{ "rule": "*", "severity": "warn" }],
   "typescript.tsdk": "node_modules/typescript/lib",
   "prettier.documentSelectors": [
     "**/*.{cjs,mjs,ts,tsx,astro,md,mdx,json,yaml,yml}"
-  ],
-  "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[typescriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  ]
 }

README.md

@@ -136,7 +136,7 @@ To do this you will need to add `algoliasearch` to the project, by running
 yarn add algoliasearch
 ```
 
-After this you will need to switch the current MeiliSearch `SearchClient` out with a Alogolia client. To do this update `@lib/search-client`.
+After this you will need to switch the current MeiliSearch `SearchClient` out with a Alogolia client. To do this update `@/lib/search-client`.
 
 ```ts
 import algoliasearch from "algoliasearch/lite"
@@ -156,7 +156,7 @@ Then, in `src/app/(main)/search/actions.ts`, remove the MeiliSearch code (line 1
 ```ts
 "use server"
 
-import { SEARCH_INDEX_NAME, searchClient } from "@lib/search-client"
+import { SEARCH_INDEX_NAME, searchClient } from "@/lib/search-client"
 
 /**
  * Uses MeiliSearch or Algolia to search for a query

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/styles/base.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/ui",
+    "ui": "@/ui/shadcn",
+    "lib": "@/lib",
+    "hooks": "@/lib/hooks",
+    "utils": "@/lib/utils/cn"
+  },
+  "iconLibrary": "lucide"
+}

package.json

@@ -26,25 +26,53 @@
     "@meilisearch/instant-meilisearch": "^0.7.1",
     "@paypal/paypal-js": "^5.0.6",
     "@paypal/react-paypal-js": "^7.8.1",
+    "@radix-ui/react-accordion": "^1.2.1",
+    "@radix-ui/react-aspect-ratio": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-collapsible": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-icons": "^1.3.1",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-menubar": "^1.1.2",
+    "@radix-ui/react-navigation-menu": "^1.2.1",
+    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-radio-group": "^1.2.1",
+    "@radix-ui/react-scroll-area": "^1.2.0",
+    "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.1",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-toggle": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.3",
     "@stripe/react-stripe-js": "^1.7.2",
     "@stripe/stripe-js": "^1.29.0",
     "@types/lodash": "^4.14.195",
     "@types/pg": "^8.11.0",
     "autoprefixer": "^10.4.2",
     "axios": "^1.6.7",
     "babel-plugin-react-compiler": "19.0.0-beta-63b359f-20241101",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "embla-carousel-react": "^8.3.1",
     "lodash": "^4.17.21",
+    "lucide-react": "^0.455.0",
     "next": "15.0.3",
+    "next-themes": "^0.4.3",
     "react": "19.0.0-rc-66855b96-20241106",
     "react-country-flag": "^3.1.0",
     "react-dom": "19.0.0-rc-66855b96-20241106",
     "react-instantsearch-hooks-web": "^6.29.0",
     "react-intersection-observer": "^9.3.4",
     "server-only": "^0.0.1",
     "sharp": "^0.33.5",
+    "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
     "tailwindcss-radix": "^2.8.0",
     "typescript": "^5.3.2",
+    "vaul": "^1.1.1",
     "webpack": "^5"
   },
   "devDependencies": {