Merge pull request #9 from dcpesses/feature/prerelease-cleanup

Feature/prerelease cleanup
dcpesses · Feb 28, 2024 · 7d69a29 · 7d69a29
2 parents 623d91b + 20a100e
commit 7d69a29
Show file tree

Hide file tree

Showing 7 changed files with 339 additions and 225 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -81,7 +81,7 @@ jobs:
     # See https://devblogs.microsoft.com/devops/i-need-manual-approvers-for-github-actions-and-i-got-them-now/
     environment:
       name: prod
-      url: https://dcpesses.github.io/vite-react-ts-gh/
+      url: https://dcpesses.github.io/vite-react-ts-gh/ # <- Change to your site url
     steps:
       # Download dist artifacts
       - uses: actions/download-artifact@v4
@@ -92,8 +92,8 @@ jobs:
       - name: Set current date as env variable
         run: echo "NOW=$(TZ=America/Los_Angeles date +'%F %T %Z')" >> $GITHUB_ENV
 
-      - name: Debug current date
-        run: echo "${{ env.NOW }}" # Gives "2024-02-16 16:53:32 PST"
+      # - name: Debug current date
+      #   run: echo "${{ env.NOW }}" # Gives "2024-02-16 16:53:32 PST"
 
       - name: Find and Replace
         uses: jacobtomlinson/gha-find-replace@v3

diff --git a/README.md b/README.md
@@ -9,26 +9,31 @@
 
 This a React 18 + Redux Toolkit + TypeScript + Vitest and React Testing Library + GitHub Actions starter template built with Vite.
 
