From fe62b3b91daa729811e15828389b6876a6bf6582 Mon Sep 17 00:00:00 2001
From: Konstantin Tarkus <koistya@gmail.com>
Date: Thu, 28 Jul 2022 18:00:00 +0300
Subject: [PATCH] feat: Shared modules example

---
 .vscode/settings.json     |  3 ---
 app/package.json          |  1 +
 app/routes/Home.tsx       | 28 +++++-----------------------
 app/tsconfig.json         |  3 ++-
 core/button/ButtonOne.tsx | 18 ++++++++++++++++++
 core/button/ButtonTwo.tsx | 18 ++++++++++++++++++
 core/index.ts             |  2 ++
 core/package.json         | 32 ++++++++++++++++++++++++++++++++
 core/tsconfig.json        | 13 +++++++++++++
 package.json              |  1 +
 tsconfig.json             |  6 +++++-
 yarn.lock                 | 27 ++++++++++++++++++++++++++-
 12 files changed, 123 insertions(+), 29 deletions(-)
 create mode 100644 core/button/ButtonOne.tsx
 create mode 100644 core/button/ButtonTwo.tsx
 create mode 100644 core/index.ts
 create mode 100644 core/package.json
 create mode 100644 core/tsconfig.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 3c974eac2..fc984a5d7 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,7 +1,4 @@
 {
-  "editor.codeActionsOnSave": {
-    "source.organizeImports": true
-  },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "editor.tabSize": 2,
diff --git a/app/package.json b/app/package.json
index f379a3790..7b5157aa4 100644
--- a/app/package.json
+++ b/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",
diff --git a/app/routes/Home.tsx b/app/routes/Home.tsx
index 978724cb0..4facffb82 100644
--- a/app/routes/Home.tsx
+++ b/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>
   );
diff --git a/app/tsconfig.json b/app/tsconfig.json
index 7d8a5deb7..dec7399a5 100644
--- a/app/tsconfig.json
+++ b/app/tsconfig.json
@@ -10,5 +10,6 @@
     "moduleResolution": "Node"
   },
   "include": ["**/*.ts", "**/*.tsx"],
-  "exclude": ["dist/**/*"]
+  "exclude": ["dist/**/*"],
+  "references": [{ "path": "../core" }]
 }
diff --git a/core/button/ButtonOne.tsx b/core/button/ButtonOne.tsx
new file mode 100644
index 000000000..d3c76484c
--- /dev/null
+++ b/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}
+    />
+  );
+}
diff --git a/core/button/ButtonTwo.tsx b/core/button/ButtonTwo.tsx
new file mode 100644
index 000000000..099f0d456
--- /dev/null
+++ b/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}
+    />
+  );
+}
diff --git a/core/index.ts b/core/index.ts
new file mode 100644
index 000000000..b17e00e75
--- /dev/null
+++ b/core/index.ts
@@ -0,0 +1,2 @@
+export * from "./button/ButtonOne";
+export * from "./button/ButtonTwo";
diff --git a/core/package.json b/core/package.json
new file mode 100644
index 000000000..fffae5db7
--- /dev/null
+++ b/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"
+  }
+}
diff --git a/core/tsconfig.json b/core/tsconfig.json
new file mode 100644
index 000000000..7a73af19f
--- /dev/null
+++ b/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/**/*"]
+}
diff --git a/package.json b/package.json
index 11158ccbe..131d9020e 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   "type": "module",
   "workspaces": [
     "app",
+    "core",
     "edge"
   ],
   "scripts": {
diff --git a/tsconfig.json b/tsconfig.json
index 2aac89428..be8c0bac0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,4 +1,8 @@
 {
   "files": [],
-  "references": [{ "path": "./app" }, { "path": "./edge" }]
+  "references": [
+    { "path": "./app" },
+    { "path": "./core" },
+    { "path": "./edge" }
+  ]
 }
diff --git a/yarn.lock b/yarn.lock
index 0b20401be..579bde7e4 100644
--- a/yarn.lock
+++ b/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"