feat(admin,admin-ui,medusa): Add Medusa Admin plugin (medusajs#3334)

.changeset/sixty-jeans-fold.md

@@ -0,0 +1,7 @@
+---
+"@medusajs/admin-ui": patch
+"@medusajs/medusa": patch
+"@medusajs/admin": patch
+---
+
+feat(medusa,admin,admin-ui): Add new plugin to serve the admin dashboard from the server. Adds a new plugin injection step `setup`, code placed in the `setup` folder of a plugin will be run before any code from a plugin is injected into the Medusa server.

.eslintignore

@@ -7,6 +7,8 @@ jest*
 packages/*
 # List of packages to Lint
 !packages/medusa
+!packages/admin-ui
+!packages/admin
 !packages/medusa-payment-stripe
 
 

.eslintrc.js

@@ -83,7 +83,8 @@ module.exports = {
         project: [
           "./packages/medusa/tsconfig.json",
           "./packages/medusa-payment-stripe/tsconfig.spec.json",
-        ]
+          "./packages/admin-ui/tsconfig.json",
+        ],
       },
       rules: {
         "valid-jsdoc": "off",
@@ -111,5 +112,58 @@ module.exports = {
         "@typescript-eslint/no-var-requires": "off",
       },
     },
+    {
+      files: ["packages/admin-ui/ui/**/*.ts", "packages/admin-ui/ui/**/*.tsx"],
+      plugins: ["unused-imports"],
+      extends: [
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:react-hooks/recommended",
+      ],
+      parser: "@typescript-eslint/parser",
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+        ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        project: "./packages/admin-ui/ui/tsconfig.json",
+      },
+      env: {
+        browser: true,
+      },
+      rules: {
+        "prettier/prettier": "error",
+        "react/prop-types": "off",
+        "new-cap": "off",
+        "require-jsdoc": "off",
+        "valid-jsdoc": "off",
+        "no-unused-expressions": "off",
+        "unused-imports/no-unused-imports": "error",
+        "unused-imports/no-unused-vars": [
+          "warn",
+          {
+            vars: "all",
+            varsIgnorePattern: "^_",
+            args: "after-used",
+            argsIgnorePattern: "^_",
+          },
+        ],
+      },
+    },
+    {
+      files: ["packages/admin-ui/lib/**/*.ts"],
+      parser: "@typescript-eslint/parser",
+      parserOptions: {
+        project: "./packages/admin-ui/tsconfig.json",
+      },
+    },
+    {
+      files: ["packages/admin/**/*.ts"],
+      parser: "@typescript-eslint/parser",
+      parserOptions: {
+        project: "./packages/admin/tsconfig.json",
+      },
+    },
   ],
 }

.prettierrc

@@ -4,5 +4,13 @@
   "singleQuote": false,
   "tabWidth": 2,
   "trailingComma": "es5",
-  "arrowParens": "always"
+  "arrowParens": "always",
+  "overrides": [
+    {
+      "files": "./packages/admin-ui/**/*.{js,jsx,ts,tsx}",
+      "options": {
+        "plugins": ["prettier-plugin-tailwindcss"]
+      }
+    }
+  ]
 }

integration-tests/api/package.json

@@ -19,6 +19,7 @@
     "@babel/core": "^7.12.10",
     "@babel/node": "^7.12.10",
     "babel-preset-medusa-package": "*",
-    "jest": "^26.6.3"
+    "jest": "^26.6.3",
+    "jest-environment-node": "26.6.2"
   }
 }

integration-tests/plugins/package.json

@@ -21,6 +21,7 @@
     "@babel/core": "^7.12.10",
     "@babel/node": "^7.12.10",
     "babel-preset-medusa-package": "*",
-    "jest": "^26.6.3"
+    "jest": "^26.6.3",
+    "jest-environment-node": "26.6.2"
   }
 }

integration-tests/repositories/package.json

@@ -17,6 +17,7 @@
     "@babel/core": "^7.12.10",
     "@babel/node": "^7.12.10",
     "babel-preset-medusa-package": "*",
-    "jest": "^26.6.3"
+    "jest": "^26.6.3",
+    "jest-environment-node": "26.6.2"
   }
 }

package.json

@@ -23,8 +23,8 @@
     "@medusajs/medusa-oas-cli": "*",
     "@readme/openapi-parser": "^2.4.0",
     "@redocly/cli": "1.0.0-beta.123",
-    "@typescript-eslint/eslint-plugin": "^5.36.2",
-    "@typescript-eslint/parser": "^5.36.2",
+    "@typescript-eslint/eslint-plugin": "^5.53.0",
+    "@typescript-eslint/parser": "^5.53.0",
     "axios": "^0.21.4",
     "axios-mock-adapter": "^1.19.0",
     "babel-jest": "^26.6.3",
@@ -36,6 +36,8 @@
     "eslint-plugin-markdown": "^3.0.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-unused-imports": "^2.0.0",
     "execa": "^5.1.1",
     "express": "^4.17.1",
     "get-port": "^5.1.1",
@@ -47,6 +49,7 @@
     "microbundle": "^0.13.3",
     "pg-god": "^1.0.12",
     "prettier": "^2.7.1",
+    "prettier-plugin-tailwindcss": "^0.2.3",
     "resolve-cwd": "^3.0.0",
     "ts-jest": "^26.5.6",
     "ts-node": "^10.9.1",

packages/admin-ui/.gitignore

@@ -0,0 +1,4 @@
+/dist
+/build
+.vercel
+/ui/preview

packages/admin-ui/.npmignore

@@ -0,0 +1,6 @@
+.DS_store
+.turbo
+/src
+/build
+.vercel
+/ui/preview

packages/admin-ui/README.md

@@ -0,0 +1,38 @@
+<p align="center">
+  <a href="https://www.medusajs.com">
+    <img alt="Medusa" src="https://user-images.githubusercontent.com/7554214/153162406-bf8fd16f-aa98-4604-b87b-e13ab4baf604.png" width="100" />
+  </a>
+</p>
+<h1 align="center">
+  @medusajs/admin-ui
+</h1>
+
+<h4 align="center">
+  <a href="https://docs.medusajs.com">Documentation</a> |
+  <a href="https://demo.medusajs.com/">Medusa Admin Demo</a> |
+  <a href="https://www.medusajs.com">Website</a>
+</h4>
+
+<p align="center">
+An open source composable commerce engine built for developers.
+</p>
+<p align="center">
+  <a href="https://github.com/medusajs/medusa/blob/master/LICENSE">
+    <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="Medusa is released under the MIT license." />
+  </a>
+  <a href="https://circleci.com/gh/medusajs/medusa">
+    <img src="https://circleci.com/gh/medusajs/medusa.svg?style=shield" alt="Current CircleCI build status." />
+  </a>
+  <a href="https://github.com/medusajs/medusa/blob/master/CONTRIBUTING.md">
+    <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat" alt="PRs welcome!" />
+  </a>
+    <a href="https://www.producthunt.com/posts/medusa"><img src="https://img.shields.io/badge/Product%20Hunt-%231%20Product%20of%20the%20Day-%23DA552E" alt="Product Hunt"></a>
+  <a href="https://discord.gg/xpCwq3Kfn8">
+    <img src="https://img.shields.io/badge/chat-on%20discord-7289DA.svg" alt="Discord Chat" />
+  </a>
+  <a href="https://twitter.com/intent/follow?screen_name=medusajs">
+    <img src="https://img.shields.io/twitter/follow/medusajs.svg?label=Follow%20@medusajs" alt="Follow @medusajs" />
+  </a>
+</p>
+
+## The Medusa Admin App. Included with the [`@medusajs/admin`](https://www.npmjs.com/package/@medusajs/admin) plugin. You shouldn't install this package separately.

