Update to webpack, new widget structure

.gitignore

@@ -16,3 +16,4 @@ package-lock.json
 yarn.lock
 medusa-db.sql
 build
+.cache

package.json

@@ -19,23 +19,22 @@
     "seed": "cross-env medusa seed -f ./data/seed.json",
     "start": "cross-env npm run build && medusa start",
     "start:custom": "cross-env npm run build && node --preserve-symlinks --trace-warnings index.js",
-    "dev": "cross-env npm run build && medusa develop",
-    "build:backend": "cross-env npm run clean && tsc -p tsconfig.json",
+    "dev": "cross-env npm run build:server && medusa develop",
+    "build:server": "cross-env npm run clean && tsc -p tsconfig.json",
     "build:admin": "cross-env medusa-admin build",
-    "build:extensions": "medusa-admin-sdk build",
-    "build": "cross-env npm run build:backend && npm run build:extensions && npm run build:admin"
+    "build": "cross-env npm run clean && npm run build:server && npm run build:admin"
   },
   "dependencies": {
     "@babel/preset-typescript": "7.21.4",
-    "@medusajs/admin": "6.0.1-snapshot-20230612144720",
-    "@medusajs/admin-sdk": "0.0.2-snapshot-20230612144720",
+    "@medusajs/admin": "6.0.1-snapshot-20230613191901",
     "@medusajs/cache-inmemory": "^1.8.7",
     "@medusajs/cache-redis": "^1.8.7",
     "@medusajs/event-bus-local": "^1.9.4",
     "@medusajs/event-bus-redis": "^1.8.7",
     "@medusajs/file-local": "^1.0.1",
-    "@medusajs/medusa": "1.12.1-snapshot-20230607120036",
+    "@medusajs/medusa": "1.12.1-snapshot-20230613191901",
     "@medusajs/medusa-cli": "1.3.16-snapshot-20230607120036",
+    "@tanstack/react-query": "4.22.0",
     "babel-preset-medusa-package": "^1.1.13",
     "body-parser": "^1.19.0",
     "cors": "^2.8.5",
@@ -45,13 +44,12 @@
     "medusa-payment-manual": "^1.0.23",
     "medusa-payment-stripe": "6.0.1-snapshot-20230530160902",
     "prism-react-renderer": "^2.0.4",
-    "typeorm": "^0.3.16",
-    "@tanstack/react-query": "4.22.0"
+    "typeorm": "^0.3.16"
   },
   "devDependencies": {
-    "@babel/preset-typescript": "^7.21.4",
     "@babel/cli": "^7.14.3",
     "@babel/core": "^7.14.3",
+    "@babel/preset-typescript": "^7.21.4",
     "@medusajs/medusa-cli": "^1.3.14",
     "@types/express": "^4.17.13",
     "@types/jest": "^27.4.0",

src/admin/onboarding-flow/orders/order-detail.tsx → src/admin/components/onboarding-flow/orders/order-detail.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import IconBadge from "../../shared/icon-badge";
-import ComputerDesktopIcon from "../../shared/icons/computer-desktop-icon";
-import DollarSignIcon from "../../shared/icons/dollar-sign-icon";
+import IconBadge from "../shared/icon-badge";
+import ComputerDesktopIcon from "../shared/icons/computer-desktop-icon";
+import DollarSignIcon from "../shared/icons/dollar-sign-icon";
 
 const OrderDetail = () => {
   return (

src/admin/onboarding-flow/orders/orders-list.tsx → src/admin/components/onboarding-flow/orders/orders-list.tsx

@@ -1,11 +1,11 @@
 import React from "react";
-import Button from "../../shared/button";
+import Button from "../shared/button";
 import { useAdminProduct } from "medusa-react";
 import { useAdminCreateDraftOrder } from "medusa-react";
 import { useAdminShippingOptions } from "medusa-react";
 import { useAdminRegions } from "medusa-react";
 import { useMedusa } from "medusa-react";
-import { StepContentProps } from "../onboarding-flow";
+import { StepContentProps } from "../../../widgets/onboarding-flow/onboarding-flow";
 
 const OrdersList = ({ onNext, isComplete, data }: StepContentProps) => {
   const { product } = useAdminProduct(data.product_id);

src/admin/onboarding-flow/products/product-detail.tsx → src/admin/components/onboarding-flow/products/product-detail.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { useAdminPublishableApiKeys } from "medusa-react";
-import Button from "../../shared/button";
-import CodeSnippets from "../../shared/code-snippets";
-import { StepContentProps } from "../onboarding-flow";
+import Button from "../shared/button";
+import CodeSnippets from "../shared/code-snippets";
+import { StepContentProps } from "../../../widgets/onboarding-flow/onboarding-flow";
 
 const ProductDetail = ({ onNext, isComplete, data }: StepContentProps) => {
   const { publishable_api_keys: keys, isLoading } = useAdminPublishableApiKeys({

src/admin/onboarding-flow/products/products-list.tsx → src/admin/components/onboarding-flow/products/products-list.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import Button from "../../shared/button";
+import Button from "../shared/button";
 import { useAdminCreateProduct } from "medusa-react";
 import { useAdminRegions } from "medusa-react";
-import { StepContentProps } from "../onboarding-flow";
+import { StepContentProps } from "../../../widgets/onboarding-flow/onboarding-flow";
 
 // Needed for sample product creation — not exported by anything importable here
 enum ProductStatus {

src/admin/shared/icons/check-circle-fill-icon.tsx → src/admin/components/onboarding-flow/shared/icons/check-circle-fill-icon.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import IconProps from "../../types/icon-type";
+import IconProps from "../../../../types/icon-type";
 
 const CheckCircleFillIcon: React.FC<IconProps> = ({
   size = "24",

src/admin/shared/icons/clipboard-copy-icon.tsx → src/admin/components/onboarding-flow/shared/icons/clipboard-copy-icon.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import IconProps from "../../types/icon-type";
+import IconProps from "../../../../types/icon-type";
 
 const ClipboardCopyIcon: React.FC<IconProps> = ({
   size = "20",

src/admin/shared/icons/computer-desktop-icon.tsx → src/admin/components/onboarding-flow/shared/icons/computer-desktop-icon.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import IconProps from "../../types/icon-type";
+import IconProps from "../../../../types/icon-type";
 
 const ComputerDesktopIcon: React.FC<IconProps> = ({
   size = "24",

src/admin/shared/icons/cross-icon.tsx → src/admin/components/onboarding-flow/shared/icons/cross-icon.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import IconProps from "../../types/icon-type";
+import IconProps from "../../../../types/icon-type";
 
 const CrossIcon: React.FC<IconProps> = ({
   size = "20",

src/admin/shared/icons/dollar-sign-icon.tsx → src/admin/components/onboarding-flow/shared/icons/dollar-sign-icon.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import IconProps from "../../types/icon-type";
+import IconProps from "../../../../types/icon-type";
 
 const DollarSignIcon: React.FC<IconProps> = ({
   size = "24",

src/admin/shared/icons/get-started-icon.tsx → src/admin/components/onboarding-flow/shared/icons/get-started-icon.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import IconProps from "../../types/icon-type";
+import IconProps from "../../../../types/icon-type";
 
 const GetStartedIcon: React.FC<IconProps> = () => (
   <svg

src/admin/onboarding-flow/onboarding-flow.tsx → src/admin/widgets/onboarding-flow/onboarding-flow.tsx

@@ -1,24 +1,24 @@
 import React, { useState, useEffect } from "react";
-import { Container } from "../shared/container";
-import Button from "../shared/button";
-import { ExtensionConfig } from "@medusajs/admin-sdk";
-import type { ExtensionProps } from "@medusajs/admin-shared";
-import Accordion from "../shared/accordion";
-import GetStartedIcon from "../shared/icons/get-started-icon";
-import ProductsList from "./products/products-list";
-import ProductDetail from "./products/product-detail";
-import OrdersList from "./orders/orders-list";
-import OrderDetail from "./orders/order-detail";
+import { useNavigate } from "react-router-dom";
+import { WidgetConfig } from "@medusajs/admin";
+import { Container } from "../../components/onboarding-flow/shared/container";
+import Button from "../../components/onboarding-flow/shared/button";
+import Accordion from "../../components/onboarding-flow/shared/accordion";
+import GetStartedIcon from "../../components/onboarding-flow/shared/icons/get-started-icon";
+import ProductsList from "../../components/onboarding-flow/products/products-list";
+import ProductDetail from "../../components/onboarding-flow/products/product-detail";
+import OrdersList from "../../components/onboarding-flow/orders/orders-list";
+import OrderDetail from "../../components/onboarding-flow/orders/order-detail";
 import {
   useAdminOnboardingState,
   useAdminUpdateOnboardingStateMutation,
-} from "../shared/hooks";
+} from "../../components/onboarding-flow/shared/hooks";
 import {
   AdminOnboardingUpdateStateReq,
   OnboardingStateRes,
   UpdateOnboardingStateInput,
-} from "../../types/onboarding";
-import { OnboardingState } from "../../models/onboarding";
+} from "../../../types/onboarding";
+import { OnboardingState } from "../../../models/onboarding";
 
 type STEP_ID =
   | "create_product"
@@ -26,7 +26,7 @@ type STEP_ID =
   | "create_order"
   | "setup_finished";
 
-export type StepContentProps = ExtensionProps & {
+export type StepContentProps = any & {
   onNext?: Function;
   isComplete?: boolean;
   data?: OnboardingState;
@@ -46,14 +46,14 @@ const STEP_FLOW: STEP_ID[] = [
   "setup_finished",
 ];
 
-const OnboardingFlow = (props: ExtensionProps) => {
+const OnboardingFlow = (props: any) => {
   const { data, isLoading } = useAdminOnboardingState<OnboardingStateRes>("");
   const { mutate } = useAdminUpdateOnboardingStateMutation<
     AdminOnboardingUpdateStateReq,
     OnboardingStateRes
   >("");
 
-  const { navigate } = props;
+  const navigate = useNavigate();
 
   const currentStep: STEP_ID | undefined = data?.status
     ?.current_step as STEP_ID;
@@ -289,8 +289,7 @@ const OnboardingFlow = (props: ExtensionProps) => {
   );
 };
 
-export const config: ExtensionConfig = {
-  type: "widget",
+export const config: WidgetConfig = {
   zone: [
     "product.list.before",
     "product.details.before",

src/api/index.ts

@@ -1,4 +1,4 @@
-import { ConfigModule } from "@medusajs/medusa/dist/types/global";
+import { ConfigModule } from "@medusajs/medusa";
 import { Router } from "express";
 import { getConfigFile } from "medusa-core-utils";
 import { getAdminRouter } from "./routes/admin";

src/api/routes/admin/index.ts

@@ -1,14 +1,20 @@
 import bodyParser from "body-parser";
 import cors from "cors";
 import { Router } from "express";
+import { authenticate } from "@medusajs/medusa";
 import onboardingRoutes from "./onboarding";
 
 const adminRouter = Router();
 
 export function getAdminRouter(adminCorsOptions): Router {
-  adminRouter.use(cors(adminCorsOptions), bodyParser.json());
+  adminRouter.use(
+    /\/admin\/((?!auth).*)/,
+    cors(adminCorsOptions),
+    bodyParser.json(),
+    authenticate()
+  );
 
-  onboardingRoutes(adminRouter, adminCorsOptions);
+  onboardingRoutes(adminRouter);
 
   return adminRouter;
 }

src/api/routes/admin/onboarding/index.ts

@@ -1,28 +1,15 @@
-import { authenticate } from "@medusajs/medusa";
 import { wrapHandler } from "@medusajs/utils";
-import cors from "cors";
 import { Router } from "express";
 import getOnboardingStatus from "./get-status";
 import updateOnboardingStatus from "./update-status";
 
 const route = Router();
 
-export default (app: Router, corsOptions): Router => {
+export default (app: Router): Router => {
   app.use("/admin/onboarding", route);
 
-  route.options("/", cors(corsOptions));
-  route.get(
-    "/",
-    cors(corsOptions),
-    authenticate(),
-    wrapHandler(getOnboardingStatus)
-  );
-  route.post(
-    "/",
-    cors(corsOptions),
-    authenticate(),
-    wrapHandler(updateOnboardingStatus)
-  );
+  route.get("/", wrapHandler(getOnboardingStatus));
+  route.post("/", wrapHandler(updateOnboardingStatus));
 
   return app;
 };

src/api/routes/store/index.ts

@@ -1,17 +1,14 @@
-import cors from "cors"
-import { Router } from "express"
-import bodyParser from "body-parser"
-import customRouteHandler from "./custom-route-handler"
+import cors from "cors";
+import { Router } from "express";
+import bodyParser from "body-parser";
+import customRouteHandler from "./custom-route-handler";
 import { wrapHandler } from "@medusajs/medusa";
 
-const storeRouter = Router()
+const storeRouter = Router();
 export function getStoreRouter(storeCorsOptions): Router {
-  storeRouter.use(cors(storeCorsOptions), bodyParser.json())
+  storeRouter.use("/store", cors(storeCorsOptions), bodyParser.json());
 
-  storeRouter.post(
-    "/store/my-custom-path",
-    wrapHandler(customRouteHandler)
-  )
+  storeRouter.post("/my-custom-path", wrapHandler(customRouteHandler));
 
-  return storeRouter
+  return storeRouter;
 }