Merge branch 'develop' into feat/reservations-management

medusajs · May 22, 2023 · c50594c · c50594c
2 parents 1005370 + 8744448
commit c50594c
Show file tree

Hide file tree

Showing 29 changed files with 585 additions and 184 deletions.
diff --git a/docs/content/homepage.mdx b/docs/content/homepage.mdx
@@ -69,7 +69,7 @@ Medusa provides the essential building blocks that developers can put together t
     label: 'Medusa Backend',
     customProps: {
       icon: Icons['circle-stack-solid'],
-      html: 'A Medusa Backend is any Node.js project with @medusajs/medusa installed. The core Medusa package orchestrates Medusa\'s Commerce Modules to expose a powerful and customizable REST API.',
+      html: 'A Medusa Backend is any Node.js project with @medusajs/medusa installed. The core Medusa package orchestrates Medusa\'s Commerce Modules to expose powerful and customizable REST APIs.',
     }
   },
   {
@@ -78,7 +78,7 @@ Medusa provides the essential building blocks that developers can put together t
     label: 'Admin Dashboard',
     customProps: {
       icon: Icons['computer-desktop-solid'],
-      description: 'An intuitive admin dashboard along with the Medusa backend and commerce modules. Merchants can use it to perform data management and processes such as manage orders, products, customers, and much more.'
+      description: 'An admin dashboard used along with the Medusa backend and commerce modules. Merchants can use it to manage orders, products, customers, and much more.'
     }
   },
 ]} />

diff --git a/docs/content/modules/overview.mdx b/docs/content/modules/overview.mdx
@@ -22,7 +22,7 @@ This section gives an overview of the features available in Medusa. You can lear
 
 Medusa provides the necessary features to build a customizable shopping experience for your customers. Medusa also offers features optimized for business operations to manage their orders effeciently.
 
-<LargeCardList>
+<LargeCardList colSize={6}>
   <LargeCard
     Icon={Icons['check-circle-solid']}
     title='Orders'
@@ -92,7 +92,7 @@ Medusa provides the necessary features to build a customizable shopping experien
 
 Medusa's products configuration allows managing products of different types including products with options and gift cards. Medusa also includes advanced features related to pricing and discounts.
 
-<LargeCardList>
+<LargeCardList colSize={6}>
   <LargeCard
     Icon={Icons['tag-solid']}
     title='Products'
@@ -126,29 +126,31 @@ Medusa's products configuration allows managing products of different types incl
 
 
   </LargeCard>
-  <LargeCard
-    Icon={Icons['currency-dollar-solid']}
-    title='Price Lists and Discounts'
-    action={{
-      label: 'Learn more',
-      href: '/modules/price-lists/overview'
-    }}
-  >
+</LargeCardList>
 
-  - Create discounts and deals with advanced conditions and rules such as minimum cart quantity or specific products.
-  - Offer free shipping, fixed discount, or percentage discount.
-  - Override product prices using price lists and set special conditions such as specific customer groups.
-  - Import prices into a price list from a CSV file.
 
+<LargeCard
+  Icon={Icons['currency-dollar-solid']}
+  title='Price Lists and Discounts'
+  action={{
+    label: 'Learn more',
+    href: '/modules/price-lists/overview'
+  }}
+>
 
-  </LargeCard>
-</LargeCardList>
+- Create discounts and deals with advanced conditions and rules such as minimum cart quantity or specific products.
+- Offer free shipping, fixed discount, or percentage discount.
+- Override product prices using price lists and set special conditions such as specific customer groups.
+- Import prices into a price list from a CSV file.
+
+
+</LargeCard>
 
 ### Ready Configurations for International Selling
 
 Medusa's multi-region setup and sales channels allow businesses to sell internationally and sell across platforms. Medusa allows configuring regions differently to cater for different markets across the globe.
 
-<LargeCardList>
+<LargeCardList colSize={6}>
   <LargeCard
     Icon={Icons['globe-europe-solid']}
     title='Multi-Region'
@@ -180,23 +182,24 @@ Medusa's multi-region setup and sales channels allow businesses to sell internat
 
 
   </LargeCard>
