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
This commit is contained in:
Shahed Nasser
GitHub
@@ -1,36 +0,0 @@
|
||||
import React from 'react';
|
||||
import IconReport from '../../Icon/Report';
|
||||
import Tooltip from '../../Tooltip';
|
||||
|
||||
export default function NavbarActions ({items = []}) {
|
||||
|
||||
function findIcon (icon) {
|
||||
switch(icon) {
|
||||
case 'report':
|
||||
return <IconReport />
|
||||
default:
|
||||
return <></>
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='navbar-actions'>
|
||||
{items.map((item, index) => {
|
||||
switch(item.type) {
|
||||
case 'link':
|
||||
return (
|
||||
<Tooltip text='Report an issue' key={index}>
|
||||
<a href={item.href} title={item.title}
|
||||
className={`navbar-action ${item.icon ? 'navbar-link-icon' : ''} ${item.className || ''}`}>
|
||||
{item.label}
|
||||
{item.icon && findIcon(item.icon)}
|
||||
</a>
|
||||
</Tooltip>
|
||||
)
|
||||
default:
|
||||
return (<></>)
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
import React from 'react';
|
||||
import {useThemeConfig} from '@docusaurus/theme-common';
|
||||
import {
|
||||
splitNavbarItems,
|
||||
useNavbarMobileSidebar,
|
||||
} from '@docusaurus/theme-common/internal';
|
||||
import NavbarItem from '@theme/NavbarItem';
|
||||
import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
|
||||
import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
|
||||
import NavbarLogo from '@theme/Navbar/Logo';
|
||||
import styles from './styles.module.css';
|
||||
import {useWindowSize} from '@docusaurus/theme-common';
|
||||
import NavbarActions from '../Actions';
|
||||
import Tooltip from '../../Tooltip';
|
||||
|
||||
function useNavbarItems() {
|
||||
// TODO temporary casting until ThemeConfig type is improved
|
||||
return useThemeConfig().navbar.items;
|
||||
}
|
||||
function NavbarItems({items}) {
|
||||
return (
|
||||
<>
|
||||
{items.map((item, i) => (
|
||||
<NavbarItem {...item} key={i} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
function NavbarContentLayout({left, right}) {
|
||||
return (
|
||||
<div className="navbar__inner">
|
||||
<div className="navbar__items">{left}</div>
|
||||
<div className="navbar__items navbar__items--right">{right}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default function NavbarContent() {
|
||||
const mobileSidebar = useNavbarMobileSidebar();
|
||||
const items = useNavbarItems();
|
||||
const [leftItems, rightItems] = splitNavbarItems(items);
|
||||
const { navbarActions } = useThemeConfig()
|
||||
|
||||
return (
|
||||
<NavbarContentLayout
|
||||
left={
|
||||
// TODO stop hardcoding items?
|
||||
<>
|
||||
{!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
|
||||
<NavbarLogo />
|
||||
<NavbarItems items={leftItems} />
|
||||
</>
|
||||
}
|
||||
right={
|
||||
// TODO stop hardcoding items?
|
||||
// Ask the user to add the respective navbar items => more flexible
|
||||
<>
|
||||
<NavbarItems items={rightItems} />
|
||||
<span className='divider'></span>
|
||||
<Tooltip text='Switch theme'>
|
||||
<NavbarColorModeToggle className={styles.colorModeToggle} />
|
||||
</Tooltip>
|
||||
<NavbarActions items={navbarActions} />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
import React, { type ReactNode } from "react"
|
||||
import { useThemeConfig } from "@docusaurus/theme-common"
|
||||
import {
|
||||
splitNavbarItems,
|
||||
useNavbarMobileSidebar,
|
||||
} from "@docusaurus/theme-common/internal"
|
||||
import NavbarItem, { type Props as NavbarItemConfig } from "@theme/NavbarItem"
|
||||
import NavbarColorModeToggle from "@theme/Navbar/ColorModeToggle"
|
||||
import NavbarMobileSidebarToggle from "@theme/Navbar/MobileSidebar/Toggle"
|
||||
import NavbarLogo from "@theme/Navbar/Logo"
|
||||
import NavbarActions from "@site/src/components/Navbar/Actions"
|
||||
import Tooltip from "@site/src/components/Tooltip"
|
||||
import { ThemeConfig } from "@medusajs/docs"
|
||||
import clsx from "clsx"
|
||||
|
||||
function useNavbarItems() {
|
||||
// TODO temporary casting until ThemeConfig type is improved
|
||||
return useThemeConfig().navbar.items as NavbarItemConfig[]
|
||||
}
|
||||
|
||||
function NavbarItems({ items }: { items: NavbarItemConfig[] }): JSX.Element {
|
||||
return (
|
||||
<>
|
||||
{items.map((item, i) => (
|
||||
<NavbarItem {...item} key={i} />
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function NavbarContentLayout({
|
||||
left,
|
||||
right,
|
||||
}: {
|
||||
left: ReactNode
|
||||
right: ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
"tw-flex tw-flex-wrap tw-justify-between tw-w-full",
|
||||
"tw-max-w-xl tw-mx-auto tw-py-[12px] tw-px-1.5"
|
||||
)}
|
||||
>
|
||||
<div className={clsx("tw-items-center tw-flex tw-flex-1 tw-min-w-0")}>
|
||||
{left}
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
"tw-items-center tw-flex tw-flex-1 tw-min-w-0",
|
||||
"tw-justify-end"
|
||||
)}
|
||||
>
|
||||
{right}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function NavbarContent(): JSX.Element {
|
||||
const mobileSidebar = useNavbarMobileSidebar()
|
||||
|
||||
const items = useNavbarItems()
|
||||
const [leftItems, rightItems] = splitNavbarItems(items)
|
||||
const { navbarActions } = useThemeConfig() as ThemeConfig
|
||||
|
||||
return (
|
||||
<NavbarContentLayout
|
||||
left={
|
||||
// TODO stop hardcoding items?
|
||||
<>
|
||||
{!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
|
||||
<NavbarLogo />
|
||||
<NavbarItems items={leftItems} />
|
||||
</>
|
||||
}
|
||||
right={
|
||||
// TODO stop hardcoding items?
|
||||
// Ask the user to add the respective navbar items => more flexible
|
||||
<>
|
||||
<NavbarItems items={rightItems} />
|
||||
<span
|
||||
className={clsx(
|
||||
"lg:tw-h-[20px] lg:tw-w-[1px] lg:tw-mx-1 lg:tw-inline-block lg:tw-align-middle lg:tw-bg-medusa-border-strong lg:dark:tw-bg-medusa-border-strong-dark"
|
||||
)}
|
||||
></span>
|
||||
<Tooltip text="Switch theme">
|
||||
<NavbarColorModeToggle
|
||||
className={clsx(
|
||||
"lg:tw-block tw-hidden",
|
||||
"tw-bg-medusa-button-secondary dark:tw-bg-medusa-button-secondary-dark",
|
||||
"tw-border tw-border-solid tw-border-medusa-border-base dark:tw-border-medusa-border-base-dark",
|
||||
"tw-rounded !tw-w-2 !tw-h-2 tw-ml-1 tw-mr-[12px] [&>button]:!tw-rounded"
|
||||
)}
|
||||
/>
|
||||
</Tooltip>
|
||||
<NavbarActions items={navbarActions} />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
/*
|
||||
Hide color mode toggle in small viewports
|
||||
*/
|
||||
@media (max-width: 996px) {
|
||||
.colorModeToggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
import React from 'react';
|
||||
import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
|
||||
import IconClose from '@theme/Icon/Close';
|
||||
import NavbarLogo from '@theme/Navbar/Logo';
|
||||
import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
|
||||
function CloseButton() {
|
||||
const mobileSidebar = useNavbarMobileSidebar();
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="clean-btn navbar-sidebar__close"
|
||||
onClick={() => mobileSidebar.toggle()}>
|
||||
<IconClose color="var(--ifm-color-emphasis-600)" />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
export default function NavbarMobileSidebarHeader() {
|
||||
return (
|
||||
<div className="navbar-sidebar__brand">
|
||||
<NavbarLogo />
|
||||
<NavbarColorModeToggle className='mobile' />
|
||||
<CloseButton />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import React from "react"
|
||||
import { useNavbarMobileSidebar } from "@docusaurus/theme-common/internal"
|
||||
import NavbarColorModeToggle from "@theme/Navbar/ColorModeToggle"
|
||||
import IconClose from "@theme/Icon/Close"
|
||||
import NavbarLogo from "@theme/Navbar/Logo"
|
||||
import clsx from "clsx"
|
||||
|
||||
function CloseButton() {
|
||||
const mobileSidebar = useNavbarMobileSidebar()
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={clsx(
|
||||
"tw-bg-transparent tw-border-0 tw-text-inherit tw-cursor-pointer tw-p-0",
|
||||
"tw-flex tw-ml-auto"
|
||||
)}
|
||||
onClick={() => mobileSidebar.toggle()}
|
||||
>
|
||||
<IconClose color="var(--ifm-color-emphasis-600)" />
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export default function NavbarMobileSidebarHeader(): JSX.Element {
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
"tw-items-center tw-shadow-navbar dark:tw-shadow-navbar-dark",
|
||||
"tw-flex tw-flex-1 tw-h-navbar tw-py-[12px] tw-px-1.5"
|
||||
)}
|
||||
>
|
||||
<NavbarLogo />
|
||||
<NavbarColorModeToggle
|
||||
className={clsx(
|
||||
"[&>button]:hover:tw-bg-medusa-button-secondary-hover dark:[&>button]:hover:tw-bg-medusa-button-secondary-hover-dark",
|
||||
"[&>button]:!tw-rounded"
|
||||
)}
|
||||
/>
|
||||
<CloseButton />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
import React from 'react';
|
||||
import {useThemeConfig} from '@docusaurus/theme-common';
|
||||
import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
|
||||
import NavbarItem from '@theme/NavbarItem';
|
||||
function useNavbarItems() {
|
||||
// TODO temporary casting until ThemeConfig type is improved
|
||||
return useThemeConfig().navbar.items;
|
||||
}
|
||||
// The primary menu displays the navbar items
|
||||
export default function NavbarMobilePrimaryMenu() {
|
||||
const mobileSidebar = useNavbarMobileSidebar();
|
||||
// TODO how can the order be defined for mobile?
|
||||
// Should we allow providing a different list of items?
|
||||
const items = useNavbarItems();
|
||||
return (
|
||||
<ul className="menu__list">
|
||||
{items.map((item, i) => (
|
||||
<NavbarItem
|
||||
mobile
|
||||
{...item}
|
||||
onClick={() => mobileSidebar.toggle()}
|
||||
key={i}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user