docs: create docs workspace (#5174)

* docs: migrate ui docs to docs universe * created yarn workspace * added eslint and tsconfig configurations * fix eslint configurations * fixed eslint configurations * shared tailwind configurations * added shared ui package * added more shared components * migrating more components * made details components shared * move InlineCode component * moved InputText * moved Loading component * Moved Modal component * moved Select components * Moved Tooltip component * moved Search components * moved ColorMode provider * Moved Notification components and providers * used icons package * use UI colors in api-reference * moved Navbar component * used Navbar and Search in UI docs * added Feedback to UI docs * general enhancements * fix color mode * added copy colors file from ui-preset * added features and enhancements to UI docs * move Sidebar component and provider * general fixes and preparations for deployment * update docusaurus version * adjusted versions * fix output directory * remove rootDirectory property * fix yarn.lock * moved code component * added vale for all docs MD and MDX * fix tests * fix vale error * fix deployment errors * change ignore commands * add output directory * fix docs test * general fixes * content fixes * fix announcement script * added changeset * fix vale checks * added nofilter option * fix vale error
2023-09-21 20:57:15 +03:00
parent 19c5d5ba36
commit fa7c94b4cc
3209 changed files with 32188 additions and 31018 deletions
@@ -0,0 +1,64 @@
+import React from "react"
+import clsx from "clsx"
+import { PlusMini } from "@medusajs/icons"
+
+export type DetailsSummaryProps = {
+  title: React.ReactNode
+  subtitle?: string
+  badge?: React.ReactNode
+  expandable?: boolean
+  open?: boolean
+  className?: string
+  titleClassName?: string
+} & Omit<React.HTMLAttributes<HTMLElement>, "title">
+
+export const DetailsSummary = ({
+  title,
+  subtitle,
+  badge,
+  expandable = true,
+  open = false,
+  className,
+  titleClassName,
+  ...rest
+}: DetailsSummaryProps) => {
+  return (
+    <summary
+      className={clsx(
+        "py-docs_0.75 flex items-center justify-between",
+        expandable && "cursor-pointer",
+        !expandable &&
+          "border-medusa-border-base dark:border-medusa-border-base-dark border-y",
+        "no-marker",
+        className
+      )}
+      {...rest}
+    >
+      <span className="gap-docs_0.25 flex flex-col">
+        <span
+          className={clsx(
+            "text-compact-medium-plus text-medusa-fg-base dark:text-medusa-fg-base-dark",
+            titleClassName
+          )}
+        >
+          {title}
+        </span>
+        {subtitle && (
+          <span className="text-compact-medium text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark">
+            {subtitle}
+          </span>
+        )}
+      </span>
+      {(badge || expandable) && (
+        <span className="flex gap-docs_0.5">
+          {badge}
+          {expandable && (
+            <PlusMini
+              className={clsx("transition-transform", open && "rotate-45")}
+            />
+          )}
+        </span>
+      )}
+    </summary>
+  )
+}
@@ -0,0 +1,93 @@
+"use client"
+
+import React, { Suspense, cloneElement, useRef, useState } from "react"
+import { Loading } from "@/components/Loading"
+import clsx from "clsx"
+import { CSSTransition } from "react-transition-group"
+import { DetailsSummary } from "./Summary"
+
+export type DetailsProps = {
+  openInitial?: boolean
+  summaryContent?: React.ReactNode
+  summaryElm?: React.ReactNode
+} & React.HTMLAttributes<HTMLDetailsElement>
+
+export const Details = ({
+  openInitial = false,
+  summaryContent,
+  summaryElm,
+  children,
+  ...props
+}: DetailsProps) => {
+  const [open, setOpen] = useState(openInitial)
+  const [showContent, setShowContent] = useState(openInitial)
+  const ref = useRef<HTMLDetailsElement>(null)
+
+  const handleToggle = () => {
+    if (open) {
+      setShowContent(false)
+    } else {
+      setOpen(true)
+      setShowContent(true)
+    }
+  }
+
+  return (
+    <details
+      {...props}
+      ref={ref}
+      open={open}
+      onClick={(event) => {
+        event.preventDefault()
+      }}
+      onToggle={(event) => {
+        // this is to avoid event propagation
+        // when details are nested, which is a bug
+        // in react. Learn more here:
+        // https://github.com/facebook/react/issues/22718
+        event.stopPropagation()
+      }}
+      className={clsx(
+        "border-medusa-border-base dark:border-medusa-border-base-dark border-y border-solid border-x-0",
+        "overflow-hidden [&>summary]:relative [&>summary]:z-[398]",
+        props.className
+      )}
+    >
+      {summaryContent && (
+        <DetailsSummary
+          onClick={handleToggle}
+          className="cursor-pointer"
+          title={summaryContent}
+        />
+      )}
+      {summaryElm &&
+        cloneElement(summaryElm as React.ReactElement, {
+          open,
+          onClick: handleToggle,
+        })}
+      <CSSTransition
+        unmountOnExit
+        in={showContent}
+        timeout={150}
+        onEnter={(node: HTMLElement) => {
+          node.classList.add(
+            "!mb-docs_2",
+            "!mt-0",
+            "translate-y-docs_1",
+            "transition-transform"
+          )
+        }}
+        onExit={(node: HTMLElement) => {
+          node.classList.add("transition-transform", "!-translate-y-docs_1")
+          setTimeout(() => {
+            setOpen(false)
+          }, 100)
+        }}
+      >
+        <Suspense fallback={<Loading className="!mb-docs_2 !mt-0" />}>
+          {children}
+        </Suspense>
+      </CSSTransition>
+    </details>
+  )
+}