-  <LargeCard
-    Icon={Icons['channels-solid']}
-    title='Sales Channels'
-    action={{
-      label: 'Learn more',
-      href: '/modules/sales-channels/overview'
-    }}
-  >
+</LargeCardList>
 
-  - Create sales channels for your different platforms such as web, mobile, or marketplaces.
-  - Specify the availability of products for each sales channel.
-  - Associate orders with each sales channel for better handling and logistics.
-  - Associate API keys with sales channels for easier development.
+<LargeCard
+  Icon={Icons['channels-solid']}
+  title='Sales Channels'
+  action={{
+    label: 'Learn more',
+    href: '/modules/sales-channels/overview'
+  }}
+>
 
+- Create sales channels for your different platforms such as web, mobile, or marketplaces.
+- Specify the availability of products for each sales channel.
+- Associate orders with each sales channel for better handling and logistics.
+- Associate API keys with sales channels for easier development.
 
-  </LargeCard>
-</LargeCardList>
+
+</LargeCard>
 
 ## Get Additional Help
 

diff --git a/www/docs/docusaurus.config.js b/www/docs/docusaurus.config.js
@@ -141,6 +141,7 @@ const config = {
     },
     docs: {
       sidebar: {
+        hideable: true,
         autoCollapseCategories: true,
       },
     },

diff --git a/www/docs/src/components/LargeCard/index.tsx b/www/docs/src/components/LargeCard/index.tsx
@@ -15,6 +15,7 @@ type LargeCardProps = {
     href: string
   }
   isSoon?: boolean
