asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

docs: fixes to medusa-react (#4672)

Browse Source 
* docs: fixes to medusa-react

* fixes to admin customization pages

* fix eslint errors

* added routes and settings props

* fixes to settings page

* small fix for settings
This commit is contained in:
Shahed Nasser
2023-08-02 15:27:32 +03:00
committed by GitHub
parent e78c47b66f
commit 738eac63aa
4 changed files with 142 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
docs/content/admin/routes.md
View File

@@ -176,6 +176,45 @@ When using the `develop` command, the admin dashboard will run in development mo
---
## Route Props
Every route receives props of the type `RouteProps`, which includes the `notify` prop. The `notify` prop is an object that includes the following attributes:
- `success`: a function that can be used to show a success message.
- `error`: a function that can be used to show an error message.
- `warn`: a function that can be used to show a warning message.
- `info`: a function that can be used to show an info message.
For example:
```tsx
import { Post } from "../../../../../models/post"
import PostForm from "../../../../components/post/form"
import { RouteProps } from "@medusajs/admin-ui"
const BlogPostCreatePage = ({
notify,
}: RouteProps) => {
const onSuccess = (post: Post) => {
notify.success(
"Success",
`Post ${post.title} created successfully`
)
}
return (
<div>
<h1 className="text-xl mb-2">Create Post</h1>
<PostForm onSuccess={onSuccess} />
</div>
)
}
export default BlogPostCreatePage
```
---
## Show Route in Sidebar
You can add your routes into the admin dashboard sidebar by exporting an object of type `RouteConfig` import from `@medusajs/admin` in the same route file.
@@ -326,6 +365,8 @@ const CustomPage = () => {
export default CustomPage
```
### Custom Endpoints
You can also use `medusa-react` to interact with custom endpoints using [Custom Hooks utility functions](../medusa-react/overview.mdx#custom-hooks).
---

53
docs/content/admin/setting-pages.md
View File

@@ -11,11 +11,11 @@ In this document, you’ll learn how to create a setting page in the admin.
## Overview
The admin UI routes allow you to add new pages to the admin dashboard. However, they can’t be used to add a new tab under the Setting page.
The [admin UI routes](./routes.md) allow you to add new pages to the admin dashboard. However, they can’t be used to add a new tab under the Setting page.
To do that, you need to create an Admin setting page. The page will automatically be shown as a tab under the Setting page in the admin. The tab leads to the content of your custom page.
An admin UI route is essentially a React Component created under the `src/admin/settings` directory.
A setting page is essentially a React Component created under the `src/admin/settings` directory.
This guide explains how to create a new setting page in the admin dashboard with some examples.
@@ -130,7 +130,7 @@ For example, if you want the setting page to be available in the admin dashboard
### Step 2: Create React Component in File
For an admin route to be valid, it must default export a React component. There are no restrictions on the content of the React component. It must also export a configuration object that indicates how the tab is shown on the Setting page.
For a setting page to be valid, it must default export a React component. There are no restrictions on the content of the React component. It must also export a configuration object that indicates how the tab is shown on the Setting page.
For example, you can create the file `src/admin/settings/custom/page.tsx` with the following content:
@@ -176,6 +176,51 @@ If you click on the tab, a new page will open with the content as defined in you
---
## Setting Page Props
Every route receives props of the type `RouteProps`, which includes the `notify` prop. The `notify` prop is an object that includes the following attributes:
- `success`: a function that can be used to show a success message.
- `error`: a function that can be used to show an error message.
- `warn`: a function that can be used to show a warning message.
- `info`: a function that can be used to show an info message.
For example:
```tsx title=src/admin/settings/custom/page.tsx
import type { SettingConfig } from "@medusajs/admin"
import type { SettingProps } from "@medusajs/admin-ui"
const CustomSettingPage = ({
notify,
}: SettingProps) => {
const handleClick = () => {
notify.success("Success", "You clicked the button")
}
return (
<div>
<h1>Custom Setting Page</h1>
<button onClick={handleClick}>
Click Me
</button>
</div>
)
}
export const config: SettingConfig = {
card: {
label: "Custom",
description: "Manage your custom settings",
},
}
export default CustomSettingPage
```
---
## Styling Setting Page
Admin setting pages support [Tailwind CSS](https://tailwindcss.com/) by default.
@@ -295,6 +340,8 @@ export const config: SettingConfig = {
export default CustomSettingPage
```
### Custom Endpoints
You can also use `medusa-react` to interact with custom endpoints using [Custom Hooks utility functions](../medusa-react/overview.mdx#custom-hooks).
---

70
docs/content/admin/widgets.md
View File

@@ -1103,35 +1103,6 @@ Open `localhost:7001` in your browser and log in. Then, go to the details page o
Try making any changes to the component. The development server will hot-reload and your widget will be updated immediately.
### Styling your Widget
Admin Widgets support [Tailwind CSS](https://tailwindcss.com/) out of the box.
For example, you can update the widget you created earlier to use Tailwind CSS classes:
<!-- eslint-disable max-len -->
```tsx title=src/admin/widgets/product-widget.tsx
import type {
WidgetConfig,
} from "@medusajs/admin"
const ProductWidget = () => {
return (
<div
className="bg-white p-8 border border-gray-200 rounded-lg">
<h1>Product Widget</h1>
</div>
)
}
export const config: WidgetConfig = {
zone: "product.details.after",
}
export default ProductWidget
```
### Widget Props
Every widget receives props of the type `WidgetProps`, which includes the `notify` prop. The `notify` prop is an object that includes the following attributes:
@@ -1179,7 +1150,40 @@ export const config: WidgetConfig = {
export default ProductWidget
```
### Routing Functionalities
---
## Styling your Widget
Admin Widgets support [Tailwind CSS](https://tailwindcss.com/) out of the box.
For example, you can update the widget you created earlier to use Tailwind CSS classes:
<!-- eslint-disable max-len -->
```tsx title=src/admin/widgets/product-widget.tsx
import type {
WidgetConfig,
} from "@medusajs/admin"
const ProductWidget = () => {
return (
<div
className="bg-white p-8 border border-gray-200 rounded-lg">
<h1>Product Widget</h1>
</div>
)
}
export const config: WidgetConfig = {
zone: "product.details.after",
}
export default ProductWidget
```
---
## Routing Functionalities
If you want to navigate to other pages, link to other pages, or use other routing functionalities, you can use [react-router-dom](https://reactrouter.com/en/main) package.
@@ -1224,7 +1228,9 @@ export default ProductWidget
View [react-router-dom’s documentation](https://reactrouter.com/en/main) for other available components and hooks.
### Querying and Mutating Data
---
## Querying and Mutating Data
You will most likely need to interact with the Medusa backend from your Widgets. To do so, you can utilize the Medusa React package. It contains a collection of queries and mutation built on `@tanstack/react-query` that lets you interact with the Medusa backend.
@@ -1273,6 +1279,8 @@ export const config: WidgetConfig = {
export default ProductWidget
```
### Custom Endpoints
You can also use `medusa-react` to interact with custom endpoints using the [createCustomAdminHooks utility function](../medusa-react/overview.mdx#custom-hooks).
---

20
docs/content/medusa-react/overview.mdx
View File

@@ -270,7 +270,7 @@ type AdminBlogPostRes = {
const BlogPost = () => {
const { id } = useParams()
const { data: { post }, isLoading } = useAdminCustomQuery<
const { data, isLoading } = useAdminCustomQuery<
AdminBlogPostQuery,
AdminBlogPostRes
>(
@@ -284,7 +284,7 @@ const BlogPost = () => {
return (
<>
{isLoading && <span>Loading...</span>}
{post && <span>{post.title}</span>}
{data && data.post && <span>{data.post.title}</span>}
</>
)
}
@@ -320,7 +320,7 @@ type AdminBlogPostsQuery = {
const AuthorsBlogPosts = () => {
const { id } = useParams()
const { data: { posts }, isLoading } = useAdminCustomQuery<
const { data, isLoading } = useAdminCustomQuery<
AdminBlogPostsQuery, AdminBlogPostsRes
>(
`/blog/posts`, // path
@@ -334,9 +334,13 @@ const AuthorsBlogPosts = () => {
return (
<>
{isLoading && <span>Loading...</span>}
{posts && <span>{posts.map((post, index) => (
<span key={index}>{post.title}</span>
))}</span>}
{data && data.posts && (
<span>
{data.posts.map((post, index) => (
<span key={index}>{post.title}</span>
))}
</span>
)}
</>
)
}
@@ -427,10 +431,10 @@ export default CreateBlogPost
#### useAdminCustomDelete
The `useAdminCustomDelete` utility hook can be used to send a `DELETE` request to a custom endpoint in your Medusa backend. It's a generic function, so you can pass a type for the request body if you're using TypeScript in your development:
The `useAdminCustomDelete` utility hook can be used to send a `DELETE` request to a custom endpoint in your Medusa backend. It's a generic function, so you can pass a type for the expected response if you're using TypeScript in your development:
```ts
useAdminCustomPost<RequestType, ResponseType>
useAdminCustomDelete<ResponseType>
```
The hook accepts the following parameters: