npm2yarn: add tab for bun package manager

.changeset/@theguild_components-1247-dependencies.md

@@ -0,0 +1,6 @@
+---
+"@theguild/components": patch
+---
+dependencies updates:
+  - Updated dependency [`nextra@2.12.3` ↗︎](https://www.npmjs.com/package/nextra/v/2.12.3) (from `2.9.0`, in `dependencies`)
+  - Updated dependency [`nextra-theme-docs@2.12.3` ↗︎](https://www.npmjs.com/package/nextra-theme-docs/v/2.12.3) (from `2.9.0`, in `dependencies`)

.changeset/@theguild_remark-npm2yarn-1247-dependencies.md

@@ -0,0 +1,5 @@
+---
+"@theguild/remark-npm2yarn": patch
+---
+dependencies updates:
+  - Updated dependency [`npm-to-yarn@^2.1.0` ↗︎](https://www.npmjs.com/package/npm-to-yarn/v/2.1.0) (from `^2.0.0`, in `dependencies`)

.changeset/rich-pans-sin.md

@@ -0,0 +1,5 @@
+---
+'@theguild/remark-npm2yarn': minor
+---
+
+add tab for `bun` package manager

package.json

@@ -8,7 +8,7 @@
   },
   "scripts": {
     "build": "turbo run build",
-    "build-storybook": "storybook build",
+    "build-storybook": "pnpm --filter @theguild/remark-mermaid build && storybook build",
     "build:css": "NODE_ENV=production tailwindcss --config tailwind.config.cjs --postcss --output packages/components/style.css",
     "dev": "turbo run dev --parallel",
     "lint": "eslint --cache --ignore-path .gitignore .",
@@ -18,9 +18,7 @@
     "prettier": "pnpm lint:prettier --write",
     "release": "changeset publish",
     "start": "storybook dev --port 4000",
-    "test": "vitest .",
-    "type-check": "tsc",
-    "type-check:watch": "tsc --watch"
+    "test": "vitest ."
   },
   "devDependencies": {
     "@algolia/autocomplete-theme-classic": "1.11.0",
@@ -33,7 +31,6 @@
     "@storybook/mdx2-csf": "1.1.0",
     "@storybook/react-webpack5": "7.0.0-beta.11",
     "@svgr/webpack": "8.0.1",
-    "@tailwindcss/line-clamp": "0.4.4",
     "@theguild/eslint-config": "0.11.0",
     "@theguild/prettier-config": "1.2.0",
     "@theguild/tailwind-config": "0.3.0",
@@ -85,5 +82,11 @@
       "pretty-quick --staged",
       "eslint"
     ]
+  },
+  "pnpm": {
+    "overrides": {
+      "@theguild/remark-npm2yarn": "workspace:*",
+      "@theguild/remark-mermaid": "workspace:*"
+    }
   }
 }

packages/components/package.json

@@ -65,14 +65,13 @@
     "@giscus/react": "2.3.0",
     "@next/bundle-analyzer": "13.4.2",
     "@radix-ui/react-navigation-menu": "1.1.3",
-    "@theguild/remark-npm2yarn": "workspace:*",
     "algoliasearch": "4.19.1",
     "clsx": "2.0.0",
     "focus-trap-react": "10.2.1",
     "fuzzy": "^0.1.3",
     "next-videos": "1.5.0",
-    "nextra": "2.9.0",
-    "nextra-theme-docs": "2.9.0",
+    "nextra": "2.12.3",
+    "nextra-theme-docs": "2.12.3",
     "react-instantsearch-dom": "6.40.4",
     "react-paginate": "8.2.0",
     "react-player": "2.12.0",

packages/components/src/components/legacy-package-cmd.tsx

@@ -2,7 +2,7 @@ import { ReactElement, useMemo } from 'react';
 import { Tab, Tabs } from 'nextra-theme-docs';
 import { Pre } from 'nextra/components';
 
-const PACKAGE_MANAGERS = ['yarn', 'npm', 'pnpm'] as const;
+const PACKAGE_MANAGERS = ['yarn', 'npm', 'pnpm'];
 
 type PackageMap = Record<(typeof PACKAGE_MANAGERS)[number], string>;
 

packages/components/src/components/marketplace-list.tsx

@@ -44,7 +44,7 @@ const TableBody = ({ items = [] }: IMarketplaceItemsProps): ReactElement => (
               item.link.className,
             )}
           >
-            <h3 className="m-0 text-base font-bold text-black line-clamp-2 dark:text-white md:text-lg">
+            <h3 className="m-0 line-clamp-2 text-base font-bold text-black dark:text-white md:text-lg">
               {item.title}
             </h3>
             <div className="line-clamp-3">{item.description}</div>

packages/components/src/next.config.ts

@@ -3,7 +3,6 @@ import withVideos from 'next-videos';
 import nextra from 'nextra';
 import remarkMdxDisableExplicitJsx from 'remark-mdx-disable-explicit-jsx';
 import nextBundleAnalyzer from '@next/bundle-analyzer';
-import { remarkNpm2Yarn } from '@theguild/remark-npm2yarn';
 import { applyUnderscoreRedirects } from './underscore-redirects';
 
 export const defaultRemarkPlugins = [
@@ -12,14 +11,6 @@ export const defaultRemarkPlugins = [
     remarkMdxDisableExplicitJsx,
     { whiteList: ['iframe', 'video', 'source'] },
   ],
-  [
-    remarkNpm2Yarn,
-    {
-      packageName: '@theguild/components',
-      tabNamesProp: 'items',
-      storageKey: 'selectedPackageManager',
-    },
-  ],
 ] as any;
 
 export const withGuildDocs = ({
@@ -55,8 +46,6 @@ export const withGuildDocs = ({
       withNextra({
         reactStrictMode: true,
         poweredByHeader: false,
-        // TODO: Enable after https://github.com/vercel/next.js/issues/40750 will be fixed
-        // swcMinify: true,
         basePath: process.env.NEXT_BASE_PATH,
         ...nextConfig,
         env: {
@@ -70,7 +59,6 @@ export const withGuildDocs = ({
         experimental: {
           // TODO: Provoke white flash ⚪️💥 on initial loading with dark theme
           // optimizeCss: true,
-          newNextLinkBehavior: true,
           ...nextConfig.experimental,
         },
         images: {

packages/remark-mermaid/src/index.ts

@@ -22,10 +22,7 @@ const MERMAID_IMPORT_AST = {
               local: { type: 'Identifier', name: COMPONENT_NAME },
             },
           ],
-          source: {
-            type: 'Literal',
-            value: COMPONENT_PATH,
-          },
+          source: { type: 'Literal', value: COMPONENT_PATH },
         },
       ],
     },
@@ -52,9 +49,7 @@ const getMermaidElementAST = (value: string) => ({
                   quasis: [
                     {
                       type: 'TemplateElement',
-                      value: {
-                        raw: value,
-                      },
+                      value: { raw: value },
                     },
                   ],
                 },

packages/remark-npm2yarn/__tests__/__snapshots__/plugin.test.ts.snap

@@ -13,7 +13,7 @@ function _createMdxContent(props) {
   if (!$Tab) _missingMdxReference(\\"$Tab\\", true);
   if (!$Tabs) _missingMdxReference(\\"$Tabs\\", true);
   return _jsxs($Tabs, {
-    items: [\\"npm\\", \\"pnpm\\", \\"yarn\\"],
+    items: [\\"npm\\", \\"pnpm\\", \\"yarn\\", \\"bun\\"],
     storageKey: \\"testKey\\",
     children: [_jsx($Tab, {
       children: _jsx(_components.pre, {
@@ -162,6 +162,55 @@ function _createMdxContent(props) {
           })
         })
       })
+    }), _jsx($Tab, {
+      children: _jsx(_components.pre, {
+        \\"data-language\\": \\"sh\\",
+        \\"data-theme\\": \\"default\\",
+        filename: \\"Terminal\\",
+        children: _jsx(_components.code, {
+          \\"data-language\\": \\"sh\\",
+          \\"data-theme\\": \\"default\\",
+          children: _jsxs(_components.span, {
+            className: \\"line\\",
+            children: [_jsx(_components.span, {
+              style: {
+                color: \\"var(--shiki-token-function)\\"
+              },
+              children: \\"bun\\"
+            }), _jsx(_components.span, {
+              style: {
+                color: \\"var(--shiki-color-text)\\"
+              },
+              children: \\" \\"
+            }), _jsx(_components.span, {
+              style: {
+                color: \\"var(--shiki-token-string)\\"
+              },
+              children: \\"add\\"
+            }), _jsx(_components.span, {
+              style: {
+                color: \\"var(--shiki-color-text)\\"
+              },
+              children: \\" \\"
+            }), _jsx(_components.span, {
+              style: {
+                color: \\"var(--shiki-token-string)\\"
+              },
+              children: \\"--dev\\"
+            }), _jsx(_components.span, {
+              style: {
+                color: \\"var(--shiki-color-text)\\"
+              },
+              children: \\" \\"
+            }), _jsx(_components.span, {
+              style: {
+                color: \\"var(--shiki-token-string)\\"
+              },
+              children: \\"@graphql-eslint/eslint-plugin\\"
+            })]
+          })
+        })
+      })
     })]
   });
 }

packages/remark-npm2yarn/package.json

@@ -23,12 +23,12 @@
     "test": "vitest ."
   },
   "dependencies": {
-    "npm-to-yarn": "^2.0.0",
+    "npm-to-yarn": "^2.1.0",
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
     "@types/mdast": "3.0.12",
-    "nextra": "2.9.0",
+    "nextra": "2.12.3",
     "unified": "10.1.2"
   },
   "publishConfig": {

packages/remark-npm2yarn/src/constants.ts

@@ -1,4 +1,4 @@
-export const PACKAGE_MANAGERS = ['npm', 'pnpm', 'yarn'] as const;
+export const PACKAGE_MANAGERS = ['npm', 'pnpm', 'yarn', 'bun'] as const;
 
 export type PackageManager = (typeof PACKAGE_MANAGERS)[number];