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/packages/docs-ui/src/components/Button/index.tsx
+++ b/www/packages/docs-ui/src/components/Button/index.tsx
@@ -0,0 +1,78 @@
+import clsx from "clsx"
+import React from "react"
+
+export type ButtonVariants = "primary" | "secondary" | "clear"
+
+export type ButtonType = "default" | "icon"
+
+export type ButtonProps = {
+  isSelected?: boolean
+  disabled?: boolean
+  variant?: ButtonVariants
+  className?: string
+  buttonType?: ButtonType
+  buttonRef?: React.LegacyRef<HTMLButtonElement>
+} & React.HTMLAttributes<HTMLButtonElement>
+
+export const Button = ({
+  className,
+  children,
+  variant = "primary",
+  buttonType = "default",
+  buttonRef,
+  ...props
+}: ButtonProps) => {
+  const variantClasses = {
+    primary: [
+      "inline-flex flex-row justify-center items-center",
+      "py-[5px] px-docs_0.75 rounded-docs_sm cursor-pointer",
+      "bg-button-inverted bg-medusa-button-inverted dark:bg-button-inverted-dark dark:bg-medusa-button-inverted-dark",
+      "hover:bg-medusa-button-inverted-hover hover:bg-no-image dark:hover:bg-medusa-button-inverted-hover-dark hover:no-underline",
+      "active:bg-medusa-button-inverted-pressed active:bg-no-image dark:active:bg-medusa-button-inverted-pressed-dark",
+      "focus:bg-medusa-button-inverted-pressed focus:bg-no-image dark:focus:bg-medusa-button-inverted-pressed-dark",
+      "shadow-button-colored active:shadow-button-colored-focused focus:shadow-button-colored-focused transition-shadow",
+      "dark:shadow-button-colored-dark dark:active:shadow-button-colored-focused-dark dark:focus:shadow-button-colored-focused-dark",
+      "disabled:!bg-no-image disabled:bg-medusa-bg-disabled dark:disabled:bg-medusa-bg-disabled-dark",
+      "disabled:cursor-not-allowed disabled:border-medusa-border-base dark:disabled:border-medusa-border-base-dark",
+      "text-compact-small-plus text-medusa-fg-on-inverted dark:text-medusa-fg-on-inverted-dark",
+      "[&_a]:text-medusa-fg-on-inverted dark:[&_a]:text-medusa-fg-on-inverted-dark",
+      "disabled:text-medusa-fg-disabled dark:disabled:text-medusa-fg-disabled-dark",
+      "[&_a]:disabled:text-medusa-fg-disabled dark:[&_a]:disabled:text-medusa-fg-disabled-dark",
+      "border border-medusa-border-loud dark:border-medusa-border-loud-dark",
+      "select-none",
+    ],
+    secondary: [
+      "inline-flex flex-row justify-center items-center",
+      "py-[5px] px-docs_0.75 rounded-docs_sm cursor-pointer",
+      "bg-button-neutral bg-medusa-button-neutral dark:bg-button-neutral-dark dark:bg-medusa-button-neutral-dark",
+      "hover:bg-medusa-button-neutral-hover hover:bg-no-image dark:hover:bg-medusa-button-neutral-hover-dark hover:no-underline",
+      "active:bg-medusa-button-neutral-pressed active:bg-no-image dark:active:bg-medusa-button-neutral-pressed-dark",
+      "focus:bg-medusa-button-neutral-pressed focus:bg-no-image dark:focus:bg-medusa-button-neutral-pressed-dark",
+      "disabled:!bg-no-image disabled:bg-medusa-bg-disabled dark:disabled:bg-medusa-bg-disabled-dark",
+      "disabled:cursor-not-allowed",
+      "border border-solid border-medusa-border-base dark:border-medusa-border-base-dark",
+      "text-compact-small-plus text-medusa-fg-base dark:text-medusa-fg-base-dark",
+      "[&_a]:text-medusa-fg-base dark:[&_a]:text-medusa-fg-base-dark",
+      "shadow-button-neutral focus:shadow-button-neutral-focused active:shadow-button-neutral-focused transition-shadow",
+      "dark:shadow-button-neutral dark:focus:shadow-button-neutral-focused dark:active:shadow-button-neutral-focused",
+      "select-none",
+    ],
+    clear: ["bg-transparent shadow-none border-0 outline-none cursor-pointer"],
+  }
+
+  return (
+    <button
+      className={clsx(
+        variant === "primary" && variantClasses.primary,
+        variant === "secondary" && variantClasses.secondary,
+        variant === "clear" && variantClasses.clear,
+        buttonType === "icon" && "!px-docs_0.25",
+        className
+      )}
+      ref={buttonRef}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}