initial

okplanbo · Aug 22, 2023 · f9e047d · f9e047d
1 parent 4f19dff
commit f9e047d
Show file tree

Hide file tree

Showing 16 changed files with 3,735 additions and 2 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,21 @@
+/* eslint-disable */
+module.exports = {
+    env: { browser: true, es2020: true },
+    extends: [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:react-hooks/recommended",
+    ],
+    parser: "@typescript-eslint/parser",
+    parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+    plugins: ["react-refresh"],
+    rules: {
+        "react/jsx-boolean-value": "error",
+        "react-refresh/only-export-components": "warn",
+        "no-magic-numbers": ["error", { "ignore": [0] }],
+        "@typescript-eslint/no-explicit-any": "error",
+        indent: ["error", 4, { SwitchCase: 1 }],
+    },
+};
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,52 @@
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ['main']
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'npm'
+      - name: Install Yarn
+        run: npm install -g yarn
+      - name: Install dependencies
+        run: yarn install
+      - name: Build
+        run: yarn run build
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          # Upload dist repository
+          path: './dist'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1
diff --git 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?
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn lint
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-standard-scss"
+}  
diff --git a/README.md b/README.md
@@ -1,2 +1,18 @@
-# sia
-Daily loop
+# Sia
+Sia is georgian for List.
+
+# quick start
+yarn install
+
+# actions
+- yarn lint (cheching types, running stylelint and eslint)
+- yarn dev
+- yarn build
+
+# stack
+- Vite
+- React
+- TS
+- MUI
+
++ Modern Normalize, Stylelint, ESlint
diff --git a/index.html b/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="node_modules/modern-normalize/modern-normalize.css">
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+    <noscript>
+      <br />
+      <pre>
+        I see you're sailing the Web with a whitelist. Good job!
+
+        However, you need to enable JavaScript to run this app.
+      </pre>
+    </noscript>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,48 @@
+{
+  "name": "sia",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "yarn lint && vite build",
+    "eslint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "stylelint": "stylelint src/**/*.scss",
+    "type-check": "tsc --noemit",
+    "lint": "yarn stylelint && yarn eslint && yarn type-check",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource/roboto": "^5.0.2",
+    "@mui/icons-material": "^5.13.7",
+    "@mui/material": "^5.13.4",
+    "@mui/x-date-pickers": "^6.9.1",
+    "date-fns": "^2.30.0",
+    "modern-normalize": "^2.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-infinite-scroll-component": "^6.1.0",
+    "react-router-dom": "^6.12.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20.2.5",
+    "@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": "^4.0.0",
+    "eslint": "^8.38.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "husky": "^8.0.3",
+    "postcss": "^8.4.24",
+    "sass": "^1.63.3",
+    "stylelint": "^15.7.0",
+    "stylelint-config-standard-scss": "^9.0.0",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.9"
+  }
+}
diff --git a/src/App.scss b/src/App.scss
@@ -0,0 +1,68 @@
+html,
+body {
+  font-family: Roboto, Arial, Helvetica, sans-serif;
+  font-size: 1rem;
+}
+
+#root {
+  margin: 2rem auto;
+  padding: 1rem;
+  width: 70vw;
+}
+
+main {
+  padding: 1rem;
+  margin: 1rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+h1 {
+  text-align: center;
+}
+
+p {
+  margin-bottom: 0;
+}
+
+a {
+  text-decoration: none;
+  color: darkcyan;
+}
+
+.star {
+  display: inline-block;
+  height: 3rem;
+}
+
+.item {
+  padding: 0.2rem;
+}
+
+#root .progress {
+  height: 0.6rem;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+
+@media screen and (width <= 1024px) {
+  #root {
+      width: 70vw;
+  }
+
+  main {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media screen and (width <= 640px) {
+    #root {
+        width: 90vw;
+    }
+
+    main {
+      grid-template-columns: 1fr;
+    }
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,102 @@
+import { useState } from "react";
+
+import { Paper, Tooltip, FormControlLabel, Checkbox, 
+    Typography, LinearProgress } from "@mui/material";
+
+import "./App.scss";
+
+type Task = {
+    description: string;
+    checked: boolean;
+};
+
+const basicList = [
+    'Open to-do list',
+    'Make a bed',
+    'Brush teeth',
+    'Wordle',
+    'Stretch, push-ups',
+    'Cold shower',
+    'Glass of water',
+    'Brush hair',
+    'Breakfast',
+    'Leetcode challenge',
+    'Work smart, not hard',
+    'Check exchange rates',
+    'Finance management',
+    'Eat a fruit',
+    'Talk to a friend',
+    'Tasty lunch',
+    'Take a selfie',
+    'Cardio 8\'000 steps',
+    'Check email & reply',
+    'Read an article, book',
+    'Relax and rest',
+    'Podcast',
+    'Dinner',
+    'Wash dishes',
+    'Brush teeth before bed',
+    '23:00 - go to sleep',
+];
+
+const total_percent = 100;
+const storage_key = 'SIA_TASKS_STATE';
+
+const initialTasks: Task[] = basicList.map(description => {
+    return { description, checked: false }
+});
+initialTasks[0].checked = true;
+
+const saved_tasks = localStorage.getItem(storage_key);
+
+const calcProgress = (tasks: Task[]) => {
+    let completedCount = 0;
+    tasks.forEach(item => {
+        if (item.checked) {
+            completedCount++;
+        }
+    });
+    return total_percent / basicList.length * completedCount;
+}
+
+export default function App(): JSX.Element {
+    const [tasks, setTasks] = useState<Task[]>(saved_tasks ? JSON.parse(saved_tasks) : initialTasks);
+    const [progress, setProgress] = useState(calcProgress(tasks));
+
+    const toggleTask = (index: number) => {
+        const newTasks = [...tasks];
+        newTasks[index].checked = !newTasks[index].checked;
+        localStorage.setItem(storage_key, JSON.stringify(newTasks));
+        setTasks(newTasks);
+        setProgress(calcProgress(newTasks));
+    };
+
+    return (
+        <>
+            <Typography variant="h2" component="h1" align="center">
+                Sia
+                <Tooltip title="is Georgian for 'List'">
+                    <span className="star">
+                        *
+                    </span>
+                </Tooltip>
+            </Typography>
+            <Paper variant="outlined" component="main">
+                {tasks.map((task, index) => (
+                    <FormControlLabel
+                        className="item"
+                        key={index}
+                        label={task.description}
+                        control={
+                            <Checkbox
+                                checked={task.checked}
+                                onChange={() => toggleTask(index)}
+                            />
+                        }
+                    />
+                ))}
+            </Paper>
+            <LinearProgress variant="determinate" value={progress} className="progress" />
+        </>
+    );
+}
diff --git a/src/main.tsx b/src/main.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+import App from "./App.tsx";
+
+import "@fontsource/roboto/latin-300.css";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
+);
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />