Initial commit and basic home page functions

2024-06-26 14:33:06 -03:00
commit 3967eb67d5
14 changed files with 4616 additions and 0 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -0,0 +1,22 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react/jsx-no-target-blank': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    'indent': ['error' ,2]
+  },
+}
--- a/.gitignore
+++ b/.gitignore
@@ -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?
--- a/README.md
+++ b/README.md
@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
--- a/index.html
+++ b/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
+
+    <title>Diary Exposer</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "diary-exposer",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@phosphor-icons/react": "^2.1.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "vite": "^5.3.1"
+  }
+}
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import { House } from '@phosphor-icons/react';
+
+import { GREP_A_WORD } from './constants/options'
+import { OptionsRow } from './components/OptionsRow';
+
+import styles from './App.module.css'
+
+import './global.css'
+
+export function App() {
+  const [selectOption, setSelectOption] = useState('');
+
+  function handleHomeButtonClick() {
+    setSelectOption('');
+  }
+
+  return (
+    <div>
+      <header className={styles.header}>
+        <img src={'https://static-00.iconduck.com/assets.00/sushi-emoji-2048x2048-5itsruw8.png'} />
+        <p>My diary exposer</p>
+        <button className={styles.homeButton} onClick={handleHomeButtonClick}>
+          <House size={24} />
+        </button>
+        <OptionsRow onSelectOption={selectOption}/>
+      </header>
+
+      <div className={styles.wrapper}>
+        <h1>Welcome to my diary exposer!</h1>
+        <p>Please select one of the options:</p>
+        <OptionsRow onSelectOption={setSelectOption} />
+
+        { selectOption &&
+          <p>foo</p>
+        }
+      </div>
+    </div>
+  )
+}
--- a/src/App.module.css
+++ b/src/App.module.css
@@ -0,0 +1,55 @@
+.wrapper {
+  max-width: 70rem;
+  margin: 2rem auto;
+  padding: 0 1rem;
+
+  /* display: grid; */
+  /* grid-template-columns: 256px 1fr; */
+  /* gap: 2rem; */
+  /* align-items: flex-start; */
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+@media (max-width: 768px) {
+  html {
+    font-size: 87.5%;
+  }
+
+  .wrapper {
+    grid-template-columns: 1fr;
+  }
+}
+
+.header {
+  padding: 1rem;
+  display: flex;
+  align-items: center;
+}
+
+.header img {
+  height: 2rem;
+  margin-right: 1rem;
+}
+
+.header p {
+  margin-right: 1rem;
+  font-weight: bold;
+}
+
+.homeButton {
+  background: transparent;
+  border: 0;
+  color: var(--gray-400);
+  cursor: pointer;
+  line-height: 0;
+  border-radius: 2px;
+}
+
+.homeButton:hover {
+  color: var(--ice-cold);
+}
--- a/src/components/OptionsRow.jsx
+++ b/src/components/OptionsRow.jsx
@@ -0,0 +1,13 @@
+import { GREP_A_WORD } from '../constants/options'
+
+import styles from './OptionsRow.module.css';
+
+export function OptionsRow({ onSelectOption }) {
+  function handleSelectOption() {
+    onSelectOption(event.target.id);
+  }
+
+  return (
+    <button id={GREP_A_WORD} className={styles.button} onClick={handleSelectOption}>Grep a word</button>
+  )
+}
--- a/src/components/OptionsRow.module.css
+++ b/src/components/OptionsRow.module.css
@@ -0,0 +1,20 @@
+.button {
+  border-radius: 8px;
+  padding: 0.5rem;
+  border: none;
+  background-color: var(--gray-600);
+  color: var(--ice-cold);
+
+  transition: background-color 0.1s;
+}
+
+.button:hover {
+  background: var(--green-300);
+  color: var(--white);
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+button + button {
+  margin-left: 1rem;
+}
--- a/src/constants/options.js
+++ b/src/constants/options.js
@@ -0,0 +1 @@
+export const GREP_A_WORD = 'grep-a-word';
--- a/src/global.css
+++ b/src/global.css
@@ -0,0 +1,47 @@
+:root {
+  --white: #fff;
+  --black: #000;
+
+  --gray-100: #e1e1e6;
+  --gray-300: #c4c4cc;
+  --gray-400: #8d8d99;
+  --gray-600: #323238;
+  --gray-700: #29292e;
+  --gray-800: #202024;
+  --gray-900: #121214;
+
+  --green-300: #00B37E;
+  --green-500: #00875f;
+
+  --red-500: #F75A68;
+
+  /* source: https://hookagency.com/blog/website-color-schemes-2020/ */
+  --ice-cold: #a0d2eb;
+  --freeze-purple: #e5eaf5;
+  --medium-purple: #d0bdf4;
+  --purple-pain: #8458B3;
+  --heavy-purple: #494d5f;
+}
+
+:focus {
+  outline: transparent;
+  /* box-shadow: 0 0 0 2px var(--green-500); */
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background: var(--heavy-purple);
+  color: var(--gray-300);
+  -webkit-font-smoothing: aliased;
+}
+
+body, input, textarea, button {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 400;
+  font-size: 1rem;
+}
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { App } from './App.jsx'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  usePolling: true
+})