feat: Shared modules example

.vscode/settings.json

@@ -1,7 +1,4 @@
 {
-  "editor.codeActionsOnSave": {
-    "source.organizeImports": true
-  },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "editor.tabSize": 2,

app/package.json

@@ -16,6 +16,7 @@
     "@mui/icons-material": "^5.8.4",
     "@mui/lab": "^5.0.0-alpha.92",
     "@mui/material": "^5.9.2",
+    "core": "workspace:*",
     "firebase": "^9.9.1",
     "path-to-regexp": "^6.2.1",
     "react": "^18.2.0",

app/routes/Home.tsx

@@ -1,8 +1,8 @@
 /* SPDX-FileCopyrightText: 2014-present Kriasoft */
 /* SPDX-License-Identifier: MIT */
 
-import { Api, GitHub } from "@mui/icons-material";
-import { Box, Button, Container, Typography } from "@mui/material";
+import { Box, Container, Typography } from "@mui/material";
+import { ButtonOne, ButtonTwo } from "core";
 
 export default function Home(): JSX.Element {
   return (
@@ -15,27 +15,9 @@ export default function Home(): JSX.Element {
         The web's most popular Jamstack React template.
       </Typography>
 
-      <Box
-        sx={{
-          display: "flex",
-          justifyContent: "center",
-          gridGap: "1rem",
-        }}
-      >
-        <Button
-          variant="outlined"
-          size="large"
-          href={`/api`}
-          children="Explorer API"
-          startIcon={<Api />}
-        />
-        <Button
-          variant="outlined"
-          size="large"
-          href="https://github.com/kriasoft/react-starter-kit"
-          children="View on GitHub"
-          startIcon={<GitHub />}
-        />
+      <Box sx={{ display: "flex", gridGap: "1rem", justifyContent: "center" }}>
+        <ButtonOne />
+        <ButtonTwo />
       </Box>
     </Container>
   );

app/tsconfig.json

@@ -10,5 +10,6 @@
     "moduleResolution": "Node"
   },
   "include": ["**/*.ts", "**/*.tsx"],
-  "exclude": ["dist/**/*"]
+  "exclude": ["dist/**/*"],
+  "references": [{ "path": "../core" }]
 }

core/button/ButtonOne.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { Button, ButtonProps } from "@mui/material";
+
+export type ButtonOneProps = Omit<ButtonProps, "children">;
+
+export function ButtonOne(props: ButtonOneProps): JSX.Element {
+  const { sx, ...other } = props;
+
+  return (
+    <Button
+      sx={{ fontWeight: 600, color: "blue", ...sx }}
+      variant="outlined"
+      size="large"
+      children="One"
+      {...other}
+    />
+  );
+}

core/button/ButtonTwo.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { Button, ButtonProps } from "@mui/material";
+
+export type ButtonTwoProps = Omit<ButtonProps, "children">;
+
+export function ButtonTwo(props: ButtonTwoProps): JSX.Element {
+  const { sx, ...other } = props;
+
+  return (
+    <Button
+      sx={{ fontWeight: 600, color: "green", ...sx }}
+      variant="outlined"
+      size="large"
+      children="Two"
+      {...other}
+    />
+  );
+}

core/index.ts

@@ -0,0 +1,2 @@
+export * from "./button/ButtonOne";
+export * from "./button/ButtonTwo";

core/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "core",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "exports": "./index.js",
+  "scripts": {
+    "start": "vite serve",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
+    "@mui/material": "5.9.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@emotion/babel-plugin": "^11.9.2",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
+    "@mui/material": "5.9.2",
+    "@types/jest": "^28.1.6",
+    "@types/node": "^18.6.1",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^4.7.4"
+  }
+}

core/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": ["DOM", "ESNext"],
+    "jsx": "react-jsx",
+    "jsxImportSource": "@emotion/react",
+    "types": ["jest"],
+    "outDir": "./dist",
+    "moduleResolution": "Node"
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["dist/**/*"]
+}

package.json

@@ -6,6 +6,7 @@
   "type": "module",
   "workspaces": [
     "app",
+    "core",
     "edge"
   ],
   "scripts": {

tsconfig.json

@@ -1,4 +1,8 @@
 {
   "files": [],
-  "references": [{ "path": "./app" }, { "path": "./edge" }]
+  "references": [
+    { "path": "./app" },
+    { "path": "./core" },
+    { "path": "./edge" }
+  ]
 }

yarn.lock

@@ -3188,7 +3188,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/material@npm:^5.9.2":
+"@mui/material@npm:5.9.2, @mui/material@npm:^5.9.2":
   version: 5.9.2
   resolution: "@mui/material@npm:5.9.2"
   dependencies:
@@ -4197,6 +4197,7 @@ __metadata:
     "@types/react": "npm:^18.0.15"
     "@types/react-dom": "npm:^18.0.6"
     "@vitejs/plugin-react": "npm:^2.0.0"
+    core: "workspace:*"
     envars: "npm:^0.4.0"
     firebase: "npm:^9.9.1"
     path-to-regexp: "npm:^6.2.1"
@@ -4944,6 +4945,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"core@workspace:*, core@workspace:core":
+  version: 0.0.0-use.local
+  resolution: "core@workspace:core"
+  dependencies:
+    "@emotion/babel-plugin": "npm:^11.9.2"
+    "@emotion/react": "npm:^11.9.3"
+    "@emotion/styled": "npm:^11.9.3"
+    "@mui/material": "npm:5.9.2"
+    "@types/jest": "npm:^28.1.6"
+    "@types/node": "npm:^18.6.1"
+    "@types/react": "npm:^18.0.15"
+    "@types/react-dom": "npm:^18.0.6"
+    react: "npm:^18.2.0"
+    react-dom: "npm:^18.2.0"
+    typescript: "npm:^4.7.4"
+  peerDependencies:
+    "@emotion/react": ^11.9.3
+    "@emotion/styled": ^11.9.3
+    "@mui/material": 5.9.2
+    react: ^18.2.0
+    react-dom: ^18.2.0
+  languageName: unknown
+  linkType: soft
+
 "cosmiconfig@npm:^5.0.5":
   version: 5.2.1
   resolution: "cosmiconfig@npm:5.2.1"