packages/admin-ui/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "@medusajs/admin-ui",
+  "author": "Kasper Kristensen <[email protected]>",
+  "license": "MIT",
+  "version": "0.0.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/medusajs/medusa.git",
+    "directory": "packages/admin-ui"
+  },
+  "exports": {
+    ".": "./dist/index.js",
+    "./ui": "./ui",
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "ui"
+  ],
+  "scripts": {
+    "dev": "vite -c vite.config.dev.ts --port 7001",
+    "build": "tsc --build",
+    "test:ui": "vitest --config vite.config.dev.ts",
+    "test:ui:once": "vitest --config vite.config.dev.ts --run",
+    "test": "echo \"Tests disabled temporarily\""
+  },
+  "dependencies": {
+    "@hookform/error-message": "^2.0.1",
+    "@radix-ui/react-accordion": "^1.0.1",
+    "@radix-ui/react-avatar": "^1.0.1",
+    "@radix-ui/react-collapsible": "^1.0.1",
+    "@radix-ui/react-dialog": "^1.0.2",
+    "@radix-ui/react-dropdown-menu": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.3",
+    "@radix-ui/react-radio-group": "^1.1.1",
+    "@radix-ui/react-select": "^1.2.0",
+    "@radix-ui/react-switch": "^1.0.1",
+    "@radix-ui/react-tooltip": "^1.0.3",
+    "@segment/analytics-next": "^1.51.1",
+    "@tanstack/react-query": "4.22.0",
+    "@tanstack/react-table": "^8.7.9",
+    "@vitejs/plugin-react": "^3.1.0",
+    "clsx": "^1.2.1",
+    "confetti-js": "^0.0.18",
+    "copy-to-clipboard": "^3.3.1",
+    "emoji-picker-react": "^4.4.3",
+    "framer-motion": "^9.1.6",
+    "medusa-react": "*",
+    "react": "^18.2.0",
+    "react-collapsible": "^2.8.3",
+    "react-country-flag": "^3.0.2",
+    "react-currency-input-field": "^3.6.8",
+    "react-datepicker": "^4.8.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dom": "^18.2.0",
+    "react-helmet": "^6.0.0",
+    "react-highlight-words": "^0.18.0",
+    "react-hook-form": "7.38.0",
+    "react-hot-toast": "^2.4.0",
+    "react-hotkeys-hook": "^3.4.7",
+    "react-json-tree": "^0.17.0",
+    "react-jwt": "^1.1.4",
+    "react-router-dom": "^6.8.0",
+    "react-select": "^5.5.4",
+    "react-table": "^7.7.0",
+    "type-fest": "^3.6.0",
+    "vite": "^4.1.4"
+  },
+  "devDependencies": {
+    "@medusajs/medusa": "*",
+    "@tailwindcss/forms": "^0.5.3",
+    "@tailwindcss/line-clamp": "^0.4.2",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@types/react-table": "^7.7.9",
+    "autoprefixer": "^10.4.13",
+    "postcss": "^8.4.21",
+    "tailwindcss": "3.2.2",
+    "tailwindcss-radix": "^2.7.0",
+    "typescript": "^4.9.3",
+    "vitest": "^0.28.5"
+  },
+  "packageManager": "[email protected]"
+}

packages/admin-ui/src/index.ts

@@ -0,0 +1,28 @@
+import fse from "fs-extra"
+import { resolve } from "path"
+import vite from "vite"
+import { AdminBuildConfig } from "./types"
+import { getCustomViteConfig } from "./utils"
+
+async function build(options?: AdminBuildConfig) {
+  const config = getCustomViteConfig(options)
+
+  await vite.build(config).catch((_err) => {
+    process.exit(1)
+  })
+
+  await fse.writeJSON(
+    resolve(config.build.outDir, "build-manifest.json"),
+    options
+  )
+}
+
+async function watch() {
+  throw new Error("Not implemented")
+}
+
+async function clean() {
+  throw new Error("Not implemented")
+}
+
+export { build, watch, clean }

packages/admin-ui/src/types/build.ts

@@ -0,0 +1,15 @@
+import { DeepPartial } from "./misc"
+
+type GlobalsConfig = {
+  base?: string
+  backend?: string
+}
+
+type BuildConfig = {
+  outDir?: string
+}
+
+export type AdminBuildConfig = {
+  globals?: DeepPartial<GlobalsConfig>
+  build?: DeepPartial<BuildConfig>
+}

packages/admin-ui/src/types/config.ts

@@ -0,0 +1,5 @@
+import { AdminBuildConfig } from "./build"
+
+export type AdminUIConfig = {
+  build?: AdminBuildConfig
+}

packages/admin-ui/src/types/index.ts

@@ -0,0 +1,2 @@
+export * from "./build"
+export * from "./misc"

packages/admin-ui/src/types/misc.ts

@@ -0,0 +1,9 @@
+export type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends (infer U)[]
+    ? DeepPartial<U>[]
+    : T[P] extends ReadonlyArray<infer V>
+    ? ReadonlyArray<DeepPartial<V>>
+    : DeepPartial<T[P]>
+}
+
+export type Base<T extends string> = `/${T}/`

packages/admin-ui/src/utils/format-base.ts

@@ -0,0 +1,5 @@
+import { Base } from "../types"
+
+export const formatBase = <T extends string>(base: T): Base<T> => {
+  return `/${base}/`
+}