[#93] React Init

- Adds prettier
- Adds lint-staged and husky
- Adds bin scripts
- Adds initial react app

.circleci/config.yml

@@ -21,9 +21,19 @@ jobs:
       - run: echo "Building..."
       - run: echo "${ACF_DEVELOP}" >> ./client-mu-plugins/goodbids/auth.json
       - run: echo "$(< ./client-mu-plugins/goodbids/auth.json)"
-      - run: cd client-mu-plugins/goodbids && composer install --verbose
-      - run: cd client-mu-plugins/goodbids && npm install
+      - restore_cache:
+          name: Restore NPM Cache
+          keys:
+            - npm-deps-{{ checksum "package-lock.json" }}
+      - run: npm ci
+      - save_cache:
+          name: Save NPM Cache
+          key: npm-deps-{{ checksum "package-lock.json" }}
+          paths:
+            - package-lock.json
+            - node_modules
       - run: cd client-mu-plugins/goodbids && npm run build
+      - run: cd client-mu-plugins/goodbids && composer install --verbose
 
       # @TODO: Add tests
       # - run:
@@ -37,7 +47,7 @@ jobs:
 
       - add_ssh_keys:
           fingerprints:
-            - "6f:3b:07:c2:f1:23:5a:5d:9d:3a:b0:2d:b2:00:9d:0a"
+            - '6f:3b:07:c2:f1:23:5a:5d:9d:3a:b0:2d:b2:00:9d:0a'
 
       - run:
           name: Deploy -built branch to github

.editorconfig

@@ -16,7 +16,7 @@ trim_trailing_whitespace = true
 indent_style = tab
 indent_size = 4
 
-[{*.yml,*.json}]
+[{*.yml,*.json,*.css,*.js,*.ts,*.tsx}]
 indent_style = space
 indent_size = 2
 

client-mu-plugins/goodbids/.eslintrc.cjs → .eslintrc.cjs

@@ -5,6 +5,7 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:react-hooks/recommended',
+    'prettier',
   ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
@@ -15,4 +16,4 @@ module.exports = {
       { allowConstantExport: true },
     ],
   },
-}
+};

.github/workflows/ci.yml

@@ -10,7 +10,29 @@ concurrency:
   cancel-in-progress: ${{ startsWith(github.ref, 'refs/pull/') }}
 
 jobs:
-  to-do:
+  react-ci:
     runs-on: ubuntu-latest
+    timeout-minutes: 5
+    env:
+      HUSKY: 0
     steps:
-      - run: echo "CI goes here"
+      - name: Checkout Repository
+        uses: actions/checkout@v3
+
+      - name: Install node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Format
+        run: npm run format
+
+      - name: Compile
+        run: cd client-mu-plugins/goodbids && npm run compile

.gitignore

@@ -1,9 +1,6 @@
 # Dependencies
 ## Avoid any node_modules folders anywhere in the repo; see see https://docs.wpvip.com/how-tos/manage-dependencies/#version-management
 node_modules
-## Avoid package*.json files only at repo root
-/package.json
-/package-lock.json
 
 # Built-in; ship with vip-go-mu-plugins
 /plugins/akismet/
@@ -61,3 +58,6 @@ vendor
 
 # Credentials
 auth.json
+
+# Vite
+dist

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run staged

.lintstagedrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  './client-mu-plugins/goodbids/assets/**/*.{js,jsx,ts,tsx}': [
+    'eslint',
+    'prettier --check ./client-mu-plugins/goodbids/src/**/*.{js,jsx,ts,tsx}',
+  ],
+  './client-mu-plugins/goodbids/assets/**/*.css': [
+    'prettier --check ./client-mu-plugins/goodbids/src/**/*.css',
+  ],
+};

.nvmrc

@@ -0,0 +1 @@
+18

.prettierrc.cjs

@@ -0,0 +1,13 @@
+module.exports = {
+  arrowParens: 'always',
+  bracketSameLine: false,
+  bracketSpacing: true,
+  htmlWhitespaceSensitivity: 'css',
+  printWidth: 80,
+  proseWrap: 'preserve',
+  semi: true,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'all',
+  useTabs: false,
+};

.tool-versions

@@ -0,0 +1 @@
+nodejs 18.19.0

bin/format

@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+
+# bin/format: Check for formatting errors
+#
+# When to use:
+#  - When you want to check for formatting errors
+
+set -e
+
+cd "$(dirname "$0")/.."
+
+npm run format

bin/format-fix

@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+
+# bin/format-fix: Fix formatting errors
+#
+# When to use:
+#  - When you want to fix for formatting errors
+
+set -e
+
+cd "$(dirname "$0")/.."
+
+npm run format:fix

bin/install

@@ -0,0 +1,18 @@
+#!/usr/bin/env bash
+
+# bin/install: Install dependencies
+#
+# When to use:
+#  - When you want to install dependencies
+
+set -e
+
+cd "$(dirname "$0")/.."
+
+# Install composer dev dependencies
+composer install
+npm install
+
+# Install must-use plugin dependencies
+cd client-mu-plugins/goodbids
+composer install

