Github CA (Formatting Check)

.github/workflows/format_check.yml

@@ -0,0 +1,36 @@
+name: Format Check
+
+on:
+  push:
+    branches:
+      - main
+      - format_ca
+  pull_request:
+    branches:
+      - main
+      - format_ca
+
+jobs:
+  prettier-check:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js and pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Format check on react-todo
+        run: cd packages/react-todo && pnpm install && pnpm run check
+
+      - name: Format check on svelte-todo
+        run: cd packages/svelte-todo && pnpm install && pnpm run check
+
+      - name: Format check on vanilla-todo
+        run: cd packages/vanilla-todo && pnpm install && pnpm run check
+
+      - name: Format check on vue-todo
+        run: cd packages/vue-todo && pnpm install && pnpm run check

packages/react-todo/package.json

@@ -8,7 +8,8 @@
         "build": "vite build",
         "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
         "preview": "vite preview",
-        "format": "pnpm exec -- npx prettier --write ."
+        "format": "pnpm exec -- npx prettier --write .",
+        "check": "pnpm exec -- npx prettier --check ."
     },
     "dependencies": {
         "react": "^18.2.0",

packages/svelte-todo/package.json

@@ -11,6 +11,7 @@
         "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
         "lint": "prettier --plugin-search-dir . --check . && eslint .",
         "format": "prettier --plugin-search-dir . --write .",
+        "prettier:check": "pnpm exec -- npx prettier --plugin-search-dir . --check .",
         "test:integration": "playwright test",
         "test:unit": "vitest"
     },
@@ -33,4 +34,4 @@
         "vitest": "^0.32.2"
     },
     "type": "module"
-}
+}

packages/vanilla-todo/css/style.css

@@ -1,117 +1,117 @@
 body {
-  background: #fff;
-  color: #333;
-  font-family: Lato, sans-serif;
+    background: #fff;
+    color: #333;
+    font-family: Lato, sans-serif;
 }
 .container {
-  display: block;
-  width: 400px;
-  margin: 100px auto 0;
+    display: block;
+    width: 400px;
+    margin: 100px auto 0;
 }
 ul {
-  margin: 0;
-  padding: 0;
+    margin: 0;
+    padding: 0;
 }
 li {
-  float: left;
+    float: left;
 }
-li, h3 {
-  clear:both;
-  list-style:none;
+li,
+h3 {
+    clear: both;
+    list-style: none;
 }
-input, button {
-  outline: none;
+input,
+button {
+    outline: none;
 }
 button {
-  background: none;
-  border: 0px;
-  color: #888;
-  font-size: 15px;
-  width: 60px;
-  margin: 10px 0 0;
-  font-family: Lato, sans-serif;
-  cursor: pointer;
+    background: none;
+    border: 0px;
+    color: #888;
+    font-size: 15px;
+    width: 60px;
+    margin: 10px 0 0;
+    font-family: Lato, sans-serif;
+    cursor: pointer;
 }
 button:hover {
-  color: #333;
+    color: #333;
 }
 
 h3,
-label[for='new-task'] {
-  color: #333;
-  font-weight: 700;
-  font-size: 15px;
-  border-bottom: 2px solid #333;
-  padding: 30px 0 10px;
-  margin: 0;
-  text-transform: uppercase;
+label[for="new-task"] {
+    color: #333;
+    font-weight: 700;
+    font-size: 15px;
+    border-bottom: 2px solid #333;
+    padding: 30px 0 10px;
+    margin: 0;
+    text-transform: uppercase;
 }
 input[type="text"] {
-  margin: 0;
-  font-size: 18px;
-  line-height: 18px;
-  height: 18px;
-  padding: 10px;
-  border: 1px solid #ddd;
-  background: #fff;
-  border-radius: 6px;
-  font-family: Lato, sans-serif;
-  color: #888;
+    margin: 0;
+    font-size: 18px;
+    line-height: 18px;
+    height: 18px;
+    padding: 10px;
+    border: 1px solid #ddd;
+    background: #fff;
+    border-radius: 6px;
+    font-family: Lato, sans-serif;
+    color: #888;
 }
 input[type="text"]:focus {
-  color: #333;
+    color: #333;
 }
 
-label[for='new-task'] {
-  display: block;
-  margin: 0 0 20px;
+label[for="new-task"] {
+    display: block;
+    margin: 0 0 20px;
 }
 input#new-task {
-  float: left;
-  width: 318px;
+    float: left;
+    width: 318px;
 }
 p > button:hover {
-  color: #0FC57C;
+    color: #0fc57c;
 }
 
-/ Task list /
-li {
-  overflow: hidden;
-  padding: 20px 0;
-  border-bottom: 1px solid #eee;
+/ Task list / li {
+    overflow: hidden;
+    padding: 20px 0;
+    border-bottom: 1px solid #eee;
 }
 li > input[type="checkbox"] {
-  margin: 0 10px;
-  position: relative;
-  top: 15px;
+    margin: 0 10px;
+    position: relative;
+    top: 15px;
 }
 li > label {
-  font-size: 18px;
-  line-height: 40px;
-  width: 237px;
-  padding: 0 0 0 11px;
+    font-size: 18px;
+    line-height: 40px;
+    width: 237px;
+    padding: 0 0 0 11px;
 }
-li >  input[type="text"] {
-  width: 226px;
+li > input[type="text"] {
+    width: 226px;
 }
 li > .delete:hover {
-  color: #CF2323;
+    color: #cf2323;
 }
 
-
 #completed-tasks label {
-  text-decoration: line-through;
-  color: #888;
+    text-decoration: line-through;
+    color: #888;
 }
 
 ul li input[type="text"] {
-  display: none;
+    display: none;
 }
 
 ul li.editMode input[type="text"] {
-  display: block;
+    display: block;
 }
 
 ul li.editMode label {
-  display: none;
+    display: none;
 }

packages/vanilla-todo/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
     <head>
         <title>Todo App</title>
@@ -54,4 +54,4 @@ <h3>Completed</h3>
         </div>
         <script type="module" src="/main.js"></script>
     </body>
-</html>
+</html>

packages/vanilla-todo/package.json

@@ -7,7 +7,8 @@
         "dev": "vite",
         "build": "vite build",
         "preview": "vite preview",
-        "format": "pnpm exec -- npx prettier --write ."
+        "format": "pnpm exec -- npx prettier --write .",
+        "check": "pnpm exec -- npx prettier --check ."
     },
     "devDependencies": {
         "vite": "^4.4.5"

packages/vue-todo/package.json

@@ -7,7 +7,8 @@
         "dev": "vite",
         "build": "vue-tsc && vite build",
         "preview": "vite preview",
-        "format": "pnpm exec -- npx prettier --write ."
+        "format": "pnpm exec -- npx prettier --write .",
+        "check": "pnpm exec -- npx prettier --check ."
     },
     "dependencies": {
         "vue": "^3.3.4"
@@ -18,4 +19,4 @@
         "vite": "^4.4.5",
         "vue-tsc": "^1.8.5"
     }
-}
+}