From 035fbd465a11e8fc2626097ccd15b3865a4683c7 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Wed, 6 Nov 2024 19:26:13 +0100 Subject: [PATCH] Code review fixes --- packages/components/package.json | 5 +- .../src/components/marketplace-list.tsx | 27 +++-------- .../src/components/marketplace-search.css | 47 ------------------- .../src/components/marketplace-search.tsx | 9 ++-- packages/components/style.css | 2 - packages/remark-mermaid/package.json | 2 +- packages/remark-npm2yarn/package.json | 2 +- pnpm-lock.yaml | 30 ++++++------ 8 files changed, 33 insertions(+), 91 deletions(-) diff --git a/packages/components/package.json b/packages/components/package.json index a2976aadc..e7e1a7dd5 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -59,6 +59,7 @@ }, "peerDependencies": { "@tailwindcss/container-queries": "^0.1.1", + "@theguild/tailwind-config": "0.5.0", "next": "^13 || ^14 || ^15.0.0", "react": "^18.2.0", "react-dom": "^18.2.0" @@ -67,11 +68,10 @@ "@giscus/react": "3.0.0", "@next/bundle-analyzer": "15.0.2", "@radix-ui/react-navigation-menu": "^1.2.0", - "@theguild/tailwind-config": "0.5.0", "clsx": "2.1.1", "fuzzy": "0.1.3", "next-videos": "1.5.0", - "nextra": "3.2.0", + "nextra": "3.2.3", "nextra-theme-docs": "3.2.0", "react-paginate": "8.2.0", "react-player": "2.16.0", @@ -82,6 +82,7 @@ "devDependencies": { "@svgr/babel-plugin-remove-jsx-attribute": "^8.0.0", "@theguild/editor": "workspace:*", + "@theguild/tailwind-config": "0.5.0", "@types/dedent": "0.7.2", "@types/react": "18.3.12", "@types/react-dom": "18.3.1", diff --git a/packages/components/src/components/marketplace-list.tsx b/packages/components/src/components/marketplace-list.tsx index 5c4c4c80f..131a93d61 100644 --- a/packages/components/src/components/marketplace-list.tsx +++ b/packages/components/src/components/marketplace-list.tsx @@ -188,31 +188,18 @@ export function MarketplaceListItem({ item, ...rest }: MarketplaceListItemProps) function moveFocusOnArrowKeys(event: React.KeyboardEvent, columns: number) { let listItem: Element | null | undefined; - let move: 'left' | 'right' | 'down' | 'up' | undefined; - - switch (event.key) { - case 'ArrowDown': - move = 'down'; - break; - case 'ArrowUp': - move = 'up'; - break; - case 'ArrowRight': - move = 'right'; - break; - case 'ArrowLeft': - move = 'left'; - break; - } + const move = ({ ArrowDown: '⬇', ArrowUp: '⬆', ArrowRight: '➡️', ArrowLeft: '⬅️' } as const)[ + event.key + ]; if (!move) return; - if (move === 'left') { + if (move === '⬅️') { const parent = event.currentTarget.parentElement; if (parent) { listItem = parent.previousElementSibling; } - } else if (move === 'right') { + } else if (move === '➡️') { const parent = event.currentTarget.parentElement; if (parent) { listItem = parent.nextElementSibling; @@ -221,10 +208,10 @@ function moveFocusOnArrowKeys(event: React.KeyboardEvent, col listItem = event.currentTarget.parentElement; while (columns > 0 && listItem) { - if (move === 'up') { + if (move === '⬆') { columns--; listItem = listItem.previousElementSibling; - } else if (move === 'down') { + } else if (move === '⬇') { columns--; listItem = listItem.nextElementSibling; } diff --git a/packages/components/src/components/marketplace-search.css b/packages/components/src/components/marketplace-search.css index 9a2c04f7d..2156d8e61 100644 --- a/packages/components/src/components/marketplace-search.css +++ b/packages/components/src/components/marketplace-search.css @@ -17,50 +17,3 @@ } } } - -/* nextra Tabs don't accept className props */ -.MarketplaceSearchTabs [role='tablist'] { - @apply grid grid-cols-2 gap-1 rounded-2xl border-none bg-neutral-800 [&.green]:bg-green-900; - - /* dark mode prefix interfers with css modules */ - .light & { - @apply bg-neutral-100; - } - - .green & { - @apply bg-green-900; - } - - & button { - @apply rounded-2xl border-none p-3 text-sm font-medium text-neutral-200 sm:p-4 sm:text-base; - - .light & { - @apply bg-neutral-100 text-neutral-800; - } - - .green & { - @apply bg-green-900 text-green-200; - } - - &:hover { - @apply bg-neutral-700/50 text-white; - - .light & { - @apply bg-neutral-200/80 text-neutral-900; - } - - .green & { - @apply bg-green-700/25 text-green-100; - } - } - - &[aria-selected='true'], - &[aria-selected='true']:hover { - @apply cursor-default bg-[--fg] text-[--bg]; - - .green & { - @apply bg-green-300 text-green-800; - } - } - } -} diff --git a/packages/components/src/components/marketplace-search.tsx b/packages/components/src/components/marketplace-search.tsx index 95d0a6a7a..d4a3a8f2e 100644 --- a/packages/components/src/components/marketplace-search.tsx +++ b/packages/components/src/components/marketplace-search.tsx @@ -16,7 +16,6 @@ import './marketplace-search.css'; */ const classes = { marketplace: 'MarketplaceSearch', - tabs: 'MarketplaceSearchTabs', }; const renderQueryPlaceholder = (placeholder: string | ReactElement, query: string) => { @@ -175,8 +174,12 @@ function MarketplaceSearchTabs({ ); return ( -
- list.title)}> +
+ list.title)} + className="grid grid-cols-2 gap-1 rounded-2xl border-none bg-neutral-800 [.green_&]:bg-green-900 [.light_&]:text-green-200" + tabClassName="rounded-2xl border-none p-3 text-sm font-medium text-neutral-200 hover:bg-neutral-700/50 hover:text-white aria-selected:cursor-default aria-selected:bg-[--fg] aria-selected:text-[--bg] sm:p-4 sm:text-base [.green_&]:bg-green-900 [.green_&]:text-green-200 [.green_&]:hover:bg-green-700/25 [.green_&]:hover:text-green-100 [.green_&]:aria-selected:bg-green-300 [.green_&]:aria-selected:text-green-800 [.light_&]:bg-neutral-100 [.light_&]:text-neutral-800 [.light_&]:hover:bg-neutral-200/80 [.light_&]:hover:text-neutral-900" + > {items.map((list, i) => ( =16.13.1' react-dom: '>=16.13.1' - nextra@3.2.0: - resolution: {integrity: sha512-Gi+Q6BI9rFmQdy3e4FXCqgaSUcv8CGRVOVWbgY6/GTAWKMKK4v5M1gxYNhxdOywSkIoXrxSeXbIaj0qgNdjv3A==} + nextra@3.2.3: + resolution: {integrity: sha512-MyNA2kPvDyJK1trjFkwpTdMOKJu/MIueENHtmLoxPnyOi3fxtk9H5k6b5WdMGBibsyFeXqTz9REnz7d1/xL9Hg==} engines: {node: '>=18'} peerDependencies: next: '>=13' @@ -16450,7 +16450,7 @@ snapshots: scroll-into-view-if-needed: 3.1.0 zod: 3.23.8 - nextra-theme-docs@3.2.0(next@15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(nextra@3.2.0(@types/react@18.3.12)(acorn@8.14.0)(next@15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + nextra-theme-docs@3.2.0(next@15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(nextra@3.2.3(@types/react@18.3.12)(acorn@8.14.0)(next@15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: '@headlessui/react': 2.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) clsx: 2.1.1 @@ -16458,7 +16458,7 @@ snapshots: flexsearch: 0.7.43 next: 15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) next-themes: 0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - nextra: 3.2.0(@types/react@18.3.12)(acorn@8.14.0)(next@15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3) + nextra: 3.2.3(@types/react@18.3.12)(acorn@8.14.0)(next@15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) scroll-into-view-if-needed: 3.1.0 @@ -16508,7 +16508,7 @@ snapshots: - supports-color - typescript - nextra@3.2.0(@types/react@18.3.12)(acorn@8.14.0)(next@15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3): + nextra@3.2.3(@types/react@18.3.12)(acorn@8.14.0)(next@15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3): dependencies: '@formatjs/intl-localematcher': 0.5.7 '@headlessui/react': 2.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)