api-ref: custom API reference (#4770)
* initialized next.js project * finished markdown sections * added operation schema component * change page metadata * eslint fixes * fixes related to deployment * added response schema * resolve max stack issue * support for different property types * added support for property types * added loading for components * added more loading * type fixes * added oneOf type * removed console * fix replace with push * refactored everything * use static content for description * fixes and improvements * added code examples section * fix path name * optimizations * fixed tag navigation * add support for admin and store references * general enhancements * optimizations and fixes * fixes and enhancements * added search bar * loading enhancements * added loading * added code blocks * added margin top * add empty response text * fixed oneOf parameters * added path and query parameters * general fixes * added base path env variable * small fix for arrays * enhancements * design enhancements * general enhancements * fix isRequired * added enum values * enhancements * general fixes * general fixes * changed oas generation script * additions to the introduction section * added copy button for code + other enhancements * fix response code block * fix metadata * formatted store introduction * move sidebar logic to Tags component * added test env variables * fix code block bug * added loading animation * added expand param + loading * enhance operation loading * made responsive + improvements * added loading provider * fixed loading * adjustments for small devices * added sidebar label for endpoints * added feedback component * fixed analytics * general fixes * listen to scroll for other headings * added sample env file * update api ref files + support new fields * fix for external docs link * added new sections * fix last item in sidebar not showing * move docs content to www/docs * change redirect url * revert change * resolve build errors * configure rewrites * changed to environment variable url * revert changing environment variable name * add environment variable for API path * fix links * fix tailwind settings * remove vercel file * reconfigured api route * move api page under api * fix page metadata * fix external link in navigation bar * update api spec * updated api specs * fixed google lint error * add max-height on request samples * add padding before loading * fix for one of name * fix undefined types * general fixes * remove response schema example * redesigned navigation bar * redesigned sidebar * fixed up paddings * added feedback component + report issue * fixed up typography, padding, and general styling * redesigned code blocks * optimization * added error timeout * fixes * added indexing with algolia + fixes * fix errors with algolia script * redesign operation sections * fix heading scroll * design fixes * fix padding * fix padding + scroll issues * fix scroll issues * improve scroll performance * fixes for safari * optimization and fixes * fixes to docs + details animation * padding fixes for code block * added tab animation * fixed incorrect link * added selection styling * fix lint errors * redesigned details component * added detailed feedback form * api reference fixes * fix tabs * upgrade + fixes * updated documentation links * optimizations to sidebar items * fix spacing in sidebar item * optimizations and fixes * fix endpoint path styling * remove margin * final fixes * change margin on small devices * generated OAS * fixes for mobile * added feedback modal * optimize dark mode button * fixed color mode useeffect * minimize dom size * use new style system * radius and spacing design system * design fixes * fix eslint errors * added meta files * change cron schedule * fix docusaurus configurations * added operating system to feedback data * change content directory name * fixes to contribution guidelines * revert renaming content * added api-reference to documentation workflow * fixes for search * added dark mode + fixes * oas fixes * handle bugs * added code examples for clients * changed tooltip text * change authentication to card * change page title based on selected section * redesigned mobile navbar * fix icon colors * fix key colors * fix medusa-js installation command * change external regex in algolia * change changeset * fix padding on mobile * fix hydration error * update depedencies
This commit is contained in:
Shahed Nasser
@@ -31,7 +31,7 @@ const LearningPathFinish: React.FC<LearningPathFinishProps> = ({
|
||||
<Rating event={step.eventName} onRating={onRating} />
|
||||
)}
|
||||
{type === "custom" && (
|
||||
<span className="tw-text-label-small tw-text-medusa-text-subtle dark:tw-text-medusa-text-subtle-dark">
|
||||
<span className="text-compact-small text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark">
|
||||
{step.descriptionJSX}
|
||||
</span>
|
||||
)}
|
||||
|
||||
@@ -14,17 +14,14 @@ const LearningPathIcon: React.FC<LearningPathIconProps> = ({
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
"tw-rounded-full tw-shadow-card-rest dark:tw-shadow-card-rest-dark tw-w-3 tw-h-3 tw-bg-button-neutral dark:tw-bg-button-neutral-dark",
|
||||
"tw-flex tw-justify-center tw-items-center tw-flex-none",
|
||||
"rounded-full shadow-card-rest dark:shadow-card-rest-dark w-3 h-3 bg-docs-button-neutral dark:bg-docs-button-neutral-dark",
|
||||
"flex justify-center items-center flex-none",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<img
|
||||
src={useBaseUrl("/img/learning-path-img.png")}
|
||||
className={clsx(
|
||||
"tw-rounded-full tw-w-[40px] tw-h-[40px] no-zoom-img",
|
||||
imgClassName
|
||||
)}
|
||||
className={clsx("rounded-full w-2.5 h-2.5 no-zoom-img", imgClassName)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -22,15 +22,15 @@ const LearningPathStepActions: React.FC<LearningPathStepActionsType> = ({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="tw-flex tw-gap-0.5 tw-p-1 tw-justify-end tw-items-center">
|
||||
<div className="flex gap-0.5 p-1 justify-end items-center">
|
||||
<Button onClick={onClose}>Close</Button>
|
||||
{hasNextStep() && (
|
||||
<Button onClick={nextStep} btnTypeClassName="btn-inverted">
|
||||
<Button onClick={nextStep} btnTypeClassName="btn-primary">
|
||||
Next
|
||||
</Button>
|
||||
)}
|
||||
{!hasNextStep() && (
|
||||
<Button onClick={handleFinish} btnTypeClassName="btn-inverted">
|
||||
<Button onClick={handleFinish} btnTypeClassName="btn-primary">
|
||||
Finish
|
||||
</Button>
|
||||
)}
|
||||
|
||||
@@ -24,38 +24,38 @@ const LearningPathSteps: React.FC<LearningPathStepsProps> = ({ ...rest }) => {
|
||||
{path.steps.map((step, index) => (
|
||||
<div
|
||||
className={clsx(
|
||||
"tw-border-0 tw-border-b tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark",
|
||||
"tw-relative tw-p-1"
|
||||
"border-0 border-b border-solid border-medusa-border-base dark:border-medusa-border-base-dark",
|
||||
"relative p-1"
|
||||
)}
|
||||
key={index}
|
||||
>
|
||||
<div className={clsx("tw-flex tw-items-center tw-gap-1")}>
|
||||
<div className="tw-w-2 tw-flex-none tw-flex tw-items-center tw-justify-center">
|
||||
<div className={clsx("flex items-center gap-1")}>
|
||||
<div className="w-2 flex-none flex items-center justify-center">
|
||||
{index === currentStep && (
|
||||
<IconCircleDottedLine
|
||||
className="tw-shadow-active dark:tw-shadow-active-dark tw-rounded-full"
|
||||
iconColorClassName="tw-stroke-medusa-icon-interactive dark:tw-stroke-medusa-icon-interactive-dark"
|
||||
className="shadow-active dark:shadow-active-dark rounded-full"
|
||||
iconColorClassName="stroke-medusa-fg-interactive dark:stroke-medusa-fg-interactive-dark"
|
||||
/>
|
||||
)}
|
||||
{index < currentStep && (
|
||||
<IconCheckCircleSolid iconColorClassName="tw-fill-medusa-icon-interactive dark:tw-fill-medusa-icon-interactive-dark" />
|
||||
<IconCheckCircleSolid iconColorClassName="fill-medusa-fg-interactive dark:fill-medusa-fg-interactive-dark" />
|
||||
)}
|
||||
{index > currentStep && <IconCircleMiniSolid />}
|
||||
</div>
|
||||
<span
|
||||
className={clsx(
|
||||
"tw-text-label-regular-plus tw-text-medusa-text-base dark:tw-text-medusa-text-base-dark"
|
||||
"text-compact-medium-plus text-medusa-fg-base dark:text-medusa-fg-base-dark"
|
||||
)}
|
||||
>
|
||||
{step.title}
|
||||
</span>
|
||||
</div>
|
||||
{index === currentStep && (
|
||||
<div className={clsx("tw-flex tw-items-center tw-gap-1")}>
|
||||
<div className="tw-w-2 tw-flex-none"></div>
|
||||
<div className={clsx("flex items-center gap-1")}>
|
||||
<div className="w-2 flex-none"></div>
|
||||
<div
|
||||
className={clsx(
|
||||
"tw-text-body-regular tw-text-medusa-text-subtle dark:tw-text-medusa-text-subtle-dark tw-mt-1"
|
||||
"text-medium text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark mt-1"
|
||||
)}
|
||||
>
|
||||
{step.descriptionJSX ?? step.description}
|
||||
@@ -65,9 +65,7 @@ const LearningPathSteps: React.FC<LearningPathStepsProps> = ({ ...rest }) => {
|
||||
{index < currentStep && (
|
||||
<Link
|
||||
href={step.path}
|
||||
className={clsx(
|
||||
"tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full"
|
||||
)}
|
||||
className={clsx("absolute top-0 left-0 w-full h-full")}
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
goToStep(index)
|
||||
|
||||
@@ -3,7 +3,6 @@ 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"
|
||||
@@ -34,20 +33,20 @@ const LearningPath: React.FC<LearningPathProps> = ({
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
"tw-rounded tw-shadow-card-rest dark:tw-shadow-card-rest-dark tw-bg-docs-bg-surface dark:tw-bg-docs-bg-surface-dark tw-mt-1.5 tw-mb-4",
|
||||
"rounded shadow-card-rest dark:shadow-card-rest-dark bg-docs-bg-surface dark:bg-docs-bg-surface-dark mt-1.5 mb-4",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
"tw-flex tw-items-center tw-gap-1 tw-p-1 tw-border-0 tw-border-b tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark"
|
||||
"flex items-center gap-1 p-1 border-0 border-b border-solid border-medusa-border-base dark:border-medusa-border-base-dark"
|
||||
)}
|
||||
>
|
||||
<LearningPathIcon />
|
||||
<div className={clsx("tw-flex-auto")}>
|
||||
<div className={clsx("flex-auto")}>
|
||||
<span
|
||||
className={clsx(
|
||||
"tw-text-medusa-text-base dark:tw-text-medusa-text-base-dark tw-text-label-large-plus tw-block"
|
||||
"text-medusa-fg-base dark:text-medusa-fg-base-dark text-compact-large-plus block"
|
||||
)}
|
||||
>
|
||||
{path.label}
|
||||
@@ -55,34 +54,32 @@ const LearningPath: React.FC<LearningPathProps> = ({
|
||||
{path.description && (
|
||||
<span
|
||||
className={clsx(
|
||||
"tw-text-medusa-text-subtle dark:tw-text-medusa-text-subtle-dark tw-text-label-regular tw-mt-[4px] tw-inline-block"
|
||||
"text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark text-compact-medium mt-0.25 inline-block"
|
||||
)}
|
||||
>
|
||||
{path.description}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<Button onClick={handleClick} className={clsx("tw-flex-initial")}>
|
||||
<Button onClick={handleClick} className={clsx("flex-initial")}>
|
||||
Start Path
|
||||
</Button>
|
||||
</div>
|
||||
{path.steps.map((step, index) => (
|
||||
<div
|
||||
className={clsx(
|
||||
"tw-flex tw-items-center tw-p-1 tw-gap-1",
|
||||
"flex items-center p-1 gap-1",
|
||||
index !== path.steps.length - 1 &&
|
||||
"tw-border-0 tw-border-b tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark"
|
||||
"border-0 border-b border-solid border-medusa-border-base dark:border-medusa-border-base-dark"
|
||||
)}
|
||||
key={index}
|
||||
>
|
||||
<div
|
||||
className={clsx("tw-w-3 tw-flex tw-items-center tw-justify-center")}
|
||||
>
|
||||
<IconCircleMiniSolid iconColorClassName="tw-stroke-medusa-icon-muted dark:tw-stroke-medusa-icon-muted-dark" />
|
||||
<div className={clsx("w-3 flex items-center justify-center")}>
|
||||
<IconCircleMiniSolid iconColorClassName="stroke-medusa-fg-muted dark:stroke-medusa-fg-muted-dark" />
|
||||
</div>
|
||||
<span
|
||||
className={clsx(
|
||||
"tw-text-medusa-text-base dark:tw-text-medusa-text-base-dark tw-text-label-regular-plus"
|
||||
"text-medusa-fg-base dark:text-medusa-fg-base-dark text-compact-medium-plus"
|
||||
)}
|
||||
>
|
||||
{step.title}
|
||||
|
||||
Reference in New Issue
Block a user