From b4d8e265e30b6dae8833e5fde7c7ccd7aceafae9 Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Tue, 20 Aug 2024 15:48:17 +0300 Subject: [PATCH] docs: redesign cards (#8671) * docs: redesign cards * fix build error --- www/apps/book/app/not-found.mdx | 12 +-- www/apps/book/app/page.mdx | 18 ++-- www/apps/resources/app/not-found.mdx | 12 +-- www/apps/resources/app/page.mdx | 74 ++++++---------- www/apps/resources/app/recipes/b2b/page.mdx | 81 ++++++------------ .../app/recipes/commerce-automation/page.mdx | 51 ++++------- .../examples/standard/page.mdx | 6 +- .../app/recipes/digital-products/page.mdx | 45 ++++------ .../resources/app/recipes/ecommerce/page.mdx | 6 +- .../integrate-ecommerce-stack/page.mdx | 9 +- .../marketplace/examples/vendors/page.mdx | 6 +- .../app/recipes/marketplace/page.mdx | 27 ++---- .../app/recipes/multi-region-store/page.mdx | 30 +++---- .../app/recipes/omnichannel/page.mdx | 15 ++-- www/apps/resources/app/recipes/oms/page.mdx | 36 +++----- .../recipes/personalized-products/page.mdx | 21 ++--- www/apps/resources/app/recipes/pos/page.mdx | 33 +++----- .../subscriptions/examples/standard/page.mdx | 6 +- .../app/recipes/subscriptions/page.mdx | 30 +++---- www/apps/ui/src/app/not-found.mdx | 12 +-- www/apps/ui/src/app/not-found.tsx | 12 +-- www/apps/ui/src/components/figma-card.tsx | 15 ++++ www/apps/ui/src/components/figma-icon.tsx | 6 -- www/apps/ui/src/components/mdx-components.tsx | 4 +- www/apps/ui/src/content/docs/index.mdx | 9 +- www/apps/user-guide/app/not-found.mdx | 12 +-- .../src/components/BorderedIcon/index.tsx | 37 ++++---- .../components/Card/Layout/Default/index.tsx | 78 +++++++++++++++++ .../components/Card/Layout/Filler/index.tsx | 30 +++++++ .../components/Card/Layout/Large/index.tsx | 63 ++++++++++++++ .../docs-ui/src/components/Card/index.tsx | 84 ++++--------------- .../src/components/ChildDocs/index.tsx | 4 +- .../components/Icons/StripeColored/index.tsx | 60 +++++++++++++ .../docs-ui/src/components/Icons/index.tsx | 1 + www/packages/docs-ui/src/hooks/index.ts | 1 + .../src/hooks/use-is-external-link/index.tsx | 19 +++++ .../src/utils/estree-to-js.ts | 4 - 37 files changed, 493 insertions(+), 476 deletions(-) create mode 100644 www/apps/ui/src/components/figma-card.tsx delete mode 100644 www/apps/ui/src/components/figma-icon.tsx create mode 100644 www/packages/docs-ui/src/components/Card/Layout/Default/index.tsx create mode 100644 www/packages/docs-ui/src/components/Card/Layout/Filler/index.tsx create mode 100644 www/packages/docs-ui/src/components/Card/Layout/Large/index.tsx create mode 100644 www/packages/docs-ui/src/components/Icons/StripeColored/index.tsx create mode 100644 www/packages/docs-ui/src/hooks/use-is-external-link/index.tsx diff --git a/www/apps/book/app/not-found.mdx b/www/apps/book/app/not-found.mdx index 62ee862862..c2bd96b625 100644 --- a/www/apps/book/app/not-found.mdx +++ b/www/apps/book/app/not-found.mdx @@ -22,26 +22,22 @@ If you think this is a mistake, please [report this issue on GitHub](https://git { title: "Get Started Docs", href: "/", - showLinkIcon: false, - startIcon: + icon: BookOpen }, { title: "Learning Resources", href: "!resources!", - showLinkIcon: false, - startIcon: + icon: AcademicCapSolid }, { title: "Admin API reference", href: "!api!/admin", - showLinkIcon: false, - startIcon: + icon: ComputerDesktopSolid }, { title: "Store API reference", href: "!api!/store", - showLinkIcon: false, - startIcon: + icon: BuildingStorefront } ]} /> \ No newline at end of file diff --git a/www/apps/book/app/page.mdx b/www/apps/book/app/page.mdx index 3f087a0b05..08b6d0dfd0 100644 --- a/www/apps/book/app/page.mdx +++ b/www/apps/book/app/page.mdx @@ -57,43 +57,37 @@ Medusa is for ambitious businesses and developers that are limited by traditiona title: "Use Case: D2C", text: "How Matt Sleeps built a unique D2C experience with Medusa", href: "https://medusajs.com/blog/matt-sleeps/", - startIcon: , - isExternal: true + icon: FlyingBox, }, { title: "Use Case: OMS", text: "How Makro Pro Built an OMS with Medusa", href: "https://medusajs.com/blog/makro-pro/", - startIcon: , - isExternal: true + icon: CheckCircleSolid, }, { title: "Use Case: Marketplace", text: "How Foraged built a custom marketplace with Medusa", href: "https://medusajs.com/blog/foraged/", - startIcon: , - isExternal: true + icon: BuildingStorefront, }, { title: "Use Case: POS", text: "How Tekla built a global webshop and a POS system with Medusa", href: "https://medusajs.com/blog/tekla-pos/", - startIcon: , - isExternal: true + icon: ComputerDesktop, }, { title: "Use Case: B2B", text: "How Visionary built B2B commerce with Medusa", href: "https://medusajs.com/blog/visionary/", - startIcon: , - isExternal: true + icon: BuildingsSolid, }, { title: "Use Case: Platform", text: "How Catalog built a B2B platform for SMBs with Medusa", href: "https://medusajs.com/blog/catalog/", - startIcon: , - isExternal: true + icon: BuildingsSolid, } ]} itemsPerRow={2} /> diff --git a/www/apps/resources/app/not-found.mdx b/www/apps/resources/app/not-found.mdx index 62ee862862..c2bd96b625 100644 --- a/www/apps/resources/app/not-found.mdx +++ b/www/apps/resources/app/not-found.mdx @@ -22,26 +22,22 @@ If you think this is a mistake, please [report this issue on GitHub](https://git { title: "Get Started Docs", href: "/", - showLinkIcon: false, - startIcon: + icon: BookOpen }, { title: "Learning Resources", href: "!resources!", - showLinkIcon: false, - startIcon: + icon: AcademicCapSolid }, { title: "Admin API reference", href: "!api!/admin", - showLinkIcon: false, - startIcon: + icon: ComputerDesktopSolid }, { title: "Store API reference", href: "!api!/store", - showLinkIcon: false, - startIcon: + icon: BuildingStorefront } ]} /> \ No newline at end of file diff --git a/www/apps/resources/app/page.mdx b/www/apps/resources/app/page.mdx index 2b64591056..791597bde7 100644 --- a/www/apps/resources/app/page.mdx +++ b/www/apps/resources/app/page.mdx @@ -37,40 +37,34 @@ Follow the [Medusa v2 Docs](!docs!) to become an advanced Medusa developer. , + icon: TagSolid, title: "Product Module", href: "/commerce-modules/product", - showLinkIcon: false }, { - startIcon: , + icon: CheckCircleSolid, title: "Order Module", href: "/commerce-modules/order", - showLinkIcon: false }, { - startIcon: , + icon: ShoppingCartSolid, title: "Cart Module", href: "/commerce-modules/product", - showLinkIcon: false }, { - startIcon: , + icon: CurrencyDollarSolid, title: "Pricing Module", href: "/commerce-modules/pricing", - showLinkIcon: false }, { - startIcon: , + icon: UsersSolid, title: "Customer Module", href: "/commerce-modules/customer", - showLinkIcon: false }, { - startIcon: , - title: "More Modules", - href: "/commerce-modules", - showLinkIcon: false + type: "filler", + text: "Find more modules for your commerce application.", + href: "/commerce-modules" } ]} /> @@ -80,28 +74,25 @@ Follow the [Medusa v2 Docs](!docs!) to become an advanced Medusa developer. , + icon: Stripe, title: "Stripe", + iconClassName: "[&_path]:fill-medusa-fg-subtle", href: "/commerce-modules/payment/payment-provider/stripe", - showLinkIcon: false }, { - startIcon: , + icon: EnvelopeSolid, title: "SendGrid", href: "/architectural-modules/notification/sendgrid", - showLinkIcon: false }, { - startIcon: , + icon: DocumentTextSolid, title: "S3", href: "/architectural-modules/file/s3", - showLinkIcon: false }, { - startIcon: , - title: "More Integrations", - href: "/integrations", - showLinkIcon: false + type: "filler", + text: "Integrate other third-party services to your application.", + href: "/integrations" } ]} /> @@ -111,40 +102,24 @@ Follow the [Medusa v2 Docs](!docs!) to become an advanced Medusa developer. , + icon: BuildingStorefront, title: "Marketplace", href: "/recipes/marketplace", - showLinkIcon: false }, { - startIcon: , + icon: CreditCardSolid, title: "Subscriptions", href: "/recipes/subscriptions", - showLinkIcon: false }, { - startIcon: , + icon: PhotoSolid, title: "Digital Products", href: "/recipes/digital-products", - showLinkIcon: false }, { - startIcon: , - title: "Ecommerce", - href: "/recipes/ecommerce", - showLinkIcon: false - }, - { - startIcon: , - title: "Commerce Automation", - href: "/recipes/commerce-automation", - showLinkIcon: false - }, - { - startIcon: , - title: "B2B", - href: "/recipes/b2b", - showLinkIcon: false + type: "filler", + text: "Find more recipes to implement your use case.", + href: "/recipes" } ]} /> @@ -154,15 +129,14 @@ Follow the [Medusa v2 Docs](!docs!) to become an advanced Medusa developer. , + icon: CommandLineSolid, title: "Medusa CLI", href: "/medusa-cli", - showLinkIcon: false }, { - startIcon: , + icon: NextJs, + iconClassName: "[&_path]:fill-medusa-fg-subtle", title: "Next.js Starter", href: "/nextjs-starter", - showLinkIcon: false }, ]} /> diff --git a/www/apps/resources/app/recipes/b2b/page.mdx b/www/apps/resources/app/recipes/b2b/page.mdx index d958d4af94..3620d70bca 100644 --- a/www/apps/resources/app/recipes/b2b/page.mdx +++ b/www/apps/resources/app/recipes/b2b/page.mdx @@ -41,8 +41,7 @@ You can create a sales channel through the Medusa Admin or Admin REST APIs. href: "#", title: "Option 1: Use Medusa Admin", text: "Create the sales channel using the Medusa Admin.", - startIcon: , - showLinkIcon: false, + icon: UsersSolid, badge: { variant: "blue", children: "Guide Soon" @@ -52,8 +51,7 @@ You can create a sales channel through the Medusa Admin or Admin REST APIs. href: "!api!/api/admin#sales-channels_postsaleschannels", title: "Option 2: Using the REST APIs", text: "Create the sales channel using the REST APIs.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} /> @@ -79,8 +77,7 @@ You can create a publishable API key through the Medusa Admin or the Admin REST href: "#", title: "Option 1: Use Medusa Admin", text: "Create the publishable API key using the Medusa Admin.", - startIcon: , - showLinkIcon: false, + icon: UsersSolid, badge: { variant: "blue", children: "Guide Soon" @@ -90,8 +87,7 @@ You can create a publishable API key through the Medusa Admin or the Admin REST href: "!api!/api/admin#api-keys_postapikeys", title: "Option 2: Using the REST APIs", text: "Create the publishable API key using the REST APIs.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} /> @@ -104,8 +100,7 @@ You can create a publishable API key through the Medusa Admin or the Admin REST href: "#", title: "Option 1: Use Medusa Admin", text: "Associate the publishable API key with the B2B sales channel using the Medusa Admin.", - startIcon: , - showLinkIcon: false, + icon: UsersSolid, badge: { variant: "blue", children: "Guide Soon" @@ -115,8 +110,7 @@ You can create a publishable API key through the Medusa Admin or the Admin REST href: "#", title: "Option 2: Using the REST APIs", text: "Associate the publishable API key with the B2B sales channel using the REST APIs.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} /> @@ -135,8 +129,7 @@ You can create new products or add existing ones to the B2B sales channel using href: "#", title: "Using Medusa Admin", text: "Create products using the Medusa Admin.", - startIcon: , - showLinkIcon: false, + icon: UsersSolid, badge: { variant: "blue", children: "Guide Soon" @@ -146,8 +139,7 @@ You can create new products or add existing ones to the B2B sales channel using href: "!api!/api/admin#products_postproducts", title: "Using REST APIs", text: "Create products using the REST APIs.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} /> @@ -160,8 +152,7 @@ You can create new products or add existing ones to the B2B sales channel using href: "#", title: "Using Medusa Admin", text: "Add the products to the B2B sales channel using the Medusa Admin.", - startIcon: , - showLinkIcon: false, + icon: UsersSolid, badge: { variant: "blue", children: "Guide Soon" @@ -171,8 +162,7 @@ You can create new products or add existing ones to the B2B sales channel using href: "!api!/api/admin#sales-channels_postsaleschannelsidproductsbatchadd", title: "Using REST APIs", text: "Add the products to the B2B sales channel using the REST APIs.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} /> @@ -197,15 +187,13 @@ Module Relationships is coming soon. href: "!docs!/basics/modules-and-services", title: "Create Module", text: "Learn how to create a module in Medusa.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "!docs!/basics/data-models", title: "Create Data Models", text: "Learn how to create data models.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} /> @@ -213,8 +201,7 @@ Module Relationships is coming soon. href="!docs!/advanced-development/modules/module-relationships" title="Create Module Relationships" text="Learn how to create a relationship between modules." - startIcon={} - showLinkIcon={false} + icon={AcademicCapSolid} className="mt-1" /> */} @@ -522,8 +509,7 @@ You can do that through the Medusa Admin or Admin REST APIs. href: "#", title: "Option 1: Use Medusa Admin", text: "Create the customers using the Medusa Admin.", - startIcon: , - showLinkIcon: false, + icon: UsersSolid, badge: { variant: "blue", children: "Guide Soon" @@ -533,8 +519,7 @@ You can do that through the Medusa Admin or Admin REST APIs. href: "!api!/api/admin#customers_postcustomers", title: "Option 2: Using the REST APIs", text: "Create the customers using the REST APIs.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} /> @@ -547,8 +532,7 @@ You can do that through the Medusa Admin or Admin REST APIs. href: "#", title: "Option 1: Use Medusa Admin", text: "Assign the customers to the B2B customer group using the Medusa Admin.", - startIcon: , - showLinkIcon: false, + icon: UsersSolid, badge: { variant: "blue", children: "Guide Soon" @@ -558,8 +542,7 @@ You can do that through the Medusa Admin or Admin REST APIs. href: "!api!/api/admin#customer-groups_postcustomergroupsidcustomersbatch", title: "Option 2: Using the REST APIs", text: "Assign the customers to the B2B customer group using the REST APIs.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} /> @@ -578,8 +561,7 @@ You can create a price list using the Medusa Admin or the Admin REST APIs. Make href: "#", title: "Using Medusa Admin", text: "Create the price list using the Medusa Admin.", - startIcon: , - showLinkIcon: false, + icon: UsersSolid, badge: { variant: "blue", children: "Guide Soon" @@ -589,8 +571,7 @@ You can create a price list using the Medusa Admin or the Admin REST APIs. Make href: "!api!/api/admin#price-lists_postpricelists", title: "Using REST APIs", text: "Create the price list using the REST APIs.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} /> @@ -606,8 +587,7 @@ This provides more granular control of your B2B sales and allows you to build fe href="!docs!/basics/data-models" title="Create a Data Model" text="Learn how to create a custom data model in a module." - startIcon={} - showLinkIcon={false} + icon={AcademicCapSolid} /> --- @@ -622,8 +602,7 @@ The API route can check if the customer has any group with an associated company href="!docs!/basics/api-routes" title="Create an API Route" text="Learn how to create an API Route in Medusa." - startIcon={} - showLinkIcon={false} + icon={AcademicCapSolid} /> {/*
@@ -759,22 +738,19 @@ The Medusa Admin plugin can be extended to add widgets, new pages, and setting p href: "!docs!/advanced-development/admin/widgets", title: "Create Admin Widget", text: "Learn how to add widgets into existing admin pages.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "!docs!/advanced-development/admin/ui-routes", title: "Create Admin UI Routes", text: "Learn how to add new pages to your Medusa Admin.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "!docs!/advanced-development/admin/setting-pages", title: "Create Admin Setting Page", text: "Learn how to add new page to the Medusa Admin settings.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} /> @@ -791,15 +767,13 @@ Use the publishable API key you associated with your B2B sales channel in the st href: "/nextjs-starter", title: "Next.js Storefront", text: "Learn how to install and customize the Next.js storefront.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "/storefront-development", title: "Storefront Development", text: "Find guides for your storefront development.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} /> @@ -807,7 +781,6 @@ Use the publishable API key you associated with your B2B sales channel in the st href="!api!/api/store#publishable-api-key" title="Use Publishable API Keys" text="Learn how to use the publishable API key in client requests." - startIcon={} - showLinkIcon={false} + icon={AcademicCapSolid} className="mt-1" /> \ No newline at end of file diff --git a/www/apps/resources/app/recipes/commerce-automation/page.mdx b/www/apps/resources/app/recipes/commerce-automation/page.mdx index 3682b45cf6..d4a756791a 100644 --- a/www/apps/resources/app/recipes/commerce-automation/page.mdx +++ b/www/apps/resources/app/recipes/commerce-automation/page.mdx @@ -45,15 +45,13 @@ The `inventory-item.updated` event is currently not emitted. href: "!docs!/basics/modules-and-services", title: "Create a Module", text: "Learn how to create a module in Medusa.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "!docs!/basics/data-models", title: "Create a Data Model", text: "Learn how to create a data model.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} /> @@ -62,15 +60,13 @@ The `inventory-item.updated` event is currently not emitted. href: "!docs!/basics/api-routes", title: "Create an API Route", text: "Learn how to create an API route in Medusa.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "!docs!/basics/events-and-subscribers", title: "Create a Subscriber", text: "Learn how to create a subscriber in Medusa.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} className="mt-1" /> @@ -419,15 +415,13 @@ Medusa also provides Notification Module Providers that integrate with third-par href: "/architectural-modules/notification", title: "Notification Module", text: "Learn about the Notification Module.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "!docs!/basics/events-and-subscribers", title: "Create Subscriber", text: "Learn how to create a subscriber to handle events.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} /> @@ -446,8 +440,7 @@ To implement that: href="!docs!/basics/scheduled-jobs" title="Create a Scheduled Job" text="Learn how to create a scheduled job in Medusa." - startIcon={} - showLinkIcon={false} + icon={AcademicCapSolid} />
@@ -673,8 +666,7 @@ The `order.placed` event is currently not emitted. href="!docs!/basics/events-and-subscribers" title="Create a Subscriber" text="Learn how to create a subscriber in Medusa." - startIcon={} - showLinkIcon={false} + icon={AcademicCapSolid} /> {/* , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "/events-reference", title: "Events Reference", text: "Check out triggered events by each commerce module.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} /> */} @@ -711,15 +701,13 @@ Medusa's commerce features are geared towards automating RMA flows and ensuring href: "/commerce-modules/orders", title: "Order Module", text: "Learn about the Order Module and its features.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "!docs!/basics/events-and-subscribers", title: "Create a Subscriber", text: "Learn how to create a subscriber in Medusa.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} /> @@ -750,22 +738,19 @@ The `order.placed` event is currently not emitted. href: "/commerce-modules/customer", title: "Customer Module", text: "Learn about the Customer Module and its features.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "/commerce-modules/pricing", title: "Pricing Module", text: "Learn about the Pricing Module and its features.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "!docs!/basics/events-and-subscribers", title: "Create a Subscriber", text: "Learn how to create a subscriber in Medusa.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} /> @@ -867,15 +852,13 @@ You can also create a scheduled job that checks whether the number of new produc href: "!docs!/basics/events-and-subscribers", title: "Create a Subscriber", text: "Learn how to create a subscriber in Medusa.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "!docs!/basics/scheduled-jobs", title: "Scheduled Jobs", text: "Learn how to create a scheduled job in Medusa.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} /> diff --git a/www/apps/resources/app/recipes/digital-products/examples/standard/page.mdx b/www/apps/resources/app/recipes/digital-products/examples/standard/page.mdx index 7e9366d7da..2bf98c28dc 100644 --- a/www/apps/resources/app/recipes/digital-products/examples/standard/page.mdx +++ b/www/apps/resources/app/recipes/digital-products/examples/standard/page.mdx @@ -29,15 +29,13 @@ By following this example, you’ll have a commerce application with the followi href: "https://github.com/medusajs/examples/tree/main/digital-product", title: "Digital Products Example Repository", text: "Find the full code for this recipe example in this repository.", - startIcon: , - showLinkIcon: false + icon: Github, }, { href: "https://res.cloudinary.com/dza7lstvk/raw/upload/v1721654620/OpenApi/Digital_Products_Postman_vjr3jg.yml", title: "OpenApi Specs for Postman", text: "Imported this OpenApi Specs file into tools like Postman.", - startIcon: , - showLinkIcon: false + icon: PlaySolid, }, ]} /> diff --git a/www/apps/resources/app/recipes/digital-products/page.mdx b/www/apps/resources/app/recipes/digital-products/page.mdx index 5b529ae498..760e370bae 100644 --- a/www/apps/resources/app/recipes/digital-products/page.mdx +++ b/www/apps/resources/app/recipes/digital-products/page.mdx @@ -30,15 +30,13 @@ During development, you can use the Local File Module Provider, which is install href: "/architectural-modules/file", title: "File Module Providers", text: "Check out available file module providers.", - startIcon: , - showLinkIcon: false + icon: PuzzleSolid, }, { href: "/references/file-provider-module", title: "Create a File Module Provider", text: "Learn how to create a file module provider.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} /> @@ -54,8 +52,7 @@ The module will hold your custom data models and the service implementing digita href="!docs!/basics/modules-and-services" title="How to Create a Module" text="Learn how to create a module." - startIcon={} - showLinkIcon={false} + icon={AcademicCapSolid} /> ### Create Custom Data Model @@ -69,15 +66,13 @@ Then, you can link your custom data model to data models from other modules. For href: "!docs!/basics/data-models", title: "How to Create a Data Model", text: "Learn how to create a data model.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "!docs!/advanced-development/modules/module-links", title: "Module Links", text: "Learn how to link data models of different modules.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} /> @@ -91,8 +86,7 @@ Medusa facilitates implementing data-management features using the service facto href="!docs!/advanced-development/modules/service-factory" title="Service Factory" text="Learn about the service factory and how to use it." - startIcon={} - showLinkIcon={false} + icon={AcademicCapSolid} /> --- @@ -107,8 +101,7 @@ You can create custom API routes that allow merchants to list and create digital href="!docs!/basics/api-routes" title="API Routes" text="Learn how to create an API route." - startIcon={} - showLinkIcon={false} + icon={AcademicCapSolid} /> --- @@ -123,8 +116,7 @@ Create workflows to implement these flows, then utilize these workflows in other href="!docs!/basics/workflows" title="Workflows" text="Learn how to create a workflow." - startIcon={} - showLinkIcon={false} + icon={AcademicCapSolid} /> --- @@ -140,15 +132,13 @@ Use the remote link to create a link between two records, and use the remote que href: "!docs!/advanced-development/modules/remote-link", title: "How to Use the Remote Link", text: "Learn how to link data models of different modules.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "!docs!/advanced-development/modules/remote-query", title: "How to Use the Remote Query", text: "Learn how to fetch data across modules with remote query.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} /> @@ -165,15 +155,13 @@ In your customizations, you send requests to the API routes you created to creat href: "!docs!/advanced-development/admin/widgets", title: "Create a Widget", text: "Learn how to create a widget in the Medusa Admin.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "!docs!/advanced-development/admin/ui-routes", title: "Create UI Route", text: "Learn how to create a UI route in the Medusa Admin.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} /> @@ -195,8 +183,7 @@ Fulfillment providers are under development. href="/commerce-modules/fulfillment" title="Fulfillment Module" text="Learn about the Fulfillment Module and its providers." - startIcon={} - showLinkIcon={false} + icon={AcademicCapSolid} /> --- @@ -214,14 +201,12 @@ Alternatively, you can build the storefront with your preferred tech stack. href: "/nextjs-starter", title: "Next.js Starter", text: "Learn how to install and use the Next.js Starter storefront.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "/storefront-development", title: "Storefront Guides", text: "Learn how to build a storefront for your Medusa application.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} /> diff --git a/www/apps/resources/app/recipes/ecommerce/page.mdx b/www/apps/resources/app/recipes/ecommerce/page.mdx index b2d622ba6c..86e5fdb8df 100644 --- a/www/apps/resources/app/recipes/ecommerce/page.mdx +++ b/www/apps/resources/app/recipes/ecommerce/page.mdx @@ -52,8 +52,7 @@ For example, you can integrate Stripe for payment, or SendGrid for notifications href="/integrations" title="Integrations" text="Check out available integrations for your Medusa application." - startIcon={} - showLinkIcon={false} + icon={PuzzleSolid} /> --- @@ -66,8 +65,7 @@ Our documentation has step-by-step guides to deploy your Medusa application, Med href="/deployment" title="Deployment Guides" text="Learn how to deploy the Medusa application, Medusa Admin, and Next.js starter storefront." - startIcon={} - showLinkIcon={false} + icon={AcademicCapSolid} /> --- diff --git a/www/apps/resources/app/recipes/integrate-ecommerce-stack/page.mdx b/www/apps/resources/app/recipes/integrate-ecommerce-stack/page.mdx index c0fff34c7e..77bb69dc77 100644 --- a/www/apps/resources/app/recipes/integrate-ecommerce-stack/page.mdx +++ b/www/apps/resources/app/recipes/integrate-ecommerce-stack/page.mdx @@ -31,8 +31,7 @@ Then, resolve the module's main service in other resources, such as API routes o href="!docs!/basics/modules-and-services" title="Create a Module" text="Learn how to create a module in Medusa." - startIcon={} - showLinkIcon={false} + icon={AcademicCapSolid} />
@@ -154,8 +153,7 @@ Workflows guarantee data consistency through their compensation feature. You can href="!docs!/basics/workflows" title="Workflows" text="Learn more about Workflows and how to create them." - startIcon={} - showLinkIcon={false} + icon={AcademicCapSolid} />
@@ -300,8 +298,7 @@ For example, suppose an administrator changes the product data in the ERP system href="!docs!/basics/api-routes" title="Create an API Route" text="Learn how to create an API Route in Medusa." - startIcon={} - showLinkIcon={false} + icon={AcademicCapSolid} />
diff --git a/www/apps/resources/app/recipes/marketplace/examples/vendors/page.mdx b/www/apps/resources/app/recipes/marketplace/examples/vendors/page.mdx index f33ac22a49..4689a94b77 100644 --- a/www/apps/resources/app/recipes/marketplace/examples/vendors/page.mdx +++ b/www/apps/resources/app/recipes/marketplace/examples/vendors/page.mdx @@ -28,15 +28,13 @@ By following this example, you’ll have a marketplace with the following featur href: "https://github.com/medusajs/examples/tree/main/marketplace", title: "Marketplace Example Repository", text: "Find the full code for this recipe example in this repository.", - startIcon: , - showLinkIcon: false + icon: Github, }, { href: "https://res.cloudinary.com/dza7lstvk/raw/upload/v1720603521/OpenApi/Marketplace_OpenApi_n458oh.yml", title: "OpenApi Specs for Postman", text: "Imported this OpenApi Specs file into tools like Postman.", - startIcon: , - showLinkIcon: false + icon: PlaySolid, }, ]} /> diff --git a/www/apps/resources/app/recipes/marketplace/page.mdx b/www/apps/resources/app/recipes/marketplace/page.mdx index f5b72568cd..6dd9b1bb00 100644 --- a/www/apps/resources/app/recipes/marketplace/page.mdx +++ b/www/apps/resources/app/recipes/marketplace/page.mdx @@ -33,15 +33,13 @@ You can create a marketplace module that implements data models for vendors, the href: "!docs!/basics/modules-and-services", title: "Create a Module", text: "Learn how to create a module.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "!docs!/basics/data-models", title: "Create Data Models", text: "Create data models in the module.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} /> @@ -57,8 +55,7 @@ For example, if you defined a vendor data model in a marketplace module, you can href="!docs!/advanced-development/modules/module-links" title="Define a Module Link" text="Learn how to define a module link." - startIcon={} - showLinkIcon={false} + icon={AcademicCapSolid} /> --- @@ -73,8 +70,7 @@ Then, you guard custom API routes to only allow authenticated vendor admins. href="/commerce-modules/auth/create-actor-type" title="Create an Actor Type" text="Learn how to create an actor type and authenticate it." - startIcon={} - showLinkIcon={false} + icon={AcademicCapSolid} /> --- @@ -88,15 +84,13 @@ If you provide vendor or sellers with custom features, or a different way of man href: "!docs!/basics/api-routes", title: "Create API Routes", text: "Learn how to create an API Route in Medusa.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "!docs!/advanced-development/api-routes/protected-routes", title: "Protect Routes", text: "Learn how to guard routes to allow authenticated users only.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} /> @@ -112,8 +106,7 @@ If your flow requires different steps, such as creating a parent order then crea href="!docs!/basics/workflows" title="Create a Workflow" text="Learn how to create a workflow in Medusa." - startIcon={} - showLinkIcon={false} + icon={AcademicCapSolid} /> --- @@ -129,15 +122,13 @@ You can also create a custom storefront from scratch. href: "/nextjs-starter", title: "Next.js Storefront", text: "Learn how to install and customize the Next.js storefront.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "/storefront-development", title: "Storefront Development", text: "Find useful guides for creating a custom storefront.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} /> diff --git a/www/apps/resources/app/recipes/multi-region-store/page.mdx b/www/apps/resources/app/recipes/multi-region-store/page.mdx index 77eba6fe4e..c3d2ce2f8d 100644 --- a/www/apps/resources/app/recipes/multi-region-store/page.mdx +++ b/www/apps/resources/app/recipes/multi-region-store/page.mdx @@ -38,8 +38,7 @@ During checkout, the taxes are calculated based on the customer's region, tax co href: "#", title: "Manage Taxes in Medusa Admin", text: "Manage taxes in Medusa Admin.", - startIcon: , - showLinkIcon: false, + icon: UsersSolid, badge: { variant: "blue", children: "Guide Soon" @@ -49,8 +48,7 @@ During checkout, the taxes are calculated based on the customer's region, tax co href: "!api!/admin#tax-regions_posttaxregions", title: "Manage Taxes Using Admin APIs", text: "Manage tax settings using the Admin APIs.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} /> @@ -58,8 +56,7 @@ During checkout, the taxes are calculated based on the customer's region, tax co href="/references/tax/provider" title="Create Tax Provider" text="Learn how to create a tax provider." - startIcon={} - showLinkIcon={false} + icon={AcademicCapSolid} className="mt-1" /> @@ -77,8 +74,7 @@ Medusa provides official module providers for payment and fulfillment. You can a href: "#", title: "Manage Providers in Medusa Admin", text: "Learn how to manage providers in Medusa Admin.", - startIcon: , - showLinkIcon: false, + icon: UsersSolid, badge: { variant: "blue", children: "Guide Soon" @@ -88,8 +84,7 @@ Medusa provides official module providers for payment and fulfillment. You can a href: "/integrations", title: "Integrations", text: "Check out available integrations, including payment module providers.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} /> @@ -106,8 +101,7 @@ Using the tax-inclusive feature, merchants can specify prices including taxes pe href: "#", title: "Setting Product Prices in Medusa Admin", text: "Learn how to set a product prices in Medusa Admin.", - startIcon: , - showLinkIcon: false, + icon: UsersSolid, badge: { variant: "blue", children: "Guide Soon" @@ -117,8 +111,7 @@ Using the tax-inclusive feature, merchants can specify prices including taxes pe href: "/storefront-development/products/price", title: "Display Product Price in Storefront", text: "Learn how to display the correct product price in a storefront.", - startIcon: , - showLinkIcon: false, + icon: AcademicCapSolid, }, ]} /> @@ -137,8 +130,7 @@ A multi-regional setup lets merchants manage their inventory through Medusa acro href: "#", title: "Manage Stock Locations", text: "Learn how to manage stock locations in the Medusa Admin.", - startIcon: , - showLinkIcon: false, + icon: UsersSolid, badge: { variant: "blue", children: "Guide Soon" @@ -148,8 +140,7 @@ A multi-regional setup lets merchants manage their inventory through Medusa acro href: "#", title: "Manage Inventory", text: "Learn how to manage inventory in the Medusa Admin.", - startIcon: , - showLinkIcon: false, + icon: UsersSolid, badge: { variant: "blue", children: "Guide Soon" @@ -169,6 +160,5 @@ To integrate a third-party system, create a custom module whose main service con href="!docs!/basics/modules-and-services" title="Create a Module" text="Learn how to create a module in Medusa." - startIcon={} - showLinkIcon={false} + icon={AcademicCapSolid} /> diff --git a/www/apps/resources/app/recipes/omnichannel/page.mdx b/www/apps/resources/app/recipes/omnichannel/page.mdx index 890bfe7264..41c3b506b0 100644 --- a/www/apps/resources/app/recipes/omnichannel/page.mdx +++ b/www/apps/resources/app/recipes/omnichannel/page.mdx @@ -29,8 +29,7 @@ Medusa's commerce features are available as REST APIs that storefronts can acces href="!api!/store" title="Store REST APIs" text="Check out available Store REST APIs in Medusa." - startIcon={} - showLinkIcon={false} + icon={AcademicCapSolid} /> --- @@ -50,15 +49,13 @@ Another channel that attracts customer sales is social media. You can create a c href: "/commerce-modules/sales-channels", title: "Sales Channels", text: "Learn about the Sales Channel Module.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "!docs!/basics/modules-and-services", title: "Create a Module", text: "Learn how to create a module.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} /> @@ -79,14 +76,12 @@ Medusa’s architecture also makes it easier to integrate any third-party servic href: "!docs!/basics/modules-and-services", title: "Create a Module", text: "Learn how to create a module.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "!docs!/basics/api-routes", title: "Create an API Route", text: "Learn how to create an API route.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} /> diff --git a/www/apps/resources/app/recipes/oms/page.mdx b/www/apps/resources/app/recipes/oms/page.mdx index a02bdb1068..38ee2bdddc 100644 --- a/www/apps/resources/app/recipes/oms/page.mdx +++ b/www/apps/resources/app/recipes/oms/page.mdx @@ -40,22 +40,19 @@ For example, you can support importing orders into Medusa through a custom API R href: "!api!/store#carts", title: "Store REST APIs", text: "Learn how to use the Store REST APIs to create an order.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "!docs!/basics/api-routes", title: "Create API Route", text: "Learn how to create a custom API Route.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "!docs!/basics/scheduled-jobs", title: "Create Scheduled Jobs", text: "Learn how to create a scheduled job.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, } ]} /> @@ -82,15 +79,13 @@ Emitting of event `order.fulfillment_created` isn't implemented yet. href: "/references/fulfillment/provider", title: "Create a Fulfillment Module Provider", text: "Learn how to create a fulfillment provider in Medusa.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "!docs!/basics/events-and-subscribers", title: "Create a Subscriber", text: "Learn about create a subscriber", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, } ]} /> @@ -113,15 +108,13 @@ Emitting of event `order.payment_captured` isn't implemented yet. href: "/references/payment/provider", title: "Create a Payment Module Provider", text: "Learn how to create a payment module provider.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "!docs!/basics/events-and-subscribers", title: "Create a Subscriber", text: "Learn about create a subscriber", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, } ]} /> @@ -138,15 +131,13 @@ When an order is placed, the item's quantity is reserved from the stock location href: "/commerce-modules/inventory", title: "Inventory Module", text: "Learn about the Inventory Module's concepts and features.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "/commerce-modules/stock-location", title: "Stock Location Module", text: "Learn about the Stock Location Module's concepts and features.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, } ]} /> @@ -154,8 +145,7 @@ When an order is placed, the item's quantity is reserved from the stock location href="/commerce-modules/sales-channel" title="Sales Channel Module" text="Learn about the Sales Channel Module's concepts and features." - startIcon={} - showLinkIcon={false} + icon={AcademicCapSolid} className="mt-1" /> @@ -186,14 +176,12 @@ Emitting of event `order.return_requested` isn't implemented yet. href: "/commerce-modules/order/order-change", title: "Order Changes", text: "Learn about how to use order changes.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "!docs!/basics/events-and-subscribers", title: "Create a Subscriber", text: "Learn about create a subscriber", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, } ]} /> diff --git a/www/apps/resources/app/recipes/personalized-products/page.mdx b/www/apps/resources/app/recipes/personalized-products/page.mdx index 16d45751a4..95be8d2b64 100644 --- a/www/apps/resources/app/recipes/personalized-products/page.mdx +++ b/www/apps/resources/app/recipes/personalized-products/page.mdx @@ -50,15 +50,13 @@ In more complex cases, you can create a custom module that stores and manages th href: "!docs!/basics/modules-and-services", title: "Create a Module", text: "Learn how to create a module.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "!docs!/basics/data-models", title: "Create a Data Model", text: "Learn how to create a data model.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, } ]} /> @@ -77,15 +75,13 @@ Medusa provides a Next.js Starter storefront with basic ecommerce functionalitie href: "/nextjs-starter", title: "Next.js Starter", text: "Learn about the Next.js Starter and how to install it.", - startIcon: , - showLinkIcon: false + icon: NextJs, }, { href: "/storefront-development", title: "Storefront Development", text: "Find guides for your storefront development.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} /> @@ -110,15 +106,13 @@ The `order.placed` event is currently not emitted. href: "!docs!/basics/api-routes", title: "Create API Route", text: "Learn how to create an API route.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "!docs!/basics/events-and-subscribers", title: "Create a Subscriber", text: "Learn how to create a subscriber.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} /> @@ -134,6 +128,5 @@ The Fulfillment Module registers your fulfillment module provider to use it to f href="/references/fulfillment/provider" title="Create a Fulfillment Service" text="Learn how to create a fulfillment provider in Medusa." - startIcon={} - showLinkIcon={false} + icon={AcademicCapSolid} /> diff --git a/www/apps/resources/app/recipes/pos/page.mdx b/www/apps/resources/app/recipes/pos/page.mdx index a966f5facf..5743a90378 100644 --- a/www/apps/resources/app/recipes/pos/page.mdx +++ b/www/apps/resources/app/recipes/pos/page.mdx @@ -35,8 +35,7 @@ Medusa's modular architecture removes any restrictions you may have while making href="!api!/admin" title="Admin REST APIs" text="Check out available Admin REST APIs in Medusa." - startIcon={} - showLinkIcon={false} + icon={AcademicCapSolid} /> --- @@ -58,15 +57,13 @@ To search through product variants by their barcode, create a custom API Route a href: "/commerce-modules/product", title: "Product Module", text: "Learn about the Product Module.", - startIcon: , - showLinkIcon: false, + icon: AcademicCapSolid, }, { href: "!docs!/basics/api-routes", title: "Create API Route", text: "Learn how to create an API Route.", - startIcon: , - showLinkIcon: false, + icon: AcademicCapSolid, }, ]} /> @@ -128,22 +125,19 @@ This also opens the door for other business opportunities, such as an endless ai href: "/commerce-modules/inventory", title: "Inventory Module", text: "Learn about the Inventory Module.", - startIcon: , - showLinkIcon: false, + icon: AcademicCapSolid, }, { href: "/commerce-modules/stock-location", title: "Stock Location Module", text: "Learn about the Stock Location Module.", - startIcon: , - showLinkIcon: false, + icon: AcademicCapSolid, }, { href: "/commerce-modules/sales-channel", title: "Sales Channel Module", text: "Learn about the Sales Channel Module.", - startIcon: , - showLinkIcon: false, + icon: AcademicCapSolid, }, ]} /> @@ -164,22 +158,19 @@ You can also create custom modules to provide features for a better customer exp href: "/commerce-modules/customer", title: "Customer Module", text: "Learn about the Customer Module.", - startIcon: , - showLinkIcon: false, + icon: AcademicCapSolid, }, { href: "/commerce-modules/promotion", title: "Promotion Module", text: "Learn about the Promotion Module.", - startIcon: , - showLinkIcon: false, + icon: AcademicCapSolid, }, { href: "!docs!/basics/modules-and-services", title: "Create a Module", text: "Learn how to create a module.", - startIcon: , - showLinkIcon: false, + icon: AcademicCapSolid, }, ]} /> @@ -200,15 +191,13 @@ Then, merchants can view all orders coming from different sales channels using t href: "/references/payment/provider", title: "Create a Payment Module Provider", text: "Learn how to create a payment module provider.", - startIcon: , - showLinkIcon: false, + icon: AcademicCapSolid, }, { href: "!api!/admin", title: "Admin REST APIs", text: "Check out available Admin REST APIs.", - startIcon: , - showLinkIcon: false, + icon: AcademicCapSolid, }, ]} /> diff --git a/www/apps/resources/app/recipes/subscriptions/examples/standard/page.mdx b/www/apps/resources/app/recipes/subscriptions/examples/standard/page.mdx index 30d1960308..ceb664ed3e 100644 --- a/www/apps/resources/app/recipes/subscriptions/examples/standard/page.mdx +++ b/www/apps/resources/app/recipes/subscriptions/examples/standard/page.mdx @@ -29,15 +29,13 @@ By following this example, you’ll have a subscription commerce store with the href: "https://github.com/medusajs/examples/tree/main/subscription", title: "Subscription Example Repository", text: "Find the full code for this recipe example in this repository.", - startIcon: , - showLinkIcon: false + icon: Github, }, { href: "https://res.cloudinary.com/dza7lstvk/raw/upload/v1721125608/OpenApi/Subscriptions_OpenApi_b371x4.yml", title: "OpenApi Specs for Postman", text: "Imported this OpenApi Specs file into tools like Postman.", - startIcon: , - showLinkIcon: false + icon: PlaySolid, }, ]} /> diff --git a/www/apps/resources/app/recipes/subscriptions/page.mdx b/www/apps/resources/app/recipes/subscriptions/page.mdx index 3491a20e3b..b32f8b9f49 100644 --- a/www/apps/resources/app/recipes/subscriptions/page.mdx +++ b/www/apps/resources/app/recipes/subscriptions/page.mdx @@ -36,15 +36,13 @@ You can link the subscription data model to models of other modules, such as the href: "!docs!/basics/modules-and-services", title: "Create a Module", text: "Learn how to create a module.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "!docs!/basics/data-models", title: "Create a Data Model", text: "Learn how to create a data model.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, ]} /> @@ -62,8 +60,7 @@ If you want to create subscriptions on the product level, you can link the subsc href="!docs!/advanced-development/modules/module-links" title="Define a Module Link" text="Learn how to define a module link." - startIcon={} - showLinkIcon={false} + icon={AcademicCapSolid} /> --- @@ -87,15 +84,13 @@ Implementing the logic depends on your use case, but you'll mainly implement the href: "!docs!/basics/api-routes", title: "Create an API Route", text: "Learn how to create an API route.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "!docs!/basics/scheduled-jobs", title: "Create a Scheduled Job", text: "Learn how to create a scheduled job.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, } ]} /> @@ -111,8 +106,7 @@ Although Medusa provides a Stripe module provider, it doesn't handle subscriptio href="/references/payment/provider" title="Create Payment Module Provider" text="Learn how to create a payment module provider." - startIcon={} - showLinkIcon={false} + icon={AcademicCapSolid} /> --- @@ -128,15 +122,13 @@ Extend the Medusa Admin to add widgets to existing pages or add new pages. href: "!docs!/advanced-development/admin/widget", title: "Create Admin Widget", text: "Learn how to add widgets into existing admin pages.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "!docs!/advanced-development/admin/ui-routes", title: "Create Admin UI Routes", text: "Learn how to add new pages to your Medusa Admin.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, } ]} /> @@ -151,14 +143,12 @@ Medusa provides a Next.js Starter. Since you've customized your Medusa project, href: "/nextjs-starter", title: "Option 1: Use Next.js Starter", text: "Install the Next.js Starter to customize it.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, }, { href: "/storefront-development", title: "Option 2: Build Custom Storefront", text: "Find guides for your storefront development.", - startIcon: , - showLinkIcon: false + icon: AcademicCapSolid, } ]} /> diff --git a/www/apps/ui/src/app/not-found.mdx b/www/apps/ui/src/app/not-found.mdx index 62ee862862..c2bd96b625 100644 --- a/www/apps/ui/src/app/not-found.mdx +++ b/www/apps/ui/src/app/not-found.mdx @@ -22,26 +22,22 @@ If you think this is a mistake, please [report this issue on GitHub](https://git { title: "Get Started Docs", href: "/", - showLinkIcon: false, - startIcon: + icon: BookOpen }, { title: "Learning Resources", href: "!resources!", - showLinkIcon: false, - startIcon: + icon: AcademicCapSolid }, { title: "Admin API reference", href: "!api!/admin", - showLinkIcon: false, - startIcon: + icon: ComputerDesktopSolid }, { title: "Store API reference", href: "!api!/store", - showLinkIcon: false, - startIcon: + icon: BuildingStorefront } ]} /> \ No newline at end of file diff --git a/www/apps/ui/src/app/not-found.tsx b/www/apps/ui/src/app/not-found.tsx index 8811b03ac6..af661733ca 100644 --- a/www/apps/ui/src/app/not-found.tsx +++ b/www/apps/ui/src/app/not-found.tsx @@ -32,26 +32,22 @@ export default function NotFound() { { title: "Get Started Docs", href: "/", - showLinkIcon: false, - startIcon: , + icon: BookOpen, }, { title: "Learning Resources", href: "!resources!", - showLinkIcon: false, - startIcon: , + icon: AcademicCapSolid, }, { title: "Admin API reference", href: "!api!/admin", - showLinkIcon: false, - startIcon: , + icon: ComputerDesktopSolid, }, { title: "Store API reference", href: "!api!/store", - showLinkIcon: false, - startIcon: , + icon: BuildingStorefront, }, ]} /> diff --git a/www/apps/ui/src/components/figma-card.tsx b/www/apps/ui/src/components/figma-card.tsx new file mode 100644 index 0000000000..aa7335c17f --- /dev/null +++ b/www/apps/ui/src/components/figma-card.tsx @@ -0,0 +1,15 @@ +import React from "react" +import { Card } from "docs-ui" +import { basePathUrl } from "../lib/base-path-url" + +export const FigmaCard = () => { + return ( + + ) +} diff --git a/www/apps/ui/src/components/figma-icon.tsx b/www/apps/ui/src/components/figma-icon.tsx deleted file mode 100644 index 75f376a85f..0000000000 --- a/www/apps/ui/src/components/figma-icon.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { BorderedIcon } from "docs-ui" -import { basePathUrl } from "../lib/base-path-url" - -export const FigmaIcon = () => { - return -} diff --git a/www/apps/ui/src/components/mdx-components.tsx b/www/apps/ui/src/components/mdx-components.tsx index 2aa047a3aa..67c45c6133 100644 --- a/www/apps/ui/src/components/mdx-components.tsx +++ b/www/apps/ui/src/components/mdx-components.tsx @@ -10,7 +10,7 @@ import { HookValues } from "@/components/hook-values" import { IconSearch } from "@/components/icon-search" import { PackageInstall } from "@/components/package-install" import { Feedback } from "@/components/feedback" -import { FigmaIcon } from "@/components/figma-icon" +import { FigmaCard } from "@/components/figma-card" import { ComponentReference } from "@/components/component-reference" import { Link, Card, BorderedIcon, MDXComponents, CodeBlock } from "docs-ui" @@ -53,7 +53,7 @@ const components = { Colors, Card, BorderedIcon, - FigmaIcon, + FigmaCard, ComponentReference, } diff --git a/www/apps/ui/src/content/docs/index.mdx b/www/apps/ui/src/content/docs/index.mdx index 6a4b4a7213..71e6b27137 100644 --- a/www/apps/ui/src/content/docs/index.mdx +++ b/www/apps/ui/src/content/docs/index.mdx @@ -7,14 +7,7 @@ Welcome to Medusa UI, a React implementation of the Medusa design system. It is a collection of components, hooks, utility functions, icons, and [Tailwind CSS](https://tailwindcss.com/) classes that can be used to build a consistent user interface across the Medusa Admin and other Medusa applications. - - } -/> + ## Packages diff --git a/www/apps/user-guide/app/not-found.mdx b/www/apps/user-guide/app/not-found.mdx index 62ee862862..c2bd96b625 100644 --- a/www/apps/user-guide/app/not-found.mdx +++ b/www/apps/user-guide/app/not-found.mdx @@ -22,26 +22,22 @@ If you think this is a mistake, please [report this issue on GitHub](https://git { title: "Get Started Docs", href: "/", - showLinkIcon: false, - startIcon: + icon: BookOpen }, { title: "Learning Resources", href: "!resources!", - showLinkIcon: false, - startIcon: + icon: AcademicCapSolid }, { title: "Admin API reference", href: "!api!/admin", - showLinkIcon: false, - startIcon: + icon: ComputerDesktopSolid }, { title: "Store API reference", href: "!api!/store", - showLinkIcon: false, - startIcon: + icon: BuildingStorefront } ]} /> \ No newline at end of file diff --git a/www/packages/docs-ui/src/components/BorderedIcon/index.tsx b/www/packages/docs-ui/src/components/BorderedIcon/index.tsx index 00f7726cca..770df82dcc 100644 --- a/www/packages/docs-ui/src/components/BorderedIcon/index.tsx +++ b/www/packages/docs-ui/src/components/BorderedIcon/index.tsx @@ -17,6 +17,7 @@ export const BorderedIcon = ({ iconWrapperClassName, iconClassName, iconColorClassName = "", + wrapperClassName, }: BorderedIconProps) => { return ( - {!IconComponent && ( - - )} - {IconComponent && ( - - )} + + {!IconComponent && ( + + )} + {IconComponent && ( + + )} + ) } diff --git a/www/packages/docs-ui/src/components/Card/Layout/Default/index.tsx b/www/packages/docs-ui/src/components/Card/Layout/Default/index.tsx new file mode 100644 index 0000000000..f6bbda0e91 --- /dev/null +++ b/www/packages/docs-ui/src/components/Card/Layout/Default/index.tsx @@ -0,0 +1,78 @@ +import React from "react" +import clsx from "clsx" +import { Badge, BorderedIcon, Link } from "@/components" +import { ArrowUpRightOnBox, TriangleRightMini } from "@medusajs/icons" +import { CardProps } from "../../.." +import { useIsExternalLink } from "../../../.." + +export const CardDefaultLayout = ({ + icon, + image, + title, + text, + href, + className, + contentClassName, + iconClassName, + children, + badge, +}: CardProps) => { + const isExternal = useIsExternalLink({ href }) + + return ( +
+ {icon && ( + + )} + {image && ( + + )} +
+ {title && ( +
+ {title} +
+ )} + {text && ( + + {text} + + )} + {children} +
+ {badge && } + + {isExternal ? : } + + + {href && ( + + )} +
+ ) +} diff --git a/www/packages/docs-ui/src/components/Card/Layout/Filler/index.tsx b/www/packages/docs-ui/src/components/Card/Layout/Filler/index.tsx new file mode 100644 index 0000000000..0962ef4dfc --- /dev/null +++ b/www/packages/docs-ui/src/components/Card/Layout/Filler/index.tsx @@ -0,0 +1,30 @@ +import React from "react" +import { CardProps } from "../../../.." +import clsx from "clsx" +import Link from "next/link" + +export const CardFillerLayout = ({ text, href, className }: CardProps) => { + return ( +
+
+ {text} + {href && ( + <> + {" "} + + Show All↗ + + + )} +
+
+ ) +} diff --git a/www/packages/docs-ui/src/components/Card/Layout/Large/index.tsx b/www/packages/docs-ui/src/components/Card/Layout/Large/index.tsx new file mode 100644 index 0000000000..36d255255a --- /dev/null +++ b/www/packages/docs-ui/src/components/Card/Layout/Large/index.tsx @@ -0,0 +1,63 @@ +import React from "react" +import { CardProps } from "../.." +import { useIsExternalLink } from "../../../.." +import clsx from "clsx" +import { ArrowRightMini, ArrowUpRightOnBox } from "@medusajs/icons" +import Link from "next/link" + +export const CardLargeLayout = ({ + title, + text, + image, + icon, + href, + className, +}: CardProps) => { + const isExternal = useIsExternalLink({ href }) + const IconComponent = icon + + return ( +
+
+ {IconComponent && ( + + )} + {image && ( + {title + )} +
+
+
+ {title && {title}} + {href && isExternal && } + {href && !isExternal && } +
+ {text && ( + + {text} + + )} +
+ {href && ( + + )} +
+ ) +} diff --git a/www/packages/docs-ui/src/components/Card/index.tsx b/www/packages/docs-ui/src/components/Card/index.tsx index 7167d1ce3f..b2f47f96ca 100644 --- a/www/packages/docs-ui/src/components/Card/index.tsx +++ b/www/packages/docs-ui/src/components/Card/index.tsx @@ -1,79 +1,31 @@ import React from "react" -import { ArrowUpRightOnBox } from "@medusajs/icons" -import clsx from "clsx" -import { Badge, BadgeProps, Link } from "@/components" +import { BadgeProps } from "@/components" +import { CardDefaultLayout } from "./Layout/Default" +import { IconProps } from "@medusajs/icons/dist/types" +import { CardLargeLayout } from "./Layout/Large" +import { CardFillerLayout } from "./Layout/Filler" export type CardProps = { - startIcon?: React.ReactNode - endIcon?: React.ReactNode + type?: "default" | "large" | "filler" + icon?: React.FC + image?: string title?: string text?: string href?: string className?: string contentClassName?: string + iconClassName?: string children?: React.ReactNode - showLinkIcon?: boolean - isExternal?: boolean badge?: BadgeProps } -export const Card = ({ - startIcon, - endIcon, - title, - text, - href, - className, - contentClassName, - children, - showLinkIcon = true, - isExternal = false, - badge, -}: CardProps) => { - return ( -
- {startIcon} -
-
- {title && ( - - - {title} - - {badge && } - - )} - {text && ( - - {text} - - )} - {children} -
- - {href && ( - <> - {showLinkIcon && ( - - )} - - - )} -
- {endIcon} -
- ) +export const Card = ({ type = "default", ...props }: CardProps) => { + switch (type) { + case "large": + return + case "filler": + return + default: + return + } } diff --git a/www/packages/docs-ui/src/components/ChildDocs/index.tsx b/www/packages/docs-ui/src/components/ChildDocs/index.tsx index bfce769c6b..5464716a47 100644 --- a/www/packages/docs-ui/src/components/ChildDocs/index.tsx +++ b/www/packages/docs-ui/src/components/ChildDocs/index.tsx @@ -141,7 +141,6 @@ export const ChildDocs = ({ return { title: childItem.title, href, - showLinkIcon: false, } }) || [] } @@ -170,14 +169,13 @@ export const ChildDocs = ({ itemChildren?.map((childItem) => ({ title: childItem.title, href: childItem.type === "link" ? childItem.path : "", - showLinkIcon: false, })) || [] } /> )} {!HeadingComponent && item.type === "link" && ( - + )} ) diff --git a/www/packages/docs-ui/src/components/Icons/StripeColored/index.tsx b/www/packages/docs-ui/src/components/Icons/StripeColored/index.tsx new file mode 100644 index 0000000000..70d8d66ced --- /dev/null +++ b/www/packages/docs-ui/src/components/Icons/StripeColored/index.tsx @@ -0,0 +1,60 @@ +import { IconProps } from "@medusajs/icons/dist/types" +import React from "react" + +export const StripeColoredIcon = (props: IconProps) => { + return ( + + + + + + + + + + + + + + + ) +} diff --git a/www/packages/docs-ui/src/components/Icons/index.tsx b/www/packages/docs-ui/src/components/Icons/index.tsx index 52c15a39a8..f8a18679d0 100644 --- a/www/packages/docs-ui/src/components/Icons/index.tsx +++ b/www/packages/docs-ui/src/components/Icons/index.tsx @@ -3,5 +3,6 @@ export * from "./CircleDottedLine" export * from "./DecisionProcess" export * from "./QuestionMark" export * from "./ShadedBg" +export * from "./StripeColored" export * from "./ThumbDown" export * from "./ThumbUp" diff --git a/www/packages/docs-ui/src/hooks/index.ts b/www/packages/docs-ui/src/hooks/index.ts index fffefa94a2..ba29e0e57b 100644 --- a/www/packages/docs-ui/src/hooks/index.ts +++ b/www/packages/docs-ui/src/hooks/index.ts @@ -4,6 +4,7 @@ export * from "./use-collapsible" export * from "./use-collapsible-code-lines" export * from "./use-copy" export * from "./use-current-learning-path" +export * from "./use-is-external-link" export * from "./use-is-browser" export * from "./use-keyboard-shortcut" export * from "./use-page-scroll-manager" diff --git a/www/packages/docs-ui/src/hooks/use-is-external-link/index.tsx b/www/packages/docs-ui/src/hooks/use-is-external-link/index.tsx new file mode 100644 index 0000000000..98cbc6556c --- /dev/null +++ b/www/packages/docs-ui/src/hooks/use-is-external-link/index.tsx @@ -0,0 +1,19 @@ +import { useMemo } from "react" + +type UseIsExternalLinkProps = { + href?: string +} + +export const useIsExternalLink = ({ href }: UseIsExternalLinkProps) => { + const isExternal = useMemo(() => { + return ( + href && + !href.startsWith("/") && + !href.startsWith("https://docs.medusajs.com") && + !href.startsWith("http://localhost:") && + !href.startsWith("#") + ) + }, [href]) + + return isExternal +} diff --git a/www/packages/remark-rehype-plugins/src/utils/estree-to-js.ts b/www/packages/remark-rehype-plugins/src/utils/estree-to-js.ts index 5299fdd8b1..2073ec2904 100644 --- a/www/packages/remark-rehype-plugins/src/utils/estree-to-js.ts +++ b/www/packages/remark-rehype-plugins/src/utils/estree-to-js.ts @@ -66,9 +66,5 @@ function expressionToJs( case "JSXElement": // ignore JSXElements return - default: - console.warn( - `[expressionToJs] can't parse expression of type ${expression.type}` - ) } }