From f72f5fb7a1dc3fb4cd282d34e4d9e2b7388d05a9 Mon Sep 17 00:00:00 2001
From: Braian Mellor <braianj@gmail.com>
Date: Mon, 25 Nov 2024 14:28:42 -0300
Subject: [PATCH 1/3] feat: add generate:storybooks again to the cloudflare
 biuld

---
 .eslintignore                 | 1 +
 .eslintrc.js => .eslintrc.cjs | 0
 bin/muiComponentConfig.tsx    | 6 ++++--
 bin/storybookGenerator.ts     | 5 ++---
 package.json                  | 5 +++--
 tsconfig.json                 | 4 +++-
 6 files changed, 13 insertions(+), 8 deletions(-)
 create mode 100644 .eslintignore
 rename .eslintrc.js => .eslintrc.cjs (100%)

diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 00000000..b92c1ba7
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1 @@
+/src/@mui
\ No newline at end of file
diff --git a/.eslintrc.js b/.eslintrc.cjs
similarity index 100%
rename from .eslintrc.js
rename to .eslintrc.cjs
diff --git a/bin/muiComponentConfig.tsx b/bin/muiComponentConfig.tsx
index c4c3d8ea..a8b8405b 100644
--- a/bin/muiComponentConfig.tsx
+++ b/bin/muiComponentConfig.tsx
@@ -1,4 +1,4 @@
-export const documentComponents: string[] = [
+const documentComponents: string[] = [
   "Autocomplete",
   "Button",
   "ButtonGroup",
@@ -15,7 +15,7 @@ type ComponentsConfigProps = Record<
   }
 >
 
-export const componentsConfig: ComponentsConfigProps = {
+const componentsConfig: ComponentsConfigProps = {
   Autocomplete: {
     args: `{
       disablePortal: true,
@@ -76,3 +76,5 @@ export const componentsConfig: ComponentsConfigProps = {
     ],
   },
 }
+
+export { documentComponents, componentsConfig }
diff --git a/bin/storybookGenerator.ts b/bin/storybookGenerator.ts
index 23ad55f8..9e151a61 100644
--- a/bin/storybookGenerator.ts
+++ b/bin/storybookGenerator.ts
@@ -1,12 +1,11 @@
 import * as fs from "fs"
 import * as path from "path"
-
-import { componentsConfig, documentComponents } from "./muiComponentConfig"
+import { componentsConfig, documentComponents } from "./muiComponentConfig.tsx"
 import {
   componentTemplate,
   storiesJustArgsTemplate,
   storiesTemplate,
-} from "./templates"
+} from "./templates.ts"
 
 const FOLDER_PATH = "./src/@mui"
 const MATERIAL_PATH = "./node_modules/@mui/material"
diff --git a/package.json b/package.json
index cc84d040..d6ff85b3 100644
--- a/package.json
+++ b/package.json
@@ -6,18 +6,19 @@
   "types": "dist/index.d.ts",
   "author": "Decentraland",
   "license": "Apache-2.0",
+  "type": "module",
   "scripts": {
     "test": "jest",
     "fix:prettier": "prettier --write ./src",
     "start": "storybook dev -p 6006",
     "build": "npm run build:dist",
     "build:dist": "rm -Rf dist && tsc && cp -R src/theme/fonts dist/theme/fonts && cp -R src/Assets dist/Assets",
-    "build-storybook": "npx storybook@7 build",
+    "build-storybook": "npm run generate:storybooks && npx storybook@7 build",
     "format": "prettier --write '**/*.{ts,tsx,js,jsx,json,md,mdx,css}'",
     "lint": "eslint --ext .ts,.tsx,.js,.jsx ./src",
     "lint:check": "eslint --ext .ts,.tsx,.js,.jsx ./src",
     "lint:fix": "npm run lint -- --fix",
-    "generate:storybooks": "ts-node ./bin/storybookGenerator.ts && npm run lint:fix"
+    "generate:storybooks": "node --loader ts-node/esm ./bin/storybookGenerator.ts && npm run lint:fix"
   },
   "repository": {
     "type": "git",
diff --git a/tsconfig.json b/tsconfig.json
index 4ba9fe81..dcdc5c8b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -21,7 +21,9 @@
     "importHelpers": true,
     "module": "esnext",
     "target": "esnext",
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "allowImportingTsExtensions": true,
+    "noEmit": true
   },
   "exclude": ["node_modules", "dist", "test", "bin"]
 }

From 5b7e268b08f5f44ceafb4a24a0ad8b99407d3712 Mon Sep 17 00:00:00 2001
From: Braian Mellor <braianj@gmail.com>
Date: Mon, 25 Nov 2024 16:08:15 -0300
Subject: [PATCH 2/3] feat: adjust templates

---
 bin/templates.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/bin/templates.ts b/bin/templates.ts
index 36b8537a..67bd94fe 100644
--- a/bin/templates.ts
+++ b/bin/templates.ts
@@ -1,4 +1,4 @@
-export const componentTemplate = `import {
+const componentTemplate = `import {
   default as Mui{subdirectory},
   {subdirectory}Props as Mui{subdirectory}Props,
 } from "@mui/material/{subdirectory}"
@@ -8,7 +8,7 @@ export interface {subdirectory}Props extends Mui{subdirectory}Props {}
 export const {subdirectory} = Mui{subdirectory}
 `
 
-export const storiesTemplate = `import { {subdirectory}, {subdirectory}Props } from "./{subdirectory}"
+const storiesTemplate = `import { {subdirectory}, {subdirectory}Props } from "./{subdirectory}"
 {otherImports}
 import { Controls, Primary, Title } from "@storybook/blocks"
 import type { Meta, StoryObj } from "@storybook/react"
@@ -26,7 +26,7 @@ const meta: Meta<{subdirectory}Props> = {
           <div>
             <DclButton
               color="primary"
-              href="https://mui.com/material-ui/react-{subdirectory}/"
+              href="https://v5.mui.com/material-ui/react-{subdirectory}/"
               target="_blank"
             >
               @MUI Doc
@@ -46,7 +46,7 @@ type Story = StoryObj<{subdirectory}Props>
 export const Default: Story = {args: {args}}
 `
 
-export const storiesJustArgsTemplate = `import Button from "@mui/material/Button"
+const storiesJustArgsTemplate = `import Button from "@mui/material/Button"
 import { {subdirectory}, {subdirectory}Props } from "./{subdirectory}"
 import type { Meta, StoryObj } from "@storybook/react"
 import { ArgsTable, Title } from "@storybook/blocks"
@@ -81,3 +81,5 @@ type Story = StoryObj<{subdirectory}Props>
 
 export const Default: Story = {args: {args}}
 `
+
+export { componentTemplate, storiesTemplate, storiesJustArgsTemplate }

From b0c8491cff62ecae894b4e848fc23fedaa074425 Mon Sep 17 00:00:00 2001
From: Braian Mellor <braianj@gmail.com>
Date: Wed, 20 Aug 2025 13:46:10 -0300
Subject: [PATCH 3/3] feat: improve MUI storybook generation and fix build
 configuration

---
 bin/muiComponentConfig.tsx | 98 +++++++++++++++++++++++++++++++++++++-
 bin/storybookGenerator.ts  | 35 +++++++++++---
 bin/templates.ts           | 27 ++++++++++-
 jest.config.js             | 23 ++++++---
 tsconfig.json              |  3 +-
 5 files changed, 169 insertions(+), 17 deletions(-)

diff --git a/bin/muiComponentConfig.tsx b/bin/muiComponentConfig.tsx
index a8b8405b..03fb0d8d 100644
--- a/bin/muiComponentConfig.tsx
+++ b/bin/muiComponentConfig.tsx
@@ -4,9 +4,39 @@ const documentComponents: string[] = [
   "ButtonGroup",
   "Card",
   "Checkbox",
+  "FormControlLabel",
   "FormGroup",
 ]
 
+// Components that don't export their Props interface or have different naming
+const problematicComponents: string[] = [
+  "DefaultPropsProvider",
+  "StyledEngineProvider",
+  "Unstable_Grid2",
+  "Unstable_TrapFocus",
+]
+
+// Components with complex generics that need special handling
+const complexGenericComponents: string[] = [
+  "Autocomplete",
+  "InitColorSchemeScript",
+  "Select",
+  "TablePagination",
+  "TextField",
+]
+
+// Components that need ReactElement children instead of string
+const componentsThatNeedReactElements: Record<string, string> = {
+  ClickAwayListener: "children: <div>ClickAwayListener Content</div>",
+  Fade: "children: <div>Fade Content</div>",
+  Grow: "children: <div>Grow Content</div>",
+  Slide: "children: <div>Slide Content</div>",
+  Snackbar: "children: <div>Snackbar Content</div>",
+  Tooltip: "children: <div>Tooltip Content</div>",
+  Unstable_TrapFocus: "children: <div>TrapFocus Content</div>",
+  Zoom: "children: <div>Zoom Content</div>",
+}
+
 type ComponentsConfigProps = Record<
   string,
   {
@@ -75,6 +105,72 @@ const componentsConfig: ComponentsConfigProps = {
       "import { linkTo } from '@storybook/addon-links'",
     ],
   },
+  CircularProgress: {
+    args: `{size: 40}`,
+    imports: [],
+  },
+  FilledInput: {
+    args: `{placeholder: "Filled input"}`,
+    imports: [],
+  },
+  FormControlLabel: {
+    args: `{control: <Checkbox />, label: "Form Control Label"}`,
+    imports: ["import Checkbox from '@mui/material/Checkbox'"],
+  },
+  GlobalStyles: {
+    args: `{styles: { body: { backgroundColor: '#f5f5f5' } }}`,
+    imports: [],
+  },
+  Input: {
+    args: `{placeholder: "Input"}`,
+    imports: [],
+  },
+  InputBase: {
+    args: `{placeholder: "Input base"}`,
+    imports: [],
+  },
+  LinearProgress: {
+    args: `{variant: "determinate", value: 50}`,
+    imports: [],
+  },
+  OutlinedInput: {
+    args: `{placeholder: "Outlined input"}`,
+    imports: [],
+  },
+  Pagination: {
+    args: `{count: 10}`,
+    imports: [],
+  },
+  Rating: {
+    args: `{value: 3, max: 5}`,
+    imports: [],
+  },
+  SpeedDialAction: {
+    args: `{icon: <div>Icon</div>, tooltipTitle: "Action"}`,
+    imports: [],
+  },
+  SpeedDialIcon: {
+    args: `{icon: <div>Icon</div>}`,
+    imports: [],
+  },
+  StepConnector: {
+    args: `{}`,
+    imports: [],
+  },
+  StepIcon: {
+    args: `{icon: 1}`,
+    imports: [],
+  },
+  TextareaAutosize: {
+    args: `{minRows: 3, placeholder: "Textarea autosize"}`,
+    imports: [],
+  },
 }
 
-export { documentComponents, componentsConfig }
+export {
+  documentComponents,
+  componentsConfig,
+  problematicComponents,
+  componentsThatNeedReactElements,
+  complexGenericComponents,
+}
diff --git a/bin/storybookGenerator.ts b/bin/storybookGenerator.ts
index 9e151a61..36438a6d 100644
--- a/bin/storybookGenerator.ts
+++ b/bin/storybookGenerator.ts
@@ -1,8 +1,16 @@
 import * as fs from "fs"
 import * as path from "path"
-import { componentsConfig, documentComponents } from "./muiComponentConfig.tsx"
 import {
+  complexGenericComponents,
+  componentsConfig,
+  componentsThatNeedReactElements,
+  documentComponents,
+  problematicComponents,
+} from "./muiComponentConfig.tsx"
+import {
+  complexGenericComponentTemplate,
   componentTemplate,
+  problematicComponentTemplate,
   storiesJustArgsTemplate,
   storiesTemplate,
 } from "./templates.ts"
@@ -38,9 +46,20 @@ function createSubdirectoryFiles(subdirectory: string, onlyArgs?: boolean) {
 
   fs.mkdirSync(folderPath, { recursive: true })
 
+  const isProblematicComponent = problematicComponents.includes(subdirectory)
+  const isComplexGenericComponent =
+    complexGenericComponents.includes(subdirectory)
+
+  let template = componentTemplate
+  if (isProblematicComponent) {
+    template = problematicComponentTemplate
+  } else if (isComplexGenericComponent) {
+    template = complexGenericComponentTemplate
+  }
+
   fs.writeFileSync(
     path.join(folderPath, tsxFileName),
-    componentTemplate.replace(/{subdirectory}/g, subdirectory)
+    template.replace(/{subdirectory}/g, subdirectory)
   )
 
   let storyTemplateFile = (
@@ -57,12 +76,16 @@ function createSubdirectoryFiles(subdirectory: string, onlyArgs?: boolean) {
       componentsConfig[subdirectory].imports.join("\n")
     )
   } else {
-    storyTemplateFile = storyTemplateFile.replace(
-      /{args}/g,
-      `{
+    // Use ReactElement children for components that need them, otherwise use string
+    const defaultArgs = componentsThatNeedReactElements[subdirectory]
+      ? `{
+      ${componentsThatNeedReactElements[subdirectory]},
+    }`
+      : `{
       children: "${subdirectory}",
     }`
-    )
+
+    storyTemplateFile = storyTemplateFile.replace(/{args}/g, defaultArgs)
     storyTemplateFile = storyTemplateFile.replace(/{otherImports}/g, "")
   }
 
diff --git a/bin/templates.ts b/bin/templates.ts
index 67bd94fe..19a514dc 100644
--- a/bin/templates.ts
+++ b/bin/templates.ts
@@ -8,6 +8,25 @@ export interface {subdirectory}Props extends Mui{subdirectory}Props {}
 export const {subdirectory} = Mui{subdirectory}
 `
 
+const problematicComponentTemplate = `import {
+  default as Mui{subdirectory},
+} from "@mui/material/{subdirectory}"
+import { ComponentProps } from "react"
+
+export interface {subdirectory}Props extends ComponentProps<typeof Mui{subdirectory}> {}
+
+export const {subdirectory} = Mui{subdirectory}
+`
+
+const complexGenericComponentTemplate = `import {
+  default as Mui{subdirectory},
+} from "@mui/material/{subdirectory}"
+
+export interface {subdirectory}Props extends Record<string, any> {}
+
+export const {subdirectory} = Mui{subdirectory}
+`
+
 const storiesTemplate = `import { {subdirectory}, {subdirectory}Props } from "./{subdirectory}"
 {otherImports}
 import { Controls, Primary, Title } from "@storybook/blocks"
@@ -82,4 +101,10 @@ type Story = StoryObj<{subdirectory}Props>
 export const Default: Story = {args: {args}}
 `
 
-export { componentTemplate, storiesTemplate, storiesJustArgsTemplate }
+export {
+  componentTemplate,
+  problematicComponentTemplate,
+  complexGenericComponentTemplate,
+  storiesTemplate,
+  storiesJustArgsTemplate,
+}
diff --git a/jest.config.js b/jest.config.js
index 6eb05250..23d3c602 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,8 +1,17 @@
-module.exports = {
-  preset: "ts-jest",
-  testEnvironment: "node",
-  coverageProvider: "v8",
-  fakeTimers: {
-    enableGlobally: true,
-  },
+const preset = "ts-jest"
+const testEnvironment = "node"
+const coverageProvider = "v8"
+const fakeTimers = {
+  enableGlobally: true,
+}
+const testMatch = ["**/src/**/*.(test|spec).(ts|tsx|js|jsx)"]
+const testPathIgnorePatterns = ["/node_modules/", "/dist/"]
+
+export {
+  preset,
+  testEnvironment,
+  coverageProvider,
+  fakeTimers,
+  testMatch,
+  testPathIgnorePatterns,
 }
diff --git a/tsconfig.json b/tsconfig.json
index dcdc5c8b..1b5a443b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,8 +22,7 @@
     "module": "esnext",
     "target": "esnext",
     "jsx": "react-jsx",
-    "allowImportingTsExtensions": true,
-    "noEmit": true
+    "noEmit": false
   },
   "exclude": ["node_modules", "dist", "test", "bin"]
 }