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
--- a/www/docs/src/components/BorderedIcon/index.js
+++ b/www/docs/src/components/BorderedIcon/index.js
@@ -1,21 +0,0 @@
-import React from "react"
-import ThemedImage from '@theme/ThemedImage'
-import clsx from 'clsx'
-import styles from './styles.module.css'
-import Bordered from "../Bordered"
-
-export default function BorderedIcon ({ icon = null, IconComponent = null, wrapperClassName, iconWrapperClassName, iconClassName }) {
-  return (
-    <Bordered wrapperClassName={wrapperClassName}>
-      <span className={clsx(styles.borderedIconWrapper, iconWrapperClassName)}>
-        {!IconComponent && (
-          <ThemedImage sources={{
-            light: icon.light,
-            dark: icon.dark || icon.light
-          }} className={clsx(styles.icon, iconClassName, 'bordered-icon')} />
-        )}
-        {IconComponent && <IconComponent className={clsx(styles.icon, iconClassName, 'bordered-icon')} />}
-      </span>
-    </Bordered>
-  )
-}
--- a/www/docs/src/components/BorderedIcon/index.tsx
+++ b/www/docs/src/components/BorderedIcon/index.tsx
@@ -0,0 +1,55 @@
+import React from "react"
+import ThemedImage from "@theme/ThemedImage"
+import clsx from "clsx"
+import Bordered from "../Bordered/index"
+import { IconProps } from "@site/src/theme/Icon/index"
+
+type BorderedIconProp = {
+  icon?: {
+    light: string
+    dark?: string
+  }
+  IconComponent?: React.FC<IconProps>
+  wrapperClassName?: string
+  iconWrapperClassName?: string
+  iconClassName?: string
+  iconColorClassName?: string
+} & React.HTMLAttributes<HTMLSpanElement>
+
+const BorderedIcon: React.FC<BorderedIconProp> = ({
+  icon = null,
+  IconComponent = null,
+  wrapperClassName,
+  iconWrapperClassName,
+  iconClassName,
+  iconColorClassName = "",
+}) => {
+  return (
+    <Bordered wrapperClassName={wrapperClassName}>
+      <span
+        className={clsx(
+          "tw-inline-flex tw-justify-center tw-items-center tw-rounded-sm tw-p-[2px] tw-bg-medusa-bg-component dark:tw-bg-medusa-bg-component-dark",
+          iconWrapperClassName
+        )}
+      >
+        {!IconComponent && (
+          <ThemedImage
+            sources={{
+              light: icon.light,
+              dark: icon.dark || icon.light,
+            }}
+            className={clsx(iconClassName, "bordered-icon")}
+          />
+        )}
+        {IconComponent && (
+          <IconComponent
+            className={clsx(iconClassName, "bordered-icon")}
+            iconColorClassName={iconColorClassName}
+          />
+        )}
+      </span>
+    </Bordered>
+  )
+}
+
+export default BorderedIcon
--- a/www/docs/src/components/BorderedIcon/styles.module.css
+++ b/www/docs/src/components/BorderedIcon/styles.module.css
@@ -1,8 +0,0 @@
-.borderedIconWrapper {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: calc(var(--ifm-global-radius) / 2);
-  padding: var(--bordered-inside-padding);
-  background-color: var(--medusa-bg-component);
-}