├── packages ├── ui │ ├── src │ │ ├── AppShell │ │ │ ├── index.tsx │ │ │ ├── AppShell.spec.tsx │ │ │ ├── AppShell.stories.tsx │ │ │ └── AppShell.tsx │ │ └── ProductCard │ │ │ ├── index.tsx │ │ │ ├── ProductCard.spec.tsx │ │ │ ├── ProductCard.tsx │ │ │ └── ProductCard.stories.mdx │ ├── index.tsx │ ├── tsconfig.json │ ├── jest.config.js │ ├── .storybook │ │ ├── preview.js │ │ └── main.js │ └── package.json ├── playlist-content │ ├── index.tsx │ ├── tsconfig.json │ ├── PlaylistContent.tsx │ └── package.json ├── movies-content │ ├── index.tsx │ ├── tsconfig.json │ ├── package.json │ └── MoviesContent.tsx ├── tsconfig │ ├── README.md │ ├── package.json │ ├── react-library.json │ ├── base.json │ └── nextjs.json ├── card │ ├── tsconfig.json │ ├── package.json │ └── index.tsx ├── store │ ├── tsconfig.json │ ├── index.tsx │ └── package.json └── eslint-config-acme │ ├── index.js │ └── package.json ├── pnpm-workspace.yaml ├── apps ├── movies │ ├── src │ │ ├── react-app-env.d.ts │ │ ├── index.tsx │ │ ├── MoviesContent.tsx │ │ ├── setupTests.ts │ │ ├── index.css │ │ ├── reportWebVitals.ts │ │ ├── bootstrap.tsx │ │ ├── App.css │ │ ├── App.tsx │ │ └── logo.svg │ ├── public │ │ ├── robots.txt │ │ ├── favicon.ico │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── index.html │ ├── tsconfig.json │ ├── .gitignore │ ├── .cracorc.js │ └── package.json └── playlist │ ├── src │ ├── react-app-env.d.ts │ ├── index.tsx │ ├── setupTests.ts │ ├── index.css │ ├── reportWebVitals.ts │ ├── bootstrap.tsx │ ├── App.css │ ├── App.tsx │ └── logo.svg │ ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html │ ├── tsconfig.json │ ├── .gitignore │ ├── .cracorc.js │ └── package.json ├── .eslintrc.js ├── turbo.json ├── .gitignore ├── package.json ├── README.md └── architecture.dio /packages/ui/src/AppShell/index.tsx: -------------------------------------------------------------------------------- 1 | export * from "./AppShell"; 2 | -------------------------------------------------------------------------------- /packages/ui/src/ProductCard/index.tsx: -------------------------------------------------------------------------------- 1 | export * from "./ProductCard"; 2 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - "apps/*" 3 | - "packages/*" 4 | -------------------------------------------------------------------------------- /apps/movies/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /apps/movies/src/index.tsx: -------------------------------------------------------------------------------- 1 | import("./bootstrap"); 2 | 3 | export default true; 4 | -------------------------------------------------------------------------------- /apps/playlist/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /apps/playlist/src/index.tsx: -------------------------------------------------------------------------------- 1 | import("./bootstrap"); 2 | 3 | export default true; 4 | -------------------------------------------------------------------------------- /packages/ui/index.tsx: -------------------------------------------------------------------------------- 1 | export * from "./src/AppShell"; 2 | export * from "./src/ProductCard"; 3 | -------------------------------------------------------------------------------- /apps/movies/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /apps/playlist/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /packages/playlist-content/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | export { Playlist } from "./PlaylistContent"; 3 | -------------------------------------------------------------------------------- /apps/movies/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/ui-lib-architecture/HEAD/apps/movies/public/favicon.ico -------------------------------------------------------------------------------- /apps/movies/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/ui-lib-architecture/HEAD/apps/movies/public/logo192.png -------------------------------------------------------------------------------- /apps/movies/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/ui-lib-architecture/HEAD/apps/movies/public/logo512.png -------------------------------------------------------------------------------- /apps/playlist/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/ui-lib-architecture/HEAD/apps/playlist/public/favicon.ico -------------------------------------------------------------------------------- /apps/playlist/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/ui-lib-architecture/HEAD/apps/playlist/public/logo192.png -------------------------------------------------------------------------------- /apps/playlist/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jherr/ui-lib-architecture/HEAD/apps/playlist/public/logo512.png -------------------------------------------------------------------------------- /packages/movies-content/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import MoviesContent from "./MoviesContent"; 3 | 4 | export { MoviesContent }; 5 | -------------------------------------------------------------------------------- /packages/tsconfig/README.md: -------------------------------------------------------------------------------- 1 | # `tsconfig` 2 | 3 | These are base shared `tsconfig.json`s from which all other `tsconfig.json`'s inherit from. 4 | -------------------------------------------------------------------------------- /apps/movies/src/MoviesContent.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { MoviesContent } from "movies-content"; 3 | export default MoviesContent; 4 | -------------------------------------------------------------------------------- /packages/card/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/react-library.json", 3 | "include": ["."], 4 | "exclude": ["dist", "build", "node_modules"] 5 | } 6 | -------------------------------------------------------------------------------- /packages/store/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/react-library.json", 3 | "include": ["."], 4 | "exclude": ["dist", "build", "node_modules"] 5 | } 6 | -------------------------------------------------------------------------------- /packages/ui/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/react-library.json", 3 | "include": ["."], 4 | "exclude": ["dist", "build", "node_modules"] 5 | } 6 | -------------------------------------------------------------------------------- /apps/movies/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/nextjs.json", 3 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 4 | "exclude": ["node_modules"] 5 | } 6 | -------------------------------------------------------------------------------- /packages/movies-content/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/react-library.json", 3 | "include": ["."], 4 | "exclude": ["dist", "build", "node_modules"] 5 | } 6 | -------------------------------------------------------------------------------- /packages/playlist-content/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/react-library.json", 3 | "include": ["."], 4 | "exclude": ["dist", "build", "node_modules"] 5 | } 6 | -------------------------------------------------------------------------------- /packages/ui/jest.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */ 2 | module.exports = { 3 | preset: "ts-jest", 4 | testEnvironment: "jsdom", 5 | }; 6 | -------------------------------------------------------------------------------- /packages/eslint-config-acme/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ["next", "prettier"], 3 | rules: { 4 | "@next/next/no-html-link-for-pages": "off", 5 | "react/jsx-key": "off", 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /apps/playlist/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/nextjs.json", 3 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "../../packages/playlist-content/PlaylistContent.tsx"], 4 | "exclude": ["node_modules"] 5 | } 6 | -------------------------------------------------------------------------------- /packages/tsconfig/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tsconfig", 3 | "version": "0.0.0", 4 | "private": true, 5 | "main": "index.js", 6 | "files": [ 7 | "base.json", 8 | "nextjs.json", 9 | "react-library.json" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | // This tells ESLint to load the config from the package `eslint-config-custom` 4 | extends: ["custom"], 5 | settings: { 6 | next: { 7 | rootDir: ["apps/*/"], 8 | }, 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /packages/ui/.storybook/preview.js: -------------------------------------------------------------------------------- 1 | export const parameters = { 2 | actions: { argTypesRegex: "^on[A-Z].*" }, 3 | controls: { 4 | matchers: { 5 | color: /(background|color)$/i, 6 | date: /Date$/, 7 | }, 8 | }, 9 | layout: "fullscreen", 10 | }; 11 | -------------------------------------------------------------------------------- /turbo.json: -------------------------------------------------------------------------------- 1 | { 2 | "pipeline": { 3 | "build": { 4 | "dependsOn": ["^build"], 5 | "outputs": ["dist/**", ".next/**"] 6 | }, 7 | "lint": { 8 | "outputs": [] 9 | }, 10 | "dev": { 11 | "cache": false 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /apps/movies/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /apps/playlist/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /packages/tsconfig/react-library.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "display": "React Library", 4 | "extends": "./base.json", 5 | "compilerOptions": { 6 | "lib": ["ES2015"], 7 | "module": "ESNext", 8 | "target": "ES6", 9 | "jsx": "react-jsx" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/ui/.storybook/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "stories": [ 3 | "../src/**/*.stories.mdx", 4 | "../src/**/*.stories.@(js|jsx|ts|tsx)" 5 | ], 6 | "addons": [ 7 | "@storybook/addon-links", 8 | "@storybook/addon-essentials", 9 | "@storybook/addon-interactions" 10 | ], 11 | "framework": "@storybook/react" 12 | } -------------------------------------------------------------------------------- /packages/store/index.tsx: -------------------------------------------------------------------------------- 1 | import create from "zustand"; 2 | 3 | export type Movie = { 4 | title: string; 5 | image: string; 6 | }; 7 | 8 | export const useStore = create<{ 9 | movies: Movie[]; 10 | addMovie: (movie: Movie) => void; 11 | }>((set) => ({ 12 | movies: [], 13 | addMovie: (movie) => set((state) => ({ movies: [...state.movies, movie] })), 14 | })); 15 | -------------------------------------------------------------------------------- /packages/eslint-config-acme/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "eslint-config-custom", 3 | "version": "0.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "dependencies": { 7 | "eslint-config-next": "^12.0.8", 8 | "eslint-config-prettier": "^8.3.0", 9 | "eslint-plugin-react": "7.28.0" 10 | }, 11 | "publishConfig": { 12 | "access": "public" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/ui/src/ProductCard/ProductCard.spec.tsx: -------------------------------------------------------------------------------- 1 | import { render } from "@testing-library/react"; 2 | import { ProductCard } from "."; 3 | 4 | describe("ProductCard", () => { 5 | it("renders", () => { 6 | const { queryAllByText } = render( 7 | 8 | ); 9 | expect(queryAllByText("Pokemon Go")).toHaveLength(1); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /apps/movies/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /apps/playlist/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /apps/movies/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /apps/playlist/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /apps/movies/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /apps/playlist/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /packages/ui/src/AppShell/AppShell.spec.tsx: -------------------------------------------------------------------------------- 1 | import { render } from "@testing-library/react"; 2 | import { AppShell } from "."; 3 | 4 | describe("AppShell", () => { 5 | it("renders", () => { 6 | const { queryAllByText } = render( 7 |
Hello
}]} 11 | /> 12 | ); 13 | expect(queryAllByText("Foo")).toHaveLength(1); 14 | expect(queryAllByText("Hello")).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | .pnp 6 | .pnp.js 7 | dist 8 | 9 | # testing 10 | coverage 11 | 12 | # next.js 13 | .next/ 14 | out/ 15 | build 16 | 17 | # misc 18 | .DS_Store 19 | *.pem 20 | 21 | # debug 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | .pnpm-debug.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # turbo 34 | .turbo 35 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "turborepo-basic-shared", 3 | "version": "0.0.0", 4 | "private": true, 5 | "workspaces": [ 6 | "apps/*", 7 | "packages/*" 8 | ], 9 | "scripts": { 10 | "build": "turbo run build", 11 | "dev": "turbo run dev --parallel", 12 | "lint": "turbo run lint", 13 | "format": "prettier --write \"**/*.{ts,tsx,md}\"" 14 | }, 15 | "devDependencies": { 16 | "prettier": "latest", 17 | "turbo": "latest" 18 | }, 19 | "engines": { 20 | "npm": ">=7.0.0", 21 | "node": ">=14.0.0" 22 | }, 23 | "packageManager": "pnpm@7.1.2" 24 | } -------------------------------------------------------------------------------- /apps/movies/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /apps/playlist/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /packages/tsconfig/base.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "display": "Default", 4 | "compilerOptions": { 5 | "composite": false, 6 | "declaration": true, 7 | "declarationMap": true, 8 | "esModuleInterop": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "inlineSources": false, 11 | "isolatedModules": true, 12 | "moduleResolution": "node", 13 | "noUnusedLocals": false, 14 | "noUnusedParameters": false, 15 | "preserveWatchOutput": true, 16 | "skipLibCheck": true, 17 | "strict": true 18 | }, 19 | "exclude": ["node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /packages/ui/src/ProductCard/ProductCard.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Card, Title, Button, Text, Group, Paper } from "@mantine/core"; 3 | 4 | export const ProductCard: React.FunctionComponent<{ 5 | title?: string; 6 | description?: string; 7 | }> = ({ title = "", description = "" }) => { 8 | return ( 9 | 10 | 11 | 12 | {title} 13 | 14 | 15 | {description} 16 | 17 | 18 | 19 | 20 | ); 21 | }; 22 | -------------------------------------------------------------------------------- /apps/movies/src/bootstrap.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /apps/playlist/src/bootstrap.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /packages/playlist-content/PlaylistContent.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Box, Title, Grid } from "@mantine/core"; 3 | 4 | import { useStore } from "store"; 5 | import { MovieCard } from "card"; 6 | 7 | export const Playlist = () => { 8 | const { movies } = useStore(); 9 | return ( 10 | <> 11 | 12 | Viewing List 13 | 14 | 20 | {movies.map((movie) => ( 21 | 22 | ))} 23 | 24 | 25 | ); 26 | }; 27 | -------------------------------------------------------------------------------- /packages/store/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "store", 3 | "version": "0.0.0", 4 | "main": "./dist/index.js", 5 | "types": "./dist/index.d.ts", 6 | "license": "MIT", 7 | "scripts": { 8 | "dev": "tsc --watch --outDir dist", 9 | "build": "tsc --outDir dist", 10 | "lint": "eslint *.ts*" 11 | }, 12 | "devDependencies": { 13 | "@types/react": "^18.0.9", 14 | "@types/react-dom": "^18.0.4", 15 | "eslint": "^7.32.0", 16 | "eslint-config-custom": "workspace:*", 17 | "react": "^18.1.0", 18 | "tsconfig": "workspace:*", 19 | "typescript": "^4.5.2" 20 | }, 21 | "dependencies": { 22 | "zustand": "4.0.0-rc.1" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/tsconfig/nextjs.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "display": "Next.js", 4 | "extends": "./base.json", 5 | "compilerOptions": { 6 | "target": "es5", 7 | "lib": ["dom", "dom.iterable", "esnext"], 8 | "allowJs": true, 9 | "skipLibCheck": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "noEmit": true, 13 | "incremental": true, 14 | "esModuleInterop": true, 15 | "module": "esnext", 16 | "resolveJsonModule": true, 17 | "isolatedModules": true, 18 | "jsx": "preserve" 19 | }, 20 | "include": ["src", "next-env.d.ts"], 21 | "exclude": ["node_modules"] 22 | } 23 | -------------------------------------------------------------------------------- /packages/card/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "card", 3 | "version": "0.0.0", 4 | "main": "./dist/index.js", 5 | "types": "./dist/index.d.ts", 6 | "license": "MIT", 7 | "scripts": { 8 | "dev": "tsc --watch --outDir dist", 9 | "build": "tsc --outDir dist", 10 | "lint": "eslint *.ts*" 11 | }, 12 | "devDependencies": { 13 | "@types/react": "^18.0.9", 14 | "@types/react-dom": "^18.0.4", 15 | "eslint": "^7.32.0", 16 | "eslint-config-custom": "workspace:*", 17 | "react": "^18.1.0", 18 | "store": "workspace:*", 19 | "tsconfig": "workspace:*", 20 | "typescript": "^4.5.2" 21 | }, 22 | "dependencies": { 23 | "@mantine/core": "^4.2.6", 24 | "@mantine/hooks": "^4.2.6" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /apps/movies/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /apps/playlist/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /packages/ui/src/AppShell/AppShell.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { ComponentStory, ComponentMeta } from "@storybook/react"; 3 | 4 | import { AppShell } from "."; 5 | 6 | export default { 7 | title: "AppShell", 8 | component: AppShell, 9 | } as ComponentMeta; 10 | 11 | const Template: ComponentStory = (args) => ( 12 |
Home
, 18 | }, 19 | ]} 20 | navLinks={[ 21 | { 22 | label: "Home", 23 | path: "/", 24 | }, 25 | ]} 26 | /> 27 | ); 28 | 29 | export const Primary = Template.bind({}); 30 | Primary.args = { 31 | title: "My App", 32 | }; 33 | -------------------------------------------------------------------------------- /apps/movies/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { AppShell } from "ui"; 3 | 4 | import { Playlist } from "playlist-content"; 5 | import { MoviesContent } from "movies-content"; 6 | 7 | function App() { 8 | return ( 9 | 32 | ); 33 | } 34 | 35 | export default App; 36 | -------------------------------------------------------------------------------- /packages/movies-content/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "movies-content", 3 | "version": "0.0.0", 4 | "main": "./dist/index.js", 5 | "types": "./dist/index.d.ts", 6 | "license": "MIT", 7 | "scripts": { 8 | "dev": "tsc --watch --outDir dist", 9 | "build": "tsc --outDir dist", 10 | "lint": "eslint *.ts*" 11 | }, 12 | "devDependencies": { 13 | "@types/react": "^18.0.9", 14 | "@types/react-dom": "^18.0.4", 15 | "eslint": "^7.32.0", 16 | "eslint-config-custom": "workspace:*", 17 | "react": "^18.1.0", 18 | "store": "workspace:*", 19 | "card": "workspace:*", 20 | "tsconfig": "workspace:*", 21 | "typescript": "^4.5.2" 22 | }, 23 | "dependencies": { 24 | "@mantine/core": "^4.2.6", 25 | "@mantine/hooks": "^4.2.6", 26 | "react-router-dom": "^6.3.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/playlist-content/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "playlist-content", 3 | "version": "0.0.0", 4 | "main": "./dist/index.js", 5 | "types": "./dist/index.d.ts", 6 | "license": "MIT", 7 | "scripts": { 8 | "dev": "tsc --watch --outDir dist", 9 | "build": "tsc --outDir dist", 10 | "lint": "eslint *.ts*" 11 | }, 12 | "devDependencies": { 13 | "@types/react": "^18.0.9", 14 | "@types/react-dom": "^18.0.4", 15 | "eslint": "^7.32.0", 16 | "eslint-config-custom": "workspace:*", 17 | "react": "^18.1.0", 18 | "store": "workspace:*", 19 | "card": "workspace:*", 20 | "tsconfig": "workspace:*", 21 | "typescript": "^4.5.2" 22 | }, 23 | "dependencies": { 24 | "@mantine/core": "^4.2.6", 25 | "@mantine/hooks": "^4.2.6", 26 | "react-router-dom": "^6.3.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/ui/src/ProductCard/ProductCard.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Story, Canvas } from '@storybook/addon-docs'; 2 | 3 | import { ProductCard } from '.'; 4 | 5 | 6 | 7 | export const Template = (args) => 8 | 9 | # ProductCard Stories 10 | 11 | Let's define a story for our `ProductCard` component: 12 | 13 | 19 | {Template.bind({})} 20 | 21 | 22 | We can drop it in a `Canvas` to get a code snippet: 23 | 24 | 25 | 31 | {Template.bind({})} 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /packages/card/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | Card, 4 | Image, 5 | Text, 6 | Button, 7 | Group, 8 | useMantineTheme, 9 | } from "@mantine/core"; 10 | import { useStore } from "store"; 11 | 12 | export const MovieCard: React.FunctionComponent<{ 13 | title: string; 14 | image: string; 15 | showAddButton?: boolean; 16 | }> = ({ title, image, showAddButton }) => { 17 | const theme = useMantineTheme(); 18 | const { addMovie } = useStore(); 19 | 20 | return ( 21 | 22 | 23 | {title} 24 | 25 | 26 | 30 | {title} 31 | 32 | 33 | {showAddButton && ( 34 | 43 | )} 44 | 45 | ); 46 | }; 47 | -------------------------------------------------------------------------------- /apps/movies/.cracorc.js: -------------------------------------------------------------------------------- 1 | const { ModuleFederationPlugin } = require("webpack").container; 2 | 3 | const deps = require("./package.json").dependencies; 4 | 5 | module.exports = () => ({ 6 | webpack: { 7 | configure: { 8 | output: { 9 | publicPath: "auto", 10 | }, 11 | }, 12 | plugins: { 13 | add: [ 14 | new ModuleFederationPlugin({ 15 | name: "movies", 16 | filename: "remoteEntry.js", 17 | exposes: { 18 | "./Movies": "./src/MoviesContent", 19 | }, 20 | shared: { 21 | ...deps, 22 | card: { 23 | singleton: true, 24 | }, 25 | "movies-content": { 26 | singleton: true, 27 | }, 28 | "playlist-content": { 29 | singleton: true, 30 | }, 31 | tsconfig: { 32 | singleton: true, 33 | }, 34 | ui: { 35 | singleton: true, 36 | }, 37 | react: { 38 | singleton: true, 39 | requiredVersion: deps.react, 40 | }, 41 | "react-dom": { 42 | singleton: true, 43 | requiredVersion: deps["react-dom"], 44 | }, 45 | }, 46 | }), 47 | ], 48 | }, 49 | }, 50 | }); 51 | -------------------------------------------------------------------------------- /packages/ui/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ui", 3 | "version": "0.0.0", 4 | "main": "./dist/index.js", 5 | "types": "./dist/index.d.ts", 6 | "license": "MIT", 7 | "scripts": { 8 | "dev": "tsc --watch --outDir dist", 9 | "build": "tsc --outDir dist", 10 | "lint": "eslint *.ts*", 11 | "storybook": "start-storybook", 12 | "test": "jest" 13 | }, 14 | "devDependencies": { 15 | "@storybook/addon-essentials": "^6.5.6", 16 | "@storybook/addon-interactions": "^6.5.6", 17 | "@storybook/addon-links": "^6.5.6", 18 | "@storybook/react": "^6.5.6", 19 | "@storybook/testing-library": "^0.0.11", 20 | "@testing-library/react": "^13.2.0", 21 | "@types/jest": "^27.5.1", 22 | "@types/react": "^18.0.9", 23 | "@types/react-dom": "^18.0.4", 24 | "@types/react-test-renderer": "^18.0.0", 25 | "eslint": "^7.32.0", 26 | "eslint-config-custom": "workspace:*", 27 | "jest": "^28.1.0", 28 | "jest-environment-jsdom": "^28.1.0", 29 | "react": "^18.1.0", 30 | "react-dom": "^18.1.0", 31 | "react-test-renderer": "^18.1.0", 32 | "store": "workspace:*", 33 | "ts-jest": "^28.0.4", 34 | "tsconfig": "workspace:*", 35 | "typescript": "^4.5.2" 36 | }, 37 | "dependencies": { 38 | "@mantine/core": "^4.2.6", 39 | "@mantine/hooks": "^4.2.6", 40 | "react-router-dom": "^6.3.0" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /apps/movies/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "movies", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@mantine/core": "^4.2.6", 7 | "@mantine/hooks": "^4.2.6", 8 | "@testing-library/jest-dom": "^5.16.4", 9 | "@testing-library/react": "^13.2.0", 10 | "@testing-library/user-event": "^13.5.0", 11 | "@types/jest": "^27.5.1", 12 | "@types/node": "^16.11.36", 13 | "@types/react": "^18.0.9", 14 | "@types/react-dom": "^18.0.4", 15 | "card": "workspace:*", 16 | "movies-content": "workspace:*", 17 | "playlist-content": "workspace:*", 18 | "react": "^18.1.0", 19 | "react-dom": "^18.1.0", 20 | "react-scripts": "5.0.1", 21 | "tsconfig": "workspace:*", 22 | "typescript": "^4.6.4", 23 | "ui": "workspace:*", 24 | "web-vitals": "^2.1.4" 25 | }, 26 | "scripts": { 27 | "dev": "craco start", 28 | "build": "craco build", 29 | "test": "craco test", 30 | "eject": "react-scripts eject" 31 | }, 32 | "eslintConfig": { 33 | "extends": [ 34 | "react-app", 35 | "react-app/jest" 36 | ] 37 | }, 38 | "browserslist": { 39 | "production": [ 40 | ">0.2%", 41 | "not dead", 42 | "not op_mini all" 43 | ], 44 | "development": [ 45 | "last 1 chrome version", 46 | "last 1 firefox version", 47 | "last 1 safari version" 48 | ] 49 | }, 50 | "devDependencies": { 51 | "@craco/craco": "^6.4.3" 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /apps/playlist/.cracorc.js: -------------------------------------------------------------------------------- 1 | const { ModuleFederationPlugin } = require("webpack").container; 2 | 3 | const deps = require("./package.json").dependencies; 4 | 5 | module.exports = () => ({ 6 | webpack: { 7 | configure: { 8 | output: { 9 | publicPath: "auto", 10 | }, 11 | }, 12 | plugins: { 13 | add: [ 14 | new ModuleFederationPlugin({ 15 | name: "playlist", 16 | filename: "remoteEntry.js", 17 | remotes: { 18 | movies: "movies@http://localhost:3000/remoteEntry.js", 19 | }, 20 | shared: { 21 | ...deps, 22 | card: { 23 | singleton: true, 24 | }, 25 | "movies-content": { 26 | singleton: true, 27 | }, 28 | "playlist-content": { 29 | singleton: true, 30 | }, 31 | tsconfig: { 32 | singleton: true, 33 | }, 34 | ui: { 35 | singleton: true, 36 | }, 37 | store: { 38 | singleton: true, 39 | }, 40 | react: { 41 | singleton: true, 42 | requiredVersion: deps.react, 43 | }, 44 | "react-dom": { 45 | singleton: true, 46 | requiredVersion: deps["react-dom"], 47 | }, 48 | }, 49 | }), 50 | ], 51 | }, 52 | }, 53 | }); 54 | -------------------------------------------------------------------------------- /apps/playlist/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "playlist", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@mantine/core": "^4.2.6", 7 | "@mantine/hooks": "^4.2.6", 8 | "@testing-library/jest-dom": "^5.16.4", 9 | "@testing-library/react": "^13.2.0", 10 | "@testing-library/user-event": "^13.5.0", 11 | "@types/jest": "^27.5.1", 12 | "@types/node": "^16.11.36", 13 | "@types/react": "^18.0.9", 14 | "@types/react-dom": "^18.0.4", 15 | "card": "workspace:*", 16 | "movies-content": "workspace:*", 17 | "playlist-content": "workspace:*", 18 | "react": "^18.1.0", 19 | "react-dom": "^18.1.0", 20 | "react-scripts": "5.0.1", 21 | "store": "workspace:*", 22 | "tsconfig": "workspace:*", 23 | "typescript": "^4.6.4", 24 | "ui": "workspace:*", 25 | "web-vitals": "^2.1.4" 26 | }, 27 | "scripts": { 28 | "dev": "PORT=3001 craco start", 29 | "build": "craco build", 30 | "test": "craco test", 31 | "eject": "react-scripts eject" 32 | }, 33 | "eslintConfig": { 34 | "extends": [ 35 | "react-app", 36 | "react-app/jest" 37 | ] 38 | }, 39 | "browserslist": { 40 | "production": [ 41 | ">0.2%", 42 | "not dead", 43 | "not op_mini all" 44 | ], 45 | "development": [ 46 | "last 1 chrome version", 47 | "last 1 firefox version", 48 | "last 1 safari version" 49 | ] 50 | }, 51 | "devDependencies": { 52 | "@craco/craco": "^6.4.3" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /apps/playlist/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { AppShell } from "ui"; 3 | 4 | import { MoviesContent } from "movies-content"; 5 | import { Playlist } from "playlist-content"; 6 | // @ts-ignore 7 | const MoviesContentRuntime = React.lazy(() => import("movies/Movies")); 8 | 9 | class ErrorBoundary extends React.Component< 10 | { 11 | children: React.ReactNode; 12 | }, 13 | { 14 | hasError: boolean; 15 | } 16 | > { 17 | constructor(props: { children: React.ReactNode }) { 18 | super(props); 19 | this.state = { hasError: false }; 20 | } 21 | 22 | static getDerivedStateFromError() { 23 | return { hasError: true }; 24 | } 25 | 26 | componentDidCatch() {} 27 | 28 | render() { 29 | if (this.state.hasError) { 30 | return ; 31 | } 32 | 33 | return this.props.children; 34 | } 35 | } 36 | 37 | function App() { 38 | return ( 39 | ( 46 | 47 | 48 | 49 | ), 50 | }, 51 | { 52 | path: "/playlist", 53 | element: Playlist, 54 | }, 55 | ]} 56 | navLinks={[ 57 | { 58 | label: "Home", 59 | path: "/", 60 | }, 61 | { 62 | label: "Playlist", 63 | path: "/playlist", 64 | }, 65 | ]} 66 | /> 67 | ); 68 | } 69 | 70 | export default App; 71 | -------------------------------------------------------------------------------- /packages/movies-content/MoviesContent.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Grid, Title } from "@mantine/core"; 3 | import { MovieCard } from "card"; 4 | 5 | const movies = [ 6 | { 7 | title: "Halo", 8 | image: 9 | "https://www.themoviedb.org/t/p/w440_and_h660_face/eO0QV5qJaEngP1Ax9w3eV6bJG2f.jpg", 10 | }, 11 | { 12 | title: "Doctor Strange", 13 | image: 14 | "https://www.themoviedb.org/t/p/w440_and_h660_face/uGBVj3bEbCoZbDjjl9wTxcygko1.jpg", 15 | }, 16 | { 17 | title: "The Lost City", 18 | image: 19 | "https://www.themoviedb.org/t/p/w440_and_h660_face/neMZH82Stu91d3iqvLdNQfqPPyl.jpg", 20 | }, 21 | { 22 | title: "Shang-Chi", 23 | image: 24 | "https://www.themoviedb.org/t/p/w440_and_h660_face/1BIoJGKbXjdFDAqUEiA2VHqkK1Z.jpg", 25 | }, 26 | { 27 | title: "Turning Red", 28 | image: 29 | "https://www.themoviedb.org/t/p/w440_and_h660_face/qsdjk9oAKSQMWs0Vt5Pyfh6O4GZ.jpg", 30 | }, 31 | { 32 | title: "Encanto", 33 | image: 34 | "https://www.themoviedb.org/t/p/w440_and_h660_face/4j0PNHkMr5ax3IA8tjtxcmPU3QT.jpg", 35 | }, 36 | { 37 | title: "Adam Project", 38 | image: 39 | "https://www.themoviedb.org/t/p/w440_and_h660_face/wFjboE0aFZNbVOF05fzrka9Fqyx.jpg", 40 | }, 41 | { 42 | title: "Morbius", 43 | image: 44 | "https://www.themoviedb.org/t/p/w440_and_h660_face/6JjfSchsU6daXk2AKX8EEBjO3Fm.jpg", 45 | }, 46 | ]; 47 | 48 | const MoviesContent = () => ( 49 | <> 50 | Movies 51 | 56 | {movies.map((movie) => ( 57 | 58 | ))} 59 | 60 | 61 | ); 62 | 63 | export default MoviesContent; 64 | -------------------------------------------------------------------------------- /apps/movies/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /apps/playlist/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /apps/movies/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /apps/playlist/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Turborepo starter with pnpm 2 | 3 | This is an official starter turborepo. 4 | 5 | ## What's inside? 6 | 7 | This turborepo uses [pnpm](https://pnpm.io) as a packages manager. It includes the following packages/apps: 8 | 9 | ### Apps and Packages 10 | 11 | - `docs`: a [Next.js](https://nextjs.org) app 12 | - `web`: another [Next.js](https://nextjs.org) app 13 | - `ui`: a stub React component library shared by both `web` and `docs` applications 14 | - `eslint-config-custom`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`) 15 | - `tsconfig`: `tsconfig.json`s used throughout the monorepo 16 | 17 | Each package/app is 100% [TypeScript](https://www.typescriptlang.org/). 18 | 19 | ### Utilities 20 | 21 | This turborepo has some additional tools already setup for you: 22 | 23 | - [TypeScript](https://www.typescriptlang.org/) for static type checking 24 | - [ESLint](https://eslint.org/) for code linting 25 | - [Prettier](https://prettier.io) for code formatting 26 | 27 | ## Setup 28 | 29 | This repository is used in the `npx create-turbo@latest` command, and selected when choosing which package manager you wish to use with your monorepo (pnpm). 30 | 31 | ### Build 32 | 33 | To build all apps and packages, run the following command: 34 | 35 | ``` 36 | cd my-turborepo 37 | pnpm run build 38 | ``` 39 | 40 | ### Develop 41 | 42 | To develop all apps and packages, run the following command: 43 | 44 | ``` 45 | cd my-turborepo 46 | pnpm run dev 47 | ``` 48 | 49 | ### Remote Caching 50 | 51 | Turborepo can use a technique known as [Remote Caching (Beta)](https://turborepo.org/docs/core-concepts/remote-caching) to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines. 52 | 53 | By default, Turborepo will cache locally. To enable Remote Caching (Beta) you will need an account with Vercel. If you don't have an account you can [create one](https://vercel.com/signup), then enter the following commands: 54 | 55 | ``` 56 | cd my-turborepo 57 | pnpx turbo login 58 | ``` 59 | 60 | This will authenticate the Turborepo CLI with your [Vercel account](https://vercel.com/docs/concepts/personal-accounts/overview). 61 | 62 | Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your turborepo: 63 | 64 | ``` 65 | pnpx turbo link 66 | ``` 67 | 68 | ## Useful Links 69 | 70 | Learn more about the power of Turborepo: 71 | 72 | - [Pipelines](https://turborepo.org/docs/core-concepts/pipelines) 73 | - [Caching](https://turborepo.org/docs/core-concepts/caching) 74 | - [Remote Caching (Beta)](https://turborepo.org/docs/core-concepts/remote-caching) 75 | - [Scoped Tasks](https://turborepo.org/docs/core-concepts/scopes) 76 | - [Configuration Options](https://turborepo.org/docs/reference/configuration) 77 | - [CLI Usage](https://turborepo.org/docs/reference/command-line-reference) 78 | -------------------------------------------------------------------------------- /packages/ui/src/AppShell/AppShell.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { BrowserRouter, Outlet, Link, Routes, Route } from "react-router-dom"; 3 | import { 4 | AppShell as MantineAppShell, 5 | Header, 6 | Title, 7 | MantineProvider, 8 | Navbar, 9 | UnstyledButton, 10 | Group, 11 | Text, 12 | } from "@mantine/core"; 13 | 14 | import { useStore } from "store"; 15 | 16 | export type Route = { 17 | element: React.FunctionComponent; 18 | path: string; 19 | }; 20 | 21 | export type NavLink = { 22 | label: string; 23 | path: string; 24 | }; 25 | 26 | function MainLink({ label, path }: NavLink) { 27 | return ( 28 | 29 | ({ 31 | display: "block", 32 | width: "100%", 33 | padding: theme.spacing.xs, 34 | borderRadius: theme.radius.sm, 35 | color: 36 | theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black, 37 | "&:hover": { 38 | backgroundColor: 39 | theme.colorScheme === "dark" 40 | ? theme.colors.dark[6] 41 | : theme.colors.gray[0], 42 | }, 43 | })} 44 | > 45 | 46 | {label} 47 | 48 | 49 | 50 | ); 51 | } 52 | 53 | export const AppShell: React.FunctionComponent<{ 54 | title: string; 55 | routes: Route[]; 56 | navLinks: NavLink[]; 57 | colorScheme?: "light" | "dark"; 58 | }> = ({ title, colorScheme, routes, navLinks }) => { 59 | const { movies } = useStore(); 60 | return ( 61 | 62 | 69 | 73 | {navLinks.map((link) => ( 74 | 75 | ))} 76 | 77 | } 78 | header={ 79 |
({ 86 | main: { 87 | backgroundColor: 88 | theme.colorScheme === "dark" 89 | ? theme.colors.dark[8] 90 | : theme.colors.gray[0], 91 | }, 92 | })} 93 | > 94 | {title} 95 | {movies.length} selected 96 |
97 | } 98 | > 99 | 100 | {routes.map((route) => ( 101 | } 105 | /> 106 | ))} 107 | 108 | 109 | 110 | 111 | 112 | ); 113 | }; 114 | -------------------------------------------------------------------------------- /architecture.dio: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | --------------------------------------------------------------------------------