diff options
Diffstat (limited to 'examples/with-create-react-app/apps/web/src')
8 files changed, 113 insertions, 0 deletions
diff --git a/examples/with-create-react-app/apps/web/src/App.css b/examples/with-create-react-app/apps/web/src/App.css new file mode 100644 index 0000000..2be1fcc --- /dev/null +++ b/examples/with-create-react-app/apps/web/src/App.css @@ -0,0 +1,26 @@ +.App { + text-align: center; +} + +.Turborepo { + font-size: 72px; + background: linear-gradient(to right, #0099f7, #f11712); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} + +.App-header { + background-color: #18181b; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; +} + +.App-link { + color: white; +} diff --git a/examples/with-create-react-app/apps/web/src/App.test.tsx b/examples/with-create-react-app/apps/web/src/App.test.tsx new file mode 100644 index 0000000..bbcbc62 --- /dev/null +++ b/examples/with-create-react-app/apps/web/src/App.test.tsx @@ -0,0 +1,9 @@ +import React from "react"; +import { render, screen } from "@testing-library/react"; +import App from "./App"; + +test("renders learn react link", () => { + render(<App />); + const linkElement = screen.getByText(/Turborepo Example/i); + expect(linkElement).toBeInTheDocument(); +}); diff --git a/examples/with-create-react-app/apps/web/src/App.tsx b/examples/with-create-react-app/apps/web/src/App.tsx new file mode 100644 index 0000000..f260409 --- /dev/null +++ b/examples/with-create-react-app/apps/web/src/App.tsx @@ -0,0 +1,27 @@ +import React from "react"; +import { Link } from "ui"; +import "./App.css"; + +function App() { + return ( + <div className="App"> + <header className="App-header"> + <h1 className="header"> + Web + <div className="Turborepo">Turborepo Example</div> + </h1> + <div> + <Link className="App-link" href="https://turbo.build/repo"> + Turborepo Docs + </Link> + <span> | </span> + <Link className="App-link" href="https://reactjs.org"> + React Docs + </Link> + </div> + </header> + </div> + ); +} + +export default App; diff --git a/examples/with-create-react-app/apps/web/src/index.css b/examples/with-create-react-app/apps/web/src/index.css new file mode 100644 index 0000000..4a1df4d --- /dev/null +++ b/examples/with-create-react-app/apps/web/src/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", + "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", + monospace; +} diff --git a/examples/with-create-react-app/apps/web/src/index.tsx b/examples/with-create-react-app/apps/web/src/index.tsx new file mode 100644 index 0000000..ad9cbbb --- /dev/null +++ b/examples/with-create-react-app/apps/web/src/index.tsx @@ -0,0 +1,17 @@ +import React from "react"; +import ReactDOM from "react-dom"; +import "./index.css"; +import App from "./App"; +import reportWebVitals from "./reportWebVitals"; + +ReactDOM.render( + <React.StrictMode> + <App /> + </React.StrictMode>, + document.getElementById("root") +); + +// If you want to start measuring performance in your app, pass a function +// to log results (for example: reportWebVitals(console.log)) +// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals +reportWebVitals(); diff --git a/examples/with-create-react-app/apps/web/src/react-app-env.d.ts b/examples/with-create-react-app/apps/web/src/react-app-env.d.ts new file mode 100644 index 0000000..6431bc5 --- /dev/null +++ b/examples/with-create-react-app/apps/web/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// <reference types="react-scripts" /> diff --git a/examples/with-create-react-app/apps/web/src/reportWebVitals.ts b/examples/with-create-react-app/apps/web/src/reportWebVitals.ts new file mode 100644 index 0000000..5fa3583 --- /dev/null +++ b/examples/with-create-react-app/apps/web/src/reportWebVitals.ts @@ -0,0 +1,15 @@ +import { ReportHandler } from "web-vitals"; + +const reportWebVitals = (onPerfEntry?: ReportHandler) => { + if (onPerfEntry && onPerfEntry instanceof Function) { + import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + getCLS(onPerfEntry); + getFID(onPerfEntry); + getFCP(onPerfEntry); + getLCP(onPerfEntry); + getTTFB(onPerfEntry); + }); + } +}; + +export default reportWebVitals; diff --git a/examples/with-create-react-app/apps/web/src/setupTests.ts b/examples/with-create-react-app/apps/web/src/setupTests.ts new file mode 100644 index 0000000..1dd407a --- /dev/null +++ b/examples/with-create-react-app/apps/web/src/setupTests.ts @@ -0,0 +1,5 @@ +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import "@testing-library/jest-dom"; |