Skip to content
Snippets Groups Projects
Commit 02604c88 authored by xaralis's avatar xaralis
Browse files

Initial commit

parent ca68e94a
Branches
No related tags found
No related merge requests found
Pipeline #1242 failed
.env 0 → 100644
REACT_APP_STYLEGUIDE_URL=http://localhost:3001/
{
"compilerOptions": {
"baseUrl": "./src",
"module": "commonjs",
"target": "es2019",
"jsx": "react"
},
"include": ["./src/**/*"]
}
This diff is collapsed.
...@@ -3,21 +3,82 @@ ...@@ -3,21 +3,82 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@testing-library/jest-dom": "^4.2.4", "@sentry/react": "^5.23.0",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1", "@testing-library/user-event": "^7.2.1",
"classnames": "^2.2.6",
"react": "^16.13.1", "react": "^16.13.1",
"react-device-detect": "^1.13.1",
"react-dom": "^16.13.1", "react-dom": "^16.13.1",
"react-modal": "^3.11.2",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3" "react-scripts": "3.4.3"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",
"build": "react-scripts build", "build": "react-scripts build",
"test": "react-scripts test", "test": "react-scripts test --env=jsdom-fourteen",
"eject": "react-scripts eject" "eject": "react-scripts eject",
"lint": "eslint --cache 'src/**/*.{js,jsx}'",
"lint:fix": "eslint --cache --fix 'src/**/*.{js,jsx}'"
}, },
"eslintConfig": { "eslintConfig": {
"extends": "react-app" "extends": [
"react-app",
"plugin:prettier/recommended",
"plugin:testing-library/recommended",
"plugin:jest-dom/recommended"
],
"plugins": [
"simple-import-sort",
"testing-library",
"jest-dom"
],
"rules": {
"sort-imports": "off",
"prettier/prettier": "warn",
"react/no-unknown-property": [
1
],
"simple-import-sort/sort": [
"warn",
{
"groups": [
[
"^react",
"^@?\\w"
],
[
"^(components|containers|pages|utils)(/.*|$)"
],
[
"^(test-utils)(/.*|$)"
],
[
"^\\u0000"
],
[
"^\\.\\.(?!/?$)",
"^\\.\\./?$"
],
[
"^\\./(?=.*/)(?!/?$)",
"^\\.(?!/?$)",
"^\\./?$"
],
[
"^.+\\.s?css$"
]
]
}
],
"testing-library/await-async-query": "error",
"testing-library/no-await-sync-query": "error",
"testing-library/no-debug": "warn",
"jest-dom/prefer-checked": "error",
"jest-dom/prefer-enabled-disabled": "error",
"jest-dom/prefer-required": "error",
"jest-dom/prefer-to-have-attribute": "error"
}
}, },
"browserslist": { "browserslist": {
"production": [ "production": [
...@@ -30,5 +91,22 @@ ...@@ -30,5 +91,22 @@
"last 1 firefox version", "last 1 firefox version",
"last 1 safari version" "last 1 safari version"
] ]
},
"devDependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"babel-core": "^6.26.3",
"babel-eslint": "^10.1.0",
"eslint": "^6.6.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jest-dom": "^3.2.3",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-simple-import-sort": "^5.0.3",
"eslint-plugin-testing-library": "^3.8.0",
"prettier": "^2.1.1"
} }
} }
...@@ -24,11 +24,12 @@ ...@@ -24,11 +24,12 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<link rel="stylesheet" href="%REACT_APP_STYLEGUIDE_URL%/css/styles.css" />
<title>React App</title> <title>React App</title>
</head> </head>
<body> <body class="h-screen">
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root" class="h-screen h-full w-full"></div>
<!-- <!--
This HTML file is a template. This HTML file is a template.
If you open it directly in the browser, you will see an empty page. If you open it directly in the browser, you will see an empty page.
......
.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);
}
}
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
import React from "react";
import {
BrowserRouter as Router,
Route,
Switch,
} from "react-router-dom";
import * as Sentry from "@sentry/react";
import Footer from "components/Footer";
import Navbar from "components/Navbar";
import Home from "pages/Home";
import ForVisitors from "pages/ForVisitors";
import ForPress from "pages/ForPress";
import Program from "pages/Program";
/**
* If configured, set up Sentry client that reports uncaught errors down to
* https://sentry.io.
*/
if (process.env.REACT_APP_SENTRY_DSN) {
Sentry.init({
dsn: process.env.REACT_APP_SENTRY_DSN,
tracesSampleRate: 0.1,
});
}
const BaseApp = () => {
return (
<>
<Router>
<Navbar />
<Switch>
<Route exact path="/" children={<Home />} />
<Route exact path="/program" children={<Program />} />
<Route exact path="/pro-ucastniky" children={<ForVisitors />} />
<Route exact path="/media" children={<ForPress />} />
</Switch>
<Footer />
</Router>
</>
);
};
const ErrorBoundaryFallback = () => (
<div className="h-screen w-screen flex justify-center items-center">
<div className="text-center">
<h1 className="text-5xl mb-4">V aplikaci došlo k chybě :(</h1>
<p className="text-lg">
Naši vývojáři o tom již byli informování a opraví to co nejdříve.
<br />
Omlouváme se za tuto nepříjemnost.
</p>
<a href="/" className="btn mt-8">
<div className="btn__body">Načíst znovu</div>
</a>
</div>
</div>
);
const App = Sentry.withProfiler(() => {
return (
<Sentry.ErrorBoundary fallback={ErrorBoundaryFallback} showDialog>
<BaseApp />
</Sentry.ErrorBoundary>
);
});
export default App;
import React from "react";
const Footer = () => {
return (
<footer className="footer bg-grey-700 text-white">
<div className="footer__main py-4 lg:py-16 container container--default">
<section className="footer__brand">
<img
src="https://www.va-fighters.com/pirati/krajska-sablona/dist/assets/img/logo.svg"
alt=""
className="w-32 md:w-40 pb-6"
/>
<p className="para hidden md:block md:mb-4 lg:mb-0 text-grey-200">
Piráti, 2021. Všechna práva vyhlazena. Sdílejte a nechte ostatní
sdílet za stejných podmínek.
</p>
</section>
<section className="footer__main-links bg-grey-700 text-white lg:grid grid-cols-3 gap-4">
<div className="pt-4 lg:py-0 border-t border-grey-400 lg:border-t-0">
<div className="footer-collapsible">
<span className="text-xl uppercase text-white footer-collapsible__toggle">
Program
</span>{" "}
<div className="">
<ul className="mt-6 space-y-2 text-grey-200">
<li>
<a href="#">Pátek</a>
</li>{" "}
<li>
<a href="#">Sobota</a>
</li>{" "}
<li>
<a href="#">Neděle</a>
</li>
</ul>
</div>
</div>
</div>
<div className="pt-8 pb-4 lg:py-0">
<div className="footer-collapsible">
<span className="text-xl uppercase text-white footer-collapsible__toggle">
Pro účastníky
</span>{" "}
<div className="">
<ul className="mt-6 space-y-2 text-grey-200">
<li>
<a href="#">Registrace účastníků</a>
</li>{" "}
<li>
<a href="#">Kudy na fórum</a>
</li>
<li>
<a href="#">Ubytování</a>
</li>
</ul>
</div>
</div>
</div>{" "}
<div className="py-4 lg:py-0 border-t border-grey-400 lg:border-t-0">
<div className="footer-collapsible">
<span className="text-xl uppercase text-white footer-collapsible__toggle">
Pro média
</span>{" "}
<div className="">
<ul className="mt-6 space-y-2 text-grey-200">
<li>
<a href="#">Registrace novinářů</a>
</li>{" "}
<li>
<a href="#">Informace pro novináře</a>
</li>{" "}
<li>
<a href="#">Presskit</a>
</li>
</ul>
</div>
</div>
</div>{" "}
</section>
<section className="footer__social lg:text-right">
<div className="flex flex-col md:flex-row lg:flex-col lg:items-end space-y-2 md:space-y-0 md:space-x-2 lg:space-x-0 lg:space-y-2">
<button className="btn btn--icon btn--blue-300 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth">
<div className="btn__body-wrap">
<div className="btn__body ">Pomoz nám</div>{" "}
<div className="btn__icon ">
<i className="ico--anchor"></i>
</div>
</div>
</button>
</div>
</section>
</div>
<section className="bg-black py-4 lg:py-12">
<div className="container container--default">
<div className="grid gap-4 grid-cols-1 md:grid-cols-2">
<div className="badge w-full">
<div className="avatar avatar--sm badge__avatar">
<img src="http://placeimg.com/100/100/people" alt="Avatar" />
</div>
<div className="badge__body">
<span className="head-heavy-2xs badge__title">
Andrej Ramašeuski
</span>
<p className="badge__occupation">Kontakt pro dobrovolníky</p>
<a
href="mailto:example@example.com"
className="contact-line contact-line--responsive icon-link badge__link"
>
<i className="ico--phone"></i>
<span>+420 777 123 123</span>
</a>
<a
href="mailto:example@example.com"
className="contact-line contact-line--responsive icon-link badge__link"
>
<i className="ico--envelope"></i>
<span>example@example.com</span>
</a>
</div>
</div>
<div className="badge w-full">
<div className="avatar avatar--sm badge__avatar">
<img src="http://placeimg.com/100/100/people" alt="Avatar" />
</div>
<div className="badge__body">
<span className="head-heavy-2xs badge__title">
Andrea Linhartová
</span>
<p className="badge__occupation">Kontakt pro média</p>
<a
href="mailto:example@example.com"
className="contact-line contact-line--responsive icon-link badge__link"
>
<i className="ico--phone"></i>
<span>+420 777 123 123</span>
</a>
<a
href="mailto:example@example.com"
className="contact-line contact-line--responsive icon-link badge__link"
>
<i className="ico--envelope"></i>
<span>example@example.com</span>
</a>
</div>
</div>
</div>
</div>
</section>
</footer>
);
};
export default Footer;
import React from "react";
import { NavLink } from "react-router-dom";
const HomeHero = () => {
return (
<article
className="hero py-24"
>
<div className="container container--default text-center">
<h1 className="head-alt-lg mb-4">12. Celostátní fórum</h1>
<h2 className="head-alt-xl">České pirátské strany</h2>
<p className="head-heavy-base mt-4">11. - 12. ledna, Pardubice</p>
<p className="head-heavy-sm">Kulturní centrum IDEON</p>
<div className="mt-4 md:mt-8 space-x-4">
<NavLink className="btn btn--blue-300 btn--icon btn--hoveractive btn--fullwidth md:btn--autowidth text-xl" to="/registrace">
<div className="btn__body-wrap">
<div className="btn__body ">Registrace</div>
<div className="btn__icon ">
<i className="ico--book"></i>
</div>
</div>
</NavLink>
<NavLink className="btn btn--violet-400 btn--icon btn--hoveractive btn--fullwidth md:btn--autowidth text-xl" to="/program">
<div className="btn__body-wrap">
<div className="btn__body ">Program</div>
<div className="btn__icon ">
<i className="ico--calendar"></i>
</div>
</div>
</NavLink>
</div>
</div>
</article>
);
};
export default HomeHero;
import React, { useState } from "react";
import { isBrowser } from "react-device-detect";
import { NavLink } from "react-router-dom";
const Navbar = () => {
const [showMenu, setShowMenu] = useState(isBrowser);
return (
<nav className="navbar navbar--simple">
<div className="container container--wide navbar__content navbar__content--initialized">
<div className="navbar__brand my-4 flex items-center lg:pr-8 lg:my-0">
<NavLink to="/">
<img
src={`${process.env.REACT_APP_STYLEGUIDE_URL}/images/logo-round-white.svg`}
className="w-8"
/>
</NavLink>
<NavLink to="/" className="pl-4 font-bold text-xl lg:border-r lg:border-grey-300 lg:pr-8 hover:no-underline">
Celostátní fórum 2021
</NavLink>
</div>
<div className="navbar__menutoggle my-4 flex justify-end lg:hidden">
<a
href="#"
onClick={() => setShowMenu(!showMenu)}
className="no-underline hover:no-underline"
>
<i className="ico--menu text-3xl"></i>
</a>
</div>
{showMenu && (
<>
<div className="navbar__main navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto">
<ul className="navbar-menu text-white">
<li className="navbar-menu__item">
<NavLink className="navbar-menu__link" to="/program">Program</NavLink>
</li>
<li className="navbar-menu__item">
<NavLink className="navbar-menu__link" to="/registrace">Registrace</NavLink>
</li>
<li className="navbar-menu__item">
<NavLink className="navbar-menu__link" to="/pro-ucastniky">Pro účastníky</NavLink>
</li>
<li className="navbar-menu__item">
<NavLink className="navbar-menu__link" to="/media">Pro média</NavLink>
</li>
</ul>
</div>
<div className="navbar__actions navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto self-start flex flex-col sm:flex-row lg:flex-col sm:space-x-4 space-y-2 sm:space-y-0 lg:space-y-2 xl:flex-row xl:space-x-2 xl:space-y-0">
<NavLink className="btn btn--white btn--icon btn--hoveractive btn--fullwidth md:btn--autowidth text-sm" to="/program">
<div className="btn__body-wrap">
<div className="btn__body ">Osobní zóna</div>
<div className="btn__icon">
<i className="ico--users"></i>
</div>
</div>
</NavLink>
</div>
</>
)}
</div>
</nav>
);
};
export default Navbar;
export default {
styleguideUrl: "https://styleguide.pir-test.eu/latest"
};
body { .h-screen {
margin: 0; min-height: 100vh;
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 { code {
......
import React from "react";
const ForPress = () => {
return (
<>
Press
</>
);
};
export default ForPress;
import React from "react";
const ForVisitors = () => {
return (
<>
Visitors
</>
);
};
export default ForVisitors;
import React from "react";
import HomeHero from "components/HomeHero";
const Home = () => {
return (
<>
<HomeHero />
<hr />
<section className="container container--default my-8 text-center">
<h1 className="head-alt-base mb-4">Celostátní fórum</h1>
<p>Celostátní fórum Pirátské strany je nejvyšším orgánem strany a zasedání se podle možností účastní každý člen strany.</p>
</section>
<hr />
<section className="container container--default my-8 text-center">
<h1 className="head-alt-base mb-4">Základní informace</h1>
<p>Celostátní fórum Pirátské strany je nejvyšším orgánem strany a zasedání se podle možností účastní každý člen strany.</p>
</section>
</>
);
};
export default Home;
import React from "react";
const Schedule = () => {
return (
<>
Schedule
</>
);
};
export default Schedule;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment