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
--- a/www/apps/docs/src/components/CloudinaryImage/index.tsx
+++ b/www/apps/docs/src/components/CloudinaryImage/index.tsx
@@ -0,0 +1,106 @@
+import React from "react"
+import { useThemeConfig } from "@docusaurus/theme-common"
+// @ts-expect-error: wait until docusaurus uses type: module
+import { Cloudinary } from "@cloudinary/url-gen"
+import MDXImg, { Props as MDXImgProps } from "@theme/MDXComponents/Img"
+import {
+  pad,
+  imaggaScale,
+  imaggaCrop,
+  crop,
+  fit,
+  minimumPad,
+  fill,
+  scale,
+  limitFit,
+  thumbnail,
+  limitFill,
+  minimumFit,
+  limitPad,
+  fillPad,
+} from "@cloudinary/url-gen/actions/resize"
+import { byRadius } from "@cloudinary/url-gen/actions/roundCorners"
+import { ThemeConfig } from "@medusajs/docs"
+
+const resizeActions = {
+  pad: pad,
+  imaggaScale: imaggaScale,
+  imaggaCrop: imaggaCrop,
+  crop: crop,
+  fit: fit,
+  minimumPad: minimumPad,
+  fill: fill,
+  scale: scale,
+  limitFit: limitFit,
+  thumbnail: thumbnail,
+  limitFill: limitFill,
+  minimumFit: minimumFit,
+  limitPad: limitPad,
+  fillPad: fillPad,
+}
+
+const imageRegex =
+  /^https:\/\/res.cloudinary.com\/.*\/upload\/v[0-9]+\/(?<imageId>.*)$/
+
+type CloudinaryImageProps = MDXImgProps
+
+const CloudinaryImage: React.FC<CloudinaryImageProps> = ({ src, ...props }) => {
+  const { cloudinaryConfig } = useThemeConfig() as ThemeConfig
+  const matchingRegex = src.match(imageRegex)
+  if (
+    !cloudinaryConfig ||
+    !matchingRegex?.groups ||
+    !matchingRegex.groups.imageId
+  ) {
+    // either cloudinary isn't configured or
+    // could not match url to a cloudinary url
+    // default to docusaurus's image component
+    return <MDXImg src={src} {...props} />
+  }
+
+  const cloudinary = new Cloudinary({
+    cloud: {
+      cloudName: cloudinaryConfig.cloudName,
+    },
+  })
+  const image = cloudinary.image(
+    matchingRegex.groups.imageId.replaceAll("%20", " ")
+  )
+
+  cloudinaryConfig.flags?.forEach((flag) => image.addTransformation(flag))
+
+  if (cloudinaryConfig.roundCorners) {
+    image.roundCorners(byRadius(cloudinaryConfig.roundCorners))
+  }
+  if (cloudinaryConfig.resize) {
+    const action = resizeActions[cloudinaryConfig.resize.action]
+    let resizeAction = action()
+    if (props.width || props.height) {
+      if (props.width) {
+        resizeAction = resizeAction.width(props.width)
+      }
+
+      if (props.height) {
+        resizeAction = resizeAction.height(props.height)
+      }
+    } else if (cloudinaryConfig.resize.aspectRatio) {
+      resizeAction = resizeAction.aspectRatio(
+        cloudinaryConfig.resize.aspectRatio
+      )
+    } else {
+      if (cloudinaryConfig.resize.width) {
+        resizeAction = resizeAction.width(cloudinaryConfig.resize.width)
+      }
+
+      if (cloudinaryConfig.resize.height) {
+        resizeAction = resizeAction.height(cloudinaryConfig.resize.height)
+      }
+    }
+
+    image.resize(resizeAction)
+  }
+
+  return <MDXImg {...props} src={image.toURL()} />
+}
+
+export default CloudinaryImage