feat: add material ui and tsup (#422)

mlacosta · web-flow · commit 011941d2240f · 2024-12-27T22:22:29.000-03:00
diff --git a/README.md b/README.md
@@ -40,8 +40,10 @@ This repo uses the following open source packages:
 - [Next.js](https://nextjs.org)
 - [Prettier](https://www.npmjs.com/package/prettier)
 - [Storybook](https://storybook.js.org/)
+- [tsup](https://github.com/egoist/tsup)
 - [Turborepo](https://turbo.build/)
 
+
 ## How to contribute
 
 1. Fork the Project
diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx
@@ -1,5 +1,5 @@
 import Image, { type ImageProps } from "next/image";
-import { Button } from "@repo/ui/button";
+import { Button } from "@repo/ui";
 import styles from "./page.module.css";
 
 type Props = Omit<ImageProps, "src"> & {
diff --git a/apps/storybook/.storybook/main.ts b/apps/storybook/.storybook/main.ts
@@ -14,7 +14,6 @@ const config: StorybookConfig = {
   addons: [
     getAbsolutePath("@storybook/addon-onboarding"),
     getAbsolutePath("@storybook/addon-essentials"),
-    getAbsolutePath("@chromatic-com/storybook"),
     getAbsolutePath("@storybook/addon-interactions"),
   ],
   framework: {
diff --git a/apps/storybook/.storybook/preview.ts b/apps/storybook/.storybook/preview.ts
@@ -1,4 +1,13 @@
 import type { Preview } from "@storybook/react";
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
+import '@fontsource/material-icons';
+
+import { CssBaseline, ThemeProvider } from '@mui/material';
+import { withThemeFromJSXProvider } from '@storybook/addon-themes';
+import theme from '@repo/ui/theme';
 
 const preview: Preview = {
   parameters: {
@@ -11,4 +20,16 @@ const preview: Preview = {
   },
 };
 
+export const decorators = [
+  withThemeFromJSXProvider({
+    themes: {
+      default: theme,
+    },
+    defaultTheme: 'default',
+    Provider: ThemeProvider,
+    GlobalStyles: CssBaseline,
+  }),
+];
+
+
 export default preview;
diff --git a/apps/storybook/package.json b/apps/storybook/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "storybook",
+  "name": "@repo/storybook",
   "version": "0.1.0",
   "private": true,
   "type": "module",
@@ -12,15 +12,19 @@
     "build:storybook": "storybook build"
   },
   "dependencies": {
+    "@emotion/react": "^11.0.0-rc.0",
+    "@emotion/styled": "^11.14.0",
+    "@fontsource/material-icons": "^5.1.0",
+    "@fontsource/roboto": "^5.1.0",
     "@repo/ui": "*",
+    "@storybook/addon-themes": "^8.4.7",
     "next": "^15.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@repo/eslint-config": "*",
     "@repo/typescript-config": "*",
-    "@chromatic-com/storybook": "^3.2.3",
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/addon-interactions": "^8.4.7",
     "@storybook/addon-onboarding": "^8.4.7",
@@ -29,11 +33,12 @@
     "@storybook/react": "^8.4.7",
     "@storybook/test": "^8.4.7",
     "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "18.3.1",
+    "@types/react-dom": "18.3.1",
     "postcss": "^8",
     "storybook": "^8.4.7",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5"
+    "typescript": "^5.5.4",
+    "webpack": "^5"
   }
-}
+}
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -11,17 +11,21 @@
     "check-types": "tsc --noEmit"
   },
   "dependencies": {
+    "@emotion/cache": "^11.14.0",
+    "@emotion/react": "^11.14.0",
+    "@mui/material-nextjs": "^6.3.0",
     "@repo/ui": "*",
     "next": "^15.1.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "@mui/material": "^6.3.0"
   },
   "devDependencies": {
     "@repo/eslint-config": "*",
     "@repo/typescript-config": "*",
     "@types/node": "^20",
     "@types/react": "18.3.1",
-    "@types/react-dom": "18.3.0",
+    "@types/react-dom": "18.3.1",
     "typescript": "5.5.4"
   }
-}
+}
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
@@ -1,14 +1,16 @@
 import type { Metadata } from "next";
-import localFont from "next/font/local";
 import "./globals.css";
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
 
-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-});
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
+import { Roboto } from 'next/font/google';
+import { ThemeProvider } from '@mui/material/styles';
+import theme from '@repo/ui/theme';
+
+const roboto = Roboto({
+  weight: ['300', '400', '500', '700'],
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-roboto',
 });
 
 export const metadata: Metadata = {
@@ -23,8 +25,12 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable}`}>
-        {children}
+      <body className={roboto.variable}>
+        <AppRouterCacheProvider>
+          <ThemeProvider theme={theme}>
+            {children}
+          </ThemeProvider>
+        </AppRouterCacheProvider>
       </body>
     </html>
   );
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
@@ -1,5 +1,5 @@
 import Image, { type ImageProps } from "next/image";
-import { Button } from "@repo/ui/button";
+import { Button } from "@repo/ui";
 import styles from "./page.module.css";
 
 type Props = Omit<ImageProps, "src"> & {
diff --git a/packages/eslint-config/package.json b/packages/eslint-config/package.json
@@ -21,7 +21,7 @@
     "eslint-plugin-turbo": "^2.3.0",
     "eslint-plugin-storybook": "^0.11.1",
     "globals": "^15.12.0",
-    "typescript": "^5.3.3",
+    "typescript": "^5.5.4",
     "typescript-eslint": "^8.15.0"
   }
 }
diff --git a/packages/ui/.gitignore b/packages/ui/.gitignore
@@ -0,0 +1,2 @@
+# build
+.dist
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -3,12 +3,16 @@
   "version": "0.0.0",
   "type": "module",
   "private": true,
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "exports": {
-    "./button": "./src/button.tsx",
-    "./card": "./src/card.tsx",
-    "./code": "./src/code.tsx"
+    "./theme": "./src/theme.ts",
+    ".":"./dist/index.js"
   },
   "scripts": {
+    "build": "tsup src/index.ts src/components/**/*.tsx --format cjs,esm --dts",
+    "dev": "tsup src/index.ts src/components/**/*.tsx --format cjs,esm --dts --watch",
     "lint": "eslint . --max-warnings 0",
     "generate:component": "turbo gen react-component",
     "check-types": "tsc --noEmit",
@@ -22,15 +26,17 @@
     "@swc/jest": "^0.2.37",
     "@turbo/gen": "^1.12.4",
     "@types/node": "^20.11.24",
-    "@types/react": "18.3.0",
+    "@types/react": "18.3.1",
     "@types/react-dom": "18.3.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "react-testing-library": "^8.0.1",
     "typescript": "5.5.4"
   },
   "dependencies": {
+    "@mui/material": "^6.3.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "tsup": "^8.3.5"
   }
-}
+}
diff --git a/packages/ui/src/button/index.tsx b/packages/ui/src/button/index.tsx
diff --git a/packages/ui/src/card/index.tsx b/packages/ui/src/card/index.tsx
diff --git a/packages/ui/src/code/index.tsx b/packages/ui/src/code/index.tsx
diff --git a/packages/ui/src/example/index.stories.tsx b/packages/ui/src/example/index.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ExampleButton } from "@repo/ui";
+
+const meta: Meta<typeof ExampleButton> = {
+    component: ExampleButton,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+    args: {
+        appName: 'Button',
+        children: 'I am a primary button.',
+    },
+};
diff --git a/packages/ui/src/example/index.tsx b/packages/ui/src/example/index.tsx
@@ -0,0 +1,7 @@
+import { Button } from "@mui/material"
+
+export const ExampleButton = () => {
+    return <Button>
+        Click Me!
+    </Button>
+}
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
@@ -0,0 +1,5 @@
+export * from './button';
+export * from './card';
+export * from './code';
+export * from './example';
+export * from './theme';
diff --git a/packages/ui/src/theme.ts b/packages/ui/src/theme.ts
@@ -0,0 +1,10 @@
+'use client';
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+  typography: {
+    fontFamily: 'var(--font-roboto)',
+  },
+});
+
+export default theme;
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
@@ -1,8 +1,16 @@
 {
   "extends": "@repo/typescript-config/react-library.json",
   "compilerOptions": {
-    "outDir": "dist"
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "module": "ESNext",
+    "moduleResolution": "bundler"
   },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist"]
-}
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}
diff --git a/packages/ui/tsup.config.ts b/packages/ui/tsup.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig, Options } from "tsup";
+    
+export default defineConfig((options: Options) => ({
+  banner: {
+    js: `"use client"`,
+  },
+  splitting: true,
+  entry: ["./**/*.tsx"],
+  format: ["esm"],
+  dts: true,
+  minify: true,
+  clean: true,
+  external: ["react"],
+  ...options,
+}));
diff --git a/packages/ui/turbo/generators/config.ts b/packages/ui/turbo/generators/config.ts
@@ -4,8 +4,8 @@ import type { PlopTypes } from "@turbo/gen";
 
 export default function generator(plop: PlopTypes.NodePlopAPI): void {
   // A simple generator to add a new React component to the internal UI library
-  plop.setGenerator("react-component", {
-    description: "Adds a new react component",
+  plop.setGenerator("ReactComponent", {
+    description: "Adds a new React component",
     prompts: [
       {
         type: "input",
@@ -16,14 +16,14 @@ export default function generator(plop: PlopTypes.NodePlopAPI): void {
     actions: [
       {
         type: "add",
-        path: "src/{{kebabCase name}}.tsx",
+        path: "src/{{pascalCase name}}/index.ts",
         templateFile: "templates/component.hbs",
       },
       {
         type: "append",
-        path: "package.json",
-        pattern: /"exports": {(?<insertion>)/g,
-        template: '    "./{{kebabCase name}}": "./src/{{kebabCase name}}.tsx",',
+        path: "src/index.tsx",
+        pattern: /(?<insertion>.*)/g,
+        template: 'export * from "./{{pascalCase name}}";',
       },
     ],
   });
diff --git a/turbo.json b/turbo.json
@@ -14,7 +14,8 @@
       "outputs": [
         ".next/**",
         "!.next/cache/**",
-        "storybook-static/**"
+        "storybook-static/**",
+        "dist/**"
       ]
     },
     "build:storybook": {},
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@`
`21`	`21`	`"eslint-plugin-turbo": "^2.3.0",`
`22`	`22`	`"eslint-plugin-storybook": "^0.11.1",`
`23`	`23`	`"globals": "^15.12.0",`
`24`		`- "typescript": "^5.3.3",`
	`24`	`+ "typescript": "^5.5.4",`
`25`	`25`	`"typescript-eslint": "^8.15.0"`
`26`	`26`	`}`
`27`	`27`	`}`