From 2a16314865ebd408fee4edfbc89eb632c887b795 Mon Sep 17 00:00:00 2001 From: Fuwn Date: Tue, 10 Nov 2020 11:50:24 -0800 Subject: repo --- src/App/App.scss | 41 +++++++++++++++++++++++++++++ src/App/App.test.tsx | 9 +++++++ src/App/App.tsx | 26 ++++++++++++++++++ src/assets/logo.svg | 7 +++++ src/components/Navigation/NavigationBar.tsx | 35 ++++++++++++++++++++++++ src/index.scss | 13 +++++++++ src/index.tsx | 19 +++++++++++++ src/react-app-env.d.ts | 1 + src/reportWebVitals.ts | 15 +++++++++++ src/setupTests.ts | 5 ++++ src/styles/bulma.scss | 37 ++++++++++++++++++++++++++ 11 files changed, 208 insertions(+) create mode 100644 src/App/App.scss create mode 100644 src/App/App.test.tsx create mode 100644 src/App/App.tsx create mode 100644 src/assets/logo.svg create mode 100644 src/components/Navigation/NavigationBar.tsx create mode 100644 src/index.scss create mode 100644 src/index.tsx create mode 100644 src/react-app-env.d.ts create mode 100644 src/reportWebVitals.ts create mode 100644 src/setupTests.ts create mode 100644 src/styles/bulma.scss (limited to 'src') diff --git a/src/App/App.scss b/src/App/App.scss new file mode 100644 index 0000000..c02a1e2 --- /dev/null +++ b/src/App/App.scss @@ -0,0 +1,41 @@ +// @import "~bootstrap/scss/bootstrap.scss"; +@import "../styles/bulma.scss"; + +.App { + text-align: center; +} + +.App-logo { + height: 40vmin; + pointer-events: none; +} + +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } +} + +.App-header { + background-color: #282c34; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; +} + +.App-link { + color: #61dafb; +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/src/App/App.test.tsx b/src/App/App.test.tsx new file mode 100644 index 0000000..2a68616 --- /dev/null +++ b/src/App/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(); + const linkElement = screen.getByText(/learn react/i); + expect(linkElement).toBeInTheDocument(); +}); diff --git a/src/App/App.tsx b/src/App/App.tsx new file mode 100644 index 0000000..d6d01b9 --- /dev/null +++ b/src/App/App.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import logo from '../assets/logo.svg'; +import './App.scss'; + +import NavigationBar from "../components/Navigation/NavigationBar"; + +function App() { + return ( +
+ + +
+ logo +

Edit src/App.tsx and save to reload.

+ + Learn React + +
+
+ ); +} + +export default App; diff --git a/src/assets/logo.svg b/src/assets/logo.svg new file mode 100644 index 0000000..6b60c10 --- /dev/null +++ b/src/assets/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/Navigation/NavigationBar.tsx b/src/components/Navigation/NavigationBar.tsx new file mode 100644 index 0000000..0b53061 --- /dev/null +++ b/src/components/Navigation/NavigationBar.tsx @@ -0,0 +1,35 @@ +import React from 'react'; + +function NavigationBar() { + return ( + + ); +} + +export default NavigationBar; diff --git a/src/index.scss b/src/index.scss new file mode 100644 index 0000000..ec2585e --- /dev/null +++ b/src/index.scss @@ -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/src/index.tsx b/src/index.tsx new file mode 100644 index 0000000..50752f1 --- /dev/null +++ b/src/index.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import './index.scss'; +import App from './App/App'; +import reportWebVitals from './reportWebVitals'; +/* import "bootstrap/dist/css/bootstrap.css"; */ +/* import "./styles/react-custom.scss"; */ + +ReactDOM.render( + + + , + 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/src/react-app-env.d.ts b/src/react-app-env.d.ts new file mode 100644 index 0000000..6431bc5 --- /dev/null +++ b/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/src/reportWebVitals.ts b/src/reportWebVitals.ts new file mode 100644 index 0000000..59d81aa --- /dev/null +++ b/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/src/setupTests.ts b/src/setupTests.ts new file mode 100644 index 0000000..8f2609b --- /dev/null +++ b/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'; diff --git a/src/styles/bulma.scss b/src/styles/bulma.scss new file mode 100644 index 0000000..3b75123 --- /dev/null +++ b/src/styles/bulma.scss @@ -0,0 +1,37 @@ +@charset "utf-8"; + +// Import a Google Font +@import url("https://fonts.googleapis.com/css?family=Nunito:400,700"); + +// Set your brand colors +$purple: #8a4d76; +$pink: #fa7c91; +$brown: #757763; +$beige-light: #d0d1cd; +$beige-lighter: #eff0eb; + +// Update Bulma's global variables +$family-sans-serif: "Nunito", sans-serif; +$grey-dark: $brown; +$grey-light: $beige-light; +$primary: $purple; +$link: $pink; +$widescreen-enabled: false; +$fullhd-enabled: false; + +// Update some of Bulma's component variables +$body-background-color: $beige-lighter; +$control-border-width: 2px; +$input-border-color: transparent; +$input-shadow: none; + +// Import only what you need from Bulma +@import "~bulma/sass/utilities/_all.sass"; +@import "~bulma/sass/base/_all.sass"; +@import "~bulma/sass/elements/button.sass"; +@import "~bulma/sass/elements/container.sass"; +@import "~bulma/sass/elements/form.sass"; +@import "~bulma/sass/elements/title.sass"; +@import "~bulma/sass/components/navbar.sass"; +@import "~bulma/sass/layout/hero.sass"; +@import "~bulma/sass/layout/section.sass"; -- cgit v1.2.3