docs: refactor to use TypeScript, ESLint, and Tailwind CSS (#4136)

* docs(refactoring): configured eslint and typescript (#3511) * docs: configured eslint and typescript * fixed yarn.lock * docs(refactoring): migrate components directory to typescript (#3517) * docs: migrate components directory to typescript * removed vscode settings * fix following merge * docs: refactored QueryNote component (#3576) * docs: refactored first batch of theme components (#3579) * docs: refactored second batch of theme components (#3580) * added missing badge styles * fix after merge * docs(refactoring): migrated remaining component to TypeScript (#3770) * docs(refactoring): configured eslint and typescript (#3511) * docs: configured eslint and typescript * fixed yarn.lock * docs(refactoring): migrate components directory to typescript (#3517) * docs: migrate components directory to typescript * removed vscode settings * fix following merge * docs: refactored QueryNote component (#3576) * docs: refactored first batch of theme components (#3579) * docs: refactored second batch of theme components (#3580) * added missing badge styles * docs: refactoring second batch of theme components * fix after merge * refactored icons and other components * docs: refactored all components * docs(refactoring): set up and configured Tailwind Css (#3841) * docs: added tailwind config * docs: added more tailwind configurations * add includes option * added more tailwind configurations * fix to configurations * docs(refactoring): use tailwind css (#4134) * docs: added tailwind config * docs: added more tailwind configurations * add includes option * added more tailwind configurations * fix to configurations * docs(refactoring): refactored all styles to use tailwind css (#4132) * refactored Badge component to use tailwind css * refactored Bordered component to use tailwind css * updated to latest docusaurus * refactored BorderedIcon component to use tailwind css * refactored Feedback component to use tailwind css * refactored icons and footersociallinks to tailwind css * start refactoring of large card * refactored large card styling * refactored until admonitions * refactored until codeblock * refactored until Tabs * refactored Tabs (without testing * finished refactoring styles to tailwind css * upgraded to version 2.4.1 * general fixes * adjusted eslint configurations * fixed ignore files * fixes to large card * fix search styling * fix npx command * updated tabs to use isCodeTabs prop * fixed os tabs * removed os-tabs class in favor of general styling * improvements to buttons * fix for searchbar * fixed redocly download button * chore: added eslint code action (#4135) * small change in commerce modules page
2023-05-19 14:56:48 +03:00
parent 29a88bbf98
commit 94907730d2
292 changed files with 11721 additions and 42102 deletions
@@ -1,20 +0,0 @@
-import React from "react"
-import styles from "./styles.module.css"
-import clsx from "clsx"
-
-export default function Badge({ className, variant, children }) {
-  return (
-    <span
-      className={clsx(
-        styles.badge,
-        className,
-        variant === "purple" && styles.purpleBadge,
-        variant === "orange" && styles.orangeBadge,
-        variant === "green" && styles.greenBadge,
-        variant === "blue" && styles.blueBadge
-      )}
-    >
-      {children}
-    </span>
-  )
-}
@@ -0,0 +1,30 @@
+import React from "react"
+import clsx from "clsx"
+
+export type BadgeProps = {
+  className?: string
+  variant: string
+} & React.HTMLAttributes<HTMLSpanElement>
+
+const Badge: React.FC<BadgeProps> = ({ className, variant, children }) => {
+  return (
+    <span
+      className={clsx(
+        "tw-text-label-x-small-plus tw-py-px tw-px-0.4 tw-rounded tw-border tw-border-solid tw-text-center",
+        variant === "purple" &&
+          "tw-bg-medusa-tag-purple-bg dark:tw-bg-medusa-tag-purple-bg-dark tw-text-medusa-tag-purple-text dark:tw-text-medusa-tag-purple-text-dark tw-border-medusa-tag-purple-border dark:tw-border-medusa-tag-purple-border-dark",
+        variant === "orange" &&
+          "tw-bg-medusa-tag-orange-bg dark:tw-bg-medusa-tag-orange-bg-dark tw-text-medusa-tag-orange-text dark:tw-text-medusa-tag-orange-text-dark tw-border-medusa-tag-orange-border dark:tw-border-medusa-tag-orange-border-dark",
+        variant === "green" &&
+          "tw-bg-medusa-tag-green-bg dark:tw-bg-medusa-tag-green-bg-dark tw-text-medusa-tag-green-text dark:tw-text-medusa-tag-green-text-dark tw-border-medusa-tag-green-border dark:tw-border-medusa-tag-green-border-dark",
+        variant === "blue" &&
+          "tw-bg-medusa-tag-blue-bg dark:tw-bg-medusa-tag-blue-bg-dark tw-text-medusa-tag-blue-text dark:tw-text-medusa-tag-blue-text-dark tw-border-medusa-tag-blue-border dark:tw-border-medusa-tag-blue-border-dark",
+        className
+      )}
+    >
+      {children}
+    </span>
+  )
+}
+
+export default Badge
@@ -1,33 +0,0 @@
-.badge {
-  font-size: var(--medusa-label-x-small-plus-size);
-  line-height: var(--medusa-label-x-small-plus-line-height);
-  font-weight: var(--medusa-label-x-small-plus-font-weight);
-  padding: 1px 7px;
-  border-radius: var(--ifm-global-radius);
-  border: 1px solid;
-  text-align: center;
-}
-
-.purpleBadge {
-  background-color: var(--medusa-tag-purple-bg);
-  border-color: var(--medusa-tag-purple-border);
-  color: var(--medusa-tag-purple-text);
-}
-
-.orangeBadge {
-  background-color: var(--medusa-tag-orange-bg);
-  border-color: var(--medusa-tag-orange-border);
-  color: var(--medusa-tag-orange-text);
-}
-
-.greenBadge {
-  background-color: var(--medusa-tag-green-bg);
-  border-color: var(--medusa-tag-green-border);
-  color: var(--medusa-tag-green-text);
-}
-
-.blueBadge {
-  background-color: var(--medusa-tag-blue-bg);
-  border-color: var(--medusa-tag-blue-border);
-  color: var(--medusa-tag-blue-text);
-}