+  className?: string
 } & React.HTMLAttributes<HTMLDivElement>
 
 const LargeCard: React.FC<LargeCardProps> = ({
@@ -23,26 +24,21 @@ const LargeCard: React.FC<LargeCardProps> = ({
   title,
   action: { href },
   isSoon = false,
+  className = "",
   children,
 }) => {
   return (
     <article
       className={clsx(
         "tw-group tw-bg-docs-bg-surface dark:tw-bg-docs-bg-surface-dark",
-        "tw-border tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark tw-rounded",
-        "tw-pt-6 tw-pb-1 tw-px-1 tw-mb-2",
+        "tw-rounded",
+        "tw-p-1 !tw-pb-1.5 tw-shadow-card-rest dark:tw-shadow-card-rest-dark",
         "tw-flex tw-flex-col tw-justify-between tw-relative",
-        "before:tw-content-[''] before:tw-absolute before:tw-left-0 before:tw-w-full before:tw-rounded before:tw-z-[1] before:tw-h-8 before:tw-top-0",
-        "before:tw-bg-large-card dark:before:tw-bg-large-card-dark before:tw-bg-docs-bg-surface dark:before:tw-bg-docs-bg-surface-dark",
         "[&:nth-child(3n+1):before]:tw-bg-[2%_52%] [&:nth-child(3n+2):before]:tw-bg-[19%_16%] [&:nth-child(3n+3):before]:tw-bg-[17%_50%]",
-        "after:tw-content-[''] after:tw-absolute after:tw-left-0 after:tw-w-full after:tw-rounded",
-        "after:tw-z-[2] after:tw-left-0 after:tw-top-4 after:tw-height-4 after:tw-bg-large-card-fade dark:after:tw-bg-large-card-fade-dark",
         !isSoon &&
-          "hover:after:tw-bg-large-card-fade-hover dark:hover:after:tw-bg-large-card-fade-hover",
-        !isSoon &&
-          "hover:tw-bg-medusa-bg-subtle-hover dark:hover:tw-bg-medusa-bg-base-hover-dark",
-        !isSoon &&
-          "hover:before:tw-bg-medusa-bg-subtle-hover dark:hover:before:tw-bg-medusa-bg-base-hover-dark"
+          "hover:tw-bg-medusa-bg-subtle-hover dark:hover:tw-bg-medusa-bg-base-hover-dark hover:tw-shadow-card-hover dark:hover:tw-shadow-card-hover-dark",
+        "large-card",
+        className
       )}
     >
       <div className={clsx("tw-z-[3]")}>
@@ -60,7 +56,7 @@ const LargeCard: React.FC<LargeCardProps> = ({
             iconWrapperClassName="tw-p-[6px]"
           />
         )}
-        <div className="tw-mb-0.5">
+        <div className="tw-mb-[4px]">
           <span
             className={clsx(
               isSoon &&

diff --git a/www/docs/src/components/LargeCardList/index.tsx b/www/docs/src/components/LargeCardList/index.tsx
@@ -12,7 +12,16 @@ const LargeCardList: React.FC<LargeCardListProps> = ({
   children,
 }) => {
   return (
-    <section className={clsx("cards-grid", `grid-${colSize}`, className)}>
+    <section
+      className={clsx(
+        "cards-grid",
+        `grid-${colSize}`,
+        "tw-gap-1",
+        "[&+*:not(.large-card)]:tw-mt-2",
+        "[&+.large-card]:tw-mt-1",
+        className
+      )}
+    >
       {children}
     </section>
   )

diff --git a/www/docs/src/components/Navbar/Actions/index.tsx b/www/docs/src/components/Navbar/Actions/index.tsx
@@ -6,27 +6,32 @@ import clsx from "clsx"
 
 type NavbarActionsProps = {
   items: NavbarAction[]
+  className?: string
 } & React.HTMLAttributes<HTMLDivElement>
 
-const NavbarActions: React.FC<NavbarActionsProps> = ({ items = [] }) => {
+const NavbarActions: React.FC<NavbarActionsProps> = ({
+  items = [],
+  className = "",
+}) => {
   return (
-    <div className="lg:tw-block tw-hidden">
+    <div className={clsx("lg:tw-block tw-hidden", className)}>
       {items.map((item, index) => {
+        // eslint-disable-next-line no-case-declarations
+        const ItemIcon = item.icon ? Icon[item.icon] : null
         switch (item.type) {
           case "link":
-            // eslint-disable-next-line no-case-declarations
-            const ItemIcon = item.icon ? Icon[item.icon] : null
             return (
-              <Tooltip text={item.title} key={index}>
+              <Tooltip
+                text={item.title}
+                html={item.html}
+                key={index}
+                tooltipClassName="!tw-text-label-x-small-plus"
+              >
                 <a
                   href={item.href}
                   title={item.title}
-                  // className={`${ItemIcon ? "navbar-link-icon" : ""} ${
-                  //   item.className || ""
-                  // }`}
                   className={clsx(
-                    ItemIcon &&
-                      "tw-bg-medusa-button-secondary dark:tw-bg-medusa-button-secondary-dark tw-border tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark tw-rounded tw-w-2 tw-h-2 tw-flex tw-justify-center tw-items-center hover:tw-bg-medusa-button-secondary-hover dark:hover:tw-bg-medusa-button-secondary-hover-dark",
+                    ItemIcon && "navbar-action-icon-item",
                     item.className
                   )}
                 >
@@ -35,6 +40,26 @@ const NavbarActions: React.FC<NavbarActionsProps> = ({ items = [] }) => {
                 </a>
               </Tooltip>
             )
+          case "button":
+            return (
+              <Tooltip
+                text={item.title}
+                html={item.html}
+                key={index}
+                tooltipClassName="!tw-text-label-x-small-plus"
+              >
+                <button
+                  className={clsx(
+                    ItemIcon && "navbar-action-icon-item",
+                    item.className
+                  )}
+                  {...item.events}
+                >
+                  {item.label}
+                  {ItemIcon && <ItemIcon />}
+                </button>
+              </Tooltip>
+            )
           default:
             return <></>
         }

diff --git a/www/docs/src/components/Tooltip/index.tsx b/www/docs/src/components/Tooltip/index.tsx
@@ -5,15 +5,17 @@ import uuid from "react-uuid"
 import "react-tooltip/dist/react-tooltip.css"
 
 type TooltipProps = {
-  text: string
+  text?: string
   tooltipClassName?: string
+  html?: string
 } & React.HTMLAttributes<HTMLSpanElement> &
   ITooltip
 
 const Tooltip: React.FC<TooltipProps> = ({
-  text,
+  text = "",
   tooltipClassName = "",
   children,
+  html = "",
 }) => {
   const [elementId, setElementId] = useState(null)
 
@@ -25,7 +27,7 @@ const Tooltip: React.FC<TooltipProps> = ({
 
   return (
     <>
-      <span id={elementId} data-tooltip-content={text}>
+      <span id={elementId} data-tooltip-content={text} data-tooltip-html={html}>
         {children}
       </span>
       <ReactTooltip

diff --git a/www/docs/src/context/sidebar.ts b/www/docs/src/context/sidebar.ts
@@ -0,0 +1,13 @@
+import { createContext } from "react"
+
+type SidebarContextType = {
+  hiddenSidebar: boolean
+  setHiddenSidebar: (value: boolean) => void
+  hiddenSidebarContainer: boolean
+  setHiddenSidebarContainer: (value: boolean) => void
+  floatingSidebar: boolean
+  setFloatingSidebar: (value: boolean) => void
+  onCollapse: () => void
+}
+
+export const SidebarContext = createContext<SidebarContextType | null>(null)
diff --git a/www/docs/src/css/_docusaurus.css b/www/docs/src/css/_docusaurus.css
@@ -170,7 +170,7 @@ details summary {
 }
 
 .container {
-  @apply !tw-pt-[38px] !tw-max-w-full;
+  @apply !tw-pt-3 !tw-max-w-full;
 }
 
 .pagination-nav {
@@ -234,7 +234,7 @@ html:not(.plugin-redoc) .navbar:not(.navbar-sidebar--show) {
 }
 
 .navbar__brand {
-  @apply tw-mr-2;
+  @apply tw-mr-1.5;
 }
 
 .navbar__logo {

diff --git a/www/docs/src/css/components/sidebar.css b/www/docs/src/css/components/sidebar.css
@@ -1,7 +1,5 @@
 .theme-doc-sidebar-container {
   --animate-duration: 0.2s;
-
-  clip-path: inset(0);
 }
 
 .sidebar-desktop nav {

diff --git a/www/docs/src/css/custom.css b/www/docs/src/css/custom.css
@@ -115,12 +115,28 @@
   .btn-primary {
     @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-border tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark;
+    @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 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;
-    @apply focus:tw-shadow-button-focused dark:focus:tw-shadow-button-focused-dark;
+  }
+
+  .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 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;
+  }
+}
+
+@layer utilities {
+  .clip {
+    clip-path: inset(0);
   }
 }
 

diff --git a/www/docs/src/theme/AnnouncementBar/index.tsx b/www/docs/src/theme/AnnouncementBar/index.tsx
@@ -19,7 +19,7 @@ export default function AnnouncementBar(): JSX.Element | null {
     <div
       className={clsx(
         "tw-relative tw-flex tw-items-center tw-h-auto tw-bg-medusa-bg-subtle dark:tw-bg-medusa-bg-base-dark tw-p-[12px]",
-        "tw-border tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark tw-rounded tw-mx-1.5 tw-mb-1",
+        "tw-rounded tw-mx-1.5 tw-mb-1 tw-shadow-card-rest dark:tw-shadow-card-rest-dark",
         "tw-transition-all tw-duration-200 tw-ease-ease",
         "hover:tw-bg-medusa-bg-subtle-hover dark:hover:tw-bg-medusa-bg-base-hover-dark",
         "print:tw-hidden"
@@ -29,10 +29,10 @@ export default function AnnouncementBar(): JSX.Element | null {
         <div
           className={clsx(
             "tw-p-[6px] tw-flex tw-justify-center tw-items-center",
-            "tw-bg-announcement-bg tw-bg-cover tw-rounded-sm"
+            "tw-rounded-sm tw-bg-medusa-bg-component dark:tw-bg-medusa-bg-component-dark"
           )}
         >
-          <IconBell iconColorClassName="tw-fill-medusa-icon-on-color dark:tw-fill-medusa-icon-on-color-dark" />
+          <IconBell iconColorClassName="tw-fill-medusa-icon-subtle dark:tw-fill-medusa-icon-subtle-dark" />
         </div>
       </Bordered>
       <AnnouncementBarContent className={clsx("tw-flex-1")} />
-Original file line number
+Diff line change
@@ Expand Up / @@ -141,6 +141,7 @@ const config = { @@
         },
         docs: {
           sidebar: {
+            hideable: true,
             autoCollapseCategories: true,
           },
         },
@@ Expand Down @@