Feature: React Bidding Block (#115)

* [#93] React Init

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

* [#93] React Init WordPress Block Changes (#153)

- Custom React Block for Bidding
- Adds packages for WP Script blocks
- Adjust TS Config

* [#94] Metrics but WP (#155)

- Adds driver and metrics component
- Adjusts Tailwind content paths
- Adds inputs for new components
- Adds script to handle components in dev mode
- Moves metrics into the WP block

* [#95] Countdown Timer (#148)

- Adds countdown timer component and functions
- Adjusts initial state for demo
- Adjusts font styles
- Fixes gitignore build

* [#96] Bid Button (#149)

- Adds clsx
- Adds bid button

* [#97] Free Bids (#150)

- Adds free bids button
- Adds demo data

* [#100] Participation (#151)

- Adds participation component

* [#101] Free Bids (#152)

- Adds free bids promo
- Adds temporary hand icon

* [#140] Websocket Connection (#167)

- Installs zod and zustand
- Adds attributes to block.json
- Adds auction store
- Adds types
- Changes initial state to data attributes
- Adjusts use of data attributes and useAuction
- Adds websocket connection
- Hardcodes WS URL for now.

.circleci/config.yml

@@ -21,9 +21,9 @@ 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
+      - run: cd client-mu-plugins/goodbids && npm ci
       - run: cd client-mu-plugins/goodbids && npm run build
+      - run: cd client-mu-plugins/goodbids && composer install --verbose
 
       # @TODO: Add tests
       # - run:

.github/workflows/ci.yml

@@ -10,7 +10,28 @@ 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
+
+      - name: Install dependencies
+        run: cd client-mu-plugins/goodbids && npm ci
+
+      - name: Lint
+        run: cd client-mu-plugins/goodbids && npm run lint
+
+      - name: Format
+        run: cd client-mu-plugins/goodbids && npm run format
+
+      - name: Compile
+        run: cd client-mu-plugins/goodbids && npm run compile

.gitignore

@@ -1,6 +1,7 @@
 # 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
@@ -63,3 +64,7 @@ vendor
 # Sensitive data
 auth.json
 client-mu-plugins/vip-env-vars.local.php
+
+# Vite
+dist
+build

.husky/pre-commit

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

.nvmrc

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

.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")/.."
+
+cd client-mu-plugins/goodbids && 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")/.."
+
+cd client-mu-plugins/goodbids && 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
+
+# Install must-use plugin dependencies
+cd client-mu-plugins/goodbids
+composer install
+npm 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")/.."
+
+cd client-mu-plugins/goodbids && 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")/.."
+
+cd client-mu-plugins/goodbids && npm run lint:fix

bin/start

@@ -0,0 +1,13 @@
+#!/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
+echo "Don't forget to run bin/start-vite to start the Vite dev server"

bin/start-vite

@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+
+# bin/start-vite: Start local Vite dev server
+#
+# When to use:
+#  - After running `bin/start` to start the WP server
+
+set -e
+
+cd "$(dirname "$0")/.."
+
+cd client-mu-plugins/goodbids && npm run dev

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/.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 },
     ],
   },
-}
+};

client-mu-plugins/goodbids/.gitignore

@@ -1,22 +1,2 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-dist
+# Build files.
 build
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?

client-mu-plugins/goodbids/.lintstagedrc.cjs

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

client-mu-plugins/goodbids/.prettierrc.cjs

@@ -0,0 +1,22 @@
+module.exports = {
+	arrowParens: 'always',
+	bracketSameLine: false,
+	bracketSpacing: true,
+	htmlWhitespaceSensitivity: 'css',
+	printWidth: 80,
+	proseWrap: 'preserve',
+	semi: true,
+	singleQuote: true,
+	tabWidth: 4,
+	useTabs: true,
+	trailingComma: 'all',
+	overrides: [
+		{
+			files: ['*.yml', '*.json'],
+			options: {
+				useTabs: false,
+				tabWidth: 2,
+			},
+		},
+	],
+};