-Based on [pchmn/vite-react-ts-ghactions-template](https://github.com/pchmn/vite-react-ts-ghactions-template/)
-
 [Demo](https://dcpesses.github.io/vite-react-ts-gh/)
 
+![image](https://github.com/dcpesses/vite-react-ts-gh/assets/184237/8817ca34-77e2-4eaa-b220-b94c31a9ba6a)
+
+Based on [pchmn/vite-react-ts-ghactions-template](https://github.com/pchmn/vite-react-ts-ghactions-template/)
+
 </div>
 
 ## Features
 
-Designed as a starter template for those with the following requirements:
+Designed as a nifty React/Vite starter template with the following furnishings:
 
-- Single Page Application with React Hooks
+- Simple single page application - no routing required
 - Compiles TypeScript yet also allows Javascript
+  - Allows transitioning existing .js(x) files
 - Linting for both TypeScript & Javascript
-- Deployment to Github Pages on commit/PR merge to main branch
-
-Additionally provides examples of the following component:
-- Simple counter app using React state
-- Advanced counter app using Redux Toolkit
- - Includes Async Thunks to emulate API calls
-- To-do app (with CRUD ops) using Redux Toolkit
+- Automatic precommit linting and git message validation
+- Deployment to Github Pages on commit/PR merge to primary branch
+  - Workflow includes Codecov integration for coverage analysis
+  - Automatically writes date & time of deployment to HTML
+- Demo playground of example apps, with 100% unit-test coverage
+  - Simple counter app using React state
+  - Advanced counter app using Redux Toolkit
+    - Includes Async Thunks to emulate API calls
+  - To-do CRUD app using Redux Toolkit
 
 ### Overview
 
@@ -68,8 +73,7 @@ npx degit dcpesses/vite-react-ts-gh app_name
 
 ### Usage
 
-<!-- > Project was built using [`pnpm`](https://pnpm.io/installation#using-npm). If you want to use `npm` or `yarn`, just don't forget to update GitHub Actions workflow (`.github/workflows/ci.yml`). -->
-> Project built using `npm`. If you want to use `pnpm` or `yarn`, just don't forget to update GitHub Actions workflow (`.github/workflows/ci.yml`).
+ Project built using `npm`. If you want to use `pnpm` or `yarn`, just don't forget to update GitHub Actions workflow ([`.github/workflows/ci.yml`](.github/workflows/ci.yml)).
 
 #### Install
 
@@ -102,6 +106,9 @@ npm run test
 
 # with coverage
 npm run test:ci
+
+# watch for changes
+npm run test:watch
 ```
 #### Serve
 
@@ -113,11 +120,11 @@ npm run serve
 
 ## Configuration for GitHub Actions
 
-If you want to use GitHub Actions in your repo, you'll need to make little configuration.
+In order to use GitHub Actions in your repo, you'll need to first make a few configuration updates.
 
-Actual [workflow](https://github.com/dcpesses/vite-react-ts-gh/blob/main/.github/workflows/ci.yml) is:
+The actual workflow can be found under [`.github/workflows/ci.yml`](.github/workflows/ci.yml).
 
-![image](https://user-images.githubusercontent.com/12658241/236196559-854755f3-03aa-431d-af43-f7352b40f084.png)
+![image](https://github.com/dcpesses/vite-react-ts-gh/assets/184237/182f4ad6-adab-4270-9d3c-d83538d272b0)
 
 ### Build & Test
 
@@ -132,7 +139,9 @@ Build and test react app.
 Run [Codecov](https://about.codecov.io/) analysis.
 
 **Configuration**: <br>
-[Create a Codecov token](https://docs.codecov.com/docs/quick-start#step-2-get-the-repository-upload-token) for your repo and add it as a `CODECOV_TOKEN` secret in your repo.
+[Create a Codecov token](https://docs.codecov.com/docs/quick-start#step-2-get-the-repository-upload-token) for your repo and add it as a `CODECOV_TOKEN` secret in your repo under Secrets and variables > Actions > Repository secrets.
+
+![image](https://github.com/dcpesses/vite-react-ts-gh/assets/184237/bb9f7da1-8d90-455e-b131-43577842cc5e)
 
 ### Deploy
 
@@ -146,12 +155,12 @@ Deploy react app to GitHub Pages.
   - If you want to keep it, you need to create a [new environment with manual approve](https://devblogs.microsoft.com/devops/i-need-manual-approvers-for-github-actions-and-i-got-them-now/) in your repo, and then replace `environment` config of `deploy` job in `.github/workflows/ci.yml`:
     - `environment.name` = name of the environment created in your repo
     - `environment.url` = link to your github pages
-  - If your want to remove it, just delete `environment` config of `deploy` job in `.github/workflows/ci.yml`
+  - If your want to remove it, just delete the `environment` config section of the `deploy` job in `.github/workflows/ci.yml`
 
 Don't forget to [setup your repo](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-from-a-branch) to deploy from your GitHub Pages branch. (Defaults to `gh-pages` unless `publish_branch` is specified in the `peaceiris/actions-gh-pages` config.)
 
 ## GitHub Pages
 
-There are modifications on `index.html`, and a new `404.html` file in the project to make it work well with GitHub Pages.
+There are additional modifications on `index.html`, and a new `404.html` file in the project to make it work well with GitHub Pages.
 
 > See https://github.com/rafgraph/spa-github-pages for more info.
diff --git a/src/App.css b/src/App.css
@@ -1,36 +1,87 @@
-.App {
-  text-align: center;
+/* variables */
+:root{
+  --text-primary: #fff;
+  --bg-primary: #212529;
+  --bg-secondary: #13111c;
+
+  /* component override examples */
+  --todo-text-primary: #fff!important;
+  --todo-bg-form-rgb: 153, 102, 204!important;
+  --todo-bg-item-rgb: 102, 153, 204!important;
+  --todo-bg-alpha: 0.35!important;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+/* reset */
+* {
+  box-sizing: border-box;
+}
+body, p, ul, li {
+  margin: 0;
+  padding: 0;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+/* base styles */
+body {
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
+  min-height: 100vh;
+}
+.h1, .h2, .h3, .h4, .h5, .h6,
+h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: .5rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+button {
+  cursor: pointer;
+}
+
+.App {
+  text-align: center;
 }
 
 .App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+  background-color: var(--bg-primary);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  font-size: calc(8px + 0.8vmin);
+  color: var(--text-primary);
+}
+.App-header p {
+  margin-bottom: 1rem;
 }
 
 .App-subheader {
-  font-size: calc(10px + 1.5vmin);
+  font-size: calc(10px + 1.25vmin);
+  border-bottom: 1px solid #495057;
+  color: #dee2e6;
+  font-size: 16px;
+  text-align: left;
+  padding-bottom: 0.5rem;
 }
 
-.App-subheader + div {
-  border: 1px solid #999;
-  padding: calc(0.5rem + 0.5vmin)
+.App-logo {
+  height: 5vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-logo + .h2 {
+  display: inline-block;
+  font-size: calc(10px + 1.5vmin);
+  line-height: 5vmin;
+  vertical-align: top;
+  padding-right: 2vmin;
+  margin: 0;
+  font-weight: bold;
 }
 
 .App-link {
@@ -45,26 +96,46 @@
     transform: rotate(360deg);
   }
 }
-
-button {
-  font-size: calc(10px + 2vmin);
-  cursor: pointer;
+.App-examples {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-left: auto;
+  margin-right: auto;
 }
 
-.container {
-  display: flex;
+.App-examples > div {
+  display: grid;
   align-items: flex-start;
-  justify-content: center;
-  flex-flow: row wrap;
+  justify-content: space-evenly;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 1rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
 }
-.container .col50 {
-  width: 48%;
-  padding: 1%;
+
+.App-example {
+  display:flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-width: 100%;
+  width: 80vw;
+  box-sizing: border-box;
+  box-shadow: 0px 0px 16px rgba(40,97,230, 0.2);
+  background-color: rgb(33, 37, 41, 0.8);
+  border: 1px solid rgb(40, 97, 230, 0.8);
+  padding: calc(0.5rem + 0.5vmin);
+  border-radius: 0.5rem;
+  padding: 1rem;
 }
 
-/* Extra small devices (portrait phones, less than 576px) */
-@media (max-width: 575.98px) {
-  .container .col50 {
+@media (min-width: 960px) {
+  .App-examples > div {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-auto-rows: 1fr;
+  }
+  .App-example {
+    height: 100%;
     width: 100%;
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,31 +1,21 @@
-import './App.css';
 import {Counter} from './features/state-counter/Counter';
 import {ReduxCounter} from './features/redux-counter/ReduxCounter';
 
 import Todo from './features/todos/Todos';
 
 import logo from '@/assets/logo.svg';
 
+import './App.css';
+
 function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>Hello Vite + React!</p>
-        <div className="container">
-          <div className="col50">
-            <h3 className="App-subheader">Redux Counter Example</h3>
-            <ReduxCounter />
-          </div>
-          <div className="col50">
-            <h3 className="App-subheader">State Counter Example</h3>
-            <Counter />
-          </div>
-        </div>
-
-        <div>
 
-        </div>
+        <p>
+          <img src={logo} className="App-logo" alt="logo" />
+          <span className="h2">Hello Vite + React!</span>
+        </p>
         <p>
           Edit <code>App.tsx</code> and save to test HMR updates.
         </p>
@@ -45,11 +35,30 @@ function App() {
         </p>
       </header>
 
-      <hr />
+      <h1>Examples</h1>
+
+      <div className="App-examples">
+        <div>
+          <div className="App-example">
+            <h3 className="App-subheader">Redux To-Dos</h3>
+            <Todo />
+            <div></div>
+          </div>
+
+          <div className="App-example">
+            <h3 className="App-subheader">Redux Counter</h3>
+            <ReduxCounter />
+            <div></div>
+          </div>
+
+          <div className="App-example">
+            <h3 className="App-subheader">State Counter</h3>
+            <Counter />
+            <div></div>
+          </div>
+        </div>
+
 
-      <div className="App-Todos">
-        <h2>Todos</h2>
-        <Todo />
       </div>
     </div>
   );