Fix playroom setup

Author: gabro

packages/bento-design-system/playroom.config.cjs

@@ -3,8 +3,7 @@ const { ProvidePlugin } = require("webpack");
 const { ESBuildMinifyPlugin } = require("esbuild-loader");
 
 module.exports = {
-  components: "../storybook/stories/index.tsx",
-  typeScriptFiles: ["../storybook/stories/index.tsx"],
+  components: "./src/index.ts",
   outputPath: "./dist/playroom",
   title: "Bento 🍱",
   widths: [320, 425, 768, 1024, 1440, 2560],
@@ -34,7 +33,9 @@ module.exports = {
         {
           test: /\.css$/,
           use: ["style-loader", "css-loader"],
-          exclude: /node_modules/,
+          exclude: (modulePath) => {
+            return /node_modules/.test(modulePath) && !modulePath.includes("@fontsource");
+          },
         },
       ],
     },

packages/bento-design-system/playroom/FrameComponent.tsx

@@ -1,4 +1,11 @@
-import { Box, BentoProvider } from "../../storybook/stories";
+import * as React from "react";
+import { Box, BentoProvider } from "../src";
+import "../src/reset.css";
+import "../src/global.css";
+import "../src/defaultTheme.css";
+import "@fontsource/ibm-plex-sans/400.css";
+import "@fontsource/ibm-plex-sans/500.css";
+import "@fontsource/ibm-plex-sans/600.css";
 import { defaultMessages } from "../../storybook/stories/defaultMessages";
 
 export default function FrameComponent({ theme, children }) {