feat: add generate:storybooks again to the cloudflare build

.eslintignore

@@ -0,0 +1 @@
+/src/@mui

bin/muiComponentConfig.tsx

@@ -1,12 +1,42 @@
-export const documentComponents: string[] = [
+const documentComponents: string[] = [
   "Autocomplete",
   "Button",
   "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,
   {
@@ -15,7 +45,7 @@ type ComponentsConfigProps = Record<
   }
 >
 
-export const componentsConfig: ComponentsConfigProps = {
+const componentsConfig: ComponentsConfigProps = {
   Autocomplete: {
     args: `{
       disablePortal: true,
@@ -75,4 +105,72 @@ export 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,
+  problematicComponents,
+  componentsThatNeedReactElements,
+  complexGenericComponents,
 }

bin/storybookGenerator.ts

@@ -1,12 +1,19 @@
 import * as fs from "fs"
 import * as path from "path"
-
-import { componentsConfig, documentComponents } from "./muiComponentConfig"
 import {
+  complexGenericComponents,
+  componentsConfig,
+  componentsThatNeedReactElements,
+  documentComponents,
+  problematicComponents,
+} from "./muiComponentConfig.tsx"
+import {
+  complexGenericComponentTemplate,
   componentTemplate,
+  problematicComponentTemplate,
   storiesJustArgsTemplate,
   storiesTemplate,
-} from "./templates"
+} from "./templates.ts"
 
 const FOLDER_PATH = "./src/@mui"
 const MATERIAL_PATH = "./node_modules/@mui/material"
@@ -39,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 = (
@@ -58,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, "")
   }
 

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,26 @@ export interface {subdirectory}Props extends Mui{subdirectory}Props {}
 export const {subdirectory} = Mui{subdirectory}
 `
 
-export const storiesTemplate = `import { {subdirectory}, {subdirectory}Props } from "./{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"
 import type { Meta, StoryObj } from "@storybook/react"
@@ -26,7 +45,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 +65,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 +100,11 @@ type Story = StoryObj<{subdirectory}Props>
 
 export const Default: Story = {args: {args}}
 `
+
+export {
+  componentTemplate,
+  problematicComponentTemplate,
+  complexGenericComponentTemplate,
+  storiesTemplate,
+  storiesJustArgsTemplate,
+}

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,
 }

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",

tsconfig.json

@@ -21,7 +21,8 @@
     "importHelpers": true,
     "module": "esnext",
     "target": "esnext",
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "noEmit": false
   },
   "exclude": ["node_modules", "dist", "test", "bin"]
 }