initial app

2023-06-01 20:24:59 +02:00
parent bb19e15a40
commit d646c4d0f8
38 changed files with 9254 additions and 0 deletions
@@ -0,0 +1,46 @@
+module.exports = {
+  env: { browser: true, es2020: true },
+  extends: [
+    "eslint:recommended",
+    "react-app",
+    "airbnb-typescript",
+    "airbnb/hooks",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "prettier", // Help to cooperate ESLint and Prettier
+    "plugin:prettier/recommended",
+  ],
+  ignorePatterns: [
+    "/build",
+    "/dist",
+    "/node_modules",
+    "/.eslintrc.cjs",
+    "/vite.config.ts",
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: "latest",
+    project: "./tsconfig.json",
+    sourceType: "module",
+    tsconfigRootDir: __dirname,
+  },
+  plugins: ["react-refresh"],
+  rules: {
+    // Run prettier separately but use its configuration
+    // This speeds up on-the-fly linting during development
+    "prettier/prettier": "off",
+    "react-refresh/only-export-components": "warn",
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        devDependencies: true,
+      },
+    ],
+  },
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+};
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
@@ -0,0 +1,9 @@
+/node_modules
+# Ignore artifacts:
+/build
+/dist
+/coverage
+
+# generated code
+/src/api/naming
+/src/preview
@@ -0,0 +1,4 @@
+{
+  "importOrder": ["^[./]"],
+  "importOrderSeparation": true
+}
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Lukáš Čech</title>
+  </head>
+  <body>
+    <script>
+      window.global = window;
+      try {
+        window.APP_CONFIG = JSON.parse('{{ .Config }}');
+      } catch (e) {
+        console.debug('App uses development configuration');
+      }
+    </script>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
@@ -0,0 +1,48 @@
+{
+  "name": "cv",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "build": "npm run check && tsc && vite build",
+    "check": "npm run typecheck && echo \"Checking files with prettier\" && npm run prettier > /dev/null && npm run lint",
+    "dev": "vite",
+    "fix": "npm run prettier:format && npm run lint:fix",
+    "lint": "eslint src --ext ts,tsx",
+    "lint:fix": "eslint --fix src --ext ts,tsx",
+    "lint:fix:changed": "eslint --fix $(npm run --silent list:changed)",
+    "list:changed": "git diff HEAD --name-only --diff-filter=ACM --relative=app/console/src \"*.tsx\" \"*.ts\" \"*.js\" | sed 's#^#./src/#' ; git ls-files \"./src/*.tsx\" \"./src/*.ts\" -o --exclude-standard",
+    "prettier": "prettier --config ./.prettierrc --check 'src/**/*.{js,ts,tsx}'",
+    "prettier:format": "prettier --config ./.prettierrc --write 'src/**/*.{js,ts,tsx}'",
+    "prettier:format:changed": "prettier --config ./.prettierrc --write $(npm run --silent list:changed)",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@trivago/prettier-plugin-sort-imports": "^4.1.1",
+    "@types/react": "^18.0.37",
+    "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.59.0",
+    "@typescript-eslint/parser": "^5.59.0",
+    "@vitejs/plugin-react-swc": "^3.0.0",
+    "eslint": "^8.38.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "normalize.css": "^8.0.1",
+    "react-intl": "^6.4.2",
+    "react-router-dom": "^6.11.2",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.9"
+  }
+}
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-terminal" width="250px" height="250px" viewBox="0 0 24 24" stroke-width="1.00" stroke="rgba(1, 1, 1, 1)" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="50%" cy="50%" r="50%" stroke="none" stroke-width="0" fill="rgba(255, 255, 255, 1)"/><g transform="translate(2.40, 2.40) scale(0.8)"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 7l5 5l-5 5"/><line x1="12" y1="19" x2="19" y2="19"/></g>
+  
+  
+  
+</svg>
@@ -0,0 +1,17 @@
+import { Global } from "@emotion/react";
+import normalizeCss from "normalize.css/normalize.css?inline";
+import React from "react";
+import { IntlProvider } from "react-intl";
+
+import Router from "./views/Router";
+
+const App: React.FC = () => {
+  return (
+    <IntlProvider locale="en" defaultLocale="en">
+      <Global styles={normalizeCss} />
+      <Router />
+    </IntlProvider>
+  );
+};
+
+export default App;
@@ -0,0 +1,67 @@
+import React from "react";
+
+type ErrorHandler = (error: Error, info: React.ErrorInfo) => void;
+type ErrorHandlingComponent<Props> = (
+  props: Props,
+  error?: Error
+) => React.ReactNode;
+
+type ErrorState = { error?: Error };
+
+function Catch<Props extends object>(
+  component: ErrorHandlingComponent<Props>,
+  errorHandler?: ErrorHandler
+): React.ComponentType<Props> {
+  function Inner({ error, props }: { error?: Error; props: Props }) {
+    return <React.Fragment>{component(props, error)}</React.Fragment>;
+  }
+
+  return class CatchClass extends React.Component<Props, ErrorState> {
+    state: ErrorState = {
+      error: undefined,
+    };
+
+    static getDerivedStateFromError(error: Error) {
+      return { error };
+    }
+
+    componentDidCatch(error: Error, info: React.ErrorInfo) {
+      if (errorHandler) {
+        errorHandler(error, info);
+      }
+    }
+
+    render() {
+      return <Inner error={this.state.error} props={this.props} />;
+    }
+  };
+}
+
+const divStyles: React.CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+};
+
+const ErrorBoundary = Catch(function (
+  props: React.PropsWithChildren,
+  error?: Error
+) {
+  if (error) {
+    return (
+      <div style={divStyles}>
+        <h2>
+          There was an error on the page. Please reload the application and try
+          again.
+        </h2>
+        <p />
+        <p>{error.message}</p>
+      </div>
+    );
+  }
+
+  return <>{props.children}</>;
+});
+
+export default ErrorBoundary;
@@ -0,0 +1 @@
+export { default as ErrorBoundary } from "./ErrorBoundary";
@@ -0,0 +1,56 @@
+import styled from "@emotion/styled";
+import React from "react";
+
+import MainNavigation from "../Navigation/MainNavigation";
+
+const Root = styled("div")({
+  background: "rgb(215, 215, 215)",
+});
+
+const Container = styled("div")({
+  alignItems: "stretch",
+  display: "flex",
+  margin: "0 auto",
+  maxWidth: 1600,
+  minHeight: "100vh",
+  width: "100vw",
+});
+
+const Nav = styled("nav")({
+  background: "rgb(41, 62, 73)",
+  color: "white",
+  flex: "0 0 280px",
+  padding: "8px 20px",
+
+  "@media (max-width: 600px)": {
+    display: "none",
+  },
+
+  "& a": {
+    color: "white",
+  },
+});
+
+const Main = styled("main")({
+  background: "rgb(245, 245, 245)",
+  color: "rgb(25, 25, 25)",
+  flex: "1 0 500px",
+  padding: "8px 20px",
+});
+
+const MainLayout: React.FC<React.PropsWithChildren> = (props) => {
+  const { children } = props;
+
+  return (
+    <Root>
+      <Container>
+        <Nav>
+          <MainNavigation />
+        </Nav>
+        <Main>{children}</Main>
+      </Container>
+    </Root>
+  );
+};
+
+export default MainLayout;
@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+import { Link as RouterLink } from "react-router-dom";
+
+const Link = styled(RouterLink)({
+  color: "rgb(35, 115, 220)",
+});
+
+export default Link;
@@ -0,0 +1 @@
+export { default as Link } from "./Link";
@@ -0,0 +1,12 @@
+import React from "react";
+
+const MainNavigation: React.FC = () => {
+  return (
+    <>
+      <p>Contact</p>
+      <a href="mailto:linkedin@c3c.cz">linkedin@c3c.cz</a>
+    </>
+  );
+};
+
+export default MainNavigation;
@@ -0,0 +1,13 @@
+interface ConfigFromBackend {
+  commitTime: string;
+}
+
+interface MyWindow extends Window {
+  APP_CONFIG?: ConfigFromBackend;
+}
+
+declare const window: MyWindow;
+
+export const BUILD_TIMESTAMP: Date = window.APP_CONFIG?.commitTime
+  ? new Date(window.APP_CONFIG.commitTime)
+  : new Date();
@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+import App from "./App";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
@@ -0,0 +1,15 @@
+import React from "react";
+
+import MainLayout from "../components/Layout/MainLayout";
+
+const Dashboard: React.FC = () => {
+  return (
+    <MainLayout>
+      <h1>Lukáš Čech</h1>
+      <h2>DevOps Engineer</h2>
+      <p>(For the lack of a better name)</p>
+    </MainLayout>
+  );
+};
+
+export default Dashboard;
@@ -0,0 +1,34 @@
+import styled from "@emotion/styled";
+import React from "react";
+import { defineMessages, useIntl } from "react-intl";
+
+import { Link } from "../components/Link";
+
+const messages = defineMessages({
+  notFound: {
+    defaultMessage: "Nothing to see here",
+    id: "Router.NotFound",
+  },
+});
+
+const Root = styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  height: "100vh",
+  width: "100vw",
+});
+
+const NotFound = () => {
+  const intl = useIntl();
+
+  return (
+    <Root>
+      <p>{intl.formatMessage(messages.notFound)}</p>
+      <Link to="/">Go home</Link>
+    </Root>
+  );
+};
+
+export default NotFound;
@@ -0,0 +1,39 @@
+import React from "react";
+import { Outlet, RouterProvider } from "react-router-dom";
+import { createBrowserRouter } from "react-router-dom";
+
+import { ErrorBoundary } from "../components/ErrorBoundary";
+import Dashboard from "./Dashboard";
+
+const Layout: React.FC = () => {
+  return (
+    <ErrorBoundary>
+      <Outlet />
+    </ErrorBoundary>
+  );
+};
+
+const NotFound = React.lazy(() => import("./NotFound"));
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Layout />,
+    children: [
+      {
+        index: true,
+        element: <Dashboard />,
+      },
+      {
+        path: "*",
+        element: <NotFound />,
+      },
+    ],
+  },
+]);
+
+const Router = (): JSX.Element => {
+  return <RouterProvider router={router} />;
+};
+
+export default Router;
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  clearScreen: false,
+  plugins: [react()],
+})
				`@@ -0,0 +1 @@`
				`export { default as ErrorBoundary } from "./ErrorBoundary";`