diff --git a/docs/content/admin/development.md b/docs/content/admin/development.md deleted file mode 100644 index a5c09deaea..0000000000 --- a/docs/content/admin/development.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -description: 'Learn how to set up the Medusa Admin repository for local development and customization. This includes cloning the GitHub repository and adding an upstream repository.' -addHowToData: true ---- - -# Customize Medusa Admin - -In this document, you’ll learn how to customize the Medusa admin by forking it, and how to keep it updated with changes from the main repository. - -:::warning - -This guide explains how to customize the Medusa Admin repository, which is now deprecated. This guide doesn't work with the [admin plugin](./quickstart.mdx). - -::: - -## Overview - -Although Medusa provides an intuitive admin that should cover all your ecommerce needs, you are free to customize the Medusa admin as you see fit. - -For customization and development, it’s recommended that you fork the main Medusa admin repository. That way, you can configure your forked repository to pull changes from the main Medusa admin repository for any latest updates. - -In this document, you’ll learn how to: - -- Fork the Medusa admin repository. -- Configure the Medusa admin repository as an upstream repository. -- Pull changes from the upstream repository to keep your fork synced with the Medusa admin repository. - ---- - -## Prerequisites - -### Required Tools - -[Git CLI tool](../development/backend/prepare-environment.mdx#git) - -### Required Accounts - -[GitHub](https://github.com/) - ---- - -## Fork the Medusa Admin Repository - -To fork the Medusa admin: - -1. Go to the [Medusa admin repository](https://github.com/medusajs/admin). -2. Click on the Fork button at the top right. -3. You can optionally change the name of the repository and description. -4. Once done, click on the Create fork button. -5. After your fork is created, you can clone it using the following command: - -```bash -git clone -``` - -Where `` is the HTTPS URL of your repository. You can obtain it from your forked repository’s GitHub page by clicking on the Code button and copying the URL. - ---- - -## Configure Upstream Repository - -To configure the Medusa admin as the upstream repository: - -1. Change to the directory of your cloned forked repository. -2. Run the following command to add the Medusa admin repository as an upstream repository: - -```bash -git remote add upstream https://github.com/medusajs/admin -``` - -1. You can verify that it has been added by running the following command: - -```bash -git remote -v -``` - -You should see an `origin` repository which is your forked repository, and an `upstream` repository which is the Medusa admin repository. - ---- - -## Update your Fork with Latest Changes - -To update your fork with the latest changes from the Medusa admin repository: - -1. Change to the directory of your cloned forked repository. -2. Run the following command to fetch the latest changes from the Medusa admin repository: - -```bash -git fetch upstream -``` - -1. Make sure you’re on your `main` or `master` branch of the forked repository: - -```bash -git checkout main -``` - -1. Merge the changes from the `main` branch of the Medusa admin repository: - -```bash -git merge upstream/main -``` - -If your forked repository doesn’t have any conflicts with the changes from the Medusa admin repository, the merge will be done successfully. Otherwise, you’ll need to [resolve these conflicts](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/addressing-merge-conflicts/resolving-a-merge-conflict-using-the-command-line). - ---- - -## See Also - -- [Admin API reference](/api/admin). -- [Local development with Medusa](../development/fundamentals/local-development.md). diff --git a/docs/content/admin/onboarding.md b/docs/content/admin/onboarding.md new file mode 100644 index 0000000000..fca60fcff6 --- /dev/null +++ b/docs/content/admin/onboarding.md @@ -0,0 +1,2420 @@ +--- +title: 'Example: How to Create Onboarding Widget' +description: 'Learn how to build the onboarding widget available in the admin dashboard the first time you install a Medusa project.' +addHowToData: true +badge: + variant: orange + text: beta +--- + +In this guide, you’ll learn how to build the onboarding widget available in the admin dashboard the first time you install a Medusa project. + +:::note + +The onboarding widget is already implemented within the codebase of your Medusa backend. This guide is helpful if you want to understand how it was implemented or you want an example of customizing the Medusa admin and backend. + +::: + +## What you’ll be Building + +By following this tutorial, you’ll: + +- Build an onboarding flow in the admin that takes the user through creating a sample product and order. This flow has four steps and navigates the user between four pages in the admin before completing the guide. This will be implemented using [Admin Widgets](./widgets.md). +- Keep track of the current step the user has reached by creating a table in the database and an API endpoint that the admin widget uses to retrieve and update the current step. These customizations will be applied to the backend. + +![Onboarding Widget Demo](https://res.cloudinary.com/dza7lstvk/image/upload/v1686839259/Medusa%20Docs/Screenshots/onboarding-gif_nalqps.gif) + +--- + +## Prerequisites + +Before you follow along this tutorial, you must have a Medusa backend installed with the `beta` version of the `@medusajs/admin` package. If not, you can use the following command to get started: + +```bash +npx create-medusa-app@latest +``` + +Please refer to the [create-medusa-app documentation](../create-medusa-app) for more details on this command, including prerequisites and troubleshooting. + +--- + +## Preparation Steps + +The steps in this section are used to prepare for the custom functionalities you’ll be creating in this tutorial. + +### (Optional) TypeScript Configurations and package.json + +If you're using TypeScript in your project, it's highly recommended to setup your TypeScript configurations and package.json as mentioned in [this guide](./widgets.md#optional-typescript-preparations). + +### Install Medusa React + +[Medusa React](../medusa-react/overview) is a React library that facilitates using Medusa’s endpoints within your React application. It also provides the utility to register and use custom endpoints. + +To install Medusa React and its required dependencies, run the following command in the root directory of the Medusa backend: + +```bash npm2yarn +npm install medusa-react @tanstack/react-query +``` + +### Implement Helper Resources + +The resources in this section are used for typing, layout, and design purposes, and they’re used in other essential components in this tutorial. + +Each of the collapsible elements below hold the path to the file that you should create, and the content of that file. + +
+ + src/admin/types/icon-type.ts + + + ```tsx title=src/admin/types/icon-type.ts + import React from "react" + + type IconProps = { + color?: string + size?: string | number + } & React.SVGAttributes + + export default IconProps + ``` + +
+ +
+ + src/admin/components/shared/icons/check-circle-fill-icon.tsx + + + + + ```tsx title=src/admin/components/shared/icons/check-circle-fill-icon.tsx + import React from "react" + import IconProps from "../../../types/icon-type" + + const CheckCircleFillIcon: React.FC = ({ + size = "24", + color = "currentColor", + ...attributes + }) => { + return ( + + + + ) + } + + export default CheckCircleFillIcon + ``` + +
+ +
+ + src/admin/components/shared/icons/cross-icon.tsx + + + ```tsx title=src/admin/components/shared/icons/cross-icon.tsx + import React from "react" + import IconProps from "../../../types/icon-type" + + const CrossIcon: React.FC = ({ + size = "20", + color = "currentColor", + ...attributes + }) => { + return ( + + + + + ) + } + + export default CrossIcon + ``` + +
+ +
+ + src/admin/components/shared/icons/get-started-icon.tsx + + + + + ```tsx title=src/admin/components/shared/icons/get-started-icon.tsx + import React from "react" + import IconProps from "../../../types/icon-type" + + const GetStartedIcon: React.FC = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) + + export default GetStartedIcon + ``` + +
+ +
+ + src/admin/components/shared/icons/clipboard-copy-icon.tsx + + + + + ```tsx title=src/admin/components/shared/icons/clipboard-copy-icon.tsx + import React from "react" + import IconProps from "../../../types/icon-type" + + const ClipboardCopyIcon: React.FC = ({ + size = "20", + color = "currentColor", + ...attributes + }) => { + return ( + + + + + + + ) + } + + export default ClipboardCopyIcon + ``` + +
+ +
+ + src/admin/components/shared/icons/computer-desktop-icon.tsx + + + + + ```tsx title=src/admin/components/shared/icons/computer-desktop-icon.tsx + import React from "react" + import IconProps from "../../../types/icon-type" + + const ComputerDesktopIcon: React.FC = ({ + size = "24", + color = "currentColor", + ...attributes + }) => { + return ( + + + + ) + } + + export default ComputerDesktopIcon + ``` + +
+ +
+ + src/admin/components/shared/icons/dollar-sign-icon.tsx + + + + + ```tsx title=src/admin/components/shared/icons/dollar-sign-icon.tsx + import React from "react" + import IconProps from "../../../types/icon-type" + + const DollarSignIcon: React.FC = ({ + size = "24", + color = "currentColor", + ...attributes + }) => { + return ( + + + + + ) + } + + export default DollarSignIcon + ``` + +
+ +
+ + src/admin/components/shared/accordion.tsx + + + + + ```tsx title=src/admin/components/shared/accordion.tsx + import * as AccordionPrimitive from "@radix-ui/react-accordion" + import clsx from "clsx" + import React from "react" + import CheckCircleFillIcon from "./icons/check-circle-fill-icon" + + type AccordionItemProps = AccordionPrimitive.AccordionItemProps & { + title: string; + subtitle?: string; + description?: string; + required?: boolean; + tooltip?: string; + forceMountContent?: true; + headingSize?: "small" | "medium" | "large"; + customTrigger?: React.ReactNode; + complete?: boolean; + active?: boolean; + triggerable?: boolean; + }; + + const Accordion: React.FC< + | (AccordionPrimitive.AccordionSingleProps & + React.RefAttributes) + | (AccordionPrimitive.AccordionMultipleProps & + React.RefAttributes) + > & { + Item: React.FC; + } = ({ children, ...props }) => { + return ( + + {children} + + ) + } + + const Item: React.FC = ({ + title, + subtitle, + description, + required, + tooltip, + children, + className, + complete, + headingSize = "large", + customTrigger = undefined, + forceMountContent = undefined, + active, + triggerable, + ...props + }) => { + const headerClass = clsx({ + "inter-small-semibold": headingSize === "small", + "inter-base-medium": headingSize === "medium", + "inter-large-semibold": headingSize === "large", + }) + + const paddingClasses = clsx({ + "pb-0 mb-3 pt-3 ": headingSize === "medium", + "pb-5 radix-state-open:pb-5xlarge mb-5 ": + headingSize === "large", + }) + + return ( + + +
+
+
+
+ {complete ? ( + + ) : ( + + )} +
+ + {title} + {required && *} + +
+ + {customTrigger || } + +
+ {subtitle && ( + + {subtitle} + + )} +
+ + +
+ {description &&

{description}

} +
{children}
+
+ + + ) + } + + Accordion.Item = Item + + const MorphingTrigger = () => { + return ( +
+
+ + +
+
+ ) + } + + export default Accordion + ``` + +
+ +
+ + src/admin/components/shared/spinner.tsx + + + + + ```tsx title=src/admin/components/shared/spinner.tsx + import clsx from "clsx" + import React from "react" + + type SpinnerProps = { + size?: "large" | "medium" | "small"; + variant?: "primary" | "secondary"; + }; + + const Spinner: React.FC = ({ + size = "large", + variant = "primary", + }) => { + return ( +
+
+
+
+
+ ) + } + + export default Spinner + ``` + +
+ +
+ + src/admin/components/shared/button.tsx + + + + + + ```tsx title=src/admin/components/shared/button.tsx + import clsx from "clsx" + import React, { Children } from "react" + import Spinner from "./spinner" + + export type ButtonProps = { + variant: "primary" | "secondary" | "ghost" | "danger" | "nuclear"; + size?: "small" | "medium" | "large"; + loading?: boolean; + } & React.ButtonHTMLAttributes; + + const Button = React.forwardRef( + ( + { + variant = "primary", + size = "large", + loading = false, + children, + ...attributes + }, + ref + ) => { + const handleClick = (e) => { + if (!loading && attributes.onClick) { + attributes.onClick(e) + } + } + + const variantClassname = clsx({ + ["btn-primary"]: variant === "primary", + ["btn-secondary"]: variant === "secondary", + ["btn-ghost"]: variant === "ghost", + ["btn-danger"]: variant === "danger", + ["btn-nuclear"]: variant === "nuclear", + }) + + const sizeClassname = clsx({ + ["btn-large"]: size === "large", + ["btn-medium"]: size === "medium", + ["btn-small"]: size === "small", + }) + + return ( + + ) + } + ) + + export default Button + ``` + +
+ +
+ + src/admin/components/shared/code-snippets.tsx + + + + + ```tsx title=src/admin/components/shared/code-snippets.tsx + import React, { useState } from "react" + import clsx from "clsx" + import copy from "copy-to-clipboard" + import { Highlight, themes } from "prism-react-renderer" + import ClipboardCopyIcon from "./icons/clipboard-copy-icon" + import CheckCircleFillIcon from "./icons/check-circle-fill-icon" + + const CodeSnippets = ({ + snippets, + }: { + snippets: { + label: string; + language: string; + code: string; + }[]; + }) => { + const [active, setActive] = useState(snippets[0]) + const [copied, setCopied] = useState(false) + + const copyToClipboard = () => { + setCopied(true) + copy(active.code) + setTimeout(() => { + setCopied(false) + }, 3000) + } + + return ( +
+
+ {snippets.map((snippet) => ( +
setActive(snippet)} + > + {snippet.label} +
+ ))} +
+
+
+ {copied ? ( + + ) : ( + + )} +
+ + {({ style, tokens, getLineProps, getTokenProps }) => ( + 
+                {tokens.map((line, i) => (
+                  

+                    {line.map((token, key) => (
+                      
+                    ))}
+                  

+                ))}
+
+ )} + +
+
+ ) + } + + export default CodeSnippets + ``` + +
+ +
+ + src/admin/components/shared/container.tsx + + + + + ```tsx title=src/admin/components/shared/container.tsx + import React, { PropsWithChildren } from "react" + + type Props = PropsWithChildren<{ + title?: string; + description?: string; + }>; + + export const Container = ({ title, description, children }: Props) => { + return ( +
+
+
+ {title && ( +

{title}

+ )} +
+ {description && ( +

{description}

+ )} +
+
{children}
+
+ ) + } + ``` + +
+ +
+ + src/admin/components/shared/badge.tsx + + + + + ```tsx title=src/admin/components/shared/badge.tsx + import clsx from "clsx" + import React from "react" + + type BadgeProps = { + variant: + | "primary" + | "danger" + | "success" + | "warning" + | "ghost" + | "default" + | "disabled" + | "new-feature" + } & React.HTMLAttributes + + const Badge: React.FC = ({ + children, + variant, + onClick, + className, + ...props + }) => { + const variantClassname = clsx({ + ["badge-primary"]: variant === "primary", + ["badge-danger"]: variant === "danger", + ["badge-success"]: variant === "success", + ["badge-warning"]: variant === "warning", + ["badge-ghost"]: variant === "ghost", + ["badge-default"]: variant === "default", + ["badge-disabled"]: variant === "disabled", + ["bg-blue-10 border-blue-30 border font-normal text-blue-50"]: + variant === "new-feature", + }) + + return ( +
+ {children} +
+ ) + } + + export default Badge + ``` + +
+ +
+ + src/admin/components/shared/icon-badge.tsx + + + + + ```tsx title=src/admin/components/shared/icon-badge.tsx + import clsx from "clsx" + import React from "react" + import Badge from "./badge" + + type IconBadgeProps = { + variant?: + | "primary" + | "danger" + | "success" + | "warning" + | "ghost" + | "default" + | "disabled"; + } & React.HTMLAttributes; + + const IconBadge: React.FC = ({ + children, + variant, + className, + ...rest + }) => { + return ( + + {children} + + ) + } + + export default IconBadge + ``` + +
+ +--- + +## Step 1: Customize Medusa Backend + +:::note + +If you’re not interested in learning about backend customizations, you can skip to [step 2](#step-2-create-onboarding-widget). + +::: + +In this step, you’ll customize the Medusa backend to: + +1. Add a new table in the database that stores the current onboarding step. This requires creating a new entity, repository, and migration. +2. Add a new endpoint that allows to retrieve and update the current onboarding step. This requires creating a new service and endpoint. + +### Create Entity + +An [entity](../development/entities/overview.mdx) represents a table in the database. It’s based on Typeorm, so it requires creating a repository and a migration to be used in the backend. + +To create the entity, create the file `src/models/onboarding.ts` with the following content: + +```ts title=src/models/onboarding.ts +import { BaseEntity } from "@medusajs/medusa" +import { Column, Entity } from "typeorm" + +@Entity() +export class OnboardingState extends BaseEntity { + @Column() + current_step: string + + @Column() + is_complete: boolean + + @Column() + product_id: string +} +``` + +Then, create the file `src/repositories/onboarding.ts` that holds the repository of the entity with the following content: + +```ts title=src/repositories/onboarding.ts +import { + dataSource, +} from "@medusajs/medusa/dist/loaders/database" +import { OnboardingState } from "../models/onboarding" + +const OnboardingRepository = dataSource.getRepository( + OnboardingState +) + +export default OnboardingRepository +``` + +You can learn more about entities and repositories in [this documentation](../development/entities/overview.mdx). + +### Create Migration + +A [migration](../development/entities/migrations/overview.mdx) is used to reflect database changes in your database schema. + +To create a migration, run the following command in the root of your Medusa backend: + +```bash +npx typeorm migration:create src/migrations/CreateOnboarding +``` + +This will create a file in the `src/migrations` directory with the name formatted as `-CreateOnboarding.ts`. + +In that file, import the `genereteEntityId` utility method at the top of the file: + +```ts +import { generateEntityId } from "@medusajs/utils" +``` + +Then, replace the `up` and `down` methods in the migration class with the following content: + + + +```ts +export class CreateOnboarding1685715079776 implements MigrationInterface { + public async up(queryRunner: QueryRunner): Promise { + await queryRunner.query( + `CREATE TABLE "onboarding_state" ("id" character varying NOT NULL, "created_at" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT now(), "updated_at" TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT now(), "current_step" character varying NULL, "is_complete" boolean, "product_id" character varying NULL)` + ) + + await queryRunner.query( + `INSERT INTO "onboarding_state" ("id", "current_step", "is_complete") VALUES ('${generateEntityId( + "", + "onboarding" + )}' , NULL, false)` + ) + } + + public async down(queryRunner: QueryRunner): Promise { + await queryRunner.query(`DROP TABLE "onboarding_state"`) + } +} +``` + +:::warning + +Don’t copy the name of the class in the code snippet above. Keep the name you have in the file. + +::: + +Finally, to reflect the migration in the database, run the `build` and `migration` commands: + +```bash npm2yarn +npm run build +npx @medusajs/medusa-cli migrations run +``` + +You can learn more about migrations in [this guide](../development/entities/migrations/overview.mdx). + +### Create Service + +A [service](../development/services/overview.mdx) is a class that holds helper methods related to an entity. For example, methods to create or retrieve a record of that entity. Services are used by other resources, such as endpoints, to perform functionalities related to an entity. + +So, before you add the endpoints that allow retrieving and updating the onboarding state, you need to add the service that implements these helper functionalities. + +Start by creating the file `src/types/onboarding.ts` with the following content: + + + +```ts title=src/types/onboarding.ts +import { OnboardingState } from "../models/onboarding" + +export type UpdateOnboardingStateInput = { + current_step?: string; + is_complete?: boolean; + product_id?: string; +}; + +export interface AdminOnboardingUpdateStateReq {} + +export type OnboardingStateRes = { + status: OnboardingState; +}; +``` + +This file holds the necessary types that will be used within the service you’ll create, and later in your onboarding flow widget. + +Then, create the file `src/services/onboarding.ts` with the following content: + + + +```ts title=src/services/onboarding.ts +import { TransactionBaseService } from "@medusajs/medusa" +import OnboardingRepository from "../repositories/onboarding" +import { OnboardingState } from "../models/onboarding" +import { EntityManager, IsNull, Not } from "typeorm" +import { UpdateOnboardingStateInput } from "../types/onboarding" + +type InjectedDependencies = { + manager: EntityManager; + onboardingRepository: typeof OnboardingRepository; +}; + +class OnboardingService extends TransactionBaseService { + protected onboardingRepository_: typeof OnboardingRepository + + constructor({ onboardingRepository }: InjectedDependencies) { + super(arguments[0]) + + this.onboardingRepository_ = onboardingRepository + } + + async retrieve(): Promise { + const onboardingRepo = this.activeManager_.withRepository( + this.onboardingRepository_ + ) + + const status = await onboardingRepo.findOne({ + where: { id: Not(IsNull()) }, + }) + + return status + } + + async update( + data: UpdateOnboardingStateInput + ): Promise { + return await this.atomicPhase_( + async (transactionManager: EntityManager) => { + const onboardingRepository = + transactionManager.withRepository( + this.onboardingRepository_ + ) + + const status = await this.retrieve() + + for (const [key, value] of Object.entries(data)) { + status[key] = value + } + + return await onboardingRepository.save(status) + } + ) + } +} + +export default OnboardingService +``` + +This service class implements two methods `retrieve` to retrieve the current onboarding state, and `update` to update the current onboarding state. + +You can learn more about services in [this documentation](../development/services/overview.mdx). + +### Create Endpoint + +The last part of this step is to create the [endpoints](../development/endpoints/overview) that you’ll consume in the admin widget. There will be two endpoints: Get Onboarding State and Update Onboarding State. + +To add the Get Onboarding State endpoint, create the file `src/api/routes/admin/onboarding/get-status.ts` with the following content: + +```ts title=src/api/routes/admin/onboarding/get-status.ts +import { Request, Response } from "express" +import OnboardingService from "../../../../services/onboarding" + +export default async function getOnboardingStatus( + req: Request, + res: Response +) { + const onboardingService: OnboardingService = + req.scope.resolve("onboardingService") + + const status = await onboardingService.retrieve() + + res.status(200).json({ status }) +} +``` + +Notice how this endpoint uses the `OnboardingService`'s `retrieve` method to retrieve the current onboarding state. It resolves the `OnboardingService` using the [Dependency Container.](../development/fundamentals/dependency-injection.md) + +To add the Update Onboarding State, create the file `src/api/routes/admin/onboarding/update-status.ts` with the following content: + +```ts title=src/api/routes/admin/onboarding/update-status.ts +import { Request, Response } from "express" +import { EntityManager } from "typeorm" +import OnboardingService from "../../../../services/onboarding" + +export default async function updateOnboardingStatus( + req: Request, + res: Response +) { + const onboardingService: OnboardingService = + req.scope.resolve("onboardingService") + const manager: EntityManager = req.scope.resolve("manager") + + const status = await manager.transaction( + async (transactionManager) => { + return await onboardingService + .withTransaction(transactionManager) + .update(req.body) + }) + + res.status(200).json({ status }) +} +``` + +Notice how this endpoint uses the `OnboardingService`'s `update` method to update the current onboarding state. + +After creating the endpoints, you need to register them in a router and export the router for the Medusa core to load. + +To do that, start by creating the file `src/api/routes/admin/onboarding/index.ts` with the following content: + +```ts title=src/api/routes/admin/onboarding/index.ts +import { wrapHandler } from "@medusajs/utils" +import { Router } from "express" +import getOnboardingStatus from "./get-status" +import updateOnboardingStatus from "./update-status" + +const router = Router() + +export default (adminRouter: Router) => { + adminRouter.use("/onboarding", router) + + router.get("/", wrapHandler(getOnboardingStatus)) + router.post("/", wrapHandler(updateOnboardingStatus)) +} +``` + +This file creates a router that registers the Get Onboarding State and Update Onboarding State endpoints. + +Next, create or change the content of the file `src/api/routes/admin/index.ts` to the following: + +```ts title=src/api/routes/admin/index.ts +import { Router } from "express" +import { wrapHandler } from "@medusajs/medusa" +import onboardingRoutes from "./onboarding" +import customRouteHandler from "./custom-route-handler" + +// Initialize a custom router +const router = Router() + +export function attachAdminRoutes(adminRouter: Router) { + // Attach our router to a custom path on the admin router + adminRouter.use("/custom", router) + + // Define a GET endpoint on the root route of our custom path + router.get("/", wrapHandler(customRouteHandler)) + + // Attach routes for onboarding experience, defined separately + onboardingRoutes(adminRouter) +} +``` + +This file exports the router created in `src/api/routes/admin/onboarding/index.ts`. + +Finally, create or change the content of the file `src/api/index.ts` to the following content: + +```ts title=src/api/index.ts +import { Router } from "express" +import cors from "cors" +import bodyParser from "body-parser" +import { authenticate, ConfigModule } from "@medusajs/medusa" +import { getConfigFile } from "medusa-core-utils" +import { attachStoreRoutes } from "./routes/store" +import { attachAdminRoutes } from "./routes/admin" + +export default (rootDirectory: string): Router | Router[] => { + // Read currently-loaded medusa config + const { configModule } = getConfigFile( + rootDirectory, + "medusa-config" + ) + const { projectConfig } = configModule + + // Set up our CORS options objects, based on config + const storeCorsOptions = { + origin: projectConfig.store_cors.split(","), + credentials: true, + } + + const adminCorsOptions = { + origin: projectConfig.admin_cors.split(","), + credentials: true, + } + + // Set up express router + const router = Router() + + // Set up root routes for store and admin endpoints, + // with appropriate CORS settings + router.use( + "/store", + cors(storeCorsOptions), + bodyParser.json() + ) + router.use( + "/admin", + cors(adminCorsOptions), + bodyParser.json() + ) + + // Add authentication to all admin routes *except* + // auth and account invite ones + router.use( + /\/admin\/((?!auth)(?!invites).*)/, + authenticate() + ) + + // Set up routers for store and admin endpoints + const storeRouter = Router() + const adminRouter = Router() + + // Attach these routers to the root routes + router.use("/store", storeRouter) + router.use("/admin", adminRouter) + + // Attach custom routes to these routers + attachStoreRoutes(storeRouter) + attachAdminRoutes(adminRouter) + + return router +} +``` + +This is the file that the Medusa core loads the endpoints from. In this file, you export a router that registers store and admin endpoints, including the `onboarding` endpoints you just added. + +You can learn more about endpoints in [this documentation](../development/endpoints/overview.mdx). + +--- + +## Step 2: Create Onboarding Widget + +In this step, you’ll create the onboarding widget with a general implementation. Some implementation details will be added later in the tutorial. + +Create the file `src/admin/widgets/onboarding-flow/onboarding-flow.tsx` with the following content: + + + + +```tsx title=src/admin/widgets/onboarding-flow/onboarding-flow.tsx +import React, { + useState, + useEffect, +} from "react" +import { + Container, +} from "../../components/shared/container" +import Button from "../../components/shared/button" +import { + WidgetConfig, +} from "@medusajs/admin" +import Accordion from "../../components/shared/accordion" +import GetStartedIcon from "../../components/shared/icons/get-started-icon" +import { + OnboardingState, +} from "../../../models/onboarding" +import { + useNavigate, +} from "react-router-dom" +import { + AdminOnboardingUpdateStateReq, + OnboardingStateRes, + UpdateOnboardingStateInput, +} from "../../../types/onboarding" + +type STEP_ID = + | "create_product" + | "preview_product" + | "create_order" + | "setup_finished"; + +export type StepContentProps = any & { + onNext?: Function; + isComplete?: boolean; + data?: OnboardingState; +} & any; + +type Step = { + id: STEP_ID; + title: string; + component: React.FC; + onNext?: Function; +}; + +const STEP_FLOW: STEP_ID[] = [ + "create_product", + "preview_product", + "create_order", + "setup_finished", +] + +const OnboardingFlow = (props: any) => { + const navigate = useNavigate() + + // TODO change based on state in backend + const currentStep: STEP_ID | undefined = "create_product" as STEP_ID + + const [openStep, setOpenStep] = useState(currentStep) + const [completed, setCompleted] = useState(false) + + useEffect(() => { + setOpenStep(currentStep) + if (currentStep === STEP_FLOW[STEP_FLOW.length - 1]) {setCompleted(true)} + }, [currentStep]) + + const updateServerState = (payload: any) => { + // TODO update state in the backend + } + + const onStart = () => { + // TODO update state in the backend + navigate(`/a/products`) + } + + const setStepComplete = ({ + step_id, + extraData, + onComplete, + }: { + step_id: STEP_ID; + extraData?: UpdateOnboardingStateInput; + onComplete?: () => void; + }) => { + // TODO update state in the backend + } + + const goToProductView = (product: any) => { + setStepComplete({ + step_id: "create_product", + extraData: { product_id: product.id }, + onComplete: () => navigate(`/a/products/${product.id}`), + }) + } + + const goToOrders = () => { + setStepComplete({ + step_id: "preview_product", + onComplete: () => navigate(`/a/orders`), + }) + } + + const goToOrderView = (order: any) => { + setStepComplete({ + step_id: "create_order", + onComplete: () => navigate(`/a/orders/${order.id}`), + }) + } + + const onComplete = () => { + setCompleted(true) + } + + const onHide = () => { + updateServerState({ is_complete: true }) + } + + // TODO add steps + const Steps: Step[] = [] + + const isStepComplete = (step_id: STEP_ID) => + STEP_FLOW.indexOf(currentStep) > STEP_FLOW.indexOf(step_id) + + return ( + <> + + setOpenStep(value as STEP_ID)} + > +
+
+ +
+ {!completed ? ( + <> +
+

Get started

+

+ Learn the basics of Medusa by creating your first order. +

+
+
+ {currentStep ? ( + <> + {currentStep === STEP_FLOW[STEP_FLOW.length - 1] ? ( + + ) : ( + + )} + + ) : ( + <> + + + + )} +
+ + ) : ( + <> +
+

+ Thank you for completing the setup guide! +

+

+ This whole experience was built using our new{" "} + widgets feature. +
You can find out more details and build your own by + following{" "} + + our guide + + . +

+
+
+ +
+ + )} +
+ { +
+ {(!completed ? Steps : Steps.slice(-1)).map((step, index) => { + const isComplete = isStepComplete(step.id) + const isCurrent = currentStep === step.id + return ( + , + })} + > +
+ +
+ + ) + })} +
+ } + + + + ) +} + +export const config: WidgetConfig = { + zone: [ + "product.list.before", + "product.details.before", + "order.list.before", + "order.details.before", + ], +} + +export default OnboardingFlow +``` + +There are three important details to ensure that Medusa reads this file as a widget: + +1. The file is placed under the `src/admin/widget` directory. +2. The file exports a `config` object of type `WidgetConfig`, which is imported from `@medusajs/admin`. +3. The file default exports a React component, which in this case is `OnboardingFlow` + +The extension uses `react-router-dom`, which is available as a dependency of the `@medusajs/admin` package, to navigate to other pages in the dashboard. + +The `OnboardingFlow` widget also implements functionalities related to handling the steps of the onboarding flow, including navigating between them and updating the current step in the backend. Some parts are left as `TODO` until you add the components for each step, and you implement customizations in the backend. + +You can learn more about Admin Widgets in [this documentation](./widgets.md). + +--- + +## Step 3: Create Step Components + +In this section, you’ll create the components for each step in the onboarding flow. You’ll then update the `OnboardingFlow` widget to use these components. + +
+ + ProductsList component + + + + The `ProductsList` component is used in the first step of the onboarding widget. It allows the user to either open the Create Product modal or create a sample product. + + Create the file `src/admin/components/onboarding-flow/products/products-list.tsx` with the following content: + + + + ```tsx title=src/admin/components/onboarding-flow/products/products-list.tsx + import React from "react" + import Button from "../../shared/button" + import { + useAdminCreateProduct, + useAdminCreateCollection, + } from "medusa-react" + import { + useAdminRegions, + } from "medusa-react" + import { + StepContentProps, + } from "../../../widgets/onboarding-flow/onboarding-flow" + + enum ProductStatus { + PUBLISHED = "published", + } + + const ProductsList = ({ onNext, isComplete }: StepContentProps) => { + const { mutateAsync: createCollection, isLoading: collectionLoading } = + useAdminCreateCollection() + const { mutateAsync: createProduct, isLoading: productLoading } = + useAdminCreateProduct() + const { regions } = useAdminRegions() + + const isLoading = collectionLoading || productLoading + + const createSample = async () => { + try { + const { collection } = await createCollection({ + title: "Merch", + handle: "merch", + }) + const { product } = await createProduct({ + title: "Medusa T-Shirt", + description: "Comfy t-shirt with Medusa logo", + subtitle: "Black", + is_giftcard: false, + discountable: false, + options: [{ title: "Size" }], + images: [ + "https://medusa-public-images.s3.eu-west-1.amazonaws.com/tee-black-front.png", + "https://medusa-public-images.s3.eu-west-1.amazonaws.com/tee-black-back.png", + ], + collection_id: collection.id, + variants: [ + { + title: "Small", + inventory_quantity: 25, + manage_inventory: true, + prices: regions.map((region) => ({ + amount: 5000, + currency_code: region.currency_code, + })), + options: [{ value: "S" }], + }, + { + title: "Medium", + inventory_quantity: 10, + manage_inventory: true, + prices: regions.map((region) => ({ + amount: 5000, + currency_code: region.currency_code, + })), + options: [{ value: "M" }], + }, + { + title: "Large", + inventory_quantity: 17, + manage_inventory: true, + prices: regions.map((region) => ({ + amount: 5000, + currency_code: region.currency_code, + })), + options: [{ value: "L" }], + }, + { + title: "Extra Large", + inventory_quantity: 22, + manage_inventory: true, + prices: regions.map((region) => ({ + amount: 5000, + currency_code: region.currency_code, + })), + options: [{ value: "XL" }], + }, + ], + status: ProductStatus.PUBLISHED, + }) + onNext(product) + } catch (e) { + console.error(e) + } + } + + return ( +
+

+ Create a product and set its general details such as title and + description, its price, options, variants, images, and more. You'll then + use the product to create a sample order. +

+

+ If you're not ready to create a product, we can create a sample product + for you. +

+ {!isComplete && ( +
+ +
+ )} +
+ ) + } + + export default ProductsList + ``` + +
+ +
+ + ProductDetail component + + + + The `ProductDetail` component is used in the second step of the onboarding. It shows the user a code snippet to preview the product they created in the first step. + + Create the file `src/admin/components/onboarding-flow/products/product-detail.tsx` with the following content: + + + + ```tsx title=src/admin/components/onboarding-flow/products/product-detail.tsx + import React from "react" + import { + useAdminPublishableApiKeys, + } from "medusa-react" + import Button from "../../shared/button" + import CodeSnippets from "../../shared/code-snippets" + import { + StepContentProps, + } from "../../../widgets/onboarding-flow/onboarding-flow" + + const ProductDetail = ({ onNext, isComplete, data }: StepContentProps) => { + const { + publishable_api_keys: keys, + isLoading, + } = useAdminPublishableApiKeys({ + offset: 0, + limit: 1, + }) + const api_key = keys?.[0]?.id || "pk_01H0PY648BTMEJR34ZDATXZTD9" + return ( +
+

On this page, you can view your product's details and edit them.

+

+ You can preview your product using Medusa's Store APIs. You can copy any + of the following code snippets to try it out. +

+
+ {!isLoading && ( + + )} +
+
+ + + + {!isComplete && ( + + )} +
+
+ ) + } + + export default ProductDetail + ``` + +
+ +
+ + OrdersList component + + + + The `OrdersList` component is used in the third step of the onboarding. It allows the user to create a sample order. + + Create the file `src/admin/components/onboarding-flow/orders/orders-list.tsx` with the following content: + + + + ```tsx title=src/admin/components/onboarding-flow/orders/orders-list.tsx + import React from "react" + import Button from "../../shared/button" + import { + useAdminProduct, + } from "medusa-react" + import { + useAdminCreateDraftOrder, + } from "medusa-react" + import { + useAdminShippingOptions, + } from "medusa-react" + import { + useAdminRegions, + } from "medusa-react" + import { + useMedusa, + } from "medusa-react" + import { + StepContentProps, + } from "../../../widgets/onboarding-flow/onboarding-flow" + + const OrdersList = ({ onNext, isComplete, data }: StepContentProps) => { + const { product } = useAdminProduct(data.product_id) + const { mutateAsync: createDraftOrder, isLoading } = + useAdminCreateDraftOrder() + const { client } = useMedusa() + + const { regions } = useAdminRegions() + const { shipping_options } = useAdminShippingOptions() + + const createOrder = async () => { + const variant = product.variants[0] ?? null + try { + const { draft_order } = await createDraftOrder({ + email: "customer@medusajs.com", + items: [ + variant + ? { + quantity: 1, + variant_id: variant.id, + } + : { + quantity: 1, + title: product.title, + unit_price: 50, + }, + ], + shipping_methods: [ + { + option_id: shipping_options[0].id, + }, + ], + region_id: regions[0].id, + }) + + const { order } = await client.admin.draftOrders.markPaid(draft_order.id) + + onNext(order) + } catch (e) { + console.error(e) + } + } + return ( + <> +
+

+ With a Product created, we can now place an Order. Click the button + below to create a sample order. +

+
+
+ {!isComplete && ( + + )} +
+ + ) + } + + export default OrdersList + ``` + +
+ +
+ + OrderDetail component + + + + The `OrderDetail` component is used in the fourth and final step of the onboarding. It educates the user on the next steps when developing with Medusa. + + Create the file `src/admin/components/onboarding-flow/orders/order-detail.tsx` with the following content: + + + + ```tsx title=src/admin/components/onboarding-flow/orders/order-detail.tsx + import React from "react" + import IconBadge from "../../shared/icon-badge" + import ComputerDesktopIcon from "../../shared/icons/computer-desktop-icon" + import DollarSignIcon from "../../shared/icons/dollar-sign-icon" + + const OrderDetail = () => { + return ( + <> +

+ You finished the setup guide 🎉 You now have your first order. Feel free + to play around with the order management functionalities, such as + capturing payment, creating fulfillments, and more. +

+

+ Start developing with Medusa +

+

+ Medusa is a completely customizable commerce solution. We've curated + some essential guides to kickstart your development with Medusa. +

+ +
+ You can find more useful guides in{" "} + + our documentation + + . +
+ + ) + } + + export default OrderDetail + ``` +
+ +After creating the above components, import them at the top of `src/admin/widgets/onboarding-flow/onboarding-flow.tsx`: + + + +```tsx title=src/admin/widgets/onboarding-flow/onboarding-flow.tsx +import ProductsList from "../../components/onboarding-flow/products/products-list" +import ProductDetail from "../../components/onboarding-flow/products/product-detail" +import OrdersList from "../../components/onboarding-flow/orders/orders-list" +import OrderDetail from "../../components/onboarding-flow/orders/order-detail" +``` + +Then, replace the initialization of the `Steps` variable within the `OnboardingFlow` widget with the following: + +```tsx title=src/admin/widgets/onboarding-flow/onboarding-flow.tsx +// TODO add steps +const Steps: Step[] = [ + { + id: "create_product", + title: "Create Product", + component: ProductsList, + onNext: goToProductView, + }, + { + id: "preview_product", + title: "Preview Product", + component: ProductDetail, + onNext: goToOrders, + }, + { + id: "create_order", + title: "Create an Order", + component: OrdersList, + onNext: goToOrderView, + }, + { + id: "setup_finished", + title: "Setup Finished: Start developing with Medusa", + component: OrderDetail, + }, +] +``` + +The next step is to retrieve the current step of the onboarding flow from the Medusa backend. + +--- + +## Step 4: Use Endpoints From Widget + +In this section, you’ll implement the `TODO`s in the `OnboardingFlow` that require communicating with the backend. + +There are different ways you can consume custom backend endpoints. The Medusa React library provides a utility method `createCustomAdminHooks` that allows you to create a hook similar to those available by default in the library. You can then utilize these hooks to send requests to custom backend endpoints. + +Create the file `src/admin/components/shared/hooks.tsx` that exports custom hooks for the custom endpoints you created in the previous step: + +```tsx title=src/admin/components/shared/hooks.tsx +import { createCustomAdminHooks } from "medusa-react" + +const { + useAdminEntity: useAdminOnboardingState, + useAdminUpdateMutation: useAdminUpdateOnboardingStateMutation, +} = createCustomAdminHooks("onboarding", "onboarding_state") + +export { + useAdminOnboardingState, + useAdminUpdateOnboardingStateMutation, +} +``` + +You can now use `useAdminOnboardingState` to retrieve the onboarding state from the backend, and `useAdminUpdateOnboardingStateMutation` to update the onboarding state in the backend. + +Learn more about Medusa React in [this documentation](../medusa-react/overview.md). + +Then, add the following imports at the top of `src/admin/widgets/onboarding-flow/onboarding-flow.tsx`: + +```tsx title=src/admin/widgets/onboarding-flow/onboarding-flow.tsx +import { + useAdminOnboardingState, + useAdminUpdateOnboardingStateMutation, +} from "../../components/shared/hooks" +``` + +Next, add the following at the top of the `OnboardingFlow` component: + +```tsx title=src/admin/widgets/onboarding-flow/onboarding-flow.tsx +const OnboardingFlow = (props: any) => { + const { + data, + isLoading, + } = useAdminOnboardingState("") + const { mutate } = useAdminUpdateOnboardingStateMutation< + AdminOnboardingUpdateStateReq, + OnboardingStateRes + >("") + + // ... +} +``` + +`data` now holds the current onboarding state from the backend, and `mutate` can be used to update the onboarding state in the backend. + +After that, replace the declarations within `OnboardingFlow` that had a `TODO` comment with the following: + +```tsx title=src/admin/widgets/onboarding-flow/onboarding-flow.tsx +const OnboardingFlow = (props: ExtensionProps) => { + // ... + const currentStep: STEP_ID | undefined = data?.status + ?.current_step as STEP_ID + + if ( + !isLoading && + data?.status?.is_complete && + !localStorage.getItem("override_onboarding_finish") + ) + {return null} + + const updateServerState = ( + payload: UpdateOnboardingStateInput, + onSuccess: () => void = () => {} + ) => { + mutate(payload, { onSuccess }) + } + + const onStart = () => { + updateServerState({ current_step: STEP_FLOW[0] }) + navigate(`/a/products`) + } + + const setStepComplete = ({ + step_id, + extraData, + onComplete, + }: { + step_id: STEP_ID; + extraData?: UpdateOnboardingStateInput; + onComplete?: () => void; + }) => { + const next = STEP_FLOW[ + STEP_FLOW.findIndex((step) => step === step_id) + 1 + ] + updateServerState({ + current_step: next, + ...extraData, + }, onComplete) + } + + // ... +} +``` + +`currentStep` now holds the current step retrieve from the backend; `updateServerState` updates the current step in the backend; `onStart` updates the current step in the backend to the first step; and `setStepComplete` completes the current step by updating the current step in the backend to the following step. + +Finally, in the returned JSX, update the `TODO` in the `` component to pass the component the necessary `data`: + +```tsx title=src/admin/widgets/onboarding-flow/onboarding-flow.tsx + +``` + +--- + +## Step 5: Test it Out + +You’ve now implemented everything necessary for the onboarding flow! You can test it out by building the changes and running the `develop` command: + +```bash npm2yarn +npm run build +npx @medusajs/medusa-cli develop +``` + +If you open the admin at `localhost:7001` and log in, you’ll see the onboarding widget in the Products listing page. You can try using it and see your implementation in action! + +--- + +## Next Steps: Continue Development + +- [Learn more about Admin Widgets](./widgets.md) +- [Learn how you can start custom development in your backend](../recipes/index.mdx) diff --git a/docs/content/admin/quickstart.mdx b/docs/content/admin/quickstart.mdx index 29858c0e2a..4b19ae4643 100644 --- a/docs/content/admin/quickstart.mdx +++ b/docs/content/admin/quickstart.mdx @@ -6,30 +6,18 @@ addHowToData: true import Feedback from '@site/src/components/Feedback'; import Troubleshooting from '@site/src/components/Troubleshooting' import AdminLoginSection from '../troubleshooting/signing-in-to-admin.md' +import CorsSection from '../troubleshooting/cors-issues.md' # Admin Dashboard Quickstart This document will guide you through setting up the admin dashboard in the Medusa backend. -:::note - -The admin dashboard is now shipped as an NPM package, and the previous GitHub repository has been deprecated. - -::: - ## Overview The admin dashboard is installed on the Medusa backend. The admin dashboard starts when you start the Medusa backend. This also means you can later deploy the Medusa backend along with the admin dashboard on the same hosting. This guide will explain the steps and configurations required to set up the admin dashboard. - - --- ## Prerequisites @@ -52,20 +40,10 @@ You can install Node from the [official website](https://nodejs.org/en/). --- - - ## Install and Serve Admin with the Backend This section explains how to install the admin to be served with the Medusa Backend and later deployed together. - - ### Step 1: Install the Package In the directory of your Medusa backend, run the following command to install admin dashboard: @@ -74,6 +52,16 @@ In the directory of your Medusa backend, run the following command to install ad npm install @medusajs/admin ``` +:::note + +Installing the `@beta` version of the admin and Medusa core allows you to perform customizations such as creating [Admin Widgets](./widgets.md) or [Admin Dashboard Routes](./routes.md). You can install the `beta` version with the following command: + +```bash npm2yarn +npm install @medusajs/admin@beta @medusajs/medusa@beta +``` + +::: + ### Step 2: Add Admin to Medusa Configurations In `medusa-config.js`, add the admin plugin into the array of `plugins`: @@ -94,7 +82,7 @@ const plugins = [ The plugin accepts the following options: 1. `serve`: (default: `true`) a boolean indicating whether to serve the admin dashboard when the Medusa backend starts. If set to `false`, you can serve the admin dashboard using the [dev command](#dev-command-options). -2. `path`: (default: `app`) a string indicating the path the admin server should run on. It shouldn't be prefixed or suffixed with a slash `/`, and it can't be one of the reserved paths: "admin" and "store". +2. `path`: (default: `app`) a string indicating the path the admin server should run on when [running the Medusa backend in production](#note-on-admin-path). It shouldn't be prefixed or suffixed with a slash `/`, and it can't be one of the reserved paths: "admin" and "store". 3. `outDir`: Optional path for where to output the admin build files. 4. `autoRebuild`: (default: `false`) a boolean indicating whether the admin UI should be rebuilt if there are any changes or if a missing build is detected when the backend starts. If not set, you must [manually build the admin dashboard](#build-command-options). @@ -116,66 +104,14 @@ You can test the admin dashboard by running the following command in the directo npx @medusajs/medusa-cli develop ``` -This starts the Medusa Backend and the admin dashboard. By default, the admin will be available on the URL `localhost:9000/app`. If you set the `path` option, then the admin will be available on `localhost:9000/` with `` being the value of the `path` option. - - - ---- - - - ## Demo Credentials If you installed the demo data when you installed the Medusa backend by running: @@ -276,5 +210,16 @@ You can learn more about the admin dashboard and its features in the [User Guide title: 'Signing into Admin', content: }, + { + title: 'CORS Errors', + content: + } ]} /> + +--- + +## See Also + +- [Admin widgets](./widgets.md) +- [Admin UI routes](./routes.md) diff --git a/docs/content/admin/routes.md b/docs/content/admin/routes.md new file mode 100644 index 0000000000..b0fd396e56 --- /dev/null +++ b/docs/content/admin/routes.md @@ -0,0 +1,326 @@ +--- +title: 'How to Create an Admin UI Route' +description: 'Learn how to create a new route in the admin dashboard.' +addHowToData: true +badge: + variant: orange + text: beta +--- + +In this document, you’ll learn how to create a new route in the admin dashboard. + +## Overview + +You can customize the admin dashboard that Medusa provides to add new routes. This is useful if you want to add new subpages to the admin dashboard, or you want to add new pages that appear in the sidebar as well. + +An admin UI route is essentially a React Component created under the `src/admin/routes` directory. + +This guide explains how to create a new route in the admin dashboard with some examples. + +--- + +## Prerequisites + +It’s assumed you already have a Medusa backend with the admin plugin installed before you move forward with this guide. If not, you can follow [this documentation page](../create-medusa-app.mdx) to install a Medusa project. + +Furthermore, Admin UI Routes are currently available as a beta feature. So, you must install the `beta` version of the `@medusajs/admin` and `@medusajs/medusa` packages: + +```bash npm2yarn +npm install @medusajs/admin@beta @medusajs/medusa@beta +``` + +### (Optional) TypeScript Preparations + +Since routes are React components, they should be written in `.tsx` or `.jsx` files. If you’re using Typescript, you need to make some adjustments to avoid Typescript errors in your Admin files. + +This section provides recommended configurations to avoid any TypeScript errors. + +:::note + +These changes may already be available in your Medusa project. They're included here for reference purposes. + +::: + +First, update your `tsconfig.json` with the following configurations: + +```json title=tsconfig.json +{ + "compilerOptions": { + "target": "es2019", + "module": "commonjs", + "allowJs": true, + "checkJs": false, + "jsx": "react-jsx", + "declaration": true, + "outDir": "./dist", + "rootDir": "./src", + "experimentalDecorators": true, + "emitDecoratorMetadata": true, + "noEmit": false, + "strict": false, + "moduleResolution": "node", + "esModuleInterop": true, + "resolveJsonModule": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true + }, + "include": ["src/"], + "exclude": [ + "dist", + "build", + ".cache", + "tests", + "**/*.spec.js", + "**/*.spec.ts", + "node_modules", + ".eslintrc.js" + ] +} +``` + +The important changes to note here are the inclusion of the field `"jsx": "react-jsx"` and the addition of `"build"` and `“.cache”` to `exclude`. + +The addition of `"jsx": "react-jsx"` specified how should TypeScript transform JSX, and excluding `build` and `.cache` ensures that TypeScript ignores build and development files. + +Next, create the file `tsconfig.server.json` with the following content: + +```json title=tsconfig.server.json +{ + "extends": "./tsconfig.json", + "compilerOptions": { + /* Emit a single file with source maps instead of having a separate file. */ + "inlineSourceMap": true + }, + "exclude": ["src/admin", "**/*.spec.js"] +} +``` + +This is the configuration that will be used to transpile your custom backend code, such as services or entities. The important part is that it excludes `src/admin` as that is where your Admin code will live. + +Finally, create the file `tsconfig.admin.json` with the following content: + +```json title=tsconfig.admin.json +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "module": "esnext" + }, + "include": ["src/admin"], + "exclude": ["**/*.spec.js"] +} +``` + +This is the configuration that will be used when transpiling your admin code. + +--- + +## Create the Admin UI Route + +In this section, you’ll learn the basics of creating an admin UI route. + +### Step 1: Create File + +Custom admin UI routes are added under the `src/admin/routes` directory of your Medusa project. The path of the file depends on the path you want the route to be available under. It is based on [Next.js 13’s App Router](https://nextjs.org/docs/app/building-your-application/routing/defining-routes). + +For example, if you want the route to be available in the admin dashboard under the path `/a/custom` you should create your admin route under the path `src/admin/routes/custom/page.tsx`. + +:::tip + +All admin routes are prefixed with `/a` by default. + +::: + +You can also create [dynamic routes](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes). For example, you can create the route `/a/custom/[id]` by creating an admin router under the path `src/admin/routes/custom/[id]/page.tsx`. + +### 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. + +For example, you can create the file `src/admin/routes/custom/page.tsx` with the following content: + +```tsx title=src/admin/routes/custom/page.tsx +const CustomPage = () => { + return ( +
+ This is my custom route +
+ ) +} + +export default CustomPage +``` + +### Step 3: Test it Out + +To test your admin UI route, run the following command in the root directory of the Medusa backend project: + +```bash npm2yarn +npx @medusajs/medusa-cli develop +``` + +This will build your admin and opens a window in your default browser to `localhost:7001`. After you log in, if you go to `localhost:7001/a/custom`, you’ll find the page you just created. + +:::note + +When using the `develop` command, the admin dashboard will run in development mode and will restart whenever you make changes to your admin customizations. This allows you to see changes in the dashboard instantly during your development. + +::: + +--- + +## 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. + +The object has one property `link`, which is an object having the following properties: + +- `label`: a string indicating the sidebar item’s label of your custom route. +- `icon`: an optional React component that acts as an icon in the sidebar. If none provided, a default icon is used. + +For example, you can change the content of the previous route you created to export a config object: + +```tsx title=src/admin/routes/custom/page.tsx +import { RouteConfig } from "@medusajs/admin" +import { CustomIcon } from "../../icons/custom" + +const CustomPage = () => { + return ( +
+ This is my custom route +
+ ) +} + +export const config: RouteConfig = { + link: { + label: "Custom Route", + icon: CustomIcon, + }, +} + +export default CustomPage +``` + +--- + +## Retrieve Path Parameters + +As mentioned earlier, you can create dynamic routes like `/a/custom/[id]` by creating a route file at the path `src/admin/routes/custom/[id]/page.tsx`. + +To retrieve the path parameter, you can use the [useParams hook](https://reactrouter.com/en/main/hooks/use-params) retrieved from the [react-router-dom](https://reactrouter.com/en/main) package. + +:::note + +`react-router-dom` is available as one of the `@medusajs/admin` dependencies. You can also install it within your project using the following command: + +```bash npm2yarn +npm install react-router-dom +``` + +If you're installing it in a plugin with admin customizations, make sure to include it in `peerDependencies`. + +::: + +For example: + +```tsx title=src/admin/routes/custom/[id]/page.tsx +import { useParams } from "react-router-dom" + +const CustomPage = () => { + const { id } = useParams() + + return ( +
+ Passed ID: {id} +
+ ) +} + +export default CustomPage +``` + +### Routing Functionalities + +If you want to use routing functionalities such as linking to another page or navigating between pages, you can use `react-router-dom`'s utility hooks and functions. + +For example, to add a link to another page: + +```tsx title=src/admin/routes/custom/page.tsx +import { Link } from "react-router-dom" + +const CustomPage = () => { + + return ( +
+ + View Products + +
+ ) +} + +export default CustomPage +``` + +View [react-router-dom’s documentation](https://reactrouter.com/en/main) for other available components and hooks. + +--- + +## Styling Route + +Admin UI routes support [Tailwind CSS](https://tailwindcss.com/) by default. + +For example, to customize your custom route: + + + +```tsx title=src/admin/routes/custom/page.tsx +const CustomPage = () => { + return ( +
+ This is my custom route +
+ ) +} + +export default CustomPage +``` + +--- + +## Querying and Mutating Data + +You might need to interact with the Medusa backend from your admin route. To do so, you can utilize the [Medusa React package](../medusa-react/overview.md). It contains a collection of queries and mutation built on `@tanstack/react-query` that lets you interact with the Medusa backend. + +:::note + +Make sure to also install the Medusa React package first if you’re intending to use it, as explained in the [Medusa React guide](../medusa-react/overview.md). + +::: + +For example, you can retrieve available products and display them in your route: + +```tsx title=src/admin/routes/custom/page.tsx +import { useAdminProducts } from "medusa-react" + +const CustomPage = () => { + const { products } = useAdminProducts() + return ( +
+ {products?.map((product) => product.title)} +
+ ) +} + +export default CustomPage +``` + +You can also use `medusa-react` to interact with custom endpoints using the [createCustomAdminHooks utility function](../medusa-react/overview.md#custom-hooks). + +--- + +## See Also + +- [Admin widgets](./widgets.md) +- [Create a plugin for your admin customizations](../development/plugins/create.mdx) diff --git a/docs/content/admin/widgets.md b/docs/content/admin/widgets.md new file mode 100644 index 0000000000..53371d99d2 --- /dev/null +++ b/docs/content/admin/widgets.md @@ -0,0 +1,1283 @@ +--- +title: 'How to Create an Admin Widget' +description: 'Learn about what Admin widgets are and how you can create your own.' +addHowToData: true +badge: + variant: orange + text: beta +--- + +In this document, you will learn about what Admin widgets are and how you can create your own. + +## Overview + +Admin Widgets are custom React components that developers create to be injected into predetermined injection zones across the Medusa Admin dashboard. + +Widgets allow you to customize the admin dashboard by providing merchants with new features. For example, you can add a widget on the order details page that shows payment details retrieved from Stripe. + +This guide explains the available injection zones and how to create an admin widget. + +--- + +## Injection Zones + +Injection zones are areas in the admin that you can add widgets into. Widgets can only be added into these areas. + +There are different types of injection zones, and the type affects where the Widget is injected. For the different domains such as `product`, `order`, and `customer` there are `list` and `details` zones. + +Below is a full list of injection zones: + +:::note + +You can learn more about the additional props in the Props section. + +::: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+Injection Zone Name + +Description + +Additional Props +
+ +`order.list.before` + + + +Added at the top of the orders list page + + + +\- + +
+ +`order.list.after` + + + +Added at the bottom of the order list page + + + +\- + +
+ +`order.details.before` + + + +Added at the top of the order details page + + + +Type `OrderDetailsWidgetProps` imported from `@medusajs/admin` + + + +```ts noCopy noReport +{ + order, // Order object +} +``` + +
+ +`order.details.after` + + + +Added at the end of the order details page + + + +Type `OrderDetailsWidgetProps` imported from `@medusajs/admin` + + + +```ts noCopy noReport +{ + order, // Order object +} +``` + +
+ +`draft_order.list.before` + + + +Added at the top of the draft orders list page + + + +\- + +
+ +`draft_order.list.after` + + + +Added at the bottom of the draft orders list page + + + +\- + +
+ +`draft_order.details.before` + + + +Added at the top of the draft order details page + + + +Type `DraftOrderDetailsWidgetProps` imported from `@medusajs/admin` + + + +```ts noCopy noReport +{ + draftOrder, // DraftOrder object +} +``` + +
+ +`draft_order.details.after` + + + +Added at the bottom of the draft order details page + + + +Type `DraftOrderDetailsWidgetProps` imported from `@medusajs/admin` + + + +```ts noCopy noReport +{ + draftOrder, // DraftOrder object +} +``` + +
+ +`customer.list.before` + + + +Added at the top of the customers list page + + + +\- + +
+ +`customer.list.after` + + + +Added at the bottom of the customers list page + + + +\- + +
+ +`customer.details.before` + + + +Added at the top of the customer details page + + + +Type `CustomerDetailsWidgetProps` imported from `@medusajs/admin` + + + +```ts noCopy noReport +{ + customer, // Customer object +} +``` + +
+ +`customer.details.after` + + + +Added at the bottom of the customer details page + + + +Type `CustomerDetailsWidgetProps` imported from `@medusajs/admin` + + + +```ts noCopy noReport +{ + customer, // Customer object +} +``` + +
+ +`customer_group.list.before` + + + +Added at the top of the customer groups list page + + + +\- + +
+ +`customer_group.list.after` + + + +Added at the bottom of the customer groups list page + + + +\- + +
+ +`customer_group.details.before` + + + +Added at the top of the customer group details page + + + +Type `CustomerGroupDetailsWidgetProps` imported from `@medusajs/admin` + + + +```ts noCopy noReport +{ + customerGroup, // CustomerGroup object +} +``` + +
+ +`customer_group.details.after` + + + +Added at the bottom of the customer group details page + + + +Type `CustomerGroupDetailsWidgetProps` imported from `@medusajs/admin` + + + +```ts noCopy noReport +{ + customerGroup, // CustomerGroup object +} +``` + +
+ +`product.list.before` + + + +Added at the top of the product list page + + + +\- + +
+ +`product.list.after` + + + +Added at the bottom of the products list page + + + +\- + +
+ +`product.details.before` + + + +Added at the top of the product details page + + + +Type `ProductDetailsWidgetProps` imported from `@medusajs/admin` + + + +```ts noCopy noReport +{ + product, // Product object +} +``` + +
+ +`product.details.after` + + + +Added at the bottom of the product details page + + + +Type `ProductDetailsWidgetProps` imported from `@medusajs/admin` + + + +```ts noCopy noReport +{ + product, // Product object +} +``` + +
+ +`product_collection.list.before` + + + +Added at the top of the product collections list page + + + +\- + +
+ +`product_collection.list.after` + + + +Added at the bottom of the product collections list page + + + +\- + +
+ +`product_collection.details.before` + + + +Added at the top of the product collection details page + + + +\- + +
+ +`product_collection.details.after` + + + +Added at the bottom of the product collections list page + + + +\- + +
+ +`price_list.list.before` + + + +Added at the top of the “price list” list page + + + +\- + +
+ +`price_list.list.after` + + + +Added at the bottom of the “price list” list page + + + +\- + +
+ +`price_list.details.before` + + + +Added at the top of the “price list” details page + + + +Type `PriceListDetailsWidgetProps` imported from `@medusajs/admin` + + + +```ts noCopy noReport +{ + priceList, // PriceList object +} +``` + +
+ +`price_list.details.after` + + + +Added at the bottom of the “price list” details page + + + +Type `PriceListDetailsWidgetProps` imported from `@medusajs/admin` + + + +```ts noCopy noReport +{ + priceList, // PriceList object +} +``` + +
+ +`discount.list.before` + + + +Added at the top of the discounts list page + + + +\- + +
+ +`discount.list.after` + + + +Added at the bottom of the discounts list page + + + +\- + +
+ +`discount.details.before` + + + +Added at the top of the discounts details page + + + +Type `DiscountDetailsWidgetProps` imported from `@medusajs/admin` + + + +```ts noCopy noReport +{ + discount, // Discount object +} +``` + +
+ +`discount.details.after` + + + +Added at the bottom of the discount details page + + + +Type `DiscountDetailsWidgetProps` imported from `@medusajs/admin` + + + +```ts noCopy noReport +{ + discount, // Discount object +} +``` + +
+ +`gift_card.list.before` + + + +Added at the top of the gift cards list page + + + +\- + +
+ +`gift_card.list.after` + + + +Added at the bottom of the gift cards list page + + + +\- + +
+ +`gift_card.details.before` + + + +Added at the top of the gift card details page + + + +Type `GiftCardDetailsWidgetProps` imported from `@medusajs/admin` + + + +```ts noCopy noReport +{ + giftCard, // Product object +} +``` + +
+ +`gift_card.details.after` + + + +Added at the bottom of the gift card details page + + + +Type `GiftCardDetailsWidgetProps` imported from `@medusajs/admin` + + + +```ts noCopy noReport +{ + giftCard, // Product object +} +``` + +
+ +`custom_gift_card.before` + + + +Added at the top of the custom gift card page + + + +Type `GiftCardCustomWidgetProps` imported from `@medusajs/admin` + + + +```ts noCopy noReport +{ + giftCard, // GiftCard object +} +``` + +
+ +`custom_gift_card.after` + + + +Added at the bottom of the custom gift card page + + + +Type `GiftCardCustomWidgetProps` imported from `@medusajs/admin` + + + +```ts noCopy noReport +{ + giftCard, // GiftCard object +} +``` + +
+ +`login.before` + + + +Added before the login form + + + +\- + +
+ +`login.after` + + + +Added after the login form + + + +\- + +
+ +--- + +## Widget Requirements + +A Widget must adhere to a set of criteria that determines if it is valid for injection. These are: + +1. All widget files must be placed in the folder `/src/admin/widgets` in your backend directory. +2. A widget file must have a valid React component as its default export. +3. A widget file must export a config object of type `WidgetConfig` imported from `@medusajs/admin`. + +### WidgetConfig + +`WidgetConfig` is used to determine the configurations of the widget, mainly the injection zones. It’s an object that accepts the property `zone`, which can be a single or an array of injection zone strings. For example: + +```ts +{ + zone: "product.details.after" +} +``` + +--- + +## How to Create a Widget + +In this section, you’ll learn how to create an admin widget. + +### Prerequisites + +It’s assumed you already have a Medusa backend with the admin plugin installed before you move forward with this guide. If not, you can follow [this documentation page](../create-medusa-app.mdx) to install a Medusa project. + +Furthermore, Admin Widgets are currently available as a beta feature. So, you must install the `beta` version of the `@medusajs/admin` and `@medusajs/medusa` packages: + +```bash npm2yarn +npm install @medusajs/admin@beta @medusajs/medusa@beta +``` + +### (Optional) TypeScript Preparations + +Since Widgets are React components, they should be written in `.tsx` or `.jsx` files. If you’re using Typescript, you need to make some adjustments to avoid Typescript errors in your Admin files. + +This section provides recommended configurations to avoid any TypeScript errors. + +:::note + +These changes may already be available in your Medusa project. They're included here for reference purposes. + +::: + +First, update your `tsconfig.json` with the following configurations: + +```json title=tsconfig.json +{ + "compilerOptions": { + "target": "es2019", + "module": "commonjs", + "allowJs": true, + "checkJs": false, + "jsx": "react-jsx", + "declaration": true, + "outDir": "./dist", + "rootDir": "./src", + "experimentalDecorators": true, + "emitDecoratorMetadata": true, + "noEmit": false, + "strict": false, + "moduleResolution": "node", + "esModuleInterop": true, + "resolveJsonModule": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true + }, + "include": ["src/"], + "exclude": [ + "dist", + "build", + ".cache", + "tests", + "**/*.spec.js", + "**/*.spec.ts", + "node_modules", + ".eslintrc.js" + ] +} +``` + +The important changes to note here are the inclusion of the field `"jsx": "react-jsx"` and the addition of `"build"` and `“.cache”` to `exclude`. + +The addition of `"jsx": "react-jsx"` specified how should TypeScript transform JSX, and excluding `build` and `.cache` ensures that TypeScript ignores build and development files. + +Next, create the file `tsconfig.server.json` with the following content: + +```json title=tsconfig.server.json +{ + "extends": "./tsconfig.json", + "compilerOptions": { + /* Emit a single file with source maps instead of having a separate file. */ + "inlineSourceMap": true + }, + "exclude": ["src/admin", "**/*.spec.js"] +} +``` + +This is the configuration that will be used to transpile your custom backend code, such as services or entities. The important part is that it excludes `src/admin` as that is where your Admin code will live. + +Finally, create the file `tsconfig.admin.json` with the following content: + +```json title=tsconfig.admin.json +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "module": "esnext" + }, + "include": ["src/admin"], + "exclude": ["**/*.spec.js"] +} +``` + +This is the configuration that will be used when transpiling your admin code. + +### (Optional) Update Scripts in package.json + +You can optionally update the following scripts in `package.json` to make your development process easier: + +```json title=package.json +{ + // ... + "scripts": { + "clean": "cross-env ./node_modules/.bin/rimraf dist", + "build": "cross-env npm run clean && npm run build:server && npm run build:admin", + "build:server": "cross-env npm run clean && tsc -p tsconfig.server.json", + "build:admin": "cross-env medusa-admin build", + "watch": "cross-env tsc --watch", + "test": "cross-env jest", + "seed": "cross-env medusa seed -f ./data/seed.json", + "start": "cross-env npm run build && medusa start", + "start:custom": "cross-env npm run build && node --preserve-symlinks index.js", + "dev": "cross-env npm run build:server && medusa develop" + }, + // ... +} +``` + +:::note + +If you have `autoRebuild` enabled in the options of `@medusajs/admin`, you shouldn’t include `npm run build:admin` in the `build` script. It will lead to the admin being built twice during development. + +::: + +### Create the Admin Widget + +To create a new admin widget, start by creating the folder `src/admin/widgets`. This is where your widgets must be located, as explained in the Widgets Requirements section. + +Then, create the file `src/admin/widgets/product-widget.tsx` with the following content: + +```tsx title=src/admin/widgets/product-widget.tsx +import type { WidgetConfig } from "@medusajs/admin" + +const ProductWidget = () => { + return ( +
+

Product Widget

+
+ ) +} + +export const config: WidgetConfig = { + zone: "product.details.after", +} + +export default ProductWidget +``` + +This file creates a React Component `ProductWidget` which renders an H1 header. This React Component is the default export in the file, which is one of the Widgets Requirements. + +You also export the object `config` of type `WidgetConfig`, which is another widget requirement. It indicates that the widget must be injected in the `product.details.after` zone. + +To test out your widget, run the following command in the root backend directory: + +```bash +npx @medusajs/medusa-cli@latest develop +``` + +This command will build your backend and admin, then runs the backend. + +Open `localhost:7001` in your browser and log in. Then, go to the details page of any product. You should now see your widget at the bottom of the page. + +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: + + + +```tsx title=src/admin/widgets/product-widget.tsx +import type { + WidgetConfig, +} from "@medusajs/admin" + +const ProductWidget = () => { + return ( +
+

Product Widget

+
+ ) +} + +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: + +- `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. + +In addition, some injection zones provide additional props specific to the context of the page. For example, widgets in the `product.details.after` zone will also receive a `product` prop, which is an object holding the data of the product being viewed. + +You can learn about what additional props each injection zone may receive in the Injection Zone section. + +For example, you can modify the widget you created to show the title of the product: + + + +```tsx title=src/admin/widgets/product-widget.tsx +import type { + WidgetConfig, + ProductDetailsWidgetProps, +} from "@medusajs/admin" + +const ProductWidget = ({ + product, + notify, +}: ProductDetailsWidgetProps) => { + return ( +
+

Product Widget {product.title}

+ +
+ ) +} + +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. + +:::note + +`react-router-dom` is available as one of the `@medusajs/admin` dependencies. You can also install it within your project using the following command: + +```bash npm2yarn +npm install react-router-dom +``` + +If you're installing it in a plugin with admin customizations, make sure to include it in `peerDependencies`. + +::: + +For example: + + + +```tsx title=src/admin/widgets/product-widget.tsx +import type { WidgetConfig } from "@medusajs/admin" +import { Link } from "react-router-dom" + +const ProductWidget = () => { + return ( +
+

Product Widget

+ + View Orders + +
+ ) +} + +export const config: WidgetConfig = { + zone: "product.details.after", +} + +export default ProductWidget +``` + +View [react-router-dom’s documentation](https://reactrouter.com/en/main) for other available components and hooks. + +### 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. + +:::note + +Make sure to also install the Medusa React package first if you’re intending to use it, as explained in the [Medusa React guide](../medusa-react/overview.md). + +::: + +For example, you can modify the widget you created to retrieve the tags of a product from the Medusa backend: + + + +```tsx title=src/admin/widgets/product-widget.tsx +import type { ProductDetailsWidgetProps, WidgetConfig } from "@medusajs/admin" +import { useAdminProductTags } from "medusa-react" + +const ProductWidget = ({ product }: ProductDetailsWidgetProps) => { + const { product_tags } = useAdminProductTags({ + id: product.tags.map((tag) => tag.id), + limit: 10, + offset: 0, + }) + + return ( +
+

Product Tags

+
+ {product_tags?.map((tag) => ( + + {tag.value} + + ))} +
+
+ ) +} + +export const config: WidgetConfig = { + zone: "product.details.after", +} + +export default ProductWidget +``` + +You can also use `medusa-react` to interact with custom endpoints using the [createCustomAdminHooks utility function](../medusa-react/overview.md#custom-hooks). + +--- + +## See Also + +- [How to create admin UI routes](./routes.md) +- [Create a plugin for your admin customizations](../development/plugins/create.mdx) diff --git a/docs/content/cli/reference.mdx b/docs/content/cli/reference.mdx index e5141807ac..278d51a884 100644 --- a/docs/content/cli/reference.mdx +++ b/docs/content/cli/reference.mdx @@ -204,9 +204,10 @@ medusa user --email [--password ] | Name | Description | | --- | --- | -| `-e`, `--email` | The email to create a user with. (required) | -| `-p`, `--password` | The password to use with the user. If not included, the user will not have a password. | -| `-i`, `--id` | The user’s ID. By default it is automatically generated. | +| `-e `, `--email ` | The email to create a user with. (required) | +| `-p `, `--password ` | The password to use with the user. If not included, the user will not have a password. | +| `-i `, `--id ` | The user’s ID. By default it is automatically generated. | +| `--invite` | Whether to create an invite instead of a user. When using this option, you don't need to specify a password. If ran successfully, you'll receive the invite token in the output. | ### telemetry diff --git a/docs/content/create-medusa-app.mdx b/docs/content/create-medusa-app.mdx index 75cb2f1492..d6ca4519ea 100644 --- a/docs/content/create-medusa-app.mdx +++ b/docs/content/create-medusa-app.mdx @@ -6,7 +6,7 @@ addHowToData: true import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import Feedback from '@site/src/components/Feedback'; -import DocCardList from '@theme/DocCardList'; +import DocCard from '@theme/DocCard'; import Icons from '@theme/Icon'; import Troubleshooting from '@site/src/components/Troubleshooting' import TypeErrorSection from "./troubleshooting/create-medusa-app-errors/_typeerror.md" @@ -17,13 +17,22 @@ import FreshInstallationSection from './troubleshooting/awilix-resolution-error/ # Install Medusa with create-medusa-app -In this document, you’ll learn how to use create-medusa-app to set up a Medusa backend. +In this document, you’ll learn how to use create-medusa-app to set up a Medusa backend and an admin dashboard. ## Overview Medusa is a toolkit for developers to create digital commerce applications. In its simplest form, Medusa is a Node.js backend with the core API, plugins, and modules installed through npm. -`create-medusa-app` is a command that facilitates creating a Medusa ecosystem. It installs the Medusa backend, along with the necessary configurations to run the backend. +`create-medusa-app` is a command that facilitates creating a Medusa ecosystem. It installs the Medusa backend and admin dashboard, along with the necessary configurations to run the backend. + +:::note + +`create-medusa-app` uses a beta version of the admin dashboard. If you want to use a stable Medusa setup, you can install the stable backend and the admin using the following guides: + +1. [Install Medusa backend](./development/backend/install.mdx) +2. [Install admin package](./admin/quickstart.mdx) + +::: --- @@ -75,7 +84,8 @@ In your terminal, run the following command: Available Options - `--repo-url `: The repository URL to create the project from. By default it will be `https://github.com/medusajs/medusa-starter-default`. - - `--no-boilerplate`: A flag that removes all files added for an enhanced onboarding experience (files under `src/api`, etc...). This is helpful if you want to create a clean project, and is only recommended if you're familiar with Medusa. + - `--seed`: A flag indicating whether the database should be seeded with demo data. By default, seeding is disabled. + - `--no-boilerplate`: A flag that removes all files added for an enhanced onboarding experience (files under `src/admin`, `src/api`, etc...). This is helpful if you want to create a clean project, and is only recommended if you're familiar with Medusa. @@ -89,7 +99,11 @@ By default, this command will try to use the default PostgreSQL credentials to c These credentials will be used to create a database during this setup and configure your Medusa backend to connect to that database. -### Step 3: Wait for Project Setup +### Step 3: Enter an admin email + +You'll then be prompted to enter an admin email for your admin user. You'll be using this admin email later to login to your admin dashboard. You can use the default `admin@medusa-test.com` or enter any other email. + +### Step 4: Wait for Project Setup After the above steps, the project setup will start which includes: @@ -97,17 +111,14 @@ After the above steps, the project setup will start which includes: 2. Creating the project database. 3. Installing dependencies in your project directory. 4. Building project and running migrations to migrate the Medusa schema into your project database. -5. Seed the database +5. Create the admin user. +6. Seeding the database with demo data. -### Step 4: Test it Out +### Step 5: Log into admin dashboard -Once the installation is finished, the Medusa backend will be started automatically. You can test it out by either opening the URL `localhost:9000/store/products` in your browser or using cURL: +Once the project is prepared, the Medusa backend will start and the admin dashboard will be opened in your default browser. You'll then be asked to enter a password for the admin email you entered earlier, as well as other account information. -```bash -cURL localhost:9000/store/products -``` - -This endpoint returns an array of available products in your Medusa backend. +Once you're logged in, you can start using Medusa! Try following the setup guide to create your first product and order. +}} /> --- diff --git a/docs/content/deployments/storefront/deploying-gatsby-on-netlify.md b/docs/content/deployments/storefront/deploying-gatsby-on-netlify.md deleted file mode 100644 index 7b48939edd..0000000000 --- a/docs/content/deployments/storefront/deploying-gatsby-on-netlify.md +++ /dev/null @@ -1,334 +0,0 @@ ---- -description: 'Learn step-by-step.' -addHowToData: true ---- - -# Deploy Gatsby Storefront on Netlify - -:::note - -The Gatsby storefront has been deprecated and it's not recommended to use it moving forward. You can use the [Next.js storefront](../../starters/nextjs-medusa-starter.mdx) instead or build your own. - -::: - -In this document, you’ll learn how to deploy the Gatsby Storefront on [Netlify](https://www.netlify.com/). - -Alternatively, you can use this button to deploy the Gatsby Storefront to Netlify directly: - - - Deploy to Netlify - - ---- - -## Prerequisites - -### Medusa Components - -Before proceeding with this documentation, it is assumed you already have the Gatsby storefront installed locally. - -Additionally, this documentation does not cover how to deploy the Medusa backend. If you want to deploy the Medusa backend, [check out one of the deployment documentation related to the Medusa backend](../server/index.mdx). - -### Needed Accounts - -- A [Netlify](https://app.netlify.com/signup) account to deploy the Gatsby storefront. -- A [GitHub](https://github.com/signup) account where you will host the repository for the Gatsby storefront. - -:::tip - -If you want to use another Git Provider, it’s possible to follow along with this guide but you’ll have to perform the equivalent steps in your Git Provider. - -::: - -### Required Tools - -- Git’s CLI tool. You can follow [this documentation to learn how to install it for your operating system](../../development/backend/prepare-environment.mdx#git). - ---- - -## Create GitHub Repository - -Before you can deploy your Gatsby storefront you need to create a GitHub repository and push the code base to it. - -On GitHub, click the plus icon at the top right, then click New Repository. - -![Create Repository](https://res.cloudinary.com/dza7lstvk/image/upload/v1668001782/Medusa%20Docs/Netlify/0YlxBRi_aiywpo.png) - -You’ll then be redirected to a new page with a form. In the form, enter the Repository Name then scroll down and click Create repository. - -![Repository Form](https://res.cloudinary.com/dza7lstvk/image/upload/v1668001800/Medusa%20Docs/Netlify/YPYXAF2_lypjne.png) - -### Push Code to GitHub Repository - -The next step is to push the code to the GitHub repository you just created. - -After creating the repository, you’ll be redirected to the repository’s page. On that page, you should see a URL that you can copy to connect your repository to a local directory. - -![GitHub Repository URL](https://res.cloudinary.com/dza7lstvk/image/upload/v1668001818/Medusa%20Docs/Netlify/pHfSTuT_w544lr.png) - -Copy the link. Then, open your terminal in the directory that holds your Gatsby storefront codebase and run the following commands: - -```bash -git init -git remote add origin -``` - -Where `` is the URL you just copied. - -Then, add, commit, and push the changes into the repository: - -```bash -git add . -git commit -m "initial commit" -git push origin master -``` - -After pushing the changes, you can find the files in your GitHub repository. - ---- - -## Deploy to Netlify - -This section covers how to deploy Netlify either through the Netlify website or using Netlify’s CLI tool. - -### Option 1: Using Netlify’s Website - -After logging in with Netlify, go to the [dashboard](https://app.netlify.com/). Then, at the top right of the “Sites” section, click on “Add new site”, then click on “Import an existing project” from the dropdown. - -:::note - -Alternatively, if you don’t have any other websites, you’ll see a big button that says “Import an existing project”. - -::: - -![Create a new website](https://res.cloudinary.com/dza7lstvk/image/upload/v1668001840/Medusa%20Docs/Netlify/IUUOzoW_mw9u5w.png) - -You’ll then be asked to connect to a Git provider. - -![Connect Git Provider](https://res.cloudinary.com/dza7lstvk/image/upload/v1668001855/Medusa%20Docs/Netlify/T6lZPDi_rvcuyf.png) - -Choose GitHub. You’ll then be redirected to GitHub’s website to give Netlify permissions if you haven’t done that before. - -After you authorize Netlify to use GitHub, you’ll be asked to pick the repository you want to deploy. Pick the repository you just created. - -![Choose Repository](https://res.cloudinary.com/dza7lstvk/image/upload/v1668003038/Medusa%20Docs/Netlify/SRI3r1Y_hqwy8r.png) - -In the form that shows, keep all fields the same and click on the “Show advanced” button before the “Deploy site” button. - -![Show advanced Button](https://res.cloudinary.com/dza7lstvk/image/upload/v1668001884/Medusa%20Docs/Netlify/nUdwRbq_d2kmo6.png) - -Under the “Advanced build settings” section click on the “New variable” button. This will show two inputs for the key and value of the environment variable. - -For the first field enter the key `GATSBY_MEDUSA_BACKEND_URL` and for the value enter the URL of your Medusa backend. - -:::caution - -If you haven’t deployed your Medusa backend yet, you can leave the value blank for now and add it later. However, the build process for the Gatsby storefront will fail. - -::: - -![Environment Variable](https://res.cloudinary.com/dza7lstvk/image/upload/v1668001898/Medusa%20Docs/Netlify/DnutZfT_rv8iel.png) - -:::note - -If you use more environment variables in your storefront be sure to add them here. - -::: - -Once you’re done, scroll down and click on Deploy site. - -You’ll be then redirected to the dashboard of the new website. Netlify will build your website in the background. You should see “Site deploy in progress” on the top card. - -![Site Deployment Progress](https://res.cloudinary.com/dza7lstvk/image/upload/v1668003051/Medusa%20Docs/Netlify/PUDjjnL_hwuywi.png) - -The deployment can take a few minutes. - -Once the deployment is done, you’ll find the URL in the place of the “Site deploy in progress” message you saw earlier. - -:::tip - -If you haven’t added any products to your Medusa backend, the build process might fail. It’s recommended to add some products to the backend first in that case. - -Alternatively, you can seed the backend with demo data by running this command in the root directory of the backend: - -```bash noReport -npx @medusajs/medusa-cli seed -f data/seed.json -``` - -::: - -![Deployment Complete](https://res.cloudinary.com/dza7lstvk/image/upload/v1668003068/Medusa%20Docs/Netlify/dPF9HvF_ibnoo1.png) - -If you click on it, you’ll be redirected to the deployed storefront website. - -![Gatsby Storefront](https://res.cloudinary.com/dza7lstvk/image/upload/v1668003076/Medusa%20Docs/Netlify/l08cBSA_eanbne.png) - -:::caution - -At this point, you will face errors related to Cross-Origin Resource Sharing (CORS) while using the storefront. Before you start using the storefront, follow along the [Configure CORS on the Medusa Backend section](#configure-cors-variable-on-the-medusa-backend). - -::: - -### Option 2: Using Netlify’s CLI Tool - -In this section, you’ll deploy the Gatsby storefront using Netlify’s CLI tool. - -#### Install the Netlify CLI tool - -If you don’t have the tool installed, run the following command to install it: - -```bash -npm install netlify-cli -g -``` - -#### Login to Netlify - -Then, run the following command to log in to Netlify in your terminal: - -```bash -netlify login -``` - -This opens a page to log in on your browser. You’ll be asked to authorize the Netlify CLI tool. - -![Authorize Application](https://res.cloudinary.com/dza7lstvk/image/upload/v1668001985/Medusa%20Docs/Netlify/JDUdqSE_dzveww.png) - -Click on Authorize. Then, you can go back to your terminal and see that you’ve successfully logged in. - -![Authorized Message](https://res.cloudinary.com/dza7lstvk/image/upload/v1668001998/Medusa%20Docs/Netlify/L13Yqhp_e2ejpx.png) - -#### Initialize Netlify Website - -In your terminal, run the following command: - -```bash -netlify init -``` - -You’ll have to follow five steps for the initialization: - -##### Step 1: Create Netlify Website - -You’ll be asked to either connect to an existing Netlify website or create a new one. Choose the second option to create a new site: - -```bash noReport -? What would you like to do? - ⇄ Connect this directory to an existing Netlify site -❯ + Create & configure a new site -``` - -##### Step 2: Choose Netlify Team - -Choose the team you want to create the website in if you have multiple teams. - -##### Step 3: Enter Site Name - -You’ll be asked to optionally enter a site name. - -##### Step 4: Configure Webhooks and Deployment Keys - -At this point, the website is created on Netlify. However, Netlify needs to configure Webhooks and deployment keys. You’ll be asked to either authorize GitHub through Netlify’s website or through a personal access token. You’re free to choose either: - -```bash noReport -? Netlify CLI needs access to your GitHub account to configure Webhooks and Depl -oy Keys. What would you like to do? (Use arrow keys) -❯ Authorize with GitHub through app.netlify.com - Authorize with a GitHub personal access token -``` - -If you pick the first option, a page in your browser will open where you have to grant authorization to your Git provider. - -If you pick the second option, you’ll need to create a personal access token on GitHub. You can follow [this guide in GitHub’s documentation](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token) to learn how to do it. - -##### Last Step: Steps with Default Values - -For the rest of the steps, you can keep the default values provided by Netlify and press the “Enter” key on your keyboard for each. - -#### Set Environment Variables - -After the previous command has finished running, your Netlify website will be created. The next step is to add an environment variable that points to your Medusa backend. - -:::caution - -If you haven’t deployed your Medusa backend yet, you can leave the value blank for now and add it later. However, the build process for the Gatsby storefront will fail. - -::: - -Run the following command to add the environment variable: - -```bash -netlify env:set GATSBY_MEDUSA_BACKEND_URL "" -``` - -Where `` is the URL of your Medusa backend. - -:::note - -If you use more environment variables in your storefront be sure to add them here. - -::: - -#### Check deployment status - -You can check the deployment status of your website by running the following command: - -```bash -netlify watch -``` - -After the deployment has been completed, you should see a message saying “Deploy complete” with URLs to your website. - -:::tip - -If you haven’t added any products to your Medusa backend, the build process might fail. It’s recommended to add some products to the backend first in that case. - -Alternatively, you can seed the backend with demo data by running this command in the root directory of the backend: - -```bash noReport -npx @medusajs/medusa-cli seed -f data/seed.json -``` - -::: - -#### Open the Gatsby storefront Website - -To open the Gatsby storefront website, either use the URL shown to you or run the following command: - -```bash -netlify open:site -``` - -The Gatsby storefront will then open in your browser. - -![Gatsby Storefront](https://res.cloudinary.com/dza7lstvk/image/upload/v1668003089/Medusa%20Docs/Netlify/l08cBSA_yfj2rz.png) - -Before you can use the Gatsby storefront, you must add the URL as an environment variable on your deployed Medusa backend. - ---- - -## Configure CORS Variable on the Medusa Backend - -To send requests to the Medusa backend from the Gatsby storefront, you must set the `STORE_CORS` environment variable on your backend to the Gatsby storefront’s URL. - -:::caution - -If you want to set a custom domain to your Gatsby storefront website on Netlify, make sure to do it before this step. You can refer to this guide on [Netlify’s documentation to learn how to add a custom domain](https://docs.netlify.com/domains-https/custom-domains/#assign-a-domain-to-a-site). - -::: - -On your Medusa backend, add the following environment variable: - -```bash -STORE_CORS= -``` - -Where `` is the URL of your Gatsby storefront that you just deployed. - -Then, restart your Medusa backend. Once the backend is running again, you can use your Gatsby storefront. - ---- - -## See Also - -- [Deploy the Medusa Admin](../admin/index.mdx) -- [Configure your Medusa backend](../../development/backend/configurations.md) diff --git a/docs/content/development/file-service/create-file-service.md b/docs/content/development/file-service/create-file-service.md index a2175cdceb..39105e915f 100644 --- a/docs/content/development/file-service/create-file-service.md +++ b/docs/content/development/file-service/create-file-service.md @@ -431,4 +431,4 @@ export default () => { ## See Also - [How to create a plugin](../plugins/create.mdx) -- [How to publish a plugin](../plugins/publish.md) +- [How to publish a plugin](../plugins/publish.mdx) diff --git a/docs/content/development/plugins/create.mdx b/docs/content/development/plugins/create.mdx index 8607a5530c..14b1e22170 100644 --- a/docs/content/development/plugins/create.mdx +++ b/docs/content/development/plugins/create.mdx @@ -124,11 +124,123 @@ The `watch` command outputs the files in the destination specified in the value ::: +### Changes for Admin Plugins + +:::note + +Admin customizations are currently in beta and require you to use the `beta` version of `@medusajs/admin` and `@medusajs/medusa`. You can install it with the following command: + +```bash npm2yarn +npm install @medusajs/admin@beta @medusajs/medusa@beta +``` + +::: + +If your plugin contains customizations to the admin dashboard, it's recommended to create different `tsconfig` files for backend and admin customizations, then modify the scripts in `package.json` to handle building backend and admin customizations separately. + +:::note + +These changes may already be available in your Medusa project. They're included here for reference purposes. + +::: + +Start by updating your `tsconfig.json` with the following configurations: + +```json title=tsconfig.json +{ + "compilerOptions": { + "target": "es2019", + "module": "commonjs", + "allowJs": true, + "checkJs": false, + "jsx": "react-jsx", + "declaration": true, + "outDir": "./dist", + "rootDir": "./src", + "experimentalDecorators": true, + "emitDecoratorMetadata": true, + "noEmit": false, + "strict": false, + "moduleResolution": "node", + "esModuleInterop": true, + "resolveJsonModule": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true + }, + "include": ["src/"], + "exclude": [ + "dist", + "build", + ".cache", + "tests", + "**/*.spec.js", + "**/*.spec.ts", + "node_modules", + ".eslintrc.js" + ] +} +``` + +The important changes to note here are the inclusion of the field `"jsx": "react-jsx"` and the addition of `"build"` and `“.cache”` to `exclude`. + +The addition of `"jsx": "react-jsx"` specified how should TypeScript transform JSX, and excluding `build` and `.cache` ensures that TypeScript ignores build and development files. + +Next, create the file `tsconfig.server.json` with the following content: + +```json title=tsconfig.server.json +{ + "extends": "./tsconfig.json", + "compilerOptions": { + /* Emit a single file with source maps instead of having a separate file. */ + "inlineSourceMap": true + }, + "exclude": ["src/admin", "**/*.spec.js"] +} +``` + +This is the configuration that will be used to transpile your custom backend code, such as services or entities. The important part is that it excludes `src/admin` as that is where your Admin code will live. + +Then, create the file `tsconfig.admin.json` with the following content: + +```json title=tsconfig.admin.json +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "module": "esnext" + }, + "include": ["src/admin"], + "exclude": ["**/*.spec.js"] +} +``` + +This is the configuration that will be used when transpiling your admin code. + +Finally, update the `build` script in your project: + +```json title=package.json +"scripts": { + // other scripts... + "build": "tsc -p ./tsconfig.server.json && medusa-admin bundle" +} +``` + +This `build` script builds the backend customizations, then bundles the admin plugin using `medusa-admin bundle`. + +Furthermore, make sure to add `react` to `peerDependencies` along with `react-router-dom` if you're using it: + +```json title=package.json +"peerDependencies": { + // other dependencies... + "react": "^18.2.0", + "react-router-dom": "^6.13.0" +} +``` + --- ## Develop your Plugin -Now, You can start developing your plugin. This can include adding services, endpoints, entities, or anything that's relevant to your plugin. +Now, You can start developing your plugin. This can include adding services, endpoints, entities, admin customizations, or anything that's relevant to your plugin. ### Plugin Structure @@ -185,6 +297,32 @@ This guide doesn't cover how to create different files and components. If you’ description: 'Learn how to create a subscriber.' } }, + { + type: 'link', + href: '/admin/widgets', + label: 'Create an Admin Widget', + customProps: { + icon: Icons['academic-cap-solid'], + description: 'Learn how to create an admin widget.', + badge: { + variant: 'orange', + children: 'Beta' + } + } + }, + { + type: 'link', + href: '/admin/routes', + label: 'Create an Admin UI Route', + customProps: { + icon: Icons['academic-cap-solid'], + description: 'Learn how to create an admin UI route.', + badge: { + variant: 'orange', + children: 'Beta' + } + } + }, ]} /> If you're developing something specific, such as a payment processor plugin, you can follow one of the following guides to learn how to create different services within your plugin. @@ -299,6 +437,49 @@ Make sure to include in the README of your plugin the configurations that can be ::: +### enableUI Plugin Option + +All plugins accept an option named `enableUI`. This option is useful mainly if your plugin contains admin customizations. It allows users to enable or disable admin customizations in the admin dashboard. + +You can pass the `enableUI` option to plugins as follows: + +```js title=medusa-config.js +const plugins = [ + // ... + { + resolve: `medusa-plugin-custom`, + options: { + // other options + enableUI: true, + }, + }, +] +``` + +If you're passing your plugin options to third-party services, make sure to omit it from the plugin options you receive in your resources, such as services. The `enableUI` option will always be passed as part of your plugin options. + +For example: + +```js title=src/service/test.ts + // In a service in your plugin +class MyService extends TransactionBaseService { + constructor(container, options) { + super(container) + // options contains plugin configurations + const { enableUI, ...otherOptions } = options + // pass otherOptions to a third-party service + const client = new Client(otherOptions) + } + // ... +} +``` + +:::note + +Since admin customizations are still in `beta` mode, `enableUI`'s default value is `false` if not provided by the plugin users. This means that it must be enabled manually in a plugin's configuration for the customizations to appear in the admin dashboard. Once the admin customizations are out of beta, this behavior will be reversed. + +::: + --- ## Test Your Plugin @@ -413,4 +594,4 @@ It is safe to ignore any `cross-env: command not found` error you may receive. Once you're done with the development of the plugin, you can publish it to NPM so that other Medusa developers and users can use it. -Please refer to [this guide on required steps to publish a plugin](./publish.md). +Please refer to [this guide on required steps to publish a plugin](./publish.mdx). diff --git a/docs/content/development/plugins/overview.mdx b/docs/content/development/plugins/overview.mdx index 5c31d28114..c2dbc8349e 100644 --- a/docs/content/development/plugins/overview.mdx +++ b/docs/content/development/plugins/overview.mdx @@ -21,6 +21,8 @@ An alternative approach is developing a custom way of handling payment on your e Plugins run within the same process as the core Medusa backend eliminating the need for extra backend capacity, infrastructure, and maintenance. As a result, plugins can use all other services as dependencies and access the database. +Plugins can contain customizations to the Medusa backend or the admin dashboard. + --- ## Using Existing Plugins @@ -41,6 +43,8 @@ You can find community plugins by [searching NPM for the `medusa` or `medusa-plu You can also check the [Awesome Medusa repository](https://github.com/adrien2p/awesome-medusajs#plugins) for a list of community plugins among other resources. +--- + ## How to Install a Plugin To install an existing plugin, in your Medusa backend run the following command: @@ -57,6 +61,31 @@ If you’re installing an official plugin from the Medusa repository, you can fi For community plugins, please refer to the installation instructions of that plugin to learn about any required configurations. +### enableUI Plugin Option + +All plugins accept an option named `enableUI`. This option allows you to disable admin customizations from appearing in the admin dashboard. + +:::note + +Since admin customizations are still in `beta` mode, `enableUI`'s default value is `false` if not provided by the plugin users. This means that it must be enabled manually in a plugin's configuration for the customizations to appear in the admin dashboard. Once the admin customizations are out of beta, this behavior will be reversed. + +::: + +You can set the `enableUI` value by passing it as part of the plugin's configurations: + +```js title=medusa-config.js +const plugins = [ + // ... + { + resolve: `medusa-plugin-custom`, + options: { + // other options + enableUI: true, + }, + }, +] +``` + --- ## Custom Development diff --git a/docs/content/development/plugins/publish.md b/docs/content/development/plugins/publish.mdx similarity index 69% rename from docs/content/development/plugins/publish.md rename to docs/content/development/plugins/publish.mdx index cc294a159a..c48805e070 100644 --- a/docs/content/development/plugins/publish.md +++ b/docs/content/development/plugins/publish.mdx @@ -3,6 +3,9 @@ description: 'Learn how to publish a Medusa plugin to NPM. This guide lists some addHowToData: true --- +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + # How to Publish a Plugin In this document, you'll learn how to publish a Medusa plugin to NPM and what are some requirements to keep in mind before publishing. Afterwards, your plugin will be published on the [Medusa Plugins page](https://medusajs.com/plugins/). @@ -35,26 +38,63 @@ Before publishing your plugin, make sure you've set the following fields in your - `medusa-plugin-storage`: For plugins that add a file service or storage integration. - `medusa-plugin-source`: For plugins that help migrate or import data into Medusa from another platform. - `medusa-plugin-storefront`: For storefronts that can be integrated with a Medusa backend. + - `medusa-plugin-admin`: For plugins that include only admin customizations. - `medusa-plugin-other`: For any other type of plugin. ### Scripts in package.json -Make sure you add the `publish` command to your `scripts` field and make the following change to the `build` command: + + -```json title=package.json -"build": "babel src --out-dir . --ignore **/__tests__ --extensions \".ts,.js\"", -"prepare": "cross-env NODE_ENV=production npm run build" -``` + Make sure you add the `publish` command to your `scripts` field and make the following change to the `build` command: -The `build` command ensures that the plugin's built files are placed as explained in the [plugin structure](./create.mdx#plugin-structure) section of the Create Plugin documentation. + ```json title=package.json + "scripts": { + // other scripts... + "build": "cross-env npm run clean && tsc", + "prepare": "cross-env NODE_ENV=production npm run build" + } + ``` -The `prepare` command facilitates your publishing process. You would typically run this script before publishing your plugin. + The `build` command ensures that the plugin's built files are placed as explained in the [plugin structure](./create.mdx#plugin-structure) section of the Create Plugin documentation. -This new script requires installing the package `cross-env` as a development dependency: + The `prepare` command facilitates your publishing process. You would typically run this script before publishing your plugin. -```bash npm2yarn -npm install --save-dev cross-env -``` + This new script requires installing the package `cross-env` as a development dependency: + + ```bash npm2yarn + npm install --save-dev cross-env + ``` + + + + + First, make sure to change `tsconfig` files as recommended in the [create guide](./create.mdx#changes-for-admin-plugins). + + Then, add the `publish` command to your `scripts` field and make the following change to the `build` command: + + ```json title=package.json + "scripts": { + // other scripts... + "build": "tsc -p ./tsconfig.server.json && medusa-admin bundle", + "prepare": "cross-env NODE_ENV=production npm run build" + } + ``` + + The `build` command ensures that the plugin's built files are placed as explained in the [plugin structure](./create.mdx#plugin-structure) section of the Create Plugin documentation, and bundles the admin customizations. + + The `prepare` command facilitates your publishing process. You would typically run this script before publishing your plugin. + + This new script requires installing the package `cross-env` as a development dependency: + + ```bash npm2yarn + npm install --save-dev cross-env + ``` + + + + +### ### Plugin Structure @@ -83,6 +123,8 @@ src .eslintrc .babelrc .prettierrc +build +.cache # These are files that are included in a # Medusa project and can be removed from a diff --git a/docs/content/development/search/create.md b/docs/content/development/search/create.md index cf7913e855..fb0cef6131 100644 --- a/docs/content/development/search/create.md +++ b/docs/content/development/search/create.md @@ -413,4 +413,4 @@ You can then send a request to the [Search Products endpoint](/api/store#tag/Pro ## See Also - [How to create a plugin](../plugins/create.mdx) -- [How to publish a plugin](../plugins/publish.md) +- [How to publish a plugin](../plugins/publish.mdx) diff --git a/docs/content/homepage.mdx b/docs/content/homepage.mdx index 141111a14b..b6535490b7 100644 --- a/docs/content/homepage.mdx +++ b/docs/content/homepage.mdx @@ -162,40 +162,40 @@ Learn about all the new features and enhancements in Medusa. -If you’re still not sure that Medusa is the right solution for you, you can get in-touch with the core Medusa team over at [Discord](https://discord.gg/medusajs) and get help from the community. \ No newline at end of file +If you’re still not sure that Medusa is the right solution for you, you can get in-touch with the core Medusa team over at [Discord](https://discord.gg/medusajs) and get help from the community. diff --git a/docs/content/medusa-react/overview.md b/docs/content/medusa-react/overview.md index cd9e44c818..1121704e6c 100644 --- a/docs/content/medusa-react/overview.md +++ b/docs/content/medusa-react/overview.md @@ -188,6 +188,95 @@ Instead of using `mutate`, you can use `mutateAsync` to receive a Promise that r Learn more about how you can use mutations in [Tanstack Query’s documentation](https://tanstack.com/query/v4/docs/react/guides/mutations). +### Custom Hooks + +Medusa React provides a utility function `createCustomAdminHooks` that allows developers to consume their admin custom endpoints using the same Medusa React methods and conventions. It returns custom mutation and query hooks that you can use to retrieve and manipulate data using your custom endpoints. This utility function is useful when customizing the admin with widgets. + +```ts +import { createCustomAdminHooks } from "medusa-react" + +const { + useAdminEntity, + useAdminEntities, + useAdminCreateMutation, + useAdminUpdateMutation, + useAdminDeleteMutation, +} = createCustomAdminHooks( + `/vendors`, + "vendors", + { product: true } +) +``` + +It accepts the following parameters: + +1. `path`: (required) the first parameter is a string that indicates the base path to the custom endpoint. For example, if you have custom endpoints that begin with `/admin/vendors`, the value of this parameter would be `vendors`. The `/admin` prefix will be added automatically. +2. `queryKey`: (required) the second parameter is a string used to generate query keys for all `GET` hooks, which is used by Tanstack Query for caching. When a mutation related to this same key succeeds, the key will be automatically invalidated. +3. `relatedDomains`: (optional) the third parameter is an object that can be used to specify domains related to this custom hook. This will ensure that Tanstack Query invalides the keys for those domains when your custom mutations succeed. For example, if your custom endpoint is related to products, you can pass `{ product: true }` as the value of this parameter. Then, when you use your custom mutation and it succeeds, the product's key `adminProductKeys.all` will be invalidated automatically, and all products will be re-fetched. + +:::note + +While the mechanism implemented using the `relatedDomains` parameter may seem a bit excessive, Tanstack Query is smart enough to only re-fetch the queries that are currently active. So, it won't result in all queries being re-fetched simultaneously. + +::: + +The function returns an object containing the following hooks: + +- `useAdminEntity`: is a query hook that allows retrieving a single entry using your custom endpoint. For example, if you have the `GET` endpoint `/admin/vendors/:id`, where `:id` is the ID of a vendor, you can use this hook to call that endpoint and retrieve a vendor by its ID. +- `useAdminEntities`: is a query hook that allows retrieving a list of entries using your custom endpoint. For example, if you have the `GET` endpoint `/admin/vendors`, you can use this hook to call that endpoint and retrieve the list of vendors. +- `useAdminCreateMutation`: is a mutation hook that allows creating an entry using your custom endpoint. For example, if you have the `POST` endpoint `/admin/vendors`, you can use this hook to call that endpoint and create a vendor. +- `useAdminUpdateMutation`: is a mutation hook that allows updating an entry using your custom endpoint. For example, if you have the `POST` endpoint `/admin/vendors/:id`, you can use this hook to call that endpoint and update a vendor. +- `useAdminDeleteMutation`: is a mutation hook that allows deleting an entry using your custom endpoint. For example, if you have the `DELETE` endpoint `/admin/vendors/:id`, you can use this hook to call that endpoint and delete a vendor. + +Each of these hooks are generic, allowing you to set the types for the functions and receive IntelliSense for the query parameters, the payload, and return data. The first generic type accepted would be the type of the request, and the second type accepted would be the type of the response. + +An example of using `createCustomAdminHooks`: + +```ts +import { createCustomAdminHooks } from "medusa-react" + +type PostVendorsReq = { + name: string +} + +type PostVendorRes = { + vendor: Vendor // assuming there's a type vendor +} + +const MyWidget = () => { + const { + useAdminCreateMutation: useCreateVendor, + } = createCustomAdminHooks( + `/vendors`, + "vendors", + { product: true } + ) + + const { mutate } = useCreateVendor< + PostVendorsReq, + PostVendorRes + >() + + // ... + + const handleCreate = () => { + mutate({ + name: "Vendor 1", + }, { + onSuccess({ vendor }) { + console.log(vendor) + }, + }) + } + + // ... +} +``` + +In the example above, you use `createCustomAdminHooks` to create the custom hook `useAdminCreateMutation`, renamed to `useCreateVendor`. You then use `useCreateVendor` to initialize the `mutate` function. You set the generic types of useCreateVendor to the types `PostVendorsReq` and `PostVendorRes`, which are assumed to be the types of the create endpoint's request and response respectively. + +Later in your code, you can use the `mutate` function to send a request to your endpoint and create a new vendor. The `mutate` function accepts the request's body parameters as an object. You can use the `onSuccess` function, which can be defined in the second parameter object of the `mutate` function, to get access to the response received. + --- ## Utilities diff --git a/docs/content/modules/multiwarehouse/admin/manage-item-allocations-in-orders.mdx b/docs/content/modules/multiwarehouse/admin/manage-item-allocations-in-orders.mdx index 565da0ef48..d44ad1e3f7 100644 --- a/docs/content/modules/multiwarehouse/admin/manage-item-allocations-in-orders.mdx +++ b/docs/content/modules/multiwarehouse/admin/manage-item-allocations-in-orders.mdx @@ -123,22 +123,22 @@ export default CreateReservation ```ts fetch(`/admin/reservations`, { - credentials: "include", - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - line_item_id, - location_id, - inventory_item_id, - quantity, - }), - }) - .then((response) => response.json()) - .then(({ reservation }) => { - console.log(reservation.id) - }) + credentials: "include", + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + line_item_id, + location_id, + inventory_item_id, + quantity, + }), +}) +.then((response) => response.json()) +.then(({ reservation }) => { + console.log(reservation.id) +}) ``` diff --git a/docs/content/modules/multiwarehouse/admin/manage-reservations.mdx b/docs/content/modules/multiwarehouse/admin/manage-reservations.mdx new file mode 100644 index 0000000000..ff9d0470a4 --- /dev/null +++ b/docs/content/modules/multiwarehouse/admin/manage-reservations.mdx @@ -0,0 +1,401 @@ +--- +description: 'Learn how to manage custom reservations of a product variant using the admin APIs. This includes how to list, create, update, and delete reservations.' +addHowToData: true +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +# How to Manage Custom Reservations + +In this document, you’ll learn how to manage custom reservations of a product variant using the admin APIs. + +:::tip + +Although this guide covers how to manage custom reservations of product variants, you can create custom reservations for any entity that is associated with an Inventory Item. + +::: + +## Overview + +When an order is created, reservations are created for the items in that order automatically. However, Medusa also provides the capability to create custom reservations that aren’t related to any order. Custom reservations allow you to allocate quantities of a product variant manually. You can do that using the Reservations admin APIs. + +The functionalities in this guide apply to all types of reservations, including those associated with an order and those that aren’t. + +### Scenario + +You want to add or use the following admin functionalities: + +- List reservations, including custom reservations or those associated with orders. +- Manage a reservation, including creating, updating, and deleting a reservation. + +:::note + +You can check the [API reference](/api/admin) for all available Reservations endpoints. + +::: + +--- + +## Prerequisites + +### Medusa Components + +It is assumed that you already have a Medusa backend installed and set up. If not, you can follow the [quickstart guide](../../../development/backend/install.mdx) to get started. + +### Required Module + +This guide assumes you have a stock location and inventory modules installed. You can use Medusa’s [Stock Location and Inventory modules](../install-modules.md) or create your own modules. + +### JS Client + +This guide includes code snippets to send requests to your Medusa backend using Medusa’s JS Client, among other methods. + +If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client](../../../js-client/overview.md) installed and have [created an instance of the client](../../../js-client/overview.md#configuration). + +### Medusa React + +This guide also includes code snippets to send requests to your Medusa backend using Medusa React, among other methods. + +If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../../medusa-react/overview.md#usage). + +### Authenticated Admin User + +You must be an authenticated admin user before following along with the steps in the tutorial. + +You can learn more about [authenticating as an admin user in the API reference](/api/admin/#section/Authentication). + +--- + +## List Reservations + +You can list all reservations in your store by sending a request to the [List Reservations endpoint](https://docs.medusajs.com/api/admin#tag/Reservations/operation/GetReservations): + + + + +```ts +medusa.admin.reservations.list() +.then(({ reservations, limit, count, offset }) => { + console.log(reservations.length) +}) +``` + + + + +```tsx +import { useAdminReservations } from "medusa-react" + +const Reservations = () => { + const { reservations, isLoading } = useAdminReservations() + + return ( +
+ {isLoading && Loading...} + {reservations && !reservations.length && ( + No Reservations + )} + {reservations && reservations.length > 0 && ( +
    + {reservations.map((reservation) => ( +
  • {reservation.quantity}
    • + ))} +
+ )} +
+ ) +} + +export default Reservations +``` + + + + +```ts +fetch(`/admin/reservations`, { + credentials: "include", +}) +.then((response) => response.json()) +.then(({ reservations, limit, count, offset }) => { + console.log(reservations.length) +}) +``` + + + + +```bash +curl -L -X GET '/admin/reservations' \ +-H 'Authorization: Bearer ' +``` + + + + +This endpoint does not require any query or path parameters. You can pass it query parameters for filtering or pagination purposes. Check out the [API reference](/api/admin#tag/Reservations/operation/GetReservations) for a list of accepted query parameters. + +This endpoint returns an array of reservations along with [pagination parameters](/api/admin#section/Pagination). + +--- + +## Create a Reservation + +:::note + +Before you create a reservation for a product variant, make sure you’ve created an inventory item for that variant. You can learn how to do that in [this guide](./manage-inventory-items.mdx#create-an-inventory-item). + +::: + +You can create a reservation by sending a request to the [Create Reservation endpoint](/api/admin#tag/Reservations/operation/PostReservations): + + + + +```ts +medusa.admin.reservations.create({ + location_id, + inventory_item_id, + quantity, +}) +.then(({ reservation }) => { + console.log(reservation.id) +}) +``` + + + + +```tsx +import { useAdminCreateReservation } from "medusa-react" + +const CreateReservation = () => { + const createReservation = useAdminCreateReservation() + // ... + + const handleCreate = () => { + createReservation.mutate({ + location_id, + inventory_item_id, + quantity, + }) + } + + // ... +} + +export default CreateReservation +``` + + + + +```ts +fetch(`/admin/reservations`, { + credentials: "include", + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + location_id, + inventory_item_id, + quantity, + }), +}) +.then((response) => response.json()) +.then(({ reservation }) => { + console.log(reservation.id) +}) +``` + + + + +```bash +curl -L -X POST '/admin/reservations' \ + -H 'Authorization: Bearer ' \ + -H 'Content-Type: application/json' \ + --data-raw '{ + "location_id": "", + "inventory_item_id": "", + "quantity": 1 + }' +``` + + + + +This endpoint requires the following body parameters: + +- `location_id`: The ID of the location the reservation is created in. +- `inventory_item_id`: The ID of the inventory item the product variant is associated with. +- `quantity`: The quantity to allocate. + +The request returns the created reservation as an object. + +--- + +## Update a Reservation + +You can update a reservation by sending a request to the [Update Reservation endpoint](/api/admin#tag/Reservations/operation/PostReservationsReservation): + + + + +```ts +medusa.admin.reservations.update(reservationId, { + quantity, +}) +.then(({ reservation }) => { + console.log(reservation.id) +}) +``` + + + + +```tsx +import { useAdminUpdateReservation } from "medusa-react" + +const UpdateReservation = () => { + const updateReservation = useAdminUpdateReservation( + reservationId + ) + // ... + + const handleCreate = () => { + updateReservation.mutate({ + quantity, + }) + } + + // ... +} + +export default UpdateReservation +``` + + + + +```ts +fetch(`/admin/reservations/${reservationId}`, { + credentials: "include", + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + quantity, + }), +}) +.then((response) => response.json()) +.then(({ reservation }) => { + console.log(reservation.id) +}) +``` + + + + +```bash +curl -L -X POST '/admin/reservations/' \ + -H 'Authorization: Bearer ' \ + -H 'Content-Type: application/json' \ + --data-raw '{ + "quantity": 3 + }' +``` + + + + +This endpoint requires the ID of the reservation as a path parameter. + +In the request body parameters, you can optionally pass any of the following parameters to make updates to the reservation: + +- `quantity`: The quantity that should be reserved. +- `location_id`: The ID of the location that the product variant should be allocated from. +- `metadata`: set or change the reservation’s metadata. + +The request returns the updated reservation as an object. + +--- + +## Delete a Reservation + +You can delete a reservation by sending a request to the [Delete Reservation endpoint](/api/admin#tag/Reservations/operation/DeleteReservationsReservation): + + + + +```ts +medusa.admin.reservations.delete(reservationId) +.then(({ id, object, deleted }) => { + console.log(id) +}) +``` + + + + +```tsx +import { useAdminDeleteReservation } from "medusa-react" + +const DeleteReservation = () => { + const deleteReservation = useAdminDeleteReservation( + reservationId + ) + // ... + + const handleDelete = () => { + deleteReservation.mutate() + } + + // ... +} + +export default DeleteReservation +``` + + + + +```ts +fetch(`/admin/reservations/${reservationId}`, { + credentials: "include", + method: "DELETE", +}) +.then((response) => response.json()) +.then(({ id, object, deleted }) => { + console.log(id) +}) +``` + + + + +```bash +curl -L -X DELETE '/admin/reservations/' \ + -H 'Authorization: Bearer ' +``` + + + + +This endpoint requires the reservation ID to be passed as a path parameter. + +The request returns the following fields: + +- `id`: The ID of the reservation. +- `object`: The type of object that was removed. In this case, the value will be `reservation`. +- `deleted`: A boolean value indicating whether the reservation was successfully deleted. + +--- + +## See Also + +- [How to manage inventory items](./manage-inventory-items.mdx) +- [How to manage stock locations](./manage-stock-locations.mdx) diff --git a/docs/content/modules/products/serverless-module.md b/docs/content/modules/products/serverless-module.md new file mode 100644 index 0000000000..72ccd98002 --- /dev/null +++ b/docs/content/modules/products/serverless-module.md @@ -0,0 +1,386 @@ +--- +title: 'How to Use Serverless Product Module' +description: 'Learn how to use the product module in a serverless setup by installing it in a Next.js application.' +addHowToData: true +badge: + variant: orange + text: beta +--- + +In this document, you’ll learn how to use the Product module in a serverless setup. + +## Overview + +Medusa’s modules increase extensibility and customization capabilities. Instead of having to manage a fully-fledged ecommerce system, you can use these modules in serverless applications, such as a Next.js project. + +The module only needs to connect to a PostgreSQL database. You can also connect it to an existing Medusa database. Then, you can use the Product module to connect directly to the PostgreSQL database and retrieve or manipulate data. + +This guide explains how to use the Product Module in a Next.js application as an example. You can use it with other frameworks, such as Remix, as well. + +### Benefits of Serverless Modules + +- Keep packages small enough to be deployed to serverless Infrastructure easily +- Bring Medusa closer to Edge runtime compatibility. +- Make it easier to integrate modules into an ecosystem of existing commerce services. +- Make it easier to customize or extend core logic in Medusa. + +:::info + +The product module is currently in beta, and it provides only functionalities related to browsing products. In later versions, the product module would include more powerful ecommerce features. + +::: + +--- + +## Prerequisites + +- The Product Module requires a project using Node v16+. +- The Product Module must connect to a PostgreSQL database. You can refer to [this guide](../../development/backend/prepare-environment.mdx#postgresql) to learn how to install PostgreSQL locally. Alternatively, you can use free PostgreSQL database hosting, such as [Vercel Postgres](https://vercel.com/docs/storage/vercel-postgres). If you have an existing Medusa database, you can use it as well. + +--- + +## Installation in Next.js Project + +This section explains how to install the Product module in a Next.js project. + +If you don’t have a Next.js project, you can create one with the following command: + +```bash +npx create-next-app@latest +``` + +Refer to the [Next.js documentation](https://nextjs.org/docs/getting-started/installation) for other available installation options. + +### Step 1: Install Product Module + +In the root directory of your Next.js project, run the following command to install the product module: + +```bash npm2yarn +npm install @medusajs/product +``` + +### Step 2: Add Database Configurations + +Create a `.env` file and add the following environment variable: + +```bash +POSTGRES_URL= +``` + +Where `` is your database connection URL of the format `postgres://[user][:password]@[host][:port]/[dbname]`. You can learn more about the connection URL format in [this guide](../../development/backend/configurations.md#postgresql-configurations). + +You can also set the following optional environment variables: + +- `POSTGRES_SCHEMA`: a string indicating the PostgreSQL schema to use. By default, it's `public`. +- `POSTGRES_DRIVER_OPTIONS`: a stringified JSON object indicating the PostgreSQL options to use. The JSON object is then parsed to be used as a JavaScript object. By default, it's `{"connection":{"ssl":false}}` for local PostgreSQL databases, and `{"connection":{"ssl":{"rejectUnauthorized":false}}}` for remote databases. + +:::note + +If `POSTGRES_DRIVER_OPTIONS` is not specified, the PostgreSQL database is considered local if `POSTGRES_URL` includes `localhost`. Otherwise, it's considered remote. + +::: + +### Step 3: Run Database Migrations + +:::note + +If you are using an existing Medusa database, you can skip this step. + +::: + +Migrations are used to create your database schema. Before you can run migrations, add in your `package.json` the following scripts: + +```json title=package.json +"scripts": { + //...other scripts + "product:migrations:run": "medusa-product-migrations-up", + "product:seed": "medusa-product-seed ./seed-data.js" +}, +``` + +The first command runs the migrations, and the second command allows you to optionally seed your database with demo products. However, you’d need the following seed file added in the root of your Next.js directory: + +
+ Seed file + + ```js title=seed-data.js + const productCategoriesData = [ + { + id: "category-0", + name: "category 0", + parent_category_id: null, + }, + { + id: "category-1", + name: "category 1", + parent_category_id: "category-0", + }, + { + id: "category-1-a", + name: "category 1 a", + parent_category_id: "category-1", + }, + { + id: "category-1-b", + name: "category 1 b", + parent_category_id: "category-1", + is_internal: true, + }, + { + id: "category-1-b-1", + name: "category 1 b 1", + parent_category_id: "category-1-b", + }, + ] + + const productsData = [ + { + id: "test-1", + title: "product 1", + status: "published", + descriptions: "Lorem ipsum dolor sit amet, consectetur.", + tags: [ + { + id: "tag-1", + value: "France", + }, + ], + categories: [ + { + id: "category-0", + }, + ], + }, + { + id: "test-2", + title: "product", + status: "published", + descriptions: "Lorem ipsum dolor sit amet, consectetur.", + tags: [ + { + id: "tag-2", + value: "Germany", + }, + ], + categories: [ + { + id: "category-1", + }, + ], + }, + ] + + const variantsData = [ + { + id: "test-1", + title: "variant title", + sku: "sku 1", + product: { id: productsData[0].id }, + inventory_quantity: 10, + }, + { + id: "test-2", + title: "variant title", + sku: "sku 2", + product: { id: productsData[1].id }, + inventory_quantity: 10, + }, + ] + + module.exports = { + productCategoriesData, + productsData, + variantsData, + } + ``` + +
+ +Then run the first and optionally second commands to migrate the database schema: + +```bash npm2yarn +npm run product:migrations:run +# optionally +npm run product:seed +``` + +### Step 4: Adjust Next.js Configurations + +Next.js uses Webpack for compilation. Since quite a few of the dependencies used by the product module are not Webpack optimized, you have to add the product module as an external dependency. + +To do that, add the `serverComponentsExternalPackages` option in `next.config.js`: + +```js title=next.config.js +/** @type {import('next').NextConfig} */ +const nextConfig = { + experimental: { + serverComponentsExternalPackages: [ + "@medusajs/product", + ], + }, +} + +module.exports = nextConfig +``` + +### Step 5: Create API Route + +The product module is ready for use now! You can now use it to create API endpoints within your Next.js application. + +:::note + +This guide uses Next.js's App Router. + +::: + +For example, create the file `app/api/products/route.ts` with the following content: + +```ts title=app/api/products/route.ts +import { NextResponse } from "next/server" + +import { + initialize as initializeProductModule, +} from "@medusajs/product" + +export async function GET(request: Request) { + const productService = await initializeProductModule() + + const data = await productService.list() + + return NextResponse.json({ products: data }) +} +``` + +This creates a `GET` endpoint at the route `/api/products`. You import the `initialize` function, aliased as `initializeProductModule`, from `@medusajs/product`. Then, in the endpoint, you invoke the `initializeProductModule` function, which returns an instance of the `ProductModuleService`. Using the product module service’s `list` method, you retrieve all available products and return them in the response of the endpoint. + +### Step 6: Test Next.js Application + +To test the endpoint you added, start your Next.js application with the following command: + +```bash npm2yarn +npm run dev +``` + +Then, open in your browser the URL `http://localhost:3000/api/products`. If you seeded your database with demo products, or you’re using a Medusa database schema, you’ll receive the products in your database. Otherwise, the request will return an empty array. + +--- + +## Example Usages + +This section includes some examples of the different functionalities or ways you can use the product module. The code snippets are shown in the context of endpoints. + +### List Products + +```ts title=app/api/products/route.ts +import { NextResponse } from "next/server" + +import { + initialize as initializeProductModule, +} from "@medusajs/product" + +export async function GET(request: Request) { + const productService = await initializeProductModule() + + const data = await productService.list() + + return NextResponse.json({ products: data }) +} +``` + +### Retrieve Product by Id + +```ts title=app/api/product/[id]/route.ts +import { NextResponse } from "next/server" + +import { + initialize as initializeProductModule, +} from "@medusajs/product" + +export async function GET( + request: Request, + { params }: { params: Record }) { + + const { id } = params + const productService = await initializeProductModule() + + const data = await productService.list({ + id, + }) + + return NextResponse.json({ product: data[0] }) +} +``` + +### Retrieve Product by Handle + +```ts title=app/api/product/[handle]/route.ts +import { NextResponse } from "next/server" + +import { + initialize as initializeProductModule, +} from "@medusajs/product" + +export async function GET( + request: Request, + { params }: { params: Record }) { + + const { handle } = params + const productService = await initializeProductModule() + + const data = await productService.list({ + handle, + }) + + return NextResponse.json({ product: data[0] }) +} +``` + +### Retrieve Categories + +```ts title=app/api/categories/route.ts +import { NextResponse } from "next/server" + +import { + initialize as initializeProductModule, +} from "@medusajs/product" + +export async function GET(request: Request) { + const productService = await initializeProductModule() + + const data = await productService.listCategories() + + return NextResponse.json({ categories: data }) +} +``` + +### Retrieve Category by Handle + +```ts title=app/api/category/[handle]/route.ts +import { NextResponse } from "next/server" + +import { + initialize as initializeProductModule, +} from "@medusajs/product" + +export async function GET( + request: Request, + { params }: { params: Record }) { + + const { handle } = params + const productService = await initializeProductModule() + + const data = await productService.listCategories({ + handle, + }) + + return NextResponse.json({ category: data[0] }) +} +``` + +--- + +## See Also + +- [Products Commerce Module Overview](./overview.mdx) +- [How to show products in a storefront](./storefront/show-products.mdx) +- [How to show categories in a storefront](./storefront/use-categories.mdx) diff --git a/docs/content/modules/products/storefront/show-products.mdx b/docs/content/modules/products/storefront/show-products.mdx index 9e465eff17..09a2566d5e 100644 --- a/docs/content/modules/products/storefront/show-products.mdx +++ b/docs/content/modules/products/storefront/show-products.mdx @@ -5,6 +5,7 @@ addHowToData: true import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; +import Badge from '@site/src/components/Badge'; # How to Show Products on the Storefront @@ -45,6 +46,12 @@ This guide also includes code snippets to send requests to your Medusa backend u If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../../medusa-react/overview.md#usage). +### @medusajs/product Module + +This guide also includes code snippets to utilize the `@medusajs/product` module in your storefront, among other methods. + +If you follow the `@medusajs/product` code blocks, it's assumed you already have the [@medusajs/product](../serverless-module.md) installed. + --- ## List Products @@ -89,6 +96,31 @@ const Products = () => { export default Products ``` + + + @medusajs/product + beta + +)} attributes={{ + badge: true +}}> + +```ts +import { + initialize as initializeProductModule, +} from "@medusajs/product" + +// in an async function, or you can use promises +async () => { + // ... + const productService = await initializeProductModule() + const products = await productService.list() + + console.log(products.length) +} +``` + @@ -164,6 +196,33 @@ const Products = () => { export default Products ``` + + + @medusajs/product + beta + +)} attributes={{ + badge: true +}}> + +```ts +import { + initialize as initializeProductModule, +} from "@medusajs/product" + +// in an async function, or you can use promises +async () => { + // ... + const productService = await initializeProductModule() + const products = await productService.list({ + category_ids: ["cat_123"], + }) + + console.log(products) +} +``` + @@ -235,6 +294,33 @@ const Products = () => { export default Products ``` + + + @medusajs/product + beta + +)} attributes={{ + badge: true +}}> + +```ts +import { + initialize as initializeProductModule, +} from "@medusajs/product" + +// in an async function, or you can use promises +async () => { + // ... + const productService = await initializeProductModule() + const products = await productService.list({}, { + relations: ["categories"], + }) + + console.log(products) +} +``` + @@ -581,6 +667,33 @@ const Products = () => { export default Products ``` + + + @medusajs/product + beta + +)} attributes={{ + badge: true +}}> + +```ts +import { + initialize as initializeProductModule, +} from "@medusajs/product" + +// in an async function, or you can use promises +async () => { + // ... + const productService = await initializeProductModule() + const products = await productService.list({ + id: productId, + }) + + console.log(products[0]) +} +``` + @@ -658,6 +771,33 @@ const Products = () => { export default Products ``` + + + @medusajs/product + beta + +)} attributes={{ + badge: true +}}> + +```ts +import { + initialize as initializeProductModule, +} from "@medusajs/product" + +// in an async function, or you can use promises +async () => { + // ... + const productService = await initializeProductModule() + const products = await productService.list({ + handle, + }) + + console.log(products[0]) +} +``` + diff --git a/docs/content/modules/products/storefront/use-categories.mdx b/docs/content/modules/products/storefront/use-categories.mdx index d38d31f735..f0c40e2942 100644 --- a/docs/content/modules/products/storefront/use-categories.mdx +++ b/docs/content/modules/products/storefront/use-categories.mdx @@ -43,6 +43,12 @@ This guide also includes code snippets to send requests to your Medusa backend u If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../../medusa-react/overview.md#usage). +### @medusajs/product Module + +This guide also includes code snippets to utilize the `@medusajs/product` module in your storefront, among other methods. + +If you follow the `@medusajs/product` code blocks, it's assumed you already have the [@medusajs/product](../serverless-module.md) installed. + --- ## List Categories @@ -94,6 +100,29 @@ function Categories() { export default Categories ``` + + + @medusajs/product + beta + +)}> + +```ts +import { + initialize as initializeProductModule, +} from "@medusajs/product" + +// in an async function, or you can use promises +async () => { + // ... + const productService = await initializeProductModule() + const categories = await productService.listCategories() + + console.log(categories) +} +``` + @@ -162,6 +191,31 @@ function Category() { export default Category ``` + + + @medusajs/product + beta + +)}> + +```ts +import { + initialize as initializeProductModule, +} from "@medusajs/product" + +// in an async function, or you can use promises +async () => { + // ... + const productService = await initializeProductModule() + const categories = await productService.listCategories({ + id: productCategoryId, + }) + + console.log(categories[0]) +} +``` + @@ -252,6 +306,31 @@ function Categories() { export default Categories ``` + + + @medusajs/product + beta + +)}> + +```ts +import { + initialize as initializeProductModule, +} from "@medusajs/product" + +// in an async function, or you can use promises +async () => { + // ... + const productService = await initializeProductModule() + const categories = await productService.listCategories({ + handle, + }) + + console.log(categories[0]) +} +``` + diff --git a/docs/content/plugins/cms/contentful/customize-contentful.md b/docs/content/plugins/cms/contentful/customize-contentful.md index bd837c82f7..741257d616 100644 --- a/docs/content/plugins/cms/contentful/customize-contentful.md +++ b/docs/content/plugins/cms/contentful/customize-contentful.md @@ -332,5 +332,4 @@ Restart the Gatsby storefront then open a product that you added Rich Text conte ## See Also -- Deploy your Medusa backend to [Heroku](../../../deployments/server/deploying-on-heroku.mdx), [Qovery](../../../deployments/server/deploying-on-qovery.md), or [DigitalOcean](../../../deployments/server/deploying-on-digital-ocean.md). -- [How to deploy your Gatsby storefront to Netlify](../../../deployments/storefront/deploying-gatsby-on-netlify.md). +- How to deploy your Medusa backend to [Heroku](../../../deployments/server/deploying-on-heroku.mdx), or [DigitalOcean](../../../deployments/server/deploying-on-digital-ocean.md), or [other providers](../../../deployments/server/index.mdx) \ No newline at end of file diff --git a/docs/content/plugins/cms/contentful/index.md b/docs/content/plugins/cms/contentful/index.md index aa19c51fa7..2561d19d17 100644 --- a/docs/content/plugins/cms/contentful/index.md +++ b/docs/content/plugins/cms/contentful/index.md @@ -294,5 +294,4 @@ Learn [How to customize your Contentful backend and storefront](./customize-cont ## See Also -- How to deploy your Medusa backend to [Heroku](../../../deployments/server/deploying-on-heroku.mdx), [Qovery](../../../deployments/server/deploying-on-qovery.md), or [DigitalOcean](../../../deployments/server/deploying-on-digital-ocean.md). -- [How to deploy your Gatsby storefront to Netlify](../../../deployments/storefront/deploying-gatsby-on-netlify.md). +- How to deploy your Medusa backend to [Heroku](../../../deployments/server/deploying-on-heroku.mdx), or [DigitalOcean](../../../deployments/server/deploying-on-digital-ocean.md), or [other providers](../../../deployments/server/index.mdx) \ No newline at end of file diff --git a/docs/content/plugins/payment/stripe.mdx b/docs/content/plugins/payment/stripe.mdx index 7130d8d703..c12bfad3b1 100644 --- a/docs/content/plugins/payment/stripe.mdx +++ b/docs/content/plugins/payment/stripe.mdx @@ -79,7 +79,7 @@ Other optional options include: - `payment_description`: a string that is used as the default description of a payment if none is provided. - `capture`: a boolean value that indicates whether payment should be captured manually or automatically. By default, it will be `false`, leading admins to capture the payment manually. -- `automatic_payment_methods`: enables Stripe's automatic payment methods. This is useful if you're integrating services like Apple pay or Google pay. +- `automatic_payment_methods`: a boolean value that enables Stripe's automatic payment methods. This is useful if you're integrating services like Apple pay or Google pay. ### Retrieve Stripe's Keys diff --git a/docs/content/recipes/index.mdx b/docs/content/recipes/index.mdx new file mode 100644 index 0000000000..43ca3988ef --- /dev/null +++ b/docs/content/recipes/index.mdx @@ -0,0 +1,99 @@ +import DocCardList from '@theme/DocCardList'; +import DocCard from '@theme/DocCard'; +import Icons from '@theme/Icon'; +import Feedback from '@site/src/components/Feedback'; +import LearningPath from '@site/src/components/LearningPath'; +import LargeCard from '@site/src/components/LargeCard'; +import Button from '@site/src/components/Button'; + +# Medusa Recipes + +This document provides you resources for different paths based on what you're building with Medusa. + +:::note + +These recipes assume you already have a Medusa backend setup. If not, you can create a Medusa project with the following command: + +```bash +npx create-medusa-app +``` + +[Learn more in this guide](../create-medusa-app.mdx). + +::: + +## Recipe: Setup Ecommerce Store + +Follow this recipe if you want to use Medusa for an ecommerce store. This recipe includes three steps that will get you a storefront deployed to Vercel and a backend deployed to Railway. + + + +--- + +## Recipe: Build a Marketplace + +Follow this guide if you want to build a Marketplace with Medusa. + + + +--- + +## Recipe: Build Subscription Purchases + +Follow this guide if you want to implement subscription-based purhcases with Medusa. + + + + + +--- + + + +## Can't find your path? + + + +Medusa is a customizable commerce solution that can be used to build any custom use case. If you can't find your use case mentioned above, the following guides give you a general understanding of how Medusa can be used and how you can customize it. + + \ No newline at end of file diff --git a/docs/content/recipes/marketplace.mdx b/docs/content/recipes/marketplace.mdx new file mode 100644 index 0000000000..96b731fafc --- /dev/null +++ b/docs/content/recipes/marketplace.mdx @@ -0,0 +1,400 @@ +import DocCardList from '@theme/DocCardList'; +import DocCard from '@theme/DocCard'; +import Icons from '@theme/Icon'; +import LearningPath from '@site/src/components/LearningPath'; + +# Build a Marketplace + +This document guides you through the different documentation resources that will help you build a marketplace with Medusa. + +## Overview + +A marketplace is an online commerce store that allows different vendors to sell their products within the same commerce system. Customers can purchase products from any of these vendors, and vendors can manage their orders separately. + + + +--- + +## Associate Entities with Stores + +:::tip + +Entities represent tables in the database. + +::: + +By default, entities like users, products, or orders aren't associated with a store, as it's assumed there's one store in Medusa. For a marketplace, each of these entities should be associated with their respective stores. + +To associate these entities with the `Store` entity, you need to extend and customize entities created in the Medusa core package `@medusajs/medusa`, such as the `User` entity, to add a relation to the `Store` entity. + + + +
+ Example: Associate User with Store + + For example, to associate the `User` entity with the `Store` entity, create the file `src/models/user.ts` with the following content: + + ```ts title=src/models/user.ts + import { + Column, + Entity, + Index, + JoinColumn, + ManyToOne, + } from "typeorm" + import { + User as MedusaUser, + } from "@medusajs/medusa" + import { Store } from "./store" + + @Entity() + export class User extends MedusaUser { + @Index("UserStoreId") + @Column({ nullable: true }) + store_id?: string + + @ManyToOne(() => Store, (store) => store.members) + @JoinColumn({ name: "store_id", referencedColumnName: "id" }) + store?: Store + } + ``` + + Then, you need to extend the `UserRepository` to point to your extended entity. To do that, create the file `src/repositories/user.ts` with the following content: + + ```ts title=src/repositories/user.ts + import { User } from "../models/user" + import { + dataSource, + } from "@medusajs/medusa/dist/loaders/database" + import { + UserRepository as MedusaUserRepository, + } from "@medusajs/medusa/dist/repositories/user" + + export const UserRepository = dataSource + .getRepository(User) + .extend({ + ...Object.assign( + MedusaUserRepository, + { target: User } + ), + }) + + export default UserRepository + ``` + + Next, you need to create a migration that reflects the changes on the `User` entity in your database. To do that, run the following command to create a migration file: + + ```bash + npx typeorm migration:create src/migrations/add-user-store-id + ``` + + This creates a file in the `src/migrations` directory of the format `_add-user-store-id.ts`. Replace the `up` and `down` methods in that file with the methods here: + + ```ts title=src/migrations/_add-user-store-id.ts + // ... + + export class AddUserStoreId1681287255173 + implements MigrationInterface { + // ... + + public async up(queryRunner: QueryRunner): Promise { + await queryRunner.query( + `ALTER TABLE "user" ADD "store_id" character varying` + ) + await queryRunner.query( + `CREATE INDEX "UserStoreId" ON "user" ("store_id")` + ) + } + + public async down(queryRunner: QueryRunner): Promise { + await queryRunner.query( + `DROP INDEX "public"."UserStoreId"` + ) + await queryRunner.query( + `ALTER TABLE "user" DROP COLUMN "store_id"` + ) + } + + } + ``` + + Finally, to reflect these changes and start using them, `build` your changes and run migrations with the following commands: + + ```bash npm2yarn + npm run build + npx @medusajs/medusa migrations run + ``` + + You can extend other entities in a similar manner to associate them with a store. + +
+ +--- + +## Accessing Logged-in User + +Throughout your development, you'll likely need access to the logged-in user. For example, you'll need to know which user is logged in to know which store to associate a new product with. + + + +--- + +## Customize Data Management Functionalities + +After associating entities with stores, you'll need to customize how certain data management functionalities are implemented in the Medusa core package. + +For example, when a new user is created, you need to ensure that it's associated either with a new store or with the store of the logged-in user. Another example is associating a new product with the logged-in user's store. + +You can customize these functionalities by extending services. Services are classes that contain helper methods specific to an entity. For example, the `UserService` is used to manage functionalities related to the `User` entity, such as creating a user. + +You can also extend services if you need to customize a functionality implemented in a service for other reasons. + + + +
+ Example: Extend User Service + + You can extend the user service to change how the `create` method is implemented. + + To extend the user service, create the file `src/services/user.ts` with the following content: + + + + ```ts + import { Lifetime } from "awilix" + import { + UserService as MedusaUserService, + } from "@medusajs/medusa" + import { User } from "../models/user" + import { + CreateUserInput as MedusaCreateUserInput, + } from "@medusajs/medusa/dist/types/user" + import StoreRepository from "../repositories/store" + + type CreateUserInput = { + store_id?: string + } & MedusaCreateUserInput + + class UserService extends MedusaUserService { + static LIFE_TIME = Lifetime.SCOPED + protected readonly loggedInUser_: User | null + protected readonly storeRepository_: typeof StoreRepository + + constructor(container, options) { + super(...arguments) + this.storeRepository_ = container.storeRepository + + try { + this.loggedInUser_ = container.loggedInUser + } catch (e) { + // avoid errors when backend first runs + } + } + + async create( + user: CreateUserInput, + password: string + ): Promise { + if (!user.store_id) { + const storeRepo = this.manager_.withRepository( + this.storeRepository_ + ) + let newStore = storeRepo.create() + newStore = await storeRepo.save(newStore) + user.store_id = newStore.id + } + + return await super.create(user, password) + } + } + + export default UserService + ``` + + In the `create` method of this extended service, you create a new store if the user being created doesn't have a store associated with it. + + You can then test out your customization by running the `build` command and starting the backend: + + ```bash + npm run build + npx @medusajs/medusa develop + ``` +
+ +--- + +## Listening to Events + +While implementing your marketplace, you'll typically need to listen to certain events then perform actions asynchronously. For example, you can listen to the `order.placed` event and, when triggered, create child orders of the order, separating ordered items by their associated store. + +To listen to events, you need to create Subscribers that subscribe a handler method to an event. In that handler method, you can implement the desired functionality. + + + +
+ Example: Listen to Order Created Event + + To listen to the `order.placed` event, create the file `src/subscribers/orderNotifier.ts` with the following content: + + ```ts + class OrderNotifierSubscriber { + constructor({ eventBusService }) { + eventBusService.subscribe("order.placed", this.handleOrder) + } + + handleOrder = async (data) => { + // TODO perform functionality + } + } + + export default OrderNotifierSubscriber + ``` + + This subscribes the `handleOrder` method to be executed whenever the `order.placed` event is emitted. + + You can then test out your subscriber by running the `build` command and starting the backend: + + ```bash + npm run build + npx @medusajs/medusa develop + ``` +
+ +--- + +## Add Payment and Fulfillment Providers + +Payment and fulfillment providers can be added through plugins or directly in your project. You can either create your own provider, use one of Medusa's official plugins, or use community plugins. + +:::note + +Payment and fulfillment providers are associated with regions, which are not associated with a store, by default. If you want to allow each store to specify its own payment and fulfillment providers, you'll need to [associate the region with a store](#associate-entities-with-stores). + +::: + +### Option 1: Create your own providers + + + +### Option 2: Install a Plugin + + + +--- + +## Build a Storefront + +Medusa provides a Next.js starter storefront that you can use with Medusa. Since you've customized your Medusa project, you'll need to either customize the existing Next.js storefront, or create a custom storefront. + + + +--- + +## Deploy Marketplace + +Our documentation includes deployment guides for a basic Medusa backend. You should be able to follow it to deploy your customized marketplace, as well. + + + +--- + +## Additional Development + +You can find other resources for your marketplace development in the [Medusa Development section](../development/overview.mdx) of this documentation. diff --git a/docs/content/recipes/subscriptions.mdx b/docs/content/recipes/subscriptions.mdx new file mode 100644 index 0000000000..a664641f6c --- /dev/null +++ b/docs/content/recipes/subscriptions.mdx @@ -0,0 +1,161 @@ +import DocCardList from '@theme/DocCardList'; +import DocCard from '@theme/DocCard'; +import Icons from '@theme/Icon'; +import LearningPath from '@site/src/components/LearningPath'; + +# Build Subscription-based Purchases + +This document guides you through the different documentation resources that will help you build subscription-based purchasing in Medusa. + +## Overview + +Subscription-based purchase allows customers to purchase products for a specified period, and the payment and fulfillment is processed within a regular interval in that period. + +For example, a customer can purchase a book subscription box for a period of three months. Each month, the payment will be captured for that order and, if the payment is successful, the fulfillment will be processed. + + + +--- + +## Save Subscription Details in the Database + +Subscriptions have details related to the subscription interval, subscription period, and more. + +Based on the approach you choose to implement the subscription logic (which is discussed in the next section), you might need to store different data in your backend. + +If you want to store the subscription details in a new table in the database, you can do that by creating an entity. If you want to extend an existing entity in Medusa's core, such as the `Order` entity, to add details related to the subscription, you can extend an entity. + + + +--- + +## Decide on Subscription Approach + +There are different ways to implement subscriptions in your Medusa backend. This document discusses two options: using Stripe subscriptions, or implementing subscriptions logic within the backend, independent of a specific payment provider. + +### Option 1: Using Stripe Subscriptions + +Stripe provides a [subscription payments](https://stripe.com/docs/billing/subscriptions/overview) that allows you to authorize payment on a subscription basis within Stripe. Stripe then handles checking for recurring payments and capturing payment at the specified interval. + +This approach allows you to deligate the complications of implementing the subscription logic to Stripe, but does not support using other payment providers. + +Medusa provides a Stripe plugin, however, it doesn't handle subscriptions. You can either use that plugin to add the subscription feature on top of it, or create a custom Stripe Subscription payment provider. + + + +### Option 2: Implement Subscription Logic + +By implementing the subscription logic within your backend, you can have full control over the subscription logic. You'll also be independent of payment providers, allowing you to provide customers with more than payment provider option. + +Implementing the logic depends on your use case, but you'll mainly need to do two things: + +1. Perform an action when an order is placed, such as saving subscription details. This can be done using subscribers, which register handler methods to be triggered when an event is emitted. When an order is placed, the `order.placed` event is emitted. +2. Check daily for subscriptions that need renewal. This can be done using a scheduled job, which is a cron job that can be executed on a defined interval. Within that job, you can define your renewal logic. + + + +--- + +## Build a Storefront + +Medusa provides a Next.js starter storefront that you can use with Medusa. Since you've customized your Medusa project, you'll need to either customize the existing Next.js storefront, or create a custom storefront. + + + +--- + +## Deploy Backend + +Our documentation includes deployment guides for a basic Medusa backend. You should be able to follow it to deploy your customized backend, as well. + + + +--- + +## Additional Development + +You can find other resources for your development in the [Medusa Development section](../development/overview.mdx) of this documentation. diff --git a/docs/content/starters/nextjs-medusa-starter.mdx b/docs/content/starters/nextjs-medusa-starter.mdx index fc4266b027..026bb5c34f 100644 --- a/docs/content/starters/nextjs-medusa-starter.mdx +++ b/docs/content/starters/nextjs-medusa-starter.mdx @@ -30,12 +30,13 @@ This document guides you to install and set up the Next.js Starter Storefront. ![Next.js Storefront Demo](https://res.cloudinary.com/dza7lstvk/image/upload/v1668003177/Medusa%20Docs/Screenshots/koJl8uR_n3gvii.gif) -## Instant Deployment to Netlify +## Instant Deployment to Vercel -Instead of manually following this guide to install then later deploy the Next.js Storefront, you can deploy the Next.js Storefront to Netlify with this button: +Instead of manually following this guide to install then later deploy the Next.js Storefront, you can deploy the Next.js Storefront to Vercel with this button: - - Deploy to Netlify + + Deploy with Vercel --- diff --git a/docs/content/troubleshooting/create-medusa-app-errors/_eagain-error.md b/docs/content/troubleshooting/create-medusa-app-errors/_eagain-error.md index d01cf35f3a..edd716724e 100644 --- a/docs/content/troubleshooting/create-medusa-app-errors/_eagain-error.md +++ b/docs/content/troubleshooting/create-medusa-app-errors/_eagain-error.md @@ -20,13 +20,19 @@ npm run build npx @medusajs/medusa-cli migrations run ``` -4\. Optionally seed the database: +4\. Create an admin user: + +```bash +npx @medusajs/medusa-cli user -e user@test.com -p supersecret +``` + +5\. Optionally seed the database: ```bash npx @medusajs/medusa-cli seed -f ./data/seed.json ``` -5\. Start project: +6\. Start project: ```bash npx @medusajs/medusa-cli develop diff --git a/docs/content/upgrade-guides/index.mdx b/docs/content/upgrade-guides/index.mdx index e98e2f2cf1..4425b1936e 100644 --- a/docs/content/upgrade-guides/index.mdx +++ b/docs/content/upgrade-guides/index.mdx @@ -4,7 +4,7 @@ description: 'Upgrade guides on how to update the Medusa backend along with othe --- import DocCard from '@theme/DocCard'; -import getFirstCategoryItem from '@site/src/utils/getFirstCategoryItem'; +import getFirstCategoryItem from '@site/src/utils/get-first-category-item'; # Upgrade Guides diff --git a/docs/content/user-guide/multiwarehouse/index.md b/docs/content/user-guide/multiwarehouse/index.md index 3b45cfcb9c..a87686919d 100644 --- a/docs/content/user-guide/multiwarehouse/index.md +++ b/docs/content/user-guide/multiwarehouse/index.md @@ -30,3 +30,4 @@ It should be noted that the following are not explained within this section of t - [Manage Inventory](./inventory.mdx) - [Manage Locations](./locations.mdx) +- [Manage Reservations](./reservations.mdx) diff --git a/docs/content/user-guide/multiwarehouse/reservations.mdx b/docs/content/user-guide/multiwarehouse/reservations.mdx new file mode 100644 index 0000000000..15f5717e5f --- /dev/null +++ b/docs/content/user-guide/multiwarehouse/reservations.mdx @@ -0,0 +1,99 @@ +--- +sidebar_position: 4 +description: "This user guide explains how to manage reservations in your store. Learn how to view, create, edit, and delete reservations." +addHowToData: true +--- + +import UiIcon from '@site/src/components/UiIcon'; + +# Manage Reservations + +In this document, you’ll learn how to manage reservations in your store. + +## View Reservations + +To view reservations, go to Inventory from the sidebar, and click on the Reservations header. + +In the reservations page, you can view all reservations, either created by an order or created manually. + +### Filter by Location + +To filter reservations by location: + +1. Click on the “All locations” button. +2. Choose the location you want to filter reservations by. + +### Other Filters + +You can also filter by description, creation date, reserved quantity, and more. + +To do that: + +1. Click on the “View” button. +2. Apply any filters relevant for you. +3. Click on the “Apply” button. + +To reset applied filters: + +1. Click on the “View” button. +2. Toggle off applied filters. +3. Click on the “Apply” button. + +--- + +## Create a Reservation + +Reservations are created manually when an order is created, and you can also manage them from the order’s page. + +You can also manually create a reservation from the Reservations page. To create a reservation: + +1. Go to Inventory → Reservations. +2. Click on the “Create reservation” button. +3. In the form that opens: + 1. For the “Location” field, select the location the reservation is created in. + 2. For the “Item to reserve” field, enter the SKU of the item you want to create a reservation for. + 3. Select the item from the results that appear. Once you do that, a table shows. In the table: + 1. Next to the “Reserve” row, specify the reservation quantity. + 2. If you want to remove the selected item and choose a different one, click on the “Remove item” button. + 4. You can optionally enter a Description of the reservation. + 5. You can optionally enter key-value metadata fields if you have any custom data you want to attach to the reservation. To add or manage the metadata fields: + 1. Hover over the available row in the table. + 2. Click on the icon. + 3. Choose the actions in the dropdown to manage the metadata fields. +4. Once you’re done, click the “Save reservation” button. + +--- + +## Edit Reservation + +To edit a reservation: + +1. Go to Inventory → Reservations +2. Find the reservation you want to edit, and click on the icon on its right. +3. Click on “Edit” from the dropdown. +4. In the side window that opens: + 1. You can change the location of the reservation using the Location field. + 2. In the table, you can change the reserved quantity by changing the value of the Allocate row. + 3. You can change the description of the reservation using the Description field. + 4. You can manage the metadata of the reservation: + 1. If there aren’t any metadata fields, you can add a metadata field using the “Add metadata” button. + 2. You can add more metadata fields or manage available ones by hovering over a row, clicking the icon, and choosing an action from the dropdown. + 3. You can remove metadata fields by clicking the “Remove metadata” button. +5. Once you’re done, click the “Save and close” button. + +--- + +## Delete Reservation + +:::warning + +Deleting a reservation can’t be undone, and the reservation data can’t be restored. + +::: + +To delete a reservation: + +1. Go to Inventory → Reservations +2. Find the reservation you want to edit, and click on the icon on its right. +3. Click on “Delete” from the dropdown. +4. Confirm deleting the reservation by clicking the “Yes, remove" button in the pop-up. diff --git a/www/docs/.eslintrc.js b/www/docs/.eslintrc.js index deef729441..a2ed778533 100644 --- a/www/docs/.eslintrc.js +++ b/www/docs/.eslintrc.js @@ -86,7 +86,7 @@ module.exports = { { allow: [ "error", - "warn" + "warn", ] } ] diff --git a/www/docs/package.json b/www/docs/package.json index d0fa36e4dc..347429fe1b 100644 --- a/www/docs/package.json +++ b/www/docs/package.json @@ -44,7 +44,8 @@ "react-uuid": "^2.0.0", "redocusaurus": "^1.4.0", "tailwindcss": "^3.3.2", - "url-loader": "^4.1.1" + "url-loader": "^4.1.1", + "uuid": "^9.0.0" }, "browserslist": { "production": [ @@ -63,6 +64,8 @@ "@docusaurus/eslint-plugin": "latest", "@docusaurus/module-type-aliases": "latest", "@tsconfig/docusaurus": "^1.0.7", + "@types/react-transition-group": "^4.4.6", + "@types/uuid": "^9.0.1", "@typescript-eslint/eslint-plugin": "^5.55.0", "@typescript-eslint/parser": "^5.55.0", "eslint": "^8.36.0", diff --git a/www/docs/sidebars.js b/www/docs/sidebars.js index c1fd68a5a6..a000b46e27 100644 --- a/www/docs/sidebars.js +++ b/www/docs/sidebars.js @@ -35,6 +35,30 @@ module.exports = { }, className: "homepage-sidebar-item", }, + { + type: "category", + label: "Recipes", + link: { + type: "doc", + id: "recipes/index", + }, + customProps: { + sidebar_icon: "newspaper", + }, + className: "homepage-sidebar-item", + items: [ + { + type: "doc", + id: "recipes/marketplace", + label: "Marketplace", + }, + { + type: "doc", + id: "recipes/subscriptions", + label: "Subscriptions", + }, + ], + }, { type: "html", value: "Browse Docs", @@ -62,13 +86,33 @@ module.exports = { className: "homepage-sidebar-item", }, { - type: "doc", - id: "admin/quickstart", + type: "category", label: "Admin Dashboard", + link: { + type: "doc", + id: "admin/quickstart", + }, customProps: { sidebar_icon: "computer-desktop", }, className: "homepage-sidebar-item", + items: [ + { + type: "doc", + label: "Admin Widgets", + id: "admin/widgets", + }, + { + type: "doc", + label: "Admin UI Routes", + id: "admin/routes", + }, + { + type: "doc", + label: "Example: Create Onboarding", + id: "admin/onboarding", + }, + ], }, { type: "ref", @@ -222,19 +266,6 @@ module.exports = { }, }, }, - { - type: "doc", - id: "deployments/server/deploying-on-qovery", - label: "Deploy on Qovery", - customProps: { - image: - "https://res.cloudinary.com/dza7lstvk/image/upload/v1669739955/Medusa%20Docs/Other/qOvY2dN_vogsxy.png", - badge: { - variant: "orange", - children: "Deprecated", - }, - }, - }, ], }, { @@ -279,19 +310,6 @@ module.exports = { }, }, }, - { - type: "doc", - id: "deployments/storefront/deploying-gatsby-on-netlify", - label: "Deploy Gatsby on Netlify", - customProps: { - image: - "https://res.cloudinary.com/dza7lstvk/image/upload/v1679574027/Medusa%20Docs/Other/gCbsCvX_h7nijn.png", - badge: { - variant: "orange", - children: "Deprecated", - }, - }, - }, ], }, ], @@ -615,6 +633,11 @@ module.exports = { id: "modules/products/admin/import-products", label: "Admin: Import Products", }, + { + type: "doc", + id: "modules/products/serverless-module", + label: "Storefront: Serverless Module", + }, { type: "doc", id: "modules/products/storefront/show-products", @@ -882,6 +905,11 @@ module.exports = { id: "modules/multiwarehouse/admin/manage-inventory-items", label: "Admin: Manage Inventory Items", }, + { + type: "doc", + id: "modules/multiwarehouse/admin/manage-reservations", + label: "Admin: Manage Custom Reservations", + }, { type: "doc", id: "modules/multiwarehouse/admin/manage-item-allocations-in-orders", diff --git a/www/docs/src/components/Badge/index.tsx b/www/docs/src/components/Badge/index.tsx index ce9b02d9e4..eca09caa08 100644 --- a/www/docs/src/components/Badge/index.tsx +++ b/www/docs/src/components/Badge/index.tsx @@ -13,12 +13,21 @@ const Badge: React.FC = ({ className, variant, children }) => { "tw-text-label-x-small-plus tw-py-px tw-px-0.4 tw-rounded tw-border tw-border-solid tw-text-center", variant === "purple" && "tw-bg-medusa-tag-purple-bg dark:tw-bg-medusa-tag-purple-bg-dark tw-text-medusa-tag-purple-text dark:tw-text-medusa-tag-purple-text-dark tw-border-medusa-tag-purple-border dark:tw-border-medusa-tag-purple-border-dark", + variant === "purple-dark" && + "tw-bg-medusa-tag-purple-bg-dark tw-text-medusa-tag-purple-text-dark tw-border-medusa-tag-purple-border-dark", variant === "orange" && "tw-bg-medusa-tag-orange-bg dark:tw-bg-medusa-tag-orange-bg-dark tw-text-medusa-tag-orange-text dark:tw-text-medusa-tag-orange-text-dark tw-border-medusa-tag-orange-border dark:tw-border-medusa-tag-orange-border-dark", + variant === "orange-dark" && + "tw-bg-medusa-tag-orange-bg-dark tw-text-medusa-tag-orange-text-dark tw-border-medusa-tag-orange-border-dark", variant === "green" && "tw-bg-medusa-tag-green-bg dark:tw-bg-medusa-tag-green-bg-dark tw-text-medusa-tag-green-text dark:tw-text-medusa-tag-green-text-dark tw-border-medusa-tag-green-border dark:tw-border-medusa-tag-green-border-dark", + variant === "green-dark" && + "tw-bg-medusa-tag-green-bg-dark tw-text-medusa-tag-green-text-dark tw-border-medusa-tag-green-border-dark", variant === "blue" && "tw-bg-medusa-tag-blue-bg dark:tw-bg-medusa-tag-blue-bg-dark tw-text-medusa-tag-blue-text dark:tw-text-medusa-tag-blue-text-dark tw-border-medusa-tag-blue-border dark:tw-border-medusa-tag-blue-border-dark", + variant === "blue-dark" && + "tw-bg-medusa-tag-blue-bg-dark tw-text-medusa-tag-blue-text-dark tw-border-medusa-tag-blue-border-dark", + "badge", className )} > diff --git a/www/docs/src/components/Button/index.tsx b/www/docs/src/components/Button/index.tsx index a477d88125..62fd9480b2 100644 --- a/www/docs/src/components/Button/index.tsx +++ b/www/docs/src/components/Button/index.tsx @@ -2,6 +2,7 @@ import React from "react" import clsx from "clsx" type ButtonProps = { + btnTypeClassName?: string className?: string onClick?: React.MouseEventHandler disabled?: boolean @@ -9,13 +10,18 @@ type ButtonProps = { const Button: React.FC = ({ className = "", + btnTypeClassName, onClick, children, ...props }) => { return ( + {hasNextStep() && ( + + )} + {!hasNextStep() && ( + + )} + + ) +} + +export default LearningPathStepActions diff --git a/www/docs/src/components/LearningPath/Steps/index.tsx b/www/docs/src/components/LearningPath/Steps/index.tsx new file mode 100644 index 0000000000..d05fbe3737 --- /dev/null +++ b/www/docs/src/components/LearningPath/Steps/index.tsx @@ -0,0 +1,84 @@ +import { useLearningPath } from "@site/src/providers/LearningPath" +import React from "react" +import LearningPathStepActions from "./Actions" +import clsx from "clsx" +import IconCircleDottedLine from "@site/src/theme/Icon/CircleDottedLine" +import IconCheckCircleSolid from "@site/src/theme/Icon/CheckCircleSolid" +import IconCircleMiniSolid from "@site/src/theme/Icon/CircleMiniSolid" +import Link from "@docusaurus/Link" + +type LearningPathStepsProps = { + onFinish?: () => void + onClose?: () => void +} + +const LearningPathSteps: React.FC = ({ ...rest }) => { + const { path, currentStep, goToStep } = useLearningPath() + + if (!path) { + return <> + } + + return ( +
+ {path.steps.map((step, index) => ( +
+
+
+ {index === currentStep && ( + + )} + {index < currentStep && ( + + )} + {index > currentStep && } +
+ + {step.title} + +
+ {index === currentStep && ( +
+
+
+ {step.descriptionJSX ?? step.description} +
+
+ )} + {index < currentStep && ( + { + e.preventDefault() + goToStep(index) + }} + /> + )} +
+ ))} + +
+ ) +} + +export default LearningPathSteps diff --git a/www/docs/src/components/LearningPath/index.tsx b/www/docs/src/components/LearningPath/index.tsx new file mode 100644 index 0000000000..27ab9a862d --- /dev/null +++ b/www/docs/src/components/LearningPath/index.tsx @@ -0,0 +1,96 @@ +import { useLearningPath } from "@site/src/providers/LearningPath" +import { useNotifications } from "@site/src/providers/NotificationProvider" +import { getLearningPath } from "@site/src/utils/learning-paths" +import clsx from "clsx" +import React from "react" +import useBaseUrl from "@docusaurus/useBaseUrl" +import Button from "../Button" +import IconCircleMiniSolid from "@site/src/theme/Icon/CircleMiniSolid" +import LearningPathIcon from "./Icon" + +type LearningPathProps = { + pathName: string + className?: string +} & React.AllHTMLAttributes + +const LearningPath: React.FC = ({ + pathName, + className = "", +}) => { + const path = getLearningPath(pathName) + if (!path) { + throw new Error("Learning path does not exist.") + } + const { startPath, path: currentPath } = useLearningPath() + const notificationContext = useNotifications() + + const handleClick = () => { + if (notificationContext && currentPath?.notificationId) { + notificationContext.removeNotification(currentPath.notificationId) + } + startPath(path) + } + + return ( +
+
+ +
+ + {path.label} + + {path.description && ( + + {path.description} + + )} +
+ +
+ {path.steps.map((step, index) => ( +
+
+ +
+ + {step.title} + +
+ ))} +
+ ) +} + +export default LearningPath diff --git a/www/docs/src/components/Notification/Container/index.tsx b/www/docs/src/components/Notification/Container/index.tsx new file mode 100644 index 0000000000..9021b934e2 --- /dev/null +++ b/www/docs/src/components/Notification/Container/index.tsx @@ -0,0 +1,61 @@ +import { + NotificationItemType, + useNotifications, +} from "@site/src/providers/NotificationProvider" +import React from "react" +import NotificationItem from "../Item" +import { CSSTransition, TransitionGroup } from "react-transition-group" +import clsx from "clsx" + +const NotificationContainer = () => { + const { notifications, removeNotification } = useNotifications() + + const handleClose = (notification: NotificationItemType) => { + notification.onClose?.() + removeNotification(notification.id) + } + + const renderFilteredNotifications = ( + condition: (notificaiton: NotificationItemType) => boolean, + className?: string + ) => { + return ( + + {notifications.filter(condition).map((notification) => ( + + handleClose(notification)} + className={clsx( + notification.className, + "!tw-relative !tw-top-0 !tw-bottom-0 !tw-right-0" + )} + /> + + ))} + + ) + } + + return ( + <> + {renderFilteredNotifications( + (notification) => notification.placement === "top", + "tw-flex tw-fixed tw-flex-col tw-gap-0.5 md:tw-right-1 tw-right-0 md:tw-top-1 tw-top-0 tw-z-[400] md:tw-w-auto tw-w-full" + )} + {renderFilteredNotifications( + (notification) => notification.placement !== "top", + "tw-flex tw-flex-col tw-gap-0.5 tw-fixed md:tw-right-1 tw-right-0 md:tw-bottom-1 tw-bottom-0 tw-z-[400] md:tw-w-auto tw-w-full" + )} + + ) +} + +export default NotificationContainer diff --git a/www/docs/src/components/Notification/Item/Layout/Default/index.tsx b/www/docs/src/components/Notification/Item/Layout/Default/index.tsx new file mode 100644 index 0000000000..0ce5993ec8 --- /dev/null +++ b/www/docs/src/components/Notification/Item/Layout/Default/index.tsx @@ -0,0 +1,90 @@ +import React from "react" +import { NotificationItemProps } from "../.." +import clsx from "clsx" +import IconInformationCircleSolid from "@site/src/theme/Icon/InformationCircleSolid" +import IconXCircleSolid from "@site/src/theme/Icon/XCircleSolid" +import IconExclamationCircleSolid from "@site/src/theme/Icon/ExclamationCircleSolid" +import IconCheckCircleSolid from "@site/src/theme/Icon/CheckCircleSolid" +import Button from "@site/src/components/Button" + +type NotificationItemLayoutDefaultProps = NotificationItemProps & { + handleClose: () => void +} + +const NotificationItemLayoutDefault: React.FC< + NotificationItemLayoutDefaultProps +> = ({ + type = "info", + title = "", + text = "", + children, + isClosable = true, + handleClose, + CustomIcon, +}) => { + return ( + <> +
+ {type !== "none" && ( +
+ {type === "info" && ( + + )} + {type === "error" && ( + + )} + {type === "warning" && ( + + )} + {type === "success" && ( + + )} + {type === "custom" && CustomIcon} +
+ )} + + {title} + +
+ {(text || children) && ( +
+
+
+ {text && ( + + {text} + + )} + {children} +
+
+ )} + {isClosable && ( +
+ +
+ )} + + ) +} + +export default NotificationItemLayoutDefault diff --git a/www/docs/src/components/Notification/Item/index.tsx b/www/docs/src/components/Notification/Item/index.tsx new file mode 100644 index 0000000000..732db0632b --- /dev/null +++ b/www/docs/src/components/Notification/Item/index.tsx @@ -0,0 +1,63 @@ +import clsx from "clsx" +import React, { Children, ReactElement, useEffect, useRef } from "react" +import NotificationItemLayoutDefault from "./Layout/Default" + +export type NotificationItemProps = { + layout?: "default" | "empty" + type?: "info" | "error" | "warning" | "success" | "custom" | "none" + CustomIcon?: React.ReactNode + title?: string + text?: string + className?: string + children?: ReactElement + isClosable?: boolean + placement?: "top" | "bottom" + show?: boolean + setShow?: (value: boolean) => void + onClose?: () => void +} & React.HTMLAttributes + +const Notification = ({ + className = "", + placement = "bottom", + show = true, + layout = "default", + setShow, + onClose, + children, + ...rest +}: NotificationItemProps) => { + const handleClose = () => { + setShow?.(false) + onClose?.() + } + + return ( +
+ {layout === "default" && ( + + {children} + + )} + {layout === "empty" && + Children.map(children, (child) => + React.cloneElement(child, { + onClose: handleClose, + }) + )} +
+ ) +} + +export default Notification diff --git a/www/docs/src/components/Rating/index.tsx b/www/docs/src/components/Rating/index.tsx new file mode 100644 index 0000000000..1deffb3ee6 --- /dev/null +++ b/www/docs/src/components/Rating/index.tsx @@ -0,0 +1,80 @@ +import { useUser } from "@site/src/providers/User" +import IconStar from "@site/src/theme/Icon/Star" +import IconStarSolid from "@site/src/theme/Icon/StarSolid" +import clsx from "clsx" +import React, { useRef, useState } from "react" + +type RatingProps = { + event?: string + className?: string + onRating?: () => void +} & React.HTMLAttributes + +const Rating: React.FC = ({ + event = "rating", + className = "", + onRating, +}) => { + const [rating, setRating] = useState(0) + const [hoverRating, setHoverRating] = useState(0) + const starElms = useRef([]) + const starArr = Array.from(Array(5).keys()) + const { track } = useUser() + + const handleRating = (selectedRating: number) => { + if (rating) { + return + } + setHoverRating(0) + setRating(selectedRating) + for (let i = 0; i < selectedRating; i++) { + starElms.current[i].classList.add("animate__animated", "animate__tada") + } + track( + event, + { + rating: selectedRating, + }, + () => onRating?.() + ) + } + + return ( +
+ {starArr.map((i) => { + const isSelected = + (rating !== 0 && rating - 1 >= i) || + (hoverRating !== 0 && hoverRating - 1 >= i) + return ( + + ) + })} +
+ ) +} + +export default Rating diff --git a/www/docs/src/context/sidebar.ts b/www/docs/src/context/sidebar.ts deleted file mode 100644 index b8de674ae2..0000000000 --- a/www/docs/src/context/sidebar.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { createContext } from "react" - -type SidebarContextType = { - hasSidebar: boolean - hiddenSidebar: boolean - setHiddenSidebar: (value: boolean) => void - hiddenSidebarContainer: boolean - setHiddenSidebarContainer: (value: boolean) => void - floatingSidebar: boolean - setFloatingSidebar: (value: boolean) => void - onCollapse: () => void -} - -export const SidebarContext = createContext(null) diff --git a/www/docs/src/css/_docusaurus.css b/www/docs/src/css/_docusaurus.css index 6aa765f570..e558a90411 100644 --- a/www/docs/src/css/_docusaurus.css +++ b/www/docs/src/css/_docusaurus.css @@ -79,7 +79,7 @@ video { } [class*=codeLineNumber] { - @apply tw-text-medusa-text-placeholder !tw-pl-0; + @apply tw-text-medusa-code-text-muted !tw-pl-0; } .prism-code { @@ -279,6 +279,6 @@ h1, h2, h3, h4, h5, h6 { @apply tw-bg-medusa-bg-highlight dark:tw-bg-medusa-bg-highlight-dark; } -.prism-code *::selection { +.prism-code *::selection, .code-header::selection { @apply tw-bg-medusa-code-text-highlight; } \ No newline at end of file diff --git a/www/docs/src/css/_variables.css b/www/docs/src/css/_variables.css index 34310a3076..1326bca2e9 100644 --- a/www/docs/src/css/_variables.css +++ b/www/docs/src/css/_variables.css @@ -88,7 +88,7 @@ --rt-color-white: var(--ifm-color-content) !important; /* Footer */ - --ifm-footer-color: theme(colors.medusa.text.placeholder.DEFAULT); + --ifm-footer-color: theme(colors.medusa.text.muted.DEFAULT); --ifm-footer-background-color: transparent; --ifm-footer-padding-horizontal: 0; --ifm-footer-link-color: var(--ifm-color-content); @@ -99,12 +99,12 @@ --docsearch-searchbox-shadow: none !important; --docsearch-modal-height: 472px !important; --docsearch-modal-background: theme(colors.medusa.bg.base.DEFAULT) !important; - --docsearch-modal-shadow: theme(boxShadow.overlay) !important; + --docsearch-modal-shadow: theme(boxShadow.modal) !important; --docsearch-container-background: theme(colors.medusa.bg.overlay.DEFAULT) !important; --docsearch-key-gradient: theme(colors.medusa.bg.component.DEFAULT) !important; --docsearch-muted-color: theme(colors.medusa.text.subtle.DEFAULT) !important; --docsearch-spacing: 12px theme(spacing[1.5]) !important; - --docsearch-highlight-color: theme(colors.medusa.text.placeholder.DEFAULT) !important; + --docsearch-highlight-color: theme(colors.medusa.text.muted.DEFAULT) !important; --docsearch-text-color: var(--ifm-color-primary) !important; --docsearch-hit-background: var(--docsearch-modal-background) !important; --docsearch-hit-height: auto !important; @@ -154,17 +154,17 @@ html[data-theme="dark"] { --rt-color-dark: theme(colors.medusa.bg.base.dark) !important; /* Footer */ - --ifm-footer-color: theme(colors.medusa.text.placeholder.dark); + --ifm-footer-color: theme(colors.medusa.text.muted.dark); /* Search */ --docsearch-searchbox-background: theme(colors.medusa.bg.field.dark) !important; --docsearch-searchbox-focus-background: theme(colors.medusa.bg.field.hover.dark) !important; --docsearch-modal-background: theme(colors.medusa.bg.base.dark) !important; - --docsearch-modal-shadow: theme(boxShadow.overlay-dark) !important; + --docsearch-modal-shadow: theme(boxShadow.modal-dark) !important; --docsearch-container-background: theme(colors.medusa.bg.overlay.dark) !important; --docsearch-key-gradient: theme(colors.medusa.bg.component.dark) !important; --docsearch-muted-color: theme(colors.medusa.text.subtle.dark) !important; - --docsearch-highlight-color: theme(colors.medusa.text.placeholder.dark) !important; + --docsearch-highlight-color: theme(colors.medusa.text.muted.dark) !important; /* Tables */ --ifm-table-border-color: theme(colors.medusa.border.base.dark); @@ -188,4 +188,12 @@ html[data-theme="dark"] { :root { --docusaurus-announcement-bar-height: 30px; } +} + +.alert { + --ifm-code-background: theme(colors.medusa.bg.subtle.DEFAULT) !important; +} + +html[data-theme="dark"] .alert { + --ifm-code-background: theme(colors.medusa.bg.base.dark) !important; } \ No newline at end of file diff --git a/www/docs/src/css/components/docsearch.css b/www/docs/src/css/components/docsearch.css index 8fcd77edb7..3788efe77f 100644 --- a/www/docs/src/css/components/docsearch.css +++ b/www/docs/src/css/components/docsearch.css @@ -22,7 +22,7 @@ .DocSearch-Input { @apply !tw-text-body-regular !tw-pl-1; - @apply placeholder:tw-text-medusa-text-placeholder dark:placeholder:tw-text-medusa-text-placeholder-dark; + @apply placeholder:tw-text-medusa-text-muted dark:placeholder:tw-text-medusa-text-muted-dark; } .DocSearch-Dropdown { @@ -31,7 +31,7 @@ } .DocSearch-Hit-source { - @apply !tw-m-0 !tw-text-label-small-plus tw-uppercase tw-text-medusa-text-placeholder dark:tw-text-medusa-text-placeholder-dark; + @apply !tw-m-0 !tw-text-label-small-plus tw-uppercase tw-text-medusa-text-muted dark:tw-text-medusa-text-muted-dark; @apply tw-border-0 tw-border-b tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark; @apply !tw-py-[10px] !tw-px-1.5; } @@ -178,7 +178,7 @@ html[data-theme="dark"] .DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path { } .DocSearch-Button-Placeholder { - @apply tw-text-medusa-text-placeholder dark:tw-text-medusa-text-placeholder-dark; + @apply tw-text-medusa-text-muted dark:tw-text-medusa-text-muted-dark; @apply !tw-pl-0.5 !tw-text-label-small lg:!tw-block !tw-hidden; } diff --git a/www/docs/src/css/components/redocly.css b/www/docs/src/css/components/redocly.css index 703e160c72..1eff396331 100644 --- a/www/docs/src/css/components/redocly.css +++ b/www/docs/src/css/components/redocly.css @@ -45,7 +45,7 @@ .redocusaurus h5 + svg { - @apply tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark; + @apply tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark; } .redocusaurus h2 + div + div > div + div { @@ -86,14 +86,14 @@ } .redocusaurus .react-tabs__tab:not(.react-tabs__tab--selected) { - @apply !tw-bg-medusa-button-secondary dark:!tw-bg-medusa-button-secondary-dark; + @apply !tw-bg-medusa-button-neutral dark:!tw-bg-medusa-button-neutral-dark; @apply !tw-border-medusa-border-base dark:!tw-border-medusa-border-base-dark; @apply !tw-text-medusa-text-base dark:!tw-text-medusa-text-base-dark; } .redocusaurus ul > li.react-tabs__tab--selected[aria-selected="true"]:not(.tab-error):not(.tab-success) { - @apply !tw-bg-medusa-button-primary dark:!tw-bg-medusa-button-primary-dark; - @apply !tw-border-medusa-button-primary dark:!tw-border-medusa-button-primary-dark; + @apply !tw-bg-medusa-button-brand dark:!tw-bg-medusa-button-brand-dark; + @apply !tw-border-medusa-button-brand dark:!tw-border-medusa-button-brand-dark; @apply !tw-text-medusa-text-on-color dark:!tw-text-medusa-text-on-color-dark; } @@ -112,13 +112,13 @@ } .redocusaurus .tab-error:not(.react-tabs__tab--selected) { - @apply !tw-bg-medusa-button-secondary dark:!tw-bg-medusa-button-secondary-dark; + @apply !tw-bg-medusa-button-neutral dark:!tw-bg-medusa-button-neutral-dark; @apply !tw-border-medusa-border-base dark:!tw-border-medusa-border-base-dark; @apply !tw-text-medusa-support-error dark:!tw-text-medusa-support-error-dark; } .redocusaurus .tab-success:not(.react-tabs__tab--selected) { - @apply !tw-bg-medusa-button-secondary dark:!tw-bg-medusa-button-secondary-dark; + @apply !tw-bg-medusa-button-neutral dark:!tw-bg-medusa-button-neutral-dark; @apply !tw-border-medusa-border-base dark:!tw-border-medusa-border-base-dark; @apply !tw-text-medusa-support-success dark:!tw-text-medusa-support-success-dark; } @@ -139,12 +139,12 @@ .redocusaurus [download] { @apply !tw-inline-flex tw-flex-row tw-justify-center tw-items-center; @apply !tw-py-[6px] !tw-px-[12px] !tw-rounded !tw-cursor-pointer; - @apply !tw-bg-medusa-button-secondary dark:!tw-bg-medusa-button-secondary-dark; - @apply hover:!tw-bg-medusa-button-secondary-hover dark:hover:!tw-bg-medusa-button-secondary-hover-dark hover:tw-no-underline; + @apply !tw-bg-medusa-button-neutral dark:!tw-bg-medusa-button-neutral-dark; + @apply hover:!tw-bg-medusa-button-neutral-hover dark:hover:!tw-bg-medusa-button-neutral-hover-dark hover:tw-no-underline; @apply !tw-border !tw-border-solid !tw-border-medusa-border-base dark:!tw-border-medusa-border-base-dark; @apply !tw-text-label-small-plus !tw-text-medusa-text-base dark:!tw-text-medusa-text-base-dark; @apply hover:!tw-text-medusa-text-base dark:hover:!tw-text-medusa-text-base-dark; - @apply focus:!tw-shadow-button-focused dark:focus:!tw-shadow-button-focused-dark; + @apply focus:!tw-shadow-focus dark:focus:!tw-shadow-focus-dark; } .redocusaurus [role=menuitem] { diff --git a/www/docs/src/css/components/tooltip.css b/www/docs/src/css/components/tooltip.css index 8fbc34519c..a7beb2f4f9 100644 --- a/www/docs/src/css/components/tooltip.css +++ b/www/docs/src/css/components/tooltip.css @@ -1,6 +1,6 @@ .react-tooltip { @apply !tw-border !tw-border-solid !tw-border-medusa-border-base dark:!tw-border-medusa-border-base-dark; - @apply !tw-rounded !tw-text-label-x-small-plus !tw-shadow-overlay dark:!tw-shadow-overlay-dark; + @apply !tw-rounded !tw-text-label-x-small-plus !tw-shadow-tooltip dark:!tw-shadow-tooltip-dark; @apply !tw-py-0.4 !tw-px-1 lg:tw-block tw-hidden; } diff --git a/www/docs/src/css/custom.css b/www/docs/src/css/custom.css index ff997968a1..7298b8de45 100644 --- a/www/docs/src/css/custom.css +++ b/www/docs/src/css/custom.css @@ -49,7 +49,7 @@ } .sidebar-group-divider { - @apply tw-pb-[6px] tw-uppercase tw-text-medusa-text-placeholder dark:tw-text-medusa-text-placeholder-dark tw-text-label-x-small-plus; + @apply tw-pb-[6px] tw-uppercase tw-text-medusa-text-muted dark:tw-text-medusa-text-muted-dark tw-text-label-x-small-plus; @apply first:tw-pt-[6px] [&:not(:first-child)]:!tw-pt-1; } @@ -98,7 +98,7 @@ } .code-header { - @apply tw-py-[12px] tw-px-1 tw-bg-medusa-code-tabs-bg; + @apply tw-py-[12px] tw-px-1 tw-bg-medusa-code-tabs-bg tw-text-medusa-code-text-subtle; @apply tw-flex tw-justify-between tw-items-center; @apply tw-rounded-tl tw-rounded-tr tw-rounded-br-none tw-rounded-bl-none tw-border-b-0; @apply tw-border tw-border-solid tw-border-medusa-code-block-border tw-border-b-0; @@ -117,21 +117,37 @@ @apply tw-py-[6px] tw-px-[12px] tw-rounded tw-cursor-pointer; @apply tw-bg-button-neutral dark:tw-bg-button-neutral-dark; @apply hover:!tw-bg-no-image hover:tw-bg-medusa-button-neutral-hover dark:hover:tw-bg-medusa-button-neutral-hover-dark hover:tw-no-underline; - @apply active:!tw-bg-no-image active:tw-bg-medusa-button-neutral-pressed dark:active:tw-bg-medusa-button-neutral-pressed; - @apply focus:tw-shadow-neutral-button-focused dark:focus:tw-shadow-neutral-button-focused-dark; + @apply active:!tw-bg-no-image active:tw-bg-medusa-button-neutral-pressed dark:active:tw-bg-medusa-button-neutral-pressed-dark; + @apply focus:tw-shadow-focus dark:focus:tw-shadow-focus-dark; @apply disabled:!tw-bg-no-image disabled:tw-bg-medusa-button-disabled dark:disabled:tw-bg-medusa-button-disabled-dark; @apply tw-border tw-border-solid tw-border-medusa-border-neutral-buttons dark:tw-border-medusa-border-neutral-buttons-dark; @apply tw-text-label-small-plus tw-text-medusa-text-base dark:tw-text-medusa-text-base-dark; @apply hover:tw-text-medusa-text-base dark:hover:tw-text-medusa-text-base-dark; } + .btn-inverted { + @apply tw-inline-flex tw-flex-row tw-justify-center tw-items-center; + @apply tw-py-[6px] tw-px-[12px] tw-rounded tw-cursor-pointer; + @apply tw-bg-button-inverted dark:tw-bg-button-inverted-dark; + @apply hover:!tw-bg-no-image hover:tw-bg-medusa-button-inverted-hover dark:hover:tw-bg-medusa-button-inverted-hover-dark hover:tw-no-underline; + @apply active:!tw-bg-no-image active:tw-bg-medusa-button-inverted-pressed dark:active:tw-bg-medusa-button-inverted-pressed-dark; + @apply focus:tw-shadow-focus dark:focus:tw-shadow-focus-dark; + @apply disabled:!tw-bg-no-image disabled:tw-bg-medusa-button-disabled dark:disabled:tw-bg-medusa-button-disabled-dark; + @apply tw-text-label-small-plus tw-text-medusa-text-on-color dark:tw-text-medusa-text-on-inverted-dark; + @apply tw-border-transparent tw-border; + } + .navbar-action-icon-item { @apply tw-bg-button-neutral dark:tw-bg-button-neutral-dark hover:!tw-bg-no-image active:!tw-bg-no-image hover:tw-bg-medusa-button-neutral-hover dark:hover:tw-bg-medusa-button-neutral-hover-dark; @apply active:tw-bg-medusa-button-neutral-pressed dark:active:tw-bg-medusa-button-neutral-pressed-dark; - @apply focus:tw-shadow-neutral-button-focused dark:focus:tw-shadow-neutral-button-focused-dark; + @apply focus:tw-shadow-focus dark:focus:tw-shadow-focus-dark; @apply tw-border tw-border-solid tw-border-medusa-border-neutral-buttons dark:tw-border-medusa-border-neutral-buttons-dark tw-rounded; @apply tw-w-2 tw-h-2 tw-flex tw-justify-center tw-items-center tw-cursor-pointer; } + + .transparent-button { + @apply tw-bg-transparent tw-border-0 tw-text-inherit tw-cursor-pointer tw-p-0; + } } @layer utilities { diff --git a/www/docs/src/hooks/use-current-learning-path.tsx b/www/docs/src/hooks/use-current-learning-path.tsx new file mode 100644 index 0000000000..222c72b88a --- /dev/null +++ b/www/docs/src/hooks/use-current-learning-path.tsx @@ -0,0 +1,94 @@ +import React, { useEffect } from "react" +import { useLearningPath } from "../providers/LearningPath" +import { useNotifications } from "../providers/NotificationProvider" +import LearningPathSteps from "../components/LearningPath/Steps" +import LearningPathFinish from "../components/LearningPath/Finish" +import LearningPathIcon from "../components/LearningPath/Icon" + +const useCurrentLearningPath = () => { + const { path, currentStep, updatePath, endPath } = useLearningPath() + const step = path?.steps[currentStep] + const { + addNotification, + generateId, + removeNotification, + updateNotification, + } = useNotifications() + + // used when a notification closed (finished or not) + const handleClose = (notificationId: string, shouldEndPath = true) => { + if (shouldEndPath) { + setTimeout(() => { + endPath() + }, 500) + } + removeNotification(notificationId) + } + + // used when the learning path is completely finished + // shows the finish step, if the path has any + const handleFinish = (notificationId: string) => { + if (path.finish) { + updateNotification(notificationId, { + title: path.finish.step.title, + text: path.finish.step.description, + type: "custom", + layout: "default", + CustomIcon: ( + + ), + children: ( + + setTimeout(() => { + handleClose(notificationId, false) + }, 1500) + } + /> + ), + }) + endPath() + } else { + handleClose(notificationId) + } + } + + const LearningStep = (notificationId: string) => { + return handleFinish(notificationId)} /> + } + + // create a notification when a path is initialized + useEffect(() => { + if (path && !path.notificationId) { + const id = generateId() + + addNotification({ + title: path.label, + text: step?.description, + onClose: () => handleClose(id), + layout: "empty", + id, + children: LearningStep(id), + }) + updatePath({ + notificationId: id, + }) + } + }, [path]) + + // update an existing notification when the step changes + useEffect(() => { + if (path && path.notificationId && step) { + updateNotification(path.notificationId, { + text: step?.description, + children: LearningStep(path.notificationId), + }) + } + }, [step]) +} + +export default useCurrentLearningPath diff --git a/www/docs/src/hooks/use-onboarding.tsx b/www/docs/src/hooks/use-onboarding.tsx new file mode 100644 index 0000000000..54b276dbdf --- /dev/null +++ b/www/docs/src/hooks/use-onboarding.tsx @@ -0,0 +1,37 @@ +import React, { useEffect, useState } from "react" +import { useQueryStringValue } from "@docusaurus/theme-common/internal" +import { useNotifications } from "../providers/NotificationProvider" +import Rating from "../components/Rating" +import { useUser } from "../providers/User" + +const useOnboarding = () => { + const isOnboarding = useQueryStringValue("ref") === "onboarding" + const [showNotification, setShowNotification] = useState(isOnboarding) + const { addNotification, removeNotification, generateId } = useNotifications() + const { track } = useUser() + + useEffect(() => { + if (isOnboarding) { + track("finished_onboarding") + const id = generateId() + addNotification({ + title: "Thank you for installing Medusa!", + text: "Please rate your onboarding experience", + type: "success", + show: showNotification, + setShow: setShowNotification, + id, + children: ( + { + setTimeout(() => removeNotification(id), 1500) + }} + /> + ), + }) + } + }, []) +} + +export default useOnboarding diff --git a/www/docs/src/providers/LearningPath/index.tsx b/www/docs/src/providers/LearningPath/index.tsx new file mode 100644 index 0000000000..602887f32e --- /dev/null +++ b/www/docs/src/providers/LearningPath/index.tsx @@ -0,0 +1,256 @@ +import useIsBrowser from "@docusaurus/useIsBrowser" +import { getLearningPath } from "@site/src/utils/learning-paths" +import React, { createContext, useContext, useEffect, useState } from "react" +import { useHistory } from "@docusaurus/router" +import { LearningPathFinishType } from "@site/src/components/LearningPath/Finish" +import { useUser } from "../User" + +export type LearningPathType = { + name: string + label: string + description?: string + steps: LearningPathStepType[] + finish?: LearningPathFinishType + notificationId?: string +} + +export type LearningPathStepType = { + title?: string + description?: string + descriptionJSX?: JSX.Element + path?: string +} + +export type LearningPathContextType = { + path?: LearningPathType + setPath: (value: LearningPathType) => void + currentStep: number + setCurrentStep: (value: number) => void + startPath: (path: LearningPathType) => void + updatePath: (data: Pick) => void + endPath: () => void + nextStep: () => void + hasNextStep: () => boolean + previousStep: () => void + hasPreviousStep: () => boolean + goToStep: (stepIndex: number) => void + isCurrentPath: () => boolean + goToCurrentPath: () => void +} + +type LearningPathProviderProps = { + children?: React.ReactNode +} + +const LearningPathContext = createContext(null) + +const LearningPathProvider: React.FC = ({ + children, +}) => { + const [path, setPath] = useState(null) + const [currentStep, setCurrentStep] = useState(-1) + const isBrowser = useIsBrowser() + const history = useHistory() + const { track } = useUser() + + const startPath = (path: LearningPathType) => { + setPath(path) + setCurrentStep(-1) + if (isBrowser) { + localStorage.setItem( + "learning-path", + JSON.stringify({ + pathName: path.name, + currentStep: -1, + }) + ) + } + + track(`learning_path_${path.name}`, { + url: history.location.pathname, + state: `start`, + }) + } + + useEffect(() => { + if (path && currentStep === -1) { + nextStep() + } + }, [path]) + + const endPath = () => { + const didFinish = currentStep === path.steps.length - 1 + const reachedIndex = currentStep === -1 ? 0 : currentStep + track(`learning_path_${path.name}`, { + url: history.location.pathname, + state: !didFinish ? `closed` : `end`, + reachedStep: + path.steps[reachedIndex]?.title || + path.steps[reachedIndex]?.description || + path.steps[reachedIndex]?.descriptionJSX || + reachedIndex, + }) + setPath(null) + setCurrentStep(-1) + if (isBrowser) { + localStorage.removeItem("learning-path") + } + } + + const hasNextStep = () => currentStep !== path?.steps.length - 1 + + const nextStep = () => { + if (!path || !hasNextStep()) { + return + } + const nextStepIndex = currentStep + 1 + setCurrentStep(nextStepIndex) + const newPath = path.steps[nextStepIndex].path + if (isBrowser) { + localStorage.setItem( + "learning-path", + JSON.stringify({ + pathName: path.name, + currentStep: nextStepIndex, + }) + ) + } + if (history.location.pathname !== newPath) { + history.push(newPath) + } + } + + const hasPreviousStep = () => currentStep > 0 + + const previousStep = () => { + if (!path || !hasPreviousStep()) { + return + } + + const previousStepIndex = currentStep - 1 + setCurrentStep(previousStepIndex) + const newPath = path.steps[previousStepIndex].path + if (isBrowser) { + localStorage.setItem( + "learning-path", + JSON.stringify({ + pathName: path.name, + currentStep: previousStepIndex, + }) + ) + } + if (history.location.pathname !== newPath) { + history.push(newPath) + } + } + + const goToStep = (stepIndex: number) => { + if (!path || stepIndex >= path.steps.length) { + return + } + + setCurrentStep(stepIndex) + const newPath = path.steps[stepIndex].path + if (isBrowser) { + localStorage.setItem( + "learning-path", + JSON.stringify({ + pathName: path.name, + currentStep: stepIndex, + }) + ) + } + if (history.location.pathname !== newPath) { + history.push(newPath) + } + } + + const isCurrentPath = () => { + if (!path || currentStep === -1) { + return false + } + + return history.location.pathname === path.steps[currentStep].path + } + + const goToCurrentPath = () => { + if (!path || currentStep === -1) { + return + } + + history.push(path.steps[currentStep].path) + } + + const updatePath = (data: Pick) => { + setPath({ + ...path, + ...data, + }) + } + + const initPath = () => { + if (isBrowser) { + // give query parameters higher precedence over local storage + const queryPathName = new URLSearchParams(history.location.search).get( + "path" + ) + const queryPath = getLearningPath(queryPathName) + if (queryPath) { + startPath(queryPath) + } else { + const storedPath = localStorage.getItem("learning-path") + if (storedPath) { + const storedPathParsed = JSON.parse(storedPath) + const currentPath = getLearningPath(storedPathParsed?.pathName) + if (currentPath) { + setPath(currentPath) + setCurrentStep(storedPathParsed?.currentStep || 0) + } + } + } + } + } + + useEffect(() => { + if (isBrowser && !path) { + initPath() + } + }, [isBrowser]) + + return ( + + {children} + + ) +} + +export default LearningPathProvider + +export const useLearningPath = () => { + const context = useContext(LearningPathContext) + + if (!context) { + throw new Error( + "useLearningPath must be used within a LearningPathProvider" + ) + } + + return context +} diff --git a/www/docs/src/providers/NotificationProvider/index.tsx b/www/docs/src/providers/NotificationProvider/index.tsx new file mode 100644 index 0000000000..06de940c9e --- /dev/null +++ b/www/docs/src/providers/NotificationProvider/index.tsx @@ -0,0 +1,134 @@ +import React, { createContext, useContext, useReducer } from "react" +import { NotificationItemProps } from "@site/src/components/Notification/Item" +import { v4 as uuid4 } from "uuid" +import NotificationContainer from "@site/src/components/Notification/Container" + +export type NotificationItemType = { + id?: string +} & NotificationItemProps + +type NotificationContextType = { + notifications: NotificationItemType[] + addNotification: (value: NotificationItemType) => void + generateId: () => string + removeNotification: (id: string) => void + updateNotification: ( + id: string, + updatedData: Partial> + ) => void +} + +type NotificationProviderProps = { + children?: React.ReactNode +} + +enum NotificationReducerActionTypes { + ADD = "add", + REMOVE = "remove", + UPDATE = "update", +} + +type NotificationReducerAction = + | { + type: NotificationReducerActionTypes.ADD + notification: NotificationItemType + } + | { + type: NotificationReducerActionTypes.REMOVE + id: string + } + | { + type: NotificationReducerActionTypes.UPDATE + id: string + updatedData: Partial> + } + +const notificationReducer = ( + state: NotificationItemType[], + action: NotificationReducerAction +) => { + switch (action.type) { + case NotificationReducerActionTypes.ADD: + return [...state, action.notification] + case NotificationReducerActionTypes.REMOVE: + return state.filter((notification) => notification.id !== action.id) + case NotificationReducerActionTypes.UPDATE: + return state.map((notification) => { + if (notification.id === action.id) { + return { + ...notification, + ...action.updatedData, + } + } + + return notification + }) + default: + return state + } +} + +const NotificationContext = createContext(null) + +const NotificationProvider: React.FC = ({ + children, +}) => { + const [notifications, dispatch] = useReducer(notificationReducer, []) + + const generateId = () => uuid4() + + const addNotification = (notification: NotificationItemType) => { + if (!notification.id) { + notification.id = generateId() + } + dispatch({ + type: NotificationReducerActionTypes.ADD, + notification, + }) + } + + const updateNotification = ( + id: string, + updatedData: Partial> + ) => { + dispatch({ + type: NotificationReducerActionTypes.UPDATE, + id, + updatedData, + }) + } + + const removeNotification = (id: string) => { + dispatch({ + type: NotificationReducerActionTypes.REMOVE, + id, + }) + } + + return ( + + {children} + + + ) +} + +export default NotificationProvider + +export const useNotifications = () => { + const context = useContext(NotificationContext) + + if (!context) { + console.warn("useNotifications must be used within a NotificationProvider") + } + + return context +} diff --git a/www/docs/src/providers/User/index.tsx b/www/docs/src/providers/User/index.tsx new file mode 100644 index 0000000000..f79c48fdcc --- /dev/null +++ b/www/docs/src/providers/User/index.tsx @@ -0,0 +1,90 @@ +import useIsBrowser from "@docusaurus/useIsBrowser" +import React, { createContext, useContext, useEffect, useState } from "react" +import uuid from "react-uuid" + +type UserContextType = { + id: string + track: ( + event: string, + options?: Record, + callback?: () => void + ) => void +} + +const UserContext = createContext(null) + +type UserProviderProps = { + children?: React.ReactNode +} + +const UserProvider: React.FC = ({ children }) => { + const [id, setId] = useState("") + const isBrowser = useIsBrowser() + + const initId = () => { + if (!id.length) { + if (isBrowser) { + const storedId = localStorage.getItem("ajs_anonymous_id") + if (storedId) { + setId(storedId) + } else { + const generatedId = uuid() + localStorage.setItem("ajs_anonymous_id", generatedId) + setId(generatedId) + } + } + } + } + + const track = ( + event: string, + options?: Record, + callback?: () => void + ) => { + if (isBrowser) { + if (window.analytics) { + window.analytics.track( + event, + { + ...options, + uuid: id, + anonymousId: id, + }, + callback + ) + } else if (callback) { + console.warn( + "Segment is either not installed or not configured. Simulating success..." + ) + callback() + } + } + } + + useEffect(() => { + initId() + }, [isBrowser]) + + return ( + + {children} + + ) +} + +export default UserProvider + +export const useUser = () => { + const context = useContext(UserContext) + + if (!context) { + throw new Error("useUser must be used within a UserProvider") + } + + return context +} diff --git a/www/docs/src/theme/Admonition/index.tsx b/www/docs/src/theme/Admonition/index.tsx index 4e5909a353..1ea4b45339 100644 --- a/www/docs/src/theme/Admonition/index.tsx +++ b/www/docs/src/theme/Admonition/index.tsx @@ -2,68 +2,34 @@ import React, { type ReactNode } from "react" import clsx from "clsx" import Translate from "@docusaurus/Translate" import type { Props } from "@theme/Admonition" +import IconInformationCircleSolid from "../Icon/InformationCircleSolid" +import IconLightBulbSolid from "../Icon/LightBulbSolid" +import IconExclamationCircleSolid from "../Icon/ExclamationCircleSolid" function NoteIcon() { return ( - - - + iconColorClassName="tw-fill-medusa-support-info dark:tw-fill-medusa-support-info-dark" + /> ) } function TipIcon() { return ( - - - - + iconColorClassName="tw-fill-medusa-support-warning dark:tw-fill-medusa-support-warning-dark" + /> ) } function DangerIcon() { return ( - - - + iconColorClassName="tw-fill-medusa-support-error dark:tw-fill-medusa-support-error-dark" + /> ) } diff --git a/www/docs/src/theme/AnnouncementBar/CloseButton/index.tsx b/www/docs/src/theme/AnnouncementBar/CloseButton/index.tsx index cb7f4807d8..50c92ebfc8 100644 --- a/www/docs/src/theme/AnnouncementBar/CloseButton/index.tsx +++ b/www/docs/src/theme/AnnouncementBar/CloseButton/index.tsx @@ -26,7 +26,7 @@ export default function AnnouncementBarCloseButton( width={20} height={20} strokeWidth={1.5} - iconColorClassName="tw-stroke-medusa-icon-placeholder dark:tw-stroke-medusa-icon-placeholder-dark" + iconColorClassName="tw-stroke-medusa-icon-muted dark:tw-stroke-medusa-icon-muted-dark" /> ) diff --git a/www/docs/src/theme/ApiDoc/index.tsx b/www/docs/src/theme/ApiDoc/index.tsx new file mode 100644 index 0000000000..4d08b41023 --- /dev/null +++ b/www/docs/src/theme/ApiDoc/index.tsx @@ -0,0 +1,17 @@ +import React from "react" +import ApiDoc from "@theme-original/ApiDoc" +import type { ApiDocProps } from "@theme-original/ApiDoc" +import type { WrapperProps } from "@docusaurus/types" +import UserProvider from "@site/src/providers/User" + +type Props = WrapperProps + +export default function ApiDocWrapper(props: Props): JSX.Element { + return ( + <> + + + + + ) +} diff --git a/www/docs/src/theme/DocItem/Content/index.tsx b/www/docs/src/theme/DocItem/Content/index.tsx new file mode 100644 index 0000000000..7181e45410 --- /dev/null +++ b/www/docs/src/theme/DocItem/Content/index.tsx @@ -0,0 +1,69 @@ +import React from "react" +import clsx from "clsx" +import { ThemeClassNames } from "@docusaurus/theme-common" +import { useDoc } from "@docusaurus/theme-common/internal" +import Heading from "@theme/Heading" +import MDXContent from "@theme/MDXContent" +import type { Props } from "@theme/DocItem/Content" +import { DocContextValue } from "@medusajs/docs" +import Badge from "@site/src/components/Badge" + +/** + Title can be declared inside md content or declared through + front matter and added manually. To make both cases consistent, + the added title is added under the same div.markdown block + See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120 + + We render a "synthetic title" if: + - user doesn't ask to hide it with front matter + - the markdown content does not already contain a top-level h1 heading +*/ +function useSyntheticTitle(): string | null { + const { metadata, frontMatter, contentTitle } = useDoc() + const shouldRender = + !frontMatter.hide_title && typeof contentTitle === "undefined" + if (!shouldRender) { + return null + } + return metadata.title +} + +export default function DocItemContent({ children }: Props): JSX.Element { + const { + frontMatter: { badge }, + } = useDoc() as DocContextValue + const syntheticTitle = useSyntheticTitle() + + return ( +
+ {syntheticTitle && ( +
+ + {syntheticTitle} + {badge && ( + + {badge.text} + + )} + + {badge && ( + + {badge.text} + + )} +
+ )} + {children} +
+ ) +} diff --git a/www/docs/src/theme/DocPage/Layout/index.tsx b/www/docs/src/theme/DocPage/Layout/index.tsx index a566ddda70..6b2784d364 100644 --- a/www/docs/src/theme/DocPage/Layout/index.tsx +++ b/www/docs/src/theme/DocPage/Layout/index.tsx @@ -7,10 +7,15 @@ import DocPageLayoutMain from "@theme/DocPage/Layout/Main" import type { Props } from "@theme/DocPage/Layout" import clsx from "clsx" import { useSidebar } from "@site/src/providers/Sidebar" +import useOnboarding from "@site/src/hooks/use-onboarding" +import useCurrentLearningPath from "@site/src/hooks/use-current-learning-path" export default function DocPageLayout({ children }: Props): JSX.Element { const sidebar = useDocsSidebar() const sidebarContext = useSidebar() + useOnboarding() + useCurrentLearningPath() + return ( diff --git a/www/docs/src/theme/DocPage/index.tsx b/www/docs/src/theme/DocPage/index.tsx index 1e79849e76..85f76af17d 100644 --- a/www/docs/src/theme/DocPage/index.tsx +++ b/www/docs/src/theme/DocPage/index.tsx @@ -15,7 +15,10 @@ import DocPageLayout from "@theme/DocPage/Layout" import NotFound from "@theme/NotFound" import SearchMetadata from "@theme/SearchMetadata" import type { Props } from "@theme/DocPage" +import LearningPathProvider from "@site/src/providers/LearningPath" import SidebarProvider from "@site/src/providers/Sidebar" +import NotificationProvider from "@site/src/providers/NotificationProvider" +import UserProvider from "@site/src/providers/User" function DocPageMetadata(props: Props): JSX.Element { const { versionMetadata } = props @@ -58,11 +61,17 @@ export default function DocPage(props: Props): JSX.Element { )} > - - - {docElement} - - + + + + + + {docElement} + + + + + diff --git a/www/docs/src/theme/Icon/AcademicCapSolid/index.tsx b/www/docs/src/theme/Icon/AcademicCapSolid/index.tsx index 33490ab927..ab57480084 100644 --- a/www/docs/src/theme/Icon/AcademicCapSolid/index.tsx +++ b/www/docs/src/theme/Icon/AcademicCapSolid/index.tsx @@ -20,7 +20,7 @@ const IconAcademicCapSolid: React.FC = ({ d="M9.67899 1.93018C9.77863 1.88025 9.88855 1.85425 10 1.85425C10.1115 1.85425 10.2214 1.88025 10.321 1.93018C13.1299 3.33766 15.7595 5.07749 18.1534 7.11227C18.2506 7.19485 18.324 7.30188 18.3661 7.42232C18.4081 7.54275 18.4172 7.67222 18.3925 7.79736C18.3677 7.9225 18.31 8.03876 18.2254 8.13415C18.1407 8.22954 18.0321 8.30059 17.9107 8.33996C15.249 9.20318 12.7213 10.4349 10.4013 11.9991C10.2828 12.0792 10.143 12.122 10 12.122C9.85698 12.122 9.71723 12.0792 9.59873 11.9991C8.95249 11.5637 8.28958 11.1535 7.6115 10.7695V9.64504C7.6115 9.41192 7.72233 9.20269 7.90003 9.07944C8.91637 8.37493 9.97048 7.72651 11.0576 7.13711C11.222 7.04516 11.3435 6.89222 11.3959 6.71137C11.4484 6.53052 11.4275 6.3363 11.3379 6.1707C11.2482 6.00511 11.097 5.88145 10.9169 5.82648C10.7368 5.77151 10.5423 5.78963 10.3755 5.87694C9.24192 6.49154 8.14284 7.1677 7.08316 7.90239C6.80297 8.09811 6.57432 8.35876 6.41677 8.66206C6.25921 8.96536 6.17742 9.3023 6.1784 9.64409V10.0071C4.85835 9.35105 3.49158 8.79348 2.08928 8.33901C1.96795 8.29963 1.85934 8.22858 1.77465 8.13319C1.68996 8.03781 1.63227 7.92154 1.60753 7.7964C1.5828 7.67127 1.59192 7.5418 1.63394 7.42136C1.67597 7.30093 1.74939 7.19389 1.84661 7.11132C4.24046 5.07653 6.8701 3.3367 9.67899 1.92922V1.93018ZM6.1784 11.6179C5.41374 11.2138 4.6311 10.8446 3.83289 10.5116C3.67079 11.4982 3.5465 12.4906 3.46028 13.4867C3.4476 13.6312 3.47907 13.7762 3.55055 13.9024C3.62203 14.0287 3.73014 14.1302 3.8606 14.1937C4.36505 14.4383 4.85994 14.7001 5.34529 14.9771C5.14465 15.2867 4.91058 15.579 4.63925 15.8504C4.56885 15.916 4.51238 15.9951 4.47322 16.083C4.43405 16.1709 4.41299 16.2658 4.4113 16.362C4.4096 16.4582 4.4273 16.5537 4.46334 16.643C4.49937 16.7322 4.55302 16.8132 4.62106 16.8813C4.6891 16.9493 4.77015 17.003 4.85937 17.039C4.9486 17.075 5.04417 17.0927 5.14038 17.091C5.23659 17.0893 5.33147 17.0683 5.41937 17.0291C5.50727 16.99 5.58637 16.9335 5.65197 16.8631C6.00547 16.5106 6.3112 16.1274 6.56916 15.7233C7.60815 16.398 8.59644 17.1478 9.52612 17.9666C9.65701 18.082 9.82551 18.1457 10 18.1457C10.1745 18.1457 10.343 18.082 10.4739 17.9666C12.1842 16.4598 14.0899 15.1904 16.1394 14.1928C16.2699 14.1295 16.3781 14.0281 16.4497 13.9021C16.5214 13.776 16.5531 13.6312 16.5407 13.4867C16.4544 12.4906 16.3301 11.4982 16.1681 10.5116C14.4282 11.2377 12.7644 12.1341 11.2009 13.1877C10.8461 13.4267 10.4279 13.5544 10 13.5544C9.57211 13.5544 9.15395 13.4267 8.79906 13.1877C8.40735 12.9249 8.0099 12.6708 7.60481 12.4262C7.55492 13.5968 7.19773 14.7346 6.56916 15.7233C6.16831 15.4634 5.76019 15.2139 5.34529 14.9771C5.89043 14.1295 6.17969 13.1426 6.1784 12.1348V11.6189V11.6179Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/Adjustments/index.tsx b/www/docs/src/theme/Icon/Adjustments/index.tsx index 7c4714e424..fbaa8a772d 100644 --- a/www/docs/src/theme/Icon/Adjustments/index.tsx +++ b/www/docs/src/theme/Icon/Adjustments/index.tsx @@ -18,7 +18,7 @@ const IconAdjustments: React.FC = ({ d="M8.75 5H16.875M8.75 5C8.75 5.33152 8.6183 5.64946 8.38388 5.88388C8.14946 6.1183 7.83152 6.25 7.5 6.25C7.16848 6.25 6.85054 6.1183 6.61612 5.88388C6.3817 5.64946 6.25 5.33152 6.25 5M8.75 5C8.75 4.66848 8.6183 4.35054 8.38388 4.11612C8.14946 3.8817 7.83152 3.75 7.5 3.75C7.16848 3.75 6.85054 3.8817 6.61612 4.11612C6.3817 4.35054 6.25 4.66848 6.25 5M3.125 5H6.25M8.75 15H16.875M8.75 15C8.75 15.3315 8.6183 15.6495 8.38388 15.8839C8.14946 16.1183 7.83152 16.25 7.5 16.25C7.16848 16.25 6.85054 16.1183 6.61612 15.8839C6.3817 15.6495 6.25 15.3315 6.25 15M8.75 15C8.75 14.6685 8.6183 14.3505 8.38388 14.1161C8.14946 13.8817 7.83152 13.75 7.5 13.75C7.16848 13.75 6.85054 13.8817 6.61612 14.1161C6.3817 14.3505 6.25 14.6685 6.25 15M3.125 15H6.25M13.75 10H16.875M13.75 10C13.75 10.3315 13.6183 10.6495 13.3839 10.8839C13.1495 11.1183 12.8315 11.25 12.5 11.25C12.1685 11.25 11.8505 11.1183 11.6161 10.8839C11.3817 10.6495 11.25 10.3315 11.25 10M13.75 10C13.75 9.66848 13.6183 9.35054 13.3839 9.11612C13.1495 8.8817 12.8315 8.75 12.5 8.75C12.1685 8.75 11.8505 8.8817 11.6161 9.11612C11.3817 9.35054 11.25 9.66848 11.25 10M3.125 10H11.25" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.25" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/Alert/index.tsx b/www/docs/src/theme/Icon/Alert/index.tsx index 38e9eb3c7a..b4a04e96ff 100644 --- a/www/docs/src/theme/Icon/Alert/index.tsx +++ b/www/docs/src/theme/Icon/Alert/index.tsx @@ -17,7 +17,7 @@ const IconAlert: React.FC = ({ iconColorClassName, ...props }) => { d="M18 10C18 12.1217 17.1571 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84285 14.1566 2 12.1217 2 10C2 7.87827 2.84285 5.84344 4.34315 4.34315C5.84344 2.84285 7.87827 2 10 2C12.1217 2 14.1566 2.84285 15.6569 4.34315C17.1571 5.84344 18 7.87827 18 10ZM10 5C10.1989 5 10.3897 5.07902 10.5303 5.21967C10.671 5.36032 10.75 5.55109 10.75 5.75V10.25C10.75 10.4489 10.671 10.6397 10.5303 10.7803C10.3897 10.921 10.1989 11 10 11C9.80109 11 9.61032 10.921 9.46967 10.7803C9.32902 10.6397 9.25 10.4489 9.25 10.25V5.75C9.25 5.55109 9.32902 5.36032 9.46967 5.21967C9.61032 5.07902 9.80109 5 10 5ZM10 15C10.2652 15 10.5196 14.8946 10.7071 14.7071C10.8946 14.5196 11 14.2652 11 14C11 13.7348 10.8946 13.4804 10.7071 13.2929C10.5196 13.1054 10.2652 13 10 13C9.73478 13 9.48043 13.1054 9.29289 13.2929C9.10536 13.4804 9 13.7348 9 14C9 14.2652 9.10536 14.5196 9.29289 14.7071C9.48043 14.8946 9.73478 15 10 15Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/ArrowDownTray/index.tsx b/www/docs/src/theme/Icon/ArrowDownTray/index.tsx index 89759ab204..579670b47b 100644 --- a/www/docs/src/theme/Icon/ArrowDownTray/index.tsx +++ b/www/docs/src/theme/Icon/ArrowDownTray/index.tsx @@ -18,7 +18,7 @@ const IconArrowDownTray: React.FC = ({ d="M2.5 13.75V15.625C2.5 16.1223 2.69754 16.5992 3.04917 16.9508C3.40081 17.3025 3.87772 17.5 4.375 17.5H15.625C16.1223 17.5 16.5992 17.3025 16.9508 16.9508C17.3025 16.5992 17.5 16.1223 17.5 15.625V13.75M13.75 10L10 13.75M10 13.75L6.25 10M10 13.75V2.5" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/BackArrow/index.tsx b/www/docs/src/theme/Icon/BackArrow/index.tsx index bd0d0cde9b..b7ac1c7ce0 100644 --- a/www/docs/src/theme/Icon/BackArrow/index.tsx +++ b/www/docs/src/theme/Icon/BackArrow/index.tsx @@ -18,7 +18,7 @@ const IconBackArow: React.FC = ({ d="M7.66703 12.3331L3.00098 7.66703M3.00098 7.66703L7.66703 3.00098M3.00098 7.66703H12.3331C13.5706 7.66703 14.7574 8.15863 15.6325 9.03368C16.5075 9.90874 16.9991 11.0956 16.9991 12.3331C16.9991 13.5706 16.5075 14.7574 15.6325 15.6325C14.7574 16.5075 13.5706 16.9991 12.3331 16.9991H10.0001" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/BarsThree/index.tsx b/www/docs/src/theme/Icon/BarsThree/index.tsx index 0336d8d79f..ff6254f6d2 100644 --- a/www/docs/src/theme/Icon/BarsThree/index.tsx +++ b/www/docs/src/theme/Icon/BarsThree/index.tsx @@ -18,7 +18,7 @@ const IconBarsThree: React.FC = ({ d="M3.125 5.00006H16.875M3.125 10H16.875M3.125 15.0001H16.875" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/Bell/index.tsx b/www/docs/src/theme/Icon/Bell/index.tsx index 31321ef598..c8cd482f14 100644 --- a/www/docs/src/theme/Icon/Bell/index.tsx +++ b/www/docs/src/theme/Icon/Bell/index.tsx @@ -15,7 +15,7 @@ const IconBell: React.FC = ({ iconColorClassName, ...props }) => { d="M4.87497 2.91669C4.97929 2.79237 5.03116 2.63234 5.01961 2.47046C5.00806 2.30858 4.93399 2.15754 4.81307 2.04929C4.69216 1.94104 4.53388 1.88407 4.37171 1.89043C4.20954 1.89678 4.05621 1.96597 3.94414 2.08336C2.92036 3.22523 2.24183 4.63431 1.98747 6.14669C1.96394 6.3084 2.00469 6.4729 2.10098 6.60494C2.19726 6.73697 2.34144 6.82604 2.5026 6.85307C2.66377 6.88009 2.82911 6.84292 2.9632 6.74951C3.09729 6.65611 3.18946 6.5139 3.21997 6.35335C3.43508 5.0742 4.00901 3.88242 4.87497 2.91669ZM16.0558 2.08336C16.0012 2.02163 15.935 1.97131 15.8609 1.93527C15.7868 1.89924 15.7064 1.87821 15.6241 1.87339C15.5419 1.86856 15.4595 1.88005 15.3817 1.90718C15.3039 1.93431 15.2323 1.97655 15.1709 2.03147C15.1095 2.0864 15.0595 2.15291 15.0239 2.22721C14.9883 2.3015 14.9678 2.38209 14.9634 2.46436C14.9591 2.54663 14.971 2.62894 14.9986 2.70657C15.0262 2.7842 15.0689 2.85561 15.1241 2.91669C15.9904 3.88234 16.5646 5.07412 16.78 6.35335C16.8074 6.51691 16.8986 6.66287 17.0337 6.75914C17.1005 6.80681 17.1761 6.84084 17.2561 6.85929C17.3361 6.87775 17.419 6.88026 17.5 6.86669C17.581 6.85312 17.6585 6.82373 17.7281 6.7802C17.7977 6.73668 17.8581 6.67986 17.9058 6.613C17.9534 6.54614 17.9875 6.47055 18.0059 6.39054C18.0244 6.31053 18.0269 6.22767 18.0133 6.14669C17.7584 4.63414 17.0801 3.22506 16.0558 2.08336Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> = ({ iconColorClassName, ...props }) => { d="M9.99985 1.875C8.50801 1.875 7.07727 2.46763 6.02237 3.52252C4.96748 4.57742 4.37485 6.00816 4.37485 7.5V8.125C4.37741 9.82433 3.74802 11.4639 2.60902 12.725C2.54061 12.8009 2.49186 12.8924 2.46701 12.9915C2.44216 13.0906 2.44198 13.1942 2.46649 13.2934C2.491 13.3926 2.53944 13.4842 2.60758 13.5603C2.67572 13.6365 2.76148 13.6947 2.85735 13.73C4.14402 14.205 5.49068 14.555 6.88318 14.7658C6.85183 15.1943 6.90915 15.6246 7.05157 16.0299C7.19399 16.4352 7.41845 16.8068 7.71093 17.1214C8.0034 17.4361 8.35762 17.6871 8.75144 17.8587C9.14527 18.0303 9.57025 18.1189 9.99985 18.1189C10.4294 18.1189 10.8544 18.0303 11.2483 17.8587C11.6421 17.6871 11.9963 17.4361 12.2888 17.1214C12.5812 16.8068 12.8057 16.4352 12.9481 16.0299C13.0905 15.6246 13.1479 15.1943 13.1165 14.7658C14.4899 14.5576 15.8385 14.2103 17.1415 13.7292C17.2372 13.6938 17.3229 13.6356 17.3909 13.5595C17.4589 13.4835 17.5073 13.3919 17.5318 13.2929C17.5563 13.1938 17.5561 13.0903 17.5314 12.9913C17.5067 12.8923 17.4581 12.8009 17.3898 12.725C16.2511 11.4638 15.6221 9.82422 15.6248 8.125V7.5C15.6248 6.00816 15.0322 4.57742 13.9773 3.52252C12.9224 2.46763 11.4917 1.875 9.99985 1.875ZM8.12485 15C8.12485 14.9717 8.12485 14.9442 8.12652 14.9167C9.37288 15.029 10.6268 15.029 11.8732 14.9167L11.8748 15C11.8748 15.4973 11.6773 15.9742 11.3257 16.3258C10.974 16.6775 10.4971 16.875 9.99985 16.875C9.50257 16.875 9.02566 16.6775 8.67402 16.3258C8.32239 15.9742 8.12485 15.4973 8.12485 15Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/BellAlertSolid/index.tsx b/www/docs/src/theme/Icon/BellAlertSolid/index.tsx index f22eb30c8e..1a07cd50cd 100644 --- a/www/docs/src/theme/Icon/BellAlertSolid/index.tsx +++ b/www/docs/src/theme/Icon/BellAlertSolid/index.tsx @@ -18,7 +18,7 @@ const IconBellAlertSolid: React.FC = ({ d="M4.875 2.91669C4.97932 2.79237 5.03119 2.63234 5.01964 2.47046C5.00809 2.30858 4.93402 2.15754 4.81311 2.04929C4.69219 1.94104 4.53391 1.88407 4.37174 1.89043C4.20957 1.89678 4.05624 1.96597 3.94417 2.08336C2.92039 3.22523 2.24186 4.63431 1.9875 6.14669C1.96397 6.3084 2.00472 6.4729 2.10101 6.60494C2.19729 6.73697 2.34147 6.82604 2.50263 6.85307C2.6638 6.88009 2.82914 6.84292 2.96323 6.74951C3.09732 6.65611 3.18949 6.5139 3.22 6.35335C3.43511 5.0742 4.00904 3.88242 4.875 2.91669ZM16.0558 2.08336C16.0013 2.02163 15.935 1.97131 15.861 1.93527C15.7869 1.89924 15.7064 1.87821 15.6242 1.87339C15.5419 1.86856 15.4595 1.88005 15.3818 1.90718C15.304 1.93431 15.2323 1.97655 15.1709 2.03147C15.1095 2.0864 15.0596 2.15291 15.024 2.22721C14.9884 2.3015 14.9678 2.38209 14.9634 2.46436C14.9591 2.54663 14.9711 2.62894 14.9987 2.70657C15.0262 2.7842 15.0689 2.85561 15.1242 2.91669C15.9904 3.88234 16.5646 5.07412 16.78 6.35335C16.8074 6.51691 16.8987 6.66287 17.0337 6.75914C17.1005 6.80681 17.1761 6.84084 17.2561 6.85929C17.3362 6.87775 17.419 6.88026 17.5 6.86669C17.581 6.85312 17.6585 6.82373 17.7281 6.7802C17.7977 6.73668 17.8581 6.67986 17.9058 6.613C17.9535 6.54614 17.9875 6.47055 18.0059 6.39054C18.0244 6.31053 18.0269 6.22767 18.0133 6.14669C17.7585 4.63414 17.0802 3.22506 16.0558 2.08336Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> = ({ d="M10 1.875C8.50816 1.875 7.07742 2.46763 6.02253 3.52252C4.96763 4.57742 4.375 6.00816 4.375 7.5V8.125C4.37757 9.82433 3.74817 11.4639 2.60917 12.725C2.54077 12.8009 2.49201 12.8924 2.46716 12.9915C2.44232 13.0906 2.44214 13.1942 2.46664 13.2934C2.49115 13.3926 2.53959 13.4842 2.60773 13.5603C2.67587 13.6365 2.76163 13.6947 2.8575 13.73C4.14417 14.205 5.49084 14.555 6.88334 14.7658C6.85198 15.1943 6.90931 15.6246 7.05173 16.0299C7.19415 16.4352 7.4186 16.8068 7.71108 17.1214C8.00356 17.4361 8.35777 17.6871 8.7516 17.8587C9.14542 18.0303 9.57041 18.1189 10 18.1189C10.4296 18.1189 10.8546 18.0303 11.2484 17.8587C11.6422 17.6871 11.9964 17.4361 12.2889 17.1214C12.5814 16.8068 12.8059 16.4352 12.9483 16.0299C13.0907 15.6246 13.148 15.1943 13.1167 14.7658C14.49 14.5576 15.8386 14.2103 17.1417 13.7292C17.2374 13.6938 17.323 13.6356 17.391 13.5595C17.4591 13.4835 17.5074 13.3919 17.5319 13.2929C17.5564 13.1938 17.5563 13.0903 17.5316 12.9913C17.5068 12.8923 17.4582 12.8009 17.39 12.725C16.2513 11.4638 15.6222 9.82422 15.625 8.125V7.5C15.625 6.00816 15.0324 4.57742 13.9775 3.52252C12.9226 2.46763 11.4918 1.875 10 1.875ZM8.125 15C8.125 14.9717 8.125 14.9442 8.12667 14.9167C9.37303 15.029 10.627 15.029 11.8733 14.9167L11.875 15C11.875 15.4973 11.6775 15.9742 11.3258 16.3258C10.9742 16.6775 10.4973 16.875 10 16.875C9.50272 16.875 9.02581 16.6775 8.67418 16.3258C8.32255 15.9742 8.125 15.4973 8.125 15Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/Bolt/index.tsx b/www/docs/src/theme/Icon/Bolt/index.tsx index 632add84eb..3d3f56b3ad 100644 --- a/www/docs/src/theme/Icon/Bolt/index.tsx +++ b/www/docs/src/theme/Icon/Bolt/index.tsx @@ -15,7 +15,7 @@ const IconBolt: React.FC = ({ iconColorClassName, ...props }) => { d="M3.125 11.25L11.875 1.875L10 8.75H16.875L8.125 18.125L10 11.25H3.125Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/BoltSolid/index.tsx b/www/docs/src/theme/Icon/BoltSolid/index.tsx index db96fe67ad..bee12e4684 100644 --- a/www/docs/src/theme/Icon/BoltSolid/index.tsx +++ b/www/docs/src/theme/Icon/BoltSolid/index.tsx @@ -20,7 +20,7 @@ const IconBoltSolid: React.FC = ({ d="M12.0339 1.57679C12.1478 1.64276 12.2372 1.74652 12.2878 1.87153C12.3384 1.99653 12.3473 2.13558 12.3131 2.26648L10.7638 8.17823H16.4167C16.5304 8.17824 16.6416 8.21282 16.7366 8.27772C16.8317 8.34262 16.9065 8.43501 16.9517 8.54354C16.997 8.65206 17.0108 8.772 16.9915 8.88859C16.9722 9.00518 16.9205 9.11336 16.8429 9.19982L8.67622 18.3067C8.58727 18.4061 8.46885 18.4715 8.33992 18.4926C8.21099 18.5137 8.07899 18.4892 7.96502 18.423C7.85106 18.3568 7.76172 18.2527 7.7113 18.1274C7.66087 18.0022 7.65227 17.8629 7.68688 17.7319L9.23622 11.821H3.5833C3.46962 11.821 3.35842 11.7864 3.26336 11.7215C3.16831 11.6566 3.09355 11.5642 3.04827 11.4557C3.00299 11.3471 2.98916 11.2272 3.0085 11.1106C3.02783 10.994 3.07947 10.8858 3.15708 10.7994L11.3238 1.69255C11.4127 1.5935 11.531 1.52829 11.6597 1.50731C11.7884 1.48633 11.9201 1.51079 12.0339 1.57679Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/BookOpen/index.tsx b/www/docs/src/theme/Icon/BookOpen/index.tsx index 9c0c7c025d..853f315edf 100644 --- a/www/docs/src/theme/Icon/BookOpen/index.tsx +++ b/www/docs/src/theme/Icon/BookOpen/index.tsx @@ -18,7 +18,7 @@ const IconBookOpen: React.FC = ({ d="M10 5.03501C8.62634 3.80281 6.84533 3.12246 5 3.12501C4.12333 3.12501 3.28167 3.27501 2.5 3.55167V15.4267C3.30302 15.1434 4.14847 14.9991 5 15C6.92083 15 8.67333 15.7225 10 16.91M10 5.03501C11.3736 3.80274 13.1547 3.12238 15 3.12501C15.8767 3.12501 16.7183 3.27501 17.5 3.55167V15.4267C16.697 15.1434 15.8515 14.9991 15 15C13.1547 14.9975 11.3737 15.6778 10 16.91M10 5.03501V16.91" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/Bug/index.tsx b/www/docs/src/theme/Icon/Bug/index.tsx index 269b53af34..0a83caa743 100644 --- a/www/docs/src/theme/Icon/Bug/index.tsx +++ b/www/docs/src/theme/Icon/Bug/index.tsx @@ -15,7 +15,7 @@ const IconBug: React.FC = ({ iconColorClassName, ...props }) => { d="M10.0003 10.6153C10.9415 10.6153 11.8679 10.6809 12.7739 10.8097C13.6241 10.9294 14.3037 11.6016 14.3037 12.46C14.3037 15.5164 12.3771 17.994 9.99951 17.994C7.62194 17.994 5.69611 15.5164 5.69611 12.46C5.69611 11.6024 6.37659 10.9294 7.22595 10.8097C8.14506 10.6801 9.07213 10.6152 10.0003 10.6153ZM10.0003 10.6153C12.364 10.6153 14.63 11.0318 16.7288 11.7959C16.6299 13.4859 16.3124 15.1559 15.7844 16.7642M10.0003 10.6153C7.6367 10.6153 5.37063 11.0318 3.271 11.7959C3.37348 13.5209 3.69732 15.1868 4.21628 16.7642M10.0003 10.6153C10.2498 10.6154 10.4966 10.5648 10.726 10.4668C10.9554 10.3687 11.1624 10.2251 11.3347 10.0447C11.507 9.86427 11.6409 9.6508 11.7283 9.41717C11.8157 9.18354 11.8549 8.93461 11.8433 8.68542M10.0003 10.6153C9.75087 10.6154 9.50401 10.5648 9.27465 10.4668C9.04529 10.3687 8.83821 10.2251 8.66593 10.0447C8.49365 9.86427 8.35975 9.6508 8.27233 9.41717C8.1849 9.18354 8.14577 8.93461 8.1573 8.68542M11.8433 8.68542C11.8214 8.2114 11.6176 7.76406 11.2744 7.43639C10.9312 7.10873 10.4749 6.92594 10.0003 6.92602M11.8433 8.68542C13.2994 8.55055 14.7365 8.25301 16.1262 7.79834C16.0812 6.87437 15.9729 5.9668 15.8049 5.08136M8.1573 8.68542C8.17924 8.2114 8.383 7.76406 8.72624 7.43639C9.06948 7.10873 9.52579 6.92594 10.0003 6.92602M8.1573 8.68542C6.67583 8.54769 5.24274 8.24598 3.87523 7.79834C3.91931 6.88633 4.02669 5.97849 4.19661 5.08136M10.0003 6.92602C10.8161 6.92602 11.6163 6.86044 12.3959 6.73254C12.7263 6.67843 13.0026 6.43903 13.0477 6.10781C13.1317 5.4739 13.0174 4.82953 12.7206 4.26315M10.0003 6.92602C9.18457 6.92602 8.38522 6.86044 7.60472 6.73254C7.27514 6.67843 6.99803 6.43903 6.95294 6.10781C6.86626 5.47296 6.98096 4.82691 7.28088 4.26069M7.28088 4.26069C6.93167 4.02814 6.61347 3.75291 6.33396 3.44002C6.39135 2.92352 6.55532 2.43816 6.80455 2.00774M7.28088 4.26069C7.54188 3.76545 7.93313 3.35169 8.41244 3.06249C8.89176 2.77329 9.44093 2.62045 10.0007 2.62045C10.5605 2.62045 11.1097 2.77329 11.589 3.06249C12.0683 3.35169 12.4596 3.76627 12.7206 4.26151C13.0707 4.02949 13.3888 3.7532 13.6675 3.44248C13.6119 2.93613 13.4513 2.44694 13.1961 2.0061" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/BugAntSolid/index.tsx b/www/docs/src/theme/Icon/BugAntSolid/index.tsx index 1e91af040f..ee741bd93c 100644 --- a/www/docs/src/theme/Icon/BugAntSolid/index.tsx +++ b/www/docs/src/theme/Icon/BugAntSolid/index.tsx @@ -20,7 +20,7 @@ const IconBugAntSolid: React.FC = ({ d="M6.7881 1.72723C6.93928 1.83478 7.0416 1.99794 7.07259 2.18088C7.10357 2.36381 7.06069 2.55156 6.95335 2.7029C6.77659 2.95179 6.63109 3.22146 6.52014 3.50585C6.69286 3.66457 6.87679 3.81302 7.071 3.94747C7.42032 3.50522 7.86536 3.14792 8.37266 2.90243C8.87996 2.65695 9.43631 2.52967 9.99988 2.53018C11.1875 2.53018 12.2453 3.08477 12.9288 3.94747C13.123 3.81302 13.3069 3.66551 13.4796 3.50585C13.3687 3.22146 13.2232 2.95179 13.0464 2.7029C12.9446 2.55142 12.9059 2.36617 12.9387 2.1866C12.9714 2.00703 13.073 1.84735 13.2217 1.74157C13.3705 1.63579 13.5547 1.59227 13.735 1.62028C13.9154 1.6483 14.0777 1.74564 14.1873 1.89155C14.5319 2.37612 14.7942 2.92325 14.9548 3.51239C14.986 3.62715 14.9875 3.74798 14.9591 3.86347C14.9306 3.97896 14.8733 4.08531 14.7924 4.17248C14.4311 4.56203 14.0238 4.90627 13.5795 5.19764C13.6825 5.54399 13.7348 5.90346 13.7345 6.26481C13.7345 6.75032 13.4535 7.16393 13.0595 7.37307C12.7135 7.55658 12.3516 7.70846 11.9783 7.82682C12.0997 8.02102 12.194 8.2339 12.2547 8.46078C13.5739 8.29832 14.8493 7.99395 16.0649 7.56447C16.0796 6.84172 16.0515 6.11874 15.9809 5.39931C15.972 5.30778 15.9811 5.21539 16.0079 5.1274C16.0346 5.03942 16.0785 4.95756 16.1368 4.88651C16.1952 4.81546 16.2671 4.75661 16.3482 4.71331C16.4293 4.67002 16.5182 4.64313 16.6097 4.63418C16.7012 4.62523 16.7936 4.63439 16.8816 4.66115C16.9696 4.68791 17.0515 4.73173 17.1225 4.79012C17.1936 4.84851 17.2524 4.92033 17.2957 5.00146C17.339 5.0826 17.3659 5.17147 17.3749 5.263C17.467 6.20239 17.492 7.14717 17.4495 8.09012C17.4434 8.22648 17.3975 8.35808 17.3176 8.46872C17.2376 8.57937 17.1271 8.66423 16.9995 8.71287C15.4519 9.30451 13.8351 9.69638 12.1884 9.87901C12.1592 9.95761 12.1259 10.0346 12.0885 10.1096C13.7673 10.2866 15.4159 10.6811 16.993 11.2832C17.1311 11.3363 17.2489 11.4317 17.3294 11.5558C17.4099 11.68 17.449 11.8264 17.4411 11.9741C17.3575 13.5925 17.0731 15.1942 16.5943 16.7423C16.5671 16.8302 16.5228 16.9118 16.4641 16.9826C16.4053 17.0533 16.3332 17.1118 16.2518 17.1547C16.1705 17.1975 16.0814 17.224 15.9899 17.2324C15.8983 17.2409 15.8059 17.2312 15.7181 17.204C15.6302 17.1768 15.5486 17.1325 15.4779 17.0738C15.4071 17.015 15.3486 16.9429 15.3058 16.8615C15.2629 16.7802 15.2365 16.6911 15.228 16.5996C15.2195 16.508 15.2292 16.4156 15.2564 16.3278C15.6439 15.0767 15.9006 13.7668 16.0089 12.4158C15.5468 12.2533 15.0753 12.1095 14.5972 11.9853C14.6439 12.2505 14.6682 12.5222 14.6682 12.8004C14.6682 14.4941 14.1855 15.8927 13.3368 16.8805C12.9258 17.3628 12.4139 17.7491 11.8374 18.0121C11.2608 18.275 10.6336 18.4083 9.99988 18.4024C9.36622 18.4082 8.739 18.2749 8.16244 18.012C7.58589 17.749 7.07404 17.3628 6.66299 16.8805C5.81336 15.8918 5.33159 14.4931 5.33159 12.8004C5.33159 12.5222 5.35586 12.2496 5.40255 11.9853C4.92358 12.1095 4.45302 12.2533 3.99086 12.4148C4.09916 13.7668 4.35498 15.0757 4.74338 16.3278C4.79836 16.5052 4.7806 16.6972 4.69401 16.8615C4.60743 17.0259 4.45911 17.1491 4.28169 17.204C4.10427 17.259 3.91228 17.2412 3.74795 17.1547C3.58362 17.0681 3.46042 16.9198 3.40545 16.7423C2.92634 15.1942 2.64157 13.5925 2.55769 11.9741C2.54996 11.8262 2.58936 11.6796 2.67023 11.5554C2.75109 11.4313 2.86925 11.336 3.00771 11.2832C4.58447 10.6812 6.23281 10.2867 7.91129 10.1096C7.87384 10.0346 7.84049 9.95763 7.81139 9.87901C6.16462 9.69638 4.54787 9.30451 3.00024 8.71287C2.8727 8.66423 2.76215 8.57937 2.68219 8.46872C2.60224 8.35808 2.55637 8.22648 2.55022 8.09012C2.50813 7.14716 2.53309 6.20241 2.62491 5.263C2.63386 5.17147 2.66075 5.0826 2.70405 5.00146C2.74734 4.92033 2.8062 4.84851 2.87725 4.79012C2.9483 4.73173 3.03015 4.68791 3.11814 4.66115C3.20612 4.63439 3.29852 4.62523 3.39005 4.63418C3.48157 4.64313 3.57044 4.67002 3.65158 4.71331C3.73271 4.75661 3.80453 4.81546 3.86292 4.88651C3.92131 4.95756 3.96514 5.03942 3.99189 5.1274C4.01865 5.21539 4.02782 5.30778 4.01887 5.39931C3.94839 6.11907 3.92033 6.84235 3.93484 7.5654C5.15046 7.99395 6.42584 8.29832 7.74416 8.46078C7.80579 8.2339 7.89915 8.02102 8.02146 7.82682C7.64813 7.70845 7.28627 7.55658 6.94028 7.37307C6.73772 7.26707 6.56785 7.1079 6.44892 6.91264C6.32999 6.71739 6.2665 6.49343 6.26525 6.26481C6.26501 5.90346 6.31722 5.54399 6.42024 5.19764C5.97564 4.90631 5.56807 4.56207 5.20648 4.17248C5.12573 4.08522 5.06853 3.97883 5.04027 3.86334C5.01202 3.74786 5.01363 3.62708 5.04496 3.51239C5.20336 2.93114 5.46317 2.38243 5.81242 1.89155C5.86576 1.81664 5.93332 1.75296 6.01127 1.70415C6.08921 1.65535 6.17601 1.62238 6.26669 1.60712C6.35738 1.59186 6.45018 1.59461 6.53981 1.61522C6.62943 1.63583 6.71318 1.67389 6.7881 1.72723Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/BuildingSolid/index.tsx b/www/docs/src/theme/Icon/BuildingSolid/index.tsx index 4120b52f03..e8dc50b7e9 100644 --- a/www/docs/src/theme/Icon/BuildingSolid/index.tsx +++ b/www/docs/src/theme/Icon/BuildingSolid/index.tsx @@ -20,7 +20,7 @@ const IconBuildingSolid: React.FC = ({ d="M13.8927 4.15414V7.27547H16.2399C16.6442 7.27547 17.0319 7.43606 17.3177 7.72192C17.6036 8.00777 17.7642 8.39547 17.7642 8.79973V15.7922H17.7885C18.2027 15.7922 18.5385 16.128 18.5385 16.5422C18.5385 16.9564 18.2027 17.2922 17.7885 17.2922H17.0218L17.0142 17.2923L17.0065 17.2922H2.30347C1.88925 17.2922 1.55347 16.9564 1.55347 16.5422C1.55347 16.128 1.88925 15.7922 2.30347 15.7922H2.32739V4.15414C2.32739 3.74988 2.48798 3.36218 2.77384 3.07633C3.05969 2.79047 3.44739 2.62988 3.85165 2.62988H12.3684C12.7727 2.62988 13.1604 2.79047 13.4462 3.07633C13.7321 3.36218 13.8927 3.74988 13.8927 4.15414ZM10.2392 15.8862C9.88026 15.8862 9.58924 15.5952 9.58924 15.2362V13.859H6.63086V15.2362C6.63086 15.5952 6.33984 15.8862 5.98085 15.8862C5.62187 15.8862 5.33085 15.5952 5.33085 15.2362V13.209C5.33085 12.85 5.62187 12.559 5.98085 12.559H10.2392C10.5982 12.559 10.8892 12.85 10.8892 13.209V15.2362C10.8892 15.5952 10.5982 15.8862 10.2392 15.8862ZM5.98065 9.21094C5.56644 9.21094 5.23065 9.54672 5.23065 9.96094C5.23065 10.3752 5.56644 10.7109 5.98065 10.7109H10.2391C10.6533 10.7109 10.9891 10.3752 10.9891 9.96094C10.9891 9.54672 10.6533 9.21094 10.2391 9.21094H5.98065ZM15.4614 15.884C15.0472 15.884 14.7114 15.5482 14.7114 15.134V9.96098C14.7114 9.54677 15.0472 9.21098 15.4614 9.21098C15.8756 9.21098 16.2114 9.54677 16.2114 9.96098V15.134C16.2114 15.5482 15.8756 15.884 15.4614 15.884ZM5.98065 5.9021C5.56644 5.9021 5.23065 6.23789 5.23065 6.6521C5.23065 7.06631 5.56644 7.4021 5.98065 7.4021H10.2391C10.6533 7.4021 10.9891 7.06631 10.9891 6.6521C10.9891 6.23789 10.6533 5.9021 10.2391 5.9021H5.98065Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/BuildingStorefront/index.tsx b/www/docs/src/theme/Icon/BuildingStorefront/index.tsx index d75dbaf7be..ae7a26d6a0 100644 --- a/www/docs/src/theme/Icon/BuildingStorefront/index.tsx +++ b/www/docs/src/theme/Icon/BuildingStorefront/index.tsx @@ -18,7 +18,7 @@ const IconBuildingStorefront: React.FC = ({ d="M11.25 17.5V11.25C11.25 11.0842 11.3159 10.9253 11.4331 10.8081C11.5503 10.6908 11.7093 10.625 11.875 10.625H14.375C14.5408 10.625 14.6997 10.6908 14.817 10.8081C14.9342 10.9253 15 11.0842 15 11.25V17.5M11.25 17.5H1.96668M11.25 17.5H15M15 17.5H18.0333M16.875 17.5V7.79083C17.2072 7.59909 17.4908 7.33349 17.7038 7.01459C17.9169 6.6957 18.0538 6.33205 18.1038 5.95179C18.1538 5.57154 18.1157 5.18487 17.9924 4.82171C17.869 4.45855 17.6638 4.12864 17.3925 3.8575L16.4008 2.86667C16.1667 2.63218 15.8489 2.50029 15.5175 2.5H4.48168C4.15027 2.50029 3.83254 2.63218 3.59835 2.86667L2.60751 3.85667C2.33688 4.12811 2.13219 4.45809 2.00924 4.82114C1.88628 5.1842 1.84834 5.57064 1.89834 5.95068C1.94834 6.33072 2.08495 6.6942 2.29763 7.01309C2.5103 7.33199 2.79337 7.59779 3.12501 7.79M3.12501 17.4992V7.79167C3.62503 8.07999 4.20939 8.18647 4.77897 8.09306C5.34855 7.99965 5.86828 7.71209 6.25001 7.27917C6.48443 7.54537 6.77293 7.75852 7.09626 7.90437C7.41959 8.05023 7.77031 8.12545 8.12501 8.125C8.87168 8.125 9.54168 7.7975 10 7.27833C10.2344 7.54469 10.5228 7.75799 10.8462 7.90399C11.1695 8.05 11.5202 8.12534 11.875 8.125C12.6217 8.125 13.2917 7.7975 13.75 7.27833C14.1319 7.71112 14.6516 7.99852 15.2212 8.09178C15.7908 8.18504 16.3751 8.07842 16.875 7.79M5.62501 14.9992H8.75001C8.91577 14.9992 9.07474 14.9333 9.19195 14.8161C9.30916 14.6989 9.37501 14.5399 9.37501 14.3742V11.25C9.37501 11.0842 9.30916 10.9253 9.19195 10.8081C9.07474 10.6908 8.91577 10.625 8.75001 10.625H5.62501C5.45925 10.625 5.30028 10.6908 5.18307 10.8081C5.06586 10.9253 5.00001 11.0842 5.00001 11.25V14.375C5.00001 14.7208 5.28001 14.9992 5.62501 14.9992Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/BuildingTax/index.tsx b/www/docs/src/theme/Icon/BuildingTax/index.tsx index 8f94a4f12a..aada037c9b 100644 --- a/www/docs/src/theme/Icon/BuildingTax/index.tsx +++ b/www/docs/src/theme/Icon/BuildingTax/index.tsx @@ -18,7 +18,7 @@ const IconBuildingTax: React.FC = ({ d="M17.5 7.5H2.5V5.83333L10 2.5L17.5 5.83333V7.5Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1" strokeLinejoin="round" @@ -27,7 +27,7 @@ const IconBuildingTax: React.FC = ({ d="M8.33333 16.6666H2.5L3.22917 14.1666H8.33333" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1" strokeLinecap="round" @@ -37,7 +37,7 @@ const IconBuildingTax: React.FC = ({ d="M4.16667 7.5V14.1667M7.50001 14.1667V7.5" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1" /> @@ -45,7 +45,7 @@ const IconBuildingTax: React.FC = ({ d="M17.1354 11.1979L12.0312 16.302" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1" strokeLinecap="round" @@ -55,7 +55,7 @@ const IconBuildingTax: React.FC = ({ d="M12.2917 12.0834C12.6368 12.0834 12.9167 11.8036 12.9167 11.4584C12.9167 11.1132 12.6368 10.8334 12.2917 10.8334C11.9465 10.8334 11.6667 11.1132 11.6667 11.4584C11.6667 11.8036 11.9465 12.0834 12.2917 12.0834Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1" strokeLinecap="round" @@ -65,7 +65,7 @@ const IconBuildingTax: React.FC = ({ d="M16.875 16.6666C17.2202 16.6666 17.5 16.3868 17.5 16.0416C17.5 15.6964 17.2202 15.4166 16.875 15.4166C16.5298 15.4166 16.25 15.6964 16.25 16.0416C16.25 16.3868 16.5298 16.6666 16.875 16.6666Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/Calendar/index.tsx b/www/docs/src/theme/Icon/Calendar/index.tsx index 8a1e6819af..fd3e82f078 100644 --- a/www/docs/src/theme/Icon/Calendar/index.tsx +++ b/www/docs/src/theme/Icon/Calendar/index.tsx @@ -18,7 +18,7 @@ const IconCalendar: React.FC = ({ d="M5.625 2.5V4.375M14.375 2.5V4.375M2.5 15.625V6.25C2.5 5.75272 2.69754 5.27581 3.04917 4.92417C3.40081 4.57254 3.87772 4.375 4.375 4.375H15.625C16.1223 4.375 16.5992 4.57254 16.9508 4.92417C17.3025 5.27581 17.5 5.75272 17.5 6.25V15.625M2.5 15.625C2.5 16.1223 2.69754 16.5992 3.04917 16.9508C3.40081 17.3025 3.87772 17.5 4.375 17.5H15.625C16.1223 17.5 16.5992 17.3025 16.9508 16.9508C17.3025 16.5992 17.5 16.1223 17.5 15.625M2.5 15.625V9.375C2.5 8.87772 2.69754 8.40081 3.04917 8.04917C3.40081 7.69754 3.87772 7.5 4.375 7.5H15.625C16.1223 7.5 16.5992 7.69754 16.9508 8.04917C17.3025 8.40081 17.5 8.87772 17.5 9.375V15.625" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/CashSolid/index.tsx b/www/docs/src/theme/Icon/CashSolid/index.tsx index 4590f16e2a..b2d4918cbc 100644 --- a/www/docs/src/theme/Icon/CashSolid/index.tsx +++ b/www/docs/src/theme/Icon/CashSolid/index.tsx @@ -20,7 +20,7 @@ const IconCashSolid: React.FC = ({ d="M1 4C1 3.73478 1.10536 3.48043 1.29289 3.29289C1.48043 3.10536 1.73478 3 2 3H18C18.2652 3 18.5196 3.10536 18.7071 3.29289C18.8946 3.48043 19 3.73478 19 4V12C19 12.2652 18.8946 12.5196 18.7071 12.7071C18.5196 12.8946 18.2652 13 18 13H2C1.73478 13 1.48043 12.8946 1.29289 12.7071C1.10536 12.5196 1 12.2652 1 12V4ZM13 8C13 8.79565 12.6839 9.55871 12.1213 10.1213C11.5587 10.6839 10.7956 11 10 11C9.20435 11 8.44129 10.6839 7.87868 10.1213C7.31607 9.55871 7 8.79565 7 8C7 7.20435 7.31607 6.44129 7.87868 5.87868C8.44129 5.31607 9.20435 5 10 5C10.7956 5 11.5587 5.31607 12.1213 5.87868C12.6839 6.44129 13 7.20435 13 8ZM4 9C4.26522 9 4.51957 8.89464 4.70711 8.70711C4.89464 8.51957 5 8.26522 5 8C5 7.73478 4.89464 7.48043 4.70711 7.29289C4.51957 7.10536 4.26522 7 4 7C3.73478 7 3.48043 7.10536 3.29289 7.29289C3.10536 7.48043 3 7.73478 3 8C3 8.26522 3.10536 8.51957 3.29289 8.70711C3.48043 8.89464 3.73478 9 4 9ZM17 8C17 8.26522 16.8946 8.51957 16.7071 8.70711C16.5196 8.89464 16.2652 9 16 9C15.7348 9 15.4804 8.89464 15.2929 8.70711C15.1054 8.51957 15 8.26522 15 8C15 7.73478 15.1054 7.48043 15.2929 7.29289C15.4804 7.10536 15.7348 7 16 7C16.2652 7 16.5196 7.10536 16.7071 7.29289C16.8946 7.48043 17 7.73478 17 8ZM1.75 14.5C1.55109 14.5 1.36032 14.579 1.21967 14.7197C1.07902 14.8603 1 15.0511 1 15.25C1 15.4489 1.07902 15.6397 1.21967 15.7803C1.36032 15.921 1.55109 16 1.75 16C6.167 16 10.443 16.603 14.499 17.73C15.61 18.039 16.75 17.218 16.75 16.034V15.25C16.75 15.0511 16.671 14.8603 16.5303 14.7197C16.3897 14.579 16.1989 14.5 16 14.5C15.8011 14.5 15.6103 14.579 15.4697 14.7197C15.329 14.8603 15.25 15.0511 15.25 15.25V16.034C15.2484 16.0755 15.2373 16.1161 15.2176 16.1526C15.1979 16.1891 15.1701 16.2207 15.1363 16.2448C15.1025 16.269 15.0637 16.285 15.0227 16.2918C14.9817 16.2986 14.9398 16.2959 14.9 16.284C10.6177 15.0963 6.19392 14.4961 1.75 14.5Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/Channels/index.tsx b/www/docs/src/theme/Icon/Channels/index.tsx index 10c9166f03..9cfeca9494 100644 --- a/www/docs/src/theme/Icon/Channels/index.tsx +++ b/www/docs/src/theme/Icon/Channels/index.tsx @@ -18,7 +18,7 @@ const IconChannels: React.FC = ({ d="M14.7189 5.875C15.6509 5.875 16.4064 5.11948 16.4064 4.1875C16.4064 3.25552 15.6509 2.5 14.7189 2.5C13.7869 2.5 13.0314 3.25552 13.0314 4.1875C13.0314 5.11948 13.7869 5.875 14.7189 5.875Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1" strokeLinecap="round" @@ -28,7 +28,7 @@ const IconChannels: React.FC = ({ d="M14.7189 11.6875C15.6509 11.6875 16.4064 10.932 16.4064 10C16.4064 9.06802 15.6509 8.3125 14.7189 8.3125C13.7869 8.3125 13.0314 9.06802 13.0314 10C13.0314 10.932 13.7869 11.6875 14.7189 11.6875Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1" strokeLinecap="round" @@ -38,7 +38,7 @@ const IconChannels: React.FC = ({ d="M4.5936 11.6875C5.52558 11.6875 6.2811 10.932 6.2811 10C6.2811 9.06802 5.52558 8.3125 4.5936 8.3125C3.66162 8.3125 2.9061 9.06802 2.9061 10C2.9061 10.932 3.66162 11.6875 4.5936 11.6875Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1" strokeLinecap="round" @@ -48,7 +48,7 @@ const IconChannels: React.FC = ({ d="M14.7189 17.5C15.6509 17.5 16.4064 16.7445 16.4064 15.8125C16.4064 14.8805 15.6509 14.125 14.7189 14.125C13.7869 14.125 13.0314 14.8805 13.0314 15.8125C13.0314 16.7445 13.7869 17.5 14.7189 17.5Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1" strokeLinecap="round" @@ -58,7 +58,7 @@ const IconChannels: React.FC = ({ d="M13.0308 4.1875H11.1558C10.327 4.1875 9.65576 4.85875 9.65576 5.6875V14.3125C9.65576 15.1413 10.327 15.8125 11.1558 15.8125H13.0308" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1" strokeLinecap="round" @@ -68,7 +68,7 @@ const IconChannels: React.FC = ({ d="M13.0301 10H6.28012" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/ChannelsSolid/index.tsx b/www/docs/src/theme/Icon/ChannelsSolid/index.tsx index d75d696b72..0e424a05a4 100644 --- a/www/docs/src/theme/Icon/ChannelsSolid/index.tsx +++ b/www/docs/src/theme/Icon/ChannelsSolid/index.tsx @@ -20,7 +20,7 @@ const IconChannelsSolid: React.FC = ({ d="M12.3989 3.43751C12.7152 2.45828 13.6343 1.75 14.7188 1.75C16.065 1.75 17.1563 2.84131 17.1563 4.1875C17.1563 5.53369 16.065 6.625 14.7188 6.625C13.6343 6.625 12.7152 5.91673 12.3989 4.93751L11.1557 4.93752C10.7411 4.93752 10.4057 5.27298 10.4057 5.68752V9.24999L12.3989 9.25C12.7152 8.27076 13.6343 7.56248 14.7188 7.56248C16.065 7.56248 17.1563 8.65379 17.1563 9.99998C17.1563 11.3462 16.065 12.4375 14.7188 12.4375C13.6343 12.4375 12.7152 11.7292 12.3989 10.75L10.4057 10.75V14.3125C10.4057 14.727 10.7411 15.0625 11.1557 15.0625L12.3989 15.0625C12.7152 14.0832 13.6343 13.375 14.7188 13.375C16.065 13.375 17.1563 14.4663 17.1563 15.8125C17.1563 17.1587 16.065 18.25 14.7188 18.25C13.6343 18.25 12.7152 17.5417 12.3989 16.5625L11.1557 16.5625C9.91274 16.5625 8.90568 15.5555 8.90568 14.3125V10.75L6.91344 10.75C6.59711 11.7292 5.67802 12.4375 4.59351 12.4375C3.24731 12.4375 2.15601 11.3462 2.15601 9.99998C2.15601 8.65379 3.24731 7.56248 4.59351 7.56248C5.67802 7.56248 6.59711 8.27076 6.91344 9.24998L8.90568 9.24999V5.68752C8.90568 4.44456 9.91272 3.43752 11.1557 3.43752L12.3989 3.43751Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/CheckCircleSolid/index.tsx b/www/docs/src/theme/Icon/CheckCircleSolid/index.tsx index 23bf2840c8..e627978c93 100644 --- a/www/docs/src/theme/Icon/CheckCircleSolid/index.tsx +++ b/www/docs/src/theme/Icon/CheckCircleSolid/index.tsx @@ -20,7 +20,7 @@ const IconCheckCircleSolid: React.FC = ({ d="M10 18C12.1217 18 14.1566 17.1571 15.6569 15.6569C17.1571 14.1566 18 12.1217 18 10C18 7.87827 17.1571 5.84344 15.6569 4.34315C14.1566 2.84285 12.1217 2 10 2C7.87827 2 5.84344 2.84285 4.34315 4.34315C2.84285 5.84344 2 7.87827 2 10C2 12.1217 2.84285 14.1566 4.34315 15.6569C5.84344 17.1571 7.87827 18 10 18ZM13.857 8.191C13.9149 8.11129 13.9566 8.02095 13.9796 7.92514C14.0026 7.82933 14.0065 7.72994 13.991 7.63262C13.9756 7.5353 13.9412 7.44198 13.8897 7.35797C13.8382 7.27396 13.7707 7.20091 13.691 7.143C13.6113 7.08509 13.5209 7.04344 13.4251 7.02044C13.3293 6.99744 13.2299 6.99354 13.1326 7.00895C13.0353 7.02437 12.942 7.0588 12.858 7.11028C12.774 7.16176 12.7009 7.22929 12.643 7.309L9.16 12.099L7.28 10.219C7.21078 10.1474 7.128 10.0903 7.03647 10.051C6.94495 10.0118 6.84653 9.99114 6.74694 9.99032C6.64736 9.9895 6.54861 10.0085 6.45646 10.0463C6.3643 10.084 6.28059 10.1398 6.2102 10.2102C6.13982 10.2807 6.08417 10.3644 6.0465 10.4566C6.00883 10.5488 5.9899 10.6476 5.99081 10.7472C5.99173 10.8467 6.01246 10.9451 6.05181 11.0366C6.09116 11.1281 6.14834 11.2108 6.22 11.28L8.72 13.78C8.79663 13.8567 8.88896 13.9158 8.99065 13.9534C9.09233 13.9909 9.20094 14.006 9.30901 13.9975C9.41708 13.9891 9.52203 13.9573 9.61663 13.9044C9.71123 13.8515 9.79324 13.7787 9.857 13.691L13.857 8.191Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/ChevronDoubleLeftMiniSolid/index.tsx b/www/docs/src/theme/Icon/ChevronDoubleLeftMiniSolid/index.tsx index 8e5b1c2b69..6a0ab60020 100644 --- a/www/docs/src/theme/Icon/ChevronDoubleLeftMiniSolid/index.tsx +++ b/www/docs/src/theme/Icon/ChevronDoubleLeftMiniSolid/index.tsx @@ -20,7 +20,7 @@ const IconChevronDoubleLeftMiniSolid: React.FC = ({ d="M15.79 14.77C15.6521 14.9131 15.4629 14.9957 15.2641 14.9994C15.0654 15.0032 14.8733 14.9278 14.73 14.79L10.23 10.54C10.1574 10.47 10.0997 10.3862 10.0602 10.2934C10.0208 10.2006 10.0005 10.1008 10.0005 10C10.0005 9.89919 10.0208 9.79941 10.0602 9.70663C10.0997 9.61385 10.1574 9.52997 10.23 9.46001L14.73 5.21001C14.8002 5.13826 14.8841 5.08133 14.9767 5.0426C15.0693 5.00386 15.1687 4.98411 15.2691 4.9845C15.3695 4.9849 15.4687 5.00544 15.561 5.04491C15.6533 5.08437 15.7367 5.14196 15.8064 5.21427C15.876 5.28657 15.9304 5.37211 15.9663 5.46582C16.0023 5.55953 16.0191 5.65951 16.0157 5.75982C16.0123 5.86014 15.9888 5.95875 15.9466 6.04983C15.9044 6.1409 15.8444 6.22257 15.77 6.29001L11.832 10L15.77 13.71C15.9131 13.848 15.9957 14.0371 15.9994 14.2359C16.0032 14.4346 15.9278 14.6267 15.79 14.77ZM9.79001 14.77C9.65205 14.9131 9.46291 14.9957 9.26415 14.9994C9.06539 15.0032 8.87327 14.9278 8.73001 14.79L4.23001 10.54C4.15742 10.47 4.09968 10.3862 4.06025 10.2934C4.02081 10.2006 4.00049 10.1008 4.00049 10C4.00049 9.89919 4.02081 9.79941 4.06025 9.70663C4.09968 9.61385 4.15742 9.52997 4.23001 9.46001L8.73001 5.21001C8.8002 5.13826 8.88408 5.08133 8.97668 5.0426C9.06928 5.00386 9.16871 4.98411 9.26908 4.9845C9.36945 4.9849 9.46873 5.00544 9.56102 5.04491C9.6533 5.08437 9.73673 5.14196 9.80635 5.21427C9.87598 5.28657 9.93038 5.37211 9.96634 5.46582C10.0023 5.55953 10.0191 5.65951 10.0157 5.75982C10.0123 5.86014 9.98881 5.95875 9.9466 6.04983C9.9044 6.1409 9.84435 6.22257 9.77001 6.29001L5.83201 10L9.77001 13.71C9.91314 13.848 9.99565 14.0371 9.9994 14.2359C10.0032 14.4346 9.92784 14.6267 9.79001 14.77Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/CircleDottedLine/index.tsx b/www/docs/src/theme/Icon/CircleDottedLine/index.tsx new file mode 100644 index 0000000000..5ade5d84d9 --- /dev/null +++ b/www/docs/src/theme/Icon/CircleDottedLine/index.tsx @@ -0,0 +1,81 @@ +import React from "react" +import { IconProps } from ".." + +const IconCircleDottedLine: React.FC = ({ + iconColorClassName, + ...props +}) => { + return ( + + + + + + + + + ) +} + +export default IconCircleDottedLine diff --git a/www/docs/src/theme/Icon/CircleMiniSolid/index.tsx b/www/docs/src/theme/Icon/CircleMiniSolid/index.tsx new file mode 100644 index 0000000000..5fdfa884b3 --- /dev/null +++ b/www/docs/src/theme/Icon/CircleMiniSolid/index.tsx @@ -0,0 +1,31 @@ +import React from "react" +import { IconProps } from ".." + +const IconCircleMiniSolid: React.FC = ({ + iconColorClassName, + ...props +}) => { + return ( + + + + ) +} + +export default IconCircleMiniSolid diff --git a/www/docs/src/theme/Icon/CircleStack/index.tsx b/www/docs/src/theme/Icon/CircleStack/index.tsx index 0a1df6b852..49d67f8ff5 100644 --- a/www/docs/src/theme/Icon/CircleStack/index.tsx +++ b/www/docs/src/theme/Icon/CircleStack/index.tsx @@ -18,7 +18,7 @@ const IconCircleStack: React.FC = ({ d="M16.875 5.3125C16.875 7.21083 13.7967 8.75 10 8.75C6.20333 8.75 3.125 7.21083 3.125 5.3125M16.875 5.3125C16.875 3.41417 13.7967 1.875 10 1.875C6.20333 1.875 3.125 3.41417 3.125 5.3125M16.875 5.3125V14.6875C16.875 16.5858 13.7967 18.125 10 18.125C6.20333 18.125 3.125 16.5858 3.125 14.6875V5.3125M16.875 5.3125V8.4375M3.125 5.3125V8.4375M16.875 8.4375V11.5625C16.875 13.4608 13.7967 15 10 15C6.20333 15 3.125 13.4608 3.125 11.5625V8.4375M16.875 8.4375C16.875 10.3358 13.7967 11.875 10 11.875C6.20333 11.875 3.125 10.3358 3.125 8.4375" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.25" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/CircleStackSolid/index.tsx b/www/docs/src/theme/Icon/CircleStackSolid/index.tsx index 6fe1469b8d..54725882d2 100644 --- a/www/docs/src/theme/Icon/CircleStackSolid/index.tsx +++ b/www/docs/src/theme/Icon/CircleStackSolid/index.tsx @@ -18,28 +18,28 @@ const IconCircleStackSolid: React.FC = ({ d="M17.5 5.3125C17.5 7.55583 14.1417 9.375 10 9.375C5.85833 9.375 2.5 7.55583 2.5 5.3125C2.5 3.06917 5.85833 1.25 10 1.25C14.1417 1.25 17.5 3.06917 17.5 5.3125Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/ClockSolidMini/index.tsx b/www/docs/src/theme/Icon/ClockSolidMini/index.tsx index 8c3f8bfc29..8c18ddd9c9 100644 --- a/www/docs/src/theme/Icon/ClockSolidMini/index.tsx +++ b/www/docs/src/theme/Icon/ClockSolidMini/index.tsx @@ -20,7 +20,7 @@ const IconClockSolidMini: React.FC = ({ d="M4 10C4 6.68629 6.68629 4 10 4C13.3137 4 16 6.68629 16 10C16 13.3137 13.3137 16 10 16C6.68629 16 4 13.3137 4 10ZM10 5.75C10.4142 5.75 10.75 6.08579 10.75 6.5V9.63051L13.1914 10.2748C13.5919 10.3805 13.8309 10.7909 13.7252 11.1914C13.6195 11.5919 13.2091 11.8309 12.8086 11.7252L9.80862 10.9334C9.47938 10.8465 9.25 10.5488 9.25 10.2083V6.5C9.25 6.08579 9.58579 5.75 10 5.75Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/Close/index.tsx b/www/docs/src/theme/Icon/Close/index.tsx index e881533aae..63c7b24b3f 100644 --- a/www/docs/src/theme/Icon/Close/index.tsx +++ b/www/docs/src/theme/Icon/Close/index.tsx @@ -15,7 +15,7 @@ const IconClose: React.FC = ({ iconColorClassName, ...props }) => { d="M6 14L14 6M6 6L14 14" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth={props.strokeWidth} strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/CloudArrowUp/index.tsx b/www/docs/src/theme/Icon/CloudArrowUp/index.tsx index fac732ed8e..56c8d01cf1 100644 --- a/www/docs/src/theme/Icon/CloudArrowUp/index.tsx +++ b/www/docs/src/theme/Icon/CloudArrowUp/index.tsx @@ -18,7 +18,7 @@ const IconCloudArrowUp: React.FC = ({ d="M10.0002 13.7499V8.12494M10.0002 8.12494L12.5002 10.6249M10.0002 8.12494L7.50017 10.6249M5.62517 16.2499C4.73303 16.2509 3.86977 15.9338 3.19042 15.3555C2.51107 14.7772 2.06013 13.9757 1.9186 13.0949C1.77706 12.214 1.95419 11.3116 2.41819 10.5496C2.88218 9.78761 3.60264 9.21601 4.45017 8.93744C4.23242 7.82174 4.45747 6.6651 5.07766 5.71245C5.69785 4.75979 6.66448 4.08593 7.77285 3.83356C8.88122 3.58119 10.0443 3.77013 11.0158 4.36036C11.9873 4.9506 12.6909 5.89579 12.9777 6.99577C13.421 6.85158 13.8958 6.83423 14.3485 6.94568C14.8012 7.05713 15.2137 7.29294 15.5394 7.62647C15.8652 7.96 16.0911 8.37796 16.1918 8.83315C16.2926 9.28835 16.264 9.76263 16.1093 10.2024C16.7915 10.463 17.361 10.9542 17.719 11.5907C18.0769 12.2273 18.2008 12.969 18.069 13.6873C17.9373 14.4056 17.5583 15.0552 16.9977 15.5232C16.4372 15.9913 15.7305 16.2484 15.0002 16.2499H5.62517Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/CogSixTooth/index.tsx b/www/docs/src/theme/Icon/CogSixTooth/index.tsx index 289668f693..6a30a2e47e 100644 --- a/www/docs/src/theme/Icon/CogSixTooth/index.tsx +++ b/www/docs/src/theme/Icon/CogSixTooth/index.tsx @@ -18,7 +18,7 @@ const IconCogSixTooth: React.FC = ({ d="M7.99509 3.28333C8.07009 2.83167 8.46176 2.5 8.92009 2.5H11.0809C11.5393 2.5 11.9309 2.83167 12.0059 3.28333L12.1834 4.35083C12.2359 4.6625 12.4443 4.9225 12.7209 5.07583C12.7826 5.10917 12.8434 5.145 12.9043 5.18167C13.1743 5.345 13.5043 5.39583 13.8001 5.285L14.8143 4.905C15.0221 4.82684 15.2509 4.82498 15.46 4.89976C15.6691 4.97454 15.8448 5.1211 15.9559 5.31333L17.0359 7.18583C17.1468 7.37809 17.1859 7.60344 17.1462 7.8218C17.1065 8.04017 16.9907 8.23737 16.8193 8.37833L15.9834 9.0675C15.7393 9.2675 15.6184 9.57833 15.6243 9.89417C15.6256 9.96499 15.6256 10.0358 15.6243 10.1067C15.6184 10.4217 15.7393 10.7317 15.9826 10.9317L16.8201 11.6217C17.1734 11.9133 17.2651 12.4167 17.0368 12.8133L15.9551 14.6858C15.8441 14.878 15.6686 15.0246 15.4597 15.0996C15.2508 15.1745 15.0221 15.1729 14.8143 15.095L13.8001 14.715C13.5043 14.6042 13.1751 14.655 12.9034 14.8183C12.843 14.8551 12.7819 14.8906 12.7201 14.925C12.4443 15.0775 12.2359 15.3375 12.1834 15.6492L12.0059 16.7158C11.9309 17.1683 11.5393 17.5 11.0809 17.5H8.91926C8.46092 17.5 8.06926 17.1683 7.99426 16.7167L7.81676 15.6492C7.76509 15.3375 7.55676 15.0775 7.28009 14.9242C7.2183 14.8901 7.15717 14.8548 7.09676 14.8183C6.82592 14.655 6.49676 14.6042 6.20009 14.715L5.18592 15.095C4.9782 15.1729 4.74956 15.1747 4.54067 15.0999C4.33178 15.0251 4.15618 14.8787 4.04509 14.6867L2.96426 12.8142C2.85338 12.6219 2.8143 12.3966 2.85397 12.1782C2.89364 11.9598 3.0095 11.7626 3.18092 11.6217L4.01759 10.9325C4.26092 10.7325 4.38176 10.4217 4.37592 10.1058C4.37462 10.035 4.37462 9.96416 4.37592 9.89333C4.38176 9.57833 4.26092 9.26833 4.01759 9.06833L3.18092 8.37833C3.00971 8.23741 2.89399 8.04036 2.85432 7.82219C2.81465 7.60401 2.8536 7.37884 2.96426 7.18667L4.04509 5.31417C4.15608 5.12178 4.33177 4.97505 4.54085 4.90011C4.74993 4.82518 4.97883 4.82691 5.18676 4.905L6.20009 5.285C6.49676 5.39583 6.82592 5.345 7.09676 5.18167C7.15676 5.145 7.21842 5.10917 7.28009 5.075C7.55676 4.9225 7.76509 4.6625 7.81676 4.35083L7.99509 3.28333V3.28333Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" @@ -28,7 +28,7 @@ const IconCogSixTooth: React.FC = ({ d="M12.5 10C12.5 10.663 12.2366 11.2989 11.7678 11.7678C11.2989 12.2366 10.663 12.5 10 12.5C9.33696 12.5 8.70107 12.2366 8.23223 11.7678C7.76339 11.2989 7.5 10.663 7.5 10C7.5 9.33696 7.76339 8.70107 8.23223 8.23223C8.70107 7.76339 9.33696 7.5 10 7.5C10.663 7.5 11.2989 7.76339 11.7678 8.23223C12.2366 8.70107 12.5 9.33696 12.5 10V10Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/CogSixToothSolid/index.tsx b/www/docs/src/theme/Icon/CogSixToothSolid/index.tsx index ee9bdf254b..2443ce7e45 100644 --- a/www/docs/src/theme/Icon/CogSixToothSolid/index.tsx +++ b/www/docs/src/theme/Icon/CogSixToothSolid/index.tsx @@ -20,7 +20,7 @@ const IconCogSixToothSolid: React.FC = ({ d="M9.23166 1.875C8.46749 1.875 7.81582 2.4275 7.68999 3.18083L7.54166 4.07417C7.52499 4.17417 7.44582 4.29083 7.29416 4.36417C7.00862 4.50143 6.73393 4.66022 6.47249 4.83917C6.33416 4.935 6.19416 4.94417 6.09749 4.90833L5.24999 4.59C4.90353 4.4602 4.52224 4.45755 4.174 4.58253C3.82577 4.70751 3.53318 4.95201 3.34832 5.2725L2.57999 6.60333C2.39507 6.92363 2.32975 7.29915 2.39567 7.66307C2.46159 8.027 2.65447 8.35575 2.93999 8.59083L3.63999 9.1675C3.71916 9.2325 3.78166 9.35833 3.76832 9.52583C3.74458 9.84178 3.74458 10.1591 3.76832 10.475C3.78082 10.6417 3.71916 10.7683 3.64082 10.8333L2.93999 11.41C2.65447 11.6451 2.46159 11.9738 2.39567 12.3378C2.32975 12.7017 2.39507 13.0772 2.57999 13.3975L3.34832 14.7283C3.53331 15.0487 3.82596 15.293 4.17418 15.4178C4.5224 15.5426 4.90362 15.5399 5.24999 15.41L6.09916 15.0917C6.19499 15.0558 6.33499 15.0658 6.47416 15.16C6.73416 15.3383 7.00832 15.4975 7.29499 15.635C7.44666 15.7083 7.52582 15.825 7.54249 15.9267L7.69082 16.8192C7.81666 17.5725 8.46832 18.125 9.23249 18.125H10.7692C11.5325 18.125 12.185 17.5725 12.3108 16.8192L12.4592 15.9258C12.4758 15.8258 12.5542 15.7092 12.7067 15.635C12.9933 15.4975 13.2675 15.3383 13.5275 15.16C13.6667 15.065 13.8067 15.0558 13.9025 15.0917L14.7525 15.41C15.0987 15.5394 15.4797 15.5418 15.8275 15.4168C16.1754 15.2919 16.4677 15.0476 16.6525 14.7275L17.4217 13.3967C17.6066 13.0764 17.6719 12.7009 17.606 12.3369C17.5401 11.973 17.3472 11.6443 17.0617 11.4092L16.3617 10.8325C16.2825 10.7675 16.22 10.6417 16.2333 10.4742C16.257 10.1582 16.257 9.84095 16.2333 9.525C16.22 9.35833 16.2825 9.23167 16.3608 9.16667L17.0608 8.59C17.6508 8.105 17.8033 7.265 17.4217 6.6025L16.6533 5.27167C16.4683 4.95132 16.1757 4.707 15.8275 4.58218C15.4792 4.45735 15.098 4.46013 14.7517 4.59L13.9017 4.90833C13.8067 4.94417 13.6667 4.93417 13.5275 4.83917C13.2663 4.66025 12.9919 4.50145 12.7067 4.36417C12.5542 4.29167 12.4758 4.175 12.4592 4.07417L12.31 3.18083C12.2492 2.81589 12.0609 2.48435 11.7786 2.24522C11.4963 2.0061 11.1383 1.87491 10.7683 1.875H9.23249H9.23166ZM9.99999 13.125C10.8288 13.125 11.6236 12.7958 12.2097 12.2097C12.7958 11.6237 13.125 10.8288 13.125 10C13.125 9.1712 12.7958 8.37634 12.2097 7.79029C11.6236 7.20424 10.8288 6.875 9.99999 6.875C9.17119 6.875 8.37633 7.20424 7.79028 7.79029C7.20423 8.37634 6.87499 9.1712 6.87499 10C6.87499 10.8288 7.20423 11.6237 7.79028 12.2097C8.37633 12.7958 9.17119 13.125 9.99999 13.125Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/CommandLine/index.tsx b/www/docs/src/theme/Icon/CommandLine/index.tsx index 99df33ef35..e719c8c435 100644 --- a/www/docs/src/theme/Icon/CommandLine/index.tsx +++ b/www/docs/src/theme/Icon/CommandLine/index.tsx @@ -18,7 +18,7 @@ const IconCommandLine: React.FC = ({ d="M5.625 6.25L8.125 8.125L5.625 10M9.375 10H11.875M4.375 16.875H15.625C16.1223 16.875 16.5992 16.6775 16.9508 16.3258C17.3025 15.9742 17.5 15.4973 17.5 15V5C17.5 4.50272 17.3025 4.02581 16.9508 3.67417C16.5992 3.32254 16.1223 3.125 15.625 3.125H4.375C3.87772 3.125 3.40081 3.32254 3.04917 3.67417C2.69754 4.02581 2.5 4.50272 2.5 5V15C2.5 15.4973 2.69754 15.9742 3.04917 16.3258C3.40081 16.6775 3.87772 16.875 4.375 16.875Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/CommandLineSolid/index.tsx b/www/docs/src/theme/Icon/CommandLineSolid/index.tsx index 1a1e4ca217..ed3c71f451 100644 --- a/www/docs/src/theme/Icon/CommandLineSolid/index.tsx +++ b/www/docs/src/theme/Icon/CommandLineSolid/index.tsx @@ -20,7 +20,7 @@ const IconCommandLineSolid: React.FC = ({ d="M3.63622 3.40051C3.07362 3.40051 2.53407 3.624 2.13626 4.02182C1.73844 4.41963 1.51495 4.95918 1.51495 5.52178V14.4782C1.51495 15.0408 1.73844 15.5804 2.13626 15.9782C2.53407 16.376 3.07362 16.5995 3.63622 16.5995H16.3638C16.6424 16.5995 16.9182 16.5446 17.1756 16.438C17.4329 16.3314 17.6668 16.1752 17.8638 15.9782C18.0607 15.7812 18.217 15.5474 18.3236 15.29C18.4302 15.0326 18.4851 14.7568 18.4851 14.4782V5.52178C18.4851 5.24321 18.4302 4.96737 18.3236 4.71C18.217 4.45264 18.0607 4.21879 17.8638 4.02182C17.6668 3.82484 17.4329 3.66859 17.1756 3.56198C16.9182 3.45538 16.6424 3.40051 16.3638 3.40051H3.63622ZM4.52526 11.6518C4.46299 11.5828 4.41492 11.5022 4.38382 11.4146C4.35272 11.327 4.33919 11.2341 4.34401 11.1413C4.34882 11.0485 4.37189 10.9576 4.41189 10.8737C4.45189 10.7898 4.50803 10.7146 4.57712 10.6524L6.34955 9.05722L4.57712 7.46108C4.50591 7.39956 4.4477 7.32445 4.40589 7.24014C4.36409 7.15583 4.33954 7.06402 4.33367 6.9701C4.32781 6.87618 4.34075 6.78204 4.37174 6.69318C4.40273 6.60433 4.45114 6.52255 4.51414 6.45265C4.57714 6.38275 4.65346 6.32612 4.73863 6.2861C4.82379 6.24607 4.91609 6.22345 5.01011 6.21955C5.10414 6.21566 5.19799 6.23057 5.28618 6.26341C5.37436 6.29625 5.4551 6.34637 5.52367 6.41082L7.88063 8.53209C7.95416 8.59839 8.01294 8.67939 8.05318 8.76985C8.09342 8.86031 8.11421 8.95821 8.11421 9.05722C8.11421 9.15622 8.09342 9.25412 8.05318 9.34458C8.01294 9.43504 7.95416 9.51605 7.88063 9.58235L5.52367 11.7036C5.45468 11.7659 5.37409 11.814 5.2865 11.8451C5.19892 11.8762 5.10606 11.8897 5.01325 11.8849C4.92043 11.8801 4.82947 11.857 4.74558 11.817C4.66168 11.777 4.58744 11.7208 4.52526 11.6518ZM9.76431 10.2357C9.57678 10.2357 9.39693 10.3102 9.26433 10.4428C9.13172 10.5754 9.05722 10.7553 9.05722 10.9428C9.05722 11.1303 9.13172 11.3102 9.26433 11.4428C9.39693 11.5754 9.57678 11.6499 9.76431 11.6499H12.1213C12.3088 11.6499 12.4887 11.5754 12.6213 11.4428C12.7539 11.3102 12.8284 11.1303 12.8284 10.9428C12.8284 10.7553 12.7539 10.5754 12.6213 10.4428C12.4887 10.3102 12.3088 10.2357 12.1213 10.2357H9.76431Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/ComponentSolid/index.tsx b/www/docs/src/theme/Icon/ComponentSolid/index.tsx index b67f9c68fd..79fff3c2e3 100644 --- a/www/docs/src/theme/Icon/ComponentSolid/index.tsx +++ b/www/docs/src/theme/Icon/ComponentSolid/index.tsx @@ -18,7 +18,7 @@ const IconComponentSolid: React.FC = ({ d="M5.125 7.37509L7.75 10.0001L5.125 12.6251L2.5 10.0001L5.125 7.37509Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" @@ -28,7 +28,7 @@ const IconComponentSolid: React.FC = ({ d="M9.99969 2.5L12.6247 5.125L9.99969 7.75L7.37469 5.125L9.99969 2.5Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" @@ -38,7 +38,7 @@ const IconComponentSolid: React.FC = ({ d="M14.8752 7.37509L17.5002 10.0001L14.8752 12.6251L12.2502 10.0001L14.8752 7.37509Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" @@ -48,7 +48,7 @@ const IconComponentSolid: React.FC = ({ d="M9.99969 12.25L12.6247 14.875L9.99969 17.5L7.37469 14.875L9.99969 12.25Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/ComputerDesktop/index.tsx b/www/docs/src/theme/Icon/ComputerDesktop/index.tsx index 6e847a6189..bf61f73519 100644 --- a/www/docs/src/theme/Icon/ComputerDesktop/index.tsx +++ b/www/docs/src/theme/Icon/ComputerDesktop/index.tsx @@ -18,7 +18,7 @@ const IconComputerDesktop: React.FC = ({ d="M7.5 14.375V15.2142C7.50004 15.5426 7.43537 15.8678 7.30968 16.1712C7.184 16.4746 6.99976 16.7503 6.7675 16.9825L6.25 17.5H13.75L13.2325 16.9825C13.0002 16.7503 12.816 16.4746 12.6903 16.1712C12.5646 15.8678 12.5 15.5426 12.5 15.2142V14.375M17.5 4.375V12.5C17.5 12.9973 17.3025 13.4742 16.9508 13.8258C16.5992 14.1775 16.1223 14.375 15.625 14.375H4.375C3.87772 14.375 3.40081 14.1775 3.04917 13.8258C2.69754 13.4742 2.5 12.9973 2.5 12.5V4.375M17.5 4.375C17.5 3.87772 17.3025 3.40081 16.9508 3.04917C16.5992 2.69754 16.1223 2.5 15.625 2.5H4.375C3.87772 2.5 3.40081 2.69754 3.04917 3.04917C2.69754 3.40081 2.5 3.87772 2.5 4.375M17.5 4.375V10C17.5 10.4973 17.3025 10.9742 16.9508 11.3258C16.5992 11.6775 16.1223 11.875 15.625 11.875H4.375C3.87772 11.875 3.40081 11.6775 3.04917 11.3258C2.69754 10.9742 2.5 10.4973 2.5 10V4.375" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/ComputerDesktopSolid/index.tsx b/www/docs/src/theme/Icon/ComputerDesktopSolid/index.tsx index ad29510f99..c090c4d94b 100644 --- a/www/docs/src/theme/Icon/ComputerDesktopSolid/index.tsx +++ b/www/docs/src/theme/Icon/ComputerDesktopSolid/index.tsx @@ -20,7 +20,7 @@ const IconComputerDesktopSolid: React.FC = ({ d="M1.875 4.375C1.875 3.71196 2.13839 3.07607 2.60723 2.60723C3.07607 2.13839 3.71196 1.875 4.375 1.875H15.625C16.288 1.875 16.9239 2.13839 17.3928 2.60723C17.8616 3.07607 18.125 3.71196 18.125 4.375V12.5C18.125 13.163 17.8616 13.7989 17.3928 14.2678C16.9239 14.7366 16.288 15 15.625 15H13.125V15.2142C13.125 15.7117 13.3225 16.1892 13.6742 16.54L14.1917 17.0583C14.279 17.1457 14.3384 17.2571 14.3625 17.3782C14.3865 17.4994 14.3742 17.625 14.3269 17.7391C14.2796 17.8532 14.1996 17.9508 14.0969 18.0195C13.9943 18.0882 13.8735 18.1249 13.75 18.125H6.25C6.12647 18.1249 6.00574 18.0882 5.90306 18.0195C5.80038 17.9508 5.72035 17.8532 5.67309 17.7391C5.62583 17.625 5.61346 17.4994 5.63753 17.3782C5.6616 17.2571 5.72104 17.1457 5.80833 17.0583L6.32583 16.54C6.67726 16.1886 6.87478 15.712 6.875 15.215V15H4.375C3.71196 15 3.07607 14.7366 2.60723 14.2678C2.13839 13.7989 1.875 13.163 1.875 12.5V4.375ZM3.125 4.375V10.625C3.125 10.9565 3.2567 11.2745 3.49112 11.5089C3.72554 11.7433 4.04348 11.875 4.375 11.875H15.625C15.9565 11.875 16.2745 11.7433 16.5089 11.5089C16.7433 11.2745 16.875 10.9565 16.875 10.625V4.375C16.875 4.04348 16.7433 3.72554 16.5089 3.49112C16.2745 3.2567 15.9565 3.125 15.625 3.125H4.375C4.04348 3.125 3.72554 3.2567 3.49112 3.49112C3.2567 3.72554 3.125 4.04348 3.125 4.375Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/Copy/index.tsx b/www/docs/src/theme/Icon/Copy/index.tsx index f5eab12518..acca8c498e 100644 --- a/www/docs/src/theme/Icon/Copy/index.tsx +++ b/www/docs/src/theme/Icon/Copy/index.tsx @@ -15,14 +15,14 @@ const IconCopy: React.FC = ({ iconColorClassName, ...props }) => { d="M2 4.25C2 3.65326 2.23705 3.08097 2.65901 2.65901C3.08097 2.23705 3.65326 2 4.25 2H10.75C11.3467 2 11.919 2.23705 12.341 2.65901C12.7629 3.08097 13 3.65326 13 4.25V5.5H9.25C8.25544 5.5 7.30161 5.89509 6.59835 6.59835C5.89509 7.30161 5.5 8.25544 5.5 9.25V13H4.25C3.65326 13 3.08097 12.7629 2.65901 12.341C2.23705 11.919 2 11.3467 2 10.75V4.25Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/CreditCardSolid/index.tsx b/www/docs/src/theme/Icon/CreditCardSolid/index.tsx index 1f0fd4df35..6cf25d6f57 100644 --- a/www/docs/src/theme/Icon/CreditCardSolid/index.tsx +++ b/www/docs/src/theme/Icon/CreditCardSolid/index.tsx @@ -18,7 +18,7 @@ const IconCreditCardSolid: React.FC = ({ d="M3.97603 3.37305C3.33696 3.37305 2.72406 3.62692 2.27217 4.07881C1.82028 4.5307 1.56641 5.1436 1.56641 5.78267V6.38508H18.4338V5.78267C18.4338 5.1436 18.1799 4.5307 17.728 4.07881C17.2761 3.62692 16.6632 3.37305 16.0241 3.37305H3.97603Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> = ({ d="M18.4338 8.19336H1.56641V14.2174C1.56641 14.8565 1.82028 15.4694 2.27217 15.9213C2.72406 16.3732 3.33696 16.627 3.97603 16.627H16.0241C16.6632 16.627 17.2761 16.3732 17.728 15.9213C18.1799 15.4694 18.4338 14.8565 18.4338 14.2174V8.19336ZM3.97603 11.2054C3.97603 11.0456 4.0395 10.8924 4.15247 10.7794C4.26544 10.6665 4.41867 10.603 4.57844 10.603H9.39768C9.55745 10.603 9.71068 10.6665 9.82365 10.7794C9.93662 10.8924 10.0001 11.0456 10.0001 11.2054C10.0001 11.3652 9.93662 11.5184 9.82365 11.6314C9.71068 11.7443 9.55745 11.8078 9.39768 11.8078H4.57844C4.41867 11.8078 4.26544 11.7443 4.15247 11.6314C4.0395 11.5184 3.97603 11.3652 3.97603 11.2054ZM4.57844 13.0126C4.41867 13.0126 4.26544 13.0761 4.15247 13.189C4.0395 13.302 3.97603 13.4552 3.97603 13.615C3.97603 13.7748 4.0395 13.928 4.15247 14.041C4.26544 14.154 4.41867 14.2174 4.57844 14.2174H6.98806C7.14783 14.2174 7.30105 14.154 7.41402 14.041C7.527 13.928 7.59047 13.7748 7.59047 13.615C7.59047 13.4552 7.527 13.302 7.41402 13.189C7.30105 13.0761 7.14783 13.0126 6.98806 13.0126H4.57844Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/CubeSolid/index.tsx b/www/docs/src/theme/Icon/CubeSolid/index.tsx index 6781cd0cf6..ce7ac6187e 100644 --- a/www/docs/src/theme/Icon/CubeSolid/index.tsx +++ b/www/docs/src/theme/Icon/CubeSolid/index.tsx @@ -20,7 +20,7 @@ const IconCubeSolid: React.FC = ({ d="M10.346 1.63371C10.24 1.5753 10.121 1.54468 9.99999 1.54468C9.879 1.54468 9.75997 1.5753 9.654 1.63371L2.85366 5.38512L9.99999 9.3277L17.1463 5.38512L10.346 1.63371ZM17.6462 6.7471L10.7168 10.5702V18.4554L17.2754 14.8368C17.3877 14.7749 17.4814 14.6839 17.5466 14.5735C17.6118 14.463 17.6462 14.3371 17.6462 14.2088V6.7471ZM9.28316 18.4554V10.5702L2.35379 6.7471V14.2088C2.35377 14.3371 2.38816 14.463 2.45339 14.5735C2.51862 14.6839 2.61229 14.7749 2.72463 14.8368L9.28316 18.4554Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/CurrencyDollar/index.tsx b/www/docs/src/theme/Icon/CurrencyDollar/index.tsx index 2cecb898c6..662f1579c8 100644 --- a/www/docs/src/theme/Icon/CurrencyDollar/index.tsx +++ b/www/docs/src/theme/Icon/CurrencyDollar/index.tsx @@ -18,7 +18,7 @@ const IconCurrencyDollar: React.FC = ({ d="M10 5V15M7.5 12.6517L8.2325 13.2008C9.20833 13.9333 10.7908 13.9333 11.7675 13.2008C12.7442 12.4683 12.7442 11.2817 11.7675 10.5492C11.28 10.1825 10.64 10 10 10C9.39583 10 8.79167 9.81667 8.33083 9.45083C7.40917 8.71833 7.40917 7.53167 8.33083 6.79917C9.2525 6.06667 10.7475 6.06667 11.6692 6.79917L12.015 7.07417M17.5 10C17.5 10.9849 17.306 11.9602 16.9291 12.8701C16.5522 13.7801 15.9997 14.6069 15.3033 15.3033C14.6069 15.9997 13.7801 16.5522 12.8701 16.9291C11.9602 17.306 10.9849 17.5 10 17.5C9.01509 17.5 8.03982 17.306 7.12987 16.9291C6.21993 16.5522 5.39314 15.9997 4.6967 15.3033C4.00026 14.6069 3.44781 13.7801 3.0709 12.8701C2.69399 11.9602 2.5 10.9849 2.5 10C2.5 8.01088 3.29018 6.10322 4.6967 4.6967C6.10322 3.29018 8.01088 2.5 10 2.5C11.9891 2.5 13.8968 3.29018 15.3033 4.6967C16.7098 6.10322 17.5 8.01088 17.5 10Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/CurrencyDollarSolid/index.tsx b/www/docs/src/theme/Icon/CurrencyDollarSolid/index.tsx index 56d3b13764..497b0128a7 100644 --- a/www/docs/src/theme/Icon/CurrencyDollarSolid/index.tsx +++ b/www/docs/src/theme/Icon/CurrencyDollarSolid/index.tsx @@ -18,7 +18,7 @@ const IconCurrencyDollarSolid: React.FC = ({ d="M10.75 10.818V13.432C11.1539 13.3639 11.5406 13.2171 11.888 13C12.37 12.685 12.5 12.352 12.5 12.125C12.5 11.898 12.37 11.565 11.888 11.25C11.5406 11.0329 11.1539 10.8862 10.75 10.818ZM8.33 8.62003C8.383 8.67503 8.445 8.73003 8.514 8.78403C8.722 8.94403 8.974 9.06803 9.25 9.14703V6.60303C9.1302 6.6374 9.01319 6.68085 8.9 6.73303C8.76 6.79803 8.63 6.87603 8.514 6.96603C8.137 7.25803 8 7.59303 8 7.87503C8 8.05903 8.058 8.26503 8.202 8.46703C8.239 8.51803 8.282 8.57003 8.33 8.62003Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> = ({ d="M18 10C18 12.1217 17.1571 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84285 14.1566 2 12.1217 2 10C2 7.87827 2.84285 5.84344 4.34315 4.34315C5.84344 2.84285 7.87827 2 10 2C12.1217 2 14.1566 2.84285 15.6569 4.34315C17.1571 5.84344 18 7.87827 18 10ZM10 4C10.1989 4 10.3897 4.07902 10.5303 4.21967C10.671 4.36032 10.75 4.55109 10.75 4.75V5.066C11.3504 5.16708 11.9175 5.41168 12.403 5.779C12.829 6.109 13.147 6.519 13.328 6.979C13.3951 7.16273 13.3877 7.36539 13.3075 7.54377C13.2272 7.72215 13.0805 7.86213 12.8985 7.93386C12.7166 8.0056 12.5138 8.00342 12.3334 7.92779C12.1531 7.85216 12.0094 7.70906 11.933 7.529C11.8376 7.30438 11.6831 7.10982 11.486 6.966C11.2658 6.79964 11.016 6.67647 10.75 6.603V9.3C11.448 9.393 12.133 9.62 12.709 9.996C13.496 10.51 13.999 11.266 13.999 12.126C13.999 12.986 13.495 13.742 12.709 14.256C12.133 14.633 11.448 14.859 10.749 14.952V15.251C10.749 15.4499 10.67 15.6407 10.5293 15.7813C10.3887 15.922 10.1979 16.001 9.999 16.001C9.80009 16.001 9.60932 15.922 9.46867 15.7813C9.32802 15.6407 9.249 15.4499 9.249 15.251V14.951C8.552 14.859 7.867 14.633 7.291 14.256C6.809 13.941 6.434 13.539 6.213 13.068C6.12866 12.8878 6.11937 12.6814 6.18716 12.4944C6.25496 12.3073 6.39429 12.1548 6.5745 12.0705C6.75471 11.9862 6.96105 11.9769 7.14812 12.0447C7.33519 12.1125 7.48766 12.2518 7.572 12.432C7.652 12.605 7.817 12.808 8.112 13.001C8.425 13.206 8.818 13.354 9.25 13.433V10.685C8.64964 10.5838 8.08258 10.3393 7.597 9.972C6.9 9.433 6.5 8.681 6.5 7.875C6.5 7.07 6.9 6.317 7.597 5.779C8.08254 5.41168 8.64962 5.16708 9.25 5.066V4.75C9.25 4.55109 9.32902 4.36032 9.46967 4.21967C9.61032 4.07902 9.80109 4 10 4Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/DarkMode/index.tsx b/www/docs/src/theme/Icon/DarkMode/index.tsx index 5aee241d91..4a5f441d91 100644 --- a/www/docs/src/theme/Icon/DarkMode/index.tsx +++ b/www/docs/src/theme/Icon/DarkMode/index.tsx @@ -18,7 +18,7 @@ const IconDarkMode: React.FC = ({ d="M18.1267 12.5017C17.136 12.9147 16.0732 13.1265 15 13.1251C10.5125 13.1251 6.875 9.48758 6.875 5.00008C6.875 3.89175 7.09667 2.83591 7.49833 1.87341C6.01789 2.49101 4.75331 3.53287 3.86386 4.86779C2.9744 6.20271 2.49986 7.77098 2.5 9.37508C2.5 13.8626 6.1375 17.5001 10.625 17.5001C12.2291 17.5002 13.7974 17.0257 15.1323 16.1362C16.4672 15.2468 17.5091 13.9822 18.1267 12.5017Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/Discord/index.tsx b/www/docs/src/theme/Icon/Discord/index.tsx index 4e2f18e9e1..efdb993c29 100644 --- a/www/docs/src/theme/Icon/Discord/index.tsx +++ b/www/docs/src/theme/Icon/Discord/index.tsx @@ -15,7 +15,7 @@ const IconDiscord: React.FC = ({ iconColorClassName, ...props }) => { d="M12.9953 12.4964C12.1086 12.4964 11.3775 11.6826 11.3775 10.6825C11.3775 9.68252 12.0938 8.86871 12.9953 8.86871C13.8968 8.86871 14.6268 9.6904 14.613 10.6825C14.5992 11.6747 13.9037 12.4964 12.9953 12.4964ZM7.01487 12.4964C6.12815 12.4964 5.3971 11.6826 5.3971 10.6825C5.3971 9.68252 6.11337 8.86871 7.01487 8.86871C7.91636 8.86871 8.64642 9.6904 8.63263 10.6825C8.61884 11.6747 7.91538 12.4964 7.01487 12.4964ZM16.2357 4.2765C15.069 3.741 13.8376 3.35915 12.5726 3.14052C12.5611 3.13824 12.5492 3.13968 12.5385 3.14464C12.5279 3.1496 12.5191 3.15782 12.5135 3.16811C12.3458 3.47256 12.1935 3.78528 12.0573 4.10507C10.6937 3.89797 9.3066 3.89797 7.94296 4.10507C7.80595 3.78447 7.65136 3.47168 7.4799 3.16811C7.47394 3.15812 7.46512 3.15016 7.45458 3.14524C7.44404 3.14032 7.43227 3.13868 7.42078 3.14052C6.15564 3.35869 4.92426 3.74056 3.75767 4.2765C3.74785 4.28081 3.73959 4.28803 3.73402 4.29719C1.40097 7.78297 0.761549 11.183 1.07387 14.5437C1.07476 14.552 1.07732 14.56 1.08138 14.5673C1.08545 14.5746 1.09093 14.5809 1.09752 14.5861C2.45592 15.5924 3.97543 16.3607 5.59119 16.858C5.60256 16.8614 5.61469 16.8613 5.62596 16.8576C5.63724 16.8539 5.64711 16.8468 5.65425 16.8373C6.00123 16.3649 6.30868 15.8647 6.57348 15.3417C6.57701 15.3346 6.57899 15.3267 6.57929 15.3187C6.5796 15.3107 6.57822 15.3028 6.57525 15.2953C6.57228 15.2879 6.56778 15.2812 6.56204 15.2756C6.55631 15.27 6.54946 15.2657 6.54195 15.2629C6.05702 15.0774 5.58757 14.8537 5.13798 14.5939C5.1293 14.5892 5.12196 14.5824 5.11666 14.5741C5.11135 14.5657 5.10826 14.5562 5.10766 14.5463C5.10707 14.5365 5.109 14.5266 5.11328 14.5177C5.11755 14.5088 5.12401 14.5011 5.13207 14.4954C5.2306 14.4245 5.32124 14.3516 5.4109 14.2767C5.41886 14.27 5.42854 14.2658 5.43883 14.2644C5.44911 14.263 5.45958 14.2645 5.46903 14.2688C8.41391 15.6137 11.6031 15.6137 14.5135 14.2688C14.523 14.2642 14.5336 14.2624 14.5441 14.2636C14.5546 14.2648 14.5645 14.269 14.5726 14.2757C14.6623 14.3496 14.7569 14.4245 14.8524 14.4944C14.8605 14.5001 14.8671 14.5077 14.8714 14.5165C14.8758 14.5254 14.8778 14.5352 14.8773 14.5451C14.8768 14.5549 14.8738 14.5645 14.8686 14.5729C14.8634 14.5812 14.8561 14.5882 14.8475 14.593C14.4006 14.8535 13.9327 15.0759 13.4485 15.258C13.4409 15.2608 13.4341 15.2653 13.4283 15.271C13.4226 15.2767 13.4182 15.2835 13.4153 15.291C13.4124 15.2986 13.4111 15.3066 13.4116 15.3147C13.4121 15.3228 13.4142 15.3306 13.4179 15.3378C13.6867 15.8581 13.9933 16.358 14.3352 16.8334C14.3421 16.8432 14.3519 16.8505 14.3632 16.8544C14.3745 16.8583 14.3868 16.8585 14.3983 16.8551C16.0168 16.3593 17.5388 15.591 18.8988 14.5831C18.9055 14.5783 18.911 14.5721 18.9151 14.565C18.9192 14.5578 18.9217 14.5499 18.9225 14.5417C19.2978 10.6599 18.2939 7.2874 16.2623 4.29522C16.2563 4.28616 16.2462 4.27953 16.2357 4.2765Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/DocumentText/index.tsx b/www/docs/src/theme/Icon/DocumentText/index.tsx index 3d2705b6eb..65a58d493d 100644 --- a/www/docs/src/theme/Icon/DocumentText/index.tsx +++ b/www/docs/src/theme/Icon/DocumentText/index.tsx @@ -18,7 +18,7 @@ const IconDocumentText: React.FC = ({ d="M16.25 11.8462V9.69231C16.25 8.95786 15.9537 8.2535 15.4262 7.73417C14.8988 7.21483 14.1834 6.92308 13.4375 6.92308H12.1875C11.9389 6.92308 11.7004 6.82582 11.5246 6.65271C11.3488 6.4796 11.25 6.24482 11.25 6V4.76923C11.25 4.03479 10.9537 3.33042 10.4262 2.81109C9.89879 2.29176 9.18342 2 8.4375 2H6.875M6.875 12.4615H13.125M6.875 14.9231H10M8.75 2H4.6875C4.17 2 3.75 2.41354 3.75 2.92308V17.0769C3.75 17.5865 4.17 18 4.6875 18H15.3125C15.83 18 16.25 17.5865 16.25 17.0769V9.38462C16.25 7.42609 15.4598 5.54779 14.0533 4.1629C12.6468 2.77802 10.7391 2 8.75 2V2Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/ExclamationCircleSolid/index.tsx b/www/docs/src/theme/Icon/ExclamationCircleSolid/index.tsx new file mode 100644 index 0000000000..327fc38ed6 --- /dev/null +++ b/www/docs/src/theme/Icon/ExclamationCircleSolid/index.tsx @@ -0,0 +1,30 @@ +import React from "react" +import { IconProps } from ".." + +const IconExclamationCircleSolid: React.FC = ({ + iconColorClassName, + ...props +}) => { + return ( + + + + ) +} + +export default IconExclamationCircleSolid diff --git a/www/docs/src/theme/Icon/ExternalLink/index.tsx b/www/docs/src/theme/Icon/ExternalLink/index.tsx index 02d2c163f2..5dbd2f4a52 100644 --- a/www/docs/src/theme/Icon/ExternalLink/index.tsx +++ b/www/docs/src/theme/Icon/ExternalLink/index.tsx @@ -1,5 +1,4 @@ import React from "react" -import styles from "./styles.module.css" import { IconProps } from ".." const IconExternalLink: React.FC = ({ @@ -12,13 +11,13 @@ const IconExternalLink: React.FC = ({ height={props.height || 20} viewBox="0 0 16 16" fill="none" - className={styles.iconExternalLink} + {...props} > = ({ d="M6.35156 3.94971L12.0098 3.9896L12.0505 9.64865" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/ExternalLink/styles.module.css b/www/docs/src/theme/Icon/ExternalLink/styles.module.css deleted file mode 100644 index 9468b1998b..0000000000 --- a/www/docs/src/theme/Icon/ExternalLink/styles.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.iconExternalLink { - margin-left: 0.3rem; -} diff --git a/www/docs/src/theme/Icon/FlyingBox/index.tsx b/www/docs/src/theme/Icon/FlyingBox/index.tsx index f3a40770dd..47d944ec70 100644 --- a/www/docs/src/theme/Icon/FlyingBox/index.tsx +++ b/www/docs/src/theme/Icon/FlyingBox/index.tsx @@ -18,7 +18,7 @@ const IconFlyingBox: React.FC = ({ d="M2.6232 5.9021H1.80406" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1" strokeLinecap="round" @@ -28,7 +28,7 @@ const IconFlyingBox: React.FC = ({ d="M3.44234 3.44348H1.80406" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1" strokeLinecap="round" @@ -38,7 +38,7 @@ const IconFlyingBox: React.FC = ({ d="M14.0978 16.5565H2.62378" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1" strokeLinecap="round" @@ -48,7 +48,7 @@ const IconFlyingBox: React.FC = ({ d="M14.3227 3.44348L13.5146 6.13742C13.4105 6.4841 13.0908 6.72178 12.7294 6.72178H10.1789C9.62979 6.72178 9.23639 6.19233 9.39375 5.66698L10.0609 3.44348" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1" strokeLinecap="round" @@ -58,7 +58,7 @@ const IconFlyingBox: React.FC = ({ d="M6.72057 10.8195H8.46533" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1" strokeLinecap="round" @@ -68,7 +68,7 @@ const IconFlyingBox: React.FC = ({ d="M14.4564 13.2784H5.77873C4.46086 13.2784 3.51589 12.008 3.89453 10.7459L5.66481 4.84495C5.91478 4.01309 6.68026 3.44348 7.54901 3.44348H16.2275C17.5453 3.44348 18.4903 4.71382 18.1117 5.97596L16.3414 11.8769C16.0914 12.7088 15.3251 13.2784 14.4564 13.2784Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/Folder/index.tsx b/www/docs/src/theme/Icon/Folder/index.tsx index 55d7742b92..2693f8359b 100644 --- a/www/docs/src/theme/Icon/Folder/index.tsx +++ b/www/docs/src/theme/Icon/Folder/index.tsx @@ -15,7 +15,7 @@ const IconFolder: React.FC = ({ iconColorClassName, ...props }) => { d="M2.49213 10.5776V10.0001C2.49213 9.54054 2.67467 9.09985 2.99959 8.77493C3.32451 8.45 3.76521 8.26746 4.22472 8.26746H15.7753C16.2348 8.26746 16.6755 8.45 17.0005 8.77493C17.3254 9.09985 17.5079 9.54054 17.5079 10.0001V10.5776M10.8163 5.61852L9.18378 3.98603C9.07653 3.87865 8.94918 3.79346 8.80899 3.73533C8.6688 3.67719 8.51853 3.64725 8.36677 3.64722H4.22472C3.76521 3.64722 3.32451 3.82976 2.99959 4.15468C2.67467 4.47961 2.49213 4.9203 2.49213 5.37981V14.6203C2.49213 15.0798 2.67467 15.5205 2.99959 15.8454C3.32451 16.1703 3.76521 16.3529 4.22472 16.3529H15.7753C16.2348 16.3529 16.6755 16.1703 17.0005 15.8454C17.3254 15.5205 17.5079 15.0798 17.5079 14.6203V7.68993C17.5079 7.23042 17.3254 6.78973 17.0005 6.4648C16.6755 6.13988 16.2348 5.95734 15.7753 5.95734H11.6333C11.327 5.95707 11.0327 5.8352 10.8163 5.61852Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/FolderOpen/index.tsx b/www/docs/src/theme/Icon/FolderOpen/index.tsx index 436e65a11f..d5ce6a98ce 100644 --- a/www/docs/src/theme/Icon/FolderOpen/index.tsx +++ b/www/docs/src/theme/Icon/FolderOpen/index.tsx @@ -18,7 +18,7 @@ const IconFolderOpen: React.FC = ({ d="M3.49539 8.24656C3.58369 8.23316 3.67435 8.22607 3.7666 8.22607H16.2326C16.3249 8.22607 16.4155 8.23316 16.5038 8.24656M3.49539 8.24656C3.03399 8.31802 2.61938 8.5685 2.34146 8.94367C2.06355 9.31884 1.94476 9.78846 2.01085 10.2507L2.6865 14.981C2.74685 15.4037 2.95762 15.7904 3.28014 16.0702C3.60266 16.35 4.01528 16.5041 4.44225 16.5042H15.5578C15.9847 16.5041 16.3973 16.35 16.7199 16.0702C17.0424 15.7904 17.2532 15.4037 17.3135 14.981L17.9892 10.2507C18.0552 9.78846 17.9364 9.31884 17.6585 8.94367C17.3806 8.5685 16.9652 8.31802 16.5038 8.24656M3.49539 8.24656L3.49618 5.2696C3.49618 4.79928 3.68296 4.34821 4.01546 4.01556C4.34795 3.68292 4.79894 3.49594 5.26927 3.49573H8.32743C8.64097 3.496 8.94156 3.62078 9.16312 3.84262L10.8361 5.51401C11.0577 5.73585 11.3582 5.86062 11.6718 5.8609H14.7299C15.2004 5.8609 15.6516 6.04779 15.9843 6.38045C16.3169 6.71312 16.5038 7.16431 16.5038 7.63477V8.24656" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/Gatsby/index.tsx b/www/docs/src/theme/Icon/Gatsby/index.tsx index 2769b53bfd..816b9fb855 100644 --- a/www/docs/src/theme/Icon/Gatsby/index.tsx +++ b/www/docs/src/theme/Icon/Gatsby/index.tsx @@ -17,7 +17,7 @@ const IconGatsby: React.FC = ({ iconColorClassName, ...props }) => { d="M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10ZM2.92847 10.1286C2.92847 11.8643 3.63561 13.6643 4.98561 15.0143C6.33561 16.3643 8.13561 17.0072 9.93561 17.0714L2.92847 10.1286ZM3.12132 8.45716L11.5428 16.8786C14.6928 16.1714 17.0713 13.3429 17.0713 10H12.5713V11.2857H15.657C15.207 13.2143 13.7928 14.8214 11.9285 15.4643L4.53561 8.07145C5.37132 5.82145 7.49275 4.2143 9.9999 4.2143C11.9285 4.2143 13.6642 5.17859 14.757 6.65716L15.7213 5.82145C14.4356 4.08573 12.3785 2.92859 9.9999 2.92859C6.65704 2.92859 3.82847 5.30716 3.12132 8.45716Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/GiftSolid/index.tsx b/www/docs/src/theme/Icon/GiftSolid/index.tsx index a16c99fb0e..c2360baa52 100644 --- a/www/docs/src/theme/Icon/GiftSolid/index.tsx +++ b/www/docs/src/theme/Icon/GiftSolid/index.tsx @@ -20,14 +20,14 @@ const IconGiftSolid: React.FC = ({ d="M14 6.00001C14.197 5.73737 14.3403 5.4385 14.4218 5.12046C14.5033 4.80243 14.5213 4.47146 14.4749 4.14646C14.4284 3.82145 14.3185 3.50877 14.1512 3.22628C13.9839 2.94378 13.7626 2.69699 13.5 2.50001C13.2374 2.30303 12.9385 2.15971 12.6205 2.07823C12.3024 1.99675 11.9715 1.97871 11.6464 2.02514C11.3214 2.07157 11.0088 2.18155 10.7263 2.34882C10.4438 2.51609 10.197 2.73737 10 3.00001C9.60218 2.46958 9.00993 2.1189 8.35355 2.02514C7.69718 1.93137 7.03043 2.10219 6.5 2.50001C5.96957 2.89784 5.61889 3.49008 5.52513 4.14646C5.43136 4.80283 5.60218 5.46958 6 6.00001H3.25C2.56 6.00001 2 6.56001 2 7.25001V7.75001C2 8.44001 2.56 9.00001 3.25 9.00001H9.25V6.00001H10.75V9.00001H16.75C17.44 9.00001 18 8.44001 18 7.75001V7.25001C18 6.56001 17.44 6.00001 16.75 6.00001H14ZM13 4.50001C13 4.76523 12.8946 5.01958 12.7071 5.20712C12.5196 5.39465 12.2652 5.50001 12 5.50001H11V4.50001C11 4.23479 11.1054 3.98044 11.2929 3.7929C11.4804 3.60537 11.7348 3.50001 12 3.50001C12.2652 3.50001 12.5196 3.60537 12.7071 3.7929C12.8946 3.98044 13 4.23479 13 4.50001ZM7 4.50001C7 4.76523 7.10536 5.01958 7.29289 5.20712C7.48043 5.39465 7.73478 5.50001 8 5.50001H9V4.50001C9 4.23479 8.89464 3.98044 8.70711 3.7929C8.51957 3.60537 8.26522 3.50001 8 3.50001C7.73478 3.50001 7.48043 3.60537 7.29289 3.7929C7.10536 3.98044 7 4.23479 7 4.50001Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/GitHub/index.tsx b/www/docs/src/theme/Icon/GitHub/index.tsx index f6bcadd888..a50f0d299a 100644 --- a/www/docs/src/theme/Icon/GitHub/index.tsx +++ b/www/docs/src/theme/Icon/GitHub/index.tsx @@ -17,7 +17,7 @@ const IconGitHub: React.FC = ({ iconColorClassName, ...props }) => { d="M10 1.22205C5.0275 1.22205 1 5.24955 1 10.222C1 14.2045 3.57625 17.5683 7.15375 18.7608C7.60375 18.8395 7.7725 18.5695 7.7725 18.3333C7.7725 18.1195 7.76125 17.4108 7.76125 16.657C5.5 17.0733 4.915 16.1058 4.735 15.5995C4.63375 15.3408 4.195 14.542 3.8125 14.3283C3.4975 14.1595 3.0475 13.7433 3.80125 13.732C4.51 13.7208 5.01625 14.3845 5.185 14.6545C5.995 16.0158 7.28875 15.6333 7.80625 15.397C7.885 14.812 8.12125 14.4183 8.38 14.1933C6.3775 13.9683 4.285 13.192 4.285 9.74955C4.285 8.7708 4.63375 7.9608 5.2075 7.3308C5.1175 7.1058 4.8025 6.1833 5.2975 4.9458C5.2975 4.9458 6.05125 4.70955 7.7725 5.8683C8.4925 5.6658 9.2575 5.56455 10.0225 5.56455C10.7875 5.56455 11.5525 5.6658 12.2725 5.8683C13.9938 4.6983 14.7475 4.9458 14.7475 4.9458C15.2425 6.1833 14.9275 7.1058 14.8375 7.3308C15.4113 7.9608 15.76 8.75955 15.76 9.74955C15.76 13.2033 13.6562 13.9683 11.6538 14.1933C11.98 14.4745 12.2613 15.0145 12.2613 15.8583C12.2613 17.062 12.25 18.0295 12.25 18.3333C12.25 18.5695 12.4188 18.8508 12.8688 18.7608C16.4238 17.5683 19 14.1933 19 10.222C19 5.24955 14.9725 1.22205 10 1.22205Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/GlobeEurope/index.tsx b/www/docs/src/theme/Icon/GlobeEurope/index.tsx index 42726cbe82..2277ccb34c 100644 --- a/www/docs/src/theme/Icon/GlobeEurope/index.tsx +++ b/www/docs/src/theme/Icon/GlobeEurope/index.tsx @@ -18,7 +18,7 @@ const IconGlobeEurope: React.FC = ({ d="M17.4108 11.1609L16.465 10.2151C16.3226 10.0725 16.2042 9.90784 16.1142 9.72756L15.2142 7.92756C15.1897 7.87871 15.1539 7.83638 15.1099 7.80405C15.0658 7.77172 15.0147 7.75032 14.9607 7.74161C14.9068 7.7329 14.8515 7.73714 14.7995 7.75396C14.7475 7.77079 14.7003 7.79973 14.6617 7.8384C14.5747 7.92525 14.4661 7.98727 14.3472 8.01804C14.2282 8.04881 14.1031 8.04721 13.985 8.0134L12.9242 7.7109C12.7544 7.66318 12.5733 7.67749 12.4131 7.75126C12.253 7.82503 12.1244 7.95343 12.0503 8.11344C11.9763 8.27345 11.9617 8.4546 12.0091 8.62441C12.0566 8.79422 12.1629 8.94158 12.3092 9.04006L12.7983 9.36506C13.29 9.69423 13.36 10.3901 12.9417 10.8084L12.775 10.9751C12.5983 11.1517 12.5 11.3901 12.5 11.6384V11.9801C12.5 12.3209 12.4083 12.6542 12.2333 12.9451L11.1375 14.7709C10.9813 15.0314 10.7602 15.2471 10.4959 15.3968C10.2316 15.5465 9.93295 15.6251 9.62917 15.6251C9.396 15.6251 9.17238 15.5324 9.0075 15.3676C8.84263 15.2027 8.75 14.9791 8.75 14.7459V13.7692C8.75 13.0026 8.28334 12.3134 7.57167 12.0284L7.02583 11.8109C6.6287 11.6519 6.29787 11.3619 6.08823 10.989C5.8786 10.6162 5.80277 10.1828 5.87333 9.7609L5.87917 9.7259C5.91791 9.49407 5.99989 9.27159 6.12083 9.07006L6.19584 8.94506C6.39485 8.61365 6.69144 8.35186 7.04498 8.19552C7.39853 8.03919 7.79176 7.99595 8.17084 8.07173L9.1525 8.2684C9.38351 8.31447 9.6234 8.2719 9.82445 8.14914C10.0255 8.02638 10.173 7.83244 10.2375 7.6059L10.4108 6.99756C10.4709 6.7874 10.4556 6.56286 10.3677 6.36277C10.2797 6.16267 10.1246 5.99959 9.92917 5.90173L9.375 5.62506L9.29917 5.7009C9.12506 5.87501 8.91836 6.01312 8.69087 6.10734C8.46338 6.20157 8.21956 6.25006 7.97333 6.25006H7.82333C7.61583 6.25006 7.4175 6.3334 7.27167 6.4784C7.13802 6.61326 6.95955 6.69443 6.77006 6.70653C6.58058 6.71864 6.39323 6.66084 6.2435 6.54407C6.09378 6.42731 5.99207 6.2597 5.95763 6.07297C5.9232 5.88625 5.95844 5.69338 6.05667 5.5309L7.2325 3.57006C7.3497 3.37515 7.43046 3.16055 7.47084 2.93673M17.4108 11.1609C17.6127 9.87518 17.4765 8.55906 17.0156 7.34192C16.5548 6.12478 15.7851 5.04851 14.7824 4.2189C13.7796 3.3893 12.5782 2.83493 11.2962 2.61027C10.0143 2.38561 8.69597 2.4984 7.47084 2.93756C6.22444 3.38434 5.11853 4.15312 4.2655 5.16578C3.41247 6.17843 2.84273 7.39886 2.61417 8.70304C2.38562 10.0072 2.50639 11.3487 2.96423 12.591C3.42206 13.8334 4.20063 14.9325 5.22082 15.7765C6.24101 16.6205 7.46645 17.1793 8.77261 17.3963C10.0788 17.6133 11.4191 17.4806 12.6574 17.0117C13.8956 16.5429 14.9877 15.7546 15.8226 14.7269C16.6575 13.6993 17.2055 12.4689 17.4108 11.1609Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/GlobeEuropeSolid/index.tsx b/www/docs/src/theme/Icon/GlobeEuropeSolid/index.tsx index ecff110095..839b811a54 100644 --- a/www/docs/src/theme/Icon/GlobeEuropeSolid/index.tsx +++ b/www/docs/src/theme/Icon/GlobeEuropeSolid/index.tsx @@ -20,7 +20,7 @@ const IconGlobeEuropeSolid: React.FC = ({ d="M18 10C18 12.1217 17.1571 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84285 14.1566 2 12.1217 2 10C2 7.87827 2.84285 5.84344 4.34315 4.34315C5.84344 2.84285 7.87827 2 10 2C12.1217 2 14.1566 2.84285 15.6569 4.34315C17.1571 5.84344 18 7.87827 18 10ZM16.497 10.204C16.4594 11.3915 16.097 12.5461 15.4492 13.5421C14.8014 14.5381 13.893 15.3375 12.8227 15.8534C11.7524 16.3693 10.5612 16.582 9.37848 16.4684C8.19579 16.3547 7.06687 15.9191 6.11442 15.2088C5.16197 14.4985 4.42242 13.5407 3.97616 12.4395C3.5299 11.3384 3.394 10.136 3.58322 8.96301C3.77244 7.79003 4.27955 6.69135 5.04943 5.78638C5.81931 4.88141 6.82251 4.20477 7.95 3.83L6.927 5.62C6.77282 5.89063 6.70968 6.20365 6.7469 6.51288C6.78412 6.82212 6.91973 7.11121 7.13372 7.33753C7.34771 7.56385 7.62877 7.71541 7.93544 7.76987C8.24211 7.82433 8.55817 7.7788 8.837 7.64L9.012 7.553C9.08153 7.51815 9.15823 7.50001 9.236 7.5H9.382C9.46726 7.5 9.55111 7.52181 9.62557 7.56335C9.70003 7.60489 9.76264 7.66478 9.80743 7.73733C9.85222 7.80988 9.87772 7.89268 9.88149 7.97786C9.88527 8.06304 9.8672 8.14777 9.829 8.224L9.801 8.279C9.76782 8.3453 9.71687 8.40108 9.65383 8.44011C9.59079 8.47913 9.51814 8.49987 9.444 8.5H8.942C8.57005 8.50003 8.20385 8.59186 7.8759 8.76735C7.54795 8.94284 7.26838 9.19656 7.062 9.506L7.018 9.572C6.83893 9.8407 6.72427 10.1471 6.68294 10.4674C6.64161 10.7876 6.67472 11.1131 6.7797 11.4184C6.88468 11.7238 7.0587 12.0008 7.28822 12.228C7.51773 12.4551 7.79656 12.6262 8.103 12.728C8.21804 12.7662 8.3182 12.8396 8.38941 12.9377C8.46062 13.0358 8.49929 13.1538 8.5 13.275V14.325C8.49988 14.5686 8.57547 14.8062 8.71631 15.005C8.85715 15.2037 9.05629 15.3538 9.28615 15.4344C9.51602 15.515 9.76526 15.5222 9.99939 15.4549C10.2335 15.3877 10.441 15.2493 10.593 15.059L12.204 13.045C12.396 12.805 12.5 12.509 12.5 12.203C12.5 11.887 12.628 11.579 12.853 11.353C13.0753 11.1308 13.2139 10.8386 13.2454 10.5258C13.277 10.2131 13.1994 9.89912 13.026 9.637L12.562 8.941C12.515 8.86865 12.4949 8.78213 12.5051 8.69648C12.5153 8.61083 12.5552 8.53146 12.6178 8.47215C12.6804 8.41285 12.7619 8.37736 12.8479 8.37185C12.934 8.36634 13.0193 8.39116 13.089 8.442L13.432 8.699C13.748 8.936 14.17 8.974 14.523 8.797C14.6331 8.74189 14.7578 8.72286 14.8793 8.74261C15.0008 8.76235 15.113 8.81987 15.2 8.907L16.497 10.204Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/InformationCircleSolid/index.tsx b/www/docs/src/theme/Icon/InformationCircleSolid/index.tsx new file mode 100644 index 0000000000..3f17fa8bf2 --- /dev/null +++ b/www/docs/src/theme/Icon/InformationCircleSolid/index.tsx @@ -0,0 +1,30 @@ +import React from "react" +import { IconProps } from ".." + +const IconInformationCircleSolid: React.FC = ({ + iconColorClassName, + ...props +}) => { + return ( + + + + ) +} + +export default IconInformationCircleSolid diff --git a/www/docs/src/theme/Icon/JavaScript/index.tsx b/www/docs/src/theme/Icon/JavaScript/index.tsx index 1f92bc3c98..1169e5e9b7 100644 --- a/www/docs/src/theme/Icon/JavaScript/index.tsx +++ b/www/docs/src/theme/Icon/JavaScript/index.tsx @@ -20,7 +20,7 @@ const IconJavaScript: React.FC = ({ d="M5 1H15C17.2091 1 19 2.79086 19 5V15C19 17.2091 17.2091 19 15 19H5C2.79086 19 1 17.2091 1 15V5C1 2.79086 2.79086 1 5 1ZM13.6251 14.9851C12.7811 14.9851 12.3039 14.5459 11.9372 13.9485L10.5467 14.7544C11.049 15.7445 12.0756 16.5 13.6647 16.5C15.2899 16.5 16.5 15.658 16.5 14.1212C16.5 12.6956 15.6792 12.0616 14.2254 11.4396L13.7976 11.2568C13.0635 10.9396 12.7456 10.7323 12.7456 10.2202C12.7456 9.80588 13.0632 9.4887 13.5644 9.4887C14.0557 9.4887 14.3722 9.69544 14.6656 10.2202L15.998 9.36674C15.4344 8.37773 14.6523 8 13.5644 8C12.0363 8 11.0585 8.97459 11.0585 10.2548C11.0585 11.6446 11.8788 12.302 13.1135 12.8268L13.5413 13.0099C14.3216 13.3505 14.787 13.5578 14.787 14.1431C14.787 14.6316 14.3341 14.9851 13.6251 14.9851ZM6.99399 14.9744C6.40612 14.9744 6.1616 14.5722 5.89281 14.0964L4.5 14.9376C4.90348 15.7895 5.69685 16.4968 7.06682 16.4968C8.58305 16.4968 9.6218 15.6924 9.6218 13.9248V8.09746H7.91078V13.9018C7.91078 14.755 7.55614 14.9744 6.99399 14.9744Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/Key/index.tsx b/www/docs/src/theme/Icon/Key/index.tsx index 4251404a64..689000ecfc 100644 --- a/www/docs/src/theme/Icon/Key/index.tsx +++ b/www/docs/src/theme/Icon/Key/index.tsx @@ -15,7 +15,7 @@ const IconKey: React.FC = ({ iconColorClassName, ...props }) => { d="M12.9094 4.76103C13.5267 4.76103 14.1187 5.00625 14.5552 5.44275C14.9917 5.87925 15.237 6.47127 15.237 7.08857M17.5645 7.08857C17.5646 7.76752 17.4162 8.43828 17.1297 9.05381C16.8431 9.66934 16.4254 10.2147 15.9058 10.6518C15.3862 11.0888 14.7773 11.4069 14.1218 11.5837C13.4662 11.7605 12.78 11.7918 12.1111 11.6754C11.6743 11.6001 11.2119 11.6955 10.8984 12.009L8.83623 14.0712H7.09058V15.8168H5.34493V17.5625H2.4355V15.3762C2.4355 14.913 2.61938 14.4684 2.94678 14.1418L7.98901 9.09956C8.30245 8.78612 8.39788 8.32372 8.32262 7.88692C8.21261 7.25163 8.23576 6.60041 8.39061 5.97454C8.54546 5.34866 8.82864 4.76178 9.2222 4.25109C9.61576 3.74039 10.1111 3.31702 10.6769 3.0078C11.2426 2.69858 11.8664 2.51026 12.5088 2.45477C13.1512 2.39928 13.798 2.47784 14.4084 2.68545C15.0188 2.89307 15.5795 3.22523 16.0548 3.66087C16.5301 4.0965 16.9097 4.62613 17.1696 5.21618C17.4295 5.80622 17.564 6.44382 17.5645 7.08857V7.08857Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/KeySolid/index.tsx b/www/docs/src/theme/Icon/KeySolid/index.tsx index f7a2a0f2e1..70cc875617 100644 --- a/www/docs/src/theme/Icon/KeySolid/index.tsx +++ b/www/docs/src/theme/Icon/KeySolid/index.tsx @@ -20,7 +20,7 @@ const IconKeySolid: React.FC = ({ d="M13.125 1.25C12.3047 1.24991 11.4943 1.42923 10.7507 1.77539C10.007 2.12154 9.34804 2.62616 8.81998 3.25387C8.29191 3.88157 7.90753 4.61718 7.69376 5.40912C7.47999 6.20106 7.44202 7.03017 7.5825 7.83833C7.63833 8.16333 7.55583 8.43583 7.39833 8.59333L1.98167 14.0092C1.5131 14.478 1.24992 15.1138 1.25 15.7767V18.125C1.25 18.47 1.53 18.75 1.875 18.75H5C5.16576 18.75 5.32473 18.6842 5.44194 18.5669C5.55915 18.4497 5.625 18.2908 5.625 18.125V16.875H6.875C7.04076 16.875 7.19973 16.8092 7.31694 16.6919C7.43415 16.5747 7.5 16.4158 7.5 16.25V15H8.75C8.9157 14.9999 9.07457 14.9339 9.19167 14.8167L11.4067 12.6017C11.565 12.4442 11.8375 12.3617 12.1617 12.4183C12.9291 12.5505 13.7156 12.522 14.4714 12.3344C15.2272 12.1469 15.9358 11.8044 16.5524 11.3288C17.169 10.8531 17.6801 10.2546 18.0534 9.57118C18.4266 8.88774 18.6539 8.13424 18.7209 7.35839C18.7878 6.58254 18.6929 5.80125 18.4422 5.06398C18.1914 4.32672 17.7904 3.64954 17.2643 3.07534C16.7383 2.50113 16.0988 2.0424 15.3863 1.72819C14.6737 1.41399 13.9037 1.25115 13.125 1.25ZM13.125 3.75C12.9592 3.75 12.8003 3.81585 12.6831 3.93306C12.5658 4.05027 12.5 4.20924 12.5 4.375C12.5 4.54076 12.5658 4.69973 12.6831 4.81694C12.8003 4.93415 12.9592 5 13.125 5C13.6223 5 14.0992 5.19754 14.4508 5.54917C14.8025 5.90081 15 6.37772 15 6.875C15 7.04076 15.0658 7.19973 15.1831 7.31694C15.3003 7.43415 15.4592 7.5 15.625 7.5C15.7908 7.5 15.9497 7.43415 16.0669 7.31694C16.1842 7.19973 16.25 7.04076 16.25 6.875C16.25 6.0462 15.9208 5.25134 15.3347 4.66529C14.7487 4.07924 13.9538 3.75 13.125 3.75Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/LightBulb/index.tsx b/www/docs/src/theme/Icon/LightBulb/index.tsx index 7d89b28077..4f842541ba 100644 --- a/www/docs/src/theme/Icon/LightBulb/index.tsx +++ b/www/docs/src/theme/Icon/LightBulb/index.tsx @@ -18,7 +18,7 @@ const IconLightBulb: React.FC = ({ d="M10.0005 14.5882V10.5728M10.0005 10.5728C10.3874 10.5731 10.7729 10.5245 11.1477 10.4282M10.0005 10.5728C9.61347 10.5731 9.228 10.5245 8.85318 10.4282M11.7214 16.1478C10.5843 16.3637 9.41666 16.3637 8.27954 16.1478M11.1477 17.9704C10.385 18.0503 9.61595 18.0503 8.85318 17.9704M11.7214 14.5882V14.4414C11.7214 13.6895 12.2247 13.0471 12.8748 12.67C13.967 12.0375 14.8201 11.0624 15.302 9.89591C15.7838 8.72937 15.8675 7.43648 15.54 6.21757C15.2126 4.99865 14.4923 3.92176 13.4907 3.15375C12.4891 2.38574 11.2622 1.96948 10.0001 1.96948C8.73794 1.96948 7.51104 2.38574 6.50947 3.15375C5.50789 3.92176 4.78757 4.99865 4.46011 6.21757C4.13265 7.43648 4.21633 8.72937 4.69818 9.89591C5.18003 11.0624 6.03316 12.0375 7.12537 12.67C7.7755 13.0471 8.27954 13.6895 8.27954 14.4414V14.5882" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/LightBulbSolid/index.tsx b/www/docs/src/theme/Icon/LightBulbSolid/index.tsx index 978c94e4aa..6328503a37 100644 --- a/www/docs/src/theme/Icon/LightBulbSolid/index.tsx +++ b/www/docs/src/theme/Icon/LightBulbSolid/index.tsx @@ -18,7 +18,7 @@ const IconLightBulbSolid: React.FC = ({ d="M10 1.81238C8.67878 1.81208 7.39432 2.24761 6.34574 3.05146C5.29715 3.85532 4.543 4.9826 4.20016 6.2586C3.85732 7.5346 3.94495 8.88806 4.44946 10.1092C4.95397 11.3303 5.84718 12.351 6.99067 13.0129C7.48993 13.3026 7.80214 13.7465 7.81597 14.1941C7.81979 14.314 7.86299 14.4293 7.93889 14.5221C8.01479 14.615 8.11917 14.6803 8.2359 14.7079C8.49208 14.7683 8.75262 14.8156 9.01753 14.8498C9.25261 14.8797 9.4542 14.6912 9.4542 14.4539V11.0617C9.22423 11.0364 8.99635 10.9948 8.77227 10.9373C8.70284 10.9194 8.63761 10.888 8.5803 10.8449C8.52299 10.8019 8.47472 10.7479 8.43826 10.6862C8.4018 10.6244 8.37786 10.5561 8.3678 10.4851C8.35774 10.4142 8.36176 10.3419 8.37964 10.2724C8.39751 10.203 8.42888 10.1378 8.47196 10.0805C8.51505 10.0232 8.569 9.9749 8.63073 9.93844C8.69247 9.90198 8.76078 9.87804 8.83177 9.86798C8.90275 9.85792 8.97503 9.86194 9.04446 9.87981C9.67127 10.0414 10.3288 10.0414 10.9556 9.87981C11.0257 9.8596 11.0992 9.85366 11.1717 9.86235C11.2442 9.87103 11.3141 9.89416 11.3775 9.93037C11.4409 9.96658 11.4964 10.0151 11.5406 10.0731C11.5849 10.1312 11.6171 10.1975 11.6353 10.2682C11.6535 10.3388 11.6574 10.4124 11.6466 10.4846C11.6359 10.5568 11.6108 10.6261 11.5728 10.6885C11.5348 10.7508 11.4847 10.8048 11.4254 10.8474C11.3662 10.8901 11.299 10.9204 11.2278 10.9365C11.0037 10.9944 10.7759 11.0362 10.5459 11.0617V14.4532C10.5459 14.6912 10.7475 14.8797 10.9825 14.8498C11.2474 14.8156 11.508 14.7683 11.7642 14.7079C11.8809 14.6803 11.9853 14.615 12.0612 14.5221C12.1371 14.4293 12.1803 14.314 12.1841 14.1941C12.1987 13.7465 12.5101 13.3026 13.0094 13.0129C14.1529 12.351 15.0461 11.3303 15.5506 10.1092C16.0551 8.88806 16.1427 7.5346 15.7999 6.2586C15.4571 4.9826 14.7029 3.85532 13.6543 3.05146C12.6058 2.24761 11.3213 1.81208 10 1.81238Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> = ({ d="M7.82613 15.7493C7.8395 15.6788 7.86661 15.6117 7.90592 15.5517C7.94524 15.4918 7.99598 15.4401 8.05525 15.3998C8.11452 15.3594 8.18116 15.3312 8.25137 15.3166C8.32157 15.302 8.39396 15.3014 8.4644 15.3148C9.47909 15.5073 10.5209 15.5073 11.5356 15.3148C11.6069 15.2991 11.6806 15.2978 11.7524 15.3111C11.8242 15.3244 11.8926 15.352 11.9535 15.3922C12.0145 15.4324 12.0667 15.4844 12.1072 15.5452C12.1477 15.6059 12.1756 15.6742 12.1892 15.7459C12.2028 15.8176 12.2019 15.8914 12.1866 15.9627C12.1712 16.0341 12.1417 16.1017 12.0998 16.1614C12.0578 16.2212 12.0043 16.2719 11.9424 16.3106C11.8805 16.3493 11.8115 16.3752 11.7394 16.3868C10.5901 16.6049 9.40996 16.6049 8.26062 16.3868C8.1185 16.3598 7.99291 16.2775 7.91144 16.1579C7.82997 16.0384 7.79929 15.8914 7.82613 15.7493ZM8.36542 17.5279C8.37287 17.4566 8.39429 17.3875 8.42846 17.3245C8.46263 17.2615 8.50888 17.2058 8.56456 17.1606C8.62025 17.1155 8.68429 17.0818 8.75301 17.0614C8.82174 17.041 8.89381 17.0343 8.96511 17.0418C9.65317 17.1137 10.3469 17.1137 11.0349 17.0418C11.1789 17.0267 11.323 17.0695 11.4354 17.1607C11.5479 17.2518 11.6195 17.384 11.6346 17.5279C11.6497 17.6719 11.6069 17.816 11.5157 17.9285C11.4246 18.0409 11.2924 18.1126 11.1484 18.1276C10.3849 18.2076 9.61511 18.2076 8.85157 18.1276C8.78027 18.1202 8.71114 18.0988 8.64812 18.0646C8.5851 18.0304 8.52943 17.9842 8.48428 17.9285C8.43914 17.8728 8.4054 17.8088 8.38501 17.74C8.36461 17.6713 8.35796 17.5992 8.36542 17.5279Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/LightMode/index.tsx b/www/docs/src/theme/Icon/LightMode/index.tsx index 7fca8a4f90..a2b098a129 100644 --- a/www/docs/src/theme/Icon/LightMode/index.tsx +++ b/www/docs/src/theme/Icon/LightMode/index.tsx @@ -18,7 +18,7 @@ const IconLightMode: React.FC = ({ d="M10 2.5V4.375M15.3033 4.69667L13.9775 6.0225M17.5 10H15.625M15.3033 15.3033L13.9775 13.9775M10 15.625V17.5M6.0225 13.9775L4.69667 15.3033M4.375 10H2.5M6.0225 6.0225L4.69667 4.69667M13.125 10C13.125 10.8288 12.7958 11.6237 12.2097 12.2097C11.6237 12.7958 10.8288 13.125 10 13.125C9.1712 13.125 8.37634 12.7958 7.79029 12.2097C7.20424 11.6237 6.875 10.8288 6.875 10C6.875 9.1712 7.20424 8.37634 7.79029 7.79029C8.37634 7.20424 9.1712 6.875 10 6.875C10.8288 6.875 11.6237 7.20424 12.2097 7.79029C12.7958 8.37634 13.125 9.1712 13.125 10Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/LinkedIn/index.tsx b/www/docs/src/theme/Icon/LinkedIn/index.tsx index a56565b1f8..efc48e4bf7 100644 --- a/www/docs/src/theme/Icon/LinkedIn/index.tsx +++ b/www/docs/src/theme/Icon/LinkedIn/index.tsx @@ -18,7 +18,7 @@ const IconLinkedIn: React.FC = ({ d="M15.25 1H4.75C2.67925 1 1 2.67925 1 4.75V15.25C1 17.3208 2.67925 19 4.75 19H15.25C17.3215 19 19 17.3208 19 15.25V4.75C19 2.67925 17.3215 1 15.25 1ZM7 15.25H4.75V7H7V15.25ZM5.875 6.049C5.1505 6.049 4.5625 5.4565 4.5625 4.726C4.5625 3.9955 5.1505 3.403 5.875 3.403C6.5995 3.403 7.1875 3.9955 7.1875 4.726C7.1875 5.4565 6.60025 6.049 5.875 6.049ZM16 15.25H13.75V11.047C13.75 8.521 10.75 8.71225 10.75 11.047V15.25H8.5V7H10.75V8.32375C11.797 6.38425 16 6.241 16 10.1808V15.25Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/Map/index.tsx b/www/docs/src/theme/Icon/Map/index.tsx new file mode 100644 index 0000000000..d6a49d50ce --- /dev/null +++ b/www/docs/src/theme/Icon/Map/index.tsx @@ -0,0 +1,28 @@ +import React from "react" +import { IconProps } from ".." + +const IconMap: React.FC = ({ iconColorClassName, ...props }) => { + return ( + + + + ) +} + +export default IconMap diff --git a/www/docs/src/theme/Icon/Newspaper/index.tsx b/www/docs/src/theme/Icon/Newspaper/index.tsx new file mode 100644 index 0000000000..52f704dd14 --- /dev/null +++ b/www/docs/src/theme/Icon/Newspaper/index.tsx @@ -0,0 +1,31 @@ +import React from "react" +import { IconProps } from ".." + +const IconNewspaper: React.FC = ({ + iconColorClassName, + ...props +}) => { + return ( + + + + ) +} + +export default IconNewspaper diff --git a/www/docs/src/theme/Icon/Nextjs/index.tsx b/www/docs/src/theme/Icon/Nextjs/index.tsx index 2fdffc46c7..de76776dbd 100644 --- a/www/docs/src/theme/Icon/Nextjs/index.tsx +++ b/www/docs/src/theme/Icon/Nextjs/index.tsx @@ -15,14 +15,14 @@ const IconNextjs: React.FC = ({ iconColorClassName, ...props }) => { d="M9.41129 1.01314C9.37262 1.01666 9.24959 1.02896 9.13885 1.03775C6.585 1.268 4.19285 2.64599 2.67777 4.76395C1.8341 5.94157 1.2945 7.27737 1.09062 8.69227C1.01855 9.18617 1.00977 9.33206 1.00977 10.0017C1.00977 10.6714 1.01855 10.8173 1.09062 11.3112C1.57924 14.6876 3.98194 17.5244 7.2406 18.5755C7.82414 18.7636 8.43931 18.8919 9.13885 18.9692C9.41129 18.9991 10.5889 18.9991 10.8613 18.9692C12.0688 18.8356 13.0918 18.5368 14.1007 18.0218C14.2553 17.9427 14.2852 17.9216 14.2641 17.9041C14.2501 17.8935 13.591 17.0094 12.8 15.9408L11.3623 13.9986L9.56069 11.3323C8.56938 9.86638 7.75383 8.66767 7.7468 8.66767C7.73977 8.66591 7.73274 9.85056 7.72923 11.2971C7.72395 13.8299 7.7222 13.9318 7.69056 13.9916C7.64486 14.0777 7.60971 14.1128 7.53589 14.1515C7.47964 14.1796 7.43043 14.1849 7.16502 14.1849H6.86095L6.7801 14.1339C6.72737 14.1005 6.6887 14.0566 6.66234 14.0056L6.62543 13.9265L6.62894 10.4025L6.63422 6.87663L6.6887 6.80808C6.71683 6.77117 6.77659 6.72372 6.81877 6.70087C6.89083 6.66571 6.91895 6.6622 7.22303 6.6622C7.58158 6.6622 7.64134 6.67626 7.7345 6.7782C7.76086 6.80632 8.73635 8.27571 9.90343 10.0457C11.0705 11.8156 12.6664 14.2324 13.4503 15.4188L14.874 17.5754L14.9461 17.5279C15.5841 17.1131 16.2591 16.5226 16.7934 15.9074C17.9306 14.6015 18.6635 13.009 18.9096 11.3112C18.9816 10.8173 18.9904 10.6714 18.9904 10.0017C18.9904 9.33206 18.9816 9.18617 18.9096 8.69227C18.421 5.31585 16.0183 2.47901 12.7596 1.42794C12.1848 1.24163 11.5732 1.11333 10.8877 1.03599C10.719 1.01841 9.55717 0.999079 9.41129 1.01314ZM13.0918 6.45128C13.1762 6.49346 13.2447 6.57432 13.2693 6.65868C13.2834 6.70438 13.2869 7.68163 13.2834 9.88395L13.2781 13.0442L12.7209 12.19L12.162 11.3358V9.03853C12.162 7.55332 12.169 6.71844 12.1796 6.67802C12.2077 6.57959 12.2692 6.50225 12.3536 6.45655C12.4256 6.41964 12.452 6.41613 12.728 6.41613C12.9881 6.41613 13.0338 6.41964 13.0918 6.45128Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/PencilSquareSolid/index.tsx b/www/docs/src/theme/Icon/PencilSquareSolid/index.tsx index 9a12514c8d..338a2e4cb2 100644 --- a/www/docs/src/theme/Icon/PencilSquareSolid/index.tsx +++ b/www/docs/src/theme/Icon/PencilSquareSolid/index.tsx @@ -18,14 +18,14 @@ const IconPencilSquareSolid: React.FC = ({ d="M5.43278 13.9172L6.69478 10.7622C6.89592 10.2596 7.197 9.80302 7.57978 9.42018L14.4998 2.50218C14.8976 2.10436 15.4372 1.88086 15.9998 1.88086C16.5624 1.88086 17.102 2.10436 17.4998 2.50218C17.8976 2.9 18.1211 3.43957 18.1211 4.00218C18.1211 4.56479 17.8976 5.10435 17.4998 5.50218L10.5798 12.4202C10.1968 12.8032 9.73978 13.1052 9.23678 13.3062L6.08278 14.5682C5.99191 14.6046 5.89237 14.6135 5.7965 14.5938C5.70062 14.5741 5.61263 14.5267 5.54342 14.4575C5.47421 14.3883 5.42684 14.3003 5.40717 14.2045C5.3875 14.1086 5.39641 14.009 5.43278 13.9182V13.9172Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/Puzzle/index.tsx b/www/docs/src/theme/Icon/Puzzle/index.tsx index 9e679cbf73..1a81a9d089 100644 --- a/www/docs/src/theme/Icon/Puzzle/index.tsx +++ b/www/docs/src/theme/Icon/Puzzle/index.tsx @@ -15,7 +15,7 @@ const IconPuzzle: React.FC = ({ iconColorClassName, ...props }) => { d="M11.875 5.0725C11.875 4.77667 12.03 4.50917 12.2092 4.27333C12.3933 4.03167 12.5 3.745 12.5 3.4375C12.5 2.57417 11.6608 1.875 10.625 1.875C9.58917 1.875 8.75 2.575 8.75 3.4375C8.75 3.745 8.85667 4.03167 9.04083 4.27333C9.22 4.50917 9.375 4.77667 9.375 5.0725C9.37536 5.14396 9.36136 5.21476 9.33382 5.2807C9.30629 5.34664 9.26578 5.40637 9.21471 5.45635C9.16365 5.50633 9.10305 5.54554 9.03654 5.57165C8.97002 5.59776 8.89893 5.61023 8.8275 5.60833C7.66805 5.57493 6.51059 5.49152 5.35833 5.35833C5.51333 6.7025 5.6025 8.06667 5.62083 9.4475C5.62161 9.51992 5.60798 9.59177 5.58075 9.65888C5.55352 9.72599 5.51323 9.78702 5.46221 9.83842C5.41119 9.88983 5.35047 9.93058 5.28357 9.95832C5.21667 9.98606 5.14492 10.0002 5.0725 10C4.77667 10 4.50917 9.845 4.27333 9.66583C4.03448 9.47926 3.74058 9.377 3.4375 9.375C2.57417 9.375 1.875 10.2142 1.875 11.25C1.875 12.2858 2.575 13.125 3.4375 13.125C3.745 13.125 4.03167 13.0183 4.27333 12.8342C4.50917 12.655 4.77667 12.5 5.0725 12.5C5.33083 12.5 5.535 12.7167 5.51583 12.975C5.41218 14.3879 5.23359 15.7943 4.98083 17.1883C6.24583 17.3467 7.52917 17.4458 8.8275 17.4833C8.89893 17.4852 8.97002 17.4728 9.03654 17.4467C9.10305 17.4205 9.16365 17.3813 9.21471 17.3314C9.26578 17.2814 9.30629 17.2216 9.33382 17.1557C9.36136 17.0898 9.37536 17.019 9.375 16.9475C9.375 16.6517 9.22 16.3842 9.04083 16.1483C8.85426 15.9095 8.752 15.6156 8.75 15.3125C8.75 14.45 9.59 13.75 10.625 13.75C11.6608 13.75 12.5 14.45 12.5 15.3125C12.5 15.62 12.3933 15.9067 12.2092 16.1483C12.03 16.3842 11.8758 16.6517 11.8758 16.9475C11.8758 17.225 12.1067 17.4467 12.3842 17.4308C13.9004 17.3417 15.4103 17.1664 16.9067 16.9058C17.1331 15.6044 17.2949 14.2925 17.3917 12.975C17.396 12.9141 17.3878 12.853 17.3674 12.7954C17.347 12.7379 17.315 12.6851 17.2733 12.6405C17.2316 12.5959 17.1811 12.5604 17.1251 12.5363C17.069 12.5121 17.0086 12.4997 16.9475 12.5C16.6517 12.5 16.3842 12.655 16.1483 12.8342C15.9067 13.0183 15.62 13.125 15.3125 13.125C14.45 13.125 13.75 12.2858 13.75 11.25C13.75 10.2142 14.45 9.375 15.3125 9.375C15.6208 9.375 15.9067 9.48167 16.1483 9.66583C16.3842 9.845 16.6517 10 16.9483 10C17.0208 10.0002 17.0925 9.98606 17.1594 9.95832C17.2263 9.93058 17.287 9.88983 17.338 9.83842C17.3891 9.78702 17.4294 9.72599 17.4566 9.65888C17.4838 9.59177 17.4974 9.51992 17.4967 9.4475C17.4766 7.95405 17.3737 6.46287 17.1883 4.98083C15.6167 5.26583 14.0133 5.45917 12.3833 5.555C12.3177 5.55864 12.2521 5.54882 12.1904 5.52614C12.1288 5.50346 12.0724 5.46841 12.0248 5.42314C11.9771 5.37787 11.9393 5.32333 11.9135 5.26289C11.8878 5.20244 11.8747 5.1382 11.875 5.0725Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/PuzzleSolid/index.tsx b/www/docs/src/theme/Icon/PuzzleSolid/index.tsx index 1532bf1351..ba4d8661fd 100644 --- a/www/docs/src/theme/Icon/PuzzleSolid/index.tsx +++ b/www/docs/src/theme/Icon/PuzzleSolid/index.tsx @@ -18,7 +18,7 @@ const IconPuzzleSolid: React.FC = ({ d="M9.375 4.4475C9.375 4.15167 9.22 3.88417 9.04083 3.64833C8.85426 3.40948 8.752 3.11558 8.75 2.8125C8.75 1.94917 9.58917 1.25 10.625 1.25C11.6608 1.25 12.5 1.95 12.5 2.8125C12.5 3.12 12.3933 3.40667 12.2092 3.64833C12.03 3.88417 11.875 4.15167 11.875 4.4475C11.875 4.72417 12.1067 4.94583 12.3833 4.92917C13.975 4.83417 15.5417 4.64417 17.0767 4.36583C17.1603 4.35068 17.2461 4.35273 17.3289 4.37186C17.4117 4.39099 17.4897 4.42681 17.5582 4.47712C17.6267 4.52742 17.6842 4.59117 17.7272 4.66445C17.7702 4.73773 17.7978 4.81902 17.8083 4.90333C17.9969 6.4108 18.1015 7.92758 18.1217 9.44667C18.1224 9.51927 18.1088 9.59129 18.0814 9.65856C18.0541 9.72582 18.0137 9.78698 17.9625 9.83848C17.9113 9.88997 17.8504 9.93077 17.7833 9.9585C17.7162 9.98623 17.6443 10.0003 17.5717 10C17.2767 10 17.0092 9.845 16.7733 9.66583C16.5345 9.47926 16.2406 9.377 15.9375 9.375C15.075 9.375 14.375 10.2142 14.375 11.25C14.375 12.2858 15.075 13.125 15.9375 13.125C16.245 13.125 16.5317 13.0183 16.7733 12.8342C17.0092 12.655 17.2767 12.5 17.5725 12.5C17.8308 12.5 18.0367 12.7183 18.0175 12.9758C17.9197 14.3291 17.7542 15.6766 17.5217 17.0133C17.4996 17.1401 17.4389 17.2569 17.3479 17.3479C17.2569 17.4389 17.1401 17.4996 17.0133 17.5217C15.4967 17.7858 13.9525 17.9658 12.3842 18.0567C12.3185 18.0602 12.2528 18.0503 12.1911 18.0275C12.1294 18.0047 12.0729 17.9696 12.0253 17.9243C11.9776 17.879 11.9397 17.8244 11.9139 17.7639C11.888 17.7034 11.8748 17.6383 11.875 17.5725C11.875 17.2767 12.03 17.0092 12.2092 16.7733C12.3933 16.5317 12.5 16.245 12.5 15.9375C12.5 15.075 11.6608 14.375 10.625 14.375C9.58917 14.375 8.75 15.075 8.75 15.9375C8.75 16.245 8.85667 16.5317 9.04083 16.7733C9.22 17.0092 9.375 17.2767 9.375 17.5725C9.37525 17.644 9.36114 17.7148 9.33351 17.7808C9.30589 17.8467 9.2653 17.9064 9.21417 17.9564C9.16303 18.0064 9.10239 18.0456 9.03583 18.0717C8.96926 18.0978 8.89814 18.1102 8.82667 18.1083C7.51484 18.0713 6.20555 17.9712 4.90333 17.8083C4.81902 17.7978 4.73773 17.7702 4.66445 17.7272C4.59117 17.6842 4.52742 17.6267 4.47712 17.5582C4.42681 17.4897 4.39099 17.4117 4.37186 17.3289C4.35273 17.2461 4.35068 17.1603 4.36583 17.0767C4.61 15.7317 4.78583 14.3625 4.89 12.9733C4.89436 12.9127 4.88614 12.8517 4.86586 12.7944C4.84557 12.737 4.81365 12.6845 4.77211 12.64C4.73056 12.5956 4.68028 12.5602 4.62443 12.5361C4.56857 12.512 4.50833 12.4997 4.4475 12.5C4.15167 12.5 3.88417 12.655 3.64833 12.8342C3.40667 13.0183 3.12 13.125 2.8125 13.125C1.94917 13.125 1.25 12.2858 1.25 11.25C1.25 10.2142 1.95 9.375 2.8125 9.375C3.12 9.375 3.40667 9.48167 3.64833 9.66583C3.88417 9.845 4.15167 10 4.4475 10C4.51999 10.0003 4.59183 9.98625 4.65883 9.95856C4.72582 9.93087 4.78665 9.89013 4.83775 9.83872C4.88886 9.7873 4.92922 9.72624 4.95651 9.65907C4.98379 9.59191 4.99744 9.51999 4.99667 9.4475C4.97844 8.10511 4.89221 6.7645 4.73833 5.43083C4.72743 5.33729 4.7378 5.2425 4.76868 5.15353C4.79956 5.06457 4.85015 4.98373 4.91666 4.91706C4.98317 4.85039 5.06388 4.79961 5.15277 4.76852C5.24167 4.73742 5.33643 4.72682 5.43 4.7375C6.54917 4.86667 7.6825 4.94917 8.8275 4.9825C8.89886 4.9844 8.96988 4.97195 9.03634 4.94589C9.1028 4.91983 9.16336 4.8807 9.21441 4.83081C9.26547 4.78092 9.30599 4.72128 9.33358 4.65544C9.36116 4.5896 9.37525 4.51889 9.375 4.4475Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/React/index.tsx b/www/docs/src/theme/Icon/React/index.tsx index 14d50f0e70..908b1d3b4a 100644 --- a/www/docs/src/theme/Icon/React/index.tsx +++ b/www/docs/src/theme/Icon/React/index.tsx @@ -17,7 +17,7 @@ const IconReact: React.FC = ({ iconColorClassName, ...props }) => { d="M15 1H5C2.79086 1 1 2.79086 1 5V15C1 17.2091 2.79086 19 5 19H15C17.2091 19 19 17.2091 19 15V5C19 2.79086 17.2091 1 15 1ZM10.0003 11.2078C10.6674 11.2078 11.2082 10.667 11.2082 9.99996C11.2082 9.33288 10.6674 8.79211 10.0003 8.79211C9.33325 8.79211 8.79248 9.33288 8.79248 9.99996C8.79248 10.667 9.33325 11.2078 10.0003 11.2078ZM8.06503 8.86386C8.28283 8.48662 8.50857 8.12594 8.73928 7.784C9.1509 7.75515 9.57625 7.73998 10.012 7.73998C10.4476 7.73998 10.8727 7.75514 11.2842 7.78396C11.5149 8.12595 11.7407 8.48667 11.9585 8.86396C12.1764 9.24126 12.3759 9.61716 12.5567 9.98799C12.3759 10.3588 12.1764 10.7346 11.9586 11.1118C11.7408 11.4892 11.515 11.8499 11.2842 12.1919C10.8727 12.2208 10.4476 12.2359 10.012 12.2359C9.57625 12.2359 9.15088 12.2207 8.73926 12.1919C8.50852 11.8499 8.28276 11.4892 8.06494 11.1119C7.84712 10.7347 7.64762 10.3588 7.46683 9.98799C7.64765 9.61712 7.84717 9.24119 8.06503 8.86386ZM7.199 8.36386C7.28515 8.21465 7.37263 8.06763 7.46131 7.92294C7.19046 7.96346 6.92853 8.01017 6.67673 8.06252C6.7573 8.30676 6.84782 8.55695 6.94815 8.81177C7.02917 8.66253 7.11281 8.51316 7.199 8.36386ZM10.012 6.73998C9.83957 6.73998 9.66836 6.74224 9.49857 6.74669C9.66908 6.53239 9.8405 6.32889 10.0117 6.137C10.183 6.32889 10.3544 6.53238 10.5249 6.74668C10.3553 6.74223 10.1842 6.73998 10.012 6.73998ZM8.18659 6.82673C8.55331 6.31332 8.93204 5.84086 9.31375 5.41753C9.15218 5.26552 8.99215 5.12515 8.83462 4.99712C8.32141 4.58001 7.85594 4.31119 7.46842 4.18582C7.08084 4.06044 6.82658 4.0938 6.66321 4.18812C6.49983 4.28244 6.34381 4.48596 6.25861 4.88431C6.17342 5.28259 6.17349 5.82011 6.27811 6.47312C6.31023 6.67358 6.35178 6.88237 6.40264 7.09832C6.9601 6.9794 7.55862 6.88763 8.18659 6.82673ZM11.8369 6.82668C11.4701 6.31329 11.0914 5.84084 10.7097 5.41752C10.8713 5.26548 11.0314 5.12508 11.1889 4.99702C11.7022 4.57991 12.1676 4.31109 12.5551 4.18572C12.9427 4.06034 13.197 4.0937 13.3604 4.18802C13.5237 4.28234 13.6797 4.48586 13.765 4.88421C13.8501 5.28249 13.8501 5.82001 13.7454 6.47302C13.7133 6.67348 13.6718 6.88227 13.6209 7.09822C13.0634 6.97932 12.4649 6.88756 11.8369 6.82668ZM14.7329 6.63121C14.696 6.86139 14.6483 7.09961 14.5902 7.34454C14.8315 7.4167 15.0616 7.49456 15.2794 7.57773C15.964 7.83912 16.5525 8.16256 16.9785 8.54717C17.4045 8.93173 17.7091 9.41776 17.7091 9.98795C17.7091 10.5581 17.4045 11.0442 16.9785 11.4287C16.5525 11.8133 15.964 12.1368 15.2794 12.3982C15.0616 12.4813 14.8314 12.5592 14.5902 12.6314C14.6483 12.8763 14.6959 13.1144 14.7328 13.3446C14.8487 14.0681 14.8628 14.7395 14.7427 15.3007C14.6227 15.8619 14.3541 16.3687 13.8603 16.6538C13.3665 16.9389 12.7933 16.9182 12.2472 16.7415C11.7011 16.5648 11.1268 16.217 10.5581 15.7548C10.3773 15.6078 10.1948 15.4474 10.0117 15.2746C9.82871 15.4474 9.64627 15.6077 9.46542 15.7547C8.89676 16.2169 8.32243 16.5647 7.77632 16.7414C7.23028 16.9181 6.65709 16.9388 6.1633 16.6537C5.6695 16.3686 5.40086 15.8618 5.28082 15.3006C5.16077 14.7393 5.17488 14.068 5.2908 13.3445C5.32767 13.1143 5.3753 12.8761 5.43339 12.6312C5.19231 12.5591 4.96227 12.4813 4.74456 12.3982C4.05998 12.1368 3.47154 11.8133 3.04548 11.4287C2.61948 11.0442 2.31494 10.5581 2.31494 9.98795C2.31494 9.41776 2.61948 8.93173 3.04548 8.54717C3.47154 8.16256 4.05998 7.83912 4.74456 7.57773C4.96225 7.49461 5.19227 7.41678 5.43332 7.34466C5.37522 7.09972 5.32759 6.8615 5.29071 6.63132C5.17478 5.90776 5.16067 5.23643 5.28073 4.67515C5.40076 4.11394 5.66941 3.60719 6.16321 3.3221C6.657 3.037 7.23018 3.05773 7.77623 3.23437C8.32234 3.41105 8.89666 3.75893 9.46532 4.2211C9.64621 4.36812 9.82868 4.52846 10.0117 4.70122C10.1948 4.52842 10.3773 4.36804 10.5582 4.221C11.1269 3.75883 11.7012 3.41094 12.2473 3.23427C12.7934 3.05762 13.3666 3.0369 13.8604 3.32199C14.3541 3.60709 14.6228 4.11384 14.7428 4.67505C14.8629 5.23633 14.8488 5.90765 14.7329 6.63121ZM12.5621 7.92286C12.833 7.96337 13.095 8.01008 13.3468 8.06244C13.2662 8.3067 13.1757 8.55694 13.0754 8.81179C12.9944 8.66258 12.9107 8.51323 12.8246 8.36396C12.7384 8.21469 12.6509 8.06761 12.5621 7.92286ZM14.3189 8.30716C14.1431 8.84942 13.9233 9.41368 13.662 9.988C13.9233 10.5623 14.1431 11.1265 14.3188 11.6687C14.5314 11.6048 14.733 11.5364 14.9227 11.4639C15.5406 11.228 16.0061 10.9593 16.3084 10.6864C16.6108 10.4135 16.7091 10.1766 16.7091 9.98795C16.7091 9.7993 16.6108 9.56242 16.3084 9.28946C16.0061 9.01654 15.5406 8.74785 14.9227 8.51195C14.733 8.43952 14.5314 8.3711 14.3189 8.30716ZM12.8246 11.6118C12.9108 11.4626 12.9944 11.3133 13.0753 11.1642C13.1757 11.419 13.2662 11.6692 13.3468 11.9135C13.095 11.9658 12.833 12.0125 12.5622 12.053C12.6509 11.9082 12.7384 11.7611 12.8246 11.6118ZM11.8369 13.1492C12.4649 13.0883 13.0634 12.9966 13.6208 12.8777C13.6717 13.0936 13.7132 13.3023 13.7454 13.5028C13.85 14.1558 13.85 14.6933 13.7649 15.0916C13.6797 15.4899 13.5236 15.6934 13.3603 15.7878C13.1969 15.8821 12.9426 15.9154 12.555 15.7901C12.1675 15.6647 11.7021 15.3959 11.1889 14.9788C11.0313 14.8507 10.8713 14.7104 10.7097 14.5584C11.0914 14.135 11.4702 13.6626 11.8369 13.1492ZM10.5249 13.2292C10.3544 13.4435 10.183 13.647 10.0117 13.8389C9.8405 13.647 9.66908 13.4435 9.49856 13.2292C9.66835 13.2337 9.83957 13.2359 10.012 13.2359C10.1843 13.2359 10.3553 13.2337 10.5249 13.2292ZM7.19891 11.6119C7.28507 11.7612 7.37258 11.9082 7.46128 12.053C7.19047 12.0124 6.92856 11.9657 6.67679 11.9134C6.75734 11.6692 6.84785 11.419 6.94816 11.1642C7.02915 11.3134 7.11275 11.4627 7.19891 11.6119ZM8.18657 13.1492C7.55863 13.0883 6.96014 12.9965 6.40271 12.8776C6.35186 13.0935 6.31032 13.3022 6.27821 13.5027C6.17359 14.1557 6.17351 14.6932 6.2587 15.0915C6.3439 15.4898 6.49993 15.6933 6.6633 15.7877C6.82667 15.882 7.08094 15.9153 7.46852 15.79C7.85603 15.6646 8.3215 15.3958 8.83471 14.9787C8.99221 14.8507 9.1522 14.7103 9.31374 14.5583C8.93203 14.135 8.55329 13.6626 8.18657 13.1492ZM5.10126 11.4639C5.29085 11.5363 5.49236 11.6047 5.70472 11.6686C5.88047 11.1264 6.10024 10.5622 6.36147 9.988C6.10021 9.41372 5.88043 8.84951 5.70467 8.30729C5.49233 8.37118 5.29083 8.43957 5.10126 8.51195C4.48343 8.74785 4.01789 9.01654 3.71556 9.28946C3.41318 9.56242 3.31494 9.7993 3.31494 9.98795C3.31494 10.1766 3.41318 10.4135 3.71556 10.6864C4.01789 10.9593 4.48343 11.228 5.10126 11.4639Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/ReceiptPercent/index.tsx b/www/docs/src/theme/Icon/ReceiptPercent/index.tsx index 603b00b750..9238998554 100644 --- a/www/docs/src/theme/Icon/ReceiptPercent/index.tsx +++ b/www/docs/src/theme/Icon/ReceiptPercent/index.tsx @@ -18,7 +18,7 @@ const IconReceiptPercent: React.FC = ({ d="M7.5 11.875L12.5 6.87505M16.25 3.96422V18.1251L13.125 16.875L10 18.1251L6.875 16.875L3.75 18.1251V3.96422C3.75 3.04088 4.42167 2.25005 5.33917 2.14338C8.43599 1.78391 11.564 1.78391 14.6608 2.14338C15.5775 2.25005 16.25 3.04088 16.25 3.96422ZM8.125 7.50005H8.13167V7.50672H8.125V7.50005ZM8.4375 7.50005C8.4375 7.58293 8.40458 7.66242 8.34597 7.72102C8.28737 7.77963 8.20788 7.81255 8.125 7.81255C8.04212 7.81255 7.96263 7.77963 7.90403 7.72102C7.84542 7.66242 7.8125 7.58293 7.8125 7.50005C7.8125 7.41717 7.84542 7.33768 7.90403 7.27908C7.96263 7.22047 8.04212 7.18755 8.125 7.18755C8.20788 7.18755 8.28737 7.22047 8.34597 7.27908C8.40458 7.33768 8.4375 7.41717 8.4375 7.50005V7.50005ZM11.875 11.25H11.8817V11.2567H11.875V11.25ZM12.1875 11.25C12.1875 11.3329 12.1546 11.4124 12.096 11.471C12.0374 11.5296 11.9579 11.5625 11.875 11.5625C11.7921 11.5625 11.7126 11.5296 11.654 11.471C11.5954 11.4124 11.5625 11.3329 11.5625 11.25C11.5625 11.1672 11.5954 11.0877 11.654 11.0291C11.7126 10.9705 11.7921 10.9375 11.875 10.9375C11.9579 10.9375 12.0374 10.9705 12.096 11.0291C12.1546 11.0877 12.1875 11.1672 12.1875 11.25V11.25Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/Report/index.tsx b/www/docs/src/theme/Icon/Report/index.tsx index 1f9cf43008..d6c53ffe1d 100644 --- a/www/docs/src/theme/Icon/Report/index.tsx +++ b/www/docs/src/theme/Icon/Report/index.tsx @@ -15,7 +15,7 @@ const IconReport: React.FC = ({ iconColorClassName, ...props }) => { d="M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" @@ -25,7 +25,7 @@ const IconReport: React.FC = ({ iconColorClassName, ...props }) => { d="M10 6.6665V9.99984" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" @@ -35,7 +35,7 @@ const IconReport: React.FC = ({ iconColorClassName, ...props }) => { d="M10 13.3335H10.0088" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/RocketLaunch/index.tsx b/www/docs/src/theme/Icon/RocketLaunch/index.tsx index 8523adb64e..836e834a26 100644 --- a/www/docs/src/theme/Icon/RocketLaunch/index.tsx +++ b/www/docs/src/theme/Icon/RocketLaunch/index.tsx @@ -18,7 +18,7 @@ const IconRocketLaunch: React.FC = ({ d="M12.7845 11.8383C12.9461 12.5217 12.9508 13.2328 12.7985 13.9182C12.6461 14.6037 12.3407 15.2459 11.9049 15.7965C11.4691 16.3472 10.9144 16.7921 10.2823 17.098C9.65017 17.4038 8.95703 17.5626 8.25481 17.5625V13.8394M12.7845 11.8383C14.2659 10.7592 15.471 9.34497 16.3014 7.71115C17.1318 6.07732 17.5639 4.27024 17.5625 2.4375C15.7299 2.43618 13.923 2.86836 12.2893 3.69875C10.6556 4.52913 9.24152 5.73417 8.1625 7.21545M12.7853 11.8383C11.4372 12.8243 9.89165 13.507 8.25481 13.8394M8.1625 7.21545C7.47906 7.0538 6.76789 7.04894 6.08229 7.20121C5.39669 7.35349 4.75445 7.65895 4.20369 8.09473C3.65293 8.5305 3.20794 9.08527 2.90207 9.71747C2.5962 10.3497 2.43737 11.0429 2.4375 11.7452H6.16058M8.1625 7.21545C7.17657 8.56337 6.49391 10.1086 6.16135 11.7452M8.25481 13.8394C8.17492 13.8557 8.09425 13.8712 8.01358 13.886C7.30991 13.328 6.6728 12.6909 6.11481 11.9872C6.12947 11.9064 6.14498 11.8257 6.16135 11.7452M4.42392 13.599C3.91368 13.9784 3.51698 14.4902 3.27676 15.0789C3.03655 15.6676 2.96197 16.3108 3.06112 16.9389C3.68925 17.0379 4.33252 16.9632 4.92124 16.7229C5.50996 16.4825 6.0217 16.0857 6.40102 15.5753M13.4904 7.67308C13.4904 7.98165 13.3678 8.27758 13.1496 8.49577C12.9314 8.71396 12.6355 8.83654 12.3269 8.83654C12.0184 8.83654 11.7224 8.71396 11.5042 8.49577C11.286 8.27758 11.1635 7.98165 11.1635 7.67308C11.1635 7.36451 11.286 7.06858 11.5042 6.85039C11.7224 6.6322 12.0184 6.50962 12.3269 6.50962C12.6355 6.50962 12.9314 6.6322 13.1496 6.85039C13.3678 7.06858 13.4904 7.36451 13.4904 7.67308Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/Server/index.tsx b/www/docs/src/theme/Icon/Server/index.tsx index 83bba762f6..1a584e7b40 100644 --- a/www/docs/src/theme/Icon/Server/index.tsx +++ b/www/docs/src/theme/Icon/Server/index.tsx @@ -15,7 +15,7 @@ const IconServer: React.FC = ({ iconColorClassName, ...props }) => { d="M18.125 14.375V14.185C18.1249 13.896 18.0913 13.608 18.025 13.3267L16.135 5.29333C15.9898 4.6763 15.6404 4.1264 15.1436 3.73282C14.6467 3.33924 14.0314 3.12505 13.3975 3.125H6.6025C5.96862 3.12505 5.35334 3.33924 4.85644 3.73282C4.35955 4.1264 4.01018 4.6763 3.865 5.29333L1.975 13.3267C1.9087 13.608 1.87515 13.896 1.875 14.185V14.375M18.125 14.375C18.125 15.038 17.8616 15.6739 17.3928 16.1428C16.9239 16.6116 16.288 16.875 15.625 16.875H4.375C3.71196 16.875 3.07607 16.6116 2.60723 16.1428C2.13839 15.6739 1.875 15.038 1.875 14.375M18.125 14.375C18.125 13.712 17.8616 13.0761 17.3928 12.6072C16.9239 12.1384 16.288 11.875 15.625 11.875H4.375C3.71196 11.875 3.07607 12.1384 2.60723 12.6072C2.13839 13.0761 1.875 13.712 1.875 14.375M15.625 14.375H15.6317V14.3817H15.625V14.375ZM13.125 14.375H13.1317V14.3817H13.125V14.375Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/ServerSolid/index.tsx b/www/docs/src/theme/Icon/ServerSolid/index.tsx index 5b49f69c54..06fe090ee2 100644 --- a/www/docs/src/theme/Icon/ServerSolid/index.tsx +++ b/www/docs/src/theme/Icon/ServerSolid/index.tsx @@ -18,7 +18,7 @@ const IconServerSolid: React.FC = ({ d="M3.40009 4.35583C3.54204 3.82355 3.85583 3.35305 4.29269 3.01745C4.72956 2.68185 5.26504 2.49995 5.81593 2.5H14.1834C14.7345 2.49976 15.2701 2.68158 15.7072 3.0172C16.1442 3.35281 16.4581 3.82341 16.6001 4.35583L18.3609 10.9608C17.5854 10.3376 16.62 9.9985 15.6251 10H4.37509C3.37991 9.99831 2.41413 10.3374 1.63843 10.9608L3.40009 4.35583Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> = ({ d="M4.375 11.25C3.96462 11.25 3.55826 11.3308 3.17911 11.4879C2.79997 11.6449 2.45547 11.8751 2.16529 12.1653C1.87511 12.4555 1.64492 12.8 1.48788 13.1791C1.33083 13.5583 1.25 13.9646 1.25 14.375C1.25 14.7854 1.33083 15.1917 1.48788 15.5709C1.64492 15.95 1.87511 16.2945 2.16529 16.5847C2.45547 16.8749 2.79997 17.1051 3.17911 17.2621C3.55826 17.4192 3.96462 17.5 4.375 17.5H15.625C16.0354 17.5 16.4417 17.4192 16.8209 17.2621C17.2 17.1051 17.5445 16.8749 17.8347 16.5847C18.1249 16.2945 18.3551 15.95 18.5121 15.5709C18.6692 15.1917 18.75 14.7854 18.75 14.375C18.75 13.9646 18.6692 13.5583 18.5121 13.1791C18.3551 12.8 18.1249 12.4555 17.8347 12.1653C17.5445 11.8751 17.2 11.6449 16.8209 11.4879C16.4417 11.3308 16.0354 11.25 15.625 11.25H4.375ZM13.125 15C13.2908 15 13.4497 14.9342 13.5669 14.8169C13.6842 14.6997 13.75 14.5408 13.75 14.375C13.75 14.2092 13.6842 14.0503 13.5669 13.9331C13.4497 13.8158 13.2908 13.75 13.125 13.75C12.9592 13.75 12.8003 13.8158 12.6831 13.9331C12.5658 14.0503 12.5 14.2092 12.5 14.375C12.5 14.5408 12.5658 14.6997 12.6831 14.8169C12.8003 14.9342 12.9592 15 13.125 15ZM16.25 14.375C16.25 14.5408 16.1842 14.6997 16.0669 14.8169C15.9497 14.9342 15.7908 15 15.625 15C15.4592 15 15.3003 14.9342 15.1831 14.8169C15.0658 14.6997 15 14.5408 15 14.375C15 14.2092 15.0658 14.0503 15.1831 13.9331C15.3003 13.8158 15.4592 13.75 15.625 13.75C15.7908 13.75 15.9497 13.8158 16.0669 13.9331C16.1842 14.0503 16.25 14.2092 16.25 14.375Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/ServerStack/index.tsx b/www/docs/src/theme/Icon/ServerStack/index.tsx index 46399346a1..f1747b7cb6 100644 --- a/www/docs/src/theme/Icon/ServerStack/index.tsx +++ b/www/docs/src/theme/Icon/ServerStack/index.tsx @@ -18,7 +18,7 @@ const IconServerStack: React.FC = ({ d="M4.375 11.875H15.625M4.375 11.875C3.71196 11.875 3.07607 11.6116 2.60723 11.1428C2.13839 10.6739 1.875 10.038 1.875 9.375M4.375 11.875C3.71196 11.875 3.07607 12.1384 2.60723 12.6072C2.13839 13.0761 1.875 13.712 1.875 14.375C1.875 15.038 2.13839 15.6739 2.60723 16.1428C3.07607 16.6116 3.71196 16.875 4.375 16.875H15.625C16.288 16.875 16.9239 16.6116 17.3928 16.1428C17.8616 15.6739 18.125 15.038 18.125 14.375C18.125 13.712 17.8616 13.0761 17.3928 12.6072C16.9239 12.1384 16.288 11.875 15.625 11.875M1.875 9.375C1.875 8.71196 2.13839 8.07607 2.60723 7.60723C3.07607 7.13839 3.71196 6.875 4.375 6.875H15.625C16.288 6.875 16.9239 7.13839 17.3928 7.60723C17.8616 8.07607 18.125 8.71196 18.125 9.375M1.875 9.375C1.875 8.56361 2.13817 7.77411 2.625 7.125L4.78083 4.25C5.04281 3.9007 5.38251 3.61719 5.77305 3.42192C6.16358 3.22666 6.59421 3.125 7.03083 3.125H12.9692C13.8542 3.125 14.6875 3.54167 15.2192 4.25L17.375 7.125C17.8618 7.77411 18.125 8.56361 18.125 9.375M18.125 9.375C18.125 10.038 17.8616 10.6739 17.3928 11.1428C16.9239 11.6116 16.288 11.875 15.625 11.875M15.625 14.375H15.6317V14.3817H15.625V14.375ZM15.625 9.375H15.6317V9.38167H15.625V9.375ZM13.125 14.375H13.1317V14.3817H13.125V14.375ZM13.125 9.375H13.1317V9.38167H13.125V9.375Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/ServerStackSolid/index.tsx b/www/docs/src/theme/Icon/ServerStackSolid/index.tsx index 30429d7463..d7b8d3a354 100644 --- a/www/docs/src/theme/Icon/ServerStackSolid/index.tsx +++ b/www/docs/src/theme/Icon/ServerStackSolid/index.tsx @@ -18,7 +18,7 @@ const IconServerStackSolid: React.FC = ({ d="M4.5893 3.37333C4.82399 3.09944 5.11516 2.87957 5.44284 2.72882C5.77052 2.57807 6.12694 2.50001 6.48763 2.5H13.5126C13.8733 2.50001 14.2297 2.57807 14.5574 2.72882C14.8851 2.87957 15.1763 3.09944 15.411 3.37333L16.846 5.04667C16.6489 5.0154 16.4497 4.99979 16.2501 5H3.75013C3.54763 5 3.34846 5.01667 3.1543 5.04667L4.5893 3.37333Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> = ({ d="M1.25 8.75C1.25 8.08696 1.51339 7.45107 1.98223 6.98223C2.45107 6.51339 3.08696 6.25 3.75 6.25H16.25C16.913 6.25 17.5489 6.51339 18.0178 6.98223C18.4866 7.45107 18.75 8.08696 18.75 8.75C18.75 9.41304 18.4866 10.0489 18.0178 10.5178C17.5489 10.9866 16.913 11.25 16.25 11.25H3.75C3.08696 11.25 2.45107 10.9866 1.98223 10.5178C1.51339 10.0489 1.25 9.41304 1.25 8.75ZM13.75 8.75C13.75 8.91576 13.6842 9.07473 13.5669 9.19194C13.4497 9.30915 13.2908 9.375 13.125 9.375C12.9592 9.375 12.8003 9.30915 12.6831 9.19194C12.5658 9.07473 12.5 8.91576 12.5 8.75C12.5 8.58424 12.5658 8.42527 12.6831 8.30806C12.8003 8.19085 12.9592 8.125 13.125 8.125C13.2908 8.125 13.4497 8.19085 13.5669 8.30806C13.6842 8.42527 13.75 8.58424 13.75 8.75ZM15.625 9.375C15.7908 9.375 15.9497 9.30915 16.0669 9.19194C16.1842 9.07473 16.25 8.91576 16.25 8.75C16.25 8.58424 16.1842 8.42527 16.0669 8.30806C15.9497 8.19085 15.7908 8.125 15.625 8.125C15.4592 8.125 15.3003 8.19085 15.1831 8.30806C15.0658 8.42527 15 8.58424 15 8.75C15 8.91576 15.0658 9.07473 15.1831 9.19194C15.3003 9.30915 15.4592 9.375 15.625 9.375ZM3.75 12.5C3.08696 12.5 2.45107 12.7634 1.98223 13.2322C1.51339 13.7011 1.25 14.337 1.25 15C1.25 15.663 1.51339 16.2989 1.98223 16.7678C2.45107 17.2366 3.08696 17.5 3.75 17.5H16.25C16.913 17.5 17.5489 17.2366 18.0178 16.7678C18.4866 16.2989 18.75 15.663 18.75 15C18.75 14.337 18.4866 13.7011 18.0178 13.2322C17.5489 12.7634 16.913 12.5 16.25 12.5H3.75ZM13.125 15.625C13.2908 15.625 13.4497 15.5592 13.5669 15.4419C13.6842 15.3247 13.75 15.1658 13.75 15C13.75 14.8342 13.6842 14.6753 13.5669 14.5581C13.4497 14.4408 13.2908 14.375 13.125 14.375C12.9592 14.375 12.8003 14.4408 12.6831 14.5581C12.5658 14.6753 12.5 14.8342 12.5 15C12.5 15.1658 12.5658 15.3247 12.6831 15.4419C12.8003 15.5592 12.9592 15.625 13.125 15.625ZM16.25 15C16.25 15.1658 16.1842 15.3247 16.0669 15.4419C15.9497 15.5592 15.7908 15.625 15.625 15.625C15.4592 15.625 15.3003 15.5592 15.1831 15.4419C15.0658 15.3247 15 15.1658 15 15C15 14.8342 15.0658 14.6753 15.1831 14.5581C15.3003 14.4408 15.4592 14.375 15.625 14.375C15.7908 14.375 15.9497 14.4408 16.0669 14.5581C16.1842 14.6753 16.25 14.8342 16.25 15Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/ShoppingCart/index.tsx b/www/docs/src/theme/Icon/ShoppingCart/index.tsx index bb70294611..eceb629a96 100644 --- a/www/docs/src/theme/Icon/ShoppingCart/index.tsx +++ b/www/docs/src/theme/Icon/ShoppingCart/index.tsx @@ -18,7 +18,7 @@ const IconShoppingCart: React.FC = ({ d="M2 2.57422H3.14356C3.56436 2.57422 3.93152 2.85722 4.04043 3.26316L4.35644 4.44881M4.35644 4.44881C8.95267 4.32 13.5445 4.83094 18 5.96696C17.3201 7.99171 16.5124 9.95871 15.5875 11.8564H6.33168M4.35644 4.44881L6.33168 11.8564M6.33168 11.8564C5.67521 11.8564 5.04562 12.1172 4.58142 12.5814C4.11722 13.0456 3.85644 13.6752 3.85644 14.3316H16.8515M5.09406 16.8069C5.09406 16.971 5.02886 17.1284 4.91281 17.2445C4.79676 17.3605 4.63937 17.4257 4.47525 17.4257C4.31113 17.4257 4.15373 17.3605 4.03768 17.2445C3.92163 17.1284 3.85644 16.971 3.85644 16.8069C3.85644 16.6428 3.92163 16.4854 4.03768 16.3693C4.15373 16.2533 4.31113 16.1881 4.47525 16.1881C4.63937 16.1881 4.79676 16.2533 4.91281 16.3693C5.02886 16.4854 5.09406 16.6428 5.09406 16.8069ZM15.6139 16.8069C15.6139 16.971 15.5487 17.1284 15.4326 17.2445C15.3166 17.3605 15.1592 17.4257 14.995 17.4257C14.8309 17.4257 14.6735 17.3605 14.5575 17.2445C14.4414 17.1284 14.3762 16.971 14.3762 16.8069C14.3762 16.6428 14.4414 16.4854 14.5575 16.3693C14.6735 16.2533 14.8309 16.1881 14.995 16.1881C15.1592 16.1881 15.3166 16.2533 15.4326 16.3693C15.5487 16.4854 15.6139 16.6428 15.6139 16.8069Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/ShoppingCartSolid/index.tsx b/www/docs/src/theme/Icon/ShoppingCartSolid/index.tsx index d396f26b8d..44c31b402c 100644 --- a/www/docs/src/theme/Icon/ShoppingCartSolid/index.tsx +++ b/www/docs/src/theme/Icon/ShoppingCartSolid/index.tsx @@ -18,7 +18,7 @@ const IconShoppingCartSolid: React.FC = ({ d="M2.07951 2.03467C1.91701 2.03467 1.76116 2.09922 1.64626 2.21413C1.53135 2.32903 1.4668 2.48488 1.4668 2.64738C1.4668 2.80988 1.53135 2.96572 1.64626 3.08063C1.76116 3.19554 1.91701 3.26009 2.07951 3.26009H3.2118C3.35068 3.26009 3.47159 3.35322 3.50753 3.4872L5.59728 11.3234C4.94092 11.4944 4.35982 11.8783 3.945 12.4149C3.53018 12.9515 3.30507 13.6106 3.30493 14.2889C3.30493 14.6271 3.57942 14.9016 3.91764 14.9016H16.7846C16.9471 14.9016 17.1029 14.837 17.2178 14.7221C17.3327 14.6072 17.3973 14.4514 17.3973 14.2889C17.3973 14.1264 17.3327 13.9705 17.2178 13.8556C17.1029 13.7407 16.9471 13.6762 16.7846 13.6762H4.63492C4.76165 13.3177 4.99643 13.0074 5.30691 12.7879C5.61738 12.5684 5.98827 12.4506 6.36848 12.4507H15.533C15.6478 12.4507 15.7602 12.4185 15.8576 12.3577C15.955 12.2969 16.0333 12.21 16.0836 12.1068C17.0163 10.1928 17.8241 8.22036 18.5018 6.20192C18.5286 6.12207 18.5386 6.03756 18.5312 5.95366C18.5239 5.86976 18.4993 5.78828 18.4591 5.7143C18.4188 5.64032 18.3638 5.57544 18.2973 5.52369C18.2309 5.47195 18.1545 5.43446 18.0729 5.41356C13.7641 4.31489 9.3275 3.79915 4.88164 3.88015L4.6921 3.17186C4.60515 2.84568 4.41288 2.55737 4.14519 2.35172C3.87749 2.14608 3.54936 2.03462 3.2118 2.03467H2.07951ZM3.30493 16.7397C3.30493 16.4147 3.43403 16.103 3.66385 15.8732C3.89366 15.6434 4.20535 15.5143 4.53035 15.5143C4.85535 15.5143 5.16704 15.6434 5.39685 15.8732C5.62666 16.103 5.75577 16.4147 5.75577 16.7397C5.75577 17.0647 5.62666 17.3764 5.39685 17.6062C5.16704 17.836 4.85535 17.9651 4.53035 17.9651C4.20535 17.9651 3.89366 17.836 3.66385 17.6062C3.43403 17.3764 3.30493 17.0647 3.30493 16.7397ZM13.721 16.7397C13.721 16.4147 13.8501 16.103 14.0799 15.8732C14.3097 15.6434 14.6214 15.5143 14.9464 15.5143C15.2714 15.5143 15.5831 15.6434 15.8129 15.8732C16.0427 16.103 16.1718 16.4147 16.1718 16.7397C16.1718 17.0647 16.0427 17.3764 15.8129 17.6062C15.5831 17.836 15.2714 17.9651 14.9464 17.9651C14.6214 17.9651 14.3097 17.836 14.0799 17.6062C13.8501 17.3764 13.721 17.0647 13.721 16.7397Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/Sparkles/index.tsx b/www/docs/src/theme/Icon/Sparkles/index.tsx index 1cb92ace48..9d9259f388 100644 --- a/www/docs/src/theme/Icon/Sparkles/index.tsx +++ b/www/docs/src/theme/Icon/Sparkles/index.tsx @@ -18,7 +18,7 @@ const IconSparkles: React.FC = ({ d="M8.1775 13.2533L7.5 15.625L6.8225 13.2533C6.64739 12.6407 6.31908 12.0828 5.86855 11.6323C5.41802 11.1818 4.86012 10.8534 4.2475 10.6783L1.875 10L4.24667 9.3225C4.85928 9.14739 5.41718 8.81908 5.86772 8.36855C6.31825 7.91802 6.64656 7.36012 6.82167 6.7475L7.5 4.375L8.1775 6.74667C8.35261 7.35928 8.68092 7.91718 9.13145 8.36772C9.58198 8.81825 10.1399 9.14656 10.7525 9.32167L13.125 10L10.7533 10.6775C10.1407 10.8526 9.58282 11.1809 9.13228 11.6315C8.68175 12.082 8.35344 12.6399 8.17833 13.2525L8.1775 13.2533ZM15.2158 7.2625L15 8.125L14.7842 7.2625C14.6606 6.76799 14.405 6.31635 14.0447 5.95586C13.6843 5.59537 13.2328 5.33958 12.7383 5.21583L11.875 5L12.7383 4.78417C13.2328 4.66042 13.6843 4.40463 14.0447 4.04414C14.405 3.68365 14.6606 3.23201 14.7842 2.7375L15 1.875L15.2158 2.7375C15.3394 3.23211 15.5952 3.68382 15.9557 4.04432C16.3162 4.40482 16.7679 4.66056 17.2625 4.78417L18.125 5L17.2625 5.21583C16.7679 5.33944 16.3162 5.59518 15.9557 5.95568C15.5952 6.31618 15.3394 6.76789 15.2158 7.2625ZM14.0783 17.1392L13.75 18.125L13.4217 17.1392C13.3296 16.863 13.1745 16.6121 12.9687 16.4063C12.7629 16.2005 12.512 16.0454 12.2358 15.9533L11.25 15.625L12.2358 15.2967C12.512 15.2046 12.7629 15.0495 12.9687 14.8437C13.1745 14.6379 13.3296 14.387 13.4217 14.1108L13.75 13.125L14.0783 14.1108C14.1704 14.387 14.3255 14.6379 14.5313 14.8437C14.7371 15.0495 14.988 15.2046 15.2642 15.2967L16.25 15.625L15.2642 15.9533C14.988 16.0454 14.7371 16.2005 14.5313 16.4063C14.3255 16.6121 14.1704 16.863 14.0783 17.1392Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/SparklesSolid/index.tsx b/www/docs/src/theme/Icon/SparklesSolid/index.tsx index 390b738a9a..a809dc51e9 100644 --- a/www/docs/src/theme/Icon/SparklesSolid/index.tsx +++ b/www/docs/src/theme/Icon/SparklesSolid/index.tsx @@ -20,7 +20,7 @@ const IconSparklesSolid: React.FC = ({ d="M7.50004 3.75C7.63584 3.75003 7.76794 3.79429 7.87635 3.87608C7.98475 3.95788 8.06357 4.07275 8.10087 4.20333L8.77837 6.575C8.92425 7.08577 9.19791 7.55092 9.57352 7.92652C9.94912 8.30213 10.4143 8.57579 10.925 8.72167L13.2967 9.39917C13.4272 9.43655 13.542 9.5154 13.6237 9.6238C13.7054 9.7322 13.7496 9.86426 13.7496 10C13.7496 10.1357 13.7054 10.2678 13.6237 10.3762C13.542 10.4846 13.4272 10.5635 13.2967 10.6008L10.925 11.2783C10.4143 11.4242 9.94912 11.6979 9.57352 12.0735C9.19791 12.4491 8.92425 12.9142 8.77837 13.425L8.10087 15.7967C8.06349 15.9272 7.98464 16.0419 7.87624 16.1236C7.76784 16.2054 7.63578 16.2496 7.50004 16.2496C7.36429 16.2496 7.23224 16.2054 7.12384 16.1236C7.01544 16.0419 6.93659 15.9272 6.8992 15.7967L6.2217 13.425C6.07583 12.9142 5.80217 12.4491 5.42656 12.0735C5.05095 11.6979 4.5858 11.4242 4.07504 11.2783L1.70337 10.6008C1.57288 10.5635 1.4581 10.4846 1.37639 10.3762C1.29468 10.2678 1.25049 10.1357 1.25049 10C1.25049 9.86426 1.29468 9.7322 1.37639 9.6238C1.4581 9.5154 1.57288 9.43655 1.70337 9.39917L4.07504 8.72167C4.5858 8.57579 5.05095 8.30213 5.42656 7.92652C5.80217 7.55092 6.07583 7.08577 6.2217 6.575L6.8992 4.20333C6.93651 4.07275 7.01532 3.95788 7.12373 3.87608C7.23214 3.79429 7.36423 3.75003 7.50004 3.75ZM15 1.25C15.1395 1.24992 15.2749 1.29647 15.3848 1.38224C15.4948 1.46801 15.5729 1.58807 15.6067 1.72333L15.8217 2.58667C16.0184 3.37 16.63 3.98167 17.4134 4.17833L18.2767 4.39333C18.4122 4.4269 18.5326 4.50488 18.6186 4.61483C18.7047 4.72479 18.7514 4.86038 18.7514 5C18.7514 5.13962 18.7047 5.27521 18.6186 5.38517C18.5326 5.49512 18.4122 5.5731 18.2767 5.60667L17.4134 5.82167C16.63 6.01833 16.0184 6.63 15.8217 7.41333L15.6067 8.27667C15.5731 8.41219 15.4952 8.53257 15.3852 8.61861C15.2753 8.70465 15.1397 8.7514 15 8.7514C14.8604 8.7514 14.7248 8.70465 14.6149 8.61861C14.5049 8.53257 14.4269 8.41219 14.3934 8.27667L14.1784 7.41333C14.0822 7.02869 13.8833 6.67742 13.603 6.39706C13.3226 6.11671 12.9713 5.91782 12.5867 5.82167L11.7234 5.60667C11.5878 5.5731 11.4675 5.49512 11.3814 5.38517C11.2954 5.27521 11.2486 5.13962 11.2486 5C11.2486 4.86038 11.2954 4.72479 11.3814 4.61483C11.4675 4.50488 11.5878 4.4269 11.7234 4.39333L12.5867 4.17833C12.9713 4.08218 13.3226 3.88329 13.603 3.60294C13.8833 3.32258 14.0822 2.97131 14.1784 2.58667L14.3934 1.72333C14.4272 1.58807 14.5053 1.46801 14.6152 1.38224C14.7252 1.29647 14.8606 1.24992 15 1.25ZM13.75 12.5C13.8813 12.4999 14.0093 12.5412 14.1158 12.6179C14.2223 12.6946 14.3019 12.803 14.3434 12.9275L14.6717 13.9133C14.7967 14.2858 15.0884 14.5792 15.4617 14.7033L16.4475 15.0325C16.5717 15.0742 16.6796 15.1538 16.756 15.2601C16.8325 15.3664 16.8736 15.4941 16.8736 15.625C16.8736 15.7559 16.8325 15.8836 16.756 15.9899C16.6796 16.0962 16.5717 16.1758 16.4475 16.2175L15.4617 16.5467C15.0892 16.6717 14.7959 16.9633 14.6717 17.3367L14.3425 18.3225C14.3009 18.4466 14.2212 18.5546 14.1149 18.631C14.0086 18.7075 13.881 18.7486 13.75 18.7486C13.6191 18.7486 13.4915 18.7075 13.3851 18.631C13.2788 18.5546 13.1992 18.4466 13.1575 18.3225L12.8284 17.3367C12.767 17.1527 12.6637 16.9856 12.5265 16.8485C12.3894 16.7114 12.2223 16.6081 12.0384 16.5467L11.0525 16.2175C10.9284 16.1758 10.8205 16.0962 10.744 15.9899C10.6676 15.8836 10.6265 15.7559 10.6265 15.625C10.6265 15.4941 10.6676 15.3664 10.744 15.2601C10.8205 15.1538 10.9284 15.0742 11.0525 15.0325L12.0384 14.7033C12.4109 14.5783 12.7042 14.2867 12.8284 13.9133L13.1575 12.9275C13.199 12.8031 13.2785 12.6949 13.3848 12.6182C13.4911 12.5414 13.6189 12.5001 13.75 12.5Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/SquaresPlus/index.tsx b/www/docs/src/theme/Icon/SquaresPlus/index.tsx index 7676c2105a..021f7314ee 100644 --- a/www/docs/src/theme/Icon/SquaresPlus/index.tsx +++ b/www/docs/src/theme/Icon/SquaresPlus/index.tsx @@ -18,7 +18,7 @@ const IconSquaresPlus: React.FC = ({ d="M11.25 14.0625H14.0625M14.0625 14.0625H16.875M14.0625 14.0625V11.25M14.0625 14.0625V16.875M5 8.75H6.875C7.37228 8.75 7.84919 8.55246 8.20082 8.20082C8.55246 7.84919 8.75 7.37228 8.75 6.875V5C8.75 4.50272 8.55246 4.02581 8.20082 3.67417C7.84919 3.32254 7.37228 3.125 6.875 3.125H5C4.50272 3.125 4.02581 3.32254 3.67417 3.67417C3.32254 4.02581 3.125 4.50272 3.125 5V6.875C3.125 7.37228 3.32254 7.84919 3.67417 8.20082C4.02581 8.55246 4.50272 8.75 5 8.75V8.75ZM5 16.875H6.875C7.37228 16.875 7.84919 16.6775 8.20082 16.3258C8.55246 15.9742 8.75 15.4973 8.75 15V13.125C8.75 12.6277 8.55246 12.1508 8.20082 11.7992C7.84919 11.4475 7.37228 11.25 6.875 11.25H5C4.50272 11.25 4.02581 11.4475 3.67417 11.7992C3.32254 12.1508 3.125 12.6277 3.125 13.125V15C3.125 15.4973 3.32254 15.9742 3.67417 16.3258C4.02581 16.6775 4.50272 16.875 5 16.875ZM13.125 8.75H15C15.4973 8.75 15.9742 8.55246 16.3258 8.20082C16.6775 7.84919 16.875 7.37228 16.875 6.875V5C16.875 4.50272 16.6775 4.02581 16.3258 3.67417C15.9742 3.32254 15.4973 3.125 15 3.125H13.125C12.6277 3.125 12.1508 3.32254 11.7992 3.67417C11.4475 4.02581 11.25 4.50272 11.25 5V6.875C11.25 7.37228 11.4475 7.84919 11.7992 8.20082C12.1508 8.55246 12.6277 8.75 13.125 8.75V8.75Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/SquaresPlusSolid/index.tsx b/www/docs/src/theme/Icon/SquaresPlusSolid/index.tsx index 9b6c6e2789..a06db1644d 100644 --- a/www/docs/src/theme/Icon/SquaresPlusSolid/index.tsx +++ b/www/docs/src/theme/Icon/SquaresPlusSolid/index.tsx @@ -18,7 +18,7 @@ const IconSquaresPlusSolid: React.FC = ({ d="M2 4.25C2 3.65326 2.23705 3.08097 2.65901 2.65901C3.08097 2.23705 3.65326 2 4.25 2H6.75C7.34674 2 7.91903 2.23705 8.34099 2.65901C8.76295 3.08097 9 3.65326 9 4.25V6.75C9 7.34674 8.76295 7.91903 8.34099 8.34099C7.91903 8.76295 7.34674 9 6.75 9H4.25C3.65326 9 3.08097 8.76295 2.65901 8.34099C2.23705 7.91903 2 7.34674 2 6.75V4.25ZM2 13.25C2 12.6533 2.23705 12.081 2.65901 11.659C3.08097 11.2371 3.65326 11 4.25 11H6.75C7.34674 11 7.91903 11.2371 8.34099 11.659C8.76295 12.081 9 12.6533 9 13.25V15.75C9 16.3467 8.76295 16.919 8.34099 17.341C7.91903 17.7629 7.34674 18 6.75 18H4.25C3.65326 18 3.08097 17.7629 2.65901 17.341C2.23705 16.919 2 16.3467 2 15.75V13.25ZM11 4.25C11 3.65326 11.2371 3.08097 11.659 2.65901C12.081 2.23705 12.6533 2 13.25 2H15.75C16.3467 2 16.919 2.23705 17.341 2.65901C17.7629 3.08097 18 3.65326 18 4.25V6.75C18 7.34674 17.7629 7.91903 17.341 8.34099C16.919 8.76295 16.3467 9 15.75 9H13.25C12.6533 9 12.081 8.76295 11.659 8.34099C11.2371 7.91903 11 7.34674 11 6.75V4.25ZM15.25 11.75C15.25 11.5511 15.171 11.3603 15.0303 11.2197C14.8897 11.079 14.6989 11 14.5 11C14.3011 11 14.1103 11.079 13.9697 11.2197C13.829 11.3603 13.75 11.5511 13.75 11.75V13.75H11.75C11.5511 13.75 11.3603 13.829 11.2197 13.9697C11.079 14.1103 11 14.3011 11 14.5C11 14.6989 11.079 14.8897 11.2197 15.0303C11.3603 15.171 11.5511 15.25 11.75 15.25H13.75V17.25C13.75 17.4489 13.829 17.6397 13.9697 17.7803C14.1103 17.921 14.3011 18 14.5 18C14.6989 18 14.8897 17.921 15.0303 17.7803C15.171 17.6397 15.25 17.4489 15.25 17.25V15.25H17.25C17.4489 15.25 17.6397 15.171 17.7803 15.0303C17.921 14.8897 18 14.6989 18 14.5C18 14.3011 17.921 14.1103 17.7803 13.9697C17.6397 13.829 17.4489 13.75 17.25 13.75H15.25V11.75Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/Star/index.tsx b/www/docs/src/theme/Icon/Star/index.tsx index ee96a538d2..58872dd3cb 100644 --- a/www/docs/src/theme/Icon/Star/index.tsx +++ b/www/docs/src/theme/Icon/Star/index.tsx @@ -15,7 +15,7 @@ const IconStar: React.FC = ({ iconColorClassName, ...props }) => { d="M9.56687 2.91569C9.60212 2.82971 9.66214 2.75617 9.73931 2.7044C9.81647 2.65264 9.90729 2.625 10.0002 2.625C10.0931 2.625 10.1839 2.65264 10.2611 2.7044C10.3383 2.75617 10.3983 2.82971 10.4335 2.91569L12.2044 7.17485C12.2375 7.25455 12.292 7.32356 12.3619 7.37428C12.4317 7.425 12.5142 7.45548 12.6002 7.46235L17.1985 7.83069C17.6144 7.86402 17.7827 8.38319 17.466 8.65402L13.9627 11.6557C13.8973 11.7117 13.8485 11.7846 13.8217 11.8665C13.795 11.9484 13.7913 12.036 13.811 12.1199L14.8819 16.6074C14.9034 16.6974 14.8978 16.7918 14.8657 16.8786C14.8336 16.9654 14.7765 17.0408 14.7016 17.0952C14.6267 17.1496 14.5373 17.1806 14.4448 17.1842C14.3523 17.1879 14.2608 17.164 14.1819 17.1157L10.2444 14.7115C10.1708 14.6667 10.0863 14.643 10.0002 14.643C9.91407 14.643 9.82959 14.6667 9.75604 14.7115L5.81854 17.1165C5.73959 17.1648 5.64808 17.1887 5.55559 17.185C5.46309 17.1814 5.37375 17.1504 5.29885 17.096C5.22394 17.0416 5.16684 16.9663 5.13475 16.8794C5.10266 16.7926 5.09702 16.6982 5.11854 16.6082L6.18937 12.1199C6.20923 12.036 6.20558 11.9483 6.17882 11.8664C6.15207 11.7845 6.10324 11.7116 6.03771 11.6557L2.53437 8.65402C2.46422 8.5937 2.41347 8.51397 2.3885 8.42488C2.36353 8.33579 2.36546 8.24131 2.39405 8.15331C2.42264 8.06531 2.47661 7.98773 2.54918 7.93033C2.62174 7.87292 2.70966 7.83826 2.80187 7.83069L7.40021 7.46235C7.48625 7.45548 7.56873 7.425 7.63856 7.37428C7.7084 7.32356 7.76289 7.25455 7.79604 7.17485L9.56687 2.91652V2.91569Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/StarSolid/index.tsx b/www/docs/src/theme/Icon/StarSolid/index.tsx new file mode 100644 index 0000000000..8d88bee1bc --- /dev/null +++ b/www/docs/src/theme/Icon/StarSolid/index.tsx @@ -0,0 +1,30 @@ +import React from "react" +import { IconProps } from ".." + +const IconStarSolid: React.FC = ({ + iconColorClassName, + ...props +}) => { + return ( + + + + ) +} + +export default IconStarSolid diff --git a/www/docs/src/theme/Icon/Stripe/index.tsx b/www/docs/src/theme/Icon/Stripe/index.tsx index 2814c4201a..38649ee919 100644 --- a/www/docs/src/theme/Icon/Stripe/index.tsx +++ b/www/docs/src/theme/Icon/Stripe/index.tsx @@ -17,7 +17,7 @@ const IconStripe: React.FC = ({ iconColorClassName, ...props }) => { d="M8.7941 6.55502C8.7941 5.82721 9.39972 5.54565 10.3783 5.54565C11.9978 5.58064 13.587 5.99186 15.0203 6.74679V2.35341C13.5424 1.77261 11.9661 1.48308 10.3783 1.50076C6.60644 1.50076 4.07666 3.47646 4.07666 6.77548C4.07666 11.937 11.1645 11.0987 11.1645 13.3236C11.1645 14.1938 10.4208 14.4636 9.37422 14.4636C7.83096 14.4636 5.83773 13.8251 4.27428 12.9751V17.4259C5.88396 18.1262 7.61933 18.4917 9.37475 18.5C13.2512 18.5 15.9234 16.5849 15.9234 13.2285C15.9234 7.65788 8.7941 8.6529 8.7941 6.55608V6.55502Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/SwatchSolid/index.tsx b/www/docs/src/theme/Icon/SwatchSolid/index.tsx index 541c8e00df..e71d7437d5 100644 --- a/www/docs/src/theme/Icon/SwatchSolid/index.tsx +++ b/www/docs/src/theme/Icon/SwatchSolid/index.tsx @@ -20,14 +20,14 @@ const IconSwatchSolid: React.FC = ({ d="M1.875 3.4375C1.875 2.57417 2.575 1.875 3.4375 1.875H7.8125C8.67583 1.875 9.375 2.575 9.375 3.4375V14.375C9.375 15.3696 8.97991 16.3234 8.27665 17.0266C7.57339 17.7299 6.61956 18.125 5.625 18.125C4.63044 18.125 3.67661 17.7299 2.97335 17.0266C2.27009 16.3234 1.875 15.3696 1.875 14.375V3.4375ZM5.625 15.3125C5.87364 15.3125 6.1121 15.2137 6.28791 15.0379C6.46373 14.8621 6.5625 14.6236 6.5625 14.375C6.5625 14.1264 6.46373 13.8879 6.28791 13.7121C6.1121 13.5363 5.87364 13.4375 5.625 13.4375C5.37636 13.4375 5.1379 13.5363 4.96209 13.7121C4.78627 13.8879 4.6875 14.1264 4.6875 14.375C4.6875 14.6236 4.78627 14.8621 4.96209 15.0379C5.1379 15.2137 5.37636 15.3125 5.625 15.3125Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/TagSolid/index.tsx b/www/docs/src/theme/Icon/TagSolid/index.tsx index 0f828d30b3..94b492ada2 100644 --- a/www/docs/src/theme/Icon/TagSolid/index.tsx +++ b/www/docs/src/theme/Icon/TagSolid/index.tsx @@ -20,7 +20,7 @@ const IconTagSolid: React.FC = ({ d="M4.78194 2C4.04412 2 3.33653 2.2931 2.81481 2.81481C2.2931 3.33653 2 4.04412 2 4.78194V7.98562C2.00016 8.7231 2.29314 9.43034 2.81455 9.95189L10.0476 17.1849C10.3059 17.4433 10.6126 17.6483 10.9502 17.7882C11.2878 17.928 11.6496 18 12.015 18C12.3804 18 12.7422 17.928 13.0797 17.7882C13.4173 17.6483 13.724 17.4433 13.9824 17.1849L17.1849 13.9824C17.4433 13.724 17.6483 13.4173 17.7882 13.0797C17.928 12.7422 18 12.3804 18 12.015C18 11.6496 17.928 11.2878 17.7882 10.9502C17.6483 10.6126 17.4433 10.3059 17.1849 10.0476L9.95189 2.81455C9.43062 2.29341 8.72383 2.00045 7.98673 2H4.78194ZM5.33833 6.4511C5.63345 6.4511 5.91649 6.33386 6.12518 6.12518C6.33386 5.91649 6.4511 5.63345 6.4511 5.33833C6.4511 5.0432 6.33386 4.76016 6.12518 4.55148C5.91649 4.34279 5.63345 4.22555 5.33833 4.22555C5.0432 4.22555 4.76016 4.34279 4.55148 4.55148C4.34279 4.76016 4.22555 5.0432 4.22555 5.33833C4.22555 5.63345 4.34279 5.91649 4.55148 6.12518C4.76016 6.33386 5.0432 6.4511 5.33833 6.4511Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/Tools/index.tsx b/www/docs/src/theme/Icon/Tools/index.tsx index 79504f2867..9a5563198c 100644 --- a/www/docs/src/theme/Icon/Tools/index.tsx +++ b/www/docs/src/theme/Icon/Tools/index.tsx @@ -15,7 +15,7 @@ const IconTools: React.FC = ({ iconColorClassName, ...props }) => { d="M9.5246 12.5983L14.307 17.3807C14.7171 17.7778 15.2669 17.9977 15.8377 17.9931C16.4086 17.9884 16.9547 17.7596 17.3584 17.356C17.762 16.9523 17.9908 16.4062 17.9955 15.8353C18.0001 15.2645 17.7802 14.7147 17.3831 14.3046L12.5622 9.48365M9.5246 12.5983L11.5721 10.1128C11.8321 9.79783 12.1791 9.59931 12.563 9.48447C13.0142 9.34994 13.517 9.33025 13.9928 9.36963C14.6341 9.4247 15.2787 9.3111 15.8626 9.04012C16.4465 8.76914 16.9494 8.35018 17.3213 7.82483C17.6933 7.29948 17.9214 6.68599 17.983 6.04525C18.0447 5.40451 17.9377 4.75879 17.6727 4.17217L14.9854 6.86031C14.5358 6.75635 14.1244 6.52822 13.7981 6.20191C13.4718 5.87561 13.2437 5.46423 13.1397 5.01462L15.827 2.3273C15.2404 2.06231 14.5947 1.95533 13.9539 2.01697C13.3132 2.0786 12.6997 2.30672 12.1744 2.67868C11.649 3.05064 11.23 3.55351 10.9591 4.13739C10.6881 4.72126 10.5745 5.36586 10.6296 6.00719C10.7042 6.88984 10.5713 7.86436 9.888 8.42709L9.80433 8.49682M9.5246 12.5983L5.70608 17.2355C5.52101 17.4611 5.29076 17.6455 5.03015 17.7767C4.76953 17.9079 4.48433 17.9831 4.19289 17.9975C3.90145 18.0118 3.61024 17.965 3.338 17.86C3.06576 17.755 2.81851 17.5941 2.61219 17.3878C2.40586 17.1815 2.24502 16.9342 2.14002 16.662C2.03502 16.3898 1.98818 16.0985 2.00253 15.8071C2.01687 15.5157 2.09208 15.2305 2.22331 14.9699C2.35453 14.7092 2.53887 14.479 2.76446 14.2939L8.37289 9.6756L5.0039 6.3066H3.84809L2.0024 3.23046L3.23286 2L6.30901 3.84569V5.0015L9.80351 8.496L8.37207 9.67478M15.2298 15.2274L13.0765 13.0741M4.14914 15.8427H4.1557V15.8492H4.14914V15.8427Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/ToolsSolid/index.tsx b/www/docs/src/theme/Icon/ToolsSolid/index.tsx index ea175ee79f..a8d54b0a33 100644 --- a/www/docs/src/theme/Icon/ToolsSolid/index.tsx +++ b/www/docs/src/theme/Icon/ToolsSolid/index.tsx @@ -20,14 +20,14 @@ const IconToolsSolid: React.FC = ({ d="M9.99753 6.06351C9.99737 5.44855 10.1413 4.84211 10.4177 4.29277C10.6941 3.74343 11.0953 3.26648 11.5893 2.90013C12.0832 2.53379 12.6561 2.28824 13.262 2.18315C13.8679 2.07807 14.49 2.11638 15.0784 2.29501C15.1714 2.32318 15.2556 2.37498 15.3226 2.44534C15.3896 2.5157 15.4373 2.60222 15.4609 2.69649C15.4846 2.79075 15.4834 2.88952 15.4575 2.98319C15.4316 3.07686 15.3819 3.16222 15.3132 3.23095L12.8233 5.72003C12.8706 6.07626 13.0303 6.42049 13.3041 6.69422C13.5778 6.96795 13.922 7.12769 14.279 7.17419L16.7673 4.6851C16.8361 4.6164 16.9214 4.56668 17.0151 4.54078C17.1088 4.51489 17.2075 4.5137 17.3018 4.53734C17.3961 4.56099 17.4826 4.60864 17.5529 4.67568C17.6233 4.74271 17.6751 4.82683 17.7033 4.91984C17.8902 5.53544 17.9234 6.18746 17.8 6.81886C17.6766 7.45026 17.4003 8.0418 16.9954 8.54174C16.5905 9.04167 16.0692 9.43477 15.4772 9.68663C14.8852 9.93849 14.2405 10.0415 13.5995 9.9865C12.8361 9.92201 12.1971 10.0615 11.8679 10.462L6.50576 16.9753C6.2862 17.2406 6.01366 17.4571 5.70559 17.611C5.39752 17.7649 5.06071 17.8528 4.71672 17.869C4.37273 17.8852 4.02915 17.8294 3.70797 17.7052C3.38679 17.5809 3.0951 17.391 2.85157 17.1475C2.60803 16.904 2.41803 16.6124 2.29372 16.2912C2.16941 15.9701 2.11353 15.6265 2.12967 15.2825C2.14581 14.9385 2.2336 14.6017 2.38743 14.2936C2.54126 13.9855 2.75773 13.7129 3.02299 13.4933L9.53556 8.13037C9.93528 7.8004 10.0755 7.16219 10.011 6.39874C10.0018 6.28723 9.99734 6.17539 9.99753 6.06351ZM4.08567 15.3442C4.08567 15.195 4.14493 15.0519 4.25041 14.9464C4.35589 14.8409 4.49895 14.7817 4.64813 14.7817H4.65413C4.8033 14.7817 4.94637 14.8409 5.05185 14.9464C5.15733 15.0519 5.21659 15.195 5.21659 15.3442V15.3501C5.21659 15.4993 5.15733 15.6424 5.05185 15.7479C4.94637 15.8534 4.8033 15.9126 4.65413 15.9126H4.64813C4.49895 15.9126 4.35589 15.8534 4.25041 15.7479C4.14493 15.6424 4.08567 15.4993 4.08567 15.3501V15.3442Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> = ({ d="M10.4146 13.9971L13.5516 17.1334C13.7866 17.3685 14.0657 17.5549 14.3727 17.6821C14.6798 17.8093 15.009 17.8748 15.3414 17.8748C15.6737 17.8748 16.0029 17.8093 16.31 17.6821C16.617 17.5549 16.8961 17.3685 17.1311 17.1334C17.3661 16.8984 17.5526 16.6194 17.6798 16.3123C17.807 16.0052 17.8724 15.6761 17.8724 15.3437C17.8724 15.0113 17.807 14.6821 17.6798 14.3751C17.5526 14.068 17.3661 13.7889 17.1311 13.5539L14.6518 11.0753C14.2717 11.1292 13.8868 11.14 13.5043 11.1076C13.2089 11.0821 12.9929 11.1031 12.8541 11.1391C12.8102 11.1484 12.768 11.1643 12.7289 11.1863L10.4146 13.9971ZM12.9749 12.9772C13.0803 12.8719 13.2233 12.8127 13.3724 12.8127C13.5214 12.8127 13.6644 12.8719 13.7698 12.9772L15.176 14.3841C15.2312 14.4356 15.2756 14.4977 15.3063 14.5667C15.3371 14.6357 15.3536 14.7102 15.3549 14.7857C15.3563 14.8612 15.3424 14.9362 15.3141 15.0063C15.2858 15.0763 15.2437 15.1399 15.1903 15.1933C15.1369 15.2467 15.0732 15.2888 15.0032 15.3171C14.9332 15.3454 14.8581 15.3593 14.7826 15.358C14.7071 15.3566 14.6326 15.3401 14.5636 15.3094C14.4946 15.2786 14.4325 15.2343 14.381 15.179L12.9749 13.7729C12.8696 13.6674 12.8104 13.5245 12.8104 13.3754C12.8104 13.2264 12.8696 13.0834 12.9749 12.9779V12.9772Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/Twitter/index.tsx b/www/docs/src/theme/Icon/Twitter/index.tsx index 79d92dce91..3adc009900 100644 --- a/www/docs/src/theme/Icon/Twitter/index.tsx +++ b/www/docs/src/theme/Icon/Twitter/index.tsx @@ -15,7 +15,7 @@ const IconTwitter: React.FC = ({ iconColorClassName, ...props }) => { d="M18.5921 4.33226C18.3093 4.45768 18.0186 4.56353 17.7215 4.64947C18.0732 4.25173 18.3413 3.78373 18.505 3.2716C18.5417 3.15681 18.5037 3.03116 18.4093 2.95608C18.3151 2.88094 18.1841 2.87194 18.0804 2.93344C17.4495 3.3076 16.7689 3.5765 16.0552 3.73374C15.3363 3.03127 14.3599 2.6315 13.3505 2.6315C11.2199 2.6315 9.4864 4.3649 9.4864 6.49551C9.4864 6.66332 9.49703 6.83019 9.51805 6.99475C6.87409 6.76261 4.41605 5.46307 2.72812 3.39255C2.66797 3.31875 2.5753 3.27898 2.48042 3.28658C2.38549 3.29402 2.30019 3.34755 2.25223 3.42983C1.90988 4.01726 1.72889 4.68913 1.72889 5.37272C1.72889 6.30378 2.06131 7.18717 2.64852 7.87744C2.46997 7.81561 2.2967 7.73832 2.13134 7.64652C2.04256 7.59711 1.93421 7.59786 1.84601 7.64844C1.75775 7.69901 1.70242 7.79203 1.70009 7.8937C1.69969 7.91083 1.69969 7.92796 1.69969 7.94532C1.69969 9.33509 2.44767 10.5863 3.59125 11.2683C3.493 11.2585 3.39482 11.2442 3.29727 11.2256C3.1967 11.2064 3.09329 11.2416 3.02547 11.3183C2.95754 11.395 2.93506 11.5018 2.96636 11.5994C3.38965 12.9209 4.47946 13.893 5.79694 14.1893C4.70423 14.8737 3.45462 15.2322 2.14283 15.2322C1.86912 15.2322 1.59384 15.2161 1.32442 15.1843C1.19058 15.1684 1.06261 15.2474 1.01703 15.3747C0.971445 15.502 1.01975 15.644 1.13362 15.7169C2.81882 16.7975 4.7674 17.3686 6.76859 17.3686C10.7027 17.3686 13.1637 15.5134 14.5355 13.9571C16.2461 12.0166 17.2271 9.44797 17.2271 6.91003C17.2271 6.80401 17.2255 6.69694 17.2223 6.59021C17.8971 6.08174 18.4782 5.46638 18.951 4.7591C19.0228 4.65168 19.0151 4.50971 18.9318 4.41083C18.8488 4.31188 18.7103 4.27989 18.5921 4.33226Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/User/index.tsx b/www/docs/src/theme/Icon/User/index.tsx index bb12d78c72..f82caed53f 100644 --- a/www/docs/src/theme/Icon/User/index.tsx +++ b/www/docs/src/theme/Icon/User/index.tsx @@ -15,7 +15,7 @@ const IconUser: React.FC = ({ iconColorClassName, ...props }) => { d="M12.9087 5.34615C12.9087 6.11758 12.6022 6.8574 12.0567 7.40288C11.5113 7.94836 10.7714 8.25481 10 8.25481C9.22858 8.25481 8.48875 7.94836 7.94327 7.40288C7.3978 6.8574 7.09135 6.11758 7.09135 5.34615C7.09135 4.57473 7.3978 3.8349 7.94327 3.28943C8.48875 2.74395 9.22858 2.4375 10 2.4375C10.7714 2.4375 11.5113 2.74395 12.0567 3.28943C12.6022 3.8349 12.9087 4.57473 12.9087 5.34615V5.34615ZM4.18347 16.2967C4.2084 14.7705 4.83217 13.3152 5.92027 12.2447C7.00837 11.1743 8.47361 10.5743 10 10.5743C11.5264 10.5743 12.9916 11.1743 14.0797 12.2447C15.1678 13.3152 15.7916 14.7705 15.8165 16.2967C13.9918 17.1334 12.0075 17.5652 10 17.5625C7.92439 17.5625 5.95426 17.1095 4.18347 16.2967Z" className={ iconColorClassName || - "tw-stroke-medusa-icon-secondary dark:tw-stroke-medusa-icon-secondary" + "tw-stroke-medusa-icon-subtle dark:tw-stroke-medusa-icon-subtle" } strokeWidth="1.5" strokeLinecap="round" diff --git a/www/docs/src/theme/Icon/UsersSolid/index.tsx b/www/docs/src/theme/Icon/UsersSolid/index.tsx index 9fdbb49ff2..5219e21798 100644 --- a/www/docs/src/theme/Icon/UsersSolid/index.tsx +++ b/www/docs/src/theme/Icon/UsersSolid/index.tsx @@ -18,7 +18,7 @@ const IconUsersSolid: React.FC = ({ d="M4.01782 5.51352C4.01782 4.64092 4.36446 3.80406 4.98148 3.18705C5.5985 2.57003 6.43535 2.22339 7.30795 2.22339C8.18055 2.22339 9.01741 2.57003 9.63442 3.18705C10.2514 3.80406 10.5981 4.64092 10.5981 5.51352C10.5981 6.38612 10.2514 7.22297 9.63442 7.83999C9.01741 8.45701 8.18055 8.80365 7.30795 8.80365C6.43535 8.80365 5.5985 8.45701 4.98148 7.83999C4.36446 7.22297 4.01782 6.38612 4.01782 5.51352ZM11.7945 7.30813C11.7945 6.95463 11.8641 6.60458 11.9994 6.27798C12.1347 5.95138 12.333 5.65462 12.5829 5.40466C12.8329 5.15469 13.1297 4.9564 13.4563 4.82112C13.7829 4.68584 14.1329 4.61621 14.4864 4.61621C14.8399 4.61621 15.19 4.68584 15.5166 4.82112C15.8432 4.9564 16.1399 5.15469 16.3899 5.40466C16.6399 5.65462 16.8381 5.95138 16.9734 6.27798C17.1087 6.60458 17.1783 6.95463 17.1783 7.30813C17.1783 8.02208 16.8947 8.70678 16.3899 9.21161C15.8851 9.71645 15.2004 10.0001 14.4864 10.0001C13.7725 10.0001 13.0878 9.71645 12.5829 9.21161C12.0781 8.70678 11.7945 8.02208 11.7945 7.30813ZM1.625 15.683C1.625 14.1758 2.22374 12.7303 3.2895 11.6646C4.35526 10.5988 5.80074 10.0001 7.30795 10.0001C8.81516 10.0001 10.2606 10.5988 11.3264 11.6646C12.3922 12.7303 12.9909 14.1758 12.9909 15.683V15.6854L12.9901 15.7803C12.9884 15.8818 12.961 15.9811 12.9103 16.069C12.8597 16.1569 12.7875 16.2305 12.7006 16.2828C11.0728 17.263 9.20806 17.7796 7.30795 17.7767C5.33627 17.7767 3.4906 17.2312 1.91613 16.2828C1.82907 16.2306 1.75674 16.157 1.70595 16.0691C1.65515 15.9812 1.62757 15.8818 1.6258 15.7803L1.625 15.683ZM14.1873 15.6854L14.1865 15.8003C14.1821 16.0661 14.1186 16.3276 14.0007 16.566C15.3931 16.6518 16.7838 16.3742 18.0366 15.7604C18.1334 15.713 18.2157 15.6404 18.2747 15.5501C18.3337 15.4598 18.3671 15.3553 18.3716 15.2475C18.3997 14.5785 18.2546 13.9136 17.9504 13.3171C17.6461 12.7206 17.1929 12.2129 16.6348 11.8429C16.0767 11.473 15.4325 11.2535 14.7646 11.2056C14.0967 11.1578 13.4278 11.2832 12.8226 11.5697C13.7105 12.7571 14.1891 14.2004 14.1865 15.683L14.1873 15.6854Z" className={ iconColorClassName || - "tw-fill-medusa-icon-secondary dark:tw-fill-medusa-icon-secondary-dark" + "tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" } /> diff --git a/www/docs/src/theme/Icon/XCircleSolid/index.tsx b/www/docs/src/theme/Icon/XCircleSolid/index.tsx new file mode 100644 index 0000000000..858f2963d9 --- /dev/null +++ b/www/docs/src/theme/Icon/XCircleSolid/index.tsx @@ -0,0 +1,30 @@ +import React from "react" +import { IconProps } from ".." + +const IconXCircleSolid: React.FC = ({ + iconColorClassName, + ...props +}) => { + return ( + + + + ) +} + +export default IconXCircleSolid diff --git a/www/docs/src/theme/Icon/index.ts b/www/docs/src/theme/Icon/index.ts index 7bdac3e906..c0ac36af17 100644 --- a/www/docs/src/theme/Icon/index.ts +++ b/www/docs/src/theme/Icon/index.ts @@ -20,6 +20,8 @@ import IconChannels from "./Channels" import IconChannelsSolid from "./ChannelsSolid" import IconCheckCircleSolid from "./CheckCircleSolid" import IconChevronDoubleLeftMiniSolid from "./ChevronDoubleLeftMiniSolid" +import IconCircleDottedLine from "./CircleDottedLine" +import IconCircleMiniSolid from "./CircleMiniSolid" import IconCircleStack from "./CircleStack" import IconCircleStackSolid from "./CircleStackSolid" import IconClockSolidMini from "./ClockSolidMini" @@ -40,6 +42,7 @@ import IconCurrencyDollarSolid from "./CurrencyDollarSolid" import IconDarkMode from "./DarkMode" import IconDiscord from "./Discord" import IconDocumentText from "./DocumentText" +import IconExclamationCircleSolid from "./ExclamationCircleSolid" import IconExternalLink from "./ExternalLink" import IconFlyingBox from "./FlyingBox" import IconFolder from "./Folder" @@ -49,6 +52,7 @@ import IconGiftSolid from "./GiftSolid" import IconGitHub from "./GitHub" import IconGlobeEurope from "./GlobeEurope" import IconGlobeEuropeSolid from "./GlobeEuropeSolid" +import IconInformationCircleSolid from "./InformationCircleSolid" import IconJavaScript from "./JavaScript" import IconKey from "./Key" import IconKeySolid from "./KeySolid" @@ -56,6 +60,8 @@ import IconLightBulb from "./LightBulb" import IconLightBulbSolid from "./LightBulbSolid" import IconLightMode from "./LightMode" import IconLinkedIn from "./LinkedIn" +import IconMap from "./Map" +import IconNewspaper from "./Newspaper" import IconNextjs from "./Nextjs" import IconPencilSquareSolid from "./PencilSquareSolid" import IconPuzzle from "./Puzzle" @@ -75,6 +81,7 @@ import IconSparklesSolid from "./SparklesSolid" import IconSquaresPlus from "./SquaresPlus" import IconSquaresPlusSolid from "./SquaresPlusSolid" import IconStar from "./Star" +import IconStarSolid from "./StarSolid" import IconStripe from "./Stripe" import IconSwatchSolid from "./SwatchSolid" import IconTagSolid from "./TagSolid" @@ -83,6 +90,7 @@ import IconToolsSolid from "./ToolsSolid" import IconTwitter from "./Twitter" import IconUser from "./User" import IconUsersSolid from "./UsersSolid" +import IconXCircleSolid from "./XCircleSolid" export type IconProps = { width?: number @@ -114,6 +122,8 @@ export default { channels: IconChannels, "check-circle-solid": IconCheckCircleSolid, "chevron-double-left-mini-solid": IconChevronDoubleLeftMiniSolid, + "circle-dotted-line": IconCircleDottedLine, + "circle-mini-solid": IconCircleMiniSolid, "circle-stack": IconCircleStack, "circle-stack-solid": IconCircleStackSolid, "clock-solid-mini": IconClockSolidMini, @@ -134,6 +144,7 @@ export default { "dark-mode": IconDarkMode, discord: IconDiscord, "document-text": IconDocumentText, + "exclamation-circle-solid": IconExclamationCircleSolid, "external-link": IconExternalLink, "flying-box": IconFlyingBox, folder: IconFolder, @@ -143,6 +154,7 @@ export default { github: IconGitHub, "globe-europe": IconGlobeEurope, "globe-europe-solid": IconGlobeEuropeSolid, + "information-circle-solid": IconInformationCircleSolid, javascript: IconJavaScript, key: IconKey, "key-solid": IconKeySolid, @@ -150,6 +162,8 @@ export default { "light-bulb-solid": IconLightBulbSolid, "light-mode": IconLightMode, linkedin: IconLinkedIn, + map: IconMap, + newspaper: IconNewspaper, nextjs: IconNextjs, "pencil-square-solid": IconPencilSquareSolid, puzzle: IconPuzzle, @@ -169,6 +183,7 @@ export default { "squares-plus": IconSquaresPlus, "squares-plus-solid": IconSquaresPlusSolid, star: IconStar, + "star-solid": IconStarSolid, stripe: IconStripe, "swatch-solid": IconSwatchSolid, "tag-solid": IconTagSolid, @@ -177,4 +192,5 @@ export default { twitter: IconTwitter, user: IconUser, "users-solid": IconUsersSolid, + "x-circle-solid": IconXCircleSolid, } diff --git a/www/docs/src/theme/Layout/index.tsx b/www/docs/src/theme/Layout/index.tsx index 979796bb2b..4d56f4ae28 100644 --- a/www/docs/src/theme/Layout/index.tsx +++ b/www/docs/src/theme/Layout/index.tsx @@ -16,6 +16,7 @@ import useIsBrowser from "@docusaurus/useIsBrowser" import { useLocation } from "@docusaurus/router" import "animate.css" import StructuredDataSearchbox from "@site/src/components/StructuredData/Searchbox" +import { useUser } from "@site/src/providers/User" export default function Layout(props: Props): JSX.Element { const { @@ -29,27 +30,24 @@ export default function Layout(props: Props): JSX.Element { useKeyboardNavigation() const isBrowser = useIsBrowser() const location = useLocation() + const { track } = useUser() useEffect(() => { if (isBrowser) { - if (window.analytics) { - const handlePlay = () => { - window.analytics.track("video_played") - } + const handlePlay = () => { + track("video_played") + } - const videos = document.querySelectorAll("video") - videos.forEach((video) => - video.addEventListener("play", handlePlay, { - once: true, - capture: true, - }) - ) + const videos = document.querySelectorAll("video") + videos.forEach((video) => + video.addEventListener("play", handlePlay, { + once: true, + capture: true, + }) + ) - return () => { - videos.forEach((video) => - video.removeEventListener("play", handlePlay) - ) - } + return () => { + videos.forEach((video) => video.removeEventListener("play", handlePlay)) } } }, [isBrowser, location.pathname]) diff --git a/www/docs/src/theme/Navbar/MobileSidebar/Header/index.tsx b/www/docs/src/theme/Navbar/MobileSidebar/Header/index.tsx index 3fb92d0b6c..e6360eece5 100644 --- a/www/docs/src/theme/Navbar/MobileSidebar/Header/index.tsx +++ b/www/docs/src/theme/Navbar/MobileSidebar/Header/index.tsx @@ -32,7 +32,7 @@ export default function NavbarMobileSidebarHeader(): JSX.Element { button]:hover:tw-bg-medusa-button-secondary-hover dark:[&>button]:hover:tw-bg-medusa-button-secondary-hover-dark", + "[&>button]:hover:tw-bg-medusa-button-neutral-hover dark:[&>button]:hover:tw-bg-medusa-button-neutral-hover-dark", "[&>button]:!tw-rounded" )} /> diff --git a/www/docs/src/theme/NotFound.tsx b/www/docs/src/theme/NotFound.tsx index 02070c82c6..7606ccc40e 100644 --- a/www/docs/src/theme/NotFound.tsx +++ b/www/docs/src/theme/NotFound.tsx @@ -3,6 +3,7 @@ import Translate, { translate } from "@docusaurus/Translate" import { PageMetadata } from "@docusaurus/theme-common" import Layout from "@theme/Layout" import useBaseUrl from "@docusaurus/useBaseUrl" +import UserProvider from "../providers/User" export default function NotFound(): JSX.Element { return ( @@ -13,73 +14,75 @@ export default function NotFound(): JSX.Element { message: "Page Not Found", })} /> - -
-
-
-

- - Page Not Found - -

-

- - Looks like the page you're looking for has either changed - into a different location or isn't in our documentation - anymore. - -

-

- If you think this is a mistake, please{" "} - - report this issue on GitHub - -

-

Some popular links

- +

+

Some popular links

+ +
- -
- + + + ) } diff --git a/www/docs/src/theme/Redoc/index.tsx b/www/docs/src/theme/Redoc/index.tsx index c038b035c9..fffd559767 100644 --- a/www/docs/src/theme/Redoc/index.tsx +++ b/www/docs/src/theme/Redoc/index.tsx @@ -3,6 +3,7 @@ import Redoc from "@theme-original/Redoc" import type RedocType from "@theme-original/Redoc" import type { WrapperProps } from "@docusaurus/types" import useIsBrowser from "@docusaurus/useIsBrowser" +import UserProvider from "@site/src/providers/User" type Props = WrapperProps @@ -64,7 +65,9 @@ export default function RedocWrapper(props: Props): JSX.Element { transition: "opacity 0.2s", }} > - + + + ) } diff --git a/www/docs/src/theme/SearchBar/index.tsx b/www/docs/src/theme/SearchBar/index.tsx index 6130f33393..bbb38f6d85 100644 --- a/www/docs/src/theme/SearchBar/index.tsx +++ b/www/docs/src/theme/SearchBar/index.tsx @@ -4,12 +4,14 @@ import type SearchBarType from "@theme/SearchBar" import type { WrapperProps } from "@docusaurus/types" import useIsBrowser from "@docusaurus/useIsBrowser" import { useLocation } from "@docusaurus/router" +import { useUser } from "@site/src/providers/User" type Props = WrapperProps export default function SearchBarWrapper(props: Props): JSX.Element { const isBrowser = useIsBrowser() const location = useLocation() + const { track } = useUser() useEffect(() => { if (isBrowser) { @@ -25,9 +27,9 @@ export default function SearchBarWrapper(props: Props): JSX.Element { } const query = e.target.value - if (query.length >= 3 && window.analytics) { + if (query.length >= 3) { // send event to segment - window.analytics.track("search", { + track("search", { query, }) } diff --git a/www/docs/src/theme/SearchPage/index.tsx b/www/docs/src/theme/SearchPage/index.tsx index 9457aa8d5e..77b3346a3c 100644 --- a/www/docs/src/theme/SearchPage/index.tsx +++ b/www/docs/src/theme/SearchPage/index.tsx @@ -20,6 +20,7 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext" import { useSearchResultUrlProcessor } from "@docusaurus/theme-search-algolia/client" import Layout from "@theme/Layout" import { ThemeConfig } from "@medusajs/docs" +import UserProvider from "@site/src/providers/User" // Very simple pluralization: probably good enough for now function useDocumentsFoundPlural() { @@ -515,7 +516,9 @@ function SearchPageContent(): JSX.Element { export default function SearchPage(): JSX.Element { return ( - + + + ) } diff --git a/www/docs/src/theme/Tabs/index.tsx b/www/docs/src/theme/Tabs/index.tsx index c6dfea1c1d..6898893d32 100644 --- a/www/docs/src/theme/Tabs/index.tsx +++ b/www/docs/src/theme/Tabs/index.tsx @@ -14,7 +14,7 @@ type TabsCustomProps = { codeTitle?: string } -type TabListProps = TabsCustomProps & OldProps & ReturnType +type TabListProps = OldProps & ReturnType & TabsCustomProps function TabList({ className, @@ -137,10 +137,11 @@ function TabList({ {...attributes} className={clsx( isCodeTabs && - "tw-text-medusa-code-tab-text tw-text-label-small-plus tw-py-[4px] tw-px-[12px] tw-border tw-border-solid tw-border-transparent tw-whitespace-nowrap tw-rounded-full [&:not(:first-child)]:tw-ml-[4px]", + "tw-text-medusa-code-tab-text tw-text-label-small-plus tw-py-[4px] tw-border tw-border-solid tw-border-transparent tw-whitespace-nowrap tw-rounded-full [&:not(:first-child)]:tw-ml-[4px]", "!tw-mt-0 hover:!tw-bg-medusa-code-tab-hover tw-cursor-pointer", attributes?.className, - isCodeTabs && "tw-z-[2]", + isCodeTabs && + "tw-z-[2] tw-flex tw-justify-center tw-items-center", isCodeTabs && selectedValue === value && "tw-text-medusa-code-tab-text-active tw-border tw-border-solid tw-border-medusa-code-tab-border tw-bg-medusa-code-tab-bg xs:tw-border-none xs:tw-bg-transparent", @@ -151,7 +152,11 @@ function TabList({ "tw-border-solid tw-border-medusa-text-base dark:tw-border-medusa-text-base-dark tw-rounded-b-none", !isCodeTabs && selectedValue !== value && - "tw-text-medusa-text-subtle dark:tw-text-medusa-text-subtle-dark" + "tw-text-medusa-text-subtle dark:tw-text-medusa-text-subtle-dark", + (!isCodeTabs || !attributes?.badge) && "tw-px-[12px]", + isCodeTabs && + attributes?.badge && + "[&_.badge]:tw-ml-0.5 [&_.badge]:tw-py-[2px] [&_.badge]:tw-px-[6px] [&_.badge]:tw-rounded-full tw-pl-[12px] tw-pr-[4px]" )} > {label ?? value} diff --git a/www/docs/src/themes/medusaDocs.js b/www/docs/src/themes/medusaDocs.js index c523098b77..0094dfe35f 100644 --- a/www/docs/src/themes/medusaDocs.js +++ b/www/docs/src/themes/medusaDocs.js @@ -1,11 +1,11 @@ /* eslint-disable @typescript-eslint/no-var-requires */ -const palenightTheme = require("prism-react-renderer/themes/palenight") +const vsCodeTheme = require("prism-react-renderer/themes/vsDark") const theme = { - ...palenightTheme, + ...vsCodeTheme, plain: { - color: "#7E7D86", - backgroundColor: "#1C1C1F", + ...vsCodeTheme.plain, + backgroundColor: "#151718", }, } diff --git a/www/docs/src/types/index.d.ts b/www/docs/src/types/index.d.ts index 0cd2cd0c2a..2dc7f3f83c 100644 --- a/www/docs/src/types/index.d.ts +++ b/www/docs/src/types/index.d.ts @@ -159,6 +159,10 @@ declare module "@medusajs/docs" { export declare type DocContextValue = { frontMatter: { addHowToData?: boolean + badge?: { + variant: string + text: string + } } } & DocusaurusDocContextValue } diff --git a/www/docs/src/utils/filterListItems.ts b/www/docs/src/utils/filter-list-items.ts similarity index 100% rename from www/docs/src/utils/filterListItems.ts rename to www/docs/src/utils/filter-list-items.ts diff --git a/www/docs/src/utils/getFirstCategoryItem.ts b/www/docs/src/utils/get-first-category-item.ts similarity index 100% rename from www/docs/src/utils/getFirstCategoryItem.ts rename to www/docs/src/utils/get-first-category-item.ts diff --git a/www/docs/src/utils/learning-paths.tsx b/www/docs/src/utils/learning-paths.tsx new file mode 100644 index 0000000000..80855eced1 --- /dev/null +++ b/www/docs/src/utils/learning-paths.tsx @@ -0,0 +1,202 @@ +import React from "react" +import { LearningPathType } from "../providers/LearningPath" +import Link from "@docusaurus/Link" + +const paths: LearningPathType[] = [ + { + name: "simple-quickstart", + label: "Start Selling in 3 Steps", + description: "Create and deploy a full-fledged ecommerce store.", + steps: [ + { + title: "Create a Next.js storefront", + description: + "Create a Next.js storefront and connect it to your Medusa backend.", + path: "/starters/nextjs-medusa-starter", + }, + { + title: "Deploy the backend", + path: "/deployments/server/deploying-on-railway", + descriptionJSX: ( + <> + Deploy your backend to Railway. You can alternatively check out{" "} + other deployment guides + + ), + }, + { + title: "Deploy the storefront", + description: "Deploy your storefront to your preferred hosting.", + path: "/deployments/storefront", + }, + ], + finish: { + type: "rating", + step: { + title: "Congratulations on building your store!", + description: "Please rate your experience using this learning path.", + eventName: "rating_path_simple-quickstart", + }, + }, + }, + { + name: "marketplace", + label: "Build a marketplace", + description: + "Customize the backend and handle events to build a marketplace.", + steps: [ + { + title: "Extend entities", + descriptionJSX: ( + <> + Extend entities, such as User or Product{" "} + entites, to associate them with the Store entity. + + ), + path: "/development/entities/extend-entity", + }, + { + title: "Access logged-in user", + description: + "Create a middleware that registers the logged-in user in the dependency container.", + path: "/development/endpoints/example-logged-in-user", + }, + { + title: "Extend services", + descriptionJSX: ( + <> + Extend services, such as ProductService to customize + data management functionalities + + ), + path: "/development/services/extend-service", + }, + { + title: "Handle events", + descriptionJSX: ( + <> + Listen to events like order.placed and handle them with + subscribers + + ), + path: "/development/events/create-subscriber", + }, + { + title: "Add Payment Provider", + path: "/plugins/payment", + descriptionJSX: ( + <> + Add a payment provider to your Medusa backend. You can choose to + install a plugin or{" "} + + create your own provider + + . + + ), + }, + { + title: "Create a storefront", + path: "/starters/nextjs-medusa-starter", + descriptionJSX: ( + <> + Build a storefront either using the Next.js starter or{" "} + from scratch. + + ), + }, + { + title: "Deploy the backend", + path: "/deployments/server/deploying-on-railway", + descriptionJSX: ( + <> + Deploy your backend to Railway. You can alternatively check out{" "} + other deployment guides + + ), + }, + ], + finish: { + type: "rating", + step: { + title: "Congratulations on building your marketplace!", + description: "Please rate your experience using this learning path.", + eventName: "rating_path_marketplace", + }, + }, + }, + { + name: "subscriptions", + label: "Build Subscription-based Purchases", + description: + "Customize the backend and handle events to implement subscriptions", + steps: [ + { + title: "Extend entities", + path: "/development/entities/extend-entity", + descriptionJSX: ( + <> + Extend entities, such as the Order entity, to associate + them with the Store entity. You can also{" "} + + Create a custom entity + + . + + ), + }, + { + title: "Handle events", + descriptionJSX: ( + <> + Create a subscriber that listens to the order.placed{" "} + event, or other{" "} + events, and + handles creating the subscription in Medusa. + + ), + path: "/development/events/create-subscriber", + }, + { + title: "Create a Scheduled Job", + description: + "Create a scheduled job that checks daily for subscriptions that needs renewal.", + path: "/development/scheduled-jobs/create", + }, + { + title: "Create a storefront", + path: "/starters/nextjs-medusa-starter", + descriptionJSX: ( + <> + Build a storefront either using the Next.js starter or{" "} + from scratch. + + ), + }, + { + title: "Deploy the backend", + path: "/deployments/server/deploying-on-railway", + descriptionJSX: ( + <> + Deploy your backend to Railway. You can alternatively check out{" "} + other deployment guides + + ), + }, + ], + finish: { + type: "rating", + step: { + title: "Congratulations on implementing subscription-based purchases!", + description: "Please rate your experience using this learning path.", + eventName: "rating_path_subscriptions", + }, + }, + }, +] + +export const getLearningPaths = () => paths + +export const getLearningPath = ( + pathName: string +): LearningPathType | undefined => paths.find((path) => path.name === pathName) diff --git a/www/docs/static/img/learning-path-img.png b/www/docs/static/img/learning-path-img.png new file mode 100644 index 0000000000..1536b3170f Binary files /dev/null and b/www/docs/static/img/learning-path-img.png differ diff --git a/www/docs/tailwind.config.js b/www/docs/tailwind.config.js index b39b38160d..4ff8f084a5 100644 --- a/www/docs/tailwind.config.js +++ b/www/docs/tailwind.config.js @@ -146,7 +146,7 @@ module.exports = { dark: "#102A4C", }, "toggle-off": { - DEFAULT: "#C1C8CD", + DEFAULT: "#E6E8EB", dark: "#3E3E44", }, overlay: { @@ -154,7 +154,7 @@ module.exports = { dark: "rgba(22, 22, 24, 0.7)", }, interactive: { - DEFAULT: "#6E56CF", + DEFAULT: "#0081F1", dark: "#6E56CF", }, }, @@ -168,7 +168,7 @@ module.exports = { dark: "#3E3E44", }, focus: { - DEFAULT: "#6E56CF", + DEFAULT: "#0081F1", dark: "#6E56CF", inset: { DEFAULT: "#FFFFFF", @@ -176,12 +176,20 @@ module.exports = { }, }, interactive: { - DEFAULT: "#6E56CF", + DEFAULT: "#0081F1", dark: "#6E56CF", }, + error: { + DEFAULT: "#E5484D", + dark: "#E5484D", + }, "neutral-buttons": { - DEFAULT: "#11181C1A", - dark: "#FFFFFF1F", + DEFAULT: "rgba(17, 24, 28, 0.16)", + dark: "rgba(255, 255, 255, 0.06)", + }, + "colored-buttons": { + DEFAULT: "rgba(17, 24, 28, 0.35)", + dark: "rgba(0, 0, 0, 0.24)", }, }, text: { @@ -193,7 +201,7 @@ module.exports = { DEFAULT: "#687076", dark: "#7E7D86", }, - placeholder: { + muted: { DEFAULT: "#889096", dark: "#706F78", }, @@ -206,10 +214,10 @@ module.exports = { dark: "#FFFFFF", }, interactive: { - DEFAULT: "#6E56CF", + DEFAULT: "#0081F1", dark: "#7C66DC", hover: { - DEFAULT: "#644FC1", + DEFAULT: "#006ADC", dark: "#9E8CFC", }, }, @@ -217,23 +225,89 @@ module.exports = { DEFAULT: "#E5484D", dark: "#E5484D", }, + "on-inverted": { + DEFAULT: "#FFFFFF", + dark: "#1A1523", + }, }, - button: { - primary: { - DEFAULT: "#6E56CF", - dark: "#6E56CF", + icon: { + base: { + DEFAULT: "#11181C", + dark: "#EDEDEF", + }, + subtle: { + DEFAULT: "#687076", + dark: "#7E7D86", + }, + muted: { + DEFAULT: "#889096", + dark: "#706F78", + }, + disabled: { + DEFAULT: "#C1C8CD", + dark: "#504F57", + }, + "on-color": { + DEFAULT: "#FFFFFF", + dark: "#FFFFFF", + }, + interactive: { + DEFAULT: "#0081F1", + dark: "#7C66DC", hover: { - DEFAULT: "#644FC1", - dark: "#7C66DC", - }, - pressed: { - DEFAULT: "#5746AF", + DEFAULT: "#006ADC", dark: "#9E8CFC", }, }, - secondary: { + error: { + DEFAULT: "#E5484D", + dark: "#E5484D", + }, + "on-inverted": { DEFAULT: "#FFFFFF", - dark: "#232326", + dark: "#1A1523", + }, + }, + button: { + brand: { + DEFAULT: "#5746AF", + dark: "#5842C3", + hover: { + DEFAULT: "#644FC1", + dark: "#5842C3", + }, + pressed: { + DEFAULT: "#5746AF", + dark: "#7C66DC", + }, + }, + neutral: { + DEFAULT: "#F8F9FA", + dark: "#28282C", + hover: { + DEFAULT: "#F8F9FA", + dark: "#2E2E32", + }, + pressed: { + DEFAULT: "#F1F3F5", + dark: "#34343A", + }, + }, + inverted: { + DEFAULT: "#151718", + dark: "#F4F2F4", + hover: { + DEFAULT: "#202425", + dark: "#F4F2F4", + }, + pressed: { + DEFAULT: "#26292B", + dark: "#EEEDEF", + }, + }, + transparent: { + DEFAULT: "rgba(255, 255, 255, 0)", + dark: "rgba(0, 0, 0, 0)", hover: { DEFAULT: "#F8F9FA", dark: "#2E2E32", @@ -245,114 +319,70 @@ module.exports = { }, danger: { DEFAULT: "#E5484D", - dark: "#E5484D", + dark: "#AA2429", hover: { DEFAULT: "#DC3D43", - dark: "#DC3D43", + dark: "#AA2429", }, pressed: { DEFAULT: "#CD2B31", - dark: "#CD2B31", - }, - }, - success: { - DEFAULT: "#30A46C", - dark: "#30A46C", - }, - neutral: { - hover: { - DEFAULT: "#F8F9FA", - dark: "#2E2E32", - }, - pressed: { - DEFAULT: "#F1F3F5", - dark: "#34343A", + dark: "#E5484D", }, }, disabled: { DEFAULT: "#ECEEF0", dark: "#28282C", }, - }, - icon: { - primary: { - DEFAULT: "#11181C", - dark: "#EDEDEF", - }, - secondary: { - DEFAULT: "#687076", - dark: "#7E7D86", - }, - placeholder: { - DEFAULT: "#889096", - dark: "#706F78", - }, - disabled: { - DEFAULT: "#C1C8CD", - dark: "#504F57", - }, - "on-color": { - DEFAULT: "#FFFFFF", - dark: "#FFFFFF", - }, - interactive: { - DEFAULT: "#6E56CF", - dark: "#7C66DC", - hover: { - DEFAULT: "#644FC1", - dark: "#9E8CFC", - }, - }, - error: { - DEFAULT: "#E5484D", - dark: "#E5484D", - }, - subtle: { - DEFAULT: "#687076", - dark: "#7E7D86", - }, - }, - support: { - error: { - DEFAULT: "#E5484D", - dark: "#E5484D", - }, - warning: { - DEFAULT: "#FFB224", - dark: "#FFB224", - }, success: { DEFAULT: "#30A46C", dark: "#30A46C", }, - info: { - DEFAULT: "#0091FF", - dark: "#0091FF", - }, - }, - code: { - block: { - bg: "#1C1C1F", - transparent: "transparent", - border: "#2E2E32", - action: "#706F78", - }, - tabs: { - bg: "#161616", - }, - tab: { - bg: "#1C1C1F", - hover: "rgba(141, 141, 141, 0.16)", - border: "#3E3E44", - text: { - DEFAULT: "#7E7D86", - active: "#EDEDEF", - }, - title: "#7E7D86", - }, - "text-highlight": "#102A4C", }, tag: { + neutral: { + bg: { + DEFAULT: "#F1F3F5", + dark: "#28282C", + hover: { + DEFAULT: "#ECEEF0", + dark: "#2E2E32", + }, + }, + text: { + DEFAULT: "#687076", + dark: "#A09FA6", + }, + icon: { + DEFAULT: "#889096", + dark: "#706F78", + }, + border: { + DEFAULT: "#DFE3E6", + dark: "#3E3E44", + }, + }, + transparent: { + bg: { + DEFAULT: "rgba(255, 255, 255, 0)", + dark: "#1C1C1F", + hover: { + DEFAULT: "#F8F9FA", + dark: "#232326", + }, + }, + text: { + DEFAULT: "#687076", + dark: "#A09FA6", + }, + icon: { + DEFAULT: "#889096", + dark: "#706F78", + }, + border: { + DEFAULT: "#DFE3E6", + dark: "#3E3E44", + }, + }, purple: { bg: { DEFAULT: "#EDE9FE", @@ -375,50 +405,6 @@ module.exports = { dark: "#392C72", }, }, - orange: { - bg: { - DEFAULT: "#FFECBC", - dark: "#3F2200", - hover: { - DEFAULT: "#FFE3A2", - dark: "#4A2900", - }, - }, - text: { - DEFAULT: "#AD5700", - dark: "#F1A10D", - }, - icon: { - DEFAULT: "#FFB224", - dark: "#FFB224", - }, - border: { - DEFAULT: "#FFD386", - dark: "#573300", - }, - }, - green: { - bg: { - DEFAULT: "#DDF3E4", - dark: "#113123", - hover: { - DEFAULT: "#CCEBD7", - dark: "#133929", - }, - }, - text: { - DEFAULT: "#18794E", - dark: "#4CC38A", - }, - icon: { - DEFAULT: "#30A46C", - dark: "#30A46C", - }, - border: { - DEFAULT: "#B4DFC4", - dark: "#164430", - }, - }, blue: { bg: { DEFAULT: "#E1F0FF", @@ -441,28 +427,141 @@ module.exports = { dark: "#0D3868", }, }, - neutral: { + green: { bg: { - DEFAULT: "#F1F3F5", - dark: "#28282C", + DEFAULT: "#DDF3E4", + dark: "#113123", hover: { - DEFAULT: "#ECEEF0", - dark: "#2E2E32", + DEFAULT: "#CCEBD7", + dark: "#133929", }, }, text: { - DEFAULT: "#687076", - dark: "#A09FA6", + DEFAULT: "#18794E", + dark: "#4CC38A", }, icon: { - DEFAULT: "#889096", - dark: "#706F78", + DEFAULT: "#30A46C", + dark: "#30A46C", }, border: { - DEFAULT: "#DFE3E6", - dark: "#3E3E44", + DEFAULT: "#B4DFC4", + dark: "#164430", }, }, + orange: { + bg: { + DEFAULT: "#FFECBC", + dark: "#3F2200", + hover: { + DEFAULT: "#FFE3A2", + dark: "#4A2900", + }, + }, + text: { + DEFAULT: "#AD5700", + dark: "#F1A10D", + }, + icon: { + DEFAULT: "#FFB224", + dark: "#FFB224", + }, + border: { + DEFAULT: "#FFD386", + dark: "#573300", + }, + }, + red: { + bg: { + DEFAULT: "#FFE5E5", + dark: "#481A1D", + hover: { + DEFAULT: "#FDD8D8", + dark: "#541B1F", + }, + }, + text: { + DEFAULT: "#CD2B31", + dark: "#FF6369", + }, + icon: { + DEFAULT: "#E5484D", + dark: "#E5484D", + }, + border: { + DEFAULT: "#F9C6C6", + dark: "#671E22", + }, + }, + pink: { + bg: { + DEFAULT: "#FCE5F3", + dark: "#451A37", + hover: { + DEFAULT: "#F9D8EC", + dark: "#501B3F", + }, + }, + text: { + DEFAULT: "#CD1D8D", + dark: "#F65CB6", + }, + icon: { + DEFAULT: "#D6409F", + dark: "#D6409F", + }, + border: { + DEFAULT: "#F3C6E2", + dark: "#601D48", + }, + }, + }, + code: { + text: { + base: "#ECEDEE", + subtle: "#787F85", + muted: "#697177", + }, + icon: "#697177", + block: { + bg: "#151718", + transparent: "transparent", + header: "#1A1D1E", + border: "#2E2E32", + action: "#706F78", + }, + tabs: { + bg: "#1A1D1E", + }, + tab: { + bg: "#151718", + hover: "rgba(141, 141, 141, 0.16)", + border: "#3A3F42", + text: { + DEFAULT: "#787F85", + active: "#EDEDEF", + }, + title: "#787F85", + }, + "text-highlight": "#102A4C", + }, + support: { + error: { + DEFAULT: "#E5484D", + dark: "#E5484D", + }, + warning: { + DEFAULT: "#FFB224", + dark: "#FFB224", + }, + success: { + DEFAULT: "#30A46C", + dark: "#30A46C", + }, + info: { + DEFAULT: "#0091FF", + dark: "#0091FF", + }, }, }, /* docs defaults */ @@ -478,23 +577,6 @@ module.exports = { }, }, boxShadow: { - overlay: "0px 2px 16px rgba(0, 0, 0, 0.08)", - "overlay-dark": "0px 2px 16px rgba(0, 0, 0, 0.32)", - "field-focused": "0px 0px 0px 4px #EDE9FE", - "field-focused-dark": "0px 0px 0px 4px #2C2250", - "button-focused": "0px 0px 0px 2px #FFFFFF, 0px 0px 0px 4px #6E56CF", - "button-focused-dark": - "0px 0px 0px 2px #1C1C1F, 0px 0px 0px 4px #6E56CF", - navbar: "0px 1px 0px 0px #E6E8EB", - "navbar-dark": "0px 1px 0px 0px #2E2E32", - flyout: - "0px 0px 0px 1px rgba(17, 24, 28, 0.08), 0px 8px 16px rgba(17, 24, 28, 0.08)", - "flyout-dark": - "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 8px 16px rgba(0, 0, 0, 0.32)", - "neutral-button-focused": - "0px 0px 0px 2px #FFFFFF, 0px 0px 0px 4px #6E56CF", - "neutral-button-focused-dark": - "0px 0px 0px 2px #1C1C1F, 0px 0px 0px 4px #6E56CF", "card-rest": "0px 0px 0px 1px rgba(17, 24, 28, 0.08), 0px 1px 2px -1px rgba(17, 24, 28, 0.08), 0px 2px 4px rgba(17, 24, 28, 0.04)", "card-rest-dark": @@ -503,6 +585,26 @@ module.exports = { "0px 0px 0px 1px rgba(17, 24, 28, 0.08), 0px 1px 2px -1px rgba(17, 24, 28, 0.08), 0px 2px 8px rgba(17, 24, 28, 0.1)", "card-hover-dark": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 1px 2px -1px rgba(255, 255, 255, 0.16), 0px 2px 8px rgba(0, 0, 0, 0.32)", + tooltip: + "0px 0px 0px 1px rgba(17, 24, 28, 0.08), 0px 4px 8px rgba(17, 24, 28, 0.08)", + "tooltip-dark": + "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.32)", + flyout: + "0px 0px 0px 1px rgba(17, 24, 28, 0.08), 0px 8px 16px rgba(17, 24, 28, 0.08)", + "flyout-dark": + "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 8px 16px rgba(0, 0, 0, 0.32)", + modal: + "0px 0px 0px 1px rgba(17, 24, 28, 0.08), 0px 16px 32px rgba(17, 24, 28, 0.08), 0px 2px 24px rgba(17, 24, 28, 0.08)", + "modal-dark": + "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 16px 32px rgba(0, 0, 0, 0.32), 0px 2px 24px rgba(0, 0, 0, 0.32)", + focus: "0px 0px 0px 2px #FFFFFF, 0px 0px 0px 4px #0081F1", + "focus-dark": "0px 0px 0px 2px #1C1C1F, 0px 0px 0px 4px #6E56CF", + active: "0px 0px 0px 3px #E1F0FF", + "active-dark": "0px 0px 0px 3px #2C2250", + overlay: "0px 2px 16px rgba(0, 0, 0, 0.08)", + "overlay-dark": "0px 2px 16px rgba(0, 0, 0, 0.32)", + navbar: "0px 1px 0px 0px #E6E8EB", + "navbar-dark": "0px 1px 0px 0px #2E2E32", }, borderRadius: { DEFAULT: "8px", @@ -514,12 +616,15 @@ module.exports = { backgroundImage: { "primary-gradient": "linear-gradient(90deg, rgba(146, 144, 254, 0) 0%, rgba(163, 219, 254, 0.4) 26.04%, #9290FE 53.65%, rgba(197, 145, 255, 0.4) 78.65%, rgba(201, 138, 255, 0) 100%)", - "code-fade": "linear-gradient(90deg, #1C1C1F00, #1C1C1F 24px)", + "code-fade": "linear-gradient(90deg, #15171800, #151718 24px)", "button-neutral": "linear-gradient(180deg, #FFFFFF 30.1%, #F8F9FA 100%)", "button-neutral-dark": "linear-gradient(180deg, #2E2E32 0%, #28282C 32.67%)", "no-image": "none", + "button-inverted": "linear-gradient(180deg, #26292B 0%, #151718 30.5%)", + "button-inverted-dark": + "linear-gradient(180deg, #FFFFFF 31.33%, #F4F2F4 100%)", }, screens: { xs: "576px", diff --git a/www/docs/vercel.json b/www/docs/vercel.json index 3bf2aa6b3d..8c5ca0394e 100644 --- a/www/docs/vercel.json +++ b/www/docs/vercel.json @@ -468,6 +468,10 @@ { "source": "/deployments/admin/deploying-on-netlify", "destination": "/deployments/admin/deploying-on-vercel" + }, + { + "source": "/admin/development", + "destination": "/admin/widgets" } ] } \ No newline at end of file diff --git a/www/docs/yarn.lock b/www/docs/yarn.lock index 1c6ce5c0b5..335a7db70b 100644 --- a/www/docs/yarn.lock +++ b/www/docs/yarn.lock @@ -3300,6 +3300,15 @@ __metadata: languageName: node linkType: hard +"@types/react-transition-group@npm:^4.4.6": + version: 4.4.6 + resolution: "@types/react-transition-group@npm:4.4.6" + dependencies: + "@types/react": "*" + checksum: 154dc4e94738cff0b2fa183331427c0de3d8daac44a9b79c27aa8a95b78adde44b9f70db8a374399eabe1d44ca50304b1d7bbaeadca0fbdf6f2a91f6f9eb343d + languageName: node + linkType: hard + "@types/react@npm:*": version: 18.0.35 resolution: "@types/react@npm:18.0.35" @@ -3385,6 +3394,13 @@ __metadata: languageName: node linkType: hard +"@types/uuid@npm:^9.0.1": + version: 9.0.1 + resolution: "@types/uuid@npm:9.0.1" + checksum: 234e14e053504a98532bb5d1490c8d649fe24ae04a94ba042b09b380a900094df1032aa7c3864b74b7a85a0a5e97530b2d1340048ed9d07855140cb99b2cefc8 + languageName: node + linkType: hard + "@types/ws@npm:^8.5.1": version: 8.5.4 resolution: "@types/ws@npm:8.5.4" @@ -5572,6 +5588,8 @@ __metadata: "@octokit/request": ^6.2.3 "@svgr/webpack": 6.2.1 "@tsconfig/docusaurus": ^1.0.7 + "@types/react-transition-group": ^4.4.6 + "@types/uuid": ^9.0.1 "@typescript-eslint/eslint-plugin": ^5.55.0 "@typescript-eslint/parser": ^5.55.0 algoliasearch-helper: ^3.11.3 @@ -5600,6 +5618,7 @@ __metadata: tailwindcss: ^3.3.2 typescript: ^5.0.2 url-loader: ^4.1.1 + uuid: ^9.0.0 languageName: unknown linkType: soft @@ -12925,6 +12944,15 @@ __metadata: languageName: node linkType: hard +"uuid@npm:^9.0.0": + version: 9.0.0 + resolution: "uuid@npm:9.0.0" + bin: + uuid: dist/bin/uuid + checksum: 8867e438990d1d33ac61093e2e4e3477a2148b844e4fa9e3c2360fa4399292429c4b6ec64537eb1659c97b2d10db349c673ad58b50e2824a11e0d3630de3c056 + languageName: node + linkType: hard + "value-equal@npm:^1.0.1": version: 1.0.1 resolution: "value-equal@npm:1.0.1"