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

Initial commit

parent ca68e94a
No related branches found
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