fix(docs): include .npmrc in sandbox (#4951)

apps/docs/components/sandpack/entries.ts

@@ -54,3 +54,5 @@ export const postcssConfig = `module.exports = {
 export const stylesConfig = `@tailwind base;
 @tailwind components;
 @tailwind utilities;`;
+
+export const npmrcConfig = `public-hoist-pattern[]=*@heroui/*`;

apps/docs/components/sandpack/use-sandpack.ts

@@ -5,7 +5,14 @@ import {useLocalStorage} from "usehooks-ts";
 
 import {HighlightedLines} from "./types";
 import {getHighlightedLines, getFileName} from "./utils";
-import {stylesConfig, postcssConfig, tailwindConfig, getHtmlFile, rootFile} from "./entries";
+import {
+  stylesConfig,
+  postcssConfig,
+  tailwindConfig,
+  npmrcConfig,
+  getHtmlFile,
+  rootFile,
+} from "./entries";
 
 export interface UseSandpackProps {
   files?: SandpackFiles;
@@ -207,6 +214,10 @@ export const useSandpack = ({
         code: stylesConfig,
         hidden: true,
       },
+      ".npmrc": {
+        code: npmrcConfig,
+        hidden: true,
+      },
     },
     hasTypescript,
     entryFile,

apps/docs/hooks/use-stackblitz.ts

@@ -39,7 +39,17 @@ export function useStackblitz(props: UseSandpackProps) {
     typescriptStrict,
   });
 
-  const transformFiles = mapKeys(filesData, (_, key) => key.replace(/^\//, ""));
+  // in stackblitz, npm will be used to install dependencies
+  // it doesn't need `public-hoist-pattern[]=*@heroui/*`
+  const filteredFilesData = Object.keys(filesData)
+    .filter((k) => k !== ".npmrc")
+    .reduce((o, k) => {
+      o[k] = filesData[k];
+
+      return o;
+    }, {});
+
+  const transformFiles = mapKeys(filteredFilesData, (_, key) => key.replace(/^\//, ""));
 
   const dependencies = {...customSetup.dependencies, ...customSetup.devDependencies};