bin/lint

@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+
+# bin/lint: Check for linting errors
+#
+# When to use:
+#  - When you want to check for linting errors
+
+set -e
+
+cd "$(dirname "$0")/.."
+
+npm run lint

bin/lint-fix

@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+
+# bin/lint-fix: Fix linting errors
+#
+# When to use:
+#  - When you want to fix linting errors
+
+set -e
+
+cd "$(dirname "$0")/.."
+
+npm run lint:fix

bin/start

@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+
+# bin/start: Start local dev with VIP CLI
+#
+# When to use:
+#  - When you want to run the WP server
+
+set -e
+
+cd "$(dirname "$0")/.."
+
+vip dev-env --slug=goodbids start

bin/stop

@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+
+# bin/start: Stop local dev with VIP CLI
+#
+# When to use:
+#  - When you want to stop the WP server
+
+set -e
+
+cd "$(dirname "$0")/.."
+
+vip dev-env --slug=goodbids stop

client-mu-plugins/goodbids/blocks/bid-now/render.php

@@ -9,6 +9,7 @@
  */
 
 $bid_now = new GoodBids\Blocks\BidNow( $block );
+$vite = new GoodBids\Frontend\Vite( );
 
 // Bail early if we're not inside an Auction post type.
 if ( ! $bid_now->display() ) :
@@ -23,3 +24,15 @@ class="wp-block-button__link wp-element-button w-full block text-center"
 		<?php echo wp_kses_post( $bid_now->get_button_text() ); ?>
 	</a>
 </div>
+<div
+	id="bidding-block"
+	data-auction-id="auction-id"
+	data-initial-bids="0"
+	data-initial-raised="0"
+	data-initial-last-bid="0"
+	initial-end-time="no-op"
+	initial-free-bids="3"
+	initial-user-bids="500"
+	initial-last-bidder="user-id"
+></div>
+

client-mu-plugins/goodbids/package.json

@@ -4,11 +4,12 @@
   "version": "1.0.0",
   "type": "module",
   "engines": {
-    "node": ">=16.10.0",
-    "npm": ">=7.24.0"
+    "node": ">=18.19.0",
+    "npm": ">=10.2.3"
   },
   "scripts": {
     "build": "tsc && vite build && wp-scripts build",
+    "compile": "tsc",
     "check-engines": "wp-scripts check-engines",
     "check-licenses": "wp-scripts check-licenses",
     "dev": "APP_ENV=dev vite --host",
@@ -31,16 +32,9 @@
   "devDependencies": {
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "@typescript-eslint/parser": "^6.14.0",
     "@vitejs/plugin-react": "^4.2.1",
     "@wordpress/scripts": "^26.11.0",
     "autoprefixer": "^10.4.16",
-    "eslint": "^8.55.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
     "path": "^0.12.7",
     "postcss": "^8.4.32",
     "postcss-import": "^15.1.0",

client-mu-plugins/goodbids/postcss.config.js

@@ -1,6 +1,6 @@
 export default {
-	plugins: {
-		tailwindcss: {},
-		autoprefixer: {},
-	},
-  };
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

client-mu-plugins/goodbids/src/admin.tsx

@@ -1 +1 @@
-import './assets/css/admin.css'
+import './assets/css/admin.css';

client-mu-plugins/goodbids/src/assets/css/admin.css

@@ -1,21 +1,21 @@
 .form-field #gbnp-legal-name,
 .form-field #gbnp-ein,
 .form-field #gbnp-website {
-	max-width: 25em;
+  max-width: 25em;
 }
 
 .warning-message {
-	background: #fff;
-	border: 1px solid #c3c4c7;
-	border-left: 4px solid #dba617;
-	box-shadow: 0 1px 1px rgba(0,0,0,.04);
-	display: inline-block;
-	margin: 5px 0 15px;
-	padding: 1px 12px;
+  background: #fff;
+  border: 1px solid #c3c4c7;
+  border-left: 4px solid #dba617;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
+  display: inline-block;
+  margin: 5px 0 15px;
+  padding: 1px 12px;
 }
 .warning-message p {
-	font-size: 13px;
-	line-height: 1.5;
-	margin: 0.5em 0;
-	padding: 2px;
+  font-size: 13px;
+  line-height: 1.5;
+  margin: 0.5em 0;
+  padding: 2px;
 }

client-mu-plugins/goodbids/src/assets/css/main.css

@@ -5,10 +5,9 @@
 @tailwind components;
 @tailwind utilities;
 
-
 @layer components {
-	#vip-non-prod-bar,
-	#a8c-debug-flag {
-		@apply hidden;
-	}
+  #vip-non-prod-bar,
+  #a8c-debug-flag {
+    @apply hidden;
+  }
 }