@csbeker/medusa-product-attributes 2.2.0

package/src/admin/routes/attributes/set/[id]/edit/page.tsx

@@ -0,0 +1,119 @@
+import { defineRouteConfig } from "@medusajs/admin-sdk";
+import { AttributeSet } from "../../../../../../types/attribute";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  useAttributeSet,
+  useUpdateAttributeSet,
+} from "../../../../../hooks/api/attribute-set";
+import { AdminUpdateAttributeSet } from "../../../../../../api/admin/plugin/attribute-set/validators";
+import { z } from "zod";
+import { Button, Drawer, Input, Label, Textarea, toast } from "@medusajs/ui";
+import { useNavigate, useParams } from "react-router-dom";
+import { useEffect } from "react";
+
+type Props = {
+  attributeSet: AttributeSet;
+};
+
+const FormSchema = AdminUpdateAttributeSet;
+type FormValues = z.infer<typeof FormSchema>;
+
+const AttributeSetEditPage = () => {
+  const { id } = useParams();
+  const navigate = useNavigate();
+
+  const { attributeSet, isLoading } = useAttributeSet(
+    id!,
+    {
+      fields: "name, handle, description",
+    },
+    { enabled: !!id }
+  );
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      name: attributeSet?.name ?? "",
+      description: attributeSet?.description ?? "",
+      handle: attributeSet?.handle ?? "",
+    },
+  });
+
+  useEffect(() => {
+    if (attributeSet) {
+        form.reset({
+            name: attributeSet?.name ?? "",
+            description: attributeSet?.description ?? "",
+            handle: attributeSet?.handle ?? "",
+        })
+    }
+  }, [attributeSet, form])
+
+  const { mutateAsync, isPending } = useUpdateAttributeSet(attributeSet?.id ?? "");
+
+  const handleSubmit = form.handleSubmit(async (data) => {
+    await mutateAsync(data, {
+      onSuccess: () => {
+        toast.success("Attribute set edited");
+        navigate(-1);
+      },
+      onError: (error) => {
+        toast.error(error.message);
+      },
+    });
+  });
+
+  const handleClose = () => {
+    navigate(-1);
+  };
+
+  if (!attributeSet) {
+    return <p>Not found...</p>;
+  }
+
+  return (
+    <Drawer
+      open={true}
+      onOpenChange={(open) => {
+        if (!open) {
+          handleClose();
+        }
+      }}
+    >
+      <Drawer.Content>
+        <Drawer.Header>Edit Attribute Set</Drawer.Header>
+        <Drawer.Body>
+          <form id='attribute-set-edit-form' onSubmit={handleSubmit}>
+            <div className="flex flex-col gap-4">
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <div className="flex flex-col gap-2">
+                  <Label htmlFor="name">Name</Label>
+                  <Input aria-invalid={!!form.formState.errors.name} size="small" {...form.register("name")} />
+                </div>
+                <div className="flex flex-col gap-2">
+                  <Label htmlFor="handle">Handle</Label>
+                  <Input size="small" {...form.register("handle")} />
+                </div>
+              </div>
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="description">Description</Label>
+                <Textarea {...form.register("description")} />
+              </div>
+            </div>
+          </form>
+        </Drawer.Body>
+        <Drawer.Footer>
+          <Drawer.Close onClick={handleClose} asChild>
+            <Button disabled={isPending} variant="secondary">Cancel</Button>
+          </Drawer.Close>
+          <Button disabled={isPending} type="submit" form="attribute-set-edit-form" >Save</Button>
+        </Drawer.Footer>
+      </Drawer.Content>
+    </Drawer>
+  );
+};
+
+export const config = defineRouteConfig({});
+
+export default AttributeSetEditPage;

package/src/admin/routes/attributes/set/[id]/page.tsx

@@ -0,0 +1,45 @@
+import { useAttributeSet } from "../../../../hooks/api/attribute-set";
+import { useParams } from "react-router-dom";
+import {
+  Container,
+  DropdownMenu,
+  Heading,
+  IconButton,
+  Text,
+} from "@medusajs/ui";
+import { SingleColumnLayout } from "../../../../layouts/single-column";
+import { EllipsisHorizontal, PencilSquare, Trash } from "@medusajs/icons";
+import { SectionRow } from "../../../../components/section-row";
+import { AttributeSetGeneralSection, AttributeSetAttributesSection } from "./components";
+
+export default function AttributeSetDetail() {
+  const { id } = useParams();
+  const { attributeSet, isLoading } = useAttributeSet(id || "");
+
+  if (!id) {
+    return <div>Invalid attribute set ID</div>;
+  }
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  if (!attributeSet) {
+    return <div>Attribute set not found</div>;
+  }
+
+  return (
+    <SingleColumnLayout>
+      <AttributeSetGeneralSection attributeSet={attributeSet} />
+
+      <AttributeSetAttributesSection attributeSet={attributeSet} />
+
+      {/* Metadata Section */}
+      <Container>
+        <div className="flex flex-col gap-y-4 p-4">
+          <Heading level="h2">Metadata</Heading>
+        </div>
+      </Container>
+    </SingleColumnLayout>
+  );
+}

package/src/admin/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Type Declarations */
+    "typeRoots": ["./types", "./node_modules/@types"]
+  },
+  "include": [".", "types/**/*.d.ts"]
+}

package/src/admin/types/global.d.ts

@@ -0,0 +1,3 @@
+declare const __BACKEND_URL__: string
+declare const __BASE__: string
+declare const __STOREFRONT_URL__: string 

package/src/admin/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/src/api/README.md

@@ -0,0 +1,133 @@
+# Custom API Routes
+
+An API Route is a REST API endpoint.
+
+An API Route is created in a TypeScript or JavaScript file under the `/src/api` directory of your Medusa application. The file’s name must be `route.ts` or `route.js`.
+
+For example, to create a `GET` API Route at `/store/hello-world`, create the file `src/api/store/hello-world/route.ts` with the following content:
+
+```ts
+import type { MedusaRequest, MedusaResponse } from "@medusajs/framework/http";
+
+export async function GET(req: MedusaRequest, res: MedusaResponse) {
+  res.json({
+    message: "Hello world!",
+  });
+}
+```
+
+## Supported HTTP methods
+
+The file based routing supports the following HTTP methods:
+
+- GET
+- POST
+- PUT
+- PATCH
+- DELETE
+- OPTIONS
+- HEAD
+
+You can define a handler for each of these methods by exporting a function with the name of the method in the paths `route.ts` file.
+
+For example:
+
+```ts
+import type { MedusaRequest, MedusaResponse } from "@medusajs/framework/http";
+
+export async function GET(req: MedusaRequest, res: MedusaResponse) {
+  // Handle GET requests
+}
+
+export async function POST(req: MedusaRequest, res: MedusaResponse) {
+  // Handle POST requests
+}
+
+export async function PUT(req: MedusaRequest, res: MedusaResponse) {
+  // Handle PUT requests
+}
+```
+
+## Parameters
+
+To create an API route that accepts a path parameter, create a directory within the route's path whose name is of the format `[param]`.
+
+For example, if you want to define a route that takes a `productId` parameter, you can do so by creating a file called `/api/products/[productId]/route.ts`:
+
+```ts
+import type {
+  MedusaRequest,
+  MedusaResponse,
+} from "@medusajs/framework/http"
+
+export async function GET(req: MedusaRequest, res: MedusaResponse) {
+  const { productId } = req.params;
+
+  res.json({
+    message: `You're looking for product ${productId}`
+  })
+}
+```
+
+To create an API route that accepts multiple path parameters, create within the file's path multiple directories whose names are of the format `[param]`.
+
+For example, if you want to define a route that takes both a `productId` and a `variantId` parameter, you can do so by creating a file called `/api/products/[productId]/variants/[variantId]/route.ts`.
+
+## Using the container
+
+The Medusa container is available on `req.scope`. Use it to access modules' main services and other registered resources:
+
+```ts
+import type {
+  MedusaRequest,
+  MedusaResponse,
+} from "@medusajs/framework/http"
+
+export const GET = async (
+  req: MedusaRequest,
+  res: MedusaResponse
+) => {
+  const productModuleService = req.scope.resolve("product")
+
+  const [, count] = await productModuleService.listAndCount()
+
+  res.json({
+    count,
+  })
+}
+```
+
+## Middleware
+
+You can apply middleware to your routes by creating a file called `/api/middlewares.ts`. This file must export a configuration object with what middleware you want to apply to which routes.
+
+For example, if you want to apply a custom middleware function to the `/store/custom` route, you can do so by adding the following to your `/api/middlewares.ts` file:
+
+```ts
+import { defineMiddlewares } from "@medusajs/framework/http"
+import type {
+  MedusaRequest,
+  MedusaResponse,
+  MedusaNextFunction,
+} from "@medusajs/framework/http";
+
+async function logger(
+  req: MedusaRequest,
+  res: MedusaResponse,
+  next: MedusaNextFunction
+) {
+  console.log("Request received");
+  next();
+}
+
+export default defineMiddlewares({
+  routes: [
+    {
+      matcher: "/store/custom",
+      middlewares: [logger],
+    },
+  ],
+})
+```
+
+The `matcher` property can be either a string or a regular expression. The `middlewares` property accepts an array of middleware functions.

package/src/api/admin/middlewares.ts

@@ -0,0 +1,8 @@
+import { MiddlewareRoute } from "@medusajs/framework";
+import { adminAttributeRoutesMiddlewares } from "./plugin/attributes/middlewares";
+import { adminAttributeSetMiddlewares } from "./plugin/attribute-set/middlewares";
+
+export const adminRoutesMiddlewares: MiddlewareRoute[] = [
+    ...adminAttributeRoutesMiddlewares,
+    ...adminAttributeSetMiddlewares,
+]

package/src/api/admin/plugin/attribute-set/[id]/attributes/route.ts

@@ -0,0 +1,17 @@
+import { MedusaRequest, MedusaResponse } from "@medusajs/framework";
+import { AdminBatchLinkAttributeSetAttributesType } from "../../validators";
+import { batchLinkAttributeSetAttributesWorkflow } from "../../../../../../workflows/attribute-set/workflows";
+
+export const POST = async (req: MedusaRequest<AdminBatchLinkAttributeSetAttributesType>, res: MedusaResponse) => {
+    const attributeSetId = req.params.id
+    const payload = req.validatedBody
+
+    await batchLinkAttributeSetAttributesWorkflow(req.scope).run({
+        input: {
+            ...payload,
+            id: attributeSetId
+        }
+    })
+
+    return res.status(200).json({})
+}

package/src/api/admin/plugin/attribute-set/[id]/route.ts

@@ -0,0 +1,41 @@
+import { MedusaRequest, MedusaResponse, refetchEntity } from "@medusajs/framework";
+import { AdminGetAttributeParamsType } from "../../attributes/validators";
+import { ContainerRegistrationKeys } from "@medusajs/framework/utils";
+import { updateAttributeSetWorkflow } from "../../../../../workflows/attribute-set/workflows";
+import { AdminUpdateAttributeSetType } from "../validators";
+
+export const GET = async (req: MedusaRequest<AdminGetAttributeParamsType>, res: MedusaResponse) => {
+    const id = req.params.id
+    const query = req.scope.resolve(ContainerRegistrationKeys.QUERY)
+
+    const { data: [attributeSet] } = await query.graph({
+        entity: 'attribute_set',
+        filters: { id }, 
+        ...req.queryConfig,
+    }, {
+        throwIfKeyNotFound: true,
+    })
+
+    return res.status(200).json({ attributeSet })
+}
+
+export const POST = async (req: MedusaRequest<AdminUpdateAttributeSetType>, res: MedusaResponse) => {
+    const id = req.params.id
+    const body = req.validatedBody
+
+    await updateAttributeSetWorkflow(req.scope).run({
+        input: {
+            ...body,
+            id,
+        }
+    })
+
+    const attributeSet = await refetchEntity(
+        'attribute_set',
+        id,
+        req.scope,
+        req.queryConfig.fields,
+    )
+
+    return res.status(200).json({ attributeSet })
+}

package/src/api/admin/plugin/attribute-set/middlewares.ts

@@ -0,0 +1,42 @@
+import { AdminBatchLinkAttributeSetAttributes, AdminCreateAttributeSet, AdminGetAttributeSetParams, AdminGetAttributeSetsParams, AdminUpdateAttributeSet } from "./validators";
+import { MiddlewareRoute, validateAndTransformBody, validateAndTransformQuery } from "@medusajs/framework";
+
+import { listAttributeSetQueryConfig, retrieveAttributeSetQueryConfig } from "./query-config";
+
+export const adminAttributeSetMiddlewares: MiddlewareRoute[] = [
+    {
+        matcher: '/admin/plugin/attribute-set',
+        method: ['GET'],
+        middlewares: [validateAndTransformQuery(AdminGetAttributeSetsParams, listAttributeSetQueryConfig)]
+    },
+    {
+        matcher: '/admin/plugin/attribute-set',
+        methods: ['POST'],
+        middlewares: [
+            validateAndTransformQuery(AdminGetAttributeSetParams, retrieveAttributeSetQueryConfig),
+            validateAndTransformBody(AdminCreateAttributeSet)
+        ]
+    },
+    {
+        matcher: '/admin/plugin/attribute-set/:id',
+        method: ['GET'],
+        middlewares: [
+            validateAndTransformQuery(AdminGetAttributeSetParams, retrieveAttributeSetQueryConfig)
+        ]
+    },
+    {
+        matcher: '/admin/plugin/attribute-set/:id',
+        method: ['POST'],
+        middlewares: [
+            validateAndTransformQuery(AdminGetAttributeSetParams, retrieveAttributeSetQueryConfig),
+            validateAndTransformBody(AdminUpdateAttributeSet)
+        ]
+    },
+    {
+        matcher: '/admin/plugin/attribute-set/:id/attributes',
+        method: ['POST'],
+        middlewares: [
+            validateAndTransformBody(AdminBatchLinkAttributeSetAttributes)
+        ]
+    }
+]

package/src/api/admin/plugin/attribute-set/query-config.ts

@@ -0,0 +1,20 @@
+export const defaultAdminAttributeSetFields = [
+    'id',
+    'name',
+    'description',
+    'handle',
+    'metadata',
+    '*attributes',
+    '*attributes.possible_values',
+]
+
+export const retrieveAttributeSetQueryConfig = {
+    defaults: defaultAdminAttributeSetFields,
+    isList: false,
+}
+
+export const listAttributeSetQueryConfig = {
+    ...retrieveAttributeSetQueryConfig,
+    defaultLimit: 50,
+    isList: true,
+}

package/src/api/admin/plugin/attribute-set/route.ts

@@ -0,0 +1,34 @@
+import { MedusaRequest, MedusaResponse, refetchEntity } from "@medusajs/framework";
+
+import { AdminCreateAttributeSetType, AdminGetAttributesSetsParamsType } from "./validators";
+import { createAttributeSetWorkflow } from "../../../../workflows/attribute-set/workflows/create-attribute-set";
+import { ContainerRegistrationKeys } from "@medusajs/framework/utils";
+import { AttributeSet } from "../../../../types/attribute";
+import { PaginatedResponse } from "@medusajs/framework/types";
+
+export const POST = async (req: MedusaRequest<AdminCreateAttributeSetType>, res: MedusaResponse) => {
+    const { result: [attributeSet] } = await createAttributeSetWorkflow(req.scope).run({
+        input: [req.validatedBody]
+    })
+
+    const response = await refetchEntity(
+        'attribute_set',
+        attributeSet.id,
+        req.scope,
+        req.queryConfig.fields,
+    )
+    
+    return res.status(201).json({ attribute_set: response })
+}
+
+export const GET = async (req:MedusaRequest<AdminGetAttributesSetsParamsType>, res: MedusaResponse) => {
+    const query = req.scope.resolve(ContainerRegistrationKeys.QUERY)
+
+    const { data: attributeSets, metadata } = await query.graph({
+        entity: 'attribute_set',
+        filters: req.filterableFields,
+        ...req.queryConfig
+    })
+
+    return res.status(200).json({ attributeSets, count: metadata?.count, offset: metadata?.skip, limit: metadata?.take })
+}

package/src/api/admin/plugin/attribute-set/validators.ts

@@ -0,0 +1,45 @@
+import { applyAndAndOrOperators } from '@medusajs/medusa/api/utils/common-validators/common'
+import { createFindParams, createOperatorMap, createSelectParams } from '@medusajs/medusa/api/utils/validators'
+import { z } from 'zod'
+
+export const AdminGetAttributeSetParams = createSelectParams()
+export type AdminGetAttributeSetParamsType = z.infer<typeof AdminGetAttributeSetParams>
+
+export const GetAttributeSetsParams = z.object({
+    id: z.string().optional(),
+    name: z.string().optional(),
+    handle: z.string().optional(),
+    created_at: createOperatorMap().optional(),
+    updated_at: createOperatorMap().optional(),
+    deleted_at: createOperatorMap().optional(),
+})
+export const AdminGetAttributeSetsParams = createFindParams({
+    offset: 0,
+    limit: 50,
+})
+.merge(applyAndAndOrOperators(GetAttributeSetsParams))
+.merge(GetAttributeSetsParams)
+
+export type AdminGetAttributesSetsParamsType = z.infer<typeof AdminGetAttributeSetsParams>
+
+const AdminBaseAttributeSet = z.object({
+    name: z.string().optional(),
+    description: z.string().optional(),
+    handle: z.string().optional(),
+    metadata: z.record(z.unknown()).nullish(),
+    attributes: z.array(z.string()).optional(),
+}).strict()
+
+export type AdminCreateAttributeSetType = z.infer<typeof AdminCreateAttributeSet>
+export const AdminCreateAttributeSet = AdminBaseAttributeSet.merge(z.object({
+    name: z.string().min(1),
+})).strict()
+
+export type AdminUpdateAttributeSetType = z.infer<typeof AdminUpdateAttributeSet>
+export const AdminUpdateAttributeSet = AdminBaseAttributeSet.merge(z.object({ name: z.string().min(1) }))
+
+export type AdminBatchLinkAttributeSetAttributesType = z.infer<typeof AdminBatchLinkAttributeSetAttributes>
+export const AdminBatchLinkAttributeSetAttributes = z.object({
+    add: z.array(z.string()).optional(),
+    remove: z.array(z.string()).optional(),
+})

package/src/api/admin/plugin/attributes/[id]/route.ts

@@ -0,0 +1,85 @@
+import { MedusaRequest, MedusaResponse, refetchEntities } from "@medusajs/framework";
+import { AdminGetAttributeParamsType, AdminUpdateAttributeType } from "../validators";
+import { ContainerRegistrationKeys, MedusaError, MedusaErrorTypes } from "@medusajs/framework/utils";
+import { updateAttributesWorkflow } from "../../../../../workflows";
+import { UpdateAttributeDTO } from "../../../../../modules/attribute/types/attribute/common";
+import { deleteAttributeWorkflow } from "../../../../../workflows/attribute/workflows/delete-attribute";
+
+export const POST = async (req: MedusaRequest<UpdateAttributeDTO>, res: MedusaResponse) => {
+    const query = req.scope.resolve(ContainerRegistrationKeys.QUERY)
+
+    const attributeId = req.params.id
+
+    const { data: [existingAttribute] } = await query.graph({
+        entity: 'attribute',
+        fields: ['id'],
+        filters: {
+            id: attributeId
+        }
+    })
+
+    if (!existingAttribute) {
+        throw new MedusaError(MedusaErrorTypes.NOT_FOUND, `Attribute with id '${attributeId}' not found`)
+    }
+
+    await updateAttributesWorkflow(req.scope).run({
+        input: { attributes: [{
+            ...req.validatedBody,
+            id: attributeId
+        }] }
+    })
+
+    const attribute = await refetchEntities(
+        'attribute',
+        attributeId,
+        req.scope,
+        req.queryConfig.fields
+    )
+
+    return res.status(201).json({ attribute })
+}
+
+export const GET = async (req: MedusaRequest<AdminGetAttributeParamsType>, res: MedusaResponse) => {
+    const query = req.scope.resolve(ContainerRegistrationKeys.QUERY)
+
+    const attributeId = req.params.id
+
+    const { data: [attribute] } = await query.graph({
+        entity: 'attribute',
+        ...req.queryConfig,
+        filters: {
+            id: attributeId,
+        },
+    })
+
+    if (!attribute) {
+        throw new MedusaError(MedusaErrorTypes.NOT_FOUND, 'Attribute not found')
+    }
+
+    return res.status(200).json({ attribute })
+}
+
+export const DELETE = async (req: MedusaRequest, res: MedusaResponse) => {
+    const attributeId = req.params.id 
+    const query = req.scope.resolve(ContainerRegistrationKeys.QUERY)
+
+    const { data: [attribute] } = await query.graph({
+        entity: 'attribute',
+        fields: ['id'],
+        filters: {
+            id: attributeId,
+        },
+    })
+
+    if (!attribute) {
+        throw new MedusaError(MedusaErrorTypes.NOT_FOUND, 'Attribute not found')
+    }
+
+    await deleteAttributeWorkflow(req.scope).run({
+        input: {
+            id: attributeId
+        }
+    })
+
+    return res.status(200).json({})
+}

package/src/api/admin/plugin/attributes/[id]/values/[valueId]/route.ts

@@ -0,0 +1,41 @@
+import { ContainerRegistrationKeys, MedusaError, MedusaErrorTypes } from "@medusajs/framework/utils";
+import { MedusaRequest, MedusaResponse, refetchEntity } from "@medusajs/framework";
+
+import { AdminGetAttributeValueParamsType, AdminUpdateAttributeValueType } from "../../../validators";
+import { updateAttributePossibleValueWorkflow } from "../../../../../../../workflows/attribute_possible_value";
+
+export const GET = async (req: MedusaRequest<AdminGetAttributeValueParamsType>, res: MedusaResponse) => {
+    const attributeId = req.params.valueId
+    const query = req.scope.resolve(ContainerRegistrationKeys.QUERY)
+
+    const { data: [attributePossibleValue] } = await query.graph({
+        entity: 'attribute_possible_value',
+        ...req.queryConfig,
+        filters: {
+            ...req.filterableFields,
+            id: attributeId
+        }
+    })
+
+    if (!attributePossibleValue) {
+        throw new MedusaError(MedusaErrorTypes.NOT_FOUND, `Attribute possible value with id '${attributeId}' was not found`)
+    }
+
+    return res.status(200).json({ attributePossibleValue })
+}
+
+export const POST = async (req: MedusaRequest<AdminUpdateAttributeValueType>, res: MedusaResponse) => {
+    const { valueId } = req.params
+    const body = req.validatedBody
+
+    await updateAttributePossibleValueWorkflow(req.scope).run({
+        input: {
+            ...body,
+            id: valueId
+        }
+    })
+
+    const attributePossibleValue = await refetchEntity('attribute_possible_value', valueId, req.scope, req.queryConfig.fields)
+
+    return res.status(200).json({ attributePossibleValue: attributePossibleValue })
+}